/* Site styles: "clear ledger".
   System fonts only (no third-party requests), tabular numbers, accountant's
   double rule under totals. Colours chosen for WCAG 2.2 AA contrast. */

:root {
  --paper: #fbfaf6;
  --surface: #ffffff;
  --ink: #17201d;
  --ink-soft: #4a5550;
  --line: #e2ded3;
  --line-strong: #c9c3b4;
  --brand: #0b5d4b;
  --brand-strong: #084536;
  --brand-tint: #e7f0ec;
  --accent: #9a5800;
  --focus: #0b5d4b;  /* brand green: one focus ring style across the site */

  --seg-net: #0b5d4b;
  --seg-tax: #b4532a;
  --seg-ni: #b7791f;
  --seg-loan: #6b5b95;
  --seg-pension: #2b6cb0;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --radius: 10px;
  --wrap: 72rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

a { color: var(--brand); text-underline-offset: 0.18em; }
a:hover { color: var(--brand-strong); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

main:focus { outline: none; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--ink); color: #fff;
  padding: 0.5rem 1rem; border-radius: 0 0 6px 6px;
  z-index: 10;
}
.skip-link:focus { top: 0; color: #fff; }

.muted { color: var(--ink-soft); }

/* Header */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
}
.brand:hover { color: var(--ink); }

.brand-mark { width: 2rem; height: 2rem; flex: none; }
.brand-mark-bg { fill: var(--brand); }
.brand-mark-lines { stroke: #fff; stroke-width: 2.25; stroke-linecap: round; fill: none; }
.brand-mark-dot { fill: #f2c46d; }

.site-nav { display: flex; gap: 0.25rem 1.25rem; flex-wrap: wrap; }
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.975rem;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--brand); color: var(--ink); }

/* Hero */

.hero {
  padding: 3rem 0 3.5rem;
  border-bottom: 1px solid var(--line);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(11, 93, 75, 0.05) 31px 32px);
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--brand);
  border-radius: 999px;
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hero h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.35rem);
  max-width: 16ch;
}

.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.button:hover { background: var(--brand-strong); color: #fff; }

.text-link { font-weight: 600; }

/* Worked-example receipt */

.receipt {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(23, 32, 29, 0.35);
  padding: 1.5rem 1.5rem 1.25rem;
  position: relative;
}
.receipt::before {
  content: "";
  position: absolute;
  left: 1.5rem; right: 1.5rem; top: 0;
  border-top: 2px dashed var(--line-strong);
}

.receipt-head { display: flex; flex-direction: column; margin-bottom: 1rem; }
.receipt-kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
}
.receipt-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
}

