/* Mira landing — light-mode design tokens (content/landing/BRIEF.md). */
/* Figtree (SIL OFL, public/fonts/figtree): the closest open match to OpenAI Sans, the typeface of
   openai.com/index/introducing-dots (owner, 2026-10-18; BRIEF item 34). */
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree/figtree-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree/figtree-latin-italic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-soft: #F6F7F9;
  --bg-sunk: #EEF0F3;
  --ink: #0B0D12;
  --ink-2: #4A5160;
  --ink-3: #7C8494;
  --line: #E6E8EC;
  --line-strong: #D5D9E0;
  --brand: #5B6C8F;
  --brand-strong: #3E4F75;
  --brand-tint: #EEF1F7;
  --up: #0E9F6E;
  --down: #E5484D;
  --warn: #D97706;
  --focus: #3E63DD;
  --surface: #FFFFFF;
  --header-bg: rgb(255 255 255 / 90%);
  --btn-primary-bg: #0B0D12;
  --btn-primary-ink: #FFFFFF;
  --btn-primary-hover: #262A33;
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-hover: #F6F7F9;
  --live-bg: #E7F6EF;
  --live-ink: #08734F;

  --card-sun: linear-gradient(135deg, #FFE58A 0%, #FFC24B 100%);
  --card-coral: linear-gradient(135deg, #FFB199 0%, #F2643F 100%);
  --card-sky: linear-gradient(135deg, #A9D4FF 0%, #3D8BFD 100%);
  --card-violet: linear-gradient(135deg, #EBB8FF 0%, #A855F7 100%);
  --card-mint: linear-gradient(135deg, #B3F0D3 0%, #22B07D 100%);

  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Type scale = openai.com/index/introducing-dots (owner, 2026-10-18: "also text px"); see the
     heading rules in base.css. D1 display 64px at 1440 → 32px at 390, fluid between; D2 section
     title 30px (24px on phones); D3 sub-heading 22px (20px on phones); body 17px/28px. */
  --h1: clamp(32px, calc(20.1px + 3.05vw), 64px);
  --h2: 30px;
  --h3: 22px;
  --body: 17px;
  --small: 14px;
  --tiny: 12px;

  --container: 1160px;
  --gutter: 24px;
  /* Vertical rhythm (review round 1, item 11): two white sections in a row sit --rhythm apart
     (128px desktop, 80px phone), so each .lp-section pads half of it on either side. */
  --rhythm: 128px;
  --section: calc(var(--rhythm) / 2);
  --r-control: 10px;
  --r-card: 32px; /* owner 2026-10-18: "make the cards a bit more round" (was 24px) */
  --r-mock: 14px;
  --shadow-mock: 0 24px 48px -16px rgb(16 24 40 / 22%), 0 2px 6px rgb(16 24 40 / 6%);
  --shadow-soft: 0 1px 2px rgb(16 24 40 / 6%);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Motion standard (owner item 11): one long, soft ease-out for every entrance. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --reveal-rise: 14px;
  --reveal-time: .6s;

  /* Vibrant cards keep their light gradients in both modes (as on the ChatGPT Dots page), so
     whatever sits on them keeps light-mode ink. Real captures keep their white frames too. */
  --vibrant-ink: #0B0D12;
  --vibrant-ink-2: rgb(11 13 18 / 78%);
  --vibrant-btn-bg: #0B0D12;
  --vibrant-btn-ink: #FFFFFF;
  --vibrant-btn-hover: #262A33;
  --vibrant-btn2-bg: #FFFFFF;
  --vibrant-btn2-hover: rgb(255 255 255 / 86%);
  --capture-frame: #FFFFFF;
}

/* Auto dark mode (owner, 2026-10-17; BRIEF item 7): the website's one dark palette, the same as
   the pricing page and every other page (src/pages/PricingCodex.css, the header and footer in
   src/components/codex/CodexChrome.css). Page #131313 (owner, 2026-10-19: "it should be using the
   same black as the pricing page"; it replaces the #000 Dots background of 2026-10-18), cards
   #212121 (--bg-soft, --surface), raised on a card #2F2F2F (--bg-sunk), text #fff / #cdcdcd /
   #afafaf, hairlines white 8–15%, primary button #f9f9f9 on #0d0d0d text, secondary #212121 with
   a 15% white border, the header bar on the page colour. Coloured tiles keep their tone colours
   and real app captures keep their own light frames. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131313;
    --bg-soft: #212121;
    --bg-sunk: #2F2F2F;
    --surface: #212121;
    --ink: #FFFFFF;
    --ink-2: #CDCDCD;
    --ink-3: #AFAFAF;
    --line: rgb(255 255 255 / 8%);
    --line-strong: rgb(255 255 255 / 15%);
    --brand: #A9B8D6;
    --brand-strong: #C8D3EA;
    --brand-tint: #1A1E26;
    --focus: #8FB0FF;
    --header-bg: rgb(19 19 19 / 76%);
    --btn-primary-bg: #F9F9F9;
    --btn-primary-ink: #0D0D0D;
    --btn-primary-hover: #FFFFFF;
    --btn-secondary-bg: #212121;
    --btn-secondary-hover: #2F2F2F;
    --live-bg: rgb(14 159 110 / 18%);
    --live-ink: #6EE7B7;
    --shadow-soft: 0 1px 2px rgb(0 0 0 / 60%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131313; --bg-soft: #212121; --bg-sunk: #2F2F2F; --surface: #212121;
  --ink: #FFFFFF; --ink-2: #CDCDCD; --ink-3: #AFAFAF;
  --line: rgb(255 255 255 / 8%); --line-strong: rgb(255 255 255 / 15%);
  --brand: #A9B8D6; --brand-strong: #C8D3EA; --brand-tint: #1A1E26; --focus: #8FB0FF;
  --header-bg: rgb(19 19 19 / 76%);
  --btn-primary-bg: #F9F9F9; --btn-primary-ink: #0D0D0D; --btn-primary-hover: #FFFFFF;
  --btn-secondary-bg: #212121; --btn-secondary-hover: #2F2F2F;
  --live-bg: rgb(14 159 110 / 18%); --live-ink: #6EE7B7;
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 60%);
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --rhythm: 80px; }
}
@media (max-width: 600px) {
  :root { --h2: 24px; --h3: 20px; }
}


/* Mira landing — shared base (light). Sections style themselves in sections/*.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* Body role: 17px/28px. Unitless (28/17), so text that sets only a smaller size keeps a
     proportional leading (14px → 23px, the Small role's 1.64). */
  font: 400 var(--body) var(--font);
  line-height: calc(28 / 17);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
/* Headings follow the Dots scale (tokens.css): every heading is 500. D1 64/64 (phones 32/36),
   D2 30/39.6 (phones 24/31.7), D3 22/27.7 (phones 20/24). */
h1 { font-size: var(--h1); line-height: 1; font-weight: 500; letter-spacing: -0.03em; }
h2 { font-size: var(--h2); line-height: 1.32; font-weight: 500; letter-spacing: -0.01em; }
h3 { font-size: var(--h3); line-height: 1.26; font-weight: 500; letter-spacing: -0.01em; }
@media (max-width: 600px) {
  h1 { line-height: 1.125; }
  h3 { line-height: 1.2; }
}
/* No one-word orphans (review round 1, item 13): headings balance their lines, text avoids a
   lone last word. */
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

.lp-shell { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.lp-section { padding-block: var(--section); }
.lp-section--soft { background: var(--bg-soft); }
.lp-intro { max-width: 640px; display: grid; gap: 14px; }
.lp-intro--center { margin-inline: auto; text-align: center; justify-items: center; }
.lp-intro p { color: var(--ink-2); font-size: 17px; line-height: 28px; text-wrap: balance; }
.lp-kicker { font-size: 14px; line-height: 19.6px; font-weight: 500; color: var(--brand); letter-spacing: normal; }

.lp-skip { position: absolute; left: -999px; top: 8px; padding: 8px 12px; background: var(--btn-primary-bg); color: var(--btn-primary-ink); border-radius: 8px; z-index: 100; }
.lp-skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* Buttons */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  font: 500 14px/1 var(--font); letter-spacing: normal; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.lp-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-ink); }
.lp-btn--primary:hover { background: var(--btn-primary-hover); }
.lp-btn--secondary { background: var(--btn-secondary-bg); color: var(--ink); border-color: var(--line-strong); }
.lp-btn--secondary:hover { background: var(--btn-secondary-hover); }
.lp-btn--small { min-height: 36px; padding: 0 14px; }
.lp-link { color: var(--ink); font-weight: 500; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.lp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Real company logos: quiet at rest, full colour on hover. */
.lp-logo { filter: grayscale(1); opacity: .72; transition: filter .2s var(--ease), opacity .2s var(--ease); }
a:hover > .lp-logo, .lp-logo:hover { filter: none; opacity: 1; }

/* Vibrant card + white mock (ChatGPT Dots pattern). Sections set the gradient. */
.lp-vibrant { position: relative; overflow: hidden; border-radius: var(--r-card); padding: clamp(20px, 4vw, 44px); display: grid; place-items: center; min-height: 340px; isolation: isolate; }
.lp-mock { width: min(100%, 440px); background: #fff; color: var(--ink); border-radius: var(--r-mock); box-shadow: var(--shadow-mock); padding: 14px; font-size: 13px; }
.lp-mock__row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 8px; border-radius: 8px; }
.lp-mock__row + .lp-mock__row { border-top: 1px solid var(--line); border-radius: 0; }
.lp-mock__muted { color: var(--ink-3); font-size: 12px; }
.lp-up { color: var(--up); } .lp-down { color: var(--down); }

/* Scroll-linked expand: runtime.js sets --expand (0→1) and --expand-x/-y (px) on [data-expand].
   The card's own background paints under a transparent border that grows by those amounts, so the
   colour widens to the window edges while the content box stays where it was. Each section maps the
   border onto its margins/width (so nothing around it moves) and eases its corner radius with
   --expand. A card may cap its vertical growth with --expand-max-y (default 56px) when the text
   around it sits closer than that. !important: a section's `background:` shorthand would reset the
   origin to padding-box and tile the gradient into the border. */
[data-expand] {
  border: 0 solid transparent;
  border-width: var(--expand-y, 0px) var(--expand-x, 0px);
  background-origin: border-box !important;
}

/* Scroll reveal (motion standard, owner item 11): a 14px rise and a fade over 600ms on one long
   ease-out, once, when the element comes on screen (runtime.js adds .is-in).
   Stagger: put [data-reveal-stagger] (optionally ="60"…"90", ms per step; default 70) on a parent.
   When one of its [data-reveal] descendants arrives, the others already on screen come with it,
   in document order, one step apart (so a capture never shows before the copy beside it); those
   still below the screen wait for their own turn. An element can also wait a fixed time with
   --enter-delay. */
@property --reveal-delay { syntax: '<time>'; inherits: false; initial-value: 0s; }
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-rise), 0);
  transition: opacity var(--reveal-time) var(--ease-out), transform var(--reveal-time) var(--ease-out);
  transition-delay: calc(var(--enter-delay, 0ms) + var(--reveal-delay, 0s));
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal], .lp-still [data-reveal] { opacity: 1; transform: none; transition: none; }

/* Card loops (WCAG 2.2.2): they run only while their card is on screen (runtime.js sets
   data-playing), and stop for good with the footer's "Pause motion" button (html.lp-still) or
   without JS (no pause control). Every mock's un-animated state is its finished frame. */
.lp-vibrant:not([data-playing]),
.lp-vibrant:not([data-playing]) *,
.lp-vibrant:not([data-playing]) *::before,
.lp-vibrant:not([data-playing]) *::after,
.lp-hero__stage:not([data-playing]) *,
.lp-hero__stage:not([data-playing]) *::before,
.lp-hero__stage:not([data-playing]) *::after { animation-play-state: paused !important; }
.lp-still *, .lp-still *::before, .lp-still *::after,
.no-js *, .no-js *::before, .no-js *::after { animation: none !important; }

.lp-motion-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; margin-block: -6px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg); color: var(--ink-2);
  font: 500 14px/1 var(--font); letter-spacing: normal; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.lp-motion-toggle:hover { background: var(--bg-soft); color: var(--ink); }
.lp-motion-toggle .lp-icon { width: 14px; height: 14px; }
@media (max-width: 600px) {
  .lp-motion-toggle { min-height: 44px; margin-block: 0; align-self: flex-start; }
}

/* ── Motion system (owner, 2026-10-17: "animate all these … 100x professional, not AI generated") ──
   One choreography for every real-capture card. When a card scrolls into view its base capture rises
   in, then the overlapping popup settles on top a beat later. Long, soft ease-out; nothing bounces,
   spins, glows or overlaps translucently. Decks ([data-deck]) swap captures with NO overlap: the
   outgoing one leaves completely before the next arrives. runtime.js adds .is-entered / cycles decks.
   Timings follow the motion standard (450–700ms, --ease-out from tokens.css). */
[data-enter] {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.985);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--enter-delay, 0ms);
}
[data-enter="pop"] { transform: translate3d(0, 16px, 0) scale(.96); }
.is-entered [data-enter], [data-enter].is-entered { opacity: 1; transform: none; }
.no-js [data-enter], .lp-still [data-enter] { opacity: 1; transform: none; transition: none; }

[data-deck] > [data-deck-item] {
  transition: opacity .42s var(--ease-out), transform .6s var(--ease-out);
}
[data-deck] > [data-deck-item]:not(.is-active) {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition-delay: 0s;
}
[data-deck] > [data-deck-item].is-active { opacity: 1; transform: none; transition-delay: .42s; }
.no-js [data-deck] > [data-deck-item]:not(:first-child) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], [data-enter] { opacity: 1; transform: none; }
  .lp-motion-toggle { display: none; }
}


/* ── header ── */
/* Header (owner, 2026-10-18: "redesign and overhaul header to look like this, with the animations
   too", pointing at the chatgpt.com top bar and the floating pill nav on chatgpt.com/features/dots;
   measured values in the header spec, the motion taken from the Dots sub-nav's own stylesheet and
   script). Two parts:
   - the top bar: a full-width 64px sticky bar, logo · nav · two pill buttons;
   - the floating pill: once the hero's scroll story is over, the bar slides away and a pill drops
     in and opens out of a dot at the top centre (scripts/landing/sections/header.js sets
     .is-floating). The pages' header (src/components/codex/CodexChrome.css) is the same. */
.lp-header {
  /* Light palette (dark below; the bar takes a light-on-blue one over the hero's blue band). */
  --hd-link: #4B5260;
  --hd-hover: rgb(0 0 0 / 5%);
  --hd-solid-bg: #0D0D0D;
  --hd-solid-ink: #FFFFFF;
  --hd-solid-hover: #2A2A2A;
  --hd-soft-bg: #F3F3F3;
  --hd-soft-ink: #0D0D0D;
  --hd-soft-hover: #E8E8E8;
  --hd-soft-edge: transparent;
  --hd-bar-bg: var(--bg);
  /* The Dots pill: #F3F3F3 / #212121 at 80% over a heavy blur, no shadow. */
  --pill-bg: rgb(243 243 243 / 80%);
  --pill-cta-bg: #0D0D0D;
  --pill-cta-ink: #FFFFFF;
  --pill-cta-hover: #2A2A2A;
  /* Link hover inside the pill (Dots: --bg-tertiary #414141 in dark; a 5% shade reads on light). */
  --pill-hover: rgb(0 0 0 / 5%);
  /* The phone menu opening and closing (Dots: .28s open / .24s close). */
  --pill-ease-menu: cubic-bezier(.25, 1, .5, 1);
  position: sticky;
  top: 0;
  z-index: 50;
  /* The sticky slot never blocks the page under it; the bar, the pill and the menu take the pointer. */
  pointer-events: none;
}
/* Pills and round buttons draw their own pressed state; no square mobile tap flash. */
.lp-header a,
.lp-header button { -webkit-tap-highlight-color: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-header {
    --hd-link: #CDCDCD;
    --hd-hover: rgb(255 255 255 / 8%);
    --hd-solid-bg: #F9F9F9; --hd-solid-ink: #0D0D0D; --hd-solid-hover: #E3E3E3;
    --hd-soft-bg: #212121; --hd-soft-ink: #FFFFFF; --hd-soft-hover: #2F2F2F;
    --pill-bg: rgb(33 33 33 / 80%);
    --pill-hover: #414141;
    --pill-cta-bg: #F9F9F9; --pill-cta-ink: #0D0D0D; --pill-cta-hover: #E3E3E3;
  }
}
:root[data-theme="dark"] .lp-header {
  --hd-link: #CDCDCD;
  --hd-hover: rgb(255 255 255 / 8%);
  --hd-solid-bg: #F9F9F9; --hd-solid-ink: #0D0D0D; --hd-solid-hover: #E3E3E3;
  --hd-soft-bg: #212121; --hd-soft-ink: #FFFFFF; --hd-soft-hover: #2F2F2F;
  --pill-bg: rgb(33 33 33 / 80%);
  --pill-hover: #414141;
  --pill-cta-bg: #F9F9F9; --pill-cta-ink: #0D0D0D; --pill-cta-hover: #E3E3E3;
}

/* ── Top bar ────────────────────────────────────────────────────────────────────────────────── */
.lp-header__bar {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 32px;
  color: var(--ink);
  pointer-events: auto;
  /* Coming back (Dots): 30ms after the pill starts to fade, 300ms. */
  transition: transform .3s ease .03s, opacity .3s ease .03s, visibility 0s, color .25s var(--ease);
}
/* The page's own colour, no hairline (chatgpt.com). */
.lp-header__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hd-bar-bg);
}
/* While the pill is out the bar slides up and fades (Dots: 300ms, ease); header.js makes it inert. */
.lp-header.is-floating .lp-header__bar {
  transform: translateY(-64px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s, color .25s var(--ease);
}

/* Over the hero (BRIEF item 37). The hero's first screen is on the page colour and its blue band
   fades in as the workspace window rises; hero.js reports how blue the backdrop under the bar is
   (#hero --hero-blue) and its tone (data-tone page | sky). header.js turns that into --hd-clear:
   the bar keeps the page colour (the headline passes under it cleanly) until the blue is mostly
   in, then clears into it; it has no colour of its own over the band. */
.lp-header.is-over-hero .lp-header__bar::before { opacity: calc(1 - var(--hd-clear, 1)); }
/* Light-on-blue palette (owner, 2026-10-18, after tradingview.com), in light and dark mode alike,
   only while the tone is sky and the blue shows through the bar (header.js .is-on-blue). Scoped
   to the bar, so the pill and the phone menu keep the page's palette. The colours cross-fade with
   the bar's own transitions. */
.lp-header.is-on-blue .lp-header__bar {
  color-scheme: dark;
  /* Links are full white over the band (review: #E6EEFF fell short of AA at the bright top). */
  --ink: #FFFFFF; --ink-2: #FFFFFF; --ink-3: #DCE6FB;
  --line: rgb(255 255 255 / 14%);
  --focus: #FFFFFF;
  --hd-link: #FFFFFF;
  --hd-hover: rgb(255 255 255 / 12%);
  --hd-solid-bg: #FFFFFF; --hd-solid-ink: #0D0D0D; --hd-solid-hover: #EEF3FF;
  /* Start free is a deep-blue glass pill here, not the reference's 16% white: white on 16% white
     measured 2.95–3.05:1 over the band's bright top (AA needs 4.5); this keeps ≥ 5.2:1. */
  --hd-soft-bg: rgb(8 28 92 / 24%); --hd-soft-ink: #FFFFFF; --hd-soft-hover: rgb(8 28 92 / 36%);
  --hd-soft-edge: rgb(255 255 255 / 22%);
}
/* When the hero's title or the white workspace passes under the bar (header.js
   .is-over-content), the tint deepens so the links stay readable over it: the band's own blue at
   86% keeps white at ≥ 5:1 even over the window's white (62% measured 3.1:1). It only exists over
   the blue, so leaving the band never fades a blue bar over the page. */
.lp-header__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(30 76 200 / 86%);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  pointer-events: none;
}
.lp-header:not(.is-on-blue) .lp-header__bar::after { display: none; }
.lp-header.is-on-blue.is-over-content .lp-header__bar::after { opacity: 1; }
.lp-header.is-menu-open .lp-header__bar::before { background: var(--bg); opacity: 1; }

/* Brand: the same mark and wordmark the app shows in its sidebar. */
.lp-header__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: color .25s var(--ease);
}
.lp-header__mark { display: grid; place-items: center; width: 22px; height: 22px; flex: none; }
.lp-header__mark svg { width: 22px; height: 22px; }

/* Nav: 14px/22.96px 400 links in soft 8px-radius hover chips (chatgpt.com). */
.lp-header__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lp-header__item { position: relative; }
.lp-header__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--hd-link);
  font: 400 14px/22.96px var(--font);
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.lp-header__link:hover,
.lp-header__item.is-open > .lp-header__link { color: var(--ink); background: var(--hd-hover); }
.lp-header__chev { width: 16px; height: 16px; margin-right: -4px; opacity: .72; transition: transform .2s var(--ease); }
.lp-header__item.is-open .lp-header__chev { transform: rotate(180deg); }

/* Product menu in the app's own popover style (owner, 2026-10-18: "simpler and more in sync with
   the app's design"; BRIEF item 20): a light panel with a hairline, thin rows (≥ 36px), a plain
   16px icon, a 13px title and a 1–4 word hint in 12px grey. It keeps its own palette, so it stays
   a light app menu over the blue hero; in dark mode it takes the app's dark surface. */
.lp-header__drop {
  --menu-bg: #FFFFFF;
  --menu-ink: #0B0D12;
  --menu-ink-2: #6B7280;
  --menu-line: rgb(11 13 18 / 9%);
  --menu-hover: #F3F4F6;
  --menu-focus: #3E63DD;
  position: absolute;
  top: calc(100% + 10px);
  left: -6px;
  width: 336px;
  padding: 5px;
  background: var(--menu-bg);
  color: var(--menu-ink);
  border: 1px solid var(--menu-line);
  border-radius: 12px;
  box-shadow: 0 14px 34px -14px rgb(16 24 40 / 26%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-header__drop {
    --menu-bg: #262626; --menu-ink: #FFFFFF; --menu-ink-2: #AFAFAF;
    --menu-line: rgb(255 255 255 / 9%); --menu-hover: #303030; --menu-focus: #8FB0FF;
  }
}
:root[data-theme="dark"] .lp-header__drop {
  --menu-bg: #262626; --menu-ink: #FFFFFF; --menu-ink-2: #AFAFAF;
  --menu-line: rgb(255 255 255 / 9%); --menu-hover: #303030; --menu-focus: #8FB0FF;
}
/* Invisible bridge so the pointer can travel from the trigger into the panel. */
.lp-header__drop::before { content: ''; position: absolute; left: 0; right: 0; top: -11px; height: 11px; }
.lp-header__item.is-open > .lp-header__drop,
.lp-header:not([data-js]) .lp-header__item--menu:hover > .lp-header__drop,
.lp-header:not([data-js]) .lp-header__item--menu:focus-within > .lp-header__drop {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.lp-header__menu { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.lp-header__menu a {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--menu-ink);
  text-decoration: none;
  transition: background-color .12s var(--ease);
}
.lp-header__menu a:hover,
.lp-header__menu a:focus-visible { background: var(--menu-hover); }
/* The menu's own focus colour: the bar's is white over the band, which would vanish on the light menu. */
.lp-header__menu a:focus-visible { outline: 2px solid var(--menu-focus); outline-offset: -2px; }
.lp-header__menu .lp-header__icon { color: var(--menu-ink-2); }
.lp-header__menu a:hover .lp-header__icon { color: var(--menu-ink); }
.lp-header__menu-title { font-size: 13px; font-weight: 500; line-height: 19.68px; letter-spacing: normal; }
.lp-header__menu-text { font-size: 12px; line-height: 15px; letter-spacing: normal; color: var(--menu-ink-2); white-space: nowrap; }

/* Icons are plain line icons, as in the app's menus (no boxed tiles). */
.lp-header__icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  color: inherit;
}
.lp-header__icon .lp-icon { width: 16px; height: 16px; stroke-width: 1.6; }

/* Actions: two 36px pills, 8px apart (chatgpt.com): Sign in solid, Start free soft. */
.lp-header__actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.lp-header__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font: 500 14px/20px var(--font);
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.lp-header__btn--solid { background: var(--hd-solid-bg); color: var(--hd-solid-ink); }
.lp-header__btn--solid:hover { background: var(--hd-solid-hover); }
.lp-header__btn--soft { background: var(--hd-soft-bg); color: var(--hd-soft-ink); box-shadow: inset 0 0 0 1px var(--hd-soft-edge); }
.lp-header__btn--soft:hover { background: var(--hd-soft-hover); }
.lp-header__toggle { display: none; }

/* Mobile menu panel */
.lp-header__panel { display: none; }

@media (max-width: 899.98px) {
  .lp-header__bar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 0 16px; }
  .lp-header__nav,
  .lp-header__signin { display: none; }
  /* 40px pill with a 44px tap area (BRIEF hard rule 8). */
  .lp-header__cta { height: 40px; padding-inline: 14px; }
  .lp-header__cta::after { content: ''; position: absolute; inset: -2px 0; }
  .lp-header__toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .15s var(--ease), color .25s var(--ease);
  }
  /* Hover fills only where there is a pointer that hovers: on touch they would stick after a tap. */
  @media (hover: hover) { .lp-header__toggle:hover { background: var(--hd-hover); } }
  .lp-header__toggle .lp-icon { grid-area: 1 / 1; width: 22px; height: 22px; }
  .lp-header__toggle-close,
  .lp-header__toggle[aria-expanded="true"] .lp-header__toggle-open { display: none; }
  .lp-header__toggle[aria-expanded="true"] .lp-header__toggle-close { display: block; }

  /* Without JS the toggle can't open the panel: show the top-level links as a second row instead. */
  .lp-header:not([data-js]) .lp-header__toggle,
  .lp-header:not([data-js]) .lp-header__item--menu { display: none; }
  .lp-header:not([data-js]) .lp-header__bar { height: auto; padding-top: 10px; row-gap: 0; }
  .lp-header:not([data-js]) .lp-header__actions { grid-row: 1; grid-column: 2; }
  .lp-header:not([data-js]) .lp-header__nav {
    display: block;
    grid-row: 2;
    grid-column: 1 / -1;
    margin-inline: -10px;
    overflow-x: auto;
  }
  .lp-header:not([data-js]) .lp-header__link { min-height: 44px; }

  /* The full-screen menu, in the page's colour like chatgpt.com's: plain 48px rows that take a
     soft chip on hover, and the bar's two pills at the foot. */
  .lp-header__panel {
    display: block;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  .lp-header:not([data-js]) .lp-header__panel { display: none; }
  .lp-header.is-menu-open .lp-header__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .lp-header__panel-inner { display: grid; gap: 4px; padding-block: 12px 40px; }
  .lp-header__panel-label { padding: 8px 12px 4px; font-size: 13px; line-height: 19.68px; font-weight: 500; letter-spacing: normal; color: var(--ink-3); }
  .lp-header__panel-product,
  .lp-header__panel-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .lp-header__panel-product { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .lp-header__panel-product a,
  .lp-header__panel-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--ink);
    font: 500 16px/24px var(--font);
    letter-spacing: normal;
    text-decoration: none;
    transition: background-color .15s var(--ease);
  }
  @media (hover: hover) {
    .lp-header__panel-product a:hover,
    .lp-header__panel-links a:hover { background: var(--hd-hover); }
  }
  .lp-header__panel-product .lp-header__icon { color: var(--ink-3); }
  .lp-header__panel-links { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
  .lp-header__panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
  .lp-header__panel-actions .lp-header__btn { height: 48px; }
}

