/* SETHignite - shared stylesheet
   Versioned filename on purpose: /assets/* is served immutable for a year,
   so a change here means bumping to site-v2.css and moving every <link>.
   See NOTES.md. */

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  --void:#06080B;
  --bg:#0A0E13;
  --panel:#0F151C;
  --panel-2:#141C25;
  --line:#1E2A36;
  --line-2:#2C3D4D;
  --text:#E9F0F7;
  --muted:#93A6B8;
  --dim:#6E8296;   /* was #5E7286, which measured 3.69:1 on --panel */

  --ignite:#FF6A1A;
  --ignite-2:#FFB03A;
  --cyan:#3BE0FF;
  --violet:#9B6BFF;
  --ok:#3DD68C;

  /* Accent-as-TEXT. Separate from the fill accents above because #FF6A1A on a
     light background is about 2.9:1 - fine behind a button, illegible as a
     word. Overridden in the light block. */
  --accent-ink:#FFB03A;
  --hot-a:#FF6A1A;
  --hot-b:#FFB03A;
  --cool-a:#3BE0FF;
  --cool-b:#9B6BFF;

  --glow-ignite:0 0 0 1px rgba(255,106,26,.30), 0 8px 40px -8px rgba(255,106,26,.45);
  --glow-cyan:0 0 0 1px rgba(59,224,255,.25), 0 8px 40px -10px rgba(59,224,255,.35);

  --r:14px;
  --r-sm:9px;
  --r-lg:20px;
  /* The page runs the full width of the browser. Line length is kept sane
     by the components that carry prose (.lede, .ticks, .doc), not by a
     wrapper cap. */
  --maxw:100%;
  --pad:clamp(18px, 3.2vw, 64px);

  --f-disp:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-body:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  /* The page's own edges. Body is width:auto, so these come out of the
     content box rather than adding 2px of horizontal scroll. */
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
/* .app sets display:flex, which would otherwise beat the [hidden] default and
   leave filtered-out cards on screen. */
