/* ============================================================================
   m00labs — design system v9 (2026-10-02, t_ee9f60a2)
   ----------------------------------------------------------------------------
   ASSEMBLED by site-src/scripts/build-v9-css.mjs. Do not hand-edit: edit
   site-src/v9/additions.css (new components) or the sources it names, then rerun.

   This is the system the ELEVEN subpages now share, plus /privacy and /terms.
   New filename because the platform serves /assets/* with
   `cache-control: public, max-age=31536000, immutable`, so site.v8.css — already
   published and cached at the edge — cannot be extended in place.

   Three parts, in cascade order:
     1. the v8 system, byte-verbatim, tokens block included
     2. new components the subpages need (page head, prose, footer legal, form
        status) — site-src/v9/additions.css
     3. a stated COMPATIBILITY BRIDGE: site.v7.css's body sections carried forward
        and re-tokenised onto the v8 ramp, so the existing body markup inherits the
        tighter type, spacing and colour discipline instead of being rebuilt (a
        rebuild of ~1000 class attributes would have risked the copy).

   Chrome from v7 is excluded — the ported pages use the v8 chrome. Folding the
   remaining body blocks into named v8 components is recorded in the improvement
   backlog.

   The homepage still runs site.v7.css: promoting the approved homepage rebuild is a
   separate founder call (feature:redesign_state). Nothing here touches it.

   Colliding rules dropped (v8 owns the class): 56
   ========================================================================== */

/* ============================================================================
   m00labs — design system v8 (2026-09-30)
   ----------------------------------------------------------------------------
   NEW versioned shared asset. The platform edge serves /assets/* with
   `cache-control: public, max-age=31536000, immutable`, so a content change MUST
   ship under a new filename. assets/site.v7.css is untouched and still carries
   the twelve live pages.

   Scope of this rebuild (founder task t_7cc5d62fea065b8acbb5193a179c9c29):
   "keep the white-and-green enterprise look, done properly — tighter type,
   spacing and components, restrained motion, real imagery".

   What actually changed against v7, measured rather than asserted:
     1. TYPE. v7 mixed tokens with ~60 one-off literals (0.8125rem, 0.875rem,
        1.0625rem, 19px, 16.5px, 14.5px). v8 has ONE numeric ramp (--fs-2xs …
        --fs-4xl + --fs-lede/--fs-num); every size in this file is a token and
        site-src/scripts/check-design-tokens.mjs fails on any literal font-size.
     2. SPACING. One 8 px scale (--sp-1 … --sp-8) plus three derived layout
        tokens (--section-y, --section-y-tight, --gutter). Section rhythm is a
        token, not a per-section clamp.
     3. COMPONENTS. A named, reusable set (buttons, links, cards/rows, section
        heads, header/nav, footer, form fields, figures/plates, band, spec strip,
        rail, segmented control) instead of page-local ad-hoc rules.
     4. ELEVATION. Surface tint + hairline only; there are no shadows anywhere.
     5. IMAGERY. Photography is now permitted (a founder-directed change to the
        imagery direction, recorded in design-system/DESIGN.md); icons, wordmark
        and UI chrome stay inline SVG.
     6. MOTION. Two durations (140/220 ms) and one curve; the reveal layer is
        progressive enhancement and prefers-reduced-motion always renders the
        final state.

   Palette is frozen to the founder constraint: #ffffff / #0d0d0d / #10a37f /
   #6e6e6e, light identity, no new hues. Text contrast was checked against WCAG
   AA before writing: ink on white 19:1, slate on white 5.1:1, teal-deep on white
   5.3:1. Teal itself is 3.2:1 on white and is therefore an indicator / fill /
   non-text-UI colour only — never a ground behind white body text.
   ========================================================================== */

/* tokens:start */
:root {
  /* ---------- neutral ramp (the only hues in the system) ---------- */
  --c-white: #ffffff;
  --c-pearl: #f5f5f5;
  --c-hairline: #e5e5e5;
  --c-mist: #d4d4d4;
  --c-slate: #6e6e6e;
  --c-slate-soft: #767676;
  --c-slate-light: #a3a3a3;
  --c-ink: #0d0d0d;
  --c-ink-2: #141414;
  --c-ink-3: #1c1c1c;
  --c-ink-4: #262626;

  /* ---------- accent ---------- */
  --c-teal: #10a37f;        /* indicator / fill / non-text UI (3.2:1 on white) */
  --c-teal-deep: #0a7a5e;   /* text-safe accent (5.3:1 on white) */
  --c-teal-dark: #35c39e;   /* text-safe accent on dark ground */
  --c-teal-wash: #eaf7f2;   /* tinted ground for accent panels */

  /* ---------- semantic (status only, never decoration) ---------- */
  --c-danger: #b42318;
  --c-danger-wash: #fef3f2;
  --c-success: #0a7a5e;
  --c-warning: #b54708;

  /* ---------- type families ---------- */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- type ramp (text-shift rhythm; ratios 1.13–1.33 between steps) ---------- */
  --fs-2xs: 0.75rem;                              /* 12 — uppercase labels            */
  --fs-xs: 0.8125rem;                             /* 13 — meta, table cells           */
  --fs-sm: 0.875rem;                              /* 14 — small UI, captions          */
  --fs-md: 0.9375rem;                             /* 15 — dense secondary body        */
  --fs-base: 1rem;                                /* 16 — body floor                  */
  --fs-lg: 1.0625rem;                             /* 17 — lede (mobile)               */
  --fs-xl: 1.25rem;                               /* 20 — card / list titles          */
  --fs-2xl: clamp(1.375rem, 1.6vw, 1.625rem);     /* 22 → 26 — sub-section heads      */
  --fs-3xl: clamp(1.75rem, 3vw, 2.375rem);        /* 28 → 38 — section heads          */
  --fs-4xl: clamp(2.5rem, 5.2vw, 3.5rem);         /* 40 → 56 — page display           */
  --fs-lede: clamp(var(--fs-lg), 1.15vw, var(--fs-xl)); /* 17 → 20 — lede (desktop)   */
  --fs-num: clamp(1.5rem, 2.2vw, 1.875rem);       /* 24 → 30 — step numerals          */

  /* ---------- line heights, tracking, weights ---------- */
  --lh-display: 1.15;
  --lh-head: 1.2;
  --lh-body: 1.6;
  --lh-tight: 1.35;

  --tr-display: -0.03em;
  --tr-head: -0.018em;
  --tr-body: -0.005em;
  --tr-label: 0.12em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---------- spacing scale — 8 px rhythm ---------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;

  /* ---------- layout ---------- */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-y: clamp(80px, 8.5vw, var(--sp-8));   /* floor 80 px, ceiling = --sp-8 */
  --section-y-tight: clamp(56px, 5.5vw, 88px);
  --measure: 68ch;
  --hairline: 1px;

  /* ---------- radii ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------- elevation: surface steps, no shadows ---------- */
  --elev-0: none;                 /* flush: hairline border only            */
  --elev-1: var(--c-pearl);       /* raised surface: tinted ground          */
  --elev-2: var(--c-white);       /* floating surface: tinted ground + ring */
  --ring: 0 0 0 1px var(--c-hairline);

  /* ---------- motion ---------- */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- light theme roles (default) ---------- */
  --bg: var(--c-white);
  --bg-sunken: var(--c-pearl);
  --surface: var(--c-white);
  --surface-alt: var(--c-pearl);
  --border: var(--c-hairline);
  --border-strong: var(--c-mist);
  --border-control: #8c8c8c;      /* control boundary: WCAG 1.4.11 ≥ 3:1 */
  --fg: var(--c-ink);
  --fg-muted: var(--c-slate);
  --fg-subtle: var(--c-slate-soft);
  --accent: var(--c-teal);
  --accent-text: var(--c-teal-deep);
  --accent-ground: var(--c-teal-wash);
  --accent-hover: var(--c-teal-deep);
  --focus-ring: var(--c-teal-deep);
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-white);
  --btn-bg-hover: #000000;
  --band-bg: var(--c-ink);
  --band-fg: var(--c-pearl);
  --band-fg-muted: var(--c-slate-light);
  --shadow-none: none;
}

