/* ===== 01-tokens.css ===== */
/* =============================================================================
   CAPYBARI — DESIGN TOKENS
   The single source of truth for colour, type, space, radius, shadow, motion.
   Nothing downstream may hard-code a value that exists here.
   ============================================================================= */

/* ---------- Fonts (self-hosted, no third-party requests) ------------------- */

@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
}

:root {
  /* ---------- Brand palette -----------------------------------------------
     Reed  — the river. Calm, primary, interactive.
     Clay  — capybara fur. Warm, accent, used sparingly and never for links.
     Silt  — warm-tinted neutral ramp. Never a blue-grey; the warmth is brand.
     ---------------------------------------------------------------------- */

  --reed-50:  #eafbf5;
  --reed-100: #cff5e8;
  --reed-200: #a2ebd3;
  --reed-300: #6bdab8;
  --reed-400: #35c09a;
  --reed-500: #12a280;
  --reed-600: #0b8168;
  --reed-700: #0c6653;
  --reed-800: #0e5244;
  --reed-900: #0e4339;
  --reed-950: #04261f;

  --clay-50:  #fdf5ec;
  --clay-100: #fae7d0;
  --clay-200: #f4cba0;
  --clay-300: #edaa6b;
  --clay-400: #e68c43;
  --clay-500: #d97328;
  --clay-600: #bc591d;
  --clay-700: #9c441b;
  --clay-800: #7e381c;
  --clay-900: #672f1a;
  --clay-950: #38160b;

  --silt-0:    #ffffff;
  --silt-25:   #fbfaf9;
  --silt-50:   #f7f6f4;
  --silt-100:  #f0eeeb;
  --silt-200:  #e3e0db;
  --silt-300:  #cfcac3;
  --silt-400:  #a9a29a;
  --silt-500:  #837c74;
  --silt-600:  #665f58;
  --silt-700:  #4c4640;
  --silt-800:  #34302b;
  --silt-850:  #26231f;
  --silt-900:  #1b1916;
  --silt-950:  #121110;
  --silt-1000: #0a0908;

  /* ---------- Semantic status --------------------------------------------- */
  --status-success: #0b8168;
  --status-success-bg: #e6f7f1;
  --status-warning: #a86e10;
  --status-warning-bg: #fdf3e0;
  --status-danger: #c23c2f;
  --status-danger-bg: #fdeceb;
  --status-info: #2f6fae;
  --status-info-bg: #ebf3fb;

  /* ---------- Type ---------------------------------------------------------
     Inter v4 variable. The opsz axis is driven per-role: display sizes get
     optical size 32 (tighter apertures, less spacing), body gets 16.
     ---------------------------------------------------------------------- */

  --font-sans: 'InterVariable', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
               'Liberation Mono', monospace;

  /* Fluid scale. Min = 360px viewport, max = 1440px viewport. */
  --text-display-1: clamp(2.625rem, 1.35rem + 5.31vw, 5rem);
  --text-display-2: clamp(2.25rem, 1.42rem + 3.44vw, 3.75rem);
  --text-h1:        clamp(2rem, 1.43rem + 2.36vw, 3.0625rem);
  --text-h2:        clamp(1.625rem, 1.24rem + 1.6vw, 2.375rem);
  --text-h3:        clamp(1.375rem, 1.16rem + 0.9vw, 1.75rem);
  --text-h4:        clamp(1.1875rem, 1.08rem + 0.45vw, 1.375rem);
  --text-h5:        1.0625rem;
  --text-lead:      clamp(1.0625rem, 0.99rem + 0.31vw, 1.25rem);
  --text-body:      1rem;
  --text-sm:        0.9375rem;
  --text-xs:        0.8125rem;
  --text-2xs:       0.75rem;
  --text-eyebrow:   0.75rem;

  --leading-tight:   1.06;
  --leading-snug:    1.18;
  --leading-heading: 1.28;
  --leading-normal:  1.6;
  --leading-relaxed: 1.72;

  --tracking-display: -0.032em;
  --tracking-heading: -0.021em;
  --tracking-normal:  -0.011em;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.09em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 590;
  --weight-bold:     680;

  /* ---------- Space — 4px base ------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Vertical rhythm between page sections — the single most important
     spacing decision on the site. Generous, and fluid so it does not
     swallow small screens. */
  --section-y: clamp(4rem, 2.5rem + 6.2vw, 8rem);
  --section-y-tight: clamp(3rem, 2rem + 4.2vw, 5.5rem);

  /* ---------- Layout ------------------------------------------------------ */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 800px;
  --container-prose: 720px;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --header-h: 68px;

  /* ---------- Radius ------------------------------------------------------ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-3xl:  36px;
  --radius-full: 999px;

  /* ---------- Motion ------------------------------------------------------
     Two curves only. `out` for things entering or responding to the user,
     `spring` for anything that should feel physical. Durations are short —
     the brand is calm, not sleepy. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   380ms;
  --dur-slower: 640ms;

  --z-base: 1;
  --z-sticky: 40;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;
}

/* =============================================================================
   LIGHT THEME (default)
   ============================================================================= */

:root,
:root[data-theme='light'] {
  color-scheme: light;

  --bg:            var(--silt-0);
  --bg-subtle:     var(--silt-50);
  --bg-muted:      var(--silt-100);
  --bg-inset:      var(--silt-25);
  --bg-inverse:    var(--silt-950);
  --bg-elevated:   var(--silt-0);

  --fg:            var(--silt-950);
  --fg-secondary:  var(--silt-700);
  --fg-muted:      var(--silt-500);
  --fg-subtle:     var(--silt-400);
  --fg-inverse:    var(--silt-0);
  --fg-on-accent:  #ffffff;

  --border:        var(--silt-200);
  --border-strong: var(--silt-300);
  --border-subtle: var(--silt-100);

  --accent:        var(--reed-600);
  --accent-hover:  var(--reed-700);
  --accent-active: var(--reed-800);
  --accent-fg:     var(--reed-700);
  --accent-subtle: var(--reed-50);
  --accent-border: var(--reed-200);

  --warm:          var(--clay-600);
  --warm-subtle:   var(--clay-50);
  --warm-border:   var(--clay-200);

  --focus-ring: var(--reed-600);

  /* Layered, warm-tinted shadows. Never pure black — it reads as dirt on a
     warm neutral background. */
  --shadow-xs: 0 1px 2px rgba(28, 24, 20, 0.05);
  --shadow-sm: 0 1px 2px rgba(28, 24, 20, 0.05), 0 2px 4px rgba(28, 24, 20, 0.04);
  --shadow-md: 0 2px 4px rgba(28, 24, 20, 0.04), 0 6px 12px rgba(28, 24, 20, 0.06);
  --shadow-lg: 0 4px 8px rgba(28, 24, 20, 0.04), 0 12px 28px rgba(28, 24, 20, 0.08);
  --shadow-xl: 0 8px 16px rgba(28, 24, 20, 0.05), 0 24px 56px rgba(28, 24, 20, 0.11);
  --shadow-2xl: 0 12px 24px rgba(28, 24, 20, 0.06), 0 40px 90px rgba(28, 24, 20, 0.14);
  --shadow-accent: 0 4px 14px rgba(11, 129, 104, 0.24);

  /* Ambient brand washes used behind heroes and feature sections. */
  --wash-hero:
    radial-gradient(880px 500px at 12% -6%, rgba(18, 162, 128, 0.13), transparent 62%),
    radial-gradient(720px 460px at 92% 4%, rgba(217, 115, 40, 0.10), transparent 60%);
  --wash-soft:
    radial-gradient(700px 380px at 78% 0%, rgba(18, 162, 128, 0.075), transparent 64%);
  --grid-line: rgba(28, 24, 20, 0.055);
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(28, 24, 20, 0.08);
}

/* =============================================================================
   DARK THEME — a first-class citizen, not an inversion.
   Backgrounds keep the warm tint; the accent is lifted for contrast on dark.
   ============================================================================= */

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg:            var(--silt-950);
  --bg-subtle:     var(--silt-900);
  --bg-muted:      var(--silt-850);
  --bg-inset:      var(--silt-1000);
  --bg-inverse:    var(--silt-50);
  --bg-elevated:   #171512;

  --fg:            #f6f4f1;
  --fg-secondary:  #c4bdb4;
  --fg-muted:      #968f86;
  --fg-subtle:     #6f6961;
  --fg-inverse:    var(--silt-950);
  --fg-on-accent:  #04261f;

  --border:        #302b26;
  --border-strong: #423c35;
  --border-subtle: #232019;

  --accent:        var(--reed-400);
  --accent-hover:  var(--reed-300);
  --accent-active: var(--reed-200);
  --accent-fg:     var(--reed-300);
  --accent-subtle: rgba(53, 192, 154, 0.12);
  --accent-border: rgba(53, 192, 154, 0.28);

  --warm:          var(--clay-300);
  --warm-subtle:   rgba(237, 170, 107, 0.11);
  --warm-border:   rgba(237, 170, 107, 0.26);

  --focus-ring: var(--reed-300);

  --status-success: #4fd0aa;
  --status-success-bg: rgba(53, 192, 154, 0.14);
  --status-warning: #e5b45c;
  --status-warning-bg: rgba(229, 180, 92, 0.14);
  --status-danger: #f08477;
  --status-danger-bg: rgba(240, 132, 119, 0.14);
  --status-info: #77aade;
  --status-info-bg: rgba(119, 170, 222, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 6px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.4), 0 14px 32px rgba(0, 0, 0, 0.46);
  --shadow-xl: 0 8px 18px rgba(0, 0, 0, 0.45), 0 28px 64px rgba(0, 0, 0, 0.55);
  --shadow-2xl: 0 14px 28px rgba(0, 0, 0, 0.5), 0 44px 100px rgba(0, 0, 0, 0.62);
  --shadow-accent: 0 4px 18px rgba(53, 192, 154, 0.24);

  --wash-hero:
    radial-gradient(880px 500px at 12% -6%, rgba(18, 162, 128, 0.20), transparent 62%),
    radial-gradient(720px 460px at 92% 4%, rgba(217, 115, 40, 0.13), transparent 60%);
  --wash-soft:
    radial-gradient(700px 380px at 78% 0%, rgba(18, 162, 128, 0.11), transparent 64%);
  --grid-line: rgba(255, 255, 255, 0.045);
  --glass-bg: rgba(18, 17, 16, 0.74);
  --glass-border: rgba(255, 255, 255, 0.08);
}

