/* StrikeSimple — Landing page styles shared with the v3 page (strikesimple-landing-2).
   Builds on the design-system tokens in styles.css. Holds the page-wide pieces that need real
   CSS: the page font (--lp-font), the dark section ground and the pill buttons (.lp-btn, plus the
   Products showcase's picture pill .lp-media-cta) — those three as on the v3 page — and this
   page's own shared components: the split sections (.lp-split*), the bands (.lp-band*), the
   trading life cycle (.lp-roadmap*), the footer (.lp-footer*, after the v3 one) and the rail
   (.lp-rail*). Other section-specific styles stay inside their components in Landing.jsx
   (PRODUCTS_CSS, the hero <style>, …).
   The type and buttons follow the v3 page, which follows retool.com's marketing site: one sans
   for all page text — a bold (700) hero headline, semibold (600) section titles with keywords in
   the accent colour, medium (500) item titles and 12px uppercase labels, light (300) 16–18px leads
   at 1.5 — and 40px pill buttons with a ↗ that nudges on hover. */

/* Inter stands in for Retool's Saans (commercial). If a licensed "Saans" is ever added via
   @font-face it wins automatically — it is first in --lp-font. The design system's own faces
   (Archivo, IBM Plex Mono, from tokens/fonts.css) stay loaded: the StrikeSimple logo wordmark
   is set in Archivo by the design system. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap");

/* ── Page tokens ─────────────────────────────────────────────────────────────── */
:root {
  --lp-font: "Saans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --lp-bg-dark: #17181d;          /* dark sections: What We Offer, Assets, Our Mission, Contact, footer */
  --lp-accent: var(--blue-500);
  --lp-accent-hover: var(--blue-600);
  --lp-text: var(--gray-100);     /* text on the dark sections */
  --lp-border-strong: rgba(255, 255, 255, 0.16);
  --lp-pill: 999px;
}

body {
  font-family: var(--lp-font);
  letter-spacing: 0.01em;
}
/* No grey/teal flash over whatever is tapped on touch screens: every control here has its own
   pressed / open / focus states. */
html { -webkit-tap-highlight-color: transparent; }

.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. */
main section[tabindex="-1"]:focus { outline: none; }

/* ── Buttons (Button in Landing.jsx) ─────────────────────────────────────────── */
/* Retool-style pills: 40px tall, 14px text, 20px side padding. */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  height: 40px; padding: 0 20px;
  border-radius: var(--lp-pill);
  border: 1px solid transparent;
  font: 500 14px/1.2 var(--lp-font);
  letter-spacing: 0;
  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);
}
.lp-btn:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }
.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. */
.lp-btn--secondary {
  background: var(--lp-bg-dark); color: var(--lp-text); border-color: var(--lp-border-strong);
}
.lp-hero .lp-btn--secondary {
  background: rgba(255, 255, 255, 0.55); color: var(--gray-900); border-color: rgba(20, 20, 60, 0.16);
}
.lp-hero .lp-btn:focus-visible { outline-color: var(--blue-500); }
.lp-btn--primary:active, .lp-btn--secondary:active { transform: translateY(0); }
.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. */
@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: #25262b; border-color: rgba(255, 255, 255, 0.32); transform: translateY(-1px); }
  .lp-hero .lp-btn--secondary:hover { background: var(--white); border-color: rgba(20, 20, 60, 0.3); }
  .lp-btn:hover .lp-btn-arrow { transform: translate(2px, -2px); }
}

/* 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. */
.lp-hero-tile {
  display: flex; flex-direction: column; align-items: stretch;
  min-width: 280px; box-sizing: border-box; padding: 26px 32px 24px 40px;
  border-radius: var(--radius-md);
  background: var(--blue-500); color: var(--white); text-decoration: none;
  font: 500 14px/1.2 var(--lp-font); letter-spacing: 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); }