/* ── Floating pill (chatgpt.com/features/dots) ──────────────────────────────────────────────────
   As on Dots: fixed 8px from the top, 727px wide (the window less 32px when narrower), 58px tall,
   8px padding, the brand left, the links between, the CTA right.
   The motion uses the Dots sub-nav's own values (read from its stylesheet and script on the live
   page, 2026-10-19; t = when the pill is triggered, the bar slides up and fades over 0–300ms):
     85–405ms     the pill drops from 180px above to 72px below its place, cubic-bezier(0, 1, .68, 1),
     405–1177ms   then settles into place, cubic-bezier(.26, 0, .09, 1);
     200–550ms    the mark inside the dot shrinks from 1.815× to its size;
     558–1067ms   the surface opens out of a 58px dot at the centre, and the brand slides left with
                  it, cubic-bezier(.19, .59, 0, .94);
     558–1067ms   the end group slides right from the dot (its right edge starts 29px right of the
                  centre, less the padding), cubic-bezier(.14, .48, .29, 1); the CTA's fill
                  stretches back 32px to the left and catches up (32·sin(πw)), its label half that;
     586–1016ms   "Mira" and the end group fade in (ease);
     543–1154ms   the links slide 20px a step from the middle outwards, cubic-bezier(.31, 0, .25, 1),
     630ms on     and fade in from the middle outwards, 80ms a step (ease).
   Leaving is a 150ms fade of the pill as it is (header.js holds .is-leaving meanwhile, which
   freezes an opening that hasn't finished rather than snapping it open); the bar comes back 30ms
   later.
   Keyframes run from the closed state to the open one, which is the resting style: with no
   animation (reduced motion, "Pause motion") the pill simply appears open. Opacity is set on the
   parts, never on the pill, so the surface's backdrop blur holds throughout. header.js measures
   the brand's distance from the centre (--brand-x); the end group's comes from the pill's width
   (it is a size container). The pages' pill (CodexChrome.css) uses the same values. */
.lp-pill {
  position: fixed;
  z-index: 3;
  top: 8px;
  left: 0;
  right: 0;
  width: min(727px, 100% - 32px);
  height: 58px;
  margin-inline: auto;
  container-type: inline-size;
  color: var(--ink);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .15s;
}
.lp-header:not([data-js]) .lp-pill { display: none; }
.lp-header.is-floating .lp-pill {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
.lp-header:is(.is-floating, .is-leaving) .lp-pill { animation: lp-pill-drop 1.0916s linear .085s both; }

.lp-pill__surface {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 58px;
  border-radius: 29px;
  background: var(--pill-bg);
  -webkit-backdrop-filter: blur(140px);
  backdrop-filter: blur(140px);
  opacity: 0;
  transition: opacity .15s linear, height .24s var(--pill-ease-menu);
}
.lp-header.is-floating .lp-pill__surface {
  opacity: 1;
  transition: height .24s var(--pill-ease-menu);
}
.lp-header:is(.is-floating, .is-leaving) .lp-pill__surface { animation: lp-pill-open .509s cubic-bezier(.19045, .58992, 0, .93507) .558s both; }

.lp-pill__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 58px;
  padding: 8px;
  opacity: 0;
  transition: opacity .15s linear;
}
.lp-header.is-floating .lp-pill__row { opacity: 1; transition: none; }

/* Brand: mark 24px + "Mira" 16px 600 (Dots); it dims on hover rather than taking a chip. */
.lp-pill__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 42px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--ink);
  font: 600 16px/16px var(--font);
  letter-spacing: normal;
  text-decoration: none;
  transition: opacity .15s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .lp-pill__brand:hover { opacity: .75; } }
.lp-pill__mark { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.lp-pill__mark svg { width: 24px; height: 24px; }
.lp-header:is(.is-floating, .is-leaving) .lp-pill__brand { animation: lp-pill-brand .509s cubic-bezier(.19045, .58992, 0, .93507) .558s both; }
.lp-header:is(.is-floating, .is-leaving) .lp-pill__mark { animation: lp-pill-mark .35s cubic-bezier(.22, 1, .36, 1) .2s both; }
.lp-header:is(.is-floating, .is-leaving) .lp-pill__word { animation: lp-pill-in .43s ease .586s both; }

.lp-pill__links { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
/* Dots, for n links with k = (n - 1) / 2: link i starts (k - i) × 20px in towards the middle and
   fades in at 630ms + 80ms per step out from the middle, over 577ms less 80ms per outer step. */
.lp-pill__links > li:nth-child(1) { --ring: 1; --x: 30px; }
.lp-pill__links > li:nth-child(2) { --ring: 0; --x: 10px; }
.lp-pill__links > li:nth-child(3) { --ring: 0; --x: -10px; }
.lp-pill__links > li:nth-child(4) { --ring: 1; --x: -30px; }
.lp-header:is(.is-floating, .is-leaving) .lp-pill__links > li {
  animation:
    lp-pill-in .497s ease calc(.63s + var(--ring, 0) * 80ms) both,
    lp-pill-link .6106s cubic-bezier(.31143, 0, .25, 1) .5435s both;
}
.lp-pill__link {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--hd-link);
  font: 400 14px/20px var(--font);
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s var(--ease), background-color .15s var(--ease), opacity .15s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .lp-pill__link:hover { color: var(--ink); background: var(--pill-hover); } }
.lp-pill__link:active { opacity: .6; }

.lp-pill__end { display: flex; align-items: center; gap: 4px; flex: none; }
.lp-header:is(.is-floating, .is-leaving) .lp-pill__end {
  animation:
    lp-pill-end .509s cubic-bezier(.14019, .48002, .29395, .9993) .558s both,
    lp-pill-in .43s ease .586s both;
}
.lp-pill__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--pill-cta-ink);
  font: 500 14px/20px var(--font);
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
}
/* The fill runs 32px further left than the button and is clipped back to it; while the CTA slides
   out, the clip lets go and catches up, so the fill stretches behind it. */
.lp-pill__cta::before {
  content: '';
  position: absolute;
  inset: 0 0 0 -32px;
  z-index: -1;
  border-radius: 999px;
  background: var(--pill-cta-bg);
  clip-path: inset(0 0 0 32px round 999px);
  transition: background-color .15s var(--ease);
}
.lp-pill__cta:hover::before { background: var(--pill-cta-hover); }
.lp-pill__label { display: block; }
.lp-header:is(.is-floating, .is-leaving) .lp-pill__cta::before { animation: lp-pill-stretch .509s linear .558s both; }
.lp-header:is(.is-floating, .is-leaving) .lp-pill__label { animation: lp-pill-label .509s linear .558s both; }
/* Leaving while it is still opening: hold it where it is for the fade. */
.lp-header.is-leaving :is(.lp-pill, .lp-pill__surface, .lp-pill__brand, .lp-pill__mark, .lp-pill__word, .lp-pill__links > li, .lp-pill__end, .lp-pill__label),
.lp-header.is-leaving .lp-pill__cta::before { animation-play-state: paused; }

@keyframes lp-pill-drop {
  0% { transform: translateY(-180px); animation-timing-function: cubic-bezier(0, 1, .68448, 1); }
  29.286% { transform: translateY(72px); animation-timing-function: cubic-bezier(.26245, 0, .08511, 1); }
  100% { transform: none; }
}
@keyframes lp-pill-open {
  from { clip-path: inset(0 calc(50% - 29px) calc(100% - 58px) round 29px); }
  to { clip-path: inset(0 0 0 0 round 29px); }
}
@keyframes lp-pill-brand { from { transform: translateX(var(--brand-x, 0px)); } to { transform: none; } }
@keyframes lp-pill-mark { from { transform: scale(1.815); } to { transform: none; } }
/* The end group's right edge starts 21px right of the centre (Dots: (1 - w) × (29px - 50cqw)). */
@keyframes lp-pill-end { from { transform: translateX(calc(29px - 50cqw)); } to { transform: none; } }
@keyframes lp-pill-link { from { transform: translateX(var(--x, 0px)); } to { transform: none; } }
@keyframes lp-pill-in { from { opacity: 0; } to { opacity: 1; } }
/* 32·sin(πw) with w on cubic-bezier(.14, .48, .29, 1), sampled (Dots drives it per frame). */
@keyframes lp-pill-stretch {
  0% { clip-path: inset(0 0 0 32px round 999px); }
  2% { clip-path: inset(0 0 0 25.2px round 999px); }
  4% { clip-path: inset(0 0 0 18.85px round 999px); }
  6% { clip-path: inset(0 0 0 13.29px round 999px); }
  8% { clip-path: inset(0 0 0 8.72px round 999px); }
  10% { clip-path: inset(0 0 0 5.2px round 999px); }
  12% { clip-path: inset(0 0 0 2.69px round 999px); }
  14% { clip-path: inset(0 0 0 1.07px round 999px); }
  18% { clip-path: inset(0 0 0 0 round 999px); }
  23% { clip-path: inset(0 0 0 1.41px round 999px); }
  30% { clip-path: inset(0 0 0 5.85px round 999px); }
  40% { clip-path: inset(0 0 0 13.27px round 999px); }
  53% { clip-path: inset(0 0 0 21.4px round 999px); }
  70% { clip-path: inset(0 0 0 28.16px round 999px); }
  90% { clip-path: inset(0 0 0 31.62px round 999px); }
  100% { clip-path: inset(0 0 0 32px round 999px); }
}
@keyframes lp-pill-label {
  0% { transform: none; }
  2% { transform: translateX(-3.4px); }
  4% { transform: translateX(-6.58px); }
  6% { transform: translateX(-9.36px); }
  8% { transform: translateX(-11.64px); }
  10% { transform: translateX(-13.4px); }
  12% { transform: translateX(-14.66px); }
  14% { transform: translateX(-15.46px); }
  18% { transform: translateX(-16px); }
  23% { transform: translateX(-15.3px); }
  30% { transform: translateX(-13.08px); }
  40% { transform: translateX(-9.36px); }
  53% { transform: translateX(-5.3px); }
  70% { transform: translateX(-1.92px); }
  90% { transform: translateX(-.19px); }
  100% { transform: none; }
}

.lp-pill__toggle { display: none; }
.lp-pill__menu { display: none; }

/* Narrow (the pill 660px or less, as on Dots: below 693px): brand left, Start free + a menu button
   right; the button grows the surface downward and the list fades in under the row (Dots: 8px
   drop, the surface .28s open / .24s closed). Tap targets are 44px here (BRIEF hard rule 8).
   header.js and the pages' pill (CodexChrome.css) switch at the same width. */
@media (max-width: 692.98px) {
  .lp-pill__row { padding: 7px; }
  .lp-pill__brand { padding-left: 12px; }
  .lp-pill__brand,
  .lp-pill__cta { height: 44px; }
  .lp-pill__links { display: none; }
  .lp-pill__toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .15s var(--ease);
  }
  @media (hover: hover) { .lp-pill__toggle:hover { background: var(--hd-hover); } }
  .lp-pill__toggle .lp-icon { grid-area: 1 / 1; width: 22px; height: 22px; }
  .lp-pill__toggle-close,
  .lp-pill__toggle[aria-expanded="true"] .lp-pill__toggle-open { display: none; }
  .lp-pill__toggle[aria-expanded="true"] .lp-pill__toggle-close { display: block; }

  /* Dots' phone menu: 48px rows in the secondary ink, starting 7px under the bar, 16px around. */
  .lp-pill__menu {
    display: grid;
    gap: 2px;
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 7px 16px 16px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .16s ease, transform .24s var(--pill-ease-menu), visibility 0s linear .24s;
  }
  .lp-pill.is-expanded .lp-pill__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .16s ease, transform .24s var(--pill-ease-menu), visibility 0s;
  }
  .lp-pill.is-expanded .lp-pill__surface { height: var(--pill-open-h, 246px); transition-duration: .28s; }
  .lp-pill__menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 14px;
    border-radius: 14px;
    color: var(--hd-link);
    font: 400 16px/1.45 var(--font);
    letter-spacing: normal;
    text-decoration: none;
    transition: background-color .15s var(--ease), color .15s var(--ease), opacity .15s var(--ease);
  }
  @media (hover: hover) { .lp-pill__menu a:hover { color: var(--ink); background: var(--pill-hover); } }
  .lp-pill__menu a:active { opacity: .6; }
}

/* Reduced motion and "Pause motion" (html.lp-still): nothing moves. The bar and the pill simply
   cross-fade in 150ms (base.css turns that into an instant swap under reduced motion). */
:root.lp-still .lp-header.is-floating .lp-header__bar { transform: none; }
:root.lp-still .lp-header__bar { transition: opacity .15s linear, visibility 0s, color .25s var(--ease); }
:root.lp-still .lp-header.is-floating .lp-header__bar { transition: opacity .15s linear, visibility 0s linear .15s, color .25s var(--ease); }
:root.lp-still .lp-header :is(.lp-pill, .lp-pill__surface, .lp-pill__brand, .lp-pill__mark, .lp-pill__word, .lp-pill__links > li, .lp-pill__end, .lp-pill__label),
:root.lp-still .lp-header .lp-pill__cta::before { animation: none; }
:root.lp-still .lp-header.is-floating :is(.lp-pill__surface, .lp-pill__row) { transition: opacity .15s linear; }
:root.lp-still .lp-header .lp-pill__menu { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-header.is-floating .lp-header__bar { transform: none; }
  .lp-header .lp-pill__menu { transform: none; }
}


/* ── hero ── */
/* Hero (owner, BRIEF items 14–15 and 37, after tradingview.com): one short scroll story that starts
   on the page's own colour and turns Mira blue as the product arrives.
   Screen 1 fills the window at any size: the headline, line and buttons, on the page colour
   (var(--bg): white, or #131313 in dark mode) with the page's own ink and buttons. No blue, no
   clouds. The Download button names the visitor's computer, and "Open web app" hangs under the
   buttons (item 41, below).
   On wide, tall screens the stage then pins for about 100vh of scroll (hero.js maps progress to the
   --hero-* variables): the first screen rises and fades; as the workspace window's top edge comes
   up into view the blue band (band gradient, glow, the deeper top under the bar) fades in, and it
   is fully blue by the time the second title has brightened in; the window rises into place under
   it. Then the pin lets go, the window scrolls up and the page rounds up into the band with 32px
   corners.
   Phones, short screens, reduced motion, "Pause motion" and no JS get the same pieces in normal
   flow: screen 1 on the page colour, then the band begins softly behind the second title (a static
   ramp, no seam), then the window with the shared reveal (none under reduced motion).
   Everything here is CSS gradients; the only image is the real capture (MEDIA.json). */
.lp-hero {
  /* The band: the owner's three blues. */
  --band-top: #3F7DF4;
  --band-mid: #2F6BEA;
  --band-low: #2457D6;
  --band: linear-gradient(180deg, var(--band-top) 0, var(--band-mid) 240px, var(--band-low) 100%);
  /* D1 display (Dots type scale, owner 2026-10-18): 32px at 390, 64px from 1440 up, fluid between. */
  --h1: clamp(32px, calc(20.1px + 3.05vw), 64px);
  /* Screen 1. */
  --hero-screen: max(100svh, 540px);
  /* Normal flow: the band's soft leading edge, which begins --hero-ramp-from above screen 1's
     foot (0: right at it, so the first screen is the bare page colour) and is fully blue
     --hero-ramp later. Plain px: hero.js reads --hero-ramp. */
  --hero-ramp: 224px;
  --hero-ramp-from: 0px;
  position: relative;
  isolation: isolate;
  /* clip, not hidden: nothing (the low window, the glow) can paint over the next section, and the
     sticky stage still pins. */
  overflow: clip;
  /* Runs up under the sticky 64px header. */
  margin-top: -64px;
  padding: 0;
  /* Only ever seen below the stage, where the band is fully in (the pinned story's tail, under the
     window's melted foot). */
  background: var(--band-low);
  color: var(--ink);
}

.lp-hero .lp-hero__stage {
  position: relative;
  background: var(--bg);
}

/* ── The sky: the blue band, its glow and its deeper top, as one layer ─────────────────────── */
/* Normal flow: the band starts at screen 1's foot and comes in over --hero-ramp on a soft
   (smoothstep) edge, so it is fully blue by the second title. The pinned story overrides this: the
   whole layer covers the stage and fades in with --hero-sky. */
.lp-hero .lp-hero__sky {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--hero-screen) - var(--hero-ramp-from));
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--band-low);
  --ramp-mask: linear-gradient(180deg,
    rgb(0 0 0 / 0) 0,
    rgb(0 0 0 / .028) calc(var(--hero-ramp) * .1),
    rgb(0 0 0 / .104) calc(var(--hero-ramp) * .2),
    rgb(0 0 0 / .216) calc(var(--hero-ramp) * .3),
    rgb(0 0 0 / .352) calc(var(--hero-ramp) * .4),
    rgb(0 0 0 / .5) calc(var(--hero-ramp) * .5),
    rgb(0 0 0 / .648) calc(var(--hero-ramp) * .6),
    rgb(0 0 0 / .784) calc(var(--hero-ramp) * .7),
    rgb(0 0 0 / .896) calc(var(--hero-ramp) * .8),
    rgb(0 0 0 / .972) calc(var(--hero-ramp) * .9),
    #000 var(--hero-ramp));
  -webkit-mask-image: var(--ramp-mask);
  mask-image: var(--ramp-mask);
}
/* The sky deepens at the very top, under the bar: the header has no colour of its own over the
   band (owner: "the header should be the same"), and this keeps its white links at AA. Part of
   the band, so it fades in with it; only the pinned story has the band under the bar. */
.lp-hero .lp-hero__sky::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  height: 168px;
  background: linear-gradient(180deg, rgb(38 92 222 / 82%) 0%, rgb(38 92 222 / 56%) 38%, rgb(38 92 222 / 0) 100%);
  display: none;
}

/* tradingview.com's second backdrop is its Earth, blurred: a dark top, a bright centre behind the
   title, blue to the left, violet to the right, dark below. The same depth, in Mira blue. */
.lp-hero .lp-hero__glow {
  position: absolute;
  left: 0;
  right: 0;
  /* Normal flow: it starts where the band is fully in, so it sits behind the title and the window
     exactly as it did when the band started at screen 1's foot. */
  top: var(--hero-ramp);
  bottom: 0;
  --glow-at: 190px;
  background:
    radial-gradient(min(56vw, 820px) min(30svh, 300px) at 50% var(--glow-at), rgb(214 230 255 / 44%), rgb(176 206 255 / 22%) 44%, rgb(176 206 255 / 0) 100%),
    radial-gradient(min(110vw, 1600px) min(62svh, 620px) at 50% calc(var(--glow-at) + 8svh), rgb(128 180 255 / 40%), rgb(128 180 255 / 0) 100%),
    radial-gradient(52vw 56svh at 2% 78%, rgb(70 196 255 / 34%), rgb(70 196 255 / 0) 100%),
    radial-gradient(52vw 56svh at 98% 78%, rgb(150 126 255 / 36%), rgb(150 126 255 / 0) 100%),
    linear-gradient(180deg, rgb(9 20 72 / 74%) 0%, rgb(9 20 72 / 30%) 26%, rgb(9 20 72 / 0) 44%),
    radial-gradient(150vw 130svh at 50% 46%, rgb(9 20 72 / 0) 44%, rgb(9 20 72 / 58%) 100%);
  /* In normal flow the deeper backdrop fades in under the title, so there is no seam where it
     starts. The pinned story overrides this mask. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%);
  mask-image: linear-gradient(180deg, transparent 0, #000 38%);
}

/* ── Screen 1: headline, line, buttons, on the page's own colour and ink ───────────────────── */
/* The copy sits in the centre of the first screen (owner, 2026-10-18: "place these in the
   centre"), at any screen height. */
.lp-hero .lp-hero__screen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--hero-screen);
  /* Optical centre (45% down): the copy's middle sits just above the middle of the screen. */
  padding-top: 64px;
  padding-bottom: calc(64px + 10svh);
}
.lp-hero .lp-hero__intro {
  display: grid;
  justify-items: center;
  text-align: center;
}
.lp-hero .lp-hero__intro h1 { text-wrap: balance; color: var(--ink); }
.lp-hero .lp-hero__lede {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 28px;
  text-wrap: balance;
}
.lp-hero .lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
/* The page's own secondary button, with an outline that reads against the page colour (3:1 or
   more: 3.2:1 on white, 4.6:1 on black, measured; the page's --line-strong hairline is 1.4:1 / 2.1:1,
   and the fill alone is 1:1 / 1.3:1). Built from the page's ink and colour, so it follows the theme. */
.lp-hero .lp-hero__actions .lp-btn--secondary {
  border-color: color-mix(in srgb, var(--ink) 46%, var(--bg));
}

/* ── Download follows the visitor's computer; the web app is named (owner, BRIEF item 41) ──── */
/* hero.js names the platform on the button (data-os). The marks are one colour, the button's own
   ink (currentColor), so they follow light and dark; without a data-os (no JS, Linux, phones,
   unknown) neither shows and the button is the plain "Download". */
.lp-hero .lp-hero__mark { display: none; flex: none; fill: currentColor; }
.lp-hero .lp-hero__download[data-os="mac"] .lp-hero__mark--mac {
  display: block;
  width: 15px;
  height: 15px;
  margin: -3px 0 0 -2px; /* the Apple mark's leaf sits above its body: centre the body on the text */
}
.lp-hero .lp-hero__download[data-os="windows"] .lp-hero__mark--windows {
  display: block;
  width: 12px;
  height: 12px;
  margin-left: -1px;
}
/* A build that is not out yet is a status, not a control (miraDownloads.ts: never a dead link).
   hero.js takes the href away, so it is plain text, out of the tab order and the link list, drawn
   like the pricing "Coming soon" sticker at the button's size: the page colour, a hairline, the
   secondary ink, no hover. */
.lp-hero .lp-hero__actions .lp-hero__download.is-soon,
.lp-hero .lp-hero__actions .lp-hero__download.is-soon:hover {
  cursor: default;
  background: var(--bg);
  border-color: var(--line-strong);
  color: var(--ink-2);
}
/* "Open web app": the same workspace runs in the browser at /charts (charts, journal, analytics
   and notes; FACTS platforms). A quiet text link under the buttons, not a third button (item 2:
   two per block). It hangs below them without adding to the block's height (the negative bottom
   margin equals its top margin plus its height), so screen 1's headline, line and buttons keep the
   places the scroll story was tuned for. 44px tall: a full tap target on phones. */
.lp-hero .lp-hero__web {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 8px 0 -52px;
  padding: 0 18px;
  color: var(--ink-2);
  font: 500 14px/20px var(--font);
  letter-spacing: normal;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  transition: color .15s var(--ease), text-decoration-color .15s var(--ease);
}
.lp-hero .lp-hero__web:hover { color: var(--ink); text-decoration-color: currentColor; }
/* Its focus ring is a pill drawn inside the 44px tap target (6px above and below the text, clear
   of its ends), so it reads like the buttons' rings and stays clear of the button above it. */
.lp-hero .lp-hero__web:focus-visible { outline-offset: -6px; border-radius: 999px; }

/* ── Screen 2: the title and the real workspace in its glass frame, white on the blue ──────── */
.lp-hero .lp-hero__next {
  --ink: #FFFFFF;
  --ink-2: #FFFFFF;
  --ink-3: #D6E2FB;
  --line: rgb(255 255 255 / 14%);
  --line-strong: rgb(255 255 255 / 40%);
  --focus: #FFFFFF;
  --btn-primary-bg: #FFFFFF;
  --btn-primary-ink: #0F0F0F;
  --btn-primary-hover: #EEF3FF;
  --btn-secondary-bg: transparent;
  --btn-secondary-hover: rgb(255 255 255 / 12%);
  position: relative;
  z-index: 1;
  color: var(--ink);
  /* Normal flow: the title keeps its old distance from the band's start, below the soft edge. */
  padding: calc(clamp(24px, 5vw, 56px) + var(--hero-ramp) - var(--hero-ramp-from)) 0 calc(clamp(72px, 9vw, 112px) + 32px);
}
/* The second title is laid out like the Dots section heads (owner, 2026-10-18: "make the text
   placement and layout like this", on "Get going with dots"): a 64/76.8 heading over a 24/31.2
   line, centred in 768px, 16px apart. */
.lp-hero .lp-hero__title {
  width: min(100% - 2 * var(--gutter), 768px);
  margin-inline: auto;
  text-align: center;
  color: var(--ink);
  /* A soft blue halo under the white type keeps it at AA over the glow (review: 2.45:1 before). */
  text-shadow: 0 1px 2px rgb(14 40 140 / 35%), 0 2px 28px rgb(14 40 140 / 55%);
}
.lp-hero .lp-hero__title h2 {
  font-size: 64px;
  line-height: 76.8px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lp-hero .lp-hero__title p {
  margin-top: 16px;
  font-size: 24px;
  line-height: 31.2px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgb(255 255 255 / 82%);
  text-wrap: pretty;
}
@media (max-width: 600px) {
  .lp-hero .lp-hero__title h2 { font-size: 36px; line-height: 43.2px; }
  /* At 18px the line is body-size text (4.5:1): full white over the glow measures 5.5:1 or more
     at 360–600px, where 82% white measured 4.2:1. */
  .lp-hero .lp-hero__title p { margin-top: 12px; font-size: 18px; line-height: 23.4px; color: #FFFFFF; }
}
/* tradingview.com's glass bezel: a 6px translucent rim with a hairline, 18px radius. A plain
   translucent fill rather than a backdrop blur, so the moving frame stays cheap to draw. */
.lp-hero .lp-hero__window {
  position: relative;
  isolation: isolate;
  width: min(100% - 2 * var(--gutter), 1120px);
  margin: clamp(32px, 4vw, 48px) auto 0;
  padding: 7px;
  /* Rounder, like the landing's cards (owner, 2026-10-18: "make this more round at the sides"). */
  border-radius: 32px;
  background: rgb(255 255 255 / 16%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 26%);
}
/* The window's deep drop shadow, on its own layer: in the pinned story it reaches up over the
   bottom of screen 1 before the window does, so it fades in with the band (--hero-sky) and the
   first screen stays on the bare page colour. */
.lp-hero .lp-hero__window::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 40px 120px -24px rgb(8 24 80 / 55%);
  pointer-events: none;
}
.lp-hero .lp-hero__window img {
  width: 100%;
  height: auto;
  border-radius: 25px;
  background: #fff;
}
/* tradingview.com's window dissolves into the backdrop at its lower edge. A white window turned
   see-through over the glow reads washed out, so here the band's own blue rises over its lower
   edge instead: the window melts into solid blue, as theirs melts into black. In the pinned story
   this edge only comes on screen once the band is fully in (hero.js times the fade from it). */
.lp-hero .lp-hero__window::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 36%;
  border-radius: 0 0 33px 33px;
  background: linear-gradient(180deg, rgb(36 87 214 / 0) 0%, rgb(36 87 214 / 22%) 26%, rgb(36 87 214 / 68%) 56%, rgb(36 87 214 / 94%) 80%, var(--band-low) 100%);
  pointer-events: none;
}

/* tradingview.com's small glass pill over the window's lower edge, text only. */
.lp-hero .lp-hero__more {
  position: relative;
  z-index: 2;
  display: table;
  margin: 24px auto 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgb(14 30 92 / 74%);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%), 0 14px 36px -14px rgb(9 20 72 / 70%);
  color: #FFFFFF;
  font: 500 14px/1 var(--font);
  letter-spacing: normal;
  text-decoration: none;
  transition: background-color .2s var(--ease-out);
}
.lp-hero .lp-hero__more:hover { background: rgb(20 42 120 / 82%); }
/* Its focus ring is white with a navy rim on both sides: in the pinned story the pill sits over
   the white chart (a plain white ring vanished there), in normal flow over the blue. */
.lp-hero .lp-hero__more:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%), 0 0 0 6px #0E1E5C, 0 14px 36px -14px rgb(9 20 72 / 70%);
}
/* Keyboard focus never parks a control under the sticky 64px bar (Shift+Tab back up onto the pill
   left it there, fully hidden at some scroll positions). */
.lp-hero .lp-hero__actions .lp-btn,
.lp-hero .lp-hero__web,
.lp-hero .lp-hero__more { scroll-margin-top: 80px; }

/* The page below rounds up into the band (owner, after tradingview.com): a 32px sheet in the page
   colour across the band's bottom edge. */
.lp-hero::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 33px;
  border-radius: 32px 32px 0 0;
  background: var(--bg);
  pointer-events: none;
}

