:root{--cream:#FFF6DC;--ink:#111;--y:#FFD43B;--pink:#FF8FB8;--mint:#7FE0B5;--blue:#7CB8FF;--b:3px solid var(--ink);--sh:5px 5px 0 var(--ink)}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Space Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.55}
h1,h2,h3{font-family:"Archivo Black",Impact,sans-serif;font-weight:400;line-height:1.1;margin:0 0 .5em}
a{color:var(--ink);font-weight:700}
a:focus-visible,.btn:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--y);border:var(--b);padding:8px;z-index:9}
header.top{border-bottom:var(--b);background:#fff}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Archivo Black";font-size:1.15rem}
.brand img{width:40px;height:40px;border:var(--b);border-radius:10px}
nav a{margin-left:16px;text-decoration:none}nav a:hover{text-decoration:underline}
.card{background:#fff;border:var(--b);border-radius:14px;box-shadow:var(--sh);padding:24px}
.btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:700;font-size:1.05rem;padding:14px 22px;border:var(--b);border-radius:12px;background:var(--y);box-shadow:var(--sh);text-decoration:none;color:var(--ink);transition:transform .08s,box-shadow .08s;cursor:pointer}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn.soon{background:#e9e4d4;cursor:not-allowed}
.btn.soon:hover{transform:none;box-shadow:var(--sh)}
.btn.soon:active{transform:translate(5px,5px);box-shadow:0 0 0}
.tag{display:inline-block;background:var(--pink);border:var(--b);border-radius:999px;padding:3px 12px;font-weight:700;font-size:.85rem}
.hero{padding:48px 0 56px}
.hero .wrap{display:grid;gap:36px;align-items:center}
.hero h1{font-size:clamp(2.4rem,9vw,4.4rem)}
.hero h1 span{background:var(--y);border:var(--b);padding:0 10px;display:inline-block;transform:rotate(-1.5deg);box-shadow:var(--sh)}
.hero .pitch{font-size:1.25rem;max-width:34ch}
.hero .icon{width:120px;height:120px;border:var(--b);border-radius:26px;box-shadow:var(--sh)}
.hero .graphic{width:100%;border:var(--b);border-radius:14px;box-shadow:8px 8px 0 var(--ink);display:block}
.note{font-size:.9rem;margin-top:12px}
section{padding:48px 0;border-top:var(--b)}
section h2{font-size:clamp(1.8rem,6vw,2.6rem)}
.steps{display:grid;gap:22px;list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{position:relative;padding-top:40px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:18px;width:48px;height:48px;display:grid;place-items:center;background:var(--ink);color:var(--y);font-family:"Archivo Black";font-size:1.4rem;border-radius:50%}
.grid{display:grid;gap:22px}
.card ul{padding-left:20px;margin:0}.card li{margin:.35em 0}
.y{background:var(--y)}.p{background:var(--pink)}.m{background:var(--mint)}.bl{background:var(--blue)}
.battery{display:grid;gap:20px;align-items:center}
.battery .big{font-size:4rem;line-height:1}
footer{border-top:var(--b);background:var(--ink);color:var(--cream);padding:32px 0}
footer a{color:var(--y)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between}
.doc{padding:36px 0 56px}
.doc main{max-width:780px;margin:0 auto}
.doc h1{font-size:clamp(1.8rem,6vw,2.6rem)}
.doc h2{font-size:1.2rem;background:var(--y);display:inline-block;padding:4px 10px;border:var(--b);box-shadow:3px 3px 0 var(--ink);margin-top:1.6em}
.doc .muted{color:#3a3a3a}.doc code{background:#f3eee0;padding:1px 5px;border:1px solid #111;border-radius:4px}
.doc li{margin:.4em 0}
@media(min-width:800px){
 .hero .wrap{grid-template-columns:1.05fr 1fr}
 .steps{grid-template-columns:repeat(3,1fr)}
 .grid{grid-template-columns:repeat(2,1fr)}
 .battery{grid-template-columns:auto 1fr}
}
nav{white-space:nowrap;font-size:.95rem}@media(max-width:420px){nav a{margin-left:10px}.brand{font-size:1rem}.brand img{width:34px;height:34px}}