[hidden]{display:none !important}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-disp);line-height:1.12;letter-spacing:-.02em;margin:0;font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* the ambient field behind everything */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(255,106,26,.13), transparent 60%),
    radial-gradient(760px 480px at 92% 4%, rgba(59,224,255,.10), transparent 62%),
    radial-gradient(1000px 700px at 50% 108%, rgba(155,107,255,.08), transparent 65%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1200px 800px at 50% 0%, #000 20%, transparent 78%);
  mask-image:radial-gradient(1200px 800px at 50% 0%, #000 20%, transparent 78%);
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(56px, 9vw, 104px);position:relative}
.sec.tight{padding-block:clamp(40px, 6vw, 68px)}
.sec + .sec{border-top:1px solid var(--line)}
.center{text-align:center}
.lede{color:var(--muted);font-size:clamp(1rem,1.6vw,1.14rem);max-width:62ch}
.center .lede{margin-inline:auto}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.split{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.wide-left{grid-template-columns:1.15fr .85fr}
}

/* ---------- type helpers ---------- */
.kicker{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.20em;text-transform:uppercase;
  color:var(--accent-ink);display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;
}
.kicker::before{content:'';width:24px;height:1px;background:linear-gradient(90deg,transparent,var(--ignite))}
.kicker.cy{color:var(--cyan)}
.kicker.cy::before{background:linear-gradient(90deg,transparent,var(--cyan))}

h1{font-size:clamp(2.3rem, 6.2vw, 4.1rem)}
h2{font-size:clamp(1.75rem, 3.6vw, 2.6rem)}
h3{font-size:clamp(1.08rem, 1.6vw, 1.28rem)}
.sec h2 + .lede{margin-top:16px}
.mono{font-family:var(--f-mono)}
.hot{
  background:linear-gradient(100deg,var(--hot-a),var(--hot-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cool{
  background:linear-gradient(100deg,var(--cool-a),var(--cool-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.center .btns{justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:var(--r-sm);
  font-family:var(--f-disp);font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn.pri{
  background:linear-gradient(100deg,var(--ignite),#FF8A2B);
  color:#150802;box-shadow:var(--glow-ignite);
}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,106,26,.5), 0 14px 46px -8px rgba(255,106,26,.6)}
.btn.ghost{background:rgba(255,255,255,.02);border-color:var(--line-2);color:var(--text)}
.btn.ghost:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.btn .ar{transition:transform .18s ease}
.btn:hover .ar{transform:translateX(3px)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(10,14,19,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr .wrap{display:flex;align-items:center;gap:18px;height:66px}
/* The brand is now one image: the supplied lockup, cubes and wordmark and
   tagline together. It sits on a DARK PLATE IN BOTH THEMES because the
   artwork is glow-on-black - the wordmark is white and the glow is additive,
   so on the light page "SETH" disappears and the flames turn to haze. A dark
   chip is how a dark-only logo belongs in a light context; the alternative
   was recolouring someone else's artwork. */
/* inline-flex, not flex: in the footer the brand sits in a block column,
   and a block-level flex container would stretch the plate across it. */
.brand{
  display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto;
  background:#06080B;
}
/* In the header the plate fills the row top to bottom - no padding, no
   radius, no border - so the logo uses the full height of the bar. */
.hdr .brand{align-self:stretch;padding:0;border-radius:0;border:none}
.hdr .brand img{height:100%;width:auto;display:block}
/* Height-driven everywhere, so the 3.69:1 aspect can never be squashed. */
.brand img{height:66px;width:auto;border-radius:0;display:block}
/* The footer is not a fixed-height row, so there it keeps a chip shape. */
.ftr .brand{padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.07)}
:root[data-theme="light"] .ftr .brand{border-color:rgba(12,19,26,.14)}
.ftr .brand img{height:52px}
/* 243px of logo will not share a 375px row with the theme switch and the
   burger, so it steps down before it can overflow. Measured, not guessed. */
@media(max-width:700px){ .hdr .brand img{height:52px} .hdr .brand{align-self:center} }
@media(max-width:430px){ .hdr .brand img{height:44px} .ftr .brand img{height:44px} }
.nav{display:none;margin-left:auto;align-items:center;gap:4px}
.nav a{
  text-decoration:none;color:var(--muted);font-size:.92rem;font-weight:500;
  padding:8px 13px;border-radius:7px;transition:color .16s ease, background .16s ease;
}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.045)}
.nav a[aria-current="page"]{color:var(--text);background:rgba(255,106,26,.10);box-shadow:inset 0 0 0 1px rgba(255,106,26,.22)}
.nav .btn{margin-left:10px;padding:9px 16px;font-size:.88rem}
.burger{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:9px;background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);cursor:pointer;
}
.burger span{display:block;width:17px;height:1.6px;background:var(--text);position:relative;transition:background .18s}
.burger span::before,.burger span::after{
  content:'';position:absolute;left:0;width:17px;height:1.6px;background:var(--text);transition:transform .22s ease;
}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}
.mnav{display:none;border-top:1px solid var(--line);background:var(--panel)}
.mnav.open{display:block}
.mnav a{
  display:block;padding:14px var(--pad);text-decoration:none;color:var(--muted);
  border-bottom:1px solid var(--line);font-weight:500;
}
.mnav a[aria-current="page"]{color:var(--ignite-2)}
@media(min-width:900px){
  .nav{display:flex}
  .burger{display:none}
  .mnav{display:none !important}
}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(52px,8vw,96px) clamp(56px,9vw,104px);overflow:hidden}
.hero .split{align-items:center}
.hero h1{margin-bottom:20px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.badge{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line-2);border-radius:100px;padding:6px 13px;
  background:rgba(255,255,255,.02);
}

/* ---------- full-bleed hero ----------
   The picture is an <img> rather than a CSS background so it can carry a
   srcset - a 1672px hero has no business landing on a phone. */
.heroshot{
  position:relative;overflow:hidden;
  min-height:clamp(540px, 84vh, 880px);
  display:flex;align-items:center;
  padding-top:clamp(11px, 1.75vw, 22px);
  padding-bottom:clamp(44px, 7vw, 88px);
  border-bottom:1px solid var(--line);
}
.heroBg{position:absolute;inset:0;z-index:0}
/* Every frame is stacked in the same box and cross-fades. They are the
   same pixel dimensions and share one object-position, so the room lands
   identically in all eight and only the bar top appears to change. */
.heroFrame{position:absolute;inset:0;display:block;opacity:0;transition:opacity .9s ease}
.heroFrame.on{opacity:1}
.heroBg img{width:100%;height:100%;object-fit:cover;object-position:50% 54%}

/* The caption for whichever frame is showing. Right-justified, sat above the
   dots, and carrying its own shadow because it lives out over the picture
   where the scrim is at its lightest. */
/* The caption rides over photography whose brightness changes every four
   seconds, in two themes, and in a collapsed state where the wash lifts. No
   ink colour survives all of that - measured 1.4:1 as dark ink and 2.1:1 as
   white - so it carries its own chip and stops depending on the plate. */
.heroLabel{
  position:absolute;z-index:3;right:var(--pad);bottom:56px;margin:0;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#EAF2F9;text-align:right;
  background:rgba(6,10,14,.62);border:1px solid rgba(255,255,255,.15);
  padding:5px 12px;border-radius:100px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .3s ease;pointer-events:none;
}
@media(max-width:700px){ .heroLabel{font-size:.64rem;bottom:52px} }
.heroDots{
  position:absolute;z-index:3;right:var(--pad);bottom:18px;display:flex;gap:8px;
  padding:8px 11px;border-radius:100px;
  background:rgba(6,10,14,.62);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.heroDots button{
  width:8px;height:8px;padding:0;border:none;border-radius:100px;cursor:pointer;
  background:rgba(233,240,247,.30);
  transition:width .2s ease, background .2s ease;
}
.heroDots button:hover{background:rgba(233,240,247,.62)}
.heroDots button.on{width:26px;background:linear-gradient(90deg,var(--ignite),var(--ignite-2))}
/* Two gradients: one pulls the left side down so the card has something to
   sit on, one blends the top into the sticky header and the bottom into the
   next section. Measured against the brightest part of the plate. */
.heroScrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* Stops in PIXELS, not percent: the card is a fixed 660px box, so the
       dark zone that keeps it legible should track the card rather than the
       viewport. In percent it thinned out exactly where the copy sits as the
       window widened. */
    linear-gradient(90deg,
      rgba(6,8,11,.92) 0px, rgba(6,8,11,.80) 640px,
      rgba(6,8,11,.30) 1040px, rgba(6,8,11,.34) 100%),
    linear-gradient(180deg,
      rgba(6,8,11,.82) 0%, rgba(6,8,11,.06) 24%,
      rgba(6,8,11,.20) 58%, rgba(10,14,19,.97) 100%);
}
@media(max-width:900px){
  .heroScrim{
    background:linear-gradient(180deg,
      rgba(6,8,11,.92) 0%, rgba(6,8,11,.72) 22%,
      rgba(6,8,11,.78) 62%, rgba(10,14,19,.97) 100%);
  }
}
.heroInner{position:relative;z-index:2;width:100%}
.heroCard{
  max-width:660px;
  padding:clamp(22px, 3.2vw, 38px);
  border-radius:var(--r-lg);
  background:rgba(8,11,15,.15);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 90px -34px rgba(0,0,0,.95);
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
}
.heroCard{position:relative}
.heroToggle{
  position:absolute;top:10px;right:10px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:100px;cursor:pointer;
  background:rgba(8,11,15,.55);border:1px solid rgba(255,255,255,.16);
  color:var(--muted);font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.heroToggle:hover{color:var(--text);border-color:var(--cyan);background:rgba(8,11,15,.75)}
.heroToggle svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
/* Collapsed: the panel's chrome goes entirely and only the pill is left, so
   the plate behind it is genuinely unobstructed. The scrim eases off too -
   with no copy over the picture there is nothing left to keep legible except
   the pill and the dots, and both carry their own background. */
.heroshot.imgOnly{align-items:flex-start}
.heroshot.imgOnly .heroCard{
  max-width:none;width:auto;padding:0;background:none;border:none;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.heroshot.imgOnly .heroToggle{position:static}
.heroshot.imgOnly .heroToggle svg{transform:rotate(180deg)}
.heroshot.imgOnly .heroScrim{opacity:.34}
.heroScrim{transition:opacity .45s ease}
/* The hero headline is a sentence, not the three words it used to be; at the
   global h1 size it ran to five lines and swallowed the section. */
.heroCard h1{font-size:clamp(1.95rem, 4.4vw, 3.05rem)}
/* The plate changes under the copy eight times a minute. A soft shadow
   costs nothing and holds the worst frame up, so no single surface has to
   be the one that decides how dark the scrim is. */
.heroCard h1, .heroCard .lede{text-shadow:0 1px 14px rgba(0,0,0,.55)}
.heroCard .lede{color:#C6D3DE}
.heroCard .badge{background:rgba(8,11,15,.5);border-color:rgba(255,255,255,.16)}
/* No blur support means no local darkening, so the panel carries it alone. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .heroCard{background:rgba(8,11,15,.55)}
}
/* ---------- framed photograph / rendering ---------- */
.shot{margin:0;position:relative}
.shot picture{display:block}
.shot img{
  width:100%;border-radius:12px;
  border:1px solid var(--line-2);
  box-shadow:0 30px 90px -30px rgba(0,0,0,.95), 0 0 70px -26px rgba(59,224,255,.30);
}
.shotcap{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;
  color:var(--dim);margin-top:12px;text-align:right;
}
/* The mock-up is a hero-sized component; anywhere else it needs reining in. */
.ledwrap.mid{max-width:560px;margin-inline:auto}

/* ---------- the LED bartop mockup ---------- */
.ledwrap{position:relative}
.led{
  position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--line-2);
  background:#04070A;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.95), 0 0 0 6px rgba(255,255,255,.014), 0 0 70px -22px rgba(59,224,255,.35);
  aspect-ratio:16/10;
}
.ledscreen{position:absolute;inset:0}
.ledslide{
  position:absolute;inset:0;padding:clamp(14px,3.4vw,26px);
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  opacity:0;transition:opacity .7s ease;
}
.ledslide.on{opacity:1}
.ledslide .st{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:4px;
}
.ledslide .big{
  font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.2rem,3.6vw,2rem);line-height:1.05;letter-spacing:-.02em;
}
.bar-row{display:flex;align-items:center;gap:10px}
.bar-row .fill{height:9px;border-radius:100px;flex:0 0 auto}
.bar-row .lbl{font-family:var(--f-mono);font-size:.66rem;color:rgba(255,255,255,.5);letter-spacing:.06em}
.s-menu{background:linear-gradient(160deg,#160B04,#07090C)}
.s-game{background:linear-gradient(160deg,#04121A,#07090C)}
.s-sport{background:linear-gradient(160deg,#0B0518,#07090C)}
.s-amb{background:linear-gradient(150deg,#1A0A03,#04121A)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px}
.tiles i{display:block;height:clamp(16px,3.2vw,26px);border-radius:4px;background:rgba(255,255,255,.07)}
.score{display:flex;align-items:baseline;gap:14px;font-family:var(--f-disp);font-weight:700}
.score b{font-size:clamp(1.6rem,5vw,2.6rem);letter-spacing:-.03em}

/* the pixel grid that makes it read as an LED panel */
.ledgrid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.34) 1px, transparent 1px);
  background-size:5px 5px;
  mix-blend-mode:multiply;
}
.ledglare{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.10) 0%, transparent 34%, transparent 66%, rgba(255,255,255,.05) 100%);
}
/* the bartop the panel is set into */
.ledlip{
  height:16px;margin:0 3%;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#1B1208,#0D0906);
  border:1px solid #241809;border-top:none;
  box-shadow:0 24px 44px -22px rgba(0,0,0,.9);
}
.leddots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.leddots button{
  width:7px;height:7px;padding:0;border-radius:100px;border:none;cursor:pointer;
  background:var(--line-2);transition:background .2s, width .2s;
}
.leddots button.on{width:22px;background:linear-gradient(90deg,var(--ignite),var(--ignite-2))}

/* ---------- stat strip ---------- */
.stats{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.stat{background:var(--panel);padding:24px 20px;text-align:center}
.stat b{
  display:block;font-family:var(--f-disp);font-size:clamp(1.5rem,3.4vw,2.1rem);
  font-weight:700;letter-spacing:-.03em;
}
.stat span{
  display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-top:7px;
}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg, var(--panel), rgba(15,21,28,.55));
  border:1px solid var(--line);border-radius:var(--r);padding:26px;
  position:relative;overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card::after{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,106,26,.55),transparent);
  opacity:0;transition:opacity .25s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 20px 50px -26px rgba(0,0,0,.9)}
.card:hover::after{opacity:1}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.95rem}
.card .num{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--dim);
  display:block;margin-bottom:14px;
}
.ico{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(255,106,26,.10);border:1px solid rgba(255,106,26,.22);
}
.ico svg{width:20px;height:20px;stroke:var(--ignite-2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico.cy{background:rgba(59,224,255,.09);border-color:rgba(59,224,255,.22)}
.ico.cy svg{stroke:var(--cyan)}
.ico.vi{background:rgba(155,107,255,.09);border-color:rgba(155,107,255,.22)}
.ico.vi svg{stroke:var(--violet)}

/* feature list */
.ticks{display:grid;gap:12px;margin-top:24px;max-width:70ch}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:.96rem}
.ticks svg{
  width:17px;height:17px;flex:0 0 auto;margin-top:4px;
  stroke:var(--ignite);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.ticks b{color:var(--text);font-weight:600}

/* ---------- placeholder slots ---------- */
.ph{
  position:relative;border:1.5px dashed var(--line-2);border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 10px, transparent 10px 20px),
    var(--panel);
  display:grid;place-items:center;text-align:center;padding:26px;min-height:180px;color:var(--dim);
}
.ph.tall{min-height:300px}
.ph.wide{aspect-ratio:16/9;min-height:0}
.ph.sq{aspect-ratio:1/1;min-height:0}
.ph .phl{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.ph .phn{font-size:.82rem;margin-top:8px;max-width:36ch;color:var(--dim);line-height:1.5}
.ph svg{width:26px;height:26px;stroke:var(--line-2);fill:none;stroke-width:1.4;margin-bottom:12px}
.ph::before{
  content:'PLACEHOLDER';position:absolute;top:10px;left:12px;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.2em;color:rgba(255,106,26,.55);
}

/* ---------- app cards ---------- */
.app{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  display:flex;flex-direction:column;
}
.app:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 20px 50px -26px rgba(0,0,0,.9)}
.appart{aspect-ratio:16/10;position:relative;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.appart span{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;
  color:rgba(255,255,255,.5);text-transform:uppercase;
}
.appart::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.3) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.3) 1px,transparent 1px);
  background-size:4px 4px;mix-blend-mode:multiply;
}
.appbody{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.appbody h3{font-size:1.02rem;margin-bottom:7px}
.appbody p{color:var(--muted);font-size:.88rem;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:4px 10px;
}
.tag.st{color:var(--ok);border-color:rgba(61,214,140,.3);background:rgba(61,214,140,.07)}
.tag.soon{color:var(--ignite-2);border-color:rgba(255,176,58,.3);background:rgba(255,176,58,.07)}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.chip{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 15px;border-radius:100px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.chip:hover{color:var(--text);border-color:var(--cyan)}
.chip.on{background:rgba(255,106,26,.12);border-color:rgba(255,106,26,.45);color:var(--ignite-2)}

/* ---------- spec table ---------- */
.specwrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
table.spec{width:100%;border-collapse:collapse;font-size:.92rem}
table.spec caption{
  text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ignite-2);
  background:rgba(255,106,26,.05);
}
table.spec th,table.spec td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:none}
table.spec th{font-weight:500;color:var(--muted);width:44%;font-size:.88rem}
table.spec td{font-family:var(--f-mono);font-size:.86rem;color:var(--text)}
table.spec td.tbd{color:var(--dim)}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.step::before{
  counter-increment:s;content:'0' counter(s);
  position:absolute;top:-10px;left:0;background:var(--bg);padding-right:12px;
  font-family:var(--f-mono);font-size:.78rem;color:var(--ignite);letter-spacing:.1em;
}
.step h3{font-size:1.02rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.9rem}

/* ---------- CTA band ---------- */
.cta{
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(32px,5.5vw,58px);
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(255,106,26,.15), transparent 62%),
    radial-gradient(600px 300px at 85% 100%, rgba(59,224,255,.11), transparent 62%),
    var(--panel);
  text-align:center;position:relative;overflow:hidden;
}