@media (min-width: 900px) {
  .lp-hero .lp-hero__intro h1 { white-space: nowrap; }
}

/* ── The pinned scroll story: wide (≥ 760px) and tall (≥ 620px) screens with motion allowed ── */
@media (min-width: 760px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  html:not(.no-js):not(.lp-still) .lp-hero {
    --hero-screen: 100svh;
    --hero-pin: 100vh;
    --hero-title-h: calc(76.8px + 16px + 2 * 31.2px); /* heading, gap, two lines of the line under it */
    --hero-win-gap: clamp(64px, 12svh, 128px);
    --hero-win-w: min(1440px, 100vw - 48px, 1120px + (100vw - 1440px) * .67);
    --hero-win-h: calc((var(--hero-win-w) - 12px) * .625 + 12px);
    /* Like tradingview.com, the window sits low: its faded lower edge meets the bottom of the
       screen (on tall screens it rests lower still), and the title sits right above it. */
    --hero-win-top: max(64px + clamp(28px, 7svh, 80px) + var(--hero-title-h) + var(--hero-win-gap), 100svh - var(--hero-win-h) * .86);
    --hero-title-top: calc(var(--hero-win-top) - var(--hero-win-gap) - var(--hero-title-h));
    /* After the pin lets go, the window scrolls up and the rounded sheet meets it where it has
       melted into the blue. */
    padding-bottom: max(0px, var(--hero-win-top) + var(--hero-win-h) * .9 - 100svh);
  }
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__track { height: calc(100svh + var(--hero-pin)); }
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__stage {
    position: sticky;
    top: 0;
    height: 100svh;
  }
  /* The band covers the stage and fades in over the page colour (hero.js --hero-sky, which is
     also what --hero-blue on #hero reports while the band is under the bar). */
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__sky {
    top: 0;
    background: var(--band);
    -webkit-mask-image: none;
    mask-image: none;
    opacity: var(--hero-sky, 0);
    will-change: opacity;
  }
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__sky::after { display: block; }
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__glow {
    top: 0;
    --glow-at: calc(var(--hero-win-top) - var(--hero-win-gap) * .35);
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent);
    mask-image: linear-gradient(180deg, #000 74%, transparent);
    opacity: var(--hero-glow-o, 0);
    will-change: opacity;
  }
  /* The rising first screen fades out before it reaches the bar, so nothing smears under it. */
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__screen {
    position: absolute;
    inset: 0;
    min-height: 0;
    -webkit-mask: linear-gradient(180deg, transparent 64px, #000 148px);
    mask: linear-gradient(180deg, transparent 64px, #000 148px);
  }
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__intro {
    transform: translate3d(0, var(--hero-intro-y, 0px), 0);
    opacity: var(--hero-intro-o, 1);
    /* Not clickable once it has faded away (hero.js --hero-intro-hit), nor the pill before it is in. */
    pointer-events: var(--hero-intro-hit, auto);
    will-change: transform, opacity;
  }
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__next {
    position: absolute;
    inset: 0;
    padding: 0;
    pointer-events: none;
  }
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__title {
    position: absolute;
    top: var(--hero-title-top);
    left: 0;
    right: 0;
    transform: translate3d(0, var(--hero-title-y, 16px), 0) scale(var(--hero-title-s, .97));
    opacity: var(--hero-title-o, 0);
    transition: none;
    will-change: transform, opacity;
  }
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__more {
    position: absolute;
    left: 50%;
    bottom: max(28px, 7svh);
    margin: 0;
    transform: translate3d(-50%, var(--hero-title-y, 16px), 0);
    opacity: var(--hero-title-o, 0);
    pointer-events: var(--hero-more-hit, none);
    will-change: transform, opacity;
  }
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__window {
    position: absolute;
    top: var(--hero-win-top);
    left: 0;
    right: 0;
    width: var(--hero-win-w);
    margin: 0 auto;
    /* The glide (v1): hero.js paints these at a smoothed progress. The window grows from 95.5% to
       full size about its top edge as it rises (--hero-win-s), so its top follows --hero-win-y
       exactly; at rest it is the same window as before, at scale 1. */
    transform: translate3d(0, var(--hero-win-y, 100svh), 0) scale(var(--hero-win-s, 1));
    transform-origin: 50% 0;
    opacity: 1;
    transition: none;
    pointer-events: auto;
    will-change: transform;
  }
  /* Its shadow fades in with the band, as before, and settles with the window: it starts lighter
     and close under it, then deepens and drops to its full 40px offset as the window lands
     (--hero-win-shadow-o is the band's opacity times that strength). Opacity and transform only,
     so the big blur is never repainted. */
  html:not(.no-js):not(.lp-still) .lp-hero .lp-hero__window::before {
    opacity: var(--hero-win-shadow-o, var(--hero-sky, 0));
    transform: translate3d(0, var(--hero-win-shadow-y, 0px), 0);
    will-change: opacity, transform;
  }
}

/* Phones: a shorter soft edge, and the framed window runs off the right edge so the charts stay
   large enough to see. */
@media (max-width: 720px) {
  .lp-hero { --hero-ramp: 160px; }
  .lp-hero .lp-hero__lede { margin-top: 12px; }
  .lp-hero .lp-hero__actions { margin-top: 24px; }
  .lp-hero .lp-hero__next { padding-bottom: calc(56px + 24px); }
  .lp-hero .lp-hero__window { width: 640px; margin: 32px 0 0 var(--gutter); padding: 5px; border-radius: 22px; }
  .lp-hero .lp-hero__window img { border-radius: 17px; }
  .lp-hero .lp-hero__window::after { border-radius: 0 0 23px 23px; }
  .lp-hero::after { height: 25px; border-radius: 24px 24px 0 0; }
}

/* hero-demo: the real recording plays over the still (its first frame), inside the window's glass
   frame and under its blue lower edge (::after paints later). Never under reduced motion or Pause
   motion; the still stays. */
.lp-hero .lp-hero__demo {
  position: absolute;
  top: 7px;
  left: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: cover;
  border-radius: 25px;
  background: #fff;
  opacity: 0;
  transition: opacity 520ms var(--ease-out);
  pointer-events: none;
}
.lp-hero .lp-hero__demo.is-on { opacity: 1; }
.lp-hero .lp-hero__window picture { display: block; }
/* The app's own dark surface behind its dark recording (the page's dark rule, tokens.css). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-hero .lp-hero__demo { background: #131313; } }
:root[data-theme="dark"] .lp-hero .lp-hero__demo { background: #131313; }
@media (max-width: 720px) {
  .lp-hero .lp-hero__demo { top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 17px; }
}
html.lp-still .lp-hero .lp-hero__demo { display: none; }
@media (prefers-reduced-motion: reduce) { .lp-hero .lp-hero__demo { display: none; } }
/* /hero-demo */


/* ── logos ── */
/* Logos — the strip under the hero: the four live brokers, then the chart-data feeds whose marks
   are verified (FACTS.json brokers, dataFeeds). Logos only (owner item 3: no title, no group
   labels; names live in each link's aria-label and tooltip). Real marks in full colour, shown as
   app-icon tiles; every tile links to its page. TopstepX uses the mark the app itself shows
   (desktop/src/assets/topstepx-logo.png), so the strip and the captures agree (review item 10).
   Motion: the tiles fade in one after another (runtime.js [data-reveal-stagger], 60ms apart) with
   a smaller rise than the page default, so the strip reads as one quiet line arriving. */
.lp-logos {
  --reveal-rise: 8px;
  /* Close under the hero band; below, half the page rhythm like every section (review item 11). */
  padding-block: 16px var(--section);
}

.lp-logos .lp-logos__groups {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
}

.lp-logos .lp-logos__list {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-logos .lp-logos__list + .lp-logos__list {
  margin-left: 40px;
  padding-left: 40px;
  border-left: 1px solid var(--line);
}

.lp-logos .lp-logos__item {
  display: block;
  border-radius: calc(var(--r-mock) + 2px);
  text-decoration: none;
}
.lp-logos .lp-logos__item:focus-visible { outline-offset: 4px; border-radius: calc(var(--r-mock) + 4px); }

/* App-icon tile: the vendor's own square mark, clipped to the 14px mock radius, with a hairline so
   white marks (TopstepX, NinjaTrader) keep their edge, and a soft natural shadow. */
.lp-logos .lp-logos__tile {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--r-mock);
  background: #fff;
  box-shadow: 0 1px 2px rgb(16 24 40 / 7%), 0 8px 18px -10px rgb(16 24 40 / 30%);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.lp-logos .lp-logos__tile img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
/* The app's TopstepX mark is a black X on white with a one-pixel grey rule along its last row;
   it sits inside the tile like the app shows it. A centred cover crop trims ~20 white rows top
   and bottom, so that rule stays outside the tile and the downscale never samples it (the file
   itself is untouched). */
.lp-logos .lp-logos__tile--inset { display: grid; place-items: center; padding: 9px; }
.lp-logos .lp-logos__tile--inset img { height: auto; aspect-ratio: 551 / 516; border-radius: 0; object-position: center; }
.lp-logos .lp-logos__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(11 13 18 / 8%);
  pointer-events: none;
}

.lp-logos .lp-logos__item:hover .lp-logos__tile {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgb(16 24 40 / 7%), 0 14px 24px -12px rgb(16 24 40 / 34%);
}

/* Dark page: the tiles keep their own colours; a faint light rim replaces the shadow, which
   disappears on the dark #131313 page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-logos .lp-logos__tile { box-shadow: 0 0 0 1px rgb(255 255 255 / 10%); }
}
:root[data-theme="dark"] .lp-logos .lp-logos__tile { box-shadow: 0 0 0 1px rgb(255 255 255 / 10%); }

@media (max-width: 900px) {
  .lp-logos .lp-logos__list { gap: 20px; }
  .lp-logos .lp-logos__list + .lp-logos__list { margin-left: 28px; padding-left: 28px; }
}

/* Phone: brokers on one row, chart data on the next. */
@media (max-width: 600px) {
  .lp-logos { padding-block: 8px var(--section); }
  .lp-logos .lp-logos__groups { flex-direction: column; gap: 20px; margin-top: 24px; }
  .lp-logos .lp-logos__list { gap: 16px; }
  .lp-logos .lp-logos__list + .lp-logos__list { margin-left: 0; padding-left: 0; border-left: 0; }
  .lp-logos .lp-logos__tile { width: 56px; height: 56px; }
  .lp-logos .lp-logos__tile--inset { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-logos .lp-logos__item:hover .lp-logos__tile { transform: none; }
}


/* ── features ── */
/* Features — the ChatGPT Dots "Get going with dots" rows (owner item 16) holding composed scenes in
   the /signin journal standard (owner item 28): large, crisp REAL Mira captures
   (content/landing/MEDIA.json), or small pieces of Mira's UI rebuilt in HTML as exact copies
   (owner item 29); never invented UI, never a pointer.

   Row layout, measured on Dots and widened by the owner (items 16 and 26): a centred title over a
   grey line (the Dots type scale, owner 2026-10-18: D2 title, Body line), 48px above the list; a
   1100px list of rows 64px apart; each row is a 670:377 tile (53px radius at 670, scaled) beside a 230fr text column, 56px apart, sides
   alternating. At 1100px a tile is ≈ 760 × 428.

   Every tile is a window-and-panel scene (owner items 30, 32 and 33, after openai.com/codex): one
   white Mira window and one panel overlapping it, filling the tile to about 32 units of margin, each
   tile in its own placement and shape (item 33): order flow is the Codex layout (window left,
   bleeding off the left and bottom, tall panel right bleeding off the right and bottom); copier a wide table band with the group card centred under it;
   risk the panel top-right over a chart that bleeds off the left and bottom; journal mirrored, the P&L card
   left of a calendar that bleeds off the right and bottom; replay one full-width chart with the
   transport centred across its foot. Nothing pops out of the tile. Everything sits in
   .lp-features__clip, clipped to the tile's rounded shape.
   A panel is placed in tile units (--u: one 760th of the tile, so 1u = 1px at full size): --x/--y
   is its top-left, --s is units per source pixel (0.45 = 0.9x of a 2x capture, 1 = 1x of a 1x
   capture), and --cx/--cy/--cw/--ch is its crop in source pixels. Crops take whole rows and whole
   controls, and start just inside a capture's own hairline border, so panels separate by one soft
   shadow and no strokes. Phones (≤ 600px) show a square tile in 400 units, with their own
   --mx/--my/--ms and crop (--mc*).

   Motion is the shared settle-in only ([data-enter] in base.css, run by runtime.js): the window
   rises first, the panel ~250ms later. No loops. Static without JS, under prefers-reduced-motion
   and with "Pause motion" (html.lp-still). */

.lp-features { padding-block: 128px; }

/* ── Head ── */
.lp-features .lp-features__head {
  display: grid;
  gap: 16px;
  max-width: 768px;
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.lp-features .lp-features__head h2 { /* D2 */
  font-size: 30px;
  line-height: 39.6px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* Body. At 17px it is not large text at any width, so it takes --ink-2 for AA everywhere (it was
   --ink-3 only while it was ≥ 24px, from 1200px up). */
.lp-features .lp-features__head p {
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-wrap: balance;
}

/* ── List and rows ── */
.lp-features .lp-features__list {
  display: grid;
  gap: 64px;
  width: min(100%, 1100px);
  margin: 48px auto 0;
}
.lp-features .lp-features__row {
  display: grid;
  grid-template-columns: minmax(0, 670fr) minmax(0, 230fr);
  column-gap: 56px;
  align-items: center;
  padding-right: 24px;
}
.lp-features .lp-features__row:nth-child(even) {
  grid-template-columns: minmax(0, 230fr) minmax(0, 670fr);
  padding: 0 0 0 24px;
}
.lp-features .lp-features__row:nth-child(odd) > .lp-features__tile { order: -1; } /* the text comes first in the DOM, so a tile follows its own heading */

/* ── Text column ── */
.lp-features .lp-features__copy { display: grid; justify-items: start; }
.lp-features .lp-features__copy h3 { /* D3 */
  font-size: 22px;
  line-height: 27.72px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lp-features .lp-features__copy p { /* Small: the text column is only 230fr wide */
  margin-top: 13px;
  font-size: 14px;
  line-height: 22.96px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.lp-features .lp-features__link { /* Label */
  margin-top: 14px;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  transition: text-decoration-color .15s var(--ease);
}
.lp-features .lp-features__link:hover { text-decoration-color: currentColor; }

/* ── Tile: a soft, layered gradient with light spots (Dots), vivid in both themes ── */
.lp-features .lp-features__tile {
  --tint: 16 24 40;
  --radius: 7.91% / 14.06%; /* 53px at 670 × 377, scaled with the tile */
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  min-height: 0;
  aspect-ratio: 670 / 377;
  border-radius: var(--radius);
  overflow: visible; /* .lp-features__clip clips the scene; the tile keeps its shadow-free edge */
  isolation: isolate;
  container-type: inline-size;
  background:
    radial-gradient(75% 95% at 6% 0%, rgb(255 255 255 / 58%), rgb(255 255 255 / 0%) 72%),
    radial-gradient(60% 80% at 100% 100%, rgb(255 255 255 / 22%), rgb(255 255 255 / 0%) 70%),
    radial-gradient(55% 70% at 96% 6%, rgb(var(--deep) / 32%), rgb(var(--deep) / 0%) 72%),
    var(--fill);
}
.lp-features .lp-features__tile--sky { --fill: var(--card-sky); --deep: 30 100 230; --tint: 18 56 128; }
.lp-features .lp-features__tile--violet { --fill: var(--card-violet); --deep: 150 60 230; --tint: 76 29 128; }
.lp-features .lp-features__tile--coral { --fill: var(--card-coral); --deep: 230 80 50; --tint: 128 40 16; }
.lp-features .lp-features__tile--mint { --fill: var(--card-mint); --deep: 20 150 100; --tint: 8 84 58; }
.lp-features .lp-features__tile--sun { --fill: var(--card-sun); --deep: 245 160 30; --tint: 120 72 0; }

.lp-features .lp-features__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

/* ── A panel: one real capture, cropped, white, with one soft shadow tinted by the tile ── */
.lp-features .lp-features__pane {
  --u: calc(100cqw / 760);
  --X: var(--x);
  --Y: var(--y);
  --S: var(--s);
  --CX: var(--cx);
  --CY: var(--cy);
  --CW: var(--cw);
  --CH: var(--ch);
  --W: calc(var(--CW) * var(--S) * var(--u));
  --H: calc(var(--CH) * var(--S) * var(--u));
  position: absolute;
  left: calc(var(--X) * var(--u));
  top: calc(var(--Y) * var(--u));
  width: var(--W);
  height: var(--H);
  overflow: hidden;
  border-radius: calc(var(--r, 15) * var(--u));
  background: var(--capture-frame);
  box-shadow:
    0 calc(2 * var(--u)) calc(8 * var(--u)) rgb(var(--tint) / 10%),
    0 calc(24 * var(--u)) calc(56 * var(--u)) calc(-20 * var(--u)) rgb(var(--tint) / 40%);
}
/* A window (owner, 2026-10-18, after the Codex cards on openai.com/codex): one white Mira window
   inside the tile's margins — the app's own toolbar, the chart legend rebuilt in HTML and a chart
   capture stacked as the app shows them — that fades out into the tile at its foot. A second panel
   overlaps its right side, lower down. --w/--h are its size in tile units; its crops (below) take
   --s/--cx/--cy/--cw/--ch like a panel. The fade is a mask, which also clips a box shadow, so the
   window has none; the panel in front carries the depth. */
.lp-features .lp-features__win {
  --u: calc(100cqw / 760);
  --k: calc(0.9 * var(--u)); /* the legend at the footprint's 0.9x */
  --X: var(--x);
  --Y: var(--y);
  --W: var(--w);
  --H: var(--h);
  --PL: var(--pl, 0); /* inner left inset, for a window that bleeds off the tile's left edge */
  position: absolute;
  left: calc(var(--X) * var(--u));
  top: calc(var(--Y) * var(--u));
  width: calc(var(--W) * var(--u));
  height: calc(var(--H) * var(--u));
  padding-left: calc(var(--PL) * var(--u));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--r, 16) * var(--u));
  background: var(--capture-frame);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40 * var(--u)), transparent calc(100% - 4 * var(--u)));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40 * var(--u)), transparent calc(100% - 4 * var(--u)));
}
/* A window without the foot fade, for the tiles whose window bleeds off the tile's edges (owner,
   2026-10-18: "give them their own unique card placement, like different shapes", "stretch to the
   left too") and for replay ("remove the blur from only this one"): no mask, so it takes the
   panels' shadow. Only the base window rule still fades; no tile uses it now. */
.lp-features .lp-features__win--solid {
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow:
    0 calc(2 * var(--u)) calc(8 * var(--u)) rgb(var(--tint) / 10%),
    0 calc(24 * var(--u)) calc(56 * var(--u)) calc(-20 * var(--u)) rgb(var(--tint) / 40%);
}
.lp-features .lp-features__crop {
  --S: var(--s);
  --CX: var(--cx);
  --CY: var(--cy);
  --CW: var(--cw);
  --CH: var(--ch);
  position: relative;
  flex: none;
  width: calc(var(--CW) * var(--S) * var(--u));
  height: calc(var(--CH) * var(--S) * var(--u));
  overflow: hidden;
}
.lp-features .lp-features__bar {
  display: flex;
  flex: none;
  align-items: center;
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  border-bottom: 1px solid #ECEEF2;
}
.lp-features .lp-features__win .lp-ui-trade {
  flex: none;
  height: auto;
  padding: calc(12 * var(--k)) calc(14 * var(--k)) calc(4 * var(--k));
}
/* The panel in front of a window: lifted above it, inside the tile. */
.lp-features .lp-features__pane--front {
  z-index: 1;
  box-shadow:
    0 calc(4 * var(--u)) calc(14 * var(--u)) rgb(var(--tint) / 14%),
    0 calc(32 * var(--u)) calc(64 * var(--u)) calc(-20 * var(--u)) rgb(var(--tint) / 50%);
}

/* A panel cropped wider than its capture (one that bleeds off the tile's edge) would show the
   capture's own 1px right border inside it; --trim-r (source px) cuts it off. */
.lp-features .lp-features__pane > img { clip-path: inset(0 calc(var(--trim-r, 0) * var(--S) * var(--u)) 0 0); }
.lp-features .lp-features__pane > img,
.lp-features .lp-features__crop > img {
  position: absolute;
  max-width: none;
  height: auto;
  width: calc(var(--iw) * var(--S) * var(--u));
  left: calc(var(--CX) * var(--S) * -1 * var(--u));
  top: calc(var(--CY) * var(--S) * -1 * var(--u));
}
/* Interface rebuilt in HTML (owner, 2026-10-18: "you were supposed to generate UI, not place the
   image"): an exact copy of Mira's chart header — the symbol badge, name and ticker, and the
   chart's Sell / Buy price buttons — drawn crisp at any size. --k is one app pixel. Colours are the
   app's light chart theme, so it stays white in dark mode like the captures. */
@font-face {
  font-family: 'Mira Desktop Geist Sans';
  src: url('/fonts/desktop-geist/Geist-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
.lp-features .lp-features__ui { --k: calc(var(--S) * var(--u)); }
.lp-features .lp-ui-trade {
  display: grid;
  align-content: center;
  gap: calc(9 * var(--k));
  height: 100%;
  padding: calc(10 * var(--k)) calc(14 * var(--k));
  font-family: 'Mira Desktop Geist Sans', 'Geist Sans', -apple-system, system-ui, sans-serif; /* the app's own face */
  color: #131722;
}
.lp-features .lp-ui-trade__sym { display: flex; align-items: center; gap: calc(7 * var(--k)); white-space: nowrap; }
.lp-features .lp-ui-trade__sym b { font-size: calc(11.5 * var(--k)); font-weight: 500; letter-spacing: 0; }
.lp-features .lp-ui-trade__badge {
  display: grid;
  place-items: center;
  width: calc(18 * var(--k));
  height: calc(18 * var(--k));
  border-radius: 50%;
  background: #2E8BC0;
  color: #fff;
  font-size: calc(7 * var(--k));
  font-weight: 600;
}
.lp-features .lp-ui-trade__tick { font-size: calc(12 * var(--k)); color: #6A6D78; }
.lp-features .lp-ui-trade__btns { display: flex; gap: calc(40 * var(--k)); }
.lp-features .lp-ui-trade__btn {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: calc(2 * var(--k));
  min-width: calc(64 * var(--k));
  height: calc(34 * var(--k));
  padding: 0 calc(8 * var(--k));
  line-height: calc(16 * var(--k));
  border: calc(1 * var(--k)) solid #E0E3EB;
  border-radius: calc(6 * var(--k));
  background: #fff;
  font-size: calc(13 * var(--k));
  color: #6A6D78;
  font-variant-numeric: tabular-nums;
}
.lp-features .lp-ui-trade__btn em { font-style: normal; font-size: calc(11 * var(--k)); font-weight: 400; letter-spacing: 0; line-height: calc(13 * var(--k)); }
/* Filled buttons (owner, 2026-10-18: "make the background red and buy blue"). */
.lp-features .lp-ui-trade__btn--sell { background: #E5484D; border-color: #E5484D; color: rgb(255 255 255 / 88%); }
.lp-features .lp-ui-trade__btn--buy { background: #2962FF; border-color: #2962FF; color: rgb(255 255 255 / 88%); }
.lp-features .lp-ui-trade__btn--sell em,
.lp-features .lp-ui-trade__btn--buy em { color: #FFFFFF; }

/* Mira's Risk Guardian limits (Sentinel → Account risk) rebuilt in HTML (owner item 29): the same
   rows, labels, default values, inputs and Off switch as risk-rules.webp, in the app's face and
   colours, at the width of a side panel. --k is one app pixel. */
.lp-features .lp-ui-risk {
  display: grid;
  align-content: start;
  height: 100%;
  padding: calc(12 * var(--k)) calc(20 * var(--k));
  font-family: 'Mira Desktop Geist Sans', 'Geist Sans', -apple-system, system-ui, sans-serif;
  font-size: calc(13 * var(--k));
  line-height: 1.25;
  color: #333333;
}
.lp-features .lp-ui-risk__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--k));
  min-height: calc(46 * var(--k));
  white-space: nowrap;
}
.lp-features .lp-ui-risk__row--head { min-height: calc(35 * var(--k)); }
.lp-features .lp-ui-risk__state { display: flex; align-items: center; gap: calc(12 * var(--k)); color: #9E9E9E; }
.lp-features .lp-ui-risk__toggle {
  position: relative;
  width: calc(24 * var(--k));
  height: calc(14 * var(--k));
  border-radius: 999px;
  background: #D2D2D2;
}
.lp-features .lp-ui-risk__toggle::after {
  content: '';
  position: absolute;
  top: calc(2 * var(--k));
  left: calc(2 * var(--k));
  width: calc(10 * var(--k));
  height: calc(10 * var(--k));
  border-radius: 50%;
  background: #FFFFFF;
}
.lp-features .lp-ui-risk__input {
  display: flex;
  align-items: center;
  flex: none;
  width: calc(150 * var(--k));
  height: calc(32 * var(--k));
  padding-left: calc(12 * var(--k));
  border: max(1px, calc(0.75 * var(--k))) solid #E0E0E0;
  border-radius: calc(10 * var(--k));
  font-variant-numeric: tabular-nums;
}

/* ── Below 960px the text goes under its tile. ── */
@media (max-width: 959px) {
  .lp-features { padding-block: 96px; }
  .lp-features .lp-features__list { gap: 56px; margin-top: 40px; }
  .lp-features .lp-features__row,
  .lp-features .lp-features__row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    width: min(100%, 670px);
    margin-inline: auto;
    padding: 0;
  }
  .lp-features .lp-features__row > .lp-features__tile { order: -1; }
  .lp-features .lp-features__copy { max-width: 520px; }
  .lp-features .lp-features__copy p { margin-top: 8px; }
  .lp-features .lp-features__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; }
}

/* ── Phones: a square tile (Dots' mobile shape, 37px radius at 358px), composed in 400 units ── */
@media (max-width: 600px) {
  .lp-features { padding-block: 80px; }
  .lp-features .lp-features__head h2 { font-size: 24px; line-height: 31.8px; } /* D2, phone */
  .lp-features .lp-features__copy h3 { font-size: 20px; line-height: 24px; } /* D3, phone */
  .lp-features .lp-features__tile { --radius: 10.33%; aspect-ratio: 1 / 1; }
  .lp-features .lp-features__pane {
    --u: calc(100cqw / 400);
    --X: var(--mx, var(--x));
    --Y: var(--my, var(--y));
    --S: var(--ms, var(--s));
    --CX: var(--mcx, var(--cx));
    --CY: var(--mcy, var(--cy));
    --CW: var(--mcw, var(--cw));
    --CH: var(--mch, var(--ch));
  }
  .lp-features .lp-ui-risk__input { width: calc(96 * var(--k)); }
  .lp-features .lp-features__win {
    --u: calc(100cqw / 400);
    --X: var(--mx, var(--x));
    --Y: var(--my, var(--y));
    --W: var(--mw, var(--w));
    --H: var(--mh, var(--h));
    --PL: var(--mpl, var(--pl, 0));
  }
  .lp-features .lp-features__crop {
    --S: var(--ms, var(--s));
    --CX: var(--mcx, var(--cx));
    --CY: var(--mcy, var(--cy));
    --CW: var(--mcw, var(--cw));
    --CH: var(--mch, var(--ch));
  }
}


/* ── capabilities ── */
/* "The chart you trade from" — the ChatGPT Dots "Built for busy days" carousel, measured from
   that page (owner, 2026-10-17: "make these look just like this one: shape, detail, everything"):
   two-column head (title, grey subtitle ≤ 378px); "Explore" + 44px round arrows with a 1px 10%
   border; a snap carousel of 670px cards, 16px apart, aligned to the content column; media
   670 × 377 with a 53px radius; a title and a grey line under each; inactive cards fade their
   media to .15 and grey their title. Type is the Dots scale (owner, 2026-10-18): D2 title, Body
   subtitle and lines, D4 "Explore", D3 card titles; D2–D4 step down on phones (≤ 600px).
   Each media is a composed scene (owner items 24–25), never one floating screenshot: a big back
   panel (a real chart capture, 20px corners) bleeds off the media's edges and is clipped by them,
   and a front panel (the menu or list from a real capture) lies over it and pops out past one
   edge of the coloured card: bottom, left, right and top on the four cards. Where both panels
   come from the same capture, the front is the same pixels at the same place, lifted (its shadow
   is the only difference), so nothing is drawn twice. Text is at 1.06–1.33x on desktop (front
   menus ≥ 0.9x) and about 0.65–0.75x on a 390px phone. Section spacing follows the page rhythm. */

.lp-capabilities { overflow: hidden; }

.lp-capabilities .lp-capabilities__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Head: title left, subtitle right. */
.lp-capabilities .lp-capabilities__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
}
.lp-capabilities .lp-capabilities__head h2 {
  font-size: 30px;
  line-height: 39.6px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lp-capabilities .lp-capabilities__head p {
  max-width: 378px;
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-wrap: balance;
}

/* Controls: "Explore" + arrows. */
.lp-capabilities .lp-capabilities__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  position: relative;
  z-index: 2; /* above the track's top padding, which holds the panels that pop out of a card's top */
}
.lp-capabilities .lp-capabilities__label { font-size: 18px; line-height: 23.76px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); }
.lp-capabilities .lp-capabilities__arrows { display: flex; gap: 8px; }
.lp-capabilities .lp-capabilities__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s var(--ease), opacity .3s var(--ease-out);
}
.lp-capabilities .lp-capabilities__arrow:hover { background: var(--bg-soft); }
.lp-capabilities .lp-capabilities__arrow:focus-visible { border-radius: 999px; }
.lp-capabilities .lp-capabilities__arrow[aria-disabled="true"] { opacity: .35; cursor: default; }
.lp-capabilities .lp-capabilities__arrow[aria-disabled="true"]:hover { background: transparent; }
.lp-capabilities .lp-capabilities__arrow .lp-icon { width: 20px; height: 20px; stroke-width: 1.8; }

