/* ============================================================================
   Saving Strat — app styles (2026). Shares the landing's token system:
   OKLCH + warm stone/oat neutrals + light-dark() dark mode, Hanken + Fraunces + mono.
   ========================================================================== */

@font-face{font-family:'Hanken';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/hanken.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/fraunces.woff2') format('woff2')}
@font-face{font-family:'MonoSS';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/mono.woff2') format('woff2')}

:root{
  color-scheme: light dark;
  --sans:'Hanken',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Fraunces','Hanken',Georgia,serif;
  --mono:'MonoSS',ui-monospace,SFMono-Regular,Menlo,monospace;

  --emerald:oklch(.56 .12 162); --emerald-deep:oklch(.36 .07 160); --emerald-bright:oklch(.67 .13 162);
  --sage:oklch(.74 .045 165); --gold:oklch(.80 .10 85); --gold-deep:oklch(.64 .10 80); --clay:oklch(.66 .12 55);

  --canvas:light-dark(oklch(.985 .009 95), oklch(.17 .018 162));
  --surface:light-dark(oklch(1 0 0), oklch(.215 .021 162));
  --surface-2:light-dark(oklch(.955 .013 92), oklch(.255 .021 162));
  --ink:light-dark(oklch(.28 .045 162), oklch(.95 .018 150));
  --muted:light-dark(oklch(.52 .025 158), oklch(.74 .02 150));
  --faint:light-dark(oklch(.66 .02 150), oklch(.6 .02 150));
  --line:light-dark(oklch(.9 .013 108), oklch(.32 .02 162));
  --brand:light-dark(var(--emerald), var(--emerald-bright));
  --brand-ink:light-dark(var(--emerald-deep), var(--emerald-bright));
  --on-brand:light-dark(oklch(.99 0 0), oklch(.16 .02 160));
  --ring-track:light-dark(oklch(.9 .02 150), oklch(.3 .02 162));
  --forest:oklch(.24 .035 162); --forest-2:oklch(.18 .025 162);
  --good:var(--brand); --warn:var(--gold-deep); --bad:light-dark(oklch(.55 .15 28), oklch(.66 .15 28));
  --bad-bg:light-dark(oklch(.96 .03 28), oklch(.28 .05 28));

  --ease:cubic-bezier(.2,0,0,1); --ease-enter:cubic-bezier(.05,.7,.1,1);
  --dur-fast:160ms; --dur:240ms; --dur-slow:320ms; --dur-page:420ms;

  --r:14px; --r-md:18px; --r-lg:24px; --r-xl:30px; --pill:999px;
  --sh-1:0 1px 2px oklch(.3 .03 160/.05),0 1px 3px oklch(.3 .03 160/.05);
  --sh-2:0 12px 28px -14px oklch(.3 .04 160/.20),0 4px 10px -6px oklch(.3 .04 160/.12);
  --sh-3:0 38px 64px -28px oklch(.28 .05 160/.30),0 14px 26px -16px oklch(.28 .05 160/.16);
  --sh-brand:0 16px 36px -16px oklch(.5 .12 162/.5);
  --maxw:1140px;
}
:root[data-theme="light"]{ color-scheme:light }
:root[data-theme="dark"]{ color-scheme:dark }

@view-transition{ navigation: auto }

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--canvas); line-height:1.6;
  letter-spacing:-.005em; -webkit-font-smoothing:antialiased; min-height:100vh; position:relative;
  transition:background .4s var(--ease), color .4s var(--ease) }
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(1100px 540px at 82% -8%, oklch(.56 .12 162/.09), transparent 60%),
             radial-gradient(760px 400px at 2% 1%, oklch(.80 .10 85/.06), transparent 55%) }
h1,h2,h3,h4{ margin:0 0 .4em; line-height:1.15; color:var(--ink); letter-spacing:-.018em }
.display,h1{ font-family:var(--display); font-weight:540 }
p{ margin:0 0 1rem; color:var(--muted) }
a{ color:var(--brand-ink); text-decoration:none }
strong{ color:var(--ink); font-weight:600 }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:600; letter-spacing:.02em;
  color:var(--brand-ink); background:color-mix(in oklch,var(--brand) 12%,transparent);
  border:1px solid color-mix(in oklch,var(--brand) 26%,transparent); padding:.42rem .9rem; border-radius:var(--pill) }
