/* tokens.css — the Token file (GLOSSARY.md): the single source of this site's design values.
 *
 * Tiers (research 03 §3.1):
 *   1. Primitives  --mf-<hue>[-<step>]  raw values, named by what they are. Never used by component CSS.
 *   2. Semantics   --mf-color-*, --mf-space-*, --mf-text-*, --mf-heading-*, --mf-radius-* …  named by role.
 *                  The only tier component CSS may use (enforced by stylelint, W1 C2). The lint tells the
 *                  tiers apart BY PREFIX: a semantic name starts --mf-color|space|section|text|heading|
 *                  radius|content|duration|gutter|shadow|font|gradient|label|ease; anything else is a primitive
 *                  (tools/stylelint-known-vars.mjs SEMANTIC). Name new tokens accordingly.
 *   3. Component tokens live on their own block class, not here.
 *
 * Today these carry ACSS 3.3.8's exact values (W1 C1, decision-log E7), so the generated ACSS bridge
 * (dist/tokens/acss-bridge.css) changes nothing on first install. A restyle edits tier 1 or 2 here.
 * tools/build-tokens.mjs refuses to build if a bridged ACSS name no longer resolves to the value
 * recorded in tokens/acss-snapshot.json, so drift is a deliberate act, never an accident.
 *
 * Units: 1rem = 10px. ACSS sets html { font-size: 62.5% } and every size below assumes it; a page
 * that loads these tokens without ACSS must set the same root size.
 *
 * Hue names for the brand families: steel = ACSS primary (#3994c1), forest = action, slate =
 * secondary, ink = base, violet = accent. ACSS's "shade" family is the same ramp as "neutral".
 * Tints stay literal rgba() for now: color-mix() would compute to a different serialisation and break
 * the zero computed-style diff that gates the first install (W1 C4).
 */

