/* ══════════════════════════════════════════════════════════════
   THE ULTIMATE POWER USER
   Direction: arena stage. Spotlight cones, neon rim light,
   reflective floor. Derived from the UPU badge mark.

   Every colour resolves from the token block below, so the whole
   palette moves by editing these ~13 values.

   Type is never set in capitals — Lenovo does not use all caps.
   Headings, labels and buttons are Title Case; body copy is
   sentence case.
   ══════════════════════════════════════════════════════════════ */

/* ── PALETTE: Midnight ──────────────────────────────────────── */
:root{
  --void-rgb:     3,10,28;       /* page ground — midnight blue */
  --shadow-rgb:   1,4,14;
  --stage-rgb:    10,22,51;
  --stage-hi-rgb: 16,34,77;

  --violet-rgb:   124,92,255;
  --blue-rgb:     46,124,246;
  --magenta-rgb:  255,77,166;

  --ink:          #FFFFFF;
  --ink-soft:     #BFD4F5;
  --ink-mute:     #7793BF;

  --sheen-rgb:    255,255,255;   /* highlight colour */
  --amb-a:        .32;           /* spotlight intensity */
  --mark-a:       .44;           /* backdrop mark */
  --scan-a:       .020;          /* broadcast scanline */
  --glow-a:       .50;           /* neon bloom */
}

/* ── Derived tokens (never redeclared per theme) ────────────── */
:root{
  --void:      rgb(var(--void-rgb));
  --stage:     rgb(var(--stage-rgb));
  --stage-hi:  rgb(var(--stage-hi-rgb));
  --violet:    rgb(var(--violet-rgb));
  --blue:      rgb(var(--blue-rgb));
  --magenta:   rgb(var(--magenta-rgb));
  --hairline:  rgba(var(--violet-rgb),.20);

  --rail: 1240px;
  --r-md: 14px;
  --r-lg: 26px;

  --glow-v: 0 0 24px rgba(var(--violet-rgb),var(--glow-a));
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:96px}

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:'Montserrat',system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .45s ease, color .45s ease;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--magenta);
  outline-offset:3px;
  border-radius:2px;
}

/* ── Type scale ─────────────────────────────────────────────── */
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--magenta);
  margin:0 0 14px;
}

/* Neon text treatment — used once, on the hero mark word */
.neon{
  color:var(--ink);
  text-shadow:
    0 0 8px rgba(var(--sheen-rgb),.45),
    0 0 22px rgba(var(--violet-rgb),.9),
    0 0 48px rgba(var(--magenta-rgb),.6);
}

/* ══ AMBIENT STAGE ══════════════════════════════════════════════
   Two spotlight cones + floor haze, fixed behind everything.    */
.stage-lights{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  transition:opacity .45s ease;
  background:
    radial-gradient(58vw 46vh at 12% -8%, rgba(var(--blue-rgb),var(--amb-a)), transparent 62%),
    radial-gradient(58vw 46vh at 88% -8%, rgba(var(--magenta-rgb),var(--amb-a)), transparent 62%),
    radial-gradient(74vw 40vh at 50% 108%, rgba(var(--violet-rgb),var(--amb-a)), transparent 66%);
}

.stage-lights::after{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(var(--sheen-rgb),var(--scan-a)) 0 1px,
    transparent 1px 3px
  );
}

/* ── The mark, held on the backdrop ──────────────────────────
   The source art is supplied on black; the black is keyed out in
   logo-faded-alpha.png, so it drops straight onto the ground.

   Absolutely positioned rather than fixed: the mark belongs to the
   top of the page and scrolls away with it. Locked to the viewport it
   ended up sitting under the sections below, and copy crossing the
   badge reads as a mistake every time. */
.stage-mark{
  position:absolute;
  /* Sized to the right gutter so the full badge reads as a deliberate
     object, rather than being cropped mid-word. */
  top:2vh;
  right: -7vw;
  z-index:0;
  width:min(880px,74vw);
  aspect-ratio:1200/800;
  pointer-events:none;
  background:url("../images/logo-faded-alpha.png") no-repeat center/contain;
  opacity:var(--mark-a);
  /* Feathered so it reads as light on the backdrop, not a pasted rectangle. */
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%, #000 42%, transparent 88%);
          mask-image:radial-gradient(closest-side at 50% 50%, #000 42%, transparent 88%);
}

/* On phones, pull the mark flush to the right edge. */
@media (max-width:500px){
  .stage-mark{right:0vw}
}

/* Where scroll-driven animation is available, the mark also fades over
   the first screenful, so it clears rather than sliding under the bar.
   Guarded: without the timeline the animation would fill to its end
   state and the mark would never show at all. */
@supports (animation-timeline:scroll()){
  .stage-mark{
    animation:mark-clear linear both;
    animation-timeline:scroll(root block);
    animation-range:0 80vh;
  }

  @keyframes mark-clear{
    0%  {opacity:var(--mark-a)}
    75% {opacity:0}
    100%{opacity:0}
  }
}

.page{position:relative;z-index:1}

.rail{
  width:100%;
  max-width:var(--rail);
  margin-inline:auto;
  padding-inline:28px;
}

/* ══ TOP BAR ═══════════════════════════════════════════════════ */
.top-bar{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(var(--void-rgb),.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}

.top-bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:74px;
}

.logo-lockup img{height:30px;width:auto}

.top-bar-right{display:flex;align-items:center;gap:36px}

.top-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}