/* Honour the OS preference when the visitor has not chosen explicitly.
   `data-theme` is stamped on <html> by the inline theme script, so an explicit
   choice always wins over this block. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: var(--silt-950);
    --bg-subtle: var(--silt-900);
    --bg-muted: var(--silt-850);
    --bg-inset: var(--silt-1000);
    --bg-inverse: var(--silt-50);
    --bg-elevated: #171512;

    --fg: #f6f4f1;
    --fg-secondary: #c4bdb4;
    --fg-muted: #968f86;
    --fg-subtle: #6f6961;
    --fg-inverse: var(--silt-950);
    --fg-on-accent: #04261f;

    --border: #302b26;
    --border-strong: #423c35;
    --border-subtle: #232019;

    --accent: var(--reed-400);
    --accent-hover: var(--reed-300);
    --accent-active: var(--reed-200);
    --accent-fg: var(--reed-300);
    --accent-subtle: rgba(53, 192, 154, 0.12);
    --accent-border: rgba(53, 192, 154, 0.28);

    --warm: var(--clay-300);
    --warm-subtle: rgba(237, 170, 107, 0.11);
    --warm-border: rgba(237, 170, 107, 0.26);

    --focus-ring: var(--reed-300);

    --status-success: #4fd0aa;
    --status-success-bg: rgba(53, 192, 154, 0.14);
    --status-warning: #e5b45c;
    --status-warning-bg: rgba(229, 180, 92, 0.14);
    --status-danger: #f08477;
    --status-danger-bg: rgba(240, 132, 119, 0.14);
    --status-info: #77aade;
    --status-info-bg: rgba(119, 170, 222, 0.14);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 6px 14px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.4), 0 14px 32px rgba(0, 0, 0, 0.46);
    --shadow-xl: 0 8px 18px rgba(0, 0, 0, 0.45), 0 28px 64px rgba(0, 0, 0, 0.55);
    --shadow-2xl: 0 14px 28px rgba(0, 0, 0, 0.5), 0 44px 100px rgba(0, 0, 0, 0.62);
    --shadow-accent: 0 4px 18px rgba(53, 192, 154, 0.24);

    --wash-hero:
      radial-gradient(880px 500px at 12% -6%, rgba(18, 162, 128, 0.20), transparent 62%),
      radial-gradient(720px 460px at 92% 4%, rgba(217, 115, 40, 0.13), transparent 60%);
    --wash-soft:
      radial-gradient(700px 380px at 78% 0%, rgba(18, 162, 128, 0.11), transparent 64%);
    --grid-line: rgba(255, 255, 255, 0.045);
    --glass-bg: rgba(18, 17, 16, 0.74);
    --glass-border: rgba(255, 255, 255, 0.08);
  }
}

/* ===== 02-base.css ===== */
/* =============================================================================
   CAPYBARI — RESET & BASE
   ============================================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
}

@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;
  }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  font-variation-settings: 'opsz' 16;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'cv11' 1, 'ss03' 1;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

svg { flex-shrink: 0; }

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

button { background: none; border: none; cursor: pointer; }

p,
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[role='list'],
ol[role='list'] { list-style: none; padding: 0; }

/* ---------- Headings ------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  color: var(--fg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); line-height: var(--leading-snug); letter-spacing: var(--tracking-display); font-variation-settings: 'opsz' 32; }
h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-display); font-variation-settings: 'opsz' 28; }
h3 { font-size: var(--text-h3); font-variation-settings: 'opsz' 22; }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-sm); }

/* ---------- Links --------------------------------------------------------- */

a {
  color: var(--accent-fg);
  text-decoration-color: color-mix(in srgb, var(--accent-fg) 34%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

/* ---------- Focus ---------------------------------------------------------
   One focus treatment, everywhere, visible in both themes and on top of
   every background we use. Never removed — only replaced. */

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

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

::selection {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--fg);
}

/* ---------- Code ---------------------------------------------------------- */

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-feature-settings: 'liga' 0;
}

:not(pre) > code {
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 0.14em 0.38em;
  font-size: 0.86em;
  color: var(--fg-secondary);
  white-space: nowrap;
}

kbd {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
  font-size: 0.8em;
  box-shadow: var(--shadow-xs);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-12) 0;
}

/* ---------- Accessibility helpers ----------------------------------------- */

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

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-toast);
  transform: translateY(-160%);
  background: var(--accent);
  color: var(--fg-on-accent);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus { transform: translateY(0); color: var(--fg-on-accent); }

/* ---------- Layout primitives --------------------------------------------- */

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

.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.container--prose  { max-width: var(--container-prose); }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--subtle { background: var(--bg-subtle); }
.section--inset  { background: var(--bg-inset); }

/* A hairline that reads as structure rather than decoration. */
.section--bordered { border-top: 1px solid var(--border-subtle); }

.stack > * + * { margin-top: var(--space-4); }

main { display: block; }

/* ===== 03-components.css ===== */
/* =============================================================================
   CAPYBARI — COMPONENT LIBRARY
   Every visual element on the site is one of these. Pages compose; they do not
   invent. If a page needs something new, it becomes a component here first.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. BUTTONS
   Three variants (primary / secondary / ghost) × three sizes.
   The primary button is the only place a solid accent fill is allowed on a
   light background, which is what makes it read as *the* action.
   -------------------------------------------------------------------------- */

.btn {
  --btn-py: 0.6875rem;
  --btn-px: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.006em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }
.btn[aria-disabled='true'],
.btn:disabled { opacity: 0.5; pointer-events: none; }

.btn .btn__icon { width: 1em; height: 1em; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__icon--arrow { transform: translateX(2px); }

.btn--primary {
  background: var(--accent);
  color: var(--fg-on-accent);
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover { background: var(--accent-hover); color: var(--fg-on-accent); }
.btn--primary:active { background: var(--accent-active); }

.btn--secondary {
  background: var(--bg-elevated);
  color: var(--fg);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn--secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--fg-subtle);
  color: var(--fg);
}

.btn--ghost { background: transparent; color: var(--fg-secondary); }
.btn--ghost:hover { background: var(--bg-muted); color: var(--fg); }

.btn--inverse {
  background: var(--bg);
  color: var(--fg);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.btn--inverse:hover { background: var(--bg-subtle); color: var(--fg); }

.btn--outline-inverse {
  background: transparent;
  color: var(--fg);
  border-color: color-mix(in srgb, var(--fg) 26%, transparent);
}
.btn--outline-inverse:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border-color: color-mix(in srgb, var(--fg) 42%, transparent);
  color: var(--fg);
}

.btn--sm { --btn-py: 0.4375rem; --btn-px: 0.8125rem; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn--lg { --btn-py: 0.875rem; --btn-px: 1.5rem; font-size: var(--text-body); border-radius: var(--radius-lg); }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* Text link that behaves like a CTA without the weight of a button. */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--accent-fg);
  text-decoration: none;
}
.link-cta svg { width: 1em; height: 1em; transition: transform var(--dur-base) var(--ease-out); }
.link-cta:hover svg { transform: translateX(3px); }

