/* Fixxo website styles (D-054 "Trusted craft"). Reads tokens.css variables only:
   build.ps1 fails on any colour literal in this file. Mobile first; breakpoints
   380 / 768 / 1024 / 1440 (WEBSITE_SPEC 2.4). */

/* ----------------------------------------------------------------- fonts */
/* The site ships no webfont at all: headings and body both use the reader's system face
   (San Francisco on iPhone and Mac, Segoe UI on Windows, Roboto on Android). Apple's
   licence does not permit serving SF from a website, and the system stack needs no
   download, so nothing blocks the first paint. The OG cards are still rendered with
   Fraunces from design/fonts (an image, not a webfont). */
/* Body text is the reader's own system font: San Francisco on iPhone and Mac, Segoe UI on
   Windows, Roboto on Android. Apple's licence does not allow SF to be served from a website,
   and the system stack needs no download at all. Only the display face is shipped. */

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-6));
  --gutter: 1rem;
}
@media (min-width: 23.75em) { html { --gutter: 1.25rem; } }
@media (min-width: 48em) { html { --gutter: 2rem; } }
@media (min-width: 64em) { html { --gutter: 2.5rem; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--f-body-size);
  line-height: var(--f-body-lh);
  letter-spacing: -0.006em;
  font-feature-settings: "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
:focus { scroll-margin-top: 88px; }
a, button, input, select, textarea, summary, [tabindex] { scroll-margin-top: 88px; }
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
::selection { background: var(--c-primary-soft); color: var(--c-on-primary-soft); }
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 600; color: var(--c-ink); }
h1, h2, .display {
  font-family: var(--f-display);
  font-feature-settings: "lnum" 1;
}
h1 { font-size: var(--f-h1-size); line-height: var(--f-h1-lh); letter-spacing: var(--f-h1-track); }
h1.hero-title { font-size: var(--f-hero-size); line-height: var(--f-hero-lh); letter-spacing: var(--f-hero-track); }
h2 { font-size: var(--f-h2-size); line-height: var(--f-h2-lh); letter-spacing: var(--f-h2-track); }
h3 { font-family: var(--f-text); font-size: var(--f-h3-size); line-height: var(--f-h3-lh); letter-spacing: -0.012em; }
h4 { font-size: var(--f-label-size); letter-spacing: 0; }
p { margin: 0; }
p, li { max-width: 68ch; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
.prose ul, .prose ol, ul.bullets, ol.numbered { padding-left: 1.25em; }
.prose li + li, ul.bullets li + li, ol.numbered li + li { margin-top: var(--s-2); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-9); }
.prose h3 { margin-top: var(--s-7); }
.prose h2 + *, .prose h3 + * { margin-top: var(--s-3); }
strong, b { font-weight: 600; }
small { font-size: var(--f-caption-size); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }

a {
  color: var(--c-primary);
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color var(--m-fast) var(--m-ease);
}
a:hover { color: var(--c-primary-hover); }
a:visited { color: var(--c-primary); }

.lead { font-size: var(--f-lead-size); line-height: var(--f-lead-lh); color: var(--c-ink2); max-width: 60ch; }
.muted { color: var(--c-ink2); }
.caption { font-size: var(--f-caption-size); line-height: 1.38; color: var(--c-ink3); font-weight: 500; }
.body-s { font-size: var(--f-bodys-size); line-height: var(--f-bodys-lh); color: var(--c-ink2); }
.overline {
  display: inline-block;
  font-size: var(--f-overline-size);
  line-height: 1.33;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink2);
}
.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;
}
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- icons */
.ic {
  width: 1.5rem; height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-sm { width: 1.25rem; height: 1.25rem; }
.ic-xs { width: 1rem; height: 1rem; stroke-width: 2; }

/* ---------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.narrow { max-width: calc(48rem + 2 * var(--gutter)); }
.sec { padding-block: var(--s-10); }
@media (min-width: 64em) { .sec { padding-block: 6rem; } }
.sec-tight { padding-block: var(--s-8); }
.sec-surface { background: var(--c-surface); border-block: 1px solid var(--c-line); }
.sec-head { max-width: 46rem; }
.sec-head > * + * { margin-top: var(--s-3); }
.sec-head + * { margin-top: var(--s-8); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-7); }
/* minmax(0, 1fr): let the single mobile column shrink below its content's min-content width,
   so cards never push past the viewport on very narrow screens (e.g. 280px fold covers). */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 48em) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}
@media (min-width: 64em) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
}
@media (min-width: 48em) and (max-width: 63.9375em) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 64em) {
  .split-form .aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-10); }
  .split-rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split-center { align-items: center; }
  .split-form { grid-template-columns: minmax(0, 35rem) minmax(0, 1fr); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 29.99em) {
  .cta-row:has(> .btn + .btn) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cta-row:has(> .btn + .btn) > .btn { width: 100%; }
}

/* ---------------------------------------------------------- skip link */
.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-ink); color: var(--c-canvas);
  border-radius: var(--r-md);
  font-weight: 600;
}
.skip:focus { top: var(--s-3); color: var(--c-canvas); }