[data-theme="dark"] {
  --c-teal-wash: #10241f;
  --bg: var(--c-ink);
  --bg-sunken: var(--c-ink-2);
  --surface: var(--c-ink-2);
  --surface-alt: var(--c-ink-3);
  --border: var(--c-ink-4);
  --border-strong: var(--c-ink-4);
  --border-control: #8a8a8a;
  --fg: var(--c-pearl);
  --fg-muted: var(--c-slate-light);
  --fg-subtle: var(--c-slate-light);
  --accent: var(--c-teal);
  --accent-text: var(--c-teal-dark);
  --accent-ground: var(--c-teal-wash);
  --accent-hover: var(--c-teal-dark);
  --focus-ring: var(--c-teal-dark);
  --btn-bg: var(--c-pearl);
  --btn-fg: var(--c-ink);
  --btn-bg-hover: var(--c-white);
  --band-bg: var(--c-ink-2);
  --band-fg: var(--c-pearl);
  --band-fg-muted: var(--c-slate-light);
  --elev-1: var(--c-ink-3);
  --elev-2: var(--c-ink-3);
  --ring: 0 0 0 1px var(--c-ink-4);
  color-scheme: dark;
}
/* tokens:end */

/* ------------------------------------------------------------ 01 reset/base */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* One focus treatment everywhere; never removed, only moved. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

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

/* ---------------------------------------------------------- 02 typography */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-head);
  line-height: var(--lh-head);
  margin: 0;
  text-wrap: balance;
}
/* Every heading level carries its ramp step, so an unclassed heading can never
   fall back to body size. */
h1 { font-size: var(--fs-4xl); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); font-weight: var(--fw-medium); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin: 0;
  text-wrap: balance;
}

.h2 { font-size: var(--fs-3xl); }
.h3 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
.h4 { font-size: var(--fs-xl); font-weight: var(--fw-medium); }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--fs-lede);
  color: var(--fg-muted);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

.body-sm { font-size: var(--fs-sm); color: var(--fg-muted); line-height: var(--lh-body); }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.measure { max-width: var(--measure); }

/* Mono micro-label: the site's one "instrument" voice, used for eyebrows,
   figure headers and step numerals. */
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 var(--sp-2);
}
.label--accent { color: var(--accent-text); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--sp-3);
}

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

/* --------------------------------------------------------------- 03 layout */

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

.section { padding: var(--section-y) 0; }
.section--tight { padding: var(--section-y-tight) 0; }
.section--sunken {
  background: var(--bg-sunken);
  border-top: var(--hairline) solid var(--border);
  border-bottom: var(--hairline) solid var(--border);
}
.section--flush-top { padding-top: var(--section-y-tight); }

.grid { display: grid; gap: var(--sp-5); }
.grid--halves { grid-template-columns: minmax(0, 1fr); }
.grid--cards { grid-template-columns: minmax(0, 1fr); }
.grid--steps { grid-template-columns: minmax(0, 1fr); }
.grid--wide { margin-inline: calc(var(--gutter) * -1); }   /* bleed to the gutter */

@media (min-width: 720px) {
  .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--halves { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); align-items: center; }
  .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--wide { margin-inline: 0; }
}

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

.rule {
  border: 0;
  border-top: var(--hairline) solid var(--border);
  margin: 0;
}

/* ---------------------------------------------------------- 04 links */

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--accent-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.link:hover { color: var(--accent-hover); text-decoration: underline; }

.link--arrow::after {
  content: "";
  width: 14px;
  height: 8px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  transition: transform var(--dur-fast) var(--ease);
}
.link--arrow:hover::after { transform: translateX(3px); }

.link--quiet { color: var(--fg-muted); font-size: var(--fs-sm); }
.link--quiet:hover { color: var(--fg); }

/* -------------------------------------------------------- 05 buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0;
  border: var(--hairline) solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 52px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-md); }
.btn--sm { min-height: 40px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bg);
}
.btn--primary:hover { background: var(--btn-bg-hover); color: var(--btn-fg); border-color: var(--btn-bg-hover); }

.btn--secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-control);
}
.btn--secondary:hover { border-color: var(--fg); color: var(--fg); background: var(--surface-alt); }

.btn--ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: var(--sp-1); }
.btn--ghost:hover { color: var(--accent-text); }

/* ----------------------------------------------------------- 06 header */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: var(--hairline) solid transparent;
  transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.hdr[data-scrolled="true"] { border-bottom-color: var(--border); }

.hdr__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.04em;
  color: var(--fg);
  text-decoration: none;
  flex: 0 0 auto;
}
.brand:hover { color: var(--fg); }
.brand__accent { color: var(--accent-text); }

.nav { display: none; }
@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }
}
.nav__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  text-decoration: none;
  padding: var(--sp-1) 0;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--fg); }

.hdr__tools { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.hdr__cta { display: none; }
@media (min-width: 620px) { .hdr__cta { display: inline-flex; } }

/* Segmented control (colour theme) */
.seg {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-alt);
}
@media (min-width: 1120px) { .seg { display: inline-flex; } }
.seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-subtle);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.seg__btn:hover { color: var(--fg); }
.seg__btn[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--ring); }
.seg__icon { width: 17px; height: 17px; }

/* Mobile nav */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}
@media (min-width: 900px) { .burger { display: none; } }
.burger__bar { display: block; width: 18px; height: 1.5px; margin: 0 auto; background: var(--fg); }

.mnav {
  display: none;
  border-top: var(--hairline) solid var(--border);
  background: var(--bg);
}
.mnav[data-open="true"] { display: block; }
@media (min-width: 900px) { .mnav[data-open="true"] { display: none; } }
.mnav__list { padding: var(--sp-2) 0 var(--sp-4); }
.mnav__link {
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--fg);
  text-decoration: none;
  border-bottom: var(--hairline) solid var(--border);
}
.mnav__cta { margin-top: var(--sp-3); }

/* ------------------------------------------------------------- 07 hero */

.hero {
  padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 72px);
  background: var(--bg);
  border-bottom: var(--hairline) solid var(--border);
}
.hero__grid { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); }
}
.hero__eyebrow { margin-bottom: var(--sp-3); }
.hero__title { margin-bottom: var(--sp-3); }
.hero__lede { margin-bottom: var(--sp-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.hero__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

/* --------------------------------------------------------- 08 spec strip */

.specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-5);
  margin-top: clamp(32px, 4vw, 56px);
  border-top: var(--hairline) solid var(--border);
}
@media (min-width: 620px) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.specs__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg);
}
.specs__tick { flex: 0 0 auto; width: 15px; height: 15px; color: var(--accent); align-self: center; }

/* ------------------------------------------------------ 09 section head */

.shead { max-width: var(--measure); margin-bottom: clamp(32px, 4vw, var(--sp-6)); }
.shead__title { margin-bottom: var(--sp-2); }
.shead--split { display: grid; gap: var(--sp-3); max-width: none; }
@media (min-width: 1000px) {
  .shead--split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--sp-6); align-items: end; }
  .shead--split .shead__lede { margin-bottom: 0; }
}

