/* ═══════════════════════════════════════════════════════════════════════════
   CO-OPERATE — APPLE HIG DESIGN SYSTEM
   Shared token layer + primitives for every joincooperate.com surface.

   Source of truth: DriveX `design/APPLE-HIG-STANDARD.md` (CEO ruling
   2026-08-04, ADR 0009/0010). That standard scopes itself to DriveX's
   AUTHENTICATED surfaces and explicitly leaves `(public)` marketing on the
   Grothouse radiance system.

   THIS FILE DELIBERATELY EXTENDS IT TO PUBLIC MARKETING, per CEO direction
   2026-08-07: consumers should read Co-Operate as "the Apple of Mortgage" —
   one navigation model, one flow, one feel, across every domain and
   subdomain. Recorded in docs/adr/0001-apple-hig-public-surfaces.md.

   Divergences from the DriveX standard, each deliberate and marked [MKT]:
     [MKT-1] A hero type step above 34px. Apple's own marketing pages run
             48-80px headlines; the 34px page-title cap is a dense-B2B
             choice that would make a landing hero read as a form label.
     [MKT-2] Section rhythm tokens at 64/96px. Still 8pt multiples; marketing
             blocks need more air than a dashboard section.
   Everything else — one family, five sizes, two radii plus pills, 8pt grid,
   150/250/350 motion, sentence case, document scroll — is held exactly.

   BANNED HERE, as in the standard: Source Serif, JetBrains Mono, uppercase
   text-transform, letter-spacing above 0.1em, radiance primitives
   (.g-aurora-mesh/.g-orb/.g-noise/.g-grid-tex/.g-text-glow/.g-divider-glow),
   raw hex in markup, and any fixed html/body shell.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* 1.1 Type — one family. §1.2 */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Segoe UI", system-ui, sans-serif;

  /* Five sizes. [MKT-1] adds --text-hero above them for marketing heroes only. */
  --text-hero: clamp(40px, 6vw, 72px);
  --text-hero-lh: 1.06;
  --text-display: 34px;
  --text-display-lh: 1.15;
  --text-title-1: 28px;
  --text-title-1-lh: 1.2;
  --text-title-2: 22px;
  --text-title-2-lh: 1.27;
  --text-body: 17px;
  --text-body-lh: 1.47;
  --text-caption: 13px;
  --text-caption-lh: 1.38;
  --text-fine: 12px;   /* fine print only — legal, footnotes, timestamps */

  /* 1.2 Spacing — 8pt grid. §1.1 (+ [MKT-2] section steps) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;   /* [MKT-2] */
  --space-24: 96px;   /* [MKT-2] */

  /* 1.3 Radius — two values plus pills. §1.4 / D19 */
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-pill: 9999px;

  /* 1.4 Motion — 250ms ease-out default. §1.5 / D11 */
  --motion-fast: 150ms;
  --motion-standard: 250ms;
  --motion-emphasis: 350ms;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);

  /* 1.5 Layout containers. §1.6 */
  --container-max: 1200px;
  --gutter: var(--space-4);
  --measure: 65ch;

  /* 1.6 Colour — semantic only. §1.3
     Ported from DriveX globals.css. Electric Blue survives as the single
     accent and is consumed as --color-primary, never as a hex literal.

     DARK IS THE DEFAULT (CEO direction 2026-08-07). The DriveX standard is
     light-first because apple.com is; the Co-Operate web estate is not, and a
     visitor who has expressed no preference gets dark. Light is available on
     every surface via the toggle and is what `[data-theme="light"]` selects.

     Note this deliberately ignores `prefers-color-scheme`. Honouring it would
     mean a visitor on a light-mode machine never sees the intended default,
     which is the opposite of the instruction. An explicit choice always wins
     over both. */
  --color-background: oklch(0.15 0.018 258);
  --color-foreground: oklch(0.93 0.007 265);
  --color-card: oklch(0.17 0.022 258);
  --color-card-foreground: oklch(0.93 0.007 265);
  --color-muted: oklch(0.23 0.022 258);
  --color-muted-foreground: oklch(0.64 0.015 260);
  --color-border: oklch(0.24 0.035 264);
  --color-primary: oklch(0.63 0.21 264);
  --color-primary-foreground: oklch(0.98 0 0);
  --color-success: oklch(0.765 0.177 163.223);
  --color-warning: oklch(0.828 0.189 84.429);
  --color-destructive: oklch(0.65 0.20 25);

  /* Materials — depth comes from translucency + blur, not from glow. §4.0.1 */
  --material-chrome: color-mix(in oklab, var(--color-background) 80%, transparent);
  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.30), 0 8px 24px oklch(0 0 0 / 0.36);
  --shadow-lift: 0 2px 6px oklch(0 0 0 / 0.36), 0 16px 40px oklch(0 0 0 / 0.48);

  color-scheme: dark light;
}

/* Light — an explicit choice, never inferred. */
:root[data-theme="light"] {
  --color-background: oklch(0.97 0.006 260);
  --color-foreground: oklch(0.17 0.015 260);
  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(0.17 0.015 260);
  --color-muted: oklch(0.96 0.006 260);
  --color-muted-foreground: oklch(0.52 0.012 260);
  --color-border: oklch(0.90 0.012 264);
  --color-primary: oklch(0.49 0.24 264);
  --color-primary-foreground: oklch(0.98 0 0);
  --color-success: oklch(0.508 0.118 165.612);
  --color-warning: oklch(0.52 0.163 49);
  --color-destructive: oklch(0.55 0.22 27);
  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.04), 0 8px 24px oklch(0 0 0 / 0.06);
  --shadow-lift: 0 2px 6px oklch(0 0 0 / 0.06), 0 16px 40px oklch(0 0 0 / 0.10);
  color-scheme: light;
}