/* ------------------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.hdr-in { display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); }
.brand {
  display: inline-flex; align-items: center; gap: 0.625rem;
  color: var(--c-ink); text-decoration: none;
  min-height: 48px; margin-right: auto;
  border-radius: var(--r-xs);
}
.brand:visited, .brand:hover { color: var(--c-ink); }
.brand-mark { width: 2rem; height: 2rem; color: var(--c-primary); flex: none; }
.brand-word { flex: none; }
@media (max-width: 23.6875em) { .hdr-in { gap: var(--s-2); } .brand { gap: 0.5rem; } .brand-mark { width: 1.75rem; height: 1.75rem; } }
.brand-word { width: 4.6rem; height: 1.62rem; color: var(--c-ink); }
.nav { display: none; }
.nav ul { list-style: none; display: flex; gap: var(--s-1); }
.nav a {
  display: inline-flex; align-items: center; min-height: 48px;
  padding-inline: var(--s-3);
  color: var(--c-ink2); text-decoration: none;
  font-size: var(--f-label-size); font-weight: 500;
  border-radius: var(--r-sm);
}
.nav a:hover { color: var(--c-ink); background: var(--c-sunken); }
.nav a[aria-current="page"], .nav a.is-section { color: var(--c-ink); box-shadow: inset 0 -2px 0 var(--c-ink); border-radius: 0; }
.hdr .hdr-cta { display: none; }
@media (min-width: 25em) { .hdr .hdr-cta { display: inline-flex; } }
@media (min-width: 64em) {
  .nav { display: block; }
  .hdr-cta { display: inline-flex; }
  .menu { display: none; }
}
/* Mobile menu: <details> works without JavaScript. */
.menu { position: static; }
.menu > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding-inline: var(--s-4);
  border: 1.5px solid var(--c-outline); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-ink);
  font-weight: 600; font-size: var(--f-label-size);
  cursor: pointer; user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .ic-close { display: none; }
.menu[open] > summary .ic-close { display: block; }
.menu[open] > summary .ic-list { display: none; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: var(--e-2);
  padding: var(--s-3) var(--gutter) var(--s-6);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.menu-panel ul { list-style: none; }
.menu-panel li + li { border-top: 1px solid var(--c-line); }
.menu-panel a:not(.btn) {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; color: var(--c-ink); text-decoration: none; font-weight: 500;
}
.menu-panel a[aria-current="page"] { font-weight: 700; }
.menu-panel .btn { margin-top: var(--s-4); width: 100%; }
.menu[open]::before {
  content: ""; position: fixed; inset: var(--header-h) 0 0 0;
  background: var(--c-scrim); z-index: -1;
}

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-5);
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease);
}
.btn:active { transform: scale(var(--m-press)); }
.btn-primary, .btn-primary:visited { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-hover); color: var(--c-on-primary); }
.btn-primary:active { background: var(--c-primary-pressed); }
.btn-secondary, .btn-secondary:visited { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-outline); }
.btn-secondary:hover { background: var(--c-sunken); color: var(--c-ink); }
.btn-sm { min-height: 44px; padding-inline: var(--s-4); font-size: var(--f-label-size); }
.btn-block { width: 100%; }
.btn[aria-disabled="true"] { cursor: progress; opacity: 0.85; }
.btn-text {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0;
  background: none; border: 0; color: var(--c-primary);
  font: inherit; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  cursor: pointer;
}
.link-arrow { font-weight: 600; }
.link-arrow::after { content: " \2192"; }

/* ----------------------------------------------------------- breadcrumbs */
.crumbs { padding-top: var(--s-5); font-size: var(--f-caption-size); font-weight: 500; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink3); }
.crumbs li + li::before { content: "/"; color: var(--c-ink3); }
.crumbs a { color: var(--c-ink2); }
.crumbs [aria-current="page"] { color: var(--c-ink2); }

/* ------------------------------------------------------------------ hero */
.hero { padding-block: var(--s-6) var(--s-9); }
@media (min-width: 64em) { .hero { padding-block: var(--s-10) 6rem; } }
.hero-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 64em) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-10); } }
.hero-copy > * + * { margin-top: var(--s-4); }
.hero-copy h1 { margin-top: var(--s-3); max-width: 18ch; }

/* On a phone the photograph comes first: the old order put a four-line headline, a
   five-line paragraph, two buttons and a disclaimer above it, so the first screen was a
   wall of text and the work was never visible without scrolling. */
