/*! Forma 0.3.0 | forma-echelon-marketing.css | bundle echelon-marketing
    Single-file Echelon marketing presentation: forma-marketing.css followed by the Echelon theme. Most sites load only this file.
    Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */

/* --- artifact: forma-marketing.css --- */
/* --- 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);
    --ef-effect-transition-duration: var(--ef-primitive-motion-duration-standard);
    --ef-effect-transition-easing: var(--ef-primitive-motion-easing-standard);

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

  :where(button, .ef-button):where(:not(:disabled)):hover {
    background: var(--ef-color-surface-secondary, #e3e0d7);
  }

  :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); }\n  .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) {
    :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;
    transition:
      background-color var(--ef-effect-transition-duration) var(--ef-effect-transition-easing),
      color var(--ef-effect-transition-duration) var(--ef-effect-transition-easing),
      transform 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);
  }

  @media (prefers-reduced-motion: no-preference) {
    .ef-site .ef-button:not(:disabled, [aria-disabled="true"]):hover { transform: translateY(-2px); }
    .ef-site .ef-button:active { transform: none; }
  }

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

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

  @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 { break-inside: avoid; }
  }
}

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

/* --- artifact: forma-marketing-theme-echelon.css --- */
/* --- source: build/marketing/echelon-marketing.tokens.css --- */
/* Generated from marketing.tokens.json. Do not edit directly. */
@layer echelon.tokens {
  :root {
  --ef-effect-shadow-raised: 0px 1px 2px 0px rgb(23 26 24 / 0.08), 0px 8px 24px -8px rgb(23 26 24 / 0.08);
  --ef-effect-transition-duration: 180ms;
  --ef-effect-transition-easing: cubic-bezier(0.2, 0, 0, 1);
  --ef-focus-halo-width: 5px;
  --ef-focus-ring-offset: 2px;
  --ef-focus-ring-width: 3px;
  --ef-layout-block-space: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
  --ef-layout-grid-gap: 1.5rem;
  --ef-layout-gutter: clamp(1rem, 4vw, 4.5rem);
  --ef-layout-measure: 72ch;
  --ef-layout-measure-narrow: 62ch;
  --ef-layout-section-space: clamp(4rem, 2rem + 6vw, 10rem);
  --ef-layout-stack-space: 1.5rem;
  --ef-layout-target-min: 2.75rem;
  --ef-layout-width-max: 90rem;
  --ef-layout-width-narrow: 45rem;
  --ef-layout-width-standard: 64rem;
  --ef-layout-width-wide: 75rem;
  --ef-shape-border-width: 1px;
  --ef-shape-border-width-accent: 4px;
  --ef-shape-radius: 0px;
  --ef-type-family-body: Manrope, system-ui, sans-serif;
  --ef-type-family-display: Newsreader, Georgia, serif;
  --ef-type-family-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ef-type-leading-body: 1.65;
  --ef-type-leading-heading: 1;
  --ef-type-leading-lead: 1.5;
  --ef-type-leading-snug: 1.25;
  --ef-type-size-body: 1rem;
  --ef-type-size-h1: clamp(2.5rem, 1.75rem + 6vw, 7.25rem);
  --ef-type-size-h2: clamp(2rem, 1.25rem + 3.6vw, 4.5rem);
  --ef-type-size-h3: 1.25rem;
  --ef-type-size-h4: 1rem;
  --ef-type-size-label: 0.75rem;
  --ef-type-size-lead: clamp(1.125rem, 0.875rem + 0.85vw, 1.5rem);
  --ef-type-size-small: 0.875rem;
  --ef-type-size-statement: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  --ef-type-tracking-body: 0em;
  --ef-type-tracking-display: -0.035em;
  --ef-type-tracking-label: 0.09em;
  --ef-type-weight-body: 400;
  --ef-type-weight-heading: 500;
  --ef-type-weight-label: 500;
  --ef-type-weight-nav: 600;
  --ef-type-weight-strong: 700;
}
  :root, [data-ef-theme="light"] {
  --ef-color-accent-hover: #74461f;
  --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-status-danger: #a13a2c;
  --ef-color-status-info: #2d5f86;
  --ef-color-status-success: #2e6a45;
  --ef-color-status-warning: #86560f;
  --ef-color-surface-elevated: #f8f6f1;
  --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-muted: #686d68;
  --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-hover: #c9a07f;
  --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-status-danger: #ef9a8b;
  --ef-color-status-info: #90b9dc;
  --ef-color-status-success: #8cc49f;
  --ef-color-status-warning: #ddb266;
  --ef-color-surface-elevated: #3a403c;
  --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-muted: #e3e0d7;
  --ef-color-text-on-secondary-surface: #f2efe7;
  --ef-color-text-primary: #f2efe7;
  --ef-color-text-secondary: #e3e0d7;
}
  }
  [data-ef-theme="dark"] {
  --ef-color-accent-hover: #c9a07f;
  --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-status-danger: #ef9a8b;
  --ef-color-status-info: #90b9dc;
  --ef-color-status-success: #8cc49f;
  --ef-color-status-warning: #ddb266;
  --ef-color-surface-elevated: #3a403c;
  --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-muted: #e3e0d7;
  --ef-color-text-on-secondary-surface: #f2efe7;
  --ef-color-text-primary: #f2efe7;
  --ef-color-text-secondary: #e3e0d7;
}
}

/* --- source: themes/echelon/marketing.css --- */
/*
  Echelon Marketing Theme: brand decisions that are not scalar tokens.

  Color, type, layout, shape, and effect values come from the compiled
  marketing.tokens.json. This file only fills generic Forma hooks with
  Echelon's composition choices, and derives every color from tokens so the
  choices hold in light and dark schemes.
*/
@layer echelon.theme {
  /* Foundry drafting grid. Kept at a very low effective alpha (6% at 18%
     opacity) so it never changes text contrast (VE REP-VE-COL-001). */
  .ef-site {
    --ef-site-backdrop:
      linear-gradient(color-mix(in srgb, var(--ef-color-text-primary) 6%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--ef-color-text-primary) 6%, transparent) 1px, transparent 1px);
    --ef-site-backdrop-size: 48px 48px;
    --ef-site-backdrop-opacity: 0.18;
  }

  @media (forced-colors: active) {
    .ef-site { --ef-site-backdrop: none; }
  }
}