/* ==========================================================================
   CIS Tax Tools — stylesheet
   Mobile first. Most construction-trade traffic is on a phone.
   ========================================================================== */

:root {
  --bg:            #f7f7f5;
  --surface:       #ffffff;
  --surface-2:     #f0f0ed;
  --border:        #dcdcd6;
  --border-strong: #c2c2ba;
  --text:          #1a1a18;
  --text-muted:    #5c5c56;
  --accent:        #1a5c3a;
  --accent-hover:  #14472d;
  --accent-soft:   #e6f0ea;
  --warn:          #8a5300;
  --warn-soft:     #fdf3e2;
  --band:          #16181c;
  --band-2:        #20242a;
  --band-text:     #f2f3f1;
  --band-muted:    #9aa1a8;
  --band-line:     #2e333a;
  --radius:        10px;
  --radius-sm:     6px;
  --maxw:          74rem;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #14151a;
    --surface:       #1c1e24;
    --surface-2:     #23252c;
    --border:        #333640;
    --border-strong: #474b57;
    --text:          #e9e9ec;
    --text-muted:    #a2a5ae;
    --accent:        #5fbd8b;
    --accent-hover:  #7ccca0;
    --accent-soft:   #16302343;
    --warn:          #e0a94f;
    --warn-soft:     #3a2f1a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:            #14151a;
  --surface:       #1c1e24;
  --surface-2:     #23252c;
  --border:        #333640;
  --border-strong: #474b57;
  --text:          #e9e9ec;
  --text-muted:    #a2a5ae;
  --accent:        #5fbd8b;
  --accent-hover:  #7ccca0;
  --accent-soft:   #16302343;
  --warn:          #e0a94f;
  --warn-soft:     #3a2f1a;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.15rem; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.header-inner {
  display: flex; align-items: center; gap: .9rem;
  min-height: 3.6rem;
}
.theme-toggle { flex: none; }
.brand {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  font-family: var(--display); font-weight: 700; color: var(--text);
  text-decoration: none; font-size: 1.02rem; letter-spacing: -.01em;
  white-space: nowrap;
}
.brand-mark {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font-weight: 700; font-size: .95rem;
}
/* One scrollable row on a phone rather than four stacked rows. */
.site-nav {
  margin-left: auto; display: flex; gap: 1.1rem; font-size: .93rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px; min-width: 0;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--accent); }

.theme-toggle {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); border-radius: var(--radius-sm);
  width: 2.1rem; height: 2.1rem; cursor: pointer; font-size: .95rem; line-height: 1;
}
.theme-toggle:hover { border-color: var(--border-strong); color: var(--text); }

/* ---------- Typography ---------- */
h1 { text-wrap: balance; font-family: var(--display); font-weight: 700; font-size: clamp(1.65rem, 4.2vw, 2.3rem); line-height: 1.18; margin: 0 0 .6rem; letter-spacing: -.015em; }
h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.35rem, 3.1vw, 1.6rem); line-height: 1.22;
  margin: 2.9rem 0 .85rem; letter-spacing: -.015em; text-wrap: balance;
}
.prose > h2 { padding-top: 1.5rem; border-top: 1px solid var(--border); }
.prose > h2:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
h3 { font-family: var(--display); font-weight: 600; font-size: 1.12rem; margin: 1.9rem 0 .45rem; letter-spacing: -.008em; }
p  { margin: 0 0 1rem; }
.lede { font-size: 1.08rem; color: var(--text-muted); max-width: 46rem; }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { border-bottom: 1px solid var(--border); background: var(--surface); }
.breadcrumbs ol {
  list-style: none; margin: 0; padding: .55rem 0;
  display: flex; flex-wrap: wrap; gap: .3rem .55rem;
  font-size: .82rem; color: var(--text-muted);
}
.breadcrumbs li { display: flex; align-items: center; gap: .55rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--border-strong); }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 550; }

/* ---------- Page shell ---------- */
.page { padding: 2rem 0 3.5rem; }
.page-head { margin-bottom: 1.8rem; max-width: 46rem; }

/* ---------- Calculator ---------- */
.calc {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  margin: 1.5rem 0 0;
}
@media (min-width: 56rem) {
  .calc { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card + .card { margin-top: 1.1rem; }
.card-title {
  font-family: var(--display); font-weight: 600; font-size: .76rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 1rem;
}
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--accent); }

/* ---------- Link cards: a title you can read, and an obvious target ---------- */
.link-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.2rem;
  transition: border-color .12s ease, transform .12s ease;
}
.link-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.link-card h3,
.link-card .lc-title {
  font-family: var(--display); font-weight: 600;
  font-size: 1.02rem; line-height: 1.3; letter-spacing: -.01em;
  margin: 0 0 .35rem; text-transform: none;
}
.link-card .lc-title a { color: var(--text); text-decoration: none; }
.link-card:hover .lc-title a { color: var(--accent); }
/* whole card clickable without nesting links */
.link-card .lc-title a::after { content: ""; position: absolute; inset: 0; }
.link-card p { font-size: .9rem; color: var(--text-muted); margin: 0; line-height: 1.55; }
.link-card .lc-tag {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 3px; padding: .12rem .4rem; margin-bottom: .5rem;
}
.link-card .lc-more {
  display: inline-block; margin-top: .7rem;
  font-size: .84rem; font-weight: 600; color: var(--accent);
}
.link-card .lc-more::after { content: " \2192"; }

