/* ═══════════════════════════════════════════════════════════════
   CardFrame — "Scan Bay"
   A cinematic dark scanner bay: gold corner-brackets, a cyan beam,
   a holographic sheen. Straight off the app icon.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── brand palette (from the app icon) ── */
  --ink-900:#060B14;   /* page background — near-black navy */
  --ink-800:#0A1220;   /* alt background */
  --ink-700:#101A2B;   /* card / surface */
  --ink-600:#1A2740;   /* border / raised surface */
  --gold:#E8B45C;      /* primary accent — the frame */
  --gold-hi:#FFD98A;   /* gold highlight */
  --gold-lo:#B8862F;   /* gold shadow */
  --cyan:#35E0F5;      /* secondary accent — the scan beam */
  --cyan-dim:#22D3EE;
  --text:#F2F6FB;      /* primary text */
  --muted:#93A3B8;     /* secondary text */
  --green:#34D399;     /* positive deltas only */

  /* ── derived surfaces & rules ── */
  --on-gold:#0A0F19;                    /* text on a gold fill */
  --hair:rgba(232,180,92,.26);          /* gold hairline */
  --hair-soft:rgba(232,180,92,.14);     /* gold hairline, quiet */
  --line:rgba(255,255,255,.08);         /* neutral hairline */
  --glass:rgba(255,255,255,.045);
  --well:rgba(6,11,20,.62);             /* inset well inside a card */

  /* ── type ── */
  --font-s:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-m:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── metrics ── */
  --wrap:1200px;
  --pad:clamp(20px, 5vw, 48px);
  --r:18px;
  --ease:cubic-bezier(.2,.7,.25,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  background:var(--ink-900);
  color:var(--text);
  font-family:var(--font-s);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:800;letter-spacing:-.028em;line-height:1.05}
strong,b{color:var(--text);font-weight:700}
em{font-style:normal;color:var(--gold-hi);font-weight:500}
ul,ol{list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:880px}

.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;
}

/* mono is reserved for labels, numbers and captions — never for prose */
.mono{
  font-family:var(--font-m);font-size:.86em;letter-spacing:-.02em;
  color:var(--text);background:var(--glass);
  border:1px solid var(--line);border-radius:6px;
  padding:.1em .4em;white-space:nowrap;
}
.mono--gold{color:var(--gold-hi);background:rgba(232,180,92,.09);border-color:var(--hair)}
.gold-word{color:var(--gold-hi)}

/* ── a11y ── */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--gold);color:var(--on-gold);
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;
}
.skip-link:focus{left:0}
/* the outline already follows each component's own border-radius — never restate it here,
   or a bare (0,1,0) selector re-rounds every focused element (the skip link included) */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* the skip link's target is programmatically focusable; it must not paint a ring on click */
main:focus{outline:none}

/* ═══════════ SHARED: CORNER BRACKETS ═══════════
   Crisp gold L-brackets. No bloom, no outer glow — the motif works
   sober, and a halo turns the near-black navy orange. */
