/* retirementcalculator.co.nz. Same system as payecalculator, taxcalculator and kiwisavercalculator (Jobtracker design system)
   in its own colour: deep indigo-blue, calm and distinct from navy (PAYE), plum (tax), teal (KiwiSaver), ochre (CGT), slate green and brick.
   Contrast (WCAG 2.x): indigo #2B3A67 with white text 11.03:1; indigo text on white 11.03:1; indigo on soft panel #EEF0F7 9.69:1;
   hover #1F2B4F with white 13.85:1; band text #D5DBEC on indigo 7.97:1; small print #B4BEDA on indigo 5.95:1; footer gold #E3B04B on indigo 5.56:1
   (used only on indigo, never as text on white); muted #5A6169 on #EEF0F7 5.51:1. Chart lines: blue #2F7FB5 4.35:1, ochre #A8721C 4.13:1,
   brick #8A3B2E 7.65:1, teal #2E6E73 5.84:1, poor-market edge #7C88AE 3.51:1, Winter Energy fill #5F7AB0 4.23:1 (all against white).
   House rule: no em dashes or en dashes. */
@font-face{font-family:Bitter;src:url(/fonts/bitter-700-latin.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:Bitter;src:url(/fonts/bitter-700-latin-ext.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bitter Fallback";src:local("Georgia");size-adjust:89.5%;font-weight:700}
:root{
  --paper:#FFFFFF; --ink:#201e1d; --muted:#5A6169; --line:#E3E5E8; --input-line:#8B94A0;
  --accent:#2B3A67; --accent-hover:#1F2B4F; --soft:#EEF0F7; --soft-line:#D3D8E8;
  --band:#2B3A67; --band-text:#D5DBEC; --band-fine:#B4BEDA;
  --chip:#F1F2F4; --good-bg:#F0F7F2; --good-line:#CDE3D3; --good-ink:#1E5631;
  /* Money leaving: not the danger red. PAYE is a fact, not an error. */
  --out:#9A3A28; --out-soft:#FBF5F3; --out-line:#EBD9D4;
  --ks:#2F5DA8; --sl:#6A45A3; --acc:#8B5A0B; --take:#1E6B3A;
  --warn:#8F5F08; --warn-soft:#FAF4E6; --warn-line:#E8DCC0;
  --display:Bitter,"Bitter Fallback",Georgia,"Times New Roman",serif;
  --frame:min(1180px, calc(100% - 32px)); --radius:10px;
  --shadow:0 1px 2px rgba(32,30,29,.05),0 8px 24px rgba(32,30,29,.07);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:1.15;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3.1rem)}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{width:var(--frame);margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:50;background:#fff;padding:8px 12px}
.muted{color:var(--muted)}
.eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:62ch}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 1.3rem/1 var(--display);letter-spacing:-.02em;margin-right:auto}
.brand svg{width:34px;height:34px;flex:none}
.brand small{font:600 .95rem/1 system-ui,sans-serif;color:var(--muted);letter-spacing:0}
.nav{display:flex;gap:4px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:.98rem;font-weight:500;padding:8px 12px;border-radius:8px}
.nav a:hover,.nav a[aria-current=page]{background:var(--soft);color:var(--accent)}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px}
.menu summary::-webkit-details-marker{display:none}
.bars{display:grid;gap:5px;width:20px}.bars i{display:block;height:2px;background:var(--ink);border-radius:2px}
.menu-panel{position:fixed;inset:64px 0 0 0;background:var(--paper);padding:12px 16px 32px;display:flex;flex-direction:column;overflow-y:auto;z-index:30}
.menu-panel a{font:700 1.4rem/1.2 var(--display);color:var(--ink);text-decoration:none;padding:16px 4px;border-bottom:1px solid var(--line)}
@media (max-width:860px){.nav{display:none}.menu{display:block}}

