/* Save Slot — saveslot.co
 * "Midnight Cartridge", transcribed from mobile/constants/Design.ts.
 * Amber is the only saturated accent; green is the cartridge LED, in micro doses.
 * No purple-blue gradients, no glassmorphism, no neon glow, no stock icon grids.
 */

@font-face { font-family: Bungee; src: url(fonts/bungee.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url(fonts/pressstart2p.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Outfit; font-weight: 300; src: url(fonts/outfit-300.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Outfit; font-weight: 400; src: url(fonts/outfit-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Outfit; font-weight: 600; src: url(fonts/outfit-600.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Outfit; font-weight: 700; src: url(fonts/outfit-700.woff2) format("woff2"); font-display: swap; }

:root {
  --bg: #1A1512;
  --elev: #241D18;
  --shelf: #2E2318;
  --amber: #F59E0B;
  --amber-dim: #92580F;
  --led: #4ADE80;
  --text: #F5EFE6;
  --text2: #A89E92;
  --line: #3A2F26;
  --shelf-light: linear-gradient(180deg, rgba(245, 158, 11, .10), rgba(245, 158, 11, 0));

  /* Founder's Cartridge materials only */
  --loose: #9CA3AF;
  --cib: #F5C518;
  --graded: #0D0A07;

  --disp: Bungee, system-ui, sans-serif;
  --body: Outfit, system-ui, sans-serif;
  --pix: "Press Start 2P", ui-monospace, monospace;

  /* 8pt grid */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
  --r-card: 12px; --r-sheet: 16px; --r-pill: 999px;
  --chamfer: 16px;

  /* motion.micro 200ms ease-out; motion.reduce 400ms fade */
  --t-micro: 200ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pad: clamp(16px, 5vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* clip, not hidden: nothing pre-scaled for an entrance may widen the layout viewport on mobile */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--amber); color: var(--bg); }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
b, strong { font-weight: 600; color: var(--text); }
em { font-style: italic; color: var(--text); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 4px; }

.skip { position: absolute; left: var(--s2); top: -64px; z-index: 100; background: var(--amber); color: var(--bg); padding: var(--s1) var(--s2); border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--s2); }

/* ---------- shared type ---------- */
h1, h2, h3 { font-family: var(--disp); font-weight: 400; line-height: 1.02; letter-spacing: .005em; }
h2 { font-size: clamp(36px, 5.4vw, 72px); margin-bottom: var(--s3); }
h3 { font-size: 24px; }
.kicker { font-family: var(--pix); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: var(--s3); }
.copy > p, .pick-head > p, .carts-head > p, .yours > p, .get > p { font-size: clamp(17px, 1.35vw, 20px); color: var(--text2); max-width: 54ch; }
.fine { font-size: 14px; color: var(--text2); }
.source { font-size: 13px; color: var(--text2); opacity: .7; margin-top: var(--s2); }

.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--led); vertical-align: middle; margin-right: var(--s1); animation: led 2.4s steps(1) infinite; }
@keyframes led { 0%, 92% { opacity: 1; } 93%, 100% { opacity: .25; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 56px; padding: 0 var(--s4);
  background: var(--amber); color: var(--bg);
  font-family: var(--disp); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--r-pill);
  transition: transform var(--t-micro) ease-out, background var(--t-micro) ease-out, color var(--t-micro) ease-out;
  will-change: transform;
}
.btn:hover { background: #FFB22E; }
.btn:active { transform: scale(.97); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { background: var(--elev); box-shadow: inset 0 0 0 1.5px var(--amber-dim); }
.btn-sm { min-height: 40px; padding: 0 var(--s2); font-size: 12px; }
.link-btn { font-family: var(--body); font-weight: 600; font-size: 16px; color: var(--text2); padding: var(--s1) var(--s2); border-radius: var(--r-pill); transition: color var(--t-micro) ease-out, background var(--t-micro) ease-out; }
.link-btn:hover { color: var(--text); background: var(--elev); }

/* ---------- stage ---------- */
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: none; }
.js.webgl #stage { display: block; }
.flash { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(60% 50% at 70% 70%, rgba(245, 158, 11, .22), transparent 70%); }
main, .foot { position: relative; z-index: 2; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--pad);
  transition: background 300ms ease-out, transform 400ms var(--ease), box-shadow 300ms ease-out;
}
.nav.is-scrolled { background: rgba(26, 21, 18, .94); box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.wordmark { font-family: var(--pix); font-size: 12px; letter-spacing: .14em; text-decoration: none; color: var(--text); display: inline-flex; align-items: center; }
.wordmark b { color: var(--amber); font-weight: 400; margin-left: .6em; }
.nav nav { display: flex; gap: var(--s4); }
.nav nav a { font-size: 15px; font-weight: 400; color: var(--text2); text-decoration: none; position: relative; transition: color var(--t-micro) ease-out; }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform var(--t-micro) ease-out; }
.nav nav a:hover { color: var(--text); }
.nav nav a:hover::after { transform: scaleX(1); }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; padding: var(--s16) var(--pad) var(--s10); position: relative; }
.hero-copy { max-width: 640px; }
.eyebrow { font-family: var(--pix); font-size: 11px; letter-spacing: .12em; color: var(--amber); margin-bottom: var(--s4); display: flex; align-items: center; }
.cur { display: inline-block; width: 9px; height: 14px; background: var(--amber); margin-left: var(--s1); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-title { font-size: clamp(50px, 6.6vw, 116px); line-height: .95; margin-bottom: var(--s4); text-transform: uppercase; }
.hero-title .line { display: block; white-space: nowrap; }
.hero-title .word { white-space: nowrap; }
.hot { color: var(--amber); }
.lede { font-size: clamp(18px, 1.5vw, 21px); color: var(--text2); max-width: 46ch; margin-bottom: var(--s5); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); }
.hero-fallback { display: none; width: min(420px, 80%); justify-self: center; border-radius: 32px; }
.no-js .hero-fallback, .js:not(.webgl) .hero-fallback { display: block; }
.scroll-cue { position: absolute; left: 50%; bottom: var(--s4); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--s1); font-family: var(--pix); font-size: 9px; letter-spacing: .2em; color: var(--text2); text-decoration: none; }
.scroll-cue i { width: 2px; height: 40px; background: linear-gradient(var(--amber), transparent); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- slot sequence ---------- */
.slotseq { min-height: 100svh; position: relative; }
.slotseq-inner { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: var(--s12) var(--pad); position: relative; }
.steps { list-style: none; display: grid; }
.step { grid-area: 1 / 1; max-width: 520px; }
.step p:not(.kicker) { font-size: clamp(17px, 1.4vw, 20px); color: var(--text2); max-width: 44ch; }
.js .step:not(.is-on) { opacity: 0; visibility: hidden; }
.no-js .steps, .stacked .steps, .fallback .steps { gap: var(--s8); }
.no-js .step, .stacked .step, .fallback .step { grid-area: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; }
.stacked .slot-progress, .fallback .slot-progress { display: none; }
.slot-progress { position: absolute; left: var(--pad); bottom: var(--s8); width: 160px; height: 2px; background: var(--line); }
.slot-progress span { display: block; height: 100%; background: var(--amber); transform-origin: left; transform: scaleX(0); }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--bg); padding: var(--s3) 0; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee span { font-family: var(--disp); font-size: clamp(22px, 3vw, 40px); text-transform: uppercase; color: var(--text); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s6); padding-right: var(--s6); }
.marquee span::after { content: ""; width: 12px; height: 12px; background: var(--amber); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ---------- split sections ---------- */
section { position: relative; }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(var(--s6), 8vw, var(--s16)); align-items: center; padding: var(--s16) var(--pad); max-width: 1400px; margin: 0 auto; }
.split.reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.split.reverse > :first-child { order: 0; }

