/* Letview: shared styles
   Layout: reading column (max 680px), calculator pages use .inner.wide (1080px)
   Colour meaning: green = money you keep, coral = tax, indigo = mortgage interest, stone = costs */
:root{
  --bg:#f6f5f1; --surface:#ffffff; --surface-2:#f0eee8; --ink:#13201c; --muted:#5b6964; --line:#e3e0d8; --line-strong:#cdc9be;
  --accent:#0f6e55; --accent-hover:#0b5a45; --accent-ink:#ffffff; --accent-soft:#e2f0e9;
  --tax:#c4462b; --tax-soft:#fbebe5; --int:#4f63a3; --cost:#aaa395;
  --warn:#a85d00; --warn-soft:#fbefdc; --ok-soft:#eef2f1;
  --shadow:0 1px 2px rgba(19,32,28,.04),0 10px 30px -14px rgba(19,32,28,.16);
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0c1311; --surface:#141d1a; --surface-2:#1a2521; --ink:#e7eeeb; --muted:#97a8a2; --line:#25332e; --line-strong:#364841;
  --accent:#46c49e; --accent-hover:#62d4b0; --accent-ink:#06120e; --accent-soft:#11342a;
  --tax:#ff8c6e; --tax-soft:#33201a; --int:#93a6e6; --cost:#75847e;
  --warn:#f0a94a; --warn-soft:#3a2a12; --ok-soft:#1c2925;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 36px -18px rgba(0,0,0,.7); color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
a{color:var(--accent)}
img{max-width:100%}
[hidden]{display:none!important}

.band{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.inner{max-width:680px;margin:0 auto}
.inner.wide,.site-head .inner,.site-foot .inner{max-width:1080px}

/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--surface)}
.site-head .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink);text-decoration:none;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:600 13px var(--mono)}
.nav{display:flex;gap:18px;font-size:15px}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav{align-items:center}
.theme-btn{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--muted);cursor:pointer;padding:0;transition:color .15s,border-color .15s}
.theme-btn:hover{color:var(--ink);border-color:var(--muted)}
.theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* announcement bar */
.announce{background:var(--accent);color:var(--accent-ink);text-align:center;font-size:14px}
.announce a{display:block;padding:9px 0;color:inherit;text-decoration:none;font-weight:500}
.announce a:hover{text-decoration:underline}

/* top menu with Calculators dropdown */
.site-head .inner{position:relative}
.nav{gap:6px}
.nav>a:not(.btn),.menu summary{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;color:var(--muted);text-decoration:none;cursor:pointer;list-style:none;font-weight:500}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.menu[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.nav>a:not(.btn):hover,.menu summary:hover,.menu[open] summary,.nav a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
.menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(360px,100%);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:8px;display:grid;gap:2px;z-index:20}
.nav .menu-panel a.all{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;padding:12px;font-size:14px;font-weight:600;color:var(--accent)}
.nav .menu-panel a.all:hover{color:var(--accent-hover)}
.nav .menu-panel a,.menu-panel .soon{display:grid;gap:2px;align-content:start;padding:12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.nav .menu-panel a:hover{background:var(--surface-2);color:var(--ink)}
.menu-panel strong{font-size:15px}
.menu-panel span{font-size:13px;color:var(--muted);line-height:1.4}
.menu-panel .soon{opacity:.6}
.menu-panel .soon strong::after{content:"Soon";margin-left:8px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--surface-2);padding:2px 7px;border-radius:99px;vertical-align:2px}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:10px}
.nav .btn.primary,.nav .btn.primary:hover{color:var(--accent-ink)}
@media (max-width:640px){.nav .btn,.nav>a:not(.btn){display:none}.site-head .inner{flex-wrap:nowrap}}

main.band{padding-block:32px 48px}
main .inner{display:grid;gap:28px}

.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,6vw,42px);line-height:1.08;margin:6px 0 10px;text-wrap:balance;letter-spacing:-.01em}
h2{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.2;margin:0 0 12px;text-wrap:balance}
h3{font-size:17px;margin:0 0 4px}
.lede{color:var(--muted);margin:0;max-width:62ch;font-size:17px}
.prose{max-width:65ch}
.prose p{margin:0 0 12px}
.prose ul,.prose ol{margin:0 0 12px;padding-left:22px}
.prose li{margin-bottom:6px}
.updated{font-size:13px;color:var(--muted);margin-top:10px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}