:root {
  /* 1. Primitives */
  --mf-violet: #653cad;
  --mf-violet-dark: #37215f;
  --mf-violet-light: #d4c6eb;
  --mf-violet-semi-light: #9a7bd1;
  --mf-violet-ultra-light: #f1ecf8;

  --mf-forest: #3f9142;
  --mf-steel-forest-mid: #3c9382; /* halfway between --mf-steel and --mf-forest */
  --mf-forest-hover: #49a74c;
  --mf-forest-light: #cae8cb;
  --mf-forest-ultra-dark-trans-60: rgba(16, 35, 16, 0.6);
  --mf-forest-ultra-light: #edf7ee;

  --mf-ink-dark: #30404f;
  --mf-ink-light: #d0d9e2;
  --mf-ink-semi-light: #90a6bb;
  --mf-ink-ultra-dark: #131920;
  --mf-ink-ultra-light: #eff2f5;

  --mf-black: #000;
  --mf-black-trans-10: rgba(0, 0, 0, 0.1);
  --mf-black-trans-20: rgba(0, 0, 0, 0.2);
  --mf-black-trans-60: rgba(0, 0, 0, 0.6);

  --mf-danger: #DC3545;
  --mf-danger-light: #f4bec3;

  --mf-info-dark: #093c44;
  --mf-info-light: #bbeef6;
  --mf-info-trans-10: rgba(24, 162, 184, 0.1);
  --mf-info-ultra-dark: #06282d;

  --mf-neutral: #000000;
  --mf-neutral-dark: #404040;
  --mf-neutral-dark-trans-10: rgba(64, 64, 64, 0.1);
  --mf-neutral-dark-trans-20: rgba(64, 64, 64, 0.2);
  --mf-neutral-dark-trans-30: rgba(64, 64, 64, 0.3);
  --mf-neutral-light: #d9d9d9;
  --mf-neutral-light-trans-10: rgba(217, 217, 217, 0.1);
  --mf-neutral-light-trans-20: rgba(217, 217, 217, 0.2);
  --mf-neutral-semi-dark: #595959;
  --mf-neutral-trans-80: rgba(0, 0, 0, 0.8);
  --mf-neutral-ultra-dark: #1a1a1a;
  --mf-neutral-ultra-dark-trans-10: rgba(26, 26, 26, 0.1);
  --mf-neutral-ultra-dark-trans-40: rgba(26, 26, 26, 0.4);
  --mf-neutral-ultra-dark-trans-70: rgba(26, 26, 26, 0.7);
  --mf-neutral-ultra-dark-trans-80: rgba(26, 26, 26, 0.8);
  --mf-neutral-ultra-light: #f2f2f2;

  --mf-steel: #3994c1;
  --mf-steel-dark: #1d4b62;
  --mf-steel-hover: #54a4cc;
  --mf-steel-light: #c4e0ed;
  --mf-steel-semi-dark: #296989;
  --mf-steel-semi-light: #76b6d6;
  --mf-steel-trans-70: rgba(57, 148, 193, 0.7);
  --mf-steel-trans-80: rgba(57, 148, 193, 0.8);
  --mf-steel-ultra-dark: #0c1e27;
  --mf-steel-ultra-light: #ebf5f9;

  --mf-slate: #606e7c;
  --mf-slate-dark: #374048;
  --mf-slate-light: #d4d9de;
  --mf-slate-medium: #6f7f90;
  --mf-slate-semi-dark: #4e5965;
  --mf-slate-semi-light: #9aa6b1;
  --mf-slate-ultra-dark: #16191d;
  --mf-slate-ultra-light: #f1f2f4;

  --mf-success-light: #c1f0cc;

  --mf-warning-light: #ffecb3;

  --mf-white: #fff;
  --mf-white-trans-10: rgba(255, 255, 255, 0.1);
  --mf-white-trans-50: rgba(255, 255, 255, 0.5);
  --mf-white-trans-60: rgba(255, 255, 255, 0.6);
  --mf-white-trans-80: rgba(255, 255, 255, 0.8);

  /* 2. Semantics */
  --mf-color-action: var(--mf-forest);
  --mf-color-action-hover: var(--mf-forest-hover);
  --mf-color-surface-inverse: var(--mf-neutral-ultra-dark);
  --mf-color-surface-alt: var(--mf-neutral-ultra-light);
  --mf-color-surface: var(--mf-white);
  --mf-color-text: var(--mf-black);
  --mf-content-width: 136.6rem;
  --mf-color-accent: var(--mf-steel);
  --mf-color-accent-hover: var(--mf-steel-hover);
  --mf-radius: var(--mf-radius-m);
  --mf-radius-l: 1.5rem;
  --mf-radius-m: 1rem;
  --mf-radius-s: 0.6666666667rem;
  --mf-radius-xl: 2.25rem;
  --mf-color-text-muted: var(--mf-neutral-dark);
  --mf-color-text-inverse: var(--mf-white);
  --mf-duration-ui: 0.3s;
}

/* 2. Semantics: the fluid type and space scales. Same @supports/@media structure and order as ACSS,
   so the cascade picks the same value at every viewport. */
:root {
  --mf-gutter: 1.6rem;
  --mf-heading-1: 2.565rem;
  --mf-heading-2: 2.28rem;
  --mf-heading-3: 2.025rem;
  --mf-heading-4: 1.8rem;
  --mf-section-padding-x: 1.6rem;
  --mf-section-space-l: 7.5rem;
  --mf-section-space-m: 6rem;
  --mf-section-space-s: 4.8rem;
  --mf-section-space-xl: 9.375rem;
  --mf-section-space-xs: 3.84rem;
  --mf-space-l: 2.7rem;
  --mf-space-m: 2.4rem;
  --mf-space-s: 2.133rem;
  --mf-space-xl: 3.038rem;
  --mf-space-xs: 1.896rem;
  --mf-space-xxl: 3.42rem;
  --mf-text-l: 2.025rem;
  --mf-text-m: 1.8rem;
  --mf-text-s: 1.42rem;
  --mf-text-xl: 2.28rem;
  --mf-text-xs: 1.26rem;
  --mf-text-xxl: 2.565rem;
}

