/* ============================================================
   FLOPPYSKILL — Website Builder floppies for Claude
   Cream retro-pixel storefront. Charcoal ink, cyan spark.
   The Claude Console CRT stays a dark appliance on the desk.
   ============================================================ */
:root{
  --paper:#ece2d0; --paper2:#e3d7c2; --card:#f5eede;
  --ink:#2a2530; --ink-soft:#4d4656; --muted:#615a6a; --dim:#6f6678;
  --line:rgba(42,37,48,.18); --line2:rgba(42,37,48,.34);
  --cyan:#17cde6; --cyan-deep:#077a93; --violet:#8b5cf6; --magenta:#e934c8;
  --gold:#e8b23a; --gold-deep:#b57f14; --coral:#da7756; --green:#1fa055;
  --shadow-hard:4px 4px 0 var(--ink);
  --shadow-hard-lg:7px 7px 0 var(--ink);
  --maxw:1240px;
  --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(1100px 600px at 82% -10%, rgba(23,205,230,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 4%, rgba(139,92,246,.08), transparent 55%),
    var(--paper);
  -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{margin:0}
h2{font-family:var(--font-pixel); font-weight:400; font-size:clamp(17px,2.4vw,26px); line-height:1.5; letter-spacing:0}
.eyebrow{font-family:var(--font); text-transform:uppercase; letter-spacing:.26em; font-size:11.5px; color:var(--cyan-deep); font-weight:700}

/* paper grain: a faint halftone dot field */
.grain{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(42,37,48,.055) 1px, transparent 1.2px);
  background-size:7px 7px}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:60; backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(236,226,208,.94), rgba(236,226,208,.78));
  border-bottom:2px solid var(--ink)}
.nav{display:flex; align-items:center; gap:20px; height:64px}
.brand{display:flex; align-items:center}
.brand-word{display:block; height:36px; width:auto; image-rendering:-webkit-optimize-contrast}
.nav .links{display:flex; gap:20px; margin-left:10px}
.nav .links a{white-space:nowrap; color:var(--muted); font-size:13.5px; font-weight:700; padding:3px 2px; border-bottom:2px solid transparent; transition:.15s}
.nav .links a:hover{color:var(--ink); border-bottom-color:var(--cyan)}
.nav .spacer{flex:1}

/* pixel-brutalist buttons */
.btn{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; border:2px solid var(--ink); background:var(--card);
  color:var(--ink); padding:9px 15px; border-radius:8px; font-family:var(--font); font-weight:700; font-size:13.5px;
  cursor:pointer; box-shadow:var(--shadow-hard); transition:transform .14s, box-shadow .14s, background .14s}
.btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.btn.primary{background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 rgba(23,205,230,.9)}
.btn.primary:hover{box-shadow:6px 6px 0 rgba(23,205,230,.9)}
.btn.primary:active{box-shadow:1px 1px 0 rgba(23,205,230,.9)}
.btn.cyan{background:var(--cyan); color:#062b33}
.btn.gold{background:linear-gradient(180deg,#f4c95c,var(--gold)); color:#3a2600}
.btn.big{padding:12px 20px; font-size:14.5px}
.ic-floppy{width:15px; height:15px; fill:currentColor; flex:none}
.themebtn{padding:9px 11px}
.themebtn svg{width:15px; height:15px; fill:currentColor; display:block}
.themebtn .ic-sun{display:none}
html[data-theme="dark"] .themebtn .ic-sun{display:block}
html[data-theme="dark"] .themebtn .ic-moon{display:none}
.brand-word.dark, .foot-word.dark{display:none}
html[data-theme="dark"] .brand-word.light, html[data-theme="dark"] .foot-word.light{display:none}
html[data-theme="dark"] .brand-word.dark, html[data-theme="dark"] .foot-word.dark{display:block}
.redeembtn span{white-space:nowrap}
@media(max-width:1240px){ .redeembtn span{display:none} .redeembtn{padding:9px 11px} }
@media(max-width:1380px){ .nav{gap:14px} .nav .links{gap:15px} }
@media(max-width:1080px){ #navBox{display:none} }
.cartbtn{position:relative}
.cartbtn .count{position:absolute; top:-9px; right:-9px; background:var(--magenta); color:#fff; font-size:11px; font-weight:800;
  min-width:20px; height:20px; border-radius:10px; border:2px solid var(--ink); display:grid; place-items:center; padding:0 4px}

/* ---------- scroll reveal (gated on .js so a no-script page stays visible) ---------- */
.js .rv{opacity:0; transform:translateY(18px)}
.js .rv.rev{opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}

/* ---------- hero ---------- */
.hero-wrap{position:relative; z-index:1; overflow:hidden}
.hero{padding:54px 0 30px; display:grid;
  grid-template-columns:1fr minmax(380px,560px) 1fr; column-gap:12px; align-items:center}
.hero-copy{text-align:center; position:relative; z-index:3; padding:8px 6px}
.hero .eyebrow{display:inline-block; margin-bottom:10px}
.hero h1{font-family:var(--font-pixel); font-weight:400; font-size:clamp(17px,2.2vw,27px); line-height:1.65; letter-spacing:0; white-space:nowrap}
.hero h1 .h1-a{color:var(--ink)}
.hero h1 .h1-b{color:var(--cyan-deep); text-shadow:3px 3px 0 rgba(42,37,48,.16)}
.hero h1 .h1-claude{color:var(--coral); font-weight:400}
.hero p.sub{color:var(--muted); font-size:15.5px; line-height:1.7; margin:18px auto 24px; max-width:470px}
.hero p.sub b{color:var(--ink)}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center}
.hero .trust{display:flex; gap:16px; margin-top:26px; color:var(--dim); font-size:12.5px; flex-wrap:wrap; justify-content:center}
.hero .trust span{display:flex; align-items:center; gap:5px}
.hero .trust b{color:var(--ink)}
/* staggered entrance for hero children */
.hero-copy .rv.rev:nth-child(1){transition-delay:.05s}
.hero-copy .rv.rev:nth-child(2){transition-delay:.14s}
.hero-copy .rv.rev:nth-child(3){transition-delay:.24s}
.hero-copy .rv.rev:nth-child(4){transition-delay:.34s}
.hero-copy .rv.rev:nth-child(5){transition-delay:.44s}

/* two mirrored floating floppy fans. FLICKER-PROOF: .fc is the stationary hit
   target (only fan-spread rotation moves it); hover lift lives on inner
   .fc-lift; the idle bob on .fc-float — pointer never loses the disk. */
.hero-fan{position:relative; height:470px; display:grid; place-items:center; perspective:1500px; justify-items:center}
.hero-fan::before{content:""; position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); width:360px; height:360px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(23,205,230,.16), transparent 62%); filter:blur(6px)}
.hero-right::before{background:radial-gradient(circle, rgba(139,92,246,.14), transparent 62%)}
.hero-fan .fc{position:absolute; z-index:1; width:238px; transition:transform .5s cubic-bezier(.2,.75,.2,1);
  transform-origin:50% 130%; cursor:pointer; perspective:700px}
.hero-fan .fc-lift{display:block; transition:transform .28s cubic-bezier(.2,.8,.2,1); will-change:transform; transform-style:preserve-3d}
.hero-fan .fc-float{display:block; animation:floaty 5.6s ease-in-out infinite; animation-delay:var(--d,0s)}
.hero-fan .fc-float img{display:block; width:100%; height:auto;
  filter:drop-shadow(0 24px 28px rgba(42,37,48,.4))}
.hero-fan .fc0{z-index:1; transform:rotate(-11deg) translate(-52px,-22px)}
.hero-fan .fc1{z-index:3; transform:rotate(0deg) translate(0,-46px)}
.hero-fan .fc2{z-index:2; transform:rotate(11deg) translate(52px,-22px)}
.hero-fan .fc1 .fc-float{--d:.7s} .hero-fan .fc2 .fc-float{--d:1.4s}
.hero-fan:hover .fc0{transform:rotate(-16deg) translate(-72px,-28px)}
.hero-fan:hover .fc1{transform:rotate(0deg) translate(0,-58px)}
.hero-fan:hover .fc2{transform:rotate(16deg) translate(72px,-28px)}
.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 img{filter:drop-shadow(0 0 18px rgba(23,205,230,.6)) drop-shadow(0 24px 28px rgba(42,37,48,.35))}
@media(max-width:1380px){ .hero-fan .fc{width:212px} }
/* push the fans outward so the spread disks never crowd the headline */
@media(min-width:1241px){ .hero-left{right:38px} .hero-right{left:38px} }
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-12px) rotate(-1deg)}}