.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: 0; transition: transform var(--dur-fast) var(--ease-out); }
.lp-hero-tile:hover .lp-hero-tile-label > span { transform: translate(2px, -2px); }
@media (max-width: 860px) {
  .lp-hero-tile { min-width: 220px; padding: 20px 22px 18px 26px; }
  .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 Products showcase's "Try our demo" pill: rises in at the frame's corner on hover / keyboard
   focus (the hover / touch rules live with the section, in PRODUCTS_CSS). */
.lp-media-cta {
  position: absolute; right: 16px; bottom: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.5em;
  height: 36px; padding: 0 16px;
  border-radius: var(--lp-pill);
  background: var(--lp-accent); color: var(--white);
  font: 500 14px/1.2 var(--lp-font); letter-spacing: 0; 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;
}

@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; }
}
@media print {
  .lp-btn--secondary { color: #111; border-color: rgba(17, 17, 17, 0.4); background: none; }
}

/* ── Split sections (SplitSection in Landing.jsx: What We Offer, Assets) ───────────────────── */
/* Two halves: the section head over a single-open accordion on the left, a full-height stage with
   the open item's media on the right. Below 1080px they stack: no stage, the open item shows its
   media under its copy. `.lp-split--sticky` (What We Offer on wide, tall screens) pins the halves
   for a stretch of scrolling that steps through the items. */
.lp-split-pin {
  flex: 1; display: grid;
  grid-template-columns: var(--split-cols, minmax(0, 1fr) minmax(0, 1fr));
}
.lp-split-main { padding: 64px 40px; }
.lp-split-list { max-width: 640px; margin-top: clamp(32px, 4vw, 48px); }

/* One item: its label is the trigger — quiet when closed, the headline when open (size, leading
   and colour ease between the two) — and its panel slides open below it. */
.lp-split-item + .lp-split-item { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.lp-split-heading { margin: 0; }
.lp-split-trigger {
  display: flex; align-items: center; gap: 0.5em; width: 100%; margin: 0; padding: 22px 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--lp-font); font-weight: 500;
  font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--gray-500);
  border-radius: 4px;
  transition: font-size 0.5s var(--ease-out), padding 0.5s var(--ease-out), color var(--dur-slow) var(--ease-out);
}
@media (hover: hover) { .lp-split-trigger[aria-expanded="false"]:hover { color: var(--gray-200); } } /* not stuck on after a tap */
.lp-split-trigger[aria-expanded="true"] {
  padding: 28px 0 0;
  font-size: clamp(24px, 2.3vw, 34px); line-height: 1.1;
  color: var(--gray-100); cursor: default;
}
/* an item's icon (What We Offer): sized with the label, in its colour — the accent once open */
.lp-split-icon { flex: none; display: inline-flex; width: 0.85em; height: 0.85em; transition: color var(--dur-slow) var(--ease-out); }
.lp-split-icon svg { display: block; width: 100%; height: 100%; }
.lp-split-trigger[aria-expanded="true"] .lp-split-icon { color: var(--blue-300); }
/* listStacked (What We Offer on phones / tablets): every item open, its label a plain heading in
   the open label's style */
.lp-split-label {
  display: flex; align-items: center; gap: 0.5em; padding: 28px 0 0;
  font-family: var(--lp-font); font-weight: 500; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.1;
  letter-spacing: -0.01em; color: var(--gray-100);
}
.lp-split-label .lp-split-icon { color: var(--blue-300); }
/* The label's text; its second half (an item's `tail`) in the same face, set back a step. */
.lp-split-name { min-width: 0; text-wrap: balance; }
.lp-split-tail { opacity: 0.6; }
/* An item's name in capitals (the Product section's Wing, Range and Anchor), tracked out a touch;
   its tail keeps the closed label's size open or closed, so only the name grows, and drops to the
   next line whole when the column is too narrow for both (rather than splitting mid-phrase). */
.lp-split-caps { text-transform: uppercase; letter-spacing: 0.02em; }
.lp-split-tail--fixed { display: inline-block; font-size: clamp(18px, 1.6vw, 24px); }
/* SplitSection's measuring pass: every label in its open, then its closed style, transitions off. */
.lp-split-list.is-measuring .lp-split-trigger { transition: none; }
.lp-split-list.is-sizing-open .lp-split-trigger { padding: 28px 0 0; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.1; }
.lp-split-list.is-sizing-closed .lp-split-trigger { padding: 22px 0; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; }
.lp-split-trigger:focus-visible, .lp-split-panel a:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }
.lp-split-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}
.lp-split-panel[data-open="true"] { grid-template-rows: 1fr; }
/* min-height 0 + overflow hidden let the row collapse. (So switching items never changes the
   section's height, SplitSection holds the whole list at its tallest state — the slack sits under
   the last item.) */
/* (the inline padding / negative margin give focus rings room inside the clip without moving
   anything) */
.lp-split-clip { min-height: 0; overflow: hidden; padding-inline: 6px; margin-inline: -6px; }
.lp-split-body {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.5s var(--ease-out);
}
.lp-split-panel[data-open="true"] .lp-split-body { opacity: 1; transform: none; transition-delay: 0.12s; }
/* Stacked: the item closing above a newly opened one snaps shut (see SplitSection's open()). */
.lp-split-item.is-snap .lp-split-trigger, .lp-split-item.is-snap .lp-split-panel, .lp-split-item.is-snap .lp-split-body { transition: none; }
.lp-split-content { padding: 18px 0 32px; }
.lp-split-text {
  margin: 0; max-width: 560px;
  font-family: var(--lp-font); font-weight: 300;
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; letter-spacing: 0.01em;
  color: var(--gray-400); text-wrap: pretty;
}
.lp-split-text strong { font-weight: 400; color: var(--gray-100); }
.lp-split-content .lp-btn { margin-top: 28px; }
.lp-split-inline { margin-top: 28px; max-width: 560px; }

/* The stage: the full height of the section. */
.lp-split-stage {
  position: relative; overflow: hidden; min-height: 560px;
  background: linear-gradient(180deg, #1d1e25 0%, #141519 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.lp-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);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 100%);
          mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 100%);
}
/* a soft glow per item in its colour (--split-glow), the open item's showing */
.lp-split-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 42% at 50% 50%, var(--split-glow), transparent);
  opacity: 0; transition: opacity 0.6s var(--ease-out);
}
.lp-split-glow.is-active { opacity: 1; }
/* stage="fade": every item's media stacked, the open item's fading in */
.lp-split-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 2.5vw, 40px);
  opacity: 0; transform: scale(0.97); pointer-events: none; /* faded-out slides sit on top of the open one */
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}
.lp-split-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.lp-split-slide > * { width: 100%; }
/* stage="deck": the media are cards in one stack. --e (0–1) is how far a card has come up into
   the stack from below the stage; --d (0–3) how many cards lie on top of it — each one nudges it
   up, shrinks it and dims it, so the deck's edges show above the top card. Set from the scroll
   position on sticky sections (.is-scrubbing: no transition), from the open item otherwise. */
