/*
  StrikeSimple design system — dist/css/landing.css
  GENERATED by scripts/build.mjs from the token JSON under tokens/. Do not edit: change the JSON and run `npm run build`.
  Deterministic output (no timestamp), so dist/ is committed and `npm run check` fails while it is stale.
  Everything the landing surface needs in one file: dist/css/foundation.css, landing.tokens.css, landing.roles.css and the recipes of components/landing/ in index.css order, with every local @import inlined.
  Hand-authored component CSS is copied verbatim from components/; edit it there.
*/

/* ── dist/css/foundation.css ── */
:root {
  /* foundation.brand.mark */
  --mark-ray-start: 4;
  --mark-ray-end: 96;
  --mark-diag-start: 19;
  --mark-diag-end: 81;

  /* foundation.brand.mark.stroke */
  --mark-stroke-inline: 8;
  --mark-stroke-favicon: 11;
  --mark-stroke-app: 12;

  /* foundation.brand.mark.linecap */
  --mark-linecap-landing: square;
  --mark-linecap-app: butt;

  /* foundation.color.blue */
  --blue-300: #9b9bff;
  --blue-400: #5757ff;
  --blue-500: #2a2bf5;
  --blue-600: #1e1fce;
  --blue-700: #15159e;

  /* foundation.color.teal */
  --teal-300: #5fd0c5;
  --teal-400: #2fb8aa;
  --teal-500: #109a8c;
  --teal-600: #0c7a6f;
  --teal-700: #08574f;

  /* foundation.color.violet */
  --violet-300: #b9a6ff;
  --violet-400: #9472ff;
  --violet-500: #6d43f0;
  --violet-600: #5530c4;
  --violet-700: #3f2397;

  /* foundation.color */
  --white: #ffffff;
  --black: #000000;

  /* foundation.color.neutral.cool */
  --neutral-cool-50: #f7f7f8;
  --neutral-cool-100: #eeeeef;
  --neutral-cool-200: #e2e2e4;
  --neutral-cool-300: #d0d0d3;
  --neutral-cool-400: #b0b0b5;
  --neutral-cool-500: #88888e;
  --neutral-cool-600: #64646a;
  --neutral-cool-700: #444449;
  --neutral-cool-800: #262629;
  --neutral-cool-900: #141416;
  --neutral-cool-950: #0a0a0b;

  /* foundation.color.neutral.navy */
  --neutral-navy-50: #f7f9fb;
  --neutral-navy-100: #edf1f6;
  --neutral-navy-200: #dfe6ee;
  --neutral-navy-300: #c6d0dc;
  --neutral-navy-400: #98a5b6;
  --neutral-navy-500: #6e7d92;
  --neutral-navy-600: #4d5a6d;
  --neutral-navy-700: #333d4c;
  --neutral-navy-800: #212934;
  --neutral-navy-900: #151a22;
  --neutral-navy-950: #0b0e14;

  /* foundation.color.product.sun */
  --sun-50: #fbf3e6;
  --sun-100: #f6e4c4;
  --sun-200: #efd09a;
  --sun-300: #e7b96b;
  --sun-400: #dfa343;
  --sun-500: #ce8a20;
  --sun-600: #a86c16;
  --sun-700: #835111;
  --sun-800: #5e3a0d;
  --sun-900: #3b2407;

  /* foundation.color.product.flame */
  --flame-50: #fcefe6;
  --flame-100: #f8d8c2;
  --flame-200: #f3b894;
  --flame-300: #ec9461;
  --flame-400: #e5763a;
  --flame-500: #d55e22;
  --flame-600: #ae4818;
  --flame-700: #863612;
  --flame-800: #5f260c;
  --flame-900: #3c1707;

  /* foundation.color.product.clay */
  --clay-50: #faede9;
  --clay-100: #f3d3c8;
  --clay-200: #e8ae9c;
  --clay-300: #db856b;
  --clay-400: #cf6446;
  --clay-500: #bc4a2e;
  --clay-600: #993826;
  --clay-700: #732a1d;
  --clay-800: #4f1d14;
  --clay-900: #30110b;

  /* foundation.color.product.cobalt */
  --cobalt-50: #ecedff;
  --cobalt-100: #d6d7ff;
  --cobalt-200: #b0b1ff;
  --cobalt-300: #8a8bff;
  --cobalt-400: #5757ff;
  --cobalt-500: #2a2bf5;
  --cobalt-600: #1e1fce;
  --cobalt-700: #15159e;
  --cobalt-800: #0e0e70;
  --cobalt-900: #08083f;

  /* foundation.color.product.azure */
  --azure-50: #e6f4fb;
  --azure-100: #c4e6f6;
  --azure-200: #95d2ee;
  --azure-300: #5fb8e2;
  --azure-400: #2e9bd2;
  --azure-500: #1380be;
  --azure-600: #0f6699;
  --azure-700: #0b4d74;
  --azure-800: #07344e;
  --azure-900: #041c2b;

  /* foundation.color.product.indigo */
  --indigo-50: #eeebfb;
  --indigo-100: #d8d0f5;
  --indigo-200: #b7a8ec;
  --indigo-300: #9580e1;
  --indigo-400: #785fd6;
  --indigo-500: #5e43c8;
  --indigo-600: #4a33a0;
  --indigo-700: #382678;
  --indigo-800: #261951;
  --indigo-900: #150d2e;

  /* foundation.color.signal */
  --signal-yellow: #f5c518;
  --signal-gold: #f2c46d;

  /* foundation.color.status.sage */
  --sage-500: #1f9d63;
  --sage-bg: #e6f1ea;

  /* foundation.color.status.oxblood */
  --oxblood-500: #d23b3b;
  --oxblood-bg: #fae7e5;

  /* foundation.color.status.slate */
  --slate-500: #4f5a6b;
  --slate-bg: #e9ecf1;

  /* foundation.color.status.amber */
  --amber-500: #b07a12;
  --amber-bg: #f4ecdc;

  /* foundation.motion.ease */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* foundation.motion.duration */
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* foundation.space */
  --space-unit: 4px;
}