@supports (padding: calc(1vw + 2vw)) {
  :root {
    --mf-gutter: calc(1.6rem + (4.4 * ((100vw - 32rem) / 104.6)));
    --mf-section-padding-x: calc(1.6rem + (4.4 * ((100vw - 32rem) / 104.6)));
    --mf-section-space-l: calc(6.3984rem + (7.1016 * ((100vw - 32rem) / 104.6)));
    --mf-section-space-m: calc(4.8rem + (4.2 * ((100vw - 32rem) / 104.6)));
    --mf-section-space-s: calc(3.6009002251rem + (2.3990997749 * ((100vw - 32rem) / 104.6)));
    --mf-section-space-xl: calc(8.5290672rem + (11.7209328 * ((100vw - 32rem) / 104.6)));
    --mf-section-space-xs: calc(2.7013505064rem + (1.2986494936 * ((100vw - 32rem) / 104.6)));
    --mf-space-l: calc(3.1992rem + (1.3008 * ((100vw - 32rem) / 104.6)));
    --mf-space-m: calc(2.4rem + (0.6 * ((100vw - 32rem) / 104.6)));
    --mf-space-s: calc(1.8004501125rem + (0.1995498875 * ((100vw - 32rem) / 104.6)));
    --mf-space-xl: calc(4.2645336rem + (2.4854664 * ((100vw - 32rem) / 104.6)));
    --mf-space-xs: calc(1.3506752532rem + (-0.0173419199 * ((100vw - 32rem) / 104.6)));
    --mf-space-xxl: calc(5.6846232888rem + (4.4403767112 * ((100vw - 32rem) / 104.6)));
  }
}

@supports (padding: calc(1vw + 2vw)) {
  @media (min-width: 1281px) {
    :root {
      --mf-gutter: 6rem;
      --mf-section-padding-x: 6rem;
      --mf-section-space-l: 13.5rem;
      --mf-section-space-m: 9rem;
      --mf-section-space-s: 6rem;
      --mf-section-space-xl: 20.25rem;
      --mf-section-space-xs: 4rem;
      --mf-space-l: 4.5rem;
      --mf-space-m: 3rem;
      --mf-space-s: 2rem;
      --mf-space-xl: 6.75rem;
      --mf-space-xs: 1.3333333333rem;
      --mf-space-xxl: 10.125rem;
    }
  }
}

@supports (padding: clamp(1vw, 2vw, 3vw)) {
  :root {
    --mf-gutter: clamp(1.6rem, calc(4.206500956vw + 0.2539196941rem), 6rem);
    --mf-section-padding-x: clamp(1.6rem, calc(4.206500956vw + 0.2539196941rem), 6rem);
    --mf-section-space-l: clamp(6.3984rem, calc(6.789292543vw + 4.2258263862rem), 13.5rem);
    --mf-section-space-m: clamp(4.8rem, calc(4.0152963671vw + 3.5151051625rem), 9rem);
    --mf-section-space-s: clamp(3.6009002251rem, calc(2.2935944311vw + 2.8669500071rem), 6rem);
    --mf-section-space-xl: clamp(8.5290672rem, calc(11.2054806883vw + 4.9433133797rem), 20.25rem);
    --mf-section-space-xs: clamp(2.7013505064rem, calc(1.2415387128vw + 2.3040581183rem), 4rem);
    --mf-space-l: clamp(3.1992rem, calc(1.2435946463vw + 2.8012497132rem), 4.5rem);
    --mf-space-m: clamp(2.4rem, calc(0.5736137667vw + 2.2164435946rem), 3rem);
    --mf-space-s: clamp(1.8004501125rem, calc(0.190774271vw + 1.7394023458rem), 2rem);
    --mf-space-xl: clamp(4.2645336rem, calc(2.3761629063vw + 3.50416147rem), 6.75rem);
    --mf-space-xs: clamp(1.3506752532rem, calc(-0.0165792733vw + 1.3559806207rem), 1.3333333333rem);
    --mf-space-xxl: clamp(5.6846232888rem, calc(4.2451020184vw + 4.3261906429rem), 10.125rem);
  }
}

