/* ============================================================
   PIN STADIUM 3.0 — design tokens
   ============================================================ */
:root{
  --ink:#04050a;
  --ink-1:#080a12;
  --ink-2:#0d1020;
  --ink-3:#141830;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --gold:#FFC61A;
  --gold-hi:#FFE895;
  --gold-lo:#E08A00;
  --magenta:#FF1B6B;
  --purple:#8B2BE2;
  --cyan:#00E0FF;
  --lime:#B6FF3A;

  --txt:#EEF1F8;
  --txt-2:#A5AEC4;
  --txt-3:#6D7797;

  --flip:linear-gradient(100deg,#FFE895 0%,#FFC61A 30%,#F08C00 58%,#FF1B6B 88%);
  --flip-2:linear-gradient(100deg,#FFC61A 0%,#FF1B6B 55%,#8B2BE2 100%);

  --max:1240px;
  --r:5px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
/* overflow-x lives HERE, not on body. On body it makes BODY the scroll
   container instead of the viewport, and then window scroll events stop
   firing and IntersectionObserver never triggers - which is what left the
   scroll-reveal blocks stuck at opacity 0 and punched black holes down the
   page. On html the UA propagates it to the viewport and scrolling stays
   normal. */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

h1,h2,h3,.disp{
  font-family:Anton,Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;line-height:.92;margin:0;
}
.cond{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:700}

.grad{background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad2{background:var(--flip-2);-webkit-background-clip:text;background-clip:text;color:transparent}

/* -------- shared bits -------- */
.eyebrow{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.28em;font-size:13px;color:var(--gold);margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--flip);flex:none;border-radius:2px}
.eyebrow.c{justify-content:center}
.lede{color:var(--txt-2);font-size:17px;max-width:62ch}
section{position:relative}
.sec{padding:96px 0}
.sec-tight{padding:66px 0}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:3px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:16px;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .2s,filter .2s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
/* buttons get their own ramp: --flip ends in magenta, which dropped the label to 5.2:1.
   This keeps the whole label on the gold range and only kisses pink at the tail. */
.btn-p{background:linear-gradient(100deg,#FFE895 0%,#FFC61A 42%,#FF9500 78%,#FF4D8D 100%);
  color:#160c00;box-shadow:0 10px 34px -10px rgba(255,140,0,.75)}
.btn-p:hover{box-shadow:0 16px 44px -10px rgba(255,27,107,.8);filter:saturate(1.12)}
.btn-g{border:1.5px solid var(--line-2);color:var(--txt);background:rgba(255,255,255,.03)}
.btn-g:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:11px 18px;font-size:14px}

.pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:3px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.04);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--txt-2);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);flex:none}

.glow-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.34}


/* ============================================================
   NAV
   ============================================================ */
.topbar{
  background:var(--flip);color:#170c00;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:12.5px;text-align:center;padding:8px 16px;
  position:relative;z-index:60;
}
nav{
  position:sticky;top:0;z-index:55;
  background:rgba(4,5,10,.78);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:26px;height:70px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .blogo{height:52px;width:auto;display:block;
  filter:drop-shadow(0 2px 10px rgba(255,27,107,.35))}
@media(max-width:520px){.brand .blogo{height:38px}}
.brand .bm{
  font-family:Anton,sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:-.01em;
  background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .bs{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:9px;
  letter-spacing:.34em;color:var(--txt-3);margin-top:-3px;
}
.brand .v3{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:10px;letter-spacing:.12em;
  border:1px solid rgba(0,224,255,.5);color:var(--cyan);padding:2px 6px;border-radius:5px;
  align-self:center;
}
.nav-links{display:flex;gap:24px;margin-left:auto}
.nav-links a{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:14px;color:var(--txt-2);transition:.18s;padding:6px 0;position:relative;
}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--flip);transition:right .25s}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}
@media(max-width:960px){.nav-links{display:none}}


/* ============================================================
   INTRO — animates the ACTUAL Pin Stadium logo, layer by layer
   Slices cut from the official lockup, flood-fill keyed and unmatted from
   white at 2.5x so the edges carry no background fringe:
     word   left 3.52%  top 30.16% w 92.97%
     lights left 32.73% top 43.12% w 34.53%
     flipL  left 9.14%  top 46.25% w 41.48%
     flipR  left 50.16% top 46.48% w 40.70%
     ball   left 42.19% top 51.41% w  9.69%
   The letter counters are keyed out and the ball is cut as an ellipse, so the
   sphere keeps its specular highlight instead of losing a bite to the flood fill.
   ============================================================ */
#intro{
  position:fixed;inset:0;z-index:9999;background:#000;
  display:grid;place-items:center;overflow:hidden;
}
#intro .vig{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 48%,rgba(139,43,226,.16),transparent 70%);
  opacity:0;
}
.go .vig{animation:vigIn 1.6s ease-out .55s forwards}
@keyframes vigIn{to{opacity:1}}

#intro.done{animation:introOut .8s cubic-bezier(.7,0,.2,1) forwards}
@keyframes introOut{
  0%{clip-path:inset(0 0 0 0);opacity:1}
  100%{clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden}
}
#intro .sweep{
  position:absolute;left:-32%;top:0;width:34%;height:100%;z-index:6;
  background:linear-gradient(90deg,transparent,rgba(255,198,26,.18),rgba(255,27,107,.34),rgba(255,255,255,.9),rgba(0,224,255,.34),transparent);
  filter:blur(2px);opacity:0;pointer-events:none;
}
#intro.done .sweep{animation:sweepGo .78s cubic-bezier(.6,0,.3,1) forwards}
@keyframes sweepGo{0%{opacity:1;left:-36%}100%{opacity:0;left:112%}}

/* stage is a square that matches the source lockup's coordinate space */
.lockup{
  /* sized so the 1192px wordmark slice lands above 1:1 even at dpr2 */
  position:relative;width:min(600px,80vw);aspect-ratio:1/1;
}
.lockup .ly{position:absolute;opacity:0;will-change:transform,opacity}
.lockup .ly img{width:100%;height:auto;display:block}

#lWord  {left:3.52%; top:30.16%; width:92.97%; z-index:4}
#lLights{left:32.73%;top:43.12%; width:34.53%; z-index:4}
#lFlipL {left:9.14%; top:46.25%; width:41.48%; z-index:3; transform-origin:10% 74%}
#lFlipR {left:50.16%;top:46.48%; width:40.70%; z-index:3; transform-origin:90% 74%}
#lBall  {left:42.19%;top:51.41%; width:9.69%; z-index:5}

/* --- flippers snap in from off-stage --- */
.go #lFlipL{animation:fL .78s cubic-bezier(.22,1.35,.36,1) .18s forwards}
.go #lFlipR{animation:fR .78s cubic-bezier(.22,1.35,.36,1) .18s forwards}
@keyframes fL{
  0%  {opacity:0;transform:translate(-58%,26%) rotate(-46deg)}
  62% {opacity:1;transform:translate(0,0) rotate(9deg)}
  82% {transform:rotate(-3deg)}
  100%{opacity:1;transform:rotate(0)}
}
@keyframes fR{
  0%  {opacity:0;transform:translate(58%,26%) rotate(46deg)}
  62% {opacity:1;transform:translate(0,0) rotate(-9deg)}
  82% {transform:rotate(3deg)}
  100%{opacity:1;transform:rotate(0)}
}