.lp-split-deck { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(32px, 4vw, 64px); }
.lp-split-card {
  position: relative; --split-radius: 24px;
  grid-area: 1 / 1; width: min(560px, 100%);
  --e: 1; --d: 0;
  transform: translateY(calc((1 - var(--e)) * (55vh + 60%) - var(--d) * 7%)) scale(calc(1 - var(--d) * 0.05));
  transition: transform 0.7s var(--ease-out);
  will-change: transform;
}
.lp-split-card::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--split-radius); pointer-events: none;
  background: #0b0b0e; opacity: calc(min(var(--d), 1) * 0.55);
  transition: opacity 0.7s var(--ease-out);
}
.lp-split-deck.is-scrubbing .lp-split-card, .lp-split-deck.is-scrubbing .lp-split-card::after { transition: none; }
/* A card waiting below has to clear the stage, which is taller than the viewport on short windows
   (the non-sticky fallback): measure the offset from the deck itself where container units work
   — half the deck plus most of the card always clears its bottom edge. */
@supports (height: 1cqh) {
  .lp-split-deck { container-type: size; }
  .lp-split-card { transform: translateY(calc((1 - var(--e)) * (50cqh + 60%) - var(--d) * 7%)) scale(calc(1 - var(--d) * 0.05)); }
}
/* A card: round corners and no border. The pictures carry their own hairline outline and tighter
   rounded corners; scaled up 2% (1% off each side), the outline falls outside the frame and the
   frame's rounder corners clip theirs, so each card shows a single clean edge. */
.lp-split-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--split-radius, 24px); overflow: hidden;
  background: #151a22; /* the pictures' own ground, while one loads */
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
.lp-split-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); }

/* Sticky: the section is as tall as its scroll track (set inline); the halves pin to the
   viewport, the left one centred and sized to fit it. */
.lp-split--sticky .lp-split-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.lp-split--sticky .lp-split-stage { min-height: 0; }
.lp-split--sticky .lp-split-main {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(32px, 6vh, 64px) 40px;
}
.lp-split--sticky .lp-split-list { margin-top: clamp(24px, 4vh, 48px); }
.lp-split--sticky .lp-split-trigger { padding: clamp(10px, 2vh, 22px) 0; font-size: clamp(17px, min(1.6vw, 2.8vh), 24px); }
.lp-split--sticky .lp-split-list.is-sizing-closed .lp-split-trigger { padding: clamp(10px, 2vh, 22px) 0; font-size: clamp(17px, min(1.6vw, 2.8vh), 24px); }
.lp-split--sticky .lp-split-trigger[aria-expanded="true"],
.lp-split--sticky .lp-split-list.is-sizing-open .lp-split-trigger { padding: clamp(14px, 2.6vh, 28px) 0 0; font-size: clamp(22px, min(2.3vw, 3.8vh), 34px); }
.lp-split--sticky .lp-split-content { padding: clamp(12px, 2vh, 18px) 0 clamp(16px, 3vh, 32px); }
.lp-split--sticky .lp-split-content .lp-btn { margin-top: clamp(16px, 2.6vh, 28px); }

@media (max-width: 1080px) {
  .lp-split-pin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .lp-split-main { padding: 0; } /* the section's own mobile padding (.lp-section) takes over */
}
@media (prefers-reduced-motion: reduce) {
  .lp-split-trigger, .lp-split-panel, .lp-split-body, .lp-split-slide, .lp-split-glow,
  .lp-split-card, .lp-split-card::after { transition: none; }
}
@media print {
  .lp-split-stage { display: none; }
  .lp-split-panel { grid-template-rows: 1fr; }
  .lp-split-body { opacity: 1; transform: none; }
}

