/* ============================================================
   WeCSharp — Design System v1.0
   Single stylesheet for the whole site. Hand-written, no build
   step, no external requests, no @font-face.

   CONTENTS
     01  Design tokens — colour (light base + two dark blocks)
     02  Design tokens — type, space, radius, motion, z-index
     03  Reset and base elements
     04  Utilities
     05  Layout: skip link, container, section, hero, cta-band, split
     06  Site header, brand, nav, nav-toggle, theme toggle
     07  Buttons
     08  Cards and grids
     09  Feature list, checklist, definition list, tags
     10  Process / steps
     11  Callout
     12  Band, compare, table
     13  Diagram / figure
     14  Timeline, profile, link row, FAQ
     15  Prose, links, code, divider
     16  Forms
     17  Site footer
     18  Motion: reveal, reduced motion
     19  Addenda
   ============================================================ */


/* ============================================================
   01. DESIGN TOKENS — COLOUR
   Light palette is the base. Dark is an override list applied
   twice: once under prefers-color-scheme, once under [data-theme].
   Keep the two dark blocks IDENTICAL.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Neutral ramp (cool, 214deg) --- */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FAFCFD;
  --neutral-50:   #F4F7FA;
  --neutral-100:  #E9EEF4;
  --neutral-200:  #DAE1EA;
  --neutral-300:  #C2CCD9;
  --neutral-400:  #9AA8B8;
  --neutral-500:  #75839A;
  --neutral-600:  #55647A;
  --neutral-700:  #3B4859;
  --neutral-800:  #26303D;
  --neutral-900:  #101722;
  --neutral-950:  #0B1017;

  /* --- Accent ramp (cobalt, 217deg) --- */
  --cobalt-100:   #EAF1FE;
  --cobalt-200:   #C3DAFF;
  --cobalt-300:   #A3C6FF;
  --cobalt-400:   #8FB9FF;
  --cobalt-500:   #1A56C4;
  --cobalt-600:   #12408F;
  --cobalt-700:   #0E3576;
  --cobalt-900:   #10243F;
  --cobalt-ink:   #06101E;

  /* --- Surfaces --- */
  --color-bg:              var(--neutral-50);
  --color-surface-1:       var(--neutral-0);
  --color-surface-2:       var(--neutral-100);
  --color-surface-3:       var(--neutral-200);
  --color-surface-inverted:var(--neutral-900);
  --color-surface-accent:  var(--cobalt-100);
  --color-header-bg:       rgb(255 255 255 / 0.88);
  --color-header-bg-solid: var(--neutral-0);

  --color-overlay:         rgb(16 23 34 / 0.45);

  /* Surfaces used INSIDE an inverted band. An inverted band is dark in
     every theme, so these are declared once here on purpose and are not
     overridden in either dark block. */
  --color-surface-inverted-1: #16202C;
  --color-surface-inverted-2: #1B2634;

  /* --- Text --- */
  --color-text:            var(--neutral-900);
  --color-text-secondary:  var(--neutral-700);
  --color-text-muted:      var(--neutral-600);
  --color-text-inverted:   #EAF0F7;
  --color-text-inverted-secondary: #B7C2D0;
  --color-text-inverted-muted:     #94A1B2;

  /* --- Borders --- */
  --color-border:          var(--neutral-200);   /* decorative dividers */
  --color-border-strong:   var(--neutral-300);   /* card outlines */
  --color-border-control:  var(--neutral-500);   /* inputs, >=3:1 required */
  --color-border-inverted: #2A3444;
  --color-border-inverted-strong: #35424F;       /* outlines inside an inverted band */

  /* Diagram ink. Diagram strokes and arrowheads carry meaning, so they
     are held to the 3:1 of WCAG 1.4.11 — never to the card outline. */
  --color-diagram-stroke:  var(--color-border-control);

  /* --- Accent / interactive --- */
  --color-accent:          var(--cobalt-500);
  --color-accent-hover:    var(--cobalt-600);
  --color-accent-active:   var(--cobalt-700);
  --color-accent-contrast: var(--neutral-0);
  --color-accent-subtle:   var(--cobalt-100);
  --color-accent-on-dark:  var(--cobalt-400);
  --color-link:            var(--cobalt-500);
  --color-link-hover:      var(--cobalt-600);

  /* --- Focus --- */
  --color-focus:           var(--cobalt-500);
  --color-focus-halo:      var(--neutral-0);

  /* --- Selection --- */
  --color-selection-bg:    var(--cobalt-200);
  --color-selection-fg:    var(--cobalt-ink);

  /* --- Semantic --- */
  --color-success:         #0C6B44;
  --color-success-subtle:  #E7F5EE;
  --color-warning:         #7A4900;
  --color-warning-subtle:  #FBF0DF;
  --color-danger:          #A11F18;
  --color-danger-subtle:   #FDECEA;
  --color-info:            var(--cobalt-600);
  --color-info-subtle:     var(--cobalt-100);

  /* --- Elevation --- */
  --shadow-1: 0 1px 1px rgb(16 23 34 / 0.04), 0 1px 2px rgb(16 23 34 / 0.06);
  --shadow-2: 0 1px 2px rgb(16 23 34 / 0.05), 0 6px 16px -8px rgb(16 23 34 / 0.12);
  --shadow-3: 0 2px 4px rgb(16 23 34 / 0.06), 0 18px 36px -14px rgb(16 23 34 / 0.18);
  --shadow-inset-hairline: inset 0 1px 0 rgb(255 255 255 / 0.6);

  /* --- Hero grid motif (CSS-only texture) --- */
  --color-grid-line: rgb(26 86 196 / 0.07);
}