.top-nav a{
  white-space:nowrap;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.015em;
  color:var(--ink-soft);
  padding:6px 0;
  position:relative;
  transition:color .18s ease;
}

.top-nav a::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--violet),var(--magenta));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .24s ease;
}

.top-nav a:hover{color:var(--ink)}
.top-nav a:hover::after{transform:scaleX(1)}

/* ── Neon pill button ───────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-family:'Montserrat',sans-serif;
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.02em;
  padding:14px 30px;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .24s ease, color .24s ease, border-color .24s ease;
}

.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.btn-primary{
  color:#fff;
  background:linear-gradient(100deg,var(--blue),var(--violet) 48%,var(--magenta));
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 6px 30px rgba(var(--violet-rgb),.42);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset, 0 10px 44px rgba(var(--magenta-rgb),.55);
}

.btn-ghost{
  color:var(--ink-soft);
  border-color:var(--hairline);
  background:rgba(var(--violet-rgb),.06);
}

.btn-ghost:hover{
  color:var(--ink);
  border-color:var(--violet);
  box-shadow:var(--glow-v);
}

.top-cta{padding:12px 26px;font-size:.78rem}

/* ── Hamburger ──────────────────────────────────────────────── */
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;height:44px;
  background:none;
  border:0;
  cursor:pointer;
  padding:0;
}
.hamburger span{
  display:block;
  height:2px;width:24px;
  margin-inline:auto;
  background:var(--ink-soft);
  border-radius:2px;
  transition:transform .24s ease, opacity .18s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Mobile menu ────────────────────────────────────────────── */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(var(--void-rgb),.97);
  backdrop-filter:blur(18px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .26s ease, visibility .26s ease;
}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu ul{list-style:none;margin:0;padding:0;text-align:center;display:grid;gap:28px}
.mobile-menu a{
  font-family:'Archivo Black',sans-serif;
  font-size:1.7rem;
  letter-spacing:-.01em;
}
.mobile-close{
  position:absolute;
  top:22px;right:22px;
  width:44px;height:44px;
  background:none;border:0;cursor:pointer;
  color:var(--ink-soft);
}
.mobile-close svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ══ HERO ══════════════════════════════════════════════════════ */
.hero{
  position:relative;
  padding:clamp(56px,8vw,104px) 0 0;
}

/* Single column — the mark now carries the right-hand side from the
   backdrop, so a separate hero badge would only duplicate it. */
.hero-inner{padding-block:clamp(8px,3vw,40px)}

/* The mark carries the right-hand side from the backdrop, so the copy
   holds a comfortable measure on the left rather than filling the rail. */
.hero-text{max-width:720px}

.challenge-bubble{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:'JetBrains Mono',monospace;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-soft);
  padding:8px 18px;
  border:1px solid var(--hairline);
  border-radius:999px;
  background:rgba(var(--violet-rgb),.08);
}

.bubble-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--magenta);
  box-shadow:0 0 10px var(--magenta);
  animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.8)}
}

.hero h1{
  font-family:'Archivo Black',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(2.5rem,5.6vw,4.35rem);
  line-height:.94;
  letter-spacing:-.025em;
  margin:22px 0 0;
}

.hero h1 .line-2{display:block;margin-top:.12em}

.hero .subtitle{
  max-width:56ch;
  margin:26px 0 0;
  font-size:1.03rem;
  line-height:1.72;
  color:var(--ink-soft);
}

.hero .subtitle strong{color:var(--ink);font-weight:700}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}

/* ── Hero visual: the badge on its stage floor ─────────────── */
/* ══ SCOREBOARD — the signature element ═══════════════════════
   The countdown as a physical LED board standing on the floor. */
.scoreboard-wrap{
  position:relative;
  margin-top:clamp(26px,3.4vw,46px);
  padding-bottom:clamp(26px,3.2vw,44px);
}

.scoreboard-wrap::before{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:min(96vw,1000px);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),var(--magenta),transparent);
  box-shadow:0 0 26px rgba(var(--violet-rgb),.7);
}

.scoreboard{
  position:relative;
  margin-inline:auto;
  width:fit-content;
  max-width:100%;
  padding:16px clamp(18px,2.6vw,34px) 14px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(var(--stage-hi-rgb),.90),rgba(var(--stage-rgb),.94));
  border:1px solid var(--hairline);
  box-shadow:
    0 0 0 1px rgba(var(--sheen-rgb),.04) inset,
    0 0 60px rgba(var(--violet-rgb),.28),
    0 26px 60px rgba(var(--shadow-rgb),.55);
}