/* Explicit dark restates the base so the toggle wins in both directions. */
:root[data-theme="dark"] {
  --color-background: oklch(0.15 0.018 258);
  --color-foreground: oklch(0.93 0.007 265);
  --color-card: oklch(0.17 0.022 258);
  --color-card-foreground: oklch(0.93 0.007 265);
  --color-muted: oklch(0.23 0.022 258);
  --color-muted-foreground: oklch(0.64 0.015 260);
  --color-border: oklch(0.24 0.035 264);
  --color-primary: oklch(0.63 0.21 264);
  --color-success: oklch(0.765 0.177 163.223);
  --color-warning: oklch(0.828 0.189 84.429);
  --color-destructive: oklch(0.65 0.20 25);
  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.30), 0 8px 24px oklch(0 0 0 / 0.36);
  --shadow-lift: 0 2px 6px oklch(0 0 0 / 0.36), 0 16px 40px oklch(0 0 0 / 0.48);
  color-scheme: dark;
}

/* ─────────────────────────────────────────────────────────────────────────
   1b. LEGACY TOKEN COMPATIBILITY

   The marketing pages carry hundreds of inline `style="color:var(--g-fg-stone)"`
   style references to the Grothouse token names. Rewriting every one by hand
   during the conversion is where mistakes get made, so instead each legacy name
   is aliased onto its HIG equivalent. An inline style that used to read as
   radiance now resolves to a semantic HIG token.

   This block is TRANSITIONAL. As each page's inline styles are removed in
   favour of the `.a-*` classes, the aliases stop being referenced; delete the
   block once `grep -r "var(--g-" site/` comes back empty.

   Note the three deliberate collapses: both display and body map to the single
   system family, and the mono token does too — §1.2 retires the serif and the
   industrial mono outright, so an inline `font-family:var(--g-f-mono)` must
   NOT keep rendering as monospace.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --g-f-display: var(--font-system);
  --g-f-body: var(--font-system);
  --g-f-mono: var(--font-system);

  --g-fg: var(--color-foreground);
  --g-fg-strong: var(--color-foreground);
  --g-fg-stone: var(--color-muted-foreground);
  --g-fg-muted: var(--color-muted-foreground);

  --g-bg: var(--color-background);
  --g-bg-deep: var(--color-background);
  --g-card: var(--color-card);
  --g-card-mid: var(--color-muted);
  --g-hover-bg: var(--color-muted);

  --g-accent: var(--color-primary);
  --g-accent-hot: var(--color-primary);
  --g-accent-soft: color-mix(in oklab, var(--color-primary) 10%, transparent);

  --g-border: var(--color-border);
  --g-border-strong: var(--color-border);

  --g-radii: var(--radius-control);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. RESET + DOCUMENT SCROLL

   §2.1 / D17: the DOCUMENT scrolls. html/body stay static and visible so
   mobile Safari collapses its URL bar and keeps the native back/share/tabs
   bar reachable. Never pin html/body, and never set touch-action or
   overscroll-behavior at the document level.
   ───────────────────────────────────────────────────────────────────────── */

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

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

body {
  font-family: var(--font-system);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  color: var(--color-foreground);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No position/overflow/touch-action here — see §2.1. */
}

/* §2.2 / D4 — native scrollbars on fine pointers, hidden on touch. */
@media (pointer: coarse) {
  html, html * { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, html *::-webkit-scrollbar { display: none; }
}

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

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

/* The UA rule for [hidden] is `display: none`, which ANY class setting display
   silently beats — .a-link is inline-flex, so a hidden link stayed visible.
   Restore the intent so `hidden` means hidden regardless of what else applies. */
[hidden] { display: none !important; }

::selection {
  background: color-mix(in oklab, var(--color-primary) 24%, transparent);
}

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

/* ─────────────────────────────────────────────────────────────────────────
   3. LAYOUT
   ───────────────────────────────────────────────────────────────────────── */

.a-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px)  { :root { --gutter: var(--space-6); } }

/* Anchored sections must clear the sticky header, or clicking a nav link lands
   with the heading hidden underneath it. 56px of chrome plus a little air. */
:target,
[id]:where(section, main > section) { scroll-margin-top: calc(56px + var(--space-6)); }

.a-section        { padding-block: var(--space-16); }
.a-section-tight  { padding-block: var(--space-12); }
.a-section-alt    { background: var(--color-muted); }

@media (min-width: 768px) {
  .a-section       { padding-block: var(--space-24); }
  .a-section-tight { padding-block: var(--space-16); }
}

.a-stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.a-stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
.a-stack-8 { display: flex; flex-direction: column; gap: var(--space-8); }

.a-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .a-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .a-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .a-grid   { gap: var(--space-6); }
}

/* §1.7 — every flex/grid child holding text carries min-w-0 by default.
   This is the single most common cause of content escaping its box. */
