/* StrikeSimple pitch deck — deck/deck.css
   What this is: the deck's own styles, on top of dist/css/landing.css. The deck is a consumer of the
   landing surface, the same way strikesimple-landing is: it loads dist/css/landing.css for every
   colour, the type roles that have a fixed size (.lp-kicker, .lp-step-name, .lp-caption,
   .lp-tag-label), and the recipes it reuses as they are (.lp-logo, .lp-mark, .lp-btn, .lp-hero-tile,
   .lp-band and its four themes, .lp-hl, .lp-payoff). This file adds what a slide needs and the
   surface does not have.
   Why the sizes are pixels: a slide is a fixed 1280 × 720 canvas that deck.js scales to fit the
   window. The landing's display roles (.lp-hero-title, .lp-section-title, .lp-band-title-role,
   .lp-lead) size themselves with clamp() on vw, which reads the browser window, not the canvas, so
   on a scaled slide they would change size with the window and break the layout. The --deck-fs-*
   properties below are those roles fixed at the size the landing renders them on a desktop
   window: section titles at 46px, band titles at 52px, leads at 17px and
   19px, item labels at 24px closed and 30px open. Everything else (weights, leading, tracking,
   case, colour) is the role's own.
   Colours: every colour is a landing or foundation variable. The few rgba() literals are the
   landing's own (landing.css and Landing.jsx), each marked with where it came from, because the
   surface emits no token for them.
   Where the patterns come from: the hero (Landing.jsx Hero()), the section head (SectionHead()),
   the split section and its stage (landing.css .lp-split*), the showcase (PRODUCTS_CSS), the
   trading life cycle (landing.css .lp-roadmap*), the wire grid (GridField()) — each block below
   names its source. */

/* ══ Deck properties ════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  /* The canvas. deck.js reads these two numbers too (DECK_W, DECK_H); keep them in step. */
  --deck-w: 1280px;
  --deck-h: 720px;
  /* The slide's inset: the landing's 64px section padding at the top and bottom is tightened to
     56px because a slide has no scroll to spare; the 64px sides match the section padding. */
  --deck-pad-y: 56px;
  --deck-pad-x: 64px;
  /* The display roles at their desktop size (see the header). */
  --deck-fs-title: 46px;
  --deck-fs-band: 52px;
  --deck-fs-lead: 17px;
  --deck-fs-band-lead: 19px;
  --deck-fs-label: 24px;
  --deck-fs-label-open: 30px;
  --deck-fs-text: 15px;
  /* The letterbox around the canvas, and the presentation chrome on it. */
  --deck-backdrop: var(--gray-950);
  --deck-chrome: var(--gray-500);
  --deck-chrome-strong: var(--gray-100);
  /* The cobalt glow behind a split section's cards (Landing.jsx OFFER_GLOW, rgba(42, 43, 245, 0.34)):
     the accent at 34%, mixed here so it follows --blue-500. */
  --deck-card-glow: color-mix(in srgb, var(--blue-500) 34%, transparent);
  /* The one deep drop on the landing, under the deck cards (landing.css .lp-split-frame). */
  --deck-card-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); /* literal: landing.css; no shadow token is this deep */
}

/* ══ Presentation frame ═════════════════════════════════════════════════════════════════════ */

html, body { height: 100%; }
/* dist/css/landing.css paints the body in the light page ground; around a slide the deck shows
   the near-black letterbox instead, so a light slide and a dark one both sit on a frame. */
body { margin: 0; background: var(--deck-backdrop); color: var(--gray-100); overflow: hidden; }

.deck { position: fixed; inset: 0; }
.deck-stage { position: absolute; inset: 0; }

/* A slide: the 1280 × 720 canvas, centred in the window and scaled to fit (--deck-scale, set by
   deck.js). Only the active one is shown; the others wait, faded out, so a change of slide is a
   short cross-fade. */
.slide {
  position: absolute; left: 50%; top: 50%;
  width: var(--deck-w); height: var(--deck-h);
  margin: calc(var(--deck-h) / -2) 0 0 calc(var(--deck-w) / -2);
  transform: scale(var(--deck-scale, 1));
  box-sizing: border-box; overflow: hidden;
  padding: var(--deck-pad-y) var(--deck-pad-x);
  isolation: isolate;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
/* Content sits over the grounds' textures (the wire grid, glows). :where() keeps this at the
   specificity of .slide alone, so a piece that places itself (the cover's mark) still can. */
.slide > :where(:not(.deck-grid, .deck-glow)) { position: relative; z-index: 1; }

/* The two grounds (02-landing.md §2): the cool gray-100 page and the near-black dark section.
   [data-on-dark] on a dark slide switches the kicker, title keyword and lead colours, as the
   landing's section head does. */
.slide--light { background: var(--bg-page); color: var(--text-body); }
.slide--dark { background: var(--lp-bg-dark); color: var(--gray-400); }
/* A slide's content is centred in its height, as the landing centres each section in the window
   (Landing.jsx SECTION: min-height 100vh, justify-content center). The cover, the bands and the
   split slides lay themselves out. */
.slide--light:not(.deck-cover):not(.deck-split), .slide--dark:not(.deck-split) { display: flex; flex-direction: column; justify-content: center; }

/* ══ Section head (SectionHead() in Landing.jsx) ════════════════════════════════════════════ */

/* "[ 05 ] KICKER" → title 20px under → lead 18px under. The kicker's index is the slide's place in
   the deck, as the landing's is the section's place on the page. */
.deck-head { max-width: 920px; }
.deck-head--center { margin-inline: auto; text-align: center; }
.deck-head--wide { max-width: none; }
.deck-title {
  margin: 20px 0 0;
  font: var(--weight-semibold) var(--deck-fs-title)/var(--leading-tight) var(--lp-font);
  letter-spacing: var(--tracking-display);
  color: var(--gray-900); text-wrap: balance;
}
[data-on-dark] .deck-title { color: var(--gray-100); }
.deck-lead {
  margin: 18px 0 0; max-width: 660px;
  font: 300 var(--deck-fs-lead)/var(--leading-normal) var(--lp-font); /* literal 300: the lead weight; no weight token is 300 */
  letter-spacing: 0.01em; /* literal: the lead's tracking */
  color: var(--text-muted); text-wrap: pretty;
}
.deck-head--center .deck-lead { margin-inline: auto; }
[data-on-dark] .deck-lead { color: var(--gray-400); }
.deck-lead em { font-style: normal; color: var(--gray-900); }
[data-on-dark] .deck-lead em { color: var(--gray-100); }

/* A small uppercase label in the caption role's measurements, for figure captions and the
   "illustrative" notes under a picture. */
.deck-note {
  font: var(--weight-medium) 10.5px/1.3 var(--lp-font); /* literal: the .lp-caption role's size */
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-faint);
}
[data-on-dark] .deck-note { color: var(--gray-500); }

