/* ═══════════════════════════════════════════
   SerpClix AI Visibility — landing page styles
   All rules scoped under .scl-ai so they never affect the shared
   vnext nav/footer that render on this page. Tokens mirror the vnext
   design system (context/design-tokens.json) and the approved prototype.
   ═══════════════════════════════════════════ */
.scl-ai{
  --warning-text:#8a6a10;
  --teal:#2a9d8f; --teal-dark:#228478; --teal-light:#34b8a8; --teal-100:#d4efec; --teal-50:#edf8f7;
  --teal-bg-light:#f0faf6;
  --yellow:#ffd600; --yellow-light:#ffe033; --yellow-bg:#fffce8;
  --navy:#1a2b3c; --navy-dark:#0f1c2a; --navy-light:#2d4356;
  --text-primary:#1a2b3c; --text-secondary:#4a5d72; --text-muted:#7b8e9e;
  --text-on-dark:#e0e8f0; --text-on-dark-muted:#8fa3b8;
  --bg-page:#ffffff; --bg-light:#f7f9fb; --hero-grad:linear-gradient(170deg,#e8f5f0 0%,#f0faf6 40%,#fef9ed 100%);
  --border:#dde4eb; --border-light:#eaeff4;
  --success:#5bb033; --info:#4a90d9; --warning:#d4a017;
  --shadow-sm:0 1px 3px rgba(26,43,60,.05); --shadow-md:0 4px 16px rgba(26,43,60,.08);
  --shadow-lg:0 8px 32px rgba(26,43,60,.1); --shadow-card:0 2px 12px rgba(26,43,60,.06);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --max-w:1180px; --container-pad:32px; --section-pad:88px;
  --font-heading:'Poppins',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
  font:400 16px/1.65 var(--font-body);
  color:var(--text-primary);
}
.scl-ai a{color:var(--teal-dark);text-decoration:none}
.scl-ai a:hover{text-decoration:underline}
.scl-ai .container{max-width:var(--max-w);margin:0 auto;padding:0 var(--container-pad)}
.scl-ai .section{padding:var(--section-pad) 0;background:var(--bg-page)}
.scl-ai .section.alt{background:var(--bg-light)}
.scl-ai .section-center{text-align:center;margin-bottom:48px}
.scl-ai .section-eyebrow{display:inline-block;background:linear-gradient(135deg,rgba(42,157,143,.08),rgba(42,157,143,.04));border:1px solid rgba(42,157,143,.12);border-radius:20px;padding:5px 16px;color:var(--teal);font:700 12px/1 var(--font-heading);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:16px}
.scl-ai .section-title{font:800 36px/1.2 var(--font-heading);letter-spacing:-.8px;margin-bottom:12px;color:var(--text-primary)}

@keyframes sclAiFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.scl-ai .anim-up{animation:sclAiFadeUp .6s ease-out both}
.scl-ai .anim-d1{animation:sclAiFadeUp .6s ease-out .1s both}
.scl-ai .anim-d2{animation:sclAiFadeUp .6s ease-out .2s both}
@media (prefers-reduced-motion:reduce){
  .scl-ai .anim-up,.scl-ai .anim-d1,.scl-ai .anim-d2{animation:none}
}