/* ------------------------------------------------------------ 10 rows */

/* Editorial list, not a repeated card grid: hairline-divided rows read as a
   price/scope sheet rather than three generic boxes. */
.rows { border-top: var(--hairline) solid var(--border); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-bottom: var(--hairline) solid var(--border);
}
@media (min-width: 860px) {
  .row { grid-template-columns: 148px minmax(0, 1fr) 168px; gap: var(--sp-5); align-items: start; }
}
.row__label { align-self: start; }
.row__title { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.row__text { font-size: var(--fs-sm); color: var(--fg-muted); max-width: 62ch; }
.row__action { align-self: start; }
@media (min-width: 860px) { .row__action { justify-self: end; text-align: right; } }

/* ----------------------------------------------------------- 11 cards */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  height: 100%;
}
.card--quiet { background: transparent; border-radius: 0; border: 0; border-top: var(--hairline) solid var(--border); padding: var(--sp-4) 0 0; }
.card--accent { background: var(--accent-ground); border-color: transparent; }
.card__title { font-size: var(--fs-xl); margin: 0; }
.card__text { font-size: var(--fs-sm); color: var(--fg-muted); }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }

.cap { padding: var(--sp-4); background: var(--bg); border: var(--hairline) solid var(--border); border-radius: var(--r-lg); }
.cap__num { margin-bottom: var(--sp-3); }
.cap__title { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.cap__text { font-size: var(--fs-sm); color: var(--fg-muted); }

/* ------------------------------------------------------------ 12 rail */

.rail { display: grid; gap: var(--sp-5); }
@media (min-width: 720px) { .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }

.step { padding-top: var(--sp-3); border-top: var(--hairline) solid var(--border); }
.step--accent { border-top-color: var(--accent); }
.step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-num);
  font-weight: var(--fw-regular);
  color: var(--fg-subtle);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}
.step__title { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.step__text { font-size: var(--fs-sm); color: var(--fg-muted); }

/* --------------------------------------------------- 13 figures & plates */

.figure {
  display: flex;
  flex-direction: column;
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  overflow: hidden;
}
.figure__frame { position: relative; background: var(--surface-alt); }
.figure__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.figure__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--hairline) solid var(--border);
}
.figure__dots { display: inline-flex; gap: 5px; }
.figure__dots i { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--border-strong); display: block; }
.figure__caption {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  border-top: var(--hairline) solid var(--border);
}

.plate { padding: var(--sp-3); }
.plate__body { display: block; }
.plate__art { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------- 14 band (CTA) */

.band {
  background: var(--band-bg);
  color: var(--band-fg);
  padding: var(--section-y-tight) 0;
}
.band__title { color: var(--band-fg); margin-bottom: var(--sp-2); }
.band__text { color: var(--band-fg-muted); max-width: var(--measure); }
.band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-5); }
.band .btn--primary { background: var(--band-fg); color: var(--c-ink); border-color: var(--band-fg); }
.band .btn--primary:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-ink); }
.band a.band__mail { color: var(--band-fg); text-decoration: underline; }
.band a.band__mail:hover { color: var(--c-white); }

/* ----------------------------------------------------------- 15 footer */

.ftr {
  background: var(--bg-sunken);
  border-top: var(--hairline) solid var(--border);
  padding: var(--sp-7) 0 var(--sp-4);
}
.ftr__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 860px) { .ftr__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); } }
.ftr__brand {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.04em;
  color: var(--fg);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--sp-2);
}
.ftr__note { font-size: var(--fs-sm); color: var(--fg-muted); max-width: 46ch; }
.ftr__title { margin-bottom: var(--sp-2); }
.ftr__nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.ftr__nav a { font-size: var(--fs-sm); color: var(--fg-muted); text-decoration: none; }
.ftr__nav a:hover { color: var(--fg); text-decoration: underline; }
.ftr__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: var(--hairline) solid var(--border);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}
.ftr__bottom p { margin: 0; }

/* ------------------------------------------------------ 16 form controls */

.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg); }
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--surface);
  border: var(--hairline) solid var(--border-control);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.field__textarea { min-height: 132px; resize: vertical; }
.field__input:focus-visible,
.field__select:focus-visible,
.field__textarea:focus-visible { border-color: var(--focus-ring); }
.field__hint { font-size: var(--fs-xs); color: var(--fg-subtle); }
.field__error { font-size: var(--fs-xs); color: var(--c-danger); }
.field--invalid .field__input,
.field--invalid .field__select,
.field--invalid .field__textarea { border-color: var(--c-danger); background: var(--c-danger-wash); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-ground);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------- 17 utilities */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

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

/* A note strip used for honest labelling (illustrative imagery, synthetic
   demo data). Deliberately quiet: it is information, not a warning. */
.note {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--accent);
  background: var(--surface-alt);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

/* ------------------------------------------------------------ 18 motion */

/* Progressive enhancement only: the reveal gate is opened by the script on an
   element that supports it, and is dropped again by a safety timeout, so no-JS
   and reduced-motion visitors always see the final state. */
[data-reveal="on"] .reveal {
  opacity: 0;
  transform: translateY(14px);
}
[data-reveal="on"] .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.is-in { transition-delay: var(--reveal-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal="on"] .reveal,
  [data-reveal="on"] .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .link--arrow:hover::after { transform: none; }
  .btn:active { transform: none; }
}

/* ------------------------------------------------- 19 schematic figures */

/* The diagram palette is a derived alias layer: it introduces NO new colours,
   it only maps the core roles onto SVG strokes, so the art follows the theme
   automatically. Scoped to .diagram so it can never leak onto UI chrome.
   (This block is appended by site-src/scripts/append-art-css.mjs; the lint in
   check-design-tokens.mjs still sees zero raw colours outside the token block.) */
.diagram {
  --dg-line: var(--fg);
  --dg-mute: var(--border);
  --dg-soft: var(--fg-subtle);
  --dg-fill: var(--surface);
  --dg-accent: var(--accent);
  --dg-accent-2: var(--accent-text);
  --dg-grid-stroke: var(--border);
}

