/*! WindspeedSEO Visual System - capability hero modules v1.4.1
 * One hero graphic per capability page, each built only for that page (owner: "dont keep reusing the same hero
 * graphic"): report stack (SEO reporting software), AI answer (AI search visibility), competitor radar
 * (SEO competitor analysis) and rank ladder (keyword rank tracking). Every module sits inside the kit's .ws-comp
 * panel so it shares the diagram frame, head and notes; ws-visual.js adds .ws-in to hero diagrams on load.
 * Loads after ws-visual-wp1d.css. Transform/opacity/clip-path motion only; reduced motion shows the final state.
 */

/* ------------------------------------------------------------------ shared bits */
html .elementor .ws-hx .e-div-block-base, html .elementor .ws-hx-list .e-div-block-base { min-width: 0; flex: 0 1 auto; }
html .elementor .ws-hx :is(.ws-hx-chip, .ws-hx-mention, .ws-hx-cite, .ws-hx-prompt) { width: auto; max-width: 100%; flex: 0 0 auto; }
html .elementor .ws-hx :is(.ws-hx-rrow, .ws-hx-mentionrow)::before, html .elementor .ws-hx .ws-hx-mentionrow::after { position: static; display: block; }
html .elementor .ws-hx { position: relative; min-width: 0; color: var(--ws-text-primary); }
html .elementor .ws-hx .e-paragraph-base { margin: 0; }
html .elementor .ws-hx .ws-hx-label.e-paragraph-base { display: block; font-size: 10px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ws-text-muted); }
html .elementor .ws-hx .ws-hx-strong.e-paragraph-base { display: block; font-size: 13px; line-height: 1.25; font-weight: 600; color: var(--ws-text-primary); }
html .elementor .ws-hx .ws-hx-small.e-paragraph-base { display: block; font-size: 11px; line-height: 1.3; color: var(--ws-text-muted); }
html .elementor .ws-hx .ws-hx-mono.e-paragraph-base { font-family: var(--ws-mono); font-variant-numeric: tabular-nums; }
html .elementor .ws-hx .ws-icon { width: 16px; height: 16px; }
html .elementor .ws-hx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 9999px; border: 1px solid var(--ws-color-accent-data-blue-200); background: var(--ws-color-accent-data-blue-50); color: var(--ws-color-accent-data-blue-800); white-space: nowrap; }
html .elementor .ws-hx .ws-hx-chip .e-paragraph-base { font-size: 10.5px; line-height: 1.3; font-weight: 600; color: inherit; }
html .elementor .ws-hx-chip--ok { border-color: var(--ws-success-border); background: var(--ws-success-bg); color: var(--ws-success-fg); }
html .elementor .ws-hx-chip .ws-icon { width: 12px; height: 12px; }

