/* ============================================================================
   m00labs — site design system v5  ·  "precision systems" identity
   ----------------------------------------------------------------------------
   NEW versioned shared asset (2026-09-10, t_14cf6f98). The platform edge serves
   /assets/* with `cache-control: public, max-age=31536000, immutable`, so a
   content change MUST ship under a new versioned filename. This file is a new
   filename: site.css (v1) is untouched and still referenced by the live pages
   until this direction is approved and promoted.

   Origin: founder amendment 2026-09-10 (supersedes the card body's visual
   direction, including the live homepage). Deviations from the earlier design
   guidance, recorded here and in tech_notes / the review index:

   1. Display type is a STRONG SANS (Space Grotesk), not the earlier serif
      display. The founder's amendment supersedes the serif-display guidance.
   2. Light / Dark / System theme control is end-to-end (nav, cards, forms,
      error states, diagrams, footer), OS default honoured, persisted, and
      resolved in an inline pre-paint script (no theme flash).
   3. Raster imagery is permitted by the amendment but NOT used in this stage:
      every visual here is inline SVG / HTML+CSS with real text labels, per the
      binding DESIGN.md imagery direction (single-colour line art in teal; no
      gradients, no photography). The art-direction rationale in the review
      index states where generated imagery would go if the founder wants it.
   4. Scroll reveals are the one motion layer, progressive-enhancement only
      (no-JS and prefers-reduced-motion render the final state).

   Colour discipline: every hue comes from /workspace/design-system/DESIGN.md.
   The dark theme is built from the same neutral steps (ink family) — no new
   hues are introduced. Teal is an accent/indicator colour only; it is never
   used as a large fill behind white text. Text contrast was checked against
   WCAG AA before writing (ratios in the review index token spec).
   ========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */

:root {
  /* Neutral palette — the only hues in the system (DESIGN.md) */
  --c-white: #ffffff;
  --c-pearl: #f5f5f5;
  --c-ink: #0d0d0d;
  --c-slate: #6e6e6e;
  --c-hairline: #e5e5e5;
  --c-teal: #10a37f;
  --c-teal-deep: #0a7a5e;

  /* Neutral steps derived from the ink/pearl family (dark surfaces) */
  --c-ink-2: #141414;
  --c-ink-3: #1c1c1c;
  --c-ink-4: #262626;
  --c-ink-5: #333333;
  --c-mist: #d4d4d4;
  --c-slate-soft: #767676;
  --c-slate-light: #a3a3a3;
  --c-slate-lighter: #8f8f8f;

  /* Semantic — error is the single non-brand hue, used only for error text */
  --c-error-light: #b42318;
  --c-error-dark: #ff8a80;

  /* Type */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, "SF Mono", monospace;

  --fz-display: clamp(2.5rem, 6.1vw, 4.5rem);   /* 40 → 72 */
  --fz-h2: clamp(1.75rem, 3.3vw, 2.5rem);       /* 28 → 40 */
  --fz-h3: clamp(1.125rem, 1.5vw, 1.375rem);    /* 18 → 22 */
  --fz-lede: clamp(1.0625rem, 1.35vw, 1.25rem); /* 17 → 20 */
  --fz-body: 1rem;
  --fz-sm: 0.9375rem;
  --fz-label: 0.75rem;

  --lh-display: 1.04;
  --lh-head: 1.12;
  --lh-body: 1.6;

  --tr-display: -0.035em;
  --tr-head: -0.02em;
  --tr-label: 0.14em;

  /* Space — 8px baseline grid */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --section-pad: clamp(80px, 9vw, 120px);
  --gutter: clamp(20px, 4vw, 32px);
  --container: 1200px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 520ms;

  /* ---------- light theme (default) ---------- */
  --bg: var(--c-white);
  --bg-sunken: var(--c-pearl);
  --surface: var(--c-white);
  --surface-raised: var(--c-pearl);
  --border: var(--c-hairline);
  --border-strong: var(--c-mist);
  /* control boundaries must clear WCAG 1.4.11 (3:1); hairlines need not */
  --border-input: #8c8c8c;
  --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-hover: 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-muted: #b4b4b4;
  --header-bg: rgba(255, 255, 255, 0.86);
  --error: var(--c-error-light);
  --success: var(--c-teal-deep);
  --focus: var(--c-teal);

  /* Diagram tokens — every diagram element reads these, never a literal */
  --dg-line: var(--c-ink);
  --dg-mute: var(--c-hairline);
  --dg-soft: var(--c-slate);
  --dg-fill: var(--c-white);
  --dg-grid: rgba(13, 13, 13, 0.09);
  --dg-accent: var(--c-teal);
  --dg-accent-2: var(--c-teal-deep);
  --dg-lane-bg: rgba(13, 13, 13, 0.025);

  --scheme: light;
}