/* ---------- pixel ticker ---------- */
.ticker{position:relative; z-index:2; background:var(--ink); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
  overflow:hidden; padding:11px 0}
.ticker-track{display:flex; align-items:center; width:max-content; white-space:nowrap;
  animation:tick 26s linear infinite}
/* spacing lives ON the items so translateX(-50%) equals exactly one content period */
.ticker-track span{font-family:var(--font-pixel); font-size:10px; letter-spacing:1px; color:var(--paper); text-transform:uppercase; margin-right:26px}
.ticker-track i{font-family:var(--font-pixel); font-style:normal; font-size:10px; color:var(--cyan); margin-right:26px}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- section chrome ---------- */
section{position:relative; z-index:1; scroll-margin-top:76px}
.sec-head{text-align:center; max-width:700px; margin:0 auto 36px}
.sec-head p{color:var(--muted); font-size:15.5px; line-height:1.65; margin-top:14px}
.sec-head p b{color:var(--ink)}
.sec-head h2{margin-top:12px}

/* ============================================================
   BEFORE / AFTER — same prompt, two Claudes
   ============================================================ */
#vs{padding:64px 0 68px}
.vs-prompt{display:flex; align-items:center; gap:12px; justify-content:center; max-width:680px; margin:0 auto 36px}
.vs-prompt .vsp-label{font-family:var(--font-pixel); font-size:8px; letter-spacing:1px; color:var(--paper); background:var(--ink); padding:7px 9px; border-radius:6px; flex:none}
.vs-prompt code{font-family:var(--font); font-size:13.5px; color:var(--ink); background:var(--card); border:2px solid var(--ink); border-radius:10px; padding:10px 16px; box-shadow:3px 3px 0 var(--ink); line-height:1.5}
.vs-duel{display:grid; grid-template-columns:1fr 56px 1fr; gap:18px; align-items:center; max-width:1180px; margin:0 auto}
.vs-side{text-align:center}
.vs-label{display:inline-block; font-family:var(--font-pixel); font-size:9px; letter-spacing:1px; color:var(--muted); border:2px solid var(--line2); border-radius:8px; padding:7px 11px; margin-bottom:14px; text-transform:uppercase; background:var(--card)}
.vs-label.cyan{color:#062b33; background:var(--cyan); border-color:var(--ink); box-shadow:2px 2px 0 var(--ink)}
.vsb{position:relative; border:2px solid var(--ink); border-radius:14px; overflow:visible; background:#fff; box-shadow:var(--shadow-hard-lg); transition:transform .35s, box-shadow .35s}
.vsb-head{display:flex; align-items:center; gap:6px; padding:9px 12px; background:#e9e4d8; border-bottom:2px solid var(--ink); border-radius:12px 12px 0 0}
.vsb-head span{width:9px; height:9px; border-radius:50%; background:rgba(42,37,48,.25)}
.vsb-head i{font-style:normal; margin-left:8px; font-size:10.5px; color:var(--muted); background:rgba(42,37,48,.06); border-radius:6px; padding:3px 10px; letter-spacing:.03em}
.vsb img.vs-shot{display:block; width:100%; height:auto; border-radius:0 0 12px 12px}
.vsb.glow{box-shadow:7px 7px 0 var(--ink), 0 0 34px rgba(139,92,246,.35)}
.vsb-head.dark{background:#171225; border-bottom-color:#000}
.vsb-head.dark span{background:rgba(242,236,255,.25)}
.vsb-head.dark i{color:rgba(242,236,255,.6); background:rgba(242,236,255,.08)}
.vs-side.before .vsb{filter:saturate(.85)}
.vs-side.before .vsb:hover{transform:translateY(-4px)}
.vs-side.after .vsb:hover{transform:translateY(-6px) rotate(-.5deg); box-shadow:9px 9px 0 var(--ink), 0 0 46px rgba(23,205,230,.5)}
.vsb img.vs-floppy{position:absolute; width:118px; height:auto; right:-18px; bottom:-24px; transform:rotate(10deg);
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)); transition:transform .35s}
.vs-side.after .vsb:hover img.vs-floppy{transform:rotate(6deg) translateY(-6px)}
.vs-badge{font-family:var(--font-pixel); font-size:15px; color:#fff; background:var(--magenta); border:2px solid var(--ink); border-radius:12px; padding:12px 8px; box-shadow:3px 3px 0 var(--ink); text-align:center; transform:rotate(-6deg)}
.vs-cap{color:var(--muted); font-size:13px; margin-top:14px; line-height:1.55}
.vs-cta{text-align:center; margin-top:34px}
@media(max-width:900px){
  .vs-duel{grid-template-columns:1fr; gap:28px}
  .vs-badge{justify-self:center; width:56px}
  .vs-prompt{flex-direction:column}
}

/* shared entrance keyframes (used by .disk and .ci-card) */
@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)}}

/* ============================================================
   THE FLOPPIES — shelf (left) + the CLAUDE CONSOLE (right)
   ============================================================ */
#disks{padding:64px 0}

/* category header: the mascot codes the title in, live */
.cat-line{display:flex; align-items:center; gap:14px; margin:6px 0 26px}
.cat-masc{width:46px; height:auto; filter:drop-shadow(3px 4px 0 rgba(42,37,48,.3));
  animation:catbob 1.05s ease-in-out infinite; transform-origin:50% 90%}