.split-bar {
  width: 100%;
  height: 0.9rem;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.seg-net { fill: var(--seg-net); background: var(--seg-net); }
.seg-tax { fill: var(--seg-tax); background: var(--seg-tax); }
.seg-ni { fill: var(--seg-ni); background: var(--seg-ni); }
.seg-loan { fill: var(--seg-loan); background: var(--seg-loan); }
.seg-pension { fill: var(--seg-pension); background: var(--seg-pension); }

.swatch {
  display: inline-block;
  width: 0.7rem; height: 0.7rem;
  border-radius: 2px;
  margin-right: 0.5rem;
  vertical-align: 0.05em;
}

.receipt-lines {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.receipt-lines th {
  text-align: left;
  font-weight: 400;
  padding: 0.45rem 0;
}
.receipt-lines td {
  text-align: right;
  padding: 0.45rem 0;
  white-space: nowrap;
}
.receipt-lines tbody tr { border-bottom: 1px solid var(--line); }
.receipt-total th,
.receipt-total td {
  font-weight: 700;
  font-size: 1.1rem;
  padding-top: 0.75rem;
  border-bottom: 4px double var(--ink);
}
.receipt-lines tfoot tr:last-child th,
.receipt-lines tfoot tr:last-child td { color: var(--ink-soft); }

.receipt-note {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Sections */

.section { padding: 3.5rem 0; }
.section-alt {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-title { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin-bottom: 1.5rem; }

/* Calculator hubs */

.hub-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.hub {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 0.5rem;
}

.hub-title {
  font-size: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--brand);
  margin-bottom: 0.25rem;
}

.calc-list { list-style: none; margin: 0; padding: 0; }
.calc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.calc:last-child { border-bottom: 0; }
.calc-name { font-weight: 600; }
.calc-summary { flex-basis: 100%; font-size: 0.95rem; color: var(--ink-soft); }
.calc-soon .calc-name { color: var(--ink-soft); }

.badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: #f3efe4;
  color: #5c4a1f;
}

/* Key figures */

.figures-grid {
  display: grid;
  gap: 2rem;
}

.figures {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.975rem;
}
.figures th, .figures td {
  text-align: left;
  padding: 0.7rem 0.5rem 0.7rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.figures thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
}
.figures tbody th { font-weight: 500; }
.figures td:nth-child(2) { font-weight: 700; white-space: nowrap; }
.figures td:last-child { white-space: nowrap; font-size: 0.9rem; }

/* Principles */

.principles {
  list-style: none;
  counter-reset: principle;
  margin: 0; padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.principles li {
  counter-increment: principle;
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
}
.principles li::before {
  content: counter(principle, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.principles h3 { font-size: 1.15rem; }
.principles p { color: var(--ink-soft); margin: 0; }

/* Footer */

.site-footer {
  background: #10241e;
  color: #d9e4df;
  padding: 3rem 0 1.5rem;
  font-size: 0.95rem;
}
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: #f2c46d; }

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.footer-about { grid-column: 1 / -1; max-width: 38rem; }
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.footer-disclaimer { color: #fff; }
.footer-heading {
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a9bdb5;
  margin-bottom: 0.75rem;
}
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0.4rem; }

.footer-base {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: #a9bdb5;
  font-size: 0.85rem;
}
.footer-base p { margin: 0; }

/* Wider screens */

@media (min-width: 56rem) {
  .hero { padding: 4.5rem 0 5rem; }
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; }
  .figures-grid { grid-template-columns: 0.8fr 1.2fr; gap: 3rem; }
  .footer-about { grid-column: auto; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

@media print {
  .site-header, .site-footer, .hero-actions, .skip-link { display: none; }
  body { background: #fff; }
}

/* Breadcrumbs */

.breadcrumbs {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  margin: 0 auto;
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.35rem;
  color: var(--line-strong);
}
.breadcrumbs [aria-current="page"] { color: var(--ink-soft); }

/* Information pages */

.page-head {
  padding: 2.5rem 0 1.75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}
.page-head h1 { font-size: clamp(2rem, 5vw, 2.75rem); max-width: 22ch; }
.page-meta { font-size: 0.875rem; color: var(--ink-soft); margin: 0; }

.prose {
  max-width: 46rem;
  padding-bottom: 4rem;
}
.prose h2 { font-size: 1.5rem; margin-top: 2.25rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4rem; }
.prose li::marker { color: var(--brand); }

.contact-email { font-size: 1.3rem; font-weight: 600; }

.owner-placeholder {
  display: inline;
  background: #fff4d6;
  color: #5c4100;
  border: 1px dashed #b7791f;
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-weight: 600;
}

.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem 0.5rem;
  margin-bottom: 1.5rem;
}
.toc-title {
  font-family: var(--font-body);
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 0.5rem !important;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  margin: 1rem 0 1.5rem;
  font-size: 0.975rem;
}
.data-table caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: 0.5rem;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.data-table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
}
.data-table tbody th { font-weight: 500; }

.source-list { font-size: 0.925rem; list-style: disc outside; padding-left: 1.1rem; margin: 0 0 1rem; }
.source-list li::marker { color: var(--brand); }
.source-list a { display: block; text-decoration: none; }
.source-title { display: block; text-decoration: underline; text-underline-offset: 0.18em; line-height: 1.35; }
.source-url {
  display: block;
  color: var(--ink-soft);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.error-page { border-bottom: 0; padding: 4rem 0 5rem; }

/* Calculator pages */

.calc-head {
  padding: 1.25rem 0 1rem;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(11, 93, 75, 0.05) 31px 32px);
  border-bottom: 1px solid var(--line);
}
.calc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; margin-bottom: 0.35rem; }
.calc-head h1 { font-size: clamp(1.75rem, 4.5vw, 2.4rem); margin: 0; }
.calc-head .lede { margin: 0; max-width: none; color: var(--ink-soft); font-size: 0.975rem; }
.year-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-strong);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.calc-layout {
  display: grid;
  gap: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  align-items: start;
}

.calc-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.field { margin-bottom: 1.1rem; }
.field label, .field legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.field-group { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.field-group .field { margin-bottom: 0.6rem; }
.optional { font-weight: 400; color: var(--ink-soft); font-size: 0.925rem; }

.calc-form input[type="text"],
.calc-form select {
  width: 100%;
  height: 2.875rem;
  padding: 0.5rem 0.7rem;
  border: 2px solid var(--ink-soft);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.calc-form input[type="text"]:focus,
.calc-form select:focus { border-color: var(--brand); }

.input-prefix { position: relative; }
.input-prefix span {
  position: absolute;
  left: 0.75rem; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font-weight: 600;
}
.input-prefix input[type="text"] { padding-left: 1.75rem; font-size: 1.15rem; font-weight: 600; }

/* Checkboxes as two columns of pill options; each whole pill is the tap target. */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  font-weight: 400 !important;
  margin: 0 !important;
  cursor: pointer;
  line-height: 1.25;
}
/* Higher specificity than ".field label", which would make these block-level. */
.checks .check, .radios .check { display: flex; }
.checks .check {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 1.4rem;
  background: var(--surface);
  font-size: 0.95rem;
}
.checks .check:hover { border-color: var(--brand); }
.checks .check:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); font-weight: 600 !important; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--brand); flex: none; }

.pension-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pension-row .field label { font-weight: 500; font-size: 0.925rem; }

/* "More options": a details element with a chevron that turns when open. */
.more-options { margin: 0 0 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.more-options summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--brand);
  list-style: none;
  border-radius: 6px;
}
.more-options summary::-webkit-details-marker { display: none; }
.more-options summary::after,
.nav-menu summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 0.15s ease;
}
.more-options[open] summary::after,
.nav-menu[open] summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.more-options summary:focus-visible,
.nav-menu summary:focus-visible,
.bands summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--brand-tint);
}
.more-options[open] { padding-bottom: 0.25rem; }
.summary-text { display: flex; flex-direction: column; padding: 0.4rem 0; line-height: 1.3; }
.summary-hint { font-size: 0.85rem; font-weight: 400; color: var(--ink-soft); }
.more-options[open] summary { margin-bottom: 0.5rem; }