.brk{
  position:absolute;width:46px;height:46px;
  border:1.5px solid var(--gold);
  opacity:.9;
  pointer-events:none;
}
.brk--tl{top:0;left:0;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.brk--tr{top:0;right:0;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.brk--bl{bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 10px}
.brk--br{bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 10px 0}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;letter-spacing:-.01em;
  white-space:nowrap;
  min-height:44px;                 /* minimum tap target — the label stays optically centred */
  padding:11px 18px;border-radius:11px;
  border:1px solid transparent;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.btn--gold{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 58%,var(--gold-lo));
  color:var(--on-gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 24px -12px rgba(232,180,92,.7);
}
.btn--gold:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px -12px rgba(232,180,92,.85);
}
.btn--sm{padding:9px 16px;font-size:14px;border-radius:10px}

/* ═══════════ NAV ═══════════ */
.nav{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav.is-stuck{
  background:rgba(6,11,20,.88);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-bottom-color:var(--hair-soft);
}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:14px var(--pad);
  display:flex;align-items:center;gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__icon{
  width:34px;height:34px;border-radius:9px;
  box-shadow:0 0 0 1px var(--hair);
}
.brand__name{font-weight:700;font-size:18px;letter-spacing:-.02em}

.nav__links{display:flex;gap:4px;margin-left:auto}
.nav__links a{
  padding:8px 14px;border-radius:9px;
  color:var(--muted);font-size:15px;font-weight:500;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav__links a:hover{color:var(--text);background:var(--glass)}

.nav__right{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav__links + .nav__right{margin-left:0}

/* hamburger — mobile disclosure. The only route to the nav links below 900px,
   so it holds the 44px tap target at every width. */
.burger{
  display:none;
  width:44px;height:44px;flex:0 0 auto;
  align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  background:var(--glass);
  border:1px solid var(--ink-600);
  border-radius:10px;cursor:pointer;
}
.burger span{
  display:block;width:16px;height:1.5px;border-radius:2px;
  background:var(--text);
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mobilemenu{
  display:flex;flex-direction:column;
  padding:8px var(--pad) 18px;
  background:rgba(6,11,20,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--hair-soft);
  border-bottom:1px solid var(--hair-soft);
}
.mobilemenu[hidden]{display:none}
.mobilemenu a{
  padding:14px 2px;
  color:var(--text);font-size:16px;font-weight:600;
  border-bottom:1px solid var(--line);
}
.mobilemenu a:last-child{border-bottom:0}

/* ═══════════ STORE BUTTONS ═══════════ */
.stores{display:flex;flex-wrap:wrap;gap:14px}
.stores--center{justify-content:center;margin-top:32px}
.store{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:12px;
  padding:11px 22px 11px 18px;border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px -16px rgba(0,0,0,.9);
  transition:transform .2s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.store:hover{
  transform:translateY(-2px);
  border-color:var(--hair);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 16px 34px -18px rgba(0,0,0,1);
}
.store__glyph{width:24px;height:24px;object-fit:contain;flex:0 0 auto}
.store__glyph--play{width:22px;height:22px}
.store__txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store__txt small{
  font-family:var(--font-m);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.store__txt strong{font-size:17px;font-weight:700;letter-spacing:-.015em;color:#fff}

/* the primary: a gold-filled App Store button — the one thing that converts */
.store--gold{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 58%,var(--gold-lo));
  border-color:rgba(255,217,138,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 12px 30px -14px rgba(232,180,92,.75);
}
.store--gold:hover{
  border-color:var(--gold-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 18px 38px -16px rgba(232,180,92,.9);
}
.store--gold .store__glyph--apple{filter:brightness(0)}
.store--gold .store__txt small{color:rgba(10,15,25,.68)}
.store--gold .store__txt strong{color:var(--on-gold)}

.microcopy{margin-top:18px;color:var(--muted);font-size:13.5px}
.microcopy--center{text-align:center;margin-top:20px}

/* ═══════════ EYEBROW ═══════════ */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-m);font-weight:500;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-hi);
  background:rgba(232,180,92,.07);
  border:1px solid var(--hair);
  border-radius:999px;
  padding:7px 15px 7px 12px;
  margin-bottom:26px;
}
.eyebrow__dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(53,224,245,.85);
}
.motion .eyebrow__dot{animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;isolation:isolate;overflow:clip;
  padding:clamp(32px,4.4vw,58px) 0 clamp(44px,5vw,68px);
}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(160,190,230,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(160,190,230,.07) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 76% 62% at 68% 46%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 76% 62% at 68% 46%, #000 10%, transparent 72%);
}
.hero__glow{position:absolute;border-radius:50%}
/* restrained gold — enough to light the bay, never enough to read orange */
.hero__glow--gold{
  width:min(880px,104vw);height:min(760px,92vw);
  right:-6%;top:-16%;
  background:radial-gradient(circle at 50% 50%,
    rgba(232,180,92,.20) 0%,
    rgba(232,180,92,.11) 34%,
    rgba(232,180,92,.04) 56%,
    rgba(232,180,92,0) 74%);
}
.hero__glow--cyan{
  width:min(820px,100vw);height:min(420px,58vw);
  right:-4%;top:34%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(53,224,245,.22), rgba(53,224,245,.07) 42%, rgba(53,224,245,0) 72%);
}
.hero__vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 95% 78% at 58% 44%, transparent 34%, rgba(6,11,20,.85) 100%);
}
.hero__inner{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,4vw,64px);align-items:center;
}
.hero h1{
  font-size:clamp(40px,5.4vw,74px);
  margin-bottom:22px;
}
.lede{
  color:var(--muted);
  font-size:clamp(16px,1.2vw,18px);line-height:1.6;
  max-width:50ch;margin-bottom:32px;
}

/* ── the scan bay ── */
.bay{
  position:relative;justify-self:center;
  width:100%;max-width:412px;
  aspect-ratio:412/562;
  display:grid;place-items:center;
  isolation:isolate;
}
.bay::before{ /* volumetric light pooled in the bay */
  content:"";position:absolute;z-index:0;
  left:50%;top:52%;transform:translate(-50%,-50%);
  width:120%;height:96%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(232,180,92,.24) 0%, rgba(232,180,92,.10) 38%, rgba(232,180,92,0) 70%);
  pointer-events:none;
}
.bay::after{ /* cyan light bar at beam height */
  content:"";position:absolute;z-index:0;
  left:-12%;right:-12%;top:36%;height:26%;
  background:radial-gradient(ellipse at 50% 50%, rgba(53,224,245,.22), rgba(53,224,245,0) 70%);
  pointer-events:none;
}
.bay__frame{position:absolute;inset:0;z-index:3;pointer-events:none}
.bay__stage{
  position:relative;z-index:2;width:64%;
  transition:transform .35s var(--ease);
}
.bay__phone{
  width:100%;height:auto;
  filter:drop-shadow(0 38px 56px rgba(0,0,0,.7));
}
.bay__sheen{ /* subtle holographic sheen — on the surface, never in the type */
  position:absolute;inset:2% 4%;border-radius:34px;
  background:linear-gradient(115deg,
    transparent 26%,
    rgba(120,140,255,.10) 40%,
    rgba(53,224,245,.13) 50%,
    rgba(232,180,92,.10) 60%,
    transparent 74%);
  mix-blend-mode:screen;opacity:.45;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.bay:hover .bay__sheen{opacity:.9;transform:translateX(3%)}

.bay__beam{
  position:absolute;left:-14%;right:-14%;top:47%;height:2px;
  background:linear-gradient(90deg,
    rgba(53,224,245,0) 0%, rgba(53,224,245,.85) 18%,
    #CFFAFE 50%, rgba(53,224,245,.85) 82%, rgba(53,224,245,0) 100%);
  box-shadow:0 0 16px 2px rgba(53,224,245,.6);
  mix-blend-mode:screen;pointer-events:none;
}
.motion .bay__beam{animation:sweep 4.8s cubic-bezier(.55,0,.45,1) infinite}
@keyframes sweep{
  0%  {top:-1%;opacity:0}
  8%  {opacity:1}
  50% {top:100%;opacity:1}
  58% {top:100%;opacity:0}
  100%{top:-1%;opacity:0}
}

/* HUD chips — pinned off the device edges, each with a hairline leader
   running back into the phone (a's chips × d's leader-line annotation) */
.hud{
  position:absolute;z-index:4;
  display:flex;flex-direction:column;gap:2px;
  padding:10px 14px;border-radius:12px;
  background:rgba(10,18,32,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--hair);
  box-shadow:0 16px 40px -20px #000;
}
.motion .hud{animation:float 6.5s ease-in-out infinite}
/* the offset has to ride behind the same `.motion` gate — the `animation` shorthand above
   resets animation-delay, and it out-specifies a bare `.hud--price` */
.motion .hud--price{animation-delay:-3.2s}
.hud::after{
  content:"";position:absolute;top:50%;height:1px;width:34px;
}
.hud__label{
  font-family:var(--font-m);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.hud__value{font-weight:700;font-size:14px;white-space:nowrap;letter-spacing:-.01em}
.hud__value--gold{
  font-family:var(--font-m);font-weight:700;
  color:var(--gold-hi);font-size:19px;letter-spacing:-.02em;
}
.hud--id{left:-4%;top:16%}
.hud--id::after{left:100%;background:linear-gradient(90deg,var(--hair),rgba(53,224,245,.7))}
.hud--price{right:-4%;bottom:22%}
.hud--price::after{right:100%;background:linear-gradient(90deg,var(--gold),var(--hair))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ═══════════ LEDGER (stat strip) ═══════════
   A data sheet, not a bordered card. Gold hairlines, mono labels. */
.ledger{
  padding:clamp(28px,3.4vw,42px) 0 clamp(26px,3.4vw,40px);
  border-top:1px solid var(--hair-soft);
  border-bottom:1px solid var(--hair-soft);
  background:linear-gradient(180deg,rgba(16,26,43,.42),rgba(6,11,20,0));
}
.ledger__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
/* the label owns the free space so the numbers sit on one baseline even when a
   label wraps to two lines (it does, between 861px and ~1030px) */
.ledger__cell{
  display:grid;grid-template-rows:1fr auto;
  padding:26px 26px 24px;
  border-left:1px solid var(--hair-soft);
  min-width:0;
}
.ledger__cell:first-child{border-left:0;padding-left:0}
.ledger__label{
  font-family:var(--font-m);font-weight:500;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
}
.ledger__num{
  font-weight:800;font-size:clamp(30px,3.1vw,40px);
  letter-spacing:-.04em;line-height:1;
  color:var(--gold-hi);
  font-variant-numeric:tabular-nums;
}
.ledger__num em{font-style:normal;color:var(--gold);font-size:.68em}
.ledger__num--live{
  display:flex;align-items:center;gap:11px;
  color:var(--cyan);
}
.dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--cyan);
  box-shadow:0 0 0 0 rgba(53,224,245,.55);
}
.motion .dot{animation:ping 2.2s ease-out infinite}
@keyframes ping{
  0%  {box-shadow:0 0 0 0 rgba(53,224,245,.55)}
  70% {box-shadow:0 0 0 10px rgba(53,224,245,0)}
  100%{box-shadow:0 0 0 0 rgba(53,224,245,0)}
}

/* recognition chips — a collector converts on seeing their game named */
.games{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.games__label{
  font-family:var(--font-m);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.games__list{display:flex;flex-wrap:wrap;gap:8px}
.games__list li{
  font-size:13.5px;font-weight:500;color:var(--text);
  padding:6px 13px;border-radius:999px;
  border:1px solid var(--ink-600);
  background:var(--glass);
}
.games__list .games__more{
  color:var(--gold-hi);
  border-color:var(--hair);
  background:rgba(232,180,92,.07);
}

/* ═══════════ SECTIONS ═══════════ */
.section{padding:clamp(64px,8vw,108px) 0;position:relative}
.section--alt{
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(53,224,245,.05), transparent 70%),
    var(--ink-800);
  border-block:1px solid var(--hair-soft);
}
.sect-head{max-width:700px;margin-bottom:clamp(36px,4.5vw,58px)}
.sect-head h2{font-size:clamp(31px,4vw,50px);margin-bottom:18px}
.sect-sub{color:var(--muted);font-size:17px;max-width:56ch}

/* ═══════════ BENTO ═══════════ */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.card{
  grid-column:span 2;
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-700),rgba(10,18,32,.85));
  border:1px solid var(--ink-600);
  border-radius:var(--r);
  padding:28px;
  display:flex;flex-direction:column;gap:22px;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.card--wide{grid-column:span 3}
.card::after{ /* crisp gold brackets on hover — no bloom */
  content:"";position:absolute;inset:10px;pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) left 0 top 0/20px 1.5px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 0 top 0/1.5px 20px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 top 0/20px 1.5px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 top 0/1.5px 20px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 0 bottom 0/20px 1.5px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 0 bottom 0/1.5px 20px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 bottom 0/20px 1.5px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 bottom 0/1.5px 20px no-repeat;
  opacity:0;transform:scale(1.02);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--hair);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95);
}
.card:hover::after{opacity:.9;transform:scale(1)}
.card__body{position:relative;z-index:1}
.card__kicker{
  display:inline-block;
  font-family:var(--font-m);font-weight:500;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:14px;
}
.card h3{font-size:clamp(20px,1.7vw,24px);margin-bottom:12px;line-height:1.2}
.card p{color:var(--muted);font-size:15.5px;line-height:1.6}
.kicker-line{
  font-family:var(--font-m);font-weight:500;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);
  padding-top:16px;border-top:1px solid var(--hair-soft);
}

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