.a-grid > *, .a-stack > *, .a-stack-6 > *, .a-stack-8 > * { min-width: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   4. TYPOGRAPHY

   Sentence case only. Measured on apple.com 2026-08-05: ZERO
   uppercase-transformed elements and ZERO elements tracked above 0.1em
   across four page/viewport combinations. §1.2 / D20.
   ───────────────────────────────────────────────────────────────────────── */

.a-hero-title {
  font-size: var(--text-hero);
  line-height: var(--text-hero-lh);
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.a-display {
  font-size: var(--text-display);
  line-height: var(--text-display-lh);
  font-weight: 700;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.a-title-1 {
  font-size: var(--text-title-1);
  line-height: var(--text-title-1-lh);
  font-weight: 700;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

.a-title-2 {
  font-size: var(--text-title-2);
  line-height: var(--text-title-2-lh);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.a-body        { font-size: var(--text-body); line-height: var(--text-body-lh); }
.a-body-strong { font-size: var(--text-body); line-height: var(--text-body-lh); font-weight: 600; }
.a-caption     { font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-muted-foreground); }
.a-fine        { font-size: var(--text-fine); line-height: 1.5; color: var(--color-muted-foreground); }

/* Apple leans on 600 far more than 400 — semibold is the default for labels
   and titles, not an emphasis. §1.2 measurement note. */
.a-label { font-size: var(--text-caption); font-weight: 600; color: var(--color-muted-foreground); }

/* The legacy section label was three spans — number, rule, text — that read as
   "01The Three Pillars" once the old layout rules went. Keep the composition,
   drop the industrial styling. */
.a-label:has(> .num) { display: flex; align-items: center; gap: var(--space-3); }
/* pitch-app emits the same composition under its own class name. */
.g-section-label { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-caption); font-weight: 600; color: var(--color-muted-foreground); }
.g-section-label > .num  { color: var(--color-primary); }
.g-section-label > .line { flex: 0 0 24px; height: 1px; background: var(--color-border); }
.a-label > .num  { color: var(--color-primary); }
.a-label > .line { flex: 0 0 24px; height: 1px; background: var(--color-border); }

/* `.accent` carried the brand colour on inline <em>. Apple ships no italic
   display type, so the emphasis becomes colour + weight, not slant. */
.accent { color: var(--color-primary); }
em.accent, .a-hero-title em, .a-display em, .a-title-1 em, .a-title-2 em {
  font-style: normal;
  font-weight: inherit;
}

.a-lede {
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.42;
  color: var(--color-muted-foreground);
  max-width: var(--measure);
}

.a-prose { max-width: var(--measure); }
.a-dim   { color: var(--color-muted-foreground); }
.a-accent{ color: var(--color-primary); }

/* Numeric alignment — every figure that sits in a column. §5.6 */
.a-num { font-variant-numeric: tabular-nums; }

/* Machine identifiers — the ONE surviving monospace use. §1.2 */
.a-id {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

/* §1.2 containment helpers — never hand-roll white-space: nowrap. */
.a-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-wrap     { overflow-wrap: anywhere; word-break: normal; }

/* ─────────────────────────────────────────────────────────────────────────
   5. CONTROLS

   D19: Apple's buttons are pills. 980px radius is the single most common
   radius on apple.com's home page. Inputs and selects stay at 12px.
   ───────────────────────────────────────────────────────────────────────── */

.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}

.a-btn:active { transform: scale(0.97); }

/* §5.1 — ONE filled primary button per screen. */
.a-btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.a-btn-primary:hover {
  background: color-mix(in oklab, var(--color-primary) 88%, black);
}

.a-btn-secondary {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-foreground);
}
.a-btn-secondary:hover {
  background: var(--color-muted);
  border-color: color-mix(in oklab, var(--color-foreground) 24%, transparent);
}

.a-btn-ghost { background: transparent; color: var(--color-primary); padding-inline: var(--space-3); }
.a-btn-ghost:hover { background: color-mix(in oklab, var(--color-primary) 8%, transparent); }

/* Text link with the Apple chevron affordance. */
.a-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.a-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.a-link::after { content: "\203A"; transition: transform var(--motion-fast) var(--ease-out); }
.a-link:hover::after { transform: translateX(2px); }

/* §3 / D3 — 44px on coarse pointers and below 768px; 32px on fine pointers
   at 768px and up. Keyed to POINTER TYPE, not viewport width alone. */
@media (pointer: fine) and (min-width: 768px) {
  .a-btn { min-height: 32px; padding: var(--space-2) var(--space-4); }
}

/* Inputs render at 17px — this is what stops iOS Safari focus-zoom. D2/§5.3 */
.a-input, .a-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--color-foreground);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  transition: border-color var(--motion-fast) var(--ease-out);
}
.a-input:focus, .a-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
}

/* §5.3 — labels ABOVE inputs, 12px gap. No placeholder-as-label. */
.a-field { display: flex; flex-direction: column; gap: var(--space-3); }

/* Range input — used by every calculator. */
.a-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
}
.a-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}
.a-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border-radius: var(--radius-pill);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform var(--motion-fast) var(--ease-out);
}
.a-range::-webkit-slider-thumb:active { transform: scale(1.1); }
.a-range::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}
.a-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

/* ─────────────────────────────────────────────────────────────────────────
   6. SURFACES

   §4.0.1 — depth comes from MATERIALS (translucency + backdrop blur) and
   surface-tone steps, never from atmospheric glow. Hierarchy comes from
   grouping and background, not from outlining every element; a hairline is
   a last resort, not a default.
   ───────────────────────────────────────────────────────────────────────── */

.a-card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .a-card { padding: var(--space-8); } }

.a-card-lead { padding: var(--space-8); }
@media (min-width: 768px) { .a-card-lead { padding: var(--space-12); } }

.a-card-quiet {
  background: var(--color-muted);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}

.a-card-interactive { transition: transform var(--motion-standard) var(--ease-out),
                                  box-shadow var(--motion-standard) var(--ease-out); }
.a-card-interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.a-hairline { height: 1px; background: var(--color-border); border: 0; }

/* iOS grouped inset list — one rounded container per GROUP, separators
   inset to align with content. Replaces bordered-box-per-item. §4.0 */
.a-list {
  list-style: none;
  background: var(--color-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.a-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  min-height: 44px;
}
.a-list-row + .a-list-row { box-shadow: inset 0 1px 0 var(--color-border); }
.a-list-row > * { min-width: 0; }

.a-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);          /* icon <-> label; without it they collide */
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 600;
  background: var(--color-muted);
  color: var(--color-muted-foreground);
}
.a-badge-accent  { background: color-mix(in oklab, var(--color-primary) 12%, transparent);     color: var(--color-primary); }
.a-badge-success { background: color-mix(in oklab, var(--color-success) 14%, transparent);     color: var(--color-success); }
.a-badge-warning { background: color-mix(in oklab, var(--color-warning) 16%, transparent);     color: var(--color-warning); }

