*{box-sizing:border-box;margin:0}body{font:var(--gg-fs-body)/1.6 var(--gg-font-text);color:var(--gg-ink)}
h1,h2,h3,.f{font-family:var(--gg-font-display);font-weight:600;line-height:1.1}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.tbd{display:inline-block;font:700 .68rem/1 var(--gg-font-text);letter-spacing:.08em;background:var(--gg-honey);color:var(--gg-ink);padding:3px 6px;border-radius:4px;vertical-align:middle;margin-left:6px}
header{padding:18px 0}header .wrap{display:flex;align-items:center;justify-content:space-between}header img{height:58px}
nav a{color:var(--gg-ink);text-decoration:none;font-weight:600;margin-left:22px}
.btn{display:inline-block;font:600 1.05rem var(--gg-font-display);background:var(--gg-brick);color:var(--gg-cream);padding:14px 26px;border-radius:var(--gg-r-pill);border:0;text-decoration:none;cursor:pointer;position:relative}
.btn:hover{background:var(--gg-brick-dark)}
.hero{position:relative;overflow:hidden;padding:56px 0 80px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero h1{font-size:var(--gg-fs-hero)}.hero p{font-size:1.2rem;margin:18px 0 28px;max-width:30ch}
.stage{position:relative;height:420px}
.stage .biscuit{position:absolute;left:0;bottom:0;width:420px;max-width:100%;height:auto}
.jar{position:absolute;right:20px;bottom:6px;width:120px}

.sky{position:absolute;right:16px;top:8px;width:220px;pointer-events:none}.hero h1{text-wrap:balance}
.ribbon{height:22px;background-image:var(--gg-gingham);background-size:var(--gg-gingham-size);background-color:var(--gg-cream);border-block:3px solid var(--gg-brick)}
section{padding:72px 0}section h2{font-size:var(--gg-fs-h2);text-align:center}
.lede{text-align:center;color:var(--gg-sage-text);margin-top:8px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.feat{padding:26px 22px 24px;text-align:center}.feat .ico{width:120px;height:138px;padding:10px}.feat img{width:120px;height:138px;object-fit:contain}.feat h3{font-size:1.3rem;margin:10px 0 6px;color:var(--gg-brick)}
.price{display:grid;grid-template-columns:repeat(2,minmax(0,340px));gap:26px;justify-content:center;margin-top:40px}
.chalk{background:var(--gg-chalk);color:var(--gg-chalk-text);border-radius:var(--gg-r-md);padding:30px;border:10px solid #8E5A3A;box-shadow:var(--gg-shadow);background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:6px 6px}
.chalk h3{font-size:1.5rem}.chalk .amt{font:600 2.4rem var(--gg-font-display);margin:10px 0;border-bottom:2px dashed rgba(243,238,223,.4);padding-bottom:10px}
.chalk ul{padding-left:18px}
.join{max-width:620px;margin:40px auto 0;padding:40px 34px;text-align:center}
.join form{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;justify-content:center}
.join input{flex:1 1 240px;font:inherit;padding:14px 18px;border:2px solid var(--gg-kraft);border-radius:var(--gg-r-pill);background:#fff}
.gg-joined-wave img{width:120px;margin:16px auto 0;display:block}
.fine{font-size:.92rem;color:var(--gg-sage-text);margin-top:12px}.note{max-width:720px;margin:0 auto;padding:40px 44px;text-align:center}.note p{margin-top:14px;font-size:1.1rem}
.faq{max-width:760px;margin:32px auto 0;display:grid;gap:14px}.faq details{padding:18px 26px}.faq summary{font:600 1.15rem var(--gg-font-display);cursor:pointer;color:var(--gg-brick)}.faq p{margin-top:8px}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:24px;justify-content:center;margin-top:36px}.role{padding:28px 28px 26px;text-align:center}.role img{width:110px;height:126px;object-fit:contain}.role h3{font-size:1.35rem;color:var(--gg-brick);margin:8px 0 6px}
@media (max-width:820px){.roles{grid-template-columns:1fr}}
footer{padding:36px 0;background:var(--gg-ink);color:var(--gg-cream)}footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}footer a{color:var(--gg-cream)}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero .wrap{gap:12px}.hero{padding-bottom:40px}.hero .fine{margin-bottom:0}.stage{height:auto;margin-top:4px}.stage .biscuit{position:relative;left:auto;bottom:auto;display:block;width:230px;margin:0 auto}.jar{width:96px}
 .grid4{grid-template-columns:1fr 1fr}.price{grid-template-columns:1fr}nav a:not(.btn){display:none}header img{height:46px}.sky{width:112px;top:2px;right:6px}.hero{padding-top:84px}}
@media (max-width:480px){.grid4{grid-template-columns:1fr}.feat .ico{width:120px;height:138px;padding:10px}.feat img{width:100px}}

/* booth scene hero */
.hero.booth{padding:0;background:#FDF2DA}
.booth .scene{position:relative;max-width:1600px;margin:0 auto;aspect-ratio:16/9;min-height:0}
.booth .scene>picture img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom}
.booth .copy{position:absolute;left:4%;top:7%;width:min(40%,500px);z-index:2}
.booth .copy h1{font-size:clamp(2.2rem,3.6vw,3.6rem)}
.booth .biscuit{position:absolute;left:24.2%;bottom:3.33%;height:36.1%;width:auto;z-index:1}
.booth .shadow{position:absolute;left:calc(24.2% + 2.3%);bottom:calc(3.33% - 10px);width:13.5%;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(70,60,30,.43),rgba(70,60,30,0));z-index:1;pointer-events:none}
.booth .wheat{position:absolute;right:1.2%;bottom:1%;height:33.3%;width:auto;transform-origin:50% 100%;z-index:1}
@media (prefers-reduced-motion:no-preference){.booth .wheat{animation:gg-wheat-sway 5.5s ease-in-out infinite}}
@keyframes gg-wheat-sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@media (min-width:821px) and (max-width:1180px){.booth .copy{width:33%;top:5%}.booth .copy h1{font-size:2.2rem}.booth .copy p{font-size:1rem;margin:10px 0 16px}.booth .copy .fine{font-size:.85rem;margin-top:8px}}
@media (max-width:820px){
 .hero.booth{padding-top:0}
 .booth .scene{aspect-ratio:auto;height:calc(133.333vw + 60px);min-height:0;max-width:none}
 .booth .scene>picture img.bg{top:auto;height:133.333vw}
 .booth .copy h1{font-size:2.15rem}
 .booth .scene>picture img.bg{object-fit:contain;object-position:center bottom}
 .booth .copy{position:relative;left:auto;top:auto;width:auto;padding:24px 20px 0}
 .booth .copy p{font-size:1.05rem;margin:10px 0 16px}
 .booth .scene{display:flex;flex-direction:column}
 .booth .shadow{left:calc(1.28vw + 3.7vw);bottom:calc(6.154vw - 6px);width:23vw;height:12px}
 .booth .biscuit{left:1.28vw;bottom:6.154vw;height:30.77vw}  /* 390px: x5 y376-496, 124x120 */
 .booth .wheat{right:1.03vw;bottom:1.28vw;height:21.8vw}
}