/* ---------- DARK (system preference) — block A ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg:              var(--neutral-950);
    --color-surface-1:       #121A24;
    --color-surface-2:       #18212D;
    --color-surface-3:       #202B39;
    --color-surface-inverted:#020509;
    --color-surface-accent:  var(--cobalt-900);
    --color-header-bg:       rgb(11 16 23 / 0.88);
    --color-header-bg-solid: var(--neutral-950);
    --color-overlay:         rgb(2 5 9 / 0.62);

    --color-text:            #EAF0F7;
    --color-text-secondary:  #B7C2D0;
    --color-text-muted:      #8B98A8;
    --color-text-inverted:   #EAF0F7;
    --color-text-inverted-secondary: #B7C2D0;
    --color-text-inverted-muted:     #94A1B2;

    --color-border:          #26313D;
    --color-border-strong:   #35424F;
    --color-border-control:  #6E7E92;
    --color-diagram-stroke:  var(--color-border-control);
    --color-border-inverted: #26313D;
    --color-border-inverted-strong: #35424F;

    --color-accent:          var(--cobalt-400);
    --color-accent-hover:    var(--cobalt-300);
    --color-accent-active:   var(--cobalt-200);
    --color-accent-contrast: var(--cobalt-ink);
    --color-accent-subtle:   var(--cobalt-900);
    --color-accent-on-dark:  var(--cobalt-400);
    --color-link:            var(--cobalt-400);
    --color-link-hover:      var(--cobalt-300);

    --color-focus:           var(--cobalt-400);
    --color-focus-halo:      var(--neutral-950);

    --color-selection-bg:    #1A3C6B;
    --color-selection-fg:    #EAF0F7;

    --color-success:         #5FD39A;
    --color-success-subtle:  #0E2A1F;
    --color-warning:         #E9B168;
    --color-warning-subtle:  #2A2012;
    --color-danger:          #FF9E95;
    --color-danger-subtle:   #2E1614;
    --color-info:            var(--cobalt-300);
    --color-info-subtle:     var(--cobalt-900);

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.45);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.40), 0 8px 20px -10px rgb(0 0 0 / 0.65);
    --shadow-3: 0 4px 8px rgb(0 0 0 / 0.45), 0 22px 44px -16px rgb(0 0 0 / 0.75);
    --shadow-inset-hairline: inset 0 1px 0 rgb(255 255 255 / 0.05);

    --color-grid-line: rgb(143 185 255 / 0.08);
  }
}

/* ---------- DARK (manual toggle) — block B, identical to A ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:              var(--neutral-950);
  --color-surface-1:       #121A24;
  --color-surface-2:       #18212D;
  --color-surface-3:       #202B39;
  --color-surface-inverted:#020509;
  --color-surface-accent:  var(--cobalt-900);
  --color-header-bg:       rgb(11 16 23 / 0.88);
  --color-header-bg-solid: var(--neutral-950);
  --color-overlay:         rgb(2 5 9 / 0.62);

  --color-text:            #EAF0F7;
  --color-text-secondary:  #B7C2D0;
  --color-text-muted:      #8B98A8;
  --color-text-inverted:   #EAF0F7;
  --color-text-inverted-secondary: #B7C2D0;
  --color-text-inverted-muted:     #94A1B2;

  --color-border:          #26313D;
  --color-border-strong:   #35424F;
  --color-border-control:  #6E7E92;
  --color-diagram-stroke:  var(--color-border-control);
  --color-border-inverted: #26313D;
  --color-border-inverted-strong: #35424F;

  --color-accent:          var(--cobalt-400);
  --color-accent-hover:    var(--cobalt-300);
  --color-accent-active:   var(--cobalt-200);
  --color-accent-contrast: var(--cobalt-ink);
  --color-accent-subtle:   var(--cobalt-900);
  --color-accent-on-dark:  var(--cobalt-400);
  --color-link:            var(--cobalt-400);
  --color-link-hover:      var(--cobalt-300);

  --color-focus:           var(--cobalt-400);
  --color-focus-halo:      var(--neutral-950);

  --color-selection-bg:    #1A3C6B;
  --color-selection-fg:    #EAF0F7;

  --color-success:         #5FD39A;
  --color-success-subtle:  #0E2A1F;
  --color-warning:         #E9B168;
  --color-warning-subtle:  #2A2012;
  --color-danger:          #FF9E95;
  --color-danger-subtle:   #2E1614;
  --color-info:            var(--cobalt-300);
  --color-info-subtle:     var(--cobalt-900);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.40), 0 8px 20px -10px rgb(0 0 0 / 0.65);
  --shadow-3: 0 4px 8px rgb(0 0 0 / 0.45), 0 22px 44px -16px rgb(0 0 0 / 0.75);
  --shadow-inset-hairline: inset 0 1px 0 rgb(255 255 255 / 0.05);

  --color-grid-line: rgb(143 185 255 / 0.08);
}

/* ---------- LIGHT forced by manual toggle ----------
   :root[data-theme="light"] needs no declarations — the base :root
   values already are the light theme, and the dark media block is
   guarded with :not([data-theme="light"]). Do not add one. */


/* ============================================================
   02. DESIGN TOKENS — TYPE, SPACE, RADIUS, MOTION, Z-INDEX
   ============================================================ */

:root {
  /* --- Font stacks: system only, no web fonts --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
               "Segoe UI Mono", "Roboto Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* --- Type scale --- */
  --text-eyebrow: 0.75rem;
  --text-caption: 0.8125rem;
  --text-sm:      0.875rem;
  --text-body:    clamp(1rem, 0.965rem + 0.175vw, 1.125rem);
  --text-h4:      clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --text-lede:    clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem);
  --text-h3:      clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --text-h2:      clamp(1.625rem, 1.42rem + 1.02vw, 2.25rem);
  --text-h1:      clamp(2rem, 1.63rem + 1.85vw, 3rem);
  --text-display: clamp(2.5rem, 1.9rem + 3vw, 4rem);

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

  --leading-display: 1.05;
  --leading-tight:   1.15;
  --leading-heading: 1.2;    /* h2, eyebrow, button label */
  --leading-snug:    1.25;
  --leading-title:   1.3;    /* h4 and every card / term title */
  --leading-normal:  1.45;
  --leading-lede:    1.5;    /* ledes and hero copy */
  --leading-relaxed: 1.65;

  --tracking-display: -0.024em;
  --tracking-tight:   -0.018em;
  --tracking-snug:    -0.011em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.09em;

  --measure:        68ch;   /* body prose */
  --measure-lede:   56ch;   /* ledes and hero copy */
  --measure-narrow: 44ch;   /* card body, list item text */
  --measure-short:  40ch;   /* footer notes */

  /* --- Spacing — 4px base, rem-expressed --- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* --- Fluid rhythm --- */
  --gutter:       clamp(1rem, 0.6rem + 2vw, 2rem);
  --section-y:    clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --section-y-sm: clamp(2.5rem, 1.9rem + 3vw, 4rem);
  --grid-gap:     clamp(1rem, 0.7rem + 1.5vw, 1.75rem);

  /* --- Radius --- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* --- Border widths --- */
  --border-hairline: 1px;
  --border-thick:    2px;
  --border-heavy:    3px;

  /* --- Containers --- */
  --container-xs: 34rem;
  --container-sm: 44rem;
  --container-md: 60rem;
  --container-lg: 72rem;
  --container-xl: 80rem;

  /* --- Z-index --- */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-header:   200;
  --z-overlay:  300;
  --z-skiplink: 400;

  /* --- Motion --- */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 420ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);

  /* --- Header height, used for scroll-margin on anchor targets --- */
  --header-h: 4rem;

  font-synthesis: none;
}

