/* ═══════════════════════════════════════════════════════════════════════════
   BRAND TOKENS — EDIT ONLY THIS BLOCK TO RE-SKIN THE WHOLE SITE
   Every color and font on every page comes from here. Keep the contrast notes true:
   text on --paper must stay at 4.5:1 or better (this audience is 60+), and white text
   on --accent-900 (buttons) must stay at 4.5:1 or better.
   Also change the Google Fonts <link> in each page <head> if the font families change.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* dark panels (the "once it's sorted" card, cost bar, dots) */
  --brand-900:#0e3a42;
  --brand-800:#14505a;
  --brand-700:#1a5f6b;
  --brand-600:#1f6f7a;          /* ticks, hover borders, "room to improve" */
  /* accent: warm terracotta. --accent is decorative only (rules, dots, left borders).
     Never use --accent for text. --accent-700 is text-safe, --accent-900 is the button. */
  --accent:#d9774a;
  --accent-700:#9a3d17;         /* 6.3:1 on --paper */
  --accent-900:#8c3512;         /* white on this = 7.4:1 */
  --accent-900-dark:#6f2a0d;    /* button gradient bottom */
  --accent-900-light:#a4421a;   /* button gradient top */
  /* surfaces */
  --paper:#f7fafa;
  --cream:#e9f1f1;
  --white:#ffffff;
  --on-dark:#eaf3f3;            /* body text on --brand-900 */
  /* text */
  --ink:#12262b;
  --ink-2:rgba(18,38,43,.76);   /* 6.6:1 on --paper */
  --ink-3:rgba(18,38,43,.62);   /* 4.6:1 on --paper; never go lighter */
  --line:rgba(18,38,43,.16);
  /* status chips */
  --ok:#256a43;
  --bad:#9d2a2a;
  /* rgb triplets, for translucent uses of the colors above */
  --paper-rgb:247,250,250;
  --accent-rgb:140,53,18;
  --bad-rgb:157,42,42;
  /* fonts */
  --sans:"Atkinson Hyperlegible",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  /* type scale (large on purpose) */
  --fs-body:19px;
  --fs-fine:15px;
  --fs-btn:20px;
}
/* ═══════════════════════════ END BRAND TOKENS ═══════════════════════════ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:660px;margin:0 auto;padding-inline:20px}
a{color:var(--accent-700)}

/* preview banner */
.previewbar{position:sticky;top:0;z-index:50;background:#fff4c2;color:#4a3b00;border-bottom:1px solid #d8c36a;
  text-align:center;font:700 14px/1.3 var(--sans);padding:6px 12px}

h1{font:600 clamp(33px,7.6vw,48px)/1.12 var(--serif);letter-spacing:-.01em;margin:0;text-wrap:balance}
h1 em{font-style:italic;color:var(--accent-700)}
h2{font:600 clamp(25px,5.2vw,32px)/1.2 var(--serif);letter-spacing:-.005em;margin:0;text-wrap:balance}
h3{font:700 19px/1.35 var(--sans);margin:0}
p{margin:0}
.lede{color:var(--ink-2);font-size:19.5px}
.fine{font-size:var(--fs-fine);line-height:1.55;color:var(--ink-2)}
.rule{width:64px;height:3px;background:var(--accent);border-radius:2px;margin:18px 0}
.eyebrow{font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-700)}

.btn{display:block;width:100%;border:0;border-radius:13px;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,var(--accent-900-light) 0%,var(--accent-900) 60%,var(--accent-900-dark) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 6px 18px -6px rgba(var(--accent-rgb),.65);
  font:700 var(--fs-btn)/1.2 var(--sans);padding:21px 22px;
  text-align:center;text-decoration:none;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease}
.btn::after{content:" \2192";display:inline-block;transition:transform .14s ease}
.btn:hover{filter:brightness(1.07)}
.btn:hover::after{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.btn,.btn::after{transition:none}}
.btn:focus-visible{outline:3px solid var(--brand-600);outline-offset:3px}
.btn[disabled]{opacity:.5;cursor:default}

