:root{--ink:#17120d;--paper:#fff8e6;--yellow:#ffd400;--red:#e5322d;--mint:#4fd1a5;--pink:#ff8fb8;--blue:#3a6df0;--sky:#9ad8ff;--r:18px;--sh:5px 5px 0 var(--ink);--f:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:500 17px/1.55 var(--f);color:var(--ink);background:var(--paper) radial-gradient(#17120d1f 1px,transparent 1.5px) 0 0/22px 22px;overflow-x:hidden}
img,svg{max-width:100%}
h1,h2,h3{font-weight:900;letter-spacing:-.03em;line-height:1.03;margin:0}
h1{font-size:clamp(2.4rem,5.2vw,4.5rem)}h2{font-size:clamp(1.9rem,4.2vw,3.2rem);max-width:21ch;text-wrap:balance}h3{font-size:1.35rem}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}.narrow{max-width:820px}
section{padding:88px 0}.hero{padding:44px 0 72px}
.skip{position:absolute;left:-999px;background:var(--yellow);padding:8px 14px;border:3px solid var(--ink);z-index:99}.skip:focus{left:12px;top:12px}
.hl{background:linear-gradient(transparent 58%,var(--yellow) 58% 94%,transparent 94%);padding:0 .08em}
.kicker{font:900 .85rem var(--f);letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.sub{max-width:62ch;margin:18px 0 0;font-size:1.1rem}.fine{font-size:.86rem;opacity:.75;margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:900 1rem var(--f);padding:.8em 1.35em;border:3px solid var(--ink);border-radius:999px;background:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.red{background:var(--red);color:#fff}.btn.alt{background:#fff}.btn.sm{padding:.5em 1em;font-size:.92rem}.btn[disabled]{opacity:.45;pointer-events:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.nav{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:4px solid var(--ink)}
.bar{display:flex;align-items:center;gap:22px;padding-block:10px}.bar nav{display:flex;gap:22px;margin-left:auto}.bar nav a{font-weight:800;color:var(--ink);text-decoration:none}.bar nav a:hover{text-decoration:underline wavy var(--red)}
.brand{display:flex;align-items:center;gap:10px;font:900 1.7rem var(--f);letter-spacing:-.04em;color:var(--ink);text-decoration:none}.brand b{color:var(--red)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:.3em .9em;font-weight:800;font-size:.9rem;margin-bottom:22px;box-shadow:3px 3px 0 var(--ink)}
.dot{width:11px;height:11px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 #4fd1a5aa;animation:ping 1.6s infinite}@keyframes ping{to{box-shadow:0 0 0 10px #4fd1a500}}
.lead{font-size:1.25rem;margin:22px 0 28px;max-width:52ch}
.cta{display:flex;flex-wrap:wrap;gap:16px}.trust{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:30px 0 0;font-weight:800;font-size:.92rem}.trust li::before{content:"✓ ";color:var(--red)}
.art{position:relative;border:4px solid var(--ink);border-radius:34px;box-shadow:10px 10px 0 var(--ink);background:#a8dcff;transform:rotate(1.2deg)}.art img{display:block;width:100%;height:auto;border-radius:30px}
.sticker{position:absolute;top:-22px;left:-18px;background:var(--yellow);border:4px solid var(--ink);border-radius:20px;padding:8px 16px;transform:rotate(-7deg);box-shadow:4px 4px 0 var(--ink);text-align:center;line-height:1}.sticker small{display:block;font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.sticker b{font:900 2.2rem var(--f);font-variant-numeric:tabular-nums}
.say{position:absolute;left:28px;bottom:-24px;max-width:240px;background:#fff;border:3px solid var(--ink);border-radius:4px 18px 18px 18px;padding:8px 14px;font:800 .95rem var(--f);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.say:hover{background:var(--yellow)}
.marq{background:var(--ink);color:var(--yellow);border-block:4px solid var(--ink);overflow:hidden;white-space:nowrap;font:900 1.15rem var(--f);text-transform:uppercase;letter-spacing:.03em}
.marq .track{display:inline-flex}.js .marq .track{animation:marq 38s linear infinite}.marq:hover .track{animation-play-state:paused}.marq span{padding:.75em 1.1em}.marq span::after{content:"✦";margin-left:2.2em;color:var(--pink)}
@keyframes marq{to{transform:translateX(-50%)}}
.card{background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:24px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.how .card:nth-child(odd){transform:rotate(-.8deg)}.how .card:nth-child(even){transform:rotate(.8deg)}.how h3{margin:12px 0 8px}
.num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;border:3px solid var(--ink);font:900 1.3rem var(--f)}
.blue{background:#cfe8ff;border-block:4px solid var(--ink)}
.svc{position:relative;display:flex;flex-direction:column;gap:8px}.svc:hover{transform:translate(-2px,-3px) rotate(-.5deg)}.svc{transition:transform .15s}
.ico{width:88px;height:88px;background:var(--c,#ffe27a);border:3px solid var(--ink);border-radius:20px;padding:6px;margin-bottom:6px}
.tag{margin-top:auto;align-self:flex-start;background:var(--ink);color:var(--yellow);font:900 .9rem var(--f);padding:.25em .8em;border-radius:999px}
#order{background:var(--yellow);border-block:4px solid var(--ink)}
.shop{display:grid;grid-template-columns:1fr 330px;gap:30px;margin-top:40px;align-items:start}
.panel{background:#fff;border:4px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--ink);padding:26px}.panel h3{font-size:1.7rem;margin-bottom:18px}.panel section{padding:0}
.steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 24px;counter-reset:s}.steps li{flex:1;counter-increment:s;font-weight:800;font-size:.84rem;text-align:center;padding:.4em .2em;border-radius:999px;border:3px solid var(--ink);background:#f1ecdd;opacity:.6}.steps li::before{content:counter(s) " · "}.steps li.on{background:var(--ink);color:var(--yellow);opacity:1}.steps li.ok{background:var(--mint);opacity:1}
.picker{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pick{position:relative;display:block}.pick input{position:absolute;opacity:0;inset:0}.pick .pc{display:flex;flex-direction:column;gap:4px;height:100%;padding:12px;border:3px solid var(--ink);border-radius:16px;background:#fff;cursor:pointer;transition:transform .12s,box-shadow .12s}
.pick .pc svg{width:60px;height:60px}.pick .pc b{font-weight:900;line-height:1.1}.pick .pc small{font-weight:700;opacity:.7}
.pick input:checked+.pc{background:var(--yellow);box-shadow:var(--sh);transform:translate(-2px,-2px)}.pick input:focus-visible+.pc{outline:3px solid var(--blue);outline-offset:3px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.fld{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:.92rem}.fld small{font-weight:600;opacity:.7}
select,input:not([type=checkbox],[type=radio]){font:600 1rem var(--f);padding:.65em .8em;border:3px solid var(--ink);border-radius:12px;background:#fffdf3;color:var(--ink);width:100%}
fieldset{border:0;padding:0;margin:0 0 18px}legend{font-weight:800;font-size:.92rem;margin-bottom:8px;padding:0}legend small{font-weight:600;opacity:.7}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{position:relative}.chip input{position:absolute;opacity:0;inset:0}.chip span{display:block;min-width:48px;text-align:center;padding:.45em .9em;border:3px solid var(--ink);border-radius:999px;font-weight:900;cursor:pointer;background:#fff}
.chip input:checked+span{background:var(--ink);color:var(--yellow)}.chip input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}
.stp{display:flex;align-items:center;gap:10px}.stp button{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);background:var(--yellow);font:900 1.4rem var(--f);cursor:pointer;box-shadow:2px 2px 0 var(--ink)}.stp output{min-width:2ch;text-align:center;font:900 1.5rem var(--f)}
.checks{display:grid;gap:10px;margin-bottom:18px}.checks label{display:flex;gap:10px;align-items:flex-start;font-weight:800}.checks input{width:22px;height:22px;accent-color:var(--red);flex:none;margin-top:2px}.checks small{font-weight:600;opacity:.7}
.nav2{display:flex;justify-content:space-between;margin-top:26px;gap:12px}
.sum{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px}.sum dt{font-weight:800;opacity:.7}.sum dd{margin:0;font-weight:800}
.receipt{position:sticky;top:96px;background:#fffef6;border:3px solid var(--ink);border-radius:6px;padding:22px 20px 26px;font:600 .95rem/1.5 ui-monospace,Menlo,Consolas,monospace;box-shadow:6px 6px 0 var(--ink);transform:rotate(.8deg)}
.receipt h3{font:900 1.3rem var(--f);text-align:center;padding-bottom:10px;border-bottom:3px dashed var(--ink);margin-bottom:12px}.receipt ul{list-style:none;padding:0;margin:0}.receipt li,.ex li{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.tot{display:flex;justify-content:space-between;align-items:baseline;border-top:3px dashed var(--ink);margin-top:12px;padding-top:10px;font-weight:900}.tot b{font:900 2rem var(--f);font-variant-numeric:tabular-nums}
.etaLine{margin-top:8px;font-size:.85rem}.stamp{display:none;width:max-content;margin:14px auto 0;transform:rotate(-6deg);border:4px solid var(--red);color:var(--red);font:900 1.5rem var(--f);padding:2px 14px;border-radius:8px;text-align:center;line-height:1.1}.stamp small{display:block;font-size:.7rem}.receipt.paid .stamp{display:block}
.track-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.mapbox{align-self:start;position:relative;border:3px solid var(--ink);border-radius:16px;overflow:hidden}.mapbox svg{display:block;width:100%}
.eta{position:absolute;right:10px;top:10px;background:var(--ink);color:var(--yellow);border-radius:12px;padding:4px 12px;text-align:center;line-height:1.1}.eta small{display:block;font-size:.65rem;letter-spacing:.12em}.eta b{font:900 1.5rem var(--f);font-variant-numeric:tabular-nums}
.who{font-weight:800;margin-bottom:12px}.tl{list-style:none;padding:0;margin:0;border-left:4px solid var(--ink);margin-left:8px}.tl li{position:relative;padding:0 0 14px 22px;animation:in .4s both}.tl li::before{content:"";position:absolute;left:-11px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--mint);border:3px solid var(--ink)}.tl li:last-child::before{background:var(--yellow)}.tl b{display:block}.tl span{font-size:.92rem;opacity:.8}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.done{margin-top:18px;background:var(--mint);border:3px solid var(--ink);border-radius:14px;padding:14px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.dark{background:var(--ink);color:var(--paper)}.dark .card{color:var(--ink)}.dark .kicker{color:var(--yellow)}
.ex .card{display:flex;flex-direction:column;gap:8px;box-shadow:5px 5px 0 var(--yellow)}.ex .ico{width:64px;height:64px}.ex ul{list-style:none;padding:0;margin:6px 0 0;font-size:.95rem}.ex .tot{margin-top:6px}.ex .btn{margin-top:auto;align-self:flex-start}.ex p:not(.tot){opacity:.75;font-size:.95rem}
.plus{margin-top:40px;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:var(--r);padding:18px 22px;transform:rotate(-.6deg);font-size:1.05rem}
.mint{background:var(--mint);border-block:4px solid var(--ink)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}.stats div{background:var(--ink);color:#fff;border-radius:var(--r);padding:20px;border:3px solid var(--ink);box-shadow:var(--sh)}.stats b{display:block;font:900 clamp(2rem,4vw,3rem) var(--f);color:var(--yellow);font-variant-numeric:tabular-nums;line-height:1}.stats span{font-weight:700}
.quotes{margin-top:34px}blockquote{margin:0;font-weight:800;font-size:1.12rem}cite{display:block;margin-top:14px;font:700 .88rem var(--f);opacity:.7}
details{background:#fff;border:3px solid var(--ink);border-radius:14px;margin-top:14px;box-shadow:3px 3px 0 var(--ink)}summary{cursor:pointer;font-weight:900;font-size:1.1rem;padding:16px 20px;list-style:none;display:flex;justify-content:space-between}summary::after{content:"+";font-size:1.5rem;line-height:1}details[open] summary::after{content:"−"}details p{padding:0 20px 18px}
.finale{background:var(--red);color:#fff;text-align:center;border-top:4px solid var(--ink)}.finale h2{margin:0 auto 28px;max-width:18ch}.finale p{margin-top:24px;font-weight:700}
footer{background:var(--ink);color:#e9e3d2;padding:40px 0}.foot{display:flex;gap:28px;align-items:flex-start}.foot p{font-size:.88rem;max-width:80ch}footer .brand{color:var(--yellow);flex:none}
.confetti{position:fixed;top:-12px;width:10px;height:14px;z-index:50;animation:fall 1.8s ease-in forwards;pointer-events:none}@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
@media (max-width:980px){.hero-grid,.shop{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}.receipt{position:static}.stats{grid-template-columns:1fr 1fr}.art{max-width:620px;margin:0 auto}}
@media (max-width:680px){section{padding:60px 0}.bar nav{display:none}.bar .btn{margin-left:auto}.grid3,.row,.track-grid{grid-template-columns:1fr}.picker{grid-template-columns:1fr 1fr}.foot{flex-direction:column}.panel{padding:18px}.steps li::before{content:""}.sticker{left:-6px}.say{bottom:-20px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