/* ── Rail (Rail in Landing.jsx) ──────────────────────────────────────────────── */
/* 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. */
.lp-rail { width: 72px; 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);
  -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);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.14), 1px 0 0 rgba(10, 10, 30, 0.08);
}
/* 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));
}
.lp-rail [data-tone="light"] {
  --rail-tint: rgba(255, 255, 255, 0.5); --rail-tint-on: rgba(255, 255, 255, 0.72);
  --rail-line: rgba(20, 20, 60, 0.08);
  --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);
  --rail-line: rgba(255, 255, 255, 0.08);
  --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);
}
.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); }
  .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: 72px solid transparent; }
.lp-rail .lp-rail-label { white-space: nowrap; opacity: 0; transition: opacity 0.2s var(--ease-out); }
.lp-rail-logo { position: relative; height: 76px; }
.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: 244px; 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: 244px; 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; }
@media (prefers-reduced-motion: reduce) {
  .lp-rail, .lp-rail .lp-rail-label, .lp-rail-logo > span { transition: none; }
}

/* ── Bands (Band in Landing.jsx: Our Mission, Contact) ───────────────────────────────────── */
/* 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-bg-dark);
  --band-kicker: var(--blue-300);
  --band-title: var(--gray-100);
  --band-text: var(--gray-400);
  --band-em: var(--gray-100);
  --band-hl: var(--blue-300); /* the title's keyword */
  --band-hairline: rgba(255, 255, 255, 0.09);
  --rm-line: rgba(155, 155, 255, 0.4);
  --rm-progress-a: var(--blue-400);
  --rm-progress-b: var(--blue-300);
  --rm-progress-glow: rgba(87, 87, 255, 0.6);
  --rm-dot: var(--blue-400);
  --rm-dot-on: var(--blue-300);
  --rm-halo: rgba(87, 87, 255, 0.2);
  --rm-halo-on: rgba(87, 87, 255, 0.28);
  --rm-glow: rgba(87, 87, 255, 0.45);
  --rm-glow-on: rgba(87, 87, 255, 0.75);
  --rm-name: var(--gray-100);
  --rm-pop-bg: #1f2027;
  --rm-pop-border: rgba(255, 255, 255, 0.12);
  --rm-pop-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --rm-pop-title: var(--gray-100);
  --rm-pop-text: var(--gray-300);
  --rm-tag-text: var(--blue-300);
  --rm-tag-bg: rgba(87, 87, 255, 0.16);
  --rm-tile: rgba(255, 255, 255, 0.05);
  --rm-soon-text: var(--gray-300);
  --rm-soon-mark: var(--blue-300);
  --rm-soon-hatch: rgba(155, 155, 255, 0.07);
  --rm-soon-glow: rgba(87, 87, 255, 0.24);
  --rm-caption: var(--blue-300);
  --rm-focus: var(--blue-300);
  --rm-flow: var(--blue-300);                  /* the » between steps */
  --rm-feature: #f2c46d;                       /* a featured preview: gold (its ring) */
  --rm-feature-ink: #f2c46d;                   /* … and its text */
  --rm-feature-bg: rgba(242, 196, 109, 0.12);
  --rm-feature-glow: rgba(242, 196, 109, 0.35);
  position: relative; overflow: hidden;
  background: var(--band-bg);
  padding: clamp(80px, 9vw, 120px) 40px;
  text-align: center;
}
.lp-band--dark { --band-bg: radial-gradient(50% 60% at 50% 72%, rgba(42, 43, 245, 0.16) 0%, rgba(42, 43, 245, 0) 70%), var(--lp-bg-dark); }
.lp-band--light, .lp-band--lavender {
  --band-bg: var(--white);
  --band-kicker: var(--blue-600);
  --band-title: var(--gray-900);
  --band-text: var(--gray-600);
  --band-em: var(--gray-900);
  --band-hl: var(--blue-500);
  --band-hairline: rgba(20, 20, 22, 0.1);
  --rm-line: rgba(42, 43, 245, 0.28);
  --rm-progress-a: var(--blue-500);
  --rm-progress-b: var(--blue-400);
  --rm-progress-glow: rgba(42, 43, 245, 0.35);
  --rm-dot: var(--blue-500);
  --rm-dot-on: var(--blue-500);
  --rm-halo: rgba(42, 43, 245, 0.14);
  --rm-halo-on: rgba(42, 43, 245, 0.2);
  --rm-glow: rgba(42, 43, 245, 0.2);
  --rm-glow-on: rgba(42, 43, 245, 0.4);
  --rm-name: var(--gray-900);
  --rm-pop-bg: var(--white);
  --rm-pop-border: rgba(20, 20, 60, 0.12);
  --rm-pop-shadow: 0 24px 60px -28px rgba(20, 20, 80, 0.35);
  --rm-pop-title: var(--gray-900);
  --rm-pop-text: var(--gray-700);
  --rm-tag-text: var(--blue-600);
  --rm-tag-bg: rgba(42, 43, 245, 0.08);
  --rm-tile: rgba(20, 20, 60, 0.05);
  --rm-soon-text: var(--gray-700);
  --rm-soon-mark: var(--blue-500);
  --rm-soon-hatch: rgba(42, 43, 245, 0.06);
  --rm-soon-glow: rgba(42, 43, 245, 0.12);
  --rm-caption: var(--blue-500);
  --rm-focus: var(--blue-500);
  --rm-flow: var(--blue-500);
  --rm-feature: var(--amber-500);
  --rm-feature-ink: #6b4500; /* amber-500 is too light for small text here (AA on white and lavender) */
  --rm-feature-bg: rgba(176, 122, 18, 0.1);
  --rm-feature-glow: rgba(176, 122, 18, 0.3);
}
.lp-band--lavender {
  --band-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%);
  --band-hairline: rgba(20, 20, 60, 0.12);
  --rm-line: rgba(42, 43, 245, 0.32);
}
.lp-band--cobalt {
  --band-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%);
  --band-kicker: rgba(255, 255, 255, 0.72);
  --band-title: var(--white);
  --band-text: rgba(255, 255, 255, 0.78);
  --band-em: var(--white);
  --band-hl: #c9c9ff;
  --band-hairline: rgba(255, 255, 255, 0.18);
  --rm-line: rgba(255, 255, 255, 0.45);
  --rm-progress-a: rgba(255, 255, 255, 0.6);
  --rm-progress-b: var(--white);
  --rm-progress-glow: rgba(255, 255, 255, 0.55);
  --rm-dot: var(--white);
  --rm-dot-on: var(--white);
  --rm-halo: rgba(255, 255, 255, 0.18);
  --rm-halo-on: rgba(255, 255, 255, 0.26);
  --rm-glow: rgba(255, 255, 255, 0.35);
  --rm-glow-on: rgba(255, 255, 255, 0.6);
  --rm-name: var(--white);
  --rm-pop-bg: var(--white);
  --rm-pop-border: rgba(255, 255, 255, 0.4);
  --rm-pop-shadow: 0 24px 60px -24px rgba(10, 10, 60, 0.6);
  --rm-pop-title: var(--gray-900);
  --rm-pop-text: var(--gray-700);
  --rm-tag-text: var(--blue-600);
  --rm-tag-bg: rgba(42, 43, 245, 0.08);
  --rm-tile: rgba(20, 20, 60, 0.05);
  --rm-soon-text: var(--gray-700);
  --rm-soon-mark: var(--blue-500);
  --rm-soon-hatch: rgba(42, 43, 245, 0.06);
  --rm-soon-glow: rgba(42, 43, 245, 0.12);
  --rm-caption: var(--blue-500);
  --rm-focus: var(--white);
  --rm-flow: var(--white);
  --rm-feature: #ffd58a;
  --rm-feature-ink: #ffe9bd; /* paler than the ring, for AA on the pill under the band's glow */
  --rm-feature-bg: rgba(255, 213, 138, 0.16);
  --rm-feature-glow: rgba(255, 213, 138, 0.4);
}
/* cobalt's popover is white: its gold, the light themes' */
.lp-band--cobalt .lp-roadmap-pop { --rm-feature: var(--amber-500); --rm-feature-ink: #6b4500; --rm-feature-glow: rgba(176, 122, 18, 0.3); }
.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); }
#contact.lp-band::after { display: none; } /* the footer's top border draws this line */
.lp-band-inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }
.lp-band-kicker {
  display: inline-block;
  font: 500 12px/1.2 var(--lp-font); letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--band-kicker);
}
.lp-band-title {
  max-width: 900px; margin: 24px auto 0;
  font: 600 clamp(32px, 3.8vw, 52px)/1.05 var(--lp-font); letter-spacing: -0.02em;
  color: var(--band-title); text-wrap: balance;
}
.lp-band-sub {
  max-width: 620px; margin: 24px auto 0;
  font: 300 clamp(16px, 1.3vw, 19px)/1.5 var(--lp-font); letter-spacing: 0.01em;
  color: var(--band-text); text-wrap: pretty;
}
.lp-band-sub em { font-style: normal; color: var(--band-em); }
.lp-band-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 32px; }
.lp-band--light .lp-btn--secondary, .lp-band--lavender .lp-btn--secondary {
  background: rgba(255, 255, 255, 0.55); color: var(--gray-900); border-color: rgba(20, 20, 60, 0.16);
}