@media (min-width: 900px) {
  :root { --header-h: 4.5rem; }
}


/* ============================================================
   03. RESET AND BASE ELEMENTS
   ============================================================ */

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

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

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

body {
  margin: 0;
  max-inline-size: 100%;
  background-color: var(--color-bg);
  color: var(--color-text);
  font: var(--weight-regular) var(--text-body)/var(--leading-relaxed) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-block-start: calc(var(--header-h) + var(--space-5)); }

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-text); text-wrap: balance; }

h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

h4 {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-snug);
}

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

ul, ol { margin: 0; }

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

img, svg, video, canvas, iframe {
  max-inline-size: 100%;
  block-size: auto;
}

svg { fill: none; }

button, input, select, textarea { font: inherit; color: inherit; }

strong, b { font-weight: var(--weight-semibold); }

small { font-size: var(--text-caption); }

hr { border: 0; }

::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-fg);
}

/* Global focus style — declared once, never removed without a replacement. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

/* The skip-link target takes real focus, so it must not paint a ring. */
.main:focus { outline: none; }

/* --- Icon primitive: every icon is 24x24, currentColor, stroke 1.5 --- */
.icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  vertical-align: -0.15em;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.icon--sm { inline-size: 1rem;   block-size: 1rem; }
.icon--lg { inline-size: 1.5rem; block-size: 1.5rem; }
.icon--xl { inline-size: 2rem;   block-size: 2rem; stroke-width: 1.25; }


/* ============================================================
   04. UTILITIES  (the complete list — add no others)
   ============================================================ */

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.break-anywhere { overflow-wrap: anywhere; }
.text-center { text-align: center; }
.no-wrap { white-space: nowrap; }

.stack-sm > * + * { margin-block-start: var(--space-3); }
.stack-md > * + * { margin-block-start: var(--space-5); }
.stack-lg > * + * { margin-block-start: var(--space-7); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}


/* ============================================================
   05. LAYOUT — skip link, container, section, hero, cta-band
   ============================================================ */

/* --- Skip link ------------------------------------------------ */
.skip-link {
  position: absolute;
  inset-block-start: -100vh;
  inset-inline-start: var(--gutter);
  z-index: var(--z-skiplink);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-surface-1);
  color: var(--color-text);
  border: var(--border-thick) solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-2);
}

.skip-link:focus,
.skip-link:focus-visible { inset-block-start: var(--space-3); }

/* --- Container ------------------------------------------------ */
.container {
  inline-size: 100%;
  max-inline-size: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--xs { max-inline-size: var(--container-xs); }
.container--sm { max-inline-size: var(--container-sm); }
.container--md { max-inline-size: var(--container-md); }
.container--xl { max-inline-size: var(--container-xl); }

/* --- Section shell -------------------------------------------- */
.section {
  padding-block: var(--section-y);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.section--alt   { background-color: var(--color-surface-2); }
.section--tight { padding-block: var(--section-y-sm); }

/* A dark band. Also carries .hero--inverted, so the two cannot drift. */
.section--inverted,
.hero--inverted {
  background: var(--color-surface-inverted);
  --color-text: var(--color-text-inverted);
  --color-text-secondary: var(--color-text-inverted-secondary);
  --color-text-muted: var(--color-text-inverted-muted);
  --color-accent: var(--color-accent-on-dark);
  --color-border: var(--color-border-inverted);
  --color-border-strong: var(--color-border-inverted-strong);
  --color-surface-1: var(--color-surface-inverted-1);
  --color-surface-2: var(--color-surface-inverted-2);
}

.section__head {
  max-inline-size: var(--container-md);
  margin-block-end: var(--space-8);
}

.section__head--centered {
  margin-inline: auto;
  text-align: center;
}

.section__head--centered .section__lede { margin-inline: auto; }

.section__title { font-size: var(--text-h2); margin: 0; }

.section__lede,
.lede {
  font-size: var(--text-lede);
  font-weight: var(--weight-regular);
  line-height: var(--leading-lede);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure-lede);
  margin-block-start: var(--space-4);
  text-wrap: pretty;
}

.section__body > * + * { margin-block-start: var(--space-5); }

/* Trailing action row for a section. */
.section__foot { margin-block-start: var(--space-7); }

/* --- Eyebrow -------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  inline-size: 0.75rem;
  block-size: var(--border-hairline);
  background-color: currentColor;
  margin-inline-end: var(--space-2);
  vertical-align: 0.25em;
}

.section__head--centered .eyebrow::before { display: none; }

/* --- Split layout (prose beside a list or a figure) ------------ */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

.split > * { min-inline-size: 0; }

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: var(--space-9);
  }
  .split--reverse > :first-child { order: 2; }
}

/* Structural hooks. These carry no visual treatment of their own: they
   exist so the markup, main.js and later pages have stable names to
   target, and so every class in a page resolves to a real rule. */
.section__inner,
.hero--home,
.hero__aside,
.site-footer__nav { min-inline-size: 0; }