/* Track: horizontal snap carousel, aligned to the content column, scrollbar hidden. The arrows
   glide it with one long ease-out (capabilities.js); a swipe or trackpad scroll stays native. */
.lp-capabilities .lp-capabilities__track {
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2));
  position: relative; /* the cards measure their offsetLeft from the track */
  display: flex;
  gap: 16px;
  /* 32px of room above the cards for panels that pop out of a card's top edge; the cards still
     start 24px under the controls. */
  margin-top: -8px;
  padding-top: 32px;
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.lp-capabilities .lp-capabilities__track::-webkit-scrollbar { display: none; }
.lp-capabilities .lp-capabilities__track:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 8px; }

.lp-capabilities .lp-capabilities__card {
  flex: 0 0 min(670px, calc(100vw - 2 * var(--gutter) - 24px));
  scroll-snap-align: start;
  cursor: pointer;
}
.lp-capabilities .lp-capabilities__card[data-active="true"] { cursor: default; position: relative; z-index: 1; }
.lp-capabilities .lp-capabilities__card[data-active="true"] .lp-capabilities__media { cursor: pointer; }

/* Card motion (motion standard): when a card becomes the active one its media brightens, both
   panels settle 10px up into place together (so a lifted panel never drifts off its own pixels),
   and its line rises in 80ms later, all on --ease-out. The card leaving dims at the same pace but
   drops its line within 300ms, so only one card ever reads as active. */
.lp-capabilities .lp-capabilities__media {
  --u: calc(100cqw / 670);
  --tint: 16 24 40;
  position: relative;
  display: block;
  aspect-ratio: 670 / 377;
  border-radius: 53px;
  container-type: inline-size;
  isolation: isolate;
  /* The feature tiles' colours (tokens.css --card-*), as on the cards the owner picked. */
  background:
    radial-gradient(75% 95% at 6% 0%, rgb(255 255 255 / 58%), rgb(255 255 255 / 0%) 72%),
    radial-gradient(60% 80% at 100% 100%, rgb(255 255 255 / 22%), rgb(255 255 255 / 0%) 70%),
    radial-gradient(55% 70% at 96% 6%, rgb(var(--deep) / 32%), rgb(var(--deep) / 0%) 72%),
    var(--fill);
  transition: opacity .55s var(--ease-out);
}
.lp-capabilities .lp-capabilities__media--sky { --fill: var(--card-sky); --deep: 30 100 230; --tint: 18 56 128; }
.lp-capabilities .lp-capabilities__media--sun { --fill: var(--card-sun); --deep: 245 160 30; --tint: 120 72 0; }
.lp-capabilities .lp-capabilities__media--mint { --fill: var(--card-mint); --deep: 20 150 100; --tint: 8 84 58; }
.lp-capabilities .lp-capabilities__media--coral { --fill: var(--card-coral); --deep: 230 80 50; --tint: 128 40 16; }
.lp-capabilities .lp-capabilities__media--violet { --fill: var(--card-violet); --deep: 150 60 230; --tint: 76 29 128; }
.lp-capabilities .lp-capabilities__card[data-active="false"] .lp-capabilities__media { opacity: .15; }
.lp-capabilities .lp-capabilities__card[data-active="false"]:hover .lp-capabilities__media { opacity: .3; }
/* Without JS nothing picks an active card, so every card reads in full. */
.no-js .lp-capabilities .lp-capabilities__card[data-active="false"] .lp-capabilities__media { opacity: 1; }