/* ── Trading life cycle (TradingLifecycle in Landing.jsx) ────────────────────────────────── */
/* A roadmap: a line across the band with a dot per step, labels alternating below / above it.
   Hovering or focusing a step dims the others, lights the line up to it and opens a popover
   with its detail — title and tag, explanation, square previews — on the other side of the line
   (the track reserves room for the tallest: --pop-h, measured by TradingLifecycle). Narrow
   screens get a vertical list with the details inline. Colours come from the band. */
.lp-roadmap { margin-top: clamp(40px, 5vw, 64px); }
.lp-roadmap-track { position: relative; height: max(360px, calc(2 * (var(--pop-h, 0px) + 40px))); }
.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%);
  transform: scaleX(0);
  transition: transform 1.2s var(--ease-out) 0.15s, opacity var(--dur-slow) var(--ease-out);
}
.lp-roadmap.is-in .lp-roadmap-line { transform: none; }
.lp-roadmap.has-active .lp-roadmap-line { opacity: 0.45; }
/* the stretch of line up to the open step, brighter */
.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; }
/* The button is the dot plus its label; the dot sits on the line. */
.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;
  opacity: 0; transition: opacity 0.6s var(--ease-out) calc(0.35s + var(--i) * 0.12s);
}
.lp-roadmap.is-in .lp-roadmap-btn { opacity: 1; }
.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: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--rm-dot);
  box-shadow: 0 0 0 6px 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 8px var(--rm-halo-on), 0 0 28px var(--rm-glow-on);
}
/* hit area around the dot (the label is clickable too) */
.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; }
.lp-roadmap-name { display: block; font: 500 14px/1.3 var(--lp-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rm-name); }
/* a featured preview's caption under its step's title: a gold pill */
.lp-roadmap-feature {
  display: inline-flex; align-items: center; height: 22px; margin-top: 8px; padding: 0 10px; border-radius: var(--lp-pill);
  font: 500 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-step.is-up .lp-roadmap-text { display: flex; flex-direction: column-reverse; align-items: center; }
/* The » between two steps, on the line halfway between their dots: it comes in after the line
   (its path, once), then brightens and nudges forward in turn, left to right, over and over (the
   svg — kept there so the browser runs it on the compositor; a transform on an SVG path costs a
   layout every frame), so the line reads as a flow; it dims with the line while a step is open
   (the span). */
.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)); animation: lp-flow 2.8s ease-in-out calc(var(--i) * 0.35s) infinite; }
.lp-roadmap-flow path { opacity: 0; }
.lp-roadmap.is-in .lp-roadmap-flow path { animation: lp-flow-in 0.6s var(--ease-out) calc(0.9s + var(--i) * 0.12s) both; }
@keyframes lp-flow-in { to { opacity: 1; } }
@keyframes lp-flow { 0%, 60%, 100% { opacity: 0.6; transform: none; } 25% { opacity: 1; transform: translateX(3px); } }
/* the popover: on the other side of the line from the label, its copy beside its previews.
   Centred on the dot unless that would run past an end of the track: --pop-x (set by
   TradingLifecycle) is its left edge from the dot. */
