/* Ralph & the Unknown — Lukeworth Publishing House */
/* Bangers and Fredoka (SIL Open Font License), self-hosted in /fonts */
@font-face{font-family:"Bangers";src:url(fonts/bangers.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-600.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-700.woff2) format("woff2");font-weight:700 900;font-display:swap}
:root{
  --ink:#12052b;
  --space:#1b0647;
  --violet:#5b1fd1;
  --slime:#a6ff1f;
  --slime-deep:#3fbf00;
  --blaze:#ff6a00;
  --sun:#ffe01f;
  --pink:#ff2bd6;
  --cyan:#3fe7ff;
  --paper:#fff8e1;
  --display:"Bangers","Impact","Arial Narrow Bold",sans-serif;
  --body:"Fredoka","Trebuchet MS","Verdana",sans-serif;
  --hard:6px 6px 0 var(--ink);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;color:var(--paper);font-family:var(--body);font-size:1.125rem;line-height:1.45;
  background:
    radial-gradient(120% 80% at 50% 0%,#7a1fe0 0%,transparent 60%),
    radial-gradient(90% 60% at 10% 60%,#c2187f 0%,transparent 55%),
    radial-gradient(90% 60% at 95% 85%,#1f4fe0 0%,transparent 55%),
    var(--space);
  background-attachment:fixed;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer}
:focus-visible{outline:4px solid var(--cyan);outline-offset:4px;border-radius:8px}

#space{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.rays{
  position:fixed;left:50%;top:38%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,106,0,.20) 0 7deg,transparent 7deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 0 12%,#000 30%,transparent 62%);
          mask:radial-gradient(circle,transparent 0 12%,#000 30%,transparent 62%);
  animation:spin 60s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

main,.top{position:relative;z-index:2}

/* ---------- top bar ---------- */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem clamp(1rem,4vw,2.5rem);
}
.brand{
  font-family:var(--display);font-size:clamp(1.3rem,3.5vw,1.9rem);letter-spacing:.04em;color:var(--slime);
  text-decoration:none;text-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg);display:inline-block
}
.brand span{color:var(--pink)}

/* ---------- comic type ---------- */
.shout{
  font-family:var(--display);font-weight:400;margin:0;line-height:.92;letter-spacing:.02em;text-align:center;
  -webkit-text-stroke:.07em var(--ink);paint-order:stroke fill;
  text-shadow:.06em .07em 0 var(--ink),.1em .12em 0 rgba(0,0,0,.45);
}
h1.shout{font-size:clamp(2.2rem,min(10.4vw,13vh),6.2rem);transform:rotate(-3deg);padding-top:.1em}
h1 .line{display:block}
h1 .w{display:inline-block;will-change:transform}
h1 .l1{color:var(--paper)}
h1 .l2{color:var(--slime)}
/* who it's for, proof and perks, right under the headline */
.hero-sub{margin:.7rem 0 0;font-weight:700;font-size:clamp(1rem,4.2vw,1.35rem);color:var(--paper);text-shadow:0 2px 0 var(--ink)}
.hero-proof{display:inline-flex;align-items:center;gap:.35em;margin:.45rem 0 .2rem;padding:.25em .9em;min-height:44px;border-radius:999px;background:rgba(18,5,43,.55);border:2px solid rgba(255,255,255,.35);color:var(--paper);font-weight:700;font-size:clamp(.95rem,3.9vw,1.15rem);text-decoration:none}
.hero-proof b{color:var(--sun)}
.hero-stars{color:var(--sun);letter-spacing:.08em}
.hero-perks{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;list-style:none;padding:0;margin:1.1rem 0 0}
.hero-perks li{background:var(--c);color:var(--ink);font-family:var(--display);font-size:clamp(1.15rem,4.6vw,1.6rem);letter-spacing:.04em;padding:.12em .7em .05em;border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink)}
.hero-perks li:nth-child(odd){transform:rotate(-2deg)}
.hero-perks li:nth-child(even){transform:rotate(2deg)}
.shout-2{font-size:clamp(2.8rem,9vw,6.5rem);color:var(--sun);transform:rotate(-2deg)}
.shout-3{font-size:clamp(2.8rem,10vw,7rem);color:var(--paper);transform:rotate(2deg)}
.shout-4{font-size:clamp(2.8rem,10vw,7.5rem);color:var(--slime);transform:rotate(-2deg)}