.phone {
  justify-self: center; width: min(340px, 78vw); aspect-ratio: 642 / 1389;
  padding: 12px; border-radius: 44px;
  background: linear-gradient(160deg, #3A2F26, #1E1814);
  box-shadow: 0 0 0 1.5px #4A3C30, 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 120px -40px rgba(245, 158, 11, .25);
}
.phone-screen { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: var(--bg); }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* state chips */
.states { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s4) 0 var(--s2); }
.chip { padding: var(--s1) var(--s2); border-radius: var(--r-pill); background: var(--elev); color: var(--text2); font-weight: 400; font-size: 15px; box-shadow: inset 0 0 0 1px var(--line); transition: background var(--t-micro) ease-out, color var(--t-micro) ease-out, transform var(--t-micro) ease-out; }
.chip:hover { color: var(--text); transform: translateY(-2px); }
.chip.is-on { background: var(--amber); color: var(--bg); box-shadow: none; font-weight: 600; }
.blurb { font-size: 20px !important; color: var(--text) !important; min-height: 2.4em; display: flex; align-items: center; }

/* offline tunnel */
.tunnel { justify-self: center; width: min(420px, 90%); padding: var(--s5); border-radius: var(--r-sheet); background: var(--elev); box-shadow: inset 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.tunnel::before { content: ""; position: absolute; inset: 0 0 auto; height: 50%; background: var(--shelf-light); pointer-events: none; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 32px; margin-bottom: var(--s4); }
.bars i { width: 8px; background: var(--text2); border-radius: 2px; transition: opacity 300ms ease-out; }
.bars i:nth-child(1) { height: 25%; } .bars i:nth-child(2) { height: 50%; } .bars i:nth-child(3) { height: 75%; } .bars i:nth-child(4) { height: 100%; }
.mini-card { display: grid; gap: var(--s1); padding: var(--s3); border-radius: var(--r-card); background: var(--shelf); clip-path: polygon(var(--chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer)); }
.mini-state { font-family: var(--pix); font-size: 10px; letter-spacing: .1em; color: var(--amber); display: flex; align-items: center; }
.mini-state .led { background: var(--amber-dim); animation: none; }
.tunnel.is-slotted .mini-state .led { background: var(--led); }
.mini-title { font-family: var(--disp); font-size: 22px; }
.mini-sub { color: var(--text2); font-size: 15px; }

/* ---------- tonight's pick ---------- */
.pick { padding: var(--s16) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--s6), 8vw, var(--s16)); align-items: center; max-width: 1400px; margin: 0 auto; }
.deck-demo { justify-self: center; width: min(420px, 100%); display: grid; gap: var(--s3); justify-items: center; }
.demo-label { font-family: var(--pix); font-size: 9px; letter-spacing: .08em; color: var(--text2); text-align: center; line-height: 1.8; }
.deck { position: relative; width: 100%; aspect-ratio: 3 / 3.6; touch-action: pan-y; }
.card {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s2);
  padding: var(--s4); border-radius: var(--r-card); background: var(--elev);
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
  box-shadow: inset 0 0 0 1px var(--line);
  user-select: none; -webkit-user-select: none; cursor: grab;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 55%; background: var(--shelf-light); border-radius: inherit; pointer-events: none; }