/* binder-page grid (3 × 2 = the six cards), with the cyan scanline sweeping it */
.card__art--grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  width:100%;max-width:330px;
  padding:14px;border-radius:12px;
  background:var(--well);
  border:1px solid var(--line);
  overflow:hidden;
}
.mini{
  position:relative;
  aspect-ratio:5/7;border-radius:5px;
  background:linear-gradient(160deg,rgba(53,224,245,.14),rgba(232,180,92,.10));
  border:1.5px solid rgba(52,211,153,.55);
}
.mini::after{
  content:"";position:absolute;top:-5px;right:-5px;
  width:12px;height:12px;border-radius:50%;
  background:var(--gold);
}
.card__scanline{
  position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 12px 1px rgba(53,224,245,.6);
}
.motion .card__scanline{animation:sweep-sm 3.6s ease-in-out infinite}
@keyframes sweep-sm{
  0%  {top:4%;opacity:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{top:94%;opacity:0}
}

/* the variant table */
.card__art--variants{
  display:flex;flex-direction:column;gap:8px;
  padding:14px;border-radius:12px;
  background:var(--well);
  border:1px solid var(--line);
}
.vrow{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:9px;
  background:var(--glass);
  border:1px solid transparent;
  font-family:var(--font-m);font-size:13.5px;
}
.vrow--on{border-color:var(--hair);background:rgba(232,180,92,.09)}
.vrow__tick{
  width:15px;height:15px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid rgba(255,255,255,.22);
}
.vrow__tick--on{
  position:relative;
  border-color:var(--gold);background:var(--gold);
}
.vrow__tick--on::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--ink-800);border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.vrow__name{color:var(--muted);flex:1 1 auto}
.vrow--on .vrow__name{color:var(--text)}
.vrow__price{color:var(--muted)}
.vrow__price--gold{color:var(--gold-hi);font-weight:700;font-size:15px}