/* an even grid that fills, rather than orphan rows */
.card-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 1.4rem 0 0;
}

.field { margin-bottom: 1.05rem; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-weight: 550; font-size: .93rem; margin-bottom: .3rem; }
.field .hint { display: block; font-size: .82rem; color: var(--text-muted); margin-top: .3rem; line-height: 1.5; }

.input-money { position: relative; display: block; }
.input-money::before {
  content: "£"; font-family: var(--mono); position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 1rem; line-height: 1; pointer-events: none; z-index: 1;
}

input[type="number"], input[type="text"], input[type="date"], textarea, select {
  font-family: var(--font);
  width: 100%;
  font-size: 1rem;
  padding: .62rem .75rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  min-height: 2.75rem; /* comfortable on a phone */
}
/* figures are monospaced so columns of numbers line up.
   Text fields keep the body font: names and addresses are not figures. */
input[type="number"] { font-family: var(--mono); font-weight: 500; }

/* Must come after the shared input rule above: the `padding` shorthand there
   resets padding-left, which pushed the £ prefix on top of the first digit.
   The extra specificity keeps this safe if the rules are ever reordered. */
.input-money input[type="number"],
.input-money input[type="text"] { padding-left: 2rem; }
.input-money input[type="text"] { font-family: var(--mono); font-weight: 500; }

textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }

/* Inputs have an intrinsic min-content width from their default size.
   Without this they refuse to shrink inside a grid or flex track. */
input, textarea, select { min-width: 0; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
input[type="number"] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* segmented control for status / view */
.segmented {
  display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label {
  text-align: center; cursor: pointer; margin: 0;
  padding: .55rem .7rem; font-size: .9rem; font-weight: 550;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text-muted);
}
.segmented label .pct { display: block; font-family: var(--mono); font-weight: 600;
  font-size: .95rem; margin-top: .1rem; }
/* Word sub-labels, not figures: keep the body font. */
.segmented label .sub { display: block; font-family: var(--font); font-weight: 450;
  font-size: .8rem; margin-top: .1rem; opacity: .8; }
.segmented input:checked + label {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- VAT month grid ---------- */
.vat-months { display: grid; gap: .55rem; grid-template-columns: 1fr; }
@media (min-width: 26rem) { .vat-months { grid-template-columns: 1fr 1fr; } }
.vat-month label { display: block; font-size: .78rem; color: var(--text-muted); margin-bottom: .18rem; }
.vat-month input { min-height: 2.4rem; padding: .4rem .5rem .4rem 1.7rem; font-size: .92rem; }
.vat-month .input-money::before { left: .6rem; font-size: .9rem; }

/* ---------- Result ---------- */
.result-headline {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.1rem;
}
.result-label { font-size: .85rem; color: var(--text-muted); margin: 0 0 .15rem; }
.result-value {
  font-family: var(--mono);
  font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 680;
  letter-spacing: -.02em; margin: 0; color: var(--text); font-variant-numeric: tabular-nums;
}
.result-sub { font-size: .9rem; color: var(--text-muted); margin: .35rem 0 0; }
/* A word sitting beside a figure keeps the body font, not the mono. */
.result-value .unit {
  font-family: var(--font); font-weight: 550; font-size: .5em;
  letter-spacing: 0; color: var(--text-muted); margin-left: .45em;
}

.workings { width: 100%; border-collapse: collapse; font-size: .93rem; }
.workings td:last-child { font-family: var(--mono); font-weight: 500; }
.workings th, .workings td { text-align: left; padding: .5rem .1rem; border-bottom: 1px solid var(--border); }
.workings td:last-child, .workings th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.workings tr:last-child td { border-bottom: 0; }
.workings .row-total td { font-weight: 650; border-top: 2px solid var(--border-strong); border-bottom: 0; padding-top: .65rem; }
.workings .row-sub td { color: var(--text-muted); }
.workings .row-deduct td:last-child { color: var(--warn); }

.badge {
  display: inline-block; font-size: .78rem; font-weight: 600;
  padding: .15rem .5rem; border-radius: 99px;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
}

.notice {
  background: var(--warn-soft); border: 1px solid var(--warn);
  border-radius: var(--radius-sm); padding: .8rem .95rem;
  font-size: .89rem; margin: 1rem 0 0;
}
.notice strong { color: var(--warn); }

.btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: .93rem;
  padding: .6rem 1rem; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  text-decoration: none;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); color: var(--text); }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---------- Comparison strip ---------- */
.compare {
  border-top: 1px solid var(--border);
  margin-top: 1.1rem; padding-top: .9rem;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; font-size: .86rem; color: var(--text-muted);
}
.compare .wrong-value {
  font-family: var(--mono); font-weight: 650; color: var(--warn);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- Verification stamp ---------- */
.verified {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline;
  font-size: .84rem; color: var(--text-muted);
  border-top: 1px solid var(--border); margin-top: 2.5rem; padding-top: .9rem;
}

/* ==========================================================================
   Home page
   ========================================================================== */

.hero { padding: 3.2rem 0 2.6rem; }
@media (min-width: 48rem) { .hero { padding: 4.2rem 0 3.2rem; } }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: 99px;
  padding: .28rem .7rem; margin: 0 0 1.25rem;
}
.hero-eyebrow .dot {
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--accent); flex: none;
}