.card:active { cursor: grabbing; }
.card-top { position: absolute; top: var(--s4); left: var(--s5); right: var(--s3); display: flex; justify-content: space-between; font-family: var(--pix); font-size: 9px; letter-spacing: .1em; color: var(--text2); }
.card-glyph { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 2.6 / 3; border-radius: 10px; opacity: .5;
  background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.04)); box-shadow: inset 0 0 0 2px rgba(146, 88, 15, .7); }
.card-glyph::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--disp); font-size: clamp(40px, 5vw, 64px); color: var(--amber-dim); }
.card-state { font-family: var(--pix); font-size: 9px; letter-spacing: .1em; color: var(--amber); display: flex; align-items: center; }
.card-title { font-family: var(--disp); font-size: clamp(30px, 3.4vw, 44px); line-height: 1; text-transform: uppercase; }
.card-tags { display: flex; gap: var(--s1); flex-wrap: wrap; }
.card-tags span { font-size: 13px; color: var(--text2); padding: 4px var(--s1); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); }
.card-hint { position: absolute; top: var(--s3); font-family: var(--disp); font-size: 18px; text-transform: uppercase; opacity: 0; padding: 4px var(--s1); border-radius: 6px; }
.card-hint.play { right: var(--s3); color: var(--bg); background: var(--amber); }
.card-hint.nope { left: var(--s5); color: var(--text); box-shadow: inset 0 0 0 2px var(--text2); }
.pick-result { font-family: var(--disp); font-size: 20px; color: var(--amber); text-align: center; min-height: 1.3em; text-transform: uppercase; }
.deck-actions { display: grid; gap: var(--s1); justify-items: center; width: 100%; }
.deck-actions .btn { width: 100%; }
.deck-secondary { display: flex; justify-content: space-between; width: 100%; }
.demo-hint { font-size: 13px; color: var(--text2); opacity: .75; }
.no-js .deck-demo { display: none; }