@media (max-width: 63.99em) {
  .hero-grid .media-hero { order: -1; }
  .hero-grid .media-hero img { aspect-ratio: 16 / 10; }
  .hero-copy h1 { font-size: clamp(1.875rem, 6.5vw + 0.5rem, 2.5rem); max-width: 22ch; }
  .hero-copy .lead { font-size: var(--f-body-size); line-height: 1.55; }
  /* Equal, full-width buttons: two different widths stacked reads as a mistake. */
  .hero .cta-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .hero .cta-row .btn { width: 100%; }
}
.page-head { padding-block: var(--s-6) var(--s-8); }
@media (min-width: 64em) { .page-head { padding-block: var(--s-8) var(--s-9); } }
.page-head > * + * { margin-top: var(--s-4); }
.page-head h1 { max-width: 22ch; }
.status-line {
  display: flex; gap: var(--s-2); align-items: flex-start;
  font-size: var(--f-caption-size); color: var(--c-ink2); font-weight: 500; line-height: 1.45;
}
.status-line .ic { width: 1.125rem; height: 1.125rem; margin-top: 1px; color: var(--c-ink3); }
.media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-sunken);
  border: 1px solid var(--c-line);
}
.media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* The hero photograph carries the page: a little taller than 3:2 on wide screens, but not so
   tall that the crop cuts the people out of the frame (4:5 did). */
@media (min-width: 64em) { .media-hero img { aspect-ratio: 5 / 4; max-height: 30rem; } }

/* Photograph on top of a category card: the picture is the card's first row, the status
   pill sits on it, and the body keeps the card's padding. */
.cat-shot { position: relative; margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4); }
.cat-shot .shot { margin: 0; border: 0; border-radius: 0; background: var(--c-sunken); }
.cat-shot .shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
/* No status chip on the photograph: a coloured dot repeated on every card is dashboard
   furniture. The timing is said once, in words, beside the trade name. */
.cat-when {
  display: block; margin-top: var(--s-1);
  font-family: var(--f-text); font-size: var(--f-caption-size); font-weight: 500;
  letter-spacing: 0; color: var(--c-ink3);
}
.grid-photo .cat-card { padding: var(--s-5); overflow: hidden; }
/* With a photograph the trade is already shown, so the card drops its glyph row. */
.grid-photo .cat-name { margin-top: 0; }
.media figcaption { padding: var(--s-3) var(--s-4); font-size: var(--f-caption-size); color: var(--c-ink3); background: var(--c-surface); }

/* ------------------------------------------------------- promises and seals */
/* One panel with hairline dividers, not four floating cards: four identical bordered
   boxes in a row is the stock template rhythm, and it competes with the hero. */
.promises {
  display: grid; gap: 0; list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  overflow: hidden;
}
@media (min-width: 48em) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .promises { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.promise {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.promise:first-child { border-top: 0; }
@media (min-width: 48em) {
  .promise:nth-child(-n + 2) { border-top: 0; }
  .promise:nth-child(2n) { border-left: 1px solid var(--c-line); }
}
@media (min-width: 64em) {
  .promise { border-top: 0; border-left: 1px solid var(--c-line); }
  .promise:first-child { border-left: 0; }
}
.promise h3 { font-size: 1rem; }
.promise p { margin-top: var(--s-1); font-size: var(--f-bodys-size); line-height: var(--f-bodys-lh); color: var(--c-ink2); }
.seal {
  display: grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--c-sunken); color: var(--c-ink);
  border: 1.5px solid var(--c-outline);
}
.seal .ic { width: 1.25rem; height: 1.25rem; }
.seal-brass { background: var(--c-brass-soft); color: var(--c-brass); border-color: var(--c-brass-line); }
.creds { list-style: none; display: grid; gap: var(--s-3); }
.creds li { display: flex; gap: var(--s-3); align-items: flex-start; max-width: 60ch; }
.creds li > span:last-child { padding-top: 0.5rem; }

/* ---------------------------------------------------------------- steps */
/* A sequence, not three boxes. Each step opens with a rule it shares with its neighbours,
   so the eye reads a track from 01 to 03 instead of three identical cards in a row. */
.steps { list-style: none; counter-reset: step; display: grid; gap: var(--s-7); }
@media (min-width: 64em) { .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); } }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-top: var(--s-5);
  border-top: 2px solid var(--c-line);
  max-width: none;
}
/* The step the reader is at first: its rule is the brand colour, the rest are hairline. */
.steps > li:first-child { border-top-color: var(--c-primary); }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-weight: 600;
  font-size: var(--f-caption-size); line-height: 1; letter-spacing: 0.08em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--c-ink3);
  margin-bottom: var(--s-3);
}
.steps > li:first-child::before { color: var(--c-primary); }
.steps > li h3 { font-size: 1.125rem; }
.steps > li > * + * { margin-top: var(--s-2); }
.steps > li p { color: var(--c-ink2); }
.timeline { list-style: none; counter-reset: step; }
.timeline > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--s-8) 3.5rem;
  max-width: 46rem;
}
.split-faq > .timeline { max-width: none; }
.split-faq > .timeline > li { max-width: none; }
.timeline > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.125rem;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--c-surface); border: 1.5px solid var(--c-outline);
  font-weight: 600; font-size: var(--f-label-size); font-variant-numeric: tabular-nums;
}
.timeline > li::after {
  content: ""; position: absolute; left: 1.08rem; top: 2.4rem; bottom: 0.25rem;
  width: 1.5px; background: var(--c-line);
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li:last-child::after { display: none; }
.timeline > li > * + * { margin-top: var(--s-2); }
.timeline h3 { padding-top: 0.25rem; }
.timeline p, .timeline li li { color: var(--c-ink2); }

/* ------------------------------------------------------------- cards */
.card {
  display: block;
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  color: inherit;
}
.card > * + * { margin-top: var(--s-3); }
.card p { color: var(--c-ink2); }
.card-link { text-decoration: none; transition: border-color var(--m-base) var(--m-ease), transform var(--m-fast) var(--m-ease); }
.card-link:visited, .card-link:hover { color: inherit; }
.card-link:hover { border-color: var(--c-outline); }
.card-link:active { transform: scale(var(--m-press)); }
.cat-card { border-radius: 1.25rem; display: flex; flex-direction: column; gap: var(--s-4); }
.cat-card > * + * { margin-top: 0; }
.cat-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.glyph-well {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--r-md);
  background: var(--c-sunken); color: var(--c-ink);
}
.glyph-well .ic { width: 1.75rem; height: 1.75rem; }
.cat-name { font-family: var(--f-display); font-size: 1.3125rem; line-height: 1.24; font-weight: 600; letter-spacing: -0.015em; }
.cat-card ul { list-style: none; display: grid; gap: var(--s-2); font-size: var(--f-bodys-size); color: var(--c-ink2); }
.cat-card ul li { display: flex; gap: var(--s-2); }
.cat-card ul li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 0.6em; border-radius: 50%; background: var(--c-outline); }
.cat-card .more { margin-top: auto; font-weight: 600; color: var(--c-primary); display: inline-flex; align-items: center; gap: var(--s-1); }