.hero h1 {
  font-size: clamp(2.1rem, 6.2vw, 3.5rem);
  line-height: 1.04; letter-spacing: -.032em;
  margin: 0 0 1.1rem; max-width: 19ch;
}
.hero h1 .hl { color: var(--accent); }

.hero-lede {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  line-height: 1.6; color: var(--text-muted);
  max-width: 40rem; margin: 0 0 1.8rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.btn-lg { padding: .78rem 1.35rem; font-size: 1rem; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin: 2.2rem 0 0; padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  font-size: .86rem; color: var(--text-muted);
}
.hero-meta b { color: var(--text); font-weight: 650; }

/* ---------- "changed this year" strip: the reason to trust the site ------- */
/* margin-block only: a shorthand here would reset .wrap's margin-inline:auto */
.changed { margin-block: 0 1rem; }
.changed-grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}
.chg {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius); padding: .95rem 1.05rem;
}
.chg .chg-what {
  font-size: .78rem; font-weight: 600; color: var(--text-muted);
  line-height: 1.35; margin: 0 0 .5rem; min-height: 2.1em;
}
.chg .chg-nums {
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: nowrap;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.chg .chg-nums > * { white-space: nowrap; }
.chg .was {
  font-size: .95rem; color: var(--text-muted);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.chg .arr { color: var(--text-muted); font-size: .85rem; }
.chg .now { font-size: 1.25rem; font-weight: 700; color: var(--warn); letter-spacing: -.01em; }
.chg .chg-when { font-size: .74rem; color: var(--text-muted); margin: .4rem 0 0; }

/* ---------- Proof block: the mistake, side by side ----------------------- */
.proof {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.4rem; margin: 1.4rem 0 0;
}
@media (min-width: 44rem) { .proof { padding: 1.8rem; } }
.proof-q { font-size: .95rem; color: var(--text-muted); margin: 0 0 1.2rem; max-width: 46rem; }
.proof-q strong { color: var(--text); }
.proof-cols { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .proof-cols { grid-template-columns: 1fr 1fr; } }
.pcol { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.pcol.bad  { border-color: var(--warn);   background: var(--warn-soft); }
.pcol.good { border-color: var(--accent); background: var(--accent-soft); }
.pcol .p-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  margin: 0 0 .55rem;
}
.pcol.bad  .p-label { color: var(--warn); }
.pcol.good .p-label { color: var(--accent); }
.pcol .p-mark {
  display: grid; place-items: center; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; font-size: .7rem; font-weight: 700; color: #fff;
}
.pcol.bad  .p-mark { background: var(--warn); }
.pcol.good .p-mark { background: var(--accent); }
.pcol .p-fig {
  font-family: var(--mono); font-weight: 700; font-size: 1.8rem;
  letter-spacing: -.02em; margin: 0; font-variant-numeric: tabular-nums;
}
.pcol .p-note { font-size: .85rem; color: var(--text-muted); margin: .35rem 0 0; line-height: 1.5; }
.proof-foot { font-size: .88rem; color: var(--text-muted); margin: 1.2rem 0 0; max-width: 46rem; }

/* ---------- Tool cards with a differentiator line ------------------------ */
.tool-card .lc-edge {
  display: block; margin-top: .6rem; padding-top: .55rem;
  border-top: 1px dashed var(--border);
  font-size: .82rem; color: var(--accent); font-weight: 550;
}

/* ---------- Closing trust band ------------------------------------------ */
.trust-band {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; margin-top: 2.6rem;
}
.trust-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-grid h3 { margin: 0 0 .3rem; font-size: .95rem; }
.trust-grid p { margin: 0; font-size: .87rem; color: var(--text-muted); line-height: 1.55; }

/* ==========================================================================
   Home page, v2
   ========================================================================== */

/* ---- small label above a section ---------------------------------------- */
.eyebrow {
  display: block; font-family: var(--display);
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 .55rem;
}
.eyebrow.on-band { color: var(--accent); }

/* ---- hero: headline left, proof right ----------------------------------- */
.hero-split {
  display: grid; gap: 2.4rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .hero-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.2rem; }
}

/* two weights and two tones in one headline */
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.03; letter-spacing: -.035em;
  margin: 0 0 1.15rem; max-width: 16ch; font-weight: 700;
}
.hero h1 .light { font-weight: 600; color: var(--text-muted); letter-spacing: -.03em; }
.hero h1 .hl { color: var(--accent); }
.hero h1 .dot { color: var(--accent); }

/* topic chips, straight from the reference */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; }
.chip {
  font-size: .8rem; font-weight: 600; padding: .32rem .78rem;
  border-radius: 99px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-muted); text-decoration: none;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* the proof panel that fills the right of the hero */
