/* ==========================================================================
   global.css — everything that appears on more than one page.

   Palette provenance: the two reference screenshots in images/ were decoded
   pixel-by-pixel (tools/sample.mjs) rather than eyeballed. The reference's real
   signature turned out not to be its blue but its darks: #09073f for table
   headers and #202037 for the footer are blue-VIOLET, while its accent #276eff
   is a plain royal blue. The two never resolve into one hue.

   So this palette keeps the violet darks and pulls the accent into the same
   hue family instead of leaving it stranded — one hue, three jobs (structure,
   accent, wash). That is the whole colour idea, and it is why the page reads as
   a single engineered object rather than a blog with a blue button.

   Layout model: a sticky index rail on the left, content on the right, both
   starting at the same top edge. Prose is capped at --measure so no line runs
   the full column; tables, card decks and diagrams take the whole column via
   .bleed. Depth comes from 1px rules and tonal surfaces, never a drop shadow —
   the reference uses no shadows either, and it is what makes a page of dense
   comparison data read as a printed report.
   ========================================================================== */

/* ── Typefaces ─────────────────────────────────────────────────────────────
   Self-hosted, latin + latin-ext only. Served from this origin so there is no
   third-party request in the critical path and no DNS lookup between the
   stylesheet and the first glyph. Space Grotesk and Public Sans are variable;
   Plex Mono is a single 500 instance, which is the only weight the label-caps
   treatment uses. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/public-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/public-sans-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ───────────────────────────────────────────────────────────────
   Two rules about the accent, both load-bearing:
   1. --accent is #4c31f0, about 4.0:1 on white. It is a fill, a rule, a badge,
      an icon stroke — never a word. Accent text uses --accent-ink.
   2. --ink-soft is a warm violet-grey lifted from the reference's own body ink
      (#6d6779), darkened to clear AA. It is not a neutral grey, and that is
      what stops the page reading as a default document. */

:root {
  /* surfaces, lightest to dimmest */
  --paper: #ffffff;
  --paper-tint: #fbfbfd;
  --paper-sunk: #f4f4f8;
  --paper-edge: #ececf3;

  /* ink */
  --ink: #0a0820;
  --ink-soft: #565064;
  --ink-faint: #7e7a8d;
  --ink-invert: #ffffff;

  /* structure: the deep violet that carries every authoritative surface */
  --structure: #12103a;
  --structure-deep: #0a0826;
  --structure-soft: #1f1d38;
  --structure-line: #35325e;
  --structure-ink: #b9b5d4;

  /* accent: same hue family as the structure, pushed to full chroma */
  --accent: #4c31f0;
  --accent-ink: #3a1fbd;
  --accent-deep: #2a1291;
  --accent-wash: #eee9ff;
  --accent-line: #cdc0ff;

  /* verdict pair, from the reference's own pros/cons cards */
  --pro: #0d7048;
  --pro-wash: #e9f5ef;
  --pro-line: #bfe0d0;
  --con: #b8322a;
  --con-wash: #fdeceb;
  --con-line: #f0c9c6;

  /* lines */
  --rule: #e6e6ee;
  --rule-strong: #d2d2de;

  /* spacing, 8px base */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 2.5rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-10: 5rem;
  --gutter: 1.25rem;
  --section-gap: 3rem;

  /* radii — kept minimal, the reference is near-square throughout */
  --r-sm: 0.1875rem;
  --r: 0.3125rem;
  --r-md: 0.5rem;
  --r-lg: 0.75rem;
  --r-pill: 9999px;

  /* layout */
  --shell: 1240px;
  --rail: 236px;
  --header-h: 64px;
  --measure: 40rem;
  --measure-wide: 46rem;

  /* type */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --ease: cubic-bezier(0.32, 0.08, 0.24, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
    --section-gap: 4rem;
  }
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ── Type ───────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.0625rem, 1.35rem + 2.9vw, 3.125rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(1.5rem, 1.28rem + 0.95vw, 2.0625rem);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.024em;
}
h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.014em;
}
h4 {
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p { margin: 0; }
p + p { margin-top: 0.9rem; }

strong { font-weight: 650; color: var(--ink); }

/* The label-caps treatment. This is the site's one structural device: every
   micro-heading, table head, field label, rank badge and source index uses it,
   so the whole page reads in one voice. Mono at this size needs the tracking
   or the caps close up. */
/* The eyebrow is the caps treatment doing duty as a kicker above an h1. It
   lives here rather than in home.css because every interior page uses one. */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.caps {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.16em;
  transition: color 0.15s var(--ease);
}
a:hover { color: var(--accent-deep); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--structure);
  color: var(--ink-invert);
  text-decoration: none;
  border-radius: var(--r);
}