.diagram .sa-line   { fill: none; stroke: var(--dg-line);   stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.diagram .sa-mute   { fill: none; stroke: var(--dg-mute);   stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.diagram .sa-soft   { fill: none; stroke: var(--dg-soft);   stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.diagram .sa-accent { fill: none; stroke: var(--dg-accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.diagram .sa-check  { fill: none; stroke: var(--dg-accent-2); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.diagram .sa-dash   { stroke-dasharray: 6 7; }
.diagram .sa-fill   { fill: var(--dg-fill); }
.diagram .sa-accent-fill { fill: var(--dg-accent); }
.diagram .sa-grid   { fill: url(#sysGrid); }
.diagram [stroke]   { vector-effect: non-scaling-stroke; }

/* ------------------------------------------- 20 square figure modifier */

/* A square source image (1:1) should render 1:1 rather than being centre-cropped
   to the default 3:2 frame. Used by the homepage's trust section figure. */
.figure--square .figure__img { aspect-ratio: 1 / 1; }


/* ============================ v9 ADDITIONS ============================ */
/* ============================================================================
   m00labs — design system v9 ADDITIONS (2026-10-02, t_ee9f60a2)
   ----------------------------------------------------------------------------
   Appended by site-src/scripts/build-v9-css.mjs after the v8 system and before
   the re-tokenised v7 bridge. Everything here is new: the components the eleven
   existing pages need that the v8 system did not yet define.

   Rules obeyed exactly as in v8: every size is a --fs-* step, every colour is a
   token, spacing comes from the 8px scale, depth is surface + hairline (no
   shadows), and motion has a reduced-motion path.
   ========================================================================== */

/* ------------------------------------------------------ 21 page head */

/* The subpage masthead. The homepage needed only a hero; every other page opens
   with a breadcrumb, an h1 and a supporting line, sometimes with one action. */
.phead {
  padding: var(--section-y-tight) 0;
  border-bottom: var(--hairline) solid var(--border);
}
.phead__inner { display: grid; gap: var(--sp-3); }
@media (min-width: 900px) {
  .phead__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-6);
    align-items: end;
  }
}
.phead h1 {
  font-size: var(--fs-4xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin-bottom: var(--sp-3);
}
.phead__cta { align-self: end; justify-self: start; }
@media (min-width: 900px) { .phead__cta { justify-self: end; } }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  margin-bottom: var(--sp-3);
}
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.crumbs span[aria-current] { color: var(--fg); }

/* -------------------------------------------------------- 22 prose */

/* Long-form text: the About blocks, the service pages and the article bodies.
   Measure-capped, hairline-quiet, with a token-driven list marker. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-3); }
.prose h2 { font-size: var(--fs-3xl); margin: 0 0 var(--sp-3); }
.prose h3 { font-size: var(--fs-2xl); margin: var(--sp-5) 0 var(--sp-2); }
.prose p { font-size: var(--fs-base); color: var(--fg-muted); line-height: var(--lh-body); }
.prose ul, .prose ol { margin: var(--sp-3) 0; }
.prose li {
  position: relative;
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-base);
  color: var(--fg-muted);
  line-height: var(--lh-body);
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.prose a { color: var(--accent-text); }
.prose strong { color: var(--fg); }

/* ------------------------------------------------- 23 nav current state */

/* v8 had no visible current-page state (the preview had no "current" page). */
.nav__link[aria-current="page"] { color: var(--fg); }
.mnav__link[aria-current="page"] { color: var(--accent-text); }

/* ------------------------------------------------------- 24 footer legal */

.ftr__legal { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ftr__legal a { font-size: var(--fs-xs); color: var(--fg-subtle); text-decoration: none; }
.ftr__legal a:hover { color: var(--fg); text-decoration: underline; }

/* ------------------------------------------------------- 25 form status */

/* One status region, used by the contact form. Semantic colours only, and the
   message text always carries the meaning (colour is never the only signal). */
.form-status {
  display: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-3);
}
.form-status.is-visible { display: block; }
.form-status.success { background: var(--accent-ground); color: var(--accent-text); }
.form-status.error { background: var(--c-danger-wash); color: var(--c-danger); }
.field__req { color: var(--accent-text); }

/* ----------------------------------------- 26 adopted content leaves */

/* Blocks that now sit inside v8 shells (.card, .grid--cards) but whose inner
   markup is unchanged, so their own leaves need the system's type steps. */
.card h3 { font-size: var(--fs-xl); margin: 0 0 var(--sp-1); }
.card p { font-size: var(--fs-sm); color: var(--fg-muted); }
.card .card-icon { width: 34px; height: 34px; color: var(--accent-text); }
.card .card-icon svg { display: block; width: 100%; height: 100%; }
.card .card-link { margin-top: auto; padding-top: var(--sp-2); }
.cap h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.cap p { font-size: var(--fs-sm); color: var(--fg-muted); }
.step h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.step p { font-size: var(--fs-sm); color: var(--fg-muted); }
.row h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.row p { font-size: var(--fs-sm); color: var(--fg-muted); max-width: 62ch; }

/* ------------------------------------------- 27 section modifier aliases */

/* The pages label their alternating grounds two different ways; both resolve to
   the one sunken step so there is a single elevation vocabulary. */
.section-pearl, .section-sunken { background: var(--bg-sunken); }


/* ============= v9 COMPATIBILITY BRIDGE (re-tokenised v7 body) ============= */
.skip-link:focus { transform: translateY(0); text-decoration: none; }
.eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--accent);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-fg); }

.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border-control); }
.btn-secondary:hover { border-color: var(--fg); color: var(--fg); background: transparent; }

.btn-lg { min-height: 56px; padding: 18px 30px; font-size: var(--fs-base); }
.btn-sm { min-height: 40px; padding: 11px 18px; font-size: var(--fs-sm); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--accent-text);
}
.link-arrow::after { content: "→"; transition: transform 180ms var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* -------------------------------------------------------------- 05 header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--border); }

.header-inner {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 68px;
}
.brand:hover { color: var(--fg); text-decoration: none; }
.wm {
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
}
.wm-accent { color: var(--accent); }

.site-nav { display: flex; align-items: center; gap: var(--sp-3); }
.site-nav a {
  font-size: var(--fs-sm); font-weight: 500; color: var(--fg-muted);
  padding: 6px 0; position: relative;
}
.site-nav a:hover { color: var(--fg); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--fg); }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 1px;
  background: var(--accent);
}

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

/* The header CTA is hidden below the desktop breakpoint, so the mobile nav
   panel carries its own copy of the primary action. */
.nav-cta { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  background: transparent; border: 1px solid var(--border-control);
  border-radius: var(--r-sm); cursor: pointer; padding: 0;
}
.nav-toggle .bar { display: block; width: 18px; height: 1.5px; background: var(--fg); }

/* ---- theme control: Light / Dark / System ---- */
.theme-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-control);
  border-radius: var(--r-pill);
  background: transparent;
}
.theme-switch button {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; padding: 0 12px;
  border-radius: var(--r-pill);
  background: transparent; color: var(--fg-muted);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; line-height: 1;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.theme-switch button:hover { color: var(--fg); }
.theme-switch button[aria-pressed="true"] {
  background: var(--fg); color: var(--bg);
}
.theme-switch .ts-icon { width: 14px; height: 14px; display: block; }
.theme-switch .ts-text { display: inline; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.hero h1 { margin-bottom: var(--sp-3); max-width: 20ch; }
.hero .lede { margin-bottom: var(--sp-4); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.hero-support { font-size: var(--fs-sm); color: var(--fg-muted); margin-bottom: var(--sp-5); }
.plate-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-subtle);
  padding-bottom: clamp(12px, 1.6vw, 18px);
}
.plate-head .dots { display: inline-flex; gap: 5px; }
.plate-head .dots i {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--border-strong); display: block;
}
.sys-art { width: 100%; height: auto; }

