/* ==========================================================================
   HedgeFundDB — site.css
   Design decisions (brief §3, docs/architecture.md §9–§10):
   1. Editorial research product. Character comes from typography and
      composition: a large, tightly tracked display headline, generous
      whitespace, hairline rules. No gradients, stock imagery, decorative
      charts or walls of cards. Lists are rows divided by 1px rules; the only
      boxes are the task panel, answer callout, CTA panels (guide, profile,
      funds handoff), the guides' 9AT demonstrations and notices.
   2. Palette = brief tokens verbatim (canvas/surface/ink/muted/accent/border).
      Derived tints exist only for callouts and notices. Every text pair used
      was checked: muted #51606B on canvas 6.04:1, on white 6.49:1; accent
      #096B64 on canvas 5.92:1, on white 6.37:1; white on accent 6.37:1;
      notice label inks 7.0–8.9:1 on their tints.
   3. Type: one system sans stack (no font download); a Display optical cut
      is preferred for headings where the OS has one. Body 17px → 18px from
      64em, line-height 1.6. Headings 600–700 with negative tracking that
      tightens as size grows. Figures, dates and identifiers use tabular
      numerals (.num, time, tables).
   4. Layout: 1160px container, 16/24/32px gutters, 44rem (704px) article
      measure, spacing on an 8px rhythm (4px half-steps for tight UI).
   5. Surfaces: page heads sit on the warm canvas; reading content sits on a
      full-bleed white band. One shadow in the whole system (consent bar).
   6. Progressive enhancement. The mobile nav is plain wrapped links without
      JS. With scripting enabled, @media (scripting: enabled) collapses it
      before first paint (no flash, no layout shift) behind a "Menu" control
      that is a link to the footer navigation until site.js upgrades it to a
      real disclosure button. Contents use <details> (closed on mobile, opened
      as a sticky rail by JS on wide screens).
   7. Accessibility: 3px :focus-visible ring, ≥44px touch targets on narrow
      screens, reduced-motion support, forced-colors fixes, no body-level
      horizontal overflow at 320px (long names/URLs wrap anywhere; wide
      tables scroll inside labelled regions or restack as labelled rows).
   8. States are designed, not left blank: missing values use the
      methodology's labels (Reported / Not reported / Unavailable / Not
      applicable / Reported none, plus Pending approval), styled .state.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brief §3 palette */
  --canvas: #F6F7F5;
  --surface: #FFFFFF;
  --ink: #142638;
  --muted: #51606B;
  --accent: #096B64;
  --border: #DCE3E4;

  /* Derived */
  --ink-soft: #2C3D4F;
  --accent-hover: #075550;
  --accent-active: #05443F;
  --accent-tint: #E8F1EF;
  --border-strong: #C3CDD0;
  --wash: #EEF1F2;
  --focus: #096B64;

  /* Notices: background / rule / label ink */
  --draft-bg: #FDF4E1;      --draft-rule: #A86A12;      --draft-ink: #6F4507;
  --synthetic-bg: #F3EFF9;  --synthetic-rule: #6A4BA3;  --synthetic-ink: #4E3483;
  --fixture-bg: #EDF1F2;    --fixture-rule: #51606B;    --fixture-ink: #36434D;
  --historical-bg: #F6EFE7; --historical-rule: #8A5A2B; --historical-ink: #664120;
  --stale-bg: #FCEFE4;      --stale-rule: #B4540A;      --stale-ink: #853C05;
  --pending-bg: #EAF1F7;    --pending-rule: #2E6390;    --pending-ink: #1E4A70;
  /* "Not recently updated" (a current record whose latest filing is old): ink 7.9:1 on its tint, rule 4.8:1. */
  --dated-bg: #F5F2E6;      --dated-rule: #7A6A1F;      --dated-ink: #564A12;

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-body: 1.0625rem;
  --text-lede: 1.1875rem;
  --h1: clamp(2rem, 1.55rem + 1.9vw, 2.875rem);
  --h2: clamp(1.5rem, 1.33rem + 0.75vw, 1.875rem);
  --h3: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);
  --display: clamp(2.375rem, 1.6rem + 3vw, 4rem);

  /* Space (8px rhythm) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;
  --s-11: 6rem;

  /* Layout */
  --container: 72.5rem;
  --measure: 44rem;
  --gutter: 1rem;
  --radius: 4px;
  --radius-lg: 6px;
}

@media (min-width: 40em) {
  :root { --gutter: 1.5rem; }
}

@media (min-width: 64em) {
  :root {
    --gutter: 2rem;
    --text-body: 1.125rem;
    --text-lede: 1.3125rem;
  }
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  font-kerning: normal;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}

main { display: block; flex: 1 0 auto; }
main:focus { outline: none; }

[hidden] { display: none !important; }

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

p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

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

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

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

strong, b { font-weight: 600; }

.num,
time,
table { font-variant-numeric: tabular-nums; }
/* An identifier quoted in running text ("SEC file number 801-100464") never breaks at its hyphen. */
.id-inline { white-space: nowrap; font-variant-numeric: tabular-nums; }

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

.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transform: translateY(-110%);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 3. Shared typographic pieces ---------- */
.kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker--accent { color: var(--accent); }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }

.page-title {
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 22em;
}

.lede {
  margin-top: var(--s-4);
  max-width: 40rem;
  font-size: var(--text-lede);
  line-height: 1.55;
  color: var(--ink-soft);
}

.page-note {
  margin-top: var(--s-3);
  max-width: 40rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

.state { color: var(--muted); font-style: italic; }

.ext-mark {
  display: inline-block;
  margin-left: 0.3em;
  font-weight: 400;
  text-decoration: none;
}

.arrow { display: inline-block; transition: transform 0.15s ease; }

/* Badges: small inline labels (Draft, Synthetic example, Historical, link verification). Short fixed labels stay on one
   line; the long ones (historical "as of" date, "Checked without an account on …") wrap so they never overflow 320px,
   including under WCAG 1.4.12 text spacing. */
.badge {
  --b-bg: var(--surface);
  --b-rule: var(--border-strong);
  --b-ink: var(--muted);
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  border: 1px solid var(--b-rule);
  border-radius: 3px;
  background: var(--b-bg);
  color: var(--b-ink);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.03em;
  white-space: nowrap;
  vertical-align: 0.15em;
}
.badge--draft { --b-bg: var(--draft-bg); --b-rule: var(--draft-rule); --b-ink: var(--draft-ink); }
.badge--synthetic { --b-bg: var(--synthetic-bg); --b-rule: var(--synthetic-rule); --b-ink: var(--synthetic-ink); border-style: dashed; }
.badge--historical { --b-bg: var(--historical-bg); --b-rule: var(--historical-rule); --b-ink: var(--historical-ink); white-space: normal; }
.badge--pending { --b-bg: var(--pending-bg); --b-rule: var(--pending-rule); --b-ink: var(--pending-ink); }
.badge--checked { --b-bg: var(--fixture-bg); --b-rule: var(--border-strong); --b-ink: var(--fixture-ink); font-weight: 600; white-space: normal; text-wrap: balance; }
.badge--example { --b-bg: var(--synthetic-bg); --b-rule: var(--synthetic-rule); --b-ink: var(--synthetic-ink); border-style: dashed; }

/* ---------- 4. Buttons and action links ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0.6875rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.button:active { background: var(--accent-active); border-color: var(--accent-active); color: #fff; }
.button--secondary { background: var(--surface); color: var(--accent); }
.button--secondary:hover { background: var(--accent-tint); color: var(--accent-hover); }
.button--secondary:active { background: var(--accent-tint); color: var(--accent-active); }
.button--block { display: flex; width: 100%; justify-content: space-between; }
.button .ext-mark { margin-left: 0; }
/* A label that wraps breaks into even lines, never leaving "9AT" alone on the last one. */
.button > span:first-child { text-wrap: balance; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* ---------- 5. Masthead and navigation ---------- */
.masthead {
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-5);
  min-height: 64px;
  padding-block: var(--s-2);
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  padding-block: var(--s-1);
  color: var(--ink);
  line-height: 1.1;
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.wordmark__name {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.wordmark__db { color: var(--accent); }
.wordmark__tag {
  margin-top: 3px;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.site-nav { flex-basis: 100%; }
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(-1 * var(--s-3));
}
.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-3);
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
}
.site-nav__list a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav__list a[aria-current] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}
.site-nav__cta a { color: var(--accent); font-weight: 600; }

