/* Aftertax — Stripe-grade overlay for /tool.
   Loads after styles.css and styles-mono.css. No markup changes: same
   components, same ids, same JS. What changes is the surface language —
   navy ink instead of black, a cool ground, hairline "ring" shadows instead
   of borders, 6/8/10px radii, one weight step lighter everywhere, and a
   tighter vertical rhythm. The accent stays #920202 and is used once per
   view: the active nav item, the primary action, the total rule. */

:root{
  /* Ink is navy at three strengths; muted stays ≥4.5:1 on white and ground. */
  --ink-87:#0A2540; --ink-60:#3C4257; --ink-56:#596171; --ink-38:#596171;
  --line:rgba(10,37,64,.14); --line-soft:rgba(10,37,64,.08);
  --ground:#F6F9FC; --surface:#fff; --surface-sunk:#F6F9FC; --sidebar:#F6F9FC;
  --accent:#920202; --accent-deep:#7A0202; --accent-wash:rgba(146,2,2,.08);
  --radius-card:10px; --radius-input:6px; --radius-pill:6px;
  --shadow-card:0 0 0 1px rgba(10,37,64,.07),0 1px 2px rgba(10,37,64,.05);
  --shadow-lift:0 0 0 1px rgba(10,37,64,.07),0 8px 24px -8px rgba(10,37,64,.22);
  --ring:0 0 0 1px rgba(10,37,64,.16),0 1px 1px rgba(10,37,64,.05);
  --ring-hover:0 0 0 1px rgba(10,37,64,.30),0 1px 1px rgba(10,37,64,.05);
  --ring-focus:0 0 0 1px #920202,0 0 0 4px rgba(146,2,2,.16);
  --fs-h2:20px; --fs-figure:18px; --fs-h3:15px; --fs-lead:14px;
  --fs-body:13.5px; --fs-small:12.5px; --fs-micro:11.5px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
body{background:var(--ground);color:var(--ink-60);line-height:1.5;letter-spacing:0;}
.app{background:var(--ground);}
.appmain.wrap{padding:0 32px 56px;max-width:1180px;}
::selection{background:rgba(10,37,64,.12);}
.appmain a{color:var(--accent);text-decoration:none;}
.appmain a:hover{color:var(--accent-deep);text-decoration:underline;}

/* ---------- type ----------
   One step lighter than before: Stripe never goes above 600 in the product. */
.app h1,.app h2,.app h3,.topbar-title,.panel-h,.card-h,.section-divider h2,
.bridge-head h3,.why-panel h3,.facts-head h2{font-weight:600;letter-spacing:-0.015em;color:var(--ink-87);}
.topbar-title{font-size:22px;letter-spacing:-0.02em;}
.app .section-divider h2{font-size:17px;margin:0;}
.app .section-num,.app .eyebrow{font-size:var(--fs-small);font-weight:500;color:var(--ink-56);margin-bottom:6px;}
.app .sub,.card-sub,.topbar-sub{font-size:var(--fs-body);color:var(--ink-56);line-height:1.5;}
.card-h{font-size:var(--fs-h3);}
.hh-figure{font-weight:600;letter-spacing:-0.03em;font-size:clamp(28px,3.4vw,34px);}
.kpi b,.hh-stat b,.ring-mid b,.gap-figure{font-weight:600;}
.field label{font-weight:500;font-size:var(--fs-body);color:var(--ink-87);margin-bottom:3px;}
.field .caption,.caption{font-size:var(--fs-small);color:var(--ink-56);margin-bottom:8px;line-height:1.45;}
.panel .hint{margin-bottom:18px;}

/* Figures in the UI face, not the mono. Stripe sets every number in its
   product sans with tabular figures; the mono stays for the landing badge. */
.app b,.app td,.app th,.app input,.app select,.app .kpi b,.app .hh-figure,.app .ins-fig,.app .you-lab,
.app .insight-head span,.app .insight-count,.app .ins-sec-lab,.app .ins-sec-hint,.app .ins-n,.app .stamp,
.app .fold-v,.app .chart-y span,.app .cf-axis span,.app .tl-tick em,.app .decomp-fig,.app .bar-label b,
.app .chart-legend b,.app .sc-status,.app .lead-val,.app .tl-intro-num,.app .ab-chip b,.app .qec-lab,
.app .qec-tot,.app .qec-stack em,.app .br-part b,.app .bd-line b,.app .cg-pot b,.app .dec-age,.app .pots-at b,
.app .pots-total b,.app .tlf-max,.app .tlf-half,.app .fd-group,.app .kid-head,.app .nw-subhead,.app .alloc-head,
.app .hs-lab,.app .hs-row b,.app .hs-figure,.app .fd-eyebrow,.app .tier-badge,
.app .cf-v,.app .cf-row b,.app .ledger-row .v,.app .ii-fig,.app .hh-person b,.app .bd-table td,.app .hh-stat b,
.app .alloc-note,.app .at-sum,.app .at-blend,.app .sp-amt,.app .range-val,.app .lasts-lead b,.app .stage-age,
.app .stage-pct,.app .glide-ticks span,.app .potsLegend b,.app .qe-kpi b,.app .bgt-table td,.app .cg-table th,
.app .cg-table td,.app .cg-opts td,.app .cg-ctl input,.app .bgt-table th,.app .bgt-table th.c-age,.app .bgt-table .rr-h,
.app .ii-head,.app .ins-sec-lab,.app .cg-opts th,.app .cg-table tbody th,.app .bd-table th{
  font-family:var(--sans);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  letter-spacing:0;text-transform:none;}
.app .you-lab,.app .kid-head,.app .insight-head span:first-child,.app .ins-sec-lab{font-weight:500;font-size:var(--fs-small);}

/* ---------- rhythm (tighter) ---------- */
.section-divider{margin:40px 0 18px;padding-top:24px;}
.grid{gap:16px;}
.results-col{gap:16px;}
.results-col>div{gap:16px;}
.field{margin-bottom:16px;}
.panel{padding:22px 22px 20px;}
.hh-strip{padding:18px 22px;margin-bottom:16px;gap:20px;}
.nw-summary{padding:20px 22px;margin-bottom:16px;}
.timeline-wrap{padding:18px 24px 16px;margin-bottom:16px;}
.ledger-card,.why-panel,.bridge-card{padding:20px 22px;}
.event-grid{gap:12px;}
.event-card{padding:14px;}
.quick-add{gap:8px;margin-bottom:14px;}

/* ---------- surfaces: rings, not borders ---------- */
.panel,.ledger-card,.why-panel,.bridge-card,.hh-strip,.nw-summary,.timeline-wrap,
.event-card,.fact,.facts-card,.kpi-strip,.you-block,.insight[data-lead],.gap-stamp,
.signup-panel,.qe-out,.ins-strip>*,.tl-intro{
  background:var(--surface);border:none;border-radius:var(--radius-card);box-shadow:var(--shadow-card);}
.fact:hover,.event-card:hover{box-shadow:var(--shadow-lift);transform:none;}
.networth-block,.drill,.scen-note,.bridge-toggle{background:var(--surface-sunk);border:none;
  box-shadow:inset 0 0 0 1px var(--line-soft);border-radius:8px;}
.you-block{padding:18px 20px;}
.you-strip{background:none;border:none;box-shadow:none;padding:0;gap:14px;margin-bottom:16px;}
.person-bar{background:none;border:none;box-shadow:none;padding:0;margin-bottom:14px;}
.kid-name,.you-name input{background:#fff;border:none;box-shadow:var(--ring);border-radius:var(--radius-input);
  padding:7px 10px;font-size:var(--fs-body);color:var(--ink-87);}
.kid-name:focus-within,.you-name input:focus{box-shadow:var(--ring-focus);outline:none;}

/* ---------- sidebar ---------- */
.sidenav{width:224px;padding:18px 12px;background:var(--sidebar);border-right:1px solid var(--line-soft);gap:2px;}
.sidenav .sn-brand{font-size:22px;padding:4px 10px 2px;color:var(--ink-87);}
.sidenav .sn-eyebrow{font-size:var(--fs-micro);font-weight:500;color:var(--ink-56);padding:0 10px;margin-bottom:16px;}
.sn-list{gap:1px;}
.sn-list .tab{padding:7px 10px;border-radius:6px;font-size:var(--fs-body);font-weight:500;color:var(--ink-60);gap:10px;}
.sn-list .tab:hover{background:rgba(10,37,64,.05);color:var(--ink-87);}
.sn-list .tab.active,.sn-list .tab.active:hover{background:var(--accent-wash);color:var(--accent);font-weight:600;}
.sn-list .tab.active .sn-ico{color:var(--accent);}
.sn-ico,.sn-ico svg{width:16px;height:16px;}
.sn-foot{border-top:1px solid var(--line-soft);padding:14px 10px 0;gap:8px;}
.sn-foot p{font-size:var(--fs-micro);line-height:1.5;color:var(--ink-56);}
.sn-foot a{font-size:var(--fs-micro);color:var(--ink-56);}
.sn-foot a:hover{color:var(--accent);text-decoration:none;}

/* ---------- utility bar + page head ---------- */
.utilbar{padding:10px 0;border-bottom:1px solid var(--line-soft);gap:8px;}
.topbar{padding:22px 0 16px;border-bottom:none;}
.topbar-sub{margin-top:4px;}
.utilbar #scenarioSelect{border:none;box-shadow:var(--ring);border-radius:6px;padding:6px 28px 6px 10px;
  font-size:var(--fs-small);font-weight:500;color:var(--ink-87);background:#fff;}
.utilbar #scenarioSelect:hover{box-shadow:var(--ring-hover);}
.utilbar #scenarioSelect:focus{box-shadow:var(--ring-focus);outline:none;}
.utilbar .sc-status{font-size:var(--fs-micro);color:var(--ink-56);font-weight:500;}
.sc-menu{border:none;box-shadow:var(--shadow-lift);border-radius:8px;padding:4px;}
.sc-menu button{border-radius:5px;font-size:var(--fs-small);font-weight:500;padding:7px 10px;}
.sc-menu button:hover{background:var(--surface-sunk);}

/* ---------- KPI strip: one bar, hairline-divided ---------- */
.kpi-strip{gap:0;padding:0;margin:14px 0 20px;border-radius:8px;overflow:hidden;top:8px;}
.kpi{padding:11px 16px;gap:1px;}
.kpi+.kpi{border-left:1px solid var(--line-soft);}
.kpi span{font-size:var(--fs-micro);font-weight:500;color:var(--ink-56);}
.kpi b{font-size:15px;font-weight:600;color:var(--ink-87);letter-spacing:-0.01em;}
.kpi-lead b{color:var(--accent);font-size:15px;}
.kpi.kpi-ins{background:none;border-left:1px solid var(--line-soft);border-radius:0;cursor:pointer;}
.kpi.kpi-ins:hover{background:var(--surface-sunk);}
.kpi-cta{border-bottom:none;}

/* ---------- inputs ---------- */
.num-input,.alloc-row input,.fd-select,.mf input,.mf select,.mf textarea,
.signup-form input[type=email],.cg-ctl input,.cg-unit,.bg-yrs,#scenarioSelect{
  background:#fff;border:none;border-radius:var(--radius-input);box-shadow:var(--ring);
  transition:box-shadow .15s var(--ease);}