/* --- Hero ----------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.hero--flagship { padding-block-start: calc(var(--section-y) + var(--space-4)); }

.hero--page,
.hero--compact { padding-block: var(--section-y-sm); }

.hero--alt { background-color: var(--color-surface-2); }

/* .hero--inverted is declared with .section--inverted in the section
   shell above — one rule, two entry points. */

/* Registration-grid motif — the only background texture on the site. */
.hero--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--color-grid-line) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to bottom, var(--color-grid-line) 0 1px, transparent 1px 96px);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 1), transparent 78%);
          mask-image: linear-gradient(to bottom, rgb(0 0 0 / 1), transparent 78%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
}

.hero__inner > * { min-inline-size: 0; }

/* Two columns only when the hero carries an aside — opt in with .hero--split */
@media (min-width: 1024px) {
  .hero--split .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-9);
    align-items: center;
  }
}

.hero__title { font-size: var(--text-h1); }

.hero--flagship .hero__title {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.hero__lede {
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure-lede);
  margin-block-start: var(--space-5);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-7);
}

.hero__content > .hero__proof { margin-block-start: var(--space-7); }

.hero__note {
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  max-inline-size: var(--measure-lede);
  margin-block-start: var(--space-5);
}

/* overflow-x pairs with the min-inline-size floor on .diagram__svg: below
   about 390px the drawing scrolls inside its frame rather than shrinking
   its labels to single figures. Same contract as .table-wrap. */
.hero__figure {
  margin: 0;
  overflow-x: auto;
  padding: var(--space-6);
  background-color: var(--color-surface-1);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
}

@media (max-width: 479px) {
  .hero__actions .btn { inline-size: 100%; }

  /* Fixed padding costs the drawing 22% of a 320px screen. */
  .hero__figure { padding: var(--space-4); }
}

/* --- CTA band -------------------------------------------------- */
.cta-band {
  padding-block: var(--section-y);
  background-color: var(--color-surface-2);
  border-block-start: var(--border-hairline) solid var(--color-border);
  color: var(--color-text);
}

.cta-band__inner { text-align: center; }

.cta-band__title { font-size: var(--text-h2); margin: 0; }

.cta-band__body {
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure-lede);
  margin: var(--space-4) auto 0;
  text-wrap: pretty;
}

.cta-band__actions {
  justify-content: center;
  margin-block-start: var(--space-7);
}

.cta-band__note {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-block-start: var(--space-5);
}


/* ============================================================
   06. SITE HEADER — brand, nav, disclosure, theme toggle
   ============================================================ */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: var(--color-header-bg-solid);
  border-block-end: var(--border-hairline) solid var(--color-border);
  transition: box-shadow var(--dur-2) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background-color: var(--color-header-bg);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
            backdrop-filter: saturate(1.4) blur(10px);
  }
}

.site-header[data-scrolled] { box-shadow: var(--shadow-1); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 4rem;
}

@media (min-width: 900px) {
  .site-header__inner { min-block-size: 4.5rem; }
}

/* --- Brand ----------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  text-decoration: none;
}

.brand:hover { color: var(--color-text); }

/* The strokes take the text colour; only the centre quadrant is accent. */
.brand__mark {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: none;
  color: var(--color-text);
}

.brand__cell { fill: var(--color-accent); stroke: none; }

.brand__text { white-space: nowrap; }

/* --- Nav disclosure button ------------------------------------- */
/* Hidden until main.js confirms JS is available: a disclosure button that
   cannot disclose is worse than no button, and with JS off the nav is
   already visible as a plain list. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  padding: 0;
  background-color: transparent;
  color: var(--color-text);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-standard),
              border-color var(--dur-1) var(--ease-standard);
}

.js .nav-toggle { display: inline-flex; }
.nav-toggle:hover { background-color: var(--color-surface-2); }
.nav-toggle .icon { inline-size: 1.25rem; block-size: 1.25rem; }

/* main.js toggles [hidden] between these two. */
.nav-toggle__open,
.nav-toggle__close { pointer-events: none; }

/* --- Primary navigation ---------------------------------------- */
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link,
.nav__link {
  position: relative;
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-standard);
}

.site-nav__link:hover,
.nav__link:hover { color: var(--color-text); }

.site-nav__link[aria-current="page"],
.nav__link[aria-current="page"] { color: var(--color-text); }

.site-nav__link[aria-current="page"]::after,
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--border-thick);
  background-color: var(--color-accent);
  border-radius: var(--radius-xs);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* --- Theme toggle ---------------------------------------------- */
/* Same reasoning as .nav-toggle: without JS the toggle cannot switch
   anything, so it is not rendered at all and the OS preference rules. */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: none;
  padding: 0;
  background-color: transparent;
  color: var(--color-text-secondary);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-standard),
              border-color var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard);
}

.js .theme-toggle { display: inline-flex; }

.theme-toggle:hover {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}

.theme-toggle .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}

/* --- Mobile: the nav is a disclosure panel --------------------- */
@media (max-width: 899px) {
  /* Before main.js runs, .js on <html> hides the panel so there is no
     flash of an open menu. main.js then owns the [hidden] attribute. */
  .js .site-nav:not([data-open]) { display: none; }

  /* The panel chrome is scoped to .js for the same reason the hide rule
     is: an absolutely positioned sheet is only safe while something can
     open and close it. Without main.js there is no toggle (.nav-toggle
     is display:none), so an unscoped panel would sit over the top of
     every page permanently, with no way to dismiss it. */
  .js .site-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    padding: var(--space-4) var(--gutter) var(--space-6);
    background-color: var(--color-surface-1);
    border-block-end: var(--border-hairline) solid var(--color-border);
    box-shadow: var(--shadow-2);
  }

  /* No JS: the nav is a plain list in normal flow on its own row under
     the brand, and the header stops sticking so that taller block can
     scroll away instead of holding the viewport. */
  html:not(.js) .site-header { position: static; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; }

  html:not(.js) .site-nav {
    inline-size: 100%;
    padding-block: var(--space-2) var(--space-4);
    border-block-start: var(--border-hairline) solid var(--color-border);
  }

  .js .site-nav[data-open] { animation: nav-panel-in var(--dur-3) var(--ease-out); }

  .site-nav__item + .site-nav__item {
    border-block-start: var(--border-hairline) solid var(--color-border);
  }

  .site-nav__link,
  .nav__link {
    font-size: var(--text-body);
    padding-block: var(--space-3);
  }

  .site-nav__link[aria-current="page"]::after,
  .nav__link[aria-current="page"]::after {
    inset-inline: auto;
    inset-block: var(--space-3);
    inset-inline-start: calc(var(--space-3) * -1);
    inline-size: var(--border-heavy);
    block-size: auto;
  }

  .site-nav__actions {
    flex-wrap: wrap;
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hairline) solid var(--color-border);
  }

  .site-nav__actions .btn { flex: 1 1 12rem; }
}