/* The scene clips the back panel to the media's 53px corners; the front panel sits outside it. */
.lp-capabilities .lp-capabilities__scene {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

/* A panel: the source region --sx --sy --sw --sh (capture pixels, 2x) of an image --iw wide, drawn
   at --s design pixels per capture pixel with its top-left corner at --x --y, in the media's
   670 × 377 design pixels (--u). Phones read --m-* (a closer crop, so text stays readable). */
.lp-capabilities .lp-capabilities__panel {
  --kx: var(--x); --ky: var(--y); --ks: var(--s); --ksw: var(--sw); --ksh: var(--sh);
  position: absolute;
  left: calc((var(--kx) + var(--nudge, 0)) * var(--u));
  top: calc(var(--ky) * var(--u));
  width: calc(var(--ksw) * var(--ks) * var(--u));
  height: calc(var(--ksh) * var(--ks) * var(--u));
  overflow: hidden;
  border-radius: calc(var(--r) * var(--u));
  background: var(--capture-frame);
  box-shadow: 0 calc(24 * var(--u)) calc(48 * var(--u)) calc(-20 * var(--u)) rgb(var(--tint) / 38%);
  transform: none;
  transition: transform .65s var(--ease-out);
}
.lp-capabilities .lp-capabilities__panel > img {
  position: absolute;
  max-width: none;
  height: auto;
  width: calc(var(--iw) * var(--ks) * var(--u));
  left: calc(var(--sx) * var(--ks) * -1 * var(--u));
  top: calc(var(--sy) * var(--ks) * -1 * var(--u));
}
/* The front panel: the one soft shadow, a little deeper, as it stands off the back panel. */
.lp-capabilities .lp-capabilities__panel--front {
  z-index: 1;
  box-shadow: 0 calc(28 * var(--u)) calc(56 * var(--u)) calc(-16 * var(--u)) rgb(var(--tint) / 48%);
}
.lp-capabilities .lp-capabilities__card[data-active="false"] .lp-capabilities__panel { transform: translate3d(0, 10px, 0); }

/* The drawing-tools card pops out of its left edge; where the content column comes within 40px of
   the window (narrow desktops), it pops out 16px instead of 32px so it never touches the edge. */

/* Text under the media. */
.lp-capabilities .lp-capabilities__text { padding: 24px 24px 0; }
.lp-capabilities .lp-capabilities__text h3 {
  font-size: 22px;
  line-height: 27.72px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color .45s var(--ease-out);
}
.lp-capabilities .lp-capabilities__text h3 a { color: inherit; text-decoration: none; }
.lp-capabilities .lp-capabilities__text h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lp-capabilities .lp-capabilities__text p {
  margin-top: 12px;
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-wrap: balance;
  transition: opacity .5s var(--ease-out) 80ms, transform .6s var(--ease-out) 80ms;
}
.lp-capabilities .lp-capabilities__card[data-active="false"] .lp-capabilities__text h3 { color: var(--ink-3); }
.lp-capabilities .lp-capabilities__card[data-active="false"] .lp-capabilities__text p {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition-delay: 0ms;
  transition-duration: .3s;
}

@media (max-width: 760px) {
  .lp-capabilities .lp-capabilities__head { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .lp-capabilities .lp-capabilities__controls { margin-top: 36px; }
  /* Phones: the panels read their --m-* placement (a closer crop, text at 0.65–0.75x on a 390px
     phone), and side pop-outs stay within the 16px gutter (10px at most) so they stay on screen. */
  .lp-capabilities .lp-capabilities__track { margin-top: 0; padding-top: 24px; }
  .lp-capabilities .lp-capabilities__media { border-radius: 36px; }
  .lp-capabilities .lp-capabilities__panel {
    --kx: var(--m-x, var(--x)); --ky: var(--m-y, var(--y)); --ks: var(--m-s, var(--s));
    --ksw: var(--m-sw, var(--sw)); --ksh: var(--m-sh, var(--sh));
  }
  .lp-capabilities .lp-capabilities__text { padding: 18px 8px 0; }
}
@media (max-width: 600px) {
  .lp-capabilities .lp-capabilities__head h2 { font-size: 24px; line-height: 31.8px; }
  .lp-capabilities .lp-capabilities__label { font-size: 16px; line-height: 20px; }
  .lp-capabilities .lp-capabilities__text h3 { font-size: 20px; line-height: 24px; }
}

/* "Pause motion" and reduced motion: cards switch state without moving. */
.lp-still .lp-capabilities .lp-capabilities__panel--rise,
.lp-still .lp-capabilities .lp-capabilities__text p { transform: none !important; }
.lp-still .lp-capabilities .lp-capabilities__panel,
.lp-still .lp-capabilities .lp-capabilities__text p { transition: none; }
.lp-still .lp-capabilities .lp-capabilities__media,
.lp-still .lp-capabilities .lp-capabilities__text h3 { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-capabilities .lp-capabilities__track { scroll-behavior: auto; }
  .lp-capabilities .lp-capabilities__panel--rise,
  .lp-capabilities .lp-capabilities__text p { transform: none !important; }
}

/* Cards drawn as Mira UI (scenes.css) turn square on phones, as Dots' carousel does, so each scene
   can lay itself out in 400 × 400 units there. */
@media (max-width: 600px) {
  .lp-capabilities .lp-capabilities__media { aspect-ratio: 1 / 1; }
}


/* ── steps ── */
/* Steps — "A trading day in Mira" (owner item 11, after claude.com/product/overview "Put Claude to
   work"). Three stops of one day, each a vibrant card holding real Mira captures (MEDIA.json).

   Pinned (steps.js sets data-mode="pinned": at least 900×700, motion allowed, motion not paused):
   the stage sticks under the header for --steps-pin of scroll. steps.js maps that progress to the
   active stop and writes data-slot on each stop (0 front, 1 and 2 behind, negative = already
   shown), plus --lean (0–1) as the reader nears the next stop. The cards stack like the reference:
   back cards scaled .9395 / .8765 with their tops peeking out; near a switch the next card leans
   up a little (scroll-mapped); at the switch it scales up to the front while the old front drops
   to the back of the stack and fades. Only the front card shows its captures, and they arrive after
   the old ones have gone, so two captures never cross-fade. The copy swaps with a 16px rise and a
   fade, and a dot travels the time rail. Swaps are timed (450–700ms, --ease-out); scroll only picks
   the stop and the lean, so the wheel and the scroll speed are never touched.

   Static (no JS, phones, short windows, reduced motion, "Pause motion"): a plain stack of the three
   stops, each rising in once (shown at once when motion is off).

   Each card is a composed scene of real captures with one calm micro-story (owner item 18); see
   "Composed scenes" below. The card keeps the 911:581 shape the stack is sized by. */
.lp-steps {
  --steps-peek: 28px;
  --steps-pin: clamp(1800px, 260vh, 2600px);
  --steps-sun:
    radial-gradient(90% 70% at 10% 0%, rgb(255 255 255 / 42%) 0%, rgb(255 255 255 / 0%) 70%),
    linear-gradient(160deg, #FFEFB2 0%, #FFD46C 42%, #FFAD45 100%);
  --steps-sky:
    radial-gradient(90% 70% at 10% 0%, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 0%) 70%),
    linear-gradient(160deg, #D5E9FF 0%, #91C1FF 42%, #4A85F4 100%);
  --steps-violet:
    radial-gradient(90% 70% at 10% 0%, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 0%) 70%),
    linear-gradient(160deg, #F2E2FF 0%, #CFA6FF 42%, #9462EE 100%);
  --steps-shadow:
    0 2px 6px rgb(16 24 40 / 8%),
    0 24px 48px -20px rgb(16 24 40 / 34%);
  --steps-shadow-pop:
    0 4px 12px rgb(16 24 40 / 12%),
    0 30px 56px -16px rgb(16 24 40 / 44%);
  overflow-x: clip; /* a panel popping out of a card never makes the page scroll sideways */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-steps {
    --steps-sun: linear-gradient(160deg, #F6D677 0%, #F0B04A 45%, #DB862F 100%);
    --steps-sky: linear-gradient(160deg, #8FBAFF 0%, #5189F0 45%, #2E5DCB 100%);
    --steps-violet: linear-gradient(160deg, #D2ADFF 0%, #9B69EE 45%, #6A3ECB 100%);
    --steps-shadow: 0 2px 6px rgb(0 0 0 / 14%), 0 24px 48px -20px rgb(0 0 0 / 45%);
    --steps-shadow-pop: 0 4px 12px rgb(0 0 0 / 18%), 0 30px 56px -16px rgb(0 0 0 / 55%);
  }
}
:root[data-theme="dark"] .lp-steps {
  --steps-sun: linear-gradient(160deg, #F6D677 0%, #F0B04A 45%, #DB862F 100%);
  --steps-sky: linear-gradient(160deg, #8FBAFF 0%, #5189F0 45%, #2E5DCB 100%);
  --steps-violet: linear-gradient(160deg, #D2ADFF 0%, #9B69EE 45%, #6A3ECB 100%);
  --steps-shadow: 0 2px 6px rgb(0 0 0 / 14%), 0 24px 48px -20px rgb(0 0 0 / 45%);
  --steps-shadow-pop: 0 4px 12px rgb(0 0 0 / 18%), 0 30px 56px -16px rgb(0 0 0 / 55%);
}

.lp-steps .lp-steps__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Type: the Dots scale (owner, 2026-10-18): D2 section title, D3 stop titles, Body lines, Label
   times on the rail; D2 and D3 step down on phones (≤ 600px). */
.lp-steps .lp-intro h2 { font-size: 30px; line-height: 39.6px; font-weight: 500; letter-spacing: -0.01em; }

/* ── Static stack (the default) ── */
.lp-steps .lp-steps__track { margin-top: 64px; }
.lp-steps .lp-steps__band { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.lp-steps .lp-steps__rail { display: none; }
.lp-steps .lp-steps__stops { display: grid; row-gap: 96px; margin: 0; padding: 0; list-style: none; }
.lp-steps .lp-steps__stop {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  column-gap: 64px;
  align-items: center;
}
.lp-steps .lp-steps__copy { display: grid; gap: 10px; align-content: start; }
.lp-steps .lp-steps__copy h3 { font-size: 22px; line-height: 27.72px; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.lp-steps .lp-steps__copy p { color: var(--ink-2); font-size: 17px; line-height: 28px; font-weight: 400; letter-spacing: -0.01em; text-wrap: pretty; }

/* ── The card: a vibrant gradient, 24px corners, real captures inside ── */
.lp-steps .lp-steps__card {
  position: relative;
  margin: 0;
  isolation: isolate;
  border-radius: var(--r-card);
  container: lp-steps-card / inline-size;
}
.lp-steps .lp-steps__card--plan { background: var(--steps-sun); }
.lp-steps .lp-steps__card--copy { background: var(--steps-sky); }
.lp-steps .lp-steps__card--review { background: var(--steps-violet); }
.lp-steps .lp-steps__canvas {
  --u: calc(100cqi / 800);
  --h: 510;
  position: relative;
  height: calc(var(--h) * var(--u));
}

/* A card drawn as Mira UI (src/styles/landing/scenes.css): the canvas takes the scene's 760 × 428
   shape and the card's corners; it turns square on phone cards, like the feature tiles. */
.lp-steps .lp-steps__canvas--scene { height: auto; aspect-ratio: 760 / 428; border-radius: inherit; }
@media (max-width: 600px) {
  .lp-steps .lp-steps__canvas--scene { aspect-ratio: 1 / 1; }
}

/* ── Composed scenes (owner items 18, 24, 25) ──
   Each card is a scene of real captures in app pixels (--u: the card is 800 of them wide, 500 on
   phone cards, so captures show at 1.03x at 1440, 0.98x at 1280 and at least 0.88x on the smallest
   pinned window, 0.72x on a 390 phone). A capture group (.lp-steps__cap) places its capture's pixel
   0,0 at --ox/--oy; everything cut from it (the panel, masks, pieces that step in, a lifted row, a
   focus ring) gives its source rectangle (--sx --sy --sw --sh, capture pixels at 2x), so the pieces
   sit exactly on the real rows. Back panels sit in .lp-steps__clip (the card's rounded box) and may
   bleed off its edges; a front panel outside it may pop out past the card's right edge. No strokes:
   one soft shadow in the card's hue (owner item 25). */
.lp-steps .lp-steps__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-card);
}
.lp-steps .lp-steps__cap { position: absolute; inset: 0; pointer-events: none; }
.lp-steps .lp-steps__cut,
.lp-steps .lp-steps__mask,
.lp-steps .lp-steps__ring {
  position: absolute;
  left: calc((var(--ox) + var(--sx) / 2) * var(--u));
  top: calc((var(--oy) + var(--sy) / 2) * var(--u));
  width: calc(var(--sw) / 2 * var(--u));
  height: calc(var(--sh) / 2 * var(--u));
}
.lp-steps .lp-steps__cut { overflow: hidden; }
.lp-steps .lp-steps__cut > img {
  position: absolute;
  max-width: none;
  height: auto;
  width: calc(var(--iw) / 2 * var(--u));
  left: calc(var(--sx) / -2 * var(--u));
  top: calc(var(--sy) / -2 * var(--u));
}
.lp-steps .lp-steps__panel {
  border-radius: calc(16 * var(--u));
  background: #fff;
  box-shadow: var(--steps-shadow);
}
.lp-steps .lp-steps__panel--pop,
.lp-steps .lp-steps__panel--front { box-shadow: var(--steps-shadow-pop); }
.lp-steps .lp-steps__mask { background: #fff; }

/* Where each capture sits (desktop cards, 800 × 510). */
/* Pre-market: the brief (title, key focus, Bias / Risk / Action) bleeding off the foot, and the
   document tools' Template / Visual block column popping out 32px past the right edge. */
.lp-steps .lp-steps__cap--notes { --ox: -261.5; --oy: -166; }
.lp-steps .lp-steps__panel--notes { --sx: 603; --sy: 372; --sw: 1190; --sh: 1228; }
.lp-steps .lp-steps__cap--tools { --ox: -285; --oy: -244; }
/* Open: the copier group's two follower rows (the leader row is left out: its sample account is
   named TopstepX but sits on a Tradovate connection; the crop ends at the footer's rule), bleeding
   off the right; the follower's settings rise under it, bleeding off the foot just below the Max
   order / Max position fields. */
.lp-steps .lp-steps__cap--group { --ox: 38; --oy: -59; }
.lp-steps .lp-steps__cap--follower { --ox: 100; --oy: 160; }
/* Close: the net daily P&L card, and the trades behind those days popping out 39px (clear of the
   last bar). */
.lp-steps .lp-steps__cap--pnl { --ox: 24; --oy: 54; }
.lp-steps .lp-steps__cap--trades { --ox: 412.5; --oy: 94.5; }

/* ── Micro-stories (steps.js sets data-story="ready", then "play" while the card is in front and
   on screen). Without the script, under reduced motion and with "Pause motion", every card shows
   its finished frame: the brief written, the follower open with its Ratio field in focus, every
   trade in the list. ── */
/* Pieces that step in: a real crop over a white mask, rising 12px with a fade. */
.lp-steps .lp-steps__piece { background: #fff; }
.lp-steps [data-story="ready"] .lp-steps__piece { opacity: 0; transform: translate3d(0, 12px, 0); }
.lp-steps [data-story="play"] .lp-steps__piece {
  transition: opacity .5s var(--ease-out) calc(.5s + var(--d, 0ms)), transform .6s var(--ease-out) calc(.5s + var(--d, 0ms));
}

/* Open: the pointer travels to the "Account 42970261" row, the row lifts with a soft brand tint,
   the follower's settings rise 12px into place and the Ratio field takes a soft focus ring. */
.lp-steps .lp-steps__lift {
  background: #fff;
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-8 * var(--u)) rgb(18 56 128 / 34%);
  transform: translate3d(0, -2px, 0);
}
.lp-steps .lp-steps__lift::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(37 99 235 / 8%);
  mix-blend-mode: multiply;
}
.lp-steps [data-story="ready"] .lp-steps__lift { opacity: 0; transform: none; box-shadow: none; }
.lp-steps [data-story="play"] .lp-steps__lift {
  transition: opacity .25s var(--ease-out) 1.15s, transform .5s var(--ease-out) 1.15s, box-shadow .5s var(--ease-out) 1.15s;
}
.lp-steps [data-story="ready"] .lp-steps__rise { transform: translate3d(0, 12px, 0); }
/* The panel is there from the start and only rises into place (no bare gradient while it waits). */
.lp-steps [data-story="play"] .lp-steps__rise { transition: transform .6s var(--ease-out) 1.4s; }
.lp-steps .lp-steps__ring { border-radius: calc(6 * var(--u)); box-shadow: 0 0 0 2px rgb(37 99 235 / 35%); }
.lp-steps [data-story="ready"] .lp-steps__ring { opacity: 0; }
.lp-steps [data-story="play"] .lp-steps__ring { transition: opacity .45s var(--ease-out) 2s; }

/* The pointer (the same black arrow as the feature tiles). It shows only while the story plays. */
.lp-steps .lp-steps__ptr {
  --px: 330;
  --py: 330;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  opacity: 0;
  transform: translate3d(calc(var(--px) * var(--u)), calc(var(--py) * var(--u)), 0);
  pointer-events: none;
}
.lp-steps .lp-steps__ptr svg {
  display: block;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  margin: calc(-2.75 * var(--u)) 0 0 calc(-3.67 * var(--u));
  overflow: visible;
  fill: #0D0D0D;
  stroke: #FFFFFF;
  stroke-width: 1.7;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 28%));
  transform-origin: 17% 12%;
}
.lp-steps [data-story="play"] .lp-steps__ptr {
  --px: 205;
  --py: 106;
  animation: lp-steps-ptr 2.6s linear .35s both;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1) .5s;
}
.lp-steps [data-story="play"] .lp-steps__ptr svg { animation: lp-steps-press .3s ease-in-out 1.05s both; }
@keyframes lp-steps-ptr { 0% { opacity: 0; } 12% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lp-steps-press { 50% { transform: scale(.84); } }

/* Phone cards: 500 app pixels wide, so captures stay at 0.7x on a 390 phone; wide captures run off
   the right edge, as a window would. The pop-outs stay inside the card here. */
@container lp-steps-card (max-width: 559.98px) {
  .lp-steps .lp-steps__canvas { --u: calc(100cqi / 500); }
  .lp-steps .lp-steps__card--plan .lp-steps__canvas { --h: 334; }
  .lp-steps .lp-steps__card--copy .lp-steps__canvas { --h: 420; }
  .lp-steps .lp-steps__card--review .lp-steps__canvas { --h: 420; }
  .lp-steps .lp-steps__cap--notes { --ox: -322; --oy: -342; }
  .lp-steps .lp-steps__panel--notes { --sx: 676; --sy: 716; --sw: 1100; --sh: 604; }
  .lp-steps .lp-steps__cap--tools,
  .lp-steps .lp-steps__cap--pnl { display: none; }
  .lp-steps .lp-steps__cap--group { --ox: 10; --oy: -79; }
  .lp-steps .lp-steps__cap--follower { --ox: 12; --oy: 130; }
  .lp-steps [data-story="play"] .lp-steps__ptr { --px: 186; --py: 86; }
  .lp-steps .lp-steps__cap--trades { --ox: 34.5; --oy: 18.5; }
}

/* Static stops rise in once (steps.js adds .is-in); reduced motion and "Pause motion" show them. */
.lp-steps[data-mode="static"] .lp-steps__stop > * {
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
.lp-steps[data-mode="static"] .lp-steps__stop > .lp-steps__card { transition-delay: .08s; }
.lp-steps[data-mode="static"] .lp-steps__stop:not(.is-in) > * { opacity: 0; transform: translate3d(0, 16px, 0); }

@media (max-width: 1099px) {
  .lp-steps .lp-steps__stop { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .lp-steps .lp-steps__copy { max-width: 560px; }
}
@media (max-width: 899px) {
  .lp-steps .lp-steps__track { margin-top: 40px; }
  .lp-steps .lp-steps__stops { row-gap: 56px; }
  .lp-steps .lp-steps__stop { row-gap: 20px; }
  .lp-steps .lp-steps__copy { gap: 8px; }
}
@media (max-width: 600px) {
  .lp-steps .lp-intro h2 { font-size: 24px; line-height: 31.8px; }
  .lp-steps .lp-steps__copy h3 { font-size: 20px; line-height: 24px; }
}

/* ── Pinned band ── */
.lp-steps[data-mode="pinned"] .lp-steps__track::after { content: ''; display: block; height: var(--steps-pin); }
.lp-steps[data-mode="pinned"] .lp-steps__stage { position: sticky; top: 88px; }
.lp-steps[data-mode="pinned"] .lp-steps__band {
  --steps-room: calc(100vh - 64px - 96px - var(--steps-peek));
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 20px;
  width: min(100% - 80px, 1240px);
}
.lp-steps[data-mode="pinned"] .lp-steps__stops { grid-template-columns: minmax(0, 1fr); row-gap: 0; isolation: isolate; }
.lp-steps[data-mode="pinned"] .lp-steps__stop {
  grid-area: 1 / 1;
  grid-template-columns: 232px minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}
.lp-steps[data-mode="pinned"] .lp-steps__copy { margin-top: var(--steps-peek); }
.lp-steps[data-mode="pinned"] .lp-steps__card {
  width: 100%;
  max-width: calc(var(--steps-room) * 760 / 428); /* the 760 × 428 scene, same shape */
  margin-top: var(--steps-peek);
  transform-origin: 50% 0;
  z-index: 3;
}

/* The rail: 15 ticks from the first line of the title to the card's foot, the three times at the
   top, middle and bottom, and a dot that travels to the active one (--stop, set by steps.js). */
.lp-steps[data-mode="pinned"] .lp-steps__rail {
  display: block;
  position: relative;
  margin-top: calc(var(--steps-peek) + 14px); /* the middle of the D3 title's first line (27.72 / 2) */
  margin-bottom: 16px;
}
.lp-steps .lp-steps__ticks {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 12px;
}
.lp-steps .lp-steps__ticks i { display: block; height: 1px; background: var(--line-strong); }
.lp-steps .lp-steps__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  transform: translate3d(0, calc(var(--stop, 0) * 50%), 0);
  pointer-events: none;
}
.lp-steps .lp-steps__dot i {
  position: absolute;
  top: -3px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}
.lp-steps .lp-steps__time {
  position: absolute;
  left: 30px;
  top: 0;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-2);
  font: 500 14px/19.6px var(--font); /* Label; the 28px button centres it */
  letter-spacing: normal;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .3s var(--ease-out);
}
.lp-steps .lp-steps__time:nth-of-type(2) { top: 50%; }
.lp-steps .lp-steps__time:nth-of-type(3) { top: 100%; }
.lp-steps .lp-steps__time:hover { color: var(--ink); }
.lp-steps .lp-steps__time[aria-current="step"] { color: var(--ink); }

/* The stack: data-slot 0 is the front card; 1 and 2 wait behind it, scaled down with their tops
   peeking out (slot 1 leans up by --lean as its turn nears); negative slots are stops already
   shown, dropped to the back of the stack and faded out. Only the front card shows its captures,
   and they arrive after the old front's have gone. */
.lp-steps[data-mode="pinned"] [data-slot="1"] .lp-steps__card {
  z-index: 2;
  transform:
    translate3d(0, calc(-.5 * var(--steps-peek) - 10px * var(--lean, 0)), 0)
    scale(calc(.9395 + .012 * var(--lean, 0)));
}
.lp-steps[data-mode="pinned"] [data-slot="2"] .lp-steps__card { z-index: 1; transform: translate3d(0, calc(-1 * var(--steps-peek)), 0) scale(.8765); }
.lp-steps[data-mode="pinned"] [data-slot^="-"] .lp-steps__card {
  z-index: 0;
  opacity: 0;
  transform: translate3d(0, calc(-1 * var(--steps-peek)), 0) scale(.8765);
  pointer-events: none;
}
.lp-steps[data-mode="pinned"] .lp-steps__stop:not([data-slot="0"]) .lp-steps__shot { opacity: 0; transform: translate3d(0, 12px, 0); }
.lp-steps[data-mode="pinned"] .lp-steps__stop:not([data-slot="0"]) .lp-steps__copy > * { opacity: 0; transform: translate3d(0, 16px, 0); }
.lp-steps[data-mode="pinned"] [data-slot^="-"] .lp-steps__copy > * { transform: translate3d(0, -8px, 0); }

/* Timings, once steps.js has placed the stack (data-ready), so nothing animates into place. */
.lp-steps[data-mode="pinned"][data-ready] .lp-steps__card { transition: transform .7s var(--ease-out), opacity .45s var(--ease-out); }
.lp-steps[data-mode="pinned"][data-ready] [data-slot^="-"] .lp-steps__card { transition: transform .6s var(--ease-out), opacity .45s var(--ease-out); }
/* Scrolling back (data-dir="back"), the returning card is opaque before its captures arrive. */
.lp-steps[data-mode="pinned"][data-ready][data-dir="back"] [data-slot="0"] .lp-steps__card { transition: transform .7s var(--ease-out), opacity .25s var(--ease-out); }
.lp-steps[data-mode="pinned"][data-ready] .lp-steps__dot { transition: transform .7s var(--ease-out); }
/* The promoted card is opaque and in front, so the old card's captures (leaving in .15s) are hidden
   behind it; the new captures follow straight away, so the front card is never shown empty. */
.lp-steps[data-mode="pinned"][data-ready] .lp-steps__shot { transition: opacity .2s var(--ease-out) .1s, transform .2s var(--ease-out) .1s; }
/* The incoming captures start as the outgoing ones finish, so the card is never bare gradient. */
.lp-steps[data-mode="pinned"][data-ready] [data-slot="0"] .lp-steps__shot { transition: opacity .4s var(--ease-out) .08s, transform .6s var(--ease-out) .08s; }
.lp-steps[data-mode="pinned"][data-ready] [data-slot="0"] .lp-steps__shot--2 { transition-delay: .19s; }
.lp-steps[data-mode="pinned"][data-ready] .lp-steps__copy > * { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.lp-steps[data-mode="pinned"][data-ready] [data-slot="0"] .lp-steps__copy > * { transition: opacity .5s var(--ease-out) .2s, transform .65s var(--ease-out) .2s; }
.lp-steps[data-mode="pinned"][data-ready] [data-slot="0"] .lp-steps__copy > p { transition-delay: .27s; }

/* The band rises in once as it comes on screen. */
.lp-steps[data-mode="pinned"] .lp-steps__band { transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.lp-steps[data-mode="pinned"]:not(.is-in) .lp-steps__band { opacity: 0; transform: translate3d(0, 16px, 0); }

/* Narrower windows: the copy sits above the card (the copies share one row, so every card starts
   at the same height), the rail beside both. */
@media (max-width: 1269px) {
  .lp-steps[data-mode="pinned"] .lp-steps__band {
    --steps-room: calc(100vh - 64px - 48px - var(--steps-peek) - 84px);
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 16px;
    width: min(100% - 64px, 1240px);
  }
  .lp-steps[data-mode="pinned"] .lp-steps__stops { grid-template-rows: auto auto; }
  .lp-steps[data-mode="pinned"] .lp-steps__stop { grid-area: 1 / 1 / 3 / 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 0; }
  .lp-steps[data-mode="pinned"] .lp-steps__copy { margin-top: 0; max-width: 560px; gap: 8px; }
  .lp-steps[data-mode="pinned"] .lp-steps__card { margin-top: calc(20px + var(--steps-peek)); }
  .lp-steps[data-mode="pinned"] .lp-steps__rail { margin-top: 14px; margin-bottom: 0; }
}

/* "Pause motion" (steps.js also drops the pin): nothing animates. */
.lp-still .lp-steps *,
.lp-still .lp-steps *::before,
.lp-still .lp-steps *::after { transition: none !important; }
.lp-still .lp-steps[data-mode="static"] .lp-steps__stop > *,
.lp-still .lp-steps[data-mode="pinned"] .lp-steps__band { opacity: 1; transform: none; }


/* ── connections ── */
/* Connections — "Connect the accounts you already trade". The Mira product video
   (/videos/mira-trade-copier.mp4, 1920 × 1080, 10.8 s; owner, 2026-10-18: "replace with this
   video") on the page itself, as the ChatGPT Dots launch film (owner, 2026-10-19: "make this as
   rounded as this and remove the yellow background"): no card around it, Dots' corners (53px on
   its 964px film, the same share of the width here) and its glass Pause / Play pill in the corner.
   It plays muted and loops while on screen (connections.js); with reduced motion, "Pause motion" or
   no JS it shows its first frame (copier-video-poster.webp) until the reader presses Play. The
   heading, the film and the buttons rise in 80ms apart ([data-reveal-stagger] on the shell). */

/* Type: the Dots scale (owner, 2026-10-18): a D2 title over a Body line (D2 steps down ≤ 600px). */
.lp-connections .lp-intro h2 { font-size: 30px; line-height: 39.6px; font-weight: 500; letter-spacing: -0.01em; }
.lp-connections .lp-intro p { font-size: 17px; line-height: 28px; font-weight: 400; letter-spacing: -0.01em; }

.lp-connections .lp-connections__stage {
  width: min(100%, 1000px);
  margin: 72px auto 0;
  container-type: inline-size;
}

.lp-connections .lp-connections__video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* Dots' film: 53px corners on 964px, the same share of the width at every size (20px floor). */
  border-radius: max(20px, calc(100cqw * 53 / 964));
  background: #0B0B0B;
  isolation: isolate;
}
.lp-connections .lp-connections__video > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Dots' video control: a 36px glass pill, bottom right, white label and icon. */
.lp-connections .lp-connections__toggle {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 50%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  font: 500 14px/20px var(--font);
  letter-spacing: normal;
  cursor: pointer;
  transition: background-color .15s var(--ease);
}
.lp-connections .lp-connections__toggle[hidden] { display: none; }
.lp-connections .lp-connections__toggle:hover { background: rgb(0 0 0 / 64%); }
.lp-connections .lp-connections__toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.lp-connections .lp-connections__toggle-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-connections .lp-connections__toggle-icon .is-play { fill: currentColor; stroke: none; display: none; }
.lp-connections .lp-connections__toggle[data-state="paused"] .is-pause { display: none; }
.lp-connections .lp-connections__toggle[data-state="paused"] .is-play { display: inline; }

.lp-connections .lp-connections__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 72px;
}

@media (max-width: 760px) {
  .lp-connections .lp-connections__stage { margin-top: 56px; }
  .lp-connections .lp-connections__actions { margin-top: 32px; }
}
@media (max-width: 600px) {
  .lp-connections .lp-intro h2 { font-size: 24px; line-height: 31.8px; }
  .lp-connections .lp-connections__stage { margin-top: 32px; }
  .lp-connections .lp-connections__toggle { right: 16px; bottom: 16px; }
  .lp-connections .lp-connections__actions { margin-top: 24px; }
}


/* ── pricing ── */
/* Pricing teaser — plans from content/landing/FACTS.json: Free, Cloud Lite, Cloud, Cloud Pro and
   Cloud Flex (owner lineup, 2026-10-20, BRIEF items 44–45). Owner, 2026-10-20: "DONT MAKE IT SAY
   COMING SOON I JUST WANT TO SEE HOW IT LOOKS" — so the plans show in full: Free is the one raised
   card, a full-width row on top (its name and price, its list, Start free), and the four paid plans
   sit four across under it on the soft surface (two by two on narrower screens; one column, Free a
   normal card again, on phones): price, yearly price and features, Cloud Pro tagged Recommended,
   no buy button (payments are off), then a "Compare plans" link.
   The hidden-plans layout (BRIEF item 40) stays available as .lp-pricing__grid--soon: Free on the
   left and each paid plan a name + "Coming soon" row (.lp-pricing__card--soon) stacked beside it. */
/* Section padding comes from base.css (.lp-section, --rhythm). The heading, then the cards rise
   in one after another, 80ms apart ([data-reveal-stagger] on the shell, base.css / runtime.js). */
.lp-pricing {
  scroll-margin-top: 64px;
  /* The sticker, as /pricing draws it (the selected segment): raised on the card, a hairline ring
     and a soft shadow; #2F2F2F on the #212121 card in dark. */
  --pr-sticker-bg: var(--bg);
  --pr-sticker-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(16 24 40 / 8%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-pricing { --pr-sticker-bg: var(--bg-sunk); --pr-sticker-shadow: var(--shadow-soft); }
}
:root[data-theme="dark"] .lp-pricing { --pr-sticker-bg: var(--bg-sunk); --pr-sticker-shadow: var(--shadow-soft); }
.lp-pricing .lp-pricing__intro { margin-bottom: 56px; }
/* Type: the Dots scale (owner, 2026-10-18): D2 title over a Body line; D4 plan names; price
   numerals keep their size at 500 / -0.03em; Small notes; Body feature lists; Caption tags; the
   "Coming soon" sticker is a Button label. D2 and D4 step down on phones (≤ 600px). */
.lp-pricing .lp-intro h2 { font-size: 30px; line-height: 39.6px; font-weight: 500; letter-spacing: -0.01em; }
.lp-pricing .lp-intro p { font-size: 17px; line-height: 28px; font-weight: 400; letter-spacing: -0.01em; }

.lp-pricing .lp-pricing__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.lp-pricing .lp-pricing__grid--soon {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
  max-width: 880px;
  margin-inline: auto;
}
.lp-pricing .lp-pricing__grid--soon .lp-pricing__card--free { grid-row: 1 / span 3; }

/* Free across the top: name, price and note | its list | Start free. */
.lp-pricing .lp-pricing__grid:not(.lp-pricing__grid--soon) .lp-pricing__card--free {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 1.5fr) auto;
  grid-template-areas: "head list action" "price list action" "period list action";
  grid-template-rows: auto auto 1fr;
  column-gap: 40px;
}
.lp-pricing .lp-pricing__grid:not(.lp-pricing__grid--soon) .lp-pricing__card--free > .lp-pricing__head { grid-area: head; justify-content: flex-start; }
.lp-pricing .lp-pricing__grid:not(.lp-pricing__grid--soon) .lp-pricing__card--free > .lp-pricing__price { grid-area: price; }
.lp-pricing .lp-pricing__grid:not(.lp-pricing__grid--soon) .lp-pricing__card--free > .lp-pricing__period { grid-area: period; }
.lp-pricing .lp-pricing__grid:not(.lp-pricing__grid--soon) .lp-pricing__card--free > .lp-pricing__list {
  grid-area: list; align-self: center;
  margin: 0; padding: 0 0 0 40px;
  border-top: 0; border-left: 1px solid var(--line);
}
.lp-pricing .lp-pricing__grid:not(.lp-pricing__grid--soon) .lp-pricing__card--free > .lp-pricing__action {
  grid-area: action; align-self: center;
  width: auto; margin: 0; padding-inline: 32px;
}

.lp-pricing .lp-pricing__card {
  display: flex; flex-direction: column;
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--bg-soft);
  border: 1px solid transparent;
}
.lp-pricing .lp-pricing__card--free {
  background: var(--bg);
  border-color: var(--line-strong);
  box-shadow: 0 24px 48px -24px rgb(16 24 40 / 20%), 0 1px 3px rgb(16 24 40 / 6%);
}
/* Dark: the same Free card as /pricing — a #212121 card, no stroke (BRIEF item 7). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-pricing .lp-pricing__card--free { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-soft); }
}
:root[data-theme="dark"] .lp-pricing .lp-pricing__card--free { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-soft); }

.lp-pricing .lp-pricing__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-pricing .lp-pricing__name { font-size: 22px; line-height: 27.72px; font-weight: 500; letter-spacing: -0.01em; }
.lp-pricing .lp-pricing__tag {
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 15px; letter-spacing: normal; white-space: nowrap;
  background: var(--bg); color: var(--ink-2); border: 1px solid var(--line);
}
.lp-pricing .lp-pricing__tag--live { background: var(--live-bg); color: var(--live-ink); border-color: transparent; }
/* Recommended (Cloud Pro, owner lineup): the tag in the primary button's colours, and a hairline ring
   on the card so it reads as the pick without out-weighing the raised Free card. */
.lp-pricing .lp-pricing__tag--rec { background: var(--btn-primary-bg); color: var(--btn-primary-ink); border-color: transparent; }
.lp-pricing .lp-pricing__card--rec { border-color: var(--line-strong); }
/* Dark: cards have no strokes (BRIEF item 7); the tag alone marks the pick. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-pricing .lp-pricing__card--rec { border-color: transparent; }
}
:root[data-theme="dark"] .lp-pricing .lp-pricing__card--rec { border-color: transparent; }

.lp-pricing .lp-pricing__price { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; }
.lp-pricing .lp-pricing__amount {
  font-size: 48px; line-height: 1; font-weight: 500; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.lp-pricing .lp-pricing__per { font-size: 14px; line-height: 22.96px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-2); }
.lp-pricing .lp-pricing__period { margin-top: 10px; font-size: 14px; line-height: 22.96px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-2); }

.lp-pricing .lp-pricing__list {
  list-style: none; margin: 24px 0 0; padding: 24px 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 12px;
  font-size: 14px; line-height: 22.96px; font-weight: 400; letter-spacing: -0.01em; /* Small: the cards are narrow */
}
.lp-pricing .lp-pricing__card:not(.lp-pricing__card--free) .lp-pricing__list { border-top-color: var(--line-strong); }
.lp-pricing .lp-pricing__list li { display: flex; align-items: flex-start; gap: 10px; text-wrap: pretty; }
.lp-pricing .lp-pricing__check { margin-top: 2px; color: var(--ink-3); } /* centred on the 22.96px first line */
.lp-pricing .lp-pricing__card--free .lp-pricing__check { color: var(--up); }

.lp-pricing .lp-pricing__action { margin-top: auto; width: 100%; }
.lp-pricing .lp-pricing__card--free .lp-pricing__list { margin-bottom: 28px; }

/* A plan not shown yet: a row beside Free — its name, and the sticker at the row's end. The three
   rows share Free's height between them. */
.lp-pricing .lp-pricing__more { margin-top: 28px; text-align: center; font-size: 15px; }
.lp-pricing .lp-pricing__more a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .15s var(--ease);
}
.lp-pricing .lp-pricing__more a:hover { text-decoration-color: currentColor; }

.lp-pricing .lp-pricing__card--soon { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.lp-pricing .lp-pricing__soon { flex: none; display: flex; margin: 0; padding: 0; }
.lp-pricing .lp-pricing__sticker {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px;
  border-radius: 999px;
  background: var(--pr-sticker-bg); box-shadow: var(--pr-sticker-shadow); color: var(--ink);
  font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: normal; white-space: nowrap;
}

@media (max-width: 1199px) {
  .lp-pricing .lp-pricing__grid:not(.lp-pricing__grid--soon) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
}
@media (max-width: 959px) {
  .lp-pricing .lp-pricing__grid,
  .lp-pricing .lp-pricing__grid:not(.lp-pricing__grid--soon) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; max-width: 520px; margin-inline: auto; }
  /* One column: Free is a normal card again. */
  .lp-pricing .lp-pricing__grid:not(.lp-pricing__grid--soon) .lp-pricing__card--free { display: flex; }
  .lp-pricing .lp-pricing__grid:not(.lp-pricing__grid--soon) .lp-pricing__card--free > .lp-pricing__list { align-self: stretch; margin: 24px 0 28px; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .lp-pricing .lp-pricing__grid:not(.lp-pricing__grid--soon) .lp-pricing__card--free > .lp-pricing__action { align-self: stretch; width: 100%; margin-top: auto; }
  .lp-pricing .lp-pricing__grid--soon .lp-pricing__card--free { grid-row: auto; }
}

@media (max-width: 600px) {
  .lp-pricing .lp-intro h2 { font-size: 24px; line-height: 31.8px; }
  .lp-pricing .lp-pricing__name { font-size: 20px; line-height: 24px; }
}

@media (max-width: 720px) {
  .lp-pricing .lp-pricing__intro { margin-bottom: 32px; }
  .lp-pricing .lp-pricing__grid { gap: 12px; }
  .lp-pricing .lp-pricing__card { padding: 22px; }
  .lp-pricing .lp-pricing__price { margin-top: 14px; }
  .lp-pricing .lp-pricing__amount { font-size: 40px; }
  .lp-pricing .lp-pricing__period { margin-top: 6px; }
  .lp-pricing .lp-pricing__list { margin-top: 18px; padding-top: 18px; gap: 10px; }
  .lp-pricing .lp-pricing__card--free .lp-pricing__list { margin-bottom: 22px; }
}


/* ── faq ── */
/* FAQ — answers from content/landing/FACTS.json; native <details>, so keyboard, screen readers and
   find-in-page work without script. With script (scripts/landing/sections/faq.js) an answer opens
   and closes smoothly: its panel's single grid row eases between 0fr and 1fr while the chevron turns
   half a circle. Without script, under reduced motion and with "Pause motion" it simply toggles. */
.lp-faq { scroll-margin-top: 64px; }
.lp-faq .lp-faq__layout {
  display: grid; gap: 64px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  align-items: start;
}
/* Type: the Dots scale (owner, 2026-10-18): D2 title over a Body line, D4 questions, Body answers;
   D2 and D4 step down on phones (≤ 600px). */
.lp-faq .lp-faq__aside { display: grid; gap: 12px; }
.lp-faq .lp-faq__aside h2 { font-size: 30px; line-height: 39.6px; font-weight: 500; letter-spacing: -0.01em; }
.lp-faq .lp-faq__more { color: var(--ink-2); font-size: 17px; line-height: 28px; font-weight: 400; letter-spacing: -0.01em; }
.lp-faq .lp-faq__more a,
.lp-faq .lp-faq__a a {
  color: var(--ink); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: text-decoration-color .15s var(--ease);
}
.lp-faq .lp-faq__more a:hover,
.lp-faq .lp-faq__a a:hover { text-decoration-color: currentColor; }

.lp-faq .lp-faq__list { border-top: 1px solid var(--line); }
.lp-faq .lp-faq__item { border-bottom: 1px solid var(--line); }

.lp-faq .lp-faq__q {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 0;
  font-size: 18px; line-height: 23.76px; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; user-select: none;
}
.lp-faq .lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq .lp-faq__q::marker { content: ''; }
.lp-faq .lp-faq__q:focus-visible { outline-offset: 2px; }

.lp-faq .lp-faq__icon {
  color: var(--ink-3);
  transition: color .15s var(--ease), transform .55s var(--ease-out);
}
.lp-faq .lp-faq__q:hover .lp-faq__icon,
.lp-faq .lp-faq__item[open] .lp-faq__icon { color: var(--ink); }
.lp-faq .lp-faq__item[open]:not(.is-closing) .lp-faq__icon { transform: rotate(180deg); }
.lp-still .lp-faq .lp-faq__icon { transition: color .15s var(--ease); }

/* The answer's height: one grid row that eases between 0fr (closed) and 1fr (open). faq.js holds
   .is-opening for one frame after setting [open], and .is-closing until the row has folded away,
   then clears [open]. The clip box has no padding of its own, so it folds to exactly 0px. */
.lp-faq .lp-faq__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .55s var(--ease-out);
}
.lp-faq .lp-faq__item.is-opening .lp-faq__panel,
.lp-faq .lp-faq__item.is-closing .lp-faq__panel { grid-template-rows: 0fr; }
.lp-faq .lp-faq__item.is-closing .lp-faq__panel { transition-duration: .42s; }
.lp-faq .lp-faq__clip { min-height: 0; overflow: hidden; }

.lp-faq .lp-faq__a {
  max-width: 60ch; padding: 0 44px 24px 0; margin-top: -4px;
  color: var(--ink-2); font-size: 17px; line-height: 28px; font-weight: 400; letter-spacing: -0.01em;
  transition: opacity .45s var(--ease-out) .08s;
}
.lp-faq .lp-faq__item.is-opening .lp-faq__a,
.lp-faq .lp-faq__item.is-closing .lp-faq__a { opacity: 0; transition-duration: .2s; transition-delay: 0s; }

@media (max-width: 860px) {
  .lp-faq .lp-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-faq .lp-faq__q { min-height: 56px; }
  .lp-faq .lp-faq__a { padding-right: 0; }
}
@media (max-width: 600px) {
  .lp-faq .lp-faq__aside h2 { font-size: 24px; line-height: 31.8px; }
}


/* ── footer ── */
/* Footer: light, the mark on the left, four short link columns, one quiet base row
   (runtime.js appends the "Pause motion" button to the base row). */
.lp-footer {
  padding-block: 72px 28px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-2);
  font-size: var(--small);
  line-height: 1.64;
}
.lp-footer__top {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr);
  align-items: start;
  gap: 48px;
}

.lp-footer__home {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  margin-top: -6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
}
.lp-footer__mark { display: grid; place-items: center; width: 22px; height: 22px; flex: none; }
.lp-footer__mark svg { width: 22px; height: 22px; }

.lp-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
/* Column headings and links take the Nav role (Dots type scale): 13px/19.68px 500. */
.lp-footer__col h2 {
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 19.68px;
  letter-spacing: normal;
}
.lp-footer__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 19.68px;
  letter-spacing: normal;
  text-decoration: none;
  transition: color .15s var(--ease);
}
.lp-footer__col a:hover { color: var(--ink); }

.lp-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 72px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  /* Fine print (Dots type scale): 13px/19.68px 400. */
  font-size: 13px;
  line-height: 19.68px;
  letter-spacing: normal;
}
.lp-footer__base p { color: var(--ink-2); }
.lp-footer .lp-motion-toggle { margin-left: auto; }

@media (max-width: 899.98px) {
  .lp-footer__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 600px) {
  .lp-footer { padding-block: 56px 28px; }
  .lp-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .lp-footer__col h2 { margin-bottom: 4px; }
  .lp-footer__col ul { gap: 0; }
  .lp-footer__col a { min-height: 44px; }
  .lp-footer__base { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 40px; }
  .lp-footer .lp-motion-toggle { margin: 10px 0 0; }
}


/* ── scenes ── */
/* Scenes — cards drawn as Mira UI (owner, 2026-10-18: the redesigns picked on
   /landing/redesign/, built after the ChatGPT Dots cards). A section writes <!-- @scene:<id> -->
   inside a card's frame (a features tile, a carousel card's media, a trading-day card) and the
   build puts in content/landing/scenes/<id>.html with its own scenes/<id>.css.

   A scene is .lp-scene-host.rd-<id> (fills the frame, clips to its corners, and is the size
   container "lp-scene") holding .lp-scene.rd-tile.rd-tile--<colour>.rd-vN (the design's tile).
   Design in tile units: --u is one 760th of the frame's width, so a 760 × 428 design fills a
   670:377 frame. When the frame is square-ish (phones: the tile and card turn square at ≤ 600px)
   --u is one 400th of the width and each scene places itself in 400 × 400 units in its own
   @container lp-scene (max-aspect-ratio: 7/5) block.

   Motion: .rd-a rises in when .is-in lands on the scene (scripts/landing/scenes.js: once when a
   third of it is on screen; in the trading-day steps while its stop is in front; in the carousel
   each time its card becomes the active one). Reduced motion, "Pause motion" (html.lp-still) and
   no JS show every scene's finished frame. */

@font-face {
  font-family: 'Mira Desktop Geist Sans';
  src: url('/fonts/desktop-geist/Geist-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

.lp-scene-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  container: lp-scene / size;
}
.lp-scene {
  --u: calc(100cqw / 760);
  --app-font: 'Mira Desktop Geist Sans', 'Geist Sans', -apple-system, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* the review pages' curve, as the owner saw the picks */
  position: absolute;
  inset: 0;
  margin: 0;
}
@container lp-scene (max-aspect-ratio: 7/5) {
  .lp-scene { --u: calc(100cqw / 400); }
}
.lp-scene.rd-tile--sky { --tint: 18 56 128; }
.lp-scene.rd-tile--violet { --tint: 76 29 128; }
.lp-scene.rd-tile--coral { --tint: 128 40 16; }
.lp-scene.rd-tile--mint { --tint: 8 84 58; }
.lp-scene.rd-tile--sun { --tint: 120 72 0; }

/* A crisp white app surface with the one soft shadow every panel uses (no strokes). */
.lp-scene .rd-surface {
  background: #FFFFFF;
  color: #0B0D12;
  border-radius: calc(16 * var(--u));
  box-shadow:
    0 calc(2 * var(--u)) calc(8 * var(--u)) rgb(var(--tint) / 10%),
    0 calc(24 * var(--u)) calc(56 * var(--u)) calc(-20 * var(--u)) rgb(var(--tint) / 40%);
}
/* The translucent glass layer behind a surface (Dots' stacked card). */
.lp-scene .rd-glass {
  background: rgb(255 255 255 / 34%);
  border-radius: calc(22 * var(--u));
  -webkit-backdrop-filter: blur(calc(18 * var(--u)));
  backdrop-filter: blur(calc(18 * var(--u)));
}

.lp-scene .rd-a {
  opacity: 0;
  transform: translate3d(0, calc(10 * var(--u)), 0);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.lp-scene.is-in .rd-a { opacity: 1; transform: none; }
/* A scene that resets (carousel, steps) snaps back, so its next entrance plays in full. */
.lp-scene:not(.is-in) .rd-a { transition: none; }
/* A carousel card that is not the active one shows its finished frame without playing (scenes.js). */
.lp-scene.is-settled .rd-a { transition: none; }
.lp-scene.is-settled *, .lp-scene.is-settled *::before, .lp-scene.is-settled *::after { animation: none !important; }

/* Finished frame: no JS, "Pause motion", reduced motion. */
.no-js .lp-scene .rd-a,
.lp-still .lp-scene .rd-a { opacity: 1; transform: none; transition: none; }
.lp-still .lp-scene *,
.lp-still .lp-scene *::before,
.lp-still .lp-scene *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lp-scene .rd-a { opacity: 1; transform: none; transition: none; }
  .lp-scene *, .lp-scene *::before, .lp-scene *::after { animation: none !important; transition: none !important; }
}


/* ── scene f-copier ── */
/* Scene f-copier (v1 "One group") — the Trade Copier's Group 1 card on glass, from
   public/landing/redesign/cards/f-copier.html. Every selector starts with .rd-f-copier.
   App replica of Mira's light theme as captured (desktop/src/pages/CopyRoutes.module.css, scaled
   ~1.3x): ink #333, muted #9E9E9E, status green #089981, accent #0169CC. */
.rd-f-copier {
  --cp-ink: #333333;
  --cp-muted: #9E9E9E;
  --cp-green: #089981;
  --cp-accent: #0169CC;
  --cp-tv: url("data:image/png;base64,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");
}
.rd-f-copier .rd-tile { font-family: var(--app-font); letter-spacing: -0.01em; line-height: 1.25; color: var(--cp-ink); }
.rd-f-copier .rd-tile * { box-sizing: border-box; }
.rd-f-copier .cp-abs { position: absolute; }
.rd-f-copier .cp-ico { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Shared pieces of the Copier group card (CopyRoutes.module.css, scaled ~1.3x). */
.rd-f-copier .cp-logo {
  flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u));
  border-radius: 42%;
  background: var(--cp-tv) 52% 50% / 74% no-repeat, #FAFAFA;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgb(10 10 10 / 8%);
}
.rd-f-copier .cp-status {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u)); flex: none;
  color: var(--cp-green); font-size: calc(16 * var(--u)); font-weight: 500; white-space: nowrap;
}
.rd-f-copier .cp-status::before { content: ''; width: calc(6.5 * var(--u)); height: calc(6.5 * var(--u)); border-radius: 50%; background: currentColor; }

