/* IBM Plex Sans, self-hosted (SIL Open Font License), one variable file for
   weights 400 to 600, latin only. The fallback is Arial with its metrics
   adjusted to Plex's (ascent 1025, descent 275 on 1000 units, average
   advance about 3% wider) so the swap does not shift the layout. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'); size-adjust: 103%; ascent-override: 99.5%; descent-override: 26.7%; line-gap-override: 0%; }
/* Design tokens: docs/kickoff/02-design-direction.md, with the money palette
   revalidated for colour-vision separation (docs/mockups). Colour appears on
   money data, the one primary action and focus rings; everything else is
   neutral. Borders over shadows. */
:root {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --border: #DEE2E7;
  --border-strong: #848E9C;
  --text: #1B2029;
  --text-2: #444E5C;
  --muted: #5E6978;
  --faint: #6E7786;
  --primary: #3B4E66;
  --primary-hover: #2E3E52;
  --on-primary: #FFFFFF;
  --primary-tint: #E8ECF1;
  --primary-tint-border: #C3CCD8;
  --rod: #7A8696;
  --amber: #9E5530;
  --amber-text: #8F4A24;
  --amber-tint: #F8EAE1;
  --amber-tint-border: #E9C7B2;
  --warn: #B7791F;
  --warn-tint: #FFF4D6;
  --warn-tint-border: #E6C77A;
  --error: #B42318;
  --error-tint: #FEE4E2;
  --takehome: #1E7D5A;
  --pension: #8F5CD1;
  --pension-text: #6B3FAE;
  --pension-tint: #F6F1FC;
  --pension-tint-border: #DDD2F2;
  --tax: #2F5BAA;
  --ni: #4F93DD;
  --loan: #C2628A;
  --other: #6B6A66;
  --radius: 6px;
  --radius-lg: 12px;
  --font: 'IBM Plex Sans', 'IBM Plex Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121519; --surface: #1A1E25; --border: #2A3038; --border-strong: #6B7582;
    --text: #ECEEF1; --text-2: #C4CAD3; --muted: #98A1AD; --faint: #8A9199;
    --primary: #DD9D72; --primary-hover: #E8B48F; --on-primary: #121519; --primary-tint: #2B2119; --primary-tint-border: #4A3524;
    --rod: #6B7582;
    --amber: #DD9D72; --amber-text: #DD9D72; --amber-tint: #2B2119; --amber-tint-border: #4A3524;
    --warn: #F2B94B; --warn-tint: #2E2B12; --warn-tint-border: #5C4C1C; --error: #F97066; --error-tint: #2A1614;
    --takehome: #5DC99A; --pension: #B48BE6; --pension-text: #C9A9F0; --pension-tint: #221A2E; --pension-tint-border: #3B2D52;
    --tax: #6F8FE0; --ni: #A9D6F5; --loan: #E08BB0; --other: #A09E98;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: 22px; line-height: 1.3; }
h2.section { font-size: 28px; }
h3 { font-size: 18px; line-height: 1.4; }
p { margin: 0; }
.lead { font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 720px; }
.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 1.45; }
.strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.money-takehome { color: var(--takehome); }
.money-pension { color: var(--pension-text); }
.money-loan { color: var(--loan); }
/* Not money colours: the employer's share is a shade of pension, growth is the brand copper. */
:root { --employer: color-mix(in srgb, var(--pension) 50%, var(--surface)); --growth: var(--amber); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: var(--radius); }
.skip:focus { left: 8px; z-index: 10; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } h1 { font-size: 28px; } h2.section { font-size: 24px; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.card-pad { padding: 28px; }
@media (max-width: 600px) { .card-pad { padding: 20px; } }

/* Header and footer */
.site-header { border-bottom: 1px solid var(--border); background: var(--surface); }
.site-header .row { min-height: 64px; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
/* On a phone the five categories do not fit beside the wordmark: they become
   one scrolling row beneath it rather than wrapping onto a third line. */
@media (max-width: 600px) {
  .site-header .row { padding-bottom: 0; }
  .site-header .nav { flex: 1 0 100%; flex-wrap: nowrap; gap: 20px; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 0 24px; }
  .site-header .nav::-webkit-scrollbar { display: none; }
  .site-header .nav a { font-size: 14px; white-space: nowrap; padding: 10px 0 12px; }
}
main { min-height: 60vh; }
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-size: 18px; font-weight: 600; }
.mark { display: inline-block; width: 28px; height: 28px; flex: none; color: var(--primary); }
.mark .bead-keep { fill: var(--amber); }
@media (prefers-color-scheme: dark) { .mark { color: var(--text-2); } }
.nav { display: flex; gap: 24px; flex-wrap: wrap; }
.nav a { color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--primary); }
.nav-footer a { color: var(--text-2); font-weight: 400; font-size: 14px; }
.site-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 64px; }
.site-footer .row { padding: 32px 24px; justify-content: space-between; align-items: flex-start; }
.site-footer .stack-sm { max-width: 520px; }
.banner-proto { background: var(--warn-tint); border-bottom: 1px solid var(--warn-tint-border); color: var(--text); font-size: 14px; padding: 10px 24px; text-align: center; }

