/* ===== 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);

  /* ---------- Machined surface ---------------------------------------------
     Used by the org diagram and the home-page strip to render AI agents as one
     uniform, systematic material. The cast is very slightly cooler than the
     warm --silt ramp, which is what makes it read as "not human" beside the
     saturated warm node. Declared here so both components share one source. */
  --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);
}

/* =============================================================================
   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);

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

/* 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);

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

/* ===== 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; }

/* Says what happens next, so "Continue" is not a mystery button. Above the
   legal footnote because it is information the visitor acts on, not consents to. */
.form__hint { font-size: var(--text-sm); color: var(--fg-secondary, var(--fg-muted)); line-height: var(--leading-relaxed); }
.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; } }

/* -----------------------------------------------------------------------------
   Analytics consent banner

   Present only on builds that actually carry an analytics tag. Anchored bottom,
   full width on small screens, and deliberately not a full-page blocker: a
   marketing site that holds its content hostage until you answer a question
   about cookies has already lost the visitor it was trying to measure.
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: var(--space-4);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.consent.is-visible {
  opacity: 1;
  transform: none;
}

.consent-inner {
  max-width: var(--container, 72rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.consent-copy { flex: 1 1 22rem; }

.consent-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: var(--text-sm, 0.9rem);
}

.consent-text {
  margin: 0;
  font-size: var(--text-sm, 0.9rem);
  color: var(--fg-muted);
}

/* Equal weight, deliberately. Consent that is harder to refuse than to give is
   not consent, and a greyed-out "Decline" is the oldest trick in the book. */
.consent-actions {
  display: flex;
  gap: var(--space-3);
  flex: 0 0 auto;
}

@media (max-width: 40rem) {
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ===== 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. */

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


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

/* ===== 08-strip.css ===== */
/* =============================================================================
   HOME STRIP — the short version
   "You bring the idea. And the yes."

   A one-band condensation of the full org diagram, sized for the home page
   directly under the hero. Same three beats, same colour story, roughly a
   quarter of the height:

        YOU  ⇄  [ Capybari ]  ──▶  YOUR PRODUCT

   The move that makes it work is the **pair of arrows** on the left. The human
   node appears once, but two arrows touch it: one out ("the idea") and one
   back ("the yes"). That is the entire proposition stated geometrically — you
   are involved twice, and only twice, and everything between those two moments
   belongs to the machine.

   The return arrow is dashed and warm so it reads as *your* thread through the
   diagram rather than as another step in the pipeline.
   ============================================================================= */

.strip {

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.12fr) auto minmax(0, 1.04fr);
  align-items: stretch;
  gap: var(--space-3);
  max-width: 68rem;
  margin-inline: auto;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .strip,
  :root:not([data-theme]) .strip-legend {
    --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);
  }
}

/* ---------- Nodes -------------------------------------------------------- */

.strip__node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  text-align: center;
  align-items: center;
  justify-content: center;
}

.strip__eyebrow {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.strip__eyebrow svg { width: 12px; height: 12px; }

.strip__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: 1.2;
}
.strip__sub { font-size: var(--text-xs); line-height: 1.5; max-width: 26ch; }

/* Beat 1 — the only saturated warm object */
.strip__node--human {
  background: linear-gradient(150deg, #b85a1c 0%, #a34d19 46%, #8f3f19 100%);
  color: #fff;
  box-shadow:
    0 2px 6px rgba(143, 63, 25, 0.26),
    0 14px 34px -14px rgba(184, 90, 28, 0.5),
    0 0 56px -14px rgba(217, 115, 40, 0.42);
}
.strip__node--human .strip__eyebrow { background: #fff; color: #8f3f19; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); }
.strip__node--human .strip__title { color: #fff; }
.strip__node--human .strip__sub { color: rgba(255, 255, 255, 0.84); }

/* Beat 2 — the machine */
.strip__node--machine {
  background: var(--metal-face);
  border: 1px solid var(--metal-border);
  box-shadow: inset 0 1px 0 var(--metal-edge), var(--shadow-sm);
  color: var(--metal-ink);
  overflow: hidden;
}
.strip__node--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: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 20%, transparent 88%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 20%, transparent 88%);
  pointer-events: none;
}
.strip__node--machine > * { position: relative; }

.strip__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.024em;
  color: var(--metal-ink);
}
.strip__brand svg { width: 27px; height: 27px; }