/* ---------- forms ---------- */
.form{display:grid;gap:16px}
.row2{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){ .row2{grid-template-columns:1fr 1fr} }
.field label{
  display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.025);border:1px solid var(--line-2);color:var(--text);
  font-family:var(--f-body);font-size:.95rem;transition:border-color .16s, box-shadow .16s;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ignite);box-shadow:0 0 0 3px rgba(255,106,26,.14);
}
.field select{appearance:none;cursor:pointer}
.notice{
  border:1px solid rgba(255,176,58,.3);background:rgba(255,176,58,.07);
  border-radius:var(--r-sm);padding:14px 16px;font-size:.88rem;color:var(--ignite-2);
}
.notice.done{border-color:rgba(61,214,140,.3);background:rgba(61,214,140,.07);color:var(--ok)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);background:var(--void);padding-block:52px 30px}
.fgrid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:38px}
.fcol h4{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-bottom:16px;font-weight:400;
}
.fcol li{margin-bottom:10px}
.fcol a{color:var(--muted);text-decoration:none;font-size:.92rem;transition:color .16s}
.fcol a:hover{color:var(--ignite-2)}
.fbot{
  border-top:1px solid var(--line);padding-top:24px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;font-size:.84rem;color:var(--dim);
}
.fbot p{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.04em}