/* Keep a clear gap around the Calculate button: nothing else sits beside it. */
.form-actions { margin: 1.25rem 0 0; }
.form-actions .button { border: 0; font: inherit; font-weight: 600; cursor: pointer; width: 100%; justify-content: center; font-size: 1.05rem; }

.field-error { color: #a4161a; font-weight: 600; margin: 0 0 0.35rem; }
.field-has-error input[type="text"], .field-has-error select { border-color: #a4161a; }

.error-summary {
  border: 3px solid #a4161a;
  border-radius: 6px;
  padding: 0.9rem 1rem 0.4rem;
  margin-bottom: 1.25rem;
}
.error-summary h2 { font-family: var(--font-body); font-size: 1.05rem; margin-bottom: 0.4rem; }
.error-summary ul, .error-list { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.error-summary a, .error-list a { color: #a4161a; font-weight: 600; }

/* Result */

.result-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.result-empty { border-top-color: var(--line-strong); color: var(--ink-soft); }
.result-title { font-size: 1.35rem; margin-bottom: 0.15rem; }
.result-sub { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1rem; }

.headline-figures { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-bottom: 1rem; }
.headline { margin: 0; display: flex; flex-direction: column; }
.headline-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 700; }
.headline-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--brand-strong);
}
.headline-secondary .headline-value { font-size: clamp(1.4rem, 5vw, 1.7rem); color: var(--ink); margin-top: auto; }

.result-table, .compare-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}
.result-table th, .result-table td,
.compare-table th, .compare-table td { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.result-table td, .compare-table td { text-align: right; white-space: nowrap; padding-left: 0.6rem; }
.result-table thead th, .compare-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: right;
  border-bottom: 2px solid var(--ink);
}
.result-table tbody th, .compare-table tbody th { text-align: left; font-weight: 400; }
.result-total th, .result-total td,
.compare-table tfoot th, .compare-table tfoot td {
  font-weight: 700;
  text-align: right;
  border-bottom: 4px double var(--ink);
}
.result-total th, .compare-table tfoot th { text-align: left; }
.compare-table caption { text-align: left; font-weight: 600; padding-bottom: 0.4rem; }