@supports (font-size: calc(1vw + 2vw)) {
  :root {
    --mf-heading-1: calc(2.7648rem + (3.9852 * ((100vw - 32rem) / 104.6)));
    --mf-heading-2: calc(2.304rem + (2.196 * ((100vw - 32rem) / 104.6)));
    --mf-heading-3: calc(1.92rem + (1.08 * ((100vw - 32rem) / 104.6)));
    --mf-heading-4: calc(1.6rem + (0.4 * ((100vw - 32rem) / 104.6)));
    --mf-text-l: calc(1.92rem + (0.4794 * ((100vw - 32rem) / 104.6)));
    --mf-text-m: calc(1.6rem + (0.2 * ((100vw - 32rem) / 104.6)));
    --mf-text-s: calc(1.4rem + (0.2 * ((100vw - 32rem) / 104.6)));
    --mf-text-xl: calc(2.304rem + (0.8944002 * ((100vw - 32rem) / 104.6)));
    --mf-text-xs: calc(1.3rem + (0.1 * ((100vw - 32rem) / 104.6)));
    --mf-text-xxl: calc(2.7648rem + (1.4986674666 * ((100vw - 32rem) / 104.6)));
  }
}

@supports (font-size: calc(1vw + 2vw)) {
  @media (min-width: 1281px) {
    :root {
      --mf-heading-1: 6.75rem;
      --mf-heading-2: 4.5rem;
      --mf-heading-3: 3rem;
      --mf-heading-4: 2rem;
      --mf-text-l: 2.3994rem;
      --mf-text-m: 1.8rem;
      --mf-text-s: 1.6rem;
      --mf-text-xl: 3.1984002rem;
      --mf-text-xs: 1.4rem;
      --mf-text-xxl: 4.2634674666rem;
    }
  }
}

@supports (font-size: clamp(1vw, 2vw, 3vw)) {
  :root {
    --mf-heading-1: clamp(2.7648rem, calc(3.8099426386vw + 1.5456183556rem), 6.75rem);
    --mf-heading-2: clamp(2.304rem, calc(2.0994263862vw + 1.6321835564rem), 4.5rem);
    --mf-heading-3: clamp(1.92rem, calc(1.0325047801vw + 1.5895984704rem), 3rem);
    --mf-heading-4: clamp(1.6rem, calc(0.3824091778vw + 1.4776290631rem), 2rem);
    --mf-text-l: clamp(1.92rem, calc(0.4583173996vw + 1.7733384321rem), 2.3994rem);
    --mf-text-m: clamp(1.6rem, calc(0.1912045889vw + 1.5388145315rem), 1.8rem);
    --mf-text-s: clamp(1.4rem, calc(0.1912045889vw + 1.3388145315rem), 1.6rem);
    --mf-text-xl: clamp(2.304rem, calc(0.8550671128vw + 2.0303785239rem), 3.1984002rem);
    --mf-text-xs: clamp(1.3rem, calc(0.0956022945vw + 1.2694072658rem), 1.4rem);
    --mf-text-xxl: clamp(2.7648rem, calc(1.4327604843vw + 2.306316645rem), 4.2634674666rem);
  }
}

/* v7 (W3, 2026-10-26): the values the locked notion-consulting v7 boards use (canvas WJoR5rVbQeqWVtkREhRKH7 v64),
   added for the renderer page. They carry Matthias's approved design, so no new decision (plan E-notes, step "src/").
   Fluid sizes run from the phone board (390px) to the desktop board (1280px): exact at both ends, linear between
   (clamp). Nothing on a Bricks page references these names. Where a board value differs from an existing token by
   less than a visible step (board ink #131a20 vs --mf-ink-ultra-dark #131920), the existing token is reused.
   Review 2026-10-26 (Matthias, "a bit small in parts to read"): the small text sizes (eyebrow, label, meta, chip,
   card, body, lede) sit about 1px above the board values, so no text on the page is set below 12px. */