/* ---------- dark theme ---------- */
[data-theme="dark"] {
  --bg: var(--c-ink);
  --bg-sunken: #080808;
  --surface: var(--c-ink-2);
  --surface-raised: var(--c-ink-3);
  --border: var(--c-ink-4);
  --border-strong: var(--c-ink-5);
  --border-input: #767676;
  --fg: var(--c-pearl);
  --fg-muted: var(--c-slate-light);
  --fg-subtle: var(--c-slate-lighter);
  --accent: var(--c-teal);
  --accent-text: var(--c-teal);      /* 6.1:1 on #0d0d0d — AA normal text */
  --accent-hover: #3dd6a8;           /* teal tint, hover state only */
  --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-muted: var(--c-slate-light);
  --header-bg: rgba(13, 13, 13, 0.86);
  --error: var(--c-error-dark);
  --success: var(--c-teal);
  --focus: var(--c-teal);

  --dg-line: var(--c-pearl);
  --dg-mute: var(--c-ink-5);
  --dg-soft: var(--c-slate-light);
  --dg-fill: var(--c-ink-2);
  --dg-grid: rgba(245, 245, 245, 0.07);
  --dg-accent: var(--c-teal);
  --dg-accent-2: #4fdcb2;
  --dg-lane-bg: rgba(245, 245, 245, 0.03);

  --scheme: dark;
}

/* ------------------------------------------------------- 02 reset / base */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fz-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fz-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fz-h2); line-height: var(--lh-head); letter-spacing: var(--tr-head); }
h3 { font-size: var(--fz-h3); line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 0.9375rem; line-height: 1.4; letter-spacing: 0; font-family: var(--font-body); font-weight: 500; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

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

strong { font-weight: 600; }

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

::selection { background: var(--accent); color: var(--c-white); }

/* ------------------------------------------------------------- 03 helpers */

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

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

.skip-link {
  position: absolute; left: var(--s-2); top: var(--s-2); z-index: 60;
  transform: translateY(-200%);
  background: var(--btn-bg); color: var(--btn-fg);
  padding: 12px 20px; border-radius: var(--r-md);
  font-size: var(--fz-sm); font-weight: 500;
  transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fz-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--accent);
}

.lede {
  font-size: var(--fz-lede);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 62ch;
}

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

/* ------------------------------------------------------------- 04 buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  font-family: var(--font-body);
  font-size: var(--fz-sm);
  font-weight: 500;
  line-height: 1;
  padding: 14px 22px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease), transform 180ms var(--ease);
}
.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-input); }
.btn-secondary:hover { border-color: var(--fg); color: var(--fg); background: transparent; }

.btn-lg { min-height: 56px; padding: 18px 30px; font-size: var(--fz-body); }
.btn-sm { min-height: 40px; padding: 11px 18px; font-size: 0.875rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fz-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(--header-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(--s-3);
  min-height: 68px;
}

.brand { display: inline-flex; align-items: center; margin-right: auto; color: var(--fg); }
.brand:hover { color: var(--fg); text-decoration: none; }
.wm {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
}
.wm-accent { color: var(--accent); }

.site-nav { display: flex; align-items: center; gap: var(--s-3); }
.site-nav a {
  font-size: var(--fz-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(--s-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-input);
  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-input);
  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: 0.8125rem; 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; }

/* ---------------------------------------------------------------- 06 hero */

.hero {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.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(--s-3); max-width: 20ch; }
.hero .lede { margin-bottom: var(--s-4); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.hero-support { font-size: var(--fz-sm); color: var(--fg-muted); margin-bottom: var(--s-5); }

/* ---- systems visual: the page's large bespoke art ---- */
.plate {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(16px, 2.4vw, 28px);
  overflow: hidden;
}
.plate-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fz-label); 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(--s-2);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fz-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(--s-4); }
}
@media (min-width: 960px) {
  .spec-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-4); }
  .spec-strip li { border-bottom: 0; padding: var(--s-3) var(--s-3) var(--s-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); }
}