/* ─────────────────────────────────────────────────────────────────────────
   7. NAVIGATION

   Fixed chrome uses position: sticky on the ELEMENT — never by pinning the
   document. §2.1 / §2.3: max 64px, no scroll-hijacking, border appears at
   scrollTop > 0 and nothing more.
   ───────────────────────────────────────────────────────────────────────── */

.a-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  background: var(--material-chrome);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow var(--motion-standard) var(--ease-out);
  padding-top: env(safe-area-inset-top, 0px);
}
.a-nav[data-scrolled="true"] { box-shadow: inset 0 -1px 0 var(--color-border); }

.a-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 56px;
}

.a-nav-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: none;
  min-width: 0;
  /* "Co-Operate" was wrapping to "Co-" / "Operate" on narrow screens: the
     hyphen is a break opportunity and the flex item was allowed to shrink.
     A brand name never wraps. */
  white-space: nowrap;
  flex: 0 0 auto;
}
.a-nav-brand > span { white-space: nowrap; }

/* The brand mark.
   ------------------------------------------------------------------
   One rule for all four brand-link families — .a-nav-brand here, plus the
   legacy .g-nav-brand, .pl-brand and .chat-brand headers that predate the
   HIG conversion. They differ in colour and spacing but all need the mark
   sized and aligned the same way.

   `align-self: center` is load-bearing. Every one of those containers uses
   `align-items: baseline` so the wordmark and its "by G26x" byline sit on a
   shared baseline. An SVG has no baseline — the browser uses its bottom
   margin edge, which drops the mark below the text it should sit beside.

   The trailing ring is stroked with `currentColor`, so it inherits the nav's
   own text colour and stays legible when the visitor flips to light mode.
   The leading ring keeps the entity accent. */
.a-nav-mark {
  /* The mark is wider than it is tall — two rings on a square viewBox span
     56 of 64 across but only 40 down — so it reads smaller than its box.
     Sized against the wordmark it sits beside, not against the box. */
  width: 1.5em;
  height: 1.5em;
  align-self: center;
  flex: 0 0 auto;
}

/* Narrow screens STACK the lockup instead of dropping parts of it.
   ------------------------------------------------------------------
   Adding the mark cost the brand ~32px on navs that had no slack, and the
   first fix hid the byline at 768 and clipped the wordmark at 480 — leaving
   the mark alone on a phone. It fit, but it threw away the thing the lockup
   exists to say: Co-Operate is the company and G26x created it. A brand that
   only survives at desktop widths is not a brand.

   Stacking costs vertical space instead of horizontal — the wordmark sits
   over the byline, so the brand is as wide as its widest line (~90px) rather
   than the sum of both (~150px). All three names stay visible at 320px.

   Grid, not flex: the mark spans both rows while the wordmark and byline
   stack beside it, and the byline is a SIBLING of the wordmark rather than a
   child, so nothing simpler than an explicit two-row track will place it. */
@media (max-width: 700px) {
  .a-nav-brand {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: var(--space-2);
    row-gap: 0;
  }
  .a-nav-brand .a-nav-mark {
    grid-row: 1 / span 2;
    align-self: center;
  }
  .a-nav-brand > span:not(.a-caption),
  .a-nav-brand .a-caption {
    grid-column: 2;
    line-height: 1.15;
  }
  .a-nav-brand .a-caption {
    font-size: 11px;
    margin-top: -1px;
  }
}

/* The actions tighten before the brand gives anything up. A CTA can lose
   padding without losing meaning; a brand cannot lose its name. */
@media (max-width: 480px) {
  .a-nav-inner .nav-actions { gap: var(--space-2); }
  .a-nav-inner .nav-actions .a-btn { padding-inline: var(--space-3); }
}

/* One tier tighter at phone widths. The legacy deck is the worst case — it
   carries a theme toggle, a CTA and a menu button beside the brand — and
   still overflowed by 11px at 375 after the first trim. Padding and gaps
   give that back without touching a single word on screen. */
@media (max-width: 420px) {
  .a-nav-inner .nav-actions { gap: var(--space-1); }
  .a-nav-inner .nav-actions .a-btn { padding-inline: var(--space-2); }
  .a-nav-inner { padding-inline: var(--space-3); }
}

/* On a phone the CTA moves into the sheet that already lists it.
   ------------------------------------------------------------------
   This was 360px, chosen because 375 measured clean locally. It does not
   measure clean on the CI runner: `-apple-system … system-ui` resolves to
   Segoe UI here and a Liberation/DejaVu face there, which sets the nav
   measurably wider, and the legacy deck — brand + switch + CTA + menu —
   overflowed by 43px at 375.

   Setting the breakpoint at the width that just barely fits is the same
   mistake as the 768px link row. 480 leaves real margin instead: brand,
   switch and menu total ~221px of a 375px viewport, so no font stack can
   push it over.

   Nothing becomes unreachable — the sheet lists the CTA. `:has(.a-nav-toggle)`
   scopes this to pages that HAVE a sheet; build. and mortgage. carry a CTA and
   no menu, and hiding it there would strand the only action on the page. */
@media (max-width: 480px) {
  .a-nav-inner:has(.a-nav-toggle) .nav-actions .a-btn-primary { display: none; }
}

/* The funnel pages cannot use that escape — their CTA is the only action they
   have and there is no sheet to move it into. So it shrinks a step instead.
   At 320 `build.` had exactly zero slack, which is another way of saying it
   overflows on any font stack but this one. */
