/* ============================================================
   POWERDECK — AI Power-Ups for ChatGPT
   Cosmic trading-card storefront
   ============================================================ */
:root{
  --bg:#070512; --bg2:#0c0820; --panel:#120d28; --panel2:#1a1338;
  --ink:#f4f1ff; --muted:#a99fce; --dim:#6f6690;
  --line:rgba(180,160,255,.14); --line2:rgba(180,160,255,.28);
  --brand:#8b5cf6; --brand2:#22d3ee; --gold:#ffcf5c;
  --r-common:#7b8494; --r-uncommon:#c7d0dc; --r-rare:#f0b429; --r-legendary:#ff7a18;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --maxw:1240px;
  --font-display:"Cinzel",Georgia,serif;
  --font:"Space Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-pixel:"Press Start 2P",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(900px 600px at 12% 12%, rgba(34,211,238,.12), transparent 55%),
    radial-gradient(1000px 900px at 50% 120%, rgba(255,122,24,.10), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
h1,h2,h3{font-family:var(--font); font-weight:700; letter-spacing:0; margin:0}
.eyebrow{font-family:var(--font); text-transform:uppercase; letter-spacing:.24em; font-size:11.5px; color:var(--brand2); font-weight:700}

/* star noise layer */
.stars{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 65% 20%, #cbd5ff, transparent),
    radial-gradient(1.5px 1.5px at 80% 70%, #fff, transparent),
    radial-gradient(1px 1px at 40% 80%, #d8b4fe, transparent),
    radial-gradient(1px 1px at 90% 40%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 65%, #a5f3fc, transparent);
  background-repeat:repeat; background-size:auto;}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(7,5,18,.86), rgba(7,5,18,.55)); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:22px; height:66px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--font-pixel); font-weight:400; font-size:14px; letter-spacing:1px}
.brand .mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:19px;
  background:conic-gradient(from 210deg,#8b5cf6,#22d3ee,#ff7a18,#8b5cf6); box-shadow:0 0 22px rgba(139,92,246,.6)}
.brand b{background:linear-gradient(90deg,#fff,#c9b8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav .links{display:flex; gap:20px; margin-left:14px}
.nav .links a{color:var(--muted); font-size:14.5px; font-weight:500}
.nav .links a:hover{color:var(--ink)}
.nav .spacer{flex:1}
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line2); background:rgba(255,255,255,.04);
  color:var(--ink); padding:10px 16px; border-radius:11px; font-weight:600; font-size:14px; cursor:pointer; transition:.18s}
.btn:hover{border-color:var(--brand); background:rgba(139,92,246,.14); transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,#8b5cf6,#6d28d9); border-color:transparent; box-shadow:0 10px 26px -10px rgba(139,92,246,.8)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.gold{background:linear-gradient(90deg,#ffcf5c,#f0a020); color:#3a2600; border-color:transparent}
.cartbtn{position:relative}
.cartbtn .count{position:absolute; top:-7px; right:-7px; background:var(--r-legendary); color:#241100; font-size:11px; font-weight:800;
  min-width:19px; height:19px; border-radius:10px; display:grid; place-items:center; padding:0 5px}

/* ---------- hero ---------- */
.hero{position:relative; z-index:1; padding:52px 0 44px; display:grid;
  grid-template-columns:1fr minmax(360px,432px) 1fr; column-gap:12px; align-items:center}
.hero-copy{text-align:center; position:relative; z-index:3; padding:8px 6px}
.hero-copy p.sub{margin-left:auto; margin-right:auto}
.hero-copy .cta,.hero-copy .trust{justify-content:center}
.hero .eyebrow{display:inline-block; margin-bottom:4px}
.hero h1{font-size:clamp(36px,4.8vw,62px); line-height:1.02; margin:12px 0 0; letter-spacing:-.5px; font-weight:800}
.hero h1 .grad{background:linear-gradient(90deg,#c9b8ff,#22d3ee 55%,#ffcf5c);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{color:var(--muted); font-size:17px; line-height:1.62; margin:18px auto 24px; max-width:480px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.hero .trust{display:flex; gap:18px; margin-top:24px; color:var(--dim); font-size:13px; flex-wrap:wrap; justify-content:center}
.hero .trust span{display:flex; align-items:center; gap:5px}
.hero .trust b{color:var(--ink)}

/* two mirrored floating fans. FLICKER-PROOF: the .fc box is the stationary hit
   target (only the fan-spread rotation moves it); the hover lift happens on an
   inner .fc-lift layer and the idle bob on .fc-float, so the pointer never
   loses the card and re-triggers a hover loop. */
.hero-fan{position:relative; height:496px; display:grid; place-items:center; perspective:1600px}
.hero-fan::before{content:""; position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); width:370px; height:370px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(139,92,246,.18), transparent 62%); filter:blur(8px)}
.hero-disks::before{background:radial-gradient(circle, rgba(34,211,238,.18), transparent 62%)}
.hero-fan .fc{position:absolute; z-index:1; transition:transform .5s cubic-bezier(.2,.75,.2,1);
  transform-origin:50% 130%; cursor:pointer}
.hero-fan .fc-lift{display:block; transition:transform .4s cubic-bezier(.2,.85,.25,1); will-change:transform}
.hero-fan .fc-float{display:block; animation:floaty 5.4s ease-in-out infinite; animation-delay:var(--d,0s)}
.hero-fan .fc-float>*{display:block; width:100%; height:auto; filter:drop-shadow(0 22px 30px rgba(0,0,0,.62))}
/* compact fanned stack — small rotation, cards overlap, so big cards still fit the column */
.hero-fan .fc0{z-index:1; transform:rotate(-11deg) translateY(-30px)}
.hero-fan .fc1{z-index:3; transform:rotate(0deg) translateY(-42px)}
.hero-fan .fc2{z-index:2; transform:rotate(11deg) translateY(-30px)}
.hero-fan .fc1 .fc-float{--d:.7s} .hero-fan .fc2 .fc-float{--d:1.4s}
.hero-fan:hover .fc0{transform:rotate(-19deg) translateY(-36px)}
.hero-fan:hover .fc1{transform:rotate(0deg) translateY(-52px)}
.hero-fan:hover .fc2{transform:rotate(19deg) translateY(-36px)}
.hero-fan .fc:hover{z-index:6}
.hero-fan .fc:hover .fc-lift{transform:translateY(-14px) scale(1.06)}
.hero-fan .fc:hover .fc-float{animation-play-state:paused}
.hero-fan .fc:hover .fc-float>*{filter:drop-shadow(0 0 20px rgba(34,211,238,.55)) drop-shadow(0 0 48px rgba(139,92,246,.36))}
/* sizes — big and CENTERED in their columns so nothing clips the viewport edge */
.hero-disks{justify-items:center}
.hero-cards{justify-items:center}
.hero-cards .fc{width:216px}
.hero-disks .fc{width:280px}
/* narrower desktops: shrink so the big floppies never crowd the headline */
@media(max-width:1380px){ .hero-cards .fc{width:206px} .hero-disks .fc{width:252px} }
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-13px) rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.hero-fan .fc-float{animation:none}}

/* clickable AI-brand label beneath each fan (mascot + name -> jump to section) */
.fan-brand{position:absolute; bottom:6px; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; gap:11px; padding:9px 18px 9px 11px; border-radius:16px; cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid var(--line2);
  transition:.2s; backdrop-filter:blur(5px); box-shadow:0 10px 26px -14px rgba(0,0,0,.7)}
.fan-brand:hover{transform:translateX(-50%) translateY(-3px); border-color:var(--brand2); background:rgba(34,211,238,.1)}
.fan-brand .fb-ico{width:38px; height:41px; flex:none}
.fan-brand .fb-ico svg{width:100%; height:100%}
.fan-brand .fb-txt{display:flex; flex-direction:column; line-height:1.15; text-align:left}
.fan-brand .fb-txt b{font-size:14px; color:var(--ink); font-weight:800; display:flex; align-items:center; gap:6px}
.fan-brand .fb-txt small{font-size:11px; color:var(--dim); font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.disk-brand .fb-txt b{color:#f0a486} .card-brand .fb-txt b{color:#3fd6ab}

.navnew{background:linear-gradient(90deg,#22d3ee,#8b5cf6); color:#04101e; font-size:9px; font-weight:800;
  padding:2px 6px; border-radius:6px; letter-spacing:.08em; vertical-align:1px; animation:newpulse 2.2s ease-in-out infinite}
@keyframes newpulse{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.5)} 50%{box-shadow:0 0 14px 2px rgba(34,211,238,.55)}}
.btn.cyan{background:linear-gradient(90deg,#22d3ee,#0e7ec2); color:#04202e; border-color:transparent;
  box-shadow:0 10px 26px -10px rgba(34,211,238,.7); font-weight:700}
.btn.cyan:hover{filter:brightness(1.08)}

/* ===== the mascots (Claude coral / GPT green) — idle + per-disk dances ===== */
.mascot{display:block; width:100%; height:auto; overflow:visible}
.mascot .m-all{transform-origin:60px 108px}
.mascot .m-body{transform-origin:60px 70px}
.mascot .m-eye{transform-origin:center; animation:mblink 4.4s ease-in-out infinite}
@keyframes mblink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
.mascot .m-arm{transform-origin:60px 78px} .mascot .m-arm.l{transform-origin:32px 78px} .mascot .m-arm.r{transform-origin:88px 78px}
/* idle: gentle breathing bob */
.mascot .m-all{animation:midle 3.4s ease-in-out infinite}
@keyframes midle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-1deg)}}

/* honor prefers-reduced-motion for every decorative loop (mascots, dances,
   NEW badge, typing cursor, console slot scan/LED) — keep static end states */
@media(prefers-reduced-motion:reduce){
  .mascot .m-all, .mascot .m-eye, .mascot .m-arm, .mascot .m-body,
  .claudie .cl-spark, .gpt-mascot .gpt-knot, .navnew, .gpt-cursor,
  .crt .m-all, .crt-slot::after, .crt-led, .crt-burst,
  .crt[data-state] .m-all, .crt[data-state] .m-body{animation:none !important}
}

/* ---------- section chrome ---------- */
section{position:relative; z-index:1}
.sec-head{text-align:center; max-width:680px; margin:0 auto 34px}
.sec-head h2{font-size:clamp(26px,3.4vw,40px)}
.sec-head p{color:var(--muted); font-size:16.5px; line-height:1.6; margin-top:12px}
.divider{height:1px; background:linear-gradient(90deg,transparent,var(--line2),transparent); margin:8px 0}

/* ============================================================
   HOW IT WORKS — the animated Power-Up Pipeline (self-running, CSS only)
   One 4.2s master cycle: an energy pulse crosses 3 stages; each stage lights
   up + plays its own micro-animation as the pulse arrives.
   ============================================================ */
#how{padding:60px 0 68px}
.pipeline{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1060px; margin:30px auto 0}
/* the connector line + traveling pulse */
.pl-track{position:absolute; top:96px; left:16%; right:16%; height:3px; z-index:0; border-radius:3px;
  background:linear-gradient(90deg,rgba(139,92,246,.5),rgba(34,211,238,.5),rgba(255,207,92,.5))}
.pl-track::before{content:""; position:absolute; inset:0; border-radius:3px; opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 6px,transparent 6px 14px);
  animation:plflow 1.1s linear infinite}