.nav-toggle { display: none; }

@media (max-width: 47.99em) and (scripting: enabled) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    margin-right: calc(-1 * var(--s-2));
    padding: 0 var(--s-3);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }
  .nav-toggle:hover { border-color: var(--border-strong); color: var(--ink); }
  .nav-toggle__icon,
  .nav-toggle__icon::before,
  .nav-toggle__icon::after {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.15s ease, background-color 0.15s ease;
  }
  .nav-toggle__icon { position: relative; }
  .nav-toggle__icon::before,
  .nav-toggle__icon::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__icon::before { top: -5px; }
  .nav-toggle__icon::after { top: 5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-5px) rotate(-45deg); }

  .site-nav:not(.is-open) { display: none; }
  .site-nav.is-open { padding-bottom: var(--s-3); }
  .site-nav.is-open .site-nav__list { flex-direction: column; margin-inline: 0; border-top: 1px solid var(--border); }
  .site-nav.is-open .site-nav__list li + li { border-top: 1px solid var(--border); }
  .site-nav.is-open .site-nav__list a { display: flex; padding-inline: 0; min-height: 48px; }
}

@media (min-width: 48em) {
  .masthead__inner { flex-wrap: nowrap; min-height: 72px; }
  .site-nav { flex-basis: auto; }
  .site-nav__list { margin-inline: 0; gap: var(--s-1); align-items: center; }
  .site-nav__cta { margin-left: var(--s-2); }
  .site-nav__cta a {
    min-height: 40px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
  }
  .site-nav__cta a:hover { background: var(--accent-tint); text-decoration: none; }
}

/* ---------- 6. Page top: breadcrumbs and notices ---------- */
.page-top { padding-top: var(--s-3); }

.breadcrumbs ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--muted);
}
.breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumbs li + li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 0.75rem 0 0.5rem;
  border-top: 1.5px solid var(--border-strong);
  border-right: 1.5px solid var(--border-strong);
  transform: rotate(45deg);
}
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--muted);
  text-decoration-color: var(--border-strong);
}
.breadcrumbs a:hover { color: var(--accent); text-decoration-color: currentColor; }
.breadcrumbs [aria-current] { color: var(--ink-soft); overflow-wrap: anywhere; }

@media (max-width: 39.99em) {
  /* Narrow screens: show only the parent crumb as a back link (the H1 names the page). */
  .breadcrumbs li { display: none; }
  .breadcrumbs li:nth-last-child(2) { display: inline-flex; }
  .breadcrumbs li:nth-last-child(2)::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin: 0 0.5rem 0 0.125rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(-135deg);
  }
  .breadcrumbs a { min-height: 44px; }
}

.notices {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-4);
}
.notice {
  --n-bg: var(--wash);
  --n-rule: var(--muted);
  --n-ink: var(--ink);
  max-width: 60rem;
  padding: 0.625rem var(--s-4);
  border-left: 4px solid var(--n-rule);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--n-bg);
  font-size: var(--text-md);
  line-height: 1.5;
}
.notice__title { font-weight: 700; color: var(--n-ink); }
.notice__text { color: var(--ink); }
.notice--draft { --n-bg: var(--draft-bg); --n-rule: var(--draft-rule); --n-ink: var(--draft-ink); }
.notice--synthetic {
  --n-bg: var(--synthetic-bg); --n-rule: var(--synthetic-rule); --n-ink: var(--synthetic-ink);
  border: 1px dashed var(--synthetic-rule);
  border-left: 4px dashed var(--synthetic-rule);
}
.notice--fixture { --n-bg: var(--fixture-bg); --n-rule: var(--fixture-rule); --n-ink: var(--fixture-ink); }
.notice--historical { --n-bg: var(--historical-bg); --n-rule: var(--historical-rule); --n-ink: var(--historical-ink); }
.notice--stale { --n-bg: var(--stale-bg); --n-rule: var(--stale-rule); --n-ink: var(--stale-ink); }
.notice--pending { --n-bg: var(--pending-bg); --n-rule: var(--pending-rule); --n-ink: var(--pending-ink); }
.notice--dated { --n-bg: var(--dated-bg); --n-rule: var(--dated-rule); --n-ink: var(--dated-ink); }