/* ══ Entrances (Reveal in Landing.jsx) ══════════════════════════════════════════════════════ */

/* Each [data-reveal] block comes in once when its slide opens: "up" rises 24px, "rise" 34px and
   0.97 scale, "clip" wipes a kicker in from the left, "fade" only fades. --d staggers them (ms).
   The page is complete at rest: these rules apply only while deck.js has set .has-motion (never
   under reduced motion, in print, or without script) and the slide is not yet .is-in. */
.has-motion [data-reveal] {
  transition: opacity 760ms var(--ease-out), transform 820ms var(--ease-out), clip-path 680ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.has-motion .slide:not(.is-in) [data-reveal] { opacity: 0; }
.has-motion .slide:not(.is-in) [data-reveal="up"] { transform: translateY(24px); }
.has-motion .slide:not(.is-in) [data-reveal="rise"] { transform: translateY(34px) scale(0.97); }
.has-motion .slide:not(.is-in) [data-reveal="clip"] { clip-path: inset(0 100% 0 0); opacity: 1; }
.has-motion .slide.is-in [data-reveal="clip"] { clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }

/* ══ Wire grid (GridField() in Landing.jsx; wire-grid.md) ═══════════════════════════════════ */

/* deck.js fills a .deck-grid with square cells about 92px wide: a faint base layer, and the same
   lines in --blue-400 under a 220px spotlight that follows the pointer. The lines grow in from the
   outside when the slide opens. Colours and opacities per ground are the landing's: gray-300 at
   0.7 on the light page, gray-700 at 0.55 on a dark band. */
.deck-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.deck-grid-layer { position: absolute; inset: 0; }
.deck-grid-layer--base { opacity: 0.7; --line: var(--gray-300); }
.deck-grid--dark .deck-grid-layer--base { opacity: 0.55; --line: var(--gray-700); }
.deck-grid-layer--glow { --line: var(--blue-400); opacity: 0; }
.deck-grid-line { position: absolute; background: var(--line); transform-origin: center; }
.deck-grid-line--v { top: 0; bottom: 0; width: 1px; }
.deck-grid-line--h { left: 0; right: 0; height: 1px; }
.has-motion .deck-grid-line { transition: transform 820ms var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
.has-motion .slide:not(.is-in) .deck-grid-line--v { transform: scaleY(0); }
.has-motion .slide:not(.is-in) .deck-grid-line--h { transform: scaleX(0); }

/* ══ 01 · Cover: the hero's ground, the wordmark large in the middle ════════════════════════ */

/* The wordmark at display size over the hero headline, set smaller, and a small meta line: one
   centred column on the light page and its wire grid. */
.deck-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.deck-cover-center { display: flex; flex-direction: column; align-items: center; }
.deck-cover-logo { font-size: 112px; } /* the wordmark at display size: the --lp-logo-size-* steps stop at 64px (xl) */
.deck-cover-sub {
  margin: 30px 0 0;
  font: var(--weight-semibold) 34px/var(--leading-tight) var(--lp-font);
  letter-spacing: var(--tracking-display); color: var(--gray-900); text-wrap: balance;
}
.deck-cover-sub .lp-hl { color: var(--blue-500); }
.deck-cover-meta {
  margin: 26px 0 0;
  font: var(--weight-medium) 12px/1.2 var(--lp-font); letter-spacing: 0.06em; text-transform: uppercase; /* the nav-label tracking */
  color: var(--text-muted);
}

/* ══ Folio: a small wordmark bottom left, the page count bottom right, on every slide ═══════ */

/* deck.js adds it to each slide; it sits in the bottom margin, under every slide's content. */
.deck-folio {
  position: absolute; left: var(--deck-pad-x); right: var(--deck-pad-x); bottom: 22px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
.deck-folio .lp-logo { font-size: var(--lp-logo-size-sm); }
.deck-folio-n {
  font: var(--weight-medium) 11px/1 var(--lp-font); letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.deck-folio--dark .deck-folio-n { color: var(--gray-500); }

/* ══ 02 · Team ══════════════════════════════════════════════════════════════════════════════ */

.deck-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
/* A person: a flat panel in the landing's dark panel colour (the roadmap popover's ground), with a
   hairline edge and the popover's 12px corner — the landing's one rounded panel shape. */
.deck-person {
  display: flex; flex-direction: column;
  padding: 32px 36px 30px;
  background: var(--lp-rm-dark-pop-bg);
  border: 1px solid var(--lp-hairline-dark); border-radius: var(--radius-xl);
}
.deck-person-top { display: flex; align-items: center; gap: 20px; }
/* The avatar: the person's photo in a disc (an <img> inside .deck-avatar covers it); without one,
   initials in lavender on the tag tint. */
.deck-avatar {
  position: relative; flex: none; display: grid; place-items: center;
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  background: var(--lp-rm-dark-tag-bg); box-shadow: inset 0 0 0 1px var(--lp-hairline-dark);
  font: var(--weight-medium) 22px/1 var(--lp-font); letter-spacing: 0.04em; color: var(--blue-300);
}
.deck-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deck-person-name {
  margin: 0; font: var(--weight-semibold) 34px/var(--leading-tight) var(--lp-font);
  letter-spacing: var(--tracking-display); color: var(--gray-100);
}
.deck-person-role {
  display: block; margin-top: 8px;
  font: var(--weight-medium) 13px/1.3 var(--lp-font); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-300);
}
.deck-person-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.deck-person-list li {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px;
  font: 400 15px/1.4 var(--lp-font); color: var(--gray-400);
}
.deck-person-list b { font-weight: 400; color: var(--gray-100); }
.deck-person-list .deck-at { color: var(--gray-500); }
.deck-person-edu {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--lp-hairline-dark);
  font: 400 15px/1.4 var(--lp-font); color: var(--gray-400);
}
.deck-person-edu b { font-weight: 400; color: var(--gray-100); }

/* ══ Bands (band.css) on a slide ════════════════════════════════════════════════════════════ */

/* .lp-band gives the theme's palette and ground; on a slide its fluid padding and the title's
   clamp() size are replaced by the canvas's fixed ones, and the content is centred in the height. */
.slide.lp-band { padding: var(--deck-pad-y) var(--deck-pad-x); display: flex; flex-direction: column; justify-content: center; }
.slide.lp-band::before, .slide.lp-band::after { display: none; }
.slide .lp-band-title { font-size: var(--deck-fs-band); margin-top: 24px; }
.slide .lp-band-sub { font-size: var(--deck-fs-band-lead); margin-top: 24px; }
.slide .lp-band-kicker .lp-kicker-index { color: inherit; }

/* 03 · Insight: the band holds only the statement, so it takes a larger size. */
.deck-statement .lp-band-title { font-size: 64px; max-width: 1000px; }

/* ══ Split slides (landing.css .lp-split*: Why Us, Product) ═════════════════════════════════ */

/* Two halves: the head and a list on the left, a full-height stage on the right. */
.slide.deck-split { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.deck-split--wide-stage { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important; }
.deck-split-main { display: flex; flex-direction: column; justify-content: center; padding: 44px 48px 44px var(--deck-pad-x); }
.deck-split-main .deck-title { font-size: 42px; }
/* The stage: the dark gradient under a soft dot grid, a hairline on its left edge. */
.deck-split-stage {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--lp-stage-top) 0%, var(--lp-stage-bottom) 100%);
  border-left: 1px solid var(--lp-hairline-dark-soft);
  display: grid; place-items: center; padding: 48px;
}
.deck-split-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.5px); /* literal: landing.css .lp-split-stage::before, the stage's dot */
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 100%); /* a mask reads only alpha */
          mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 100%);
}
.deck-split-stage--plain { background: var(--lp-bg-dark); }
.deck-split-stage--plain::before { display: none; }
.deck-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 42% at 50% 50%, var(--deck-card-glow), transparent); }
.deck-split-stage > :not(.deck-glow) { position: relative; }

