/* Generated by apps/site/build.mjs — do not edit.
   Part 1 is design/huisstijl/tokens.css, copied unchanged (doc 21 S2).
   Part 2 is apps/site/src/styles/site.css. */

/* =============================================================================
   cmdz — designtokens
   -----------------------------------------------------------------------------
   Bron van waarheid voor elke kleur, maat, radius en beweging in het platform.
   Dit bestand wordt geïmporteerd door Tailwind 4 (@import "tokens.css") en door
   elke losstaande mockup. Wijzig hier, nergens anders.

   Spec: docs/13-huisstijl.md
   Regel: donker is de standaard. De lichte modus staat onder [data-theme="light"]
   en is een afgeleide, geen tweede huisstijl.

   Alle contrastverhoudingen in de commentaren zijn WCAG 2.2 relatieve-luminantie-
   ratio's, berekend tegen --bg (donker: #0a0b0e / licht: #f6f7f9).
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------------
     1. VLAKKEN — van diep naar hoog. Hoger vlak = dichter bij de gebruiker.
     ------------------------------------------------------------------------- */
  --bg:            #0a0b0e;  /* paginabodem. Bijna zwart, licht blauw gestemd.   */
  --panel:         #131519;  /* kaarten en zijbalk. Het meest gebruikte vlak.    */
  --panel2:        #181b21;  /* geneste blokken binnen een kaart.                */
  --panel3:        #1e222a;  /* chips, tags, inputvelden in rust.                */
  --well:          #0c0d10;  /* "put": logvenster, codeblok, lege limietbalk.    */

  /* ---------------------------------------------------------------------------
     2. LIJNEN
     ------------------------------------------------------------------------- */
  --line:          #262b35;  /* standaardrand. Decoratief, 1,39:1 — mag laag.    */
  --line-strong:   #68717f;  /* rand die betekenis draagt (input, focusgrens).
                                3,99:1 op --bg → voldoet aan WCAG 1.4.11.        */

  /* ---------------------------------------------------------------------------
     3. TEKST
     ------------------------------------------------------------------------- */
  --txt:           #e7eaf0;  /* lopende tekst en koppen.       16,33:1  AAA      */
  --muted:         #8b93a3;  /* secundaire tekst, labels.       6,37:1  AA       */
  --dim:           #5b6472;  /* decoratief: tijdstempels, hulp. 3,29:1  alleen
                                grote tekst (≥24px, of ≥18,66px bold) of niet-
                                essentiële tekst. Nooit voor een instructie.     */
  --txt-on-accent: #04140c;  /* tekst op een gevuld accentvlak. 11,51:1 op accent*/

  /* ---------------------------------------------------------------------------
     4. ACCENTEN — één groen draagt het merk. De rest is functioneel.
     ------------------------------------------------------------------------- */
  --accent:        #4ee39a;  /* cmdz-groen. Merk, "gezond", primaire actie.
                                11,97:1 op --bg.                                 */
  --accent2:       #37c9ff;  /* informatie, links, hostnames, identifiers.
                                10,27:1 op --bg.                                 */
  --warn:          #ffcf5c;  /* waarschuwing: limiet nadert, degradatie.
                                13,43:1 op --bg.                                 */
  --danger:        #ff6b6b;  /* fout, destructief, de limietmuur.
                                 7,09:1 op --bg.                                 */
  --purple:        #b48cff;  /* agent/MCP. Alles wat een AI deed is paars.
                                 7,62:1 op --bg.                                 */

  /* Zachte varianten: vullingen achter tekst in dezelfde kleur.
     12% dekking geeft een vlak dat de tekstcontrast nauwelijks aantast.        */
  --accent-soft:   rgb(78 227 154 / .12);
  --accent2-soft:  rgb(55 201 255 / .12);
  --warn-soft:     rgb(255 207 92 / .12);
  --danger-soft:   rgb(255 107 107 / .12);
  --purple-soft:   rgb(180 140 255 / .12);

  /* Randvarianten: 28–40% dekking, voor kaders die "opgeladen" zijn.           */
  --accent-line:   rgb(78 227 154 / .30);
  --accent2-line:  rgb(55 201 255 / .30);
  --warn-line:     rgb(255 207 92 / .30);
  --danger-line:   rgb(255 107 107 / .35);
  --purple-line:   rgb(180 140 255 / .28);

  /* Gloed: uitsluitend voor de live-stip en de limietvulling.                  */
  --accent-glow:   0 0 6px rgb(78 227 154 / .70);

  /* ---------------------------------------------------------------------------
     5. GRAFIEKSERIES — vaste volgorde. Serie 1 is altijd het hoofdgetal.
        Zeven series; daarna groeperen onder "overig" in --dim.
     ------------------------------------------------------------------------- */
  --series-1: #4ee39a;   /* 11,97:1 */
  --series-2: #37c9ff;   /* 10,27:1 */
  --series-3: #b48cff;   /*  7,62:1 */
  --series-4: #ffcf5c;   /* 13,43:1 */
  --series-5: #ff6b6b;   /*  7,09:1 */
  --series-6: #5ad1c4;   /* 10,64:1 */
  --series-7: #ff9d6b;   /*  9,64:1 */
  --series-rest: #5b6472;
  --grid-line: rgb(38 43 53 / .8);   /* rasterlijnen in grafieken */

  /* ---------------------------------------------------------------------------
     6. TYPOGRAFIE — monospace is de merkdrager, niet de uitzondering.
     ------------------------------------------------------------------------- */
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Menlo', 'Consolas',
          'Liberation Mono', monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto,
          Helvetica, Arial, 'Noto Sans', sans-serif;

  /* Typeschaal — grootte / regelhoogte / gewicht. Root = 16px. */
  --fs-display:  2.75rem;  --lh-display: 1.08;  --fw-display: 700;  /* 44px */
  --fs-h1:       2rem;     --lh-h1:      1.15;  --fw-h1:      700;  /* 32px */
  --fs-h2:       1.5rem;   --lh-h2:      1.20;  --fw-h2:      650;  /* 24px */
  --fs-h3:       1.1875rem;--lh-h3:      1.30;  --fw-h3:      650;  /* 19px */
  --fs-h4:       1rem;     --lh-h4:      1.35;  --fw-h4:      650;  /* 16px */
  --fs-lead:     0.9375rem;--lh-lead:    1.60;  --fw-lead:    400;  /* 15px */
  --fs-body:     0.875rem; --lh-body:    1.55;  --fw-body:    400;  /* 14px */
  --fs-sm:       0.8125rem;--lh-sm:      1.50;  --fw-sm:      400;  /* 13px */
  --fs-caption:  0.75rem;  --lh-caption: 1.45;  --fw-caption: 500;  /* 12px */
  --fs-micro:    0.6875rem;--lh-micro:   1.40;  --fw-micro:   600;  /* 11px */
  --fs-overline: 0.6875rem;--lh-overline:1.30;  --fw-overline:700;  /* 11px */
  --ls-overline: 0.07em;   /* uppercase-labels krijgen altijd letterspatiëring */
  --ls-tight:   -0.02em;   /* koppen ≥24px trekken iets aan                    */

  /* Monospace-schaal — voor getallen, bedragen en identifiers. */
  --fs-mono-xl:  1.75rem;  --lh-mono-xl: 1.10;  /* 28px — het bedrag op het dashboard */
  --fs-mono-lg:  1.25rem;  --lh-mono-lg: 1.20;  /* 20px — logo, kopbedragen          */
  --fs-mono:     0.8125rem;--lh-mono:    1.50;  /* 13px — inline getallen            */
  --fs-mono-sm:  0.6875rem;--lh-mono-sm: 1.70;  /* 11px — logs, codeblokken          */
  --num: tabular-nums lining-nums;  /* font-variant-numeric voor alles wat telt */

  /* ---------------------------------------------------------------------------
     7. RUIMTE — 4px-basis. Alle marges en paddings zijn een veelvoud hiervan.
     ------------------------------------------------------------------------- */
  --sp-0:  0;
  --sp-1:  0.25rem;  /*  4px */
  --sp-2:  0.5rem;   /*  8px */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */
  --sp-24: 6rem;     /* 96px */

  /* Containerbreedtes */
  --w-prose: 68ch;    /* lopende tekst: docs, e-mail, juridisch      */
  --w-app:   1000px;  /* portaalkolom                                */
  --w-wide:  1080px;  /* brede portaalpagina's, architectuurplaten   */
  --w-site:  1200px;  /* marketingsite                               */
  --w-max:   1440px;  /* admin-tabellen, maximum                     */

  /* ---------------------------------------------------------------------------
     8. RADIUS — hoe groter het vlak, hoe groter de ronding.
     ------------------------------------------------------------------------- */
  --r-xs:   4px;    /* tag, mini-chip, kleurstaal                */
  --r-sm:   6px;    /* icoonvierkant, statuspil met rechte hoek  */
  --r-md:   8px;    /* knop, invoerveld, navigatie-item          */
  --r-lg:   11px;   /* geneste box binnen een kaart              */
  --r-xl:   12px;   /* kaart                                     */
  --r-2xl:  16px;   /* paneel/stage, dialoog                     */
  --r-full: 999px;  /* pil, avatar, limietbalk, schakelaar       */

  /* ---------------------------------------------------------------------------
     9. RANDEN EN SCHADUW
     ------------------------------------------------------------------------- */
  --bw:        1px;   /* standaard randdikte, overal              */
  --bw-focus:  2px;   /* focusring                                */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .40);
  --shadow-md: 0 6px 20px rgb(0 0 0 / .45);
  --shadow-lg: 0 18px 50px rgb(0 0 0 / .55);

  /* ---------------------------------------------------------------------------
     10. BEWEGING — kort, lineair-uit, nooit veerkrachtig.
     ------------------------------------------------------------------------- */
  --dur-instant: 80ms;    /* hover, actief indrukken            */
  --dur-fast:    140ms;   /* schakelaar, tab, badge-wissel      */
  --dur-base:    200ms;   /* dialoog, toast, paneel             */
  --dur-slow:    320ms;   /* limietbalk die naar nieuwe stand loopt */
  --dur-cursor:  1000ms;  /* knipperende cursor (1 Hz)          */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);   /* standaard uit  */
  --ease-in-out:cubic-bezier(.4, 0, .2, 1);    /* heen en weer   */
  --ease-linear:linear;                        /* voortgang, blink */

  /* ---------------------------------------------------------------------------
     11. LAGEN
     ------------------------------------------------------------------------- */
  --z-base:    0;
  --z-sticky:  10;   /* plakkende tabelkop, topbalk        */
  --z-dropdown:100;  /* keuzelijst, menu                   */
  --z-overlay: 200;  /* dimlaag achter dialoog             */
  --z-dialog:  210;
  --z-toast:   300;
  --z-tooltip: 400;
}