/* --- ball drops, bounces on the flippers, settles --- */
.go #lBall{animation:bDrop 1.25s cubic-bezier(.36,0,.66,1) .5s forwards}
@keyframes bDrop{
  /* The ball is chrome, so a slow fade-in on black just reads as a grey smudge
     falling - it has to be up to full opacity almost immediately and let the
     drop do the work. */
  0%  {opacity:0;transform:translateY(-340%) scale(.62)}
  7%  {opacity:1}
  34% {transform:translateY(0) scaleY(.76) scaleX(1.16)}   /* impact squash */
  42% {transform:translateY(-92%) scaleY(1.1) scaleX(.92)}
  58% {transform:translateY(0) scaleY(.86) scaleX(1.09)}
  70% {transform:translateY(-34%) scale(1)}
  84% {transform:translateY(0) scaleY(.94) scaleX(1.04)}
  92% {transform:translateY(-9%)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* impact flash at the moment the ball lands on the flippers */
#flash{
  position:absolute;left:50%;top:60%;width:46%;aspect-ratio:1/1;z-index:2;
  transform:translate(-50%,-50%) scale(.2);border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,198,26,.55) 34%,rgba(255,27,107,.28) 58%,transparent 72%);
}
.go #flash{animation:flashGo .6s ease-out .92s forwards}
@keyframes flashGo{0%{opacity:.95;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.1)}}

/* --- wordmark slams down --- */
.go #lWord{animation:wSlam .52s cubic-bezier(.16,1.18,.3,1) 1.02s forwards}
@keyframes wSlam{
  0%  {opacity:0;transform:translateY(-64%) scale(1.32);filter:blur(14px)}
  62% {opacity:1;filter:blur(0)}
  78% {transform:translateY(2%) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
/* --- LIGHTS rises + glows --- */
.go #lLights{animation:lRise .6s cubic-bezier(.2,.9,.3,1) 1.5s forwards}
@keyframes lRise{
  0%  {opacity:0;transform:translateY(58%) scale(.86)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* --- the whole lockup takes a light pass, then powers on --- */
.lockup::after{
  content:"";position:absolute;inset:-6% -10%;z-index:7;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 48%,rgba(255,235,180,.5) 52%,transparent 62%);
  mix-blend-mode:overlay;
}
.go .lockup::after{animation:shine .9s cubic-bezier(.5,0,.4,1) 1.85s forwards}
@keyframes shine{
  0%  {opacity:0;transform:translateX(-46%)}
  25% {opacity:1}
  100%{opacity:0;transform:translateX(46%)}
}
.go .lockup{animation:powerOn 1.1s ease-out 1.9s forwards}
@keyframes powerOn{
  0%  {filter:drop-shadow(0 0 0 rgba(255,27,107,0))}
  55% {filter:drop-shadow(0 0 42px rgba(255,27,107,.72)) drop-shadow(0 0 90px rgba(139,43,226,.5))}
  100%{filter:drop-shadow(0 0 26px rgba(255,27,107,.5)) drop-shadow(0 0 70px rgba(139,43,226,.36))}
}

/* light beams fired out of each flipper when they lock in */
.beamL,.beamR{
  position:absolute;top:58%;height:2px;z-index:1;opacity:0;pointer-events:none;
  filter:blur(1px);
}
.beamL{right:52%;width:0;background:linear-gradient(270deg,rgba(255,27,107,.95),transparent)}
.beamR{left:52%;width:0;background:linear-gradient(90deg,rgba(0,224,255,.95),transparent)}
.go .beamL{animation:beamL .8s cubic-bezier(.2,.9,.3,1) .78s forwards}
.go .beamR{animation:beamR .8s cubic-bezier(.2,.9,.3,1) .78s forwards}
@keyframes beamL{0%{opacity:0;width:0}40%{opacity:1;width:44%}100%{opacity:0;width:52%}}
@keyframes beamR{0%{opacity:0;width:0}40%{opacity:1;width:44%}100%{opacity:0;width:52%}}

#tagline{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);white-space:nowrap;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.44em;font-size:clamp(9px,1.5vw,13px);color:rgba(255,255,255,.62);
  opacity:0;padding-left:.44em;z-index:8;
}
.go #tagline{animation:tagIn .8s ease-out 2.15s forwards}
@keyframes tagIn{0%{opacity:0;letter-spacing:1.1em}100%{opacity:1;letter-spacing:.44em}}

#skip{
  position:absolute;right:22px;bottom:20px;z-index:9;
  font-family:"Barlow Condensed",sans-serif;letter-spacing:.2em;font-size:12px;
  text-transform:uppercase;color:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.16);
  padding:8px 15px;border-radius:100px;transition:.2s;
}
#skip:hover{color:#fff;border-color:rgba(255,255,255,.55)}

@media (prefers-reduced-motion:reduce){
  #intro *{animation:none!important}
  .lockup .ly{opacity:1!important;transform:none!important}
  #tagline{opacity:1!important}
}


/* ============================================================
   HERO — Stern pattern: full-bleed stage, model tabs, title bar
   ============================================================ */
.hero-stern{background:var(--ink)}