/* status pill: dot + word, never colour alone */
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
  font-size: var(--f-caption-size); font-weight: 600; line-height: 1.3;
  white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-first { background: var(--c-primary-soft); color: var(--c-on-primary-soft); }
.pill-later { background: var(--c-warning-soft); color: var(--c-warning); }
.pill-notopen { background: var(--c-warning-soft); color: var(--c-warning); }
.pill-open { background: var(--c-success-soft); color: var(--c-success); }
.pill-sample { background: var(--c-sample-bg); color: var(--c-sample-ink); border-radius: var(--r-xs); }
.pill-sample::before { display: none; }

/* Service areas: one bordered list, a row per town. Five separate tiles spent a whole
   phone screen on five town names, and read as five identical empty boxes. */
.areas {
  list-style: none; display: grid; gap: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  overflow: hidden;
  max-width: 44rem;
}
.areas li { max-width: none; }
.areas li + li { border-top: 1px solid var(--c-line); }
.area-tile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5);
  color: var(--c-ink); text-decoration: none;
}
.area-tile:visited, .area-tile:hover { color: var(--c-ink); }
.area-tile:hover { background: var(--c-sunken); }
.area-tile .ic { color: var(--c-ink3); }
.area-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); min-width: 0; }
.area-tile b { font-size: 1.0625rem; }
.area-first { font-size: var(--f-caption-size); font-weight: 600; color: var(--c-primary); }
.area-tile .zips { font-size: var(--f-caption-size); color: var(--c-ink2); font-variant-numeric: tabular-nums; }
.area-tile .pill { align-self: flex-start; margin-top: var(--s-2); }

/* ------------------------------------------------------- provider band */
.band { background: var(--c-band); color: var(--c-on-band); }
.band h2, .band h3 { color: var(--c-on-band); }
.band .lead, .band p { color: var(--c-on-band2); }
.band .overline { color: var(--c-on-band2); }
.band a:not(.btn) { color: var(--c-band-link); }
.band .btn-primary, .band .btn-primary:visited { background: var(--c-band-link); color: var(--c-on-band-link); }
.band .btn-primary:hover { background: var(--c-on-band); color: var(--c-band); }
.band .btn-secondary { background: transparent; color: var(--c-on-band); border-color: var(--c-on-band2); }
.band .btn-secondary:hover { background: transparent; border-color: var(--c-on-band); }