/* form controls */
label{display:block;font-weight:600;margin-bottom:2px;font-size:15px}
.hint{display:block;font-size:13px;color:var(--muted);margin-bottom:8px;line-height:1.45}
.money{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.money:hover{border-color:var(--muted)}
.money span{padding:0 10px 0 13px;font-family:var(--mono);color:var(--muted)}
.money .per{padding:0 13px 0 6px;font:500 13px var(--body);white-space:nowrap}
.money input{flex:1;min-width:0;width:100%;border:0;background:transparent;color:var(--ink);font:500 18px var(--mono);padding:12px 12px 12px 0;font-variant-numeric:tabular-nums}
.money:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input:focus{outline:none}

/* segmented toggle (tax year, yearly/monthly) */
.seg{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{flex:1;border:0;background:transparent;color:var(--muted);font:600 14px var(--body);padding:9px 12px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg.sm{border-radius:10px;padding:3px}
.seg.sm button{font-size:13px;padding:5px 12px;border-radius:7px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 15px var(--body);padding:12px 18px;border-radius:12px;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.link-btn{border:0;background:none;padding:0;color:var(--accent);font:600 13px var(--body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--accent-hover)}
.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}

/* calculator layout: inputs left, sticky result right on wide screens */
.page-head{max-width:720px}
.calc{display:grid;gap:20px;align-items:stretch}
.pair{display:grid;gap:20px;align-items:stretch}
.pair:has(#insight[hidden]){grid-template-columns:minmax(0,1fr)}
.narrow{max-width:720px;display:grid;gap:28px}
@media (min-width:920px){
  .calc,.pair{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px}
}
.calc-result{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:20px}
.calc-result>:last-child{margin-top:auto}
.bar{display:flex;gap:2px;height:14px;border-radius:999px;overflow:hidden;background:var(--surface-2)}
.bar span{height:100%;transition:width .35s ease}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px}
.legend li{display:flex;align-items:center;gap:10px}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}
.legend b{margin-left:auto;font:500 14px var(--mono);font-variant-numeric:tabular-nums}
.k-cost{background:var(--cost)} .k-int{background:var(--int)} .k-tax{background:var(--tax)} .k-keep{background:var(--accent)}
@media (prefers-reduced-motion:reduce){.bar span{transition:none}}

/* mobile: floating result bar while the result is off screen */
.dock{display:none}
@media (max-width:919px){
  .dock{position:fixed;left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom, 0px));z-index:10;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 16px;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);font-size:14px}
  .dock b{font:600 17px var(--mono)}
  .dock a{margin-left:auto;color:var(--bg);font-weight:600}
}
.example{font-size:13px;color:var(--muted);margin:14px 0 0}

/* affiliate slot */
.slot{border:1px dashed var(--line);border-radius:12px;padding:16px;font-size:14px;color:var(--muted)}
.slot strong{color:var(--ink)}

/* links to other tools */
.tools{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:540px){.tools{grid-template-columns:1fr}}
.tool{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
a.tool:hover{border-color:var(--accent)}
a.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tool strong{font-size:16px}
.tool span{font-size:14px;color:var(--muted);line-height:1.45}
.tool .go{font-size:13px;color:var(--accent);font-weight:600;margin-top:4px}
.tool.soon{background:transparent;border-style:dashed}
.tool.soon .go{color:var(--muted)}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{font-weight:600;cursor:pointer}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq details p{margin:10px 0 0;color:var(--muted)}

/* tables */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:15px}
table.data th,table.data td{text-align:left;padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
table.data td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* footer */
.site-foot{border-top:1px solid var(--line);background:var(--surface);padding-block:28px 36px;font-size:14px;color:var(--muted)}
.site-foot .inner{display:grid;gap:12px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-links a{color:var(--muted)}
.site-foot p{margin:0}
.site-foot .brand{font-size:18px}

.small{font-size:13px;color:var(--muted)}

/* tint colours for category cards */
:root{--t-green:#e2f0e9;--t-green-ink:#0f6e55;--t-amber:#fbefdc;--t-amber-ink:#a85d00;--t-lilac:#ece9f7;--t-lilac-ink:#5b4fa3;--t-blue:#e3edf9;--t-blue-ink:#2b5fa8;--t-rose:#fbe9e4;--t-rose-ink:#b8452c}
:root[data-theme="dark"]{--t-green:#11342a;--t-green-ink:#46c49e;--t-amber:#3a2a12;--t-amber-ink:#f0a94a;--t-lilac:#25223f;--t-lilac-ink:#a99cf0;--t-blue:#14273b;--t-blue-ink:#7db1f0;--t-rose:#33201a;--t-rose-ink:#ff8c6e}
.t-green{--tint:var(--t-green);--tint-ink:var(--t-green-ink)}
.t-amber{--tint:var(--t-amber);--tint-ink:var(--t-amber-ink)}
.t-lilac{--tint:var(--t-lilac);--tint-ink:var(--t-lilac-ink)}
.t-blue{--tint:var(--t-blue);--tint-ink:var(--t-blue-ink)}
.t-rose{--tint:var(--t-rose);--tint-ink:var(--t-rose-ink)}

/* section heads and calculator cards (homepage and calculators page) */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sec-head h2{margin:0}
.sec-head p{margin:0;color:var(--muted);font-size:15px}
.calc-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr}
@media (min-width:600px){.calc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.calc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.calc-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);background:var(--tint,var(--surface));border:1px solid transparent;border-radius:20px;padding:24px;min-height:220px;transition:transform .15s,box-shadow .15s}
a.calc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
a.calc-card:focus-visible{outline:2px solid var(--tint-ink);outline-offset:2px}
.calc-card .ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--surface);color:var(--tint-ink);margin-bottom:6px}
.calc-card strong{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.2}
.calc-card span{font-size:14px;color:var(--muted);line-height:1.5}
.calc-card .go{margin-top:auto;padding-top:10px;font-size:14px;font-weight:600;color:var(--tint-ink)}
.calc-card.soon .go{color:var(--muted);font-weight:500}
.tag{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tint-ink,var(--muted));background:var(--surface);padding:3px 9px;border-radius:99px}

/* lower content on calculator pages: use the full width, two columns on wide screens */
.below{display:grid;gap:40px}
.below>*{min-width:0}
.cols{display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
.cols>*{min-width:0}
.below .prose{max-width:none}
.below .prose p,.below .prose ul{max-width:68ch}
@media (min-width:920px){.cols{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start}}

/* single "next step" link row (replaces the pair of small cards) */
.next-row{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.next-row:hover{border-color:var(--accent)}
.next-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.next-row span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.next-row strong{font-size:16px}
.next-row em{margin-left:auto;font-style:normal;color:var(--accent);font-weight:600;font-size:14px}

/* student loan segment colour */
:root{--loan:#c9961a}
:root[data-theme="dark"]{--loan:#e3b341}
.k-loan{background:var(--loan)}