@keyframes catbob{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-3px)}}
.cat-line.typed .cat-masc{animation:midle 3.4s ease-in-out infinite}
.cat-term{display:inline-flex; align-items:center; font-family:var(--font-pixel); font-size:13px; letter-spacing:1px;
  color:var(--paper); background:var(--ink); border:2px solid var(--ink); border-radius:10px; padding:13px 16px;
  box-shadow:4px 4px 0 rgba(23,205,230,.85)}
.cat-term .cat-prompt{font-style:normal; color:var(--cyan); margin-right:2px}
.cat-term b{font-weight:400; color:var(--paper); min-height:1em}
.cat-caret{display:inline-block; width:9px; height:15px; margin-left:5px; background:var(--cyan);
  animation:caretblink .85s steps(2) infinite}
@keyframes caretblink{50%{opacity:0}}
@media(max-width:560px){ .cat-term{font-size:10px; padding:11px 12px} .cat-masc{width:38px} }

.disks-layout{display:grid; grid-template-columns:1fr 412px; gap:28px; align-items:start}

/* the shelf — 3 columns, floppies FLOAT free (no cards, POWERDECK style) */
.disk-grid{order:1; display:grid; grid-template-columns:repeat(3,1fr); gap:30px 20px}
.disk{position:relative; cursor:pointer; text-align:center; perspective:800px;
  animation:rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0ms)}
.disk .disk-img{position:relative; display:block; width:100%; will-change:transform; transform-style:preserve-3d;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), filter .38s;
  filter:drop-shadow(0 18px 24px rgba(42,37,48,.34))}
.disk .disk-img img{display:block; width:100%; height:auto}
.disk:hover .disk-img{transform:translateY(-10px) rotate(-1.6deg) scale(1.045);
  filter:drop-shadow(0 0 16px rgba(23,205,230,.55)) drop-shadow(0 22px 30px rgba(42,37,48,.3))}
.disk .disk-body{padding:14px 6px 0}
.disk .disk-name{font-family:var(--font-pixel); font-size:12px; line-height:1.5; color:var(--ink)}
.disk .disk-sub{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; margin-top:6px}
.disk .disk-desc{font-size:12.5px; color:var(--muted); line-height:1.55; margin-top:8px; max-width:340px; margin-left:auto; margin-right:auto}
.disk .disk-cta{display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:12px; font-weight:700;
  color:#062b33; border:2px solid var(--ink); border-radius:8px; padding:6px 12px;
  background:var(--cyan); box-shadow:3px 3px 0 var(--ink); transition:.2s}
.disk .disk-cta .ic-floppy{width:13px; height:13px}
.disk:hover .disk-cta{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink)}
.disk.inserted .disk-img{filter:drop-shadow(0 0 16px rgba(31,160,85,.5)) drop-shadow(0 16px 24px rgba(42,37,48,.3))}
.disk.inserted .disk-img::after{content:"✓ INSTALLED"; position:absolute; top:8px; right:11%; z-index:2;
  font-family:var(--font-pixel); font-size:7px; letter-spacing:1px; color:#eafff2; background:var(--green);
  border:2px solid var(--ink); border-radius:7px; padding:6px 8px; box-shadow:2px 2px 0 rgba(42,37,48,.45);
  animation:stampin .5s cubic-bezier(.2,1.8,.3,1) both}
@keyframes stampin{0%{transform:scale(0) rotate(-24deg)}65%{transform:scale(1.25) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
/* two-state chip: Loaded at rest, Eject on hover */
.disk-cta.loaded{color:#0b3a20; background:#8fe6b4; border-color:var(--ink); cursor:pointer}
.disk-cta.loaded .c-off{display:none}
.disk-cta.loaded:hover{background:#ffcfc4; color:#7a1d16; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink)}
.disk-cta.loaded:hover .c-on{display:none}
.disk-cta.loaded:hover .c-off{display:inline}
.disk-cta.boxed{color:#0b3a20; background:#8fe6b4; border-color:var(--ink)}
/* install landing: the disk FLIPS into place in real 3D, with a green pulse ring */
.disk.landed .disk-img{animation:landed .95s cubic-bezier(.2,1.4,.3,1)}
@keyframes landed{0%{transform:rotateY(85deg) scale(.88)}55%{transform:rotateY(-12deg) scale(1.07)}80%{transform:rotateY(5deg) scale(1)}100%{transform:none}}
.disk.landed .disk-img::before{content:""; position:absolute; inset:6%; border-radius:22px; z-index:1; pointer-events:none;
  animation:installring .8s ease-out .25s both}
@keyframes installring{0%{box-shadow:0 0 0 0 rgba(31,160,85,.55)}100%{box-shadow:0 0 0 30px rgba(31,160,85,0)}}
/* eject: counter-flip out with a settle */
.disk.ejecting .disk-img{animation:ejected .7s cubic-bezier(.3,1.3,.4,1)}
@keyframes ejected{0%{transform:rotateY(-55deg) translateY(-6px) scale(.94)}60%{transform:rotateY(9deg) scale(1.02)}100%{transform:none}}
.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 20px rgba(42,37,48,.4))}

/* ============================================================
   THE CLAUDE CONSOLE — a beige retro computer that belongs to
   this desk: cream shell, ink lines, hard pixel shadow. Only
   the CRT glass stays dark, the way screens should.
   ============================================================ */
.console{order:2; position:sticky; top:84px; align-self:start; border-radius:16px; overflow:hidden;
  background:var(--card); border:2px solid var(--ink); box-shadow:var(--shadow-hard-lg)}
.console-head{display:flex; align-items:center; gap:7px; padding:12px 16px; background:var(--ink)}
.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(--paper)}
.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: beige Macintosh plastic around dark glass */
.crt{margin:18px 18px 8px; position:relative}
.crt-screen{position:relative; aspect-ratio:4/3; border-radius:14px 14px 11px 11px; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 20%, #16324a, #071522 70%, #04101a);
  border:7px solid #ddd0ba; box-shadow:0 0 0 2px var(--ink), 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 2px var(--ink), 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 2px var(--ink), inset 0 0 40px rgba(0,0,0,.6),
    inset 0 0 90px rgba(255,207,92,.4), 0 0 26px rgba(255,207,92,.3)}
.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 rig (Claudie) — 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}
.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)}}

.claudie{position:absolute; left:50%; top:50%; width:52%; transform:translate(-50%,-50%); z-index:2}
/* THE POWER-UP PARTY: shades drop, disco floor lights, confetti falls */
.cl-shades{opacity:0; transform:translateY(-30px)}
.crt[data-state="powered"] .cl-shades{opacity:1; transform:none;
  animation:shadesdrop .55s cubic-bezier(.3,1.5,.4,1) .3s both}