/* the sparkline */
.card__art--chart{
  position:relative;
  padding:14px;border-radius:12px;
  background:var(--well);
  border:1px solid var(--line);
}
.card__art--chart svg{width:100%;height:64px;display:block}
.chart__chip{
  position:absolute;top:12px;left:12px;
  font-family:var(--font-m);font-size:11.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--green);
  background:rgba(52,211,153,.10);
  border:1px solid rgba(52,211,153,.3);
  border-radius:999px;padding:4px 9px;
}
.ranges{display:flex;gap:6px;margin-top:10px}
.ranges i{
  flex:1 1 0;text-align:center;
  font-family:var(--font-m);font-style:normal;
  font-size:11.5px;letter-spacing:.05em;
  color:var(--muted);
  padding:5px 0;border-radius:6px;
  border:1px solid var(--line);
}
.ranges i.on{
  color:var(--gold-hi);
  border-color:var(--hair);
  background:rgba(232,180,92,.09);
}

/* search tiles */
.card__art--search{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:14px;border-radius:12px;
  background:var(--well);
  border:1px solid var(--line);
}
.tile{
  position:relative;overflow:hidden;
  aspect-ratio:5/7;border-radius:6px;
  background:linear-gradient(155deg,rgba(53,224,245,.13),rgba(232,180,92,.09));
  border:1px solid var(--line);
}
.tile::after{
  content:"";position:absolute;left:5px;bottom:5px;
  height:5px;border-radius:3px;width:70%;
  background:rgba(232,180,92,.6);
}
.tile:nth-child(2)::after{width:52%}
.tile:nth-child(3)::after{width:78%}
.tile:nth-child(4)::after{width:44%}

