/* 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-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. */
: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-text-struck: var(--mf-ink-400);
  --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-arrow-soft: var(--mf-ink-300);
  --mf-color-arrow-down: var(--mf-steel-300);
  --mf-color-card: var(--mf-white);
  --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-band-tint: var(--mf-steel-ultra-light);
  --mf-color-band-tint-label: var(--mf-steel-semi-dark);
  --mf-color-text-strong: var(--mf-ink-800);
  --mf-color-card-border-tint: var(--mf-steel-trans-18);
  --mf-color-mix-map: var(--mf-steel);
  --mf-color-mix-streamline: var(--mf-steel-300);
  --mf-color-mix-govern: var(--mf-forest);
  --mf-gradient-thread: linear-gradient(180deg, var(--mf-steel), var(--mf-forest));
  --mf-gradient-brand-down: linear-gradient(180deg, var(--mf-steel), var(--mf-forest));
  --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-hero-glow: var(--mf-steel-trans-22);
  --mf-color-hero-glow-mid: var(--mf-steel-trans-10);
  --mf-color-hero-glow-end: var(--mf-steel-trans-0);
  --mf-color-sneak-glow: var(--mf-steel-trans-7);
  --mf-color-hero-grid-major: var(--mf-steel-light-trans-13);
  --mf-color-hero-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.2rem;
  --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-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-offer: clamp(3rem, calc(1.1236vw + 2.5618rem), 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.6rem, calc(0.2247vw + 1.5124rem), 1.8rem);
  --mf-text-lede: clamp(1.6rem, calc(0.3371vw + 1.4685rem), 1.9rem);
  --mf-text-aside: clamp(1.6rem, calc(0.2247vw + 1.5124rem), 1.8rem);
  --mf-text-pair-x: clamp(1.5rem, calc(0.3371vw + 1.3685rem), 1.8rem);
  --mf-text-pair-y: clamp(1.9rem, calc(0.5618vw + 1.6809rem), 2.4rem);

  /* v7 semantics: space (fixed steps in px/10, and the band rhythm) */
  --mf-space-1: 0.1rem;
  --mf-space-2: 0.2rem;
  --mf-space-3: 0.3rem;
  --mf-space-4: 0.4rem;
  --mf-space-5: 0.5rem;
  --mf-space-6: 0.6rem;
  --mf-space-8: 0.8rem;
  --mf-space-10: 1rem;
  --mf-space-12: 1.2rem;
  --mf-space-14: 1.4rem;
  --mf-space-16: 1.6rem;
  --mf-space-18: 1.8rem;
  --mf-space-20: 2rem;
  --mf-space-22: 2.2rem;
  --mf-space-24: 2.4rem;
  --mf-space-26: 2.6rem;
  --mf-space-28: 2.8rem;
  --mf-space-32: 3.2rem;
  --mf-space-36: 3.6rem;
  --mf-space-40: 4rem;
  --mf-space-48: 4.8rem;
  --mf-space-56: 5.6rem;
  --mf-space-44: 4.4rem;
  --mf-space-52: 5.2rem;
  --mf-space-60: 6rem;
  --mf-space-64: 6.4rem;
  --mf-space-fl-88-92: clamp(8.8rem, calc(0.4494vw + 8.6247rem), 9.2rem);
  --mf-space-fl-48-88: clamp(4.8rem, calc(4.4944vw + 3.0472rem), 8.8rem);
  --mf-space-fl-48-96: clamp(4.8rem, calc(5.3933vw + 2.6966rem), 9.6rem);
  --mf-space-fl-52-72: clamp(5.2rem, calc(2.2472vw + 4.3236rem), 7.2rem);
  --mf-space-fl-56-120: clamp(5.6rem, calc(7.1910vw + 2.7955rem), 12rem);
  --mf-space-fl-24-40: clamp(2.4rem, calc(1.7978vw + 1.6989rem), 4rem);
  --mf-space-fl-96-152: clamp(9.6rem, calc(6.2921vw + 7.1461rem), 15.2rem);
  --mf-space-fl-22-24: clamp(2.2rem, calc(0.2247vw + 2.1124rem), 2.4rem);
  --mf-space-fl-48-128: clamp(4.8rem, calc(8.9888vw + 1.2944rem), 12.8rem);
  --mf-space-fl-80-104: clamp(8rem, calc(2.6966vw + 6.9483rem), 10.4rem);
  --mf-space-fl-16-20: clamp(1.6rem, calc(0.4494vw + 1.4247rem), 2rem);
  --mf-space-fl-72-120: clamp(7.2rem, calc(5.3933vw + 5.0966rem), 12rem);
  --mf-space-fl-64-112: clamp(6.4rem, calc(5.3933vw + 4.2966rem), 11.2rem);
  --mf-space-fl-48-72: clamp(4.8rem, calc(2.6966vw + 3.7483rem), 7.2rem);
  --mf-space-fl-48-80: clamp(4.8rem, calc(3.5955vw + 3.3978rem), 8rem);
  --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(1rem, calc(0.1124vw + 0.9562rem), 1.1rem);
  --mf-space-fl-88-128: clamp(8.8rem, calc(4.4944vw + 7.0472rem), 12.8rem);
  --mf-space-fl-44-48: clamp(4.4rem, calc(0.4494vw + 4.2247rem), 4.8rem);
  --mf-space-fl-24-32: clamp(2.4rem, calc(0.8989vw + 2.0494rem), 3.2rem);
  --mf-space-fl-48-64: clamp(4.8rem, calc(1.7978vw + 4.0989rem), 6.4rem);
  --mf-section-space-band: clamp(9.6rem, calc(5.3933vw + 7.4966rem), 14.4rem);
  --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-radius-bar: 0.5rem;
  --mf-radius-key: 0.3rem;
  --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);
  --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.3rem;
  --mf-text-card: 1.5rem;
  --mf-text-small: 1.4rem;
  --mf-text-name: 1.7rem;
  --mf-text-hub: 2rem;
  --mf-text-body: 1.6rem;
  --mf-text-trust: clamp(1.35rem, calc(-0.1685vw + 1.6157rem), 1.5rem);
  --mf-text-phase: clamp(1.5rem, calc(0.2247vw + 1.4124rem), 1.7rem);
  --mf-heading-phase: clamp(2.4rem, calc(0.4494vw + 2.2247rem), 2.8rem);
  --mf-heading-start: clamp(2.4rem, calc(0.6742vw + 2.1371rem), 3rem);
  --mf-text-label-s: clamp(1.1rem, calc(0.1124vw + 1.0562rem), 1.2rem);
  --mf-text-meta: 1.3rem;
  --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.5rem, calc(0.1124vw + 1.4562rem), 1.6rem);
  --mf-section-space-offer: clamp(5.6rem, calc(4.4944vw + 3.8472rem), 9.6rem);
  --mf-gutter-offer: clamp(2rem, calc(6.7416vw + -0.6292rem), 8rem);
  --mf-text-intro: clamp(1.7rem, calc(0.3371vw + 1.5685rem), 2rem);
  --mf-heading-layer: clamp(2rem, calc(0.2247vw + 1.9124rem), 2.2rem);
}