/* -----------------------------------------------------------------------------
   2. SECTION HEADERS & EYEBROWS
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-fg);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.eyebrow--plain::before { display: none; }
.eyebrow--warm { color: var(--warm); }

.section-head { max-width: 46rem; margin-bottom: var(--space-14); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.section-head h2,
.section-head h1 { margin-bottom: var(--space-5); }

.section-head p {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
   3. BADGES & PILLS
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  background: var(--bg-muted);
  color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.badge--accent  { background: var(--accent-subtle); color: var(--accent-fg); border-color: var(--accent-border); }
.badge--warm    { background: var(--warm-subtle); color: var(--warm); border-color: var(--warm-border); }
.badge--success { background: var(--status-success-bg); color: var(--status-success); border-color: transparent; }
.badge--warning { background: var(--status-warning-bg); color: var(--status-warning); border-color: transparent; }
.badge--danger  { background: var(--status-danger-bg); color: var(--status-danger); border-color: transparent; }
.badge--info    { background: var(--status-info-bg); color: var(--status-info); border-color: transparent; }

.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* A live-status dot with a calm pulse. Used on the status page + header. */
.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--status-success); flex-shrink: 0; }
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse-ring 2.6s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Announcement pill that sits above a hero headline. */
.announce {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.announce:hover { border-color: var(--accent-border); box-shadow: var(--shadow-md); transform: translateY(-1px); color: var(--fg-secondary); }
.announce__tag {
  background: var(--accent-subtle);
  color: var(--accent-fg);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}
.announce__arrow { width: 14px; height: 14px; margin-right: var(--space-2); opacity: 0.55; transition: transform var(--dur-base) var(--ease-out); }
.announce:hover .announce__arrow { transform: translateX(3px); opacity: 1; }

/* -----------------------------------------------------------------------------
   4. CARDS
   One card shell, several skins. The hairline border does the work; shadow is
   reserved for elevation that means something (hover, modal, floating mockup).
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.card--interactive { text-decoration: none; color: inherit; }
.card--interactive:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  color: inherit;
}

.card--flush { background: transparent; border-color: transparent; padding: 0; }
.card--subtle { background: var(--bg-subtle); }
.card--pad-lg { padding: var(--space-10); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--accent-subtle);
  color: var(--accent-fg);
  margin-bottom: var(--space-5);
}
.card__icon svg { width: 21px; height: 21px; }
.card__icon--warm { background: var(--warm-subtle); color: var(--warm); }

.card__title {
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-2);
}

.card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.card__footer { margin-top: auto; padding-top: var(--space-5); }

/* Full-card click target without nesting interactive elements. */
.card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

/* -----------------------------------------------------------------------------
   5. GRIDS
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-lg { gap: var(--space-8); }

@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* -----------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

.site-header[data-scrolled='true'] { border-bottom-color: var(--glass-border); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--fg);
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  letter-spacing: -0.022em;
  flex-shrink: 0;
}
.brand:hover { color: var(--fg); }
.brand__mark { width: 30px; height: 30px; }
.brand__mark svg { width: 100%; height: 100%; }

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

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--fg); background: var(--bg-muted); }
.nav__link[aria-current='page'] { color: var(--fg); }
.nav__chevron { width: 12px; height: 12px; opacity: 0.5; transition: transform var(--dur-base) var(--ease-out); }

.nav__item { position: relative; }
.nav__item[data-open='true'] .nav__chevron { transform: rotate(180deg); }
.nav__item[data-open='true'] > .nav__link { color: var(--fg); background: var(--bg-muted); }

/* Mega-menu panel */
.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 540px;
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}

.nav__item[data-open='true'] .nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }

.nav__panel-link {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav__panel-link:hover { background: var(--bg-subtle); color: inherit; }

.nav__panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent-fg);
}
.nav__panel-icon svg { width: 16px; height: 16px; }

.nav__panel-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: 2px; }
.nav__panel-desc { font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.45; }

.nav__panel-footer {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--fg); background: var(--bg-muted); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle__moon { display: none; }
:root[data-theme='dark'] .theme-toggle__sun { display: none; }
:root[data-theme='dark'] .theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle__sun { display: none; }
  :root:not([data-theme]) .theme-toggle__moon { display: block; }
}

.nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); color: var(--fg); }
.nav-toggle svg { width: 20px; height: 20px; }

/* Mobile navigation */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-overlay);
  background: var(--bg);
  overflow-y: auto;
  padding: var(--space-6) var(--gutter) var(--space-16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.mobile-nav[data-open='true'] { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav__group { border-bottom: 1px solid var(--border-subtle); padding-block: var(--space-2); }
.mobile-nav__summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0;
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}
.mobile-nav__summary::-webkit-details-marker { display: none; }
.mobile-nav__summary svg { width: 16px; height: 16px; color: var(--fg-muted); transition: transform var(--dur-base) var(--ease-out); }
.mobile-nav__group[open] .mobile-nav__summary svg { transform: rotate(180deg); }
.mobile-nav__links { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) 0 var(--space-4); }
.mobile-nav__links a { padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--fg-secondary); text-decoration: none; }
.mobile-nav__links a:hover { color: var(--accent-fg); }
.mobile-nav__cta { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); }

@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header__actions .btn--secondary { display: none; }
}
@media (max-width: 560px) {
  .header__actions .btn--primary { display: none; }
  /* "Sign in" is the first item in the mobile menu, so losing it from the bar
     costs nothing and buys back the width the brand lockup needs. */
  .header__actions .btn--ghost { display: none; }
  .site-header__inner { gap: var(--space-4); }
  .header__actions { gap: var(--space-1); }
}

/* -----------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-20) var(--space-10);
  margin-top: var(--space-0);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(240px, 1.15fr) 3fr;
  gap: var(--space-16);
  padding-bottom: var(--space-14);
}

.footer__brand-block { max-width: 26rem; }
.footer__tagline { font-size: var(--text-sm); color: var(--fg-secondary); line-height: var(--leading-relaxed); margin-top: var(--space-4); }

.footer__nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8); }

.footer__col h2 {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-4);
}

.footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer__col a {
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--accent-fg); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer__legal-links a { color: var(--fg-muted); text-decoration: none; }
.footer__legal-links a:hover { color: var(--fg-secondary); }

.footer__social { display: flex; gap: var(--space-2); }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.footer__social a:hover { color: var(--fg); background: var(--bg-muted); }
.footer__social svg { width: 17px; height: 17px; }

.footer__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
}
.footer__status:hover { color: var(--fg); border-color: var(--border-strong); }

@media (max-width: 1000px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
}
@media (max-width: 560px) {
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* -----------------------------------------------------------------------------
   8. FORMS
   -------------------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: var(--space-5); }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 620px) { .field--row { grid-template-columns: minmax(0, 1fr); } }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.field__optional { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--fg-muted); }
.field__hint { font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.5; }
.field__error { font-size: var(--text-xs); color: var(--status-danger); display: none; }
.field[data-invalid='true'] .field__error { display: block; }
.field[data-invalid='true'] .input,
.field[data-invalid='true'] .select,
.field[data-invalid='true'] .textarea { border-color: var(--status-danger); }

.input, .select, .textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--fg);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.input::placeholder, .textarea::placeholder { color: var(--fg-subtle); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

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

.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23837c74' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 15px;
  cursor: pointer;
}

.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--fg-secondary); cursor: pointer; }
.checkbox input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }

.form__footnote { font-size: var(--text-xs); color: var(--fg-muted); line-height: var(--leading-relaxed); }

/* Honeypot — must be reachable by nothing and nobody. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  display: none;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.form__status[data-state='success'] { display: block; background: var(--status-success-bg); color: var(--status-success); }
.form__status[data-state='error']   { display: block; background: var(--status-danger-bg); color: var(--status-danger); }

.newsletter-form { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.newsletter-form .input { flex: 1 1 16rem; }

/* -----------------------------------------------------------------------------
   9. TABLES
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-elevated); }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 640px; }

.table th, .table td { padding: var(--space-4) var(--space-5); text-align: left; vertical-align: top; }

.table thead th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table tbody tr + tr { border-top: 1px solid var(--border-subtle); }
.table tbody tr:hover { background: var(--bg-subtle); }
.table td { color: var(--fg-secondary); line-height: var(--leading-normal); }
.table th[scope='row'] { font-weight: var(--weight-medium); color: var(--fg); }

.table__check { color: var(--status-success); }
.table__dash { color: var(--fg-subtle); }
.table__group-row th {
  background: var(--bg-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-secondary);
  font-weight: var(--weight-semibold);
}
.table--compare td { text-align: center; }
.table--compare th[scope='row'] { text-align: left; }
.table--compare thead th { text-align: center; }
.table--compare thead th:first-child { text-align: left; }

/* -----------------------------------------------------------------------------
   10. ACCORDION / FAQ
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--border); }

.accordion__item { border-bottom: 1px solid var(--border); }

.accordion__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--fg);
  transition: color var(--dur-fast) var(--ease-out);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:hover { color: var(--accent-fg); }

.accordion__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
  color: var(--fg-muted);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.accordion__item[open] .accordion__icon { transform: rotate(45deg); color: var(--accent-fg); }

.accordion__body {
  padding-bottom: var(--space-6);
  padding-right: var(--space-10);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  max-width: 60ch;
}
.accordion__body p + p { margin-top: var(--space-4); }
.accordion__item[open] .accordion__body { animation: accordion-in var(--dur-slow) var(--ease-out); }
@keyframes accordion-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* -----------------------------------------------------------------------------
   11. CODE BLOCKS
   -------------------------------------------------------------------------- */