.lede{ font-size:1.1rem; line-height:1.6; color:var(--muted); text-wrap:pretty }
.muted-link{ background:none; border:0; color:var(--muted); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0 }
.muted-link:hover{ color:var(--ink) }
.ico{ width:1.25em; height:1.25em; flex:none; display:inline-block; vertical-align:-.18em }
.logo{ width:1.7rem; height:1.7rem; flex:none }
:where(a,button,input,select,[tabindex]):focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:8px }

/* ---------------------------------------------------------------- top bar */
.topbar{ display:flex; align-items:center; gap:1rem; padding:.7rem clamp(1rem,4vw,2rem);
  background:color-mix(in oklch,var(--canvas) 82%,transparent); -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30 }
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--ink); font-weight:600 }
.brand__name{ font-family:var(--display); font-weight:540; font-size:1.12rem; letter-spacing:-.01em }
.topbar__tag{ margin-left:auto; font-size:.8rem; color:var(--muted) }
.topbar__progress{ margin-left:auto; display:flex; align-items:center; gap:.7rem; min-width:0; flex:1; max-width:340px }
.topbar__pct{ font-size:.74rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums }
.topbar__score{ display:flex; align-items:baseline; gap:.12rem; background:color-mix(in oklch,var(--brand) 12%,transparent);
  border:1px solid color-mix(in oklch,var(--brand) 24%,transparent); padding:.26rem .7rem; border-radius:var(--pill) }
.topbar__score strong{ color:var(--brand-ink); font-size:1rem; font-family:var(--mono); font-variant-numeric:tabular-nums }
.topbar__score span{ color:var(--faint); font-size:.72rem }
.topbar__tools{ display:flex; align-items:center; gap:.5rem }
.pbar{ flex:1; height:7px; background:var(--ring-track); border-radius:var(--pill); overflow:hidden }
.pbar>span{ display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--gold)); border-radius:var(--pill); transition:width .6s var(--ease) }
.pbar--sm{ background:var(--ring-track) } .pbar--sm>span{ background:linear-gradient(90deg,var(--brand),var(--emerald-bright)) }
.themebtn{ width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer }
.themebtn:hover{ border-color:color-mix(in oklch,var(--brand) 45%,var(--line)) }
.themebtn .ico{ width:1.15rem; height:1.15rem }
.themebtn .moon{ display:none } :root[data-theme="dark"] .themebtn .sun{ display:none } :root[data-theme="dark"] .themebtn .moon{ display:block }

/* ---------------------------------------------------------------- layout */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:clamp(1.4rem,4vw,2.6rem) clamp(1rem,4vw,2rem) }
.sitefoot{ max-width:var(--maxw); margin:0 auto; padding:1.6rem clamp(1rem,4vw,2rem) 3rem; color:var(--faint); font-size:.78rem }
.sitefoot p{ margin:.25rem 0 }

/* ---------------------------------------------------------------- buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid transparent; border-radius:var(--pill);
  padding:.78rem 1.4rem; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; letter-spacing:-.01em;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space:nowrap }
.btn:active{ transform:translateY(1px) } .btn .ico{ width:1.1em; height:1.1em }
.btn--primary{ background:linear-gradient(180deg,var(--brand),var(--brand-ink)); color:var(--on-brand); box-shadow:var(--sh-brand) }
.btn--primary:hover{ transform:translateY(-1px); box-shadow:0 20px 44px -16px oklch(.5 .12 162/.6) }
.btn--gold{ background:linear-gradient(180deg, color-mix(in oklch,var(--gold) 80%,white), var(--gold)); color:oklch(.28 .04 80); box-shadow:0 12px 26px -14px oklch(.7 .1 85/.6) }
.btn--gold:hover{ transform:translateY(-1px) }
.btn--ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:var(--sh-1) }
.btn--ghost:hover{ border-color:color-mix(in oklch,var(--brand) 50%,var(--line)); color:var(--brand-ink) }
.btn--lg{ padding:.95rem 1.7rem; font-size:1.05rem }
.inline-form{ display:inline }

/* ---------------------------------------------------------------- welcome */
.hero{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(1.5rem,4vw,3.4rem); align-items:center }
.hero h1{ font-family:var(--display); font-weight:520; font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.05; text-wrap:balance }
.hero h1 em{ font-style:italic; color:var(--brand-ink) }
.hero__cta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:1.6rem 0 2rem }
.hero__note{ color:var(--faint); font-size:.86rem; display:inline-flex; align-items:center; gap:.35rem }
.valueprops{ list-style:none; padding:0; margin:0; display:grid; gap:1rem }
.valueprops li{ display:flex; gap:.85rem; align-items:flex-start }
.valueprops .vp__ico{ width:2.5rem; height:2.5rem; flex:none; display:grid; place-items:center; border-radius:12px;
  background:color-mix(in oklch,var(--brand) 12%,transparent); color:var(--brand-ink); border:1px solid color-mix(in oklch,var(--brand) 20%,transparent) }
