/* lawz-kid - hand-cut sticker style */
@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(../fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(../fonts/fredoka-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:400;font-display:swap;src:url(../fonts/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(../fonts/nunito-latin-800-normal.woff2) format("woff2")}

:root{
  --olive:#5C6B33;--leaf:#8FA84E;--deep:#3B4620;--cream:#EFE9DA;--paper:#FBF8F0;
  --ink:#2A2E26;--sun:#F5B83D;--coral:#EF7B5A;--sky:#5BB5D6;--pale:#C8D79A;
  --line:4px solid var(--deep);--sh:6px 6px 0 var(--deep);
  --pop:cubic-bezier(.34,1.56,.64,1);
  --h:"Fredoka","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --b:"Nunito","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.6 var(--b);overflow-x:clip}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .27 0 0 0 0 .12 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{max-width:100%;display:block}
a{color:var(--deep);text-underline-offset:4px;text-decoration-thickness:3px}
h1,h2,h3{font-family:var(--h);font-weight:700;line-height:1.05;margin:0 0 .4em;color:var(--deep);letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,7.5vw,5.6rem)}
h2{font-size:clamp(2.1rem,5vw,3.8rem)}
h3{font-size:1.5rem;line-height:1.15}
p{margin:0 0 1em;max-width:36em}
:focus-visible{outline:4px solid var(--ink);outline-offset:4px;border-radius:6px}
.dark :focus-visible{outline-color:var(--cream)}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--sun);border:var(--line);padding:12px 18px;border-radius:30px;font-weight:800}
.skip:focus{top:12px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:12px 30px;
  font:700 1.2rem/1.1 var(--h);color:var(--ink);background:var(--sun);border:var(--line);border-radius:999px;
  box-shadow:5px 5px 0 var(--deep);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-1px,-2px);box-shadow:7px 8px 0 var(--deep)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--deep)}
.btn.alt{background:var(--paper)}
.btn.big{min-height:72px;font-size:1.5rem;padding-inline:40px}
.btn[aria-disabled=true]{background:var(--cream);color:#4a5139;border-style:dashed;box-shadow:none;cursor:not-allowed}
.btn[aria-disabled=true]:hover,.btn[aria-disabled=true]:active{transform:none}
.tag{display:inline-block;font:700 1.05rem/1 var(--h);background:var(--coral);color:var(--ink);border:3px solid var(--deep);
  padding:10px 16px;border-radius:14px 6px 16px 8px;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--deep)}

/* sections */
.sec{position:relative;background:var(--bg);padding:clamp(64px,10vw,130px) 0;overflow-x:clip}
.sec>.wave{position:absolute;left:0;top:-59px;width:100%;height:60px;color:var(--bg);z-index:3}
.s-free{--bg:var(--pale)}.s-packs{--bg:var(--cream)}.s-meet{--bg:var(--sun)}
.s-yt{--bg:var(--sky)}.s-adults{--bg:var(--paper)}
.s-adults{background:var(--paper)}
.eyebrow{font:700 1rem/1 var(--h);text-transform:uppercase;letter-spacing:.12em;color:var(--olive);margin-bottom:14px}
.s-meet .eyebrow,.s-yt .eyebrow{color:var(--deep)}

/* header + hero */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:18px 0}
.top img{width:150px;height:auto}
.top nav{display:flex;flex-wrap:wrap;gap:4px 8px;margin-left:auto}
.top nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;font:600 1.05rem var(--h);text-decoration:none;border-radius:999px}
.top nav a:hover{background:var(--pale)}
.hero{position:relative;background:var(--paper);overflow-x:clip}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:end;padding:clamp(16px,4vw,50px) 0 150px}
.hero h1{max-width:9em;margin-bottom:.3em}
.hero h1 em{font-style:normal;background:var(--sun);padding:0 .15em;border-radius:14px 22px 10px 24px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero p.lead{font-size:1.35rem;max-width:22em}
.hero .tag{margin-bottom:22px}
.btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.stage{position:relative;justify-self:center;width:min(100%,440px);padding-top:90px;margin-bottom:-125px}
.lozzy-btn{display:block;width:100%;background:none;border:0;padding:0;cursor:pointer;transform-origin:50% 100%;-webkit-tap-highlight-color:transparent}
.lozzy-svg{width:100%;height:auto;overflow:visible;animation:bob 2.4s ease-in-out infinite}
.l-body,.l-feet,.l-arm,.l-sprout,.eye{transform-box:fill-box}
.l-sprout{transform-origin:50% 100%;animation:wig 3.2s ease-in-out infinite}
.l-arm-l{transform-origin:100% 0;animation:armL 2.4s ease-in-out infinite}
.l-arm-r{transform-origin:0 0;animation:armR 2.4s ease-in-out infinite}
.l-feet{transform-origin:50% 50%;animation:feet 2.4s ease-in-out infinite}
.eye{transform-origin:50% 50%;animation:blink 5s infinite}
.eye:nth-of-type(2){animation-delay:.02s}
.squash{animation:squash .5s var(--pop)}
.bubble{position:absolute;z-index:4;left:-4%;top:0;max-width:78%;background:var(--paper);border:var(--line);border-radius:26px 30px 30px 8px;
  padding:14px 18px;font:600 1.2rem/1.25 var(--h);box-shadow:var(--sh);transform:rotate(-2deg);margin:0}
.bubble::after{content:"";position:absolute;left:34px;bottom:-17px;width:26px;height:26px;background:var(--paper);
  border:var(--line);border-top:0;border-left:0;transform:rotate(45deg) skew(8deg,8deg)}
.hill{position:absolute;left:0;bottom:-1px;width:100%;height:150px;z-index:2;color:var(--pale);pointer-events:none}
.stars{position:absolute;inset:0;pointer-events:none;z-index:5}
.star{position:absolute;left:50%;top:55%;width:26px;height:26px;background:var(--sun);border:3px solid var(--deep);
  clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%);
  animation:star .8s ease-out forwards}