.code-block {
  background: var(--silt-1000);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: var(--text-xs);
}
:root[data-theme='dark'] .code-block { background: #0d0c0b; }

.code-block__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.code-block__dots { display: flex; gap: 6px; }
.code-block__dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.code-block__name { font-family: var(--font-mono); font-size: var(--text-2xs); color: rgba(255, 255, 255, 0.5); }

.code-block pre {
  margin: 0;
  padding: var(--space-5);
  overflow-x: auto;
  line-height: 1.7;
  color: #d9d4cd;
  tab-size: 2;
}
.code-block code { background: none; border: none; padding: 0; white-space: pre; color: inherit; font-size: inherit; }

.tok-key { color: #6bdab8; }
.tok-str { color: #edaa6b; }
.tok-num { color: #a2ebd3; }
.tok-com { color: #6f6961; font-style: italic; }
.tok-fn  { color: #77aade; }
.tok-punc { color: #968f86; }

/* -----------------------------------------------------------------------------
   12. PROSE — long-form body copy (legal, docs, blog, help articles)
   -------------------------------------------------------------------------- */

.prose { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--fg-secondary); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--text-h3); color: var(--fg); margin-top: var(--space-14); }
.prose h3 { font-size: var(--text-h4); color: var(--fg); margin-top: var(--space-10); }
.prose h4 { font-size: var(--text-h5); color: var(--fg); margin-top: var(--space-8); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.prose li { padding-left: var(--space-1); }
.prose li::marker { color: var(--fg-subtle); }
.prose strong { color: var(--fg); font-weight: var(--weight-semibold); }
.prose blockquote {
  border-left: 2px solid var(--accent-border);
  padding-left: var(--space-5);
  color: var(--fg-secondary);
  font-style: normal;
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border-subtle); }
.prose th { color: var(--fg); font-weight: var(--weight-semibold); }
.prose .code-block { margin-block: var(--space-6); }

/* Fenced code from Markdown has no wrapper element to hang a scroller on, so
   the <pre> has to be the scroll container itself. Without this a long command
   drags the whole page sideways on a phone. */
.prose pre {
  margin-block: var(--space-6);
  padding: var(--space-5);
  background: var(--silt-1000);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  max-width: 100%;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: #d9d4cd;
  tab-size: 2;
}
:root[data-theme='dark'] .prose pre { background: #0d0c0b; }
.prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}

/* Markdown tables have no wrapper either. Making the table itself the scroller
   is the only pure-CSS fix that keeps the page from moving. */
.prose table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.prose table th, .prose table td { white-space: nowrap; }

/* Long unbroken strings — URLs, tokens, file paths — must not push the page. */
.prose { overflow-wrap: break-word; }
.prose :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
.prose hr { margin-block: var(--space-10); }

/* -----------------------------------------------------------------------------
   13. CALLOUTS
   -------------------------------------------------------------------------- */

.callout {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}
.callout__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--fg-muted); }
.callout__title { font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: var(--space-1); }
.callout--accent  { background: var(--accent-subtle); border-color: var(--accent-border); }
.callout--accent .callout__icon { color: var(--accent-fg); }
.callout--warning { background: var(--status-warning-bg); border-color: transparent; }
.callout--warning .callout__icon { color: var(--status-warning); }
.callout--danger  { background: var(--status-danger-bg); border-color: transparent; }
.callout--danger .callout__icon { color: var(--status-danger); }

/* -----------------------------------------------------------------------------
   14. AVATARS & TESTIMONIALS
   -------------------------------------------------------------------------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
  overflow: hidden;
  letter-spacing: 0;
}
.avatar--lg { width: 52px; height: 52px; font-size: var(--text-sm); }

.quote-card { display: flex; flex-direction: column; gap: var(--space-6); height: 100%; }
.quote-card__text { font-size: var(--text-lead); line-height: var(--leading-relaxed); color: var(--fg); letter-spacing: var(--tracking-normal); text-wrap: pretty; }
.quote-card__text::before { content: '\201C'; }
.quote-card__text::after { content: '\201D'; }
.quote-card__author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.quote-card__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg); }
.quote-card__role { font-size: var(--text-xs); color: var(--fg-muted); }

/* -----------------------------------------------------------------------------
   15. STATS
   -------------------------------------------------------------------------- */

.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat__value {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--fg);
  font-variation-settings: 'opsz' 32;
}
.stat__value em { font-style: normal; color: var(--accent-fg); }
.stat__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg); }
.stat__note { font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.5; }

/* -----------------------------------------------------------------------------
   16. TABS (scoped, progressive-enhancement friendly)
   -------------------------------------------------------------------------- */

.tabs__list {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--bg-muted);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }

.tabs__tab {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected='true'] {
  background: var(--bg-elevated);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}

