@echelon-foundry/design-system 0.2.0 → 0.3.0-main.216.1

package/dist/marketing/forma-marketing.css

@@ -0,0 +1,1947 @@
+/*! Forma 0.3.0 | forma-marketing.css | bundle echelon-marketing
+    Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.
+    Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
+
+/* --- source: dist/tokens.css --- */
+/* Generated from echelon.tokens.json. Do not edit directly. */
+@layer echelon.tokens {
+  :root {
+  --ef-primitive-border-width-accent: 4px;
+  --ef-primitive-border-width-thick: 2px;
+  --ef-primitive-border-width-thin: 1px;
+  --ef-primitive-color-amber-light: #d99a55;
+  --ef-primitive-color-analog-blue: #315f8c;
+  --ef-primitive-color-analog-teal: #286c68;
+  --ef-primitive-color-black: #000000;
+  --ef-primitive-color-carbon: #171a18;
+  --ef-primitive-color-clinical: #f8fafb;
+  --ef-primitive-color-clinical-muted: #50636d;
+  --ef-primitive-color-clinical-secondary: #e6edf1;
+  --ef-primitive-color-clinical-text: #17242b;
+  --ef-primitive-color-comp-blue: #175f8f;
+  --ef-primitive-color-comp-rust: #9a3f19;
+  --ef-primitive-color-deep-slate: #12191d;
+  --ef-primitive-color-earth-bg: #f3eadc;
+  --ef-primitive-color-earth-green: #356044;
+  --ef-primitive-color-earth-surface: #dfcfb8;
+  --ef-primitive-color-earth-text: #29231c;
+  --ef-primitive-color-editorial-bg: #f6f4ef;
+  --ef-primitive-color-editorial-surface: #e7e3da;
+  --ef-primitive-color-forest: #285c45;
+  --ef-primitive-color-forged-iron: #3a403c;
+  --ef-primitive-color-foundry-charcoal: #202421;
+  --ef-primitive-color-graphite: #686d68;
+  --ef-primitive-color-ice: #e8f1f4;
+  --ef-primitive-color-ink: #211d18;
+  --ef-primitive-color-institutional-bg: #f4f7f8;
+  --ef-primitive-color-institutional-blue: #245d7a;
+  --ef-primitive-color-institutional-surface: #dde6e9;
+  --ef-primitive-color-institutional-text: #17252b;
+  --ef-primitive-color-mono-accent: #3b5f55;
+  --ef-primitive-color-muted-plum: #70405c;
+  --ef-primitive-color-muted-teal: #356b64;
+  --ef-primitive-color-nature-bg: #f1f0e5;
+  --ef-primitive-color-nature-blue: #315e75;
+  --ef-primitive-color-nature-green: #315f3d;
+  --ef-primitive-color-nature-surface: #dce2cf;
+  --ef-primitive-color-nature-text: #20281f;
+  --ef-primitive-color-navy: #244f73;
+  --ef-primitive-color-neutral-100: #eeeeee;
+  --ef-primitive-color-neutral-200: #d8d8d8;
+  --ef-primitive-color-neutral-650: #555555;
+  --ef-primitive-color-neutral-800: #303030;
+  --ef-primitive-color-neutral-950: #161616;
+  --ef-primitive-color-ops-blue: #315f8c;
+  --ef-primitive-color-ops-red: #9c2f25;
+  --ef-primitive-color-oxide-bronze: #905831;
+  --ef-primitive-color-oxide-bronze-deep: #74461f;
+  --ef-primitive-color-oxide-bronze-light: #a87e5e;
+  --ef-primitive-color-oxide-bronze-pale: #c9a07f;
+  --ef-primitive-color-paper: #f7f2e7;
+  --ef-primitive-color-paper-muted: #e7dece;
+  --ef-primitive-color-parchment: #f2efe7;
+  --ef-primitive-color-parchment-light: #f8f6f1;
+  --ef-primitive-color-signal-blue: #005ea8;
+  --ef-primitive-color-signal-cyan: #006b75;
+  --ef-primitive-color-slate-surface: #202a30;
+  --ef-primitive-color-split-blue: #175f8f;
+  --ef-primitive-color-split-plum: #7a3f70;
+  --ef-primitive-color-split-rust: #93451e;
+  --ef-primitive-color-status-danger: #a13a2c;
+  --ef-primitive-color-status-danger-light: #ef9a8b;
+  --ef-primitive-color-status-info: #2d5f86;
+  --ef-primitive-color-status-info-light: #90b9dc;
+  --ef-primitive-color-status-success: #2e6a45;
+  --ef-primitive-color-status-success-light: #8cc49f;
+  --ef-primitive-color-status-warning: #86560f;
+  --ef-primitive-color-status-warning-light: #ddb266;
+  --ef-primitive-color-stone: #e3e0d7;
+  --ef-primitive-color-tech-amber: #d29a58;
+  --ef-primitive-color-tech-bg: #101619;
+  --ef-primitive-color-tech-cyan: #63a8b2;
+  --ef-primitive-color-tech-surface: #1d272c;
+  --ef-primitive-color-tech-text: #e7eef0;
+  --ef-primitive-color-verdigris: #47756b;
+  --ef-primitive-color-verdigris-light: #698d84;
+  --ef-primitive-color-white: #ffffff;
+  --ef-primitive-focus-halo-width: 5px;
+  --ef-primitive-focus-ring-offset: 2px;
+  --ef-primitive-focus-ring-width: 3px;
+  --ef-primitive-font-family-display: Newsreader, Georgia, serif;
+  --ef-primitive-font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --ef-primitive-font-family-sans: Manrope, system-ui, sans-serif;
+  --ef-primitive-font-size-2xl: 2rem;
+  --ef-primitive-font-size-2xs: 0.6875rem;
+  --ef-primitive-font-size-3xl: 2.5rem;
+  --ef-primitive-font-size-fluid-display-1: clamp(2.5rem, 1.75rem + 6vw, 7.25rem);
+  --ef-primitive-font-size-fluid-display-2: clamp(2rem, 1.25rem + 3.6vw, 4.5rem);
+  --ef-primitive-font-size-fluid-display-3: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
+  --ef-primitive-font-size-fluid-lead: clamp(1.125rem, 0.875rem + 0.85vw, 1.5rem);
+  --ef-primitive-font-size-lg: 1.25rem;
+  --ef-primitive-font-size-md: 1rem;
+  --ef-primitive-font-size-sm: 0.875rem;
+  --ef-primitive-font-size-xl: 1.5rem;
+  --ef-primitive-font-size-xs: 0.75rem;
+  --ef-primitive-font-weight-bold: 700;
+  --ef-primitive-font-weight-medium: 500;
+  --ef-primitive-font-weight-regular: 400;
+  --ef-primitive-font-weight-semibold: 600;
+  --ef-primitive-letter-spacing-normal: 0em;
+  --ef-primitive-letter-spacing-tight: -0.035em;
+  --ef-primitive-letter-spacing-wide: 0.09em;
+  --ef-primitive-line-height-display: 1;
+  --ef-primitive-line-height-normal: 1.5;
+  --ef-primitive-line-height-relaxed: 1.65;
+  --ef-primitive-line-height-snug: 1.25;
+  --ef-primitive-motion-duration-fast: 120ms;
+  --ef-primitive-motion-duration-instant: 0ms;
+  --ef-primitive-motion-duration-slow: 280ms;
+  --ef-primitive-motion-duration-standard: 180ms;
+  --ef-primitive-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --ef-primitive-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --ef-primitive-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ef-primitive-radius-medium: 8px;
+  --ef-primitive-radius-none: 0px;
+  --ef-primitive-radius-pill: 999px;
+  --ef-primitive-radius-small: 4px;
+  --ef-primitive-shadow-raised: 0px 1px 2px 0px rgb(23 26 24 / 0.08), 0px 8px 24px -8px rgb(23 26 24 / 0.08);
+  --ef-primitive-size-container-max: 90rem;
+  --ef-primitive-size-container-narrow: 45rem;
+  --ef-primitive-size-container-standard: 64rem;
+  --ef-primitive-size-container-wide: 75rem;
+  --ef-primitive-size-fluid-block-space: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
+  --ef-primitive-size-fluid-gutter: clamp(1rem, 4vw, 4.5rem);
+  --ef-primitive-size-fluid-section-space: clamp(4rem, 2rem + 6vw, 10rem);
+  --ef-primitive-size-measure: 72ch;
+  --ef-primitive-size-measure-narrow: 62ch;
+  --ef-primitive-size-target-min: 2.75rem;
+  --ef-primitive-space-1: 0.25rem;
+  --ef-primitive-space-2: 0.5rem;
+  --ef-primitive-space-3: 0.75rem;
+  --ef-primitive-space-4: 1rem;
+  --ef-primitive-space-5: 1.25rem;
+  --ef-primitive-space-6: 1.5rem;
+  --ef-primitive-space-7: 2rem;
+  --ef-primitive-space-8: 3rem;
+  --ef-primitive-spacing-1: 4px;
+  --ef-primitive-spacing-10: 128px;
+  --ef-primitive-spacing-2: 8px;
+  --ef-primitive-spacing-3: 12px;
+  --ef-primitive-spacing-4: 16px;
+  --ef-primitive-spacing-5: 24px;
+  --ef-primitive-spacing-6: 32px;
+  --ef-primitive-spacing-7: 48px;
+  --ef-primitive-spacing-8: 64px;
+  --ef-primitive-spacing-9: 96px;
+}
+  :root, [data-ef-theme="light"] {
+  --ef-color-accent-primary: #905831;
+  --ef-color-accent-secondary: #47756b;
+  --ef-color-border-functional: #3a403c;
+  --ef-color-border-subtle: #e3e0d7;
+  --ef-color-control-active: #905831;
+  --ef-color-control-thumb: #f2efe7;
+  --ef-color-control-track: #686d68;
+  --ef-color-focus-gap: #f2efe7;
+  --ef-color-focus-ring: #171a18;
+  --ef-color-surface-inverse: #202421;
+  --ef-color-surface-inverse-secondary: #3a403c;
+  --ef-color-surface-primary: #f2efe7;
+  --ef-color-surface-secondary: #e3e0d7;
+  --ef-color-text-heading: #202421;
+  --ef-color-text-inverse: #f2efe7;
+  --ef-color-text-on-secondary-surface: #3a403c;
+  --ef-color-text-primary: #171a18;
+  --ef-color-text-secondary: #686d68;
+}
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-ef-theme]) {
+  --ef-color-accent-primary: #a87e5e;
+  --ef-color-accent-secondary: #698d84;
+  --ef-color-border-functional: #e3e0d7;
+  --ef-color-border-subtle: #3a403c;
+  --ef-color-control-active: #a87e5e;
+  --ef-color-control-thumb: #f2efe7;
+  --ef-color-control-track: #686d68;
+  --ef-color-focus-gap: #171a18;
+  --ef-color-focus-ring: #f2efe7;
+  --ef-color-surface-inverse: #f2efe7;
+  --ef-color-surface-inverse-secondary: #e3e0d7;
+  --ef-color-surface-primary: #171a18;
+  --ef-color-surface-secondary: #202421;
+  --ef-color-text-heading: #f2efe7;
+  --ef-color-text-inverse: #171a18;
+  --ef-color-text-on-secondary-surface: #f2efe7;
+  --ef-color-text-primary: #f2efe7;
+  --ef-color-text-secondary: #e3e0d7;
+}
+  }
+  [data-ef-theme="accent-neutral"] {
+  --ef-color-accent-primary: #005ea8;
+  --ef-color-accent-secondary: #006b75;
+  --ef-color-border-functional: #555555;
+  --ef-color-border-subtle: #d8d8d8;
+  --ef-color-control-active: #005ea8;
+  --ef-color-control-thumb: #ffffff;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #ffffff;
+  --ef-color-focus-ring: #005ea8;
+  --ef-color-surface-inverse: #161616;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #ffffff;
+  --ef-color-surface-secondary: #eeeeee;
+  --ef-color-text-heading: #161616;
+  --ef-color-text-inverse: #ffffff;
+  --ef-color-text-on-secondary-surface: #303030;
+  --ef-color-text-primary: #161616;
+  --ef-color-text-secondary: #555555;
+}
+  [data-ef-theme="analogous-cohesive"] {
+  --ef-color-accent-primary: #315f8c;
+  --ef-color-accent-secondary: #286c68;
+  --ef-color-border-functional: #555555;
+  --ef-color-border-subtle: #d8d8d8;
+  --ef-color-control-active: #315f8c;
+  --ef-color-control-thumb: #ffffff;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #ffffff;
+  --ef-color-focus-ring: #315f8c;
+  --ef-color-surface-inverse: #161616;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #ffffff;
+  --ef-color-surface-secondary: #eeeeee;
+  --ef-color-text-heading: #161616;
+  --ef-color-text-inverse: #ffffff;
+  --ef-color-text-on-secondary-surface: #303030;
+  --ef-color-text-primary: #161616;
+  --ef-color-text-secondary: #555555;
+}
+  [data-ef-theme="clinical-light"] {
+  --ef-color-accent-primary: #005ea8;
+  --ef-color-accent-secondary: #006b75;
+  --ef-color-border-functional: #50636d;
+  --ef-color-border-subtle: #e6edf1;
+  --ef-color-control-active: #005ea8;
+  --ef-color-control-thumb: #ffffff;
+  --ef-color-control-track: #50636d;
+  --ef-color-focus-gap: #f8fafb;
+  --ef-color-focus-ring: #005ea8;
+  --ef-color-surface-inverse: #17242b;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #f8fafb;
+  --ef-color-surface-secondary: #e6edf1;
+  --ef-color-text-heading: #17242b;
+  --ef-color-text-inverse: #f8fafb;
+  --ef-color-text-on-secondary-surface: #17242b;
+  --ef-color-text-primary: #17242b;
+  --ef-color-text-secondary: #50636d;
+}
+  [data-ef-theme="complementary-energy"] {
+  --ef-color-accent-primary: #175f8f;
+  --ef-color-accent-secondary: #9a3f19;
+  --ef-color-border-functional: #555555;
+  --ef-color-border-subtle: #d8d8d8;
+  --ef-color-control-active: #175f8f;
+  --ef-color-control-thumb: #ffffff;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #ffffff;
+  --ef-color-focus-ring: #175f8f;
+  --ef-color-surface-inverse: #161616;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #ffffff;
+  --ef-color-surface-secondary: #eeeeee;
+  --ef-color-text-heading: #161616;
+  --ef-color-text-inverse: #ffffff;
+  --ef-color-text-on-secondary-surface: #303030;
+  --ef-color-text-primary: #161616;
+  --ef-color-text-secondary: #555555;
+}
+  [data-ef-theme="cool-institutional"] {
+  --ef-color-accent-primary: #245d7a;
+  --ef-color-accent-secondary: #006b75;
+  --ef-color-border-functional: #50636d;
+  --ef-color-border-subtle: #dde6e9;
+  --ef-color-control-active: #245d7a;
+  --ef-color-control-thumb: #ffffff;
+  --ef-color-control-track: #50636d;
+  --ef-color-focus-gap: #f4f7f8;
+  --ef-color-focus-ring: #245d7a;
+  --ef-color-surface-inverse: #17252b;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #f4f7f8;
+  --ef-color-surface-secondary: #dde6e9;
+  --ef-color-text-heading: #17252b;
+  --ef-color-text-inverse: #f4f7f8;
+  --ef-color-text-on-secondary-surface: #17252b;
+  --ef-color-text-primary: #17252b;
+  --ef-color-text-secondary: #50636d;
+}
+  [data-ef-theme="dark"] {
+  --ef-color-accent-primary: #a87e5e;
+  --ef-color-accent-secondary: #698d84;
+  --ef-color-border-functional: #e3e0d7;
+  --ef-color-border-subtle: #3a403c;
+  --ef-color-control-active: #a87e5e;
+  --ef-color-control-thumb: #f2efe7;
+  --ef-color-control-track: #686d68;
+  --ef-color-focus-gap: #171a18;
+  --ef-color-focus-ring: #f2efe7;
+  --ef-color-surface-inverse: #f2efe7;
+  --ef-color-surface-inverse-secondary: #e3e0d7;
+  --ef-color-surface-primary: #171a18;
+  --ef-color-surface-secondary: #202421;
+  --ef-color-text-heading: #f2efe7;
+  --ef-color-text-inverse: #171a18;
+  --ef-color-text-on-secondary-surface: #f2efe7;
+  --ef-color-text-primary: #f2efe7;
+  --ef-color-text-secondary: #e3e0d7;
+}
+  [data-ef-theme="dark-restrained"] {
+  --ef-color-accent-primary: #d99a55;
+  --ef-color-accent-secondary: #698d84;
+  --ef-color-border-functional: #e3e0d7;
+  --ef-color-border-subtle: #3a403c;
+  --ef-color-control-active: #d99a55;
+  --ef-color-control-thumb: #e8f1f4;
+  --ef-color-control-track: #686d68;
+  --ef-color-focus-gap: #12191d;
+  --ef-color-focus-ring: #e8f1f4;
+  --ef-color-surface-inverse: #e8f1f4;
+  --ef-color-surface-inverse-secondary: #e3e0d7;
+  --ef-color-surface-primary: #12191d;
+  --ef-color-surface-secondary: #202a30;
+  --ef-color-text-heading: #e8f1f4;
+  --ef-color-text-inverse: #12191d;
+  --ef-color-text-on-secondary-surface: #e8f1f4;
+  --ef-color-text-primary: #e8f1f4;
+  --ef-color-text-secondary: #e3e0d7;
+}
+  [data-ef-theme="dark-technical"] {
+  --ef-color-accent-primary: #63a8b2;
+  --ef-color-accent-secondary: #d29a58;
+  --ef-color-border-functional: #e3e0d7;
+  --ef-color-border-subtle: #3a403c;
+  --ef-color-control-active: #63a8b2;
+  --ef-color-control-thumb: #e7eef0;
+  --ef-color-control-track: #686d68;
+  --ef-color-focus-gap: #101619;
+  --ef-color-focus-ring: #e7eef0;
+  --ef-color-surface-inverse: #e7eef0;
+  --ef-color-surface-inverse-secondary: #e3e0d7;
+  --ef-color-surface-primary: #101619;
+  --ef-color-surface-secondary: #1d272c;
+  --ef-color-text-heading: #e7eef0;
+  --ef-color-text-inverse: #101619;
+  --ef-color-text-on-secondary-surface: #e7eef0;
+  --ef-color-text-primary: #e7eef0;
+  --ef-color-text-secondary: #e3e0d7;
+}
+  [data-ef-theme="high-contrast"] {
+  --ef-color-accent-primary: #000000;
+  --ef-color-accent-secondary: #303030;
+  --ef-color-border-functional: #000000;
+  --ef-color-border-subtle: #d8d8d8;
+  --ef-color-control-active: #000000;
+  --ef-color-control-thumb: #ffffff;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #ffffff;
+  --ef-color-focus-ring: #000000;
+  --ef-color-surface-inverse: #000000;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #ffffff;
+  --ef-color-surface-secondary: #eeeeee;
+  --ef-color-text-heading: #000000;
+  --ef-color-text-inverse: #ffffff;
+  --ef-color-text-on-secondary-surface: #000000;
+  --ef-color-text-primary: #000000;
+  --ef-color-text-secondary: #303030;
+}
+  [data-ef-theme="mono-semantic"] {
+  --ef-color-accent-primary: #3b5f55;
+  --ef-color-accent-secondary: #555555;
+  --ef-color-border-functional: #555555;
+  --ef-color-border-subtle: #d8d8d8;
+  --ef-color-control-active: #3b5f55;
+  --ef-color-control-thumb: #ffffff;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #ffffff;
+  --ef-color-focus-ring: #161616;
+  --ef-color-surface-inverse: #161616;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #ffffff;
+  --ef-color-surface-secondary: #eeeeee;
+  --ef-color-text-heading: #161616;
+  --ef-color-text-inverse: #ffffff;
+  --ef-color-text-on-secondary-surface: #303030;
+  --ef-color-text-primary: #161616;
+  --ef-color-text-secondary: #555555;
+}
+  [data-ef-theme="muted-professional"] {
+  --ef-color-accent-primary: #70405c;
+  --ef-color-accent-secondary: #356b64;
+  --ef-color-border-functional: #555555;
+  --ef-color-border-subtle: #d8d8d8;
+  --ef-color-control-active: #70405c;
+  --ef-color-control-thumb: #ffffff;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #eeeeee;
+  --ef-color-focus-ring: #161616;
+  --ef-color-surface-inverse: #161616;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #eeeeee;
+  --ef-color-surface-secondary: #d8d8d8;
+  --ef-color-text-heading: #161616;
+  --ef-color-text-inverse: #ffffff;
+  --ef-color-text-on-secondary-surface: #303030;
+  --ef-color-text-primary: #161616;
+  --ef-color-text-secondary: #555555;
+}
+  [data-ef-theme="nature-derived"] {
+  --ef-color-accent-primary: #315f3d;
+  --ef-color-accent-secondary: #315e75;
+  --ef-color-border-functional: #555555;
+  --ef-color-border-subtle: #dce2cf;
+  --ef-color-control-active: #315f3d;
+  --ef-color-control-thumb: #f1f0e5;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #f1f0e5;
+  --ef-color-focus-ring: #20281f;
+  --ef-color-surface-inverse: #20281f;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #f1f0e5;
+  --ef-color-surface-secondary: #dce2cf;
+  --ef-color-text-heading: #20281f;
+  --ef-color-text-inverse: #f1f0e5;
+  --ef-color-text-on-secondary-surface: #20281f;
+  --ef-color-text-primary: #20281f;
+  --ef-color-text-secondary: #555555;
+}
+  [data-ef-theme="neutral-editorial"] {
+  --ef-color-accent-primary: #905831;
+  --ef-color-accent-secondary: #356b64;
+  --ef-color-border-functional: #555555;
+  --ef-color-border-subtle: #e7e3da;
+  --ef-color-control-active: #905831;
+  --ef-color-control-thumb: #f6f4ef;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #f6f4ef;
+  --ef-color-focus-ring: #161616;
+  --ef-color-surface-inverse: #161616;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #f6f4ef;
+  --ef-color-surface-secondary: #e7e3da;
+  --ef-color-text-heading: #161616;
+  --ef-color-text-inverse: #f6f4ef;
+  --ef-color-text-on-secondary-surface: #303030;
+  --ef-color-text-primary: #161616;
+  --ef-color-text-secondary: #555555;
+}
+  [data-ef-theme="operations-salience"] {
+  --ef-color-accent-primary: #9c2f25;
+  --ef-color-accent-secondary: #315f8c;
+  --ef-color-border-functional: #555555;
+  --ef-color-border-subtle: #d8d8d8;
+  --ef-color-control-active: #9c2f25;
+  --ef-color-control-thumb: #ffffff;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #ffffff;
+  --ef-color-focus-ring: #9c2f25;
+  --ef-color-surface-inverse: #161616;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #ffffff;
+  --ef-color-surface-secondary: #eeeeee;
+  --ef-color-text-heading: #161616;
+  --ef-color-text-inverse: #ffffff;
+  --ef-color-text-on-secondary-surface: #303030;
+  --ef-color-text-primary: #161616;
+  --ef-color-text-secondary: #555555;
+}
+  [data-ef-theme="paper-ink"] {
+  --ef-color-accent-primary: #905831;
+  --ef-color-accent-secondary: #285c45;
+  --ef-color-border-functional: #555555;
+  --ef-color-border-subtle: #e7dece;
+  --ef-color-control-active: #905831;
+  --ef-color-control-thumb: #f7f2e7;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #f7f2e7;
+  --ef-color-focus-ring: #211d18;
+  --ef-color-surface-inverse: #211d18;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #f7f2e7;
+  --ef-color-surface-secondary: #e7dece;
+  --ef-color-text-heading: #211d18;
+  --ef-color-text-inverse: #f7f2e7;
+  --ef-color-text-on-secondary-surface: #211d18;
+  --ef-color-text-primary: #211d18;
+  --ef-color-text-secondary: #555555;
+}
+  [data-ef-theme="split-complementary"] {
+  --ef-color-accent-primary: #175f8f;
+  --ef-color-accent-secondary: #93451e;
+  --ef-color-border-functional: #555555;
+  --ef-color-border-subtle: #d8d8d8;
+  --ef-color-control-active: #175f8f;
+  --ef-color-control-thumb: #ffffff;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #ffffff;
+  --ef-color-focus-ring: #7a3f70;
+  --ef-color-surface-inverse: #161616;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #ffffff;
+  --ef-color-surface-secondary: #eeeeee;
+  --ef-color-text-heading: #161616;
+  --ef-color-text-inverse: #ffffff;
+  --ef-color-text-on-secondary-surface: #303030;
+  --ef-color-text-primary: #161616;
+  --ef-color-text-secondary: #555555;
+}
+  [data-ef-theme="warm-earth"] {
+  --ef-color-accent-primary: #905831;
+  --ef-color-accent-secondary: #356044;
+  --ef-color-border-functional: #555555;
+  --ef-color-border-subtle: #dfcfb8;
+  --ef-color-control-active: #905831;
+  --ef-color-control-thumb: #f3eadc;
+  --ef-color-control-track: #555555;
+  --ef-color-focus-gap: #f3eadc;
+  --ef-color-focus-ring: #29231c;
+  --ef-color-surface-inverse: #29231c;
+  --ef-color-surface-inverse-secondary: #303030;
+  --ef-color-surface-primary: #f3eadc;
+  --ef-color-surface-secondary: #dfcfb8;
+  --ef-color-text-heading: #29231c;
+  --ef-color-text-inverse: #f3eadc;
+  --ef-color-text-on-secondary-surface: #29231c;
+  --ef-color-text-primary: #29231c;
+  --ef-color-text-secondary: #555555;
+}
+}
+
+/* --- source: src/marketing/roles.css --- */
+/*
+  Forma marketing role contract: brand-neutral defaults.
+
+  Marketing foundations, components, and layouts consume only these role
+  tokens and Forma's core semantic tokens. A theme (for example the compiled
+  Echelon Marketing Theme) restates the roles at :root with higher
+  specificity, so these :where() defaults apply only when no theme does.
+
+  Defaults are declared on every theme/brand scope as well as :root so that
+  derived values recompute inside a nested data-ef-theme or data-ef-brand
+  subtree instead of inheriting the root's resolved value.
+*/
+@layer echelon.tokens {
+  :where(:root, [data-ef-theme], [data-ef-brand]) {
+    /* Extended color roles, derived from core semantics. */
+    --ef-color-surface-elevated: var(--ef-color-surface-primary);
+    --ef-color-text-muted: var(--ef-color-text-secondary);
+    --ef-color-accent-hover: var(--ef-color-accent-primary);
+    /* Status defaults are deliberately hue-free: meaning is carried by text. */
+    --ef-color-status-success: var(--ef-color-text-primary);
+    --ef-color-status-warning: var(--ef-color-text-primary);
+    --ef-color-status-danger: var(--ef-color-text-primary);
+    --ef-color-status-info: var(--ef-color-text-primary);
+  }
+
+  :where(:root) {
+    /* Relational spacing scale (rem). Component gaps and padding use only
+       these steps; section and block rhythm use the fluid layout roles. */
+    --ef-space-1: var(--ef-primitive-space-1);
+    --ef-space-2: var(--ef-primitive-space-2);
+    --ef-space-3: var(--ef-primitive-space-3);
+    --ef-space-4: var(--ef-primitive-space-4);
+    --ef-space-5: var(--ef-primitive-space-5);
+    --ef-space-6: var(--ef-primitive-space-6);
+    --ef-space-7: var(--ef-primitive-space-7);
+    --ef-space-8: var(--ef-primitive-space-8);
+
+    --ef-type-family-body: var(--ef-primitive-font-family-sans);
+    --ef-type-family-display: var(--ef-primitive-font-family-display);
+    --ef-type-family-mono: var(--ef-primitive-font-family-mono);
+    --ef-type-size-label: var(--ef-primitive-font-size-xs);
+    --ef-type-size-small: var(--ef-primitive-font-size-sm);
+    --ef-type-size-body: var(--ef-primitive-font-size-md);
+    --ef-type-size-lead: var(--ef-primitive-font-size-fluid-lead);
+    --ef-type-size-h1: var(--ef-primitive-font-size-fluid-display-1);
+    --ef-type-size-h2: var(--ef-primitive-font-size-fluid-display-2);
+    --ef-type-size-h3: var(--ef-primitive-font-size-lg);
+    --ef-type-size-h4: var(--ef-primitive-font-size-md);
+    --ef-type-size-statement: var(--ef-primitive-font-size-fluid-display-3);
+    --ef-type-leading-body: var(--ef-primitive-line-height-normal);
+    --ef-type-leading-lead: var(--ef-primitive-line-height-normal);
+    --ef-type-leading-heading: var(--ef-primitive-line-height-snug);
+    --ef-type-leading-snug: var(--ef-primitive-line-height-snug);
+    --ef-type-weight-body: var(--ef-primitive-font-weight-regular);
+    --ef-type-weight-strong: var(--ef-primitive-font-weight-bold);
+    --ef-type-weight-heading: var(--ef-primitive-font-weight-semibold);
+    --ef-type-weight-label: var(--ef-primitive-font-weight-medium);
+    --ef-type-weight-nav: var(--ef-primitive-font-weight-semibold);
+    --ef-type-tracking-display: var(--ef-primitive-letter-spacing-normal);
+    --ef-type-tracking-label: var(--ef-primitive-letter-spacing-wide);
+    --ef-type-tracking-body: var(--ef-primitive-letter-spacing-normal);
+
+    --ef-layout-measure: var(--ef-primitive-size-measure);
+    --ef-layout-measure-narrow: var(--ef-primitive-size-measure-narrow);
+    --ef-layout-width-narrow: var(--ef-primitive-size-container-narrow);
+    --ef-layout-width-standard: var(--ef-primitive-size-container-standard);
+    --ef-layout-width-wide: var(--ef-primitive-size-container-wide);
+    --ef-layout-width-max: var(--ef-primitive-size-container-max);
+    --ef-layout-gutter: var(--ef-primitive-size-fluid-gutter);
+    --ef-layout-section-space: var(--ef-primitive-size-fluid-section-space);
+    --ef-layout-block-space: var(--ef-primitive-size-fluid-block-space);
+    --ef-layout-grid-gap: var(--ef-primitive-space-6);
+    --ef-layout-stack-space: var(--ef-primitive-space-6);
+    --ef-layout-target-min: var(--ef-primitive-size-target-min);
+    /* Clearance kept below a sticky header for anchors and sticky rails. */
+    --ef-layout-header-offset: 6rem;
+    /* Card and fact minimums decide when grids drop a column (content-driven). */
+    --ef-layout-card-min: 15rem;
+    --ef-layout-fact-min: 11rem;
+
+    --ef-shape-radius: var(--ef-primitive-radius-small);
+    --ef-shape-border-width: var(--ef-primitive-border-width-thin);
+    --ef-shape-border-width-accent: var(--ef-primitive-border-width-accent);
+
+    --ef-effect-shadow-raised: var(--ef-primitive-shadow-raised);
+    /* Marketing state changes are perceptual interpolation (non-spatial).
+       The fallbacks restate Forma's shared perceptual vocabulary for pages
+       that load the marketing bundle without components.css. */
+    --ef-effect-transition-duration: var(--ef-motion-perceptual-duration, 120ms);
+    --ef-effect-transition-easing: var(--ef-motion-perceptual-easing, cubic-bezier(0.2, 0, 0, 1));
+
+    --ef-focus-ring-width: var(--ef-primitive-focus-ring-width);
+    --ef-focus-ring-offset: var(--ef-primitive-focus-ring-offset);
+    --ef-focus-halo-width: var(--ef-primitive-focus-halo-width);
+  }
+}
+
+/* --- source: dist/foundations.css --- */
+@layer echelon.foundations {
+  *, *::before, *::after { box-sizing: border-box; }
+
+  :where(html) {
+    color-scheme: light dark;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+  }
+
+  :where(body) {
+    margin: 0;
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-family: var(--ef-primitive-font-family-sans, system-ui, sans-serif);
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+
+  :where(h1, h2) {
+    color: var(--ef-color-text-heading, #202421);
+    font-family: var(--ef-primitive-font-family-display, Georgia, serif);
+    font-weight: 500;
+    letter-spacing: -0.03em;
+    line-height: 1.02;
+  }
+
+  :where(h3, h4, h5, h6) {
+    color: var(--ef-color-text-heading, #202421);
+    line-height: 1.25;
+  }
+
+  :where(p) {
+    color: var(--ef-color-text-secondary, #686d68);
+    max-inline-size: 72ch;
+  }
+
+  :where(a) {
+    color: var(--ef-color-accent-primary, #905831);
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.18em;
+  }
+
+  :where(button, input, select, textarea) {
+    max-inline-size: 100%;
+    font: inherit;
+  }
+
+  :where(img, picture, video, canvas, svg) {
+    max-inline-size: 100%;
+  }
+
+  :where(img, video, canvas) {
+    block-size: auto;
+  }
+
+  :where(button, .ef-button) {
+    min-block-size: 2.75rem;
+    padding: 0.65rem 1rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: var(--ef-primitive-radius-none, 0);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+    font-weight: 700;
+    /*
+     * Hover and press feedback is perceptual interpolation (MOT-014, MOT-026):
+     * it changes the surface, never the hit target's position or size. The
+     * fallbacks restate the shared vocabulary for pages that load
+     * foundations.css without components.css.
+     */
+    transition:
+      background-color var(--ef-motion-perceptual-duration, 120ms) var(--ef-motion-perceptual-easing, cubic-bezier(0.2, 0, 0, 1)),
+      border-color var(--ef-motion-perceptual-duration, 120ms) var(--ef-motion-perceptual-easing, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  :where(button, .ef-button):where(:not(:disabled)):hover {
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+  }
+
+  /*
+   * Press onset is a direct projection of pointer/key down: it begins
+   * immediately and never delays activation. Release returns through the
+   * perceptual interpolation above.
+   */
+  :where(button, .ef-button):where(:not(:disabled)):active {
+    background: color-mix(in srgb, var(--ef-color-surface-secondary, #e3e0d7) 82%, var(--ef-color-text-primary, #171a18));
+    transition-duration: var(--ef-motion-direct-duration, 0ms);
+  }
+
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
+    min-block-size: 2.75rem;
+    inline-size: 100%;
+    padding: 0.7rem 0.8rem;
+    border: 1px solid var(--ef-color-border-functional, #3a403c);
+    border-radius: var(--ef-primitive-radius-none, 0);
+    background: var(--ef-color-surface-primary, #f2efe7);
+    color: var(--ef-color-text-primary, #171a18);
+  }
+
+  :where(:focus-visible) {
+    outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--ef-color-focus-ring, #171a18);
+  }
+
+  .ef-stack { display: flex; flex-direction: column; gap: var(--ef-stack-gap, var(--ef-primitive-spacing-4, 1rem)); }
+  .ef-cluster { display: flex; flex-wrap: wrap; gap: var(--ef-cluster-gap, var(--ef-primitive-spacing-3, 0.75rem)); align-items: center; }
+  .ef-grid { display: grid; gap: var(--ef-grid-gap, var(--ef-primitive-spacing-4, 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-grid-min, 16rem)), 1fr)); }
+  .ef-section { padding-block: var(--ef-section-space, var(--ef-primitive-spacing-7, 3rem)); }
+  .ef-surface { min-inline-size: 0; padding: var(--ef-surface-space, var(--ef-primitive-spacing-5, 1.5rem)); background: var(--ef-color-surface-secondary, #e3e0d7); color: var(--ef-color-text-on-secondary-surface, #3a403c); border: 1px solid var(--ef-color-border-subtle, #e3e0d7); }
+  .ef-surface :where(h1, h2, h3, h4, h5, h6, p) { color: inherit; }
+
+  :where(h1, h2, h3, h4, h5, h6, p, a, label, legend, td, th) {
+    overflow-wrap: anywhere;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      scroll-behavior: auto !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /*
+     * Forced-colors token projection (FORMA-A11Y-001). Every semantic color
+     * token resolves to a system color, so author colors agree with what the
+     * user agent forces: foreground roles become CanvasText and surfaces
+     * become Canvas, for every theme, brand and skin scope. Without this,
+     * theme text colors survive where engines do not force them (for example
+     * -webkit-text-fill-color, which resolves currentcolor before forcing, and
+     * engines that only emulate the media query), producing light theme text
+     * on a forced Canvas. !important in this early layer outranks later theme
+     * and brand layers: the user's forced-colors choice wins. Selection and
+     * state rules that need Highlight keep their explicit forced-colors rules.
+     */
+    :root, [data-ef-theme], [data-ef-brand], [data-ef-skin] {
+      --ef-color-text-primary: CanvasText !important;
+      --ef-color-text-heading: CanvasText !important;
+      --ef-color-text-secondary: CanvasText !important;
+      --ef-color-text-muted: CanvasText !important;
+      --ef-color-text-on-secondary-surface: CanvasText !important;
+      --ef-color-text-inverse: CanvasText !important;
+      --ef-color-accent-primary: CanvasText !important;
+      --ef-color-accent-secondary: CanvasText !important;
+      --ef-color-accent-hover: CanvasText !important;
+      --ef-color-border-functional: CanvasText !important;
+      --ef-color-border-subtle: CanvasText !important;
+      --ef-color-status-danger: CanvasText !important;
+      --ef-color-status-warning: CanvasText !important;
+      --ef-color-status-success: CanvasText !important;
+      --ef-color-status-info: CanvasText !important;
+      --ef-color-control-active: CanvasText !important;
+      --ef-color-control-thumb: Canvas !important;
+      --ef-color-control-track: CanvasText !important;
+      --ef-color-focus-ring: CanvasText !important;
+      --ef-color-focus-gap: Canvas !important;
+      --ef-color-surface-primary: Canvas !important;
+      --ef-color-surface-secondary: Canvas !important;
+      --ef-color-surface-elevated: Canvas !important;
+      --ef-color-surface-inverse: Canvas !important;
+      --ef-color-surface-inverse-secondary: Canvas !important;
+      color: CanvasText;
+      background-color: Canvas;
+    }
+
+    :where(button, .ef-button, input, textarea, select, .ef-surface) {
+      border-color: CanvasText;
+    }
+  }
+
+  /* Visual Engineering composition primitives -------------------------- */
+  .ef-breakout { inline-size: min(100%, var(--ef-breakout-max, 90rem)); max-inline-size: none; }
+  .ef-rail { --ef-rail-measure: minmax(12rem, 18rem); --ef-rail-content-min: 50%; --ef-rail-space: var(--ef-primitive-spacing-5, 1.5rem); display: grid; grid-template-columns: var(--ef-rail-measure) minmax(var(--ef-rail-content-min), 1fr); gap: var(--ef-rail-space); align-items: start; }
+  .ef-rail[data-side="end"] { grid-template-columns: minmax(var(--ef-rail-content-min), 1fr) var(--ef-rail-measure); }
+  .ef-rail > * { min-inline-size: 0; }
+  .ef-responsive-grid { --ef-responsive-grid-min: 16rem; --ef-responsive-grid-space: var(--ef-primitive-spacing-4, 1rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-responsive-grid-min)), 1fr)); gap: var(--ef-responsive-grid-space); }
+  .ef-responsive-grid > * { min-inline-size: 0; }
+  .ef-span-2 { grid-column: span 2; }
+  .ef-span-full { grid-column: 1 / -1; }
+  .ef-bounded-overflow { max-inline-size: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
+  .ef-priority-stack { --ef-priority-min: 18rem; --ef-priority-space: var(--ef-primitive-spacing-4, 1rem); display: flex; flex-wrap: wrap; gap: var(--ef-priority-space); align-items: start; }
+  .ef-priority-stack > * { flex: 1 1 var(--ef-priority-min); min-inline-size: min(100%, var(--ef-priority-min)); }
+  .ef-priority-stack > [data-priority="primary"] { flex-grow: 2; }
+  .ef-focus-stage { --ef-focus-stage-support: minmax(14rem, 20rem); --ef-focus-stage-space: var(--ef-primitive-spacing-5, 1.5rem); display: grid; grid-template-columns: minmax(0, 1fr) var(--ef-focus-stage-support); gap: var(--ef-focus-stage-space); align-items: start; }
+  .ef-focus-stage__primary, .ef-focus-stage__support { min-inline-size: 0; }
+  .ef-mosaic { --ef-mosaic-space: var(--ef-primitive-spacing-4, 1rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ef-mosaic-space); }
+  .ef-mosaic > * { min-inline-size: 0; }
+  .ef-mosaic > [data-span="2"] { grid-column: span 2; }
+  .ef-mosaic > [data-span="full"] { grid-column: 1 / -1; }
+  .ef-dense-ledger { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
+  .ef-dense-ledger :is(th, td) { padding: var(--ef-ledger-cell-space, var(--ef-primitive-spacing-2, 0.5rem)); border-block-end: 1px solid var(--ef-color-border-subtle, #e3e0d7); text-align: start; vertical-align: top; }
+  [data-density="relaxed"] { --ef-density-space: var(--ef-primitive-spacing-5, 1.5rem); }
+  [data-density="standard"] { --ef-density-space: var(--ef-primitive-spacing-4, 1rem); }
+  [data-density="compact"], [data-density="analytical"] { --ef-density-space: var(--ef-primitive-spacing-2, 0.5rem); }
+  :where(.ef-stack, .ef-grid, .ef-responsive-grid, .ef-priority-stack)[data-density] { gap: var(--ef-density-space); }
+  @media (max-width: 48rem) { .ef-rail, .ef-rail[data-side="end"], .ef-focus-stage { grid-template-columns: minmax(0, 1fr); } .ef-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ef-span-2 { grid-column: 1 / -1; } }
+  @media (max-width: 30rem) { .ef-mosaic { grid-template-columns: minmax(0, 1fr); } .ef-mosaic > [data-span="2"], .ef-mosaic > [data-span="full"] { grid-column: auto; } .ef-responsive-grid { --ef-responsive-grid-min: 100%; } .ef-priority-stack { --ef-priority-min: 100%; } }
+}
+
+/* --- source: src/marketing/foundations.css --- */
+/*
+  Forma marketing foundations.
+
+  Everything here is scoped to the MarketingShell root (.ef-site) so that
+  loading the marketing layer never restyles an application that also uses
+  Forma. Values come only from role tokens (src/marketing/roles.css) and core
+  semantic tokens; no brand values live in this file.
+
+  Surface tones: every region that changes background declares a tone with
+  data-ef-tone. A tone sets a small, contrast-safe set of context variables
+  (--ef-tone-*) that components read, so text, links, labels, and rules stay
+  legible on every surface without per-component color overrides.
+*/
+@layer echelon.marketing.foundations {
+  :where(:root, [data-ef-theme], [data-ef-brand]),
+  .ef-site,
+  [data-ef-tone="page"] {
+    --ef-tone-background: var(--ef-color-surface-primary);
+    --ef-tone-text: var(--ef-color-text-primary);
+    --ef-tone-heading: var(--ef-color-text-heading);
+    --ef-tone-muted: var(--ef-color-text-muted);
+    --ef-tone-label: var(--ef-color-accent-secondary);
+    --ef-tone-link: var(--ef-color-accent-primary);
+    --ef-tone-link-hover: var(--ef-color-accent-hover);
+    --ef-tone-rule: var(--ef-color-border-subtle);
+    --ef-tone-rule-strong: var(--ef-color-border-functional);
+    --ef-tone-action-background: var(--ef-color-surface-inverse);
+    --ef-tone-action-text: var(--ef-color-text-inverse);
+    --ef-tone-action-hover: var(--ef-color-surface-inverse-secondary);
+    --ef-tone-hover: var(--ef-color-surface-secondary);
+  }
+
+  /* Accent colors are not validated against the secondary surface, so links
+     and labels on it fall back to text roles that are. Cards default to
+     this tone. */
+  [data-ef-tone="surface"],
+  :where(.ef-card:not([data-ef-tone])) {
+    --ef-tone-background: var(--ef-color-surface-secondary);
+    --ef-tone-text: var(--ef-color-text-primary);
+    --ef-tone-heading: var(--ef-color-text-heading);
+    --ef-tone-muted: var(--ef-color-text-on-secondary-surface);
+    --ef-tone-label: var(--ef-color-text-on-secondary-surface);
+    --ef-tone-link: var(--ef-color-text-primary);
+    --ef-tone-link-hover: var(--ef-color-text-primary);
+    --ef-tone-rule: var(--ef-color-border-subtle);
+    --ef-tone-rule-strong: var(--ef-color-border-functional);
+    --ef-tone-hover: var(--ef-color-surface-primary);
+  }
+
+  [data-ef-tone="elevated"] {
+    --ef-tone-background: var(--ef-color-surface-elevated);
+    --ef-tone-text: var(--ef-color-text-primary);
+    --ef-tone-heading: var(--ef-color-text-heading);
+    --ef-tone-muted: var(--ef-color-text-primary);
+    --ef-tone-label: var(--ef-color-text-primary);
+    --ef-tone-link: var(--ef-color-text-primary);
+    --ef-tone-link-hover: var(--ef-color-text-primary);
+    --ef-tone-rule: var(--ef-color-border-subtle);
+    --ef-tone-rule-strong: var(--ef-color-border-functional);
+    --ef-tone-hover: var(--ef-color-surface-primary);
+  }
+
+  [data-ef-tone="inverse"] {
+    --ef-tone-background: var(--ef-color-surface-inverse);
+    --ef-tone-text: var(--ef-color-text-inverse);
+    --ef-tone-heading: var(--ef-color-text-inverse);
+    --ef-tone-muted: var(--ef-color-text-inverse);
+    --ef-tone-label: var(--ef-color-text-inverse);
+    --ef-tone-link: var(--ef-color-text-inverse);
+    --ef-tone-link-hover: var(--ef-color-text-inverse);
+    --ef-tone-rule: var(--ef-color-surface-inverse-secondary);
+    --ef-tone-rule-strong: var(--ef-color-text-inverse);
+    --ef-tone-action-background: var(--ef-color-surface-primary);
+    --ef-tone-action-text: var(--ef-color-text-primary);
+    --ef-tone-action-hover: var(--ef-color-surface-secondary);
+    --ef-tone-hover: var(--ef-color-surface-inverse-secondary);
+  }
+
+  [data-ef-tone],
+  :where(.ef-card:not([data-ef-tone])) {
+    background: var(--ef-tone-background);
+    color: var(--ef-tone-text);
+  }
+
+  :where(html):has(> body.ef-site) {
+    background: var(--ef-color-surface-primary);
+  }
+
+  .ef-site {
+    /* Stacking context keeps an optional theme backdrop behind content even
+       when the shell is not the body element. */
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    background: var(--ef-color-surface-primary);
+    color: var(--ef-tone-text);
+    font-family: var(--ef-type-family-body);
+    font-size: var(--ef-type-size-body);
+    font-weight: var(--ef-type-weight-body);
+    letter-spacing: var(--ef-type-tracking-body);
+    line-height: var(--ef-type-leading-body);
+    text-rendering: optimizeLegibility;
+  }
+
+  /* The shell fills the viewport only when it is the document body. */
+  body.ef-site {
+    min-block-size: 100vh;
+    min-block-size: 100dvh;
+  }
+
+  /* Optional brand backdrop supplied by a theme; absent means none. */
+  .ef-site::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background-image: var(--ef-site-backdrop, none);
+    background-size: var(--ef-site-backdrop-size, auto);
+    opacity: var(--ef-site-backdrop-opacity, 1);
+  }
+
+  .ef-site :where(h1, h2, h3, h4, h5, h6) {
+    margin-block: 0;
+    color: var(--ef-tone-heading);
+    text-wrap: balance;
+  }
+
+  .ef-site :where(h1, h2) {
+    font-family: var(--ef-type-family-display);
+    font-weight: var(--ef-type-weight-heading);
+    letter-spacing: var(--ef-type-tracking-display);
+    line-height: var(--ef-type-leading-heading);
+  }
+
+  .ef-site :where(h1) { font-size: var(--ef-type-size-h1); max-inline-size: 14ch; }
+  .ef-site :where(h2) { font-size: var(--ef-type-size-h2); max-inline-size: 18ch; }
+  .ef-site :where(h3) { font-size: var(--ef-type-size-h3); line-height: var(--ef-type-leading-snug); }
+  .ef-site :where(h4, h5, h6) { font-size: var(--ef-type-size-h4); line-height: var(--ef-type-leading-snug); }
+
+  .ef-site :where(p) {
+    margin-block: 0 var(--ef-space-4);
+    max-inline-size: var(--ef-layout-measure);
+    color: var(--ef-tone-muted);
+  }
+
+  .ef-site :where(p:last-child) { margin-block-end: 0; }
+
+  /* Links stay underlined everywhere except where a component gives them
+     another non-color cue (navigation, buttons, cards). */
+  .ef-site :where(a) {
+    color: var(--ef-tone-link);
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--ef-shape-border-width);
+    text-underline-offset: 0.2em;
+  }
+
+  .ef-site :where(a:hover) {
+    color: var(--ef-tone-link-hover);
+    text-decoration-thickness: calc(var(--ef-shape-border-width) * 2);
+  }
+
+  .ef-site :where(ul, ol) { margin-block: 0 var(--ef-space-4); padding-inline-start: var(--ef-space-5); }
+  .ef-site :where(li + li) { margin-block-start: 0.45em; }
+  /* Only prose lists take the reading measure; classed lists are structure. */
+  .ef-site :where(ul:not([class]), ol:not([class])) > li { max-inline-size: var(--ef-layout-measure); }
+  .ef-site :where(strong, b) { font-weight: var(--ef-type-weight-strong); }
+  .ef-site :where(img, svg, video, canvas, picture) { max-inline-size: 100%; block-size: auto; }
+  .ef-site :where(code, kbd, samp, pre) { font-family: var(--ef-type-family-mono); font-size: 0.9em; }
+
+  .ef-site :where(:not(pre) > code) {
+    padding: 0.1em 0.3em;
+    background: var(--ef-tone-hover);
+    color: var(--ef-tone-text);
+    overflow-wrap: anywhere;
+  }
+
+  .ef-site :where(hr) {
+    margin-block: var(--ef-layout-section-space);
+    border: 0;
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+  }
+
+  .ef-site :where(blockquote) {
+    margin: var(--ef-layout-block-space) 0;
+    padding-inline-start: var(--ef-layout-block-space);
+    border-inline-start: var(--ef-shape-border-width-accent) solid var(--ef-color-accent-primary);
+    font-family: var(--ef-type-family-display);
+    font-size: var(--ef-type-size-lead);
+    line-height: var(--ef-type-leading-lead);
+  }
+
+  .ef-site :where(blockquote p) { color: var(--ef-tone-text); }
+
+  /* One focus treatment for the whole shell: a gap-colored outline inside a
+     ring-colored halo remains visible on every tone. */
+  .ef-site :where(:focus-visible) {
+    outline: var(--ef-focus-ring-width) solid var(--ef-color-focus-gap);
+    outline-offset: var(--ef-focus-ring-offset);
+    box-shadow: 0 0 0 var(--ef-focus-halo-width) var(--ef-color-focus-ring);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where(html):has(.ef-site) { scroll-behavior: smooth; }
+  }
+
+  /* Anchored targets must land below a sticky header (see layouts.css). */
+  @media (min-width: 40rem) and (min-height: 36rem) {
+    :where(html):has(.ef-site-header) { scroll-padding-block-start: var(--ef-layout-header-offset); }
+  }
+}
+
+/* --- source: src/marketing/components.css --- */
+/*
+  Forma marketing components.
+
+  Small, composable presentation primitives for public/marketing pages. Each
+  component reads role tokens and the surrounding surface tone (--ef-tone-*);
+  none embeds a brand value, a product name, or page-specific placement.
+  Components own their intrinsic layout only. Where they sit on a page is
+  owned by layouts.css or the consuming page composition.
+
+  Responsive behavior is content-driven: wrapping flex rows and auto-fit grids
+  with minimum sizes. The two container queries below exist because a row's
+  column structure cannot be expressed as a minimum item size.
+*/
+@layer echelon.marketing.components {
+  /* Skip link --------------------------------------------------------- */
+  .ef-skip-link {
+    position: fixed;
+    inset-block-start: var(--ef-space-2);
+    inset-inline-start: var(--ef-space-2);
+    z-index: 100;
+    display: inline-flex;
+    align-items: center;
+    min-block-size: var(--ef-layout-target-min);
+    padding-inline: var(--ef-space-4);
+    background: var(--ef-color-surface-primary);
+    color: var(--ef-color-text-primary);
+    font-weight: var(--ef-type-weight-strong);
+    transform: translateY(-200%);
+  }
+
+  .ef-skip-link:focus,
+  .ef-skip-link:focus-visible {
+    transform: none;
+  }
+
+  /* Site header and navigation ---------------------------------------- */
+  .ef-site-header {
+    container: ef-site-header / inline-size;
+    position: relative;
+    z-index: 20;
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+    background: color-mix(in srgb, var(--ef-color-surface-primary) 94%, transparent);
+    -webkit-backdrop-filter: blur(14px);
+    backdrop-filter: blur(14px);
+  }
+
+  .ef-site-header__inner {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ef-space-2) var(--ef-space-7);
+    inline-size: min(100%, var(--ef-layout-width-max));
+    margin-inline: auto;
+    padding: var(--ef-space-3) var(--ef-layout-gutter);
+  }
+
+  .ef-site-header__identity {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ef-space-1) var(--ef-space-3);
+    min-inline-size: 0;
+  }
+
+  .ef-site-header__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ef-space-3);
+    min-block-size: var(--ef-layout-target-min);
+    color: var(--ef-tone-text);
+    font-weight: var(--ef-type-weight-strong);
+    text-decoration: none;
+  }
+
+  .ef-site-header__brand:hover { color: var(--ef-tone-text); text-decoration: underline; }
+
+  /* The brand name stays visible at every width; it wraps rather than hides,
+     because the mark alone is decorative (aria-hidden). */
+  .ef-site-header__name { min-inline-size: 0; overflow-wrap: anywhere; }
+
+  .ef-site-header__mark {
+    display: grid;
+    place-items: center;
+    flex: none;
+    inline-size: 2.35rem;
+    aspect-ratio: 1;
+    border-radius: var(--ef-shape-radius);
+    background: var(--ef-color-surface-inverse);
+    color: var(--ef-color-text-inverse);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+  }
+
+  .ef-site-header__tagline {
+    margin: 0;
+    max-inline-size: 24ch;
+    color: var(--ef-tone-muted);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+    line-height: var(--ef-type-leading-snug);
+  }
+
+  /* The tagline repeats identity context; below this width it would push the
+     navigation onto a third line, so it yields. The brand name never hides. */
+  @container ef-site-header (inline-size < 56rem) {
+    .ef-site-header__tagline { display: none; }
+  }
+
+  .ef-site-nav__list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--ef-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-site-nav__list > li { margin: 0; }
+
+  .ef-site-nav__link {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: var(--ef-layout-target-min);
+    padding-inline: var(--ef-space-3);
+    border-block-end: calc(var(--ef-shape-border-width) * 2) solid transparent;
+    color: var(--ef-tone-text);
+    font-size: var(--ef-type-size-small);
+    font-weight: var(--ef-type-weight-nav);
+    text-decoration: none;
+  }
+
+  .ef-site-nav__link:hover {
+    color: var(--ef-tone-text);
+    border-block-end-color: var(--ef-color-accent-primary);
+  }
+
+  /* Current location uses a persistent rule plus aria-current, not hue alone. */
+  .ef-site-nav__link[aria-current="page"],
+  .ef-site-nav__link[aria-current="true"] {
+    border-block-end-color: var(--ef-tone-rule-strong);
+  }
+
+  .ef-site-nav__link[data-ef-variant="action"] {
+    margin-inline-start: var(--ef-space-2);
+    border-radius: var(--ef-shape-radius);
+    background: var(--ef-tone-action-background);
+    color: var(--ef-tone-action-text);
+  }
+
+  .ef-site-nav__link[data-ef-variant="action"]:hover {
+    background: var(--ef-tone-action-hover);
+    color: var(--ef-tone-action-text);
+    border-block-end-color: var(--ef-tone-action-text);
+  }
+
+  /* Text roles --------------------------------------------------------- */
+  .ef-eyebrow {
+    margin-block: 0 var(--ef-space-3);
+    color: var(--ef-tone-label);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+    font-weight: var(--ef-type-weight-label);
+    letter-spacing: var(--ef-type-tracking-label);
+    line-height: var(--ef-type-leading-snug);
+    text-transform: uppercase;
+  }
+
+  .ef-lead {
+    max-inline-size: var(--ef-layout-measure-narrow);
+    color: var(--ef-tone-text);
+    font-size: var(--ef-type-size-lead);
+    line-height: var(--ef-type-leading-lead);
+  }
+
+  .ef-statement {
+    margin: 0;
+    padding: var(--ef-space-5) 0 0;
+    border-inline-start: 0;
+    border-block-start: var(--ef-shape-border-width-accent) solid var(--ef-color-accent-primary);
+    color: var(--ef-tone-text);
+    font-family: var(--ef-type-family-display);
+    font-size: var(--ef-type-size-statement);
+    line-height: var(--ef-type-leading-snug);
+  }
+
+  .ef-statement :where(p) { color: inherit; max-inline-size: none; }
+
+  /* Actions and buttons ------------------------------------------------ */
+  .ef-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ef-space-3);
+  }
+
+  .ef-site .ef-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ef-space-3);
+    min-block-size: calc(var(--ef-layout-target-min) + var(--ef-space-2));
+    padding: var(--ef-space-3) var(--ef-space-5);
+    border: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+    border-radius: var(--ef-shape-radius);
+    background: transparent;
+    color: var(--ef-tone-text);
+    font: inherit;
+    font-size: var(--ef-type-size-small);
+    font-weight: var(--ef-type-weight-strong);
+    line-height: var(--ef-type-leading-snug);
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    /* Hover and press are perceptual emphasis on the surface only: the hit
+       target never moves under the pointer (MOT-014). */
+    transition:
+      background-color var(--ef-effect-transition-duration) var(--ef-effect-transition-easing),
+      color var(--ef-effect-transition-duration) var(--ef-effect-transition-easing);
+  }
+
+  .ef-site .ef-button:hover { background: var(--ef-tone-hover); color: var(--ef-tone-text); }
+
+  .ef-site .ef-button[data-ef-variant="primary"] {
+    border-color: var(--ef-tone-action-background);
+    background: var(--ef-tone-action-background);
+    color: var(--ef-tone-action-text);
+  }
+
+  .ef-site .ef-button[data-ef-variant="primary"]:hover {
+    background: var(--ef-tone-action-hover);
+    color: var(--ef-tone-action-text);
+  }
+
+  .ef-site .ef-button:is(:disabled, [aria-disabled="true"]) {
+    border-style: dashed;
+    background: var(--ef-color-surface-secondary);
+    color: var(--ef-color-text-primary);
+    cursor: not-allowed;
+  }
+
+  /* Badges ------------------------------------------------------------- */
+  .ef-badge-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ef-space-2);
+    margin: var(--ef-space-4) 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-badge-list > li { margin: 0; }
+
+  .ef-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ef-space-1);
+    padding: var(--ef-space-1) var(--ef-space-2);
+    border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    border-radius: var(--ef-shape-radius);
+    color: var(--ef-tone-text);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+    line-height: var(--ef-type-leading-snug);
+    text-decoration: none;
+  }
+
+  a.ef-badge { min-block-size: 1.5rem; }
+  a.ef-badge:hover { border-color: var(--ef-tone-rule-strong); color: var(--ef-tone-text); }
+
+  /* Status is carried by the badge text; the colored edge is redundant. */
+  .ef-badge[data-ef-status] { border-inline-start-width: var(--ef-shape-border-width-accent); }
+  .ef-badge[data-ef-status="success"] { border-inline-start-color: var(--ef-color-status-success); }
+  .ef-badge[data-ef-status="warning"] { border-inline-start-color: var(--ef-color-status-warning); }
+  .ef-badge[data-ef-status="danger"] { border-inline-start-color: var(--ef-color-status-danger); }
+  .ef-badge[data-ef-status="info"] { border-inline-start-color: var(--ef-color-status-info); }
+
+  /* Cards and card grids ----------------------------------------------- */
+  .ef-card-grid {
+    --ef-card-columns: 12;
+    --ef-card-rule: var(--ef-tone-rule);
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, max(var(--ef-layout-card-min), 100% / var(--ef-card-columns))), 1fr)
+    );
+    margin: 0;
+    padding: 0;
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-card-rule);
+    border-inline-start: var(--ef-shape-border-width) solid var(--ef-card-rule);
+    list-style: none;
+  }
+
+  /* data-ef-columns caps columns; the minimum card size decides when to drop. */
+  .ef-card-grid[data-ef-columns="2"] { --ef-card-columns: 2; }
+  .ef-card-grid[data-ef-columns="3"] { --ef-card-columns: 3; }
+  .ef-card-grid[data-ef-columns="4"] { --ef-card-columns: 4; }
+  .ef-card-grid[data-ef-columns="5"] { --ef-card-columns: 5; --ef-layout-card-min: 12rem; }
+
+  .ef-card-grid + .ef-card-grid { border-block-start: 0; }
+  .ef-card-grid > li { margin: 0; }
+
+  .ef-card {
+    position: relative;
+    min-inline-size: 0;
+    padding: var(--ef-layout-block-space);
+    border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    border-radius: var(--ef-shape-radius);
+  }
+
+  /* Inside a grid, cards share hairline rules instead of doubling borders. */
+  .ef-card-grid > .ef-card,
+  .ef-card-grid > li > .ef-card {
+    block-size: 100%;
+    border-width: 0 var(--ef-shape-border-width) var(--ef-shape-border-width) 0;
+    border-color: var(--ef-card-rule);
+    border-radius: 0;
+  }
+
+  .ef-card[data-ef-tone="elevated"] { box-shadow: var(--ef-effect-shadow-raised); }
+
+  /* Card titles size by role, not heading level, so the document outline can
+     use whatever level the page needs (VE LAW-COMP-004 hierarchy alignment). */
+  .ef-card__title {
+    max-inline-size: 24ch;
+    margin-block-end: var(--ef-space-3);
+    font-family: var(--ef-type-family-body);
+    font-size: var(--ef-type-size-h3);
+    font-weight: var(--ef-type-weight-strong);
+    letter-spacing: var(--ef-type-tracking-body);
+    line-height: var(--ef-type-leading-snug);
+  }
+
+  /* A card link stretches over the card so the whole card is a target while
+     the accessible name stays the title, not the card's full text. */
+  .ef-card__link {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .ef-card__link::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  .ef-card:has(.ef-card__link) { transition: background-color var(--ef-effect-transition-duration) var(--ef-effect-transition-easing); }
+  .ef-card:has(.ef-card__link:hover) { background: var(--ef-tone-hover); }
+  .ef-card__link:hover { color: inherit; text-decoration: underline; }
+  .ef-card__link:focus-visible { box-shadow: none; outline: none; }
+
+  .ef-card:has(.ef-card__link:focus-visible) {
+    outline: var(--ef-focus-ring-width) solid var(--ef-color-focus-gap);
+    outline-offset: calc(var(--ef-focus-ring-offset) * -1 - var(--ef-focus-ring-width));
+    box-shadow: inset 0 0 0 var(--ef-focus-halo-width) var(--ef-color-focus-ring);
+  }
+
+  .ef-card__footer {
+    margin-block-start: var(--ef-space-6);
+    padding-block-start: var(--ef-space-4);
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+    color: var(--ef-tone-text);
+    font-size: var(--ef-type-size-small);
+    font-weight: var(--ef-type-weight-strong);
+  }
+
+  /* Facts: short claims with supporting detail, as a description list. */
+  .ef-facts {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-layout-fact-min)), 1fr));
+    margin: var(--ef-layout-block-space) 0 0;
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    border-inline-start: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+  }
+
+  .ef-facts__item {
+    min-inline-size: 0;
+    padding: var(--ef-space-4);
+    border-inline-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+  }
+
+  .ef-facts__item > dt { color: var(--ef-tone-text); font-weight: var(--ef-type-weight-strong); }
+
+  .ef-facts__item > dd {
+    margin: var(--ef-space-1) 0 0;
+    color: var(--ef-tone-muted);
+    font-size: var(--ef-type-size-small);
+  }
+
+  /* Section heading ---------------------------------------------------- */
+  .ef-section-heading {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--ef-space-6) var(--ef-layout-grid-gap);
+    margin-block-end: calc(var(--ef-layout-block-space) * 1.25);
+    padding-block-end: var(--ef-space-6);
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+  }
+
+  .ef-section-heading__text { flex: 999 1 32rem; min-inline-size: min(100%, 20rem); }
+  .ef-section-heading__text > :where(h2) { margin-block-end: var(--ef-space-4); }
+  .ef-section-heading__aside { flex: 1 1 14rem; max-inline-size: 28rem; }
+
+  .ef-section-heading__note {
+    color: var(--ef-tone-muted);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+  }
+
+  /* Index: an ordered set of linked entries (research areas, products). */
+  .ef-index {
+    container: ef-index / inline-size;
+    display: grid;
+    grid-template-columns: 5rem minmax(0, 0.65fr) minmax(0, 1fr) minmax(0, auto);
+    column-gap: var(--ef-layout-block-space);
+    margin: 0;
+    padding: 0;
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+    list-style: none;
+  }
+
+  /* Rows share the list's columns (subgrid) so entries align down the page. */
+  .ef-index__item {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    row-gap: var(--ef-space-2);
+    align-items: start;
+    margin: 0;
+    padding-block: var(--ef-space-7);
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+  }
+
+  .ef-index__marker {
+    margin: 0;
+    color: var(--ef-tone-text);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+  }
+
+  .ef-index__title {
+    margin-block-start: var(--ef-space-1);
+    font-family: var(--ef-type-family-display);
+    font-size: var(--ef-type-size-statement);
+    font-weight: var(--ef-type-weight-heading);
+  }
+
+  .ef-index__heading > .ef-eyebrow { margin: 0; }
+  .ef-index__summary { margin: 0; }
+
+  .ef-index__link {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: 1.5rem;
+    font-size: var(--ef-type-size-small);
+    font-weight: var(--ef-type-weight-strong);
+    white-space: nowrap;
+  }
+
+  /* Four disparate columns cannot degrade by a minimum item size, so the
+     row regroups by container width: marker + content, then single column. */
+  @container ef-index (inline-size < 56rem) {
+    .ef-index__item { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--ef-space-4); }
+    .ef-index__item > :not(.ef-index__marker) { grid-column: 2; }
+  }
+
+  @container ef-index (inline-size < 28rem) {
+    .ef-index__item { grid-template-columns: minmax(0, 1fr); }
+    .ef-index__item > :not(.ef-index__marker) { grid-column: 1; }
+  }
+
+  /* Steps: a numbered method or process. */
+  .ef-steps {
+    counter-reset: ef-step;
+    margin: 0;
+    padding: 0;
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    list-style: none;
+  }
+
+  .ef-steps > li {
+    counter-increment: ef-step;
+    display: flex;
+    gap: var(--ef-space-4);
+    margin: 0;
+    padding-block: var(--ef-space-4);
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    color: var(--ef-tone-text);
+  }
+
+  .ef-steps > li::before {
+    content: counter(ef-step, decimal-leading-zero);
+    flex: none;
+    min-inline-size: 2ch;
+    font-family: var(--ef-type-family-mono);
+    font-weight: var(--ef-type-weight-strong);
+  }
+
+  /* Call to action ----------------------------------------------------- */
+  .ef-cta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--ef-space-6) var(--ef-layout-grid-gap);
+    padding-block-start: calc(var(--ef-layout-block-space) * 1.25);
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+  }
+
+  .ef-cta__text { flex: 999 1 32rem; min-inline-size: min(100%, 20rem); }
+  .ef-cta__text > :where(h2) { margin-block-end: var(--ef-space-4); }
+  .ef-cta > .ef-actions { flex: 1 1 auto; justify-content: flex-start; }
+
+  .ef-cta[data-ef-tone]:not([data-ef-tone="page"]) {
+    padding: calc(var(--ef-layout-block-space) * 2);
+    border-block-start: 0;
+  }
+
+  /* Prose: long-form content inside the reading measure. */
+  .ef-prose {
+    --ef-type-size-h2: var(--ef-type-size-statement);
+    max-inline-size: var(--ef-layout-measure);
+  }
+
+  .ef-prose > :where(h1) { margin-block-end: var(--ef-space-6); max-inline-size: none; }
+  .ef-prose > :where(h2) { margin-block: var(--ef-space-8) var(--ef-space-5); max-inline-size: none; }
+  .ef-prose > :where(h3) { margin-block: var(--ef-space-7) var(--ef-space-3); }
+  .ef-prose > :where(h2, h3):first-child { margin-block-start: 0; }
+  .ef-prose :where(p, li) { color: var(--ef-tone-text); }
+  .ef-prose > :where(figure, pre, .ef-code) { margin-block: var(--ef-layout-block-space); }
+
+  /* Callout: emphasized supporting material inside prose (FORMA-CONTENT-001).
+     A visible text label names the kind; the rule pattern repeats it as a
+     second, non-color cue. Presentation only: no state and no runtime. */
+  .ef-callout {
+    --ef-callout-rule: var(--ef-tone-rule-strong);
+    margin: var(--ef-layout-block-space) 0;
+    padding: var(--ef-space-4) var(--ef-space-5);
+    max-inline-size: var(--ef-layout-measure);
+    border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    border-inline-start: var(--ef-shape-border-width-accent) solid var(--ef-callout-rule);
+    color: var(--ef-tone-text);
+  }
+
+  .ef-callout > :first-child { margin-block-start: 0; }
+  .ef-callout > :last-child { margin-block-end: 0; }
+  .ef-callout :where(p, li) { color: var(--ef-tone-text); max-inline-size: none; }
+
+  .ef-callout__label {
+    margin-block: 0 var(--ef-space-2);
+    color: var(--ef-tone-label);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+    font-weight: var(--ef-type-weight-strong);
+    letter-spacing: var(--ef-type-tracking-label);
+    text-transform: uppercase;
+  }
+
+  /* Quoted evidence reads as body text; the callout already marks it. */
+  .ef-callout :where(blockquote) {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  .ef-callout :where(figcaption) {
+    margin-block-start: var(--ef-space-3);
+    color: var(--ef-tone-muted);
+    font-size: var(--ef-type-size-small);
+  }
+
+  /* Caution: a heavy block-start rule and a full-strength frame. */
+  .ef-callout[data-ef-callout="caution"] {
+    --ef-callout-rule: var(--ef-color-status-warning);
+    border-color: var(--ef-tone-rule-strong);
+    border-block-start-width: var(--ef-shape-border-width-accent);
+    border-inline-start-color: var(--ef-callout-rule);
+  }
+
+  /* Evidence: a dashed frame marks quoted or cited source material. */
+  .ef-callout[data-ef-callout="evidence"] {
+    --ef-callout-rule: var(--ef-color-status-info);
+    border-style: dashed;
+    border-inline-start-style: solid;
+  }
+
+  /* Decision: a double rule marks a settled outcome. */
+  .ef-callout[data-ef-callout="decision"] {
+    --ef-callout-rule: var(--ef-color-accent-primary);
+    border-inline-start-style: double;
+    border-inline-start-width: calc(var(--ef-shape-border-width-accent) * 2);
+  }
+
+  /* Code: technical samples in a bounded, keyboard-scrollable region. */
+  .ef-code {
+    margin: 0;
+    max-inline-size: 100%;
+    overflow: auto;
+    padding: var(--ef-layout-block-space);
+    border-radius: var(--ef-shape-radius);
+    background: var(--ef-color-surface-inverse);
+    color: var(--ef-color-text-inverse);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-small);
+    line-height: var(--ef-type-leading-lead);
+    tab-size: 2;
+  }
+
+  .ef-code :where(code) { padding: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; }
+
+  .ef-code-figure { margin: 0; }
+
+  .ef-code-figure > figcaption {
+    margin-block-end: var(--ef-space-2);
+    color: var(--ef-tone-muted);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+  }
+
+  /* Site footer -------------------------------------------------------- */
+  .ef-site-footer {
+    margin-block-start: auto;
+  }
+
+  .ef-site-footer__inner {
+    inline-size: min(100%, var(--ef-layout-width-max));
+    margin-inline: auto;
+    padding: calc(var(--ef-layout-block-space) * 2) var(--ef-layout-gutter);
+  }
+
+  .ef-site-footer__main {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: var(--ef-layout-grid-gap);
+  }
+
+  .ef-site-footer__main > * { flex: 1 1 18rem; }
+  .ef-site-footer__main > .ef-actions { flex-grow: 0; }
+
+  .ef-site-footer__nav ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ef-space-1) var(--ef-space-5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-site-footer__nav li { margin: 0; }
+  .ef-site-footer__nav a { display: inline-flex; align-items: center; min-block-size: 1.5rem; }
+
+  .ef-site-footer__note {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: var(--ef-space-2) var(--ef-space-7);
+    max-inline-size: none;
+    margin: calc(var(--ef-layout-block-space) * 1.5) 0 0;
+    padding-block-start: var(--ef-space-4);
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    color: var(--ef-tone-muted);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+  }
+
+  /* Accessibility and output modes ------------------------------------ */
+  @media (prefers-reduced-motion: reduce) {
+    .ef-site :where(*, *::before, *::after) {
+      scroll-behavior: auto !important;
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ef-site-header__mark,
+    .ef-site [data-ef-tone]:not([data-ef-tone="page"]),
+    .ef-code { border: 1px solid CanvasText; }
+    .ef-site .ef-button,
+    .ef-badge,
+    .ef-site-nav__link[data-ef-variant="action"] { border: 1px solid ButtonText; }
+    .ef-site-nav__link[aria-current] { border-block-end-color: Highlight; }
+    .ef-statement { border-block-start-color: CanvasText; }
+    .ef-callout { border-color: CanvasText; }
+  }
+
+  @media print {
+    .ef-site::before,
+    .ef-skip-link,
+    .ef-site-nav,
+    .ef-site-footer .ef-actions { display: none; }
+    .ef-site-header { position: static; backdrop-filter: none; background: none; }
+    .ef-site [data-ef-tone] { background: none; color: CanvasText; }
+    .ef-site :where(h1, h2, h3, h4, p, li, dt, dd, a) { color: CanvasText; }
+    .ef-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
+    .ef-card, .ef-index__item, .ef-code, .ef-callout { break-inside: avoid; }
+    .ef-callout { border-color: CanvasText; }
+  }
+}
+
+/* --- source: src/marketing/layouts.css --- */
+/*
+  Forma marketing layouts.
+
+  Page-level structure for public/marketing sites. The MarketingShell
+  (.ef-site) owns the frame: skip link, header, main, footer, and common
+  behavior. Page layouts (Marketing, Product, Documentation) are compositions
+  of the same components inside that frame; only the documentation layout
+  needs structure of its own.
+
+  Breakpoints, and why each exists:
+  - Sticky header needs min-width 40rem and min-height 36rem. A sticky header
+    on a short or narrow viewport (or at 200-400% zoom) permanently consumes
+    reading space and can obscure focused content (WCAG 2.4.11).
+  - The documentation layout regroups at 48rem and 72rem of main-region
+    width (container queries): three regions with different roles cannot
+    share one minimum item size. Below 48rem the navigation list also wraps
+    like a cluster, so a tall vertical nav never pushes the article below
+    the fold.
+  All other recomposition is content-driven (flex-wrap / auto-fit minimums).
+*/
+@layer echelon.marketing.layouts {
+  @media (min-width: 40rem) and (min-height: 36rem) {
+    .ef-site-header { position: sticky; inset-block-start: 0; }
+  }
+
+  .ef-site__main {
+    flex: 1 0 auto;
+    inline-size: min(100%, var(--ef-layout-width-max));
+    margin-inline: auto;
+    padding-inline: var(--ef-layout-gutter);
+    padding-block-end: var(--ef-layout-section-space);
+  }
+
+  .ef-site__main:focus { outline: none; }
+
+  /* Containers constrain a region inside the page width. */
+  .ef-container {
+    inline-size: min(100%, var(--ef-container-width, var(--ef-layout-width-standard)));
+    margin-inline: auto;
+  }
+
+  .ef-container[data-ef-width="narrow"] { --ef-container-width: var(--ef-layout-width-narrow); }
+  .ef-container[data-ef-width="wide"] { --ef-container-width: var(--ef-layout-width-wide); }
+  .ef-container[data-ef-width="max"] { --ef-container-width: var(--ef-layout-width-max); }
+
+  /* Sections: consistent vertical rhythm between page regions. */
+  .ef-site .ef-section {
+    padding-block: calc(var(--ef-layout-section-space) / 2);
+  }
+
+  .ef-site .ef-section[data-ef-tone]:not([data-ef-tone="page"]) {
+    margin-block: calc(var(--ef-layout-section-space) / 2);
+    padding: calc(var(--ef-layout-block-space) * 2);
+  }
+
+  .ef-section > * + * { margin-block-start: var(--ef-layout-stack-space); }
+  .ef-section > .ef-section-heading + * { margin-block-start: 0; }
+
+  /* Split: primary content with a supporting column that wraps below it. */
+  .ef-split {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: calc(var(--ef-layout-section-space) / 2);
+  }
+
+  .ef-split > :first-child { flex: 999 1 0; min-inline-size: min(100%, 55%); }
+  .ef-split > :last-child:not(:first-child) { flex: 1 1 clamp(18rem, 32%, 30rem); min-inline-size: 0; }
+
+  /* Hero: the page's first region and its one primary recognition path. */
+  .ef-hero {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: calc(var(--ef-layout-section-space) / 2);
+    padding-block: var(--ef-layout-section-space) calc(var(--ef-layout-block-space) * 2);
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+  }
+
+  .ef-hero__content { flex: 999 1 0; min-inline-size: min(100%, 55%); }
+  .ef-hero__aside { flex: 1 1 clamp(18rem, 32%, 30rem); min-inline-size: 0; }
+  .ef-hero__content > * + *,
+  .ef-hero__aside > * + * { margin-block-start: var(--ef-layout-stack-space); }
+  .ef-hero__title { margin-block: var(--ef-space-2) var(--ef-space-6); }
+  .ef-hero__content > .ef-eyebrow + .ef-hero__title { margin-block-start: 0; }
+
+  /* Documentation page: navigation, article, optional page outline.
+     Three regions with different roles cannot share one minimum size, so
+     the grid regroups by the width of the main region (a container):
+     one column, then navigation + article (outline follows the article),
+     then all three. Source order and reading order never change. */
+  .ef-site__main { container: ef-main / inline-size; }
+
+  .ef-doc {
+    container: ef-doc / inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ef-layout-block-space) calc(var(--ef-layout-section-space) / 2);
+    align-items: start;
+    padding-block: calc(var(--ef-layout-section-space) / 2);
+  }
+
+  .ef-doc__nav,
+  .ef-doc__content,
+  .ef-doc__aside { min-inline-size: 0; }
+
+  .ef-doc__content { --ef-type-size-h1: var(--ef-type-size-h2); }
+
+  @container ef-main (inline-size >= 48rem) {
+    .ef-doc { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); }
+    .ef-doc__aside { grid-column: 2; }
+  }
+
+  @container ef-main (inline-size >= 72rem) {
+    .ef-doc { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) minmax(10rem, 14rem); }
+    .ef-doc__aside { grid-column: 3; }
+  }
+
+  .ef-doc__nav :where(ul),
+  .ef-doc__aside :where(ul) {
+    margin: 0;
+    padding: 0;
+    border-inline-start: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    list-style: none;
+  }
+
+  .ef-doc__nav :where(li + li),
+  .ef-doc__aside :where(li + li) { margin-block-start: 0; }
+
+  .ef-doc__nav :where(a),
+  .ef-doc__aside :where(a) {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--ef-layout-target-min);
+    margin-inline-start: calc(var(--ef-shape-border-width) * -1);
+    padding-inline: var(--ef-space-4);
+    border-inline-start: calc(var(--ef-shape-border-width) * 2) solid transparent;
+    color: var(--ef-tone-text);
+    font-size: var(--ef-type-size-small);
+    text-decoration: none;
+  }
+
+  .ef-doc__nav :where(a:hover),
+  .ef-doc__aside :where(a:hover) { border-inline-start-color: var(--ef-color-accent-primary); }
+
+  .ef-doc__nav :where(a[aria-current]) {
+    border-inline-start-color: var(--ef-tone-rule-strong);
+    font-weight: var(--ef-type-weight-strong);
+  }
+
+  .ef-doc__heading { margin-block-end: var(--ef-space-2); }
+
+  @media (min-width: 64rem) and (min-height: 36rem) {
+    .ef-doc__nav,
+    .ef-doc__aside {
+      position: sticky;
+      inset-block-start: var(--ef-layout-header-offset);
+      max-block-size: calc(100vh - var(--ef-layout-header-offset) - 1rem);
+      overflow: auto;
+    }
+  }
+
+  @container ef-doc (inline-size < 48rem) {
+    .ef-doc__nav :where(ul) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0 var(--ef-space-1);
+      border-inline-start: 0;
+      border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    }
+
+    .ef-doc__nav :where(a) {
+      margin-inline-start: 0;
+      border-inline-start: 0;
+      border-block-end: calc(var(--ef-shape-border-width) * 2) solid transparent;
+    }
+
+    .ef-doc__nav :where(a[aria-current]) { border-block-end-color: var(--ef-tone-rule-strong); }
+  }
+}