@media (max-width: 400px) {
  .a-nav-inner:not(:has(.a-nav-toggle)) .nav-actions .a-btn-primary {
    font-size: var(--text-caption);
    line-height: var(--text-caption-lh);
  }
}

.a-nav-links {
  display: none;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}
/* The desktop link row appears at 980px, not 768px.
   ------------------------------------------------------------------
   At 768 it fit only on the font stack the author happened to be running.
   `-apple-system, ... system-ui` resolves to Segoe UI on Windows and to a
   Liberation/DejaVu face on the Linux CI runner, which sets the same links
   measurably wider — so the nav had no real margin at 768, just a lucky one.
   Adding the brand mark spent what was left, and CI reported 67px of
   overflow on pages that measured 0 locally.

   Raising the breakpoint is the metric-independent fix: below 900px the
   links live in the sheet, which already exists and is already tested. 980
   rather than 900 because at 900 the pitch nav — seven links — had just 32px
   of slack left, which a wider font stack eats outright. A
   layout that depends on which machine renders it is not a layout. */
@media (min-width: 980px) { .a-nav-links { display: flex; } }

.a-nav-links a {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-muted-foreground);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}
.a-nav-links a:hover,
.a-nav-links a[aria-current="page"] { color: var(--color-foreground); }

/* Mobile: the menu button opens a sheet. No hover-dependent interaction
   anywhere — every reveal needs a tap equivalent. §5.4 */
.a-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--space-3) * -1);
  border: 0;
  background: transparent;
  color: var(--color-foreground);
  border-radius: var(--radius-control);
  cursor: pointer;
}
/* Must match the link-row breakpoint exactly. If the toggle hid before the
   links appeared there would be a band of widths with no navigation at all. */
@media (min-width: 980px) { .a-nav-toggle { display: none; } }

.a-nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-background);
  padding: var(--space-6) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;   /* contain belongs on INNER regions only */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.a-nav-sheet[hidden] { display: none; }
.a-nav-sheet a {
  padding: var(--space-4) var(--space-2);
  font-size: var(--text-title-2);
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: none;
  border-radius: var(--radius-control);
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   8. TABULAR DATA

   §4 / D14 — a table is not a layout, it is a task. Comparison tables are
   DESKTOP ONLY; below 768px the same data renders as a triage list.
   A comparison surface never scrolls horizontally and never hides a column.
   ───────────────────────────────────────────────────────────────────────── */

.a-table-wrap { display: none; }
@media (min-width: 768px) { .a-table-wrap { display: block; } }

.a-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;   /* §1.7 — declared widths, never min-w overflow */
}
.a-table th,
.a-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.a-table th {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-muted-foreground);
}
.a-table tbody tr { box-shadow: inset 0 1px 0 var(--color-border); }
.a-table .a-align-end { text-align: right; font-variant-numeric: tabular-nums; }

/* Triage list — the mobile renderer for the same column definition. */
.a-records { display: block; }
@media (min-width: 768px) { .a-records { display: none; } }

/* §5.5 — no blank regions. Empty/loading/error are required, not optional. */
.a-empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: var(--color-muted);
  border-radius: var(--radius-card);
}

/* ─────────────────────────────────────────────────────────────────────────
   9. CAROUSEL — sanctioned under §2.1a / D18, with rules.

   Permitted only for a PEER SET (comparable cards), with snap, a peeking
   next item, inline overscroll containment, and every item reachable
   elsewhere. A data table is never a carousel.
   ───────────────────────────────────────────────────────────────────────── */

.a-carousel {
  display: grid;
  grid-auto-flow: column;
  /* The next card PEEKS. The peek is the affordance — without it the row
     looks complete and nobody swipes. §2.1a
     78% was applied at EVERY width, so on a desktop a single card sat against
     the left edge with a fifth of the row empty beside it — the content read
     as off-centre on the page even though the carousel itself was correct.
     The peek is a phone affordance; wider viewports fit whole cards and the
     row fills its container. Overridden below. */
  grid-auto-columns: 78%;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  padding-bottom: var(--space-4);
  scrollbar-width: none;
}
.a-carousel::-webkit-scrollbar { display: none; }
.a-carousel > * { scroll-snap-align: start; min-width: 0; }

/* Two up at tablet, three at desktop. The fractions leave the same peek
   proportion at each step — 2.1 and 3.2 cards visible — so the affordance
   survives while the row stops leaving a hole on the right. */
@media (min-width: 700px)  { .a-carousel { grid-auto-columns: calc((100% - var(--space-4)) / 2.1); } }
@media (min-width: 1024px) { .a-carousel { grid-auto-columns: calc((100% - var(--space-4) * 2) / 3.2); } }

/* When every card fits, there is nothing to swipe and nothing to page. A row
   of dots under a static row is a control that does nothing. */
@media (min-width: 1024px) {
  .a-carousel:not([data-overflows='true']) + .a-carousel-dots { display: none; }
}
@media (min-width: 768px)  { .a-carousel { grid-auto-columns: 46%; } }
@media (min-width: 1024px) { .a-carousel { grid-auto-columns: 31%; } }

/* Above 1024px a three-up peer set fits without scrolling, so the carousel
   becomes a plain grid. Apple does the same: the iPhone page ships 5 scrollers
   on mobile and 3 on desktop — the ones that still do not fit. A carousel that
   does not need to scroll is just a row with a hidden scrollbar. */
