/**
 * Design tokens. The only place a colour, size, radius or duration is defined.
 *
 * Components reference these names and never a literal. That is not tidiness:
 * this product signals uncertainty about a medicine, and a one-off colour
 * chosen in a component is a signal nobody verified. Every pair below cleared
 * its WCAG target in scripts/contrast.mjs, and the measured ratio is written
 * beside it. src/styles/tokens.contrast.test.ts re-derives them from this file
 * so a hand-edited hex cannot quietly drop below the line.
 *
 * Rationale and citations: docs/design-tokens.md.
 * Criteria text: docs/wcag-2.2-aa-checklist.md.
 */

:root {
  /* ── Ground and surfaces ──────────────────────────────────────────────────
     Warm off-white rather than pure white. The subject is a photographed sheet
     of paper, and a paper-coloured page keeps the preview reading as the
     document rather than as a bright panel with a picture on it. */
  --ground: #fbfaf7;
  --surface: #ffffff;
  --surface-sunken: #f0eee8;

  /* ── Text ─────────────────────────────────────────────────────────────────
     No muted grey body text anywhere. --ink-secondary is for labels and
     metadata and still clears 8.88:1 on ground — it is quieter by SIZE and
     WEIGHT, never by dropping toward the background. (1.4.3) */
  --ink: #191813;            /* 17.03:1 on ground · 17.78:1 on surface */
  --ink-secondary: #4a4740;  /*  8.88:1 on ground ·  9.27:1 on surface */
  --ink-on-primary: #ffffff; /*  7.73:1 on primary */

  /* ── Lines and edges (1.4.11 — 3:1 for UI components) ───────────────────── */
  --line: #8a867b;           /* 3.48:1 on ground · 3.64:1 on surface */
  --line-strong: #5f5c54;    /* 6.40:1 on ground */

  /* ── Primary action ───────────────────────────────────────────────────────
     Deep teal. Distinct from the blue every framework default lands on, and
     dark enough to carry white text at 7.73:1 without a second thought. */
  --primary: #0b5d57;        /* 7.40:1 on ground, as text and as a shape */
  --primary-hover: #084743;  /* 10.54:1 with white label */

  /* ── Focus (2.4.7, 2.4.11) ────────────────────────────────────────────────
     Violet, deliberately outside the product's own palette: a focus ring that
     shares a hue with a state colour reads as a state. Drawn as a ring on an
     offset gap with a surface-coloured halo, so it never sits directly on a
     filled control — see --focus-ring below. */
  --focus: #8a3ffc;          /* 4.79:1 ground · 5.00:1 surface · 4.31:1 sunken */
  --focus-halo: var(--surface);
  --focus-width: 3px;
  --focus-offset: 2px;

  /* ── Field states ─────────────────────────────────────────────────────────
     Rule 1 and 1.4.1. Each state below pairs a colour with a TEXT LABEL and a
     distinct SHAPE, and the shape tokens are here so a component cannot use
     the tint alone. Colour is the third signal, never the only one. */

  /* Confirmed by the caregiver. Solid left edge. */
  --confirmed: #14603a;      /* 6.70:1 on its own background */
  --confirmed-bg: #e6f4ec;
  --confirmed-edge: 4px solid var(--confirmed);

  /* Present on the page but unreadable, or the two passes disagree.
     Double left edge — the thickest, busiest shape in the set, because this is
     the state a human has to act on. */
  --needs-check: #8a4300;    /* 6.70:1 on its own background · 6.98:1 on ground */
  --needs-check-bg: #fff4e5;
  --needs-check-edge: 8px double var(--needs-check);

  /* The clinician never wrote it. Dashed left edge: visibly not-a-value, and
     distinguishable from the other two with colour vision removed entirely. */
  --absent: #4a4740;         /* 7.99:1 on its own background */
  --absent-bg: #f0eee8;
  --absent-edge: 4px dashed var(--absent);

  /* Blocking failure — the quality gate refusing a page, an upload error. */
  --danger: #9b1c1c;         /* 7.14:1 on its own background · 7.81:1 on ground */
  --danger-bg: #fdecec;
  --danger-edge: 4px solid var(--danger);

  /* ── Type ─────────────────────────────────────────────────────────────────
     Rule 7: Noto Sans carries everything, because it is the only family with
     real Devanagari, Bengali, Tamil and Telugu. Geist Mono is scoped to
     technical surfaces by --font-mono and appears nowhere else.

     Sizes are rem so browser zoom and a user's own font size both work
     (1.4.4). Nothing is px. */
  --font-sans: 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Bengali',
    'Noto Sans Tamil', 'Noto Sans Telugu', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* 18px floor. --text-xs and --text-sm exist for labels and metadata and are
     never permitted on body copy; the floor is a floor. */
  --text-xs: 0.875rem;   /* 14px — timestamps, field labels */
  --text-sm: 1rem;       /* 16px — secondary lines */
  --text-base: 1.125rem; /* 18px — BODY FLOOR */
  --text-lg: 1.25rem;    /* 20px */
  --text-drug: 1.375rem; /* 22px — DRUG NAME FLOOR */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 1.75rem;   /* 28px — page headings */
  --text-3xl: 2.25rem;   /* 36px */

  /* Elder view. Larger again, and the drug name is the largest thing on the
     screen by a wide margin. */
  --text-elder-body: 1.5rem;  /* 24px */
  --text-elder-drug: 2.5rem;  /* 40px */

  --leading-tight: 1.3;
  --leading-body: 1.6;   /* generous: 1.4.12 asks that 1.5 not break layout */

  /* Normal tracking everywhere. Negative letter-spacing is a display-type
     habit that costs legibility at the sizes and scripts this product uses,
     and Devanagari and Bengali conjuncts break outright under it. */
  --tracking: normal;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Space, on a 4px grid ─────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius encodes what a thing is, so the scale has to reach small enough to
     say it. The public site runs control → panel → printed matter, softest
     to squarest, and had been stopping at 6px because that was the floor here;
     the two steps below exist so those values are named in this file rather
     than typed into site.css. Nothing in the app uses them yet. */
  --radius-2xs: 0.1875rem; /*  3px — a screenshot; paper has corners */
  --radius-xs: 0.25rem;    /*  4px — a panel */
  --radius-sm: 0.375rem;   /*  6px — a control, the softest thing on a page */
  --radius-md: 0.625rem;   /* 10px */
  --radius-lg: 0.875rem;   /* 14px */
  --radius-pill: 999px;

  /* ── Targets (2.5.8 asks 24px; this product uses 44) ────────────────────── */
  --target-min: 44px;

  --measure: 34rem;      /* line length ceiling for body copy */
  --shell-max: 40rem;    /* single column, mobile-first, never wider */

  --shadow-card: 0 1px 2px rgb(25 24 19 / 0.06), 0 2px 8px rgb(25 24 19 / 0.04);
  --shadow-raised: 0 2px 4px rgb(25 24 19 / 0.08), 0 8px 24px rgb(25 24 19 / 0.08);

  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/**
 * Focus indicator (2.4.7 Focus Visible, 2.4.11 Focus Not Obscured).
 *
 * :focus-visible, not :focus — a mouse click on a button should not leave a
 * ring behind, but every keyboard arrival must show one.
 *
 * The halo is what makes this work on a filled control. Ring alone on the teal
 * button measures 1.54:1, which fails; with a 2px surface-coloured halo
 * between them the adjacent pairs become ring-to-halo (5.00:1) and
 * halo-to-button (7.73:1), and both clear 3:1.
 */
@layer base {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
    box-shadow: 0 0 0 var(--focus-offset) var(--focus-halo);
    border-radius: var(--radius-sm);
  }

  /* 2.4.11 — a focused control must not end up under the sticky header. */
  :root {
    scroll-padding-top: 5rem;
    scroll-padding-bottom: 2rem;
  }
}