/* =============================================================================
   LICHTE MODUS — afgeleide. Zelfde structuur, zelfde namen, andere waarden.
   Donker blijft de standaard: deze modus wordt alleen actief als de gebruiker
   hem expliciet kiest (data-theme="light" op <html>).
   De accenten zijn hier dieper: #4ee39a haalt op wit maar 1,5:1 en is als
   tekstkleur onbruikbaar. Het merkgroen blijft #4ee39a en wordt in lichte modus
   uitsluitend als vulling met donkere tekst gebruikt (--accent-brand).
   ========================================================================== */

[data-theme="light"] {

  /* 1. Vlakken */
  --bg:            #f6f7f9;
  --panel:         #ffffff;
  --panel2:        #f0f2f5;
  --panel3:        #e6e9ee;
  --well:          #eef0f4;

  /* 2. Lijnen */
  --line:          #d5dae2;   /* decoratief                                   */
  --line-strong:   #798494;   /* 3,54:1 op --bg → voldoet aan WCAG 1.4.11     */

  /* 3. Tekst */
  --txt:           #0d1015;   /* 17,78:1  AAA */
  --muted:         #4d5666;   /*  6,90:1  AA  */
  --dim:           #6b7382;   /*  4,45:1  — grens; alleen decoratief          */
  --txt-on-accent: #04140c;   /* op --accent-brand: 11,51:1                   */

  /* 4. Accenten — leesbare varianten */
  --accent:        #067a45;   /* 5,05:1 op --bg · wit erop 5,42:1             */
  --accent2:       #0a6fa8;   /* 5,09:1 · wit erop 5,45:1                     */
  --warn:          #8a5b00;   /* 5,48:1 · wit erop 5,87:1                     */
  --danger:        #c1332d;   /* 5,18:1 · wit erop 5,56:1                     */
  --purple:        #6b3fd0;   /* 6,03:1 · wit erop 6,47:1                     */
  --accent-brand:  #4ee39a;   /* het onveranderde merkgroen, alleen als vlak  */

  --accent-soft:   rgb(6 122 69 / .10);
  --accent2-soft:  rgb(10 111 168 / .10);
  --warn-soft:     rgb(138 91 0 / .10);
  --danger-soft:   rgb(193 51 45 / .10);
  --purple-soft:   rgb(107 63 208 / .10);

  --accent-line:   rgb(6 122 69 / .35);
  --accent2-line:  rgb(10 111 168 / .35);
  --warn-line:     rgb(138 91 0 / .35);
  --danger-line:   rgb(193 51 45 / .35);
  --purple-line:   rgb(107 63 208 / .30);

  --accent-glow:   0 0 0 3px rgb(6 122 69 / .18);

  /* 5. Grafiekseries — dieper, allemaal ≥4,5:1 op --bg */
  --series-1: #067a45;   /* 5,05:1 */
  --series-2: #0a6fa8;   /* 5,09:1 */
  --series-3: #6b3fd0;   /* 6,03:1 */
  --series-4: #8a5b00;   /* 5,48:1 */
  --series-5: #c1332d;   /* 5,18:1 */
  --series-6: #0f7d74;   /* 4,66:1 */
  --series-7: #b1521a;   /* 4,79:1 */
  --series-rest: #6b7382;
  --grid-line: rgb(213 218 226 / .9);

  /* 9. Schaduw — lichter, want geen zwart vlak eronder */
  --shadow-sm: 0 1px 2px rgb(13 16 21 / .06);
  --shadow-md: 0 6px 20px rgb(13 16 21 / .10);
  --shadow-lg: 0 18px 50px rgb(13 16 21 / .14);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* In donkere modus bestaat --accent-brand ook, en is hij gelijk aan --accent.
   De :not() is nodig: [data-theme="light"] staat óók op :root en heeft dezelfde
   specificiteit, dus een kale `:root`-regel hieronder zou de lichte waarde
   (#4ee39a, het merkgroen als vulling) overschrijven met het donkere groen. */
:root:not([data-theme="light"]) { --accent-brand: var(--accent); }

/* =============================================================================
   BASIS — het minimum dat elk oppervlak deelt.
   ========================================================================== */

html { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Elk getal, elk bedrag, elke identifier staat in monospace met vaste
   cijferbreedte. Dit is een merkregel, geen smaakkwestie. */
.num, code, kbd, samp, pre, time, [data-num] {
  font-family: var(--mono);
  font-variant-numeric: var(--num);
}

/* De focusindicator is overal identiek: 2px groen, 2px afstand van het element. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* Beweging is versiering. Wie er last van heeft, krijgt hem niet. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =============================================================================
   cmdz — marketing site stylesheet
   -----------------------------------------------------------------------------
   Spec: docs/21-marketingsite-bouw-en-vormgeving.md (form), docs/13-huisstijl.md
   (brand), docs/16-marketingsite-en-positionering.md (content).

   This file is concatenated after design/huisstijl/tokens.css by build.mjs, so
   every colour, radius, shadow, duration and space value below is a token. Per
   S2 no colour is hardcoded that already has a token.

   One deliberate addition (doc 21 §6 "generous type"): the token type scale is
   an *application* scale — 14px body, 44px display — tuned for dense portal
   screens. A marketing page is read at arm's length and needs a larger scale.
   The block marked SITE SCALE below derives a display scale from the token
   scale; the ratios, weights and letter-spacings are unchanged.

   Per S3 the marketing site defaults to the LIGHT theme. The dark theme is one
   toggle away and is the same tokens.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   SITE SCALE — derived from the token scale, not a second source of truth.
   -------------------------------------------------------------------------- */
:root {
  --fs-hero:      clamp(2.25rem, 1.2rem + 4.4vw, 4rem);
  --fs-section:   clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);
  --fs-subhead:   clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-site-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-site-body: 1rem;
  --fs-site-sm:   0.9375rem;

  /* The living limit bar reads from these; calculator.js writes them. */
  --limit-fill: 62%;

  --header-h: 60px;
}

/* -----------------------------------------------------------------------------
   RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: var(--fs-site-body);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-soft); }

h1, h2, h3, h4 { font-weight: var(--fw-h2); line-height: var(--lh-h2); }

/* Skip link — first focusable element on every page. */
.skip {
  position: absolute;
  left: var(--sp-4);
  top: calc(var(--sp-2) * -12);
  z-index: var(--z-toast);
  background: var(--panel);
  color: var(--txt);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip:focus { top: var(--sp-4); }

/* -----------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--w-site);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.wrap--narrow { max-width: 920px; }
.prose-wrap { max-width: var(--w-prose); margin-inline: auto; }

.section { padding-block: clamp(var(--sp-12), 7vw, var(--sp-24)); }
.section--tight { padding-block: clamp(var(--sp-10), 5vw, var(--sp-16)); }
.section--alt { background: var(--panel2); border-block: var(--bw) solid var(--line); }

.section-head { max-width: 46rem; margin-bottom: var(--sp-10); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  font-weight: var(--fw-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: var(--sp-6);
  height: var(--bw);
  background: currentColor;
  opacity: .5;
}
.eyebrow--purple { color: var(--purple); }
.eyebrow--blue { color: var(--accent2); }

h2.section-title {
  font-size: var(--fs-section);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-h1);
}
h3.card-title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-tight);
}
.section-lead {
  font-size: var(--fs-site-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
  margin-top: var(--sp-4);
  max-width: var(--w-prose);
}
.section-head--center .section-lead { margin-inline: auto; }

.num, code, kbd, samp, pre, time, [data-num] { font-family: var(--mono); }

/* -----------------------------------------------------------------------------
   BUTTONS — doc 13 §8.1
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  border: var(--bw) solid transparent;
  font-size: var(--fs-site-sm);
  font-weight: var(--fw-h4);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-instant) var(--ease-out),
              border-color var(--dur-instant) var(--ease-out),
              transform var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-instant) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent-brand);
  color: var(--txt-on-accent);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { filter: brightness(1.06); box-shadow: var(--shadow-md); }

.btn--secondary {
  background: var(--panel);
  color: var(--txt);
  border-color: var(--line-strong);
}
.btn--secondary:hover { border-color: var(--txt); background: var(--panel2); }

.btn--ghost { background: transparent; color: var(--txt); }
.btn--ghost:hover { background: var(--panel3); }

.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-site-body); }
.btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-caption); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accent2);
  font-weight: var(--fw-h4);
  font-size: var(--fs-site-sm);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(3px); }

/* -----------------------------------------------------------------------------
   HEADER — doc 21 §6 sticky top bar
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: var(--bw) solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}
.header .wrap { display: flex; align-items: center; gap: var(--sp-6); }

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand svg { height: 26px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--sp-1); margin-inline: auto; }
.nav a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-site-sm);
  color: var(--muted);
  transition: color var(--dur-instant) var(--ease-out),
              background var(--dur-instant) var(--ease-out);
}
.nav a:hover { color: var(--txt); background: var(--panel3); }
.nav a[aria-current="page"] { color: var(--txt); font-weight: var(--fw-h4); }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  border: var(--bw) solid var(--line);
  background: var(--panel);
  cursor: pointer;
  color: var(--muted);
  transition: color var(--dur-instant) var(--ease-out),
              border-color var(--dur-instant) var(--ease-out);
}
.theme-toggle:hover { color: var(--txt); border-color: var(--line-strong); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-dark { display: none; }
[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
[data-theme="dark"] .theme-toggle .icon-light { display: none; }

.menu-toggle { display: none; }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-dropdown);
  background: var(--bg);
  padding: var(--sp-6);
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
}
.mobile-menu[data-open="true"] { display: flex; }
.mobile-menu a {
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-h4);
  border-bottom: var(--bw) solid var(--line);
}
.mobile-menu .btn { margin-top: var(--sp-4); }

@media (max-width: 940px) {
  .nav { display: none; }
  .header-actions .btn--secondary { display: none; }
  .menu-toggle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    border: var(--bw) solid var(--line);
    background: var(--panel);
    cursor: pointer;
  }
  .nav-spacer { margin-inline: auto; }
}

/* -----------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-20)) clamp(var(--sp-8), 4vw, var(--sp-12));
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  height: 90%;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 0%, var(--accent-soft), transparent 70%),
    radial-gradient(45% 45% at 85% 15%, var(--accent2-soft), transparent 70%);
}
.hero > .wrap { position: relative; }

.hero-grid {
  display: grid;
  gap: clamp(var(--sp-10), 5vw, var(--sp-16));
  align-items: center;
}
@media (min-width: 981px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.hero h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-display);
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lead {
  font-size: var(--fs-site-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
  margin-top: var(--sp-6);
  max-width: 40rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.hero-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-caption);
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}
.hero-note span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero-note span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--r-full);
  background: var(--accent);
}

/* Living limit bar — doc 13 recognition point 2, doc 21 §6 */
.limit-card {
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-md);
}
.limit-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.limit-card__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-micro);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--dim);
}
.limit-card__state {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--accent);
  background: var(--accent-soft);
  border: var(--bw) solid var(--accent-line);
  border-radius: var(--r-full);
  padding: 2px var(--sp-2);
}
.limit-card__amount {
  font-family: var(--mono);
  font-variant-numeric: var(--num);
  font-size: var(--fs-mono-xl);
  line-height: var(--lh-mono-xl);
  letter-spacing: var(--ls-tight);
}
.limit-card__amount small {
  font-size: var(--fs-mono);
  color: var(--muted);
  font-weight: 400;
}

