/* capitalgainstax.co.nz. Same system as taxcalculator.co.nz (Jobtracker design system) in its own colour, deep ochre.
   Contrast (WCAG): ochre #7A4B12 on white 7.4:1 and on the soft tint #F7EFE3 6.5:1; band text #F0DFC4 on the ochre band 5.6:1;
   fine print #E3C9A2 on the ochre band 4.6:1; white on ochre 7.4:1. */
@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:#7A4B12; --accent-hover:#5E3A0E; --soft:#F7EFE3; --soft-line:#E8D6BC;
  --band:#7A4B12; --band-text:#F0DFC4; --band-fine:#E3C9A2;
  --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(122,75,18,.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}

/* Shared with 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}


/* capitalgainstax.co.nz additions */
.js-only{display:none!important}
.js .js-only{display:inline-flex!important}
.takehome strong.take{color:var(--take)}.takehome strong.out{color:var(--out)}.takehome strong.warn{color:var(--warn)}
.verdict{padding:0 20px;margin:6px 0 14px;font-weight:600}
h3.sec{font:700 1rem/1.3 var(--display);margin:0;padding:14px 20px 6px;display:flex;gap:10px;align-items:baseline}
h3.sec span{color:var(--accent);font-variant-numeric:tabular-nums}
h3.sec span:empty{display:none}
.lines tr.sub td{font-weight:700}
.why{font-size:.9rem;color:var(--muted);padding:8px 20px 0;margin:0}
.payslip .periods{margin:6px 20px 0;width:calc(100% - 40px)}
.notes{margin:14px 20px 4px;padding-left:1.1em;font-size:.88rem;color:var(--muted)}
.notes li{margin-bottom:6px}
.payslip > .note,.payslip > p.note{padding:0 20px 14px}
.payslip > .callout{margin:14px 20px 18px}
.errs{margin:14px 20px;padding-left:1.1em;color:var(--out)}
.print-only{display:none}
.answer{border-top:3px solid var(--accent);padding:14px 0;margin:0 0 20px}
.answer p:last-child{margin-bottom:0}
.worked{font-size:.88rem;color:var(--muted);margin:10px 0 0}
.radios{border:0;margin:0 0 14px;padding:0}
.radios legend{font-weight:600;font-size:.95rem;margin-bottom:6px;padding:0}
.radios small{display:block;color:var(--muted);font-size:.85rem;margin:-2px 0 6px}
.field input[type=date]{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--input-line);padding:9px 12px;min-height:46px;width:100%}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--hair,var(--line))}
.compare > div{padding:16px 20px}
.compare > div + div{border-left:1px solid var(--hair,var(--line))}
.compare small{display:block;color:var(--muted);font-weight:600;font-size:.9rem}
.compare strong{display:block;font:700 clamp(1.7rem,4vw,2.3rem)/1.1 var(--display);font-variant-numeric:tabular-nums;margin:4px 0 8px}
.compare strong.take{color:var(--take)}.compare strong.out{color:var(--out)}
.compare p{font-size:.92rem;margin:0}
.status{border:1px solid var(--warn-line);border-top:3px solid var(--warn);background:var(--warn-soft);padding:18px 20px;margin:0 0 22px}
.status h2{font-size:1.25rem}
.seats{max-width:420px}
.small{font-size:.9rem}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl.policy{min-width:900px}
.tbl.policy th[scope=row]{min-width:130px}
.tbl.policy td{font-size:.88rem;min-width:120px}
.none{color:var(--muted)}
.parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px 36px}
.party h3{margin-bottom:4px}
.party .tag{font-size:.82rem;color:var(--muted);margin:0 0 8px;text-transform:uppercase;letter-spacing:.06em}
.party ul{padding-left:1.1em;margin:0 0 10px}
.party li{font-size:.95rem;margin-bottom:6px}
.assumptions{counter-reset:a;list-style:none;padding:0}
.assumptions li{counter-increment:a;padding:10px 0 10px 40px;position:relative;border-top:1px solid var(--line)}
.assumptions li::before{content:counter(a);position:absolute;left:0;top:10px;font:700 1rem/1.4 var(--display);color:var(--accent)}
.election-card{display:block}
.election-card h2{font-size:1.35rem;margin-bottom:6px}
.facts{padding-left:1.3em}
.facts li{margin-bottom:14px}
.facts li p{margin:0}
.st-pass{color:var(--take);font-weight:700}.st-fail{color:var(--out);font-weight:700}
.coming{max-width:none}
@media (max-width:600px){.compare{grid-template-columns:1fr}.compare > div + div{border-left:0;border-top:1px solid var(--hair,var(--line))}h3.sec,.verdict,.why{padding-left:14px;padding-right:14px}.payslip .periods{margin:6px 14px 0;width:calc(100% - 28px)}}

/* Print: one clean page for the accountant */
@media print{
  @page{margin:14mm}
  body{font-size:10.5pt;line-height:1.35}
  .review,.hero-top,.answer,.worked,.calc > form,.tools,.no-print,.site-head,.site-foot,.crumbs,main > section:not(.hero),main > .wrap{display:none!important}
  .hero{padding:0}
  .calc{display:block}
  .print-only{display:block}
  .payslip{border:0}
  .payslip-head{padding:0 0 6px}
  .takehome{padding:8px 0 2px}.takehome strong{font-size:20pt}
  .verdict,h3.sec,.why,.notes{padding-left:0;padding-right:0}
  h3.sec{padding-top:8px}
  .lines td{padding:3px 0}
  .payslip .periods{margin:4px 0 0;width:100%}
  .periods th,.periods td{padding:3px 6px}
  .acct{border-top:2px solid #000;margin-top:10px;padding-top:6px}
  .acct h3{font-size:11pt;margin:0 0 4px}.acct ul{margin:0 0 6px;padding-left:1.1em}
  a{color:#000;text-decoration:none}
}

/* capitalgainstax.co.nz: form sub-headings, screen-reader text, four footer columns */
h3.sub{font:700 .82rem/1.2 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:18px 0 10px;padding-top:12px;border-top:1px solid var(--hair,var(--line))}
.panel h2 + h3.sub{border-top:0;padding-top:0;margin-top:4px}
.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}
.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.nav a{white-space:nowrap}
@media (max-width:980px){.calc{grid-template-columns:minmax(0,1fr)}}
.panel,.calc > div{min-width:0}
.field{min-width:0}.field select,.field input{min-width:0;max-width:100%}
.row2 > *{min-width:0}
.payslip .lines td:last-child{white-space:normal;overflow-wrap:anywhere}
.payslip .lines td:first-child{width:52%}
@media (max-width:1180px){.nav{display:none}.menu{display:block}}

/* ==== 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%}