/* Neon rim, drawn as a gradient border on a pseudo-element */
.scoreboard::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,var(--blue),var(--violet) 40%,var(--magenta) 78%,var(--blue));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

.cd-digits{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(6px,1.4vw,16px);
}

.cd-seg{display:grid;justify-items:center;gap:5px;min-width:clamp(48px,6.2vw,76px)}

.cd-seg-num{
  font-family:'JetBrains Mono',monospace;
  font-weight:800;
  font-size:clamp(1.7rem,3.7vw,2.7rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  text-shadow:0 0 18px rgba(var(--violet-rgb),.9),0 0 40px rgba(var(--blue-rgb),.5);
}

.cd-seg-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-mute);
}

.cd-sep{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(1.2rem,2.7vw,1.9rem);
  line-height:1.1;
  color:var(--violet);
  text-shadow:0 0 14px var(--violet);
  animation:blink 1s step-end infinite;
}

@keyframes blink{50%{opacity:.25}}

.scoreboard-label{
  margin:12px 0 0;
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-soft);
}

/* ══ SECTION FRAME ═════════════════════════════════════════════ */
.section{padding:clamp(64px,8vw,110px) 0}

.section-heading{
  font-family:'Archivo Black',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(1.9rem,3.7vw,2.9rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0;
}

.section-intro{
  max-width:60ch;
  margin:18px 0 0;
  color:var(--ink-soft);
}

/* ══ HOW TO PLAY — three parallel tactics ══════════════════════ */
.tactics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,30px);
  list-style:none;
  margin:46px 0 0;
  padding:0;
}

/* Each card takes one of the mark's three neons, swept in order, so the
   row reads as three lit podiums rather than three identical panels. */
.tactic{
  --accent-rgb:var(--violet-rgb);
  position:relative;
  overflow:hidden;
  padding:34px 28px 32px;
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(var(--accent-rgb),.20), transparent 62%),
    linear-gradient(180deg, rgba(var(--stage-hi-rgb),.78), rgba(var(--stage-rgb),.88));
  border:1px solid rgba(var(--accent-rgb),.34);
  box-shadow:
    0 0 0 1px rgba(var(--sheen-rgb),.04) inset,
    0 14px 38px rgba(var(--shadow-rgb),.42);
  transition:transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.tactic:nth-child(1){--accent-rgb:var(--blue-rgb)}
.tactic:nth-child(2){--accent-rgb:var(--violet-rgb)}
.tactic:nth-child(3){--accent-rgb:var(--magenta-rgb)}

/* The lit strip along the top edge — the rig above the stage. */
.tactic::before{
  content:'';
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb)) 22%,rgb(var(--accent-rgb)) 78%,transparent);
  box-shadow:0 0 16px rgba(var(--accent-rgb),.85);
}

/* Spotlight wash that comes up on hover. */
.tactic::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(120% 78% at 50% -12%, rgba(var(--accent-rgb),.26), transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.tactic:hover{
  transform:translateY(-5px);
  border-color:rgba(var(--accent-rgb),.7);
  box-shadow:
    0 0 0 1px rgba(var(--sheen-rgb),.05) inset,
    0 22px 54px rgba(var(--shadow-rgb),.50),
    0 0 46px rgba(var(--accent-rgb),.30);
}
.tactic:hover::after{opacity:1}

/* Content sits above the wash. */
.tactic-num,
.tactic-title,
.tactic p{position:relative;z-index:1}

/* The numeral as an illuminated podium marker. */
.tactic-num{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  margin-bottom:20px;
  border-radius:50%;
  font-family:'JetBrains Mono',monospace;
  font-size:1.05rem;
  font-weight:800;
  line-height:1;
  color:rgb(var(--accent-rgb));
  background:rgba(var(--accent-rgb),.12);
  border:1.5px solid rgba(var(--accent-rgb),.55);
  box-shadow:
    0 0 18px rgba(var(--accent-rgb),.42),
    inset 0 0 12px rgba(var(--accent-rgb),.22);
  text-shadow:0 0 10px rgba(var(--accent-rgb),.75);
}

.tactic-title{
  font-family:'Archivo Black',Impact,sans-serif;
  font-weight:400;
  font-size:1.18rem;
  letter-spacing:-.015em;
  margin:0 0 12px;
}

.tactic p{margin:0;font-size:.94rem;color:var(--ink-soft)}

/* ══ PRIZES — three doors ══════════════════════════════════════
   Three separate cards read as three prizes shown at once. Held in
   one frame, with only one lit and a notch running into the panel,
   they read as one control with three positions. */

/* Says out loud what the strip is for — the tabs alone were being
   read as decoration rather than something to press. */
.doors-hint{
  display:flex;
  align-items:center;
  gap:10px;
  margin:34px 0 12px;
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink-mute);
}