@media (min-width: 1024px) {
  .a-carousel[data-fits="3"] {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* Paging dots — a fine pointer has no swipe, so §2.1a requires a control. */
.a-carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-1);   /* 44px targets + 4px = 48px pitch, no overlap */
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .a-carousel[data-fits="3"] + .a-carousel-dots { display: none; }
}
/* The button IS the 44px target; the visible dot is drawn inside it.
   This previously extended the hit area with a negative-margin pseudo-element,
   which made adjacent targets OVERLAP — each dot sat on top of its neighbour's
   click area, and Playwright's actionability check caught it as an
   intercepted pointer event. §3 requires a minimum 8px gap BETWEEN targets,
   which a negative margin cannot give you. Padding can. */
.a-carousel-dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.a-carousel-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  transition: background-color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.a-carousel-dot[aria-current="true"]::after {
  background: var(--color-primary);
  transform: scale(1.4);
}
.a-carousel-dot:hover::after { background: var(--color-muted-foreground); }
.a-carousel-dot[aria-current="true"]:hover::after { background: var(--color-primary); }

/* ─────────────────────────────────────────────────────────────────────────
   10. SHEETS AND FORMS

   `shared.js` injects the webinar and apply modals with the `g-modal*` /
   `g-form*` class names from the legacy stylesheet. Those names are kept and
   restyled here rather than renamed, because shared.js is loaded by every
   page — including the ones not yet converted, which still need the old
   styles.css rules. Renaming would mean editing shared.js and breaking them.

   A modal is CORRECT here: §5.2/D16 reserves sheets for tasks you complete and
   dismiss, and "register for the webinar" is exactly that. Contrast with the
   calculators, which are a place and therefore a route.
   ───────────────────────────────────────────────────────────────────────── */

.g-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: color-mix(in oklab, black 40%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.g-modal-overlay.open { display: flex; }

.g-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - var(--space-8));
  overflow-y: auto;
  overscroll-behavior: contain;   /* inner region — contain belongs here */
  padding: var(--space-8);
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
}

.g-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  color: var(--color-foreground);
  cursor: pointer;
}

.g-modal-title {
  font-size: var(--text-title-1);
  line-height: var(--text-title-1-lh);
  font-weight: 700;
  letter-spacing: -0.014em;
  padding-right: var(--space-12);
}
.g-modal-subtitle {
  margin-top: var(--space-2);
  color: var(--color-muted-foreground);
}

/* §5.3 — single column on mobile, always. */
.g-form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) {
  .g-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.g-form-row > * { min-width: 0; }

.g-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);       /* label -> input, §5.3 */
  margin-top: var(--space-4);
}

.g-form-label { font-size: var(--text-caption); font-weight: 600; }

/* 17px inputs — what actually prevents iOS focus-zoom. D2 */
.g-form-input,
.g-form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--color-foreground);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}
.g-form-textarea { min-height: 120px; resize: vertical; }
.g-form-input:focus,
.g-form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
}

.g-form-consent-wrap { margin-top: var(--space-6); }
.g-form-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--color-muted-foreground);
  cursor: pointer;
}
.g-form-consent input {
  width: 20px; height: 20px; flex: none;
  margin-top: 1px;
  accent-color: var(--color-primary);
}

.g-form-submit {
  width: 100%;                       /* full-width on mobile, §5.3 */
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
}
.g-form-submit:disabled { opacity: 0.5; cursor: default; }

.g-modal-success { text-align: center; padding-block: var(--space-8); }
.g-modal-success .check-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-success) 14%, transparent);
  color: var(--color-success);
}

/* ─────────────────────────────────────────────────────────────────────────
   11. UTILITIES
   ───────────────────────────────────────────────────────────────────────── */

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

.a-skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) * -4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-card);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-lift);
  transition: top var(--motion-fast) var(--ease-out);
}
.a-skip-link:focus { top: var(--space-4); }

.a-center { text-align: center; }
.a-center .a-lede { margin-inline: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   11b. LEGACY CHROME, RESTYLED

   honeybadger. is a distinct sub-brand with its own nav and its own roles
   pages; mortgage. has a bespoke footer. Replacing their chrome with the apex
   chrome would be wrong, so they keep their markup and it is restyled here to
   the same tokens. Same tactic as the `g-modal*` block: keep the class names,
   change what they mean.
   ───────────────────────────────────────────────────────────────────────── */

.g-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--material-chrome);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow var(--motion-standard) var(--ease-out);
}
.g-nav.scrolled { box-shadow: inset 0 -1px 0 var(--color-border); }

.g-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 56px;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.g-nav-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: none;
  min-width: 0;
}
.g-nav-brand .mark   { font-weight: 600; }
.g-nav-brand .parent { font-size: var(--text-caption); color: var(--color-muted-foreground); }

.g-nav-links {
  display: none;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}
@media (min-width: 768px) { .g-nav-links { display: flex; } }

.g-nav-links a,
.g-nav-dropdown-label {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-muted-foreground);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out);
}
.g-nav-links a:hover,
.g-nav-links a.active { color: var(--color-foreground); }
.g-nav-dropdown-disabled { font-size: var(--text-caption); color: var(--color-muted-foreground); }

.g-nav-right { display: flex; align-items: center; gap: var(--space-2); }

/* The legacy hamburger opens .g-nav-links as a stacked panel. */
.g-hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  width: 44px;
  height: 44px;
  padding: var(--space-3);
  border: 0;
  background: transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
}
.g-hamburger span {
  display: block;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-foreground);
}
@media (min-width: 768px) { .g-hamburger { display: none; } }

@media (max-width: 767px) {
  .g-nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    background: var(--color-card);
    box-shadow: var(--shadow-lift);
  }
  .g-nav-links.mobile-open a,
  .g-nav-links.mobile-open .g-nav-dropdown-label {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--text-body);
    color: var(--color-foreground);
  }
}

/* pitch-app emits .g-badge from TSX, which the HTML converter never touched.
   Unstyled it collapsed to an inline span with the icon floating loose beside
   centred text. Same tactic as .g-nav/.g-modal: keep the name, restyle it. */