.valueprops .vp__ico .ico{ width:1.3rem; height:1.3rem }
.valueprops div.vp__txt{ display:flex; flex-direction:column } .valueprops strong{ color:var(--ink) }
.valueprops em{ color:var(--brand-ink); font-style:normal; font-weight:600 }
.explainer{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.1rem; box-shadow:var(--sh-3) }
.explainer__video{ position:relative; aspect-ratio:16/10; border-radius:var(--r-md); display:grid; place-items:center;
  background:radial-gradient(120% 120% at 30% 10%, var(--forest), var(--forest-2)); color:#fff; overflow:hidden; margin-bottom:1rem }
.explainer__video::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 70% 90%, oklch(.5 .12 162/.4), transparent 70%) }
.explainer__vlabel{ position:absolute; bottom:.7rem; left:.85rem; font-size:.78rem; color:oklch(.85 .02 150); z-index:2 }
.playbtn{ position:relative; z-index:2; width:60px; height:60px; border-radius:50%; border:0; background:var(--canvas); color:var(--brand-ink);
  display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 26px oklch(.2 .03 160/.4); transition:transform .15s }
.playbtn .ico{ width:1.5rem; height:1.5rem; margin-left:2px } .playbtn:hover{ transform:scale(1.06) }
.explainer__steps{ margin:0; padding:0; list-style:none; display:grid; gap:.7rem; font-size:.93rem; color:var(--muted) }
.explainer__steps li{ position:relative; padding-left:1.15rem } .explainer__steps li::before{ content:""; position:absolute; left:0; top:.62rem; width:6px; height:6px; border-radius:50%; background:var(--brand) }
.explainer__steps strong{ color:var(--ink) }
.trustrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid var(--line) }
.trustrow div{ font-size:.9rem; color:var(--muted) } .trustrow strong{ display:block; color:var(--ink); font-family:var(--display); font-weight:540; font-size:1rem }

/* ---------------------------------------------------------------- chat / wizard */
.chat{ display:grid; grid-template-columns:1fr 310px; gap:clamp(1rem,3vw,2.2rem); align-items:start }
.coach{ display:flex; gap:.8rem; align-items:flex-start; background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line); border-radius:var(--r-md); padding:1rem 1.15rem; margin-bottom:1.1rem; box-shadow:var(--sh-1) }
.coach__avatar{ width:2.2rem; height:2.2rem; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:radial-gradient(120% 120% at 30% 20%,var(--emerald-bright),var(--emerald-deep)); box-shadow:var(--sh-brand) }
.coach__avatar .ico{ width:1.25rem; height:1.25rem } .coach p{ margin:0; color:var(--ink) }
.qcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--sh-2); view-transition-name:qcard }
.qcard__stage{ display:inline-flex; align-items:center; gap:.4rem; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:700;
  color:var(--brand-ink); background:color-mix(in oklch,var(--brand) 12%,transparent); border:1px solid color-mix(in oklch,var(--brand) 22%,transparent); padding:.28rem .6rem; border-radius:var(--pill); margin-bottom:.9rem }