:root {
  /* v7 primitives */
  --mf-night-900: #0f172a;
  --mf-night-950: #020617;
  --mf-black-trans-75: rgba(0, 0, 0, 0.75);
  --mf-ink-800: #2a3540;
  --mf-ink-700: #3c4752;
  --mf-ink-600: #4b5763;
  --mf-ink-500: #6f7a85;
  --mf-ink-450: #8794a1;
  --mf-ink-250: #c4cdd5;
  --mf-ink-400: #8f9aa5;
  --mf-ink-350: #9fb1c0;
  --mf-ink-300: #b4bec8;
  --mf-ink-150: #dfe7ee;
  --mf-steel-150: #d5e3ec;
  --mf-teal: #2f8a8a;
  --mf-shade-ink-7: rgba(19, 26, 32, 0.07);
  --mf-shade-ink-8: rgba(19, 26, 32, 0.08);
  --mf-shade-ink-10: rgba(19, 26, 32, 0.1);
  --mf-steel-trans-7: rgba(57, 148, 193, 0.07);
  --mf-steel-trans-16: rgba(57, 148, 193, 0.16);
  --mf-steel-trans-18: rgba(57, 148, 193, 0.18);
  --mf-steel-300: #9fc5d8;
  --mf-steel-trans-22: rgba(57, 148, 193, 0.22);
  --mf-steel-trans-10: rgba(57, 148, 193, 0.1);
  --mf-steel-trans-0: rgba(57, 148, 193, 0);
  --mf-steel-light-trans-13: rgba(196, 224, 237, 0.13);
  --mf-steel-light-trans-8: rgba(196, 224, 237, 0.08);
  --mf-steel-light-trans-30: rgba(196, 224, 237, 0.3);
  --mf-mist-400: #94a3b8;
  --mf-mist-300: #cbd5e1;
  --mf-mist-accent: #9fb3c8;
  --mf-white-trans-6: rgba(255, 255, 255, 0.06);
  --mf-white-trans-8: rgba(255, 255, 255, 0.08);
  --mf-shade-ink-4: rgba(19, 26, 32, 0.04);
  --mf-shade-ink-5: rgba(19, 26, 32, 0.05);
  --mf-shade-ink-6: rgba(19, 26, 32, 0.06);

  /* v7 semantics: fonts (bundled, src/fonts; E35) */
  --mf-font-body: "MF Outfit", "Outfit", system-ui, sans-serif;
  --mf-font-display: "MF Display", Georgia, serif;

  /* v7 semantics: colour roles */
  --mf-color-heading: var(--mf-ink-ultra-dark);
  --mf-color-text-body: var(--mf-ink-700);
  --mf-color-text-soft: var(--mf-ink-600);
  --mf-color-text-faint: var(--mf-ink-450);
  --mf-color-accent-line: var(--mf-slate);
  --mf-color-eyebrow: var(--mf-steel);
  --mf-color-on-night: var(--mf-white);
  --mf-color-on-night-soft: var(--mf-white-trans-80);
  --mf-color-on-night-accent: var(--mf-steel-light);
  --mf-color-on-night-body: var(--mf-mist-300);
  --mf-color-on-night-muted: var(--mf-mist-400);
  --mf-color-on-night-accent-line: var(--mf-mist-accent);
  --mf-color-portrait-ring: var(--mf-steel-light-trans-30);
  --mf-color-rule: var(--mf-steel-light);
  --mf-color-card: var(--mf-white);
  --mf-color-card-hover: var(--mf-shade-ink-4); /* a linked card under the pointer or focus (round 2, E49) */
  --mf-color-wordmark: var(--mf-ink-500);
  --mf-color-separator: var(--mf-ink-250);
  --mf-color-hairline: var(--mf-shade-ink-7);
  --mf-color-strip: var(--mf-ink-ultra-light);
  --mf-color-marquee: var(--mf-white);
  --mf-color-text-number: var(--mf-ink-350);
  --mf-color-thread: var(--mf-steel-light);
  --mf-color-text-strong: var(--mf-ink-800);
  --mf-color-mix-streamline: var(--mf-steel-300);
  /* §2 want/have cards (v0.2, plan E64): muted status roles. tint = the mark's disc, rule = the card's edge, mark = the
     ✓/✗ stroke. "have" stays neutral on purpose: the status quo reads dull, not alarming. */
  --mf-color-want-tint: var(--mf-forest-ultra-light);
  --mf-color-want-rule: var(--mf-forest-light);
  --mf-color-want-mark: var(--mf-forest);
  --mf-color-have-tint: var(--mf-slate-ultra-light);
  --mf-color-have-rule: var(--mf-slate-light);
  --mf-color-have-mark: var(--mf-slate-medium);
  --mf-gradient-brand-across: linear-gradient(90deg, var(--mf-steel), var(--mf-forest));
  --mf-color-card-border: var(--mf-shade-ink-8);
  --mf-color-card-border-strong: var(--mf-shade-ink-10);
  --mf-color-chip-border: var(--mf-steel-150);
  --mf-color-divider: var(--mf-ink-150);
  --mf-color-connector: var(--mf-steel-300);
  --mf-color-group-people: var(--mf-steel);
  --mf-color-group-ai: var(--mf-teal);
  --mf-color-group-stack: var(--mf-forest);
  --mf-gradient-brand: linear-gradient(135deg, var(--mf-steel), var(--mf-forest));
  --mf-gradient-connector: linear-gradient(180deg, var(--mf-steel-light), var(--mf-steel));
  --mf-color-button: var(--mf-steel);
  --mf-color-button-hover: var(--mf-steel-hover);
  --mf-color-button-text: var(--mf-white);
  --mf-color-backdrop-glow: var(--mf-steel-trans-22);
  --mf-color-backdrop-glow-mid: var(--mf-steel-trans-10);
  --mf-color-backdrop-glow-end: var(--mf-steel-trans-0);
  --mf-color-sneak-glow: var(--mf-steel-trans-7);
  --mf-color-backdrop-grid-major: var(--mf-steel-light-trans-13);
  --mf-color-backdrop-grid-minor: var(--mf-steel-light-trans-8);
  --mf-color-hero-strip-line: var(--mf-white-trans-6);
  --mf-color-hero-strip-mark: var(--mf-white-trans-8);
  --mf-color-mask-full: var(--mf-black);
  --mf-color-mask-soft: var(--mf-black-trans-75);

  /* v7 semantics: band backgrounds */
  --mf-gradient-night-down: linear-gradient(180deg, var(--mf-night-950) 0%, var(--mf-night-900) 100%);
  --mf-gradient-night-up: linear-gradient(180deg, var(--mf-night-900) 0%, var(--mf-night-950) 100%);
  --mf-gradient-cool-down: linear-gradient(180deg, var(--mf-ink-ultra-light) 0%, var(--mf-white) 100%);
  --mf-gradient-cool-both: linear-gradient(180deg, var(--mf-ink-ultra-light) 0%, var(--mf-white) 38%, var(--mf-white) 72%, var(--mf-ink-ultra-light) 100%);
  --mf-gradient-cool-up: linear-gradient(180deg, var(--mf-white) 0%, var(--mf-ink-ultra-light) 100%);

  /* v7 semantics: type */
  --mf-text-eyebrow: 1.3rem;
  --mf-label-tracking: 0.1em;
  --mf-label-tracking-wide: 0.14em;
  --mf-text-button: 1.6rem;
  --mf-text-button-l: 1.7rem;
  --mf-heading-display-hero: clamp(3.4rem, calc(2.4719vw + 2.4360rem), 5.6rem);
  --mf-heading-display-hero-wide: 6.4rem;
  --mf-text-lede-wide: 2.2rem;
  --mf-space-site-header: 9.1rem; /* the live Bricks header at desktop widths (measured 2026-10-26) */
  --mf-heading-display-problem: clamp(3rem, calc(1.5730vw + 2.3865rem), 4.4rem);
  --mf-heading-display-stack: clamp(3rem, calc(1.5730vw + 2.3865rem), 4.4rem);
  --mf-heading-display-process: clamp(3rem, calc(1.3483vw + 2.4742rem), 4.2rem);
  --mf-heading-display-proof: clamp(3.2rem, calc(1.7978vw + 2.4989rem), 4.8rem);
  --mf-heading-display-inquiry: clamp(3.4rem, calc(2.0225vw + 2.6112rem), 5.2rem);
  --mf-heading-display-voices: clamp(2.6rem, calc(0.4494vw + 2.4247rem), 3rem);
  --mf-heading-display-sneak: clamp(3.2rem, calc(1.3483vw + 2.6742rem), 4.4rem);
  --mf-heading-display-faq: clamp(3.2rem, calc(1.3483vw + 2.6742rem), 4.4rem);
  --mf-heading-display-signoff: clamp(3.4rem, calc(1.5730vw + 2.7865rem), 4.8rem);
  --mf-text-lede-l: clamp(1.8rem, calc(0.1124vw + 1.7562rem), 1.9rem);
  --mf-text-lede-s: clamp(1.7rem, calc(0.2247vw + 1.6124rem), 1.9rem);
  --mf-text-lede: clamp(1.7rem, calc(0.3371vw + 1.5685rem), 2rem);

  /* v7 semantics: the band rhythm. Every other gap is a Gap role or a Space scale step (below); the pixel-named
     --mf-space-<n> and one-off --mf-space-fl-* tokens were deleted in spacing-system plan step 4, so a use fails the lint. */
  --mf-text-wordmark: clamp(1.8rem, calc(0.6742vw + 1.5371rem), 2.4rem);
  --mf-text-quote: clamp(2rem, calc(0.6742vw + 1.7371rem), 2.6rem);
  --mf-text-industry: clamp(1.2rem, calc(0.1124vw + 1.1562rem), 1.3rem);
  /* The one page rhythm (round 2, R9/E46): every light section's padding-block. 7.2rem at 390, 12rem at 1280; a seam
     between two light sections is twice this (tools/seams.mjs checks it). Hero, process-start and voices keep their own. */
  --mf-section-space-page: clamp(7.2rem, calc(5.3933vw + 5.0966rem), 12rem);
  --mf-section-space-hero-top: clamp(7.2rem, calc(6.2921vw + 4.7461rem), 12.8rem);
  --mf-section-space-hero-bottom: clamp(10.8rem, calc(8.0899vw + 7.6449rem), 18rem);
  --mf-gutter-band: clamp(2.4rem, calc(6.2921vw + -0.0539rem), 8rem);

  /* v7 semantics: radius + shadow */
  --mf-radius-button: 0.8rem;
  --mf-radius-card: 1.4rem;
  --mf-radius-pill: 99.9rem;
  --mf-radius-round: 50%;
  --mf-radius-hairline: 0.2rem;
  --mf-shadow-card: 0 1px 2px var(--mf-shade-ink-4), 0 8px 24px var(--mf-shade-ink-5);
  --mf-shadow-card-raised: 0 1px 2px var(--mf-shade-ink-4), 0 8px 24px var(--mf-shade-ink-6);
  /* Card lift (GLOSSARY.md; v0.2 plan E65): a static card's small hover/focus response. ≤ 200 ms, transform + shadow only. */
  --mf-shadow-card-lift: 0 2px 4px var(--mf-shade-ink-5), 0 14px 32px var(--mf-shade-ink-8);
  --mf-space-lift: -0.3rem;
  --mf-duration-lift: 0.18s;
  --mf-ease-lift: cubic-bezier(0.2, 0.7, 0.3, 1);
  --mf-shadow-hub: 0 12px 32px var(--mf-steel-trans-16);
  --mf-radius-hub: 2rem;
  --mf-radius-group: 1.6rem;
  --mf-radius-icon: 1.1rem;
  --mf-text-chip: 1.4rem;
  --mf-text-card: 1.6rem;
  --mf-text-small: 1.5rem;
  --mf-text-name: 1.7rem;
  --mf-text-hub: 2rem;
  --mf-text-body: 1.7rem;
  --mf-text-trust: 1.5rem;
  --mf-text-phase: clamp(1.6rem, calc(0.2247vw + 1.5124rem), 1.8rem);
  --mf-heading-card: clamp(1.9rem, calc(0.3371vw + 1.7685rem), 2.2rem); /* §2 card labels (v0.2) */
  --mf-heading-phase: clamp(2.4rem, calc(0.4494vw + 2.2247rem), 2.8rem);
  --mf-text-label-s: clamp(1.2rem, calc(0.1124vw + 1.1562rem), 1.3rem);
  --mf-text-meta: 1.4rem;
  --mf-text-signoff: clamp(1.7rem, calc(0.1124vw + 1.6562rem), 1.8rem);
  --mf-text-signature: 2.4rem;
  --mf-text-faq-q: clamp(1.7rem, calc(0.2247vw + 1.6124rem), 1.9rem);
  --mf-text-body-fl: clamp(1.6rem, calc(0.1124vw + 1.5562rem), 1.7rem);
}

