@font-face{font-family:Anton;src:url(/fonts/anton.woff2) format("woff2");font-display:swap}
:root{--milk:#fff8ec;--cream:#f4ead6;--ink:#0d0d0d;--cash:#16c45b;--cash2:#0d8f40;--pink:#ff9fb2;--line:3px solid var(--ink);--r:18px;--sh:6px 6px 0 var(--ink)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--milk);color:var(--ink);font:500 17px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
a{color:inherit}
h1,h2,h3,.big,.btn,.chip,.tag,.card__v,.foot__big,.sticker,.ticker,.brand{font-family:Anton,Impact,sans-serif;letter-spacing:.01em;text-transform:uppercase;font-weight:400}
b{font-weight:800}

/* cow spots */
.spots{position:fixed;inset:0;pointer-events:none;z-index:0}
.spots i{position:absolute;background:var(--ink);border-radius:46% 54% 60% 40%/50% 40% 60% 50%;opacity:.9}
.spots i:nth-child(1){width:220px;height:170px;left:-90px;top:12%;transform:rotate(20deg)}
.spots i:nth-child(2){width:140px;height:110px;right:-50px;top:30%;transform:rotate(-30deg)}
.spots i:nth-child(3){width:180px;height:140px;left:-70px;top:62%;transform:rotate(60deg)}
.spots i:nth-child(4){width:120px;height:90px;right:-40px;top:78%}
.spots i:nth-child(5){display:none}
.spots i:nth-child(6){display:none}
main,header,footer{position:relative;z-index:1}

/* top bar */
.top{display:flex;align-items:center;gap:20px;padding:14px clamp(16px,4vw,48px);position:sticky;top:0;background:color-mix(in srgb,var(--milk) 88%,transparent);backdrop-filter:blur(8px);border-bottom:var(--line);z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-size:24px;text-decoration:none}
.brand img{border-radius:50%;border:2px solid var(--ink);background:#fff}
.top nav{display:flex;gap:22px;margin-left:auto;font-weight:700}
.top nav a{text-decoration:none}
.top nav a:hover{text-decoration:underline wavy var(--cash)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;font-size:22px;background:var(--cash);color:var(--ink);border:var(--line);border-radius:14px;box-shadow:var(--sh);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.btn--ghost{background:#fff}
.btn--sm{padding:8px 16px;font-size:17px;box-shadow:4px 4px 0 var(--ink)}
.btn[aria-disabled=true]{background:#e9e2d3;color:#8b8577;border-color:#8b8577;box-shadow:4px 4px 0 #8b8577;cursor:not-allowed;pointer-events:none}
.foot a[aria-disabled=true],.top nav a[aria-disabled=true]{opacity:.5;pointer-events:none}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(28px,6vw,80px) clamp(16px,4vw,48px) 40px;max-width:1320px;margin:0 auto}
.chip{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border:var(--line);border-radius:999px;background:#fff;font-size:16px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--cash);box-shadow:0 0 0 3px #c8f5d9;animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px #c8f5d900}}
h1{font-size:clamp(100px,15vw,220px);line-height:.9;margin:18px 0 18px;color:var(--ink);text-shadow:5px 5px 0 var(--cash)}
.lede{font-size:clamp(18px,1.6vw,22px);max-width:34ch}
.ca{display:flex;align-items:center;gap:10px;margin:26px 0 20px;padding:10px 10px 10px 16px;border:var(--line);border-radius:14px;background:#fff;max-width:560px;box-shadow:4px 4px 0 var(--ink)}
.ca__k{font-weight:900}
.ca code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 15px ui-monospace,Menlo,monospace;color:#555}
.ca.is-set code{color:var(--ink)}
.ca__b{border:2px solid var(--ink);background:var(--cream);border-radius:9px;padding:6px 12px;font-weight:800;cursor:pointer}
.ca__b:disabled{opacity:.4;cursor:not-allowed}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero__art{position:relative}
.cow{width:100%;height:auto;display:block;background:#fff;border:var(--line);border-radius:28px;box-shadow:12px 12px 0 var(--ink);transform:rotate(1.5deg);animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(-1deg) translateY(-8px)}}
.sticker{position:absolute;z-index:2;border:var(--line);border-radius:14px;padding:10px 14px;box-shadow:4px 4px 0 var(--ink)}
.sticker--a{top:-14px;left:-18px;background:var(--pink);font-size:24px;line-height:1;transform:rotate(-8deg)}
.sticker--b{bottom:22px;right:-14px;background:var(--cash);font-size:30px;transform:rotate(6deg)}

/* ticker */
.ticker{border-block:var(--line);background:var(--ink);color:var(--milk);overflow:hidden;white-space:nowrap;margin:30px 0}
.ticker__in{display:inline-flex;gap:48px;padding:14px 0;font-size:34px;animation:tick 22s linear infinite}
.ticker__in span::after{content:"✦";color:var(--cash);margin-left:48px}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
section{padding:clamp(40px,6vw,90px) clamp(16px,4vw,48px);max-width:1320px;margin:0 auto}
h2{font-size:clamp(46px,6vw,86px);line-height:.92;margin-bottom:22px}
h2 span{display:block;font-family:inherit;font-size:.36em;text-transform:none;letter-spacing:0;color:#555;margin-top:8px}
.sub{color:#444;margin:-8px 0 20px}

/* jar */
.jarsec__head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tag{padding:6px 12px;border:var(--line);border-radius:10px;background:#fff;font-size:15px}
.tag.is-live{background:var(--cash)}
.jarsec__grid{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(20px,4vw,56px);align-items:start;margin-top:20px}
.jarfig{background:var(--cream);border:var(--line);border-radius:28px;padding:20px 20px 24px;box-shadow:var(--sh);text-align:center}
.jar{width:100%;height:auto;display:block;overflow:visible}
.jar__glass{fill:none;stroke:var(--ink);stroke-width:7;stroke-linejoin:round}
.jar__lid{fill:var(--ink)}
.jar__shine{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;opacity:.9}
.jar__goal{stroke:var(--cash2);stroke-width:4;stroke-dasharray:10 9}
.jar__goaltxt{font:400 20px Anton,Impact,sans-serif;fill:var(--cash2);letter-spacing:.06em}
.jar__label{font:400 46px Anton,Impact,sans-serif;fill:var(--ink)}
.jar__burst{font:400 96px Anton,Impact,sans-serif;fill:var(--cash);stroke:var(--ink);stroke-width:4;paint-order:stroke}
#milk rect{stroke:none}
.jarfig figcaption{margin-top:10px}
.jarfig .big{font-size:44px;line-height:1}
.jarfig .big.is-g{color:var(--cash2)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:#fff;border:var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:5px 5px 0 var(--ink);display:flex;flex-direction:column;gap:2px;min-height:136px}
.card--g{background:var(--cash)}
.card--wide{grid-column:1/-1;background:var(--ink);color:var(--milk);min-height:auto}
.card__k{font-weight:800;text-transform:lowercase;font-size:15px;opacity:.75}
.card__v{font-size:clamp(40px,4.6vw,64px);line-height:1}
.card__v .u{font-size:.45em}
.card__s{font-size:14px;opacity:.8}
.readout{grid-column:1/-1;font-weight:700}
.readout .mut{opacity:.6;font-weight:500}
.note{grid-column:1/-1;font-size:14px}
.red{color:#d21b1b}
.is-shake{animation:shake .45s}
@keyframes shake{20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps li{background:#fff;border:var(--line);border-radius:var(--r);padding:24px;box-shadow:5px 5px 0 var(--ink);position:relative}
.steps li:nth-child(2){background:var(--pink)}
.steps li:nth-child(3){background:var(--cash)}
.steps .n{font:400 70px/1 Anton,Impact,sans-serif;display:block;margin-bottom:6px}
.steps h3{font-size:30px;margin-bottom:6px}
.steps--buy li:nth-child(2){background:#fff}
.steps--buy li:nth-child(3){background:var(--cream)}

/* ladder + log */
.burns{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(20px,4vw,56px)}
.rungs{list-style:none;display:flex;flex-direction:column;gap:10px}
.rung{display:grid;grid-template-columns:90px 110px 1fr;align-items:center;gap:12px;padding:12px 16px;border:var(--line);border-radius:14px;background:#fff}
.rung__n{font-weight:800}
.rung__goal{font:400 24px Anton,Impact,sans-serif}
.rung__st{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.rung__st svg{width:16px;height:16px}
.rung.is-done{background:var(--cash)}
.rung.is-cur{background:var(--ink);color:var(--milk);transform:translateX(8px)}
.rung.is-locked{opacity:.55}
.bar{flex:1;min-width:90px;height:14px;border:2px solid var(--milk);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--milk);transition:width .8s}
.ok{color:var(--ink)}
.tblwrap{overflow-x:auto;border:var(--line);border-radius:14px;background:#fff;box-shadow:5px 5px 0 var(--ink)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:2px solid #eee;white-space:nowrap}
.tbl th{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;background:var(--cream)}
.tbl .is-wait{opacity:.5}
.tbl .sol{font-weight:800}
.empty{padding:16px;border:3px dashed var(--ink);border-radius:14px;background:#fff}
[data-replay]{margin-top:16px}

/* faq */
.faq details{border:var(--line);border-radius:14px;background:#fff;margin-bottom:12px;box-shadow:4px 4px 0 var(--ink)}
.faq summary{cursor:pointer;padding:16px 20px;font:400 26px Anton,Impact,sans-serif;text-transform:uppercase;list-style:none}
.faq summary::after{content:"+";float:right}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 20px 18px;max-width:70ch}

/* footer */
.foot{background:var(--ink);color:var(--milk);padding:50px clamp(16px,4vw,48px) 40px;margin-top:40px;border-top:var(--line)}
.foot__big{font-size:clamp(80px,17vw,260px);line-height:.85;color:var(--milk);text-shadow:6px 6px 0 var(--cash2)}
.foot__links{display:flex;gap:22px;flex-wrap:wrap;margin:22px 0;font-weight:800}
.foot__fine{opacity:.65;font-size:14px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero__art{max-width:460px;margin:0 auto;width:100%}
  .jarsec__grid,.burns{grid-template-columns:1fr}
  .jarfig{max-width:440px;margin:0 auto;width:100%}
  .steps{grid-template-columns:1fr}
  .top nav{display:none}
  .top .btn{margin-left:auto}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .rung{grid-template-columns:70px 90px 1fr;padding:10px 12px}
  .ticker__in{font-size:24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.kicker{margin-top:18px;font:400 clamp(22px,2.4vw,34px)/1 Anton,Impact,sans-serif;text-transform:uppercase;background:var(--ink);color:var(--cash);display:inline-block;padding:8px 14px;border-radius:10px;transform:rotate(-1.5deg)}
.kicker+h1{margin-top:12px}
.proof{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.proof li{border:var(--line);border-radius:999px;background:#fff;padding:6px 14px;font-weight:800;box-shadow:3px 3px 0 var(--ink)}
.proof li:nth-child(2){background:var(--cash)}
.proof li:nth-child(3){background:var(--pink)}

/* meme barn */
.memegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.meme{position:relative;display:block;border:var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:5px 5px 0 var(--ink);text-decoration:none;transition:transform .15s}
.meme:nth-child(odd){transform:rotate(-1deg)}.meme:nth-child(even){transform:rotate(1deg)}
.meme:hover{transform:rotate(0) scale(1.03);z-index:2}
.meme img{display:block;width:100%;height:auto;aspect-ratio:1}
.meme span{position:absolute;left:8px;right:8px;bottom:8px;background:var(--ink);color:var(--milk);font-weight:800;font-size:13px;padding:6px 10px;border-radius:10px;opacity:0;transition:opacity .15s}
.meme:hover span{opacity:1}
.meme:first-child{grid-column:span 2;grid-row:span 2}
.pfpbox{display:flex;align-items:center;gap:20px;margin-top:28px;padding:18px 22px;border:var(--line);border-radius:20px;background:var(--cash);box-shadow:var(--sh);flex-wrap:wrap}
.pfpbox img{width:96px;height:96px;border-radius:50%;border:var(--line);background:#fff}
.pfpbox div{flex:1;min-width:200px}
.pfpbox h3{font-size:34px;line-height:1}
@media (max-width:900px){.memegrid{grid-template-columns:repeat(2,1fr)}}

.mhead{font-size:26px;margin:18px 0 8px}
.rung.is-next{background:var(--ink);color:var(--milk)}
.rung__goal{white-space:nowrap}