/* =========================================================
   Playful layer — child-friendly look & motion.
   Loaded last on every page (after site.css / flow.css).
   ========================================================= */
:root{
  --font-d:'Fredoka','Nunito',system-ui,sans-serif;
  --sun:#ffc83d; --sky-b:#4fb3ff; --grass:#3ccf7e; --coral:#ff6b6b; --grape:#8b5cf6; --pink:#ff8fb8;
  --pop:cubic-bezier(.34,1.56,.64,1);
  --doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%2316236b' stroke-opacity='.07' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 20l5 11 12 2-9 8 2 12-10-6-10 6 2-12-9-8 12-2z'/%3E%3Cpath d='M150 24l44 44-9 9-44-44zM141 33l-7 16 16-7'/%3E%3Crect x='130' y='140' width='46' height='58' rx='6'/%3E%3Cpath d='M141 140v58M150 156h18M150 166h18'/%3E%3Cpath d='M36 160l15-38 15 38M42 146h18'/%3E%3Ccircle cx='96' cy='96' r='9'/%3E%3Cpath d='M70 214c10-8 20 8 30 0s20 8 30 0'/%3E%3Cpath d='M206 128v22M195 139h22'/%3E%3C/svg%3E");
  --doodle-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 20l5 11 12 2-9 8 2 12-10-6-10 6 2-12-9-8 12-2z'/%3E%3Cpath d='M150 24l44 44-9 9-44-44zM141 33l-7 16 16-7'/%3E%3Crect x='130' y='140' width='46' height='58' rx='6'/%3E%3Cpath d='M141 140v58M150 156h18M150 166h18'/%3E%3Cpath d='M36 160l15-38 15 38M42 146h18'/%3E%3Ccircle cx='96' cy='96' r='9'/%3E%3Cpath d='M70 214c10-8 20 8 30 0s20 8 30 0'/%3E%3Cpath d='M206 128v22M195 139h22'/%3E%3C/svg%3E");
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C180 60 360 0 540 26S900 60 1080 30 1320 6 1440 26V60H0z'/%3E%3C/svg%3E");
}