/* ---------- small utilities ----------
   Deliberately few. If you find yourself adding a tenth, the pattern
   probably wants a component class instead. */
.mt40{margin-top:40px}
.mt44{margin-top:44px}
.mt46{margin-top:46px}
.mb14{margin-bottom:14px}
.ctr{justify-content:center}
/* Column swap only once there are two columns to swap. On one column the
   text must still come before the picture it introduces. */
@media(min-width:900px){ .ord1{order:1} .ord2{order:2} }
.stat b.tbd{font-family:var(--f-mono);font-size:1.05rem;color:var(--dim);letter-spacing:.12em}
.phnote{
  margin-top:18px;text-align:center;font-size:.84rem;color:var(--dim);
  font-family:var(--f-mono);letter-spacing:.03em;
}
.fnote{color:var(--dim);font-size:.88rem;max-width:30ch}

/* ==========================================================================
   DAYLIGHT MODE
   --------------------------------------------------------------------------
   Dark is the default and is left untouched above; this block only overrides.
   Two rules of thumb, both learned by breaking them:

   1. THE HERO STAYS PHOTOGRAPHIC. The plates are dark bar interiors. Lighting
      them up washes them out, so in daylight the scrim becomes a light wash
      only where the copy sits, the card goes opaque white, and the text over
      it flips to dark. The picture itself is left alone.
   2. THE LED SIMULATION STAYS DARK. It is a lit panel in a dim room; a "light
      mode" LED panel is not a thing. Every .led* rule is deliberately absent
      from this block.
   ========================================================================== */