.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: fade-in var(--dur-slow) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ===== 04-sections.css ===== */
/* =============================================================================
   CAPYBARI — SECTION LAYOUTS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(3rem, 2rem + 3vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto;
  height: 140%;
  background: var(--wash-hero);
  z-index: -2;
  pointer-events: none;
}

/* A faint engineering grid. It reads as graph paper, not as a pattern. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 62% at 50% 0%, #000 20%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 90% 62% at 50% 0%, #000 20%, transparent 76%);
  z-index: -1;
  pointer-events: none;
}

.hero__inner { position: relative; }

.hero--center { text-align: center; }
.hero--center .hero__copy { max-width: 52rem; margin-inline: auto; }
.hero--center .btn-row { justify-content: center; }
.hero--center .hero__meta { justify-content: center; }

.hero--split .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
}

.hero__title {
  font-size: var(--text-display-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-variation-settings: 'opsz' 32;
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

.hero--home .hero__title { font-size: var(--text-display-1); }

/* The accent word in a headline. A gradient, but a restrained one — it must
   still read as text, never as decoration. */
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--reed-600) 0%, var(--reed-500) 52%, var(--clay-500) 128%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme='dark'] .hero__title em {
  background: linear-gradient(100deg, var(--reed-300) 0%, var(--reed-200) 54%, var(--clay-200) 128%);
  -webkit-background-clip: text;
  background-clip: text;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .hero__title em {
    background: linear-gradient(100deg, var(--reed-300) 0%, var(--reed-200) 54%, var(--clay-200) 128%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.hero__lead {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  max-width: 40rem;
  margin-bottom: var(--space-8);
  text-wrap: pretty;
}

.hero--center .hero__lead { margin-inline: auto; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.hero__meta-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__meta-item svg { width: 14px; height: 14px; color: var(--status-success); }

.hero__visual { position: relative; min-width: 0; }

@media (max-width: 940px) {
  .hero--split .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero--split { text-align: left; }
}

/* Page hero for interior pages — smaller, no product visual. */
.page-hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: -40% 0 auto;
  height: 150%;
  background: var(--wash-soft);
  z-index: -1;
  pointer-events: none;
}
.page-hero__inner { max-width: 48rem; }
.page-hero--center .page-hero__inner { margin-inline: auto; text-align: center; }
.page-hero--center .eyebrow { justify-content: center; }
.page-hero--center .btn-row { justify-content: center; }
.page-hero__title { font-size: var(--text-h1); margin-bottom: var(--space-5); }
.page-hero__lead {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}
.page-hero .btn-row { margin-top: var(--space-8); }

/* The page hero already supplies generous space below itself; a full
   --section-y on top of it reads as a hole rather than as rhythm. */
.page-hero + .section { padding-top: var(--section-y-tight); }

/* -----------------------------------------------------------------------------
   LOGO WALL
   -------------------------------------------------------------------------- */

.logos { padding-block: var(--space-10) var(--space-8); }
.logos__label {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  margin-bottom: var(--space-8);
  letter-spacing: var(--tracking-wide);
}
.logos__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
.logos__item {
  height: 26px;
  display: flex;
  align-items: center;
  color: var(--fg-muted);
  opacity: 0.8;
  transition: opacity var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.logos__item:hover { opacity: 1; color: var(--fg-secondary); }
.logos__item svg { height: 100%; width: auto; }

/* -----------------------------------------------------------------------------
   STATS BAR
   -------------------------------------------------------------------------- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}
.stats-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .stats-grid, .stats-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } }
@media (max-width: 460px) { .stats-grid, .stats-grid--3 { grid-template-columns: minmax(0, 1fr); } }

.stats-panel {
  padding: var(--space-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--bg-subtle);
}
@media (max-width: 640px) { .stats-panel { padding: var(--space-8); } }

/* -----------------------------------------------------------------------------
   FEATURE SPLIT — alternating text/visual rows
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items: center;
}

.split + .split { margin-top: var(--section-y); }
.split--reverse .split__copy { order: 2; }
.split--reverse .split__visual { order: 1; }

.split__copy { max-width: 34rem; min-width: 0; }
.split__title { font-size: var(--text-h2); margin-bottom: var(--space-5); }
.split__lead {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  margin-bottom: var(--space-7);
  text-wrap: pretty;
}

.split__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.split__visual { min-width: 0; }
.split__list li { display: flex; gap: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--fg-secondary); }
.split__list svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.split__list strong { color: var(--fg); font-weight: var(--weight-semibold); }

.split__cta { margin-top: var(--space-8); }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .split--reverse .split__copy { order: 1; }
  .split--reverse .split__visual { order: 2; }
}

/* -----------------------------------------------------------------------------
   STEPS / WORKFLOW
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: var(--space-6); grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.step { position: relative; padding-top: var(--space-8); }

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--accent-fg);
  letter-spacing: 0.06em;
}

/* The connecting rule between steps — structure made visible. */
.step::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 2.5rem;
  right: calc(-1 * var(--space-6));
  height: 1px;
  background: linear-gradient(to right, var(--border-strong), var(--border-subtle));
}
.step:last-child::after { display: none; }

.step__title { font-size: var(--text-h5); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); letter-spacing: var(--tracking-heading); }
.step__body { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--fg-secondary); text-wrap: pretty; }

@media (max-width: 1000px) {
  .steps, .steps--3, .steps--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .step::after { display: none; }
}
@media (max-width: 560px) {
  .steps, .steps--3, .steps--5 { grid-template-columns: minmax(0, 1fr); }
}

/* Vertical variant used on the Platform page. */
.steps-vertical { display: flex; flex-direction: column; counter-reset: vstep; }
.steps-vertical__item {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-10);
}
.steps-vertical__item:last-child { padding-bottom: 0; }
.steps-vertical__marker {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.steps-vertical__num {
  counter-increment: vstep;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent-fg);
  z-index: 1;
}
.steps-vertical__num::before { content: counter(vstep); }
.steps-vertical__item:not(:last-child) .steps-vertical__marker::after {
  content: '';
  position: absolute;
  top: 2.25rem;
  bottom: calc(-1 * var(--space-10));
  width: 1px;
  background: var(--border);
}
.steps-vertical__title { font-size: var(--text-h4); margin-bottom: var(--space-3); }
.steps-vertical__body { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--fg-secondary); max-width: 46rem; }

@media (max-width: 560px) {
  .steps-vertical__item { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-4); }
  .steps-vertical__num { width: 2rem; height: 2rem; font-size: var(--text-2xs); }
  .steps-vertical__item:not(:last-child) .steps-vertical__marker::after { top: 2rem; }
}

/* -----------------------------------------------------------------------------
   BENTO GRID
   -------------------------------------------------------------------------- */

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); }
.bento__cell { grid-column: span 2; }
.bento__cell--wide { grid-column: span 4; }
.bento__cell--half { grid-column: span 3; }
.bento__cell--full { grid-column: span 6; }

.bento .card { height: 100%; }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__cell, .bento__cell--wide, .bento__cell--half, .bento__cell--full { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__cell, .bento__cell--wide, .bento__cell--half, .bento__cell--full { grid-column: span 1; }
}

/* -----------------------------------------------------------------------------
   PRICING
   -------------------------------------------------------------------------- */

.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  margin-inline: auto;
}
.pricing-toggle__btn {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.pricing-toggle__btn[aria-pressed='true'] {
  background: var(--bg-elevated);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}
.pricing-toggle__save { color: var(--accent-fg); font-size: var(--text-xs); font-weight: var(--weight-semibold); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pricing-grid { grid-template-columns: minmax(0, 1fr); } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

.plan--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.plan--featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--accent), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.plan__flag {
  position: absolute;
  top: 0; right: var(--space-6);
  transform: translateY(-50%);
  background: var(--accent);
  color: var(--fg-on-accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
}

.plan__name { font-size: var(--text-h5); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.plan__pitch { font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.55; min-height: 2.4em; margin-bottom: var(--space-6); }

.plan__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.plan__amount {
  font-size: 2.5rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  font-variation-settings: 'opsz' 32;
}
.plan__period { font-size: var(--text-xs); color: var(--fg-muted); }
.plan__billing-note { font-size: var(--text-xs); color: var(--fg-muted); min-height: 1.4em; margin-bottom: var(--space-6); }

.plan__cta { margin-bottom: var(--space-6); }
.plan__includes { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: var(--space-4); }

.plan__features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); color: var(--fg-secondary); }
.plan__features li { display: flex; gap: var(--space-3); line-height: 1.5; }
.plan__features svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }
.plan__features strong { color: var(--fg); font-weight: var(--weight-semibold); }

.plan__foot { margin-top: auto; padding-top: var(--space-6); font-size: var(--text-xs); color: var(--fg-muted); }

/* Enterprise honesty panel — deliberately distinct from the priced tiers. */
.enterprise-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-2xl);
  background: var(--bg-subtle);
}
@media (max-width: 860px) { .enterprise-panel { grid-template-columns: minmax(0, 1fr); } }

.gap-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.gap-list li { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--fg-secondary); line-height: 1.5; }
.gap-list svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--fg-subtle); }

/* -----------------------------------------------------------------------------
   CTA BAND
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  padding: clamp(3rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--radius-3xl);
  background: var(--silt-950);
  color: #f6f4f1;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
:root[data-theme='dark'] .cta-band { background: var(--silt-900); border: 1px solid var(--border); }

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 340px at 18% 0%, rgba(18, 162, 128, 0.30), transparent 62%),
    radial-gradient(620px 320px at 84% 108%, rgba(217, 115, 40, 0.24), transparent 60%);
  z-index: -1;
}

.cta-band__title {
  font-size: var(--text-h1);
  color: #ffffff;
  margin-bottom: var(--space-5);
  max-width: 26ch;
  margin-inline: auto;
}
.cta-band__lead {
  font-size: var(--text-lead);
  color: rgba(246, 244, 241, 0.72);
  max-width: 46ch;
  margin: 0 auto var(--space-8);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}
.cta-band .btn--primary { background: #ffffff; color: var(--silt-950); box-shadow: var(--shadow-lg); }
.cta-band .btn--primary:hover { background: var(--silt-100); color: var(--silt-950); }
.cta-band .btn--outline-inverse { color: #f6f4f1; border-color: rgba(246, 244, 241, 0.28); }
.cta-band .btn--outline-inverse:hover { background: rgba(246, 244, 241, 0.10); border-color: rgba(246, 244, 241, 0.45); color: #ffffff; }
.cta-band__note { margin-top: var(--space-6); font-size: var(--text-xs); color: rgba(246, 244, 241, 0.5); }

/* -----------------------------------------------------------------------------
   TIMELINE — roadmap & changelog
   -------------------------------------------------------------------------- */

.timeline { display: flex; flex-direction: column; gap: var(--space-12); }

.timeline__group { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-8); }
@media (max-width: 780px) { .timeline__group { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

.timeline__meta { position: sticky; top: calc(var(--header-h) + var(--space-6)); align-self: start; }
@media (max-width: 780px) { .timeline__meta { position: static; } }
.timeline__label { font-size: var(--text-h4); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.timeline__date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); }

.timeline__items { display: flex; flex-direction: column; gap: var(--space-4); }

.timeline__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}
.timeline__item-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.timeline__item-body { font-size: var(--text-sm); color: var(--fg-secondary); line-height: var(--leading-normal); }

/* -----------------------------------------------------------------------------
   ARTICLE / RESOURCE CARDS
   -------------------------------------------------------------------------- */