/* The list: every item open (the landing's listStacked form), a hairline between items. */
.deck-items { margin-top: 24px; max-width: 540px; }
.deck-item { padding: 15px 0; }
.deck-item + .deck-item { border-top: 1px solid rgba(255, 255, 255, 0.1); } /* literal: landing.css .lp-split-item, no token at 0.1 */
.deck-item:last-child { padding-bottom: 0; }
.deck-item-label {
  display: flex; align-items: center; gap: 0.5em; margin: 0;
  font: var(--weight-medium) var(--deck-fs-label)/var(--leading-snug) var(--lp-font);
  letter-spacing: var(--tracking-tight); color: var(--gray-100); text-wrap: balance;
}
.deck-item-icon { flex: none; display: inline-flex; width: 0.85em; height: 0.85em; color: var(--blue-300); }
.deck-item-icon svg { display: block; width: 100%; height: 100%; }
.deck-item-tail { opacity: 0.6; } /* .lp-split-tail: the label's second half, set back */
.deck-item-caps { text-transform: uppercase; letter-spacing: 0.02em; }
.deck-item-text {
  margin: 8px 0 0; max-width: 520px;
  font: 300 var(--deck-fs-text)/var(--leading-normal) var(--lp-font); letter-spacing: 0.01em; /* literal 300: the item text weight */
  color: var(--gray-400); text-wrap: pretty;
}
.deck-item-text strong { font-weight: 400; color: var(--gray-100); }
.deck-item-icon + .deck-item-name { min-width: 0; }

/* A card on the stage (landing.css .lp-split-frame): round corners, no border, the one deep drop.
   The pictures carry their own hairline and tighter corners; scaled 2%, those fall outside. */
.deck-card {
  position: relative; display: block; width: min(520px, 100%); aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl); overflow: hidden;
  background: var(--lp-bg-dark); box-shadow: var(--deck-card-shadow);
}
.deck-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
/* The deck of cards: a card under the top one is nudged up 7%, shrunk 5% and dimmed, so its edge
   shows above (landing.css .lp-split-card with --d: 1). */
.deck-cards { display: grid; place-items: center; width: 100%; }
.deck-cards > .deck-card { grid-area: 1 / 1; }
.deck-cards > .deck-card--under { transform: translateY(-7%) scale(0.95); }
.deck-cards > .deck-card--under img { object-position: center top; }
.deck-cards > .deck-card--under::after { content: ""; position: absolute; inset: 0; background: var(--lp-bg-dark); opacity: 0.55; }

/* ══ 04 · What we build: the statement on the stage's dots ════════════════════════════════ */

/* The whole slide is a stage: the dark gradient under the soft dot grid (landing.css
   .lp-split-stage), the statement centred on it. */
.slide.deck-dots { background: linear-gradient(180deg, var(--lp-stage-top) 0%, var(--lp-stage-bottom) 100%); align-items: center; text-align: center; }
.slide.deck-dots::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.5px); /* literal: landing.css .lp-split-stage::before, the stage's dot */
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 100%); /* a mask reads only alpha */
          mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 100%);
}
.deck-title--statement { font-size: var(--deck-fs-band); max-width: 960px; margin-inline: auto; }
/* Each product and the option strategy it is: kept quiet on purpose — small type, low contrast,
   the statement above it is the slide. */
.deck-map {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px;
  width: 720px; margin: 56px auto 0;
}
.deck-map > div {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 12px 0; border-top: 1px solid var(--lp-hairline-dark);
}
.deck-map dt {
  font: var(--weight-medium) 11px/1.2 var(--lp-font); letter-spacing: 0.06em; text-transform: uppercase; /* the nav-label measurements */
  color: var(--blue-300);
}
.deck-map dd { margin: 0; font: 400 13px/1.2 var(--lp-font); color: var(--gray-400); }

/* ══ 05 / 06 · Problems ═════════════════════════════════════════════════════════════════════ */