.qlabel{ font-family:var(--display); font-weight:540; font-size:clamp(1.35rem,2.7vw,1.75rem); line-height:1.2; margin-bottom:.3rem; color:var(--ink); text-wrap:balance }
.qhelp{ color:var(--muted); font-size:.93rem; margin:.25rem 0 1rem }
.qerror{ color:var(--bad); font-weight:600; font-size:.9rem; background:var(--bad-bg); border:1px solid color-mix(in oklch,var(--bad) 30%,transparent); border-radius:var(--r-sm,10px); padding:.55rem .85rem }
.qform{ margin-top:1.2rem } .qform__actions{ display:flex; gap:.7rem; align-items:center; margin-top:1rem; flex-wrap:wrap }

.field{ margin-bottom:1rem } .field--inline{ display:flex; align-items:center; gap:.6rem }
.input{ width:100%; font:inherit; font-size:1.1rem; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink); transition:border-color .15s, box-shadow .15s }
.input::placeholder{ color:var(--faint) }
.input:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in oklch,var(--brand) 18%,transparent) }
.input.is-valid{ border-color:color-mix(in oklch,var(--brand) 55%,var(--line)) }
.input--num{ max-width:200px; font-family:var(--mono); font-variant-numeric:tabular-nums }
.suffix{ color:var(--muted) }
.field--money{ position:relative; display:flex; align-items:center; max-width:280px }
.field--money .affix{ position:absolute; left:1rem; font-size:1.1rem; color:var(--muted); font-weight:500 }
.field--money .input{ padding-left:2rem; font-family:var(--mono); font-variant-numeric:tabular-nums }
.field__check{ position:absolute; right:.9rem; color:var(--brand); opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s var(--ease-enter) }
.field--money,.field{ position:relative } .input.is-valid ~ .field__check{ opacity:1; transform:scale(1) }

.choices{ display:grid; gap:.65rem } .choices--bool{ grid-template-columns:1fr 1fr; max-width:360px }
.choice{ display:flex; align-items:center; gap:.85rem; width:100%; text-align:left; cursor:pointer; background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--r); padding:.9rem 1.05rem; font:inherit; font-size:1rem; color:var(--ink);
  transition:border-color .15s, background .15s, transform .1s, box-shadow .2s }
.choice:hover{ border-color:color-mix(in oklch,var(--brand) 45%,var(--line)); background:color-mix(in oklch,var(--brand) 6%,var(--surface)); transform:translateY(-1px); box-shadow:var(--sh-1) }
.choice:active,.choice.is-picked{ border-color:var(--brand); background:color-mix(in oklch,var(--brand) 12%,var(--surface)); transform:translateY(0) }
.choice__icon{ font-size:1.25rem; width:1.9rem; height:1.9rem; display:grid; place-items:center; border-radius:9px; background:var(--surface-2); flex:none }
.choice__label{ font-weight:500 } .choices--bool .choice{ justify-content:center }

.chips{ display:flex; flex-wrap:wrap; gap:.55rem }
.chip{ display:inline-flex; align-items:center; gap:.5rem; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--pill);
  padding:.6rem 1rem; cursor:pointer; user-select:none; transition:border-color .15s, background .15s, color .15s, box-shadow .2s; font-weight:500; color:var(--ink) }
.chip input{ position:absolute; opacity:0; width:0; height:0 }
.chip:hover{ border-color:color-mix(in oklch,var(--brand) 45%,var(--line)); box-shadow:var(--sh-1) }
.chip:has(input:checked){ border-color:var(--brand); background:var(--brand); color:var(--on-brand) }

.consent{ display:flex; gap:.7rem; align-items:flex-start; cursor:pointer; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:.85rem 1.05rem; margin-bottom:1rem }
.consent input{ margin-top:.2rem; width:1.15rem; height:1.15rem; accent-color:var(--brand); flex:none } .consent span{ color:var(--ink); font-size:.95rem }