.result-extra { margin: 0.9rem 0; font-size: 0.95rem; }

.rates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0 0 1rem; }
.rates div { background: var(--paper); border-radius: 8px; padding: 0.75rem; }
.rates dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; }
.rates dd { margin: 0; }
.rates dd:first-of-type { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.rate-note { font-size: 0.85rem; color: var(--ink-soft); }

.pension-note {
  border: 1px solid var(--line);
  border-left: 4px solid var(--seg-pension);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}
.pension-note h3 { font-size: 1.05rem; }

.bands { margin-bottom: 1rem; }
.bands summary { cursor: pointer; font-weight: 600; color: var(--brand); padding: 0.4rem 0; }

.result-small { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

[aria-busy="true"] .result-card { opacity: 0.6; }

/* Explanation and sources */

.explainer {
  display: grid;
  gap: 2rem;
  padding-bottom: 4rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
.explainer .prose { padding-bottom: 0; }

.sources-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  align-self: start;
  font-size: 0.95rem;
}
.sources-box h2 { font-size: 1.2rem; }

/* Form and result side by side from about 900px; stacked below that, with the
   form card capped so its inputs do not stretch across a tablet. */
.calc-form { width: 100%; max-width: 36rem; }
@media (min-width: 56.25rem) {
  .calc-layout { grid-template-columns: 22rem 1fr; gap: 2rem; padding-top: 1.25rem; }
  .calc-form { position: sticky; top: 1rem; max-width: none; }
}
@media (min-width: 60rem) {
  .explainer { grid-template-columns: minmax(0, 68ch) minmax(16rem, 1fr); gap: 3rem; }
  .sources-box { position: sticky; top: 1rem; }
}

/* Let grid columns shrink to the screen; tables scroll inside their card if ever needed. */
.calc-layout > *, .explainer > * { min-width: 0; }
.table-scroll { overflow-x: auto; }
@media (max-width: 30rem) {
  .result-card, .calc-form { padding: 1rem; }
  .result-table, .compare-table { font-size: 0.875rem; }
  .result-table td, .compare-table td { padding-left: 0.4rem; }
}

.related-title { font-size: 1.05rem !important; margin-top: 1.25rem; }
.related-list { padding-left: 1.1rem; }
.conversion { font-size: 0.95rem; margin: 0 0 1rem; }
.conversion strong { font-variant-numeric: tabular-nums; }
.result-table td.num-left { text-align: left; }
.field-hint { font-size: 0.875rem; color: var(--ink-soft); margin: -0.6rem 0 1.1rem; }
.row-chosen th, .row-chosen td { font-weight: 700; }
.radios { display: grid; gap: 0.25rem; }
.radios .check { align-items: flex-start; padding: 0.4rem 0; }
.radios .check input { margin-top: 0.05rem; }
.field-hint-tight { margin: 0.4rem 0 0; }
.notice {
  background: #fff4d6;
  border-left: 4px solid #b7791f;
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
}
.band-range { color: var(--ink-soft); font-size: 0.85rem; }

/* Touch targets: source and related links need room for a fingertip (WCAG 2.2 target size). */
.source-list li, .related-list li { margin-bottom: 0.35rem; }
.related-list a { display: inline-block; padding: 0.2rem 0; min-height: 24px; }
.source-list li { margin-bottom: 0.6rem; }
.source-list a { padding: 0.1rem 0; min-height: 24px; }

/* Guides */
.guide-list { list-style: none; margin: 0 0 4rem; padding: 0; display: grid; gap: 0.25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.guide-list li { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.guide-link { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.2rem; }
.sources-box .button { width: 100%; justify-content: center; }


/* Simpler home page and salary result */
.home-start { padding: 2rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.home-start h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); margin-bottom: 1.25rem; }
.big-buttons {
  list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.big-button {
  display: flex; flex-direction: column; justify-content: center; min-height: 4.5rem;
  padding: 0.9rem 1.1rem; border-radius: var(--radius); background: var(--brand); color: #fff;
  text-decoration: none; box-shadow: 0 1px 0 var(--brand-strong);
}
.big-button:hover, .big-button:focus-visible { background: var(--brand-strong); color: #fff; }
.big-button-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.big-button-hint { font-size: 0.9rem; color: #d7ebe4; }
.home-trust { font-size: 0.925rem; color: var(--ink-soft); margin: 0; }
.headline-single { margin: 0 0 1rem; }
.headline-sub { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.15rem; }
.example-note {
  font-size: 0.9rem; background: var(--brand-tint); border-radius: 6px;
  padding: 0.5rem 0.75rem; margin: 0 0 0.75rem;
}

/* Phones: bring the inputs and the result up. The tax year stays in the badge,
   the result and the page title; breadcrumbs stay in the page's structured data. */
@media (max-width: 599px) {
  .breadcrumbs { display: none; }
  .calc-head .lede { display: none; }
  .calc-head { padding: 0.75rem 0 0.6rem; }
  .calc-title { margin-bottom: 0; }
  .calc-layout { padding-top: 0.75rem; }
}

/* Calculator switcher: one row of chips under the header, scrolls sideways when
   it does not fit. Plain links, so it works without JavaScript. */
.switcher { background: var(--surface); border-bottom: 1px solid var(--line); }
.switcher-list {
  list-style: none;
  margin: 0 auto;
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  scroll-padding-inline: 1rem;
  /* Scrollbar hidden visually; the row still scrolls by touch, trackpad, and
     keyboard (tabbing to a chip scrolls it into view). */
  scrollbar-width: none;
}
.switcher-list::-webkit-scrollbar { display: none; }
/* A soft fade at the right edge hints that the row scrolls, on narrow screens only. */
@media (max-width: 74rem) {
  .switcher-list {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  }
}
.switcher-list li { flex: none; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { border-color: var(--brand); color: var(--brand-strong); }
.chip[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* Grouped "Calculators" menu (a details element). */
.site-nav { align-items: center; }
.nav-menu { position: relative; }
.nav-menu summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.975rem;
  border-radius: 4px;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover { color: var(--brand); }
.nav-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  width: min(36rem, calc(100vw - 2rem));
  display: grid;
  gap: 1rem 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(23, 32, 29, 0.12);
}
.nav-group-title {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav-group ul { list-style: none; margin: 0; padding: 0; }
.site-nav .nav-panel a { display: block; padding: 0.55rem 0; border-bottom: 0; }
.site-nav .nav-panel a:hover { color: var(--brand); text-decoration: underline; }
.nav-all { grid-column: 1 / -1; margin: 0; border-top: 1px solid var(--line); padding-top: 0.25rem; font-size: 0.9rem; }
@media (min-width: 40rem) {
  .nav-panel { grid-template-columns: 1fr 1fr; align-items: start; }
  .nav-group:first-child { grid-row: 1 / span 3; }
  .nav-group:not(:first-child) { grid-column: 2; }
}
@media (min-width: 56rem) {
  .nav-panel { left: auto; right: -12rem; }
}

/* Result: text legend for the bar, one-line disclaimer, "Work out next". */
.split-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  margin: -0.35rem 0 0.9rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.split-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.split-legend strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.result-disclaimer { margin: -0.4rem 0 1rem; font-size: 0.85rem; color: var(--ink-soft); }
.next-box {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.next-title { font-size: 1.1rem; margin-bottom: 0.4rem; }
.next-list { list-style: none; margin: 0; padding: 0; }
.next-list li { padding: 0.6rem 0; border-top: 1px solid var(--line); }
.next-list a { display: inline-block; font-weight: 600; min-height: 24px; }
.next-reason { display: block; font-size: 0.9rem; color: var(--ink-soft); }
.next-carried { color: var(--brand-strong); }
.split-legend .swatch { margin-right: 0; }
/* On calculator pages the switcher shows where you are, so the breadcrumb bar is
   left out of the layout; the breadcrumb stays in the page's structured data. */
.switcher + .breadcrumbs { display: none; }
.source-check { margin-bottom: 0.75rem; }
.sources-intro { margin: 0 0 0.35rem; font-weight: 600; }

/* Design QA fixes */
.site-footer :focus-visible { outline-color: #f2c46d; }
.field-group legend { padding: 0; }
/* Same chevron on every expandable section. */
.bands summary { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; list-style: none; border-radius: 6px; }
.bands summary::-webkit-details-marker { display: none; }
.bands summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 0.15s ease;
}
.bands[open] summary::after { transform: translateY(0.1rem) rotate(-135deg); }
/* Bullets stay on the first line of a wrapped link. */
.related-list a { display: inline; }
.related-list li { padding: 0.15rem 0; }
/* Phones: the legend under the bar names each colour, so table rows drop the swatch
   rather than letting it sit on a line of its own. */
@media (max-width: 30rem) {
  .result-table .swatch { display: none; }
}
/* Six home buttons: three across on wide screens, so no row is left half empty. */
@media (min-width: 56rem) {
  .big-buttons { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile QA: every control outside running text is at least 44px tall. */
.brand, .site-nav > a, .skip-link { min-height: 2.75rem; display: inline-flex; align-items: center; }
.source-list a { min-height: 2.75rem; padding: 0.35rem 0; }
.next-list li { padding: 0.25rem 0; }
.next-list a { display: flex; align-items: center; min-height: 2.75rem; }
.next-reason { margin-top: -0.35rem; padding-bottom: 0.4rem; }

/* Narrow phones (360-415px): keep every column of the result tables on screen. */
@media (max-width: 26rem) {
  .result-card { padding: 1rem 0.75rem; }
  .result-table td, .compare-table td, .result-card .data-table td { padding-left: 0.35rem; }
  .result-table thead th, .compare-table thead th, .result-card .data-table thead th {
    white-space: normal;
    letter-spacing: 0.02em;
    vertical-align: bottom;
  }
  .result-card .data-table th, .result-card .data-table td { padding-left: 0.35rem; padding-right: 0; }
  .result-card .data-table th:first-child { padding-left: 0; }
  .result-card .data-table td { white-space: nowrap; }
}
@media (max-width: 26rem) {
  .result-table td { padding-left: 0.25rem; }
  /* Tables too wide for a narrow phone: the row label goes on its own line and the
     amounts sit in columns beneath it. Explicit ARIA roles in the markup keep the
     table readable to screen readers when the display changes. */
  .stack-on-phone, .stack-on-phone thead, .stack-on-phone tbody, .stack-on-phone tfoot { display: block; }
  .stack-on-phone tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0.35rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--line);
  }
  .stack-on-phone th, .stack-on-phone td { border: 0 !important; padding: 0 !important; }
  .stack-on-phone th[scope="row"] { grid-column: 1 / -1; text-align: left; margin-bottom: 0.1rem; }
  .stack-on-phone thead th:first-child { display: none; }
  .stack-on-phone thead tr { border-bottom: 2px solid var(--ink); }
  .stack-on-phone tfoot tr { border-bottom: 4px double var(--ink); }
}