section.block{padding-block:40px;border-top:1px solid var(--line)}
section.block:first-of-type{border-top:0}
#hero{padding-block:34px 26px}

/* brand bar + text wordmark (no logo file) */
.brandbar{display:flex;align-items:center;justify-content:space-between;padding-block:20px;gap:12px}
.wordmark{font:600 21px/1.15 var(--serif);color:var(--brand-900);text-decoration:none;letter-spacing:-.005em}
.wordmark b{font-weight:600;font-style:italic;color:var(--accent-700)}
.vidnote{margin-top:2px;font-size:16px;color:var(--ink-2);text-align:center}

/* what actually changes */
.now{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:22px}
.then{background:var(--brand-900);color:var(--on-dark);border-radius:13px;padding:22px}
.arrow{text-align:center;font-size:26px;color:var(--accent);padding-block:12px}
.lines{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.lines li{display:flex;gap:11px;font-size:18px;line-height:1.5}
.lines li::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;margin-top:10px;background:var(--ink-3)}
.then .lines li{color:var(--on-dark)}
.then .lines li::before{content:"\2713";background:none;font-size:16px;color:#f0b48f;margin-top:0;flex-basis:auto}
.then h3{color:#fff}

.getbox{background:var(--cream);border:1px solid var(--line);border-radius:13px;padding:20px;margin-block:18px}
.getbox .lines li::before{content:"\2713";background:none;color:var(--accent-700);font-size:16px;margin-top:0;flex-basis:auto}
.underbtn{margin-top:11px;text-align:center;font-size:16px;color:var(--ink-2)}

/* made-up example cards (built in HTML, not images, so they follow the tokens) */
.example{margin:26px 0 0;padding:0}
.example figcaption{margin-top:9px;font-size:var(--fs-fine);color:var(--ink-2);text-align:center}
.xcard{background:var(--brand-900);color:var(--on-dark);border-radius:14px;padding:22px}
.xcard .tag{font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#f0b48f}
.xcard h4{font:600 24px/1.2 var(--serif);margin:10px 0 14px;color:#fff}
.xcard .big{font:600 38px/1 var(--serif);color:#fff;margin:6px 0 4px}
.xcard .big.bad{color:#ffc9b0}
.xcard p{font-size:17px;color:var(--on-dark)}
.xpair{display:grid;gap:12px}
@media (min-width:560px){.xpair{grid-template-columns:1fr 1fr}}
.xbox{background:rgba(255,255,255,.08);border-radius:11px;padding:15px 16px}
.xrows{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.xrows li{background:var(--white);color:var(--ink);border-radius:11px;padding:14px 16px;display:flex;justify-content:space-between;gap:14px;align-items:baseline;font-size:17px}
.xrows li b{font:600 24px/1 var(--serif);color:var(--bad);white-space:nowrap}
.xrows li small{display:block;font-size:15px;color:var(--ink-2);margin-top:3px}

.card{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:22px;display:flex;flex-direction:column;gap:13px}

footer{padding-block:30px 44px;border-top:1px solid var(--line);margin-top:10px}
footer .legal a{color:var(--ink-2)}

.stack{display:grid;gap:12px;margin-top:16px}
.promise{margin-top:16px;padding-left:16px;border-left:3px solid var(--accent);font:600 20px/1.45 var(--serif);color:var(--ink)}

/* sticky start bar. It must never be off screen once the hero is scrolled past. */
#stick{position:fixed;left:0;right:0;bottom:0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:rgba(var(--paper-rgb),.95);backdrop-filter:blur(8px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .22s ease-out;z-index:20}
#stick.up{transform:none}
@media (prefers-reduced-motion:reduce){#stick{transition:none}}
body.quizzing #stick{display:none}

/* quiz */
.screen{display:none}
.screen.on{display:block;animation:in .22s ease-out}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen.on{animation:none}}
#quiz,#result{display:none}
#quiz.on,#result.on{display:block}
.dots{display:flex;gap:8px;justify-content:center;padding-block:18px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dot.done{background:var(--accent)}
/* never share a class name with section 3's .now card: a dot once inherited its padding */
.dot.here{background:var(--brand-800);transform:scale(1.25)}
.qh{font:600 clamp(26px,5.6vw,33px)/1.22 var(--serif);margin:6px 0 4px;text-wrap:balance}
.qsub{color:var(--ink-2);font-size:17px;margin-bottom:18px}
.opts{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.foot{margin-top:22px;font-size:var(--fs-fine);color:var(--ink-2);text-align:center}
.opt{width:100%;text-align:left;background:var(--white);border:1.5px solid var(--line);border-radius:12px;
  padding:19px 20px;font:400 19px/1.4 var(--sans);color:var(--ink);cursor:pointer}
.opt:hover{border-color:var(--brand-600)}
.opt:focus-visible{outline:3px solid var(--brand-600);outline-offset:2px}
.opt.tick{border-color:var(--brand-600);background:var(--white)}
.opt .box{display:inline-block;width:22px;height:22px;border:2px solid var(--ink-3);
  border-radius:5px;margin-right:12px;vertical-align:-5px;text-align:center;
  font-size:15px;line-height:19px;color:#fff}
.opt.tick .box{background:var(--brand-600);border-color:var(--brand-600)}
.opts .opt.sel{border-color:var(--brand-700);box-shadow:inset 0 0 0 1px var(--brand-700)}
.opts .opt.sel::after{content:'\2713';float:right;color:var(--brand-700);font-weight:700}
.back{background:none;border:0;color:var(--ink-2);font:400 17px var(--sans);cursor:pointer;padding:16px 0}
input[type=text],input[type=email],input[type=tel]{width:100%;border:1.5px solid var(--ink-3);border-radius:11px;
  padding:17px 16px;font:400 19px var(--sans);background:var(--white);color:var(--ink);margin-bottom:11px}
input:focus{outline:3px solid var(--brand-600);outline-offset:1px}
.err{color:var(--bad);font-size:16px;min-height:22px}

/* consent */
.smsbox{margin-top:6px}
.smsdiscl{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-top:12px}
.smsdiscl a{color:var(--ink-2)}
.skipsms{display:block;width:100%;background:none;border:0;color:var(--ink-2);
  font:400 17px var(--sans);text-decoration:underline;cursor:pointer;padding:16px 0}

/* slot picker */
.slots{margin-top:26px;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:12px;padding:20px}
.slots h3{margin:0 0 4px;font:700 20px/1.3 var(--sans);color:var(--ink)}
.slots .sub{margin:0 0 15px;font-size:16px;color:var(--ink-2)}
.slotlist{display:flex;flex-direction:column;gap:10px}
.slot{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;
  background:var(--white);border:1.5px solid var(--line);border-radius:11px;padding:16px 16px;
  font:700 17px/1.2 var(--sans);color:var(--ink);cursor:pointer;text-align:left;
  transition:border-color .14s ease, box-shadow .14s ease, transform .1s ease}
.slot:hover{border-color:var(--accent-700);box-shadow:0 6px 18px -10px rgba(var(--accent-rgb),.5)}
.slot:active{transform:translateY(1px)}
.slot:focus-visible{outline:3px solid var(--brand-600);outline-offset:2px}
.slot .take{font-size:15px;font-weight:400;color:var(--accent-900);letter-spacing:.02em}
.slots .other{display:inline-block;margin-top:14px;font-size:16px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.booked{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:12px;padding:22px;margin-top:26px}
.booked h3{margin:0 0 8px;font:700 20px/1.3 var(--sans);color:var(--ok)}
.booked p{margin:0;font-size:17px;color:var(--ink-2)}
#toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:var(--ink);color:#fff;
  font:700 16px/1.3 var(--sans);padding:14px 20px;border-radius:12px;z-index:60;max-width:90vw;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}

/* results */
.band{display:inline-block;font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;padding:10px 15px;border:1.5px solid currentColor}
.band.solid{color:var(--ok)}.band.some{color:var(--accent-900)}.band.thin{color:var(--bad)}
.band.gap{color:var(--accent-900)}.band.none{color:var(--ok)}
.reading{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:12px;padding:20px;margin-top:18px;display:flex;flex-direction:column;gap:12px}
.reg{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.reg li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding-block:14px;border-bottom:1px solid var(--line);font-size:18px}
.reg li:first-child{border-top:1px solid var(--line)}
ol.reg{list-style:none}
.reg .mark{font:400 15px/1 var(--sans);color:var(--ink-2);white-space:nowrap}
.reg li.read{background:rgba(var(--accent-rgb),.06);margin-inline:-14px;padding-inline:14px;border-radius:9px;border-bottom-color:transparent}
.reg li.read span:first-child{font-weight:700}
.reg li.read .mark{color:#fff;border-radius:999px;padding:7px 13px;font:700 12.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.reg li.read.solid .mark{background:var(--ok)}
.reg li.read.some  .mark{background:var(--accent-900)}
.reg li.read.thin  .mark{background:var(--bad)}

/* 30-year chart (income page) */
.thirty{margin-top:26px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px}
.exr{display:grid;grid-template-columns:132px 1fr 76px;gap:10px;align-items:center;font-size:16px;padding:8px;border-radius:8px}
.exr .tr{height:14px;background:rgba(0,0,0,.07);border-radius:5px;overflow:hidden}
.exr i{display:block;height:100%;background:var(--brand-600)}
.exr b{text-align:right;font-variant-numeric:tabular-nums}
.exr.me{background:rgba(var(--bad-rgb),.07);outline:1px solid rgba(var(--bad-rgb),.3)}
.exr.me i{background:var(--bad)}

/* home page picker */
.pick{display:grid;gap:16px;margin-top:26px}
.pickcard{display:block;text-decoration:none;color:var(--ink);background:var(--white);border:1.5px solid var(--line);
  border-left:5px solid var(--accent);border-radius:14px;padding:24px 22px}
.pickcard:hover{border-color:var(--brand-600);border-left-color:var(--accent)}
.pickcard:focus-visible{outline:3px solid var(--brand-600);outline-offset:3px}
.pickcard h2{font-size:25px;margin-bottom:8px}
.pickcard p{color:var(--ink-2);font-size:18px}
.pickcard .go{display:inline-block;margin-top:14px;font:700 18px var(--sans);color:var(--accent-900)}

/* legal pages */
.legal-page h1{font-size:clamp(28px,6vw,38px)}
.legal-page h2{font-size:22px;margin-top:30px}
.legal-page p,.legal-page li{font-size:18px;margin-top:10px}
.draftflag{background:#fff4c2;border:1px solid #d8c36a;color:#4a3b00;border-radius:10px;padding:12px 14px;font-weight:700;font-size:16px;margin-top:18px}

/* ── bands, how-it-works, why, FAQ ───────────────────────── */
.bands{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.bandcard{display:block;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--white);
  border:1.5px solid var(--line);border-left:5px solid var(--brand-600);border-radius:13px;padding:16px 18px;cursor:pointer}
.bandcard:hover{border-color:var(--brand-600);border-left-color:var(--accent)}
.bandcard:focus-visible{outline:3px solid var(--brand-600);outline-offset:3px}
.bandcard b{display:block;font-size:20px}
.bandcard .amt{display:block;margin-top:2px;font-size:var(--fs-fine);color:var(--accent-900);font-weight:700}
.bandcard span.d{display:block;margin-top:6px;color:var(--ink-2);font-size:18px;line-height:1.45}
.steps{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:s}
.steps li{display:flex;gap:14px;align-items:flex-start;font-size:18px;line-height:1.5;counter-increment:s}
.steps li::before{content:counter(s);flex:0 0 34px;height:34px;border-radius:50%;background:var(--brand-800);color:#fff;
  font:700 18px/34px var(--sans);text-align:center}
.faq{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:0 18px}
.faq summary{cursor:pointer;font-weight:700;font-size:18px;line-height:1.4;padding:15px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--brand-700)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:3px solid var(--brand-600);outline-offset:2px;border-radius:6px}
.faq details p{margin:0 0 16px;color:var(--ink-2);font-size:18px;line-height:1.55}
.why{margin-top:16px;display:flex;flex-direction:column;gap:12px}