.deck-cols { display: grid; gap: 28px; margin-top: 36px; }
.deck-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deck-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.deck-col { display: flex; flex-direction: column; min-width: 0; }
/* A problem's picture: the deck card at a smaller corner, so three fit across the slide. */
.deck-col .deck-card { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.deck-col-label {
  display: flex; align-items: center; gap: 0.5em; margin: 22px 0 0;
  font: var(--weight-medium) var(--deck-fs-label)/var(--leading-snug) var(--lp-font);
  letter-spacing: var(--tracking-tight); color: var(--gray-900);
}
.deck-col-label .deck-item-icon { color: var(--blue-500); }
.deck-col-text {
  margin: 8px 0 0;
  font: 300 var(--deck-fs-text)/var(--leading-normal) var(--lp-font); letter-spacing: 0.01em; /* literal 300: the item text weight */
  color: var(--text-muted); text-wrap: pretty;
}
.deck-col-text strong { font-weight: 500; color: var(--gray-900); }

/* "Fake leverage": drawn in the pictures' own manner — a dark card, a white heading, a muted
   subhead, and one bar per leverage for the move that wipes the margin out. */
.deck-figure {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 22px 24px 18px;
  background: linear-gradient(180deg, var(--lp-stage-top) 0%, var(--lp-stage-bottom) 100%);
  color: var(--gray-400);
}
.deck-figure-title { margin: 0; font: var(--weight-semibold) 17px/1.25 var(--lp-font); color: var(--gray-100); }
.deck-figure-sub { margin: 4px 0 0; font: 400 12.5px/1.4 var(--lp-font); color: var(--gray-400); }
.deck-bars { list-style: none; margin: auto 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.deck-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 46px; align-items: center; gap: 10px; font: 500 13px/1 var(--lp-font); font-variant-numeric: tabular-nums; }
.deck-bar-x { color: var(--gray-100); }
.deck-bar-track { height: 10px; border-radius: var(--lp-pill); background: var(--lp-hairline-dark); overflow: hidden; }
/* What survives, in the accent's lavender; the perp's own figure (.deck-bar--ref) in the danger red. */
.deck-bar-fill { display: block; height: 100%; width: var(--w, 100%); min-width: 4px; border-radius: inherit; background: var(--blue-300); }
.deck-bar--ref .deck-bar-fill { background: var(--danger); }
.has-motion .deck-bar-fill { transition: transform 900ms var(--ease-out) calc(var(--d, 0) * 1ms); transform-origin: left center; }
.has-motion .slide:not(.is-in) .deck-bar-fill { transform: scaleX(0); }
.deck-bar-v { text-align: right; color: var(--gray-100); }
.deck-bar--ref .deck-bar-x, .deck-bar--ref .deck-bar-v { color: var(--danger); }
.deck-figure-foot { margin: 0; font: 400 11px/1.4 var(--lp-font); color: var(--gray-500); }

/* 06: the two option pictures are light panels, like the Demo section's showcase card. */
.deck-panel {
  position: relative; height: 288px; box-sizing: border-box; overflow: hidden;
  padding: 18px 20px 16px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.deck-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.deck-panel-title { font: var(--weight-semibold) 14px/1.2 var(--lp-font); color: var(--gray-900); }
.deck-panel-title span { font-weight: 400; color: var(--text-muted); }
/* The option chain: every column a number a trader has to read. */
.deck-chain { width: 100%; border-collapse: collapse; font: 400 11px/1 var(--lp-font); font-variant-numeric: tabular-nums; color: var(--gray-700); }
.deck-chain th { padding: 0 0 8px; font-weight: 500; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); text-align: right; }
.deck-chain td { padding: 6.5px 0; text-align: right; border-top: 1px solid var(--border-faint); }
.deck-chain th:first-child, .deck-chain td:first-child { text-align: left; }
.deck-chain .deck-chain-k { text-align: center; font-weight: 600; color: var(--gray-900); background: var(--bg-page); }
.deck-chain th.deck-chain-k { background: none; }
.deck-chain .is-atm td { color: var(--gray-900); }
.deck-chain .is-atm .deck-chain-k { color: var(--white); background: var(--blue-500); }
.deck-chain-side { font-weight: 600; color: var(--gray-900); }
/* The liquidity map: strikes down, expiries across, each cell's depth as the accent's alpha. */
.deck-depth { display: grid; grid-template-columns: 64px repeat(8, minmax(0, 1fr)); gap: 3px; font: 500 10px/1 var(--lp-font); font-variant-numeric: tabular-nums; color: var(--text-faint); }
.deck-depth > span { display: grid; place-items: center; height: 20px; }
.deck-depth .deck-depth-k { justify-content: start; color: var(--gray-700); }
.deck-depth .deck-depth-k.is-atm { color: var(--blue-600); font-weight: 600; }
.deck-depth-cell { position: relative; border-radius: var(--radius-xs); background: var(--bg-page); }
.deck-depth-cell::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue-500); opacity: var(--a, 0); }
.deck-depth-legend { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font: 400 11px/1 var(--lp-font); color: var(--text-muted); }
.deck-depth-ramp { width: 96px; height: 8px; border-radius: var(--lp-pill); background: linear-gradient(90deg, var(--bg-page), var(--blue-500)); }

/* ══ 09 · Demo (Products in Landing.jsx: PRODUCTS_CSS .lp-showcase) ═════════════════════════ */

.slide--demo { display: flex; flex-direction: column; align-items: center; }
.deck-showcase {
  --pad: 22px;
  position: relative; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  width: 860px; aspect-ratio: 16 / 9; margin-top: 28px;
  padding: var(--pad) var(--pad) 0;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.deck-showcase-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.deck-showcase-url { font: var(--weight-medium) 16px/1.2 var(--lp-font); color: var(--blue-600); text-decoration: none; text-underline-offset: 3px; }
.deck-showcase-link { position: relative; display: block; flex: 1 1 0; min-height: 0; margin-bottom: -8px; border-radius: var(--radius-md) var(--radius-md) 0 0; color: inherit; text-decoration: none; }
.deck-showcase-frame {
  display: block; height: 100%; overflow: hidden; box-sizing: border-box;
  border-radius: var(--radius-md) var(--radius-md) 0 0; border: 1px solid var(--border-faint); border-bottom: 0;
  background: var(--gray-50);
  transition: transform var(--dur-slow) var(--ease-out);
}
.deck-showcase-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.deck-showcase .lp-media-cta { bottom: 24px; opacity: 1; transform: none; }
.deck-showcase-url:focus-visible, .deck-showcase-link:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }
@media (hover: hover) {
  .deck-showcase:hover { box-shadow: var(--shadow-lg); }
  .deck-showcase-url:hover { text-decoration: underline; }
  .deck-showcase-link:hover .deck-showcase-frame { transform: translateY(-4px); }
  .deck-showcase-link:hover .lp-media-cta { transform: translateY(-4px); }
}