.hs-stage{
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#05060c;
}
.hs-wash{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 78% 34%, var(--acc1,rgba(255,27,107,.30)), transparent 66%),
    radial-gradient(760px 560px at 12% 8%,  var(--acc2,rgba(139,43,226,.30)), transparent 68%),
    linear-gradient(180deg,#0a0716 0%,#05060c 78%);
  transition:background .55s ease;
}
.hs-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:radial-gradient(130% 100% at 50% 40%,transparent 34%,rgba(3,4,9,.85) 100%);
}
.hs-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.04fr .96fr;gap:38px;align-items:center;
  padding:64px 22px 74px;
}
@media(max-width:1000px){.hs-inner{grid-template-columns:1fr;gap:20px;padding:44px 22px 62px}}
.award{margin:0 0 20px}
.award-plate{
  display:inline-flex;align-items:center;gap:12px;
  padding:11px 22px 11px 12px;border-radius:4px;
  background:linear-gradient(100deg,#FFE895 0%,#FFC61A 45%,#FF9500 82%,#FF4D8D 100%);
  color:#140A00;font-family:Anton,sans-serif;text-transform:uppercase;
  font-size:clamp(19px,2.7vw,31px);line-height:1;letter-spacing:.02em;
  box-shadow:0 10px 34px -10px rgba(255,150,0,.85),0 0 0 1px rgba(0,0,0,.35);
}
.award-no{
  background:#140A00;color:#FFC61A;padding:7px 11px;border-radius:3px;
  font-size:.82em;letter-spacing:.02em;
}
.award-sub{
  margin-top:9px;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.3em;font-size:11.5px;color:var(--gold-hi);
}
.hs-copy h1{font-size:clamp(46px,7.2vw,88px)}
.hs-copy h1 em{font-style:normal;display:block}
.hs-copy .sub{margin:22px 0 26px;font-size:18.5px;color:var(--txt-2);max-width:52ch}
.hs-copy .sub b{color:#fff;font-weight:700}
/* these were lost in an earlier hero rewrite: without them the pills laid out as
   inline-flex in a plain block, so they baseline-aligned (2px off) with no gap */
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin:28px 0 22px}
.hero-facts{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.hero-facts .pill{margin:0}

/* the hero image IS the demo: a live before/after reveal, centred in its column */
.stage{
  /* No right padding. Reserving a column for Orion pushed the reveal card off
     its own centre line, which read as the playfield being shifted left. He is
     absolutely positioned, so he costs no layout - the card centres properly
     and he overlaps its lower right corner instead of standing beside it. */
  position:relative;width:100%;max-width:600px;margin-left:auto;padding:0;
}
.pf{
  position:relative;margin:0 auto;width:100%;max-width:340px;
  aspect-ratio:1162/1868;border-radius:4px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);cursor:ew-resize;user-select:none;touch-action:none;
  /* --lit is driven from JS by the wipe position: the halo dies with the lights */
  box-shadow:0 0 92px -12px rgba(var(--accRGB,255,198,26), calc(var(--lit,1) * .62)),
             0 0 160px -42px rgba(0,224,255, calc(var(--lit,1) * .42)),
             var(--shadow);
}
.pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pf .pf-a{clip-path:inset(0 0 0 50%)}
.pf-tag{
  position:absolute;top:10px;z-index:4;padding:4px 9px;border-radius:3px;pointer-events:none;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.16em;font-size:10px;
  text-transform:uppercase;
}
.pf-tag.l{left:10px;background:rgba(0,0,0,.7);color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.22)}
.pf-tag.r{right:10px;background:var(--flip);color:#180d00}
.pf:hover .pf-div i{opacity:1}
.pf-div{
  position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:5;pointer-events:none;
  background:var(--flip);box-shadow:0 0 20px rgba(255,198,26,.9);
}
.pf-div i{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .2s;
  width:34px;height:34px;border-radius:50%;background:var(--flip);
  display:grid;place-items:center;color:#180d00;font-size:14px;font-style:normal;font-weight:800;
  box-shadow:0 6px 22px rgba(0,0,0,.6);
}
.stage .beam{
  position:absolute;left:50%;top:-5%;width:58%;height:56%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.3),rgba(255,198,26,.14) 40%,transparent 72%);
  filter:blur(6px);pointer-events:none;mix-blend-mode:screen;
  animation:beamPulse 4.6s ease-in-out infinite;
}
@keyframes beamPulse{0%,100%{opacity:.5}50%{opacity:1}}
.orion{
  /* Sits ON the card's lower right corner rather than beside it. Beside it only
     worked while .stage reserved a right-hand column, and that column was what
     knocked the playfield off centre. z-index 3 keeps him under the drag handle
     (5) and the corner tags (4), so he never gets in the way of the reveal, and
     he is pointer-events:none so the drag still starts anywhere on the card.
     NO mix-blend-mode: screen turns his black armour transparent, and the
     playfield photo bled straight through. */
  position:absolute;right:-6%;bottom:-13%;width:40%;z-index:3;
  /* the alpha is clean now, so drop-shadow traces the creature, not a rectangle */
  filter:drop-shadow(0 0 34px var(--acc1,rgba(255,27,107,.38))) saturate(1.06);
  animation:hover 6.5s ease-in-out infinite;pointer-events:none;
  transform:scaleX(-1);
}
@keyframes hover{
  0%,100%{transform:scaleX(-1) translateY(0) rotate(0)}
  50%{transform:scaleX(-1) translateY(-16px) rotate(1deg)}
}
@media(max-width:1000px){
  .stage{max-width:560px;margin:0 auto;padding:0}
  .pf{max-width:300px}
  .orion{right:-6%;bottom:-15%;width:41%}
}
@media(max-width:520px){
  .stage{padding:0}
  .pf{max-width:250px}
  .orion{right:-6%;bottom:-15%;width:43%}
}