/* ── dist/css/landing.tokens.css ── */
:root {
  /* landing.band.dark.band */
  --lp-band-dark-bg: var(--lp-bg-dark);
  --lp-band-dark-kicker: var(--blue-300);
  --lp-band-dark-title: var(--gray-100);
  --lp-band-dark-text: var(--gray-400);
  --lp-band-dark-em: var(--gray-100);
  --lp-band-dark-hl: var(--blue-300);
  --lp-band-dark-hairline: var(--lp-hairline-dark);

  /* landing.band.dark.roadmap */
  --lp-rm-dark-line: rgba(155, 155, 255, 0.4);
  --lp-rm-dark-progress-a: var(--blue-400);
  --lp-rm-dark-progress-b: var(--blue-300);
  --lp-rm-dark-progress-glow: rgba(87, 87, 255, 0.6);
  --lp-rm-dark-dot: var(--blue-400);
  --lp-rm-dark-dot-on: var(--blue-300);
  --lp-rm-dark-halo: rgba(87, 87, 255, 0.2);
  --lp-rm-dark-halo-on: rgba(87, 87, 255, 0.28);
  --lp-rm-dark-glow: rgba(87, 87, 255, 0.45);
  --lp-rm-dark-glow-on: rgba(87, 87, 255, 0.75);
  --lp-rm-dark-name: var(--gray-100);
  --lp-rm-dark-pop-bg: #1f2027;
  --lp-rm-dark-pop-border: rgba(255, 255, 255, 0.12);
  --lp-rm-dark-pop-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --lp-rm-dark-pop-title: var(--gray-100);
  --lp-rm-dark-pop-text: var(--gray-300);
  --lp-rm-dark-tag-text: var(--blue-300);
  --lp-rm-dark-tag-bg: rgba(87, 87, 255, 0.16);
  --lp-rm-dark-tile: rgba(255, 255, 255, 0.05);
  --lp-rm-dark-soon-text: var(--gray-300);
  --lp-rm-dark-soon-mark: var(--blue-300);
  --lp-rm-dark-soon-hatch: rgba(155, 155, 255, 0.07);
  --lp-rm-dark-soon-glow: rgba(87, 87, 255, 0.24);
  --lp-rm-dark-caption: var(--blue-300);
  --lp-rm-dark-focus: var(--blue-300);
  --lp-rm-dark-flow: var(--blue-300);
  --lp-rm-dark-feature: var(--signal-gold);
  --lp-rm-dark-feature-ink: var(--signal-gold);
  --lp-rm-dark-feature-bg: rgba(242, 196, 109, 0.12);
  --lp-rm-dark-feature-glow: rgba(242, 196, 109, 0.35);

  /* landing.band.light.band */
  --lp-band-light-bg: var(--white);
  --lp-band-light-kicker: var(--blue-600);
  --lp-band-light-title: var(--gray-900);
  --lp-band-light-text: var(--gray-600);
  --lp-band-light-em: var(--gray-900);
  --lp-band-light-hl: var(--blue-500);
  --lp-band-light-hairline: rgba(20, 20, 22, 0.1);

  /* landing.band.light.roadmap */
  --lp-rm-light-line: rgba(42, 43, 245, 0.28);
  --lp-rm-light-progress-a: var(--blue-500);
  --lp-rm-light-progress-b: var(--blue-400);
  --lp-rm-light-progress-glow: rgba(42, 43, 245, 0.35);
  --lp-rm-light-dot: var(--blue-500);
  --lp-rm-light-dot-on: var(--blue-500);
  --lp-rm-light-halo: rgba(42, 43, 245, 0.14);
  --lp-rm-light-halo-on: rgba(42, 43, 245, 0.2);
  --lp-rm-light-glow: rgba(42, 43, 245, 0.2);
  --lp-rm-light-glow-on: rgba(42, 43, 245, 0.4);
  --lp-rm-light-name: var(--gray-900);
  --lp-rm-light-pop-bg: var(--white);
  --lp-rm-light-pop-border: var(--lp-hairline-light);
  --lp-rm-light-pop-shadow: 0 24px 60px -28px rgba(20, 20, 80, 0.35);
  --lp-rm-light-pop-title: var(--gray-900);
  --lp-rm-light-pop-text: var(--gray-700);
  --lp-rm-light-tag-text: var(--blue-600);
  --lp-rm-light-tag-bg: rgba(42, 43, 245, 0.08);
  --lp-rm-light-tile: rgba(20, 20, 60, 0.05);
  --lp-rm-light-soon-text: var(--gray-700);
  --lp-rm-light-soon-mark: var(--blue-500);
  --lp-rm-light-soon-hatch: rgba(42, 43, 245, 0.06);
  --lp-rm-light-soon-glow: rgba(42, 43, 245, 0.12);
  --lp-rm-light-caption: var(--blue-500);
  --lp-rm-light-focus: var(--blue-500);
  --lp-rm-light-flow: var(--blue-500);
  --lp-rm-light-feature: var(--amber-500);
  --lp-rm-light-feature-ink: #6b4500;
  --lp-rm-light-feature-bg: rgba(176, 122, 18, 0.1);
  --lp-rm-light-feature-glow: rgba(176, 122, 18, 0.3);

  /* landing.band.lavender.band */
  --lp-band-lavender-bg: radial-gradient(50% 60% at 50% 70%, rgba(155, 155, 255, 0.32) 0%, rgba(155, 155, 255, 0) 70%), linear-gradient(180deg, #e7e7fb 0%, #dedff6 100%);
  --lp-band-lavender-kicker: var(--lp-band-light-kicker);
  --lp-band-lavender-title: var(--lp-band-light-title);
  --lp-band-lavender-text: var(--lp-band-light-text);
  --lp-band-lavender-em: var(--lp-band-light-em);
  --lp-band-lavender-hl: var(--lp-band-light-hl);
  --lp-band-lavender-hairline: var(--lp-hairline-light);

  /* landing.band.lavender.roadmap */
  --lp-rm-lavender-line: rgba(42, 43, 245, 0.32);
  --lp-rm-lavender-progress-a: var(--lp-rm-light-progress-a);
  --lp-rm-lavender-progress-b: var(--lp-rm-light-progress-b);
  --lp-rm-lavender-progress-glow: var(--lp-rm-light-progress-glow);
  --lp-rm-lavender-dot: var(--lp-rm-light-dot);
  --lp-rm-lavender-dot-on: var(--lp-rm-light-dot-on);
  --lp-rm-lavender-halo: var(--lp-rm-light-halo);
  --lp-rm-lavender-halo-on: var(--lp-rm-light-halo-on);
  --lp-rm-lavender-glow: var(--lp-rm-light-glow);
  --lp-rm-lavender-glow-on: var(--lp-rm-light-glow-on);
  --lp-rm-lavender-name: var(--lp-rm-light-name);
  --lp-rm-lavender-pop-bg: var(--lp-rm-light-pop-bg);
  --lp-rm-lavender-pop-border: var(--lp-rm-light-pop-border);
  --lp-rm-lavender-pop-shadow: var(--lp-rm-light-pop-shadow);
  --lp-rm-lavender-pop-title: var(--lp-rm-light-pop-title);
  --lp-rm-lavender-pop-text: var(--lp-rm-light-pop-text);
  --lp-rm-lavender-tag-text: var(--lp-rm-light-tag-text);
  --lp-rm-lavender-tag-bg: var(--lp-rm-light-tag-bg);
  --lp-rm-lavender-tile: var(--lp-rm-light-tile);
  --lp-rm-lavender-soon-text: var(--lp-rm-light-soon-text);
  --lp-rm-lavender-soon-mark: var(--lp-rm-light-soon-mark);
  --lp-rm-lavender-soon-hatch: var(--lp-rm-light-soon-hatch);
  --lp-rm-lavender-soon-glow: var(--lp-rm-light-soon-glow);
  --lp-rm-lavender-caption: var(--lp-rm-light-caption);
  --lp-rm-lavender-focus: var(--lp-rm-light-focus);
  --lp-rm-lavender-flow: var(--lp-rm-light-flow);
  --lp-rm-lavender-feature: var(--lp-rm-light-feature);
  --lp-rm-lavender-feature-ink: var(--lp-rm-light-feature-ink);
  --lp-rm-lavender-feature-bg: var(--lp-rm-light-feature-bg);
  --lp-rm-lavender-feature-glow: var(--lp-rm-light-feature-glow);

  /* landing.band.cobalt.band */
  --lp-band-cobalt-bg: radial-gradient(60% 70% at 50% 75%, rgba(155, 155, 255, 0.35) 0%, rgba(155, 155, 255, 0) 70%), linear-gradient(160deg, #2a2bf5 0%, #1a1bb8 55%, #15159e 100%);
  --lp-band-cobalt-kicker: rgba(255, 255, 255, 0.72);
  --lp-band-cobalt-title: var(--white);
  --lp-band-cobalt-text: rgba(255, 255, 255, 0.78);
  --lp-band-cobalt-em: var(--white);
  --lp-band-cobalt-hl: #c9c9ff;
  --lp-band-cobalt-hairline: rgba(255, 255, 255, 0.18);

  /* landing.band.cobalt.roadmap */
  --lp-rm-cobalt-line: rgba(255, 255, 255, 0.45);
  --lp-rm-cobalt-progress-a: rgba(255, 255, 255, 0.6);
  --lp-rm-cobalt-progress-b: var(--white);
  --lp-rm-cobalt-progress-glow: rgba(255, 255, 255, 0.55);
  --lp-rm-cobalt-dot: var(--white);
  --lp-rm-cobalt-dot-on: var(--white);
  --lp-rm-cobalt-halo: rgba(255, 255, 255, 0.18);
  --lp-rm-cobalt-halo-on: rgba(255, 255, 255, 0.26);
  --lp-rm-cobalt-glow: rgba(255, 255, 255, 0.35);
  --lp-rm-cobalt-glow-on: rgba(255, 255, 255, 0.6);
  --lp-rm-cobalt-name: var(--white);
  --lp-rm-cobalt-pop-bg: var(--white);
  --lp-rm-cobalt-pop-border: rgba(255, 255, 255, 0.4);
  --lp-rm-cobalt-pop-shadow: 0 24px 60px -24px rgba(10, 10, 60, 0.6);
  --lp-rm-cobalt-pop-title: var(--gray-900);
  --lp-rm-cobalt-pop-text: var(--gray-700);
  --lp-rm-cobalt-tag-text: var(--blue-600);
  --lp-rm-cobalt-tag-bg: rgba(42, 43, 245, 0.08);
  --lp-rm-cobalt-tile: rgba(20, 20, 60, 0.05);
  --lp-rm-cobalt-soon-text: var(--gray-700);
  --lp-rm-cobalt-soon-mark: var(--blue-500);
  --lp-rm-cobalt-soon-hatch: rgba(42, 43, 245, 0.06);
  --lp-rm-cobalt-soon-glow: rgba(42, 43, 245, 0.12);
  --lp-rm-cobalt-caption: var(--blue-500);
  --lp-rm-cobalt-focus: var(--white);
  --lp-rm-cobalt-flow: var(--white);
  --lp-rm-cobalt-feature: #ffd58a;
  --lp-rm-cobalt-feature-ink: #ffe9bd;
  --lp-rm-cobalt-feature-bg: rgba(255, 213, 138, 0.16);
  --lp-rm-cobalt-feature-glow: rgba(255, 213, 138, 0.4);

  /* landing.band.cobalt.inline */
  --lp-rm-cobalt-inline-tag-bg: rgba(255, 255, 255, 0.14);
  --lp-rm-cobalt-inline-tile: rgba(255, 255, 255, 0.1);
  --lp-rm-cobalt-inline-soon-hatch: rgba(255, 255, 255, 0.08);
  --lp-rm-cobalt-inline-soon-glow: rgba(255, 255, 255, 0.16);

  /* landing.color.gray */
  --gray-50: var(--neutral-cool-50);
  --gray-100: var(--neutral-cool-100);
  --gray-200: var(--neutral-cool-200);
  --gray-300: var(--neutral-cool-300);
  --gray-400: var(--neutral-cool-400);
  --gray-500: var(--neutral-cool-500);
  --gray-600: var(--neutral-cool-600);
  --gray-700: var(--neutral-cool-700);
  --gray-800: var(--neutral-cool-800);
  --gray-900: var(--neutral-cool-900);
  --gray-950: var(--neutral-cool-950);

  /* landing.color.bg */
  --bg-page: var(--gray-100);
  --bg-page-deep: var(--gray-200);

  /* landing.color.surface */
  --surface: var(--gray-50);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-inset: var(--gray-100);
  --surface-invert: var(--gray-900);

  /* landing.color.text */
  --text-strong: var(--gray-900);
  --text-body: var(--gray-800);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);
  --text-invert: var(--gray-100);
  --text-onaccent: var(--white);

  /* landing.color.accent */
  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-soft: var(--blue-300);
  --accent-text: var(--blue-600);

  /* landing.color.accent-2 */
  --accent-2: var(--teal-500);
  --accent-2-hover: var(--teal-600);
  --accent-2-soft: var(--teal-300);

  /* landing.color.accent-3 */
  --accent-3: var(--violet-500);
  --accent-3-hover: var(--violet-600);
  --accent-3-soft: var(--violet-300);

  /* landing.color.border */
  --border: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-faint: var(--gray-200);
  --border-invert: var(--gray-700);

  /* landing.color */
  --rule: var(--gray-900);
  --grid-line: var(--gray-200);
  --focus-ring: var(--blue-500);

  /* landing.color.status */
  --success: var(--sage-500);
  --danger: var(--oxblood-500);
  --info: var(--slate-500);
  --warning: var(--amber-500);

  /* landing.page */
  --lp-bg-dark: #17181d;
  --lp-accent: var(--blue-500);
  --lp-accent-hover: var(--blue-600);
  --lp-text: var(--gray-100);
  --lp-border-strong: rgba(255, 255, 255, 0.16);
  --lp-pill: 999px;
  --lp-bg-dark-hover: #25262b;
  --lp-stage-top: #1d1e25;
  --lp-stage-bottom: #141519;
  --lp-hairline-dark: rgba(255, 255, 255, 0.09);
  --lp-hairline-dark-soft: rgba(255, 255, 255, 0.06);
  --lp-hairline-light: rgba(20, 20, 60, 0.12);
  --lp-frost: rgba(255, 255, 255, 0.55);
  --lp-frost-border: rgba(20, 20, 60, 0.16);
  --lp-glow-cobalt: rgba(42, 43, 245, 0.16);

  /* landing.payoff */
  --lp-payoff-line: var(--blue-300);
  --lp-payoff-now: rgba(255, 255, 255, 0.62);
  --lp-payoff-axis: rgba(255, 255, 255, 0.12);
  --lp-payoff-zero: rgba(255, 255, 255, 0.3);
  --lp-payoff-strike: rgba(155, 155, 255, 0.2);
  --lp-payoff-wash-up: rgba(31, 157, 99, 0.16);
  --lp-payoff-wash-down: rgba(210, 59, 59, 0.14);
  --lp-payoff-glow: rgba(87, 87, 255, 0.55);

  /* landing.diagram */
  --lp-diagram-ink: #3c3c45;
  --lp-diagram-ink-deep: #121215;
  --lp-diagram-paper: #f2f2f3;
  --lp-diagram-lavender: #a6a6ff;
  --lp-diagram-lavender-soft: #eeeeff;
  --lp-diagram-ink-soft: #313139;

  /* landing.component.button */
  --lp-button-height: 40px;
  --lp-button-padding-x: 20px;
  --lp-button-font-size: 14px;

  /* landing.component.media-cta */
  --lp-media-cta-height: 36px;
  --lp-media-cta-padding-x: 16px;

  /* landing.component.hero-tile */
  --lp-hero-tile-min-width: 280px;
  --lp-hero-tile-min-width-mobile: 220px;
  --lp-hero-tile-padding: 26px 32px 24px 40px;

  /* landing.component.rail */
  --lp-rail-width: 72px;
  --lp-rail-width-open: 244px;
  --lp-rail-logo-height: 76px;

  /* landing.component.footer */
  --lp-footer-padding: 64px 40px 40px;

  /* landing.component.band */
  --lp-band-padding: clamp(80px, 9vw, 120px) 40px;

  /* landing.component.roadmap */
  --lp-roadmap-dot: 14px;
  --lp-roadmap-halo: 6px;
  --lp-roadmap-halo-on: 8px;
  --lp-roadmap-preview: 128px;
  --lp-roadmap-pop-width: 240px;

  /* landing.component.section */
  --lp-section-padding: 64px 40px;
  --lp-section-padding-mobile: 48px 16px;

  /* landing.component.showcase */
  --lp-showcase-max-width: 1240px;

  /* landing.component.split */
  --lp-split-card-width: 560px;
  --lp-split-stage-min-height: 560px;

  /* landing.component.logo.size */
  --lp-logo-size-sm: 18px;
  --lp-logo-size-md: 26px;
  --lp-logo-size-lg: 40px;
  --lp-logo-size-xl: 64px;

  /* landing.font.family */
  --font-display: "Archivo", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-sans: "Archivo", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-serif: var(--font-sans);
  --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, "Menlo", monospace;
  --font-ascii: "IBM Plex Mono", ui-monospace, monospace;
  --lp-font: "Saans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica", "Arial", sans-serif;

  /* landing.font.weight */
  --weight-light: 400;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* landing.font.role */
  --font-eyebrow: var(--font-mono);
  --font-heading: var(--font-display);
  --font-body: var(--font-mono);
  --font-data: var(--font-mono);

  /* landing.layout.container */
  --container: 1200px;
  --container-wide: 1400px;
  --container-prose: 660px;

  /* landing.layout.breakpoint */
  --bp-footer-4col: 1280px;
  --bp-footer-2col: 1100px;
  --bp-split-stack: 1080px;
  --bp-mobile: 860px;
  --bp-showcase: 720px;
  --bp-phone: 600px;

  /* landing.motion.duration */
  --dur-slow: 360ms;

  /* landing.shadow */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(16,16,22,0.05);
  --shadow-sm: 0 1px 3px rgba(16,16,22,0.07), 0 1px 2px rgba(16,16,22,0.05);
  --shadow-md: 0 4px 14px rgba(16,16,22,0.08), 0 1px 3px rgba(16,16,22,0.06);
  --shadow-lg: 0 12px 36px rgba(16,16,22,0.12), 0 2px 8px rgba(16,16,22,0.06);
  --shadow-inset: inset 0 1px 2px rgba(16,16,22,0.06);

  /* landing.space */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* landing.radius */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --radius-xl: 12px;
  --radius-2xl: 24px;

  /* landing.border */
  --border-w: 1px;
  --border-w-strong: 1.5px;
  --hairline: 1px solid var(--border);
  --hairline-strong: 1px solid var(--border-strong);
  --rule-ink: 1px solid var(--gray-900);

  /* landing.type.scale */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.125rem;
  --text-3xl: 2.75rem;
  --text-4xl: 3.75rem;
  --text-5xl: 5rem;
  --text-6xl: 7rem;

  /* landing.type.leading */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* landing.type.tracking */
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-label: 0.14em;
  --tracking-wider: 0.24em;
}

/* ── dist/css/landing.roles.css ── */
/* landing.type.role.hero — landing:Landing.jsx#578 hero h1 */
.lp-hero-title {
  font-family: var(--lp-font);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--gray-900);
}