:root[data-theme="light"]{
  color-scheme:light;

  --void:#EAEFF4;
  --bg:#F6F8FB;
  --panel:#FFFFFF;
  --panel-2:#EEF3F8;
  --line:#DBE3EB;
  --line-2:#BFCCD9;
  --text:#0C131A;
  --muted:#44586B;
  --dim:#5D6B7A;   /* #69798A was 4.45:1 on white, #616F7E 4.40:1 on --void */

  --accent-ink:#B4480C;
  --hot-a:#C1470B;
  --hot-b:#E2670F;
  --cool-a:#0B6E8C;
  --cool-b:#6B3FD4;

  --glow-ignite:0 0 0 1px rgba(255,106,26,.30), 0 8px 26px -10px rgba(255,106,26,.55);
  --glow-cyan:0 0 0 1px rgba(11,110,140,.25), 0 8px 26px -12px rgba(11,110,140,.35);
}

/* the ambient field: far weaker on light, or the page looks stained */
:root[data-theme="light"] body::before{
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(255,106,26,.10), transparent 60%),
    radial-gradient(760px 480px at 92% 4%, rgba(11,110,140,.07), transparent 62%),
    radial-gradient(1000px 700px at 50% 108%, rgba(107,63,212,.06), transparent 65%);
}
:root[data-theme="light"] body::after{
  opacity:.55;
  background-image:
    linear-gradient(rgba(12,19,26,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,19,26,.045) 1px, transparent 1px);
}