/* ---------- buttons ---------- */
.btn{
  position:relative;border:5px solid var(--ink);border-radius:999px;color:var(--ink);
  font-family:var(--display);letter-spacing:.04em;line-height:1;text-align:center;
  background:linear-gradient(#ffd21f 0%,var(--blaze) 62%,#e03d00 100%);
  box-shadow:0 8px 0 var(--ink),0 0 0 6px rgba(166,255,31,0),0 18px 40px rgba(255,106,0,.55);
  transition:transform .12s ease,box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 11px 0 var(--ink),0 0 0 6px rgba(166,255,31,.9),0 22px 50px rgba(255,106,0,.7)}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 var(--ink)}
.btn[disabled]{filter:grayscale(.6);cursor:progress}
.btn-small{font-size:1.25rem;padding:.6rem 1.1rem;border-width:4px;box-shadow:0 5px 0 var(--ink);white-space:nowrap}
.btn-small:hover{box-shadow:0 7px 0 var(--ink),0 0 0 4px var(--slime)}
.btn-big{font-size:clamp(1.9rem,6.4vw,3.4rem);padding:.55em .9em .5em;min-width:min(100%,11em)}
.btn-mega{font-size:clamp(2rem,7vw,4rem)}
.btn-big::before{ /* gloss */
  content:"";position:absolute;left:8%;right:8%;top:8%;height:34%;border-radius:999px;
  background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none
}
.btn-big::after{ /* slime drip off the button */
  content:"";position:absolute;right:14%;top:calc(100% + 1px);width:18px;height:26px;background:var(--slime);
  border:4px solid var(--ink);border-top:0;border-radius:0 0 12px 12px;transform-origin:top;animation:dribble 2.6s ease-in-out infinite
}
@keyframes dribble{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.25)}}

/* ---------- hero ---------- */
.hero{padding:0 clamp(1rem,4vw,2.5rem) 2.5rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.stage{position:relative;width:min(92vw,760px,64vh);margin:clamp(1.6rem,4vw,2.6rem) auto 0}
.burst,.card-burst{
  position:absolute;inset:-22% -9%;z-index:-1;
  background:repeating-conic-gradient(var(--sun) 0 10deg,var(--blaze) 10deg 20deg);
  clip-path:polygon(50% 0,58% 14%,72% 4%,74% 20%,90% 14%,86% 30%,100% 34%,90% 46%,100% 58%,86% 64%,92% 80%,76% 78%,74% 94%,60% 86%,50% 100%,40% 86%,26% 94%,24% 78%,8% 80%,14% 64%,0 58%,10% 46%,0 34%,14% 30%,10% 14%,26% 20%,28% 4%,42% 14%);
  animation:throb 1.6s ease-in-out infinite;
}
@keyframes throb{50%{transform:scale(1.05) rotate(3deg)}}
.tilt{perspective:900px}
.bundle{
  border-radius:28px;border:6px solid var(--ink);box-shadow:10px 12px 0 var(--ink),0 30px 80px rgba(0,0,0,.6);
  transform-style:preserve-3d;will-change:transform
}
.sticker{
  position:absolute;right:-3%;top:-16%;width:clamp(88px,22%,150px);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;background:var(--pink);color:#fff;border:5px solid var(--ink);box-shadow:var(--hard);
  font-family:var(--display);font-size:clamp(1rem,3.4vw,1.4rem);line-height:1;transform:rotate(14deg);text-shadow:2px 2px 0 var(--ink)
}
.sticker b{font-size:2.1em;font-weight:400;color:var(--sun)}
.sticker i{font-style:normal;font-size:1.9em;color:var(--slime)}

.cta-row{display:flex;align-items:flex-end;justify-content:center;gap:.5rem;margin-top:2.25rem;width:100%}
.fine{font-size:.95rem;opacity:.92;margin:1.4rem auto 0;max-width:34ch;text-shadow:1px 1px 0 var(--ink)}

/* ---------- kids + pointing gloves ---------- */
.pointer{position:relative;z-index:3;flex:0 0 auto;display:flex;align-items:flex-end}
.kid{filter:drop-shadow(4px 5px 0 var(--ink));user-select:none;-webkit-user-drag:none}
.kid-head{width:clamp(96px,22vw,170px)}
.kid-body{width:clamp(86px,17vw,170px)}
.glove{position:absolute;width:clamp(70px,13vw,120px);height:auto;filter:drop-shadow(3px 4px 0 var(--ink));will-change:transform}
.pointer-left .glove{right:-30%;bottom:14%}
.pointer-right{flex-direction:row-reverse}
.pointer-right .glove{left:-40%;bottom:30%;transform:scaleX(-1)}
.pointer-left .kid-body + .glove{bottom:34%;right:-30%}
.bubble{
  position:absolute;bottom:102%;left:50%;transform:translateX(-50%) rotate(-5deg);white-space:nowrap;
  background:#fff;color:var(--ink);font-family:var(--display);font-size:clamp(1rem,3vw,1.45rem);letter-spacing:.03em;
  padding:.3em .7em;border:4px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink)
}
.bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-8px;border:8px solid transparent;border-top-color:var(--ink)}
.pointer-right .bubble{transform:translateX(-50%) rotate(5deg)}