/* ── Buttons (scoped) ── */
.scl-ai .btn-yellow{display:inline-block;font:700 14px/1 var(--font-heading);letter-spacing:.3px;text-transform:uppercase;padding:14px 26px;border-radius:var(--r-sm);border:0;cursor:pointer;background:var(--yellow);color:var(--text-primary);text-decoration:none;transition:all .2s}
.scl-ai .btn-yellow:hover{background:var(--yellow-light);text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,214,0,.35)}
.scl-ai .btn-ghost-dark{display:inline-block;font:700 14px/1 var(--font-heading);letter-spacing:.3px;text-transform:uppercase;padding:14px 16px;border-radius:var(--r-sm);border:0;cursor:pointer;background:transparent;color:var(--text-on-dark);text-decoration:none}
.scl-ai .btn-ghost-dark:hover{color:#fff;text-decoration:none}
.scl-ai .mid-cta{text-align:center;margin-top:44px}

/* ═══════════ HERO ═══════════ */
.scl-ai .ai-hero{background:var(--hero-grad);padding:72px 0 80px}
.scl-ai .ai-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.scl-ai .ai-hero h1{font:800 52px/1.1 var(--font-heading);letter-spacing:-2px;margin-bottom:18px;color:var(--text-primary)}
.scl-ai .ai-hero h1 .grad{background:linear-gradient(90deg,var(--teal),var(--info));-webkit-background-clip:text;background-clip:text;color:transparent}
.scl-ai .hero-sub{color:var(--text-secondary);font-size:17px;line-height:1.75;max-width:520px;margin-bottom:26px}
.scl-ai .hero-card{background:var(--bg-page);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:26px;scroll-margin-top:90px}
.scl-ai .hero-card .tag{display:inline-block;font:700 11px/1 var(--font-heading);letter-spacing:2px;text-transform:uppercase;color:var(--teal);background:var(--teal-50);border-radius:12px;padding:4px 12px;margin-bottom:12px}
.scl-ai .hero-card h3{font:700 18px var(--font-heading);margin-bottom:12px;color:var(--text-primary)}
.scl-ai .hero-form{display:flex;gap:10px}
.scl-ai .hero-form[hidden]{display:none}
.scl-ai .hero-form + .hero-form{margin-top:10px}
.scl-ai .hero-form input{flex:1;border:2px solid var(--border);border-radius:var(--r-md);padding:12px 14px;font:400 15px var(--font-body);min-width:0;color:var(--text-primary);background:#fff}
.scl-ai .hero-form input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(42,157,143,.12)}
.scl-ai .hero-hint{color:var(--text-muted);font-size:13px;margin-top:10px}
.scl-ai .hint-check{color:var(--teal-dark)}
.scl-ai .form-err{display:none;color:#a83a32;font:500 13px var(--font-body);margin-top:8px}
.scl-ai .form-err.is-note{color:var(--teal-dark)}
.scl-ai .hero-trial{margin-top:16px;font-size:14px;color:var(--text-secondary)}
.scl-ai .surface-panel{background:var(--bg-page);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}
.scl-ai .surface-row{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;border-bottom:1px solid var(--border-light);font-size:14px}
.scl-ai .surface-row:last-child{border-bottom:0}
.scl-ai .surface-row .s{font-weight:600}
.scl-ai .surface-row .pill{font:600 11px/1 var(--font-heading);border-radius:10px;padding:4px 10px}
.scl-ai .pill-teal{background:var(--teal-50);color:var(--teal-dark)}
.scl-ai .pill-amber{background:var(--yellow-bg);color:var(--warning-text)}
.scl-ai .surface-head{background:var(--bg-light);font:700 11px/1 var(--font-heading);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);display:flex;justify-content:space-between;padding:11px 20px}
.scl-ai .surface-caption{margin-top:12px;text-align:center}

/* ═══════════ TRUST BAND ═══════════ */
.scl-ai .trust-band{background:var(--bg-page);border-bottom:1px solid var(--border-light);padding:24px 0}
.scl-ai .trust-band .container{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;text-align:center}
.scl-ai .tb-num{font:800 26px var(--font-heading);color:var(--teal)}
.scl-ai .tb-label{font:500 13px var(--font-body);color:var(--text-muted)}

/* ═══════════ STATS ═══════════ */
.scl-ai .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:780px;margin:0 auto}
.scl-ai .stat-card{background:var(--bg-page);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:28px;text-align:center}
.scl-ai .stat-num{font:800 44px/1 var(--font-heading);color:var(--teal);margin-bottom:8px}
.scl-ai .stat-label{font-weight:600;margin-bottom:6px}
.scl-ai .stat-src{color:var(--text-muted);font-size:13px}
.scl-ai .stat-src a{color:var(--text-muted);text-decoration:underline}
.scl-ai .stat-src a:hover{color:var(--teal-dark)}
.scl-ai .stats-note{max-width:720px;margin:36px auto 0;text-align:center;color:var(--text-secondary)}

/* ═══════════ PROSE ═══════════ */
.scl-ai .prose{max-width:720px;margin:0 auto;color:var(--text-secondary);font-size:17px;line-height:1.75}
.scl-ai .prose p{margin-bottom:16px}
.scl-ai .prose strong{color:var(--text-primary)}
.scl-ai .prose-center{text-align:center;max-width:760px}