/* ══ 11 · Architecture (the diagrams: WheelGraph / SplitGraph inks) ═════════════════════════ */

.deck-arch { position: relative; margin-top: 28px; }
.deck-arch svg { display: block; width: 100%; height: auto; overflow: visible; }
.deck-arch text { font-family: var(--lp-font); }
/* Nodes: the wheel's blocks — a deep ink fill, a 1.5px ink edge, a 4px corner — with their name in
   paper white and a role line in lavender capitals. A node on the main path is lit in the beam's
   lavender, as SplitGraph lights a highlighted block. */
.deck-arch-node rect { fill: var(--lp-diagram-ink-deep); stroke: var(--lp-diagram-ink); stroke-width: 1.5; }
.deck-arch-node.is-hl rect { stroke: var(--blue-300); fill: color-mix(in srgb, var(--blue-400) 22%, var(--lp-diagram-ink-deep)); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--blue-400) 50%, transparent)); }
.deck-arch-name { font-size: 15px; font-weight: 500; fill: var(--lp-diagram-paper); }
.deck-arch-sub { font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--blue-300); }
/* Edges: the wheel's soft ink, 2px, round joins; the beams run along them in lavender. */
.deck-arch-edge { fill: none; stroke: var(--lp-diagram-ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deck-arch-beam { fill: none; stroke: var(--lp-diagram-lavender); stroke-width: 2; stroke-linecap: round; stroke-opacity: 0.45; }
.deck-arch-head { fill: var(--gray-500); }
.deck-arch-edge-label { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--gray-500); paint-order: stroke; stroke: var(--lp-bg-dark); stroke-width: 4px; stroke-linejoin: round; }

/* ══ 12 · Monetization ══════════════════════════════════════════════════════════════════════ */

.deck-money { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; margin-top: 40px; align-items: stretch; }
/* The primary stream on the hero tile's cobalt block (.lp-hero-tile), the one solid accent fill. */
.deck-money-primary {
  display: flex; flex-direction: column; min-height: 380px; box-sizing: border-box;
  padding: 32px 40px 36px; border-radius: var(--radius-md);
  background: var(--blue-500); color: var(--white);
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--blue-500) 70%, transparent); /* the tile's hover glow, at rest */
}
.deck-money-tag { font: var(--weight-medium) 14px/1.2 var(--lp-font); letter-spacing: 0.06em; text-transform: uppercase; }
.deck-money-primary h3 { margin: auto 0 0; font: var(--weight-semibold) 48px/var(--leading-tight) var(--lp-font); letter-spacing: var(--tracking-display); }
.deck-money-primary p {
  margin: 16px 0 0; max-width: 460px;
  font: 300 18px/var(--leading-normal) var(--lp-font); letter-spacing: 0.01em; /* literal 300: the lead weight */
  color: color-mix(in srgb, var(--white) 86%, transparent);
}
.deck-money-side { display: flex; flex-direction: column; justify-content: flex-end; }
.deck-money-side .lp-kicker { color: var(--text-muted); }
.deck-money-list { list-style: none; margin: 18px 0 0; padding: 0; }
.deck-money-list li {
  padding: 22px 0; border-top: 1px solid var(--border);
  font: var(--weight-medium) var(--deck-fs-label)/var(--leading-snug) var(--lp-font); letter-spacing: var(--tracking-tight);
  color: var(--gray-900);
}
.deck-money-list li:last-child { border-bottom: 1px solid var(--border); }
.deck-money-list li span { color: var(--text-muted); }

/* ══ 13 · TAM: two markets as figures, the gap between them as the line under ════════════════ */

.deck-tam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; margin-top: 48px; }
.deck-tam-stat { display: flex; flex-direction: column; padding-top: 28px; border-top: 1px solid var(--lp-hairline-dark); }
.deck-tam-v {
  font: var(--weight-semibold) 96px/1 var(--lp-font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--blue-300);
}
.deck-tam-k { margin-top: 20px; font: var(--weight-medium) var(--deck-fs-label)/var(--leading-snug) var(--lp-font); letter-spacing: var(--tracking-tight); color: var(--gray-100); }
.deck-tam-t {
  margin: 10px 0 0; max-width: 420px;
  font: 300 var(--deck-fs-lead)/var(--leading-normal) var(--lp-font); letter-spacing: 0.01em; /* literal 300: the lead weight */
  color: var(--gray-400);
}
.deck-tam-gap {
  display: flex; align-items: center; gap: 12px; margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--lp-hairline-dark);
  font: var(--weight-medium) 20px/1.3 var(--lp-font); letter-spacing: var(--tracking-tight); color: var(--gray-100);
}

/* ══ 14 · Go-to-market: the four moves on a line, as a roadmap reads ═══════════════════════ */

.deck-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 48px 0 0; padding: 0; list-style: none; }
/* The line through the dots, faded at its ends (.lp-roadmap-line), drawn in when the slide opens. */
.deck-flow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--rm-line) 4%, var(--rm-line) 96%, transparent 100%);
  transform-origin: left center;
}
.has-motion .deck-flow::before { transition: transform 1.2s var(--ease-out) 0.15s; }
.has-motion .slide:not(.is-in) .deck-flow::before { transform: scaleX(0); }
.deck-flow-step { position: relative; min-width: 0; padding-top: 36px; }
.deck-flow-dot {
  position: absolute; left: 0; top: 0; width: var(--lp-roadmap-dot); height: var(--lp-roadmap-dot); border-radius: 50%;
  background: var(--rm-dot); box-shadow: 0 0 0 var(--lp-roadmap-halo) var(--rm-halo), 0 0 18px var(--rm-glow);
}
.deck-flow-step:first-child .deck-flow-dot { background: var(--rm-dot-on); box-shadow: 0 0 0 var(--lp-roadmap-halo-on) var(--rm-halo-on), 0 0 28px var(--rm-glow-on); }
/* the » between two steps, on the line halfway between their dots (FlowChevrons): the next dot is
   one column and one 32px gap along, so halfway is 50% + 16px, less half the 20px chevron. */