/**
 * Coarse pointers get 44px targets. Keyed on the POINTER, not on a width
 * breakpoint: a phone in a hospital corridor and a touchscreen laptop have the
 * same finger and different widths, and a width query gets both wrong.
 */
@media (pointer: coarse) {
  :root {
    --target-min: 44px;
  }
}
@media (pointer: fine) {
  :root {
    /* Still above the 24px 2.5.8 minimum — a mouse is precise, not perfect. */
    --target-min: 32px;
  }
}

/**
 * 2.3.1 / 2.2.2 — honour a reduced-motion preference. Nothing in this product
 * needs to move, so everything stops.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── site ── */
/**
 * Public site styles.
 *
 * Appended to src/styles/tokens.css at build time, so every colour here is a
 * token that already cleared its contrast target in scripts/contrast.mjs.
 *
 * ONE surface exists only here and so has its token declared here: the inverted
 * band behind "Three limits it will not cross". The app has no dark surface, so
 * putting it in tokens.css would add a colour the product never uses to the
 * file the product's contrast test walks. Its measured ratios are written
 * beside it, in the same form tokens.css uses.
 *
 * Restrained on purpose. The subject is a photograph of a piece of paper and a
 * list of medicines; a landing page with gradients and motion would be making
 * a different promise than the product keeps.
 */