/* ------------------------------------------------------------- 07 sections */

.section { padding: var(--section-pad) 0; }
.section-sunken { background: var(--bg-sunken); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-tight { padding: clamp(56px, 6vw, 80px) 0; }

.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 68ch; }
.section-head h2 { margin-bottom: var(--s-2); }

/* ---- 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(--s-2) var(--s-4);
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--border);
}
.offer-label {
  font-family: var(--font-mono); font-size: var(--fz-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-text);
}
.offer h3 { margin-bottom: var(--s-1); }
.offer p { color: var(--fg-muted); font-size: var(--fz-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(--s-4); }

/* ---- capability grid ---- */
.cap-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cap {
  background: var(--bg);
  padding: clamp(24px, 3vw, 32px);
}
.cap-num {
  font-family: var(--font-mono); font-size: var(--fz-label); font-weight: 500;
  letter-spacing: var(--tr-label); color: var(--fg-subtle); display: block; margin-bottom: var(--s-3);
}
.cap h3 { margin-bottom: var(--s-1); }
.cap p { color: var(--fg-muted); font-size: var(--fz-sm); }
@media (min-width: 720px) { .cap-grid { grid-template-columns: 1fr 1fr; } }

/* ---- process rail ---- */
.rail { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); counter-reset: rail; }
.rail-step { position: relative; padding-top: var(--s-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(--fz-label); font-weight: 500;
  letter-spacing: var(--tr-label); color: var(--fg-subtle); display: block; margin-bottom: var(--s-2);
}
.rail-step h3 { margin-bottom: var(--s-1); }
.rail-step p { color: var(--fg-muted); font-size: var(--fz-sm); }
@media (min-width: 720px) { .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); } }
@media (min-width: 1000px) { .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- page head (subpages) ---- */
.page-head { padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--border); }
.page-head-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: end; }
.page-head h1 { margin: var(--s-2) 0 var(--s-3); max-width: 24ch; }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1);
  font-family: var(--font-mono); font-size: var(--fz-label); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-subtle);
}
.crumbs a { color: var(--fg-muted); }
.crumbs span[aria-current] { color: var(--fg); }
@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); } }

.prose-block h2 { margin-bottom: var(--s-3); }
.prose p { color: var(--fg-muted); margin-bottom: var(--s-3); max-width: 66ch; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { list-style: none; margin-bottom: var(--s-3); }
.prose li {
  position: relative; padding-left: var(--s-3); margin-bottom: var(--s-2);
  color: var(--fg-muted); font-size: var(--fz-sm); max-width: 60ch;
}
.prose li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border: 1px solid var(--accent); border-radius: 50%;
}

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

.pkg-cta { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pkg-cta .note { font-family: var(--font-mono); font-size: var(--fz-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); }

/* ---- CTA band ---- */
.band {
  background: var(--band-bg);
  color: var(--band-fg);
  padding: clamp(64px, 7vw, 96px) 0;
  border-top: 1px solid var(--border);
}
.band h2 { color: var(--band-fg); margin-bottom: var(--s-2); max-width: 24ch; }
.band p { color: var(--band-muted); max-width: 56ch; margin-bottom: var(--s-4); }
.band-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.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); }
.band-mail { font-size: var(--fz-sm); }
.band-mail a { color: var(--band-fg); text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------- 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(--s-2); margin-bottom: var(--s-4);
}
.dg-head h3 { font-size: 1.0625rem; }
.dg-badge {
  font-family: var(--font-mono); font-size: var(--fz-label); 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(--s-3); }
.dg-step {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  background: var(--bg);
}
.dg-step-num {
  font-family: var(--font-mono); font-size: var(--fz-label); font-weight: 500;
  letter-spacing: var(--tr-label); color: var(--fg-subtle);
  display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-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: 1.0625rem;
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.dg-step p { font-size: var(--fz-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(--s-3) - 1px);
  width: 1px; height: var(--s-3); background: var(--border-strong);
}
@media (min-width: 900px) {
  .dg-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); align-items: stretch; }
  .dg-step + .dg-step::before {
    left: calc(-1 * var(--s-3) - 1px); top: 50%;
    width: var(--s-3); height: 1px;
  }
}