.debts{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:.5rem }
.debts__head,.debts__row{ display:grid; grid-template-columns:1.4fr 1fr .7fr .8fr; gap:.5rem; padding:.55rem .65rem }
.debts__head{ background:var(--surface-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700 }
.debts__row{ border-top:1px solid var(--line) }
.debts__row input{ width:100%; font:inherit; padding:.55rem; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-variant-numeric:tabular-nums }
.debts__row input:focus{ outline:0; border-color:var(--brand) }

.why{ margin-top:1.3rem; border-top:1px dashed var(--line); padding-top:.9rem }
.why summary{ cursor:pointer; color:var(--brand-ink); font-weight:600; font-size:.9rem; list-style:none; display:inline-flex; align-items:center; gap:.4rem }
.why summary::-webkit-details-marker{ display:none } .why summary .ico{ width:1rem; height:1rem }
.why p{ margin:.6rem 0 0; color:var(--muted); font-size:.93rem }
.chat__nav{ display:flex; justify-content:space-between; align-items:center; margin-top:1.1rem; font-size:.85rem; color:var(--muted) }
.stepcount{ font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:.8rem }

/* ---------------------------------------------------- two-level stage stepper */
.stepper{ margin-bottom:1.1rem }
.stepper__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem }
.stepper__title{ font-size:.8rem; font-weight:600; color:var(--ink) } .stepper__title b{ color:var(--brand-ink) }
.stepper__count{ font-size:.74rem; color:var(--faint); font-family:var(--mono) }
.stepper__segs{ display:flex; gap:.32rem }
.stepper__seg{ flex:1; height:6px; border-radius:var(--pill); background:var(--ring-track); overflow:hidden }
.stepper__seg.done{ background:var(--brand) }
.stepper__seg.cur i{ display:block; height:100%; border-radius:var(--pill); background:linear-gradient(90deg,var(--brand),var(--emerald-bright)); transition:width .5s var(--ease) }

/* ---------------------------------------------------------------- score panel + ring */
.ring{ --grad-a:var(--emerald-bright); --grad-b:var(--brand); position:relative; width:150px; aspect-ratio:1; margin:.2rem auto .85rem }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible }
.ring .ga{ stop-color:var(--grad-a) } .ring .gb{ stop-color:var(--grad-b) }
.ring__track{ fill:none; stroke:var(--ring-track); stroke-width:9 }
.ring__fill{ fill:none; stroke:url(#ssGrad); stroke-width:9; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset 1.1s var(--ease); filter:drop-shadow(0 5px 12px oklch(.5 .12 162/.32)) }
.ring--good{ --grad-a:var(--emerald-bright); --grad-b:var(--brand) }
.ring--warn{ --grad-a:var(--gold); --grad-b:var(--gold-deep) }
.ring--bad{ --grad-a:oklch(.72 .12 55); --grad-b:var(--clay) }
.ring__center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center }
.ring__center strong{ font-size:2.5rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.03em }
.ring__center small{ color:var(--faint); font-size:.8rem; margin-top:.1rem }
.ring--lg{ width:188px } .ring--lg .ring__center strong{ font-size:3.2rem }

.scorepanel{ position:sticky; top:78px }
.scorepanel__inner{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem; box-shadow:var(--sh-2); text-align:center }
.scorepanel__band{ margin:.1rem 0 .7rem; color:var(--muted); font-size:.92rem } .scorepanel__band strong{ color:var(--ink); font-family:var(--display) }
.scorepanel__proj{ font-size:.9rem; color:var(--muted); margin:.2rem 0 1rem } .scorepanel__proj .now{ color:var(--ink); font-weight:700 } .scorepanel__proj .goal{ color:var(--gold-deep); font-weight:700 }
.uplift{ color:var(--brand-ink); font-weight:700 }
.scorepanel__complete{ display:flex; align-items:center; gap:.55rem; font-size:.74rem; color:var(--muted); margin-bottom:1rem; font-variant-numeric:tabular-nums }
.plist{ list-style:none; margin:0; padding:.9rem 0 0; border-top:1px solid var(--line); display:grid; gap:.55rem; text-align:left }
.plist li{ display:grid; grid-template-columns:1fr 74px; align-items:center; gap:.5rem; font-size:.82rem }
.plist__lab{ color:var(--ink) } .plist li.is-unknown .plist__lab{ color:var(--faint) }
.plist__bar{ height:6px; background:var(--ring-track); border-radius:var(--pill); overflow:hidden }
.plist__bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--emerald-bright)); border-radius:var(--pill); transition:width .7s var(--ease) }
.scorepanel__hint{ margin:.9rem 0 0; font-size:.74rem; color:var(--faint) }