/* The verbs. Uniform, mono, evenly spaced — the machine's job list. */
.strip__verbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-1);
}
.strip__verb {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--metal-ink-dim);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--metal-border);
  border-radius: var(--radius-sm);
  background: var(--metal-face-raised);
  white-space: nowrap;
}
.strip__verb::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 5px;
  vertical-align: 1px;
}

/* Beat 3 — the result */
.strip__node--out {
  background: linear-gradient(150deg, #0b7d61 0%, #0a6d55 48%, #075945 100%);
  color: #fff;
  box-shadow:
    0 2px 6px rgba(7, 89, 69, 0.24),
    0 14px 34px -14px rgba(11, 125, 97, 0.46),
    0 0 56px -14px rgba(18, 162, 128, 0.4);
}
.strip__node--out .strip__eyebrow { background: rgba(255, 255, 255, 0.18); color: #fff; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); }
.strip__node--out .strip__title { color: #fff; }

.strip__examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-2);
}
.strip__example {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: #fff;
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-full);
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
}

/* ---------- Connectors ---------------------------------------------------
   The left connector carries two arrows; the right carries one. That
   asymmetry is the whole argument, so it must survive every breakpoint.
   ---------------------------------------------------------------------- */

.strip__flow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding-inline: var(--space-1);
  min-width: 6.5rem;
}

.strip__wire { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.strip__wire-label {
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}
.strip__wire-line {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--border-strong);
}
.strip__wire-line::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
  transform: translateY(-50%) rotate(45deg);
}

/* The return leg: dashed, warm, and pointing the other way. */
.strip__wire--back .strip__wire-label { color: var(--warm); }
.strip__wire--back .strip__wire-line {
  background: none;
  border-top: 1px dashed var(--warm-border);
  height: 0;
}
.strip__wire--back .strip__wire-line::after {
  right: auto; left: 0;
  border-top: none; border-right: none;
  border-bottom: 1px solid var(--warm);
  border-left: 1px solid var(--warm);
  transform: translateY(-50%) rotate(45deg);
}

/* ---------- Footnote ----------------------------------------------------- */

.strip-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  text-align: center;
}
.strip-note svg { width: 17px; height: 17px; color: var(--warm); flex-shrink: 0; }
.strip-note strong { color: var(--fg); font-weight: var(--weight-semibold); }

/* ---------- Responsive ---------------------------------------------------
   Below 900px the strip becomes a column. The connectors rotate rather than
   disappear — losing the return arrow would lose the point of the diagram.
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .strip { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .strip__flow {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-6);
    min-width: 0;
    padding-block: var(--space-3);
  }
  .strip__wire { flex-direction: column-reverse; gap: 4px; }
  .strip__wire-line {
    width: 1px;
    height: 26px;
    margin-inline: auto;
  }
  .strip__wire-line::after {
    right: 50%; top: auto; bottom: 0;
    transform: translateX(50%) rotate(135deg);
  }
  .strip__wire--back .strip__wire-line {
    height: 26px;
    border-top: none;
    border-left: 1px dashed var(--warm-border);
    width: 0;
  }
  .strip__wire--back .strip__wire-line::after {
    left: 50%; right: auto; bottom: auto; top: 0;
    border-bottom: 1px solid var(--warm);
    border-left: 1px solid var(--warm);
    transform: translateX(-50%) rotate(135deg);
  }
  .strip__sub { 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; }
}