/* Meowsaw landing: one stylesheet for /, /privacy/ and /support/. Static, no build step.
   Look: moonlit violet twilight, pastel storybook, warm orange kitten. Content is visible with JS off:
   every hidden "reveal" state below only exists under the .js class set in <head>. */
@font-face{font-family:"Lilita One";src:url("/assets/fonts/LilitaOne-Regular.ttf") format("truetype");font-display:swap}

:root{
  --night:#120d2e;--night-2:#1c1450;--indigo:#2a1d5e;--plum:#3a1f7a;--plum-d:#1f0f48;
  --violet:#6b46c1;--lilac:#c9b6ff;--cream:#fff4de;--cream-2:#ffe7c4;--ink:#2b2150;
  --gold:#ffd84a;--orange:#ff9a3c;--pink:#ff8fb8;--mint:#7ee8c4;
  --nav-h:64px;--r:24px;
  --display:"Lilita One","Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#ece6ff;background:var(--night);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:.01em;margin:0 0 .5em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto;position:relative}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--ink);padding:8px 14px;border-radius:10px;z-index:99;font-weight:700}
.skip:focus{left:8px}

/* ---------- headline style: cream fill + plum outline, like the logo ---------- */
.t-out{color:var(--cream);-webkit-text-stroke:.17em var(--plum);paint-order:stroke fill;
  text-shadow:0 .07em 0 var(--plum-d),0 .12em .35em rgba(20,6,60,.35)}
.eyebrow{display:inline-block;margin:0 0 .7em;padding:.3em 1em;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.1);border:1px solid rgba(201,182,255,.4);color:var(--lilac)}
.cream .eyebrow,.warm .eyebrow{background:rgba(107,70,193,.1);border-color:rgba(107,70,193,.35);color:var(--violet)}
.sec-head{text-align:center;max-width:46rem;margin:0 auto clamp(28px,4vw,48px)}
.sec-head h2{font-size:clamp(36px,5.4vw,60px);margin-bottom:.3em}
.sec-head p:last-child{margin-bottom:0;font-size:18px;opacity:.92}
.cream .sec-head p:last-child,.warm .sec-head p:last-child{color:var(--ink)}