/* SVG paint classes — token driven, so the art themes with the page */
.sys-art .sa-line   { fill: none; stroke: var(--dg-line);   stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sys-art .sa-mute   { fill: none; stroke: var(--dg-mute);   stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sys-art .sa-soft   { fill: none; stroke: var(--dg-soft);   stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sys-art .sa-accent { fill: none; stroke: var(--dg-accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sys-art .sa-check  { fill: none; stroke: var(--dg-accent-2); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sys-art .sa-dash   { stroke-dasharray: 6 7; }
.sys-art .sa-fill   { fill: var(--dg-fill); }
.sys-art .sa-accent-fill { fill: var(--dg-accent); }
.sys-art .sa-grid   { fill: url(#sysGrid); }
.sys-art [stroke] { vector-effect: non-scaling-stroke; }

/* real-text rail under the art so the story survives at 390px */
.spec-strip {
  list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--border);
}
.spec-strip li {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.spec-strip .tick {
  flex: none; width: 14px; height: 14px; color: var(--accent);
}
.spec-strip .tick svg { width: 14px; height: 14px; }

@media (min-width: 640px) {
  .spec-strip { grid-template-columns: 1fr 1fr; column-gap: var(--sp-4); }
}
@media (min-width: 960px) {
  .spec-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-4); }
  .spec-strip li { border-bottom: 0; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-right: 1px solid var(--border); }
  .spec-strip li:last-child { border-right: 0; padding-right: 0; }
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* ---- offer rows: editorial list, not a repeated card grid ---- */
.offer-list {
  list-style: none;
  border-top: 1px solid var(--border);
}
.offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--border);
}
.offer-label {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-text);
}
.offer h3 { margin-bottom: var(--sp-1); }
.offer p { color: var(--fg-muted); font-size: var(--fs-sm); max-width: 64ch; }

@media (min-width: 860px) {
  .offer { grid-template-columns: 200px minmax(0, 1fr) 168px; align-items: start; }
  .offer-label { padding-top: 4px; }
  .offer-link { justify-self: end; text-align: right; padding-top: 4px; }
}

.section-link { margin-top: var(--sp-4); }
.cap h3 { margin-bottom: var(--sp-1); }
.cap p { color: var(--fg-muted); font-size: var(--fs-sm); }
@media (min-width: 720px) { .cap-grid { grid-template-columns: 1fr 1fr; } }
.rail-step { position: relative; padding-top: var(--sp-4); border-top: 1px solid var(--border-strong); }
.rail-step::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 2px; background: var(--accent);
}
.rail-num {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: var(--tr-label); color: var(--fg-subtle); display: block; margin-bottom: var(--sp-2);
}
.rail-step h3 { margin-bottom: var(--sp-1); }
.rail-step p { color: var(--fg-muted); font-size: var(--fs-sm); }
@media (min-width: 720px) { .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); } }
@media (min-width: 1000px) { .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .page-head-inner { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---- prose ---- */
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
@media (min-width: 960px) { .content-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

.scope-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface);
  margin-bottom: var(--sp-3);
}
.scope-panel h3 { margin-bottom: var(--sp-3); font-size: var(--fs-lg); }
.scope-panel ul { list-style: none; }
.scope-panel li {
  position: relative; padding-left: var(--sp-4); margin-bottom: var(--sp-2);
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.scope-panel li::before {
  position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: var(--fs-sm);
}
.scope-panel.in li::before { content: "+"; color: var(--c-success); }
.scope-panel.out li::before { content: "−"; color: var(--fg-subtle); }

.pkg-cta { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.pkg-cta .note { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); }
.band h2 { color: var(--band-fg); margin-bottom: var(--sp-2); max-width: 24ch; }
.band p { color: var(--band-fg-muted); max-width: 56ch; margin-bottom: var(--sp-4); }
.band .btn-primary { background: var(--c-pearl); color: var(--c-ink); border-color: var(--c-pearl); }
.band .btn-primary:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-ink); }
.band .btn-secondary { color: var(--band-fg); border-color: rgba(245, 245, 245, 0.28); }
.band .btn-secondary:hover { color: var(--band-fg); border-color: var(--band-fg); }


/* ---- carried from site.v7.css 08 diagram system (.dg) ---- */
/* ----------------------------------------------------- 08 diagram system */
/* Every diagram is HTML + CSS with REAL text, so labels reflow instead of
   scaling down: legible at 390px by construction. Inline SVG is used only for
   the decorative systems art (no baked labels), painted from --dg-* tokens. */

.dg {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(20px, 3vw, 32px);
}
.dg-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.dg-head h3 { font-size: var(--fs-lg); }
.dg-badge {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--accent-text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  white-space: nowrap;
}

.dg-flow { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.dg-step {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--bg);
}
.dg-step-num {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: var(--tr-label); color: var(--fg-subtle);
  display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2);
}
.dg-step-num .glyph { width: 18px; height: 18px; color: var(--accent); }
.dg-step-num .glyph svg { width: 18px; height: 18px; }
.dg-step h4 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.dg-step p { font-size: var(--fs-sm); color: var(--fg-muted); }

/* connector between steps: horizontal when they sit in a row, vertical stacked */
.dg-step + .dg-step::before {
  content: ""; position: absolute; left: 50%; top: calc(-1 * var(--sp-3) - 1px);
  width: 1px; height: var(--sp-3); background: var(--border-strong);
}
@media (min-width: 900px) {
  .dg-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); align-items: stretch; }
  .dg-step + .dg-step::before {
    left: calc(-1 * var(--sp-3) - 1px); top: 50%;
    width: var(--sp-3); height: 1px;
  }
}

/* the error / retry path — visually distinct, same real text */
.dg-lane {
  margin-top: var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--accent-ground);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}
.dg-lane-head {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
  margin-bottom: var(--sp-3);
}
.dg-lane-steps { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.dg-lane-steps li {
  position: relative; padding-left: var(--sp-4); font-size: var(--fs-sm); color: var(--fg-muted);
}
.dg-lane-steps li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px dashed var(--fg-subtle);
}
.dg-lane-steps li strong { color: var(--fg); font-weight: 500; }
@media (min-width: 720px) { .dg-lane-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-4); } }

.dg-cap {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  max-width: 76ch;
}
.dg-cap strong { color: var(--fg); font-weight: 500; }

.dg-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle);
}
.dg-legend li { display: inline-flex; align-items: center; gap: 6px; }
.dg-legend .swatch { width: 16px; height: 0; border-top: 2px solid var(--accent); }
.dg-legend .swatch.dashed { border-top-style: dashed; border-top-color: var(--fg-subtle); }

/* ------------------------------------------------------------- 09 preview */
.preview-note {
  background: var(--fg);
  color: var(--bg);
  font-size: var(--fs-sm);
}
.preview-note .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  padding-top: 10px; padding-bottom: 10px;
}
.preview-note b { font-weight: 600; }
.preview-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- 10 footer */

.site-footer {
  background: var(--bg-sunken);
  border-top: 1px solid var(--border);
  padding: clamp(48px, 5vw, 72px) 0 var(--sp-4);
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.footer-grid h4 {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-subtle);
  margin-bottom: var(--sp-3);
}
.footer-brand { display: inline-block; margin-bottom: var(--sp-3); color: var(--fg); }
.footer-brand:hover { text-decoration: none; }
.footer-grid .summary { font-size: var(--fs-sm); color: var(--fg-muted); max-width: 42ch; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { font-size: var(--fs-sm); color: var(--fg-muted); }
.footer-nav a:hover { color: var(--fg); }
.footer-contact { margin-top: var(--sp-3); font-size: var(--fs-sm); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1);
  margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--fg-subtle);
}
@media (min-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); } }


/* ---- carried from site.v7.css 12 tables ---- */
/* -------------------------------------------------------------- 12 tables */

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table caption { text-align: left; font-size: var(--fs-sm); color: var(--fg-muted); margin-bottom: var(--sp-2); }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-subtle);
}
.table td { color: var(--fg-muted); }
.table td:first-child { color: var(--fg); font-weight: 500; white-space: nowrap; }
.table-wrap { overflow-x: auto; }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); }
.swatch-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2); }
.swatch-item .chip { height: 44px; border-radius: var(--r-sm); border: 1px solid var(--border); margin-bottom: 10px; }
.swatch-item code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg); }
.swatch-item span { display: block; font-size: var(--fs-xs); color: var(--fg-muted); }