@keyframes shadesdrop{0%{opacity:0; transform:translateY(-30px)}70%{opacity:1; transform:translateY(3px)}100%{opacity:1; transform:none}}
.disco{position:absolute; left:-12%; right:-12%; bottom:-8%; height:44%; z-index:1; opacity:0; pointer-events:none;
  background:repeating-conic-gradient(rgba(23,205,230,.4) 0 25%, rgba(139,92,246,.4) 0 50%) 0 0/46px 46px;
  transform:perspective(280px) rotateX(56deg); transform-origin:50% 100%; transition:opacity .5s}
.crt[data-state="powered"] .disco{opacity:.5; animation:discohue 2.6s linear infinite}
@keyframes discohue{to{filter:hue-rotate(360deg)}}
.crt-confetti{position:absolute; inset:0; z-index:4; pointer-events:none}
.crt-confetti i{position:absolute; top:-8%; width:7px; height:7px; opacity:0}
.crt[data-state="powered"] .crt-confetti i{animation:confall 2.2s linear infinite}
.crt-confetti i:nth-child(1){left:12%; background:#17cde6; animation-delay:0s}
.crt-confetti i:nth-child(2){left:30%; background:#e934c8; animation-delay:.5s}
.crt-confetti i:nth-child(3){left:47%; background:#f4c95c; animation-delay:.9s}
.crt-confetti i:nth-child(4){left:63%; background:#8b5cf6; animation-delay:.2s}
.crt-confetti i:nth-child(5){left:78%; background:#4ade80; animation-delay:1.3s}
.crt-confetti i:nth-child(6){left:90%; background:#17cde6; animation-delay:.7s}
@keyframes confall{0%{opacity:0; transform:translateY(0) rotate(0)}8%{opacity:.9}
  100%{opacity:0; transform:translateY(230px) rotate(340deg)}}
/* Pip and friends: one star pet per installed floppy, dancing with Claudie */
.pets{position:absolute; left:7%; bottom:9%; z-index:3; display:flex; gap:1px; align-items:flex-end}
.pets .petbox{width:50px; display:block; animation:petin .5s cubic-bezier(.2,1.7,.3,1) both}
.pets .petbox:nth-child(2){animation-delay:.09s; width:44px}
.pets .petbox:nth-child(3){animation-delay:.18s; width:40px}
@keyframes petin{0%{transform:scale(0) translateY(12px)}100%{transform:none}}
.claudie .cl-spark{transform-origin:60px 87px; animation:mspin 8s linear infinite}
@keyframes mspin{to{transform:rotate(360deg)}}
.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)}}
.crt[data-state="powered"] .claudie{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 ---- */
.crt[data-state="powered"] .m-all{animation:d-bounce 1s ease-in-out infinite}
@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;
  opacity:0; transform:translateY(8px) scale(.9); transition:.4s}
.crt-scene img{display:block; width:100%; height:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.7))}
.crt[data-state="reading"] .crt-scene, .crt[data-state="powered"] .crt-scene{opacity:1; transform:translateY(0) scale(1)}
/* the RACK: every installed floppy stands as a mini disk, fanned bottom-right */
.crt-scene.stack{opacity:1; transform:none; width:auto; max-width:62%; right:10px; bottom:30px;
  display:flex; align-items:flex-end; justify-content:flex-end}
.crt-scene.stack img{width:46px; margin-left:-17px;
  transform:rotate(calc(var(--i,0) * 5deg - 8deg)) translateY(calc(var(--i,0) * -2px));
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)); transition:transform .3s}
.crt-scene.stack img:first-child{margin-left:0}
.crt-scene.stack img:hover{transform:translateY(-8px) rotate(0deg)}

/* 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:#22d3ee; text-shadow:0 0 8px rgba(34,211,238,.6);
  opacity:0; transition:.2s}
.crt[data-state="reading"] .crt-readout, .crt[data-state="powered"] .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: beige plastic, ink outline */
.crt-base{margin:-2px 26px 0; height:44px; border-radius:0 0 12px 12px; position:relative;
  background:linear-gradient(180deg,#e4d8c2,#cbbc9f); border:2px solid var(--ink); border-top:none;
  box-shadow:3px 4px 0 rgba(42,37,48,.25); display:flex; align-items:center; justify-content:space-between; padding:0 16px}
.crt-brand{font-family:var(--font-pixel); font-size:9px; color:#5c5344; letter-spacing:1px}
.crt-brand b{color:var(--cyan-deep)}
.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 */
.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:44px; height:44px; border-radius:10px; overflow:hidden; flex:none; padding:3px;
  background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(139,92,246,.2)); border:1px solid var(--line2)}
.ci-ico img{display:block; width:100%; height:100%; object-fit:contain}
.ci-name{font-size:15px; font-weight:800; color:var(--ink); line-height:1.2}
.ci-sub{font-size:11px; 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 the console ---- */
.console-order{padding:0 20px 20px; border-top:1px solid var(--line); margin-top:4px}
.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(42,37,48,.05); 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(--cyan-deep); 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-pixel); font-size:17px; color:var(--ink); font-weight:400}
.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}
.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; font-family:var(--font)}
.ord-upsell:hover{color:var(--ink); border-color:#22d3ee; background:rgba(34,211,238,.07)}

@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(3,1fr)}
}
@media(max-width:860px){.disk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.disk-grid{grid-template-columns:1fr}}

/* ============================================================
   BUNDLE BONUS — 10 template floppies, one compact strip
   ============================================================ */
#bundle{padding:68px 0 14px}
/* two shelves of five: big disks, shingled rows, mobile-friendly */
.tpl-strip{display:flex; flex-direction:column; align-items:center; width:100%; max-width:1220px; position:relative;
  margin:0 auto; padding:26px 0 14px; background:none; border:none; cursor:pointer; perspective:900px}
.tpl-strip::before{content:""; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:0;
  width:min(980px,94%); height:min(420px,90%); border-radius:50%;
  background:radial-gradient(ellipse, rgba(23,205,230,.16), rgba(139,92,246,.08) 55%, transparent 70%); filter:blur(10px)}
.tpl-row{display:flex; justify-content:center; align-items:flex-end; flex-wrap:nowrap}
.tpl-row + .tpl-row{margin-top:-34px; transform:translateX(46px)}
.tpl-strip img{position:relative; width:192px; height:auto; margin-left:-46px; z-index:1;
  filter:drop-shadow(0 15px 20px rgba(42,37,48,.38));
  transition:transform .28s cubic-bezier(.2,.9,.3,1.3), filter .28s; transform:rotate(var(--r,0deg))}
.tpl-row img:first-child{margin-left:0}
.tpl-strip img:nth-child(odd){--r:-2.5deg}
.tpl-strip img:nth-child(even){--r:2deg; align-self:flex-start}
.tpl-strip img:hover{z-index:5; transform:rotate(0deg) translateY(-20px) scale(1.24);
  filter:drop-shadow(0 0 18px rgba(23,205,230,.65)) drop-shadow(0 18px 22px rgba(42,37,48,.32))}