@keyframes nav-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --- Desktop: the nav is a row --------------------------------- */
@media (min-width: 900px) {
  .nav-toggle,
  .js .nav-toggle { display: none; }

  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .site-nav__link,
  .nav__link { padding: var(--space-2) var(--space-1); }

  .site-nav__link[aria-current="page"]::after,
  .nav__link[aria-current="page"]::after {
    inset-block-end: -0.5rem;
    block-size: var(--border-heavy);
  }
}


/* ============================================================
   07. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 2.75rem;
  padding: var(--space-3) var(--space-5);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-heading);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-standard),
              border-color var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard);
}

.btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}
.btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-contrast);
}
.btn--primary:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
}
.btn--primary:focus-visible { box-shadow: 0 0 0 4px var(--color-focus-halo); }

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--secondary:hover {
  background-color: var(--color-accent-subtle);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-hover);
}
.btn--secondary:active {
  background-color: var(--color-accent-subtle);
  border-color: var(--color-accent-active);
}

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}
.btn--ghost:hover {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}
.btn--ghost:active { background-color: var(--color-surface-3); }

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--sm { min-block-size: 2.25rem; padding: var(--space-2) var(--space-4); }
.btn--lg {
  min-block-size: 3rem;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-body);
}

.btn--block { inline-size: 100%; }

.btn--icon {
  inline-size: 2.75rem;
  padding: 0;
}

.btn__icon {
  inline-size: 1.125em;
  block-size: 1.125em;
  flex: none;
  transition: transform var(--dur-2) var(--ease-out);
}

.btn:hover .btn__icon { transform: translateX(2px); }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* nowrap keeps a label on one line where there is room for it; on narrow
   screens there is not, and an unwrappable label overflows its card — and
   with it the page. Below 560px the label wraps instead. */
@media (max-width: 559px) {
  .btn { white-space: normal; text-wrap: balance; }
}

@media (max-width: 479px) {
  .btn-group .btn,
  .card__actions .btn,
  .section__foot .btn { inline-size: 100%; }
}


/* ============================================================
   08. CARDS AND GRIDS
   .card-grid is the canonical name; .grid is an accepted alias so
   either spelling works in page markup.
   ============================================================ */

.card-grid,
.grid {
  display: grid;
  gap: var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

.card-grid > *,
.grid > * { min-inline-size: 0; }

@media (min-width: 560px) {
  .card-grid--4,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .card-grid--2,
  .grid--2,
  .card-grid--3,
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .card-grid--3,
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4,
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  block-size: 100%;
  padding: var(--space-6);
  background-color: var(--color-surface-1);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.card--compact { padding: var(--space-5); gap: var(--space-2); }

.card__icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  margin-block-end: var(--space-2);
  background-color: var(--color-accent-subtle);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-accent);
}

.card__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  margin: 0;
}

.card__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure-narrow);
  margin: 0;
}

.card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: var(--border-hairline) solid var(--color-border);
}

.card__actions { margin-block-start: auto; padding-block-start: var(--space-4); }

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
}

.card__cta .icon { transition: transform var(--dur-2) var(--ease-out); }

/* Whole-card link: one real anchor, no nested interactives. */
.card--link { position: relative; transition: box-shadow var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }

.card__anchor {
  color: inherit;
  text-decoration: none;
}

.card--link .card__anchor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card--link:hover,
.card--link:focus-within {
  box-shadow: var(--shadow-2);
  border-color: var(--color-accent);
}

.card--link:hover .card__cta .icon,
.card--link:focus-within .card__cta .icon { transform: translateX(2px); }

.card--link:focus-within {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
}

.card__anchor:focus-visible { outline: none; }

/* Registration tick — at most one per grid. */
.card--marked::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-block-start: var(--border-hairline) solid var(--color-accent);
  border-inline-start: var(--border-hairline) solid var(--color-accent);
  border-start-start-radius: var(--radius-lg);
}

.card--marked { position: relative; }

/* Full-width lead card inside any grid. */
.card--feature {
  grid-column: 1 / -1;
  padding: var(--space-7);
  border-color: var(--color-accent);
  background-color: var(--color-surface-1);
}

.card--feature .card__title { font-size: var(--text-h3); }
.card--feature .card__body { max-inline-size: var(--measure); }

@media (min-width: 900px) {
  .card--feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    column-gap: var(--space-8);
    align-items: start;
  }
  .card--feature > .card__icon    { grid-column: 1; grid-row: 1; }
  .card--feature > .card__title   { grid-column: 1; grid-row: 2; }
  .card--feature > .card__body    { grid-column: 1; grid-row: 3; }
  .card--feature > .card__actions {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    margin-block-start: 0;
    padding-block-start: 0;
  }
}


/* ============================================================
   09. FEATURE LIST, CHECKLIST, DEFINITION LIST, TAGS
   ============================================================ */

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.feature-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* Text column of a feature-list item. min-inline-size:0 is the layout
   invariant that keeps a long unbroken word from widening the grid track
   at 320px; the item's own grid supplies everything else. */
.feature-list__text { min-inline-size: 0; }

.feature-list__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  color: var(--color-accent);
  margin-block-start: 0.2em;
}

.feature-list__term {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-title);
  margin: 0 0 var(--space-1);
}

