/* mortgagerepaymentcalculator.co.nz. Same system as taxcalculator.co.nz (Jobtracker design system) in its own colour, slate green.
   Contrast: accent #2F5D50 on white 7.5:1 and on the soft tint #EEF4F1 6.7:1; band text #D3E6DC on the #2F5D50 band 5.75:1;
   small print #C4DDD1 on the band 5.2:1; muted #5A6169 on white 6.3:1. Chart interest edge #A8721C 4.1:1 (graphics need 3:1).
   The shared "official form" look is appended at the end by: node _build/apply-form-look.mjs mortgagerepaymentcalculator */
@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:#2F5D50; --accent-hover:#244A40; --soft:#EEF4F1; --soft-line:#CFE0D8;
  --band:#2F5D50; --band-text:#D3E6DC; --band-fine:#C4DDD1;
  --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:#2F5D50;
  --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(47,93,80,.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 additions (from 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}

/* mortgagerepaymentcalculator.co.nz additions */
.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}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.answer{background:#fff;padding:14px 0;margin:0 0 20px}
.answer p{margin:0 0 .5em}.answer p:last-child{margin:0}
.answer .eyebrow{margin-bottom:6px}
.asat{display:inline-block;font-weight:700;color:var(--accent);border:1px solid var(--soft-line);background:var(--soft);padding:4px 10px;margin:10px 0 0;font-size:.95rem}
.pctf{position:relative}.pctf input{padding-right:30px}.pctf::after{content:"%";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.plain{display:block}
.row3{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:10px}
.part{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.part > b{display:block;font-size:.95rem;margin-bottom:6px}
.sub-h{font-weight:700;margin:20px 0 6px;font-size:1rem}
.chart{margin:4px 0 6px}
.chart-box{position:relative;width:100%;aspect-ratio:480/260}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
ul.legend{list-style:none;padding:0;margin:8px 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem;color:var(--ink)}
ul.legend li{display:inline-flex;align-items:center;gap:7px}
ul.legend i{width:12px;height:12px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
ul.legend i.dash{height:4px;box-shadow:none}
details.data{margin-top:8px}
details.data summary{cursor:pointer;font-weight:600;color:var(--accent)}
.lines tr.sel td{font-weight:700}
.lines tr.sel td:first-child::after{content:" ✓";color:var(--accent)}
.lines td small{color:var(--muted);font-size:.85rem}
.compare td small.range{display:block;color:var(--muted);font-size:.8rem;white-space:nowrap}
.compare td.up{color:var(--out)}.compare td.down{color:var(--good-ink)}
.twoways .periods{margin-top:6px}
.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}
.tbl.tests td{font-size:.88rem}
.tbl.tests tr.fail td{background:var(--out-soft)}
.tbl.tests tr.skip td,.tbl.tests tr.reference td{color:var(--muted)}
.formula code{display:block;background:var(--soft);border:1px solid var(--soft-line);padding:10px 12px;font-size:.9rem;white-space:normal;overflow-wrap:anywhere}
.rates td,.rates th{text-align:right;white-space:nowrap}
.rates td:first-child,.rates th:first-child,.rates.two td:nth-child(2),.rates.two th:nth-child(2){text-align:left}
.rates td small.prod{display:block;color:var(--muted);font-size:.82rem;white-space:normal;min-width:9em}
.rates td:first-child{white-space:normal}
@media (max-width:600px){.rates{font-size:.82rem}.rates th,.rates td{padding:7px 5px}.rates td small.prod{min-width:7em}}
.rates tr.avg td{font-weight:700;border-top:2px solid var(--ink)}
.rates td.na{color:var(--muted)}
.ocr dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 12px}
.ocr dt{font-weight:700}.ocr dd{margin:0}
.related{margin:14px 0 0;color:var(--band-text)}
.related a{color:#fff}
.split2 > *,.calc > *{min-width:0}
.nav a{white-space:nowrap}
@media (max-width:1240px){.nav{display:none}.menu{display:block}}
/* Te reo Māori nav labels are longer: the menu button takes over sooner */
@media (max-width:1520px){html[lang=mi] .nav{display:none}html[lang=mi] .menu{display:block}}
@media (max-width:860px){.facts{columns:1}}
@media (max-width:600px){.row3{grid-template-columns:1fr 1fr}.row3 > :first-child{grid-column:1/-1}}

/* The site name stays on one line beside the symbol on desktop and tablet */
@media (min-width:601px){.brand span{white-space:nowrap}}

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