/* landing.type.role.hero-mobile — landing:Landing.jsx#578 hero h1 (mobile) */
.lp-hero-title--mobile {
  font-family: var(--lp-font);
  font-size: clamp(30px, 9.4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--gray-900);
}

/* landing.type.role.section-title — landing:Landing.jsx#777 SectionHead h2 */
.lp-section-title {
  font-family: var(--lp-font);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* landing.type.role.band-title — landing:landing.css .lp-band-title */
.lp-band-title-role {
  font-family: var(--lp-font);
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* landing.type.role.kicker — landing:Landing.jsx#772 SectionHead kicker */
.lp-kicker {
  font-family: var(--lp-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* landing.type.role.lead — landing:Landing.jsx#786 SectionHead lead */
.lp-lead {
  font-family: var(--lp-font);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* landing.type.role.band-lead — landing:landing.css .lp-band-sub */
.lp-band-lead {
  font-family: var(--lp-font);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* landing.type.role.item-label — landing:landing.css .lp-split-trigger */
.lp-item-label {
  font-family: var(--lp-font);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* landing.type.role.item-label-open — landing:landing.css .lp-split-trigger[aria-expanded="true"] */
.lp-item-label--open {
  font-family: var(--lp-font);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* landing.type.role.item-text — landing:landing.css .lp-split-text */
.lp-item-text {
  font-family: var(--lp-font);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* landing.type.role.body — landing:landing.css .lp-footer-text */
.lp-body {
  font-family: var(--lp-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* landing.type.role.button — landing:landing.css .lp-btn */
.lp-button-label {
  font-family: var(--lp-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}

/* landing.type.role.footer-heading — landing:landing.css .lp-footer-col h2 */
.lp-footer-heading {
  font-family: var(--lp-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* landing.type.role.footer-link — landing:landing.css .lp-footer-col a */
.lp-footer-link {
  font-family: var(--lp-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* landing.type.role.step-name — landing:landing.css .lp-roadmap-name */
.lp-step-name {
  font-family: var(--lp-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* landing.type.role.caption — landing:landing.css .lp-roadmap-caption */
.lp-caption {
  font-family: var(--lp-font);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* landing.type.role.nav-label — landing:Landing.jsx#224 .lp-rail-label */
.lp-nav-label {
  font-family: var(--lp-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* landing.type.role.tag — landing:landing.css .lp-roadmap-tag */
.lp-tag-label {
  font-family: var(--lp-font);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* landing.type.role.logo — landing:_ds_bundle.js components/brand/Logo.jsx */
.lp-logo-word {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* landing.type.role.ds-eyebrow — landing:tokens/base.css .sx-eyebrow */
.sx-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* landing.type.role.ds-display — landing:tokens/base.css .sx-display */
.sx-display {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}

/* ── components/landing/index.css ── */
/* StrikeSimple design system — landing surface — component entry point.
   What this is: the one file that pulls in every hand-authored landing component recipe, in the
   order they depend on each other. `npm run build` inlines these imports after
   dist/css/landing.tokens.css (the variables every rule below reads) and dist/css/landing.roles.css
   (the typography role classes .lp-kicker, .lp-section-title, .lp-lead, .lp-button-label …) to make
   dist/css/landing.css — the single sheet a page links. This file therefore imports no tokens
   itself: load the two dist sheets before it (or link dist/css/landing.css and nothing else).
   Where it came from: the shared pieces of the landing's landing.css and tokens/base.css, plus the
   brand components in _ds_bundle.js and the inline section head of Landing.jsx — see each file's
   header. Not ported, documented as patterns instead (SPEC §5.2): the split sections (.lp-split*),
   the trading life cycle (.lp-roadmap*), the Products showcase, the primitives stage, the wire grid
   and the cursor.
   Order: base first (the ground everything stands on); logo (standalone); button before band (the
   band restyles the secondary pill on its light themes); kicker before band (the band re-points the
   .lp-hl keyword at its own --band-hl); footer, rail and payoff are independent and come last. */
/* ── components/landing/base.css ── */
/* StrikeSimple design system — landing surface — base layer.
   What this is: the page-wide ground the marketing site stands on: the box model, the <body>, the
   tap-highlight reset, the screen-reader-only helper, the old design system's two editorial
   primitives (.sx-rule, .sx-mark) and the text selection colour.
   Where it came from: the landing's tokens/base.css (the body, .sx-rule, .sx-mark, ::selection)
   merged with the page-level body / html / .lp-visually-hidden rules at the top of landing.css
   (lines 31–44). The two role classes tokens/base.css also held, .sx-display and .sx-eyebrow, are
   not here: they are typography-role tokens now (landing.type.role.ds-display / ds-eyebrow) and
   come out of dist/css/landing.roles.css.
   What changed: every literal is a token (var(--…)) from dist/css/landing.tokens.css; the body
   reads the page font --lp-font straight away (landing.css set it after tokens/base.css had set
   the mono --font-body, see the FINDING below) and takes landing.css's 0.01em letter-spacing. The
   class names are the landing's, so the site could load this file in place of its own rules. */

/* Everything sizes to its border box (tokens/base.css). */
*, *::before, *::after { box-sizing: border-box; }

/* The page: margin off, the cool gray-100 ground, gray-800 body text, the Retool-style sans at the
   15px base size on a 1.5 leading, antialiased. tokens/base.css set the body in --font-body, which
   typography.css aliases to the mono face; landing.css then overrode it with --lp-font for every
   piece of page text, and that is the face the site actually shows, so it is the one set here.
   FINDING: tokens/typography.css maps --font-body to var(--font-mono) while its own header says
   "serif display for voice, mono for structure & data" — the body role points at the data face.
   The landing never shows it because landing.css re-sets the body font, but any consumer of the
   raw tokens would get a monospace body. */
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--lp-font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: 0.01em; /* literal: landing.css body; the page's open tracking for the sans, no --tracking-* token is 0.01em */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* No grey / teal flash over whatever is tapped on touch screens: every control on the page has
   its own pressed / open / focus state (landing.css). */
html { -webkit-tap-highlight-color: transparent; }

/* Screen-reader-only text (landing.css .lp-visually-hidden): kept in the accessibility tree,
   clipped out of the layout. */
.lp-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A section that an in-page link moved focus to (tabindex="-1") needs no focus ring (landing.css). */
main section[tabindex="-1"]:focus { outline: none; }

/* The editorial hairline rule (tokens/base.css .sx-rule): a 1px ink line through --rule-ink, or the
   faint gray hairline with the --faint modifier. */
.sx-rule { border: none; border-top: var(--rule-ink); opacity: 1; }
.sx-rule--faint { border-top: var(--hairline); }

/* The old design system's index marker, e.g. "[ 01 ]" (tokens/base.css .sx-mark): mono, in the
   accent, tracked open. Note the app surface gives the same class name to its svg brand mark; the
   two surfaces are never loaded together, so the collision is intended (see SPEC §1). The landing
   page itself sets its section markers in the page sans instead, see kicker.css .lp-kicker-index. */
.sx-mark {
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
}

/* Selected text: lavender over near-black (tokens/base.css). */
::selection { background: var(--blue-300); color: var(--gray-950); }
/* ── components/landing/logo.css ── */
/* StrikeSimple design system — landing surface — logo and brand mark.
   What this is: the StrikeSimple wordmark (.lp-logo) and the brand mark (.lp-mark) as plain CSS,
   with the mark's signature animation (.sx-mark-spin / .sx-mark-d / .sx-mark-p).
   Where it came from: the vendored design-system bundle, _ds_bundle.js — "// components/brand/
   Logo.jsx" (the wordmark: Archivo, 600, -0.03em, both S's bold cobalt, each i a dotless stem with
   the spark Mark floating above it as its tittle; sizes sm 18 / md 26 / lg 40 / xl 64 px; the
   invert variant for dark grounds) and "// components/brand/Mark.jsx" (the 8-ray spark on a
   0 0 100 100 viewBox, square caps, and ANIM_CSS: the diagonal cross shines twice, the mark turns
   45°, the plus cross shines twice, forever). The hero's slow continuous spin (.lp-mark-spin) is
   the <style> inside Hero() in Landing.jsx.
   What changed: the inline styles are classes; the hard-coded colours are tokens (gray-900 /
   gray-100 word, blue-500 / blue-300 accent, #FFFFFF shine → --white); the pixel sizes read the
   landing.component.logo.size tokens; the Mark's stroke geometry reads the foundation's brand-mark
   tokens. Nothing in the behaviour changed: the same spark position (left 50%, bottom 0.82em, 0.3×
   the font size), the same 6.5s loop, the same reduced-motion stop.

   Markup the classes expect:
     <a class="lp-logo lp-logo--lg"><span class="lp-logo__s">S</span>tr<span class="lp-logo__i">ı<svg
       class="lp-logo__spark" viewBox="0 0 100 100" aria-hidden="true"><line x1="50" y1="4" x2="50"
       y2="96"/><line x1="4" y1="50" x2="96" y2="50"/><line x1="19" y1="19" x2="81" y2="81"/><line
       x1="81" y1="19" x2="19" y2="81"/></svg></span>ke<span class="lp-logo__s">S</span><span
       class="lp-logo__i">ı<svg class="lp-logo__spark" …/></span>mple</a>
   The i is the dotless ı (U+0131), as in Logo.jsx. */

/* ── Wordmark ───────────────────────────────────────────────────────────────── */
/* Logo.jsx: an inline-flex lockup in the design system's display face (Archivo), 600, tracked in
   -0.03em, on a line-height of 1 so the sparks sit where the dots would; not selectable, because
   it is a picture of a word. The default size is md (26px), the rail's and the hero's phone size. */
.lp-logo {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-size: var(--lp-logo-size-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em; /* literal: Logo.jsx letterSpacing "-0.03em"; tighter than --tracking-display (-0.02em), the wordmark's own fit */
  line-height: 1;
  color: var(--gray-900);
  white-space: nowrap;
  text-decoration: none;
  user-select: none; -webkit-user-select: none;
}
.lp-logo--sm { font-size: var(--lp-logo-size-sm); }
.lp-logo--md { font-size: var(--lp-logo-size-md); }
.lp-logo--lg { font-size: var(--lp-logo-size-lg); }
.lp-logo--xl { font-size: var(--lp-logo-size-xl); }
/* variant="invert": on the dark sections the word is gray-100 and the accent lifts to blue-300,
   the lavender that reads on #17181d (the rail's wordmark on a dark tone, the footer's logo). */
.lp-logo--invert { color: var(--gray-100); }

/* Both S's: bold, in the accent (Logo.jsx: fontWeight 700, color accent). */
.lp-logo__s { font-weight: var(--weight-bold); color: var(--blue-500); }
.lp-logo--invert .lp-logo__s { color: var(--blue-300); }

/* The dotless-i stem: positioned so its spark can float above it. */
.lp-logo__i { position: relative; }

/* The spark as the i's tittle (Logo.jsx sparkI): the Mark at 0.3× the wordmark size, centred over
   the stem, its foot 0.82em up. Logo.jsx passes strokeWidth={12} — thicker than the Mark's default
   8 so the tiny spark keeps its weight — and the Mark's square caps. */
.lp-logo__spark {
  position: absolute; left: 50%; bottom: 0.82em; transform: translateX(-50%);
  display: block; width: 0.3em; height: 0.3em; overflow: visible;
  fill: none; stroke: currentColor;
  stroke-width: 12; /* literal: Logo.jsx strokeWidth={12} for the spark; the foundation's --mark-stroke-inline (8) is the standalone Mark's default, --mark-stroke-app (12) belongs to the app's icon */
  stroke-linecap: var(--mark-linecap-landing);
  color: var(--blue-500);
}
.lp-logo--invert .lp-logo__spark { color: var(--blue-300); }

/* ── Brand mark ─────────────────────────────────────────────────────────────── */
/* Mark.jsx: the thick 8-ray spark — a vertical, a horizontal and two diagonals through one centre —
   on a 100×100 box, drawn as four <line>s (the foundation's --mark-ray-* / --mark-diag-* numbers),
   stroke 8, square caps, overflow visible so the glow of the animation is not clipped. Size it with
   width / height on the svg (Mark.jsx size={28} by default). The colour variants are Mark.jsx's
   COLORS table; each also sets the brighter "shine" stroke of its animation (the SHINE table),
   which the glow follows unless --sx-mark-glow is set (Mark.jsx: glow || shine).
     <svg class="lp-mark lp-mark--accent" width="28" height="28" viewBox="0 0 100 100" role="img"
          aria-label="StrikeSimple">…four lines…</svg> */
.lp-mark {
  display: block; flex: none; overflow: visible;
  fill: none; stroke: currentColor;
  stroke-width: var(--mark-stroke-inline);
  stroke-linecap: var(--mark-linecap-landing);
  color: var(--blue-500);
  --sx-mark-base: currentColor;
  --sx-mark-shine: var(--blue-300);
}
.lp-mark--accent  { color: var(--blue-500); --sx-mark-shine: var(--blue-300); }
.lp-mark--ink     { color: var(--gray-900); --sx-mark-shine: var(--blue-500); }
.lp-mark--invert  { color: var(--gray-100); --sx-mark-shine: var(--white); }
.lp-mark--soft    { color: var(--blue-300); --sx-mark-shine: var(--white); }
.lp-mark--current { color: inherit;         --sx-mark-shine: currentColor; }

/* ── The mark's signature loop (Mark.jsx ANIM_CSS) ─────────────────────────── */
/* Loop: the diagonal cross shines twice → the mark rotates 45° → the plus cross shines twice →
   repeat. The lines stay fully opaque throughout; a "shine" is a brighter stroke plus a glow.
   Everything eases in-out. The 8-ray spark is 45°-symmetric, so the 90° → 0° reset at the end of
   the loop is seamless. Put .sx-mark-spin on a <g> around two <g>s: .sx-mark-d holds the two
   diagonals, .sx-mark-p the vertical and the horizontal. --sx-mark-dur sets the loop's length
   (Mark.jsx duration={6.5}); --sx-mark-base / --sx-mark-shine / --sx-mark-glow its colours — the
   .lp-mark variants above set them, or set them inline as Mark.jsx does. */
@keyframes sx-mark-spin {
  0%, 30%   { transform: rotate(0deg); }
  44%, 84%  { transform: rotate(45deg); }
  98%, 100% { transform: rotate(90deg); }
}
@keyframes sx-mark-d {
  0%   { stroke: var(--sx-mark-base, currentColor); filter: none; }
  9%   { stroke: var(--sx-mark-shine, var(--blue-300)); filter: drop-shadow(0 0 8px var(--sx-mark-glow, var(--sx-mark-shine, var(--blue-300)))); }
  16%  { stroke: var(--sx-mark-base, currentColor); filter: none; }
  21%  { stroke: var(--sx-mark-shine, var(--blue-300)); filter: drop-shadow(0 0 8px var(--sx-mark-glow, var(--sx-mark-shine, var(--blue-300)))); }
  28%, 100% { stroke: var(--sx-mark-base, currentColor); filter: none; }
}
@keyframes sx-mark-p {
  0%, 50% { stroke: var(--sx-mark-base, currentColor); filter: none; }
  59%  { stroke: var(--sx-mark-shine, var(--blue-300)); filter: drop-shadow(0 0 8px var(--sx-mark-glow, var(--sx-mark-shine, var(--blue-300)))); }
  66%  { stroke: var(--sx-mark-base, currentColor); filter: none; }
  73%  { stroke: var(--sx-mark-shine, var(--blue-300)); filter: drop-shadow(0 0 8px var(--sx-mark-glow, var(--sx-mark-shine, var(--blue-300)))); }
  80%, 100% { stroke: var(--sx-mark-base, currentColor); filter: none; }
}
.sx-mark-spin { transform-box: fill-box; transform-origin: 50% 50%; animation: sx-mark-spin var(--sx-mark-dur, 6.5s) ease-in-out infinite; }
.sx-mark-d { transform-box: fill-box; animation: sx-mark-d var(--sx-mark-dur, 6.5s) ease-in-out infinite; }
.sx-mark-p { transform-box: fill-box; animation: sx-mark-p var(--sx-mark-dur, 6.5s) ease-in-out infinite; }

/* The hero's decorative mark (Landing.jsx Hero(): .lp-mark-spin): a continuous slow turn, no shine.
   Put it on the mark's wrapper, as the hero does. */
.lp-mark-spin { animation: lp-mark-spin 12s linear infinite; }
@keyframes lp-mark-spin { to { transform: rotate(360deg); } }

/* Reduced motion: the mark holds still, upright (Mark.jsx ANIM_CSS, Hero()). */
@media (prefers-reduced-motion: reduce) {
  .sx-mark-spin, .sx-mark-d, .sx-mark-p { animation: none; transform: none; }
  .lp-mark-spin { animation: none; }
}
/* ── components/landing/button.css ── */
/* StrikeSimple design system — landing surface — buttons.
   What this is: the marketing site's pill buttons (.lp-btn and its two variants), the hero's big
   cobalt tile (.lp-hero-tile) and the Products showcase's picture pill (.lp-media-cta), with their
   hover, focus, active, reduced-motion and print behaviour.
   Where it came from: landing.css "── Buttons (Button in Landing.jsx)" through the print rule
   (lines 46–130), which follow the v3 page and, through it, retool.com's marketing site: 40px pills,
   14px medium text, 20px side padding, a ↗ that nudges on hover. README.md "Editing content":
   variant "primary" (cobalt) or "secondary" (outline — frosted white on the light hero, a hairline
   on the dark sections).
   What changed: the literals are tokens. The sizes read landing.component.button.* /
   media-cta.* / hero-tile.* (--lp-button-height …), the colours the page tokens (--lp-accent,
   --lp-bg-dark, --lp-text, --lp-border-strong, and the new names for landing.css's literals:
   --lp-bg-dark-hover for the secondary pill's #25262b hover, --lp-frost / --lp-frost-border for the
   hero's rgba whites), the weights --weight-*, the leadings --leading-*. The behaviour is
   landing.css's exactly: hover only under @media (hover: hover), the same outlines, the same
   transitions, the same reduced-motion and print overrides. The label values are those of the
   .lp-button-label role in dist/css/landing.roles.css (500 14px/1.2, tracking 0). */

/* ── The pill (Button in Landing.jsx) ──────────────────────────────────────── */
/* Retool-style pills: 40px tall, 14px text, 20px side padding, fully round. The 1px transparent
   border keeps both variants the same height; the secondary colours it in. */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  height: var(--lp-button-height); padding: 0 var(--lp-button-padding-x);
  border-radius: var(--lp-pill);
  border: 1px solid transparent;
  font: var(--weight-medium) var(--lp-button-font-size)/var(--leading-snug) var(--lp-font);
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
/* Keyboard focus: a 2px cobalt-400 ring set 3px off the pill — bright enough on the dark sections
   where most pills sit; the hero's lighter ground gets the deeper blue-500 below. */
.lp-btn:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }
/* Primary: filled cobalt, white label. */
.lp-btn--primary {
  background: var(--lp-accent); color: var(--white); border-color: var(--lp-accent);
}
/* Secondary: an outline pill — a hairline on the dark sections, frosted white on the light hero.
   On dark it is filled with the section ground rather than left transparent, so the Contact
   section's wire grid doesn't run through it (landing.css). */
.lp-btn--secondary {
  background: var(--lp-bg-dark); color: var(--lp-text); border-color: var(--lp-border-strong);
}
.lp-hero .lp-btn--secondary {
  background: var(--lp-frost); color: var(--gray-900); border-color: var(--lp-frost-border);
}
.lp-hero .lp-btn:focus-visible { outline-color: var(--blue-500); }
/* Pressed: the hover lift comes back down. */
.lp-btn--primary:active, .lp-btn--secondary:active { transform: translateY(0); }
/* The ↗ after the label, nudged up and right on hover. */
.lp-btn .lp-btn-arrow { font-size: 1em; transition: transform var(--dur-base) var(--ease-out); }
/* Hover looks only where there's a real hover: on touch screens they'd stick after a tap
   (landing.css). The primary deepens to the hover accent and lifts 1px; the secondary steps up a
   shade on dark, or goes solid white on the hero. */
@media (hover: hover) {
  .lp-btn--primary:hover { background: var(--lp-accent-hover); border-color: var(--lp-accent-hover); transform: translateY(-1px); }
  .lp-btn--secondary:hover {
    background: var(--lp-bg-dark-hover);
    border-color: rgba(255, 255, 255, 0.32); /* literal: landing.css; twice --lp-border-strong's alpha, no token for the hover hairline */
    transform: translateY(-1px);
  }
  .lp-hero .lp-btn--secondary:hover {
    background: var(--white);
    border-color: rgba(20, 20, 60, 0.3); /* literal: landing.css; the frost border (--lp-frost-border, 0.16) darkened for the solid white hover, no token */
  }
  .lp-btn:hover .lp-btn-arrow { transform: translate(2px, -2px); }
}

/* ── The hero tile (Hero in Landing.jsx) ───────────────────────────────────── */
/* The hero's top-right tile (the main page's big demo tile, now to the waitlist): cobalt, the
   brand mark over an uppercase label with a ↗ at its far end (landing.css). Its label is 14px
   medium, tracked 0.06em like the rail's nav labels (the .lp-nav-label role) but two sizes up.
   FINDING: unlike .lp-btn, the tile's hover rules are not wrapped in @media (hover: hover) in
   landing.css, so on a touch screen its lift and glow stick after a tap; ported as written. */
.lp-hero-tile {
  display: flex; flex-direction: column; align-items: stretch;
  min-width: var(--lp-hero-tile-min-width); box-sizing: border-box; padding: var(--lp-hero-tile-padding);
  border-radius: var(--radius-md);
  background: var(--blue-500); color: var(--white); text-decoration: none;
  font: var(--weight-medium) 14px/var(--leading-snug) var(--lp-font); /* literal 14px: the tile's label size; the --text-* scale has no 14px step and the button token is the pill's */
  letter-spacing: 0.06em; /* literal: landing.css; the nav-label tracking, no --tracking-* token is 0.06em */
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.lp-hero-tile:hover {
  background: var(--blue-600); transform: translateY(-1px);
  box-shadow: 0 18px 40px -20px rgba(42, 43, 245, 0.7); /* literal: landing.css; a cobalt (blue-500 at 70%) drop glow, no token for it */
}
.lp-hero-tile:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }
.lp-hero-tile-mark { display: block; margin-bottom: 40px; line-height: 0; }
.lp-hero-tile-label { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.lp-hero-tile-label > span { letter-spacing: var(--tracking-normal); transition: transform var(--dur-fast) var(--ease-out); }
.lp-hero-tile:hover .lp-hero-tile-label > span { transform: translate(2px, -2px); }
/* Phones and tablets (--bp-mobile, 860px): a narrower, tighter tile. */
@media (max-width: 860px) {
  .lp-hero-tile { min-width: var(--lp-hero-tile-min-width-mobile); padding: 20px 22px 18px 26px; } /* literal padding: landing.css's mobile inset, no token (the desktop inset is --lp-hero-tile-padding) */
  .lp-hero-tile-mark { margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero-tile, .lp-hero-tile-label > span { transition: none; }
  .lp-hero-tile:hover, .lp-hero-tile:hover .lp-hero-tile-label > span { transform: none; }
}

/* ── The showcase's picture pill (Products in Landing.jsx) ─────────────────── */
/* The Products showcase's "Try our demo" pill: a smaller cobalt pill (36px, 16px sides) pinned at
   the frame's bottom-right corner; it starts hidden and 6px low, and rises in on hover / keyboard
   focus (those rules live with the section, in PRODUCTS_CSS in Landing.jsx). */
.lp-media-cta {
  position: absolute; right: 16px; bottom: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.5em;
  height: var(--lp-media-cta-height); padding: 0 var(--lp-media-cta-padding-x);
  border-radius: var(--lp-pill);
  background: var(--lp-accent); color: var(--white);
  font: var(--weight-medium) var(--lp-button-font-size)/var(--leading-snug) var(--lp-font); letter-spacing: var(--tracking-normal); white-space: nowrap;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

/* Reduced motion: no eases, no lifts (landing.css). */
@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-btn .lp-btn-arrow, .lp-media-cta { transition: none; }
  .lp-btn:hover, .lp-btn:hover .lp-btn-arrow { transform: none; }
}
/* Print: the secondary pill loses its dark fill and prints as a near-black outline (landing.css).
   The inks are literals because print has no dark ground to tokenise against. */
@media print {
  .lp-btn--secondary { color: #111; border-color: rgba(17, 17, 17, 0.4); background: none; } /* literal: landing.css print inks */
}
/* ── components/landing/kicker.css ── */
/* StrikeSimple design system — landing surface — kicker and section head.
   What this is: the "[ 01 ] KICKER" marker over a section title and its lead — the head every
   light and dark section opens with — as classes: .lp-section-head, the kicker's index span
   (.lp-kicker-index), the accent keyword inside a title (.lp-hl), and the colour switch for dark
   grounds ([data-on-dark]).
   Where it came from: SectionHead() in Landing.jsx (~line 768), which sets all of this inline: a
   720px-wide head (centred with `center`), the kicker span (500 12px/1.2, 0.01em, uppercase,
   blue-600 — blue-300 on dark), the h2 20px under it (600 clamp(30px, 3.4vw, 46px)/1.05, -0.02em,
   gray-900 — gray-100 on dark, text-wrap balance) with its keywords in blue-500 (blue-300 on dark,
   titleNodes()), and the lead 18px under that, paragraphs 10px apart (300 clamp(15px, 1.1vw, 17px)
   /1.5, 0.01em, text-muted — gray-400 on dark, text-wrap pretty). The hero's own lead (Hero(),
   ~line 605) is the same lead in gray-700. The old design system's index marker is Eyebrow.jsx in
   _ds_bundle.js (mono, the index in blue-500, the label text-muted).
   What changed: the type itself is not repeated here — it is the role classes .lp-kicker,
   .lp-section-title and .lp-lead in dist/css/landing.roles.css (landing.type.role.kicker /
   section-title / lead); this file adds what the roles leave out: colour, spacing and the dark
   switch. The index is its own span (.lp-kicker-index) so it can carry the DS accent as in
   Eyebrow.jsx; SectionHead paints "[ 01 ]" and the kicker as one blue-600 run — see the FINDING.

   Markup the classes expect:
     <div class="lp-section-head" data-on-dark>
       <span class="lp-kicker"><span class="lp-kicker-index">[ 01 ]</span> Why us</span>
       <h2 class="lp-section-title">No <span class="lp-hl">liquidation</span>, stay in the game</h2>
       <div class="lp-section-head__lead"><p class="lp-lead">…</p><p class="lp-lead">…</p></div>
     </div> */

/* ── Kicker ─────────────────────────────────────────────────────────────────── */
/* SectionHead's kicker is an inline-block (so Reveal's clip has a box to clip) in blue-600 on the
   light sections: the deeper cobalt that holds 8.5:1 on the gray-100 page. On the dark sections it
   lifts to blue-300 (7.2:1 on #17181d). Weight, size, leading, tracking and case come from the role. */
.lp-kicker { display: inline-block; color: var(--blue-600); }
[data-on-dark] .lp-kicker { color: var(--blue-300); }
/* The "[ 01 ]" marker inside the kicker, the landing's descendant of the old DS Eyebrow index:
   blue-500 on light, blue-300 on dark, in the kicker's own face and tracking.
   FINDING: the landing has three kicker treatments side by side. SectionHead (Landing.jsx ~772)
   sets "[ 01 ] KICKER" as one run of 500 12px blue-600 (the index is not distinguished); the
   Primitives / Strategy abbreviations (~1533, ~1976) set "[ ABC ]" in --text-2xs 600
   --tracking-label blue-600 (the old DS Eyebrow's measurements in the new sans); and the stage
   captions (~2358) set them 500 12px 0.01em blue-300. This system gives the index the DS accent
   (blue-500) as SPEC §5.2 asks; a consumer who wants SectionHead's single blue-600 run sets
   .lp-kicker-index { color: inherit }. */
.lp-kicker-index { color: var(--blue-500); }
[data-on-dark] .lp-kicker-index { color: var(--blue-300); }

/* ── Section head ───────────────────────────────────────────────────────────── */
/* The head is 720px wide (SectionHead maxWidth = 720); wider heads (the Demo section passes
   "none") let a title run past its lead, the lead itself staying within 720px when centred. */
.lp-section-head { max-width: 720px; } /* literal: SectionHead maxWidth default; no --container-* token is 720 (prose is 660) */
.lp-section-head--wide { max-width: none; }
.lp-section-head--center { margin-inline: auto; text-align: center; }

/* The title: 20px under the kicker, balanced across its lines; gray-900 on light, gray-100 on
   dark. Its measurements are the .lp-section-title role. */
.lp-section-title { margin: 0; color: var(--gray-900); text-wrap: balance; }
.lp-section-head .lp-section-title { margin: 20px 0 0; }
[data-on-dark] .lp-section-title { color: var(--gray-100); }

/* A keyword in a title (titleNodes(), accentSegments(): content.js's `accent` words, or a { hl }
   segment): the accent — blue-500 on light, blue-300 on dark. band.css re-points it at the band's
   own --band-hl inside .lp-band-title. */
.lp-hl { color: var(--blue-500); }
[data-on-dark] .lp-hl { color: var(--blue-300); }

/* The lead: 18px under the title; several paragraphs stack 10px apart (SectionHead's sub array).
   Light sections set it in the muted text tone (gray-600, 5.1:1 on the page), dark ones in
   gray-400 (8.2:1 on #17181d). Its measurements are the .lp-lead role. */
.lp-section-head__lead { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.lp-section-head__lead > * { margin: 0; }
.lp-lead { color: var(--text-muted); text-wrap: pretty; }
[data-on-dark] .lp-lead { color: var(--gray-400); }
/* Centred heads keep the lead within the 720px measure even when the head itself is wider. */
.lp-section-head--center .lp-lead { max-width: 720px; margin-inline: auto; }
/* The hero's lead (Hero() in Landing.jsx): the same lead a shade darker, gray-700 (8.4:1), with
   the headline's 580px measure.
   FINDING: the hero's lead is gray-700 while every SectionHead lead on the same gray-100 ground
   is --text-muted (gray-600); both pass AA, but they are two tones for one role. Ported as is. */
.lp-hero .lp-lead { color: var(--gray-700); max-width: 580px; }
/* ── components/landing/band.css ── */
/* StrikeSimple design system — landing surface — bands.
   What this is: the full-width centred band (.lp-band: Our Mission, Contact) and its four themes
   (--dark, --light, --lavender, --cobalt), the hairlines that draw out from the centre as it comes
   into view, and its inner pieces: kicker, title, lead (with its emphasised run), action row.
   Where it came from: landing.css "── Bands (Band in Landing.jsx: Our Mission, Contact)" (lines
   384–547), the v3 page's mission band; the mobile stacking of the action row from the footer's
   600px block (line 839); the kicker / title / lead markup from Band() in Landing.jsx (~1640).
   What changed: the band still exposes the same two sets of custom properties landing.css did —
   --band-* for its own colours and --rm-* for the trading life cycle inside it (TradingLifecycle,
   .lp-roadmap* — NOT ported here; the roadmap is documented as a pattern, and any roadmap CSS a
   consumer brings reads these --rm-* names unchanged — but BOTH of the cobalt theme's overrides of
   the popover's --rm-* values are, the desktop one and the 860px one, because they are theme, not
   roadmap structure). What differs is where the values come from:
   each theme maps its properties from its own token set, landing.band.<theme>.band.* and
   landing.band.<theme>.roadmap.*, emitted as --lp-band-<theme>-* and --lp-rm-<theme>-* (the
   lavender set aliases the light one wherever landing.css shared the values, so the lavender class
   maps every property from the lavender names and stays correct if a lavender token ever diverges).
   The dark band's cobalt glow reads --lp-glow-cobalt; the hairline --lp-hairline-dark; the frosted
   secondary pill on light grounds --lp-frost / --lp-frost-border; the padding
   landing.component.band.padding. Title and lead keep their landing.css class names (.lp-band-title,
   .lp-band-sub) and set the same measurements the .lp-band-title-role / .lp-band-lead roles emit
   (600 clamp(32px, 3.8vw, 52px)/1.05 -0.02em; 300 clamp(16px, 1.3vw, 19px)/1.5 0.01em). Behaviour
   is landing.css's: the 1.3s hairline draw with its 0.1s delay, the .is-in trigger, the
   reduced-motion stop. */

/* ── The band and its default (dark) palette ───────────────────────────────── */
/* The v3 page's mission band: centred type (over the dark wire grid, unless the band drops it),
   hairlines top and bottom that draw out from the centre as it comes into view (.is-in). Its
   colours — and the trading life cycle's inside it — are variables, so a theme class swaps the
   palette: dark (default), --light, --lavender (the v3 page's light band), --cobalt. */
.lp-band {
  --band-bg: var(--lp-band-dark-bg);
  --band-kicker: var(--lp-band-dark-kicker);
  --band-title: var(--lp-band-dark-title);
  --band-text: var(--lp-band-dark-text);
  --band-em: var(--lp-band-dark-em);
  --band-hl: var(--lp-band-dark-hl); /* the title's keyword */
  --band-hairline: var(--lp-band-dark-hairline);
  --rm-line: var(--lp-rm-dark-line);
  --rm-progress-a: var(--lp-rm-dark-progress-a);
  --rm-progress-b: var(--lp-rm-dark-progress-b);
  --rm-progress-glow: var(--lp-rm-dark-progress-glow);
  --rm-dot: var(--lp-rm-dark-dot);
  --rm-dot-on: var(--lp-rm-dark-dot-on);
  --rm-halo: var(--lp-rm-dark-halo);
  --rm-halo-on: var(--lp-rm-dark-halo-on);
  --rm-glow: var(--lp-rm-dark-glow);
  --rm-glow-on: var(--lp-rm-dark-glow-on);
  --rm-name: var(--lp-rm-dark-name);
  --rm-pop-bg: var(--lp-rm-dark-pop-bg);
  --rm-pop-border: var(--lp-rm-dark-pop-border);
  --rm-pop-shadow: var(--lp-rm-dark-pop-shadow);
  --rm-pop-title: var(--lp-rm-dark-pop-title);
  --rm-pop-text: var(--lp-rm-dark-pop-text);
  --rm-tag-text: var(--lp-rm-dark-tag-text);
  --rm-tag-bg: var(--lp-rm-dark-tag-bg);
  --rm-tile: var(--lp-rm-dark-tile);
  --rm-soon-text: var(--lp-rm-dark-soon-text);
  --rm-soon-mark: var(--lp-rm-dark-soon-mark);
  --rm-soon-hatch: var(--lp-rm-dark-soon-hatch);
  --rm-soon-glow: var(--lp-rm-dark-soon-glow);
  --rm-caption: var(--lp-rm-dark-caption);
  --rm-focus: var(--lp-rm-dark-focus);
  --rm-flow: var(--lp-rm-dark-flow);              /* the » between steps */
  --rm-feature: var(--lp-rm-dark-feature);        /* a featured preview: gold (its ring) */
  --rm-feature-ink: var(--lp-rm-dark-feature-ink); /* … and its text */
  --rm-feature-bg: var(--lp-rm-dark-feature-bg);
  --rm-feature-glow: var(--lp-rm-dark-feature-glow);
  position: relative; overflow: hidden;
  background: var(--band-bg);
  padding: var(--lp-band-padding);
  text-align: center;
}
/* --dark: the default palette with a soft cobalt glow rising from below the centre. The glow's far
   stop is the same cobalt at zero alpha (not `transparent`), as landing.css wrote it, so the fade
   keeps its hue in every browser's gradient interpolation. */
.lp-band--dark {
  --band-bg: radial-gradient(50% 60% at 50% 72%, var(--lp-glow-cobalt) 0%, rgba(42, 43, 245, 0) 70%), var(--lp-bg-dark); /* literal rgba(42, 43, 245, 0): the glow's transparent end stop (landing.css) */
}

/* ── --light: white ground, cobalt line work ───────────────────────────────── */
/* FINDING: the light band's hairline is rgba(20, 20, 22, 0.1) — a neutral ink — while every other
   translucent ink on the light grounds (the lavender hairline, the popover border, the frosted
   pill's border, the rail's light line) is the blue-cast rgba(20, 20, 60, …). Kept as written in
   landing.css (landing.band.light.band.hairline carries the same note). */
.lp-band--light {
  --band-bg: var(--lp-band-light-bg);
  --band-kicker: var(--lp-band-light-kicker);
  --band-title: var(--lp-band-light-title);
  --band-text: var(--lp-band-light-text);
  --band-em: var(--lp-band-light-em);
  --band-hl: var(--lp-band-light-hl);
  --band-hairline: var(--lp-band-light-hairline);
  --rm-line: var(--lp-rm-light-line);
  --rm-progress-a: var(--lp-rm-light-progress-a);
  --rm-progress-b: var(--lp-rm-light-progress-b);
  --rm-progress-glow: var(--lp-rm-light-progress-glow);
  --rm-dot: var(--lp-rm-light-dot);
  --rm-dot-on: var(--lp-rm-light-dot-on);
  --rm-halo: var(--lp-rm-light-halo);
  --rm-halo-on: var(--lp-rm-light-halo-on);
  --rm-glow: var(--lp-rm-light-glow);
  --rm-glow-on: var(--lp-rm-light-glow-on);
  --rm-name: var(--lp-rm-light-name);
  --rm-pop-bg: var(--lp-rm-light-pop-bg);
  --rm-pop-border: var(--lp-rm-light-pop-border);
  --rm-pop-shadow: var(--lp-rm-light-pop-shadow);
  --rm-pop-title: var(--lp-rm-light-pop-title);
  --rm-pop-text: var(--lp-rm-light-pop-text);
  --rm-tag-text: var(--lp-rm-light-tag-text);
  --rm-tag-bg: var(--lp-rm-light-tag-bg);
  --rm-tile: var(--lp-rm-light-tile);
  --rm-soon-text: var(--lp-rm-light-soon-text);
  --rm-soon-mark: var(--lp-rm-light-soon-mark);
  --rm-soon-hatch: var(--lp-rm-light-soon-hatch);
  --rm-soon-glow: var(--lp-rm-light-soon-glow);
  --rm-caption: var(--lp-rm-light-caption);
  --rm-focus: var(--lp-rm-light-focus);
  --rm-flow: var(--lp-rm-light-flow);
  --rm-feature: var(--lp-rm-light-feature);
  --rm-feature-ink: var(--lp-rm-light-feature-ink); /* amber-500 is too light for small text on white and lavender (3.7:1); the ink is a darker gold, 8.5:1 (landing.css) */
  --rm-feature-bg: var(--lp-rm-light-feature-bg);
  --rm-feature-glow: var(--lp-rm-light-feature-glow);
}

/* ── --lavender: the v3 page's light band — a lavender wash with a brighter glow, the light
   palette otherwise (the lavender tokens alias the light ones wherever the values are shared). ── */
.lp-band--lavender {
  --band-bg: var(--lp-band-lavender-bg);
  --band-kicker: var(--lp-band-lavender-kicker);
  --band-title: var(--lp-band-lavender-title);
  --band-text: var(--lp-band-lavender-text);
  --band-em: var(--lp-band-lavender-em);
  --band-hl: var(--lp-band-lavender-hl);
  --band-hairline: var(--lp-band-lavender-hairline);
  --rm-line: var(--lp-rm-lavender-line);
  --rm-progress-a: var(--lp-rm-lavender-progress-a);
  --rm-progress-b: var(--lp-rm-lavender-progress-b);
  --rm-progress-glow: var(--lp-rm-lavender-progress-glow);
  --rm-dot: var(--lp-rm-lavender-dot);
  --rm-dot-on: var(--lp-rm-lavender-dot-on);
  --rm-halo: var(--lp-rm-lavender-halo);
  --rm-halo-on: var(--lp-rm-lavender-halo-on);
  --rm-glow: var(--lp-rm-lavender-glow);
  --rm-glow-on: var(--lp-rm-lavender-glow-on);
  --rm-name: var(--lp-rm-lavender-name);
  --rm-pop-bg: var(--lp-rm-lavender-pop-bg);
  --rm-pop-border: var(--lp-rm-lavender-pop-border);
  --rm-pop-shadow: var(--lp-rm-lavender-pop-shadow);
  --rm-pop-title: var(--lp-rm-lavender-pop-title);
  --rm-pop-text: var(--lp-rm-lavender-pop-text);
  --rm-tag-text: var(--lp-rm-lavender-tag-text);
  --rm-tag-bg: var(--lp-rm-lavender-tag-bg);
  --rm-tile: var(--lp-rm-lavender-tile);
  --rm-soon-text: var(--lp-rm-lavender-soon-text);
  --rm-soon-mark: var(--lp-rm-lavender-soon-mark);
  --rm-soon-hatch: var(--lp-rm-lavender-soon-hatch);
  --rm-soon-glow: var(--lp-rm-lavender-soon-glow);
  --rm-caption: var(--lp-rm-lavender-caption);
  --rm-focus: var(--lp-rm-lavender-focus);
  --rm-flow: var(--lp-rm-lavender-flow);
  --rm-feature: var(--lp-rm-lavender-feature);
  --rm-feature-ink: var(--lp-rm-lavender-feature-ink);
  --rm-feature-bg: var(--lp-rm-lavender-feature-bg);
  --rm-feature-glow: var(--lp-rm-lavender-feature-glow);
}

/* ── --cobalt: the band itself in cobalt, white line work, a white popover ─── */
.lp-band--cobalt {
  --band-bg: var(--lp-band-cobalt-bg);
  --band-kicker: var(--lp-band-cobalt-kicker);
  --band-title: var(--lp-band-cobalt-title);
  --band-text: var(--lp-band-cobalt-text);
  --band-em: var(--lp-band-cobalt-em);
  --band-hl: var(--lp-band-cobalt-hl);
  --band-hairline: var(--lp-band-cobalt-hairline);
  --rm-line: var(--lp-rm-cobalt-line);
  --rm-progress-a: var(--lp-rm-cobalt-progress-a);
  --rm-progress-b: var(--lp-rm-cobalt-progress-b);
  --rm-progress-glow: var(--lp-rm-cobalt-progress-glow);
  --rm-dot: var(--lp-rm-cobalt-dot);
  --rm-dot-on: var(--lp-rm-cobalt-dot-on);
  --rm-halo: var(--lp-rm-cobalt-halo);
  --rm-halo-on: var(--lp-rm-cobalt-halo-on);
  --rm-glow: var(--lp-rm-cobalt-glow);
  --rm-glow-on: var(--lp-rm-cobalt-glow-on);
  --rm-name: var(--lp-rm-cobalt-name);
  --rm-pop-bg: var(--lp-rm-cobalt-pop-bg);
  --rm-pop-border: var(--lp-rm-cobalt-pop-border);
  --rm-pop-shadow: var(--lp-rm-cobalt-pop-shadow);
  --rm-pop-title: var(--lp-rm-cobalt-pop-title);
  --rm-pop-text: var(--lp-rm-cobalt-pop-text);
  --rm-tag-text: var(--lp-rm-cobalt-tag-text);
  --rm-tag-bg: var(--lp-rm-cobalt-tag-bg);
  --rm-tile: var(--lp-rm-cobalt-tile);
  --rm-soon-text: var(--lp-rm-cobalt-soon-text);
  --rm-soon-mark: var(--lp-rm-cobalt-soon-mark);
  --rm-soon-hatch: var(--lp-rm-cobalt-soon-hatch);
  --rm-soon-glow: var(--lp-rm-cobalt-soon-glow);
  --rm-caption: var(--lp-rm-cobalt-caption);
  --rm-focus: var(--lp-rm-cobalt-focus);
  --rm-flow: var(--lp-rm-cobalt-flow);
  --rm-feature: var(--lp-rm-cobalt-feature);
  --rm-feature-ink: var(--lp-rm-cobalt-feature-ink); /* paler than the ring, for AA on the pill under the band's glow (landing.css) */
  --rm-feature-bg: var(--lp-rm-cobalt-feature-bg);
  --rm-feature-glow: var(--lp-rm-cobalt-feature-glow);
}
/* cobalt's popover is white: its gold is the light themes' (landing.css) — so the three values are
   the light theme's tokens, not literals. */
.lp-band--cobalt .lp-roadmap-pop {
  --rm-feature: var(--lp-rm-light-feature);
  --rm-feature-ink: var(--lp-rm-light-feature-ink);
  --rm-feature-glow: var(--lp-rm-light-feature-glow);
}
/* Phones and tablets (--bp-mobile, 860px): the roadmap is a vertical list and each step's detail
   sits inline on the cobalt ground instead of in the white popover (landing.css, the roadmap's
   860px block: "inline on the cobalt ground rather than in the white popover"), so the white
   popover's blue-on-white inks would vanish. landing.css re-overrides the same selector: the tag
   text, the "soon" note and its mark go white; the tag fill, the tile, the hatch and the glow
   become translucent whites (landing.band.cobalt.inline.*, the four values that exist only in
   this block); the caption takes the headline keyword's pale lavender (--lp-band-cobalt-hl); and
   the gold returns from the popover's amber to this theme's own ring, ink and glow. */
@media (max-width: 860px) {
  .lp-band--cobalt .lp-roadmap-pop {
    --rm-tag-text: var(--white);
    --rm-tag-bg: var(--lp-rm-cobalt-inline-tag-bg);
    --rm-tile: var(--lp-rm-cobalt-inline-tile);
    --rm-soon-text: var(--white);
    --rm-soon-mark: var(--white);
    --rm-soon-hatch: var(--lp-rm-cobalt-inline-soon-hatch);
    --rm-soon-glow: var(--lp-rm-cobalt-inline-soon-glow);
    --rm-caption: var(--lp-band-cobalt-hl);
    --rm-feature: var(--lp-rm-cobalt-feature);
    --rm-feature-ink: var(--lp-rm-cobalt-feature-ink);
    --rm-feature-glow: var(--lp-rm-cobalt-feature-glow);
  }
}

/* ── Hairlines ──────────────────────────────────────────────────────────────── */
/* A 1px line at the top and the bottom in the theme's hairline colour, scaled out from the centre
   over 1.3s (after a 0.1s beat) once the band is in view (.is-in, set by Band() in Landing.jsx). */
.lp-band::before, .lp-band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 1;
  background: var(--band-hairline);
  transform: scaleX(0); transition: transform 1.3s var(--ease-out) 0.1s;
}
.lp-band::before { top: 0; }
.lp-band::after { bottom: 0; }
.lp-band.is-in::before, .lp-band.is-in::after { transform: scaleX(1); }
/* The band directly above the footer drops its bottom line: the footer's top border draws it
   (landing.css: #contact.lp-band::after). The id rule is kept for the landing; the modifier is this
   system's name for the same thing. */
#contact.lp-band::after, .lp-band--before-footer::after { display: none; }

/* ── Inner pieces ───────────────────────────────────────────────────────────── */
/* The content sits over the hairlines and the wire grid, within 1080px. */
.lp-band-inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; } /* literal: landing.css; the band's own measure, no --container-* token is 1080 */
/* The kicker "[ 04 ] OUR MISSION": the .lp-kicker role's measurements in the theme's kicker colour. */
.lp-band-kicker {
  display: inline-block;
  font: var(--weight-medium) 12px/var(--leading-snug) var(--lp-font); /* literal 12px: the kicker size (.lp-kicker role) */
  letter-spacing: 0.01em; /* literal: the kicker's tracking, no --tracking-* token is 0.01em */
  text-transform: uppercase;
  color: var(--band-kicker);
}
/* The title: 24px under the kicker, within 900px, balanced; the .lp-band-title-role measurements in
   the theme's title colour, its keywords (.lp-hl, or Band()'s inline var(--band-hl)) in --band-hl. */
.lp-band-title {
  max-width: 900px; margin: 24px auto 0; /* literal 900px: landing.css; the title's measure */
  font: var(--weight-semibold) clamp(32px, 3.8vw, 52px)/var(--leading-tight) var(--lp-font); letter-spacing: var(--tracking-display);
  color: var(--band-title); text-wrap: balance;
}
.lp-band-title .lp-hl { color: var(--band-hl); }
/* The lead: 24px under the title, within 620px; the .lp-band-lead measurements in the theme's text
   colour. Weight 300 is a literal: tokens/fonts.css has no light weight (see base.css FINDING on
   --weight-light being 400). */
.lp-band-sub {
  max-width: 620px; margin: 24px auto 0; /* literal 620px: landing.css; the lead's measure */
  font: 300 clamp(16px, 1.3vw, 19px)/var(--leading-normal) var(--lp-font); /* literal 300: no --weight-* token is 300 */
  letter-spacing: 0.01em; /* literal: the lead's tracking */
  color: var(--band-text); text-wrap: pretty;
}
/* An emphasised run in the lead (OurMission()'s <em>, mission.emphasis in content.js): upright,
   in the theme's emphasis colour rather than italic. */
.lp-band-sub em { font-style: normal; color: var(--band-em); }
/* The pills under the lead (Contact): centred, wrapping, 8px / 12px apart, 32px down. */
.lp-band-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 32px; }
/* On the light grounds the secondary pill is the hero's frosted white, not the dark fill. */
.lp-band--light .lp-btn--secondary, .lp-band--lavender .lp-btn--secondary {
  background: var(--lp-frost); color: var(--gray-900); border-color: var(--lp-frost-border);
}
/* Phones (--bp-phone, 600px): the pills stack full-width (landing.css keeps this rule in the
   footer's 600px block, line 839; it belongs to the band). */
@media (max-width: 600px) {
  .lp-band-actions { flex-direction: column; align-items: stretch; }
}
/* Reduced motion: the hairlines are simply there (landing.css lists them with the roadmap's). */
@media (prefers-reduced-motion: reduce) {
  .lp-band::before, .lp-band::after { transition: none; }
}
/* ── components/landing/footer.css ── */
/* StrikeSimple design system — landing surface — footer.
   What this is: the site footer (.lp-footer*): the dark ground with its hairline top, the five
   column grid (brand, Explore, Get started, Community, Contact), the column headings and links, the
   greyed "Coming soon" items with their hover tip, and the bottom row with the copyright and legal
   links — through the four breakpoints that fold the grid down to one column.
   Where it came from: landing.css "── Footer (Footer in Landing.jsx), as on the v3 page" (lines
   765–838). README.md "Editing content" → Footer: logo + blurb, then Explore, Get started,
   Community and Contact columns, then the copyright with the legal links beside it; items marked
   `soon` are greyed and say "Coming soon" on hover.
   What changed: the literals are tokens — the ground --lp-bg-dark, the hairlines --lp-hairline-dark
   (the rgba(255, 255, 255, 0.09) of the top border and the bottom row's rule), the padding
   landing.component.footer.padding, the 3px link radius --radius-sm, the pill radius --lp-pill,
   the weights --weight-*, the leadings --leading-*. The type matches the roles in
   dist/css/landing.roles.css: the column heading is .lp-footer-heading (500 12px/1.2 0.01em
   uppercase), the links .lp-footer-link (400 14px/1.5), the plain text .lp-body (400 14px/1.5).
   The breakpoints are literal media queries — CSS cannot read a custom property there — and each
   names the --bp-* token it mirrors. The band's phone rule that landing.css kept in the 600px block
   here (line 839) moved to band.css. Behaviour is otherwise landing.css's, including the two
   FINDINGs noted inline. */

/* The footer: the dark section ground under a hairline, 64px / 40px / 40px of padding, gray-400 text. */
.lp-footer {
  background: var(--lp-bg-dark);
  border-top: 1px solid var(--lp-hairline-dark);
  padding: var(--lp-footer-padding);
  color: var(--gray-400);
}
/* brand, Explore, Get started, Community, Contact (wider: the email is written out). */
.lp-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: 40px 32px;
}
/* The brand column: the logo over the blurb (the hero subhead's first sentence, content.js). */
.lp-footer-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.lp-footer-brand a { display: inline-flex; border-radius: 4px; text-decoration: none; } /* literal 4px: landing.css; the logo link's focus-ring corner, between --radius-sm (3) and --radius-md (5) */
.lp-footer-brand p {
  margin: 0; max-width: 300px; /* literal 300px: the blurb's measure */
  font: 300 14px/var(--leading-normal) var(--lp-font); /* literal 300 14px: the lead weight (no 300 weight token) at the footer's body size */
  letter-spacing: 0.01em; /* literal: the page's lead tracking */
  color: var(--gray-500);
}
/* A column heading: the .lp-footer-heading role (12px medium capitals) in gray-500 (5.0:1 on the ground). */
.lp-footer-col h2 {
  margin: 0 0 14px;
  font: var(--weight-medium) 12px/var(--leading-snug) var(--lp-font); letter-spacing: 0.01em; text-transform: uppercase; /* literal 12px / 0.01em: the heading role's size and tracking */
  color: var(--gray-500);
}
.lp-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* A link: the .lp-footer-link role in gray-400, brightening to gray-100 on hover; a 3px corner for
   its focus ring; an optional icon 6px before the text.
   FINDING: landing.css leaves this hover (and .lp-footer-legal a:hover, .lp-footer-soon:hover)
   outside @media (hover: hover), unlike the pills, so on a touch screen a tapped link stays bright
   until something else is tapped. Ported as written. */
.lp-footer-col a {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--weight-regular) 14px/var(--leading-normal) var(--lp-font); /* literal 14px: the link role's size; the --text-* scale has no 14px step */
  color: var(--gray-400); text-decoration: none; border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease-out);
}
.lp-footer-col a:hover { color: var(--gray-100); }
/* Plain text in a column (the location under Contact): the .lp-body role in gray-400. */
.lp-footer-text { display: inline-flex; align-items: center; gap: 6px; font: var(--weight-regular) 14px/var(--leading-normal) var(--lp-font); color: var(--gray-400); }
.lp-footer-col svg { flex: none; margin-right: 2px; color: var(--gray-500); }
/* The Contact column's email is written out: it may break anywhere rather than overflow. */
.lp-footer-col--contact a { gap: 6px; overflow-wrap: anywhere; }
/* "Coming soon": greyed, not a link; says so beside it on hover / keyboard focus (data-tip holds
   the words, content.js footer.soon).
   FINDING: gray-600 on #17181d is 3.0:1 — under AA (4.5) for 14px text. It is deliberately dimmed
   to read as disabled, but it is still a label a visitor reads; gray-500 (5.0:1) would pass. Kept. */
.lp-footer-soon {
  position: relative; display: inline-flex; align-items: center;
  font: var(--weight-regular) 14px/var(--leading-normal) var(--lp-font); color: var(--gray-600); cursor: default; border-radius: var(--radius-sm);
}
.lp-footer-soon::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 8px); top: 50%;
  padding: 3px 8px; border-radius: var(--lp-pill);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); /* literal: landing.css; the tip's own frosted fill and edge — near --lp-hairline-dark (0.09) but not it, kept exact */
  font: var(--weight-regular) 11px/1.3 var(--lp-font); letter-spacing: 0.01em; white-space: nowrap; color: var(--gray-300); /* literal 11px/1.3: the tip's size (the rem --text-2xs is the same 11px at the default root, but the page sets pixels) */
  opacity: 0; transform: translate(-4px, -50%); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lp-footer-soon:hover::after, .lp-footer-soon:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
/* Keyboard focus on any footer link: the dark sections' blue-400 ring, 3px off. */
.lp-footer a:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }
/* The bottom row: the copyright and the legal links over a hairline, 12px in gray-500. */
.lp-footer-bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--lp-hairline-dark);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font: var(--weight-regular) 12px/var(--leading-snug) var(--lp-font); letter-spacing: 0.01em; /* literal 12px / 0.01em: the meta size and tracking */
  color: var(--gray-500);
}
.lp-footer-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lp-footer-legal a { color: var(--gray-500); text-decoration: none; border-radius: var(--radius-sm); transition: color var(--dur-base) var(--ease-out); }
.lp-footer-legal a:hover { color: var(--gray-100); }

/* ── Breakpoints (literal queries; the --bp-* tokens are informational) ────── */
/* --bp-footer-4col (1280px): the brand spans the top, four columns under it. */
@media (max-width: 1280px) {
  .lp-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); }
  .lp-footer-brand { grid-column: 1 / -1; }
}
/* --bp-footer-2col (1100px): two columns. */
@media (max-width: 1100px) {
  .lp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* --bp-mobile (860px): the section's phone inset (landing.component.section.padding-mobile is
   48px 16px; the footer keeps 32px at the foot). */
@media (max-width: 860px) {
  .lp-footer { padding: 48px 16px 32px; } /* literal: landing.css's mobile footer inset, no token (the desktop inset is --lp-footer-padding) */
}
/* --bp-phone (600px): one column, 32px apart. */
@media (max-width: 600px) {
  .lp-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
/* ── components/landing/rail.css ── */
/* StrikeSimple design system — landing surface — the rail.
   What this is: the desktop left navigation (.lp-rail*): a slim 72px glass column of section
   glyphs under the brand mark that widens to 244px on hover or keyboard focus to show the wordmark
   and the labels; its two tones (light / dark) that follow the section behind each part; the
   sections' allowance for it (.lp-under-rail); and the cells and labels inside it.
   Where it came from: landing.css "── Rail (Rail in Landing.jsx)" (lines 316–382) for the rail,
   its glass, the tone variables, the widen rules and the reduced-motion stop; RailCell() in
   Landing.jsx (~184–228) for the cell and the label, which the landing sets inline (the label:
   500 12px/1.2, 0.06em, uppercase, --rail-muted, or --rail-fg while active or hovered; the cell:
   the tint, a --rail-line top rule, a 2px --rail-accent left rule while active, 22px 22px 0 20px
   of padding, up to 96px tall). README.md "Editing content" → Rail: liquid glass, a frosted pane
   the sections run under; each part re-tints for the section behind it (useRailTones sets
   data-tone); Escape folds it ([data-collapsed]); touch screens get the top bar + drawer instead.
   What changed: the widths read landing.component.rail.* (--lp-rail-width, --lp-rail-width-open,
   --lp-rail-logo-height); the gray and blue inks inside the tone sets are tokens. The glass itself
   — the pane's tint, its edge, its sheen, the two tone sets' translucent whites and inks — stays
   literal: those alphas exist nowhere else on the page and SPEC §4.2 gives them no token; each is
   marked. The cell and label rules are new as CSS (they were inline); Landing.jsx's inline styles
   still win over them, so the landing could load this file unchanged. The behaviour is
   landing.css's: hover-widen only with a real pointer, focus-widen unless folded, the near-solid
   fallback without backdrop-filter, the reduced-motion stop. */

/* ── The pane ───────────────────────────────────────────────────────────────── */
/* Desktop: a slim column of the section glyphs (dots) under the brand mark. Hovering it — or
   moving keyboard focus into it (:focus-visible, so a mouse click doesn't leave it open) — widens
   it over the page to show the wordmark and each label. The mobile drawer reuses RailCell, so the
   label rules are scoped to the rail. The rail is position: fixed, top/left/bottom 0, a flex
   column (Rail() in Landing.jsx sets that inline). */
.lp-rail { width: var(--lp-rail-width); overflow: clip; transition: width 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
/* Liquid glass: a frosted pane over the page — the sections run under it (.lp-under-rail), so the
   blur and tint take on whatever passes behind. Each part of the rail (the logo, every cell) gets
   data-tone="light" | "dark" from the section behind it (useRailTones in Landing.jsx) and switches
   its tint and ink to match, so it reads on the light hero and the dark sections alike. */
.lp-rail {
  background: rgba(255, 255, 255, 0.04); /* literal: the pane's base tint (landing.css) */
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  border-right: 1px solid rgba(255, 255, 255, 0.22); /* literal: the glass edge */
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.14), 1px 0 0 rgba(10, 10, 30, 0.08); /* literal: the inner highlight and the outer shadow line */
}
/* the glass's sheen: brighter at the top, a faint lift at the foot */
.lp-rail::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.06)); /* literal: the sheen's stops */
}
/* The two tones. On a light section: a half-white tint (brighter where a cell is on), a faint
   blue-cast line, near-black ink, cobalt accent. On a dark section: the dark ground (#17181d,
   --lp-bg-dark) at 40%, a white-eighth tint where on, white hairlines, near-white ink, lavender. */
.lp-rail [data-tone="light"] {
  --rail-tint: rgba(255, 255, 255, 0.5); --rail-tint-on: rgba(255, 255, 255, 0.72); /* literal: the light tints (0.5 is not --lp-frost's 0.55) */
  --rail-line: rgba(20, 20, 60, 0.08); /* literal: the light cell rule, a softer step of --lp-hairline-light (0.12) */
  --rail-fg: var(--gray-900); --rail-muted: var(--gray-600);
  --rail-dot: var(--gray-500); --rail-dot-on: var(--gray-400); --rail-dot-off: var(--gray-300);
  --rail-accent: var(--blue-500);
}
.lp-rail [data-tone="dark"] {
  --rail-tint: rgba(23, 24, 29, 0.4); --rail-tint-on: rgba(255, 255, 255, 0.08); /* literal: --lp-bg-dark (#17181d = 23, 24, 29) at 40%, and the on-tint; CSS has no token-with-alpha here short of color-mix(), which landing.css does not use */
  --rail-line: rgba(255, 255, 255, 0.08); /* literal: the dark cell rule, a step under --lp-hairline-dark (0.09) */
  --rail-fg: var(--gray-50); --rail-muted: var(--gray-400);
  --rail-dot: var(--gray-300); --rail-dot-on: var(--gray-500); --rail-dot-off: var(--gray-600);
  --rail-accent: var(--blue-300);
}
/* The logo button's tint follows its tone; the wordmark for the other tone is hidden (both are
   rendered, one for light and one for dark, so the swap needs no re-render). */
.lp-rail-logo { background: var(--rail-tint); transition: background 0.45s var(--ease-out); }
.lp-rail-logo[data-tone="dark"] .lp-rail-wordmark--on-light,
.lp-rail-logo:not([data-tone="dark"]) .lp-rail-wordmark--on-dark { visibility: hidden; }
/* without backdrop blur, a near-solid pane (the tints alone would be too see-through) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-rail [data-tone="light"] { --rail-tint: rgba(255, 255, 255, 0.94); } /* literal: the no-blur fallback tints */
  .lp-rail [data-tone="dark"] { --rail-tint: rgba(23, 24, 29, 0.94); }
}
/* Desktop: the sections and footer run under the rail, their content starting beside it — a
   transparent left border the rail's width, which their background paints under. */
.lp-under-rail > section, footer.lp-under-rail { border-left: var(--lp-rail-width) solid transparent; }

/* ── Logo and labels ────────────────────────────────────────────────────────── */
/* The labels are hidden while the rail is slim; they fade in a beat after it widens. */
.lp-rail .lp-rail-label { white-space: nowrap; opacity: 0; transition: opacity 0.2s var(--ease-out); }
/* The logo cell: 76px tall; the mark and the two wordmarks sit 22px in, vertically centred, one
   over the other (the mark shows slim, the wordmark wide). */
.lp-rail-logo { position: relative; height: var(--lp-rail-logo-height); }
.lp-rail-logo > span { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); display: flex; transition: opacity 0.25s var(--ease-out); }
.lp-rail-wordmark { opacity: 0; }
/* Widened: hovered with a real pointer (touch screens get the top bar instead — Rail in
   Landing.jsx), or keyboard focus inside it unless Escape folded it ([data-collapsed]). The two
   triggers are separate rules so a browser without :has() still widens on hover. */
@media (hover: hover) and (pointer: fine) {
  .lp-rail:hover { width: var(--lp-rail-width-open); box-shadow: var(--shadow-lg); }
  .lp-rail:hover .lp-rail-label { opacity: 1; transition-delay: 0.1s; }
  .lp-rail:hover .lp-rail-wordmark { opacity: 1; }
  .lp-rail:hover .lp-rail-mark { opacity: 0; }
}
.lp-rail:not([data-collapsed]):has(:focus-visible) { width: var(--lp-rail-width-open); box-shadow: var(--shadow-lg); }
.lp-rail:not([data-collapsed]):has(:focus-visible) .lp-rail-label { opacity: 1; transition-delay: 0.1s; }
.lp-rail:not([data-collapsed]):has(:focus-visible) .lp-rail-wordmark { opacity: 1; }
.lp-rail:not([data-collapsed]):has(:focus-visible) .lp-rail-mark { opacity: 0; }

/* ── Cells (RailCell in Landing.jsx, desktop) ───────────────────────────────── */
/* A cell is a <button class="lp-rail-cell" data-tone="…"> holding a glyph and its label (scoped to
   .lp-rail, as the label rules are, because the mobile drawer reuses RailCell with its own look): it grows
   to share the height under the logo (up to 96px each, less on short windows so every cell fits —
   --rail-count is how many there are; CONTENT.nav.sections has six), a hairline over it in the
   tone's line colour, a 2px left rule in the tone's accent while its section is current
   (.is-active here; Landing.jsx passes `active` and styles it inline), the tone's tint behind it
   and the brighter on-tint while current or hovered. 20px + the 2px left border puts the 28px glyph
   dead centre in the 72px rail (RailCell).
   FINDING: RailCell's entrance transition hard-codes `cubic-bezier(0.22, 1, 0.36, 1)` as a string
   (`const ease`) instead of var(--ease-out), which is the same curve; the same values, two sources. */
.lp-rail .lp-rail-cell {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  min-height: min(96px, calc((100vh - var(--lp-rail-logo-height)) / var(--rail-count, 6))); /* literal 96px: a cell's tallest (RailCell) */
  padding: 22px 22px 0 20px; /* literal: RailCell's inset */
  margin: 0; text-align: left; cursor: pointer; border: none;
  border-top: 1px solid var(--rail-line, var(--border));
  border-left: 2px solid transparent;
  background: var(--rail-tint, transparent);
  color: inherit; font: inherit;
  transition: background 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}
.lp-rail .lp-rail-cell.is-active, .lp-rail .lp-rail-cell[aria-current] { border-left-color: var(--rail-accent, var(--blue-500)); background: var(--rail-tint-on, var(--gray-50)); }
@media (hover: hover) {
  .lp-rail .lp-rail-cell:hover { background: var(--rail-tint-on, var(--gray-50)); }
}
/* The label (RailCell's inline span): the .lp-nav-label role's measurements — 12px medium capitals
   tracked 0.06em — in the tone's muted ink, the full ink while its section is current or hovered. */
.lp-rail .lp-rail-label {
  font: var(--weight-medium) 12px/var(--leading-snug) var(--lp-font); /* literal 12px: the nav-label size (.lp-nav-label role) */
  letter-spacing: 0.06em; /* literal: the nav-label tracking, no --tracking-* token is 0.06em */
  text-transform: uppercase;
  color: var(--rail-muted, var(--text-muted));
}
.lp-rail .lp-rail-cell.is-active .lp-rail-label, .lp-rail .lp-rail-cell[aria-current] .lp-rail-label { color: var(--rail-fg, var(--gray-900)); }
@media (hover: hover) {
  .lp-rail .lp-rail-cell:hover .lp-rail-label { color: var(--rail-fg, var(--gray-900)); }
}

/* Reduced motion: the rail snaps between its widths (landing.css). */
@media (prefers-reduced-motion: reduce) {
  .lp-rail, .lp-rail .lp-rail-label, .lp-rail-logo > span, .lp-rail .lp-rail-cell { transition: none; }
}
/* ── components/landing/payoff.css ── */
/* StrikeSimple design system — landing surface — the payoff chart.
   What this is: the styling of the schematic P&L chart under each primitive's figure (.lp-payoff*):
   the figure and its caption row with the two-line key, and the SVG classes PayoffChart.jsx puts on
   its axes, strikes, washes, lines, breakeven dots and labels, with their draw-in animations.
   Where it came from: landing.css "── Payoff chart (PayoffChart.jsx), at the foot of each
   primitive's figure" (lines 888–929): hairline axes one step off the ground, the strikes as faint
   lavender rules, the payoff at expiry a 2px lavender line drawn in when the variant is picked, its
   profit side washed green and its loss side red, a ringed dot at each breakeven, and today's value
   a dashed light grey curve under it; under the chart, its caption and a key to the two lines. The
   class names are PayoffChart.jsx's (lp-payoff, -cap, -key, -key-item, -swatch, -swatch--now,
   -axis, -zero, -strike, -label, -sub, -wash, -wash--up / --down, -line, -now, -even).
   What changed: every ink is a token from landing.color.payoff (--lp-payoff-line for the lavender
   blue-300, --lp-payoff-now, -axis, -zero, -strike, -wash-up, -wash-down, -glow), the label halo
   and the dots' ring read the dark ground --lp-bg-dark, the dashed swatch's 1.5px is
   --border-w-strong, the weights and leadings are tokens. The timings, dash patterns and
   reduced-motion stop are landing.css's exactly. The chart lives on the dark stage: the inks are
   translucent whites and lavenders, so the grey text tones (gray-400 key, gray-500 labels, 5.0:1
   on #17181d) stay as they are. */

/* The figure: full width of the primitive's card (720px at most, .lp-prim-card). */
.lp-payoff { width: 100%; margin: 0 auto; }
/* The caption row: the caption and the key, centred, wrapping, 12px under the chart. */
.lp-payoff-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; margin-top: 12px; }
.lp-payoff-key { display: inline-flex; gap: 16px; }
.lp-payoff-key-item {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: var(--weight-regular) 12px/var(--leading-snug) var(--lp-font); letter-spacing: 0.01em; /* literal 12px / 0.01em: the page's meta size and tracking (as .lp-footer-bottom) */
  color: var(--gray-400);
}
/* each line's swatch: the expiry payoff's 2px lavender, today's dashed grey */
.lp-payoff-swatch { width: 20px; height: 0; border-top: 2px solid var(--lp-payoff-line); } /* literal 2px: the expiry line's stroke width */
.lp-payoff-swatch--now { border-top: var(--border-w-strong) dashed var(--lp-payoff-now); }
/* The SVG scales with the figure; overflow visible so the label halos and the glow are not clipped. */
.lp-payoff svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Axes: a hairline x-axis one step off the ground, the brighter zero line, the strikes as faint
   lavender rules. (SVG stroke widths are unitless user units, not CSS lengths.) */
.lp-payoff-axis { stroke: var(--lp-payoff-axis); stroke-width: 1; }
.lp-payoff-zero { stroke: var(--lp-payoff-zero); stroke-width: 1; }
.lp-payoff-strike { stroke: var(--lp-payoff-strike); stroke-width: 1; }
/* Labels (Price, Profit, Loss, S₀ / S₁, Breakeven): 12px in gray-500, haloed in the ground colour
   (paint-order: stroke) so they read where they cross a line. */
.lp-payoff-label {
  font: var(--weight-regular) 12px var(--lp-font); letter-spacing: 0.01em; fill: var(--gray-500); /* literal 12px / 0.01em: the label size and tracking */
  paint-order: stroke; stroke: var(--lp-bg-dark); stroke-width: 3px; stroke-linejoin: round;
}
/* The subscript of a strike label (S₀, S₁). */
.lp-payoff-sub { font-size: 9px; } /* literal: landing.css; the subscript, no --text-* token this small */
/* The washes: the area between the expiry line and zero, clipped to the profit side (green) and
   the loss side (red), fading in after the line starts drawing. */
.lp-payoff-wash { stroke: none; animation: lp-payoff-fade 0.6s var(--ease-out) 0.35s both; }
.lp-payoff-wash--up { fill: var(--lp-payoff-wash-up); }
.lp-payoff-wash--down { fill: var(--lp-payoff-wash-down); }
/* The payoff at expiry: a 2px lavender line with a cobalt glow, drawn in over 0.9s from its start
   (PayoffChart.jsx sets pathLength="1", so the dash runs 0 → 1 whatever the path's length). */
.lp-payoff-line {
  fill: none; stroke: var(--lp-payoff-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--lp-payoff-glow));
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: lp-payoff-draw 0.9s var(--ease-out) 0.1s both;
}
/* Today's value: a 1.5px dashed light grey curve (Black-Scholes, crossing zero at the opening
   price), fading in after the line. */
.lp-payoff-now {
  fill: none; stroke: var(--lp-payoff-now); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linecap: round;
  animation: lp-payoff-fade 0.6s var(--ease-out) 0.5s both;
}
/* A breakeven: a lavender dot ringed in the ground colour, last to appear. */
.lp-payoff-even circle { fill: var(--lp-payoff-line); stroke: var(--lp-bg-dark); stroke-width: 2; }
.lp-payoff-even { animation: lp-payoff-fade 0.4s var(--ease-out) 0.7s both; }
@keyframes lp-payoff-draw { from { stroke-dashoffset: 1; } }
@keyframes lp-payoff-fade { from { opacity: 0; } }
/* Reduced motion: everything is simply drawn (landing.css). */
@media (prefers-reduced-motion: reduce) {
  .lp-payoff-line, .lp-payoff-wash, .lp-payoff-even, .lp-payoff-now { animation: none; }
}