/* ---------- 7. Bands and section heads ---------- */
.band { padding-block: var(--s-8); }
.band--surface {
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.band--flush { padding-block: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-bottom: var(--s-5);
}
.section-lede {
  margin-top: var(--s-2);
  max-width: 40rem;
  color: var(--ink-soft);
}

.page-head { padding-block: var(--s-5) var(--s-7); }

@media (min-width: 64em) {
  .band { padding-block: var(--s-10); }
  .band--flush { padding-block: 0; }
  .page-head { padding-block: var(--s-6) var(--s-8); }
}

/* Editorial split: heading column + content column (guide groups, profile sections). */
.split {
  display: grid;
  gap: var(--s-4) var(--s-8);
  padding-block: var(--s-6);
  border-top: 1px solid var(--border);
}
.split:first-child { border-top: 0; padding-top: 0; }
.split__title {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.split__head .kicker { margin-bottom: var(--s-2); }
.split__intro { margin-top: var(--s-2); font-size: var(--text-sm); color: var(--muted); }
.split__body { min-width: 0; }

@media (min-width: 64em) {
  .split {
    grid-template-columns: 15rem minmax(0, 1fr);
    padding-block: var(--s-8);
  }
  .split:first-child { padding-top: 0; }
}

/* ---------- 8. Homepage ---------- */
.hero { padding-block: var(--s-6) var(--s-8); }
.hero__grid { display: grid; gap: var(--s-7); }
.hero__title {
  max-width: 12em;
  font-size: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.032em;
}
.hero__title-line { display: block; }
.hero__title-line + .hero__title-line { color: var(--muted); }
.hero__lede {
  margin-top: var(--s-5);
  max-width: 34rem;
  font-size: var(--text-lede);
  line-height: 1.55;
  color: var(--ink-soft);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
}
.hero__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-3);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Prospecting in 9AT: the five 9AT workflows as a ruled list (one column on phones, three on wide screens), each with
   its plain-words description and, where a guide is visible, the public method beside it. */
.workflows__statement {
  margin-top: var(--s-3);
  max-width: 24em;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.workflows {
  display: grid;
  gap: 0 var(--s-7);
  margin-bottom: var(--s-7);
  border-top: 1px solid var(--border);
}
.workflow {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.workflow__title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.workflow__text { max-width: 36rem; color: var(--ink-soft); }
.workflow__method { font-size: var(--text-sm); color: var(--muted); }
@media (min-width: 48em) {
  .workflows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .workflows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.task-panel {
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.task-panel__title { margin-bottom: var(--s-2); }
.task-list li + li { border-top: 1px solid var(--border); }
.task-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: var(--s-4);
  color: var(--ink);
  text-decoration: none;
}
.task-link:hover { color: var(--ink); }
.task-link__q {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
}
.task-link:hover .task-link__q { color: var(--accent); text-decoration-color: currentColor; }
.task-link__go { font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
.task-link:hover .arrow { transform: translateX(3px); }
.task-panel__more {
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
}
.task-panel__empty { color: var(--muted); font-size: var(--text-md); padding-block: var(--s-3); }

@media (min-width: 64em) {
  .hero { padding-block: var(--s-10) var(--s-11); }
  .hero__grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(19rem, 1fr);
    gap: var(--s-9);
    align-items: center;
  }
  .task-panel { padding: var(--s-6); }
}

/* Featured guide */
.feature { display: grid; gap: var(--s-6); }
.feature__task { font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
.feature__title {
  margin-top: var(--s-2);
  max-width: 18em;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.feature__title a { color: var(--ink); text-decoration: none; }
.feature__title a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }
.feature__summary {
  margin-top: var(--s-4);
  max-width: 36rem;
  font-size: var(--text-lede);
  line-height: 1.55;
  color: var(--ink-soft);
}
.feature__more { margin-top: var(--s-4); }
.feature__steps {
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.feature__steps-title { font-family: var(--font-sans); }

.meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) 0;
  margin-top: var(--s-4);
  font-size: var(--text-sm);
  color: var(--muted);
}
.meta-line > * { display: inline-flex; align-items: center; }
.meta-line > * + *::before {
  content: "";
  width: 1px;
  height: 0.95em;
  margin-inline: var(--s-3);
  background: var(--border-strong);
}
@media (max-width: 39.99em) {
  /* Narrow: items wrap unpredictably, so use spacing instead of rules that could start a line. */
  .meta-line { column-gap: var(--s-4); }
  .meta-line > * + *::before { display: none; }
}

.steps { counter-reset: step; margin-top: var(--s-3); }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-4);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}
.steps li:first-child { border-top: 0; }
.steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.feature__steps-note { margin-top: var(--s-2); font-size: var(--text-sm); color: var(--muted); }

@media (min-width: 64em) {
  .feature {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--s-9);
  }
  .feature__steps {
    padding: 0 0 0 var(--s-8);
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}

/* Prospecting in 9AT: the text and CTA row under the workflows (formerly "From research to action") */
.action { display: grid; gap: var(--s-5); }
.action__statement {
  margin-top: var(--s-3);
  max-width: 18em;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.action__text p + p { margin-top: var(--s-3); }
.action__body { max-width: 40rem; color: var(--ink-soft); }
.action__cta { display: grid; gap: var(--s-3); justify-items: start; align-content: start; }
/* Secondary links ("Request a demo", "9AT for fund administrators", "Sign in"), one per line, each with its own label if any. */
.action__links { display: grid; gap: 0; }
.action__links li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); }
.action__caveat { font-size: var(--text-sm); color: var(--muted); max-width: 28rem; }
.action__note { font-size: var(--text-sm); color: var(--muted); }

@media (min-width: 64em) {
  .action { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); gap: var(--s-9); align-items: end; }
}

/* ---------- 9. Rows: guides and advisers ---------- */
.guide-rows { border-top: 1px solid var(--border); }
.guide-row {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.guide-row__title {
  font-size: var(--h3);
  line-height: 1.25;
  letter-spacing: -0.012em;
}
.guide-row__title a { color: var(--ink); text-decoration: none; }
.guide-row__title a::after { content: ""; position: absolute; inset: 0; }
.guide-row:hover .guide-row__title a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }
.guide-row__summary { max-width: 42rem; color: var(--ink-soft); }
.guide-row__meta { margin-top: 0; }
.guide-row__go { font-weight: 600; color: var(--accent); }
.guide-row:hover .arrow { transform: translateX(3px); }
.guide-row .badge { position: relative; }

.adviser-list { border-top: 1px solid var(--border); }
.adviser-row {
  position: relative;
  display: grid;
  gap: var(--s-3) var(--s-6);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.adviser-row__name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-decoration-color: var(--border-strong);
  overflow-wrap: anywhere;
}
.adviser-row__name::after { content: ""; position: absolute; inset: 0; }
.adviser-row:hover .adviser-row__name { color: var(--accent); text-decoration-color: currentColor; }
.adviser-row__kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  margin-top: var(--s-1);
  font-size: var(--text-sm);
  color: var(--muted);
}
.adviser-row__kind .badge { position: relative; }
/* The facts sit above the row's stretched name link, so identifiers can be selected and copied (the name column and
   the row padding still open the profile). */
.adviser-row__facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--s-2) var(--s-5);
  font-size: var(--text-sm);
}
.adviser-row__facts dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.adviser-row__facts dd { color: var(--ink); overflow-wrap: anywhere; }
.adviser-row__id { display: block; }
.adviser-row__id-type { color: var(--muted); }
/* An identifier never breaks inside itself ("801-" / "100464"): when label and value do not fit on one line, the whole
   value moves below its label. On phones the identifiers get the full row width, so even the longest fits. */
.adviser-row__id .num { display: inline-block; white-space: nowrap; }
@media (max-width: 39.99em) {
  .adviser-row__facts > :first-child { grid-column: 1 / -1; }
  /* The A–Z index row's first fact is one short SEC file number, so both facts share a line and rows stay compact. */
  .adviser-list--index .adviser-row { padding-block: var(--s-4); gap: var(--s-2); }
  .adviser-list--index .adviser-row__facts > :first-child { grid-column: auto; }
}

@media (min-width: 64em) {
  .adviser-row {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr);
    align-items: start;
  }
  .adviser-row__facts { grid-template-columns: 1.3fr 1fr 0.8fr; }
}