/* ---------- guilt ---------- */
.guilt { padding: var(--s16) var(--pad); text-align: center; max-width: 1200px; margin: 0 auto; overflow: clip; }
.shame { font-size: clamp(48px, 9vw, 140px); text-transform: uppercase; margin-bottom: var(--s5); line-height: .95; }
.strike { position: relative; display: inline-block; white-space: nowrap; }
.strike .of { color: var(--text2); transition: color 400ms ease-out; }
.strike-line { position: absolute; left: -2%; right: -2%; top: 38%; height: .1em; background: var(--amber); transform-origin: left; transform: scaleX(0); border-radius: 4px; }
.no-js .strike-line { transform: scaleX(1); }
.dot { color: var(--amber); }
.guilt-lede { font-size: clamp(18px, 1.6vw, 22px); color: var(--text2); max-width: 40ch; margin: 0 auto var(--s8); }
.nos { list-style: none; display: grid; gap: var(--s2); margin-bottom: var(--s8); }
.nos li { font-family: var(--disp); font-size: clamp(22px, 3vw, 40px); text-transform: uppercase; line-height: 1.1; }
.nos li:last-child { color: var(--amber); }
.guilt-close { font-size: clamp(17px, 1.4vw, 20px); color: var(--text2); max-width: 52ch; margin: 0 auto; }

/* ---------- release ---------- */
.countdown { margin-top: var(--s4); }
.cd-chip { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s3); border-radius: var(--r-pill); background: var(--elev); box-shadow: inset 0 0 0 1px var(--amber-dim); font-family: var(--disp); font-size: 20px; text-transform: uppercase; color: var(--text); }
.cd-chip.is-today { background: var(--amber); color: var(--bg); box-shadow: none; }