/* ============================================================ A. REPORT STACK (SEO reporting software) */
html .elementor .ws-hx-report { padding: 12px 0 30px; }
html .elementor .ws-hx-sheet { position: absolute; left: 50%; top: 12px; bottom: 30px; width: min(330px, 80%); margin-left: calc(min(330px, 80%) / -2); border: 1px solid var(--ws-border-default); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px -14px rgba(23, 33, 48, .35); transform-origin: 50% 100%; }
html .elementor .ws-hx-sheet--back { padding: 12px 14px; background: var(--ws-color-neutral-50); }
html .elementor .ws-hx-sheet--back::after { content: ""; position: absolute; left: 14px; right: 14px; top: 36px; height: 60px; background: repeating-linear-gradient(180deg, var(--ws-color-neutral-200) 0 4px, transparent 4px 13px); opacity: .7; }
html .elementor .ws-hx-sheet--back .ws-hx-label { visibility: hidden; }
html .elementor .ws-hx-sheet.ws-hx-sheet--front { position: relative; left: auto; top: auto; bottom: auto; margin: 0 auto; padding: 13px 15px; display: flex; flex-direction: column; gap: 10px; z-index: 2; }
html .elementor .ws-hx-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html .elementor .ws-hx-verdict { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ws-success-border); background: var(--ws-gradient-success-wash); }
html .elementor .ws-hx-verdict-mark { width: 26px; height: 26px; border-radius: 9999px; display: grid; place-items: center; flex: 0 0 auto; background: var(--ws-color-brand-green-500); color: #fff; }
html .elementor .ws-hx-verdict-mark .ws-icon { width: 14px; height: 14px; }
html .elementor .ws-hx-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html .elementor .ws-hx-kpi { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--ws-border-default); background: var(--ws-color-neutral-50); min-width: 0; }
html .elementor .ws-hx .ws-hx-kpi .ws-hx-kpi-value.e-paragraph-base { display: block; font-size: 16px; line-height: 1.1; font-weight: 700; color: var(--ws-color-brand-green-700); font-variant-numeric: tabular-nums; }
html .elementor .ws-hx-bars { display: flex; align-items: flex-end; gap: 6px; height: 38px; padding: 0 2px; border-bottom: 1px solid var(--ws-border-default); }
html .elementor .ws-hx-bar { flex: 1 1 0; height: var(--h, 50%); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--ws-color-accent-data-blue-400), var(--ws-color-accent-data-blue-200)); transform-origin: 50% 100%; }
html .elementor .ws-hx-bar:nth-child(1) { --h: 34%; } html .elementor .ws-hx-bar:nth-child(2) { --h: 42%; } html .elementor .ws-hx-bar:nth-child(3) { --h: 38%; }
html .elementor .ws-hx-bar:nth-child(4) { --h: 55%; } html .elementor .ws-hx-bar:nth-child(5) { --h: 63%; } html .elementor .ws-hx-bar:nth-child(6) { --h: 78%; }
html .elementor .ws-hx-bar:nth-child(7) { --h: 94%; background: linear-gradient(180deg, var(--ws-color-brand-green-400), var(--ws-color-brand-green-200)); }
html .elementor .ws-hx-checks { display: flex; flex-direction: column; gap: 5px; }
html .elementor .ws-hx-check { display: flex; align-items: center; gap: 7px; }
html .elementor .ws-hx-tick { width: 15px; height: 15px; border-radius: 9999px; flex: 0 0 auto; display: grid; place-items: center; background: var(--ws-color-brand-green-100); color: var(--ws-color-brand-green-700); }
html .elementor .ws-hx-tick .ws-icon { width: 10px; height: 10px; }
html .elementor .ws-hx .ws-hx-check .e-paragraph-base { font-size: 11.5px; line-height: 1.25; color: var(--ws-text-secondary); }
html .elementor .ws-hx-sendtag { position: absolute; right: 2%; bottom: 4px; z-index: 3; box-shadow: 0 8px 20px -10px rgba(83, 116, 24, .55); }

