/* ============================================================
   Quasar Markets — landing
   Style system (2026-09 relight): white paper, ink type, one blue
   accent, cyan→blue→violet→peach gradients. The Apple grammar:
   centered headlines, pill buttons, alternating white / grey /
   black bands, product windows on soft colour fields.
   NOTE: --color-bone-white kept its NAME but is now the INK.
   Every rule that used it as the foreground flips with it; the
   dark in-page experiences restore the bone value locally.
   ============================================================ */
:root{
  --color-bone-white:#1d1d1f;   /* the foreground: ink */
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --paper:#ffffff;
  --paper-2:#f5f5f7;
  --hair:rgba(0,0,0,.09);
  --color-slate-veil:#ffffff;
  --color-carbon:#101010;
  --color-obsidian:#000000;
  --color-graphite:rgba(0,0,0,.11);
  /* the sole chromatic accent — Quasar blue (the monogram's deep blue, lifted for white) */
  --color-accent:#0b63e6;
  --accent-rgb:11,99,230;
  --cyan-rgb:40,208,245;
  /* the gradient vocabulary: the app icon's cyan → the accent blue → violet → a warm peach */
  --g-cyan:#28d0f5;--g-blue:#0b63e6;--g-violet:#7c5cff;--g-peach:#ff8f6b;
  --grad-text:linear-gradient(92deg,var(--g-cyan) 0%,var(--g-blue) 40%,var(--g-violet) 72%,var(--g-peach) 100%);

  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --fs-caption:14px;
  --fs-body:17px;
  --fs-body-lg:18px;
  --fs-subheading:clamp(20px,5.6vw,22px);
  --fs-heading-sm:clamp(24px,6.6vw,36px);
  --fs-heading:clamp(31px,8.8vw,56px);
  --fs-display:clamp(46px,13vw,105px);
  --fs-display-xl:clamp(58px,17vw,136px);

  --pad-x:clamp(20px,5vw,72px);
  --gap-section:clamp(120px,15vh,190px);

  --ease:cubic-bezier(.52,.01,0,1);
  --ease-tetris:cubic-bezier(.46,.03,.52,.96);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(var(--accent-rgb),.18);color:var(--ink)}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
img,svg{display:block}
:focus-visible{outline:2px solid var(--color-bone-white);outline-offset:4px}
html,body{overflow-x:hidden;overflow-x:clip}
body.locked{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- masked reveals (never fades — always masked slides) ----------
   padding/margin pair gives descenders room below line-height-1 lines
   without changing the visual rhythm */
.mask{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.mask .ln{display:block}
.js .mask .ln{
  transform:translateY(118%);
  transition:transform .8s var(--ease);
  transition-delay:calc(var(--d,0)*.09s);
}
.js .in .mask .ln,.js .mask.in .ln{transform:none}
.w{display:inline-block}
.w.b{font-weight:700}

/* ================= page atmosphere: a quiet aurora under the whole page =================
   The Earth/starfield stage is retired (2026-09). #stage stays in the DOM, hidden, so
   the pose bookkeeping in the menu/overlay code keeps working with nothing to draw. */
.stage,.vignette,.topfade{display:none}
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;will-change:transform}
.amb i:nth-child(1){left:-24vmax;top:-28vmax;
  background:radial-gradient(closest-side,rgba(40,208,245,.14),transparent 70%);
  animation:amb1 38s ease-in-out infinite alternate}
.amb i:nth-child(2){right:-28vmax;top:8vh;
  background:radial-gradient(closest-side,rgba(124,92,255,.11),transparent 70%);
  animation:amb2 46s ease-in-out infinite alternate}
.amb i:nth-child(3){left:16%;bottom:-32vmax;width:62vmax;height:62vmax;
  background:radial-gradient(closest-side,rgba(255,143,107,.09),transparent 70%);
  animation:amb3 54s ease-in-out infinite alternate}
.amb i:nth-child(4){right:6%;bottom:-20vmax;width:52vmax;height:52vmax;
  background:radial-gradient(closest-side,rgba(11,99,230,.09),transparent 70%);
  animation:amb4 42s ease-in-out infinite alternate}
.amb i:nth-child(5){display:none}
@keyframes amb1{to{transform:translate3d(22vw,14vh,0)}}
@keyframes amb2{to{transform:translate3d(-18vw,-12vh,0)}}
@keyframes amb3{to{transform:translate3d(-14vw,16vh,0) scale(1.22)}}
@keyframes amb4{to{transform:translate3d(-16vw,10vh,0) scale(1.18)}}
.scrolled header{background:rgba(255,255,255,.86)}

/* ============================== header ============================== */
/* sharp, prominent bar: dark glass + hairline, two tiers on wide screens */
header{
  position:fixed;top:0;left:0;right:0;z-index:10;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:transform .55s var(--ease),background-color .4s var(--ease);
}
header.hide{transform:translateY(-110%)}
.hdr-main{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px clamp(20px,2.6vw,44px)}
.hdr-right{display:flex;align-items:center;gap:2px;flex:0 0 auto}
/* one clean line: wordmark left, links center, Invest right */
.wordmark{font-size:18px;letter-spacing:-.01em;line-height:1;position:relative;z-index:2;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
.wm-ic{width:28px;height:28px;border-radius:7px;flex:0 0 auto;box-shadow:0 1px 4px rgba(0,0,0,.16)}
nav.desk{display:none;align-items:center;gap:10px}
nav.desk a.navlink,nav.desk .lang>button{
  background:none;border:0;color:var(--color-bone-white);
  font:400 12px/1 var(--font-sans);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;
  white-space:nowrap;display:inline-block;padding:14px 2px;margin:-12px 0;
}
.chip{font-size:9px;letter-spacing:.08em;white-space:nowrap;color:var(--color-accent);border:1px solid rgba(var(--accent-rgb),.55);border-radius:980px;
  padding:2px 5px;margin-left:6px;vertical-align:2px}
/* language switcher — clean box w/ circular flags (user-supplied reference) */
.lang{position:relative}
nav.desk .lang>button{display:inline-flex;align-items:center;gap:8px;text-transform:none;
  font-size:13px;border:1px solid rgba(0,0,0,.18);border-radius:980px;
  padding:0 14px;height:37px;margin:0 0 0 6px}
#langCur{display:inline-flex;align-items:center;gap:8px}
.flg{width:18px;height:18px;border-radius:50%;flex:0 0 auto;display:block}
.lang>button svg{width:9px;height:6px;flex:0 0 auto;stroke:rgba(29,29,31,.85);fill:none;
  stroke-width:1.5;transition:transform .3s var(--ease)}
.lang.open>button svg{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:140px;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;
  padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.14);display:none;z-index:30}
.lang.open .lang-menu{display:block}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 11px;border-radius:8px;
  font:400 13px/1 var(--font-sans);letter-spacing:.02em;
  background:none;border:0;color:var(--color-bone-white);cursor:pointer;opacity:.88;
  transition:opacity .25s var(--ease),background-color .25s var(--ease)}
.lang-menu button:hover,.lang-menu button:focus-visible{opacity:1;background:rgba(0,0,0,.05)}
.lang-menu button[aria-current="true"]{opacity:1;background:rgba(var(--accent-rgb),.12)}
/* roll-up hover — two stacked copies, text rolls out / duplicate rolls in */
.roll{display:inline-block;overflow:hidden;height:1em;line-height:1}
.roll .rr{display:block;transition:transform .45s var(--ease)}
.roll .rr::after{content:attr(data-t);display:block}
.roll:hover .rr,.roll:focus-visible .rr{transform:translateY(-100%)}
.ghost{
  position:relative;display:inline-block;background:transparent;cursor:pointer;white-space:nowrap;
  border:1px solid var(--color-bone-white);border-radius:980px;
  color:var(--color-bone-white);
  font:500 14px/1 var(--font-sans);letter-spacing:.02em;text-transform:uppercase;
  padding:10px 15px;
  transition:border-color .35s var(--ease);
}
.ghost::after{content:"";position:absolute;inset:-8px} /* touch-target extender */
/* the sweep: a sharp bone fill wipes in from the left, text inverts */
.ghost{background-image:linear-gradient(var(--color-bone-white),var(--color-bone-white));
  background-repeat:no-repeat;background-size:0% 100%;background-position:left center;
  transition:border-color .35s var(--ease),background-size .5s var(--ease),color .3s var(--ease)}
@media (hover:hover){.ghost:hover{
  border-color:var(--color-bone-white);background-size:100% 100%;color:#fff}}
.ghost:focus-visible,.ghost:active{
  border-color:var(--color-bone-white);background-size:100% 100%;color:#fff}
.ghost.nav-cta{border-radius:980px;margin-left:6px;padding:11px 18px;font-size:13px}
/* the loud CTAs: bigger type, tighter presence */
.ghost.big{font-size:15px;padding:18px 32px;letter-spacing:.04em}
/* oversized hero CTA for the Ask fold — fills the space, all breakpoints */
.ghost.big.cta-xl{font-size:clamp(21px,2.5vw,31px);padding:34px 90px;letter-spacing:.04em;font-weight:700;
  background:var(--color-bone-white);color:#fff;border-color:var(--color-bone-white);
  animation:askGlow 2.8s ease-in-out infinite;
  transition:transform .32s var(--ease),filter .32s var(--ease),background .32s var(--ease)}
.ghost.big.cta-xl:hover{transform:translateY(-3px) scale(1.015);filter:brightness(1.06)}
/* one smooth breathing accent glow — no hard rings, no vertical artifacts */
@keyframes askGlow{
  0%,100%{box-shadow:0 0 22px 0 rgba(var(--cyan-rgb),.30),0 18px 40px rgba(0,0,0,.16)}
  50%{box-shadow:0 0 56px 10px rgba(124,92,255,.42),0 18px 40px rgba(0,0,0,.16)}}
@media (prefers-reduced-motion:reduce){.ghost.big.cta-xl{animation:none}}
@media (max-width:600px){.ghost.big.cta-xl{padding:24px 44px;font-size:19px}}
.ghost.huge{font-size:clamp(16px,4.4vw,19px);padding:22px clamp(34px,8vw,58px);letter-spacing:.05em}
/* the daily action: Sign in rides solid bone, unmissable on entry */
.ghost.cta-solid{background-color:var(--color-bone-white);color:#fff;border-color:var(--color-bone-white)}
@media (hover:hover){.ghost.cta-solid:hover{background-color:#000;border-color:#000;color:#fff}}
/* the money CTA: Quasar blue, filled — the one coloured button in the chrome */
.ghost.cta-accent{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff;
  background-image:linear-gradient(#0a56c8,#0a56c8)}
.ghost.cta-accent:hover,.ghost.cta-accent:focus-visible{border-color:#0a56c8;color:#fff}
@media (max-width:479.9px){
  .hdr-main{gap:8px;padding-left:14px;padding-right:14px}
  .wordmark{font-size:15px}
  .burger{padding:17px 6px;margin-right:-6px}
}
/* the toolbar is ALWAYS one row with the wordmark on desktop: compact from
   1200 to 1419.9px, roomy from 1420px; below 1200 the mobile strip takes over */
@media (min-width:1200px){nav.desk{display:flex}}
@media (min-width:1200px) and (max-width:1419.9px){
  .hdr-main{gap:10px}
  .wordmark{font-size:16px}
  nav.desk{gap:5px}
  nav.desk a.navlink{font-size:11px;padding:14px 1px}
  nav.desk .lang>button{font-size:11px;height:31px;padding:0 11px;margin-left:4px}
  nav.desk .nav-cta{margin-left:4px;padding:9px 13px;font-size:11px}
}


/* full-menu overlay (all viewports) */
.mnav{
  position:fixed;inset:0;z-index:9;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  display:flex;flex-direction:column;justify-content:flex-start;gap:2px;
  padding:96px var(--pad-x) 40px;overscroll-behavior:contain;overflow-y:auto;
  visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility 0s .5s;
}
.mnav.open{visibility:visible;opacity:1;transition:opacity .5s var(--ease)}
/* the menu floats on the live space stage: page content fades out, Earth slides in behind the grid */
main,footer{transition:opacity .45s var(--ease)}
body.locked main,body.locked footer{opacity:0;pointer-events:none}
.mnav .tile:focus{outline:none}
.mnav::after{content:"";position:fixed;left:50%;top:50%;width:170vmax;height:170vmax;
  margin:-85vmax 0 0 -85vmax;z-index:1;pointer-events:none;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 82%,rgba(0,0,0,.035) 91%,transparent 100%);
  animation:mnavSweep 26s linear infinite}
@keyframes mnavSweep{to{transform:rotate(360deg)}}
.mnav>*{position:relative;z-index:2}
/* centered column, never squeezed — but the dune video is exempt: it IS the whole backdrop */
.mnav>*{flex-shrink:0;width:100%;max-width:880px;margin-left:auto;margin-right:auto}
.mnav .mask{margin:2px auto}
.mnav a.big{font-size:clamp(21px,4.6vw,29px);line-height:1.15;letter-spacing:-.01em;display:inline-block;padding:7px 0}
.m-app{margin-bottom:18px}
.m-app .ghost{width:100%;text-align:center}
/* the site map as a tile grid — three across, staggered entrance */
.m-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{
  position:relative;display:flex;align-items:flex-end;
  min-width:0;overflow:hidden;
  min-height:clamp(150px,19vh,205px);padding:14px;
  border:1px solid rgba(0,0,0,.06);border-radius:18px;
  font-size:clamp(12px,3.4vw,15px);line-height:1.25;letter-spacing:.02em;text-transform:uppercase;
  background-color:#f5f5f7; /* soft grey card on the white menu */
  background-image:linear-gradient(var(--color-bone-white),var(--color-bone-white));
  background-repeat:no-repeat;background-size:0% 100%;background-position:left center;
  transition:border-color .35s var(--ease),background-size .5s var(--ease),color .3s var(--ease);
  opacity:0;
}
@media (hover:hover){.tile:hover{background-size:100% 100%;color:#fff;border-color:var(--color-bone-white)}}
.tile:focus-visible{background-size:100% 100%;color:#fff;border-color:var(--color-bone-white)}
.tile .chip{margin-left:6px}
.tile:hover .chip{border-color:rgba(255,255,255,.5);color:#fff}
.tile-accent{border-color:var(--color-accent)}
.tile.dim{--tile-o:.45;opacity:.45;pointer-events:none}
/* tile artwork — real assets pulled from quasarmarkets.com (qm_media/menu/) */
.tile .tlab{position:relative;z-index:1}
/* the lockups were drawn white for the dark menu: ink them on the grey tile, back to white on the ink sweep */
.tile.art:not(.photo) .tart,.tile.art:not(.photo) .tduo img{filter:brightness(0) opacity(.82);transition:filter .3s var(--ease)}
.tile .tart{position:absolute;left:16px;right:16px;top:14px;bottom:46px;margin:auto;
  max-width:calc(100% - 32px);max-height:calc(100% - 60px);object-fit:contain;pointer-events:none}
.tile.icon .tart{max-height:66px}
/* wide brand marks (Intelligence, Education): optically centered, a touch bigger */
.tile.mark .tart{left:12px;right:12px;top:10px;bottom:42px;
  max-width:calc(100% - 24px);max-height:calc(100% - 52px)}
.tile.mark .tart[src*="quasar-ai-mark"],.tile.mark .tart[src*="education-mark"]{
  max-width:72%;max-height:56px}
.tile.photo .tart{left:0;right:0;top:0;bottom:0;max-width:100%;max-height:100%;
  width:100%;height:100%;object-fit:cover;opacity:.94}
.tile.photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(9,13,18,.85))}
.tile .tduo{position:absolute;left:16px;right:16px;top:12px;bottom:46px;
  display:flex;flex-direction:column;justify-content:center;gap:7px;pointer-events:none}
/* partner lockups: both marks the same size, centered — seamless pairing */
.tile .tduo img{object-fit:contain;min-height:0;align-self:center;max-width:76%;max-height:38px}
.tile .tduo i{height:1px;flex:none;width:82%;align-self:center;transform:rotate(-7deg);
  background:linear-gradient(115deg,transparent 6%,rgba(255,253,249,.55),transparent 94%)}
.tile .tduo.dr{gap:12px}
.tile .tduo.dr img{max-width:86%;max-height:52px}
/* data room wordmark: set exactly like every other tile label */
.drgrad{display:block;text-align:center;font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(12px,3.4vw,15px);color:var(--color-bone-white);opacity:.92}
/* art tiles: white-on-dark logos — trade the bone wipe for a glass lift */
/* photos keep the dark hover (a photo on white reads as a black slab) */
.tile.photo:hover,.tile.photo:focus-visible{background-size:0% 100%;color:#fff;
  border-color:#1d1d1f;background-color:#1d1d1f}
/* everything else gets the white sweep; artwork flips to a dark silhouette */
.tile.art:not(.photo):hover .tart,.tile.art:not(.photo):focus-visible .tart,
.tile.art:not(.photo):hover .tduo img,.tile.art:not(.photo):focus-visible .tduo img{
  filter:none}
.tile.art:not(.photo):hover .drgrad,.tile.art:not(.photo):focus-visible .drgrad{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:#fff;color:#fff}
.tile.edge:hover .edge-art i,.tile.edge:focus-visible .edge-art i{color:#fff}
.m-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* newsletter tile: typographic Edge. artwork */
.tile.edge .edge-art{position:absolute;left:16px;right:16px;top:12px;bottom:46px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  pointer-events:none;text-align:center}
.tile.edge .edge-art i{font-style:normal;font-size:9.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--color-bone-white);opacity:1;max-width:100%}
.tile.edge .edge-art b{font-size:clamp(30px,4.2vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1}
/* the finale: two big boxes calling for the click */
.m-cta{margin-top:10px}
.m-cta .tile{min-height:clamp(170px,22vh,230px);border-color:rgba(0,0,0,.14)}
.m-cta .tile .tlab{font-size:clamp(15px,4vw,19px);letter-spacing:.05em;font-weight:600}
.m-cta .tile::after{content:"";position:absolute;inset:-1px;pointer-events:none;
  border:1px solid transparent;animation:ctaCall 3.2s ease-in-out infinite}
.m-cta .tile:nth-child(2)::after{animation-delay:1.6s}
@keyframes ctaCall{
  0%,100%{border-color:transparent;box-shadow:0 0 0 rgba(var(--accent-rgb),0)}
  50%{border-color:rgba(var(--accent-rgb),.85);
      box-shadow:0 0 26px rgba(var(--accent-rgb),.3),inset 0 0 18px rgba(var(--accent-rgb),.12)}
}
/* phones: two columns — labels wrap at spaces, tiles read even bigger */
@media (max-width:479.9px){.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* everything below the grids sits centered */
.m-label{text-align:center}
.m-langs .ln,.m-page .ln{justify-content:center}
.mfoot{text-align:center}
.mnav.open .tile{animation:tileIn .55s var(--ease) both;animation-delay:calc(.18s + var(--d,0)*.05s)}
@keyframes tileIn{from{opacity:0;transform:translateY(16px)}to{opacity:var(--tile-o,1);transform:none}}
.m-label{font-size:var(--fs-caption);letter-spacing:.02em;text-transform:uppercase;opacity:.6;margin:18px auto 8px}
.m-label:first-child{margin-top:0}
.m-sec .ln{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:15px}
.m-sec a,.m-sec .dim{padding:8px 0;display:inline-block}
.m-sec .dim{opacity:.42}
.m-actions{margin-top:10px}
.m-actions .ln{display:flex;flex-wrap:wrap;gap:15px;padding:8px 0}
.m-langs .ln{display:flex;flex-wrap:wrap;gap:2px 20px}
.m-langs button{background:none;border:0;color:var(--color-bone-white);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  font:400 13px/1 var(--font-sans);letter-spacing:.02em;padding:9px 0;opacity:.62}
.m-langs .flg{width:16px;height:16px}
.m-langs button[aria-current="true"]{opacity:1;border-bottom:1px solid rgba(var(--accent-rgb),.7)}
.m-page .ln{display:flex;flex-wrap:wrap;gap:2px 24px;font-size:15px}
.m-page a{padding:8px 0;display:inline-block}
/* menu open: header strip must not eat taps meant for the overlay,
   and the dead inline toolbar must not paint over it */
body.locked header{pointer-events:none;background:transparent}
body.locked .burger{pointer-events:auto}
body.locked nav.desk,body.locked .hdr-signin{visibility:hidden}
.js .mnav .ln{transform:translateX(108%);transition:transform .55s var(--ease);transition-delay:calc(.22s + var(--d,0)*.045s)}
.js .mnav.open .ln{transform:none}
.mnav .mfoot{margin-top:48px;font-size:15px}
.mnav .mfoot a{border-bottom:1px solid rgba(var(--accent-rgb),.6)}

/* ============================== layout ============================== */
main{position:relative;z-index:1}
section{padding:0 var(--pad-x);margin:var(--gap-section) auto;max-width:1400px;scroll-margin-top:96px}
.eyebrow{
  font-size:var(--fs-caption);letter-spacing:.02em;text-transform:uppercase;
  opacity:.78;margin-bottom:26px;
}
.display{font-size:var(--fs-display);line-height:1;letter-spacing:-.03em;font-weight:600}
.display-xl{font-size:var(--fs-display-xl);line-height:1;letter-spacing:-.035em;font-weight:600}
.heading{font-size:var(--fs-heading);line-height:1.1;letter-spacing:-.03em;font-weight:600}
.heading-sm{font-size:var(--fs-heading-sm);line-height:1.17;letter-spacing:-.02em;font-weight:600}
.sub{font-size:var(--fs-body-lg);line-height:1.5;max-width:34ch;color:var(--ink-2)}
.sub b{color:var(--ink)}
/* the bands: alternating white / grey / ink tiles, Apple-style, full-bleed behind a centered section */
section.band{position:relative;margin-top:0;margin-bottom:0;
  padding-top:calc(var(--gap-section)*.72);padding-bottom:calc(var(--gap-section)*.72)}
section.band::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;
  background:rgba(245,245,247,.92);z-index:-1}
section.band-ink{--color-bone-white:#fffdf9;--ink:#fffdf9;--ink-2:rgba(255,253,249,.72);--color-graphite:rgba(255,255,255,.18);color:#fffdf9}
section.band-ink::before{background:#1d1d1f}
section.band-ink .sub{color:var(--ink-2)}
section.band-glow::before{background:
  radial-gradient(60% 70% at 18% 30%,rgba(40,208,245,.28),transparent 70%),
  radial-gradient(50% 60% at 82% 24%,rgba(124,92,255,.22),transparent 70%),
  radial-gradient(60% 60% at 50% 100%,rgba(255,143,107,.22),transparent 70%),
  radial-gradient(40% 50% at 50% 50%,rgba(11,99,230,.14),transparent 70%),#fff}
.measure{max-width:21ch}

/* ============================== hero ==============================
   Apple grammar: the product name, one line under it, two actions, then the product.
   One light source sits behind the desk window. Nothing drifts, nothing tilts. */
.hero{position:relative;min-height:0;margin:0;max-width:none;
  padding:clamp(120px,15vh,168px) var(--pad-x) 0;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.hero>*{position:relative;z-index:2}
.hero-light{position:absolute;left:50%;top:34%;width:min(1500px,130vw);height:min(900px,90vh);z-index:0;pointer-events:none;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(11,99,230,.13),rgba(40,208,245,.06) 48%,rgba(255,255,255,0) 72%)}
.hero-copy{max-width:980px;margin:0 auto}
.hero h1{font-size:clamp(46px,7.6vw,104px);line-height:1;letter-spacing:-.03em;font-weight:700;color:var(--ink)}
.hero-tag{margin:18px auto 0;font-size:clamp(22px,2.6vw,36px);line-height:1.15;letter-spacing:-.02em;font-weight:500;color:var(--ink)}
.hero-sub{margin:22px auto 0;max-width:58ch;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink-2);text-align:center}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:32px;flex-wrap:wrap}
.tlink{display:inline-flex;align-items:center;gap:7px;font-size:17px;color:var(--color-accent);font-weight:500;padding:8px 2px}
.tlink svg{width:9px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tlink:hover{text-decoration:underline;text-underline-offset:4px}
.hero-desk{width:min(1180px,100%);margin:clamp(48px,7vh,84px) auto 0;padding-bottom:clamp(24px,5vh,72px)}
.desk-frame{position:relative;border-radius:18px;background:#0b0d12;overflow:hidden;border:1px solid rgba(0,0,0,.12);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.35)}
.desk-grid{display:grid;gap:2px;background:#0b0d12;grid-template-columns:repeat(12,1fr);grid-template-rows:1.18fr 1fr;aspect-ratio:16/9.6;
  grid-template-areas:"scr scr scr scr scr scr scr scr news news news news" "wx wx wx wx cha cha cha cha live live live live"}
.dk{position:relative;overflow:hidden;background:#111318;min-height:0}
.dk>img,.dk>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dk>video{filter:brightness(1.12) contrast(1.05)}
.dk-cha{grid-area:cha}.dk-news{grid-area:news}.dk-news>img{object-position:left top}
.dk-wx{grid-area:wx}.dk-live{grid-area:live}.dk-live>img{object-position:left center}.dk-scr{grid-area:scr}.dk-scr>video{object-position:left top}
.dk .dk-t{position:absolute;left:12px;bottom:10px;z-index:1;font-size:12px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.dk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.5));pointer-events:none}
/* one entrance for the whole window */
.js .desk-frame{opacity:0;transform:translateY(16px);transition:opacity .6s ease-out,transform .6s ease-out;transition-delay:.2s}
.js .hero.in .desk-frame{opacity:1;transform:none}
.unit{opacity:1}
@media (max-width:379.9px){
  .hdr-right .dl-mini,button.dl-mini,.dl-mini{display:none!important}
  .hdr-main{gap:8px}
  .wordmark{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:1200px) and (max-height:919.9px){
  .hero{padding-top:min(12vh,112px)}
  .hero h1{font-size:min(7.6vw,11vh)}
  .hero-desk{margin-top:40px}
}
@media (max-width:767.9px){
  .hero{padding-top:clamp(108px,14vh,136px)}
  .hero h1{font-size:clamp(40px,11.5vw,72px)}
  .hero-tag{font-size:clamp(19px,5.4vw,24px)}
  .hero-sub{font-size:16px;margin-top:18px}
  .hero-cta{gap:18px;margin-top:24px}
  .hero-desk{width:calc(100% + var(--pad-x));margin-top:40px}
  .desk-grid{grid-template-columns:repeat(6,1fr);grid-template-rows:1.25fr 1fr 1fr;aspect-ratio:9/11.5;
    grid-template-areas:"scr scr scr scr scr scr" "news news news wx wx wx" "cha cha cha live live live"}
}

/* wide folds: pitch and CTA on the left, the wall stacked on the right */

/* ============================== dataset ticker: the coverage fold's texture ============================== */
.dstick{margin-top:40px;display:grid;gap:20px;
  margin-left:calc(var(--pad-x)*-1);margin-right:calc(var(--pad-x)*-1)}
.tick-line{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.tick-inner{display:inline-flex;gap:0;white-space:nowrap;width:max-content;
  font-size:clamp(19px,4.2vw,32px);letter-spacing:-.01em;line-height:1.3;opacity:.95;
  animation:tickL 46s linear infinite}
.tick-inner span{padding-right:56px}
.tick-line.t2 .tick-inner{animation:tickR 60s linear infinite;opacity:.85}
@keyframes tickL{to{transform:translateX(-50%)}}
@keyframes tickR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ============================== media rails: interviews + press ============================== */
.rail-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:64px;
  font-size:var(--fs-caption);letter-spacing:.02em;text-transform:uppercase;opacity:.75}
.rail{margin-top:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;cursor:grab;
  margin-left:calc(var(--pad-x)*-1);margin-right:calc(var(--pad-x)*-1);
  scroll-snap-type:x proximity;scroll-padding-left:var(--pad-x)}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;user-select:none;-webkit-user-select:none;scroll-snap-type:none}
.rail-track{display:flex;gap:14px;width:max-content;padding:8px var(--pad-x)}
.iv-card{display:block;width:clamp(242px,66vw,330px);border:1px solid rgba(0,0,0,.08);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.05);
  scroll-snap-align:start;transition:border-color .35s var(--ease)}
.iv-card:hover,.iv-card:focus-visible{border-color:rgba(0,0,0,.22)}
.iv-thumb{position:relative;aspect-ratio:16/9;background:#ececf0;overflow:hidden}
.iv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.iv-pod{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.iv-meta{padding:14px 14px 16px}
.iv-outlet{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.iv-title{font-size:15px;line-height:1.35;margin-top:7px}
.iv-date{font-size:12px;opacity:.82;margin-top:9px}
.press-card{display:block;width:clamp(182px,48vw,236px);scroll-snap-align:start}
.press-logo{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;
  height:clamp(88px,13vw,116px);display:flex;align-items:center;justify-content:center;padding:16px;
  transition:border-color .35s var(--ease)}
.press-card:hover .press-logo,.press-card:focus-visible .press-logo{border-color:rgba(var(--accent-rgb),.8)}
.press-logo img{max-width:82%;max-height:72%;object-fit:contain;display:block}
.press-cap{font-size:13px;line-height:1.45;opacity:1;margin-top:10px}
/* awards carry their medallions inline */

/* ============================== feature videos (click to play, real thumbnails) ============================== */
.fvid{position:relative;margin:44px auto 0;max-width:900px;border:1px solid rgba(0,0,0,.08);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.14)}
.fvid video{width:100%;aspect-ratio:16/9;display:block;background:var(--color-obsidian);object-fit:cover}
.fv-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(13,17,22,.12),rgba(13,17,22,.38));
  border:0;cursor:pointer;transition:background .35s var(--ease)}
.fv-play:hover{background:linear-gradient(180deg,rgba(13,17,22,.05),rgba(13,17,22,.25))}
.fv-btn{display:inline-block;border:1px solid #fff;color:#fff;border-radius:980px;
  background:rgba(13,17,22,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:400 15px/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;
  padding:18px 32px;transition:background-color .35s var(--ease),color .35s var(--ease)}
.fv-play:hover .fv-btn,.fv-play:focus-visible .fv-btn{background:#fff;color:#1d1d1f}

/* ============================== devices strip ============================== */
.devrow{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 40px;max-width:780px;margin:0 auto}
/* the floating-devices film replaces the icon row — edges melt into the
   page so the devices appear to float directly in space */
.devvid{margin:-10px auto 0;max-width:min(1120px,98vw)}
.devvid-v{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:transparent!important}
.dev{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:76px}
.dev svg{width:42px;height:42px;stroke:var(--color-bone-white);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:1}
.dev i{font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.95;color:var(--color-bone-white);white-space:nowrap}
@media (max-width:640px){
  .devrow{gap:26px 24px;max-width:340px}
  .dev{min-width:70px}
  .dev svg{width:36px;height:36px}
}

/* ============================== media / QM Live overlay ==============================
   standby broadcast box + video library + booking; devs wire the player and data.
   when live: add .live to #mvov (dot pulses) and mount the stream inside #mvBox. */
.mvov .tmwrap{max-width:1160px}
.tmov.open .mvbody{animation:tmUp .6s var(--ease) both;animation-delay:.15s}
.mvdot{display:inline-block;width:12px;height:12px;border-radius:50%;background:rgba(0,0,0,.25);
  margin-left:10px;vertical-align:middle}
.mvov.live .mvdot{background:#ff5a5a;animation:mvPulse 1.6s ease-in-out infinite}
@keyframes mvPulse{0%,100%{opacity:1}50%{opacity:.35}}
.mvbox{position:relative;border:1px solid rgba(0,0,0,.08);background:#0f1116;border-radius:22px;overflow:hidden;color:#fffdf9;--color-bone-white:#fffdf9;
  aspect-ratio:16/9;max-height:62vh;width:100%;display:flex;align-items:center;justify-content:center;
  margin-bottom:56px}
.mvstand{text-align:center;padding:24px;max-width:46ch}
.mvtv{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;
  border:1px solid rgba(255,253,249,.28);border-radius:50%;margin-bottom:22px}
.mvtv svg{width:34px;height:34px;stroke:var(--color-bone-white);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.mvst{font-size:var(--fs-heading-sm);line-height:1.15;letter-spacing:-.01em;font-weight:400;margin:0 0 10px}
.mvss{font-size:var(--fs-body);line-height:1.6;opacity:.66;margin:0 0 26px}
.mvacts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.mvghost{display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:none;
  border:1px solid rgba(255,253,249,.35);color:var(--color-bone-white);
  font:400 12px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;padding:13px 18px;
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.mvghost{border-radius:980px}
.mvghost:hover{background:var(--color-bone-white);color:#0e1319}
.mvghost svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mvh{font-size:var(--fs-heading-sm);line-height:1.15;letter-spacing:-.01em;font-weight:400;margin:0 0 22px}
.mvsearch{display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(0,0,0,.22);
  padding:2px 2px 0;margin-bottom:22px}
.mvsearch svg{width:15px;height:15px;stroke:var(--color-bone-white);stroke-width:1.6;fill:none;stroke-linecap:round;opacity:.55;flex:0 0 auto}
.mvsearch input{flex:1;background:transparent;border:0;color:var(--color-bone-white);
  font:400 15.5px/1.4 var(--font-sans);padding:11px 0;border-radius:0;outline:none;-webkit-appearance:none}
.mvsearch input::placeholder{color:rgba(0,0,0,.35)}
.mvsearch:focus-within{border-bottom-color:var(--color-accent)}
.mvctl{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.mvseg,.mvfil{display:inline-flex;flex-wrap:wrap;border:1px solid rgba(0,0,0,.14);border-radius:980px;padding:3px}
.mvpill{background:none;border:0;color:var(--color-bone-white);opacity:.7;cursor:pointer;
  font:400 11.5px/1.3 var(--font-sans);letter-spacing:.02em;text-transform:uppercase;padding:10px 14px;
  transition:background-color .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease)}
.mvpill{border-radius:980px}
.mvpill.on{background:var(--color-bone-white);color:#fff;opacity:1}
.mvgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:64px}
.mvcard{border:1px solid rgba(0,0,0,.06);background:#f5f5f7;border-radius:16px;overflow:hidden;padding-bottom:16px}
.mvthumb{aspect-ratio:16/9;background:linear-gradient(180deg,#e9e9ee,#d9d9df);border-bottom:1px solid rgba(0,0,0,.05)}
.mvline{display:block;height:9px;background:rgba(0,0,0,.1);margin:14px 14px 0;width:82%}
.mvline.s{width:52%;margin-top:8px;opacity:.6}
.mvbook{border-top:1px solid rgba(0,0,0,.1);padding-top:48px;max-width:600px;margin-left:auto;margin-right:auto}
.mvbook .mvh,.mvbook>.tmsub,.mvbook .mvor,.mvbook .mvok2{text-align:center}
.mvbook>.tmsub{margin-left:auto;margin-right:auto}
.mvor{font-size:13px;opacity:.72;margin-top:22px}
.mvor a{color:var(--color-bone-white);text-decoration:underline;text-underline-offset:3px}
.mvok2{display:none;font-size:15px;line-height:1.6}
.mvbook.done form{display:none}
.mvbook.done .mvok2{display:block;animation:tmUp .6s var(--ease) both}
.mvcta{background:var(--color-bone-white);color:#fff;border-color:var(--color-bone-white)}
.mvcta:hover{background:transparent;color:var(--color-bone-white)}
.mvdur{opacity:.55;font-size:10.5px;letter-spacing:.04em}
.mvbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:none}
.mvbox.playing video{display:block}
.mvbox.playing .mvstand{display:none}
.mvback{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;display:none;
  align-items:center;justify-content:center;cursor:pointer;background:rgba(9,13,18,.65);
  border:1px solid rgba(255,253,249,.28);color:var(--color-bone-white);
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.mvbox.playing .mvback{display:flex}
.mvback:hover{background:var(--color-bone-white);color:#0e1319}
.mvback svg{width:12px;height:12px}
@media (max-width:880px){.mvgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .mvgrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .mvbox{aspect-ratio:auto;min-height:340px;margin-bottom:44px}
  .mvctl{flex-direction:column;align-items:stretch}
  .mvseg,.mvfil{display:flex}
  .mvpill{flex:1;padding:10px 6px;font-size:10px;letter-spacing:.01em}
  .mvline{margin:10px 10px 0}
  .mvsearch input{font-size:16px}
}

/* ============================== educator application overlay ==============================
   five steps over the Earth: About / Profession / Education / Links / Documents.
   submit is a front-end stub; devs POST the fields + files at the marked point. */
.edov .tmwrap{max-width:640px}
.tmov.open .edbody{animation:tmUp .6s var(--ease) both;animation-delay:.15s}
.edsteps{display:flex;border:1px solid rgba(0,0,0,.14);border-radius:980px;padding:3px;overflow:hidden}
.edstep{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:none;border:0;
  color:var(--color-bone-white);opacity:.55;cursor:pointer;
  font:400 11px/1.3 var(--font-sans);letter-spacing:.02em;text-transform:uppercase;padding:12px 4px;
  transition:background-color .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease)}
.edstep i{font-style:normal;font-size:9px;opacity:.6;letter-spacing:.1em}
.edstep{border-radius:980px}
.edstep.on{background:var(--color-bone-white);color:#fff;opacity:1}
.edstep.done{opacity:.85}
.edstep:disabled{cursor:default;opacity:.3}
.edline{height:1px;background:rgba(0,0,0,.1);margin:0 0 36px;position:relative}
.edline i{position:absolute;left:0;top:0;height:1px;width:20%;background:var(--color-bone-white);
  transition:width .5s var(--ease);box-shadow:0 0 12px rgba(var(--accent-rgb),.8)}
[dir=rtl] .edline i{left:auto;right:0}
.edpane{display:none}
.edpane.on{display:block;animation:tmUp .45s var(--ease) both}
.edh{font-size:var(--fs-heading-sm);line-height:1.15;letter-spacing:-.01em;font-weight:400;margin:0 0 24px}
.edh b{font-weight:700}
.edhint{font-size:13px;line-height:1.6;opacity:.6;margin:-8px 0 26px}
.ednav{display:flex;gap:10px;margin-top:10px}
.edback{flex:0 0 auto;background:none;border:1px solid rgba(0,0,0,.3);border-radius:980px;color:var(--color-bone-white);
  font:400 12.5px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;padding:17px 26px;cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.edback:hover{background:var(--color-bone-white);color:#fff}
.edback[hidden]{display:none}
.ednext{flex:1;margin-top:0}
.drsel{position:relative;display:block}
.drsel select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:22px}
[dir=rtl] .drsel select{padding-right:2px;padding-left:22px}
.drsel svg{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:12px;height:12px;
  stroke:var(--color-bone-white);stroke-width:1.6;fill:none;opacity:.6;pointer-events:none}
[dir=rtl] .drsel svg{right:auto;left:2px}
.eddrop{display:flex;flex-direction:column;align-items:center;gap:9px;border:1px dashed rgba(0,0,0,.28);border-radius:16px;
  padding:38px 20px;cursor:pointer;text-align:center;
  transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.eddrop:hover,.eddrop.over{border-color:var(--color-bone-white);background:rgba(0,0,0,.03)}
.eddrop svg{width:26px;height:26px;stroke:var(--color-bone-white);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.eddt{font-size:14px}
.edds{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.5}
.edfiles{list-style:none;margin:16px 0 0;padding:0}
.edfiles li{display:flex;align-items:center;gap:12px;border:1px solid rgba(0,0,0,.08);
  background:#f5f5f7;border-radius:10px;padding:10px 14px;margin-bottom:6px;font-size:13px;min-width:0}
.edfiles .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edfiles .sz{opacity:.5;font-size:11px;margin-left:auto;flex:0 0 auto}
[dir=rtl] .edfiles .sz{margin-left:0;margin-right:auto}
.edfiles button{background:none;border:0;color:var(--color-bone-white);opacity:.6;cursor:pointer;
  font-size:15px;line-height:1;padding:2px 4px;flex:0 0 auto}
.edfiles button:hover{opacity:1}
.edok{display:none}
.edov.done .edok{display:block;animation:tmUp .6s var(--ease) both}
.edov.done #edForm,.edov.done .edsteps,.edov.done .edline{display:none}
@media (max-width:640px){
  .edsteps{flex-wrap:wrap}
  .edstep{flex:1 1 33.33%;padding:11px 2px;font-size:9.5px;border-top:1px solid rgba(0,0,0,.06)}
  .edstep:nth-child(-n+3){border-top:0}
  .edstep i{display:none}
  .ednav{flex-wrap:wrap}
  .edback{flex:1;order:2}
  .ednext{flex:1 1 100%;order:1}
}

/* ============================== mobile toolbar strip ==============================
   phones only: the desktop toolbar as a seamless horizontal loop under Sign in / Invest */
.mstrip-wrap{position:relative;display:none}
.mstrip{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  background:rgba(255,255,255,.8); /* belt: the strip always carries its own shade */
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  border-top:1px solid rgba(0,0,0,.06);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
.mstrip::-webkit-scrollbar{display:none}
.ms-set{display:flex;flex:0 0 auto}
.mstrip a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;color:var(--color-bone-white);
  text-decoration:none;font:400 11px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;
  padding:14px 13px;opacity:.85;-webkit-tap-highlight-color:transparent}
.mstrip a:active{opacity:1}
.ms-cue{position:absolute;right:7px;top:50%;transform:translateY(-50%);pointer-events:none;
  opacity:.65;transition:opacity .4s var(--ease)}
.ms-cue.off{opacity:0}
.ms-cue svg{display:block;width:11px;height:11px;stroke:var(--color-bone-white);stroke-width:1.6;
  fill:none;stroke-linecap:round;stroke-linejoin:round;animation:msCue 1.8s ease-in-out infinite}
@keyframes msCue{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
[dir=rtl] .ms-cue{right:auto;left:7px}
[dir=rtl] .ms-cue svg{transform:scaleX(-1)}
body.locked .mstrip-wrap{visibility:hidden}
@media (max-width:1199.9px){
  .mstrip-wrap{display:block}
  section{scroll-margin-top:124px}
  #access,#edu,#proof{scroll-margin-top:124px}
}

/* ============================== intelligence overlay ==============================
   the /intelligence story, condensed: coherence, the Clarity Engine, the Source,
   Infrastructure, our partner, the advertiser wall. */
.ivov .tmwrap{max-width:860px}
.tmov.open .ivbody{animation:tmUp .6s var(--ease) both;animation-delay:.15s}
.ivsec{border-top:1px solid rgba(0,0,0,.1);padding:42px 0 46px}
.ivsec.first{border-top:0;padding-top:4px}
.ivsec.last{padding-bottom:20px}
.ivh{font-size:var(--fs-heading-sm);line-height:1.18;letter-spacing:-.01em;font-weight:400;margin:0 0 16px;max-width:32ch}
.ivh b{font-weight:700}
.ivp{font-size:14.5px;line-height:1.7;opacity:.8;max-width:62ch;margin:0 0 18px}
.ivp.strong{opacity:1;font-size:15.5px}
.ivp.dim{opacity:.55;font-size:13px;margin-bottom:0}
.ivlab{font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin:0 0 14px}
.ivmeter{list-style:none;margin:16px 0 0;padding:0}
.ivmeter li{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.ivmeter li:last-child{border-bottom:0}
.ivm-t{font-size:12px;letter-spacing:.06em;text-transform:uppercase;flex:0 0 128px}
.ivbar{flex:1 1 140px;min-width:110px;height:2px;background:rgba(0,0,0,.1);position:relative}
.ivbar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f)*100%);background:var(--color-accent);opacity:.95;box-shadow:0 0 10px rgba(var(--accent-rgb),.4)}
[dir=rtl] .ivbar i{left:auto;right:0}
.ivm-s{font-size:12px;opacity:.6}
.ivchip{font:600 9.5px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--color-bone-white);padding:5px 8px;border-radius:980px}
.ivrows{list-style:none;margin:6px 0 0;padding:0}
.ivrows li{font-size:14px;line-height:1.7;opacity:.78;padding:14px 0;border-top:1px solid rgba(0,0,0,.08);max-width:64ch}
.ivchips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 24px}
.ivchips span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(0,0,0,.18);border-radius:980px;padding:9px 12px;opacity:.85}
.ivstamps{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 20px;font-size:15px;font-weight:600}
.qm-seal{width:52px;height:auto;opacity:.92;filter:drop-shadow(0 0 14px rgba(95,195,224,.35))}
#join .qm-seal{width:88px;height:88px;border-radius:22px;opacity:1;filter:none;box-shadow:0 18px 40px rgba(11,99,230,.28),0 6px 16px rgba(0,0,0,.18)}
.ivcta{display:inline-flex;align-items:center;margin-top:26px;cursor:pointer;
  background:var(--color-bone-white);color:#fff;border:1px solid var(--color-bone-white);border-radius:980px;
  text-decoration:none;font:500 12px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;
  padding:14px 22px;transition:background-color .3s var(--ease),color .3s var(--ease)}
.ivcta:hover{background:transparent;color:var(--color-bone-white)}
.ivstats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.ivstats>div{border:1px solid rgba(0,0,0,.06);background:#f5f5f7;border-radius:16px;padding:22px 20px 18px}
.ivnum{display:block;font-size:clamp(30px,4.6vw,44px);line-height:1;letter-spacing:-.02em;font-weight:700;margin-bottom:10px}
.ivdesc{display:block;font-size:12.5px;line-height:1.6;opacity:.72}
.ivsrc{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.45;margin-top:12px}
.ivm-v{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex:0 0 auto}
.ivlogos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ivlogos span{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;padding:12px}
.ivlogos img{max-width:82%;max-height:72%;object-fit:contain;display:block}
@media (max-width:640px){
  .ivlogos{grid-template-columns:repeat(2,1fr)}
  .ivm-t{flex-basis:100%}
  .ivstats{grid-template-columns:1fr}
  .ivsec{padding:34px 0 38px}
}

/* ============================== newsletter fold ==============================
   the coda: The Edge signup. Inline email capture, stub submit (devs wire the list). */
.news{padding-top:8px}
.newsform{display:flex;flex-direction:column;gap:20px;max-width:460px;margin:36px auto 0;align-items:stretch;text-align:left}
.newsfield{flex:0 0 auto;width:100%}
.newsin{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.22);
  color:var(--color-bone-white);font:400 16px/1.4 var(--font-sans);padding:12px 2px;border-radius:0;outline:none;
  transition:border-color .3s var(--ease)}
.newsin::placeholder{color:rgba(0,0,0,.35)}
.newsin:focus{border-bottom-color:var(--color-accent)}
.newsin.bad{border-bottom-color:#ff7a6b}
.newssub{align-self:center;flex:0 0 auto;background:var(--color-bone-white);color:#fff;border:1px solid var(--color-bone-white);border-radius:980px;
  font:400 12px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;padding:16px 26px;cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.newssub:hover{background:transparent;color:var(--color-bone-white)}
.newserr{max-width:460px;margin:8px auto 0;font-size:12px;color:#ff7a6b;text-align:left;display:none}
.newserr.show{display:block}
.newshint{max-width:460px;margin:14px auto 0;font-size:11.5px;letter-spacing:.02em;opacity:.42;text-align:left}
.newsok{display:none;max-width:460px;margin:34px auto 0;text-align:left;animation:tmUp .6s var(--ease) both}
.news.done .newsform,.news.done .newshint{display:none}
.news.done .newsok{display:block}
.newsok-t{font-size:var(--fs-subheading);line-height:1.2;font-weight:400;letter-spacing:-.01em;margin:0}
.newsok-t b{font-weight:700}

/* ============================== support ==============================
   subtle fixed help button, bottom-right; opens a centered support popup. */
.fsupport{margin-top:14px}
.supbtn{display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  color:var(--color-bone-white);font:400 var(--fs-caption)/1 var(--font-sans);
  letter-spacing:.02em;text-transform:uppercase;padding:8px 4px;
  opacity:.85;transition:opacity .3s var(--ease)}
.supbtn:hover,.supbtn:focus-visible{opacity:1}
.supbtn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.supov{position:fixed;inset:0;z-index:46;background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,40px);
  visibility:hidden;opacity:0;transition:opacity .4s var(--ease),visibility 0s .4s}
.supov.open{visibility:visible;opacity:1;transition:opacity .4s var(--ease)}
.supbox{position:relative;width:100%;max-width:420px;max-height:88vh;overflow-y:auto;
  background:#fff;border:1px solid rgba(0,0,0,.1);border-top:2px solid var(--color-accent);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.18);
  padding:38px clamp(22px,5vw,34px) 30px;transform:translateY(16px);transition:transform .45s var(--ease)}
.supov.open .supbox{transform:none}
.supx{position:absolute;top:12px;right:12px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:none;border:0;color:var(--color-bone-white);opacity:.7;transition:opacity .3s var(--ease)}
.supx:hover{opacity:1}
.supx svg{width:13px;height:13px}
[dir=rtl] .supx{right:auto;left:12px}
.supeyebrow{font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin:0 0 8px}
.suptitle{font-size:var(--fs-heading-sm);line-height:1.15;font-weight:400;letter-spacing:-.01em;margin:0 0 22px}
.suptitle b{font-weight:700}
.supok{display:none;font-size:15px;line-height:1.6}
.supbox.done form{display:none}
.supbox.done .supok{display:block;animation:tmUp .5s var(--ease) both}

/* ============================== edge signup overlay ============================== */
.ngov .tmwrap{max-width:560px}
.tmov.open .ngbody{animation:tmUp .6s var(--ease) both;animation-delay:.15s}
.ngov .tmhead,.ngov .ngbody{text-align:center}
.ngov .tmsub{margin-left:auto;margin-right:auto}
.ngov .newsform{margin-top:30px}
.ngov .newserr,.ngov .newshint,.ngov .newsok{text-align:center}

/* ============================== scroll CTA capsule ==============================
   scrolling down floats a compact capsule in where the toolbar was; scroll up = toolbar back.
   the pulsing accent dot is the site-wide "join point" marker (see .joinline) */
.ctabar{position:fixed;top:0;left:50%;z-index:11;max-width:calc(100vw - 16px);
  background:rgba(0,0,0,.08);
  padding:0 1px 1px;
  border-radius:0 0 24px 24px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  transform:translate(-50%,-105%);transition:transform .6s var(--ease);pointer-events:none}
.ctabar.on{transform:translate(-50%,0);pointer-events:auto}
.cb-in{display:flex;align-items:center;gap:14px;white-space:nowrap;max-width:100%;
  padding:11px 12px 13px 20px;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border-radius:0 0 23px 23px}
.cb-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--color-accent);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.9);animation:cbDot 2.2s ease-in-out infinite}
@keyframes cbDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.ctabar-t{font-size:13.5px;letter-spacing:.01em;opacity:.95;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
  transition:width .55s var(--ease),opacity .3s ease,transform .3s ease}
.ctabar-t.sw{opacity:0;transform:translateY(-7px)}
.ctabar .nav-cta{margin-left:0}
.ctabar-signin{border-color:rgba(0,0,0,.25)}
body.locked .ctabar,body.tmopen .ctabar,body.onb-active .ctabar,body.supopen .ctabar{transform:translate(-50%,-105%);pointer-events:none}
@media (max-width:767.9px){
  .ctabar-signin{display:none}
}
@media (max-width:640px){
  .cb-in{gap:10px;padding:9px 8px 12px 14px}
  .ctabar-t{font-size:12px;max-width:calc(100vw - 180px)}
}
@media (min-width:641px) and (max-width:1199.9px){
  .ctabar-t{max-width:calc(100vw - 320px)}
}
/* the joinline: a quiet, contextual way in at the end of a fold */
.joinline{display:flex;align-items:center;gap:12px;margin-top:38px}
.sec-center .joinline{justify-content:center}
#machine .joinline{justify-content:center} /* centered under the founder film: cleaner exit */
.jl-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--color-accent);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.85);animation:cbDot 2.2s ease-in-out infinite}
/* ============================== The Edge: the one carded fold ============================== */
.edgeshell{max-width:1040px;margin:26px auto 0;padding:1px;border-radius:26px;
  background:rgba(0,0,0,.06);
  box-shadow:0 30px 70px rgba(0,0,0,.08)}
.edgecard{border-radius:25px;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,56px);align-items:center;text-align:left}
.edge-ebrow{display:flex;align-items:center;gap:10px}
.edge-ebrow .eyebrow{margin:0}
#newsletter .heading{margin-top:18px}
#newsletter .sub{margin-top:18px;max-width:44ch;color:var(--ink-2)}
#newsletter .eyebrow{color:var(--ink);font-size:14.5px;letter-spacing:.14em}
#newsletter .newsform{margin:0;max-width:none}
#newsletter .newsin{font-size:17px;padding:14px 2px}
#newsletter .newssub{width:100%;padding:18px 26px;font-size:13px;letter-spacing:.1em}
@media (max-width:899.9px){
  .edgecard{grid-template-columns:1fr;gap:26px}
}
/* tactile press: every button-like control gives under the finger */
.ghost:active,.newssub:active,.vmore:active{transform:scale(.965)}
.hero-cta .cta-pulse::after{content:"";position:absolute;inset:-1px;pointer-events:none;
  border:1px solid rgba(var(--accent-rgb),.85);opacity:0;
  animation:ctaPing 2.4s ease-out infinite}
@keyframes ctaPing{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.12,1.55);opacity:0}100%{transform:scale(1.12,1.55);opacity:0}}
/* the pulse: any primary CTA can breathe for attention */
.cta-pulse{position:relative}
.cta-pulse::before{content:"";position:absolute;inset:-1px;pointer-events:none;
  border:1px solid transparent;animation:ctaCall 3.4s ease-in-out infinite}
/* ============================== mobile verticals expander ============================== */
/* the verticals deck: pages glide through on their own; touch holds them */
.vcue{position:absolute;right:2px;top:8px;display:flex;gap:7px;align-items:center;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;pointer-events:none;
  transition:opacity .4s ease}
.vcue b{font-weight:400}
.vcue i{font-style:normal;display:inline-block;animation:vcueN 2.2s ease-in-out infinite}
@keyframes vcueN{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* ============================== teams overlay ==============================
   the whole roster over the Earth — same clear-away pattern as the menu */
@media (min-width:1200px){#access,#edu,#proof{scroll-margin-top:64px}}
.tmov{position:fixed;inset:0;z-index:9;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility 0s .5s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:96px var(--pad-x) 72px}
.tmov.open{visibility:visible;opacity:1;transition:opacity .5s var(--ease)}
.tmwrap{max-width:1160px;margin:0 auto}
.tmhead{margin-bottom:30px}
.tmhead .eyebrow{margin-bottom:16px}
.tmtitle{font-size:var(--fs-heading);line-height:1.1;letter-spacing:-.02em;font-weight:400;margin:0 0 12px}
.tmtitle b{font-weight:700}
.tmsub{font-size:var(--fs-body);line-height:1.6;opacity:.72;max-width:52ch;margin:0 0 26px}
.tmpills{display:inline-flex;border:1px solid rgba(0,0,0,.14);border-radius:980px;padding:3px}
.tmpill{background:none;border:0;color:var(--color-bone-white);opacity:.7;cursor:pointer;
  font:400 12px/1.3 var(--font-sans);letter-spacing:.02em;text-transform:uppercase;padding:11px 16px;
  transition:background-color .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease)}
.tmpill{border-radius:980px}
.tmpill.on{background:var(--color-bone-white);color:#fff;opacity:1}
.tmgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tmcard{width:calc((100% - 40px)/5)}
@media (max-width:1100px){.tmcard{width:calc((100% - 30px)/4)}}
@media (max-width:880px){.tmcard{width:calc((100% - 20px)/3)}}
.tmcard{position:relative;background:#f5f5f7;border:1px solid rgba(0,0,0,.06);border-radius:16px;overflow:hidden;padding-bottom:16px}
.tmph{position:relative;aspect-ratio:1/1.02;overflow:hidden;background:linear-gradient(180deg,#e9e9ee,#d9d9df)}
.tmph img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:saturate(.94)}
.tmin{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;color:var(--color-bone-white);
  background:rgba(255,255,255,.82);border:1px solid rgba(0,0,0,.14);border-radius:50%;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.tmin:hover{background:var(--color-bone-white);color:#fff}
.tmin svg{width:13px;height:13px;display:block}
.tmnm{font:600 15px/1.3 var(--font-sans);letter-spacing:-.01em;margin:14px 14px 6px}
.tmtg{font:400 11.5px/1.55 var(--font-sans);opacity:.62;margin:0 14px}
.tmx{position:fixed;top:16px;right:calc(var(--pad-x) - 6px);z-index:30;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.16);border-radius:50%;color:var(--color-bone-white);
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.tmx:hover{background:var(--color-bone-white);color:#fff}
.tmx svg{width:13px;height:13px;display:block}
[dir=rtl] .tmx{right:auto;left:calc(var(--pad-x) - 6px)}
body.tmopen .burger{opacity:0;pointer-events:none}
body.tmopen .dl-mini{opacity:0;pointer-events:none}
.tmov.open .tmhead>*{animation:tmUp .6s var(--ease) both}
.tmov.open .tmhead>*:nth-child(2){animation-delay:.05s}
.tmov.open .tmhead>*:nth-child(3){animation-delay:.1s}
.tmov.open .tmhead>*:nth-child(4){animation-delay:.15s}
.tmov.open .tmcard{animation:tmUp .55s var(--ease) both;animation-delay:calc(.12s + var(--d)*45ms)}
@keyframes tmUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .tmov{padding:84px 16px 56px}
  .tmgrid{gap:8px}
  .tmcard{width:calc((100% - 8px)/2)}
  .tmnm{font-size:13px;margin:12px 10px 5px}
  .tmtg{font-size:10.5px;margin:0 10px}
  .tmpills{display:flex;width:100%}
  .tmpill{flex:1;padding:10px 4px;font-size:10px;letter-spacing:.01em}
  .tmin{width:30px;height:30px}
}

/* ============================== data room overlay ==============================
   request-access form in the same clear-away grammar; sign-in fast lane */
.drov .tmwrap{max-width:600px}
.tmov.open .drform{animation:tmUp .6s var(--ease) both;animation-delay:.15s}
.drrow{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.drfield{margin-bottom:22px}
.drlab{display:block;font-size:var(--fs-caption);line-height:1;letter-spacing:.08em;text-transform:uppercase;opacity:.78;margin-bottom:4px}
.drlab.req::after{content:' *';color:var(--color-accent)}
.drin{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.22);
  color:var(--color-bone-white);font:400 15.5px/1.45 var(--font-sans);padding:11px 2px;border-radius:0;
  transition:border-color .3s var(--ease)}
.drin::placeholder{color:rgba(0,0,0,.35)}
.drin:focus{outline:none;border-bottom-color:var(--color-accent)}
.drin.bad{border-bottom-color:#ff7a6b}
textarea.drin{min-height:96px;resize:vertical}
.drerr{font-size:12px;color:#ff7a6b;margin-top:5px;display:none}
.drerr.show{display:block}
.drcount{font-size:11px;opacity:.5;text-align:right;margin-top:5px}
.drsubmit{display:flex;width:100%;align-items:center;justify-content:center;cursor:pointer;
  background:var(--color-bone-white);color:#fff;border:1px solid var(--color-bone-white);border-radius:980px;
  font:500 12.5px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;padding:17px 20px;margin-top:6px;
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.drsubmit:hover{background:transparent;color:var(--color-bone-white)}
.dralt{margin-top:24px;padding-top:20px;border-top:1px solid rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dralt p{font-size:13px;opacity:.72;margin:0}
.drlogin{font:400 12px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-bone-white);border:1px solid rgba(0,0,0,.3);border-radius:980px;padding:12px 18px;text-decoration:none;
  transition:background-color .3s var(--ease),color .3s var(--ease);white-space:nowrap}
.drlogin:hover{background:var(--color-bone-white);color:#fff}
.drok{display:none}
.drok-t{font-size:var(--fs-heading-sm);line-height:1.15;letter-spacing:-.02em;font-weight:400;margin:0 0 12px}
.drok-t b{font-weight:700}
.drov.done .drform-main{display:none}
.drov.done .drok{display:block;animation:tmUp .6s var(--ease) both}
@media (max-width:640px){
  .drrow{grid-template-columns:1fr}
  .drin{font-size:16px}
}

/* ============================== download walkthrough popup ============================== */
.dlmodal{position:fixed;inset:0;z-index:40;background:rgba(14,19,25,.9);--color-bone-white:#fffdf9;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px)}
.dlmodal.open{display:flex;animation:dlIn .45s var(--ease) both}
.dlmodal.open .dlbox{animation:dlRise .55s var(--ease) both}
@keyframes dlIn{from{opacity:0}to{opacity:1}}
@keyframes dlRise{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
/* seamless: the guide floats on the blur, no hard box */
.dlbox{position:relative;width:min(100%,980px);height:min(100%,860px);
  box-shadow:0 0 90px 30px rgba(9,12,17,.65)}
.dlbox iframe{width:100%;height:100%;border:0;display:block;background:#0e1319}
.dlclose{position:absolute;top:8px;right:8px;z-index:2;width:46px;height:46px;
  background:rgba(11,15,21,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:0;color:var(--color-bone-white);
  font:400 17px/1 var(--font-sans);cursor:pointer;transition:color .3s var(--ease),background-color .3s var(--ease)}
.dlclose:hover,.dlclose:focus-visible{color:var(--color-accent);background:rgba(11,15,21,.9)}
.dl-mini{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  color:var(--color-bone-white);font:400 13px/1 var(--font-sans);letter-spacing:.02em;text-transform:uppercase;
  padding:14px 6px;margin:-12px 0;white-space:nowrap}
.dl-mini svg{width:21px;height:21px;stroke:var(--color-bone-white);fill:none;stroke-width:1.7;flex:0 0 auto}
.dl-mini-t{display:none}
.dl-mini{opacity:.9;transition:opacity .3s var(--ease)}
.dl-mini:hover,.dl-mini:focus-visible{opacity:1}
body.locked .dl-mini{opacity:0;pointer-events:none}
.dlarr{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-left:4px;display:inline-block}

/* underline-grow text link */
.ulink{position:relative;display:inline-block;font-size:var(--fs-caption);letter-spacing:.02em;text-transform:uppercase;padding-bottom:4px}
.ulink::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.ulink:hover::before,.ulink:focus-visible::before{transform:scaleX(1)}

/* ============================== the quasar mark: the logo itself, alive ============================== */
.glyph{position:relative;display:block;width:102px;height:84px;margin-bottom:36px;overflow:visible}
.glyph .qm-img{width:100%;height:100%;object-fit:contain;display:block;
  animation:qmFloat 7s ease-in-out infinite}
@keyframes qmFloat{
  0%,100%{transform:translateY(0);filter:drop-shadow(0 0 12px rgba(95,195,224,.25))}
  50%{transform:translateY(-7px);filter:drop-shadow(0 0 26px rgba(95,195,224,.5))}}
/* two quiet sparks trace the old orbits around the mark */
.glyph .qm-orbit{position:absolute;inset:-16%;animation:qmSpin 9s linear infinite;pointer-events:none}
.glyph .qm-orbit i{position:absolute;top:50%;left:-1px;width:5px;height:5px;border-radius:50%;
  background:var(--color-accent);box-shadow:0 0 10px rgba(95,195,224,.9)}
.glyph .qm-orbit.o2{inset:-7%;animation-duration:13s;animation-direction:reverse}
.glyph .qm-orbit.o2 i{width:3px;height:3px;opacity:.7}
.glyph .qm-orbit.o3{inset:-24%;animation-duration:17s}
.glyph .qm-orbit.o3 i{width:4px;height:4px;opacity:.55;top:22%;left:auto;right:-1px}
.glyph .qm-orbit.o4{inset:-12%;animation-duration:23s;animation-direction:reverse}
.glyph .qm-orbit.o4 i{width:2.5px;height:2.5px;opacity:.5;top:78%}
@keyframes qmSpin{to{transform:rotate(360deg)}}
.fmeta .glyph .qm-orbit{display:none} /* footer: the mark alone, no sparks at 34px */

/* ============================== prompt cycler — the fold's centerpiece ============================== */
.sec-center{text-align:center}
.sec-center .sub,.sec-center .display,.sec-center .display-xl,.sec-center .heading{margin-left:auto;margin-right:auto}
.cmd{margin-top:52px;position:relative;overflow:hidden;height:clamp(104px,26vw,168px)}
.cmd>span{position:absolute;left:0;right:0;top:0;text-align:center}
.cmd .v{display:block;font-size:clamp(34px,9vw,72px);line-height:1.05;letter-spacing:-.02em;font-weight:700}
.cmd .h{display:block;font-style:normal;font-size:clamp(15px,4.2vw,21px);line-height:1.4;margin-top:14px;opacity:.85;
  padding:0 var(--pad-x)}
.js .cmd>span{transform:translateY(190%);transition:transform .6s var(--ease)}
.js .cmd>span.on{transform:none}
.js .cmd>span.off{transform:translateY(-190%)}

/* ============================== stats ============================== */
.stats{display:flex;flex-direction:column;gap:44px}
.stats .num{font-size:var(--fs-display);line-height:1;letter-spacing:-.02em}
.stats .lbl{font-size:var(--fs-caption);opacity:.75;margin-top:8px}
@media (min-width:1024px){
  .stats{flex-direction:row;flex-wrap:wrap;gap:72px;align-items:flex-end}
}

/* ============================== rtl (Arabic): mirror the words, keep the machinery ltr ============================== */
html[dir=rtl] .rail,html[dir=rtl] .tick,html[dir=rtl] .dstick{direction:ltr}
html[dir=rtl] .onb-panel,html[dir=rtl] .onb-input{direction:rtl;text-align:right}
html[dir=rtl] .onb-otp{direction:ltr}

/* ============================== premium chrome: selection, scrollbar, focus, wayfinding ============================== */
::selection{background:rgba(11,99,230,.18);color:var(--ink)}
html{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.22) transparent}
body::-webkit-scrollbar{width:9px}
body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:8px}
body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.32)}
body::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.skip{position:fixed;top:10px;left:10px;z-index:60;background:var(--color-bone-white);color:#fff;
  padding:13px 19px;font:400 13px/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;
  transform:translateY(-220%);transition:transform .3s var(--ease)}
.skip:focus{transform:none}
#qtoast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,16px);z-index:50;
  background:rgba(255,255,255,.97);border:1px solid rgba(0,0,0,.1);border-left:2px solid var(--color-accent);
  box-shadow:0 12px 30px rgba(0,0,0,.12);border-radius:12px;
  color:var(--ink);font:400 13.5px/1.45 var(--font-sans);padding:13px 18px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);max-width:min(92vw,480px)}
#qtoast.show{opacity:1;transform:translate(-50%,0)}
#pbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:31;pointer-events:none;
  background:var(--color-accent);opacity:1;box-shadow:0 0 12px rgba(var(--accent-rgb),.55);
  transform:scaleX(0);transform-origin:left}
body.locked #pbar,body.onb-active #pbar{opacity:0}
/* notched phones: chrome respects the safe areas */
@supports (padding:max(0px)){
  header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .mnav{padding-bottom:max(40px,env(safe-area-inset-bottom))}
  footer{padding-bottom:max(56px,env(safe-area-inset-bottom))}
}


/* ============ the module bento: the software itself, tiled — every tile a
   real capture slot, every tile a door into sign-up ============ */
.modbento{display:grid;gap:2px;margin-top:44px;
  grid-template-columns:repeat(12,1fr);
  /* slot shapes are derived FROM the videos' aspect ratios, so cover-fit
     videos land their edges exactly on the seams at every width:
     desk/live/news exact 16:9; quarter row ~1.76; half row ~1.98 */
  grid-template-areas:
    "desk desk desk desk desk desk desk desk live live live live"
    "desk desk desk desk desk desk desk desk news news news news"
    "scr scr scr sec sec sec cha cha cha gov gov gov"
    "ask ask ask ask ask ask dru dru dru dru dru dru";
  aspect-ratio:1.299;
  /* rows belong to the GRID (shuffle invariant) and scale with width so
     every slot keeps its video's shape */
  grid-template-rows:1.875fr 1.875fr 1.423fr 2.525fr;
  background:#0f1116;border:1px solid rgba(0,0,0,.1);
  border-radius:20px;overflow:hidden;padding:2px;
  box-shadow:0 30px 80px rgba(0,0,0,.18)} /* one big screen: panels share a single frame, seams are hairlines */
.mod{position:relative;display:block;border-radius:0;overflow:hidden;
  background-size:cover;background-position:center;min-height:0;
  background-color:#0e1319;
  transition:filter .45s var(--ease)}
.mod:hover{filter:brightness(1.12)}
.mod::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,15,21,0) 42%,rgba(11,15,21,.78))}
.mod-desk{grid-area:desk}
.mod:nth-child(2){grid-area:live;background-position:left top}
.mod:nth-child(3){grid-area:news}
.mod:nth-child(4){grid-area:scr;background-position:left center}
.mod:nth-child(5){grid-area:sec}
.mod:nth-child(6){grid-area:ask}
.mod:nth-child(7){grid-area:cha}
.mod:nth-child(8){grid-area:gov}
.mod:nth-child(9){grid-area:dru}
.mod-t{position:absolute;left:16px;bottom:13px;right:16px;z-index:1;
  color:#fff;font-size:14px;letter-spacing:.01em;
  text-shadow:0 1px 10px rgba(9,13,18,.8)}
.in-desk .mod-t{font-size:clamp(16px,1.4vw,20px)}
/* the bento demos itself: tiles periodically drag themselves into a new
   arrangement — the product's whole pitch (any module, anywhere) as motion */
.mod-note{margin:22px auto 0;font-size:clamp(16px,1.7vw,20px);line-height:1.6;
  color:var(--color-bone-white);opacity:.9;max-width:760px;text-align:center;
  letter-spacing:.005em}
.mod-note+.modbento{margin-top:26px}
.mod.mlift{z-index:3;filter:brightness(1.1);
  box-shadow:0 18px 44px rgba(4,7,10,.6)}
.mod.myield{z-index:2}
/* labels ride the tiles but hide during the glide — FLIP scale would
   stretch the type; the image alone carries the motion */
.mod-t{transition:opacity .3s var(--ease)}
.mod.mlift .mod-t,.mod.myield .mod-t{opacity:0}
/* live tile video: fills the tile, anchored like its poster, never clickable */
.mod-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 50%;pointer-events:none}
/* grab cursor: a small pointer rides the touch-dot during a drag beat */
.mod-dot::after{content:"";position:absolute;left:7px;top:9px;width:22px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l13 10-5.6 1 3.2 6.6-2.6 1.2-3.2-6.6L5 19z' fill='%23fffdf9' stroke='%230b0f15' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat;
  background-size:22px 22px;
  filter:drop-shadow(0 2px 6px rgba(4,7,10,.6))}
.mod-dot{position:absolute;left:50%;top:42%;width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;z-index:2;
  background:rgba(var(--accent-rgb),.85);
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45);
  animation:modDot 1.05s var(--ease) both}
@keyframes modDot{0%{opacity:0;transform:scale(.4)}
  18%{opacity:1;transform:scale(1)}
  70%{opacity:.9;box-shadow:0 0 0 14px rgba(var(--accent-rgb),0)}
  100%{opacity:0;box-shadow:0 0 0 18px rgba(var(--accent-rgb),0)}}
@media (max-width:767.9px){
  .modbento{grid-template-columns:1fr 1fr;
    grid-template-columns:repeat(6,1fr);
    aspect-ratio:.62;
    /* pairs by default; the layout cycler swaps whole arrangements in */
    grid-template-areas:"desk desk desk desk desk desk"
      "live live live ask ask ask" "news news news sec sec sec"
      "scr scr scr cha cha cha" "gov gov gov dru dru dru";
    grid-template-rows:1.9fr 1fr 1fr 1fr 1fr}
  
}
/* ============ the vertical carousel: one module image at center stage,
   neighbors fanned behind — swipe, click, or let it glide ============ */
/* the module word-wall: names only, middot rhythm — the words ARE the list */
.vw-head{margin:84px auto 0;text-align:center;font-weight:700;
  font-size:clamp(26px,3.4vw,44px);letter-spacing:-.01em;
  color:var(--color-bone-white)}
.vw-cta{margin:52px 0 0;text-align:center}
.fv-title{margin:72px auto 0;text-align:center;font-weight:700;
  font-size:clamp(20px,2.4vw,30px);letter-spacing:-.01em;
  color:var(--color-bone-white)}
/* the connect rail: three live ports on one line, signal flowing in */
.mtop{display:block}
.conn{margin-top:60px}
.conn-t{font-size:16px;color:var(--ink-2)}
#machine .eyebrow,#machine .mtop .heading,#machine .mtop .sub{text-align:center;margin-left:auto;margin-right:auto}
.conn{text-align:center}
.conn-list{margin-top:36px;display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(36px,6vw,92px);flex-wrap:wrap}
.conn-c{display:flex;align-items:center;gap:18px;text-align:left}
.conn-c svg{width:44px;height:44px;stroke:var(--color-bone-white);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 44px}
.conn-c.mcp svg{stroke:var(--color-accent);filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.6))}
.conn-c b{font-weight:400;font-size:27px;letter-spacing:-.015em;display:block;line-height:1.1}
.conn-c i{font-style:normal;display:block;font-size:13px;opacity:.6;margin-top:7px;letter-spacing:.02em}
@media (max-width:639.9px){
  .conn-list{display:grid;grid-template-columns:1fr 1fr;gap:30px 12px;justify-items:center}
  .conn-c{flex-direction:column;gap:11px;text-align:center}
  .conn-c:nth-child(3){grid-column:1 / -1}
  .conn-c svg{width:38px;height:38px;flex:0 0 38px}
  .conn-c b{font-size:19px}
  .conn-c i{margin-top:4px;font-size:12px}
}
.rail.streams{margin-top:26px;scroll-snap-type:none}
.rail.streams+.rail.streams{margin-top:12px}
.rail.streams .rail-track{gap:10px;padding-top:2px;padding-bottom:2px}
.pchip{display:inline-flex;align-items:center;gap:12px;padding:18px 22px;white-space:nowrap;
  border:1px solid rgba(0,0,0,.08);background:#fff;color:#1d1d1f;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.pchip .pcl{height:26px;width:auto;max-width:190px;display:block;opacity:.95}
/* the marks cascade in when the fold reveals */
.js .streams .pchip{opacity:0;transform:translateY(12px)}
.js [data-reveal].in .streams .pchip,.js .streams .pchip.on,
.js section.in .streams .pchip{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js section.in .streams .pchip:nth-child(2n){transition-delay:.07s}
.js section.in .streams .pchip:nth-child(3n){transition-delay:.14s}
.js section.in .streams .pchip:nth-child(5n){transition-delay:.21s}
@media (max-width:640px){
  .pchip{padding:14px 16px;gap:9px}
  .pchip .pcl{height:22px;max-width:150px}
}
.pchip b{font-weight:700;font-size:15px;letter-spacing:.01em;color:#0e1319}
.pchip i{font-style:normal;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:#0e1319;opacity:.55}

/* ============================== education paths + billing toggle ============================== */
.edu-main{display:grid;margin-top:56px}
.edu-paths{display:grid;border-top:1px solid var(--color-graphite);margin-top:48px}
.epath{padding:30px 0;border-bottom:1px solid var(--color-graphite);display:grid;gap:10px;align-content:start}
.eno{font-size:var(--fs-caption);letter-spacing:.02em;text-transform:uppercase;opacity:.7}
.etg{font-size:15.5px;line-height:1.55;opacity:.85;max-width:46ch}
.epath .ghost{justify-self:start;margin-top:10px}
@media (min-width:1000px){
  .edu-main{grid-template-columns:minmax(300px,.75fr) minmax(0,1.45fr);column-gap:clamp(36px,4.5vw,72px);align-items:stretch}
  .edu-paths{grid-column:1;grid-row:1;margin-top:0}
  /* the film spans exactly from the paths' top hairline to their bottom hairline */
  .edu-main .fvid{grid-column:2;grid-row:1;margin:0;max-width:none;height:100%;overflow:hidden}
  .edu-main .fvid video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}
/* the price switch: one bone pill sliding between monthly and annual */
.bill-toggle{display:inline-flex;border:1px solid rgba(0,0,0,.14);border-radius:980px;margin-top:30px;padding:4px;gap:4px}
.bt-opt{background:none;border:0;border-radius:980px;color:var(--color-bone-white);opacity:.7;cursor:pointer;
  font:400 12px/1 var(--font-sans);letter-spacing:.02em;text-transform:uppercase;padding:10px 15px;
  display:inline-flex;align-items:center;gap:8px;
  transition:background-color .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease)}
.bt-opt.on{background:var(--color-bone-white);color:#fff;opacity:1}
.bt-save{font-size:9.5px;letter-spacing:.06em;border:1px solid rgba(var(--accent-rgb),.6);padding:2px 6px}
.bt-opt.on .bt-save{border-color:rgba(255,255,255,.5)}

/* ============================== cta + footer ============================== */
.cta .sub{margin-top:40px}
.cta .act{margin-top:48px}
footer{position:relative;z-index:1;padding:72px var(--pad-x) 56px;margin:var(--gap-section) auto 0;max-width:1400px;text-align:center}
footer::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-1;
  background:rgba(245,245,247,.92);border-top:1px solid rgba(0,0,0,.06)}
footer .fmeta{color:var(--ink-2)}
.femail{font-size:var(--fs-subheading);letter-spacing:-.01em}
.femail .ulink{font-size:inherit;text-transform:none;letter-spacing:-.01em}
.flinks{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:44px;justify-content:center}
.flinks .ulink{padding-top:10px;padding-bottom:10px;min-width:44px}
.socials{display:flex;align-items:center;gap:26px;margin-top:30px;justify-content:center}
.socials a{display:block;padding:10px;margin:-10px;opacity:.8;transition:opacity .3s var(--ease)}
.socials a:hover,.socials a:focus-visible{opacity:1}
.socials svg{width:20px;height:20px;fill:var(--color-bone-white);display:block}
.socials a:hover svg{fill:var(--color-accent)}
.fmeta{margin-top:56px;display:flex;flex-direction:column;align-items:center;gap:24px;font-size:var(--fs-caption);opacity:.78;line-height:1.5}
.fmeta .glyph{width:34px;height:34px;margin:0}
@media (min-width:1024px){
  .fmeta{flex-direction:row;align-items:center;justify-content:center;gap:40px}
}

/* ============================== landscape phones ============================== */
@media (max-height:500px) and (orientation:landscape){
  :root{--fs-display-xl:clamp(40px,16vh,72px);--fs-display:clamp(34px,13vh,60px)}
  .hero{padding-top:10vh}
}

/* ============================== reduced motion ============================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .mask .ln,.js .mnav .ln{transition:none;transform:none}
  /* cyclers: freeze to a single readable entry, never stack the words */
  .js .cw,.js .cmd>span{transition:none;display:none}
  .js .cw.final,.js .cmd>span:first-child,.js .cycle-eyebrow .cw{display:block;transform:none}
  .glyph .qm-img,.glyph .qm-orbit,.amb i,.aurora i,.grad,.mnav::after,.tick-inner{animation:none}
  .desk-frame{transform:none!important}
  .js .dk{opacity:1;transform:none;transition:none}
  .mnav.open .tile{animation:none;opacity:var(--tile-o,1)}
  .dlmodal.open,.dlmodal.open .dlbox{animation:none}
  .tmov.open .tmhead>*,.tmov.open .tmcard{animation:none}
  .tmov.open .mvbody,.tmov.open .edbody,.tmov.open .ivbody,.tmov.open .ngbody,.edpane.on,.edov.done .edok,.mvbook.done .mvok2{animation:none}
  .mvov.live .mvdot{animation:none}
  .tmov.open .drform,.drov.done .drok{animation:none}
  .cta-pulse::before{animation:none}
  .cb-dot,.jl-dot{animation:none}
  .cta-pulse::after{animation:none}
  .ctabar-t{transition:none}
  
  .onb-rail-fill,.onb-rail-dot{transition:none}
  .vcue i{animation:none}
  .m-cta .tile::after{animation:none}
  .js .streams .pchip{opacity:1;transform:none}
  .news.done .newsok,.supov.open .supbox,.supbox.done .supok{animation:none;transition:none}
  .ms-cue svg{animation:none}
}
/* ============================================================
   POLISH PASS (2026-09-13): nothing pulses, nothing drifts, nothing
   sweeps. Sentence case everywhere. Flat surfaces on grey bands.
   One entrance for anything that enters. Apple grammar throughout.
   ============================================================ */
/* --- motion --- */
.cta-pulse::before,.cta-pulse::after,.hero-cta .cta-pulse::after,.m-cta .tile::after,.mnav::after{display:none!important;animation:none!important}
.cb-dot,.jl-dot,.mod-dot{display:none!important}
.ctabar-t{transition:none}
.amb,#pbar{display:none!important}
.tick-line{-webkit-mask-image:none;mask-image:none}
.tick-inner,.tick-line.t2 .tick-inner{animation:none!important;width:auto;white-space:normal;display:block;text-align:center;
  font-size:clamp(17px,1.9vw,23px);line-height:1.55;letter-spacing:0;color:var(--ink-2);opacity:1;padding:0 var(--pad-x)}
.tick-inner span{padding:0}
.tick-inner span+span{display:none}
.dstick{gap:4px;margin-top:28px}
.roll .rr::after{display:none}
.roll .rr,.roll:hover .rr,.roll:focus-visible .rr{transform:none;transition:none}
nav.desk a.navlink{opacity:.8;transition:opacity .2s ease}
nav.desk a.navlink:hover,nav.desk a.navlink:focus-visible{opacity:1}
.glyph .qm-img,.glyph .qm-orbit,.ms-cue svg{animation:none!important}
.glyph .qm-orbit{display:none}
.ghost:active,.newssub:active,.vmore:active{transform:none}
.mnav.open .tile{animation:none;opacity:var(--tile-o,1)}
.js .mnav .ln{transform:none;transition:none}
/* --- one quiet entrance --- */
.mask{overflow:visible;padding-bottom:0;margin-bottom:0}
.js .mask .ln{opacity:0;transform:translateY(12px);transition:opacity .45s ease-out,transform .45s ease-out;transition-delay:calc(var(--d,0)*.04s)}
.js .in .mask .ln,.js .mask.in .ln{opacity:1;transform:none}
.js .sub .mask .ln,.js .mod-note .mask .ln,.js .etg .mask .ln{opacity:1;transform:none;transition:none}
.js .fvid,.js .modbento,.js .devvid,.js .edgeshell,.js .edu-main{opacity:0;transform:translateY(16px);transition:opacity .6s ease-out,transform .6s ease-out}
.js .in .fvid,.js .in .modbento,.js .in .devvid,.js .in .edgeshell,.js .in .edu-main{opacity:1;transform:none}
.js .edu-main .fvid{opacity:1;transform:none;transition:none}
.js .streams .pchip{opacity:0;transform:none;transition:opacity .5s ease-out}
.js section.in .streams .pchip{opacity:1;transition-delay:0s!important}
/* --- sentence case, no tracking --- */
.ghost,.tile,.m-label,.eno,.rail-head,.ulink,.bt-opt,.bt-save,.dl-mini,.fv-btn,.newssub,.mstrip a,nav.desk a.navlink,nav.desk .lang>button,.chip,.supbtn,.supeyebrow,.drlab,.tmpill,.mvpill,.mvghost,.edstep,.edback,.edds,.ivlab,.ivm-t,.ivchip,.ivchips span,.ivsrc,.ivcta,.ivm-v,.drlogin,.drsubmit,.mvcta,.skip,.iv-outlet,.iv-pod,.pchip i,.edge-ebrow .eyebrow,.dl-mini-t,.tmnm,.mvdur,.newshint,.drcount{text-transform:none;letter-spacing:0}
.eyebrow{text-transform:none;letter-spacing:0}
section>.eyebrow,.mtop .eyebrow{display:none}
#newsletter .eyebrow{font-size:13px;color:var(--ink-2)}
.hero-brow{display:none}
.display{letter-spacing:-.02em}
.display-xl{letter-spacing:-.025em}
.heading{letter-spacing:-.02em}
.heading-sm{letter-spacing:-.015em}
.vw-head{letter-spacing:-.02em;font-weight:600}
.fv-title{font-weight:600;letter-spacing:-.01em}
.rail-head{font-size:13px;color:var(--ink-2);opacity:1}
#instPrice,.ivnum,.stats .num,.display-xl,.bt-save{font-variant-numeric:tabular-nums}
.ulink{font-size:15px}
.rail-head{margin-top:56px}
.chip{font-size:10.5px;padding:2px 7px;margin-left:6px;vertical-align:1px}
nav.desk a.navlink{font-size:12.5px}
.mstrip a{font-size:13px;padding:13px 12px;opacity:.9}
.tile{font-size:14px;letter-spacing:0}
.m-cta .tile .tlab{font-size:16px;letter-spacing:0;font-weight:500}
.m-label{font-size:13px}
.tile .chip{margin-left:6px}
/* --- buttons: fill, no sweep --- */
.ghost{font:500 15px/1 var(--font-sans);padding:12px 22px;border-radius:980px;background-image:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
@media (hover:hover){.ghost:hover{background-color:var(--ink);color:#fff;border-color:var(--ink)}}
.ghost:focus-visible,.ghost:active{background-color:var(--ink);color:#fff;border-color:var(--ink)}
.ghost.big{font-size:17px;padding:16px 30px}
.ghost.huge{font-size:17px;padding:17px 34px;letter-spacing:0}
.ghost.nav-cta{font-size:13px;padding:9px 16px;margin-left:8px}
@media (min-width:1200px) and (max-width:1419.9px){nav.desk .nav-cta{padding:8px 13px;font-size:12px}}
.ghost.cta-solid:hover,.ghost.cta-solid:focus-visible{background-color:#000;border-color:#000;color:#fff}
.ghost.cta-accent{background-image:none}
.ghost.cta-accent:hover,.ghost.cta-accent:focus-visible{background-color:#0a56c8;border-color:#0a56c8;color:#fff}
.fv-btn{font:500 15px/1 var(--font-sans);padding:14px 26px;display:inline-flex;align-items:center;gap:9px}
.fv-ic{width:13px;height:13px;fill:currentColor;display:block}
.newssub{font:500 15px/1 var(--font-sans);padding:16px 26px}
#newsletter .newssub{font-size:15px;letter-spacing:0}
.bt-opt{font:500 13px/1 var(--font-sans);padding:10px 16px}
.bt-save{font-size:11px;padding:2px 7px;border-radius:980px}
.dl-mini{font-size:13px}
.tmpill,.mvpill,.edstep{font-size:12.5px;letter-spacing:0}
.mvghost,.edback,.drlogin,.drsubmit,.ivcta,.mvcta{font-size:13px;letter-spacing:0;font-weight:500}
.tmnm{font-weight:600}
/* --- menu tiles: flat, no sweep, the art stays inked --- */
.tile{background-image:none;transition:background-color .2s ease,border-color .2s ease}
@media (hover:hover){.tile:hover{background-size:0 0;background-color:#e8e8ed;color:var(--ink);border-color:rgba(0,0,0,.1)}}
.tile:focus-visible{background-size:0 0;background-color:#e8e8ed;color:var(--ink);border-color:rgba(0,0,0,.1)}
.tile:hover .chip{border-color:rgba(var(--accent-rgb),.55);color:var(--color-accent)}
.tile.art:not(.photo):hover .tart,.tile.art:not(.photo):focus-visible .tart,
.tile.art:not(.photo):hover .tduo img,.tile.art:not(.photo):focus-visible .tduo img{filter:brightness(0) opacity(.82)}
.tile.art:not(.photo):hover .drgrad,.tile.art:not(.photo):focus-visible .drgrad{-webkit-text-fill-color:var(--ink);color:var(--ink)}
.tile.edge:hover .edge-art i,.tile.edge:focus-visible .edge-art i{color:var(--ink)}
.tile.photo:hover,.tile.photo:focus-visible{background-color:#e8e8ed;color:#fff;border-color:rgba(0,0,0,.1)}
.tile-accent{border-color:rgba(var(--accent-rgb),.5)}
.m-cta .tile{border-color:rgba(0,0,0,.1)}
/* --- flat surfaces --- */
.pchip{box-shadow:none}
.iv-card{box-shadow:none}
.edgeshell{box-shadow:none;background:rgba(0,0,0,.08)}
.edgecard{background:#fff}
.fvid{box-shadow:0 20px 50px -26px rgba(0,0,0,.3)}
.modbento{box-shadow:0 24px 60px -28px rgba(0,0,0,.3)}
.mod.mlift{box-shadow:0 16px 40px -12px rgba(0,0,0,.45)}
#join .qm-seal{box-shadow:0 10px 26px rgba(0,0,0,.16)}
section.band-glow::before{background:radial-gradient(60% 60% at 50% 18%,rgba(11,99,230,.10),rgba(255,255,255,0) 70%),#f5f5f7}
.press-logo{border-radius:14px}
#qtoast{border-radius:12px}
/* --- the prompt field --- */
.askbar{display:flex;align-items:center;gap:14px;max-width:760px;margin:40px auto 0;min-height:66px;padding:0 10px 0 22px;
  border:1px solid rgba(0,0,0,.14);border-radius:18px;background:#fff;text-align:left;color:var(--ink);
  transition:border-color .2s ease}
.askbar:hover{border-color:rgba(0,0,0,.32)}
.ask-ic{width:20px;height:20px;flex:0 0 auto;stroke:var(--ink-3);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.askbar .cmd{flex:1 1 auto;margin:0;height:1.5em;font-size:clamp(16px,1.6vw,20px);line-height:1.5;overflow:hidden;position:relative}
.askbar .cmd>span{position:absolute;left:0;right:0;top:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.askbar .cmd .v{display:inline;font-size:inherit;line-height:inherit;letter-spacing:0;font-weight:600}
.askbar .cmd .h{display:inline;font-size:inherit;line-height:inherit;margin:0 0 0 .4em;padding:0;opacity:.55}
.js .askbar .cmd>span{transform:translateY(130%);transition:transform .5s ease-out}
.js .askbar .cmd>span.on{transform:none}
.js .askbar .cmd>span.off{transform:translateY(-130%)}
.ask-go{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--ink);display:grid;place-items:center;transition:background-color .2s ease}
.askbar:hover .ask-go{background:#000}
.ask-go svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){.askbar{min-height:58px;padding-left:16px;gap:10px;margin-top:30px}.ask-go{width:38px;height:38px}}
/* --- the last uppercase / tracked leftovers (they had higher specificity) --- */
.tile.edge .edge-art i{text-transform:none;letter-spacing:0;font-size:11px}
.drgrad{text-transform:none;letter-spacing:0;font-size:14px}
.ghost.big,.ghost.huge,.ghost.big.cta-xl{letter-spacing:0}
#newsletter .eyebrow{letter-spacing:0;text-transform:none}
.tile .tlab{text-transform:none;letter-spacing:0}
/* narrow phones in the longer languages: the wordmark yields to the icon rather than truncating */
@media (max-width:479.9px){html:not([lang="en"]) .wordmark{font-size:0;gap:0}}
/* --- spacing rhythm (8px scale) --- */
.sub{margin-top:16px}
.heading+.sub,.display-xl+.sub{margin-top:16px}
.vw-head{margin-top:72px}
.mod-note{margin-top:16px}
.conn{margin-top:48px}
.conn-list{margin-top:24px}
.edu-main{margin-top:48px}
.bill-toggle{margin-top:24px}
#newsletter .heading{margin-top:12px}
/* ============================================================
   PASS 3 (2026-09-13): living colour, rails that move, detail in
   the plain folds, backdrops per overlay, two overlay bugs fixed.
   ============================================================ */
/* --- the flow canvas: behind everything in its fold, above the band --- */
canvas.flow,#join>canvas.flow,.hero>canvas.flow{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.hero-light{display:none}
#join{position:relative}
#join>*{position:relative;z-index:1}
#join canvas.flow{z-index:0}
section.band-glow::before{background:#fff}
/* --- colour on the key phrase, the Apple way --- */
.heading b,.heading-sm b,.display-xl b,.vw-head b,.newsok-t b,.heading .w.b,.heading-sm .w.b,.display-xl .w.b{color:var(--color-accent)}
section.band-ink .heading b,section.band-ink .heading .w.b{color:#7cb4ff}
.hero-tag b{color:var(--ink)}
/* --- rails: cards drift; the marquee mask fades the ends --- */
.rail.streams,.rail{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* --- awards: five tiles on a soft panel --- */
/* the row ticks: no coloured hairlines anywhere */
/* --- finale: a slow strip of the desk's modules --- */
#join .sub{max-width:52ch}
.finale-strip{width:100vw;margin:64px 0 0 calc(50% - 50vw);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fs-track{display:flex;gap:12px;width:max-content;padding:4px 0;animation:fsMove 80s linear infinite;will-change:transform}
.fs-track img{width:220px;aspect-ratio:16/9;object-fit:cover;object-position:left top;border-radius:12px;display:block;
  border:1px solid rgba(0,0,0,.08);background:#111318}
.finale-strip:hover .fs-track{animation-play-state:paused}
@keyframes fsMove{to{transform:translateX(-50%)}}
@media (max-width:767.9px){.fs-track img{width:160px}.finale-strip{margin-top:44px}}
/* --- newsletter: copy + form left, the live feed on the right --- */
.edgecard{grid-template-columns:1.05fr .95fr;grid-template-areas:"copy media" "form media";align-items:center;
  gap:24px clamp(28px,4vw,56px)}
.edgecopy{grid-area:copy}
.edgeform{grid-area:form;align-self:start}
.edgemedia{grid-area:media;border-radius:18px;overflow:hidden;background:#111318;border:1px solid rgba(0,0,0,.1);aspect-ratio:4/3}
.edgemedia video{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
#newsletter .heading{font-size:clamp(28px,3.6vw,44px);margin-top:12px}
#newsletter .sub{margin-top:14px}
#newsletter .newsform{margin-top:6px}
@media (max-width:899.9px){
  .edgecard{grid-template-columns:1fr;grid-template-areas:"copy" "form" "media";gap:22px}
  .edgemedia{aspect-ratio:16/10}
}
/* --- overlays: a visible close button, and a backdrop of their own --- */
body.locked header,body.tmopen header,body.onb-active header{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:transparent!important}
.tmx{background:#fff;border:1px solid rgba(0,0,0,.14);color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.tmx:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.tmov{background:radial-gradient(70% 42% at 50% 0%,rgba(11,99,230,.09),rgba(255,255,255,0) 70%) #fbfbfd;-webkit-backdrop-filter:none;backdrop-filter:none}
/* the forms sit on white cards over a grey field */
.tmov.drov,.tmov.edov,.tmov.ngov{background:radial-gradient(70% 42% at 50% 0%,rgba(11,99,230,.08),rgba(245,245,247,0) 70%) #f5f5f7}
.drov .tmwrap,.edov .tmwrap,.ngov .tmwrap{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:24px;
  padding:40px clamp(22px,4vw,56px) 44px;box-shadow:0 30px 80px -44px rgba(0,0,0,.2)}
.drov .tmwrap{max-width:640px}
.edov .tmwrap{max-width:680px}
/* media is a studio: dark, with the toolbar strip kept white for the wordmark */
.tmov.mvov{background:#0f1116;--color-bone-white:#fffdf9;--ink:#fffdf9;--ink-2:rgba(255,253,249,.72);color:#fffdf9}
.tmov.mvov::before{content:"";position:fixed;top:0;left:0;right:0;height:70px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06);z-index:2;pointer-events:none}
/* the close button sits on the white toolbar strip: keep it light, and keep its glyph ink */
.mvov .tmx{color:#1d1d1f}
.mvov .tmx:hover{color:#fff}
.mvov .tmsub{color:rgba(255,253,249,.72);opacity:1}
.mvov .tmhead .eyebrow{color:rgba(255,253,249,.6)}
.mvov .mvbox{border-color:rgba(255,255,255,.1);background:#15181f}
.mvov .mvdot{background:rgba(255,255,255,.35)}
.mvov .mvtv{border-color:rgba(255,255,255,.28)}
.mvov .mvghost{border-color:rgba(255,255,255,.4);color:#fff}
.mvov .mvghost:hover{background:#fff;color:#0e1319}
.mvov .mvcta,.mvbox .mvcta{background:#fff;color:#0e1319;border-color:#fff}
.mvov .mvcta:hover,.mvbox .mvcta:hover{background:transparent;color:#fff}
.mvov .mvsearch{border-bottom-color:rgba(255,255,255,.3)}
.mvov .mvsearch svg{stroke:#fff}
.mvov .mvsearch input{color:#fff}
.mvov .mvsearch input::placeholder{color:rgba(255,255,255,.42)}
.mvov .mvseg,.mvov .mvfil{border-color:rgba(255,255,255,.2)}
.mvov .mvpill{color:#fff}
.mvov .mvpill.on{background:#fff;color:#0e1319}
.mvov .mvcard{background:#15181f;border-color:rgba(255,255,255,.08)}
.mvov .mvthumb{background:linear-gradient(180deg,#1d2028,#12141a);border-bottom-color:rgba(255,255,255,.06)}
.mvov .mvline{background:rgba(255,255,255,.14)}
.mvov .mvbook{border-top-color:rgba(255,255,255,.14)}
.mvov .drlab{color:rgba(255,253,249,.8)}
.mvov .drin{border-bottom-color:rgba(255,255,255,.3);color:#fff}
.mvov .drin::placeholder{color:rgba(255,255,255,.42)}
.mvov .drsubmit{background:#fff;color:#0e1319;border-color:#fff}
.mvov .drsubmit:hover{background:transparent;color:#fff}
.mvov .mvor,.mvov .mvor a{color:rgba(255,253,249,.8)}
.mvov .drerr{color:#ff8a80}
/* --- reduced motion --- */
@media (prefers-reduced-motion:reduce){.fs-track{animation:none}}
/* ============================================================
   PASS 4 (2026-09-13): launch hygiene — consent, sticky phone bar,
   loading states, readable form errors.
   ============================================================ */
.cookie{position:fixed;left:16px;bottom:16px;z-index:45;width:min(420px,calc(100vw - 32px));
  background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.14);
  padding:18px 18px 16px;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
.cookie.on{opacity:1;transform:none}
.ck-t{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0 0 14px}
.ck-t a{color:var(--color-accent);font-weight:500}
.ck-t a:hover{text-decoration:underline;text-underline-offset:3px}
.ck-acts{display:flex;gap:8px;flex-wrap:wrap}
.ck-acts .ghost{font-size:14px;padding:10px 18px}
@media (max-width:767.9px){.cookie{left:12px;right:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom))}body.mcta-on .cookie{bottom:calc(88px + env(safe-area-inset-bottom))}}
/* the sticky phone bar */
.mcta{display:none}
@media (max-width:767.9px){
  .mcta{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:12;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid rgba(0,0,0,.08);
    transform:translateY(110%);transition:transform .35s ease}
  .mcta .ghost{flex:1 1 0;text-align:center;font-size:16px;padding:15px 10px}
  body.mcta-on .mcta{transform:none}
  body.locked .mcta,body.tmopen .mcta,body.onb-active .mcta,body.supopen .mcta{transform:translateY(110%)}
  .ctabar{display:none}
  body.mcta-on footer{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
}
/* loading state on any submit */
.qm-busy{position:relative;color:transparent!important;pointer-events:none}
.qm-busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:qmSpin .8s linear infinite}
.mvov .qm-busy::after,.mvbox .qm-busy::after{border-color:rgba(0,0,0,.2);border-top-color:#0e1319}
@keyframes qmSpin{to{transform:rotate(360deg)}}
/* the narrowest phones: the wordmark yields to the icon in every language */
@media (max-width:349.9px){.wordmark{font-size:0;gap:0}}
/* form errors that read on white */
.newserr,.drerr{color:#d9463e}
.newsin.bad,.drin.bad{border-bottom-color:#d9463e}
.mvov .drin.bad{border-bottom-color:#ff8a80}
@media (prefers-reduced-motion:reduce){.qm-busy::after{animation:none;border-color:rgba(255,255,255,.7)}.cookie,.mcta{transition:none}}
/* ============================================================
   PASS 5 (2026-09-13): depth and character.
   ============================================================ */
/* --- menu: pictures, and the lockups on ink --- */
.tile{border-radius:18px;overflow:hidden;border:1px solid rgba(0,0,0,.06)}
.tile.pic{background-color:#111318;color:#fff;border-color:rgba(0,0,0,.1)}
.tile.pic .tbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .5s ease}
.tile.pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.74));pointer-events:none}
.tile.pic .tlab{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media (hover:hover){.tile.pic:hover{background-color:#111318;color:#fff;border-color:rgba(0,0,0,.1)}.tile.pic:hover .tbg{transform:scale(1.04)}}
.tile.pic:focus-visible{background-color:#111318;color:#fff}
.tile.pic .chip{border-color:rgba(255,255,255,.55);color:#fff}
.tile.pic:hover .chip{border-color:rgba(255,255,255,.7);color:#fff}
.tile.ink,.tile.solid{background-color:#1d1d1f;color:#fff;border-color:#1d1d1f}
@media (hover:hover){.tile.ink:hover,.tile.solid:hover{background-color:#000;color:#fff;border-color:#000}}
.tile.ink:focus-visible,.tile.solid:focus-visible{background-color:#000;color:#fff}
.tile.ink .tart,.tile.solid .tart,.tile.ink .tduo img,.tile.blue .tart{filter:none}
.tile.ink .drgrad,.tile.ink:hover .drgrad{color:#fff;-webkit-text-fill-color:#fff;background:none}
.tile.ink.edge .edge-art i,.tile.ink.edge .edge-art b,.tile.ink.edge:hover .edge-art i{color:#fff}
.tile.ink .tlab,.tile.solid .tlab,.tile.blue .tlab{color:#fff}
.tile.blue{background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}
@media (hover:hover){.tile.blue:hover{background-color:#0a56c8;border-color:#0a56c8;color:#fff}}
.tile.tile-accent{border-color:rgba(11,99,230,.7);box-shadow:0 0 0 1px rgba(11,99,230,.35) inset}
.tile.dim{opacity:.6;filter:saturate(.6)}
.tile.icon .tart{max-height:58px}
.m-cta .tile .tlab{font-size:17px}
/* --- hero: featured in --- */
.trust{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,38px);flex-wrap:wrap;padding:0 0 32px;margin-top:-8px}
.trust-l{font-size:13px;color:var(--ink-3);margin-right:6px}
.trust img{height:22px;width:auto;max-width:118px;object-fit:contain;filter:grayscale(1);opacity:.62;transition:opacity .2s ease,filter .2s ease}
.trust img[alt="Associated Press"]{height:30px}
.trust img:hover{filter:none;opacity:1}
@media (max-width:767.9px){.trust{gap:16px 22px;padding-bottom:8px}.trust img{height:18px;max-width:92px}.trust img[alt="Associated Press"]{height:24px}.trust-l{flex:1 0 100%;text-align:center;margin:0 0 -4px}}
/* --- ask: the verbs --- */
.ask-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px auto 0;max-width:760px}
.ask-chips span{font-size:13px;color:var(--ink-2);border:1px solid rgba(0,0,0,.12);border-radius:980px;padding:7px 13px;background:rgba(255,255,255,.7)}
/* --- pricing: tier cards --- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:36px;align-items:stretch}
.tier{position:relative;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:22px;padding:28px 26px 26px;display:flex;flex-direction:column;gap:10px;text-align:left}
.tier.pro{border-color:rgba(11,99,230,.55);box-shadow:0 0 0 1px rgba(11,99,230,.35) inset,0 30px 60px -36px rgba(11,99,230,.35)}
.tier-tag{position:absolute;top:18px;right:18px;font-size:12px;font-weight:500;color:#fff;background:var(--color-accent);border-radius:980px;padding:5px 10px}
.tier-n{font-size:15px;color:var(--ink-2);margin:0}
.tier-p{margin:2px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tier-p b{font-size:clamp(34px,3.2vw,44px);line-height:1;letter-spacing:-.03em;font-weight:700;font-variant-numeric:tabular-nums}
.tier-s{font-size:14px;color:var(--ink-2)}
.tier-d{font-size:15px;line-height:1.5;color:var(--ink-2);margin:6px 0 4px;min-height:3em}
.tier-l{list-style:none;margin:6px 0 18px;padding:14px 0 0;border-top:1px solid rgba(0,0,0,.08);display:grid;gap:9px;flex:1 1 auto}
.tier-l li{font-size:15px;color:var(--ink);padding-left:26px;position:relative}
.tier-l li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:rgba(11,99,230,.12)}
.tier-l li::after{content:"";position:absolute;left:5px;top:8px;width:6px;height:3px;border-left:1.6px solid var(--color-accent);border-bottom:1.6px solid var(--color-accent);transform:rotate(-45deg)}
.tier .ghost{align-self:stretch;text-align:center}
@media (max-width:899.9px){.tiers{grid-template-columns:1fr;max-width:520px}}
/* --- finale: four numbers --- */
.stats4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:900px;margin:56px auto 0}
.stat{background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:22px 16px 20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.stat b{display:block;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.03em;font-weight:700;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;font-size:14px;color:var(--ink-2)}
@media (max-width:639.9px){.stats4{grid-template-columns:1fr 1fr;gap:10px;margin-top:40px}}
/* --- data room: facts beside the form --- */
.drov .tmwrap{max-width:1040px;display:grid;grid-template-columns:.85fr 1.15fr;gap:24px clamp(32px,5vw,72px);align-items:start}
.drov .tmhead{margin-bottom:0}
.drov .drfacts{margin-top:26px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08);font-size:14px;line-height:1.5}
.drf-k{margin:0;color:var(--ink);font-weight:500}
.drf-v{margin:0 0 12px;color:var(--ink-2)}
.drf-note{margin:14px 0 8px;color:var(--ink-2)}
.drf-mail{color:var(--color-accent);font-weight:500}
@media (max-width:899.9px){.drov .tmwrap{grid-template-columns:1fr}}
/* --- footer: four columns --- */
footer{text-align:left;padding:64px var(--pad-x) 36px}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:32px 40px}
.fcol{display:flex;flex-direction:column;align-items:flex-start}
.fcol a{font-size:15px;color:var(--ink);padding:5px 0;text-transform:none;letter-spacing:0;opacity:1;display:inline-block}
.fcol a:hover{color:var(--color-accent)}
.fh{font-size:13px;color:var(--ink-2);margin:0 0 8px;font-weight:500}
.fline{font-size:15px;color:var(--ink-2);margin:14px 0 18px;max-width:28ch}
.faddr{font-size:14px;color:var(--ink-2);line-height:1.55;margin:12px 0 0}
.fcol .fsupport{margin:4px 0 0}
.fcol .supbtn{padding:5px 0;font-size:15px;opacity:1;color:var(--ink)}
.fcol .supbtn:hover{color:var(--color-accent)}
.fbottom{margin-top:44px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.fbottom p{margin:0}
.fbottom .flinks{margin:0;gap:20px;justify-content:flex-start}
.fbottom .ulink{font-size:13px;padding:0}
footer .socials{justify-content:flex-start;margin-top:0;gap:22px}
footer .wordmark{font-size:17px}
@media (max-width:899.9px){.fcols{grid-template-columns:1fr 1fr}.fcol.brand{grid-column:1 / -1}}
@media (max-width:479.9px){.fcols{grid-template-columns:1fr;gap:26px}}
/* --- the download popup, light like everything else --- */
.dlmodal{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.dlbox{box-shadow:0 30px 80px rgba(0,0,0,.18);border-radius:22px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.dlbox iframe{background:#fff}
.dlclose{background:rgba(255,255,255,.9);color:var(--ink);border:1px solid rgba(0,0,0,.14);border-radius:50%;width:40px;height:40px;top:12px;right:12px;font-size:15px}
.dlclose:hover,.dlclose:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ============================================================
   PASS 6 (2026-09-13): the software pass.
   ============================================================ */
/* --- menu: the original artwork on ink, in its own colours --- */
.tile.ink{background-image:linear-gradient(165deg,#2a2a30,#161618);background-size:100% 100%;transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.tile.ink .tart,.tile.ink .tduo img{transition:transform .45s var(--ease)}
@media (hover:hover){
  .tile.ink:hover{background-image:linear-gradient(165deg,#33333a,#1a1a1d);background-color:#1d1d1f;border-color:rgba(40,208,245,.5);box-shadow:0 18px 40px -24px rgba(0,0,0,.55)}
  .tile.ink:hover .tart,.tile.ink:hover .tduo img{transform:translateY(-2px) scale(1.03)}
  .tile.ink.photo:hover .tart{transform:scale(1.04)}
}
.tile.ink:focus-visible{border-color:rgba(40,208,245,.7)}
.tile.ink.photo{background-image:none}
.tile.ink.photo .tart{left:0;right:0;top:0;bottom:0;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.96}
.tile.ink.photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(9,13,18,.86))}
.tile.ink.dim{opacity:.62;filter:saturate(.7)}
.tile.ink.mark .tart[src*="awards-board"]{max-height:calc(100% - 48px)}
/* --- hero: the press strip links into the spotlights --- */
.trust a{display:inline-flex;align-items:center;padding:4px 2px;border-radius:8px;transition:transform .3s var(--ease)}
.trust a img{transition:opacity .25s ease,filter .25s ease,transform .3s var(--ease)}
@media (hover:hover){.trust a:hover{transform:translateY(-2px)}.trust a:hover img{filter:none;opacity:1}}
.trust a:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}
.trust a:focus-visible img{filter:none;opacity:1}
/* --- bands: a touch of depth --- */
section.band:not(.band-ink):not(.band-glow)::before{background:linear-gradient(180deg,rgba(247,247,249,.94),rgba(241,241,244,.94));box-shadow:inset 0 1px 0 rgba(0,0,0,.045),inset 0 -1px 0 rgba(0,0,0,.045)}
/* --- flow canvases in folds that are not the hero --- */
#ask{position:relative}
#ask>canvas.flow{position:absolute;top:-10%;height:120%;left:50%;width:100vw;margin-left:-50vw;right:auto;bottom:auto;z-index:0}
#ask>*:not(canvas.flow){position:relative;z-index:1}
.askbar{background:#fff;box-shadow:0 30px 70px -34px rgba(11,99,230,.4)}
/* --- inside the software: the tour --- */
.tour{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:48px}
.tour-stage{position:sticky;top:104px}
.tour-frame{position:relative;background:#0e1013;border-radius:20px;overflow:hidden;border:1px solid rgba(0,0,0,.14);box-shadow:0 40px 90px -40px rgba(0,0,0,.55)}
.tour-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#15181d;border-bottom:1px solid rgba(255,255,255,.06)}
.tour-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.tour-bar span{margin-left:10px;font-size:11.5px;color:rgba(255,255,255,.55);letter-spacing:.01em;background:rgba(255,255,255,.06);padding:4px 12px;border-radius:999px;font-family:var(--mono)}
.tour-shots{position:relative;aspect-ratio:2/1;background:#0e1013}
.tour-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transform:scale(1.015);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.tour-shot.on{opacity:1;transform:none}
.tour-tabs{display:flex;gap:4px;margin-top:14px;flex-wrap:wrap}
.tour-tabs button{font:inherit;font-size:13px;line-height:1;padding:8px 13px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--ink-2);cursor:pointer;transition:color .2s,background-color .2s,border-color .2s}
.tour-tabs button.on{color:var(--ink);background:#fff;border-color:rgba(0,0,0,.14)}
.tour-tabs button:hover{color:var(--ink)}
.tour-tabs button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.tour-steps{list-style:none;margin:0;padding:0}
.tour-step{padding:clamp(56px,13vh,116px) 0;border-top:1px solid rgba(0,0,0,.08);opacity:.34;transition:opacity .45s var(--ease)}
.tour-step:first-child{border-top:0;padding-top:10px}
.tour-step.on{opacity:1}
.tour-mimg{display:none}
.tour-k{font-size:12.5px;letter-spacing:.02em;color:var(--ink-2);margin:0 0 12px}
.tour-t{font-size:var(--fs-heading-sm);line-height:1.15;letter-spacing:-.02em;font-weight:600;margin:0 0 12px}
.tour-t b{color:var(--color-accent);font-weight:600}
.tour-p{font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:40ch;margin:0}
@media (max-width:899.9px){
  .tour{display:block}
  .tour-stage{display:none}
  .tour-step,.tour-step:first-child{opacity:1;padding:26px 0;border-top:0}
  .tour-mimg{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;object-position:left top;border-radius:14px;background:#0e1013;margin:0 0 18px;border:1px solid rgba(0,0,0,.12)}
}
/* --- the module index --- */
.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:30px 24px;margin-top:44px}
.wall-g{border-top:1px solid rgba(0,0,0,.12);padding-top:16px}
.wall-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;margin:0 0 10px;color:var(--ink)}
.wall-h b{font-weight:600}
.wall-c{color:var(--ink-2);font-size:12px;font-family:var(--mono)}
.wall ul{list-style:none;margin:0;padding:0}
.wall li{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.35;padding:5px 0;color:var(--ink);cursor:default}
.wall li i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--g,#0b63e6)}
.wall li em{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border:1px solid rgba(0,0,0,.16);border-radius:999px;padding:1px 6px;margin-left:2px}
@media (hover:hover){.wall li:hover{color:var(--color-accent)}}
.js [data-reveal] .wall li{opacity:0;transform:translateY(6px)}
.js [data-reveal].in .wall li{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s;transition-delay:calc(var(--i,0)*9ms)}
@media (prefers-reduced-motion:reduce){.js [data-reveal] .wall li{opacity:1;transform:none;transition:none}}
@media (max-width:639.9px){.wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.wall li{font-size:13px;padding:4px 0}.wall-h{font-size:12.5px}}
/* --- the signal diagram --- */
.sig{margin:44px 0 0;padding:0}
.sig-svg{display:block;width:100%;height:auto;max-width:980px;margin:0 auto;overflow:visible}
.sig-p path{stroke:rgba(29,29,31,.16);stroke-width:1}
.sig-f path{stroke:url(#sigg);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:8 116;opacity:.95}
.sig-n rect{fill:#fff;stroke:rgba(0,0,0,.14)}
.sig-core rect{fill:#1d1d1f}
.sig-svg text{font-family:var(--body);font-size:14px;fill:var(--ink);font-weight:500}
.sig-core text{fill:#fff}
.sig-core .sig-s{fill:rgba(255,255,255,.62);font-size:11.5px;font-weight:400}
@media (prefers-reduced-motion:no-preference){
  .sig-f path{animation:sigflow 3s linear infinite}
  .sig-f path:nth-child(2){animation-delay:-.5s}.sig-f path:nth-child(3){animation-delay:-1s}.sig-f path:nth-child(4){animation-delay:-1.5s}
  .sig-f path:nth-child(5){animation-delay:-2s}.sig-f path:nth-child(6){animation-delay:-2.5s}
  .sig-f path:nth-child(7){animation-delay:-.8s}.sig-f path:nth-child(8){animation-delay:-1.8s}.sig-f path:nth-child(9){animation-delay:-2.8s}
}
@keyframes sigflow{to{stroke-dashoffset:-124}}
@media (max-width:639.9px){.sig{display:none}}
/* --- the world under the coverage number --- */
.wmap{position:relative;margin:36px auto 0;max-width:1120px;min-height:120px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.wmap-c{display:block;width:100%;height:100%}
.wmap-pt{position:absolute;left:var(--x);top:var(--y);transform:translate(-4px,-50%);font-size:11.5px;letter-spacing:.01em;color:var(--ink);padding-left:15px;white-space:nowrap;pointer-events:none;line-height:1}
.wmap-pt::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 3px rgba(11,99,230,.16),0 0 0 1.5px #fff inset}
.wmap-pt.l{transform:translate(calc(-100% + 4px),-50%);padding-left:0;padding-right:15px}
.wmap-pt.l::before{left:auto;right:0}
@media (max-width:1099.9px){.wmap-pt.tight{display:none}}
@media (max-width:639.9px){.wmap-pt{font-size:10px}.wmap-pt.min{display:none}}
/* --- devices: a stage, and the platforms named --- */
.dev-stage{position:relative}
.dev-stage::before{content:"";position:absolute;left:50%;top:50%;width:min(1160px,112%);height:82%;transform:translate(-50%,-50%);background:radial-gradient(55% 52% at 50% 56%,rgba(11,99,230,.13),rgba(40,208,245,.05) 55%,rgba(255,255,255,0) 76%);z-index:0;pointer-events:none}
.dev-stage .devvid{position:relative;z-index:1}
.dev-floor{display:block;position:relative;z-index:0;width:60%;height:34px;margin:-28px auto 0;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.15),rgba(0,0,0,0) 70%)}
@media (prefers-reduced-motion:no-preference){.dev-stage .devvid-v{animation:devFloat 9s ease-in-out infinite}}
@keyframes devFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.dev-chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:30px 0 0}
.dev-chips span{font-size:12.5px;line-height:1;padding:8px 13px;border:1px solid rgba(0,0,0,.13);border-radius:999px;color:var(--ink-2);background:#fff}
/* --- education: the two paths as cards --- */
.edu-paths{border-top:0;gap:14px}
.epath{border:1px solid rgba(0,0,0,.09);border-radius:20px;padding:26px 26px 28px;background:#fff;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
@media (hover:hover){.epath:hover{transform:translateY(-3px);box-shadow:0 26px 60px -34px rgba(0,0,0,.35)}}
/* --- intelligence overlay: product shots --- */
.ivshot{margin:26px 0 6px;border-radius:16px;overflow:hidden;background:#0e1013;border:1px solid rgba(0,0,0,.12);box-shadow:0 30px 70px -36px rgba(0,0,0,.45)}
.ivshot img{display:block;width:100%;height:auto}
.ivcap{font-size:12.5px;color:var(--ink-2);padding:10px 14px;background:#fff;border-top:1px solid rgba(0,0,0,.08);margin:0}
.ivov .tmwrap>.ivshot{margin-top:30px}
/* --- footer: the wordmark is one line --- */
.fcol.brand .wordmark{display:inline-flex;align-items:center;gap:9px;padding:0;font-size:17px}
.fcol.brand .wordmark:hover{color:var(--ink)}
/* --- pass 7: product film in the tour --- */
video.tour-shot,video.tour-mimg{background:#0e1013}
.tour-shot{object-position:left top}
/* ============================================================
   PASS 8 (2026-09-13): the detail pass. No boxes around text; the machine as a
   real system map; the world with a denser grid, graticule, arcs and clocks;
   the module index as a searchable board of the real tiles.
   ============================================================ */
/* --- no containers: awards, finale numbers, education paths, device line, tour tabs --- */
.stats4{gap:0;max-width:980px;margin-top:52px}
.stat{background:transparent;border:0;border-radius:0;padding:8px 12px;-webkit-backdrop-filter:none;backdrop-filter:none}
.stat+.stat{border-left:1px solid rgba(0,0,0,.12)}
.stat b{font-size:clamp(34px,4.2vw,56px)}
@media (max-width:639.9px){.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid rgba(0,0,0,.12);margin-top:10px;padding-top:18px}}
.edu-paths{border-top:1px solid var(--color-graphite);gap:0}
.epath,.epath:hover{border:0;border-bottom:1px solid var(--color-graphite);border-radius:0;padding:30px 0;background:transparent;box-shadow:none;transform:none}
.dev-chips{gap:0 14px;margin-top:26px}
.dev-chips span{padding:0;border:0;background:transparent;font-size:13.5px;color:var(--ink-2)}
.dev-chips span+span::before{content:"\00b7";margin-right:14px;color:var(--ink-3)}
.tour-tabs{gap:clamp(12px,1.6vw,22px);margin-top:16px;border-bottom:1px solid rgba(0,0,0,.1)}
.tour-tabs button{padding:10px 0 12px;border:0;border-radius:0;background:transparent;position:relative;font-size:13.5px}
.tour-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.tour-tabs button.on{background:transparent;border-color:transparent;color:var(--ink)}
.tour-tabs button.on::after{transform:scaleX(1)}
/* --- the machine: a system map --- */
.mtop{display:block}
.sig{display:none}
.mc{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.85fr) minmax(0,.95fr);gap:clamp(22px,3.6vw,60px);align-items:center;margin-top:44px;padding:clamp(22px,3.4vw,44px);border-radius:28px;background:linear-gradient(180deg,#fcfcfd,#f1f1f4);border:1px solid rgba(0,0,0,.07);box-shadow:inset 0 1px 0 #fff,0 50px 90px -70px rgba(0,0,0,.4);overflow:hidden}
.mc::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(29,29,31,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(29,29,31,.05) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(75% 75% at 50% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(75% 75% at 50% 50%,#000 20%,transparent 100%);pointer-events:none}
.mc-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mc-svg path{fill:none;stroke:rgba(29,29,31,.16);stroke-width:1;transition:stroke .3s,opacity .3s}
.mc-svg path.pk{stroke:url(#mcg);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:.055 .945;stroke-dashoffset:0;opacity:.95}
@media (prefers-reduced-motion:no-preference){.mc-svg path.pk{animation:mcPk var(--dur,2.8s) linear infinite;animation-delay:var(--del,0s)}}
@keyframes mcPk{to{stroke-dashoffset:-1}}
.mc-svg path.hot{stroke:#0b63e6;stroke-width:1.3;opacity:.9}
.mc-col{position:relative;z-index:1;display:grid;gap:14px;align-content:center}
.mc-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 2px}
.mc-lane{display:grid;gap:6px;padding:4px 0}
.mc-l{font-size:12.5px;color:var(--ink-2);margin:0}
.mc-chips{display:flex;flex-wrap:wrap;gap:6px}
.mc-chip{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.09);box-shadow:0 1px 2px rgba(0,0,0,.04);font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--ink);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.mc-chip img{height:15px;width:auto;max-width:82px;display:block}
.mc-chip.t{font-size:11.5px;letter-spacing:.04em}
@media (hover:hover){.mc-lane:hover .mc-chip{border-color:rgba(11,99,230,.5);box-shadow:0 8px 16px -10px rgba(11,99,230,.45);transform:translateY(-1px)}}
.mc-core{position:relative;z-index:1;background:#0e1013;color:#fff;border-radius:22px;padding:22px 22px 18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)}
.mc-core-t{font-size:17px;font-weight:600;margin:0;letter-spacing:-.01em}
.mc-core-s{font-size:12px;color:rgba(255,255,255,.55);margin:2px 0 16px}
.mc-stages{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mc-stages li{display:grid;gap:6px;font-size:12.5px;color:rgba(255,255,255,.6);transition:color .4s}
.mc-stages li.on{color:#fff}
.mc-stages li i{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.mc-stages li i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#0b63e6,#28d0f5);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.mc-stages li.on i::after{transform:scaleX(1)}
.mc-core-f{margin:18px 0 0;font-size:11.5px;color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.08);padding-top:12px;line-height:1.5}
.mc-core-f b{color:#fff;font-weight:600}
.mc-node{position:relative;background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:16px;padding:13px 16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mc-node b{display:block;font-size:14px;font-weight:600}
.mc-node i{display:block;font-style:normal;font-size:12px;color:var(--ink-2);margin-top:3px}
.mc-node .mc-icons{display:flex;gap:10px;margin-top:8px}
.mc-node .mc-icons svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mc-node .mc-icons svg.mcp{stroke:var(--color-accent)}
.mc-vert{display:none}
@media (max-width:959.9px){
  .mc{display:block;padding:20px}
  .mc-svg{display:none}
  .mc-col{gap:10px}
  .mc-src{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
  .mc-src .mc-h{grid-column:1/-1}
  .mc-vert{display:block;position:relative;width:1px;height:38px;margin:10px auto;background:rgba(29,29,31,.18)}
  .mc-vert::after{content:"";position:absolute;left:-2.5px;top:0;width:6px;height:6px;border-radius:50%;background:var(--color-accent)}
  @media (prefers-reduced-motion:no-preference){.mc-vert::after{animation:mcDrop 1.6s linear infinite}}
  .mc-out{display:grid;grid-template-columns:1fr;gap:8px}
  .mc-out .mc-h{margin-top:4px}
}
@media (max-width:599.9px){.mc-src{grid-template-columns:1fr}}
@keyframes mcDrop{from{top:-6px;opacity:0}20%{opacity:1}to{top:100%;opacity:0}}
/* --- the world: denser dots, graticule, arcs, clocks --- */
.wmap{max-width:1160px;margin-top:40px}
.wmap::before{content:"";position:absolute;left:50%;top:50%;width:80%;height:90%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(11,99,230,.07),rgba(255,255,255,0) 70%);pointer-events:none}
.wmap-c{position:relative}
.wmap-arcs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wmap-arcs path{fill:none;stroke:rgba(11,99,230,.22);stroke-width:1}
.wmap-arcs path.pk{stroke:#0b63e6;stroke-width:2;stroke-linecap:round;stroke-dasharray:.035 .965;opacity:.9}
@media (prefers-reduced-motion:no-preference){.wmap-arcs path.pk{animation:mcPk var(--dur,6s) linear infinite;animation-delay:var(--del,0s)}}
.wmap-pt{font-size:12px;font-weight:500;letter-spacing:0;padding-left:16px;line-height:1.15;color:var(--ink)}
.wmap-pt b{display:block;font-weight:500}
.wmap-pt i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:.02em;margin-top:1px}
.wmap-pt::before{width:7px;height:7px;margin-top:-3.5px;box-shadow:0 0 0 3px rgba(11,99,230,.16),0 0 0 1.5px #fff inset}
.wmap-pt.l{padding-left:0;padding-right:16px;text-align:right}
@media (max-width:639.9px){.wmap-pt{font-size:10px}.wmap-pt i{display:none}}
/* --- the module board --- */
.board{margin-top:44px;background:#0e1013;border-radius:26px;padding:clamp(14px,2.2vw,26px);box-shadow:0 60px 110px -70px rgba(0,0,0,.65);border:1px solid rgba(0,0,0,.25);position:relative}
.board-top{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:16px}
.board-q{flex:1 1 240px;display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;background:#171a1f;border:1px solid rgba(255,255,255,.08);color:#fff;transition:border-color .25s}
.board-q svg{width:16px;height:16px;stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.8;stroke-linecap:round;flex:none}
.board-q input{flex:1;background:transparent;border:0;outline:0;color:#fff;font:inherit;font-size:14px;min-width:0}
.board-q input::placeholder{color:rgba(255,255,255,.42)}
.board-q input::-webkit-search-decoration,.board-q input::-webkit-search-cancel-button{-webkit-appearance:none}
.board-q:focus-within{border-color:rgba(40,208,245,.6)}
.board-chips{display:flex;gap:2px;flex-wrap:wrap}
.board-chips button{font:inherit;font-size:12.5px;line-height:1;padding:8px 11px;border-radius:999px;border:1px solid transparent;background:transparent;color:rgba(255,255,255,.62);cursor:pointer;transition:color .2s,background-color .2s,border-color .2s}
.board-chips button:hover{color:#fff}
.board-chips button.on{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
.board-chips button:focus-visible{outline:2px solid #28d0f5;outline-offset:2px}
.board-n{margin:0 0 0 auto;font-size:12.5px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.board-n b{color:#fff;font-weight:600}
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:6px}
.bt{display:block;border-radius:11px;background:#15181d;border:1px solid rgba(255,255,255,.06);padding:7px 7px 8px;text-decoration:none;color:#fff;transition:opacity .4s var(--ease),transform .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)}
.bt-i{display:block;width:100%;aspect-ratio:172/57;border-radius:7px;background-color:#1c1c1c;background-image:var(--qm-media-modules-board-png);background-size:1100% 800%;background-position:calc(var(--c,0)*10%) calc(var(--r,0)*14.2857%);background-repeat:no-repeat}
.bt-n{display:block;margin-top:7px;font-size:11.5px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-n em{font-style:normal;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#28d0f5;margin-left:6px}
@media (hover:hover){.bt:hover{transform:translateY(-2px);border-color:rgba(40,208,245,.55);background:#1a1e25}}
.bt:focus-visible{outline:2px solid #28d0f5;outline-offset:2px}
.js [data-reveal] .bt{opacity:0;transform:translateY(6px)}
.js [data-reveal].in .bt{opacity:1;transform:none;transition-delay:calc(var(--i,0)*7ms)}
.js [data-reveal].in .bt.dim,.bt.dim{opacity:.14}
.board.searching .bt.hit{border-color:rgba(40,208,245,.45)}
@media (prefers-reduced-motion:reduce){.js [data-reveal] .bt{opacity:1;transform:none;transition:none}}
@media (max-width:639.9px){.board-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.bt{padding:6px 6px 7px}.bt-n{font-size:10.5px}.board-n{flex:1 0 100%;margin:0}}
@media (max-width:399.9px){.board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* --- pass 10: Lighthouse --- */
.vhid{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.trust-l{color:var(--ink-2)}
.askbar .cmd .h{opacity:.72}
#msSet .chip{color:#0a56c8;border-color:rgba(10,86,200,.6)}
.socials{gap:30px}
.socials a{padding:12px;margin:-12px}
.mc-chip img,.pcl{object-fit:contain}
/* --- pass 11: contrast by colour, not opacity --- */
.navlink .chip,#msSet .chip,.chip{color:#0a56c8;opacity:1;border-color:rgba(10,86,200,.6)}
.tile .chip{color:#fff;border-color:rgba(255,255,255,.55)}
.tour-step,.tour-step:first-child{opacity:1;color:var(--ink-2);transition:color .45s var(--ease)}
.tour-step .tour-t{color:var(--ink-2);transition:color .45s var(--ease)}
.tour-step .tour-t b{color:#5b8de0;transition:color .45s var(--ease)}
.tour-step .tour-p{color:var(--ink-2);transition:color .45s var(--ease)}
.tour-step.on,.tour-step.on .tour-t,.tour-step.on .tour-p{color:var(--ink)}
.tour-step.on .tour-t b{color:var(--color-accent)}
@media (max-width:899.9px){.tour-step,.tour-step:first-child{opacity:1}}
/* --- pass 14: the board as the show --- */
.board-grid{position:relative}
.board-q{height:58px;padding:0 18px;border-radius:15px;gap:12px;flex:1 1 320px}
.board-q input{font-size:19px;letter-spacing:-.005em}
.board-q input::placeholder{font-size:17px}
.board-q svg{width:19px;height:19px}
.board.typing .board-q{border-color:rgba(40,208,245,.65);box-shadow:0 0 0 3px rgba(40,208,245,.12)}
.board.typing .board-q svg{stroke:#28d0f5}
.board-n{font-size:13.5px}
.board-n b{font-size:15px}
.bt{position:relative;will-change:transform}
.board.live .bt,.js [data-reveal].in .board.live .bt{transition:transform .95s cubic-bezier(.22,.9,.24,1),opacity .6s cubic-bezier(.4,0,.2,1),border-color .5s ease,background-color .5s ease,box-shadow .6s ease;transition-delay:0s}
.board.searching .bt.dim{opacity:.14;transform:scale(.985)}
.js [data-reveal].in .board.searching .bt.dim{opacity:.14}
.board.searching .bt.hit{border-color:rgba(40,208,245,.5);background:#191f27;box-shadow:0 24px 60px -24px rgba(40,208,245,.35),0 0 0 1px rgba(40,208,245,.16)}
.board.searching .bt.hit .bt-n{color:#fff}
@media (max-width:639.9px){.board-q{height:50px;padding:0 14px}.board-q input{font-size:16px}.board-q input::placeholder{font-size:15px}}
/* ============================================================
   PASS 15 (2026-09-13): The Routing Layer. The instrument panel.
   ============================================================ */
.mc{display:none}
.rl{position:relative;margin-top:44px;padding:clamp(20px,3vw,36px) clamp(18px,3vw,36px) clamp(18px,2.4vw,28px);border-radius:28px;background:#0b0e13;color:#f5f5f7;border:1px solid rgba(255,255,255,.08);box-shadow:0 60px 120px -70px rgba(0,0,0,.7);overflow:hidden;isolation:isolate}
.rl::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 100%);mask-image:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 100%);pointer-events:none;z-index:0}
.rl::after{content:"";position:absolute;left:50%;top:38%;width:60%;height:60%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(11,99,230,.22),rgba(11,99,230,0) 70%);pointer-events:none;z-index:0}
.rl-top{position:relative;z-index:2;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.rl-h{margin:0;display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.rl-hn{color:#fff}
.rl-pp{font-size:10.5px;letter-spacing:.12em;padding:5px 9px;border:1px solid rgba(40,208,245,.5);border-radius:999px;color:#28d0f5}
.rl-nums{margin:0;font-size:12.5px;color:rgba(255,255,255,.55);display:flex;align-items:baseline;gap:8px}
.rl-nums b{color:#fff;font-size:18px;font-weight:600;letter-spacing:-.01em}
.rl-nums i{font-style:normal;color:rgba(255,255,255,.25);margin:0 2px}
.rl-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.rl-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rl-svg path.b{stroke:rgba(255,255,255,.1);stroke-width:1}
.rl-svg path.on{stroke:url(#rlg);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .7s cubic-bezier(.22,.9,.24,1),opacity .2s ease}
.rl-svg path.on.draw{stroke-dashoffset:0;opacity:1}
.rl-grid>div{margin:0;padding:0;max-width:none;min-width:0}
.rl-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(200px,.95fr) minmax(260px,1.35fr) minmax(220px,1fr) minmax(200px,.95fr);grid-template-rows:auto auto;gap:22px clamp(28px,4vw,72px);align-items:start}
.rl-q{grid-column:1;grid-row:1/3;align-self:center}
.rl-core{grid-column:2;grid-row:1}
.rl-eng{grid-column:2;grid-row:2}
.rl-src{grid-column:3;grid-row:1/3;align-self:center}
.rl-ans{grid-column:4;grid-row:1/3;align-self:center}
.rl-lab{margin:0 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.rl-lab span{display:block;letter-spacing:0;text-transform:none;font-size:12px;color:rgba(255,255,255,.4);margin-top:3px}
.rl-qcard{position:relative;background:#141922;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px 18px;min-height:96px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.rl-qt{margin:0;font-size:15.5px;line-height:1.45;color:#fff;letter-spacing:-.005em}
.rl-caret{display:inline-block;width:2px;height:1.1em;background:#28d0f5;vertical-align:-3px;margin-left:2px;opacity:0}
.rl.typing .rl-caret{opacity:1;animation:rlBlink 1s steps(2) infinite}
@keyframes rlBlink{to{opacity:0}}
.rl-note{margin:10px 0 0;font-size:11.5px;color:rgba(255,255,255,.38)}
.rl-stages{list-style:none;margin:0;padding:14px 16px;background:#06080c;border:1px solid rgba(40,208,245,.28);border-radius:18px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;box-shadow:0 30px 60px -30px rgba(40,208,245,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.rl-stages li{position:relative;padding:8px 4px 10px;border-top:2px solid rgba(255,255,255,.1);transition:border-color .35s ease}
.rl-stages li b{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.5);transition:color .3s ease}
.rl-stages li i{display:block;font-style:normal;font-size:11px;color:rgba(255,255,255,.32);margin-top:3px;line-height:1.3}
.rl-stages li.on{border-top-color:#28d0f5}
.rl-stages li.on b{color:#fff}
.rl-stages li.done{border-top-color:rgba(40,208,245,.55)}
.rl-stages li.done b{color:rgba(255,255,255,.85)}
.rl-stages li.on::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:#28d0f5;box-shadow:0 0 12px rgba(40,208,245,.8)}
.rl-cells{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rl-cells li{background:#10141b;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 9px;min-height:44px;transition:border-color .35s ease,background-color .35s ease,box-shadow .35s ease}
.rl-cells li b{display:block;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.55);line-height:1.2;transition:color .3s}
.rl-cells li i{display:block;font-style:normal;font-size:10px;color:rgba(255,255,255,.3);margin-top:2px;line-height:1.25}
.rl-cells li.scan{border-color:rgba(255,255,255,.22)}
.rl-cells li.on{border-color:#28d0f5;background:#101c26;box-shadow:0 12px 30px -12px rgba(40,208,245,.45)}
.rl-cells li.on b{color:#fff}
.rl-cells li.on i{color:rgba(255,255,255,.6)}
.rl-srcs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rl-srcs li{display:flex;align-items:center;justify-content:center;height:34px;padding:0 10px;border-radius:999px;background:#fff;color:#1d1d1f;border:1px solid rgba(255,255,255,.14);opacity:.42;transition:opacity .35s ease,box-shadow .35s ease,transform .35s ease;font-size:11.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.rl-srcs li img{height:14px;width:auto;max-width:92px;object-fit:contain;display:block}
.rl-srcs li b{font-weight:600}
.rl-srcs li.on{opacity:1;box-shadow:0 0 0 2px #28d0f5,0 14px 30px -12px rgba(40,208,245,.5);transform:translateX(3px)}
.rl-acard{background:#0e1320;border:1px solid rgba(11,99,230,.35);border-left:3px solid #0b63e6;border-radius:16px;padding:16px 18px;min-height:96px;opacity:.45;transition:opacity .4s ease,box-shadow .4s ease}
.rl-acard.on{opacity:1;box-shadow:0 24px 60px -24px rgba(11,99,230,.55)}
.rl-at{margin:0;font-size:15px;font-weight:600;color:#fff}
.rl-as{margin:8px 0 0;font-size:12.5px;color:#7fc4ff;min-height:1.4em;line-height:1.4}
.rl-as:empty::before{content:"\00a0"}
.rl-out{margin:10px 0 0;font-size:11.5px;color:rgba(255,255,255,.4);line-height:1.45}
.rl-foot{position:relative;z-index:2;margin:24px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:rgba(255,255,255,.5);display:flex;gap:6px 18px;flex-wrap:wrap}
.rl-foot b{color:#fff;font-weight:600}
@media (max-width:1099.9px){.rl-cells{grid-template-columns:repeat(3,minmax(0,1fr))}.rl-stages{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:12px}.rl-stages li i{display:none}}
@media (max-width:959.9px){
  .rl-svg{display:none}
  .rl-grid{display:grid;grid-template-columns:1fr;gap:18px}
  .rl-q,.rl-core,.rl-eng,.rl-src,.rl-ans{grid-column:1;grid-row:auto;align-self:stretch}
  .rl-cells{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rl-srcs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rl-srcs li.on{transform:none}
}
@media (max-width:599.9px){.rl-cells{grid-template-columns:repeat(2,minmax(0,1fr))}.rl-srcs{grid-template-columns:1fr 1fr}.rl-stages{grid-template-columns:repeat(5,minmax(0,1fr))}.rl-stages li b{font-size:11px}.rl-nums{width:100%}}
html[data-theme="dark"] .rl{border-color:rgba(255,255,255,.1);box-shadow:none}
/* ============================================================
   PASS 16 (2026-09-13): colour grade, the map by kind of data, the routing panel flexes.
   ============================================================ */
.grade{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.grade i{position:absolute;border-radius:50%;will-change:transform}
.grade i:nth-child(1){left:-20vmax;top:-26vmax;width:78vmax;height:78vmax;background:radial-gradient(circle,rgba(11,99,230,.11),rgba(11,99,230,0) 62%);animation:gradeA 80s ease-in-out infinite alternate}
.grade i:nth-child(2){right:-24vmax;top:14vh;width:70vmax;height:70vmax;background:radial-gradient(circle,rgba(40,208,245,.10),rgba(40,208,245,0) 62%);animation:gradeB 100s ease-in-out infinite alternate}
.grade i:nth-child(3){left:18%;bottom:-34vmax;width:72vmax;height:72vmax;background:radial-gradient(circle,rgba(124,92,255,.08),rgba(124,92,255,0) 62%);animation:gradeC 90s ease-in-out infinite alternate}
@keyframes gradeA{to{transform:translate(9vw,7vh)}}
@keyframes gradeB{to{transform:translate(-8vw,10vh)}}
@keyframes gradeC{to{transform:translate(6vw,-8vh)}}
@media (prefers-reduced-motion:reduce){.grade i{animation:none}}
html[data-theme="dark"] .grade i:nth-child(1){background:radial-gradient(circle,rgba(11,99,230,.22),rgba(11,99,230,0) 62%)}
html[data-theme="dark"] .grade i:nth-child(2){background:radial-gradient(circle,rgba(40,208,245,.14),rgba(40,208,245,0) 62%)}
html[data-theme="dark"] .grade i:nth-child(3){background:radial-gradient(circle,rgba(124,92,255,.16),rgba(124,92,255,0) 62%)}
section.band:not(.band-ink):not(.band-glow)::before{background:linear-gradient(180deg,rgba(243,246,252,.9),rgba(238,242,250,.9))}
html[data-theme="dark"] section.band:not(.band-ink):not(.band-glow)::before{background:linear-gradient(180deg,rgba(22,24,32,.92),rgba(16,18,26,.92))}
/* --- the map: kinds of data --- */
.dkinds{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 6px;margin:34px auto 0;max-width:1120px}
.dkinds button{--kc:var(--color-accent);font:inherit;font-size:13px;line-height:1;padding:9px 13px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:transparent;color:var(--ink-2);cursor:pointer;transition:color .25s ease,border-color .25s ease,background-color .25s ease,box-shadow .25s ease}
.dkinds button:hover{color:var(--ink);border-color:rgba(0,0,0,.24)}
.dkinds button.on{color:#fff;background:var(--kc);border-color:var(--kc);box-shadow:0 10px 24px -12px var(--kc)}
.dkinds button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.dkinds-cap{margin:14px 0 0;font-size:13px;color:var(--ink-3)}
html[data-theme="dark"] .dkinds button{border-color:rgba(255,255,255,.14);color:var(--ink-2)}
html[data-theme="dark"] .dkinds button:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.wmap{-webkit-mask-image:none;mask-image:none;border-radius:20px}
.wmap::before{width:100%;height:100%;background:radial-gradient(60% 60% at 50% 50%,rgba(11,99,230,.08),rgba(255,255,255,0) 72%)}
.wmap::after{content:"";position:absolute;left:8%;right:8%;bottom:-18px;height:40px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(11,99,230,.16),rgba(11,99,230,0) 70%);pointer-events:none;z-index:0}
html[data-theme="dark"] .wmap::before{background:radial-gradient(60% 60% at 50% 50%,rgba(11,99,230,.18),rgba(11,11,13,0) 72%)}
@media (max-width:639.9px){.dkinds{gap:5px}.dkinds button{font-size:12px;padding:7px 10px}}
/* --- the routing panel flexes --- */
.rl-srcs li[data-src="qm"]{grid-column:1/-1}
.rl-srcs li b{overflow:hidden;text-overflow:ellipsis}
@media (min-width:960px){.rl-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,.9fr);gap:22px clamp(18px,3vw,56px)}}
@media (max-width:1279.9px){.rl-cells li i{display:none}.rl-cells li{min-height:auto}.rl-stages li i{display:none}}
/* ============================================================
   PASS 17 (2026-09-13): intuitive pass.
   ============================================================ */
/* routing: faster to read */
.rl-say{margin:12px 0 0;min-height:1.4em;font-size:13.5px;color:#7fc4ff;letter-spacing:-.005em}
.rl-say:empty::before{content:"\00a0"}
.rl-cells li i{display:none}
.rl-cells li.on i{display:block}
.rl-cells li{min-height:auto;padding:9px 10px}
.rl-qt{font-size:17px;line-height:1.4}
.rl-stages li i{display:none}
.rl-stages li.on i{display:block}
/* map: legible labels, the active kind named on the map */
.wmap-pt{font-size:12.5px;font-weight:600;padding:4px 9px 4px 18px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.08);color:var(--ink);box-shadow:0 4px 14px -8px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.wmap-pt::before{left:6px}
.wmap-pt.l{padding:4px 18px 4px 9px}
.wmap-pt.l::before{left:auto;right:6px}
.wmap-pt i{font-weight:500;color:var(--ink-2)}
html[data-theme="dark"] .wmap-pt{background:rgba(11,11,13,.82);border-color:rgba(255,255,255,.12);color:#f5f5f7}
html[data-theme="dark"] .wmap-pt i{color:#a1a1a6}
.wmap-kind{position:absolute;left:0;top:0;margin:0;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);padding:7px 12px 7px 10px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.08);z-index:2;pointer-events:none;transition:opacity .3s}
.wmap-kind i{width:9px;height:9px;border-radius:50%;background:var(--kc,#0b63e6);box-shadow:0 0 0 3px color-mix(in srgb,var(--kc,#0b63e6) 22%,transparent)}
.wmap-kind span:empty{display:none}
html[data-theme="dark"] .wmap-kind{background:rgba(11,11,13,.82);border-color:rgba(255,255,255,.12);color:#f5f5f7}
@media (max-width:1279.9px){.wmap-pt[data-city="fra"]{display:none}}
@media (max-width:639.9px){.wmap-pt{font-size:10.5px;padding:3px 7px 3px 15px}.wmap-pt.l{padding:3px 15px 3px 7px}.wmap-kind{font-size:12px;padding:6px 10px 6px 9px}}
/* devices: the film responds to the pointer */
.dev-stage .devvid{transform-style:preserve-3d;will-change:transform;transition:transform .2s ease-out}
/* ============================================================
   PASS 18 (2026-09-13): the legibility pass.
   ============================================================ */
/* map: the legend names the kind and says what it is; a bar shows the walk; kinds wipe in */
.wmap-kind{text-align:start;align-items:flex-start;gap:9px;padding:9px 14px 11px 12px;border-radius:14px;max-width:min(320px,68%);box-shadow:0 8px 24px -14px rgba(0,0,0,.3);overflow:hidden}
.wmap-kind i{flex:none;margin-top:4px}
.wmap-kind span{display:flex;flex-direction:column;gap:2px;min-width:0}
.wmap-kind b{font-weight:600;font-size:13.5px;line-height:1.2}
.wmap-kind em{font-style:normal;font-weight:400;font-size:12px;line-height:1.3;color:var(--ink-2)}
.wmap-kind em:empty{display:none}
.wmap-kind::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--kc,#0b63e6);transform-origin:left;transform:scaleX(0);opacity:.85}
.wmap-kind.run::after{animation:wkBar 4.6s linear forwards}
@keyframes wkBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.wmap-kind.swap span{animation:wkSwap .38s cubic-bezier(.22,.9,.24,1)}
@keyframes wkSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html[data-theme="dark"] .wmap-kind em{color:#a1a1a6}
@media (max-width:639.9px){
  .wmap-kind{padding:6px 10px 8px 9px;border-radius:10px;max-width:60%}.wmap-kind em{display:none}.wmap-kind b{font-size:12px}.wmap-kind i{margin-top:2px}
  .wmap-pt[data-city="nyc"]{transform:translate(calc(-100% + 4px),-50%);padding:3px 15px 3px 7px;text-align:right}
  .wmap-pt[data-city="nyc"]::before{left:auto;right:6px}
  .wmap-pt.l[data-city="lon"],.wmap-pt.l[data-city="tyo"]{transform:translate(-4px,-50%);padding:3px 7px 3px 15px;text-align:left}
  .wmap-pt.l[data-city="lon"]::before,.wmap-pt.l[data-city="tyo"]::before{left:6px;right:auto}
}
@media (prefers-reduced-motion:reduce){.wmap-kind::after,.wmap-kind.swap span{animation:none}}
/* routing: one height per tile, the gloss lives in the narration, the stage card never jumps */
.rl-cells{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.rl-cells li{padding:9px 11px;min-height:0}
.rl-cells li b{font-size:12px;line-height:1.25}
.rl-cells li i,.rl-cells li.on i{display:none}
.rl-stages li i,.rl-stages li.on i{display:block;visibility:hidden;min-height:2.6em}
.rl-stages li.on i{visibility:visible}
@media (max-width:1099.9px){.rl-stages li i,.rl-stages li.on i{display:none}}
@media (max-width:599.9px){.rl-cells{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rl-say{font-size:14px;min-height:1.45em}
/* devices: the device names take turns; dark mode loses the stray chip boxes */
.dev-chips span{transition:color .4s ease}
html[data-theme="dark"] p.dev-chips span{border:0;background:transparent}
@keyframes devChip{0%,13%{color:var(--ink)}18%,100%{color:var(--ink-2)}}
@media (prefers-reduced-motion:no-preference){
  .dev-chips span{animation:devChip 9s linear infinite}
  .dev-chips span:nth-child(2){animation-delay:1.5s}.dev-chips span:nth-child(3){animation-delay:3s}.dev-chips span:nth-child(4){animation-delay:4.5s}.dev-chips span:nth-child(5){animation-delay:6s}.dev-chips span:nth-child(6){animation-delay:7.5s}
}
/* ============================================================
   PASS 19 (2026-09-13): the hero pulls.
   ============================================================ */
.hero{padding-top:clamp(96px,11vh,132px)}
.hero-brand{margin:0 0 18px;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.hero-brand .ln{display:inline-flex;align-items:center;gap:9px}
.hero-brand img{width:24px;height:24px;border-radius:7px;box-shadow:0 4px 12px rgba(11,99,230,.22)}
.hero h1{font-size:clamp(40px,6.3vw,88px);line-height:1.02;letter-spacing:-.032em;max-width:11.2em;margin-left:auto;margin-right:auto}
.hero h1 b{color:var(--color-accent);font-weight:700;display:inline-block}
.hero-sub.hero-kinds{margin-top:22px;max-width:62ch;font-size:clamp(17px,1.35vw,20px)}
@media (min-width:900px){.hero-sub.hero-kinds{max-width:none}}
.hk{display:inline-grid;vertical-align:bottom;overflow:hidden;line-height:1.5;transition:width .5s cubic-bezier(.22,.9,.24,1)}
.hk b{grid-area:1/1;justify-self:start;white-space:nowrap;font-weight:600;color:var(--ink);transition:transform .5s cubic-bezier(.22,.9,.24,1),opacity .35s ease}
.hk b.pre{transform:translateY(100%);opacity:0;transition:none}
.hk b.out{transform:translateY(-100%);opacity:0}
/* the window */
.hero-desk{margin-top:clamp(36px,5vh,56px);padding-bottom:clamp(28px,5vh,64px)}
.desk-stage{position:relative;perspective:1600px;perspective-origin:50% 0}
.desk-stage::before{content:"";position:absolute;left:50%;top:14%;width:118%;height:112%;transform:translateX(-50%);background:radial-gradient(52% 48% at 50% 46%,rgba(11,99,230,.14),rgba(40,208,245,.06) 52%,rgba(255,255,255,0) 74%);z-index:0;pointer-events:none}
.desk-frame{position:relative;z-index:1;transform-origin:50% 100%;will-change:transform;border:1px solid rgba(255,255,255,.06);box-shadow:0 50px 100px -50px rgba(11,99,230,.38),0 30px 60px -30px rgba(0,0,0,.45)}
.js .desk-frame,.js .hero.in .desk-frame{opacity:1;transition:none;transform:rotateX(calc(var(--tilt,0deg) + var(--px,0deg))) rotateY(var(--py,0deg)) scale(var(--dscale,1))}
.js .desk-stage{opacity:0;transform:translateY(44px)}
.js .hero.in .desk-stage{opacity:1;transform:none;transition:opacity .8s ease-out .15s,transform 1s cubic-bezier(.22,.9,.24,1) .15s}
.js .hero .dk{opacity:0;transform:translateY(14px)}
.js .hero.in .dk{opacity:1;transform:none;transition:opacity .6s ease-out,transform .7s cubic-bezier(.22,.9,.24,1);transition-delay:calc(.45s + var(--k,0)*.1s)}
.desk-floor{display:block;position:absolute;left:8%;right:8%;bottom:-22px;height:46px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(11,99,230,.24),rgba(11,99,230,0) 70%);z-index:0;pointer-events:none}
.desk-bar{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;background:#15181d;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.55);font-size:11.5px;letter-spacing:.01em;white-space:nowrap}
.db-dots{display:inline-flex;gap:6px}
.db-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.db-url{margin-left:8px;font-family:var(--mono);background:rgba(255,255,255,.06);padding:4px 12px;border-radius:999px}
.db-clocks{margin-left:auto;display:inline-flex;gap:16px;font-variant-numeric:tabular-nums}
.db-clocks span{display:inline-flex;gap:6px;align-items:baseline}
.db-clocks b{font-weight:500;color:rgba(255,255,255,.6)}
.db-clocks i{font-style:normal;color:#fff;font-weight:600}
.db-live{display:inline-flex;align-items:center;gap:6px;margin-left:16px;color:#28d0f5;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.db-live i{width:7px;height:7px;border-radius:50%;background:#28d0f5;animation:dbPulse 2.2s ease-out infinite}
@keyframes dbPulse{0%{box-shadow:0 0 0 0 rgba(40,208,245,.5)}70%{box-shadow:0 0 0 7px rgba(40,208,245,0)}100%{box-shadow:0 0 0 0 rgba(40,208,245,0)}}
/* the tiles open the tour */
.dk>img,.dk>video{transition:transform .6s cubic-bezier(.22,.9,.24,1)}
.dk:hover>img,.dk:hover>video{transform:scale(1.03)}
.dk .dk-t{transition:opacity .25s ease}
.dk:hover .dk-t,.dk:focus-within .dk-t{opacity:0}
.dk-open{position:absolute;inset:0;z-index:2;color:inherit;text-decoration:none}
.dk-open:focus-visible{outline:2px solid #28d0f5;outline-offset:-3px;border-radius:4px}
.dk-chip{position:absolute;left:12px;bottom:10px;display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:999px;background:#fff;color:#0b0b0d;font-size:12.5px;font-weight:600;line-height:1;box-shadow:0 8px 24px -8px rgba(0,0,0,.6);opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .3s cubic-bezier(.22,.9,.24,1);white-space:nowrap}
.dk-chip i{font-style:normal;font-weight:500;color:#6e6e73}
.dk-open:hover .dk-chip,.dk-open:focus-visible .dk-chip{opacity:1;transform:none}
@media (hover:none){.dk-chip{opacity:0!important;transform:none!important;pointer-events:none}.dk:hover .dk-t{opacity:1}}
html[data-theme="dark"] .desk-stage::before{background:radial-gradient(52% 48% at 50% 46%,rgba(11,99,230,.24),rgba(40,208,245,.08) 52%,rgba(11,11,13,0) 74%)}
html[data-theme="dark"] .desk-floor{background:radial-gradient(50% 50% at 50% 50%,rgba(40,208,245,.2),rgba(40,208,245,0) 70%)}
html[data-theme="dark"] .desk-frame{border-color:rgba(255,255,255,.1)}
@media (min-width:1200px) and (max-height:919.9px){.hero{padding-top:min(10vh,104px)}.hero h1{font-size:min(6.3vw,9.4vh)}.hero-desk{margin-top:32px}}
@media (max-width:767.9px){
  .hero{padding-top:clamp(126px,17vh,150px)}
  .hero-brand{margin-bottom:14px;font-size:13px}
  .hero h1{font-size:clamp(38px,10.4vw,64px);max-width:none}
  .hero-sub.hero-kinds{font-size:16px;margin-top:16px}
  .hero-desk{margin-top:32px}
  .desk-bar{height:32px;padding:0 12px;font-size:11px}
  .db-clocks{gap:12px}.db-clocks span:nth-child(n+3){display:none}
  .db-live{margin-left:12px}
}
@media (max-width:479.9px){.db-url{display:none}.db-clocks span:nth-child(n+2){display:none}}
@media (prefers-reduced-motion:reduce){.db-live i{animation:none}.hk,.hk b{transition:none}}
/* the kinds rail: dark text on the light kind colours, white only on the blue */
.dkinds button.on{color:#0b0b0d}
.dkinds button.on[data-c="#0b63e6"]{color:#fff}
html[data-theme="dark"] .dkinds button.on{color:#0b0b0d}
html[data-theme="dark"] .dkinds button.on[data-c="#0b63e6"]{color:#fff}
/* ============================================================
   PASS 20 (2026-09-13): works everywhere.
   ============================================================ */
/* routing: nothing crosses anything */
.rl-box{padding:14px 16px 12px;background:#06080c;border:1px solid rgba(40,208,245,.28);border-radius:18px;box-shadow:0 30px 60px -30px rgba(40,208,245,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.rl-stages{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.rl-say{margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.rl-eng .rl-lab span{display:none}
@media (min-width:960px){
  .rl-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.78fr) minmax(0,.9fr)}
  .rl-cells{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
  .rl-cells li b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rl-srcs{grid-template-columns:1fr;gap:6px}
}
@media (min-width:960px) and (max-width:1279.9px){.rl-cells{gap:8px 20px}.rl-cells li b{font-size:11.5px;white-space:normal;overflow:visible;text-overflow:clip}}
/* map: the places each kind lives, no grid */
.wmap-pt{transition:opacity .35s ease}
.wmap-pt.dim{opacity:0}
.wmap-pt.hot::before{background:var(--kc,#0b63e6);box-shadow:0 0 0 3px color-mix(in srgb,var(--kc,#0b63e6) 24%,transparent),0 0 0 1.5px #fff inset}
.wmap-hs{position:absolute;left:var(--x);top:var(--y);transform:translate(-4px,-50%);z-index:1;padding:4px 9px 4px 18px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid rgba(0,0,0,.08);color:var(--ink);font-size:12px;font-weight:600;line-height:1.15;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .35s ease;box-shadow:0 4px 14px -8px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.wmap-hs::before{content:"";position:absolute;left:6px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--kc,#0b63e6);box-shadow:0 0 0 3px color-mix(in srgb,var(--kc,#0b63e6) 24%,transparent),0 0 0 1.5px #fff inset}
.wmap-hs.l{transform:translate(calc(-100% + 4px),-50%);padding:4px 18px 4px 9px}
.wmap-hs.l::before{left:auto;right:6px}
.wmap-hs.on{opacity:1}
.wmap-hs b{font-weight:600}
html[data-theme="dark"] .wmap-hs{background:rgba(11,11,13,.85);border-color:rgba(255,255,255,.12);color:#f5f5f7}
html[data-theme="dark"] .wmap-hs::before,html[data-theme="dark"] .wmap-pt.hot::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--kc,#0b63e6) 30%,transparent),0 0 0 1.5px #0b0b0d inset}
@media (max-width:639.9px){.wmap-hs{display:none}.wmap-pt.dim{opacity:1}}
/* ============================================================
   PASS 21 (2026-09-14): the map gets creative.
   ============================================================ */
.wmap{max-width:1400px;margin-top:44px}
#coverage .heading b{display:inline-block}
/* labels: type, not boxes */
.wmap-pt,.wmap-hs{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 0 0 15px;border-radius:0;text-shadow:0 0 3px #fff,0 0 8px #fff,0 0 14px #fff,0 0 20px #fff}
.wmap-pt.l,.wmap-hs.l{padding:0 15px 0 0}
.wmap-pt b,.wmap-hs b{font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.wmap-pt i{font-size:10.5px;margin-top:0}
.wmap-pt::before,.wmap-hs::before{left:2px}
.wmap-pt.l::before,.wmap-hs.l::before{left:auto;right:2px}
html[data-theme="dark"] .wmap-pt,html[data-theme="dark"] .wmap-hs{background:transparent;border:0;text-shadow:0 0 3px #0b0b0d,0 0 8px #0b0b0d,0 0 14px #0b0b0d,0 0 20px #0b0b0d}
.wmap-kind{background:transparent;border:0;box-shadow:none;padding:2px 0 10px;border-radius:0;max-width:min(360px,60%);overflow:visible;text-shadow:0 0 3px #fff,0 0 8px #fff,0 0 14px #fff}
.wmap-kind i{margin-top:5px}
.wmap-kind b{font-size:16px;letter-spacing:-.01em}
.wmap-kind em{font-size:12.5px;margin-top:1px}
.wmap-kind::after{bottom:2px;height:2px;border-radius:2px;opacity:.9}
html[data-theme="dark"] .wmap-kind{background:transparent;border:0;text-shadow:0 0 3px #0b0b0d,0 0 8px #0b0b0d,0 0 14px #0b0b0d}
@media (max-width:639.9px){.wmap-kind{padding:0 0 8px;max-width:60%}.wmap-kind b{font-size:13px}.wmap-pt{padding:0 0 0 13px}.wmap-pt.l{padding:0 13px 0 0}}
/* ============================================================
   PASS 22 (2026-09-14): the map gets real.
   ============================================================ */
.wmap-arcs{display:none}
/* ============================================================
   PASS 23 (2026-09-14): flows that make sense; the routing layer in depth.
   ============================================================ */
.rl-cells li{position:relative;overflow:hidden}
.rl-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06);display:block}
.rl-bar em{display:block;height:100%;width:0;background:rgba(40,208,245,.75);transition:width .6s cubic-bezier(.22,.9,.24,1)}
.rl-cells li.on .rl-bar em{background:#28d0f5}
.rl-cells li.learn{box-shadow:0 0 0 1px #28d0f5,0 12px 30px -12px rgba(40,208,245,.6)}
.rl-qt .w{color:rgba(255,255,255,.42);transition:color .25s ease}
.rl-qt .w.hi{color:#fff}
.rl-pk{fill:#28d0f5;filter:drop-shadow(0 0 6px rgba(40,208,245,.9))}
.rl-ansline{margin:8px 0 0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.88);min-height:3.9em}
.rl-srcs li{position:relative}
.rl-srcs li.on::after{content:"";position:absolute;right:9px;top:50%;width:5px;height:9px;border:solid #28d0f5;border-width:0 2px 2px 0;transform:translateY(-62%) rotate(45deg)}
.rl-srcs li[data-src="qm"].on::after{right:12px}
/* ============================================================
   PASS 24 (2026-09-14): built out. The kind is a title that flips; a calmer earth.
   ============================================================ */
.wmap-kind{position:relative;display:flex;flex-direction:column;align-items:center;margin:34px auto 0;padding:0 0 14px;max-width:none;text-align:center;text-shadow:none;overflow:visible;pointer-events:none}
.wmap-kind i{display:none}
.wmap-kind span{display:flex;flex-direction:column;align-items:center;gap:8px;perspective:700px}
.wmap-kind b{display:inline-flex;align-items:center;gap:14px;font-size:clamp(30px,3.9vw,50px);font-weight:700;letter-spacing:-.025em;line-height:1.05;color:var(--ink);transform-style:preserve-3d;backface-visibility:hidden}
.wmap-kind b::before{content:"";width:.32em;height:.32em;border-radius:50%;background:var(--kc,#0b63e6);box-shadow:0 0 0 .14em color-mix(in srgb,var(--kc,#0b63e6) 22%,transparent);transition:background .4s ease,box-shadow .4s ease}
.wmap-kind em{font-style:normal;font-size:clamp(15px,1.25vw,17px);color:var(--ink-2);line-height:1.4;margin:0}
.wmap-kind::after{left:50%;bottom:0;width:120px;height:2px;border-radius:2px;transform:translateX(-50%) scaleX(0);transform-origin:50% 50%;opacity:.9}
.wmap-kind.run::after{animation:wkBar2 4.6s linear forwards}
@keyframes wkBar2{from{transform:translateX(-50%) scaleX(0)}to{transform:translateX(-50%) scaleX(1)}}
.wmap-kind.swap span{animation:none}
.wmap-kind.swap b{animation:wkFlip .56s cubic-bezier(.4,0,.2,1)}
.wmap-kind.swap em{animation:wkFade .56s ease}
@keyframes wkFlip{0%{transform:rotateX(0)}48%{transform:rotateX(-90deg);opacity:.15}52%{transform:rotateX(90deg);opacity:.15}100%{transform:rotateX(0);opacity:1}}
@keyframes wkFade{0%{opacity:1}45%{opacity:0}55%{opacity:0}100%{opacity:1}}
.wmap{margin-top:26px}
html[data-theme="dark"] .wmap-kind{text-shadow:none}
@media (max-width:639.9px){.wmap-kind{margin-top:26px;padding-bottom:12px}.wmap-kind b{font-size:26px;gap:10px}.wmap-kind em{display:block;font-size:14px}}
@media (prefers-reduced-motion:reduce){.wmap-kind.swap b,.wmap-kind.swap em{animation:none}}
/* ============================================================
   PASS 25 (2026-09-14): emoji where they read best; the cities listed.
   ============================================================ */
.wmap-pt.sec{font-size:11px;font-weight:500;color:var(--ink-2);padding:0 0 0 12px}
.wmap-pt.sec.l{padding:0 12px 0 0}
.wmap-pt.sec i{display:none}
.wmap-pt.sec::before{width:5px;height:5px;margin-top:-2.5px;left:3px;background:var(--ink-3);box-shadow:none}
.wmap-pt.sec.l::before{left:auto;right:3px}
.wmap-pt.dim{opacity:.42}
.wmap-pt.sec.hot{font-weight:600;color:var(--ink);opacity:1}
.wmap-pt.sec.hot::before{background:var(--kc,#0b63e6);box-shadow:0 0 0 2px color-mix(in srgb,var(--kc,#0b63e6) 24%,transparent)}
html[data-theme="dark"] .wmap-pt.sec{color:#a1a1a6}
html[data-theme="dark"] .wmap-pt.sec.hot{color:#f5f5f7}
@media (max-width:1099.9px){.wmap-pt.sec{display:none}}
@media (max-width:639.9px){.wmap-pt.dim{opacity:1}}
/* ============================================================
   PASS 26 (2026-09-14): the routing layer in more depth; one idea per scene.
   ============================================================ */
.rl-qt .w.key{color:#28d0f5;text-decoration:underline;text-decoration-color:rgba(40,208,245,.55);text-decoration-thickness:1.5px;text-underline-offset:3px}
.rl-dots{position:absolute;right:10px;top:9px;display:flex;gap:3px}
.rl-dots u{display:block;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.18);text-decoration:none;transition:background .18s ease,box-shadow .18s ease}
.rl-dots u.lit{background:#28d0f5;box-shadow:0 0 6px rgba(40,208,245,.9)}
.rl-score{position:absolute;right:10px;bottom:7px;font-style:normal;font-size:10.5px;line-height:1;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.rl-score:empty{display:none}
.rl-cells li.on .rl-score,.rl-cells li.learn .rl-score{color:#28d0f5}
@media (min-width:960px){.rl-cells li{min-height:44px;padding:8px 46px 8px 11px;display:flex;align-items:center}.rl-cells li b{padding-right:0;white-space:normal;overflow:visible;text-overflow:clip;font-size:12px;line-height:1.2}}
@media (max-width:959.9px){.rl-dots,.rl-score{display:none}}
.rl-svg path.f{stroke:#7fe3ff;stroke-width:2;stroke-linecap:round;stroke-dasharray:.02 .06;opacity:0;transition:opacity .3s ease}
.rl-svg path.f.draw{opacity:.95}
@media (prefers-reduced-motion:no-preference){.rl-svg path.f.draw{animation:rlFlow 1.1s linear infinite}}
@keyframes rlFlow{from{stroke-dashoffset:.08}to{stroke-dashoffset:0}}
/* ============================================================
   PASS 28 (2026-09-15): "in nine languages" flips through the languages.
   ============================================================ */
#coverage .heading .ln{perspective:700px}
#coverage .heading b{display:inline-block;unicode-bidi:isolate;transform-style:preserve-3d;backface-visibility:hidden;vertical-align:baseline}
#coverage .heading b.flip{animation:lwFlip .52s cubic-bezier(.4,0,.2,1)}
@keyframes lwFlip{0%{transform:rotateX(0)}48%{transform:rotateX(-90deg);opacity:.15}52%{transform:rotateX(90deg);opacity:.15}100%{transform:rotateX(0);opacity:1}}
#coverage .heading b[lang="ja"]{letter-spacing:0}
@media (prefers-reduced-motion:reduce){#coverage .heading b.flip{animation:none}}
/* ============================================================
   PASS 29 (2026-09-15): the phone and the iPad. Strips and carousels where stacks ran long.
   ============================================================ */
/* the module index: a three-row strip you swipe; a search collapses it to the matches */
@media (max-width:1023.9px){
  .board-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);grid-template-columns:none;grid-auto-columns:132px;gap:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 28px 8px 0;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
  .board-grid::-webkit-scrollbar{display:none}
  .bt{scroll-snap-align:start}
  .board.searching .board-grid{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;padding:2px 0 4px;-webkit-mask-image:none;mask-image:none}
  .board.searching .bt:not(.hit){display:none}
  .board.searching .bt.hit{opacity:1;transform:none;transition-delay:0s}
}
@media (max-width:399.9px){.board.searching .board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the routing layer: the engine bank and the sources are strips; the route scrolls them */
@media (max-width:959.9px){
  .rl-cells{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-template-columns:none;grid-auto-columns:max-content;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:2px 32px 6px 0;-webkit-mask-image:linear-gradient(90deg,#000 93%,transparent);mask-image:linear-gradient(90deg,#000 93%,transparent)}
  .rl-cells::-webkit-scrollbar{display:none}
  .rl-cells li{min-width:150px;padding:9px 12px;min-height:0}
  .rl-cells li b{white-space:nowrap;font-size:12px}
  .rl-srcs{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:max-content;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:2px 32px 6px 0;-webkit-mask-image:linear-gradient(90deg,#000 93%,transparent);mask-image:linear-gradient(90deg,#000 93%,transparent)}
  .rl-srcs::-webkit-scrollbar{display:none}
  .rl-srcs li{min-width:112px;padding:0 26px 0 14px}
  .rl-srcs li[data-src="qm"]{grid-column:auto}
  .rl-srcs li.on{transform:none}
  .rl-grid{gap:16px}
}
/* pricing: a carousel opened on Professional, with dots */
.tier-dots{display:none;justify-content:center;gap:7px;margin:12px 0 0}
.tier-dots i{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.16);transition:background .3s ease,transform .3s ease}
.tier-dots i.on{background:var(--color-accent);transform:scale(1.25)}
html[data-theme="dark"] .tier-dots i{background:rgba(255,255,255,.2)}
html[data-theme="dark"] .tier-dots i.on{background:#28d0f5}
@media (max-width:899.9px){
  .tiers{display:flex;grid-template-columns:none;max-width:none;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative;margin-left:calc(-1*var(--pad-x));margin-right:calc(-1*var(--pad-x));padding:10px var(--pad-x) 14px;-webkit-overflow-scrolling:touch}
  .tiers::-webkit-scrollbar{display:none}
  .tier{flex:0 0 min(84vw,400px);scroll-snap-align:center;max-width:none}
  .tier-dots{display:flex}
}
/* awards: a swipe row of columns, no boxes */
/* ============================================================
   PASS 30 (2026-09-15): one module per box; the finale carries the devices.
   ============================================================ */
/* the hero desk: a ticker across the top, five single modules */
.desk-grid{grid-template-columns:repeat(12,1fr);grid-template-rows:.36fr 2.25fr 2.25fr;grid-template-areas:"t t t t t t t t t t t t" "cha cha cha cha cha tv tv tv tv etf etf etf" "cha cha cha cha cha fox fox fox fox ta ta ta";aspect-ratio:12/4.86}
.dk-tape{grid-area:t;position:relative;overflow:hidden;background:#111318;min-height:0}
.dk-tape>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
.dk-cha{grid-area:cha}.dk-tv{grid-area:tv}.dk-etf{grid-area:etf}.dk-fox{grid-area:fox}.dk-ta{grid-area:ta}
.dk>video{object-position:center center}
/* the bento: the ticker row sits above every arrangement */
.modbento{grid-template-rows:.3fr 1.875fr 1.875fr 1.423fr 2.525fr;grid-template-areas:"t t t t t t t t t t t t" "desk desk desk desk desk desk desk desk live live live live" "desk desk desk desk desk desk desk desk news news news news" "scr scr scr sec sec sec cha cha cha gov gov gov" "ask ask ask ask ask ask dru dru dru dru dru dru";aspect-ratio:1.2534}
.mod-tape{grid-area:t;position:relative;overflow:hidden;background:#0f1116;min-height:0}
.mod-tape .mod-v{object-position:left center}
@media (max-width:767.9px){.modbento{grid-template-rows:.28fr 1.9fr 1fr 1fr 1fr 1fr;grid-template-areas:"t t t t t t" "desk desk desk desk desk desk" "live live live ask ask ask" "news news news sec sec sec" "scr scr scr cha cha cha" "gov gov gov dru dru dru";aspect-ratio:.592}}
/* the finale: the devices under the numbers */
.join-dev{margin-top:clamp(64px,9vh,96px)}
.join-dev .heading-sm{margin:0;font-size:clamp(22px,2.4vw,32px);line-height:1.15;letter-spacing:-.02em;font-weight:700;color:var(--ink)}
.join-dev .heading-sm b{color:var(--color-accent);font-weight:700}
#join .join-dev .sub{margin:14px auto 0;max-width:46ch}
.join-dev .dev-chips{margin-top:26px}
@media (max-width:767.9px){.join-dev{margin-top:52px}}
/* ============================================================
   PASS 31 (2026-09-15): a third row on the desk; the settings widget; a tighter finale.
   ============================================================ */
.desk-grid{grid-template-rows:.36fr 2.25fr 2.25fr 2.6fr;grid-template-areas:"t t t t t t t t t t t t" "cha cha cha cha cha tv tv tv tv etf etf etf" "cha cha cha cha cha fox fox fox fox ta ta ta" "sch sch sch sch chat chat chat chat nx nx nx nx";aspect-ratio:12/7.46}
.dk-sch{grid-area:sch}.dk-chat{grid-area:chat}.dk-nx{grid-area:nx}
/* the bento answers the settings widget */
.modbento{--dk-accent:#28d0f5;transition:background-color .45s ease,border-color .45s ease,gap .4s ease,padding .4s ease}
.modbento .mod.in-desk{outline:2px solid var(--dk-accent);outline-offset:-2px;transition:outline-color .45s ease}
.modbento .mod-dot{background:var(--dk-accent)}
.modbento[data-density="0"]{gap:1px;padding:1px}
.modbento[data-density="2"]{gap:5px;padding:5px}
.modbento[data-size="1"] .mod-t{font-size:16px}
.modbento[data-size="1"] .in-desk .mod-t{font-size:clamp(18px,1.6vw,22px)}
.modbento[data-size="2"] .mod-t{font-size:18px}
.modbento[data-size="2"] .in-desk .mod-t{font-size:clamp(20px,1.8vw,24px)}
.modbento[data-look="light"]{background:#e6e9ef;border-color:rgba(0,0,0,.12)}
.modbento[data-look="light"] .mod{background:#eef0f4}
/* the widget itself, scaled to its box */
.st{position:absolute;inset:0;padding:.6em .7em 34px;display:flex;flex-direction:column;gap:.5em;font-size:calc(clamp(8px,2.7cqw,14px)*var(--st-scale,1));line-height:1.2;color:#f5f5f7;background:#0b0d12;transition:background-color .45s ease,color .45s ease,gap .4s ease;overflow:hidden}
.modbento[data-size="1"]{--st-scale:1.12}
.modbento[data-size="2"]{--st-scale:1.25}
.modbento[data-density="0"] .st{gap:.25em}
.modbento[data-density="2"] .st{gap:.8em}
.st-h{margin:0 0 .25em;font-size:1.25em;font-weight:600;letter-spacing:-.01em}
.st-row{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.5em 0 0;border-top:1px solid rgba(255,255,255,.08);transition:padding .4s ease,border-color .45s ease}
.modbento[data-density="0"] .st-row{padding-top:.3em}
.modbento[data-density="2"] .st-row{padding-top:.8em}
.st-k{font-weight:500;color:rgba(255,255,255,.72);white-space:nowrap}
.st-v{display:flex;gap:.9em;align-items:center;white-space:nowrap}
.st-rad button{position:relative;font-weight:400;color:rgba(255,255,255,.5);padding-left:1.35em;transition:color .3s ease}
.st-rad button::before{content:"";position:absolute;left:0;top:50%;width:.85em;height:.85em;margin-top:-.45em;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);transition:border-color .3s ease,box-shadow .3s ease}
.st-rad button.on{color:#fff}
.st-rad button.on::before{border-color:var(--dk-accent);box-shadow:inset 0 0 0 .22em var(--dk-accent)}
.st-seg{gap:0;border:1px solid rgba(255,255,255,.14);border-radius:.5em;overflow:hidden}
.st-seg button{font-weight:500;padding:.35em .9em;color:rgba(255,255,255,.55);transition:background-color .3s ease,color .3s ease}
.st-seg button.on{background:rgba(255,255,255,.1);color:var(--dk-accent)}
.st-sw{gap:.55em}
.st-sw button{width:1.15em;height:1.15em;border-radius:50%;background:var(--c);transition:transform .3s ease,box-shadow .3s ease}
.st-sw button.on{transform:scale(1.15);box-shadow:0 0 0 .18em #0b0d12,0 0 0 .3em var(--c)}
.modbento[data-look="light"] .st{background:#f5f5f7;color:#0b0b0d}
.modbento[data-look="light"] .st-k{color:rgba(0,0,0,.66)}
.modbento[data-look="light"] .st-row{border-top-color:rgba(0,0,0,.08)}
.modbento[data-look="light"] .st-rad button{color:rgba(0,0,0,.5)}
.modbento[data-look="light"] .st-rad button.on{color:#0b0b0d}
.modbento[data-look="light"] .st-rad button::before{border-color:rgba(0,0,0,.3)}
.modbento[data-look="light"] .st-seg{border-color:rgba(0,0,0,.14)}
.modbento[data-look="light"] .st-seg button{color:rgba(0,0,0,.55)}
.modbento[data-look="light"] .st-seg button.on{background:rgba(0,0,0,.06)}
.modbento[data-look="light"] .st-sw button.on{box-shadow:0 0 0 .18em #f5f5f7,0 0 0 .3em var(--c)}
@media (prefers-reduced-motion:reduce){.modbento,.st,.st-row,.st-rad button,.st-seg button,.st-sw button{transition:none}}
/* the finale, tighter */
.join-kicker{margin:0 0 16px;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.join-dev{margin-top:clamp(44px,6vh,64px)}
@media (max-width:767.9px){.join-dev{margin-top:40px}}
/* ============================================================
   PASS 32 (2026-09-17): the professional pass.
   ============================================================ */
/* hero: the changing word is a line of its own, the sentence under it is neutral */
.hero-word{margin:clamp(8px,1.2vh,14px) auto 0;font-size:clamp(30px,3.5vw,50px);line-height:1.14;letter-spacing:-.025em;font-weight:700;color:var(--ink)}
.hero-word .hk{display:grid;justify-items:center;width:auto!important;overflow:hidden;line-height:1.14;padding-bottom:.1em;vertical-align:baseline}
.hero-word .hk b{justify-self:center;font-weight:700}
.hero-sub.hero-kinds{margin-top:6px;font-size:clamp(15px,1.15vw,17px);color:var(--ink-2)}
.hero-cta{margin-top:26px}
.hero-desk{margin-top:clamp(26px,3.6vh,40px)}
@media (max-width:767.9px){.hero-word{font-size:clamp(28px,8.4vw,36px);margin-top:12px}.hero-sub.hero-kinds{font-size:15px;margin-top:6px}.hero-cta{margin-top:22px}}
/* the desk switches on: frame, bar, tape, then each screen opens from its centre */
.desk-frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.09) 50%,rgba(255,255,255,0) 58%);transform:translateX(-120%)}
.js .hero.in .desk-frame::after{transform:translateX(120%);transition:transform 1.5s cubic-bezier(.4,0,.2,1) 1.3s}
@media (min-width:768px){
  .js .desk-stage{opacity:0;transform:translateY(36px) scale(.97)}
  .js .hero.in .desk-stage{opacity:1;transform:none;transition:opacity .7s ease-out .1s,transform 1.1s cubic-bezier(.16,1,.3,1) .1s}
  .js .hero .desk-bar>*{opacity:0;transform:translateY(-4px)}
  .js .hero.in .desk-bar>*{opacity:1;transform:none;transition:opacity .5s ease .5s,transform .5s ease .5s}
  .js .hero .dk-tape{clip-path:inset(0 100% 0 0)}
  .js .hero.in .dk-tape{clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.65,0,.35,1) .45s}
  .js .hero .dk{opacity:0;transform:scale(.94);clip-path:inset(46% 46% 46% 46% round 10px)}
  .js .hero.in .dk{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0px);transition:opacity .35s ease-out,transform .8s cubic-bezier(.16,1,.3,1),clip-path .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(.55s + var(--k,0)*.07s)}
  .js .hero.lit .dk,.js .hero.lit .dk-tape{clip-path:none;transition:none}
}
@media (min-width:768px) and (prefers-reduced-motion:reduce){.js .desk-stage,.js .hero .desk-bar>*,.js .hero .dk,.js .hero .dk-tape{opacity:1;transform:none;clip-path:none;transition:none}}
@media (prefers-reduced-motion:reduce){.desk-frame::after{display:none}}
/* a tile changing film: through black, like a channel change */
.dk>video{transition:transform .6s cubic-bezier(.22,.9,.24,1),opacity .3s ease}
.mod .mod-v{transition:opacity .3s ease}
.dk.swap>video,.mod.swap .mod-v{opacity:0}
.dk.swap .dk-t,.mod.swap .mod-t{opacity:0}
/* small screens: the module index keeps one height, glides, and filters in place */
@media (max-width:1023.9px){
  .board-grid{grid-template-rows:repeat(3,minmax(78px,auto));scroll-snap-type:none}
  .board.searching .board-grid{grid-auto-flow:column;grid-template-rows:repeat(3,minmax(78px,auto));grid-template-columns:none;grid-auto-columns:132px;overflow-x:auto;overflow-y:hidden;padding:2px 28px 8px 0}
}
@media (max-width:399.9px){.board.searching .board-grid{grid-template-columns:none}}
@media (max-width:639.9px){
  :root{--gap-section:88px}
  .board-top{gap:10px}
  .board-chips{flex:1 1 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-right:calc(-1*clamp(14px,2.2vw,26px));padding-right:14px}
  .board-chips::-webkit-scrollbar{display:none}
  .board-chips button{flex:0 0 auto}
  .dkinds{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:none;margin-left:calc(-1*var(--pad-x));margin-right:calc(-1*var(--pad-x));padding:2px var(--pad-x) 6px}
  .dkinds::-webkit-scrollbar{display:none}
  .dkinds button{flex:0 0 auto}
}
@media (pointer:coarse){.board-chips button,.dkinds button{min-height:36px}}
/* ============================================================
   PASS 33 (2026-09-17): layouts.
   ============================================================ */
.heading,.heading-sm,.display,.display-xl,.hero h1,.vw-head,.fv-title{text-wrap:balance}
.sub{text-wrap:pretty}
/* ---- phones: one axis. Every fold title, its sub line and its call to action sit on the centre line, the way the
   hero, the coverage fold and the finale already do. Rails, cards and inputs keep their own alignment ---- */
@media (max-width:639.9px){
  main section>.heading,main section>.sub{text-align:center}
  main section>.heading,main section>.sub{margin-left:auto;margin-right:auto}
  #streams>div:not([class]),#proof>div:not([class]){text-align:center}
  #access .bill-toggle{margin-left:auto;margin-right:auto}
  #edu .edu-paths{text-align:center}
  #edu .epath .ghost{justify-self:center}
  #newsletter .edge-ebrow{justify-content:center}
  #edu .epath .etg{margin-left:auto;margin-right:auto}
  #newsletter .edgecopy{text-align:center}
  #newsletter .edgecopy .sub{margin-left:auto;margin-right:auto}
  /* the devices under the finale: three over three, no loose separators */
  .dev-chips,.join-dev .dev-chips{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:12px 28px}
  .dev-chips span{text-align:center}
  .dev-chips span+span::before{content:none}
  /* the last card sits closer to the finale */
  #newsletter{margin-top:32px;padding-top:0}
  #newsletter .edgeshell{margin-top:0}
}
/* ---- hero: three desk layouts, tabs in the bar ---- */
.desk-grid{grid-template-columns:repeat(12,1fr);aspect-ratio:12/7.46}
.desk-grid[data-layout="trading"]{grid-template-rows:.36fr 2.25fr 2.25fr 2.6fr;grid-template-areas:"t t t t t t t t t t t t" "a a a a a b b b b c c c" "a a a a a d d d d e e e" "f f f f f f g g g g g g"}
.desk-grid[data-layout="tv"]{grid-template-rows:.36fr 3.55fr 3.55fr;grid-template-areas:"t t t t t t t t t t t t" "a a a a a a b b b b b b" "c c c c c c d d d d d d"}
.desk-grid[data-layout="world"]{grid-template-rows:.36fr 3.98fr 3.12fr;grid-template-areas:"t t t t t t t t t t t t" "a a a a a a a b b b b b" "c c c c c d d d d d d d"}
.dk[data-slot="a"]{grid-area:a}.dk[data-slot="b"]{grid-area:b}.dk[data-slot="c"]{grid-area:c}.dk[data-slot="d"]{grid-area:d}.dk[data-slot="e"]{grid-area:e}.dk[data-slot="f"]{grid-area:f}.dk[data-slot="g"]{grid-area:g}
.dk[hidden]{display:none}
.db-tabs{display:inline-flex;gap:2px;margin-inline-start:12px;flex:none}
@media (max-width:1279.9px){.db-clocks span:nth-child(n+4){display:none}}
@media (max-width:1099.9px){.db-clocks span:nth-child(n+3){display:none}}
@media (max-width:899.9px){.db-url{display:none}}
.db-tabs button{position:relative;font:inherit;font-size:11.5px;line-height:1;color:rgba(255,255,255,.58);background:transparent;border:0;border-radius:999px;padding:7px 11px;cursor:pointer;transition:color .25s ease,background-color .25s ease}
.db-tabs button:hover{color:#fff}
.db-tabs button.on{color:#fff;background:rgba(255,255,255,.09)}
.db-tabs button:focus-visible{outline:2px solid #28d0f5;outline-offset:1px}
.db-tabs button.on::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:1.5px;border-radius:2px;background:#28d0f5;transform-origin:left;transform:scaleX(0)}
.db-tabs.run button.on::after{animation:dbRun 7.5s linear forwards}
@keyframes dbRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.db-tabs.run button.on::after{animation:none}}
.js .hero.in .desk-grid.out .dk{opacity:0;transform:scale(.965);transition:opacity .2s ease,transform .2s ease;transition-delay:0s}
@media (max-width:767.9px){
  .desk-grid{grid-template-columns:repeat(6,1fr);aspect-ratio:5/8}
  .desk-grid[data-layout="trading"]{grid-template-rows:26px 290fr 98fr 146fr;grid-template-areas:"t t t t t t" "a a a a a a" "b b b d d d" "e e e c c c"}
  .desk-grid[data-layout="trading"] .dk[data-slot="f"],.desk-grid[data-layout="trading"] .dk[data-slot="g"]{display:none}
  .desk-grid[data-layout="tv"]{grid-template-rows:26px 213fr 106fr 213fr;grid-template-areas:"t t t t t t" "a a a a a a" "b b b c c c" "d d d d d d"}
  .desk-grid[data-layout="world"]{grid-template-rows:26px 197fr 140fr 197fr;grid-template-areas:"t t t t t t" "a a a a a a" "b b b c c c" "d d d d d d"}
  .js .hero .dk{opacity:0;transform:translateY(12px)}
  .js .hero.in .dk{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(.3s + var(--k,0)*.06s)}
  .js .hero.in .desk-grid.out .dk{opacity:0;transform:scale(.97);transition:opacity .2s ease,transform .2s ease;transition-delay:0s}
  .dk .dk-t{font-size:11px;left:8px;bottom:7px}
  .dk[data-slot="a"] .dk-t{font-size:13px;left:12px;bottom:10px}
  .db-url,.db-clocks{display:none}
  .db-tabs{margin-inline-start:6px}
  .db-live{margin-left:0;margin-right:0;margin-inline-start:auto}
}
/* a finger gets a taller target than the eye sees */
@media (pointer:coarse){
  .db-tabs button{min-height:34px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
  .db-tabs button::before{content:"";position:absolute;left:-1px;right:-1px;top:-5px;bottom:-5px}
  .db-tabs button.on::after{bottom:6px}
  .desk-bar{height:44px}
  .ei-index button{min-height:40px}
}
/* the narrowest phones, and languages with long tab names: the window dots give way first, then the tab padding */
@media (max-width:379.9px){.db-dots{display:none}.db-tabs{margin-inline-start:0}}
@media (max-width:359.9px){.db-tabs button{padding:7px 8px}}
/* the bar's spacing follows the reading direction */
[dir="rtl"] .db-url{margin-left:0;margin-right:8px}
[dir="rtl"] .db-clocks{margin-left:0;margin-right:auto}
[dir="rtl"] .db-live{margin-left:0;margin-right:16px}
@media (max-width:767.9px){[dir="rtl"] .db-live{margin-right:auto}}
@media (max-width:767.9px) and (prefers-reduced-motion:reduce){.js .hero .dk{opacity:1;transform:none;transition:none}}
.js .hero.lit .dk{clip-path:none;transition:opacity .42s ease,transform .55s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--k,0)*45ms)}
.js .hero.lit .desk-grid.out .dk{opacity:0;transform:scale(.965);transition:opacity .2s ease,transform .2s ease;transition-delay:0s}
@media (prefers-reduced-motion:reduce){.js .hero.lit .dk,.js .hero.lit .desk-grid.out .dk{opacity:1;transform:none;transition:none}}
/* a channel's own lower third is bright: the name of the tile needs more floor under it */
.desk-grid[data-layout="tv"] .dk::after{background:linear-gradient(180deg,rgba(0,0,0,0) 74%,rgba(0,0,0,.82))}
html[data-theme="dark"] .desk-grid[data-layout="tv"] .dk::after{background:linear-gradient(180deg,rgba(0,0,0,0) 74%,rgba(0,0,0,.82))}
/* ---- the ticker tape is type, not a film ---- */
.tp-sprite{position:absolute;width:0;height:0;overflow:hidden}
.tape{display:flex;align-items:center;overflow:hidden;font-size:clamp(10px,.92vw,13px);line-height:1;color:#fff;white-space:nowrap;direction:ltr}
.tape-run{display:inline-flex;align-items:center;flex:none;animation:tapeRun 46s linear infinite;will-change:transform}
.tape.still .tape-run{animation-play-state:paused}
.tp{display:inline-flex;align-items:center;gap:.6em;padding:0 1.3em;border-right:1px solid rgba(255,255,255,.1)}
.tp svg{width:1.55em;height:1.55em;flex:none;display:block}
.tp b{font-weight:600;letter-spacing:-.005em}
.tp u{text-decoration:none;color:#b2b5be;font-variant-numeric:tabular-nums}
.tp u.up{color:#22ab94}
.tp em{font-style:normal;color:#f23645;font-variant-numeric:tabular-nums}
@keyframes tapeRun{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.tape-run{animation:none}}
.modbento[data-look="light"] .tape{background:#eef0f4;color:#0b0b0d}
.modbento[data-look="light"] .tp{border-right-color:rgba(0,0,0,.1)}
.modbento[data-look="light"] .tp u{color:#5d606b}
.modbento[data-look="light"] .tp u.up{color:#0d8f7a}
.modbento[data-look="light"] .tp em{color:#d92c3a}
.modbento[data-size="1"] .tape{font-size:clamp(11px,1.02vw,14.5px)}
.modbento[data-size="2"] .tape{font-size:clamp(12px,1.12vw,16px)}
/* ---- the newsletter fold: a sample issue that reads itself ---- */
.edgeissue{grid-area:media;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;min-width:0}
.ei-index{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.ei-index button{position:relative;font:inherit;font-size:12.5px;line-height:1;padding:8px 8px 8px 14px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;text-align:left;white-space:nowrap;transition:color .25s ease}
.ei-index button::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;border-radius:2px;background:var(--color-accent);transform:translateY(-50%);transition:height .3s cubic-bezier(.16,1,.3,1)}
.ei-index button:hover{color:var(--ink)}
.ei-index button.on{color:var(--ink);font-weight:600}
.ei-index button.on::before{height:14px}
.ei-index button:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px;border-radius:6px}
.ei-frame{border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 34px 70px -34px rgba(11,99,230,.3),0 18px 40px -26px rgba(0,0,0,.28);min-width:0}
.ei-bar{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;background:#f5f5f7;border-bottom:1px solid rgba(0,0,0,.08);font-size:12.5px;color:#1d1d1f;white-space:nowrap}
.ei-bar img{width:20px;height:20px;border-radius:6px;flex:none}
.ei-from{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ei-tag{margin-left:auto;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#6e6e73}
.ei-win{position:relative;height:clamp(380px,40vw,520px);overflow:hidden;background:#fff;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent);mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent)}
.ei-sheet{display:block;width:100%;height:auto;will-change:transform}
html[data-theme="dark"] .ei-frame{border-color:rgba(255,255,255,.14);box-shadow:0 34px 70px -34px rgba(40,208,245,.25)}
@media (min-width:900px){.edgecard{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}}
/* tablets keep the two columns: the fold stays one screen tall and the issue keeps the scale of a page */
@media (min-width:640px) and (max-width:899.9px){
  .edgecard{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy media" "form media";gap:18px 28px;align-items:center}
  .ei-win{height:400px}
}
@media (max-width:899.9px){
  .edgeissue{grid-template-columns:minmax(0,1fr);gap:12px}
  .ei-index{flex-direction:row;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -4px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent)}
  .ei-index::-webkit-scrollbar{display:none}
  .ei-index button{padding:10px 12px}
  .ei-index button::before{left:12px;right:12px;top:auto;bottom:3px;width:auto;height:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .ei-index button.on::before{height:2px;transform:scaleX(1)}
}
@media (max-width:639.9px){.ei-win{height:340px}}
/* ---- the routing layer on small screens: a timeline ---- */
.rl-slot,.rl-used{display:none}
@media (max-width:959.9px){
  .rl-cells,.rl-srcs{display:none}
  .rl-grid{position:relative;padding-left:0;padding-inline-start:22px;gap:20px}
  .rl-grid::before,.rl-grid::after{content:"";position:absolute;inset-inline-start:4px;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.12)}
  .rl-grid::after{background:#28d0f5;transform-origin:top;transform:scaleY(var(--rl-p,0));transition:transform .7s cubic-bezier(.22,.9,.24,1)}
  .rl-grid>div{position:relative}
  .rl-grid>div::before{content:"";position:absolute;inset-inline-start:-22px;top:1px;width:9px;height:9px;border-radius:50%;background:#0b0e13;border:1px solid rgba(255,255,255,.3);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;z-index:1}
  .rl-grid>div.lit::before{background:#28d0f5;border-color:#28d0f5;box-shadow:0 0 0 4px rgba(40,208,245,.18)}
  .rl-slot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:13px 14px 12px;border-radius:14px;background:#10141b;border:1px solid rgba(255,255,255,.08);transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease}
  .rl-slot.on{border-color:#28d0f5;background:#101c26;box-shadow:0 12px 30px -12px rgba(40,208,245,.45)}
  .rl-slot-n{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rl-slot-s{font-size:13px;color:#28d0f5;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
  .rl-slot-bar{grid-column:1/-1;display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
  .rl-slot-bar em{display:block;height:100%;width:0;background:#28d0f5;transition:width .45s cubic-bezier(.22,.9,.24,1)}
  .rl-used{display:flex;flex-wrap:wrap;gap:6px;min-height:34px}
  .rl-chip{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border-radius:999px;background:#fff;color:#1d1d1f;font-size:12.5px;font-weight:600;box-shadow:0 0 0 2px #28d0f5;animation:rlChip .45s cubic-bezier(.16,1,.3,1) both}
  .rl-chip img{height:14px;width:auto;max-width:92px;display:block}
  .rl-acard{min-height:0;padding:14px 16px}
}
/* every text area in the panel holds the height of its longest line, at any width and in any language */
.rl-qcard{min-height:max(96px,var(--rl-qh,0px))}
.rl-say{min-height:max(1.45em,var(--rl-sh,0px))}
.rl-as{min-height:max(1.45em,var(--rl-nh,0px))}
.rl-ansline{min-height:var(--rl-ah,3.9em)}
@media (max-width:959.9px){.rl-qcard{min-height:max(84px,var(--rl-qh,0px))}}
/* phones: the three figures sit in three even columns, the figure over its label */
@media (max-width:599.9px){
  .rl-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-flow:column;gap:1px 12px;align-items:start}
  .rl-nums i{display:none}
  .rl-nums span{line-height:1.3}
}
/* the caret follows the last letter instead of sitting on a line of its own */
.rl-qt{display:inline}
.rl-caret{margin-right:-4px}
@keyframes rlChip{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rl-chip{animation:none}.rl-grid::after{transition:none}}
/* ---- the module sprite: each 172px cell holds a 163px plate and a 9px gutter left over from the capture.
   The tile shows the plate only, so the gutter edge is gone and every logo sits in the middle of its tile ---- */
.bt-i{aspect-ratio:163/57;background-size:1160.736% 800%;background-position:calc(var(--c,0)*9.94794% + var(--o,0%)) calc(var(--r,0)*14.2857%)}
/* ---- the module index on small screens: whole tiles, centred names, a fade between states ---- */
@media (max-width:1023.9px){
  .board-grid{grid-auto-columns:calc((100% - 30px)/6);grid-template-rows:repeat(3,auto);padding:2px 0 6px;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  .bt{scroll-snap-align:start;display:flex;flex-direction:column}
  .bt{min-height:0;overflow:hidden}
  .bt-n{white-space:normal;overflow:hidden;text-overflow:clip;text-align:center;line-height:1.25;height:2.5em;display:flex;align-items:center;justify-content:center;margin-top:6px}
  .js [data-reveal].in .board.live .board-grid .bt{transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1),border-color .4s ease,background-color .4s ease,box-shadow .4s ease}
  .js [data-reveal].in .board.live .board-grid.fade .bt{opacity:0;transform:translateY(6px) scale(.985);transition:opacity .2s ease,transform .2s ease}
  .board.searching .board-grid{grid-auto-flow:row;grid-template-rows:none;grid-auto-rows:auto;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;padding:2px 0 6px;align-content:start;scroll-snap-type:none}
  .board.searching .bt.over{display:none}
}
@media (max-width:639.9px){
  .board-grid{grid-auto-columns:calc((100% - 6px)/2)}
  .board.searching .board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:399.9px){.board.searching .board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ============================================================
   PASS 34 (2026-09-17): the desk takes the screen.
   ============================================================ */
.only-phone{display:none}
@media (max-width:639.9px){.only-wide{display:none}.only-phone{display:block}}
/* ---- hero: no window dots, centred on phones, the TV wall, a fuller World ---- */
.desk-bar .db-url{margin-left:0;margin-inline-start:0}
@media (max-width:899.9px){.db-tabs{margin-inline-start:0}}
@media (max-width:767.9px){.hero-desk{width:100%}}
@media (max-width:359.9px){.db-live span{display:none}}
.db-tabs.run button.on::after{animation-duration:var(--dwell,7.5s)}
.desk-grid[data-layout="tv"]{grid-template-rows:.36fr 1.775fr 1.775fr 3.55fr;grid-template-areas:"t t t t t t t t t t t t" "a a a a a a b b b c c c" "a a a a a a d d d e e e" "f f f f f f g g g g g g"}
.desk-grid[data-layout="world"]{grid-template-rows:.36fr 2.15fr 1.8fr 3.15fr;grid-template-areas:"t t t t t t t t t t t t" "a a a a a a a b b b b b" "a a a a a a a c c c c c" "d d d d d e e e e e e e"}
/* a tile's name sits on a small dark tag, the way a multiview wall labels its sources: it reads on a bright picture
   and disappears into a dark one */
.hero .dk .dk-t{left:8px;bottom:8px;padding:4px 8px 5px;border-radius:7px;background:rgba(8,10,14,.56);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);line-height:1.15;text-shadow:none;max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:767.9px){.hero .dk .dk-t,.hero .dk[data-slot="a"] .dk-t{left:6px;bottom:6px;padding:3px 7px 4px;font-size:11px}.hero .dk[data-slot="a"] .dk-t{font-size:12.5px}}
.dk.moving{will-change:transform}
.dk.moving .dk-t{opacity:0}
.desk-grid[data-layout="tv"] .dk .dk-t{transition:opacity .3s ease}
@media (max-width:767.9px){
  .desk-grid[data-layout="tv"]{grid-template-rows:26px 197fr 98fr 98fr 98fr;grid-template-areas:"t t t t t t" "a a a a a a" "b b b c c c" "d d d e e e" "f f f g g g"}
  .desk-grid[data-layout="world"]{grid-template-rows:26px 170fr 128fr 118fr 108fr;grid-template-areas:"t t t t t t" "a a a a a a" "b b b b b b" "c c c c c c" "d d d e e e"}
}
/* ---- coverage: the second sentence of the opening copy carries the promise ---- */
#coverage .sub b,#coverage .sub .w.b{color:var(--ink);font-weight:600}
@media (max-width:639.9px){#coverage,#ask{margin-bottom:44px}}
/* ---- dark mode: the education rows are rows, as they are in light ---- */
html[data-theme="dark"] #edu .epath,html[data-theme="dark"] #edu .epath:hover{border:0!important;border-bottom:1px solid rgba(255,255,255,.12)!important;border-radius:0;background:transparent;box-shadow:none}
/* ---- centring ---- */
@media (max-width:639.9px){#access .bill-toggle{display:flex;width:-moz-fit-content;width:fit-content;margin-left:auto;margin-right:auto}}
.board-q,.board-q input{min-width:0}
@media (max-width:959.9px){.rl-grid{padding-inline-end:22px}}
/* ---- build your desk: the fold pins, the desk grows until it is the screen ---- */
.pin-ok .dpin{position:relative;height:280vh;height:280lvh;width:var(--pin-vw,100vw);margin-inline-start:calc(50% - var(--pin-vw,100vw)/2);margin-top:clamp(36px,6vh,72px)}
.pin-ok .dpin-stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;overflow:clip}
.pin-ok .dpin-stage::before{content:"";position:absolute;left:50%;top:54%;width:min(1100px,92vw);height:min(720px,70vh);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,99,230,.16),rgba(40,208,245,.09) 55%,transparent);opacity:calc(1 - var(--pin-e,0)*1.6);animation:dpinBreathe 9s ease-in-out infinite alternate}
@keyframes dpinBreathe{from{transform:translate(-52%,-50%) scale(.94)}to{transform:translate(-48%,-51%) scale(1.06)}}
.pin-ok .dpin-copy{position:absolute;left:0;right:0;top:var(--pin-top,96px);padding:0 var(--pad-x);will-change:transform,opacity;pointer-events:none}
.pin-ok .dpin-copy .vw-head{margin-top:0}
.pin-ok .dpin-frame{position:absolute;left:50%;top:50%;width:0;height:0}
.pin-ok .dpin-frame .modbento{position:absolute;left:0;top:0;margin:0;max-width:none;aspect-ratio:auto;will-change:width,height,transform;overflow:hidden}
/* inside the pinned desk the tile names follow the desk's width, from a small card up to the whole screen */
.pin-ok .dpin .mod-t{font-size:clamp(8px,calc(var(--bw,700px)*.045),14px);left:clamp(5px,calc(var(--bw,700px)*.03),16px);right:clamp(4px,calc(var(--bw,700px)*.02),16px);bottom:clamp(4px,calc(var(--bw,700px)*.024),13px);line-height:1.2}
.pin-ok .dpin .in-desk .mod-t{font-size:clamp(10px,calc(var(--bw,700px)*.06),20px)}
.pin-ok .dpin .modbento[data-size="1"] .mod-t{font-size:clamp(8.5px,calc(var(--bw,700px)*.05),16px)}
.pin-ok .dpin .modbento[data-size="1"] .in-desk .mod-t{font-size:clamp(10.5px,calc(var(--bw,700px)*.066),22px)}
.pin-ok .dpin .modbento[data-size="2"] .mod-t{font-size:clamp(9px,calc(var(--bw,700px)*.055),18px)}
.pin-ok .dpin .modbento[data-size="2"] .in-desk .mod-t{font-size:clamp(11px,calc(var(--bw,700px)*.072),24px)}
.pin-ok .dpin .tape{font-size:clamp(7.5px,calc(var(--bw,700px)*.03),13px)}
.pin-ok .dpin .vw-cta{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));margin:0;z-index:3;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.pin-ok .dpin.full .vw-cta{opacity:1;transform:none;pointer-events:auto}
.pin-ok .dpin .vw-cta .ghost,html[data-theme="dark"] .pin-ok .dpin .vw-cta .ghost{background:#fff;color:#0b0b0d;border-color:#fff;box-shadow:0 14px 44px -10px rgba(0,0,0,.65)}
@media (max-width:767.9px){.pin-ok .dpin{height:250vh;height:250lvh}.pin-ok .dpin .vw-cta{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* while the desk is the screen nothing else is: the header, the capsule and the phone bar step out */
body.desk-full header{transform:translateY(-110%)!important}
body.desk-full .ctabar{transform:translate(-50%,-105%)!important;pointer-events:none}
body.desk-full .mcta{transform:translateY(110%)!important}
/* ============================================================
   PASS 35 (2026-09-18): sharp at every size.
   ============================================================ */
/* ---- the logo is the light and dark switch ---- */
.wm-theme{-webkit-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;line-height:0;border-radius:9px;perspective:300px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.wm-theme:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
@media (hover:hover){.wm-theme:hover{transform:scale(1.08)}}
.wm-theme:active{transform:scale(.94)}
.wm-theme.flip .wm-ic{animation:wmFlip .6s cubic-bezier(.3,.7,.2,1)}
@keyframes wmFlip{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.wm-theme.flip .wm-ic{animation:none}.wm-theme{transition:none}}
.wm-home{color:inherit;text-decoration:none}
/* ---- the module index gathers faster ---- */
.board.live .bt,.js [data-reveal].in .board.live .bt{transition-duration:.68s,.45s,.4s,.4s,.5s}
/* ---- the finale headline ---- */
#join .display-xl{font-size:clamp(40px,8.2vw,108px)}
#join .qm-seal{width:72px;height:72px;border-radius:18px;margin:0 auto 20px!important}
@media (max-width:767.9px){#join .display-xl{font-size:clamp(36px,11.2vw,50px)}#join .qm-seal{width:60px;height:60px;border-radius:15px;margin-bottom:16px!important}}
/* ---- the desk: a widget is anchored where its header is, a picture in its middle ---- */
.mod[data-pos="lt"] .mod-v{object-position:left top}
/* the settings tile carries its own header: its name shows only when the tile is too small for the rows */
/* ---- hero: four layouts. My desk uses the same all 16:9 wall as Live TV ---- */
.desk-grid[data-layout="mydesk"]{grid-template-rows:.36fr 1.775fr 1.775fr 3.55fr;grid-template-areas:"t t t t t t t t t t t t" "a a a a a a b b b c c c" "a a a a a a d d d e e e" "f f f f f f g g g g g g"}
@media (max-width:1279.9px){.db-clocks span:nth-child(n+3){display:none}}
@media (max-width:1099.9px){.db-clocks span:nth-child(n+2){display:none}}
@media (max-width:999.9px){.db-url{display:none}}
@media (max-width:767.9px){
  .desk-grid[data-layout="mydesk"]{grid-template-rows:26px 197fr 98fr 98fr 98fr;grid-template-areas:"t t t t t t" "a a a a a a" "b b b c c c" "d d d e e e" "f f f g g g"}
  .db-tabs{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent);padding-inline-end:14px}
  .db-tabs::-webkit-scrollbar{display:none}
  .db-tabs button{flex:0 0 auto}
  .db-live{flex:0 0 auto}
}
/* ============================================================
   PASS 36 (2026-09-18): the board runs itself; the patent is said out loud.
   ============================================================ */
.board-q{position:relative}
.board-caret{position:absolute;top:50%;left:0;width:2px;height:1.15em;border-radius:1px;background:#28d0f5;opacity:0;pointer-events:none;transform:translate(0,-50%)}
.board-caret.on{opacity:1;animation:bcBlink 1s steps(2,jump-none) infinite}
.board.typing .board-caret.on{animation:none}
.board-q:focus-within .board-caret{opacity:0;animation:none}
@keyframes bcBlink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
.board-try{flex:none;margin-inline-start:12px;font-size:13px;line-height:1;color:rgba(255,255,255,.46);white-space:nowrap;opacity:0;transition:opacity .35s ease,color .25s ease;cursor:text}
.board.auto .board-try{opacity:1}
.board-q:hover .board-try{color:rgba(255,255,255,.8)}
.board-q:focus-within .board-try{opacity:0}
@media (max-width:639.9px){.board-try{font-size:11.5px;margin-inline-start:8px}}
@media (max-width:359.9px){.board-try{display:none}}
@media (prefers-reduced-motion:reduce){.board-caret.on{animation:none}}
/* a touch quicker still: the gather, and the return */
.board.live .bt,.js [data-reveal].in .board.live .bt{transition-duration:.6s,.4s,.35s,.35s,.45s}
/* ---- the patent line above the routing headline: type and a seal, no box ---- */
.pat-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 18px;font-size:15px;line-height:1.35;letter-spacing:-.005em;color:var(--ink-2)}
.pat-line b{font-weight:600;color:var(--color-accent)}
.pat-ic{width:20px;height:20px;flex:none;fill:none;stroke:var(--color-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.js [data-reveal] .pat-line{opacity:0;transform:translateY(8px);transition:opacity .6s ease .05s,transform .7s cubic-bezier(.16,1,.3,1) .05s}
.js [data-reveal].in .pat-line{opacity:1;transform:none}
@media (max-width:639.9px){.pat-line{font-size:14.5px;margin-bottom:14px}.pat-line span{display:none}}
@media (prefers-reduced-motion:reduce){.js [data-reveal] .pat-line{opacity:1;transform:none;transition:none}}
html[data-theme="dark"] .pat-line b{color:#7cb4ff}
html[data-theme="dark"] .pat-ic{stroke:#7cb4ff}
/* ============================================================
   PASS 37 (2026-09-18): everything behind a button meets the standard of the page.
   ============================================================ */
.pat-line{font-size:16px}
.pat-ic{width:21px;height:21px}
@media (max-width:639.9px){.pat-line{font-size:14.5px}.pat-ic{width:20px;height:20px}}
/* ---- every overlay: a frosted strip under the fixed wordmark and close, so neither sits on scrolling text ---- */
/* fixed, like the media overlay's own toolbar strip (a sticky box cannot be pulled up into its container's padding) */
.tmov:not(.mvov)::before{content:"";position:fixed;top:0;left:0;right:0;height:76px;z-index:6;pointer-events:none;
  background:rgba(251,251,253,.955);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent)}
@media (max-width:640px){.tmov:not(.mvov)::before{height:70px}}
/* ---- Intelligence: sentence case labels, larger reading sizes ---- */
.ivlab,.ivm-t,.ivchips span,.ivsrc,.ivchip,.ivm-v{text-transform:none;letter-spacing:0}
.ivlab{font-size:14px;opacity:.62}
.ivm-t{font-size:14px;flex-basis:150px}
.ivm-s,.ivm-v{font-size:13.5px}
.ivchips span{font-size:13.5px;padding:9px 14px}
.ivsrc{font-size:12px;opacity:.55}
.ivchip{font-size:11.5px;padding:5px 10px}
.ivp{font-size:16px}
.ivp.strong{font-size:17.5px}
.ivp.dim{font-size:13.5px}
.ivrows li{font-size:15.5px}
.ivdesc{font-size:14px}
.tmhead .pat-line{justify-content:flex-start;margin:0 0 16px}
.ivlink{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:16px;color:var(--color-accent);text-decoration:none;cursor:pointer}
.ivlink::after{content:"";width:7px;height:7px;border-right:1.7px solid currentColor;border-top:1.7px solid currentColor;transform:rotate(45deg);transition:transform .3s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.ivlink:hover::after{transform:translateX(3px) rotate(45deg)}}
.ivlink:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px;border-radius:4px}
/* wide screens: a heading column and a reading column, captures and figures across both */
@media (min-width:1000px){
  .ivov .tmwrap{max-width:1120px}
  .ivov .tmhead{margin-bottom:40px}
  .ivov .tmtitle{font-size:clamp(44px,4.4vw,64px);line-height:1.04;max-width:15ch;margin-bottom:18px}
  .ivov .tmsub{font-size:19px;max-width:56ch}
  .ivsec{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:72px;padding:72px 0 76px;align-items:start}
  .ivsec.first{padding-top:56px;border-top:1px solid rgba(0,0,0,.1)}
  .ivsec>*{grid-column:2;min-width:0}
  .ivsec>.ivh{grid-column:1;grid-row:1;font-size:clamp(28px,2.5vw,36px);line-height:1.14;max-width:15ch;margin:0}
  .ivsec>.ivshot,.ivsec>.ivstats{grid-column:1 / -1}
  .ivsec>.ivshot{margin-top:40px}
  .ivstats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px}
  .ivp,.ivrows li{max-width:60ch}
  .ivcta{margin-top:30px}
}
@media (max-width:640px){.ivsec{padding:34px 0 38px}.ivstats{grid-template-columns:1fr 1fr}.ivm-t{flex-basis:100%}}
/* ============================================================
   PASS 38 (2026-09-18): the little things.
   ============================================================ */
/* ---- the toolbar never runs off the edge: the last links go to the menu before it gets tight, and the type stays readable ---- */
@media (min-width:1200px) and (max-width:1419.9px){nav.desk{gap:7px}nav.desk a.navlink{font-size:12.5px;padding:14px 4px}nav.desk .lang>button,nav.desk .nav-cta{font-size:12.5px}}
@media (min-width:1200px) and (max-width:1339.9px){nav.desk a.navlink[href*="build-with-us"],nav.desk a.navlink[href*="dataroom"]{display:none}}
@media (min-width:1200px) and (max-width:1339.9px){nav.desk a.navlink[href*="#team"]{display:none}}
/* ---- the footer on phones: two columns of links, the rest in one ---- */
@media (max-width:479.9px){
  footer{padding-top:48px}
  .fcols{grid-template-columns:1fr 1fr;gap:26px 20px}
  .fcol.brand,.fcol:last-child{grid-column:1 / -1}
  .fcol a,.fcol .supbtn{font-size:14.5px;padding:4px 0}
  .fh{margin-bottom:4px}
  .faddr{margin-top:8px;font-size:13.5px}
  .fbottom{margin-top:30px}
}
/* the footer's social marks: the generic footer link rule was overriding their padding, so their negative margins ate the gap */
footer .fcol .socials a{padding:12px;margin:-12px;display:block}
@media (max-width:479.9px){footer .socials{gap:24px;margin-top:8px}footer .socials svg{width:18px;height:18px}}
/* ---- the answer is a record: source marks, a time, a hairline. Not a bubble ---- */
.rl-acard{position:relative;background:#0f1218;border:1px solid rgba(255,255,255,.1);border-left-width:1px;border-left-color:rgba(255,255,255,.1);border-radius:14px;padding:14px 16px 15px;opacity:.5;transition:opacity .4s ease,border-color .4s ease}
.rl-acard.on{opacity:1;border-color:rgba(255,255,255,.24);box-shadow:none}
.rl-at{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.55);padding-right:96px}
.rl-ts{position:absolute;top:14px;right:16px;font-size:11.5px;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;white-space:nowrap}
.rl-as{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:28px}
.rl-as:empty::before{content:none}
.rl-mark{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 11px;border-radius:999px;background:#fff;color:#1d1d1f;font-size:12px;font-weight:600;line-height:1}
.rl-mark img{height:12px;width:auto;max-width:84px;display:block}
.rl-ansline{margin-top:10px;font-size:14px;line-height:1.5;color:#fff}
.rl-out{font-size:12px;color:rgba(255,255,255,.45)}
.rl-pp{font-size:11.5px}
/* ---- the hero: a slow aurora behind the fold. Soft-edged gradients, no blur filter (a filter costs half the frame rate);
   only transforms move, on their own layer; the blobs sit inside the fold so nothing shifts on load ---- */
.hero .aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict;transform:translateZ(0);isolation:isolate}
.hero .aurora i{position:absolute;border-radius:50%;will-change:transform;transform:translate3d(0,0,0);contain:layout paint}
.hero .aurora i:nth-child(1){left:-12%;top:8%;width:58vw;height:58vw;max-width:900px;max-height:900px;background:radial-gradient(circle,rgba(11,99,230,.2) 0,rgba(11,99,230,.09) 32%,rgba(11,99,230,0) 66%);animation:auroraA 26s ease-in-out infinite alternate}
.hero .aurora i:nth-child(2){right:-14%;top:22%;width:54vw;height:54vw;max-width:860px;max-height:860px;background:radial-gradient(circle,rgba(40,208,245,.18) 0,rgba(40,208,245,.08) 32%,rgba(40,208,245,0) 66%);animation:auroraB 32s ease-in-out infinite alternate}
.hero .aurora i:nth-child(3){left:30%;top:46%;width:50vw;height:50vw;max-width:800px;max-height:800px;background:radial-gradient(circle,rgba(124,92,255,.13) 0,rgba(124,92,255,.06) 32%,rgba(124,92,255,0) 66%);animation:auroraC 38s ease-in-out infinite alternate}
@keyframes auroraA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14vw,9vh,0) scale(1.18)}}
@keyframes auroraB{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-16vw,-8vh,0) scale(.92)}}
@keyframes auroraC{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(-10vw,-14vh,0) scale(1.2)}}
html[data-theme="dark"] .hero .aurora i:nth-child(1){background:radial-gradient(circle,rgba(11,99,230,.3) 0,rgba(11,99,230,.12) 32%,rgba(11,99,230,0) 66%)}
html[data-theme="dark"] .hero .aurora i:nth-child(2){background:radial-gradient(circle,rgba(40,208,245,.2) 0,rgba(40,208,245,.08) 32%,rgba(40,208,245,0) 66%)}
html[data-theme="dark"] .hero .aurora i:nth-child(3){background:radial-gradient(circle,rgba(124,92,255,.22) 0,rgba(124,92,255,.09) 32%,rgba(124,92,255,0) 66%)}
.hero>*:not(.aurora):not(canvas.flow){position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.hero .aurora i{animation:none}}
/* ---- module names on desktop: two lines, never an ellipsis ---- */
@media (min-width:1024px){
  .bt-n{white-space:normal;overflow:visible;text-overflow:clip;text-align:center;line-height:1.22;height:2.44em;display:flex;align-items:center;justify-content:center;font-size:11.5px}
}
.bt-n em{font-size:10.5px}
.chip{font-size:11px}
/* ---- the newsletter window's own bar on phones ---- */
@media (max-width:639.9px){.ei-tag{display:none}.ei-from{flex:1;min-width:0}}
/* ---- the Media library: the same cards as Spotlights, in a grid ---- */
.mvgrid .iv-card{width:auto;background:#15181f;border-color:rgba(255,255,255,.1);color:#fffdf9}
.mvgrid .iv-card:hover,.mvgrid .iv-card:focus-visible{border-color:rgba(255,255,255,.4)}
.mvgrid .iv-thumb{background:#0e1116}
.mvgrid .iv-outlet{color:rgba(255,253,249,.6)}
.mvgrid .iv-date{color:rgba(255,253,249,.55)}
.mvgrid .iv-card[hidden]{display:none}
.mvnone{grid-column:1 / -1;margin:8px 0 0;font-size:15px;color:var(--ink-2)}
/* ============================================================
   PASS 39 (2026-09-19): the map at the Sports standard; the clutter list.
   ============================================================ */
/* ---- the hero says the name once: the wordmark in the header ---- */
.hero-brand{display:none}
/* ---- the download icon leaves the header on every size; the install guide has its link under the devices ---- */
.hdr-right .dl-mini,button.dl-mini.dl-mini{display:none!important}
.join-install{margin:18px 0 0;text-align:center}
.join-install .ulink{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;font:inherit;font-size:15px;color:var(--color-accent);cursor:pointer}
.join-install .ulink:hover{text-decoration:underline}
.join-install .ulink:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px;border-radius:4px}
html[data-theme="dark"] .join-install .ulink{color:#7cb4ff}
/* ---- phones and tablets: wordmark, Sign in as plain text, one blue pill, the menu ---- */
@media (max-width:1199.9px){
  .hdr-main{gap:6px}
  .hdr-right{margin-left:2px}
}
/* ---- the logo is the theme switch: a finger gets a 44px target ---- */
@media (pointer:coarse){.wm-theme{padding:10px;margin:-10px}}
/* ---- the section strip on phones: a real fade at the trailing edge ---- */
.mstrip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 44px),transparent)}
[dir="rtl"] .mstrip{-webkit-mask-image:linear-gradient(270deg,transparent,#000 16px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(270deg,transparent,#000 16px,#000 calc(100% - 44px),transparent)}
/* ============================================================
   PASS 40 (2026-09-19): the desk is yours; folds in order; an Apple-clean toolbar; the Invest fold.
   ============================================================ */
/* ---- the settings below the desk: the picture keeps cycling and the desk above answers it ---- */
.dk-custom{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:clamp(28px,5vw,84px);align-items:center;max-width:1120px;margin:clamp(44px,7vw,88px) auto 0}
.dk-custom .mod-note{margin:0;max-width:none;text-align:left;opacity:1;color:var(--ink-2)}
.dk-any{margin:20px 0 0;font-size:clamp(21px,2.4vw,30px);line-height:1.18;letter-spacing:-.022em;font-weight:600;color:var(--ink);text-wrap:balance}
.dk-any b{font-weight:600}
.dk-pic{container-type:inline-size;position:relative;border-radius:16px;overflow:hidden;background:#0b0d12;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 60px -24px rgba(0,0,0,.35);transition:box-shadow .5s ease,background-color .45s ease}
.dk-pic{box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 60px -24px rgba(0,0,0,.35),0 30px 80px -30px color-mix(in srgb,var(--dk-accent,#28d0f5) 70%,transparent)}
.dk-pic .st{position:relative;inset:auto;padding:1.1em 1.2em 1.15em;font-size:calc(clamp(9px,3.2cqw,13.5px)*var(--st-scale,1));overflow:visible}
.dk-pic[data-look="light"]{background:#f5f5f7;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 24px 60px -24px rgba(0,0,0,.28),0 30px 80px -30px color-mix(in srgb,var(--dk-accent,#28d0f5) 70%,transparent)}
.dk-pic[data-look="light"] .st{background:#f5f5f7;color:#0b0b0d}
.dk-pic[data-look="light"] .st-k{color:rgba(0,0,0,.66)}
.dk-pic[data-look="light"] .st-row{border-top-color:rgba(0,0,0,.08)}
.dk-pic[data-look="light"] .st-rad button{color:rgba(0,0,0,.5)}
.dk-pic[data-look="light"] .st-rad button.on{color:#0b0b0d}
.dk-pic[data-look="light"] .st-rad button::before{border-color:rgba(0,0,0,.3)}
.dk-pic[data-look="light"] .st-seg{border-color:rgba(0,0,0,.14)}
.dk-pic[data-look="light"] .st-seg button{color:rgba(0,0,0,.55)}
.dk-pic[data-look="light"] .st-seg button.on{background:rgba(0,0,0,.06)}
.dk-pic[data-look="light"] .st-sw button.on{box-shadow:0 0 0 .18em #f5f5f7,0 0 0 .3em var(--c)}
.dk-pic[data-size="1"]{--st-scale:1.12}
.dk-pic[data-size="2"]{--st-scale:1.25}
.dk-pic[data-density="0"] .st{gap:.25em}
.dk-pic[data-density="2"] .st{gap:.8em}
.dk-pic[data-density="0"] .st-row{padding-top:.3em}
.dk-pic[data-density="2"] .st-row{padding-top:.8em}
/* a long row (German or Portuguese at the large size) drops its values to a second line, right aligned, instead of clipping */
.dk-pic .st-row{flex-wrap:wrap;row-gap:.3em}
.dk-pic .st-v{margin-inline-start:auto;flex-wrap:wrap;justify-content:flex-end;row-gap:.3em}
.dk-pic[data-size="1"]{--st-scale:1.1}
.dk-pic[data-size="2"]{--st-scale:1.2}
@media (max-width:479.9px){.dk-pic .st{font-size:calc(clamp(9px,3cqw,13.5px)*var(--st-scale,1))}.dk-pic[data-size="1"]{--st-scale:1.06}.dk-pic[data-size="2"]{--st-scale:1.12}}
[dir="rtl"] .dk-custom .mod-note{text-align:right}
/* the radio marks sit on the reading side */
.st-rad button{padding-left:0;padding-inline-start:1.35em}
.st-rad button::before{left:auto;inset-inline-start:0}
@media (max-width:1023.9px){
  .dk-custom{grid-template-columns:1fr;gap:28px;max-width:720px}
  .dk-custom .mod-note,[dir="rtl"] .dk-custom .mod-note{text-align:center}
  .dk-any{text-align:center;margin-top:14px}
  .dk-pic{width:100%;max-width:460px;margin:0 auto}
}
@media (max-width:767.9px){.dk-custom{gap:26px;margin-top:40px}}
/* ---- the toolbar: mark and name, links, Sign in beside the menu ---- */
.wordmark{gap:9px;font-size:17px;letter-spacing:-.015em}
.hdr-right{gap:4px}
.hdr-signin{display:inline-block;font:500 13.5px/1 var(--font-sans);letter-spacing:.005em;color:var(--ink);text-decoration:none;padding:12px 10px;border-radius:8px;opacity:.9;transition:color .25s var(--ease),opacity .25s var(--ease)}
.hdr-signin:hover,.hdr-signin:focus-visible{color:var(--color-accent);opacity:1}
.hdr-signin:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.burger{display:grid;gap:6px;justify-items:end;background:none;border:0;cursor:pointer;padding:14px 10px;margin-right:0;margin-inline-end:-10px;z-index:2;border-radius:8px}
.burger i{display:block;width:24px;height:1.5px;border-radius:2px;background:var(--color-bone-white);transform-origin:center;transition:transform .5s var(--ease),width .4s var(--ease),opacity .25s var(--ease)}
.burger i:nth-child(2){width:15px}
@media (hover:hover){.burger:hover i:nth-child(2){width:24px}}
.burger:focus-visible{outline:2px solid var(--color-accent);outline-offset:0}
.burger.x i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.x i:nth-child(2){width:24px;opacity:0;transform:scaleX(.2)}
.burger.x i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (max-width:479.9px){
  .wordmark{font-size:15.5px;gap:8px}
  .hdr-signin{font-size:13px;padding:12px 8px}
  .burger{padding:14px 6px;margin-right:0;margin-inline-end:-6px}
  /* the phone header in the other languages shows the mark alone: the mark keeps its shape */
}
/* ---- the Invest fold ---- */
#invest .sub{margin-top:16px}
.inv-lines{list-style:none;margin:clamp(36px,4.5vw,56px) auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px);text-align:left}
.inv-lines li{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:1px solid rgba(0,0,0,.14)}
.inv-n{font-size:12px;letter-spacing:.08em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.inv-h{font-size:clamp(17px,1.4vw,20px);line-height:1.25;font-weight:600;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.inv-p{font-size:15px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.inv-cta{margin:clamp(32px,4vw,48px) 0 0}
.inv-foot{margin:16px auto 0;font-size:13px;color:var(--ink-2);opacity:.85;max-width:52ch}
[dir="rtl"] .inv-lines{text-align:right}
@media (max-width:767.9px){
  .inv-lines{grid-template-columns:1fr;gap:0;margin-top:30px}
  .inv-lines li{padding:20px 0;border-top:1px solid rgba(0,0,0,.12)}
  .inv-lines li:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
}
/* ============================================================
   PASS 41 (2026-09-19): seams between folds; the settings picture you can use; the Invest field; the mono mark.
   ============================================================ */
/* ---- seams: every band feathers in and out; two bands in a row stay joined; the colour flows fade at their edges ---- */
:root{--feather:clamp(64px,9vw,132px)}
section.band::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--feather),#000 calc(100% - var(--feather)),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 var(--feather),#000 calc(100% - var(--feather)),transparent 100%)}
#platform::before,#machine::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--feather),#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 var(--feather),#000 100%)}
#modules::before,#streams::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--feather)),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--feather)),transparent 100%)}
#invest::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--feather)),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--feather)),transparent 100%)}
#ask>canvas.flow{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
#join>canvas.flow{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%)}
/* ---- the hero desk: a label over a playing film keeps a plain plate; a blur behind seven labels cost a third of the frames ---- */
.hero .dk .dk-t{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,10,14,.66)}
/* ---- the mark in one colour ---- */
/* ---- the settings picture is a control ---- */
.dk-pic-cap{margin:0 0 10px;font-size:12.5px;letter-spacing:.02em;color:var(--ink-2);text-align:center}
.dk-pic-wrap{min-width:0}
.st button{-webkit-appearance:none;appearance:none;background:none;border:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:inherit;line-height:inherit;border-radius:.4em}
.st button:focus-visible{outline:2px solid var(--dk-accent,#28d0f5);outline-offset:2px}
.st-rad button{padding-block:0;padding-inline-end:0}
/* a finger-sized target: the swatch is drawn inside a 24px button */
.st .st-sw button{display:block;padding:0;position:relative;width:max(24px,1.85em);height:max(24px,1.85em);border-radius:50%;background:none;transform:none!important;box-shadow:none!important}
.st .st-sw button::before{content:"";position:absolute;left:50%;top:50%;width:1.15em;height:1.15em;margin:-.575em 0 0 -.575em;border-radius:50%;background:var(--c);transition:transform .3s ease,box-shadow .3s ease}
.st .st-sw button.on::before{transform:scale(1.15);box-shadow:0 0 0 .18em #0b0d12,0 0 0 .3em var(--c)}
.dk-pic[data-look="light"] .st-sw button.on::before{box-shadow:0 0 0 .18em #f5f5f7,0 0 0 .3em var(--c)}
.st .st-sw{gap:.1em}
.st-rad button{padding-block:.3em;display:inline-flex;align-items:center}
@media (hover:hover){
  .st-rad button:hover{color:#fff}.dk-pic[data-look="light"] .st-rad button:hover{color:#0b0b0d}
  .st-seg button:hover{color:#fff}.dk-pic[data-look="light"] .st-seg button:hover{color:#0b0b0d}
  .st-sw button:hover::before{transform:scale(1.15)}
}
.dk-pic .st{transition:background-color .45s ease,color .45s ease,gap .4s ease,font-size .45s var(--ease)}
.dk-pic .st-row{transition:padding .4s ease,border-color .45s ease}
.relabel{animation:relabel .42s var(--ease)}
@keyframes relabel{from{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:none}}
.mod-t,.pin-ok .dpin .mod-t,.tape{transition:font-size .45s var(--ease),opacity .3s var(--ease)}
.modbento.no-tape .mod-tape{display:none}
@media (prefers-reduced-motion:reduce){.relabel{animation:none}.dk-pic .st,.mod-t,.tape{transition:none}}
/* ---- the Invest fold: the level field ---- */
.inv-lines{margin-top:clamp(28px,3.6vw,44px)}
.js [data-reveal] .inv-lines li{opacity:0;transform:translateY(12px)}
.js [data-reveal].in .inv-lines li{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(.25s + var(--i,0)*.12s)}
@media (prefers-reduced-motion:reduce){.js [data-reveal] .inv-lines li{opacity:1;transform:none;transition:none}}
.inv-cta .ghost.cta-solid{padding:18px 34px;font-size:14.5px}
.inv-foot .ulink{color:var(--ink-2);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.18);padding-bottom:1px;transition:color .25s var(--ease),border-color .25s var(--ease)}
.inv-foot .ulink:hover,.inv-foot .ulink:focus-visible{color:var(--ink);border-bottom-color:currentColor}
/* ============================================================
   PASS 44 (2026-09-18): the corridor made true; the points uniform; no cut words in the strip; the blue mark.
   ============================================================ */
@media (min-width:768px){.inv-h{min-height:2.5em;display:flex;align-items:flex-end}}
.inv-foot{margin:clamp(34px,4vw,46px) auto 0;text-align:center}
/* ---- the ask fold: less air before the routing fold ---- */
@media (min-width:640px){#ask{margin-bottom:calc(var(--gap-section)*.45)}}
/* ---- a row that scrolls sideways (the phone strip, the chip rows, the engine strips): the fade at either end lands between two words, never through one; no fade at all when nothing is cut ---- */
.mstrip,.board-chips,.dkinds,.ei-index,.db-tabs,.rl-cells,.rl-srcs{--ms-start:0px;--ms-fade0:0px;--ms-cut:100%;--ms-fade:0px;
  -webkit-mask-image:linear-gradient(90deg,transparent var(--ms-start),#000 calc(var(--ms-start) + var(--ms-fade0)),#000 calc(var(--ms-cut) - var(--ms-fade)),transparent var(--ms-cut));mask-image:linear-gradient(90deg,transparent var(--ms-start),#000 calc(var(--ms-start) + var(--ms-fade0)),#000 calc(var(--ms-cut) - var(--ms-fade)),transparent var(--ms-cut))}
[dir="rtl"] .mstrip,[dir="rtl"] .board-chips,[dir="rtl"] .dkinds,[dir="rtl"] .ei-index,[dir="rtl"] .db-tabs,[dir="rtl"] .rl-cells,[dir="rtl"] .rl-srcs{
  -webkit-mask-image:linear-gradient(270deg,transparent var(--ms-start),#000 calc(var(--ms-start) + var(--ms-fade0)),#000 calc(var(--ms-cut) - var(--ms-fade)),transparent var(--ms-cut));mask-image:linear-gradient(270deg,transparent var(--ms-start),#000 calc(var(--ms-start) + var(--ms-fade0)),#000 calc(var(--ms-cut) - var(--ms-fade)),transparent var(--ms-cut))}
/* a scroll settles on a word's start, so the near edge never cuts a word either */
.mstrip{scroll-snap-type:x proximity;scroll-padding-inline-start:0}
#msSet>a{scroll-snap-align:start}
/* ---- the rails on phones: a wider fade at both ends, so a card at the edge reads as the edge, not as a cut ---- */
@media (max-width:767.9px){.rail.streams,.rail{-webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}}
/* ---- the mark: the brand icon, the one in the browser tab ---- */
@media (max-width:479.9px){.wm-ic{width:26px;height:26px;border-radius:6.5px}}
/* ============================================================
   PASS 45 (2026-09-18): Invest on the wave, the line that levels; Ask joins the chapter; the devices float clean; the educator steps fit a phone.
   ============================================================ */
/* ---- Invest ---- */
#invest{position:relative}
#invest>canvas.flow{position:absolute;top:-8%;height:116%;left:50%;width:100vw;margin-left:-50vw;right:auto;bottom:auto;z-index:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
#invest>*:not(canvas.flow){position:relative;z-index:1}
#invest .inv-cta{margin-top:clamp(26px,3vw,36px)}
#invest .inv-cta .ghost.cta-solid{padding:18px 34px;font-size:14.5px}
.inv-lines{margin-top:clamp(28px,3.6vw,44px)}
/* ---- Ask: the top of the intelligence chapter, one grey band with the routing fold ---- */
#ask.band{margin-bottom:0;padding-bottom:calc(var(--gap-section)*.4)}
#machine::before{-webkit-mask-image:none;mask-image:none}
/* two bands in a row: no hairline between them */
#platform::before,#modules::before,#ask::before,#machine::before,#streams::before{box-shadow:none!important}
#machine.band{padding-top:calc(var(--gap-section)*.34)}
#ask>canvas.flow{top:0;height:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.askbar{max-width:820px;min-height:72px;margin-top:34px;box-shadow:0 18px 50px -24px rgba(11,99,230,.35),0 2px 10px rgba(0,0,0,.05)}
.askbar .cmd{font-size:clamp(17px,1.7vw,21px)}
.ask-chips{margin-top:20px;gap:9px}
.ask-chips span{font-size:13.5px;padding:8px 14px}
.ask-cap{margin:22px auto 0;max-width:52ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:639.9px){#ask.band{margin-bottom:0}#ask{margin-bottom:0}.askbar{min-height:62px}.ask-cap{font-size:14px;margin-top:18px}}
/* ---- the devices: a clean-edged still that floats, tilts and catches a light ---- */
.devvid{position:relative}
.devvid-v{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:transparent!important}
.dev-sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden;-webkit-mask-image:var(--qm-media-modules-devices-clean-webp);mask-image:var(--qm-media-modules-devices-clean-webp);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;opacity:.85}
.dev-sheen::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);transform:translate3d(-140%,0,0) skewX(-8deg);will-change:transform}
@media (prefers-reduced-motion:no-preference){.dev-sheen::before{animation:devSheen 9s cubic-bezier(.4,0,.2,1) infinite}}
@keyframes devSheen{0%,55%{transform:translate3d(-140%,0,0) skewX(-8deg)}85%,100%{transform:translate3d(420%,0,0) skewX(-8deg)}}
html[data-theme="dark"] .dev-sheen{opacity:.55}
/* ---- the educator steps on a phone: numbers, and the name of the step you are on ---- */
@media (max-width:640px){
  .edsteps{flex-wrap:nowrap}
  .edstep{flex:1;padding:11px 4px;gap:6px;min-width:0;border-top:0!important;font-size:10.5px}
  .edstep i{display:inline;font-size:9px}
  .edstep:not(.on) .edsn{display:none}
  .edstep.on{flex:2.6}
}
/* ============================================================
   PASS 46 (2026-09-18): the investor deck; Ask goes dark like the founder quote.
   ============================================================ */
/* ---- the deck ---- */
.deck-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;max-width:1080px;margin:clamp(40px,5vw,64px) auto 0;padding:clamp(26px,3.4vw,44px) clamp(24px,3.6vw,52px);
  background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:22px;box-shadow:0 30px 80px -40px rgba(11,99,230,.35),0 2px 12px rgba(0,0,0,.04);text-align:left}
.deck-stack{position:relative;display:block;aspect-ratio:16/9;margin:0 6% 0 2%;text-decoration:none}
.deck-pg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;box-shadow:0 22px 50px -22px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.08);transform-origin:50% 100%;transition:transform .6s var(--ease)}
.deck-pg-3{transform:translate(9%,-9%) rotate(4.5deg);opacity:.9}
.deck-pg-2{transform:translate(4.5%,-4.5%) rotate(2.2deg);opacity:.96}
.deck-pg-1{transform:none}
@media (hover:hover){.deck-stack:hover .deck-pg-3{transform:translate(12%,-12%) rotate(6deg)}.deck-stack:hover .deck-pg-2{transform:translate(6%,-6%) rotate(3deg)}.deck-stack:hover .deck-pg-1{transform:translateY(-2%)}}
.deck-stack:focus-visible{outline:2px solid var(--color-accent);outline-offset:6px;border-radius:12px}
.deck-h{margin:0;font-size:clamp(22px,2.3vw,30px);line-height:1.15;letter-spacing:-.022em;font-weight:600;color:var(--ink)}
.deck-p{margin:12px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2);max-width:40ch}
.deckform{display:flex;gap:10px;align-items:stretch;margin-top:22px}
.deckin{flex:1 1 auto;min-width:0;height:50px;padding:0 16px;border:1px solid rgba(0,0,0,.16);border-radius:980px;background:#fff;font:inherit;font-size:15px;color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.deckin::placeholder{color:rgba(0,0,0,.38)}
.deckin:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(11,99,230,.14)}
.deckin.bad{border-color:#ff7a6b}
.decksub{flex:0 0 auto;height:50px;padding:0 22px;border-radius:980px;border:1px solid var(--color-bone-white);background:var(--color-bone-white);color:#fff;font:500 14px/1 var(--font-sans);letter-spacing:.01em;cursor:pointer;white-space:nowrap;transition:background-color .3s var(--ease),color .3s var(--ease)}
.decksub:hover,.decksub:focus-visible{background:#000;border-color:#000}
.decksub:disabled{opacity:.6;cursor:default}
.deckform[hidden],.deckok[hidden]{display:none}
.deckerr{margin:8px 0 0;font-size:12.5px;color:#ff7a6b;display:none}
.deckerr.show{display:block}
.deckok{margin-top:22px;animation:tmUp .6s var(--ease) both}
.deckok-t{margin:0;font-size:18px;line-height:1.3;color:var(--ink)}
.deckok-t b{font-weight:600}
.deckok-s{margin:10px 0 0;font-size:14px}
.deck-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.deck-note .ulink,.deckok-s .ulink{color:var(--color-accent);text-decoration:none}
.deck-note .ulink:hover,.deckok-s .ulink:hover{text-decoration:underline}
.inv-lines{margin-top:clamp(40px,5vw,64px)}
@media (max-width:767.9px){
  .deck-card{grid-template-columns:1fr;gap:26px;padding:22px 20px 24px;margin-top:34px;border-radius:18px}
  .deck-stack{margin:0 10% 4% 2%}
  .deck-h{font-size:23px}
  .deckform{flex-direction:column}
  .decksub{height:52px}
  .deck-note{text-align:center}
}
/* ---- Ask: the intelligence chapter opens dark, the founder quote's grammar ---- */
section.band-ink#ask::before{-webkit-mask-image:none;mask-image:none;box-shadow:none;background:linear-gradient(180deg,#fff 0,#1d1d1f var(--feather),#1d1d1f calc(100% - var(--feather)),#f4f4f6 100%)}
#ask.band{padding-top:calc(var(--gap-section)*.9);padding-bottom:calc(var(--gap-section)*.9)}
#ask>canvas.flow{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
#ask .eyebrow{color:rgba(255,253,249,.62);opacity:1}
/* the bar is a white object on the dark band: its own ink, whatever the band says */
#ask .askbar{--ink:#1d1d1f;--ink-2:rgba(29,29,31,.72);--ink-3:rgba(29,29,31,.5);color:#1d1d1f;border-color:rgba(255,255,255,.18);box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
#ask .askbar .ask-go{background:#1d1d1f}
#ask .askbar .ask-go svg{stroke:#fff}
#ask .askbar:hover{border-color:rgba(255,255,255,.34)}
#ask .ask-chips span{color:rgba(255,253,249,.78);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
#ask .ask-cap{color:rgba(255,253,249,.66)}
#machine.band{padding-top:calc(var(--gap-section)*.6)}
@media (max-width:639.9px){#ask.band{padding-top:calc(var(--gap-section)*.8);padding-bottom:calc(var(--gap-section)*.8)}}
/* ============================================================
   PASS 48 (2026-09-21): sign in from anywhere; connect your brokerage.
   ============================================================ */
/* ---- inside every overlay the capsule drops in (desktop) and the bar stays up (phones); the open menu keeps Sign in ---- */
body.tmopen:not(.onb-active):not(.supopen) .ctabar{transform:translate(-50%,0);pointer-events:auto}
body.locked:not(.tmopen):not(.onb-active) .hdr-signin{visibility:visible;pointer-events:auto}
@media (max-width:767.9px){
  body.tmopen:not(.onb-active):not(.supopen) .mcta{transform:none}
  .tmov{padding-bottom:calc(116px + env(safe-area-inset-bottom))}
}
/* the bar's two buttons never shrink below their words, so on the narrowest phones the long French and German labels
   pushed Sign in past the edge of the screen. There the labels drop a size and the buttons share the row by their words. */
@media (max-width:359.9px){
  html[lang="fr"] .mcta .ghost,html[lang="de"] .mcta .ghost{font-size:13.5px;padding-left:8px;padding-right:8px;flex:1 1 auto}
}
/* the Media overlay is dark in both themes: the capsule and the bar follow it */
body:has(#mvov.open) .ctabar{background:rgba(255,255,255,.112)}
body:has(#mvov.open) .cb-in{background:rgba(22,22,26,.92);color:#f5f5f7}
body:has(#mvov.open) .cb-in .ghost.cta-solid{background-color:#f5f5f7;border-color:#f5f5f7;color:#0b0b0d;background-image:none}
body:has(#mvov.open) .cb-in .ctabar-signin{border-color:rgba(255,255,255,.3);color:#f5f5f7;background-image:none}
body:has(#mvov.open) .mcta{background:rgba(22,22,26,.86);border-top-color:rgba(255,255,255,.112)}
body:has(#mvov.open) .mcta .ghost.cta-solid{background-color:#f5f5f7;border-color:#f5f5f7;color:#0b0b0d;background-image:none}
body:has(#mvov.open) .mcta .ghost:not(.cta-solid){border-color:rgba(255,255,255,.4);color:#f5f5f7;background-image:none}
/* ---- the brokerage fold: one card between the settings strip and the module index, inside the same band ---- */
#brokerage.band{padding-top:0;padding-bottom:0}
#brokerage::before{-webkit-mask-image:none;mask-image:none;box-shadow:none!important}
.brk-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,60px);align-items:center;max-width:1180px;margin:0 auto;padding:clamp(28px,3.4vw,48px) clamp(24px,3.8vw,58px);
  background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:22px;box-shadow:0 30px 80px -44px rgba(11,99,230,.32),0 2px 12px rgba(0,0,0,.04);text-align:left;color:var(--ink)}
.brk-new{margin:0 0 14px}
.brk-new span{display:inline-block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:#0b63e6;background:rgba(11,99,230,.09);border-radius:980px;padding:6px 11px}
.brk-h{margin:0;font-size:clamp(26px,2.9vw,40px);line-height:1.08;letter-spacing:-.026em;font-weight:600;color:var(--ink);text-wrap:balance}
.brk-h b{font-weight:600;color:var(--color-accent)}
.brk-p{margin:14px 0 0;font-size:16.5px;line-height:1.5;color:var(--ink-2);max-width:48ch}
.brk-pts{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
.brk-pts li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;row-gap:3px;align-items:start}
.brk-pts svg{grid-row:1 / span 2;width:22px;height:22px;margin-top:1px;fill:none;stroke:#0b63e6;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.brk-t{font-size:14.5px;line-height:1.25;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.brk-s{grid-column:2;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.brk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:30px}
.brk-foot .ghost.cta-solid{padding:17px 30px;font-size:14.5px}
.brk-by{display:inline-flex;align-items:center;gap:10px}
.brk-by-l{font-size:12.5px;color:var(--ink-2)}
.brk-chip{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:980px;background:#fff;border:1px solid rgba(0,0,0,.1)}
.brk-chip img{display:block;height:14px;width:auto}
[dir="rtl"] .brk-card{text-align:right}
@media (max-width:767.9px){
  .brk-card{grid-template-columns:1fr;gap:22px;padding:24px 20px 26px;border-radius:18px}
  .brk-h{font-size:27px}
  .brk-p{font-size:15.5px}
  .brk-foot{flex-direction:column;align-items:stretch;gap:16px}
  .brk-foot .ghost{text-align:center}
  .brk-by{justify-content:center}
}

/* ============================================================
   PASS 49 (2026-09-21): the brokerage picture. Bank, wire, link, and an order ticket.
   One inline SVG (viewBox 504x320) so it is sharp at every width and identical in every language;
   the candles are generated from numbers (scratchpad brkart.py), the ticket is dark in both themes
   because the product is. Buy and Sell are the only words and they go through the dictionary.
   ============================================================ */
.brk-art svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto;color:var(--ink);overflow:visible;direction:ltr}
.brk-art text{font-family:inherit;font-variant-numeric:tabular-nums;stroke:none}
.brk-bank{fill:#fff;stroke:rgba(0,0,0,.1);stroke-width:1}
.brk-ink{stroke:#1d1d1f;stroke-width:1.9}
.brk-live{fill:#22ab94;stroke:#fff;stroke-width:2.5}
.brk-ping{fill:#22ab94;opacity:0;transform-box:fill-box;transform-origin:center}
.brk-rail{stroke:rgba(11,99,230,.16);stroke-width:2}
.brk-wire{stroke:#0b63e6;stroke-width:2;stroke-dasharray:3 9}
.brk-halo{fill:#fff}
.brk-badge{fill:#0b63e6;transform-box:fill-box;transform-origin:center}
.brk-link{stroke:#fff;stroke-width:2}
.brk-port{fill:#0b63e6;stroke:#fff;stroke-width:2}
.brk-pan{fill:#0d0e12;stroke:rgba(255,255,255,.06);stroke-width:1}
.brk-sym{fill:#fff;font-size:15px;font-weight:600;letter-spacing:.01em}
.brk-ex{fill:#7c828c;font-size:9px;font-weight:600;letter-spacing:.09em}
.brk-px{fill:#fff;font-size:14px;font-weight:600}
.brk-chg{fill:rgba(34,171,148,.17)}
.brk-chgt{fill:#3fd0b6;font-size:9.5px;font-weight:600}
.brk-hair{stroke:rgba(255,255,255,.08);stroke-width:1}
.brk-grid{stroke:rgba(255,255,255,.045);stroke-width:1}
.brk-under{fill:url(#brkGlow)}
.brk-c path{stroke-width:1.3}
.brk-c.u path{stroke:#22ab94}.brk-c.u rect{fill:#22ab94}
.brk-c.d path{stroke:#f23645}.brk-c.d rect{fill:#f23645}
.brk-c{transform-box:fill-box;transform-origin:50% 50%}
/* the gap is longer than the path and the hidden offset sits past its end, so a round cap never leaves a speck at the end of the undrawn line */
.brk-line{stroke:#5b9dff;stroke-width:1.9;stroke-dasharray:1 1.2;stroke-dashoffset:0}
.brk-last path{stroke:#22ab94;stroke-width:1;stroke-dasharray:2 3;opacity:.75}
.brk-last rect{fill:#22ab94}
.brk-last text{fill:#fff;font-size:9.5px;font-weight:700}
.brk-mark{fill:#5b9dff;transform-box:fill-box;transform-origin:50% 0}
.brk-step{stroke:rgba(255,255,255,.2);stroke-width:1}
.brk-stepi{stroke:#c9ced6;stroke-width:1.5}
.brk-qty{fill:#fff;font-size:13px;font-weight:600}
.brk-cost{fill:#9aa1ab;font-size:11.5px;font-weight:500}
.brk-buy{fill:#22ab94;transform-box:fill-box;transform-origin:center}
.brk-bt{fill:#fff;font-size:12.5px;font-weight:600}
.brk-sell{fill:rgba(242,54,69,.13);stroke:rgba(242,54,69,.5);stroke-width:1}
.brk-st{fill:#ff6b78;font-size:12.5px;font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .brk-wire{animation:brkFlow 1.5s linear infinite}
  .brk-badge{animation:brkPulse 3.2s ease-in-out infinite}
  .brk-ping{animation:brkPing 2.6s ease-out infinite}
  .js [data-reveal] .brk-c{opacity:0;transform:scaleY(.05)}
  .js [data-reveal].in .brk-c{opacity:1;transform:none;transition:transform .55s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i)*45ms),opacity .3s ease calc(.25s + var(--i)*45ms)}
  .js [data-reveal] .brk-line{stroke-dashoffset:1.05}
  .js [data-reveal].in .brk-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1) .95s}
  .js [data-reveal] .brk-last,.js [data-reveal] .brk-under{opacity:0}
  .js [data-reveal].in .brk-last,.js [data-reveal].in .brk-under{opacity:1;transition:opacity .6s ease 1.7s}
  .js [data-reveal] .brk-mark{opacity:0;transform:translateY(6px) scale(.5)}
  .js [data-reveal].in .brk-mark{opacity:1;transform:none;transition:transform .45s cubic-bezier(.2,1.4,.4,1) 2.15s,opacity .25s ease 2.15s}
  .js [data-reveal].in .brk-buy{animation:brkPress .5s ease 1.95s 1 both}
}
@keyframes brkFlow{to{stroke-dashoffset:-24}}
@keyframes brkPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes brkPing{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.7)}}
@keyframes brkPress{0%{transform:scale(1)}40%{transform:scale(.955)}100%{transform:scale(1)}}
@media (max-width:767.9px){.brk-art svg{max-width:420px}}
/* at 320px "Powered by" broke into two lines beside the logo chip: the label stays whole and the chip drops under it when the row is full */
.brk-by{flex-wrap:wrap}
.brk-by-l{white-space:nowrap}
@media (max-width:339.9px){.brk-chip{padding:0 11px}}

/* ============ QM landing tokens for the onboarding chrome ============ */
.onb-scrim,.onb-stage,.onb-panel,.onb-deskbar,.onb-confirm,.onb-toast,.onb-tip,.onb-revnav{
  /* relit 2026-09: the flow now sits on a white sheet like every other overlay */
  --display:'Inter',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'Inter',ui-sans-serif,system-ui,sans-serif;
  --text-1:#1d1d1f;--text-2:rgba(29,29,31,.92);
  --text-3:rgba(29,29,31,.74);--text-4:rgba(29,29,31,.5);
  --cyan:#0b63e6;--cyan-hot:#0a56c8;--cyan-deep:#0b63e6;
  --green:#1f9d55;--red:#d9463e;--amber:#b8860b;
  --border-soft:rgba(0,0,0,.12);--border-mid:rgba(0,0,0,.26);--border-hot:rgba(0,0,0,.5);
}
/* the page melts out under the flow, same as the menu */
header{transition:opacity .45s var(--ease)}
body.onb-active main,body.onb-active footer,body.onb-active header{opacity:0;pointer-events:none}
body.onb-active{overflow:hidden}
/* the fold-video backdrop behind the panels */
/* ============================================================
   QUASAR MARKETS · ONBOARDING OVERLAY
   Floats over the persistent hero video. Funnel A (Sign In) +
   Funnel B (Sign Up, 4 steps incl. the 17-fold Step 4 tree).
   Design system inherited from index.html (navy + cyan).
   Onboarding typography: Hanken Grotesk everywhere (no IBM Plex);
   Space Grotesk retained for display titles only.
   ============================================================ */

/* --- 0. Onboarding typography + bright-white subtext ---
   Scoped to the onboarding chrome ONLY (the rest of the site keeps
   its IBM Plex tokens). Overriding --body and --mono swaps every
   IBM Plex usage inside onboarding for Hanken Grotesk, while --display
   (Space Grotesk) is left untouched for the big titles. The grey
   subtext tokens are forced bright white. */
.onb-panel,
.onb-deskbar,
.onb-confirm,
.onb-toast,
.onb-tip,
.onb-revnav {
  --display: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'Hanken Grotesk', system-ui, sans-serif;
  --text-2: #1d1d1f;
  --text-3: #1d1d1f;
}

/* --- 2. Scrim: dims the live video ~40% behind the panels --- */
.onb-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5, 17, 31, 0.46);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 520ms ease;
}
body.onb-active .onb-scrim { opacity: 1; pointer-events: auto; }

/* --- 3. Stage + conveyor --- */
.onb-stage {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center;
  padding: 96px 24px 32px;
  pointer-events: none;
}
body.onb-active .onb-stage { pointer-events: auto; }

.onb-panel {
  position: relative;
  width: 100%;
  max-width: 468px;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(7, 16, 28, 0.71);
  backdrop-filter: blur(28px) saturate(165%);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--cyan);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(56, 189, 248, 0.08),
              0 1px 0 rgba(255, 255, 255, 0.07) inset;
  /* crisp, bright white for all primary text inside the glass */
  --text-1: #1d1d1f;
  padding: 30px 30px 28px;
  opacity: 0;
  transform: translateX(30px);
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 460ms ease;
}
.onb-panel.is-wide { max-width: 1120px; }
.onb-panel.enter-right { opacity: 0; transform: translateX(30px); }
.onb-panel.is-active  { opacity: 1; transform: translateX(0); }
.onb-panel.exit-left  { opacity: 0; transform: translateX(-30px); }
.onb-panel.exit-right { opacity: 0; transform: translateX(30px); }

/* scrollbar */
.onb-panel::-webkit-scrollbar { width: 8px; }
.onb-panel::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 8px; }
.onb-panel::-webkit-scrollbar-track { background: transparent; }

/* --- 4. Panel chrome --- */
.onb-close {
  position: absolute; top: 14px; left: 14px;
  width: 30px; height: 30px; border-radius: 7px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  color: var(--text-3); font-size: 16.8px; line-height: 1;
  cursor: pointer; transition: all 180ms ease; z-index: 4;
}
.onb-close:hover { color: var(--text-1); border-color: var(--border-hot); background: rgba(255, 255, 255, 0.08); }

.onb-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cyan);
  display: flex; align-items: center; gap: 9px;
  margin: 6px 0 14px; padding-left: 26px;
}
.onb-eyebrow .bar { width: 22px; height: 1px; background: var(--cyan); }

.onb-title {
  font-family: var(--display); font-weight: 500;
  font-size: 27.3px; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--text-1); margin-bottom: 6px;
}
.onb-title .accent { color: var(--cyan); font-style: italic; }
.onb-sub {
  font-family: var(--body); font-size: 14.2px; line-height: 1.5;
  color: var(--text-1); margin-bottom: 22px;
}

/* --- 5. Progress dots (sign-up only) --- */
.onb-steps {
  display: flex; gap: 7px; align-items: center;
  margin-bottom: 22px;
}
.onb-rail{position:relative;height:3px;margin:6px 0 26px 44px;border-radius:3px;
  background:rgba(125,178,255,.14)}
.onb-rail-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
  background:linear-gradient(90deg,rgba(56,189,248,.45),var(--cyan));
  box-shadow:0 0 12px rgba(56,189,248,.5);
  transition:width 700ms cubic-bezier(.22,1,.36,1)}
.onb-rail-dot{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 14px rgba(56,189,248,.9);
  transition:left 700ms cubic-bezier(.22,1,.36,1)}
.onb-steps .dot {
  flex: 1; height: 3px; border-radius: 3px;
  background: rgba(125, 178, 255, 0.16);
  transition: background 300ms ease;
}
.onb-steps .dot.done { background: rgba(56, 189, 248, 0.45); }
.onb-steps .dot.active { background: var(--cyan); box-shadow: 0 0 10px rgba(56, 189, 248, 0.6); }

/* --- 6. Fields --- */
.onb-field { margin-bottom: 14px; }
.onb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.onb-label {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-1); margin-bottom: 6px;
}
.onb-inwrap { position: relative; display: flex; align-items: center; }
.onb-input {
  width: 100%; background: rgba(5, 12, 22, 0.55);
  border: 1px solid var(--border-soft); border-radius: 7px;
  color: var(--text-1); font-family: var(--body); font-size: 14.7px;
  padding: 12px 14px; outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.onb-input::placeholder { color: var(--text-4); }
.onb-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12); }
.onb-input.bad { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.onb-input.good { border-color: var(--green); }
.onb-eye {
  position: absolute; right: 10px; background: none; border: none;
  color: var(--text-3); cursor: pointer; padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 160ms ease;
}
.onb-eye svg { display: block; }
.onb-eye:hover { color: var(--text-1); }
.onb-err {
  font-family: var(--body); font-size: 12.1px; color: var(--red);
  margin-top: 5px; min-height: 0; display: none;
}
.onb-err.show { display: block; }
.onb-hint { font-family: var(--body); font-size: 12.1px; color: var(--text-3); margin-top: 5px; }
.onb-hint a, .onb-link { color: var(--cyan); cursor: pointer; text-decoration: none; }
.onb-hint a:hover, .onb-link:hover { text-decoration: underline; }

/* password strength */
.onb-strength { display: flex; gap: 4px; margin: 8px 0 4px; }
.onb-strength .seg { flex: 1; height: 3px; border-radius: 3px; background: rgba(125,178,255,0.16); transition: background 240ms ease; }
.onb-strength.s1 .seg:nth-child(1) { background: var(--red); }
.onb-strength.s2 .seg:nth-child(-n+2) { background: var(--amber); }
.onb-strength.s3 .seg:nth-child(-n+3) { background: var(--cyan); }
.onb-strength.s4 .seg { background: var(--green); }
.onb-rules { list-style: none; display: grid; gap: 3px; margin-top: 6px; }
.onb-rules li { font-family: var(--mono); font-size: 11px; color: var(--text-4); display: flex; align-items: center; gap: 7px; transition: color 200ms ease; }
.onb-rules li::before { content: '○'; color: var(--text-4); font-size: 10.5px; }
.onb-rules li.ok { color: var(--green); }
.onb-rules li.ok::before { content: '●'; color: var(--green); }

/* --- 7. Buttons --- */
.onb-btn {
  width: 100%; font-family: var(--mono); font-size: 13.1px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  padding: 14px 18px; border-radius: 8px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.onb-btn.primary {
  background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 8px 22px rgba(56,189,248,0.4);
}
.onb-btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--cyan-hot) 0%, var(--cyan) 100%);
  transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 12px 30px rgba(56,189,248,0.55);
}
.onb-btn.ghost {
  background: rgba(255, 255, 255, 0.04); color: var(--text-1);
  border: 1px solid var(--border-mid);
}
.onb-btn.ghost:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); background: rgba(56,189,248,0.08); }
.onb-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: saturate(0.5); }
.onb-btn.is-loading { color: transparent; pointer-events: none; }
.onb-btn.is-loading::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  border-radius: 50%; animation: onbSpin 700ms linear infinite;
}
.onb-btn.is-ok { background: linear-gradient(180deg, var(--green) 0%, #16A34A 100%); }
@keyframes onbSpin { to { transform: rotate(360deg); } }

.onb-btnrow { display: grid; gap: 9px; margin-top: 4px; }
.onb-btnrow.two { grid-template-columns: 1fr 1fr; }

/* divider + social */
.onb-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-4); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; }
.onb-or::before, .onb-or::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.onb-social { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.onb-social button {
  background: rgba(0,0,0,0.03); border: 1px solid var(--border-soft);
  border-radius: 8px; color: var(--text-2); font-family: var(--body); font-size: 12.6px;
  padding: 11px 6px; cursor: pointer; transition: all 160ms ease;
  display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600;
}
.onb-social button:hover { border-color: var(--border-hot); color: var(--text-1); background: rgba(0,0,0,0.06); }
.onb-social .g { color: #1d1d1f; }

.onb-switch { text-align: center; font-family: var(--body); font-size: 13.7px; color: var(--text-3); margin-top: 18px; }
.onb-foot { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-4); margin-top: 16px; text-transform: uppercase; }
.onb-foot a { color: var(--text-3); }

/* --- 8. Subscriber tier selector (Step 1) --- */
.onb-tiers { display: grid; gap: 8px; margin: 4px 0 16px; }
.onb-tier {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 13px; border: 1px solid var(--border-soft); border-radius: 8px;
  cursor: pointer; transition: all 160ms ease; background: rgba(5,12,22,0.35);
}
.onb-tier:hover { border-color: var(--border-mid); }
.onb-tier.sel { border-color: var(--cyan); background: rgba(56,189,248,0.08); box-shadow: 0 0 0 1px rgba(56,189,248,0.3) inset; }
.onb-tier .rdo { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--text-4); flex-shrink: 0; margin-top: 1px; transition: all 160ms ease; position: relative; }
.onb-tier.sel .rdo { border-color: var(--cyan); }
.onb-tier.sel .rdo::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--cyan); }
.onb-tier .tt { font-family: var(--body); font-size: 14.2px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 7px; }
.onb-tier .td { font-family: var(--body); font-size: 12.1px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.onb-tier .defn { color: var(--cyan); font-size: 11.6px; cursor: pointer; }

/* --- 9. 2FA code boxes --- */
.onb-otp { display: flex; gap: 9px; justify-content: center; margin: 8px 0 18px; }
.onb-otp input {
  width: 48px; height: 56px; text-align: center;
  font-family: var(--mono); font-size: 25.2px; font-weight: 600; color: var(--text-1);
  background: rgba(5,12,22,0.55); border: 1px solid var(--border-soft); border-radius: 8px;
  outline: none; transition: all 160ms ease;
}
.onb-otp input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(56,189,248,0.14); }
.onb-otp input.filled { border-color: var(--border-mid); }
.onb-otp.ok input { border-color: var(--green); color: var(--green); }
.onb-otp.bad input { border-color: var(--red); animation: onbShake 380ms ease; }
@keyframes onbShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.onb-resend { text-align: center; font-family: var(--body); font-size: 13.1px; color: var(--text-3); margin-top: 4px; }

/* --- 10. Sign-forms (Step 3) --- */
.onb-docs { display: grid; gap: 8px; margin-bottom: 16px; }
.onb-doc {
  border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden;
  background: rgba(5,12,22,0.35); transition: border-color 160ms ease;
}
.onb-doc.signed { border-color: rgba(34,197,94,0.5); }
.onb-doc-head {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px; cursor: pointer;
}
.onb-doc-head:hover { background: rgba(0,0,0,0.03); }
.onb-doc .chk {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--text-4);
  flex-shrink: 0; display: grid; place-items: center; color: transparent; font-size: 12.6px;
  transition: all 160ms ease;
}
.onb-doc.signed .chk { background: var(--green); border-color: var(--green); color: #fff; }
.onb-doc .dt { flex: 1; font-family: var(--body); font-size: 13.7px; font-weight: 500; color: var(--text-1); }
.onb-doc .dmeta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); }
.onb-doc.unsigned-pulse { animation: onbPulse 1s ease 2; }
@keyframes onbPulse { 0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,0)} 50%{box-shadow:0 0 0 3px rgba(56,189,248,0.35)} }
.onb-doc-body {
  max-height: 0; overflow: hidden; transition: max-height 320ms ease;
  border-top: 1px solid transparent;
}
.onb-doc.open .onb-doc-body { max-height: 180px; border-top-color: var(--border-soft); }
.onb-doc-scroll { height: 150px; overflow-y: auto; padding: 12px 13px; font-family: var(--body); font-size: 12.1px; line-height: 1.6; color: var(--text-3); }
.onb-doc-scroll p { margin-bottom: 8px; }
.onb-doc-foot { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; border-top: 1px solid var(--border-soft); }
.onb-doc-foot .agree { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); cursor: not-allowed; display: flex; align-items: center; gap: 7px; }
.onb-doc-foot .agree.ready { color: var(--cyan); cursor: pointer; }
.onb-doc-foot .dl { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); cursor: pointer; }
.onb-doc-foot .dl:hover { color: var(--cyan); }
.onb-esign { margin-bottom: 14px; }

/* --- 11. Step 4: fold tree --- */
.onb-step4-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.onb-deskcount { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.onb-deskcount b { color: var(--cyan); }

.onb-foldgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.onb-foldcard {
  position: relative; display: flex; flex-direction: column; text-align: left;
  padding: 12px 13px 13px;
  border: 1px solid var(--border-soft); border-radius: 9px; cursor: pointer;
  background: rgba(5,12,22,0.40); transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; overflow: hidden;
}
.onb-foldcard:hover { border-color: var(--border-mid); transform: translateY(-1px); }
.onb-foldcard.sel { border-color: #E6C36B; background: rgba(230,195,107,0.10); box-shadow: 0 0 0 1px rgba(230,195,107,0.28) inset, 0 0 18px rgba(230,195,107,0.12); }
.onb-foldcard .fnum { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--cyan); letter-spacing: 0.1em; padding-right: 56px; }
.onb-foldcard .fname { display: block; font-family: var(--display); font-size: 15.8px; font-weight: 600; color: var(--text-1); line-height: 1.2; margin: 5px 0 3px; }
.onb-foldcard .ftag { display: block; font-family: var(--body); font-size: 11.6px; color: var(--text-3); line-height: 1.35; }
.onb-foldcard .ftype { position: absolute; top: 11px; right: 11px; font-family: var(--mono); font-size: 8.9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); background: rgba(5,12,22,0.85); border: 1px solid var(--border-soft); border-radius: 3px; padding: 1px 5px; }
.onb-foldcard .fcheck { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 50%; background: #E6C36B; color: #05111F; display: none; place-items: center; font-size: 12.6px; font-weight: 700; cursor: pointer; z-index: 2; transition: transform 120ms ease, background 120ms ease; }
.onb-foldcard .fcheck:hover { transform: scale(1.12); background: #ff6b6b; color: #fff; font-size: 0; }
.onb-foldcard .fcheck:hover::after { content: '\00d7'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13.7px; }
.onb-foldcard.sel .fcheck { display: grid; }
.onb-foldcard.sel .ftype { display: none; }

/* expanded fold editor */
.onb-foldedit { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 16px; }
.onb-foldedit-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.onb-foldedit-head .en { font-family: var(--display); font-size: 19.9px; font-weight: 600; color: var(--text-1); }
.onb-foldedit-head .et { font-family: var(--body); font-size: 12.6px; font-style: italic; color: var(--cyan); }
.onb-foldedit-head .edepth { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); }

.onb-theme { margin-top: 16px; }
.onb-theme-q { font-family: var(--body); font-size: 13.7px; font-weight: 600; color: var(--text-2); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.onb-theme-q .qmode { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); border: 1px solid var(--border-soft); border-radius: 3px; padding: 1px 5px; }

/* chips (market) */
.onb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.onb-chip {
  font-family: var(--body); font-size: 13.1px; color: var(--text-2);
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-soft); background: rgba(5,12,22,0.35);
  transition: all 140ms ease; display: inline-flex; align-items: center; gap: 6px;
}
.onb-chip:hover { border-color: var(--border-mid); color: var(--text-1); }
.onb-chip.sel { border-color: var(--cyan); background: rgba(56,189,248,0.14); color: var(--cyan-hot); }
.onb-chip .x { font-family: var(--mono); font-size: 11.6px; color: var(--text-4); }
.onb-chip.cross { border-style: dashed; }
.onb-chip.cross::after { content: '↗'; font-size: 11.6px; color: var(--cyan); }

/* hover/tap definition tooltip */
.onb-tip {
  position: fixed; z-index: 100000; max-width: 260px; pointer-events: none;
  padding: 9px 12px; border-radius: 9px;
  background: rgba(8,17,30,0.97); border: 1px solid var(--border-mid);
  box-shadow: 0 14px 40px rgba(0,0,0,0.16);
  font-family: var(--body); font-size: 12.6px; line-height: 1.4; color: var(--text-1);
  opacity: 0; transform: translateY(4px); transition: opacity 120ms ease, transform 120ms ease;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.onb-tip.show { opacity: 1; transform: translateY(0); }
.onb-tip::after {
  content: ''; position: absolute; left: var(--tip-arrow, 50%); margin-left: -6px; bottom: -6px;
  border: 6px solid transparent; border-top-color: rgba(8,17,30,0.97);
}
.onb-tip.below::after { bottom: auto; top: -6px; border-top-color: transparent; border-bottom-color: rgba(8,17,30,0.97); }
.onb-chip[data-tip], .onb-opt[data-tip] { position: relative; }

/* radios/toggles (setup) */
.onb-opts { display: grid; gap: 7px; }
.onb-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: 8px; cursor: pointer;
  background: rgba(5,12,22,0.35); transition: all 140ms ease;
  font-family: var(--body); font-size: 13.7px; color: var(--text-2);
}
.onb-opt:hover { border-color: var(--border-mid); color: var(--text-1); }
.onb-opt.sel { border-color: var(--cyan); background: rgba(56,189,248,0.08); color: var(--text-1); }
.onb-opt .mk { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--text-4); flex-shrink: 0; display: grid; place-items: center; color: transparent; font-size: 11.6px; transition: all 140ms ease; }
.onb-opt.sel .mk { background: var(--cyan); border-color: var(--cyan); color: #05111F; }

/* L4 children */
.onb-children { margin: 8px 0 2px 6px; padding-left: 12px; border-left: 1px solid var(--border-soft); display: none; }
.onb-children.show { display: block; }
.onb-children .onb-theme-q { font-size: 11.6px; color: var(--text-3); margin-bottom: 7px; }

.onb-crosslinks { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-soft); }
.onb-crosslinks .cl-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); margin-bottom: 8px; }

.onb-step4-foot { display: flex; gap: 9px; margin-top: 20px; align-items: center; }
.onb-step4-foot .onb-btn { width: auto; flex: 1; }
.onb-addfold { background: none; border: 1px dashed var(--border-mid); color: var(--text-3); }
.onb-addfold:hover { color: var(--cyan); border-color: var(--cyan); }

.onb-capnote { font-family: var(--body); font-size: 12.1px; color: var(--amber); margin-top: 10px; display: none; }
.onb-capnote.show { display: block; }

/* --- 11b. Desk-ready sticky bottom bar (Step 4 only) ---
   Translucent glass so the hero video reads through the bottom. */
.onb-deskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: linear-gradient(180deg, rgba(8,17,30,0.42), rgba(5,12,22,0.58));
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid rgba(56,189,248,0.28);
  box-shadow: 0 -8px 34px rgba(0,0,0,0.10);
  transform: translateY(115%);
  transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.onb-deskbar.show { transform: translateY(0); pointer-events: auto; }
.onb-deskbar-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 24px; }
.onb-deskbar-msg { display: flex; flex-direction: column; gap: 3px; }
.onb-deskbar-ready { display: inline-flex; align-items: center; gap: 9px; font-family: var(--body); font-size: 14.7px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.01em; }
/* crisp green badge with a CSS-drawn white check */
.onb-deskbar-ready .tick {
  position: relative; flex: 0 0 auto;
  width: 19px; height: 19px; border-radius: 50%;
  background: linear-gradient(180deg, #36D77B 0%, var(--green) 100%);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.16), 0 2px 6px rgba(34,197,94,0.42);
  display: inline-flex; align-items: center; justify-content: center;
}
.onb-deskbar-ready .tick::after {
  content: ''; width: 4px; height: 8px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.onb-deskbar-sub { font-family: var(--body); font-size: 12.1px; color: var(--text-3); }
.onb-deskbar-sub b { color: var(--text-2); font-weight: 500; }
.onb-deskbar-cta {
  background: linear-gradient(95deg, var(--cyan), #22A7E8); color: #04121F; border: none;
  padding: 13px 30px; border-radius: 11px; font-family: var(--mono); font-size: 13.7px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 6px 26px rgba(56,189,248,0.4); animation: onbCtaPulse 2.4s ease-in-out infinite;
  transition: filter .18s ease, transform .18s ease; white-space: nowrap;
}
.onb-deskbar-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
@keyframes onbCtaPulse {
  0%,100% { box-shadow: 0 6px 26px rgba(56,189,248,0.32); }
  50% { box-shadow: 0 6px 34px rgba(56,189,248,0.6); }
}
/* keep the panel clear of the fixed bar while it's showing */
body.onb-deskbar-on .onb-stage { padding-bottom: 110px; }
body.onb-deskbar-on .onb-panel { max-height: calc(100vh - 206px); }

/* --- 12. Toast --- */
.onb-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
  z-index: 130; background: rgba(7,16,28,0.95); border: 1px solid var(--border-mid);
  border-left: 2px solid var(--green); border-radius: 8px; padding: 12px 18px;
  font-family: var(--body); font-size: 13.7px; color: var(--text-1);
  box-shadow: 0 12px 30px rgba(0,0,0,0.16); opacity: 0; pointer-events: none;
  transition: all 320ms cubic-bezier(0.22,1,0.36,1); display: flex; align-items: center; gap: 10px;
}
.onb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.onb-toast .tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

/* --- 13. Confirm dialog (leave sign-up) --- */
.onb-confirm {
  position: fixed; inset: 0; z-index: 140; display: none; place-items: center; padding: 24px;
  background: rgba(5,17,31,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.onb-confirm.show { display: grid; }
.onb-confirm .box {
  max-width: 380px; width: 100%; background: rgba(7,16,28,0.96);
  border: 1px solid var(--border-mid); border-radius: 10px; padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.2);
}
.onb-confirm .box h4 { font-family: var(--display); font-size: 18.9px; color: var(--text-1); margin-bottom: 8px; }
.onb-confirm .box p { font-family: var(--body); font-size: 13.7px; color: var(--text-3); margin-bottom: 20px; line-height: 1.5; }

/* --- 14. Final "enter platform" success --- */
.onb-success { text-align: center; padding: 8px 0; }
.onb-success .ring {
  width: 64px; height: 64px; border-radius: 50%; margin: 4px auto 18px;
  background: radial-gradient(circle, rgba(34,197,94,0.25), transparent 70%);
  display: grid; place-items: center;
}
.onb-success .ring .ck { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, var(--green), #16A34A); color: #fff; display: grid; place-items: center; font-size: 23.1px; }
.mcp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.mcp-plan { display: grid; gap: 2px; text-align: left; padding: 14px 16px; cursor: pointer; background: transparent; border: 1px solid var(--border-soft); border-radius: 10px; color: var(--text-1); transition: border-color .2s, background .2s; }
.mcp-plan:hover { border-color: var(--border-mid); }
.mcp-plan.sel { border-color: var(--cyan); background: rgba(0,229,255,0.06); }
.mcp-plan .mp-lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); }
.mcp-plan.sel .mp-lab { color: var(--cyan); }
.mcp-plan .mp-amt { font-family: var(--display); font-size: 27px; line-height: 1.1; }
.mcp-plan .mp-per { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.mcp-plan .mp-note { font-size: 11px; color: var(--text-4); margin-top: 2px; }
@media (max-width: 420px) { .mcp-plans { grid-template-columns: 1fr; } }
.onb-mcp-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: 10px; }
.onb-mcp-price .mp-amt { font-family: var(--display); font-size: 38px; line-height: 1; color: var(--text-1); }
.onb-mcp-price .mp-per { font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.onb-mcp-price .mp-note { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.mcp-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 14px; color: var(--text-1); }
.mcp-line b { font-family: var(--mono); white-space: nowrap; }
.mcp-line.sub { padding-top: 0; font-size: 12px; color: var(--text-3); }
.onb-desk-summary { text-align: left; background: rgba(5,12,22,0.6); border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px; margin: 18px 0; }
.onb-desk-summary .dsl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); margin-bottom: 8px; }
.onb-desk-summary .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.onb-desk-summary .lchip { font-family: var(--mono); font-size: 11px; color: var(--cyan-hot); background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.3); border-radius: 5px; padding: 4px 8px; }
.onb-desk-summary .sug { color: var(--text-3); background: rgba(0,0,0,0.03); border-color: var(--border-soft); }

/* --- 15. Responsive --- */
@media (max-width: 720px) {
  .onb-stage { padding: 80px 12px 16px; }
  .onb-panel { padding: 26px 18px 22px; max-height: calc(100vh - 96px); }
  .onb-row2 { grid-template-columns: 1fr; }
  .onb-otp input { width: 42px; height: 50px; font-size: 21px; }
  .onb-foldgrid { grid-template-columns: 1fr 1fr; }
  .onb-social { grid-template-columns: 1fr; }
  .onb-deskbar-inner { padding: 12px 14px; gap: 12px; }
  .onb-deskbar-cta { flex: 1; padding: 13px 16px; text-align: center; }
  body.onb-deskbar-on .onb-stage { padding-bottom: 104px; }
  body.onb-deskbar-on .onb-panel { max-height: calc(100vh - 168px); }
}
@media (prefers-reduced-motion: reduce) {
  #scroll-spacer, .nav-wrap, .nav-progress, .rail,
  .onb-panel, .onb-scrim, .onb-toast { transition: opacity 200ms linear !important; transform: none !important; }
  .onb-panel.enter-right, .onb-panel.exit-left, .onb-panel.exit-right { transform: none !important; }
  body.onb-active #scroll-spacer, body.onb-active .nav-wrap,
  body.onb-active .nav-progress, body.onb-active .rail { transform: none !important; }
}

/* ============ QM editorial re-skin: space black, hairlines, zero radius ============ */
.onb-scrim{background:rgba(255,255,255,.76);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
/* no box: the flow floats free in space over the globe, a soft glow keeps it readable */
.onb-panel{background:radial-gradient(140% 100% at 50% 42%,rgba(255,255,255,.97) 38%,rgba(255,255,255,.82) 62%,rgba(255,255,255,0) 82%);
  border:0;border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;max-width:520px}
.onb-panel.is-wide{background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.08);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.12)} /* the sector tree keeps a surface */
.onb-close,.onb-input,.onb-otp input,.onb-doc,.onb-foldcard,.onb-chip,.onb-opt,.onb-btn,
.onb-social button,.onb-tier,.onb-confirm .box,.onb-toast,.onb-desk-summary,
.onb-desk-summary .lchip,.onb-tip,.onb-foldcard .ftype,.onb-theme-q .qmode,
.onb-steps .dot,.onb-strength .seg,.onb-deskbar-cta{border-radius:0}
.onb-doc .chk,.onb-opt .mk{border-radius:50%}
#agreeall-chk{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--text-4);
  flex-shrink:0;display:grid;place-items:center;font-size:12.6px;transition:all 160ms ease}
.onb-eyebrow{letter-spacing:.02em;font-size:12px;color:var(--text-3)}
.onb-title{font-weight:400;letter-spacing:-.02em}
.onb-title .accent{font-style:normal;color:var(--text-1);font-weight:700}
.onb-label{letter-spacing:.02em}
/* fields as hairline underlines — type on space, no boxes */
.onb-input{background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.24);
  padding:12px 2px;font-size:15.5px}
.onb-input:focus{box-shadow:none;border-bottom-color:var(--cyan)}
.onb-input.bad{box-shadow:none;border-bottom-color:var(--red)}
.onb-input.good{border-bottom-color:var(--green)}
.onb-eye{right:2px}
.onb-btn{font-weight:400;letter-spacing:.04em;font-size:13px}
.onb-btn.primary{background:var(--text-1);color:#fff;box-shadow:none;border-radius:980px}
.onb-btn.primary:hover:not(:disabled){background:#000;transform:none;box-shadow:none}
.onb-btn.primary.is-loading::after{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.onb-btn.ghost{background:transparent;border:1px solid var(--text-1);color:var(--text-1);border-radius:980px}
.onb-btn.ghost:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);background:transparent}
.onb-btn.is-ok{background:var(--green);color:#fff}
.onb-btn:disabled{opacity:.35;filter:none}
.onb-steps .dot.active{box-shadow:none}
.onb-otp input{background:transparent;border:1px solid rgba(0,0,0,.24);border-radius:10px}
.onb-social{grid-template-columns:1fr 1fr}
.onb-title{font-size:clamp(28px,4.4vw,36px)}
/* progress: one seamless line filling left to right, a lit tip on the leading edge */
.onb-steps{gap:0;margin-bottom:24px}
.onb-steps .dot{height:2px;border-radius:0;background:rgba(0,0,0,.1)}
.onb-steps .dot.done{background:rgba(11,99,230,.65)}
.onb-steps .dot.active{position:relative;background:linear-gradient(90deg,rgba(11,99,230,.65),var(--cyan-hot))}
.onb-steps .dot.active::after{content:"";position:absolute;right:-3px;top:50%;width:7px;height:7px;
  border-radius:50%;transform:translateY(-50%);background:var(--cyan-hot);box-shadow:0 0 12px var(--cyan-hot)}
.onb-trust{text-align:center;font-size:12px;letter-spacing:.02em;color:var(--text-3);margin-top:12px}
.onb-foldcard{background:rgba(0,0,0,.035);border-radius:14px}
.onb-foldcard.sel{border-color:var(--cyan);background:rgba(11,99,230,.13);
  box-shadow:0 0 0 1px rgba(11,99,230,.3) inset}
.onb-foldcard .fcheck{background:var(--cyan);color:#fff;border-radius:50%}
.onb-chip.sel{color:var(--text-1)}
.onb-doc,.onb-tier,.onb-opt{background:rgba(0,0,0,.03);border-radius:12px}
.onb-doc.signed{border-color:rgba(127,174,142,.55)}
.onb-deskbar{background:rgba(255,255,255,.9);border-top:1px solid rgba(0,0,0,.08);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:none}
.onb-deskbar-cta{background:var(--text-1);color:#fff;box-shadow:none;animation:none;border-radius:980px;
  font-weight:400;letter-spacing:.04em}
.onb-deskbar-cta:hover{filter:none;transform:none;background:#000}
.onb-toast{background:rgba(255,255,255,.97);border-left:2px solid var(--green);box-shadow:0 12px 30px rgba(0,0,0,.14);border-radius:12px}
.onb-confirm{background:rgba(255,255,255,.7)}
.onb-confirm .box{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.16)}
.onb-confirm .box h4{font-weight:400;letter-spacing:-.01em}
.onb-tip{background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 12px 30px rgba(0,0,0,.14)}
.onb-tip::after{border-top-color:#fff}
.onb-tip.below::after{border-top-color:transparent;border-bottom-color:#fff}
.onb-success .ring{background:radial-gradient(circle,rgba(127,174,142,.22),transparent 70%)}
.onb-success .ring .ck{background:var(--green);color:#fff}
.onb-deskbar-ready .tick{background:var(--green);box-shadow:none}
.onb-opt.sel .mk{color:#fff}
.onb-desk-summary{background:rgba(0,0,0,.03);border-radius:14px}
.onb-desk-summary .lchip{color:var(--cyan-hot);background:rgba(11,99,230,.12);border-color:rgba(11,99,230,.35)}


/* polish: sentence case, no tracking, no pulses */
.onb-eyebrow,.onb-label,.onb-btn,.onb-chip,.onb-trust,.onb-tier,.onb-doc,.onb-deskbar-cta{text-transform:none;letter-spacing:0}
.onb-btn{font-weight:500;font-size:15px}
/* social sign-in is a 2x2 grid at every width: Google | X / LinkedIn | Facebook */

/* ============================================================
   PASS 37 (2026-09-18): the flow meets the standard of the page. Pills, a round close, the real logo,
   sentence case, nothing tracked, nothing boxed that the site does not box.
   ============================================================ */
.onb-stage *,.onb-deskbar *,.onb-confirm *,.onb-toast *,.onb-tip *{text-transform:none!important}
.onb-stage *:not(.onb-title):not(.onb-title *),.onb-deskbar *,.onb-confirm *,.onb-toast *,.onb-tip *{letter-spacing:0!important}
.onb-close{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:0;
  background:#fff;border:1px solid rgba(0,0,0,.14);color:var(--text-1);box-shadow:0 4px 14px rgba(0,0,0,.08);transition:background-color .25s ease,color .25s ease,transform .2s ease}
.onb-close svg{width:12px;height:12px;display:block}
.onb-close:hover{background:var(--text-1);color:#fff;border-color:var(--text-1)}
.onb-close:active{transform:scale(.94)}
.onb-close:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* the eyebrow carries the logo instead of a rule, and sits clear of the close */
.onb-eyebrow{gap:9px;font-size:13px;color:var(--text-3);align-items:center}
.onb-eyebrow .bar{width:20px;height:20px;flex:none;border-radius:6px;background:url("/qm_media/app/favicon-160.png") center/cover no-repeat;box-shadow:0 1px 3px rgba(0,0,0,.2)}
/* screens with no progress line: the eyebrow sits beside the close, centred on it */
.onb-close + .onb-eyebrow{margin:-16px 0 22px;padding-left:34px;min-height:40px}
@media (max-width:640px){.onb-close + .onb-eyebrow{margin-top:-12px;padding-left:46px}}
/* social sign in: the site's secondary pill */
.onb-with{margin:0 0 10px;font-size:13px;color:var(--text-3)}
.onb-social{gap:10px}
.onb-social button{height:46px;border-radius:980px;background:#fff;border:1px solid rgba(0,0,0,.16);font-family:var(--body);font-size:15px;font-weight:500;color:var(--text-1);cursor:pointer;
  transition:border-color .25s ease,background-color .25s ease,transform .2s ease}
.onb-social button:hover{border-color:rgba(0,0,0,.42);background:#fff;color:var(--text-1)}
.onb-social button:active{transform:scale(.98)}
.onb-social button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.onb-or{font-size:13px;color:var(--text-4);margin:20px 0}
.onb-label{font-size:13px;color:var(--text-3)}
.onb-hint,.onb-foot{font-size:13px}
.onb-foot a{color:var(--cyan);cursor:pointer}
.onb-rules{margin-bottom:16px}
.onb-btn .cd{font-variant-numeric:tabular-nums}
.onb-btn .cdw{white-space:nowrap}
.onb-btn{height:50px}
.onb-btn[style*="width:auto"]{height:auto}
.onb-success .ck svg{width:26px;height:26px;display:block}
/* sectors: a tag you can read, a number without a total */
.onb-foldcard .ftype{background:rgba(0,0,0,.055);border:0;color:var(--text-3);border-radius:980px;padding:3px 9px;font-size:11px;top:12px;right:12px}
.onb-foldcard .fnum{font-size:12.5px;color:var(--cyan);padding-right:64px}
.onb-deskcount{font-size:13px;color:var(--text-3)}
.onb-theme-q .qmode,.onb-foldedit-head .edepth{font-size:12px;border-radius:980px}
.onb-doc .dmeta{font-size:12px;color:var(--text-4)}
.onb-desk-summary .dsl{font-size:13px;color:var(--text-3);margin-bottom:10px}
.onb-desk-summary .lchip{border-radius:980px;padding:6px 12px;font-size:13px;border:0;background:rgba(11,99,230,.1);color:var(--cyan-hot)}
.onb-deskbar-cta{height:46px;padding:0 22px;font-size:15px;font-weight:500}
.onb-chip,.onb-opt{border-radius:980px}
/* option chips: the grey fill was the old dark skin's tint showing through on white, and it read as disabled */
.onb-chip{background:#fff;border:1px solid rgba(0,0,0,.16);color:var(--text-1);font-size:14px;padding:8px 14px}
.onb-chip:hover{border-color:rgba(0,0,0,.42);color:var(--text-1)}
.onb-chip.sel{background:rgba(11,99,230,.1);border-color:var(--cyan);color:var(--cyan-hot)}
.onb-tier,.onb-doc{border-radius:14px}

html[data-theme="dark"] .scrolled header{background:rgba(22,22,26,.86)}
html[data-theme="dark"] header{background:rgba(22,22,26,.72);border-bottom:1px solid rgba(255,255,255,0.084)}
html[data-theme="dark"] nav.desk .lang>button{border:1px solid rgba(255,255,255,0.252)}
html[data-theme="dark"] .lang>button svg{stroke:rgba(245,245,247,.85)}
html[data-theme="dark"] .lang-menu{background:#151518;border:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .lang-menu button:hover,html[data-theme="dark"] .lang-menu button:focus-visible{background:rgba(255,255,255,0.07)}
html[data-theme="dark"] .ghost.big.cta-xl{color:#0b0b0d}
html[data-theme="dark"] .ghost.cta-solid{color:#0b0b0d}
html[data-theme="dark"] .mnav{background:rgba(22,22,26,.9)}
html[data-theme="dark"] .mnav::after{background:conic-gradient(from 0deg,transparent 0 82%,rgba(255,255,255,0.049) 91%,transparent 100%)}
html[data-theme="dark"] .tile{border:1px solid rgba(255,255,255,0.084);background-color:#1b1b1f}
html[data-theme="dark"] .m-cta .tile{border-color:rgba(255,255,255,0.196)}
html[data-theme="dark"] section.band::before{background:rgba(27,27,31,.92)}
html[data-theme="dark"] section.band-glow::before{background:radial-gradient(60% 70% at 18% 30%,rgba(40,208,245,.28),transparent 70%),
  radial-gradient(50% 60% at 82% 24%,rgba(124,92,255,.22),transparent 70%),
  radial-gradient(60% 60% at 50% 100%,rgba(255,143,107,.22),transparent 70%),
  radial-gradient(40% 50% at 50% 50%,rgba(11,99,230,.14),transparent 70%),#151518}
html[data-theme="dark"] .desk-frame{border:1px solid rgba(255,255,255,0.168)}
html[data-theme="dark"] .dk::after{background:linear-gradient(180deg,rgba(255,255,255,0.0) 62%,rgba(0,0,0,.5))}
html[data-theme="dark"] .iv-card{border:1px solid rgba(255,255,255,0.112);background:#151518}
html[data-theme="dark"] .iv-card:hover,html[data-theme="dark"] .iv-card:focus-visible{border-color:rgba(255,255,255,0.3)}
html[data-theme="dark"] .press-logo{background:#151518;border:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .fvid{border:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .fv-btn{border:1px solid #151518}
html[data-theme="dark"] .fv-play:hover .fv-btn,html[data-theme="dark"] .fv-play:focus-visible .fv-btn{background:#151518;color:#f5f5f7}
html[data-theme="dark"] .mvdot{background:rgba(255,255,255,0.3)}
html[data-theme="dark"] .mvbox{border:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .mvsearch{border-bottom:1px solid rgba(255,255,255,0.3)}
html[data-theme="dark"] .mvsearch input::placeholder{color:rgba(255,255,255,.35)}
html[data-theme="dark"] .mvseg,html[data-theme="dark"] .mvfil{border:1px solid rgba(255,255,255,0.196)}
html[data-theme="dark"] .mvpill.on{color:#0b0b0d}
html[data-theme="dark"] .mvcard{border:1px solid rgba(255,255,255,0.084);background:#1b1b1f}
html[data-theme="dark"] .mvthumb{background:linear-gradient(180deg,#26262b,#d9d9df);border-bottom:1px solid rgba(255,255,255,0.07)}
html[data-theme="dark"] .mvline{background:rgba(255,255,255,0.14)}
html[data-theme="dark"] .mvbook{border-top:1px solid rgba(255,255,255,0.14)}
html[data-theme="dark"] .mvcta{color:#0b0b0d}
html[data-theme="dark"] .edsteps{border:1px solid rgba(255,255,255,0.196)}
html[data-theme="dark"] .edstep.on{color:#0b0b0d}
html[data-theme="dark"] .edline{background:rgba(255,255,255,0.14)}
html[data-theme="dark"] .edback:hover{color:#0b0b0d}
html[data-theme="dark"] .eddrop:hover,html[data-theme="dark"] .eddrop.over{background:rgba(255,255,255,0.042)}
html[data-theme="dark"] .edfiles li{border:1px solid rgba(255,255,255,0.112);background:#1b1b1f}
@media (max-width:640px){
html[data-theme="dark"] .edstep{border-top:1px solid rgba(255,255,255,0.084)}
}
html[data-theme="dark"] .mstrip{background:rgba(22,22,26,.8);border-top:1px solid rgba(255,255,255,0.084)}
html[data-theme="dark"] .ivsec{border-top:1px solid rgba(255,255,255,0.14)}
html[data-theme="dark"] .ivmeter li{border-bottom:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .ivbar{background:rgba(255,255,255,0.14)}
html[data-theme="dark"] .ivchip{color:#0b0b0d}
html[data-theme="dark"] .ivrows li{border-top:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .ivchips span{border:1px solid rgba(255,255,255,0.252)}
html[data-theme="dark"] .ivcta{color:#0b0b0d}
html[data-theme="dark"] .ivstats>div{border:1px solid rgba(255,255,255,0.084);background:#1b1b1f}
html[data-theme="dark"] .ivlogos span{background:#151518;border:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .newsin{border-bottom:1px solid rgba(255,255,255,0.3)}
html[data-theme="dark"] .newsin::placeholder{color:rgba(255,255,255,.35)}
html[data-theme="dark"] .newssub{color:#0b0b0d}
html[data-theme="dark"] .supov{background:rgba(22,22,26,.7)}
html[data-theme="dark"] .supbox{background:#151518;border:1px solid rgba(255,255,255,0.14)}
html[data-theme="dark"] .ctabar{background:rgba(255,255,255,0.112)}
html[data-theme="dark"] .cb-in{background:rgba(22,22,26,.92)}
html[data-theme="dark"] .ctabar-signin{border-color:rgba(255,255,255,0.3)}
html[data-theme="dark"] .edgeshell{background:rgba(255,255,255,0.084)}
html[data-theme="dark"] .edgecard{background:rgba(22,22,26,.86)}
html[data-theme="dark"] .tmov{background:rgba(22,22,26,.94)}
html[data-theme="dark"] .tmpills{border:1px solid rgba(255,255,255,0.196)}
html[data-theme="dark"] .tmpill.on{color:#0b0b0d}
html[data-theme="dark"] .tmcard{background:#1b1b1f;border:1px solid rgba(255,255,255,0.084)}
html[data-theme="dark"] .tmph{background:linear-gradient(180deg,#26262b,#d9d9df)}
html[data-theme="dark"] .tmin{background:rgba(22,22,26,.82);border:1px solid rgba(255,255,255,0.196)}
html[data-theme="dark"] .tmin:hover{color:#0b0b0d}
html[data-theme="dark"] .tmx{background:rgba(22,22,26,.8);border:1px solid rgba(255,255,255,0.224)}
html[data-theme="dark"] .tmx:hover{color:#0b0b0d}
html[data-theme="dark"] .drin{border-bottom:1px solid rgba(255,255,255,0.3)}
html[data-theme="dark"] .drin::placeholder{color:rgba(255,255,255,.35)}
html[data-theme="dark"] .drsubmit{color:#0b0b0d}
html[data-theme="dark"] .dralt{border-top:1px solid rgba(255,255,255,0.14)}
html[data-theme="dark"] .drlogin:hover{color:#0b0b0d}
html[data-theme="dark"] .dlmodal{background:rgba(245,245,247,.9)}
html[data-theme="dark"]{scrollbar-color:rgba(255,255,255,.22) transparent}
html[data-theme="dark"] body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.252)}
html[data-theme="dark"] .skip{color:#0b0b0d}
html[data-theme="dark"] #qtoast{background:rgba(22,22,26,.97);border:1px solid rgba(255,255,255,0.14)}
html[data-theme="dark"] .modbento{border:1px solid rgba(255,255,255,0.14)}
html[data-theme="dark"] .pchip{border:1px solid rgba(255,255,255,0.112);background:#151518;color:#f5f5f7}
html[data-theme="dark"] .pchip b{color:#f5f5f7}
html[data-theme="dark"] .pchip i{color:#f5f5f7}
html[data-theme="dark"] .bill-toggle{border:1px solid rgba(255,255,255,0.196)}
html[data-theme="dark"] .bt-opt.on{color:#0b0b0d}
html[data-theme="dark"] footer::before{background:rgba(27,27,31,.92);border-top:1px solid rgba(255,255,255,0.084)}
@media (hover:hover){
html[data-theme="dark"] .ghost:hover{color:#0b0b0d}
}
html[data-theme="dark"] .ghost:focus-visible,html[data-theme="dark"] .ghost:active{color:#0b0b0d}
@media (hover:hover){
html[data-theme="dark"] .tile:hover{background-color:#26262b;border-color:rgba(255,255,255,0.14)}
}
html[data-theme="dark"] .tile:focus-visible{background-color:#26262b;border-color:rgba(255,255,255,0.14)}
html[data-theme="dark"] .tile.photo:hover,html[data-theme="dark"] .tile.photo:focus-visible{background-color:#26262b;border-color:rgba(255,255,255,0.14)}
html[data-theme="dark"] .m-cta .tile{border-color:rgba(255,255,255,0.14)}
html[data-theme="dark"] .edgeshell{background:rgba(255,255,255,0.112)}
html[data-theme="dark"] .edgecard{background:#151518}
html[data-theme="dark"] section.band-glow::before{background:radial-gradient(60% 60% at 50% 18%,rgba(11,99,230,.10),rgba(255,255,255,0) 70%),#1b1b1f}
html[data-theme="dark"] .askbar{border:1px solid rgba(255,255,255,0.196);background:#151518}
html[data-theme="dark"] section.band-glow::before{background:#151518}
html[data-theme="dark"] .fs-track img{border:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .edgemedia{border:1px solid rgba(255,255,255,0.14)}
html[data-theme="dark"] .tmx{background:#151518;border:1px solid rgba(255,255,255,0.196)}
html[data-theme="dark"] .tmx:hover{color:#0b0b0d}
html[data-theme="dark"] .tmov{background:radial-gradient(70% 42% at 50% 0%,rgba(11,99,230,.09),rgba(255,255,255,0) 70%) #151518}
html[data-theme="dark"] .tmov.drov,html[data-theme="dark"] .tmov.edov,html[data-theme="dark"] .tmov.ngov{background:radial-gradient(70% 42% at 50% 0%,rgba(11,99,230,.08),rgba(27,27,31,0) 70%) #1b1b1f}
html[data-theme="dark"] .drov .tmwrap,html[data-theme="dark"] .edov .tmwrap,html[data-theme="dark"] .ngov .tmwrap{background:#151518;border:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .tmov.mvov::before{background:#151518;border-bottom:1px solid rgba(255,255,255,0.084)}
html[data-theme="dark"] .mvov .tmx{color:#f5f5f7}
html[data-theme="dark"] .mvov .mvghost:hover{background:#151518;color:#f5f5f7}
html[data-theme="dark"] .mvov .mvcta,html[data-theme="dark"] .mvbox .mvcta{background:#151518;color:#f5f5f7;border-color:#151518}
html[data-theme="dark"] .mvov .mvpill.on{background:#151518;color:#f5f5f7}
html[data-theme="dark"] .mvov .drsubmit{background:#151518;color:#f5f5f7;border-color:#151518}
html[data-theme="dark"] .cookie{background:#151518;border:1px solid rgba(255,255,255,0.14)}
@media (max-width:767.9px){
html[data-theme="dark"] .mcta{background:rgba(22,22,26,.86);border-top:1px solid rgba(255,255,255,0.112)}
}
html[data-theme="dark"] .qm-busy::after{border-top-color:#151518}
html[data-theme="dark"] .mvov .qm-busy::after,html[data-theme="dark"] .mvbox .qm-busy::after{border-color:rgba(255,255,255,0.28)}
html[data-theme="dark"] .tile{border:1px solid rgba(255,255,255,0.084)}
html[data-theme="dark"] .tile.pic{border-color:rgba(255,255,255,0.14)}
html[data-theme="dark"] .tile.pic::after{background:linear-gradient(180deg,rgba(255,255,255,0.0) 38%,rgba(0,0,0,.74))}
@media (hover:hover){
html[data-theme="dark"] .tile.pic:hover{border-color:rgba(255,255,255,0.14)}
}
html[data-theme="dark"] .ask-chips span{border:1px solid rgba(255,255,255,0.168);background:rgba(22,22,26,.7)}
html[data-theme="dark"] .tier{background:#151518;border:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .tier-l{border-top:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .stat{background:rgba(22,22,26,.72);border:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .drov .drfacts{border-top:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .fbottom{border-top:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .dlmodal{background:rgba(22,22,26,.72)}
html[data-theme="dark"] .dlbox{border:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .dlbox iframe{background:#151518}
html[data-theme="dark"] .dlclose{background:rgba(22,22,26,.9);border:1px solid rgba(255,255,255,0.196)}
html[data-theme="dark"] .dlclose:hover,html[data-theme="dark"] .dlclose:focus-visible{color:#0b0b0d}
html[data-theme="dark"] section.band:not(.band-ink):not(.band-glow)::before{background:linear-gradient(180deg,rgba(27,27,31,.94),rgba(27,27,31,.94))}
html[data-theme="dark"] .askbar{background:#151518}
html[data-theme="dark"] .tour-frame{border:1px solid rgba(255,255,255,0.196)}
html[data-theme="dark"] .tour-tabs button.on{background:#151518;border-color:rgba(255,255,255,0.196)}
html[data-theme="dark"] .tour-step{border-top:1px solid rgba(255,255,255,0.112)}
@media (max-width:899.9px){
html[data-theme="dark"] .tour-mimg{border:1px solid rgba(255,255,255,0.168)}
}
html[data-theme="dark"] .wall-g{border-top:1px solid rgba(255,255,255,0.168)}
html[data-theme="dark"] .wall li em{border:1px solid rgba(255,255,255,0.224)}
html[data-theme="dark"] .sig-p path{stroke:rgba(245,245,247,.16)}
html[data-theme="dark"] .sig-n rect{stroke:rgba(255,255,255,.14)}
html[data-theme="dark"] .sig-core rect{fill:#f5f5f7}
html[data-theme="dark"] .dev-floor{background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,0.21),rgba(255,255,255,0.0) 70%)}
html[data-theme="dark"] .dev-chips span{border:1px solid rgba(255,255,255,0.182);background:#151518}
html[data-theme="dark"] .epath{border:1px solid rgba(255,255,255,0.126);background:#151518}
html[data-theme="dark"] .ivshot{border:1px solid rgba(255,255,255,0.168)}
html[data-theme="dark"] .ivcap{background:#151518;border-top:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .stat+.stat{border-left:1px solid rgba(255,255,255,0.168)}
@media (max-width:639.9px){
html[data-theme="dark"] .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,0.168)}
}
html[data-theme="dark"] .tour-tabs{border-bottom:1px solid rgba(255,255,255,0.14)}
html[data-theme="dark"] .mc{background:linear-gradient(180deg,#151518,#1b1b1f);border:1px solid rgba(255,255,255,0.098)}
html[data-theme="dark"] .mc::before{background-image:linear-gradient(rgba(245,245,247,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,245,247,.05) 1px,transparent 1px)}
html[data-theme="dark"] .mc-svg path{stroke:rgba(245,245,247,.16)}
html[data-theme="dark"] .mc-chip{background:#151518;border:1px solid rgba(255,255,255,0.126)}
html[data-theme="dark"] .mc-node{background:#151518;border:1px solid rgba(255,255,255,0.126)}
@media (max-width:959.9px){
html[data-theme="dark"] .mc-vert{background:rgba(245,245,247,.18)}
}
html[data-theme="dark"] .board{border:1px solid rgba(255,255,255,0.3)}
html[data-theme="dark"] .onb-btn.is-loading::after{border-top-color:#151518}
html[data-theme="dark"] .onb-social button{background:rgba(255,255,255,0.042)}
html[data-theme="dark"] .onb-social button:hover{background:rgba(255,255,255,0.084)}
html[data-theme="dark"] .onb-social .g{color:#f5f5f7}
html[data-theme="dark"] .onb-doc-head:hover{background:rgba(255,255,255,0.042)}
html[data-theme="dark"] .onb-deskbar-ready{color:#f5f5f7}
html[data-theme="dark"] .onb-deskbar-ready .tick::after{border:solid #151518}
html[data-theme="dark"] .onb-desk-summary .sug{background:rgba(255,255,255,0.042)}
html[data-theme="dark"] .onb-scrim{background:rgba(22,22,26,.76)}
html[data-theme="dark"] .onb-panel{background:radial-gradient(140% 100% at 50% 42%,rgba(22,22,26,.97) 38%,rgba(22,22,26,.82) 62%,rgba(255,255,255,0) 82%)}
html[data-theme="dark"] .onb-panel.is-wide{background:rgba(22,22,26,.96);border:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .onb-input{border-bottom:1px solid rgba(255,255,255,0.3)}
html[data-theme="dark"] .onb-btn.primary.is-loading::after{border-top-color:#151518}
html[data-theme="dark"] .onb-otp input{border:1px solid rgba(255,255,255,0.3)}
html[data-theme="dark"] .onb-steps .dot{background:rgba(255,255,255,0.14)}
html[data-theme="dark"] .onb-foldcard{background:rgba(255,255,255,0.049)}
html[data-theme="dark"] .onb-doc,html[data-theme="dark"] .onb-tier,html[data-theme="dark"] .onb-opt{background:rgba(255,255,255,0.042)}
html[data-theme="dark"] .onb-deskbar{background:rgba(22,22,26,.9);border-top:1px solid rgba(255,255,255,0.112)}
html[data-theme="dark"] .onb-toast{background:rgba(22,22,26,.97)}
html[data-theme="dark"] .onb-confirm{background:rgba(22,22,26,.7)}
html[data-theme="dark"] .onb-confirm .box{background:#151518;border:1px solid rgba(255,255,255,0.14)}
html[data-theme="dark"] .onb-tip{background:#151518;border:1px solid rgba(255,255,255,0.14)}
html[data-theme="dark"] .onb-tip::after{border-top-color:#151518}
html[data-theme="dark"] .onb-tip.below::after{border-bottom-color:#151518}
html[data-theme="dark"] .onb-desk-summary{background:rgba(255,255,255,0.042)}

/* ============================================================
   PASS 13 (2026-09-13): light and dark. Tokens first, then the parts the generator cannot judge.
   ============================================================ */
html[data-theme="dark"]{color-scheme:dark;
  --color-bone-white:#f5f5f7;--ink:#f5f5f7;--ink-2:#a1a1a6;--ink-3:#8e8e93;
  --paper:#0b0b0d;--paper-2:#151518;--hair:rgba(255,255,255,.12);--color-slate-veil:#0b0b0d;--color-graphite:rgba(255,255,255,.14);
  scrollbar-color:rgba(255,255,255,.28) transparent}
html[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] ::selection{background:rgba(40,208,245,.28)}
/* buttons: ink fills become paper fills */
html[data-theme="dark"] .ghost{border-color:rgba(255,255,255,.55);color:#f5f5f7;background-color:transparent}
html[data-theme="dark"] .ghost.cta-solid{background-color:#f5f5f7;border-color:#f5f5f7;color:#0b0b0d}
@media (hover:hover){html[data-theme="dark"] .ghost:hover{background-color:#f5f5f7;border-color:#f5f5f7;color:#0b0b0d}}
html[data-theme="dark"] .ghost:focus-visible,html[data-theme="dark"] .ghost:active,html[data-theme="dark"] .ghost.cta-solid:hover,html[data-theme="dark"] .ghost.cta-solid:focus-visible{background-color:#fff;border-color:#fff;color:#0b0b0d}
html[data-theme="dark"] .ghost.cta-accent,html[data-theme="dark"] .ghost.cta-accent:hover,html[data-theme="dark"] .ghost.cta-accent:focus-visible{color:#fff;background-color:var(--color-accent);border-color:var(--color-accent)}
html[data-theme="dark"] .ghost.cta-accent:hover,html[data-theme="dark"] .ghost.cta-accent:focus-visible{background-color:#2b7bf0;border-color:#2b7bf0}
html[data-theme="dark"] .newssub,html[data-theme="dark"] .drsubmit,html[data-theme="dark"] .ednext,html[data-theme="dark"] .supsend,html[data-theme="dark"] .ivcta,html[data-theme="dark"] .tile.solid{background:#f5f5f7;background-color:#f5f5f7;color:#0b0b0d;border-color:#f5f5f7}
html[data-theme="dark"] .tile.solid .tlab{color:#0b0b0d}
html[data-theme="dark"] .tile.solid .tart{filter:invert(1)}
html[data-theme="dark"] .newssub:hover,html[data-theme="dark"] .drsubmit:hover,html[data-theme="dark"] .ivcta:hover{background:#fff;color:#0b0b0d}
/* chips that carry third-party logos stay white so the marks read */
html[data-theme="dark"] .pchip{background:#fff;border-color:rgba(255,255,255,.14);color:#0e1319}
html[data-theme="dark"] .pchip b,html[data-theme="dark"] .pchip i{color:#0e1319}
html[data-theme="dark"] .mc-chip{background:#fff;border-color:rgba(255,255,255,.14);color:#1d1d1f}
html[data-theme="dark"] .mc-chip.t{color:#1d1d1f}
/* monochrome press marks invert; colour partner marks flip lightness and keep their hue */
html[data-theme="dark"] .trust img{filter:grayscale(1) invert(1) brightness(1.7);opacity:.72}
html[data-theme="dark"] .trust a:hover img,html[data-theme="dark"] .trust a:focus-visible img{filter:grayscale(1) invert(1) brightness(2);opacity:1}
html[data-theme="dark"] img[src*="qm_media/partners/"]:not([src$=".jpg"]):not([src$=".jpeg"]){filter:invert(1) hue-rotate(180deg)}
/* dark panels need an edge on a dark page */
html[data-theme="dark"] .tour-frame,html[data-theme="dark"] .board,html[data-theme="dark"] .mc-core,html[data-theme="dark"] .ivshot{border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .tile.ink,html[data-theme="dark"] .tile.ink.photo{border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .tile.ink{background-image:linear-gradient(165deg,#2a2a30,#1a1a1e)}
html[data-theme="dark"] .board{box-shadow:none}
html[data-theme="dark"] .tour-frame{box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}
html[data-theme="dark"] section.band-ink::before{background:#161619}
html[data-theme="dark"] section.band:not(.band-ink):not(.band-glow)::before{background:linear-gradient(180deg,rgba(24,24,28,.94),rgba(18,18,21,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] section.band-glow::before{background:radial-gradient(60% 60% at 50% 18%,rgba(11,99,230,.22),rgba(11,11,13,0) 70%),#0b0b0d}
html[data-theme="dark"] .amb{opacity:.55}
html[data-theme="dark"] .hero-light{background:radial-gradient(50% 50% at 50% 50%,rgba(11,99,230,.28),rgba(11,11,13,0) 70%)}
html[data-theme="dark"] .wmap::before{background:radial-gradient(50% 50% at 50% 50%,rgba(11,99,230,.16),rgba(11,11,13,0) 70%)}
html[data-theme="dark"] .wmap-pt::before{box-shadow:0 0 0 3px rgba(40,208,245,.18),0 0 0 1.5px #0b0b0d inset}
html[data-theme="dark"] .wmap-arcs path{stroke:rgba(40,208,245,.28)}
html[data-theme="dark"] .mc-svg path{stroke:rgba(255,255,255,.16)}
html[data-theme="dark"] .mc-node{background:#151518;border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .askbar{background:#151518;box-shadow:0 30px 70px -34px rgba(11,99,230,.5);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .askbar:hover{border-color:rgba(255,255,255,.3)}
html[data-theme="dark"] .ask-chips span{border-color:rgba(255,255,255,.16)}
html[data-theme="dark"] .tour-tabs button.on{background:#1b1b1f;border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .tour-tabs button::after{background:#f5f5f7}
html[data-theme="dark"] .tour-step .tour-t b{color:#4f86d9}
html[data-theme="dark"] .fvid,html[data-theme="dark"] .modbento{box-shadow:0 24px 60px -28px rgba(0,0,0,.8)}
html[data-theme="dark"] .qm-seal{box-shadow:0 1px 4px rgba(0,0,0,.6)}
html[data-theme="dark"] .dev-stage::before{background:radial-gradient(55% 52% at 50% 56%,rgba(11,99,230,.22),rgba(40,208,245,.06) 55%,rgba(11,11,13,0) 76%)}
html[data-theme="dark"] .dev-floor{background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),rgba(0,0,0,0) 70%)}
html[data-theme="dark"] .epath,html[data-theme="dark"] .edu-paths{border-color:rgba(255,255,255,.12)!important}
html[data-theme="dark"] .stat+.stat{border-left-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .fcol a:hover{color:#5ea0ff}
html[data-theme="dark"] .navlink .chip,html[data-theme="dark"] #msSet .chip,html[data-theme="dark"] .chip{color:#6fb0ff;border-color:rgba(111,176,255,.6)}
html[data-theme="dark"] .tile .chip{color:#fff;border-color:rgba(255,255,255,.55)}
html[data-theme="dark"] .trust-l{color:var(--ink-2)}
html[data-theme="dark"] .theme-btn:hover{background:rgba(255,255,255,.1)}
/* the onboarding chrome */
html[data-theme="dark"] .onb-scrim,html[data-theme="dark"] .onb-stage,html[data-theme="dark"] .onb-panel,html[data-theme="dark"] .onb-deskbar,html[data-theme="dark"] .onb-confirm,html[data-theme="dark"] .onb-toast,html[data-theme="dark"] .onb-tip,html[data-theme="dark"] .onb-revnav{
  --text-1:#f5f5f7;--text-2:rgba(245,245,247,.92);--text-3:rgba(245,245,247,.74);--text-4:rgba(245,245,247,.5);
  --border-soft:rgba(255,255,255,.12);--border-mid:rgba(255,255,255,.26);--border-hot:rgba(255,255,255,.5)}
/* ink fills that became paper fills: their glyphs and hovers */
html[data-theme="dark"] .ask-go svg{stroke:#0b0b0d}
html[data-theme="dark"] .askbar:hover .ask-go{background:#fff}
html[data-theme="dark"] .onb-btn.primary,html[data-theme="dark"] .onb-deskbar-cta{color:#0b0b0d}
html[data-theme="dark"] .onb-btn.primary:hover:not(:disabled),html[data-theme="dark"] .onb-deskbar-cta:hover{background:#fff}
html[data-theme="dark"] .bt-opt.on .bt-save{border-color:rgba(0,0,0,.35)}
html[data-theme="dark"] .bt-opt.on{background:#f5f5f7;color:#0b0b0d}
html[data-theme="dark"] .skip{background:#f5f5f7;color:#0b0b0d}
html[data-theme="dark"] .mvcta,html[data-theme="dark"] .mvpill.on,html[data-theme="dark"] .tmpill.on,html[data-theme="dark"] .edstep.on,html[data-theme="dark"] .ivchip{color:#0b0b0d}
html[data-theme="dark"] .tmx:hover,html[data-theme="dark"] .tmin:hover,html[data-theme="dark"] .drlogin:hover,html[data-theme="dark"] .edback:hover,html[data-theme="dark"] .dlclose:hover,html[data-theme="dark"] .dlclose:focus-visible{background:#f5f5f7;border-color:#f5f5f7;color:#0b0b0d}
html[data-theme="dark"] .mvghost:hover,html[data-theme="dark"] .mvback:hover{background:#f5f5f7;color:#0b0b0d}
/* the toggle (both themes) */
.theme-btn{width:38px;height:38px;border-radius:50%;border:1px solid transparent;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);padding:0;margin-right:2px;transition:background-color .2s ease}
.theme-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.theme-btn .ico-moon{display:none}
html[data-theme="dark"] .theme-btn .ico-sun{display:none}
html[data-theme="dark"] .theme-btn .ico-moon{display:block}
@media (hover:hover){.theme-btn:hover{background:rgba(0,0,0,.06)}}
.theme-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.m-theme .ln{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 20px}
.m-theme button{background:none;border:0;border-bottom:1px solid transparent;color:var(--color-bone-white);cursor:pointer;font:inherit;font-size:15px;padding:8px 2px;opacity:.55;transition:opacity .2s ease}
.m-theme button:hover{opacity:.85}
.m-theme button.on{opacity:1;border-bottom-color:rgba(var(--accent-rgb),.7)}
.m-theme button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;opacity:1}

/* PASS 37: the flow and the overlays in dark */
html[data-theme="dark"] .onb-scrim,html[data-theme="dark"] .onb-stage,html[data-theme="dark"] .onb-panel,html[data-theme="dark"] .onb-deskbar,html[data-theme="dark"] .onb-confirm,html[data-theme="dark"] .onb-toast,html[data-theme="dark"] .onb-tip{--cyan:#6aa8ff;--cyan-hot:#8bbcff}
html[data-theme="dark"] .onb-close{background:#1c1c20;border-color:rgba(255,255,255,.2);color:#f5f5f7;box-shadow:none}
html[data-theme="dark"] .onb-close:hover{background:#f5f5f7;color:#0b0b0d;border-color:#f5f5f7}
html[data-theme="dark"] .onb-social button{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);color:#f5f5f7}
html[data-theme="dark"] .onb-social button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#f5f5f7}
html[data-theme="dark"] .onb-chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:#f5f5f7}
html[data-theme="dark"] .onb-chip:hover{border-color:rgba(255,255,255,.5);color:#f5f5f7}
html[data-theme="dark"] .onb-chip.sel{background:rgba(106,168,255,.16);border-color:#6aa8ff;color:#cfe2ff}
html[data-theme="dark"] .onb-foldcard .ftype{background:rgba(255,255,255,.09);color:rgba(245,245,247,.74)}
html[data-theme="dark"] .onb-desk-summary .lchip{background:rgba(106,168,255,.16);color:#a9ccff}
html[data-theme="dark"] .tmov:not(.mvov)::before{background:rgba(21,21,24,.955)}
html[data-theme="dark"] .ivlink{color:#7cb4ff}
html[data-theme="dark"] .ivsec.first{border-top-color:rgba(255,255,255,.12)}
/* ---- pass 40: dark ---- */
html[data-theme="dark"] .hdr-signin{color:#f5f5f7}
html[data-theme="dark"] .hdr-signin:hover,html[data-theme="dark"] .hdr-signin:focus-visible{color:#7cb4ff}
html[data-theme="dark"] .wm-ic{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
/* the podcast card has no picture; its plate follows the theme so the label reads */
html[data-theme="dark"] .iv-thumb{background:#1c1c21}
html[data-theme="dark"] .iv-pod{color:#f5f5f7}
/* ---- pass 48: dark ---- */
html[data-theme="dark"] .brk-card{background:#17171a;border-color:rgba(255,255,255,.1);box-shadow:0 30px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04)}
html[data-theme="dark"] .brk-pts svg{stroke:#7cb4ff}
html[data-theme="dark"] .brk-new span{color:#9cc6ff;background:rgba(124,180,255,.14)}
html[data-theme="dark"] .brk-h b{color:#7cb4ff}
/* a third-party logo keeps its white chip in both themes */
html[data-theme="dark"] .brk-chip{background:#fff;border-color:transparent}
/* the cookie note's links were the light theme's blue on the dark plate (3.4:1); the dark theme's text blue reads (8:1) */
html[data-theme="dark"] .ck-t a{color:#7cb4ff}
/* ---- pass 49: the brokerage picture in the dark ---- */
html[data-theme="dark"] .brk-bank{fill:#0f0f12;stroke:rgba(255,255,255,.2)}
html[data-theme="dark"] .brk-ink{stroke:#f5f5f7}
html[data-theme="dark"] .brk-live{stroke:#17171a}
html[data-theme="dark"] .brk-halo,html[data-theme="dark"] .brk-port{stroke:#17171a}
html[data-theme="dark"] .brk-halo{fill:#17171a}
html[data-theme="dark"] .brk-rail{stroke:rgba(124,180,255,.2)}
html[data-theme="dark"] .brk-wire{stroke:#7cb4ff}
html[data-theme="dark"] .brk-pan{fill:#0a0a0d;stroke:rgba(255,255,255,.14)}
html[data-theme="dark"] .dk-pic{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 60px -24px rgba(0,0,0,.8),0 30px 80px -30px color-mix(in srgb,var(--dk-accent,#28d0f5) 55%,transparent)}
html[data-theme="dark"] .dk-pic[data-look="light"]{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 24px 60px -24px rgba(0,0,0,.8),0 30px 80px -30px color-mix(in srgb,var(--dk-accent,#28d0f5) 55%,transparent)}
html[data-theme="dark"] .inv-lines li{border-top-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .inv-lines li:last-child{border-bottom-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .askbar{box-shadow:0 18px 50px -24px rgba(124,180,255,.35),0 2px 10px rgba(0,0,0,.4)}
/* ---- pass 46: dark ---- */
html[data-theme="dark"] section.band-ink#ask::before{background:linear-gradient(180deg,#0b0b0d 0,#161619 var(--feather),#161619 calc(100% - var(--feather)),#17171a 100%)}
html[data-theme="dark"] .deck-card{background:#17171a;border-color:rgba(255,255,255,.1);box-shadow:0 30px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04)}
html[data-theme="dark"] .deck-pg{box-shadow:0 22px 50px -22px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1)}
html[data-theme="dark"] .deckin{background:#0f0f12;border-color:rgba(255,255,255,.18);color:#f5f5f7}
html[data-theme="dark"] .deckin::placeholder{color:rgba(255,255,255,.38)}
html[data-theme="dark"] .deckin:focus{border-color:#7cb4ff;box-shadow:0 0 0 3px rgba(124,180,255,.18)}
html[data-theme="dark"] .decksub{background:#f5f5f7;border-color:#f5f5f7;color:#0b0b0d}
html[data-theme="dark"] .decksub:hover,html[data-theme="dark"] .decksub:focus-visible{background:#fff;border-color:#fff}
html[data-theme="dark"] .deck-note .ulink,html[data-theme="dark"] .deckok-s .ulink{color:#7cb4ff}
html[data-theme="dark"] #ask .askbar{--ink:#f5f5f7;--ink-2:rgba(245,245,247,.72);--ink-3:rgba(245,245,247,.5);color:#f5f5f7}
html[data-theme="dark"] #ask .askbar .ask-go{background:#f5f5f7}
html[data-theme="dark"] #ask .askbar .ask-go svg{stroke:#0b0b0d}
/* ---- pass 41: dark ---- */
html[data-theme="dark"] .inv-foot .ulink{border-bottom-color:rgba(255,255,255,.22)}
html[data-theme="dark"] .inv-foot .ulink:hover,html[data-theme="dark"] .inv-foot .ulink:focus-visible{color:#f5f5f7}
/* ============================================================
   Section rhythm (app change, owner request 2026-10-06)
   The home page's gaps between sections ranged from ~140px to ~370px on a
   laptop and up to ~320px on a phone:
     - --gap-section followed the screen HEIGHT (clamp(120px,15vh,190px)),
       so tall phones and iPads got large gaps;
     - plain sections were spaced by margins and the grey/ink bands by
       padding, and where the two met they added up (135 + 97);
     - later passes tuned #ask, #machine and #brokerage one by one.
   Now every home section has the same padding above and below, so any two
   sections sit one --section-gap apart, and the gap follows the screen
   WIDTH: ~72px on phones, ~96px on iPad portrait, ~115px on small
   laptops, 128px from about 1440px wide. Bands keep their background over
   that padding.
   ============================================================ */
:root {
  --section-pad: clamp(36px, calc(1.5rem + 3.2vw), 64px);
  --section-gap: calc(var(--section-pad) * 2);
  /* older rules that still read the old token follow it */
  --gap-section: var(--section-gap);
}

main#top
  > section:is(
    #markets,
    #platform,
    #brokerage,
    #modules,
    #coverage,
    #ask,
    #machine,
    #streams,
    #proof,
    #founder,
    #invest,
    #edu,
    #access,
    #join,
    #newsletter
  ) {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* the hero keeps its own top padding (it clears the fixed header) */
main#top > section#hero {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: var(--section-pad);
}

/* the footer follows the last section by the same gap */
footer {
  margin-top: var(--section-pad);
}

/* Below 1024px the markets carousel hides its arrows but keeps 28px of
   bottom padding (room for the slides' shadow): the section gives that
   back so the gap below the slides is the same one. */
@media (max-width: 1023.9px) {
  main#top > section#markets {
    padding-bottom: max(0px, calc(var(--section-pad) - 28px));
  }
}

/* The newsletter card's own top margin would add to the gap. */
main#top > section#newsletter > .edgeshell {
  margin-top: 0;
}

/* The hero's "Featured in" row ends in empty padding (32px, 8px on
   phones); without it the hero ends on the logos like other sections. */
main#top > section#hero .trust {
  padding-bottom: 0;
}

/* src/components/site/founder/founder.css */
/*
 * Founder quote (the client's fold 11). Moved from the global sheet in the
 * Next.js migration; the client's later "pass" overrides are folded into each
 * rule (final values unchanged). Appended after the global sheet by
 * scripts/build-site-css.mjs.
 */
#founder {
  position: relative;
}
#founder > canvas.flow {
  position: absolute;
  top: 0;
  height: 100%;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  right: auto;
  bottom: auto;
  z-index: 0;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 22%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 22%,
    #000 78%,
    transparent 100%
  );
}
#founder > *:not(canvas.flow) {
  position: relative;
  z-index: 1;
}
/* the band runs from the page white into ink and out into the invest grey;
   the invest band starts where it lands */
section.band-ink#founder::before {
  -webkit-mask-image: none;
  mask-image: none;
  background: linear-gradient(
    180deg,
    #fff 0,
    #1d1d1f var(--feather),
    #1d1d1f calc(100% - var(--feather)),
    #f4f4f6 100%
  );
}
html[data-theme='dark'] section.band-ink#founder::before {
  background: linear-gradient(
    180deg,
    #0b0b0d 0,
    #161619 var(--feather),
    #161619 calc(100% - var(--feather)),
    #17171a 100%
  );
}
/* the photo above the quote */
.founder-ph {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  margin: 0 auto 26px;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.22);
}
.quote-center .heading {
  margin-left: auto;
  margin-right: auto;
}
#founder .heading {
  color: #fffdf9;
}
.attr {
  margin-top: 28px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}
.quote-center .attr {
  margin-top: 34px;
}

/* src/components/site/markets/markets.css */
/*
 * "Every market" deck (the client's fold 2). Moved from the global sheet in the
 * Next.js migration by scripts/site-css-move.mjs: same rules, same order, same
 * @media wrappers; appended after the global sheet by build-site-css.mjs.
 */

/* from 0070-main-vertical-video-deck.css */
/* ============================== vertical video deck (swipe l→r, fold-size) ============================== */
.deck-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 56px;
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.75;
}
.deck {
  margin-top: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-left: calc(var(--pad-x) * -1);
  margin-right: calc(var(--pad-x) * -1);
  scroll-padding-left: var(--pad-x);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 28px;
  scrollbar-width: none;
  cursor: grab;
}
.deck::-webkit-scrollbar {
  display: none;
}
.deck.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
  -webkit-user-select: none;
}
/* padding lives on the intrinsically-sized track so the trailing inset
   actually survives into the scrollable overflow */
.deck-track {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0 var(--pad-x);
  width: max-content;
}
/* each slide is a fold: full-bleed video with the copy and CTA ON it */
.slide {
  position: relative;
  flex: 0 0 86vw;
  overflow: hidden;
  scroll-snap-align: start;
  height: clamp(430px, 62vh, 660px);
  height: clamp(430px, 62svh, 660px);
  background: #e8e8ed;
  border-radius: 20px;
  transform-origin: 50% 100%;
  transition: transform 0.55s var(--ease);
}
.slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* hairline reads on the dark canvas while the frame is empty, relaxes once live */
.slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(255, 253, 249, 0.2);
}
/* scrim keeps the fold copy legible over any footage */
.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(13, 17, 22, 0.5) 0%,
    rgba(13, 17, 22, 0.08) 22%,
    rgba(13, 17, 22, 0.42) 50%,
    rgba(13, 17, 22, 0.74) 74%,
    rgba(13, 17, 22, 0.93) 100%
  );
}
.fold {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 4.5vw, 40px);
}
.f-eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  opacity: 1;
  text-shadow: 0 1px 12px rgba(13, 17, 22, 0.9);
}
.f-bottom {
  display: grid;
  gap: 16px;
  justify-items: start;
}
.f-head {
  font-size: clamp(26px, 6.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 400;
  max-width: 17ch;
  color: #fff;
  opacity: 1;
  text-shadow:
    0 2px 20px rgba(9, 13, 18, 0.82),
    0 1px 5px rgba(9, 13, 18, 0.65);
}
.f-body {
  font-size: 15px;
  line-height: 1.5;
  max-width: 46ch;
  opacity: 1;
  color: #fff;
  text-shadow:
    0 1px 14px rgba(9, 13, 18, 0.9),
    0 1px 4px rgba(9, 13, 18, 0.7);
}
.f-bottom .ghost {
  margin-top: 4px;
}
/* advertisers fold: the selected-partners wall — two-up stack, near-solid dark chips */
.f-partners {
  margin-top: 2px;
  width: 100%;
  max-width: 460px;
}
.f-plabel {
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.8;
  text-shadow:
    0 1px 12px rgba(9, 13, 18, 0.85),
    0 1px 3px rgba(9, 13, 18, 0.6);
  margin-bottom: 10px;
}
.f-wall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.f-wall a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 12px 16px;
  border: 1px solid #fff;
  background: #fff;
  border-radius: 12px;
  transition: border-color 0.3s var(--ease);
}

/* from 0070-main-vertical-video-deck.css */
@media (hover: hover) {
  .f-wall a:hover {
    border-color: var(--color-accent);
  }
}

/* from 0070-main-vertical-video-deck.css */
.f-wall a:focus-visible {
  border-color: var(--color-accent);
}
.f-wall img {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.f-wall a.ph img {
  height: 54px;
  width: 54px;
  object-fit: cover;
}

/* from 0070-main-vertical-video-deck.css */
@media (min-width: 900px) {
  .f-bottom {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 440px);
    column-gap: clamp(26px, 4vw, 60px);
    align-items: end;
  }
  .f-head,
  .f-body,
  .f-bottom .ghost {
    grid-column: 1;
  }
  .f-partners {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    justify-self: end;
    max-width: none;
  }
  .f-wall a {
    min-height: 88px;
  }
  .f-wall img {
    height: 42px;
  }
  .f-wall a.ph img {
    height: 64px;
    width: 64px;
  }
}

/* from 0070-main-vertical-video-deck.css */
@media (max-width: 899.9px) {
  .f-partners {
    max-width: 430px;
    margin-top: 0;
  }
  .f-plabel {
    margin-bottom: 8px;
  }
  .f-wall {
    gap: 6px;
  }
  .f-wall a {
    min-height: 40px;
    padding: 6px 9px;
  }
  .f-wall img {
    height: 17px;
  }
  .f-wall a.ph {
    padding: 4px;
  }
  .f-wall a.ph img {
    height: 30px;
    width: 30px;
  }
}

/* from 0070-main-vertical-video-deck.css */
@media (max-height: 600px) {
  .f-partners {
    display: none;
  }
}

/* from 0070-main-vertical-video-deck.css */
@media (max-height: 845px) and (max-width: 899.9px) {
  .f-partners {
    display: none;
  }
}

/* from 0070-main-vertical-video-deck.css */
@media (max-height: 790px) and (min-width: 900px) and (max-width: 1199.9px) {
  .f-partners {
    display: none;
  }
}

/* from 0070-main-vertical-video-deck.css */
@media (max-height: 700px) {
  .f-body {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* from 0070-main-vertical-video-deck.css */
/* short viewports: the CTA must never clip — the wall yields first */
.deck-nav {
  display: none;
  gap: 15px;
  margin-top: 34px;
}
/* stacked fold (no side split): the wall shrinks so the CTA always fits the slide */
.deck-nav .ghost {
  min-width: 52px;
  text-align: center;
}

/* from 0070-main-vertical-video-deck.css */
@media (min-width: 1024px) {
  .deck-nav {
    display: flex;
  }
}

/* from 0070-main-vertical-video-deck.css */
@media (min-width: 1200px) {
  .slide {
    flex-basis: min(72vw, 980px);
    height: min(72vh, 720px);
  }
  .f-head {
    font-size: clamp(34px, 3.6vw, 54px);
  }
}

/* from 0300-main-rtl.css */
html[dir='rtl'] .deck {
  direction: ltr;
}
html[dir='rtl'] .f-head,
html[dir='rtl'] .f-body,
html[dir='rtl'] .f-eyebrow {
  text-align: right;
}

/* from 0390-main-polish-pass.css */
.js .f-body .mask .ln {
  opacity: 1;
  transform: none;
  transition: none;
}
.js .deck {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}
.js .in .deck {
  opacity: 1;
  transform: none;
}
.f-eyebrow,
.f-plabel,
.deck-meta {
  text-transform: none;
  letter-spacing: 0;
}
.f-head {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.f-eyebrow {
  font-size: 13px;
  opacity: 0.85;
}
.deck-meta {
  font-size: 13px;
  color: var(--ink-2);
  opacity: 1;
}
.slide .ghost {
  border-color: #fff;
  color: #fff;
  background-color: transparent;
}
.slide .ghost:hover,
.slide .ghost:focus-visible {
  background-color: #fff;
  color: #1d1d1f;
  border-color: #fff;
}
.deck-nav .ghost {
  font-size: 16px;
  padding: 10px 0;
  min-width: 52px;
}
.slide {
  background: #e8e8ed;
}
.f-wall a {
  border-radius: 12px;
}

/* from 0400-main-pass-03.css */
.f-head .w.b {
  color: #fff;
}
.f-head b {
  color: #fff;
}

/* from 0770-dark-all.css */
html[data-theme='dark'] .slide {
  background: #26262b;
}
html[data-theme='dark'] .f-wall a {
  border: 1px solid #151518;
  background: #151518;
}
html[data-theme='dark'] .slide .ghost {
  border-color: #151518;
}
html[data-theme='dark'] .slide .ghost:hover,
html[data-theme='dark'] .slide .ghost:focus-visible {
  background-color: #151518;
  color: #f5f5f7;
  border-color: #151518;
}
html[data-theme='dark'] .slide {
  background: #26262b;
}
html[data-theme='dark'] .slide .ghost,
html[data-theme='dark'] .slide .ghost:hover {
  border-color: #fff;
  color: #fff;
  background-color: transparent;
}