/* money strip */
.money {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0;
  background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 30em) { .money { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .money { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.money > div { background: var(--c-surface); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.money dd { margin: 0; font-size: var(--f-bodys-size); line-height: 1.4; color: var(--c-ink2); }
.money dt { font-weight: 600; font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem); line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--c-ink); text-wrap: balance; }
/* On the dark band the figures are part of the band, not a white block stuck to it. */
.band .money { background: transparent; border: 0; border-radius: 0; gap: 0; }
.band .money > div {
  background: transparent; padding: var(--s-5) var(--s-6) var(--s-5) 0;
  border-top: 1px solid var(--c-on-band2);
}
.band .money dt { color: var(--c-on-band); }
.band .money dd { color: var(--c-on-band2); }
@media (min-width: 30em) {
  .band .money > div { padding-right: var(--s-6); }
  .band .money > div:nth-child(2n) { padding-left: var(--s-6); border-left: 1px solid var(--c-on-band2); }
}
@media (min-width: 64em) {
  .band .money > div { padding-left: var(--s-6); border-left: 1px solid var(--c-on-band2); }
  .band .money > div:first-child { padding-left: 0; border-left: 0; }
}

/* sample payout card (inverse) */
.payout {
  background: var(--c-inverse); color: var(--c-on-inverse);
  border-radius: var(--r-lg); padding: var(--s-6);
  max-width: 26rem;
}
.payout .pill-sample { background: var(--c-on-inverse2); color: var(--c-inverse); }
.payout h3 { color: var(--c-on-inverse); margin-top: var(--s-3); }
.payout dl { margin: var(--s-4) 0 0; }
.payout dl > div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--c-on-inverse2); }
.payout dt { color: var(--c-on-inverse2); font-size: var(--f-bodys-size); }
.payout dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.payout .total dd { font-family: var(--f-display); font-size: 1.75rem; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.payout .total dt { color: var(--c-on-inverse); font-weight: 600; align-self: center; }
.payout p { margin-top: var(--s-3); font-size: var(--f-caption-size); color: var(--c-on-inverse2); }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--f-bodys-size); font-variant-numeric: tabular-nums; }
caption { caption-side: bottom; text-align: left; padding: var(--s-3) var(--s-4); font-size: var(--f-caption-size); color: var(--c-ink3); border-top: 1px solid var(--c-line); }
th, td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); vertical-align: top; }
thead th { font-size: var(--f-caption-size); font-weight: 600; color: var(--c-ink2); background: var(--c-sunken); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 600; }

/* callouts */
.note {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  background: var(--c-sunken);
  border-radius: var(--r-md);
  font-size: var(--f-bodys-size); line-height: var(--f-bodys-lh);
  max-width: 46rem;
}
.note .ic { width: 1.25rem; height: 1.25rem; margin-top: 2px; color: var(--c-ink2); }
.note p { color: var(--c-ink); }
.note-warn { background: var(--c-warning-soft); }
.note-warn .ic { color: var(--c-warning); }
.draft-flag {
  display: flex; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1.5px solid var(--c-warning);
  background: var(--c-warning-soft);
  border-radius: var(--r-md);
  font-size: var(--f-bodys-size);
}
.draft-flag .ic { color: var(--c-warning); width: 1.25rem; height: 1.25rem; margin-top: 2px; }
.meta-list { margin: 0; display: grid; gap: var(--s-4); font-size: var(--f-bodys-size); color: var(--c-ink2); }
.meta-list dt { color: var(--c-ink); font-weight: 600; }
.meta-list dd { margin: 0; }

/* FAQ */
.faq { border-top: 1px solid var(--c-line); max-width: 52rem; }
/* Heading column beside the questions on wide screens; stacked on a phone. The heading
   column stays put while the questions scroll. */