/* the error / retry path — visually distinct, same real text */
.dg-lane {
  margin-top: var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--dg-lane-bg);
  padding: var(--s-3) var(--s-3) var(--s-2);
}
.dg-lane-head {
  font-family: var(--font-mono); font-size: var(--fz-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
  margin-bottom: var(--s-3);
}
.dg-lane-steps { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.dg-lane-steps li {
  position: relative; padding-left: var(--s-4); font-size: var(--fz-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(--s-4); } }

.dg-cap {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--fz-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(--s-3);
  margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--fz-label);
  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(--fz-sm);
}
.preview-note .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-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(--s-4);
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.footer-grid h4 {
  font-family: var(--font-mono); font-size: var(--fz-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-subtle);
  margin-bottom: var(--s-3);
}
.footer-brand { display: inline-block; margin-bottom: var(--s-3); color: var(--fg); }
.footer-brand:hover { text-decoration: none; }
.footer-grid .summary { font-size: var(--fz-sm); color: var(--fg-muted); max-width: 42ch; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { font-size: var(--fz-sm); color: var(--fg-muted); }
.footer-nav a:hover { color: var(--fg); }
.footer-contact { margin-top: var(--s-3); font-size: var(--fz-sm); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1);
  margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--border);
  font-size: 0.875rem; 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(--s-6); } }

/* -------------------------------------------------------------- 11 forms */
/* Not used by the Stage A previews; present so the promoted pages keep one
   themed form system (labels above inputs, error text below, real states). */

.form-field { margin-bottom: var(--s-3); }
.form-field label {
  display: block; font-size: var(--fz-sm); font-weight: 500;
  margin-bottom: 6px; color: var(--fg);
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fz-body);
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--border-input); border-radius: var(--r-sm);
  padding: 12px 14px; min-height: 48px;
  transition: border-color 160ms var(--ease);
}
.form-field textarea { min-height: 132px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--fg-subtle); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent);
}
.form-field .hint { font-size: 0.875rem; color: var(--fg-subtle); margin-top: 6px; }
.form-field .field-error { display: none; font-size: 0.875rem; color: var(--error); margin-top: 6px; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea {
  border-color: var(--error);
}
.form-field.has-error .field-error { display: block; }

.form-status {
  display: none; font-size: var(--fz-sm); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: var(--s-3);
}
.form-status.is-visible { display: block; }
.form-status.success { background: var(--surface-raised); border: 1px solid var(--accent); color: var(--fg); }
.form-status.error { background: var(--surface-raised); border: 1px solid var(--error); color: var(--fg); }

/* -------------------------------------------------------------- 12 tables */

.table { width: 100%; border-collapse: collapse; font-size: var(--fz-sm); }
.table caption { text-align: left; font-size: var(--fz-sm); color: var(--fg-muted); margin-bottom: var(--s-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(--fz-label); 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(--s-2); }
.swatch-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-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: 0.8125rem; color: var(--fg); }
.swatch-item span { display: block; font-size: 0.8125rem; 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) var(--ease), transform var(--dur) 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(--s-1) var(--gutter) var(--s-3);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: var(--fz-body); 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(--s-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-input); border-radius: var(--r-pill);
  background: transparent; color: var(--fg-muted);
  font-family: var(--font-body); font-size: 0.8125rem; 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(--fz-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(--fz-sm);
  }
  .site-header .motion-toggle .mt-icon { width: 18px; height: 18px; }
}

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