.doors-hint svg{
  width:15px;height:15px;
  fill:none;stroke:var(--magenta);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  flex:0 0 auto;
}

.doors{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:0;
  padding:6px;
  border-radius:calc(var(--r-md) + 7px);
  border:1px solid var(--hairline);
  background:rgba(var(--stage-rgb),.55);
}

.door-tab{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:16px 18px;
  border-radius:var(--r-md);
  border:1px solid transparent;
  background:none;
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .22s ease, background .22s ease, color .22s ease, box-shadow .24s ease;
}

.door-tab > span{display:grid;gap:5px;justify-items:start;min-width:0}

.door-num{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-mute);
  transition:color .22s ease;
}

.door-label{
  font-family:'Archivo Black',Impact,sans-serif;
  font-size:.98rem;
  letter-spacing:-.01em;
  line-height:1.1;
}

/* Points along the row while closed, down into the panel when open. */
.door-chevron{
  width:17px;height:17px;
  fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  opacity:.45;
  transition:transform .26s cubic-bezier(.2,.8,.3,1), opacity .2s ease, color .22s ease;
}

.door-tab:hover{
  background:rgba(var(--violet-rgb),.08);
  border-color:rgba(var(--violet-rgb),.5);
  color:var(--ink);
}
.door-tab:hover .door-chevron{opacity:.85}

.door-tab.active{
  color:var(--ink);
  background:linear-gradient(165deg,rgba(var(--violet-rgb),.30),rgba(var(--blue-rgb),.16));
  border-color:var(--violet);
  box-shadow:0 0 30px rgba(var(--violet-rgb),.30), 0 0 0 1px rgba(var(--sheen-rgb),.06) inset;
}
.door-tab.active .door-num{color:var(--magenta)}
.door-tab.active .door-chevron{
  transform:rotate(90deg);
  opacity:1;
  color:var(--magenta);
}

/* The notch that ties the lit tab to the panel below it. Opaque, so the
   panel's own top edge does not print through it.
   Offset = strip padding (6) + strip border (1) + panel margin (26),
   then half the diamond, so its centre lands on the panel edge. */
.door-tab.active::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-41px;
  width:16px;height:16px;
  transform:translateX(-50%) rotate(45deg);
  background:color-mix(in srgb, var(--stage-hi) 55%, var(--void));
  border-left:1px solid var(--hairline);
  border-top:1px solid var(--hairline);
  pointer-events:none;
}

/* ── Panel ─────────────────────────────────────────────────── */
.door-panel{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,4vw,56px);
  align-items:center;
  margin-top:26px;
  padding:clamp(26px,3.4vw,44px);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(var(--stage-hi-rgb),.55),rgba(var(--stage-rgb),.72));
  border:1px solid var(--hairline);
  animation:door-open .38s ease both;
}

@keyframes door-open{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

.door-panel[hidden]{display:none}

.door-art img{
  width:100%;
  border-radius:var(--r-md);
}

.door-title{
  font-family:'Archivo Black',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(1.2rem,2.2vw,1.6rem);
  letter-spacing:-.015em;
  margin:0 0 16px;
}

.door-copy p{margin:0 0 16px;color:var(--ink-soft);font-size:.97rem}
.door-copy p strong{color:var(--ink);font-weight:700}

.how-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem !important;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--magenta) !important;
  margin:22px 0 10px !important;
}

.how-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.how-list li{
  position:relative;
  padding-left:22px;
  font-size:.93rem;
  color:var(--ink-soft);
}

.how-list li::before{
  content:'';
  position:absolute;
  left:0;top:.62em;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--violet);
  box-shadow:0 0 8px rgba(var(--violet-rgb),.8);
}

.inline-link{
  color:var(--ink);
  border-bottom:1px solid rgba(var(--magenta-rgb),.6);
  padding-bottom:1px;
  transition:border-color .2s ease, color .2s ease;
}
.inline-link:hover{color:var(--magenta);border-color:var(--magenta)}

/* ── Goal tiles (KPI row, not a chart — see comment in markup) ── */
.goals{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--hairline);
}

.goals-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem !important;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-mute) !important;
  margin:0 0 16px !important;
}

.goal-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  list-style:none;
  margin:0;
  padding:0;
}

.goal{
  display:grid;
  gap:2px;
  padding:14px 16px;
  border-radius:10px;
  background:rgba(var(--void-rgb),.45);
  border:1px solid var(--hairline);
}

.goal-group{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink-mute);
}

.goal-value{
  font-family:'JetBrains Mono',monospace;
  font-size:1.6rem;
  font-weight:800;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}

.goal-unit{
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--ink-mute);
}

.prize-footnote{
  margin:26px 0 0;
  font-size:.74rem;
  line-height:1.7;
  color:var(--ink-mute);
  max-width:76ch;
}

/* ══ MAIN COLUMN + STICKY LEADERBOARD RAIL ═════════════════════ */
.mws-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:clamp(28px,3.6vw,52px);
  align-items:start;
}