/* -------------------------------------------------------------- 13 motion */
/* Progressive enhancement: the default and no-JS state is the FINAL state.
   Only `html[data-reveal="on"]` (set by the inline pre-paint script, and only
   when IntersectionObserver exists and reduced motion is not requested) can
   hide anything, and the reduced-motion block below forces the final state. */

html[data-reveal="on"] .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html[data-reveal="on"] .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  html[data-reveal="on"] .reveal {
    opacity: 1 !important; transform: none !important;
    transition: none !important; transition-delay: 0ms !important;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------- 14 responsive */

@media (max-width: 899px) {
  .header-cta-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-1) var(--gutter) var(--sp-3);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-base); color: var(--fg); }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a.nav-cta {
    display: inline-flex; justify-content: center; margin-top: var(--sp-3);
    padding: 14px 22px; border-bottom: 0;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 1px solid var(--btn-bg); border-radius: var(--r-md);
  }
  .site-nav a[aria-current="page"]::after { display: none; }
  .header-inner { position: relative; }
}

@media (max-width: 719px) {
  .theme-switch .ts-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .theme-switch button { padding: 0 10px; }
}

/* ===== v7 LAYER — see site-src/preview/v7-layer.css for the annotated source ===== */

/* ============================================================================
   m00labs — site design system v7 LAYER  ·  appended to site.v5.css
   ----------------------------------------------------------------------------
   Build artefact: assets/site.v7.css = site.v5.css (byte-for-byte) + this layer.

   WHY v7, AND WHY THE FOUNDER'S REVIEW MISSED THE v6 FIXES (root cause, fix
   round 2): assets/site.v6.css was rewritten IN PLACE at 17:16 after it had
   already been published — and the platform edge serves /assets/*
   `immutable, max-age=31536000`. Every client that had fetched v6 kept the
   older bytes for a year, so the founder's review of the rebuilt preview ran
   against a stylesheet with no .plate rule at all (the plate fragment is one
   of the additions that landed in that in-place rewrite). An <img> carrying
   width/height attributes with no CSS box rule renders at the attribute
   height — the exact 390px vertical stretch reported. The same in-place edit
   had carried the ≤719px header fixes, which is why the theme control still
   looked untouched. Content that changes MUST move to a new filename; v6 is
   frozen from here on and v7 is the live layer.

   Why v6 exists (founder Stage B + independent design review, 2026-09-10):
   1. The remaining public pages were still on the old shared sheet. Bringing
      them onto the v5 system needs the structural classes they actually use
      (cards, package blocks, steps, scope panels, articles, form card, contact
      channels) re-expressed in the v6 token set, light AND dark.
   2. The service sequence did not read as a technical sequence. This layer adds
      a diagram vocabulary (dv-*) built for large, directional, swimlane art
      with real-text labels plus an auto-generated mobile stack, so nothing has
      to shrink into illegibility at 390px.
   3. Ambient backgrounds are now permitted (founder Stage B). The rule set:
      sparse, always BEHIND a visual — never behind body text — calm and
      readable in both themes, disabled by prefers-reduced-motion, paused when
      offscreen, and switchable from a visible control. `html[data-motion="off"]`
      is the single kill switch.
   ========================================================================== */

/* ------------------------------------------------ 15 header: mobile CTA ---- */
/* Stage B requirement: a clear, obvious CTA on mobile. v5 hid the header CTA
   below 900px and relied on the collapsed nav panel; this keeps a real primary
   action in the header at every width, with a compact label on small screens. */

.header-cta { display: inline-flex; align-items: center; white-space: nowrap; }
.header-cta .cta-short { display: none; }

@media (max-width: 719px) {
  .header-cta { padding: 8px 14px; }
  .header-cta .cta-full { display: none; }
  .header-cta .cta-short { display: inline; }
}

/* -------------------------------------------------- 16 motion control ------ */
/* Visible control for the continuous decorative motion (founder requirement).
   Lives beside the theme control; drives html[data-motion]. */

.motion-toggle {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--border-control); border-radius: var(--r-pill);
  background: transparent; color: var(--fg-muted);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; line-height: 1;
}
.motion-toggle:hover { color: var(--fg); }
.motion-toggle .mt-icon { width: 14px; height: 14px; display: block; }
.motion-toggle[aria-pressed="true"] .mt-on,
.motion-toggle[aria-pressed="false"] .mt-off { display: none; }

@media (max-width: 719px) {
  .motion-toggle .mt-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .motion-toggle { padding: 0 10px; }
}

/* --------------------------------- 16b header utility row (≤719px) --------- */
/* Founder Stage B item B6 + fix round 2 item 2. At 390px the Light/Dark/System
   control was almost invisible and squeezed — a 14px glyph inside a 30px pill,
   sharing one row with the brand, the quote CTA and the menu button, and the
   v5 layer deliberately hid the "Light / Dark / System" words below 720px, so
   the control WAS the icon. Now:
     · the header is two rows — brand + CTA + menu, then the controls, with
       `display: contents` letting the children of .header-actions take part in
       the header row directly, so the strip wraps instead of squeezing;
     · each theme choice is a LABELLED target: real text "Light", "Dark",
       "System", ≥44px in both directions, never compressed to a glyph;
     · the v5 rule that visually hid .ts-text is un-done here (same shorthand
       set back to its visible values) and the label carries the meaning.
   Ordering: brand, CTA, menu (row one); theme, motion (row two). */
@media (max-width: 719px) {
  .site-header .header-inner { flex-wrap: wrap; row-gap: 10px; padding-bottom: 10px; }
  .site-header .header-actions { display: contents; }
  .site-header .brand { order: 1; }
  .site-header .header-cta { order: 2; }
  .site-header .nav-toggle { order: 3; }
  .site-header .theme-switch { order: 4; }
  .site-header .motion-toggle { order: 5; }

  .site-header .theme-switch { padding: 0; gap: 0; border: 1px solid var(--border); background: var(--surface); }
  .site-header .theme-switch button {
    min-width: 44px; min-height: 44px;
    padding: 0 clamp(10px, 3vw, 16px);
    gap: 6px; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0;
    border: 0; border-radius: calc(var(--r-md) - 1px);
  }
  .site-header .theme-switch .ts-icon { width: 16px; height: 16px; }
  /* un-do the v5 "icon only below 720px" clip: the label is the control now */
  .site-header .theme-switch .ts-text {
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto; white-space: nowrap; display: inline;
  }
  .site-header .theme-switch button[aria-pressed="false"] { color: var(--fg-muted); }
  .site-header .theme-switch button[aria-pressed="false"]:hover { color: var(--fg); }
  .site-header .motion-toggle {
    min-width: 44px; min-height: 44px; padding: 0 14px;
    justify-content: center; font-size: var(--fs-sm);
  }
  .site-header .motion-toggle .mt-icon { width: 18px; height: 18px; }
}

html[data-motion="off"] .amb-anim { animation: none !important; }


/* ---- carried from site.v7.css 17 diagram vocabulary (.dv) ---- */
/* ------------------------------------- 17 diagram vocabulary (large art) --- */
/* One figure per page. `dv-wide` is the art-directed view for wide screens;
   `dv-narrow` is the same content restated as a real-text stack and is what
   renders below the breakpoint, so labels never shrink below body size. */

.dv {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(20px, 3vw, 36px);
  overflow: hidden;
}
.dv > .dv-inner { position: relative; z-index: 1; }
.dv-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
}
.dv-head h3 { font-size: var(--fs-lg); }
.dv-kicker {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-subtle);
  display: block; margin-bottom: 6px;
}
.dv-badge {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-text);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  padding: 5px 12px; white-space: nowrap;
}
.dv-stage { position: relative; margin: 0 0 var(--sp-4); }
.dv-stage svg { width: 100%; height: auto; }