@media (min-width: 64em) {
  .split-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .faq-side { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
.faq-side .cta-row { margin-top: var(--s-5); }
.faq summary:hover { color: var(--c-primary); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 56px; padding-block: var(--s-4);
  font-size: 1.0625rem; font-weight: 600; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform var(--m-base) var(--m-ease); color: var(--c-ink2); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq .a { padding-bottom: var(--s-5); color: var(--c-ink2); }
.faq .a > * + * { margin-top: var(--s-3); }

/* link list (404, legal index) */
.link-grid { list-style: none; display: grid; gap: var(--s-3); }
@media (min-width: 48em) { .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.link-grid a { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4) var(--s-5); min-height: 100%;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); color: var(--c-ink); text-decoration: none; }
.link-grid a:hover { border-color: var(--c-outline); }
.link-grid b { color: var(--c-primary); }
.link-grid span { font-size: var(--f-bodys-size); color: var(--c-ink2); }

/* mailbox list (contact) */
/* A list of short statements as one panel with hairline dividers, not a grid of boxes. */
.panel-list {
  list-style: none; display: grid; gap: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  overflow: hidden;
}
.panel-list > li { max-width: none; padding: var(--s-5); border-top: 1px solid var(--c-line); }
.panel-list > li:first-child { border-top: 0; }
.panel-list h3 { font-size: 1rem; }
.panel-list p { margin-top: var(--s-2); font-size: var(--f-bodys-size); line-height: var(--f-bodys-lh); color: var(--c-ink2); }
@media (min-width: 48em) {
  .panel-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-2 > li:nth-child(-n + 2) { border-top: 0; }
  .panel-2 > li:nth-child(2n) { border-left: 1px solid var(--c-line); }
}

/* One panel with hairline rows, like the service areas: six bordered cards for six lines of
   text was the same boxed rhythm again. */
.mailboxes {
  list-style: none; display: grid; gap: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  overflow: hidden;
  max-width: 52rem;
}
.mailboxes li { max-width: none; padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-1) var(--s-5); }
.mailboxes li + li { border-top: 1px solid var(--c-line); }
@media (min-width: 48em) {
  .mailboxes li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .mailboxes li a { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; }
}
.mailboxes h3 { font-size: 1rem; }
.mailboxes p { font-size: var(--f-bodys-size); color: var(--c-ink2); max-width: 54ch; }
.mailboxes a { font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }

/* ============================================================= forms */
.form-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--e-2);
  padding: var(--s-6) var(--s-5);
  max-width: var(--form-max);
}
@media (min-width: 48em) { .form-panel { padding: var(--s-8); } }
.form-panel > h2 { font-size: clamp(1.375rem, 1.5vw + 1rem, 1.75rem); }
.form-panel > h2 + p { margin-top: var(--s-2); color: var(--c-ink2); }
.form-panel > form, .form-panel > .form-success, .form-panel > .saved-panel { margin-top: var(--s-6); }
.form-panel > .saved-panel:first-child, .form-panel > form:first-child { margin-top: 0; }
form.lead { display: grid; gap: var(--s-6); }
.field { display: grid; gap: var(--s-2); margin: 0; min-width: 0; }
fieldset.field { border: 0; padding: 0; }
.field > label, .field > legend {
  font-size: var(--f-label-size); line-height: 1.43; font-weight: 500; color: var(--c-ink); padding: 0;
}
fieldset.field > legend { font-weight: 600; font-size: 0.9375rem; margin-bottom: var(--s-2); float: left; width: 100%; }
fieldset.field > legend + * { clear: both; }
.field .opt { color: var(--c-ink2); font-weight: 400; }
.opt-when { font-size: var(--f-caption-size); font-weight: 500; color: var(--c-ink3); white-space: nowrap; }
/* A page's opening status, said once under the title. */
.page-status { font-size: var(--f-label-size); font-weight: 600; color: var(--c-ink2); }
.option .opt-when { flex: 0 0 auto; margin-left: auto; padding-left: var(--s-3); }
@media (max-width: 29.99em) { .option .opt-when { flex-basis: 100%; margin-left: 0; padding-left: 2.25rem; } }
.hint { font-size: var(--f-caption-size); line-height: 1.38; color: var(--c-ink3); font-weight: 500; max-width: 60ch; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--s-4);
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1.5px solid var(--c-outline);
  border-radius: var(--r-md);
  font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease);
  appearance: none;
}
textarea { min-height: 7rem; padding-block: var(--s-3); resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary), 0 0 0 5px var(--c-primary-soft); }
/* The focus ring is a box-shadow; a transparent outline is kept so Windows High Contrast
   (which drops box-shadow and forces outline colours) still draws a visible ring. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
.select-wrap { position: relative; }
.select-wrap select { padding-right: 3rem; cursor: pointer; }
.select-wrap .ic { position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--c-ink2); }
select option { background: var(--c-surface); color: var(--c-ink); }
.control { position: relative; }
.control .state-ic { position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; pointer-events: none; display: none; }
.field.is-valid .control input { border-color: var(--c-success); box-shadow: 0 0 0 1px var(--c-success); padding-right: 3rem; }
.field.is-valid .control .ok { display: block; color: var(--c-success); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }
.field.is-invalid .control input { padding-right: 3rem; }
.field.is-invalid .control .bad { display: block; color: var(--c-error); }
/* Focus must stay visible after validation (WCAG 2.4.7): these beat the validated-state rules above. */
.field.is-invalid input:focus, .field.is-invalid select:focus, .field.is-invalid textarea:focus,
.field.is-invalid .control input:focus {
  border-color: var(--c-error); box-shadow: 0 0 0 1px var(--c-error), 0 0 0 5px var(--c-error-soft);
}
.field.is-valid .control input:focus { border-color: var(--c-success); box-shadow: 0 0 0 1px var(--c-success), 0 0 0 5px var(--c-success-soft); }
@media (forced-colors: active) {
  input:focus, select:focus, textarea:focus { outline: 2px solid CanvasText; outline-offset: 2px; }
}
.field-err {
  display: flex; gap: var(--s-2); align-items: flex-start;
  font-size: var(--f-label-size); line-height: 1.43; font-weight: 500; color: var(--c-error);
}
.field-err .ic { width: 1.125rem; height: 1.125rem; margin-top: 1px; }
.counter { font-size: var(--f-caption-size); color: var(--c-ink3); text-align: right; font-variant-numeric: tabular-nums; }