.hero-proof {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.hero-proof .hp-q { font-size: .88rem; color: var(--text-muted); margin: 0 0 1.1rem; line-height: 1.55; }
.hero-proof .hp-q strong { color: var(--text); font-family: var(--mono); font-weight: 600; }
.hp-rows { display: grid; gap: .7rem; }
.hp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: var(--radius-sm); padding: .85rem 1rem; border: 1px solid var(--border);
}
.hp-row.bad  { background: var(--warn-soft);   border-color: var(--warn); }
.hp-row.good { background: var(--accent-soft); border-color: var(--accent); }
.hp-row .hp-label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hp-row.bad  .hp-label { color: var(--warn); }
.hp-row.good .hp-label { color: var(--accent); }
.hp-row .hp-fig {
  font-family: var(--mono); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hero-proof .hp-foot { font-size: .82rem; color: var(--text-muted); margin: 1.05rem 0 0; line-height: 1.5; }

/* ---- full-bleed dark band ----------------------------------------------- */
.band {
  background: var(--band); color: var(--band-text);
  padding: 3.2rem 0; margin: 3.4rem 0 0;
}
.band h2 { color: var(--band-text); border: 0 !important; padding-top: 0 !important; margin-top: 0; }
.band .band-note { color: var(--band-muted); max-width: 44rem; margin: .5rem 0 0; font-size: .95rem; }
.band-grid {
  display: grid; gap: .9rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.band-card {
  background: var(--band-2); border: 1px solid var(--band-line);
  border-radius: var(--radius); padding: 1.15rem 1.2rem;
  text-decoration: none; display: block;
  transition: border-color .12s ease, transform .12s ease;
}
.band-card:hover { border-color: var(--warn); transform: translateY(-2px); }
.band-card .bc-what { font-size: .8rem; color: var(--band-muted); line-height: 1.4; margin: 0 0 .65rem; min-height: 2.3em; }
.band-card .bc-nums { display: flex; align-items: baseline; gap: .45rem; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.band-card .bc-nums > * { white-space: nowrap; }
.band-card .was { font-size: .95rem; color: var(--band-muted); text-decoration: line-through; }
.band-card .arr { color: var(--band-muted); font-size: .85rem; }
.band-card .now { font-size: 1.35rem; font-weight: 700; color: var(--warn); letter-spacing: -.015em; }
.band-card .bc-when { font-size: .74rem; color: var(--band-muted); margin: .45rem 0 0; }

/* ---- numbered steps ------------------------------------------------------ */
.steps { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.5rem; counter-reset: step; }
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.3rem 1.35rem;
}
.step .st-num {
  font-family: var(--mono); font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; color: var(--accent); margin: 0 0 .6rem;
}
.step h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.step p { margin: 0; font-size: .88rem; color: var(--text-muted); line-height: 1.55; }

/* ==========================================================================
   UX
   ========================================================================== */

/* ---- 1. Which section am I in ------------------------------------------- */
.site-nav a { position: relative; padding-bottom: 2px; }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent); border-radius: 2px;
}

/* ---- 2. A table that scrolls should look like one ----------------------- */
.table-scroll {
  position: relative;
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(0,0,0,0)) left center,
    linear-gradient(to left,  var(--bg) 30%, rgba(0,0,0,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) right center;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.scroll-hint {
  display: none; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--text-muted); margin: .35rem 0 0;
}
.table-scroll.is-scrollable + .scroll-hint { display: flex; }
@media (min-width: 46rem) { .scroll-hint { display: none !important; } }

/* ---- 3. A heading you can link to ---------------------------------------- */
.prose h2[id] { scroll-margin-top: 5rem; }
.anchor {
  opacity: 0; margin-left: .4rem; font-size: .8em; color: var(--text-muted);
  text-decoration: none; transition: opacity .12s ease;
}
h2:hover .anchor, .anchor:focus { opacity: 1; }

/* ---- 4. Where to go next ------------------------------------------------- */
.next-up { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.next-up .nu-head {
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 1rem;
}

/* ---- 5. The answer follows you on a phone ------------------------------- */
.sticky-result {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -4px 16px rgba(0,0,0,.10);
  padding: .6rem 1.15rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%); transition: transform .18s ease;
}
.sticky-result.is-on { transform: translateY(0); }
.sticky-result .sr-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--maxw); margin-inline: auto;
}
.sticky-result .sr-label {
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: 0;
}
.sticky-result .sr-value {
  font-family: var(--mono); font-weight: 700; font-size: 1.3rem;
  letter-spacing: -.02em; margin: 0; font-variant-numeric: tabular-nums;
}
.sticky-result .sr-jump {
  font-size: .82rem; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 99px; padding: .35rem .8rem; text-decoration: none; white-space: nowrap;
}
@media (min-width: 56rem) { .sticky-result { display: none; } }
@media print { .sticky-result { display: none !important; } }

/* ---- 6. Confirm that a figure just changed ------------------------------ */
@keyframes figpulse {
  0%   { background-color: var(--accent-soft); }
  100% { background-color: transparent; }
}
.just-changed { animation: figpulse .5s ease-out; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .just-changed { animation: none; } }