/* ------------------------------------- 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(--s-2) var(--s-3); margin-bottom: var(--s-4);
}
.dv-head h3 { font-size: 1.0625rem; }
.dv-kicker {
  font-family: var(--font-mono); font-size: var(--fz-label); 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(--fz-label); 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(--s-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(--dg-lane); }
.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: 19px; font-weight: 600; }
.dv-stage .dv-txt-s { font-size: 16.5px; fill: var(--fg-muted); }
.dv-stage .dv-txt-n {
  font-family: var(--font-mono); font-size: 14.5px; 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(--s-2); counter-reset: dvstep; }
.dv-steps > li {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: var(--s-2) var(--s-3) var(--s-3) var(--s-5);
}
.dv-steps > li::before {
  counter-increment: dvstep;
  content: counter(dvstep, decimal-leading-zero);
  position: absolute; left: var(--s-3); top: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fz-label); 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: 1rem; letter-spacing: -0.01em; margin-bottom: 4px; }
.dv-steps .dv-step-detail { display: block; font-size: var(--fz-sm); color: var(--fg-muted); }
.dv-steps > li.is-branch { border-style: dashed; background: var(--dg-lane-bg); }

/* input -> output example strip: one labelled synthetic example */
.dv-io {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2);
  margin-top: var(--s-3);
}
.dv-io-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg); padding: var(--s-3);
}
.dv-io-card .dv-io-label {
  display: block; font-family: var(--font-mono); font-size: var(--fz-label);
  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: 0.875rem; 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(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--border);
  font-size: var(--fz-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(--s-3);
  margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--fz-label);
  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(--fz-sm); color: var(--fg-muted); margin-top: var(--s-3); }

/* --------------------------------------- 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%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000 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; }
}

/* ------------------------------------------------- 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(--fz-label);
  --text-sm: var(--fz-sm);
  --text-base: var(--fz-body);
  --text-lg: 1.0625rem;
  --muted: var(--fg-muted);
  --border-soft: var(--border);
  --surface-warm: var(--surface-raised);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --danger: var(--error);
}

/* the structural vocabulary the remaining public pages already use, expressed
   in the v6 tokens so a promoted page needs no markup rewrite. Light + dark
   come free because every value is a token. */

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-3); }
.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s-3); display: flex; flex-direction: column; gap: 8px;
}
.card .card-icon { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--surface-raised); 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: 1.0625rem; }
.card p { color: var(--fg-muted); font-size: var(--fz-sm); }
.card .card-link { font-weight: 500; font-size: var(--fz-sm); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); counter-reset: v6step; }
.step { position: relative; padding-top: 26px; border-top: 1px solid var(--border); }
.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(--fz-label); letter-spacing: 0.1em; color: var(--accent-text);
}
.step h3 { margin: 0 0 8px; font-size: 1.0625rem; }
.step p { color: var(--fg-muted); font-size: var(--fz-sm); }

.scope-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin: var(--s-4) 0; }
@media (min-width: 720px) { .scope-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }
.scope-panel { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3); background: var(--bg); }
.scope-panel h3 { font-size: 1rem; margin-bottom: var(--s-2); }
.scope-panel ul { list-style: none; display: grid; gap: 10px; }
.scope-panel li { position: relative; padding-left: var(--s-3); font-size: var(--fz-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(--s-2); font-size: var(--fz-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(--fz-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(--s-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(--fz-lede); margin-bottom: var(--s-3); max-width: 30em; }
.pkg-lists { display: grid; gap: var(--s-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(--s-3); }
.article-head .kicker {
  display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: var(--fz-label); 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(--s-2); }
.article-body h3 { margin: var(--s-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); }
.form-field .req { color: var(--error); }
.contact-channels { display: grid; gap: var(--s-3); }
.contact-channel { border-top: 1px solid var(--border); padding-top: var(--s-2); }
.contact-channel h3 { font-size: 1rem; margin-bottom: 6px; }
.contact-channel p { color: var(--fg-muted); font-size: var(--fz-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-muted); }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-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-muted); }
.cta-mail { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-2); font-size: var(--fz-sm); color: var(--band-muted); }
.cta-mail:hover { color: var(--band-fg); }
.cta-support { margin-top: var(--s-2); font-size: var(--fz-sm); color: var(--band-muted); }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--border-input); }
.btn-outline:hover { border-color: var(--fg); background: var(--surface-raised); }

.section-pearl { background: var(--bg-sunken); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-link { margin-top: var(--s-3); }

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

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

/* --------------------------------- 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 { margin: 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: #0b0f0e;
}

/* ------------------------------------------- 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-raised);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}
.contact-email-callout strong {
  display: block; font-family: var(--font-display); font-size: 1.0625rem;
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.contact-email-callout p { font-size: var(--fz-sm); color: var(--fg-muted); }
.contact-email-callout a { font-weight: 500; }