/* motion: the pages fan out behind the front page, the chart builds, the checks tick, the report is sent */
.ws-js .ws-hx-report .ws-hx-sheet { opacity: 0; transform: translateY(18px); }
.ws-js .ws-in .ws-hx-report .ws-hx-sheet { opacity: 1; transition: opacity 600ms var(--ws-ease-out), transform 900ms var(--ws-ease-out); }
.ws-js .ws-in .ws-hx-report .ws-hx-sheet--front { transform: none; transition-delay: 250ms; animation: ws-hx-float 6s ease-in-out 2.2s infinite alternate; }
.ws-js .ws-in .ws-hx-report .ws-hx-sheet--b1 { transform: translate(-44px, 6px) rotate(-9deg); transition-delay: 700ms; }
.ws-js .ws-in .ws-hx-report .ws-hx-sheet--b2 { transform: translate(40px, 4px) rotate(7deg); transition-delay: 850ms; }
.ws-js .ws-in .ws-hx-report .ws-hx-sheet--b3 { transform: translate(-10px, -6px) rotate(-2.5deg); transition-delay: 1000ms; }
html .elementor .ws-hx-report .ws-hx-sheet--b1 { transform: translate(-44px, 6px) rotate(-9deg); }
html .elementor .ws-hx-report .ws-hx-sheet--b2 { transform: translate(40px, 4px) rotate(7deg); }
html .elementor .ws-hx-report .ws-hx-sheet--b3 { transform: translate(-10px, -6px) rotate(-2.5deg); }
@media (max-width: 599px) {
  /* narrower fan on phones so the back pages stay inside the panel */
  html .elementor .ws-hx-report .ws-hx-sheet--b1, .ws-js .ws-in .ws-hx-report .ws-hx-sheet--b1 { transform: translate(-18px, 6px) rotate(-6deg); }
  html .elementor .ws-hx-report .ws-hx-sheet--b2, .ws-js .ws-in .ws-hx-report .ws-hx-sheet--b2 { transform: translate(16px, 4px) rotate(5deg); }
}
@keyframes ws-hx-float { from { translate: 0 0; } to { translate: 0 -6px; } }
.ws-js .ws-hx-report .ws-hx-bar { transform: scaleY(0); }
.ws-js .ws-in .ws-hx-report .ws-hx-bar { animation: ws-hx-bar 8s var(--ws-ease-out) calc(900ms + var(--ws-bi, 0) * 90ms) infinite; }
html .elementor .ws-hx-bar:nth-child(2) { --ws-bi: 1; } html .elementor .ws-hx-bar:nth-child(3) { --ws-bi: 2; } html .elementor .ws-hx-bar:nth-child(4) { --ws-bi: 3; }
html .elementor .ws-hx-bar:nth-child(5) { --ws-bi: 4; } html .elementor .ws-hx-bar:nth-child(6) { --ws-bi: 5; } html .elementor .ws-hx-bar:nth-child(7) { --ws-bi: 6; }
@keyframes ws-hx-bar { 0% { transform: scaleY(0); } 12%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.ws-js .ws-hx-report .ws-hx-verdict { opacity: 0; transform: scale(.94); }
.ws-js .ws-in .ws-hx-report .ws-hx-verdict { opacity: 1; transform: none; transition: opacity 500ms var(--ws-ease-out) 1300ms, transform 600ms cubic-bezier(.34, 1.56, .64, 1) 1300ms; }
.ws-js .ws-hx-report .ws-hx-check { opacity: 0; transform: translateX(-10px); }
.ws-js .ws-in .ws-hx-report .ws-hx-check { opacity: 1; transform: none; transition: opacity 420ms var(--ws-ease-out), transform 420ms var(--ws-ease-out); }
.ws-js .ws-in .ws-hx-report .ws-hx-check:nth-child(1) { transition-delay: 1700ms; }
.ws-js .ws-in .ws-hx-report .ws-hx-check:nth-child(2) { transition-delay: 1950ms; }
.ws-js .ws-in .ws-hx-report .ws-hx-check:nth-child(3) { transition-delay: 2200ms; }
.ws-js .ws-in .ws-hx-report .ws-hx-tick { animation: ws-hx-tick 8s ease-in-out 2.4s infinite; }
@keyframes ws-hx-tick { 0%, 20%, 100% { scale: 1; } 8% { scale: 1.25; background: var(--ws-color-brand-green-500); color: #fff; } }
.ws-js .ws-hx-report .ws-hx-sendtag { opacity: 0; transform: translateY(10px) scale(.9); }
.ws-js .ws-in .ws-hx-report .ws-hx-sendtag { animation: ws-hx-send 8s var(--ws-ease-out) 2.6s infinite; }
@keyframes ws-hx-send { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 8%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translate(26px, -8px) scale(.96); } }

/* ============================================================ B. AI ANSWER (AI search visibility) */
html .elementor .ws-hx-ai { display: flex; flex-direction: column; gap: 10px; }
html .elementor .ws-hx .ws-hx-prompt { align-self: flex-end; max-width: 86%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--ws-color-brand-slate-700); color: #fff; }
html .elementor .ws-hx .ws-hx-prompt .e-paragraph-base { font-size: 12.5px; line-height: 1.35; color: #fff; }
html .elementor .ws-hx-answer { position: relative; max-width: 96%; padding: 11px 13px; border-radius: 14px 14px 14px 4px; border: 1px solid var(--ws-border-default); background: #fff; box-shadow: 0 10px 26px -16px rgba(23, 33, 48, .35); display: flex; flex-direction: column; gap: 8px; }
html .elementor .ws-hx-answer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html .elementor .ws-hx-answer-src { display: flex; align-items: center; gap: 6px; color: var(--ws-color-accent-data-blue-700); }
html .elementor .ws-hx-live { width: 7px; height: 7px; border-radius: 9999px; background: var(--ws-color-brand-green-500); flex: 0 0 auto; }
html .elementor .ws-hx-lines { display: flex; flex-direction: column; gap: 6px; }
html .elementor .ws-hx-line { height: 7px; border-radius: 9999px; background: var(--ws-color-neutral-200); }
html .elementor .ws-hx-line:nth-child(1) { width: 92%; } html .elementor .ws-hx-line:nth-child(3) { width: 78%; } html .elementor .ws-hx-line:nth-child(4) { width: 58%; }
html .elementor .ws-hx-mentionrow { display: flex; align-items: center; gap: 6px; }
html .elementor .ws-hx-mentionrow::before, html .elementor .ws-hx-mentionrow::after { content: ""; height: 7px; border-radius: 9999px; background: var(--ws-color-neutral-200); }
html .elementor .ws-hx-mentionrow::before { width: 22%; flex: 0 0 auto; } html .elementor .ws-hx-mentionrow::after { flex: 1 1 auto; }
html .elementor .ws-hx-mention { padding: 1px 8px; border-radius: 6px; background: var(--ws-color-brand-green-100); border: 1px solid var(--ws-color-brand-green-300); }
html .elementor .ws-hx .ws-hx-mention .e-paragraph-base { font-size: 11px; line-height: 1.3; font-weight: 700; color: var(--ws-color-brand-green-800); }
html .elementor .ws-hx-cites { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--ws-border-default); }
html .elementor .ws-hx-cite { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--ws-border-default); background: var(--ws-color-neutral-50); }
html .elementor .ws-hx .ws-hx-cite .e-paragraph-base { font-size: 10.5px; line-height: 1.3; color: var(--ws-text-secondary); }
html .elementor .ws-hx .ws-hx-cite .ws-hx-cite-n.e-paragraph-base { font-family: var(--ws-mono); font-weight: 700; color: var(--ws-color-accent-data-blue-700); }
html .elementor .ws-hx-cite--you { border-color: var(--ws-color-brand-green-400); background: var(--ws-color-brand-green-50); }
html .elementor .ws-hx .ws-hx-cite--you .e-paragraph-base { color: var(--ws-color-brand-green-800); font-weight: 600; }
html .elementor .ws-hx-meter { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ws-border-default); background: var(--ws-color-neutral-50); }
html .elementor .ws-hx .ws-hx-meter-text { flex: 0 0 auto; width: auto; }
html .elementor .ws-hx .ws-hx-meter > .ws-hx-dots { width: auto; }
html .elementor .ws-hx .ws-hx-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; flex: 1 1 auto; min-width: 120px; }
html .elementor .ws-hx-dot { height: 12px; width: 100%; max-width: 16px; border-radius: 4px; background: var(--ws-color-neutral-200); }
html .elementor .ws-hx-dot--on { background: var(--ws-color-brand-green-500); }