/* Rail held back — the content takes the full rail width. */
.rail-off .mws-inner{grid-template-columns:minmax(0,1fr);gap:0}
.rail-off .board-rail{display:none}

/* Sections inside the column supply their own vertical rhythm only —
   the grid parent owns the horizontal rail. */
.main-column{min-width:0}
.main-column .section{padding-inline:0}

.board-rail{
  position:sticky;
  /* clears the 74px sticky header */
  top:96px;
  min-width:0;
  /* Never taller than the viewport, so it can't be clipped while stuck. */
  max-height:calc(100vh - 120px);
  display:flex;
}

.board-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  width:100%;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(var(--stage-hi-rgb),.88),rgba(var(--stage-rgb),.94));
  border:1px solid var(--hairline);
  box-shadow:
    0 0 0 1px rgba(var(--sheen-rgb),.04) inset,
    0 18px 48px rgba(var(--shadow-rgb),.45);
}

/* Neon rim, matching the scoreboard's construction. */
.board-card::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(160deg,var(--blue),var(--violet) 45%,var(--magenta));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.75;
  pointer-events:none;
}

.board-head{
  padding:22px 24px 18px;
  border-bottom:1px solid var(--hairline);
}

.board-eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 10px;
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-mute);
}

.board-title{
  font-family:'Archivo Black',Impact,sans-serif;
  font-weight:400;
  font-size:1.28rem;
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0;
}

/* ── Goal block ────────────────────────────────────────────── */
.board-goal{
  padding:18px 24px 20px;
  border-bottom:1px solid var(--hairline);
  background:rgba(var(--violet-rgb),.06);
}

.board-goal-label{
  margin:0 0 8px;
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--ink-mute);
}

.board-goal-figures{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 12px;
}

.board-goal-num{
  font-family:'JetBrains Mono',monospace;
  font-size:1.85rem;
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  text-shadow:0 0 18px rgba(var(--violet-rgb),.55);
}

.board-goal-of{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  color:var(--ink-mute);
}

/* The body takes the slack, so the card fills its column rather than
   floating short of it. */
.board-body{
  position:relative;
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:22px 24px 24px;
}

/* Placeholder rows behind the empty state — shows the shape the board
   will take without inventing standings that do not exist. */
.board-ghost{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:grid;
  gap:11px;
}

.board-ghost li{
  display:flex;
  align-items:center;
  gap:13px;
  opacity:.4;
}

.ghost-rank{
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  font-weight:800;
  color:var(--ink-mute);
  width:1.2em;
}

.ghost-bar{
  flex:1;
  height:9px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(var(--violet-rgb),.34),rgba(var(--violet-rgb),.06));
}

.board-ghost li:nth-child(1) .ghost-bar{width:100%}
.board-ghost li:nth-child(2) .ghost-bar{background:linear-gradient(90deg,rgba(var(--violet-rgb),.28),rgba(var(--violet-rgb),.05))}
.board-ghost li:nth-child(3) .ghost-bar{background:linear-gradient(90deg,rgba(var(--violet-rgb),.22),rgba(var(--violet-rgb),.04))}
.board-ghost li:nth-child(4) .ghost-bar{background:linear-gradient(90deg,rgba(var(--violet-rgb),.16),rgba(var(--violet-rgb),.03))}
.board-ghost li:nth-child(5) .ghost-bar{background:linear-gradient(90deg,rgba(var(--violet-rgb),.12),rgba(var(--violet-rgb),.02))}

.board-empty-head{
  font-family:'Archivo Black',Impact,sans-serif;
  font-weight:400;
  font-size:1.02rem;
  letter-spacing:-.01em;
  margin:0 0 9px;
}

.board-empty-body{
  margin:0 0 20px;
  color:var(--ink-soft);
  font-size:.88rem;
  line-height:1.65;
}

.board-cta{width:100%;justify-content:center;padding:13px 20px;font-size:.78rem}

.board-foot-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--ink-soft);
  transition:color .18s ease, background .18s ease;
}
.board-foot-link svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.board-foot-link:hover{color:var(--ink);background:rgba(var(--violet-rgb),.10)}

.board-foot{
  margin:0;
  padding:13px 24px 15px;
  border-top:1px solid var(--hairline);
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink-mute);
  text-align:center;
}

.lb-standings{padding-top:0}

/* ══ LEADERBOARD PAGE ══════════════════════════════════════════ */
.lb-head{padding-bottom:0}
.lb-goal-section{padding-top:clamp(30px,3.6vw,46px)}

.lb-goal-card{
  position:relative;
  overflow:hidden;
  padding:clamp(26px,3.4vw,40px);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(var(--stage-hi-rgb),.94),rgba(var(--stage-rgb),.97));
  border:1px solid var(--hairline);
  box-shadow:0 18px 48px rgba(var(--shadow-rgb),.42);
}

.lb-goal-card::before{
  content:'';
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--violet) 45%,var(--magenta));
  box-shadow:0 0 18px rgba(var(--violet-rgb),.7);
}

