:root{
  --ink:#131022;              /* dark navy-purple — hero + text on light */
  --ink2:#1c1830;             /* raised dark panel */
  --paper:#f5f4f8;            /* light body */
  --paper2:#ffffff;           /* cards on light */
  --purple:#a970ff;           /* the accent */
  --purple-d:#8f4dff;
  --purple-soft:#efe6ff;
  --tw:#9146ff;--kc:#53fc18;
  --live:#37d67a;
  --mut-d:#a49fc0;            /* muted text on dark */
  --mut-l:#6b6785;            /* muted text on light */
  --line-d:rgba(255,255,255,.1);
  --line-l:rgba(19,16,34,.1);
  --ui:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --r:6px;
  --ease:cubic-bezier(.23,1,.32,1);
  /* ── page rhythm scale — every section inherits these ──
     one vertical step, one gutter, one set of inner widths, one card.
     New sections: wrap content in .wrap and they land on the grid. */
  --sec-y:92px;               /* section vertical padding, desktop */
  --sec-y-sm:56px;            /* section vertical padding, ≤940px */
  --gut:24px;                 /* horizontal gutter — owned by .wrap alone */
  --w-max:1180px;             /* .wrap outer → 1132px of content */
  --w-shell:1280px;           /* the dark shell's rails: nav + hero share it */
  --w-wide:1132px;            /* full-width grids */
  --w-mid:960px;              /* 2-up blocks + panels */
  --w-prose:780px;            /* body copy + faq */
  --w-head:680px;             /* centred section heads */
  --card-r:16px;
  --card-p:26px;
  --grid-gap:22px;
  --card-hover:0 20px 42px -26px rgba(19,16,34,.28)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;line-height:1.6}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--purple);color:#fff}
.wrap{max-width:var(--w-max);margin:0 auto;padding:0 var(--gut)}

/* buttons — squared, streambot 2px */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r);
  padding:13px 24px;font-family:var(--ui);font-size:15px;font-weight:600;cursor:pointer;
  transition:transform .14s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--purple);color:#fff;box-shadow:0 8px 20px -8px rgba(169,112,255,.6)}