/* ---------- notifications ---------- */
.facts { list-style: none; display: grid; gap: var(--s2); margin-top: var(--s4); max-width: 52ch; }
.facts li { color: var(--text2); font-size: 17px; padding-left: var(--s4); position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 2px; background: var(--amber); }
.lockscreen {
  justify-self: center; width: min(380px, 92vw); padding: var(--s5) var(--s2) var(--s4);
  border-radius: 44px; background: linear-gradient(180deg, #2A221C, #17120F);
  box-shadow: 0 0 0 1.5px #4A3C30, 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.ls-time { text-align: center; margin-bottom: var(--s4); }
.ls-time span { display: block; font-family: var(--body); font-weight: 300; font-size: 72px; line-height: 1; letter-spacing: -.02em; }
.ls-time small { font-size: 15px; color: var(--text2); }
.notes { display: grid; gap: var(--s1); }
.note { padding: var(--s2); border-radius: 20px; background: #2E2620; box-shadow: inset 0 0 0 1px #3F332A; }
.note-app { display: flex; align-items: center; gap: var(--s1); font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.note-app span:last-child { margin-left: auto; font-weight: 400; color: var(--text2); font-size: 12px; max-width: 55%; text-align: right; }
.note-icon { width: 20px; height: 20px; border-radius: 6px; background: var(--amber); flex: none; display: inline-block; position: relative; }
.note-icon::after { content: ""; position: absolute; inset: 5px 6px; border-radius: 2px; background: var(--bg); }
.note-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.35; }
.note-body { font-size: 15px; color: var(--text); line-height: 1.4; }
.ls-caption { text-align: center; font-size: 12px; color: var(--text2); margin-top: var(--s3); padding: 0 var(--s2); }

/* ---------- cartridges ---------- */
.carts { padding: var(--s16) var(--pad); max-width: 1400px; margin: 0 auto; }
.carts-head { max-width: 720px; margin-bottom: var(--s8); }
.tiers { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); perspective: 900px; margin-bottom: var(--s6); }
.tier { aspect-ratio: 3 / 4; transform-style: preserve-3d; will-change: transform; }
.tier-face {
  height: 100%; padding: var(--s3); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s1);
  border-radius: var(--r-card); position: relative; overflow: hidden;
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
  background: var(--elev); box-shadow: inset 0 0 0 1.5px var(--line);
}
.tier-rank { font-family: var(--pix); font-size: 10px; letter-spacing: .1em; color: var(--text2); }
.mini-cart { --body: #8F8474; --label: #241D18; --ink: var(--amber);
  width: 58%; aspect-ratio: 2.6 / 3; margin: var(--s2) auto auto; position: relative; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18)), var(--body);
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.18), 0 18px 30px -18px rgba(0,0,0,.9); }
.mini-cart::before { content: ""; position: absolute; left: 7%; top: 9%; width: 16%; height: 70%;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 3px, transparent 3px 9px); border-radius: 2px; }
.mini-cart span { position: absolute; left: 30%; right: 8%; top: 9%; height: 62%; border-radius: 6px; background: var(--label);
  display: grid; place-items: center; font-family: var(--pix); font-size: 7px; letter-spacing: .08em; color: var(--ink); text-align: center; line-height: 1.8;
  box-shadow: inset 0 0 0 2px rgba(146, 88, 15, .8); }