/* fanned card outlines */
.card__art--stack{
  position:relative;height:124px;
  display:flex;align-items:center;justify-content:center;
}
.stack-card{
  position:absolute;width:78px;aspect-ratio:5/7;border-radius:8px;
  border:1.5px solid var(--gold);
  background:linear-gradient(150deg,rgba(232,180,92,.14),rgba(53,224,245,.09));
  transition:transform .45s var(--ease);
}
.stack-card:nth-child(1){transform:translateX(-62px) rotate(-11deg);opacity:.5}
.stack-card:nth-child(2){transform:translateX(0) rotate(0);z-index:2}
.stack-card:nth-child(3){transform:translateX(62px) rotate(11deg);opacity:.5}
.card:hover .stack-card:nth-child(1){transform:translateX(-78px) rotate(-16deg)}
.card:hover .stack-card:nth-child(3){transform:translateX(78px) rotate(16deg)}

/* ═══════════ STEPS ═══════════ */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--hair-soft);
  border-radius:var(--r);
  overflow:hidden;
  background:rgba(6,11,20,.45);
}
.step{
  position:relative;
  padding:clamp(26px,3vw,40px);
  border-right:1px solid var(--hair-soft);
}
.step:last-child{border-right:0}
.step::before{
  content:"";position:absolute;left:0;top:0;height:1.5px;width:100%;
  background:linear-gradient(90deg,var(--gold),rgba(232,180,92,0));
  opacity:.55;
}
.step__num{
  display:block;
  font-family:var(--font-m);font-weight:700;
  font-size:13px;letter-spacing:.2em;
  color:var(--gold);margin-bottom:20px;
}
.step h3{font-size:clamp(21px,1.8vw,26px);margin-bottom:12px}
.step p{color:var(--muted);font-size:15.5px}

/* ═══════════ SHOWCASE (zig-zag) ═══════════ */
.showcase{display:flex;flex-direction:column;gap:clamp(56px,7vw,96px)}
.show{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.show--flip .show__phone{order:2}
.show--flip .show__copy{order:1}
.show__phone{display:flex;justify-content:center;min-width:0}

.minibay{
  position:relative;
  width:100%;max-width:288px;
  padding:32px 26px;
  display:grid;place-items:center;
}
.minibay::before{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:112%;height:80%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(232,180,92,.16), rgba(53,224,245,.06) 46%, transparent 72%);
}
.minibay .brk{width:34px;height:34px}
.minibay img{
  position:relative;
  width:100%;height:auto;
  filter:drop-shadow(0 28px 44px rgba(0,0,0,.7));
  transition:transform .5s var(--ease);
}
.minibay:hover img{transform:translateY(-8px)}
.minibay__sheen{
  position:absolute;inset:36px 30px;border-radius:28px;
  background:linear-gradient(115deg,
    transparent 28%, rgba(120,140,255,.10) 40%,
    rgba(53,224,245,.14) 50%, rgba(232,180,92,.10) 60%, transparent 74%);
  mix-blend-mode:screen;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease);
}
.minibay:hover .minibay__sheen{opacity:1}

/* A letterspaced mono label sitting in the OUTER page margin, with a gold
   hairline running from it into the device. Never encroaches on the copy. */