:root {
  /* ── inverted band, public site only ─────────────────────────────────────
     Measured with the same formula as scripts/contrast.mjs. */
  --inverted: var(--ink);           /* the ground of the band            */
  --ink-on-inverted: var(--surface); /* 17.78:1 on --inverted            */
  --ink-on-inverted-quiet: #ded9cd;  /* 12.62:1 on --inverted            */
  --line-on-inverted: rgb(255 255 255 / 18%);
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family:
    'Noto Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── layout ───────────────────────────────────────────────────────────────── */

.wrap {
  width: min(72rem, 100% - 2.5rem);
  margin-inline: auto;
}
.wrap--narrow {
  width: min(46rem, 100% - 2.5rem);
}

.band {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--line);
}

/* The header is sticky, so an in-page jump would otherwise land with the
   section's own heading hidden underneath it. */
[id] {
  scroll-margin-top: 5rem;
}
.band--alt {
  background: var(--surface-sunken);
}
.band--evidence {
  background: var(--surface);
}
.band--legal {
  border-top: 0;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
}

/* ── type ─────────────────────────────────────────────────────────────────── */

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: var(--tracking);
  text-wrap: balance;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 700;
  max-width: 18ch;
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  font-weight: 600;
  max-width: 24ch;
}
h3 {
  font-size: 1.1875rem;
  font-weight: 600;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--ink-secondary);
  max-width: 62ch;
  margin-bottom: 2.5rem;
}

.meta {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

code {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--surface-sunken);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

/* ── links, focus, skip ───────────────────────────────────────────────────── */

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

:where(a, button, summary, details):focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 10;
  border: 2px solid var(--primary);
}
.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

main:focus {
  outline: none;
}

/* ── header / footer ──────────────────────────────────────────────────────── */

.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  position: sticky;
  top: 0;
  z-index: 5;
}
.site-head__inner,
.site-foot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 0.875rem;
}
.brand {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: var(--tracking);
  color: var(--ink);
  text-decoration: none;
  margin: 0;
}
.brand span {
  color: var(--primary);
}
.site-head nav,
.site-foot nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
}
.site-head nav a:not(.btn),
.site-foot nav a {
  color: var(--ink-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}
.site-head nav a:not(.btn):hover,
.site-foot nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Below 48rem the three in-page links wrap onto their own row and push the
   headline down by about a fifth of the viewport. The sections they point at
   are directly below on a page you scroll anyway; the one control worth
   keeping in the header is the way into the app. */
@media (max-width: 47.999rem) {
  .site-head nav a:not(.btn) {
    display: none;
  }
}

.site-foot {
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
  margin-top: 0;
}
.site-foot__inner {
  align-items: flex-start;
  padding-block: 2.5rem;
}
.site-foot .meta {
  max-width: 40ch;
  margin: 0.25rem 0 0;
}

/* ── buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.25rem;
  border: 2px solid transparent;
  /* ── radii encode what a thing is ────────────────────────────────────────
     One radius on everything regardless of hierarchy is the SaaS-card default.
     Here: a control is the softest thing on the page, a panel is squarer, and
     a screenshot is squarest of all, because the subject is a sheet of paper
     and paper has corners. The three steps are --radius-sm, --radius-xs and
     --radius-2xs, named in tokens.css like every other size in the product. */
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}
.btn--primary {
  background: var(--primary);
  color: var(--ink-on-primary);
}
.btn--primary:hover {
  background: var(--primary-hover);
  color: var(--ink-on-primary);
}
.btn--secondary {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--primary);
}
.btn--secondary:hover {
  background: var(--surface-sunken);
  color: var(--primary-hover);
}
.btn--sm {
  min-height: 2.25rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.9375rem;
}
.btn--lg {
  min-height: 3.125rem;
  padding: 0.75rem 1.6rem;
  font-size: 1.0625rem;
}