/* phones: kid above the button, glove points down at it */
@media (max-width:719px){
  .cta-row{flex-direction:column;align-items:center;gap:0;margin-top:3.6rem}
  .cta-row .pointer{margin-bottom:-.4rem}
  .cta-row .glove{position:static;margin-left:-.5rem;transform:rotate(72deg)}
  .cta-row .pointer-right{display:none}
  .cta-row-offer{flex-direction:column}
  .cta-row-offer .pointer-right{display:flex;flex-direction:row;order:-1;margin-bottom:-.4rem}
  .cta-row-offer .pointer-right .glove{transform:rotate(72deg)}
  .cta-row-offer .pointer-left{display:none}
  .cta-row-offer{margin-top:4rem}
  .cta-row-offer .kid-body{width:110px}
  .top .btn-small{font-size:1.05rem}
}
/* short phone screens (Facebook and Instagram's in-app browsers lose ~100px to their toolbars):
   tighten the hero so the big buy button stays on the first screen */
@media (max-width:719px) and (max-height:760px){
  .stage{margin-top:.9rem;width:min(92vw,760px,56vh)}
  .cta-row{margin-top:2.2rem}
  .kid-head{width:80px}
  .hero-sub{margin-top:.45rem}
}

/* ---------- slime drips ---------- */
.drip{position:relative;z-index:2;height:90px;margin:0;pointer-events:none}
.drip svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.drip path{stroke:var(--ink);stroke-width:5;transform-origin:top;transform-box:fill-box}
.drip.flip{margin-top:-2px}