.leader{
  position:absolute;top:36%;
  display:none;align-items:center;gap:9px;
  font-family:var(--font-m);font-weight:500;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.leader::after{
  content:"";display:block;height:1px;width:30px;flex:0 0 auto;
}
/* label sits left of the device, rule runs right into it */
.leader--l{right:calc(100% - 12px)}
.leader--l::after{background:linear-gradient(90deg,var(--hair-soft),var(--gold))}
/* label sits right of the device, rule runs left into it */
.leader--r{left:calc(100% - 12px);flex-direction:row-reverse}
.leader--r::after{background:linear-gradient(90deg,var(--gold),var(--hair-soft))}

.show__copy{min-width:0}
.show__copy h3{font-size:clamp(26px,3vw,38px);margin-bottom:16px}
.show__copy p{color:var(--muted);font-size:17px;max-width:46ch}

/* spec rows — bolded key term + muted qualifier, on gold hairlines */
.specs{margin-top:28px;max-width:46ch}
.specs li{
  padding:13px 0;
  border-top:1px solid var(--hair-soft);
  color:var(--muted);font-size:15.5px;line-height:1.5;
}
.specs li:last-child{border-bottom:1px solid var(--hair-soft)}

/* ═══════════ FAQ ═══════════ */
/* the FAQ keeps the page's left rag — it is a narrower measure, not a centred one */
.faq{display:flex;flex-direction:column;gap:12px;max-width:880px}
.qa{
  border:1px solid var(--ink-600);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(16,26,43,.9),rgba(10,18,32,.7));
  overflow:hidden;
  transition:border-color .25s var(--ease);
}
.qa[open]{border-color:var(--hair)}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:19px 22px;
  font-weight:600;font-size:17px;letter-spacing:-.012em;
  transition:color .2s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold-hi)}
/* .qa is overflow:hidden, so a ring drawn OUTSIDE the summary would be clipped away
   entirely — draw it inside the clip box instead */
.qa summary:focus-visible{outline-offset:-3px;border-radius:14px}
.qa__sign{position:relative;flex:0 0 auto;width:20px;height:20px}
.qa__sign::before,.qa__sign::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--gold);border-radius:2px;
  transform:translate(-50%,-50%);
}
.qa__sign::before{width:13px;height:1.5px}
.qa__sign::after{width:1.5px;height:13px;transition:opacity .2s var(--ease),transform .3s var(--ease)}
/* open state reads as a minus, not a rotated bar */
.qa[open] .qa__sign::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.qa__body{padding:0 22px 22px;max-width:70ch}
.qa__body p{color:var(--muted);font-size:16px;line-height:1.65}

/* ═══════════ FINAL CTA ═══════════ */
.cta{padding:clamp(64px,8vw,108px) 0;position:relative;overflow:clip}
.cta::before{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(1100px,130vw);height:min(680px,100vw);
  background:radial-gradient(ellipse at 50% 50%,
    rgba(232,180,92,.13), rgba(53,224,245,.05) 46%, transparent 70%);
  pointer-events:none;
}
.cta__bay{
  position:relative;text-align:center;
  padding:clamp(46px,6vw,74px) clamp(24px,5vw,64px);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(16,26,43,.92),rgba(6,11,20,.92));
  border:1px solid var(--ink-600);
  box-shadow:0 40px 100px -50px #000, inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;isolation:isolate;
}
.cta__bay .brk{width:40px;height:40px;margin:16px}
.cta__beam{
  position:absolute;left:0;right:0;top:0;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(53,224,245,.9),transparent);
  box-shadow:0 0 16px 2px rgba(53,224,245,.5);
  mix-blend-mode:screen;opacity:.9;
}
.motion .cta__beam{animation:sweep-cta 6.4s cubic-bezier(.55,0,.45,1) infinite}
@keyframes sweep-cta{
  0%  {top:0;opacity:0}
  6%  {opacity:1}
  50% {top:100%;opacity:1}
  56% {top:100%;opacity:0}
  100%{top:0;opacity:0}
}
.cta__icon{
  width:88px;height:88px;border-radius:22px;margin:0 auto 26px;
  box-shadow:0 0 0 1px var(--hair), 0 24px 50px -26px rgba(0,0,0,.9);
}
.cta__bay h2{font-size:clamp(30px,3.9vw,50px);margin-bottom:16px}
.cta__bay > p{color:var(--muted);font-size:17px;max-width:48ch;margin-inline:auto}

/* ═══════════ FOOTER ═══════════ */
.footer{
  border-top:1px solid var(--hair-soft);
  background:var(--ink-800);
  padding:clamp(44px,5.5vw,68px) 0 32px;
}
.footer__inner{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:42px;
}
.footer__brand .brand{margin-bottom:16px}
.footer__tag{color:var(--muted);font-size:15px;max-width:34ch}
/* the anchors carry their own padding instead of a gap, so each link is a real
   44px target — these are the only routes to privacy.html and terms.html */