/* App Guru additions (CSP-safe replacements for kit inline styles, plus form bits) */
.sr{position:absolute;left:-9999px}.hero-cta{display:inline-block}.btn-sm{padding:10px 18px;font-size:.95rem}
.center-fine{text-align:center;margin-top:22px}.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{min-height:1.4em;margin-top:10px;font-weight:600;color:var(--gg-brick-dark)}
.one{max-width:720px;margin:26px auto 0;text-align:center;color:var(--gg-sage-text)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px;z-index:9}
.legal{max-width:780px;margin:10px auto 60px;padding:40px}.legal h1{font-size:2.2rem;color:var(--gg-brick)}.legal h2{font-size:1.3rem;margin:24px 0 6px;text-align:left}.legal p,.legal ul{margin-top:8px;position:relative;z-index:1}.small{font-size:.85rem;color:var(--gg-sage-text)}
a{color:var(--gg-brick)}footer a{color:var(--gg-cream)}footer p{max-width:52ch}.join form[hidden]{display:none}
header nav{display:flex;align-items:center}
.hero h1{text-wrap:balance;overflow-wrap:break-word}.hero h1+p{text-wrap:pretty;overflow-wrap:break-word}
.foot-brand{display:flex;align-items:center;gap:12px}footer img.foot-biscuit{width:64px;height:auto;flex:none}
/* Hero art: keep natural aspect ratio (the img width/height attrs set height:176px while CSS widened it -> squish).
   To swap in larger art later: replace the PNG and raise --art-w (never above the PNG's pixel width). */