.lp-roadmap-pop {
  position: absolute; left: 0; z-index: 3;
  display: grid; grid-template-columns: 240px; grid-auto-flow: column; grid-auto-columns: auto;
  column-gap: 20px; align-items: start; width: max-content;
  transform: translate(var(--pop-x, -50%), 6px);
  padding: 18px 20px; text-align: left;
  background: var(--rm-pop-bg); border: 1px solid var(--rm-pop-border); border-radius: 12px;
  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% + 26px); }
.lp-roadmap-step.is-up .lp-roadmap-pop { top: calc(50% + 26px); }
.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; }
/* An invisible bridge across the gap between the open popover and its dot, so the pointer can
   move from one to the other without the step closing on the way: it fans out from the dot's
   hit width at the line (the dot is -1 × --pop-x along the popover) to the popover's whole edge,
   so any straight path from the dot into the popover stays on it. */
.lp-roadmap-pop::after { content: ""; position: absolute; left: 0; right: 0; height: 28px; }
.lp-roadmap-step.is-down .lp-roadmap-pop::after {
  top: 100%;
  clip-path: polygon(0 0, 100% 0, calc(22px - var(--pop-x, -50%)) 100%, calc(-22px - var(--pop-x, -50%)) 100%);
}
.lp-roadmap-step.is-up .lp-roadmap-pop::after {
  bottom: 100%;
  clip-path: polygon(calc(-22px - var(--pop-x, -50%)) 0, calc(22px - var(--pop-x, -50%)) 0, 100% 100%, 0 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; font: 500 14px/1.3 var(--lp-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rm-pop-title); }
.lp-roadmap-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--lp-pill);
  font: 500 10px/1 var(--lp-font); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  color: var(--rm-tag-text); background: var(--rm-tag-bg);
}
.lp-roadmap-pop p { margin: 0; font: 300 14px/1.5 var(--lp-font); letter-spacing: 0.01em; color: var(--rm-pop-text); }
/* the previews: squares in a row, each captioned in capitals under it */
.lp-roadmap-previews {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 10px;
}
.lp-roadmap-frame {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 12px; background: var(--rm-tile);
}
.lp-roadmap-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* not built yet: a hatched square lit from below, the brand mark turning slowly over the note */
.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: 500 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); animation: lp-soon-spin 12s linear infinite; }
@keyframes lp-soon-spin { to { transform: rotate(360deg); } }
/* only while it can be seen: the open popover's, or inline on narrow screens */
.lp-roadmap-step:not(.is-active) .lp-roadmap-soon-mark { animation-play-state: paused; }
.lp-roadmap-caption {
  display: block; margin-top: 8px;
  font: 500 10.5px/1.3 var(--lp-font); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--rm-caption);
}
/* a preview that links to the demo: its picture zooms in a touch on hover, a ↗ after its caption
   (joined to its last word by a no-break space, so it never wraps onto a line of its own) */
.lp-roadmap-link { display: block; color: inherit; text-decoration: none; border-radius: 12px; }
.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-link:hover img { transform: scale(1.04); }
.lp-roadmap-arrow { opacity: 0.7; transition: opacity var(--dur-base) var(--ease-out); }
.lp-roadmap-link:hover .lp-roadmap-arrow { opacity: 1; }
/* a featured preview: its square ringed in gold, lit faintly, its caption gold */
.lp-roadmap-previews .is-featured .lp-roadmap-frame { box-shadow: 0 0 0 1.5px var(--rm-feature), 0 0 26px -6px var(--rm-feature-glow); }
.lp-roadmap-previews .is-featured .lp-roadmap-caption { color: var(--rm-feature-ink); }