.limit-bar {
  position: relative;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--well);
  border: var(--bw) solid var(--line);
  overflow: hidden;
  margin-top: var(--sp-5);
}
.limit-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--limit-fill);
  border-radius: var(--r-full);
  background: var(--accent-brand);
  box-shadow: var(--accent-glow);
  transition: width var(--dur-slow) var(--ease-out);
}
.limit-bar__wall {
  position: absolute;
  inset: 0 0 0 auto;
  width: 3px;
  background: var(--danger);
  opacity: .55;
}
.limit-scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-3);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--dim);
}
.limit-card__foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: var(--bw) solid var(--line);
  font-size: var(--fs-caption);
  color: var(--muted);
  line-height: var(--lh-body);
}
.limit-card__foot strong { color: var(--txt); font-weight: var(--fw-h4); }

/* -----------------------------------------------------------------------------
   STAT BLOCK
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-6);
  border-block: var(--bw) solid var(--line);
  padding-block: var(--sp-10);
}
.stat__value {
  font-family: var(--mono);
  font-variant-numeric: var(--num);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, var(--fs-mono-xl));
  line-height: var(--lh-mono-xl);
  letter-spacing: var(--ls-tight);
  color: var(--txt);
}
.stat__value em { font-style: normal; color: var(--accent); }
.stat__label { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }

/* -----------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-5); }
/* Exactly two, not "as many as fit". With auto-fit a four-card grid lands as
   3 + 1 on a wide screen, which reads as a mistake rather than a layout. */
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.grid--5 .card { padding: var(--sp-5); }
.grid--5 .card-title { font-size: var(--fs-h4); }