.feature-list__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure);
  margin: 0;
}

.feature-list--compact { gap: var(--space-4); }
.feature-list--compact .feature-list__term {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
}

@media (min-width: 720px) {
  .feature-list--two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);
  }
}

/* --- Checklist (inline check icons) ---------------------------- */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.checklist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure);
}

.checklist__icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
  color: var(--color-accent);
  margin-block-start: 0.28em;
}

.checklist__item strong { color: var(--color-text); }

/* --- Definition grid ------------------------------------------- */
.deflist {
  margin: 0;
  display: grid;
  gap: var(--space-5);
}

.deflist__row {
  display: grid;
  gap: var(--space-2);
  padding-block-end: var(--space-5);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.deflist__row:last-child { padding-block-end: 0; border-block-end: 0; }

.deflist__term {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-title);
  color: var(--color-text);
  margin: 0;
}

.deflist__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure);
  margin: 0;
}

@media (min-width: 900px) {
  .deflist--split .deflist__row {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    column-gap: var(--space-7);
    align-items: start;
  }
}

/* --- Tags (non-interactive chips) ------------------------------ */
.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  background-color: var(--color-surface-3);
  color: var(--color-text-secondary);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
}

.tag--accent {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  border-color: var(--color-accent-subtle);
}

.tag--pill { border-radius: var(--radius-pill); }


/* ============================================================
   10. PROCESS / STEPS  (numbered stepper, CSS counters)
   .process is the canonical name; .steps is an accepted alias.
   ============================================================ */

.process,
.steps {
  counter-reset: process;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

.process__item,
.steps__item {
  counter-increment: process;
  position: relative;
  padding-inline-start: var(--space-9);
}

.process__item::before,
.steps__item::before {
  content: counter(process, decimal-leading-zero);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  background-color: var(--color-surface-1);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* Connector between markers. */
.process__item::after,
.steps__item::after {
  content: "";
  position: absolute;
  inset-block-start: 2.25rem;
  inset-block-end: calc(var(--space-6) * -1);
  inset-inline-start: calc(1.125rem - 0.5px);
  inline-size: var(--border-hairline);
  background-color: var(--color-border);
}

.process__item:last-child::after,
.steps__item:last-child::after { content: none; }

.process__title,
.steps__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-title);
  margin: 0 0 var(--space-2);
}

.process__title .tag,
.steps__title .tag {
  margin-inline-start: var(--space-3);
  vertical-align: 0.15em;
}

.process__body,
.steps__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure);
  margin: 0;
}

/* A step where a human decides — never signalled by colour alone;
   pair with a visible label inside the title. */
.process__item--human::before,
.steps__item--human::before {
  border: var(--border-thick) solid var(--color-accent);
  background-color: var(--color-accent-subtle);
}

@media (min-width: 900px) {
  .process--horizontal,
  .steps--horizontal {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .process--horizontal .process__item,
  .steps--horizontal .steps__item {
    padding-inline-start: 0;
    padding-block-start: var(--space-8);
  }

  .process--horizontal .process__item::after,
  .steps--horizontal .steps__item::after {
    inset-block: 1.125rem auto;
    inset-inline: 2.25rem calc(var(--space-6) * -1);
    inline-size: auto;
    block-size: var(--border-hairline);
  }
}


/* ============================================================
   11. CALLOUT
   ============================================================ */

.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-surface-2);
  border: var(--border-hairline) solid var(--color-border);
  border-inline-start: var(--border-heavy) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.callout__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  margin-block-start: 0.15em;
  color: var(--color-text-muted);
}

.callout__title {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.callout__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure);
  margin: 0;
}

.callout__content > * + * { margin-block-start: var(--space-3); }

.callout--note,
.callout--boundary {
  background-color: var(--color-info-subtle);
  border-inline-start-color: var(--color-accent);
}
.callout--note .callout__icon,
.callout--boundary .callout__icon { color: var(--color-info); }

.callout--caution {
  background-color: var(--color-warning-subtle);
  border-inline-start-color: var(--color-warning);
}
.callout--caution .callout__icon { color: var(--color-warning); }

.callout--success {
  background-color: var(--color-success-subtle);
  border-inline-start-color: var(--color-success);
}
.callout--success .callout__icon { color: var(--color-success); }


/* ============================================================
   12. BAND, COMPARE, TABLE
   ============================================================ */

.band {
  padding-block: var(--space-8);
  background-color: var(--color-surface-2);
  border-block: var(--border-hairline) solid var(--color-border);
}

.band__inner {
  display: grid;
  gap: var(--space-6);
}

.band__item { min-inline-size: 0; }

.band__label {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.band__value {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-title);
  color: var(--color-text);
  max-inline-size: 28ch;
  margin: 0;
}

/* Unused in v1. Only ever populated with an owner-verified figure. */
.band__figure {
  font-family: var(--font-mono);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
  margin: 0;
}

@media (min-width: 720px) {
  .band__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-8);
  }
  .band__item + .band__item {
    padding-inline-start: var(--space-8);
    border-inline-start: var(--border-hairline) solid var(--color-border);
  }
}

/* --- Table ------------------------------------------------------ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-1);
}

.table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th {
  text-align: start;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--border-hairline) solid var(--color-border);
  background-color: var(--color-surface-2);
}

.table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  border-block-end: var(--border-hairline) solid var(--color-border);
  vertical-align: top;
}

.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr:hover { background-color: var(--color-surface-2); }

/* --- Compare (qualitative, two columns, never numbers) --------- */
.compare td,
.compare th { inline-size: 50%; min-inline-size: 14rem; }

.compare tbody td:last-child {
  color: var(--color-text);
  border-inline-start: var(--border-hairline) solid var(--color-border);
  background-color: var(--color-accent-subtle);
}

.compare thead th:last-child { color: var(--color-accent); }


/* ============================================================
   13. DIAGRAM / FIGURE
   Frame for author-drawn inline SVG. The paint classes below are
   the only way a diagram gets colour — never hard-code a hex in
   the SVG, so both themes work from one drawing.
   ============================================================ */