/* Buttons and chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff!important;text-decoration:none;font-weight:600;font-size:1rem;padding:12px 20px;border-radius:8px;border:1px solid var(--accent);cursor:pointer}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:#fff;color:var(--accent)!important;border-color:var(--soft-line)}
.btn.ghost:hover{border-color:var(--accent);background:var(--soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border-radius:999px;padding:5px 12px;font-size:.88rem;color:#40454B}

/* Sections */
section{padding:clamp(48px,6vw,80px) 0}
section.tight{padding:clamp(32px,4vw,48px) 0}
.soft{background:var(--soft)}
.band{background:var(--band);color:var(--band-text)}
.band h2,.band h3{color:#fff}
.band a{color:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.section-head h2{margin:0}
.section-head p{margin:0;max-width:56ch}
.crumbs{font-size:.9rem;color:var(--muted);padding-top:18px}
.crumbs a{color:var(--muted)}
.page-head{padding:16px 0 28px}
.page-head .lead{max-width:none;margin:0}
.page-head + section{padding-top:24px}

/* Hero with calculator */
.hero{padding:24px 0 48px;background:linear-gradient(180deg,var(--soft) 0,var(--paper) 520px)}
.hero-top{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.hero-top h1{margin:0;max-width:22ch}
.hero-top .lead{margin:8px 0 0}
.trust{display:flex;flex-wrap:wrap;gap:8px}

/* Calculator layout */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.panel h2{font-size:1.25rem;margin-bottom:14px}
.field{display:grid;gap:6px;margin-bottom:14px}
.field > span,.field legend{font-weight:600;font-size:.95rem}
.field small{color:var(--muted);font-size:.85rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input[type=number],input[type=text],select{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--input-line);border-radius:8px;padding:10px 12px;min-height:46px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,58,103,.18)}
.money{position:relative}.money input{padding-left:28px}.money::before{content:"$";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
fieldset{border:0;margin:0 0 14px;padding:0}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--soft-line);border-radius:999px;cursor:pointer;font-size:.95rem;background:#fff}
.seg input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff}
.seg input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.check{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;margin:4px 0 12px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--accent)}
details.more{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
details.more summary{cursor:pointer;font-weight:600;color:var(--accent);margin-bottom:12px}

/* Results */
.payslip{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.payslip-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--accent);color:#fff;padding:16px 20px}
.payslip-head b{font:700 1.05rem/1 var(--display)}
.payslip-head span{font-size:.9rem;color:var(--band-text)}
.takehome{padding:18px 20px 6px}
.takehome small{display:block;color:var(--muted);font-weight:600;font-size:.9rem}
.takehome strong{display:block;font:700 clamp(2.2rem,5vw,3rem)/1.1 var(--display);color:var(--take);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.split{display:flex;height:14px;border-radius:999px;overflow:hidden;margin:12px 20px 8px;background:var(--chip)}
.split i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 20px 12px;font-size:.85rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lines td{padding:9px 20px;border-top:1px solid var(--line)}
.lines td:last-child{text-align:right;white-space:nowrap}
.lines tr.out td:last-child{color:var(--out)}
.lines tr.total td{font-weight:700;background:var(--good-bg);color:var(--good-ink)}
.lines tr.emp td{color:var(--muted);font-size:.95rem}
.periods{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.95rem;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.periods th,.periods td{padding:9px 12px;text-align:right;border-top:1px solid var(--line)}
.periods th:first-child,.periods td:first-child{text-align:left}
.periods thead th{border-top:0;background:var(--soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.periods tr.total td{font-weight:700;color:var(--good-ink)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tools .btn{font-size:.92rem;padding:9px 14px}
.note{font-size:.88rem;color:var(--muted);margin-top:12px}
.flash{color:var(--good-ink);font-weight:600;font-size:.9rem}

/* Cards and guides */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-decoration:none;color:var(--ink);transition:box-shadow .2s ease,transform .2s ease}
a.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);color:var(--ink)}
.card h3{margin-bottom:6px}
.card p{color:var(--muted);margin:0 0 12px;font-size:.96rem}
.card .go{margin-top:auto;font-weight:600;color:var(--accent)}
.figure{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{font-size:.9rem;color:var(--muted);margin-top:10px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.prose{max-width:72ch}
.prose h2{margin-top:1.6em;font-size:1.5rem}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin-bottom:.4em}
.guide{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.aside{position:sticky;top:84px;display:grid;gap:16px}
.box{background:var(--soft);border:1px solid var(--soft-line);border-radius:var(--radius);padding:18px}
.box h3{font-size:1.05rem;margin-bottom:8px}
.box p,.box li{font-size:.95rem}
.callout{border-left:4px solid var(--accent);background:var(--soft);padding:14px 18px;border-radius:0 8px 8px 0;margin:18px 0}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;margin:12px 0 18px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{background:var(--soft);color:var(--accent);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.src{font-size:.85rem;color:var(--muted)}

/* Ads: never above the result, clearly labelled */
.ad{margin:28px 0;padding:10px;border:1px dashed var(--line);border-radius:8px;text-align:center;min-height:120px}
.ad small{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* Footer */
.site-foot{background:var(--band);color:var(--band-text);padding:48px 0 32px;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.site-foot h2{font:700 .8rem/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:4px 0 12px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li a{display:block;padding:6px 0;color:var(--band-text);text-decoration:none}
.site-foot li a:hover{color:#fff}
.site-foot .brand{color:#fff}.site-foot .brand small{color:var(--band-fine)}
.fine{border-top:1px solid rgba(255,255,255,.15);margin-top:32px;padding-top:18px;font-size:.85rem;color:var(--band-fine);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fine a{color:var(--band-text)}

/* Responsive */
@media (max-width:980px){.calc{grid-template-columns:1fr}.guide{grid-template-columns:1fr}.aside{position:static}}
@media (max-width:760px){.split2{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr}.foot-grid > div:first-child{grid-column:1/-1}.site-foot li a{padding:11px 0}}
@media (max-width:600px){
  body{font-size:16px}
  .hero{padding:14px 0 32px}
  .panel{padding:16px}
  .row2{grid-template-columns:1fr}
  .periods{font-size:.85rem}.periods th,.periods td{padding:8px 8px}
  .lines td{padding:8px 14px}
  .tools .btn{flex:1 1 auto}
}

/* Print: the result as a payslip */
@media print{
  .site-head,.site-foot,.ad,.tools,form,.no-print,.crumbs{display:none!important}
  .calc{grid-template-columns:1fr}
  .payslip,.periods{box-shadow:none;break-inside:avoid}
  body{font-size:12pt}
}

/* Long-form guides (Jobtracker article pattern) */
.byline{font-size:.92rem;color:var(--muted);margin:4px 0 10px}
.inshort{background:var(--soft);border:1px solid var(--soft-line);border-radius:8px;padding:12px 16px;margin:12px 0 0;font-size:.98rem}
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:8px 0 24px}
.toc b{display:block;font-family:var(--display);margin-bottom:6px}
.toc ol{margin:0;padding-left:1.2em}
.toc li{margin:4px 0}
.prose h2[id]{scroll-margin-top:84px}
.sources{border-top:1px solid var(--line);margin-top:36px;padding-top:8px}
.sources h2{font-size:1.2rem}
.sources li{font-size:.95rem;margin-bottom:6px}

/* Full-width text (10 Nov 2026): intros run the full width; long text sits in two columns, not a narrow centred strip */
.lead{max-width:none}
.hero-top{display:block}
.hero-top h1{max-width:none}
.hero-top .trust{margin-top:14px}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;margin-top:8px}
.faq > div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.faq h3{font-size:1.1rem;margin-bottom:8px}
.faq p{margin:0;color:var(--muted)}
.prose.wide{max-width:none;columns:2;column-gap:56px}
.prose.wide > h2:first-child{margin-top:0}
.prose.wide h2,.prose.wide h3{break-after:avoid}
.prose.wide p,.prose.wide li,.prose.wide .callout,.prose.wide table{break-inside:avoid}
@media (max-width:860px){.faq{grid-template-columns:1fr}.prose.wide{columns:1}}
/* Guide articles fill the column up to the sidebar */
.guide .prose{max-width:none}
.guide{grid-template-columns:minmax(0,1fr) 300px;gap:40px}

/* Section intros run the full width they have */
.section-head p{max-width:none;flex:1 1 420px}
/* Section heading, then its intro underneath on the full width */
.section-head{display:block}
.section-head p{margin:10px 0 0;max-width:none}

/* Header logo, language switcher and review banner (as taxcalculator.co.nz) */
.brand img{width:36px;height:36px;flex:none}
.site-foot .brand img{width:30px;height:30px}
.lang{position:relative;margin-left:4px}
.lang summary{list-style:none;cursor:pointer;font-size:.92rem;font-weight:600;padding:8px 12px;border:1px solid var(--line);border-radius:8px;white-space:nowrap}
.lang summary::-webkit-details-marker{display:none}
.lang div{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;display:grid;min-width:170px;z-index:40}
.lang a{color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:6px}
.lang a:hover,.lang a[aria-current]{background:var(--soft)}
.review{background:var(--warn-soft);border-bottom:1px solid var(--warn-line);color:var(--warn);font-size:.92rem;padding:8px 0}
.periods td .bar{display:inline-block;height:8px;width:calc(var(--w) * .6);max-width:60%;background:var(--accent);opacity:.25;border-radius:4px;margin-right:8px;vertical-align:middle}
@media (max-width:860px){.lang summary{padding:8px 10px}}
.periods td:last-child{white-space:nowrap}


/* ===== retirementcalculator.co.nz additions: answer first, live results, charts, timeline, plans, calm motion ===== */
:root{--ease:cubic-bezier(.22,1,.36,1);--t-med:.5s;--gold:#E3B04B}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.small{font-size:.92rem}
.nav a{padding:8px 9px;font-size:.95rem;white-space:nowrap}
@media (max-width:1100px){.nav{display:none}.menu{display:block}}
.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid > div:first-child{grid-column:1/-1}}
.brand img{width:36px;height:36px;flex:none}
.site-foot .brand img{width:30px;height:30px}
.site-foot h2{color:var(--gold)}
.site-foot li a:hover,.fine a:hover{color:var(--gold)}
/* The site name stays on one line beside the symbol on desktop and tablet */
@media (min-width:601px){.brand span{white-space:nowrap}}

/* The worked answer, in the HTML before any script runs */
.answer{background:#fff;border:1px solid var(--soft-line);border-left:5px solid var(--accent);border-radius:var(--radius);padding:16px 20px;margin:0 0 20px}
.answer p{margin:0 0 .5em}.answer p:last-child{margin:0}
.answer .eyebrow{margin-bottom:6px}

/* Calculator: paired sliders, number boxes, rows of three */
.pair-row{display:grid;grid-template-columns:minmax(0,1fr) 9.5em;gap:12px;align-items:center}
.pair > label{font-weight:600;font-size:.95rem}
.plain,.pctf{display:block;position:relative}
.pctf input{padding-right:30px}.pctf::after{content:"%";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.row2 > *{min-width:0}
input[type=range]{width:100%;accent-color:var(--accent);height:28px;margin:0;cursor:pointer;background:transparent}
input[type=range]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
input[type=date]{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--input-line);padding:10px 12px;min-height:46px;width:100%}
.calc{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}
.calc.wide{grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr)}
.calc > *{min-width:0}
details.more summary{margin-bottom:8px}
details.more[open]{padding-bottom:6px}
.sub-h{font-weight:700;margin:14px 0 4px;font-size:.95rem}
.panel .sub-h{margin-top:6px}

/* Result panels */
.result{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;padding-bottom:4px}
.result > *:not(.result-head):not(.lines){margin-left:20px;margin-right:20px}
.result-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 20px}
.result-head b{font:700 1.15rem/1.2 var(--display)}
.result-head span{font-size:.9rem;color:var(--muted)}
.big{padding-top:16px}
.big strong{display:block;font:700 clamp(2.4rem,5.6vw,3.5rem)/1.05 var(--display);color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.big strong.soft-big{font-size:clamp(1.8rem,4vw,2.4rem)}
.big p{margin:6px 0 10px;color:var(--muted)}
.result .lines{margin:6px 0 10px}
.lines td{padding:8px 20px}
.lines .sw{margin-right:8px}
.callout{padding:12px 16px;margin:12px 0}
.callout.good{background:var(--good-bg);border-color:var(--good-line)}
.callout.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.notice{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:14px}
.btn.small{font-size:.85rem;padding:6px 10px}
.slider{margin:4px 0 14px;padding:12px 14px;border:1px solid #C9CDD2;background:var(--soft)}
.slider label{display:flex;align-items:baseline;gap:8px;font-weight:600}
.slider output{font:700 1.4rem/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.slider small{display:block;color:var(--muted);font-size:.85rem}

/* Charts: size reserved by the box, so nothing shifts when they draw or redraw */
.chart{margin:8px 0 6px}
.chart-box{position:relative;width:100%;aspect-ratio:480/270}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.legend{list-style:none;padding:0;margin:8px 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem;color:var(--ink)}
.legend li{display:inline-flex;align-items:center;gap:7px}
.legend i{width:12px;height:12px;display:inline-block;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.legend i.line{height:4px;width:18px;box-shadow:none}
.legend i.dash{height:4px;width:18px;background:repeating-linear-gradient(90deg,var(--c) 0 6px,transparent 6px 10px);box-shadow:none}
.legend b{font-variant-numeric:tabular-nums}
.sw{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:middle;background:var(--c)}
details.data{margin:12px 0 4px}
details.data summary{cursor:pointer;font-weight:600;color:var(--accent);font-size:.92rem}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;position:relative}
details.data .periods{margin-top:8px;font-size:.85rem}
.periods td,.periods th{white-space:nowrap}
.periods.cmp td,.periods.cmp th{text-align:left;vertical-align:middle}

/* Drawdown strategies side by side */
.strats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;margin-top:10px}
.strat{border-top:2px solid var(--ink);padding-top:10px;min-width:0}
.strat h3{font-size:1.1rem;margin:0 0 4px}
.strat .rule{font-size:.88rem;color:var(--muted);margin:0 0 4px;min-height:3.2em}
.strat .lines td{padding:6px 0;font-size:.92rem}
.strat .verdict{font-size:.92rem;margin:8px 0 0}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;min-height:1.6em}
.badges span{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:2px 7px}
.chart.mini{margin:4px 0}

/* Timeline from now to the end of the plan */
.timeline{margin:12px 0 4px}
.tl-h{font-weight:700;font-size:.95rem;margin:0 0 8px}
.tl-track{position:relative;height:10px;background:var(--chip);margin:0 8px}
.tl-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--soft-line),var(--accent));transform-origin:left;transform:scaleX(1);transition:transform 1.2s var(--ease)}
html.js .timeline:not(.in) .tl-fill{transform:scaleX(0)}
.tl-dot{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:3px solid var(--accent);transition:left var(--t-med) var(--ease)}
.tl-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.88rem;color:var(--muted)}
.tl-list li{display:inline-flex;align-items:center;gap:7px}
.tl-list i{width:12px;height:12px;border-radius:50%;border:3px solid var(--accent);background:#fff;flex:none}
.tl-dot.tl-retire,.tl-list i.tl-retire{border-color:#A8721C}
.tl-dot.tl-nzs1,.tl-list i.tl-nzs1,.tl-dot.tl-nzs2,.tl-list i.tl-nzs2{border-color:#2F7FB5}
.tl-dot.tl-survivor,.tl-list i.tl-survivor{border-color:#8A3B2E}
.tl-dot.tl-downsize,.tl-list i.tl-downsize{border-color:#2E6E73}
.tl-dot.tl-end,.tl-list i.tl-end{background:var(--accent)}

/* Build-time tables */
.tbl.grid th,.tbl.grid td{text-align:right;white-space:nowrap}
.tbl.grid th:first-child,.tbl.grid td:first-child{text-align:left;white-space:normal}
.tbl.grid tbody th{font-weight:600}
.tbl small{display:block;color:var(--muted);font-size:.78rem}
.tbl.tests td{font-size:.88rem}
.tbl.tests tr.fail td{background:var(--out-soft)}
.formula code{display:block;background:var(--soft);border:1px solid var(--soft-line);padding:10px 12px;font-size:.88rem;white-space:normal;overflow-wrap:anywhere}

/* Facts */
.keynums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px;margin:0 0 32px}
.keynums > div{border-top:3px solid var(--ink);padding-top:10px}
.kn-l{font-weight:600;font-size:.92rem;margin:0 0 4px}
.kn-v{font:700 clamp(1.7rem,3.4vw,2.3rem)/1.1 var(--display);color:var(--accent);margin:0 0 4px;font-variant-numeric:tabular-nums}
.facts{padding-left:1.4em;columns:2;column-gap:48px}
.facts li{break-inside:avoid;margin-bottom:18px}
.facts li p{margin:0}
.facts .src{margin-top:4px}
@media (max-width:860px){.facts{columns:1}.keynums{grid-template-columns:1fr 1fr}}

/* How it works: revealed step by step as you scroll */
.explain .steps{list-style:none;padding:0;margin:24px 0 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.explain .steps li{display:flex;flex-direction:column;gap:10px;padding:18px}
.explain .num{font:700 1.8rem/1 var(--display);color:var(--accent)}
.reveal{transition:opacity .6s var(--ease) var(--d,0ms),transform .6s var(--ease) var(--d,0ms)}
html.js .reveal:not(.in){opacity:0;transform:translateY(14px)}
@media (max-width:860px){.explain .steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.explain .steps{grid-template-columns:1fr}}

/* Saved plans */
details.saved{margin:10px 0 4px}
details.saved summary{cursor:pointer;font-weight:600;color:var(--accent);font-size:.95rem}
details.saved .periods{font-size:.88rem}

/* The printed one-page plan */
.print-sheet{display:none}
.print-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px;margin:0 0 10px}
.print-inputs div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted #C9CDD2;padding:2px 0;font-size:10pt}
.print-inputs dt{color:#40454B}.print-inputs dd{margin:0;font-weight:600;text-align:right}

@media (max-width:980px){.calc,.calc.wide{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.strats{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .pair-row{grid-template-columns:minmax(0,1fr) 8em}
  .row3{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .row2{grid-template-columns:1fr 1fr;gap:8px}
  .result > *:not(.result-head):not(.lines){margin-left:14px;margin-right:14px}
  .lines td{padding:8px 14px}
  .seg span{min-height:44px;padding:0 10px}
  .keynums{grid-template-columns:1fr}
  .print-inputs{grid-template-columns:1fr}
}

/* Reduced motion: nothing moves, everything is shown at once */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  html.js .reveal:not(.in),html.js .timeline:not(.in) .tl-fill{opacity:1;transform:none}
}

/* Print: one page with the answer, the breakdown, your inputs and the assumptions */
@media print{
  @page{margin:14mm}
  .site-head,.site-foot,.ad,.tools,form,.no-print,.crumbs,.trust,details.data,details.saved,.timeline,figure[data-c=income],main > section:not(.hero):not(.print-sheet){display:none!important}
  .hero{padding:0}
  .hero-top .lead{display:none}
  .calc,.calc.wide{display:block}
  .result{border:1px solid #000}
  .chart{max-width:70%;break-inside:avoid}
  .print-sheet{display:block!important;padding:8px 0 0}
  .print-sheet h2{font-size:14pt;margin:10px 0 4px}.print-sheet h3{font-size:11pt;margin:8px 0 4px}
  .print-sheet li{font-size:9.5pt}
  body{font-size:10.5pt}
  .big strong{font-size:26pt}
  .strats{grid-template-columns:1fr 1fr}
}

/* ==== Official form look (decided 10 Nov 2026) ====
   Shared by payecalculator, taxcalculator and kiwisavercalculator: appended to the end of each styles.css.
   Edit here, then run: node _build/apply-form-look.mjs
   Flat and square, ruled lines instead of boxes, results set out like an IRD assessment or an annual statement.
   No shadows, no gradients, no pills, no hover lifts, no side stripes. */
:root{--radius:0;--shadow:none;--rule:var(--ink);--hair:#C9CDD2}

/* Header: a plain rule, the current page underlined rather than tinted */
.site-head{border-bottom:2px solid var(--rule)}
.nav a{border-radius:0;padding:8px 10px}
.nav a:hover,.nav a[aria-current=page]{background:none;color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.menu summary,.lang summary,.lang div,.lang a{border-radius:0}
.lang div{box-shadow:none;border-color:var(--rule)}

/* Hero: paper, no wash */
.hero{background:var(--paper)}

/* Trust line: plain text separated by dots, not pills */
.trust,.chips{gap:0}
.chip{background:none;border-radius:0;padding:0;font-size:.9rem;color:var(--muted)}
.chip + .chip::before{content:"·";margin:0 10px;color:var(--hair)}

/* Buttons: square */
.btn{border-radius:0}
.btn.ghost{background:var(--paper);border-color:var(--rule);color:var(--ink)!important}
.btn.ghost:hover{background:var(--paper);text-decoration:underline}

/* Form panel: a ruled section of a form, not a floating card */
.panel{border:1px solid var(--rule);border-top:3px solid var(--rule);border-radius:0;box-shadow:none}
.panel h2{padding-bottom:10px;border-bottom:1px solid var(--hair)}
input[type=number],input[type=text],select{border-radius:0;border-color:var(--input-line)}
input:focus,select:focus{box-shadow:none;outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}

/* Choices: a joined row of square boxes, like tick boxes on a form */
.seg{gap:0}
.seg span{border-radius:0;border-color:var(--input-line);margin-left:-1px;min-height:42px}
.seg label:first-child span{margin-left:0}
.seg input:checked + span{position:relative;z-index:1}
details.more{border-top:1px solid var(--hair)}

/* Result: set out like an assessment. Heading as text over a heavy rule, figures on dotted lines, total under a double rule */
.payslip{border:1px solid var(--rule);border-radius:0;box-shadow:none}
.payslip-head{background:var(--paper);color:var(--ink);border-bottom:3px solid var(--rule);padding:14px 20px}
.payslip-head b{font-size:1.15rem}
.payslip-head span{color:var(--muted)}
.split{border-radius:0;height:12px}
.legend i{border-radius:0}
.lines td{border-top:0;border-bottom:1px dotted var(--hair)}
.lines tr.total td{background:none;color:var(--ink);border-top:3px double var(--rule);border-bottom:0;font-size:1.05rem}
.periods{border:0;border-top:2px solid var(--rule);border-radius:0;background:var(--paper)}
.periods thead th{background:none;color:var(--ink);text-transform:none;letter-spacing:0;font-size:.85rem;border-bottom:1px solid var(--rule)}
.periods td{border-top:1px dotted var(--hair)}
.periods td .bar{border-radius:0;opacity:.35}

/* Cards: ruled entries in a grid, no boxes, no lift */
.card{border:0;border-top:2px solid var(--rule);border-radius:0;padding:14px 0 0;background:none;transition:none}
a.card:hover{box-shadow:none;transform:none}
a.card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.cards{gap:28px 32px}
.figure{border:1px solid var(--hair);border-radius:0}

/* Notes and asides: square boxes with a hairline, no stripe */
.box,.inshort,.toc{border-radius:0;border-color:var(--hair);background:var(--paper)}
.box{border-top:2px solid var(--rule)}
.callout{border:1px solid var(--hair);border-left:1px solid var(--hair);border-radius:0;background:var(--soft)}
.tbl thead th{background:none;color:var(--ink);text-transform:none;letter-spacing:0;font-size:.88rem;border-bottom:2px solid var(--rule)}

/* FAQ: plain question and answer under a rule */
.faq{gap:8px 48px}
.faq > div{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:16px 0 12px}
.faq p{color:var(--ink)}

/* Sections: a rule between them rather than tinted bands */
.soft{background:var(--paper);border-top:1px solid var(--hair)}
.review{border-radius:0}
.ad{border-radius:0}
:focus-visible{border-radius:0}

/* KiwiSaver parts (harmless on the other sites, which do not use these classes) */
.answer{border:0;border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);border-left:0;box-shadow:none;border-radius:0;padding:14px 0}
.result{border:1px solid var(--rule);border-radius:0;box-shadow:none}
.result-head{background:var(--paper);color:var(--ink);border-bottom:3px solid var(--rule)}
.stmt{border-radius:0;border-color:var(--hair);background:var(--paper);border-top:2px solid var(--rule)}
.status{border:1px solid var(--warn-line);border-left:1px solid var(--warn-line);border-top:3px solid var(--warn);border-radius:0}
.party{border:0;border-top:2px solid var(--rule);border-radius:0;padding:14px 0 0;background:none}
.election-card{border-left:0;border-top:3px solid var(--rule)}
.explain .steps li{border:0;border-top:2px solid var(--rule);border-radius:0;padding:14px 0 0;background:none}
.formula code{border-radius:0;background:var(--paper);border-color:var(--hair)}
.tl-track{border-radius:0;height:8px}
.tl-fill{border-radius:0;background:var(--accent)}
.legend i,.sw{border-radius:0}

/* Choice rows fill the width evenly, so a wrapped choice never sits alone and short */
.seg label{flex:1 1 auto}
.seg span{width:100%;justify-content:center;margin-top:-1px}
/* Step bars stay small so the last column never runs off the edge */
.periods td .bar{width:calc(var(--w) * .35);max-width:35%}

/* No stacking where there is room (James's rule for every site, 12 Nov 2026):
   headings fill the width before wrapping, rather than splitting into two balanced short lines */
h1,h2,h3{text-wrap:wrap}
.hero-top h1,.page-head h1,.hero h1{max-width:none}
/* Tighter vertical rhythm between sections (was up to 80px top and bottom) */
section{padding:clamp(22px,2.6vw,32px) 0}
section.tight{padding:clamp(16px,2vw,24px) 0}
.hero{padding-bottom:clamp(20px,2.5vw,28px)}
section .wrap > :last-child,section .scroll:last-child > .tbl:last-child{margin-bottom:0}
/* Heading block to content: one gap, not two */
.section-head{margin-bottom:16px}
.section-head + *{margin-top:0}
/* Wide tables inside guides scroll inside their own box on phones, never the whole page */
@media (max-width:600px){.prose table{display:block;overflow-x:auto;max-width:100%}}