/* ── Shell ──────────────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Masthead ───────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--structure);
  text-decoration: none;
  margin-right: auto;
}
.brand__mark {
  display: block;
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--structure);
}
.brand__mark svg { display: block; width: 100%; height: 100%; }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  white-space: nowrap;
}
.brand__word em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-soft);
}

.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}
.burger__bars {
  position: relative;
  width: 14px;
  height: 9px;
  flex: none;
}
.burger__bars::before,
.burger__bars::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
}
.burger__bars::before { top: 0; }
.burger__bars::after { bottom: 0; }

.topnav {
  display: none;
  flex-direction: column;
  gap: 0.125rem;
}
.topnav.is-open {
  display: flex;
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  padding: var(--s-2) var(--gutter) var(--s-3);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.topnav__link,
.topnav__cta {
  padding: 0.55rem 0;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.topnav__link[aria-current='page'] { color: var(--accent-ink); }
.topnav__link:hover { color: var(--accent-ink); }
.topnav__cta { color: var(--accent-ink); font-weight: 600; }

@media (min-width: 1040px) {
  .burger { display: none; }
  .topnav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.35rem;
  }
  .topnav__link {
    position: relative;
    padding: 0;
    font-size: 0.875rem;
    color: var(--ink-soft);
  }
  .topnav__link[aria-current='page'] {
    color: var(--ink);
    font-weight: 600;
  }
  /* The current item is marked by a rule sitting on the masthead's own bottom
     border, so it reads as a tab rather than a coloured word. */
  .topnav__link[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.42rem;
    height: 2px;
    background: var(--accent);
  }
  .topnav__cta {
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
    background: var(--accent-wash);
    font-size: 0.875rem;
  }
  .topnav__cta:hover { background: #e4dcff; }
}

/* ── Page frame: sticky index rail + content column ─────────────────────── */

.page { padding-bottom: var(--s-10); }

.frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
@media (min-width: 1040px) {
  .frame {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
}

.rail { min-width: 0; }
@media (min-width: 1040px) {
  .rail {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    max-height: calc(100vh - var(--header-h) - var(--s-6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.rail__title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rail;
}
.rail__list li { counter-increment: rail; }
.rail__list a {
  display: flex;
  gap: 0.6rem;
  padding: 0.34rem 0 0.34rem 0.7rem;
  margin-left: -0.7rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  line-height: 1.45;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.rail__list a::before {
  content: counter(rail, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  color: var(--ink-faint);
  padding-top: 0.1em;
}
.rail__list a:hover {
  color: var(--accent-ink);
  border-left-color: var(--accent-line);
}
.rail__list a:hover::before { color: var(--accent-ink); }

.rail__aside {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.rail__aside p { font-size: 0.8125rem; line-height: 1.55; color: var(--ink-soft); }
.rail__aside .caps { margin-bottom: 0.5rem; display: block; }
.rail__aside ul { margin: 0.35rem 0 0; padding: 0; list-style: none; }
.rail__aside li + li { margin-top: 0.3rem; }
.rail__aside li a { font-size: 0.8125rem; }

.col { min-width: 0; }

/* ── Sections ───────────────────────────────────────────────────────────── */

.section { margin-top: var(--section-gap); }
.section:first-child { margin-top: 0; }

.section__title { margin-bottom: 0.75rem; }
.section__lead {
  max-width: var(--measure-wide);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.section > p,
.section > ul,
.section > ol { max-width: var(--measure); }
.section > p + p { margin-top: 0.9rem; }
.section__lead + * { margin-top: var(--s-3); }

/* .bleed has to out-specify the prose caps above. ".section > ol" scores
   0,1,1 (one class, one type) and a bare ".bleed" only 0,1,0, so without the
   descendant form below every full-width list -- the ranking cards, the
   criteria grid, the question list -- silently collapses to the 40rem measure
   while the tables beside them stay full width. */
.bleed { max-width: none; }
.section > .bleed { max-width: none; }

/* run-in subheads inside a section */
.sub { margin-top: var(--s-4); }
.sub > h3 { margin-bottom: 0.4rem; }
.sub > p { max-width: var(--measure); }

/* ── Prose lists ────────────────────────────────────────────────────────── */

.list {
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}
.list li {
  position: relative;
  padding-left: 1.15rem;
  margin-top: 0.45rem;
}
.list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  background: var(--accent);
}

/* numbered list where the order is real information */
.steps {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  max-width: var(--measure-wide);
}
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--accent-ink);
  padding-top: 0.42em;
}
.steps > li:last-child { border-bottom: 1px solid var(--rule); }

/* ── Tables ─────────────────────────────────────────────────────────────── */

.scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
}

.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.55;
}
.grid thead th {
  background: var(--structure);
  color: var(--ink-invert);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  padding: 0.7rem 0.85rem;
  white-space: nowrap;
}
.grid tbody th,
.grid tbody td {
  padding: 0.75rem 0.85rem;
  border-top: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
}
.grid tbody tr:first-child th,
.grid tbody tr:first-child td { border-top: 0; }
.grid tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
}
.grid tbody tr:nth-child(even) { background: var(--paper-tint); }
.grid td { color: var(--ink-soft); }
.grid .num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--ink-faint);
  width: 2.6rem;
  min-width: 2.6rem;
}
.grid .firm { min-width: 11rem; }
.grid .firm a { font-weight: 600; }
.grid .term { min-width: 9rem; }

.table-note {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: var(--measure-wide);
}

/* ── Notes and banner strips ────────────────────────────────────────────── */