.diagram,
.figure {
  margin: 0;
  padding: var(--space-6);
  background-color: var(--color-surface-1);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Label sizes below are in SVG user units, so they scale with the frame.
   The floor stops them collapsing to 8px on a phone (the frame scrolls
   instead); the ceiling stops the drawing doubling in the single-column
   band just under the 1024px hero split. */
.diagram__svg,
.figure__svg {
  display: block;
  inline-size: 100%;
  min-inline-size: 20rem;
  max-inline-size: 26rem;
  margin-inline: auto;
  block-size: auto;
}

.diagram__caption,
.figure figcaption {
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin-block-start: var(--space-4);
}

.diagram__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

/* Text equivalent that sits beneath a figure — mandatory, not optional. */
.figure__text-alt {
  margin: var(--space-4) 0 0;
  padding-inline-start: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.figure__text-alt li + li { margin-block-start: var(--space-2); }
.figure__text-alt ::marker { color: var(--color-accent); }

/* --- Diagram paint classes (usable from any inline SVG) -------- */
.diagram__box {
  fill: var(--color-surface-2);
  stroke: var(--color-diagram-stroke);
  stroke-width: 1.5;
}

.diagram__box--accent {
  fill: var(--color-accent-subtle);
  stroke: var(--color-accent);
}

.diagram__line {
  fill: none;
  stroke: var(--color-diagram-stroke);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diagram__line--accent { stroke: var(--color-accent); }

.diagram__arrow { fill: var(--color-diagram-stroke); stroke: none; }
.diagram__arrow--accent { fill: var(--color-accent); stroke: none; }

.diagram__text {
  fill: var(--color-text);
  stroke: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

.diagram__text--sub {
  fill: var(--color-text-muted);
  font-weight: var(--weight-regular);
  font-size: 12px;
}

.diagram__text--mono {
  fill: var(--color-text-muted);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.diagram__text--accent { fill: var(--color-accent); }


/* ============================================================
   14. TIMELINE, PROFILE, LINK ROW, FAQ
   ============================================================ */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

.timeline__item {
  position: relative;
  padding-inline-start: var(--space-7);
}

.timeline__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  background-color: var(--color-accent);
  border-radius: var(--radius-xs);
}

.timeline__item::after {
  content: "";
  position: absolute;
  inset-block: 1.375rem calc(var(--space-6) * -1);
  inset-inline-start: calc(0.3125rem - 0.5px);
  inline-size: var(--border-hairline);
  background-color: var(--color-border);
}

.timeline__item:last-child::after { content: none; }

.timeline__when {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.timeline__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-2);
}

.timeline__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure);
  margin: 0;
}

/* --- Profile card ---------------------------------------------- */
.profile {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--color-surface-1);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.profile__monogram {
  display: grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 4rem;
  flex: none;
  background-color: var(--color-accent-subtle);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.profile__name { font-size: var(--text-h3); margin: 0 0 var(--space-1); }

.profile__role {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.profile__content > * + * { margin-block-start: var(--space-4); }

@media (min-width: 720px) {
  .profile {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
  }
}

/* --- Link row (labelled external links) ------------------------ */
.linkrow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.linkrow__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.75rem;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-1) var(--ease-standard),
              text-decoration-thickness var(--dur-1) var(--ease-standard);
}

.linkrow__link:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

/* --- FAQ (native details/summary; works with JS off) ----------- */
.faq { display: grid; gap: var(--space-3); }

.faq__item {
  background-color: var(--color-surface-1);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 2.75rem;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.faq__summary::-webkit-details-marker { display: none; }

.faq__summary::after {
  content: "";
  inline-size: 0.625rem;
  block-size: 0.625rem;
  flex: none;
  border-inline-end: var(--border-thick) solid var(--color-accent);
  border-block-end: var(--border-thick) solid var(--color-accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-2) var(--ease-standard);
}

.faq__item[open] > .faq__summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.faq__body {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure);
}

.faq__body > * + * { margin-block-start: var(--space-3); }


/* ============================================================
   15. PROSE, LINKS, CODE, DIVIDER
   ============================================================ */

.link {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-1) var(--ease-standard),
              text-decoration-thickness var(--dur-1) var(--ease-standard);
}

.link:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

.link--quiet { color: var(--color-text-secondary); }
.link--quiet:hover { color: var(--color-text); }

.link .icon { transition: transform var(--dur-2) var(--ease-out); }
.link:hover .icon { transform: translateX(2px); }

.link--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.link--inline:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.prose {
  max-inline-size: var(--measure);
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}

.prose > * + * { margin-block-start: var(--space-4); }
.prose h2 { margin-block-start: var(--space-8); }
.prose h3 { margin-block-start: var(--space-7); }
.prose ul,
.prose ol { padding-inline-start: var(--space-5); }
.prose ::marker { color: var(--color-accent); }
.prose li + li { margin-block-start: var(--space-2); }
.prose a { color: var(--color-link); text-underline-offset: 0.18em; }
.prose strong { color: var(--color-text); }

.divider {
  border: 0;
  block-size: var(--border-hairline);
  background-color: var(--color-border);
  margin-block: var(--space-8);
}

.code-inline {
  font-family: var(--font-mono);
  font-size: 0.9375em;
  font-variant-ligatures: none;
  padding: 0.1em 0.35em;
  background-color: var(--color-surface-2);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}


/* ============================================================
   16. FORMS
   ============================================================ */

.form {
  display: grid;
  gap: var(--space-5);
  max-inline-size: var(--container-xs);
}

.form--wide { max-inline-size: none; }

.form__row { display: grid; gap: var(--space-4); }

@media (min-width: 560px) {
  .form__row--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field { display: grid; gap: var(--space-2); }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.field__required { color: var(--color-danger); margin-inline-start: 0.15em; }

.field__optional {
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.input {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--text-body);
  color: var(--color-text);
  background-color: var(--color-surface-1);
  border: var(--border-hairline) solid var(--color-border-control);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-1) var(--ease-standard),
              background-color var(--dur-1) var(--ease-standard);
}

.input:hover { border-color: var(--color-text-muted); }
.input:focus-visible { border-color: var(--color-accent); }