/* ---------------------------------------------------------------- dashboard */
.dash__hero{ display:flex; gap:clamp(1.2rem,3vw,2.4rem); align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--sh-3); margin-bottom:1.5rem; position:relative; overflow:hidden }
.dash__hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 120% at 100% 0%, oklch(.56 .12 162/.07), transparent 60%) }
.dash__hero h1{ font-family:var(--display); font-weight:520; font-size:clamp(1.6rem,3.6vw,2.4rem); line-height:1.12; text-wrap:balance }
.dash__herocopy{ flex:1; min-width:0; position:relative }
.band-good{ color:var(--brand-ink) } .band-warn{ color:var(--gold-deep) } .band-bad{ color:var(--clay) }
.dash__exports{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.1rem }
.callout{ background:linear-gradient(180deg, color-mix(in oklch,var(--gold) 14%,var(--surface)), var(--surface)); border:1px solid color-mix(in oklch,var(--gold) 35%,var(--line)); border-left:4px solid var(--gold); border-radius:var(--r-md); padding:1.1rem 1.3rem; margin-bottom:1.5rem; box-shadow:var(--sh-1) }
.callout h3{ color:var(--gold-deep); margin-bottom:.35rem; display:flex; align-items:center; gap:.5rem } .callout h3 .ico{ color:var(--gold-deep) }
.callout ul{ margin:.5rem 0 0; padding-left:1.2rem; color:var(--muted) } .callout li{ margin:.15rem 0 }
.dash__grid{ display:grid; grid-template-columns:1fr 330px; gap:1.5rem; align-items:start }
.dash__col{ display:grid; gap:1.5rem; min-width:0 }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.2rem,2.5vw,1.7rem); box-shadow:var(--sh-2) }
.panel__title{ font-family:var(--display); font-weight:540; font-size:1.18rem; margin-bottom:1.1rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); position:relative }
.panel__title::after{ content:""; position:absolute; left:0; bottom:-1px; width:42px; height:2.5px; background:var(--gold); border-radius:2px }
.plan{ list-style:none; margin:0; padding:0; display:grid; gap:1rem }
.plan__item{ display:flex; gap:.9rem; align-items:flex-start }
.plan__icon{ width:2.5rem; height:2.5rem; flex:none; display:grid; place-items:center; border-radius:12px; background:color-mix(in oklch,var(--brand) 12%,transparent); color:var(--brand-ink); border:1px solid color-mix(in oklch,var(--brand) 20%,transparent) }
.plan__icon .ico{ width:1.35rem; height:1.35rem }
.plan__item strong{ color:var(--ink) } .plan__item p{ margin:.15rem 0 0; color:var(--muted); font-size:.93rem }
.detail{ padding:.85rem 0; border-top:1px solid var(--line) } .detail:first-of-type{ border-top:0; padding-top:0 }
.detail h3{ font-size:.95rem; color:var(--brand-ink); margin-bottom:.25rem } .detail p{ margin:0; color:var(--ink); font-size:.94rem }
.areas{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem }
.areas li{ display:grid; grid-template-columns:1fr 1.25fr 28px; align-items:center; gap:.7rem; font-size:.88rem }
.areas__bar{ height:9px; background:var(--ring-track); border-radius:var(--pill); overflow:hidden }
.areas__bar i{ display:block; height:100%; border-radius:var(--pill); background:linear-gradient(90deg,var(--brand-ink),var(--brand)); transition:width .8s var(--ease) }
.areas__bar--good i{ background:linear-gradient(90deg,var(--brand),var(--emerald-bright)) }
.areas__bar--warn i{ background:linear-gradient(90deg,var(--gold),var(--gold-deep)) }
.areas__bar--bad i{ background:linear-gradient(90deg,oklch(.72 .12 55),var(--clay)) }
.areas__num{ text-align:right; font-weight:700; color:var(--ink); font-family:var(--mono); font-variant-numeric:tabular-nums }
.areas__na{ grid-column:2/4; text-align:right; color:var(--faint); font-style:italic; font-size:.8rem }
.panel--next p{ font-size:.93rem; color:var(--ink) } .contact{ font-size:.9rem; color:var(--muted) } .contact strong{ color:var(--ink) }