.note {
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--paper-tint);
}
.note > p { max-width: var(--measure-wide); }
.note .caps { display: block; margin-bottom: 0.4rem; }
.note--flat { border-left-color: var(--rule-strong); }

.strip {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-md);
  background: var(--structure);
  color: #dcd8f2;
}
.strip h2, .strip h3 { color: var(--ink-invert); }
.strip p { max-width: var(--measure-wide); margin-top: 0.6rem; }
.strip a { color: #c3b6ff; }
.strip a:hover { color: var(--ink-invert); }
.strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--s-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.05rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background-color 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--accent);
  color: var(--ink-invert);
}
.btn--primary:hover { background: #5a41f5; color: var(--ink-invert); }
.btn--quiet {
  border-color: var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
}
.btn--quiet:hover { background: var(--paper-sunk); color: var(--ink); }
.strip .btn--quiet {
  border-color: var(--structure-line);
  background: transparent;
  color: var(--ink-invert);
}
.strip .btn--quiet:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink-invert); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.qa {
  margin-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.qa__item { border-bottom: 1px solid var(--rule); }
.qa__q {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 0;
  cursor: pointer;
  list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.qa__q::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 13px;
  height: 13px;
  margin-top: 0.34em;
  background:
    linear-gradient(var(--accent-ink), var(--accent-ink)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--accent-ink), var(--accent-ink)) center / 1.5px 13px no-repeat;
  transition: transform 0.18s var(--ease);
}
.qa__item[open] .qa__q::after { transform: rotate(45deg); }
.qa__item[open] .qa__q { padding-bottom: 0.35rem; }
.qa__a {
  padding: 0 2rem 1.1rem 0;
  max-width: var(--measure);
}
.qa__a p { color: var(--ink-soft); }

/* ── Sources ────────────────────────────────────────────────────────────── */

.sources {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: src;
  max-width: var(--measure-wide);
}
.sources li {
  counter-increment: src;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.sources li:last-child { border-bottom: 1px solid var(--rule); }
.sources li::before {
  content: counter(src, decimal-leading-zero);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--ink-faint);
  padding-top: 0.32em;
}
/* Three grid items in a two-column grid: the ::before counter takes column
   one, the link takes column two, and the description wraps onto row two --
   into the 2.1rem counter column, one word per line. Pin it to column two. */
.sources__what {
  grid-column: 2;
  color: var(--ink-faint);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ── Definition blocks ──────────────────────────────────────────────────── */

.defs { margin: var(--s-3) 0 0; max-width: var(--measure-wide); }
.defs > div {
  display: grid;
  gap: 0.15rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
}
.defs > div:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) {
  .defs > div { grid-template-columns: 11rem minmax(0, 1fr); }
}
.defs dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.36em;
}
.defs dd { margin: 0; color: var(--ink-soft); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */

.trail {
  padding: var(--s-3) 0 0;
  font-size: 0.8125rem;
}
.trail ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-faint);
}
.trail li + li::before { content: '/ '; color: var(--rule-strong); }
.trail a { color: var(--ink-soft); text-decoration: none; }
.trail a:hover { color: var(--accent-ink); text-decoration: underline; }
.trail [aria-current='page'] { color: var(--ink-faint); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.endmatter {
  /* no margin-top: .page already carries a --s-10 bottom pad, and stacking the
     two left 160px of dead white between the last section and the footer */
  padding: var(--s-8) 0 var(--s-5);
  background: var(--structure-soft);
  color: var(--structure-ink);
  font-size: 0.875rem;
}
.endmatter__grid {
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 640px) {
  .endmatter__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .endmatter__grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}
.endmatter__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--ink-invert);
}
.endmatter__blurb { margin-top: 0.6rem; line-height: 1.6; max-width: 34ch; }
.endmatter__title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8e89b0;
}
.endmatter__list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.endmatter__list li + li { margin-top: 0.4rem; }
.endmatter__list a {
  color: var(--structure-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.endmatter__list a:hover { color: var(--ink-invert); text-decoration: underline; }

.endmatter__base {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--structure-line);
}
.endmatter__note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #8e89b0;
  max-width: 88ch;
}
.endmatter__legal {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: #8e89b0;
}

/* ── Interior page header ───────────────────────────────────────────────────
   Interior pages get the same left edge and the same label-caps eyebrow as the
   ranking page, but no tinted band: on a policy or methodology page a hero
   would be borrowed authority. */

.pagehead {
  padding: var(--s-3) 0 var(--s-4);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.pagehead h1 { margin-top: 0.7rem; max-width: 26ch; }
.pagehead__lead {
  margin-top: var(--s-2);
  max-width: var(--measure-wide);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.pagehead__meta {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  line-height: 1.7;
}
.pagehead__meta a { color: var(--ink-faint); }

/* single-column interior pages: no index rail, prose capped at the measure */
.solo { max-width: 48rem; }
.solo .section:first-child { margin-top: 0; }

/* a plain email or key-value callout */
.plate {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-tint);
}
.plate .caps { display: block; margin-bottom: 0.35rem; }
.plate__mail {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}