.input::placeholder { color: var(--color-text-muted); opacity: 1; }

.textarea {
  min-block-size: 8rem;
  resize: vertical;
  line-height: var(--leading-normal);
}

.field--invalid .input {
  border-color: var(--color-danger);
  border-width: var(--border-thick);
}

.field__hint {
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.field__error {
  display: inline-flex;
  align-items: start;
  gap: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-danger);
}

.field__error .icon {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  margin-block-start: 0.15em;
}

.field--checkbox {
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.checkbox {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0.25rem 0 0;
  accent-color: var(--color-accent);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

@media (max-width: 479px) {
  .form__actions .btn { inline-size: 100%; }
}

/* Live regions: present from first paint, render nothing until filled.
   display:none would drop them out of the accessibility tree until the
   moment their text arrives, which is exactly the injected-region case
   screen readers fail to announce. Hide them visually instead — absolute
   positioning also keeps them out of the .form grid, so no empty row. */
.form__status:empty,
.form__errors:empty {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
}

.form__status,
.form__errors {
  display: block;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--border-hairline) solid var(--color-border);
  border-inline-start: var(--border-heavy) solid var(--color-border-strong);
  font-size: var(--text-body);
}

.form__status {
  background-color: var(--color-success-subtle);
  border-inline-start-color: var(--color-success);
  color: var(--color-text);
}

.form__errors {
  background-color: var(--color-danger-subtle);
  border-inline-start-color: var(--color-danger);
  color: var(--color-text);
}

.form__errors a { color: var(--color-danger); }

.form__fallback {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-surface-2);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.form__fallback[hidden] { display: none; }

/* Honeypot: moved off-screen rather than display:none, which bots detect. */
.hp {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.noscript-note {
  display: block;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-warning-subtle);
  border: var(--border-hairline) solid var(--color-border);
  border-inline-start: var(--border-heavy) solid var(--color-warning);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
}


/* ============================================================
   17. SITE FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--color-surface-2);
  border-block-start: var(--border-hairline) solid var(--color-border);
  padding-block: var(--space-9) var(--space-6);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-7);
}

.site-footer__inner > * { min-inline-size: 0; }

.site-footer__heading {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.site-footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-inline-size: var(--measure-short);
  margin-block-start: var(--space-4);
}

.site-footer__tagline + .site-footer__tagline { margin-block-start: var(--space-2); }

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.site-footer__list a,
.site-footer__contact a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__contact a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-footer__contact > * + * { margin-block-start: var(--space-2); }

.site-footer__contact p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.site-footer__about p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-inline-size: var(--measure-short);
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: var(--border-hairline) solid var(--color-border);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.site-footer__legal { margin: 0; }

@media (min-width: 560px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    column-gap: var(--space-7);
  }
  .site-footer__brand { grid-column: auto; }
}


/* ============================================================
   18. MOTION — scroll reveal and reduced motion
   The hidden state is applied only when main.js adds .js-reveal to
   <html>, so with JS off (or IntersectionObserver missing) every
   revealable element is simply visible.
   ============================================================ */

.js-reveal [data-reveal] > * {
  opacity: 0;
  transform: translateY(12px);
}

.js-reveal [data-reveal].is-revealed > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-4) var(--ease-out),
              transform var(--dur-4) var(--ease-out);
}

.js-reveal [data-reveal].is-revealed > *:nth-child(2) { transition-delay: 50ms; }
.js-reveal [data-reveal].is-revealed > *:nth-child(3) { transition-delay: 100ms; }
.js-reveal [data-reveal].is-revealed > *:nth-child(4) { transition-delay: 150ms; }
.js-reveal [data-reveal].is-revealed > *:nth-child(5) { transition-delay: 200ms; }
.js-reveal [data-reveal].is-revealed > *:nth-child(n + 6) { transition-delay: 250ms; }

/* The one sanctioned use of !important in this codebase. */
@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;
  }

  [data-reveal] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ============================================================
   19. ADDENDA — added while building contact.html / 404.html
   Four rules. Two restate patterns the stylesheet already
   establishes (.field__error[hidden], svg[hidden]); two are new
   behaviour that main.js depends on ([data-copy], the notice state
   of .form__status). Each carries the section it belongs to, and
   each is appended rather than inserted so that concurrent page
   work cannot clobber the file.
   ============================================================ */

/* Belongs with §16 FORMS, beside .form__fallback[hidden].
   main.js toggles [hidden] on .field__error exactly as it does on
   .form__fallback. .field__error sets `display: inline-flex`, and an
   author declaration beats the browser's own [hidden] rule, so the
   hidden state has to be restated here — otherwise every field would
   show a permanent, empty alert icon. */
.field__error[hidden] { display: none; }

/* Belongs with §07 BUTTONS.
   The copy-to-clipboard button is a JavaScript enhancement: without
   main.js it is a control that cannot do anything. Same treatment as
   .nav-toggle and .theme-toggle — it is not rendered until main.js
   adds .js to <html>. The address it copies is always present beside
   it as selectable text, so nothing is lost when it is absent. */
[data-copy] { display: none; }
.js [data-copy] { display: inline-flex; }

/* Belongs with §16 FORMS, beside .form__status.
   .form__status is painted in the success colours because its usual
   content is "Thanks for submitting!". main.js also uses it to say
   the form is not connected and to hand back a mailto — a message
   that delivered nothing and must not look like a success. That case
   sets data-state="notice" and is repainted informational here. */
.form__status[data-state="notice"] {
  background-color: var(--color-info-subtle);
  border-inline-start-color: var(--color-accent);
}

/* Belongs with §03 RESET.
   The browser's own `[hidden] { display: none }` rule lives in the HTML
   namespace, so it never matches an inline <svg>. Without this, every
   icon carrying the `hidden` attribute — the nav-toggle's close icon and
   two of the three theme-toggle icons — renders anyway, and the header
   shows both a menu and a close glyph at once. main.js pairs this with
   setHidden(), which toggles the attribute rather than the (non-existent)
   `hidden` property on SVG elements. */
svg[hidden] { display: none; }