/* ---------- Type ---------- */
body{font-family:'Nunito',system-ui,sans-serif;font-weight:500}
h1,h2,h3,h4,h5,.btn,.chip,.eyebrow,.menu a,.stat b,.float-card b,.kit-total b,.finder-tabs button,.tabs button,.seg label,.flow li,.cls .n,.badge,.school h4,.faq summary,.pub,.spine{font-family:var(--font-d)}
h1,h2{font-weight:600;letter-spacing:0!important}
h3,h4{font-weight:600}
.hero h1{font-weight:600;line-height:1.08}
.section-head h2{font-size:clamp(30px,4.2vw,44px)}
.eyebrow{display:inline-block;background:#fff1c9;color:#b45309;padding:6px 16px;border-radius:999px;transform:rotate(-2deg);letter-spacing:.06em;font-size:13px;font-weight:600;box-shadow:0 3px 0 #ffd977}
.stats .eyebrow,.cta .eyebrow{background:rgba(255,255,255,.14);color:var(--sun);box-shadow:none}

/* ---------- Chunky "press-able" buttons ---------- */
.btn{border-radius:16px;font-weight:600;font-size:16px;letter-spacing:.01em;transition:transform .18s var(--pop),box-shadow .18s,background .2s}
.btn-red{box-shadow:0 5px 0 #a8141b}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 7px 0 #a8141b}
.btn-navy{box-shadow:0 5px 0 #070c33}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 7px 0 #070c33}
.btn-ghost{box-shadow:0 4px 0 var(--line);border-width:2px}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:0 6px 0 #cdd4ee}
.btn:active{transform:translateY(3px)!important;box-shadow:0 1px 0 rgba(0,0,0,.25)!important}
.btn:disabled{opacity:.7;cursor:wait}
.chip{font-weight:600;letter-spacing:.01em}

/* ---------- Header ---------- */
.logo img{transition:transform .4s var(--pop)}
.logo:hover img{transform:rotate(-4deg) scale(1.05)}
.menu a{font-weight:500;font-size:16px;border-radius:12px}
.menu a:hover{background:#fff3cf;color:var(--navy-2)}
.menu a.active{background:var(--navy);color:#fff}
.icon-btn{border-radius:14px;transition:background .15s,transform .3s var(--pop)}
.icon-btn:hover{transform:rotate(-8deg) scale(1.08)}
.badge.bump{animation:bump .6s var(--pop)}
@keyframes bump{30%{transform:scale(1.6)}60%{transform:scale(.9)}}

/* Pencil scroll-progress bar */
.pencil-progress{position:fixed;top:0;left:0;height:8px;width:0;z-index:70;pointer-events:none;border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,#ff8fb8 0 10px,#c0c7d6 10px 16px,transparent 16px),repeating-linear-gradient(180deg,#ffc83d 0 3px,#ffb300 3px 5px,#ffc83d 5px 8px)}
.pencil-progress::after{content:"";position:absolute;right:-14px;top:0;border-left:14px solid #f6d6a8;border-top:4px solid transparent;border-bottom:4px solid transparent}
.pencil-progress::before{content:"";position:absolute;right:-14px;top:3px;border-left:5px solid #0e1748;border-top:1px solid transparent;border-bottom:1px solid transparent;transform:translateX(9px)}

/* ---------- Reveal: bouncy, staggered ---------- */
.reveal{opacity:0;transform:translateY(34px) scale(.96);transition:opacity .6s ease,transform .8s var(--pop);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ---------- Doodle backgrounds + waves ---------- */
.hero{background:linear-gradient(180deg,#e6f3ff 0%,#fff6e6 100%)}
.hero::before{background-image:var(--doodle);background-size:240px 240px;mask-image:linear-gradient(180deg,#000 50%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
.wavy{position:relative}
.wavy::before,.wavy::after{content:"";position:absolute;left:0;right:0;height:40px;background:inherit;-webkit-mask:var(--wave) center/100% 100% no-repeat;mask:var(--wave) center/100% 100% no-repeat;pointer-events:none}
.wavy::before{top:-39px}
.wavy::after{bottom:-39px;transform:scaleY(-1)}
.wavy.top-only::after{display:none}

/* ---------- Hero ---------- */
.hero h1 .hl{color:var(--red)}
.hero h1 .hl::after{display:none}
.squiggle{position:absolute;left:0;bottom:-.16em;width:100%;height:.32em;overflow:visible}
.squiggle path{fill:none;stroke:var(--sun);stroke-width:7;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s 1.2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pop-letters .w{display:inline-block;white-space:nowrap}
.pop-letters .l{display:inline-block;animation:letter .7s var(--pop) both;animation-delay:calc(var(--i) * 35ms + .15s)}
@keyframes letter{from{opacity:0;transform:translateY(.5em) scale(.4) rotate(-12deg)}}
.rainbow .l:nth-child(5n+1){color:var(--sky-b)}
.rainbow .l:nth-child(5n+2){color:var(--grass)}
.rainbow .l:nth-child(5n+3){color:#f5a700}
.rainbow .l:nth-child(5n+4){color:var(--coral)}
.rainbow .l:nth-child(5n+5){color:var(--grape)}
.hero .lead{font-size:19px}

.finder{border-radius:28px;border:0;overflow:visible;padding-top:28px}
.finder::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;border-radius:28px 28px 0 0;background:linear-gradient(90deg,var(--coral) 0 20%,var(--sun) 20% 40%,var(--grass) 40% 60%,var(--sky-b) 60% 80%,var(--grape) 80%)}
.finder .field input{border-width:2px;border-radius:16px}
.finder .field input:focus{border-color:var(--sky-b);box-shadow:0 0 0 5px rgba(79,179,255,.2)}
.finder-tabs{border-radius:14px}
.trust-row span{background:#fff;padding:6px 12px 6px 8px;border-radius:999px;box-shadow:0 3px 0 var(--line)}

.hero-art .blob{background:radial-gradient(circle at 35% 30%,#e3f2ff,#a9d8ff 75%);inset:4%}
.scene{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scene .rays{transform-origin:420px 80px;animation:spin 22s linear infinite}
.scene .cloud{animation:drift 14s ease-in-out infinite alternate}
.scene .cloud.c2{animation-duration:18s;animation-delay:-6s}
.scene .twinkle{transform-box:fill-box;transform-origin:center;animation:twinkle 2.4s ease-in-out infinite}
.scene .twinkle:nth-of-type(2n){animation-delay:-1.2s}
.scene .drop{animation:drop .8s var(--pop) both}
.scene .sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 4s ease-in-out infinite}
.scene .plane{animation:fly 11s ease-in-out infinite}
.hero-mascot{position:absolute;left:50%;bottom:27.4%;width:34%;transform:translateX(-50%);animation:arrive 1s 1s var(--pop) both}
.hero-mascot .mascot{width:100%;height:auto;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{to{transform:translateX(36px)}}
@keyframes twinkle{50%{transform:scale(.6) rotate(20deg);opacity:.6}}
@keyframes drop{from{transform:translateY(-260px);opacity:0}60%{opacity:1}}
@keyframes sway{50%{transform:rotate(6deg)}}
@keyframes fly{0%{transform:translate(-80px,250px) rotate(-8deg)}45%{transform:translate(300px,120px) rotate(-14deg)}55%{transform:translate(380px,140px) rotate(6deg)}100%{transform:translate(620px,60px) rotate(-10deg)}}
@keyframes arrive{from{transform:translate(-50%,-120%) scale(.6);opacity:0}}
.float-card{border-radius:20px;border:2px solid #fff;box-shadow:0 8px 0 rgba(22,35,107,.08),var(--shadow)}
.float-card .ico{border-radius:14px}
.fc2{top:34%;bottom:auto;right:-6%}
.fc3{top:52%;bottom:auto;left:-8%}

/* ---------- Mascot (shared) ---------- */
.mascot .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
.mascot .pupil{transition:transform .12s linear}
.mascot .arm-r{transform-origin:100px 72px;animation:wave-arm 1.5s ease-in-out infinite}
.mascot.hop{animation:hop 2.6s ease-in-out infinite}
.mascot.jump{animation:jump .9s var(--pop) infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
/* Booky the owl's ear tufts give a little wiggle now and then */
.mascot .tuft{transform-box:fill-box;transform-origin:50% 100%;animation:tuft 4.6s ease-in-out infinite}
.mascot .tuft-r{animation-delay:-.2s}
@keyframes tuft{0%,84%,100%{transform:none}89%{transform:rotate(-14deg)}94%{transform:rotate(9deg)}}
/* Peekaboo: Booky covers his eyes with his wings (used while a secret code is typed) */
.mascot .hands{opacity:0;transform:translateY(26px);transition:opacity .2s,transform .4s var(--pop)}
.mascot .arm-l,.mascot .arm-r{transition:opacity .2s}
.peek .mascot .hands{opacity:1;transform:none}
.peek .mascot .arm-l,.peek .mascot .arm-r{opacity:0}
/* Mini school bag that stands for one child's kit */
.mini-bag{width:36px;height:42px;flex:none;display:block}
@keyframes wave-arm{50%{transform:rotate(-26deg)}}
@keyframes hop{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(-10px)}80%{transform:translateY(0)}86%{transform:translateY(-4px)}}
@keyframes jump{50%{transform:translateY(-16px) rotate(-3deg)}}

/* ---------- Confetti ---------- */
.confetto{position:fixed;width:9px;height:13px;border-radius:2px;z-index:300;pointer-events:none;animation:confetti 1.5s cubic-bezier(.15,.7,.4,1) forwards}
.confetto.round{border-radius:50%;width:10px;height:10px}
@keyframes confetti{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

/* ---------- Open-orders cards ---------- */
.orders-card{border-radius:28px;border:0;box-shadow:0 10px 0 rgba(22,35,107,.06),var(--shadow-lg)}
.school{position:relative;overflow:hidden;border-radius:20px;border-width:2px;padding-top:20px}
.school::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:var(--c,var(--navy))}
.school:hover{transform:translateY(-5px) rotate(-.8deg);border-color:var(--c,var(--navy))}
.school:hover .crest{animation:wiggle .5s}
.school .crest{border-radius:16px}
@keyframes wiggle{25%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}}

/* ---------- How it works: road + school bus ---------- */
.steps::before{border:0;top:40px;height:5px;border-radius:5px;background:repeating-linear-gradient(90deg,#cdd4ee 0 16px,transparent 16px 26px);background-size:26px 5px;animation:road 1.2s linear infinite}
@keyframes road{to{background-position:-26px 0}}
.bus{position:absolute;top:13px;left:10%;width:58px;z-index:0;animation:bus 12s ease-in-out infinite}
@keyframes bus{0%{left:10%;transform:scaleX(1)}46%{left:calc(90% - 58px);transform:scaleX(1)}50%{left:calc(90% - 58px);transform:scaleX(-1)}96%{left:10%;transform:scaleX(-1)}100%{left:10%;transform:scaleX(1)}}
.step .num{border:0;border-radius:44% 56% 52% 48%/48% 44% 56% 52%;box-shadow:0 6px 0 rgba(22,35,107,.08);transition:transform .35s var(--pop)}
.step:nth-of-type(1) .num{background:#dff0ff}
.step:nth-of-type(2) .num{background:#fff1c9}
.step:nth-of-type(3) .num{background:#dcf7e8}
.step:nth-of-type(4) .num{background:#ffe3ee}
.step:hover .num{transform:rotate(-8deg) scale(1.08)}
.step .num::after{width:30px;height:30px;font-family:var(--font-d);font-size:15px}
.step:nth-of-type(2) .num::after{background:#f59e0b}
.step:nth-of-type(3) .num::after{background:var(--grass)}
.step:nth-of-type(4) .num::after{background:var(--grape)}
@media (max-width:860px){.bus{display:none}}

/* ---------- Stats → classroom chalkboard ---------- */
.stats{background:#fff;overflow:visible;padding:40px 0 70px}
.stats::before,.stats::after{display:none}
.stats .container{padding:56px 52px;border-radius:30px;border:14px solid #b8834f;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.06),transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.05),transparent 50%),#2f5446;box-shadow:inset 0 0 0 3px rgba(0,0,0,.18),inset 0 0 60px rgba(0,0,0,.35),0 24px 40px -20px rgba(0,0,0,.45)}
.stats .container::before{content:"";position:absolute;inset:0;background-image:var(--doodle-w);background-size:240px;border-radius:16px;pointer-events:none}
.stats .container::after{content:"";position:absolute;left:12%;right:12%;bottom:-34px;height:14px;border-radius:0 0 10px 10px;background:linear-gradient(#a8743f,#8a5a2c);box-shadow:inset 40px -4px 0 -34px #fff,inset 90px -4px 0 -84px #ffd6e3}
.stats h2{color:#fdfdf6}
.stats p{color:#d9e6dd}
.stat{background:transparent;border:2px dashed rgba(255,255,255,.3);border-radius:20px;transition:transform .3s var(--pop),background .2s}
.stat:hover{transform:rotate(-2deg) scale(1.04);background:rgba(255,255,255,.06)}
.stat b{font-family:var(--font-d);font-weight:600;color:#fdfdf6;font-size:42px}
.stat > span{color:#d9e6dd}
@media (max-width:960px){.stats .container{padding:36px 22px;border-width:10px}}

/* ---------- Offer cards ---------- */
.offer{border-radius:28px;border:0;box-shadow:0 6px 0 rgba(22,35,107,.06)}
.offer:nth-child(2){background:#eaf4ff}
.offer:nth-child(3){background:#fff0f0}
.offer:nth-child(4){background:#fff6dc}
.offer:nth-child(5){background:#e6f9ef}
.offer:nth-child(6){background:#f2ecff}
.offer:hover{transform:translateY(-6px) rotate(-.8deg);background-color:#fff}
.offer .ic{border-radius:18px;transition:transform .3s var(--pop)}
.offer:hover .ic{animation:wiggle .55s}
.offer.featured{background:linear-gradient(150deg,#ff5a5f 0%,#d71e26 100%);box-shadow:0 8px 0 #a8141b}
.offer.featured::after{content:"";position:absolute;inset:0;background-image:var(--doodle-w);background-size:200px;pointer-events:none}
.offer h3{font-size:21px}

/* ---------- Trust + notebook kit ---------- */
.trust{background:#fff6e6}
.trust-item{border-radius:20px;border:0;box-shadow:0 4px 0 #f3e2bd;transition:transform .3s var(--pop)}
.trust-item:hover{transform:translateX(6px)}
.trust-item:nth-child(1) .ic{background:#dff0ff}
.trust-item:nth-child(2) .ic{background:#dcf7e8;color:#0b8a63}
.trust-item:nth-child(3) .ic{background:#ffe3ee;color:#d6336c}
.kit{position:relative;border-radius:20px;padding:24px 24px 24px 56px;transform:rotate(1.2deg);transition:transform .4s var(--pop);
  background:repeating-linear-gradient(180deg,#fff 0 41px,#dbe7ff 41px 42px)}
.kit:hover{transform:rotate(0)}
.kit::before{content:"";position:absolute;left:42px;top:0;bottom:0;width:2px;background:#ffb3b3}
.kit::after{content:"";position:absolute;left:12px;top:22px;bottom:22px;width:16px;background:radial-gradient(circle,#f1e6cf 5px,#d9c9a6 6px,transparent 7px) 0 0/16px 38px repeat-y}
.kit-head{border-bottom:0}
.kit-line{border-bottom:0}
.kit-head .chip{transform:rotate(4deg);background:var(--sun);color:#5b3a00}

/* ---------- Publishers → bookshelf ---------- */
.shelf{position:relative;padding:0 0 4px}
.shelf .marquee{padding:20px 0 0}
.shelf::after{content:"";display:block;height:20px;margin:0 16px;border-radius:6px;background:linear-gradient(#c99260,#a06a37);box-shadow:0 14px 20px -12px rgba(80,40,0,.5)}
.marquee-track{align-items:flex-end;gap:5px;animation-duration:55s}
.spine{writing-mode:vertical-rl;transform:rotate(180deg);height:var(--h);width:var(--w);border-radius:7px 7px 3px 3px;color:#fff;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;padding:14px 0;white-space:nowrap;cursor:default;
  background:linear-gradient(transparent 16px,rgba(255,255,255,.35) 16px 20px,transparent 20px calc(100% - 20px),rgba(255,255,255,.35) calc(100% - 20px) calc(100% - 16px),transparent 0),var(--c);
  box-shadow:inset 6px 0 0 rgba(0,0,0,.14),inset -3px 0 0 rgba(255,255,255,.18);transition:transform .3s var(--pop)}
.spine:hover{transform:rotate(180deg) translateY(16px)}
.spine.lean{transform:rotate(186deg);margin:0 6px}

/* ---------- Branches ---------- */
.branch{border-radius:24px;border:2px solid var(--line);border-top:7px solid var(--c,var(--sky-b));transition:transform .3s var(--pop),box-shadow .2s}
.branch:hover{transform:translateY(-5px)}
.branch-grid .branch:nth-child(1){--c:var(--coral)}
.branch-grid .branch:nth-child(2){--c:var(--sun)}
.branch-grid .branch:nth-child(3){--c:var(--grass)}
.branch-grid .branch:nth-child(4){--c:var(--sky-b)}
.branch-grid .branch:nth-child(5){--c:var(--grape)}
.branch-grid .branch:nth-child(6){--c:var(--pink);border-style:dashed;border-top-style:solid}
.branch a.dir span,.branch:hover a.dir{animation:none}
.branch:hover .meta span:first-child{animation:wiggle .5s}

/* ---------- For schools CTA ---------- */
.cta{background:linear-gradient(120deg,#6d4ce6 0%,#2f80ed 100%);box-shadow:0 10px 0 #2c1f86}
.cta::before{content:"";position:absolute;inset:0;background-image:var(--doodle-w);background-size:220px;pointer-events:none}
.cta::after{border-color:rgba(255,255,255,.1)}
.cta > div:not(.balloons){position:relative;z-index:1}

/* ---------- FAQ ---------- */
.faq details{border-radius:20px;border:2px solid var(--line);transition:box-shadow .2s,border-color .2s}
.faq details[open]{border-color:var(--sky-b);box-shadow:0 5px 0 #cfe8ff}
.faq summary{font-weight:600;font-size:17px}
.faq summary::after{width:32px;height:32px;border-radius:50%;background:#fff1c9;display:grid;place-items:center;line-height:1;transition:transform .35s var(--pop),background .2s}
.faq details[open] summary::after{background:var(--sky-b);color:#fff}
.faq details[open] p{animation:slide-in .35s ease}
@keyframes slide-in{from{opacity:0;transform:translateY(-8px)}}
.support{border-radius:28px;background:#f2f8ff;border:2px dashed #b9dcff}
.issue-pills label{transition:transform .2s var(--pop),background .15s}
.issue-pills label:hover{transform:translateY(-2px)}
.issue-pills input:checked + label{animation:bump .4s var(--pop)}

/* ---------- Footer + FAB ---------- */
footer{margin-top:40px}
footer.wavy::before{top:-38px}
.fab{border-radius:999px;box-shadow:0 5px 0 #a8141b,0 14px 30px -10px rgba(227,38,45,.6);animation:nudge 7s 4s infinite}
@keyframes nudge{0%,88%,100%{transform:none}90%{transform:translateY(-8px) rotate(-6deg)}93%{transform:translateY(-8px) rotate(6deg)}96%{transform:translateY(0) rotate(-3deg)}}
.cart-item{border-radius:16px;border-width:2px;animation:slide-in .3s ease}
.drawer{border-radius:24px 0 0 24px}
.drawer-empty .mascot{width:110px;margin:0 auto 10px;display:block}
.toast{border-radius:999px;font-family:var(--font-d);font-weight:500}

/* ---------- Order-flow pages ---------- */
.page-top{position:relative;background:linear-gradient(180deg,#e6f3ff 0%,#fff6e6 100%)}
.page-top::before{content:"";position:absolute;inset:0;background-image:var(--doodle);background-size:240px;pointer-events:none}
.page-top > .container{position:relative}
.sbanner .crest{border-radius:26px;box-shadow:0 6px 0 rgba(0,0,0,.12);animation:arrive-pop .7s var(--pop) both}
@keyframes arrive-pop{from{transform:scale(.3) rotate(-20deg);opacity:0}}
.flow li.now .dot{animation:pulse-ring 1.8s infinite}
@keyframes pulse-ring{50%{box-shadow:0 0 0 8px rgba(22,35,107,0)}}
.info{border-radius:20px;border:0;box-shadow:0 4px 0 var(--line)}
.panel{border-radius:26px;border-width:2px}
.panel h2 .num{font-family:var(--font-d);background:var(--sky-b);width:30px;height:30px}

/* Class cards → colourful notebooks */
.cls{position:relative;border:0;padding:18px 16px 16px 36px;background:var(--bg,#e3f0ff);box-shadow:0 6px 0 var(--sh,#9cc8ff);border-radius:16px 22px 22px 16px}
.cls::before{content:"";position:absolute;left:10px;top:12px;bottom:12px;width:12px;background:radial-gradient(circle,#fff 3.5px,rgba(0,0,0,.18) 4.5px,transparent 5.5px) 0 0/12px 20px repeat-y}
.cls:hover{transform:translateY(-6px) rotate(-1.5deg);box-shadow:0 10px 0 var(--sh,#9cc8ff)}
.cls .n{font-weight:600}
.cls .meta{color:#4a5280}
.cls .price{color:var(--navy-2)}
.empty-state .mascot{width:130px;margin:0 auto 16px;display:block}

/* Kit page */
.item{border-radius:18px;border-width:2px;transition:background .15s,transform .25s var(--pop)}
.item:hover{transform:translateX(4px)}
.item .cover{transition:transform .3s var(--pop)}
.item:hover .cover{transform:rotate(-8deg) scale(1.05)}
.item input[type=checkbox]:checked{animation:bump .35s var(--pop)}
.qty{border-width:2px;border-radius:12px}
.tabs{border-radius:14px}
.seg label{border-width:2px}
.mascot-tip{display:flex;gap:12px;align-items:center;background:#fff6dc;border-radius:18px;padding:10px 14px 10px 8px;margin-bottom:14px}
.mascot-tip .mascot{width:58px;flex:none}
.mascot-tip p{font-family:var(--font-d);font-weight:500;color:var(--navy-2);font-size:15px;line-height:1.3}
.mascot-tip p.say{animation:slide-in .3s ease}
.summary{border-color:#ffe3a3}
.choice{border-radius:20px;border-width:2px;transition:border-color .15s,background .15s,transform .25s var(--pop)}
.choice:hover{transform:translateY(-2px)}
.done-card .mascot{width:150px;margin:0 auto 6px;display:block}
.done-card h1{font-weight:600}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media (max-width:960px){
  .hero-art{display:block;order:0;max-width:360px;margin-top:8px}
  .fc1{left:0}.fc2{right:0}.fc3{left:-2%}
}
@media (max-width:420px){.float-card{transform:scale(.82)}.fc3{display:none}}
.issue-pills{position:relative}
.issue-pills input{width:1px;height:1px;left:0;top:0}

/* =========================================================
   Kid refresh — nav icons, phone tab bar, page transitions,
   sparkles, rocket, night-sky footer, heading squiggles.
   ========================================================= */

/* Pages glide into each other (Chrome/Edge/Safari; others just load normally) */
@view-transition{navigation:auto}
header.site{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .2s ease-in both}
::view-transition-new(root){animation:vt-in .45s var(--pop) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(22px)}}
html.calm::view-transition-old(root),html.calm::view-transition-new(root){animation:none}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Security notice: shorter on phones */
.notice .short{display:none}
@media (max-width:600px){.notice .long{display:none}.notice .short{display:inline}.notice .container{padding:7px 0}}

/* Menu with little picture icons */
.menu a{display:inline-flex;align-items:center;gap:7px}
.menu .ni{display:inline-flex;width:22px;height:22px;flex:none;transition:transform .35s var(--pop)}
.menu .ni svg{width:100%;height:100%}
.menu a:hover .ni{transform:rotate(-12deg) scale(1.18)}
.menu a.active .ni{background:#fff;border-radius:8px;padding:2px;box-sizing:content-box;margin:-2px 0}
.menu .m-only{display:none}
@media (max-width:1080px){
  .menu a{display:flex;gap:12px;font-size:17px}
  .menu .ni{width:28px;height:28px}
  .menu .m-only{display:flex}
}

/* Empty cart: no subtotal or checkout button */
.drawer-foot[hidden]{display:none}
/* keep the footer's last row clear of the round help button */
@media (min-width:761px){.foot-bottom{padding-right:72px}}

/* Cart badge hides when empty and pops in on the first item */
.badge{transition:transform .35s var(--pop)}
.badge.zero{transform:scale(0);animation:none}

/* Need help? shrinks to a round button once you scroll (hover to read it) */
.fab span{display:inline-block;max-width:140px;overflow:hidden;white-space:nowrap;transition:max-width .35s var(--pop),opacity .2s}
.fab.mini{gap:0;padding:14px}
.fab.mini span{max-width:0;opacity:0}
.fab.mini:hover,.fab.mini:focus-visible{gap:10px;padding:14px 18px}
.fab.mini:hover span,.fab.mini:focus-visible span{max-width:140px;opacity:1}

/* Star sparkles on tap */
.spark{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;z-index:400;pointer-events:none;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:spark .65s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes spark{0%{transform:scale(.2)}45%{transform:translate(calc(var(--dx) * .75),calc(var(--dy) * .75)) scale(1.15) rotate(70deg)}100%{transform:translate(var(--dx),var(--dy)) scale(0) rotate(150deg)}}

/* Things that fly into the cart / school bag */
.flyer{position:fixed;left:0;top:0;z-index:350;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(22,35,107,.25))}
.flyer svg{width:100%;height:100%;display:block}

/* Rocket back-to-top */
.rocket-top{position:fixed;left:18px;bottom:20px;z-index:57;width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 5px 0 var(--line),var(--shadow);opacity:0;pointer-events:none;transform:translateY(120%) scale(.6);transition:transform .45s var(--pop),opacity .25s}
.rocket-top.show{opacity:1;pointer-events:auto;transform:none}
.rocket-top svg{width:36px;height:36px;overflow:visible}
.rocket-top .flame{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .2s}
.rocket-top:hover .flame,.rocket-top.launch .flame{transform:scaleY(1);animation:flicker .12s infinite alternate}
.rocket-top:hover svg{animation:rumble .2s infinite}
.rocket-top.launch{background:transparent;box-shadow:none}
.rocket-top.launch svg{animation:launch .9s cubic-bezier(.55,0,.8,.2) forwards}
@keyframes flicker{to{transform:scaleY(.65)}}
@keyframes rumble{50%{transform:translate(1px,-1px) rotate(2deg)}}
@keyframes launch{20%{transform:translateY(6px)}100%{transform:translateY(-115vh)}}

/* Night-sky footer: twinkling stars, a smiling moon, the odd shooting star and a book van */
footer .sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
footer .sky i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:.35;animation:twinkle-s 3.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes twinkle-s{50%{opacity:1;transform:scale(1.7)}}
footer .moon{position:absolute;right:5%;top:34px;width:58px;animation:floaty 6s ease-in-out infinite}
footer .shoot{position:absolute;top:50px;left:8%;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff);opacity:0;transform:rotate(18deg);animation:shoot 11s 2s linear infinite}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(18deg)}1.5%{opacity:1}9%{opacity:0;transform:translate(340px,110px) rotate(18deg)}100%{opacity:0;transform:translate(340px,110px) rotate(18deg)}}
footer > .container{position:relative}
.foot-bottom{position:relative}
.van-run{position:absolute;top:-34px;left:-60px;width:40px;height:40px;animation:van-run 18s linear infinite}
.van-run svg{width:100%;height:100%;animation:bumpy .4s ease-in-out infinite alternate}
@keyframes van-run{to{left:calc(100% + 60px)}}
@media (max-width:600px){footer .moon{width:44px;top:24px}}

/* Section headings get a rainbow squiggle that draws itself in */
.section-head h2::after{content:"";display:block;width:110px;height:14px;margin:12px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23ff6b6b'/%3E%3Cstop offset='.35' stop-color='%23ffc83d'/%3E%3Cstop offset='.7' stop-color='%233ccf7e'/%3E%3Cstop offset='1' stop-color='%234fb3ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 7q8.5-8 17 0t17 0 17 0 17 0 17 0 17 0' fill='none' stroke='url(%23g)' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;transform:scaleX(0);transition:transform .8s .3s var(--pop)}
.section-head.in h2::after,.section-head:not(.reveal) h2::after,.calm .section-head h2::after{transform:none}
.section-head[style*="text-align:left"] h2::after{margin-left:0;transform-origin:left}

/* A cloud drifts across every inner page header */
.page-top{overflow:hidden}
.page-top::after{content:"";position:absolute;top:22px;right:-170px;width:150px;height:56px;pointer-events:none;opacity:.95;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 56'%3E%3Cpath d='M30 52a22 22 0 0 1-2-44 30 30 0 0 1 56-2 22 22 0 0 1 36 12 18 18 0 0 1 2 34z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;animation:cloud-drift 46s linear infinite}
.page-top > .container{z-index:1}
@keyframes cloud-drift{to{transform:translateX(calc(-100vw - 360px))}}

/* Phone tab bar — big, thumb-friendly links like an app */
.tabbar{display:none}
@media (max-width:760px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:58;padding:8px 4px 7px;border-radius:24px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);box-shadow:0 12px 30px -8px rgba(22,35,107,.35),0 0 0 1px rgba(22,35,107,.07);view-transition-name:tabbar}
  .tb{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--font-d);font-weight:500;font-size:11.5px;color:var(--muted);background:none;border:0;padding:2px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tbi{display:grid;place-items:center;width:44px;height:32px;border-radius:12px;transition:transform .35s var(--pop),background .2s}
  .tbi svg{width:25px;height:25px}
  .tb.on{color:var(--navy-2)}
  .tb.on .tbi{background:#fff1c9;transform:translateY(-3px)}
  .tb:active .tbi{transform:scale(.86)}
  .tb-bag .tbi{width:56px;height:56px;margin-top:-30px;border-radius:50%;background:var(--sun);box-shadow:0 5px 0 #e0a800,0 0 0 5px #fff}
  .tb-bag .tbi svg{width:32px;height:32px}
  .tb-bag .badge{top:-32px;right:calc(50% - 34px)}
  body:not(.has-mbar) footer{padding-bottom:96px}
  body:not(.has-mbar) .fab{display:none}
  body:not(.has-mbar) .toast{bottom:104px}
  body:not(.has-mbar) .hdr-cart{display:none}
  body:not(.has-mbar) .rocket-top{left:auto;right:16px;bottom:calc(98px + env(safe-area-inset-bottom));width:48px;height:48px}
  body.has-mbar .tabbar{display:none}
}
@media (max-width:960px){body.has-mbar .rocket-top{bottom:88px}}

/* Home: colourful picture icons in the steps, offers and trust lists */
.step .num .art-ic,.offer .ic .art-ic,.trust-item .ic .art-ic{display:grid;place-items:center}
.step .num .art-ic svg{width:46px;height:46px}
.offer .ic .art-ic svg{width:34px;height:34px}
.trust-item .ic .art-ic svg{width:28px;height:28px}
.offer.featured .ic{background:#fff!important}
.step:hover .num .art-ic{animation:wiggle .55s}
.trust-item:hover .ic .art-ic{animation:wiggle .55s}