.lb-goal-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.lb-goal-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-mute);
}

.lb-status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:rgba(var(--violet-rgb),.08);
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--ink-soft);
}

.lb-goal-figures{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px;
  margin-bottom:20px;
}

/* The hero figure: the one number this page leads with. */
.lb-goal-number{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(2.8rem,7vw,4.6rem);
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  text-shadow:0 0 24px rgba(var(--violet-rgb),.6);
}

.lb-goal-of{font-size:.95rem;color:var(--ink-mute)}
.lb-goal-of strong{color:var(--ink-soft);font-weight:700}

.lb-goal-note{
  margin:20px 0 0;
  font-size:.82rem;
  line-height:1.7;
  color:var(--ink-mute);
  max-width:70ch;
}

/* ── Meter ─────────────────────────────────────────────────── */
.meter{display:flex;align-items:center;gap:14px}

.meter-track{
  position:relative;
  flex:1;
  height:10px;
  border-radius:999px;
  background:rgba(var(--violet-rgb),.14);
  overflow:hidden;
}

.meter-lg .meter-track{height:15px}

.meter-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--violet) 55%,var(--magenta));
  box-shadow:0 0 18px rgba(var(--violet-rgb),.65);
  transition:width .6s cubic-bezier(.2,.8,.3,1);
}

.meter-pct{
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
  min-width:3.4ch;
  text-align:right;
}

.lb-section-title{
  font-family:'Archivo Black',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  letter-spacing:-.015em;
  margin:clamp(38px,4.6vw,58px) 0 8px;
}

.lb-section-title-spaced{margin-top:clamp(46px,5.4vw,70px)}

.lb-section-note{
  margin:0 0 22px;
  color:var(--ink-soft);
  font-size:.92rem;
  max-width:64ch;
}

/* ── Podiums ───────────────────────────────────────────────── */
.lb-podiums{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.lb-podium{
  display:grid;
  justify-items:center;
  gap:7px;
  padding:26px 18px;
  border-radius:var(--r-md);
  border:1px dashed rgba(var(--violet-rgb),.34);
  background:rgba(var(--stage-rgb),.42);
  text-align:center;
}

.lb-podium-group{
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--ink-mute);
}

.lb-podium-rank{
  font-family:'Archivo Black',Impact,sans-serif;
  font-size:1.7rem;
  line-height:1;
  color:var(--violet);
  text-shadow:0 0 18px rgba(var(--violet-rgb),.6);
}

.lb-podium-empty{
  font-size:.82rem;
  color:var(--ink-mute);
  font-style:italic;
}

/* A group with a leader on the board: solid edge, name and total. */
.lb-podium-filled{
  border-style:solid;
  border-color:var(--hairline);
  background:linear-gradient(180deg,rgba(var(--stage-hi-rgb),.6),rgba(var(--stage-rgb),.55));
}

.lb-podium-name{
  font-size:1.02rem;
  font-weight:700;
  color:var(--ink);
}

.lb-podium-units{
  font-family:'JetBrains Mono',monospace;
  font-size:.74rem;
  font-variant-numeric:tabular-nums;
  color:var(--ink-mute);
}

/* ── Partner table ─────────────────────────────────────────── */
.lb-table{
  border-radius:var(--r-md);
  border:1px solid var(--hairline);
  overflow:hidden;
}

.lb-row{
  display:grid;
  grid-template-columns:4.5rem 1fr 7.5rem 7rem;
  gap:14px;
  align-items:center;
  padding:14px 20px;
  border-bottom:1px solid rgba(var(--violet-rgb),.10);
}
.lb-row:last-child{border-bottom:0}

.lb-row-head{
  background:rgba(var(--stage-hi-rgb),.7);
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--ink-mute);
}

.lb-row-open{background:rgba(var(--stage-rgb),.42);color:var(--ink-mute)}

/* The three names that carry the board. */
.lb-row-top{background:rgba(var(--violet-rgb),.07)}
.lb-row-top .lb-col-rank{color:var(--violet)}
.lb-row-top .lb-col-name{font-weight:700;color:var(--ink)}
.lb-row-top .lb-col-units{font-weight:800}

.lb-col-rank{
  font-family:'JetBrains Mono',monospace;
  font-weight:800;
  color:var(--ink-soft);
}

.lb-row-head .lb-col-rank{color:var(--ink-mute);font-weight:700}
.lb-col-name{font-style:italic}
.lb-row-head .lb-col-name{font-style:normal}
.lb-col-units{text-align:right;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}

.lb-col-group{
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ink-mute);
}
.lb-row-head .lb-col-group{font-size:.58rem}