@media (max-width: 860px) {
  .lp-roadmap-track { height: auto; text-align: left; }
  .lp-roadmap-line { top: 10px; bottom: 10px; left: 7px; right: auto; width: 1px; height: auto; margin: 0; transform-origin: center top;
    background: linear-gradient(180deg, var(--rm-line), var(--rm-line) 90%, transparent); transform: scaleY(0); }
  .lp-roadmap.is-in .lp-roadmap-line { transform: none; }
  .lp-roadmap-progress { display: none; }
  .lp-roadmap-steps { display: flex; flex-direction: column; gap: 40px; }
  /* the » down the line, halfway between a step and the next */
  .lp-roadmap-flow { left: 7.5px; top: auto; bottom: -20px; transform: translate(-50%, 50%) rotate(90deg); }
  .lp-roadmap.has-active .lp-roadmap-flow { opacity: 1; }
  .lp-roadmap-step.is-up .lp-roadmap-text { display: block; }
  .lp-roadmap-step.is-up .lp-roadmap-feature { margin: 8px 0 0; }
  .lp-roadmap-step { position: relative; left: auto; width: auto; padding-left: 36px; }
  .lp-roadmap.has-active .lp-roadmap-step:not(.is-active) { opacity: 1; } /* every step's text is shown here */
  .lp-roadmap-btn { position: static; width: auto; height: auto; cursor: default; }
  .lp-roadmap-btn::before { display: none; }
  .lp-roadmap-dot { left: 1px; top: 4px; transform: none; }
  .lp-roadmap-step.is-active .lp-roadmap-dot { transform: none; }
  .lp-roadmap-text, .lp-roadmap-step.is-down .lp-roadmap-text, .lp-roadmap-step.is-up .lp-roadmap-text {
    position: static; transform: none; width: auto; max-width: none; text-align: left;
  }
  .lp-roadmap-pop, .lp-roadmap-step.is-down .lp-roadmap-pop, .lp-roadmap-step.is-up .lp-roadmap-pop,
  .lp-roadmap-step.is-active .lp-roadmap-pop {
    position: static; display: block; width: auto; transform: none; margin-top: 8px; padding: 0;
    background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible;
  }
  .lp-roadmap-pop p { color: var(--band-text); }
  .lp-roadmap-pop::after { display: none; }
  .lp-roadmap-pop-head { margin-bottom: 0; }
  .lp-roadmap-pop-title { display: none; } /* the label above already names the step */
  .lp-roadmap-tag { margin-bottom: 10px; }
  .lp-roadmap-previews {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px;
    max-width: 440px; margin-top: 16px;
  }
  .lp-roadmap-step:not(.is-active) .lp-roadmap-soon-mark { animation-play-state: running; } /* always shown here */
  /* inline on the cobalt ground rather than in the white popover */
  .lp-band--cobalt .lp-roadmap-pop {
    --rm-tag-text: var(--white); --rm-tag-bg: rgba(255, 255, 255, 0.14);
    --rm-tile: rgba(255, 255, 255, 0.1); --rm-soon-text: var(--white); --rm-soon-mark: var(--white);
    --rm-soon-hatch: rgba(255, 255, 255, 0.08); --rm-soon-glow: rgba(255, 255, 255, 0.16);
    --rm-caption: #c9c9ff;
    --rm-feature: #ffd58a; --rm-feature-ink: #ffe9bd; --rm-feature-glow: rgba(255, 213, 138, 0.4);
  }
}
@media (max-width: 600px) {
  .lp-roadmap-previews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-band::before, .lp-band::after, .lp-roadmap-line, .lp-roadmap-progress, .lp-roadmap-step,
  .lp-roadmap-btn, .lp-roadmap-dot, .lp-roadmap-pop, .lp-roadmap-flow,
  .lp-roadmap-link img, .lp-roadmap-arrow { transition: none; }
  .lp-roadmap-soon-mark, .lp-roadmap-flow svg { animation: none; }
  .lp-roadmap.is-in .lp-roadmap-flow path { animation: none; opacity: 1; }
}

/* ── Footer (Footer in Landing.jsx), as on the v3 page ───────────────────────────────────── */
.lp-footer {
  background: var(--lp-bg-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 64px 40px 40px;
  color: var(--gray-400);
}
.lp-footer-grid {
  display: grid;
  /* brand, Explore, Get started, Community, Contact (wider: the email is written out) */
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: 40px 32px;
}
.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; }
.lp-footer-brand p {
  margin: 0; max-width: 300px;
  font: 300 14px/1.5 var(--lp-font); letter-spacing: 0.01em;
  color: var(--gray-500);
}
.lp-footer-col h2 {
  margin: 0 0 14px;
  font: 500 12px/1.2 var(--lp-font); letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--gray-500);
}
.lp-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-footer-col a {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 14px/1.5 var(--lp-font);
  color: var(--gray-400); text-decoration: none; border-radius: 3px;
  transition: color var(--dur-base) var(--ease-out);
}
.lp-footer-col a:hover { color: var(--gray-100); }
.lp-footer-text { display: inline-flex; align-items: center; gap: 6px; font: 400 14px/1.5 var(--lp-font); color: var(--gray-400); }
.lp-footer-col svg { flex: none; margin-right: 2px; color: var(--gray-500); }
.lp-footer-col--contact a { gap: 6px; overflow-wrap: anywhere; }
/* "Coming soon": greyed, not a link; says so beside it on hover / keyboard focus. */
.lp-footer-soon {
  position: relative; display: inline-flex; align-items: center;
  font: 400 14px/1.5 var(--lp-font); color: var(--gray-600); cursor: default; border-radius: 3px;
}
.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);
  font: 400 11px/1.3 var(--lp-font); letter-spacing: 0.01em; white-space: nowrap; color: var(--gray-300);
  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%); }
.lp-footer a:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }
.lp-footer-bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font: 400 12px/1.2 var(--lp-font); letter-spacing: 0.01em;
  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: 3px; transition: color var(--dur-base) var(--ease-out); }
.lp-footer-legal a:hover { color: var(--gray-100); }
@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; }
}
@media (max-width: 1100px) {
  .lp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lp-footer { padding: 48px 16px 32px; }
}
@media (max-width: 600px) {
  .lp-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp-band-actions { flex-direction: column; align-items: stretch; }
}

