/* The Baseline Score · design system
   Navy #2A2D60 / deep navy #1A1D4A / mint #AFFFB5 / cream #FAF8F3 · Fraunces + Manrope */

:root{
  --ground:#FAF8F3;
  --surface:#FFFFFF;
  --sunk:#F1EEE5;
  --ink:#1A1D4A;
  --ink-soft:#4A4E7A;
  --ink-faint:#8A8DA6;
  --navy:#2A2D60;
  --navy-deep:#1A1D4A;
  --navy-ink:#F4F2EA;          /* text on navy */
  --navy-ink-soft:#B9BCD6;
  --mint:#AFFFB5;
  --mint-deep:#2F7A46;
  --mint-ink:#0F2A17;          /* text on mint */
  --rule:#E4E0D4;
  --rule-strong:#CFCAB9;
  --good:#2F7A46; --good-soft:#E3F5E6;
  --warn:#9A6414; --warn-soft:#FBF0DC;
  --flat:#5A5E86; --flat-soft:#ECEDF4;
  --focus:#2A2D60;
  --shadow:0 1px 2px rgba(26,29,74,.06),0 12px 32px -16px rgba(26,29,74,.25);
  --maxw:46rem;
  --r:16px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#12142B; --surface:#1A1D3E; --sunk:#22254A;
    --ink:#F2F0E8; --ink-soft:#B6B9D2; --ink-faint:#7F83A3;
    --navy:#232655; --navy-deep:#1A1D4A; --navy-ink:#F4F2EA; --navy-ink-soft:#B9BCD6;
    --mint:#8FE6A2; --mint-deep:#AFFFB5; --mint-ink:#0F2A17;
    --rule:#2C3058; --rule-strong:#3D4272;
    --good:#8FE6A2; --good-soft:#1E3A2A; --warn:#E3B463; --warn-soft:#3A2E18; --flat:#A7ABC8; --flat-soft:#262A4A;
    --focus:#AFFFB5;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 32px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#12142B; --surface:#1A1D3E; --sunk:#22254A;
  --ink:#F2F0E8; --ink-soft:#B6B9D2; --ink-faint:#7F83A3;
  --navy:#232655; --navy-deep:#1A1D4A; --navy-ink:#F4F2EA; --navy-ink-soft:#B9BCD6;
  --mint:#8FE6A2; --mint-deep:#AFFFB5; --mint-ink:#0F2A17;
  --rule:#2C3058; --rule-strong:#3D4272;
  --good:#8FE6A2; --good-soft:#1E3A2A; --warn:#E3B463; --warn-soft:#3A2E18; --flat:#A7ABC8; --flat-soft:#262A4A;
  --focus:#AFFFB5;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 32px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:light dark;height:100%}
body{
  margin:0;min-height:100%;
  background:var(--ground);color:var(--ink);
  font-family:Manrope,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:500;margin:0;text-wrap:balance;
  font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1;letter-spacing:-.015em;
}
p{margin:0}
button{font:inherit;color:inherit}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px;padding-block:0}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:18px;padding:18px 0 0;font-size:.82rem;color:var(--ink-faint)}
.topbar .brand{font-family:Fraunces,Georgia,serif;font-size:1.05rem;color:var(--ink);text-decoration:none;flex:1;font-variation-settings:"opsz" 24,"SOFT" 40,"WONK" 1}
.topbar a,.topbar button{color:var(--ink-soft);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-size:.82rem;font-weight:600}
.topbar a:hover,.topbar button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.toast{margin-top:16px;padding:12px 16px;border-radius:12px;background:var(--good-soft);color:var(--good);font-size:.88rem;font-weight:600}
.toast.warn{background:var(--warn-soft);color:var(--warn)}

