/* SuperImpactScore v2 — SuperCrowd brand system (Nunito, deep indigo, power pink) */

:root{
  --indigo:#2e0052; --indigo-2:#4b0082; --indigo-hover:#622599;
  --slate:#5d4cbf; --lilac:#f4e6ff; --sky:#71c1f4; --pink:#ca0362; --pink-hover:#a80252;
  --bg:#faf9f8; --surface:#ffffff; --surface-2:#f6f1fb;
  --ink:#1b1c1c; --muted:#4c4451; --outline:#cec3d3; --outline-soft:#e6ddee;
  --hero-ink:#ffffff; --hero-muted:#d9c8ec;
  --good:#1e7f4f; --good-bg:#e7f5ee; --warn:#9a6700; --warn-bg:#fdf3d7; --bad:#b3261e; --bad-bg:#fdeceb;
  --bar-track:#ece4f4; --bar-fill:#4b0082; --dial-track:#efe6f7;
  --chip-bg:#f4e6ff; --chip-ink:#4b0082;
  --shadow:0 1px 2px rgba(46,0,82,.06), 0 8px 24px rgba(46,0,82,.08);
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#160126; --surface:#20063a; --surface-2:#2a0d47;
  --ink:#f5effa; --muted:#c9b8d9; --outline:#4a3560; --outline-soft:#3a2551;
  --lilac:#2a0d47;
  --good:#5fd39b; --good-bg:#123726; --warn:#e3b341; --warn-bg:#3a2c08; --bad:#ff8a80; --bad-bg:#46120f;
  --bar-track:#3a2551; --bar-fill:#b794e0; --dial-track:#3a2551;
  --chip-bg:#3a2551; --chip-ink:#e0ccf2;
  --pink:#e8347f; --pink-hover:#f45c99;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Nunito','Segoe UI',system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.55;
}
.wrap{ max-width:1060px; margin:0 auto; padding:0 20px; }
h1,h2,h3{ text-wrap:balance; margin:0; }
p{ margin:0; }
a{ color:var(--slate); }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ---------- masthead ---------- */
.masthead{ padding:22px 0 18px; }
.masthead .wrap{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.masthead img{ width:44px; height:44px; display:block; }
.mast-home{ line-height:0; }
.lockup{ display:flex; flex-direction:column; }
.wordmark{ font-weight:800; font-size:26px; letter-spacing:.5px; line-height:1.1; text-decoration:none; }
.wordmark .wm-a{ color:var(--indigo); } .wordmark .wm-b{ color:var(--pink); }
@media (prefers-color-scheme: dark){ .wordmark .wm-a{ color:#e0ccf2; } }
.utility{ font-size:13px; color:var(--muted); letter-spacing:.04em; }
.masthead .spacer{ flex:1; }
.member-chip{ font-size:13px; font-weight:700; color:var(--chip-ink); background:var(--chip-bg); border-radius:9999px; padding:6px 14px; white-space:nowrap; }

/* ---------- hero ---------- */
.hero{ background:var(--indigo); color:var(--hero-ink); }
@media (prefers-color-scheme: dark){ .hero{ background:#20063a; } }
.hero .wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center; padding-top:52px; padding-bottom:56px; }
@media (max-width:800px){ .hero .wrap{ grid-template-columns:1fr; } }
.eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; font-weight:700; color:var(--sky); margin-bottom:14px; }
.hero h1{ font-size:clamp(30px,4.6vw,44px); font-weight:800; line-height:1.12; color:var(--hero-ink); }
.hero .sub{ margin-top:16px; font-size:17.5px; color:var(--hero-muted); max-width:34em; }
.hero .ctas{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-block; text-decoration:none; text-align:center; border-radius:9999px; font-weight:800; font-size:15.5px; padding:13px 26px; border:none; transition:background .15s; }
.btn-pink{ background:var(--pink); color:#fff; }
.btn-pink:hover{ background:var(--pink-hover); }
.btn-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.btn-ghost:hover{ border-color:#fff; }
.btn-indigo{ background:var(--indigo-2); color:#fff; }
.btn-indigo:hover{ background:var(--indigo-hover); }
.hero .fineprint{ margin-top:14px; font-size:13.5px; color:var(--hero-muted); }

.preview-card{ background:var(--surface); color:var(--ink); border-radius:18px; box-shadow:var(--shadow); padding:22px 22px 18px; max-width:360px; justify-self:end; width:100%; }
@media (max-width:800px){ .preview-card{ justify-self:start; } }
.preview-card .pc-label{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--muted); }
.pc-company{ font-weight:800; font-size:17px; margin-top:2px; }
.pc-row{ display:flex; align-items:center; gap:16px; margin-top:12px; }
.pc-score-num{ font-size:38px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.pc-score-den{ font-size:15px; color:var(--muted); font-weight:700; }
.pc-note{ font-size:13px; color:var(--muted); font-weight:700; }
.pc-mini{ display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.pc-mini .mrow{ display:grid; grid-template-columns:110px 1fr 30px; gap:10px; align-items:center; font-size:13px; }
.mtrack{ height:8px; border-radius:4px; background:var(--bar-track); position:relative; overflow:hidden; }
.mfill{ position:absolute; inset:0 auto 0 0; background:var(--bar-fill); border-radius:0 4px 4px 0; }
.mval{ font-variant-numeric:tabular-nums; font-weight:700; text-align:right; color:var(--muted); }

/* ---------- sections ---------- */
section{ padding:44px 0; }
.sec-title{ font-size:24px; font-weight:800; }
.sec-kicker{ text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; font-weight:700; color:var(--slate); margin-bottom:8px; }
@media (prefers-color-scheme: dark){ .sec-kicker{ color:var(--sky); } }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; }
@media (max-width:800px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--surface); border:1px solid var(--outline-soft); border-radius:14px; padding:18px 18px 20px; }
.step .n{ width:28px; height:28px; border-radius:9999px; background:var(--chip-bg); color:var(--chip-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; margin-bottom:10px; }
.step h3{ font-size:16.5px; font-weight:800; }
.step p{ font-size:14.5px; color:var(--muted); margin-top:6px; }

/* ---------- pricing ---------- */
.price-band{ background:var(--surface-2); border-top:1px solid var(--outline-soft); border-bottom:1px solid var(--outline-soft); }
.doors{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
@media (max-width:800px){ .doors{ grid-template-columns:1fr; } }
.door{ background:var(--surface); border:1px solid var(--outline-soft); border-radius:16px; padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.door .d-kicker{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:var(--muted); }
.door .d-price{ font-size:30px; font-weight:800; }
.door .d-price small{ font-size:15px; color:var(--muted); font-weight:700; }
.door p{ font-size:14.5px; color:var(--muted); }
.door .btn{ align-self:flex-start; margin-top:6px; }
.door.member{ border:2px solid var(--slate); position:relative; }
.d-flag{ position:absolute; top:-12px; left:20px; background:var(--pink); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.04em; border-radius:9999px; padding:4px 12px; }
.upsell{ margin-top:26px; background:var(--indigo); color:#fff; border-radius:18px; padding:26px; box-shadow:var(--shadow); }
.upsell h3{ font-size:20px; font-weight:800; color:#fff; }
.upsell p{ margin:10px 0 16px; color:var(--hero-muted); font-size:15px; max-width:60em; }
.stripe-note{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; }

/* ---------- picker ---------- */
.picker-tools{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.search{ flex:1 1 260px; border:1.5px solid var(--outline); border-radius:9999px; padding:10px 18px; font-family:inherit; font-size:15px; background:var(--surface); color:var(--ink); }
.chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chip{ border:1.5px solid var(--outline); background:var(--surface); color:var(--muted); border-radius:9999px; padding:7px 14px; font-size:13.5px; font-weight:700; }
.chip[aria-pressed="true"]{ background:var(--indigo-2); border-color:var(--indigo-2); color:#fff; }
.chip-locked{ text-decoration:none; }
.chip-locked:hover{ border-color:var(--pink); color:var(--pink); }
.offer-list{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.offer{ display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; background:var(--surface); border:1px solid var(--outline-soft); border-radius:14px; padding:16px 18px; }
.offer:hover{ border-color:var(--slate); }
.offer .o-name{ font-weight:800; font-size:16.5px; }
.offer .o-sub{ font-size:13.5px; color:var(--muted); margin-top:2px; }
.o-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; grid-column:1 / -1; }
.badge{ font-size:11.5px; font-weight:800; letter-spacing:.03em; border-radius:9999px; padding:3px 10px; background:var(--chip-bg); color:var(--chip-ink); }
.badge.pick{ background:var(--pink); color:#fff; }
.badge.sample{ background:var(--sky); color:#0e2a3d; }
.offer .btn{ padding:9px 20px; font-size:14px; }
.picker-note{ margin-top:14px; font-size:13px; color:var(--muted); }
.demo-note{ margin-top:14px; background:var(--warn-bg); color:var(--warn); font-size:13.5px; font-weight:700; border-radius:10px; padding:10px 16px; }
.offer-count{ font-size:13.5px; color:var(--muted); margin-top:14px; }

/* ---------- member steps + FAQ ---------- */
.member-steps{ margin:4px 0 2px; padding-left:20px; font-size:14.5px; color:var(--muted); }
.member-steps li{ margin-bottom:6px; }
.member-steps a{ font-weight:700; }
.faq-list{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.faq-list details{ background:var(--surface); border:1px solid var(--outline-soft); border-radius:14px; padding:16px 18px; }
.faq-list summary{ font-weight:800; font-size:15.5px; cursor:pointer; }
.faq-list summary::marker{ color:var(--pink); }
.faq-list details[open]{ border-color:var(--slate); }
.faq-list details p{ margin-top:10px; font-size:14.5px; color:var(--muted); max-width:72em; }

/* ---------- footer ---------- */
footer{ background:var(--indigo); color:var(--hero-muted); margin-top:30px; }
@media (prefers-color-scheme: dark){ footer{ background:#12001f; } }
footer .wrap{ padding:34px 20px 40px; }
.fam{ display:flex; gap:18px; flex-wrap:wrap; font-size:14px; font-weight:700; }
.fam a{ color:#fff; opacity:.92; text-decoration:none; }
.fam a:hover{ text-decoration:underline; }
.disclaimer{ margin-top:18px; font-size:12.5px; line-height:1.6; opacity:.75; max-width:70em; }
.copyright{ margin-top:14px; font-size:12.5px; opacity:.6; }

/* ---------- modal ---------- */
.modal-back{ position:fixed; inset:0; background:rgba(23,1,43,.55); display:none; align-items:center; justify-content:center; padding:20px; z-index:50; }
.modal-back.open{ display:flex; }
.modal{ background:var(--surface); color:var(--ink); border-radius:18px; box-shadow:var(--shadow); max-width:640px; width:100%; padding:26px; position:relative; max-height:92vh; overflow-y:auto; }
.modal h3{ font-size:20px; font-weight:800; padding-right:40px; }
.modal .m-sub{ color:var(--muted); font-size:14.5px; margin-top:4px; }
.modal .doors{ margin-top:18px; }
.modal .door{ box-shadow:none; }
.m-close{ position:absolute; top:14px; right:14px; border:none; background:var(--surface-2); border-radius:9999px; width:34px; height:34px; font-size:16px; font-weight:800; color:var(--muted); }
.code-row{ display:flex; gap:8px; }
.code-row input{ flex:1; border:1.5px solid var(--outline); border-radius:9999px; padding:9px 16px; font-family:inherit; font-size:14.5px; background:var(--surface); color:var(--ink); min-width:0; }
.m-note{ font-size:12.5px; color:var(--muted); }
.m-error{ margin-top:12px; background:var(--bad-bg); color:var(--bad); font-size:13.5px; font-weight:700; border-radius:10px; padding:10px 14px; }

/* ---------- report ---------- */
.rep-strip{ padding:18px 0 0; }
.backlink{ background:none; border:none; color:var(--slate); font-weight:700; font-size:14px; padding:0; text-decoration:none; }
@media (prefers-color-scheme: dark){ .backlink{ color:var(--sky); } }
.sample-ribbon{ margin-top:14px; background:var(--sky); color:#0e2a3d; border-radius:10px; font-size:14px; font-weight:700; padding:10px 16px; }
.rep-head{ padding:22px 0 8px; }
.rep-head .r-company{ font-size:30px; font-weight:800; }
.rep-meta{ margin-top:6px; font-size:14px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; }
.rep-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }

.score-hero{ margin-top:22px; background:var(--surface); border:1px solid var(--outline-soft); border-radius:18px; box-shadow:var(--shadow); padding:26px; display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; }
@media (max-width:700px){ .score-hero{ grid-template-columns:1fr; } }
.dial{ position:relative; width:190px; height:190px; }
.dial svg{ width:100%; height:100%; display:block; }
.dial .d-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.d-num{ font-size:46px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.d-den{ font-size:14px; font-weight:700; color:var(--muted); margin-top:2px; }
.verdict h3{ font-size:19px; font-weight:800; }
.verdict p{ color:var(--muted); font-size:15px; margin-top:8px; max-width:46em; }
.sw-lists{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
@media (max-width:700px){ .sw-lists{ grid-template-columns:1fr; } }
.sw h4{ margin:0 0 6px; font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.sw ul{ margin:0; padding-left:18px; font-size:14px; color:var(--ink); }
.sw li{ margin-bottom:4px; }

.sections{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.sect{ background:var(--surface); border:1px solid var(--outline-soft); border-radius:14px; padding:20px 22px; }
.sect-top{ display:grid; grid-template-columns:1fr 240px 44px; gap:16px; align-items:center; }
@media (max-width:700px){ .sect-top{ grid-template-columns:1fr; gap:8px; } }
.sect h3{ font-size:17px; font-weight:800; }
.sect .strack{ height:10px; border-radius:5px; background:var(--bar-track); position:relative; overflow:hidden; }
.sect .sfill{ position:absolute; top:0; bottom:0; left:0; background:var(--bar-fill); border-radius:0 4px 4px 0; }
.sect .sval{ font-weight:800; font-size:16px; text-align:right; font-variant-numeric:tabular-nums; }
.sect .sval small{ color:var(--muted); font-weight:700; font-size:12px; }
.sect p{ margin-top:10px; font-size:14.5px; color:var(--muted); max-width:72em; }
.cite{ font-size:12px; font-weight:800; color:var(--slate); }
@media (prefers-color-scheme: dark){ .cite{ color:var(--sky); } }

.claims{ margin-top:30px; }
.claims h2, .sources h2{ font-size:20px; font-weight:800; margin-bottom:6px; }
.claims .t-note{ font-size:13.5px; color:var(--muted); margin-bottom:14px; }
.tablewrap{ overflow-x:auto; border:1px solid var(--outline-soft); border-radius:14px; background:var(--surface); }
table{ border-collapse:collapse; width:100%; min-width:640px; font-size:14px; }
th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--outline-soft); }
td{ padding:13px 16px; border-bottom:1px solid var(--outline-soft); vertical-align:top; }
tr:last-child td{ border-bottom:none; }
.status{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:12.5px; border-radius:9999px; padding:4px 12px; white-space:nowrap; }
.status.ok{ color:var(--good); background:var(--good-bg); }
.status.mid{ color:var(--warn); background:var(--warn-bg); }
.status.no{ color:var(--bad); background:var(--bad-bg); }

.sources{ margin-top:30px; }
.sources ol{ margin:10px 0 0; padding-left:22px; font-size:14px; color:var(--muted); }
.sources li{ margin-bottom:6px; overflow-wrap:anywhere; }
.srclink{ color:var(--slate); font-weight:700; text-decoration:underline; text-decoration-color:var(--outline); }
@media (prefers-color-scheme: dark){ .srclink{ color:var(--sky); } }

.disc-box{ margin-top:30px; background:var(--surface-2); border:1px solid var(--outline-soft); border-radius:14px; padding:18px 20px; font-size:13px; color:var(--muted); line-height:1.6; }
.refresh-row{ margin-top:16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13.5px; color:var(--muted); }

/* ---------- progress (report generating) ---------- */
.progress-panel{ margin:30px auto 60px; max-width:640px; background:var(--surface); border:1px solid var(--outline-soft); border-radius:18px; box-shadow:var(--shadow); padding:34px; text-align:center; }
.progress-panel h2{ font-size:22px; font-weight:800; }
.progress-panel p{ color:var(--muted); font-size:15px; margin-top:10px; }
.spinner{ width:44px; height:44px; margin:0 auto 18px; border-radius:50%; border:4px solid var(--bar-track); border-top-color:var(--pink); animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.progress-steps{ margin-top:20px; text-align:left; display:inline-block; font-size:14px; color:var(--muted); }
.progress-steps li{ margin-bottom:6px; }
.error-panel{ border-color:var(--bad); }