/* ---------- ticker ---------- */
.ticker{position:relative;z-index:2;background:var(--slime);border-block:5px solid var(--ink);overflow:hidden;transform:rotate(-1.2deg) scale(1.03);margin:-.5rem 0 0}
.ticker-track{display:flex;gap:1.6rem;width:max-content;padding:.3rem 0;font-family:var(--display);font-size:clamp(1.8rem,5.5vw,3rem);color:var(--ink);letter-spacing:.04em;animation:slide 18s linear infinite;white-space:nowrap}
.ticker-track span:nth-child(even){color:var(--blaze)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- books ---------- */
.books{padding:4.5rem clamp(1rem,4vw,2.5rem) 4rem;text-align:center}
.lede{max-width:46ch;margin:1.6rem auto 0;font-size:clamp(1.1rem,2.6vw,1.35rem);text-shadow:2px 2px 0 var(--ink)}
.shelf{list-style:none;margin:3rem auto 0;padding:0;display:grid;gap:2.2rem 1.4rem;grid-template-columns:repeat(2,minmax(0,1fr));max-width:1080px}
@media (min-width:860px){.shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}
.book{position:relative;transform:rotate(var(--r));will-change:transform}
.book img{width:100%;border:5px solid var(--ink);border-radius:10px 16px 16px 10px;box-shadow:8px 9px 0 var(--ink),0 22px 50px rgba(0,0,0,.55);transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.book:hover img{transform:translateY(-12px) rotate(calc(var(--r) * -1)) scale(1.05)}
.tag{
  position:absolute;left:-8px;top:-18px;background:var(--sun);color:var(--ink);font-family:var(--display);font-size:1.05rem;letter-spacing:.04em;
  padding:.25em .6em;border:4px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-6deg);line-height:1
}
.tag b{display:block;font-weight:400;font-size:1.9em}
.book p{margin:1rem 0 0;font-weight:600;font-size:1.02rem;text-shadow:2px 2px 0 var(--ink)}

/* ---------- meet Ralph + first-page sample ---------- */
.meet{max-width:620px;margin:2.6rem auto 0}
.meet-card{
  position:relative;background:var(--paper);color:var(--ink);border:5px solid var(--ink);border-radius:26px;box-shadow:var(--hard);
  padding:1.1rem 1.3rem 1.4rem;text-align:left;transform:rotate(1.5deg);font-weight:600
}
.meet-card p{margin:0 0 1rem}
.meet-year{
  display:inline-block;font-family:var(--display);font-size:2rem;line-height:1;letter-spacing:.04em;background:var(--sun);
  border:4px solid var(--ink);border-radius:10px;padding:.15em .45em;box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg)
}
.btn-read{font-size:clamp(1.4rem,4.5vw,1.9rem);padding:.45em .9em .4em;background:linear-gradient(#e6ffb8 0%,var(--slime) 60%,var(--slime-deep) 100%)}

.sample{
  width:min(94vw,600px);max-height:92vh;padding:0;border:0;background:transparent;color:var(--ink);overflow:auto;text-align:center
}
.sample::backdrop{background:rgba(18,5,43,.88)}
.sample-x{
  position:sticky;top:.4rem;float:right;margin:.4rem .4rem -3rem 0;z-index:2;width:46px;height:46px;border-radius:50%;
  border:4px solid var(--ink);background:var(--pink);color:#fff;font-size:1.8rem;line-height:1;box-shadow:3px 3px 0 var(--ink);padding:0
}
.page{
  background:#fffdf7;border:5px solid var(--ink);border-radius:8px 18px 18px 8px;box-shadow:10px 12px 0 var(--ink);
  padding:2.4rem clamp(1.3rem,6vw,3rem) 2rem;text-align:left;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(1.05rem,3.6vw,1.25rem);line-height:1.6
}
.page p{margin:0;text-indent:1.5em;hyphens:auto}
.page-kicker,.page-title,.page-orn{text-align:center;text-indent:0!important}
.page-kicker{letter-spacing:.14em;text-transform:uppercase;font-size:.85em}
.page-title{font-weight:400;font-size:clamp(1.9rem,7vw,2.6rem);margin:.4rem 0 .2rem;letter-spacing:.02em}
.page-orn{margin:0 0 1.6rem!important}
.page-orn::before,.page-orn::after{content:"";display:inline-block;width:4.5em;border-top:1px solid;vertical-align:middle;margin:0 .8em}
.page .page-first{text-indent:0}
.cap{float:left;font-size:3.4em;line-height:.85;margin:.06em .06em 0 0}
.sc{font-variant:small-caps;letter-spacing:.06em;text-transform:lowercase}
.page-more{margin-top:1.4rem!important;text-indent:0!important;text-align:center;font-style:italic}
.sample .btn-big{margin:2rem 0 1.4rem;font-size:clamp(1.6rem,6vw,2.4rem)}

.ship-strip{list-style:none;margin:2rem auto 0;padding:0;display:grid;gap:1rem;max-width:760px;grid-template-columns:1fr}
@media (min-width:480px){.ship-strip{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.ship-strip{max-width:1000px;grid-template-columns:repeat(4,1fr)}}
.ship-strip li{background:var(--c);color:var(--ink);border:4px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);padding:.7rem .9rem;transform:rotate(var(--r));font-weight:600;font-size:1rem;line-height:1.25}
.ship-strip b{display:block;font-family:var(--display);font-weight:400;font-size:1.6rem;letter-spacing:.03em;line-height:1}

/* ---------- why ---------- */
.why{position:relative;padding:3rem clamp(1rem,4vw,2.5rem) 5rem;text-align:center;background:linear-gradient(rgba(255,106,0,.92),rgba(224,61,0,.92));margin-top:-2px}
.pows{list-style:none;margin:2.6rem auto 0;padding:0;display:grid;gap:1.4rem;max-width:920px;grid-template-columns:1fr}
@media (min-width:700px){.pows{grid-template-columns:1fr 1fr}}
.pows li{
  background:var(--c);color:var(--ink);border:5px solid var(--ink);border-radius:22px;box-shadow:var(--hard);
  padding:1.1rem 1.3rem 1.2rem;transform:rotate(var(--r));font-weight:600;font-size:1.15rem;text-align:left
}
.pows b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,5vw,2.6rem);letter-spacing:.03em;line-height:1}
.peek{position:relative;width:max-content;margin:3.2rem auto -5rem;display:flex;align-items:flex-end;gap:.5rem}
.peek .kid{width:clamp(130px,26vw,200px)}
.peek .bubble-big{position:relative;bottom:auto;left:auto;transform:rotate(4deg);margin-bottom:3.4rem;border-radius:22px;font-size:clamp(1.3rem,4vw,2rem);line-height:1;text-align:left}
.peek .bubble-big::after{left:-14px;top:50%;margin:-8px 0 0;border:8px solid transparent;border-right-color:var(--ink)}