.tpl-strip:hover img:not(:hover){opacity:.82}
.bundle-cta{text-align:center; margin-top:26px}
.bundle-note{margin-top:12px; font-size:12px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase}
@media(max-width:900px){
  .tpl-strip img{width:19vw; min-width:96px; margin-left:-4.5vw}
  .tpl-row:nth-child(3){margin-top:-3vw; transform:translateX(6vw)}
}

/* ============================================================
   COMBOS — floppies stack
   ============================================================ */
#combos{padding:60px 0}
/* three clickable recipes: each is a fanned HAND of floppies, constant height
   no matter how many disks are in the mix. Click = fly to the bundle. */
.combo-list{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1150px; margin:0 auto; align-items:start}
.combo{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  padding:16px 10px 20px; border-radius:16px; cursor:pointer; transition:transform .25s, background .25s}
.combo:hover{transform:translateY(-4px); background:rgba(23,205,230,.05)}
.combo:focus-visible{outline:3px solid var(--cyan); outline-offset:4px}
.combo-fan{position:relative; height:168px; display:flex; justify-content:center; align-items:flex-end; width:100%; max-width:100%}
.combo-fan img{width:146px; height:auto; margin-left:-66px; transform-origin:50% 130%;
  transform:rotate(var(--fr,0deg)) translateY(var(--fy,0px));
  filter:drop-shadow(0 10px 14px rgba(42,37,48,.35));
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.combo-fan img:first-child{margin-left:0}
.combo-fan.n2 img:nth-child(1){--fr:-7deg; --fy:4px}
.combo-fan.n2 img:nth-child(2){--fr:7deg; --fy:4px}
.combo-fan.n3 img{width:132px; margin-left:-60px}
.combo-fan.n3 img:nth-child(1){--fr:-12deg; --fy:8px}
.combo-fan.n3 img:nth-child(2){--fr:0deg; --fy:0px}
.combo-fan.n3 img:nth-child(3){--fr:12deg; --fy:8px}
.combo-fan.n4 img{width:114px; margin-left:-52px}
.combo-fan.n4 img:nth-child(1){--fr:-16deg; --fy:10px}
.combo-fan.n4 img:nth-child(2){--fr:-5deg; --fy:1px}
.combo-fan.n4 img:nth-child(3){--fr:5deg; --fy:1px}
.combo-fan.n4 img:nth-child(4){--fr:16deg; --fy:10px}
/* hover: the hand spreads open */
.combo:hover .combo-fan img{transform:rotate(calc(var(--fr,0deg) * 1.7)) translateY(calc(var(--fy,0px) - 6px)) scale(1.04);
  filter:drop-shadow(0 0 14px rgba(23,205,230,.5)) drop-shadow(0 12px 16px rgba(42,37,48,.3))}
.combo-formula{position:relative; z-index:2; margin-top:4px; font-family:var(--font); font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted)}
.combo-formula i{font-style:normal; font-family:var(--font-pixel); color:var(--magenta); font-size:10px; margin:0 5px}
.tstyle{font-family:var(--font-pixel); font-size:7px; color:#062b33; background:var(--cyan);
  border:2px solid var(--ink); border-radius:5px; padding:2px 4px; margin-left:6px;
  vertical-align:2px; box-shadow:1.5px 1.5px 0 var(--ink)}
.combo-out h4{margin:0; font-family:var(--font-pixel); font-weight:400; font-size:12px; line-height:1.5}
.combo-out h4::after{content:""; display:block; width:0; height:3px; background:var(--cyan); margin:7px auto 0;
  transition:width .35s cubic-bezier(.2,.8,.2,1)}
.combo:hover .combo-out h4::after{width:56px}
.combo-out p{margin:9px auto 0; color:var(--muted); font-size:12.5px; line-height:1.6; max-width:280px}
html[data-theme="dark"] .combo-fan img{filter:drop-shadow(0 10px 16px rgba(0,0,0,.6))}
html[data-theme="dark"] .combo:hover{background:rgba(23,205,230,.06)}
@media(max-width:900px){
  .combo-list{grid-template-columns:1fr; max-width:440px; gap:30px}
}

/* ============================================================
   PRICING
   ============================================================ */
#pricing{padding:64px 0}
.prices{display:grid; grid-template-columns:1fr 1.25fr; gap:26px; max-width:850px; margin:0 auto; align-items:start}
.price[role="button"]{cursor:pointer; transition:transform .22s, box-shadow .22s}
.price[role="button"]:hover{transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--ink)}
.price.feat[role="button"]:hover{box-shadow:10px 10px 0 rgba(23,205,230,.85), 10px 10px 0 2px var(--ink)}

/* whimsical bundle flash: combos point here and the box does a little dance */
.price.feat.flash{animation:boxflash 1.5s cubic-bezier(.2,.8,.2,1)}
@keyframes boxflash{
  0%{transform:scale(1)}
  14%{transform:scale(1.04) rotate(-.7deg); box-shadow:0 0 0 10px rgba(233,52,200,.45), 12px 12px 0 rgba(23,205,230,.85), 12px 12px 0 2px var(--ink)}
  34%{transform:scale(.99) rotate(.5deg)}
  54%{transform:scale(1.02) rotate(-.2deg); box-shadow:0 0 0 18px rgba(233,52,200,0), 9px 9px 0 rgba(23,205,230,.85), 9px 9px 0 2px var(--ink)}
  100%{transform:none}}

.price{background:var(--card); border:2px solid var(--ink); border-radius:16px; padding:30px 26px; position:relative;
  box-shadow:var(--shadow-hard)}