/* ── Primitives stage (Primitives in Landing.jsx) ────────────────────────────────────────── */
/* A plain stage (no gradient, dot grid or glow): the open primitive's diagram (centred) over its
   name in capitals (.lp-strat-caption) — for the recursive payoff, the wheel's own caption. The
   variant's description sits on the left (.lp-prim-detail). Switching a variant fades the new
   diagram and text in (.lp-strat-in). */
.lp-split-stage--plain { background: var(--lp-bg-dark); }
.lp-split-stage--plain::before { display: none; }
.lp-strat { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; text-align: center; }
.lp-strat-diagram { width: 100%; display: flex; justify-content: center; }
.lp-strat-diagram > * { margin-inline: auto; }
.lp-beam-motion { width: 100%; min-width: 0; }
.lp-strat-caption { display: block; font: 500 12px/1.2 var(--lp-font); letter-spacing: 0.01em; text-transform: uppercase; color: var(--blue-300); }
/* the chosen variant's description, under the buttons on the left */
.lp-prim-detail { margin-top: 18px; }
.lp-strat-in { animation: lp-strat-in var(--dur-slow) var(--ease-out) both; }
/* A variant's description / caption over its siblings', laid out invisibly in the same cell. */
.lp-strat-stack { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.lp-strat-stack > * { grid-area: 1 / 1; }
.lp-strat-stack > [aria-hidden] { visibility: hidden; }
/* The ladders fade in with the copy (.lp-strat-in) rather than playing their own, slower entrance.
   (Both share one viewBox size, each centred on its drawing, so switching between them moves
   nothing and each sits centred.) */
.lp-strat .call-ladder, .lp-strat .call-ladder svg, .lp-strat .put-ladder, .lp-strat .put-ladder svg { animation: none; }
/* The splits (Wing, Anchor) are a small cut of the wheel: held to 60% of the stage, so their blocks
   come out about 1.25× the ladders' (Range) at any width rather than ballooning — but never under
   360px, so they stay legible on phones. */
.lp-strat .split-graph { max-width: max(60%, 360px); }
@keyframes lp-strat-in { from { opacity: 0; transform: translateY(6px); } }
/* The variant buttons under a primitive's line: two pills (.lp-btn), the chosen one filled. */
.lp-variant { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lp-variant .lp-btn { min-width: 84px; margin-top: 0; } /* not the panel CTA's top margin */
@media (prefers-reduced-motion: reduce) {
  .lp-strat-in { animation: none; }
}
.lp-strat--inline { align-items: stretch; text-align: left; gap: 16px; }

/* ── A primitive's figure (Primitives in Landing.jsx) ──────────────────────────────────── */
/* One per variant on the stage, straight on the ground (no card): the diagram over its name in
   capitals, then its payoff chart over its caption — both captions centred, in the lavender of
   the wheel's. */
.lp-prim-card { position: relative; width: min(720px, 100%); box-sizing: border-box; text-align: left; }
.lp-prim-card-name { margin-top: 14px; text-align: center; }
.lp-prim-card-payoff { margin-top: 36px; }
.lp-strat--inline .lp-prim-card { width: 100%; }
.lp-strat--inline .lp-prim-card-payoff { margin-top: 28px; }

/* ── Payoff chart (PayoffChart.jsx), at the foot of each primitive's figure ───────────────── */
/* A schematic: 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. Text stays in the
   grey text tones. */
.lp-payoff { width: 100%; margin: 0 auto; }
.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: 400 12px/1.2 var(--lp-font); letter-spacing: 0.01em; 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(--blue-300); }
.lp-payoff-swatch--now { border-top: 1.5px dashed rgba(255, 255, 255, 0.62); }
.lp-payoff svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-payoff-axis { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.lp-payoff-zero { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; }
.lp-payoff-strike { stroke: rgba(155, 155, 255, 0.2); stroke-width: 1; }
.lp-payoff-label {
  font: 400 12px var(--lp-font); letter-spacing: 0.01em; fill: var(--gray-500);
  paint-order: stroke; stroke: var(--lp-bg-dark); stroke-width: 3px; stroke-linejoin: round;
}
.lp-payoff-sub { font-size: 9px; }
.lp-payoff-wash { stroke: none; animation: lp-payoff-fade 0.6s var(--ease-out) 0.35s both; }
.lp-payoff-wash--up { fill: rgba(31, 157, 99, 0.16); }
.lp-payoff-wash--down { fill: rgba(210, 59, 59, 0.14); }
.lp-payoff-line {
  fill: none; stroke: var(--blue-300); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(87, 87, 255, 0.55));
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: lp-payoff-draw 0.9s var(--ease-out) 0.1s both;
}
.lp-payoff-now {
  fill: none; stroke: rgba(255, 255, 255, 0.62); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linecap: round;
  animation: lp-payoff-fade 0.6s var(--ease-out) 0.5s both;
}
.lp-payoff-even circle { fill: var(--blue-300); 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; } }
@media (prefers-reduced-motion: reduce) {
  .lp-payoff-line, .lp-payoff-wash, .lp-payoff-even, .lp-payoff-now { animation: none; }
}