/* ---------- reviews ---------- */
.reviews{padding:4.5rem 0 1rem;text-align:center;overflow:hidden}
.rv-head{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,3vw,2rem);flex-wrap:wrap;padding:0 clamp(1rem,4vw,2.5rem)}
.shout-5{font-size:clamp(2.8rem,10vw,6.5rem);color:var(--cyan);transform:rotate(-2deg)}
.rv-badge{
  width:clamp(112px,24vw,160px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;
  background:var(--sun);color:var(--ink);border:5px solid var(--ink);box-shadow:var(--hard);transform:rotate(12deg);
  font-family:var(--display);font-size:clamp(.95rem,2.6vw,1.2rem);letter-spacing:.03em;line-height:1
}
.rv-badge-stars{color:var(--blaze);font-size:1.1em;-webkit-text-stroke:1px var(--ink)}
.rv-badge b{display:block;font-weight:400;font-size:2.6em;color:var(--pink);-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill}
.reviews .lede{padding:0 1rem}

.rv-features{display:grid;gap:3.2rem 2.4rem;align-items:start;max-width:1160px;margin:3.6rem auto 0;padding:0 clamp(1rem,4vw,2.5rem)}
@media (min-width:960px){.rv-features{grid-template-columns:1fr 1fr}}
.rv-feature{--c:var(--paper);--f:var(--pink);--q:var(--pink);position:relative;margin:0;text-align:left}
.rv-feature-alt{--c:var(--slime);--f:var(--blaze);--q:var(--blaze)}
.rv-feature-alt blockquote{transform:rotate(1.2deg)}
.rv-feature blockquote{
  position:relative;margin:0;background:var(--c);color:var(--ink);border:6px solid var(--ink);border-radius:30px;box-shadow:10px 12px 0 var(--ink);
  padding:1.4rem clamp(1.1rem,4vw,2rem) 1.5rem;transform:rotate(-1deg);font-weight:600;font-size:clamp(1.02rem,2.6vw,1.15rem);line-height:1.5
}
.rv-feature blockquote::before{ /* big comic quote mark */
  content:"“";position:absolute;right:1rem;top:-2.4rem;font-family:var(--display);font-size:7rem;line-height:1;color:var(--q);
  -webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)
}
.rv-feature blockquote::after{content:"";position:absolute;left:2.4rem;top:100%;border-style:solid;border-color:var(--ink) transparent transparent;border-width:26px 0 0 26px;margin-top:2px}
.rv-feature .rv-title{font-size:clamp(1.7rem,4.6vw,2.4rem);color:var(--violet);margin:0 0 .6rem;padding-right:3.5rem}
.rv-feature p{margin:0}
.rv-feature figcaption{display:flex;align-items:center;gap:.6rem;margin:1.4rem 0 0 1rem;font-family:var(--display);font-size:1.5rem;letter-spacing:.04em;text-shadow:2px 2px 0 var(--ink)}
.rv-feature small{display:block;font-family:var(--body);font-size:.95rem;letter-spacing:0;font-weight:600;opacity:.9}
.rv-rows{margin-top:2.6rem;display:grid;gap:1.6rem}
.rv-row{overflow:hidden;padding:.9rem 0 1.4rem}
.rv-track{display:flex;width:max-content;animation:slide 120s linear infinite}
.rv-row-back .rv-track{animation-direction:reverse;animation-duration:135s}
.rv-rows:hover .rv-track,.rv-rows:focus-within .rv-track,.rv-rows.paused .rv-track{animation-play-state:paused}
.rv-list{list-style:none;margin:0;padding:0 .8rem 0 0;display:flex;gap:1.6rem}