/* ---------- landing (full-bleed sections) ---------- */
.bleed{margin-inline:calc(50% - 50vw);padding-inline:max(20px,calc(50vw - 34rem))}
.landing-top{margin-inline:calc(50% - 50vw);padding-inline:max(20px,calc(50vw - 34rem));background:var(--navy-deep)}
.landing-top .topbar{padding-top:20px;color:var(--navy-ink-soft)}
.landing-top .topbar .brand{color:var(--navy-ink)}
.landing-top .topbar a,.landing-top .topbar button{color:var(--navy-ink-soft)}
.landing-top .topbar a:hover,.landing-top .topbar button:hover{color:var(--navy-ink)}
.landing-top .toast{background:rgba(175,255,181,.12);color:var(--mint)}

.hero{
  position:relative;overflow:hidden;margin-inline:calc(50% - 50vw);padding-inline:max(20px,calc(50vw - 34rem));
  padding-block:clamp(36px,7vw,84px) clamp(48px,8vw,96px);
  color:var(--navy-ink);
  background:
    radial-gradient(55% 60% at 78% 32%,rgba(175,255,181,.18),transparent 62%),
    radial-gradient(40% 40% at 10% 90%,rgba(175,255,181,.07),transparent 60%),
    linear-gradient(165deg,#1E2158 0%,#1A1D4A 45%,#12142F 100%);
}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;border:1px solid var(--mint);pointer-events:none}
.hero::before{width:120vw;height:120vw;right:-40vw;top:18%;opacity:.14}
.hero::after{width:88vw;height:88vw;right:-30vw;top:34%;opacity:.1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;position:relative;max-width:68rem}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}}
.hero .kicker{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.4rem);line-height:1;margin-top:16px;color:var(--navy-ink);max-width:12ch}
.hero h1 em{font-style:italic;color:var(--mint);font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1}
.hero .lede{margin-top:20px;font-size:clamp(1.02rem,2vw,1.2rem);line-height:1.5;color:var(--navy-ink-soft);max-width:32rem}
.proof{display:flex;align-items:baseline;gap:12px;margin-top:20px;padding:14px 16px;border:1px solid rgba(175,255,181,.35);border-radius:14px;max-width:30rem}
.proof-num{font-family:Fraunces,Georgia,serif;font-size:2.4rem;line-height:1;color:var(--mint);font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1}
.proof-lab{font-size:.84rem;color:var(--navy-ink-soft);line-height:1.35}
.hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;max-width:34rem}
@media (max-width:480px){.hero-cta{grid-template-columns:1fr}}
.btn.big{
  padding:20px 22px 20px 24px;font-size:1.35rem;font-weight:800;text-align:left;border-radius:18px;
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:14px;min-height:88px;
  background:var(--mint);color:var(--mint-ink);border:2px solid #d6ffd9;
  box-shadow:0 0 0 5px rgba(175,255,181,.22),0 18px 40px -12px rgba(175,255,181,.85);
  transition:transform .12s,box-shadow .12s;position:relative;
}
.btn.big span{grid-column:1;display:block;font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-top:3px}
.btn.big::after{content:"→";grid-column:2;grid-row:1/3;width:46px;height:46px;border-radius:50%;background:var(--navy-deep);color:var(--mint);display:grid;place-items:center;font-size:1.4rem;font-weight:400;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.btn.big:hover{transform:translateY(-3px);box-shadow:0 0 0 7px rgba(175,255,181,.28),0 24px 44px -12px rgba(175,255,181,.95)}
.btn.big:active{transform:translateY(0)}
.cta-label{margin-top:30px;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.hero-meta{font-size:.84rem;color:var(--navy-ink-soft);margin-top:14px}

/* the product mockup */
.hero-visual{position:relative;display:flex;justify-content:center}
@media (max-width:820px){.hero-visual{margin-top:8px}}
.mock{
  width:min(100%,25rem);background:var(--surface);color:#1A1D4A;border-radius:20px;padding:20px 20px 16px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06),0 0 80px -20px rgba(175,255,181,.35);
  transform:rotate(-2.5deg) translateY(6px);
}
@media (max-width:820px){.mock{transform:none}}
.mock-top{display:flex;justify-content:space-between;align-items:center;font-family:Fraunces,Georgia,serif;font-size:1.05rem;font-variation-settings:"opsz" 24,"SOFT" 40,"WONK" 1}
.mock-pill{font-family:Manrope,sans-serif;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#F1EEE5;color:#4A4E7A;padding:4px 9px;border-radius:99px}
.mock-score{margin-top:14px;padding:16px;border-radius:14px;background:#1A1D4A;color:#F4F2EA}
.mock-lab{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#AFFFB5}
.mock-big{font-family:Fraunces,Georgia,serif;font-size:2.1rem;line-height:1;margin-top:6px;font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1;font-variant-numeric:tabular-nums}
.mock-row{padding:11px 0 0}
.mock-row-top{display:flex;align-items:baseline;gap:8px;font-size:.84rem;margin-bottom:6px}
.mock-row-top b{flex:1;font-weight:700}
.mock-row-top i{font-style:normal;font-size:.68rem;font-weight:800;background:#E3F5E6;color:#2F7A46;padding:2px 7px;border-radius:99px}
.mock-row-top span{font-weight:800;color:#4A4E7A;font-variant-numeric:tabular-nums}
.mock-bar{height:9px;background:#F1EEE5;border-radius:5px;position:relative;overflow:visible}
.mock-fill{height:100%;background:#2A2D60;border-radius:5px;width:var(--w);animation:grow 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:.25s}
@keyframes grow{from{width:0}}
.mock-ghost{position:absolute;top:-3px;bottom:-3px;border-left:2px dashed #8A8DA6}
.mock-foot{margin-top:12px;font-size:.7rem;color:#8A8DA6}

/* built by */
.built{
  margin-inline:calc(50% - 50vw);padding-inline:max(20px,calc(50vw - 34rem));padding-block:clamp(34px,6vw,64px);
  background:var(--ground);border-bottom:1px solid var(--rule);
}
.built{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:center;max-width:none}
@media (max-width:640px){.built{grid-template-columns:1fr}}
.built-photo{position:relative;width:clamp(200px,26vw,320px);height:clamp(200px,26vw,320px);flex:none;margin:12px 18px 12px 6px}
.built-photo img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;box-shadow:0 20px 40px -20px rgba(26,29,74,.45)}
.built-photo .blob{position:absolute;inset:-6% auto auto -10%;width:92%;height:92%;border-radius:50% 50% 50% 12%;background:var(--mint);transform:rotate(-8deg)}
.built-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep)}
.built-quote{margin-top:10px;font-family:Fraunces,Georgia,serif;font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.3;max-width:34rem;font-variation-settings:"opsz" 48,"SOFT" 60,"WONK" 1;letter-spacing:-.005em}
.built-facts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;font-size:.9rem;color:var(--ink-soft)}
.built-facts li{display:flex;align-items:baseline;gap:10px}
.built-facts li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--mint-deep);position:relative;top:-1px}

/* how it works */
.how{margin-inline:calc(50% - 50vw);padding-inline:max(20px,calc(50vw - 34rem));padding-block:clamp(36px,6vw,72px);background:var(--surface)}
.how h2{font-size:clamp(1.8rem,4vw,2.4rem)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media (max-width:720px){.steps{grid-template-columns:1fr}}
.stp{padding:22px 22px 24px;border:1.5px solid var(--rule);border-radius:18px;background:var(--ground)}
.stp-n{width:40px;height:40px;border-radius:50%;background:var(--navy-deep);color:var(--mint);display:grid;place-items:center;font-family:Fraunces,Georgia,serif;font-size:1.3rem;font-variation-settings:"opsz" 48,"SOFT" 40,"WONK" 1}
.stp h3{margin-top:14px;font-size:1.3rem;font-variation-settings:"opsz" 36,"SOFT" 50,"WONK" 1}
.stp p{margin-top:8px;font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.strip-label{margin-top:34px;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-ink-soft);position:relative}
.strip-label.dark{color:var(--ink-faint);margin-top:38px}
.strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;max-width:52rem;position:relative}
.strip span{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;font-weight:700;letter-spacing:.01em;padding:9px 16px 9px 9px;border:1px solid rgba(244,242,234,.24);border-radius:99px;color:var(--navy-ink)}
.strip span b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(244,242,234,.14);color:var(--navy-ink);font-family:Fraunces,Georgia,serif;font-weight:600;font-size:.95rem;font-variation-settings:"opsz" 24,"SOFT" 40,"WONK" 0}
.strip.light span{border-color:var(--rule-strong);color:var(--ink);background:var(--ground)}
.strip.light span b{background:var(--navy-deep);color:var(--mint)}

/* ---------- generic step ---------- */
.step{padding-block:34px 72px}
.step-head{margin-bottom:24px}
.step-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:10px}
.step-head h2{font-size:clamp(1.7rem,5vw,2.3rem);line-height:1.12}
.step-head .instruction{margin-top:10px;color:var(--ink-soft);max-width:34rem}

.field{margin-bottom:20px}
.field label{display:block;font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;padding:14px 16px;font:inherit;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--rule-strong);border-radius:12px;
}
.field textarea{resize:vertical;min-height:54px}
.field input:focus,.field textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.field .hint{margin-top:7px;font-size:.82rem;color:var(--ink-faint)}

.consent{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;background:var(--surface);border:1.5px solid var(--rule);border-radius:14px;margin-block:6px 24px;cursor:pointer}
.consent input{margin-top:3px;width:20px;height:20px;accent-color:var(--navy);flex:none}
.consent span{font-size:.88rem;color:var(--ink-soft);line-height:1.5}

.notice{padding:16px 18px;border-radius:14px;background:var(--surface);border:1.5px solid var(--rule-strong);font-size:.9rem;color:var(--ink-soft);margin-bottom:22px}
.notice strong{color:var(--ink)}
.notice a{color:var(--mint-deep);font-weight:700}

/* ---------- progress ---------- */
.rail{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--ground);border-bottom:1px solid var(--rule)}
.rail-inner{max-width:var(--maxw);margin:0 auto;padding:14px 20px 12px}
.rail-top{display:flex;align-items:baseline;gap:12px;margin-bottom:9px}
.rail-label{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-eta{font-size:.78rem;color:var(--ink-faint);white-space:nowrap}
.segs{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.seg{height:6px;background:var(--rule);border-radius:3px;overflow:hidden}
.seg i{display:block;height:100%;width:0;background:var(--navy);border-radius:3px;transition:width .3s cubic-bezier(.4,0,.2,1)}
.seg.done i{width:100%;background:var(--mint-deep)}
.segs.plain{grid-template-columns:1fr}

/* ---------- one question ---------- */
.step.one{padding-block:36px 72px;min-height:58vh}
.area-banner{
  display:flex;align-items:center;gap:14px;margin-bottom:26px;padding:14px 16px;border-radius:14px;
  background:var(--navy-deep);color:var(--navy-ink);
}
.area-banner .num{font-family:Fraunces,Georgia,serif;font-size:1.9rem;line-height:1;color:var(--mint);font-variation-settings:"opsz" 72,"SOFT" 40,"WONK" 1;min-width:2.2rem;text-align:center}
.area-banner .t{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.area-banner .n{font-family:Fraunces,Georgia,serif;font-size:1.25rem;line-height:1.15;margin-top:2px}
.area-banner .i{font-size:.84rem;color:var(--navy-ink-soft);margin-top:4px}
.qnum{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.qh{font-size:clamp(1.5rem,4.4vw,2.05rem);line-height:1.25;max-width:36rem;font-variation-settings:"opsz" 30,"SOFT" 70,"WONK" 0;letter-spacing:0;font-weight:500}

.answers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:34px}
@media (max-width:600px){.answers{grid-template-columns:1fr;gap:9px}}
.ans{
  appearance:none;border:1.5px solid var(--rule-strong);background:var(--surface);border-radius:16px;
  padding:20px 8px 16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:background .12s,border-color .12s,transform .12s,box-shadow .12s;
}
@media (max-width:600px){.ans{flex-direction:row;justify-content:flex-start;gap:16px;padding:15px 18px}}
.ans:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow)}
.ans:active{transform:translateY(0) scale(.98)}
.ans:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ans[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--mint-ink);transform:translateY(-2px)}
.ans-n{font-family:Fraunces,Georgia,serif;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 72,"SOFT" 40,"WONK" 1}
@media (max-width:600px){.ans-n{width:2.2rem;text-align:center;font-size:1.7rem}}
.ans-l{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.ans[aria-pressed="true"] .ans-l{color:var(--mint-ink)}
.keyhint{margin-top:16px;font-size:.8rem;color:var(--ink-faint)}
@media (hover:none){.keyhint{display:none}}

/* ---------- 0–10 ---------- */
.tenscale{display:grid;grid-template-columns:repeat(11,1fr);gap:6px;margin-top:12px}
@media (max-width:520px){.tenscale{grid-template-columns:repeat(6,1fr)}}
.tenscale button{appearance:none;border:1.5px solid var(--rule-strong);background:var(--surface);border-radius:10px;padding:12px 0;cursor:pointer;font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;transition:background .12s,border-color .12s}
.tenscale button:hover{border-color:var(--navy)}
.tenscale button[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.tenscale button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tenends{display:flex;justify-content:space-between;margin-top:8px;font-size:.76rem;color:var(--ink-faint)}

/* ---------- nav ---------- */
.nav{display:flex;gap:10px;align-items:center;margin-top:32px}
.btn{appearance:none;border:1.5px solid transparent;border-radius:12px;padding:14px 26px;font-weight:800;font-size:.95rem;cursor:pointer;transition:opacity .15s,transform .15s,background .15s}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-primary{background:var(--navy);color:var(--navy-ink)}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn-mint{background:var(--mint);color:var(--mint-ink)}
.btn-mint:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--rule-strong);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--navy);color:var(--ink)}
.nav .spacer{flex:1}
.nav-note{font-size:.8rem;color:var(--ink-faint)}
.err{margin-top:10px;font-size:.85rem;color:var(--warn);font-weight:700;min-height:1.2em}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- sign in / code ---------- */
.code{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.code input{width:11.5rem;padding:13px 14px;font:inherit;font-size:1.4rem;letter-spacing:.3em;text-align:center;color:var(--ink);background:var(--surface);border:1.5px solid var(--rule-strong);border-radius:12px;font-variant-numeric:tabular-nums}
.code input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}

