@font-face{font-family:LunchBox;src:url('/assets/lunchbox.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--ink:#223c49;--purple:#256c9a;--blue:#256c9a;--yellow:#f5cc4e;--red:#fe4040;--pink:#fe639c;--green:#3cbf97;--lime:#d8d355;--paper:#fffdf6;--lilac:#e2f4ed;--line:#d8e2de;--muted:#52646c}
h1,h2,h3{font-family:LunchBox,'Nunito Sans',sans-serif;font-weight:400!important;letter-spacing:.01em}
h2{font-size:clamp(44px,5vw,70px);line-height:1.05}
h3{font-size:36px}
.brand-lettering{display:block;width:178px;height:auto;aspect-ratio:1446/472;mix-blend-mode:multiply}
footer .brand-lettering{width:140px}
.header{padding-top:16px;padding-bottom:16px}
.hero h1{font-size:clamp(64px,6.7vw,98px);line-height:1.02;letter-spacing:.005em}
.underline:after{border-color:var(--pink);height:11px;bottom:-6px}
.hero-scribble{stroke:var(--green)}
.paper-note{background:#fde0eb;box-shadow:2px 4px 0 #256c9a12}
.paper-note span,.art-star,.story-star{color:var(--red)}
.ticker{background:var(--green);color:var(--ink);font-family:LunchBox,sans-serif;font-weight:400;font-size:28px;letter-spacing:.09em;padding:13px 0}
.ticker i:nth-of-type(3n+1){color:var(--yellow)}
.ticker i:nth-of-type(3n+2){color:#fffdf6}
.ticker i:nth-of-type(3n){color:#223c49}
.button:hover{background:#1b587e}
.step-number{border-color:#c5a340}
.steps h3{font-size:31px;letter-spacing:.01em}
.story-copy h2 em{color:var(--blue)}
.faq{background:#fff0f5}
.faq-list details,.faq-list details:last-child{border-color:#ebc8d5}
.final-cta h2{font-size:clamp(48px,5.5vw,78px)}
dialog h2{font-size:49px;line-height:1.05}
.dropzone{background:#edf7f1;border-color:#79a998}
.dropzone.dragging{background:#d4eee1;border-color:var(--blue)}
.dialog-close{background:#fde0eb}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,.dropzone:focus-within{outline-color:var(--blue)}
input:not([type=checkbox],[type=file]),select{border-color:#b9cdc4}
.order-button{border-color:#b9cdc4}
.mascot{position:fixed;left:max(10px,env(safe-area-inset-left));bottom:max(9px,env(safe-area-inset-bottom));width:104px;height:130px;z-index:8;pointer-events:none;user-select:none;--left-step:0deg;--right-step:0deg;--step-lift:0px;--body-bob:0px;--body-tilt:0deg}
.mascot-hop{position:absolute;inset:0;transform-origin:50% 92%}
.mascot-body{position:absolute;width:100%;height:auto;bottom:20px;left:0;transform:translateY(var(--body-bob)) rotate(var(--body-tilt));transform-origin:50% 90%;filter:drop-shadow(0 1px 1px #ffffffd9);transition:transform .12s ease-out}
.mascot-foot{position:absolute;width:27px;height:33px;bottom:3px;transform-origin:50% 10%;transition:transform .12s ease-out}
.mascot-foot-left{left:20px;transform:translateY(var(--step-lift)) rotate(var(--left-step))}
.mascot-foot-right{left:58px;transform:translateY(calc(-1 * var(--step-lift))) rotate(var(--right-step))}
.mascot-shadow{position:absolute;width:70px;height:7px;border-radius:50%;background:#223c4926;bottom:0;left:17px;transition:transform .2s,opacity .2s}
.mascot.is-celebrating .mascot-shadow{transform:scale(.65);opacity:.45}
.mascot-spark{position:absolute;opacity:0;transform:scale(.4);font-size:23px;line-height:1;color:var(--pink)}
.mascot-spark-one{left:-5px;top:17px;color:var(--yellow)}
.mascot-spark-two{right:-9px;top:4px;color:var(--blue)}
.mascot-spark-three{right:-10px;top:46px}
.mascot.is-celebrating .mascot-spark{animation:mascot-spark .95s ease-out both}
.mascot.is-celebrating .mascot-foot-left{transform:rotate(25deg)}
.mascot.is-celebrating .mascot-foot-right{transform:rotate(-25deg)}
.mascot-dialog{display:none;z-index:1}
body.has-order-open>.mascot{visibility:hidden}
#order-dialog[open] .mascot-dialog{display:block}
@keyframes mascot-spark{0%,100%{opacity:0;transform:translateY(0) scale(.4)}25%,65%{opacity:1;transform:translateY(-10px) scale(1)}}
@media(max-width:1000px){.hero h1{font-size:70px}.product-title h3{font-size:33px}.hero{min-height:650px}}
@media(max-width:700px){.brand-lettering{width:137px}.header{padding:13px 5%}.hero h1{font-size:clamp(61px,15.7vw,89px)}.hero{gap:36px}.hero .intro{margin-top:26px}.ticker{font-size:23px;padding:9px 0}.section h2,.how h2,.faq h2{font-size:46px}.story-copy h2{font-size:56px}.product-title h3{font-size:40px}.steps h3{font-size:32px}.final-cta h2{font-size:51px}dialog h2{font-size:44px}.mascot{width:65px;height:82px;left:max(6px,env(safe-area-inset-left));bottom:max(7px,env(safe-area-inset-bottom))}.mascot-body{bottom:13px}.mascot-foot{width:17px;height:21px;bottom:2px}.mascot-foot-left{left:12px}.mascot-foot-right{left:36px}.mascot-shadow{width:44px;height:5px;left:10px}.mascot-spark{font-size:17px}.mascot-spark-one{top:9px}.mascot-spark-two{right:-6px;top:0}.mascot-spark-three{right:-6px;top:27px}footer{padding-bottom:95px}}
@media(prefers-reduced-motion:reduce){.mascot *, .mascot *::before,.mascot *::after{animation:none!important;transition:none!important}.mascot.is-celebrating .mascot-spark{opacity:1;transform:none}.mascot.is-celebrating .mascot-foot{transform:none}}
@media(max-width:700px){.mascot-dialog:not(.is-celebrating){visibility:hidden}}