.deck-flow-chev { position: absolute; top: -1px; left: calc(50% + 6px); display: flex; color: var(--rm-flow); }
.deck-flow-chev svg { display: block; }
.deck-flow-name { display: block; color: var(--rm-name); }
.deck-flow-title {
  margin: 14px 0 0;
  font: var(--weight-medium) var(--deck-fs-label)/var(--leading-snug) var(--lp-font); letter-spacing: var(--tracking-tight);
  color: var(--gray-900); text-wrap: balance;
}
.deck-flow-text {
  margin: 12px 0 0;
  font: 300 var(--deck-fs-text)/var(--leading-normal) var(--lp-font); letter-spacing: 0.01em; /* literal 300: the item text weight */
  color: var(--text-muted); text-wrap: pretty;
}
.deck-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.deck-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--lp-pill); color: var(--rm-tag-text); background: var(--rm-tag-bg); }

/* ══ 15 · Roadmap ═══════════════════════════════════════════════════════════════════════════ */

/* The stages in one line, as the source writes them: names in capitals with a » between, the two
   raises as gold pills (.lp-roadmap-feature) — gold marks what is featured on the landing. */
.deck-path { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.deck-path-step { color: var(--gray-100); font-size: 12.5px; }
.deck-path-chev { display: flex; color: var(--blue-300); }
.deck-raise {
  display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: var(--lp-pill);
  font: var(--weight-medium) 11px/1 var(--lp-font); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: var(--lp-rm-dark-feature-ink); background: var(--lp-rm-dark-feature-bg);
  box-shadow: inset 0 0 0 1px var(--lp-rm-dark-feature-glow), 0 0 18px -6px var(--lp-rm-dark-feature-glow);
}
/* The timeline: a label column, then one column per quarter from 2026 Q4 to 2029 Q2. */
.deck-gantt { --label: 470px; position: relative; margin-top: 26px; }
.deck-gantt-axis, .deck-gantt-row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); align-items: center; }
.deck-gantt-years, .deck-gantt-quarters, .deck-gantt-lane { position: relative; display: grid; grid-template-columns: repeat(var(--q, 11), minmax(0, 1fr)); }
.deck-gantt-years { font: var(--weight-medium) 12px/1 var(--lp-font); letter-spacing: 0.01em; color: var(--gray-100); }
.deck-gantt-years span { padding: 0 0 8px 6px; border-left: 1px solid var(--lp-hairline-dark); }
.deck-gantt-quarters span { padding: 0 0 8px 6px; font: var(--weight-medium) 10px/1 var(--lp-font); letter-spacing: 0.05em; color: var(--gray-500); }
.deck-gantt-row { min-height: 50px; border-top: 1px solid var(--lp-hairline-dark); }
.deck-gantt-row:last-child { border-bottom: 1px solid var(--lp-hairline-dark); }
.deck-gantt-label { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 8px 18px 8px 0; }
.deck-gantt-stage { font: var(--weight-medium) 14px/1.25 var(--lp-font); color: var(--gray-100); }
.deck-gantt-goal { font: 400 12.5px/1.35 var(--lp-font); color: var(--gray-400); }
.deck-gantt-goal b { font-weight: 500; color: var(--gray-300); }
.deck-gantt-lane { height: 100%; align-items: center; }
/* the quarter rules behind the bars */
.deck-gantt-lane > i { grid-row: 1; height: 100%; border-left: 1px solid var(--lp-hairline-dark-soft); }
.deck-gantt-bar {
  grid-row: 1; position: relative; z-index: 1; height: 22px; margin: 0 2px; border-radius: var(--lp-pill);
  display: flex; align-items: center; padding: 0 10px; box-sizing: border-box;
  font: var(--weight-medium) 10.5px/1 var(--lp-font); letter-spacing: 0.04em; white-space: nowrap;
  color: var(--gray-950); background: linear-gradient(90deg, var(--blue-400), var(--blue-300));
  box-shadow: 0 0 14px color-mix(in srgb, var(--blue-400) 45%, transparent);
  transform-origin: left center;
}
.deck-gantt-bar--raise { color: var(--lp-rm-dark-feature-ink); background: var(--lp-rm-dark-feature-bg); box-shadow: inset 0 0 0 1px var(--lp-rm-dark-feature-glow); }
.has-motion .deck-gantt-bar { transition: transform 800ms var(--ease-out) calc(var(--d, 0) * 1ms), opacity 600ms var(--ease-out) calc(var(--d, 0) * 1ms); }
.has-motion .slide:not(.is-in) .deck-gantt-bar { transform: scaleX(0.2); opacity: 0; }
/* Milestones over the lanes: today (a dashed rule, as the payoff chart draws today) and the
   pre-seed close (a gold rule). Their left is set by deck.js in % of the lanes. */
.deck-gantt { margin-bottom: 30px; }
.deck-gantt-marks { position: absolute; top: 0; bottom: 0; left: var(--label); right: 0; pointer-events: none; z-index: 2; }
/* from under the quarter labels to just past the last row; the label hangs below, to the right */
.deck-gantt-mark { position: absolute; top: 40px; bottom: -6px; left: var(--at, 0); width: 0; border-left: var(--border-w-strong) dashed var(--lp-payoff-now); }
.deck-gantt-mark--raise { border-left-style: solid; border-left-color: var(--signal-gold); box-shadow: 0 0 10px var(--lp-rm-dark-feature-glow); }
.deck-gantt-mark > span { position: absolute; top: calc(100% + 4px); left: -1px; white-space: nowrap; }
.deck-gantt-mark-labels { display: flex; align-items: center; gap: 6px; }
.deck-gantt-mark .deck-raise { height: 18px; padding: 0 7px; font-size: 9.5px; }
.deck-today {
  font: var(--weight-medium) 9.5px/1 var(--lp-font); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray-100); background: var(--lp-bg-dark); padding: 3px 5px;
}

/* ══ 16 · The ask (the dark band over the wire grid, as the landing's Contact) ═══════════════ */