.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card__thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
}
.post-card__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--fg-muted); margin-bottom: var(--space-3); }
.post-card__title { font-size: var(--text-h5); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); margin-bottom: var(--space-2); line-height: 1.35; }
.post-card:hover .post-card__title { color: var(--accent-fg); }
.post-card__excerpt { font-size: var(--text-sm); color: var(--fg-secondary); line-height: var(--leading-relaxed); }
.post-card__foot { margin-top: auto; padding-top: var(--space-5); display: flex; align-items: center; gap: var(--space-3); }

.post-card--featured { grid-column: span 2; }
@media (max-width: 900px) { .post-card--featured { grid-column: span 1; } }

/* -----------------------------------------------------------------------------
   JOBS
   -------------------------------------------------------------------------- */

.job-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-2);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-base) var(--ease-out), padding-inline var(--dur-base) var(--ease-out);
}
.job:hover { background: var(--bg-subtle); padding-inline: var(--space-5); color: inherit; }
.job__title { font-size: var(--text-h5); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.job__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--fg-muted); }
.job__arrow { color: var(--fg-muted); width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.job:hover .job__arrow { transform: translateX(4px); color: var(--accent-fg); }

/* -----------------------------------------------------------------------------
   STATUS PAGE
   -------------------------------------------------------------------------- */

.status-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--status-success-bg);
  border: 1px solid transparent;
  margin-bottom: var(--space-10);
}
.status-banner__title { font-size: var(--text-h4); font-weight: var(--weight-semibold); color: var(--status-success); }
.status-banner__sub { font-size: var(--text-sm); color: var(--fg-secondary); margin-top: 2px; }

.status-list { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-elevated); }
.status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
}
.status-row + .status-row { border-top: 1px solid var(--border-subtle); }
.status-row__name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.status-row__desc { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 2px; }
.status-row__uptime { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); }

/* 90-day uptime bars */
.uptime-bars { display: flex; gap: 2px; align-items: flex-end; height: 26px; }
.uptime-bars span { width: 4px; height: 100%; border-radius: 1px; background: var(--status-success); opacity: 0.85; }
.uptime-bars span[data-state='degraded'] { background: var(--status-warning); }
.uptime-bars span[data-state='down'] { background: var(--status-danger); }
@media (max-width: 720px) {
  .status-row { grid-template-columns: minmax(0, 1fr) auto; }
  .uptime-bars { display: none; }
}

/* -----------------------------------------------------------------------------
   INTEGRATIONS GRID
   -------------------------------------------------------------------------- */

.integration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-4); }

.integration {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.integration:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.integration__icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--fg-secondary);
}
.integration__icon svg { width: 19px; height: 19px; }
.integration__name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.integration__cat { font-size: var(--text-2xs); color: var(--fg-muted); margin-top: 1px; }

/* -----------------------------------------------------------------------------
   DOCS / HELP LAYOUT
   -------------------------------------------------------------------------- */

.docs-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-12); align-items: start; }
@media (max-width: 900px) { .docs-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }

.docs-sidebar { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
@media (max-width: 900px) { .docs-sidebar { position: static; } }
.docs-sidebar h3 {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
  margin: var(--space-6) 0 var(--space-3);
}
.docs-sidebar h3:first-child { margin-top: 0; }
.docs-sidebar ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.docs-sidebar a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.docs-sidebar a:hover { background: var(--bg-muted); color: var(--fg); }
.docs-sidebar a[aria-current='page'] { background: var(--accent-subtle); color: var(--accent-fg); font-weight: var(--weight-medium); }

/* Search box (non-functional shell on the static site; documented in the
   launch checklist as a post-launch integration). */
.search-box { position: relative; }
.search-box svg { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--fg-subtle); pointer-events: none; }
.search-box .input { padding-left: 2.75rem; }

/* -----------------------------------------------------------------------------
   AUTH PAGES
   -------------------------------------------------------------------------- */

.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); }
@media (max-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr); min-height: 0; } }

.auth__form-side { display: flex; align-items: center; justify-content: center; padding: var(--section-y-tight) var(--gutter); }
.auth__form { width: 100%; max-width: 25rem; }
.auth__title { font-size: var(--text-h2); margin-bottom: var(--space-3); }
.auth__sub { font-size: var(--text-sm); color: var(--fg-secondary); margin-bottom: var(--space-8); }

.auth__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--section-y-tight) clamp(2rem, 1rem + 4vw, 4.5rem);
  background: var(--bg-subtle);
  border-left: 1px solid var(--border-subtle);
  overflow: hidden;
}
.auth__aside::before { content: ''; position: absolute; inset: 0; background: var(--wash-soft); pointer-events: none; }
.auth__aside > * { position: relative; }
@media (max-width: 900px) { .auth__aside { border-left: none; border-top: 1px solid var(--border-subtle); } }

.auth__divider { display: flex; align-items: center; gap: var(--space-4); margin-block: var(--space-6); font-size: var(--text-xs); color: var(--fg-muted); }
.auth__divider::before, .auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* -----------------------------------------------------------------------------
   ERROR PAGE
   -------------------------------------------------------------------------- */

.error-page {
  min-height: calc(100vh - var(--header-h) - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--section-y);
}
.error-page__code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--fg-muted);
  margin-bottom: var(--space-6);
}
.error-page__art { width: min(230px, 60vw); margin-bottom: var(--space-8); }
.error-page__title { font-size: var(--text-h1); margin-bottom: var(--space-4); }
.error-page__lead { font-size: var(--text-lead); color: var(--fg-secondary); max-width: 42ch; margin: 0 auto var(--space-8); }
.error-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); margin-top: var(--space-10); font-size: var(--text-sm); }

/* -----------------------------------------------------------------------------
   MISC SECTION HELPERS
   -------------------------------------------------------------------------- */

.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-4); }

.role {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}
.role__badge {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}
.role__badge--warm { background: var(--warm-subtle); color: var(--warm); }
.role__name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.role__cat { font-size: var(--text-2xs); color: var(--fg-muted); }

.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--fg-secondary); line-height: var(--leading-normal); }
.checklist svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 3px; color: var(--accent); }
.checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); }
@media (max-width: 700px) { .checklist--2 { grid-template-columns: minmax(0, 1fr); } }

.definition-list { display: grid; gap: var(--space-6); }
.definition-list__item { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.definition-list__term { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg); }
.definition-list__desc { font-size: var(--text-sm); color: var(--fg-secondary); line-height: var(--leading-relaxed); }
@media (max-width: 700px) { .definition-list__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } }

/* ===== 05-mockup.css ===== */
/* =============================================================================
   CAPYBARI — PRODUCT MOCKUPS
   The hero visual is built in HTML/CSS rather than shipped as a bitmap: it is
   crisp at every density, themed automatically, animatable, readable by a
   screen reader, and weighs nothing. Illustration briefs for the bitmap
   alternatives live in brand/07-illustration-direction.md.
   ============================================================================= */

.mockup {
  position: relative;
  max-width: 100%;
  border-radius: var(--radius-xl);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
}

/* A soft brand glow behind the frame so it lifts off the page. */
.mockup-wrap { position: relative; }
.mockup-wrap::before {
  content: '';
  position: absolute;
  inset: 8% -4% -10%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(18, 162, 128, 0.22), transparent 70%);
  filter: blur(46px);
  z-index: -1;
  pointer-events: none;
}

.mockup__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.mockup__dots { display: flex; gap: 6px; }
.mockup__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.mockup__url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
}
.mockup__url svg { width: 11px; height: 11px; }

.mockup__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.mockup__req-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.mockup__req-title {
  min-width: 0;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--fg);
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup__bar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.mockup__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  background: var(--bg-muted);
  color: var(--fg-secondary);
  white-space: nowrap;
}
.mockup__chip--accent  { background: var(--accent-subtle); color: var(--accent-fg); }
.mockup__chip--success { background: var(--status-success-bg); color: var(--status-success); }
.mockup__chip--warm    { background: var(--warm-subtle); color: var(--warm); }
.mockup__chip--info    { background: var(--status-info-bg); color: var(--status-info); }
.mockup__chip svg { width: 10px; height: 10px; }

/* ---------- Board ---------------------------------------------------------- */

.mockup__board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--bg-subtle);
}

.mockup__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.mockup__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 2px var(--space-1);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.mockup__col-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-subtle);
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  padding: 1px 6px;
  letter-spacing: 0;
}