.empty-state {
  padding: var(--s-6) var(--s-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  color: var(--ink-soft);
}
.empty-state__title { font-weight: 700; color: var(--ink); }
.empty-state p + p { margin-top: var(--s-2); }

.list-count { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--s-3); }

/* Pager of the A–Z profile index: the same list above and below the rows. Page numbers are 44px targets; the current
   page is marked by an outlined, tinted box (and aria-current), not by colour alone. Gaps are a plain ellipsis, never a
   separator that could start a line. */
.index-bar { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.index-bar .list-count { margin-bottom: 0; }
.pager { margin-top: var(--s-5); }
.index-bar .pager { margin-top: 0; }
.pager__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.pager__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.pager__list a:hover { color: var(--accent); text-decoration: underline; }
.pager__list a[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-active);
  font-weight: 700;
}
.pager__list a.pager__step { color: var(--accent); font-weight: 600; }
.pager__gap { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }

/* ---------- 10. Articles: guides and content pages ---------- */
.article-head { max-width: 52rem; padding-block: var(--s-5) var(--s-7); }
.article-title {
  margin-top: var(--s-3);
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.article-head .lede { max-width: 42rem; }
.byline { margin-top: var(--s-5); }
.byline__state { color: var(--muted); font-style: italic; }

.article-layout {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-6) var(--s-9);
}
.article-main { min-width: 0; max-width: var(--measure); }

@media (min-width: 64em) {
  .article-head { padding-block: var(--s-6) var(--s-8); }
  .article-layout {
    grid-template-columns: minmax(0, var(--measure)) minmax(12rem, 15rem);
    justify-content: space-between;
    gap: var(--s-9);
    padding-block: var(--s-8) var(--s-11);
  }
  .article-rail {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--s-5);
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
  .article-main { grid-column: 1; grid-row: 1; }
}

/* Contents */
.toc { font-size: var(--text-sm); }
.toc__details {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.toc__summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: 0 var(--s-4);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  margin-top: -4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.toc__details[open] > .toc__summary::after { transform: rotate(-135deg); margin-top: 4px; }
.toc__count { font-weight: 400; color: var(--muted); }
.toc__list { padding: 0 var(--s-4) var(--s-3); }
.toc__list a {
  display: block;
  padding-block: var(--s-2);
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  line-height: 1.35;
  text-decoration: none;
}
.toc__list a:hover { color: var(--accent); text-decoration: underline; }
.toc__list a[aria-current] { color: var(--accent); font-weight: 600; }

@media (min-width: 64em) {
  .toc__details { border: 0; border-radius: 0; background: none; }
  .toc__summary {
    min-height: 0;
    padding: 0 0 var(--s-3);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .toc__details[open] > .toc__summary { cursor: default; pointer-events: none; }
  .toc__details[open] > .toc__summary::after,
  .toc__details[open] .toc__count { display: none; }
  .toc__list { padding: 0; border-left: 1px solid var(--border); }
  .toc__list a {
    margin-left: -1px;
    padding: 0.4375rem 0 0.4375rem var(--s-4);
    border-top: 0;
    border-left: 2px solid transparent;
  }
  .toc__list a[aria-current] { border-left-color: var(--accent); }
  /* The rail is a scroll container exactly as wide as its links: draw the ring inside the link so it is not clipped. */
  .toc__list a:focus-visible { outline-offset: -3px; }
}

/* Answer callout */
.answer {
  margin-bottom: var(--s-7);
  padding: var(--s-5);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--accent-tint);
}
.answer__title { color: var(--accent-active); }
.answer__list { counter-reset: answer; display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.answer__list li {
  counter-increment: answer;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--s-2);
  line-height: 1.5;
}
.answer__list li::before {
  content: counter(answer) ".";
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Prose (sanitized Markdown) */
.prose > * + * { margin-top: 1em; }
.prose h2 {
  font-size: var(--h2);
  line-height: 1.2;
  letter-spacing: -0.018em;
  scroll-margin-top: var(--s-5);
}
.prose h3 {
  margin-top: 1.75em;
  font-size: var(--h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  scroll-margin-top: var(--s-5);
}
.prose h4 { margin-top: 1.5em; font-size: 1.0625rem; }
.prose h2 + *,
.prose h3 + *,
.prose h4 + * { margin-top: 0.6em; }
.prose ul,
.prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--muted); }
.prose li > ul,
.prose li > ol { margin-top: 0.4em; }
.prose a { overflow-wrap: anywhere; }
.prose code {
  padding: 0.1em 0.3em;
  border-radius: 3px;
  background: var(--wash);
  font-size: 0.9em;
}
.prose blockquote {
  padding-left: var(--s-4);
  border-left: 3px solid var(--border-strong);
  color: var(--ink-soft);
}
.prose hr { margin-block: 2em; border: 0; border-top: 1px solid var(--border); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
  line-height: 1.45;
}
.prose th {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border-strong);
  background: var(--canvas);
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
}
.prose td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
/* Tables wrapped by the Markdown pipeline in a labelled scroll region. The region is signposted so columns are never
   silently off-screen: an edge shadow shows on each side that has more to scroll (the "local" white covers scroll
   with the table and hide a shadow once that edge is reached; works without JS), and site.js adds a "Scroll table →"
   hint above the region while it overflows. The header tint is translucent so the shadow shows through it. */
.prose .table-scroll,
.prose [role="region"] {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.prose .table-scroll {
  background:
    linear-gradient(to right, var(--surface) 30%, rgb(255 255 255 / 0)) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgb(255 255 255 / 0)) right center / 2.5rem 100% no-repeat local,
    linear-gradient(to right, rgb(20 38 56 / 0.2), rgb(20 38 56 / 0)) left center / 0.875rem 100% no-repeat scroll,
    linear-gradient(to left, rgb(20 38 56 / 0.2), rgb(20 38 56 / 0)) right center / 0.875rem 100% no-repeat scroll,
    var(--surface);
}
.prose .table-scroll th { background-color: rgb(20 38 56 / 0.035); }
.prose .table-hint {
  display: flex;
  justify-content: flex-end;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}
.prose .table-hint + .table-scroll { margin-top: var(--s-1); }
.prose .table-scroll table,
.prose [role="region"] table { min-width: 34rem; }
.prose .table-scroll tr:last-child td,
.prose [role="region"] tr:last-child td { border-bottom: 0; }
/* Fallback when a table arrives unwrapped: keep it inside the column. */
.prose > table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.article-section + .article-section,
.cta-panel + .article-section {
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border);
}
.article-lead { margin-bottom: var(--s-7); }

/* CTA panel */
.cta-panel {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  margin-top: var(--s-8);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--canvas);
}
.cta-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.cta-panel__text { font-size: var(--text-md); color: var(--ink-soft); max-width: 36rem; }
.cta-panel__caveat,
.cta-panel__pending { font-size: var(--text-sm); color: var(--muted); max-width: 36rem; }
.cta-panel__pending .badge { margin-right: var(--s-2); }
/* Secondary links ("Request a demo", "Sign in", "9AT for fund administrators"), one per line, each with its own caveat. */
.cta-panel__links { display: grid; gap: 0; }
.cta-panel__secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); }
.cta-panel__note { font-size: var(--text-sm); color: var(--muted); }