.card {
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.card p { color: var(--muted); margin-top: var(--sp-3); font-size: var(--fs-site-sm); }
.card p + p { margin-top: var(--sp-3); }
.card__index {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--dim);
  letter-spacing: var(--ls-overline);
  display: block;
  margin-bottom: var(--sp-3);
}
.card__icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  border: var(--bw) solid var(--accent-line);
  margin-bottom: var(--sp-4);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 700;
}
.card--purple { border-color: var(--purple-line); background: var(--panel); }
.card--purple .card__icon { background: var(--purple-soft); color: var(--purple); border-color: var(--purple-line); }
.card--blue .card__icon { background: var(--accent2-soft); color: var(--accent2); border-color: var(--accent2-line); }
.card--warn .card__icon { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }

.card ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.card ul li {
  font-size: var(--fs-site-sm);
  color: var(--muted);
  padding-left: var(--sp-6);
  position: relative;
}
.card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* -----------------------------------------------------------------------------
   STEPS
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--sp-6); counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: var(--sp-8); border-top: 2px solid var(--line); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: calc(var(--sp-4) * -1);
  left: 0;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  color: var(--txt-on-accent);
  background: var(--accent-brand);
  border-radius: var(--r-sm);
  padding: 2px var(--sp-2);
}
.step h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); letter-spacing: var(--ls-tight); }
.step p { margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-site-sm); }