/* ---------- records ---------- */
.rec{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--rule)}
.rec-main{flex:1;min-width:0}
.rec-name{font-family:Fraunces,Georgia,serif;font-size:1.35rem;font-variation-settings:"opsz" 48,"SOFT" 40,"WONK" 1}
.rec-meta{font-size:.82rem;color:var(--ink-faint);margin-top:2px}
.takes{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.takes button{appearance:none;border:1.5px solid var(--rule-strong);background:var(--surface);border-radius:9px;padding:7px 12px;font-size:.8rem;font-weight:800;cursor:pointer;font-variant-numeric:tabular-nums}
.takes button:hover{border-color:var(--navy)}
.takes button.next{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}

/* ---------- results ---------- */
.res-head{padding-block:36px 6px}
.res-head .eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.res-head h1{font-size:clamp(2rem,6.5vw,2.9rem);line-height:1.08}
.res-sub{margin-top:10px;color:var(--ink-soft)}

.score{
  margin-block:26px;padding:clamp(22px,4vw,32px);border-radius:22px;background:var(--navy-deep);color:var(--navy-ink);
  display:grid;grid-template-columns:auto 1fr;gap:10px 28px;align-items:end;position:relative;overflow:hidden;
}
@media (max-width:560px){.score{grid-template-columns:1fr}}
.score::after{content:"";position:absolute;right:-30%;top:-70%;width:62%;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--mint);opacity:.28;pointer-events:none}
.score .lab{grid-column:1/-1;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.score .big{font-family:Fraunces,Georgia,serif;font-size:clamp(3.4rem,13vw,5.6rem);line-height:.9;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1;color:var(--navy-ink)}
.score .big small{font-size:.32em;color:var(--navy-ink-soft);font-family:Manrope,sans-serif;font-weight:700;letter-spacing:.02em;margin-left:8px;font-variation-settings:normal}
.score .note{font-size:.92rem;color:var(--navy-ink-soft);line-height:1.5;max-width:26rem;position:relative}
.score .since{grid-column:1/-1;margin-top:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;position:relative}
.score .since-lab{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);flex-basis:100%}
.score .since-big{font-family:Fraunces,Georgia,serif;font-size:clamp(2rem,7vw,2.8rem);line-height:1;font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1;color:var(--navy-ink)}
.score .since-big small{font-size:.4em;color:var(--navy-ink-soft);font-family:Manrope,sans-serif;font-weight:700;margin-left:6px;font-variation-settings:normal}
.score .since-note{font-size:.9rem;color:var(--navy-ink-soft)}
table.cmp2 th,table.cmp2 td{font-size:.86rem}