.num-input:hover,.alloc-row input:hover,.fd-select:hover{background:#fff;box-shadow:var(--ring-hover);}
.num-input:focus-within,.num-input:focus-within:hover,.alloc-row input:focus,.fd-select:focus,
.signup-form input[type=email]:focus,.cg-ctl input:focus,.mf input:focus,.mf select:focus,.mf textarea:focus{
  background:#fff;border-color:transparent;box-shadow:var(--ring-focus);outline:none;}
.num-input{padding:0 10px;}
.num-input span{font-size:var(--fs-body);color:var(--ink-56);margin-right:4px;}
.num-input input[type=number],.num-input input[type=date],.num-input input[type=text]{
  font-size:var(--fs-lead);font-weight:500;padding:8px 0;color:var(--ink-87);}
.nw-row .num-input input[type=number]{padding:7px 0;font-size:var(--fs-body);}
.alloc-row input{padding:7px 9px;font-size:var(--fs-body);}
input[type=range]{accent-color:var(--accent);}
.isa-opt input,.glide-switch input,.checkbox-row input{accent-color:var(--accent);border-radius:4px;}
.isa-opt{font-size:var(--fs-small);margin-top:10px;}
.isa-opt b{color:var(--ink-87);font-weight:600;}

/* ---------- buttons ---------- */
.btn,.btn-primary,.sc-btn.primary,.at-fix,.add-source,.alloc-add,.qa-btn,.btn-ghost,.btn-ghost-sm,.sc-btn{
  font-size:var(--fs-small);font-weight:600;line-height:1;padding:8px 13px;border-radius:6px;border:none;
  letter-spacing:0;transition:background .15s var(--ease),box-shadow .15s var(--ease),color .15s var(--ease);}
.btn,.btn-primary,.sc-btn.primary,.at-fix{background:var(--accent);color:#fff;
  box-shadow:0 0 0 1px var(--accent),0 1px 2px rgba(10,37,64,.18),inset 0 1px 0 rgba(255,255,255,.14);}
.btn:hover,.btn-primary:hover,.sc-btn.primary:hover,.at-fix:hover{background:var(--accent-deep);color:#fff;
  box-shadow:0 0 0 1px var(--accent-deep),0 2px 4px rgba(10,37,64,.2),inset 0 1px 0 rgba(255,255,255,.14);}
.btn-ghost,.btn-ghost-sm,.sc-btn,.qa-btn,.add-source,.alloc-add{background:#fff;color:var(--ink-87);box-shadow:var(--ring);}
.btn-ghost:hover,.btn-ghost-sm:hover,.sc-btn:hover,.qa-btn:hover,.add-source:hover,.alloc-add:hover{
  background:#fff;color:var(--ink-87);box-shadow:var(--ring-hover);transform:none;}
.add-source,.alloc-add{border:none;color:var(--ink-60);width:auto;padding:7px 12px;}
.add-source:hover,.alloc-add:hover{color:var(--accent);}
.qa-btn{padding:7px 12px;font-weight:500;}
.qa-btn:hover{color:var(--accent);}
.qa-btn:active{transform:none;}
.utilbar .sc-btn{padding:7px 11px;}
.utilbar .sc-btn.sc-icon{padding:5px 9px;font-size:14px;}
.btn:focus-visible,.sc-btn:focus-visible,.seg-btn:focus-visible,.qa-btn:focus-visible,.tab:focus-visible,
.mode-btn:focus-visible,.p-tab:focus-visible{outline:none;box-shadow:var(--ring-focus);}

/* ---------- segmented controls: grey track, white thumb ---------- */
.seg,.mode-btns,.tier-seg{display:inline-flex;background:var(--surface-sunk);border:none;
  box-shadow:inset 0 0 0 1px var(--line-soft);border-radius:7px;padding:2px;gap:2px;}
.seg-btn,.mode-btn,.tier-seg .seg-btn{font-size:var(--fs-small);font-weight:500;color:var(--ink-60);
  padding:6px 11px;border-radius:5px;line-height:1.2;}
.seg-sm .seg-btn{font-size:var(--fs-micro);padding:5px 9px;}
.seg{flex-wrap:nowrap;}
@media (max-width:980px){#curveScenario .seg-btn,#bridgeScenario .seg-btn{padding:5px 7px;}}
.mode-btn{padding:7px 14px;}
.seg-btn:hover,.mode-btn:hover{color:var(--ink-87);}
.seg-btn.active,.seg-btn.active:hover,.mode-btn.active,.mode-btn.active:hover,.tier-seg .seg-btn.active{
  background:#fff;color:var(--ink-87);font-weight:600;
  box-shadow:0 0 0 1px rgba(10,37,64,.08),0 1px 2px rgba(10,37,64,.12);}
.tier-seg .seg-btn{padding:5px 12px;}

/* Person chips and the milestone chips: flat, tinted when current. */
.p-tab{border:none;border-radius:6px;padding:6px 12px;font-size:var(--fs-small);font-weight:500;
  color:var(--ink-60);box-shadow:var(--ring);background:#fff;}
.p-tab:hover{box-shadow:var(--ring-hover);color:var(--ink-87);}
.p-tab.active,.p-tab.active:hover{background:var(--accent-wash);color:var(--accent);font-weight:600;
  box-shadow:0 0 0 1px rgba(146,2,2,.28);}
.p-tab.add{box-shadow:0 0 0 1px var(--line);color:var(--ink-56);background:none;}
.hh-person.on{box-shadow:0 0 0 1px rgba(146,2,2,.28);border-radius:8px;}
.hh-person b{color:var(--ink-87);}

/* ---------- ledgers ---------- */
.ledger-title,.app .ledger-title.card-title-row{font-size:var(--fs-body);font-weight:600;color:var(--ink-87);
  letter-spacing:0;margin-bottom:6px;}
.app .ledger-card .ledger-row{padding:8px 0;}
.app .ledger-card .ledger-row .k{font-weight:400;color:var(--ink-60);}
.app .ledger-card .ledger-row .v{font-weight:500;}
.app .ledger-card .ledger-row.rowsub .k{font-weight:500;}
.app .ledger-card .ledger-row.rowsub .v{font-weight:600;}
.app .ledger-card .ledger-row.total{padding:12px 0 8px;margin-top:6px;border-top:1px solid var(--ink-87);}
.app .ledger-card .ledger-row.total .k{font-weight:600;}
.app .ledger-card .ledger-row.total .v{font-weight:600;font-size:var(--fs-figure);letter-spacing:-0.02em;}
.ledger-row .chev{background:var(--surface-sunk);color:var(--ink-56);border-radius:4px;}
.stamp{background:var(--surface-sunk);color:var(--ink-56);font-weight:500;border-radius:4px;letter-spacing:0;}
.nw-total{border-top:1px solid var(--ink-87);}
.nw-total b{font-weight:600;}
.nw-subhead{letter-spacing:0;font-weight:500;color:var(--ink-56);text-transform:none;}
.alloc-head{letter-spacing:0;font-weight:500;}
.age-pick,.app .age-pick{border:none;box-shadow:var(--ring);border-radius:5px;padding:2px 22px 2px 7px;
  background:#fff;font-weight:600;}

/* ---------- tables ---------- */
.bridge-table,.bgt-table,.cg-opts,.cg-table{font-size:var(--fs-small);}
.bridge-table th,.bgt-table th,.cg-opts th,.cg-table th{font-size:var(--fs-micro);font-weight:500;color:var(--ink-56);
  letter-spacing:0;padding:8px 10px;border-bottom:1px solid var(--line);background:#fff;}
.bridge-table td,.bgt-table td,.cg-opts td,.cg-table td{padding:8px 10px;border-bottom:1px solid var(--line-soft);
  color:var(--ink-60);}
.bridge-table td.age,.bridge-table td.close{font-weight:600;color:var(--ink-87);}
.bridge-table td.pos{color:var(--ink-87);}
.bridge-table tr:hover td,.br-row:hover{background:var(--surface-sunk);}
.br-row.open,.bridge-toggle:hover{background:rgba(10,37,64,.05);}
.bridge-scroll,.table-scroll,.bgt-scroll{border:none;box-shadow:inset 0 0 0 1px var(--line-soft);border-radius:8px;}

/* ---------- folds, chips, insights ---------- */
.fold summary{padding:12px 0;}
.fold-t{font-weight:600;color:var(--ink-87);}
.fold-v,.at-sum{background:var(--surface-sunk);color:var(--ink-60);border-radius:4px;font-weight:500;}
.fold-s{color:var(--ink-56);}
.assume-bar{gap:6px;}
.ab-chip{background:#fff;border:none;box-shadow:var(--ring);border-radius:6px;padding:6px 10px;font-size:var(--fs-small);}
.ab-chip:hover{box-shadow:var(--ring-hover);}
.ab-chip b{font-weight:600;color:var(--ink-87);}
.insight-block{background:none;border:none;box-shadow:none;padding:0;}
.insight-head span:first-child{font-size:var(--fs-body);font-weight:600;color:var(--ink-87);}
.insight-count{background:var(--surface-sunk);color:var(--ink-56);border-radius:4px;font-weight:500;}
.insight{padding:16px 0;gap:28px;grid-template-columns:140px 1fr;}
.insight[data-lead]{padding:20px 22px;margin:8px 0 10px;border:none;box-shadow:var(--shadow-card);border-radius:10px;}
.insight[data-lead] .ins-body b{font-size:var(--fs-h3);font-weight:600;}
.insight[data-lead] .ins-n{background:var(--accent);}
.insight[data-lead] .ins-rail::before{font-family:var(--sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:0;}
.ins-n{width:22px;height:22px;font-size:10.5px;}
.ins-fig{font-weight:600;}
.fact b{font-weight:600;font-size:var(--fs-body);}
.fact b::before{box-shadow:none;width:6px;height:6px;}
.fact-ico{background:var(--surface-sunk);color:var(--ink-60);font-family:var(--sans);}
.warn{border:none;box-shadow:inset 0 0 0 1px rgba(217,119,6,.35);border-radius:8px;}

/* ---------- charts and legends ---------- */
.chart-legend,.ring-legend,.rl{font-size:var(--fs-small);color:var(--ink-60);}
.bar-track{background:var(--surface-sunk);border-radius:3px;}
.bar-fill{border-radius:3px;}
.gap-stamp{padding:22px 24px;}
.gap-label{font-size:var(--fs-small);font-weight:500;color:var(--ink-56);letter-spacing:0;}
.gap-figure{font-size:30px;letter-spacing:-0.03em;color:var(--ink-87);}

/* ---------- timeline ---------- */
.tl-line{background:var(--ink-87);opacity:.85;}
.tl-title{font-weight:600;color:var(--ink-87);font-size:var(--fs-body);}
.tl-title span{font-weight:400;color:var(--ink-56);}
.tl-hint,.cf-note,.you-note,.age-note{font-size:var(--fs-micro);color:var(--ink-56);}
.qa-label{font-weight:500;letter-spacing:0;}
.tl-intro{padding:16px 20px;}
.tl-intro-num{color:var(--ink-56);font-weight:500;}

/* ---------- sign-up + footer ---------- */
.signup-panel{padding:24px 26px;}
.signup-panel h2{font-size:var(--fs-h3);}
footer p{font-size:var(--fs-micro);color:var(--ink-56);line-height:1.55;}

/* ---------- quick tier ---------- */
body.tier-quick .utilbar .ub-brand{font-size:22px;}
.qe-out{padding:22px;}

@media (max-width:900px){
  .sidenav{width:auto;border-right:none;border-bottom:1px solid var(--line-soft);box-shadow:none;}
  .appmain.wrap{padding:0 16px 40px;}
}


/* ======================================================================
   Acceptance pass. Everything above is the stylesheet as specified; this
   section closes what the browser audit found it did not reach — components
   added after the brief was written, and older rules in styles.css and
   styles-mono.css that out-rank it. Nothing here changes markup or JS.
   ====================================================================== */

/* Mono. The only literal JetBrains Mono in the tool is the --mono token, so
   pointing the token at the sans inside .app reaches every component that
   uses it — the levers panel, the lead-insight mark, and anything added
   later — rather than chasing selectors one at a time. Figures keep tabular
   numerals from the inheritance. */
.app{--mono:var(--sans);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* Radii above 10px. Containers take the system values; the three 22–26px
   round badges become 6px squares, since a circle that size is an 11–13px
   radius and the brief caps radii at 10. Small dots and the 16px help mark
   are circles under the cap and are left alone. */
.app .scenario-bar,.app .age-bar,.app .hh-person,.app .cg-pot,.app .tl-pill,.app .tl-intro-num{border-radius:8px;}
.app .person-bar{border-radius:0;}
.app .assume-bar{border-radius:var(--radius-card);}
.app .btn-ghost,.app .btn-ghost-sm,.app .panel-nav button{border-radius:6px;}
.app .ins-n,.app .pm,.app .fact-ico{border-radius:6px;}

/* One accent fill per view: the Save button. The sign-up button is a
   secondary action on a page whose primary action is saving the plan, and
   the lead insight's number badge takes the tint the nav and person chips
   use rather than a second solid block of red. */
.app .signup-panel .btn,.app #signupBtn{background:#fff;color:var(--ink-87);box-shadow:var(--ring);}
.app .signup-panel .btn:hover,.app #signupBtn:hover{background:#fff;color:var(--ink-87);box-shadow:var(--ring-hover);}
.app .insight[data-lead] .ins-n{background:var(--accent-wash);color:var(--accent);
  box-shadow:0 0 0 1px rgba(146,2,2,.28);}

/* Inputs the brief's list does not name: milestone cards, the net-worth grid,
   holdings, income rows, child stages and the plain selects. They get the same
   ring, hover and focus as the wrapped fields. Fields inside .num-input,
   .cg-unit, .bg-yrs and .nwp-cell are excluded because their wrapper carries the ring. */
.app :is(input[type=text],input[type=number],input[type=email],input[type=date],input:not([type]),select,textarea):not(.num-input *):not(.cg-unit *):not(.bg-yrs *):not(.nwp-cell *){
  background-color:#fff;border-color:transparent;border-radius:var(--radius-input);box-shadow:var(--ring);
  transition:box-shadow .15s var(--ease);}
.app :is(input[type=text],input[type=number],input[type=email],input[type=date],input:not([type]),select,textarea):not(.num-input *):not(.cg-unit *):not(.bg-yrs *):not(.nwp-cell *):hover{
  box-shadow:var(--ring-hover);}
.app :is(input[type=text],input[type=number],input[type=email],input[type=date],input:not([type]),select,textarea):not(.num-input *):not(.cg-unit *):not(.bg-yrs *):not(.nwp-cell *):focus{
  box-shadow:var(--ring-focus);border-color:transparent !important;outline:none;}
/* styles.css gives every focused input an accent border (!important) and a 2px
   focus-visible outline. With the ring doing that job, both would draw a
   second indicator inside the first. Checkboxes and sliders keep theirs. */
.app .num-input input:focus,.app .cg-unit input:focus,.app .bg-yrs input:focus,.app .nwp-cell input:focus{border-color:transparent !important;}
.app :is(input[type=text],input[type=number],input[type=email],input[type=date],input:not([type]),select,textarea):focus-visible{outline:none;}

/* Data colours. styles-mono.css gave the ISA series and the timeline's money
   category the accent, which on this system is a second and third red per view
   — on the Quick tier, two full-width red bars. Both become the navy ink. The
   charts read these tokens from :root through cssVar(), so the drawn series and
   their legend keys move together. The projection line itself stays red: tool.js
   draws it with --accent by name, and it is the headline figure. */
:root{--cat-isa:#0A2540; --tl-money:#0A2540;}

.app #cgToTimeline{border-radius:6px;}

/* styles.css ends with a design pack that sets several things with !important,
   which no ordinary rule here can override: every field filled with the ground
   colour at a 10px radius, an accent border on focus inside the ring, and a
   coloured border on the quick-add chips. On this system fields are white at
   6px with the ring alone, and the chips are secondary buttons, so these answer
   in kind — scoped to .app, and no wider than the rules they undo. The mobile
   16px input size, which stops iOS zooming on focus, is left alone. */
.app .num-input,.app .stage-row .num-input,.app .alloc-row input,.app .glide-controls input,.app .alloc-label,
.app :is(input[type=text],input[type=number],input[type=date],input[type=email],select,textarea):not(.num-input *):not(.cg-unit *):not(.bg-yrs *):not(.nwp-cell *){
  background:#fff !important;border-color:transparent !important;border-radius:var(--radius-input) !important;}
.app .num-input input,.app .cg-unit input,.app .bg-yrs input,.app .nwp-cell input{background:transparent !important;border-radius:0 !important;}
.app .num-input:focus-within,.app .bg-yrs:focus-within,.app .cg-unit:focus-within{border-color:transparent !important;}
.app .qa-btn,.app .qa-btn:hover{border-color:transparent !important;}

/* Phone widths. The help mark grows to a 22px touch target, which as a circle
   is an 11px radius; it is a 6px square at every width, so it does not change
   shape across the breakpoint. The capital gains table stacks its rows into
   panels on a phone, and those take the inner-panel radius. */
.app .help-i{border-radius:6px;}
.app tr.is-best{border-radius:8px;}

/* Borders, as distinct from rings. The appendix moves the main surfaces to ring
   shadows, but a second tier of components still drew a 1px CSS border: the
   household cards, the panel navigation, the help and insight marks, the plan
   status chip, the two folds, the assumptions bar, the bridge table's wrapper,
   the timeline pills and the net-worth grid. Each keeps its size — only the
   border colour goes transparent — and takes the matching treatment: controls
   and chips the input ring, containers a card ring or the sunk hairline. */
.app .hh-person{border-color:transparent;box-shadow:var(--ring);}
.app .hh-person:hover{border-color:transparent;box-shadow:var(--ring-hover);}
.app .hh-person.on,.app .hh-person.on:hover{border-color:transparent;background:var(--accent-wash);
  box-shadow:0 0 0 1px rgba(146,2,2,.28);}
.app .panel-nav button{border-color:transparent;box-shadow:var(--ring);}
.app .panel-nav button:hover:not(:disabled){border-color:transparent;box-shadow:var(--ring-hover);}
.app .help-i{border-color:transparent;box-shadow:var(--ring);}
.app .help-i:hover{border-color:transparent;box-shadow:var(--ring-hover);}
.app .ins-n{border-color:transparent;box-shadow:var(--ring);}
.app .insight[data-lead] .ins-n{border-color:transparent;}
.app .sc-now{border-color:transparent;box-shadow:inset 0 0 0 1px var(--line-soft);border-radius:6px;}
.app .fold,.app .ref-fold,.app .assume-bar{border-color:transparent;box-shadow:inset 0 0 0 1px var(--line-soft);}
.app .table-scroll,.app .bridge-card .table-scroll,.app .bridge-card .bridge-scroll{border-color:transparent;}
.app .age-bar,.app .age-bar-partner{border-color:transparent;}
/* Timeline pills keep their category tint, as a ring rather than a border, and
   drop the 3px glow — the one place the pack spent colour on decoration. */
.app .tl-pill{border-color:transparent;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--tl-cat,var(--ink-56)) 30%, transparent),0 1px 2px rgba(10,37,64,.05);}
.app .tl-mark:hover .tl-pill,.app .tl-pill:hover{
  box-shadow:0 0 0 1px color-mix(in srgb, var(--tl-cat,var(--ink-56)) 45%, transparent),var(--shadow-lift);}
/* The net-worth grid: the cell is the field and the input inside it is bare, so
   the cell takes the ring, hover and focus. Derived cells are read-only figures —
   a sunk ground and a solid hairline, since tables here use no dashed lines. */
.app .nwp-cell{border-color:transparent;border-radius:var(--radius-input);box-shadow:var(--ring);
  transition:box-shadow .15s var(--ease);}
.app .nwp-cell:hover{border-color:transparent;box-shadow:var(--ring-hover);}
.app .nwp-cell:focus-within{border-color:transparent;box-shadow:var(--ring-focus);}
.app .nwp-cell.is-derived{border-style:solid;border-color:transparent;background:var(--surface-sunk);
  box-shadow:inset 0 0 0 1px var(--line-soft);}
.app .nwp-cell input:focus-visible{outline:none;}
/* Optional cost cells stay quieter through their muted figures, not a see-through
   field: a field is white here. */
.app .nwp-cell.is-cost{background:#fff;}

/* The capital gains amount and the student loan year and balance sit in a
   .cg-unit wrapper, and the brief rings both the wrapper and the input inside
   it, which draws two outlines. The wrapper carries the ring, hover and focus,
   as .num-input does. */
.app .cg-unit input,.app .cg-unit input:focus{box-shadow:none;}
.app .cg-unit:hover{box-shadow:var(--ring-hover);}
.app .cg-unit:focus-within{box-shadow:var(--ring-focus);}

/* The budget table's amount fields have their own, more specific focus rule
   (a 2px wash), and the appendix gives the years-it-lasts fields a ring but no
   hover or focus. Both now match every other field. */
.app .bgt-table td.c-amt .num-input:focus-within{box-shadow:var(--ring-focus);}
.app .bg-yrs:hover{box-shadow:var(--ring-hover);}
.app .bg-yrs:focus-within{box-shadow:var(--ring-focus);}

/* The timeline cluster — the chip milestones collapse into on a narrow screen.
   A card chip at 14px with a border becomes the ring card at the system radius,
   and its open state drops the dashed border for the sunk hairline. Its category
   dots were still reading the retired --cat token, so every one fell back to the
   accent whatever its category; they read --tl-cat, like the pills. */
.app .tl-cluster{border-color:transparent;border-radius:var(--radius-card);box-shadow:var(--shadow-card);}
.app .tl-cluster:hover{border-color:transparent;box-shadow:var(--shadow-lift);}
.app .tl-cluster:focus-visible{outline:none;box-shadow:var(--ring-focus);}
.app .tl-cluster.is-open{border-style:solid;border-color:transparent;box-shadow:inset 0 0 0 1px var(--line-soft);}
.app .tlc-dots i{background:var(--tl-cat,var(--ink-56));}


/* ======================================================================
   Pass 2 — the pages around the tool: the landing and the about page
   (both .lp), and the assumptions page (.doc).

   The token block at the top of this file does most of the work as soon
   as these pages load it: navy ink, the cool ground, 10px cards, 6px
   where the pill token was 999. What follows is the rest — the values
   those pages hardcode past the tokens, and the two things that really
   are theirs: a hero button that has to stay bigger than a product
   button, and one dark band, which gets the same ring grammar in
   reverse. The assumptions page needs nothing but the tokens.
   ====================================================================== */

/* Figures in the UI face here too. The tool stopped setting numbers in
   mono this pass; £5m in the hero and £5m in the projection have to be
   the same shape, or the landing page is advertising a different tool. */
.lp,.doc{--mono:var(--sans);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* Cards: the ring, not a 1px border and a 16px corner. */
.lp .lp-shot{border:none;border-radius:var(--radius-card);box-shadow:var(--shadow-lift);}
.lp .spec,.lp .ab-ledger,.lp .ab-next{border:none;border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);}
.lp .lp-badge{border:none;box-shadow:var(--ring);}
.lp .ab-stamp{border:none;}
.lp .hs-band{background:var(--surface-sunk);border-top-color:var(--line-soft);}

/* Buttons keep the tool's geometry at the landing page's size: a hero
   call to action set in a 12.5px product button reads as a form control.
   The lift on hover goes everywhere — Stripe's buttons darken, they
   don't jump, and the tool's Save button was still jumping. */
.lp .btn{font-size:var(--fs-lead);font-weight:600;padding:13px 24px;border-radius:8px;}
.btn:hover,.btn:active{transform:none;}

/* The one dark band on these pages. Same grammar as every other field —
   ring at rest, brighter ring on hover, a full ring on focus — drawn in
   white because the ground is near-black. */
.lp .signup-panel{border-radius:0;box-shadow:none;}
.lp .signup-panel .btn{box-shadow:0 1px 2px rgba(10,37,64,.3);}
.lp .signup-panel .btn:hover{background:#fff;color:#0B0E14;box-shadow:0 2px 6px rgba(10,37,64,.36);}
.lp .signup-panel .signup-form input[type=email],
.lp .signup-panel .mf input,.lp .signup-panel .mf select,.lp .signup-panel .mf textarea{
  background:rgba(255,255,255,.06);color:#fff;border:none;border-radius:var(--radius-input);
  box-shadow:0 0 0 1px rgba(255,255,255,.18);transition:box-shadow .15s var(--ease);}
.lp .signup-panel .signup-form input[type=email]:hover,.lp .signup-panel .mf input:hover,
.lp .signup-panel .mf select:hover,.lp .signup-panel .mf textarea:hover{
  box-shadow:0 0 0 1px rgba(255,255,255,.34);}
.lp .signup-panel .signup-form input[type=email]:focus,.lp .signup-panel .mf input:focus,
.lp .signup-panel .mf select:focus,.lp .signup-panel .mf textarea:focus{
  outline:none;box-shadow:0 0 0 1px #fff,0 0 0 4px rgba(255,255,255,.14);}
.lp .signup-panel .more{border-top-color:rgba(255,255,255,.14);}
.lp .signup-panel .mf>span{font-weight:500;}
.lp .signup-panel .more-head b{font-weight:600;}

/* Two weights, as in the tool. The reading pages keep more air between
   sections than a product screen, so the rhythm lands between the two. */
.lp .section-divider{margin:56px 0 26px;padding-top:32px;}
.lp .section-num{color:var(--ink-56);font-weight:500;}
.lp .faq-q,.lp .ab-item b,.lp .nav-cta,.lp .more-head b{font-weight:600;}
.lp footer p{font-size:12.5px;}
.lp .faq-row summary:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:6px;}

/* The hero band is the argument the page makes, and its three segments
   are the only data colours on it. --cat-isa is navy in the tool now —
   as the accent it was filling half the Quick tier — but navy here would
   put "growth on both" a shade away from "what you have today", so the
   band names its own three steps and keeps the accent for the segment
   the whole page is about. */
.lp .hs-bar .k-now,.lp .hs-key .k-now{background:var(--cat-equity);}
.lp .hs-bar .k-add,.lp .hs-key .k-add{background:var(--cat-pension);}
.lp .hs-bar .k-grow,.lp .hs-key .k-grow{background:var(--accent);}

/* styles.css ends with a design-pack block that fills every text input and
   select with the sunk grey at 10px, in !important. On the dark band that
   put four light-grey fields among the dark ones, so these have to answer
   in kind — the same exception the tool's fields needed. */
.lp .signup-panel .mf input,.lp .signup-panel .mf select{
  background:rgba(255,255,255,.06) !important;border-color:transparent !important;
  border-radius:var(--radius-input) !important;}

/* Pre-existing, and only visible once the second step opens: the heading
   is set in --ink-87, which is ink on a white card and all but invisible
   on the dark band. */
.lp .signup-panel .more-head b{color:#fff;}
/* Same rule, same band: the line under it is --ink-56, which measures
   3.1:1 against #0B0E14. */
.lp .signup-panel .more-head span{color:rgba(255,255,255,.62);}
/* Keyboard focus on the band is white too — the accent ring is drawn for
   a light ground and reads as an error on this one. */
.lp .signup-panel .btn:focus-visible,.lp .signup-panel .more-skip:focus-visible{
  outline:none;box-shadow:0 0 0 1px #0B0E14,0 0 0 4px rgba(255,255,255,.55);}


/* ======================================================================
   Mobile.

   This file loads after both the others, so an unconditional rule here
   beats a max-width rule there: a media query adds no specificity at
   all. Seven components were being handed their desktop metrics back on
   a phone — the insight grid worst of all, which kept its 140px rail
   against 67px of text on a 375px screen. Each is restated here at the
   size the mobile design asked for, in this file's own values.

   test/mobile.test.mjs checks this file for the same class of collision
   now, the way it already checked styles-mono.css.
   ====================================================================== */
@media (max-width:900px){
  .sidenav{gap:8px;padding:9px 10px 7px;}
  .sn-list{gap:2px;}
  .sn-list .tab{flex-direction:column;gap:3px;padding:7px 1px 6px;
    font-size:var(--fs-micro);font-weight:600;border-radius:6px;}
  /* Pre-existing, and older than this file: the type-scale block sets
     .app .sn-list .tab, which outranks every .sn-list .tab rule — the
     mobile nav has been asking for 11.5px and getting 13.5px. */
  .app .sn-list .tab{font-size:var(--fs-micro);}
  .sn-ico,.sn-ico svg{width:17px;height:17px;}
  .topbar{padding:16px 0 4px;}
  .topbar-title{font-size:var(--fs-figure);}
  .sc-btn,.utilbar .sc-btn{padding:8px 11px;}
}
@media (max-width:820px){
  .ledger-card,.why-panel,.bridge-card{padding:20px 14px;}
}
@media (max-width:640px){
  .insight{grid-template-columns:1fr;gap:12px;}
  .cg-opts td{padding:3px 0;}
}
@media (max-width:560px){
  .kpi{padding:13px 14px;}
}

/* Two controls the first pass missed, both drawing an edge twice: the
   "+ add a partner" tab carried a dashed hairline and a ring at once, and
   the ledger chevron a hairline inside a row that already rules itself.
   The other add controls are ringed and plain; these match them now. */
.app .p-tab.add{border-color:transparent;border-style:solid;color:var(--ink-60);}
.app .p-tab.add:hover{color:var(--accent);box-shadow:var(--ring-hover);}
.app .ledger-row .chev{border-color:transparent;}


/* ======================================================================
   The reading pages — /assumptions and /privacy.

   This block lived inline in assumptions.html, which was fine while there
   was one of them. There are two now, so it lives here instead: one
   measure, no chrome, the same ground and type as everything else. The
   headings and lists are new — the assumptions page had been letting the
   browser size its own h2.
   ====================================================================== */
.doc{max-width:760px;margin:0 auto;padding:56px 32px 110px;}
.doc-back{display:inline-flex;align-items:center;gap:7px;font-size:13px;
  color:var(--ink-56);text-decoration:none;margin-bottom:40px;}
.doc-back:hover{color:var(--accent);}
.doc h1{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:38px;
  letter-spacing:-0.04em;line-height:1.08;color:var(--ink-87);margin:0 0 14px;}
.doc-lede{font-size:16px;line-height:1.6;color:var(--ink-60);margin:0 0 8px;
  padding-bottom:30px;border-bottom:1px solid var(--line);}
.doc-body{padding-top:8px;}
.doc-body p{font-size:15px;line-height:1.72;color:var(--ink-87);
  margin:22px 0;text-wrap:pretty;}
.doc-body p b,.doc-body li b{color:var(--ink-87);font-weight:600;}
.doc-body h2{font-family:'Instrument Sans',sans-serif;font-size:19px;font-weight:600;
  letter-spacing:-0.02em;color:var(--ink-87);margin:42px 0 0;}
.doc-body h2+p{margin-top:10px;}
.doc-body ul{margin:18px 0;padding:0;list-style:none;display:grid;gap:9px;}
.doc-body li{font-size:15px;line-height:1.6;color:var(--ink-87);
  padding-left:16px;position:relative;text-wrap:pretty;}
.doc-body li::before{content:'';position:absolute;left:0;top:.66em;width:6px;height:1.5px;
  background:var(--ink-56);opacity:.6;}
.doc-body a{color:var(--accent);}
.doc-body a b{color:inherit;}
.doc-note{font-size:13.5px;line-height:1.6;color:var(--ink-56);
  background:var(--surface);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:16px 18px;margin:26px 0;}
.doc-foot{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-56);}
.doc-foot a{color:var(--accent);}
@media (max-width:600px){.doc{padding:36px 20px 80px;}.doc h1{font-size:30px;}}

/* The consent line under the email field, on the dark band. */
.lp .signup-panel .signup-priv{font-size:12.5px;line-height:1.5;
  color:rgba(255,255,255,.62);margin:12px 0 0;max-width:64ch;}
.lp .signup-panel .signup-priv a{color:#fff;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;}
.app .signup-priv{font-size:var(--fs-small);color:var(--ink-56);margin:10px 0 0;}


/* ======================================================================
   Print — and so save-as-PDF, which is the same thing to a browser.

   The tool's own advice is to take the figures to an accountant, so the
   printed page has to be something you could hand one: the tab you are
   on, the disclaimer and the not-modelled list that belong with it, and
   the date — the projection moves daily, so an undated copy is a figure
   without its assumptions. No sidebar, and none of the controls that do
   nothing on paper.

   Edges are drawn differently here. On screen every card and field is
   ringed with a box-shadow, and a print dialog drops shadows unless
   "background graphics" is ticked — which would leave the whole page
   edgeless. Cards get a real hairline instead, and fields an outline,
   because an outline is never treated as a background.
   ====================================================================== */
@media print{
  @page{margin:14mm 12mm;}
  html,body,.app,.appmain{background:#fff !important;}
  *{print-color-adjust:exact;-webkit-print-color-adjust:exact;}

  .sidenav,.utilbar,.signup-panel,.panel-nav,.sc-menu,.qe-prompt,.quick-add,.kb-only,
  .btn,.btn-ghost,.btn-ghost-sm,.add-source,.alloc-add,.at-fix,.qa-btn,.p-tab.add,
  .br-chev,.rf-open,body>[role=alert]{display:none !important;}

  .app{display:block !important;}
  .appmain.wrap{max-width:none;padding:0;margin:0;}
  .topbar{padding:0 0 8px;}
  .kpi-strip{position:static !important;margin:6px 0 16px;}

  /* The header: set by tool.js on beforeprint. */
  body::before{content:"Aftertax · " attr(data-printed);display:block;
    font:500 10px/1.4 var(--sans);color:#596171;margin:0 0 10px;}

  .panel,.ledger-card,.why-panel,.bridge-card,.hh-strip,.nw-summary,.timeline-wrap,
  .event-card,.fact,.facts-card,.kpi-strip,.you-block,.insight[data-lead],.gap-stamp,
  .qe-out,.ins-strip>*,.tl-intro,.tl-cluster,.networth-block,.drill,.scen-note{
    box-shadow:none !important;border:1px solid #D5DBE3 !important;}

  .app .num-input,.app .cg-unit,.app .bg-yrs,.app .nwp-cell,.app .hh-person,
  .app :is(input[type=text],input[type=number],input[type=date],input[type=email],select,textarea):not(.num-input *):not(.cg-unit *):not(.bg-yrs *):not(.nwp-cell *){
    box-shadow:none !important;outline:1px solid #D5DBE3 !important;outline-offset:-1px;}
  .seg,.mode-btns,.tier-seg{box-shadow:none !important;outline:1px solid #E3E8EE;outline-offset:-1px;}

  /* Keep a card, a chart or an insight on one sheet rather than splitting
     it across two; let headings stay with what follows them. */
  .panel,.ledger-card,.why-panel,.bridge-card,.insight,.kpi-strip,.you-block,
  .event-card,.fact,.chart-frame,.hh-strip,.nw-summary,svg,tr{break-inside:avoid;}
  .section-divider,h2,h3,.card-h{break-after:avoid;}

  a{color:inherit !important;text-decoration:none !important;}
  footer{break-inside:avoid;margin-top:18px;padding-top:12px;border-top:1px solid #D5DBE3;}
}


/* ======================================================================
   Phones: the two tables that were wider than the screen.

   The net-worth grid is a label and then two columns per person, so a
   couple needs five columns and a 375px screen shows one and a half: the
   first person's figures cut off mid-number and the second person off to
   the right. The budget table is five columns in a 279px window. Both
   become one card per line here — the line's name on top, then each
   figure with its own heading — which is the only shape that fits every
   number on screen at once without a sideways scroll.
   ====================================================================== */
/* Each person's value and cost sit in one wrapper, so a phone can put them
   on a line of their own. Everywhere wider the wrapper steps out of the way
   and the two cells stay direct items of the row's subgrid, one per column. */
.nwp-pair{display:contents;}

@media (max-width:640px){
  /* Net worth: the label, then one line per person — name, value, cost. */
  /* The id matches the one on the max-content floor in styles.css, which is
     what made the grid scroll sideways, so this can undo it. */
  .app .nwp-grid{display:block;--nwp-cols:minmax(0,1fr) minmax(0,1fr);}
  .app #nwPersonal .nwp-grid{min-width:0;}
  .app .nwp-grid.nwp-multi{--nwp-cols:minmax(3.5em,4.5em) minmax(0,1fr) minmax(0,1fr);}
  .app .nwp-row{display:grid;grid-template-columns:1fr;gap:6px;margin:0;
    padding:12px 0;border-bottom:1px solid var(--line-soft);}
  .app .nwp-row:last-child{border-bottom:none;}
  .app .nwp-row:hover{background:none;}
  .app .nwp-names{display:none;}
  .app .nwp-subs{grid-template-columns:var(--nwp-cols);align-items:center;gap:8px;
    padding:0 0 2px;border-bottom:none;position:relative;}
  .app .nwp-subs .nwp-sub:nth-child(n+4){display:none;}
  .app .nwp-grid:not(.nwp-multi) .nwp-subhelp{position:absolute;right:0;top:-3px;}
  .app .nwp-grid:not(.nwp-multi) .nwp-subs .nwp-sub.is-cost{padding-right:26px;}
  .app .nwp-pair{display:grid;grid-template-columns:var(--nwp-cols);align-items:center;gap:8px;}
  .app .nwp-multi .nwp-pair::before{content:attr(data-who);font-size:var(--fs-small);
    font-weight:500;color:var(--ink-60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .app .nwp-cell{min-width:0;}
  .app .nwp-cell input{min-width:0;}

  /* Budget: the line on top, today's figure and how long it lasts under it,
     then what it costs at each age asked for. A line that has ended by an
     age says nothing there rather than showing an empty box. */
  .app .bgt-scroll{overflow:visible;box-shadow:none;border-radius:0;}
  .app .bgt-table,.app .bgt-table thead,.app .bgt-table tbody,.app .bgt-table tfoot{
    display:block;width:100%;min-width:0;}
  .app .bgt-table thead tr{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;
    padding:0 0 4px;border-bottom:1px solid var(--line-soft);}
  .app .bgt-table thead th.c-lab,.app .bgt-table thead th.c-amt,.app .bgt-table thead th.c-yrs{display:none;}
  .app .bgt-table thead th.c-age{display:block;padding:2px 0;border:none;}
  .app .bgt-table tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;align-items:end;
    padding:12px 0;border-bottom:1px solid var(--line-soft);}
  .app .bgt-table td{display:block;width:auto;min-width:0;padding:0;border:none;text-align:left;}
  .app .bgt-table td.c-lab{grid-column:1/-1;min-width:0;}
  .app .bgt-table td[data-at]::before{content:attr(data-at);display:block;
    font-family:var(--sans);font-size:var(--fs-micro);font-weight:500;color:var(--ink-56);
    margin-bottom:4px;white-space:nowrap;}
  .app .bgt-table td.c-age.is-ended,.app .bgt-table td.c-yrs:empty{display:none;}
  .app .bgt-table td.c-yrs .bg-yrs{display:flex;}
  .app .bgt-table tfoot tr.rr-net{border-top:2px solid var(--accent);}
  .app .bgt-table tfoot td{border-top:none !important;}
  .app .bgt-table .rr-note td{grid-column:1/-1;}
}


/* ======================================================================
   Projection: the two cards that broke on the director example.

   "What the extraction decisions are worth" set each figure beside its
   title in a wrapping flex row. A short title kept the figure on the
   right; a long one — "Money routed to a pension instead of extracted" —
   pushed it onto a line of its own, where it sat mid-card with its
   caption left-aligned under it. With three levers, three different
   positions. Now the figure has its own right-hand column: every figure
   lines up at the same edge, its caption right-aligned beneath it, and a
   long title wraps in its own column instead of evicting the number.
   ====================================================================== */
/* auto, capped by the caption's max-width, so the column is only as wide as
   its longest caption line and the title keeps most of the card. */
.app .lev-head{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;gap:4px 18px;}
.app .lev-head b{font-weight:600;line-height:1.4;}
.app .lev-fig{text-align:right;font-weight:600;font-size:var(--fs-h3);line-height:1.3;
  color:var(--accent-deep);white-space:nowrap;}
.app .lev-fig em{white-space:normal;line-height:1.4;margin-top:2px;max-width:8.5rem;margin-left:auto;}
.app .lev-rank{font-weight:500;line-height:1.4;}
@media (max-width:560px){
  .app .lev-head{grid-template-columns:1fr;}
  .app .lev-fig{text-align:left;}
  .app .lev-fig em{margin-left:0;max-width:none;}
}

/* The working lines under a pot ("of which gain, if you sold", "tax on that
   sale") are .ledger-row.sub — and .sub is also the page-subtitle class, so
   they inherited its 20px bottom margin. That opened a gap under each line
   and cut the thin connector beside them into separate dashes. The margin
   goes, and the connector runs the full height of the row so consecutive
   working lines draw one continuous rule. */
.app .ledger-card .ledger-row.sub{margin:0;max-width:none;position:relative;}
.app .ledger-card .ledger-row.sub .k{position:static;}
.app .ledger-card .ledger-row.sub .k::before{top:0;bottom:0;}


/* ======================================================================
   The two rates under the take-home figure. Same grammar as the strip's
   other stats — a small label, a figure on weight, a quieter line under
   it — set left under the headline it qualifies, with a hairline between
   so they read as a footnote to the number rather than a rival to it.
   ====================================================================== */
.app .hh-main{min-width:min(100%,280px);}
.app .hh-rates{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line-soft);}
.app .hh-rate{display:flex;flex-direction:column;min-width:0;}
.app .hh-rate>span{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-micro);
  font-weight:500;color:var(--ink-56);}
.app .hh-rate b{font-size:var(--fs-h3);font-weight:600;color:var(--ink-87);line-height:1.35;
  margin-top:2px;}
.app .hh-rate em{font-style:normal;font-size:var(--fs-micro);color:var(--ink-56);line-height:1.4;}


/* ======================================================================
   The data-request form on /privacy — the same ring grammar as the
   tool's fields. The design pack's !important grey fill reaches every
   input on the site, so it is answered in kind, scoped to this form.
   ====================================================================== */
.doc .dr-form{display:grid;gap:14px;margin:18px 0 8px;padding:18px 20px;background:var(--surface);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);}
.doc .dr-form label{display:grid;gap:6px;font-size:13.5px;font-weight:500;color:var(--ink-87);}
.doc .dr-form .dr-opt{font-weight:400;color:var(--ink-56);}
.doc .dr-form input,.doc .dr-form select,.doc .dr-form textarea{
  font:inherit;font-size:14px;font-weight:400;color:var(--ink-87);padding:9px 11px;
  background:#fff !important;border:1px solid transparent !important;
  border-radius:var(--radius-input) !important;box-shadow:var(--ring);outline:none;
  transition:box-shadow .15s var(--ease);width:100%;box-sizing:border-box;}
.doc .dr-form input:hover,.doc .dr-form select:hover,.doc .dr-form textarea:hover{box-shadow:var(--ring-hover);}
.doc .dr-form input:focus,.doc .dr-form select:focus,.doc .dr-form textarea:focus{box-shadow:var(--ring-focus);}
.doc .dr-form textarea{resize:vertical;min-height:88px;line-height:1.5;}
.doc .dr-form .dr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.doc .dr-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.doc .dr-form .btn{font-size:14px;font-weight:600;padding:10px 18px;border-radius:8px;}
.doc .dr-status{font-size:13px;color:var(--ink-60);}

/* The salary split's reason, as parts rather than a paragraph: the answer in
   one line, the tax movements in the drill-down's rows, and a short list of
   why. Shared by the Income tab and the extraction card. */
.why-lead{margin:0 0 10px;font-weight:600;color:var(--ink-87);line-height:1.5;}
.why-drill{margin:0;}
.why-text .drill-row b{color:var(--ink-87);}
.why-drill .why-net{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:8px;}
.why-drill .why-net span,.why-drill .why-net b{color:var(--ink-87);font-weight:600;}
.why-reasons{margin-top:14px;padding-top:12px;}
.why-text p.why-flat,.lev-body p.why-flat{margin:10px 0 0;font-size:var(--fs-small);}
/* Inside the extraction card the list follows the row heading directly. */
.lev-body>.why-reasons:first-child{margin-top:6px;padding-top:0;border-top:0;}

/* The household example beside the director's: a solid button in the page's
   navy, so the two examples read as a pair without being the same button. */
.btn.btn-ink{background:var(--ink-87);color:#fff;
  box-shadow:0 0 0 1px var(--ink-87),0 1px 2px rgba(10,37,64,.18),inset 0 1px 0 rgba(255,255,255,.12);}
.btn.btn-ink:hover{background:#06192C;color:#fff;
  box-shadow:0 0 0 1px #06192C,0 2px 4px rgba(10,37,64,.2),inset 0 1px 0 rgba(255,255,255,.12);}
/* The "Early build" line under the wordmark is gone; the brand keeps the gap
   it used to leave above the tabs. Desktop only: below 900px the sidebar is a
   top bar and never showed the line. */
@media (min-width:901px){ .sidenav .sn-brand{margin-bottom:26px;} }

/* An observation's working, one click away. */
.ins-more summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;
  font-size:var(--fs-small);font-weight:600;color:var(--accent-deep);width:max-content;}
.ins-more summary::-webkit-details-marker{display:none;}
.ins-more summary::after{content:'›';display:inline-block;transition:transform .15s var(--ease);}
.ins-more[open] summary::after{transform:rotate(90deg);}
.ins-more summary:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:4px;}
.ins-more p{margin-top:6px;}
/* Keep "Why" under the headline: the body column is a grid, and in the taller
   lead cards its two rows stretched to fill the height. */
.ins-body{align-content:start;}

/* The three hero buttons at one width, side by side, stacking into a column
   once there is no longer room for three. */
.lp-hero .hero-ctas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:780px;}
.lp-hero .hero-ctas .btn{justify-content:center;padding-left:16px;padding-right:16px;}
@media (max-width:700px){ .lp-hero .hero-ctas{grid-template-columns:1fr;} }