/* -----------------------------------------------------------------------------
   TERMINAL / CODE — doc 13 §8.18
   -------------------------------------------------------------------------- */
.terminal {
  background: var(--well);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--bw) solid var(--line);
  background: var(--panel2);
}
.terminal__dots { display: flex; gap: 6px; }
.terminal__dots i { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--line-strong); opacity: .55; }
.terminal__title {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--dim);
  margin-right: auto;
}
.copy-btn {
  border: var(--bw) solid var(--line);
  background: var(--panel);
  color: var(--muted);
  border-radius: var(--r-sm);
  padding: 3px var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  cursor: pointer;
  transition: color var(--dur-instant) var(--ease-out), border-color var(--dur-instant) var(--ease-out);
}
.copy-btn:hover { color: var(--txt); border-color: var(--line-strong); }
.copy-btn[data-copied="true"] { color: var(--accent); border-color: var(--accent-line); }

.terminal pre {
  margin: 0;
  padding: var(--sp-5);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: 1.75;
  color: var(--txt);
}
.terminal .c-prompt { color: var(--accent); }
.terminal .c-dim { color: var(--dim); }
.terminal .c-ok { color: var(--accent); }
.terminal .c-info { color: var(--accent2); }
.terminal .c-warn { color: var(--warn); }
.terminal .c-purple { color: var(--purple); }
.terminal .c-key { color: var(--accent2); }
.terminal .c-str { color: var(--accent); }