/* option rows: the whole row is the label */
.options { display: grid; gap: var(--s-2); }
@media (min-width: 35em) { .options-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.option {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease);
}
.option:hover { border-color: var(--c-outline); }
.option:has(input:checked) { border-color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-ink); }
.option:has(input:checked) .option-label { font-weight: 600; }
.option:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.option .box {
  flex: none; display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  border: 2px solid var(--c-outline); background: var(--c-surface);
  border-radius: 7px;
  transition: background-color var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease);
}
.option .box .ic { width: 1rem; height: 1rem; stroke-width: 2.5; color: var(--c-canvas); opacity: 0; }
.option input:checked + .box { background: var(--c-ink); border-color: var(--c-ink); }
.option input:checked + .box .ic { opacity: 1; }
.option input[type="radio"] + .box { border-radius: 50%; }
.option input[type="radio"]:checked + .box { background: var(--c-surface); border-color: var(--c-ink); }
.option input[type="radio"] + .box::after { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--c-ink); transform: scale(0); transition: transform var(--m-fast) var(--m-ease); }
.option input[type="radio"]:checked + .box::after { transform: scale(1); }
.option { flex-wrap: wrap; row-gap: var(--s-1); }
.option-label { flex: 1 1 8rem; min-width: 0; font-size: 0.9375rem; line-height: 1.4; }
.option-label small { display: block; color: var(--c-ink2); font-size: var(--f-caption-size); font-weight: 400; margin-top: 2px; }
.option .pill { margin-left: auto; }
.field.is-invalid .option { border-color: var(--c-error); }
.consent-row { align-items: flex-start; }
.consent-row .box { margin-top: 1px; }
.consent-row .option-label { font-size: var(--f-bodys-size); line-height: var(--f-bodys-lh); color: var(--c-ink); }

/* honeypot: off-screen, not display:none */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.notice { font-size: var(--f-caption-size); line-height: 1.5; color: var(--c-ink2); max-width: 60ch; }
.notice a { color: var(--c-ink); }
.form-actions { display: grid; gap: var(--s-3); }
.form-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.form-actions-row > .btn-primary:only-child { width: 100%; }
.ts:empty { display: none; }
.ts { min-height: 0; }

.err-summary {
  padding: var(--s-5);
  background: var(--c-error-soft);
  border: 1.5px solid var(--c-error);
  border-radius: var(--r-md);
}
.err-summary h2 { font-family: var(--f-text); font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--c-ink); display: flex; gap: var(--s-2); align-items: center; }
.err-summary h2 .ic { color: var(--c-error); }
.err-summary h2:focus { outline: none; }
.err-summary:focus-within { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.err-summary ul { margin-top: var(--s-3); padding-left: 1.25em; display: grid; gap: var(--s-2); }
.err-summary a { color: var(--c-error); font-weight: 600; }
.err-summary p { margin-top: var(--s-2); color: var(--c-ink); }
.form-status { font-size: var(--f-label-size); font-weight: 500; color: var(--c-ink2); min-height: 0; }
.form-status:empty { display: none; }
.form-success {
  padding: var(--s-6);
  background: var(--c-success-soft);
  border-radius: var(--r-lg);
}
.form-success:focus { outline: none; }
.form-success .head { display: flex; gap: var(--s-3); align-items: center; }
.form-success .tick { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-success); color: var(--c-on-success); flex: none; }
.form-success h2, .form-success h3 { font-family: var(--f-text); font-size: 1.1875rem; letter-spacing: -0.012em; }
.form-success p { margin-top: var(--s-3); color: var(--c-ink); }
.form-success .ref { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.02em; }
.saved-panel { padding: var(--s-5); background: var(--c-sunken); border-radius: var(--r-lg); }
.saved-panel > * + * { margin-top: var(--s-3); }

/* step indicator */
.stepper { margin-top: var(--s-5); max-width: var(--form-max); }
.stepper ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.stepper li { font-size: var(--f-caption-size); line-height: 1.35; color: var(--c-ink3); font-weight: 500; }
.stepper li b { display: block; color: var(--c-ink2); font-weight: 600; }
.stepper li[aria-current="step"] { color: var(--c-ink); }
.stepper li[aria-current="step"] b { color: var(--c-ink); }
.stepper .bar { margin-top: var(--s-3); height: 6px; border-radius: var(--r-pill); background: var(--c-sunken); overflow: hidden; border: 1px solid var(--c-line); }
.stepper .bar span { display: block; height: 100%; background: var(--c-ink); border-radius: var(--r-pill); }
.stepper .bar .w1 { width: 33.34%; }
.stepper .bar .w2 { width: 66.67%; }
.stepper .bar .w3 { width: 100%; }

/* aside column next to forms */
.aside > * + * { margin-top: var(--s-6); }
.aside h2 { font-size: 1.375rem; }
.checklist { list-style: none; display: grid; gap: var(--s-2); }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--f-bodys-size); line-height: var(--f-bodys-lh); }
.checklist li .ic { width: 1.25rem; height: 1.25rem; margin-top: 1px; color: var(--c-ink2); }
.trade-block { border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.trade-block + .trade-block { margin-top: var(--s-3); }
.trade-block > summary { list-style: none; display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-5); font-weight: 600; cursor: pointer; }
.trade-block > summary::-webkit-details-marker { display: none; }
.trade-block > summary .chev { margin-left: auto; transition: transform var(--m-base) var(--m-ease); color: var(--c-ink2); }
.trade-block[open] > summary .chev { transform: rotate(180deg); }
.trade-block > div { padding: 0 var(--s-5) var(--s-5); }