/* carousel controls */
.hs-arw{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.26);
  background:rgba(0,0,0,.42);color:rgba(255,255,255,.8);
  font-size:26px;line-height:1;display:grid;place-items:center;transition:.18s;
}
.hs-arw:hover{background:rgba(0,0,0,.75);color:#fff;border-color:rgba(255,255,255,.6)}
.hs-arw.l{left:14px}.hs-arw.r{right:14px}
@media(max-width:760px){.hs-arw{display:none}}
.hs-dots{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:5;
  display:flex;gap:9px;
}
.hs-dots i{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:.2s;
}
.hs-dots i.on{width:26px;border-radius:5px;background:var(--flip)}

/* model tabs */
.hs-tabs{background:#08090f;border-bottom:1px solid rgba(255,255,255,.08)}
.hs-kicker{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 22px 0;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--txt-2);
}
.hs-kicker-b{
  background:#FFC61A;color:#140A00;padding:3px 9px;border-radius:2px;
  font-weight:700;letter-spacing:.1em;
}
.hs-tabs-in{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ms{
  padding:16px 10px;border:0;border-right:1px solid rgba(255,255,255,.08);
  background:transparent;color:var(--txt-3);transition:.18s;position:relative;
  font-family:Anton,sans-serif;text-transform:uppercase;letter-spacing:.09em;font-size:19px;line-height:1;
}
.ms:last-child{border-right:0}
.ms em{
  display:block;font-family:"Barlow Condensed",sans-serif;font-style:normal;font-weight:700;
  font-size:10.5px;letter-spacing:.2em;margin-top:5px;color:var(--txt-3);opacity:.75;
}
.ms:hover{color:#fff;background:rgba(255,255,255,.03)}
.ms::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent;transition:.2s}
.ms.on{color:#fff;background:rgba(255,255,255,.05)}
.ms.on::after{background:var(--flip)}
.ms.on[data-m="le"]::after{background:linear-gradient(90deg,#7FEEFF,#00E0FF,#8B2BE2)}
.ms.on[data-m="ce"]::after{background:linear-gradient(90deg,#FFE895,#FF1B6B,#8B2BE2)}
.ms.on em{color:var(--gold);opacity:1}
.ms.on[data-m="le"] em{color:var(--cyan)}
.ms.on[data-m="ce"] em{color:var(--magenta)}
@media(max-width:620px){.ms{font-size:15px;padding:12px 4px}.ms em{font-size:8.5px;letter-spacing:.12em}}

/* STERN TITLE BAR */
.hs-bar{
  background:linear-gradient(90deg,#12071c 0%,#1b0a24 40%,#2a0c2e 100%);
  border-bottom:1px solid rgba(255,255,255,.1);transition:background .55s ease;
}
.hs-bar[data-m="prem"]{background:linear-gradient(90deg,#1d1204 0%,#2a1a05 42%,#3a1f06 100%)}
.hs-bar[data-m="le"]  {background:linear-gradient(90deg,#04141d 0%,#07202e 42%,#17173a 100%)}
.hs-bar[data-m="ce"]  {background:linear-gradient(90deg,#1e0616 0%,#2c0820 42%,#340a33 100%)}
.hs-bar-in{display:flex;align-items:center;gap:26px;padding:18px 22px}
.hs-bar-l{flex:1;min-width:0}
.hs-title{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  font-family:Anton,sans-serif;text-transform:uppercase;font-size:clamp(20px,3vw,30px);
  letter-spacing:.05em;color:#fff;line-height:1;
}
.hs-brand{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.2em;color:var(--gold);
}
.hs-kind{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:.16em;color:rgba(255,255,255,.62);text-transform:uppercase;
}
.hs-rule{height:1px;background:rgba(255,255,255,.3);margin:10px 0 9px}
.hs-meta{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.hs-price{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:13px;color:rgba(255,255,255,.78);
}
.hs-price b{color:#fff;font-size:16px;letter-spacing:.06em}
.hs-alias{font-family:"JetBrains Mono",monospace;font-size:12px;color:rgba(255,255,255,.7)}
.btn-stern{
  /* same gold as the nav Buy Now, so the primary action reads the same everywhere */
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  padding:15px 32px;border:0;border-radius:3px;color:#160c00;
  background:linear-gradient(100deg,#FFE895 0%,#FFC61A 42%,#FF9500 78%,#FF4D8D 100%);
  box-shadow:0 10px 34px -10px rgba(255,140,0,.75);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:15px;white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .2s,filter .2s;
}
.btn-stern:hover{transform:translateY(-2px);box-shadow:0 16px 44px -10px rgba(255,27,107,.8);filter:saturate(1.12)}
@media(max-width:620px){.hs-bar-in{flex-direction:column;align-items:stretch;gap:14px}.btn-stern{width:100%}}

/* manufacturer row (Stern licensor-row pattern) */
.mfr-row{background:#04050a;border-bottom:1px solid var(--line);padding:26px 0 28px}
.mfr-lab{
  text-align:center;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.3em;font-size:10.5px;color:var(--txt-3);margin-bottom:16px;
}
.mfr-list{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 40px;
}
.mfr-list span{
  font-family:Anton,sans-serif;text-transform:uppercase;font-size:clamp(14px,1.9vw,21px);
  letter-spacing:.05em;color:rgba(255,255,255,.34);transition:.2s;
}
.mfr-list span:hover{color:rgba(255,255,255,.8)}

/* ticker */
.ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);overflow:hidden;padding:13px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tick-row{display:flex;gap:0;width:max-content;animation:tick 46s linear infinite}
.tick-row:hover{animation-play-state:paused}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tick-row span{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:13.5px;color:var(--txt-3);padding:0 26px;white-space:nowrap;
  display:flex;align-items:center;gap:26px;
}
.tick-row span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.55}

/* ============================================================
   AGITATE BAND
   ============================================================ */
.agitate{background:linear-gradient(180deg,var(--ink),var(--ink-1) 40%,var(--ink))}
.ag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:860px){.ag-grid{grid-template-columns:1fr}}
.ag-card{
  border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  position:relative;overflow:hidden;
}
.ag-card .n{
  font-family:Anton,sans-serif;font-size:52px;line-height:1;
  background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.5;
}
.ag-card h3{font-size:21px;margin:10px 0 9px}
.ag-card p{margin:0;color:var(--txt-2);font-size:15px}

/* ============================================================
   PROOF — the reveal, plus a searchable machine picker
   ============================================================ */
.proof-grid{
  display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:34px;
  align-items:start;margin-top:38px;
}
@media(max-width:980px){.proof-grid{grid-template-columns:1fr;gap:26px}}
.proof-l{position:sticky;top:92px}
@media(max-width:980px){.proof-l{position:static}}

.ba{
  /* A playfield is 1.6x taller than it is wide, so sizing this on width alone
     makes it enormous the moment it gets any room - at full desktop it ran 900px
     tall, and when the grid dropped to one column it stretched to the whole
     wrap. Cap the WIDTH against viewport HEIGHT instead: 40vh of width is about
     64vh of height, so the whole card is always on screen without scrolling,
     at any window size. The 996px source still lands above 2x on retina. */
  position:relative;width:100%;max-width:clamp(220px,40vh,420px);
  margin:0 auto;border-radius:5px;overflow:hidden;
  border:1px solid var(--line-2);cursor:ew-resize;user-select:none;touch-action:none;
  box-shadow:0 0 100px -30px rgba(255,27,107,.6),var(--shadow);aspect-ratio:996/1600;
}
@media(max-width:980px){
  /* stacked: the picker is below, so the card must leave room to see both */
  .ba{max-width:min(100%,clamp(200px,34vh,340px))}
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .aft{clip-path:inset(0 0 0 50%)}
.ba .hnd{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--flip);
  box-shadow:0 0 22px rgba(255,198,26,.9);pointer-events:none;
}
.ba .knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  /* scales with the card so it never swamps it on a phone */
  width:clamp(34px,11%,50px);aspect-ratio:1;height:auto;border-radius:50%;background:var(--flip);
  display:grid;place-items:center;color:#180d00;font-size:17px;font-weight:800;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}
.ba .tag{
  position:absolute;top:12px;padding:5px 12px;border-radius:3px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.13em;font-size:12px;
  text-transform:uppercase;pointer-events:none;
}
.ba .tag.l{left:12px;background:rgba(0,0,0,.72);color:#e9ecf5;border:1px solid rgba(255,255,255,.24)}
.ba .tag.r{right:12px;background:#FFC61A;color:#140A00}
.ba-cap{text-align:center;margin-top:16px;color:var(--txt-2);font-size:14px;line-height:1.7}
.ba-cap b{color:var(--txt)}
.ba-cap #baName{font-family:Anton,sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.ba-mfr{
  display:inline-block;margin-left:10px;padding:3px 9px;border-radius:3px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.05);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.12em;
  font-size:11px;text-transform:uppercase;color:var(--txt-2);vertical-align:3px;
}

/* picker */
.mg-bar{display:flex;gap:10px;flex-wrap:wrap}
.mg-search{
  flex:1 1 200px;display:flex;align-items:center;gap:9px;
  border:1px solid var(--line-2);border-radius:4px;background:rgba(255,255,255,.04);
  padding:0 12px;transition:border-color .18s;
}
.mg-search:focus-within{border-color:var(--gold)}
.mg-search svg{width:16px;height:16px;flex:none;stroke:var(--txt-3);fill:none;stroke-width:2;stroke-linecap:round}
.mg-search input{
  flex:1;min-width:0;background:none;border:0;outline:0;color:var(--txt);
  font-family:inherit;font-size:14.5px;padding:12px 0;
}
.mg-search input::placeholder{color:var(--txt-3)}
#mgMfr{
  flex:0 1 230px;border:1px solid var(--line-2);border-radius:4px;background:rgba(255,255,255,.04);
  color:var(--txt);padding:12px 12px;font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;outline:0;cursor:pointer;
}
#mgMfr:focus{border-color:var(--gold)}
#mgMfr option{background:#0d1020;color:var(--txt)}
.mg-count{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:11.5px;color:var(--txt-3);margin:14px 0 12px;
}
.mg-count b{color:var(--gold)}
.mg-grid{
  /* bigger tiles, fewer columns: 46 slivers five-across read as noise */
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px 14px;
  max-height:780px;overflow-y:auto;padding-right:8px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
}
.mg-grid::-webkit-scrollbar{width:8px}
.mg-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
@media(max-width:980px){.mg-grid{max-height:420px}}
.mg-item{
  position:relative;border:0;background:none;padding:0;cursor:pointer;display:block;
  transition:transform .16s;
}
.mg-item .shot{
  position:relative;display:block;border:1px solid var(--line);border-radius:4px;
  overflow:hidden;background:#0a0c14;aspect-ratio:996/1600;transition:border-color .16s,box-shadow .16s;
}
.mg-item img{width:100%;height:100%;object-fit:cover;display:block;opacity:.78;transition:opacity .16s}
.mg-item:hover{transform:translateY(-3px)}
.mg-item:hover .shot{border-color:rgba(255,255,255,.45)}
.mg-item:hover img{opacity:1}
.mg-item.on .shot{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 8px 26px -8px rgba(255,198,26,.55)}
.mg-item.on img{opacity:1}
.mg-item .nm{
  display:block;margin-top:7px;padding:0 2px;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:11.5px;color:var(--txt-2);line-height:1.25;text-align:center;
  transition:color .16s;
}
.mg-item:hover .nm,.mg-item.on .nm{color:#fff}
.mg-empty{color:var(--txt-3);font-size:14px;text-align:center;padding:26px 0}

/* ============================================================
   TIER CARDS
   ============================================================ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;align-items:start}
@media(max-width:820px){.tiers{grid-template-columns:1fr;max-width:480px;margin-inline:auto}}
@media(max-width:620px){.tiers{grid-template-columns:1fr}}

.tier{
  position:relative;border-radius:5px;padding:1px;background:var(--line);
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.tier:hover{transform:translateY(-6px)}
.tier-in{
  background:linear-gradient(175deg,#0f1222,#08090f 62%);
  border-radius:4px;padding:24px 22px 26px;height:100%;
  display:flex;flex-direction:column;
}
.tier.pro{background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06))}
.tier.prem{background:var(--flip);box-shadow:0 0 70px -20px rgba(255,140,0,.7)}
.tier.prem .tier-in{background:linear-gradient(175deg,#1a1206,#0b0a10 60%)}
.tier.le{background:linear-gradient(160deg,#00E0FF,#8B2BE2)}
.tier.le .tier-in{background:linear-gradient(175deg,#0a1522,#08090f 62%)}
.tier.ce{background:linear-gradient(160deg,#FFE895,#FF1B6B 55%,#8B2BE2)}
.tier.ce .tier-in{background:linear-gradient(175deg,#180b18,#08090f 62%)}

.tier-flag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);z-index:3;
  background:#FFC61A;color:#140A00;padding:5px 15px;border-radius:3px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.09em;font-size:12.5px;
  text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.tier.le .tier-flag{background:#6FE8FF;color:#04141d}
.tier.ce .tier-flag{background:#FF3D82;color:#16000A}

/* TIER NAME = the headline.  Legacy product name = quiet subtitle. */
.t-tier{
  font-family:Anton,sans-serif;font-size:46px;line-height:.9;text-transform:uppercase;
  letter-spacing:.02em;color:#fff;margin:2px 0 0;
}
.tier.prem .t-tier{background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent}
.tier.le   .t-tier{background:linear-gradient(100deg,#8FF3FF,#00E0FF 45%,#8B2BE2);-webkit-background-clip:text;background-clip:text;color:transparent}
.tier.ce   .t-tier{background:linear-gradient(100deg,#FFE895,#FF1B6B 60%,#8B2BE2);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-tier small{
  display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.3em;color:var(--txt-3);margin-bottom:5px;-webkit-text-fill-color:var(--txt-3);
}
.t-alias{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;font-size:13.5px;color:var(--txt-2);margin-top:9px;
  padding-top:9px;border-top:1px solid var(--line);
}
.t-alias b{color:var(--txt);font-weight:700}


.t-price{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.t-price .amt{font-family:Anton,sans-serif;font-size:38px;line-height:1}
.tier.prem .t-price .amt{background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-price .was{font-size:14px;color:var(--txt-3);text-decoration:line-through}
.t-sub{font-size:12.5px;color:var(--txt-3);margin-top:5px;min-height:34px}
.t-sub .up{color:var(--lime)}

.t-list{list-style:none;margin:18px 0 0;padding:0;flex:1;display:flex;flex-direction:column;gap:9px}
.t-list li{display:flex;gap:9px;font-size:13.5px;color:var(--txt-2);line-height:1.45}
.t-list li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:4px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC61A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}
.t-list li.hero-feat{color:#fff;font-weight:600}
.t-list li.hero-feat::before{background-color:rgba(255,198,26,.16);border-color:rgba(255,198,26,.5)}
.t-cta{margin-top:20px;width:100%}
.t-eta{
  margin-top:11px;font-family:"Barlow Condensed",sans-serif;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;font-size:11.5px;color:var(--txt-3);text-align:center;
}
.t-eta.build{color:var(--cyan)}

/* ============================================================
   DECODER STRIP
   ============================================================ */
.decoder{
  border:1px dashed rgba(255,255,255,.2);border-radius:var(--r);
  background:rgba(255,255,255,.025);padding:20px 22px;margin-top:34px;
}
.decoder summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:13.5px;color:var(--txt-2);
}
.decoder summary::-webkit-details-marker{display:none}
.decoder summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--gold);line-height:1}
.decoder[open] summary::after{content:"–"}
.dec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
@media(max-width:860px){.dec-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.dec-grid{grid-template-columns:1fr}}
.dec-item{
  border:1px solid var(--line);border-radius:9px;padding:13px 14px;background:rgba(0,0,0,.28);
}
.dec-item .old{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--txt-2)}
.dec-item .arw{color:var(--gold);margin:5px 0;font-size:13px}
.dec-item .new{font-family:Anton,sans-serif;font-size:17px;text-transform:uppercase;letter-spacing:.04em}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.chip{
  padding:9px 16px;border-radius:3px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);color:var(--txt-2);transition:.18s;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;font-size:13.5px;
}
.chip:hover{color:#fff;border-color:rgba(255,255,255,.42)}
.chip.on{background:#FFC61A;color:#140A00;border-color:transparent;font-weight:700}

/* ============================================================
   MODEL CHOOSER — Stern's "Choose a Model" card pattern
   ============================================================ */
.chooser{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
@media(max-width:820px){.chooser{grid-template-columns:1fr}}
@media(max-width:480px){.chooser{grid-template-columns:1fr}}
.ch-card{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:26px 20px 22px;border:1px solid var(--line-2);border-radius:4px;
  background:linear-gradient(175deg,#0d1020,#08090f 70%);
  text-align:center;transition:transform .18s,border-color .18s,background .18s;
}
.ch-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.42)}
.ch-card::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:transparent;transition:.2s;z-index:1}
.ch-card.on{border-color:rgba(255,255,255,.5);background:linear-gradient(175deg,#181322,#0a0a12 70%)}
.ch-card.on::after{background:var(--flip)}
.ch-card.on[data-m="le"]::after{background:linear-gradient(90deg,#7FEEFF,#00E0FF,#8B2BE2)}
.ch-card.on[data-m="ce"]::after{background:linear-gradient(90deg,#FFE895,#FF1B6B,#8B2BE2)}
.ch-flag{
  /* z-index matters: the card's 3px accent bar sits at top:-1px and was painting
     straight through the middle of this label, which is why it went unreadable */
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:4;
  /* solid, not a gradient: a gradient swung this label from 15:1 to 5:1 mid-word */
  background:#FFC61A;color:#140A00;padding:6px 15px;border-radius:3px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.08em;font-size:13.5px;
  line-height:1;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.35);
}
.ch-flag.ce{background:#FF3D82;color:#16000A}
.ch-tier{
  font-family:Anton,sans-serif;text-transform:uppercase;font-size:30px;line-height:1;
  letter-spacing:.03em;color:var(--txt-2);transition:.2s;
}
.ch-card.on .ch-tier{background:var(--flip);-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-card.on[data-m="le"] .ch-tier{background:linear-gradient(100deg,#8FF3FF,#00E0FF 45%,#8B2BE2);-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-card.on[data-m="ce"] .ch-tier{background:linear-gradient(100deg,#FFE895,#FF1B6B 60%,#8B2BE2);-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-alias{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;font-size:12.5px;color:var(--txt-2);margin-top:7px;
}
/* ============================================================
   THE LIGHT BARS ACTUALLY BEHAVE LIKE THE PRODUCT
     Pro     — semi-bright emitters with visible gaps between them
     Premium — brighter, smoothly diffused, no gaps
     LE      — the same, plus colour moving in patterns
     CE      — all of it, plus multicolour flash bursts
   ============================================================ */
.bar-viz{display:block;position:relative;height:auto;margin:0}
.ch-card,.tier{cursor:pointer}
.ch-bar{
  display:block;justify-self:stretch;align-self:stretch;
  position:relative;height:8px;border-radius:4px;margin:18px 4px;
  opacity:.62;transition:opacity .25s;overflow:hidden;
  background:#0b0d16;
}
.ch-card.on .ch-bar{opacity:1}

/* PRO — discrete LEDs, gaps you can count, only semi-bright */
.bar-pro{
  background:
    repeating-linear-gradient(90deg,
      #FFF3D0 0 5px, #FFD98A 5px 8px,
      rgba(255,220,150,.10) 8px 17px);
  box-shadow:0 0 9px rgba(255,214,140,.45);
}
.ch-bar.lit.bar-pro,.ch-card:hover .bar-pro,.tier:hover .bar-pro{animation:proPulse 2.6s ease-in-out infinite}
@keyframes proPulse{0%,100%{filter:brightness(.85)}50%{filter:brightness(1.12)}}

/* PREMIUM — one continuous wash, no dot shadow, noticeably brighter */
.bar-prem{
  background:linear-gradient(90deg,#FFF6DC,#FFFFFF 18%,#FFFFFF 82%,#FFF6DC);
  box-shadow:0 0 18px 2px rgba(255,255,255,.75),0 0 34px rgba(255,214,140,.4);
}
.ch-bar.lit.bar-prem,.ch-card:hover .bar-prem,.tier:hover .bar-prem{animation:premBreathe 3.4s ease-in-out infinite}
@keyframes premBreathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.16)}}

/* LE — the Premium wash with colour travelling along it */
.bar-le{
  background:linear-gradient(90deg,#00E0FF,#FFFFFF 22%,#FF1B6B 46%,#FFFFFF 68%,#8B2BE2 88%,#00E0FF);
  background-size:220% 100%;
  box-shadow:0 0 18px 2px rgba(120,220,255,.7),0 0 34px rgba(255,27,107,.32);
}
.ch-bar.lit.bar-le,.ch-card:hover .bar-le,.tier:hover .bar-le{animation:leWave 4.2s linear infinite}
@keyframes leWave{0%{background-position:0% 50%}100%{background-position:220% 50%}}

/* CE — faster pattern, and it throws flash bursts on top */
.bar-ce{
  background:linear-gradient(90deg,#FFE895,#FFFFFF 16%,#FF1B6B 38%,#8B2BE2 58%,#00E0FF 78%,#FFFFFF);
  background-size:240% 100%;
  box-shadow:0 0 20px 2px rgba(255,120,200,.8),0 0 40px rgba(139,43,226,.45);
}
.ch-bar.lit.bar-ce,.ch-card:hover .bar-ce,.tier:hover .bar-ce{animation:ceWave 2.6s linear infinite}
@keyframes ceWave{0%{background-position:0% 50%}100%{background-position:240% 50%}}
.bar-ce::after{
  content:"";position:absolute;inset:0;border-radius:4px;opacity:0;
  background:linear-gradient(90deg,#fff,#FFE895 30%,#fff 55%,#7FEEFF 80%,#fff);
}
.ch-bar.lit.bar-ce::after,.ch-card:hover .bar-ce::after,.tier:hover .bar-ce::after{animation:ceFlash 2.6s steps(1,end) infinite}
@keyframes ceFlash{
  0%,64%{opacity:0}   66%{opacity:.95} 68%{opacity:0}
  72%{opacity:.8}     74%{opacity:0}
  80%{opacity:1}      82%{opacity:0}   100%{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .ch-bar,.ch-bar::after{animation:none!important}
}
.ch-price{
  font-family:Anton,sans-serif;font-size:22px;color:var(--txt);letter-spacing:.02em;
}

/* the one model you picked */
.ch-detail{
  margin-top:16px;border:1px solid var(--line-2);border-radius:4px;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  padding:26px 28px;
}
.chd-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.chd-tier{font-family:Anton,sans-serif;text-transform:uppercase;font-size:30px;line-height:1;letter-spacing:.03em}
.chd-alias{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--txt-2);margin-top:7px}
.chd-right{text-align:right}
.chd-price{font-family:Anton,sans-serif;font-size:30px;line-height:1}
.chd-eta{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--txt-3);margin-top:7px;
}
.chd-eta.build{color:var(--magenta)}
.chd-lab{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:11px;color:var(--gold);margin:18px 0 14px;
}
.chd-list{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;
}
@media(max-width:700px){.chd-list{grid-template-columns:1fr}.chd-right{text-align:left}}
.chd-list li{display:flex;gap:9px;font-size:14.5px;color:var(--txt);line-height:1.45}
.chd-list li::before{
  content:"";flex:none;width:15px;height:15px;margin-top:3px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC61A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:15px;background-repeat:no-repeat;
}
.chd-cta{margin-top:22px}

/* expand to the full grid */
.cmp-toggle{
  width:100%;margin-top:16px;padding:15px 20px;
  border:1px solid var(--line-2);border-radius:4px;background:rgba(255,255,255,.03);
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:13.5px;color:var(--txt-2);transition:.18s;
}
.cmp-toggle:hover{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
.cmp-toggle i{font-style:normal;font-size:19px;line-height:1;color:var(--gold);transition:transform .22s}
.cmp-toggle.open i{transform:rotate(45deg)}
.cmp-body[hidden]{display:none}
.cmp-body{animation:cmpIn .35s cubic-bezier(.2,.8,.3,1)}
@keyframes cmpIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* what every model shares — stated once, instead of 11 rows of tick marks */
.std{
  margin-top:20px;border:1px solid var(--line);border-radius:5px;
  background:linear-gradient(160deg,rgba(182,255,58,.05),rgba(255,255,255,.012));
  padding:20px 24px;
}
.std-lab{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.26em;font-size:11px;color:var(--lime);margin-bottom:14px;
}
.std-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px 26px;
}
.std-list li{
  display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--txt-2);line-height:1.4;
}
.std-list li::before{
  content:"";flex:none;width:13px;height:13px;margin-top:3px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6FF3A' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;
}
.cmp-scroll{overflow-x:auto;margin-top:20px;border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.018)}
.cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)}
.cmp thead th{position:sticky;top:0;background:#0a0c16;z-index:4;padding:18px 16px 16px;border-bottom:1px solid var(--line-2)}
.cmp th:first-child,.cmp td:first-child{
  text-align:left;position:sticky;left:0;background:#0a0c16;z-index:3;min-width:250px;
  border-right:1px solid var(--line);
}
.cmp thead th:first-child{z-index:5}
.cmp .col-h .nn{font-family:Anton,sans-serif;font-size:26px;text-transform:uppercase;line-height:1;letter-spacing:.03em}
.cmp .col-h .tt{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-3);margin:5px 0 5px;
}
.cmp .col-h .pp{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:16px;color:var(--txt-2)}
.cmp th.hot{background:linear-gradient(180deg,rgba(255,198,26,.16),rgba(10,12,22,1) 88%)}
.cmp th.hot .tt{color:var(--gold)}
.cmp th.hot .pp{color:var(--gold-hi)}
.cmp td.hot{background:rgba(255,198,26,.045)}
.cmp tbody tr:hover td{background:rgba(255,255,255,.03)}
.cmp tbody tr:hover td.hot{background:rgba(255,198,26,.08)}
.cmp .grp td{
  background:#080a12!important;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;font-size:11.5px;color:var(--gold);
  padding:11px 16px;text-align:left;
}
.cmp .feat{color:var(--txt);font-weight:500}
.cmp .feat small{display:block;color:var(--txt-3);font-weight:400;font-size:12px;margin-top:2px;line-height:1.35}
.yes{color:var(--lime);font-size:17px;font-weight:700}
.no{color:#3b4260;font-size:17px}
.val{font-family:"Barlow Condensed",sans-serif;font-weight:600;letter-spacing:.05em;font-size:14px;text-transform:uppercase}
.val.gold{color:var(--gold)}
.val.cyan{color:var(--cyan)}
.val.mag{color:var(--magenta)}
.cmp tfoot td{border-bottom:0;padding:20px 16px}
.cmp tfoot .price{font-family:Anton,sans-serif;font-size:26px}
.cmp-hint{display:none;text-align:center;color:var(--txt-3);font-size:12.5px;margin-top:10px}
@media(max-width:940px){.cmp-hint{display:block}}

/* ============================================================
   PICKER
   ============================================================ */
.picker{
  border:1px solid var(--line-2);border-radius:5px;overflow:hidden;margin-top:36px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
}
.pk-q{padding:30px 28px;border-bottom:1px solid var(--line)}
.pk-q:last-of-type{border-bottom:0}
.pk-q h4{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:16px;margin:0 0 14px;color:var(--txt);
}
.pk-q h4 span{color:var(--gold);margin-right:9px}
.pk-opts{display:flex;flex-wrap:wrap;gap:9px}
.pk-out{padding:28px;background:rgba(255,198,26,.06);border-top:1px solid rgba(255,198,26,.28);display:none}
.pk-out.show{display:block}
.pk-out .rl{
  font-family:"Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;
  font-size:12px;color:var(--gold);font-weight:700;
}
.pk-out .rn{font-family:Anton,sans-serif;font-size:34px;text-transform:uppercase;margin:6px 0 8px}
.pk-out p{margin:0 0 16px;color:var(--txt-2);max-width:60ch}

/* ============================================================
   TECH GRID
   ============================================================ */
.tech{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media(max-width:960px){.tech{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tech{grid-template-columns:1fr}}
.tc{
  border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  position:relative;overflow:hidden;transition:border-color .2s,transform .2s;
}
.tc:hover{border-color:var(--line-2);transform:translateY(-3px)}
.tc .ic{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
  background:rgba(255,198,26,.12);border:1px solid rgba(255,198,26,.32);
}
.tc .ic svg{width:21px;height:21px;stroke:var(--gold);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tc h3{font-size:18px;margin-bottom:8px}
.tc p{margin:0;color:var(--txt-2);font-size:14px}
.tc .tm{
  position:absolute;top:16px;right:18px;font-family:"JetBrains Mono",monospace;
  font-size:9.5px;color:var(--txt-3);letter-spacing:.06em;
}

/* ============================================================
   OBJECTIONS
   ============================================================ */
.obj-list{max-width:880px;margin:36px auto 0;display:flex;flex-direction:column;gap:11px}
.obj{
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  transition:border-color .2s;
}
.obj[open]{border-color:rgba(255,198,26,.42)}
.obj summary{
  list-style:none;cursor:pointer;padding:19px 22px;display:flex;gap:14px;align-items:flex-start;
  font-size:16.5px;font-weight:600;color:var(--txt);
}
.obj summary::-webkit-details-marker{display:none}
.obj summary .q{
  flex:none;font-family:Anton,sans-serif;font-size:13px;color:var(--magenta);
  border:1px solid rgba(255,27,107,.4);border-radius:6px;padding:2px 7px;margin-top:2px;
}
.obj summary::after{
  content:"";margin-left:auto;flex:none;width:11px;height:11px;margin-top:7px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .22s;
}
.obj[open] summary::after{transform:rotate(-135deg)}
.obj .a{padding:0 22px 22px 57px;color:var(--txt-2);font-size:15px}
.obj .a b{color:#fff}
.obj .a .kicker{
  display:block;margin-top:13px;padding-top:13px;border-top:1px solid var(--line);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:15px;color:var(--gold);
}
@media(max-width:600px){.obj .a{padding-left:22px}}

/* ============================================================
   CE BENCH BUILD
   ============================================================ */
.bench{
  border:1px solid rgba(255,27,107,.35);border-radius:5px;overflow:hidden;margin-top:12px;
  background:radial-gradient(1000px 460px at 78% 0%,rgba(139,43,226,.32),transparent 62%),
             linear-gradient(170deg,#150a18,#07070d);
}
.bench-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0}
@media(max-width:900px){.bench-grid{grid-template-columns:1fr}}
.bench-l{padding:44px 40px}
@media(max-width:600px){.bench-l{padding:32px 24px}}
.bench-r{
  border-left:1px solid rgba(255,255,255,.09);padding:44px 36px;
  background:rgba(0,0,0,.3);display:flex;flex-direction:column;justify-content:center;
}
@media(max-width:900px){.bench-r{border-left:0;border-top:1px solid rgba(255,255,255,.09);padding:32px 24px}}
.steps{list-style:none;margin:26px 0 0;padding:0;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;padding:0 0 24px 42px;
  border-left:1px solid rgba(255,255,255,.14);margin-left:12px;
}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{
  content:counter(s);position:absolute;left:-13px;top:-2px;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(140deg,#FF1B6B,#8B2BE2);color:#fff;display:grid;place-items:center;
  font-family:Anton,sans-serif;font-size:12px;
}
.steps h4{font-family:Anton,sans-serif;font-size:17px;text-transform:uppercase;margin:0 0 4px}
.steps p{margin:0;color:var(--txt-2);font-size:14px}
.gauge{margin-top:6px}
.gauge .lab{display:flex;justify-content:space-between;font-family:"Barlow Condensed",sans-serif;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11.5px;color:var(--txt-3);margin-bottom:8px}
.gauge .trk{height:9px;border-radius:6px;background:rgba(255,255,255,.09);overflow:hidden}
.gauge .fil{height:100%;border-radius:6px;background:linear-gradient(90deg,#FF1B6B,#FFC61A);width:22%;
  box-shadow:0 0 18px rgba(255,27,107,.8)}

/* ============================================================
   TESTIMONIALS / GUARANTEE / FAQ / CTA / FOOTER
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.qc{
  border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
}
.qc .stars{color:var(--gold);letter-spacing:3px;font-size:14px;margin-bottom:12px}
.qc p{margin:0 0 16px;font-size:15.5px;color:var(--txt);line-height:1.55}
.qc .who{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:13px;color:var(--gold)}
.qc .who small{display:block;color:var(--txt-3);letter-spacing:.06em;font-weight:600;font-size:11.5px;margin-top:2px}

.guar{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  border:1px solid rgba(182,255,58,.3);border-radius:5px;padding:32px 34px;
  background:linear-gradient(150deg,rgba(182,255,58,.07),rgba(255,255,255,.012));margin-top:12px;
}
@media(max-width:700px){.guar{grid-template-columns:1fr;text-align:center;padding:26px 22px}}
.seal{
  width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;
  border:2px dashed rgba(182,255,58,.55);color:var(--lime);font-family:Anton,sans-serif;
  font-size:12px;line-height:1.15;letter-spacing:.05em;text-transform:uppercase;margin:0 auto;
}
.seal b{display:block;font-size:30px;line-height:1}
.guar h3{font-size:24px;margin-bottom:9px}
.guar p{margin:0;color:var(--txt-2);font-size:15px}

.faq{max-width:820px;margin:34px auto 0;display:flex;flex-direction:column;gap:9px}
.faq details{border-bottom:1px solid var(--line);padding-bottom:9px}
.faq summary{list-style:none;cursor:pointer;padding:14px 0;font-weight:600;font-size:16px;display:flex;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--gold);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{color:var(--txt-2);font-size:15px;padding:0 0 12px}

.finale{
  text-align:center;padding:104px 0;position:relative;overflow:hidden;
  border-top:1px solid var(--line);
}
.finale .orb.a{width:820px;height:820px;left:50%;margin-left:-410px;top:-46%;background:#FF1B6B;opacity:.24}
.finale .orb.b{width:560px;height:560px;right:4%;bottom:-40%;background:#8B2BE2;opacity:.3}
.finale h2{font-size:clamp(40px,7vw,80px);position:relative;z-index:2}
.finale .sub{max-width:56ch;margin:20px auto 0;color:var(--txt-2);font-size:18px;position:relative;z-index:2}

footer{border-top:1px solid var(--line);padding:52px 0 34px;background:#020307}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
footer h5{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:12px;color:var(--txt-3);margin:0 0 14px;
}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
footer a{color:var(--txt-2);font-size:14px;transition:.15s}
footer a:hover{color:var(--gold)}
.foot-bot{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--txt-3);font-size:12.5px;
}

/* Content is visible by default and only hidden once JS has proved it is
   running, by putting .js-reveal on <html>. Gating visibility on script the
   other way round is how a single ReferenceError turned fifteen blocks into
   black holes down the page - the markup was there, at opacity 0, forever. */
.js-reveal .reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}


/* ============================================================
   THE LUMI-MOTION ADD-ON  +  the rest of the catalogue
   ============================================================ */
.lumi-opt{
  display:flex;gap:13px;align-items:flex-start;cursor:pointer;
  margin:18px 0 4px;padding:15px 17px;border-radius:4px;
  border:1px solid rgba(0,224,255,.32);background:rgba(0,224,255,.06);
  transition:border-color .18s,background .18s;
}
.lumi-opt:hover{border-color:rgba(0,224,255,.6);background:rgba(0,224,255,.1)}
.lumi-opt[hidden]{display:none}
.lumi-opt input{position:absolute;opacity:0;width:0;height:0}
.lumi-box{
  flex:none;width:20px;height:20px;margin-top:1px;border-radius:3px;
  border:1.5px solid rgba(0,224,255,.65);background:rgba(0,0,0,.35);
  display:grid;place-items:center;transition:.18s;
}
.lumi-box::after{
  content:"";width:11px;height:11px;transform:scale(0);transition:transform .16s;
  background:#04121a;clip-path:polygon(14% 46%,0 60%,40% 100%,100% 22%,86% 8%,38% 70%);
}
.lumi-opt input:checked + .lumi-box{background:#00E0FF;border-color:#00E0FF}
.lumi-opt input:checked + .lumi-box::after{transform:scale(1)}
.lumi-opt input:focus-visible + .lumi-box{outline:2px solid var(--gold);outline-offset:2px}
.lumi-txt{font-size:14.5px;color:var(--txt)}
.lumi-txt b{color:var(--cyan)}
.lumi-txt small{display:block;color:var(--txt-2);font-size:12.5px;margin-top:3px;line-height:1.45}
.chd-list li.add-on{color:var(--cyan)}
.chd-list li.add-on::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E0FF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.t-list li.opt{color:var(--cyan)}
.t-list li.opt::before{
  background-color:rgba(0,224,255,.14);border-color:rgba(0,224,255,.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E0FF' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* Lumi-Motion makes the bar move — same effect the product has */
.ch-bar.lumi{
  background:linear-gradient(90deg,#00E0FF,#FFFFFF 22%,#FF1B6B 46%,#FFFFFF 68%,#8B2BE2 88%,#00E0FF)!important;
  background-size:220% 100%!important;
  box-shadow:0 0 18px 2px rgba(120,220,255,.75),0 0 34px rgba(255,27,107,.34)!important;
  animation:leWave 4.2s linear infinite!important;
}

.extras{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media(max-width:820px){.extras{grid-template-columns:1fr}}
.ex-col{
  border:1px solid var(--line);border-radius:5px;padding:22px 24px;
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}
.ex-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ex-head h3{font-size:20px}
.ex-all{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--gold);white-space:nowrap;
}
.ex-all:hover{color:var(--gold-hi)}
.ex-note{color:var(--txt-3);font-size:13px;margin:9px 0 15px;max-width:52ch}
.ex-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ex-list li{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  padding-bottom:9px;border-bottom:1px solid var(--line);font-size:14px;
}
.ex-list li:last-child{border-bottom:0;padding-bottom:0}
.ex-list b{color:var(--txt);font-weight:600}
.ex-list span{color:var(--txt-3);font-size:12.5px}