pre.code-block {
  background: var(--well);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: 1.7;
}
:not(pre) > code {
  font-size: 0.9em;
  background: var(--panel3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-xs);
  padding: 1px var(--sp-2);
  color: var(--accent2);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; border: var(--bw) solid var(--line); border-radius: var(--r-xl); background: var(--panel); }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-site-sm);
  min-width: 640px;
}
table.data th, table.data td {
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--bw) solid var(--line);
  vertical-align: top;
}
/* A table used as the visual half of a split sits in a much narrower column
   than a full-width one, so the 640px floor would force a scrollbar for two
   short columns. */
.split table.data { min-width: 0; }
.split table.data th, .split table.data td { padding: var(--sp-3) var(--sp-4); }
.split table.data td:first-child { white-space: normal; }

table.data thead th {
  font-size: var(--fs-micro);
  font-weight: var(--fw-micro);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--dim);
  background: var(--panel2);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td:first-child { font-weight: var(--fw-h4); white-space: nowrap; }
table.data td { color: var(--muted); }
table.data td:first-child { color: var(--txt); }
table.data tr[data-us="true"] td:first-child { color: var(--accent); }
table.data tr[data-us="true"] { background: var(--accent-soft); }
.cell-yes { color: var(--accent); font-weight: var(--fw-h4); }
.cell-no { color: var(--danger); font-weight: var(--fw-h4); }
.cell-partial { color: var(--warn); font-weight: var(--fw-h4); }
.table-note { margin-top: var(--sp-4); font-size: var(--fs-caption); color: var(--dim); }

/* -----------------------------------------------------------------------------
   FAQ — <details>, works without JS
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--sp-3); max-width: 56rem; margin-inline: auto; }
.faq details {
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-5);
  font-weight: var(--fw-h4);
  font-size: var(--fs-site-body);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--accent);
  font-size: var(--fs-h3);
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] { border-color: var(--line-strong); }
.faq .faq__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--muted); font-size: var(--fs-site-sm); max-width: var(--w-prose); }
.faq .faq__body p + p { margin-top: var(--sp-3); }

/* -----------------------------------------------------------------------------
   CALCULATOR
   -------------------------------------------------------------------------- */
.calc {
  display: grid;
  gap: var(--sp-6);
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-2xl);
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
}
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: start; } }

.calc__controls { display: grid; gap: var(--sp-6); }
.calc fieldset { border: 0; padding: 0; min-inline-size: 0; }
.calc legend { padding: 0; }
.field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-h4);
  margin-bottom: var(--sp-3);
}
.field label output {
  font-family: var(--mono);
  font-variant-numeric: var(--num);
  font-size: var(--fs-mono);
  color: var(--accent2);
}
.field input[type="range"] {
  width: 100%;
  appearance: none;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--panel3);
  border: var(--bw) solid var(--line);
  cursor: pointer;
}
.field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: var(--r-full);
  background: var(--accent-brand);
  border: 2px solid var(--panel);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.field input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 2px solid var(--panel);
  border-radius: var(--r-full);
  background: var(--accent-brand);
  cursor: grab;
}
.field .ticks {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--dim);
}

.segmented { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  border: var(--bw) solid var(--line);
  background: var(--panel2);
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--muted);
  margin: 0;
  transition: all var(--dur-instant) var(--ease-out);
}
.segmented input:checked + label {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--fw-h4);
}
.segmented input:focus-visible + label { box-shadow: var(--focus-ring); }

