/*! WindspeedSEO Visual System - SEO competitor analysis objects v1.4.4
 * Objects built only for the SEO competitor analysis page: a shared-queries position matrix, content-gap bars,
 * a movement-alert feed and a "where to compete first" opportunity map. Same pattern as ws-visual-ai.css:
 * one root class (.ws-cx) on a distinct element tag (article / aside / header / section), styled by structure,
 * with .ws-cx-on marking the item that matters most. Loads after ws-visual-ai.css.
 */

/* two hero parts lost their single-use classes to free global class slots; they are styled by position now */
html .elementor .ws-hx .ws-hx-rrow--you > .e-con:first-child { flex: 1 1 auto; min-width: 0; }
html .elementor .ws-hx .ws-hx-meter > .e-con:first-child { flex: 0 0 auto; width: auto; }

html .elementor .ws-cx .e-div-block-base { min-width: 0; }
html .elementor .ws-cx .e-paragraph-base { margin: 0; }

/* ============================================================ A. SHARED-QUERIES POSITION MATRIX  (article.ws-cx) */
html .elementor article.ws-cx { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 560px; }
html .elementor article.ws-cx > .e-con { position: relative; display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; }
html .elementor article.ws-cx > .e-con:first-child { padding-block: 4px 10px; border-bottom: 1px solid var(--ws-border-default); border-radius: 0; }
html .elementor article.ws-cx > .e-con:first-child .e-paragraph-base { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ws-text-muted); text-align: center; }
html .elementor article.ws-cx > .e-con:first-child .e-paragraph-base:first-child { text-align: left; }
html .elementor article.ws-cx > .e-con:first-child > :nth-child(2) { color: var(--ws-color-brand-green-700); }
html .elementor article.ws-cx > .e-con:not(:first-child):nth-child(even) { background: var(--ws-surface-secondary); }
html .elementor article.ws-cx > .e-con:not(:first-child) > .e-paragraph-base { font-size: 14px; font-weight: 600; color: var(--ws-text-primary); }
html .elementor article.ws-cx > .e-con:not(:first-child) > .e-con { justify-self: center; width: 36px; height: 36px; border-radius: 9999px; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--ws-color-accent-data-blue-200); }
html .elementor article.ws-cx > .e-con:not(:first-child) > .e-con .e-paragraph-base { font-family: var(--ws-mono); font-size: 13px; font-weight: 700; color: var(--ws-color-accent-data-blue-800); }
html .elementor article.ws-cx > .e-con:not(:first-child) > :nth-child(2) { border-color: var(--ws-color-brand-green-300); background: var(--ws-color-brand-green-50); }
html .elementor article.ws-cx > .e-con:not(:first-child) > :nth-child(2) .e-paragraph-base { color: var(--ws-color-brand-green-800); }
html .elementor article.ws-cx > .e-con:not(:first-child) > .ws-cx-on { background: #347FA8; border-color: #347FA8; box-shadow: 0 6px 16px -8px rgba(52, 127, 168, .8); }
html .elementor article.ws-cx > .e-con:not(:first-child) > .ws-cx-on .e-paragraph-base { color: #fff; }
html .elementor article.ws-cx > .e-con:not(:first-child) > :nth-child(2).ws-cx-on { background: #83B422; border-color: #83B422; box-shadow: 0 6px 16px -8px rgba(83, 116, 24, .8); }
html .elementor article.ws-cx > .e-con:not(:first-child) > :nth-child(2).ws-cx-on .e-paragraph-base { color: #fff; }
html .elementor article.ws-cx > .e-con > :nth-child(3) { --col: 1; } html .elementor article.ws-cx > .e-con > :nth-child(4) { --col: 2; } html .elementor article.ws-cx > .e-con > :nth-child(5) { --col: 3; }
html .elementor article.ws-cx > .e-con:nth-child(3) { --row: 1; } html .elementor article.ws-cx > .e-con:nth-child(4) { --row: 2; } html .elementor article.ws-cx > .e-con:nth-child(5) { --row: 3; }
html .elementor article.ws-cx > .e-con:nth-child(6) { --row: 4; } html .elementor article.ws-cx > .e-con:nth-child(7) { --row: 5; }
/* a highlight row travels down the table */
html .elementor article.ws-cx::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 52px; border-radius: 10px; pointer-events: none; border: 1.5px solid rgba(76, 156, 200, .45); background: rgba(76, 156, 200, .06); opacity: 0; }
.ws-js article.ws-cx.ws-in::after { animation: ws-cx-scan 9s ease-in-out 2.4s infinite; }
@keyframes ws-cx-scan { 0% { opacity: 0; translate: 0 36px; } 6% { opacity: 1; } 88% { opacity: 1; translate: 0 calc(36px + 5 * 58px); } 100% { opacity: 0; translate: 0 calc(36px + 5 * 58px); } }
.ws-js article.ws-cx > .e-con:not(:first-child) { opacity: 0; translate: -16px 0; }
.ws-js article.ws-cx.ws-in > .e-con:not(:first-child) { opacity: 1; translate: 0 0; transition: opacity 420ms var(--ws-ease-out) calc(var(--row, 0) * 110ms), translate 520ms var(--ws-ease-out) calc(var(--row, 0) * 110ms); }
.ws-js article.ws-cx > .e-con:not(:first-child) > .e-con { scale: .3; opacity: 0; }
.ws-js article.ws-cx.ws-in > .e-con:not(:first-child) > .e-con { scale: 1; opacity: 1; transition: scale 520ms cubic-bezier(.34, 1.56, .64, 1) calc(700ms + var(--col, 0) * 260ms + var(--row, 0) * 40ms), opacity 300ms ease-out calc(700ms + var(--col, 0) * 260ms + var(--row, 0) * 40ms); }
.ws-js article.ws-cx.ws-in > .e-con > .ws-cx-on { animation: ws-cx-lead 3.2s ease-in-out calc(2.2s + var(--row, 0) * .35s) infinite; }
@keyframes ws-cx-lead { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }

/* ============================================================ B. CONTENT-GAP BARS  (aside.ws-cx) */
html .elementor aside.ws-cx { display: flex; flex-direction: column; gap: 16px; }
html .elementor aside.ws-cx > .e-con { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 3fr) auto; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--ws-border-default); background: #fff; }
html .elementor aside.ws-cx > .ws-cx-on { border-color: var(--ws-color-brand-green-300); box-shadow: 0 12px 26px -18px rgba(83, 116, 24, .6); }
html .elementor aside.ws-cx > .e-con > .e-paragraph-base:first-child { font-size: 14px; font-weight: 600; color: var(--ws-text-primary); }
html .elementor aside.ws-cx > .e-con > .e-con { display: flex; flex-direction: column; gap: 6px; }
html .elementor aside.ws-cx > .e-con > .e-con > .e-con { height: 10px; border-radius: 9999px; transform-origin: left center; }
html .elementor aside.ws-cx > .e-con > .e-con > :first-child { width: var(--them, 60%); background: linear-gradient(90deg, #347FA8, #6FB2D5); }
html .elementor aside.ws-cx > .e-con > .e-con > :last-child { width: var(--you, 20%); background: linear-gradient(90deg, #83B422, #A1CB45); }
html .elementor aside.ws-cx > .e-con > .e-paragraph-base:last-child { font-family: var(--ws-mono); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 9999px; background: var(--ws-color-accent-data-blue-50); color: var(--ws-color-accent-data-blue-800); white-space: nowrap; }
html .elementor aside.ws-cx > .ws-cx-on > .e-paragraph-base:last-child { background: var(--ws-color-brand-green-100); color: var(--ws-color-brand-green-800); }
html .elementor aside.ws-cx > :nth-child(1) { --them: 82%; --you: 24%; --g: 0; } html .elementor aside.ws-cx > :nth-child(2) { --them: 70%; --you: 40%; --g: 1; }
html .elementor aside.ws-cx > :nth-child(3) { --them: 64%; --you: 14%; --g: 2; } html .elementor aside.ws-cx > :nth-child(4) { --them: 56%; --you: 46%; --g: 3; }
html .elementor aside.ws-cx > :nth-child(5) { --them: 44%; --you: 10%; --g: 4; }
.ws-js aside.ws-cx > .e-con { opacity: 0; translate: 0 14px; }
.ws-js aside.ws-cx.ws-in > .e-con { opacity: 1; translate: 0 0; transition: opacity 420ms var(--ws-ease-out) calc(var(--g, 0) * 120ms), translate 520ms var(--ws-ease-out) calc(var(--g, 0) * 120ms); }
.ws-js aside.ws-cx > .e-con > .e-con > .e-con { scale: 0 1; }
.ws-js aside.ws-cx.ws-in > .e-con > .e-con > .e-con { scale: 1 1; transition: scale 1100ms var(--ws-ease-out) calc(400ms + var(--g, 0) * 160ms); }
.ws-js aside.ws-cx.ws-in > .e-con > .e-con > :last-child { transition-delay: calc(800ms + var(--g, 0) * 160ms); }
.ws-js aside.ws-cx.ws-in > .ws-cx-on > .e-paragraph-base:last-child { animation: ws-cx-claim 2.6s ease-in-out calc(2s + var(--g, 0) * .3s) infinite; }
@keyframes ws-cx-claim { 0%, 100% { box-shadow: 0 0 0 0 rgba(161, 203, 69, 0); } 50% { box-shadow: 0 0 0 5px rgba(161, 203, 69, .28); } }
@media (max-width: 767px) {
  html .elementor aside.ws-cx > .e-con { grid-template-columns: minmax(0, 1fr) auto; }
  html .elementor aside.ws-cx > .e-con > .e-con { grid-column: 1 / -1; grid-row: 2; }
}

/* ============================================================ C. MOVEMENT-ALERT FEED  (header.ws-cx) */
html .elementor header.ws-cx { position: relative; height: 312px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%); }
html .elementor header.ws-cx > .e-con { display: flex; flex-direction: column; gap: 12px; padding-block: 12px; }
html .elementor header.ws-cx > .e-con > .e-con { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ws-border-default); background: #fff; box-shadow: 0 10px 24px -18px rgba(23, 33, 48, .45); }
html .elementor header.ws-cx > .e-con > .e-con > .e-con:first-child { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: grid; place-items: center; background: var(--ws-color-accent-data-blue-50); color: var(--ws-color-accent-data-blue-700); }
html .elementor header.ws-cx > .e-con > .ws-cx-on > .e-con:first-child { background: var(--ws-color-brand-green-100); color: var(--ws-color-brand-green-700); }
html .elementor header.ws-cx > .e-con > .ws-cx-on { border-color: var(--ws-color-brand-green-300); }
html .elementor header.ws-cx .ws-icon { width: 18px; height: 18px; }
html .elementor header.ws-cx > .e-con > .e-con > .e-con:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html .elementor header.ws-cx .e-paragraph-base:first-child { font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--ws-text-primary); }
html .elementor header.ws-cx .e-paragraph-base:last-child:not(:first-child) { font-size: 12px; color: var(--ws-text-muted); }
.ws-js header.ws-cx.ws-in > .e-con { animation: ws-cx-feed 22s linear 1.2s infinite; }
html .elementor header.ws-cx:hover > .e-con { animation-play-state: paused; }
@keyframes ws-cx-feed { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.ws-js header.ws-cx.ws-in > .e-con > .e-con:first-child > .e-con:first-child { animation: ws-cx-ping 2.4s ease-out 1s infinite; }
@keyframes ws-cx-ping { 0% { box-shadow: 0 0 0 0 rgba(76, 156, 200, .5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(76, 156, 200, 0); } }

/* ============================================================ D. OPPORTUNITY MAP  (section.ws-cx) */
html .elementor section.ws-cx { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto 22px; gap: 6px; }
html .elementor section.ws-cx > .e-con:first-child { grid-column: 2; grid-row: 1; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 380px; }
html .elementor section.ws-cx > .e-paragraph-base:nth-child(2) { grid-column: 2; grid-row: 2; text-align: right; }
html .elementor section.ws-cx > .e-paragraph-base:nth-child(3) { grid-column: 1; grid-row: 1; writing-mode: vertical-rl; rotate: 180deg; text-align: right; }
html .elementor section.ws-cx > .e-paragraph-base { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ws-text-muted); }
/* quadrants: 1 top-left, 2 top-right (compete first), 3 bottom-left, 4 bottom-right */
html .elementor section.ws-cx > .e-con:first-child > :nth-child(-n+4) { border-radius: 14px; padding: 12px 14px; background: var(--ws-surface-secondary); border: 1px dashed var(--ws-border-default); }
html .elementor section.ws-cx > .e-con:first-child > :nth-child(2) { background: var(--ws-color-brand-green-50); border: 1.5px solid var(--ws-color-brand-green-300); }
html .elementor section.ws-cx > .e-con:first-child > :nth-child(-n+4) .e-paragraph-base { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ws-text-muted); }
html .elementor section.ws-cx > .e-con:first-child > :nth-child(2) .e-paragraph-base { color: var(--ws-color-brand-green-800); }
html .elementor section.ws-cx > .e-con:first-child > :nth-child(3), html .elementor section.ws-cx > .e-con:first-child > :nth-child(4) { display: flex; align-items: flex-end; }
/* bubbles: topics placed by value (up) and how realistic they are to enter (right) */
html .elementor section.ws-cx > .e-con:first-child > :nth-child(n+5) { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; width: auto; max-width: 46%; padding: 8px 14px 8px 10px; border-radius: 9999px; background: #fff; border: 1px solid var(--ws-color-accent-data-blue-200); box-shadow: 0 10px 22px -14px rgba(23, 33, 48, .5); z-index: 1; }
html .elementor section.ws-cx > .e-con:first-child > :nth-child(n+5)::before { content: ""; display: block; position: static; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 9999px; background: #4C9CC8; }
html .elementor section.ws-cx > .e-con:first-child > .ws-cx-on { border-color: var(--ws-color-brand-green-400); }
html .elementor section.ws-cx > .e-con:first-child > .ws-cx-on::before { background: #83B422; }
html .elementor section.ws-cx > .e-con:first-child > :nth-child(n+5) .e-paragraph-base { font-size: 13px; font-weight: 600; color: var(--ws-text-primary); white-space: nowrap; }
html .elementor section.ws-cx > .e-con:first-child > :nth-child(5) { --x: 76%; --y: 22%; --k: 0; } html .elementor section.ws-cx > .e-con:first-child > :nth-child(6) { --x: 64%; --y: 38%; --k: 1; }
html .elementor section.ws-cx > .e-con:first-child > :nth-child(7) { --x: 26%; --y: 20%; --k: 2; } html .elementor section.ws-cx > .e-con:first-child > :nth-child(8) { --x: 70%; --y: 64%; --k: 3; }
html .elementor section.ws-cx > .e-con:first-child > :nth-child(9) { --x: 24%; --y: 76%; --k: 4; } html .elementor section.ws-cx > .e-con:first-child > :nth-child(10) { --x: 84%; --y: 84%; --k: 5; }
.ws-js section.ws-cx > .e-con:first-child > :nth-child(-n+4) { opacity: 0; }
.ws-js section.ws-cx.ws-in > .e-con:first-child > :nth-child(-n+4) { opacity: 1; transition: opacity 600ms var(--ws-ease-out) 150ms; }
.ws-js section.ws-cx.ws-in > .e-con:first-child > :nth-child(2) { animation: ws-cx-zone 4s ease-in-out 1.6s infinite; }
@keyframes ws-cx-zone { 0%, 100% { box-shadow: 0 0 0 0 rgba(161, 203, 69, 0); } 50% { box-shadow: 0 0 0 6px rgba(161, 203, 69, .18), inset 0 0 40px rgba(161, 203, 69, .18); } }
.ws-js section.ws-cx > .e-con:first-child > :nth-child(n+5) { opacity: 0; scale: .4; }
.ws-js section.ws-cx.ws-in > .e-con:first-child > :nth-child(n+5) { opacity: 1; scale: 1; transition: opacity 400ms var(--ws-ease-out) calc(600ms + var(--k, 0) * 160ms), scale 600ms cubic-bezier(.34, 1.56, .64, 1) calc(600ms + var(--k, 0) * 160ms);
  animation: ws-cx-drift calc(4.6s + var(--k, 0) * .5s) ease-in-out calc(1.8s + var(--k, 0) * -.9s) infinite alternate; }
@keyframes ws-cx-drift { from { translate: -50% calc(-50% - 4px); } to { translate: calc(-50% + 3px) calc(-50% + 5px); } }
.ws-js section.ws-cx.ws-in > .e-con:first-child > .ws-cx-on::before { animation: ws-cx-ping2 2.4s ease-out 2s infinite; }
@keyframes ws-cx-ping2 { 0% { box-shadow: 0 0 0 0 rgba(131, 180, 34, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(131, 180, 34, 0); } }
@media (max-width: 767px) {
  html .elementor section.ws-cx > .e-con:first-child { height: 420px; }
  html .elementor section.ws-cx > .e-con:first-child > :nth-child(n+5) { max-width: none; gap: 6px; padding: 5px 9px 5px 7px; }
  html .elementor section.ws-cx > .e-con:first-child > :nth-child(n+5)::before { width: 8px; height: 8px; }
  html .elementor section.ws-cx > .e-con:first-child > :nth-child(n+5) .e-paragraph-base { font-size: 10.5px; }
  html .elementor section.ws-cx > .e-con:first-child > :nth-child(5) { --x: 72%; --y: 20%; } html .elementor section.ws-cx > .e-con:first-child > :nth-child(6) { --x: 70%; --y: 36%; }
  html .elementor section.ws-cx > .e-con:first-child > :nth-child(7) { --x: 30%; --y: 26%; } html .elementor section.ws-cx > .e-con:first-child > :nth-child(8) { --x: 72%; --y: 62%; }
  html .elementor section.ws-cx > .e-con:first-child > :nth-child(9) { --x: 28%; --y: 70%; } html .elementor section.ws-cx > .e-con:first-child > :nth-child(10) { --x: 72%; --y: 80%; }
  html .elementor section.ws-cx > .e-con:first-child > :nth-child(-n+4) .e-paragraph-base { font-size: 10.5px; }
}

/* ---- reduced motion: final state, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .ws-js .ws-cx *, .ws-js .ws-cx > * { opacity: 1 !important; scale: 1 !important; animation: none !important; transition: none !important; }
  .ws-js .ws-cx::after { display: none; }
  .ws-js article.ws-cx > .e-con { translate: none !important; }
  .ws-js aside.ws-cx > .e-con { translate: none !important; }
}
.ws-reduced .ws-cx *, .ws-reduced .ws-cx > *, .ws-reduced .ws-cx::after { animation: none !important; }