.rv{flex:0 0 auto;width:clamp(260px,72vw,330px);transform:rotate(var(--r));text-align:left;transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.rv:hover{transform:rotate(0) scale(1.04)}
.rv figure{margin:0}
.rv blockquote{
  position:relative;margin:0;background:var(--c);color:var(--ink);border:5px solid var(--ink);border-radius:24px;
  box-shadow:var(--hard);padding:.9rem 1.1rem 1rem;min-height:11.5rem
}
.rv blockquote::before,.rv blockquote::after{content:"";position:absolute;top:100%;border-style:solid;border-color:transparent;border-right-width:0;border-bottom-width:0} /* speech-bubble tail */
.rv blockquote::before{left:1.6rem;border-width:24px 0 0 24px;border-top-color:var(--ink);margin-top:2px}
.rv blockquote::after{left:calc(1.6rem + 5px);border-width:13px 0 0 13px;border-top-color:var(--c);margin-top:-1px}
.rv-stars{display:inline-block;background:var(--ink);color:var(--sun);font-size:1rem;letter-spacing:.12em;padding:.15em .55em .2em;border-radius:999px;transform:rotate(-3deg)}
.rv-title{font-family:var(--display);font-size:1.6rem;letter-spacing:.03em;line-height:1;margin:.45rem 0 .35rem}
.rv blockquote p:last-child{margin:0;font-size:1rem;font-weight:600;line-height:1.35}
.rv figcaption{display:flex;align-items:center;gap:.55rem;margin:1.15rem 0 0 .6rem;font-family:var(--display);font-size:1.3rem;letter-spacing:.04em;text-shadow:2px 2px 0 var(--ink)}
.rv-face{
  width:44px;height:44px;border-radius:50%;display:grid;place-content:center;background:var(--f);color:#fff;
  border:4px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:1.5rem;text-shadow:2px 2px 0 var(--ink)
}

.rv-pause{
  margin:1rem auto 0;background:rgba(18,5,43,.78);color:var(--paper);border:3px solid var(--ink);border-radius:999px;
  padding:.4rem 1rem;font-weight:600;font-size:.95rem;box-shadow:3px 3px 0 var(--ink)
}
.rv-pause[hidden]{display:none}

/* ---------- offer ---------- */
.offer{padding:4.5rem clamp(1rem,4vw,2.5rem) 4rem;text-align:center}
.card{
  position:relative;max-width:900px;margin:3rem auto 0;display:grid;gap:1.5rem;align-items:center;
  background:var(--paper);color:var(--ink);border:6px solid var(--ink);border-radius:32px;box-shadow:10px 12px 0 var(--ink);padding:1.4rem
}
@media (min-width:760px){.card{grid-template-columns:1.05fr 1fr;padding:2rem}}
.card-burst{inset:-9%;opacity:.95}
.card-img{border-radius:20px;border:5px solid var(--ink)}
.deal-name{font-family:var(--display);font-size:clamp(1.8rem,5vw,2.6rem);margin:0;letter-spacing:.03em;color:var(--violet);line-height:1}
.price{
  font-family:var(--display);font-size:clamp(6rem,22vw,10rem);line-height:.85;margin:.1em 0 0;color:var(--blaze);
  -webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.05em .06em 0 var(--ink);display:inline-block;transform:rotate(-4deg)
}
.dollar{font-size:.5em;vertical-align:.7em}
.deal-sub{margin:.6rem 0 0;font-weight:600}
.specs{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.specs li{background:var(--c);border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);padding:.2em .75em;font-weight:700;font-size:.95rem}
.shipto{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;margin-top:1.1rem}
.shipto-label{font-family:var(--display);font-size:1.3rem;letter-spacing:.03em;margin-right:.2rem}
.shipto-btn{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:.3em .85em;min-height:44px;font-weight:700;font-size:.95rem;box-shadow:3px 3px 0 var(--ink)}
.shipto-btn[aria-pressed="true"]{background:var(--violet);color:#fff}
.intl-note{margin:.6rem 0 0;font-size:.95rem;font-weight:600}
.intl-note[hidden]{display:none}
.qty{display:inline-flex;align-items:center;gap:.8rem;margin-top:1.1rem;background:#fff;border:4px solid var(--ink);border-radius:999px;padding:.3rem;box-shadow:4px 4px 0 var(--ink)}
.qty output{min-width:6.5ch;font-weight:700}
.qty-btn{width:44px;height:44px;border-radius:50%;border:4px solid var(--ink);background:var(--slime);color:var(--ink);font-size:1.6rem;font-weight:700;line-height:1;display:grid;place-content:center;padding:0}
.qty-btn:active{transform:scale(.9)}
.cta-row-offer{margin-top:5rem;gap:1rem}
.buy-error{max-width:40ch;margin:1.2rem auto 0;background:#fff;color:#a30021;border:4px solid var(--ink);border-radius:16px;padding:.7rem 1rem;font-weight:600;box-shadow:4px 4px 0 var(--ink)}

.faq{max-width:640px;margin:3.5rem auto 0;text-align:left;display:grid;gap:.9rem}
.faq details{background:rgba(18,5,43,.78);border:4px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);padding:.2rem 1.1rem}
.faq summary{font-family:var(--display);font-size:1.6rem;letter-spacing:.03em;color:var(--slime);padding:.6rem 0;cursor:pointer}
.faq p{margin:0 0 1rem}
.faq a,.foot a{color:var(--slime);font-weight:700;overflow-wrap:anywhere}

.foot{padding:2rem 1rem 7.5rem;text-align:center;font-size:.95rem;background:rgba(18,5,43,.85);border-top:5px solid var(--ink)}
.foot p{margin:.2rem 0}
.foot-title{font-family:var(--display);font-size:2rem;color:var(--slime);letter-spacing:.04em}
.foot-title span{color:var(--pink)}

/* ---------- sticky buy bar ---------- */
.buybar{
  position:fixed;left:50%;bottom:calc(.7rem + env(safe-area-inset-bottom,0px));z-index:20;transform:translate(-50%,160%);
  width:min(94vw,520px);display:flex;align-items:center;gap:.6rem;background:var(--paper);color:var(--ink);
  border:4px solid var(--ink);border-radius:999px;box-shadow:0 6px 0 var(--ink),0 16px 40px rgba(0,0,0,.5);padding:.35rem .45rem .35rem .4rem;
  transition:transform .45s cubic-bezier(.2,1.5,.4,1)
}
.buybar.on{transform:translate(-50%,0)}
.buybar img{width:48px;height:48px;object-fit:cover;object-position:top;border-radius:50%;border:3px solid var(--ink);background:var(--cyan)}
.buybar p{margin:0;flex:1;font-size:.9rem;line-height:1.15;text-align:left}
.buybar b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:.03em}

/* ---------- flyby saucer ---------- */
.flyby{position:fixed;top:12vh;left:0;width:clamp(120px,22vw,220px);z-index:15;pointer-events:none;transform:translateX(-130%);filter:drop-shadow(4px 6px 0 rgba(18,5,43,.6))}
.flyby-beam{fill:var(--slime);opacity:.55}

/* ---------- overlays ---------- */
.beam-up,.result{position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;padding:1.5rem}
.beam-up[hidden],.result[hidden]{display:none}
.beam-up{background:rgba(18,5,43,.9)}
.beam-up p{font-family:var(--display);font-size:clamp(2rem,8vw,4rem);color:var(--slime);-webkit-text-stroke:.06em var(--ink);paint-order:stroke fill;position:relative;margin:0}
.beam-cone{position:absolute;left:50%;top:0;width:min(90vw,520px);height:100%;transform:translateX(-50%);background:linear-gradient(rgba(166,255,31,.75),rgba(166,255,31,0) 85%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);animation:throb 1s ease-in-out infinite}
.result{background:rgba(18,5,43,.86)}
.result-box{background:var(--paper);color:var(--ink);border:6px solid var(--ink);border-radius:30px;box-shadow:10px 12px 0 var(--ink);padding:1.5rem 1.5rem 2rem;max-width:460px}
.result-box .kid{width:150px;margin:-5.5rem auto .5rem}
.result-box .shout{color:var(--blaze);font-size:clamp(2.6rem,10vw,4rem)}
.result-box p{font-weight:600;margin:1rem 0 1.4rem}
.confetti{position:fixed;top:-20px;z-index:60;width:12px;height:18px;border:2px solid var(--ink);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rays,.burst,.card-burst,.ticker-track,.btn-big::after,.beam-cone{animation:none}
  .rv-track{animation:none}
  .rv-row{overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:1rem}
  .rv{scroll-snap-align:center}
  .flyby{display:none}
}