/* free pack */
.free{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.fan{position:relative;aspect-ratio:1/1.05;width:min(100%,520px)}
.fan img{position:absolute;width:52%;height:auto;border:var(--line);border-radius:10px 16px 8px 14px;background:#fff;box-shadow:var(--sh)}
.fan img:nth-child(1){left:2%;top:12%;transform:rotate(-12deg)}
.fan img:nth-child(2){left:44%;top:2%;transform:rotate(9deg)}
.fan img:nth-child(3){left:24%;top:30%;transform:rotate(-3deg)}
.fan img:nth-child(4){left:46%;top:36%;transform:rotate(6deg);z-index:2}
.fan .tag{position:absolute;z-index:3;left:0;bottom:2%;transform:rotate(4deg);background:var(--sun)}
.free .note{font-weight:800;font-size:1rem}

/* products */
.s-packs h2{max-width:11em}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(24px,4vw,56px);margin-top:50px;position:relative;z-index:2}
.card{position:relative;background:var(--paper);border:var(--line);border-radius:34px 22px 38px 18px;box-shadow:8px 8px 0 var(--deep);
  padding:22px 22px 26px;transition:transform .45s var(--pop),box-shadow .3s;display:flex;flex-direction:column;gap:10px}
.card:nth-child(1){transform:rotate(-1.6deg)}
.card:nth-child(2){transform:rotate(1.4deg) translateY(36px)}
.card:nth-child(3){transform:rotate(1deg)}
.card:nth-child(4){transform:rotate(-1.2deg) translateY(36px)}
.card:nth-child(1):hover,.card:nth-child(1):focus-within{transform:rotate(.6deg) translateY(-6px)}
.card:nth-child(2):hover,.card:nth-child(2):focus-within{transform:rotate(-.4deg) translateY(30px)}
.card:nth-child(3):hover,.card:nth-child(3):focus-within{transform:rotate(-.8deg) translateY(-6px)}
.card:nth-child(4):hover,.card:nth-child(4):focus-within{transform:rotate(.6deg) translateY(30px)}
.card img.cover{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;object-position:50% 38%;border:3px solid var(--deep);border-radius:14px 22px 12px 20px;background:#fff}
.card .meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.age{font:700 1rem var(--h);background:var(--pale);border:3px solid var(--deep);border-radius:999px;padding:6px 14px}
.price{font:700 1.7rem var(--h);color:var(--deep)}
.card h3{margin:0}
.card .btn{align-self:flex-start;margin-top:4px}
.mini{position:absolute;right:-14px;top:-30px;width:78px;height:auto;transform:scale(0) rotate(14deg);transition:transform .4s var(--pop);pointer-events:none;z-index:3}
.card:hover .mini,.card:focus-within .mini{transform:scale(1) rotate(10deg)}
.peek{position:absolute;pointer-events:none;z-index:1;width:120px;height:auto}
.peek-r{right:-46px;top:90px;transform:rotate(-14deg);animation:peekR 4s ease-in-out infinite}
.peek-l{left:-44px;bottom:60px;transform:rotate(12deg);animation:peekL 5s ease-in-out infinite}

/* meet */
.meet{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,70px);align-items:center}
.meet-art{position:relative;width:min(100%,380px);padding-top:100px;margin-inline:auto}
.meet-art img.big-l{width:100%;height:auto}
.meet-art img.big-l.pop{animation:squash .5s var(--pop)}
.meet-art .bubble{left:auto;right:-6%;top:0;transform:rotate(2deg);background:#fff}
.faces{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;padding:0;list-style:none}
.face-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:92px;min-height:48px;padding:8px 6px 6px;background:var(--paper);
  border:var(--line);border-radius:20px 12px 22px 12px;box-shadow:4px 4px 0 var(--deep);font:700 .95rem var(--h);color:var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s}
.face-btn img{width:56px;height:auto}
.faces li:nth-child(odd) .face-btn{transform:rotate(-2deg)}.faces li:nth-child(even) .face-btn{transform:rotate(2deg)}
.face-btn:active{transform:translate(4px,4px);box-shadow:0 0 0}
.face-btn[aria-pressed=true]{background:var(--coral)}

/* youtube */
.yt{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.yt .tv{justify-self:center;width:min(100%,300px);aspect-ratio:4/3;background:var(--paper);border:var(--line);border-radius:30px 18px 34px 16px;
  box-shadow:var(--sh);display:grid;place-items:center;transform:rotate(3deg)}
.yt .tv img{width:62%;height:auto}
.s-yt .btn{background:var(--paper)}

/* grown-ups */
.adults{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px)}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.facts li{padding:0 0 18px 30px;border-bottom:3px dotted var(--leaf);position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:14px;background:var(--leaf);border:3px solid var(--deep);border-radius:60% 40% 55% 45%}
.facts b{font-family:var(--h);color:var(--deep)}
.plain-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px}
.plain-links a{display:inline-flex;align-items:center;min-height:48px;font-weight:800}