.ws-js .ws-hx-ai .ws-hx-prompt { opacity: 0; transform: translateY(8px); clip-path: inset(0 0 0 100% round 14px); }
.ws-js .ws-in .ws-hx-ai .ws-hx-prompt { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); transition: opacity 300ms ease-out 200ms, transform 500ms var(--ws-ease-out) 200ms, clip-path 900ms steps(18, end) 250ms; }
.ws-js .ws-hx-ai .ws-hx-answer { opacity: 0; transform: translateY(12px); }
.ws-js .ws-in .ws-hx-ai .ws-hx-answer { opacity: 1; transform: none; transition: opacity 500ms var(--ws-ease-out) 1100ms, transform 600ms var(--ws-ease-out) 1100ms; }
.ws-js .ws-in .ws-hx-ai .ws-hx-live { animation: ws-live 1.6s ease-in-out infinite; }
.ws-js .ws-hx-ai .ws-hx-line, .ws-js .ws-hx-ai .ws-hx-mentionrow { clip-path: inset(0 100% 0 0); }
.ws-js .ws-in .ws-hx-ai .ws-hx-line, .ws-js .ws-in .ws-hx-ai .ws-hx-mentionrow { clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--ws-ease-out); }
.ws-js .ws-in .ws-hx-ai .ws-hx-lines > :nth-child(1) { transition-delay: 1400ms; }
.ws-js .ws-in .ws-hx-ai .ws-hx-lines > :nth-child(2) { transition-delay: 1650ms; }
.ws-js .ws-in .ws-hx-ai .ws-hx-lines > :nth-child(3) { transition-delay: 1900ms; }
.ws-js .ws-in .ws-hx-ai .ws-hx-lines > :nth-child(4) { transition-delay: 2150ms; }
.ws-js .ws-in .ws-hx-ai .ws-hx-mention { animation: ws-hx-mention 5s ease-in-out 2.4s infinite; }
@keyframes ws-hx-mention { 0%, 24%, 100% { box-shadow: 0 0 0 0 rgba(161, 203, 69, 0); } 10% { box-shadow: 0 0 0 5px rgba(161, 203, 69, .28), 0 0 18px rgba(161, 203, 69, .45); } }
.ws-js .ws-hx-ai .ws-hx-cite { opacity: 0; transform: scale(.7); }
.ws-js .ws-in .ws-hx-ai .ws-hx-cite { opacity: 1; transform: none; transition: opacity 360ms var(--ws-ease-out), transform 520ms cubic-bezier(.34, 1.56, .64, 1); }
.ws-js .ws-in .ws-hx-ai .ws-hx-cite:nth-child(1) { transition-delay: 2500ms; }
.ws-js .ws-in .ws-hx-ai .ws-hx-cite:nth-child(2) { transition-delay: 2700ms; }
.ws-js .ws-in .ws-hx-ai .ws-hx-cite:nth-child(3) { transition-delay: 2900ms; }
.ws-js .ws-in .ws-hx-ai .ws-hx-cite--you { animation: ws-ok-glow 3.4s ease-in-out 3.4s infinite; }
.ws-js .ws-hx-ai .ws-hx-dot--on { background: var(--ws-color-neutral-200); }
.ws-js .ws-in .ws-hx-ai .ws-hx-dot--on { animation: ws-hx-dot 9s ease-out calc(3000ms + var(--ws-di, 0) * 160ms) infinite; }
html .elementor .ws-hx-dot:nth-child(2) { --ws-di: 1; } html .elementor .ws-hx-dot:nth-child(3) { --ws-di: 2; } html .elementor .ws-hx-dot:nth-child(4) { --ws-di: 3; }
html .elementor .ws-hx-dot:nth-child(5) { --ws-di: 4; } html .elementor .ws-hx-dot:nth-child(6) { --ws-di: 5; } html .elementor .ws-hx-dot:nth-child(7) { --ws-di: 6; }
html .elementor .ws-hx-dot:nth-child(8) { --ws-di: 7; } html .elementor .ws-hx-dot:nth-child(9) { --ws-di: 8; } html .elementor .ws-hx-dot:nth-child(10) { --ws-di: 9; }
@keyframes ws-hx-dot { 0% { background: var(--ws-color-neutral-200); scale: 1; } 3% { background: var(--ws-color-brand-green-500); scale: 1.3; } 6%, 90% { background: var(--ws-color-brand-green-500); scale: 1; } 100% { background: var(--ws-color-neutral-200); } }