/* Guide demonstration (2026-09-27; _GuideDemonstration): the guide's 9AT product view after its product-workflow
   section, in place of the CTA panel. One stacked column at every width: label and heading, the image (the full
   illustration from 48em; the focused crops, each labelled, below 48em, so a phone never gets an unreadable thumbnail:
   a crop wider than DemonstrationExcerpt.MaxShrinkWidth keeps its natural size and scrolls sideways in its labelled
   region, a narrower one shrinks to the column and keeps at least 85% of its size at 320 px), the caption with "View
   full-size image", the numbered steps, the walkthrough (registration guide), then the product button and the one
   access line. Images reserve their box from their width/height attributes (height: auto), so a lazy image arriving
   shifts nothing; a crop is never scaled up. */
.demo {
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--canvas);
  scroll-margin-top: var(--s-5);
}
.demo:focus { outline: none; }
.demo + .article-section {
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border);
}
.demo__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.demo__brand {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--accent-active);
}
.demo__title { margin-top: var(--s-2); font-size: var(--h2); letter-spacing: -0.018em; }
.demo__figure { margin-top: var(--s-5); }
.demo__wide img,
.demo__excerpt img {
  display: block;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.demo__wide img { width: 100%; }
/* A crop keeps its width attribute as its CSS width (so its box is reserved before it loads), narrowed to the column;
   a wide crop is never narrowed: its region scrolls instead (keyboard: focus it, then the arrow keys). */
.demo__excerpt img { max-width: 100%; margin-inline: auto; }
.demo__excerpt-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.demo__excerpt-scroll img { max-width: none; margin-inline: 0; }
/* The crop's label and site.js's "Scroll image →" hint share the line above the crop. */
.demo__excerpt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); }
.demo__excerpt > picture,
.demo__excerpt-scroll { flex: 0 0 100%; min-width: 0; }
.demo__scroll-hint {
  margin-bottom: var(--s-2);
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}
/* minmax(0, 1fr): a wide crop's scroll region must not widen the column. */
.demo__focus { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.demo__focus-caption { font-size: var(--text-md); line-height: 1.5; color: var(--ink-soft); }
.demo__excerpt-label { margin-bottom: var(--s-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
.demo__caption { margin-top: var(--s-3); font-size: var(--text-sm); line-height: 1.5; color: var(--muted); }
.demo__caption-text { display: block; }
.demo__full { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.demo__steps { counter-reset: demo-step; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.demo__steps li {
  counter-increment: demo-step;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
  font-weight: 600;
  line-height: 1.4;
}
.demo__steps li::before {
  content: counter(demo-step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-active);
  font-variant-numeric: tabular-nums;
}
.demo__actions { display: grid; gap: var(--s-3); justify-items: start; margin-top: var(--s-6); }
.demo__access { font-size: var(--text-md); color: var(--ink-soft); }
/* The "Request a demo" link inside the access line: a hit area at least 44px tall without changing the line box. */
.demo__demo-link { padding-block: 0.8125rem; font-weight: 600; }
.demo__more { display: grid; }
.demo__more li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); }
.demo-jump { margin-top: calc(-1 * var(--s-5)); margin-bottom: var(--s-7); }

/* The walkthrough: the poster is a link (a button once site.js runs) with the play label under it; the video that
   replaces it on play has the poster's size. The transcript is a native <details>. */
.demo-video { margin-top: var(--s-5); }
.demo-video__play {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.demo-video__poster { display: block; width: 100%; height: auto; }
.demo-video__label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--border);
  font-weight: 600;
  line-height: 1.3;
}
.demo-video__play:hover .demo-video__label { color: var(--accent-hover); text-decoration: underline; }
.demo-video__icon {
  flex: none;
  width: 0;
  height: 0;
  border-block: 0.45em solid transparent;
  border-left: 0.75em solid currentColor;
}
.demo-video__player { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--ink); }
.demo-video__note { margin-top: var(--s-3); font-size: var(--text-sm); line-height: 1.5; color: var(--muted); }
.demo-video__transcript { margin-top: var(--s-2); font-size: var(--text-md); }
/* A list item keeps the native disclosure triangle; the padding makes it a 44px target. */
.demo-video__transcript > summary {
  display: list-item;
  padding-block: 0.625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--accent);
  cursor: pointer;
}
.demo-video__transcript-body { display: grid; gap: var(--s-3); padding-bottom: var(--s-2); line-height: 1.55; color: var(--ink-soft); }
.demo-video__transcript-body > p:first-child { font-weight: 600; color: var(--ink); }
.demo-video__transcript-body ol { display: grid; gap: var(--s-2); padding-left: 1.4em; }

/* The full-size viewer (site.js): a native modal <dialog>, Escape or Close to leave. Open, it is a two-row grid no
   taller than the viewport: Close, then the frame, which takes the remaining height and is the only thing that scrolls,
   so Close never scrolls out of view (a touch screen has no Escape key). The frame is a named, keyboard-focusable
   region. On phones the image keeps its full size and scrolls inside the frame; from 48em it fits the frame in both
   dimensions, so a laptop screen shows the whole illustration without scrolling. */
.media-viewer {
  width: calc(100vw - 2 * var(--gutter));
  max-width: 1648px;
  max-height: calc(100vh - 2 * var(--gutter));
  padding: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
}
.media-viewer[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--s-3);
  justify-items: start;
}
.media-viewer::backdrop { background: rgb(20 38 56 / 0.72); }
.media-viewer__frame { justify-self: stretch; min-width: 0; min-height: 0; overflow: auto; }
.media-viewer__frame img { display: block; max-width: none; height: auto; }

@media (max-width: 47.99em) {
  .demo__wide { display: none; }
  /* The crops may use the panel's full width on phones; a narrower crop keeps its own size, centred. */
  .demo__focus { margin-inline: calc(-1 * var(--s-4)); }
  .demo__focus-caption,
  .demo__excerpt-label,
  .demo__scroll-hint { padding-inline: var(--s-4); }
}

@media (min-width: 48em) {
  .demo { padding: var(--s-6); }
  .demo__focus { display: none; }
  .media-viewer__frame img { width: auto; max-width: 100%; max-height: 100%; margin-inline: auto; }
}

/* Sources and related reading at the foot of an article */
.article-foot {
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--ink);
}
.article-foot + .article-foot { margin-top: var(--s-7); border-top-color: var(--border); }
.article-foot__title { font-size: var(--h3); letter-spacing: -0.01em; scroll-margin-top: var(--s-5); }
.article-foot__intro { margin-top: var(--s-2); font-size: var(--text-sm); color: var(--muted); }