.btn-p:hover{background:var(--purple-d)}
.btn-ghost-d{background:transparent;color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.35) inset}
.btn-ghost-d:hover{box-shadow:0 0 0 1.5px #fff inset}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#241f3d}
.btn-lg{padding:15px 30px;font-size:16px}

/* ══════════ HEADER (announcement + nav over the dark hero) ══════════ */
/* overflow:hidden is load-bearing, not tidiness: .top::after below sits past
   the right edge on purpose so the glow falls off-screen rather than ending
   in a visible arc, and without the clip that produced a horizontal
   scrollbar at every width — 180px of it at 390px. */
.top{position:relative;overflow:hidden;background:var(--ink);color:#fff}  /* announce+nav+hero */
/* The glow used to live on .hero, which clips (overflow:hidden), so it could
   never reach past the hero's top edge. Hosting it on the shell instead lets
   it sit behind the nav as well as the figure — one light source, up and to
   the right of the browse card, which is where the eye should land. z-index
   1 keeps it under .hero-in (2) and the nav (20). */
/* NO filter here, and that is the fix for a long-hunted bug: blur() promotes
   .top to its own GPU layer, and on some renderers (the in-app preview's
   Chrome among them) that layer's raster TILE SEAM showed as a full-width
   grey hairline near the hero/trial boundary — scrolling with the content,
   crossing the scrollbar overlay, immune to every background/margin fix,
   invisible in headless Chrome. The gradient already fades to transparent,
   so the blur bought almost nothing; the extra stop below replaces its
   softness. If anyone reintroduces a filter/backdrop-filter on .top or a
   pseudo of it, the line comes back. */
.top::after{content:"";position:absolute;z-index:1;pointer-events:none;
  top:-120px;right:-40px;width:860px;height:820px;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(169,112,255,.32), rgba(169,112,255,.14) 48%,
    rgba(169,112,255,.04) 68%, rgba(169,112,255,0) 84%)}
@media (max-width:900px){
  .top::after{top:-200px;right:-180px;width:620px;height:600px}
}
.announce{background:var(--purple);color:#fff;text-align:center;font-weight:600;font-size:14px;
  padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.ann-s{display:none}
.nav{position:relative;z-index:20}
.nav-in{max-width:var(--w-shell);margin:0 auto;padding:22px var(--gut);display:flex;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:22px;letter-spacing:-.01em;color:#fff}
.brand svg{width:26px;height:26px;flex:none}
.nav-links{display:flex;align-items:center;gap:32px;margin-left:26px}
.nav-links a{color:#fff;font-size:15.5px;font-weight:500;opacity:.86;transition:opacity .15s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;margin:5px 0;transition:.2s var(--ease)}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* mobile dropdown panel */
.mobmenu{display:none}
@media (max-width:940px){
  /* border via inset shadow, not border-top: a collapsed max-height:0 box
     still paints its border, which left a stray 1px line under the header */
  .mobmenu{display:block;overflow:hidden;max-height:0;transition:max-height .28s var(--ease);
    background:var(--ink);box-shadow:inset 0 1px 0 var(--line-d)}
  .nav.open .mobmenu{max-height:340px}
  .mobmenu-in{padding:8px 24px 20px;display:flex;flex-direction:column;gap:2px}
  .mobmenu a{color:#fff;font-size:16px;font-weight:600;padding:13px 0;border-bottom:1px solid var(--line-d)}
  .mobmenu a:last-child{border-bottom:0}
  .mobmenu .btn{margin-top:12px;width:100%}
}

/* ══════════ HERO (dark) ══════════ */
.hero{position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
/* superseded by .top::after, which is not clipped by .hero's overflow and so
   can carry up behind the nav. Left declared but unpainted rather than
   deleted, because .hero::before/::after share the reset rule above. */
.hero::before{display:none}
/* The nav and the hero share --w-shell: the hero keeps its 1280 breathing
   room and the nav comes out to meet it, so the brand sits over the
   headline and the buttons over the figure's right edge. One token, no
   drift. (.wrap sections below stay on --w-max.) */
.hero-in{position:relative;z-index:2;max-width:var(--w-shell);margin:0 auto;padding:40px var(--gut) 84px;
  display:grid;grid-template-columns:1fr 1.18fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,5vw,60px);line-height:1.05;letter-spacing:-.02em;font-weight:700;margin:0;color:#fff}
.hero h1 .a{color:var(--purple)}
.hero p{font-size:17.5px;line-height:1.6;color:var(--mut-d);margin:20px 0 0;max-width:46ch}
.hero p b{color:#fff;font-weight:600}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-plats{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:13.5px;color:var(--mut-d)}
.hero-plats .chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);
  border:1px solid var(--line-d);border-radius:100px;padding:6px 13px;font-weight:600;color:#fff;font-size:13px}
.hero-plats .chip svg{width:14px;height:14px}
/* scattered dots (streambot confetti) */
.dotfield{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.dotfield i{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(169,112,255,.5)}

/* hero illustration — the browse directory in a window */
.hbr{position:relative;z-index:2;justify-self:end;width:100%;max-width:660px;margin:0;
  border-radius:13px;border:1px solid rgba(169,112,255,.26);
  box-shadow:0 34px 66px -30px rgba(8,5,20,.95)}

/* wave fills with the console section's top tint, not plain paper, so the
   dark hero → wave → lavender console transition has no grey seam/bar */
/* Fills with whatever section actually follows it, via a token, rather than a
   hardcoded colour. It was #ebe4f6 — the tint of the featured-spot section
   that used to sit here and has since been removed, leaving a visible band
   of the wrong colour between the hero and whatever replaced it. A literal
   here goes stale the moment the section below changes; a token does not. */
.wave{display:block;width:100%;height:60px;color:var(--wave-to,var(--paper));margin-bottom:-1px}
.wave.to-trial{--wave-to:#efeef4}   /* the trial section below is a shade darker than paper */
/* the band opened with 92px of air and closed with 28 — the wave was almost
   touching the last line. Matched to the top so the section breathes evenly. */
.wave-up{color:var(--paper);display:block;margin:clamp(52px,7vw,96px) 0 0}

/* .sec owns the vertical step only — .wrap owns the gutter, exclusively */
.sec{padding:var(--sec-y) 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--purple);font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase}
.sec .lead,.statband2 .lead{font-size:16.5px;color:var(--mut-l);line-height:1.6;margin:14px 0 0;max-width:56ch}
/* restored: this shared a selector list with .finalc h2, so removing the CTA
   rule took every section heading on the page down to the browser default. */
.sec h2,.statband2 h2{font-size:clamp(28px,3.4vw,42px);line-height:1.12;letter-spacing:-.02em;font-weight:700;margin:14px 0 0}
.sec-head{text-align:center;max-width:var(--w-head);margin:0 auto 56px}
.sec-head .lead{margin-left:auto;margin-right:auto}

/* the console (light, on paper) */
.console{background:var(--paper2);border:1px solid var(--line-l);border-radius:16px;
  box-shadow:0 30px 60px -30px rgba(19,16,34,.25);overflow:hidden;max-width:960px;margin:0 auto}
.con-grid{display:grid;grid-template-columns:1fr 1fr}
.con-l{padding:28px;border-right:1px solid var(--line-l);display:flex;flex-direction:column}
.con-perks{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--line-l);
  display:flex;flex-direction:column;gap:14px}
.con-perks li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--mut-l);line-height:1.45}
.con-perks .ck{flex:none;width:20px;height:20px;border-radius:50%;background:var(--purple-soft);
  color:var(--purple-d);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:1px}
@media (max-width:940px){.con-perks{margin-top:18px;padding-top:18px}}
.con-r{padding:28px}
.clab svg{width:15px;height:15px;flex:none}
.clab{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut-l);
  display:flex;align-items:center;gap:8px;margin-bottom:11px}
.con-field{display:flex;gap:9px}
.con-plat{display:flex;background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r);padding:3px}
.con-plat button{border:0;background:none;color:var(--mut-l);font-family:var(--ui);font-size:13px;font-weight:600;
  padding:0 12px;border-radius:4px;cursor:pointer}
.con-plat button.on{background:var(--ink);color:#fff}
.con-inp{flex:1;display:flex;align-items:center;background:var(--paper);border:1px solid var(--line-l);
  border-radius:var(--r);overflow:hidden}
.con-inp:focus-within{border-color:var(--purple)}
.con-inp .pre{padding:0 2px 0 13px;font-size:13px;color:var(--mut-l);white-space:nowrap}
.con-inp input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);
  font-family:var(--ui);font-size:16px;font-weight:600;padding:12px 6px}
.con-connect{flex:none}
.con-chan{display:none;align-items:center;gap:12px;margin-top:15px;padding:13px;background:var(--paper);
  border:1px solid var(--line-l);border-radius:12px}
.con-chan.show{display:flex}
.con-chan .av{width:42px;height:42px;border-radius:10px;overflow:hidden;flex:none;background:#e4e0ef}
.con-chan .av img{width:100%;height:100%;object-fit:cover}
.con-chan .nm{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.con-chan .pill{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  border-radius:100px;padding:2px 8px;background:#e9e6f2;color:var(--mut-l)}
.con-chan .pill.live{background:rgba(55,214,122,.15);color:#1f9d54}
.con-chan .meta{font-size:12.5px;color:var(--mut-l);margin-top:2px}
.con-msg{display:none;margin-top:12px;font-size:13.5px;padding:10px 13px;border-radius:var(--r);
  background:#fff4e2;border:1px solid #ffdca6;color:#9a6a12}
.con-msg.show{display:block}
.con-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.con-row .v{font-weight:700;font-size:15px}
.range{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:100px;background:#e4e0ef;outline:none;margin:2px 0 4px}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--purple);cursor:pointer;box-shadow:0 2px 6px rgba(169,112,255,.5)}
.range::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--purple);cursor:pointer}
.scale{display:flex;justify-content:space-between;font-size:11px;color:var(--mut-l);font-weight:600}
.seg{display:flex;gap:7px}
.seg button{flex:1;border:1px solid var(--line-l);background:var(--paper);color:var(--mut-l);font-family:var(--ui);
  font-size:13px;font-weight:600;padding:10px 6px;border-radius:var(--r);cursor:pointer;transition:.14s var(--ease)}
.seg button.on{background:var(--purple-soft);border-color:var(--purple);color:var(--purple-d)}
.con-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 0 14px;
  padding:15px 17px;background:var(--ink);color:#fff;border-radius:12px}
.con-total .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut-d)}
.con-total .s{font-size:13px;color:var(--mut-d);margin-top:2px}
.con-total .p{font-size:30px;font-weight:700;letter-spacing:-.02em}
.con-go{width:100%}
.con-note{margin-top:11px;font-size:12px;color:var(--mut-l);text-align:center;font-weight:500}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:960px;margin:56px auto 0}
.stat{text-align:center}
.stat b{display:block;font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.stat span{font-size:13.5px;color:var(--mut-l);font-weight:500}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.steps .step{background:var(--paper2);border:1px solid var(--line-l);border-radius:var(--card-r);padding:var(--card-p);text-align:center;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.steps .step:hover{transform:translateY(-4px);box-shadow:var(--card-hover)}
.steps .step .ic{width:56px;height:56px;margin:0 auto 18px;border-radius:16px;background:var(--purple-soft);
  display:flex;align-items:center;justify-content:center}
.steps .step .ic svg{width:26px;height:26px;color:var(--purple-d)}
.steps .step h3{font-size:19px;font-weight:700;margin:0 0 8px}
.steps .step p{margin:0;font-size:14.5px;color:var(--mut-l);line-height:1.6}

/* features (alternating, illustrated) */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:44px 0}
.frow .tx .eyebrow{margin-bottom:6px}
.frow h3{font-size:clamp(24px,2.6vw,32px);line-height:1.15;font-weight:700;margin:8px 0 0;letter-spacing:-.02em}
.frow p{font-size:15.5px;color:var(--mut-l);line-height:1.62;margin:14px 0 0}
.flist{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.flist li{display:flex;gap:11px;align-items:flex-start;font-size:15px;font-weight:500}
.flist li .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--purple);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px}
.fcard{background:var(--paper2);border:1px solid var(--line-l);border-radius:20px;padding:30px;
  box-shadow:0 24px 50px -30px rgba(19,16,34,.25)}

/* Reviews run as a continuous marquee. The track holds the cards twice (the
   duplicate set is cloned in JS and hidden from screen readers), so shifting
   it by exactly -50% loops seamlessly with no jump. Full-bleed with a soft
   mask at each edge so cards drift in and out instead of being chopped. */
.rev-mq{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rev-mq::-webkit-scrollbar{display:none}
.rev-mq.rev-drag{cursor:grabbing}
/* the drift stops while you're steering it, and resumes when you let go */
.rev-mq.rev-hold .rev-g{animation-play-state:paused}
.rev-g{display:flex;flex-wrap:nowrap;width:max-content;gap:var(--grid-gap);padding:6px 0;
  animation:revmq 52s linear infinite;will-change:transform}
.rev-mq:hover .rev-g,.rev-mq:focus-within .rev-g{animation-play-state:paused}
@keyframes revmq{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - var(--grid-gap)/2),0,0)}}
.rev-g>.rev{flex:0 0 clamp(300px,26vw,378px)}
@media (max-width:940px){.rev-g{animation-duration:38s}.rev-g>.rev{flex-basis:clamp(280px,80vw,330px)}}
@media (prefers-reduced-motion:reduce){.rev-g{animation:none}}
.rev{background:var(--paper2);border:1px solid var(--line-l);border-radius:var(--card-r);padding:var(--card-p);
  display:flex;flex-direction:column;gap:15px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.rev:hover{transform:translateY(-4px);box-shadow:var(--card-hover)}
.rev .top{display:flex;align-items:center;justify-content:space-between;background:none;padding:0}
.stars{color:var(--purple);letter-spacing:2px}
.rst{font-size:12px;font-weight:700;color:#1f9d54;background:rgba(55,214,122,.13);border-radius:100px;padding:4px 11px}
.rev .q{margin:0;font-size:15px;line-height:1.6;color:#3a3652}
.rev .who{display:flex;align-items:center;gap:11px;margin-top:auto}
.rev .av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none}
.rev .nm{font-weight:700;font-size:14px}.rev .nm i{font-style:normal;color:var(--purple);font-size:12px}
.rev .role{font-size:12.5px;color:var(--mut-l)}

/* pricing (dark band for contrast) */
.priceband{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.priceband .eyebrow{color:var(--purple)}
.priceband h2{color:#fff}
.priceband .lead{color:var(--mut-d)}
.ptog{display:inline-flex;background:rgba(255,255,255,.06);border:1px solid var(--line-d);border-radius:var(--r);padding:4px;gap:2px}
.ptog button{border:0;background:none;color:var(--mut-d);font-family:var(--ui);font-size:13.5px;font-weight:600;
  padding:9px 18px;border-radius:4px;cursor:pointer}
.ptog button.on{background:var(--purple);color:#fff}
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.plan{background:var(--ink2);border:1px solid var(--line-d);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:16px}
.plan.fx{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple),0 24px 50px -24px rgba(169,112,255,.4)}
.plan .tier{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut-d)}
.plan.fx .tier{color:var(--purple)}
.plan .price{display:flex;align-items:baseline;gap:6px}
.plan .price .cur{font-size:20px;color:var(--mut-d)}
.plan .price b{font-size:44px;font-weight:700;letter-spacing:-.02em}
.plan .price .per{font-size:13px;color:var(--mut-d)}
.plan .blurb{margin:0;font-size:14.5px;color:var(--mut-d);line-height:1.55}
.plan .btn{width:100%}
.monthly{margin-top:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mplan{background:var(--ink2);border:1px solid var(--line-d);border-radius:14px;padding:18px 20px}
.mplan .t{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut-d)}
.mplan b{display:block;font-size:16px;margin-top:5px;color:#fff}
.mplan span{font-size:13px;color:var(--purple);font-weight:600}
.pfoot{text-align:center;margin-top:22px;font-size:13.5px;color:var(--mut-d)}.pfoot a{color:var(--purple);font-weight:600}

/* trust */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap);max-width:var(--w-mid);margin:0 auto}
.tcard{background:var(--paper2);border:1px solid var(--line-l);border-radius:var(--card-r);padding:var(--card-p)}
.tcard h3{margin:0 0 16px;font-size:17px;font-weight:700}
.never{list-style:none;margin:0;padding:0}
.never li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-l);font-size:14.5px;color:var(--mut-l)}
.never li:last-child{border-bottom:0}
.never .ic{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.never .yes .ic{background:rgba(55,214,122,.15);color:#1f9d54}
.never .no .ic{background:#eee;color:#b3b0c2}
.never .no{color:#b3b0c2}.never .no s{text-decoration-color:#cfccdb}

@media (max-width:940px){
  .hero-in{grid-template-columns:1fr;gap:36px;text-align:center;padding-bottom:58px}
  .hero p{margin-left:auto;margin-right:auto}.hero-cta,.hero-plats{justify-content:center}
  .hbr{max-width:520px;justify-self:center;margin-top:30px}
  .con-grid{grid-template-columns:1fr}.con-l{border-right:0;border-bottom:1px solid var(--line-l)}
  .stats{grid-template-columns:1fr 1fr;gap:32px 20px}
  .steps,.pg,.g2{grid-template-columns:1fr}   /* .rev-g is a flex marquee, not a grid */
  .monthly{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr;gap:28px;padding:32px 0}.frow.flip .fcard{order:2}
  .fg{grid-template-columns:1fr;gap:44px}
  .fcols{grid-template-columns:1fr 1fr;gap:28px 20px}
  .nav-links{display:none}
  /* The old mobile header was a fat two-line emoji banner over a bare
     brand + burger row — ~180px of chrome with a dead middle and no CTA.
     Now: one quiet announce line, a tighter row, and the primary CTA kept
     visible next to the burger the way a store keeps its buy button. */
  .ann-l{display:none}
  .ann-s{display:inline}
  .announce{font-size:12px;padding:8px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  /* slimmer bar, quieter CTA: the filled pill was fighting the purple
     announce band right above it and crowding the burger */
  /* the bar carries its own violet-dark tone (owner picked this from the
     header mocks) — a soft tonal band over the hero, no hard line */
  .nav{background:linear-gradient(175deg,#1b1530,#181229)}
  .nav-in{padding:12px 16px;gap:10px}
  .brand{font-size:18px;gap:8px}
  .brand svg{width:21px;height:21px}
  .nav-right{gap:6px}
  .nav-right .btn-ghost-d{display:none}
  .nav-right .btn-p{display:inline-flex;white-space:nowrap;padding:9px 14px;font-size:13px;
    box-shadow:0 3px 10px -5px rgba(169,112,255,.5)}
  .burger{display:block;padding:12px 10px;margin-left:2px}
  .burger span{width:20px;margin:4.5px 0}
  .sec{padding:var(--sec-y-sm) 0}
}
@media (max-width:360px){
  .brand{font-size:17px}
  .nav-right .btn-p{padding:9px 12px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── dark console (interactive room) ── */
.dcon-sec{background:linear-gradient(180deg,#ebe4f6,#f5f4f8 62%);position:relative;overflow:hidden}
.dcon-sec > .wrap{position:relative;z-index:1}
.dcon-sec .ddots i{background:rgba(169,112,255,.4)}
.dcon-glow{position:absolute;left:50%;top:52%;width:940px;height:560px;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(169,112,255,.3),transparent 72%);filter:blur(26px);pointer-events:none;z-index:0}
.dcon{max-width:1040px;margin:0 auto;background:linear-gradient(160deg,#191527,#12101d);border-radius:22px;
  box-shadow:0 50px 100px -40px rgba(19,16,34,.55),0 0 0 1px rgba(169,112,255,.28);overflow:hidden;position:relative}
.dcon-bar{display:flex;align-items:center;gap:8px;padding:15px 22px;border-bottom:1px solid var(--line-d)}
.dcon-bar i{width:10px;height:10px;border-radius:50%;background:#2c2840}
.dcon-bar .t{margin-left:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-d)}
.dcon-bar .st{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--live);border:1px solid rgba(55,214,122,.35);border-radius:100px;padding:4px 11px}
.dcon-bar .st b{width:5px;height:5px;border-radius:50%;background:var(--live)}
.dcon-grid{display:grid;grid-template-columns:1fr 1.02fr}
.dcon-l{padding:26px;border-right:1px solid var(--line-d);min-width:0}
.dcon-r{padding:26px;display:flex;flex-direction:column;min-width:0}
.dcon .clab{color:var(--mut-d)}
.dcon .con-row .v{color:#fff}
.dcon .con-plat{background:#0f0d18;border:1px solid var(--line-d)}
.dcon .con-plat button{color:var(--mut-d)}
.dcon .con-plat button.on{background:var(--purple);color:#fff}
.dcon .con-inp{background:#0f0d18;border:1px solid var(--line-d)}
.dcon .con-inp:focus-within{border-color:var(--purple)}
.dcon .con-inp .pre{color:var(--mut-d)}
.dcon .con-inp input{color:#fff}
.dcon .btn-dark{background:var(--purple);color:#fff}
.dcon .con-chan{background:#0f0d18;border-color:var(--line-d)}
.dcon .con-chan .av{background:#221d33}
.dcon .con-chan .nm{color:#fff}
.dcon .con-chan .pill{background:#221d33;color:var(--mut-d)}
.dcon .con-chan .pill.live{background:rgba(55,214,122,.16);color:var(--live)}
.dcon .con-chan .meta{color:var(--mut-d)}
.dcon .range{background:#2a2740}
.dcon .scale{color:var(--mut-d)}
.dcon .seg button{background:#0f0d18;border-color:var(--line-d);color:var(--mut-d)}
.dcon .seg button.on{background:rgba(169,112,255,.2);border-color:var(--purple);color:#fff}
.dcon .con-total{background:linear-gradient(135deg,rgba(169,112,255,.22),rgba(169,112,255,.06));border:1px solid rgba(169,112,255,.4)}
.dcon .con-total .k,.dcon .con-total .s{color:var(--mut-d)}
.dcon .con-total .p{color:#fff}
.dcon .con-note{color:var(--mut-d)}
.dcon .con-go{box-shadow:0 10px 30px -8px rgba(169,112,255,.6)}
/* the room */
.room{flex:1;display:flex;flex-direction:column}
.room-hd{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.room-hd .live{background:#e33;color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;border-radius:5px;padding:3px 8px}
.room-hd .rch{font-family:var(--mono);font-size:12px;color:var(--mut-d)}
.room-hd .rcnt{margin-left:auto;font-family:var(--mono);font-size:14px;color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.room-grid{flex:1;display:grid;grid-template-columns:repeat(20,1fr);gap:5px;align-content:start;min-height:230px}
.room-grid i{aspect-ratio:1;border-radius:50%;background:#2a2740;transition:background .3s var(--ease)}
.room-grid i.on{background:var(--purple)}
.room-cap{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-d);text-align:center}
/* cleaner console: fewer boxes, hairline dividers, unified duration control */
.dcon-l{padding:28px 26px}
.dcon .clab{font-size:11px;letter-spacing:.12em;margin-bottom:12px}
.dcon .con-chan{background:none;border:0;border-radius:0;padding:16px 0 0;margin-top:16px;border-top:1px solid var(--line-d)}
.dcon .con-chan .av{width:40px;height:40px}
.dcon .con-row{margin-top:22px}
.dcon .con-row .clab{margin-bottom:0}
.dcon .scale{margin-top:6px}
/* platform toggle = two equal segments (Twitch/Kick were uneven widths) */
.dcon .con-plat{display:inline-grid;grid-template-columns:1fr 1fr}
.dcon .con-plat button{padding:8px 18px;text-align:center}
/* duration = one segmented control, not four boxes */
.dcon .seg{gap:0;background:#0f0d18;border:1px solid var(--line-d);border-radius:10px;padding:4px;margin-top:10px}
.dcon .seg button{border:0!important;background:none;border-radius:7px;padding:9px 6px}
.dcon .seg button.on{background:var(--purple);color:#fff}
/* total = open row with a hairline, not a filled block */
.dcon .con-total{background:none!important;border:0!important;border-top:1px solid var(--line-d)!important;
  border-radius:0;padding:18px 0 0;margin:22px 0 16px}
.dcon .con-total .p{font-size:34px}
.dcon .con-go{padding:15px;font-size:16px}
@media(max-width:820px){.dcon-grid{grid-template-columns:1fr}.dcon-l{border-right:0;border-bottom:1px solid var(--line-d)}
  .room-grid{grid-template-columns:repeat(16,1fr)}}
/* ── motion + detail ── */
.anim .reveal{opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.anim .reveal.in{opacity:1;transform:none}
.hbr{animation:float 6.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* scattered dot texture for the dark bands */
.ddots{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ddots i{position:absolute;border-radius:50%;background:rgba(169,112,255,.45)}
@media (prefers-reduced-motion:reduce){.hbr{animation:none}}
/* ── statistics band (dark) ── */
.statband2{background:var(--ink);color:#fff;text-align:center;padding:var(--sec-y) 0;position:relative;overflow:hidden}
.statband2 .wrap{position:relative;z-index:1}
.statband2 .eyebrow{color:var(--purple)}
.statband2 h2{color:#fff}
.statband2 .lead{color:var(--mut-d);margin-left:auto;margin-right:auto}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);max-width:var(--w-mid);margin:56px auto 0}
.statrow b{display:block;font-size:42px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1}
.statrow span{font-size:13.5px;color:var(--mut-d);margin-top:8px;display:block}
.statband2 .btn{margin-top:42px}
/* ── features grid ── */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);max-width:var(--w-wide);margin:0 auto}
.feat{background:var(--paper2);border:1px solid var(--line-l);border-radius:var(--card-r);padding:var(--card-p);text-align:center;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.feat:hover{transform:translateY(-4px);box-shadow:var(--card-hover)}
.feat .ic{width:54px;height:54px;margin:0 auto 16px;border-radius:15px;
  background:linear-gradient(150deg,var(--purple-soft),#e3d2ff);
  box-shadow:0 8px 18px -8px rgba(169,112,255,.55);
  display:flex;align-items:center;justify-content:center;transition:transform .22s var(--ease)}
.feat:hover .ic{transform:scale(1.1) rotate(-3deg)}
.feat .ic svg{width:24px;height:24px;color:var(--purple-d)}
.feat h3{font-size:16px;font-weight:700;margin:0 0 8px}
.feat p{margin:0;font-size:13.5px;color:var(--mut-l);line-height:1.55}
/* ── pricing tier cards ── */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);margin-top:40px}
.tcardp{background:var(--ink2);border:1px solid var(--line-d);border-radius:var(--card-r);padding:var(--card-p);
  display:flex;flex-direction:column;gap:12px;position:relative}
.tcardp.fx{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple),0 26px 54px -26px rgba(169,112,255,.45)}
.tcardp .badge2{position:absolute;top:-11px;left:var(--card-p);font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--purple);border-radius:100px;padding:4px 11px}
.tcardp .tname{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut-d)}
.tcardp .tview{font-size:15px;color:#fff;font-weight:600}
.tcardp .tprice{display:flex;align-items:baseline;gap:4px}
.tcardp .tprice .cur{font-size:20px;color:var(--mut-d)}
.tcardp .tprice b{font-size:38px;font-weight:800;letter-spacing:-.02em}
.tcardp .tprice .per{font-size:13px;color:var(--mut-d)}
.tlist{list-style:none;margin:4px 0 4px;padding:0;display:flex;flex-direction:column;gap:10px}
.tlist li{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--mut-d)}
.tlist .ck{flex:none;width:18px;height:18px;border-radius:50%;background:rgba(169,112,255,.2);color:var(--purple);
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.tcardp .btn{width:100%;margin-top:auto}
@media(max-width:940px){.statband2{padding:var(--sec-y-sm) 0}
  .statrow{grid-template-columns:1fr 1fr;gap:34px var(--grid-gap)}
  .feat-grid,.tiers{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.feat-grid,.tiers{grid-template-columns:1fr}}
/* mobile shrink fixes */
.con-grid,.con-l,.con-r,.con-field,.con-inp{min-width:0}
.con-inp input{min-width:0;width:100%}
.console{width:100%}
@media (max-width:940px){.con-grid{grid-template-columns:minmax(0,1fr)}}

/* wide gutter: the fan's outermost deck card must never crowd the copy */
.fsx-split{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(64px,8vw,124px);align-items:center}
.fsx-split svg{flex:none}
.fsx-stage-col,.fsx-copy-col{min-width:0}
/* right: the writing (site type — Outfit via --ui, site .eyebrow/.lead) */
.fsx-copy-col h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1}
.fsx-copy-col .lead{max-width:44ch}
.fsx-ticks{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.fsx-ticks li{display:flex;align-items:flex-start;gap:11px;font-size:15px;font-weight:600;color:#2f2a44;line-height:1.45}
.fsx-tk{flex:none;width:21px;height:21px;border-radius:50%;background:var(--purple);margin-top:1px;display:flex;align-items:center;justify-content:center}
.fsx-tk svg{width:11px;height:11px;stroke:#fff;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* action row */
.fsx-go-bar{display:flex;align-items:stretch;gap:10px;margin-top:26px;flex-wrap:wrap}
.fsx-go-input{flex:1 1 200px;min-width:0;display:flex;align-items:center;gap:8px;background:var(--paper2);border:1px solid var(--line-l);border-radius:var(--r);padding:0 14px;box-shadow:0 16px 36px -22px rgba(63,38,120,.35);transition:border-color .16s var(--ease)}
.fsx-go-input:focus-within{border-color:var(--purple)}
.fsx-prefix{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:500;color:#9b95b3;white-space:nowrap;user-select:none}
.fsx-go-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;height:48px;font-family:var(--ui);font-size:16px;font-weight:600;color:var(--ink)}
.fsx-go-input input::placeholder{color:#c2bcd8;font-weight:500}
.fsx-go-input.fsx-locked input{opacity:.75}
#fsx-go{position:relative;white-space:nowrap}
#fsx-go:disabled{cursor:default;transform:none}
#fsx-go::after{content:"";position:absolute;inset:-5px;border-radius:10px;z-index:-1;background:rgba(169,112,255,.5);filter:blur(12px);opacity:0}
#fsx-go.fsx-armed{animation:fsxbreathe 1.9s ease-in-out infinite}
#fsx-go.fsx-armed::after{animation:fsxglow 1.9s ease-in-out infinite}
@keyframes fsxbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes fsxglow{0%,100%{opacity:.3}50%{opacity:.8}}
/* live status reads as a full-width bar, not a stray button-shaped chip
   stranded on its own wrapped row */
#fsx-go.fsx-pill{background:#e9f8ef;color:#177a4c;box-shadow:0 0 0 1px #bfe8cf inset;animation:none;font-size:14px;width:100%;justify-content:center}
#fsx-go.fsx-pill:hover{background:#e9f8ef}
#fsx-go.fsx-pill::after{display:none}
.fsx-gdot{width:9px;height:9px;border-radius:50%;background:#22b46b;flex:none;animation:fsxgpulse 1.8s ease-in-out infinite}
@keyframes fsxgpulse{0%,100%{opacity:.55}50%{opacity:1}}
.fsx-shake{animation:fsxshake .45s ease}
@keyframes fsxshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
/* ONE status line under the action row — the idle small print and the live
   narrator line occupy the same slot instead of stacking two competing
   paragraphs (which read as jumbled, with the lower line heavier than the
   upper one). Same size, same colour, same rhythm; only the words change. */
.fsx-status{margin:14px 0 0;max-width:46ch;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  font-size:13px;line-height:1.55;color:var(--mut-l)}
/* The line never changes and nothing new appears when you go live — the state
   is told by the button turning into the status pill, and that's it. Clicking
   the channel field resets the demo, so there's no reset link to sprout. */
.fsx-fine-txt{transition:opacity .3s ease}
#fsx-root[data-state="live"] .fsx-go-input{cursor:pointer}
/* left: the featured collection */
.fsx-stage-col{--cw:min(520px,38vw)}
.fsx-car{position:relative;height:calc(var(--cw)*.5625 + 18px);perspective:1500px}
.fsx-sim-tag{position:absolute;top:-9px;right:4px;z-index:70;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.85);border:1px solid #e5def2;border-radius:100px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-l);padding:4px 10px}
.fsx-sim-tag i{width:5px;height:5px;border-radius:50%;background:var(--purple);flex:none}
.fsx-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:80;width:34px;height:34px;padding:0;border-radius:50%;background:#fff;border:1px solid #e0d9ee;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -6px rgba(20,15,40,.25);transition:transform .2s,opacity .3s}
.fsx-arrow:hover{transform:translateY(-50%) scale(1.08)}
.fsx-arrow svg{stroke:#0e0e10}
#fsx-prev{left:-4px}
#fsx-next{right:-4px}
#fsx-root[data-state="going"] .fsx-arrow,
#fsx-root[data-state="live"] .fsx-arrow{opacity:.3;pointer-events:none}
/* stream cards */
.fsx-scard{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:16/9;border-radius:12px;transform:translate(-50%,-50%);will-change:transform;box-shadow:0 16px 38px -16px rgba(15,10,35,.5);background:#101018;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .45s ease,box-shadow .45s ease}
.fsx-scard.fsx-snap{transition:none !important}
.fsx-scard.fsx-sweep{transition:transform .8s cubic-bezier(.3,1.32,.42,1),opacity .45s ease,box-shadow .45s ease;z-index:60 !important}
.fsx-scard[data-slot="0"]{transform:translate(-50%,-50%);z-index:40;box-shadow:0 26px 60px -22px rgba(35,20,80,.55)}
.fsx-scard[data-slot="1"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.20 + 40px)) scale(.55) rotateY(-7deg);z-index:22}
.fsx-scard[data-slot="2"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.24 + 56px)) scale(.45) rotateY(-9deg);z-index:12}
.fsx-scard[data-slot="-1"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*-.20 - 40px)) scale(.55) rotateY(7deg);z-index:22}
.fsx-scard[data-slot="-2"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*-.24 - 56px)) scale(.45) rotateY(9deg);z-index:12}
.fsx-scard[data-slot="-3"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*-.26 - 64px)) scale(.4) rotateY(10deg);z-index:6}
/* user card poses — the card joins the fan at the RIGHT-HAND DECK SLOT (same
   pose as slot 1) and then sweeps to centre. It used to fade in at a bespoke
   floating offset, which read as "appearing in a weird place". */
.fsx-scard[data-slot="ent"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.20 + 40px)) scale(.44) rotateY(-7deg);opacity:0;z-index:30}
.fsx-scard[data-slot="rise"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.20 + 40px)) scale(.55) rotateY(-7deg);z-index:30}
/* Class-based entry poses. data-slot alone lost a race: if the attribute flips
   before the browser commits the entry style, the card renders from the BASE
   pose — full size, dead centre — and slides across the featured card. These
   carry higher specificity (0,3,0) and are held for the whole pre-roll beat,
   so the user's card can never appear anywhere but the right-hand deck slot. */
.fsx-scard.fsx-user.fsx-enter{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.20 + 40px)) scale(.44) rotateY(-7deg);opacity:0;z-index:30}
.fsx-scard.fsx-user.fsx-preroll{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.20 + 40px)) scale(.55) rotateY(-7deg);opacity:1;z-index:30}
/* per-slot depth shade */
.fsx-sdim{position:absolute;inset:0;border-radius:inherit;background:#0b0d12;opacity:0;transition:opacity .65s ease;z-index:10;pointer-events:none}
.fsx-scard[data-slot="1"] .fsx-sdim,.fsx-scard[data-slot="-1"] .fsx-sdim{opacity:.45}
.fsx-scard[data-slot="2"] .fsx-sdim,.fsx-scard[data-slot="-2"] .fsx-sdim{opacity:.62}
.fsx-scard[data-slot="-3"] .fsx-sdim{opacity:.74}
.fsx-scard[data-slot="rise"] .fsx-sdim{opacity:0}
/* caption row under the featured card */
.fsx-cap{width:var(--cw);max-width:100%;margin:16px auto 0;display:flex;align-items:center;gap:12px;min-width:0}
.fsx-cap-in{display:flex;align-items:center;gap:12px;flex:1;min-width:0;transition:opacity .18s ease,transform .18s ease}
.fsx-cap.fsx-swap .fsx-cap-in{opacity:0;transform:translateY(5px)}
.fsx-cav{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:800 16px 'Inter',sans-serif}
.fsx-av-plasma{background:linear-gradient(135deg,#ff9d4d,#ff4d88)}
.fsx-av-vex{background:linear-gradient(135deg,#7b5cff,#3ec6ff)}
.fsx-av-owl{background:linear-gradient(135deg,#2dd4a8,#1e90a8)}
.fsx-av-drift{background:linear-gradient(135deg,#ff8fc0,#a05cff)}
.fsx-av-kayo{background:linear-gradient(135deg,#5cc3ff,#3f6ae0)}
.fsx-av-user{background:linear-gradient(135deg,#8b5cf6,#4f46e5)}
.fsx-cmeta{flex:1;min-width:0}
.fsx-cname{display:flex;align-items:center;font-size:16px;font-weight:800;color:var(--ink);min-width:0;margin:0;line-height:1.35}
.fsx-cname #fsx-cap-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsx-ccat{font-size:13.5px;color:var(--mut-l);margin:2px 0 0;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fsx-cap-count{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:#3c3752;flex:none}
.fsx-rd{width:7px;height:7px;border-radius:50%;background:#e91916;flex:none}
.fsx-you{display:inline-flex;align-items:center;background:var(--purple);color:#fff;font:800 10.5px/1 var(--ui);letter-spacing:.06em;padding:3px 6px;border-radius:5px;margin-left:8px;flex:none}
.fsx-num{font-variant-numeric:tabular-nums}
/* --u = 1% of the card's width, so every scene keeps its proportions whether the
   card is 520px on desktop or 360px on a phone; --hb is the bottom-HUD baseline */
.fsx-scene{--u:calc(var(--cw,480px)/100);--hb:5.5%;position:absolute;inset:0;overflow:hidden;border-radius:inherit;font-family:'Inter',sans-serif;z-index:1}
.fsx-schip{position:absolute;display:inline-flex;align-items:center;gap:calc(var(--u)*.9);z-index:5;background:rgba(10,8,22,.62);color:#fff;font:700 calc(var(--u)*2.3)/1.1 'JetBrains Mono',monospace;padding:calc(var(--u)*.9) calc(var(--u)*1.5);border-radius:calc(var(--u)*.9);white-space:nowrap}
/* facecam + bust */
.fsx-fc{position:absolute;width:27%;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#151827;border:2px solid rgba(255,255,255,.22);box-shadow:0 8px 20px rgba(0,0,0,.45);z-index:6}
.fsx-fc.fsx-bl{left:4%;bottom:7%}
.fsx-fc.fsx-tr{right:4%;top:7%}
.fsx-fc.fsx-big{width:44%;left:50%;bottom:9%;transform:translateX(-50%)}
.fsx-fc .fsx-bust{position:absolute;inset:0;width:100%;height:100%}
.fsx-fcname{position:absolute;left:0;right:0;bottom:0;background:rgba(8,6,18,.74);color:#fff;font:700 11px 'Inter',sans-serif;padding:3px 7px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2;display:flex;align-items:center;gap:5px}
.fsx-fcname b{display:inline-flex;width:13px;height:13px;border-radius:3px;background:var(--purple);color:#fff;font:800 9px/13px var(--ui);justify-content:center;flex:none}
.fsx-bust .eyes{transform-box:fill-box;transform-origin:center;animation:fsxblink 4.8s infinite}
.fsx-bust .bob{animation:fsxbob 3.6s ease-in-out infinite}
@keyframes fsxblink{0%,93%,100%{transform:scaleY(1)}95.5%,97.5%{transform:scaleY(.1)}}
@keyframes fsxbob{0%,100%{transform:translateY(0)}50%{transform:translateY(1.8px)}}
/* follower alert */
.fsx-fol{position:absolute;left:50%;top:13%;transform:translate(-50%,-8px);opacity:0;z-index:8;display:flex;align-items:center;gap:7px;background:rgba(22,14,44,.82);border:1px solid rgba(169,112,255,.65);color:#fff;font:600 13px 'Inter',sans-serif;padding:7px 13px;border-radius:999px;transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1);white-space:nowrap}
.fsx-fol svg{stroke:#c9a9ff}
.fsx-fol.fsx-show{opacity:1;transform:translate(-50%,0)}
.fsx-fol.fsx-auto{animation:fsxfolloop 13s ease-in-out infinite}
@keyframes fsxfolloop{0%,8%{opacity:0;transform:translate(-50%,-8px)}12%,30%{opacity:1;transform:translate(-50%,0)}34%,100%{opacity:0;transform:translate(-50%,-8px)}}
.fsx-mq{animation:fsxmqpulse 6s ease-in-out infinite}
@keyframes fsxmqpulse{0%,100%{opacity:.55}50%{opacity:1}}
/* --- 1) SANDBOX SURVIVAL — voxel world in daylight + full survival HUD --- */
.fsx-sc-mc{background:linear-gradient(#4d9ce8 0%,#8acdfa 43%,#cbe9ff 55%)}
.fsx-sc-mc .sun{position:absolute;right:11%;top:9%;width:calc(var(--u)*6.4);height:calc(var(--u)*6.4);background:#fff8cf;box-shadow:0 0 0 calc(var(--u)*1.7) rgba(255,248,207,.3)}
.fsx-sc-mc .cloud{position:absolute;width:calc(var(--u)*12);height:calc(var(--u)*2.4);background:#fff;opacity:.92}
.fsx-sc-mc .cloud::after{content:"";position:absolute;left:calc(var(--u)*2.4);top:calc(var(--u)*-1.8);width:calc(var(--u)*6);height:calc(var(--u)*1.8);background:#fff}
.fsx-sc-mc .c1{left:8%;top:13%;animation:fsxcdrift 15s ease-in-out infinite alternate}
.fsx-sc-mc .c2{left:55%;top:23%;width:calc(var(--u)*8.5);animation:fsxcdrift 21s ease-in-out infinite alternate-reverse}
.fsx-sc-mc .c3{left:31%;top:5%;width:calc(var(--u)*6.5);height:calc(var(--u)*1.8);opacity:.7;animation:fsxcdrift 27s ease-in-out infinite alternate}
@keyframes fsxcdrift{to{transform:translateX(24px)}}
.fsx-sc-mc .hills{position:absolute;left:0;right:0;bottom:40%;height:14%}
.fsx-sc-mc .water{position:absolute;left:0;right:0;bottom:31%;height:9.6%;background:linear-gradient(#57a0ec,#2c62bd)}
.fsx-sc-mc .water i{position:absolute;height:calc(var(--u)*.8);background:rgba(255,255,255,.4)}
.fsx-sc-mc .water i:nth-child(1){left:24%;top:22%;width:13%;animation:fsxwave 7s ease-in-out infinite alternate}
.fsx-sc-mc .water i:nth-child(2){left:56%;top:58%;width:9%;animation:fsxwave 9.5s ease-in-out infinite alternate-reverse}
@keyframes fsxwave{to{transform:translateX(10px)}}
.fsx-sc-mc .terr{position:absolute;left:0;right:0;bottom:0;height:31%;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px calc(var(--u)*5)),
             repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px calc(var(--u)*5)),
             linear-gradient(#57b83f 0 20%,#469330 20% 27%,#7a5238 27%)}
.fsx-sc-mc .step{position:absolute;bottom:31%;z-index:2;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px calc(var(--u)*5)),
             repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px calc(var(--u)*5)),
             linear-gradient(#57b83f 0 26%,#469330 26% 35%,#7a5238 35%)}
.fsx-sc-mc .p1{left:0;width:23%;height:9%}
.fsx-sc-mc .p2{left:0;width:11%;height:17%}
.fsx-sc-mc .p3{right:0;width:27%;height:7%}
.fsx-sc-mc .tree{position:absolute;z-index:3;width:calc(var(--u)*11);height:calc(var(--u)*17)}
.fsx-sc-mc .tree i{position:absolute;left:50%;transform:translateX(-50%)}
.fsx-sc-mc .tree .lv{bottom:calc(var(--u)*6);width:100%;height:calc(var(--u)*8);background:#2f8a37;
  box-shadow:inset 0 calc(var(--u)*1.8) 0 #3fa843,inset 0 calc(var(--u)*-1.6) 0 rgba(0,0,0,.16)}
.fsx-sc-mc .tree .lv::before{content:"";position:absolute;left:18%;right:18%;top:calc(var(--u)*-2.6);height:calc(var(--u)*2.6);background:#3fa843}
.fsx-sc-mc .tree .tr{bottom:0;width:calc(var(--u)*3);height:calc(var(--u)*6.4);background:#6b4a2f;box-shadow:inset calc(var(--u)*-.9) 0 0 rgba(0,0,0,.2)}
.fsx-sc-mc .t1{left:1%;bottom:48%}
.fsx-sc-mc .t2{left:77%;bottom:38%}
.fsx-sc-mc .t3{left:26%;bottom:31%;width:calc(var(--u)*8);height:calc(var(--u)*13)}
.fsx-sc-mc .cube{position:absolute;width:calc(var(--u)*5);height:calc(var(--u)*5);background:#8a6a4a;z-index:3;
  box-shadow:inset 0 calc(var(--u)*1.4) 0 #a5825d,inset calc(var(--u)*-1) 0 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.14)}
.fsx-sc-mc .k1{left:45%;bottom:31%}
.fsx-sc-mc .k2{left:calc(45% + var(--u)*5);bottom:31%}
.fsx-sc-mc .k3{left:45%;bottom:calc(31% + var(--u)*5)}
.fsx-sc-mc .xh{position:absolute;left:50%;top:41%;width:calc(var(--u)*3.6);height:calc(var(--u)*3.6);transform:translate(-50%,-50%);z-index:4}
.fsx-sc-mc .xh::before,.fsx-sc-mc .xh::after{content:"";position:absolute;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.fsx-sc-mc .xh::before{left:50%;top:0;bottom:0;width:calc(var(--u)*.5);margin-left:calc(var(--u)*-.25)}
.fsx-sc-mc .xh::after{top:50%;left:0;right:0;height:calc(var(--u)*.5);margin-top:calc(var(--u)*-.25)}
.fsx-sc-mc .mchud{position:absolute;left:50%;bottom:var(--hb);transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.1)}
.fsx-sc-mc .rows{align-self:stretch;display:flex;justify-content:space-between}
.fsx-sc-mc .hearts,.fsx-sc-mc .hunger{display:flex;gap:calc(var(--u)*.45)}
.fsx-sc-mc .hearts svg,.fsx-sc-mc .hunger svg{display:block;width:calc(var(--u)*2.9);height:calc(var(--u)*2.7)}
.fsx-sc-mc .xp{position:relative;align-self:stretch;height:calc(var(--u)*1.5);background:rgba(10,12,18,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.fsx-sc-mc .xp i{position:absolute;left:0;top:0;bottom:0;width:64%;background:#7ef03a}
.fsx-sc-mc .xp b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 calc(var(--u)*2.7)/1 'Inter',sans-serif;color:#8bff42;
  text-shadow:0 1px 0 #14310f,0 -1px 0 #14310f,1px 0 0 #14310f,-1px 0 0 #14310f}
.fsx-sc-mc .hotbar{display:flex;gap:calc(var(--u)*.35);padding:calc(var(--u)*.45);background:rgba(14,14,20,.45);box-shadow:inset 0 0 0 calc(var(--u)*.4) rgba(255,255,255,.32)}
.fsx-sc-mc .slot{width:calc(var(--u)*5);height:calc(var(--u)*5);background:rgba(42,42,54,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.fsx-sc-mc .slot.sel{background:rgba(72,72,88,.6);box-shadow:inset 0 0 0 calc(var(--u)*.45) #fff}
.fsx-sc-mc .slot svg{display:block;width:76%;height:76%}
.fsx-sc-mc .mqd{left:4%;top:16%}
/* --- 2) RACING — chase view down a neon circuit + cockpit HUD --- */
.fsx-sc-race{background:linear-gradient(#0f0828 0%,#2a1060 26%,#6a1f86 41%,#0c0620 44%,#170d2e 100%)}
.fsx-sc-race .city{position:absolute;left:0;right:0;bottom:56%;height:16%}
.fsx-sc-race .glow{position:absolute;left:0;right:0;top:36%;height:8%;
  background:linear-gradient(rgba(255,61,199,0),rgba(255,61,199,.5) 55%,rgba(255,61,199,0))}
/* ground plane: origin pinned to the NEAR edge (bottom) and tilted away, so the
   road recedes to a vanishing point on the horizon. Rotating the other way put
   the whole plane behind the camera and rendered nothing at all. */
.fsx-sc-race .roadwrap{position:absolute;left:-12%;right:-12%;top:44%;bottom:0;perspective:calc(var(--u)*67);overflow:hidden}
.fsx-sc-race .lines,.fsx-sc-race .rumble{position:absolute;left:0;right:0;bottom:0;height:900%;transform-origin:50% 100%}
.fsx-sc-race .lines{transform:rotateX(65deg);animation:fsxroad .6s linear infinite;
  background:linear-gradient(90deg,transparent 0 25%,#1b1533 25% 29%,#f2eeff 29% 31%,#372a5c 31% 69%,#f2eeff 69% 71%,#1b1533 71% 75%,transparent 75%)}
.fsx-sc-race .lines::after{content:"";position:absolute;left:49%;width:2%;top:0;bottom:0;background:repeating-linear-gradient(0deg,#ffe95c 0 34px,transparent 34px 78px)}
.fsx-sc-race .rumble{transform:rotateX(65deg);animation:fsxrumble .2s linear infinite;
  background-image:repeating-linear-gradient(0deg,#ff3dc7 0 15px,#fff 15px 30px),repeating-linear-gradient(0deg,#3ec6ff 0 15px,#fff 15px 30px);
  background-size:3.2% 26px,3.2% 26px;background-position:26.5% 0,73.5% 0;background-repeat:repeat-y}
@keyframes fsxroad{0%{transform:rotateX(65deg) translateY(0)}100%{transform:rotateX(65deg) translateY(78px)}}
@keyframes fsxrumble{0%{transform:rotateX(65deg) translateY(0)}100%{transform:rotateX(65deg) translateY(26px)}}
.fsx-sc-race .rival{position:absolute;left:42%;top:49%;width:16%;z-index:3;animation:fsxrival 6s ease-in-out infinite alternate}
@keyframes fsxrival{0%{transform:translate(-6px,0) scale(.96)}100%{transform:translate(7px,-2px) scale(1.04)}}
.fsx-sc-race .speedo{position:absolute;left:4%;bottom:var(--hb);width:22%;z-index:5}
.fsx-sc-race .needle{transform-box:fill-box;transform-origin:50% 100%;animation:fsxrev 2.6s ease-in-out infinite alternate}
@keyframes fsxrev{0%{transform:rotate(-52deg)}100%{transform:rotate(30deg)}}
.fsx-sc-race .sread{position:absolute;left:30%;bottom:var(--hb);z-index:5;display:flex;align-items:baseline;gap:calc(var(--u)*.8);color:#fff;text-shadow:0 2px 7px rgba(6,3,16,.85)}
.fsx-sc-race .sread b{font:700 calc(var(--u)*6)/1 'JetBrains Mono',monospace;letter-spacing:-.02em}
.fsx-sc-race .sread span{font:700 calc(var(--u)*1.9)/1 'Inter',sans-serif;color:#b9a6e8;letter-spacing:.12em}
.fsx-sc-race .gear{position:absolute;left:30%;bottom:calc(var(--hb) + var(--u)*9.2);z-index:5;
  display:inline-flex;align-items:center;justify-content:center;width:calc(var(--u)*5.4);height:calc(var(--u)*5.4);
  background:rgba(10,7,22,.9);box-shadow:inset 0 0 0 1px rgba(255,61,199,.75);border-radius:calc(var(--u)*1);
  font:800 calc(var(--u)*3)/1 'Inter',sans-serif;color:#ff8fdd}
.fsx-sc-race .lap{left:4%;top:9%}
.fsx-sc-race .pos{left:4%;top:calc(9% + var(--u)*5.4)}
.fsx-sc-race .mini{position:absolute;right:4%;bottom:var(--hb);width:19%;z-index:5;opacity:.95}
.fsx-sc-race .mini .dot{transform-box:view-box;animation:fsxlapdot 7s linear infinite}
@keyframes fsxlapdot{0%{transform:translate(0,0)}20%{transform:translate(22px,-4px)}40%{transform:translate(42px,-4px)}
  60%{transform:translate(46px,10px)}80%{transform:translate(16px,21px)}100%{transform:translate(0,0)}}
/* --- 3) ARENA FPS — first-person corridor, cool industrial palette --- */
.fsx-sc-fps{background:#151d28}
.fsx-sc-fps .world{position:absolute;inset:0;width:100%;height:100%}
.fsx-sc-fps .tag{transform-box:fill-box;transform-origin:center;animation:fsxenemy 1.6s ease-in-out infinite}
@keyframes fsxenemy{0%,100%{opacity:.35}50%{opacity:1}}
.fsx-sc-fps .xh2{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:4;width:calc(var(--u)*4.4);height:calc(var(--u)*4.4)}
.fsx-sc-fps .gun{position:absolute;right:-2%;bottom:-5%;width:53%;z-index:5;transform-origin:bottom right;animation:fsxsway 3.2s ease-in-out infinite alternate}
@keyframes fsxsway{0%{transform:rotate(0deg) translateY(0)}100%{transform:rotate(1deg) translateY(-2px)}}
.fsx-sc-fps .mmap{position:absolute;left:4%;top:8%;width:16%;z-index:5;background:rgba(8,13,20,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);border-radius:calc(var(--u)*.6);padding:calc(var(--u)*.6)}
.fsx-sc-fps .mmap svg{display:block;width:100%;height:auto}
.fsx-sc-fps .mmap .me{transform-box:view-box;transform-origin:center;animation:fsxping 2.4s ease-in-out infinite}
@keyframes fsxping{0%,100%{opacity:.5}50%{opacity:1}}
.fsx-sc-fps .rtop{position:absolute;left:50%;top:7%;transform:translateX(-50%);z-index:5;display:flex;align-items:stretch;gap:calc(var(--u)*.6)}
.fsx-sc-fps .rtop span{display:inline-flex;align-items:center;justify-content:center;background:rgba(8,13,20,.62);
  font:700 calc(var(--u)*2.4)/1 'JetBrains Mono',monospace;color:#fff;padding:calc(var(--u)*.8) calc(var(--u)*1.4);border-radius:calc(var(--u)*.6)}
.fsx-sc-fps .rtop i{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--u)*4);
  font:800 calc(var(--u)*2.4)/1 'Inter',sans-serif;color:#fff;border-radius:calc(var(--u)*.6);font-style:normal}
.fsx-sc-fps .rtop .a{background:#2f7fd6}
.fsx-sc-fps .rtop .b{background:#c0453f}
.fsx-sc-fps .kf{position:absolute;top:7%;right:4%;display:flex;flex-direction:column;gap:calc(var(--u)*.7);align-items:flex-end;z-index:5}
.fsx-sc-fps .kf span{font:700 calc(var(--u)*2.1)/1 'Inter',sans-serif;color:#fff;background:rgba(8,12,18,.62);padding:calc(var(--u)*.7) calc(var(--u)*1.3);border-radius:calc(var(--u)*.6);opacity:0;animation:fsxkfx 8s infinite;white-space:nowrap}
.fsx-sc-fps .kf span b{color:#ff6a78;font-weight:800}
.fsx-sc-fps .kf span:nth-child(2){animation-delay:2.6s}
.fsx-sc-fps .kf span:nth-child(3){animation-delay:5.2s}
@keyframes fsxkfx{0%{opacity:0}4%,30%{opacity:1}38%,100%{opacity:0}}
.fsx-sc-fps .hud{position:absolute;left:35%;bottom:var(--hb);z-index:5;display:flex;flex-direction:column;gap:calc(var(--u)*.9)}
.fsx-sc-fps .bar{position:relative;width:calc(var(--u)*20);height:calc(var(--u)*1.7);background:rgba(255,255,255,.16);border-radius:calc(var(--u)*.9);overflow:hidden}
.fsx-sc-fps .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit}
.fsx-sc-fps .bar.hp i{width:72%;background:#4ade80}
.fsx-sc-fps .bar.sh i{width:46%;background:#4ec3ff}
.fsx-sc-fps .team{position:absolute;left:35%;bottom:calc(var(--hb) + var(--u)*6.4);z-index:5;display:flex;gap:calc(var(--u)*.7)}
.fsx-sc-fps .team i{width:calc(var(--u)*3.4);height:calc(var(--u)*1.4);border-radius:calc(var(--u)*.7);background:#2fd6a0}
.fsx-sc-fps .team i.d{background:rgba(255,255,255,.22)}
.fsx-sc-fps .team i.w{background:#ffc043}
.fsx-sc-fps .ammo{position:absolute;right:5%;bottom:calc(var(--hb) + var(--u)*3);z-index:6;display:flex;align-items:baseline;gap:calc(var(--u)*.7);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fsx-sc-fps .ammo b{font:700 calc(var(--u)*5.2)/1 'JetBrains Mono',monospace}
.fsx-sc-fps .ammo span{font:700 calc(var(--u)*2.6)/1 'JetBrains Mono',monospace;color:rgba(255,255,255,.6)}
/* --- 4) cozy just-chatting --- */
.fsx-sc-cozy{background:linear-gradient(150deg,#241726,#40263a 52%,#553149)}
.fsx-sc-cozy.u{background:linear-gradient(150deg,#1c1538,#33245c 52%,#43307a)}
.fsx-sc-cozy .lampglow{position:absolute;right:0;top:2%;width:48%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,186,110,.5),transparent 62%);animation:fsxlam 5s ease-in-out infinite alternate}
.fsx-sc-cozy.u .lampglow{background:radial-gradient(circle,rgba(190,150,255,.45),transparent 62%)}
@keyframes fsxlam{0%{opacity:.65}100%{opacity:1}}
.fsx-sc-cozy .win{position:absolute;left:5%;top:8%;width:24%;height:40%;border-radius:5px;background:linear-gradient(#141b3a,#2a3465);border:3px solid #171021;overflow:hidden}
.fsx-sc-cozy .win i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.9;animation:fsxstars 16s ease-in-out infinite alternate}
.fsx-sc-cozy .win i:nth-child(1){left:18%;top:22%}
.fsx-sc-cozy .win i:nth-child(2){left:52%;top:40%;animation-delay:-4s}
.fsx-sc-cozy .win i:nth-child(3){left:74%;top:16%;animation-delay:-9s}
.fsx-sc-cozy .win i:nth-child(4){left:34%;top:64%;animation-delay:-12s;width:2px;height:2px}
@keyframes fsxstars{to{transform:translate(-9px,5px)}}
.fsx-sc-cozy .desk{position:absolute;left:0;right:0;bottom:0;height:13%;background:#31202f;border-top:3px solid #1e1420}
.fsx-sc-cozy.u .desk{background:#251c44;border-top-color:#161031}
.fsx-sc-cozy .plant{position:absolute;left:5%;bottom:11%;width:13%;z-index:4}
.fsx-sc-cozy .mic{position:absolute;right:2%;bottom:8%;width:32%;z-index:4}
/* --- 4) MOBA — top-down lane, towers, ability bar with cooldown sweeps --- */
.fsx-sc-moba{background:#1c3325}
.fsx-sc-moba .world{position:absolute;inset:0;width:100%;height:100%}
.fsx-sc-moba .mn{transform-box:view-box;animation:fsxmini 5s linear infinite}
.fsx-sc-moba .mn.m2{animation-delay:-1.7s}
.fsx-sc-moba .mn.m3{animation-delay:-3.4s}
@keyframes fsxmini{0%{transform:translate(0,0);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translate(26px,-11px);opacity:0}}
.fsx-sc-moba .champ{transform-box:fill-box;transform-origin:center;animation:fsxchampb 3.4s ease-in-out infinite}
.fsx-sc-moba .champ.r{animation-duration:4.1s;animation-delay:-1.2s}
@keyframes fsxchampb{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}
.fsx-sc-moba .aoe{transform-box:fill-box;transform-origin:center;animation:fsxaoe 2.6s ease-out infinite}
@keyframes fsxaoe{0%{transform:scale(.4);opacity:.95}70%,100%{transform:scale(1.1);opacity:0}}
.fsx-sc-moba .abar{position:absolute;left:50%;bottom:var(--hb);transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.8)}
.fsx-sc-moba .bars{align-self:stretch;display:flex;flex-direction:column;gap:calc(var(--u)*.5)}
.fsx-sc-moba .bars i{position:relative;display:block;height:calc(var(--u)*1.5);background:rgba(6,10,8,.68);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);border-radius:calc(var(--u)*.8);overflow:hidden}
.fsx-sc-moba .bars i::after{content:"";position:absolute;left:0;top:0;bottom:0;border-radius:inherit}
.fsx-sc-moba .bars i.h::after{width:78%;background:#3ed37a}
.fsx-sc-moba .bars i.m::after{width:54%;background:#4c9cff}
.fsx-sc-moba .keys{display:flex;gap:calc(var(--u)*.8)}
.fsx-sc-moba .ab{position:relative;width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:calc(var(--u)*1);overflow:hidden;background:#1d2a3a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.fsx-sc-moba .ab svg{position:absolute;inset:0;width:100%;height:100%}
.fsx-sc-moba .ab .cd{position:absolute;left:0;right:0;bottom:0;top:0;background:rgba(6,10,20,.72);transform-origin:50% 100%;animation:fsxcd 4.5s linear infinite}
.fsx-sc-moba .ab:nth-child(2) .cd{animation-duration:6.5s;animation-delay:-2s}
.fsx-sc-moba .ab:nth-child(3) .cd{animation-duration:8s;animation-delay:-5s}
.fsx-sc-moba .ab:nth-child(4) .cd{animation-duration:11s;animation-delay:-3s}
@keyframes fsxcd{0%{transform:scaleY(1)}92%,100%{transform:scaleY(0)}}
.fsx-sc-moba .ab b{position:absolute;right:calc(var(--u)*.5);bottom:calc(var(--u)*.2);z-index:2;font:800 calc(var(--u)*1.9)/1 'Inter',sans-serif;color:rgba(255,255,255,.8)}
.fsx-sc-moba .mini{position:absolute;right:4%;bottom:var(--hb);width:20%;aspect-ratio:1;border-radius:50%;z-index:5;overflow:hidden;background:rgba(8,20,14,.78);box-shadow:inset 0 0 0 calc(var(--u)*.4) rgba(255,255,255,.24)}
.fsx-sc-moba .mini svg{position:absolute;inset:0;width:100%;height:100%}
.fsx-sc-moba .kda{left:4%;top:9%}
.fsx-sc-moba .gold{left:4%;top:calc(9% + var(--u)*5.4);color:#ffd24a}
.fsx-sc-moba .gold i{width:calc(var(--u)*1.8);height:calc(var(--u)*1.8);border-radius:50%;background:#ffd24a;flex:none}
/* --- 5) BATTLE ROYALE — third-person, storm wall, squad + compass HUD --- */
.fsx-sc-br{background:linear-gradient(#241340 0%,#5d2c52 30%,#b8603f 48%,#f0a45c 56%,#3a2436 58%,#1b1224 100%)}
.fsx-sc-br .world{position:absolute;inset:0;width:100%;height:100%}
.fsx-sc-br .storm{transform-box:fill-box;transform-origin:center;animation:fsxstorm 6s ease-in-out infinite alternate}
@keyframes fsxstorm{0%{opacity:.55}100%{opacity:.9}}
.fsx-sc-br .hero{position:absolute;right:22%;bottom:0;width:30%;z-index:4}
.fsx-sc-br .brb{transform-box:fill-box;transform-origin:center bottom;animation:fsxbreathe2 4.4s ease-in-out infinite}
@keyframes fsxbreathe2{0%,100%{transform:translateY(0)}50%{transform:translateY(1.6px)}}
.fsx-sc-br .comp{position:absolute;left:50%;top:7%;transform:translateX(-50%);width:40%;height:calc(var(--u)*3.6);overflow:hidden;z-index:5;border-radius:calc(var(--u)*.6);
  background:linear-gradient(90deg,rgba(10,8,18,0),rgba(10,8,18,.55) 18%,rgba(10,8,18,.55) 82%,rgba(10,8,18,0))}
.fsx-sc-br .comp i{position:absolute;left:0;top:0;width:100%;height:100%;padding:0 calc(var(--u)*2.6);box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  font:700 calc(var(--u)*2)/1 'Inter',sans-serif;color:rgba(255,255,255,.78);letter-spacing:.06em;font-style:normal;animation:fsxcomp 14s ease-in-out infinite alternate}
@keyframes fsxcomp{0%{transform:translateX(-4.5%)}100%{transform:translateX(4.5%)}}
.fsx-sc-br .comp em{position:absolute;left:50%;top:0;width:calc(var(--u)*.5);height:calc(var(--u)*1.4);background:#ffd24a;transform:translateX(-50%)}
.fsx-sc-br .squad{position:absolute;left:4%;top:9%;z-index:5;display:flex;flex-direction:column;gap:calc(var(--u)*.7)}
.fsx-sc-br .squad span{display:flex;align-items:center;gap:calc(var(--u)*.8)}
.fsx-sc-br .squad em{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--u)*2.6);height:calc(var(--u)*2.6);border-radius:calc(var(--u)*.5);
  background:rgba(8,6,16,.62);font:800 calc(var(--u)*1.8)/1 'Inter',sans-serif;color:#fff;font-style:normal;flex:none}
.fsx-sc-br .squad b{display:block;width:calc(var(--u)*11);height:calc(var(--u)*1.4);border-radius:calc(var(--u)*.7);background:rgba(8,6,16,.6);position:relative;overflow:hidden}
.fsx-sc-br .squad b::after{content:"";position:absolute;left:0;top:0;bottom:0;background:#4ade80;border-radius:inherit}
.fsx-sc-br .squad span:nth-child(1) b::after{width:88%}
.fsx-sc-br .squad span:nth-child(2) b::after{width:52%;background:#ffc043}
.fsx-sc-br .squad span:nth-child(3) b::after{width:70%}
.fsx-sc-br .squad span:nth-child(4) b::after{width:0}
.fsx-sc-br .squad span:nth-child(4) em{color:rgba(255,255,255,.35)}
.fsx-sc-br .alive{right:4%;top:9%}
.fsx-sc-br .alive u{color:#ff8f6a;text-decoration:none}
.fsx-sc-br .zone{right:4%;top:calc(9% + var(--u)*5.4);color:#d6b3ff}
.fsx-sc-br .rhud{position:absolute;right:4%;bottom:var(--hb);z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--u)*.8)}
.fsx-sc-br .rhud .am{display:flex;align-items:baseline;gap:calc(var(--u)*.7);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fsx-sc-br .rhud .am b{font:700 calc(var(--u)*5)/1 'JetBrains Mono',monospace}
.fsx-sc-br .rhud .am span{font:700 calc(var(--u)*2.5)/1 'JetBrains Mono',monospace;color:rgba(255,255,255,.6)}
.fsx-sc-br .rhud i{display:block;width:calc(var(--u)*18);height:calc(var(--u)*1.5);border-radius:calc(var(--u)*.8);background:rgba(8,6,16,.6);position:relative;overflow:hidden}
.fsx-sc-br .rhud i::after{content:"";position:absolute;left:0;top:0;bottom:0;border-radius:inherit}
.fsx-sc-br .rhud i.ar::after{width:64%;background:#7fd0ff}
.fsx-sc-br .rhud i.hp::after{width:83%;background:#4ade80}
/* --- photoreal capture plates: real gameplay under the vector HUD --- */
.fsx-scene::before{content:"";position:absolute;inset:0;z-index:0;
  background-position:50% 50%;background-size:cover;background-repeat:no-repeat;transform:scale(1.05)}
/* WebP first, JPEG second. These plates are CSS backgrounds, so unlike the video
   they are NOT behind the load/scroll gate — all of them fetch on every visit,
   phones included. WebP halves that (755KB -> 391KB) at equal or better quality.
   The plain url() line is the fallback for engines that do not parse image-set
   and drop the whole declaration. */
.fsx-sc-mc::before{background-image:url(/assets/scene-mc.jpg);background-image:image-set(url(/assets/scene-mc.webp) type("image/webp"),url(/assets/scene-mc.jpg) type("image/jpeg"))}
.fsx-sc-race::before{background-image:url(/assets/scene-race.jpg);background-image:image-set(url(/assets/scene-race.webp) type("image/webp"),url(/assets/scene-race.jpg) type("image/jpeg"))}
.fsx-sc-fps::before{background-image:url(/assets/scene-fps.jpg);background-image:image-set(url(/assets/scene-fps.webp) type("image/webp"),url(/assets/scene-fps.jpg) type("image/jpeg"))}
.fsx-sc-moba::before{background-image:url(/assets/scene-moba.jpg);background-image:image-set(url(/assets/scene-moba.webp) type("image/webp"),url(/assets/scene-moba.jpg) type("image/jpeg"))}
.fsx-sc-br::before{background-image:url(/assets/scene-br.jpg);background-image:image-set(url(/assets/scene-br.webp) type("image/webp"),url(/assets/scene-br.jpg) type("image/jpeg"))}
.fsx-sc-cozy::before{background-image:url(/assets/scene-cozy.jpg);background-image:image-set(url(/assets/scene-cozy.webp) type("image/webp"),url(/assets/scene-cozy.jpg) type("image/jpeg"))}
/* only the featured card drifts — the peeks stay still so nothing competes */
.fsx-scard[data-slot="0"] .fsx-scene::before,.trp>.fsx-scene::before{animation:fsxplate 30s ease-in-out infinite alternate}
@keyframes fsxplate{0%{transform:scale(1.05) translate(-.9%,-.6%)}100%{transform:scale(1.11) translate(.9%,.6%)}}
/* readability scrim: HUD (z 4+) rides above it, the plate below */
.fsx-scene::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(6,8,16,.4),rgba(6,8,16,.06) 24%,rgba(6,8,16,.05) 56%,rgba(6,8,16,.48))}
/* retire the vector world art — the HUD, chips, follow toast and cam stay */
.fsx-sc-mc .sun,.fsx-sc-mc .cloud,.fsx-sc-mc .hills,.fsx-sc-mc .water,.fsx-sc-mc .terr,
.fsx-sc-mc .step,.fsx-sc-mc .tree,.fsx-sc-mc .cube,
.fsx-sc-race .city,.fsx-sc-race .glow,.fsx-sc-race .roadwrap,.fsx-sc-race .rival,
.fsx-sc-fps .world,.fsx-sc-fps .gun,
.fsx-sc-moba .world,
.fsx-sc-br .world,.fsx-sc-br .hero,
.fsx-sc-cozy .lampglow,.fsx-sc-cozy .win,.fsx-sc-cozy .plant,.fsx-sc-cozy .mic,.fsx-sc-cozy .desk{display:none}
@media (prefers-reduced-motion:reduce){.fsx-scene::before{animation:none!important}}
/* unbacked HUD vectors need their own edge now they sit on a photo */
.fsx-sc-race .mini,.fsx-sc-race .speedo,.fsx-sc-race .needle,
.fsx-sc-fps .xh2,.fsx-sc-fps .team,.fsx-sc-mc .xh,.fsx-sc-moba .bars
  {filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(0,0,0,.35))}
/* the loop itself: rides on top of the still plate, under scrim and HUD */
.fsx-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  border-radius:inherit;opacity:0;transition:opacity .5s ease;pointer-events:none;background:transparent}
.fsx-vid.on{opacity:1}
/* the facecam swaps a drawn avatar for a real camera — snap it rather than
   morph it, so it reads as the camera coming online */
.fsx-fcv{transition-duration:.22s}
/* once footage is running the plate's drift is just wasted compositing */
.fsx-scene:has(.fsx-vid.on)::before{animation:none}
/* the visitor's own card keeps its purple cast */
.fsx-sc-cozy.u::after{background:linear-gradient(rgba(32,14,74,.44),rgba(32,14,74,.1) 26%,rgba(24,10,58,.14) 58%,rgba(26,11,64,.52))}
/* --- user "starting soon" --- */
.fsx-soon{position:absolute;inset:0;background:#15102b;z-index:7;overflow:hidden;border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:opacity .7s ease}
.fsx-soon .stripes{position:absolute;inset:-60%;background:repeating-linear-gradient(45deg,rgba(169,112,255,.13) 0 30px,transparent 30px 60px);animation:fsxstripe 2.6s linear infinite}
@keyframes fsxstripe{to{transform:translate(42.4px,42.4px)}}
.fsx-soon .ss1{font:800 24px var(--ui);color:#fff;letter-spacing:.16em;z-index:2}
.fsx-soon .ss2{font:500 13px 'JetBrains Mono',monospace;color:#b9a8e8;z-index:2}
.fsx-soon .dotp{width:9px;height:9px;border-radius:50%;background:var(--purple);z-index:2;animation:fsxpdot 1.6s ease-in-out infinite}
@keyframes fsxpdot{0%,100%{opacity:.35}50%{opacity:1}}
.fsx-scard.fsx-user.fsx-live .fsx-soon{opacity:0;pointer-events:none}
.fsx-badge-off{position:absolute;top:9px;left:9px;z-index:9;background:#53535f;color:#fff;font:700 12px/1 'Inter',sans-serif;letter-spacing:.06em;padding:5px 8px;border-radius:4px;transition:opacity .4s}
.fsx-scard.fsx-user.fsx-live .fsx-badge-off{opacity:0}
/* big ramp counter */
.fsx-bigcount{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);z-index:9;display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(12,8,26,.66);padding:14px 28px;border-radius:16px;border:1px solid rgba(169,112,255,.55);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.fsx-bigcount b{font:700 44px/1 'JetBrains Mono',monospace;color:#fff;font-variant-numeric:tabular-nums}
.fsx-bigcount span{font:700 12.5px 'Inter',sans-serif;color:#cbb8ff;letter-spacing:.1em;text-transform:uppercase}
.fsx-scard.fsx-user.fsx-ramping .fsx-bigcount{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Twitch-style player chrome (featured card only) */
/* --u is declared on .fsx-scene, which is this element's SIBLING, not its
   parent — so nothing in the chrome ever inherited it and every
   calc(var(--u)*n) inside the LIVE badge silently fell back to defaults:
   16px/400 text, 0 radius, and top:auto instead of the intended inset.
   Derive it from --cw here the same way the scene does. */
.fsx-chrome{--u:calc(var(--cw,480px)/100);position:absolute;inset:0;z-index:12;opacity:0;pointer-events:none;transition:opacity .4s ease .12s;border-radius:inherit;overflow:hidden}
.fsx-scard[data-slot="0"] .fsx-chrome{opacity:1}
.fsx-scard.fsx-user .fsx-chrome{transition:opacity .45s ease .4s}
.fsx-scard.fsx-user:not(.fsx-live) .fsx-chrome{opacity:0}
.fsx-badge-live{display:inline-flex;align-items:center;gap:calc(var(--u)*.85);background:#eb0400;color:#fff;font:800 calc(var(--u)*2.15)/1 'Inter',sans-serif;letter-spacing:.08em;padding:calc(var(--u)*1) calc(var(--u)*1.45);border-radius:calc(var(--u)*.75);box-shadow:0 1px 3px rgba(0,0,0,.4)}
/* The dot is decorative and identical at both call sites, so it is a pseudo-
   element rather than markup repeated in each. It does not pulse on purpose:
   the badge is on screen permanently on up to five cards at once, and the
   footage underneath is already moving — a blinking dot would compete with
   the very thing it is meant to be signalling. */
.fsx-badge-live::before{content:"";flex:none;width:calc(var(--u)*1.05);height:calc(var(--u)*1.05);border-radius:50%;background:#fff}
.fsx-chrome .fsx-badge-live{position:absolute;top:calc(var(--u)*1.7);left:4%}
.fsx-scard.fsx-user .fsx-chrome .fsx-badge-live{opacity:0;transform:scale(.5);transform-origin:left top;transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.fsx-scard.fsx-user.fsx-live .fsx-chrome .fsx-badge-live{opacity:1;transform:scale(1)}
.fsx-unmute{position:absolute;top:42px;left:9px;display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.72);color:#fff;font:600 12.5px 'Inter',sans-serif;padding:7px 11px;border-radius:6px;opacity:0;transition:opacity .25s ease}
.fsx-unmute svg{stroke:#fff}
.fsx-scard[data-slot="0"]:hover .fsx-unmute{opacity:1}
.fsx-pbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:24px 13px 10px;background:linear-gradient(transparent,rgba(0,0,0,.74));color:#fff}
.fsx-pbar svg{stroke:#fff}
.fsx-sp{flex:1}
.fsx-pchip{font:700 12px/1 'Inter',sans-serif;background:rgba(255,255,255,.16);padding:5px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:5px;color:#fff}
.fsx-pchip.fsx-ut{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;font-weight:500}
.fsx-pchip.fsx-ut .fsx-rd{width:6px;height:6px}
/* featured card: lift bottom-anchored scene HUDs clear of the player bar */
.fsx-scard[data-slot="0"] .fsx-scene{--hb:17%}
.fsx-scard[data-slot="0"] .fsx-fc.fsx-big{bottom:17%}
/* user viewer chip */
.fsx-vchip{position:absolute;top:9px;right:9px;z-index:13;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.66);color:#fff;font:700 13px 'Inter',sans-serif;padding:5px 9px;border-radius:4px;opacity:0;transition:opacity .35s}
.fsx-scard.fsx-user.fsx-hero .fsx-vchip{opacity:1}
/* responsive */
@media (max-width:1100px){
  .fsx-split{gap:36px}
  .fsx-stage-col{--cw:min(460px,36vw)}
}
@media (max-width:940px){
  .fsx-split{grid-template-columns:1fr;gap:26px}
  .fsx-copy-col{order:-1;max-width:560px}
  .fsx-stage-col{--cw:min(80vw,420px)}
  /* fan reduced to one peek card per side */
  .fsx-scard[data-slot="2"],.fsx-scard[data-slot="-2"],.fsx-scard[data-slot="-3"]{opacity:0}
  .fsx-scard[data-slot="1"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.225 + 24px)) scale(.55) rotateY(-7deg)}
  .fsx-scard[data-slot="2"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.225 + 24px)) scale(.45) rotateY(-9deg);z-index:8}
  .fsx-scard[data-slot="-1"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*-.225 - 24px)) scale(.55) rotateY(7deg)}
  .fsx-scard[data-slot="-2"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*-.225 - 24px)) scale(.45) rotateY(9deg);z-index:8}
  .fsx-scard[data-slot="-3"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*-.225 - 24px)) scale(.4) rotateY(10deg);z-index:6}
  .fsx-scard[data-slot="ent"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.225 + 24px)) scale(.44) rotateY(-7deg)}
  .fsx-scard[data-slot="rise"]{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.225 + 24px)) scale(.55) rotateY(-7deg)}
  .fsx-scard.fsx-user.fsx-enter{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.225 + 24px)) scale(.44) rotateY(-7deg)}
  .fsx-scard.fsx-user.fsx-preroll{transform:translate(-50%,-50%) translateX(calc(var(--cw)*.225 + 24px)) scale(.55) rotateY(-7deg)}
  #fsx-prev{left:-2px}
  #fsx-next{right:-2px}
}
@media (max-width:480px){
  .fsx-copy-col .lead{font-size:15px}
  .fsx-ticks li{font-size:14px}
  .fsx-go-bar{flex-direction:column}
  .fsx-go-input{flex:0 0 auto;width:100%}
  #fsx-go{width:100%}
  .fsx-prefix{font-size:12px}
  .fsx-stage-col{--cw:min(88vw,360px)}
  .fsx-arrow{width:29px;height:29px}
  .fsx-cap{width:100%}
  .fsx-cname{font-size:14.5px}
  .fsx-ccat{font-size:12.5px}
  #fsx-cap-count{font-size:12.5px}
  .fsx-pbar{gap:9px}
  .fsx-pchip{font-size:10.5px}
  .fsx-unmute{font-size:11px;padding:6px 9px}
  .fsx-soon .ss1{font-size:15px}
  .fsx-soon .ss2{font-size:10px}
  .fsx-bigcount b{font-size:28px}
  .fsx-bigcount span{font-size:10px}
  .fsx-bigcount{padding:10px 16px}
  .fsx-sim-tag{font-size:9.5px}
  .fsx-scard[data-slot="0"] .fsx-fc.fsx-big{bottom:24%}
  .fsx-fcname{font-size:9px;padding:2px 5px}
  .fsx-fcname b{display:none}
}
/* reduced motion: instant settled state */
@media (prefers-reduced-motion:reduce){
  .fsx-split *,.fsx-split *::before,.fsx-split *::after{transition:none !important;animation:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SURFACE PASS — carries the hero/demo language down the rest of the page.
   The demo device is the reference: layered ground, a 1px GRADIENT border
   (padding-box/border-box), a tight contact shadow + a wide ambient one, a
   soft accent bloom, and an inner top highlight. Everything below inherits
   that vocabulary. Tokens only extend the rhythm scale above — nothing forks.
   Scoping note: `.step` also exists inside the demo's voxel scene
   (.fsx-sc-mc .step), so every new step rule is scoped to `.steps .step`.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* light card surface + hairlines (lighter at the top = lit from above) */
  --surf:linear-gradient(178deg,#fff 0%,#fdfcff 46%,#f7f4fd 100%);
  --card-line:rgba(19,16,34,.085);
  --card-line-t:rgba(19,16,34,.04);
  --card-line-b:rgba(19,16,34,.115);
  --card-line-warm:rgba(169,112,255,.34);
  /* layered shadows: contact + ambient + inner top highlight */
  --sh-card:0 1px 1px rgba(19,16,34,.04),0 3px 7px -4px rgba(19,16,34,.08),
            0 22px 40px -28px rgba(53,32,104,.32),inset 0 1px 0 rgba(255,255,255,.85);
  --sh-card-h:0 2px 3px rgba(19,16,34,.05),0 10px 18px -10px rgba(19,16,34,.11),
              0 36px 62px -32px rgba(53,32,104,.44),inset 0 1px 0 #fff;
  --card-hover:var(--sh-card-h);
  /* icon tile: deep tinted chip + accent bloom */
  --tile:linear-gradient(158deg,#251e44,#15111f);
  --tile-ring:linear-gradient(158deg,rgba(169,112,255,.8),rgba(169,112,255,.14) 52%,rgba(255,255,255,.07));
  --sh-tile:0 8px 16px -10px rgba(19,16,34,.6),0 14px 30px -14px rgba(169,112,255,.5),
            inset 0 1px 0 rgba(255,255,255,.14);
  --sh-tile-h:0 10px 20px -10px rgba(19,16,34,.6),0 20px 40px -16px rgba(169,112,255,.7),
              inset 0 1px 0 rgba(255,255,255,.2);
  --glyph:#c9a8ff;
  /* dark surfaces */
  --surf-d:linear-gradient(168deg,#241d40 0%,#191430 44%,#141122 100%);
  --surf-d-ring:linear-gradient(168deg,rgba(255,255,255,.2),rgba(255,255,255,.045) 46%,rgba(169,112,255,.2));
  --sh-dcard:0 24px 46px -30px rgba(0,0,0,.85),0 2px 4px -2px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.06);
  --band:linear-gradient(180deg,#171232 0%,#131020 48%,#181333 100%)}

/* Flat paper. The purple radial washes that used to live here banded on real
   displays — you could see hard vertical seams where each gradient ended, which
   is worse than no atmosphere at all. The craft now lives in the cards and the
   dark bands, where it can't produce edges. */
main{background:var(--paper)}

/* ── 2. the card system — one crafted light surface for every light card ── */
.steps .step,.feat,.rev,.g2 .tcard{
  position:relative;
  background-color:#fff;
  background-image:var(--surf);
  border:1px solid var(--card-line);
  border-top-color:var(--card-line-t);
  border-bottom-color:var(--card-line-b);
  border-radius:var(--card-r);
  box-shadow:var(--sh-card);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}
.steps .step:hover,.feat:hover,.rev:hover{
  transform:translateY(-5px);
  box-shadow:var(--sh-card-h);
  border-color:var(--card-line-warm);
  border-top-color:rgba(169,112,255,.2)}

/* ── 3. icon tiles — deep chip, gradient ring, accent bloom, crisp glyph ── */
.steps .step .ic,.feat .ic{
  border:1px solid transparent;
  background:var(--tile) padding-box,var(--tile-ring) border-box;
  box-shadow:var(--sh-tile);
  transition:box-shadow .26s var(--ease),transform .26s var(--ease)}
.steps .step .ic{width:54px;height:54px;border-radius:15px;margin:0 auto 20px}
.steps .step .ic svg,.feat .ic svg{color:var(--glyph)}
.steps .step:hover .ic,.feat:hover .ic{box-shadow:var(--sh-tile-h);transform:translateY(-2px)}
.feat:hover .ic{transform:translateY(-2px) scale(1.04)}

/* ── 4. steps — connected by a hairline rail through the icon line ── */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:10%;right:10%;top:calc(var(--card-p) + 27px);height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(169,112,255,.7) 22%,rgba(169,112,255,.7) 78%,transparent)}
.steps .step{z-index:1}
.steps .step+.step::before{content:"";position:absolute;z-index:2;
  left:calc(var(--grid-gap)/-2 - 3.5px);top:calc(var(--card-p) + 23.5px);
  width:7px;height:7px;border-radius:50%;background:var(--purple);
  box-shadow:0 0 0 3px rgba(169,112,255,.16),0 2px 8px rgba(169,112,255,.6)}
.steps .step h3{letter-spacing:-.01em}

/* ── 5. stats band — depth, bloom, hairline-chromed columns, mono labels ── */
.statband2,.priceband{background:var(--band);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.statband2::before,.priceband::before{content:"";position:absolute;left:50%;top:-14%;
  width:min(1180px,132%);height:78%;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(169,112,255,.26),transparent 74%)}
.priceband>.wrap{position:relative;z-index:1}
.statrow>div{position:relative;padding:2px 8px}
.statrow>div+div::before{content:"";position:absolute;left:calc(var(--grid-gap)/-2);top:6%;bottom:6%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.18) 42%,transparent)}
.statrow b{background:linear-gradient(180deg,#fff,#d9cff5);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.statrow span{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#8f88b0}

/* ── 6. features — editorial shelf: two wide anchors, then two rows of three ── */
.feat-grid{grid-template-columns:repeat(6,1fr)}
.feat{grid-column:span 2;text-align:left}
.feat .ic{margin:0 0 16px}
.feat:nth-child(-n+2){grid-column:span 3;display:grid;grid-template-columns:auto 1fr;
  column-gap:18px;row-gap:6px;align-content:center;padding:28px var(--card-p)}
.feat:nth-child(-n+2) .ic{grid-row:span 2;margin:0;align-self:center;width:58px;height:58px;border-radius:16px}
.feat:nth-child(-n+2) h3{align-self:end;font-size:18px;margin:0}
.feat:nth-child(-n+2) p{align-self:start;font-size:14.5px}

/* ── 7. reviews — chromed head row, mono delta chip ── */
.rev .top{padding:0 0 14px;border-bottom:1px solid var(--card-line-t)}
.rst{font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(31,157,84,.22)}
.rev .av{box-shadow:0 2px 6px -2px rgba(19,16,34,.4),0 0 0 1px rgba(19,16,34,.06)}

/* ── 8. pricing cards — the device treatment on dark ── */
.tcardp{border:1px solid transparent;
  background:var(--surf-d) padding-box,var(--surf-d-ring) border-box;
  box-shadow:var(--sh-dcard)}
.tcardp .tname{font-family:var(--mono);font-size:11px;letter-spacing:.13em}
.tcardp.fx{border:1px solid transparent;
  background:
    radial-gradient(130% 78% at 50% -12%,rgba(169,112,255,.26),transparent 62%) padding-box,
    var(--surf-d) padding-box,
    linear-gradient(168deg,rgba(169,112,255,.95),rgba(169,112,255,.3) 52%,rgba(169,112,255,.7)) border-box;
  box-shadow:0 34px 64px -30px rgba(169,112,255,.55),0 4px 10px -6px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(255,255,255,.16)}
.tcardp.fx .tname{color:#c9a8ff}
.tcardp .badge2{box-shadow:0 6px 16px -6px rgba(169,112,255,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.tlist .ck{box-shadow:inset 0 0 0 1px rgba(169,112,255,.3)}
.ptog,.mplan{background:var(--surf-d)}

/* ── 9. trust pair — the "never" card inverts, so the two read as a contrast ── */
.g2 .tcard:last-child{border:1px solid transparent;
  background:var(--surf-d) padding-box,var(--surf-d-ring) border-box;
  box-shadow:var(--sh-dcard);color:var(--mut-d)}
.g2 .tcard:last-child h3{color:#fff}
.g2 .tcard:last-child .never li{border-bottom-color:rgba(255,255,255,.08)}
.g2 .tcard:last-child .never .no{color:#7d769e}
.g2 .tcard:last-child .never .no .ic{background:rgba(255,255,255,.07);color:#6d6690}
.g2 .tcard:last-child .never .no s{text-decoration-color:#4c4569}
.g2 .tcard h3{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-l)}
.g2 .tcard{display:flex;flex-direction:column}
.g2 .tcard .never{flex:1;display:flex;flex-direction:column;justify-content:center}
.g2 .tcard:first-child .never .yes .ic{box-shadow:inset 0 0 0 1px rgba(31,157,84,.22)}

/* ── responsive: keep every new composition on the shared grid ── */
@media (min-width:941px){
  .tiers .tcardp.fx{margin-top:-14px;padding-bottom:calc(var(--card-p) + 14px)}
}
@media (max-width:940px){
  .steps::before,.steps .step+.step::before{display:none}
  .statrow>div+div::before{display:none}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  /* Tablet (601-940) showed the mixed layout too: cards 1-2 icon-left beside
     cards 3-8 icon-on-top, in two columns. Same unification as the phone band,
     applied from 940 down; desktop (>=941) keeps the anchor composition. */
  .feat,.feat:nth-child(-n+2){grid-column:auto;display:grid;
    grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:6px;
    align-content:center;text-align:left}
  .feat .ic,.feat:nth-child(-n+2) .ic{grid-row:span 2;margin:0;align-self:start}
  .feat h3,.feat:nth-child(-n+2) h3{align-self:end;margin:0}
  .feat p,.feat:nth-child(-n+2) p{align-self:start}
  .feat:nth-child(-n+2){padding:var(--card-p)}
}
@media (max-width:600px){
  .feat-grid{grid-template-columns:1fr}
  .feat:nth-child(-n+2){column-gap:15px}
  .feat:nth-child(-n+2) .ic{width:52px;height:52px}
}

/* ── ACCESS PANEL (.axs) — replaces the two lopsided ask/never cards ──
   One dark device-surface panel in the hero/demo language, split down the
   middle: what we need on the left, what we never touch on the right. Two
   items vs four used to leave a hole in the left card; here the columns are
   top-aligned inside one frame, so the imbalance reads as deliberate. */
.axs{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:0;
  max-width:var(--w-mid);margin:0 auto;padding:34px 8px;border-radius:var(--card-r);
  background:var(--surf-d,linear-gradient(180deg,#1b1631,#12101d));
  border:1px solid transparent;
  box-shadow:var(--sh-dcard,0 30px 70px -34px rgba(19,16,34,.6)),inset 0 1px 0 rgba(255,255,255,.06)}
.axs::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 18% -10%,rgba(169,112,255,.16),transparent 60%)}
.axs-col{position:relative;z-index:1;padding:4px 30px}
.axs-lbl{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8b83ad;margin-bottom:20px}
.axs-never .axs-lbl{color:#7a7398}
.axs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.axs-list li{display:flex;gap:13px;align-items:flex-start}
.axs-ic{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.axs-ic svg{width:13px;height:13px}
.axs-ic.ok{background:rgba(55,214,122,.16);color:#4ade8a;box-shadow:0 0 0 1px rgba(55,214,122,.22)}
.axs-ic.no{background:rgba(255,255,255,.05);color:#6f6890;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.axs-list b{display:block;font-size:15.5px;font-weight:600;color:#fff;line-height:1.35}
.axs-list em{display:block;font-style:normal;font-size:13px;color:#9a92ba;margin-top:3px;line-height:1.45}
.axs-never .axs-list b{color:#8d86a8;font-weight:500}
/* hairline divider with the word set into it */
.axs-split{position:relative;z-index:1;width:1px;align-self:stretch;margin:0 4px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.14) 18%,rgba(255,255,255,.14) 82%,transparent)}
@media (max-width:820px){
  .axs{grid-template-columns:1fr;padding:26px 4px}
  .axs-col{padding:4px 22px}
  .axs-split{width:auto;height:1px;align-self:auto;margin:24px 22px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAIL PASS — the access panel down to the footer, built with the same
   vocabulary as the hero and the demo device: layered surfaces, 1px gradient
   rings (padding-box/border-box), a tight contact shadow plus a wide ambient
   one, mono micro-labels, hairline dividers, purple rationed against depth.
   The tail alternates light → dark → light → dark so it stops reading as one
   flat stretch. Every block sits on the SAME content edge (--w-mid) and on the
   shared --sec-y rhythm; nothing here forks a token.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --rail:linear-gradient(180deg,var(--purple),rgba(169,112,255,.06));
  --hair-l:linear-gradient(90deg,rgba(19,16,34,.14),rgba(19,16,34,.05) 58%,transparent);
  --bloom:rgba(169,112,255,.26)}
/* the run of light sections reads as one stretch — the step lands between
   groups, not between every block (replaces the inline padding-top:0) */
.sec-tight{padding-top:0}

/* ══════════ SESSION ANATOMY (dark band) ══════════
   The one thing the page never showed: the shape of a session over time.
   Everything is drawn from the same geometry object the controls feed, so the
   curve, the phase dividers and the annotation leaders can never drift apart. */
.sanat{position:relative;overflow:hidden;color:#fff;background:var(--band);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.sanat::before{content:"";position:absolute;left:50%;top:-16%;width:min(1180px,132%);height:80%;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,var(--bloom),transparent 74%)}
.sanat>.wrap{position:relative;z-index:1}
.sanat .eyebrow{color:var(--purple)}
.sanat h2{color:#fff}
.sanat .lead{color:var(--mut-d);margin-left:auto;margin-right:auto}

.san{position:relative;max-width:var(--w-mid);margin:0 auto;border-radius:var(--card-r);overflow:hidden;
  border:1px solid transparent;
  background:var(--surf-d) padding-box,var(--surf-d-ring) border-box;
  box-shadow:var(--sh-dcard),0 40px 90px -46px rgba(169,112,255,.6)}
/* title bar — same chrome as the demo device */
.san-bar{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--line-d)}
.san-bar i{width:9px;height:9px;border-radius:50%;background:#2c2840;flex:none}
.san-bar .t{margin-left:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut-d)}
.san-bar .st{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--live);
  border:1px solid rgba(55,214,122,.35);border-radius:100px;padding:4px 11px;white-space:nowrap}
.san-bar .st b{width:5px;height:5px;border-radius:50%;background:var(--live);flex:none}
.anim .san-bar .st b{animation:sanpulse 2.4s ease-in-out infinite}
@keyframes sanpulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
/* controls */
.san-ctl{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:18px clamp(18px,3vw,32px);padding:20px clamp(16px,2.4vw,24px);border-bottom:1px solid var(--line-d)}
.san-lbl{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8b83ad;margin-bottom:10px}
.san-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;
  background:#0f0d18;border:1px solid var(--line-d);border-radius:10px;padding:4px}
.san-seg-v{grid-template-columns:repeat(6,minmax(0,1fr))}
.san-seg button{min-width:0;border:0;background:none;color:var(--mut-d);font-family:var(--ui);
  font-size:13px;font-weight:600;padding:9px 2px;border-radius:7px;cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:color .16s var(--ease),background-color .16s var(--ease),box-shadow .16s var(--ease)}
.san-seg button:hover{color:#fff}
.san-seg button.on{background:var(--purple);color:#fff;box-shadow:0 8px 18px -10px rgba(169,112,255,.95)}
.san-seg button:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
/* plot */
.san-plot{padding:clamp(12px,2vw,20px) clamp(8px,1.6vw,16px) 2px}
.san-svg{display:block;width:100%;height:auto}
.san-grid{stroke:rgba(255,255,255,.06);stroke-width:1}
.san-base{stroke:rgba(255,255,255,.2);stroke-width:1}
.san-peak{stroke:rgba(169,112,255,.4);stroke-width:1;stroke-dasharray:2 5}
.san-div{stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:2 5}
.san-halo{fill:none;stroke:rgba(169,112,255,.3);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.san-curve{fill:none;stroke:url(#sanStroke);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.san-area{fill:url(#sanFill)}
.san-curve,.san-area,.san-halo,.san-lead,.san-div{transition:d .55s var(--ease)}
.san-mv{transition:transform .55s var(--ease)}      /* anything that rides the geometry */
.san-svg text{font-family:var(--mono);letter-spacing:.09em}
.san-ax{font-size:10px;fill:#7d76a0}
.san-ann text{font-size:10.5px;fill:#a79ecb}
.san-ann .w{fill:#fff;font-weight:700}
.san-lead{stroke:rgba(255,255,255,.2);stroke-width:1;stroke-dasharray:2 4}
.san-tip{fill:var(--purple)}
.san-head{fill:#fff;filter:drop-shadow(0 0 6px rgba(169,112,255,.9))}
.san-head-h{fill:rgba(169,112,255,.35);transform-box:fill-box;transform-origin:center}
.anim .san-head-h{animation:sanhead 2.6s ease-in-out infinite}
@keyframes sanhead{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.san-cap{margin:12px auto 0;max-width:var(--w-mid);text-align:center;font-family:var(--mono);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#7d76a0}
/* readout */
.san-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-d)}
.san-read>div{position:relative;padding:16px clamp(16px,2.2vw,22px)}
.san-read>div+div::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16) 45%,transparent)}
.san-k{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8b83ad}
.san-v{display:block;margin-top:8px;font-size:21px;font-weight:700;letter-spacing:-.015em;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.15}
.san-v small{font-size:12.5px;font-weight:600;color:#9a92ba;margin-left:6px;letter-spacing:0}
.san-note{display:block;margin-top:8px;font-size:13.5px;line-height:1.5;color:#a79ecb;font-weight:500}
@media (max-width:820px){
  .san-ctl{grid-template-columns:minmax(0,1fr)}
  .san-seg-v{grid-template-columns:repeat(3,minmax(0,1fr))}
  .san-read{grid-template-columns:minmax(0,1fr)}
  .san-read>div+div::before{left:clamp(16px,2.2vw,22px);right:clamp(16px,2.2vw,22px);
    top:0;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
  .san-ann text{font-size:12px}
  .san-ax{font-size:11px}
}

/* A SPREAD, not a stack. The lead used to run across a full-width row capped
   at 62ch and the pull-quote sat under the columns at 22ch — two half-empty
   rows, and the whole thing floated on the background with nothing holding it.
   Now: statements down a left rail (which the accent rail ties together),
   argument in the right column, one rule between them. */
.edit{max-width:var(--w-mid);margin:0 auto;display:grid;
  /* same proportions and the same behaviour as the FAQ below it, so the two
     sections rhyme instead of each inventing its own left rail */
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  column-gap:clamp(34px,4.6vw,72px);align-items:start}
/* The quote used to be pinned to the BOTTOM of the rail (margin-top:auto),
   which looked deliberate only when both columns happened to match. Against a
   tall right column it opened a ~350px hole in the middle of the left one.
   It now follows the lead, and the whole rail sticks as you read past it. */
.edit-side{position:sticky;top:clamp(24px,6vh,64px);
  padding-right:clamp(0px,1.4vw,18px)}
.edit-side .edit-pull{margin-top:clamp(26px,3.2vw,36px)}
/* the rule is drawn by the BODY so it runs the full height of the argument,
   not the height of a now-shorter rail */
.edit-body{position:relative;padding-left:clamp(26px,3.4vw,48px);
  border-left:1px solid rgba(19,16,34,.09)}
.edit-hd{max-width:62ch}
.edit-lead{margin:0;font-size:clamp(20px,2.25vw,26px);line-height:1.42;font-weight:700;
  letter-spacing:-.019em;color:var(--ink);text-wrap:pretty}
.edit-lead strong{font-weight:700;box-shadow:inset 0 -.4em 0 rgba(169,112,255,.18)}
.edit-rule{grid-column:1/-1;height:1px;border:0;margin:clamp(26px,3vw,34px) 0 clamp(28px,3.2vw,36px);
  background:linear-gradient(90deg,var(--purple) 0,rgba(169,112,255,.55) 13%,rgba(19,16,34,.13) 46%,transparent 90%)}
.edit-col{min-width:0}
.edit-col+.edit-col{margin-top:clamp(26px,3vw,34px)}
.edit-k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#7c7699;margin:0 0 14px}
.edit-k i{font-style:normal;color:var(--purple-d);margin-right:9px}
.edit-col p{margin:0 0 17px;font-size:16px;line-height:1.72;color:#5b5677}
.edit-col p:last-child{margin-bottom:0}
.edit-col strong,.edit-col b{color:var(--ink);font-weight:600}
/* the key line, lifted out */
.edit-pull{display:grid;grid-template-columns:2px minmax(0,1fr);gap:clamp(16px,2vw,22px);
  align-items:stretch;margin:clamp(28px,3.4vw,38px) 0 0;padding:0;border-top:0}
.edit-pull .r{border-radius:2px;background:var(--rail)}
.edit-pull p{margin:9px 0 0;font-size:clamp(20px,2.15vw,25px);line-height:1.24;font-weight:700;
  letter-spacing:-.024em;color:var(--ink);max-width:20ch}
.edit-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  margin:clamp(26px,3vw,32px) 0 0;padding-top:18px;border-top:1px solid rgba(19,16,34,.08);
  font-size:14.5px;line-height:1.6;color:var(--mut-l)}
.edit-foot .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8d87a6;flex:none}
@media (max-width:820px){
  .edit{grid-template-columns:minmax(0,1fr);row-gap:clamp(26px,5vw,34px)}
  /* margin-top:auto is what pins the quote to the bottom of the desk rail; in
     block flow it computes to 0 and the quote lands on the lead's last line */
  /* ⚠️ position:static is the load-bearing line. The desktop rail is sticky so it
     holds beside a tall argument column; once the grid collapses to ONE column
     the two children stack in normal flow, and a sticky child then pins itself
     to the top of the viewport while the column below scrolls underneath it —
     the lede and the pull quote sat frozen on top of "01 Why the count decides"
     and its paragraphs. Sticky must be unset wherever the column it belonged
     beside no longer exists. */
  .edit-side{padding-right:0;display:block;position:static;top:auto}
  .edit-side .edit-pull{margin-top:clamp(26px,5vw,34px)}
  .edit-body{padding-left:0;border-left:0;padding-top:clamp(24px,4.5vw,30px);
    border-top:1px solid rgba(19,16,34,.09)}
  .edit-col+.edit-col{margin-top:26px}
}

/* This card sat white on a #f5f4f8 section: almost no edge, so it read as a
   faint rectangle rather than an object. Pure white surface, a real border and
   a lifted shadow give it the presence the rest of the page's cards have. */
.faq{position:relative;max-width:var(--w-mid);margin:0 auto;overflow:hidden;
  /* 6px top/bottom: the first row used to start flush against the card's own
     rounded corner, so a focused ring on it sat right on that curve and read
     as escaping the card. */
  padding:6px clamp(18px,2.6vw,30px);counter-reset:fq;
  background:#fff;
  border:1px solid rgba(19,16,34,.1);
  border-radius:var(--card-r);
  box-shadow:0 2px 4px -2px rgba(19,16,34,.07),
             0 18px 34px -20px rgba(19,16,34,.22),
             0 46px 80px -56px rgba(169,112,255,.5)}
/* ── the FAQ's own column ── */
.faq-aside h2{margin:14px 0 0;font-size:clamp(30px,3.4vw,42px);line-height:1.06;
  letter-spacing:-.035em}
.faq-help{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--mut-l);max-width:34ch}
.faq-help a{color:var(--purple-d);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.faq-help a:hover{color:var(--ink)}
.faq-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.faq-badges span{font-family:var(--ui);font-size:12.5px;font-weight:600;color:#5b5677;
  background:rgba(19,16,34,.05);border:1px solid rgba(19,16,34,.08);
  border-radius:100px;padding:7px 13px}
@media (max-width:940px){
  /* ⚠️ .faq-lay is only display:grid above 941px (that rule lives in index.html),
     so BELOW it this is a plain block container and `gap` does nothing at all —
     it is not an override, it is inert. The chips row and the card were touching
     at exactly 0px, on every width from 375 to 940. The separation has to come
     from something block flow honours, so it is a margin on the aside. */
  .faq-lay{grid-template-columns:minmax(0,1fr);gap:26px}
  .faq-aside{position:static;text-align:center;margin-bottom:clamp(30px,6vw,44px)}
  .faq-help{margin-left:auto;margin-right:auto}
  .faq-badges{justify-content:center}
}
.faq details{position:relative;counter-increment:fq;margin:0;padding:0;
  border-bottom:1px solid var(--card-line-t)}
.faq details:last-child{border-bottom:0}
.faq details::before{content:"";position:absolute;left:calc(clamp(18px,2.6vw,30px) * -1);
  top:14px;bottom:14px;width:2px;border-radius:0 2px 2px 0;background:var(--rail);
  opacity:0;transform:scaleY(.35);transform-origin:50% 0;
  transition:opacity .24s var(--ease),transform .34s var(--ease)}
.faq details[open]::before{opacity:1;transform:scaleY(1)}
.faq summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  /* The 8px of horizontal padding is pulled straight back out by the negative
     margin, so nothing moves — it exists only to give the focus ring below
     something to be inset INTO. Without it the row's first and last children
     (the counter and the +) sit flush against the summary's own edges, and a
     ring drawn 4px inside the box cut clean through both of them. */
  gap:clamp(12px,1.8vw,18px);padding:22px 8px;margin:0 -8px;list-style:none;cursor:pointer;
  font-size:clamp(15.5px,1.5vw,17px);font-weight:600;line-height:1.42;
  transition:color .16s var(--ease)}
/* Keyboard focus, in the site's own language. A <summary> gets the browser's
   default focus ring — a hard blue rectangle, squared off and full-bleed
   across the row, which reads as a rendering fault on a card like this. The
   ring must stay (it is how keyboard users know where they are), so this
   restyles it rather than removing it: same 2px purple as the rest of the
   page, tucked inside the row and following its radius. */
.faq summary:focus{outline:none}
.faq summary:focus-visible{outline:2px solid var(--purple);outline-offset:-4px;
  border-radius:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:counter(fq,decimal-leading-zero);font-family:var(--mono);font-size:11px;
  font-weight:700;letter-spacing:.08em;color:#aaa2c6;transition:color .2s var(--ease)}
.faq summary::after{content:"";width:26px;height:26px;border-radius:50%;flex:none;
  border:1px solid rgba(19,16,34,.11);background-color:#fff;
  background-image:linear-gradient(var(--purple-d),var(--purple-d)),linear-gradient(var(--purple-d),var(--purple-d));
  background-size:10px 1.6px,1.6px 10px;background-position:center,center;background-repeat:no-repeat;
  box-shadow:0 1px 2px rgba(19,16,34,.07),inset 0 1px 0 #fff;
  transition:transform .3s var(--ease),border-color .2s var(--ease)}
/* Open is a state; hovered is not. These were one rule, so on a phone — where
   :hover sticks to whatever you last touched until you touch something else —
   collapsing a row left it showing a + while still wearing the open colour.
   The open half is unconditional; the hover half only applies where a real
   pointer exists. */
.faq details[open] summary,.faq details[open] summary::before{color:var(--purple-d)}
@media (hover:hover) and (pointer:fine){
  .faq details:hover summary,.faq details:hover summary::before{color:var(--purple-d)}
}
.faq details[open] summary::after{transform:rotate(45deg);border-color:var(--card-line-warm)}
.faq .ans{padding:0 clamp(0px,4vw,42px) 26px calc(11px * 2 + clamp(12px,1.8vw,18px));
  font-size:15.5px;line-height:1.72;color:var(--mut-l)}
.anim .faq details[open] .fa{animation:faIn .34s var(--ease) both}
@keyframes faIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes finpulse{0%,100%{opacity:.5;transform:scale(.84)}50%{opacity:1;transform:scale(1)}}

/* ── the closing band, using its width ─────────────────────────────────────
   Centred content in a 1392px card left the message stranded in the middle
   with void either side — the same fault the FAQ had. On desktop it becomes
   a band: what you get on the left, what to do about it on the right, which
   is also the order you read in. Stays centred on a phone, where a single
   column is the only sensible arrangement. */
@media (min-width:941px){
  .finalband .finalc{text-align:left;display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(36px,5vw,80px);align-items:center}
  .finalband .finalc>*{max-width:none;margin-left:0;margin-right:0}
  .finalband .finalc h2{grid-column:1;grid-row:1;max-width:20ch;text-wrap:balance}
  .finalband .finalc .fin-sub{grid-column:1;grid-row:2;margin-top:14px;
    justify-content:flex-start}
  .finalband .finalc .hero-cta{grid-column:2;grid-row:1/3;align-self:center;
    margin-top:0;justify-content:flex-end;flex-wrap:nowrap}
}

/* ══════════ FOOTER — columns, hairlines, mono labels, tidied payment chips ══════════ */
footer{position:relative;overflow:hidden;background:var(--band);color:var(--mut-d);
  padding:clamp(56px,7vw,84px) 0 34px;font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(169,112,255,.5) 24%,rgba(169,112,255,.5) 76%,transparent)}
footer::after{content:"";position:absolute;left:50%;top:-34%;width:min(1180px,130%);height:72%;
  transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(169,112,255,.16),transparent 74%)}
footer>.wrap{position:relative;z-index:2}
.fg{display:grid;gap:clamp(38px,5vw,64px);align-items:start}
.fbrand .brand{font-size:21px}
.fbrand .fpitch{margin:18px 0 0;max-width:40ch;color:var(--mut-d);font-size:14.5px;line-height:1.65}
.fbrand .btn{margin-top:26px;color:#fff}
.fpay{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09)}
.fmono{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#7d76a0;margin:0 0 14px}
.pay{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pay img{box-sizing:content-box;height:19px;width:auto;padding:7px 10px;border-radius:7px;opacity:.94;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.fcols{display:grid;gap:clamp(22px,3vw,30px)}
.fg .t{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;margin:0;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.11)}
.fg .fbrand a.brand{display:inline-flex}
.fg a:not(.btn){display:block;padding:9px 0;color:var(--mut-d);font-size:14.5px;
  transition:color .16s var(--ease),transform .16s var(--ease)}
.fg .t+a:not(.btn){padding-top:15px}
.fg a:not(.btn):hover{color:#fff;transform:translateX(3px)}
.fbot{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;
  margin-top:clamp(36px,5vw,54px);padding-top:22px;border-top:1px solid rgba(255,255,255,.09);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#6f6890}
@media (min-width:941px){
  .fg{grid-template-columns:minmax(0,0.92fr) minmax(0,1.62fr)}
  /* Four groups, not three: the homepage linked to no product page, no guide and
     not /pricing, so the one page brand searches land on passed nothing to the
     pages that sell. Its on-page anchors live in the nav. */
  .fcols{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:940px){
  .fg{grid-template-columns:minmax(0,1fr)}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:940px){
  /* ── NAV DROPDOWN ──────────────────────────────────────────────────────
     `.mobmenu` is a child of `.nav-in`, which is a flex ROW — so the menu was
     being laid out as an ~81px column wedged beside the burger, with every
     label clipped ("Dashbo…") and the nav bar growing taller when open.
     Taking it out of flow hangs it under the row as a full-width panel. */
  .nav-in{position:relative}
  .mobmenu{position:absolute;left:0;right:0;top:100%;width:auto;z-index:30;
    box-shadow:0 26px 44px -26px rgba(0,0,0,.95)}
  .nav.open .mobmenu{max-height:420px}
  .mobmenu-in{padding:6px var(--gut) 20px}
  .mobmenu a{padding:14px 0}
  /* burger reaches 44×44 (was 38×42). The 7px span pitch is unchanged, so the
     open-state X still lands. */
  .burger{padding:9px 11px}

  /* ── FOOTER BRAND LOCKUP ──────────────────────────────────────────────
     `.fg a:not(.btn){display:block}` was flattening the inline-flex logo, so
     the mark and the wordmark rendered on two lines. */
  .fg .fbrand a.brand{display:inline-flex}
  .fg .fbrand a.brand:hover{transform:none}
}

@media (max-width:600px){
  /* ── SHARED RHYTHM + TOUCH ───────────────────────────────────────────── */
  .sec-head{margin-bottom:40px}
  .btn{padding:14px 22px}            /* ── ANNOUNCEMENT + HERO ─────────────────────────────────────────────── */
  .announce{font-size:13px;line-height:1.45;padding:10px 18px;text-wrap:balance}
  /* 28px left the illustration sitting almost on the nav's bottom edge (18px
     of visible air). Paid for out of the hero's own bottom padding so the
     CTA does not move any closer to the fold. */
  .hero-in{padding-top:42px;padding-bottom:46px}
  .hbr{max-width:100%}
  .hero h1{margin-bottom:6px}
  .hero p{font-size:17px;text-wrap:pretty}
  .hero .hero-cta{gap:10px;flex-wrap:nowrap;margin-top:28px}
  .hero .hero-cta .btn{flex:1 1 0;min-width:0;padding:15px 12px}

  /* ── FEATURED-SPOT DEMO (#console) ───────────────────────────────────── */
  #fsx-go{padding:15px 24px;font-size:16px}
  .fsx-status{font-size:13.5px}
  .fsx-sim-tag{font-size:10px}
  /* At phone width the featured card fills the gutter, so the arrows sit ON
     the artwork — but as player chrome, not white discs. Dark glass with a
     white chevron is what a video player puts over footage; two solid white
     circles were the loudest thing in the frame. Target stays 44px. */
  .fsx-arrow{width:44px;height:44px;background:rgba(10,7,24,.52);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    border-color:rgba(255,255,255,.22);box-shadow:0 8px 20px -10px rgba(10,6,26,.8)}
  .fsx-arrow svg{width:17px;height:17px;stroke:#fff}
  #fsx-prev{left:5px}
  #fsx-next{right:5px}
  /* the note line directly above the carousel already says every channel is
     simulated — the chip straddling the card edge repeated it and crowded the
     viewer count on a 345px card */
  .fsx-sim-tag{display:none}
  .fsx-cap{margin-top:12px}
  /* Desktop scenes carry a full HUD; on a ~340px card the secondary
     instruments (compasses, squad lists, minimaps, ammo blocks) stack into
     clutter. Each scene keeps its identity pieces and loses the garnish. */
  .fsx-sc-br .comp,.fsx-sc-br .squad,.fsx-sc-br .rhud,
  .fsx-sc-fps .kf,.fsx-sc-fps .mmap,.fsx-sc-fps .team,
  .fsx-sc-moba .mini,.fsx-sc-moba .gold,.fsx-sc-moba .kda,.fsx-sc-moba .keys,
  .fsx-sc-race .mini,.fsx-sc-race .lap{display:none}
  /* player bar: pause, volume, clock, Clip, fullscreen — the quality chip and
     brightness control don't earn their width here */
  .fsx-pchip.fsx-pq,.fsx-pbar .fsx-pbright{display:none}
  /* the follower toast was the last scene chip still on a fixed px size, so on
     a ~345px card it swelled across the facecam. --u restores the desktop
     proportion (13px on a 520px card = 2.5u). */
  .fsx-fol{font-size:calc(var(--u)*2.5);gap:calc(var(--u)*1.35);
    padding:calc(var(--u)*1.35) calc(var(--u)*2.5)}
  .fsx-fol svg{width:calc(var(--u)*2.6);height:calc(var(--u)*2.6)}

  /* ── THREE STEPS ──────────────────────────────────────────────────────
     Stacked full-width cards with a centred icon over centred prose read as
     three near-empty billboards on a phone. Same card, same tokens, laid out
     as the icon+text anchor already used by the feature shelf. */
  .steps .step{display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:16px;row-gap:6px;align-content:center;text-align:left;
    padding:22px var(--card-p)}
  .steps .step .ic{grid-row:span 2;margin:0;align-self:start;
    width:52px;height:52px;border-radius:14px}
  .steps .step h3{align-self:end;margin:0;font-size:17.5px}
  .steps .step p{align-self:start;font-size:15px}

  /* ── STATS BAND ──────────────────────────────────────────────────────── */
  .statrow{margin-top:44px}
  .statrow span{font-size:11.5px;letter-spacing:.07em}

  /* ── FEATURE SHELF ────────────────────────────────────────────────────
     Cards 1–2 kept the wide desktop anchor layout while 3–8 stacked their
     icon on top, so one column showed two different card designs. Unify. */
  .feat,.feat:nth-child(-n+2){grid-column:auto;display:grid;
    grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:6px;
    align-content:center;text-align:left;padding:22px var(--card-p)}
  .feat .ic,.feat:nth-child(-n+2) .ic{grid-row:span 2;margin:0;align-self:start;
    width:52px;height:52px;border-radius:14px}
  .feat h3,.feat:nth-child(-n+2) h3{align-self:end;margin:0;font-size:17px}
  .feat p,.feat:nth-child(-n+2) p{align-self:start;font-size:15px}

  /* ── REVIEWS MARQUEE ──────────────────────────────────────────────────
     Wider fade so cards drift out instead of being chopped 27px from the edge. */
  .rev-mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
  .rev .q{font-size:15.5px}

  /* ── PRICING TIERS ────────────────────────────────────────────────────
     The "Most popular" badge sits 11px proud of its card; at --grid-gap it had
     11px of clearance from the card above. */
  .tiers{gap:calc(var(--grid-gap) + 14px)}
  .tlist{gap:11px}
  .tlist li{font-size:14.5px}

  /* ── ACCESS PANEL ────────────────────────────────────────────────────── */
  .axs-list em{font-size:13.5px}

  /* ── SESSION ANATOMY ─────────────────────────────────────────────────
     The title bar overflowed: dots + "SESSION PROFILE" + the status chip need
     ~323px inside a 302px bar, so the label broke onto two lines and the bar
     grew. The three dots are pure device chrome — they go first. */
  .san-bar{padding:13px 15px;gap:7px}
  .san-bar i{display:none}
  .san-bar .t{margin-left:0;min-width:0;font-size:10px;letter-spacing:.1em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .san-bar .st{font-size:9.5px;letter-spacing:.08em;padding:5px 10px}
  .san-seg{padding:5px}
  .san-seg button{padding:12px 2px;min-height:44px;font-size:13.5px}
  .san-read>div{padding:18px clamp(16px,2.2vw,22px)}
  .san-note{font-size:14px}

  /* ── EXPLAINER ───────────────────────────────────────────────────────── */
  .edit-col p{font-size:16px}
  .edit-foot{font-size:15px}

  /* ── FAQ ─────────────────────────────────────────────────────────────
     The answer carried a 34px left indent plus right padding, leaving ~38
     characters of line on a phone. The numeral and the rail already structure
     the row, so the answer can take the full card width. */
  .faq-col{display:contents}   /* one stack on a phone, not two */
  .faq .ans{padding:0 0 26px}

  /* ── FOOTER ─────────────────────────────────────────────────────────
     Three link groups in two columns always left a four-row hole under the
     shortest one. One column reads as deliberate. */
  .fcols{grid-template-columns:minmax(0,1fr)}
  .fg a:not(.btn){padding:11px 0}     /* 45px rows */
  .fbrand .fpitch{font-size:15px}
  .fbot{font-size:11.5px;line-height:1.65}
}

/* ── the explainer as a dark band ─────────────────────────────────────────
   The tail was four light sections in a row and read as one long undivided
   stretch. Putting the explainer on the band gives the eye a break and lets
   the FAQ card below land on a fresh surface. */
#explainer{background:var(--band);color:#fff}
#explainer .eyebrow{color:var(--purple)}
#explainer h2{color:#fff}
#explainer .edit-lead{color:#fff}
#explainer .edit-lead strong{box-shadow:inset 0 -.4em 0 rgba(169,112,255,.34)}
#explainer .edit-col p{color:var(--mut-d)}
#explainer .edit-col strong,#explainer .edit-col b{color:#fff}
#explainer .edit-k{color:#a49fc0}
#explainer .edit-k i{color:var(--purple)}
#explainer .edit-body{border-left-color:rgba(255,255,255,.12)}
#explainer .edit-pull p{color:#fff}
#explainer .edit-pull .r{background:linear-gradient(180deg,var(--purple),rgba(169,112,255,.2))}
/* .sec-tight zeroes the FAQ's top padding so it can hug the LIGHT section it
   used to follow. Against a dark band that put the eyebrow ~13px under the
   edge, which is what made the join look broken. It needs its own air now. */
#explainer{padding-bottom:0}
/* the wave already puts 60px of shaped space between the two, so the FAQ does
   not need a full section pad on top of it as well */
#faq{padding-top:clamp(38px,4.4vw,64px)}
@media (max-width:940px){ #faq{padding-top:var(--sec-y-sm)} }


/* ── Touch: undo hover effects that stick ──────────────────────────────────
   A tap fires :hover and it stays until the next tap elsewhere, so any hover
   that MOVES something leaves the last-touched card lifted or the last-tapped
   arrow enlarged. Colour-only hovers are left alone — they read as a tap
   highlight and are harmless. Additive and scoped to (hover:none), so nothing
   with a real pointer is touched. */
@media (hover:none){
  .steps .step:hover,.rev:hover,.feat:hover{transform:none}
  .steps .step:hover .ic,.feat:hover .ic{transform:none}
  .fg a:not(.btn):hover{transform:none}
  .fsx-arrow:hover{transform:translateY(-50%)}
}


/* ═══ hero browse grid ═════════════════════════════════════════════════
   The directory page, not a stream player — the player belongs to the demo
   and the tour below. This is where the product actually buys placement:
   a wall of live cards sorted by viewers, with your card climbing it. The
   chrome is replicated from the real directory (the near-black page, the
   red LIVE chip, the black-60 viewer pill, avatar + three-line card meta)
   because it only works as proof if it reads as the actual page — but,
   as before: no wordmark, no logo, no implied partnership, and the window
   bar carries a "simulated" tag. Inter rather than var(--ui) throughout,
   for the same reason the colors are theirs and not ours. */
.hbr-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;
  background:#18181b;border-bottom:1px solid rgba(255,255,255,.07);
  border-radius:13px 13px 0 0}
.hbr-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.13)}
.hbr-bar .t{margin-left:6px;font:600 10px/1 'Inter',sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.38)}
.hbr-sim{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font:700 9px/1 'Inter',sans-serif;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.42)}
.hbr-sim i{width:5px;height:5px;border-radius:50%;background:var(--purple);
  animation:hpPulse 2s ease-in-out infinite}
@keyframes hpPulse{0%,100%{opacity:1}50%{opacity:.35}}

.hbr-page{padding:0;background:#0e0e10;border-radius:0 0 13px 13px;overflow:hidden;
  font-family:'Inter',sans-serif}

/* the platform's own top nav: logo slot (ours, not theirs), search, the
   two account pills. Decoration with a job — it is what makes the replica
   read as the whole page rather than a widget. */
.hbr-nav{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#18181b;
  border-bottom:1px solid rgba(255,255,255,.07)}
.hbr-logo{display:inline-flex;flex:none}
.hbr-nav-l{font:600 10.5px/1 'Inter',sans-serif;color:#efeff1}
.hbr-nav-l.on{color:var(--purple)}
.hbr-search{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  background:#0e0e10;border:1px solid rgba(255,255,255,.15);border-radius:5px;
  font:400 9.5px/1 'Inter',sans-serif;color:#adadb8;padding:5px 22px 5px 7px}
.hbr-btn{flex:none;background:rgba(83,83,95,.38);color:#efeff1;
  font:600 9.5px/1 'Inter',sans-serif;padding:5px 8px;border-radius:9000px}
.hbr-btn-p{background:var(--tw);color:#fff}

.hbr-body{display:flex;align-items:stretch;min-width:0}
/* sidebar — the live-channels rail, where your row climbs in parallel */
.hbr-side{flex:none;width:148px;background:#1f1f23;padding:8px 6px 10px;
  border-right:1px solid rgba(255,255,255,.05)}
/* .hero p is (0,1,1) and this is a <p> inside the hero, so a bare
   .hbr-side-h (0,1,0) loses to it and inherits 17.5px body type with a
   20px top margin — a banner where a caption should be. Scoped to beat
   it on specificity rather than with !important, same as hpchat-h was. */
.hbr-side .hbr-side-h{margin:0 0 6px;padding:0 4px;font:700 8.5px/1 'Inter',sans-serif;
  letter-spacing:.11em;text-transform:uppercase;color:#adadb8}
.hbr-srow{display:flex;align-items:center;gap:6px;padding:4px;border-radius:4px;min-width:0}
.hbr-sav{flex:none;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;font:700 8.5px/1 'Inter',sans-serif;color:var(--ink)}
.hbr-sav-you{background:var(--purple);color:#fff}
.hbr-stx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.hbr-stx b{font:600 9.5px/1.2 'Inter',sans-serif;color:#efeff1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbr-stx em{font-style:normal;font:400 8.5px/1.2 'Inter',sans-serif;color:#adadb8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbr-scnt{flex:none;display:inline-flex;align-items:center;gap:3px;
  font:500 8.5px/1 'Inter',sans-serif;color:#d3d3d9;font-variant-numeric:tabular-nums}
.hbr-scnt i{width:5px;height:5px;border-radius:50%;background:#eb0400}
.hbr-syou{background:rgba(169,112,255,.14)}
.hbr-syou .hbr-stx b{color:#fff}

.hbr-main{flex:1;min-width:0;padding:11px 12px 14px}
/* Centred, not baseline: three type sizes share this row, and the active
   tab's underline used to be box padding + border, which grew its box and
   sank both tabs 6px below their neighbours. The underline now hangs off
   a pseudo-element so every box is exactly its text. */
.hbr-head{display:flex;align-items:center;gap:13px;margin:0 2px 12px}
.hbr-h1{font:800 15px/1 'Inter',sans-serif;color:#efeff1;margin-right:1px}
.hbr-tab{position:relative;font:600 11px/1 'Inter',sans-serif;color:#adadb8}
.hbr-tab.on{color:#efeff1}
.hbr-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--tw)}
.hbr-sort{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font:600 10.5px/1 'Inter',sans-serif;color:#adadb8}

.hbr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 10px}
.hbr-card{min-width:0}
.hbr-th{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#26262c}
/* Thumbnails are the real gameplay footage the rest of the page uses, not
   flat art. The whole reason the hero stopped being a cartoon is that
   illustration is what made this site read as a template — putting drawings
   back into the directory reintroduces exactly that. */
.hbr-th svg{width:100%;height:100%;display:block}
.hbr-th .hbr-shot{width:100%;height:100%;object-fit:cover;display:block}
.hbr-live{position:absolute;top:6px;left:6px;background:#eb0400;color:#fff;
  font:600 8.5px/1 'Inter',sans-serif;letter-spacing:.05em;padding:3px 5px;border-radius:4px}
.hbr-vc{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;
  font:500 9.5px/1 'Inter',sans-serif;padding:3px 5px;border-radius:4px}
.hbr-vc b{font-weight:600;font-variant-numeric:tabular-nums}
.hbr-meta{display:flex;gap:8px;margin-top:8px;min-width:0}
.hbr-av{flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font:700 11px/1 'Inter',sans-serif;color:var(--ink)}
.hbr-av-you{background:var(--purple);color:#fff}
.hbr-txt{display:flex;flex-direction:column;gap:2.5px;min-width:0}
.hbr-txt b{font:600 11.5px/1.25 'Inter',sans-serif;color:#efeff1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbr-txt em{font-style:normal;font:400 10.5px/1.25 'Inter',sans-serif;color:#d3d3d9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:5px}
.hbr-txt em.c{color:#adadb8}
.hbr-chip{flex:none;background:var(--purple);color:#fff;font:800 8px/1 'Inter',sans-serif;
  letter-spacing:.07em;padding:2.5px 5px;border-radius:8px}

/* The ring marks whose card to watch before it moves; the glow is only
   earned when it gets there. */
.hbr-you .hbr-th{box-shadow:0 0 0 2px var(--purple)}
.hbr-you.hbr-top .hbr-th{box-shadow:0 0 0 2px var(--purple),0 10px 30px -6px rgba(169,112,255,.5)}

@media (max-width:760px){
  .hbr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hbr-sort{display:none}        /* at this width it collides with the tabs */
  .hbr-side{display:none}        /* the real page collapses its rail too */
  /* Two rows, not three, on a phone. The two deepest rivals go — they are
     the ones your card passes in the first second anyway, and the overtake
     logic walks display:none siblings without animating them. */
  .hbr-deep{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hbr-sim i{animation:none}
}

/* The payment marks stay; the three-fact reassurance line that used to sit
   above them was removed at the owner's request. Its top margin moves here
   so the row still clears the buttons on the same rhythm. */
.hero-pay{display:flex;align-items:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.hero-pay img{height:20px;width:auto;border-radius:3px;opacity:.9}
.hero-pay span{font-size:11.5px;color:var(--mut-d);margin-left:6px}

@media (max-width:900px){
  /* The headline and paragraph centre on mobile, so this must too — left
     logos under a centred caption under a centred headline reads as a bug. */
  .hero-pay{margin-top:26px;justify-content:center}
  .hero-pay span{width:100%;margin:5px 0 0;text-align:center}
}


/* ═══ free trial (section 1) — the order sheet ═════════════════════════
   A formal receipt with the price struck through and FREE stamped across it
   at an angle. The 25 sits inside the headline at nearly double the size of
   the words around it — loud without leaving the sentence. Background one
   shade darker than paper so the white sheet reads as an object on a desk. */
/* overflow:hidden is for the stamp: rotated, it overhangs the sheet on
   purpose, and its bounding box must not hand the page a scrollbar. */
.tsec{background:#efeef4;padding:clamp(72px,9vw,104px) 0;overflow:hidden}
/* minmax(0,1fr), not bare 1fr: a grid track refuses to shrink below its
   content's min-width by default, and on a phone that stretched the sheet
   to 380px in a 342px container — clipped 14px by the section, no error
   anywhere, just a card missing its right edge. */
.tsec-in{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;
  grid-template-columns:minmax(0,1fr) 460px;gap:clamp(36px,5vw,56px);align-items:center}
.tsec-in>*{min-width:0}
.tsec h2{margin:0 0 22px;font-size:clamp(30px,4.2vw,56px);line-height:1.02;
  letter-spacing:-.03em;font-weight:700;color:var(--ink);max-width:13ch}
.tsec h2 b{font-size:1.85em;font-weight:800;color:var(--purple-d);
  letter-spacing:-.05em;line-height:.8;vertical-align:-.08em;padding:0 2px}
.tsec-lead{margin:0 0 26px;color:var(--mut-l);font-size:16.5px;line-height:1.6;max-width:40ch}

.tsec-bar{display:flex;gap:8px;max-width:500px;background:#fff;
  border:1px solid var(--line-l);border-radius:15px;padding:8px;
  box-shadow:0 24px 50px -30px rgba(19,16,34,.3)}
.tsec-bar select{border:0;background:none;outline:none;font:600 14.5px/1 var(--ui);
  color:var(--ink);padding:0 10px;cursor:pointer}
.tsec-bar input{flex:1;min-width:0;border:0;outline:none;background:none;
  font:600 15px/1 var(--ui);color:var(--ink);padding:14px 4px}
.tsec-bar input::placeholder{color:var(--mut-l);font-weight:500}
.tsec-bar button{border:0;background:var(--ink);color:#fff;font:700 14.5px/1 var(--ui);
  padding:14px 24px;border-radius:10px;cursor:pointer;
  transition:transform .16s cubic-bezier(.23,1,.32,1),opacity .16s ease}
.tsec-bar button:active{transform:scale(.97)}
.tsec-bar button[disabled]{opacity:.5;cursor:default}
.tsec-bar:focus-within{border-color:var(--purple)}
.tsec-msg{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--mut-l);min-height:1.2em}
.tsec-msg.ok{color:#1c9c5c}
.tsec-msg.err{color:#c2405a}

/* the sheet — deliberately paper: mono type, dashed rules, a struck total */
/* translateZ(0) is load-bearing, not superstition. The stamp's SVG filter
   and blend promote a composited layer, and left to itself the browser
   promoted the whole section — whose full-width raster then showed its GPU
   TILE SEAM as a grey hairline in the flat light area above (same disease
   as the .top glow, second organ). Promoting the sheet instead keeps the
   composited layer 460px wide: one tile, nothing to seam. Remove this and
   the line comes back at some scroll offsets on some renderers. */
.tsec-sheet{transform:translateZ(0);position:relative;background:#fff;border-radius:6px;padding:34px 36px;
  font-family:var(--mono);box-shadow:0 40px 70px -44px rgba(19,16,34,.5)}
.tsec-sheet h4{margin:0 0 6px;font:700 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.tsec-no{margin:0 0 18px;font:500 11px/1 var(--mono);color:var(--mut-l)}
.tsec-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px dashed rgba(19,16,34,.15);font-size:12.5px}
.tsec-row span:first-child{color:var(--mut-l)}
.tsec-row span:last-child{font-weight:700;color:var(--ink);text-align:right}
.tsec-tot{display:flex;justify-content:space-between;padding-top:14px;font-size:15px;font-weight:700;color:var(--ink)}
.tsec-tot s{text-decoration-thickness:2px;text-decoration-color:#c2405a;color:var(--mut-l);
  font-weight:500;margin-right:10px}

/* the stamp. Ink, not sticker: rough edge from the #ftRough displacement
   filter, multiply so it sits IN the paper, rotated like it was done by hand */
/* Top-right header zone, angled over the card edge — the one region of the
   sheet with no text. It used to sit mid-sheet at 88px where the ink lay
   over three row labels; the owner liked the stamp, not the coverage. */
.tsec-stamp{position:absolute;top:-26px;right:-30px;left:auto;transform:rotate(-9deg);
  font:800 58px/1 var(--ui);letter-spacing:.02em;color:#7c3aed;
  border:5px solid #7c3aed;border-radius:12px;padding:2px 18px;opacity:.85;
  filter:url(#ftRough);mix-blend-mode:multiply;pointer-events:none}
.tsec-stamp small{display:block;font:700 11.5px/1.2 var(--ui);letter-spacing:.3em;
  text-align:center;margin-top:2px}

@media (max-width:900px){
  /* 56px matches the vertical rhythm every other section keeps on a phone
     (measured: tour, access, spec, faq all 56). The clamp above resolves to
     72 here, which made this the one section with visibly more dead air
     than its neighbours. */
  .tsec{padding:36px 0 56px}  /* top tightened at the owner's ask — the wave already provides the air */
  /* 16px is not a style choice: iOS zooms the page on focus of any text
     control under 16px, and the claim field is the one input a phone
     customer must use. The select matches so the row stays level. */
  .tsec-bar input,.tsec-bar select{font-size:16px}
  .tsec-in{grid-template-columns:minmax(0,1fr);gap:38px}
  .tsec h2{max-width:none}
  .tsec-sheet{max-width:460px}
  /* Mid-sheet, the stamp sits ON the row values at phone width — "Twitch /
     Kick" and "20 minutes" were unreadable under it. Hung off the sheet's
     top corner instead, where it overlaps only the header and the card
     edge: still looks slapped on, covers nothing anyone needs to read. */
  .tsec-stamp{left:auto;right:-8px;top:-16px;transform:rotate(-10deg);
    font-size:40px;border-width:4px;border-radius:10px;padding:2px 14px}
  .tsec-stamp small{font-size:9px;letter-spacing:.22em}
}
@media (prefers-reduced-motion:reduce){
  .tsec-bar button{transition:none}
}