@font-face{font-family:"Bangers";src:url("../fonts/Bangers-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Fredoka";src:url("../fonts/Fredoka.ttf") format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Medium.ttf") format("truetype");font-weight:500;font-display:swap}

:root{
  --brown:#2a1408;--brown2:#4a2510;--chai:#e07a1f;--saffron:#f7b733;--cream:#fff4dc;--cream2:#ffe9bf;
  --mint:#1c9e78;--red:#d9432e;--pink:#ff5d8f;--ink:#2b1a10;--muted:#7a5a44;--white:#fff;
  --shadow:6px 6px 0 var(--saffron);--shadow-b:6px 6px 0 var(--brown);
  --radius:16px;--maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Poppins",system-ui,sans-serif;font-size:17px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--chai)}
a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
h1,h2,h3{margin:0 0 .4em;line-height:1.05;color:var(--brown)}
h1{font-family:"Bangers",cursive;font-weight:400;font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:.03em;text-shadow:3px 3px 0 var(--saffron)}
h2{font-family:"Bangers",cursive;font-weight:400;font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:.03em;text-shadow:2px 2px 0 var(--saffron)}
h3{font-family:"Fredoka",sans-serif;font-weight:700;font-size:1.25rem;color:var(--chai)}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.tagline{font-family:"Fredoka",sans-serif;font-weight:500;font-style:italic;font-size:1.15rem;color:var(--muted);margin-bottom:1.4em}
.rule{height:5px;background:repeating-linear-gradient(90deg,var(--chai) 0 14px,transparent 14px 24px);border-radius:3px;margin:1.2rem 0 2rem}
.small{font-size:.9rem;color:var(--muted)}
.mono{font-family:ui-monospace,"DejaVu Sans Mono",Menlo,monospace;word-break:break-all}

/* header */
.topbar{position:sticky;top:0;z-index:50;background:var(--brown);border-bottom:4px solid var(--saffron)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--saffron);font-family:"Bangers",cursive;font-size:1.7rem;letter-spacing:.04em;text-shadow:2px 2px 0 var(--chai)}
.brand img{width:44px;height:44px}
nav.main{display:flex;gap:6px}
nav.main a{font-family:"Fredoka",sans-serif;font-weight:600;color:var(--cream);text-decoration:none;padding:8px 12px;border-radius:999px;border:2px solid transparent}
nav.main a:hover{border-color:var(--saffron)}
nav.main a[aria-current="page"]{background:var(--saffron);color:var(--brown)}
.navtoggle{display:none;background:none;border:2px solid var(--saffron);color:var(--saffron);border-radius:10px;padding:6px 10px;font-family:"Fredoka",sans-serif;font-weight:700;cursor:pointer}
@media (max-width:820px){
  nav.main{display:none;position:absolute;left:0;right:0;top:70px;background:var(--brown);flex-direction:column;padding:12px 20px 18px;border-bottom:4px solid var(--saffron)}
  nav.main.open{display:flex}.navtoggle{display:block}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:"Fredoka",sans-serif;font-weight:700;font-size:1.05rem;text-decoration:none;padding:13px 22px;border-radius:999px;border:3px solid var(--brown);cursor:pointer;line-height:1;transition:transform .1s}
.btn:active{transform:translate(2px,2px)}
.btn.primary{background:var(--saffron);color:var(--brown);box-shadow:4px 4px 0 var(--brown)}
.btn.dark{background:var(--brown);color:var(--saffron);box-shadow:4px 4px 0 var(--chai)}
.btn.ghost{background:var(--white);color:var(--brown);box-shadow:4px 4px 0 var(--saffron)}
.btn.soon{background:var(--cream2);color:var(--muted);border-style:dashed;box-shadow:none;cursor:not-allowed}
.btn.soon .pill{background:var(--pink);color:#fff;font-size:.7rem;padding:3px 8px;border-radius:999px;letter-spacing:.06em}

/* badges */
.badge{display:inline-block;font-family:"Fredoka",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;transform:rotate(-1.5deg);vertical-align:middle;margin-left:6px}
.badge.fact{background:var(--mint);color:#fff}.badge.plan{background:var(--brown);color:var(--saffron)}.badge.prop{background:var(--pink);color:#fff}.badge.tbc{background:var(--saffron);color:var(--brown)}
.sticker{display:inline-block;font-family:"Bangers",cursive;font-size:1.1rem;background:var(--saffron);color:var(--brown);padding:6px 16px;border:3px solid var(--brown);border-radius:999px;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--brown);letter-spacing:.05em}
.sticker.pink{background:var(--pink);color:#fff}

/* hero */
.hero{background:radial-gradient(circle at 50% 30%,#6b3a12 0%,var(--brown) 55%,#1a0c04 100%);color:var(--cream);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(247,183,51,.06) 0 18px,transparent 18px 36px);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:60px;padding-bottom:70px}
.hero h1{color:var(--saffron);text-shadow:4px 4px 0 var(--chai),8px 8px 0 #000;font-size:clamp(3.4rem,8vw,6.4rem)}
.hero .lead{font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.4rem;color:var(--cream);margin:.2em 0 1em}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{background:var(--white);border:2px solid var(--brown);border-radius:999px;padding:5px 14px;font-family:"Fredoka",sans-serif;font-weight:600;font-size:.92rem;color:var(--brown2)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero .art{position:relative;text-align:center}
.hero .art img{width:min(420px,80%);margin:0 auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.speech{position:absolute;top:0;right:0;background:var(--white);color:var(--brown);border:3px solid var(--brown);border-radius:18px;padding:10px 16px;font-family:"Fredoka",sans-serif;font-weight:700;transform:rotate(4deg);box-shadow:4px 4px 0 var(--saffron)}
.speech:after{content:"";position:absolute;left:22px;bottom:-16px;border:8px solid transparent;border-top-color:var(--brown)}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr;text-align:center;padding-top:36px}.hero .chips,.hero .ctas{justify-content:center}.hero .art{order:-1}.hero .art img{width:min(260px,70%)}.speech{right:5%}}

/* contract strip */
.contract{background:var(--saffron);border-top:4px solid var(--brown);border-bottom:4px solid var(--brown)}
.contract .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 20px}
.contract .lbl{font-family:"Fredoka",sans-serif;font-weight:700;color:var(--brown)}
.contract code{background:var(--white);border:2px solid var(--brown);border-radius:10px;padding:8px 12px;font-size:.92rem;color:var(--brown);flex:1;min-width:0}
.contract button{font-family:"Fredoka",sans-serif;font-weight:700;background:var(--brown);color:var(--saffron);border:0;border-radius:999px;padding:9px 16px;cursor:pointer}
.contract .note{width:100%;font-size:.85rem;color:var(--brown2);margin:0}

/* sections */
section.block{padding:64px 0}
section.block.alt{background:var(--white);border-top:4px dashed var(--saffron);border-bottom:4px dashed var(--saffron)}
section.block.dark{background:var(--brown);color:var(--cream)}
section.block.dark h2{color:var(--saffron);text-shadow:2px 2px 0 var(--chai)}
section.block.dark h3{color:var(--saffron)}
section.block.dark .tagline{color:#e8c79a}
.grid{display:grid;gap:22px}
.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid.c4{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:1fr}}
@media (max-width:600px){.grid.c2,.grid.c4{grid-template-columns:1fr}}
.card{background:var(--white);color:var(--ink);border:3px solid var(--brown);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.callout{color:var(--ink)}
section.block.dark .card h3{color:var(--chai)}
.card.brown{background:var(--brown2);color:var(--cream);border-color:var(--saffron)}
.card.brown h3{color:var(--saffron)}
.stat{background:var(--brown);color:var(--cream);border:3px solid var(--saffron);border-radius:var(--radius);padding:20px 12px;text-align:center}
.stat .v{font-family:"Bangers",cursive;font-size:2.6rem;color:var(--saffron);line-height:1}
.stat .l{font-family:"Fredoka",sans-serif;font-weight:600;font-size:.85rem;color:#f2d9a8;margin-top:6px}
.callout{background:var(--white);border:3px solid var(--brown);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);margin:24px 0}
.callout.warn{border-color:var(--red);box-shadow:6px 6px 0 var(--red)}
.callout h3{margin-bottom:.3em}
.quote{font-family:"Bangers",cursive;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;color:var(--brown);border-left:8px solid var(--saffron);padding-left:20px;margin:28px 0;letter-spacing:.03em}
section.dark .quote{color:var(--saffron);border-color:var(--chai)}
ul.list{list-style:none;padding:0;margin:0 0 1em}
ul.list li{position:relative;padding-left:32px;margin-bottom:10px}
ul.list li:before{content:"☕";position:absolute;left:0;top:0}
ul.list.tick li:before{content:"✔";color:var(--mint);font-weight:700}
ul.list.no li:before{content:"✖";color:var(--red);font-weight:700}

/* tables */
.tbl{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0 24px;background:var(--white);border:3px solid var(--brown);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.tbl th{font-family:"Fredoka",sans-serif;font-weight:700;text-align:left;background:var(--brown);color:var(--saffron);padding:12px 16px}
.tbl td{padding:12px 16px;border-top:2px dashed var(--saffron);vertical-align:top}
.tbl td:first-child{font-weight:500;color:var(--brown2);width:32%}
.tblwrap{overflow-x:auto}
@media (max-width:600px){.tbl td:first-child{width:40%}}

/* steps */
.steps{display:grid;gap:18px}
.step{display:flex;gap:16px;align-items:flex-start}
.step .n{flex:0 0 52px;height:52px;border-radius:50%;background:var(--chai);color:#fff;font-family:"Bangers",cursive;font-size:1.7rem;display:flex;align-items:center;justify-content:center;border:3px solid var(--brown);box-shadow:3px 3px 0 var(--saffron)}
.step .b{flex:1;background:var(--white);border:3px solid var(--brown);border-radius:14px;padding:14px 18px}
.step .b strong{display:block;font-family:"Fredoka",sans-serif;font-weight:700;color:var(--brown2);margin-bottom:4px}

/* timeline */
.timeline{position:relative;padding-left:40px}
.timeline:before{content:"";position:absolute;left:14px;top:10px;bottom:10px;width:4px;background:repeating-linear-gradient(180deg,var(--chai) 0 10px,transparent 10px 18px)}
.tl{position:relative;background:var(--white);border:3px solid var(--brown);border-radius:var(--radius);padding:18px 22px;margin-bottom:22px;box-shadow:var(--shadow)}
.tl:before{content:"";position:absolute;left:-36px;top:20px;width:20px;height:20px;border-radius:50%;background:var(--saffron);border:3px solid var(--brown)}
.tl.done:before{background:var(--mint)}
.tl .when{font-family:"Fredoka",sans-serif;font-weight:600;font-size:.9rem;color:var(--muted)}
.tl .ph{font-family:"Bangers",cursive;font-size:1.6rem;color:var(--chai);letter-spacing:.04em}

/* donut + legend */
.donutwrap{display:grid;grid-template-columns:320px 1fr;gap:32px;align-items:center}
@media (max-width:700px){.donutwrap{grid-template-columns:1fr}.donutwrap svg{margin:0 auto}}
.legend div{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.legend i{width:20px;height:20px;border-radius:6px;border:2px solid var(--brown);flex:0 0 20px}
.legend b{font-family:"Fredoka",sans-serif}

/* faq */
details{background:var(--white);border:3px solid var(--brown);border-radius:14px;margin-bottom:14px;box-shadow:4px 4px 0 var(--saffron)}
summary{cursor:pointer;padding:16px 20px;font-family:"Fredoka",sans-serif;font-weight:700;color:var(--brown2);list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-family:"Bangers",cursive;font-size:1.5rem;color:var(--chai)}
details[open] summary:after{content:"–"}
details .a{padding:0 20px 18px;border-top:2px dashed var(--saffron);padding-top:14px}

/* page hero (inner pages) */
.pagehead{background:var(--brown);color:var(--cream);padding:52px 0 40px;border-bottom:4px solid var(--saffron)}
.pagehead h1{color:var(--saffron);text-shadow:3px 3px 0 var(--chai)}
.pagehead .tagline{color:#e8c79a;margin:0}

/* footer */
footer{background:var(--brown);color:#d9b98a;border-top:4px solid var(--saffron);padding:44px 0 30px;font-size:.92rem}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
@media (max-width:700px){footer .wrap{grid-template-columns:1fr}}
footer h4{font-family:"Fredoka",sans-serif;color:var(--saffron);margin:0 0 10px;font-size:1rem}
footer a{color:var(--cream);text-decoration:none}footer a:hover{text-decoration:underline}
footer ul{list-style:none;padding:0;margin:0}footer li{margin-bottom:6px}
footer .legal{grid-column:1/-1;border-top:2px dashed var(--saffron);padding-top:18px;font-size:.82rem;line-height:1.5}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--brown);color:var(--saffron);border:3px solid var(--saffron);border-radius:999px;padding:10px 20px;font-family:"Fredoka",sans-serif;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
.hero .sticker{margin-bottom:14px}
@media (max-width:700px){.contract code{flex-basis:100%;font-size:.78rem}.contract .lbl{flex:1}}

/* join the list */
.join{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;background:var(--white);border:3px solid var(--brown);border-radius:var(--radius);padding:30px 32px;box-shadow:var(--shadow);position:relative}
.join .sticker{position:absolute;top:-18px;left:24px}
.join h2{margin-top:6px}
.join .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 10px}
.join .perks{background:var(--cream2);border:3px dashed var(--chai);border-radius:var(--radius);padding:18px 20px}
.join .perks h3{margin-bottom:.5em}
.join .perks ul{margin:0;padding-left:0;list-style:none}
.join .perks li{padding-left:28px;position:relative;margin-bottom:8px}
.join .perks li::before{content:"\2615";position:absolute;left:0;top:0}
@media (max-width:820px){.join{grid-template-columns:1fr;padding:30px 20px}.join .sticker{left:16px}}