/* The Space scale (GLOSSARY.md; spacing-system plan E52): one base m and one ratio per viewport end, set in
   tokens/space-scale.json. Change a number there and every gap on every renderer page follows. */
/* BEGIN GENERATED: Space scale, from tokens/space-scale.json by tools/build-tokens.mjs. Edit the json, not this. */
:root {
  --mf-step-3xs: 0.4rem;
  --mf-step-2xs: 0.8rem;
  --mf-step-xs: clamp(1.0667rem, calc(-0.1926vw + 1.3132rem), 1.2381rem); /* 12.3812px @390 → 10.6667px @1280 */
  --mf-step-s: clamp(1.6rem, calc(-0.0566vw + 1.6725rem), 1.6504rem); /* 16.5041px @390 → 16px @1280 */
  --mf-step-m: clamp(2.2rem, calc(0.2247vw + 2.1124rem), 2.4rem); /* 22px @390 → 24px @1280 */
  --mf-step-l: clamp(2.9326rem, calc(0.7499vw + 2.6401rem), 3.6rem); /* 29.326px @390 → 36px @1280 */
  --mf-step-xl: clamp(3.9092rem, calc(1.6751vw + 3.2559rem), 5.4rem); /* 39.0916px @390 → 54px @1280 */
  --mf-step-2xl: clamp(5.2109rem, calc(3.2462vw + 3.9449rem), 8.1rem); /* 52.109px @390 → 81px @1280 */
  --mf-step-3xl: clamp(6.9461rem, calc(5.847vw + 4.6658rem), 12.15rem); /* 69.4614px @390 → 121.5px @1280 */
}
/* END GENERATED: Space scale */