.footer__col{display:flex;flex-direction:column;gap:2px}
.footer__h{
  font-family:var(--font-m);font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:4px;
}
.footer__col a{color:var(--muted);font-size:15px;padding:10px 0;transition:color .2s var(--ease)}
.footer__col a:hover{color:var(--gold-hi)}
.footer__base{
  border-top:1px solid var(--line);
  padding-top:26px;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:28px;flex-wrap:wrap;
}
.footer__disclaimer{color:var(--muted);font-size:13px;line-height:1.6;max-width:74ch}
.footer__copy{color:var(--muted);font-size:13px;white-space:nowrap}

/* ═══════════ STICKY MOBILE STORE BAR ═══════════
   Visible on mobile with or without JS; JS only lets it slide away
   while the hero's own buttons are still on screen. */
.dockbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  align-items:center;gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(6,11,20,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--hair);
  transition:transform .35s var(--ease);
}
.dockbar__txt{
  font-family:var(--font-m);font-weight:500;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto;
}
.dockbar__btns{display:flex;gap:8px;margin-left:auto;flex:0 1 auto;min-width:0}
.dock{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;                 /* the primary conversion control on phones */
  padding:10px 13px;border-radius:10px;
  font-size:13.5px;font-weight:700;letter-spacing:-.01em;
  border:1px solid var(--line);
  background:var(--glass);
  color:var(--text);
  white-space:nowrap;
}
.dock img{width:16px;height:16px;object-fit:contain;flex:0 0 auto}
.dock:not(.dock--play){
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 58%,var(--gold-lo));
  border-color:rgba(255,217,138,.5);
  color:var(--on-gold);
}
.dock:not(.dock--play) img{filter:brightness(0)}
/* with JS the dock waits until the hero's own buttons are gone; without JS it just stays put */
.js .dockbar{transform:translateY(115%)}
.js .dockbar.is-up{transform:translateY(0)}

/* ═══════════ REVEAL ═══════════
   Only ever hidden when motion is allowed AND JS is running, so a script
   failure can never take the h1 or the store buttons off the page. */
.motion .reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.motion .reveal.is-in{opacity:1;transform:none}

/* ═══════════ LEGAL PAGES (privacy.html / terms.html) ═══════════ */
.legal-page{
  max-width:820px;margin-inline:auto;
  padding:clamp(48px,7vw,88px) var(--pad) clamp(64px,8vw,104px);
}
.legal-header{
  padding-bottom:28px;margin-bottom:40px;
  border-bottom:1px solid var(--hair);
}
.legal-header h1{
  font-size:clamp(32px,4.6vw,54px);
  margin-bottom:14px;
}
.legal-header .last-updated{
  font-family:var(--font-m);font-weight:500;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);
}
.legal-body{
  /* the two halves of the body line box, kept as variables so the mono list
     markers can reconstruct it exactly (see ol > li::before) */
  --legal-size:16.5px;
  --legal-lh:1.75;
  color:var(--muted);
  font-size:var(--legal-size);
  line-height:var(--legal-lh);
}
.legal-body h2{
  font-size:clamp(22px,2.4vw,28px);
  color:var(--text);
  margin:44px 0 14px;
  padding-top:22px;
  border-top:1px solid var(--hair-soft);
}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body h3{
  font-size:18px;font-weight:700;
  color:var(--text);
  margin:28px 0 10px;
}
.legal-body p{margin-bottom:16px}
.legal-body ul,.legal-body ol{margin:0 0 18px;padding-left:0}
.legal-body li{
  position:relative;
  padding:0 0 0 34px;margin-bottom:9px;
}
.legal-body ul > li::before{
  content:"";position:absolute;left:2px;top:.65em;
  width:6px;height:6px;border-radius:1px;
  background:var(--gold);
}
.legal-body ol{counter-reset:legal}
.legal-body ol > li{counter-increment:legal}
/* the marker gets its own right-aligned column (so "10." never collides with the text)
   and rebuilds the li's line box in px — a unitless line-height would inherit as a
   *ratio* and give the 13px mono a short box, floating every number above the baseline */