/* ---------------------------------------------------------------- motion */
@keyframes rise{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:no-preference){
  .coach,.qcard,.scorepanel__inner,.hero__copy,.explainer,.dash__hero,.callout,.panel,.stepper{ animation:rise .5s var(--ease-enter) both }
  .scorepanel__inner,.explainer{ animation-delay:.08s } .dash__col--side .panel{ animation-delay:.1s }
  ::view-transition-old(qcard){ animation:vt-out var(--dur-page) var(--ease) both } ::view-transition-new(qcard){ animation:vt-in var(--dur-page) var(--ease-enter) both }
}
@keyframes vt-out{ to{ opacity:0; transform:translateX(-14px) } } @keyframes vt-in{ from{ opacity:0; transform:translateX(16px) } }

/* ---------------------------------------------------------------- responsive */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr } .explainer{ order:-1 }
  .chat{ grid-template-columns:1fr } .scorepanel{ position:static; order:-1 }
  .scorepanel__inner{ display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.2rem; text-align:left; align-items:center }
  .ring{ margin:0 } .plist{ grid-column:1/3 } .scorepanel__band,.scorepanel__proj,.scorepanel__complete{ grid-column:2 } .scorepanel__hint{ display:none }
  .dash__hero{ flex-direction:column; text-align:center } .dash__exports{ justify-content:center }
  .dash__grid{ grid-template-columns:1fr } .trustrow{ grid-template-columns:1fr 1fr }
}
@media (max-width:480px){
  .choices--bool{ grid-template-columns:1fr }
  .debts__head,.debts__row{ grid-template-columns:1.2fr 1fr .7fr } .debts__head span:last-child,.debts__row input:last-child{ display:none }
  .topbar__progress{ max-width:170px } .topbar__score{ display:none }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *{ transition-duration:.01ms !important } .ring__fill{ transition:none } }

/* ============================================================ ADVANCED WIZARD */
.chat--adv{ grid-template-columns:minmax(0,720px); justify-content:center }
.stepper__badge{ display:inline-block; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#fff; background:linear-gradient(180deg,var(--brand),var(--brand-ink)); padding:.16rem .48rem; border-radius:var(--pill); margin-right:.35rem; vertical-align:.06em }
.prefillnote{ display:flex; align-items:center; gap:.45rem; font-size:.85rem; color:var(--brand-ink); font-weight:600;
  background:color-mix(in oklch,var(--brand) 9%,var(--surface)); border:1px solid color-mix(in oklch,var(--brand) 22%,transparent);
  border-radius:10px; padding:.5rem .75rem; margin:.1rem 0 .2rem } .prefillnote .ico{ width:1.05rem; height:1.05rem; flex:none }
.input--area{ resize:vertical; min-height:6.5rem; line-height:1.55 } .input--date{ max-width:18rem }

.choice.is-suggested{ border-color:color-mix(in oklch,var(--brand) 55%,var(--line)); background:color-mix(in oklch,var(--brand) 8%,var(--surface)) }
.choice__sug{ margin-left:auto; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-ink);
  background:color-mix(in oklch,var(--brand) 15%,transparent); padding:.15rem .5rem; border-radius:var(--pill) }

/* repeatable groups */
.grp{ display:grid; gap:.7rem; margin-bottom:.4rem }
.grp__row{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.6rem;
  border:1px solid var(--line); border-radius:12px; padding:.8rem .9rem .85rem; background:var(--surface-2) }
.grp__cell{ display:flex; flex-direction:column; gap:.3rem; min-width:0 }
.grp__lab{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700 }
.grp__in{ width:100%; font:inherit; padding:.6rem .7rem; border:1px solid var(--line); border-radius:9px; background:var(--surface);
  color:var(--ink); font-variant-numeric:tabular-nums } .grp__in:focus{ outline:0; border-color:var(--brand) }
.grp__del{ position:absolute; top:.4rem; right:.4rem; width:1.7rem; height:1.7rem; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); cursor:pointer; font-size:1.05rem; line-height:1; display:grid; place-items:center }
.grp__del:hover{ border-color:var(--bad); color:var(--bad) }
.grp__hint{ font-size:.82rem; color:var(--muted); margin:.5rem 0 0 }