.cta-row {
  margin-top: 2rem;
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

/* ── hero ─────────────────────────────────────────────────────────────────
   Two columns from 62rem up. Below that the screenshot follows the words,
   because on a phone the headline has to arrive first. */
.hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem);
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}
.hero__text {
  min-width: 0;
}
.hero__lede {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--ink-secondary);
  max-width: 42ch;
  margin-bottom: 2rem;
}
.hero__cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.hero__note {
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  margin: 0;
  max-width: 46ch;
}
.hero__figure {
  min-width: 0;
}
/* No shadow. The soft grey drop-shadow under every card is one of the most
   reliable tells of a generated page, and this is a screenshot of a document
   sitting on a paper-coloured ground — it has no reason to float. A hairline
   and the ground behind it are enough separation. */

/* ── split: prose beside a screenshot ─────────────────────────────────────── */

.split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .split--reverse .split__text {
    order: 2;
  }
}
.split__text,
.split__figure {
  min-width: 0;
}
.split__text .lede {
  margin-bottom: 1.75rem;
}
/* The phone screenshot is portrait and would otherwise tower over its column. */
.split__figure--phone {
  display: flex;
  justify-content: center;
}
.split__figure--phone .shot {
  max-width: 20rem;
}

/* A checklist that is not a card grid — the page already has two of those. */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.875rem;
}
.ticks li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-secondary);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--primary);
}
.ticks strong {
  color: var(--ink);
}

/* ── screenshots ──────────────────────────────────────────────────────────── */

.shots {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}
.shots--one {
  grid-template-columns: minmax(0, 26rem);
}
.shot {
  margin: 0;
  min-width: 0;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xs);
  background: var(--surface);
}
.shot figcaption {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--ink-secondary);
}

/* ── steps ────────────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  counter-reset: none;
}
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 1.5rem;
  min-width: 0;
}
/* The sequence is real — photograph, cover, read, confirm — so a number
   earns its place here. It is set in the page's own face rather than a
   monospace one: a mono face on a small label is decoration standing in for
   data, and there is no data in "02". */
.step__n {
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* --ink-secondary (9.27:1 on surface), not --line (3.64:1). --line is a
     border token; borrowing it for type is how "quiet" turns into "faint".
     tokens.css: quieter by size and weight, never by dropping toward the
     background. At 28px/700 this would have passed as large text, which is
     the kind of pass that only holds until someone shrinks it. */
  color: var(--ink-secondary);
  margin: 0 0 0.875rem;
  letter-spacing: var(--tracking);
}
.step p:last-child {
  margin-bottom: 0;
  color: var(--ink-secondary);
  font-size: 0.9875rem;
}

/* ── pillars ──────────────────────────────────────────────────────────────── */

/* Rows, not cards. The page already has a card grid above and a card grid
   below; a third would flatten the whole thing into one texture. */
.band--rule {
  background: var(--inverted);
  color: var(--ink-on-inverted);
  border-top: 0;
}
.band--rule h2 {
  color: var(--ink-on-inverted);
}
.limits {
  margin: 0;
  display: grid;
  gap: 0;
}
.limit {
  display: grid;
  gap: 0.5rem 3rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line-on-inverted);
}
.limit:last-child {
  border-bottom: 1px solid var(--line-on-inverted);
}
@media (min-width: 52rem) {
  .limit {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: start;
  }
}
.limit dt {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--tracking);
  text-wrap: balance;
}
.limit dd {
  margin: 0;
  /* Quieter by weight and size, never by dropping toward the ground. */
  color: var(--ink-on-inverted-quiet);
  max-width: 62ch;
}