/* ── Show-all control ──────────────────────────────────────── */
.lb-more{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

.lb-more-caret{transition:transform .2s ease}

#lbToggle.is-open .lb-more-caret{transform:rotate(180deg)}

.lb-empty{
  margin-top:26px;
  padding:clamp(30px,4vw,48px) clamp(22px,3vw,40px);
  border-radius:var(--r-lg);
  text-align:center;
  background:linear-gradient(180deg,rgba(var(--stage-hi-rgb),.5),rgba(var(--stage-rgb),.7));
  border:1px solid var(--hairline);
}

.lb-empty-head{
  font-family:'Archivo Black',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(1.1rem,2.4vw,1.5rem);
  letter-spacing:-.015em;
  margin:0 0 10px;
}

.lb-empty-body{
  margin:0 auto 24px;
  max-width:48ch;
  color:var(--ink-soft);
  font-size:.94rem;
}

.lb-foot{
  margin:26px 0 0;
  font-size:.74rem;
  line-height:1.7;
  color:var(--ink-mute);
  max-width:76ch;
}

@media (max-width:720px){
  .lb-podiums{grid-template-columns:1fr}

  /* Too narrow for four columns — the group tucks under the name. */
  .lb-row{grid-template-columns:2.8rem 1fr 4.8rem;padding:13px 15px;gap:0 10px}
  .lb-col-rank {grid-column:1;grid-row:1/span 2;align-self:center}
  .lb-col-name {grid-column:2;grid-row:1}
  .lb-col-group{grid-column:2;grid-row:2;margin-top:3px}
  .lb-col-units{grid-column:3;grid-row:1/span 2;align-self:center}
}

/* ══ COMING SOON ═══════════════════════════════════════════════ */
.soon{
  display:grid;
  place-items:center;
  min-height:clamp(440px,68vh,660px);
}

.soon-inner{
  display:grid;
  justify-items:center;
  text-align:center;
}

.soon-title{
  font-family:'Archivo Black',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(3rem,10vw,6.5rem);
  line-height:.9;
  letter-spacing:-.03em;
  margin:26px 0 0;
  color:var(--ink);
  text-shadow:
    0 0 10px rgba(var(--sheen-rgb),.35),
    0 0 30px rgba(var(--violet-rgb),.75),
    0 0 66px rgba(var(--magenta-rgb),.45);
}

.soon-body{
  max-width:52ch;
  margin:24px 0 0;
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.72;
}

.soon-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:34px;
}

/* ══ CLOSER ════════════════════════════════════════════════════ */
.closer-inner{text-align:center;display:grid;justify-items:center}
.closer-inner .section-intro{margin-inline:auto}
.closer-cta{margin-top:32px}

/* ══ FOOTER ════════════════════════════════════════════════════ */
.site-footer{
  border-top:1px solid var(--hairline);
  padding:44px 0 60px;
  margin-top:clamp(48px,7vw,90px);
}

/* One centred column: the trademark block, then a quiet link under it.
   The link is fine print, not a call to action — it should read that way. */
.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
}

.footer-legal{
  font-size:.72rem;
  line-height:1.75;
  color:var(--ink-mute);
  max-width:92ch;
  margin:0;
  text-wrap:pretty;
}

.footer-links{display:flex;justify-content:center;gap:22px;list-style:none;margin:0;padding:0}

.footer-links a{
  font-size:.72rem;
  font-weight:500;
  color:var(--ink-mute);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:var(--hairline);
  transition:color .18s ease, text-decoration-color .18s ease;
}
.footer-links a:hover{color:var(--ink);text-decoration-color:currentColor}

/* ══ ELIGIBLE PRODUCTS ═════════════════════════════════════════ */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.sku-head{padding-bottom:0}
.sku-section{padding-top:clamp(34px,4vw,52px)}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:26px;
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink-mute);
  transition:color .18s ease;
}
.back-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.back-link:hover{color:var(--magenta)}

/* ── Controls: one row above the table ─────────────────────── */
.sku-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}

.sku-search{
  position:relative;
  flex:1 1 300px;
  max-width:420px;
}

.sku-search svg{
  position:absolute;
  left:16px;top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;
  fill:none;stroke:var(--ink-mute);
  stroke-width:2.2;stroke-linecap:round;
  pointer-events:none;
}

.sku-search input{
  width:100%;
  padding:13px 16px 13px 44px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:rgba(var(--stage-rgb),.6);
  color:var(--ink);
  font-family:'Montserrat',sans-serif;
  font-size:.88rem;
  transition:border-color .2s ease, box-shadow .24s ease;
}
.sku-search input::placeholder{color:var(--ink-mute)}
.sku-search input:focus{
  outline:none;
  border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(var(--violet-rgb),.22);
}

.sku-chips{display:flex;flex-wrap:wrap;gap:8px}

.sku-chip{
  padding:9px 16px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:rgba(var(--violet-rgb),.05);
  color:var(--ink-soft);
  font-family:'Montserrat',sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.sku-chip:hover{color:var(--ink);border-color:rgba(var(--violet-rgb),.5)}
.sku-chip.active{
  color:var(--ink);
  background:rgba(var(--violet-rgb),.18);
  border-color:var(--violet);
}

.sku-count{
  margin:0 0 14px;
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink-mute);
}