.legal-body ol > li::before{
  content:counter(legal) ".";
  position:absolute;left:0;top:0;
  width:26px;text-align:right;
  font-family:var(--font-m);font-size:13px;
  line-height:calc(var(--legal-size) * var(--legal-lh));
  color:var(--gold);
}
.legal-body strong{color:var(--text)}
.legal-body a{
  color:var(--gold-hi);
  text-decoration:underline;
  text-decoration-color:var(--hair);
  text-underline-offset:3px;
  transition:text-decoration-color .2s var(--ease);
}
.legal-body a:hover{text-decoration-color:var(--gold-hi)}
.legal-body hr{
  border:0;height:1px;
  background:var(--hair-soft);
  margin:40px 0;
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:clamp(40px,6vw,56px)}
  .hero__copy{max-width:640px}
  .bay{max-width:400px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .card{grid-column:span 1}
  .card--wide{grid-column:span 2}
  .footer__inner{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .footer__brand{grid-column:1/-1}
}

/* the two-column bento band only: card 05 would otherwise sit alone in a
   half-width cell on the last row. Kept out of the ≤640px single-column grid,
   where a span-2 would out-specify `.card` and invent a second column. */
@media (min-width:641px) and (max-width:1080px){
  .bento .card:last-child{grid-column:span 2}
}

@media (min-width:1181px){
  .leader{display:flex}
}

@media (max-width:900px){
  .nav__links{display:none}
  .burger{display:flex}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--hair-soft)}
  .step:last-child{border-bottom:0}
  /* the zig-zag keeps its rag on mobile: phone above, copy left-aligned below */
  .show,.show--flip{grid-template-columns:1fr;gap:32px}
  .show--flip .show__phone{order:0}
  .show--flip .show__copy{order:0}
  .show__copy p,.specs{max-width:none}
}

@media (max-width:860px){
  .ledger__grid{grid-template-columns:1fr}
  .ledger__cell{
    display:flex;align-items:baseline;justify-content:space-between;gap:18px;
    padding:16px 0;
    border-left:0;
    border-top:1px solid var(--hair-soft);
  }
  .ledger__cell:first-child{border-top:0}
  .ledger__label{margin-bottom:0}
  .ledger__num{font-size:26px}
  .dockbar{display:flex}
  /* only reserve room for the dock on pages that actually render it —
     privacy.html and terms.html share this stylesheet and have no dock */
  body:has(.dockbar){padding-bottom:74px}
}

@media (max-width:640px){
  body{font-size:16px}
  .hero{padding-top:20px;padding-bottom:40px}
  .eyebrow{margin-bottom:18px;font-size:11px;padding:6px 13px 6px 11px}
  .hero h1{margin-bottom:16px}
  .lede{margin-bottom:26px;font-size:16.5px}

  /* page economy: the editorial rhythm survives a tighter measure */
  .section{padding:56px 0}
  .sect-head{margin-bottom:30px}
  .bento{grid-template-columns:1fr;gap:14px}
  .card,.card--wide{grid-column:span 1}
  .card{padding:22px;gap:18px}
  .card__art--grid{padding:12px;gap:8px}
  .card__art--stack{height:104px}
  .step{padding:24px}
  .showcase{gap:44px}
  .show,.show--flip{gap:26px}
  .minibay{max-width:252px;padding:26px 20px}
  .specs{margin-top:22px}
  .specs li{padding:11px 0}
  .cta{padding:56px 0}
  .footer{padding-top:40px}
  .bay{max-width:340px;aspect-ratio:340/470}
  .bay__stage{width:66%}
  .brk{width:36px;height:36px}
  .hud{padding:8px 12px}
  .hud::after{display:none}
  .hud__value{font-size:12.5px}
  .hud__value--gold{font-size:17px}
  .hud--id{left:-2%;top:12%}
  .hud--price{right:-2%;bottom:16%}
  .games{gap:12px}
  .footer__inner{grid-template-columns:1fr 1fr;gap:28px;padding-bottom:32px}
  .footer__base{flex-direction:column;gap:14px}
  .cta__bay .brk{margin:10px;width:30px;height:30px}
  .qa summary{font-size:16px;padding:17px 18px}
  .qa__body{padding:0 18px 18px}
  .dockbar__txt{display:none}
  .dockbar__btns{margin-inline:auto;width:100%}
  .dock{flex:1 1 0;justify-content:center}
}

@media (max-width:400px){
  /* the nav CTA stays visible at every breakpoint — it just gets tighter.
     The burger keeps its 44px target, so the row buys its width back from the gaps. */
  .nav__inner{gap:8px;padding-inline:16px}
  .nav__right{gap:8px}
  .btn--sm{padding:8px 12px;font-size:13.5px}
  .stores{flex-direction:column;align-items:stretch}
  .store{width:100%;justify-content:center}
  .stores--center .store{justify-content:center}
  .bay{max-width:300px}
  .hud--id{display:none}
}

@media (max-width:340px){
  /* the smallest phones: buy back the width the 44px burger needs, without
     dropping the CTA or the wordmark */
  .nav__inner{padding-inline:14px}
  .brand__name{font-size:16px}
  .btn--sm{padding:8px 11px}
}

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