.deck-ask { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin: 52px auto 0; }
.deck-ask > div { padding: 6px 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.deck-ask > div + div { border-left: 1px solid var(--band-hairline); }
.deck-ask-v {
  font: var(--weight-semibold) 72px/1 var(--lp-font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--band-title);
}
.deck-ask-k { font: var(--weight-medium) 12px/1.2 var(--lp-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--band-kicker); }
.deck-ask-contact { margin-top: 18px; font: 400 14px/1.4 var(--lp-font); color: var(--band-text); }

/* ══ 10 · Mission: the trading life cycle (landing.css .lp-roadmap*, desktop) ═══════════════ */

/* Ported from landing.css with the band's --rm-* palette (band.css sets it), at slide size: the
   previews are 92px instead of 128px so the track fits the canvas. Hovering or focusing a step
   opens its popover; deck.js opens Express (the initial wedge) when the slide opens. */
.slide .lp-roadmap { margin-top: 22px; }
.deck-mission .lp-band-title { font-size: 42px; margin-top: 20px; }
.deck-mission .lp-band-sub { font-size: var(--deck-fs-lead); margin-top: 16px; }
/* The popover stands 56px off the line (the landing's 26px would cover the names of the steps on
   either side, which a slide shows at rest), and the track leaves that much room on both sides. */
.lp-roadmap-track { --pop-gap: 56px; position: relative; height: max(320px, calc(2 * (var(--pop-h, 0px) + var(--pop-gap) + 4px))); }
.lp-roadmap-line, .lp-roadmap-progress { position: absolute; left: 0; top: 50%; height: 1px; margin-top: -0.5px; pointer-events: none; transform-origin: left center; }
.lp-roadmap-line {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--rm-line) 6%, var(--rm-line) 94%, transparent 100%);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.has-motion .lp-roadmap-line { transition: transform 1.2s var(--ease-out) 0.15s, opacity var(--dur-slow) var(--ease-out); }
.has-motion .slide:not(.is-in) .lp-roadmap-line { transform: scaleX(0); }
.lp-roadmap.has-active .lp-roadmap-line { opacity: 0.45; }
.lp-roadmap-progress {
  width: var(--progress, 0%); height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent 0%, var(--rm-progress-a) 12%, var(--rm-progress-b) 100%);
  box-shadow: 0 0 12px var(--rm-progress-glow);
  transition: width 0.45s var(--ease-out);
}
.lp-roadmap-steps { list-style: none; margin: 0; padding: 0; }
.lp-roadmap-step { position: absolute; top: 0; bottom: 0; left: var(--x); width: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.lp-roadmap.has-active .lp-roadmap-step:not(.is-active) { opacity: 0.3; }
.lp-roadmap.has-active .lp-roadmap-step.is-active { z-index: 2; }
.lp-roadmap-btn {
  position: absolute; left: 0; top: 50%; display: block; width: 0; height: 0; padding: 0; margin: 0;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.has-motion .lp-roadmap-btn { transition: opacity 0.6s var(--ease-out) calc(0.35s + var(--i) * 0.12s); }
.has-motion .slide:not(.is-in) .lp-roadmap-btn { opacity: 0; }
.lp-roadmap-btn:focus-visible { outline: none; }
.lp-roadmap-btn:focus-visible .lp-roadmap-dot { outline: 2px solid var(--rm-focus); outline-offset: 6px; }
.lp-roadmap-dot {
  position: absolute; left: calc(var(--lp-roadmap-dot) / -2); top: calc(var(--lp-roadmap-dot) / -2);
  width: var(--lp-roadmap-dot); height: var(--lp-roadmap-dot); border-radius: 50%;
  background: var(--rm-dot);
  box-shadow: 0 0 0 var(--lp-roadmap-halo) var(--rm-halo), 0 0 18px var(--rm-glow);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out);
}
.lp-roadmap-step.is-active .lp-roadmap-dot { background: var(--rm-dot-on); transform: scale(1.25); box-shadow: 0 0 0 var(--lp-roadmap-halo-on) var(--rm-halo-on), 0 0 28px var(--rm-glow-on); }
.lp-roadmap-btn::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; }
.lp-roadmap-text { position: absolute; left: 0; transform: translateX(-50%); width: max-content; max-width: 180px; text-align: center; }
.lp-roadmap-step.is-down .lp-roadmap-text { top: 26px; }
.lp-roadmap-step.is-up .lp-roadmap-text { bottom: 26px; display: flex; flex-direction: column-reverse; align-items: center; }
.lp-roadmap-name { display: block; color: var(--rm-name); }
.lp-roadmap-feature {
  display: inline-flex; align-items: center; height: 22px; margin-top: 8px; padding: 0 10px; border-radius: var(--lp-pill);
  font: var(--weight-medium) 10.5px/1 var(--lp-font); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: var(--rm-feature-ink); background: var(--rm-feature-bg);
  box-shadow: inset 0 0 0 1px var(--rm-feature-glow), 0 0 18px -6px var(--rm-feature-glow);
}
.lp-roadmap-step.is-up .lp-roadmap-feature { margin: 0 0 8px; }
.lp-roadmap-flow { position: absolute; left: var(--x); top: 50%; display: flex; color: var(--rm-flow); transform: translate(-50%, -50%); pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out); }
.lp-roadmap.has-active .lp-roadmap-flow { opacity: 0.45; }
.lp-roadmap-flow svg { display: block; filter: drop-shadow(0 0 6px var(--rm-glow)); }
.has-motion .lp-roadmap-flow svg { animation: lp-flow 2.8s ease-in-out calc(var(--i) * 0.35s) infinite; }
@keyframes lp-flow { 0%, 60%, 100% { opacity: 0.6; transform: none; } 25% { opacity: 1; transform: translateX(3px); } }
.lp-roadmap-pop {
  position: absolute; left: 0; z-index: 3;
  display: grid; grid-template-columns: var(--lp-roadmap-pop-width); grid-auto-flow: column; grid-auto-columns: auto;
  column-gap: 18px; align-items: start; width: max-content;
  transform: translate(var(--pop-x, -50%), 6px);
  padding: 16px 18px; text-align: left;
  background: var(--rm-pop-bg); border: 1px solid var(--rm-pop-border); border-radius: var(--radius-xl);
  box-shadow: var(--rm-pop-shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.lp-roadmap-step.is-down .lp-roadmap-pop { bottom: calc(50% + var(--pop-gap)); }
.lp-roadmap-step.is-up .lp-roadmap-pop { top: calc(50% + var(--pop-gap)); }
.lp-roadmap-step.is-active .lp-roadmap-pop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(var(--pop-x, -50%), 0); transition-delay: 0s; }
.lp-roadmap-pop::after { content: ""; position: absolute; left: 0; right: 0; height: var(--pop-gap); } /* the bridge to the dot, so the pointer can cross */
.lp-roadmap-step.is-down .lp-roadmap-pop::after { top: 100%; }
.lp-roadmap-step.is-up .lp-roadmap-pop::after { bottom: 100%; }
.lp-roadmap-pop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.lp-roadmap-pop-title { display: block; color: var(--rm-pop-title); }
.lp-roadmap-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--lp-pill);
  color: var(--rm-tag-text); background: var(--rm-tag-bg); white-space: nowrap;
}
.lp-roadmap-pop p {
  margin: 0; font: 300 14px/var(--leading-normal) var(--lp-font); letter-spacing: 0.01em; /* literal 300: the popover body weight */
  color: var(--rm-pop-text);
}
.lp-roadmap-previews { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 10px; }
.lp-roadmap-frame { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-xl); background: var(--rm-tile); }
.lp-roadmap-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-roadmap-frame.is-soon {
  background:
    radial-gradient(90% 70% at 50% 110%, var(--rm-soon-glow), transparent 70%),
    repeating-linear-gradient(135deg, var(--rm-soon-hatch) 0 1px, transparent 1px 8px),
    var(--rm-tile);
}
.lp-roadmap-soon {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: var(--weight-medium) 9.5px/1 var(--lp-font); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--rm-soon-text);
}
.lp-roadmap-soon-mark { display: block; color: var(--rm-soon-mark); }
.has-motion .lp-roadmap-soon-mark { animation: lp-mark-spin 12s linear infinite; }
.lp-roadmap-step:not(.is-active) .lp-roadmap-soon-mark { animation-play-state: paused; }
.lp-roadmap-caption { display: block; margin-top: 8px; color: var(--rm-caption); }
.lp-roadmap-link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-xl); }
.lp-roadmap-link:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }
.lp-roadmap-link img { transition: transform var(--dur-slow) var(--ease-out); }
.lp-roadmap-arrow { opacity: 0.7; }
@media (hover: hover) {
  .lp-roadmap-link:hover img { transform: scale(1.04); }
  .lp-roadmap-link:hover .lp-roadmap-arrow { opacity: 1; }
}
.lp-roadmap-previews .is-featured .lp-roadmap-frame { box-shadow: 0 0 0 var(--border-w-strong) var(--rm-feature), 0 0 26px -6px var(--rm-feature-glow); }
.lp-roadmap-previews .is-featured .lp-roadmap-caption { color: var(--rm-feature-ink); }