:root[data-theme="light"] .kicker.cy{color:var(--cool-a)}
:root[data-theme="light"] .kicker.cy::before{background:linear-gradient(90deg,transparent,var(--cool-a))}
:root[data-theme="light"] .hdr{background:rgba(246,248,251,.84)}
:root[data-theme="light"] .nav a:hover{background:rgba(12,19,26,.055)}
:root[data-theme="light"] .nav a[aria-current="page"]{
  background:rgba(255,106,26,.13);box-shadow:inset 0 0 0 1px rgba(180,72,12,.30);
}
:root[data-theme="light"] .burger{background:rgba(12,19,26,.03)}
:root[data-theme="light"] .btn.ghost{background:rgba(12,19,26,.02)}
:root[data-theme="light"] .badge{background:rgba(12,19,26,.02)}
:root[data-theme="light"] .card{background:linear-gradient(180deg,var(--panel),#F7FAFC)}
:root[data-theme="light"] .card:hover{box-shadow:0 18px 40px -28px rgba(12,19,26,.45)}
:root[data-theme="light"] .app:hover{box-shadow:0 18px 40px -28px rgba(12,19,26,.45)}
:root[data-theme="light"] .ph{
  background:
    repeating-linear-gradient(135deg, rgba(12,19,26,.03) 0 10px, transparent 10px 20px),
    var(--panel);
}
:root[data-theme="light"] .ph::before{color:rgba(180,72,12,.7)}
:root[data-theme="light"] .chip{background:rgba(12,19,26,.02)}
:root[data-theme="light"] .chip.on{background:rgba(255,106,26,.14);border-color:rgba(180,72,12,.45);color:var(--accent-ink)}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea{background:#FFFFFF}
:root[data-theme="light"] table.spec caption{color:var(--accent-ink);background:rgba(255,106,26,.07)}
:root[data-theme="light"] .notice{color:#8A3908;border-color:rgba(180,72,12,.30);background:rgba(255,176,58,.14)}
:root[data-theme="light"] .notice.done{color:#136B41;border-color:rgba(19,107,65,.30);background:rgba(61,214,140,.14)}
:root[data-theme="light"] .tag.st{color:#136B41;border-color:rgba(19,107,65,.32);background:rgba(61,214,140,.12)}
:root[data-theme="light"] .tag.soon{color:#8A3908;border-color:rgba(180,72,12,.32);background:rgba(255,176,58,.16)}
:root[data-theme="light"] .fcol a:hover{color:var(--accent-ink)}
:root[data-theme="light"] .ico svg{stroke:#B4480C}
:root[data-theme="light"] .ico.cy svg{stroke:#0B6E8C}
:root[data-theme="light"] .ico.vi svg{stroke:#6B3FD4}
:root[data-theme="light"] .ico.cy{background:rgba(11,110,140,.09);border-color:rgba(11,110,140,.22)}
:root[data-theme="light"] .ico.vi{background:rgba(107,63,212,.09);border-color:rgba(107,63,212,.22)}
:root[data-theme="light"] .ticks svg{stroke:#B4480C}
:root[data-theme="light"] .step::before{color:var(--accent-ink)}
:root[data-theme="light"] .cta{
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(255,106,26,.13), transparent 62%),
    radial-gradient(600px 300px at 85% 100%, rgba(11,110,140,.10), transparent 62%),
    var(--panel);
}
:root[data-theme="light"] .btn.ghost:hover{border-color:#0B6E8C}
:root[data-theme="light"] :focus-visible{outline-color:#0B6E8C}

/* --- the hero, in daylight --------------------------------------------- */
/* The wash is light and only over the copy; the right-hand side of the plate
   is left as shot. Bottom still fades to --bg so the section still joins. */
:root[data-theme="light"] .heroScrim{
  background:
    linear-gradient(90deg,
      rgba(246,248,251,.95) 0px, rgba(246,248,251,.84) 640px,
      rgba(246,248,251,.22) 1040px, rgba(246,248,251,.12) 100%),
    linear-gradient(180deg,
      rgba(246,248,251,.72) 0%, rgba(246,248,251,.02) 26%,
      rgba(246,248,251,.10) 58%, rgba(246,248,251,.97) 100%);
}
@media(max-width:900px){
  :root[data-theme="light"] .heroScrim{
    background:linear-gradient(180deg,
      rgba(246,248,251,.94) 0%, rgba(246,248,251,.80) 22%,
      rgba(246,248,251,.86) 62%, rgba(246,248,251,.98) 100%);
  }
}
:root[data-theme="light"] .heroCard{
  background:rgba(255,255,255,.80);
  border-color:rgba(12,19,26,.10);
  box-shadow:0 24px 60px -34px rgba(12,19,26,.55);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-theme="light"] .heroCard{background:rgba(255,255,255,.94)}
}
:root[data-theme="light"] .heroCard h1,
:root[data-theme="light"] .heroCard .lede{text-shadow:none}
:root[data-theme="light"] .heroCard .lede{color:#3B4E60}
:root[data-theme="light"] .heroCard .badge{background:rgba(255,255,255,.7);border-color:rgba(12,19,26,.14)}
:root[data-theme="light"] .heroToggle{
  background:rgba(255,255,255,.75);border-color:rgba(12,19,26,.14);color:var(--muted);
}
:root[data-theme="light"] .heroToggle:hover{background:rgba(255,255,255,.95);border-color:#0B6E8C;color:var(--text)}
/* Collapsed, the copy is gone and the plate is on show - so the wash lifts
   almost entirely rather than sitting there as a haze. */
:root[data-theme="light"] .heroshot.imgOnly .heroScrim{opacity:.20}

/* ---------- header tools: theme switch ---------- */
.hdrTools{display:flex;align-items:center;gap:10px;margin-left:auto}
.hdrTools .burger{margin-left:0}
@media(min-width:900px){ .hdrTools{margin-left:14px} }

.themeBtn{
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 13px;border-radius:100px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:var(--muted);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.themeBtn:hover{color:var(--text);border-color:var(--cyan)}
:root[data-theme="light"] .themeBtn{background:rgba(12,19,26,.03)}
:root[data-theme="light"] .themeBtn:hover{border-color:#0B6E8C}
.themeBtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* One icon at a time: the moon while dark, the sun while light. */
.themeBtn .i-sun{display:none}
:root[data-theme="light"] .themeBtn .i-sun{display:block}
:root[data-theme="light"] .themeBtn .i-moon{display:none}
@media(max-width:520px){ .themeBtn .tLabel{display:none} .themeBtn{padding:0 11px} }

/* ---------- the delta: transformed over traditional ---------- */
.cmp{margin-top:44px}
.cmpStage{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-2);background:#0B0906;
  aspect-ratio:16/7;min-height:300px;
  box-shadow:0 30px 80px -34px rgba(0,0,0,.85);
}
@media(max-width:700px){ .cmpStage{aspect-ratio:4/3} }
.cmpPane{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end}

/* --- underneath: the bar top most venues have today --- */
.cmpPane.trad{
  background:
    repeating-linear-gradient(92deg,
      rgba(0,0,0,.16) 0 2px, transparent 2px 9px, rgba(0,0,0,.10) 9px 11px, transparent 11px 26px),
    linear-gradient(160deg,#4A3520 0%,#3A2A1B 40%,#2A1E13 100%);
  background-color:#3A2A1B;
}
.tradVeil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55))}
.tradStuff{position:relative;padding:clamp(16px,3vw,30px);display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.chalk{
  background:#1A1D19;border:3px solid #4A3520;border-radius:4px;
  padding:12px 16px;color:#D8D2C4;font-family:var(--f-disp);font-weight:600;
  font-size:clamp(.7rem,1.5vw,.95rem);line-height:1.35;text-align:center;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.9);
}
.chalk b{display:block;font-size:1.25em;color:#F0EADA}
.tradNote{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,234,218,.5);
}

/* --- on top: the same bar top, transformed. Clipped by --pos. --- */
.cmpPane.dig{
  background:linear-gradient(160deg,#07131C 0%,#04101A 55%,#050A10 100%);
  /* Grows from the LEFT as the handle moves right, so dragging right
     transforms the bar. Clipping from the left instead made dragging right
     un-transform it, which read backwards. */
  clip-path:inset(0 calc(100% - var(--pos,55%)) 0 0);
}
.digGrid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.34) 1px, transparent 1px);
  background-size:5px 5px;mix-blend-mode:multiply;
}
.digWash{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 80% 50%, rgba(59,224,255,.30), transparent 65%),
  radial-gradient(90% 80% at 55% 90%, rgba(255,106,26,.22), transparent 60%);}
.digStuff{position:relative;padding:clamp(16px,3vw,30px);display:grid;gap:10px}
/* the benefits, sat ON the transformed surface - that is the whole point */
.digPills{display:flex;flex-wrap:wrap;gap:8px}
.digPill{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;white-space:nowrap;
  background:rgba(6,10,14,.72);border:1px solid rgba(255,255,255,.20);color:#EAF2F9;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.digPill b{color:var(--ignite-2);font-weight:600}
.digRace{display:grid;gap:5px;max-width:min(420px,52%)}
.digRace i{display:block;height:8px;border-radius:100px}
.digAd{
  align-self:start;justify-self:start;padding:8px 12px;border-radius:6px;
  background:linear-gradient(100deg,rgba(255,106,26,.92),rgba(255,176,58,.92));
  color:#170A02;font-family:var(--f-disp);font-weight:700;font-size:.72rem;letter-spacing:-.01em;
}

/* the seam and its control */
.cmpSeam{
  position:absolute;top:0;bottom:0;left:var(--pos,58%);width:2px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.9),transparent);
  pointer-events:none;
}
.cmpKnob{
  position:absolute;top:50%;left:var(--pos,58%);transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:100px;pointer-events:none;
  background:rgba(8,11,15,.8);border:1px solid rgba(255,255,255,.45);
  display:grid;place-items:center;
  box-shadow:0 8px 26px -8px rgba(0,0,0,.9);
}
.cmpKnob svg{width:18px;height:18px;fill:none;stroke:#EAF2F9;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The real control is a range input laid over the stage: keyboard reachable,
   screen-reader labelled, and draggable. The knob above is decoration. */
.cmpRange{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;appearance:none;background:transparent;
}
.cmpRange:focus-visible + .cmpKnob{outline:2px solid var(--cyan);outline-offset:3px}

.cmpLegend{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.cmpTag{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);
}
.cmpTag.now{color:var(--accent-ink)}

/* --- the delta itself, spelled out --- */
.deltaGrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:34px}
.deltaRow{display:grid;background:var(--panel);gap:0}
@media(min-width:760px){ .deltaRow{grid-template-columns:1fr 1fr} }
.deltaCell{padding:20px 22px}
.deltaCell + .deltaCell{border-top:1px solid var(--line)}
@media(min-width:760px){
  .deltaCell + .deltaCell{border-top:none;border-left:1px solid var(--line)}
}
.deltaCell .lbl{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);display:block;margin-bottom:8px;
}
.deltaCell p{font-size:.95rem;color:var(--muted)}
.deltaCell.was p{color:var(--dim)}
.deltaCell.now{background:linear-gradient(100deg, rgba(255,106,26,.07), transparent 70%)}
.deltaCell.now .lbl{color:var(--accent-ink)}
.deltaCell.now p{color:var(--text)}
:root[data-theme="light"] .deltaCell.now{background:linear-gradient(100deg, rgba(255,106,26,.10), transparent 70%)}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.js .rv.in{opacity:1;transform:none}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js .rv{opacity:1;transform:none}
}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ignite);color:#150802;padding:10px 18px;border-radius:0 0 9px 0;
  font-family:var(--f-disp);font-weight:600;text-decoration:none;
}
.skip:focus{left:0}