.mockup__task {
  padding: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.mockup__task--active {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 1px var(--accent-border), var(--shadow-sm);
}
.mockup__task--ghost { opacity: 0.5; border-style: dashed; }

.mockup__task-top { display: flex; align-items: center; gap: 6px; }

.mockup__role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0;
  background: var(--accent-subtle);
  color: var(--accent-fg);
  flex-shrink: 0;
}
.mockup__role--warm   { background: var(--warm-subtle); color: var(--warm); }
.mockup__role--info   { background: var(--status-info-bg); color: var(--status-info); }
.mockup__role--muted  { background: var(--bg-muted); color: var(--fg-muted); }

.mockup__task-code { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-subtle); margin-left: auto; }

.mockup__task-title {
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  color: var(--fg);
  line-height: 1.35;
  letter-spacing: -0.008em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mockup__task-foot { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--fg-muted); }

/* Indeterminate progress used on the running task. */
.mockup__progress {
  position: relative;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  overflow: hidden;
}
.mockup__progress::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--reed-400), var(--reed-500));
  animation: mockup-progress 2.4s var(--ease-in-out) infinite;
}
@keyframes mockup-progress {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(245%); }
}

.mockup__dep {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-subtle);
}
.mockup__dep svg { width: 9px; height: 9px; }

/* ---------- Live log strip ------------------------------------------------- */

.mockup__log {
  border-top: 1px solid var(--border);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-muted);
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.mockup__log-line { display: flex; gap: var(--space-3); align-items: baseline; white-space: nowrap; min-width: 0; }
.mockup__log-time { color: var(--fg-subtle); flex-shrink: 0; }
.mockup__log-role { color: var(--accent-fg); flex-shrink: 0; }
.mockup__log-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mockup__log-line--new { animation: log-in var(--dur-slow) var(--ease-out); }
@keyframes log-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* A caret that blinks on the last log line — the only motion that never
   stops, and it is 1px wide. */
.mockup__caret {
  display: inline-block;
  width: 6px;
  height: 11px;
  background: var(--accent);
  vertical-align: -1px;
  animation: caret-blink 1.15s steps(2, start) infinite;
}
@keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- Deployment strip ---------------------------------------------- */

.mockup__deploy {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}
.mockup__deploy-phases { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; overflow: hidden; }
.mockup__phase { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--fg-muted); white-space: nowrap; }
.mockup__phase svg { width: 12px; height: 12px; }
.mockup__phase--done { color: var(--status-success); }
.mockup__phase--active { color: var(--accent-fg); font-weight: var(--weight-semibold); }
.mockup__phase-sep { width: 14px; height: 1px; background: var(--border-strong); flex-shrink: 0; }

@media (max-width: 620px) {
  .mockup { font-size: 12px; }
  .mockup__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mockup__col:nth-child(n + 3) { display: none; }
  .mockup__deploy-phases .mockup__phase:nth-child(n + 5) { display: none; }
  .mockup__log-line:nth-child(n + 3) { display: none; }
}

/* -----------------------------------------------------------------------------
   SECONDARY MOCKUPS — used on feature/split sections
   -------------------------------------------------------------------------- */

.panel-mock {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.panel-mock__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}
.panel-mock__title { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg); }
.panel-mock__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

/* Plan preview rows */
.plan-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.plan-row__text { font-size: var(--text-xs); color: var(--fg-secondary); line-height: 1.5; }
.plan-row__text strong { color: var(--fg); font-weight: var(--weight-semibold); display: block; margin-bottom: 2px; font-size: var(--text-xs); }

/* Report block — the structured completion report from worker-execution-cycle */
.report-mock { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; color: var(--fg-secondary); }
.report-mock__h { color: var(--accent-fg); font-weight: 600; }
.report-mock__dim { color: var(--fg-subtle); }

/* Diff-ish strip for review gate visuals */
.diff-line { display: flex; gap: var(--space-3); font-family: var(--font-mono); font-size: 11px; padding: 1px 0; }
.diff-line__num { color: var(--fg-subtle); min-width: 2.2em; text-align: right; flex-shrink: 0; }
.diff-line--add { background: var(--status-success-bg); color: var(--status-success); }
.diff-line--del { background: var(--status-danger-bg); color: var(--status-danger); }

/* Investigation timeline used on the AI / security pages */
.incident-mock { display: flex; flex-direction: column; gap: 0; }
.incident-step { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--space-3); position: relative; padding-bottom: var(--space-4); }
.incident-step:last-child { padding-bottom: 0; }
.incident-step__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); margin-top: 5px; margin-inline: auto;
  flex-shrink: 0;
}
.incident-step__dot--muted { background: var(--border-strong); }
.incident-step__dot--danger { background: var(--status-danger); }
.incident-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(0.625rem - 0.5px);
  top: 16px; bottom: 0;
  width: 1px;
  background: var(--border);
}
.incident-step__time { font-family: var(--font-mono); font-size: 10px; color: var(--fg-subtle); }
.incident-step__text { font-size: var(--text-xs); color: var(--fg-secondary); line-height: 1.5; }
.incident-step__text strong { color: var(--fg); font-weight: var(--weight-semibold); }

/* ===== 07-org.css ===== */
/* =============================================================================
   ORG DIAGRAM — "You're the only human on the team"

   Three beats, and only three:

        YOU  ──▶  [ the machine ]  ──▶  YOUR PRODUCT
       warm         metallic            live

   An earlier revision gave every tier its own treatment, which meant the eye
   had five things to parse. This version collapses all ten specialists into one
   bordered system so the diagram argues a single point: a human hands work to a
   machine, and a working product comes out.

   The colour story carries the whole meaning without a caption:
     · the human is the only warm, saturated object on the page
     · every agent is the same cool machined surface — uniform on purpose,
       because "they are all the same kind of thing" IS the message
     · the result is brand green, the colour of a board with nothing wrong on it

   Contrast: white on the human gradient measures 4.8:1 at its lightest stop and
   7.8:1 at its darkest; white on the output gradient measures 5.0:1 rising to
   8.4:1. Both clear AA for normal text across the whole fill, so no text sits
   on a gradient stop that fails.
   ============================================================================= */

.org {
  --org-line: var(--border-strong);

  /* Machined surface. The cast is very slightly cool — barely a hue shift, but
     enough that it reads as "not the warm neutral the rest of the site uses"
     when placed beside the human node. */
  --metal-face: linear-gradient(180deg, #f4f3f2 0%, #e7e5e3 100%);
  --metal-face-raised: linear-gradient(180deg, #ffffff 0%, #f1efed 100%);
  --metal-border: #d2cec9;
  --metal-edge: rgba(255, 255, 255, 0.9);
  --metal-ink: #2f2c28;
  --metal-ink-dim: #6b665f;
  --metal-grid: rgba(47, 44, 40, 0.055);

  max-width: 62rem;
  margin-inline: auto;
}

:root[data-theme='dark'] .org {
  --metal-face: linear-gradient(180deg, #27241f 0%, #1c1a17 100%);
  --metal-face-raised: linear-gradient(180deg, #322e29 0%, #26231f 100%);
  --metal-border: #3d3831;
  --metal-edge: rgba(255, 255, 255, 0.07);
  --metal-ink: #ece8e3;
  --metal-ink-dim: #9c958c;
  --metal-grid: rgba(255, 255, 255, 0.045);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .org {
    --metal-face: linear-gradient(180deg, #27241f 0%, #1c1a17 100%);
    --metal-face-raised: linear-gradient(180deg, #322e29 0%, #26231f 100%);
    --metal-border: #3d3831;
    --metal-edge: rgba(255, 255, 255, 0.07);
    --metal-ink: #ece8e3;
    --metal-ink-dim: #9c958c;
    --metal-grid: rgba(255, 255, 255, 0.045);
  }
}

/* ---------- Connectors --------------------------------------------------- */

.org__row { display: flex; justify-content: center; }

.org__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-4);
}
.org__link::before,
.org__link::after {
  content: '';
  width: 1px;
  height: var(--space-6);
  background: var(--org-line);
}
.org__link-label {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  text-align: center;
  max-width: 26rem;
}
.org__link-label strong { color: var(--fg-secondary); font-weight: var(--weight-medium); }

/* Arrowhead so the direction of travel is unmistakable. */
.org__link::after {
  height: var(--space-6);
  position: relative;
}
.org__arrow {
  width: 9px; height: 9px;
  border-right: 1px solid var(--org-line);
  border-bottom: 1px solid var(--org-line);
  transform: rotate(45deg) translate(-2px, -2px);
  margin-top: -6px;
}

/* ---------- Beat 1 — the human ------------------------------------------- */

.org-human {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-8) var(--space-7);
  border-radius: var(--radius-2xl);
  text-align: center;
  max-width: 30rem;
  /* The only saturated object in the diagram. */
  background: linear-gradient(150deg, #b85a1c 0%, #a34d19 46%, #8f3f19 100%);
  color: #fff;
  /* Glow via box-shadow rather than a blurred pseudo-element: a negative-inset
     ::before enlarges the scrollable area and breaks reflow on small screens. */
  box-shadow:
    0 2px 6px rgba(143, 63, 25, 0.28),
    0 18px 44px -12px rgba(184, 90, 28, 0.5),
    0 0 70px -10px rgba(217, 115, 40, 0.45);
}


.org-human__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  background: #fff;
  color: #8f3f19;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.org-human__badge svg { width: 13px; height: 13px; }

.org-human__name {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: #fff;
}
.org-human__said {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-display);
  color: #fff;
  max-width: 20ch;
}
.org-human__said::before { content: '\201C'; }
.org-human__said::after { content: '\201D'; }
.org-human__note {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.82);
  max-width: 30ch;
  line-height: 1.5;
}

/* ---------- Beat 2 — the machine ----------------------------------------- */

.org-machine {
  position: relative;
  border: 1px solid var(--metal-border);
  border-radius: var(--radius-3xl);
  background: var(--metal-face);
  box-shadow: inset 0 1px 0 var(--metal-edge), var(--shadow-md);
  padding: var(--space-6) var(--space-6) var(--space-8);
  overflow: hidden;
}

/* Faint engineering grid — systematic, machined, and quiet enough that you
   only notice it if you look for it. */
.org-machine::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--metal-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--metal-grid) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 85%);
  pointer-events: none;
}
.org-machine > * { position: relative; }