/* ══ Presentation chrome: counter, arrows, progress, overview ═══════════════════════════════ */

/* A thin bar along the window's foot: the progress hairline, the counter and the two arrows. It
   fades after a moment without the pointer, and is never printed. */
/* The controls sit in the window's top-right corner: the slide's own folio holds the bottom (its
   wordmark and page count), so the controls stay clear of it. */
.deck-bar-ui {
  position: fixed; top: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px 16px;
  font: var(--weight-medium) 12px/1 var(--lp-font); letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--deck-chrome);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.deck.is-idle .deck-bar-ui { opacity: 0; }
.deck-progress { position: fixed; left: 0; bottom: 0; height: 2px; width: var(--deck-progress, 0%); background: var(--blue-400); z-index: 11; transition: width var(--dur-slow) var(--ease-out); }
/* The slide's name and count stay for screen readers (the count is a live region); the folio
   shows them on the slide. */
.deck-bar-ui .deck-title-ui, .deck-bar-ui .deck-count {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.deck-nav { display: flex; align-items: center; gap: 6px; flex: none; }
.deck-btn {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--lp-border-strong); border-radius: var(--lp-pill);
  background: color-mix(in srgb, var(--lp-bg-dark) 80%, transparent); color: var(--deck-chrome-strong);
  font: inherit; letter-spacing: inherit; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.deck-btn:disabled { opacity: 0.35; cursor: default; }
.deck-btn:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
@media (hover: hover) { .deck-btn:not(:disabled):hover { background: var(--lp-bg-dark-hover); border-color: var(--gray-500); } }
.deck-count {
  display: inline-grid; place-items: center; min-width: 76px; height: 34px; padding: 0 10px; box-sizing: border-box;
  border-radius: var(--lp-pill); background: color-mix(in srgb, var(--lp-bg-dark) 80%, transparent);
  color: var(--deck-chrome-strong);
}

/* Overview (G or the grid button): every slide as a thumbnail, click one to go there. */
.deck.is-overview { overflow-y: auto; }
.deck.is-overview .deck-stage {
  position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 80px max(16px, env(safe-area-inset-left, 0px));
}
.deck.is-overview .deck-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px var(--lp-hairline-dark); }
.deck.is-overview .deck-thumb.is-current { box-shadow: 0 0 0 2px var(--blue-400); }
.deck.is-overview .slide {
  left: 0; top: 0; margin: 0; transform-origin: 0 0; transform: scale(var(--thumb-scale, 0.25));
  opacity: 1; visibility: visible; transition: none; pointer-events: none;
}
.deck:not(.is-overview) .deck-thumb { display: contents; }
.deck-thumb-n {
  position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 4px 7px; border-radius: var(--radius-sm);
  font: var(--weight-medium) 11px/1 var(--lp-font); letter-spacing: 0.04em; color: var(--gray-100); background: color-mix(in srgb, var(--lp-bg-dark) 85%, transparent);
}
.deck:not(.is-overview) .deck-thumb-n { display: none; }

/* ══ Reduced motion and print ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .slide, .deck-progress, .deck-bar-ui { transition: none; }
}

/* Print / Save as PDF: one slide per page at the canvas's size, unscaled, every slide shown,
   no chrome, no motion. */
@media print {
  @page { size: 1280px 720px; margin: 0; }
  html, body { height: auto; overflow: visible; background: none; }
  .deck { position: static; }
  .deck-stage { position: static; }
  .deck-thumb { display: contents !important; }
  .slide {
    position: relative; left: auto; top: auto; margin: 0; transform: none !important;
    opacity: 1 !important; visibility: visible !important; transition: none !important;
    break-after: page; page-break-after: always;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .slide * { animation: none !important; transition: none !important; }
  /* everything in its finished state, whatever the slide's entrance had got to */
  .slide [data-reveal], .slide .deck-grid-line, .slide .deck-bar-fill, .slide .deck-gantt-bar, .slide .lp-roadmap-btn,
  .slide .lp-roadmap-line, .slide .deck-flow::before {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .deck-bar-ui, .deck-progress, .deck-thumb-n { display: none !important; }
}