/* ── claims ───────────────────────────────────────────────────────────────── */

/* ── claims ───────────────────────────────────────────────────────────────
   The first figure leads. "0 dangerous errors" and "795 tests" are not the
   same kind of claim, and rendering them at the same size said they were —
   the second is a measure of the codebase, the first is the only number in
   this project that is about a patient. Styled by position rather than by a
   modifier class, so the markup the Rule 9 test reads stays identical. */
.claims {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
@media (min-width: 60rem) {
  .claims {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .claims > li:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 0 2.5rem;
    align-items: start;
    background: var(--confirmed-bg);
    border-color: var(--confirmed);
  }
  .claims > li:first-child .claim__figure {
    grid-row: 1;
  }
  .claims > li:first-child .claim__label {
    grid-row: 2;
    margin: 0;
  }
  .claims > li:first-child .claim__scope {
    grid-column: 2;
    grid-row: 1 / 3;
    border-top: 0;
    border-left: 1px solid var(--confirmed);
    padding: 0 0 0 2.5rem;
    font-size: 1.0625rem;
  }
  .claims > li:first-child .claim__source {
    grid-column: 2;
    padding-left: 2.5rem;
  }
  .claims > li:first-child .claim__number {
    font-size: clamp(4rem, 8vw, 6rem);
    color: var(--confirmed);
  }
}
.claim {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.claim__figure {
  margin: 0 0 0.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.claim__number {
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  letter-spacing: var(--tracking);
}
.claim__unit {
  font-size: 1rem;
  font-weight: 600;
}
.claim__label {
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  color: var(--ink-secondary);
}
.claim__scope {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  border-top: 1px solid var(--line);
  padding-top: 0.875rem;
  flex: 1;
}
.claim__source {
  margin: 0;
  font-size: 0.875rem;
}
/* ── WCAG 2.5.8, target size ───────────────────────────────────────────────
   These are not links inside a sentence, so the inline exception does not
   apply to them: each is a standalone citation or list item on its own line.
   Measured at 19px and 23px tall before this. 24px is the AA floor; the app's
   own --target-min is 44px, which is right for a control you press with a
   thumb mid-task and heavier than a citation on a marketing page needs. */
.claim__source a,
.linklist a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.caveat {
  background: var(--needs-check-bg, var(--surface-sunken));
  border-left: 4px solid var(--needs-check, var(--line-strong));
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.caveat h3 {
  font-size: 1.375rem;
  margin-bottom: 0.5rem;
}
.caveat > p {
  color: var(--ink-secondary);
  max-width: 62ch;
}
.caveat dl {
  margin: 1.5rem 0 0;
}
.caveat dt {
  font-weight: 600;
  margin-top: 1.5rem;
}
.caveat dd {
  margin: 0.375rem 0 0;
  color: var(--ink-secondary);
  max-width: 68ch;
}

/* ── faq ──────────────────────────────────────────────────────────────────── */

.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  padding: 1.125rem 2rem 1.125rem 0;
  position: relative;
  list-style: none;
  min-height: 2.75rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary h3 {
  display: inline;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}
.faq summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 1rem;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--primary);
}
.faq details[open] summary::after {
  content: '\2212';
}
.faq__a {
  padding: 0 2rem 1.25rem 0;
  color: var(--ink-secondary);
  max-width: 68ch;
}
.faq__a p {
  margin: 0;
}

/* ── lists / legal ────────────────────────────────────────────────────────── */

.linklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.linkout {
  font-size: 0.9375rem;
}

.band--legal section {
  margin-top: 2.75rem;
}
.band--legal section p {
  color: var(--ink-secondary);
  max-width: 70ch;
}
.band--legal h2 {
  font-size: 1.5rem;
  max-width: none;
  scroll-margin-top: 5rem;
}