@keyframes plflow{to{background-position:14px 0}}
.pl-pulse{position:absolute; top:50%; left:0; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; z-index:2;
  background:radial-gradient(circle,#fff,#22d3ee 55%,transparent 72%); box-shadow:0 0 16px 4px rgba(34,211,238,.8);
  animation:pltravel 4.2s cubic-bezier(.55,0,.45,1) infinite}
@keyframes pltravel{0%{left:0; opacity:0}6%{opacity:1}94%{opacity:1}100%{left:100%; opacity:0}}

.pl-stage{position:relative; z-index:1; text-align:center; padding:8px 10px}
.pl-stageglow{position:absolute; top:26px; left:50%; transform:translateX(-50%); width:150px; height:150px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle,rgba(34,211,238,.28),transparent 65%); opacity:0; animation:plglow 4.2s ease-in-out infinite}
.pl-visual{height:150px; display:grid; place-items:center; position:relative; margin-bottom:6px}
.pl-cap .pl-n{font-family:var(--font-pixel); font-size:12px; color:var(--brand2); letter-spacing:1px}
.pl-cap h3{font-size:19px; margin:8px 0 7px; font-family:var(--font); font-weight:800}
.pl-cap p{color:var(--muted); font-size:14px; line-height:1.55; margin:0 auto; max-width:270px}
/* stagger each stage's glow to the pulse arrival (~1.4s apart) */
.s1 .pl-stageglow{animation-delay:0s} .s2 .pl-stageglow{animation-delay:1.4s} .s3 .pl-stageglow{animation-delay:2.8s}
.s3 .pl-stageglow{background:radial-gradient(circle,rgba(255,207,92,.3),transparent 65%)}
@keyframes plglow{0%,18%,100%{opacity:0; transform:translateX(-50%) scale(.8)}6%{opacity:1; transform:translateX(-50%) scale(1.05)}}