/* uploads */
.upload{ display:grid; gap:.7rem }
.upload__zone{ display:block; border:1.5px dashed color-mix(in oklch,var(--brand) 35%,var(--line)); border-radius:14px;
  padding:1.4rem 1rem; text-align:center; cursor:pointer; background:color-mix(in oklch,var(--brand) 4%,var(--surface)); transition:border-color .15s, background .15s }
.upload__zone:hover{ border-color:var(--brand); background:color-mix(in oklch,var(--brand) 7%,var(--surface)) }
.upload__zone input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden }
.upload__inner{ display:flex; flex-direction:column; align-items:center; gap:.25rem; color:var(--muted); font-size:.9rem }
.upload__inner .ico{ width:1.6rem; height:1.6rem; color:var(--brand-ink); margin-bottom:.2rem }
.upload__inner b{ color:var(--ink) } .upload__inner small{ color:var(--muted); font-size:.78rem }
.upload__zone.is-off{ opacity:.5; pointer-events:none; filter:grayscale(.4) }
.upload__list{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem }
.upload__list li{ display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:9px; padding:.45rem .7rem } .upload__list .ico{ width:1.05rem; height:1.05rem; color:var(--brand) }
.upload__later{ display:flex; align-items:center; gap:.55rem; font-size:.9rem; color:var(--muted); cursor:pointer }
.upload__later input{ width:1.1rem; height:1.1rem; accent-color:var(--brand) }

/* dashboard advanced CTA */
.advcta{ display:flex; align-items:center; gap:1.1rem; background:linear-gradient(120deg, color-mix(in oklch,var(--brand) 12%,var(--surface)), var(--surface) 70%);
  border:1px solid color-mix(in oklch,var(--brand) 32%,var(--line)); border-radius:var(--r-md); padding:1.2rem 1.4rem; margin-bottom:1.5rem; box-shadow:var(--sh-1) }
.advcta__icon{ width:3rem; height:3rem; flex:none; display:grid; place-items:center; border-radius:14px; color:#fff;
  background:linear-gradient(160deg,var(--brand),var(--brand-ink)) } .advcta__icon .ico{ width:1.5rem; height:1.5rem }
.advcta__copy{ flex:1; min-width:0 } .advcta__copy h3{ margin:.1rem 0 .25rem } .advcta__copy p{ margin:0; color:var(--muted); font-size:.92rem }
.advcta .btn{ flex:none } .advcta--done{ background:linear-gradient(120deg, color-mix(in oklch,var(--brand) 9%,var(--surface)), var(--surface) 70%) }
.advcta--done .advcta__icon{ background:linear-gradient(160deg,var(--brand),var(--brand-ink)) }

/* advanced submitted screen */
.advdone{ max-width:640px; margin:1.5rem auto; text-align:center }
.advdone__card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.6rem,4vw,2.6rem); box-shadow:var(--sh-2) }
.advdone__badge{ width:4rem; height:4rem; margin:0 auto 1rem; display:grid; place-items:center; border-radius:50%; color:#fff;
  background:linear-gradient(160deg,var(--brand),var(--brand-ink)); box-shadow:0 14px 30px -14px var(--brand) } .advdone__badge .ico{ width:2rem; height:2rem; stroke-width:2.4 }
.advdone__list{ list-style:none; margin:1.4rem 0; padding:0; display:grid; gap:.6rem; text-align:left }
.advdone__list li{ display:flex; align-items:center; gap:.7rem; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:.7rem .9rem; color:var(--ink); font-size:.92rem }
.advdone__list .ico{ width:1.3rem; height:1.3rem; color:var(--brand-ink); flex:none }
.advdone__actions{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem }
.advdone__fine{ font-size:.78rem; color:var(--muted); margin-top:1.1rem; line-height:1.5 }

@media (max-width:640px){
  .advcta{ flex-direction:column; align-items:flex-start } .advcta .btn{ width:100% }
  .grp__row{ grid-template-columns:1fr 1fr } .grp__cell--text,.grp__cell--select{ grid-column:1 / -1 }
}