.g-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 600;
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.g-footer,
.b-footer {
  padding-block: var(--space-16);
  background: var(--color-muted);
}
.g-footer > *,
.b-footer > * {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ─────────────────────────────────────────────────────────────────────────
   12. MARKETING PAGE PATTERNS

   Shared by the converted marketing surfaces. Kept here rather than inline so
   there is one place to change them and no `style=` attributes carrying raw
   px or hex into the markup (§1 — a raw value in a component is a violation).
   ───────────────────────────────────────────────────────────────────────── */

/* Nav actions cluster */
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-back { margin-left: auto; margin-right: var(--space-4); white-space: nowrap; }
@media (max-width: 480px) { .nav-back { margin-right: var(--space-2); font-size: var(--text-caption); } }
/* Theme switch
   ------------------------------------------------------------------
   Was a button with a ☀ / ☾ glyph swapped by JS. A glyph has to be read and
   decoded; a switch shows its state by position, which is the whole reason
   the control exists. Four different markups had grown across 22 pages —
   `.nav-theme`, `.theme-toggle`, and three with the same attribute twice —
   so this is one canonical control written by `tools/wire-theme-switch.mjs`.

   SIZING. Track 46x28, knob 24 — Apple's 51:31 proportion (1.645) at a scale
   that sits correctly beside 17px nav text rather than dominating it. The
   BUTTON is 44px tall regardless, so the tap target meets §5.1 while the
   visible switch stays 28. Same technique as the carousel dots: the control
   is the target, the drawing lives inside it.

   The knob sits LEFT for dark and slides RIGHT for light, matching the
   reading order of the two glyphs behind it. Dark is the default, so the
   resting state is the unslid one. */
.a-theme-switch {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0 var(--space-1);
  margin: 0;
  height: 44px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
  color: inherit;
}
.a-theme-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 46px;
  height: 28px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  box-shadow: inset 0 0 0 1px var(--color-border);
  transition:
    background var(--motion-standard) var(--ease-out),
    box-shadow var(--motion-standard) var(--ease-out);
}
.a-theme-switch:hover .a-theme-switch-track { box-shadow: inset 0 0 0 1px var(--color-primary); }
.a-theme-switch:focus-visible { outline: none; }
.a-theme-switch:focus-visible .a-theme-switch-track {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* The two glyphs sit UNDER the knob and never move. They label the ends of
   the travel; the knob covers whichever one is active. 9px because they are
   orientation, not content — at any larger size they compete with the knob. */
.a-theme-switch-track svg {
  width: 11px;
  height: 11px;
  flex: none;
  color: var(--color-muted-foreground);
  transition: color var(--motion-standard) var(--ease-out);
}

.a-theme-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  /* White in BOTH themes, not `--color-foreground`. That token inverts, so in
     light mode the knob came out near-black on the blue track — heavy, and
     unlike any switch on the platform. The knob reads against the track, and
     both track colours are dark or saturated enough to carry white. */
  background: var(--color-primary-foreground);
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.35);
  transition: transform var(--motion-standard) var(--ease-out);
}

/* Light is the "on" position. `aria-checked` is the single source of truth
   for both the semantics and the visual, so they cannot disagree. */
.a-theme-switch[aria-checked='true'] .a-theme-switch-knob { transform: translateX(18px); }
.a-theme-switch[aria-checked='true'] .a-theme-switch-track { background: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
  .a-theme-switch-knob,
  .a-theme-switch-track { transition: none; }
}

/* The placement and chat headers were a lone brand link with nothing to
   distribute. They have a switch now. */
.pl-header,
.chat-header { justify-content: space-between; }

.nav-cta { display: none; }
.nav-cta { display: none; }
@media (min-width: 768px) { .nav-cta { display: inline-flex; } }

.a-nav-sheet .sheet-close { align-self: flex-end; margin-bottom: var(--space-4); }