.price.feat{background:linear-gradient(180deg,#fdf8ec,var(--card)); box-shadow:8px 8px 0 rgba(23,205,230,.85), 8px 8px 0 2px var(--ink)}
.price .tag{position:absolute; top:-14px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--font-pixel); font-size:8px; letter-spacing:1px; background:var(--cyan); color:#062b33;
  border:2px solid var(--ink); padding:6px 11px; border-radius:16px; box-shadow:2px 2px 0 var(--ink)}
.price .tag.gold-tag{background:linear-gradient(90deg,#f4c95c,var(--gold)); color:#3a2600}
.price h3{font-family:var(--font); font-size:19px; font-weight:800}
.price .amt{font-family:var(--font-pixel); font-size:34px; margin:14px 0 4px; line-height:1; color:var(--ink)}
.price .strike{font-family:var(--font); color:var(--dim); text-decoration:line-through; font-size:15px}
.price .save{font-family:var(--font); color:var(--green); font-weight:700; font-size:13px; margin-left:6px}
.price .amt-sub{color:var(--muted); font-size:13px; margin-top:6px}
.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:13.5px; line-height:1.5}
.price li .ck{color:var(--green); flex:none; font-weight:800}
.price .btn{width:100%; justify-content:center; padding:13px}

/* FREE chip: the gift marker, used everywhere the bonus templates appear */
.free{display:inline-block; font-family:var(--font-pixel); font-size:.62em; font-weight:400; letter-spacing:1px;
  color:#0b3a20; background:#8fe6b4; border:2px solid var(--ink); border-radius:6px; padding:2px 6px;
  box-shadow:2px 2px 0 rgba(42,37,48,.4); vertical-align:1px; line-height:1}
.btn .free{font-size:.7em; margin:0 2px}
.free-hl{color:var(--green); text-shadow:2px 2px 0 rgba(42,37,48,.18)}
html[data-theme="dark"] .free-hl{text-shadow:2px 2px 0 rgba(0,0,0,.5)}

/* the $39 box is FULL: builders peek out of the top, templates spill the corners */
.pb-minis{position:absolute; inset:0; pointer-events:none}
.pb-minis .m{position:absolute; height:auto; filter:drop-shadow(0 8px 10px rgba(42,37,48,.35))}
.pb-b1{width:96px; top:-62px; left:2%; transform:rotate(-10deg); z-index:-1}
.pb-b2{width:90px; top:-50px; left:14%; transform:rotate(6deg); z-index:-1}
.pb-b5{width:86px; top:-42px; left:26%; transform:rotate(-4deg); z-index:-1}
.pb-b6{width:86px; top:-44px; right:26%; transform:rotate(5deg); z-index:-1}
.pb-b3{width:90px; top:-52px; right:14%; transform:rotate(-6deg); z-index:-1}
.pb-b4{width:96px; top:-64px; right:2%; transform:rotate(10deg); z-index:-1}
.pb-t1{width:56px; bottom:-24px; left:-30px; transform:rotate(-16deg); z-index:2}
.pb-t2{width:56px; bottom:-30px; left:8px; transform:rotate(-7deg); z-index:2}
.pb-t3{width:56px; bottom:-34px; left:48px; transform:rotate(3deg); z-index:2}
.pb-t4{width:56px; bottom:-30px; left:88px; transform:rotate(11deg); z-index:2}
.pb-t5{width:56px; bottom:-24px; left:128px; transform:rotate(18deg); z-index:2}
.pb-t6{width:56px; bottom:-24px; right:126px; transform:rotate(-18deg); z-index:2}
.pb-t7{width:56px; bottom:-30px; right:86px; transform:rotate(-10deg); z-index:2}
.pb-t8{width:56px; bottom:-34px; right:46px; transform:rotate(2deg); z-index:2}
.pb-t9{width:56px; bottom:-30px; right:6px; transform:rotate(9deg); z-index:2}
.pb-t10{width:56px; bottom:-22px; right:-32px; transform:rotate(17deg); z-index:2}
.price .tag{z-index:3}
.price.feat{margin-top:34px}
html[data-theme="dark"] .pb-minis .m{filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}
@media(max-width:640px){
  .pb-b5, .pb-b6, .pb-t1, .pb-t10{display:none}
  .pb-t2{left:-14px} .pb-t9{right:-14px}
}

/* ============================================================
   FAQ
   ============================================================ */
#faq{padding:56px 0 64px}
.faq-list{max-width:820px; margin:0 auto; display:grid; gap:12px}
.faq{background:var(--card); border:2px solid var(--ink); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-hard)}
.faq summary{cursor:pointer; padding:17px 20px; font-weight:700; font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{color:var(--cyan-deep); transition:.25s}
.faq[open] summary .chev{transform:rotate(180deg)}
.faq p{margin:0; padding:0 20px 18px; color:var(--muted); font-size:14px; line-height:1.65}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--ink); margin-top:20px; padding:32px 0; color:var(--dim); font-size:13px; background:var(--paper2)}
.foot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
.foot-word{display:block; height:20px; width:auto; opacity:.9}

/* ---------- toast ---------- */
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(30px); z-index:120; opacity:0; transition:.3s;
  background:var(--ink); color:var(--paper); border:2px solid var(--ink); box-shadow:4px 4px 0 rgba(23,205,230,.8);
  font-weight:700; font-size:13.5px; padding:12px 20px; border-radius:10px}
.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(42,37,48,.5); backdrop-filter:blur(4px)}
.co .co-box{position:relative; z-index:2; width:min(470px,92vw); background:var(--card); border:2px solid var(--ink);
  border-radius:16px; padding:26px; box-shadow:10px 10px 0 rgba(42,37,48,.35)}
.co h3{font-family:var(--font-pixel); font-weight:400; font-size:14px; margin-bottom:8px}
.co .co-sub{color:var(--muted); font-size:13.5px; margin-bottom:16px}
.co .co-items{display:grid; gap:8px; max-height:250px; overflow:auto; margin-bottom:14px}
.co .co-item{display:flex; align-items:center; gap:10px; padding:8px 10px; background:rgba(42,37,48,.04);
  border:1px solid var(--line2); border-radius:10px; font-size:13.5px}