.calc__result {
  background: var(--panel2);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
}
.calc__amount {
  font-family: var(--mono);
  font-variant-numeric: var(--num);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--accent);
}
.calc__amount small { font-size: var(--fs-mono); color: var(--muted); display: block; margin-top: var(--sp-2); letter-spacing: 0; }
.calc__breakdown { margin-top: var(--sp-5); border-top: var(--bw) solid var(--line); padding-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.calc__row { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }
.calc__row span:last-child { font-family: var(--mono); font-variant-numeric: var(--num); color: var(--txt); }
.calc__verdict {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  border: var(--bw) solid var(--accent-line);
  font-size: var(--fs-sm);
  color: var(--txt);
}
.calc__verdict[data-state="over"] { background: var(--warn-soft); border-color: var(--warn-line); }

/* -----------------------------------------------------------------------------
   REGIONS
   -------------------------------------------------------------------------- */
.regions { display: grid; gap: var(--sp-6); align-items: start; }
.regions__panel { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 860px) { .regions__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.worldmap {
  position: relative;
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-2xl);
  padding: var(--sp-6) var(--sp-4);
  aspect-ratio: 2.55 / 1;
}
.worldmap svg { width: 100%; height: 100%; }
.worldmap .land { fill: var(--panel3); stroke: var(--line); stroke-width: .5; }
.worldmap .pin { cursor: pointer; }
.worldmap .pin circle.dot { fill: var(--accent-brand); stroke: var(--bg); stroke-width: 1.5; }
.worldmap .pin circle.halo { fill: var(--accent); opacity: .18; }
.worldmap .pin[data-state="planned"] circle.dot { fill: var(--dim); }
.worldmap .pin[data-state="planned"] circle.halo { fill: var(--dim); opacity: .12; }
.worldmap .pin[aria-pressed="true"] circle.halo { opacity: .34; }
.worldmap .pin line.leader { stroke: var(--line-strong); stroke-width: .6; opacity: .7; }
.worldmap .pin[data-state="planned"] line.leader { opacity: .4; }
.worldmap .pin[aria-pressed="true"] circle.dot { r: 4; }
/* Four European pins sit within a few pixels of each other at this scale, so a
   label per pin is an unreadable pile. Only the selected one is labelled. */
.worldmap .pin text {
  font-family: var(--mono);
  font-size: 7px;
  fill: var(--txt);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.worldmap .pin[aria-pressed="true"] text, .worldmap .pin:hover text { opacity: 1; }
.worldmap .pin:focus-visible { outline: none; }
.worldmap .pin:focus-visible circle.halo { opacity: .34; }
.worldmap .pin:focus-visible text { opacity: 1; }

.region-list { display: grid; gap: var(--sp-2); }
.region-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-instant) var(--ease-out), background var(--dur-instant) var(--ease-out);
}
.region-row:hover, .region-row[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
.region-row__code { font-family: var(--mono); font-size: var(--fs-mono); color: var(--accent2); }
.region-row__name { font-size: var(--fs-site-sm); }
.region-row__name em { font-style: normal; display: block; color: var(--dim); font-size: var(--fs-caption); }
.region-row__lat { font-family: var(--mono); font-variant-numeric: var(--num); font-size: var(--fs-mono-sm); color: var(--muted); white-space: nowrap; }
.region-row[data-state="planned"] { opacity: .62; }

/* -----------------------------------------------------------------------------
   MCP / AGENT SECTION — purple
   -------------------------------------------------------------------------- */
.agent-section { position: relative; overflow: hidden; }
.agent-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 15% 0%, var(--purple-soft), transparent 70%);
  pointer-events: none;
}
.agent-section > .wrap { position: relative; }
.tool-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.tool-chip {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  border: var(--bw) solid var(--line);
  background: var(--panel);
  color: var(--muted);
}
.tool-chip[data-blocked="true"] {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-soft);
  text-decoration: line-through;
}
.tool-chip[data-group="agent"] { color: var(--purple); border-color: var(--purple-line); background: var(--purple-soft); }

.profile-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.profile {
  border: var(--bw) solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  background: var(--panel);
}
.profile[data-recommended="true"] { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.profile__name { font-family: var(--mono); font-size: var(--fs-mono); color: var(--purple); }
.profile__count { font-family: var(--mono); font-variant-numeric: var(--num); font-size: var(--fs-mono-lg); margin-top: var(--sp-2); }
.profile__count small { font-size: var(--fs-mono-sm); color: var(--dim); }
.profile p { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-3); }
.badge-rec {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: var(--bw) solid var(--accent-line);
  border-radius: var(--r-full);
  padding: 1px var(--sp-2);
  margin-left: var(--sp-2);
}