.stage{--art-w:420px;height:auto;min-height:0;display:flex;justify-content:center;align-items:flex-end}
.hero-art{position:relative;width:var(--art-w);max-width:100%;margin:0 auto;isolation:isolate}
.stage .hero-art .biscuit{position:relative;left:auto;bottom:auto;display:block;width:100%;height:auto;object-fit:contain;z-index:2}
.ha-sun{position:absolute;z-index:0;left:8%;top:2%;width:84%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(240,196,110,.55) 0%,rgba(240,196,110,.22) 45%,rgba(246,239,223,0) 70%);animation:ha-glow 6s ease-in-out infinite}
.ha-shadow{position:absolute;z-index:1;left:22%;bottom:-2%;width:56%;height:7%;border-radius:50%;background:radial-gradient(ellipse,rgba(92,70,40,.28),rgba(92,70,40,0) 70%);animation:ha-shadow 4.8s ease-in-out infinite}
.stage .hero-art .biscuit{animation:ha-bob 4.8s ease-in-out infinite;transform-origin:50% 100%}
.ha-pip{position:absolute;z-index:3;left:70%;top:9%;width:22%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,250,230,.55),rgba(255,250,230,0) 60%);animation:ha-fig8 7s ease-in-out infinite;mix-blend-mode:screen}
.ha-f{position:absolute;z-index:1;pointer-events:none;opacity:0;animation:ha-drift 9s ease-in-out infinite}
.ha-f.w{width:9px;height:4px;border-radius:50%;background:#D9A441}
.ha-f.s{width:8px;height:8px;background:#F3E3B5;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ha-f.h{width:10px;height:10px;background:repeating-conic-gradient(#C8433A 0 25%,#F6EFDF 0 50%) 0 0/5px 5px;clip-path:path("M5 9.5 1 5.5A2.4 2.4 0 0 1 5 2.2 2.4 2.4 0 0 1 9 5.5Z")}
.ha-f.g{width:7px;height:7px;border-radius:50%;background:#9DB08A}
.ha-f:nth-of-type(4){left:6%;top:60%;animation-delay:0s}.ha-f:nth-of-type(5){left:88%;top:52%;animation-delay:1.6s}
.ha-f:nth-of-type(6){left:14%;top:22%;animation-delay:3.1s}.ha-f:nth-of-type(7){left:80%;top:72%;animation-delay:4.5s}
.ha-f:nth-of-type(8){left:30%;top:6%;animation-delay:6s}.ha-f:nth-of-type(9){left:94%;top:30%;animation-delay:7.2s}
@keyframes ha-bob{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-4px) scaleY(1.008)}}
@keyframes ha-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.92);opacity:.75}}
@keyframes ha-glow{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes ha-fig8{0%,100%{transform:translate(0,0);opacity:.5}25%{transform:translate(6px,-4px);opacity:.9}50%{transform:translate(0,0);opacity:.5}75%{transform:translate(-6px,-4px);opacity:.9}}
@keyframes ha-drift{0%{opacity:0;transform:translate(0,6px) rotate(0)}20%{opacity:.85}80%{opacity:.6}100%{opacity:0;transform:translate(8px,-38px) rotate(40deg)}}
@media (max-width:820px){.stage{--art-w:230px;margin-top:4px}.ha-f:nth-of-type(n+8){display:none}}
@media (prefers-reduced-motion:reduce){.hero-art *,.stage .hero-art .biscuit{animation:none!important}.ha-f{opacity:.7}}
@media (max-width:480px){header .btn-sm{padding:8px 12px;font-size:.85rem}.legal{padding:28px 22px}}