/* SVG paint classes — token driven, so the art themes with the page */
.dv-stage .dv-line   { fill: none; stroke: var(--dg-line);   stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dv-stage .dv-soft   { fill: none; stroke: var(--dg-soft);   stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.dv-stage .dv-mute   { fill: none; stroke: var(--dg-mute);   stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.dv-stage .dv-accent { fill: none; stroke: var(--dg-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dv-stage .dv-accent2{ fill: none; stroke: var(--dg-accent-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dv-stage .dv-dash   { stroke-dasharray: 7 8; }
.dv-stage .dv-fill   { fill: var(--dg-fill); }
.dv-stage .dv-tint   { fill: var(--c-warning); }
.dv-stage [stroke] { vector-effect: non-scaling-stroke; }
.dv-stage .dv-txt,
.dv-stage .dv-txt-s,
.dv-stage .dv-txt-n {
  font-family: var(--font-body); fill: var(--fg); stroke: none;
}
.dv-stage .dv-txt   { font-size: var(--fs-xl); font-weight: 600; }
.dv-stage .dv-txt-s { font-size: var(--fs-lg); fill: var(--fg-muted); }
.dv-stage .dv-txt-n {
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 500;
  letter-spacing: 0.1em; fill: var(--fg-subtle); text-transform: uppercase;
}
.dv-stage text { paint-order: stroke; }
.dv-stage .dv-arrow { fill: var(--dg-line); stroke: none; }
.dv-stage .dv-arrow-accent { fill: var(--dg-accent); stroke: none; }

/* the wide art is the large-screen presentation only; below 900px the figure
   switches to its own vertical sequence drawing (.dv-stage.dv-narrow) */
.dv-wide { display: none; }
.dv-narrow { display: block; }
@media (min-width: 900px) {
  .dv-wide { display: block; }
  .dv-narrow { display: none; }
}

/* The step list is no longer the visible mobile presentation — it stays in the
   DOM, visually hidden, as the plain-text alternative for assistive technology
   (the visible drawing carries role="img" and a generated label). */
.dv-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* mobile/stacked restatement: short step label, detail beneath */
.dv-steps { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); counter-reset: dvstep; }
.dv-steps > li {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: var(--sp-2) var(--sp-3) var(--sp-3) var(--sp-5);
}
.dv-steps > li::before {
  counter-increment: dvstep;
  content: counter(dvstep, decimal-leading-zero);
  position: absolute; left: var(--sp-3); top: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: 0.1em; color: var(--accent-text);
}
.dv-steps .dv-step-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); letter-spacing: -0.01em; margin-bottom: 4px; }
.dv-steps .dv-step-detail { display: block; font-size: var(--fs-sm); color: var(--fg-muted); }
.dv-steps > li.is-branch { border-style: dashed; background: var(--accent-ground); }

/* input -> output example strip: one labelled synthetic example */
.dv-io {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.dv-io-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg); padding: var(--sp-3);
}
.dv-io-card .dv-io-label {
  display: block; font-family: var(--font-mono); font-size: var(--fs-2xs);
  font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--fg-subtle); margin-bottom: 8px;
}
.dv-io-card .dv-io-body {
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-muted);
  white-space: pre-wrap; word-break: break-word;
}
.dv-io-card .dv-io-body b { color: var(--fg); font-weight: 500; }
.dv-io-arrow { display: none; }
@media (min-width: 720px) {
  .dv-io { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: stretch; }
  .dv-io-arrow { display: flex; align-items: center; justify-content: center; color: var(--accent); }
  .dv-io-arrow svg { width: 20px; height: 20px; }
}

/* legend + caption, shared with the v5 dg system */
.dv-cap {
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--fg-muted); max-width: 78ch;
}
.dv-cap strong { color: var(--fg); font-weight: 500; }
.dv-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle);
}
.dv-legend li { display: inline-flex; align-items: center; gap: 6px; }
.dv-legend .swatch { width: 16px; height: 0; border-top: 2px solid var(--accent); }
.dv-legend .swatch.dashed { border-top-style: dashed; border-top-color: var(--fg-subtle); }
.dv-legend .swatch.node { width: 14px; height: 14px; border: 1.5px solid var(--dg-line); border-radius: 4px; }

/* swatch grid restated for the v6 layer (kept identical to v5 semantics) */
.dv-note { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: var(--sp-3); }


/* ---- carried from site.v7.css 18 ambient backgrounds (.amb) ---- */
/* --------------------------------------- 18 ambient backgrounds (Stage B) -- */
/* Sparse, low-contrast layers that sit BEHIND a visual only. They never carry
   text and never sit behind body copy. Motion is one slow drift on a signal
   grid; it is disabled by prefers-reduced-motion, by html[data-motion="off"],
   and pauses whenever the element is offscreen (see site.v6.js). */

:root {
  --amb-wash: radial-gradient(58% 62% at 22% 18%, rgba(16, 163, 127, 0.09) 0%, rgba(16, 163, 127, 0) 68%),
              radial-gradient(46% 52% at 88% 82%, rgba(13, 13, 13, 0.05) 0%, rgba(13, 13, 13, 0) 70%);
  --amb-line: rgba(13, 13, 13, 0.07);
}
[data-theme="dark"] {
  --amb-wash: radial-gradient(58% 62% at 22% 18%, rgba(16, 163, 127, 0.16) 0%, rgba(16, 163, 127, 0) 66%),
              radial-gradient(46% 52% at 88% 82%, rgba(245, 245, 245, 0.05) 0%, rgba(245, 245, 245, 0) 72%);
  --amb-line: rgba(245, 245, 245, 0.06);
}

.amb {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0; border-radius: inherit;
}
.amb-wash { position: absolute; inset: -10%; background-image: var(--amb-wash); }
.amb-grid {
  position: absolute; inset: -30% -20%;
  background-image:
    linear-gradient(to right, var(--amb-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--amb-line) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(60% 60% at 50% 40%, var(--c-ink) 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, var(--c-ink) 0%, transparent 78%);
}
.amb-flow { position: absolute; inset: 0; }
.amb-flow svg { width: 100%; height: 100%; }
.amb-flow .amb-anim {
  animation: amb-drift 14s linear infinite;
}
@keyframes amb-drift {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -240; }
}
.amb.is-offscreen .amb-anim { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .amb-anim { animation: none !important; }
}


/* ---- carried from site.v7.css 19 live-page structure ---- */
/* ------------------------------------------------- 19 live-page structure -- */

/* ---- legacy token aliases --------------------------------------------------
   Some pages carry their own page-scoped <style> (the synthetic demo, for one)
   written against the v1 token names. Aliasing them onto the v6 tokens keeps
   that markup working AND makes it theme correctly, because the alias target is
   the themed token — no per-selector dark overrides required. */