.source-list { display: grid; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--text-md); counter-reset: src; }
.source-list li {
  counter-increment: src;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--s-2);
}
.source-list li::before { content: counter(src); color: var(--muted); font-variant-numeric: tabular-nums; }
.source-list a { overflow-wrap: anywhere; }

.related-list { margin-top: var(--s-3); border-top: 1px solid var(--border); }
.related-item {
  position: relative;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.related-item__link {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}
.related-item__link::after { content: ""; position: absolute; inset: 0; }
.related-item:hover .related-item__link { color: var(--accent); text-decoration: underline; }
.related-item__summary { margin-top: var(--s-1); font-size: var(--text-md); color: var(--muted); }
.related-item .badge { position: relative; margin-left: var(--s-2); }

/* ---------- 10a. Authors: byline block, "About the author", roster, author page ----------
   Portraits are square local files shown as circles (object-fit keeps any other crop round). Without one, an
   initials monogram stands in; it is aria-hidden because the name is always written next to it. Monogram ink
   #05443F on the accent tint #E8F1EF is 9.6:1. */
.avatar {
  --avatar: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  object-fit: cover;
  background: var(--wash);
}
.avatar--sm { --avatar: 40px; }
.avatar--md { --avatar: 64px; }
.avatar--lg { --avatar: 96px; }
.avatar--monogram {
  border: 1px solid var(--border-strong);
  background: var(--accent-tint);
  color: var(--accent-active);
  font-family: var(--font-sans);
  font-size: calc(var(--avatar) * 0.36);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  user-select: none;
}

.byline-block {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.byline-block .byline { min-width: 0; margin-top: 0; }
/* Plain text flow, not the .meta-line inline-flex item box, which would drop the space in "By {name}". */
.byline .byline__author { display: block; }
.byline__author a { font-weight: 600; }

.author-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.author-card__body { min-width: 0; }
.author-card__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}
.author-card__name a { color: var(--ink); }
.author-card__name a:hover { color: var(--accent); }
.author-card__focus { margin-top: var(--s-1); font-size: var(--text-md); color: var(--ink-soft); }
.author-card__links,
.author-row__links { margin-top: var(--s-2); font-size: var(--text-md); }

.author-list { border-top: 1px solid var(--border); }
.author-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s-4) var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.author-row__body { min-width: 0; }
.author-row__name {
  font-size: var(--h3);
  line-height: 1.25;
  letter-spacing: -0.012em;
  scroll-margin-top: var(--s-5);
}
.author-row__name a { color: var(--ink); text-decoration: none; }
.author-row__name a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }
.author-row__focus { margin-top: var(--s-2); max-width: 42rem; color: var(--ink-soft); }
.author-row__label {
  margin-top: var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.author-guides { display: grid; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--text-md); }
.author-guides .badge { margin-left: var(--s-2); }
.author-row__none,
.author-guides-section__none { margin-top: var(--s-3); font-size: var(--text-md); color: var(--muted); }

.author-head { display: grid; justify-items: start; gap: var(--s-4); }
.author-head__text { min-width: 0; }
.author-head .page-title { margin-top: var(--s-2); }
.author-head__bio { margin-top: var(--s-3); max-width: 40rem; color: var(--ink-soft); }
.author-head__links { margin-top: var(--s-3); }
.author-guides-section__title {
  margin-bottom: var(--s-4);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.author-back { margin-top: var(--s-5); }

@media (max-width: 39.99em) {
  .author-row .avatar--md { --avatar: 48px; }
  /* Standalone links keep a 44px touch target on phones. */
  .author-card__links a,
  .author-row__links a,
  .author-head__links a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (min-width: 40em) {
  .author-head { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-6); }
  .avatar--lg { --avatar: 112px; }
}

/* ---------- 11. Adviser profile ---------- */
.profile-top {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-5) var(--s-8);
}
.profile-kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
/* Legal names are mostly all capitals as filed, so the display tracking is looser than other headings' to keep
   capitals from crowding. */