/* Gap roles (GLOSSARY.md; plan E54): where a gap sits, mapped to one step. Section CSS reads these, so the same kind of
   gap is the same size in every section. Re-map a role here to move it everywhere; a warranted exception in a section is
   a multiplier of a role (`calc(var(--mf-gap-lede) * 2)`) under an `exception:` comment (plan E61). */
:root {
  --mf-gap-eyebrow: var(--mf-step-s);  /* eyebrow → heading */
  --mf-gap-lede: var(--mf-step-l);     /* heading → lede/subhead (v0.2 E67: m → l, proximity tiers 1:2:4 with eyebrow/content) */
  --mf-gap-label: var(--mf-step-m);    /* small label → the row it labels */
  --mf-gap-flow: var(--mf-step-s);     /* paragraph → paragraph */
  --mf-gap-cluster: var(--mf-step-s);  /* between the items of an action row: buttons, links (a button's icon ↔ label is component geometry) */
  --mf-gap-grid: var(--mf-step-m);     /* between cards or list items */
  --mf-gap-row: var(--mf-step-l);     /* text → the row that belongs to it (CTA buttons, trust facts) */
  --mf-gap-content: var(--mf-step-2xl); /* Section head → content, and block → block inside a section (v0.2 E67: xl → 2xl) */
  --mf-pad-card: var(--mf-step-m);     /* card inner padding (every card on the page sat at ~24px) */
  --mf-space-hairline: 0.1rem;         /* geometry, not rhythm: a 1px gap that draws grid lines */
  --mf-space-hero-strip: 4.4rem;       /* geometry: the hero's logo strip height, which the trust line and padding stack on */
  --mf-space-ring: 0.2rem;             /* geometry, not rhythm: the inset ring around a portrait or the hub card */
}