/* ================================================================ legal */
.doc { display: grid; gap: var(--s-8); padding-bottom: var(--s-10); }
@media (min-width: 64em) { .doc { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-10); } }
.doc-nav { font-size: var(--f-label-size); }
.doc-nav details { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.doc-nav summary { min-height: 48px; padding: var(--s-3) var(--s-4); font-weight: 600; cursor: pointer; }
.doc-nav nav { display: grid; padding: 0 var(--s-4) var(--s-3); }
.doc-nav a { display: block; padding-block: 0.4rem; color: var(--c-ink2); text-decoration: none; line-height: 1.4; }
.doc-nav a:hover { color: var(--c-primary); text-decoration: underline; }
@media (min-width: 64em) {
  .doc-nav { position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; }
  .doc-nav details { border: 0; background: none; }
  .doc-nav summary { padding-inline: 0; }
  .doc-nav nav { padding-inline: 0; }
}
.doc-body { min-width: 0; }
.doc-body > * + * { margin-top: var(--s-4); }
.doc-body h1 { margin-bottom: var(--s-2); }
.doc-body h2 { margin-top: var(--s-9); font-size: clamp(1.25rem, 1.5vw + 0.9rem, 1.625rem); }
.doc-body h3 { margin-top: var(--s-6); }
.doc-body ul, .doc-body ol { padding-left: 1.25em; display: grid; gap: var(--s-2); }
.doc-body .table-wrap { margin-top: var(--s-4); }
.legal-meta { padding: var(--s-5); border-radius: var(--r-md); background: var(--c-sunken); display: grid; gap: var(--s-2); font-size: var(--f-bodys-size); }

/* --------------------------------------------------------- sticky action */
/* Phones only: the header has no room for the action beside the menu button, so it sits in
   thumb reach instead. It hides itself while the page's own form is on screen (forms.js). */
.sticky-cta { display: none; }
@media (max-width: 47.99em) {
  .sticky-cta {
    display: block; position: fixed; z-index: 40;
    left: 0; right: 0; bottom: 0;
    padding: var(--s-3) max(var(--gutter), env(safe-area-inset-left)) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--c-canvas) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--c-line);
    transition: transform var(--m-base) var(--m-ease), opacity var(--m-base) var(--m-ease);
  }
  .sticky-cta .btn { width: 100%; }
  .sticky-cta[data-hidden] { transform: translateY(110%); opacity: 0; pointer-events: none; }
  /* Room for it at the end of the page, so it never covers the last line of the footer.
     Only once the script has revealed it: without JavaScript there is no bar and no gap. */
  body:has(.sticky-cta:not([data-hidden])) { padding-bottom: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ================================================================ footer */
.ftr { background: var(--c-band); color: var(--c-on-band); margin-top: 0; padding-block: var(--s-10) var(--s-8); }
.ftr a { color: var(--c-on-band); text-decoration: none; }
.ftr a:hover { text-decoration: underline; color: var(--c-on-band); }
.ftr-grid { display: grid; gap: var(--s-8); }
/* Seventeen links in a single column made the phone footer ~1500px of scrolling at the
   foot of every page. The four groups pair up as soon as there is room for two columns. */
@media (min-width: 23.75em) {
  .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (min-width: 48em) { .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }
@media (min-width: 64em) { .ftr-grid { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); } }
.ftr .brand { color: var(--c-on-band); min-height: 0; }
.ftr .brand-mark { color: var(--c-band-link); }
.ftr .brand-word { color: var(--c-on-band); }
.ftr-brand p { margin-top: var(--s-4); font-size: var(--f-bodys-size); color: var(--c-on-band2); max-width: 32ch; }
.ftr h2 { font-family: var(--f-text); font-size: var(--f-overline-size); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-on-band2); font-weight: 600; }
.ftr ul { list-style: none; margin-top: var(--s-3); }
.ftr li a { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--f-bodys-size); }
@media (min-width: 64em) {
  .ftr li a { min-height: 32px; font-size: var(--f-label-size); }
  .ftr ul { margin-top: var(--s-2); }
  .ftr { padding-block: var(--s-9) var(--s-7); }
}
.ftr-base { margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--c-on-band2); display: grid; gap: var(--s-4); font-size: var(--f-caption-size); color: var(--c-on-band2); }
@media (min-width: 64em) { .ftr-base { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s-8); } }
.ftr-base p { color: var(--c-on-band2); max-width: none; }
.theme-form { display: flex; align-items: center; gap: var(--s-3); }
.theme-form label { font-weight: 600; color: var(--c-on-band); }
.theme-form .select-wrap { width: 9.5rem; }
.theme-form select { min-height: 44px; background: var(--c-band); color: var(--c-on-band); border-color: var(--c-on-band2); font-size: var(--f-label-size); }
.theme-form .select-wrap .ic { color: var(--c-on-band2); }
.theme-form select option { background: var(--c-surface); color: var(--c-ink); }

/* ============================================================ print */
@media print {
  .hdr, .ftr, .menu, .form-panel, .skip { display: none !important; }
  body { background: none; }
}