/* -----------------------------------------------------------------------------
   SPLIT / FEATURE ROWS
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(var(--sp-8), 5vw, var(--sp-16)); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--reverse > *:first-child { order: 2; }
}

.checklist { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.checklist li { position: relative; padding-left: var(--sp-8); font-size: var(--fs-site-sm); color: var(--muted); }
.checklist li strong { color: var(--txt); font-weight: var(--fw-h4); }
.checklist li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-micro);
  font-weight: 700;
}
.checklist--cross li::before { content: "×"; background: var(--danger-soft); color: var(--danger); }

/* -----------------------------------------------------------------------------
   PROSE (legal, blog, long copy)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--w-prose); font-size: var(--fs-site-body); line-height: 1.75; }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-tight);
  margin-top: var(--sp-12);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}
.prose h3 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-8);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { color: var(--muted); }
.prose strong { color: var(--txt); font-weight: var(--fw-h4); }
.prose a { color: var(--accent2); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { display: grid; gap: var(--sp-2); padding-left: var(--sp-6); color: var(--muted); }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--sp-5);
  color: var(--txt);
  font-size: var(--fs-site-lead);
}
.prose hr { border: 0; border-top: var(--bw) solid var(--line); margin-block: var(--sp-10); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose table th, .prose table td { border: var(--bw) solid var(--line); padding: var(--sp-3); text-align: left; }
.prose table th { background: var(--panel2); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--dim); }

.page-header { padding-block: clamp(var(--sp-10), 6vw, var(--sp-16)) var(--sp-8); border-bottom: var(--bw) solid var(--line); }
.page-header h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-display);
  text-wrap: balance;
}
.page-header .section-lead { font-size: var(--fs-site-lead); }
.page-meta { margin-top: var(--sp-5); font-family: var(--mono); font-size: var(--fs-mono-sm); color: var(--dim); display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Table of contents for legal pages */
.toc {
  background: var(--panel2);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  margin-bottom: var(--sp-10);
}
.toc h2 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--dim); margin-bottom: var(--sp-3); }
.toc ol { display: grid; gap: var(--sp-2); }
.toc a { font-size: var(--fs-sm); color: var(--accent2); }
.toc a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   BLOG
   -------------------------------------------------------------------------- */
.post-list { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.post-card h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-tight); }
.post-card p { color: var(--muted); font-size: var(--fs-site-sm); flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--mono); font-size: var(--fs-mono-sm); color: var(--dim); }
.cat {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  padding: 2px var(--sp-2);
  border-radius: var(--r-xs);
  border: var(--bw) solid var(--line);
  background: var(--panel2);
  color: var(--muted);
}
.cat[data-cat="Product"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.cat[data-cat="AI & agents"] { color: var(--purple); border-color: var(--purple-line); background: var(--purple-soft); }
.cat[data-cat="Guides"] { color: var(--accent2); border-color: var(--accent2-line); background: var(--accent2-soft); }
.cat[data-cat="Engineering"] { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); }

/* Changelog */
.timeline { display: grid; gap: var(--sp-8); position: relative; padding-left: var(--sp-8); }
.timeline::before { content: ""; position: absolute; left: 5px; top: var(--sp-2); bottom: var(--sp-2); width: var(--bw); background: var(--line); }
.timeline__item { position: relative; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-8) * -1);
  top: 7px;
  width: 11px; height: 11px;
  border-radius: var(--r-full);
  background: var(--accent-brand);
  border: 2px solid var(--bg);
}
.timeline__date { font-family: var(--mono); font-size: var(--fs-mono-sm); color: var(--dim); }
.timeline__item h3 { font-size: var(--fs-h4); margin-top: var(--sp-1); }
.timeline__item ul { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.timeline__item li { font-size: var(--fs-site-sm); color: var(--muted); padding-left: var(--sp-5); position: relative; }
.timeline__item li::before { content: "—"; position: absolute; left: 0; color: var(--dim); }

/* -----------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.cta {
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-2xl);
  padding: clamp(var(--sp-8), 5vw, var(--sp-16));
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cta::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 100%;
  background: radial-gradient(50% 100% at 50% 100%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta h2 { font-size: var(--fs-section); letter-spacing: var(--ls-tight); line-height: var(--lh-h1); }
.cta p { color: var(--muted); margin-top: var(--sp-4); max-width: 44rem; margin-inline: auto; font-size: var(--fs-site-lead); }
.cta .hero-actions { justify-content: center; }
.cta .hero-note { justify-content: center; }

/* Seal — doc 13 recognition point 5 */
.seal {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--accent);
  border: var(--bw) solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
}

/* -----------------------------------------------------------------------------
   CONTACT FORM
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); max-width: 34rem; }
.form label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-h4); margin-bottom: var(--sp-2); }
.form input, .form textarea, .form select {
  width: 100%;
  background: var(--panel);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-site-sm);
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.form textarea { min-height: 9rem; resize: vertical; }
.form .hint { font-size: var(--fs-caption); color: var(--dim); margin-top: var(--sp-2); }

/* -----------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer { border-top: var(--bw) solid var(--line); background: var(--panel2); padding-block: var(--sp-16) var(--sp-10); margin-top: var(--sp-8); }
.footer__grid { display: grid; gap: var(--sp-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.footer__brand { grid-column: 1 / -1; max-width: 22rem; }
@media (min-width: 900px) { .footer__brand { grid-column: auto; } }
.footer__brand p { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-4); }
.footer h2 {
  font-size: var(--fs-micro);
  font-weight: var(--fw-micro);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--sp-4);
}
.footer ul { display: grid; gap: var(--sp-3); }
.footer li a { font-size: var(--fs-sm); color: var(--muted); }
.footer li a:hover { color: var(--txt); }
.footer__bottom {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: var(--bw) solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-caption);
  color: var(--dim);
}
.footer__legal-line { font-family: var(--mono); font-size: var(--fs-mono-sm); }
.footer__machine { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.footer__machine a {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--muted);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-full);
  padding: 2px var(--sp-3);
}
.footer__machine a:hover { color: var(--accent); border-color: var(--accent-line); }

/* -----------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.center { text-align: center; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.accent { color: var(--accent); }