/* ── Version 1 · One group ── */
.rd-f-copier .cp1-stage { inset: 0; display: grid; place-items: center; }
.rd-f-copier .cp1-glass { width: calc(540 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(36 * var(--u)); }
.rd-f-copier .cp1-card { border-radius: calc(22 * var(--u)); }
.rd-f-copier .cp1-head {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  height: calc(60 * var(--u)); padding: 0 calc(22 * var(--u));
  border-bottom: calc(1 * var(--u)) solid #EBEBEB;
}
.rd-f-copier .cp1-dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--cp-accent); flex: none; }
.rd-f-copier .cp1-name { font-size: calc(18 * var(--u)); font-weight: 500; text-transform: uppercase; }
.rd-f-copier .cp1-head .cp-status { margin-left: auto; }
.rd-f-copier .cp1-more { width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-left: calc(10 * var(--u)); color: var(--cp-ink); }
.rd-f-copier .cp1-body { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(20 * var(--u)) calc(22 * var(--u)); }
.rd-f-copier .cp1-row { display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(42 * var(--u)); }
.rd-f-copier .cp1-row--f { padding-left: calc(23 * var(--u)); }
.rd-f-copier .cp1-glyph { width: calc(19 * var(--u)); height: calc(19 * var(--u)); color: var(--cp-ink); stroke-width: 1.7; }
.rd-f-copier .cp1-acct { flex: 1 1 auto; font-size: calc(17 * var(--u)); font-weight: 500; white-space: nowrap; }
.rd-f-copier .cp1-hint { flex: none; color: var(--cp-muted); font-size: calc(16 * var(--u)); white-space: nowrap; }
.rd-f-copier .cp1-meta {
  display: flex; align-items: center; margin-top: calc(6 * var(--u)); padding-top: calc(16 * var(--u)); padding-bottom: calc(2 * var(--u));
  border-top: calc(1 * var(--u)) solid #F1F1F1;
  color: var(--cp-muted); font-size: calc(16 * var(--u)); white-space: nowrap;
}

/* ── Phones: the square tile, 400 × 400 units. The same card, centred and filling the tile, in the
   app's own narrow-card layout (CopyRoutes.module.css @container (max-width: 480px)): each
   follower's name takes the first line and its sizing hint and status word move to a second line
   under it, so every word stays whole at a readable size. ── */
@container lp-scene (max-aspect-ratio: 7/5) {
  .rd-f-copier .cp1-glass { width: calc(348 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(32 * var(--u)); }
  .rd-f-copier .cp1-card { border-radius: calc(20 * var(--u)); }
  .rd-f-copier .cp1-head { height: calc(58 * var(--u)); padding: 0 calc(18 * var(--u)); }
  .rd-f-copier .cp1-name { font-size: calc(17 * var(--u)); }
  .rd-f-copier .cp1-body { gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); }
  .rd-f-copier .cp1-row { min-height: calc(38 * var(--u)); }
  .rd-f-copier .cp1-row--f {
    display: grid;
    grid-template-columns: calc(19 * var(--u)) calc(26 * var(--u)) minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: calc(10 * var(--u));
    row-gap: calc(8 * var(--u));
    padding-left: calc(18 * var(--u));
  }
  .rd-f-copier .cp1-row--f .cp1-acct { grid-column: 3 / 5; grid-row: 1; }
  .rd-f-copier .cp1-row--f .cp1-hint { grid-column: 3; grid-row: 2; }
  .rd-f-copier .cp1-row--f .cp-status { grid-column: 4; grid-row: 2; justify-self: end; }
  .rd-f-copier .cp1-meta { margin-top: calc(2 * var(--u)); padding-top: calc(16 * var(--u)); padding-bottom: 0; }
}


/* ── scene f-orderflow ── */
/* Scene f-orderflow — V1 "One candle, opened" (picked on /landing/redesign/, 2026-10-18; card page
   public/landing/redesign/cards/f-orderflow.html). Mira's footprint chart, Volume Cluster style,
   rebuilt in HTML from orderflow-footprint-light.webp (values pixel-measured; mock data): one NQ1!
   15m candle with the volume at each of its twelve prices, rows tinted by net buying/selling, the
   marked price near-black, the per-price histogram, and the bar's delta and total underneath.
   A glass frame rises from the tile's foot with the white card on it; the volume column slides open
   out of the candle row by row, then the delta settles. Frame and playback: ../scenes.css,
   scripts/landing/scenes.js. Desktop: 760 × 428 units; phones (square): 400 × 400, same sizes,
   centred, a little higher. */
.rd-f-orderflow {
  --of-ink: #1C1D21; --of-up: #14958A;
  --of-b1: #E3F1EE; --of-b2: #A0CFC8; --of-s1: #FEE5E6;
  --of-hist: #A2A7B1; --of-gold: #D0A647;
}
.rd-f-orderflow .rd-tile { font-family: var(--app-font); letter-spacing: 0; }
.rd-f-orderflow .rd-tile > * { position: absolute; }

/* ── The glass frame and the white card, rising from the tile's foot (they bleed off the bottom) ──
   The glass stops at the tile's foot (the card page's ran 460 units down, under the clip): the frame
   clips the scene, not the tile, so a glass reaching past the foot blurred the white page below into
   a pale band along its bottom edge. Ending it at the foot keeps the card page's look. */
.rd-f-orderflow .of-v1__glass {
  left: calc(218.5 * var(--u)); top: calc(30 * var(--u));
  width: calc(323 * var(--u)); bottom: 0;
  border-radius: calc(36 * var(--u)) calc(36 * var(--u)) 0 0;
}
.rd-f-orderflow .of-v1__card {
  left: calc(234.5 * var(--u)); top: calc(46 * var(--u));
  width: calc(291 * var(--u)); height: calc(460 * var(--u));
  border-radius: calc(22 * var(--u));
}
.rd-f-orderflow .of-v1__card > .of-fp { left: calc(34 * var(--u)); top: calc(28 * var(--u)); }