/* ── Table ─────────────────────────────────────────────────── */
.sku-table-wrap{
  overflow-x:auto;
  border-radius:var(--r-md);
  border:1px solid var(--hairline);
  background:rgba(var(--stage-rgb),.5);
}

.sku-table{
  width:100%;
  border-collapse:collapse;
  font-size:.86rem;
}

.sku-table th{
  position:sticky;
  top:0;
  z-index:1;
  text-align:left;
  padding:14px 18px;
  background:rgba(var(--stage-hi-rgb),.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--ink-mute);
  white-space:nowrap;
}

.sku-table td{
  padding:15px 18px;
  border-bottom:1px solid rgba(var(--violet-rgb),.10);
  color:var(--ink-soft);
  vertical-align:top;
}

.sku-table tr:last-child td{border-bottom:0}
.sku-table tbody tr{transition:background .16s ease}
.sku-table tbody tr:hover{background:rgba(var(--violet-rgb),.07)}

.sku-pn{
  font-family:'JetBrains Mono',monospace;
  font-size:.82rem;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
}

.sku-family{display:block;font-weight:700;color:var(--ink);white-space:nowrap}

.sku-brand{
  display:block;
  margin-top:3px;
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink-mute);
}

.sku-vpro{
  display:inline-block;
  margin-top:7px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid rgba(var(--magenta-rgb),.5);
  background:rgba(var(--magenta-rgb),.12);
  font-family:'JetBrains Mono',monospace;
  font-size:.55rem;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--magenta);
}

.sku-none{color:var(--ink-mute);font-style:italic}

.sku-empty{
  margin:26px 0 0;
  padding:34px 20px;
  text-align:center;
  border-radius:var(--r-md);
  border:1px dashed rgba(var(--violet-rgb),.34);
  color:var(--ink-soft);
}

.sku-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
  margin-top:26px;
}

.sku-note{
  flex:1 1 320px;
  margin:0;
  font-size:.74rem;
  line-height:1.7;
  color:var(--ink-mute);
}

/* Below the table's comfortable width, each row becomes a card so
   nothing depends on horizontal scrolling. */
@media (max-width:860px){
  .sku-table-wrap{border:0;background:none;overflow:visible}
  .sku-table,.sku-table tbody,.sku-table tr,.sku-table td{display:block;width:100%}
  .sku-table thead{display:none}

  .sku-table tr{
    margin-bottom:12px;
    padding:6px 4px;
    border-radius:var(--r-md);
    border:1px solid var(--hairline);
    background:rgba(var(--stage-rgb),.55);
  }

  .sku-table td{
    display:grid;
    grid-template-columns:8.5rem 1fr;
    gap:12px;
    padding:9px 14px;
    border-bottom:0;
  }

  .sku-table td::before{
    content:attr(data-label);
    font-family:'JetBrains Mono',monospace;
    font-size:.58rem;
    font-weight:700;
    letter-spacing:.06em;
    color:var(--ink-mute);
    padding-top:2px;
  }
}

@media (max-width:520px){
  .sku-table td{grid-template-columns:1fr;gap:3px}
  .sku-controls{flex-direction:column;align-items:stretch}
  .sku-search{max-width:none}
}

/* Nudge the hero heading down 2px on phones only (≤500px). */
@media (max-width:500px){
  .hero h1{font-size:1.75rem}
}

/* ══ RESPONSIVE ════════════════════════════════════════════════ */
/* Below this the rail has no room to sit beside the content, so the board
   moves above it — still ahead of the prizes, never stranded at the bottom. */
@media (max-width:1080px){
  .mws-inner{grid-template-columns:minmax(0,1fr)}
  .board-rail{position:static;order:-1;max-width:520px;margin-inline:auto;width:100%}
  .board-ghost{display:none}
}

@media (max-width:1024px){
  .tactics{grid-template-columns:1fr}
  .door-panel{grid-template-columns:1fr}
  .door-art{max-width:340px;margin-inline:auto}
}

/* Four nav items plus the CTA need this much room. Below it the labels start
   colliding with the lockup, so hand over to the hamburger here rather than
   letting the bar compress. */
@media (max-width:1040px){
  .top-nav,.top-cta{display:none}
  .hamburger{display:flex}
}

/* Stacked, the notch would point at the strip's own middle rather than
   at the panel, so the lit tab carries the connection on its own. */
@media (max-width:900px){
  .doors{grid-template-columns:1fr}
  .door-tab{padding:13px 16px}
  .door-tab.active::after{display:none}
  .door-tab.active .door-chevron{transform:rotate(90deg)}
}

@media (max-width:560px){
  .rail{padding-inline:20px}
  .cd-digits{gap:2px}
  .cd-seg{min-width:44px}
  .cd-sep{display:none}
  .goal-row{grid-template-columns:1fr}
  .goal{
    display:flex;
    align-items:baseline;
    gap:10px;
  }
  .goal-group{flex:1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}