:root {
  --text-xs: var(--fs-2xs);
  --text-sm: var(--fs-sm);
  --text-base: var(--fs-base);
  --text-lg: 1.0625rem;
  --muted: var(--fg-muted);
  --border-soft: var(--border);
  --surface-warm: var(--surface);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --danger: var(--c-danger);
}
.card .card-icon { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; }
.card .card-icon svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; }
.card h3 { font-size: var(--fs-lg); }
.card p { color: var(--fg-muted); font-size: var(--fs-sm); }
.card .card-link { font-weight: 500; font-size: var(--fs-sm); }
.step::before {
  counter-increment: v6step; content: counter(v6step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.1em; color: var(--accent-text);
}
.step h3 { margin: 0 0 8px; font-size: var(--fs-lg); }
.step p { color: var(--fg-muted); font-size: var(--fs-sm); }

.scope-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin: var(--sp-4) 0; }
@media (min-width: 720px) { .scope-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }
.scope-panel { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); background: var(--bg); }
.scope-panel h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.scope-panel ul { list-style: none; display: grid; gap: 10px; }
.scope-panel li { position: relative; padding-left: var(--sp-3); font-size: var(--fs-sm); color: var(--fg-muted); }
.scope-panel li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 2px; background: var(--accent); }
.scope-panel.out li::before { background: var(--fg-subtle); }
.scope-panel .muted-note { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--fg-subtle); }

.fit-list { list-style: none; display: grid; gap: 12px; }
.fit-list li { position: relative; padding-left: 26px; color: var(--fg-muted); font-size: var(--fs-sm); }
.fit-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 13px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.pkg { border-top: 1px solid var(--border); padding: clamp(36px, 5vw, 56px) 0; }
.pkg:first-of-type { border-top: 0; }
.pkg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (min-width: 860px) { .pkg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 56px); } }
.pkg h2 { margin-bottom: 10px; }
.pkg .pkg-sub { color: var(--fg-muted); font-size: var(--fs-lede); margin-bottom: var(--sp-3); max-width: 30em; }
.pkg-lists { display: grid; gap: var(--sp-2); }
.pkg .prose p { margin-bottom: 12px; }

.article { border-top: 1px solid var(--border); padding: clamp(36px, 5vw, 56px) 0; }
.article:first-of-type { border-top: 0; }
.article-head { margin-bottom: var(--sp-3); }
.article-head .kicker {
  display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-text);
}
.article-body { max-width: 46em; }
.article-body p { margin-bottom: var(--sp-2); }
.article-body h3 { margin: var(--sp-3) 0 10px; }

.form-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (min-width: 960px) { .form-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.form-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: clamp(24px, 3vw, 32px); background: var(--bg); }
.contact-channels { display: grid; gap: var(--sp-3); }
.contact-channel { border-top: 1px solid var(--border); padding-top: var(--sp-2); }
.contact-channel h3 { font-size: var(--fs-base); margin-bottom: 6px; }
.contact-channel p { color: var(--fg-muted); font-size: var(--fs-sm); }
.contact-channel a { font-weight: 500; word-break: break-word; }

.cta-band { background: var(--band-bg); color: var(--band-fg); padding: clamp(64px, 7vw, 96px) 0; border-top: 1px solid var(--border); }
.cta-band h2, .cta-band .section-head h2 { color: var(--band-fg); }
.cta-band .section-head p { color: var(--band-fg-muted); }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cta-band .btn-light { background: var(--c-pearl); color: var(--c-ink); border-color: var(--c-pearl); }
.cta-band .btn-light:hover { background: var(--c-white); color: var(--c-ink); }
.cta-band .btn-ghost-light { background: transparent; color: var(--band-fg); border-color: rgba(245, 245, 245, 0.28); }
.cta-band .btn-ghost-light:hover { border-color: var(--band-fg); color: var(--band-fg); }
.cta-band a.plain-light { color: var(--band-fg-muted); }
.cta-mail { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--band-fg-muted); }
.cta-mail:hover { color: var(--band-fg); }
.cta-support { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--band-fg-muted); }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--border-control); }
.btn-outline:hover { border-color: var(--fg); background: var(--surface); }
.section-link { margin-top: var(--sp-3); }

.demo-lab-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px); background: var(--surface);
  display: grid; gap: var(--sp-3);
}
.demo-lab-badge {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-text);
}
.demo-lab-card-text h2 { margin-bottom: var(--sp-2); }
.demo-lab-card-text p { color: var(--fg-muted); margin-bottom: var(--sp-3); }
.demo-card-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* the interactive synthetic demo keeps its own page-scoped sheet; these are
   only the fallbacks for elements the page sheet does not cover, so the page
   reads correctly in BOTH themes even where its own sheet is light-only. */
[data-theme="dark"] .demo-panel,
[data-theme="dark"] .demo-sheet,
[data-theme="dark"] .demo-picker,
[data-theme="dark"] .demo-table-wrap,
[data-theme="dark"] .demo-outcome-stats { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .demo-doc-col,
[data-theme="dark"] .demo-extract-col { border-color: var(--border); }


/* ---- carried from site.v7.css 20 homepage art scaling ---- */
/* ------------------------------------------- 20 homepage art carries it ---- */
/* Design review (09-10): "the homepage art is too small and faint — it must
   carry the page". The art moves to a full-width band under the hero copy at
   desktop widths (it was a half-width column), the plate gets more room, and
   the line weights and grid step up so the systems picture reads as the page's
   main event rather than a decoration. Still original, still code-only. */

@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
  .hero-copy { max-width: 62ch; }
}
.hero .plate { padding: clamp(20px, 2.6vw, 36px); }
/* the ambient layer is absolutely positioned, so real content is lifted above it */
.plate > *:not(.amb), .dv > .dv-inner { position: relative; z-index: 1; }
.sys-art .sa-line   { stroke-width: 1.8; }
.sys-art .sa-soft   { stroke-width: 1.6; }
.sys-art .sa-mute   { stroke-width: 1.6; }
.sys-art .sa-accent { stroke-width: 2.2; }

/* a stronger grid step under the systems art (light first, then dark, so the
   dark block stays the later, winning rule) */
:root { --dg-grid: rgba(13, 13, 13, 0.12); }
[data-theme="dark"] { --dg-grid: rgba(245, 245, 245, 0.09); }


/* ---- carried from site.v7.css 22 illustration plate ---- */
/* --------------------------------- 22 original illustration plate ---------- */
/* Founder Stage B item D. One original, drawn-from-source illustration on each
   key service page and on the Lab page. A deliberately dark art band, framed by
   the page's own border and radius, so it reads as an instrument plate on BOTH
   themes (a raster cannot follow data-theme — that limitation is stated in the
   handoff rather than hidden). The rasters carry no text at all: every label on
   the site remains real HTML/SVG text. */

.plate-band { padding: clamp(24px, 4vw, 48px) 0 0; }
.plate picture { display: block; }
/* Founder fix round 2, item 1 — the 390px vertical stretch.
   The plate is sized by CSS alone: it fills its column, and its height is
   derived from the ASSET'S OWN 16:9 ratio. There is no fixed height anywhere
   (no height attribute on the markup, no height rule here), no object-fit at
   all, and no crop breakpoint — so the rendered box matches the intrinsic
   ratio of art-*-800.{webp,avif} (800×450) and art-*-1600 (1600×900) at every
   viewport and in both themes. `aspect-ratio` also reserves the box before the
   bytes arrive, which is why the markup no longer needs dimension attributes
   to avoid layout shift. */
.plate img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--c-ink);
}


/* ---- carried from site.v7.css 21 contact email callout ---- */
/* ------------------------------------------- 21 contact email callout ----- */
/* Founder amendment A: the direct email fallback is the reliable way to reach a
   person, so it is stated plainly and given real weight next to the form. */

.contact-email-callout {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.contact-email-callout strong {
  display: block; font-family: var(--font-display); font-size: var(--fs-lg);
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.contact-email-callout p { font-size: var(--fs-sm); color: var(--fg-muted); }
.contact-email-callout a { font-weight: 500; }