/* ---------- game words (Good ... Unbelievable): gradient fill + thick outline ---------- */
.word{position:relative;display:inline-block;isolation:isolate;font-family:var(--display);line-height:1.08;white-space:nowrap;--g1:#fff;--g2:#cfeaff}
.word::before{content:attr(data-w);position:absolute;left:0;top:0;z-index:0;color:#2b1466;-webkit-text-stroke:.24em #2b1466;
  text-shadow:0 .1em 0 #170a3a,0 .18em .3em rgba(0,0,0,.4)}
.word>span{position:relative;z-index:1;color:transparent;background:linear-gradient(180deg,var(--g1) 20%,var(--g2) 100%);-webkit-background-clip:text;background-clip:text}
.w1{--g1:#fff;--g2:#bfe9ff}.w2{--g1:#fff;--g2:#ffe27a}.w3{--g1:#fff2b0;--g2:#ff9f2e}
.w4{--g1:#ffe0f4;--g2:#ff62b0}.w5{--g1:#fff6a8;--g2:#b07bff}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);margin-bottom:calc(var(--nav-h) * -1);transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.nav.scrolled{background:rgba(18,13,46,.74);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 rgba(201,182,255,.2)}
.nav-in{display:flex;align-items:center;gap:14px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:24px var(--display);letter-spacing:.01em;text-shadow:0 2px 0 var(--plum-d)}
.brand img{border-radius:11px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{color:#efe9ff;text-decoration:none;padding:7px 13px;border-radius:999px;font-size:15px;font-weight:600}
.nav-links a:hover{background:rgba(255,255,255,.12)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(#ffe58a,var(--orange));color:var(--ink);text-decoration:none;font:700 14px/1 system-ui,sans-serif;
  padding:10px 16px;border-radius:999px;box-shadow:0 3px 0 #8b4a12,0 8px 16px rgba(0,0,0,.3);white-space:nowrap}
.nav-cta:hover{transform:translateY(-1px)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(201,182,255,.35)}
.menu summary::-webkit-details-marker{display:none}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2.5px;border-radius:2px;background:#fff;content:"";position:relative}
.bars::before{position:absolute;top:-6px;left:0}.bars::after{position:absolute;top:6px;left:0}
.menu-panel{position:absolute;right:0;top:54px;width:230px;padding:10px;border-radius:20px;background:rgba(24,17,60,.97);border:1px solid rgba(201,182,255,.3);box-shadow:0 20px 40px rgba(0,0,0,.5);display:flex;flex-direction:column}
.menu-panel a{color:#fff;text-decoration:none;padding:11px 14px;border-radius:12px;font-weight:600}
.menu-panel a:hover{background:rgba(255,255,255,.1)}
.menu-panel a:nth-child(5){border-bottom:1px solid rgba(201,182,255,.2);border-radius:12px 12px 0 0;margin-bottom:6px}

/* ---------- store buttons: CSS + inline SVG, no hotlinked badges ---------- */
.stores{display:flex;flex-wrap:wrap;gap:22px 14px;align-items:center}
.store{position:relative;display:inline-flex;align-items:center;gap:12px;min-width:176px;padding:9px 20px 9px 14px;border-radius:15px;background:#0b0820;color:#fff;text-decoration:none;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 0 rgba(0,0,0,.45),0 12px 26px rgba(0,0,0,.35);transition:transform .2s}
a.store:hover{transform:translateY(-3px)}
.store .glyph{width:28px;height:30px;flex:none}
.store .st{display:flex;flex-direction:column;line-height:1.1}
.store small{font-size:11px;letter-spacing:.04em;opacity:.85}
.store b{font:400 24px/1.05 var(--display);letter-spacing:.01em}
.store-soon{background:rgba(11,8,32,.55);border:2px dashed rgba(255,255,255,.4);color:rgba(255,255,255,.62);box-shadow:none;cursor:default;padding-right:16px}
.store-soon em{position:absolute;top:-11px;right:10px;font-style:normal;font:700 10.5px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:5px 9px;border-radius:999px}
.store-sm{min-width:0;padding:6px 14px 6px 10px;gap:8px}.store-sm .glyph{width:20px;height:22px}.store-sm b{font-size:18px}.store-sm small{font-size:9.5px}

.btn,.btn-s{font-family:var(--display);color:var(--ink);background:linear-gradient(#ffe58a,var(--orange));border:0;cursor:pointer;border-radius:16px;letter-spacing:.01em;
  box-shadow:0 4px 0 #8b4a12,0 10px 20px rgba(0,0,0,.3);transition:transform .15s}
.btn{font-size:22px;padding:11px 26px}
.btn-s{font-size:17px;padding:7px 18px;border-radius:13px;box-shadow:0 3px 0 #8b4a12,0 6px 14px rgba(0,0,0,.3)}
.btn:hover,.btn-s:hover{transform:translateY(-2px)}
.btn:active,.btn-s:active{transform:translateY(2px);box-shadow:0 1px 0 #8b4a12}

/* ---------- sections: alternating moonlit dark and warm cream with soft wave seams ---------- */
section{position:relative;padding:clamp(80px,9vw,120px) 0 clamp(64px,8vw,104px)}
.night{background:radial-gradient(900px 500px at 80% 0,rgba(107,70,193,.28),transparent 70%),var(--night);color:#ece6ff}
.night2{background:radial-gradient(800px 500px at 15% 10%,rgba(255,143,184,.14),transparent 70%),var(--night-2);color:#ece6ff}
.cream{background:radial-gradient(700px 400px at 90% 0,rgba(255,216,74,.25),transparent 70%),var(--cream);color:var(--ink)}
.warm{background:linear-gradient(180deg,#ffe3c4,#ffd2dc);color:var(--ink)}
section:not(.hero):not(.play)::before{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(26px,4vw,50px);z-index:2;pointer-events:none;background:var(--prev,var(--night));
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0 0H1200V22C1100 40 1000 40 900 22 800 4 700 4 600 22 500 40 400 40 300 22 200 4 100 4 0 22Z'/></svg>") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0 0H1200V22C1100 40 1000 40 900 22 800 4 700 4 600 22 500 40 400 40 300 22 200 4 100 4 0 22Z'/></svg>") center/100% 100% no-repeat}
#how{--prev:var(--night)}#combo{--prev:var(--cream)}#features{--prev:var(--night-2)}#collection{--prev:var(--cream)}
#burst{--prev:var(--night)}#screens{--prev:#ffd2dc}#get{--prev:var(--night-2)}
.stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.stars::before,.stars::after{content:"";position:absolute;inset:0;background-repeat:repeat;opacity:.9;animation:twinkle 5s ease-in-out infinite alternate}
.stars::before{background-image:radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),radial-gradient(1.2px 1.2px at 34% 62%,#ffe9a8,transparent),radial-gradient(1.8px 1.8px at 58% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 81% 74%,#fff,transparent),radial-gradient(1.5px 1.5px at 90% 14%,#c9b6ff,transparent),radial-gradient(1.3px 1.3px at 22% 88%,#fff,transparent);background-size:520px 460px}
.stars::after{background-image:radial-gradient(1.4px 1.4px at 70% 50%,#fff,transparent),radial-gradient(1.8px 1.8px at 8% 44%,#ffe9a8,transparent),radial-gradient(1.2px 1.2px at 46% 10%,#fff,transparent),radial-gradient(1.4px 1.4px at 66% 92%,#c9b6ff,transparent),radial-gradient(1.2px 1.2px at 30% 36%,#fff,transparent);background-size:610px 530px;animation-delay:-2.5s;animation-duration:7s}
section>.wrap{z-index:1}

/* ---------- 2. HERO: layered diorama of the game world ---------- */
.hero{padding:calc(var(--nav-h) + clamp(28px,4vw,56px)) 0 clamp(90px,9vw,130px);min-height:min(100vh,820px);display:flex;align-items:center;overflow:hidden;color:#fff;background:var(--night);isolation:isolate}
.hero>.wrap{width:min(1180px,100% - 40px)}
.world{position:absolute;inset:0;z-index:-1;overflow:hidden}
.layer{position:absolute;pointer-events:none;will-change:transform;
  transform:translate3d(calc(var(--mx,0) * var(--d,0) * -1px),calc(var(--my,0) * var(--d,0) * -1px + var(--sy,0) * var(--d,0) * -.003px),0)}
.l-deep{inset:-48px;background:url("/assets/img/bg-deep.jpg") 50% 26%/cover;--d:-10}
.l-front{top:-24px;bottom:-24px;background:url("/assets/img/bg-front.png") left bottom/auto 100% no-repeat;--d:20}
/* BG_Front is one tall image: the left layer shows its left 58% (big tree + mushrooms), the right layer only its right 26% (star tree), so no hard edge shows mid-screen. */
.l-fl{left:-24px;aspect-ratio:.324}
.l-fr{right:-24px;aspect-ratio:.145;background-position:right bottom}
.l-near{--d:46;opacity:.95}
.l-nt-l,.l-nt-r{--h:clamp(96px,22vw,270px);top:-14px;height:var(--h);width:calc(var(--h) * 1.18);background:url("/assets/img/bg-neartop.png") left top/auto 100% no-repeat}
.l-nt-l{left:-30px}.l-nt-r{right:-30px;background-position:right top}
.l-nb-l,.l-nb-r{--h:clamp(90px,20vw,240px);bottom:-22px;height:var(--h);width:calc(var(--h) * 1.18);background:url("/assets/img/bg-nearbottom.png") left bottom/auto 100% no-repeat}
.l-nb-l{left:-30px}.l-nb-r{right:-30px;background-position:right bottom}
/* The near layers are drawn as two halves; fade each half's inner edge so no hard seam shows mid-screen. */
.l-nt-l,.l-nb-l{-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}
.l-nt-r,.l-nb-r{-webkit-mask-image:linear-gradient(270deg,#000 62%,transparent);mask-image:linear-gradient(270deg,#000 62%,transparent)}
.scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,9,38,.84) 0,rgba(14,9,38,.58) 40%,rgba(14,9,38,.08) 72%),linear-gradient(180deg,rgba(14,9,38,.5) 0,rgba(14,9,38,0) 24%,rgba(14,9,38,0) 60%,var(--night) 100%)}
.flies{position:absolute;inset:0}
.fly{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff6c4;box-shadow:0 0 8px 3px rgba(255,236,150,.85),0 0 22px 8px rgba(255,214,90,.35);opacity:0;animation:drift var(--t,10s) ease-in-out var(--dl,0s) infinite}
.hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,5vw,72px);align-items:center}
.hero-copy .logo{width:min(470px,100%);filter:drop-shadow(0 8px 22px rgba(0,0,0,.5));margin-bottom:6px}
.hero h1{font-size:clamp(28px,3.2vw,42px);margin:6px 0 8px}
.hero .by{font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--lilac);margin-bottom:14px}
.hero .hook{font-size:clamp(19px,2vw,23px);line-height:1.4;font-weight:600;color:#fff;max-width:30em;text-shadow:0 2px 10px rgba(10,5,40,.75)}
.hero .sub{max-width:34em;opacity:.95;text-shadow:0 2px 10px rgba(10,5,40,.75)}
.hero .stores{margin:22px 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 10px;border-radius:999px;font-size:15px;font-weight:600;background:rgba(255,246,225,.14);border:1px solid rgba(255,246,225,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-phone{display:flex;justify-content:center;padding-top:34px}
.phone-wrap{position:relative;animation:bob 6s ease-in-out infinite}
.peek{position:absolute;left:50%;bottom:calc(100% - 17px);width:56%;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}

/* phone mockup */
.phone{position:relative;width:clamp(230px,23vw,296px);padding:10px;border-radius:40px;background:linear-gradient(155deg,#5a48a8,#1c1346 60%);
  box-shadow:0 0 0 2px #7662c4,0 34px 70px rgba(0,0,0,.55),0 0 100px rgba(150,110,255,.38)}
.phone::before{content:"";position:absolute;top:15px;left:50%;width:30%;height:5px;border-radius:5px;background:rgba(0,0,0,.45);transform:translateX(-50%);z-index:3}
.screen{position:relative;aspect-ratio:9/16;border-radius:31px;overflow:hidden;background:var(--night)}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f{opacity:0;animation:xf 12s ease-in-out infinite}
.f1{opacity:1;animation-name:xf1}.f2{animation-delay:4s}.f3{animation-delay:8s}

/* ---------- 3. PLAY: the playable mini board ---------- */
.play{padding-top:clamp(32px,4vw,56px);background:linear-gradient(180deg,var(--night) 0,rgba(18,13,46,0) 220px),radial-gradient(900px 520px at 78% 18%,rgba(107,70,193,.3),transparent 70%),var(--night)}
.play-grid{display:grid;grid-template-columns:minmax(0,540px) minmax(0,330px);gap:clamp(28px,4vw,56px);justify-content:center;align-items:start}
.board-col{position:relative}
.hud{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:110px;height:42px;padding:0 18px;font:400 18px var(--display);color:#fff;letter-spacing:.02em;
  background:url("/assets/img/ui/UI_Pill.png") center/100% 100% no-repeat;text-shadow:0 2px 0 rgba(20,6,60,.7)}
.pill b{font-weight:400;color:var(--gold);min-width:2ch;text-align:left}
.hud .btn-s{margin-left:auto}
.board{position:relative;width:100%;aspect-ratio:1;padding:10px;border-radius:26px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  background:linear-gradient(160deg,rgba(76,52,160,.7),rgba(24,15,66,.85));border:3px solid rgba(255,244,222,.85);
  box-shadow:0 0 0 3px var(--plum),0 24px 60px rgba(0,0,0,.5),0 0 90px rgba(140,100,255,.28)}
.cells{position:relative;width:100%;height:100%}
.slot{position:absolute;left:0;top:0;width:25%;height:25%;padding:2px;border:0;background:none;touch-action:none;transform:translate(calc(var(--c) * 100%),calc(var(--r) * 100%))}
.slot::before{content:"";display:block;width:100%;height:100%;border-radius:11px;border:2px dashed rgba(201,182,255,.22);background:rgba(10,6,34,.35)}
.tile{position:absolute;left:0;top:0;width:25%;height:25%;padding:2px;border:0;background:none;cursor:grab;touch-action:none;z-index:2;
  transform:translate(calc(var(--c) * 100%),calc(var(--r) * 100%));transition:transform .3s cubic-bezier(.3,1.35,.5,1)}
.tile .face{display:block;width:100%;height:100%;border-radius:11px;background-color:#2b1a66;background-image:var(--img);background-size:200% 200%;background-position:var(--bp);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3),0 3px 7px rgba(0,0,0,.45);transition:box-shadow .25s,filter .25s}
.tile.drag{transition:none;z-index:8;cursor:grabbing;transform:translate(calc(var(--c) * 100% + var(--dx,0px)),calc(var(--r) * 100% + var(--dy,0px))) scale(1.08)}
.tile.drag .face{box-shadow:inset 0 0 0 2px #fff,0 18px 28px rgba(0,0,0,.55)}
.tile.sel .face{box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--gold),0 0 22px rgba(255,216,74,.8)}
.tile:focus-visible{outline:none}
.tile:focus-visible .face,.slot:focus-visible::before{outline:3px solid #fff;outline-offset:1px}
.tile.linked .face{box-shadow:inset 0 0 0 2.5px var(--gold),0 0 16px rgba(255,216,74,.55),0 3px 7px rgba(0,0,0,.4)}
.tile.lk-r::after,.tile.lk-b::after{content:"";position:absolute;z-index:3;background:var(--gold);border-radius:3px;box-shadow:0 0 8px rgba(255,216,74,.9)}
.tile.lk-r::after{right:-2px;top:50%;width:4px;height:34%;transform:translateY(-50%)}
.tile.lk-b::after{bottom:-2px;left:50%;height:4px;width:34%;transform:translateX(-50%)}
.tile.lk-r .face{border-top-right-radius:4px;border-bottom-right-radius:4px}
.tile.lk-l .face{border-top-left-radius:4px;border-bottom-left-radius:4px}
.tile.lk-b .face{border-bottom-left-radius:4px;border-bottom-right-radius:4px}
.tile.lk-t .face{border-top-left-radius:4px;border-top-right-radius:4px}
.tile.clear{pointer-events:none;z-index:6}
.tile.clear .face{animation:clearpop .72s cubic-bezier(.5,0,.8,.4) forwards}
.fx{position:absolute;inset:0;pointer-events:none;z-index:7;overflow:hidden;border-radius:inherit}
.fx .word{position:absolute;left:50%;top:44%;font-size:clamp(52px,13vw,84px);animation:wordpop 1.6s cubic-bezier(.2,1.2,.4,1) forwards}
.flash{position:absolute;inset:0;z-index:10;border-radius:inherit;background:#fff;opacity:0;pointer-events:none}
.flash.go{animation:flash .8s ease-out}
.win{position:absolute;inset:0;z-index:9;border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1.5vw,10px);padding:4% 5%;text-align:center;
  background:radial-gradient(circle at 50% 28%,rgba(70,42,150,.94),rgba(14,9,40,.97))}
.win[hidden]{display:none}
.polas{display:flex;justify-content:center;gap:2.5%;width:100%;margin-bottom:2%}
.pl{width:22%;padding:2.2% 2.2% 6%;background:var(--cream);border-radius:4px;box-shadow:0 8px 16px rgba(0,0,0,.5);transform:rotate(var(--rot,0deg));opacity:0;animation:pdrop .7s cubic-bezier(.2,1.25,.4,1) forwards;animation-delay:calc(var(--k) * .2s + .1s)}
.pl img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px}
.win h3{font-size:clamp(26px,6vw,40px);margin:0}
.win-stats{margin:0;font-size:15px;opacity:.9}
.win-stats b{color:var(--gold);font-weight:700}
.win-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:6px}
.win-btns .btn{font-size:20px;padding:9px 22px}
.win-cat{position:absolute;width:17%;left:3%;top:3%;z-index:0;animation:catpop .7s cubic-bezier(.2,1.5,.4,1) .9s both;pointer-events:none}
.win>*:not(.win-cat){position:relative;z-index:1}
.side{display:flex;flex-direction:column;gap:18px;position:relative;min-height:100%}
.mini-coll{padding:18px 18px 20px;border-radius:var(--r);background:rgba(255,255,255,.07);border:1px solid rgba(201,182,255,.3)}
.mini-coll h3{display:flex;justify-content:space-between;align-items:center;font-size:24px;margin:0 0 12px;color:#fff}
.mini-coll h3 span{color:var(--gold)}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sl{position:relative;aspect-ratio:1;border-radius:12px;background:url("/assets/img/ui/paw-card.png") center/100% 100%;overflow:hidden;filter:saturate(.8) brightness(.9);transition:filter .3s}
.sl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s cubic-bezier(.2,1.5,.4,1)}
.sl.on{filter:none;box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(255,216,74,.55)}
.sl.on img{opacity:1;transform:none}
.sl.on::after{content:"";position:absolute;right:2px;bottom:2px;width:36%;aspect-ratio:1;background:url("/assets/img/ui/Icon_Check.png") center/contain no-repeat}
.tips{display:grid;gap:10px;font-size:15px;opacity:.92}
.tips li{position:relative;padding-left:26px}
@media(pointer:coarse){.tip-kbd{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0}.tip-kbd::before{display:none}}
.tips li::before{content:"";position:absolute;left:0;top:.25em;width:17px;height:17px;background:url("/assets/img/ui/UI_Paw.png") center/contain no-repeat}
.point{width:clamp(130px,11vw,160px);margin:auto 0 0 auto;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4));animation:bob 5s ease-in-out infinite}
.caption{text-align:center;max-width:38em;margin:clamp(24px,3.5vw,40px) auto 0;font-size:15.5px;opacity:.85}

/* ---------- 4. HOW TO PLAY: paw cards that flip ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px);counter-reset:s}
.fcard{display:flex;flex-direction:column;gap:16px}
.flip{position:relative;aspect-ratio:1;perspective:900px}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;overflow:hidden}
.flip{transform-style:preserve-3d;transform:rotateY(180deg);transition:transform .9s cubic-bezier(.3,1.2,.4,1) calc(var(--i) * .22s)}
.flip .front{transform:rotateY(0)}
.flip .front img{width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 10px 14px rgba(43,33,80,.35))}
.flip .back{transform:rotateY(180deg);border:4px solid #fffaf0;background:#fffaf0;box-shadow:0 0 0 2px var(--plum),0 14px 26px rgba(43,33,80,.3)}
.flip .back img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;border-radius:14px}
.js .fcard:not(.in) .flip{transform:none}
.fcard .txt{position:relative;padding-left:58px;min-height:80px}
.js .fcard .txt{transition:opacity .6s calc(var(--i) * .22s + .45s),transform .6s calc(var(--i) * .22s + .45s)}
.js .fcard:not(.in) .txt{opacity:0;transform:translateY(12px)}
.num{position:absolute;left:0;top:0;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;font:26px var(--display);color:var(--ink);
  background:linear-gradient(#ffe58a,var(--orange));box-shadow:0 3px 0 #8b4a12;border:2px solid #fffaf0}
.fcard h3{font-size:23px;color:var(--violet);margin:2px 0 .3em}
.fcard p{margin:0;font-size:16px}
.winstrip{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,28px);margin-top:clamp(34px,5vw,60px)}
.push{position:relative;width:clamp(110px,12vw,170px);flex:none;filter:drop-shadow(0 8px 10px rgba(43,33,80,.25))}
.push .mpic{left:65%;top:35%;width:31%;height:59%;transform:rotate(1.2deg)}
.ribbon{position:relative;max-width:36rem;margin-top:22px;padding:30px 30px 18px;text-align:center;border-radius:22px;background:linear-gradient(180deg,#58d7a0,#2fa87c);color:#04321f;font-weight:600;font-size:17px;line-height:1.45;
  border:3px solid #fffaf0;box-shadow:0 0 0 2px #1d7b59,0 10px 0 rgba(29,123,89,.35),0 18px 30px rgba(43,33,80,.2)}
.rb{position:absolute;left:50%;top:-30px;width:132px;transform:translateX(-50%);filter:drop-shadow(0 4px 0 rgba(29,123,89,.35))}
.rb img{width:100%;height:auto}
.rb b{position:absolute;inset:0 0 14%;display:grid;place-items:center;font:400 22px var(--display);color:#fff;-webkit-text-stroke:.14em #1d5b44;paint-order:stroke fill;letter-spacing:.02em}

/* ---------- 5. COMBO LADDER ---------- */
.combo{padding-bottom:clamp(60px,8vw,100px)}
.ladder{display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,1.8vw,26px);margin-top:10px;min-height:260px}
.rung{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0}
.rung .stair{position:relative;display:block;width:100%;max-width:100%;height:calc(14px + (var(--n,1) - 1) * 14px);border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,rgba(201,182,255,.55),rgba(107,70,193,.25));border:1px solid rgba(201,182,255,.5);box-shadow:0 0 18px rgba(176,123,255,.35)}
.rung .stair::after{content:"\2726";position:absolute;left:50%;top:-15px;transform:translateX(-50%);font-size:14px;line-height:1;color:var(--gold);text-shadow:0 0 8px rgba(255,216,74,.9)}
.ladder{padding-bottom:0;border-bottom:3px solid rgba(201,182,255,.35)}
.r1{--n:1}.r2{--n:2}.r3{--n:3}.r4{--n:4}.r5{--n:5}
.w1{font-size:clamp(24px,3vw,40px)}.w2{font-size:clamp(28px,3.6vw,50px)}.w3{font-size:clamp(32px,4.4vw,62px)}
.w4{font-size:clamp(36px,5.2vw,74px)}.w5{font-size:clamp(38px,6vw,88px)}
.js .rung{opacity:0;transform:translateY(30px) scale(.85);transition:opacity .5s calc(var(--k,0) * .22s),transform .7s cubic-bezier(.2,1.5,.4,1) calc(var(--k,0) * .22s)}
.js .ladder.in .rung{opacity:1;transform:none}
.rung:nth-child(1){--k:0}.rung:nth-child(2){--k:1}.rung:nth-child(3){--k:2}.rung:nth-child(4){--k:3}.rung:nth-child(5){--k:4}

/* ---------- 6. FEATURES ---------- */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.fc{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:var(--r);padding:0 0 24px;
  box-shadow:0 6px 0 rgba(58,31,122,.14),0 16px 34px rgba(58,31,122,.14);transition:transform .25s,box-shadow .25s}
.fc:hover{transform:translateY(-6px);box-shadow:0 10px 0 rgba(58,31,122,.14),0 24px 44px rgba(58,31,122,.2)}
.fc h3{font-size:25px;color:var(--violet);margin:18px 24px .3em}
.fc p{margin:0 24px .6em;font-size:16px}
.fc p:last-child{margin-bottom:0}
.fc .media{position:relative;height:210px;overflow:hidden;background:linear-gradient(160deg,#e8defc,#ffe7c4)}
.fc .m-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.fc .m-top img{object-position:50% 4%}
.fc .m-mid img{object-position:50% 52%}
.fc .m-dock{height:150px}.fc .m-dock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 97%}
.m-fan img{position:absolute;width:44%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:4px solid #fffaf0;box-shadow:0 8px 18px rgba(58,31,122,.3);top:20%;transition:transform .3s}
.m-fan img:nth-child(1){left:8%;transform:rotate(-9deg)}.m-fan img:nth-child(2){left:28%;top:14%;z-index:1;transform:rotate(3deg)}.m-fan img:nth-child(3){right:8%;transform:rotate(10deg)}
.fc:hover .m-fan img:nth-child(1){transform:rotate(-14deg) translateX(-8px)}.fc:hover .m-fan img:nth-child(3){transform:rotate(15deg) translateX(8px)}
.m-polas .pol{position:absolute;width:38%;padding:3% 3% 9%;background:#fffaf0;border-radius:4px;box-shadow:0 8px 16px rgba(58,31,122,.3);transform:rotate(var(--r))}
.m-polas .pol img{width:100%;aspect-ratio:1;object-fit:cover}
.m-polas .pol:nth-child(1){left:6%;top:12%}.m-polas .pol:nth-child(2){right:6%;top:6%;z-index:1}.m-polas .pol:nth-child(3){left:31%;top:30%;z-index:2}
.fc-wide{grid-column:span 2;flex-direction:row;align-items:stretch;padding:0}
.fc-wide .media{flex:0 0 38%;height:auto;min-height:280px}
.fc-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 0}
.fc-wide h3{margin-top:0}
.fc-wide .m-dock{height:auto;flex-basis:42%}
.note{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--violet)}
.note img{flex:none}
.facts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(28px,4vw,44px)}
.facts li{display:flex;align-items:center;gap:10px;padding:10px 20px 10px 12px;border-radius:999px;background:var(--plum);color:#fff;font-weight:600;font-size:15.5px;box-shadow:0 4px 0 var(--plum-d)}

/* ---------- 7. COLLECTION WALL ---------- */
.coll .sec-head{margin-bottom:clamp(96px,10vw,150px)}
.coll-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,3.5vw,48px);align-items:center}
.wall-wrap{position:relative;padding-top:0}
.wall-cat{position:absolute;right:28px;bottom:calc(100% - 6px);width:clamp(82px,9vw,118px);z-index:3;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.wall-cat .mpic{left:24.5%;top:54%;width:44%;height:32%;transform:rotate(-1.5deg)}
/* A small level picture laid over the blank card the kitten holds (the mascot art ships with an empty card). */
.mpic{position:absolute;object-fit:cover;border-radius:2px;box-shadow:0 1px 3px rgba(43,33,80,.35)}
.push>img:first-child,.wall-cat>img:first-child{width:100%;height:auto}
.wall{position:relative;padding:20px clamp(12px,2vw,24px) 24px;border-radius:28px;background:linear-gradient(160deg,rgba(76,52,160,.55),rgba(24,15,66,.7));border:2px solid rgba(201,182,255,.4);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.wall-top{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.ctr{font:clamp(34px,5vw,50px)/1 var(--display);color:var(--cream);-webkit-text-stroke:.14em var(--plum);paint-order:stroke fill;text-shadow:0 .06em 0 var(--plum-d)}
.ctr b{font-weight:400;color:var(--gold);display:inline-block;min-width:1.2ch;text-align:right}
.ctr-l{font-weight:600;opacity:.85}
.tiles{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(5px,.8vw,9px)}
.wt{position:relative;aspect-ratio:1;border-radius:clamp(8px,1.1vw,13px);border:clamp(2px,.3vw,3px) solid #fff4de;overflow:hidden;background:#2b1a66;box-shadow:0 3px 8px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s;outline:none}
.wt img{width:100%;height:100%;object-fit:cover;transition:filter .5s}
.lock{position:absolute;inset:0;background:url("/assets/img/ui/UI_Paw.png") center/46% no-repeat;opacity:0;transition:opacity .4s;pointer-events:none}
.wt:not(.locked):hover,.wt:not(.locked):focus{transform:scale(1.9);z-index:6;box-shadow:0 14px 30px rgba(0,0,0,.6)}
.wt.locked img{filter:brightness(.22) saturate(.3) blur(1px)}
.wt.locked .lock{opacity:.9}
.wt.pop{animation:unlock .55s cubic-bezier(.2,1.6,.4,1)}
.perks{display:grid;gap:18px;margin-bottom:26px}
.perks li{display:flex;align-items:center;gap:14px}
.perks img{flex:none}
.perks div{display:flex;flex-direction:column;line-height:1.35}
.perks b{font:400 22px var(--display);color:#fff;letter-spacing:.01em}
.perks span{opacity:.88;font-size:15.5px}
.phone-s{width:min(190px,60%);margin:0 auto;padding:8px;border-radius:30px}.phone-s .screen{border-radius:23px}.phone-s::before{top:12px;height:4px}

/* ---------- 8. PHOTO BURST ---------- */
.burst{overflow-x:clip}
.burst-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.burst-copy h2{font-size:clamp(34px,4.8vw,56px)}
.burst-copy p:last-child{font-size:19px}
.collage{position:relative;width:min(100%,560px);aspect-ratio:1/1.02;margin-inline:auto}
.collage .phone{position:absolute;left:50%;top:50%;width:41%;transform:translate(-50%,-50%);z-index:2;padding:8px;border-radius:28px;box-shadow:0 0 0 2px #7662c4,0 24px 50px rgba(58,31,122,.45)}
.collage .phone .screen{border-radius:21px}
.collage .phone::before{display:none}
.pola{position:absolute;width:33%;margin:0;padding:2.4% 2.4% 8.5%;background:#fffaf0;border-radius:5px;box-shadow:0 14px 28px rgba(58,31,122,.35);z-index:1;transform:rotate(var(--rot,0deg))}
.pola img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px}
.p1{left:0;top:2%;--rot:-9deg}.p2{right:0;top:0;--rot:8deg}.p3{left:0;bottom:15%;--rot:6deg;z-index:3}.p4{right:0;bottom:12%;--rot:-7deg;z-index:3}.p5{left:34%;bottom:-3%;--rot:2deg;z-index:3}
.js .collage .pola{opacity:0;transform:translateY(-60px) rotate(calc(var(--rot) * 2.5));transition:opacity .5s calc(var(--k,0) * .15s),transform .9s cubic-bezier(.2,1.3,.4,1) calc(var(--k,0) * .15s)}
.js .collage .pola img{filter:sepia(1) saturate(.4) brightness(1.3) contrast(.75);transition:filter 1.8s ease calc(var(--k,0) * .15s + .3s)}
.js .collage.in .pola{opacity:1;transform:rotate(var(--rot,0deg))}
.js .collage.in .pola img{filter:none}
.p1{--k:0}.p2{--k:1}.p3{--k:2}.p4{--k:3}.p5{--k:4}

/* ---------- 9. SCREENSHOT CAROUSEL ---------- */
.sit{display:none;position:absolute;right:0;top:-8px;width:104px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
@media(min-width:1100px){.sit{display:block}}
.car-wrap{position:relative}
.carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px 6px 30px;-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.sc{flex:0 0 clamp(210px,19vw,250px);margin:0;scroll-snap-align:center}
.sc img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:24px;border:3px solid rgba(255,244,222,.8);box-shadow:0 18px 36px rgba(0,0,0,.45);background:var(--indigo)}
.car-btn{position:absolute;top:50%;margin-top:-30px;width:52px;height:52px;border-radius:50%;border:2px solid #fff4de;background:linear-gradient(#ffe58a,var(--orange));color:var(--ink);display:grid;place-items:center;cursor:pointer;z-index:3;box-shadow:0 4px 0 #8b4a12,0 10px 20px rgba(0,0,0,.4);transition:transform .15s,opacity .2s}
.car-btn:hover{transform:scale(1.08)}
.car-btn.prev{left:-26px}.car-btn.next{right:-26px}
.car-btn[disabled]{opacity:.35;cursor:default}

/* ---------- 10. FINAL CTA ---------- */
.final{padding:clamp(80px,10vw,150px) 0;overflow:hidden;color:#fff;isolation:isolate;background:var(--night)}
.final-sky{position:absolute;inset:0;z-index:-2;transform:scaleX(-1);
  background:linear-gradient(180deg,rgba(14,9,38,.5),rgba(14,9,38,.18) 45%,rgba(14,9,38,.7)),url("/assets/img/bg-deep.jpg") 50% 4%/cover}
.final::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,9,38,.78) 0,rgba(14,9,38,.5) 45%,rgba(14,9,38,0) 80%)}
.final-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,60px);align-items:center}
.final h2{font-size:clamp(38px,5.6vw,72px);line-height:1.04}
.final-copy p{font-size:clamp(17px,1.8vw,21px);font-weight:600;max-width:30em;text-shadow:0 2px 10px rgba(10,5,40,.7)}
.final .stores{margin-top:26px}
.final-cat{justify-self:center}
.final-cat img{width:clamp(200px,24vw,330px);filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));animation:bob 5s ease-in-out infinite}
.final-tiles{position:absolute;inset:0;pointer-events:none;z-index:0}
.final-tiles i{position:absolute;width:clamp(54px,6vw,86px);aspect-ratio:1;border-radius:14px;border:3px solid #fff4de;background:url("/assets/img/pics/p49.jpg") var(--bp)/200% 200%;box-shadow:0 10px 20px rgba(0,0,0,.45);animation:fall 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.5s)}
.final-tiles i:nth-child(1){--bp:0 0;left:62%;top:10%;--rot:-10deg}.final-tiles i:nth-child(2){--bp:100% 0;left:88%;top:16%;--rot:12deg}
.final-tiles i:nth-child(3){--bp:0 100%;left:70%;top:72%;--rot:8deg}.final-tiles i:nth-child(4){--bp:100% 100%;left:92%;top:66%;--rot:-12deg}

/* ---------- footer ---------- */
footer{position:relative;background:#0b0820;padding:44px 0 36px;font-size:15px;color:#cfc6f0}
footer a{color:var(--gold)}
.foot{display:grid;grid-template-columns:1.1fr 1fr;gap:28px 48px;align-items:start}
.foot-brand p{margin:12px 0 0;opacity:.85}
footer .links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:flex-start;align-content:flex-start}
.soon-link{opacity:.6}.soon-link em{font-style:normal;font-size:12px}
.legal{grid-column:1/-1;border-top:1px solid rgba(201,182,255,.18);padding-top:18px;font-size:13.5px;opacity:.78}
.legal p{margin:4px 0}

/* ---------- Privacy / Support text pages (.doc): a readable cream article under a moonlit band ---------- */
.doc{padding:calc(var(--nav-h) + 36px) 0 80px;color:var(--ink);
  background:radial-gradient(500px 220px at 80% 0,rgba(255,216,74,.14),transparent 70%),linear-gradient(180deg,var(--night-2) 0,var(--indigo) 150px,var(--cream) 340px,var(--cream) 100%)}
.doc .wrap{max-width:800px;background:#fffaf0;border:3px solid #fff;border-radius:28px;padding:clamp(24px,4.5vw,48px);box-shadow:0 0 0 2px var(--plum),0 24px 50px rgba(43,33,80,.22)}
.doc h1{font-size:clamp(34px,5.4vw,52px);color:var(--violet);margin-bottom:.2em}
.doc h2{font-size:27px;margin-top:1.6em;color:var(--violet)}
.doc h3{font-size:21px;margin-top:1.2em;color:var(--plum)}
.doc li{margin:.35em 0;list-style:disc outside}
.doc ul,.doc ol{padding-left:1.4em}
.doc a{color:#5a3aa6;font-weight:600}
.doc .meta{opacity:.7;font-size:15px}
.doc table{border-collapse:collapse;width:100%;font-size:15.5px}
.doc th,.doc td{border:1px solid rgba(107,70,193,.25);padding:8px 10px;text-align:left}
.mail{display:inline-block;margin:6px 0;font:22px var(--display);letter-spacing:.01em}

/* ---------- reveal on scroll (only hidden under .js; a fallback in site.js reveals the rest) ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--rd,0s),transform .8s cubic-bezier(.2,.9,.3,1) var(--rd,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- keyframes ---------- */
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes drift{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}50%{opacity:.9;transform:translate(var(--dx,30px),var(--dy,-40px))}85%{opacity:1}100%{opacity:0;transform:translate(calc(var(--dx,30px) * -.7),calc(var(--dy,-40px) * 1.7))}}
@keyframes xf{0%{opacity:0}6%{opacity:1}33%{opacity:1}39%{opacity:0}100%{opacity:0}}
@keyframes xf1{0%{opacity:1}30%{opacity:1}36%{opacity:0}94%{opacity:0}100%{opacity:1}}
@keyframes clearpop{0%{filter:brightness(1);transform:scale(1)}28%{filter:brightness(2.6) saturate(1.3);transform:scale(1.1)}100%{filter:brightness(2);opacity:0;transform:scale(.15) rotate(14deg)}}
@keyframes wordpop{0%{opacity:0;transform:translate(-50%,-30%) scale(.3) rotate(-8deg)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.22) rotate(3deg)}28%{transform:translate(-50%,-50%) scale(1) rotate(-2deg)}72%{opacity:1;transform:translate(-50%,-58%) scale(1.02) rotate(0)}100%{opacity:0;transform:translate(-50%,-95%) scale(1.06)}}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
@keyframes pdrop{0%{opacity:0;transform:translateY(-220%) rotate(calc(var(--rot) * 3))}100%{opacity:1;transform:rotate(var(--rot,0deg))}}
@keyframes catpop{0%{opacity:0;transform:translateY(60%) scale(.5)}100%{opacity:1;transform:none}}
@keyframes unlock{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes fall{0%,100%{transform:translateY(-10px) rotate(var(--rot,0deg))}50%{transform:translateY(12px) rotate(calc(var(--rot,0deg) * -1))}}

/* ---------- responsive ---------- */
@media(max-width:1340px){.car-btn.prev{left:4px}.car-btn.next{right:4px}}
@media(max-width:1100px){
  .steps{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .fc-wide,.fgrid .fc:first-child{grid-column:span 2}
  .nav-links a{padding:7px 9px;font-size:14px}
}
@media(max-width:960px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .menu{display:block}
  .hero{min-height:0;display:block}
  .hero-in{grid-template-columns:1fr;text-align:center;gap:clamp(110px,26vw,150px)}
  .hero-copy .logo{margin-inline:auto;width:min(420px,88%)}
  .hero .hook,.hero .sub{margin-inline:auto}
  .hero .stores,.chips{justify-content:center}
  .scrim{background:linear-gradient(180deg,rgba(14,9,38,.62) 0,rgba(14,9,38,.74) 30%,rgba(14,9,38,.6) 60%,var(--night) 100%)}
  .l-front{opacity:.8}
  .play-grid{grid-template-columns:minmax(0,540px);justify-content:center}
  .point{display:none}
  .side{min-height:0}
  .coll .sec-head{margin-bottom:clamp(96px,10vw,150px)}
.coll-grid{grid-template-columns:1fr}
  .coll-side{display:grid;grid-template-columns:1fr 190px;gap:24px;align-items:center}
  .coll-side .perks{margin:0}
  .burst{overflow-x:clip}
.burst-grid{grid-template-columns:1fr;text-align:center}
  .final-in{grid-template-columns:1fr;text-align:center}
  .final-copy p{margin-inline:auto}.final .stores{justify-content:center}
  .final::after{background:linear-gradient(180deg,rgba(14,9,38,.7),rgba(14,9,38,.45) 50%,rgba(14,9,38,.8))}
  .final-tiles{display:none}
  .final-sky{background-position:50% 0}
  .ladder{flex-direction:column;align-items:flex-start;gap:6px;min-height:0;border-bottom:0;padding-bottom:0;width:min(520px,100%);margin-inline:auto}
  .rung{flex-direction:row;align-items:center}
  .rung .stair{display:none}
  .r2{margin-left:4%}.r3{margin-left:8%}.r4{margin-left:12%}.r5{margin-left:16%}
  .w1{font-size:30px}.w2{font-size:38px}.w3{font-size:46px}.w4{font-size:52px}.w5{font-size:50px}
  .tiles{grid-template-columns:repeat(8,1fr)}
  .foot{grid-template-columns:1fr}
}
/* When the first card spans two columns (641-1100 px) keep its picture fan compact. */
@media(min-width:641px) and (max-width:1100px){.m-fan img{width:25%}.m-fan img:nth-child(1){left:20%}.m-fan img:nth-child(2){left:37.5%}.m-fan img:nth-child(3){right:20%}}
@media(max-width:640px){
  body{font-size:16.5px}
  .wrap{width:min(1180px,100% - 32px)}
  .nav-cta .lg{display:none}
  .nav-cta{padding:9px 14px}
  .brand{font-size:21px}
  .steps{grid-template-columns:1fr 1fr;gap:26px 14px}
  .fcard .txt{padding-left:0;padding-top:48px}
  .fcard h3{font-size:19px}.fcard p{font-size:14.5px}
  .num{width:38px;height:38px;font-size:22px}
  .fgrid{grid-template-columns:1fr}
  .fc-wide,.fgrid .fc:first-child{grid-column:auto}
  .fc-wide{flex-direction:column}
  .fc-wide .media,.fc-wide .m-dock{flex:none;min-height:0;height:190px}
  .fc-wide .m-dock{height:140px}
  .fc-body{padding:0 0 4px}
  .fc-wide h3{margin-top:18px}
  .tiles{grid-template-columns:repeat(5,1fr)}
  .coll-side{grid-template-columns:1fr}
  .coll-side .phone-s{display:none}
  .wt:not(.locked):hover,.wt:not(.locked):focus{transform:scale(1.7)}
  .winstrip{flex-direction:column}
  .ribbon{padding:16px 20px;font-size:16px}
  .car-btn{display:none}
  .sc{flex-basis:66vw}
  .hud{flex-wrap:wrap}
  .pill{min-width:96px;height:38px;font-size:16px}
  .board{padding:7px;border-radius:20px}
  .win-btns .btn{font-size:17px;padding:8px 16px}
  .store{min-width:0}
  .chips li{font-size:14px}
  .coll .sec-head,.wall-wrap{margin-top:0}
  .wall-cat{width:84px;right:16px}
  .collage{aspect-ratio:1/1.12}
  .ladder{width:100%}
}
@media(hover:none){.car-btn{display:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.001ms !important;transition-delay:0s !important}
  .layer{transform:none !important}
  .fly,.f2,.f3{display:none}
  .f1{opacity:1}
  .js .fcard:not(.in) .flip{transform:rotateY(180deg)}
  .js .fcard:not(.in) .txt,.js .rung,.js .reveal,.js .collage .pola{opacity:1;transform:none}
  .js .collage .pola{transform:rotate(var(--rot,0deg))}
  .js .collage .pola img{filter:none}
  .phone-wrap,.point,.final-cat img{animation:none}
}

.nojs-note{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:28px;font-weight:600;color:var(--lilac)}

/* Print / no-animation safety: never print hidden sections. */
@media print{
  .js .reveal,.js .fcard .txt,.js .rung,.js .collage .pola{opacity:1 !important;transform:none !important;transition:none !important}
  .js .fcard .flip{transform:rotateY(180deg) !important;transition:none !important}
  .js .collage .pola img,.wt.locked img{filter:none !important}
  .lock{display:none}
  .nav,.car-btn{display:none}
}