/* stage 1 — PICK: a mini pack + mini disk float; a selection ring pulses */
.pv-pick{position:relative; width:150px; height:120px}
.pv-pack{position:absolute; left:14px; top:24px; width:52px; height:74px; border-radius:8px; transform:rotate(-8deg);
  background:linear-gradient(160deg,#a78bfa,#6d28d9); box-shadow:0 8px 18px -6px rgba(139,92,246,.7), inset 0 0 0 1px rgba(255,255,255,.25);
  animation:pvbob 3s ease-in-out infinite}
.pv-pack i{position:absolute; left:6px; right:6px; height:3px; background:rgba(255,255,255,.55); border-radius:2px}
.pv-pack i:nth-child(1){top:10px} .pv-pack i:nth-child(2){top:34px; opacity:.6} .pv-pack i:nth-child(3){top:58px; opacity:.6}
.pv-disk{position:absolute; right:14px; top:30px; width:62px; height:62px; border-radius:9px; transform:rotate(7deg);
  background:linear-gradient(160deg,#2a2734,#141118); box-shadow:0 8px 18px -6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.12);
  animation:pvbob 3s ease-in-out .6s infinite}
.pv-disk::before{content:""; position:absolute; left:12px; right:12px; top:8px; height:18px; border-radius:3px; background:linear-gradient(180deg,#cfd6e4,#98a2b3)}
.pv-disk b{position:absolute; left:10px; right:10px; bottom:9px; height:22px; border-radius:4px; background:linear-gradient(160deg,#22d3ee,#0e7ec2)}
.pv-ring{position:absolute; inset:8px; border-radius:16px; border:2px dashed rgba(34,211,238,.6); opacity:0;
  animation:pvring 4.2s ease-in-out infinite}
@keyframes pvring{0%,18%,100%{opacity:0; transform:scale(.9)}6%{opacity:1; transform:scale(1)}}
@keyframes pvbob{0%,100%{transform:translateY(0) rotate(var(--r,-8deg))}50%{transform:translateY(-7px) rotate(var(--r,-8deg))}}
.pv-disk{--r:7deg} .pv-pack{--r:-8deg}

/* stage 2 — INSERT: a token drops into a console slot, then a flash */
.pv-insert{position:relative; width:150px; height:130px}
.pv-console{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:96px; height:60px; border-radius:12px;
  background:linear-gradient(180deg,#26222f,#141019); box-shadow:0 10px 22px -8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1)}
.pv-slot{position:absolute; left:16px; right:16px; top:14px; height:7px; border-radius:4px; background:#05030a;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.9)}
.pv-drop{position:absolute; left:50%; top:0; width:34px; height:46px; margin-left:-17px; border-radius:6px;
  background:linear-gradient(160deg,#22d3ee,#6d28d9); box-shadow:0 6px 14px -4px rgba(34,211,238,.7);
  animation:pvdrop 4.2s cubic-bezier(.5,0,.6,1) infinite}
@keyframes pvdrop{0%,28%{transform:translateY(-6px) scale(1); opacity:0}34%{opacity:1}44%{transform:translateY(40px) scale(1); opacity:1}52%,100%{transform:translateY(52px) scale(.6,.4); opacity:0}}
.pv-flash{position:absolute; left:50%; bottom:44px; transform:translateX(-50%); width:60px; height:60px; border-radius:50%; opacity:0;
  background:radial-gradient(circle,rgba(34,211,238,.8),transparent 60%); animation:pvflash 4.2s ease-out infinite}
@keyframes pvflash{0%,44%{opacity:0; transform:translateX(-50%) scale(.4)}50%{opacity:1; transform:translateX(-50%) scale(1.1)}62%,100%{opacity:0; transform:translateX(-50%) scale(1.3)}}

/* stage 3 — LEVEL UP: an AI core pulses brighter, rings expand, +SKILL pops */
.pv-power{position:relative; width:150px; height:130px; display:grid; place-items:center}
.pv-core{position:absolute; width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,#ffcf5c 45%,#f97316 90%); box-shadow:0 0 26px 6px rgba(255,207,92,.55);
  animation:pvcore 4.2s ease-in-out infinite}
@keyframes pvcore{0%,60%{transform:scale(.7); filter:brightness(.7)}72%{transform:scale(1.18); filter:brightness(1.3)}86%,100%{transform:scale(1); filter:brightness(1)}}
.pv-r1,.pv-r2{position:absolute; width:46px; height:46px; border-radius:50%; border:2px solid rgba(255,207,92,.7); opacity:0}
.pv-r1{animation:pvexpand 4.2s ease-out infinite} .pv-r2{animation:pvexpand 4.2s ease-out .18s infinite}
@keyframes pvexpand{0%,64%{opacity:0; transform:scale(.6)}70%{opacity:.9}100%{opacity:0; transform:scale(2.6)}}
.pv-spark{position:absolute; width:8px; height:8px; border-radius:50%; background:#ffe6a3; opacity:0; box-shadow:0 0 8px #ffcf5c}
.pv-spark.a{top:20px; left:44px} .pv-spark.b{top:26px; right:40px} .pv-spark.c{bottom:26px; left:56px}
.pv-spark{animation:pvspark 4.2s ease-out infinite}
.pv-spark.b{animation-delay:.1s} .pv-spark.c{animation-delay:.2s}
@keyframes pvspark{0%,66%{opacity:0; transform:scale(0) translateY(0)}74%{opacity:1; transform:scale(1) translateY(-8px)}90%,100%{opacity:0; transform:scale(.6) translateY(-16px)}}
.pv-badge{position:absolute; top:2px; left:50%; transform:translateX(-50%) scale(0); z-index:3; font-family:var(--font-pixel); font-size:9px;
  color:#3a2600; background:linear-gradient(90deg,#ffcf5c,#ffe6a3); padding:4px 8px; border-radius:7px; box-shadow:0 6px 14px rgba(255,207,92,.5);
  animation:pvbadge 4.2s cubic-bezier(.2,1.6,.3,1) infinite}
@keyframes pvbadge{0%,68%{transform:translateX(-50%) scale(0)}76%{transform:translateX(-50%) scale(1.15)}84%{transform:translateX(-50%) scale(1)}96%,100%{transform:translateX(-50%) scale(1); opacity:0}}

@media(prefers-reduced-motion:reduce){
  .pl-pulse,.pl-track::before,.pl-stageglow,.pv-pack,.pv-disk,.pv-ring,.pv-drop,.pv-flash,.pv-core,.pv-r1,.pv-r2,.pv-spark,.pv-badge{animation:none}
  .pl-stageglow{opacity:.5} .pv-core{transform:scale(1); filter:none} .pv-badge{transform:translateX(-50%) scale(1)}
}
@media(max-width:760px){
  .pipeline{grid-template-columns:1fr; gap:10px; max-width:360px}
  .pl-track{display:none}
}

/* ---------- packs grid + fixed LEFT detail panel ---------- */
#packs{padding:64px 0}
.packs-layout{display:grid; grid-template-columns:436px 1fr; gap:26px; align-items:start}
.packs-detail{order:1; position:sticky; top:80px; align-self:start; max-height:calc(100vh - 96px); overflow-y:auto;
  background:linear-gradient(180deg,#15121e,#0c0a12); border:1px solid var(--line2); border-radius:18px;
  display:flex; flex-direction:column; box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.packs-detail::-webkit-scrollbar{width:8px} .packs-detail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:8px}
.packs-layout .grid{order:2}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px 18px}
.pack.active .foil{outline:2px solid var(--brand); outline-offset:3px}
/* figma-style motion */
@keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
.pack{animation:rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0ms)}
.packs-detail .panel-body{animation:fadeUp .34s ease both}
.pack .foil, .pack .pack-caption, .pack .pack-viewbtn{transition:transform .4s cubic-bezier(.2,.7,.2,1), color .2s, border-color .2s, background .2s}
@media(prefers-reduced-motion:reduce){.pack, .packs-detail .panel-body, .hero-fan .fc>*{animation:none}}
@media(max-width:1240px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){
  .packs-layout{grid-template-columns:1fr}
  .packs-detail{order:-1; position:static; max-height:none; margin-bottom:8px}
  .grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
/* inline detail panel (reuses .panel-* styles) */
.packs-detail .panel-head{padding:16px 22px 2px}
.packs-detail .panel-body{flex:0 0 auto; min-height:auto; overflow:visible; padding:16px 22px 20px}
.packs-detail .panel-buy{position:sticky; bottom:0; padding:14px 22px 18px}
.packs-detail .panel-pack{width:210px; margin:4px auto 18px}
.packs-detail .panel-title{font-size:23px}
.packs-detail .panel-num{font-size:44px}

/* foil pack */
.pack{position:relative; cursor:pointer; padding-top:16px; perspective:900px}
.pack .slivers{position:absolute; inset:16px 14% auto 14%; height:60px; z-index:0}
.pack .sliver{position:absolute; top:0; left:0; right:0; height:76px; border-radius:8px 8px 3px 3px;
  transition:.42s cubic-bezier(.2,.7,.2,1); box-shadow:0 6px 14px rgba(0,0,0,.4)}
.pack .sliver.s1{transform:translateY(6px) rotate(-4deg) scale(.9)}
.pack .sliver.s2{transform:translateY(4px) rotate(4deg) scale(.94)}
.pack .sliver.s3{transform:translateY(2px) scale(.97)}
.pack:hover .sliver.s1{transform:translateY(-34px) rotate(-9deg) scale(.92)}
.pack:hover .sliver.s2{transform:translateY(-30px) rotate(9deg) scale(.95)}
.pack:hover .sliver.s3{transform:translateY(-40px) scale(.99)}

.foil{position:relative; z-index:2; border-radius:13px; overflow:hidden; aspect-ratio:300/500;
  transform-style:preserve-3d; transition:.4s cubic-bezier(.2,.7,.2,1);
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.16)}
.pack:hover .foil{transform:translateY(-12px) rotateX(6deg) scale(1.035)}
.foil-grad{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 62% at 50% -8%, rgba(255,255,255,.5), transparent 48%),
    linear-gradient(158deg, var(--h1), var(--h2) 90%)}
.foil-sheen{position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .4s, background-position .55s;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.55) 47%,rgba(255,255,255,.08) 55%,transparent 64%);
  background-size:250% 250%; background-position:120% 0}
.pack:hover .foil-sheen{opacity:.85; background-position:-30% 0}
/* silver crimp strips (pure CSS: ridged metal + tiled saw-tooth edge) */
.crimp{position:absolute; left:0; right:0; height:14px; z-index:4;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, rgba(0,0,0,.14) 2px 4px),
    linear-gradient(180deg,#f6f8fb,#c6cdda 55%,#98a2b3);
  background-blend-mode:overlay,normal}
.crimp.top{top:0; -webkit-mask:conic-gradient(from 135deg at 50% 100%, #000 90deg, transparent 0) 50% 0/9px 100% repeat-x; mask:conic-gradient(from 135deg at 50% 100%, #000 90deg, transparent 0) 50% 0/9px 100% repeat-x}
.crimp.bot{bottom:0; -webkit-mask:conic-gradient(from -45deg at 50% 0, #000 90deg, transparent 0) 50% 0/9px 100% repeat-x; mask:conic-gradient(from -45deg at 50% 0, #000 90deg, transparent 0) 50% 0/9px 100% repeat-x}
.foil-body{position:absolute; inset:15px 9px 28px; z-index:3; display:flex; flex-direction:column; align-items:center}
.pack-banner{display:flex; align-items:center; gap:6px; margin-top:1px; font-family:var(--font); font-weight:700; font-size:11.5px; letter-spacing:.2px;
  color:#eef5ff; background:linear-gradient(180deg,#4f83db,#1f47a0); border:1px solid rgba(255,255,255,.6); border-radius:8px;
  padding:3px 13px; box-shadow:0 2px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.55); text-shadow:0 1px 1px rgba(0,0,0,.4)}
.pb-ico{width:11px; height:13px; border-radius:2px; background:linear-gradient(180deg,#d7deea,#94a1b8);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), inset 0 -3px 0 -1px rgba(0,0,0,.2)}
.pack-art{width:100%; flex:1; margin:8px 0 7px; border-radius:7px; overflow:hidden;
  border:2px solid rgba(0,0,0,.32); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 3px 9px rgba(0,0,0,.4)}
.pack-art svg, .pack-art img{display:block; width:100%; height:100%; object-fit:cover}
.pack-title{font-family:"Titan One",var(--font); font-size:clamp(12px,1.35vw,16px); line-height:.92; text-align:center; text-transform:uppercase;
  color:var(--acc); letter-spacing:.2px;
  text-shadow:-1.4px -1.4px 0 rgba(0,0,0,.72),1.4px -1.4px 0 rgba(0,0,0,.72),-1.4px 1.4px 0 rgba(0,0,0,.72),1.4px 1.4px 0 rgba(0,0,0,.72), 0 3px 5px rgba(0,0,0,.5)}
.pack-sub{font-family:"Titan One",var(--font); font-size:9px; text-transform:uppercase; letter-spacing:.3px; text-align:center; margin-top:4px;
  color:#fff; text-shadow:-1px -1px 0 rgba(0,0,0,.6),1px 1px 0 rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.7)}
.pack-tab{position:absolute; bottom:6px; right:7px; z-index:6; font-family:var(--font); font-size:8px; font-weight:600; letter-spacing:.2px;
  color:#3a4560; background:rgba(246,248,251,.94); padding:3px 7px; border-radius:2px; transform:rotate(-4deg);
  box-shadow:0 2px 5px rgba(0,0,0,.35); border:1px dashed rgba(60,70,100,.35)}
.pack:hover .pack-tab{transform:rotate(-4deg) translateY(-1px)}
.pack-legendary-chip{position:absolute; bottom:7px; left:7px; top:auto; right:auto; z-index:6; font-size:8px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg,#ff7a18,#ffcf5c); color:#3a1c00; padding:3px 6px; border-radius:5px;
  box-shadow:0 3px 9px rgba(255,122,24,.55); transform:rotate(-2deg)}
.artimg{display:block; width:100%; height:100%; object-fit:cover}
/* full-bleed AI-generated pack image (mockup style) — natural height so the
   silver foil crimps at top & bottom are never cropped */
.foil.foil-img{background:#0b0913; overflow:hidden; aspect-ratio:auto}
.foil-full{position:static; display:block; width:100%; height:auto; z-index:1}
.foil.foil-img .foil-sheen{z-index:3}
.pack-caption{margin-top:14px; text-align:center; font-family:var(--font); font-size:14px; font-weight:700; color:var(--ink); line-height:1.25}
.pack-viewbtn{display:block; margin:10px auto 0; font-family:var(--font); font-size:12px; color:var(--muted); cursor:pointer;
  background:transparent; border:1px solid var(--line2); border-radius:7px; padding:7px 16px; transition:.18s}
.pack:hover .pack-viewbtn{border-color:var(--brand); color:var(--ink); background:rgba(139,92,246,.12)}

/* ============================================================
   SKILL DISKS — shelf (left) + the CLAUDE CONSOLE (right)
   ============================================================ */
#disks{padding:64px 0}
#disks .sec-head .navnew{vertical-align:1px}
.disks-layout{display:grid; grid-template-columns:1fr 412px; gap:26px; align-items:start}

/* the shelf — 3 big columns so each floppy's art really shows */
.disk-grid{order:1; display:grid; grid-template-columns:repeat(3,1fr); gap:30px 22px}
.disk{position:relative; cursor:pointer; text-align:center; animation:rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0ms)}
.disk .disk-img{position:relative; display:block; width:100%; transition:transform .38s cubic-bezier(.2,.7,.2,1), filter .38s}
.disk .disk-img img{display:block; width:100%; height:auto}
.disk:hover .disk-img{transform:translateY(-10px) rotate(-1.6deg) scale(1.05);
  filter:drop-shadow(0 0 16px rgba(34,211,238,.5)) drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.disk.inserted .disk-img{filter:drop-shadow(0 0 16px rgba(74,222,128,.5)) drop-shadow(0 14px 26px rgba(0,0,0,.5))}
.disk.inserted .disk-img::after{content:"✓"; position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  background:#22c55e; color:#04240f; font-weight:900; font-size:14px; display:grid; place-items:center; box-shadow:0 4px 12px rgba(34,197,94,.6)}
.disk .disk-name{margin-top:11px; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.3}
.disk .disk-sub{font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; margin-top:3px}
.disk .disk-cta{display:inline-flex; align-items:center; gap:6px; margin-top:9px; font-size:11.5px; font-weight:700;
  color:var(--brand2); border:1px solid rgba(34,211,238,.4); border-radius:8px; padding:5px 11px;
  background:rgba(34,211,238,.07); transition:.2s}
.disk:hover .disk-cta{background:rgba(34,211,238,.18); box-shadow:0 6px 18px -6px rgba(34,211,238,.5)}
.disk.inserted .disk-cta{color:#4ade80; border-color:rgba(74,222,128,.45); background:rgba(74,222,128,.08)}
.disk.reading .disk-img{animation:diskpulse .5s ease-in-out infinite}
@keyframes diskpulse{0%,100%{transform:translateY(-4px) scale(1.02)}50%{transform:translateY(-9px) scale(1.05)}}

/* flying disk clone (insert animation) */
.disk-fly{position:fixed; z-index:300; pointer-events:none; margin:0;
  transition:transform .7s cubic-bezier(.5,-.06,.24,1), opacity .18s .56s; will-change:transform}
.disk-fly img{width:100%; height:auto; display:block; filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))}

/* ---- THE CLAUDE CONSOLE (sticky right panel) ---- */
.console{order:2; position:sticky; top:80px; align-self:start; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,#151228,#0b0916); border:1px solid var(--line2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.console-head{display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.console-dot{width:11px; height:11px; border-radius:50%}
.console-dot.r{background:#ff5f57} .console-dot.y{background:#febc2e} .console-dot.g{background:#28c840}
.console-title{margin-left:8px; font-family:var(--font-pixel); font-size:10px; letter-spacing:1px; color:var(--muted)}
.console-status{margin-left:auto; font-family:var(--font); font-size:11px; font-weight:700; color:#4ade80; letter-spacing:.06em}
.console-status.busy{color:#febc2e} .console-status.done{color:#22d3ee}

/* the cartoon CRT */
.crt{margin:20px 20px 8px; position:relative}
.crt-screen{position:relative; aspect-ratio:4/3; border-radius:16px 16px 12px 12px; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 20%, #16324a, #071522 70%, #04101a);
  border:6px solid #241f33; box-shadow:0 0 0 3px #0d0b16, inset 0 0 40px rgba(0,0,0,.8),
    inset 0 0 70px rgba(34,211,238,.12); transition:box-shadow .4s}
.crt[data-state="reading"] .crt-screen{box-shadow:0 0 0 3px #0d0b16, inset 0 0 40px rgba(0,0,0,.7), inset 0 0 80px rgba(34,211,238,.28)}
.crt[data-state="powered"] .crt-screen{box-shadow:0 0 0 3px #0d0b16, inset 0 0 40px rgba(0,0,0,.6),
    inset 0 0 90px rgba(255,207,92,.4), 0 0 30px rgba(255,207,92,.35)}
.crt-scan{position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.28) 2px 3px)}
.crt-glow{position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(80% 60% at 50% 40%, transparent 60%, rgba(0,0,0,.5))}
.crt-screen::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:12px;
  background:linear-gradient(135deg, rgba(255,255,255,.10), transparent 40%)}

/* the mascot on the console screen (Claude coral, or GPT green on the pack side) */
.claudie, .gpt-mascot{position:absolute; left:50%; top:50%; width:52%; transform:translate(-50%,-50%); z-index:2}
.claudie .cl-spark{transform-origin:60px 87px; animation:mspin 8s linear infinite}
@keyframes mspin{to{transform:rotate(360deg)}}
.gpt-mascot .gpt-knot{transform-origin:60px 87px; animation:mspin 10s linear infinite}
/* reading: mascot leans in, curious */
.crt[data-state="reading"] .m-all{animation:mread .5s ease-in-out infinite}
@keyframes mread{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
/* powered: a little pop, then the disk-specific dance */
.crt[data-state="powered"] .claudie, .crt[data-state="powered"] .gpt-mascot{animation:mpop .5s cubic-bezier(.2,1.6,.3,1)}
@keyframes mpop{0%{transform:translate(-50%,-50%) scale(.55)}60%{transform:translate(-50%,-54%) scale(1.15)}100%{transform:translate(-50%,-50%) scale(1)}}

/* ---- per-disk DANCES (Claude busts a different move for each skill) ---- */
.crt[data-state="powered"] .m-all{animation:d-bounce 1s ease-in-out infinite}   /* default */
@keyframes d-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.crt[data-dance="headbang"][data-state="powered"] .m-all{animation:d-headbang .42s ease-in-out infinite}
@keyframes d-headbang{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(9deg) translateY(-4px)}}
.crt[data-dance="wave"][data-state="powered"] .m-arm.r{animation:d-wave .5s ease-in-out infinite}
@keyframes d-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-38deg)}}
.crt[data-dance="wave"][data-state="powered"] .m-all{animation:d-sway2 1.1s ease-in-out infinite}
.crt[data-dance="kick"][data-state="powered"] .m-leg.r{animation:d-kick .45s ease-in-out infinite}
@keyframes d-kick{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px) rotate(30deg)}}
.crt[data-dance="kick"][data-state="powered"] .m-all{animation:d-lean .9s ease-in-out infinite}
@keyframes d-lean{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.crt[data-dance="jump"][data-state="powered"] .m-all{animation:d-jump .6s cubic-bezier(.3,1.6,.4,1) infinite}
@keyframes d-jump{0%,100%{transform:translateY(0) scale(1,1)}20%{transform:translateY(2px) scale(1.08,.92)}55%{transform:translateY(-16px) scale(.95,1.06)}}
.crt[data-dance="sway"][data-state="powered"] .m-all{animation:d-sway 1.3s ease-in-out infinite}
@keyframes d-sway{0%,100%{transform:rotate(-7deg) translateX(-3px)}50%{transform:rotate(7deg) translateX(3px)}}
@keyframes d-sway2{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.crt[data-dance="nod"][data-state="powered"] .m-body{animation:d-nod .5s ease-in-out infinite}
@keyframes d-nod{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.crt[data-dance="spin"][data-state="powered"] .m-all{animation:d-spin 1.1s cubic-bezier(.5,.1,.5,.9) infinite}
@keyframes d-spin{0%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(180deg) translateY(-8px)}100%{transform:rotateY(360deg) translateY(0)}}
.crt[data-dance="vibrate"][data-state="powered"] .m-all{animation:d-vibrate .11s linear infinite}
@keyframes d-vibrate{0%{transform:translate(-1.5px,0) rotate(-1deg)}50%{transform:translate(1.5px,0) rotate(1deg)}100%{transform:translate(-1.5px,0) rotate(-1deg)}}
.crt[data-dance="hop"][data-state="powered"] .m-all{animation:d-hop .5s ease-in-out infinite}
@keyframes d-hop{0%,100%{transform:translate(-6px,0) rotate(-6deg)}50%{transform:translate(6px,-10px) rotate(6deg)}}

/* skill scene thumb that pops on the screen while loading */
.crt-scene{position:absolute; right:9px; bottom:34px; width:40%; z-index:3; border-radius:8px; overflow:hidden;
  opacity:0; transform:translateY(8px) scale(.9); transition:.4s; box-shadow:0 8px 20px rgba(0,0,0,.6);
  border:2px solid rgba(255,255,255,.25)}
.crt-scene img{display:block; width:100%; height:auto}
.crt[data-state="reading"] .crt-scene, .crt[data-state="powered"] .crt-scene{opacity:1; transform:translateY(0) scale(1)}

/* speech bubble */
.crt-bubble{position:absolute; left:10px; top:10px; z-index:6; max-width:74%; padding:7px 10px; border-radius:11px 11px 11px 3px;
  background:rgba(244,241,255,.95); color:#1a1330; font-size:11.5px; font-weight:600; line-height:1.3;
  box-shadow:0 6px 16px rgba(0,0,0,.4); transition:.3s}
.crt[data-state="powered"] .crt-bubble{background:linear-gradient(90deg,#ffcf5c,#ffe6a3); color:#3a2600}
.crt-readout{position:absolute; left:0; right:0; bottom:8px; z-index:6; text-align:center;
  font-family:var(--font-pixel); font-size:8.5px; letter-spacing:.5px; color:var(--brand2); text-shadow:0 0 8px rgba(34,211,238,.6);
  opacity:0; transition:.2s}
.crt[data-state="reading"] .crt-readout{opacity:1}
.crt-readout .ok{color:#4ade80}
.crt-burst{position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0}
.crt[data-state="powered"] .crt-burst{opacity:1; animation:burst .8s ease-out}
@keyframes burst{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.crt-burst::before,.crt-burst::after{content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 45%, rgba(255,207,92,.6), transparent 45%)}

/* CRT base + drive slot */
.crt-base{margin:-2px 26px 0; height:44px; border-radius:0 0 14px 14px; position:relative;
  background:linear-gradient(180deg,#2a2438,#17131f); border:1px solid rgba(255,255,255,.08); border-top:none;
  box-shadow:0 14px 26px -12px rgba(0,0,0,.9); display:flex; align-items:center; justify-content:space-between; padding:0 16px}
.crt-brand{font-family:var(--font-pixel); font-size:9px; color:var(--dim); letter-spacing:1px}
.crt-brand b{color:var(--brand2)}
.crt-drive{position:relative; width:120px; height:22px; border-radius:5px;
  background:linear-gradient(180deg,#0f0d16,#050308); box-shadow:inset 0 2px 4px rgba(0,0,0,.9); display:flex; align-items:center; padding:0 8px}
.crt-slot{flex:1; height:6px; border-radius:3px; background:#04030a; box-shadow:inset 0 1px 3px rgba(0,0,0,.95); position:relative; overflow:hidden}
.crt-slot::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(34,211,238,.9),transparent);
  transform:translateX(-120%); }
.crt[data-state="reading"] .crt-slot::after{animation:slotscan .7s linear infinite}
@keyframes slotscan{to{transform:translateX(120%)}}
.crt-led{width:8px; height:8px; border-radius:50%; margin-left:7px; background:#2a2320; box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.crt[data-state="reading"] .crt-led{background:#4ade80; box-shadow:0 0 10px #4ade80; animation:ledblink .2s steps(2) infinite}
.crt[data-state="powered"] .crt-led{background:#22d3ee; box-shadow:0 0 10px #22d3ee}
@keyframes ledblink{50%{opacity:.3}}

/* install readout / buy */
.console-install{padding:12px 20px 20px}
.ci-empty{color:var(--muted); font-size:13px; line-height:1.5; text-align:center; padding:6px 8px 10px}
.ci-card{animation:fadeUp .3s ease both}
.ci-top{display:flex; align-items:center; gap:11px}
.ci-ico{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:20px;
  background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(139,92,246,.2)); border:1px solid var(--line2)}
.ci-name{font-size:16px; font-weight:800; color:var(--ink); line-height:1.2}
.ci-sub{font-size:11.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; margin-top:2px}
.ci-badge{margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:3px 8px; border-radius:6px;
  background:linear-gradient(90deg,#22d3ee,#4ade80); color:#04240f}
.ci-can{margin:12px 0 4px; padding:10px 12px; border-radius:10px; font-size:13px; color:var(--muted); line-height:1.45;
  background:rgba(34,211,238,.06); border:1px solid rgba(34,211,238,.2)}
.ci-can b{color:var(--ink)}

/* ---- live ORDER receipt inside a console ---- */
.console-order{padding:0 20px 20px; border-top:1px solid var(--line); margin-top:4px}
.gpt-order{padding:0 14px 14px}
.ord-head{padding:14px 0 8px}
.ord-title{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.ord-empty{color:var(--dim); font-size:12.5px; line-height:1.5; padding:2px 0 10px}
.ord-list{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.ord-item{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px; font-size:12.5px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); animation:ordin .28s cubic-bezier(.2,1.3,.3,1) both}
@keyframes ordin{0%{opacity:0; transform:translateX(-8px)}100%{opacity:1; transform:none}}
.ord-q{font-family:var(--font-pixel); font-size:9px; color:var(--brand2); flex:none}
.ord-name{flex:1; color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ord-price{font-weight:800; color:var(--ink); flex:none}
.ord-x{flex:none; width:20px; height:20px; border-radius:6px; border:1px solid var(--line2); background:transparent;
  color:var(--dim); cursor:pointer; font-size:15px; line-height:1; display:grid; place-items:center; transition:.15s}
.ord-x:hover{color:#fff; background:#e0355a; border-color:#e0355a}
.ord-total{display:flex; justify-content:space-between; align-items:baseline; padding:9px 2px 12px; border-top:1px dashed var(--line2); font-size:13px; color:var(--muted)}
.ord-total b{font-family:var(--font-display); font-size:26px; color:var(--ink); font-weight:700}
.ord-grow.bump{animation:ordbump .4s cubic-bezier(.2,1.5,.3,1)}
@keyframes ordbump{0%{transform:scale(1)}45%{transform:scale(1.22); color:#4ade80}100%{transform:scale(1)}}
.ord-checkout{width:100%; justify-content:center; padding:12px; font-weight:800}
.btn.gptbtn{background:linear-gradient(90deg,#10a37f,#0c8768); color:#eafff8; border-color:transparent; box-shadow:0 10px 26px -10px rgba(16,163,127,.7)}
.btn.gptbtn:hover{filter:brightness(1.08)}
.ord-upsell{display:block; width:100%; margin-top:9px; padding:9px; border-radius:9px; cursor:pointer; font-size:12px; font-weight:700;
  color:var(--muted); background:transparent; border:1px dashed var(--line2); transition:.18s}
.ord-upsell:hover{color:var(--ink); border-color:var(--brand2); background:rgba(34,211,238,.07)}

/* pack tile shows it's already in the order */
.pack.added .foil{outline:2px solid #4ade80; outline-offset:3px}
.pack.added::after{content:"✓"; position:absolute; top:8px; right:8px; z-index:7; width:24px; height:24px; border-radius:50%;
  background:#22c55e; color:#04240f; font-weight:900; font-size:14px; display:grid; place-items:center; box-shadow:0 4px 12px rgba(34,197,94,.6)}

/* disk pricing card */
.price.disk-price{border-color:rgba(34,211,238,.35)}
.price .tag.cyan-tag{background:linear-gradient(90deg,#22d3ee,#0e7ec2); color:#04202e}
.price.disk-price .btn.cyan{width:100%; justify-content:center; padding:13px}

@media(max-width:1120px){
  .disks-layout{grid-template-columns:1fr}
  .console{order:-1; position:static; max-width:520px; margin:0 auto 10px; width:100%}
  .disk-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){.disk-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.disk-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== THE CHATGPT CONSOLE (pack-side mirror of the Claude Console) ===== */
.gpt-console{position:static; margin:0 0 4px; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#101a16,#0a1310); border:1px solid rgba(16,163,127,.3); box-shadow:0 16px 40px -20px rgba(0,0,0,.8)}
.gpt-console .console-head{border-bottom-color:rgba(16,163,127,.2)}
.gpt-console .console-title{color:#7fd9c0}
.gpt-crt{margin:16px 16px 6px}
.gpt-crt .crt-screen{background:radial-gradient(120% 120% at 50% 20%, #103a30, #06231c 70%, #041712);
  border-color:#1c2e28; box-shadow:0 0 0 3px #0a1310, inset 0 0 40px rgba(0,0,0,.8), inset 0 0 70px rgba(16,163,127,.14)}
.gpt-crt[data-state="reading"] .crt-screen{box-shadow:0 0 0 3px #0a1310, inset 0 0 40px rgba(0,0,0,.7), inset 0 0 80px rgba(16,163,127,.3)}
.gpt-crt[data-state="powered"] .crt-screen{box-shadow:0 0 0 3px #0a1310, inset 0 0 40px rgba(0,0,0,.6), inset 0 0 90px rgba(63,214,171,.34), 0 0 26px rgba(16,163,127,.3)}
.gpt-crt .crt-brand b{color:#3fd6ab}
.gpt-crt .crt-slot::after{background:linear-gradient(90deg,transparent,rgba(63,214,171,.9),transparent)}
.gpt-crt[data-state="reading"] .crt-led{background:#3fd6ab; box-shadow:0 0 10px #3fd6ab}
.gpt-crt[data-state="powered"] .crt-led{background:#10a37f; box-shadow:0 0 10px #10a37f}
.gpt-crt[data-state="powered"] .crt-bubble{background:linear-gradient(90deg,#3fd6ab,#a3f0dc); color:#053a2c}
.gpt-crt[data-state="powered"] .crt-burst::before,.gpt-crt[data-state="powered"] .crt-burst::after{background:radial-gradient(circle at 50% 45%, rgba(63,214,171,.55), transparent 45%)}
.gpt-console .crt-base{margin:-2px 22px 0}
.gpt-console .m-all{animation-duration:1s}
/* on-screen readout in ChatGPT green (mirrors the Claude PC readout) */
.gpt-crt .crt-readout{color:#3fd6ab; text-shadow:0 0 8px rgba(63,214,171,.6)}
.gpt-crt .crt-readout .ok{color:#4ade80}

/* pack "open" — the console pops + cards flip up staggered */
.panel-body.opening .gpt-console{animation:packpop .5s cubic-bezier(.2,1.3,.3,1)}
@keyframes packpop{0%{transform:scale(.92) translateY(8px); opacity:.5}55%{transform:scale(1.02)}100%{transform:none; opacity:1}}
.panel-body.opening .freewrap{animation:cardflip .6s cubic-bezier(.2,.9,.3,1) .1s both}
@keyframes cardflip{0%{transform:translateY(14px) rotateX(28deg); opacity:0}100%{transform:none; opacity:1}}
.panel-body.opening .slot-grid .slot{animation:cardflip .5s cubic-bezier(.2,.9,.3,1) both; animation-delay:calc(.16s + var(--si,0)*.05s)}

/* ---------- rarity legend ---------- */
.legend{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px}
.legend .r{background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center}
.legend .r .gem{width:30px;height:30px;margin:0 auto 10px;border-radius:8px;transform:rotate(45deg);box-shadow:0 0 18px currentColor}
.legend .r.c{color:var(--r-common)} .legend .r.u{color:var(--r-uncommon)} .legend .r.r{color:var(--r-rare)} .legend .r.l{color:var(--r-legendary)}
.legend .r .gem{background:currentColor}
.legend .r h4{margin:0; font-size:16px; color:var(--ink); font-family:var(--font)}
.legend .r .qty{font-family:var(--font-display); font-size:26px; font-weight:700; margin-top:4px; color:currentColor}
.legend .r p{color:var(--muted); font-size:13px; margin:6px 0 0; line-height:1.45}

/* ---------- pricing ---------- */
#pricing{padding:64px 0}
.prices{display:grid; grid-template-columns:1fr 1.18fr 1fr; gap:22px; max-width:1180px; margin:0 auto; align-items:start}
.price{background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:20px; padding:30px; position:relative}
.price.feat{border-color:transparent; background:linear-gradient(180deg,rgba(139,92,246,.16),rgba(12,8,32,.9));
  box-shadow:0 30px 70px -30px rgba(139,92,246,.7); outline:2px solid rgba(139,92,246,.5)}
.price .tag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,#ffcf5c,#f0a020);
  color:#3a2600; font-weight:800; font-size:12px; padding:5px 14px; border-radius:20px; letter-spacing:.4px}
.price h3{font-family:var(--font); font-size:21px}
.price .amt{font-family:var(--font-display); font-size:52px; font-weight:700; margin:8px 0 2px; line-height:1}
.price .amt small{font-size:18px; color:var(--muted); font-weight:400}
.price .strike{color:var(--dim); text-decoration:line-through; font-size:16px}
.price .save{color:#4ade80; font-weight:700; font-size:14px; margin-left:8px}
.price ul{list-style:none; padding:0; margin:18px 0 22px; display:grid; gap:11px}
.price li{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:14.5px; line-height:1.45}
.price li .ck{color:#4ade80; flex:none; font-weight:800}
.price .btn{width:100%; justify-content:center; padding:13px}

/* "Pick & mix" — two mascot-led options that jump to their section */
.price.pick{display:flex; flex-direction:column}
.pick-sub{color:var(--muted); font-size:13.5px; line-height:1.5; margin:2px 0 16px}
.pick-two{display:flex; flex-direction:column; gap:12px; flex:1}
.pick-opt{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; cursor:pointer; text-align:left; width:100%;
  background:rgba(255,255,255,.03); border:1px solid var(--line2); transition:transform .2s, border-color .2s, background .2s, box-shadow .2s}
.pick-opt:hover{transform:translateY(-2px)}
.pick-opt.gpt:hover{border-color:#10a37f; background:rgba(16,163,127,.09); box-shadow:0 12px 28px -12px rgba(16,163,127,.6)}
.pick-opt.claude:hover{border-color:#da7756; background:rgba(218,119,86,.09); box-shadow:0 12px 28px -12px rgba(218,119,86,.6)}
.pick-masc{width:48px; height:52px; flex:none}
.pick-masc svg{width:100%; height:100%; display:block}
.pick-info{flex:1; display:flex; flex-direction:column; line-height:1.15}
.pick-ai{font-size:13px; font-weight:800; letter-spacing:.01em}
.pick-opt.gpt .pick-ai{color:#3fd6ab} .pick-opt.claude .pick-ai{color:#f0a486}
.pick-price{font-family:var(--font-display); font-size:27px; font-weight:700; color:var(--ink); margin-top:3px}
.pick-price small{font-size:13px; color:var(--muted); font-weight:400; font-family:var(--font)}
.pick-arrow{font-size:20px; color:var(--dim); flex:none; transition:transform .2s, color .2s}
.pick-opt:hover .pick-arrow{transform:translateX(4px)}
.pick-opt.gpt:hover .pick-arrow{color:#3fd6ab} .pick-opt.claude:hover .pick-arrow{color:#f0a486}
.pick-foot{margin-top:15px; font-size:12px; color:var(--dim); text-align:center; line-height:1.5}

/* ---------- faq ---------- */
#faq{padding:56px 0}
.faq-list{max-width:820px; margin:0 auto; display:grid; gap:12px}
.faq{background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.faq summary{cursor:pointer; padding:18px 20px; font-weight:600; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{color:var(--brand2); transition:.25s}
.faq[open] summary .chev{transform:rotate(180deg)}
.faq p{margin:0; padding:0 20px 18px; color:var(--muted); font-size:14.5px; line-height:1.6}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); margin-top:40px; padding:34px 0; color:var(--dim); font-size:13.5px}
.foot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}

/* ============================================================
   MTG CARD COMPONENT
   ============================================================ */
.mtgcard{--fc:var(--r-common); width:100%; border-radius:15px; padding:9px 9px 11px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.25)),
    linear-gradient(160deg, var(--fc), #0b0913 78%);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.10);
  color:#f4f1ff; position:relative; font-family:var(--font)}
.mtgcard.r-C{--fc:#5a6472} .mtgcard.r-U{--fc:#aeb8c6} .mtgcard.r-R{--fc:#e0a91f} .mtgcard.r-L{--fc:#ff7a18}
.mtgcard.r-U{color:#12151b}
.mtgcard.r-R{color:#241a00}
.mtgcard.r-L::before{content:""; position:absolute; inset:0; border-radius:15px; padding:1px; pointer-events:none;
  background:conic-gradient(from 0deg,#ff7a18,#ffcf5c,#22d3ee,#8b5cf6,#ff7a18); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.9}
.mtg-inner{border-radius:11px; background:linear-gradient(180deg,#161226,#0d0a1c); border:1px solid rgba(0,0,0,.5); padding:8px; position:relative; z-index:1}

.mtg-namebar{display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.35)); border:1px solid rgba(255,255,255,.12)}
.mtg-name{flex:1; font-family:var(--font-display); font-weight:700; font-size:14.5px; color:#fff; line-height:1.05; text-shadow:0 1px 2px rgba(0,0,0,.7)}
.mtg-gem{width:16px;height:16px;border-radius:4px;transform:rotate(45deg); background:var(--fc); box-shadow:0 0 10px var(--fc), inset 0 0 4px rgba(255,255,255,.7); flex:none}

.mtg-art{position:relative; margin:8px 0 0; border-radius:8px; overflow:hidden; aspect-ratio:16/10;
  border:2px solid rgba(0,0,0,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.5)}
.mtg-art svg{display:block;width:100%;height:100%}
.mtg-art .frameglow{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 26px rgba(0,0,0,.5)}

.mtg-typeline{display:flex; align-items:center; gap:8px; margin-top:8px; padding:4px 9px; border-radius:7px; font-size:11px; font-weight:600;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.3)); border:1px solid rgba(255,255,255,.10); color:#fff}
.mtg-typeline .pip{margin-left:auto; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.5px; color:var(--fc);
  background:rgba(0,0,0,.35); border:1px solid var(--fc); border-radius:5px; padding:1px 7px; text-transform:uppercase}

/* the ChatGPT chat box holding the prompt */
.mtg-textbox{margin-top:8px; border-radius:9px; background:#0e1117; border:1px solid rgba(255,255,255,.10); overflow:hidden}
.mtg-chat-head{display:flex; align-items:center; gap:8px; padding:7px 9px; background:#171a21; border-bottom:1px solid rgba(255,255,255,.07)}
.mtg-chat-head .ava{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#10a37f,#0d8a6c); display:grid; place-items:center; font-size:11px}
.mtg-chat-head .who{font-size:11px; color:#c7ccd6; font-weight:600}
.mtg-chat-head .copy{margin-left:auto; font-size:11px; font-weight:700; color:#0e1117; background:#10a37f; border:none; border-radius:6px; padding:4px 10px; cursor:pointer; transition:.15s}
.mtg-chat-head .copy:hover{filter:brightness(1.1)}
.mtg-chat-head .copy.done{background:#4ade80}
.mtg-prompt{padding:10px 11px; font-size:12.5px; line-height:1.55; color:#dfe3ea; max-height:150px; overflow:auto; white-space:pre-wrap; font-family:var(--font)}
.mtg-prompt::-webkit-scrollbar{width:8px} .mtg-prompt::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:8px}
.mtg-foot{display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding:0 3px; font-size:10px; color:rgba(255,255,255,.6)}
.mtg-foot .flavor{font-style:italic; font-family:var(--font-display); font-size:10.5px; max-width:70%; line-height:1.2}
.mtg-foot .num{font-variant-numeric:tabular-nums; letter-spacing:.5px}

/* card back (locked slots) */
.cardback{width:100%; aspect-ratio:5/7; border-radius:12px; position:relative; overflow:hidden; cursor:default;
  background:radial-gradient(circle at 50% 38%, #241a4a, #0c0820 70%); border:1px solid var(--line2);
  display:grid; place-items:center}
.cardback .emblem{width:54%; aspect-ratio:1; border-radius:50%; border:2px solid rgba(255,255,255,.2); display:grid; place-items:center; font-size:26px;
  background:conic-gradient(from 0deg,rgba(139,92,246,.4),rgba(34,211,238,.3),rgba(255,122,24,.3),rgba(139,92,246,.4))}
.cardback::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 8px,transparent 8px 16px)}
.slot{position:relative}
.slot .lockbar{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:6px; justify-content:center;
  padding:6px 4px; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.86)); color:#fff}
.slot .rar{position:absolute; top:7px; left:7px; z-index:3; font-size:9px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  padding:2px 7px; border-radius:5px; color:#0b0913}
.slot .rar.C{background:var(--r-common); color:#fff} .slot .rar.U{background:var(--r-uncommon)}
.slot .rar.R{background:var(--r-rare)} .slot .rar.L{background:linear-gradient(90deg,#ff7a18,#ffcf5c)}
.slot .lockglyph{opacity:.5; filter:grayscale(.3)}

/* ============================================================
   SIDE PANEL
   ============================================================ */
.scrim{position:fixed; inset:0; z-index:80; background:rgba(4,2,12,.66); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:.3s}
.scrim.open{opacity:1; pointer-events:auto}
.panel{position:fixed; top:0; right:0; height:100%; width:min(460px,94vw); z-index:90; transform:translateX(102%); transition:.42s cubic-bezier(.2,.75,.2,1);
  background:linear-gradient(180deg,#15121e,#0c0a12); border-left:1px solid var(--line2); box-shadow:-30px 0 70px -20px rgba(0,0,0,.8);
  display:flex; flex-direction:column}
.panel.open{transform:translateX(0)}
.panel>#panelInner{display:flex; flex-direction:column; flex:1 1 auto; min-height:0; width:100%}
.panel-head{position:relative; display:flex; align-items:flex-start; justify-content:space-between; padding:18px 22px 4px}
.panel-num{font-family:var(--font); font-weight:700; font-size:40px; color:var(--dim); line-height:1; letter-spacing:1px}
.panel-num small{font-size:15px; color:var(--line2)}
.panel-head .close{width:34px;height:34px;border-radius:9px; border:1px solid var(--line2);
  background:rgba(0,0,0,.3); color:var(--ink); cursor:pointer; font-size:18px; display:grid; place-items:center}
.panel-head .close:hover{background:rgba(255,255,255,.1)}
.panel-pack{width:188px; margin:2px auto 20px; filter:drop-shadow(0 22px 34px rgba(0,0,0,.6)); pointer-events:none}
.panel-pack .foil{aspect-ratio:5/7.3}
.panel-pack .pack-tab, .panel-pack .pack-legendary-chip{display:none}
.panel-title{font-family:var(--font); font-weight:700; font-size:24px; line-height:1.1}
.panel-sub{color:var(--brand2); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-top:6px}
.pdesc{color:var(--muted); font-size:13.5px; line-height:1.7; margin:14px 0 0; text-align:left}
.includes{margin:18px 0 4px; padding:0; border-top:1px solid var(--line); padding-top:16px}
.inc-lbl{font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.18em; font-weight:700}
.inc-line{font-size:13px; color:var(--ink); margin:9px 0 12px; line-height:1.6}
.inc-line .leg{color:var(--gold)}
.panel-body{flex:1 1 auto; min-height:0; overflow-y:auto; padding:20px 24px 30px}
.panel-body::-webkit-scrollbar{width:9px} .panel-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:8px}

.inside{display:flex; align-items:center; gap:8px; margin:2px 0 16px; flex-wrap:wrap}
.inside .lbl{font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.16em; font-weight:600; margin-right:4px}
.pip-row{display:flex; gap:5px}
.pip-row .p{width:22px;height:22px;border-radius:6px; transform:rotate(45deg); box-shadow:0 0 8px currentColor; opacity:.92}
.pip-row .p.C{background:var(--r-common);color:var(--r-common)} .pip-row .p.U{background:var(--r-uncommon);color:var(--r-uncommon)}
.pip-row .p.R{background:var(--r-rare);color:var(--r-rare)} .pip-row .p.L{background:var(--r-legendary);color:var(--r-legendary)}

.freewrap{position:relative; margin:6px auto 8px; max-width:310px}
.freewrap .freetag{position:absolute; top:-11px; left:50%; transform:translateX(-50%); z-index:5; background:linear-gradient(90deg,#4ade80,#22c55e);
  color:#052e16; font-weight:800; font-size:11px; padding:4px 12px; border-radius:16px; letter-spacing:.4px; box-shadow:0 6px 16px rgba(34,197,94,.4)}

.leg-callout{display:flex; gap:12px; align-items:center; margin:18px 0; padding:14px 16px; border-radius:13px;
  background:linear-gradient(90deg,rgba(255,122,24,.16),rgba(255,207,92,.06)); border:1px solid rgba(255,122,24,.4)}
.leg-callout .ic{font-size:26px} .leg-callout b{color:var(--gold)}
.leg-callout p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.45}

.locked-title{font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.16em; font-weight:600; margin:20px 0 12px}
.slot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}

.panel-buy{border-top:1px solid var(--line); padding:14px 22px 18px; background:rgba(8,5,16,.8); backdrop-filter:blur(8px)}
.brandline{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.brandline .bl-ico{width:28px;height:28px;border-radius:7px; display:grid; place-items:center; font-size:15px;
  background:conic-gradient(from 210deg,#8b5cf6,#22d3ee,#ff7a18,#8b5cf6)}
.brandline .bl-txt{display:flex; flex-direction:column; line-height:1.2}
.brandline .bl-txt b{font-size:12.5px} .brandline .bl-txt span{font-size:11px; color:var(--dim)}
.brandline .bl-price{margin-left:auto; font-size:13px; font-weight:700; color:var(--muted)}
.btn.gold.buyall{width:100%; justify-content:center; padding:13px; font-weight:700; font-size:14px; position:relative;
  box-shadow:0 10px 24px -8px rgba(255,160,32,.6)}
.panel-buy .row2{display:flex; gap:10px; margin-top:10px}
.panel-buy .row2 .btn{flex:1; justify-content:center; font-size:12.5px; padding:11px 8px}

/* ============================================================
   CARD MODAL (enlarged)
   ============================================================ */
.cardmodal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:.25s}
.cardmodal.open{opacity:1; pointer-events:auto}
.cardmodal .cm-scrim{position:absolute; inset:0; background:rgba(3,1,10,.8); backdrop-filter:blur(6px)}
.cardmodal .cm-card{position:relative; z-index:2; width:min(400px,90vw); animation:pop .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:scale(.9) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.cardmodal .cm-close{position:absolute; top:-6px; right:-6px; z-index:5; width:34px;height:34px;border-radius:50%; border:1px solid var(--line2);
  background:#160f2e; color:#fff; cursor:pointer; font-size:17px}

/* toast */
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(30px); z-index:120; opacity:0; transition:.3s;
  background:linear-gradient(90deg,#10a37f,#0d8a6c); color:#fff; font-weight:700; font-size:14px; padding:12px 20px; border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.5)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* checkout modal */
.co{position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:22px; opacity:0; pointer-events:none; transition:.25s}
.co.open{opacity:1; pointer-events:auto}
.co .co-scrim{position:absolute; inset:0; background:rgba(3,1,10,.78); backdrop-filter:blur(6px)}
.co .co-box{position:relative; z-index:2; width:min(460px,92vw); background:linear-gradient(180deg,#160f30,#0b0820); border:1px solid var(--line2); border-radius:18px; padding:26px; box-shadow:var(--shadow)}
.co h3{font-family:var(--font); font-size:20px; margin-bottom:4px}
.co .co-sub{color:var(--muted); font-size:13.5px; margin-bottom:16px}
.co .co-items{display:grid; gap:8px; max-height:230px; overflow:auto; margin-bottom:14px}
.co .co-item{display:flex; align-items:center; gap:10px; padding:9px 11px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; font-size:14px}
.co .co-item .x{margin-left:auto; cursor:pointer; color:var(--dim)} .co .co-item .x:hover{color:#f87171}
.co .co-item .em{font-size:18px}
.co .co-total{display:flex; justify-content:space-between; align-items:baseline; padding:12px 2px; border-top:1px solid var(--line); font-size:15px}
.co .co-total b{font-family:var(--font-display); font-size:26px}
.co .demo-note{font-size:12px; color:var(--dim); margin-top:12px; text-align:center}
.co .co-empty{text-align:center; color:var(--muted); padding:30px 0}

@media(max-width:1240px){
  .hero{grid-template-columns:1fr 1fr; grid-template-areas:"copy copy" "disks cards"; column-gap:16px; row-gap:4px}
  .hero-copy{grid-area:copy; padding-bottom:6px} .hero-copy::before{inset:-18px -6px}
  .hero-disks{grid-area:disks; justify-items:center; padding:0}
  .hero-cards{grid-area:cards; justify-items:center; padding:0}
  .hero-fan{height:360px}
  .hero-fan .fc{width:158px}
  .hero-disks .fc{width:194px}
}
@media(max-width:820px){
  .hero{grid-template-columns:1fr; grid-template-areas:"cards" "copy" "disks"; padding-top:30px; row-gap:2px}
  .hero-fan{height:300px}
  .hero-fan .fc{width:148px}
  .hero-disks .fc{width:182px}
  .nav .links{display:none}
}
@media(max-width:1120px){
  .prices{grid-template-columns:1fr 1fr; max-width:760px}
  .price.disk-price{grid-column:1 / -1}
}
@media(max-width:640px){
  .steps{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .legend{grid-template-columns:repeat(2,1fr)}
  .nav .links{display:none}
}
@media(max-width:480px){
  .nav{gap:10px}
  .brand{font-size:10.5px; gap:7px}
  .brand .mark{width:27px; height:27px; font-size:15px}
  .btn{padding:8px 10px; font-size:12px; gap:5px}
  .wrap{padding:0 14px}
}