.profile-name {
  margin-top: var(--s-3);
  max-width: 24em;
  font-size: clamp(1.875rem, 1.45rem + 1.9vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}
.profile-name--long {
  max-width: 32em;
  font-size: clamp(1.5rem, 1.28rem + 1.05vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: 0;
}
.profile-name-note {
  margin-top: var(--s-2);
  max-width: 42rem;
  font-size: var(--text-sm);
  color: var(--muted);
}
.id-list { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-5); }
.id-list > div { display: flex; flex-direction: column; min-width: 0; }
.id-list dt { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.id-list dd {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.id-list__none { margin-top: var(--s-4); font-size: var(--text-md); }
.profile-desc {
  margin-top: var(--s-5);
  max-width: 42rem;
  font-size: var(--text-lede);
  line-height: 1.55;
  color: var(--ink-soft);
}
/* The factual summary: body size (not lede), so the first screen still reaches the facts on a phone. */
.profile-summary {
  margin-top: var(--s-4);
  max-width: 42rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.profile-desc + .profile-summary { margin-top: var(--s-3); }
.profile-head .source-line { margin-top: var(--s-5); }
@media (max-width: 39.99em) {
  /* On a phone the header's source note moves out of the first screen: "Sources and definitions" repeats it. */
  .profile-head .source-line__note { display: none; }
  .profile-head .source-line { margin-top: var(--s-4); }
}

.profile-action {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--surface);
}
.profile-action__note { font-size: var(--text-sm); color: var(--muted); }
.profile-action__note strong { color: var(--ink-soft); }
.profile-action > .badge { justify-self: start; }
/* Next to a CTA the "Checked without an account on …" review label reads as a caption, not as a pill between the
   kicker and the button; "Not yet checked live" keeps its pill. */
.profile-action .badge--checked,
.handoff .badge--checked {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
}
.copy-name {
  display: block;
  margin-top: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--canvas);
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

@media (min-width: 40em) and (max-width: 63.99em) {
  /* One column: the panel keeps a button's width instead of stretching the label away from its ↗. */
  .profile-action { max-width: 28rem; }
}

@media (min-width: 64em) {
  .profile-top {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--s-9);
    align-items: start;
    padding-block: var(--s-6) var(--s-9);
  }
  .profile-action { margin-top: var(--s-7); }
}

.profile-body { padding-block: var(--s-7) var(--s-9); }

/* Fact list */
.facts { border-top: 1px solid var(--border); }
.fact {
  display: grid;
  gap: var(--s-1) var(--s-5);
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--border);
}
.fact dt { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
.fact dd { min-width: 0; }
.fact__note { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--muted); }
.fact__note--caution { color: var(--dated-ink); font-weight: 600; }
/* A profile section's list ends without its own rule: the next section's top rule closes it (no double hairline). */
.profile-body .split__body > .facts > .fact:last-child,
.profile-body .split__body > .related-list > .related-item:last-child { border-bottom: 0; }
.fact .source-line { margin-top: var(--s-2); }
.fact__value { font-weight: 600; }
.metric-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.metric-asof { display: block; font-size: var(--text-sm); color: var(--ink-soft); }

@media (min-width: 40em) {
  .fact { grid-template-columns: 12rem minmax(0, 1fr); }
}

/* Funds and provider table */
.funds-note { max-width: 42rem; margin-bottom: var(--s-5); color: var(--ink-soft); }
.funds-note--none { margin-bottom: var(--s-4); }

/* Funds handoff: when no funds are published here, the section says so and hands the task to 9AT in a panel styled
   like the other CTA panels (accent top rule), so it reads as the intended next step rather than an empty state. The
   button carries the registry label, the caveat says what needs an account, and "Request a demo" sits beside it. */
.handoff {
  display: grid;
  gap: var(--s-3);
  max-width: 42rem;
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--canvas);
}
.handoff__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.handoff__caveat { font-size: var(--text-sm); color: var(--muted); max-width: 36rem; }
.handoff__check { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.funds-guide { max-width: 42rem; margin-top: var(--s-4); font-size: var(--text-md); color: var(--ink-soft); }

/* Decision-maker contacts: the question in the reader's words, the business-contact count (or why there is none), the
   locked preview and the access it needs, then the same handoff panel as the funds section. Long legal names wrap
   inside the question. */
.contacts__question {
  max-width: 42rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.contacts__text { max-width: 42rem; margin-top: var(--s-2); color: var(--ink-soft); }
/* Keeps "Decision-maker" whole in the narrow heading column instead of breaking at its hyphen. */
.contacts__term { white-space: nowrap; }
.contacts .handoff { margin-top: var(--s-4); }
.contacts__label { margin-top: var(--s-2); }
.contacts__count { max-width: 42rem; margin-top: var(--s-3); font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.contacts__coverage { max-width: 42rem; margin-top: var(--s-1); font-size: var(--text-sm); color: var(--muted); }
/* Locked preview (brief §4): no contact value is ever in the page, so there is nothing to blur. Each mask is an empty
   neutral box whose width is set here by column and row position only, the same for every adviser; a fixed table
   layout lets the boxes shrink with the column at 320px instead of overflowing. */
.contacts-preview {
  width: 100%;
  max-width: 34rem;
  margin-top: var(--s-4);
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-md);
}
.contacts-preview th {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--border-strong);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted);
}
.contacts-preview td {
  height: 2.75rem;
  padding: 0 var(--s-3) 0 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.contact-mask {
  display: block;
  max-width: 100%;
  height: 0.75rem;
  border-radius: 999px;
  /* 3.3:1 on --surface, so a locked value reads as present next to the dash of a missing one (WCAG 1.4.11). */
  background: #848F97;
}
.contact-mask--name { width: 8.5rem; }
.contact-mask--role { width: 6.5rem; }
.contact-mask--email { width: 9.5rem; }
.contacts-preview tbody tr:nth-child(2) .contact-mask--name { width: 7rem; }
.contacts-preview tbody tr:nth-child(2) .contact-mask--role { width: 8rem; }
.contacts-preview tbody tr:nth-child(2) .contact-mask--email { width: 8rem; }
.contacts-preview tbody tr:nth-child(3) .contact-mask--name { width: 9.5rem; }
.contacts-preview tbody tr:nth-child(3) .contact-mask--role { width: 5.5rem; }
.contacts-preview tbody tr:nth-child(3) .contact-mask--email { width: 10.5rem; }
.contact-none { color: var(--muted); }
.contacts-preview__more { margin-top: var(--s-2); font-size: var(--text-md); font-weight: 600; color: var(--ink-soft); }
/* Under a partial preview: its rows are the best covered, so they are no typical sample of the rest. */
.contacts-preview__order { max-width: 34rem; margin-top: var(--s-1); font-size: var(--text-sm); color: var(--muted); }
.fund + .fund { margin-top: var(--s-7); }
.fund__name { font-size: 1.1875rem; line-height: 1.3; overflow-wrap: anywhere; }
.fund__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-1);
  font-size: var(--text-sm);
  color: var(--muted);
}
.fund__meta .num { white-space: nowrap; }
.fund .source-line { margin-top: var(--s-2); }

.ptable {
  width: 100%;
  margin-top: var(--s-3);
  border-collapse: collapse;
  font-size: var(--text-md);
  line-height: 1.45;
}
.ptable th {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--border-strong);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted);
}
.ptable td {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.ptable__provider { font-weight: 600; overflow-wrap: anywhere; }
.ptable time { white-space: nowrap; }
.ptable__note { display: block; margin-top: 2px; font-size: var(--text-sm); font-style: italic; color: var(--muted); }
.ptable__foot { margin-top: var(--s-2); font-size: var(--text-sm); font-style: italic; color: var(--muted); }
.ptable__foot-label { font-style: normal; font-weight: 600; color: var(--ink-soft); }

@media (max-width: 47.99em) {
  .ptable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ptable,
  .ptable tbody,
  .ptable tr,
  .ptable td { display: block; width: 100%; }
  .ptable tr { padding-block: var(--s-3); border-bottom: 1px solid var(--border); }
  .ptable td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--s-3);
    padding: 2px 0;
    border: 0;
  }
  .ptable td::before {
    content: attr(data-label);
    padding-top: 2px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.empty-note p + p { margin-top: var(--s-2); }
.empty-note {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--canvas);
  font-size: var(--text-md);
  color: var(--ink-soft);
}

.research-links { border-top: 1px solid var(--border); margin-top: var(--s-3); }

.definitions { display: grid; gap: var(--s-3); margin-top: var(--s-5); font-size: var(--text-md); }
.definitions dt { font-weight: 600; }
.definitions dd { color: var(--ink-soft); }
/* Sources: each source named once, with its note; the dates stay on the source lines beside the facts. */
.sources { display: grid; gap: var(--s-3); font-size: var(--text-md); }
.sources dt { font-weight: 600; }
.sources dd { color: var(--ink-soft); }
.sources a { overflow-wrap: anywhere; }
.sources__note { display: block; margin-top: 2px; font-size: var(--text-sm); font-style: italic; color: var(--muted); }
.correction { margin-top: var(--s-5); font-size: var(--text-md); color: var(--ink-soft); }
.correction__aside { white-space: nowrap; }

/* Source/date line */
.source-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
}
.source-line__item { display: inline-flex; flex-wrap: wrap; gap: 0 0.375rem; min-width: 0; }
.source-line__label { font-weight: 600; color: var(--ink-soft); }
.source-line a { overflow-wrap: anywhere; }
.source-line__note { flex-basis: 100%; font-style: italic; }

/* Touch targets on narrow screens (≥ 44px) for list-style links that are not inline in running text. The correction
   line's links sit inside a sentence (the WCAG 2.5.8 inline exception), so they stay inline: an inline-block there
   would split "(" from "what to include)" and push its focus ring over the line above. */
@media (max-width: 47.99em) {
  .toc__list a { padding-block: 0.75rem; }
  .source-list a,
  .source-line a,
  .fact a,
  .ptable a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
  .task-panel__more a { display: inline-block; padding-block: 0.75rem; margin-block: -0.625rem; }
}