/* ============================================================ C. COMPETITOR RADAR (SEO competitor analysis) */
html .elementor .ws-hx-radarwrap { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; align-items: center; }
html .elementor .ws-hx-radar { position: relative; width: 100%; aspect-ratio: 1; border-radius: 9999px; overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(76, 156, 200, .25) calc(50% - .5px), rgba(76, 156, 200, .25) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(76, 156, 200, .25) calc(50% - .5px), rgba(76, 156, 200, .25) calc(50% + .5px), transparent calc(50% + .5px)),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 calc(16.66% - 1px), rgba(76, 156, 200, .3) calc(16.66% - 1px) 16.66%),
    radial-gradient(circle at 50% 50%, #F1F8FC 0%, #E2F1F8 100%);
  border: 1px solid var(--ws-color-accent-data-blue-200); }
html .elementor .ws-hx-sweep { position: absolute; inset: 0; border-radius: 9999px; background: conic-gradient(from 0deg, rgba(76, 156, 200, 0) 0deg, rgba(76, 156, 200, 0) 280deg, rgba(76, 156, 200, .14) 330deg, rgba(76, 156, 200, .5) 359deg, rgba(76, 156, 200, 0) 360deg); }
html .elementor .ws-hx-you { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 9999px; display: grid; place-items: center; background: var(--ws-color-brand-green-500); box-shadow: 0 0 0 5px rgba(161, 203, 69, .25); z-index: 2; }
html .elementor .ws-hx .ws-hx-you .e-paragraph-base { font-size: 9.5px; font-weight: 700; color: #fff; letter-spacing: .02em; }
html .elementor .ws-hx-blip { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 9999px; background: var(--ws-color-accent-data-blue-600); box-shadow: 0 0 0 3px rgba(76, 156, 200, .22); z-index: 1; }
html .elementor .ws-hx-blip--1 { left: 70%; top: 22%; --ws-hit: .6s; }
html .elementor .ws-hx-blip--2 { left: 80%; top: 64%; --ws-hit: 1.9s; }
html .elementor .ws-hx-blip--3 { left: 30%; top: 76%; --ws-hit: 3.4s; }
html .elementor .ws-hx-blip--4 { left: 20%; top: 34%; --ws-hit: 4.8s; }
html .elementor .ws-hx-blip--gap { background: var(--ws-color-brand-green-500); box-shadow: 0 0 0 3px rgba(161, 203, 69, .25); }
html .elementor .ws-hx-rivals { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
html .elementor .ws-hx-rival { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-rows: auto 6px; column-gap: 8px; row-gap: 4px; align-items: center; }
html .elementor .ws-hx-rival-dot { width: 10px; height: 10px; border-radius: 9999px; background: var(--ws-color-accent-data-blue-600); grid-row: 1; }
html .elementor .ws-hx .ws-hx-rival .ws-hx-strong.e-paragraph-base { font-size: 12px; }
html .elementor .ws-hx .ws-hx-rival .ws-hx-mono.e-paragraph-base { font-size: 11.5px; font-weight: 700; color: var(--ws-color-accent-data-blue-800); }
html .elementor .ws-hx-rival-track { grid-column: 2 / 4; grid-row: 2; height: 6px; border-radius: 9999px; background: var(--ws-color-neutral-100); overflow: hidden; }
html .elementor .ws-hx-rival-fill { height: 100%; width: var(--w, 50%); border-radius: 9999px; background: linear-gradient(90deg, #4C9CC8, #6FB2D5); transform-origin: left center; }
html .elementor .ws-hx-rival:nth-child(1) .ws-hx-rival-fill { --w: 62%; } html .elementor .ws-hx-rival:nth-child(2) .ws-hx-rival-fill { --w: 48%; }
html .elementor .ws-hx-rival:nth-child(3) .ws-hx-rival-fill { --w: 35%; } html .elementor .ws-hx-rival:nth-child(4) .ws-hx-rival-fill { --w: 29%; }
html .elementor .ws-hx-rival--gap .ws-hx-rival-dot { background: var(--ws-color-brand-green-500); }
html .elementor .ws-hx-rival--gap .ws-hx-rival-fill { background: linear-gradient(90deg, #83B422, #A1CB45); }

.ws-js .ws-hx-radar { opacity: 0; transform: scale(.9); }
.ws-js .ws-in .ws-hx-radar { opacity: 1; transform: none; transition: opacity 700ms var(--ws-ease-out) 200ms, transform 900ms var(--ws-ease-out) 200ms; }
.ws-js .ws-in .ws-hx-sweep { animation: ws-hx-spin 6s linear 900ms infinite; }
@keyframes ws-hx-spin { to { transform: rotate(360deg); } }
.ws-js .ws-hx-blip { opacity: 0; scale: .3; }
.ws-js .ws-in .ws-hx-blip { opacity: 1; scale: 1; transition: opacity 400ms var(--ws-ease-out), scale 520ms cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(900ms + var(--ws-hit, 0s)); animation: ws-hx-blip 6s ease-out calc(900ms + var(--ws-hit, 0s)) infinite; }
@keyframes ws-hx-blip { 0% { box-shadow: 0 0 0 0 rgba(76, 156, 200, .6); scale: 1.35; } 30% { box-shadow: 0 0 0 12px rgba(76, 156, 200, 0); scale: 1; } 100% { box-shadow: 0 0 0 3px rgba(76, 156, 200, .22); scale: 1; } }
.ws-js .ws-in .ws-hx-you { animation: ws-ok-glow 3.4s ease-in-out 1s infinite; }
.ws-js .ws-hx-rival { opacity: 0; transform: translateX(12px); }
.ws-js .ws-in .ws-hx-rival { opacity: 1; transform: none; transition: opacity 450ms var(--ws-ease-out), transform 450ms var(--ws-ease-out); }
.ws-js .ws-in .ws-hx-rival:nth-child(1) { transition-delay: 1400ms; } .ws-js .ws-in .ws-hx-rival:nth-child(2) { transition-delay: 1600ms; }
.ws-js .ws-in .ws-hx-rival:nth-child(3) { transition-delay: 1800ms; } .ws-js .ws-in .ws-hx-rival:nth-child(4) { transition-delay: 2000ms; }
.ws-js .ws-hx-rival-fill { transform: scaleX(0); }
.ws-js .ws-in .ws-hx-rival-fill { transform: none; transition: transform 1100ms var(--ws-ease-out) 2100ms; }
@media (max-width: 599px) { html .elementor .ws-hx-radarwrap { grid-template-columns: minmax(0, 1fr); } html .elementor .ws-hx-radar { max-width: 210px; margin: 0 auto; } }

/* ============================================================ D. RANK LADDER (keyword rank tracking) */
html .elementor .ws-hx-rank { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; }
html .elementor .ws-hx-ranks { display: grid; grid-template-rows: repeat(5, 40px); row-gap: 6px; }
html .elementor .ws-hx-rankn { display: grid; place-items: center; border-radius: 8px; background: var(--ws-color-neutral-100); }
html .elementor .ws-hx .ws-hx-rankn .e-paragraph-base { font-family: var(--ws-mono); font-size: 12px; font-weight: 700; color: var(--ws-text-muted); }
html .elementor .ws-hx-ladder { position: relative; height: calc(5 * 40px + 4 * 6px); }
html .elementor .ws-hx-rrow { position: absolute; left: 0; right: 0; height: 40px; top: calc(var(--p, 0) * 46px); display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ws-border-default); background: #fff; }
html .elementor .ws-hx-rrow::before { content: ""; width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; background: var(--ws-color-neutral-200); }
html .elementor .ws-hx-rrow:nth-child(1) { --p: 0; } html .elementor .ws-hx-rrow:nth-child(2) { --p: 1; } html .elementor .ws-hx-rrow:nth-child(3) { --p: 2; } html .elementor .ws-hx-rrow:nth-child(4) { --p: 3; }
html .elementor .ws-hx .ws-hx-rrow .ws-hx-rbar { height: 7px; border-radius: 9999px; background: var(--ws-color-neutral-200); flex: 1 1 auto; }
html .elementor .ws-hx-rrow:nth-child(2) .ws-hx-rbar { max-width: 70%; } html .elementor .ws-hx-rrow:nth-child(3) .ws-hx-rbar { max-width: 84%; } html .elementor .ws-hx-rrow:nth-child(4) .ws-hx-rbar { max-width: 62%; }
html .elementor .ws-hx-rrow--you { --p: 4; z-index: 2; border: 1.5px solid var(--ws-color-brand-green-500); background: var(--ws-color-brand-green-50); box-shadow: 0 10px 22px -12px rgba(83, 116, 24, .6); }
html .elementor .ws-hx-rrow--you::before { background: var(--ws-color-brand-green-500); }
html .elementor .ws-hx .ws-hx-rrow--you .ws-hx-rtext { flex: 1 1 auto; min-width: 0; }
html .elementor .ws-hx .ws-hx-rrow--you .ws-hx-strong.e-paragraph-base { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .elementor .ws-hx .ws-hx-rrow--you .ws-hx-small.e-paragraph-base { font-size: 10.5px; }
html .elementor .ws-hx-rankfoot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
html .elementor .ws-hx .ws-hx-rankfoot > * { width: auto; }
html .elementor .ws-hx .ws-hx-rankfoot .ws-spark { width: 140px; height: 32px; }

/* motion: your page climbs from position 5 to 2, the others step down, it holds, then the cycle restarts */
.ws-js .ws-hx-rank .ws-hx-rrow, .ws-js .ws-hx-rank .ws-hx-rankn { opacity: 0; transform: translateX(-10px); }
.ws-js .ws-in .ws-hx-rank .ws-hx-rrow, .ws-js .ws-in .ws-hx-rank .ws-hx-rankn { opacity: 1; transform: none; transition: opacity 420ms var(--ws-ease-out) calc(200ms + var(--p, 0) * 110ms), transform 420ms var(--ws-ease-out) calc(200ms + var(--p, 0) * 110ms); }
html .elementor .ws-hx-rankn:nth-child(2) { --p: 1; } html .elementor .ws-hx-rankn:nth-child(3) { --p: 2; } html .elementor .ws-hx-rankn:nth-child(4) { --p: 3; } html .elementor .ws-hx-rankn:nth-child(5) { --p: 4; }
.ws-js .ws-in .ws-hx-rank .ws-hx-rrow--you { animation: ws-hx-climb 9s var(--ws-ease-inout) 1.4s infinite; }
.ws-js .ws-in .ws-hx-rank .ws-hx-rrow:nth-child(2), .ws-js .ws-in .ws-hx-rank .ws-hx-rrow:nth-child(3), .ws-js .ws-in .ws-hx-rank .ws-hx-rrow:nth-child(4) { animation: ws-hx-stepdown 9s var(--ws-ease-inout) 1.4s infinite; }
@keyframes ws-hx-climb { 0%, 8% { translate: 0 0; scale: 1; } 30% { translate: 0 -138px; scale: 1.03; } 38%, 86% { translate: 0 -138px; scale: 1; } 96%, 100% { translate: 0 0; scale: 1; } }
@keyframes ws-hx-stepdown { 0%, 8% { translate: 0 0; } 30%, 86% { translate: 0 46px; } 96%, 100% { translate: 0 0; } }
.ws-js .ws-hx-rank .ws-hx-rankfoot { opacity: 0; }
.ws-js .ws-in .ws-hx-rank .ws-hx-rankfoot { opacity: 1; transition: opacity 600ms var(--ws-ease-out) 1000ms; }
.ws-js .ws-in .ws-hx-rank .ws-hx-delta { animation: ws-hx-delta 9s ease-in-out 1.4s infinite; }
@keyframes ws-hx-delta { 0%, 26% { opacity: .35; scale: .96; } 34%, 86% { opacity: 1; scale: 1; } 96%, 100% { opacity: .35; scale: .96; } }

/* ============================================================ BODY: statement list (reporting) + stat strip */
html .elementor .ws-hx-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
html .elementor .ws-hx-li { display: flex; align-items: flex-start; gap: 10px; }
html .elementor .ws-hx-li .ws-hx-tick { width: 20px; height: 20px; margin-top: 2px; }
html .elementor .ws-hx-li .ws-hx-tick .ws-icon { width: 12px; height: 12px; }
html .elementor .ws-hx .ws-hx-li .e-paragraph-base { font-size: var(--ws-type-body-small-size, 15px); line-height: 1.45; color: var(--ws-text-secondary); }
.ws-js .ws-hx-list .ws-hx-li { opacity: 0; transform: translateX(-12px); }
.ws-js .ws-in .ws-hx-list .ws-hx-li, .ws-js .ws-hx-list.ws-in .ws-hx-li { opacity: 1; transform: none; transition: opacity 480ms var(--ws-ease-out) calc(var(--ws-delay, 0ms) * 1.3 + 300ms), transform 480ms var(--ws-ease-out) calc(var(--ws-delay, 0ms) * 1.3 + 300ms); }


/* ============================================================ BODY: two-circle overlap diagram motion */
/* the kit's overlap diagram had no motion: the circles fade in, drift toward each other and back, and the shared
   centre label pulses */
.ws-js .ws-comp .ws-comp-disc { opacity: 0; }
.ws-js .ws-comp.ws-in .ws-comp-disc { opacity: 1; transition: opacity 700ms var(--ws-ease-out) 200ms; }
.ws-js .ws-comp.ws-in .ws-comp-disc--a { animation: ws-hx-disc-a 5.5s ease-in-out 1.2s infinite alternate; }
.ws-js .ws-comp.ws-in .ws-comp-disc--b { animation: ws-hx-disc-b 5.5s ease-in-out 1.2s infinite alternate; }
.ws-js .ws-comp.ws-in .ws-comp-disc-both { animation: ws-hx-both 5.5s ease-in-out 1.2s infinite; }
@keyframes ws-hx-disc-a { from { translate: 0 0; } to { translate: 6px 0; } }
@keyframes ws-hx-disc-b { from { translate: 0 0; } to { translate: -6px 0; } }
@media (min-width: 600px) {
  /* wider circles so their labels clear the shared centre label */
  html .elementor .ws-comp--overlap .ws-comp-overlap { height: 214px; }
  html .elementor .ws-comp--overlap .ws-comp-disc { width: 236px; height: 196px; }
  html .elementor .ws-comp--overlap .ws-comp-disc--a { left: calc(50% - 196px); padding-right: 104px; }
  html .elementor .ws-comp--overlap .ws-comp-disc--b { left: calc(50% - 40px); padding-left: 104px; }
  html .elementor .ws-comp--overlap .ws-comp-disc-both { width: 92px; }
  html .elementor .ws-comp--overlap .ws-comp-overlap-cap--a { left: calc(50% - 196px); }
  html .elementor .ws-comp--overlap .ws-comp-overlap-cap--b { right: calc(50% - 196px); }
}
@media (max-width: 599px) {
  html .elementor .ws-comp--overlap .ws-comp-overlap-cap { width: 44%; }
  html .elementor .ws-comp--overlap .ws-comp-overlap-cap--a { left: 2%; }
  html .elementor .ws-comp--overlap .ws-comp-overlap-cap--b { right: 2%; }
}
@keyframes ws-hx-both { 0%, 100% { scale: 1; box-shadow: 0 0 0 0 rgba(161, 203, 69, 0); } 50% { scale: 1.06; box-shadow: 0 0 0 5px rgba(161, 203, 69, .22); } }

/* ---- reduced motion: final state, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .ws-js .ws-comp .ws-comp-disc, .ws-js .ws-comp .ws-comp-disc-both { opacity: 1 !important; animation: none !important; }
  .ws-js .ws-hx *, .ws-js .ws-hx-list .ws-hx-li { opacity: 1 !important; transform: none; clip-path: none !important; animation: none !important; transition: none !important; }
  .ws-js .ws-hx-report .ws-hx-sheet--b1 { transform: translate(-44px, 6px) rotate(-9deg) !important; }
  .ws-js .ws-hx-report .ws-hx-sheet--b2 { transform: translate(40px, 4px) rotate(7deg) !important; }
  .ws-js .ws-hx-report .ws-hx-sheet--b3 { transform: translate(-10px, -6px) rotate(-2.5deg) !important; }
  .ws-js .ws-hx-ai .ws-hx-dot--on { background: var(--ws-color-brand-green-500) !important; }
  .ws-js .ws-hx-rank .ws-hx-rrow--you { translate: 0 -138px; }
  .ws-js .ws-hx-rank .ws-hx-rrow:nth-child(2), .ws-js .ws-hx-rank .ws-hx-rrow:nth-child(3), .ws-js .ws-hx-rank .ws-hx-rrow:nth-child(4) { translate: 0 46px; }
}
.ws-reduced .ws-hx *, .ws-reduced .ws-hx-list .ws-hx-li, .ws-reduced .ws-comp .ws-comp-disc, .ws-reduced .ws-comp .ws-comp-disc-both { animation: none !important; opacity: 1 !important; }
.ws-reduced .ws-hx-ai .ws-hx-dot--on { background: var(--ws-color-brand-green-500) !important; }