/* Chips and buttons */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text-2); background: var(--surface); white-space: nowrap; text-decoration: none; }
.chip-tiny { font-size: 11px; padding: 2px 8px; }
.chip-warn { border-color: var(--warn-tint-border); background: var(--warn-tint); color: var(--text); }
.chip-link { color: var(--primary); border-color: var(--primary-tint-border); background: var(--primary-tint); font-size: 12px; padding: 2px 10px; }
.chip-featured { color: var(--amber-text); border-color: var(--amber-tint-border); background: var(--amber-tint); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--radius); border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-2:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-2 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
.btn-2:hover { border-color: var(--primary); color: var(--primary); }
.btn-2.between { justify-content: space-between; }
/* Touch targets: 44px on a phone for anything tapped. */
@media (max-width: 600px) {
  .btn-2, .seg button, .input-sm, select.input-sm { height: 44px; }
  label.chip { min-height: 44px; padding: 0 14px; }
  a.chip { min-height: 36px; }
}

/* Forms */
.grp { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .lbl { font-size: 14px; font-weight: 500; }
.hint { font-size: 13px; color: var(--muted); line-height: 1.45; }
.input, select.input { height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 16px; color: var(--text); padding: 0 12px; width: 100%; font-variant-numeric: tabular-nums; }
.input:focus { outline: 2px solid var(--primary); outline-offset: 2px; border-color: var(--primary); }
select.input { padding: 0 8px 0 12px; }
.input-sm, select.input-sm { width: auto; height: 36px; font-size: 14px; padding: 0 8px; }
.field-head .input-sm { height: 32px; }
.field-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.input[aria-invalid="true"] { border-color: var(--error); }
.money { position: relative; }
.money .input { padding-left: 28px; }
.money::before { content: '£'; position: absolute; left: 12px; top: 9px; font-size: 16px; color: var(--muted); }
/* Short values get short boxes: ages, days, counts, rates, years. */
.w-xs { max-width: 88px; } .w-sm { max-width: 120px; } .w-md { max-width: 200px; }
.unitwrap { position: relative; }
.unitwrap .input { padding-right: 44px; }
.unitwrap::after { content: attr(data-unit); position: absolute; right: 12px; top: 10px; font-size: 14px; color: var(--muted); pointer-events: none; }
.pctwrap { position: relative; }
.pctwrap .input { padding-right: 30px; }
.pctwrap::after { content: '%'; position: absolute; right: 12px; top: 9px; font-size: 16px; color: var(--muted); }
.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.fieldset + .fieldset { border-top: 1px solid var(--border); padding-top: 16px; }
.fieldset > legend.grp { margin-bottom: 12px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--primary); }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cols-1-150 { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; }
.cols-120-1 { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.cols-1-96 { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
.items { display: flex; flex-direction: column; gap: 8px; }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 44px; gap: 8px; align-items: center; }
.item-row.has-kind { grid-template-columns: minmax(0, 1fr) 140px 44px; }
.item-row.has-kind .item-kind { grid-column: 1 / -1; order: 1; }
/* On a phone the kind select drops to its own row under the name, value and remove button. */
@media (max-width: 600px) { .item-row.has-kind { grid-template-columns: minmax(0, 1fr) 110px 44px; } }
.item-remove { height: 44px; width: 44px; padding: 0; font-size: 20px; line-height: 1; color: var(--muted); }
.item-remove:hover { color: var(--error); border-color: var(--error); }
.items-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.items-foot:has([data-phase-add]) { justify-content: flex-start; gap: 8px; }
.items-list { display: block; }
@media (max-width: 600px) { .item-row { grid-template-columns: minmax(0, 1fr) 110px 44px; } }
.cols-bonus { display: grid; grid-template-columns: minmax(0, 1fr) 72px 88px; gap: 8px; }
.cols-unit { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; }
.cols-unit.wide { grid-template-columns: minmax(0, 1fr) 112px; }
.cols-cost { display: grid; grid-template-columns: minmax(0, 1fr) 112px 96px; gap: 8px; }
.fields { display: flex; flex-direction: column; gap: 16px; }
.cols-2 > .span-2 { grid-column: 1 / -1; }
@media (max-width: 600px) { .cols-bonus { grid-template-columns: minmax(0, 1fr) 64px 84px; } .cols-cost { grid-template-columns: minmax(0, 1fr) 104px 88px; } }
details { border-top: 1px solid var(--border); }
summary { cursor: pointer; padding: 16px 0; font-size: 16px; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
summary::-webkit-details-marker { display: none; }
.decoded { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.decoded.warn { border-color: var(--warn-tint-border); }
.decoded.error { border-color: var(--error); }
.decoded .h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.decoded .rows { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.decoded .k { font-size: 12px; color: var(--muted); }
.decoded .v { font-size: 15px; font-weight: 500; }

/* Calculator page */
.calc { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 24px; align-items: start; }
/* One column on a phone, and the result first: the reader arrived with a
   question and the answer should be the first screen, not a page of fields.
   The DOM keeps the form first so the live region still follows the inputs. */
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc > .results { order: -1; } }
.results { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) { .results { position: static; } }
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg button { height: 36px; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.seg button + button { border-left: 1px solid var(--border-strong); }
/* The abacus: every money graphic is beads on a rod. The hero figure sits on
   its own rod with the one copper bead at the end, the kept one. */
.hero { display: flex; flex-direction: column; gap: 4px; position: relative; padding-bottom: 18px; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--rod); }
.hero::before { content: ''; position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--amber); z-index: 1; }
.hero-label { font-size: 15px; color: var(--text-2); }
.hero-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hero-figure { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
@media (max-width: 600px) { .hero-figure { font-size: 40px; } }
.hero-secondary { display: flex; gap: 20px; font-size: 15px; color: var(--text-2); margin-top: 8px; flex-wrap: wrap; align-items: baseline; }
.hero-secondary strong { color: var(--text); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 600px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 12px 14px; border-radius: 0 8px 8px 0; border-left: 3px solid var(--rod); background: var(--bg); }
.tile .k, .pension-panel .k { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.tile .k .sw, .pension-panel .k .sw { margin-top: 4px; }
.tile .v { font-size: 18px; font-weight: 600; margin-top: auto; padding-top: 2px; }
.pension-panel { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px; border-radius: 0 8px 8px 0; border: 1px solid var(--pension-tint-border); border-left: 3px solid var(--pension); background: var(--pension-tint); }
.pension-panel > div { display: flex; flex-direction: column; gap: 2px; }
.pension-figure { font-size: 28px; line-height: 1.1; font-weight: 600; color: var(--pension-text); }
.pension-detail { font-size: 14px; color: var(--text-2); text-align: right; }
.pension-detail strong { color: var(--text); }
@media (max-width: 600px) { .pension-detail { text-align: left; } }
.code-estimate { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.code-estimate.code-differs { border-color: var(--warn-tint-border); background: var(--warn-tint); }
.code-estimate p { color: var(--text-2); }
.code-estimate details { border-top: 1px solid var(--border); margin-top: 4px; }
.tiles-fit { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; min-height: 56px; padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 20; animation: sticky-in 0.2s ease-out; }
.sticky-bar[hidden] { display: none; }
.sticky-bar-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.sticky-bar-label { font-size: 13px; color: var(--muted); }
.sticky-bar-figure { font-size: 16px; font-weight: 600; }
.sticky-bar .btn-2 { height: 36px; white-space: nowrap; }
@keyframes sticky-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .sticky-bar { animation: none; } .delta { animation: none; } }
@media (min-width: 601px) { .sticky-bar { display: none; } }
body.has-sticky { padding-bottom: 72px; }
.expand-form { align-self: flex-start; }
@media (max-width: 600px) {
  form.collapsed .fieldset:not(:has([data-core])) { display: none; }
  form.collapsed .fieldset:has([data-core]) > :not(legend):not([data-core]):not(:has([data-core])) { display: none; }
  form.collapsed .field:not([data-core]) { display: none; }
  form.collapsed .fieldset + .fieldset:has([data-core]) { border-top: 0; padding-top: 0; }
}
.phase-head, .phase-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.phase-head { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.phase-rows { display: flex; flex-direction: column; gap: 8px; }
.phase-now { min-height: 36px; color: var(--text-2); }
.phase-head > span, .phase-now > span { padding-left: 13px; }
.phase-break-label { grid-column: 2 / 4; color: var(--text-2); font-size: 14px; }
.phase-msg { grid-column: 1 / -1; min-height: 0; }
.phase-msg:empty { display: none; }
.phase-msg.is-error { color: var(--error); }
.phase-msg.is-warn { color: var(--amber-text); }
.phase-row [aria-invalid="true"] { border-color: var(--error); }
.phase-timeline { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.phase-bar { display: flex; gap: 1px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border); }
.phase-seg { background: var(--pension); display: block; }
.phase-seg-break { background: repeating-linear-gradient(45deg, var(--other) 0 3px, transparent 3px 6px); }
.sw-ghost { border: 1px dashed var(--text-2); background: transparent; }
tr.group td { font-weight: 600; color: var(--text-2); background: var(--bg); font-size: 13px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 32px; align-items: start; }
.footer-cols a { display: block; }
@media (max-width: 600px) { .footer-cols { grid-template-columns: 1fr; gap: 16px; } }
.ani-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2, var(--surface)); }
.ani-card .k { font-size: 13px; color: var(--muted); }
.ani-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ani-row .v { font-size: 24px; font-weight: 600; }
.ani-working { line-height: 1.5; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.profile-strip { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--primary-tint-border); background: var(--primary-tint); border-radius: 8px; }
.profile-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-actions .btn-2 { height: 36px; font-size: 13px; }
.notice { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-size: 14px; color: var(--text-2); line-height: 1.5; }
.notice strong { color: var(--text); }
.notice-warn { border-color: var(--warn-tint-border); background: var(--warn-tint); border-left: 3px solid var(--warn); }
/* An informational notice folds to its first line; a warning never does. */
details.notice { border-top: 1px solid var(--border); }
details.notice summary { padding: 0; font-size: 14px; font-weight: 600; color: var(--text); }
details.notice[open] summary { margin-bottom: 6px; }
.beyond { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); padding-top: 16px; }
.beyond .grp { margin-bottom: 2px; }
.ani-panel { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); }
.ani-panel.ani-near { border-color: var(--warn-tint-border); background: var(--warn-tint); }
.ani-panel.ani-over { border-color: var(--warn-tint-border); background: var(--warn-tint); }
.ani-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ani-head .k { font-size: 13px; color: var(--muted); }
.ani-figure { font-size: 20px; font-weight: 600; }
.ani-over .ani-figure { color: var(--amber-text); }
.ani-panel p { color: var(--text-2); }
.ani-panel strong { color: var(--text); }
.share { display: flex; flex-direction: column; gap: 8px; }
.bar { display: flex; height: 16px; gap: 5px; align-items: center; position: relative; }
.bar::before { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; margin-top: -1px; background: var(--rod); }
.bar > div { position: relative; height: 16px; min-width: 10px; flex-shrink: 0; border-radius: 999px; background-image: linear-gradient(90deg, var(--surface) 2px, transparent 2px); background-size: 10px 100%; background-repeat: repeat-x; background-position: 6px 0; }
.bar-takeHome { background: var(--takehome); } .bar-pension { background: var(--pension); } .bar-other { background: var(--other); }
.bar-tax { background: var(--tax); } .bar-ni { background: var(--ni); } .bar-loan { background: var(--loan); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.legend span { display: flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; margin-right: 2px; }
.sw-takehome { background: var(--takehome); } .sw-pension { background: var(--pension); } .sw-other { background: var(--other); }
.sw-employer { background: var(--employer); } .sw-growth { background: var(--growth); }
.sw-tax { background: var(--tax); } .sw-ni { background: var(--ni); } .sw-loan { background: var(--loan); } .sw-warn { background: var(--warn); }
.takeaways { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--text-2); border-top: 1px solid var(--border); padding-top: 16px; }
.takeaways strong { color: var(--text); }
.scenarios { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.breadcrumb { font-size: 14px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb [aria-current] { color: var(--text); }
.title-block { display: flex; flex-direction: column; gap: 12px; }
.page { padding-top: 32px; display: flex; flex-direction: column; gap: 40px; }
/* Flex and grid children must not grow to fit a scrolling table or chart inside them. */
.page > *, .calc > *, .breakdown-grid > *, .lower > * { min-width: 0; }
.cols-code { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
@media (max-width: 600px) { .cols-code { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; } }

.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .tiles-3 { grid-template-columns: 1fr; } }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }
.fx { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0; }
.fx-muted { background: var(--bg); }
.fx .t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fx .n { font-size: 14px; font-weight: 600; }
.fx .d { font-size: 15px; font-weight: 600; white-space: nowrap; }
.fx p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.fx a { font-size: 14px; font-weight: 500; }
input[type="range"] { width: 100%; accent-color: var(--primary); height: 44px; margin: 0; }
.chart { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.chart .legend { font-size: 13px; }
.chart-scroll { overflow-x: auto; }
.chart svg { width: 100%; height: auto; display: block; }
/* The chart is drawn on a 960-unit canvas. On a phone it scrolls sideways
   rather than shrinking its type to 6px; the CSS overrides the SVG's own
   sizes so labels, lines and markers stay legible at that scale. */
@media (max-width: 600px) {
  .chart svg { min-width: 640px; }
  .chart svg text { font-size: 20px; }
  .chart svg path { stroke-width: 3.5; }
  .chart svg circle { r: 8; }
}

/* Tables */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
th { font-weight: 500; color: var(--muted); font-size: 13px; }
td.r, th.r { text-align: right; white-space: nowrap; }
td .sub-note { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
tr.sub td { background: var(--bg); font-weight: 500; }
tr.strong td { font-weight: 600; }
tr.muted td { color: var(--faint); }
.breakdown-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; }
.breakdown-grid h2 { margin-bottom: 12px; }
.breakdown-grid table + p { margin-top: 12px; }
@media (max-width: 900px) { .breakdown-grid { grid-template-columns: 1fr; } }
.table-scroll { overflow-x: auto; }
@media (max-width: 600px) { .results th, .results td { font-size: 13px; padding-left: 4px; padding-right: 6px; } }
/* Long addresses in running text wrap instead of widening the page. */
main p, main li { overflow-wrap: anywhere; }
/* A table with four or more figure columns scrolls on a phone rather than squashing. */
@media (max-width: 600px) { .table-scroll .table-wide { min-width: 560px; } }

/* Lower page */
.lower { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .lower { grid-template-columns: 1fr; } }
.lower section { display: flex; flex-direction: column; gap: 12px; }
.lower details p { padding: 0 0 16px; color: var(--text-2); }
.ad-slot { height: 110px; }
.sources { display: flex; flex-direction: column; gap: 28px; }
.source-group { display: flex; flex-direction: column; gap: 10px; }
.source-group ul { margin: 0; padding: 0 0 0 12px; list-style: none; display: flex; flex-direction: column; gap: 12px; border-left: 2px solid var(--border); }
.source-group li { display: flex; flex-direction: column; gap: 2px; }
.source-group a { font-weight: 500; color: var(--text); text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.source-group a:hover { color: var(--primary); text-decoration-color: currentColor; }
.source-meta { font-size: 13px; color: var(--muted); line-height: 1.45; max-width: 60ch; }
.sources-card .source-group a { font-size: 15px; line-height: 1.35; }
.nowrap { white-space: nowrap; }
.sources-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }

/* Home */
.hero-home { padding-block: 96px 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
@media (max-width: 900px) { .hero-home { grid-template-columns: 1fr; padding-block: 48px 32px; gap: 32px; } }
.hero-home h1 { font-size: 48px; }
@media (max-width: 600px) { .hero-home h1 { font-size: 34px; } }
.ticks { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.ticks span { display: inline-flex; align-items: center; gap: 6px; }
.feature { padding: 28px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--text); }
.feature.featured { border-color: var(--amber-tint-border); background: var(--amber-tint); }
.feature p { font-size: 15px; color: var(--text-2); }
.feature .example { margin-top: 8px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; }
.catalogue { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 64px 0; }
.catalogue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
@media (max-width: 900px) { .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .catalogue-grid { grid-template-columns: 1fr; } }
.toollink { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.toollink { color: var(--text); text-decoration: none; }
.toollink:hover { color: var(--primary); }
.howwe { padding-block: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
@media (max-width: 900px) { .howwe { grid-template-columns: 1fr; padding-block: 48px; } }
.facts { margin: 0; padding: 8px 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.facts > div { padding: 16px 0; }
.facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.facts dt { font-size: 13px; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 18px; font-weight: 500; }
.section-pad { padding-block: 32px 64px; display: flex; flex-direction: column; gap: 24px; }
.prose { max-width: 760px; display: flex; flex-direction: column; gap: 16px; color: var(--text-2); }
.prose h2 { color: var(--text); margin-top: 16px; }

/* Touch targets on a phone, after every rule that sets a smaller height. */
@media (max-width: 600px) {
  .seg button, .profile-actions .btn-2, .sticky-bar .btn-2, .expand-form, .item-remove { height: 44px; min-height: 44px; }
  a.chip, .chip-link { min-height: 44px; }
}