/* ═══════════ STEPS ═══════════ */
.scl-ai .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.scl-ai .step{background:var(--bg-page);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:28px}
.scl-ai .step-num{width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;font:700 15px/34px var(--font-heading);text-align:center;margin-bottom:14px}
.scl-ai .step h3{font:700 17px var(--font-heading);margin-bottom:8px;color:var(--text-primary)}
.scl-ai .step p{color:var(--text-secondary);font-size:14.5px;margin:0}

/* ═══════════ DARK SECTION ═══════════ */
.scl-ai .section.dark{background:var(--navy);color:var(--text-on-dark)}
.scl-ai .dark .section-title{color:#fff}
.scl-ai .dark .prose{color:var(--text-on-dark-muted)}
.scl-ai .dark .prose strong{color:#fff}
.scl-ai .dark .prose a{color:var(--teal-light)}
.scl-ai .dark .section-eyebrow{background:rgba(52,184,168,.12);border-color:rgba(52,184,168,.25);color:var(--teal-light)}

/* ═══════════ RESULTS ═══════════ */
.scl-ai .ai-results{background:var(--bg-light);border-bottom:1px solid var(--border)}
.scl-ai .ai-results[hidden]{display:none}
.scl-ai .res-domain{color:var(--teal)}
.scl-ai .ri-band{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.scl-ai .ri-step{font:600 14px var(--font-body);color:var(--text-secondary)}
.scl-ai .ri-step b{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;font:700 12px/22px var(--font-heading);text-align:center;margin-right:7px}
.scl-ai .ctx-bar{text-align:center;color:var(--text-muted);font-size:13.5px;margin-bottom:26px}
.scl-ai .ctx-bar .sample{background:var(--yellow-bg);color:var(--warning-text);border-radius:10px;font:700 11px var(--font-heading);letter-spacing:1px;text-transform:uppercase;padding:3px 10px;margin-left:8px}
.scl-ai .kw-wrap{background:var(--bg-page);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow-x:auto}
.scl-ai table.kw{width:100%;border-collapse:collapse;min-width:840px;margin:0}
.scl-ai table.kw th{background:var(--bg-light);font:700 11px var(--font-heading);letter-spacing:1.2px;text-transform:uppercase;color:var(--text-muted);padding:12px 14px;text-align:left;white-space:nowrap;border:0}
.scl-ai table.kw td{padding:13px 14px;border:0;border-top:1px solid var(--border-light);font-size:14.5px;vertical-align:middle}
.scl-ai table.kw td.kwname{font-weight:600}
.scl-ai table.kw td.kw-vol{color:var(--text-secondary)}
.scl-ai table.kw td.kw-empty{color:var(--text-secondary)}
.scl-ai .pos{display:inline-block;min-width:34px;text-align:center;font:700 13px var(--font-heading);border-radius:8px;padding:4px 6px}
.scl-ai .pos-good{background:var(--teal-50);color:var(--teal-dark)}
.scl-ai .pos-mid{background:var(--yellow-bg);color:var(--warning-text)}
.scl-ai .pos-none{background:var(--bg-light);color:var(--text-muted)}
.scl-ai .chip{display:inline-block;font:600 12px var(--font-body);border-radius:10px;padding:3px 9px;margin:1px 2px;white-space:nowrap}
.scl-ai .chip-yes{background:var(--teal-50);color:var(--teal-dark)}
.scl-ai .chip-no{background:#faeae7;color:#c44536}
.scl-ai .chip-muted{background:var(--bg-light);color:var(--text-muted)}
.scl-ai .chip-wait{background:var(--bg-light);color:var(--text-muted);animation:sclAiChipPulse 1.2s ease-in-out infinite}
@keyframes sclAiChipPulse{50%{opacity:.4}}
.scl-ai .ghost td{color:var(--text-muted)}
.scl-ai .ghost .blurchip{display:inline-block;font:600 12px var(--font-body);border-radius:10px;padding:3px 14px;background:var(--teal-50);color:transparent;filter:blur(4px);user-select:none}
.scl-ai .unlock-row td{background:var(--teal-bg-light);text-align:center;padding:18px 14px;border-top:2px solid var(--teal-100)}
.scl-ai .unlock-row .u-txt{font:600 15px var(--font-body);margin-right:14px}
.scl-ai .unlock-row .btn-yellow{padding:10px 20px}
.scl-ai .gap-flag{font:600 12px var(--font-body);color:var(--warning-text)}
.scl-ai .asked{font:400 12px var(--font-body);color:var(--text-muted);font-style:italic;margin-top:3px}
.scl-ai .comp-line{font:500 12px var(--font-body);color:var(--text-secondary);margin-top:4px}
.scl-ai .comp-line b{color:var(--text-primary)}
.scl-ai .res-panel{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:var(--bg-page);border:1px solid var(--teal);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:20px 24px;margin-top:22px}
.scl-ai .res-panel .sel-note{color:var(--text-secondary);font-size:14.5px}
.scl-ai .res-panel .sel-note strong{color:var(--text-primary)}

/* ═══════════ FINAL CTA ═══════════ */
.scl-ai .ai-final{background:var(--navy-dark);color:var(--text-on-dark);text-align:center;padding:var(--section-pad) 0}
.scl-ai .ai-final .section-title{color:#fff}
.scl-ai .ai-final p{color:var(--text-on-dark-muted);max-width:560px;margin:0 auto 28px}
.scl-ai .final-cta-buttons{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:900px){
  .scl-ai .ai-hero-grid{grid-template-columns:1fr;gap:36px}
  .scl-ai .ai-hero h1{font-size:40px}
  .scl-ai .stats-grid,.scl-ai .steps{grid-template-columns:1fr 1fr}
  .scl-ai .section{padding:64px 0}
}
@media (max-width:600px){
  .scl-ai .trust-band .container{gap:22px}
  .scl-ai .kw-wrap{overflow-x:visible}
  .scl-ai table.kw{min-width:0;display:block}
  .scl-ai table.kw thead{display:none}
  .scl-ai table.kw tbody{display:block}
  .scl-ai table.kw tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 10px;border:1px solid var(--border);border-radius:var(--r-md);margin:12px;padding:14px;background:var(--bg-page)}
  .scl-ai table.kw td{border:0;padding:2px 0}
  .scl-ai table.kw td::before{content:attr(data-label);display:block;font:700 10px var(--font-heading);letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
  .scl-ai table.kw .chip{font-size:11.5px;padding:3px 7px;white-space:normal}
  .scl-ai table.kw td[data-label="Keyword"]{grid-column:1/3}
  .scl-ai table.kw td[data-label="Boost"]{grid-column:3/4;text-align:right}
  .scl-ai table.kw td:not([data-label]){grid-column:1/4;padding:0}
  .scl-ai table.kw tr.unlock-row,.scl-ai table.kw tr.unlock-row td{display:block;grid-column:auto;text-align:center}
  .scl-ai table.kw tr.unlock-row .btn-yellow{margin-top:10px;display:inline-block}
  .scl-ai .stats-grid,.scl-ai .steps{grid-template-columns:1fr}
  .scl-ai .ai-hero h1{font-size:33px;letter-spacing:-1px}
  .scl-ai .section-title{font-size:28px}
  .scl-ai .hero-form{flex-direction:column}
  .scl-ai .container{padding:0 20px}
}

/* ── Checker step 2: keyword picker ── */
.scl-ai .pick-lead{margin:0 0 12px}
.scl-ai .kwchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.scl-ai .kwchip{font:600 13.5px var(--font-body);color:var(--text-secondary);background:var(--bg-light);border:1.5px solid var(--border);border-radius:20px;padding:7px 13px;cursor:pointer;transition:all .15s;text-align:left}
.scl-ai .kwchip:hover{border-color:var(--teal)}
.scl-ai .kwchip.is-on{background:var(--teal-50);border-color:var(--teal);color:var(--teal-dark)}
.scl-ai .kwchip.is-on::before{content:"\2713\00a0"}
.scl-ai .kwchip-vol{font-weight:500;color:var(--text-muted);font-size:12px;margin-left:4px}
.scl-ai .pick-own{display:flex;gap:8px}
.scl-ai .pick-own input{flex:1;min-width:0;font:400 14px var(--font-body);padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text-primary)}
.scl-ai .pick-own input:focus{outline:none;border-color:var(--teal)}
.scl-ai .btn-ghost{font:700 13px var(--font-heading);padding:9px 16px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--bg-page);color:var(--text-primary);cursor:pointer}
.scl-ai .btn-ghost:hover{border-color:var(--teal);color:var(--teal-dark)}
.scl-ai .pick-count{font:600 12px var(--font-body);color:var(--text-muted);margin:8px 0 14px}
.scl-ai .pick-go{margin-top:0}
.scl-ai .pick-count:empty{display:none}

/* ── Report: score + question cards ── */
.scl-ai .score{background:var(--bg-page);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:28px;text-align:center;max-width:860px;margin:0 auto 24px}
.scl-ai .score-head{font:700 26px/1.25 var(--font-heading);color:var(--text-primary)}
.scl-ai .score-head strong{color:var(--teal-dark)}
.scl-ai .score-head.is-none strong{color:#c44536}
.scl-ai .score-sub{color:var(--text-secondary);font-size:15px;margin:8px auto 20px;max-width:560px}
.scl-ai .score-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.scl-ai .score-tile{border:1px solid var(--border-light);border-radius:var(--r-md);padding:14px 10px;background:var(--bg-light)}
.scl-ai .score-tile.is-none{background:#fdf3f1;border-color:#f3d5cf}
.scl-ai .score-tile.is-some{background:var(--teal-50);border-color:var(--teal-100)}
.scl-ai .st-name{font:700 14px var(--font-heading);color:var(--text-primary)}
.scl-ai .st-num{font:700 22px var(--font-heading);color:var(--text-primary);margin:4px 0}
.scl-ai .score-tile.is-none .st-num{color:#c44536}
.scl-ai .score-tile.is-some .st-num{color:var(--teal-dark)}
.scl-ai .st-src{font-size:12px;color:var(--text-muted)}
.scl-ai .q-cards{display:grid;gap:16px;max-width:860px;margin:0 auto}
.scl-ai .q-card{background:var(--bg-page);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:22px 24px}
.scl-ai .q-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.scl-ai .q-kw{font:700 18px var(--font-heading);color:var(--text-primary);margin:0}
.scl-ai .q-meta{font-size:13px;color:var(--text-muted);margin-top:3px}
.scl-ai .q-asked{font-style:italic;color:var(--text-secondary);font-size:15px;margin:12px 0 14px}
.scl-ai .q-answers{display:grid;gap:8px}
.scl-ai .q-ans{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-top:1px solid var(--border-light);padding-top:8px}
.scl-ai .q-ai{font:600 14px var(--font-body);color:var(--text-primary);width:92px}
.scl-ai .q-said{flex-basis:100%;font-size:13px}
.scl-ai .q-said summary{cursor:pointer;color:var(--teal-dark);font-weight:600;width:max-content}
.scl-ai .q-searched{color:var(--text-secondary);margin:8px 0 0}
.scl-ai .q-excerpt{white-space:pre-line;color:var(--text-secondary);background:var(--bg-light);border-radius:var(--r-sm);padding:12px 14px;margin:8px 0 4px;line-height:1.55;max-height:260px;overflow:auto}
.scl-ai .chip-src{background:var(--yellow-bg);color:var(--warning-text)}
.scl-ai .q-proof{font-size:13px;color:var(--text-secondary)}
.scl-ai .q-proof a{color:var(--teal-dark);word-break:break-all}
.scl-ai .q-excerpt mark{background:var(--yellow);color:var(--navy);border-radius:3px;padding:0 3px;font-weight:600}
.scl-ai .q-more{font:inherit;font-weight:600;color:var(--teal-dark);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.scl-ai .q-instead{margin-top:14px;font-size:14px;color:var(--text-secondary)}
.scl-ai .q-instead:empty{display:none}
.scl-ai .q-instead strong{color:#a83a32}
.scl-ai .res-panel{max-width:860px;margin-left:auto;margin-right:auto}
.scl-ai .res-copy{flex:1;min-width:260px}
.scl-ai .res-copy h3{font:700 19px var(--font-heading);color:var(--text-primary);margin:0 0 6px}
.scl-ai .res-copy p{color:var(--text-secondary);font-size:14.5px;margin:0}
.scl-ai .res-copy .res-fine{font-size:13px;color:var(--text-muted);margin-top:6px}
.scl-ai .res-foot{text-align:center;color:var(--text-muted);font-size:13.5px;margin-top:16px}
@media (max-width:640px){
  .scl-ai .score{padding:20px 16px}
  .scl-ai .score-head{font-size:21px}
  .scl-ai .score-tiles{gap:8px}
  .scl-ai .st-num{font-size:18px}
  .scl-ai .q-card{padding:18px 16px}
  .scl-ai .q-head{flex-direction:column;gap:8px}
  .scl-ai .q-ai{width:auto}
}

/* ── The Mechanism: which search engine each AI tool reads ── */
.scl-ai .mech-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1040px;margin:0 auto}
.scl-ai .mech-grid .prose{max-width:none;margin:0;text-align:left}
.scl-ai .mech-grid .flow-cols{padding-top:20px}
/* Grid children default to min-width:auto, which let the diagram push the
   whole column wider than a phone screen. */
.scl-ai .mech-grid > *{min-width:0}
@media (max-width:860px){.scl-ai .mech-grid{grid-template-columns:minmax(0,1fr);gap:28px}}
.scl-ai .flow-panel{background:var(--bg-page);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.scl-ai .flow-head{padding:24px 26px 6px}
.scl-ai .flow-eyebrow{font:700 11px/1 var(--font-heading);letter-spacing:2px;text-transform:uppercase;color:var(--teal)}
.scl-ai .flow-title{font:700 20px/1.3 var(--font-heading);color:var(--text-primary);margin-top:8px}
.scl-ai .flow-cols{display:flex;justify-content:space-between;padding:14px 26px 0;font:700 10.5px/1 var(--font-heading);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted)}
.scl-ai .flow-cols span:last-child{width:150px;text-align:center}
.scl-ai .flow-row{display:flex;align-items:center;gap:12px;padding:14px 26px;border-top:1px solid var(--border-light)}
.scl-ai .flow-cols + .flow-row{border-top:0}
.scl-ai .flow-tools{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.scl-ai .flow-tool{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--font-body);color:var(--text-primary);background:var(--bg-light);border:1px solid var(--border-light);border-radius:18px;padding:7px 12px 7px 9px;white-space:nowrap}
.scl-ai .dot{width:9px;height:9px;border-radius:50%;flex:none}
.scl-ai .dot-gpt{background:#10a37f}
.scl-ai .dot-copilot{background:#2b7de9}
.scl-ai .dot-ddg{background:#de5833}
.scl-ai .dot-pplx{background:#20808d}
.scl-ai .dot-claude{background:#d97757}
.scl-ai .dot-google{background:#4285f4}
.scl-ai .flow-logo{width:16px;height:16px;flex:none;display:block}
.scl-ai .flow-engine{display:flex;align-items:center;justify-content:center;gap:8px}
.scl-ai .flow-engine .flow-logo{width:20px;height:20px}
.scl-ai .flow-arrow{position:relative;flex:none;width:34px;height:2px;background:var(--border)}
.scl-ai .flow-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--text-muted);border-right:0}
.scl-ai .flow-engine{flex:none;width:150px;white-space:nowrap;text-align:center;border-radius:var(--r-md);padding:12px 8px;border:1.5px solid}
.scl-ai .flow-engine b{font:700 14.5px/1.2 var(--font-heading)}
.scl-ai .eng-bing{background:#eaf6fb;border-color:#b5dcea;color:#0b6a8a}
.scl-ai .eng-brave{background:#fdf0ea;border-color:#f3cdbb;color:#b8451c}
.scl-ai .eng-google{background:#eef3fe;border-color:#c5d5f8;color:#2a5bd0}
.scl-ai .flow-foot{display:flex;align-items:center;gap:12px;background:var(--navy);color:var(--text-on-dark);font-size:13.5px;line-height:1.45;padding:16px 26px}
.scl-ai .flow-foot strong{color:#fff}
.scl-ai .flow-foot-mark{flex:none;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--navy);font:700 17px/30px var(--font-heading);text-align:center}
@media (max-width:480px){
  .scl-ai .flow-head,.scl-ai .flow-row,.scl-ai .flow-foot{padding-left:18px;padding-right:18px}
  .scl-ai .flow-cols{padding-left:18px;padding-right:18px}
  .scl-ai .flow-engine,.scl-ai .flow-cols span:last-child{width:116px}
  .scl-ai .flow-engine{padding:10px 6px;gap:6px}
  .scl-ai .flow-engine b{font-size:12.5px}
  .scl-ai .flow-engine .flow-logo{width:17px;height:17px}
  .scl-ai .flow-row{gap:8px}
  .scl-ai .flow-tool{font-size:12px;padding:6px 10px 6px 8px;white-space:normal}
  .scl-ai .flow-arrow{width:20px}
  .scl-ai .flow-title{font-size:18px}
}

.scl-ai .score-cta{margin-top:22px}
.scl-ai .score-cta-note{font-size:13px;color:var(--text-muted);margin-top:10px}
.scl-ai .score-cta-note:empty{display:none}
.scl-ai .score-stakes{font-size:14.5px;color:var(--text-secondary);margin:0 0 14px}
.scl-ai .q-why{font-size:14.5px;color:var(--text-primary);margin:10px 0 0}
.scl-ai .q-why strong{color:#c44536}
.scl-ai .q-why strong.ok{color:var(--teal-dark)}
.scl-ai .res-act{text-align:center;flex:none}
.scl-ai .res-act-note{font-size:13px;color:var(--text-secondary);margin-top:10px}
.scl-ai .res-act-note:empty{display:none}
.scl-ai .res-act-proof{font-size:12px;color:var(--text-muted);margin-top:6px}
.scl-ai .ai-sticky{display:none}
@media (max-width:640px){
  .scl-ai .ai-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--bg-page);border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(26,43,60,.1);padding:10px 14px}
  .scl-ai .ai-sticky .btn-yellow{display:block;text-align:center;padding:13px 10px;font-size:13px}
  .scl-ai .res-act{width:100%}
}

/* ── Hero visual B: a mock AI answer that leaves the visitor out ── */
.scl-ai .mock-panel{background:var(--bg-page);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.scl-ai .mock-bar{display:flex;align-items:center;gap:6px;padding:12px 18px;background:var(--bg-light);border-bottom:1px solid var(--border-light)}
.scl-ai .mock-bar span{width:9px;height:9px;border-radius:50%;background:var(--border)}
.scl-ai .mock-bar em{font:700 10.5px/1 var(--font-heading);font-style:normal;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-left:8px}
.scl-ai .mock-body{padding:22px 24px 20px;display:grid;gap:16px}
.scl-ai .mock-q{justify-self:end;max-width:82%;background:var(--navy);color:#fff;font:500 14.5px/1.45 var(--font-body);border-radius:18px 18px 4px 18px;padding:11px 16px;animation:sclAiMockIn .5s ease both}
.scl-ai .mock-a{max-width:94%;background:var(--bg-light);border:1px solid var(--border-light);border-radius:18px 18px 18px 4px;padding:14px 18px;font-size:14px;color:var(--text-secondary);animation:sclAiMockIn .5s ease .5s both}
.scl-ai .mock-a p{margin:0 0 10px}
.scl-ai .mock-a ol{margin:0;padding:0;list-style:none;counter-reset:mock;display:grid;gap:10px}
.scl-ai .mock-a li{counter-increment:mock;position:relative;padding-left:28px;animation:sclAiMockIn .45s ease both}
.scl-ai .mock-a li:nth-child(1){animation-delay:1s}
.scl-ai .mock-a li:nth-child(2){animation-delay:1.4s}
.scl-ai .mock-a li:nth-child(3){animation-delay:1.8s}
.scl-ai .mock-a li::before{content:counter(mock);position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:var(--teal-50);color:var(--teal-dark);font:700 11px/19px var(--font-heading);text-align:center}
.scl-ai .mock-a li b{display:block;color:var(--text-primary);font-weight:600}
.scl-ai .mock-a li span{display:block;font-size:13px;color:var(--text-muted)}
.scl-ai .mock-foot{display:flex;align-items:center;gap:12px;background:#fdf3f1;border-top:1px solid #f3d5cf;color:#8f3329;font-size:13.5px;line-height:1.45;padding:15px 24px;animation:sclAiMockIn .5s ease 2.4s both}
.scl-ai .mock-foot strong{color:#a83a32}
.scl-ai .mock-x{flex:none;width:28px;height:28px;border-radius:50%;background:#c44536;color:#fff;font:700 19px/27px var(--font-heading);text-align:center}
@keyframes sclAiMockIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.scl-ai .mock-q,.scl-ai .mock-a,.scl-ai .mock-a li,.scl-ai .mock-foot{animation:none}}

/* The hidden attribute must win over component display rules (e.g. .pick-own is flex). */
.scl-ai [hidden]{display:none !important}