/* ── Footprint bar (Volume Cluster): candle, one column of volume per price, histogram ── */
.rd-f-orderflow .of-fp {
  position: absolute;
  width: calc(var(--cc) + var(--cg) + var(--cw) + 3 * var(--u) + var(--ht));
  height: calc(var(--n) * var(--R));
  color: var(--of-ink);
}
.rd-f-orderflow .of-fp__wick,
.rd-f-orderflow .of-fp__body {
  position: absolute;
  z-index: 1; /* the column slides out from under the candle */
  top: calc(var(--t) * var(--R));
  height: calc((var(--b) - var(--t)) * var(--R));
}
.rd-f-orderflow .of-fp__wick { left: calc(var(--cc) / 2 - 1 * var(--u)); width: calc(2 * var(--u)); }
.rd-f-orderflow .of-fp__body { left: calc((var(--cc) - var(--cb)) / 2); width: var(--cb); }
.rd-f-orderflow .of-fp--up { background: var(--of-up); }
.rd-f-orderflow .of-fp__col {
  position: absolute; left: calc(var(--cc) + var(--cg)); top: 0;
  margin: 0; padding: 0; list-style: none;
}
.rd-f-orderflow .of-fp__col li { display: flex; align-items: center; height: var(--R); }
.rd-f-orderflow .of-fp__col li > span {
  display: grid; place-items: center;
  width: var(--cw); height: calc(100% + 1px); margin-bottom: -1px;
  background: var(--of-b1);
  font-size: var(--fs); line-height: 1; font-variant-numeric: tabular-nums;
}
.rd-f-orderflow .of-fp__col li.b2 > span { background: var(--of-b2); }
.rd-f-orderflow .of-fp__col li.s1 > span { background: var(--of-s1); }
.rd-f-orderflow .of-fp__col li.poc > span { background: var(--of-ink); color: #FFFFFF; font-weight: 700; }
.rd-f-orderflow .of-fp__col li > i {
  display: block; margin-left: calc(3 * var(--u));
  width: max(1px, calc(var(--h) * var(--hk) * var(--u)));
  height: calc(var(--R) - 3 * var(--u));
  background: var(--of-hist);
}
.rd-f-orderflow .of-fp__col li.poc > i { background: var(--of-gold); }
.rd-f-orderflow .of-fp__foot {
  position: absolute; left: 0; top: calc(var(--n) * var(--R) + 0.55 * var(--fs));
  width: calc(var(--cc) + var(--cg) + var(--cw));
  margin: 0; text-align: center;
  font-size: var(--fs); line-height: calc(var(--fs) * 1.3); font-variant-numeric: tabular-nums;
}
.rd-f-orderflow .of-fp__foot b { display: block; font-weight: 400; }
.rd-f-orderflow .of-up { color: var(--of-up); }

/* ── The action: the volume column slides open out of the candle, row by row, then the delta
   settles. Before .is-in the card itself is hidden (.rd-a), so the rows need no hidden state of
   their own; without JS, with "Pause motion" or reduced motion (no animation) they simply show. ── */
.rd-f-orderflow .is-in .of-open .of-fp__col li { animation: rd-f-orderflow-slide .62s var(--ease-out) calc(520ms + var(--i) * 36ms) both; }
.rd-f-orderflow .is-in .of-open .of-fp__foot { animation: rd-f-orderflow-rise .5s var(--ease-out) 1.25s both; }
@keyframes rd-f-orderflow-slide { from { opacity: 0; transform: translateX(calc(-26 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes rd-f-orderflow-rise { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } to { opacity: 1; transform: none; } }

/* ── Phones (square tile, 400 × 400 units): the same candle and column at the same size, centred,
   raised so the delta and total keep ~26 units above the tile's foot; the glass still meets the
   foot and the card still runs off it. ── */
@container lp-scene (max-aspect-ratio: 7/5) {
  .rd-f-orderflow .of-v1__glass { left: calc(38.5 * var(--u)); top: calc(24 * var(--u)); }
  .rd-f-orderflow .of-v1__card { left: calc(54.5 * var(--u)); top: calc(40 * var(--u)); }
  .rd-f-orderflow .of-v1__card > .of-fp { top: calc(24 * var(--u)); }
}


/* ── scene f-risk ── */
/* Scene f-risk — "Stop a bad day at your limit" (features row 3, coral). The owner picked V1 (the
   Risk Guardian limits) and V3 (Active Positions turning "Locked out") on /landing/redesign/ and
   chose "Both, settings then lock-out" (2026-10-18): one calm sequence that plays once.
   Every selector starts with .rd-f-risk and every keyframes name with rd-f-risk-.

   Mira UI is rebuilt from real captures, colours sampled from them: risk-rules.webp (Risk Guardian:
   #333 title, labels and values, #E0E0E0 input border, the app's default values), app-home.webp
   (Active Positions: #333 text, #9E9E9E column heads and balances, #777 symbols, #E0E0E0
   hairlines, #F3F3F3 Flatten, #F9F9F9/#A3A3A3 Flat, #FDE1E3 Flatten All). The "Locked out" tag is
   the app's own SentinelLockedOutTag (lucide Lock, --danger #F23645, 600, then the countdown in
   500): Home puts it in the Balance cell while a lockout runs, and a loss-limit lockout always has
   an end (the next 18:00 New York), so it carries the countdown.

   The sequence (3.25 s): the glass layer and the Risk Guardian card settle in where V1 has them
   (0–0.74 s). At 1.1 s the two rows that the front card will cover fade, then fold away at 1.3 s;
   at 1.4 s the card steps back (up and smaller) as the glass leaves; at 1.8 s, once it has cleared
   its place, Active Positions comes forward in front of it; at 2.45 s and 2.61 s each row closes
   to flat and its balance turns Locked out with the countdown (V3's action). The base styles are
   the finished frame (no JS, "Pause motion", reduced motion): the lock-out in front, the Risk
   Guardian title and loss limits stepped back above it, only its bottom padding under the front
   card. */

.rd-f-risk .rd-tile { font-family: var(--app-font); letter-spacing: -0.01em; }
.rd-f-risk .rd-tile > * { position: absolute; }

/* ── The Risk Guardian card (label left, input right, as in risk-rules.webp) on its glass layer.
   Placed where V1 has it; its finished place (stepped back) is the translate and scale. ── */
.rd-f-risk .rd-f-risk__limits {
  left: calc(178 * var(--u)); top: calc(86 * var(--u));
  width: calc(404 * var(--u));
  transform-origin: 50% 0;
  translate: 0 calc(-60 * var(--u));
  scale: .84;
}
.rd-f-risk .rd-f-risk__glass {
  position: absolute;
  left: calc(26 * var(--u)); right: calc(26 * var(--u)); top: calc(-24 * var(--u));
  height: calc(200 * var(--u)); /* under the card's foot even once its rows fold (184 units) */
  opacity: 0; /* only in the opening beat: it would sit too near the tile's top once stepped back */
}
.rd-f-risk .rd-f-risk__guard {
  position: relative;
  padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u));
  border-radius: calc(22 * var(--u));
  color: #333333;
}
.rd-f-risk .rd-f-risk__guard-title {
  margin: 0 0 calc(18 * var(--u));
  font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 500;
}
.rd-f-risk .rd-f-risk__field {
  display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--u));
  white-space: nowrap;
  font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u));
}
.rd-f-risk .rd-f-risk__field + .rd-f-risk__field { margin-top: calc(10 * var(--u)); }
.rd-f-risk .rd-f-risk__input {
  display: flex; align-items: center; flex: none;
  width: calc(124 * var(--u)); height: calc(38 * var(--u));
  padding-left: calc(14 * var(--u));
  border: max(1px, calc(1 * var(--u))) solid #E0E0E0;
  border-radius: calc(11 * var(--u));
  background: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
/* The rows the front card would cover: faded and folded away in the finished frame, so no row is
   ever half-covered and the stepped-back card ends just under the front card's top edge. */
.rd-f-risk .rd-f-risk__field.rd-f-risk__field--tuck { height: 0; margin-top: 0; overflow: hidden; opacity: 0; }

/* ── Active Positions, in front: one wide panel; both accounts flatten and lock ── */
.rd-f-risk .rd-f-risk__pos {
  left: calc(60 * var(--u)); bottom: calc(26 * var(--u));
  width: calc(640 * var(--u));
  padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(8 * var(--u));
  border-radius: calc(22 * var(--u));
  color: #333333;
  font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u));
  transform-origin: 50% 100%;
  scale: .92;
  --rise: 28; /* its entrance starts this many units lower, still inside the tile */
}
.rd-f-risk .rd-f-risk__pos-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: calc(16 * var(--u));
  border-bottom: max(1px, calc(1 * var(--u))) solid #E0E0E0;
}
.rd-f-risk .rd-f-risk__pos-title { font-size: calc(17 * var(--u)); font-weight: 500; }
.rd-f-risk .rd-f-risk__pill {
  display: inline-flex; align-items: center;
  height: calc(34 * var(--u)); padding: 0 calc(16 * var(--u));
  border-radius: 999px;
  font-size: calc(14 * var(--u)); font-weight: 500; white-space: nowrap;
}
.rd-f-risk .rd-f-risk__pill--danger { background: #FDE1E3; }
.rd-f-risk .rd-f-risk__pill--row { height: calc(32 * var(--u)); padding: 0 calc(14 * var(--u)); background: #F3F3F3; }
.rd-f-risk .rd-f-risk__pill--flat { background: #F9F9F9; color: #A3A3A3; }
.rd-f-risk .rd-f-risk__grid {
  display: grid;
  grid-template-columns: calc(46 * var(--u)) calc(150 * var(--u)) calc(116 * var(--u)) calc(182 * var(--u)) minmax(0, 1fr);
  align-items: center;
}
.rd-f-risk .rd-f-risk__cols { height: calc(46 * var(--u)); color: #9E9E9E; font-size: calc(13 * var(--u)); }
.rd-f-risk .rd-f-risk__row { height: calc(64 * var(--u)); border-top: max(1px, calc(1 * var(--u))) solid #E0E0E0; }
.rd-f-risk .rd-f-risk__ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #333333; }
.rd-f-risk .rd-f-risk__sym { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); color: #777777; }
.rd-f-risk .rd-f-risk__sym-badge {
  display: grid; place-items: center; flex: none;
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%;
  background: #0091BA; color: #FFFFFF;
  font-size: calc(7 * var(--u)); line-height: 1; font-weight: 500; letter-spacing: 0;
}
.rd-f-risk .rd-f-risk__bal { color: #9E9E9E; font-variant-numeric: tabular-nums; }
.rd-f-risk .rd-f-risk__dash { color: #777777; }
.rd-f-risk .rd-f-risk__locked {
  display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  color: #F23645; font-size: calc(14 * var(--u)); font-weight: 600; white-space: nowrap;
}
.rd-f-risk .rd-f-risk__locked svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.rd-f-risk .rd-f-risk__clock { font-weight: 500; font-variant-numeric: tabular-nums; }
/* A cell that changes: the old value and the new one share one grid cell. The old one leaves
   completely before the new one arrives (no cross-fade). Base = end state. */
.rd-f-risk .rd-f-risk__swap { display: grid; align-items: center; justify-items: start; }
.rd-f-risk .rd-f-risk__swap > * { grid-area: 1 / 1; }
.rd-f-risk .rd-f-risk__was { opacity: 0; visibility: hidden; }

/* ── Motion. All of it is CSS animation (none of it .rd-a transitions), so the whole sequence
   pauses together while the tile is off screen (base.css) and resumes in step. With JS the scene
   is empty until it plays; without JS (no .is-in ever) the base styles show the finished frame. ── */
.rd-f-risk:not(.no-js *) .lp-scene:not(.is-in) :is(.rd-f-risk__guard, .rd-f-risk__pos) { opacity: 0; }

/* 1 · The limits settle in where V1 has them (V1's entrance: glass at 0, card at 140 ms). */
.rd-f-risk .lp-scene.is-in .rd-f-risk__glass { animation: rd-f-risk-glass 1750ms linear both; }
.rd-f-risk .lp-scene.is-in .rd-f-risk__guard {
  animation:
    rd-f-risk-fade 500ms var(--ease-out) 140ms backwards,
    rd-f-risk-lift 600ms var(--ease-out) 140ms backwards;
}
/* 2 · They step back: the covered rows fade (gone at 1.3 s), then fold away at once, quickest at
   the start so the emptied rows close up fast, as the card moves up and smaller. */
.rd-f-risk .lp-scene.is-in .rd-f-risk__field--tuck {
  animation:
    rd-f-risk-tuck 200ms ease-in-out 1100ms backwards,
    rd-f-risk-fold 380ms cubic-bezier(.3, .6, .35, 1) 1300ms backwards;
}
.rd-f-risk .lp-scene.is-in .rd-f-risk__limits { animation: rd-f-risk-back 650ms cubic-bezier(.45, 0, .2, 1) 1400ms backwards; }
/* 3 · Active Positions comes forward once the card has cleared its place: it starts below the
   card's foot (and inside the tile), and while it is still fading in it only passes over the
   card's empty bottom padding, never its text. */
.rd-f-risk .lp-scene.is-in .rd-f-risk__pos {
  animation:
    rd-f-risk-fade 300ms var(--ease-out) 1800ms backwards,
    rd-f-risk-forward 650ms var(--ease-out) 1800ms backwards;
}
/* 4 · Each row closes to flat and locks (--t on the row: 2450 ms, 2610 ms). */
.rd-f-risk .lp-scene.is-in .rd-f-risk__was { animation: rd-f-risk-leave 240ms ease-in var(--t) both; }
.rd-f-risk .lp-scene.is-in .rd-f-risk__now { animation: rd-f-risk-arrive 380ms var(--ease-out) calc(var(--t) + 260ms) both; }

@keyframes rd-f-risk-glass {
  0% { opacity: 0; transform: translate3d(0, calc(10 * var(--u)), 0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  34% { opacity: 1; transform: none; }
  80% { opacity: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 0; transform: none; }
}
@keyframes rd-f-risk-fade { from { opacity: 0; } }
@keyframes rd-f-risk-lift { from { transform: translate3d(0, calc(10 * var(--u)), 0); } }
@keyframes rd-f-risk-tuck { from { opacity: 1; } }
@keyframes rd-f-risk-fold { from { height: calc(38 * var(--u)); margin-top: calc(10 * var(--u)); } }
@keyframes rd-f-risk-back { from { translate: 0 0; scale: 1; } }
@keyframes rd-f-risk-forward { from { transform: translate3d(0, calc(var(--rise) * var(--u)), 0); } }
@keyframes rd-f-risk-leave {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}
@keyframes rd-f-risk-arrive {
  from { opacity: 0; transform: translate3d(0, calc(4 * var(--u)), 0); }
  to { opacity: 1; transform: none; }
}

/* ── Phones: the square tile in 400 × 400 units. The same sequence: the Risk Guardian card (inputs
   narrowed to 96 units, as the app's side panel) settles in centred, then steps back to the top
   with its title and daily loss limit; Active Positions, the hero, comes forward below with the
   two columns that tell the story at a readable size (Account and Balance: each balance turns
   Locked out with the countdown); Type, Symbol and Actions are left out on phones. ── */
@container lp-scene (max-aspect-ratio: 7/5) {
  .rd-f-risk .rd-f-risk__limits {
    left: calc(28 * var(--u)); top: calc(64 * var(--u));
    width: calc(344 * var(--u));
    translate: 0 calc(-32 * var(--u));
    scale: .94;
  }
  .rd-f-risk .rd-f-risk__glass { height: calc(120 * var(--u)); } /* stays behind the card once its rows fold */
  .rd-f-risk .rd-f-risk__guard { padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(26 * var(--u)); }
  .rd-f-risk .rd-f-risk__input { width: calc(96 * var(--u)); }
  .rd-f-risk .rd-f-risk__field.rd-f-risk__field--2 { height: 0; margin-top: 0; overflow: hidden; opacity: 0; }
  .rd-f-risk .lp-scene.is-in .rd-f-risk__field--2 {
    animation:
      rd-f-risk-tuck 200ms ease-in-out 1100ms backwards,
      rd-f-risk-fold 380ms cubic-bezier(.3, .6, .35, 1) 1300ms backwards;
  }

  .rd-f-risk .rd-f-risk__pos {
    left: calc(24 * var(--u)); bottom: calc(28 * var(--u));
    width: calc(352 * var(--u));
    padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u));
    scale: none;
    --rise: 24;
  }
  .rd-f-risk .rd-f-risk__pos-head { padding-bottom: calc(14 * var(--u)); }
  .rd-f-risk .rd-f-risk__pill--danger { height: calc(32 * var(--u)); }
  .rd-f-risk .rd-f-risk__grid { grid-template-columns: minmax(0, 1fr) calc(148 * var(--u)); column-gap: calc(16 * var(--u)); }
  .rd-f-risk .rd-f-risk__grid > :nth-child(odd) { display: none; }
  .rd-f-risk .rd-f-risk__cols { height: calc(40 * var(--u)); font-size: calc(14 * var(--u)); }
  .rd-f-risk .rd-f-risk__row { height: calc(58 * var(--u)); }
}


/* ── scene f-replay ── */
/* Scene f-replay (v1 · Replay pane) — from public/landing/redesign/cards/f-replay.html.
   An HTML/SVG copy of Mira's Bar Replay (replay.webp): the Sell / Buy order buttons at the replay
   price, the NQ1! 15m candles with the replay price marker, and the replay bar docked under them
   (SIM, Start, step / play, "205 / 1935"). Colours are sampled from the capture. One calm object
   on glass: it rises in and settles (.rd-a, scenes.css); nothing else moves.
   Phones (square tile, 400 units): the pane fills the tile to 24 units, its own shorter chart
   (bars 96–117) leaves room for the larger price scale, and the bar drops Start to keep 14-unit text. */

.rd-f-replay .fr-ui {
  font-family: var(--app-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: #333333;
}
.rd-f-replay .fr-glass { position: absolute; }
.rd-f-replay .fr-pane { position: absolute; overflow: hidden; }
.rd-f-replay .fr-chart { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.rd-f-replay .fr-chart--wide { width: calc(440 * var(--u)); height: calc(220 * var(--u)); }
.rd-f-replay .fr-chart--phone { display: none; width: calc(352 * var(--u)); height: calc(220 * var(--u)); }

/* ── Replay bar (packages/live-chart-workspace ReplayTransport) ── */
.rd-f-replay .fr-bar {
  --k: calc(1.25 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(4 * var(--k));
  font-size: calc(12 * var(--k));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.rd-f-replay .fr-sim {
  display: inline-flex; align-items: center;
  height: calc(20 * var(--k));
  padding: 0 calc(6 * var(--k));
  border-radius: calc(4 * var(--k));
  box-shadow: inset 0 0 0 calc(1 * var(--k)) #E0E0E2;
  color: #9E9E9E;
  letter-spacing: 0.04em;
}
.rd-f-replay .fr-start {
  display: inline-flex; align-items: center; gap: calc(4 * var(--k));
  height: calc(28 * var(--k));
  padding: 0 calc(8 * var(--k));
  color: #9E9E9E;
}
/* The capture inks the Start glyph #333 and its word grey. */
.rd-f-replay .fr-start svg { width: calc(14 * var(--k)); height: calc(14 * var(--k)); color: #333333; }
.rd-f-replay .fr-sep { flex: none; width: calc(1 * var(--k)); height: calc(16 * var(--k)); margin: 0 calc(4 * var(--k)); background: #E0E0E2; }
.rd-f-replay .fr-btn {
  display: inline-grid; place-items: center;
  width: calc(28 * var(--k)); height: calc(28 * var(--k));
  color: #333333;
}
.rd-f-replay .fr-btn svg { width: calc(16 * var(--k)); height: calc(16 * var(--k)); }
.rd-f-replay .fr-btn--play { background: #333333; color: #FFFFFF; border-radius: 999px; }
.rd-f-replay .fr-pos { padding: 0 calc(4 * var(--k)); color: #9E9E9E; font-style: normal; }
.rd-f-replay .fr-ic { display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── Sell / Buy order buttons ── */
.rd-f-replay .fr-order {
  position: absolute;
  --k: calc(1.25 * var(--u));
  width: calc(80 * var(--k)); height: calc(33 * var(--k));
  display: grid; place-content: center; justify-items: center; gap: calc(2 * var(--k));
  border-radius: calc(6 * var(--k));
  box-shadow: inset 0 0 0 calc(1 * var(--k)) currentColor;
  line-height: 1;
}
.rd-f-replay .fr-order b { font-size: calc(13.5 * var(--k)); font-weight: 400; }
.rd-f-replay .fr-order span { font-size: calc(10 * var(--k)); font-weight: 400; }
.rd-f-replay .fr-order--sell { color: #F23645; }
.rd-f-replay .fr-order--buy { color: #2962FF; }

/* ── Price axis labels and the replay price marker ── */
.rd-f-replay .fr-axis {
  position: absolute; right: 0;
  transform: translateY(-50%);
  font-size: var(--fs); line-height: 1; font-weight: 500;
  color: #8D9399;
}
.rd-f-replay .fr-axis--round { color: #4B535D; font-weight: 600; }
.rd-f-replay .fr-mark {
  position: absolute; right: 0;
  display: flex; gap: calc(var(--fs) * 0.36);
  transform: translateY(-50%);
  font-size: var(--fs); line-height: 1; font-weight: 500;
  color: #0A1C19;
}
.rd-f-replay .fr-mark > * { display: grid; place-items: center; height: calc(var(--fs) * 1.74); border-radius: calc(var(--fs) * 0.3); background: #089981; }
.rd-f-replay .fr-mark__play { width: calc(var(--fs) * 1.6); }
.rd-f-replay .fr-mark__play svg { width: calc(var(--fs) * 0.62); height: calc(var(--fs) * 0.62); fill: currentColor; }
.rd-f-replay .fr-mark__price { padding: 0 calc(var(--fs) * 0.45); }

/* Chart marks */
.rd-f-replay .fr-grid { stroke: #EDEEF0; stroke-dasharray: 1 3; }
.rd-f-replay .fr-line { stroke: #B5E0D9; stroke-dasharray: 4 4; }

/* ── Layout: one replay pane on glass (760 × 428 units) ── */
.rd-f-replay .fr-glass { left: calc(138 * var(--u)); top: calc(16 * var(--u)); width: calc(484 * var(--u)); height: calc(460 * var(--u)); border-radius: calc(38 * var(--u)); }
.rd-f-replay .fr-pane { left: calc(160 * var(--u)); top: calc(38 * var(--u)); width: calc(440 * var(--u)); height: calc(356 * var(--u)); border-radius: calc(20 * var(--u)); }
.rd-f-replay .fr-plot { position: absolute; left: 0; top: calc(72 * var(--u)); width: calc(440 * var(--u)); height: calc(220 * var(--u)); --fs: calc(13.5 * var(--u)); }
.rd-f-replay .fr-plot .fr-axis,
.rd-f-replay .fr-plot .fr-mark { right: calc(14 * var(--u)); }
.rd-f-replay .fr-order--sell { left: calc(20 * var(--u)); top: calc(20 * var(--u)); }
.rd-f-replay .fr-order--buy { left: calc(132 * var(--u)); top: calc(20 * var(--u)); }
.rd-f-replay .fr-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(58 * var(--u));
  display: flex; justify-content: center;
  box-shadow: inset 0 calc(1 * var(--u)) 0 #E0E0E2;
}

/* ── Phones: the square tile, 400 × 400 units ── */
@container lp-scene (max-aspect-ratio: 7/5) {
  .rd-f-replay .fr-glass { left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(380 * var(--u)); height: calc(420 * var(--u)); border-radius: calc(34 * var(--u)); }
  .rd-f-replay .fr-pane { left: calc(24 * var(--u)); top: calc(24 * var(--u)); width: calc(352 * var(--u)); height: calc(352 * var(--u)); }
  .rd-f-replay .fr-plot { top: calc(70 * var(--u)); width: calc(352 * var(--u)); --fs: calc(14.5 * var(--u)); }
  .rd-f-replay .fr-chart--wide { display: none; }
  .rd-f-replay .fr-chart--phone { display: block; }
  .rd-f-replay .fr-order { --k: calc(1.4 * var(--u)); }
  .rd-f-replay .fr-order--sell { left: calc(18 * var(--u)); top: calc(18 * var(--u)); }
  .rd-f-replay .fr-order--buy { left: calc(142 * var(--u)); top: calc(18 * var(--u)); }
  .rd-f-replay .fr-bar { --k: calc(1.3 * var(--u)); }
  .rd-f-replay .fr-start { display: none; }
}


/* ── scene c-layouts ── */
/* Scene c-layouts (v1, "The picker"): Mira's Chart layouts menu on a glass layer, from
   public/landing/redesign/cards/c-layouts.html (V1). Mira UI rebuilt from the app: the Chart layouts
   menu (chart-layouts.webp; LiveChartsPage.module.css .timeframeChartPanel*). Every selector starts
   with .rd-c-layouts and every @keyframes name with rd-c-layouts-. */
.rd-c-layouts .rd-tile { font-family: var(--app-font); }

.rd-c-layouts .v1-glass {
  position: absolute;
  left: calc(212 * var(--u)); width: calc(336 * var(--u));
  top: calc(18 * var(--u)); height: calc(460 * var(--u));
  border-radius: calc(40 * var(--u));
  /* It runs off the tile's foot: a backdrop blur there samples the page outside the tile (a dark
     band on a black page), and over a smooth gradient it adds nothing, so this glass is a plain tint. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.rd-c-layouts .v1-menu {
  --k: calc(1.5 * var(--u));
  position: absolute;
  left: calc(230 * var(--u)); top: calc(36 * var(--u));
  width: calc(200 * var(--k));
  padding: calc(7 * var(--k));
  border-radius: calc(14 * var(--k));
  color: #333333;
}
.rd-c-layouts .cl-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: calc(32 * var(--k));
  gap: calc(3 * var(--k));
}
.rd-c-layouts .cl-tb {
  display: grid; place-items: center;
  border-radius: calc(6 * var(--k));
}
/* A layout glyph drawn as its shape (the template's thumbnail grid, set inline per tile). */
.rd-c-layouts .cl-g { display: grid; width: calc(22 * var(--k)); height: calc(15 * var(--k)); gap: calc(1.5 * var(--k)); }
.rd-c-layouts .cl-g i { display: block; min-width: 0; min-height: 0; border-radius: calc(1.5 * var(--k)); background: #A9A9A9; }
.rd-c-layouts .cl-tb--on { background: #EDEDED; }
.rd-c-layouts .cl-tb--on .cl-g i { background: #0169CC; }
/* The app's 6px margin + 6px padding above the row (its hairline is not visible in the capture). */
.rd-c-layouts .cl-focus {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(32 * var(--k));
  margin-top: calc(12 * var(--k));
  padding: 0 calc(6 * var(--k)) 0 calc(8 * var(--k));
  font-size: calc(12.5 * var(--k)); line-height: 1; font-weight: 400; letter-spacing: -0.01em;
}
.rd-c-layouts .cl-switch {
  position: relative; flex: none;
  width: calc(26 * var(--k)); height: calc(16 * var(--k));
  border-radius: calc(8 * var(--k));
  background: #DADADA;
}
.rd-c-layouts .cl-switch::after {
  content: ''; position: absolute;
  top: calc(2 * var(--k)); left: calc(2 * var(--k));
  width: calc(12 * var(--k)); height: calc(12 * var(--k));
  border-radius: 50%; background: #FFFFFF;
}

/* The one action: the chosen layout moves from one chart to the 2 × 2 grid (once, ~1.1 s in).
   No JS, reduced motion and "Pause motion" never run it, so they show the 2 × 2 grid chosen. */
.rd-c-layouts .is-in .cl-tb--from { animation: rd-c-layouts-off 320ms ease 1150ms both; }
.rd-c-layouts .is-in .cl-tb--from .cl-g i { animation: rd-c-layouts-ink-off 320ms ease 1150ms both; }
.rd-c-layouts .is-in .cl-tb--on { animation: rd-c-layouts-on 320ms ease 1150ms both; }
.rd-c-layouts .is-in .cl-tb--on .cl-g i { animation: rd-c-layouts-ink-on 320ms ease 1150ms both; }
@keyframes rd-c-layouts-off { from { background: #EDEDED; } to { background: rgb(237 237 237 / 0); } }
@keyframes rd-c-layouts-on { from { background: rgb(237 237 237 / 0); } to { background: #EDEDED; } }
@keyframes rd-c-layouts-ink-off { from { background: #0169CC; } to { background: #A9A9A9; } }
@keyframes rd-c-layouts-ink-on { from { background: #A9A9A9; } to { background: #0169CC; } }

/* Phones (the card turns square, 400 × 400 units): the same menu, centred on its glass, a little
   smaller (k = 1.44 u, so "Focus on hover" is 18 units) with ≈ 30 units below it; the glass keeps
   its 18-unit rim and still runs off the foot. */
@container lp-scene (max-aspect-ratio: 7/5) {
  .rd-c-layouts .v1-glass {
    left: calc(38 * var(--u)); width: calc(324 * var(--u));
    top: calc(20 * var(--u)); height: calc(420 * var(--u));
  }
  .rd-c-layouts .v1-menu {
    --k: calc(1.44 * var(--u));
    left: calc(56 * var(--u)); top: calc(38 * var(--u));
  }
}


/* ── scene c-drawing ── */
/* Scene c-drawing — "Mark your levels" (carousel card 2, violet), V1 "Fibonacci list" picked by the
   owner on /landing/redesign/ (2026-10-18). One crisp copy of Mira's Fibonacci & Gann tool library
   (.mira_chartdesk_toolLibraryFlyout, rebuilt from the live chart, glyphs path for path) on a glass
   layer; it rises in, then the pointer-over highlight settles on Fib channel. Sizes are app px times
   --s, the library's scale in tile units. Every selector starts with .rd-c-drawing. */
@property --cd-dot { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }

/* ── Mira's tool glyphs (28×28, 1.1 stroke, anchor dots filled with the surface colour). max-width:
   none undoes base.css's svg { max-width: 100% }, which would shrink the 20-px glyph to its 18-px cell. ── */
.rd-c-drawing .cd-g { display: block; max-width: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.rd-c-drawing .cd-g .d { fill: var(--cd-dot); stroke-width: 1.15; }
.rd-c-drawing .cd-l { display: block; max-width: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── The Fibonacci & Gann tool library ── */
.rd-c-drawing .cd-lib {
  width: calc(var(--w, 260) * var(--s));
  padding: calc(12 * var(--s));
  border-radius: calc(16 * var(--s));
  display: grid; gap: calc(8 * var(--s));
  font-family: var(--app-font); color: #333333; text-align: left;
  letter-spacing: calc(-0.15 * var(--s));
  --cd-dot: #FFFFFF;
}
.rd-c-drawing .cd-lib__top {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(33 * var(--s));
  padding: 0 calc(4 * var(--s)) 0 calc(10 * var(--s));
  border-bottom: calc(1 * var(--s)) solid #E9EAEE;
}
.rd-c-drawing .cd-lib__top strong { font-size: calc(14 * var(--s)); line-height: calc(15.4 * var(--s)); font-weight: 500; }
.rd-c-drawing .cd-lib__x { width: calc(32 * var(--s)); height: calc(32 * var(--s)); display: grid; place-items: center; color: #333333; }
.rd-c-drawing .cd-lib__x svg { width: calc(20 * var(--s)); height: calc(20 * var(--s)); stroke-width: 1.5; }
.rd-c-drawing .cd-lib__content { padding: calc(2 * var(--s)) calc(6 * var(--s)) calc(6 * var(--s)); }
.rd-c-drawing .cd-lib__sect {
  margin-top: calc(2 * var(--s));
  padding: calc(8 * var(--s)) calc(8 * var(--s)) calc(4 * var(--s));
  font-size: calc(14 * var(--s)); line-height: calc(14 * var(--s));
  color: rgb(51 51 51 / 46%); background: #F8F8F9;
}
.rd-c-drawing .cd-lib__list { display: grid; gap: calc(1 * var(--s)); padding-bottom: calc(2 * var(--s)); }
.rd-c-drawing .cd-item {
  display: flex; align-items: center; gap: calc(10 * var(--s));
  height: calc(42 * var(--s));
  padding: 0 calc(4 * var(--s)) 0 calc(8 * var(--s));
  border-radius: calc(8 * var(--s));
  color: #333333;
}
.rd-c-drawing .cd-item__icon { flex: none; width: calc(18 * var(--s)); height: calc(18 * var(--s)); display: grid; place-items: center; }
.rd-c-drawing .cd-item__icon .cd-g { width: calc(20 * var(--s)); height: calc(20 * var(--s)); }
.rd-c-drawing .cd-item__name { flex: 1; min-width: 0; white-space: nowrap; font-size: calc(13 * var(--s)); line-height: calc(14.95 * var(--s)); font-weight: 500; }
.rd-c-drawing .cd-item__star { flex: none; width: calc(40 * var(--s)); height: calc(40 * var(--s)); display: grid; place-items: center; opacity: 0; }
.rd-c-drawing .cd-item__star svg { width: calc(20 * var(--s)); height: calc(20 * var(--s)); stroke-width: 1.5; }
/* Pointer-over row, as the app draws it: near-black row, white name and glyph, faint star. */
.rd-c-drawing .cd-item--hl { background: #202022; color: #FFFFFF; --cd-dot: #202022; }
.rd-c-drawing .cd-item--hl .cd-item__star { opacity: 1; color: rgb(255 255 255 / 24%); }

/* ── Desktop (760 × 428 units): the library centred on a glass layer that bleeds off the foot ── */
.rd-c-drawing .cd-v1__glass { position: absolute; left: calc(170 * var(--u)); top: calc(24 * var(--u)); width: calc(420 * var(--u)); height: calc(460 * var(--u)); border-radius: calc(34 * var(--u)); }
.rd-c-drawing .cd-v1__lib { position: absolute; left: calc(192.5 * var(--u)); top: calc(46 * var(--u)); }
.rd-c-drawing .cd-v1__lib .cd-lib { --s: calc(1.25 * var(--u)); --w: 300; }
.rd-c-drawing .is-in .cd-v1__lib .cd-item--hl { animation: rd-c-drawing-hl .5s var(--ease-out) 1.15s both; }
.rd-c-drawing .is-in .cd-v1__lib .cd-item--hl .cd-item__star { animation: rd-c-drawing-fade .5s var(--ease-out) 1.15s both; }

/* ── Phones (square frame, 400 × 400 units): the library is the hero, 330 × 301 at 1.1 (names 14.3
   units), 35 units in from both sides; the glass keeps its 20-unit rim and still bleeds off the foot. ── */
@container lp-scene (max-aspect-ratio: 7/5) {
  .rd-c-drawing .cd-v1__glass { left: calc(15 * var(--u)); top: calc(30 * var(--u)); width: calc(370 * var(--u)); height: calc(400 * var(--u)); border-radius: calc(30 * var(--u)); }
  .rd-c-drawing .cd-v1__lib { left: calc(35 * var(--u)); top: calc(50 * var(--u)); }
  .rd-c-drawing .cd-v1__lib .cd-lib { --s: calc(1.1 * var(--u)); }
}

@keyframes rd-c-drawing-hl { from { background-color: rgb(32 32 34 / 0%); color: #333333; --cd-dot: #FFFFFF; } }
@keyframes rd-c-drawing-fade { from { opacity: 0; } }


/* ── scene c-search ── */
/* Scene c-search — carousel card 3 (mint), "Charts before you connect": V1, Mira's symbol search
   alone on a glass frame (picked by the owner on /landing/redesign/, 2026-10-18; card page
   public/landing/redesign/cards/c-search.html). Built from chart-symbol-search.webp: labels, rows,
   badge colours and the selected-row highlight are the app's. Every selector starts with
   .rd-c-search; tile units (--u) come from scenes.css. Desktop: the 760 × 428 design. Phones
   (square frame): the @container block at the foot, in 400 × 400 units. */

/* The card page's text inherits a 28px line box (28 units at its 760px tile); the landing's body
   line-height is relative (1.647), so it is pinned here and every line box matches the card. */
.rd-c-search .rd-tile { font-family: var(--app-font); letter-spacing: 0; line-height: calc(28 * var(--u)); }
.rd-c-search .rd-c-search__abs { position: absolute; }

/* ── Symbol search, sized in panel units (--p) ── */
.rd-c-search .rd-c-search__search { overflow: hidden; border-radius: calc(18 * var(--p)); }
.rd-c-search .rd-c-search__shead {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(20 * var(--p)) calc(22 * var(--p)) 0;
}
.rd-c-search .rd-c-search__stitle { font-size: calc(19 * var(--p)); line-height: calc(24 * var(--p)); font-weight: 500; color: #333333; }
.rd-c-search .rd-c-search__x { width: calc(16 * var(--p)); height: calc(16 * var(--p)); color: #333333; }
.rd-c-search .rd-c-search__field {
  display: flex; align-items: center; gap: calc(10 * var(--p));
  margin: calc(14 * var(--p)) calc(22 * var(--p)) 0;
  height: calc(44 * var(--p)); padding: 0 calc(7 * var(--p)) 0 calc(13 * var(--p));
  border-radius: calc(11 * var(--p));
  box-shadow: inset 0 0 0 calc(1.5 * var(--p)) #4893DA;
}
.rd-c-search .rd-c-search__mag { width: calc(19 * var(--p)); height: calc(19 * var(--p)); color: #8E8E8E; flex: none; }
.rd-c-search .rd-c-search__ph { flex: 1; font-size: calc(16 * var(--p)); color: #A1A1A1; }
.rd-c-search .rd-c-search__kbd {
  height: calc(30 * var(--p)); padding: 0 calc(9 * var(--p)); border-radius: calc(8 * var(--p));
  background: #F5F5F5; color: #9C9C9C; font-size: calc(14 * var(--p)); line-height: calc(30 * var(--p));
}
.rd-c-search .rd-c-search__tabsrow {
  display: flex; align-items: center; justify-content: space-between;
  margin: calc(12 * var(--p)) calc(22 * var(--p)) 0;
}
.rd-c-search .rd-c-search__tabs {
  display: flex; gap: calc(2 * var(--p)); padding: calc(3 * var(--p));
  border-radius: calc(12 * var(--p)); box-shadow: inset 0 0 0 calc(1 * var(--p)) #E9E9E9;
}
.rd-c-search .rd-c-search__tabs span {
  padding: 0 calc(11 * var(--p)); height: calc(32 * var(--p)); border-radius: calc(9 * var(--p));
  font-size: calc(15 * var(--p)); line-height: calc(32 * var(--p)); color: #7D7D7D;
}
.rd-c-search .rd-c-search__tabs .is-on { background: #EFEFEF; color: #333333; }
.rd-c-search .rd-c-search__feeds { display: flex; align-items: center; gap: calc(8 * var(--p)); font-size: calc(15 * var(--p)); color: #7D7D7D; }
.rd-c-search .rd-c-search__chev { width: calc(14 * var(--p)); height: calc(14 * var(--p)); color: #333333; }
.rd-c-search .rd-c-search__rows { list-style: none; margin: calc(12 * var(--p)) 0 0; padding: 0; }
.rd-c-search .rd-c-search__row {
  position: relative; display: flex; align-items: center;
  height: calc(48 * var(--p)); padding: 0 calc(20 * var(--p)) 0 calc(22 * var(--p));
  box-shadow: inset 0 calc(1 * var(--p)) 0 #E6E6E6;
}
.rd-c-search .rd-c-search__badge {
  flex: none; display: grid; place-items: center;
  width: calc(28 * var(--p)); height: calc(28 * var(--p)); border-radius: 50%;
  background: var(--b); color: #FFFFFF;
  font-size: calc(8.5 * var(--p)); line-height: 1; font-weight: 600; letter-spacing: 0;
  padding-top: calc(1 * var(--p));
}
/* Four-digit badges ("2000") use a smaller face so the number keeps the app's inner margin. */
.rd-c-search .rd-c-search__badge--4 { font-size: calc(6.2 * var(--p)); }
.rd-c-search .rd-c-search__sym { flex: none; width: calc(78 * var(--p)); margin-left: calc(14 * var(--p)); font-size: calc(16 * var(--p)); font-weight: 500; color: #333333; }
.rd-c-search .rd-c-search__name { flex: 1; min-width: 0; white-space: nowrap; font-size: calc(15 * var(--p)); color: #797979; }
.rd-c-search .rd-c-search__exch { flex: none; margin-left: calc(10 * var(--p)); font-size: calc(15 * var(--p)); color: #797979; }
.rd-c-search .rd-c-search__yf { flex: none; width: calc(24 * var(--p)); max-width: none; height: calc(24 * var(--p)); margin-left: calc(12 * var(--p)); border-radius: 50%; }
/* The app's selected row: #F5F5F5 fill and a blue bar on the left edge. */
.rd-c-search .rd-c-search__row.is-active { background: #F5F5F5; }
.rd-c-search .rd-c-search__row.is-active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(3 * var(--p));
  background: #0169CC; transform-origin: 50% 0;
}

/* ── Placement: the glass frame, and the search inside it at 0.9x ── */
.rd-c-search .rd-c-search__glass { left: calc(134 * var(--u)); top: calc(39 * var(--u)); width: calc(492 * var(--u)); height: calc(350 * var(--u)); border-radius: calc(30 * var(--u)); }
.rd-c-search .rd-c-search__panel { --p: calc(0.9 * var(--u)); left: calc(149.5 * var(--u)); top: calc(53 * var(--u)); width: calc(461 * var(--u)); padding-bottom: calc(2 * var(--p)); }

/* ── Motion: the glass and the search rise in (the shared .rd-a rise as a keyframe); the rows
   fade in place (no rise), so the last row is never cut by the panel's foot while moving; then
   one action: NQ1! takes the selected-row highlight after the rows land. ── */
.rd-c-search .is-in .rd-a { animation: rd-c-search-rise .6s var(--ease-out) var(--d, 0ms) both; }
.rd-c-search .is-in .rd-c-search__row.rd-a { animation: rd-c-search-fade .45s var(--ease-out) var(--d, 0ms) both; }
.rd-c-search .is-in .rd-c-search__row.is-active { animation: rd-c-search-fade .45s var(--ease-out) var(--d, 0ms) both, rd-c-search-pick .5s var(--ease-out) .9s both; }
.rd-c-search .is-in .rd-c-search__row.is-active::before { animation: rd-c-search-bar .45s var(--ease-out) .9s both; }
@keyframes rd-c-search-rise { from { opacity: 0; transform: translate3d(0, calc(10 * var(--u)), 0); } to { opacity: 1; transform: none; } }
@keyframes rd-c-search-fade { from { opacity: 0; transform: none; } to { opacity: 1; transform: none; } }
@keyframes rd-c-search-pick { from { background: #FFFFFF; } to { background: #F5F5F5; } }
@keyframes rd-c-search-bar { from { transform: scaleY(0); } to { transform: none; } }

/* ── Phones: the square frame, 400 × 400 units. The search is the one object, at 1x (text 14–19
   units), 34 units in from every edge, on the glass 24 units in. The tabs row is left out, and
   each result takes two lines (the app's own narrow rows stack too, the badge spanning both):
   symbol, exchange and feed mark on the first, the full name on the second, so no name is cut. ── */
@container lp-scene (max-aspect-ratio: 7/5) {
  .rd-c-search .rd-c-search__glass { left: calc(24 * var(--u)); top: calc(24 * var(--u)); width: calc(352 * var(--u)); height: calc(352 * var(--u)); border-radius: calc(26 * var(--u)); }
  .rd-c-search .rd-c-search__panel { --p: var(--u); left: calc(34 * var(--u)); top: calc(34 * var(--u)); width: calc(332 * var(--u)); }
  .rd-c-search .rd-c-search__tabsrow { display: none; }
  .rd-c-search .rd-c-search__row {
    display: grid;
    grid-template-columns: calc(28 * var(--p)) minmax(0, 1fr) auto auto;
    grid-template-areas: "badge sym exch yf" "badge name name name";
    align-items: center;
    height: auto;
    padding: calc(6 * var(--p)) calc(20 * var(--p)) calc(5 * var(--p)) calc(22 * var(--p));
  }
  .rd-c-search .rd-c-search__badge { grid-area: badge; }
  .rd-c-search .rd-c-search__sym { grid-area: sym; width: auto; line-height: calc(24 * var(--p)); }
  .rd-c-search .rd-c-search__exch { grid-area: exch; line-height: calc(24 * var(--p)); }
  .rd-c-search .rd-c-search__yf { grid-area: yf; }
  .rd-c-search .rd-c-search__name { grid-area: name; margin-left: calc(14 * var(--p)); line-height: calc(19 * var(--p)); }
}


/* ── scene c-chartstyle ── */
/* Scene c-chartstyle — carousel card 4 (coral), "Order flow, measured". The owner's pick on
   /landing/redesign/cards/c-chartstyle.html: V1, Mira's real Chart style menu on its Order flow
   tab as one calm object in a glass frame. Every selector starts with .rd-c-chartstyle.
   Source: chart-style.webp (title, All / Price / Order flow / Non-time tabs, row titles and
   hints; colours sampled: text #333333, hints #A1A1A1, tabs #797979 on #F5F5F5, selected tab
   #E2E2E2, hairline #E6E6E6). Row glyphs = the app's own artwork,
   desktop/src/features/liveCharts/components/chartStyleCards/approvedGlyphs.tsx.
   The menu is sized in app px (--p, in tile units); design 760 × 428 units, phones 400 × 400. */

.rd-c-chartstyle .rd-tile { font-family: var(--app-font); letter-spacing: 0; }
.rd-c-chartstyle .rd-c-chartstyle__abs { position: absolute; }
.rd-c-chartstyle .rd-c-chartstyle__ico { display: block; flex: none; }

/* ── Chart style popup ── */
.rd-c-chartstyle .rd-c-chartstyle__pop { overflow: hidden; border-radius: calc(16 * var(--p)); }
.rd-c-chartstyle .rd-c-chartstyle__phead {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(56 * var(--p)); padding: 0 calc(16 * var(--p)) 0 calc(14 * var(--p));
}
.rd-c-chartstyle .rd-c-chartstyle__ptitle { font-size: calc(15.5 * var(--p)); line-height: calc(20 * var(--p)); font-weight: 500; color: #333333; }
.rd-c-chartstyle .rd-c-chartstyle__px { width: calc(16 * var(--p)); height: calc(16 * var(--p)); color: #333333; }
.rd-c-chartstyle .rd-c-chartstyle__seg {
  margin: 0 calc(13 * var(--p)); padding: calc(2 * var(--p));
  border-radius: calc(9 * var(--p)); background: #F5F5F5; box-shadow: inset 0 0 0 calc(1 * var(--p)) #E6E6E6;
}
.rd-c-chartstyle .rd-c-chartstyle__seginner { position: relative; display: flex; }
.rd-c-chartstyle .rd-c-chartstyle__seg span {
  position: relative; display: block; text-align: center; white-space: nowrap;
  height: calc(24 * var(--p)); font-size: calc(13 * var(--p)); line-height: calc(24 * var(--p)); color: #797979;
}
/* Segment widths measured on chart-style.webp (178 / 203 / 265 / 260 px at 2x). */
.rd-c-chartstyle .rd-c-chartstyle__seg .s1 { flex: 178 1 0; }
.rd-c-chartstyle .rd-c-chartstyle__seg .s2 { flex: 203 1 0; }
.rd-c-chartstyle .rd-c-chartstyle__seg .s3 { flex: 265 1 0; color: #333333; }
.rd-c-chartstyle .rd-c-chartstyle__seg .s4 { flex: 260 1 0; }
/* The selected-tab pill: --tab-l / --tab-w = the Order flow tab, --tab-w0 = the All tab (motion start). */
.rd-c-chartstyle .rd-c-chartstyle__seg .rd-c-chartstyle__pill {
  --tab-w0: 19.65%; --tab-l: 42.05%; --tab-w: 29.25%;
  position: absolute; top: 0; bottom: 0; left: var(--tab-l); width: var(--tab-w);
  border-radius: calc(7 * var(--p)); background: #E2E2E2;
}
.rd-c-chartstyle .rd-c-chartstyle__list { list-style: none; margin: calc(12 * var(--p)) 0 0; padding: 0 0 calc(8 * var(--p)); }
.rd-c-chartstyle .rd-c-chartstyle__opt {
  display: flex; align-items: center; gap: calc(11 * var(--p));
  height: calc(49 * var(--p)); padding: 0 calc(16 * var(--p)) 0 calc(22 * var(--p));
}
.rd-c-chartstyle .rd-c-chartstyle__opt .rd-c-chartstyle__ico { width: calc(17 * var(--p)); height: calc(17 * var(--p)); color: #333333; }
.rd-c-chartstyle .rd-c-chartstyle__opt b { display: block; font-size: calc(13 * var(--p)); line-height: calc(18 * var(--p)); font-weight: 500; color: #333333; white-space: nowrap; }
.rd-c-chartstyle .rd-c-chartstyle__opt i { display: block; margin-top: calc(3 * var(--p)); font-style: normal; font-size: calc(13 * var(--p)); line-height: calc(18 * var(--p)); color: #A1A1A1; white-space: nowrap; }

/* ── Placement: the menu in a glass frame ── */
/* The glass layer runs to the foot of the tile (Dots' stacked frame), so it reads as a layer behind
   the menu rather than a ring around it; the menu itself ends inside the tile. It stops exactly at
   the tile edge (square foot) instead of overhanging, because an overhanging backdrop blur samples
   the page below the tile and grey-washes its foot in dark mode. */
.rd-c-chartstyle .rd-c-chartstyle__v1-glass { left: calc(150 * var(--u)); top: calc(30 * var(--u)); width: calc(460 * var(--u)); bottom: 0; border-radius: calc(32 * var(--u)) calc(32 * var(--u)) 0 0; }
.rd-c-chartstyle .rd-c-chartstyle__v1-pop { --p: calc(1.14 * var(--u)); left: calc(168 * var(--u)); top: calc(48 * var(--u)); width: calc(424 * var(--u)); }

/* Phones (the card turns square, 400 × 400 units): the same menu, whole, as the square's one object:
   app text at 14 units (--p 1.08), ~28 units of coral round the glass and 32 under the menu. The
   glass keeps its rim (16 units) and still runs off the foot as a column. The tabs size as the app's
   do (each label plus the same padding, ~13 units a side) so Order flow keeps room in its pill; the
   desktop keeps the card page's measured widths. */
@container lp-scene (max-aspect-ratio: 7/5) {
  .rd-c-chartstyle .rd-c-chartstyle__v1-glass {
    left: calc(27 * var(--u)); top: calc(28 * var(--u)); width: calc(346 * var(--u));
    /* Below ~600px the card's 36px corner (capabilities.css, ≤ 760px) reaches past the glass sides, so the
       glass foot rounds just inside that corner (tangent at its foot) instead of being nicked by it. */
    border-bottom-left-radius: max(0px, calc(36px - 27 * var(--u)));
    border-bottom-right-radius: max(0px, calc(36px - 27 * var(--u)));
  }
  .rd-c-chartstyle .rd-c-chartstyle__v1-pop { --p: calc(1.08 * var(--u)); left: calc(43 * var(--u)); top: calc(44 * var(--u)); width: calc(314 * var(--u)); }
  /* Tab widths in units at 14.04-unit labels (All 16.5, Price 32.6, Order flow 68.0, Non-time 61.0) + 25.9 each. */
  .rd-c-chartstyle .rd-c-chartstyle__seg .s1 { flex: 42.35 1 0; }
  .rd-c-chartstyle .rd-c-chartstyle__seg .s2 { flex: 58.46 1 0; }
  .rd-c-chartstyle .rd-c-chartstyle__seg .s3 { flex: 93.9 1 0; }
  .rd-c-chartstyle .rd-c-chartstyle__seg .s4 { flex: 86.92 1 0; }
  .rd-c-chartstyle .rd-c-chartstyle__seg .rd-c-chartstyle__pill { --tab-w0: 15.04%; --tab-l: 35.8%; --tab-w: 33.34%; }
}

/* ── Motion: one action. The selected tab slides from All to Order flow, then the order-flow rows
   rise in. The rows use their own keyframes so each replay (the carousel replays the scene when its
   card becomes active) plays the whole action. Without .is-in the menu shows its finished frame. ── */
/* The pill fills backwards only: once the slide ends its own left/width (desktop or phone tabs) apply. */
.rd-c-chartstyle .is-in .rd-c-chartstyle__v1-pop .rd-c-chartstyle__pill { animation: rd-c-chartstyle-tab .45s var(--ease-out) .4s backwards; }
.rd-c-chartstyle .is-in .rd-c-chartstyle__v1-pop .s1 { animation: rd-c-chartstyle-off .45s var(--ease-out) .4s both; }
.rd-c-chartstyle .is-in .rd-c-chartstyle__v1-pop .s3 { animation: rd-c-chartstyle-on .45s var(--ease-out) .4s both; }
.rd-c-chartstyle .is-in .rd-c-chartstyle__v1-pop .rd-c-chartstyle__opt { animation: rd-c-chartstyle-row .5s var(--ease-out) var(--d) both; }
@keyframes rd-c-chartstyle-row { from { opacity: 0; transform: translate3d(0, calc(8 * var(--u)), 0); } to { opacity: 1; transform: none; } }
@keyframes rd-c-chartstyle-tab { from { left: 0; width: var(--tab-w0); } to { left: var(--tab-l); width: var(--tab-w); } }
@keyframes rd-c-chartstyle-off { from { color: #333333; } to { color: #797979; } }
@keyframes rd-c-chartstyle-on { from { color: #797979; } to { color: #333333; } }


/* ── scene s-plan ── */
/* Scene s-plan — trading-day step 1 "Plan before the open" (sun card), version 2 "From template"
   picked by the owner on /landing/redesign/ (2026-10-18). Every selector starts with .rd-s-plan.
   App replicas copy Mira's Notes page (notes.webp): the "NASDAQ Daily Brief" template note, its
   KPI cards visual block (Bias / Risk / Action, desktop/src/shared/textDocumentTemplates.ts) and
   the Document tools "Templates and media" group. Same labels, order and colours (ink #333333,
   grey #9E9E9E, hairlines #E0E0E0, block buttons #EBEBEB); fewer rows.
   Desktop (760 × 428 units): the Templates and media card in front on the left, the note behind
   it leaving the tile through its right and bottom edges. Phones (400 × 400, below). */

/* Absolute placement in tile units: --x / --y / --w / --h. */
.rd-s-plan .sp-at {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.rd-s-plan .sp-ui {
  font-family: var(--app-font);
  color: #333333;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: left;
}
.rd-s-plan .sp-ui svg {
  display: block; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.rd-s-plan .rd-surface { border-radius: calc(18 * var(--u)); }

/* ── The note (editor column) ── */
/* The note leaves the tile through its straight right and bottom edges only (its top sits below
   the card's corner), so the rounded corner never notches it. */
.rd-s-plan .sp2-note { padding: calc(32 * var(--u)) 0 0 calc(72 * var(--u)); }
.rd-s-plan .sp2-note__col { width: calc(392 * var(--u)); }
.rd-s-plan .sp-h1 { margin: 0; font-size: calc(24 * var(--u)); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.rd-s-plan .sp-meta {
  display: flex; align-items: center;
  margin-top: calc(10 * var(--u)); gap: calc(7 * var(--u));
  color: #9E9E9E; font-size: calc(12.5 * var(--u));
}
.rd-s-plan .sp-meta svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: #333333; }
.rd-s-plan .sp-hr { height: max(1px, calc(1 * var(--u))); margin-top: calc(18 * var(--u)); background: #E0E0E0; }
.rd-s-plan .sp-h2 { margin: calc(22 * var(--u)) 0 0; font-size: calc(18 * var(--u)); font-weight: 600; letter-spacing: -0.005em; }
.rd-s-plan .sp-p { margin: calc(9 * var(--u)) 0 0; font-size: calc(13.5 * var(--u)); line-height: 1.62; text-wrap: wrap; }

/* KPI cards visual block: one row of three cells, hairline grid, title then the prompt. */
.rd-s-plan .sp-kpi {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: calc(16 * var(--u));
  box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) #E0E0E0;
}
.rd-s-plan .sp-kpi__cell { position: relative; padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u)); }
.rd-s-plan .sp-kpi__cell + .sp-kpi__cell { box-shadow: inset max(1px, calc(1 * var(--u))) 0 0 #E0E0E0; }
.rd-s-plan .sp-kpi__t { display: block; margin-bottom: calc(8 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; }
.rd-s-plan .sp-kpi__b { display: block; font-size: calc(13.5 * var(--u)); line-height: 1.55; }

/* ── Document tools: the Templates and media card ── */
.rd-s-plan .sp2-tools {
  height: auto;
  padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  box-shadow:
    0 calc(2 * var(--u)) calc(10 * var(--u)) rgb(var(--tint) / 12%),
    0 calc(30 * var(--u)) calc(64 * var(--u)) calc(-18 * var(--u)) rgb(var(--tint) / 48%);
}
.rd-s-plan .sp-label { display: block; color: #9E9E9E; font-size: calc(13 * var(--u)); }
.rd-s-plan .sp-label--group { margin-bottom: calc(12 * var(--u)); font-size: calc(14 * var(--u)); }
.rd-s-plan .sp-label + .sp-select { margin-top: calc(7 * var(--u)); }
.rd-s-plan .sp-select + .sp-label { margin-top: calc(14 * var(--u)); }
.rd-s-plan .sp-select {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(38 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(13 * var(--u));
  border-radius: calc(9 * var(--u));
  box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) #E0E0E0;
  font-size: calc(14 * var(--u));
}
.rd-s-plan .sp-select svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.rd-s-plan .sp-blocks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: calc(18 * var(--u)); gap: calc(8 * var(--u));
}
.rd-s-plan .sp-block {
  display: grid; justify-items: center; align-content: center; gap: calc(8 * var(--u));
  min-height: calc(86 * var(--u));
  padding: calc(12 * var(--u)) calc(6 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #FFFFFF;
  box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) #EBEBEB;
  font-size: calc(13 * var(--u)); line-height: 1.3; text-align: center;
}
.rd-s-plan .sp-block svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }

/* One-shot action: "Insert visual block" is pressed, then the KPI cards block lands in the note.
   Final state is the base style, so `animation: none` (no JS, Pause motion, reduced motion) shows
   the finished note. */
@keyframes rd-s-plan-press {
  0%, 100% { background: #FFFFFF; transform: none; }
  35% { background: #F7F7F7; transform: scale(0.965); }
}
@keyframes rd-s-plan-land {
  from { opacity: 0; transform: translate3d(0, calc(10 * var(--u)), 0); }
}
.rd-s-plan .is-in .sp2-press { animation: rd-s-plan-press .55s ease-in-out .95s both; }
.rd-s-plan .is-in .sp2-land { animation: rd-s-plan-land .6s var(--ease-out) 1.4s both; }

/* ── Phones: the square card, 400 × 400 units ──
   One hero: the note, its left edge in from the card, leaving through the right and bottom edges
   (its top stays below the card's 32px corner: 40 units, never under 33px). It keeps its header
   and the KPI cards block (one row of three, as the app's table); the Key Focus heading and line
   step out. In front, the Templates and media card is cropped to its block buttons and sits under
   the KPI block across the note's left edge, so "Insert visual block" still presses before the
   cards land. All UI text ≥ 14 units, 24-unit margins. */
@container lp-scene (max-aspect-ratio: 7/5) {
  .rd-s-plan .sp2-note { left: calc(56 * var(--u)); top: max(calc(40 * var(--u)), 33px); width: calc(400 * var(--u)); height: calc(400 * var(--u)); padding: calc(20 * var(--u)) 0 0 calc(20 * var(--u)); }
  .rd-s-plan .sp2-note__col { width: calc(300 * var(--u)); }
  .rd-s-plan .sp-h1 { font-size: calc(22 * var(--u)); }
  .rd-s-plan .sp-meta { margin-top: calc(6 * var(--u)); gap: calc(7 * var(--u)); font-size: calc(14 * var(--u)); }
  .rd-s-plan .sp-meta svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .rd-s-plan .sp-hr { margin-top: calc(12 * var(--u)); }
  .rd-s-plan .sp-h2,
  .rd-s-plan .sp-p { display: none; }
  .rd-s-plan .sp-kpi { margin-top: calc(12 * var(--u)); }
  .rd-s-plan .sp-kpi__cell { padding: calc(11 * var(--u)) calc(10 * var(--u)) calc(13 * var(--u)); }
  .rd-s-plan .sp-kpi__t { margin-bottom: calc(6 * var(--u)); }
  .rd-s-plan .sp-kpi__b { font-size: calc(14 * var(--u)); line-height: 1.5; }

  .rd-s-plan .sp2-tools { left: calc(24 * var(--u)); top: auto; bottom: calc(24 * var(--u)); width: calc(224 * var(--u)); padding: calc(10 * var(--u)); }
  .rd-s-plan .sp2-tools .sp-label,
  .rd-s-plan .sp2-tools .sp-select { display: none; }
  .rd-s-plan .sp-blocks { margin-top: 0; }
  .rd-s-plan .sp-block { gap: calc(6 * var(--u)); min-height: calc(76 * var(--u)); padding: calc(7 * var(--u)) calc(6 * var(--u)); font-size: calc(14 * var(--u)); }
  .rd-s-plan .sp-block svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
}


/* ── scene s-copy ── */
/* Scene s-copy — trading-day step 2 "Copy to every follower" (sky card), V1 as the owner picked it
   on /landing/redesign/ (2026-10-18): the copier group in Mira's narrow card layout — the TopstepX
   leader row, two followers (each one's size on its own line under its name) and "2/2 followers
   connected" — on a stacked glass deck. The leader, then each follower, steps in.
   App replicas copy Mira's light theme as captured (copier-group / copier-follower .webp): ink #333,
   muted #9E9E9E, status green #089981. App px are drawn at 1.4 units (13px name → 18.2u, 12px hint
   → 16.8u). Every selector starts with .rd-s-copy. */
.rd-s-copy {
  --sc-ink: #333333;
  --sc-muted: #9E9E9E;
  --sc-green: #089981;
  --sc-tv: url("data:image/png;base64,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");
}
.rd-s-copy .rd-tile { font-family: var(--app-font); letter-spacing: -0.01em; line-height: 1.25; color: var(--sc-ink); }
.rd-s-copy .rd-tile * { box-sizing: border-box; }
.rd-s-copy .sc-abs { position: absolute; }
.rd-s-copy .sc-ico { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Copier pieces (CopyRoutes.module.css: .simpleLogo, .statusWord, .sizingHint). */
.rd-s-copy .sc-logo {
  flex: none; width: calc(28 * var(--u)); height: calc(28 * var(--u));
  border-radius: calc(11 * var(--u));
  background: var(--sc-tv) 52% 50% / 72% no-repeat, #FAFAFA;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgb(10 10 10 / 8%);
}
.rd-s-copy .sc-status {
  display: inline-flex; align-items: center; gap: calc(10 * var(--u)); flex: none;
  color: var(--sc-green); font-size: calc(16.8 * var(--u)); font-weight: 500; white-space: nowrap;
}
.rd-s-copy .sc-status::before { content: ''; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: currentColor; }
.rd-s-copy .sc-name { font-size: calc(18.2 * var(--u)); font-weight: 500; white-space: nowrap; }
.rd-s-copy .sc-hint { color: var(--sc-muted); font-size: calc(16.8 * var(--u)); white-space: nowrap; }
.rd-s-copy .sc-glyph { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--sc-ink); }

/* The deck: two glass layers peek above the group card (760 × 428 design). */
.rd-s-copy .sc1-deck { left: calc(186 * var(--u)); top: calc(40 * var(--u)); width: calc(388 * var(--u)); }
.rd-s-copy .sc1-layer { position: absolute; left: calc(var(--in) * 1 * var(--u)); right: calc(var(--in) * 1 * var(--u)); top: calc(var(--up) * 1 * var(--u)); height: calc(120 * var(--u)); border-radius: calc(24 * var(--u)); }
.rd-s-copy .sc1-layer--back { background: rgb(255 255 255 / 22%); }
.rd-s-copy .sc1-card { position: relative; margin-top: calc(30 * var(--u)); display: flex; flex-direction: column; gap: calc(11 * var(--u)); padding: calc(22 * var(--u)); border-radius: calc(24 * var(--u)); }
.rd-s-copy .sc1-lead { display: flex; align-items: center; gap: calc(11 * var(--u)); min-height: calc(45 * var(--u)); }
.rd-s-copy .sc1-lead .sc-name { flex: 1 1 auto; }
.rd-s-copy .sc1-f {
  display: grid; align-items: center; align-content: center;
  grid-template-columns: calc(20 * var(--u)) calc(28 * var(--u)) minmax(0, 1fr) auto;
  column-gap: calc(11 * var(--u)); row-gap: calc(9 * var(--u));
  min-height: calc(78 * var(--u)); padding-left: calc(25 * var(--u));
}
.rd-s-copy .sc1-f .sc-glyph, .rd-s-copy .sc1-f .sc-logo { grid-row: 1; }
.rd-s-copy .sc1-f .sc-name { grid-column: 3 / 5; grid-row: 1; }
.rd-s-copy .sc1-f .sc-hint { grid-column: 3; grid-row: 2; }
.rd-s-copy .sc1-f .sc-status { grid-column: 4; grid-row: 2; justify-self: end; }
.rd-s-copy .sc1-meta {
  margin-top: calc(4 * var(--u)); padding-top: calc(14 * var(--u));
  border-top: calc(1 * var(--u)) solid #F1F1F1;
  color: var(--sc-muted); font-size: calc(16.8 * var(--u)); white-space: nowrap;
}

/* Phones (square frame, 400 × 400 units): the same deck, centred with 28 units all round — the
   card 344 wide; follower rows 76 tall (78 on the wide frame) so the deck is 344 tall. */
@container lp-scene (max-aspect-ratio: 7/5) {
  .rd-s-copy .sc1-deck { left: calc(28 * var(--u)); top: calc(28 * var(--u)); width: calc(344 * var(--u)); }
  .rd-s-copy .sc1-f { min-height: calc(76 * var(--u)); }
}


/* ── scene s-review ── */
/* Scene s-review — trading-day step 3 "Review after the close" (violet). Owner, 2026-10-18, on
   /landing/redesign/: "Both, trades then score: the trades and win-rate card shows first and the Mira
   score card replaces it as you scroll." Phase 1 = V2 (Recent trades + Winning % By Trades), phase 2
   = V3 (the Mira score card). Every selector starts with .rd-s-review.
   App replicas copy Mira's Journal analytics (analytics.webp, journal-trades.webp,
   analytics-score.webp): same labels, values, order and colours, fewer rows and controls.
   Colours sampled from the captures: ink #333333, profit #10B981, loss #EF4444. */

/* Absolute placement in tile units: --x/--y/--w/--h (760 × 428; 400 × 400 in the square frame). */
.rd-s-review .sr-at {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.rd-s-review .sr-ui {
  font-family: var(--app-font);
  color: #333333;
  letter-spacing: 0;
  line-height: 1.2;
  font-feature-settings: 'tnum' 1;
}
.rd-s-review .sr-ui svg { display: block; overflow: visible; }
.rd-s-review .sr-ui svg text { font-family: var(--app-font); font-feature-settings: 'tnum' 1; }
/* Card header: title + the app's (?) help icon. */
.rd-s-review .sr-head { display: flex; align-items: center; gap: calc(10 * var(--u)); font-weight: 400; }
.rd-s-review .sr-help { width: calc(19 * var(--u)); height: calc(19 * var(--u)); flex: none; }
/* Front panels sit a little higher than the panel they overlap. */
.rd-s-review .sr-front {
  box-shadow:
    0 calc(2 * var(--u)) calc(10 * var(--u)) rgb(var(--tint) / 12%),
    0 calc(30 * var(--u)) calc(64 * var(--u)) calc(-18 * var(--u)) rgb(var(--tint) / 48%);
}

/* ── The two phases. Phase 1 is the default (also reduced motion, "Pause motion" and no JS);
   data-phase="2" (scenes.js 2.6 s after the scene plays; steps.js from scroll while pinned) swaps
   in the score. The leaving phase is all but gone (.24 s, eased out) before the arriving one rises
   in (from .14 s, done by .64 s), so the two cards never show over each other. ── */
.rd-s-review .sr-phase {
  position: absolute;
  inset: 0;
  transition: opacity .46s var(--ease-out) .14s, transform .5s var(--ease-out) .14s, visibility 0s linear .14s;
}
.rd-s-review .sr-phase--score,
.rd-s-review .lp-scene[data-phase="2"] .sr-phase--trades {
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out), visibility 0s linear .24s;
}
.rd-s-review .sr-phase--score { transform: translate3d(0, calc(12 * var(--u)), 0); }
.rd-s-review .lp-scene[data-phase="2"] .sr-phase--trades { transform: translate3d(0, calc(-8 * var(--u)), 0); }
.rd-s-review .lp-scene[data-phase="2"] .sr-phase--score {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .46s var(--ease-out) .14s, transform .5s var(--ease-out) .14s, visibility 0s linear .14s;
}
/* A scene that resets snaps to its start, so its next entrance plays in full. */
.rd-s-review .lp-scene:not(.is-in) .sr-phase { transition: none; }

/* ── Phase 1 (V2 · Trades to win rate): Recent trades (back) and Winning % By Trades (front) ── */
.rd-s-review .sr2-trades { --x: 36; --y: 40; --w: 430; --h: 420; padding: calc(20 * var(--u)) calc(22 * var(--u)) 0; }
.rd-s-review .sr2-tabs { display: flex; gap: calc(16 * var(--u)); padding-left: calc(12 * var(--u)); font-size: calc(15.5 * var(--u)); font-weight: 500; }
.rd-s-review .sr2-tab { position: relative; padding-bottom: calc(14 * var(--u)); }
.rd-s-review .sr2-tab--off { color: #868686; }
.rd-s-review .sr2-tab--on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(7 * var(--u));
  border: calc(1.5 * var(--u)) solid #BEBEBE; border-top: 0;
  border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u));
}
.rd-s-review .sr2-table { margin-top: calc(12 * var(--u)); }
.rd-s-review .sr2-tr {
  display: grid; grid-template-columns: calc(170 * var(--u)) calc(84 * var(--u)) minmax(0, 1fr);
  align-items: center;
  height: calc(42 * var(--u));
  padding: 0 calc(14 * var(--u));
  font-size: calc(15 * var(--u));
  border-top: calc(1 * var(--u)) solid #ECECEC;
}
.rd-s-review .sr2-th { height: calc(38 * var(--u)); border-top: 0; background: #FCFCFD; font-size: calc(13.5 * var(--u)); font-weight: 500; color: #808080; }
.rd-s-review .sr2-up { color: #10B981; }
.rd-s-review .sr2-dn { color: #EF4444; }
.rd-s-review .sr2-win { --x: 430; --y: 150; --w: 294; --h: 222; --d: 220ms; padding: calc(20 * var(--u)) calc(22 * var(--u)); }
.rd-s-review .sr2-head { font-size: calc(15.5 * var(--u)); height: calc(22 * var(--u)); }
.rd-s-review .sr2-head .sr-help { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.rd-s-review .sr2-body { position: absolute; left: calc(22 * var(--u)); top: calc(58 * var(--u)); width: calc(250 * var(--u)); height: calc(140 * var(--u)); }
/* The ring sweeps once, clockwise from 3 o'clock: green to 67%, then the red third. */
@keyframes rd-s-review-sweep { from { stroke-dashoffset: 366; } }
.rd-s-review .lp-scene.is-in .sr2-sweep { animation: rd-s-review-sweep 1.5s cubic-bezier(.45, .05, .25, 1) .55s both; }

/* ── Phase 2 (V3 · The score at the close): the Mira score card; the radar opens from its centre ── */
.rd-s-review .sr3-card { --x: 160; --y: 39; --w: 440; --h: 350; }
.rd-s-review .sr3-radar { position: absolute; left: 0; top: 0; width: calc(440 * var(--u)); height: calc(280 * var(--u)); }
.rd-s-review .sr3-card .sr3-radar--sq { display: none; }
/* The radar opens each time the score card arrives. A transition, so a scroll back mid-way eases
   instead of jumping; it closes again only once its card has gone. */
.rd-s-review .sr3-shape {
  transform-box: view-box;
  transform-origin: 220px 144px;
  transform: scale(.12);
  opacity: 0;
  transition: transform 0s linear .26s, opacity 0s linear .26s;
}
.rd-s-review .sr3-radar--sq .sr3-shape { transform-origin: 0 0; }
.rd-s-review .lp-scene.is-in[data-phase="2"] .sr3-shape {
  transform: none;
  opacity: 1;
  transition: transform 1.3s cubic-bezier(.2, .8, .2, 1) .45s, opacity .4s var(--ease-out) .45s;
}
.rd-s-review .sr3-strip {
  position: absolute; left: calc(24 * var(--u)); right: calc(24 * var(--u)); top: calc(284 * var(--u));
  height: calc(66 * var(--u));
  border-top: calc(1 * var(--u)) solid #F0F0F0;
}
.rd-s-review .sr3-score { position: absolute; left: 0; top: calc(13 * var(--u)); }
.rd-s-review .sr3-score b { display: block; font-weight: 400; font-size: calc(14 * var(--u)); color: #ACACAC; }
.rd-s-review .sr3-score span { display: block; margin-top: calc(6 * var(--u)); font-size: calc(17 * var(--u)); color: #333333; }
.rd-s-review .sr3-sep { position: absolute; left: calc(104 * var(--u)); top: calc(10 * var(--u)); width: calc(1 * var(--u)); height: calc(46 * var(--u)); background: #F0F0F0; }
.rd-s-review .sr3-scale { position: absolute; left: calc(124 * var(--u)); right: 0; top: calc(16 * var(--u)); }
.rd-s-review .sr3-bar {
  position: relative;
  height: calc(8 * var(--u)); border-radius: calc(4 * var(--u));
  background: linear-gradient(90deg, #FF7E70 0%, #FFB768 19%, #FFD35E 38%, #FFDA58 48%, #CEDD6F 57%, #93DF8B 67%, #62DFA0 77%, #50DB99 87%, #3AD790 100%);
}
.rd-s-review .sr3-mark {
  position: absolute; left: 82%; top: 50%;
  width: calc(15 * var(--u)); height: calc(15 * var(--u));
  margin: calc(-7.5 * var(--u)) 0 0 calc(-7.5 * var(--u));
  border-radius: 50%; background: #10B981;
  box-shadow: 0 0 0 calc(2.5 * var(--u)) #FFFFFF;
}
.rd-s-review .sr3-ticks { display: flex; justify-content: space-between; margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--u)); color: #848484; }

/* ── Square frame (phones), 400 × 400 units ──
   Phase 1: the Winning % By Trades card across the top (the hero), with the Recent trades list
   tucked under it — tabs, header and the two latest trades; the list runs on past the frame's foot,
   where only its empty panel is cut. Phase 2: the Mira score card, centred, with the radar laid out
   for the square (.sr3-radar--sq: the same ratings, 14-unit labels). */
@container lp-scene (max-aspect-ratio: 7/5) {
  .rd-s-review .sr2-win { --x: 64; --y: 24; --w: 312; --h: 202; padding: calc(18 * var(--u)) calc(22 * var(--u)); }
  /* Ring and legend centred in the card (as in the app), evenly between the title and the foot. */
  .rd-s-review .sr2-body { left: calc(36 * var(--u)); top: calc(49 * var(--u)); }
  .rd-s-review .sr2-trades { --x: 24; --y: 218; --w: 328; --h: 200; padding: calc(22 * var(--u)) calc(16 * var(--u)) 0; }
  .rd-s-review .sr2-tab { padding-bottom: calc(12 * var(--u)); }
  .rd-s-review .sr2-table { margin-top: calc(8 * var(--u)); }
  .rd-s-review .sr2-tr {
    grid-template-columns: calc(118 * var(--u)) calc(66 * var(--u)) minmax(0, 1fr);
    height: calc(36 * var(--u));
    padding: 0 calc(12 * var(--u));
  }
  .rd-s-review .sr2-th { height: calc(32 * var(--u)); font-size: calc(14 * var(--u)); }
  .rd-s-review .sr2-tr:nth-child(n + 4) { display: none; }

  .rd-s-review .sr3-card { --x: 24; --y: 44; --w: 352; --h: 312; }
  .rd-s-review .sr3-card .sr3-radar--wide { display: none; }
  .rd-s-review .sr3-card .sr3-radar--sq { display: block; width: calc(352 * var(--u)); height: calc(244 * var(--u)); }
  .rd-s-review .sr3-strip { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(246 * var(--u)); }
  .rd-s-review .sr3-sep { left: calc(90 * var(--u)); }
  .rd-s-review .sr3-scale { left: calc(108 * var(--u)); }
  .rd-s-review .sr3-ticks { font-size: calc(14 * var(--u)); }
}