.co .co-item .em{width:36px; height:36px; flex:none}
.co .co-item .em img{display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(42,37,48,.3))}
.co .co-item .em.gold{display:grid; place-items:center; background:linear-gradient(135deg,#f4c95c,var(--gold))}
.co .co-item .em.gold img{width:22px; height:22px; object-fit:contain}
.co .co-item .x{margin-left:auto; cursor:pointer; color:var(--dim); font-weight:700; background:none; border:none;
  font-family:inherit; font-size:14px; padding:2px 4px} .co .co-item .x:hover{color:#c81e4a}
.co .co-total{display:flex; justify-content:space-between; align-items:baseline; padding:12px 2px; border-top:2px dashed var(--line2); font-size:14px}
.co .co-total b{font-family:var(--font-pixel); font-size:19px; font-weight:400}
.co .demo-note{font-size:11.5px; color:var(--dim); margin-top:12px; text-align:center; line-height:1.5}
.co .co-empty{text-align:center; color:var(--muted); padding:30px 0}
.cm-close{position:absolute; top:12px; right:12px; z-index:5; width:32px; height:32px; border-radius:9px; border:2px solid var(--ink);
  background:var(--card); color:var(--ink); cursor:pointer; font-size:15px; box-shadow:2px 2px 0 var(--ink)}
.cm-close:hover{background:var(--paper2)}

/* ---------- responsive ---------- */
@media(max-width:1240px){
  .hero{grid-template-columns:1fr 1fr; grid-template-areas:"copy copy" "left right"; column-gap:16px; row-gap:4px}
  .hero-copy{grid-area:copy; padding-bottom:6px}
  .hero-left{grid-area:left} .hero-right{grid-area:right}
  .hero-fan{height:350px}
  .hero-fan .fc{width:172px}
}
@media(max-width:820px){
  .hero{grid-template-columns:1fr; grid-template-areas:"copy" "left"; padding-top:34px}
  .hero-right{display:none}
  .hero-fan{height:300px}
  .hero-fan .fc{width:158px}
  .nav .links{display:none}
  .combo-list{grid-template-columns:1fr; max-width:420px}
}
@media(max-width:640px){
  .prices{grid-template-columns:1fr}
  .nav .links{display:none}
}
@media(max-width:560px){
  #navBox{display:none}
  .nav{gap:12px}
}
@media(max-width:480px){
  .nav{gap:10px}
  .brand-word{height:26px}
  .btn{padding:8px 10px; font-size:12px; gap:5px}
  .wrap{padding:0 14px}
}

/* honor prefers-reduced-motion for every decorative loop; keep end states */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1; transform:none}
  .hero-fan .fc-float, .ticker-track,
  .mascot .m-all, .mascot .m-eye, .mascot .m-arm, .mascot .m-body,
  .claudie .cl-spark,
  .crt .m-all, .crt-slot::after, .crt-led, .crt-burst,
  .crt[data-state] .m-all, .crt[data-state] .m-body,
  .crt[data-state] .claudie, .ord-item, .ci-card, .ord-grow.bump,
  .pets .petbox, .disk.landed .disk-img::before,
  .cl-shades, .disco, .crt-confetti i, .cat-masc, .cat-caret,
  .disk, .disk.reading .disk-img{animation:none !important}
  .disk-fly{transition:none}
  .crt-confetti{display:none}
}

/* ============================================================
   DARK MODE — midnight computer store. Toggled by #themeBtn,
   persisted as floppyskill_theme. Same brutalism, inverted ink.
   ============================================================ */
html[data-theme="dark"]{
  --paper:#141019; --paper2:#0e0b13; --card:#201a29;
  --ink:#efe8db; --ink-soft:#cfc7d6; --muted:#a89fb3; --dim:#867c92;
  --line:rgba(239,232,219,.14); --line2:rgba(239,232,219,.3);
  --cyan-deep:#2fc4de; --green:#3ecf7d;
  --shadow-hard:4px 4px 0 var(--ink);
  --shadow-hard-lg:7px 7px 0 var(--ink);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(1100px 600px at 82% -10%, rgba(23,205,230,.08), transparent 60%),
    radial-gradient(900px 600px at 8% 4%, rgba(139,92,246,.12), transparent 55%),
    var(--paper);
}
html[data-theme="dark"] .grain{background-image:radial-gradient(rgba(239,232,219,.05) 1px, transparent 1.2px)}
html[data-theme="dark"] header{background:linear-gradient(180deg, rgba(20,16,25,.94), rgba(20,16,25,.8))}
html[data-theme="dark"] .btn.primary{box-shadow:4px 4px 0 rgba(23,205,230,.75)}
html[data-theme="dark"] .btn.primary:hover{box-shadow:6px 6px 0 rgba(23,205,230,.75)}
html[data-theme="dark"] .hero h1 .h1-b{text-shadow:3px 3px 0 rgba(0,0,0,.55)}
html[data-theme="dark"] .hero h1 .h1-claude{color:#e2896c}
html[data-theme="dark"] .hero-fan .fc-float img{filter:drop-shadow(0 24px 30px rgba(0,0,0,.65))}
html[data-theme="dark"] .hero-fan .fc:hover .fc-float img{filter:drop-shadow(0 0 18px rgba(23,205,230,.65)) drop-shadow(0 24px 30px rgba(0,0,0,.6))}
html[data-theme="dark"] .disk .disk-img{filter:drop-shadow(0 18px 26px rgba(0,0,0,.6))}
html[data-theme="dark"] .disk:hover .disk-img{filter:drop-shadow(0 0 16px rgba(23,205,230,.6)) drop-shadow(0 22px 32px rgba(0,0,0,.55))}
html[data-theme="dark"] .disk.inserted .disk-img{filter:drop-shadow(0 0 16px rgba(62,207,125,.55)) drop-shadow(0 16px 26px rgba(0,0,0,.55))}
html[data-theme="dark"] .combo-disks img{filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
html[data-theme="dark"] .price.feat{background:linear-gradient(180deg,#2a2136,var(--card))}
html[data-theme="dark"] .cd img{filter:drop-shadow(0 9px 14px rgba(0,0,0,.6))}
html[data-theme="dark"] .crt-brand{color:#5c5344}
html[data-theme="dark"] .co .co-scrim{background:rgba(0,0,0,.66)}
html[data-theme="dark"] .co .co-box{box-shadow:10px 10px 0 rgba(0,0,0,.5)}
html[data-theme="dark"] .vsb{background:#1a1522}
html[data-theme="dark"] .vsb-head{background:#241e30; border-bottom-color:#000}
html[data-theme="dark"] .vsb-head span{background:rgba(239,232,219,.25)}
html[data-theme="dark"] .vsb-head i{color:rgba(239,232,219,.55); background:rgba(239,232,219,.08)}
html[data-theme="dark"] .toast{box-shadow:4px 4px 0 rgba(23,205,230,.7)}
html[data-theme="dark"] .tpl-strip img{filter:drop-shadow(0 10px 16px rgba(0,0,0,.6))}
html[data-theme="dark"] .tpl-strip img:hover{filter:drop-shadow(0 0 14px rgba(23,205,230,.65)) drop-shadow(0 14px 18px rgba(0,0,0,.55))}

/* ============================================================
   CHECKOUT PAGE — pixel Stripe. Left: order. Right: payment.
   Token-driven, so light and dark both work.
   ============================================================ */
.ck-body{min-height:100vh}
.ck-shell [hidden]{display:none !important}
.ck-shell{display:grid; grid-template-columns:1fr 1fr; max-width:1080px; margin:0 auto; gap:44px;
  padding:44px 22px 70px; align-items:start}
.ck-top{display:flex; align-items:center; gap:14px; margin-bottom:30px}
.ck-back{font-size:13px; font-weight:700; color:var(--muted); border-bottom:2px solid transparent}
.ck-back:hover{color:var(--ink); border-bottom-color:var(--cyan)}
.ck-title{font-family:var(--font-pixel); font-size:13px; margin:26px 0 18px}
.ck-items{display:grid; gap:10px}
.ck-item{display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--card);
  border:2px solid var(--ink); border-radius:12px; box-shadow:3px 3px 0 var(--ink); font-size:13.5px}
.ck-item .em{width:44px; height:44px; flex:none}
.ck-item .em img{display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.boxico{display:block; width:100%; height:100%}
.ck-item .nm{flex:1; line-height:1.35}
.ck-item .nm small{display:block; color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.06em}
.ck-item b{font-family:var(--font-pixel); font-size:11px}
.ck-item .x{margin-left:4px; cursor:pointer; color:var(--dim); background:none; border:none; font:inherit; font-weight:700}
.ck-item .x:hover{color:#c81e4a}
.ck-item.bonus{border-style:dashed; box-shadow:none; background:transparent}
.ck-item.bonus b{color:var(--green)}
.ck-bonus-strip{display:flex; margin:2px 0 0 4px}
.ck-bonus-strip img{width:34px; height:auto; margin-left:-12px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.ck-bonus-strip img:first-child{margin-left:0}
.ck-disc{display:flex; gap:10px; margin:18px 0 4px}
.ck-disc input{flex:1; text-transform:uppercase}
.ck-discline{display:flex; justify-content:space-between; font-size:13px; color:var(--green); font-weight:700; margin-top:10px}
.ck-discline button{background:none; border:none; color:var(--dim); cursor:pointer; font:inherit; font-size:12px}
.ck-discline button:hover{color:#c81e4a}
.ck-totals{margin-top:18px; border-top:2px dashed var(--line2); padding-top:14px; display:grid; gap:8px; font-size:14px}
.ck-totals>div{display:flex; justify-content:space-between; align-items:baseline}
.ck-totals .grand b{font-family:var(--font-pixel); font-size:19px}
.ck-empty{color:var(--muted); padding:30px 0; font-size:14.5px; line-height:1.6}
/* the payment card */
.ck-card{background:var(--card); border:2px solid var(--ink); border-radius:16px; box-shadow:var(--shadow-hard-lg); overflow:hidden}
.ck-cardhead{display:flex; align-items:center; gap:7px; padding:12px 16px; background:var(--ink); color:var(--paper)}
.ck-cardhead .dot{width:10px; height:10px; border-radius:50%}
.ck-cardhead .dot.r{background:#ff5f57}.ck-cardhead .dot.y{background:#febc2e}.ck-cardhead .dot.g{background:#28c840}
.ck-cardhead span{font-family:var(--font-pixel); font-size:9px; letter-spacing:1px; margin-left:6px}
.ck-cardhead i{font-style:normal; margin-left:auto; font-size:11px; font-weight:700; color:var(--cyan)}
.ck-card form{padding:22px 22px 24px; display:grid; gap:15px}
.ck-card label{display:grid; gap:7px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ck-card input, .ck-card select, .ck-disc input{font-family:var(--font); font-size:14.5px; color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:9px; padding:11px 13px; outline:none;
  box-shadow:inset 2px 2px 0 rgba(42,37,48,.08); transition:box-shadow .15s, border-color .15s}
.ck-card input:focus, .ck-card select:focus, .ck-disc input:focus{border-color:var(--cyan-deep); box-shadow:0 0 0 3px rgba(23,205,230,.3)}
.ck-card input.bad{border-color:#c81e4a; box-shadow:0 0 0 3px rgba(200,30,74,.25)}
.ck-card input::placeholder{color:var(--dim)}
.ck-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ck-pay{width:100%; justify-content:center; padding:14px; font-size:15px; margin-top:4px}
.ck-secure{font-size:11.5px; color:var(--dim); text-align:center; line-height:1.6}
.ck-status{margin-top:4px; padding:13px 15px; border:2px solid var(--ink); border-radius:10px; font-size:13px;
  line-height:1.55; background:rgba(23,205,230,.1); box-shadow:3px 3px 0 var(--ink)}
.ck-status.err{background:rgba(200,30,74,.1)}
.ck-brand{display:flex; align-items:center}
.ck-brand img{height:22px; width:auto}
@media(max-width:900px){ .ck-shell{grid-template-columns:1fr; gap:30px} }
html[data-theme="dark"] .ck-card input, html[data-theme="dark"] .ck-card select, html[data-theme="dark"] .ck-disc input{background:var(--paper2)}

/* ============================================================
   LIBRARY — your floppies, ready to download
   ============================================================ */
.lib-shell{max-width:1000px; margin:0 auto; padding:44px 22px 80px}
.lib-login{max-width:480px; margin:40px auto 0}
.lib-hint{margin:0 0 4px; font-size:13px; color:var(--muted); line-height:1.6}
.lib-head{display:flex; align-items:center; gap:12px; margin:36px 0 24px}
.lib-email{font-size:13px; color:var(--muted); margin-top:8px}
.lib-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 24px}
.lib-item{text-align:center}
.lib-item img{display:block; width:100%; height:auto; filter:drop-shadow(0 14px 18px rgba(42,37,48,.34));
  transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.lib-item:hover img{transform:translateY(-8px) scale(1.04)}
.lib-item .li-name{font-family:var(--font-pixel); font-size:10px; line-height:1.5; margin:12px 0 10px}
.lib-item .li-dl{padding:8px 14px; font-size:12.5px}
.lib-orders{margin-top:44px}
.lib-ord{display:flex; gap:18px; align-items:baseline; padding:10px 4px; border-bottom:1px dashed var(--line2); font-size:13px; color:var(--muted)}
.lib-ord b{color:var(--ink); font-family:var(--font)}
html[data-theme="dark"] .lib-item img{filter:drop-shadow(0 14px 20px rgba(0,0,0,.6))}
@media(max-width:820px){ .lib-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){ .lib-grid{grid-template-columns:repeat(2,1fr)} .lib-head{flex-wrap:wrap} }

/* $0 checkout: a 100%-off code retires the card fields */
.ck-card.free input:disabled, .ck-card.free select:disabled{opacity:.38; filter:grayscale(1); cursor:not-allowed; background:var(--card)}
.ck-card.free label{opacity:.55}

/* library sections: floppies + the template vault */
.lib-sec{display:flex; align-items:center; gap:16px; font-family:var(--font-pixel); font-size:11px; letter-spacing:1px;
  margin:38px 0 20px; color:var(--ink)}
.lib-sec:first-child{margin-top:0}
.lib-sec::after{content:""; flex:1; border-top:2px dashed var(--line2)}
.lib-sec .lib-sec-dl{order:2; margin-left:auto; white-space:nowrap}
.lib-sec:has(.lib-sec-dl)::after{order:1}
.lib-tpl-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px 16px}
.lib-tpl{text-align:center}
.lib-tpl img{display:block; width:100%; height:auto; filter:drop-shadow(0 10px 14px rgba(42,37,48,.3)); transition:transform .28s}
.lib-tpl:hover img{transform:translateY(-6px) scale(1.05)}
.lib-tpl .li-name{font-size:9px; margin:10px 0 0}
html[data-theme="dark"] .lib-tpl img{filter:drop-shadow(0 10px 16px rgba(0,0,0,.55))}
@media (max-width:860px){.lib-tpl-grid{grid-template-columns:repeat(3,1fr)}.lib-grid{grid-template-columns:repeat(2,1fr)}}

/* library thank-you banner */
.lib-thanks{text-align:center; margin:6px 0 40px}
.lib-thanks-title{font-family:var(--font-pixel); font-size:clamp(18px,3.4vw,30px); letter-spacing:2px; color:var(--ink)}
.lib-thanks-sub{max-width:560px; margin:14px auto 0; font-size:14.5px; line-height:1.65; color:var(--muted)}

/* insert-floppy: the direct-to-disk second option */
.li-btns{display:flex; flex-direction:column; gap:8px; align-items:center}
.li-ins{padding:7px 12px; font-size:12px}
.lib-sec-dl{display:flex; gap:10px; align-items:center}