/* Hero */
.hero-title   { margin-top: var(--space-6); max-width: 18ch; }
.hero-lede    { margin-top: var(--space-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
  max-width: 560px;
}
.hero-stats > * { min-width: 0; }
.hero-stats dd { margin: 0; }

/* Section rhythm */
.section-title { margin-top: var(--space-3); max-width: 20ch; }
.section-lede  { margin-top: var(--space-4); }
.section-body  { margin-top: var(--space-12); }

/* Cards */
.card-title  { margin-top: var(--space-4); margin-bottom: var(--space-3); }
.card-head   { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.card-action { margin-top: var(--space-4); }
.card-dashed { box-shadow: none; outline: 1px dashed var(--color-border); outline-offset: -1px; }

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}
.icon-box-quiet {
  background: transparent;
  color: var(--color-muted-foreground);
  outline: 1px dashed var(--color-border);
  outline-offset: -1px;
}

/* Inline note row */
.note-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.note-row > * { min-width: 0; }
.note-icon { color: var(--color-primary); flex: none; }
.webinar-row { margin-top: var(--space-8); }
.webinar-row p { flex: 1 1 auto; }

/* Compound section */
.compound-grid { align-items: start; }
.earn-list { margin-top: var(--space-6); }
.earn-list .tick { color: var(--color-primary); flex: none; }
.structure-card   { display: flex; flex-direction: column; }
.structure-figure { margin-top: var(--space-3); }
.structure-rule   { margin-block: var(--space-6); }
.structure-rows   { display: flex; flex-direction: column; gap: var(--space-3); }
.structure-rows > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.structure-rows dd { margin: 0; }

/* Momentum */
.momentum-figure { margin-bottom: var(--space-2); }
.momentum-body   { margin-top: var(--space-4); }

/* CTA */
.cta-lede { margin-block: var(--space-4) var(--space-8); }

/* ── Long-form narrative page (legacy) ──────────────────────────────────── */

.hero-title-centred   { margin-inline: auto; }
.section-title-centred{ margin-inline: auto; }
.hero-actions-centred { justify-content: center; }
.hero-sub   { margin-top: var(--space-4); max-width: 60ch; margin-inline: auto; }
.hero-fine  { margin-top: var(--space-8); }

.a-center .a-label,
.a-center .section-lede { margin-inline: auto; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-row > * { min-width: 0; }
.stat-row dd { margin: 0; }
.stat-row-cards { margin-top: var(--space-8); }

/* Marker list — replaces the coloured-dot risk lists. */
.marker-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.marker-list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.marker-list li > * { min-width: 0; }
.marker {
  flex: none;
  width: 6px; height: 6px;
  margin-top: 9px;              /* optical centre against 17px/1.47 text */
  border-radius: var(--radius-pill);
  background: var(--color-muted-foreground);
}
.marker-warn { background: var(--color-warning); }
.marker-good { background: var(--color-success); }

.check-list { margin-top: var(--space-6); box-shadow: none; background: transparent; }
.check-list .a-list-row { align-items: flex-start; padding-inline: 0; }
.check-list .tick { flex: none; margin-top: 3px; color: var(--color-success); }

/* Emphasis statement closing a section — the "fact statement" under a carousel.
   CENTRED, with a deliberately narrow measure.
   
   Apple centres a short emphasis line and left-aligns anything paragraph-length,
   because centred text gets harder to read as line count grows: both edges go
   ragged and the eye loses the line start. Constraining the measure to ~46ch is
   what keeps these on the short side of that boundary — the centring only works
   because the block stays compact.
   
   They also rendered at lede size (22px), which put them in competition with
   the section headings they were meant to punctuate. Body size, and one step
   down again on the smallest screens where they were dominating the viewport. */
.pull-quote {
  margin-top: var(--space-8);
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
}
.pull-quote p + p { margin-top: var(--space-3); }

/* Whatever size the markup asked for, a pull quote is body copy. */
.pull-quote .a-lede {
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  max-width: none;
}
@media (max-width: 480px) {
  .pull-quote {
    max-width: 38ch;
    padding: var(--space-4);
  }
  .pull-quote .a-lede,
  .pull-quote .a-body {
    font-size: var(--text-caption);
    line-height: 1.5;
  }
}

.card-rule { margin-block: var(--space-4); }
.card-body { margin-top: var(--space-3); }

/* Fiduciary separation card */
.separation-card { gap: var(--space-3); justify-content: center; }
.separation-card > * { margin: 0; }
.separation-glyph { font-size: var(--text-hero); line-height: 1; opacity: 0.18; }

/* 70/30 split bar */
.split-bar {
  display: flex;
  gap: 2px;
  height: 24px;
  margin-block: var(--space-4);
}
.split-direct  { flex: 70; background: var(--color-primary); border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.split-network { flex: 30; background: color-mix(in oklab, var(--color-primary) 18%, transparent); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.split-figures { margin-bottom: var(--space-4); }

/* 7-tier allocation list */
.tier-list { list-style: none; margin-top: var(--space-4); }
.tier-row {
  display: grid;
  grid-template-columns: 2.5rem 3.5rem 5rem 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.tier-row + .tier-row { box-shadow: inset 0 1px 0 var(--color-border); }
.tier-row > * { min-width: 0; }
.tier-name { color: var(--color-primary); }
.tier-pct, .tier-amt { text-align: right; }
.tier-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  overflow: hidden;
}
.tier-fill { display: block; height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); }
.tier-state { white-space: nowrap; }
.tier-state.is-open { color: var(--color-success); }
.tier-foot { margin-top: var(--space-4); }

@media (max-width: 480px) {
  /* Below 480px the bar has no room to read; drop it rather than crush the
     figures, which are the point of the row. §1.7 — content fits or it goes. */
  .tier-row { grid-template-columns: 2.25rem 3.25rem 1fr auto; }
  .tier-bar { display: none; }
}

/* Numbered steps */
.step-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-6); max-width: 800px; }
.step { display: flex; align-items: flex-start; gap: var(--space-4); }
.step > * { min-width: 0; }
.step p { margin-top: var(--space-2); }

/* Requirements inside a step. Deliberately NOT `.a-list` — that primitive is
   a full card container, and nesting one inside a step that is already a row
   of a list stacks two containers to show three short lines. A checked list
   with a hanging marker keeps the step scannable and weightless. */
.step-needs {
  list-style: none;
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.step-needs li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  color: var(--color-muted-foreground);
}
.step-needs li::before {
  content: '';
  position: absolute;
  left: 0;
  /* Optically centred on the first line rather than the box: with a wrapping
     item, `top: 50%` would drop the marker to the middle of two lines. */
  top: calc(var(--text-body-lh) * 0.5em);
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.step-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-control);
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  font-size: var(--text-title-2);
  font-weight: 700;
}

.closing-note { margin-top: var(--space-8); max-width: 60ch; margin-inline: auto; }
.contact-row { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); }
.contact-chip { padding: var(--space-3) var(--space-6); font-size: var(--text-caption); }

/* Footer */
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.footer-top > * { min-width: 0; }
.footer-blurb { margin-top: var(--space-3); max-width: 48ch; }
.footer-links { display: flex; gap: var(--space-12); flex-wrap: wrap; }
.footer-list { list-style: none; margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.footer-list li, .footer-list a {
  font-size: var(--text-caption);
  color: var(--color-muted-foreground);
  text-decoration: none;
}
.footer-list a:hover { color: var(--color-foreground); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-6);
}
.footer-legal { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer-legal a { color: var(--color-muted-foreground); text-decoration: none; }
.footer-legal a:hover { color: var(--color-foreground); }