.org-machine__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--metal-border);
}
.org-machine__id { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* A manufacturer's nameplate. This is the one place the diagram says out loud
   whose machine this is — riveted to the panel rather than floating over it,
   which is why it carries the same bevelled edge as everything else inside. */
.org-machine__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.3rem 0.7rem 0.3rem 0.45rem;
  border: 1px solid var(--metal-border);
  border-radius: var(--radius-full);
  background: var(--metal-face-raised);
  box-shadow: inset 0 1px 0 var(--metal-edge);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.008em;
  color: var(--metal-ink);
  white-space: nowrap;
}
.org-machine__brand svg { width: 17px; height: 17px; }
.org-machine__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metal-ink-dim);
}
.org-machine__tag {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  color: var(--accent-fg);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-full);
}

/* Every agent is the same object. That uniformity is the argument. */
.org-agent {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--metal-border);
  border-radius: var(--radius-md);
  background: var(--metal-face-raised);
  box-shadow: inset 0 1px 0 var(--metal-edge);
  color: var(--metal-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.3;
}
.org-agent__dot {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--metal-border);
  background: var(--metal-face);
  color: var(--metal-ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.org-agent__dot svg { width: 11px; height: 11px; }

/* One teal pinprick per agent — a status LED. It is the only colour inside the
   machine, and it keeps the panel tied to the brand without warming it up. */
.org-agent::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* The manager sits above the rest — by position, not by colour. */
.org-agent--lead {
  max-width: 22rem;
  margin-inline: auto;
  padding: var(--space-4) var(--space-5);
}
.org-agent--lead .org-agent__name { font-size: var(--text-body); font-weight: var(--weight-semibold); }
.org-agent__role { display: block; font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--metal-ink-dim); margin-top: 2px; }

.org-machine__split {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metal-ink-dim);
}
.org-machine__split::before,
.org-machine__split::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--metal-border);
  max-width: 8rem;
}

.org__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.org-group { display: flex; flex-direction: column; gap: var(--space-2); }
.org-group__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--metal-ink);
  letter-spacing: 0.01em;
}
.org-group__what {
  font-size: var(--text-2xs);
  color: var(--metal-ink-dim);
  line-height: 1.5;
  margin-bottom: var(--space-2);
  min-height: 2.6em;
}

/* ---------- Beat 3 — the result ------------------------------------------ */

.org-output {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  text-align: center;
  max-width: 34rem;
  background: linear-gradient(150deg, #0b7d61 0%, #0a6d55 48%, #075945 100%);
  color: #fff;
  box-shadow:
    0 2px 6px rgba(7, 89, 69, 0.26),
    0 18px 44px -12px rgba(11, 125, 97, 0.45),
    0 0 70px -10px rgba(18, 162, 128, 0.42);
}
.org-output__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.org-output__name {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: 1.25;
  color: #fff;
  max-width: 20ch;
}
.org-output__note {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.86);
  line-height: var(--leading-relaxed);
  max-width: 42ch;
}

/* ---------- The return path ---------------------------------------------- */

.org__return {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-10);
  padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--warm-border);
  border-radius: var(--radius-xl);
  background: var(--warm-subtle);
}
.org__return svg { width: 20px; height: 20px; color: var(--warm); flex-shrink: 0; margin-top: 2px; }
.org__return-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: var(--space-1); }
.org__return-body { font-size: var(--text-sm); color: var(--fg-secondary); line-height: var(--leading-relaxed); }

/* ---------- Legend ------------------------------------------------------- */

.org__legend {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.org__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.org__legend-swatch { width: 13px; height: 13px; border-radius: 4px; }
.org__legend-swatch--human { background: linear-gradient(150deg, #b85a1c, #8f3f19); }
.org__legend-swatch--ai { background: var(--metal-face); border: 1px solid var(--metal-border); }
.org__legend-swatch--out { background: linear-gradient(150deg, #0b7d61, #075945); }

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 820px) {
  .org__groups { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .org-group__what { min-height: 0; }
  .org-machine { padding: var(--space-5) var(--space-4) var(--space-6); border-radius: var(--radius-2xl); }
  .org-machine__head { justify-content: center; }
  .org-human, .org-output { max-width: none; width: 100%; padding: var(--space-6); }
  .org-agent--lead { max-width: none; }
}

/* ===== 06-motion-utils.css ===== */
/* =============================================================================
   CAPYBARI — MOTION & UTILITIES

   Motion principles (Motion Designer, approved by Executive Director):
   1. Motion explains, it never entertains. Every animation answers "where did
      this come from?" or "what is happening right now?".
   2. Nothing moves more than 12px. Large translations read as anxiety.
   3. Enter animations only. Elements never animate out on scroll — reversing
      reveals makes a page feel unstable when the user scrolls back up.
   4. One easing curve for UI (--ease-out), one for physical objects
      (--ease-spring). No bounce on anything informational.
   5. Everything here is disabled wholesale under prefers-reduced-motion, and
      the page must be complete and legible with all of it switched off.
   ============================================================================= */

/* ---------- Scroll reveal --------------------------------------------------
   The `is-ready` class is added by JS on load. Without JS, content is visible
   by default — the reveal is purely additive. */

.reveal { opacity: 1; }

html.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children — index set inline as --i. */
html.js .reveal-group > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
html.js .reveal-group.is-visible > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Hero entrance --------------------------------------------------
   A single, short, staged entrance. It runs once, on load, and never again. */

@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

html.js .hero__copy > * { animation: hero-in var(--dur-slower) var(--ease-out) backwards; }
html.js .hero__copy > *:nth-child(1) { animation-delay: 40ms; }
html.js .hero__copy > *:nth-child(2) { animation-delay: 100ms; }
html.js .hero__copy > *:nth-child(3) { animation-delay: 160ms; }
html.js .hero__copy > *:nth-child(4) { animation-delay: 220ms; }
html.js .hero__copy > *:nth-child(5) { animation-delay: 280ms; }
html.js .hero__visual { animation: hero-in 760ms var(--ease-out) 200ms backwards; }

@media (prefers-reduced-motion: reduce) {
  html.js .hero__copy > *,
  html.js .hero__visual { animation: none; }
}

/* ---------- Utilities ------------------------------------------------------ */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

.text-sm  { font-size: var(--text-sm); }
.text-xs  { font-size: var(--text-xs); }
.text-lead { font-size: var(--text-lead); line-height: var(--leading-relaxed); }

.text-muted     { color: var(--fg-muted); }
.text-secondary { color: var(--fg-secondary); }
.text-accent    { color: var(--accent-fg); }

.font-mono { font-family: var(--font-mono); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }

.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.mx-auto { margin-inline: auto; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.max-w-prose  { max-width: var(--container-prose); }
.max-w-narrow { max-width: var(--container-narrow); }
.w-full { width: 100%; }

.hide-sm { display: initial; }
@media (max-width: 640px) { .hide-sm { display: none; } }

.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.border { border: 1px solid var(--border); }
.bg-subtle { background: var(--bg-subtle); }

/* Anchor offset target for in-page links inside long documents. */
.anchor-target { scroll-margin-top: calc(var(--header-h) + var(--space-8)); }

/* Print — legal pages get printed. Make that not embarrassing. */
@media print {
  .site-header, .site-footer, .cta-band, .skip-link, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; }
}