:root { --bg:#F6FAFB; --surface:#fff; --ink:#0E1B2A; --ink-2:#43556A; --ink-3:#6A7B8E; --line:#DAE4EA; --cyan:#3AD5F8; --cyan-ink:#08759A; --tint:#E6F7FC; --yellow:#FFC93C; --good:#14774A; --good-bg:#E3F4EC; --amber:#8A5A00; --amber-bg:#FFF1D2; --bad:#A8322F; --bad-bg:#FBE7E6; --font:"Montserrat","Segoe UI",system-ui,sans-serif; }
* { box-sizing:border-box; }
html { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--cyan-ink); }
h1,h2,h3 { margin:0; line-height:1.2; font-weight:700; }
h1 { font-size:clamp(24px,5vw,34px); letter-spacing:-.01em; }
h2 { font-size:20px; } h3 { font-size:16px; }
p { margin:0; }
.muted { color:var(--ink-3); font-size:14px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:env(safe-area-inset-top,0px); z-index:5; }
.mainnav { display:flex; gap:6px; align-items:center; }
.mainnav a, .mainnav button { text-decoration:none; color:var(--ink-2); font:inherit; font-weight:600; font-size:14px; padding:7px 12px; border-radius:99px; background:none; border:0; cursor:pointer; }
.mainnav a.on { background:var(--tint); color:var(--cyan-ink); }
.mainnav a.ghost { border:1px solid var(--line); }
.mainnav a.cta { background:var(--yellow); color:var(--ink); font-weight:700; }
.mainnav .acct { border:1.5px solid var(--ink); color:var(--ink); }
.mainnav .acct.in { border-color:var(--ink); background:var(--ink); color:#fff; width:36px; height:36px; padding:0; border-radius:50%; font-weight:700; }
.brand img { display:block; height:36px; width:auto; }
body.test-mode .mainnav { display:none; }
body.test-mode .brand { pointer-events:none; }
.testbar { display:flex; gap:14px; align-items:center; font-size:14px; color:var(--ink-2); }
.testbar .timer { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); font-family:ui-monospace,Menlo,monospace; }
.testbar .timer.low { color:var(--bad); }
.testbar .exit { font:inherit; font-weight:600; background:none; border:1px solid var(--line); border-radius:99px; padding:5px 12px; cursor:pointer; color:var(--ink-2); }
.pilot-tag { display:inline-block; background:#FFF1D2; color:#8A5A00; font-size:11px; font-weight:700; padding:1px 7px; border-radius:99px; vertical-align:1px; }
.sheet { border:1.5px dashed var(--cyan-ink); background:var(--tint); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.sheet h3 { font-size:17px; }
.sheet .social { display:flex; flex-direction:column; gap:8px; }
.sheet .btn.social-btn { background:var(--surface); color:var(--ink); border:1.5px solid var(--line); justify-content:flex-start; gap:12px; }
.sheet .btn.social-btn svg { width:20px; height:20px; flex:0 0 20px; }
.sheet .or { font-size:13px; color:var(--ink-3); }
.sheet .notnow { background:none; border:0; color:var(--ink-3); font:inherit; font-size:13.5px; cursor:pointer; text-decoration:underline; padding:0; align-self:flex-start; }
.foot { border-top:1px solid var(--line); background:var(--surface); }
.foot__in { max-width:760px; margin-inline:auto; padding:22px 16px 40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.foot__in b { display:block; color:var(--ink); font-size:12.5px; margin-bottom:4px; }
.foot__in a { color:var(--cyan-ink); }
.countdown { font-size:13px; color:var(--ink-2); }
@media (max-width:520px) { .mainnav a.ghost, .mainnav a.cta { display:none; } .testbar { gap:10px; font-size:13px; } }
.wrap { max-width:760px; margin-inline:auto; padding:24px 16px 80px; display:flex; flex-direction:column; gap:20px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.card.link { cursor:pointer; transition:border-color .15s; } .card.link:hover { border-color:var(--cyan); }
.eyebrow { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:99px; padding:12px 20px; font:inherit; font-weight:700; font-size:15px; cursor:pointer; text-decoration:none; background:var(--yellow); color:var(--ink); min-height:44px; }
.btn.secondary { background:var(--surface); color:var(--ink); border:1.5px solid var(--ink); }
.btn.quiet { background:var(--tint); color:var(--cyan-ink); }
.btn.wa { background:#25D366; color:#fff; }
.btn:disabled { opacity:.5; cursor:default; }
.btn.small { padding:8px 14px; font-size:13.5px; min-height:36px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { border:1.5px solid var(--line); background:var(--surface); border-radius:99px; padding:7px 13px; font:inherit; font-size:14px; cursor:pointer; color:var(--ink-2); }
.chip[aria-pressed="true"] { background:var(--ink); color:#fff; border-color:var(--ink); }
.topics label { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--line); font-size:15px; cursor:pointer; }
.topics label:first-child { border-top:0; }
.topics input { width:18px; height:18px; margin-top:3px; accent-color:var(--cyan-ink); }
.topics small { display:block; color:var(--ink-3); font-size:13px; }
.progress { height:8px; background:var(--line); border-radius:99px; overflow:hidden; }
.progress > i { display:block; height:100%; background:var(--cyan); border-radius:99px; transition:width .25s; }
.qhead { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-3); }
.timer { font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-2); }
.timer.low { color:var(--bad); }
.stem { font-size:17px; line-height:1.5; }
.stem .img { margin-top:8px; }
.opts { display:flex; flex-direction:column; gap:8px; }
.opt { display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--surface); font:inherit; font-size:15.5px; text-align:left; cursor:pointer; line-height:1.45; }
.opt b { flex:0 0 26px; height:26px; border-radius:50%; background:var(--tint); color:var(--cyan-ink); display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.opt[aria-pressed="true"] { border-color:var(--ink); background:#F0F4F7; }
.opt.right { border-color:var(--good); background:var(--good-bg); }
.opt.wrong { border-color:var(--bad); background:var(--bad-bg); }
.opt.right b { background:var(--good); color:#fff; } .opt.wrong b { background:var(--bad); color:#fff; }
.nav2 { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.flag { font-size:13.5px; color:var(--ink-3); background:none; border:0; cursor:pointer; font-family:inherit; }
.flag.on { color:var(--amber); font-weight:600; }
.big { font-size:44px; font-weight:700; line-height:1; }
.band { display:inline-block; border-radius:99px; padding:4px 12px; font-size:13px; font-weight:700; }
.band.g { background:var(--good-bg); color:var(--good); } .band.a { background:var(--amber-bg); color:var(--amber); } .band.r { background:var(--bad-bg); color:var(--bad); }
.bars { display:flex; flex-direction:column; gap:8px; }
.bar { display:grid; grid-template-columns:minmax(120px,1.4fr) 3fr auto; gap:10px; align-items:center; font-size:14px; }
.bar .track { height:10px; background:var(--line); border-radius:99px; overflow:hidden; }
.bar .track i { display:block; height:100%; border-radius:99px; }
.bar .track i.g { background:var(--good); } .bar .track i.a { background:var(--yellow); } .bar .track i.r { background:var(--bad); }
.bar .pct { font-variant-numeric:tabular-nums; color:var(--ink-2); min-width:44px; text-align:right; }
.rec { border-left:5px solid var(--line); }
.rec.r { border-left-color:var(--bad); } .rec.a { border-left-color:var(--yellow); } .rec.g { border-left-color:var(--good); }
.rec ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; font-size:14.5px; }
.rec .why { font-size:13.5px; color:var(--ink-2); }
.review { display:flex; flex-direction:column; gap:12px; }
.review .q { font-size:15px; }
.review .exp { background:var(--tint); border-radius:8px; padding:10px 12px; font-size:14px; color:var(--ink-2); }
.hist table { width:100%; border-collapse:collapse; font-size:14px; }
.hist th { text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:8px 6px; border-bottom:2px solid var(--ink); }
.hist td { padding:9px 6px; border-bottom:1px solid var(--line); }
.hist td.n { text-align:right; font-variant-numeric:tabular-nums; }
input[type=email], input[type=text] { font:inherit; font-size:16px; padding:11px 13px; border:1.5px solid var(--line); border-radius:8px; width:100%; max-width:360px; }
.ok { color:var(--good); font-weight:600; } .err { color:var(--bad); font-weight:600; }
.sr { position:absolute; left:-9999px; }
@media (max-width:520px) { .bar { grid-template-columns:1fr; gap:4px; } .bar .pct { text-align:left; } }
@media (prefers-reduced-motion: reduce) { .progress > i, .card.link { transition:none; } }

.heat { display:grid; grid-template-columns:repeat(13,1fr); gap:3px; margin:4px 0; }
.heat i { display:block; height:9px; border-radius:2px; background:var(--line); }
.heat i.g { background:var(--good); } .heat i.a { background:var(--yellow); } .heat i.r { background:var(--bad); }
a.bar:hover span:first-child { color:var(--cyan-ink); text-decoration:underline; }