/* ---------- 12. Error pages ---------- */
.error-page { padding-block: var(--s-7) var(--s-10); }
.error-page__retry {
  margin-top: var(--s-4);
  max-width: 40rem;
  padding: var(--s-3) var(--s-4);
  border-left: 4px solid var(--stale-rule);
  background: var(--stale-bg);
  font-size: var(--text-md);
}
.error-page__next { margin-top: var(--s-8); max-width: 44rem; }
.next-links { margin-top: var(--s-3); border-top: 1px solid var(--border); }
.next-links li { padding-block: var(--s-3); border-bottom: 1px solid var(--border); }
.next-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.0625rem;
  font-weight: 600;
}
.next-links p { font-size: var(--text-md); color: var(--muted); }

/* ---------- 13. Footer ---------- */
.site-footer {
  margin-top: auto;
  padding-block: var(--s-7) var(--s-8);
  border-top: 1px solid var(--border);
  background: var(--canvas);
  font-size: var(--text-sm);
  color: var(--muted);
}
.site-footer__inner { display: grid; gap: var(--s-6) var(--s-8); }
.site-footer__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.site-footer__tag { margin-top: 2px; max-width: 26rem; }
/* Link groups (#footer-nav, the "Menu" fallback target): one column on phones, two from 30em, four from 64em. Each
   group is an h2 with a plain list, one link per line; long adviser names wrap anywhere instead of widening the page. */
.footer-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5) var(--s-6);
}
.footer-group { min-width: 0; }
.footer-group__title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.footer-group__list { margin-top: var(--s-2); }
/* A Draft or Synthetic example label follows its link on the same line, or starts the next line flush left. */
.footer-group__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-2);
  overflow-wrap: anywhere;
}
.footer-group__list a {
  display: inline-block;
  padding-block: 0.75rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
}
.footer-group__list a:hover { color: var(--accent); text-decoration: underline; }
.footer-group__note { flex-basis: 100%; margin-top: -0.375rem; padding-bottom: var(--s-2); font-size: var(--text-xs); }
@media (min-width: 30em) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) {
  .footer-group__list a { padding-block: 0.3125rem; }
  .footer-group__note { margin-top: 0; }
}
@media (min-width: 64em) {
  .footer-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-inline: calc(-1 * var(--s-2));
}
.footer-links li { display: inline-flex; align-items: center; }
.footer-links li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
}
@media (max-width: 63.99em) {
  /* The list wraps on narrow screens, so a separator dot could start a line: use spacing instead (as .meta-line). */
  .footer-links { column-gap: var(--s-2); }
  .footer-links li + li::before { display: none; }
}
.footer-links a,
.footer-links button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-2);
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.footer-links a:hover,
.footer-links button:hover { color: var(--accent); text-decoration: underline; }
/* Bottom row: the policy links and Analytics choices, then the research-only note. */
.site-footer__bottom {
  display: grid;
  gap: var(--s-2) var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.site-footer__note p { max-width: 52rem; }
.site-footer__note p + p { margin-top: var(--s-1); }

@media (min-width: 64em) {
  .site-footer__bottom { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .site-footer__bottom .footer-links { grid-column: 2; grid-row: 1; justify-content: flex-end; }
}

/* ---------- 14. Consent banner ---------- */
/* Sticky, not fixed: the banner is the last child of the flex-column <body>, so it stays at the bottom of the viewport
   while reading but ends up after the footer instead of covering its links. While it is shown, focused elements are
   scrolled clear of it (WCAG 2.2 SC 2.4.11). */
html:has(.consent:not([hidden])) { scroll-padding-bottom: 14rem; }
.consent {
  position: sticky;
  bottom: 0;
  z-index: 50;
  border-top: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 -4px 16px rgba(20, 38, 56, 0.08);
}
.consent__inner { display: grid; gap: var(--s-3) var(--s-6); padding-block: var(--s-4); }
.consent__title { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; }
.consent__text p { margin-top: var(--s-1); max-width: 44rem; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.consent__actions .button { min-width: 7.5rem; }

@media (min-width: 48em) {
  .consent__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* ---------- 15. Motion, forced colours, print ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .button,
  .nav-toggle { border: 1px solid ButtonText; }
  .notice,
  .answer,
  .cta-panel,
  .demo,
  .demo-video__play,
  .media-viewer,
  .profile-action,
  .handoff,
  .task-panel { border: 1px solid CanvasText; }
  /* The step numbers and the play triangle are backgrounds and borders; keep them visible. */
  .demo__steps li::before { border: 1px solid CanvasText; }
  .demo-video__icon { forced-color-adjust: none; border-left-color: ButtonText; }
  .badge,
  .avatar--monogram { border-color: CanvasText; }
  /* The contact masks are backgrounds; keep them visible as outlined boxes. */
  .contact-mask { border: 1px solid CanvasText; }
  /* The current page keeps a visible frame when the tint is painted away. */
  .pager__list a { border-color: Canvas; }
  .pager__list a[aria-current="page"] { border: 2px solid CanvasText; }
  /* The menu bars are backgrounds, which forced colours would paint away; keep them (and the open/closed cue). */
  .nav-toggle__icon,
  .nav-toggle__icon::before,
  .nav-toggle__icon::after { forced-color-adjust: none; background: ButtonText; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
}

@media print {
  :root { --canvas: #fff; --surface: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
  .skip-link,
  .nav-toggle,
  .site-nav,
  .consent,
  .article-rail,
  .cta-panel,
  .demo-jump,
  .demo__full,
  .demo__actions,
  .demo-video__play,
  .demo__scroll-hint,
  .profile-action,
  .handoff,
  .action__cta,
  .pager,
  .hero__actions,
  .task-panel,
  .footer-nav,
  .footer-links,
  .feature__more { display: none !important; }
  /* Paper cannot scroll: a wide crop fits the page width there. */
  .demo__excerpt-scroll { overflow: visible; }
  .demo__excerpt-scroll img { max-width: 100%; }
  .band,
  .band--surface { padding-block: 12pt; border: 0; background: #fff; }
  .hero,
  .page-head,
  .article-head,
  .profile-top { padding-block: 12pt; }
  .hero__grid,
  .feature,
  .action,
  .article-layout,
  .profile-top,
  .split { display: block; }
  .article-main { max-width: none; }
  a { color: #000; }
  .prose a[href^="http"]::after,
  .source-list a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    overflow-wrap: anywhere;
  }
  h1, h2, h3 { break-after: avoid; }
  tr, .fact, .adviser-row, .guide-row, .notice, .answer, .author-card, .author-row { break-inside: avoid; }
  .author-card__links a::after,
  .author-row__links a::after,
  .author-head__links a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    overflow-wrap: anywhere;
  }
  .avatar--monogram { border: 1pt solid #000; background: #fff; color: #000; }
  .notice { border: 1pt solid #000; }
  .adviser-row__name::after,
  .guide-row__title a::after,
  .related-item__link::after { display: none; }
}