.mini-cart::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 5%; height: 7%;
  background: repeating-linear-gradient(90deg, #D4A83A 0 4px, #1E1A16 4px 8px); border-radius: 2px; }
.tier.loose .mini-cart { --body: #7d7f84; }
.tier.cib .mini-cart { --label: linear-gradient(135deg, #F5C518, #b8900f 60%, #F5C518); --ink: #1A1512; }
.tier.cib .mini-cart span { box-shadow: inset 0 0 0 2px rgba(26,21,18,.35); }
.tier.sealed .mini-cart { box-shadow: 0 0 0 5px rgba(245, 239, 230, .08), inset 0 -10px 0 rgba(0,0,0,.18), 0 18px 30px -18px rgba(0,0,0,.9); }
.tier.sealed .mini-cart span { background: linear-gradient(115deg, #F5C518, #4ADE80, #F59E0B, #9CA3AF); background-size: 300% 300%; animation: shimmer 5s linear infinite; color: #1A1512; box-shadow: none; }
.tier.graded .mini-cart { --body: #2a2622; box-shadow: 0 0 0 6px rgba(245, 197, 24, .12), 0 0 0 7px rgba(245, 197, 24, .45), 0 18px 30px -18px rgba(0,0,0,.9); }
.tier.graded .mini-cart span { --label: #0D0A07; color: #F5C518; box-shadow: inset 0 0 0 2px #F5C518; }
.tier h3 { font-size: clamp(22px, 2vw, 30px); text-transform: uppercase; }
.tier p:last-child { font-size: 15px; color: var(--text2); line-height: 1.45; }
.tier.loose .tier-face { box-shadow: inset 0 0 0 2px var(--loose); }
.tier.loose h3 { color: var(--loose); }
.tier.cib .tier-face { box-shadow: inset 0 0 0 2px var(--cib); background: linear-gradient(160deg, rgba(245, 197, 24, .16), transparent 55%), var(--elev); }
.tier.cib h3 { color: var(--cib); }
.tier.sealed .tier-face::before {
  content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none;
  background: linear-gradient(115deg, #F5C518, #4ADE80, #F59E0B, #9CA3AF, #F5C518);
  background-size: 300% 300%; animation: shimmer 6s linear infinite;
}
.tier.sealed .tier-face { box-shadow: inset 0 0 0 2px #F5C518; }
@keyframes shimmer { to { background-position: 300% 0; } }
.tier.graded .tier-face { background: var(--graded); box-shadow: inset 0 0 0 2px var(--cib), inset 0 0 0 7px var(--graded), inset 0 0 0 8px rgba(245, 197, 24, .5); }
.tier.graded h3 { color: var(--cib); }
.unlocks { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.unlocks li { font-weight: 400; color: var(--text); display: flex; align-items: center; gap: var(--s1); }
.unlocks li::before { content: ""; width: 8px; height: 8px; background: var(--amber); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ---------- yours ---------- */
.yours { padding: var(--s16) var(--pad); max-width: 900px; margin: 0 auto; text-align: center; }
.yours > p { margin: 0 auto; }
.files { display: flex; justify-content: center; gap: var(--s3); margin-top: var(--s6); }
.file { font-family: var(--pix); font-size: 11px; letter-spacing: .06em; padding: var(--s3) var(--s3) var(--s3) var(--s5); border-radius: var(--r-card); background: var(--elev); box-shadow: inset 0 0 0 1px var(--line); position: relative; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.file::before { content: ""; position: absolute; left: var(--s2); top: 50%; width: 10px; height: 12px; margin-top: -6px; background: var(--amber); }

/* ---------- get ---------- */
.get { padding: var(--s16) var(--pad) var(--s12); text-align: center; display: grid; justify-items: center; gap: var(--s3); }
.get .mascot { width: min(260px, 60vw); border-radius: 40px; margin-bottom: var(--s2); }
.get h2 { max-width: 16ch; margin-bottom: 0; }
.get p { margin: 0 auto; }
.get .ctas { justify-content: center; margin-top: var(--s2); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: var(--s6) var(--pad); display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2) var(--s4); align-items: center; color: var(--text2); font-size: 14px; }
.foot nav { display: flex; gap: var(--s3); }
.foot nav a { color: var(--text2); text-decoration: none; }
.foot nav a:hover { color: var(--amber); }
.foot .fine { grid-column: 1 / -1; font-size: 12px; }

/* ---------- reveal (JS sets initial state; content stays visible without JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(32px); }
.fallback .reveal, .fallback .nos li, .fallback .note, .fallback .tier { opacity: 1 !important; transform: none !important; }
.js.reduce .reveal { transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 52vh; align-items: end; text-align: left; }
  .hero-fallback { grid-row: 1; margin-bottom: var(--s4); }
  .no-js .hero, .js:not(.webgl) .hero { padding-top: var(--s12); }
  .slotseq-inner { grid-template-columns: 1fr; align-items: end; padding-bottom: var(--s12); }
  .split, .split.reverse, .pick { grid-template-columns: 1fr; padding-block: var(--s12); }
  .split.reverse > .copy { order: 1; }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ctas .btn { width: 100%; }
  .tier-face { padding: var(--s2); }
  .files { flex-direction: column; align-items: center; }
}

/* ---------- reduced motion: movement off, craft kept (motion.reduce: 400ms fade) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .led, .cur, .scroll-cue i, .tier.sealed .tier-face::before { animation: none !important; }
}