.sec-label{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-block:38px 14px;padding-bottom:10px;border-bottom:1.5px solid var(--rule-strong)}

.dom{padding-block:15px;border-bottom:1px solid var(--rule)}
.dom.focus .dom-name::after{content:"Focus area";margin-left:10px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mint-ink);background:var(--mint);padding:3px 8px;border-radius:99px;vertical-align:2px}
.dom-top{display:flex;align-items:baseline;gap:12px;margin-bottom:9px}
.dom-name{font-weight:700;font-size:.98rem;flex:1}
.dom-score{font-variant-numeric:tabular-nums;font-weight:800;font-size:.9rem;color:var(--ink-soft);white-space:nowrap}
.bar{height:12px;background:var(--sunk);border-radius:6px;overflow:hidden;position:relative}
.bar-fill{height:100%;background:var(--navy);border-radius:6px 0 0 6px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.bar-ghost{position:absolute;top:-2px;bottom:-2px;border-left:2px dashed var(--ink-faint);opacity:.8}

.chip{display:inline-block;padding:3px 9px;border-radius:99px;font-size:.73rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip-good{background:var(--good-soft);color:var(--good)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-flat{background:var(--flat-soft);color:var(--flat)}

.goals{margin-top:14px;padding:20px 22px;background:var(--surface);border:1.5px solid var(--rule);border-radius:16px}
.goals ol{margin:0;padding-left:20px}
.goals li{margin-bottom:6px;color:var(--ink-soft);font-family:Fraunces,Georgia,serif;font-size:1.08rem;font-variation-settings:"opsz" 24,"SOFT" 40,"WONK" 1}

.tablewrap{overflow-x:auto;margin-top:14px}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:30rem}
th,td{text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--rule)}
th{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
th:last-child,td:last-child{padding-right:0}

.disclaimer{margin-block:40px 60px;padding-top:22px;border-top:1px solid var(--rule);font-size:.8rem;color:var(--ink-faint);line-height:1.65}
.disclaimer em{display:block;margin-bottom:10px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:520px){.hero-cta{grid-template-columns:1fr}}
.ans:disabled{cursor:default}
.area-banner.half{background:var(--mint);color:var(--mint-ink)}
.area-banner.half .num,.area-banner.half .t{color:var(--mint-ink)}
.area-banner.half .i{color:var(--mint-ink);opacity:.8}

/* landing: trust + fineprint band */
.choose{margin-inline:calc(50% - 50vw);padding-inline:max(20px,calc(50vw - 34rem));padding-block:40px 56px;background:var(--ground);border-top:1px solid var(--rule)}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:720px){.trust{grid-template-columns:1fr 1fr}}
.trust-item b{display:block;font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.1rem;color:var(--ink);font-variation-settings:"opsz" 24,"SOFT" 40,"WONK" 0}
.trust-item span{display:block;font-size:.8rem;line-height:1.45;color:var(--ink-faint);margin-top:4px}
.choose .fineprint{max-width:52rem}
.hero{padding-block:clamp(36px,6vw,72px) clamp(40px,6vw,72px)}
.fineprint{margin-top:30px;padding-top:18px;border-top:1px solid var(--rule);font-size:.8rem;color:var(--ink-faint);line-height:1.6}
.fineprint a{color:var(--ink-soft)}

/* nine area tiles */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media (max-width:760px){.areas{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.areas{grid-template-columns:1fr}}
.area{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--rule);border-radius:16px;background:var(--ground);transition:transform .12s,border-color .12s,box-shadow .12s}
.area:hover{transform:translateY(-2px);border-color:var(--navy);box-shadow:var(--shadow)}
.area-ic{width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#2A2D60 0%,#1A1D4A 100%);color:var(--mint);display:grid;place-items:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 14px -6px rgba(26,29,74,.55);position:relative}
.area-ic::after{content:"";position:absolute;inset:3px;border-radius:inherit;border:1px solid rgba(175,255,181,.14);pointer-events:none}
.area:hover .area-ic{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 18px -8px rgba(26,29,74,.6)}
.area-ic{transition:transform .18s ease,box-shadow .18s ease}
.area-n{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.area-name{font-weight:700;font-size:1rem;line-height:1.25;margin-top:1px}

/* area tiles: clickable, with detail panel */
.areas-hint{margin-top:8px;font-size:.88rem;color:var(--ink-soft)}
.area{appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer;position:relative;padding-right:44px}
.area-ic{width:54px;height:54px;border-radius:16px}
.area-ic.big{width:64px;height:64px;border-radius:18px}
.area-ic svg{width:28px;height:28px}
.area-ic.big svg{width:34px;height:34px}
.area-plus{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:1.5px solid var(--rule-strong);display:grid;place-items:center;font-size:1.1rem;color:var(--ink-soft);transition:transform .15s,background .15s}
.area[aria-expanded="true"]{border-color:var(--navy);background:var(--surface)}
.area[aria-expanded="true"] .area-plus{transform:translateY(-50%) rotate(45deg);background:var(--navy);color:var(--mint);border-color:var(--navy)}
.area:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.area-detail{margin-top:14px;padding:26px;border-radius:18px;background:var(--surface);border:2px solid var(--navy);color:var(--ink);animation:fadein .2s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ad-head{display:flex;align-items:center;gap:16px}
.ad-head .area-ic{background:var(--navy-deep);color:var(--mint)}
.ad-head .area-n{color:var(--ink-faint)}
.ad-head h3{font-size:1.5rem;margin-top:2px;color:var(--ink);font-variation-settings:"opsz" 48,"SOFT" 50,"WONK" 1}
.ad-close{margin-left:auto;appearance:none;background:none;border:1.5px solid var(--rule-strong);color:var(--ink-soft);width:36px;height:36px;border-radius:50%;font-size:1.3rem;cursor:pointer;flex:none}
.ad-close:hover{border-color:var(--navy);color:var(--ink)}
.ad-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:20px}
@media (max-width:700px){.ad-cols{grid-template-columns:1fr}}
.ad-lab{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:6px}
.ad-cols p{font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
.ad-sample{margin-top:20px;padding:16px 18px;border-radius:12px;background:var(--ground);border:1.5px solid var(--rule);font-family:Fraunces,Georgia,serif;font-size:1.08rem;line-height:1.4;color:var(--ink);font-variation-settings:"opsz" 24,"SOFT" 60,"WONK" 0}
.ad-sample span{display:block;font-family:Manrope,sans-serif;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.fineprint.credit{margin-top:14px;padding-top:0;border-top:0}
.topbar .home{font-family:Fraunces,Georgia,serif;font-size:1.05rem;color:var(--ink);text-decoration:none;font-variation-settings:"opsz" 24,"SOFT" 40,"WONK" 1;font-weight:500}
.topbar .brand{flex:1;text-align:center;font-size:.95rem;color:var(--ink-faint)}
.landing-top .topbar .home{color:var(--navy-ink)}
.landing-top .topbar .brand{color:var(--navy-ink-soft)}