/* ---- 7. A focus ring you can actually see ------------------------------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.link-card:focus-within { border-color: var(--accent); }

/* A second heading inside a results card sits right under the table above it.
   Give it room, without adding a margin to the first one in the card. */
.card .workings + .card-title { margin-top: 1.5rem; }

/* ---------- The sidebar ----------
   Inserted by includes/footer.php as the last child of .wrap.page, then
   placed here. It sits beside the whole page rather than inside .prose,
   so the main column stays free to run wide for tables and card grids.

   On a phone it is a flex container so the section links can be ordered
   up under the heading, where they are useful, instead of stranded at the
   bottom of the page. */
.wrap.page.has-rail { display: flex; flex-direction: column; }
.wrap.page.has-rail > *          { order: 3; min-width: 0; }
.wrap.page.has-rail > .page-head { order: 1; }
.wrap.page.has-rail > .doc-rail  { order: 2; }

.doc-rail { margin-block: 0 2rem; }
.rail-block { margin-bottom: 1.6rem; }
.rail-head {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 .6rem; padding-bottom: .45rem;
  border-bottom: 1px solid var(--border);
}
.rail-list { list-style: none; margin: 0; padding-left: 0; counter-reset: rail; }
.rail-list li {
  margin: 0 0 .45rem; font-size: .86rem; line-height: 1.45;
  padding-left: 1.5rem; position: relative;
}
.rail-list:not(.plain) li::before {
  counter-increment: rail; content: counter(rail);
  position: absolute; left: 0; top: .05rem;
  font-family: var(--mono); font-size: .72rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rail-list.plain li::before {
  content: ""; position: absolute; left: .25rem; top: .55rem;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.rail-list a { color: var(--text-muted); text-decoration: none; }
.rail-list a:hover { color: var(--accent); text-decoration: underline; }
.rail-note p { font-size: .82rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

@media (min-width: 66rem) {
  .wrap.page.has-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15.5rem;
    column-gap: 3rem;
    align-items: start;
  }
  .wrap.page.has-rail > * { grid-column: 1; }
  .wrap.page.has-rail > .doc-rail {
    grid-column: 2;
    /* 1 / -1 collapses with no explicit rows, so span into the implicit ones */
    grid-row: 1 / span 200;
    align-self: start;
    position: sticky;
    top: 4.5rem;
    margin-block: 0;
    padding-left: 1.25rem;
    border-left: 1px solid var(--border);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}

/* ---------- Diagrams ---------- */
.dgm { width: 100%; height: auto; display: block; max-width: 40rem; margin: 0 auto; }
.dgm-cap  { font-family: var(--display); font-size: 15px; font-weight: 600; fill: var(--text); }
.dgm-sub  { font-size: 12px; fill: var(--text-muted); }
.dgm-note { font-size: 12px; fill: var(--text-muted); }
.dgm-labour   { fill: var(--accent); }
.dgm-excluded { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
.dgm-deduct   { fill: var(--warn); }
.dgm-brace    { stroke: var(--border-strong); stroke-width: 1.4; fill: none; }
.dgm-inbar     { font-size: 12px; font-weight: 600; fill: #fff; }
.dgm-inbar-fig { font-family: var(--mono); font-size: 13px; font-weight: 700; fill: #fff; }
.dgm-inbar.muted, .dgm-inbar-fig.muted { fill: var(--text-muted); }
.dgm-deduct-fig { font-family: var(--mono); font-size: 13px; font-weight: 700; fill: var(--warn); }

.dgm-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.4rem 1.2rem 1.2rem; margin: 1.3rem 0;
}
.dgm-wrap .dgm-caption {
  font-size: .84rem; color: var(--text-muted); text-align: center;
  margin: 1rem auto 0; max-width: 34rem; line-height: 1.5;
}

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -.22em; flex: none; }
.icon-lg { width: 1.6em; height: 1.6em; }

/* a tinted tile holding an icon, used on tool cards */
.icon-tile {
  display: grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent);
  margin-bottom: .85rem;
}
.icon-tile .icon { width: 1.3rem; height: 1.3rem; }
.link-card:hover .icon-tile { background: var(--accent); color: #fff; }

/* icon beside a heading */
.h-icon { display: inline-flex; align-items: center; gap: .55rem; }
.h-icon .icon { color: var(--accent); }

/* on the dark band */
.band .icon-tile { background: var(--band-2); border-color: var(--band-line); color: var(--warn); }

.step .st-icon { color: var(--accent); margin-bottom: .7rem; }
.step .st-icon .icon { width: 1.5rem; height: 1.5rem; }
.trust-grid .icon { color: var(--accent); }

/* ---------- Price summary strip ---------- */
.price-strip {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 1.6rem 0 .5rem;
}
.price-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.price-tile .pt-name {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.01em; margin: 0 0 .5rem;
}
.price-tile .pt-from { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.price-tile .pt-price {
  font-family: var(--mono); font-weight: 600; font-size: 1.65rem;
  letter-spacing: -.02em; margin: .05rem 0 0; font-variant-numeric: tabular-nums;
}
.price-tile .pt-note { font-size: .82rem; color: var(--text-muted); margin: .45rem 0 0; line-height: 1.45; }
.price-tile.is-free { border-color: var(--accent); background: var(--accent-soft); }
.price-tile.is-free .pt-price { color: var(--accent); }

/* the product name column in a long price table */
.prose td.product {
  font-family: var(--display); font-weight: 700; white-space: nowrap;
}
.prose tr.group-start td { border-top: 2px solid var(--border-strong); }

/* ---------- Grouped section heading ---------- */
.group-head {
  display: flex; align-items: baseline; gap: .75rem;
  margin: 2.6rem 0 0;
}
.group-head:first-of-type { margin-top: 1.6rem; }
.group-head h2 {
  margin: 0; padding: 0; border: 0;
  font-size: 1.3rem;
}
.group-head .count {
  font-size: .78rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.group-note { color: var(--text-muted); font-size: .9rem; margin: .4rem 0 0; max-width: 44rem; }

/* ---------- Prose ----------
   ONE measure governs the whole document.

   This was wrong twice before. First the reading measure was put on the
   whole block, which squeezed four-column tables. Then it was moved onto
   the paragraphs alone, which left the headings, their rules, the contents
   box and the tables all running 64rem while the text stopped at 44rem.
   That gap down the right of every page is what read as broken.

   The column below is the measure. Text, headings and their rules all sit
   in it and therefore agree with each other. Only genuinely wide things,
   tables and figures, break out of it. Nothing else needs a max-width, so
   do not add one to a child here: put it in the right track instead. */
.prose {
  display: grid;
  grid-template-columns:
    [full-start text-start] min(46rem, 100%) [text-end]
    minmax(0, 1fr) [full-end];
  align-content: start;
}
.prose > * { grid-column: text; min-width: 0; }
.prose > .table-scroll,
.prose > table,
.prose > .fig,
.prose > .calc,
.prose > .card-grid,
.prose > .group-head,
.prose > .steps,
.prose > .trust-band { grid-column: full; }

.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .4rem; }
.prose table {
  width: 100%; border-collapse: collapse; font-size: .93rem; margin: 1.1rem 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.prose th, .prose td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th {
  font-family: var(--display); font-weight: 600; font-size: .72rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
  background: var(--surface-2); border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover { background: var(--surface-2); }
.prose td > strong:only-child {
  font-family: var(--mono); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* a cell holding only a money figure reads as data, not prose */
.prose td.num, .prose td.figure {
  font-family: var(--mono); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: .4rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 3rem; padding: 2rem 0 1.5rem; }
/* Five equal columns that all start at the top. The brand sits on its own
   strip above, so a long column can never leave a void beside a short one. */
.footer-grid {
  display: grid;
  gap: 1.75rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (min-width: 44rem) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.footer-col { min-width: 0; }
.footer-top {
  padding-bottom: 1.5rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--border);
}
.footer-top .muted { margin: 0; font-size: .9rem; }
.footer-brand { font-weight: 650; margin: 0 0 .2rem; font-family: var(--display); font-size: 1.02rem; }
.footer-heading.spaced { margin-top: 1.2rem; }
.footer-heading { font-weight: 650; font-size: .9rem; margin: 0 0 .5rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.site-footer li { margin-bottom: .35rem; }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.footer-legal { border-top: 1px solid var(--border); margin-top: 1.75rem; padding-top: 1.1rem; }
.footer-legal p { margin: 0 0 .5rem; max-width: 48rem; }

/* ==========================================================================
   Invoice generator
   ========================================================================== */
.inv-layout { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1.5rem; align-items: start; }
@media (min-width: 62rem) { .inv-layout { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
.inv-layout form { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.inv-layout > * { min-width: 0; }
.inv-layout .card + .card { margin-top: 0; }

.item-row {
  display: grid; gap: .4rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) 3.6rem 4.8rem 1.9rem;
  margin-bottom: .5rem;
}
@media (min-width: 30rem) {
  .item-row { grid-template-columns: minmax(0, 1fr) 4.2rem 5.5rem 2rem; }
}
.item-row input { min-height: 2.4rem; padding: .4rem .55rem; font-size: .9rem; }
.item-row .i-del {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted);
  border-radius: var(--radius-sm); height: 2.4rem; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.item-row .i-del:hover { border-color: var(--warn); color: var(--warn); }

.checklist { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.checklist li { display: flex; gap: .55rem; align-items: flex-start; padding: .28rem 0; }
.checklist .tick {
  flex: none; display: grid; place-items: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font-size: .72rem; font-weight: 700; margin-top: .12rem;
}
.checklist li.ok   { color: var(--text); }
.checklist li.ok   .tick { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.checklist li.todo { color: var(--text-muted); }
.checklist li.todo .tick { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }

/* ---- the document itself ---- */
.invoice-doc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem; color: var(--text);
}
.doc-head { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-start; }
.doc-type {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .08em; margin: 0; color: var(--accent);
}
.doc-num { font-family: var(--mono); font-size: 1rem; margin: .2rem 0 0; color: var(--text-muted); }
.doc-from { text-align: right; font-size: .875rem; line-height: 1.5; }
.doc-from p { margin: 0; }
.doc-biz { font-weight: 650; font-size: .95rem; }

.doc-meta {
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
  margin: 1.75rem 0; padding: 1.1rem 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-size: .875rem; line-height: 1.5;
}
@media (min-width: 30rem) { .doc-meta { grid-template-columns: 1.4fr 1fr; } }
.doc-meta p { margin: 0; }
.doc-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .2rem !important; }
.doc-strong { font-weight: 650; }

.doc-items { width: 100%; border-collapse: collapse; font-size: .875rem; }
.doc-items th {
  text-align: left; font-family: var(--display); font-weight: 600; font-size: .72rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
  padding: .4rem .5rem; border-bottom: 1px solid var(--border-strong);
}
.doc-items td { padding: .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.doc-items th:not(:first-child), .doc-items td:not(:first-child) { text-align: right; white-space: nowrap; }
.doc-items td:not(:first-child) { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.doc-empty { color: var(--text-muted); font-style: italic; text-align: center !important; }

.doc-totals { margin: 1rem 0 0 auto; border-collapse: collapse; font-size: .9rem; min-width: 15rem; }
.doc-totals td { padding: .35rem .5rem; }
.doc-totals td:last-child { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-totals .doc-total td {
  font-weight: 700; font-size: 1.05rem; padding-top: .6rem;
  border-top: 2px solid var(--border-strong);
}

.doc-note {
  margin: 1.5rem 0 0; padding: .7rem .9rem; font-size: .85rem;
  background: var(--warn-soft); border: 1px solid var(--warn); border-radius: var(--radius-sm);
}
.doc-terms { margin: 1.5rem 0 0; font-size: .85rem; color: var(--text-muted); }

/* ==========================================================================
   Printing
   A blacklist of things to hide rots: every component added later leaks
   onto the printout, which is how the on-this-page rail ended up there.
   So this is a whitelist. One region per page is marked .print-area, and
   everything that is neither that region, nor an ancestor of it, nor
   inside it, is hidden. Ancestors must stay visible, because a
   display:none ancestor takes its whole subtree down with it.
   ========================================================================== */
@media print {
  @page { margin: 16mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Chrome that never prints, on any page. */
  .site-header, .site-footer, .doc-rail, .breadcrumbs, .btn-row,
  .theme-toggle, .sticky-result, .no-print, #checklist-card, .skip-link,
  .search-page-form, form.calc .hint, .consent {
    display: none !important;
  }

  /* Only a page that HAS a print region hides its article. Scoping this
     matters: hiding .prose unconditionally printed guides as blank pages,
     because on a guide the article is all there is. */
  body:has(.print-area) .prose,
  body:has(.print-area) .verified,
  body:has(.print-area) .page-head,
  body:has(.print-area) .compare,
  body:has(.print-area) .inv-layout form {
    display: none !important;
  }

  /* The whitelist itself: hide everything that is neither the print
     region, nor an ancestor of it, nor inside it. */
  body:has(.print-area) *:not(:has(.print-area)):not(.print-area):not(.print-area *) {
    display: none !important;
  }

  /* The printed region is paper now, not a card. Descendant display is
     deliberately left alone so the card's own layout still works. */
  .print-area {
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .print-area .badge {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
  }
  .print-area table { width: 100%; border-collapse: collapse; }
  .print-area tr, .print-area td, .print-area th { page-break-inside: avoid; }
  .invoice-doc .doc-type { color: #000 !important; }
  .doc-note { border: 1px solid #000 !important; background: #fff !important; }

  /* Provenance line, print only. */
  .print-stamp {
    display: block !important;
    margin: 0 0 1rem !important;
    padding-bottom: .6rem;
    border-bottom: 1px solid #000;
    font-size: .75rem;
    line-height: 1.5;
    color: #000 !important;
  }
  .print-stamp span { color: #000 !important; }
}

/* The stamp exists only for the printout. */
.print-stamp { display: none; }

/* ==========================================================================
   Artwork
   Covers and charts are SVG drawn by PHP, so they take their colours from
   these tokens and follow the theme instead of being baked into a bitmap.
   ========================================================================== */

.cover { display: block; width: 100%; height: 100%; }
.cv-bg     { fill: var(--surface-2); }
.cv-grid   { stroke: var(--border); stroke-width: 1; opacity: .5; }
.cv-bar    { fill: var(--border-strong); opacity: .55; }
.cv-bar.over { fill: var(--accent); opacity: .9; }
.cv-line   { stroke: var(--accent); stroke-width: 2; fill: none; }
.cv-line.dash { stroke-width: 1.5; opacity: .8; }
.cv-line.thin { stroke: var(--text-muted); stroke-width: 1.2; opacity: .7; }
.cv-line.solid { stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cv-solid  { fill: var(--accent); opacity: .85; }
.cv-ghost  { fill: var(--border-strong); opacity: .4; }
.cv-ghost.soft { opacity: .18; }
.cv-accent2 { fill: var(--accent); opacity: .35; }
.cv-solid-c { fill: var(--accent); opacity: .85; }
.cv-ghost-c { fill: var(--border-strong); opacity: .45; }

/* ---- cover on a card ---------------------------------------------------- */
.link-card.has-cover { padding-top: 0; overflow: hidden; }
.link-card .lc-cover {
  display: block;
  margin-inline: -1.25rem;
  margin-block: 0 1.05rem;
  height: 92px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.link-card.has-cover .icon-tile {
  margin-top: -2.6rem;
  position: relative;
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--surface);
}

/* ---- cover at the head of a guide --------------------------------------- */
.guide-cover {
  height: 176px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-block: 0 2rem;
  max-width: 46rem;
}

/* ---- a figure with a caption -------------------------------------------- */
.fig { margin-block: 1.4rem 1.8rem; margin-inline: 0; }
.fig figcaption {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: .6rem;
  padding-left: .1rem;
}

/* ---- price chart --------------------------------------------------------- */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: var(--border); stroke-width: 1; }
.ch-title {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; fill: var(--text-muted);
}
.ch-product {
  font-family: var(--display); font-size: 13px; font-weight: 700; fill: var(--text);
}
.ch-plan { font-size: 12px; fill: var(--text-muted); }
.ch-tick { font-size: 10px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.ch-val  {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  fill: var(--text); font-variant-numeric: tabular-nums;
}
.ch-bar { fill: var(--border-strong); opacity: .55; }
.ch-bar.ch-xero       { fill: var(--accent); opacity: .85; }
.ch-bar.ch-quickbooks { fill: var(--accent); opacity: .45; }
.ch-bar.ch-freeagent  { fill: var(--text-muted); opacity: .55; }

@media (max-width: 40rem) {
  .link-card .lc-cover { height: 76px; }
  .guide-cover { height: 112px; }
}

/* ---- Practice test -------------------------------------------------- */
.quiz-q {
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: 1rem 1.1rem 1.1rem;
  margin: 0 0 1rem;
  background: var(--surface);
}
.quiz-q legend { font-weight: 600; padding: 0 .4rem; line-height: 1.45; }
.quiz-opt {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  padding: .45rem .6rem;
  border-radius: .35rem;
  border: 1px solid transparent;
}
.quiz-opt input { margin: 0; flex: none; }
.quiz-opt.is-right { background: var(--accent-soft); border-color: var(--accent); }
.quiz-opt.is-wrong { background: var(--warn-soft); border-color: var(--warn); }
.quiz-why {
  margin: .7rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--border);
  font-size: .95em;
}

/* ---- Search ---------------------------------------------------------- */
.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;
}

/* Header box. Hidden on small screens, where the nav already competes for room. */
.header-search { display: none; }
@media (min-width: 60rem) {
  .header-search {
    display: flex; align-items: center; gap: .25rem;
    border: 1px solid var(--border); border-radius: 2rem;
    padding: .15rem .15rem .15rem .7rem; background: var(--surface);
  }
  .header-search:focus-within { border-color: var(--accent); }
  .header-search input {
    border: 0; background: none; font: inherit; font-size: .85rem;
    color: var(--text); width: 8.5rem; padding: .3rem 0;
  }
  .header-search input:focus { outline: none; }
  .header-search button {
    display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
    border: 0; border-radius: 50%; background: var(--accent); color: #fff;
    cursor: pointer; flex: none;
  }
  .header-search button:hover { background: var(--accent-hover); }
}

/* Search page */
.search-page-form { display: flex; gap: .6rem; margin: 0 0 2rem; flex-wrap: wrap; }
.search-page-form input {
  flex: 1 1 16rem; font: inherit; padding: .7rem .9rem;
  border: 1px solid var(--border-strong); border-radius: .4rem;
  background: var(--surface); color: var(--text);
}
.search-page-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.search-results { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.search-result {
  padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.search-result:first-child { padding-top: .4rem; }
.sr-kind {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: 0 0 .2rem;
}
.sr-title { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.sr-desc { margin: 0; color: var(--text-muted); font-size: .92rem; }
.sr-snip {
  margin: .35rem 0 0; font-size: .85rem; color: var(--text-muted);
  padding-left: .7rem; border-left: 2px solid var(--border-strong);
}
.search-suggestions {
  list-style: none; margin: .8rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.search-suggestions a {
  display: inline-block; padding: .35rem .8rem; border-radius: 2rem;
  border: 1px solid var(--border); background: var(--surface);
  font-size: .88rem; text-decoration: none;
}
.search-suggestions a:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Cookie choices ----------------------------------------------------
   Sits above the mobile sticky result bar (z-index 45) until a choice is
   made. Reject and Accept carry equal weight on purpose: nudging people
   towards Accept is exactly what UK cookie guidance says not to do.
   ------------------------------------------------------------------------ */
.consent {
  position: fixed; left: 1rem; right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: 46rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  padding: .9rem 1rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.consent[hidden] { display: none; }
.consent-text { margin: 0; flex: 1 1 20rem; font-size: .88rem; line-height: 1.5; }
.consent-text a { color: var(--accent); }
.consent-actions { display: flex; gap: .5rem; flex: none; }

/* A button that reads as a footer link. */
.linklike {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.linklike:hover { text-decoration: underline; }
.linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* In the footer it must match the links beside it (.site-footer a). */
.site-footer .linklike { color: var(--text-muted); }
.site-footer .linklike:hover { color: var(--accent); text-decoration: underline; }