/* ═══════════════════════════════════════════════════════════════
   ORION · concept-13 · the site, built one approved section at a time
   THIS ROUND: nav + hero + platform gallery. Future sections append
   inside <main>, below #platform, before #next.
     1 tokens   2 base   3 atmosphere (scoped to #hero, NEUTRAL only)
     4 shared components  5 nav  6 dropdown panel  7 mobile sheet
     8 hero    9 shot primitive   10 gallery   11 next/footer
    12 motion  13 responsive      14 reduced motion (always last)
    12 responsive        13 reduced motion (always last)
   Single file · one variable webfont (Inter 300-700) · no libs · no canvas.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · tokens ── */
:root{
  --bg:#000;               /* pure black page, matching Framer's measured body */
  --deep:#0b0b0b;          /* card + dropdown surface */
  --cell:rgba(255,255,255,.025); /* chart / data recess */
  --hair:#1c1c1e;          /* structural hairline (panels, tiles) */
  --line:#1c1c1e;          /* nav border */
  --t1:#f4f2ee;            /* display / primary */
  --head:#fff;             /* every title: pure white, as Framer's measured headings */
  --t2:#9a9a9e;            /* subline */
  --t3:#8b8b90;            /* captions (≥4.5:1 on the black field) */
  --t4:#7c7c82;            /* dropdown description line */
  --gold:#f6c453;          /* CONTENT accent only — equity line, one bar. Never page atmosphere. */
  --gold-bright:#ffe39a;
  --green:#39f28a;
  --r-sm:10px; --r-md:14px; --r-lg:22px;
  --font:'Inter','Inter Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* Section headings. GT Walsheim Medium is the target, but it is a licensed
     Grilli Type face — put the real family first here once a web licence exists
     and self-host it; everything else stays untouched. */
  --display:'Outfit','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --easeout:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.3,1.36,.44,1);
  /* nav typography — Framer's stack, measured live. No webfont download allowed,
     so Inter first and the system UI face behind it. On any machine without Inter
     installed the nav renders in the system face — the Framer match is nominal,
     not glyph-for-glyph, and the ~1.2px CTA delta is that, not CSS. */
  --nav-font:'Inter','Inter Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --nav-ink:rgba(255,255,255,.6);   /* Framer's .6 grey: band labels, Login, and any menu link under the pointer */
  --nav-cta-bg:#fff; --nav-cta-ink:#000;   /* white CTA — confirmed, do not flip */
}

/* ── 2 · base ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
html.locked{overflow:hidden}
h1,h2{color:var(--head)}
body{background:var(--bg);color:var(--t1);font-family:var(--font);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:rgba(255,255,255,.2);color:#fff}
img,
svg{display:block;max-width:100%}
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 3 · atmosphere — NEUTRAL ONLY. The warm ember/drift and the orange radials
       are gone. What is left is a barely-there grey vignette so the black has a
       top edge; it lives inside #hero and scrolls away with it. ── */
#atmo{position:absolute;inset:-12vh 0 -20vh;z-index:-1;pointer-events:none;
  /* Tailark-style shading: very large, very LOW contrast. The whole ramp is about
     ten grey levels, so there are almost no steps for the eye to catch — the
     opposite of the wide, strong gradient that banded so badly earlier. Two
     diagonal smears across the field, two soft pools in the upper corners, and a
     faint lift behind the headline. */
  background:
    linear-gradient(114deg,transparent 18%,rgba(255,255,255,.030) 37%,transparent 56%),
    linear-gradient(246deg,transparent 20%,rgba(255,255,255,.024) 41%,transparent 60%),
    radial-gradient(62vw 44vh at 17% 4vh,rgba(255,255,255,.042),transparent 68%),
    radial-gradient(54vw 38vh at 85% 0vh,rgba(255,255,255,.032),transparent 66%),
    radial-gradient(92vw 32vh at 50% 24vh,rgba(255,255,255,.020),transparent 72%)}

/* ── section bands. The radial --glow backdrop that used to sit behind them is gone
      (20 Sep 2026, owner's call): the site keeps colour to accents and never washes, and
      #controls was the last section carrying one. .tint stays — a lifted surface with
      hairline edges, which is a surface, not a wash. ── */
.band{position:relative}
.band > *{position:relative;z-index:1}
.band.tint{background:#07070d;
  border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}

/* ── 4 · shared components ── */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 24px;border-radius:12px;font-size:.94rem;font-weight:500;
  letter-spacing:-.015em;white-space:nowrap;user-select:none;
  transition:transform .28s var(--spring),opacity .2s ease,background .2s ease,border-color .2s ease}
.pill:active{transform:scale(.97)}
.pill.white{color:#000;background:#fff}
.pill.white:hover{opacity:.88}
.pill.ghost{color:var(--t1);background:rgba(255,255,255,.035);border:1px solid var(--hair)}
.pill.ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
/* filled, and deliberately so — see the note in section 11. One colour, flat,
   measured off 21st.dev: oklch(.485 .291 264.121) resolves to #0033ff. */
.pill.blue{color:#fff;border:0;background:#0033ff}
.pill.blue:hover{opacity:1;background:#1a49ff}

/* ── 5 · nav — Framer-measured: 64px bar, transparent at rest, blurs past 40px.
       Type is Framer's exactly: Inter 14/400, pure white; only Login sits at .6.
       Two inks in the whole menu: white for anything you can go to, .6 for labels,
       Login and a link under the pointer. ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  transition:background .35s ease .15s,backdrop-filter .35s ease .15s}
#nav.scrolled{background:rgba(0,0,0,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}   /* no hairline: Framer's bar has none, and #1c1c1e on black only ever showed where it crossed a card edge */
/* a group open: the bar is the top of the band, so it goes solid.
   Invisible at rest; scrolled, it stops the blurred page showing through above the band. */
#nav:has(.has-menu.open){background:#000;transition:none}
.nav-in{max-width:1200px;margin:0 auto;padding:0 32px;height:64px;
  display:flex;align-items:center;gap:24px}

/* brand — white stroke mark, ORION wordmark only */
.brand{display:flex;align-items:center;gap:10px;min-height:44px;flex:none}
.brand svg{width:23px;height:23px;flex:none}
.wordmark{font-family:var(--nav-font);font-size:15px;font-weight:600;
  letter-spacing:-.3px;line-height:1;color:#fff}

/* nav items — Framer's 14/400. Framer keeps every top item white; ours sit at .6 and go
   white under the pointer, when their group is open, and on the current page (v365, owner's
   call: five white words beside the white wordmark shouted). Siblings of an open group are left
   alone, as Framer leaves them: the band and the caret already say which one is live.
   28px between items against Framer's 25; the 44px hit-box is the reason. */
.nav-menu{display:flex;align-items:center;gap:4px;list-style:none}
.nav-menu li{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 12px;
  font-family:var(--nav-font);font-size:14px;font-weight:400;letter-spacing:-.1px;
  color:var(--nav-ink);white-space:nowrap;transition:color .12s ease}   /* .6 at rest: five white words beside the white wordmark shouted, and the other pages lost their you-are-here */
.nav-link:hover{color:#fff}
.has-menu.open>.nav-link{color:#fff}
/* quiet you-are-here: a flat link that is this page, or the group whose band holds it
   (two rules, so a browser without :has() still keeps the first) */
.nav-link[aria-current="page"]{color:#fff}
.has-menu:has(.dd-item[aria-current="page"])>.nav-link{color:#fff}
/* dropdown caret — 8x8, link colour, flips on open */
.cv{width:8px;height:8px;flex:none;transition:transform .18s var(--easeout)}
.has-menu.open>.nav-link .cv{transform:rotate(180deg)}

/* ── 6 · flyout — Framer's, not a card. On open the bar grows into a full-width black
       band that ends in one hairline, and the page dims beneath it. Inside, each
       sub-group is a column: a dim 14px label over plain 18px white links on a 34px
       pitch. No icons, no descriptions, no borders, no radius. Content starts at the
       bar's own left edge — the side padding tracks .nav-in's (32px inside the 1200
       cap, 5vw below it). Columns are content-sized on a 48px gutter, Framer's own
       gutter (39-49 measured): the second column starts 48 after the longest link in
       the first, so no band carries a 100px hole. Bottom air is 20 (Framer 19.8);
       the dim is Framer's rgba(0,0,0,.6). ── */
.dd{position:fixed;top:64px;left:0;right:0;z-index:5;
  display:grid;grid-auto-columns:max-content;column-gap:48px;grid-auto-flow:row dense;
  justify-items:start;
  padding:3px max(5vw,calc(50% - 568px)) 14px;
  background:#000;border-bottom:1px solid var(--line);
  /* the dim: one hard shadow pushed down a viewport and spread by one, so it begins
     at the band's top edge, never climbs over the bar, and takes no pointer events */
  box-shadow:0 100vh 0 100vh rgba(0,0,0,.6);
  opacity:0;visibility:hidden;pointer-events:none;
  /* lazy close: the band holds 150ms (still hoverable, so a pointer that drifts out and back
     re-opens it), then fades 120ms. pointer-events is discrete, so it needs allow-discrete. */
  transition:opacity .12s ease .15s,visibility 0s linear .27s,pointer-events 0s linear .27s;
  transition-behavior:allow-discrete}
.has-menu.open .dd{opacity:1;visibility:visible;pointer-events:auto;transition:none}   /* instant open */
/* a sibling took over: the outgoing band drops in the same frame the new one lands */
.nav-menu:has(.has-menu.open) .has-menu:not(.open) .dd{transition:none}
/* transparent bridge over the strip between the link and the band, so pointerleave has no gap to fall through */
.dd::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
/* two columns with no extra markup: everything before the separator is column 1,
   everything after it column 2 (dense packing restarts each column at row 1).
   ponytail: assumes exactly two sub-groups per band; a third needs a wrapper div. */
.dd>*{grid-column:1}
.dd-sep~*{grid-column:2}
.dd-sep,
.dd-ic,
.dd-tx em{display:none}   /* tiles and description lines: markup kept, not drawn */
.dd-lab{font-family:var(--nav-font);font-size:14px;font-weight:400;letter-spacing:-.14px;
  line-height:24px;color:var(--nav-ink)}
.dd-item{display:block;padding:5px 0}
.dd-tx{display:block;min-width:0}
.dd-tx b{display:block;font-family:var(--nav-font);font-size:15px;font-weight:400;   /* Framer's 18 suits one-word items; ours are phrases, and at 18 they read as headings */
  letter-spacing:-.2px;line-height:24px;color:#fff;transition:color .12s ease}
.dd-item:hover .dd-tx b{color:var(--nav-ink)}   /* Framer: the hovered link drops to .6, its siblings stay white */

/* CTAs — Framer's pair: plain-text login, small white rounded rectangle */
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-login{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
  font-family:var(--nav-font);font-size:14px;font-weight:400;letter-spacing:-.14px;
  color:var(--nav-ink);white-space:nowrap;transition:color .12s ease}
.nav-login:hover{color:#fff}
.nav-signup{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--nav-font);font-size:14px;font-weight:400;letter-spacing:-.56px;
  line-height:1;padding:8px 10px;border-radius:8px;white-space:nowrap;
  background:var(--nav-cta-bg);color:var(--nav-cta-ink);
  transition:opacity .12s ease,transform .2s var(--spring)}
.nav-signup:hover{opacity:.88}
.nav-signup:active{transform:scale(.97)}
#burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);position:relative;flex:none}
#burger i{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--t1);
  transition:transform .34s var(--spring),top .34s var(--spring)}
#burger i:nth-child(1){top:16px}
#burger i:nth-child(2){top:26px}
/* the X keys off aria-expanded too: every page's script sets that, only the home page adds .x */
#burger.x i:nth-child(1),
#burger[aria-expanded="true"] i:nth-child(1){top:21px;transform:rotate(45deg)}
#burger.x i:nth-child(2),
#burger[aria-expanded="true"] i:nth-child(2){top:21px;transform:rotate(-45deg)}

/* ── 7 · mobile sheet — the band's language in one column: a dim 14px group label,
       20px white links on 44px rows, one hairline between groups. No cards, no tiles.
       The slide-over, inert page, first-link focus and close-on-link stay in JS. ── */
#sheet{position:fixed;inset:0;z-index:55;background:#000;
  display:flex;flex-direction:column;
  padding:64px 0 max(20px,calc(env(safe-area-inset-bottom) + 12px));
  transform:translateX(102%);visibility:hidden;
  transition:transform .48s cubic-bezier(.32,.9,.3,1),visibility 0s linear .48s}
#sheet.open{transform:translateX(0);visibility:visible;
  transition:transform .48s cubic-bezier(.32,.9,.3,1)}
/* side padding = .nav-in's below the cap (5vw, floored at the 460 rule's 20px), so rows align with the mark */
#sheet nav{display:flex;flex-direction:column;overflow-y:auto;padding:0 max(20px,5vw);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
#sheet nav::-webkit-scrollbar{display:none}
#sheet nav>*{opacity:0;transform:translateX(24px);
  transition:opacity .5s ease,transform .55s var(--easeout)}
#sheet.open nav>*{opacity:1;transform:none;transition-delay:calc(.08s + var(--i,0)*70ms)}
.sh-panel{padding:20px 0 12px;border-bottom:1px solid var(--line)}   /* 23 below the last link, 20 above the next label */
.sh-panel .dd-lab{margin-bottom:6px}   /* the 44px row and its focus ring sat 2px under the label */
#sheet .dd-item{display:flex;align-items:center;min-height:44px;padding:0}
#sheet .dd-tx b{font-size:17px;letter-spacing:-.2px}
/* the two direct links under the panels */
.sh-flat{display:flex;align-items:center;min-height:44px;
  font-family:var(--nav-font);font-size:17px;font-weight:400;letter-spacing:-.2px;
  line-height:24px;color:#fff}
.sh-panel+.sh-flat{margin-top:14px}
.sheet-cta{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:20px max(20px,5vw) 0}
/* same two treatments as the bar, sized up to a 48px touch target */
.sheet-cta .nav-login,
.sheet-cta .nav-signup{width:100%;min-height:48px;font-size:15px}
.sheet-cta .nav-login{justify-content:center;padding:0}
.sheet-cta .nav-signup{border-radius:10px;letter-spacing:-.3px}

/* ── 8 · hero — Framer's community-section shape, measured live: headline in a
      ~500px column on the left, a meta line and one button on the right, then a
      single browser window below it. Framer's h2 is 44/500/−1.76px; this is the
      page's h1 so it sits one step up. Nothing else. ── */
/* the glow is wider than the hero on purpose; clip-x keeps it from growing the
   document. `clip` rather than `hidden` so it never becomes a scroll container. */
#hero{position:relative;padding:150px 0 0;overflow-x:clip}
.hero-top{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);
  gap:28px 48px;align-items:end;margin-bottom:34px}
h1{font-size:clamp(29px,3.9vw,46px);line-height:1.12;letter-spacing:-.04em;font-weight:500;
  max-width:30ch}
h1 .hl{display:block}
h1 .hl.dim{color:#8a8a90}
.hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px;
  justify-self:end;text-align:right}
.hero-meta{font-family:var(--nav-font);font-size:14px;font-weight:400;color:rgba(255,255,255,.6)}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
.pill.fr{min-height:38px;padding:0 16px;border-radius:8px;
  font-size:14px;font-weight:400;letter-spacing:-.28px;gap:7px}
.pill.fr.soft{color:#fff;background:rgba(255,255,255,.1);border:0}
.pill.fr.soft:hover{background:rgba(255,255,255,.16)}
/* ── 9 · the shot primitive — one real portal screenshot, cropped by anchor+zoom.
       --fx/--fy are the crop's top-left corner as a fraction of the full capture,
       --fw is the crop width as a fraction. The box height comes from the layout,
       so a cell can be any shape without re-cutting the file. .mask blurs a region
       in the capture's own coordinates (license keys, account numbers). ── */
.shot{position:relative;overflow:hidden;border-radius:18px;background:#000;
  border:1px solid rgba(255,255,255,.08);isolation:isolate}
.pan{position:absolute;inset:0;transition:transform .55s var(--easeout)}
.plate{position:absolute;left:0;top:0;width:calc(100% / var(--fw,1));aspect-ratio:var(--ar,2000/1447);
  transform:translate(calc(var(--fx,0) * -100%),calc(var(--fy,0) * -100%))}
.plate img{width:100%;height:100%;display:block}
.mask{position:absolute;left:calc(var(--l) * 100%);top:calc(var(--t) * 100%);
  width:calc(var(--w) * 100%);height:calc(var(--h) * 100%);border-radius:5px;
  background:rgba(0,0,0,.06);backdrop-filter:blur(4.5px);-webkit-backdrop-filter:blur(4.5px)}
/* the fade — the screen dissolves into the page instead of ending on a hard edge */
.shot::after{content:'';position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.72) 58%,#000 100%)}

/* ── 9b · the window — one browser frame holding the real portal. The chrome and
      the rail are built here; the page inside each view is the shipped product,
      photographed, and it drifts upward the way a page does when you read it.
      Framer's own frame: #111, radius 18, 50px chrome, 260px rail. ── */
.win-wrap{position:relative;max-width:1200px;margin:0 auto}
@property --rim{syntax:'<angle>';inherits:false;initial-value:0deg}
/* The grey glow and its dither are gone. A wide, faint gradient on a black page
   bands by nature, and the noise layer that hides the banding also speckles the
   portal captures sitting underneath it. The window keeps the three lights that
   never had either problem: the neon rim, the travelling ball, the black shadow. */
.win-orbit,
.win-rim{position:absolute;z-index:0;pointer-events:none}
/* the hot spot that rides the border. Deeper blue than the ring on purpose:
   two lights the same colour read as one smudge. */
.win-orbit{inset:-4%;border-radius:50%;filter:blur(22px);
  background:
    radial-gradient(6% 10% at 50% 50%,rgba(120,165,255,.95),transparent 62%),
    radial-gradient(11% 17% at 50% 50%,rgba(47,91,255,.75),transparent 68%);
  animation:winOrbit 18s linear infinite}
/* the rim itself: a 1.5px ring with one bright arc rotating around it. The mask
   keeps only the ring, so this cannot spill outside the frame at all. */
.win-rim{inset:-2px;border-radius:20px;padding:2px;
  background:conic-gradient(from var(--rim),
    rgba(0,229,255,0) 0deg,rgba(0,229,255,1) 22deg,rgba(120,200,255,.95) 44deg,
    rgba(155,92,255,.8) 68deg,rgba(0,229,255,0) 112deg,
    rgba(0,229,255,0) 186deg,rgba(155,92,255,.85) 210deg,rgba(0,229,255,.9) 240deg,
    rgba(0,229,255,0) 292deg,rgba(0,229,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:rimSpin 7s linear infinite}
@keyframes rimSpin{to{--rim:360deg}}
/* the path now runs just past the frame's edge, not out across the hero */
@keyframes winOrbit{
  0%   {transform:translate(-44%,-38%)}
  12.5%{transform:translate(0,-42%)}
  25%  {transform:translate(44%,-38%)}
  37.5%{transform:translate(47%,0)}
  50%  {transform:translate(44%,38%)}
  62.5%{transform:translate(0,42%)}
  75%  {transform:translate(-44%,38%)}
  87.5%{transform:translate(-47%,0)}
  100% {transform:translate(-44%,-38%)}}
.win{position:relative;z-index:1;border-radius:18px;overflow:hidden;
  background:transparent;border:1px solid rgba(255,255,255,.11);
  box-shadow:0 22px 64px rgba(0,0,0,.6)}
.win-bar{display:flex;align-items:center;gap:12px;height:50px;padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(12,12,17,.70);
  -webkit-backdrop-filter:blur(5px) saturate(108%);backdrop-filter:blur(5px) saturate(108%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.win-dots{display:flex;gap:6px;flex:none}
.win-dots i{width:9px;height:9px;border-radius:50%;background:#2a2a2e}
.win-nav{display:flex;gap:2px;flex:none;margin-left:4px}
.win-nav button{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;
  color:var(--o-k6);transition:color .12s ease,background-color .12s ease}
.win-nav button:hover{color:var(--o-k2);background:rgba(255,255,255,.05)}
.win-nav svg{width:14px;height:14px}
.win-play{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:7px;
  color:var(--o-k5);transition:color .12s ease,background-color .12s ease}
.win-play:hover{color:var(--o-k1);background:rgba(255,255,255,.05)}
.win-play svg{width:15px;height:15px}
.win-addr{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:26px;
  padding:0 12px;border-radius:999px;background:rgba(255,255,255,.04);
  font-family:var(--mono);font-size:11px;color:var(--o-k5);white-space:nowrap;overflow:hidden}
.win-addr b{color:var(--o-k3);font-weight:400}
.win-addr svg{width:11px;height:11px;flex:none;color:var(--o-green)}
.win-live{flex:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--o-k6)}
.win-live i{width:5px;height:5px;border-radius:50%;background:var(--o-k5)}
.win-body{display:grid;grid-template-columns:250px minmax(0,1fr);height:min(56vh,520px)}

/* the rail, rebuilt from the shipped portal shell */
.win-side{display:flex;flex-direction:column;min-width:0;padding:14px 10px 10px;
  border-right:1px solid rgba(255,255,255,.08);
  background:rgba(9,9,14,.70);
  -webkit-backdrop-filter:blur(5px) saturate(108%);backdrop-filter:blur(5px) saturate(108%);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.04)}
.win-brand{padding:2px 10px 14px;font-size:15px;font-weight:600;letter-spacing:-.3px;color:#fff}
.win-nav-list{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:1px;
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,rgba(0,0,0,.15) 96%,transparent);
  mask-image:linear-gradient(to bottom,#000 82%,rgba(0,0,0,.15) 96%,transparent)}
.win-group{padding:11px 10px 4px;color:var(--o-k5);font-size:.59rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase}
.win-group:first-child{padding-top:0}
.win-item{display:flex;align-items:center;gap:10px;min-height:26px;padding:0 10px;
  border-radius:8px;color:var(--o-k4);font-size:12.5px;letter-spacing:-.01em;text-align:left;
  width:100%;transition:background-color .12s ease,color .12s ease}
.win-item svg{width:14px;height:14px;flex:none;color:var(--o-k5);transition:color .12s ease}
.win-item:hover{color:var(--o-k2);background:rgba(255,255,255,.03)}
.win-item[data-on]{color:var(--o-k1);background:#1a1a1c}
.win-item[data-on] svg{color:var(--o-violet)}
.win-dock{flex:none;display:grid;gap:8px;padding-top:12px}
.win-dock > div{display:flex;align-items:center;gap:9px;min-height:38px;padding:0 11px;
  border:.5px solid var(--o-hcomp);border-radius:11px;background:var(--o-tile)}
.win-badge{display:inline-flex;align-items:center;min-height:16px;padding:0 7px;border-radius:999px;
  border:1px solid rgba(62,207,110,.4);color:var(--o-green);font-family:var(--mono);
  font-size:.59rem;letter-spacing:.08em}
.win-dock small{color:var(--o-k5);font-size:.59rem;letter-spacing:.04em}
.win-dock b{display:block;color:var(--o-k1);font-size:.68rem;font-weight:500}
.win-dock em{display:block;color:var(--o-k5);font-size:.59rem;font-style:normal}
.win-dots-mini{display:flex;gap:3px;flex:none}
.win-dots-mini i{width:5px;height:5px;border-radius:50%;background:var(--o-hhovchip)}
.win-dots-mini i[data-set]{background:var(--o-cyan)}

/* the page area */
.win-main{display:flex;flex-direction:column;min-width:0}
.win-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  height:50px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(11,11,16,.70);
  -webkit-backdrop-filter:blur(5px) saturate(108%);backdrop-filter:blur(5px) saturate(108%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
/* no backdrop-filter support means no glass — fall back to solid, never to fog */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .win-bar{background:#0f0f16}
  .win-side{background:#0c0c0c}
  .win-head{background:#0e0e14}
}
.win-title{display:flex;align-items:baseline;gap:10px;min-width:0;flex:0 1 auto}
.win-title b{color:var(--o-k1);font-size:14px;font-weight:500;letter-spacing:-.16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.win-title span{color:var(--o-k5);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-view{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#000}
.win-view .shot{--fx:.1985;--fw:.753;position:absolute;inset:0;border:0;border-radius:0;opacity:0}
.win-view .shot[data-on]{opacity:1;animation:.62s var(--o-eo) both}
/* one arrival per page, so the tour does not read as six copies of a fade */
.win-view .shot[data-anim="fade"][data-on]{animation-name:wFade}
.win-view .shot[data-anim="wipe"][data-on]{animation-name:wWipe}
.win-view .shot[data-anim="up"][data-on]{animation-name:wUp}
.win-view .shot[data-anim="blur"][data-on]{animation-name:wBlur}
.win-view .shot[data-anim="right"][data-on]{animation-name:wRight}
.win-view .shot[data-anim="zoom"][data-on]{animation-name:wZoom}
@keyframes wFade {from{opacity:0}to{opacity:1}}
@keyframes wWipe {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes wUp   {from{opacity:0;transform:translateY(4%)}to{opacity:1;transform:none}}
@keyframes wBlur {from{opacity:0;filter:blur(13px)}to{opacity:1;filter:none}}
@keyframes wRight{from{opacity:0;transform:translateX(4%)}to{opacity:1;transform:none}}
@keyframes wZoom {from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}

/* the features on show, named. Real sections of each page, nothing invented. */
.win-tags{display:flex;align-items:center;gap:6px;margin-left:auto;margin-right:14px;
  min-width:0;overflow:hidden}
.win-tags i{display:inline-flex;align-items:center;min-height:19px;padding:0 8px;flex:none;
  border:1px solid var(--o-hcomp);border-radius:999px;color:var(--o-k4);font-family:var(--mono);
  font-size:.59rem;font-style:normal;letter-spacing:.05em;white-space:nowrap;
  animation:tagIn .42s var(--o-eo) both}
.win-tags i:nth-child(2){animation-delay:.07s}
.win-tags i:nth-child(3){animation-delay:.14s}
@keyframes tagIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.win-view .shot::after{content:none}
/* the drift: --fy is re-set per view and the transform interpolates for the whole dwell */
.win-view .plate{transition:transform var(--dwell,5s) linear}
.win-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06);z-index:3}
.win-progress i{display:block;height:100%;width:0;background:var(--o-cyan);transform-origin:left}
/* the strip — the portal's bento lattice at hero scale: 1px seams over a hairline,
   one icon tile, one label, one live piece of the product's own vocabulary. */
.hero-strip{margin:18px auto 0;max-width:1200px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--o-hcell);
  border:1px solid var(--o-hcell);border-radius:14px;overflow:hidden}
.hero-strip > button{position:relative;display:flex;width:100%;text-align:left;font:inherit;cursor:pointer;align-items:center;gap:13px;min-width:0;padding:16px 18px;
  background:var(--o-panel);transition:background-color .16s ease}
.hero-strip > button:hover{background:#0e0e10}
.hero-strip > button:hover .otile{border-color:color-mix(in srgb,var(--acc,#232326) 55%,transparent)}
/* the card for the page the window is showing right now */
.hs-card::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--o-eo)}
.hs-card[data-live]::before{transform:scaleX(1)}
.hs-card[data-live]{background:#0e0e10}
.hs-card[data-live] .otile{border-color:color-mix(in srgb,var(--acc) 60%,transparent);
  background:color-mix(in srgb,var(--acc) 9%,transparent)}
.hs-txt{display:grid;gap:2px;min-width:0;flex:1 1 auto}
.hs-txt small{color:var(--acc,var(--o-k5));font-size:.59rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.hs-txt b{color:var(--o-k1);font-size:13px;font-weight:500;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-art{flex:none;display:flex;align-items:center;gap:4px}
.hs-chip{display:inline-flex;align-items:center;min-height:17px;padding:0 6px;border-radius:999px;
  border:1px solid rgba(53,214,255,.4);color:var(--o-cyan);font-family:var(--mono);
  font-size:.59rem;font-style:normal;letter-spacing:.06em}

/* two ticks — one per confirmation the product asks for */
.hs-tick{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--acc,#35d6ff) 55%,transparent)}
.hs-tick svg{width:9px;height:9px;color:var(--acc,#35d6ff)}
/* a rising ladder — the risk modes are ordered, so the mark should be too */
.hs-bars{display:flex;align-items:flex-end;gap:3px;height:18px}
.hs-bars i{width:4px;border-radius:1.5px;background:#2a2a2e}
.hs-bars i:nth-child(1){height:7px}
.hs-bars i:nth-child(2){height:11px}
.hs-bars i:nth-child(3){height:15px}
.hs-bars i:nth-child(4){height:19px}
.hs-bars i[data-on]{background:var(--acc,#b18cff)}

.hs-node{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--o-hhovchip)}
.hs-node[data-done]{background:var(--o-green);box-shadow:none}
.hs-node[data-now]{box-shadow:inset 0 0 0 1px var(--o-cyan)}

.hero-strip.in .hs-node{animation:pop .35s var(--o-spring) both}
.hero-strip.in .hs-node:nth-child(2){animation-delay:.07s}
.hero-strip.in .hs-node:nth-child(3){animation-delay:.14s}
.hero-strip.in .hs-node:nth-child(4){animation-delay:.21s}
.hero-strip.in .hs-node:nth-child(5){animation-delay:.28s}
.hero-strip.in .hs-tick{animation:pop .4s var(--o-spring) both}
.hero-strip.in .hs-tick:nth-child(2){animation-delay:.12s}
.hero-strip.in .hs-chip{animation:pop .4s var(--o-spring) both .06s}
.hero-strip.in .hs-bars i{animation:growy .5s var(--o-eo) both;transform-origin:bottom}
.hero-strip.in .hs-bars i:nth-child(2){animation-delay:.06s}
.hero-strip.in .hs-bars i:nth-child(3){animation-delay:.12s}
.hero-strip.in .hs-bars i:nth-child(4){animation-delay:.18s}
@keyframes growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}

/* ── 10 · the gallery — a bento of cropped portal screens. Each cell is one screen,
       one short label, one arrow. Nothing loops; motion is hover and scroll only. ── */
#platform{padding:120px 0 130px}
.sec-head{max-width:640px}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center;max-width:660px}
/* one accent rule per band, so the kicker inherits the section's own colour */
.band .sec-kicker{color:var(--kicker,var(--t3))}
.sec-kicker{font-family:var(--mono);font-size:.59rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t3)}
/* Framer's own heading metrics, measured on their page: 44px / 500 / -1.76px */
.sec-head h1,
.sec-head h2{margin-top:10px;font-family:var(--display);font-size:clamp(23px,3vw,39px);
  line-height:1.12;letter-spacing:-.035em;font-weight:500}
.sec-head p{margin-top:11px;font-size:13.5px;line-height:1.6;color:var(--o-k4);max-width:52ch}
.sec-head p > span{display:block}
/* the kicker is also a <p> in .sec-head, so it has to outrank the rule above */
.sec-head .sec-kicker{margin-top:0;font-family:var(--mono);font-size:.59rem;line-height:1.4;
  letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.bento{margin-top:44px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:18px;row-gap:46px}
.tile{grid-column:span var(--sp,2);display:flex;flex-direction:column;gap:0;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--easeout),transform .6s var(--easeout);
  transition-delay:var(--d,0s)}
.tile.in{opacity:1;transform:none}
.tile .shot{height:var(--h,320px)}

a.tile:hover .pan{transform:translateY(-7px) scale(1.025)}

/* ══ 11 · THE PORTAL COMPONENT LANGUAGE ══════════════════════════════════════
   Every value below is copied verbatim from a shipped client-portal file, so the
   site and the product are literally the same components. The one rule that
   governs all of it, quoted from the code:
     "Outlined only. Nothing on this surface is a filled bright button."
     — components/client-trading-alert-center.module.css:139
   There is no filled accent button in Orion. An accent lives on the border at
   40% alpha, on the icon at full strength, and nowhere else. The label stays
   #f5f5f7. Hover lifts the wash to 8% and the border to 60%.
   Radii are a closed set: 18 / 14 / 11 / 9 / 7 / 999. Nothing between.
   Colour is never decorative: green = a positive sign or a state genuinely on,
   amber = a warning live right now, red = a real failure, cyan = the subject,
   violet = category identity with no good/bad meaning.
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  --o-panel:#0b0b0b; --o-card:#0e0e10; --o-tile:#121214; --o-fill:#161618;
  --o-hov1:#1a1a1c; --o-hov2:#1d1d1f; --o-track:#1a1a1c;
  --o-hcell:#1c1c1e; --o-hcard:#1a1a1c; --o-hcomp:#232326; --o-hsec:#262628;
  --o-hhovcard:#2a2a2e; --o-hhovchip:#3a3a40; --o-grid:#1b1b1e; --o-zero:#2a2a2e;
  --o-k1:#f5f5f7; --o-k2:#e6e6ea; --o-k3:#c9c9cd; --o-k4:#9a9a9e; --o-k5:#8a8a8f; --o-k6:#7c7c81;
  --o-cyan:#35d6ff; --o-violet:#b18cff; --o-green:#3ecf6e; --o-amber:#ffbe4a; --o-red:#ff5a52;
  --o-neutral:#6f6f74;
  --o-eo:cubic-bezier(.3,.9,.3,1);      /* the workhorse — no overshoot */
  --o-spring:cubic-bezier(.3,1.4,.4,1); /* reserved for a single landing moment */
}

/* ── outlined pill family — client-performance-center.module.css:85-93 ── */
.opill{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;
  min-height:30px;padding:0 13px;border:1px solid rgba(255,255,255,.26);border-radius:999px;
  color:var(--o-k1);background:transparent;font-size:.72rem;font-weight:500;white-space:nowrap;
  transition:background-color .12s ease,border-color .12s ease,transform .12s ease}
.opill:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.45)}
.opill:active{transform:scale(.99)}
.opill svg{width:14px;height:14px;flex:0 0 auto;color:var(--o-k4)}
.opill[disabled]{cursor:not-allowed;color:var(--o-k4);border-color:var(--o-hcomp)}
.opill[data-accent=cyan]{border-color:rgba(53,214,255,.4)}
.opill[data-accent=cyan]:hover{background:rgba(53,214,255,.08);border-color:rgba(53,214,255,.6)}
.opill[data-accent=cyan] svg{color:var(--o-cyan)}
.opill[data-accent=violet]{border-color:rgba(177,140,255,.4)}
.opill[data-accent=violet]:hover{background:rgba(177,140,255,.08);border-color:rgba(177,140,255,.6)}
.opill[data-accent=violet] svg{color:var(--o-violet)}
.opill[data-accent=green]{border-color:rgba(62,207,110,.4)}
.opill[data-accent=green]:hover{background:rgba(62,207,110,.08);border-color:rgba(62,207,110,.6)}
.opill[data-accent=green] svg{color:var(--o-green)}
.opill[data-accent=amber]{border-color:rgba(255,190,74,.4)}
.opill[data-accent=amber]:hover{background:rgba(255,190,74,.08);border-color:rgba(255,190,74,.6)}
.opill[data-accent=amber] svg{color:var(--o-amber)}
/* the only fill the portal allows on a button, and it is neutral */
.osec{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;
  min-height:30px;padding:0 13px;border:.5px solid var(--o-hsec);border-radius:999px;
  color:var(--o-k4);background:var(--o-fill);font-size:.72rem;font-weight:500;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.osec:hover:not([disabled]){background:var(--o-hov2);border-color:var(--o-hhovchip);color:var(--o-k2)}
.osec[disabled]{cursor:not-allowed;color:var(--o-k6)}
@media (max-width:700px){ .opill,
.osec{min-height:40px} }  /* height only — the portal's rule */

/* ── 30x30 icon tile, radius 9, 0.5px hairline, transparent — one shape everywhere ── */
.otile{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:9px;
  color:var(--o-cyan);background:transparent;border:.5px solid var(--o-hcomp)}
.otile svg{width:15px;height:15px}
.otile[data-accent=violet]{color:var(--o-violet)}
.otile[data-accent=green]{color:var(--o-green)}
.otile[data-accent=amber]{color:var(--o-amber)}
.otile[data-accent=muted]{color:var(--o-k4)}

/* ── status readout — dot + uppercase kicker + mono value. No pill, no border.
      client-trading-dashboard.module.css:191-199 ── */
.oread{display:inline-flex;align-items:center;gap:8px;min-width:0}
.oread i{width:6px;height:6px;flex:none;border-radius:50%;background:var(--o-k5);
  transition:background-color .15s ease}
.oread[data-tone=green] i{background:var(--o-green)}
.oread[data-tone=amber] i{background:var(--o-amber)}
.oread[data-tone=red] i{background:var(--o-red)}
.oread small{color:var(--o-k5);font-size:.59rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.oread b{color:var(--o-k1);font-family:var(--mono);font-size:.76rem;font-weight:500;
  font-variant-numeric:tabular-nums}

/* ── panel / card / tile ladder — 0b0b0b on 1px 1c1c1e r18, 0e0e10 on .5px 1a1a1c r14 ── */
.opanel{padding:22px;border:1px solid var(--o-hcell);border-radius:18px;background:var(--o-panel)}
.ocard{padding:14px 16px;border:.5px solid var(--o-hcard);border-radius:14px;background:var(--o-card)}
.okicker{color:var(--o-k5);font-size:.59rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}

/* ── the switch — client-orion-control-center.module.css:199-207. No glow on the knob. ── */
.oswitch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.oswitch input{position:absolute;width:1px;height:1px;opacity:0}
.oswitch i{position:absolute;inset:0;border:.5px solid var(--o-hcomp);border-radius:999px;
  background:var(--o-tile);transition:border-color .16s ease,background-color .16s ease}
.oswitch i b{position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;
  background:var(--o-k5);transition:transform .16s ease,background-color .16s ease}
.oswitch input:checked + i{border-color:rgba(62,207,110,.4);background:rgba(62,207,110,.1)}
.oswitch input:checked + i b{background:var(--o-green);transform:translateX(18px)}
.oswitch input:focus-visible + i{outline:1px solid rgba(53,214,255,.5);outline-offset:3px}

/* ── risk ladder — a read-only picture of the ordered enum the select controls.
      White border = draft, SAVED kicker = stored, amber inset rule = the one
      escalation the confirm row warns about. ── */
.oladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ostep{display:grid;gap:1px;align-content:center;justify-items:center;min-height:38px;
  padding:5px 6px;border:.5px solid var(--o-hcomp);border-radius:9px;background:var(--o-tile);
  text-align:center;box-shadow:inset 0 -2px 0 rgba(255,190,74,0);cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.ostep span{color:var(--o-k4);font-size:.66rem;font-weight:500;letter-spacing:-.01em}
.ostep small{color:var(--o-k6);font-size:.59rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;min-height:.7em}
.ostep[data-saved] span{color:var(--o-k1)}
.ostep[data-draft]{border-color:var(--o-k1)}
.ostep[data-draft] span{color:var(--o-k1);font-weight:600}
.ostep[data-escalation]{box-shadow:inset 0 -2px 0 var(--o-amber)}

/* ── limit bars. Grey #6f6f74 is the committed fill — never green, because a
      limit is not an achievement. A 1x12px white tick marks the saved value.
      Amber marks only a raised span. ── */
.ocells{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;height:8px}
.ocell{border:.5px solid var(--o-hcomp);border-radius:3px;background:var(--o-tile);
  transition:background-color .35s ease,border-color .35s ease}
.ocell[data-filled]{background:var(--o-neutral);border-color:var(--o-neutral)}
.ocell[data-delta]{background:rgba(255,190,74,.85);border-color:rgba(255,190,74,.4);
  animation:ocellIn .25s ease backwards}
@keyframes ocellIn{from{opacity:0;transform:scaleY(.6)}to{opacity:1;transform:scaleY(1)}}
.otrack{position:relative;height:6px;border:.5px solid var(--o-hcomp);border-radius:999px;
  background:var(--o-tile)}
.ofill{position:absolute;inset:0;border-radius:999px;background:var(--o-neutral);
  transform-origin:left;transition:transform .35s ease}
.oband{position:absolute;top:0;bottom:0;border-radius:999px;background:rgba(255,190,74,.85);
  transform-origin:left}
.otick{position:absolute;top:-3px;width:1px;height:12px;background:var(--o-k1);z-index:1}
.oscale{display:flex;justify-content:space-between}
.oscale i{color:var(--o-k6);font-size:.59rem;font-style:normal;font-family:var(--mono)}

/* ── outlined delta chip — amber on a raise, neutral outline on a tighten ── */
.ochip{display:inline-flex;align-items:center;min-height:18px;padding:0 8px;
  border:1px solid var(--o-hhovchip);border-radius:999px;background:transparent;color:var(--o-k4);
  font-size:.59rem;font-weight:600;font-family:var(--mono);white-space:nowrap;
  animation:orowIn .16s ease backwards}
.ochip[data-tone=raise]{border-color:rgba(255,190,74,.5);color:var(--o-amber)}
@keyframes orowIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* ── inline confirm row. Amber is the warning it is; it turns green only once
      this exact value has been confirmed. ── */
.oconfirm{display:flex;align-items:center;gap:9px;padding:12px 14px;min-height:44px;
  border:.5px solid rgba(255,190,74,.4);border-radius:11px;background:rgba(255,190,74,.06);
  font-size:.72rem;line-height:1.45;flex-wrap:wrap;
  transition:border-color .18s ease,background-color .18s ease}
.oconfirm > svg{width:15px;height:15px;flex:none;color:var(--o-amber)}
.oconfirm > span{flex:1 1 180px;min-width:0;color:var(--o-k2)}
.oconfirm[data-confirmed=true]{border-color:rgba(62,207,110,.35);background:rgba(62,207,110,.05)}
.oconfirm[data-confirmed=true] > svg{color:var(--o-green)}
.oconfirm[data-confirmed=true] > span{color:var(--o-k4)}

/* ── odometer — the digits ride a reel. The real string is in aria-label, so a
      screen reader and a crawler get the number, never the animation. ── */
.od{display:inline-flex;align-items:baseline;font-family:var(--mono);
  font-variant-numeric:tabular-nums;line-height:1}
.od-col{display:inline-block;overflow:hidden;height:1em;width:.6em}
.od-reel{display:block;transform:translateY(0);
  transition:transform 1.15s var(--o-eo)}
.od-reel span{display:block;height:1em;text-align:center}
.od-lit{display:inline-block}

/* ── typewriter — a caret that blinks only while the tab is visible ── */
.tw{display:inline-flex;align-items:baseline}
.tw-out{white-space:pre}
.tw::after{content:'';display:inline-block;width:1px;align-self:stretch;margin-left:2px;
  background:var(--o-cyan);animation:twcaret 1.05s steps(1,end) infinite}
@keyframes twcaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ══ 12 · #story — a scroll-driven walkthrough. The reader is the playhead, so
      it can never run while nobody is watching. Four real screens cross-fade
      inside one sticky frame; the rail on the left fills as you scroll. ══ */
#story{position:relative;padding:110px 0 0}

.scrub{position:relative;height:420vh}

.rail{list-style:none;display:grid;gap:2px}
.rail li{position:relative;padding:14px 0 14px 26px;transition:opacity .4s var(--o-eo)}
.rail li::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--o-hcell)}
.rail li i{position:absolute;left:0;top:0;width:1px;height:0;background:var(--o-cyan);
  transition:height .18s linear}
.rail b{display:block;font-size:15px;font-weight:500;letter-spacing:-.16px;color:var(--o-k5);
  transition:color .35s var(--o-eo)}
.rail span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--o-k6);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s var(--o-eo),opacity .35s var(--o-eo),margin .45s var(--o-eo)}
.rail li[data-on] b{color:var(--o-k1)}
.rail li[data-on] span{max-height:80px;opacity:1}

/* ══ 13 · #controls — the product's own control panel, running here. Every widget is
      the shipped component; the state machine is the shipped one too (a raise needs
      confirming, a tighten does not). Nothing is saved.
      Section grammar is the page's own: a centred `.sec-head.mid` at 660px, the object
      below it, then the supporting rows.

      TYPE — four steps, nothing between:
        .59rem  metadata (kickers, SAVED/STATUS, scale ends, chip, rule index, demo)
        .72rem  prose, reference values, step names, button labels, the status sentence
        .84rem  names (switch title, rule title)
        1.5rem  the live draft figure, one per limit
      INK — three levels: k1 = true right now · k4 = explains or recalls · k6 = labels.
      LINES — two: --o-hcell 1px for region edges, rgba(255,255,255,.09) for parts.
      BOXES — one. The panel is the case; everything inside is divided by rules, not by
      nested cards.
      MARKS — one vocabulary on both bars: a 1px white tick is the machine's memory of
      the saved value, a 3px white bar is your hand right now. Grey fill is how far.
      COLOUR — none at rest; every accent below is a live state. ══ */
#controls{padding:24px 0 120px}
#controls .sec-head p{margin-left:auto;margin-right:auto}
/* one line collapses four shared hairline tokens to one value, without editing the shared rule */
#ctl{--o-hcomp:rgba(255,255,255,.09);--o-hsec:rgba(255,255,255,.09);
  --o-hcard:rgba(255,255,255,.09);--o-hhovchip:rgba(255,255,255,.09)}
/* the panel carries no padding — each row does, so every rule runs edge to edge */
.ctl-panel{max-width:1000px;margin:clamp(30px,3.4vw,46px) auto 0;padding:0;overflow:hidden;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.ctl-panel > *{grid-column:1/-1;padding:16px 22px;border-top:1px solid var(--o-hcell)}
.ctl-panel > :first-child{border-top:0}
.ctl-panel > .ctl-num{grid-column:auto}                  /* the two limits pair */
.ctl-panel > .ctl-num + .ctl-num{border-left:1px solid var(--o-hcell)}
#ctl > #confirmSlot:empty{display:none}                  /* no stray rule when idle */
#ctl > #confirmSlot{padding:0;border-top-color:rgba(255,190,74,.35)}
#ctl > #confirmSlot:has([data-confirmed=true]){border-top-color:rgba(62,207,110,.3)}
.ctl-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:nowrap}
.ctl-lab{display:grid;gap:3px;min-width:0}
.ctl-lab strong{color:var(--o-k1);font-size:.84rem;font-weight:500;letter-spacing:-.01em}
.ctl-lab em{color:var(--o-k4);font-size:.72rem;font-style:normal;line-height:1.45}
.ctl-field{display:grid;gap:9px;align-content:start}
.ctl-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.ctl-saved{display:inline-flex;align-items:baseline;gap:6px;transition:opacity .2s ease}
.ctl-saved small{color:var(--o-k6);font-size:.59rem;letter-spacing:.08em;text-transform:uppercase}
.ctl-saved strong{color:var(--o-k4);font-size:.72rem;font-weight:500;font-family:var(--mono)}
#ctl #lossSaved::before{content:"$";color:var(--o-k6)}   /* the unit rides the recall, never the live figure */
.ctl-figure{margin:0;display:flex;align-items:baseline;gap:9px;min-width:0;min-height:28px}
.ctl-val{color:var(--o-k1);font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
#ctl .okicker,#ctl .oread small{color:var(--o-k6);transition:color .2s ease}
/* a field the hand has moved says so in its own label, before you look for a chip */
#ctl .ctl-field:has(.ochip) .okicker,
#ctl .ctl-mode:has(.ostep[data-draft]:not([data-saved])) .okicker{color:var(--o-k3)}
/* …and the saved recall goes quiet while it has nothing to recall */
#ctl .ctl-mode:not(:has(.ostep[data-draft]:not([data-saved]))) .ctl-saved,
#ctl .ctl-num:not(:has(.ochip)) .ctl-saved{opacity:0}
#ctl .ostep small{display:none}          /* the field head already names the saved mode */
#ctl .ostep{min-height:34px;font-size:.72rem;
  transition:border-color .15s var(--o-eo),background-color .15s var(--o-eo)}
#ctl .ostep span{font-size:.72rem;font-weight:500}
#ctl .ostep[data-draft] span{font-weight:600}
#ctl .ostep:hover:not([data-draft]){background:var(--o-fill);border-color:var(--o-hhovchip)}
/* BARS — one instrument. Both 6px, radius 999, the same 7% ground, the same grey fill.
   The count bar is notched into ten by 1px of panel black, because ten is countable. */
.ctl-slider{position:relative;height:26px;display:grid;align-content:center}
#ctl .ocells,#ctl .otrack{height:6px;border:0;border-radius:999px;background:rgba(255,255,255,.07)}
#ctl .ocells{gap:1px;background:var(--o-panel)}          /* the gaps are the notches */
#ctl .ocell{border:0;border-radius:0;background:rgba(255,255,255,.07)}
#ctl .ocell:first-child{border-radius:999px 0 0 999px}
#ctl .ocell:last-child{border-radius:0 999px 999px 0}
#ctl .ocell[data-filled]{background:var(--o-neutral)}
#ctl .ocell[data-delta]{background:rgba(255,190,74,.85)}
#ctl .ofill{transition:transform .12s linear}   /* the shipped .35s ease trails a dragged thumb */
/* 1px white = the saved value the machine still holds */
#ctl .otick{width:1px;height:16px;transition:left .25s var(--o-eo),opacity .2s ease}
#ctl .otrack .otick{top:-5px}
.ctl-slider > .otick{top:50%;margin-top:-8px;z-index:1}
#ctl .ctl-num:not(:has(.ochip)) .otick{opacity:0}    /* nothing to remember yet */
/* 3px white = your hand. On the money bar the native thumb IS that mark and it lands on
   the fill edge. On the count bar the thumb lands at (v-min)/(max-min), up to one whole
   cell short of the notch it just filled, so it is hidden and the mark is drawn on the
   last filled cell instead — same mark, right place. */
#ctl .ocell[data-filled]:not(:has(+ .ocell[data-filled]))::after{content:'';position:absolute;
  right:0;top:50%;margin-top:-8px;width:3px;height:16px;border-radius:1px;background:var(--o-k1)}
#ctl .ocell{position:relative}
#tradesRange::-webkit-slider-thumb{opacity:0}
#tradesRange::-moz-range-thumb{opacity:0}
.ctl-range{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;
  margin:0;background:transparent;cursor:pointer;z-index:2}
.ctl-range::-webkit-slider-runnable-track{height:100%;background:transparent;border:0}
.ctl-range::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:3px;height:16px;
  margin-top:5px;border-radius:1px;background:var(--o-k1);border:0;cursor:grab}
.ctl-range:active::-webkit-slider-thumb{cursor:grabbing}
.ctl-range::-moz-range-track{height:100%;background:transparent;border:0}
.ctl-range::-moz-range-thumb{box-sizing:border-box;width:3px;height:16px;border-radius:1px;
  background:var(--o-k1);border:0}
.oscale{margin-top:-2px}
/* BUTTONS — rank by mass and ink, never by fill. Save is taller, lined, k1; Reset is
   shorter, unlined until touched, k6. The shared .opill:hover lights a disabled button,
   so the disabled state is pinned here too. */
.ctl-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#ctl .ctl-save{min-height:36px;padding:0 20px;border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.05);
  transition:color .16s ease,border-color .16s ease,background-color .12s ease}
#ctl .ctl-save:hover:not([disabled]){background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.42)}
#ctl .ctl-save[disabled],#ctl .ctl-save[disabled]:hover{color:var(--o-k6);background:transparent;
  border-color:rgba(255,255,255,.09)}
#ctl .ctl-reset{min-height:28px;padding:0 12px;background:transparent;color:var(--o-k6);
  border-color:transparent}                 /* so a disabled Save and Reset never read alike */
#ctl .ctl-reset:hover{background:rgba(255,255,255,.04);color:var(--o-k4);
  border-color:rgba(255,255,255,.09)}
#ctl .ctl-state{margin-left:auto;font-size:.72rem}
/* the status line is a sentence, so it is set like one — the mono is for values */
#ctl .ctl-state b{font-family:var(--nav-font);font-size:.72rem;font-weight:500;letter-spacing:-.01em}
#ctl .oconfirm{border:0;border-radius:0;padding:14px 22px;animation:orowIn .2s var(--o-eo) backwards}
#ctl .oconfirm > span{color:var(--o-k1)}
#ctl .oconfirm[data-confirmed=true] .opill{border-color:rgba(62,207,110,.35);color:var(--o-k4)}
/* the three rules — ruled rows, numbered, no tiles and no standing colour */
.ctl-list{list-style:none;max-width:1000px;margin:clamp(26px,3vw,38px) auto 0;padding:0;
  display:grid;gap:20px 28px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ctl-list li{display:flex;gap:11px;align-items:baseline;
  padding-top:13px;border-top:1px solid var(--o-hcell)}
.ctl-list em{flex:none;font-family:var(--mono);font-size:.59rem;font-style:normal;
  letter-spacing:.08em;color:var(--o-k6);line-height:1.5}
.ctl-list p{margin:0}
.ctl-list p b{display:block;font-size:.84rem;font-weight:500;color:var(--o-k1);letter-spacing:-.01em}
.ctl-list p span{display:block;margin-top:4px;font-size:.72rem;line-height:1.55;color:var(--o-k4)}
.ctl-note{margin-top:28px;text-align:center;font-family:var(--mono);font-size:.59rem;
  line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--o-k6)}
@media (max-width:900px){
  .ctl-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctl-panel{grid-template-columns:minmax(0,1fr)}        /* the pair unstacks before it crowds */
  .ctl-panel > .ctl-num + .ctl-num{border-left:0}
}
@media (max-width:620px){
  .ctl-list{grid-template-columns:minmax(0,1fr);gap:16px}
  .ctl-panel > *{padding:15px 17px}
  #ctl .oconfirm{padding:13px 17px}
  #ctl .ctl-state{margin-left:0;width:100%}   /* the readout aligns with the buttons, not the edge */
}
@media (max-width:500px){#ctl .oladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 44px to a thumb. The bars stay 6px and the switch 42x24 — only the reach grows */
@media (pointer:coarse){
  .ctl-slider{height:44px}
  .ctl-range::-webkit-slider-thumb{width:4px;height:20px;margin-top:12px}
  .ctl-range::-moz-range-thumb{width:4px;height:20px}
  #ctl .ostep,#ctl .opill,#ctl .osec{min-height:44px}
  #ctl .oswitch::after{content:'';position:absolute;inset:-10px}
}
@media (prefers-reduced-motion:reduce){
  #controls *,#controls *::before,#controls *::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}

/* The news calendar runs off a hand-refreshed snapshot (calendar.json). When that snapshot
   has no event left in the future the rows cannot be drawn, so the card closes the gap and
   says so in one line rather than showing a headline over nothing. */
[data-cal-empty] .sx-list{display:none}
[data-cal-empty] .nx-body::before{content:'This week\2019s list is not loaded here. Any economic calendar shows the same red events.';
  display:block;margin-bottom:14px;color:var(--o-k5);font-size:.76rem;line-height:1.55}
[data-cal-empty] .sx-gweek{display:none}

/* ── pricing.html's closing blocks. The markup shipped without these rules, so the info
      icon had no size and painted 350px wide on a phone and 1136px on desktop, and the
      four buying steps ran together as one line of text. Same grammar as #controls'
      rules row: a mono index over a hairline, name, then the line underneath. ── */
.plan-truth{max-width:1180px;margin:clamp(30px,3.6vw,44px) auto 0;padding-top:20px;
  border-top:1px solid var(--o-hcell);display:flex;align-items:flex-start;gap:12px}
.plan-truth svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--o-k5)}
.plan-truth p{margin:0;max-width:78ch;color:var(--o-k4);font-size:13px;line-height:1.62}
.plan-truth strong{color:var(--o-k1);font-weight:500}
.plan-steps{max-width:1180px;margin:clamp(24px,2.8vw,34px) auto 0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 26px}
.plan-step{display:grid;gap:4px;align-content:start;
  padding-top:13px;border-top:1px solid var(--o-hcell)}
.plan-step i{font-family:var(--mono);font-size:.59rem;font-style:normal;
  letter-spacing:.08em;color:var(--o-k6);line-height:1.5}
.plan-step b{color:var(--o-k1);font-size:13px;font-weight:500;letter-spacing:-.01em}
.plan-step span{color:var(--o-k4);font-size:12px;line-height:1.5}
@media (max-width:820px){.plan-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:500px){.plan-steps{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ══ 14 · #howto — three vignettes on one shared 6s timeline, the portal's own
      client-setup-demos vocabulary: anticipation, a spring landing, a settle,
      then a release in the last 8% so the wrap is invisible. Base styles are
      each scene's FINAL frame, so a stopped page still reads. ══ */
#howto{padding:24px 0 130px}

@keyframes vgDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}
@keyframes vgPop{0%,46%{opacity:0;transform:scale(.5);animation-timing-function:cubic-bezier(.3,1.4,.4,1)}
  54%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vgLand{0%,46%{opacity:0;transform:translateY(5px);animation-timing-function:cubic-bezier(.3,1.4,.4,1)}
  54%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vgFill{0%,10%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
@keyframes vgType{0%{transform:scaleX(1);animation-timing-function:steps(14,end)}44%,100%{transform:scaleX(0)}}
@keyframes vgCaret{0%{transform:none;animation-timing-function:steps(14,end)}44%,100%{transform:translateX(112px)}}
@keyframes vgCaretBlink{0%,100%{opacity:1}8%{opacity:0}16%{opacity:1}24%{opacity:0}32%{opacity:1}
  40%{opacity:0}46%{opacity:0}}
@keyframes vgShackle{0%,40%{transform:translateY(-4px)}44%{transform:translateY(-5.5px)}
  49%{transform:translateY(.8px)}53%,100%{transform:none}}
@keyframes vgDraw{0%{stroke-dashoffset:520}38%,100%{stroke-dashoffset:0}}
@keyframes vgTickA{0%,12%{transform:scaleY(1)}18%{transform:scaleY(1.14)}26%{transform:scaleY(1)}
  58%{transform:scaleY(1)}64%{transform:scaleY(.9)}72%,100%{transform:scaleY(1)}}
@keyframes vgTickB{0%,26%{transform:scaleY(1)}33%{transform:scaleY(1.1)}40%{transform:scaleY(1)}
  70%{transform:scaleY(1)}76%{transform:scaleY(.93)}84%,100%{transform:scaleY(1)}}
@keyframes vgTickC{0%,5%{transform:scaleY(1)}11%{transform:scaleY(.92)}18%{transform:scaleY(1)}
  44%{transform:scaleY(1)}50%{transform:scaleY(1.12)}58%,100%{transform:scaleY(1)}}
@keyframes vgPulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}

/* ══ 15 · #proof — the equity chart draws itself once, then stops. Axis carries
      dates only and no money value, and the caption says what it is: a shape,
      not a result. Below it, the numbers slide in — every one of them a fact
      you can check inside the product. ══ */
#proof{padding:24px 0 130px}

/* ── the demo cursor. It sits above the page image but below the chrome, so it
      can point at things inside a screenshot without covering the address bar. ── */
.dcur{position:absolute;left:0;top:0;z-index:6;width:22px;height:22px;pointer-events:none;
  margin:-2px 0 0 -2px;will-change:transform;
  transition:transform .5s cubic-bezier(.33,.02,.2,1),opacity .3s ease}
.dcur svg{width:22px;height:22px;display:block;
  fill:#fff;stroke:rgba(0,0,0,.55);stroke-width:1.1;stroke-linejoin:round;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));
  transition:transform .14s var(--o-eo);transform-origin:4px 3px}
.dcur.down svg{transform:scale(.82)}
.dcur.gone{opacity:0}
.dcur-ring{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;
  border:1.5px solid rgba(0,229,255,.9);opacity:0;transform:scale(.3)}
.dcur-ring.go{animation:dring .5s var(--o-eo)}
@keyframes dring{
  0%{opacity:.95;transform:scale(.3)}
  100%{opacity:0;transform:scale(2.6)}}

/* the ring that marks what was just clicked */
.dhot{position:absolute;z-index:5;border-radius:9px;pointer-events:none;
  box-shadow:0 0 0 1.5px rgba(0,229,255,.85),0 0 18px rgba(0,229,255,.35);
  opacity:0;transition:opacity .2s ease}
.dhot.on{opacity:1}

/* a field being typed into */
.dtyping::after{content:'';display:inline-block;width:1px;height:1em;margin-left:1px;
  vertical-align:-.14em;background:var(--o-cyan);animation:twcaret 1s steps(1,end) infinite}

/* the caption that says what the client is doing */
.demo-bar{max-width:1200px;margin:14px auto 0;min-height:36px;display:flex;
  align-items:center;justify-content:center}
.dstep{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;
  min-height:34px;padding:0 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);background:rgba(10,10,15,.72);
  color:var(--o-k1);font-size:13px;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(4px);
  transition:opacity .3s ease,transform .35s var(--o-eo)}
.dstep.on{transform:none}
.dstep.on{opacity:1}
.dstep i{width:6px;height:6px;flex:none;border-radius:50%;background:var(--o-cyan)}
.dstep b{flex:none}
/* the caret only shows while the line is still being typed */
.dstep span{position:relative}
.dstep[data-typing] span::after{content:'';position:absolute;top:.12em;bottom:.12em;right:-3px;
  width:1px;background:var(--o-cyan);animation:twcaret .9s steps(1,end) infinite}
.dstep b{font-weight:500}
.dstep span{color:var(--o-k4)}

/* ══ #plans — the real editions, at the real prices, with the sentence the
      checkout page actually shows a client. Nothing here is invented: the three
      amounts are the only three the database will accept, and the four steps are
      the four the purchase-request card really tracks. ══ */
#plans{padding:24px 0 120px}
/* ── plan cards — the dot-matrix treatment. Each edition owns a hue that paints
      five things: the dot field in the corner, the icon tile, the rim light on
      the top edge, the feature icons and the hover border. The dots double as
      their own dither, which is why this gradient can be strong without the
      banding that killed the earlier grey one. ── */
.plan-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:22px;
  border:1px solid var(--o-hcell);border-radius:20px;background:#0a0a0b;overflow:hidden;
  transition:border-color .25s ease,transform .25s var(--o-eo)}
.plan:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--o-hcell));transform:translateY(-2px)}
.plan[data-pick]{border-color:color-mix(in srgb,var(--acc) 26%,transparent)}

/* the rim light along the top edge, brightest in the middle */
.plan-edge{position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 85%,transparent),transparent)}

/* the dot field: a dot grid masked so it burns out toward the top-right corner */
.plan-dots{position:absolute;top:0;right:0;width:56%;height:40%;pointer-events:none;
  color:var(--acc);transition:color .38s ease}
.plan:hover .plan-dots{color:var(--hue,var(--acc))}
.plan-dots i{position:absolute;inset:0;background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Crect width='2' height='2' fill='%23000' shape-rendering='crispEdges'/%3E%3C/svg%3E"),radial-gradient(96% 108% at 100% 0%,#000 2%,rgba(0,0,0,.55) 28%,transparent 64%);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Crect width='2' height='2' fill='%23000' shape-rendering='crispEdges'/%3E%3C/svg%3E"),radial-gradient(96% 108% at 100% 0%,#000 2%,rgba(0,0,0,.55) 28%,transparent 64%);
  -webkit-mask-size:11px 11px,100% 100%;mask-size:11px 11px,100% 100%;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* the coloured burst rides on its own layer so it can fade in — a background
   image cannot be transitioned, but its opacity can */
.plan-dots em{position:absolute;inset:-34% -34% 0 0;opacity:.74;transition:opacity .38s ease;
  background:
    radial-gradient(34% 38% at 100% 0%,color-mix(in srgb,var(--hue,var(--acc)) 72%,transparent),transparent 70%),
    radial-gradient(60% 66% at 100% 0%,color-mix(in srgb,var(--hue,var(--acc)) 30%,transparent),transparent 74%);
  filter:blur(11px)}
.plan:hover .plan-dots em,
.plan[data-pick] .plan-dots em{opacity:1}
.plan-dots u{display:none}
.plan[data-pick] .plan-dots u{opacity:0}
.plan-dots s{position:absolute;inset:0;opacity:0;background-color:currentColor;
  transition:opacity .28s ease;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Crect width='4' height='4' fill='%23000' shape-rendering='crispEdges'/%3E%3C/svg%3E"),radial-gradient(64px 64px at var(--mx,50%) var(--my,0%),#000 8%,rgba(0,0,0,.45) 48%,transparent 74%),radial-gradient(96% 108% at 100% 0%,#000 2%,rgba(0,0,0,.55) 28%,transparent 64%);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Crect width='4' height='4' fill='%23000' shape-rendering='crispEdges'/%3E%3C/svg%3E"),radial-gradient(64px 64px at var(--mx,50%) var(--my,0%),#000 8%,rgba(0,0,0,.45) 48%,transparent 74%),radial-gradient(96% 108% at 100% 0%,#000 2%,rgba(0,0,0,.55) 28%,transparent 64%);
  -webkit-mask-size:11px 11px,100% 100%,100% 100%;mask-size:11px 11px,100% 100%,100% 100%;
  -webkit-mask-repeat:repeat,no-repeat,no-repeat;mask-repeat:repeat,no-repeat,no-repeat;
  -webkit-mask-composite:source-in,source-in;mask-composite:intersect,intersect}
.plan:hover .plan-dots s{opacity:1}

/* the icon tile, solid in the plan's colour, on a recessed plate */
.plan-ico{position:relative;z-index:1;width:max-content}
.plan-ico > span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:color-mix(in srgb,var(--acc) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 40%,transparent)}
.plan-ico svg{width:18px;height:18px;color:var(--acc)}

.plan-name{position:relative;z-index:1;margin-top:20px;color:var(--o-k1);font-family:var(--nav-font);
  font-size:19px;font-weight:600;letter-spacing:-.025em}
.plan-price{position:relative;z-index:1;display:flex;align-items:baseline;gap:4px;margin-top:14px}
.plan-price b{color:#fff;font-family:var(--nav-font);font-size:34px;font-weight:500;
  letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.plan-price span{color:var(--o-k5);font-family:var(--nav-font);font-size:14px;letter-spacing:-.02em}
/* the struck full price, only inserted by the promo script while the offer runs.
   Same treatment as the home page banner's .pbx-note u, at the tile's scale. */
.plan-price .plan-was{align-self:baseline;color:var(--o-k6);font-family:var(--nav-font);
  font-size:17px;font-weight:500;letter-spacing:-.03em;text-decoration:line-through}
.plan-promo{margin-top:6px;color:var(--acc);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.02em}
.plan-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;
  color:var(--o-k5);font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
/* the saving in the plan's own colour — it is the number that decides the sale */
.plan-meta b{position:relative;padding-left:9px;color:var(--acc);font-weight:500}
.plan-meta b::before{content:'';position:absolute;left:0;top:50%;width:3px;height:3px;
  margin-top:-1.5px;border-radius:50%;background:color-mix(in srgb,var(--acc) 55%,transparent)}
.plan-note{margin-top:12px;color:var(--o-k4);font-size:12.5px;line-height:1.5;min-height:38px}

.plan-cta{margin-top:15px}
.plan-cta > a{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;
  border-radius:12px;font-size:14px;font-weight:500;letter-spacing:-.01em;
  color:var(--o-k1);background:#141416;border:1px solid #232326;
  transition:background-color .18s ease,border-color .18s ease}
.plan-cta > a:hover{background:#1b1b1f;border-color:#33333a}
.plan[data-pick] .plan-cta > a{color:#08080a;background:#fff;border-color:#fff}
.plan[data-pick] .plan-cta > a:hover{background:#e9e9ec}

/* the divider label, rule on each side */
.plan-div{display:flex;align-items:center;gap:12px;margin-top:17px}
.plan-div::before,
.plan-div::after{content:'';flex:1;height:1px;background:var(--o-hcard)}
.plan-div span{color:var(--o-k5);font-family:var(--mono);font-size:.59rem;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap}

/* one icon per row, the same icon in the same row of every card, so the eye can
   compare across the three columns instead of reading each one separately */
.plan-feat{list-style:none;display:grid;gap:9px;margin-top:13px}
.plan-feat li{display:flex;align-items:flex-start;gap:11px;min-height:20px}
.plan-feat svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--o-k5)}
.plan-feat span{color:var(--o-k4);font-size:12.5px;line-height:1.45}
.plan-badge{position:absolute;top:22px;right:22px;z-index:1;display:inline-flex;align-items:center;
  min-height:22px;padding:0 10px;border-radius:999px;background:rgba(8,8,10,.72);
  border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);color:var(--acc);
  font-family:var(--mono);font-size:.59rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* the trust strip — four things the product enforces, each shown as a credential
   rather than a sentence: its own colour, a tinted tile, and a line naming what
   holds it up. The risk disclosure that used to sit here now lives in the footer. */
.trust{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.trust > div{position:relative;display:flex;flex-direction:column;gap:9px;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--o-eo) var(--d,0s),transform .5s var(--o-eo) var(--d,0s)}
.trust.in > div{opacity:1;transform:none}
/* bare glyph, no tile — the box was reading as another button */
.trust .otile{width:18px;height:18px;border:0;border-radius:0;background:none;color:var(--acc)}
.trust .otile svg{width:18px;height:18px}
.trust-tx{display:grid;gap:5px;min-width:0}
.trust-tx b{color:var(--o-k1);font-size:12.5px;font-weight:500;letter-spacing:-.01em;line-height:1.35}
.trust-tx em{color:var(--o-k4);font-size:11.5px;font-style:normal;line-height:1.45}
/* what holds the promise up — the reason a buyer can believe the line above it */
.trust-tag{display:inline-flex;align-items:center;gap:5px;margin-top:1px;color:var(--acc);
  font-family:var(--mono);font-size:9.5px;font-style:normal;letter-spacing:.11em;
  text-transform:uppercase}
.trust-tag svg{width:11px;height:11px;flex:none}
/* the tag is a fixed number of monospace cells, so scrambling its characters
   never moves the layout. The scramble itself lives in the page script. */
.trust-tag u{flex:none;display:inline-block;overflow:hidden;white-space:nowrap;
  text-decoration:none;width:calc(var(--n) * (1ch + .11em))}

/* the questions a buyer actually has at the moment of choosing. Closed, each is
   a plain pill: one border weight, one type size, no colour anywhere. Clicking
   rounds it down into a panel and the answer comes in underneath. */
.qa{list-style:none;margin-top:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;align-items:start}
.qa li{position:relative;border-radius:999px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:transparent;
  opacity:0;transform:translateY(10px);
  transition:border-color .22s ease,background-color .22s ease,border-radius .3s var(--o-eo),
    opacity .5s var(--o-eo) calc(var(--i) * .07s),transform .5s var(--o-eo) calc(var(--i) * .07s)}
.qa.in li{opacity:1;transform:none}
.qa li:hover{border-color:rgba(255,255,255,.26)}
.qa-head:hover .qa-q,
.qa li[data-open] .qa-q{color:rgba(255,255,255,.94)}
.qa li[data-open]{border-radius:16px;border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.028)}

.qa-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
  width:100%;min-height:46px;padding:11px 17px;border:0;background:none;text-align:left;
  cursor:pointer;font:inherit;color:inherit}
.qa-cv{width:13px;height:13px;flex:none;color:rgba(255,255,255,.45);
  transition:transform .3s var(--o-eo),color .2s ease}
.qa-head:hover .qa-cv{color:rgba(255,255,255,.8)}
.qa li[data-open] .qa-cv{transform:rotate(180deg);color:rgba(255,255,255,.8)}

/* 0fr to 1fr lets the browser work the open height out for itself */
.qa-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--o-eo)}
.qa li[data-open] .qa-more{grid-template-rows:1fr}
.qa-more > div{overflow:hidden;display:grid;gap:9px;padding:0 17px}
.qa li[data-open] .qa-more > div{padding-bottom:17px}

/* one face, one scale, three levels of grey */
.qa-q{display:block;color:rgba(255,255,255,.76);font-family:var(--font);font-size:13px;font-weight:450;
  letter-spacing:-.008em;line-height:1.3;text-wrap:balance}
.qa b{display:block;color:rgba(255,255,255,.88);font-family:var(--font);font-size:13px;font-weight:500;
  letter-spacing:-.008em;line-height:1.35}
.qa em{color:rgba(255,255,255,.46);font-family:var(--font);font-size:12px;font-style:normal;
  line-height:1.5}

/* the small objects, in the same greys as the text */
.qa-toggle{justify-self:start;display:inline-flex;padding:2px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12)}
.qa-toggle i{padding:4px 11px;border-radius:999px;font-family:var(--font);font-size:10.5px;
  font-style:normal;color:rgba(255,255,255,.5)}
.qa-toggle i[data-on]{color:#0a0a0a;background:rgba(255,255,255,.88)}
.qa-terms{justify-self:start;display:flex;gap:6px}
.qa-terms i{padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  font-family:var(--font);font-size:10.5px;font-style:normal;color:rgba(255,255,255,.5)}
.qa-terms i[data-inf]{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.86);font-size:13px;
  line-height:.85;padding:3px 12px 6px}
.qa-stamp{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:999px;border:1px dashed rgba(255,255,255,.24);color:rgba(255,255,255,.64);
  font-family:var(--font);font-size:10.5px}
.qa-stamp svg{width:12px;height:12px}
.qa-list{display:grid;gap:6px}
.qa-list i{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.56);
  font-family:var(--font);font-size:11.5px;font-style:normal}
.qa-list svg{width:13px;height:13px;color:rgba(255,255,255,.4)}

@media (max-width:900px){.qa{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.qa{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.qa-more,
.qa li{transition:none}}

/* ── 16 · next-section spacer + footer ──
   The footer is the site map in Framer's measured column grammar. The brand is the SIXTH
   cell, not a special case, so six cells tile 6-up, 3-up and 2-up with no empty cell at any
   width. 14px white labels over 14px .6 links on a 27px pitch — the menu laid flat. One
   hairline opens the block, one closes it. Pure black, no wash, no accent, no script. ── */
#next{padding:130px 0;border-top:1px solid rgba(255,255,255,.05)}
#next p{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t3);text-align:center}
footer{background:#000;padding:28px 0 40px;font-family:var(--nav-font);color:var(--nav-ink)}
/* login and signup keep the old one-line footer, and none of the rules below */
footer>p:only-child{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  color:var(--t3);text-align:center}
/* no rule above the map: the site separates its sections with space, never with a line, and
   Framer's own footer has no top border either (v369, owner's call — the same call as the
   scrolled nav bar at v366). The 56px carries the joint on its own. */
footer:has(.fo-grid){padding:56px 0 48px}
.fo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,max-content));
  justify-content:space-between;row-gap:40px;column-gap:20px;align-items:start}
.fo-id .brand{width:max-content;margin-top:-8.5px;padding:0}  /* hit box = the mark, not the cell */
.fo-tag,.fo-lab,.fo-col a{font-size:14px;line-height:27px;letter-spacing:-.14px}
.fo-tag{margin-top:1px}   /* the brand track is the only one that may shrink, so the hero's line
   stays whole while there is room (one line to 1200) and wraps at its middle dot below that */
.fo-lab{margin-bottom:9px;color:#fff}   /* 36px label to first link against the 27px in-column pitch */
.fo-risk{margin-top:14px;max-width:27ch;font-size:12px;line-height:20px}   /* breaks after "Nothing", never on "is a" */
.fo-col ul{list-style:none}
.fo-col a{display:block;color:var(--nav-ink);transition:color .12s ease}
.fo-col a:hover,.fo-col a:focus-visible,.fo-col a[aria-current]{color:#fff}
.fo-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
  font-size:12px;line-height:20px}
/* six cells, so every row fills: 3-up, then 2-up. Nothing spans, nothing is hidden. */
@media (max-width:1140px){.fo-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px;column-gap:28px}}
@media (max-width:620px){
  .fo-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px;column-gap:20px}
  .fo-col a{overflow-wrap:anywhere}   /* 165px columns at 390: the address breaks at its <wbr>, never the page */
}
@media (pointer:coarse){.fo-col a{padding:8.5px 0}}   /* 27 + 17 = 44px rows */

/* ── 17 · motion — hero entrance plays once on load. Tiles reveal on scroll, once. ── */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes lift{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:scale(.985) translateY(16px)}to{opacity:1;transform:none}}
h1 .hl{animation:rise .5s var(--easeout) both;animation-delay:var(--d,0s)}
.hero-side{animation:lift .65s var(--easeout) both .40s}
.win-wrap{animation:settle 1s var(--easeout) both .52s}
.hero-strip{animation:lift .7s var(--easeout) both .74s}

/* ── 18 · responsive ── */
@media (max-width:1264px){          /* below the 1200 cap the margin stays proportional */
  .wrap,
.nav-in{padding-left:5vw;padding-right:5vw}
}
@media (max-width:980px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tile{grid-column:span var(--sp-m,2)}
  .hero-top{grid-template-columns:1fr;align-items:start;gap:22px}
  .hero-side{justify-self:start}
  .win-body{grid-template-columns:206px minmax(0,1fr);height:min(54vh,440px)}
  .hero-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  
  
  
  
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .nav-menu,
.nav-cta a{display:none}
  #burger{display:block}
  #hero{padding-top:126px}
  h1{font-size:clamp(30px,7.6vw,50px)}
  .sec-head h1,
  .sec-head h2{font-size:clamp(24px,6.2vw,36px)}
}
@media (max-width:600px){
  .bento{grid-template-columns:1fr;row-gap:34px}
  .tile{grid-column:1/-1}
  .tile .shot{height:230px}
  .hero-ctas .pill{flex:1 1 100%}
  /* the rail is the product's, not the page's — below this width it would eat
     the view it exists to explain, so the window keeps only the page */
  .win-side{display:none}
  .win-body{grid-template-columns:minmax(0,1fr);height:48vh}
  .win-view .shot{--fx:.202;--fw:.46}
  .win-addr{font-size:10px}
  .win-host{display:none}   /* the path is the useful half on a phone */
  /* a 50px head cannot hold a title, a subtitle and three tags at 333px */
  #winSub{display:none}
  
  .hero-strip{grid-template-columns:minmax(0,1fr)}
  .pill.fr{min-height:44px}       /* the 38px Framer box is desktop-only; touch gets 44 */
  #controls,
#howto,
#proof{padding-top:24px;padding-bottom:84px}
  .oladder{grid-template-columns:repeat(2,minmax(0,1fr))}   /* four across is 78px a cell at 375 */
  .ctl-val{font-size:1.3rem}
  #story{padding-top:80px}
  .scrub{height:360vh}
  
  
  .trust{grid-template-columns:1fr}
  
  /* the whole desktop window is unreadable at 335px — crop into the content column */

  #platform{padding:88px 0 96px}
}
@media (max-width:460px){
  .wrap,
.nav-in{padding-left:20px;padding-right:20px}
  .win{border-radius:14px}
  .win-rim{border-radius:16px}   /* must track the frame's radius or the ring sits proud */
  .win-body{height:44vh}
  .win-view .shot{--fw:.40}
}

/* ── 19 · reduced motion — settled frame, zero movement. ── */
@media (prefers-reduced-motion:reduce){
  h1 .hl,
.hero-side,
.win-wrap{animation:none !important}
  .win-view .plate,
.win-view .shot,
.win-progress i,
.win-item,
.hero-strip > button{transition:none !important}
  .win-view .shot[data-on],
.win-tags i{animation:none !important}
  .hero-strip,
.hero-strip .hs-node{animation:none !important}
  .tile{opacity:1 !important;transform:none !important}
  #sheet,
#sheet nav>*,
.pill,
.nav-link,
.nav-login,
.nav-signup,
.pan,
.dd-item,
.cv,
.tile,
#burger i{transition:none !important}
  .has-menu:not(.open) .dd{transition:opacity 0s linear .15s,visibility 0s linear .15s,pointer-events 0s linear .15s;transition-behavior:allow-discrete}
  html{scroll-behavior:auto}
  /* every vignette parks on its FINAL frame, so a stopped page still reads */
  .win-orbit,
.win-rim{animation:none !important}
  
  
  
  .od-reel{transition:none !important}
  .tw::after{animation:none !important}
  .rail li i,
.rail li span,
.rail b,
.ocell,
.ofill,
.oswitch i,
.oswitch i b,
.ostep,
.oconfirm,
.opill,
.osec,
.oread i{transition:none !important}
  .ochip{animation:none !important}
}

/* ── pricing page: the full comparison ────────────────────────────────────
   A real <table>, so a row reads as a row to a screen reader and the columns
   line up without a single fixed width. Every cell in <thead> sticks — the
   empty corner one included, or row labels scroll up through it. ── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#pricing{padding:132px 0 130px}

.cmp-head{margin-top:76px;display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
.cmp-head h2{margin-top:6px;color:var(--head);font-family:var(--display);
  font-size:clamp(1.45rem,2.6vw,1.9rem);font-weight:500;letter-spacing:-.02em}
.cmp-legend{display:flex;align-items:center;gap:7px;color:var(--o-k5);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.cmp-legend svg{width:13px;height:13px;color:var(--o-green)}
.cmp-legend .cmp-n{margin-left:8px}

.cmp-wrap{margin-top:20px}
.cmp{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;text-align:left}

/* the pinned header ------------------------------------------------------ */
.cmp thead th,
.cmp thead td{position:sticky;top:65px;z-index:3;background:var(--bg);
  border-bottom:1px solid var(--o-hcard)}
.cmp thead th{padding:15px 18px 14px;vertical-align:bottom;
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--acc) 55%,transparent)}
.cmp thead th.is-hi{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 10%,var(--bg)),var(--bg))}
.cmp thead b{display:block;color:var(--o-k1);font-size:15.5px;font-weight:500;letter-spacing:-.015em}
.cmp thead span{display:block;margin-top:2px;color:var(--o-k4);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.04em}
.cmp-corner{width:31%}

/* group headings ---------------------------------------------------------- */
.cmp-grp th{padding:0;border:0}
.cmp-grp span{display:block;margin:34px 0 4px;padding:0 18px 10px;color:var(--o-k5);
  font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1px solid var(--o-hcard)}
.cmp tbody tr:first-child .cmp-grp span,
.cmp tbody .cmp-grp:first-child span{margin-top:22px}

/* rows -------------------------------------------------------------------- */
.cmp tbody tr{opacity:0;transform:translateY(6px);
  transition:opacity .42s var(--o-eo) var(--d,0s),transform .42s var(--o-eo) var(--d,0s)}
.cmp tbody tr.in{opacity:1;transform:none}
.cmp tbody th[scope=row]{padding:12px 18px;color:var(--o-k2);font-size:13px;font-weight:400;
  border-top:1px solid var(--o-hcell)}
.cmp tbody td{padding:12px 18px;color:var(--o-k3);font-size:13px;border-top:1px solid var(--o-hcell)}
.cmp .cmp-grp + tr th[scope=row],
.cmp .cmp-grp + tr td{border-top:0}
.cmp tbody tr:hover th[scope=row],
.cmp tbody tr:hover td{background:#0b0b0d;color:var(--o-k1)}
.cmp td.is-best{color:var(--o-k1)}
.cmp-y{width:16px;height:16px;color:var(--o-green)}
.cmp-n{color:#3a3a41}

/* the same choice again, without scrolling back up ------------------------ */
.cmp tfoot td{padding:26px 18px 0;vertical-align:top}
.cmp-go a{display:block;padding:11px 14px;border-radius:10px;text-align:center;
  border:1px solid color-mix(in srgb,var(--acc) 36%,var(--o-hcell));
  background:color-mix(in srgb,var(--acc) 9%,transparent);
  color:color-mix(in srgb,var(--acc) 55%,#fff);font-size:13px;text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.cmp-go a:hover{background:color-mix(in srgb,var(--acc) 18%,transparent);
  border-color:color-mix(in srgb,var(--acc) 62%,transparent);color:#fff}

@media (max-width:820px){
  /* three price tiles stop fitting here, not at 600: with the promo's struck $329 on the
     row the "/ once" wraps and .plan{overflow:hidden} slices it off, 601-756px. Stacking
     early also removes the badge/icon collision that ran 601-655px. */
  .plan-grid{grid-template-columns:1fr}
  #pricing{padding:112px 0 96px}
  /* below this width the table cannot fit, so the wrapper scrolls sideways —
     which also makes it the sticky scroll-container, so the header stops pinning */
  /* position:relative so the cells' absolute .sr-only labels are clipped here too,
     not left to stretch the whole page sideways */
  .cmp-wrap{margin-left:-5vw;margin-right:-5vw;padding:0 5vw;position:relative;
    overflow-x:auto;overscroll-behavior-x:contain}
  /* the table scrolls sideways here, so the feature name has to travel with it — without
     this, scrolling across to Lifetime leaves thirty rows of bare ticks and no labels.
     tbody row headers only: .cmp-grp th spans all four columns so sticky moves it nowhere,
     and .cmp-corner sits in tfoot where it would cover a "Start with" button. */
  .cmp tbody th[scope=row]{position:sticky;left:0;z-index:2;
    background:var(--bg);border-right:1px solid var(--o-hcell)}
  .cmp thead th,
.cmp thead td{position:static}
  .cmp thead th{padding:13px 14px 12px}
  .cmp tbody th[scope=row],
.cmp tbody td{padding:11px 14px;font-size:12.5px}
  .cmp-grp span{padding:0 14px 9px}
}
@media (max-width:460px){
  /* .wrap padding is 20px here, so the bleed must be 20px too or the page scrolls sideways */
  .cmp-wrap{margin-left:-20px;margin-right:-20px;padding:0 20px}
}

/* ── home plans: a list on the left, the chosen edition on the right ───────
   The three-card grid made every plan shout at once. A list reads top to
   bottom the way a decision does, and the stage on the right shows only the
   edition being considered. ── */
.pbanner{position:relative;margin-top:36px;height:96px;border-radius:18px;overflow:hidden;
  background:transparent;border:0}   /* no box: the field floats on the page black, its own edge fades do the framing */
.pb-field{position:absolute;inset:0;width:100%;height:100%;display:block}
.pbanner-fade{position:absolute;inset:0;z-index:3;
  background:linear-gradient(90deg,#000 0,rgba(0,0,0,.06) 14%,rgba(0,0,0,.06) 86%,#000 100%),
    linear-gradient(0deg,rgba(0,0,0,.22),transparent 22%),
    linear-gradient(180deg,rgba(0,0,0,.30),transparent 18%)}

.pl{margin-top:26px;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:18px;
  align-items:stretch}
.pl-list{display:grid;gap:10px}
.pl-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;
  padding:17px 18px;border-radius:14px;text-align:left;cursor:pointer;
  border:1px solid var(--o-hcell);background:var(--o-panel);
  transition:border-color .2s ease,background-color .2s ease,transform .2s var(--o-eo)}
.pl-row:hover{border-color:#2a2a30;background:#0d0d10}
.pl-row[aria-selected=true]{border-color:color-mix(in srgb,var(--acc) 48%,var(--o-hcell));
  background:color-mix(in srgb,var(--acc) 7%,var(--o-panel))}
.pl-mark{position:relative;width:16px;height:16px;flex:none;border-radius:50%;
  border:1.5px solid var(--o-hcomp);transition:border-color .2s ease}
.pl-mark::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--acc);transform:translate(4px,4px) scale(0);
  transition:transform .24s var(--o-spring)}
.pl-row[aria-selected=true] .pl-mark{border-color:var(--acc)}
.pl-row[aria-selected=true] .pl-mark::after{transform:translate(4px,4px) scale(1)}
.pl-row-tx{flex:1;min-width:0;display:grid;gap:3px}
.pl-row-tx b{color:var(--o-k1);font-size:15px;font-weight:500;letter-spacing:-.015em}
.pl-row-tx em{color:var(--o-k5);font-family:var(--mono);font-size:10px;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase}
.pl-row-pr{text-align:right;display:grid;gap:2px}
.pl-row-pr b{color:var(--o-k1);font-size:19px;font-weight:500;letter-spacing:-.02em}
.pl-row-pr span{color:var(--o-k5);font-family:var(--mono);font-size:10px}
.pl-badge{position:absolute;top:-8px;right:14px;padding:3px 9px;border-radius:999px;
  background:#0a0a0c;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  color:color-mix(in srgb,var(--acc) 60%,#fff);font-family:var(--mono);font-size:8.5px;
  font-style:normal;letter-spacing:.13em;text-transform:uppercase}

.pl-stage{position:relative;padding:22px 22px 20px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--acc,#232326) 22%,var(--o-hcell));
  background:var(--o-panel);
  transition:border-color .3s ease,background-color .3s ease}
.pl-view[hidden]{display:none}
.pl-view{animation:pl-in .34s var(--o-eo) both}
@keyframes pl-in{from{opacity:0;transform:translateY(7px)}}
.pl-v-price{display:flex;align-items:baseline;gap:8px}
.pl-v-price b{color:var(--o-k1);font-size:38px;font-weight:500;letter-spacing:-.035em}
.pl-v-price span{color:var(--o-k4);font-size:14px}
.pl-v-meta{margin-top:5px;color:var(--o-k5);font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.pl-v-meta em{color:var(--acc);font-style:normal}
.pl-v-note{margin-top:11px;color:var(--o-k3);font-size:13.5px;line-height:1.5;max-width:46ch}

.pl-meters{margin-top:20px;padding:16px 0 4px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;border-top:1px solid var(--o-hcell)}
.pl-m-lab{color:var(--o-k5);font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase}
.pl-m-val{margin-top:6px;color:var(--o-k1);font-size:14px;letter-spacing:-.01em}
.pl-bar,
.pl-win{display:block;margin-top:10px;height:5px;border-radius:3px;background:var(--o-track);
  overflow:hidden;position:relative}
.pl-bar i{display:block;height:100%;border-radius:3px;background:var(--acc);
  transform-origin:left;animation:pl-fill .62s var(--o-eo) both .1s}
@keyframes pl-fill{from{transform:scaleX(0)}}
.pl-view[data-plan=basic] .pl-bar i{width:34%}
.pl-view[data-plan=premium] .pl-bar i{width:62%}
.pl-view[data-plan=lifetime] .pl-bar i{width:100%}
/* the slice of a 24-hour day this edition may trade */
.pl-win i{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--acc);
  left:calc(var(--w1) * 1%);width:calc((var(--w2) - var(--w1)) * 1%);
  animation:pl-win .5s var(--o-eo) both .16s}
@keyframes pl-win{from{opacity:0;transform:scaleX(.2)}}
.pl-slots{display:flex;align-items:center;gap:5px;margin-top:9px}
.pl-slots i{width:14px;height:5px;border-radius:2px;background:var(--o-track)}
.pl-slots i.on{background:var(--acc)}
.pl-slots b{color:var(--acc);font-size:12px;font-weight:400;line-height:1}

.pl-feat{list-style:none;margin-top:18px;padding-top:16px;display:grid;gap:9px;
  border-top:1px solid var(--o-hcell)}
.pl-feat li{display:flex;align-items:flex-start;gap:11px}
.pl-feat svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--o-k5)}
.pl-feat span{color:var(--o-k3);font-size:12.5px;line-height:1.45}
.pl-cta{margin-top:20px}
.pl-cta a{display:block;padding:13px 18px;border-radius:11px;text-align:center;
  border:1px solid #fff;background:#fff;color:#000;font-size:14px;font-weight:500;
  text-decoration:none;transition:background-color .2s ease,border-color .2s ease}
.pl-cta a:hover{background:#e7e7ea;border-color:#e7e7ea}

@media (max-width:900px){
  .pl{grid-template-columns:1fr;gap:14px}
  .pbanner{height:84px}
  .pl-meters{grid-template-columns:1fr;gap:14px}
}

.pl-left{display:flex;flex-direction:column;gap:14px}
.pl-hours{display:flex;justify-content:space-between;margin-top:5px}
.pl-hours b{color:var(--o-k6);font-family:var(--mono);font-size:8.5px;font-weight:400;
  letter-spacing:.06em}

/* the one strip on the page that can be dismissed: a bright link, the rest of
   the sentence in the same hue but quieter, and a close button. */
.pnote{position:relative;display:flex;align-items:center;gap:9px;margin-top:26px;
  padding:13px 46px 13px 18px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--pn) 34%,transparent);
  background:color-mix(in srgb,var(--pn) 11%,#05070f);
  --pn:#3b6cff;font-size:13.5px;line-height:1.4;
  transition:opacity .22s ease,transform .22s var(--o-eo)}
.pnote.gone{opacity:0;transform:translateY(-4px)}
.pnote a{color:#fff;font-weight:500;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:1px}
.pnote a:hover{border-bottom-color:#fff}
.pnote span{color:color-mix(in srgb,var(--pn) 62%,#cfd8ff)}
.pnote-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  border:0;background:none;cursor:pointer;
  color:color-mix(in srgb,var(--pn) 55%,#cfd8ff);
  transition:background-color .18s ease,color .18s ease}
.pnote-x:hover{background:color-mix(in srgb,var(--pn) 18%,transparent);color:#fff}
.pnote-x svg{width:15px;height:15px}
@media (max-width:620px){
  .pnote{align-items:flex-start;flex-direction:column;gap:3px;padding:13px 44px 13px 15px}
}

/* the padlock: same character field as the banner, held inside a shape */
.glyph{margin-top:40px;display:grid;place-items:center}
.glyph-cv{display:block;width:206px;height:248px}
@media (max-width:620px){.glyph-cv{width:150px;height:180px}}

/* the lock sits on a faint pool of light so it is not floating on flat black */
.glyph{position:relative}
.glyph::before{content:'';position:absolute;left:50%;top:50%;width:340px;height:300px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.055),transparent 70%)}

/* ── the auth pages ───────────────────────────────────────────────────────
   Form on the left, a full-bleed panel on the right carrying the padlock and
   one line. The panel breaks out of .wrap deliberately — it runs to the edge. */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
.auth-col{display:grid;place-items:center;padding:132px 40px 70px}
.auth-card{width:100%;max-width:392px;text-align:center}
.auth-card .sec-kicker{color:var(--o-k5);font-size:.59rem;letter-spacing:.22em}
.auth-card h1{margin-top:9px;color:var(--head);font-family:var(--display);
  font-size:clamp(24px,2.6vw,31px);font-weight:500;letter-spacing:-.03em;line-height:1.12}
.auth-sub{margin:9px auto 0;color:var(--t2);font-size:13.5px;line-height:1.5;max-width:34ch}

.auth-form{margin-top:28px;display:grid;gap:13px;text-align:left}
.af{display:grid;gap:6px}
.af > span{color:var(--o-k2);font-size:12.5px;font-weight:500;letter-spacing:-.005em}
.af-wrap{position:relative;display:block}
.af input,
.af select{width:100%;padding:11px 13px;border-radius:8px;
  border:1px solid var(--o-hcell);background:#08080a;color:var(--o-k1);
  font-family:var(--font);font-size:14px;
  transition:border-color .18s ease,background-color .18s ease}
.af-pw input{padding-right:40px}
.af input::placeholder{color:var(--o-k6)}
.af input:focus,
.af select:focus{outline:0;border-color:rgba(255,255,255,.34);background:#0c0c10}
.af select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.4 3 4 5.6 6.6 3' fill='none' stroke='%238b8b90' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:10px}
.af-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;
  place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:none;
  color:var(--o-k5);cursor:pointer;transition:color .18s ease}
.af-eye:hover,
.af-eye.on{color:var(--o-k1)}
.af-eye svg{width:16px;height:16px}

/* two names on one row: four rows reads as far less work than seven */
.af-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.auth-mini a,
.auth-alt a{color:var(--o-k1);text-decoration:none;font-weight:500}

.auth-mini a:hover,
.auth-alt a:hover{text-decoration:underline}
.auth-mini{display:flex;gap:18px;margin-top:2px;font-size:12px}
.auth-go{margin-top:8px;padding:12px 18px;border-radius:8px;border:1px solid var(--o-hcomp);
  background:#0d0d10;color:var(--o-k1);font-family:var(--font);font-size:14px;font-weight:500;
  cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.auth-go:hover{background:#16161a;border-color:#2f2f36}

/* the divider and the two providers */
.auth-or{position:relative;margin-top:24px;text-align:center}
.auth-or::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--o-hcell)}
.auth-or span{position:relative;padding:0 12px;background:var(--bg);color:var(--o-k5);font-size:12px}
.auth-social{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-social button{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 14px;border-radius:8px;border:1px solid var(--o-hcell);background:#08080a;
  color:var(--o-k1);font-family:var(--font);font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease}
.auth-social button:hover{background:#101015;border-color:var(--o-hcomp)}
.auth-social svg{width:17px;height:17px;flex:none}

.auth-alt{margin-top:22px;color:var(--o-k4);font-size:13px}
.auth-note{margin-top:20px;padding-top:15px;border-top:1px solid var(--o-hcell);
  color:var(--o-k5);font-size:11.5px;line-height:1.5;text-align:left}

/* the panel */
.auth-art{position:relative;display:block;
  padding:0;border-left:1px solid var(--o-hcell);
  background:radial-gradient(70% 52% at 50% 40%,rgba(255,255,255,.045),transparent 72%),#050507}
.auth-art .glyph{margin-top:0}
.auth-quote{position:absolute;left:46px;right:46px;bottom:56px;text-align:center;z-index:4}
.auth-quote b{display:block;color:var(--o-k1);font-family:var(--display);font-size:1.02rem;
  font-weight:500;letter-spacing:-.02em;line-height:1.35}
.auth-quote span{display:block;margin-top:9px;color:var(--o-k5);font-size:12px}

@media (max-width:520px){.af-row{grid-template-columns:1fr}}
@media (max-width:940px){
  .auth{grid-template-columns:1fr}
  .auth-col{padding:104px 24px 56px}
  .auth-brand{top:24px;left:24px}
  .auth-art{border-left:0;border-top:1px solid var(--o-hcell);padding:0;min-height:400px}
  .auth-art .glyph-cv{width:150px;height:180px}
  .auth-quote{bottom:36px}
}

/* the standing line under every auth form */
.auth-legal{margin-top:12px;color:var(--o-k6);font-size:11px;line-height:1.55;text-align:left}
.auth-legal a{color:var(--o-k4);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.16)}
.auth-legal a:hover{color:var(--o-k2);border-bottom-color:rgba(255,255,255,.4)}
/* the optional marker on a field label */
.af-opt{color:var(--o-k6);font-size:11px;font-style:normal;font-weight:400;margin-left:5px}
.af textarea{width:100%;padding:11px 13px;border-radius:8px;border:1px solid var(--o-hcell);
  background:#08080a;color:var(--o-k1);font-family:var(--font);font-size:14px;line-height:1.5;
  resize:vertical;min-height:74px;transition:border-color .18s ease,background-color .18s ease}
.af textarea::placeholder{color:var(--o-k6)}
.af textarea:focus{outline:0;border-color:rgba(255,255,255,.34);background:#0c0c10}

/* the strength bar sits under the password field */
.pw-meter{display:flex;align-items:center;gap:4px;margin-top:-4px}
.pw-meter i{flex:1;height:3px;border-radius:2px;background:var(--o-track);
  transition:background-color .2s ease}
.pw-meter b{margin-left:6px;min-width:15ch;color:var(--o-k5);font-size:11px;font-weight:400;
  text-align:right}
.pw-meter[data-score="1"] i.on{background:#ff5a52}
.pw-meter[data-score="2"] i.on{background:#ffbe4a}
.pw-meter[data-score="3"] i.on{background:#35d6ff}
.pw-meter[data-score="4"] i.on{background:#3ecf6e}
.pw-meter[data-score="1"] b{color:#ff5a52}
.pw-meter[data-score="2"] b{color:#ffbe4a}
.pw-meter[data-score="3"] b{color:#35d6ff}
.pw-meter[data-score="4"] b{color:#3ecf6e}

/* Turnstile slot — nothing is shown to a client unless Cloudflare asks for a
   challenge. Add .show to see the reserved space while designing. */
.turnstile-slot{display:none;height:65px;max-width:300px;border-radius:8px;
  border:1px dashed var(--o-hcomp);background:#08080a;
  align-items:center;justify-content:center}
.turnstile-slot.show{display:flex}
.turnstile-slot span{color:var(--o-k6);font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase}

/* the mismatch message, and the field it belongs to */
.af-err{margin-top:-4px;color:#ff5a52;font-size:11.5px;line-height:1.4}
.af input.bad{border-color:rgba(255,90,82,.55)}
.af input.bad:focus{border-color:#ff5a52}

/* on the auth pages the header is only a logo and one link, so it rides with the
   page instead of following the reader down a form */
/* no header on these pages: the mark sits inside the form column so the photo
   can run the full height of the page, corner to corner */
.auth-col{position:relative}
.auth-brand{position:absolute;top:30px;left:40px;z-index:2}

/* the country search box */
.cbo{position:relative}
.cbo-input{width:100%;padding:11px 13px;border-radius:8px;border:1px solid var(--o-hcell);
  background:#08080a;color:var(--o-k1);font-family:var(--font);font-size:14px;
  transition:border-color .18s ease,background-color .18s ease}
.cbo-input::placeholder{color:var(--o-k6)}
.cbo-input:focus{outline:0;border-color:rgba(255,255,255,.34);background:#0c0c10}
.cbo-list{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:20;
  list-style:none;max-height:216px;overflow-y:auto;padding:5px;border-radius:10px;
  border:1px solid var(--o-hcomp);background:#0c0c10;
  box-shadow:0 18px 40px rgba(0,0,0,.6)}
.cbo-list li{padding:8px 10px;border-radius:6px;color:var(--o-k2);font-size:13.5px;cursor:pointer}
.cbo-list li:hover,
.cbo-list li.on{background:rgba(255,255,255,.07);color:var(--o-k1)}

/* the comparison filter */
.cmp-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cmp-find{position:relative;display:flex;align-items:center}
.cmp-find svg{position:absolute;left:11px;width:14px;height:14px;color:var(--o-k5);pointer-events:none}
.cmp-find input{width:210px;padding:9px 12px 9px 32px;border-radius:8px;
  border:1px solid var(--o-hcell);background:#08080a;color:var(--o-k1);
  font-family:var(--font);font-size:13px;
  transition:border-color .18s ease,background-color .18s ease,width .22s var(--o-eo)}
.cmp-find input::placeholder{color:var(--o-k6)}
.cmp-find input:focus{outline:0;width:250px;border-color:rgba(255,255,255,.34);background:#0c0c10}
.cmp-none td{padding:34px 18px;color:var(--o-k4);font-size:13px;text-align:center;
  border-top:1px solid var(--o-hcell)}

/* ── the auth panel: one photograph, cropped to the column. The image is square
   and the panel is tall, so it covers and loses its sides — the subject sits
   centre, which is why that works. No scrim: measured 8.1:1 under the quote. ── */
.art-photo{position:absolute;inset:0;overflow:hidden;background:#05050a}
.art-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 46%;animation:art-drift 34s ease-in-out infinite alternate}
@keyframes art-drift{from{transform:scale(1.04)}to{transform:scale(1.11)}}
@media (prefers-reduced-motion:reduce){.art-photo img{animation:none}}

/* the facade shot is landscape and pale, so it crops from the centre and needs a
   floor under the quote — white text on cream is unreadable without one */
.art-facade img{object-position:50% 50%}
.art-facade::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.9) 2%,rgba(0,0,0,.5) 20%,transparent 42%)}

/* ── ready: how delivery works ────────────────────────────────────────────
   Two links point here promising a download (the hero pill, the software
   tile), so this says it plainly: no public file. Centred head, then the
   Software page drawn as one wide window in the #features card grammar:
   three panes (release · authenticator · package), one per step, and the
   three step captions sit under the panes they describe, so text and
   picture read as one figure. Both neighbours are splits with their weight
   on the right (#buying: text | card, #faq: head | list), so this stays
   symmetric. Cyan is the one accent: the step numbers, the tick, and the
   download button once the lock opens. No band, no glow. ── */
#ready{padding:24px 0 120px}
/* .sec-head p is a 52ch block; under a centred head it needs auto margins */
#ready .sec-head p{margin-left:auto;margin-right:auto}
.rq{max-width:1000px;margin:44px auto 0}
/* the window: the #features card, one wide */
.rw{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:#0a0a0c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden;
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--o-eo),transform .55s var(--o-eo)}
.rq.in .rw{opacity:1;transform:none}
.rw p{margin:0}
.rw-k{padding:15px 26px 14px;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--o-k6)}
.rw-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rw-p{display:grid;gap:12px;align-content:start;padding:22px 26px 24px}
.rw-p + .rw-p{border-left:1px solid rgba(255,255,255,.08)}
.rw-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--o-k6)}
/* pane 1 · the release list: the current one named, the archived ones as stubs */
.rw-rel{display:flex;align-items:center;gap:10px;min-height:22px}
.rw-rel b{font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--o-k1)}
.rw-rel s{display:block;width:58px;height:7px;border-radius:4px;background:rgba(255,255,255,.08);text-decoration:none}
.rw-rel i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--o-k6)}
.rw-on i{padding:3px 7px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:var(--o-k3)}
/* pane 2 · six masked code cells, then the gate line that gives way to Verified */
.rw-code{display:flex;gap:6px}
.rw-code i{display:grid;place-items:center;width:26px;height:32px;border:1px solid rgba(255,255,255,.14);
  border-radius:7px;background:#0e0e11;font-style:normal;font-size:15px;line-height:1;color:var(--o-k1)}
.rw-st{display:grid}
.rw-st > span{grid-area:1/1;font-size:11.5px;line-height:1.5}
.rw-wait{color:var(--o-k5);opacity:0}
.rw-ok{display:inline-flex;align-items:center;gap:6px;color:var(--o-k2)}
.rw-ok svg{width:12px;height:12px;color:var(--o-cyan)}
/* pane 3 · the package row, masked, and the button that unlocks */
.rw-pk{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--o-k2)}
.rw-pk svg{width:15px;height:15px;color:var(--o-k4);flex:none}
.rw-sha{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--o-k5)}
.rw-btn{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:8px 14px 8px 12px;
  border:1px solid transparent;border-radius:8px;background:var(--o-cyan);color:#000;
  font-size:12px;font-weight:600;letter-spacing:-.01em}
.rw-lk{display:grid;width:14px;height:14px}
.rw-lk svg{grid-area:1/1;width:14px;height:14px}
.rw-lock{opacity:0}
/* the once-through, keyed off .rq.in: every keyframe is from-only, the resting
   state is the element's own style, so a late or missing class leaves the page
   finished. Beats: code .4–.75s, gate → Verified 1.2s, lock 1.7s, button 1.85s. */
@keyframes rqDot{from{color:transparent}}
@keyframes rqIn{from{opacity:0}}
@keyframes rqOut{from{opacity:1}}
@keyframes rqLit{from{background:rgba(255,255,255,.06);color:var(--o-k5);border-color:rgba(255,255,255,.12)}}
.rq.in :is(.rw-code i,.rw-wait,.rw-ok,.rw-lock,.rw-unlock,.rw-btn){
  animation-duration:.4s;animation-timing-function:var(--o-eo);animation-fill-mode:backwards;
  animation-delay:var(--fk)}
.rw-code i{--k:0}
.rw-code i:nth-child(2){--k:1}.rw-code i:nth-child(3){--k:2}.rw-code i:nth-child(4){--k:3}
.rw-code i:nth-child(5){--k:4}.rw-code i:nth-child(6){--k:5}
.rq.in .rw-code i{animation-name:rqDot;--fk:calc(.4s + var(--k) * .07s)}
.rq.in .rw-wait{animation-name:rqOut;animation-duration:.3s;--fk:1.2s}
.rq.in .rw-ok{animation-name:rqIn;--fk:1.35s}
.rq.in .rw-lock{animation-name:rqOut;animation-duration:.25s;--fk:1.7s}
.rq.in .rw-unlock{animation-name:rqIn;--fk:1.7s}
.rq.in .rw-btn{animation-name:rqLit;animation-duration:.5s;--fk:1.85s}
/* the three steps, as captions under the panes: same columns, same left edges */
.rq-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rq-steps li{display:grid;gap:8px;align-content:start;padding:4px 26px 0;
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--o-eo) calc(.2s + var(--i) * .09s),
    transform .55s var(--o-eo) calc(.2s + var(--i) * .09s)}
.rq.in .rq-steps li{opacity:1;transform:none}
.rq-steps i{color:var(--o-cyan);font-family:var(--mono);font-size:11px;font-style:normal;
  letter-spacing:.14em}
.rq-steps b{color:var(--o-k1);font-family:var(--font);font-size:16px;font-weight:500;
  letter-spacing:-.02em;line-height:1.3}
.rq-steps em{color:var(--o-k4);font-size:13px;font-style:normal;line-height:1.6;max-width:36ch}
/* the guide's masked package row, as text */
.rq-steps code{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--o-k5)}
/* the one link out, to the guide; arrives after the captions */
.rq-cta{margin-top:32px;text-align:center;opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--o-eo) .5s,transform .55s var(--o-eo) .5s}
.rq.in + .rq-cta{opacity:1;transform:none}
.rq-cta a{display:inline-flex;align-items:center;gap:8px;color:var(--o-k2);font-size:13.5px;
  text-decoration:none;border-bottom:1px solid var(--o-hcomp);padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease}
.rq-cta a:hover{color:#fff;border-bottom-color:#fff}
.rq-cta svg{width:15px;height:15px}
@media (max-width:980px){
  .rw-p{padding:18px 20px 20px}
  .rq-steps li{padding:4px 20px 0}
}
@media (prefers-reduced-motion:reduce){.rw,.rq-steps li,.rq-cta{transition:none}.rq.in .rw *{animation:none!important}}

/* ── the FAQ ──────────────────────────────────────────────────────────────
   Split: the heading holds the left column and stays put, the questions run
   down the right as two lists, before and after you buy. A centred heading
   over a narrow list wasted half the width. The side also lists the three
   documents the answers keep pointing at, so the sticky column reads as a
   sidebar and not a head over nothing. ── */
#faq{padding:24px 0 120px}
#faq .sec-kicker{color:var(--o-violet)}   /* the chapter's one accent, the same violet as the open row */
.fq-split{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:70px;
  align-items:start}
.fq-side{position:sticky;top:118px}
.fq-side h2{margin-top:10px;color:var(--head);font-family:var(--display);
  font-size:clamp(26px,3.2vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.08}
.fq-sub{margin-top:14px;color:var(--t2);font-size:14px;line-height:1.6;max-width:32ch}
.fq-cta{margin-top:24px}
.fq-cta a{display:inline-flex;align-items:center;gap:8px;color:var(--o-k2);font-size:13.5px;
  text-decoration:none;border-bottom:1px solid var(--o-hcomp);padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease}
.fq-cta a:hover{color:#fff;border-bottom-color:#fff}
.fq-cta svg{width:15px;height:15px;transition:transform .2s var(--o-eo)}
.fq-cta a:hover svg{transform:translateX(3px)}
/* mono sub-heads: Before / After you buy over the two lists, one over the documents */
.fq-h{margin:44px 0 12px;color:var(--o-k6);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase}
.fq-lists > .fq-h{padding-left:20px}
.fq-lists > .fq-h:first-child{margin-top:0}
.fq-docs{list-style:none;display:grid;gap:9px}
.fq-docs a{color:var(--o-k3);font-size:13.5px;text-decoration:none;transition:color .2s ease}
.fq-docs a:hover{color:#fff}

.fq{list-style:none;margin:0;border-top:1px solid var(--o-hcell)}
.fq li{position:relative;border-bottom:1px solid var(--o-hcell);
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--o-eo) calc(var(--i) * .06s),
    transform .45s var(--o-eo) calc(var(--i) * .06s)}
.fq.in li{opacity:1;transform:none}
/* the open row is marked down its left edge, not filled in */
.fq li::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--o-violet);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--o-eo)}
.fq li[data-open]::before{transform:scaleY(1)}
.fq-q{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;width:100%;
  padding:22px 6px 22px 20px;border:0;background:none;cursor:pointer;text-align:left;
  font-family:var(--font);transition:padding-left .3s var(--o-eo)}
.fq li[data-open] .fq-q{padding-left:26px}
.fq-q i{color:var(--o-k6);font-family:var(--mono);font-size:10.5px;font-style:normal;
  letter-spacing:.1em;transition:color .2s ease}
.fq-q span{color:var(--o-k2);font-size:15.5px;font-weight:450;letter-spacing:-.014em;
  transition:color .18s ease}
.fq-q:hover span,
.fq li[data-open] .fq-q span{color:var(--o-k1)}
.fq li[data-open] .fq-q i{color:var(--o-violet)}
/* a plus that turns into a cross */
.fq-q s{position:relative;width:13px;height:13px;flex:none;
  transition:transform .32s var(--o-eo)}
.fq-q s::before,
.fq-q s::after{content:'';position:absolute;left:0;top:6px;width:13px;height:1.5px;
  border-radius:1px;background:var(--o-k5);transition:background-color .2s ease}
.fq-q s::after{transform:rotate(90deg)}
.fq-q:hover s::before,
.fq-q:hover s::after{background:var(--o-k2)}
.fq li[data-open] .fq-q s{transform:rotate(135deg)}
.fq li[data-open] .fq-q s::before,
.fq li[data-open] .fq-q s::after{background:var(--o-violet)}

/* closed answers are also visibility:hidden so a link inside one is not a tab stop;
   the flip waits for the collapse so nothing vanishes mid-motion */
.fq-a{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .34s var(--o-eo),visibility 0s .34s}
.fq li[data-open] .fq-a{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.fq-a > div{overflow:hidden}
.fq-a p{padding:0 40px 26px 58px;max-width:60ch;color:var(--o-k4);font-size:13.5px;
  line-height:1.7}
/* the way onward: every answer ends at the section or page that shows the thing */
.fq-go{display:flex;width:max-content;align-items:center;gap:6px;margin-top:12px;color:var(--o-k2);
  font-size:12.5px;text-decoration:none;border-bottom:1px solid var(--o-hcomp);padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease}
.fq-go:hover{color:#fff;border-bottom-color:#fff}
.fq-go svg{width:13px;height:13px;flex:none;transition:transform .2s var(--o-eo)}
.fq-go:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.fq li,.fq li::before,.fq-q,.fq-q i,.fq-q span,.fq-q s,.fq-a,.fq-go,.fq-go svg,.fq-side a,.fq-cta svg{transition:none}}
@media (max-width:980px){
  .fq-split{grid-template-columns:1fr;gap:36px}
  .fq-side{position:static}
  .fq-side .fq-h{margin-top:28px}
  .fq-docs{display:flex;flex-wrap:wrap;gap:6px 22px}
}
@media (max-width:820px){
  .rw-k{padding:13px 20px 12px}
  .rw-b{grid-template-columns:1fr}
  .rw-p + .rw-p{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .rq-steps{grid-template-columns:1fr;gap:22px;margin-top:26px}
  .rq-steps li{padding:0}
  .fq-a p{padding-left:26px;padding-right:6px}   /* flush with the open row's index (26px), not 6px shy of it */
}

/* ── product: one panel divided by hairlines, nine cards. The 1px gap over a
   line-coloured background draws every divider for free — no per-cell borders
   to switch off at the edges. Each card's UI fades out before it reaches the
   line, so nothing looks cropped. ── */
#product{padding:24px 0 120px}   /* #features above it now carries the 120px top */
.bn{margin-top:52px;display:grid;gap:1px;background:var(--o-hcell);
  border:1px solid var(--o-hcell);border-radius:20px;overflow:hidden;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-areas:
    "a b b"
    "c d e"
    "f g e"
    "h i i"}
.bn-c{grid-area:var(--ga);position:relative;display:flex;flex-direction:column;
  justify-content:space-between;min-height:246px;padding:26px 26px 22px;
  background:var(--bg);overflow:hidden;
  opacity:0;transform:translateY(10px);
  transition:background-color .26s ease,
    opacity .5s var(--o-eo) var(--d,0s),transform .5s var(--o-eo) var(--d,0s)}
.bn.in .bn-c,.bn-c.in{opacity:1;transform:none}
.bn-c[data-a=a]{--ga:a;--d:0s}      .bn-c[data-a=b]{--ga:b;--d:.05s}
.bn-c[data-a=c]{--ga:c;--d:.10s}    .bn-c[data-a=d]{--ga:d;--d:.15s}
.bn-c[data-a=e]{--ga:e;--d:.20s}    .bn-c[data-a=f]{--ga:f;--d:.25s}
.bn-c[data-a=g]{--ga:g;--d:.30s}    .bn-c[data-a=h]{--ga:h;--d:.35s}
.bn-c[data-a=i]{--ga:i;--d:.40s}

/* the UI inside each card fades before it meets the divider */
.bn-ui{position:relative;z-index:1;display:grid;gap:9px;align-content:start;
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent);
  mask-image:linear-gradient(180deg,#000 86%,transparent)}
.bn-hero .bn-ui{-webkit-mask-image:none;mask-image:none}

.bn-lab{position:relative;z-index:1;margin-top:24px}
.bn-lab a{display:inline-flex;align-items:center;gap:9px;color:#fff;
  font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:-.024em;
  text-decoration:none}
.bn-lab svg{width:16px;height:16px;color:var(--o-k4);
  transition:transform .24s var(--o-eo),color .2s ease}
.bn-c:hover .bn-lab svg{transform:translateX(4px);color:#fff}

/* metric rows and their bars — the Core Web Vitals shape */
.bn-mt{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:5px}
.bn-mt span{color:var(--o-k4);font-size:12.5px}
.bn-mt b{color:var(--acc,#fff);font-family:var(--mono);font-size:13px;font-weight:400;
  letter-spacing:-.01em}
.bn-bar{display:block;height:4px;border-radius:2px;background:#1a1a20;overflow:hidden}
.bn-bar i{display:block;height:100%;width:var(--w,70%);border-radius:2px;background:var(--acc);
  transform-origin:left;animation:bn-fill 1s var(--o-eo) .2s both}
@keyframes bn-fill{from{transform:scaleX(0)}}

/* the tall card is flat like the rest — it stands out by content, not a wash */
.bn-hero{background:#0a0a0d}

/* control */

@keyframes bn-toggle{0%,88%,100%{transform:translateX(13px)}92%{transform:translateX(0)}}

/* licences, journal, downloads, security */

.bn-dev{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--o-hcell)}
.bn-dev span{color:var(--o-k3);font-size:12.5px;font-weight:400}
.bn-dev em{padding:3px 9px;border-radius:999px;border:1px solid var(--o-hcell);
  color:var(--o-k5);font-family:var(--mono);font-size:9.5px;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase}
.bn-dev em[data-ok]{border-color:color-mix(in srgb,var(--acc) 50%,transparent);
  color:var(--acc)}
.bn-jr{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--o-hcell)}
.bn-jr span{color:var(--o-k2);font-family:var(--mono);font-size:12px}
.bn-jr em{color:var(--o-k6);font-size:11px;font-style:normal}
.bn-jr b{font-family:var(--mono);font-size:12px;font-weight:400}
.bn-jr b[data-up]{color:var(--o-green)} .bn-jr b[data-dn]{color:var(--o-red)}
/* the code boxes are the portal's own input-otp look: joined slots, 3 · 3,
   the ring walking as digits land */
.bn-otp{display:flex;align-items:center}
.bn-otp i{position:relative;flex:1;display:grid;place-items:center;min-height:40px;
  padding:0;border:1px solid var(--o-hcell);border-left:0;background:#0b0b0f;color:#fff;
  font-family:var(--mono);font-size:15px;font-style:normal;
  transition:box-shadow .15s ease,border-color .15s ease}
.bn-otp i:first-child,
.bn-otp s + i{border-left:1px solid var(--o-hcell)}
.bn-otp i:first-child{border-radius:9px 0 0 9px}
.bn-otp i:nth-of-type(3){border-radius:0 9px 9px 0}
.bn-otp s + i{border-radius:9px 0 0 9px}
.bn-otp i:last-child{border-radius:0 9px 9px 0}
.bn-otp s{padding:0 9px;color:var(--o-k5);font-size:15px;text-decoration:none}
/* the active slot: the component's ring, with its blinking caret */
.bn-otp i.act{z-index:1;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}
.bn-otp i.act::after{content:'';position:absolute;width:1px;height:13px;background:#f5f7fa;
  animation:sc-caret 1.25s ease-out infinite}
@keyframes sc-caret{0%,70%,100%{opacity:1}20%,50%{opacity:0}}

/* performance calendar */

@media (prefers-reduced-motion:reduce){
  .bn-bar i,
.bn-otp i{animation:none}
}
@media (max-width:980px){
  .bn{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"a b" "b b" "c d" "e e" "f g" "h i"}
  .bn-c[data-a=b]{grid-area:b}
}
@media (max-width:620px){
  .bn{grid-template-columns:1fr;
    grid-template-areas:"a" "b" "c" "d" "e" "f" "g" "h" "i"}
}

/* ── buying: a split, not a strip. Steps stack on the left with a hairline between rows;
   the right is the checkout drawn, one screen per step: the coin picker, the four status
   lines a buyer watches, the receipt. Three radios switch it (the setup-lead grammar), the
   steps are their labels. The trust row above already says "payment only at checkout",
   so this section does not repeat it. ── */
#buying{padding:24px 0 120px}
.by{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:0 60px;
  align-items:center}
/* visually hidden, still focusable. Fixed, not absolute: a click on a label focuses its radio, and the
   browser scrolls a focused element into view — a 1px box parked at the top of .by would drag the page
   up to it whenever that corner is off-screen. A fixed box is always in view, so nothing moves */
.by > input{position:fixed;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.by-t{min-width:0}
.by-t .sec-head p a{color:var(--o-k2);text-decoration:none;border-bottom:1px solid var(--o-hcomp);
  transition:color .2s ease,border-color .2s ease}
.by-t .sec-head p a:hover{color:#fff;border-bottom-color:#fff}
.by-steps{list-style:none;margin:30px 0 0;padding:0}
.by-steps li{border-top:1px solid rgba(255,255,255,.06);
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--o-eo) calc(var(--i) * .1s),
    transform .55s var(--o-eo) calc(var(--i) * .1s)}
.by-steps li:last-child{border-bottom:1px solid rgba(255,255,255,.06)}
.by.in .by-steps li{opacity:1;transform:none}
/* each step is the label of its radio: click, tap or arrow-key to it and the drawing switches */
.by-steps label{display:grid;grid-template-columns:44px minmax(0,1fr) 16px;gap:4px 12px;
  padding:18px 0;cursor:pointer}
/* the index is the sequence: big, dim, in the display face — no rail, no dots. Amber on the chosen step */
.by-steps i{grid-row:1/3;margin-top:-2px;color:var(--o-k6);font-family:var(--display);
  font-size:22px;font-style:normal;font-weight:500;letter-spacing:-.02em;line-height:1.2;
  transition:color .16s ease}
.by-steps b{grid-column:2;color:var(--o-k3);font-size:16px;font-weight:500;letter-spacing:-.015em;
  line-height:1.3;transition:color .16s ease}
.by-steps em{grid-column:2;color:var(--o-k4);font-size:13px;font-style:normal;line-height:1.6;max-width:48ch;
  text-wrap:pretty}
.by-c{grid-column:3;grid-row:1/3;width:16px;height:16px;margin-top:3px;color:var(--o-k6);
  transition:color .16s ease,transform .16s ease}
.by-steps label:hover b,.by-steps label:hover .by-c{color:#fff}
#by-s1:checked ~ .by-t [for="by-s1"] b,
#by-s2:checked ~ .by-t [for="by-s2"] b,
#by-s3:checked ~ .by-t [for="by-s3"] b{color:var(--o-k1)}
#by-s1:checked ~ .by-t [for="by-s1"] i,
#by-s2:checked ~ .by-t [for="by-s2"] i,
#by-s3:checked ~ .by-t [for="by-s3"] i{color:var(--o-amber)}
#by-s1:checked ~ .by-t [for="by-s1"] .by-c,
#by-s2:checked ~ .by-t [for="by-s2"] .by-c,
#by-s3:checked ~ .by-t [for="by-s3"] .by-c{color:var(--o-amber);transform:translateX(3px)}
#by-s1:focus-visible ~ .by-t [for="by-s1"],
#by-s2:focus-visible ~ .by-t [for="by-s2"],
#by-s3:focus-visible ~ .by-t [for="by-s3"]{outline:2px solid var(--o-amber);outline-offset:3px;border-radius:6px}
/* the drawing sits in the #features card language: one fill, one hairline, inset top light */
.by-fig{margin:0;min-width:0;padding:24px;border:1px solid rgba(255,255,255,.10);border-radius:18px;
  background:#0a0a0c;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--o-eo) .15s,transform .6s var(--o-eo) .15s}
.by.in .by-fig{opacity:1;transform:none}
/* three screens in one cell: the card is as tall as the tallest, so a switch never moves the page.
   The hidden two leave the paint after the fade (visibility swap, 0s delayed) */
.by-scr{display:grid;margin-top:16px;padding-top:16px;border-top:1px solid var(--o-hcell)}
.by-scr > [data-by]{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility 0s linear .25s}
#by-s1:checked ~ .by-fig [data-by="1"],
#by-s2:checked ~ .by-fig [data-by="2"],
#by-s3:checked ~ .by-fig [data-by="3"]{opacity:1;visibility:visible;transition-delay:0s}
/* hovering a step previews its screen (finished state, no sequence); the click commits it.
   #buying lifts these above the :checked rules; a browser without :has() drops the block and keeps the click */
@media (hover:hover){
  #buying .by:has([for]:hover) [data-by]{opacity:0;visibility:hidden;transition-delay:0s,.25s}
  #buying .by:has([for="by-s1"]:hover) [data-by="1"],
  #buying .by:has([for="by-s2"]:hover) [data-by="2"],
  #buying .by:has([for="by-s3"]:hover) [data-by="3"]{opacity:1;visibility:visible;transition-delay:0s}
}
/* the kicker row carries the disclaimer, so the card needs no caption */
.by-dk{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--o-k6)}
.by-dk span{white-space:nowrap}
.by-coins{display:flex;flex-wrap:wrap;gap:8px}
/* the portal row (03), drawn as a row — not a button; nothing in the card is pressable.
   The fine lines are the checkout's own, and every word of them is in the steps on the left */
.by-go{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--o-hcell);color:var(--o-k1);font-size:13.5px;font-weight:500}
.by-go svg{flex:none;width:15px;height:15px;color:var(--o-k4)}
.by-fine{margin-top:12px;color:var(--o-k5);font-size:11.5px;line-height:1.55}
.by-coins span{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;
  border:1px solid var(--o-hcell);background:#08080a;color:var(--o-k3);
  font-family:var(--mono);font-size:11.5px}
.by-coins span[data-on]{border-color:rgba(255,255,255,.4);color:#fff}
.by-coins img{width:16px;height:16px;border-radius:50%;flex:none}
.by-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:14px;
  color:var(--o-k2);font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.by-fig .by-line b{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--o-k3)}
/* 03: the receipt. Its mark is the checkout's own ring-and-check, drawn on once when 03 is chosen
   — green because that is what the buyer sees on the real receipt; amber would draw a screen
   that does not exist. Drawn is the resting state, the animation starts from undrawn */
.by-ok-h{display:flex;align-items:center;gap:12px;color:var(--o-k1);font-family:var(--display);
  font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.by-ok-h svg{flex:none;width:40px;height:40px}
.by-fig .cd-ring,.by-fig .cd-check{stroke-dashoffset:0}
.by.in > #by-s3:checked ~ .by-fig .cd-ring{animation:byRing .6s cubic-bezier(.33,1,.68,1) both .15s}
.by.in > #by-s3:checked ~ .by-fig .cd-check{animation:byTick .38s cubic-bezier(.33,1,.68,1) both .66s}
@keyframes byRing{from{stroke-dashoffset:327}}
@keyframes byTick{from{stroke-dashoffset:60}}
.by-ok-l{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.by-ok-l li{display:flex;gap:10px;align-items:flex-start;color:var(--o-k3);font-size:12.5px;line-height:1.5}
.by-ok-l i{flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--o-k4)}
/* 02: the four status lines, in the invoice's own order. Lit is the resting state; the last is the
   section's one accent. Choosing 02 applies an animation that starts dim, so each row lights in turn,
   once; unchecking removes it and re-checking re-applies it, so the sequence restarts. Hover previews
   the finished screen, the click plays it. .in keeps a restored radio from playing off-screen */
.by-st{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.by-st li{display:flex;align-items:center;gap:11px;color:var(--o-k2);font-size:12.5px;line-height:1.4}
.by-st i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--o-k4);border:1px solid var(--o-k4)}
.by-st li[data-end]{color:var(--o-amber)}
.by-st li[data-end] i{background:var(--o-amber);border-color:var(--o-amber)}
.by.in > #by-s2:checked ~ .by-fig .by-st li{animation:byDim .35s ease both calc(.3s + var(--i) * .5s)}
.by.in > #by-s2:checked ~ .by-fig .by-st i{animation:byDot .35s ease both calc(.3s + var(--i) * .5s)}
@keyframes byDim{from{color:var(--o-k6)}}
@keyframes byDot{from{background-color:transparent;border-color:var(--o-hcomp)}}
/* reduced motion: no fades, no sequence, no draw-on — the chosen screen simply shows, finished.
   !important because the :checked rules above carry an id */
@media (prefers-reduced-motion:reduce){
  .by-steps li,.by-steps i,.by-steps b,.by-c,.by-fig,.by-scr > [data-by]{transition:none}
  .by-st li,.by-st i,.by-fig .cd-ring,.by-fig .cd-check{animation:none!important}
}

/* ── support: the page's last word. The closing line owns the left column top to bottom —
   statement at its head, the FAQ's payment sentence at its foot, the doors on the FAQ's own
   x — so both columns end on one line. Named .sp-band, not .sp: nothing else reaches it. ── */
#support{padding:24px 0 120px}
.sp-band{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  column-gap:70px;align-items:start}
/* the hero's own two-line headline, inverted: there the claim is white and the line under
   it dims; here the question recedes and the instruction is what is left on the page */
.sp-band h2{margin-top:10px;color:var(--head);font-family:var(--display);line-height:1.08;
  font-size:clamp(26px,3.2vw,40px);font-weight:500;letter-spacing:-.035em}
.sp-band h2 span{display:block}
.sp-band h2 .sp-dim{color:var(--o-k5)}
.sp-say{margin-top:14px;color:var(--o-k4);font-size:14px;line-height:1.6}
/* the payment line is an aside to the statement, not a stray under the card: a hairline
   holds it, and align-self:end lands its foot on the card's own bottom edge */
.sp-safe{grid-area:2/1;align-self:end;border-left:1px solid rgba(255,255,255,.1);
  padding-left:14px;color:var(--o-k6);font-size:12px;line-height:1.6}
/* the routes are one card of hairline-ruled rows — the FAQ's own grammar, one step further in */
.sp-routes{grid-area:1/2/3/3;border:1px solid var(--o-hcell);border-radius:20px;
  background:var(--o-panel);overflow:hidden}
.sp-r{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:20px;
  align-items:center;padding:21px 26px;border-top:1px solid var(--o-hcell);
  font-family:var(--nav-font);transition:background-color .2s ease}
.sp-r:first-child{border-top:0}
.sp-r:hover{background:rgba(255,255,255,.03)}
.sp-r:focus-visible{outline-offset:-3px}   /* the card clips its children, so the ring turns inward */
/* the open-row mark from the FAQ, reused: the row is struck down its left edge, never filled in */
.sp-r::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--o-cyan);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--o-eo)}
.sp-r:hover::before,.sp-r:focus-visible::before{transform:scaleY(1)}
.sp-k{color:var(--o-k6);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;transition:color .2s ease}
.sp-r:hover .sp-k{color:var(--o-cyan)}
.sp-r b{display:block;color:var(--o-k2);font-size:15.5px;font-weight:450;letter-spacing:-.014em;
  transition:color .18s ease}
.sp-r:hover b{color:var(--o-k1)}
.sp-r em{display:block;margin-top:5px;color:var(--o-k5);font-size:12.5px;font-style:normal;
  line-height:1.5}
.sp-r svg{width:15px;height:15px;color:var(--o-k5);
  transition:transform .2s var(--o-eo),color .2s ease}
.sp-r:hover svg{color:#fff;transform:translateX(3px)}

@media (max-width:980px){   /* stacked: statement, doors, then the line about payment */
  .sp-band{grid-template-columns:1fr;row-gap:30px}
  .sp-routes,.sp-safe{grid-area:auto}
  .sp-say{max-width:56ch}
  .sp-safe{max-width:62ch;border-left:0;padding-left:0}   /* stacked, the margin-note rule would
     put the sentence 14px off the page spine every other block on the page sits on */
}
@media (max-width:620px){
  .sp-r{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:18px 20px}
  .sp-k{grid-column:1/-1}   /* the label takes its own line; text and arrow drop below it */
  .sp-routes{border-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .sp-r,.sp-r::before,.sp-r b,.sp-k,.sp-r svg{transition:none}
  .sp-r:hover svg{transform:none}
  .sp-r:hover::before,.sp-r:focus-visible::before{transform:scaleY(1)}
}

@media (max-width:900px){
  .by{grid-template-columns:1fr;gap:0}
  .by-t{display:contents}   /* title, card, steps: stacked as DOM order, the card would sit below the fold when a step is tapped */
  .by-steps{order:1}
  .by-fig{max-width:520px;margin-top:26px}
  .by-steps label{grid-template-columns:36px minmax(0,1fr) 16px}
}
/* the guide's .fr-stick pattern: the card pins under the nav while the steps scroll past it.
   Short phones keep it in flow — pinned, it would leave too little room to read */
@media (max-width:900px) and (min-height:700px){.by-fig{position:sticky;top:60px;z-index:2}}

/* four of the nine tiles carry a real screenshot instead of rebuilt UI — the
   same mix the reference uses. Scaled up and cropped so it reads as a live
   interface rather than a shrunk page, then faded before the divider. */
.bn-shot{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 58%,transparent 92%)}
.bn-shot img{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:auto;
  max-width:none;display:block;
  transition:transform .5s var(--o-eo)}
.bn-img:hover .bn-shot img{transform:scale(1.03)}
/* the shot is absolutely positioned, so the label is the only flex child —
   space-between would park it at the top */
.bn-img{justify-content:flex-end}
.bn-img::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,var(--bg) 6%,rgba(0,0,0,.5) 24%,transparent 52%)}
.bn-img .bn-lab{position:relative;z-index:2}

/* the first row carries the two anchor cards, so it gets more room */
.bn-c[data-a=a],
.bn-c[data-a=b]{min-height:322px}

/* screenshots sit inset and rounded, like a window resting in the tile, and run
   off the right and bottom edges rather than being shrunk to fit */
.bn-shot{top:24px;left:26px;right:0;bottom:0;
  border-top:1px solid var(--o-hcomp);border-left:1px solid var(--o-hcomp);
  border-radius:12px 0 0 0;
  box-shadow:-10px -8px 30px rgba(0,0,0,.5);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 94%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 94%)}

/* live desk */

@keyframes bn-beat{70%,100%{box-shadow:0 0 0 7px transparent}}

 

/* the two anchor cards get height and air: the rows were sitting on top of each
   other, and the shot needed room for the rail as well as the panel */
.bn-c[data-a=a],
.bn-c[data-a=b]{min-height:392px}
.bn-c[data-a=a] .bn-ui{gap:14px}

/* the control shot runs to the card's left edge so the menu is not clipped */
.bn-c[data-a=b] .bn-shot{left:0;border-left:0;border-radius:12px 0 0 0}

/* one line under each label. The reference has none, but a screenshot of a risk
   panel never tells you what a risk mode is — ten words does. */
.bn-foot{position:relative;z-index:2;margin-top:24px}
.bn-foot .bn-lab{margin-top:0}
.bn-d{margin-top:7px;color:var(--o-k5);font-size:12.5px;line-height:1.5;max-width:36ch}
.bn-img{justify-content:flex-end}
.bn-c[data-a=b] .bn-d,
.bn-c[data-a=i] .bn-d{max-width:52ch}

/* ── spacing pass: the shot gets its own box in the flow so text can never
   land on top of it, and the labels move to the body face ── */
.bn-c{padding:28px 28px 26px}
.bn-media{position:relative;flex:1 1 auto;min-height:0;margin:-4px -28px 0 -2px}
.bn-shot{position:absolute;top:0;left:26px;right:0;bottom:0;
  border-top:1px solid var(--o-hcomp);border-left:1px solid var(--o-hcomp);
  border-radius:12px 0 0 0;overflow:hidden;
  box-shadow:-10px -8px 30px rgba(0,0,0,.5);
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);
  mask-image:linear-gradient(180deg,#000 74%,transparent)}
.bn-img::after{display:none}
.bn-c[data-a=b] .bn-shot{left:0;border-left:0}

/* labels and lines in Inter, like the rest of the page */
.bn-lab a{font-family:var(--font);font-size:16.5px;font-weight:500;letter-spacing:-.018em}
.bn-foot{margin-top:26px}
.bn-d{margin-top:8px;font-size:13px;line-height:1.55}
/* the drawn cards get the same clearance under their UI */
.bn-c:not(.bn-img):not(.bn-hero) .bn-ui{margin-bottom:4px}
.bn-c[data-a=a],
.bn-c[data-a=b]{min-height:474px}
/* the drawn cards no longer need a fade — the footer is a separate block now */
.bn-c:not(.bn-img) .bn-ui{-webkit-mask-image:none;mask-image:none}

/* ── orion control: one object, not a page. The four modes are the card —
   big tiles, each in its own risk colour — and the limits are one line. ── */
.bn-panel{gap:16px}
.cp-h{display:flex;align-items:center;gap:9px;color:var(--o-k4);font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.cp-h svg{width:13px;height:13px;color:var(--o-k5)}
.cp-saved{margin-left:auto;color:var(--o-k5);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase}
.cp-saved i{color:#fff;font-style:normal;letter-spacing:0;text-transform:none;font-size:11px}

/* each mode's colour lives on its left edge */

.cp2-lims{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:2px;
  padding-top:15px;border-top:1px solid var(--o-hcell)}
.cp2-lims span{color:var(--o-k5);font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase}
.cp2-lims em{color:var(--o-k4);font-size:12px;font-style:normal}
.cp2-lims b{margin-left:5px;color:var(--m);font-family:var(--mono);font-size:12.5px;
  font-weight:400}

/* a — the desk gets a live equity line */

@keyframes dk-draw{to{stroke-dashoffset:0}}

@keyframes dk-pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

/* c — the key is the object: field, copy button, paired devices */
.lk-key{display:flex;align-items:center;gap:10px;padding:11px 8px 11px 13px;border-radius:10px;
  background:#0b0b0f;border:1px solid color-mix(in srgb,var(--acc) 26%,var(--o-hcell))}
.lk-key code{flex:1;color:#fff;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em}
.lk-key button{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--o-hcell);background:#121217;color:var(--o-k3);cursor:pointer;
  transition:color .2s ease,border-color .2s ease}
.lk-key button:hover{color:#fff;border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.lk-key button svg{width:14px;height:14px}
.lk-meta{display:grid;grid-template-columns:auto 1fr auto auto auto auto;gap:4px 10px;
  align-items:baseline;padding:2px 2px 6px}
.lk-meta span{color:var(--o-k6);font-size:10.5px}
.lk-meta b{color:var(--o-k2);font-family:var(--mono);font-size:11px;font-weight:400}
.lk-meta b[data-soon]{color:var(--o-amber)}

/* e — the tall card: the number, then the four steps down a rail */
.bh-big{color:#fff;font-family:var(--display);font-size:clamp(40px,4.4vw,56px);
  font-weight:500;letter-spacing:-.05em;line-height:.95}
.bh-big em{display:block;margin-top:7px;color:var(--o-k3);font-family:var(--font);
  font-size:13.5px;font-style:normal;font-weight:400;letter-spacing:-.01em}
.bh-steps{list-style:none;margin-top:26px;display:grid;gap:0}
.bh-steps li{position:relative;padding:11px 0 11px 26px}
.bh-steps li::before{content:'';position:absolute;left:4px;top:17px;width:9px;height:9px;
  border-radius:50%;background:var(--bg);border:1px solid var(--o-hcomp)}
.bh-steps li:not(:last-child)::after{content:'';position:absolute;left:8px;top:30px;bottom:-7px;
  width:1px;background:var(--o-hcell)}
.bh-steps li[data-now]::before,
.bh-steps li.on::before{background:var(--o-amber);
  border-color:var(--o-amber);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--o-amber) 55%,transparent);
  animation:bn-beat 2.4s ease-out infinite}
.bh-steps li[data-now] b,
.bh-steps li.on b{color:#fff}
/* a finished step goes green and its rail segment fills with it */
.bh-steps li.done::before{background:var(--o-green);border-color:var(--o-green);
  animation:none}
.bh-steps li.done b{color:var(--o-k2)}
.bh-steps li.done:not(:last-child)::after{background:color-mix(in srgb,var(--o-green) 45%,var(--o-hcell))}
.bh-steps li:not(:last-child)::after{transition:background-color .5s ease}
/* only the active step explains itself — but every step RESERVES its line, so
   the card's height never changes and the grid around it never jumps */
.bh-steps em{display:block;margin-top:2px;min-height:17px;opacity:0;
  transform:translateY(-3px);
  transition:opacity .35s ease,transform .35s var(--o-eo)}
.bh-steps li[data-now] em,
.bh-steps li.on em{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .bh-steps li[data-now]::before,
.bh-steps li.on::before{animation:none}
  .bh-steps em{opacity:1;transform:none}
}
.bh-steps b{display:block;color:var(--o-k3);font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.bh-steps em{display:block;margin-top:2px;color:var(--o-k5);font-size:11.5px;font-style:normal}

/* f — goals lead with a ring, not another bar */
.gl-top{display:flex;align-items:center;gap:18px;margin-bottom:8px}
.gl-ring{width:84px;height:84px;flex:none;transform:rotate(-90deg)}
.gl-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.gl-ring .t{stroke:#1a1a20}
.gl-ring .v{stroke:var(--acc);stroke-dasharray:213.6;stroke-dashoffset:213.6;
  animation:gl-ring 1.4s var(--o-eo) .3s forwards}
@keyframes gl-ring{to{stroke-dashoffset:68.4}}
.gl-wrap{position:relative;flex:none}
/* the value lives inside the ring, as the portal draws it */
.gl-val{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-.02em}
.gl-cap b{display:block;color:#fff;font-size:14.5px;font-weight:500;letter-spacing:-.015em}
.gl-cap span{display:block;margin-top:4px;color:var(--o-k4);font-size:12px;line-height:1.5;
  max-width:22ch}
.gl-tick{display:inline-grid;place-items:center;width:0;overflow:hidden;vertical-align:-2px;
  margin-left:0;color:var(--o-green)}
.gl-tick svg{width:11px;height:11px}
.gl-tick.in{width:13px;margin-left:4px;animation:gl-pop .4s var(--o-spring)}
@keyframes gl-pop{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}

/* g — the journal closes with its count and an export chip */
.jr-foot{display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:11px;
  border-top:1px solid var(--o-hcell)}
.jr-foot span{color:var(--o-k5);font-size:11px}
.jr-foot b{color:var(--o-k1);font-family:var(--mono);font-size:11.5px;font-weight:400}
.jr-foot button{margin-left:auto;padding:6px 12px;border-radius:8px;border:1px solid var(--o-hcell);
  background:none;color:var(--o-k3);font-family:var(--font);font-size:11px;cursor:pointer;
  transition:color .2s ease,border-color .2s ease}
.jr-foot button:hover{color:#fff;border-color:var(--o-hcomp)}

/* h — downloads lead with the version, and the one real button */
.dl-ver{display:flex;align-items:center;gap:12px;color:#fff;font-family:var(--mono);
  font-size:30px;letter-spacing:-.03em}
.dl-ver em{padding:4px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);
  color:var(--acc);font-family:var(--mono);font-size:9.5px;font-style:normal;
  letter-spacing:.12em;text-transform:uppercase}

/* i — security ends on a decision: approve or deny the waiting device */
.sc-req{display:grid;gap:2px;margin-top:6px;padding:11px 13px;border-radius:10px;
  background:#0b0b0f;border:1px solid color-mix(in srgb,var(--acc) 30%,var(--o-hcell))}
.sc-req b{color:var(--o-k1);font-size:12.5px;font-weight:500}
.sc-req em{color:var(--o-k5);font-size:11px;font-style:normal}
.sc-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sc-act button{padding:8px 16px;border-radius:9px;border:1px solid var(--o-hcell);
  background:none;color:var(--o-k3);font-family:var(--font);font-size:12px;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.sc-act button[data-ok]{border-color:color-mix(in srgb,var(--o-green) 45%,transparent);
  color:var(--o-green)}
.sc-act button[data-ok]:hover{background:color-mix(in srgb,var(--o-green) 12%,transparent)}
.sc-act button:not([data-ok]):hover{color:#fff;border-color:var(--o-hcomp)}
.sc-act span{flex-basis:100%;margin-top:4px;color:var(--o-k6);font-size:11px;line-height:1.5}

/* per-measure colours where a card holds more than one metric */
.bn-mt b{color:var(--bc,var(--acc,#fff))}
.bn-bar i{background:var(--bc,var(--acc))}

/* the promo stack, with the portal promo cell's own dressing: the monochrome
   arc sweep behind it, a quiet kicker above, and one small outlined CTA. */
.pbx{position:relative;display:grid;gap:2px;justify-items:center;text-align:center;
  margin-bottom:26px;padding:22px 0 24px;border-bottom:1px solid var(--o-hcell)}
/* the arc — .promoCell::after from client-home, monochrome and barely there */
.pbx::before{content:'';position:absolute;inset:-34px -34px 0;pointer-events:none;
  background:radial-gradient(140% 100% at 50% 135%,rgba(255,255,255,.07),
    rgba(255,255,255,.02) 45%,transparent 70%)}
.pbx > *{position:relative}
.pbx-k{margin-bottom:10px;color:var(--o-amber);font-family:var(--mono);font-size:.59rem;
  letter-spacing:.2em;text-transform:uppercase}
.pbx-big{color:#fff;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.05}
.pbx-dim{color:rgba(255,255,255,.22);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.05}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pbx-big{background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.35));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    color:transparent}
  .pbx-dim{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.12));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    color:transparent}
}
.pbx-note{margin-top:12px;color:#8a8a8e;font-size:.76rem;line-height:1.45}
.pbx-note u{text-decoration:line-through;color:var(--o-k6)}
.pbx-note b{color:var(--o-k1);font-family:var(--mono);font-weight:400}
.pbx-cta{margin-top:14px}
.pbx-cta a{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 17px;
  border-radius:999px;border:1px solid var(--o-hcomp);color:var(--o-k1);font-size:.74rem;
  font-weight:500;text-decoration:none;
  transition:border-color .15s ease,background-color .15s ease}
.pbx-cta a:hover{border-color:#3d3d45;background:rgba(255,255,255,.05)}
.pbx-cta svg{width:12px;height:12px}

/* room to breathe at the top and bottom of every card */
.bn-c{padding:34px 30px 30px}
.bn-foot{margin-top:30px}
.bn-media{margin-right:-30px}
/* the goal ring in the portal's own goal colour, glow included */
.gl-ring .v{filter:drop-shadow(0 0 5px rgba(53,214,255,.55))}

/* ── live desk, in the dribbble stat-card shape: title with a spark tile, the
   number huge, mono axes, a dotted fill under the curve, marker on the end ── */
.eq-h{display:flex;align-items:center;justify-content:space-between;
  color:#fff;font-size:15px;font-weight:500;letter-spacing:-.015em}
.eq-sp{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;
  color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.eq-sp svg{width:13px;height:13px}
.eq-n{display:flex;align-items:baseline;gap:10px;margin-top:2px;color:#fff;
  font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1}
.eq-n em{color:var(--acc);font-family:var(--font);font-size:14.5px;font-style:normal;
  font-weight:600;letter-spacing:-.01em}
.eq-sub{color:#8a8a8e;font-size:12px}
.eq-chart{width:100%;height:auto;margin-top:10px}
.eq-ax text{fill:#7a7a80;font-family:var(--mono);font-size:9.5px}
.eq-ax line{stroke:#2e2e34;stroke-width:1}
.eq-line{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600;
  animation:dk-draw 2.4s var(--o-eo) .3s forwards}
.eq-drop{stroke:var(--acc);stroke-opacity:.45;stroke-width:1.4}
.eq-end{fill:#0b0b0f;stroke:var(--acc);stroke-width:3;
  animation:dk-pulse 2.4s ease-out 2.8s infinite}
.eq-tip .k{fill:#9a9a9e;font-family:var(--mono);font-size:8px;letter-spacing:.14em}
.eq-tip .v{fill:#fff;font-family:var(--mono);font-size:15px;font-weight:600}

/* ── orion control, take three: neon fibres drifting behind a risk rail. Each
   fibre is one mode's colour; a bright pulse travels each line. ── */
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

@keyframes fx-run{to{stroke-dashoffset:0}}

.rk{margin:30px 0 10px}

/* the particle field sits behind the control card's UI */

.bn-c[data-a=b] .bn-ui{position:relative;z-index:1}
.bn-c[data-a=b] .bn-foot{position:relative;z-index:1}

/* the security card carries its own half-lock, drawn from the key alphabet and
   shaded off at the edge — the rest of it is out of frame on purpose */
/* bigger than the card, deliberately — the corner shows the shackle and the
   keyhole shoulder, the rest runs off the edge */
.sc-lock{position:absolute;right:-40px;bottom:-50px;top:auto;transform:none;
  width:168px;height:200px;pointer-events:none;opacity:.55;
  -webkit-mask-image:radial-gradient(120% 120% at 78% 72%,#000 46%,transparent 78%);
  mask-image:radial-gradient(120% 120% at 78% 72%,#000 46%,transparent 78%)}
.sc-lock canvas{width:100%;height:100%;display:block}
.bn-c[data-a=i] .bn-ui,
.bn-c[data-a=i] .bn-foot{position:relative;z-index:1}

/* ── orion control as an instrument: a risk gauge. Four arc segments in the
   mode colours, the needle sweeping to Safe and then breathing like a live
   dial. The active segment glows; the rest wait at low opacity. ── */
.gk{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px;
  align-items:center;margin-top:10px}
.gk-g{width:100%;height:auto}
.gk-t line{stroke:#2c2c32;stroke-width:1.4}
.seg{fill:none;stroke:var(--sc);stroke-width:13;stroke-linecap:round;opacity:.26;
  stroke-dasharray:98;stroke-dashoffset:98;
  animation:gk-draw .7s var(--o-eo) calc(.15s + var(--i) * .12s) forwards}
.seg[data-on]{opacity:1;filter:drop-shadow(0 0 8px rgba(62,207,110,.55))}
@keyframes gk-draw{to{stroke-dashoffset:0}}
.gk-n{transform-origin:180px 180px;
  animation:gk-sweep 1.1s var(--o-spring) .35s both,
    gk-wobble 4s ease-in-out 1.6s infinite alternate}
.gk-n line{stroke:#fff;stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(62,207,110,.7))}
.gk-n .h1{fill:#0b0b0f;stroke:#3ecf6e;stroke-width:2}
.gk-n .h2{fill:#3ecf6e}
@keyframes gk-sweep{from{transform:rotate(0deg)}to{transform:rotate(22.5deg)}}
@keyframes gk-wobble{from{transform:rotate(21.5deg)}to{transform:rotate(23.5deg)}}
.gk-big{fill:#fff;font-family:var(--display);font-size:27px;font-weight:600;
  letter-spacing:-.02em}
.gk-sub{fill:#3ecf6e;font-family:var(--mono);font-size:10px;letter-spacing:.16em}
.gk-list p{display:flex;align-items:baseline;gap:10px;padding:10px 2px;
  border-top:1px solid var(--o-hcell);color:var(--o-k4);font-size:13px}
.gk-list p:first-child{border-top:0}
.gk-list i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--m);
  opacity:.55;align-self:center}
.gk-list em{margin-left:auto;color:var(--o-k6);font-family:var(--mono);font-size:10px;
  font-style:normal;letter-spacing:.06em}
.gk-list p[data-on]{color:#fff}
.gk-list p[data-on] i{opacity:1;box-shadow:0 0 0 0 rgba(62,207,110,.5);
  animation:bn-beat 2.4s ease-out infinite}
.gk-list p[data-on] em{color:var(--m)}
@media (prefers-reduced-motion:reduce){
  .gk-n{animation:none;transform:rotate(22.5deg)}
  .seg{animation:none;stroke-dashoffset:0}
  .gk-list p[data-on] i{animation:none}
}
@media (max-width:760px){.gk{grid-template-columns:1fr}}

/* gauge polish: the dial's resting track, the tapered needle, the end labels,
   and the preview state the list drives */
.gk-base{fill:none;stroke:#1a1a20;stroke-width:13;stroke-linecap:round}
.gk-n .nd{fill:#fff;filter:drop-shadow(0 0 6px rgba(62,207,110,.7))}
.gk-end{fill:#5b5b62;font-family:var(--mono);font-size:7.5px;letter-spacing:.16em}
.gk-n.prev{animation:none;transition:transform .7s var(--o-spring)}
.seg{transition:opacity .25s ease}
.gk-list p{cursor:default}
/* instrument backlight and the risk pips */
.gk-glow{opacity:.09;transition:fill .3s ease}
.gk-list em{margin-left:14px}
.gk-list p{cursor:pointer}
/* the limits count to their targets; a fixed-width slot keeps the line from
   shimmying while the digits change */
.cp2-lims b{display:inline-block;min-width:2.6ch;font-variant-numeric:tabular-nums}
.lm-st{padding:2px 8px;border-radius:999px;border:1px solid var(--o-hcomp);
  color:var(--o-k5);font-family:var(--mono);font-size:8px;font-style:normal;
  letter-spacing:.13em;text-transform:uppercase;
  transition:color .2s ease,border-color .2s ease}

/* hover one zone and that colour alone stretches: the arc thickens and pushes
   outward from the hub on the spring, the rest of the dial holds still */
.seg{transform-origin:180px 180px;
  transition:opacity .25s ease,stroke-width .35s var(--o-spring),
    transform .45s var(--o-spring)}
.seg:hover{stroke-width:19;transform:scale(1.045);opacity:1}
@media (prefers-reduced-motion:reduce){
  .seg{transition:opacity .25s ease}
  .seg:hover{stroke-width:13;transform:none}
}

/* live desk: the figure blinks the direction of each tick; the chart carries a
   snapped crosshair under the pointer */
.eq-n .v{transition:color .45s ease}
.eq-n .v.up{color:var(--acc);transition:none}
.eq-n .v.dn{color:#ff5a52;transition:none}
.eq-chart{cursor:crosshair}
.eq-x line{stroke:var(--acc);stroke-opacity:.45;stroke-width:1.2;stroke-dasharray:3 4}
.eq-x circle{fill:#0b0b0f;stroke:var(--acc);stroke-width:2.2}

/* the licence card refuses politely: shake, red edge, and the reason. The
   paired tag carries a live dot. */
.lk-key.deny{border-color:rgba(255,90,82,.65);animation:lk-shake .38s var(--o-eo)}
@keyframes lk-shake{20%{transform:translateX(-4px)}45%{transform:translateX(4px)}
  70%{transform:translateX(-2px)}}
.lk-auth{display:none;color:#ff5a52;font-family:var(--mono);font-size:8.5px;
  font-style:normal;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.lk-auth.in{display:inline;animation:lk-in .3s var(--o-eo)}
@keyframes lk-in{from{opacity:0;transform:translateX(6px)}}
.bn-dev em[data-ok]::before{content:'';display:inline-block;width:5px;height:5px;
  margin-right:6px;border-radius:50%;background:var(--acc);vertical-align:1px;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 55%,transparent);
  animation:bn-beat 2.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){
  .lk-key.deny{animation:none}
  .bn-dev em[data-ok]::before{animation:none}
}

/* the security card's two outcomes */
.sc-req{transition:border-color .3s ease}
.sc-req.ok{border-color:color-mix(in srgb,var(--o-green) 55%,transparent)}
.sc-req.ok em{color:var(--o-green)}
.sc-req.is-no{border-color:color-mix(in srgb,var(--o-red,#ff5a52) 60%,var(--o-hcell));
  animation:lk-shake .38s var(--o-eo)}
.sc-req.is-no em{color:#ff5a52}
.bn-otp i{transition:border-color .25s ease,color .25s ease}
.bn-otp i.ok{border-color:color-mix(in srgb,var(--o-green) 55%,transparent);
  color:var(--o-green);animation:none}
.sc-act button:disabled{opacity:.45;cursor:default}
/* the licence tag inherits data-ok styling already — the flip is free */

/* ── performance as the calendar itself: real July 2026 layout, weekends dark,
   each day telling you what kind of day it was ── */

.pf-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:2px}
.pf-cal s{display:grid;place-items:center;color:var(--o-k6);font-family:var(--mono);
  font-size:8px;letter-spacing:.08em;text-decoration:none;padding:2px 0}
.pf-cal u,
.pf-cal b{aspect-ratio:1;border-radius:7px}
.pf-cal b{display:grid;place-items:center;color:var(--o-k4);font-family:var(--mono);
  font-size:10px;font-weight:400;background:#101015;border:1px solid transparent;
  cursor:default;opacity:0;transform:scale(.7);
  transition:transform .2s var(--o-eo),border-color .2s ease}
.bn.in .pf-cal b{animation:pf-in .4s var(--o-eo) calc(var(--i) * .02s) forwards}
@keyframes pf-in{to{opacity:1;transform:scale(1)}}
.pf-cal b[data-v=p]{background:color-mix(in srgb,var(--o-green) 17%,#101015);
  border-color:color-mix(in srgb,var(--o-green) 24%,transparent);color:#d9efe1}
.pf-cal b[data-v=l]{background:color-mix(in srgb,var(--o-red) 15%,#101015);
  border-color:color-mix(in srgb,var(--o-red) 22%,transparent);color:#f0dcda}
.pf-cal b[data-v=f]{background:#17171d;color:var(--o-k3)}
.pf-cal b[data-v=n]{background:#0c0c10;color:#3c3c44}
.pf-cal b:hover{transform:scale(1.14);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.pf-tip{position:absolute;z-index:3;transform:translate(-50%,-100%);pointer-events:none;
  display:grid;gap:1px;padding:7px 11px;border-radius:9px;background:#0e0e13;
  border:1px solid var(--o-hcomp);box-shadow:0 10px 26px rgba(0,0,0,.6);
  text-align:center;white-space:nowrap}
.pf-tip b{color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:500}
.pf-tip em{color:var(--o-k4);font-size:10px;font-style:normal}
@media (prefers-reduced-motion:reduce){
  .bn.in .pf-cal b{animation:none;opacity:1;transform:none}
  .pf-cal b:hover{transform:none}
}

/* the loupe on the performance shot */
/* the tile CSS ships .bn-shot with pointer-events:none — the loupe's shot must
   take real mouse input back */
.bn-c[data-a=d] .bn-shot{cursor:zoom-in;pointer-events:auto;
  -webkit-mask-image:none;mask-image:none}
.zl{position:absolute;width:138px;height:138px;border-radius:50%;overflow:hidden;
  background:#000;border:1.5px solid color-mix(in srgb,var(--acc) 65%,transparent);
  box-shadow:0 0 0 1px rgba(0,0,0,.8),0 16px 34px rgba(0,0,0,.65);
  pointer-events:none;z-index:3}
.zl img{position:absolute;max-width:none;display:block}

/* the journal writing itself: arrivals, pending dots, verification ticks */
.jr-rows{display:grid}
.bn-jr.new{animation:jr-in .45s var(--o-eo)}
@keyframes jr-in{from{opacity:0;transform:translateY(-9px)}}
.jr-v{width:13px;height:13px;align-self:center;position:relative}
.jr-v::before{content:'';position:absolute;inset:3px;border-radius:50%;
  border:1px solid var(--o-hcomp);animation:jr-wait 1s ease-in-out infinite alternate}
@keyframes jr-wait{to{border-color:var(--o-k4)}}
.jr-v.ok{color:var(--o-green)}
.jr-v.ok::before{display:none}
.jr-v.ok svg{width:11px;height:11px;display:block;margin:1px auto 0;
  animation:gl-pop .35s var(--o-spring)}
.jr-c{display:inline-block}
.jr-c.bump{animation:lm-bump .32s var(--o-eo)}
@keyframes lm-bump{0%{transform:translateY(5px);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .bn-jr.new,
.jr-v.ok svg,
.jr-c.bump{animation:none}
  .jr-v::before{animation:none}
}

/* the 30-second authenticator window, draining under the code */
.sc-ttl{display:block;height:3px;margin-top:-4px;border-radius:2px;background:#1a1a20;
  overflow:hidden}
.sc-ttl s{display:block;height:100%;border-radius:2px;
  background:color-mix(in srgb,var(--acc) 65%,transparent);
  animation:sc-ttl 30s linear infinite}
@keyframes sc-ttl{from{width:100%}to{width:0}}
@media (prefers-reduced-motion:reduce){.sc-ttl s{animation:none;width:62%}}

/* security card, arranged: code block left, guarantees right, lock sunk into
   the corner. The slots shrink to input size instead of spanning the card. */
.sc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 26px;
  align-items:start}
.sc-l{display:grid;gap:12px}
.sc-code{display:inline-grid;gap:7px;justify-self:start}
.bn-otp i{flex:0 0 34px;min-height:34px;font-size:13px}
.sc-feats{list-style:none;display:grid;gap:11px;align-content:start;position:relative;z-index:1}
.sc-feats li{display:flex;align-items:flex-start;gap:9px;color:var(--o-k3);font-size:12px;
  line-height:1.55}
.sc-feats svg{width:13px;height:13px;flex:none;margin-top:2px;color:var(--o-green)}
@media (max-width:760px){.sc-grid{grid-template-columns:1fr}}

/* ── the checkout page ────────────────────────────────────────────────────
   One decision per step, the order pinned on the right. The page must feel
   shorter than it is — three steps, one button. */
.co{position:relative;max-width:1080px;margin:0 auto;padding:118px 40px 90px}
.co-brand{position:absolute;top:30px;left:40px;z-index:2}
.co-secure{position:absolute;top:34px;right:40px;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.59rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--o-k4)}
.co-secure svg{width:14px;height:14px;color:#3ecf6e}

.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 364px;gap:64px;align-items:start}

.co-head h1{color:var(--head);font-family:var(--display);font-weight:500;
  font-size:clamp(26px,3vw,34px);letter-spacing:-.03em;line-height:1.1}
.co-head p{margin-top:10px;color:var(--t2);font-size:12.5px;line-height:1.6;max-width:56ch}
.co-step .co-fine{margin-bottom:2px}

.co-step{margin-top:22px;padding:22px 22px 20px;border-radius:16px;
  border:1px solid var(--o-hcell);background:#0b0b0e}
.co-k{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-family:var(--mono);font-size:.59rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--o-k4)}
.co-k b{font-weight:400;color:var(--o-k6)}

/* edition rows — one ring, one border, no fills */
.co-plans{display:grid;gap:10px}
.co-plan{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;gap:4px 14px;padding:15px 18px;border-radius:12px;cursor:pointer;
  border:1px solid var(--o-hcell);background:#08080a;
  transition:border-color .18s ease,background-color .18s ease}
.co-plan:hover{border-color:var(--o-hcomp)}
.co-plan input{grid-row:1 / span 2;align-self:center;appearance:none;width:17px;height:17px;margin:0;flex:none;cursor:pointer;
  border:1px solid var(--o-hcomp);border-radius:50%;background:none;
  transition:border-color .16s ease,box-shadow .16s ease}
.co-plan input:checked{border-color:var(--acc);box-shadow:inset 0 0 0 4px var(--acc)}
.co-plan:has(input:checked){border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.co-pi{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;
  width:38px;height:38px;border-radius:10px;
  border:1px solid var(--o-hcell);background:#0c0c10;color:var(--acc)}
.co-pi svg{width:19px;height:19px}
.co-pn{grid-column:3;grid-row:1;color:var(--o-k1);font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px}
.co-pn em{font-style:normal;font-family:var(--mono);font-size:.59rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);
  padding:3px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
.co-pt{grid-column:3;grid-row:2;color:var(--o-k5);font-size:12.5px}
.co-pp{grid-row:1 / span 2;grid-column:4;align-self:center;color:var(--o-k1);
  font-family:var(--mono);font-size:15.5px}

.co-form{margin-top:0;max-width:392px}
.co-fine{margin-top:11px;color:var(--o-k5);font-size:12px;line-height:1.55;max-width:52ch}
.co-fine a{display:inline-flex;align-items:center;gap:6px;color:var(--o-k2);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22)}
.co-fine a:hover{color:#fff;border-bottom-color:#fff}
.co-fine a svg{width:13px;height:13px}

/* coins — flat chips, one selected */
.co-coins{display:flex;flex-wrap:wrap;gap:9px}
.co-coin{position:relative;cursor:pointer}
.co-coin input{position:absolute;inset:0;appearance:none;margin:0;cursor:pointer;border-radius:9px}
.co-coin span{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:9px;
  border:1px solid var(--o-hcell);background:#08080a;
  color:var(--o-k2);font-family:var(--mono);font-size:12.5px;
  transition:border-color .16s ease,color .16s ease}
.co-coin em{font-style:normal;font-size:10px;color:var(--o-k6)}
.co-coin:hover span{border-color:var(--o-hcomp)}
.co-coin input:checked + span{border-color:rgba(255,255,255,.4);color:#fff}

.co-pay{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;max-width:392px;padding:13px 18px;border-radius:10px;border:0;cursor:pointer;
  background:#fff;color:#0a0a0c;font-family:var(--font);font-size:14.5px;font-weight:500;
  transition:background-color .2s ease}
.co-pay:hover{background:#e7e7ea}
.co-pay span{font-family:var(--mono);font-size:14px}

/* the rail */
.co-rail{position:sticky;top:34px}
.co-order{position:relative;overflow:hidden;padding:22px 22px 20px;border-radius:14px;
  border:1px solid var(--o-hcell);background:#08080a}
.co-order::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--acc);transition:background-color .35s ease}
.co-dot{display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;
  background:var(--acc);transition:background-color .35s ease}
.co-ok{padding-bottom:13px;border-bottom:1px solid var(--o-hcell);
  font-family:var(--mono);font-size:.59rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--o-k5)}
.co-payblk .co-ok{border-bottom:0;padding-bottom:0}
.co-line{margin-top:14px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.co-line span{color:var(--o-k1);font-size:15.5px;font-weight:500;letter-spacing:-.01em}
.co-line b{color:var(--o-k1);font-family:var(--mono);font-size:15.5px;font-weight:400}
.co-sub{margin-top:5px;color:var(--o-k5);font-size:12.5px;line-height:1.5}
.co-total{margin-top:16px;padding-top:14px;border-top:1px solid var(--o-hcell);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.co-total span{color:var(--o-k3);font-size:13px}
.co-total b{color:var(--o-k1);font-family:var(--mono);font-size:19px;font-weight:400}

.co-payblk{margin-top:18px;padding-top:16px;border-top:1px solid var(--o-hcell)}
.co-payblk .co-coins{margin-top:12px;display:grid;grid-template-columns:1fr 1fr}
/* checkout, MANUAL MODE — the crypto gateway is not live yet. The coin chips stay,
   because they are still the list of what Orion accepts, but they stop being a
   control: the search list and the network row only make sense for an invoice.
   Delete data-manual on .co-payblk and restore the invoice button to switch back. */
[data-manual] .co-coins{pointer-events:none}
[data-manual] .co-pick,[data-manual] .co-nets{display:none!important}
a.co-pay{text-decoration:none}
.co-payblk .co-coin span{justify-content:center}
.co-payblk .co-pay{max-width:none}
.co-payblk .co-fine,
.co-payblk .co-legal{max-width:none}

.co-after{margin:20px 4px 0;padding:0 18px;list-style:none;display:grid;gap:11px}
.co-after li{position:relative;display:flex;gap:12px;align-items:flex-start;
  color:var(--o-k3);font-size:12.5px;line-height:1.5}
.co-after i{flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%;
  border:1px solid var(--o-hcomp);background:none}
.co-after li:first-child i{background:#3ecf6e;border-color:#3ecf6e}
.co-after li + li::before{content:'';position:absolute;left:3px;top:-9px;width:1px;height:8px;
  background:var(--o-hcell)}

.co-trust{margin-top:16px;display:flex;gap:10px;align-items:flex-start;
  color:var(--o-k5);font-size:12px;line-height:1.55}
.co-trust svg{flex:none;width:14px;height:14px;margin-top:1px;color:var(--o-k4)}

.co-legal{margin-top:12px;color:var(--o-k6);font-size:11.5px;line-height:1.55;max-width:52ch}
.co-legal a{color:var(--o-k4);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.16)}
.co-legal a:hover{color:#fff;border-bottom-color:#fff}

/* load: the same staggered lift the auth pages use */
.co-brand,
.co-secure{animation:lift .55s var(--easeout) both .05s}
.co-head{animation:lift .6s var(--easeout) both .12s}
.co-step{animation:lift .6s var(--easeout) both calc(.2s + var(--d,0s))}
.co-step:nth-child(3){--d:.08s}.co-step:nth-child(4){--d:.16s}
.co-rail{animation:lift .65s var(--easeout) both .3s}
@media (prefers-reduced-motion:reduce){
  .co-brand,
.co-secure,
.co-head,
.co-step,
.co-rail{animation:none}}

@media (max-width:940px){
  .co{padding:104px 24px 64px}
  .co-brand{top:24px;left:24px}
  .co-secure{top:28px;right:24px}
  .co-grid{grid-template-columns:1fr;gap:38px}
  .co-rail{position:static}
}

/* the sample invoice — what the gateway step looks like, saying so plainly */
.co-ov{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:rgba(4,4,6,.78);backdrop-filter:blur(6px)}
.co-inv{width:100%;max-width:400px;padding:26px 26px 22px;border-radius:16px;
  border:1px solid var(--o-hcomp);background:#0a0a0d;
  animation:lift .4s var(--easeout) both}
.co-ik{display:grid;gap:3px}
.co-ik-t > span{font-family:var(--mono);font-size:.59rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--o-k4)}
.co-ik em{font-style:normal;color:var(--o-k6);font-size:11px;font-family:var(--font);
  letter-spacing:0;text-transform:none}
.co-ad code em{white-space:nowrap}
.co-ia{margin-top:18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.co-ia b{color:var(--o-k1);font-family:var(--mono);font-size:30px;font-weight:400}
.co-ia span{color:var(--o-k4);font-size:12.5px}
.co-ad{margin-top:16px;display:flex;gap:16px;align-items:flex-start}
.co-qr{flex:none;display:block;padding:9px;border-radius:12px;background:#fff}
.co-qr img{display:block;width:104px;height:104px}
.co-adr{display:grid;gap:7px;min-width:0;flex:1}
.co-adr > span{color:var(--o-k4);font-size:12px;line-height:1.5}
.co-net-tag{justify-self:start;color:var(--o-k4);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:400;
  padding:4px 9px;border-radius:999px;border:1px solid var(--o-hcell)}
@media (max-width:460px){.co-ad{flex-direction:column}.co-qr{align-self:center}}
.co-ad code{display:block;padding:11px 13px;border-radius:9px;
  border:1px solid var(--o-hcell);background:#08080a;
  font-family:var(--mono);font-size:12.5px;color:var(--o-k2);word-break:break-all}
.co-ad code em{font-style:normal;color:var(--o-k6);font-size:10.5px;margin-left:6px}
.co-ist{margin-top:18px;padding-top:16px;border-top:1px solid var(--o-hcell);display:grid;gap:12px}
.co-isr{display:flex;align-items:center;gap:11px;color:var(--o-k5);font-size:12.5px}
.co-isr i{flex:none;width:8px;height:8px;border-radius:50%;border:1px solid var(--o-hcomp)}
.co-isr em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--o-k4)}
.co-isr[data-on]{color:var(--o-k1)}
.co-isr[data-on] i{border-color:#f0b232;background:#f0b232;
  animation:invPulse 1.2s ease-in-out infinite}
.co-isr[data-done]{color:var(--o-k3)}
.co-isr[data-done] i{border-color:#3ecf6e;background:#3ecf6e;animation:none}
.co-isr[data-on][data-done]{color:#3ecf6e}
@keyframes invPulse{0%,100%{box-shadow:0 0 0 0 rgba(240,178,50,.35)}50%{box-shadow:0 0 0 5px rgba(240,178,50,0)}}
.co-inv .co-fine{margin-top:16px}
.co-ix{margin-top:18px;width:100%;padding:11px 16px;border-radius:9px;cursor:pointer;
  border:1px solid var(--o-hcomp);background:none;color:var(--o-k2);
  font-family:var(--font);font-size:13px;transition:background-color .18s ease,color .18s ease}
.co-ix:hover{background:#131317;color:#fff}
.co-pay b{font-weight:500}
.af > span.co-err{color:#ff5a52;font-size:12px;font-weight:400}

/* included lines + the human line */
.co-inc{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.co-inc li{position:relative;padding-left:22px;color:var(--o-k3);font-size:12.5px;line-height:1.45}
.co-inc li::before{content:'';position:absolute;left:1px;top:3px;width:13px;height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ecf6e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/contain}
.co-human{margin:16px 4px 0;padding:0 18px;color:var(--o-k5);font-size:12.5px;line-height:1.55}
.co-human a{color:var(--o-k2);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.co-human a:hover{color:#fff;border-bottom-color:#fff}

/* the network row — appears only when the coin runs on more than one chain */
.co-nets{margin-top:12px}
.co-nk{margin-bottom:8px;font-family:var(--mono);font-size:.59rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--o-k6)}
.co-netrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.co-net span{padding:8px 10px;font-size:11.5px}

.co-coin-more{grid-column:1 / -1}

/* the coin picker — same search pattern as the signup country box */
.co-pick{margin-top:12px}
.co-pick input{width:100%;padding:10px 13px;border-radius:9px;
  border:1px solid var(--o-hcell);background:#08080a;color:var(--o-k1);
  font-family:var(--mono);font-size:12.5px}
.co-pick input:focus{outline:0;border-color:rgba(255,255,255,.34)}
.co-pick ul{margin:8px 0 0;padding:4px;list-style:none;max-height:218px;overflow-y:auto;
  border:1px solid var(--o-hcell);border-radius:10px;background:#08080a;display:grid;gap:2px}
.co-pick li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 11px;border-radius:7px;cursor:pointer;
  transition:background-color .14s ease}
.co-pick li:hover{background:#121217}
.co-pick li b{color:var(--o-k1);font-family:var(--mono);font-size:12.5px;font-weight:400}
.co-pick li span{color:var(--o-k6);font-size:11px;text-align:right}
.co-pick li[data-none]{color:var(--o-k5);font-size:12px;justify-content:flex-start;gap:8px}
.co-pick li[data-none] b{color:var(--o-k2);font-family:var(--font);font-weight:500;font-size:12px}

/* coin marks — brand-coloured circles; letters where no glyph exists.
   ponytail: drawn marks, not logo PNGs — works for any coin the API returns */
.ci{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  margin-right:2px;background:var(--cc);color:#fff;font-family:var(--font);
  font-size:11px;font-weight:600;font-style:normal;line-height:1;flex:none}
.co-pick li b{display:flex;align-items:center;gap:8px}
.co-pick .ci{width:19px;height:19px;font-size:10.5px}
.nd{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cc);
  margin-right:2px;flex:none}
.cim{width:20px;height:20px;border-radius:50%;flex:none;margin-right:2px}
.cim-s{width:15px;height:15px}

/* picker scrollbar — thin, dark, rounded */
.co-pick ul{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.co-pick ul::-webkit-scrollbar{width:6px}
.co-pick ul::-webkit-scrollbar-track{background:transparent}
.co-pick ul::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px}
.co-pick ul::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}

/* invoice: coin mark in the header, copy on the address */
.co-ik{display:flex;align-items:center;gap:12px}
.co-ik [data-inv-icon] .cim{width:26px;height:26px;margin:0}
.co-ik-t{display:grid;gap:3px}
.co-ad code{position:relative;padding-right:42px}
.co-cp{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;
  background:none;color:var(--o-k5);cursor:pointer;
  transition:color .16s ease,background-color .16s ease}
.co-cp:hover{background:#16161b;color:#fff}
.co-cp svg{width:14px;height:14px}
.co-cp.ok{color:#3ecf6e}

/* payment complete — the QR hands over to a drawn green check */
.co-done{display:none;flex:none;width:122px;height:122px;border-radius:12px;
  place-items:center;background:rgba(62,207,110,.07);
  border:1px solid rgba(62,207,110,.22)}
.co-done svg{width:88px;height:88px}
.co-ad.paid .co-qr{display:none}
.co-ad.paid .co-done{display:grid;animation:coPop .45s var(--easeout) both}
.co-ad.paid .cd-ring{animation:coDraw .65s cubic-bezier(.33,1,.68,1) both .1s}
.co-ad.paid .cd-check{animation:coDraw .4s cubic-bezier(.33,1,.68,1) both .62s}
@keyframes coDraw{to{stroke-dashoffset:0}}
@keyframes coPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .co-ad.paid .co-done,
.co-ad.paid .cd-ring,
.co-ad.paid .cd-check{animation:none;stroke-dashoffset:0}}

/* confirming — the QR hands over to a churning hash field, banner-style */
.co-scr{display:none;flex:none;width:122px;height:122px;border-radius:12px;
  grid-template-columns:repeat(8,1fr);align-content:center;justify-items:center;
  padding:14px;border:1px solid rgba(91,124,255,.22);background:rgba(91,124,255,.06)}
.co-scr i{font-style:normal;font-family:var(--mono);font-size:11px;line-height:1.5;
  color:#7c9bff;transition:opacity .18s ease}
.co-ad.confirming .co-qr{display:none}
.co-ad.confirming .co-scr{display:grid;animation:coPop .4s var(--easeout) both}
.co-ad.paid .co-scr{display:none}
@media (prefers-reduced-motion:reduce){.co-ad.confirming .co-scr{animation:none}}

/* mobile bento fixes — dates stay whole, counter stays one line, lock retreats */
@media (max-width:620px){
  .lk-meta b{white-space:nowrap}
  .lk-meta{gap:4px 7px}
  .lk-meta span{font-size:9.5px}
  .lk-meta b{font-size:10px}
  .jr-foot span{white-space:nowrap}
  .jr-foot b{white-space:nowrap}
  .sc-lock{width:132px;height:157px;right:-56px;bottom:-64px;opacity:.4}
}

/* paid: the portal becomes the primary action */
.co-go{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:12px 16px;border-radius:9px;background:#fff;color:#0a0a0c;
  font-size:14px;font-weight:500;text-decoration:none;transition:background-color .2s ease}
.co-go:hover{background:#e7e7ea}
.co-go svg{width:15px;height:15px}
.co-go + .co-go-note{margin-top:10px;text-align:center}
.co-go ~ .co-ix{margin-top:10px;border:0;color:var(--o-k5)}

/* the page after payment — checkout becomes the receipt */
.co-comp{max-width:430px;margin:24px auto 0;text-align:center;
  animation:lift .6s var(--easeout) both}
.co-comp-ic{display:block;width:96px;height:96px;margin:0 auto}
.co-comp h2{margin-top:22px;color:var(--head);font-family:var(--display);
  font-size:clamp(24px,3vw,30px);font-weight:500;letter-spacing:-.03em}
.co-comp-sub{margin-top:8px;color:var(--o-k4);font-family:var(--mono);font-size:13px}
.co-comp-list{margin:26px 0 0;padding:20px 22px;list-style:none;display:grid;gap:13px;
  text-align:left;border:1px solid var(--o-hcell);border-radius:14px;background:#08080a}
.co-comp-list li{display:flex;gap:12px;align-items:flex-start;
  color:var(--o-k3);font-size:13px;line-height:1.55}
.co-comp-list li i{flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;
  background:#3ecf6e}
.co-comp-list b{color:var(--o-k1);font-weight:500}
.co-comp .co-go{margin-top:20px}
.co-comp-fine{margin:16px auto 0}
.co-comp-fine a{color:var(--o-k2);border-bottom:1px solid rgba(255,255,255,.22);text-decoration:none}
.co-comp-fine a:hover{color:#fff;border-bottom-color:#fff}

/* receipt entry: ring then check, content lifts after */
.co-comp .cd-ring{animation:coDraw .6s cubic-bezier(.33,1,.68,1) both .15s}
.co-comp .cd-check{animation:coDraw .38s cubic-bezier(.33,1,.68,1) both .66s}
.co-comp h2,
.co-comp-sub{animation:lift .5s var(--easeout) both .3s}
.co-comp-list{animation:lift .55s var(--easeout) both .42s}
.co-comp .co-go,
.co-comp-fine{animation:lift .55s var(--easeout) both .54s}
@media (prefers-reduced-motion:reduce){
  .co-comp .cd-ring,
.co-comp .cd-check{animation:none;stroke-dashoffset:0}
  .co-comp h2,
.co-comp-sub,
.co-comp-list,
.co-comp .co-go,
.co-comp-fine{animation:none}}

/* invoice: copy the exact amount; connectors between status rows */
.co-cp-amt{position:static;transform:none;width:26px;height:26px;margin-left:2px;align-self:center}
.co-isr{position:relative}
.co-isr + .co-isr::before{content:'';position:absolute;left:3.5px;top:-10px;width:1px;height:8px;
  background:var(--o-hcell)}

/* ── the policy pages — quiet prose, nothing else ── */
.pol{position:relative;max-width:720px;margin:0 auto;padding:118px 40px 100px}
.pol .co-brand{left:40px}
.pol-doc{animation:lift .6s var(--easeout) both .1s}
.pol-doc .sec-kicker{color:var(--o-k5)}
.pol-doc h1{margin-top:10px;color:var(--head);font-family:var(--display);font-weight:500;
  font-size:clamp(28px,3.4vw,38px);letter-spacing:-.03em;line-height:1.1}
.pol-lede{margin-top:16px;color:var(--t2);font-size:15px;line-height:1.65;max-width:60ch}
.pol-doc h2{margin-top:38px;color:var(--head);font-size:16.5px;font-weight:500;letter-spacing:-.015em}
.pol-doc h2 + p,
.pol-doc p + p{margin-top:10px}
.pol-doc p{color:var(--o-k3);font-size:14px;line-height:1.7;max-width:64ch}
.pol-doc a{color:var(--o-k1);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.24)}
.pol-doc a:hover{border-bottom-color:#fff}
.pol-also{margin-top:46px;padding-top:18px;border-top:1px solid var(--o-hcell);
  color:var(--o-k5);font-size:12.5px}
/* the row also appears outside .pol-doc (404.html), where .pol-doc a cannot reach it */
.pol-also a{color:var(--o-k2);border-bottom:1px solid rgba(255,255,255,.24)}
.pol-also a:hover,.pol-also a:focus-visible{color:#fff;border-bottom-color:#fff}
@media (max-width:620px){.pol{padding:100px 24px 70px}.pol .co-brand{left:24px}}


/* ── sessions & news — two landmarks, one honest 24-hour ruler ── */
#sessions{padding:24px 0 120px}
.sx{margin:46px auto 0;max-width:1100px}
.sx svg{display:block;width:100%;height:auto}
.sx-city{fill:rgba(255,255,255,.3);font-family:var(--mono);font-size:10px;letter-spacing:.22em}
.sx-bandlab{font-family:var(--mono);font-size:9px;letter-spacing:.14em}
.sx-newslab{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em}
.sx-band{transform-origin:left center;transform:scaleX(0)}
.sx-lon{fill:rgba(255,178,36,.8)}
.sx-ny{fill:rgba(110,139,255,.8)}
.sx-tky{fill:rgba(236,106,160,.62)}
.sx.on .sx-band{animation:sxBand .9s cubic-bezier(.33,1,.68,1) both var(--bd,0s)}
@keyframes sxBand{to{transform:scaleX(1)}}
.sx-dia{animation:sxPulse 2.2s ease-in-out infinite}
@keyframes sxPulse{0%,100%{opacity:1}50%{opacity:.45}}
.sx-hh,
.sx-mh{transform-origin:370px 188px}

.sx-ct{color:var(--o-k1);font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.sx-cd{margin-top:7px;color:var(--o-k4);font-size:12.5px;line-height:1.55}

@media (prefers-reduced-motion:reduce){
  .sx-band{transform:scaleX(1);animation:none}.sx-dia{animation:none}}

/* sessions v2 — Tokyo lane, live chips, news candles, per-card accents */

.sx-cndl g{transform-origin:center 336px}
.sx.on .sx-cndl .c1{animation:sxWhip 1.9s ease-in-out infinite .2s}
.sx.on .sx-cndl .c2{animation:sxWhip 1.9s ease-in-out infinite}
.sx.on .sx-cndl .c3{animation:sxWhip 1.9s ease-in-out infinite .45s}
@keyframes sxWhip{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}

.sx-cta{margin-top:26px;text-align:center}

@media (prefers-reduced-motion:reduce){.sx-cndl g{animation:none!important}}

/* landmarks in white — colour stays reserved for data; the torch flame is the one accent */
.sx-mon *{stroke:rgba(255,255,255,.42)}
.sx-mon [fill]:not([fill="none"]){fill:rgba(255,255,255,.42)}
.sx-mon .sx-hh,
.sx-mon .sx-mh{stroke:rgba(255,255,255,.8)}
.sx-mon .sx-flame{stroke:rgba(240,178,50,.85);fill:rgba(240,178,50,.5)}

/* the news desk — a calendar the EA reads by itself */

.sx-guard{padding:18px 20px;border:1px solid var(--o-hcell);border-radius:14px;background:#0b0b0e}

.sx-ev{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:9px 10px;border-radius:9px;transition:background-color .3s ease}
.sx-ev + .sx-ev{border-top:1px solid var(--o-hcell)}
.sx-et{font-family:var(--mono);font-size:12px;color:var(--o-k4)}
.sx-en{color:var(--o-k1);font-size:13px;font-weight:500}
.sx-en em{font-style:normal;color:var(--o-k5);font-size:11.5px;font-weight:400;margin-left:8px}
.sx-ei{display:flex;gap:3px}
.sx-ei{gap:4px}
.sx-ei svg{width:13px;height:13px}
.sx-ei.imp-high svg{color:#e5484d}
.sx-ei.imp-med svg{color:#f59f3a}

.sx-es{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--o-k5);
  padding:4px 9px;border-radius:999px;border:1px solid var(--o-hcell);
  transition:color .3s ease,border-color .3s ease}
.sx-ev.is-warn .sx-es{color:#f0b232;border-color:rgba(240,178,50,.45)}
.sx-ev.is-hot{background:rgba(255,90,82,.06)}
.sx-ev.is-hot .sx-es{color:#ff5a52;border-color:rgba(255,90,82,.5);animation:sxPulse 1.1s ease-in-out infinite}
.sx-ev.is-ok .sx-es{color:#3ecf6e;border-color:rgba(62,207,110,.45)}
.sx-gl{color:var(--o-k3);font-size:12.5px;line-height:1.55;min-height:38px}
.sx-bb{margin-top:14px;padding-top:14px;border-top:1px solid var(--o-hcell);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.sx-flat{color:var(--o-k5);font-size:11.5px}

@media (max-width:620px){
  /* impact matters more than the long title — drop the description, keep the bulls */
  .sx-ev{grid-template-columns:40px minmax(0,1fr) auto auto;gap:8px}
  .sx-en em{display:none}
  .sx-ev .sx-en{flex-wrap:wrap;row-gap:3px}   /* chip drops under the name instead of colliding */
  .sx-ev .sx-en .sx-cur{margin-left:0}
  .sx-ev .sx-flg{margin-left:7px;margin-right:0;order:3}
  .sx-ev .sx-en .sx-cur{order:4}
  .sx-ei{display:flex}
  .sx-ei svg{width:11px;height:11px}
  .sx-es{font-size:9.5px;padding:3px 7px;letter-spacing:0}
  .sx-fp{font-size:10px}
  .sx-flg{width:13px;height:9.5px;margin-left:7px}
  .sx-hist li{grid-template-columns:28px minmax(0,1fr) 54px 46px;gap:7px;font-size:10.5px}
  .sx-hist li em{font-size:10px}
  /* the ring stops squeezing the text — it sits above it */
  .sx-guard .sx-gbody{grid-template-columns:1fr;gap:13px;justify-items:start}
  .sx-guard .sx-ring{width:58px;height:58px}
  .sx-guard .sx-gl{min-height:0}
}

/* guard LED + timeline flare during the release */
.sx-led{display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;
  background:#3a3a42;vertical-align:1px;transition:background-color .3s ease}
.sx-led.is-warn{background:#f0b232}
.sx-led.is-hot{background:#ff5a52;animation:sxPulse 1.1s ease-in-out infinite}
.sx-led.is-ok{background:#3ecf6e}
.sx-news rect{transition:fill .35s ease,stroke .35s ease}
.sx-news.hot rect{fill:rgba(255,90,82,.18);stroke:rgba(255,90,82,.95)}
.sx-news.hot .sx-dia{animation:sxPulse .55s ease-in-out infinite}

/* the news desk gets its colour: currency chips, accent-topped cards, the guard ring */
.sx-cur{margin-left:9px;padding:2px 7px;border-radius:5px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.08em;font-weight:400;color:#7cc57e;
  border:1px solid rgba(124,197,126,.35)}

.sx-gbody{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:center}
.sx-ring{width:76px;height:76px}
.sx-rp{transition:stroke .35s ease,stroke-dashoffset .5s ease}
.sx-gi{opacity:0;transition:opacity .3s ease}
.sx-guard[data-state=armed] .sx-rp{stroke:rgba(255,255,255,.3);stroke-dashoffset:0}
.sx-guard[data-state=armed] .sx-gi-armed{opacity:1;color:rgba(255,255,255,.55)}
.sx-guard[data-state=warn] .sx-rp{stroke:#f0b232;stroke-dashoffset:50}
.sx-guard[data-state=warn] .sx-gi-warn{opacity:1;color:#f0b232}
.sx-guard[data-state=hot] .sx-rp{stroke:#ff5a52;stroke-dashoffset:0;animation:sxPulse 1.1s ease-in-out infinite}
.sx-guard[data-state=hot] .sx-gi-hot{opacity:1;color:#ff5a52}
.sx-guard[data-state=ok] .sx-rp{stroke:#3ecf6e;stroke-dashoffset:0}
.sx-guard[data-state=ok] .sx-gi-ok{opacity:1;color:#3ecf6e}

/* the monuments draw themselves in; the constellation fades up after */
.sx-mon [stroke]{stroke-dasharray:1;stroke-dashoffset:1}
.sx.on .sx-mon [stroke]{animation:sxDraw 1s cubic-bezier(.33,1,.68,1) both var(--i,0s)}
@keyframes sxDraw{to{stroke-dashoffset:0}}
.sx-mon [fill]:not([fill="none"]){opacity:0}
.sx.on .sx-mon [fill]:not([fill="none"]){animation:sxFadeIn .5s ease both 1s}
@keyframes sxFadeIn{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .sx-mon [stroke]{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important}
  .sx-mon [fill]:not([fill="none"]){opacity:1;animation:none!important}
  }

/* beams fade with the real session clock */
.sx-beam{opacity:0;transition:opacity 1.2s ease}
.sx.lon-open .sx-beam-lon{opacity:1}
.sx.ny-open .sx-beam-ny{opacity:1}

/* ── bracket cards — kicker, headline, dashed divider, content ── */
.nx-grid{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:26px 22px}
.nx-wide{grid-column:1 / -1}
.nx-card{position:relative;padding:30px 32px 26px;background:none;
  border:1px solid rgba(255,255,255,.05)}
/* the one soft bloom, like the reference's illustration card */
.nx-card[data-guard-card]{background:
  radial-gradient(120% 105% at 50% 108%,rgba(160,175,205,.14),transparent 72%)}
.nx-card::before,
.nx-card::after,
.nx-c::before,
.nx-c::after{content:'';position:absolute;width:11px;height:11px;
  border:0 solid rgba(255,255,255,.55)}
.nx-card::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.nx-card::after{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.nx-c::before{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.nx-c::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.nx-c{position:absolute;inset:0;pointer-events:none}
.nx-k{display:flex;align-items:center;gap:9px;color:var(--o-k4);font-size:14px}
.nx-k svg{width:16px;height:16px;flex:none}
.nx-h{margin-top:16px;color:var(--o-k1);font-size:clamp(19px,2vw,24px);font-weight:600;
  letter-spacing:-.02em;line-height:1.3;max-width:24ch}
.nx-body{margin-top:22px;padding-top:20px;border-top:1px dashed rgba(255,255,255,.13)}
.nx-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.nx-cols > div{position:relative;padding-top:14px}
.nx-cols > div::before{content:'';position:absolute;top:0;left:0;width:26px;height:2px;background:var(--sc)}
.sx-guard .sx-led{margin-left:8px}
@media (max-width:940px){.nx-grid{grid-template-columns:1fr}}
@media (max-width:700px){.nx-cols{grid-template-columns:1fr;gap:20px}.nx-card{padding:24px 22px 20px}}

/* visitor clocks + the Tokyo beam */
.sx-clocks{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;overflow:hidden;
  width:fit-content;display:flex;align-items:stretch;
  border:1px solid rgba(255,255,255,.035);border-radius:15px;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(8,11,20,.30) 46%,rgba(6,8,16,.42));
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  padding:11px 4px;box-shadow:0 10px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
.sx-clocks::after{content:'';position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.sx-clocks > span{display:grid;gap:3px;padding:0 15px;text-align:center}
.sx-clocks > span{position:relative}
.sx-clocks > span + span::before{content:'';position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent)}
.sx-clocks i,
.sx-clocks b,
.sx-clocks em{white-space:nowrap}
.sx-clocks i{font-style:normal;font-family:var(--mono);font-size:.59rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--o-k6)}
.sx-clocks b{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--o-k1);
  font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;gap:7px}
.sx-clocks em{font-style:normal}
.sx-ck-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3ecf6e;
  animation:sxPulse 2s ease-in-out infinite}
.sx-clocks .off .sx-ck-dot{background:#3a3a42;animation:none}
.sx-ck-live[data-acc=tok] .sx-ck-dot{background:#ec6aa0}
.sx-ck-live[data-acc=lon] .sx-ck-dot{background:#f0b232}
.sx-ck-live[data-acc=ny]{--d:0}
.sx-ck-live[data-acc=ny] .sx-ck-dot{background:#7c9bff}
.sx-ck-live[data-acc=mix] .sx-ck-dot{background:#3ecf6e}
@media (max-width:700px){
  .sx-clocks{left:10px;right:10px;width:auto;transform:none;
    flex-wrap:wrap;border-radius:16px;row-gap:10px;padding:10px 8px;justify-content:center}
  .sx-clocks > span{padding:0 14px}.sx-clocks > span + span{border-left:0}}
.sx.tok-open .sx-beam-tok{opacity:1}

/* next event glows on the calendar; armed ring breathes, then fills over the last 24h */
.sx-ev.is-next{padding-left:8px;border-left:2px solid transparent}
.sx-ev.is-next-md{background:rgba(245,159,58,.06);border-left-color:rgba(245,159,58,.75)}
.sx-ev.is-next-hi{background:rgba(255,90,82,.06);border-left-color:rgba(255,90,82,.75)}
.sx-es.tick{animation:sxChip .5s ease-out}
@keyframes sxChip{from{opacity:.45}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sx-ev.is-next .sx-es,
.sx-es.tick{animation:none}}
.sx-guard[data-state=armed] .sx-rp{animation:sxBreathe 3.2s ease-in-out infinite}
@keyframes sxBreathe{0%,100%{opacity:.35}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.sx-guard[data-state=armed] .sx-rp{animation:none}}
.nx-kx{font-style:normal;color:var(--o-k6);font-size:12px}

/* per-city skies — night, dusk, day; stars and night accents to match */
/* the shader sky sits under the vector scene */
.sx{position:relative;border-radius:24px;overflow:hidden;background:#0a0c13}
.sx-sky-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.sx svg{position:relative;z-index:1}
.sx-nacc{opacity:0;transition:opacity 1.5s ease}
.nacc-tok{fill:#ff5347}
.nacc-lon{fill:rgba(255,215,120,.1)}
.nacc-ny{fill:rgba(255,190,80,.16)}

@media (prefers-reduced-motion:reduce){.sx-nacc{animation:none!important}}

/* skyline windows follow the visitor's night */
.sx-wins rect{fill:#e6c05a;opacity:0;transition:opacity 2s ease}
.sx.vis-night .sx-wins rect,
.sx.vis-dusk .sx-wins rect{opacity:.85}

/* phones: the scene keeps its scale and scrolls sideways instead of shrinking to mush */
.sx-scroll{position:relative}
@media (max-width:700px){
  .sx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sx-scroll svg{min-width:880px}
}

/* live chips in the session columns */
.sx-st{margin-left:10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--o-k5);padding:3px 8px;border-radius:999px;border:1px solid var(--o-hcell);
  vertical-align:2px}
.sx-st.is-on{color:#3ecf6e;border-color:rgba(62,207,110,.45)}

/* forecast / previous figures + the strong-weak legend */
.sx-ev{grid-auto-rows:auto}
.sx-et,
.sx-en,
.sx-ei,
.sx-es{grid-row:1}
.sx-fp{grid-column:2 / -1;grid-row:2;margin-top:1px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.04em;color:var(--o-k6)}
.sx-fp b{color:var(--o-k3);font-weight:400;margin-left:2px}
.sx-en{display:flex;align-items:center;flex-wrap:nowrap;min-width:0}
.sx-en em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
.sx-flg{flex:none;width:15px;height:11px;border-radius:2px;margin-left:9px}
.sx-en .sx-cur{flex:none}
.sx-legend{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.1);
  color:var(--o-k5);font-size:11.5px;line-height:1.6}
.sx-legend b{color:var(--o-k3);font-family:var(--mono);font-weight:400}
.sx-lg-up{color:#3ecf6e}
.sx-lg-dn{color:#ff5a52}

/* the last-release recap */
.sx-recap{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.1)}
.sx-rk{font-family:var(--mono);font-size:.59rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--o-k5)}
.sx-rk b{color:var(--o-k2);font-weight:400;text-transform:none;letter-spacing:.04em}
.sx-rl{margin-top:8px;color:var(--o-k3);font-size:12.5px;line-height:1.6}
.sx-rl b{color:var(--o-k1);font-family:var(--mono);font-weight:400}
.sx-rs{margin-top:7px;color:var(--o-k6);font-size:10.5px}

/* each city's far skyline wakes with its session */
.sx-farcity > g[stroke]{opacity:.35;transition:opacity 1.6s ease}
.sx.tok-open [data-far-tok] > g[stroke],
.sx.lon-open [data-far-lon] > g[stroke],
.sx.ny-open [data-far-ny] > g[stroke]{opacity:1}
.sx-ev.is-past{opacity:.42;transition:opacity 1s ease}

/* LIVE lives inside the band; open bands glow a touch brighter */
.sx-inlive{font-family:var(--mono);font-size:7.5px;letter-spacing:.22em;font-weight:700}
.sx.lon-open .sx-lon,
.sx.ny-open .sx-ny,
.sx.tok-open .sx-tky{filter:brightness(1.18)}

/* sky life — slow, quiet, endless */
.sx-cl1{animation:sxDrift 260s linear infinite;animation-delay:-90s}
.sx-cl2{animation:sxDrift 340s linear infinite;animation-delay:-120s}
.sx-cl3{animation:sxDrift 200s linear infinite;animation-delay:-60s}
@keyframes sxDrift{from{transform:translateX(-140px)}to{transform:translateX(1240px)}}
.sx.vis-night .sx-clouds{opacity:.4}
.sx.vis-dusk .sx-clouds{opacity:.65}

.sx-balloon{animation:sxBallX 300s linear infinite,sxBallY 11s ease-in-out infinite alternate;animation-delay:-80s,0s;
  transition:opacity 2s ease}
@keyframes sxBallX{from{transform:translateX(-70px)}to{transform:translateX(1230px)}}
@keyframes sxBallY{from{translate:0 118px}to{translate:0 132px}}
.sx.vis-night .sx-balloon{opacity:0}

@media (prefers-reduced-motion:reduce){
  .sx-cl1,
.sx-cl2,
.sx-cl3,
.sx-balloon{animation:none}
  .sx-balloon{translate:820px 120px}}

/* sky life v3 — a fourth cloud, a far plane, a breathing balloon */
.sx-cl4{animation:sxDrift 420s linear infinite;animation-delay:-260s}
/* the old-timer: a slow lap around the towers — near leg big, far leg small and hazy */
.sx-oldplane{offset-path:path('M118 176 A436 74 0 1 1 982 176 A436 74 0 1 1 118 176');
  offset-rotate:0deg;animation:sxOrbit 110s linear infinite}
@keyframes sxOrbit{to{offset-distance:100%}}
.sx-op-flip{animation:sxOrbFlip 110s linear infinite}
@keyframes sxOrbFlip{0%,49.8%{transform:scaleX(1)}50%,100%{transform:scaleX(-1)}}
.sx-op-depth{animation:sxOrbDepth 110s linear infinite}
@keyframes sxOrbDepth{
  0%,45%{opacity:.85;transform:scale(1)}
  55%,92%{opacity:.4;transform:scale(.66)}
  100%{opacity:.85;transform:scale(1)}}
.sx-op-prop{animation:sxProp .18s linear infinite alternate}
@keyframes sxProp{from{opacity:.12}to{opacity:.4}}
.sx-ball-swing{transform-origin:0px 4px;animation:sxSwing 7.5s ease-in-out infinite alternate}
@keyframes sxSwing{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.sx-ball-flame{transform-origin:0 46px;animation:sxFlame 1.3s ease-in-out infinite}
@keyframes sxFlame{0%,100%{opacity:.5;transform:scaleY(.85)}50%{opacity:1;transform:scaleY(1.15)}}
@media (prefers-reduced-motion:reduce){
  .sx-cl4,
.sx-oldplane,
.sx-op-flip,
.sx-op-depth,
.sx-op-prop,
.sx-ball-swing,
.sx-ball-flame{animation:none}
  .sx-oldplane{offset-distance:22%}}

/* old-timer bob + fluttering banner */
.sx-op-bob{animation:sxBob 3.6s ease-in-out infinite alternate}
@keyframes sxBob{from{transform:translateY(-1.6px)}to{transform:translateY(1.6px)}}
.sx-op-banner{transform-origin:-30px 3px;animation:sxFlutter 1.1s ease-in-out infinite alternate}
@keyframes sxFlutter{from{transform:skewY(-2.4deg)}to{transform:skewY(2.4deg)}}
@media (prefers-reduced-motion:reduce){.sx-op-bob,
.sx-op-banner{animation:none}}

/* the river — shimmer breathes, boats cross, the glade follows the sky */
.sx-shim line{animation:sxShim 4.2s ease-in-out infinite}
.sx-shim line:nth-child(2n){animation-delay:1.3s}
.sx-shim line:nth-child(3n){animation-delay:2.5s}
@keyframes sxShim{0%,100%{opacity:.35}50%{opacity:1}}
.sx-boat1{animation:sxBoat1 150s linear infinite,sxBoatBob 3.8s ease-in-out infinite alternate}
@keyframes sxBoat1{from{transform:translate(70px,314px)}to{transform:translate(1010px,314px)}}
.sx-boat2{animation:sxBoat2 195s linear infinite,sxBoatBob 4.6s ease-in-out infinite alternate;
  animation-delay:-60s,0s;opacity:.75}
@keyframes sxBoat2{from{transform:translate(1010px,322px) scale(.9)}to{transform:translate(70px,322px) scale(.9)}}
@keyframes sxBoatBob{from{translate:0 -0.7px}to{translate:0 0.7px}}
@media (prefers-reduced-motion:reduce){
  .sx-shim line,
.sx-boat1,
.sx-boat2{animation:none}
  .sx-boat1{transform:translate(330px,314px)}
  .sx-boat2{transform:translate(700px,322px) scale(.9)}}

/* the water breathes — reflections stretch ever so slightly */
.sx-ref-in{transform-origin:0 302px;animation:sxRefWobble 5.5s ease-in-out infinite alternate}
@keyframes sxRefWobble{from{transform:scaleY(1)}to{transform:scaleY(1.12)}}
@media (prefers-reduced-motion:reduce){.sx-ref-in{animation:none}}

/* harbour v2 — more traffic, lamp light in the water */
.sx-lstreak{opacity:0;transition:opacity 2s ease}
.sx.vis-night .sx-lstreak,
.sx.vis-dusk .sx-lstreak{opacity:1}
.sx-lstreak line{animation:sxShim 3.6s ease-in-out infinite}
.sx-lstreak line:nth-child(2n){animation-delay:1.2s}
.sx-lstreak line:nth-child(3n){animation-delay:2.2s}
.sx-boat3{animation:sxBoat3 230s linear infinite,sxBoatBob 5s ease-in-out infinite alternate;
  animation-delay:-120s,0s;opacity:.6}
@keyframes sxBoat3{from{transform:translate(1010px,307px) scale(.6)}to{transform:translate(70px,307px) scale(.6)}}
.sx-boat4{animation:sxBoat4 125s linear infinite,sxBoatBob 3.2s ease-in-out infinite alternate;
  animation-delay:-30s,0s}
@keyframes sxBoat4{from{transform:translate(70px,318px)}to{transform:translate(1010px,318px)}}
.sx-puff{animation:sxPuff 2.6s ease-out infinite}
.sx-puff.p2{animation-delay:1.3s}
@keyframes sxPuff{0%{opacity:.5;transform:translate(0,0) scale(.7)}
  100%{opacity:0;transform:translate(-6px,-9px) scale(1.6)}}
@media (prefers-reduced-motion:reduce){
  .sx-lstreak line,
.sx-boat3,
.sx-boat4,
.sx-puff{animation:none}
  .sx-boat3{transform:translate(520px,307px) scale(.6)}
  .sx-boat4{transform:translate(860px,318px)}}

/* far landmarks wake at night — Empire's crown, WTC bands, Skytree violet, Shard beacon */
.sx-farwin{opacity:0;transition:opacity 2.5s ease}
.sx.vis-night .sx-farwin,
.sx.vis-dusk .sx-farwin{opacity:1}
.sx-fw-bcn{animation:sxPulse 1.6s ease-in-out infinite}

/* reflections sway sideways as well as stretch */
@keyframes sxRefWobble{
  from{transform:scaleY(1) skewX(-1.1deg)}
  to{transform:scaleY(1.12) skewX(1.1deg)}}
.sx-cl5{animation:sxDrift 300s linear infinite;animation-delay:-190s}
.sx-cl6{animation:sxDrift 175s linear infinite;animation-delay:-40s}
.sx-cl7{animation:sxDrift 460s linear infinite;animation-delay:-330s}
@media (prefers-reduced-motion:reduce){.sx-cl5,
.sx-cl6,
.sx-cl7{animation:none}}

/* the monuments keep their edge even when the sun stands right behind them */
.sx-mon{filter:drop-shadow(0 0 1.7px rgba(4,6,12,1)) drop-shadow(0 0 3px rgba(4,6,12,.95)) drop-shadow(0 0 7px rgba(4,6,12,.6))}

/* day separators inside the calendar */
.sx-day{margin:14px 0 6px;padding-left:10px;font-family:var(--mono);font-size:.59rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--o-k6)}
.sx-day:first-child{margin-top:0}
.sx-list .sx-ev + .sx-ev{border-top:1px solid var(--o-hcell)}
.sx-list .sx-day + .sx-ev{border-top:0}

/* the guard names what it is watching */
.sx-gtxt{display:grid;gap:5px}
.sx-gk{font-family:var(--mono);font-size:.59rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--o-k6)}
.sx-gev{display:flex;align-items:center;gap:9px;color:var(--o-k1);font-size:13.5px;line-height:1.35}
.sx-gev b{font-weight:500}
.sx-gwin{font-family:var(--mono);font-size:11px;color:var(--o-k5);letter-spacing:.02em}
.sx-gwin b{color:#f0b232;font-weight:400}
.sx-gwin s{text-decoration:none;color:var(--o-k6);margin:0 3px}
.sx-gl{margin-top:3px;min-height:34px}

/* the pause window, drawn — T−15 through +5 */
.sx-gstrip{position:relative;height:5px;margin:9px 0 17px;border-radius:3px;
  background:rgba(255,255,255,.06);transition:opacity .6s ease;opacity:.55}
.sx-gstrip.armed{opacity:1}
.sx-gs-fill{position:absolute;inset:0;border-radius:3px;background:rgba(240,178,50,.22)}
.sx-gstrip.armed .sx-gs-fill{background:rgba(240,178,50,.40)}
.sx-gs-rel{position:absolute;left:75%;top:-3px;bottom:-3px;width:2px;border-radius:2px;
  background:#ff5a52}
.sx-gs-now{position:absolute;top:-5px;bottom:-5px;width:2px;background:#fff;border-radius:2px;
  box-shadow:0 0 6px rgba(255,255,255,.7);transition:left 1s linear}
.sx-gstrip em{position:absolute;top:10px;font-style:normal;font-family:var(--mono);
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--o-k6)}
.sx-gs-a{left:0}
.sx-gs-b{left:75%;transform:translateX(-50%);color:rgba(255,90,82,.75)}
.sx-gs-c{right:0}

/* the swing bar: where price started and where it ended inside the release range */
.sx-gweek{font-style:normal;margin-left:10px;letter-spacing:.06em;text-transform:none;
  color:var(--o-k5);font-size:9.5px}
.sx-gweek b{color:var(--o-k2);font-weight:400}
.sx-gweek s{text-decoration:none;color:var(--o-k6);margin:0 2px}
.sx-swing{position:relative;display:block;width:112px;height:6px;flex:none;
  border-radius:3px;background:linear-gradient(90deg,rgba(255,90,82,.35),rgba(255,255,255,.10),rgba(62,207,110,.35))}
.sx-swing i{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px}
.sx-swing .sw-lo{left:0;background:rgba(255,90,82,.8)}
.sx-swing .sw-hi{right:0;background:rgba(62,207,110,.8)}
.sx-swing .sw-pre{background:rgba(255,255,255,.55);width:1.5px}
.sx-swing .sw-end{top:-5px;bottom:-5px;width:2.5px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.6)}
.sx-swing .sw-end[data-dir=down]{background:#ff8a84}
.sx-bb{align-items:center;margin-top:12px;padding-top:0;border-top:0}
.sx-flat b{color:var(--o-k2);font-weight:400}
.sx-flat .up{color:#3ecf6e}
.sx-flat .dn{color:#ff5a52}

/* session columns: local hours and a bar that fills while the window runs */
.sx-chrs{margin-top:6px;font-family:var(--mono);font-size:11px;color:var(--o-k4);letter-spacing:.02em}
.sx-chrs s{text-decoration:none;color:var(--o-k6);margin:0 3px}
.sx-chrs em{font-style:normal;color:var(--o-k6);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;margin-left:6px}
.sx-cbar{display:block;height:3px;margin-top:9px;border-radius:2px;background:rgba(255,255,255,.07)}
.sx-cbar i{display:block;height:100%;width:0;border-radius:2px;background:var(--sc);
  transition:width 1s linear}
.nx-cols .sx-cd{margin-top:11px}

/* which editions include this session */
.sx-plans{margin-top:11px;display:flex;gap:6px;flex-wrap:wrap}
.sx-plans b{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;color:var(--o-k4);
  border:1px solid var(--o-hcell);background:none}

/* earlier releases — the pattern behind the headline number */
.sx-hist{margin-top:15px;padding-top:13px;border-top:1px dashed rgba(255,255,255,.1)}
.sx-hk{font-family:var(--mono);font-size:.59rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--o-k6)}
.sx-hist ul{margin:9px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.sx-hist li{display:grid;grid-template-columns:34px minmax(0,1fr) 104px 54px;gap:10px;
  align-items:center;font-size:11.5px;color:var(--o-k4)}
.sx-hist li span{font-family:var(--mono);font-size:10px;color:var(--o-k6)}
.sx-hist li b{font-weight:400;color:var(--o-k3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-hist li em{font-style:normal;font-family:var(--mono);color:var(--o-k2);text-align:right}
.sx-htrack{display:block;width:100%}
.sx-hbar{position:relative;display:block;height:4px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,90,82,.3),rgba(255,255,255,.08),rgba(62,207,110,.3))}
.sx-hbar s,
.sx-hbar u{position:absolute;top:-2px;bottom:-2px;text-decoration:none;border-radius:2px}
.sx-hbar s{width:1.5px;background:rgba(255,255,255,.45)}
.sx-hbar u{width:2px;background:#fff}
.sx-hbar u[data-dir=down]{background:#ff8a84}
.sx-hsum{margin-top:11px;color:var(--o-k5);font-size:11.5px;line-height:1.55}
.sx-hsum b{color:var(--o-k2);font-weight:400;font-family:var(--mono)}

/* the one CTA inside the guard — sells the real thing */
.sx-gcta{margin-top:16px;padding-top:14px;border-top:1px solid var(--o-hcell)}
.sx-gcta a{display:inline-flex;align-items:center;gap:8px;color:var(--o-k1);font-size:13px;
  text-decoration:none;padding:9px 15px;border-radius:9px;border:1px solid var(--o-hcomp);
  transition:background-color .2s ease,border-color .2s ease}
.sx-gcta a:hover{background:#15151a;border-color:#33333c}
.sx-gcta svg{width:14px;height:14px}

/* ── requirements: the pre-flight check ────────────────────────────────────
   An autopilot gets a checklist before it flies. So does this one. */
#need{padding:24px 0 120px}
.pf{--pf-inset:82px;position:relative;display:grid;grid-template-columns:216px minmax(0,1fr);
  border:1px solid var(--o-hcell);border-radius:16px;background:#0a0a0d;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  transition:border-color .6s ease,background-color .6s ease,box-shadow .6s ease}
.pf-rail{padding:30px 24px;border-right:1px solid var(--o-hcell);background:#08080b;text-align:center}
.rc-dial{position:relative;width:112px;height:112px;margin:0 auto}
.rc-ring{display:block;width:112px;height:112px}
/* four segments, not one arc — you can count "of 4" without reading the number */
.rc-track{stroke:rgba(255,255,255,.09)}
.rc-seg{stroke:transparent;transition:stroke .34s ease;transition-delay:calc(var(--i)*60ms)}
.rc-seg.on{stroke:#3ecf6e}
.pf.is-ready .rc-seg.on{filter:drop-shadow(0 0 6px rgba(62,207,110,.45))}
.rc-num b.bump{animation:rcbump .34s cubic-bezier(.34,1.5,.5,1)}
/* the rows settle in, one after another, the first time the section is seen */
.pf .pf-row{opacity:0;transform:translateY(8px)}
.pf.is-in .pf-row{animation:pfin .5s cubic-bezier(.33,1,.68,1) forwards;
  animation-delay:calc(120ms + var(--r)*70ms)}
.pf .rc-dial,
.pf .rc-count,
.pf .pf-say{opacity:0}
.pf.is-in .rc-dial{animation:pfin .55s cubic-bezier(.33,1,.68,1) forwards}
.pf.is-in .rc-count{animation:pffade .5s ease .22s forwards}
.pf.is-in .pf-say{animation:pffade .5s ease .32s forwards}
@keyframes pfin{to{opacity:1;transform:none}}
@keyframes pffade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .pf .pf-row,
.pf .rc-dial,
.pf .rc-count,
.pf .pf-say{opacity:1;transform:none}
  .pf.is-in .pf-row,
.pf.is-in .rc-dial,
.pf.is-in .rc-count,
.pf.is-in .pf-say,
.rc-num b.bump,
.pf-row.on .pf-tick::after{animation:none}
  .pf-row.on .pf-tick::after{width:4px;height:8px;opacity:1}
}
@keyframes rcbump{0%{transform:translateY(3px) scale(.9);opacity:.4}100%{transform:none;opacity:1}}
.rc-num{position:absolute;inset:0;display:grid;place-content:center;gap:1px}
.rc-num b{font-family:var(--mono);font-size:30px;font-weight:400;color:var(--o-k1);line-height:1}
.rc-num span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--o-k6)}
.rc-count{margin-top:13px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--o-k5)}
.pf.is-ready{border-color:rgba(62,207,110,.32);background:#090c0a}

.pf-list{margin:0;padding:0;list-style:none}
/* dividers start where the text starts, the way a good list does */
.pf-list li + li > label::before{content:'';position:absolute;left:var(--pf-inset);right:0;top:0;
  height:1px;background:var(--o-hcell)}
.pf-list label{position:relative;display:grid;
  grid-template-columns:18px 28px minmax(0,1fr) 1fr auto;gap:0 12px;
  align-items:center;padding:17px 24px;cursor:pointer;transition:background-color .18s ease}
/* the row you are on gets a quiet marker down the left edge */
.pf-list label::after{content:'';position:absolute;left:0;top:22%;bottom:22%;width:2px;
  border-radius:0 2px 2px 0;background:transparent;transition:background-color .3s ease}
.pf-row.is-next label::after{background:rgba(185,139,60,.7)}
.pf-row.on label::after{background:rgba(62,207,110,.55)}
.pf-list label:hover{background:rgba(255,255,255,.022)}
.pf-row.is-locked label{cursor:default}
.pf-row.is-locked label:hover{background:none}
.pf-list input{position:absolute;opacity:0;width:0;height:0}

/* the rows are the interaction — a soft filled square, no outline */
.pf-tick{position:relative;align-self:start;margin-top:1px;width:16px;height:16px;
  border-radius:5px;background:#191920;transition:background .18s ease}
.pf-tick::after{content:'';position:absolute;left:4.5px;top:2px;width:0;height:0;
  border:solid #06130b;border-width:0 1.6px 1.6px 0;transform:rotate(42deg);opacity:0}
.pf-row.on .pf-tick::after,
.pf-row.is-locked .pf-tick::after{
  animation:tickdraw .3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes tickdraw{0%{width:0;height:0;opacity:1}
  45%{width:4px;height:0;opacity:1}100%{width:4px;height:8px;opacity:1}}
/* hover previews the result: a green wash and a ghost of the check */
.pf-row:not(.on) label:hover .pf-tick{background:rgba(62,207,110,.28)}
.pf-row:not(.on) label:hover .pf-tick::after{width:4px;height:8px;opacity:.5;
  border-color:rgba(6,19,11,.9)}
.pf-row.on .pf-tick{background:#3ecf6e}
.pf-row.is-locked label:hover .pf-tick{background:#3ecf6e}
/* driven straight off the input, and last in the file, so no hover rule can
   ever out-rank a ticked box and leave it grey under the cursor */
.pf-list input:checked + .pf-tick,
.pf-list label:hover input:checked + .pf-tick{background:#3ecf6e}
.pf-list input:focus-visible + .pf-tick{outline:2px solid #3ecf6e;outline-offset:2px}
.pf-say{margin:9px 0 0;font-size:11.5px;line-height:1.45;color:var(--o-k6)}
.pf-n{font-family:var(--mono);font-size:11px;color:var(--o-k6);transition:color .2s ease}
.pf-row.on .pf-n{color:#3ecf6e}
.pf-txt b{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--o-k2);
  font-size:15px;font-weight:500;letter-spacing:-.013em;transition:color .2s ease}
.pf-row.on .pf-txt b{color:var(--o-k1)}
.pf-txt em{display:block;margin-top:4px;font-style:normal;color:var(--o-k5);
  font-size:12.5px;line-height:1.55}
.pf-inc{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 7px;border-radius:999px;color:#3ecf6e;
  border:1px solid rgba(62,207,110,.32)}

/* the dotted leader that makes it read as a checklist */
.pf-lead{height:1px;margin-top:2px;
  background-image:radial-gradient(circle,var(--o-hcomp) 1px,transparent 1px);
  background-size:6px 1px;background-repeat:repeat-x;opacity:.55}

.pf-st{position:relative;min-width:74px;text-align:right;font-family:var(--mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.pf-st i,
.pf-st u{display:block;font-style:normal;text-decoration:none;
  transition:opacity .22s ease,transform .22s ease}
.pf-st i{color:#b98b3c}
.pf-st u{position:absolute;inset:0;color:#3ecf6e;opacity:0;transform:translateY(4px)}
.pf-row.on .pf-st i{opacity:0;transform:translateY(-4px)}
.pf-row.on .pf-st u{opacity:1;transform:none}

.pf-fix{margin-top:18px;padding-top:15px;border-top:1px solid var(--o-hcell);text-align:left}
.pf-fix span{display:block;color:var(--o-k2);font-size:12.5px;font-weight:500;line-height:1.4}
.pf-fix span::before{content:'Next step';display:block;margin-bottom:6px;font-family:var(--mono);
  font-size:.59rem;letter-spacing:.2em;text-transform:uppercase;color:#b98b3c;font-weight:400}
.pf-fix em{display:block;margin-top:5px;font-style:normal;color:var(--o-k5);font-size:11.5px;line-height:1.55}

.rc-go{margin-top:18px}
.rc-go a{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:999px;white-space:nowrap;
  background:#3ecf6e;color:#07120a;font-size:13px;font-weight:600;text-decoration:none;
  transition:background-color .2s ease}
.rc-go a{box-shadow:0 6px 18px -8px rgba(62,207,110,.7)}
.rc-go a:hover{background:#57e087}
.rc-go a:hover svg{transform:translateX(3px)}
.rc-go svg{width:15px;height:15px;transition:transform .22s cubic-bezier(.33,1.3,.6,1)}

/* the section's close: an open timeline, no box — the checklist already had the box */
.rp{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0 18px;
  margin:38px 0 0;padding:0;list-style:none;counter-reset:rp}
.rp::before,
.rp::after{content:'';position:absolute;left:14px;right:14px;top:14px;height:1px;
  background:var(--o-hcell)}
.rp::after{background:#3ecf6e;transform-origin:left;transform:scaleX(0);
  transition:transform 1.6s cubic-bezier(.4,0,.2,1) .15s}
.rp.is-in::after{transform:scaleX(1)}
.rp li{position:relative;padding:0 0 0 2px;counter-increment:rp}
.rp i{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;
  border-radius:50%;background:#000;box-shadow:inset 0 0 0 1px var(--o-hcell);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--o-k4);font-style:normal;
  transition:box-shadow .35s ease,color .35s ease,background .35s ease;
  transition-delay:calc(.2s + var(--i)*.4s)}
.rp i::before{content:counter(rp,decimal-leading-zero)}
.rp li:last-child i::before{content:'';width:6px;height:10px;margin-top:-2px;
  border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
.rp.is-in i{box-shadow:inset 0 0 0 1px #3ecf6e;color:#3ecf6e}
.rp.is-in li:last-child i{background:#3ecf6e;color:#07120a;box-shadow:none}
/* "Live" is the one that means running — it keeps a slow pulse once the line has filled */
.rp li:last-child i::after{content:'';position:absolute;inset:-1px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(62,207,110,.55);opacity:0}
.rp.is-in li:last-child i::after{animation:rplive 2.8s ease-out 1.9s infinite}
@keyframes rplive{0%{box-shadow:0 0 0 0 rgba(62,207,110,.5);opacity:1}
  70%{box-shadow:0 0 0 11px rgba(62,207,110,0);opacity:1}100%{opacity:0}}
.rp b{display:block;margin-top:14px;font-family:var(--display);font-size:19px;font-weight:500;
  letter-spacing:-.02em;color:var(--o-k1)}
.rp span{display:block;margin-top:4px;max-width:220px;font-size:12.5px;line-height:1.5;color:var(--o-k5)}

.rn{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 0;
  margin:34px 0 0;font-size:12.5px;color:var(--o-k5)}
.rn span{margin-right:16px;font-family:var(--mono);font-size:.59rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--o-k6)}
.rn em{position:relative;font-style:normal;padding:0 15px}
.rn em::before{content:'';position:absolute;left:0;top:50%;width:8px;height:8px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(45deg,transparent 42%,rgba(233,110,102,.8) 42%,rgba(233,110,102,.8) 58%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,rgba(233,110,102,.8) 42%,rgba(233,110,102,.8) 58%,transparent 58%)}
@media (max-width:820px){
  /* on a phone the path runs down the page: one line on the left, steps hanging off it */
  .rp{grid-template-columns:1fr;gap:22px 0;padding-left:44px}
  .rp::before,
.rp::after{left:13px;right:auto;top:14px;bottom:14px;width:1px;height:auto}
  .rp::after{transform-origin:top;transform:scaleY(0)}
  .rp.is-in::after{transform:scaleY(1)}
  .rp li{padding:0}
  .rp i{position:absolute;left:-44px;top:0;transition-delay:calc(.15s + var(--i)*.3s)}
  .rp b{margin-top:2px;font-size:17px}
  .rp span{max-width:none}
  .rn{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .rp::after{transition:none;transform:none}
  .rp i{transition:none}
  .rp.is-in li:last-child i::after{animation:none}
}
/* the phone's Balance line answers when the $100 row is ticked */
[data-bal]{border-radius:1.5cqw;margin:0 -1.5cqw;padding:0 1.5cqw}
[data-bal].flash{animation:mt5flash 1.4s ease-out}
[data-bal].flash dd{animation:mt5flashtxt 1.4s ease-out}
@keyframes mt5flash{0%{background:rgba(62,207,110,.28);box-shadow:0 0 0 3px rgba(62,207,110,.28)}
  100%{background:transparent;box-shadow:0 0 0 3px transparent}}
@keyframes mt5flashtxt{0%,35%{color:#3ecf6e}100%{color:#fff}}

@media (max-width:860px){
  .pf{grid-template-columns:1fr}
  .pf-rail{display:flex;align-items:center;gap:18px;flex-wrap:wrap;text-align:left;
    padding:22px;border-right:0;border-bottom:1px solid var(--o-hcell)}
  .rc-dial,
.rc-ring{width:78px;height:78px;margin:0}
  .rc-num b{font-size:22px}
  .rc-count{margin-top:0}
  .pf-fix{flex:1 1 100%;margin-top:6px}
}
@media (max-width:700px){
  .pf-list label{grid-template-columns:26px minmax(0,1fr) auto;gap:0 11px;padding:15px 16px}
  .pf-lead{display:none}
  .pf-st{min-width:62px;font-size:10px}
}

/* the terminal itself, drawn in the same line as everything else */
.mt5{--mt5-up:#1d6dff;--mt5-dn:#ef4847;margin:34px auto 0;max-width:300px;text-align:center}
.mt5-dev{position:relative;container-type:inline-size;aspect-ratio:200/330;overflow:hidden;
  perspective:1500px;perspective-origin:50% 32%}
.mt5-dev::before{content:'';position:absolute;z-index:0;left:50%;top:10%;
  width:135%;height:74%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(126,156,255,.1),rgba(126,156,255,0) 72%)}
.mt5-float{position:absolute;z-index:1;top:4%;left:0;width:100%;transform-style:preserve-3d;
  animation:mt5float 7.5s ease-in-out infinite}

/* brushed-metal shell — the phone runs past the crop and fades into the page */
.mt5-phone{position:relative;width:100%;aspect-ratio:200/410;padding:2.1%;
  transform-style:preserve-3d;
  border-radius:14.5%/7.07%;
  background:
    repeating-linear-gradient(178deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.05) 1px 2.5px),
    linear-gradient(152deg,#b4b4c4 0%,#33333d 13%,#d6d6e4 29%,#43434f 43%,#24242b 55%,
      #bcbcca 70%,#3a3a45 84%,#8d8d9c 100%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.85),0 34px 60px -22px rgba(0,0,0,.95),
    0 0 90px -26px rgba(150,175,255,.2);
  animation:mt5turn 14s ease-in-out infinite}

/* both long edges, stood up in 3D — the far one is hidden by the body as it turns */
/* the face spans only the straight run of the silhouette — the corner radius is 7.07%
   of the height, so anything past that pokes out past the curve. Masked ends blend it in. */
.mt5-side{position:absolute;top:6.9%;height:86.2%;width:10.6%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.mt5-side-l{left:0;transform-origin:left center;transform:rotateY(90deg);
  background:linear-gradient(180deg,#cfcfdd 0%,#4a4a56 12%,#a6a6b4 28%,#3c3c46 44%,
    #b2b2c0 60%,#40404b 76%,#bcbcca 100%)}
.mt5-side-r{right:0;transform-origin:right center;transform:rotateY(-90deg);
  background:linear-gradient(180deg,#c4c4d2 0%,#43434e 14%,#9d9dab 31%,#383842 47%,
    #a8a8b6 63%,#3d3d47 79%,#b4b4c2 100%)}
.mt5-side b{position:absolute;left:15%;width:70%;top:var(--t);height:var(--h);
  border-radius:1.5px;background:linear-gradient(90deg,#e6e6f2,#6d6d7b);
  box-shadow:0 1px 2px rgba(0,0,0,.6)}
@keyframes mt5float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes mt5turn{0%,100%{transform:rotateY(-17deg) rotateX(3deg)}
  50%{transform:rotateY(17deg) rotateX(1.4deg)}}
@keyframes mt5glare{0%,100%{transform:translateX(-40%)}50%{transform:translateX(40%)}}

.mt5-fade{position:absolute;left:0;right:0;bottom:0;height:25%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 52%,rgba(0,0,0,.93) 86%,#000 100%)}

.mt5-scr{position:relative;z-index:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.9);
  width:100%;height:100%;overflow:hidden;background:#000;
  border-radius:12.9%/6.1%;display:flex;flex-direction:column;text-align:left;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.mt5-scr > *{margin:0}
.mt5-scr::after{content:'';position:absolute;inset:-10% -20%;z-index:3;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,0) 45%,rgba(255,255,255,.032) 50%,
    rgba(255,255,255,0) 55%);animation:mt5glare 14s ease-in-out infinite}
.mt5-scr::before{content:'';position:absolute;left:50%;top:2.4cqw;transform:translateX(-50%);
  z-index:2;width:19cqw;height:5.2cqw;border-radius:2.6cqw;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mt5-st{display:flex;align-items:center;gap:1.8cqw;padding:3.2cqw 6cqw 0;
  font-size:3cqw;font-weight:600;color:#c8c8c8}
.mt5-st b{font-weight:400}
.mt5-st i{width:1.5cqw;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.24)}
.mt5-st i:first-of-type{margin-left:auto}

/* Trade tab, matching the real app: round buttons either side of the floating P/L */
.mt5-bar{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
  padding:3.4cqw 4cqw 3.6cqw}
.mt5-ic{display:grid;place-items:center;width:9cqw;aspect-ratio:1;border-radius:50%;
  background:#1c1c1e;color:#cdcdcd;flex:none}
.mt5-ic svg{width:5.2cqw;height:5.2cqw}
.mt5-pl{font-size:5.2cqw;font-weight:600;letter-spacing:-.01em;color:#f23e30;
  font-variant-numeric:tabular-nums}
.mt5-pl.up{color:#0e79ff}

.mt5-sum{padding:0 1.7cqw}
.mt5-sum div{display:flex;align-items:baseline;justify-content:space-between;gap:3cqw}
.mt5-sum div + div{margin-top:1.9cqw}
.mt5-sum dt{font-size:3.3cqw;color:#fff;letter-spacing:-.005em}
.mt5-sum dd{margin:0;font-size:3.3cqw;color:#fff}

.mt5-sec{display:flex;align-items:center;justify-content:space-between;
  margin-top:3cqw;padding:1.9cqw 1.7cqw;background:#090909}
.mt5-sec b{font-size:3.4cqw;font-weight:600;color:#fff;letter-spacing:-.005em}
.mt5-sec i{width:6.4cqw;height:1.3cqw;flex:none;
  background:radial-gradient(circle,#5a5a5a 45%,transparent 46%) 0 50%/2.2cqw 100% repeat-x}

.mt5-row{display:flex;align-items:center;justify-content:space-between;gap:3cqw;
  padding:2.6cqw 1.7cqw 0}
.mt5-row b{font-size:3.4cqw;font-weight:600;color:#fff}
.mt5-row em{font-style:normal;font-size:3.4cqw;font-weight:600;color:#0e79ff}
.mt5-row u{display:block;margin-top:1cqw;text-decoration:none;
  font-size:3.3cqw;color:#b5b5b5}
.mt5-row s{text-decoration:none;font-size:4.6cqw;font-weight:600;color:#f23e30;flex:none}
.mt5-row s.up{color:#0e79ff}

/* chart, in the app's own colours: blue bulls, red bears, teal price tag */
.mt5-art{display:block;width:100%;height:auto;margin-top:2.4cqw}
.mt5-sym,
.mt5-sub,
.mt5-elab{paint-order:stroke;stroke:#000;stroke-width:1.7px;
  stroke-linejoin:round}
.mt5-sym{fill:#1d6dff;font-size:6px;font-weight:600}
.mt5-tf{fill:#e8e8e8;font-weight:400}
.mt5-sub{fill:#8d8d8d;font-size:5.2px}
.mt5-elab{fill:#1d6dff;font-size:5px}
.mt5-px{fill:#767676;font-size:5.2px}
/* the tape is redrawn every animation frame, so nothing here is transitioned */
.mt5-art{shape-rendering:geometricPrecision}
.mt5-tag{fill:#fff;font-size:6.2px;font-weight:600}
.mt5-tagt{fill:#cdeae5;font-size:5.1px}
.mt5 figcaption{margin-top:18px;color:var(--o-k5);font-size:12px;line-height:1.6}

.mt5-st{opacity:0}
.mt5.on .mt5-bar{animation:mt5fade .45s ease .1s forwards}
.mt5.on .mt5-sum{animation:mt5fade .5s ease .3s forwards}
.mt5.on .mt5-sec{animation:mt5fade .5s ease .55s forwards}
.mt5.on .mt5-row{animation:mt5fade .5s ease .7s forwards}
.mt5.on .mt5-art{animation:mt5fade .5s ease .85s forwards}
@keyframes mt5fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .mt5-st{opacity:1;transform:none}
  .mt5-phone,
.mt5-float,
.mt5-scr::after,
.mt5.on .mt5-st{animation:none}
}
/* checklist left, the terminal it runs in on the right */
.nd-split{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:36px;align-items:start}
.nd-split .pf{margin-top:14px}
.nd-split .mt5{margin:0 auto;max-width:300px}
.nd-split .pf{--pf-inset:73px;grid-template-columns:184px minmax(0,1fr)}
.nd-split .pf-rail{padding:26px 18px}
.nd-split .rc-dial,
.nd-split .rc-ring{width:94px;height:94px}
.nd-split .rc-num b{font-size:25px}
.nd-split .pf-list label{grid-template-columns:18px 24px minmax(0,1fr) auto;gap:0 11px;padding:16px 20px}
.nd-split .pf-lead{display:none}
.nd-split .pf-st{min-width:0}
.nd-split .mt5 figcaption{max-width:none}
@media (max-width:1040px){
  .nd-split{grid-template-columns:1fr;gap:30px;justify-items:center}
  .nd-split .mt5{max-width:300px}
  .nd-split .pf{--pf-inset:82px;width:100%;grid-template-columns:216px minmax(0,1fr)}
  .nd-split .pf-list label{grid-template-columns:18px 28px minmax(0,1fr) 1fr auto;gap:0 12px}
  .nd-split .pf-lead{display:block}
}
@media (max-width:700px){
  .nd-split .pf{--pf-inset:65px;grid-template-columns:1fr}
  .nd-split .pf-list label{grid-template-columns:16px 22px minmax(0,1fr) auto;gap:0 9px}
  .nd-split .pf-lead{display:none}
}

/* ───────── decides: the EA's own panel beside a console ───────── */
#decides{padding:24px 0 120px}
#decides .sec-sub{margin:14px auto 0;max-width:560px;font-size:15px;line-height:1.55;color:var(--o-k5)}
.dc{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:stretch;margin-top:10px}
.dc-col{display:flex;flex-direction:column;min-width:0}
.dc-tag{display:flex;align-items:center;gap:8px;margin:0 0 10px 2px;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--o-k6)}
.dc-tag i{width:5px;height:5px;border-radius:50%;background:#3ecf6e}
.dc[data-s=news] .dc-tag i{background:#ef4847}
/* both columns settle in when the section first arrives */
.dcw .dc-col{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.33,1,.68,1)}
.dcw .dc-col:nth-child(2){transition-delay:.12s}
.dcw.is-in .dc-col{opacity:1;transform:none}

/* the on-chart panel — same window chrome and shadow as the platform section; quiet colour */
.ep{--cy:#62d0f7;--yl:#f5d76e;--gn:#7fe066;--rd:#ff5a52;--wh:#eef0f4;--dm:#7f8797;--ln:#1a2030;--bx:#090c12;
  flex:1 1 auto;position:relative;padding:0 0 12px;border:1px solid rgba(255,255,255,.08);border-radius:18px;
  background:#05070b;overflow:hidden;
  box-shadow:0 22px 64px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06),inset 14px 0 28px -24px rgba(0,0,0,.95),inset -14px 0 28px -24px rgba(0,0,0,.95);
  font-family:var(--mono);font-size:11.5px;line-height:1.35;color:var(--wh)}

.ep [data-tone=w]{color:var(--wh)}.ep [data-tone=c]{color:var(--cy)}
.ep [data-tone=y]{color:var(--yl);text-shadow:0 0 14px rgba(245,215,110,.28)}
.ep [data-tone=g]{color:var(--gn);text-shadow:0 0 14px rgba(127,224,102,.28)}
.ep [data-tone=r]{color:var(--rd);text-shadow:0 0 14px rgba(255,90,82,.3)}
.ep [data-tone=d]{color:var(--dm)}
/* window bar, as on the portal shots — with the live LED back */

@keyframes epled{0%,100%{opacity:1}50%{opacity:.45}}

.ep-box p{display:flex;justify-content:space-between;gap:8px;margin:0;white-space:nowrap}
.ep-box p > span{color:var(--dm);letter-spacing:.05em}
.ep-box p > b{font-weight:500;letter-spacing:.03em;transition:color .35s ease}

.ep-box{border:1px solid var(--ln);border-radius:10px;padding:9px 11px 10px;background:var(--bx);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 6px 18px -14px rgba(0,0,0,.9);
  transition:border-color .45s ease,background-color .45s ease,transform .45s cubic-bezier(.33,1,.68,1)}
.ep-box:hover{transform:translateY(-1px);border-color:#252c39}
.ep-box.hot{animation:ephot 1.1s ease-out}
@keyframes ephot{0%{border-color:#3a4356;background:#0b0d13}100%{border-color:var(--ln);background:var(--bx)}}
.ep-box h4{margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(98,208,247,.22);text-align:center;
  font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--cy)}
.ep-box p + p{margin-top:3px}
.ep-box hr{border:0;border-top:1px dashed #202634;margin:6px 0}

.ep [data-f].chg{animation:epchg .9s ease-out}
@keyframes epchg{0%{background:rgba(120,160,220,.22);box-shadow:0 0 0 3px rgba(120,160,220,.22)}
  100%{background:transparent;box-shadow:0 0 0 3px transparent}}
.ep [data-f]{border-radius:3px;padding:0 3px;margin:0 -3px}

/* the console — built like the reference: bubble, thought, body, code card, input card */
.ec{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;height:0;min-height:100%;
  border:1px solid rgba(255,255,255,.08);border-radius:22px;background:#0e0e11;overflow:hidden;
  box-shadow:0 22px 64px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06),inset 14px 0 28px -24px rgba(0,0,0,.95),inset -14px 0 28px -24px rgba(0,0,0,.95)}

@keyframes dcping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.2);opacity:0}}

.ec-log{flex:1 1 auto;min-height:0;overflow:auto;padding:6px 18px 10px;scroll-behavior:smooth;
  display:flex;flex-direction:column;gap:22px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.ec-log::-webkit-scrollbar{width:6px}.ec-log::-webkit-scrollbar-track{background:transparent}
.ec-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.ec-turn{animation:ecin .35s ease both}
.ec-turn:not(:last-child){opacity:.38}
@keyframes ecin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ec-prompt{position:relative;margin:0;padding:16px 52px 16px 18px;border-radius:22px;background:#1a1a1e;
  color:#f2f2f4;font-size:15px;line-height:1.4;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.ec-re{position:absolute;right:12px;bottom:12px;width:30px;height:30px;border-radius:50%;border:0;
  background:#2a2a2f;color:#c9c9cd;display:grid;place-items:center;cursor:pointer;transition:background-color .15s ease}
.ec-re:hover{background:#36363c;color:#fff}.ec-re svg{width:14px;height:14px}
.ec-thought{display:flex;align-items:center;gap:8px;margin:16px 0 8px 2px;font-size:13.5px;font-weight:500;color:#8a8a90}
.ec-thought i{width:6px;height:6px;border-radius:50%;background:#3ecf6e;animation:dcping 1.6s ease-out infinite}
.ec-thought em{font-style:normal;font-family:var(--mono);font-size:11px;color:#5f5f66}
.dc[data-s=news] .ec-thought i{background:#ef4847}
.ec-text{margin:0 2px;font-size:15px;line-height:1.55;color:#e6e6ea;min-height:1.5em}
.ec-text code{font-family:var(--mono);font-size:12px;padding:2px 7px;border-radius:7px;
  border:1px solid #2c2c31;background:#151518;color:#e6e6ea;white-space:nowrap}
.ec-code{margin-top:14px;border:1px solid #26262b;border-radius:18px;background:#0a0a0c;overflow:hidden}
.ec-file{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #1f1f23;
  font-family:var(--mono);font-size:12px}
.ec-file i{font-style:normal;color:#6e6e76;letter-spacing:-.06em}
.ec-file b{font-weight:500;color:#d8d8dd}.ec-file b span{color:#6e6e76}
.ec-file em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5f5f66}
.ec-code pre{margin:0;padding:12px 14px 14px 10px;overflow-x:auto;font-family:var(--mono);
  font-size:11.5px;line-height:1.6;color:#c8c8d0;tab-size:3;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.ec-code pre::-webkit-scrollbar{height:6px}.ec-code pre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.ec-code .ln{display:block;padding-left:18px;position:relative;white-space:pre}
.ec-code .ln.add::before{content:'+';position:absolute;left:0;color:#5f5f66}
.ec-code .ln.add{animation:ecline .22s ease both}
@keyframes ecline{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.ec-code .k{font-style:normal;color:#79b8ff}.ec-code .t{font-style:normal;color:#7ee0c0}
.ec-code .n{font-style:normal;color:#ffa657}.ec-code .f{font-style:normal;color:#e6e6ec}.ec-code .c{font-style:normal;color:#6a6a72}
/* the "input" card at the bottom: what comes next, the model chip, three round buttons */
.ec-in{margin:6px 12px 12px;padding:14px 14px 12px;border:1px solid #26262b;border-radius:22px;background:#141417}
.ec-next{display:flex;align-items:baseline;gap:8px;margin:0 4px 14px;font-size:14px;color:#8a8a90}
.ec-next em{font-style:normal;font-family:var(--mono);font-size:11px;color:#5f5f66}
.ec-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ec-model{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#a9a9af}
.ec-model i{width:7px;height:7px;border-radius:50%;background:#3ecf6e}
.ec-model svg{width:14px;height:14px;color:#6e6e76}
.ec-acts{display:flex;gap:8px}
.ec-ib{width:34px;height:34px;border-radius:50%;border:0;background:#26262b;color:#d8d8dd;display:grid;place-items:center;
  cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .15s ease}
.ec-ib:hover{background:#333339;color:#fff}.ec-ib:active{transform:scale(.94)}
.ec-ib svg{width:15px;height:15px}
.ec-ib[data-dc-news] svg{color:#ef4847}
.ec-ib .i-play{display:none}.ec-ib[aria-pressed=true] .i-pause{display:none}.ec-ib[aria-pressed=true] .i-play{display:block}
.ec-ib[aria-pressed=true]{color:#3ecf6e}
.ec-ib-go{background:#e6e6ea;color:#0f0f11}.ec-ib-go:hover{background:#fff;color:#000}

/* the path, as a slim strip — the same node-on-a-line language as the requirements timeline */
.dp{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0 14px;
  margin:34px 0 0;padding:0;list-style:none}
.dp::before{content:'';position:absolute;left:12px;right:12px;top:11px;height:1px;background:var(--o-hcell)}
.dp li{position:relative;padding:0;text-align:left;transition:opacity .3s ease}
.dp li::before{content:'';position:relative;z-index:1;display:block;width:24px;height:24px;border-radius:50%;
  background:#000;box-shadow:inset 0 0 0 1px var(--o-hcell);
  transition:background-color .35s ease,box-shadow .35s ease}
.dp li::after{content:'';position:absolute;left:9px;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--o-k6);transition:background-color .35s ease,transform .35s ease}
.dp small{display:block;margin-top:12px;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--o-k6)}
.dp b{display:block;margin-top:4px;font-family:var(--display);font-size:15px;font-weight:500;
  letter-spacing:-.015em;color:var(--o-k3);transition:color .3s ease}
.dp em{display:block;margin-top:4px;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--o-k6);transition:color .3s ease}
.dp li.on::before{box-shadow:inset 0 0 0 1px #3ecf6e}
.dp li.on::after{background:#3ecf6e;transform:scale(1.35)}
.dp li.on b{color:#fff}.dp li.on em{color:#3ecf6e}
.dp li.block::before{box-shadow:inset 0 0 0 1px #ef4847}
.dp li.block::after{background:#ef4847;transform:scale(1.35)}
.dp li.block em{color:#ef4847}

@media (max-width:1100px){
  .dc{grid-template-columns:1fr}
  .ec{height:auto;min-height:0;max-height:560px}
  
  .dp{grid-template-columns:repeat(3,1fr);gap:22px 14px}.dp::before{display:none}
}
@media (max-width:600px){
  .ep{padding:12px 10px;font-size:10.5px}
  
  
  
  .dp{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .dc .dc-col{opacity:1;transform:none;transition:none}
  .ec-thought i,
.ec-turn,
.ec-code .ln.add,
.ep [data-f].chg{animation:none!important}
}

/* ───────── decides, v3: the feature board — one deep card, six tiles, a shade, a call to action ───────── */

/* the shade: the board dissolves toward the copy at the bottom */

.fb-tile{position:relative;padding:16px 16px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.06);
  background:#0e0e11;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px -16px rgba(0,0,0,.9);
  transition:border-color .45s ease,background-color .45s ease,transform .45s cubic-bezier(.33,1,.68,1),box-shadow .45s ease}
.fb-tile:hover{transform:translateY(-2px)}
.fb-tile.on{border-color:rgba(127,224,102,.35);background:#0d110e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 28px -16px rgba(127,224,102,.25)}
.fb-tile.block{border-color:rgba(255,90,82,.4);background:#130c0c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 28px -16px rgba(255,90,82,.3)}
.fb-tile.hot{animation:fbhot 1.1s ease-out}
@keyframes fbhot{0%{border-color:rgba(255,255,255,.28)}100%{border-color:rgba(255,255,255,.06)}}
.fb-tile > svg{width:20px;height:20px;color:#8a8a90;transition:color .35s ease}
.fb-tile.on > svg{color:var(--gn)}.fb-tile.block > svg{color:var(--rd)}
.fb-tile small{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#6e6e76}
.fb-tile > b{display:block;margin-top:5px;font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:-.015em;color:#f2f2f4}
.fb-tile p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:#8f8f95}

/* tiles: enter one by one, then a spotlight walks them and opens the details */
.dc .fb-tile{opacity:0;transform:translateY(12px)}
.dc.is-in .fb-tile{animation:fbin .55s cubic-bezier(.33,1,.68,1) forwards;animation-delay:calc(.15s + var(--i)*80ms)}
@keyframes fbin{to{opacity:1;transform:none}}

.fb-tile.focus{border-color:rgba(255,255,255,.16);background:#121216;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -18px rgba(0,0,0,.95)}
.fb-tile.focus.on{border-color:rgba(127,224,102,.5);background:#0f150f}
.fb-tile.focus.block{border-color:rgba(255,90,82,.55);background:#181010}
.fb-tile.focus > svg{color:#fff}
.fb-tile:not(.focus){transition:border-color .45s ease,background-color .45s ease,transform .45s cubic-bezier(.33,1,.68,1),box-shadow .45s ease,opacity .45s ease}

.fb-tile{cursor:pointer}
.dc.is-pinned .fb-tile.focus::after{content:'PINNED';position:absolute;right:12px;top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#6e6e76}
/* the walk: a thin progress line along the top of the focused tile */
.fb-tile::before{content:'';position:absolute;left:16px;right:16px;top:0;height:1px;background:rgba(255,255,255,.18);
  transform:scaleX(0);transform-origin:left;opacity:0}
.fb-tile.focus::before{opacity:1;animation:fbwalk 3.4s linear forwards}
.dc.is-pinned .fb-tile.focus::before,
.fb-tile.focus:hover::before{animation-play-state:paused}
@keyframes fbwalk{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .dc .fb-tile{opacity:1;transform:none;animation:none!important}
  .fb-tile.focus::before{animation:none}
}

/* ───────── decides, v4: the film — one stage, six chapters ───────── */
.dcw .dc{grid-template-columns:minmax(0,1fr) 380px}
.st{--cy:#62d0f7;--yl:#f5d76e;--gn:#7fe066;--rd:#ff5a52;--wh:#eef0f4;--dm:#7f8797;--ln:#1a2030;--bx:#090c12;
  position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#05070b;
  box-shadow:0 22px 64px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06),inset 16px 0 32px -26px rgba(0,0,0,.95),inset -16px 0 32px -26px rgba(0,0,0,.95);
  font-family:var(--mono);color:var(--wh)}
.st-bar{display:flex;align-items:center;gap:12px;height:50px;padding:0 14px;flex:none;
  background:rgba(11,11,16,.7);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.st-ttl{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 auto}
.st-ttl b{font-size:12px;font-weight:600;letter-spacing:.06em;color:#fff;white-space:nowrap}
.st-ttl span{font-family:var(--display);font-size:14px;letter-spacing:-.01em;color:var(--o-k3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-bar em{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--dm)}
.st-body{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;padding:18px 18px 8px;align-items:center;min-height:300px}
/* the module box — the same box the panel prints, brought up close */
.st-box{border:1px solid var(--ln);border-radius:12px;padding:12px 14px 14px;background:var(--bx);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px -22px rgba(0,0,0,.95)}
.st-box.in{animation:stbox .6s cubic-bezier(.33,1,.68,1) both}
@keyframes stbox{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.st-box h4{margin:0 0 9px;padding-bottom:7px;border-bottom:1px solid rgba(98,208,247,.22);text-align:center;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--cy)}
.st-verdict{display:flex;flex-direction:column;align-items:center;gap:3px;margin:0 0 10px}
.st-verdict span{font-size:10px;letter-spacing:.14em;color:var(--dm)}
.st-verdict b{font-size:18px;font-weight:600;letter-spacing:.06em;transition:color .35s ease}
.st-verdict b[data-tone=y]{color:var(--yl);text-shadow:0 0 14px rgba(245,215,110,.3)}
.st-verdict b[data-tone=g]{color:var(--gn);text-shadow:0 0 14px rgba(127,224,102,.3)}
.st-verdict b[data-tone=r]{color:var(--rd);text-shadow:0 0 14px rgba(255,90,82,.32)}
.st-verdict b[data-tone=w]{color:var(--wh)}
.st-verdict b.chg{animation:epchg .9s ease-out}
.st-rows p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:4px 0;font-size:11.5px;
  border-top:1px solid rgba(255,255,255,.04);opacity:0;transform:translateX(-6px);
  animation:strow .4s ease forwards;animation-delay:calc(.35s + var(--i)*.16s)}
.st-rows span{color:var(--dm);letter-spacing:.05em}.st-rows b{font-weight:500;color:var(--wh)}
.st-demo{display:block;width:100%;height:auto;border:1px solid var(--ln);border-radius:12px;background:#07090e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.st-demo .dl{font-family:var(--mono);font-size:8px;letter-spacing:.12em;fill:var(--wh)}
.st-demo .dl.d{fill:var(--dm)}.st-demo .dl.c{fill:var(--cy)}.st-demo .dl.g{fill:var(--gn)}.st-demo .dl.r{fill:var(--rd)}.st-demo .dl.y{fill:var(--yl)}.st-demo .dl.w{fill:var(--wh)}
.st-demo .cd{transition:opacity .25s ease}
@keyframes strow{to{opacity:1;transform:none}}
/* caption bar with the chapter's progress */
.st-cap{position:relative;flex:none;padding:12px 18px 16px;border-top:1px solid rgba(255,255,255,.06);background:rgba(11,11,16,.5)}
.st-cap p{margin:0;font-family:var(--font);font-size:13.5px;line-height:1.5;color:var(--o-k3);min-height:2.9em}
.st-cap p b{display:block;font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:-.01em;color:#fff;margin-bottom:3px}
.st-prog{position:absolute;left:18px;right:18px;bottom:8px;height:1px;background:rgba(255,255,255,.08)}
.st-prog b{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--gn)}
[data-stage-root][data-ch=shield] .st-prog b{background:var(--rd)}
/* chapter nav */

.dcw.is-paused .st-prog b{opacity:.5}
/* console header tag */

@media (max-width:600px){.st-ttl b{display:none}.st-body{padding:14px 14px 6px}}
@media (prefers-reduced-motion:reduce){.st-box.in,
.st-rows p,
.st-verdict b.chg{animation:none;opacity:1;transform:none}}

/* film polish: darker set, one accent per chapter, icons, crossfade, shade */
[data-stage-root]{--acc:#62d0f7}
.st{background:#030407;border-color:rgba(255,255,255,.07);--ln:#161b25;--bx:#06080d}
.st-bar{background:rgba(8,8,12,.75)}
.st-body{position:relative;animation:none}
.st-body.swap{animation:stswap .7s cubic-bezier(.33,1,.68,1) both}
@keyframes stswap{0%{opacity:0;transform:translateY(8px) scale(.985)}100%{opacity:1;transform:none}}
/* the shade: the stage body dissolves into the caption bar */
.st-body::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:56px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(3,4,7,0),rgba(3,4,7,.9))}
.st-box{background:var(--bx);border-color:var(--ln)}
.st-box h4{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--acc);border-bottom-color:color-mix(in srgb,var(--acc) 28%,transparent)}
.st-box h4 i{display:inline-flex;width:16px;height:16px;color:var(--acc)}
.st-box h4 i svg{width:16px;height:16px}
.st-demo{background:#04050a;border-color:var(--ln)}
.st-ttl i{display:inline-flex;width:16px;height:16px;color:var(--acc);align-self:center;transition:color .4s ease}
.st-ttl i svg{width:16px;height:16px}
.st-cap{background:rgba(6,6,10,.7)}
.st-prog b{background:var(--acc)}
[data-stage-root][data-ch=shield] .st-prog b{background:var(--acc)}

/* console goes a step darker to sit with the stage */
.dcw .ec{background:#0b0b0d;border-color:rgba(255,255,255,.07)}
.dcw .ec-in{background:#101013;border-color:rgba(255,255,255,.07)}
.dcw .ec-prompt{background:#161619}
.dcw .ec-code{background:#07070a}

/* section edges fade in and out of the page */
#decides{position:relative}
#decides::before,
#decides::after{content:'';position:absolute;left:0;right:0;height:90px;pointer-events:none;z-index:0}
#decides::before{top:0;background:linear-gradient(to bottom,#000,rgba(0,0,0,0))}
#decides::after{bottom:0;background:linear-gradient(to top,#000,rgba(0,0,0,0))}
#decides > *{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.st-body.swap{animation:none}}

/* ───────── A: the hub — Orion in the middle, six parts around it, pulses running in ───────── */
.hub{position:relative;width:100%;max-width:640px;margin:0;aspect-ratio:564/300;
  /* C: the dot floor, fading top and bottom */
  background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.2px);background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.hub-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hub-ln{stroke:rgba(255,255,255,.1);stroke-width:1;transition:stroke .4s ease}
.hub-pl{stroke-width:2;stroke-linecap:round;stroke-dasharray:36 164;stroke-dashoffset:-200;opacity:.55;
  animation:hubpulse 4.4s linear infinite}
@keyframes hubpulse{to{stroke-dashoffset:200}}   /* dash travels toward the path start: the centre */
[data-spoke]:nth-child(1) .hub-pl{animation-delay:-.4s}[data-spoke]:nth-child(2) .hub-pl{animation-delay:-1.9s}
[data-spoke]:nth-child(3) .hub-pl{animation-delay:-3.1s}[data-spoke]:nth-child(4) .hub-pl{animation-delay:-1.2s}
[data-spoke]:nth-child(5) .hub-pl{animation-delay:-2.6s}[data-spoke]:nth-child(6) .hub-pl{animation-delay:-.8s}
/* every wire flows; the playing chapter's wire runs brighter and faster. When its verdict lands, one bright pulse runs into the core. */
[data-spoke].on .hub-ln{stroke:color-mix(in srgb,var(--acc) 45%,transparent)}
[data-spoke].on .hub-pl{opacity:1;animation-duration:1.6s}
[data-spoke].fire .hub-pl{animation:hubpulse .9s cubic-bezier(.2,.8,.2,1) 1;filter:drop-shadow(0 0 4px var(--acc))}
.hub-port{fill:#0a0a0d;stroke:rgba(255,255,255,.22);stroke-width:1;transition:stroke .3s ease}
[data-spoke].on ~ .hub-ports .hub-port{stroke:rgba(255,255,255,.22)}
.hub-c{position:absolute;left:50%;top:50%;z-index:2;width:58px;height:58px;transform:translate(-50%,-50%);
  display:grid;place-items:center;border-radius:16px;background:#0a0a0d;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.hub-c > svg{width:28px;height:28px}
.hub-ring{position:absolute;inset:-1px;border-radius:16px;border:2px solid color-mix(in srgb,var(--acc) 35%,transparent);
  animation:hubring 3s ease-in-out infinite}
@keyframes hubring{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.16);opacity:0}}
.hub-n{position:absolute;z-index:1;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;
  padding:0 14px 0 0;height:46px;border-radius:13px;border:1px solid rgba(255,255,255,.1);background:#0b0b0f;
  color:var(--o-k4);font-family:var(--font);font-size:12px;cursor:pointer;text-align:left;
  box-shadow:0 12px 26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.7);
  transition:color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.hub-n > svg{width:44px;height:44px;padding:14px;border-right:1px solid rgba(255,255,255,.07);color:#6e7482;transition:color .25s ease}
.hub-t{display:flex;flex-direction:column;gap:3px;line-height:1.1;white-space:nowrap}
.hub-t b{font-weight:500;font-size:12px;color:inherit}
.hub-t em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.07em;min-height:11px;color:var(--o-k6);transition:color .3s ease}
.hub-t em.pop{animation:hubpop .35s ease-out}
@keyframes hubpop{0%{opacity:0;transform:translateY(3px)}100%{opacity:1;transform:none}}
.hub-ok{position:absolute;right:-6px;top:-6px;width:15px;height:15px;border-radius:50%;background:#0b0b0f;border:1px solid rgba(255,255,255,.16);
  display:grid;place-items:center;opacity:0;transform:scale(.5);transition:opacity .3s ease,transform .4s var(--spring)}
.hub-ok::after{content:'';width:6px;height:3px;margin-top:-2px;border-left:1.5px solid #8fd7a8;border-bottom:1.5px solid #8fd7a8;transform:rotate(-45deg)}
.hub-n:hover{color:#fff;transform:translate(-50%,-50%) translateY(-2px);border-color:rgba(255,255,255,.18)}
.hub-n.done svg{color:#8a919f}
.hub-n.done .hub-t em{color:var(--o-k4)}
.hub-n.done .hub-ok{opacity:1;transform:scale(1)}
.hub-n.on{color:#fff;border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  box-shadow:0 14px 30px rgba(0,0,0,.65),0 0 0 4px color-mix(in srgb,var(--acc) 12%,transparent),0 10px 30px -8px color-mix(in srgb,var(--acc) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.1)}
.hub-n.on > svg{color:var(--acc)}
.hub-n.on .hub-t em{color:var(--acc)}
/* ───────── C: the dot floor under the film's demo and behind the phone ───────── */
.st-demo{background-color:#04050a;background-image:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1.2px);background-size:14px 14px}
.mt5-dev::before{background:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.2px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 70%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 70%,transparent)}
@media (max-width:820px){.hub{max-width:none}.hub-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.hub-n{padding:0;height:44px;width:44px;border-radius:12px}.hub-n > svg{width:42px;height:42px;padding:13px;border:0}
  .hub-c{width:48px;height:48px}}
/* phone: no map. Two columns of three, full labels, wires and core hidden. */
@media (max-width:620px){.hub{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;background:none;-webkit-mask-image:none;mask-image:none}
  .hub-svg,
.hub-c,
.hub::before{display:none}.hub-t{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap;display:flex}
  .hub-n{position:static;transform:none;width:100%;height:46px;padding:0 12px 0 0;border-radius:13px}.hub-n:hover{transform:none}.hub-n > svg{width:44px;height:44px;padding:14px;border-right:1px solid rgba(255,255,255,.07)}}
@media (prefers-reduced-motion:reduce){.hub-pl,
.hub-ring,
.hub-t em.pop{animation:none}.hub-pl{opacity:0}}

/* the intro: heading beside the hub, film and console below */
.dc-intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px 48px;align-items:center;margin-bottom:38px}
.dc-intro .sec-head{max-width:none;text-align:left}
.dc-intro .sec-sub{margin:14px 0 0;max-width:460px}
.dcw{position:relative}
@media (max-width:1100px){.dc-intro{grid-template-columns:1fr;gap:26px}.dc-intro .sec-head{text-align:center}.dc-intro .sec-sub{margin:14px auto 0}.hub{margin:0 auto}}

/* colour under the dot floors — one soft radial in the accent, the dots on top */
.mt5-dev::before{background:
    radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.2px) 0 0/22px 22px,
    radial-gradient(closest-side at 50% 42%,rgba(126,156,255,.13),rgba(126,156,255,0) 72%)}
.hub{background-image:
    radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.2px),
    radial-gradient(48% 58% at 50% 50%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 72%);
  background-size:28px 28px,100% 100%;transition:background-image .6s ease}
.st-demo{background-image:
    radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1.2px),
    radial-gradient(70% 80% at 50% 50%,color-mix(in srgb,var(--acc) 6%,transparent),transparent 78%);
  background-size:14px 14px,100% 100%}

/* ── console, second pass: taller and thinner, one grey family, no header — closer to the reference panel ── */
.dcw .dc{grid-template-columns:minmax(0,1fr) 336px;gap:28px}
.dcw .ec{min-height:600px;border-radius:26px;background:#121215;border-color:rgba(255,255,255,.07);
  box-shadow:0 22px 64px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.dcw .ec-log{padding:14px 14px 10px;gap:18px}
.dcw .ec-prompt{padding:16px 54px 16px 18px;border-radius:20px;background:#1e1e22;font-size:15px;line-height:1.45}
.dcw .ec-re{background:#2c2c31}
.dcw .ec-thought{margin:14px 0 8px 4px;font-size:14px}
.dcw .ec-text{margin:0 4px;font-size:15px}
.dcw .ec-code{margin-top:16px;border-radius:18px;background:#121215;border-color:rgba(255,255,255,.09)}
.dcw .ec-file{padding:12px 14px;border-bottom-color:rgba(255,255,255,.08);font-size:14px}
.dcw .ec-code pre{padding:14px 14px 16px 12px;font-size:12px;line-height:1.7;color:#d0d0d6}
.dcw .ec-in{display:flex;flex-direction:column;justify-content:space-between;min-height:132px;margin:10px;padding:16px 14px 12px;
  border-radius:20px;background:#18181b;border-color:rgba(255,255,255,.08)}
.dcw .ec-next{font-size:15px;color:#7a7a82}
.dcw .ec-model{font-size:14px}
.dcw .ec-ib{width:36px;height:36px;background:#2a2a2f}
.dcw .ec-ib-go{background:#3d3d44;color:#fff}.dcw .ec-ib-go:hover{background:#4a4a52}
.dcw .ec-file em{white-space:nowrap;font-size:10px;letter-spacing:.12em}
.dcw .ec-code pre{max-height:236px;overflow:auto}
/* stage keeps its own height; the four facts sit under it; the console spans both */
.dcw .dc-col:first-child .st{flex:1 1 auto}   /* stage and console share one bottom edge; the stage body takes the slack */
.dcw .ec-code pre{max-height:200px}
.dcw .ec-in{min-height:120px}

.dcw .ec-file b{display:flex;min-width:0}.dcw .ec-file b u{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}.dcw .ec-file b span{flex:none}.dcw .ec-file em{flex:none}

/* ── the rail: the stage's footer. One trace, one blade, two exits. Grey at rest; only the blade, the ticks and the lit exit take the chapter's accent. ── */
.rl{position:relative;flex:none;height:132px;border-top:1px solid rgba(255,255,255,.06);background:#04050a}
/* the sheet: a fine 28px grid that fades at the edges, and a soft glow in the chapter's colour under the switch */
.rl::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    radial-gradient(40% 80% at 50% 58%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 70%);
  background-size:28px 28px,28px 28px,100% 100%;background-position:-1px -1px,-1px -1px,0 0;
  -webkit-mask-image:radial-gradient(95% 110% at 50% 55%,#000 45%,transparent 100%);mask-image:radial-gradient(95% 110% at 50% 55%,#000 45%,transparent 100%)}
/* shades: the sheet sits recessed under the caption and dissolves at the bottom */
.rl::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.55),transparent 28%,transparent 76%,rgba(0,0,0,.6)),linear-gradient(90deg,#04050a,transparent 8%,transparent 97%,#04050a)}
.rl.thrown::before{animation:rlbloom .8s ease-out}
@keyframes rlbloom{22%{filter:brightness(1.6) saturate(1.15)}}
.rl text{paint-order:stroke;stroke:#04050a;stroke-width:3px;stroke-linejoin:round}
.rl-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.rl-ln{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1}
.rl-dash{stroke-dasharray:1 4;stroke-linecap:round;stroke:rgba(255,255,255,.22)}
.rl-ln[data-rl-lane]{transition:stroke 2.8s cubic-bezier(.2,.6,.3,1)}
.rl-ln.warm{stroke:color-mix(in srgb,var(--acc) 50%,rgba(255,255,255,.18));transition-duration:.06s}
.rl-ct{fill:#04050a;stroke:rgba(255,255,255,.3);stroke-width:1}
.rl-piv{fill:#04050a;stroke:var(--acc);stroke-width:1.3;transition:stroke .4s;transform-box:fill-box;transform-origin:center}
.rl-piv.click{animation:rlclick .32s cubic-bezier(.2,.9,.3,1)}
@keyframes rlclick{35%{transform:scale(1.5);fill:var(--acc)}}
.rl-blade line{stroke:var(--acc);stroke-width:2;stroke-linecap:round;transition:stroke .4s}
.rl-blade circle{fill:var(--acc);transition:fill .4s}
.rl-blade{transform-box:view-box;transform-origin:330px 74px;transform:rotate(19.5deg);transition:transform .3s cubic-bezier(.2,.9,.2,1)}
.rl[data-gate=act] .rl-blade{transform:rotate(-19.5deg)}
.rl-pad{stroke:rgba(255,255,255,.3);stroke-width:2;stroke-linecap:round;transition:stroke .45s,stroke-width .45s}
.rl-pad.hit{stroke:var(--acc);stroke-width:3.5;transition:none}
.rl[data-open] [data-rl-pad=act]{stroke:var(--acc);transition:stroke .6s}
.rl-tail{fill:var(--acc);opacity:.26;transition:fill .4s}
.rl-dot{fill:var(--acc);transition:fill .4s}
.rl-halo{fill:var(--acc);opacity:.16;transition:fill .4s}
.rl-ring{fill:none;stroke:var(--acc);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:rlring .55s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rlring{from{transform:scale(1);opacity:.7}to{transform:scale(3.4);opacity:0}}
.rl text{font-family:var(--mono);fill:var(--o-k5)}
.rl-lab{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.rl-fn{font-size:12.5px;letter-spacing:.02em;fill:var(--o-k2)}
.rl-fn .rl-val{fill:var(--o-k4);transition:fill .3s}
.rl[data-gate=act] .rl-fn .rl-val{fill:var(--acc)}
.rl .pop{animation:rlpop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes rlpop{0%{opacity:0}40%{opacity:1;fill:#fff}100%{opacity:1}}
.rl[data-gate=act] .rl-out[data-rl-out=act],
.rl[data-gate=wait] .rl-out[data-rl-out=wait]{fill:#fff}
.rl-out.sd{fill:var(--acc)!important}
.rl-note{fill:var(--o-k5)}
.rl-live-dot{fill:var(--acc)}
.rl-paused{display:none}
.dcw.is-paused .rl-live{display:none}.dcw.is-paused .rl-paused{display:inline}.dcw.is-paused .rl-live-dot{fill:var(--o-k5)}
.dcw.is-paused .rl-piv{animation:rlhold 2.6s ease-in-out infinite}
@keyframes rlhold{50%{opacity:.55}}
.rl-tick{transition:opacity .4s}
.dcw.is-paused .rl-tick{opacity:.45}.dcw.is-paused .rl-tail{opacity:0}
@media (max-width:600px){.rl{height:108px}.rl-fn,
.rl-note{display:none}}
@media (prefers-reduced-motion:reduce){.rl-blade,
.rl-pad,
.rl-dot,
.rl-halo,
.rl-piv,
.rl-fn .rl-val,
.rl-ln[data-rl-lane]{transition:none}.rl .pop,
.rl-piv.click,
.dcw.is-paused .rl-piv,
.rl.thrown::before{animation:none}.rl-tail,
.rl-ring{display:none}}

/* sonar: when a verdict lands, one ring spreads from the core in the chapter's colour */
.hub-sonar{fill:none;stroke:var(--acc);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.hub-sonar.ping{animation:hubsonar 1.5s cubic-bezier(.16,1,.3,1) 1}
@keyframes hubsonar{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(5)}}
@media (prefers-reduced-motion:reduce){.hub-sonar.ping{animation:none}}

/* ── hub build-in: once, when the section scrolls in. Core lands, wires draw outward from it, nodes rise in one by one. ── */
.dcw:not(.is-in) .hub-c,
.dcw:not(.is-in) .hub-n{opacity:0}
.dcw:not(.is-in) .hub-ln{stroke-dasharray:420;stroke-dashoffset:420}
.dcw:not(.is-in) .hub-pl,
.dcw:not(.is-in) .hub-port{opacity:0}
.dcw.is-in .hub-c{animation:hubcore .55s var(--spring) backwards}
@keyframes hubcore{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.dcw.is-in .hub-ln{animation:hubdraw .9s var(--easeout) .25s backwards}
@keyframes hubdraw{from{stroke-dasharray:420;stroke-dashoffset:420}to{stroke-dasharray:420;stroke-dashoffset:0}}
.dcw.is-in .hub-pl,
.dcw.is-in .hub-port{transition:opacity .5s ease 1.1s}
.dcw.is-in .hub-n{animation:hubnode .55s var(--spring) backwards}
@keyframes hubnode{from{opacity:0;transform:translate(-50%,-50%) translateY(10px) scale(.94)}to{opacity:1;transform:translate(-50%,-50%)}}
.dcw.is-in .hub-n[data-ch=core]{animation-delay:.7s}.dcw.is-in .hub-n[data-ch=bias]{animation-delay:.78s}.dcw.is-in .hub-n[data-ch=session]{animation-delay:.86s}
.dcw.is-in .hub-n[data-ch=shield]{animation-delay:.94s}.dcw.is-in .hub-n[data-ch=exec]{animation-delay:1.02s}.dcw.is-in .hub-n[data-ch=recover]{animation-delay:1.1s}
/* hover: the node's wire lights to the core, its readout brightens */
[data-spoke].hov .hub-ln{stroke:color-mix(in srgb,var(--acc) 60%,transparent)}
[data-spoke].hov .hub-pl{opacity:1;animation-duration:1.2s}
.hub-n:hover .hub-t em{color:var(--o-k3)}
@media (max-width:620px){.dcw.is-in .hub-n{animation:none}.dcw:not(.is-in) .hub-n{opacity:1}}
@media (prefers-reduced-motion:reduce){.dcw.is-in .hub-c,
.dcw.is-in .hub-ln,
.dcw.is-in .hub-n{animation:none}.dcw.is-in .hub-pl,
.dcw.is-in .hub-port{transition:none}}

/* ── console, third pass: the reference panel's own palette, type and spacing ── */
.dcw .ec{background:#111;border-color:#222}
.dcw .ec-log{padding:12px 14px 10px;gap:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 16px),transparent)}
.dcw .ec-prompt{padding:14px 50px 14px 16px;border-radius:18px;background:#242424;color:#fff;font-size:14.5px;line-height:1.4;box-shadow:none}
.dcw .ec-re{background:#363636;color:#ddd}.dcw .ec-re:hover{background:#444;color:#fff}
.dcw .ec-thought{margin:26px 0 10px 2px;font-size:12.5px;font-weight:500;color:#666}
.dcw .ec-thought i{background:var(--acc)}.dcw .ec-thought em{color:#555}
.dcw .ec-text{margin:0 2px;font-size:14.5px;line-height:1.45;color:#ccc}
.dcw .ec-text code{font-family:'IBM Plex Mono',var(--mono);font-size:12px;padding:2px 7px;border:1px solid #3a3a3a;background:#1a1a1a;color:#fff}
.dcw .ec-code{margin-top:22px;border-radius:16px;background:#111;border-color:#222}
.dcw .ec-file{padding:12px 14px;border-bottom-color:#222;font-size:13px}
.dcw .ec-file i{color:#777}.dcw .ec-file b u{color:#999;font-weight:400}.dcw .ec-file b span{color:#666}.dcw .ec-file em{color:#555}
.dcw .ec-code pre{padding:12px 14px 14px 12px;font-family:'IBM Plex Mono',var(--mono);font-size:12px;line-height:1.45;color:#fff;max-height:210px}
.dcw .ec-code .ln.add::before{color:#666}
.dcw .ec-code .k{color:#61a5d5}.dcw .ec-code .t{color:#7dd2d7}.dcw .ec-code .n{color:#dba86c}.dcw .ec-code .f{color:#fff}.dcw .ec-code .c{color:#666}.dcw .ec-code .b{font-style:normal;color:#6572a0}
.dcw .ec-code.over pre{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent)}
.dcw .ec-code .ln{transition:background-color .35s ease,box-shadow .35s ease;margin-left:-12px;padding-left:30px}
.dcw .ec-code .ln.hot{background:color-mix(in srgb,var(--acc) 12%,transparent);box-shadow:inset 2px 0 0 var(--acc)}
.dcw .ec-reply{display:flex;align-items:center;gap:10px;margin:14px 0 0 2px;padding:9px 12px;width:max-content;max-width:100%;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);background:color-mix(in srgb,var(--acc) 8%,transparent);animation:ecin .35s ease both}
.dcw .ec-reply b{font-family:'IBM Plex Mono',var(--mono);font-size:11.5px;font-weight:500;color:var(--acc);white-space:nowrap}
.dcw .ec-reply span{font-family:'IBM Plex Mono',var(--mono);font-size:10.5px;letter-spacing:.08em;color:#999;white-space:nowrap}
.dcw .ec-in{min-height:150px;margin:8px 10px 10px;padding:16px 14px 12px;border-radius:18px;background:#1f1f1f;border-color:#2a2a2a}
.dcw .ec-next{margin:0 2px 12px;font-size:14.5px;color:#797979;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.dcw .ec-next span{color:#ddd;min-height:1.4em}.dcw .ec-next span:empty::before{content:'Add follow up…';color:#797979}
.dcw .ec-next span::after{content:'';display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-2px;background:#bbb;animation:eccaret 1s steps(2) infinite}
.dcw .ec-next em{font-family:'IBM Plex Mono',var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#555}
@keyframes eccaret{50%{opacity:0}}
.dcw .ec-model{font-size:13px;color:#999}.dcw .ec-model i{background:var(--acc)}.dcw .ec-model svg{color:#777}
.dcw .ec-ib{width:30px;height:30px;background:#2e2e2e;color:#999}.dcw .ec-ib:hover{background:#3a3a3a;color:#fff}.dcw .ec-ib svg{width:13px;height:13px}
.dcw .ec-ib-go{background:#4a4a4a;color:#fff}.dcw .ec-ib-go:hover{background:#5a5a5a}
@media (prefers-reduced-motion:reduce){.dcw .ec-next span::after,
.dcw .ec-reply{animation:none}.dcw .ec-code .ln{transition:none}}
.dcw .ec{min-height:660px}
.dcw .ec-code pre{max-height:224px}
/* the lines are block spans; the newlines between them must not add a second line each */
.dcw .ec-code pre{white-space:normal}
.dcw .ec-code .ln:empty{min-height:.9em}

/* ── console: code lines reveal left to right with a brief tint, a block caret rides the line being typed, chapters crossfade ── */
.dcw .ec-code .ln.add{animation:none}   /* lines are typed, not revealed */
.dcw .ec-code .ln.add::before{animation:ecplus .3s ease both}
@keyframes ecplus{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.dcw .ec-code .caret{display:inline-block;width:7px;height:1.05em;margin-left:3px;vertical-align:-3px;border-radius:1px;background:var(--acc)}
.dcw .ec-code .caret.idle{animation:eccaret .9s steps(2) infinite}
.dcw .ec-text.typing::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:#ddd;animation:eccaret 1s steps(2) infinite}
.dcw .ec-turn.out{animation:ecout .24s ease forwards}
@keyframes ecout{to{opacity:0;transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.dcw .ec-code .ln.add,
.dcw .ec-code .ln.add::before,
.dcw .ec-turn.out{animation:none}.dcw .ec-code .caret,
.dcw .ec-text.typing::after{display:none}}

/* ── engine section: fixes from the section review ── */
/* phones and tablets: the two columns stack; the console sizes to its content */
@media (max-width:1100px){.dcw .dc{grid-template-columns:1fr}.dcw .ec{height:auto;min-height:0}}
@media (max-width:620px){.st-body{grid-template-columns:1fr;min-height:0}}
/* the stage fills its own box: the demo grows to the space the console's height gives it */
.dcw .st-body{align-items:stretch}
.dcw .st-box{align-self:stretch;display:flex;flex-direction:column;padding:14px 16px 12px}
.dcw .st-box h4{flex:none}.dcw .st-verdict{flex:none;margin:2px 0 10px}.dcw .st-verdict b{font-size:19px}
.dcw .st-rows{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly}
.dcw .st-rows p{padding:3px 0}
.st-foot{flex:none;margin:10px 0 0;padding-top:9px;border-top:1px solid var(--ln);font-size:10px;letter-spacing:.05em;color:var(--dm);line-height:1.5;transition:color .3s ease}
.st-foot::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--acc);margin:0 7px 1px 0;vertical-align:middle}
.dcw .st-demo{height:100%}
/* the hub's dot floor, tint and edge fade live on a layer under the nodes, so buttons and focus rings never fade */
.hub{background-image:none;-webkit-mask-image:none;mask-image:none}
.hub::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.2px),radial-gradient(48% 58% at 50% 50%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 72%);
  background-size:28px 28px,100% 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
/* pause stops every typer and blink */
.dcw.is-paused .ec-thought i,
.dcw.is-paused .caret,
.dcw.is-paused .ec-next span::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){[data-spoke].on .hub-pl,
[data-spoke].hov .hub-pl{opacity:0}}

/* ── phone pass ── */
@media (max-width:620px){
  /* hero window: show the whole portal page, no desktop crop or pan; the frame takes the page's own shape */
  .win-view .shot{--fx:0!important;--fw:1!important}
  .win-view .plate{--fy:0!important;transform:none!important;width:100%!important}
  .win{height:auto}.win-view{flex:none;height:auto;aspect-ratio:2000/1447}
  .hero-meta{text-align:left}
  /* product cards: the screenshot crops were cut for desktop; on a phone show them full width */
  .bn-shot img{left:0!important;width:100%!important}
}
@media (pointer:coarse){
  .dcw .ec-ib{width:38px;height:38px}
  .win-nav button,
.win-play{min-width:36px;min-height:36px}
}

/* ── the demo panel gets the module box's skeleton: header, drawing, legend. Softer motion throughout the stage. ── */
.dcw .st-view{display:flex;flex-direction:column;min-width:0;border:1px solid var(--ln);border-radius:12px;overflow:hidden;
  background-color:#04050a;background-image:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1.2px),radial-gradient(70% 80% at 50% 50%,color-mix(in srgb,var(--acc) 6%,transparent),transparent 78%);
  background-size:14px 14px,100% 100%}
.dcw .st-demo{flex:1 1 auto;height:0;min-height:120px;width:100%;border:0;border-radius:0;background:none;padding:4px 6px}
.st-vh,
.st-vl{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:9px 12px;font-size:10px;letter-spacing:.1em;color:var(--dm)}
.st-vh{border-bottom:1px solid var(--ln);background:rgba(255,255,255,.015)}
.st-vh b{font-weight:600;color:var(--acc);transition:color .4s ease}
.st-vh em{font-style:normal;text-transform:uppercase;font-size:10px;color:var(--dm)}
.st-vl{border-top:1px solid var(--ln);font-size:10px;letter-spacing:.05em;line-height:1.5;text-transform:none;color:var(--dm)}
/* motion: things fade and settle instead of popping */
.st-demo .cd,
.st-demo text,
.st-demo line,
.st-demo circle,
.st-demo path{transition:opacity .4s ease,stroke .35s ease,fill .35s ease}
.st-rows b{transition:color .3s ease}
.st-rows b.chg,
.st-foot.chg{animation:rowchg .9s ease-out}
@keyframes rowchg{0%{color:var(--acc)}60%{color:var(--acc)}100%{color:inherit}}
.st-foot::before{animation:footdot 2.4s ease-in-out infinite}
@keyframes footdot{50%{opacity:.35}}
.st-body.swap{animation:stswap .6s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.st-demo *,
.st-rows b{transition:none}.st-rows b.chg,
.st-foot.chg,
.st-foot::before,
.st-body.swap{animation:none}}

/* ── settings: the EA's inputs, one clean line each. Plan and mode dropdowns; tap a row for one line of plain English. ── */
.inp{margin-top:28px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#07080b;overflow:hidden;
  box-shadow:0 22px 64px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.inp-bar{display:flex;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(8,8,12,.75)}
.inp-bar > b{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.inp-sel{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--o-k4)}
.inp-sel select{font:inherit;font-size:12.5px;color:#fff;background:#141418;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:5px 28px 5px 10px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
.inp-sel select:disabled{color:var(--o-k4);cursor:default}
.inp-leg{display:inline-flex;gap:14px;margin-left:4px}
.inp-leg i{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:11px;color:var(--o-k4);white-space:nowrap}
.inp-leg svg,
.inp-r .lk{width:13px;height:13px;flex:none}
.lk[data-lock=plan],
.inp-leg i[data-lock=plan]{color:var(--o-red)}.lk[data-lock=mode],
.inp-leg i[data-lock=mode]{color:var(--o-amber)}.lk[data-lock=free],
.inp-leg i[data-lock=free]{color:var(--o-green)}
.inp-sw{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;color:var(--o-k4);cursor:pointer;white-space:nowrap;user-select:none}
.inp-sw input{position:absolute;opacity:0;width:1px;height:1px}
.inp-sw i{position:relative;width:30px;height:17px;border-radius:999px;background:#26262b;transition:background-color .2s ease}
.inp-sw i::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#9a9a9e;transition:transform .2s ease,background-color .2s ease}
.inp-sw input:checked + i{background:color-mix(in srgb,var(--acc) 55%,#26262b)}.inp-sw input:checked + i::after{transform:translateX(13px);background:#fff}
.inp-sw input:focus-visible + i{outline:2px solid color-mix(in srgb,var(--acc) 60%,transparent);outline-offset:2px}
.inp-all{font:inherit;font-size:12px;color:var(--o-k3);background:#141418;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.inp-all:hover{background:#1c1c22;color:#fff}
.inp-sum{margin:0;padding:11px 18px;font-size:13px;line-height:1.5;color:var(--o-k3);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.015)}
.inp-sum b{font-weight:600;color:#fff}.inp-sum b::after{content:' · ';color:var(--o-k5);font-weight:400}
.inp-grid{column-count:3;column-gap:0;padding:4px 0 8px}
.inp-g{display:block;break-inside:avoid;padding:14px 18px 12px;border-right:1px solid rgba(255,255,255,.05);transition:background-color .4s ease,box-shadow .4s ease}
.inp-g h5{margin:0 0 4px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--o-k3);transition:color .4s ease}
.inp-g.on{background:color-mix(in srgb,var(--acc) 5%,transparent);box-shadow:inset 3px 0 0 var(--acc)}
.inp-g.on h5{color:var(--acc)}
.inp-r{border-bottom:1px solid rgba(255,255,255,.05)}
.inp-r:last-child{border-bottom:0}
.inp-row{display:grid;grid-template-columns:minmax(0,1fr) auto 13px;align-items:center;column-gap:10px;width:100%;padding:9px 0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.inp-row b{font-weight:400;font-size:13px;color:var(--o-k2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}
.inp-row:hover b{color:#fff}
.inp.raw .inp-row b{font-family:'IBM Plex Mono',var(--mono);font-size:12px}
.inp-row em{font-style:normal;font-family:'IBM Plex Mono',var(--mono);font-size:11.5px;color:#fff;white-space:nowrap;transition:color .3s ease}
.inp-row em u{text-decoration:none;color:var(--o-k5);margin-left:3px;font-size:10.5px}
.inp-row em.chg{animation:rowchg .9s ease-out}
.inp-r[data-lock=plan] .inp-row em{color:var(--o-k3)}
.inp-r .lk{cursor:help}
.inp-d{display:none;margin:-3px 0 10px;padding:0 23px 0 0;font-size:12px;line-height:1.5;color:var(--o-k4)}
.inp-r.open .inp-d{display:block;animation:ecin .25s ease both}
.inp-r.open .inp-row b{color:#fff}
.inp-r.more{display:none}
.inp.all .inp-r.more{display:block}
@media (max-width:1100px){.inp-grid{column-count:2}.inp-leg{display:none}}
@media (max-width:620px){.inp-grid{column-count:1}.inp-g{border-right:0}.inp-bar{flex-wrap:wrap;gap:8px 12px}.inp-sw{margin-left:0}.inp-sum{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.inp-row em.chg,
.inp-r.open .inp-d{animation:none}}

/* settings: the type from the first inputs box — mono group titles, a small VARIABLE / VALUE header, Inter names, mono values, roomy rows */
.inp-g{padding:16px 18px 14px}
.inp-g h5{margin:0 0 8px;font-size:11px;letter-spacing:.16em;color:var(--o-k2)}
.inp-h{display:flex;justify-content:space-between;padding:0 23px 6px 0;border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--o-k6)}
.inp-row{padding:8px 0;column-gap:12px}
.inp-row b{font-size:13.5px;color:var(--o-k3)}
.inp-row:hover b,
.inp-r.open .inp-row b{color:#fff}
.inp.raw .inp-row b{font-family:var(--font);font-size:13.5px}
.inp-row em{font-size:12.5px}
.inp-row em u{font-size:11px}
.inp-r{border-bottom:1px solid rgba(255,255,255,.045)}
.inp-d{font-size:12.5px;margin:-2px 0 11px}

/* settings: exact sizes and colours of the first inputs box */
.inp-g{padding:12px 18px 8px}
.inp-g h5{margin:0 0 6px;font-size:10px;letter-spacing:.12em;color:var(--o-k4)}
.inp-h{padding:4px 23px 6px 0;font-size:10px;color:var(--o-k6);border-bottom-color:rgba(255,255,255,.06)}
.inp-row{padding:5px 0}
.inp-row b{font-size:11.5px;color:var(--o-k3)}
.inp.raw .inp-row b{font-size:11.5px}
.inp-row em{font-size:11px}
.inp-row em u{font-size:10px}
.inp-r{border-bottom:1px solid rgba(255,255,255,.035)}
.inp-d{font-size:11.5px;margin:-1px 0 9px}
.inp-sel{white-space:nowrap}
/* settings: names mid grey, values light grey */
.inp-row b{color:var(--o-k4)}
.inp-row em{color:var(--o-k3)}
.inp-r[data-lock=plan] .inp-row em{color:var(--o-k3)}
.inp-row:hover b,
.inp-r.open .inp-row b{color:var(--o-k2)}

/* settings: compare view — one wide list, three value columns, Basic · Premium · Lifetime */
.inp-cv{display:none;align-items:center;justify-content:flex-end;gap:10px}
.inp-cv em{font-style:normal;font-family:'IBM Plex Mono',var(--mono);font-size:11px;color:var(--o-k3);white-space:nowrap}
.inp-cv em u{text-decoration:none;color:var(--o-k5);margin-left:3px;font-size:10px}
.inp-cv[data-c=lifetime] em{color:#fff}
.inp.is-cmp .inp-cv{display:inline-flex}
.inp.is-cmp .inp-row > [data-val],
.inp.is-cmp .inp-row > .lk{display:none}
.inp.is-cmp .inp-row{grid-template-columns:minmax(0,1fr) 150px 150px 150px;column-gap:18px}
.inp.is-cmp .inp-grid{column-count:1}
.inp.is-cmp .inp-g{border-right:0;padding:12px 22px 8px}
.inp.is-cmp .inp-h{display:grid;grid-template-columns:minmax(0,1fr) 150px 150px 150px;column-gap:18px;padding-right:0}
.inp.is-cmp .inp-h span{text-align:right}.inp.is-cmp .inp-h span:first-child{text-align:left}
.inp.is-cmp .inp-h span[data-c=lifetime]{color:var(--o-k3)}
.inp-h span[data-c]{display:none}.inp.is-cmp .inp-h span[data-c]{display:inline}.inp.is-cmp .inp-h span[data-h=value]{display:none}
.inp.is-cmp .inp-sel[data-plan-wrap]{display:none}
.inp.is-cmp .inp-sum{display:none}
.inp-all[aria-pressed=true]{background:#fff;color:#000;border-color:#fff}
@media (max-width:820px){.inp.is-cmp .inp-row,
.inp.is-cmp .inp-h{grid-template-columns:minmax(0,1fr) 84px 84px 84px;column-gap:8px}.inp.is-cmp .inp-cv em{font-size:10.5px}}
.inp.is-cmp .inp-row,
.inp.is-cmp .inp-h{grid-template-columns:minmax(0,1.4fr) 1fr 1fr 1fr;column-gap:14px}
.inp.is-cmp .inp-cv{justify-content:center;padding-left:24px}
.inp.is-cmp .inp-h span[data-c]{text-align:center;padding-left:24px}
.inp.is-cmp .inp-cv[data-c=lifetime]{background:rgba(255,255,255,.025);border-radius:6px;padding:3px 8px 3px 32px;margin:-3px 0}
@media (max-width:820px){.inp.is-cmp .inp-row,
.inp.is-cmp .inp-h{grid-template-columns:minmax(0,1.2fr) 1fr 1fr 1fr;column-gap:6px}.inp.is-cmp .inp-cv,
.inp.is-cmp .inp-h span[data-c]{padding-left:8px}}
.inp-all[aria-expanded=true]{background:#fff;color:#000;border-color:#fff}
.inp-all[aria-expanded=true]:hover{background:#e8e8ea;color:#000}
.inp-r.more{animation:none}
.inp.all .inp-r.more{animation:ecin .3s ease both}
/* settings header: never clip. Below 1300px the lock legend drops to its own line; below 900px everything wraps freely */
.inp-bar{flex-wrap:wrap;row-gap:10px}
.inp-bar > b,
.inp-sel,
.inp-sw,
.inp-all{flex:none}
@media (max-width:1300px){.inp-leg{flex:1 1 100%;order:9;margin-left:0}}
@media (max-width:900px){.inp-sw{margin-left:0}.inp-all{margin-left:0}}
.inp-bar{gap:12px 14px}

/* settings: sticky header, only-differences, plan column lines, phone compare as chips */
.inp{overflow:clip}
.inp-bar{position:sticky;top:64px;z-index:3;background:#0a0a0e}
.inp-diff{display:none}.inp.is-cmp .inp-diff{display:inline-flex}
.inp-cols{display:none;grid-template-columns:minmax(0,1.4fr) 1fr 1fr 1fr;column-gap:14px;padding:12px 22px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.015)}
.inp.is-cmp .inp-cols{display:grid}
.inp-cols b{display:flex;flex-direction:column;align-items:center;gap:3px;padding-left:24px;text-align:center;font-weight:400}
.inp-cols b i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--o-k4)}
.inp-cols b em{font-style:normal;font-size:12px;color:var(--o-k3);line-height:1.4}
.inp-cols b[data-c=lifetime] i{color:#fff}.inp-cols b[data-c=lifetime] em{color:#fff}
.inp.is-cmp.diff .inp-r.same{display:none}
.inp.is-cmp .inp-r.same .inp-cv em{color:var(--o-k5)}
@media (max-width:620px){
  .inp.is-cmp .inp-row{display:flex;flex-wrap:wrap;gap:6px 8px;padding:8px 0}
  .inp.is-cmp .inp-row b{flex:1 1 100%}
  .inp.is-cmp .inp-cv{flex:1 1 auto;justify-content:space-between;padding:4px 8px;margin:0;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:none}
  .inp.is-cmp .inp-cv::before{content:attr(data-c);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--o-k5);margin-right:8px}
  .inp.is-cmp .inp-h,
.inp.is-cmp .inp-cols{display:none}
  .inp-bar{top:56px}
}
@media (max-width:620px){
  .inp.is-cmp .inp-cv{flex:1 1 100%;margin:0}
  .inp-bar > *{max-width:100%}
  .inp.is-cmp .inp-row b{margin-bottom:2px}
}

/* ── first run: eight steps, one sticky frame ── */
#setup .sec-head{max-width:720px}
.fr-pre{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;margin:26px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--o-k3)}
.fr-pre li{display:inline-flex;align-items:center;gap:8px}
.fr-pre li b{font-family:var(--mono);font-size:.59rem;letter-spacing:.18em;text-transform:uppercase;color:var(--o-k5);font-weight:500}
.fr-pre li i{width:6px;height:6px;border-radius:50%;background:#ff9f5a;opacity:.85}
.frw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0 56px;align-items:start;margin-top:40px}
.fr-steps{margin:0;padding:0;list-style:none}
.fr-step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 10px;padding:22px 0 22px;border-top:1px solid rgba(255,255,255,.06);cursor:pointer;outline:none;transition:opacity .35s ease}
.fr-step:last-child{border-bottom:1px solid rgba(255,255,255,.06)}
.fr-step::before{content:'';position:absolute;left:-18px;top:22px;bottom:22px;width:2px;border-radius:2px;background:#ff9f5a;opacity:0;transform:scaleY(.4);transform-origin:top;transition:opacity .35s ease,transform .45s cubic-bezier(.4,0,.2,1)}
.fr-step.on::before{opacity:1;transform:scaleY(1)}
.fr-step:not(.on){opacity:.55}
.fr-step:hover,
.fr-step:focus-visible{opacity:.85}
.fr-step.on{opacity:1}
.fr-step:focus-visible .fr-n{box-shadow:0 0 0 2px rgba(255,159,90,.5)}
.fr-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--o-k4);transition:box-shadow .35s ease,color .35s ease,background-color .35s ease}
.fr-step.on .fr-n{background:#ff9f5a;color:#000;box-shadow:none}
.fr-t h3{margin:4px 0 0;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em;color:#fff;line-height:1.25}
.fr-t p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--o-k4);max-width:46ch}
.fr-t p b{color:var(--o-k2);font-weight:500;overflow-wrap:anywhere}
.fr-frame{position:sticky;top:96px;min-height:440px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#0a0a0e;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 30px 60px -40px rgba(0,0,0,.8);overflow:hidden}
.fr-view{position:absolute;inset:0;padding:26px 28px 36px;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s cubic-bezier(.4,0,.2,1);pointer-events:none}
.fr-view.on{opacity:1;transform:none}
[data-hi]{position:relative;transition:box-shadow .4s ease}
.fr-frame[data-step="1"] [data-hi="1"],
.fr-frame[data-step="2"] [data-hi="2"],
.fr-frame[data-step="3"] [data-hi="3"],
.fr-frame[data-step="4"] [data-hi="4"],
.fr-frame[data-step="5"] [data-hi="5"],
.fr-frame[data-step="7"] [data-hi="7"]{box-shadow:0 0 0 2px #ff9f5a,0 0 0 6px rgba(255,159,90,.18)}
/* portal surfaces */
.pv-k{margin:0;font-family:var(--mono);font-size:.59rem;letter-spacing:.18em;text-transform:uppercase;color:var(--o-k5)}
.pv-h{margin:6px 0 0;font-family:var(--display);font-size:20px;font-weight:600;color:#fff;letter-spacing:-.01em}
.pv-card{margin-top:18px;padding:18px 20px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#111}
.pv-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12.5px;color:var(--o-k4)}
.pv-row b{font-weight:500;color:var(--o-k2)}
.pv-mono{font-family:var(--mono);font-size:11.5px}

.pv-btn,
.pv-btn2{display:inline-block;margin:16px 0 0;padding:9px 16px;border-radius:9px;background:#fff;color:#000;font-size:12.5px;font-weight:600}
.pv-btn2{background:none;color:var(--o-k3);border:1px solid rgba(255,255,255,.14);margin-left:8px}
.pv-btns{margin:0}
.pv-note{display:flex;align-items:center;gap:7px;margin:14px 0 0;font-size:11.5px;color:var(--o-k5)}
.pv-ok{width:7px;height:7px;border-radius:50%;background:#3ecf6e}
.pv-eb{margin:0;font-family:var(--mono);font-size:.59rem;letter-spacing:.16em;text-transform:uppercase;color:#ff9f5a}
.pv-h3{margin:8px 0 0;font-family:var(--display);font-size:17px;font-weight:600;color:#fff}
.pv-code{display:flex;gap:8px;margin:14px 0 0}
.pv-code b{display:grid;place-items:center;width:34px;height:42px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#0a0a0e;font-family:var(--mono);font-size:16px;color:var(--o-k3)}
.pv-help{margin:12px 0 4px;font-size:12px;line-height:1.55;color:var(--o-k4)}
/* MetaTrader surface */
.fr-mt{padding:0}
.mt-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);background:#141418}
.mt-bar span{width:9px;height:9px;border-radius:50%;background:#2a2a30}
.mt-bar em{margin-left:8px;font-style:normal;font-size:11px;color:var(--o-k5)}
.mt-body{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:400px}
.mt-nav{padding:14px 0;border-right:1px solid rgba(255,255,255,.08);background:#0d0d11}
.mt-nh{margin:0 14px 10px;font-family:var(--mono);font-size:.59rem;letter-spacing:.16em;text-transform:uppercase;color:var(--o-k5)}
.mt-ni{margin:0;padding:6px 14px;font-size:12px;color:var(--o-k4)}
.mt-ni.open{color:var(--o-k2)}
.mt-ni.sub{margin:2px 10px 2px 22px;padding:5px 8px;border-radius:6px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(255,255,255,.05)}
.mt-chart{position:relative;padding:14px 16px;background:#0a0a0e}
.mt-ch{margin:0;font-family:var(--mono);font-size:12px;color:#fff;display:inline-block;padding:4px 8px;border-radius:6px}
.mt-ch small{margin-left:8px;font-size:10.5px;color:var(--o-k5)}
.mt-cs{display:block;width:100%;height:150px;margin-top:14px}
.mt-dlg{position:absolute;left:50%;top:58%;transform:translate(-50%,-40%);width:min(300px,86%);padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#16161a;box-shadow:0 20px 40px -20px rgba(0,0,0,.9);opacity:0;transition:opacity .4s ease}
.fr-frame[data-step="5"] .mt-dlg{opacity:1}
.mt-dh{margin:0 0 8px;font-size:11px;color:var(--o-k5)}
.mt-in{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid rgba(255,255,255,.06);font-family:var(--mono);font-size:10.5px;color:var(--o-k4)}
.mt-in b{font-weight:400;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-in span{white-space:nowrap}
/* chart lock box + journal */
.lk-box{padding:16px 18px;border:1.5px solid #d62c2c;border-radius:4px;background:#000;font-family:Consolas,var(--mono)}
.lk-t{margin:0;font-size:12.5px;font-weight:700;color:#ff3b3b;letter-spacing:.01em}
.lk-m{margin:10px 0 0;font-size:10.5px;line-height:1.55;color:#fff}@keyframes frLine{to{opacity:1}}
/* status strip + footer */
.fr-foot{margin:22px auto 0;max-width:760px;text-align:center;font-size:13px;line-height:1.65;color:var(--o-k4)}
.fr-foot b{color:var(--o-k2);font-weight:500}
.fr-foot a{display:inline-flex;align-items:center;gap:6px;margin-left:10px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.fr-foot a svg{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.fr-view,
.fr-step,
.fr-step::before,
.fr-n{transition:none}.mtw-lgr{animation:none;opacity:1}}
@media (max-width:1100px){.frw{gap:0 32px}.fr-step::before{left:-12px}}
@media (max-width:820px){
  .frw{grid-template-columns:1fr;gap:0}
  .fr-frame{order:-1;position:sticky;top:60px;z-index:2;min-height:0;height:min(46vh,380px);margin:0 0 20px;border-radius:14px}
  .fr-view{padding:18px 18px 30px}
  .fr-steps{padding-left:0}
  .fr-step{grid-template-columns:36px minmax(0,1fr);padding:18px 0}
  .fr-step::before{left:-6px}
  .fr-n{width:26px;height:26px;font-size:10px}
  .fr-t h3{font-size:16px}
  .mt-body{grid-template-columns:118px minmax(0,1fr);min-height:0}
  .mt-cs{height:110px}
    .fr-foot a{display:flex;justify-content:center;margin:10px 0 0}
}
@media (max-width:520px){
  .fr-frame{height:min(50vh,340px)}
    .mt-body{grid-template-columns:1fr}
  .mt-nav{display:none}
  .pv-code b{width:28px;height:36px;font-size:14px}
}
/* first run: frame tall enough for the download view; label reads over content; phone frame fades at the bottom */
.fr-frame{min-height:500px}
@media (max-width:820px){
  .fr-frame{min-height:0}
  .fr-frame::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to bottom,rgba(10,10,14,0),#0a0a0e 85%);pointer-events:none}
  }
/* first run: the real security note runs to two lines */
.pv-note{align-items:flex-start;line-height:1.5;max-width:44ch}
.pv-ok{flex:none;margin-top:5px}

/* ── setup guide page: header, jump links ── */
#guide-top{padding-top:132px}
#guide-top .sec-head h1{margin-top:10px;font-family:var(--display);font-size:clamp(27px,3.6vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1.08;color:#fff}
#guide-top .sec-head p{margin-left:auto;margin-right:auto}
#check{padding-top:96px}
#stop{padding-top:96px}
/* ── account checks ── */

.ck-row{position:relative;padding:20px 0 20px 40px;border-top:1px solid rgba(255,255,255,.06);counter-increment:ck;cursor:default;outline:none}
.ck-row:last-child{border-bottom:1px solid rgba(255,255,255,.06)}
.ck-row::before{content:counter(ck,decimal-leading-zero);position:absolute;left:0;top:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--o-k5);transition:color .3s ease}
.ck-row b{display:block;font-family:var(--display);font-size:16.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.ck-row span{display:block;margin-top:7px;font-size:13.5px;line-height:1.6;color:var(--o-k4);max-width:52ch}
.ck-row em{display:inline-block;margin-top:10px;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--o-k5);padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.04);transition:color .3s ease,background-color .3s ease}
/* ── when something goes wrong ── */
.stp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:40px 0 0;padding:0;list-style:none}
.stp li{display:flex;flex-direction:column;padding:18px 18px 16px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:#0a0a0e}
.stp li.warn{border-color:rgba(255,190,74,.3)}
.stp b{font-family:var(--display);font-size:14.5px;font-weight:600;line-height:1.3;color:#fff;letter-spacing:-.01em}
.stp li p span{display:block;margin-bottom:2px;font-family:var(--mono);font-size:.59rem;letter-spacing:.14em;text-transform:uppercase;color:var(--o-k5)}

.stp-foot{margin:22px 0 0;text-align:center;font-size:13px;color:var(--o-k4)}
.stp-foot a{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.stp-foot a svg{width:14px;height:14px}
/* ── landing page teaser ── */
/* ── landing page teaser: two of the guide's eight steps, its readout strip, two of its frames. Radios drive the still and the strip; no JS ── */
#setup-lead{padding:24px 0 120px;background:#000}
#setup-lead::before,#sessions::before{content:none}   /* no glow, no tint: flat black like the sections around it; the orange stays on the kicker and the active step only */
#setup-lead{--code:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace}   /* .fr-st b and .fl-n read --code; the guide sets it per chapter, the home page never did */
#setup-lead + #sessions{padding-top:64px}
.fl{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 520px;grid-template-rows:auto 1fr;gap:0 56px;align-items:start}
.fl > input{position:fixed;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}   /* visually hidden, still focusable; fixed (not absolute) so a label click never scrolls the page to the radio */
.fl-t{grid-column:1;min-width:0}
.fl-t h2{margin:10px 0 0;font-family:var(--display);font-size:clamp(23px,3vw,39px);line-height:1.12;color:#fff}
.fl-t h2 + p{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--o-k4);max-width:52ch}
.fl-fig{grid-column:2;grid-row:1/3;display:grid;margin:0;min-width:0}
.fl-fig a{grid-area:1/1;display:block;border-radius:16px;box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.fl-fig a[data-fl="8"]{z-index:1;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
#fl-s8:checked ~ .fl-fig a[data-fl="8"]{opacity:1;visibility:visible;transition-delay:0s}
#fl-s8:checked ~ .fl-fig a[data-fl="6"]{visibility:hidden;transition:visibility 0s linear .25s}   /* 06 stays under the fade, then drops out of the tab order */
.fl-fig a:focus-visible{outline:2px solid #ff9f5a;outline-offset:4px}
.fl-fig img{display:block;width:100%;height:auto;border-radius:16px}
.fl-b{grid-column:1;min-width:0;margin-top:20px}
.fl-step{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;gap:0 14px;align-items:start;padding:14px 0;border-top:1px solid rgba(255,255,255,.06);cursor:pointer}
.fl-step:last-of-type{border-bottom:1px solid rgba(255,255,255,.06)}
.fl-n{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;margin-top:2px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-family:var(--code);font-style:normal;font-size:10.5px;letter-spacing:.06em;color:var(--o-k4)}
.fl-step b{grid-column:2;margin-top:4px;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--o-k3)}
.fl-step span{grid-column:2;margin-top:5px;font-size:13.5px;line-height:1.6;color:var(--o-k4)}
.fl-c{grid-column:3;grid-row:1/3;width:16px;height:16px;margin-top:11px;color:var(--o-k6);transition:color .16s ease,transform .16s ease}
.fl-step:hover b,.fl-step:hover .fl-c{color:#fff}
#fl-s6:checked ~ .fl-b [for="fl-s6"] b,
#fl-s8:checked ~ .fl-b [for="fl-s8"] b{color:#fff}
#fl-s6:checked ~ .fl-b [for="fl-s6"] .fl-n,
#fl-s8:checked ~ .fl-b [for="fl-s8"] .fl-n{background:#ff9f5a;color:#000;box-shadow:none}
#fl-s6:checked ~ .fl-b [for="fl-s6"] .fl-c,
#fl-s8:checked ~ .fl-b [for="fl-s8"] .fl-c{color:#ff9f5a;transform:translateX(3px)}
#fl-s6:focus-visible ~ .fl-b [for="fl-s6"],
#fl-s8:focus-visible ~ .fl-b [for="fl-s8"]{outline:2px solid #ff9f5a;outline-offset:3px;border-radius:6px}
#fl-s6:checked ~ .fl-b .fr-st[data-fl="8"],
#fl-s8:checked ~ .fl-b .fr-st[data-fl="6"]{visibility:hidden}
.fl-sts{display:grid;margin-top:12px}
.fl-sts > .fr-st{grid-area:1/1;margin-top:0}   /* two strips share one cell so the swap never shifts layout */
#setup-lead .fr-st b{font-size:9px;color:var(--o-k5)}   /* the guide's 8px / k6 labels are decoration there, content here */
.fl-b .pill{margin-top:18px}
@media (prefers-reduced-motion:reduce){.fl-fig a,.fl-c{transition:none}}
@media (max-width:1100px){.stp{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:900px){
  .fl{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .fl-t h2 + p{max-width:none}
  .fl-fig{grid-column:auto;grid-row:auto;max-width:520px;margin-top:26px}
  .fl-b{grid-column:auto}
}
@media (max-width:820px){#setup-lead{padding:24px 0 72px}}
@media (max-width:820px){
  #guide-top{padding-top:104px}
  #check,
#stop{padding-top:64px}
  
  .ck-row{padding-left:34px}
    .stp{grid-template-columns:1fr 1fr}
  
}
@media (max-width:520px){.stp{grid-template-columns:1fr}}
.stp-note{margin:10px 0 0!important;font-size:12px!important;font-style:italic;color:var(--o-k5)!important}

/* ── setup guide, second pass ── */
#setup{padding-top:96px}
#after{padding:96px 0 12px;text-align:center}
#after .sec-kicker{margin:0}
#after h2{margin:10px 0 0;font-family:var(--display);font-size:clamp(21px,2.4vw,30px);font-weight:600;letter-spacing:-.02em;color:#fff}
#after p{margin:12px auto 0;max-width:52ch;font-size:13.5px;line-height:1.6;color:var(--o-k4)}
.af-go{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;margin-top:26px}
.af-go a{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.af-go a svg{width:14px;height:14px}
/* chapter index */

/* hand-off between chapters */
.gt-next{margin:34px 0 0;text-align:center}
.gt-next a{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.gt-next a svg{width:14px;height:14px}
/* checks: one column, real headings */

.ck-row{padding:20px 0 20px 40px;cursor:auto}
.ck-row h3{margin:0;font-family:var(--display);font-size:16.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.ck-row p{margin:7px 0 0;font-size:13.5px;line-height:1.6;color:var(--o-k4);max-width:62ch}
/* stop cards */
.stp{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.stp h3{margin:0;font-family:var(--display);font-size:15.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:#fff}
.stp h3::before{content:'';display:block;width:20px;height:2px;margin-bottom:12px;border-radius:2px;background:#5b7cff}
.stp li.warn h3::before{background:#ffbe4a}

/* the mock caption sits outside the frame, so it can be read */
.fr-stick{position:sticky;top:96px}
.fr-frame{position:static}
.fr-cap{margin:0 0 10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--o-k4)}
.fr-step{scroll-margin-top:46vh}
/* you-are-here inside a band or the sheet: the current link keeps a quiet hairline
   underline — the only mark in a list where every link is otherwise plain white */
.dd-item[aria-current="page"] b{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.4)}
@media (max-width:1100px){.stp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  #setup{padding-top:64px}
  #after{padding-top:64px}
  
  
  .ck-row{padding-left:34px}
  .stp{grid-template-columns:1fr}
  .fr-stick{order:-1;position:sticky;top:60px;z-index:2;margin:0 0 20px}
  .fr-frame{margin:0}
}
.ck-row::before{color:#35d6ff}
/* ── setup guide: type scale, machine voice, chapter rules ── */
#guide-top,
#check,
#setup,
#stop,
#after{--code:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-h3:17px;--fs-body:13.5px;--fs-sm:12.5px;--fs-code:11px;--fs-lab:.6rem}
.fr-cap,
.fr-n,
.mt-in,
.mt-ni.sub,
.mt-nh,
.pv-mono,
.pv-code b,
.pv-k,
.pv-eb,
.ck-row::before,
.say{font-family:var(--code)}.ck-row h3,
.fr-t h3,
.stp h3{font-size:var(--fs-h3);line-height:1.3}
.ck-row p,
.fr-t p{font-size:var(--fs-body);line-height:1.6}
.stp li p:not(.say):not(.stp-note){font-size:var(--fs-sm);line-height:1.55;max-width:56ch}
.say span,
.stp li p span,
.fr-pre li b,
.pv-k,
.pv-eb,
.mt-nh{font-size:var(--fs-lab);letter-spacing:.16em}
.fr-n,
.ck-row::before,
.pv-code b{font-variant-numeric:tabular-nums}
/* every line the software really prints, in one voice */
.say{display:block;margin:11px 0 0;padding:9px 12px;border-left:2px solid var(--say,#ff9f5a);
  border-radius:0 8px 8px 0;background:rgba(255,255,255,.03);font-size:var(--fs-code);
  line-height:1.55;color:var(--o-k2);overflow-wrap:anywhere;max-width:none}
.say > span{display:block;margin-bottom:4px;text-transform:uppercase;color:var(--o-k5)}
#check .say{--say:#ff8f8f}
#setup .say{--say:#ff9f5a}
#stop .say{--say:#5b7cff}
#stop li.warn .say{--say:#ffbe4a}
.stp-note{margin:10px 0 0!important;font-size:12px!important;font-style:italic;color:var(--o-k5)!important}
/* a labelled hairline where a wide faint glow used to sit */

/* chapter index: a glyph and one mark per item */

/* the ending gets the site's flat button, and every arrow leans on hover */
.af-go{gap:12px 14px}
.af-go a{border-bottom:0}
.gt-next a svg,
.stp-foot a svg,
.fr-foot a svg,
.af-go a svg{transition:transform .22s var(--o-eo)}
@media (prefers-reduced-motion:no-preference){
  .gt-next a:hover svg,
.stp-foot a:hover svg,
.fr-foot a:hover svg,
.af-go a:hover svg,
.gt-next a:focus-visible svg,
.af-go a:focus-visible svg{transform:translateX(2px)}
}

/* ── setup guide: real captures, step meter, grain ── */
.gt-shot{position:relative;margin:34px 0 0;padding-left:14px}
.gt-shot::before{content:'';position:absolute;left:0;top:2px;bottom:32px;width:1px;background:var(--c);opacity:.45}
.gt-shot .shot{border-radius:12px;aspect-ratio:2/1}

.gt-shot .shot::after{content:none}
.gt-shot figcaption{margin-top:10px;font-family:var(--code);font-size:var(--fs-code);color:var(--o-k5)}
/* the frame header: which surface, which step, how far in */
.fr-cap{display:flex;align-items:center;gap:12px}
.fr-cap span[data-fr-cap]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-cap b{flex:none;font-weight:400;font-variant-numeric:tabular-nums;color:var(--o-k3)}
.fr-meter{flex:none;width:120px;height:4px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100%/8 - 2px),transparent calc(100%/8 - 2px) calc(100%/8));
  mask:repeating-linear-gradient(90deg,#000 0 calc(100%/8 - 2px),transparent calc(100%/8 - 2px) calc(100%/8))}
.fr-meter i{display:block;height:100%;background:#ff9f5a;transform-origin:left;
  transform:scaleX(calc(var(--n,1)/8));transition:transform .42s cubic-bezier(.4,0,.2,1)}
.fr-grain{position:absolute;inset:0;z-index:0;opacity:.035;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat}
.fr-view{z-index:1}
.lk-box{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-blend-mode:overlay}
@media (prefers-reduced-motion:reduce){.fr-meter i{transition:none}}
@media (max-width:820px){
  .fr-meter{width:84px}
  #setup .gt-shot .shot{--fx:.40;--fy:.38;--fw:.32;aspect-ratio:1.6/1}
  #stop .gt-shot .shot{--fw:.20;aspect-ratio:3/1}
}

/* ── setup guide: the interval chart, reveals, the progress rail ── */
.clk{max-width:900px;margin:48px auto 0}
.clk h3{margin:0;font-family:var(--display);font-size:var(--fs-h3);font-weight:600;letter-spacing:-.01em;color:#fff;text-align:center}
.clk-sub{margin:9px 0 0;text-align:center;font-size:var(--fs-sm);line-height:1.6;color:var(--o-k5)}
.clk-rows{margin:26px 0 0;padding:0;list-style:none}
.clk-row{display:grid;grid-template-columns:15px 46px minmax(0,1fr) 170px minmax(0,1.5fr);align-items:center;
  gap:0 12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.06)}
.clk-ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;color:var(--o-k5)}
.clk-who{font-family:var(--code);font-size:.59rem;letter-spacing:.14em;text-transform:uppercase;color:var(--o-k5)}
.clk-l{font-size:var(--fs-sm);font-weight:400;color:var(--o-k3);transition:color .22s ease}
.clk-row em{font-style:normal;font-family:var(--code);font-size:var(--fs-code);color:var(--o-k4);
  font-variant-numeric:tabular-nums;transition:color .22s ease}
.clk-track{position:relative;display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.05)}
.clk-track b{position:absolute;left:calc(var(--x)*1%);width:calc(var(--w)*1%);min-width:3px;height:6px;
  border-radius:3px;background:#ff9f5a;opacity:.55;transition:opacity .22s ease}
.clk-track .clk-b2{opacity:.24}
.clk-row:hover .clk-l{color:#fff}
.clk-row:hover em{color:var(--o-k2)}
.clk-row:hover .clk-track b{opacity:.95}
.clk-row:hover .clk-track .clk-b2{opacity:.4}
/* the longest real interval, played once, with one mark per 60 s retry */
.clk-run .clk-track{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px calc(100%/15))}
.clk-run .clk-track b{transform:scaleX(0);transform-origin:left}
.clk-run.run .clk-track b{transform:scaleX(1);transition:transform 5s linear,opacity .22s ease}
.clk-run.run.no-anim .clk-track b{transform:scaleX(1);transition:none}
.clk-axis{display:grid;grid-template-columns:15px 46px minmax(0,1fr) 170px minmax(0,1.5fr);
  gap:0 12px;height:20px;margin-top:2px;border-top:1px solid rgba(255,255,255,.06)}
.clk-axis i{position:relative;grid-column:5;display:block}
.clk-axis span{position:absolute;top:5px;left:calc(var(--p)*1%);transform:translateX(-50%);white-space:nowrap;
  font-family:var(--code);font-size:9.5px;letter-spacing:.1em;color:var(--o-k6)}
.clk-axis span:first-child{transform:none}
.clk-axis span:last-child{transform:translateX(-100%)}
/* blocks arrive as you reach them */
@media (prefers-reduced-motion:no-preference){
  html.rv [data-rv]{opacity:0;transform:translateY(10px)}
  html.rv [data-rv].rv-in{opacity:1;transform:none;
    transition:opacity .52s var(--easeout),transform .52s var(--easeout);
    transition-delay:calc(var(--i,0)*60ms)}
}
/* each mock surface arrives its own way */
.fr-view.on[data-anim]{transition:none;animation:.5s var(--o-eo) both}
.fr-view.on[data-anim=fade]{animation-name:wFade}
.fr-view.on[data-anim=wipe]{animation-name:wWipe}
.fr-view.on[data-anim=up]{animation-name:wUp}
.fr-view.on[data-anim=right]{animation-name:wRight}
/* a line from the live step across the gutter to the frame */
.fr-step::after{content:'';position:absolute;right:-56px;top:50%;width:56px;height:1px;
  background:#ff9f5a;opacity:.45;transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
.fr-step.on::after{transform:scaleX(1)}
/* how far down the page you are, tinted by the chapter */
#rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
#rail i{display:block;height:100%;transform:scaleX(var(--p,0));transform-origin:left;
  background:var(--ch,#35d6ff);transition:background-color .4s ease}
@media (prefers-reduced-motion:reduce){
  .fr-view.on[data-anim]{animation:none}
  .fr-step::after{transition:none}
  #rail i{transition:none}
}
@media (max-width:1100px){.fr-step::after{right:-32px;width:32px}}
@media (max-width:900px){
  .clk-row{grid-template-columns:15px 44px minmax(0,1fr);gap:2px 10px;padding:12px 0}
  .clk-row em{grid-column:3;font-size:10.5px}
  .clk-track{grid-column:1/-1;margin-top:8px}
  .clk-axis{grid-template-columns:1fr}
  .clk-axis i{grid-column:1}
}
@media (max-width:820px){.fr-step::after{display:none}}

/* ── setup guide: filled panels, so a chapter is a surface and not text on black ── */
.ckp{display:grid;grid-template-columns:264px minmax(0,1fr);margin-top:44px;
  border:1px solid var(--o-hcell);border-radius:16px;background:#0a0a0d;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.ckp-rail{padding:34px 28px;border-right:1px solid var(--o-hcell);background:#08080b}
.ckp-big{display:flex;align-items:baseline;gap:8px;margin:0}
.ckp-big b{font-family:var(--display);font-size:44px;font-weight:600;letter-spacing:-.03em;color:#fff;line-height:1}
.ckp-big span{font-family:var(--code);font-size:.59rem;letter-spacing:.18em;text-transform:uppercase;color:#35d6ff}
.ckp-lead{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--o-k2)}
.ckp-note{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--o-k5)}
.ckp-go{margin:20px 0 0}
.ckp-go a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25)}
.ckp-go a svg{width:14px;height:14px}
.ckp-body{padding:6px 0}
.ckp-list{margin:0;padding:0;list-style:none}
.ckp-row{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,.85fr);gap:0 18px;
  align-items:start;padding:18px 28px 18px 22px;transition:background-color .25s ease}
.ckp-row + .ckp-row{border-top:1px solid var(--o-hcell)}
.ckp-row:hover{background:rgba(255,255,255,.022)}
.ckp-n{font-family:var(--code);font-size:11px;letter-spacing:.06em;color:#35d6ff;padding-top:3px;
  font-variant-numeric:tabular-nums}
.ckp-t h3{margin:0;font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:#fff}
.ckp-t p{margin:7px 0 0;font-size:13px;line-height:1.6;color:var(--o-k4)}
.ckp-say{display:block;margin:2px 0 0;padding:9px 12px;border-left:2px solid #ff8f8f;border-radius:0 8px 8px 0;
  background:rgba(255,255,255,.03);font-family:var(--code);font-size:10.5px;line-height:1.55;
  color:var(--o-k2);overflow-wrap:anywhere}
.ckp-say span{display:block;margin-bottom:4px;font-size:.59rem;letter-spacing:.16em;text-transform:uppercase;color:var(--o-k5)}
/* the eight steps and the frame share one surface */
.frp{margin-top:34px;border:1px solid var(--o-hcell);border-radius:16px;background:#0a0a0d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);overflow:clip}
.frp .frw{margin-top:0;gap:0;align-items:stretch}
.frp .fr-steps{padding:8px 34px 90px}
.frp .fr-step{padding:22px 0}
.frp .fr-step:last-child{border-bottom:0}
.frp .fr-stick{position:static;padding:26px 30px 30px;border-left:1px solid var(--o-hcell);
  background:#08080b}
.frp .fr-unit{position:sticky;top:max(96px,calc(50vh - 273px))}
.frp .fr-frame{position:relative;top:auto}
.frp .fr-step::after{right:-34px;width:34px}
.clk{max-width:none;margin-top:34px;padding:30px 34px 26px;border:1px solid var(--o-hcell);
  border-radius:16px;background:#0a0a0d;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
#stop.tint .stp li{background:#0c0c12}

@media (max-width:1100px){
  .ckp-row{grid-template-columns:38px minmax(0,1fr);gap:0 14px}
  .ckp-say{grid-column:2;margin-top:10px}
}
@media (max-width:900px){
  .ckp{grid-template-columns:1fr}
  .ckp-rail{border-right:0;border-bottom:1px solid var(--o-hcell);padding:26px 22px}
  .ckp-body{padding:0}
  .ckp-row{padding:18px 22px}
}
@media (max-width:820px){
  .frp .fr-steps{padding:4px 20px 18px}
  .frp .fr-stick{padding:18px 18px 20px;border-left:0;border-bottom:1px solid var(--o-hcell)}
  .frp .fr-unit{top:78px}
  .clk{padding:24px 20px 20px}
}

/* ── setup guide: the client portal's own shapes — icon tile, kicker, one bordered grid ── */
.ph{display:flex;align-items:flex-start;gap:14px;margin:0 0 26px;text-align:left}
.ph-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  border:1px solid var(--o-hcell);background:#0e0e13;color:var(--c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.ph-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ph-ic-sm{width:32px;height:32px;border-radius:9px}
.ph-ic-sm svg{width:16px;height:16px}
.ph-t{min-width:0}
.ph-k{margin:0;font-family:var(--code);font-size:.59rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c)}
.ph h2{margin:5px 0 0;font-family:var(--display);font-size:clamp(21px,2.4vw,30px);font-weight:600;
  letter-spacing:-.02em;line-height:1.12;color:#fff}
.ph-s{margin:9px 0 0;max-width:62ch;font-size:13.5px;line-height:1.6;color:var(--o-k4)}
/* one bordered container, cells divided by hairlines — no gaps, the way the portal does it */
.gb{display:grid;margin-top:26px;border:1px solid var(--o-hcell);border-radius:16px;
  background:#0a0a0d;overflow:clip;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.gb-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gb-2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;background:#08080b}
.gb-cell{position:relative;padding:24px 26px 22px;transition:background-color .25s ease}
.gb-cell:hover{background:rgba(255,255,255,.022)}
.gb-3 .gb-cell:not(:nth-child(3n)){border-right:1px solid var(--o-hcell)}
.gb-3 .gb-cell:nth-child(n+4){border-top:1px solid var(--o-hcell)}
.gb-2 .gb-cell + .gb-cell{border-left:1px solid var(--o-hcell)}
.gb-cell h3{margin:14px 0 0;font-family:var(--display);font-size:15.5px;font-weight:600;
  line-height:1.3;letter-spacing:-.01em;color:#fff}
.gb-cell h3::before{content:none}
.gb-cell .say{margin-top:11px}
.gb-cell p:not(.say):not(.stp-note){margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--o-k4);max-width:none}
.gb-cell p span{display:block;margin-bottom:2px;font-family:var(--code);font-size:.59rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--o-k5)}
.gb-cell .stp-note{margin:11px 0 0!important;font-size:12px!important;font-style:italic;color:var(--o-k5)!important}
.gb-cell.warn .ph-ic-sm{border-color:rgba(255,190,74,.35);color:#ffbe4a}
.gb-cell.warn .say{--say:#ffbe4a}
.gb-2 .gb-cell p span{font-family:var(--display);font-size:13.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--o-k2)}
#stop .ph-ic-sm{color:#5b7cff}
#check .ckp-row .ph-ic-sm{color:#35d6ff}
.ckp-row{grid-template-columns:32px minmax(0,1fr) minmax(0,.85fr);gap:0 16px;padding:20px 28px 20px 20px}
.ckp-n{display:none}
@media (max-width:1100px){
  .gb-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gb-3 .gb-cell:not(:nth-child(3n)){border-right:0}
  .gb-3 .gb-cell:nth-child(odd){border-right:1px solid var(--o-hcell)}
  .gb-3 .gb-cell:nth-child(n+3){border-top:1px solid var(--o-hcell)}
  .ckp-row{grid-template-columns:32px minmax(0,1fr)}
  .ckp-say{grid-column:2;margin-top:10px}
}
@media (max-width:820px){
  .ph{gap:12px;margin-bottom:20px}
  .ph-ic{width:34px;height:34px}
  .gb-3,
.gb-2{grid-template-columns:1fr}
  .gb-3 .gb-cell:nth-child(odd){border-right:0}
  .gb-3 .gb-cell + .gb-cell,
.gb-2 .gb-cell + .gb-cell{border-top:1px solid var(--o-hcell);border-left:0}
}

/* ── setup guide: the portal Setup page's own hero — next action, progress, status, buttons ── */
.na{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;align-items:stretch;
  margin-top:8px;border:1px solid var(--o-hcell);border-radius:18px;background:#0a0a0d;
  overflow:clip;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.na-main{padding:38px 40px 34px}
.na-k{margin:0;font-family:var(--code);font-size:.59rem;letter-spacing:.18em;text-transform:uppercase;color:#ff9f5a}
.na h1{margin:10px 0 0;font-family:var(--display);font-size:clamp(26px,3.4vw,42px);font-weight:600;
  letter-spacing:-.025em;line-height:1.08;color:#fff}
.na-s{margin:12px 0 0;max-width:56ch;font-size:14px;line-height:1.6;color:var(--o-k4)}

.na-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100%/3 - 3px),transparent calc(100%/3 - 3px) calc(100%/3));
  mask:repeating-linear-gradient(90deg,#000 0 calc(100%/3 - 3px),transparent calc(100%/3 - 3px) calc(100%/3))}
.na-bar i{display:block;height:100%;background:var(--c,#35d6ff);transform-origin:left;
  transform:scaleX(calc(var(--n,1)/3));transition:transform .4s cubic-bezier(.4,0,.2,1),background-color .4s ease}
.na-lab{display:flex;align-items:baseline;gap:10px;margin:10px 0 0;font-size:12.5px;color:var(--o-k4)}
.na-lab b{font-family:var(--code);font-size:11px;letter-spacing:.12em;font-weight:400;color:var(--o-k3);
  font-variant-numeric:tabular-nums}
.na-state{display:flex;align-items:flex-start;gap:9px;margin:20px 0 0;max-width:56ch;
  font-size:12.5px;line-height:1.55;color:var(--o-k5)}
.na-state i{flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;background:#3ecf6e}
.na-cta{display:flex;flex-wrap:wrap;gap:10px 12px;margin:24px 0 0}
.na-cta a{margin:0}
.na-art{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:30px 28px;border-left:1px solid var(--o-hcell);background:#08080b}
.na-art svg{width:100%;height:auto}
.na-cap{margin:0;font-family:var(--code);font-size:10px;line-height:1.5;letter-spacing:.02em;color:var(--o-k6)}
/* where each step happens: the portal's four-cell status row */
.na-where{margin-top:14px}
.gb-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gb-4 .gb-cell:not(:last-child){border-right:1px solid var(--o-hcell)}
a.gb-cell{text-decoration:none;display:block}
.gb-k{margin:12px 0 0!important;font-family:var(--code);font-size:.59rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--o-k5)}
.na-where .gb-cell h3{margin:6px 0 0;font-size:15px}
.na-where .gb-cell p:not(.gb-k){margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--o-k4)}
.gb-go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-style:normal;
  font-family:var(--code);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.gb-go svg{width:13px;height:13px}
a.gb-cell:hover .gb-go svg{transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){.na-bar i{transition:none}}
@media (max-width:1100px){
  .na{grid-template-columns:1fr}
  .na-art{border-left:0;border-top:1px solid var(--o-hcell);padding:24px 28px}
  .na-art svg{max-width:340px;margin:0 auto}
  .gb-4{grid-template-columns:1fr 1fr}
  .gb-4 .gb-cell:not(:last-child){border-right:0}
  .gb-4 .gb-cell:nth-child(odd){border-right:1px solid var(--o-hcell)}
  .gb-4 .gb-cell:nth-child(n+3){border-top:1px solid var(--o-hcell)}
}
@media (max-width:820px){
  .na-main{padding:28px 22px 26px}
  .gb-4{grid-template-columns:1fr}
  .gb-4 .gb-cell:nth-child(odd){border-right:0}
  .gb-4 .gb-cell + .gb-cell{border-top:1px solid var(--o-hcell)}
}

/* ── setup guide hero, second pass: the portal's own timeline and its real screen ── */
.na{grid-template-columns:minmax(0,1fr) 470px}
.na-main{padding:36px 38px 30px}
.na-s{margin-top:11px;font-size:13.5px}
/* the five steps the portal completes on its own — its real step names */
.na-tl{margin:24px 0 0;padding:18px 20px 16px;border:1px solid var(--o-hcell);border-radius:12px;background:#08080b}
.na-tl-h{margin:0;font-family:var(--code);font-size:.59rem;letter-spacing:.16em;text-transform:uppercase;color:var(--o-k5)}
.na-tl-list{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 8px;
  margin:16px 0 0;padding:0;list-style:none}
.na-tl-list::before{content:'';position:absolute;left:5px;right:5px;top:5px;height:1px;background:var(--o-hcell)}
.na-tl-list li{position:relative;padding-top:18px}
.na-tl-list li i{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;
  background:#0a0a0d;box-shadow:inset 0 0 0 1px rgba(62,207,110,.45)}
.na-tl-list li i::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#3ecf6e;opacity:.85}
.na-tl-list li span{display:block;font-size:11px;line-height:1.4;color:var(--o-k4)}
.na-tl-n{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--o-k5)}
.na-cta{margin-top:22px}
/* the real portal screen, in a window */
.na-art{padding:26px 26px 22px;gap:12px;justify-content:flex-start}

.na-win-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border-bottom:1px solid rgba(255,255,255,.08);background:#141418}
.na-win-bar i{width:8px;height:8px;border-radius:50%;background:#2a2a30}
.na-win-bar em{margin-left:8px;font-style:normal;font-family:var(--code);font-size:10px;
  letter-spacing:.06em;color:var(--o-k5)}

.na-cap{margin:0;font-family:var(--code);font-size:10px;line-height:1.5;color:var(--o-k6)}
/* the chapter you are reading, along the bottom of the cell */
.na-foot{grid-column:1/-1;display:grid;grid-template-columns:180px minmax(0,1fr) auto;align-items:center;
  gap:0 18px;padding:14px 38px;border-top:1px solid var(--o-hcell);background:#08080b}
.na-foot .na-bar{width:180px}
.na-foot .na-lab{margin:0}
.na-foot .na-state{margin:0;font-size:12px}
@media (max-width:1100px){
  .na{grid-template-columns:1fr}
  .na-art{border-left:0;border-top:1px solid var(--o-hcell)}
  
  .na-foot{grid-template-columns:1fr;gap:10px;padding:16px 22px}
  .na-foot .na-bar{width:100%}
}
@media (max-width:820px){
  .na-tl-list{grid-template-columns:1fr 1fr;gap:14px 10px}
  .na-tl-list::before{display:none}
  .na-tl-list li{padding-top:0;padding-left:18px}
  .na-tl-list li i{top:2px}
}

/* ── the hero walkthrough: five chapters, autoplaying, the portal's own scenes ── */
.wt{border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;background:#0e0e13;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}
.wt-stage{position:relative;aspect-ratio:1.5/1;background:#0a0a0e;overflow:hidden}
.wt-scene{position:absolute;inset:0;padding:18px 20px;opacity:0;pointer-events:none;
  transition:opacity .4s ease}
.wt-scene.on{opacity:1}
.wt-k{margin:0;font-family:var(--code);font-size:.59rem;letter-spacing:.16em;text-transform:uppercase;color:var(--o-k5)}

@keyframes wtFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@keyframes wtDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

@keyframes wtIn{from{opacity:0}to{opacity:1}}

@keyframes wtOut{to{opacity:0}}

@keyframes wtTick{to{opacity:1;color:#3ecf6e}}

@keyframes wtPop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

@keyframes wtPress{0%{background:none}55%{background:rgba(255,255,255,.14)}100%{background:none;border-color:rgba(62,207,110,.5);color:#3ecf6e}}

/* the chapter rail, filling like the portal's */
.wt-rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:0 14px;
  height:3px;background:#0e0e13}
.wt-seg{height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.wt-seg i{display:block;height:100%;background:var(--c,#ff9f5a);transform-origin:left;transform:scaleX(0)}
.wt-seg[data-state=done] i{transform:scaleX(1)}
.wt-seg[data-state=current] i{animation:wtFill 4.2s linear both}
.wt[data-playing=false] .wt-seg[data-state=current] i{animation-play-state:paused}
.wt-under{padding:12px 14px 12px;background:#0e0e13}
.wt-cap{margin:0;font-size:11px;line-height:1.5;color:var(--o-k5)}
.wt-cap b{display:block;margin-bottom:4px;font-family:var(--display);font-size:12.5px;font-weight:600;color:#fff}
.wt-ctl{display:flex;align-items:center;gap:8px;margin-top:12px}
.wt-ctl button{display:grid;place-items:center;width:24px;height:24px;padding:0;border-radius:7px;
  border:1px solid rgba(255,255,255,.12);background:#141418;color:var(--o-k3);cursor:pointer;
  transition:color .2s ease,border-color .2s ease}
.wt-ctl button:hover{color:#fff;border-color:rgba(255,255,255,.25)}
.wt-ctl button svg{width:13px;height:13px;fill:currentColor}
.wt-ctl [data-wt-prev] svg,
.wt-ctl [data-wt-next] svg{fill:none}
.wt-dots{display:flex;gap:5px;margin:0 2px}
.wt-dots button{width:7px;height:7px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.16)}
.wt-dots button[aria-current=true]{background:var(--c,#ff9f5a)}
@media (prefers-reduced-motion:reduce){
  .wt-scene *{animation:none!important}
  
  .wt-seg[data-state=current] i{transform:scaleX(1)}
}

/* ── the stop chapter's player: the same panel, six real states ── */
.wt-wide{margin-top:26px}
.wt-wide .wt-stage{aspect-ratio:5.6/1;background:#000}
.wt-wide .wt-under{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 18px;padding:14px 18px}
.wt-wide .wt-ctl{margin:0}
.ws{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 18px;align-items:center;padding:14px 20px}
.ws .wt-k{grid-column:1/-1}
.ws-box{margin-top:8px;padding:10px 14px;border:1px solid rgba(120,150,255,.35);border-radius:4px;
  background:#05050a;font-family:Consolas,var(--code)}
.ws-h{margin:0;font-size:11px;letter-spacing:.04em;color:#8fb0ff}
.ws-l{margin:6px 0 0;font-size:12px;color:#fff}
.ws-l2{margin:3px 0 0;font-size:10px;color:var(--o-k4)}
.ws-gone{margin:6px 0 0;font-size:11px;font-style:italic;color:var(--o-k6)}
.ws-live{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:7px 12px;border-radius:4px;
  border:1px solid rgba(62,207,110,.3);background:rgba(62,207,110,.05);
  font-family:Consolas,var(--code);font-size:10.5px;color:#3ecf6e}
.ws-live i{width:6px;height:6px;border-radius:50%;background:#3ecf6e}
.ws[data-tone=warn] .ws-box{border-color:rgba(255,190,74,.4)}
.ws[data-tone=warn] .ws-h{color:#ffbe4a}
.ws[data-tone=wait] .ws-box{border-color:rgba(255,255,255,.18)}
.ws[data-tone=wait] .ws-h{color:var(--o-k3)}
.ws[data-tone=stop] .ws-box{border-color:rgba(214,44,44,.55)}
.ws[data-tone=stop] .ws-h{color:#ff6b6b}
.ws[data-tone=off] .ws-box{border-color:rgba(255,255,255,.1);opacity:.45}
.ws:not([data-tone=ok]) .ws-live{border-color:rgba(255,255,255,.12);background:none;color:var(--o-k5)}
.ws:not([data-tone=ok]) .ws-live i{background:var(--o-k6)}
.ws[data-tone=off] .ws-live{opacity:.4}
@media (max-width:820px){
  .wt-wide .wt-stage{aspect-ratio:1.6/1}
  .wt-wide .wt-under{grid-template-columns:1fr;gap:12px}
}
@media (max-width:820px){.ws{grid-template-columns:1fr}.ws-live{margin-top:10px}}

/* ── setup guide hero: let the lines break evenly, and give the headline room ── */
.na h1{text-wrap:balance}
.na-s{text-wrap:pretty}
.ph h2,
.ck-row h3,
.fr-t h3,
.stp h3,
.gb-cell h3{text-wrap:balance}
#guide-top{padding-top:120px}
.na-main{padding:40px 40px 32px}
.na h1{margin-top:12px}
.na-s{margin-top:14px;max-width:52ch}
.na-tl{margin-top:26px}
@media (max-width:820px){#guide-top{padding-top:96px}.na-main{padding:28px 22px 26px}}

/* ── titles set the way Framer sets its own: Outfit at 500, tracking -.04em ── */
.sec-head h1,
.sec-head h1,
.sec-head h2,
.na h1,
.ph h2,
#after h2,
.fl-t h2{font-weight:500;letter-spacing:-.04em}
.gb-cell h3,
.ck-row h3,
.ckp-t h3,
.fr-t h3,
.stp h3,
.wt-cap b,
.clk h3,
.na-tl-h + *{letter-spacing:-.02em}
.ckp-big b{font-weight:500;letter-spacing:-.04em}

/* ── setup guide hero: the site's own buttons, and a quieter step line ── */
.na-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.na-cta .pill svg{width:15px;height:15px}
.na-tl{margin-top:26px;padding:16px 0 0;border:0;border-top:1px solid var(--o-hcell);background:none;border-radius:0}
.na-tl-list{margin-top:14px}
.na h1{font-size:clamp(28px,3.8vw,46px)}
@media (max-width:820px){.na-cta .pill{flex:1 1 auto;justify-content:center}}

/* ── the hero walkthrough, second cut: a cursor that travels, a file that moves,
      a key that types, digits that settle, a bar that grows ── */
.wsc{position:absolute;inset:0;padding:20px 26px;opacity:0;pointer-events:none;
  transform:scale(.985);transition:opacity .45s ease,transform .45s var(--o-eo)}
.wsc.on{opacity:1;transform:none}
.wsc-k{position:absolute;top:16px;left:26px;margin:0;font-family:var(--code);font-size:.59rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--o-k5)}
.wsc-card{margin-top:26px;padding:12px 14px;border:1px solid rgba(255,255,255,.09);border-radius:10px;
  background:#111;opacity:0;transform:translateY(8px)}
.wsc.on .wsc-card{animation:scIn .5s var(--o-eo) .12s both}
@keyframes scIn{to{opacity:1;transform:none}}
.wsc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:10.5px;color:var(--o-k5)}
.wsc-row:last-of-type{border-bottom:0}
.wsc-row b{font-family:var(--code);font-size:10px;font-weight:400;color:var(--o-k2)}
.wsc-btn{display:inline-block;margin:12px 0 0;padding:7px 13px;border-radius:8px;font-size:11px;font-weight:600}
.wsc-btn-w{background:#fff;color:#000}
.wsc-btn-o{background:none;color:#fff;border:1px solid rgba(255,255,255,.18);margin-top:16px}
.wsc-bar{position:relative;height:3px;margin:12px 0 0;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.wsc-bar i{display:block;height:100%;background:#35d6ff;transform-origin:left;transform:scaleX(0)}
.wsc.on .wsc-bar i{animation:scFill 1.5s cubic-bezier(.3,.9,.3,1) 1.35s both}
@keyframes scFill{to{transform:scaleX(1)}}
/* a cursor that walks to the thing it presses */
.wsc-cur{position:absolute;left:var(--x1);top:var(--y1);width:13px;height:17px;opacity:0;
  background:#fff;clip-path:polygon(0 0,0 76%,26% 58%,44% 96%,62% 88%,44% 52%,76% 50%);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
.wsc.on .wsc-cur{animation:scCur 2.6s var(--o-eo) .35s both}
@keyframes scCur{
  0%{opacity:0;left:var(--x1);top:var(--y1);transform:scale(1)}
  12%{opacity:1}
  46%{left:var(--x2);top:var(--y2);transform:scale(1)}
  54%{transform:scale(.82)}
  62%{transform:scale(1)}
  92%{opacity:1;left:var(--x2);top:var(--y2)}
  100%{opacity:0}
}
/* the file leaves the card and lands in the tray */
.wsc-chip,
.wsc-drag{position:absolute;display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#16161a;
  font-family:var(--code);font-size:9.5px;color:var(--o-k2);opacity:0}
.wsc-chip i,
.wsc-drag i{width:7px;height:9px;border-radius:1px;background:#ff9f5a}
.wsc-chip{left:26px;bottom:18px}
.wsc.on .wsc-chip{animation:scChip 1.5s var(--o-eo) 2.5s both}
@keyframes scChip{0%{opacity:0;transform:translateY(-16px) scale(.9)}45%{opacity:1;transform:none}100%{opacity:1;transform:none}}
/* the tree fills in, then the file drops into Experts */
.wsc-tree{position:relative;margin:30px 0 0;padding:0;list-style:none;font-family:var(--code);font-size:11px;color:var(--o-k4)}
.wsc-tree li{padding:5px 0;opacity:0}
.wsc-t1{padding-left:16px!important;color:var(--o-k3)}
.wsc-t2{display:flex;align-items:center;gap:8px;padding-left:32px!important;color:#fff}
.wsc-t2 i{width:7px;height:9px;border-radius:1px;background:#ff9f5a}
.wsc.on .wsc-t0{animation:scIn .4s ease .15s both}
.wsc.on .wsc-t1{animation:scIn .4s ease .35s both}
.wsc.on .wsc-t2{animation:scDrop .55s var(--o-eo) 2.35s both}
@keyframes scDrop{0%{opacity:0;transform:translate(10px,-14px) scale(.94)}100%{opacity:1;transform:none}}
.wsc-drag{right:26px;top:22%}
.wsc.on .wsc-drag{animation:scDrag 2.3s var(--o-eo) .5s both}
@keyframes scDrag{
  0%{opacity:0;transform:none}
  10%{opacity:1;transform:none}
  70%{opacity:1;transform:translate(-190px,84px) scale(.96)}
  85%{opacity:0;transform:translate(-190px,84px) scale(.9)}
  100%{opacity:0}
}
.wsc-note{margin:14px 0 0;font-size:10.5px;color:var(--o-k5);opacity:0}
.wsc.on .wsc-note{animation:scIn .45s ease 3s both}
/* the key types itself, then the box ticks, then the lock slides in */
.wsc-dlg{max-width:320px}
.wsc-type{position:relative;overflow:hidden;white-space:nowrap}
.wsc-type em{font-style:normal;display:inline-block;clip-path:inset(0 100% 0 0)}
.wsc.on .wsc-type em{animation:scType 1.1s steps(23,end) .55s both}
@keyframes scType{to{clip-path:inset(0 0 0 0)}}
.wsc-type::after{content:'';position:absolute;right:-2px;top:2px;width:1px;height:11px;background:#ff9f5a;opacity:0}
.wsc.on .wsc-type::after{animation:scCaret .7s steps(1) .55s 2,scOut .01s linear 2.05s both}
@keyframes scCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes scOut{to{opacity:0}}
.wsc-box{display:grid;place-items:center;width:12px;height:12px;border-radius:3px;
  border:1px solid rgba(255,255,255,.25)}
.wsc-box i{width:6px;height:6px;border-radius:1px;background:#3ecf6e;transform:scale(0)}
.wsc.on .wsc-box i{animation:scTick .35s var(--o-eo) 2.1s both}
@keyframes scTick{to{transform:scale(1)}}
.wsc-lock{position:absolute;left:26px;right:26px;bottom:20px;padding:10px 12px;border:1.4px solid #d62c2c;
  border-radius:4px;background:#000;opacity:0;transform:translateY(10px)}
.wsc.on .wsc-lock{animation:scIn .5s var(--o-eo) 2.6s both}
.wsc-lock p{margin:0;font-family:Consolas,var(--code);font-size:9px;font-weight:700;color:#ff3b3b}
.wsc-lock-m{margin-top:6px!important;font-weight:400!important;font-size:8.5px!important;color:#fff!important;line-height:1.5}
.wsc-digits{display:inline-flex;gap:2px}
.wsc-digits i{font-style:normal;opacity:0}
.wsc.on .wsc-digits i{animation:scPop .3s var(--o-eo) both;animation-delay:calc(3.1s + var(--k,0)*.09s)}
.wsc-digits i:nth-child(1){--k:0}.wsc-digits i:nth-child(2){--k:1}.wsc-digits i:nth-child(3){--k:2}
.wsc-digits i:nth-child(4){--k:3}.wsc-digits i:nth-child(5){--k:4}.wsc-digits i:nth-child(6){--k:5}
@keyframes scPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* the two codes line up, then the button is pressed */
.wsc-h3{margin:28px 0 0;font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:-.02em;color:#fff;opacity:0}
.wsc.on .wsc-h3{animation:scIn .45s ease .15s both}
.wsc-match{display:flex;align-items:center;gap:14px;margin-top:14px}
.wsc-side{display:flex;flex-direction:column;gap:5px;opacity:0}
.wsc-side em{font-style:normal;font-family:var(--code);font-size:.59rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--o-k5)}
.wsc-side b{padding:7px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.12);background:#0a0a0e;
  font-family:var(--code);font-size:13px;letter-spacing:.24em;color:var(--o-k2)}
.wsc.on .wsc-side:first-of-type{animation:scIn .45s var(--o-eo) .5s both}
.wsc.on .wsc-side:last-of-type{animation:scIn .45s var(--o-eo) .8s both}
.wsc-link{position:relative;flex:1;height:1px;background:rgba(255,255,255,.12)}
.wsc-link i{position:absolute;inset:0;background:#3ecf6e;transform-origin:left;transform:scaleX(0)}
.wsc.on .wsc-link i{animation:scFill .5s var(--o-eo) 1.25s both}
.wsc.on .wsc-side b{animation:scMatch .5s ease 1.7s both}
@keyframes scMatch{to{border-color:rgba(62,207,110,.5);color:#fff}}
.wsc.on .wsc-btn-o{animation:scIn .4s ease 1s both,scPress .5s ease 2.5s both}
@keyframes scPress{0%{background:none}50%{background:rgba(255,255,255,.14)}100%{background:none;border-color:rgba(62,207,110,.5);color:#3ecf6e}}
/* the log types, the line unlocks, the first bars appear */
.wsc-log{margin-top:28px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:8px;
  background:#0d0d11;font-family:var(--code);font-size:9px;line-height:1.6;color:var(--o-k4)}
.wsc-log p{margin:0 0 6px;opacity:0}
.wsc-log p:last-child{margin:0;color:#fff}
.wsc.on .wsc-log p:first-child{animation:scIn .4s ease .3s both}
.wsc.on .wsc-log p:last-child{animation:scIn .4s ease 1.1s both}
.wsc-live{position:relative;display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:9px 12px;
  border:1px solid rgba(62,207,110,.35);border-radius:8px;background:rgba(62,207,110,.06);
  font-family:var(--code);font-size:10px;letter-spacing:.06em;color:#3ecf6e;
  clip-path:inset(0 100% 0 0)}
.wsc-live i{width:7px;height:7px;border-radius:50%;background:#3ecf6e}
.wsc.on .wsc-live{animation:scWipe .55s var(--o-eo) 1.8s both}
@keyframes scWipe{to{clip-path:inset(0 0 0 0)}}
.wsc-spark{position:absolute;right:26px;bottom:20px;display:flex;align-items:flex-end;gap:4px;height:34px}
.wsc-spark i{width:5px;border-radius:2px;background:rgba(62,207,110,.5);height:var(--h);transform-origin:bottom;transform:scaleY(0)}
.wsc.on .wsc-spark i{animation:scGrow .5s var(--o-eo) both;animation-delay:calc(2.4s + var(--n,0)*.08s)}
.wsc-spark i:nth-child(1){--n:0}.wsc-spark i:nth-child(2){--n:1}.wsc-spark i:nth-child(3){--n:2}
.wsc-spark i:nth-child(4){--n:3}.wsc-spark i:nth-child(5){--n:4}.wsc-spark i:nth-child(6){--n:5}
@keyframes scGrow{to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .wsc *,
.wsc::after{animation:none!important}
  .wsc-card,
.wsc-tree li,
.wsc-note,
.wsc-lock,
.wsc-h3,
.wsc-side,
.wsc-log p,
.wsc-chip{opacity:1!important;transform:none!important}
  .wsc-type em,
.wsc-live{clip-path:none!important}
  .wsc-bar i,
.wsc-link i,
.wsc-spark i,
.wsc-box i{transform:none!important}
  .wsc-digits i{opacity:1!important}
  .wsc-cur,
.wsc-drag{display:none}
}
@media (max-width:820px){
  .wsc{padding:36px 18px 18px}
  .wsc-k{left:18px}
  .wsc-chip,
.wsc-lock{left:18px;right:18px}
  .wsc-spark{right:18px}
  .wsc-cur,
.wsc-drag{display:none}
}

/* ── the four cards under the hero: which steps each one covers ── */
.wk{display:flex;flex-direction:column;padding:22px 24px 20px}
.wk-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wk .ph-ic-sm{color:var(--c);border-color:color-mix(in srgb,var(--c) 26%,var(--o-hcell));
  transition:border-color .25s ease,background-color .25s ease}
.wk-steps{display:flex;gap:4px}
.wk-steps i{display:grid;place-items:center;min-width:22px;height:20px;padding:0 5px;border-radius:6px;
  border:1px solid var(--o-hcell);background:#0c0c11;font-style:normal;font-family:var(--code);
  font-size:9.5px;letter-spacing:.06em;color:var(--o-k5);
  transition:color .25s ease,border-color .25s ease,background-color .25s ease}
.wk-steps .wk-after{letter-spacing:.14em;text-transform:uppercase;color:var(--o-k6)}
.wk .gb-k{margin-top:16px!important}
.wk h3{margin:6px 0 0}
.wk > p:not(.gb-k){margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--o-k4)}
.wk .gb-go{margin-top:auto;padding-top:16px;color:var(--o-k4);transition:color .25s ease}
.wk:hover .ph-ic-sm{border-color:color-mix(in srgb,var(--c) 55%,transparent);
  background:color-mix(in srgb,var(--c) 8%,#0e0e13)}
.wk:hover .wk-steps i{color:var(--c);border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.wk:hover .wk-steps .wk-after{color:var(--c)}
.wk:hover .gb-go{color:#fff}
.wk:focus-visible{outline:2px solid color-mix(in srgb,var(--c) 60%,transparent);outline-offset:-2px}
@media (max-width:820px){
  .wk{padding:20px 22px 18px}
  .wk .gb-go{padding-top:14px}
}
.wk .gb-k{min-height:1.2em}

/* ── the six checks: a list you can tick ── */
.ckp-big b{transition:color .3s ease}
.ckp.all-ok .ckp-big b{color:#3ecf6e}
.ckp-meter{height:3px;margin:14px 0 0;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100%/6 - 3px),transparent calc(100%/6 - 3px) calc(100%/6));
  mask:repeating-linear-gradient(90deg,#000 0 calc(100%/6 - 3px),transparent calc(100%/6 - 3px) calc(100%/6))}
.ckp-meter i{display:block;height:100%;background:#35d6ff;transform-origin:left;
  transform:scaleX(calc(var(--n,0)/6));transition:transform .38s cubic-bezier(.4,0,.2,1),background-color .3s ease}
.ckp.all-ok .ckp-meter i{background:#3ecf6e}
.ckp-lead{margin-top:16px;min-height:3.2em}
.ckp-grp{padding:16px 28px 8px 20px;font-family:var(--code);font-size:.59rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--o-k6);border-top:1px solid var(--o-hcell)}
.ckp-list .ckp-grp:first-child{border-top:0;padding-top:14px}
.ckp-row{display:block;padding:0;grid-template-columns:none}
.ckp-row + .ckp-grp{border-top:1px solid var(--o-hcell)}
.ckp-row label{display:grid;grid-template-columns:18px 32px minmax(0,1fr) minmax(0,.85fr);gap:0 16px;
  align-items:start;padding:18px 28px 18px 20px;cursor:pointer;transition:background-color .25s ease}
.ckp-row label:hover{background:rgba(255,255,255,.022)}
.ckp-row input{position:absolute;opacity:0;width:0;height:0}
.ckp-tick{position:relative;width:16px;height:16px;margin-top:8px;border-radius:5px;
  border:1px solid rgba(255,255,255,.22);background:#0c0c11;transition:border-color .25s ease,background-color .25s ease}
.ckp-tick::after{content:'';position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
  border:solid #000;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) scale(.5);opacity:0;
  transition:opacity .2s ease,transform .2s var(--o-eo)}
.ckp-row.on .ckp-tick{background:#3ecf6e;border-color:#3ecf6e}
.ckp-row.on .ckp-tick::after{opacity:1;transform:rotate(45deg) scale(1)}
.ckp-row input:focus-visible + .ckp-tick{outline:2px solid rgba(53,214,255,.6);outline-offset:2px}
.ckp-row .ph-ic-sm{margin-top:2px;transition:opacity .25s ease}
.ckp-row.on .ph-ic-sm{opacity:.45}
.ckp-t{display:block;min-width:0}
.ckp-t b{display:block;font-family:var(--display);font-size:15.5px;font-weight:500;letter-spacing:-.02em;color:#fff}
.ckp-t em{display:block;margin-top:7px;font-style:normal;font-size:13px;line-height:1.6;color:var(--o-k4)}
.ckp-row.on .ckp-t b{color:var(--o-k3)}
.ckp-say{display:block;margin:2px 0 0;padding:9px 12px;border-left:2px solid #ff8f8f;border-radius:0 8px 8px 0;
  background:rgba(255,255,255,.03);font-family:var(--code);font-size:10.5px;line-height:1.55;
  color:var(--o-k2);overflow-wrap:anywhere;transition:opacity .25s ease}
.ckp-say i{display:block;margin-bottom:4px;font-style:normal;font-size:.59rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--o-k5)}
.ckp-row.on .ckp-say{opacity:.4}
@media (prefers-reduced-motion:reduce){.ckp-meter i,.ckp-tick,.ckp-tick::after{transition:none}}
@media (max-width:1100px){
  .ckp-row label{grid-template-columns:18px 32px minmax(0,1fr);gap:0 14px}
  .ckp-say{grid-column:3;margin-top:12px}
}
@media (max-width:900px){
  .ckp-row label{padding:18px 22px}
  .ckp-grp{padding-left:22px}
}

/* ── the rail's six boxes: one per check, filling as you tick ── */
.ckp-map{display:none}
.ckp-map i{width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.16);
  background:#0c0c11;position:relative;
  transition:background-color .3s var(--o-eo),border-color .3s ease,transform .3s var(--o-eo)}
.ckp-map i::after{content:'';position:absolute;left:9px;top:5.5px;width:6px;height:11px;
  border:solid #04170c;border-width:0 1.8px 1.8px 0;transform:rotate(45deg) scale(.4);opacity:0;
  transition:opacity .2s ease,transform .25s var(--o-eo)}
.ckp-map i.on{background:#3ecf6e;border-color:#3ecf6e}
.ckp-map i.on::after{opacity:1;transform:rotate(45deg) scale(1)}
.ckp.all-ok .ckp-map i{transform:scale(1.04)}
.ckp-lead{margin-top:18px}
@media (prefers-reduced-motion:reduce){.ckp-map i,.ckp-map i::after{transition:none}}

/* ── the checks rail: the two halves, and the line Orion shows ── */
.ckp-split{display:grid;gap:10px;margin:20px 0 0;padding:16px 0 0;list-style:none;
  border-top:1px solid var(--o-hcell)}
.ckp-split li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:baseline}
.ckp-split span{font-size:12px;color:var(--o-k4)}
.ckp-split b{font-family:var(--code);font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--o-k3);
  font-variant-numeric:tabular-nums}
.ckp-split i{grid-column:1/-1;height:2px;border-radius:1px;background:rgba(255,255,255,.08);overflow:hidden}
.ckp-split u{display:block;height:100%;background:#35d6ff;text-decoration:none;transform-origin:left;
  transform:scaleX(calc(var(--n,0)/3));transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ckp.all-ok .ckp-split u{background:#3ecf6e}
.ckp-peek{margin:20px 0 0;padding:12px 14px;border:1px solid var(--o-hcell);border-left:2px solid #ff8f8f;
  border-radius:0 10px 10px 0;background:#0c0c11}
.ckp-peek-k{margin:0;font-family:var(--code);font-size:.59rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--o-k5)}
.ckp-peek-v{margin:7px 0 0;font-family:var(--code);font-size:10.5px;line-height:1.55;color:var(--o-k2);
  overflow-wrap:anywhere}
.ckp-peek-v.ok{color:#3ecf6e}
.ckp.all-ok .ckp-peek{border-left-color:#3ecf6e}
.ckp-go{margin-top:22px}
@media (prefers-reduced-motion:reduce){.ckp-split u{transition:none}}

/* ── Outfit is for titles. Below 20px, Inter reads better ── */
.auth-quote b,
.by b,
.gk-big,
.rp b,
.dp b,
.fb-tile > b,
.st-ttl span,
.st-cap p b,
.fr-t h3,
.pv-h3,
.ck-row b,
.stp b,
.ck-row h3,
.stp h3,
.clk h3,
.ckp-t h3,
.gb-cell h3,
.gb-2 .gb-cell p span,
.wt-cap b,
.wsc-h3,
.ckp-t b{font-family:var(--font)}
.gk-t,.sc-ttl{font-family:var(--font)}

/* ── one size for every item title, one for the line under it ── */
.wk h3,
.ckp-t b,
.gb-3 .gb-cell h3,
.gb-2 .gb-cell h3,
.fr-t h3,
.ck-row h3,
.stp h3,
.clk h3{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.wk > p:not(.gb-k),
.ckp-t em,
.gb-3 .gb-cell p:not(.say):not(.stp-note):not(.gb-k),
.fr-t p{font-size:12.5px;line-height:1.6}
.na-where .wk h3{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.na-where .wk > p:not(.gb-k){font-size:12.5px;line-height:1.6}

/* ── the bento block: two cells, a stat band, a chart band ── */
.bn2{display:grid;grid-template-columns:1fr 1fr;margin-top:34px;border:1px solid var(--o-hcell);
  border-radius:16px;background:#0a0a0d;overflow:clip;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.bn2-cell{padding:26px 28px 28px}
.bn2-cell + .bn2-cell{border-left:1px solid var(--o-hcell)}
.bn2-alt{background:#08080b}
.bn2-k{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:var(--o-k4)}
.bn2-k svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;color:#ff9f5a}
.bn2-h{margin:14px 0 0;max-width:34ch;font-family:var(--display);font-size:19px;font-weight:500;
  line-height:1.35;letter-spacing:-.02em;color:#fff}
.bn2-h span{color:var(--o-k4)}
.bn2-art{margin-top:22px}
.bn2-panel{padding:14px 16px;border:1px solid var(--o-hcell);border-radius:10px;background:#0c0c11}
.bn2-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:7px 0;
  border-bottom:1px solid var(--o-hcell);font-family:var(--code);font-size:10px;letter-spacing:.06em;
  color:var(--o-k5)}
.bn2-line:last-child{border-bottom:0}
.bn2-line b{font-weight:400;font-size:11px;color:var(--o-k2)}
.bn2-chat{display:flex;flex-direction:column;gap:18px;margin-top:22px}
.bn2-when{display:flex;align-items:center;gap:7px;margin:0 0 6px;font-size:11px;color:var(--o-k5)}
.bn2-when i{width:9px;height:9px;border-radius:50%;border:1px solid var(--o-hcomp);position:relative}
.bn2-when i::after{content:'';position:absolute;inset:2px;border-radius:50%;background:#ff9f5a}
.bn2-right{justify-content:flex-end;margin:6px 0 0}
.bn2-msg{margin:0;width:82%;padding:10px 12px;border:1px solid var(--o-hcell);border-radius:10px;
  background:#0c0c11;font-family:var(--code);font-size:10px;line-height:1.55;color:var(--o-k2);
  overflow-wrap:anywhere}
.bn2-me{margin-left:auto;border-color:rgba(62,207,110,.3);background:rgba(62,207,110,.06);color:#8fe3ad}
.bn2-stat{grid-column:1/-1;padding:34px 28px;border-top:1px solid var(--o-hcell);
  border-bottom:1px solid var(--o-hcell);text-align:center}
.bn2-stat p{margin:0}
.bn2-stat b{display:block;font-family:var(--display);font-size:clamp(38px,6vw,68px);font-weight:500;
  letter-spacing:-.04em;line-height:1;color:#fff}
.bn2-stat span{display:block;margin:14px auto 0;max-width:56ch;font-size:12.5px;line-height:1.6;color:var(--o-k4)}
.bn2-chart{position:relative;grid-column:1/-1;padding:26px 28px 22px}
.bn2-over{max-width:46ch;margin-bottom:20px}
.bn2-chart .clk{max-width:none;margin:0;padding:0;border:0;background:none;box-shadow:none}
@media (max-width:820px){
  .bn2{grid-template-columns:1fr}
  .bn2-cell + .bn2-cell{border-left:0;border-top:1px solid var(--o-hcell)}
  .bn2-cell,.bn2-chart{padding:22px 20px}
  .bn2-stat{padding:28px 20px}
  .bn2-msg{width:100%}
}

/* ── the bento, second pass: a panel that keeps time, figures under the number ── */
.bn2{align-items:stretch}
.bn2-cell{display:flex;flex-direction:column}
.bn2-art{margin-top:auto;padding-top:22px}
.bn2-chat{margin-top:auto;padding-top:22px}
.bn2-live{display:inline-flex;align-items:center;gap:7px;color:#3ecf6e!important}
.bn2-live i{width:6px;height:6px;border-radius:50%;background:#3ecf6e;animation:bnPulse 2.4s ease-in-out infinite}
@keyframes bnPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.bn2-panel [data-bn-count]{font-variant-numeric:tabular-nums}
.bn2-panel [data-bn-tel]{transition:color .3s ease}
.bn2-panel [data-bn-tel].sent{color:#3ecf6e}
.bn2-track{height:2px;margin:12px 0 0;border-radius:1px;background:rgba(255,255,255,.07);overflow:hidden}
.bn2-track i{display:block;height:100%;background:#ff9f5a;opacity:.7;transform-origin:left;
  transform:scaleX(var(--n,1));transition:transform 1s linear}
.bn2-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0}
.bn2-chips i{padding:5px 11px;border:1px solid var(--o-hcell);border-radius:999px;background:#0c0c11;
  font-style:normal;font-family:var(--code);font-size:10px;letter-spacing:.06em;color:var(--o-k4)}
.bn2-note{margin:10px 0 0;max-width:52ch;font-size:12.5px;line-height:1.6;color:var(--o-k4)}
.bn2-chart .bn2-over{margin-bottom:24px}
#setup .bn2-k svg{color:#ff9f5a}
@media (prefers-reduced-motion:reduce){.bn2-live i{animation:none}.bn2-track i{transition:none}}

/* ── the first run: three named phases, and a frame that performs ── */
.fr-phase{padding:26px 0 12px;border-top:1px solid var(--o-hcell)}
.fr-steps > .fr-phase:first-child{border-top:0;padding-top:6px}
.fr-phase b{display:block;font-family:var(--code);font-size:.59rem;letter-spacing:.16em;
  text-transform:uppercase;color:#ff9f5a}
.fr-phase em{display:block;margin-top:6px;font-style:normal;font-size:12.5px;color:var(--o-k5)}
.fr-phase + .fr-step{border-top:0}
/* the download fills, once, when the view arrives */
.pv-bar{position:relative;height:3px;margin:12px 0 0;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.pv-bar i{display:block;height:100%;background:#35d6ff;transform-origin:left;transform:scaleX(0)}
.fr-view.on .pv-bar i{animation:frFill 1.6s cubic-bezier(.3,.9,.3,1) .5s both}
@keyframes frFill{to{transform:scaleX(1)}}
.fr-view.on [data-hi="1"]{animation:frPress .5s ease 1.9s both}
@keyframes frPress{0%,100%{transform:none}45%{transform:scale(.96)}}
/* the key types itself in */
.mt-key{position:relative;display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom}
.fr-view.on .mt-key{animation:frType .8s steps(22,end) .45s both}
@keyframes frType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.mt-cb b{transition:color .3s ease}
/* the six digits land one at a time */
.fr-view.on .pv-code b{animation:frPop .32s var(--o-eo) both;animation-delay:calc(.55s + var(--k,0)*.11s)}
.pv-code b:nth-child(1){--k:0}.pv-code b:nth-child(2){--k:1}.pv-code b:nth-child(3){--k:2}
.pv-code b:nth-child(4){--k:3}.pv-code b:nth-child(5){--k:4}.pv-code b:nth-child(6){--k:5}
@keyframes frPop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.fr-view.on [data-hi="7"]{animation:frPress .5s ease 1.5s both}
@media (prefers-reduced-motion:reduce){
  .fr-view.on .pv-bar i,.fr-view.on [data-hi],.fr-view.on .mt-key,.fr-view.on .pv-code b{animation:none}
  .pv-bar i{transform:scaleX(1)}
}
@media (max-width:820px){.fr-phase{padding:20px 0 10px}}

/* ── a MetaTrader window with its real furniture, and the folder it goes into ── */
.mtwin,.winx{padding:0;background:#0c0f14;overflow:hidden}
.mtw-title{display:flex;align-items:center;gap:8px;height:26px;padding:0 10px;background:#0a1520;
  border-bottom:1px solid #16202c;font-size:9.5px;color:#8fa3b8;justify-content:center;position:relative}
.mtw-title i{position:absolute;left:10px;width:9px;height:9px;border-radius:2px;background:#2f6ea8}
.mtw-title i.fold{background:#c9a227;border-radius:1px 3px 3px 3px}
.mtw-title em{position:absolute;right:10px;font-style:normal;letter-spacing:.18em}
.mtw-title em{color:#5f7286}
.mtw-menu{display:flex;gap:12px;padding:5px 10px;background:#101821;border-bottom:1px solid #16202c;
  font-size:9.5px;color:#9db0c4}
.mtw-menu .on{color:#fff}
.mtw-bar{display:flex;align-items:center;gap:6px;padding:5px 10px;background:#0e1620;
  border-bottom:1px solid #16202c}
.mtw-new{padding:3px 8px;border:1px solid #24384c;border-radius:3px;background:#132234;font-size:9px;color:#cfe0f0}
.mtw-sep{width:1px;height:12px;background:#1c2937}
.mtw-ic{width:14px;height:12px;border-radius:2px;background:#17242f}

.mtw-tf{padding:2px 5px;border-radius:2px;font-size:8.5px;color:#8ba0b5}
.mtw-tf.on{background:#1d3550;color:#fff}
.mtw-body{display:grid;grid-template-columns:118px minmax(0,1fr);min-height:0}
.mtw-side{border-right:1px solid #16202c;background:#0b1219;padding:6px 0}
.mtw-ph{margin:0;padding:5px 9px;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#5f7286}
.mtw-mw{width:100%;border-collapse:collapse;font-size:8.5px;color:#a9bccd}
.mtw-mw td{padding:3px 4px}
.mtw-mw td:first-child{padding-left:9px;color:#cfe0f0}
.mtw-mw tr.on{background:#132234}
.mtw-nav{margin:0;padding:2px 0 0;list-style:none;font-size:9px;color:#a9bccd}
.mtw-nav li{padding:3px 9px}
.mtw-nav .op{color:#cfe0f0}
.mtw-nav .sub{margin:2px 6px;padding:3px 8px 3px 18px;border-radius:3px;background:#132234;color:#fff}
.mtw-chart{position:relative;background:#05070a;min-height:150px}
.mtw-tab{display:flex;justify-content:space-between;margin:0;padding:3px 9px;background:#0b1219;
  border-bottom:1px solid #16202c;font-size:8.5px;color:#8ba0b5}
.mtw-tab em{font-style:normal;color:#c9a227}
.mtw-cv{position:absolute;right:0;bottom:14px;width:64%;height:58%}
.mtw-panel{position:absolute;left:8px;top:26px;right:38%;padding:7px 9px;border:1px solid #16344e;
  background:rgba(4,8,12,.94);font-family:Consolas,var(--code)}
.mtw-h{margin:0;font-size:8.5px;letter-spacing:.02em;color:#cfe0f0;text-align:center}
.mtw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:6px}
.mtw-grid div{padding:4px 5px;border:1px solid #16344e}
.mtw-grid b{display:block;font-size:7px;font-weight:400;color:#4aa3e0}
.mtw-grid span{display:block;margin-top:2px;font-size:8px;color:#e6eef6}
.mtw-live{margin:5px 0 0;padding:3px 5px;border:1px solid #1d4a2c;font-size:7.5px;color:#4fd07f}
.mtw-dlg{position:absolute;left:50%;top:44%;transform:translate(-50%,-40%);width:min(230px,74%);
  border:1px solid #24384c;border-radius:3px;background:#101821;box-shadow:0 18px 40px -18px #000;opacity:0}
.mtw-dh{display:flex;justify-content:space-between;margin:0;padding:5px 8px;background:#0a1520;
  font-size:8.5px;color:#cfe0f0}
.mtw-dh em{font-style:normal;color:#5f7286}
.mtw-dt{display:flex;gap:10px;margin:0;padding:5px 8px 0;font-size:8.5px;color:#8ba0b5}
.mtw-dt .on{color:#fff;border-bottom:1px solid #4aa3e0;padding-bottom:3px}
.mtw-in{display:flex;justify-content:space-between;gap:8px;padding:5px 8px;border-top:1px solid #16202c;
  font-family:var(--code);font-size:8px;color:#8ba0b5}
.mtw-in b{font-weight:400;color:#e6eef6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtw-dbtn{display:flex;justify-content:flex-end;gap:6px;margin:0;padding:6px 8px}
.mtw-dbtn span{padding:2px 10px;border:1px solid #24384c;border-radius:2px;font-size:8px;color:#a9bccd}
.mtw-dbtn .on{background:#1d3550;border-color:#2f5f8f;color:#fff}
.mtw-box{display:flex;gap:12px;padding:4px 10px;background:#0b1219;border-top:1px solid #16202c;
  font-size:8.5px;color:#7d90a3}
.mtw-box .on{color:#fff;border-bottom:1px solid #4aa3e0;padding-bottom:2px}@media (prefers-reduced-motion:reduce){}
@media (max-width:820px){
  .mtw-body{grid-template-columns:96px minmax(0,1fr)}
  .mtw-panel{right:26%}
}

/* ── step 02: the Experts folder, as a file window ── */
.fd{margin:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#0d0d0f;
  overflow:hidden;position:relative}.fd-nav{display:inline-flex;gap:10px;font-size:14px;color:var(--o-k4);line-height:1}
.fd-nav i{font-style:normal;color:var(--o-k6)}.fd-btn{position:relative;width:34px;height:22px;border:1px solid rgba(255,255,255,.12);border-radius:7px;
  background:#141418}.fd-sort::after{content:'';position:absolute;right:7px;top:9px;width:5px;height:5px;
  border-right:1px solid #8a8a8f;border-bottom:1px solid #8a8a8f;transform:rotate(45deg)}
.fd-sort::before{content:'\2195';position:absolute;left:8px;top:3px;font-size:11px;color:#8a8a8f}.fd-search{display:inline-flex;align-items:center;height:22px;padding:0 10px 0 24px;border-radius:7px;
  border:1px solid rgba(255,255,255,.12);background:#141418;font-style:normal;font-size:11px;color:var(--o-k5);
  position:relative;min-width:64px;flex:1 1 auto;max-width:150px}
.fd-search::before{content:'';position:absolute;left:9px;top:7px;width:6px;height:6px;border-radius:50%;
  border:1px solid #8a8a8f}
.fd-search::after{content:'';position:absolute;left:14px;top:13px;width:4px;height:1px;background:#8a8a8f;
  transform:rotate(45deg)}.fd-file{display:grid;place-items:center;width:44px;height:52px;border-radius:6px;background:#f2f2f3;
  box-shadow:0 1px 0 rgba(0,0,0,.4)}
.fd-file svg{width:17px;height:17px}
.fd-file b{margin-top:1px;font-size:8.5px;font-weight:600;letter-spacing:.06em;color:#8f97a1}@keyframes fdDrop{from{opacity:0;transform:translateY(-12px) scale(.94)}to{opacity:1;transform:none}}.fr-view.on .fd-drag{animation:fdDrag 2.2s var(--o-eo) .35s both}
@keyframes fdDrag{
  0%{opacity:0;transform:none}12%{opacity:1;transform:none}
  70%{opacity:1;transform:translate(-150px,58px) scale(.96)}
  84%{opacity:0;transform:translate(-150px,58px) scale(.9)}100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .fr-view.on .fd-drag{display:none}}
@media (max-width:820px){}

/* ── first run, tightened: the strip joins the panel, phases carry their number ── */
.frp .fr-pre{justify-content:flex-start;margin:0;padding:15px 34px;
  border-bottom:1px solid var(--o-hcell);background:#08080b;border-radius:16px 16px 0 0}
.frp .fr-steps{padding-top:14px}
@media (max-width:820px){.frp .fr-pre{padding:13px 20px}}

/* the frame is one fixed height, so a short scene sits in the middle of it, not at the top */
.frp .fr-view{display:flex;flex-direction:column;justify-content:center}
.frp .fr-view > *{flex:none}
.fr-ill{display:block;margin-bottom:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--o-k6)}

/* the caption travels with the frame now, so it must read in full on the long steps */
.frp .fr-cap{height:36px}
.frp .fr-cap span[data-fr-cap]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  white-space:normal;line-height:1.55}

/* ══════════════════════════════════════════════════════════════════════
   FIRST RUN v272 — four full-bleed scenes in a 600px frame
   Everything below is later in source order than
   `.frp .fr-view{justify-content:center}` and `.frp .fr-view > *{flex:none}`,
   which several rules here must beat. Do not relocate it earlier.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. geometry: 600px frame, rail sized around it (measured; 618 is the ceiling) ── */
.frp .fr-frame{min-height:0;height:min(440px,calc(100vh - 282px))}
.frp .fr-unit{top:max(96px,calc(50vh - 279px))}      /* unit 557 / 2 */
.frp .fr-steps{padding-top:118px;padding-bottom:246px}
/* every scene is now a full-bleed window; only the frame's own border frames it */
.frp .fr-view{padding:0}

/* ══ 2. the portal shell — one rail, two pages (scenes dl and pair) ══ */
.frp .fr-dl > .pv-app,
.frp .fr-pair > .pv-app{flex:1 1 auto;min-height:0}   /* (0,3,0) beats .frp .fr-view > * */
.pv-app{display:grid;grid-template-columns:132px minmax(0,1fr);overflow:hidden;background:#0a0a0d}
.pv-side{display:flex;flex-direction:column;padding:14px 0 12px;overflow:hidden;
  border-right:1px solid var(--o-hcell);background:#08080b}
.pv-brand{margin:0 0 12px;padding:0 14px;font-family:var(--display);font-size:13px;
  font-weight:600;letter-spacing:-.01em;color:#fff}
.pv-grp{margin:8px 0 5px;padding:0 14px;font-family:var(--code);font-size:.52rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--o-k6)}
.pv-brand + .pv-grp{margin-top:0}
.pv-nav{margin:0;padding:0;list-style:none}
.pv-nav li{padding:3px 14px;font-size:10.5px;line-height:1.4;color:var(--o-k5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-nav li.on{color:#fff;background:rgba(255,255,255,.055)}
.pv-tile{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0 10px;padding:8px 10px;
  border:1px solid var(--o-hcell);border-radius:8px;background:#0b0b0f}
.pv-tile-a{margin-top:auto}
.pv-tile + .pv-tile{margin-top:8px}
.pv-tile b{grid-column:2;font-size:10px;font-weight:500;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-tile em{grid-column:2;font-style:normal;font-size:9px;line-height:1.4;color:var(--o-k6)}
.pv-tile i{grid-row:span 2;align-self:center;width:6px;height:6px;margin-right:8px;
  border-radius:50%;background:var(--o-k6)}
.pv-tile-a b{padding:1px 6px;justify-self:start;border-radius:999px;
  border:1px solid rgba(62,207,110,.4);font-family:var(--code);font-size:8px;
  letter-spacing:.1em;color:#3ecf6e}
.pv-tile-a em{margin-top:4px;color:var(--o-k5)}
.pv-page{display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:20px 24px}
.pv-app .pv-h{line-height:1.15}

/* ── 2a. scene dl · the Software page ── */
.pv-chan{display:flex;flex-wrap:wrap;align-items:center;gap:6px;row-gap:5px;margin:12px 0 0}
.pv-chan span{font-family:var(--code);font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--o-k6)}
.pv-chan i{padding:3px 8px;border:1px solid var(--o-hcomp);border-radius:999px;
  font-family:var(--code);font-size:9px;font-style:normal;color:var(--o-k4)}
.fr-dl .pv-page{justify-content:flex-start;gap:12px}
.fr-dl .pv-hd,.pv-facts{flex:none}
.pv-app .pv-card{margin:0;padding:12px 14px 11px;background:#0e0e12;border-radius:11px}
.pv-rel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 10px}
.pv-rel .pv-eb{font-size:.5rem;font-weight:400;letter-spacing:.14em}
.pv-rel em{grid-column:1/-1;font-size:11px;font-style:normal;font-weight:500;
  line-height:1.3;color:#fff}
.pv-st{display:inline-flex;align-items:center;gap:5px;font-family:var(--code);
  font-size:9.5px;color:var(--o-k2)}
.pv-st i{width:5px;height:5px;border-radius:50%;background:#3ecf6e}
.pv-ver{margin:11px 0 0;font-family:var(--code);font-size:25px;font-weight:500;
  line-height:1;color:#fff}
.pv-what{margin:9px 0 0;font-size:10.5px;line-height:1.55;color:var(--o-k4)}
.pv-pk{display:flex;align-items:flex-start;gap:8px;margin:11px 0 0;padding:9px 10px;
  border:1px solid var(--o-hcell);border-radius:9px;background:#0a0a0d}
.pv-pk > svg{width:13px;height:13px;flex:none;margin-top:1px;color:#3ecf6e}
.pv-pk div{min-width:0}
.pv-pk b{display:block;font-family:var(--code);font-size:.5rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--o-k6)}
.pv-pk .pv-mono{display:block;margin-top:2px;font-size:9px;color:var(--o-k2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-pk em{display:block;margin-top:3px;font-family:var(--code);font-size:8.5px;
  font-style:normal;letter-spacing:.06em;color:var(--o-k6)}
.pv-app .pv-btn{display:flex;align-items:center;justify-content:flex-start;width:100%;
  margin:11px 0 0;padding:9px 12px;border-radius:9px;font-size:11.5px}
.pv-app .pv-btn em{margin-left:auto;font-family:var(--code);font-size:9.5px;font-style:normal;
  font-weight:500;color:#1f6feb}
.pv-app .pv-bar{margin-top:10px}
.pv-app .pv-note{margin-top:10px;font-size:10px;line-height:1.5;max-width:none}
.pv-app .pv-ok{width:6px;height:6px;margin-top:4px}
.pv-facts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--o-hcell);
  border-radius:10px;background:#08080b;overflow:hidden}
.pv-facts > div{padding:5px 11px}
.pv-facts > div:nth-child(2n){border-left:1px solid var(--o-hcell)}
.pv-facts > div:nth-child(n+3){border-top:1px solid var(--o-hcell)}
.pv-facts b{display:block;font-family:var(--code);font-size:.5rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--o-k6)}
.pv-facts span{display:block;margin-top:3px;font-family:var(--code);font-size:11px;color:var(--o-k2)}

/* ── 2b. scene pair · Pair your device. Spare height splits into two auto gaps ── */
.pv-sel{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:0 12px;height:40px;
  border:1px solid var(--o-hcell);border-radius:9px;background:#0e0e12}
.pv-sel span{flex:none;font-family:var(--code);font-size:.52rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--o-k6)}
.pv-sel b{flex:1;min-width:0;font-family:var(--code);font-size:10px;font-weight:400;
  color:var(--o-k2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-caret{flex:none;width:7px;height:7px;border-right:1.4px solid var(--o-k5);
  border-bottom:1.4px solid var(--o-k5);transform:translateY(-2px) rotate(45deg)}
.fr-pair .pv-card{margin-top:auto;margin-bottom:14px;padding:15px 18px}
.pv-adv{margin-top:auto;padding:13px 14px;border:1px solid var(--o-hcell);
  border-radius:10px;background:#0b0b0f}
.pv-advh{margin:0;font-size:11px;font-weight:500;color:var(--o-k3)}
.pv-advi{display:flex;align-items:center;gap:9px;margin:7px 0 0;padding:0 10px;height:30px;
  border:1px solid var(--o-hcell);border-radius:7px;background:#08080b}
.pv-advi span{flex:none;font-family:var(--code);font-size:.5rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--o-k6)}
.pv-advi b{flex:1;min-width:0;font-family:var(--code);font-size:9.5px;font-weight:400;
  color:var(--o-k4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-pair .pv-row{padding:7px 0}
.fr-pair .pv-code b{height:38px}
.fr-pair .pv-help{margin:11px 0 4px;font-size:11px;line-height:1.5}
.fr-pair .pv-btn,.fr-pair .pv-btn2{margin-top:14px;padding:8px 15px}

/* ══ 3. scene mt — one MetaTrader window, five states ══ */
.frp .mtwin{justify-content:flex-start}
.frp .mtwin .mtw-body{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}
.frp .mtwin .mtw-chart{min-height:0}
.mtw-side{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.mtw-mwb{flex:none}
.mtw-navb{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.mtw-navb .mtw-nav{flex:1 1 auto;min-height:0;overflow:hidden}
.mtw-mwh th{padding:3px 4px;border-bottom:1px solid #16202c;font-weight:400;text-align:left;
  font-size:8px;letter-spacing:.04em;color:#5f7286}
.mtw-mwh th:first-child{padding-left:9px}
.mtw-nav2{padding-left:20px !important;color:#8ba0b5}
.mtw-tabs{flex:none;display:flex;gap:8px;margin:0;padding:4px 9px;overflow:hidden;
  white-space:nowrap;border-top:1px solid #16202c;background:#0a1017;
  font-size:7.5px;color:#5f7286}
.mtw-tabs .on{color:#cfe0f0;border-bottom:1px solid #4aa3e0;padding-bottom:2px}

/* chart runs full-bleed, with the price and time scales MT5 draws */
.mtw-tab{position:relative;z-index:1}
.mtw-cv{position:absolute;left:0;right:40px;top:21px;bottom:15px;width:auto;height:auto}
.mtw-px{position:absolute;right:0;top:21px;bottom:15px;width:40px;
  border-left:1px solid #16202c;background:#070b10;
  font-family:Consolas,var(--code);font-size:7.5px;color:#5f7286}
.mtw-px span,.mtw-px b{position:absolute;right:4px;transform:translateY(-50%);
  font-weight:400;white-space:nowrap}
.mtw-px b{left:2px;right:2px;padding:1px 0;text-align:center;background:#c9a227;color:#08101a}
.mtw-tx{display:flex;justify-content:space-between;position:absolute;left:0;right:40px;bottom:0;
  height:15px;align-items:center;margin:0;padding:0 6px;border-top:1px solid #16202c;
  background:#070b10;font-family:Consolas,var(--code);font-size:7.5px;color:#5f7286}

/* what the EA draws on the chart: Comment() block, lock labels, dashboard */
.mtw-cmt{position:absolute;left:10px;top:28px;right:52px;margin:0;opacity:0;
  font-family:Consolas,var(--code);font-size:8.5px;line-height:1.75;
  color:rgba(255,255,255,.62);transition:opacity .4s ease;pointer-events:none}
.mtw-cmt p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtw-cmt p:first-child{color:#ff6b6b}
.fr-frame[data-step="6"] .mtw-cmt{opacity:1}
.mtwin .lk-box{position:absolute;left:12px;right:52px;top:96px;padding:14px 16px;
  border-radius:3px;opacity:0;transition:opacity .4s ease}
.fr-frame[data-step="6"] .mtwin .lk-box{opacity:1}
.mtwin .lk-t{font-size:12px;line-height:1.3}
.mtwin .lk-m{margin-top:10px;font-size:9.5px;line-height:1.6}
.mtw-panel{opacity:0;transition:opacity .45s ease}
.fr-frame[data-step="8"] .mtw-panel{opacity:1}

/* Tools > Options, and the Inputs dialog — one dialog shell, two contents */
.mtw-opt{width:min(300px,86%);top:48%}
.mtw-ck{display:flex;align-items:flex-start;gap:6px;margin:0;padding:4px 9px;
  font-size:8px;line-height:1.4;color:#8ba0b5}
.mtw-ck i{flex:none;width:8px;height:8px;margin-top:2px;border:1px solid #2f5f8f;
  border-radius:2px;background:#0a1520}
.mtw-ck.on{color:#e6eef6}
.mtw-ck.on i{background:#2f6ea8;box-shadow:inset 0 0 0 1.5px #101821}
.mtw-url{margin:2px 9px 0 24px;padding:4px 6px;border:1px solid #24384c;background:#0a1520;
  font-family:Consolas,var(--code);font-size:8px;color:#cfe0f0}
.fr-frame[data-step="3"] .mtw-opt{opacity:1;transition:opacity .35s ease}
.fr-frame[data-step="5"] .mtw-inp{opacity:1;transition:opacity .35s ease}

/* THE TOOLBOX PANE: docked from step 05, when the EA first prints */
.mtw-lg{flex:none;height:0;overflow:hidden;border-top:1px solid #16202c;background:#080d13;
  font-family:var(--code);transition:height .4s var(--o-eo)}
.fr-frame[data-step="5"] .mtw-lg,
.fr-frame[data-step="6"] .mtw-lg,
.fr-frame[data-step="8"] .mtw-lg{height:116px}
.mtw-lgh,.mtw-lgr{display:grid;grid-template-columns:48px 128px minmax(0,1fr);gap:0 8px;
  margin:0;padding:2px 10px;font-size:8px;line-height:1.45}
.mtw-lgh{padding-top:3px;padding-bottom:3px;border-bottom:1px solid #16202c;background:#0b1219;
  font-size:7.5px;letter-spacing:.06em;color:#5f7286}
.mtw-lgb{height:98px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.mtw-lgr{flex:none;color:#93a7ba}
.mtw-lgr .t{color:#5f7286;font-variant-numeric:tabular-nums}
.mtw-lgr .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6d8398}
.mtw-lgr .m{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;word-break:break-word}
.mtw-lgr.new .m{color:#fff}
.mtw-lgr.new{opacity:0;animation:frLine .34s ease forwards;animation-delay:calc(.25s + var(--i,0)*.22s)}

.mtw-stat{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0;padding:4px 10px;border-top:1px solid #16202c;background:#0b1219;
  font-size:7.5px;color:#5f7286}
.mtw-stat b{display:inline-flex;align-items:center;gap:5px;font-weight:400;color:#93a7ba}
.mtw-sig{display:inline-flex;align-items:flex-end;gap:1px;height:8px;font-style:normal}
.mtw-sig u{width:2px;background:#4fd07f;text-decoration:none}
.mtw-sig u:nth-child(1){height:3px}.mtw-sig u:nth-child(2){height:5px}
.mtw-sig u:nth-child(3){height:6px}.mtw-sig u:nth-child(4){height:8px;background:#1d4a2c}

/* ══ 4. scene exp — the Experts folder, Finder column view ══ */
.frp .fr-view.winx > .fd{flex:1 1 auto}
.fd{display:flex;flex-direction:column;min-height:0;margin:12px;position:relative;
  border:1px solid rgba(255,255,255,.11);border-radius:12px;background:#131316;overflow:hidden;
  box-shadow:0 24px 48px -32px rgba(0,0,0,.9)}
.fd-bar{flex:none;height:50px;display:flex;align-items:center;gap:11px;padding:0 12px;
  background:#1c1c1f;border-bottom:1px solid rgba(255,255,255,.08)}
.fd-tl{display:inline-flex;gap:7px;flex:none}
.fd-tl i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.fd-tl i:nth-child(2){background:#febc2e}
.fd-tl i:nth-child(3){background:#28c840}
.fd-t{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:#fff;letter-spacing:-.01em}
.fd-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 1 auto;min-width:0}
.fd-seg{display:inline-flex;flex:none;height:22px;border:1px solid rgba(255,255,255,.12);
  border-radius:7px;background:#141418;overflow:hidden}
.fd-seg b{position:relative;width:19px}
.fd-seg b + b{border-left:1px solid rgba(255,255,255,.09)}
.fd-seg b.on{background:rgba(255,255,255,.14)}
.fd-seg b.on::before{filter:brightness(1.9)}
.fd-seg b::before{content:'';position:absolute;left:5px;top:6px;width:9px;height:8px}
.fd-seg b:nth-child(1)::before{background:linear-gradient(#8a8a8f,#8a8a8f) 0 0/4px 3px no-repeat,linear-gradient(#8a8a8f,#8a8a8f) 5px 0/4px 3px no-repeat,linear-gradient(#8a8a8f,#8a8a8f) 0 5px/4px 3px no-repeat,linear-gradient(#8a8a8f,#8a8a8f) 5px 5px/4px 3px no-repeat}
.fd-seg b:nth-child(2)::before{background:linear-gradient(#8a8a8f,#8a8a8f) 0 0/9px 2px no-repeat,linear-gradient(#8a8a8f,#8a8a8f) 0 3px/9px 2px no-repeat,linear-gradient(#8a8a8f,#8a8a8f) 0 6px/9px 2px no-repeat}
.fd-seg b:nth-child(3)::before{background:linear-gradient(#8a8a8f,#8a8a8f) 0 0/2px 8px no-repeat,linear-gradient(#8a8a8f,#8a8a8f) 4px 0/2px 8px no-repeat,linear-gradient(#8a8a8f,#8a8a8f) 8px 0/2px 8px no-repeat}
.fd-seg b:nth-child(4)::before{background:linear-gradient(#8a8a8f,#8a8a8f) 0 0/9px 5px no-repeat,linear-gradient(#8a8a8f,#8a8a8f) 2px 6px/5px 2px no-repeat}
.fd-search{flex:0 1 104px;min-width:58px;max-width:104px}
.fd-fld{flex:none;position:relative;width:15px;height:12px;border-radius:1.5px 3px 3px 3px;
  background:#4a9de8;box-shadow:inset 0 3px 0 rgba(255,255,255,.17)}
.fd-fld::before{content:'';position:absolute;left:0;top:-2.5px;width:7px;height:3px;
  border-radius:2px 2px 0 0;background:#4a9de8}
.fd-doc{flex:none;width:11px;height:14px;border-radius:1.5px;background:#dcdce0;
  clip-path:polygon(0 0,68% 0,100% 22%,100% 100%,0 100%)}
.fd-body{flex:1 1 auto;display:flex;min-height:0;background:#0f0f12}
.fd-col{flex:none;margin:0;padding:7px 0;list-style:none;overflow:hidden;
  border-right:1px solid rgba(255,255,255,.07)}
.fd-cola{flex:0 0 136px}
.fd-colb{flex:0 0 190px}
.fd-col li{display:flex;align-items:center;gap:7px;height:32px;margin:0 7px;padding:0 7px;
  border-radius:6px;font-size:11.5px;line-height:1;color:#e8e8ec}
.fd-col li > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-ch{flex:none;font-style:normal;font-size:12px;color:#6f6f76}
.fd-col li.fd-dim{color:var(--o-k5)}
.fd-col li.fd-dim .fd-doc{background:#93939b}
.fd-col li.fd-sel{background:rgba(255,255,255,.1);color:#fff}
.fd-colb li.drop{background:#2d63a6;color:#fff;opacity:0}
.fd-colb li.drop .fd-doc{background:#fff}
.fr-view.on .fd-colb li.drop{animation:fdDrop .45s var(--o-eo) 1.85s both}
.fd-prev{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow:hidden;
  padding:14px 12px 12px;background:#141417;opacity:0}
.fr-view.on .fd-prev{animation:fdDrop .45s var(--o-eo) 1.85s both}
.fd-big{display:grid;place-items:center;margin-bottom:10px}
.fd-big .fd-file{width:78px;height:96px;border-radius:9px}
.fd-big .fd-file svg{width:28px;height:28px}
.fd-big .fd-file b{margin-top:3px;font-size:11px}
.fd-pnm{margin:0 0 11px;font-size:11.5px;font-weight:600;line-height:1.35;color:#fff;
  text-align:center;word-break:break-all}
.fd-pih{margin:0 0 3px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);
  font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--o-k6)}
.fd-pkv{display:block;margin:0;padding:6px 0}
.fd-pkv span{display:block;margin-bottom:2px;font-family:var(--code);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--o-k6)}
.fd-pkv b{display:block;font-size:11px;font-weight:400;color:#e8e8ec;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-pkv b.fd-dim{color:var(--o-k6)}
.fd-act{display:flex;gap:6px;margin:auto 0 0;padding-top:12px}
.fd-act span{flex:1;min-width:0;height:26px;display:grid;place-items:center;border-radius:7px;
  border:1px solid rgba(255,255,255,.12);background:#1c1c20;font-size:10.5px;color:var(--o-k3)}
.fd-path{flex:none;display:flex;align-items:center;gap:5px;height:30px;margin:0;padding:0 12px;
  background:#151518;border-top:1px solid rgba(255,255,255,.07);
  font-size:10.5px;color:var(--o-k5);white-space:nowrap;overflow:hidden}
.fd-path .fd-fld{width:12px;height:10px;box-shadow:inset 0 2px 0 rgba(255,255,255,.17)}
.fd-path .fd-fld::before{width:6px;height:2.5px;top:-2px}
.fd-path em{font-style:normal;color:#5c5c63}
.fd-path .on{color:#fff}
.fd-el{color:#5c5c63}
.fd-foot{flex:none;height:26px;margin:0;padding:0;display:grid;place-items:center;
  border-top:1px solid rgba(255,255,255,.07);background:#141417;
  font-size:10.5px;color:var(--o-k5)}
.fd-drag{position:absolute;left:290px;top:80px;max-width:176px;
  display:inline-flex;align-items:center;gap:9px;padding:7px 11px;
  border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#16161a;
  font-size:11px;color:var(--o-k2);opacity:0}
.fd-drag .fd-file{width:22px;height:26px;border-radius:4px}
.fd-drag .fd-file svg{width:10px;height:10px}
.fd-drag .fd-file b{margin-top:0;font-size:6px}
.fd-drag em{min-width:0;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══ 5. reduced motion ══ */
@media (prefers-reduced-motion:reduce){
  .mtw-lgr.new{animation:none;opacity:1}
  .mtw-lg,.mtw-cmt,.mtwin .lk-box,.mtw-panel{transition:none}
  .fr-view.on .fd-prev,.fr-view.on .fd-colb li.drop{animation:none;opacity:1}
}

/* ══ 6. stacked ══ */
@media (max-width:820px){
  .frp .frw{display:flex;flex-direction:column}
  .frp .fr-stick{position:sticky;top:60px;z-index:2}
  .frp .fr-unit{position:static;top:auto}
  .frp .fr-frame{height:min(46vh,380px)}
  .frp .fr-steps{padding:4px 20px 18px}
  .frp .fr-view{padding:0}

  .pv-app{grid-template-columns:minmax(0,1fr)}
  .pv-side{display:none}
  .pv-page{padding:16px 16px 30px}
  .pv-chan,.pv-what,.pv-facts,.pv-sel,.pv-adv{display:none}
  .fr-pair .pv-card{margin-top:auto;margin-bottom:auto}

  .mtwin .mtw-menu,.mtw-stat,.mtw-tabs,.mtw-mwh,.mtw-px,.mtw-tx{display:none}
  .mtw-mw tr:nth-child(n+4){display:none}
  .mtw-nav li:nth-child(n+8){display:none}
  .mtw-cv{right:0;bottom:0}
  .mtw-cmt{display:none}
  .mtwin .lk-box{top:auto;bottom:10px;left:10px;right:10px;padding:10px 12px}
  .mtwin .lk-t{font-size:10px}
  .mtwin .lk-m{margin-top:8px;font-size:8px;line-height:1.5}
  .fr-frame[data-step="5"] .mtw-lg,
  .fr-frame[data-step="6"] .mtw-lg,
  .fr-frame[data-step="8"] .mtw-lg{height:92px}
  .mtw-lgb{height:74px}
  .mtw-lgh,.mtw-lgr{padding-left:8px;padding-right:8px;font-size:7.5px;
    grid-template-columns:42px 62px minmax(0,1fr)}

  .fd{margin:10px}
  .fd-bar{height:38px;gap:9px;padding:0 10px}
  .fd-tl i{width:9px;height:9px}
  .fd-nav,.fd-seg,.fd-sort,.fd-search{display:none}
  .fd-t{font-size:12px}
  .fd-cola{flex:0 0 40%}
  .fd-colb{flex:1 1 auto;border-right:0}
  .fd-col li{height:26px;margin:0 4px;padding:0 6px;gap:6px;font-size:10.5px}
  .fd-prev,.fd-drag{display:none}
  .fd-path{height:24px;gap:4px;padding:0 10px;font-size:9.5px}
  .fd-path i:nth-of-type(1),.fd-path .fd-el,.fd-path span:nth-of-type(1),
  .fd-path em:first-of-type,.fd-path em:nth-of-type(2){display:none}
  .fd-foot{height:22px;font-size:9.5px}
}
@media (max-width:520px){
  .frp .fr-frame{height:min(50vh,340px)}
  .mtw-side,.mtw-lgr .t,.mtw-lgr .s{display:none}
  .mtw-body{grid-template-columns:minmax(0,1fr)}
  .mtw-lgh span:first-child,.mtw-lgh span:nth-child(2){display:none}
  .mtw-lgh,.mtw-lgr{grid-template-columns:minmax(0,1fr)}
  .fr-pair .pv-code b{height:34px}
  .pv-ver,.pv-rel em{display:none}
}

/* ── what Orion thinks, at this step: three real states, pinned under the window ── */
.fr-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:12px;
  border:1px solid var(--o-hcell);border-radius:11px;background:var(--o-hcell);overflow:hidden}
.fr-st > div{padding:11px 13px 12px;background:#0a0a0e}
.fr-st b{display:block;font-family:var(--code);font-size:.5rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--o-k6)}
.fr-st span{display:block;margin-top:6px;font-size:11.5px;line-height:1.35;color:var(--o-k3);
  transition:color .3s ease}
.fr-st[data-live=off] span{color:var(--o-k6)}
.fr-st > div:last-child span{color:var(--o-k2)}
.fr-st[data-live=on] > div:last-child span{color:#3ecf6e}
@media (max-width:820px){
  .fr-st{margin-top:10px}
  .fr-st > div{padding:9px 10px 10px}
  .fr-st span{margin-top:4px;font-size:10.5px}
}

/* ══ the 440px window: every scene shows less, the way a smaller window really does ══ */

/* MetaTrader: the Toolbox takes room from the side panes, as it does in the real terminal */
.mtw-lgb{height:98px}
.frp .mtwin .mtw-mw thead{display:none}
.frp .mtwin .mtw-mw tbody tr:nth-child(n+4){display:none}
.frp .mtwin .mtw-tabs{display:none}
.frp .mtwin .mtw-nav li:nth-child(1),
.frp .mtwin .mtw-nav li:nth-child(5),
.frp .mtwin .mtw-nav li:nth-child(6){display:none}
.frp .mtwin .mtw-nav li{padding-top:2px;padding-bottom:2px}
.mtw-opt{top:50%}

/* portal · Software: the release blurb and the channel row are the first to go */
.fr-dl .pv-chan,.fr-dl .pv-what{display:none}
.fr-dl .pv-page{gap:9px;padding:16px 20px}
.fr-dl .pv-card{padding:11px 13px 10px}
.fr-dl .pv-ver{margin-top:9px;font-size:22px}
.fr-dl .pv-pk{margin-top:9px;padding:8px 9px}
.fr-dl .pv-btn{margin-top:9px;padding:8px 11px}
.fr-dl .pv-bar{margin-top:8px}
.fr-dl .pv-note{margin-top:8px}
.pv-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
.pv-facts > div{padding:6px 9px}
.pv-facts > div:nth-child(n+3){border-top:0}
.pv-facts > div + div{border-left:1px solid var(--o-hcell)}
.pv-facts span{font-size:10px}

/* portal · Pair your device: Advanced Recovery is named under the panel, so it goes */
.fr-pair .pv-adv{display:none}
.fr-pair .pv-page{padding:16px 20px}
.fr-pair .pv-card{margin-bottom:0;padding:13px 15px}
.fr-pair .pv-code b{height:32px}
.fr-pair .pv-help{margin:9px 0 2px;font-size:10.5px}
.fr-pair .pv-btn,.fr-pair .pv-btn2{margin-top:11px;padding:7px 13px}
.fr-pair .pv-sel{height:34px;margin-top:12px}

/* Finder: shorter rows, a tighter preview */
.fd{margin:10px}
.fd-bar{height:42px}
.fd-col{padding:5px 0}
.fd-col li{height:24px;margin:0 5px;font-size:10.5px}
.fd-cola{flex:0 0 128px}
.fd-prev{padding:10px 10px 9px}
.fd-big{margin-bottom:7px}
.fd-big .fd-file{width:54px;height:66px;border-radius:7px}
.fd-big .fd-file svg{width:20px;height:20px}
.fd-big .fd-file b{font-size:9px}
.fd-pnm{margin-bottom:7px;font-size:10.5px}
.fd-pih{margin-bottom:1px;padding-top:7px;font-size:9px}
.fd-pkv{padding:3px 0}
.fd-pkv span{margin-bottom:1px;font-size:8.5px}
.fd-pkv b{font-size:10px}
.fd-prev .fd-pkv:nth-of-type(5),
.fd-prev .fd-pkv:nth-of-type(6){display:none}
.fd-act{padding-top:8px}
.fd-act span{height:22px;font-size:9.5px}
.fd-path{height:26px;font-size:9.5px}
.fd-foot{height:22px;font-size:9.5px}
.fd-drag{left:250px;top:66px}

/* the tree row is one line in a short pane, not a clipped two-liner */
.frp .mtwin .mtw-nav li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the portal rail carries 15 real items; at 440 they need tighter leading, not fewer items */
.frp .pv-side{padding:6px 0}
.frp .pv-nav li{padding-top:.5px;padding-bottom:.5px;font-size:10px}
.frp .pv-grp{margin:4px 0 2px}
.frp .pv-brand{margin-bottom:4px}
.frp .pv-tile{padding:5px 9px}
.frp .pv-tile em{line-height:1.3}
.frp .pv-tile + .pv-tile{margin-top:5px}

/* ── the Algo Trading button, where MetaTrader really puts it: right after New Order ── */
.mtw-algo{display:inline-flex;align-items:center;gap:5px;width:auto;height:18px;padding:0 7px;
  border:1px solid #24384c;border-radius:3px;background:#132234;font-size:8.5px;line-height:1;
  color:#8ba0b5;transition:color .3s ease,border-color .3s ease,background .3s ease}
.mtw-algo > i{width:0;height:0;border-left:6px solid #6f8598;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:border-left-color .3s ease}
.mtw-algo.on{background:#12281a;border-color:#2f6b3d;color:#6fd68d}
.mtw-algo.on > i{border-left-color:#3ecf6e}
.frp .mtwin .mtw-new{height:18px;display:inline-flex;align-items:center;padding:0 8px}
.mtw-ic{height:18px;width:18px;border:1px solid #1c2937}

/* ── the portal's own primary button: solid blue, the way the real pages draw it ── */
/* copied from the real portal: near-black pill, thin light edge, cyan version tag */
.pv-app .pv-btn{border-radius:999px;background:#0b0b0d;color:#fff;font-weight:600;
  border:1px solid rgba(255,255,255,.18);box-shadow:none}
.pv-app .pv-btn em{color:#7fc4e6;font-weight:500}
.pv-app .pv-btn2{border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.12);
  color:var(--o-k4);font-weight:500}
.pv-app .pv-btn::before{content:'';flex:none;width:11px;height:11px;margin-right:8px;
  background:currentColor;
  clip-path:polygon(45% 0,55% 0,55% 47%,74% 47%,50% 76%,26% 47%,45% 47%);}
.fr-pair .pv-btn::before{clip-path:polygon(12% 52%,26% 38%,42% 54%,74% 22%,88% 36%,42% 82%)}
.fr-pair .pv-btns{display:flex;align-items:center;gap:9px}
.fr-pair .pv-btn{flex:1;justify-content:center}
.fr-pair .pv-btn2{flex:none;margin-left:0;border-radius:9px}

/* ── 03 · the stops as one ledger: open trades are a column, not a paragraph ── */
.case{grid-template-columns:1fr}
.case-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0;padding:16px 26px 14px;
  border-top:1px solid var(--o-hcell);background:#08080b;font-size:12.5px;line-height:1.5;color:var(--o-k4)}
.case-h:first-child{border-top:0}
.case-h i{width:8px;height:8px;border-radius:50%;background:var(--o-green)}
.case-h b{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff}
.case-h.off i{background:var(--o-amber)}
.case .gb-cell{display:grid;grid-template-columns:32px minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.25fr);
  grid-template-rows:auto auto;gap:0 22px;align-items:start;padding:18px 26px;border-top:1px solid var(--o-hcell)}
.case .gb-cell .ph-ic-sm{grid-column:1;grid-row:1/3}
.case .gb-cell h3{grid-column:2;grid-row:1;margin:0;padding-top:6px}
.case .gb-cell .say,.case .gb-cell .stp-note{grid-column:2}
.case .gb-cell p[data-new]{grid-column:3;grid-row:1/3}
.case .gb-cell p[data-open]{grid-column:4;grid-row:1/3}
.case .gb-cell p[data-new],.case .gb-cell p[data-open]{margin:0!important;padding-top:7px}
.case .gb-cell p b{font-weight:500;color:#fff}
.case p[data-open] span::before{content:'';display:inline-block;width:7px;height:7px;margin:0 7px 1px 0;border-radius:50%;background:var(--o-green)}
.case p[data-open=no] span{color:var(--o-amber)}
.case p[data-open=no] span::before{background:var(--o-amber)}
/* #stop .ph-ic-sm is an id rule and beats .gb-cell.warn; today's "orange icon" never rendered */
#stop .gb-cell.warn .ph-ic-sm{color:var(--o-amber)}
/* the loop, boxed under the ledger, in the chapter colour */
#stop .clk h3,#stop .clk-sub{text-align:left}
#stop .clk-sub{max-width:62ch}
#stop .clk-track b{background:#5b7cff}
@media (max-width:1100px){
  .case .gb-cell{grid-template-columns:32px minmax(0,1fr) minmax(0,1.15fr);gap:12px 18px}
  .case .gb-cell p[data-new]{grid-column:3;grid-row:1}
  .case .gb-cell p[data-open]{grid-column:3;grid-row:2}
}
@media (max-width:820px){
  .case-h{padding:14px 20px 12px}
  .case .gb-cell{grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto;gap:10px 14px;padding:18px 20px}
  .case .gb-cell .ph-ic-sm{grid-row:1}
  .case .gb-cell h3{grid-row:1}
  .case .gb-cell p[data-open]{grid-column:2;grid-row:2}
  .case .gb-cell p[data-new]{grid-column:2;grid-row:3}
  .case .gb-cell .say{grid-row:4}
  .case .gb-cell .stp-note{grid-row:5}
  .case .gb-cell p[data-new],.case .gb-cell p[data-open]{padding-top:0}
}
/* #stop .say (1,1,0) outranks .gb-cell.warn .say (0,3,0); the two warn rows need the id too */
#stop .gb-cell.warn .say{--say:var(--o-amber)}

/* ── voices: three columns of verbatim Telegram messages that drift upward (a port of the shadcn testimonials-columns pattern, no script) ── */
#voices{padding:24px 0 120px}   /* the page's own beat: every home section is 24/120 */
/* head: kicker + h2 on the site's .sec-head rules (left), the sub-line in a right column whose first line sits on the h2's first line — the .bk-head grammar one section down.
   The sub-line sits in row 2 only (not spanning): a spanning item would inflate row 1 and push the kicker off the 24px beat */
.vt-head{display:grid;grid-template-columns:minmax(0,1fr) min(460px,44%);gap:0 48px;align-items:start;max-width:none;margin:0 0 26px;text-align:left}
.vt-head .sec-kicker,.vt-head h2{grid-column:1}
.vt-head .sec-kicker{color:#35d6ff}   /* the chapter's one colour accent, the same cyan as the Pause focus ring */
.vt-head .vt-s{grid-column:2;grid-row:2;margin:12px 0 0;max-width:none;font-size:13.5px;line-height:1.6;color:var(--o-k4);text-wrap:pretty}   /* same size and grey as the brokers sub-line */   /* 10px = the h2's own margin-top */
/* card: the site's #0a0a0c card fill, a crisp .10 edge and a 1px top hairline; 18px radius matches .bk-card; no tinted shadow */
.vt-card{margin:0;padding:24px 26px 20px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:#0a0a0c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:border-color .2s var(--o-eo),background-color .2s var(--o-eo),box-shadow .2s var(--o-eo)}
.vt-card blockquote{margin:0;font-size:16px;line-height:1.5;letter-spacing:-.006em;color:var(--o-k1);text-wrap:pretty}
/* credit: one line under a hairline — initials mark, name, dot, source. Text initials only, never a photo */
.vt-card figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)}
.vt-card figcaption i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#000;border:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.05em;color:var(--o-k1)}
.vt-card figcaption i:empty{border-style:dashed}
.vt-card figcaption b{font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:#fff}
.vt-card figcaption span{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;line-height:1.3;letter-spacing:-.01em;color:var(--o-k5)}
.vt-card figcaption span::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--o-k6)}
/* pointer devices only: the column already pauses under the cursor, so the card under it lifts one step. No transform, no glow */
@media (hover:hover){
  .vt-card:hover{border-color:rgba(255,255,255,.17);background:#0d0d10;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
}
/* the bar above the columns: a pause that works from the keyboard, sitting on the window's shoulder */
.vt-pause{position:absolute;width:1px;height:1px;margin:-1px;opacity:0;pointer-events:none}
.vt-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 10px}
.vt-toggle{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:#0a0a0e;font-size:12px;color:var(--o-k3);cursor:pointer;user-select:none}
.vt-toggle::before{content:'';width:6px;height:6px;border-radius:50%;background:#3ecf6e}
.vt-toggle .vt-off,.vt-pause:checked ~ .vt-bar .vt-on{display:none}
.vt-pause:checked ~ .vt-bar .vt-off{display:inline}
.vt-pause:checked ~ .vt-bar .vt-toggle::before{background:var(--o-k5)}
.vt-pause:focus-visible ~ .vt-bar .vt-toggle{outline:2px solid #35d6ff;outline-offset:3px}
.vt-pause:checked ~ .vt .vt-list{animation-play-state:paused}
/* window: cards travel upward, so the bottom is the entry (deep 150px ramp) and the top is the exit (short 56px ramp) */
.vt{display:flex;justify-content:center;gap:20px;max-height:720px;overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent,#000 56px,#000 calc(100% - 150px),transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 56px,#000 calc(100% - 150px),transparent)}
.vt-col{flex:1 1 0;min-width:0;max-width:380px;overflow:hidden}
.vt-col{--dur:68s}.vt-md{--dur:72s}.vt-lg{--dur:60s}   /* 24.2 / 22.2 / 22.5 px/s on the 1647 / 1599 / 1352px lists at 1440; re-measure if card type or padding changes */
.vt-list{display:flex;flex-direction:column;gap:20px;padding-bottom:20px;animation:vtUp var(--dur,46s) linear infinite}
.vt-md .vt-list{animation-delay:-2.8s}   /* ~60px head start */
.vt-lg .vt-list{animation-delay:-5.4s}   /* ~130px head start: the first rows never share a top edge */
.vt-col:hover .vt-list{animation-play-state:paused}
@keyframes vtUp{to{transform:translateY(-100%)}}
/* 1024-1099: three 289px columns, so 'Telegram · name withheld' would wrap behind its dot; the source takes its own line under the name instead */
@media (min-width:1024px) and (max-width:1099px){
  .vt-card figcaption span{flex-basis:100%;padding-left:38px}   /* 28px mark + 10px gap */
  .vt-card figcaption span::before{display:none}
}
@media (max-width:1023px){.vt-lg{display:none}.vt-col{max-width:480px}}
@media (max-width:767px){
  /* phones: the three columns stack as three short windows, so every message is reachable */
  .vt{flex-direction:column;align-items:stretch;gap:12px;max-height:none;mask-image:none;-webkit-mask-image:none}
  /* narrow cards make taller lists, so the columns run slower here */
  .vt-col{--dur:88s}.vt-md{--dur:92s}.vt-lg{--dur:78s}
  .vt-col,.vt-md,.vt-lg{display:block;flex:none;height:320px;max-width:none;
    mask-image:linear-gradient(to bottom,transparent,#000 36px,#000 calc(100% - 72px),transparent);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 36px,#000 calc(100% - 72px),transparent)}
}
@media (max-width:820px){
  #voices{padding:24px 0 72px}
  .vt-head{grid-template-columns:1fr;margin-bottom:18px}
  .vt-head .vt-s{grid-column:1;grid-row:auto;margin:14px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .vt,.vt-col{height:auto;max-height:none;overflow:visible;mask-image:none;-webkit-mask-image:none}
  .vt{align-items:flex-start}
  .vt-list{animation:none}
  .vt-list[aria-hidden]{display:none}
  .vt-bar{display:none}
  .vt-card{transition:none}
}

/* ── brokers: a wide rail of five recommended brokers, official logos sized to a similar ink weight ── */
#brokers{padding:24px 0 120px;overflow:hidden}   /* the page's own beat: every home section is 24/120 */
/* head: kicker + h2 on the site's .sec-head rules (left), conditions + the pill that checks them (right) */
.bk-head{display:grid;grid-template-columns:minmax(0,1fr) min(460px,44%);gap:48px;align-items:start;margin-bottom:34px}
.bk-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-top:24px}   /* kicker line 13px + h2 margin 10px: the paragraph's first line sits on the h2's first line */
.bk-s{margin:0;font-size:14px;line-height:1.6;color:var(--o-k4)}
/* rail: hard-clipped at the viewport edge like the reference (no fade mask, so an edge logo never looks washed out) */
.bk-rail{overflow:hidden}
.bk-move{display:flex;width:max-content}
.bk-track{display:flex;flex:none;gap:10px;padding:6px 5px;animation:bkSlide 56s linear infinite}   /* 5px each side so the seam between the two copies is also 10px; 6px clears the focus ring */
.bk-rail:hover .bk-track,.bk-rail:focus-within .bk-track{animation-play-state:paused}
@keyframes bkSlide{to{transform:translateX(-100%)}}
.bk-card{position:relative;flex:none;display:flex;flex-direction:column;justify-content:center;align-items:center;width:360px;height:460px;
  padding:40px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#000;text-decoration:none;color:#fff}
.bk-card:focus-visible{outline:2px solid #35d6ff;outline-offset:3px}
/* logos sit in a fixed-height box, the way Framer's customer cards do, so they read as one calm row */
.bk-logo{display:block;height:38px}
.bk-logo.hfm{height:56px}.bk-logo.xm{height:34px}.bk-logo.vantage{height:40px}
.bk-logo img{display:block;width:auto;height:100%}
/* hover preview (Framer 'Trusted by' pattern): the broker's homepage fades in behind the logo and fills the whole card,
   under a flat dark scrim so the white logo and link stay readable. Pointer devices only. Only the picture moves. */
.bk-card{overflow:hidden}
.bk-logo,.bk-go{z-index:1}.bk-logo{position:relative}
.bk-shot{position:absolute;inset:0;border-radius:inherit;background:#0d0d0d;opacity:0;transition:opacity .2s var(--o-eo);pointer-events:none}
.bk-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.bk-shot::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
@media (hover:hover){
  .bk-card:hover .bk-shot,.bk-card:focus-visible .bk-shot{opacity:1}
}
.bk-go{position:absolute;left:0;right:0;bottom:40px;display:flex;justify-content:center;align-items:center;gap:6px;font-size:18px;letter-spacing:-.2px;color:#fff}
.bk-go svg{width:16px;height:16px}
/* under the rail: one line, always visible */
.bk-note{margin:34px 0 0;font-size:13.5px;line-height:1.6;color:var(--o-k4)}
@media (prefers-reduced-motion:reduce){
  .bk-shot{transition:none}
  .bk-rail{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scroll-padding-inline:max(32px,calc((100% - 1200px)/2 + 32px))}
  .bk-card{scroll-snap-align:start}
  .bk-track{animation:none}
  .bk-track[aria-hidden]{display:none}
  .bk-move{padding:0 max(32px,calc((100% - 1200px)/2 + 32px))}
}
@media (max-width:820px){
  #brokers{padding:24px 0 72px}
  .bk-head{grid-template-columns:1fr;gap:16px;margin-bottom:20px}
  .bk-side{padding-top:0}
  .bk-track{animation-duration:44s}
  .bk-card{width:270px;height:345px;border-radius:16px}
  .bk-logo{height:30px}.bk-logo.hfm{height:44px}.bk-logo.xm{height:27px}.bk-logo.vantage{height:32px}
}
@media (max-width:480px){
  .bk-head h2 br{display:none}   /* 'broker.' would otherwise sit alone on a line on 360-390px phones */
}

/* ── features: the EA itself, five cards between #hero and #product ──────────
   tailark "features-8" in this site's own card language: 6 columns, 16px gap
   (at the reference's 12px our heavier 1px/.10 edge makes neighbouring 18px
   radii touch), #0a0a0c fill, the .12 top hairline off .vt-card, 24px padding.
   Spans reuse the --sp / --sp-m convention already on .tile, and the two
   breakpoints are the site's own 980 (the .bento 6→4 step) and 620.
   ONE accent, --ft-acc: cyan, because orion.css's colour law reads
   "cyan = the subject" and the EA is this section's subject. One accent stroke
   per card; every other line is grey. No JS, no loops, no gradients. Each card
   plays one entrance sequence keyed off .in (see choreography below); the
   reduced-motion block at the end stops the cards and every child. ── */
#features{padding:120px 0 120px}   /* #hero ends at padding-bottom:0, so this section carries the top 120 that #product used to */

.ft{
  --ft-acc:var(--o-cyan);              /* the section's one accent */
  --ft-l2:rgba(255,255,255,.09);       /* illustration hairline */
  margin-top:44px;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}

.ft-card{position:relative;overflow:hidden;grid-column:span var(--sp,2);
  display:flex;flex-direction:column;padding:24px;
  border:1px solid rgba(255,255,255,.10);border-radius:18px;background:#0a0a0c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--o-eo) var(--d,0s),transform .5s var(--o-eo) var(--d,0s),
    border-color .25s ease,background-color .25s ease,--ft-acc .25s ease}
.ft-card.in{opacity:1;transform:none}
/* the wave runs across a row, not down the list: the 2nd and 3rd of row one, the
   2nd of each pair below. 120ms is the whole cost, so nobody waits for a card. */
.ft-card:nth-child(2),.ft-card:nth-child(5),.ft-card:nth-child(7){--d:.06s}
.ft-card:nth-child(3){--d:.12s}
.ft-card h3{margin:0;font-family:var(--display);font-size:18px;font-weight:500;
  line-height:1.25;letter-spacing:-.02em;color:var(--head)}
.ft-card p{margin:7px 0 0;font-size:13.5px;line-height:1.6;color:var(--o-k4);
  text-wrap:pretty}
/* one honesty line for the whole grid, in the site's .co-legal fine-print
   register — it replaced six mono .ft-note chants, one per card. */
.ft-foot{margin:20px 0 0;font-size:11.5px;line-height:1.6;color:var(--o-k6);
  max-width:74ch;text-wrap:pretty}
.ft-foot a{color:var(--o-k4);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.16)}
.ft-foot a:hover{color:var(--o-k2);border-bottom-color:rgba(255,255,255,.4)}

/* A · B · C read centred, like the reference's first row */
.ft-mid{align-items:center;text-align:center}
.ft-mid p{max-width:34ch;margin-inline:auto}
/* the drawing slot takes every spare pixel, so the text block lands on the card's
   bottom padding in all four centred cards and the titles share a baseline. */
.ft-mid > :first-child{flex:1 0 auto}

/* A · the settings fragment sizes itself off .ft-win, so the lock column is the
   only rule it needs. Colour is the whole legend, drawn with the settings
   panel's own #i-lock / #i-unlock: cyan marks the two rows your plan leaves to
   you, grey the three the plan or the risk mode sets. */
.ft-lk{color:var(--o-k6)}
.ft-lk-on{color:var(--ft-acc)}

/* B · C · drawings that size themselves. Never set a height on these: an svg in
   a fixed-height box falls back to its intrinsic ratio and overflows the card. */
.ft-dial{display:block;width:170px;height:170px;margin:2px auto 16px}
/* …and never wider than its own viewBox. A stretched svg scales its stroke
   widths and its mono labels with it: at 620 this 292-unit window was drawn 508
   wide, so its 9px labels rendered at 15.7px. Capping at the viewBox width pins
   every panel to scale 1.000, and card A's fragment inherits the same cap. */
.ft-win{display:block;width:100%;max-width:292px;height:auto;margin:2px auto 16px}

/* D · E · two halves. The card itself is the grid, so there is no wrapper. */
.ft-card.ft-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:24px;align-items:start}

/* the round icon in its double hairline ring (D · E left halves) */
.ft-ico{position:relative;display:grid;place-items:center;width:40px;height:40px;
  margin-bottom:20px;border-radius:50%;background:var(--o-card);
  border:1px solid rgba(255,255,255,.14)}
.ft-ico::after{content:'';position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(255,255,255,.06)}
.ft-ico svg{width:18px;height:18px;color:var(--o-k3)}

/* D · F · the section's two bold marks: one hero (F, the magic number — the
   widest card's subject IS a number) and one support (D, a zero). Display face
   at -.04em, line-height 1, the .bn2-stat pattern. Each carries a precise mono
   caption at the page's 9.5px floor, so neither can be misread. align-self:end
   hangs the mark on the bottom padding, opposite the icon at the top. */
.ft-stat{align-self:end;min-width:0}
.ft-stat b{display:block;font-family:var(--display);font-weight:500;
  font-size:56px;line-height:1;letter-spacing:-.04em;color:var(--head)}
.ft-stat span{display:block;margin-top:10px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ft-acc);text-wrap:balance}

/* E · the licence handshake: the EA's own three dashboard lines on a hairline */
.ft-chips{position:relative;align-self:stretch;list-style:none;margin:0;padding:0;
  display:grid;gap:12px;align-content:space-between}
.ft-chips::before{content:'';position:absolute;top:10px;bottom:10px;left:50%;
  width:1px;background:var(--ft-l2)}
.ft-chips li{position:relative;display:flex;width:90%}
.ft-chips li:nth-child(even){margin-left:auto}
.ft-chip{flex:1;display:flex;align-items:center;gap:10px;padding:11px 13px;
  border-radius:12px;border:1px solid rgba(255,255,255,.11);background:var(--o-card);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--o-k4);white-space:nowrap}
.ft-chip i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--o-k6)}
.ft-chip[data-on]{color:var(--ft-acc);border-color:rgba(255,255,255,.18)}
.ft-chip[data-on] i{background:var(--ft-acc)}

/* drawing type — every svg here sets fill explicitly, the parents carry fill:none.
   The scale sits on the page floor, not under it: the smallest mono on the page
   is the 9.4px kicker, so captions are 9.5, labels 10.5–11, values 12. */
.ft-tl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;fill:var(--o-k4)}
.ft-tb{font-family:var(--mono);font-size:11px;letter-spacing:.10em;fill:var(--o-k1)}
.ft-ts{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;fill:var(--o-k6)}
.ft-tr{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;fill:var(--o-k3)}
.ft-ta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;fill:var(--ft-acc)}
.ft-tv{font-family:var(--mono);font-size:12px;letter-spacing:.04em;fill:var(--o-k1)}

/* ≤980 · the site's own bento step: 4 columns. A, D and E go full, B and C pair. */
@media (max-width:980px){
  .ft{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ft-card{grid-column:span var(--sp-m,4)}
}
/* ≤620 · one column; the splits stack and the marks sit under their text */
@media (max-width:620px){
  .ft{grid-template-columns:minmax(0,1fr);gap:14px}
  .ft-card{grid-column:1/-1}
  .ft-card.ft-2{grid-template-columns:minmax(0,1fr);gap:20px}
  .ft-chips li{width:100%}
  .ft-chips::before{display:none}
}

/* F · the wide split: the hero mark takes the wider column and the hero size,
   72px at 1440 down to D's 56px by 980; 5vw so it never outgrows its column. */
@media (min-width:621px){.ft-card.ft-4{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}}
.ft-hero b{font-size:clamp(56px,5vw,72px)}
/* F's row partner G hangs its text on the card's bottom padding, so F hangs its
   text column there too and the two titles land on one line. */
.ft-card.ft-4{align-items:end}
/* G · the segmented control sits above its title, like B's dial */
.ft-seg{max-width:292px;margin-inline:auto}

/* ── entrance choreography · each drawing plays its sequence once, keyed off
   .ft-card.in: nothing runs before the card is on screen, nothing loops. Every
   keyframe is a `from` only: the resting state is the element's own style, so
   a late or missing class leaves the drawing finished. --fk is a child's beat,
   added to the card's --d; the longest card (E) ends at 1.16s. <use> glyphs and
   fills fade only: a <use> carries its own transform attribute. Frames, rings
   and hairlines are structure and never move. ── */
@keyframes ftUp{from{opacity:0;transform:translateY(10px)}}
@keyframes ftLit{from{color:var(--o-k4);border-color:rgba(255,255,255,.11)}}
@keyframes ftDot{from{background:var(--o-k6)}}
.ft-card.in .ft-win :is(text,use,path,rect:not(:first-child)),
.ft-card.in .ft-dial :is(text,path:nth-child(2)),
.ft-card.in .ft-chips li,.ft-card.in .ft-chip[data-on],
.ft-card.in .ft-chip[data-on] i,.ft-card.in .ft-stat{
  animation-duration:.4s;animation-timing-function:var(--o-eo);animation-fill-mode:backwards;
  animation-delay:calc(var(--d,0s) + var(--fk,.12s))}

/* wFade before ftUp: .ft-hero is also a .ft-stat and must rise, not fade */
.ft-card.in .ft-win :is(use,path,rect:not(:first-child)),.ft-card.in .ft-dial path:nth-child(2),
.ft-card.in .ft-stat{animation-name:wFade}
.ft-card.in :is(.ft-win,.ft-dial) text,.ft-card.in .ft-chips li,.ft-card.in .ft-hero{animation-name:ftUp}
.ft-card.in .ft-chip[data-on]{animation-name:ftLit}
.ft-card.in .ft-chip[data-on] i{animation-name:ftDot}

/* the accent is a registered property so a colour change can ease, not snap. The
   initial-value is never used — .ft always sets --ft-acc — but a non-universal
   syntax requires one. */
@property --ft-acc{syntax:'<color>';inherits:true;initial-value:#35d6ff}

/* the beats, by card. A: rows top to bottom, the footer, then the two cyan locks.
   B: the ring and its grey segments are static with the card; the chosen segment
   fades in last, with its label. */
.ft-card:nth-child(1) .ft-win>:nth-child(n+6):nth-child(-n+8){--fk:.22s}
.ft-card:nth-child(1) .ft-win>:nth-child(n+10):nth-child(-n+12){--fk:.32s}
.ft-card:nth-child(1) .ft-win>:nth-child(n+14):nth-child(-n+16){--fk:.42s}
.ft-card:nth-child(1) .ft-win>:nth-child(n+18):nth-child(-n+19){--fk:.52s}
.ft-card:nth-child(1) .ft-win>:nth-child(n+22){--fk:.6s}
.ft-card:nth-child(1) .ft-lk-on{--fk:.7s}
.ft-card:nth-child(2) .ft-dial :is(path:nth-child(2),text){--fk:.55s}

/* C: header, rows in order, London's tick and plan tag last. D · F: the mark
   lands after its text. E: chips down the hairline, LICENSE OK arrives grey and
   lights last. G: the four positions left to right, then AUTO's fill, the
   bracket and the plan line. */
.ft-card:nth-child(3) .ft-win>:nth-child(n+6):nth-child(-n+8){--fk:.22s}
.ft-card:nth-child(3) .ft-win>:nth-child(11){--fk:.32s}
.ft-card:nth-child(3) .ft-win>:nth-child(n+14):nth-child(-n+16){--fk:.42s}
.ft-card:nth-child(3) .ft-win>:is(:nth-child(10),:nth-child(12)){--fk:.6s}
.ft-stat{--fk:.3s}
.ft-chips li:nth-child(2){--fk:.28s}
.ft-chips li:nth-child(3){--fk:.44s}
.ft-chip[data-on],.ft-chip[data-on] i{--fk:.7s}
.ft-card:nth-child(7) .ft-win>:nth-child(5){--fk:.19s}
.ft-card:nth-child(7) .ft-win>:nth-child(7){--fk:.26s}
.ft-card:nth-child(7) .ft-win>:nth-child(9){--fk:.33s}
.ft-card:nth-child(7) .ft-win>:is(:nth-child(2),:nth-child(n+10)){--fk:.48s}

@media (hover:hover){
  /* one property answers for the whole drawing: every accent stroke, fill and
     label in a card reads var(--ft-acc), so lifting it lights them together. */
  .ft-card:hover{border-color:rgba(255,255,255,.17);background:#0d0d10;
    --ft-acc:#5adeff}
}
@media (prefers-reduced-motion:reduce){
  .ft-card{opacity:1;transform:none;transition:none}
  /* and every child: the drawings are simply finished */
  .ft-card *{animation:none !important}
}

/* ══ 19 · late overrides — these MUST stay last in the file ═══════════════════════════
      Every rule here has the same specificity as the one it corrects, so it wins only on
      source order. Moving this block up the file silently disables it. ══ */

/* iOS Safari zooms the whole page in when a field under 16px takes focus, and never zooms
   back out. Keyed to the pointer, not the width, or a phone in landscape (932x430) is
   missed. .af input is set to 14px at its own rule far below this file's midpoint, which
   is why this has to sit at the end. Also lifts the auth fields 41px -> 44px. */
@media (pointer:coarse){
  .af input,.af select,.af textarea,.cbo-input,.cmp-find input{font-size:16px}
  .cmp-find input{padding:11px 12px 11px 34px}
}

/* The portal window's 50px title bar cannot hold the title, the subtitle and three tags
   below ~820: measured, the page title clipped to "S.." at 620 and 700 while both were
   shown. The tags are the least useful of the three on a small screen, so they go first
   and the subtitle survives down to 600. */
@media (max-width:820px){.win-tags{display:none}}

/* checkout's Lifetime row while the promo runs. Two prices side by side inside the fixed
   `auto` price column squeeze the title column — measured 8px wide at 320 and 78px at 390,
   against 63/133 for Basic — and the row grows to 228px against 78 for the others. Below
   900 the struck price sits on its own line above; the desktop rule is required too, or
   the two read as one number: "$329$263". */
.co-pp s{color:var(--o-k6);text-decoration:line-through;margin-right:8px}
@media (max-width:900px){
  .co-pp s{display:block;margin:0 0 -3px;font-size:12px;text-align:left}
  .co-pn{flex-wrap:wrap}
}

/* setup.html in phone landscape: .fr-stick pins the MetaTrader figure at any width under
   820, and on a short screen the figure plus its captions is most of the view, so none of
   the eight steps can be read. .by-fig already carries this guard; .fr-stick never got it. */
@media (max-width:820px) and (max-height:640px){
  /* .frp .fr-stick, not .fr-stick: orion.css:6346 pins it with two classes (0,2,0), so a
     single-class rule here loses on specificity no matter how late it sits. */
  .frp .fr-stick{position:static}
}