/* footer */
footer{background:var(--deep);color:var(--cream);padding:56px 0 100px;position:relative}
footer .wave{position:absolute;left:0;top:-59px;width:100%;height:60px;color:var(--deep)}
footer .row{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
footer img{width:190px;height:auto}
footer a{color:var(--cream);display:inline-flex;align-items:center;min-height:48px;margin-right:18px;font-weight:800}
footer p{margin:0;max-width:none}

/* sound toggle */
.sound{min-height:48px;display:flex;align-items:center;gap:8px;padding:6px 18px 6px 12px;
  font:700 1.05rem var(--h);color:var(--ink);background:var(--paper);border:var(--line);border-radius:999px;box-shadow:3px 3px 0 var(--deep);cursor:pointer}
.sound svg{width:28px;height:28px;flex:none}
.sound .waves{opacity:0}.sound[aria-pressed=true] .waves{opacity:1}
.sound[aria-pressed=true]{background:var(--sun)}
.sound:active{transform:translate(4px,4px);box-shadow:0 0 0}

/* legal pages */
.doc{max-width:46rem;padding:30px 0 90px}
.doc .draft{display:inline-block;background:var(--sun);border:var(--line);border-radius:14px 6px 16px 8px;padding:8px 16px;font:700 1.1rem var(--h);transform:rotate(-1.5deg)}
.doc h1{font-size:clamp(2.2rem,6vw,3.6rem);margin-top:24px}
.doc h2{font-size:1.7rem;margin-top:1.6em}
.nf{min-height:70vh;display:grid;align-items:center}
.nf img{width:220px;margin-bottom:10px}

/* reveals */
.js .rv{opacity:0;transform:translateY(34px) scale(.96);transition:opacity .5s,transform .6s var(--pop)}
.js .rv.in{opacity:1;transform:none}
.js .card.rv.in:nth-child(1){transform:rotate(-1.6deg)}.js .card.rv.in:nth-child(2){transform:rotate(1.4deg) translateY(36px)}
.js .card.rv.in:nth-child(3){transform:rotate(1deg)}.js .card.rv.in:nth-child(4){transform:rotate(-1.2deg) translateY(36px)}
.js .card.rv.in:nth-child(1):hover,.js .card.rv.in:nth-child(1):focus-within{transform:rotate(.6deg) translateY(-6px)}
.js .card.rv.in:nth-child(2):hover,.js .card.rv.in:nth-child(2):focus-within{transform:rotate(-.4deg) translateY(30px)}
.js .card.rv.in:nth-child(3):hover,.js .card.rv.in:nth-child(3):focus-within{transform:rotate(-.8deg) translateY(-6px)}
.js .card.rv.in:nth-child(4):hover,.js .card.rv.in:nth-child(4):focus-within{transform:rotate(.6deg) translateY(30px)}

@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes wig{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-9deg)}86%{transform:rotate(8deg)}94%{transform:rotate(-4deg)}}
@keyframes armL{50%{transform:rotate(-8deg)}}
@keyframes armR{50%{transform:rotate(8deg)}}
@keyframes feet{50%{transform:scaleX(1.06)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes squash{0%{transform:scale(1)}25%{transform:scale(1.18,.8)}55%{transform:scale(.88,1.16) translateY(-18px)}80%{transform:scale(1.05,.96)}100%{transform:scale(1)}}
@keyframes star{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(200deg);opacity:0}}
@keyframes peekR{50%{transform:translateX(-14px) rotate(-18deg)}}
@keyframes peekL{50%{transform:translateX(14px) rotate(16deg)}}

@media (max-width:860px){
  .hero .grid,.free,.meet,.yt,.adults{grid-template-columns:1fr}
  .hero h1{max-width:none}
  .cards{grid-template-columns:1fr}
  .card:nth-child(n){transform:rotate(-1deg)}
  .card:nth-child(even){transform:rotate(1deg)}
  .js .card.rv.in:nth-child(n){transform:rotate(-1deg)}.js .card.rv.in:nth-child(even){transform:rotate(1deg)}
  .peek{width:84px}
  .stage{order:-1;width:min(62%,240px);padding-top:84px;margin-bottom:0}
  .hero .grid{padding-bottom:110px;gap:8px}
  .top .sound{order:2}
  .top nav{order:3;width:100%;flex-wrap:nowrap;justify-content:space-between;margin-left:0}
  .top nav a{padding:0 6px;font-size:1rem}
  .yt .tv{display:none}
}
@media (max-width:480px){
  body{font-size:1.125rem}
  .top img{width:124px}
  .bubble{font-size:1.05rem;padding:10px 14px}
  .btn{width:100%}
  #soundLabel{display:none}
  .sound{padding:6px 14px 6px 10px}
  .face-btn{width:calc(25% - 9px);min-width:76px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .mini{display:none}
}

/* opening intro: ~2.2s, home page only */
.intro{display:none;position:fixed;inset:0;z-index:200;background:var(--cream);overflow:hidden;cursor:pointer;
  animation:inOut .6s 1.6s cubic-bezier(.7,0,.9,.4) forwards}
.intro-on .intro{display:block}
.in-stage{position:absolute;left:50%;top:40%;width:min(78vw,380px);aspect-ratio:1/1;transform:translate(-50%,-50%)}
.sheet{position:absolute;width:50%;height:auto;border:var(--line);border-radius:10px 16px 8px 14px;background:#fff;box-shadow:var(--sh);
  animation:drop .56s var(--d) both}
.s1{left:0;top:14%;--r:-12deg;--d:0s}.s2{left:48%;top:2%;--r:9deg;--d:.12s}.s3{left:22%;top:30%;--r:-3deg;--d:.24s}
.in-lozzy{position:absolute;left:50%;bottom:-3%;width:min(46vw,230px);margin-left:calc(min(46vw,230px) / -2);transform-origin:50% 100%;
  transform:translateY(115%);animation:rise .8s .6s both}
.in-lozzy img{width:100%;height:auto}
.lid{position:absolute;top:62.4%;width:10.5%;aspect-ratio:1;margin-top:-5.25%;background:var(--leaf);border-radius:50%;
  transform:scaleY(0);transform-origin:50% 50%;animation:lid .25s 1.1s both}
.l1{left:39.5%;margin-left:-5.25%}.l2{left:60.5%;margin-left:-5.25%}
.in-bubble{position:absolute;left:70%;top:-4%;margin:0;padding:6px 16px;background:var(--paper);border:var(--line);border-radius:20px 22px 22px 6px;
  font:700 1.6rem/1.2 var(--h);box-shadow:4px 4px 0 var(--deep);transform:scale(0);transform-origin:0 100%;animation:pop .3s 1.2s var(--pop) both}
@keyframes drop{0%{transform:translateY(-120vh) rotate(calc(var(--r) - 30deg))}55%{transform:translateY(14px) rotate(var(--r))}
  75%{transform:translateY(-9px) rotate(var(--r))}100%{transform:rotate(var(--r))}}
@keyframes rise{0%{transform:translateY(115%)}40%{transform:translateY(-8%) scale(.9,1.14)}65%{transform:translateY(2%) scale(1.1,.9)}100%{transform:none}}
@keyframes lid{0%,100%{transform:scaleY(0)}50%{transform:scaleY(1)}}
@keyframes pop{to{transform:scale(1) rotate(-3deg)}}
@keyframes inOut{to{transform:translateY(-100%);visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){.intro{display:none!important}}