/* munchguard.forgebyte.app — playful & warm: mint, cream, sunny yellow, big round shapes. */
@font-face{font-family:"Fredoka";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fredoka-latin-wght.woff2) format("woff2")}
:root{
 --cream:#fff8ec;--cream-2:#fff1db;--mint:#d7f5e1;--mint-2:#b4ebc7;--sun:#ffd84d;--sun-2:#ffe999;
 --green:#15803d;--green-ink:#0d5a2b;--forest:#0b3d20;--coral:#ff7a59;--berry:#c2410c;--lilac:#e9defd;--sky:#d6efff;
 --fb-bg:var(--cream);--fb-surface:#fff;--fb-ink:#16301f;--fb-muted:#4a5e50;--fb-line:rgba(11,61,32,.14);
 --fb-accent:var(--green);--fb-accent-ink:var(--green-ink);--fb-focus:#0d7a38;
 --fb-bar-bg:rgba(255,248,236,.9);--fb-bar-ink:var(--forest);--fb-bar-muted:#3f5a48;--fb-bar-line:rgba(11,61,32,.1);
 --fb-cta-bg:var(--green);--fb-cta-ink:#fff;
 --fb-foot-bg:var(--forest);--fb-foot-ink:#d9f0e0;--fb-foot-head:#fff;--fb-foot-muted:#a9cdb5;--fb-foot-line:rgba(217,240,224,.18);
 --fb-body:"Fredoka",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;--fb-display:"Fredoka",ui-rounded,system-ui,sans-serif;
 --fb-radius:32px;
}
body{font-size:18px}
h1,h2,h3{font-family:var(--fb-display);font-weight:700;letter-spacing:-.01em;color:var(--forest)}
h2{font-size:clamp(2rem,4.6vw,3.2rem)}
.eyebrow{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--sun);color:#4a3200;font-weight:600;letter-spacing:.08em;margin-bottom:14px}
.lead{font-size:clamp(1.1rem,1.9vw,1.3rem);color:#2f4a38;max-width:42ch}
.grad{color:var(--green);background:linear-gradient(transparent 62%,var(--sun) 62% 92%,transparent 92%);padding:0 .1em;border-radius:.2em}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:12px 24px;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .2s}
.btn--soft{background:#fff;border:3px solid var(--forest);color:var(--forest);box-shadow:4px 4px 0 var(--forest)}
.btn--soft:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--forest)}
.appstore{display:inline-flex;align-items:center;gap:10px;min-height:52px;background:#000;color:#fff;text-decoration:none;border-radius:16px;padding:9px 18px 9px 14px;line-height:1.1}
.appstore svg{width:26px;height:26px}.appstore small{display:block;font-size:.7rem;opacity:.85}.appstore b{font-size:1.15rem}
.facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:24px 0 0}
.facts li{padding:6px 14px;border-radius:999px;background:#fff;border:2px solid var(--mint-2);font-size:.92rem;font-weight:500;color:var(--green-ink)}
.s-head{max-width:720px;margin-bottom:40px}.s-head p{font-size:1.12rem;color:var(--fb-muted)}
.wave{position:absolute;left:0;right:0;width:100%;height:70px;display:block}
.wave--down{bottom:-1px;fill:var(--mint)}
.wave--up{bottom:-1px;fill:var(--cream)}

/* hero */
.mg-hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(40px,7vw,90px) 0 clamp(110px,12vw,150px)}
.blob{position:absolute;border-radius:50%;z-index:-1}
.blob--sun{width:min(520px,80vw);aspect-ratio:1;right:-120px;top:-140px;background:var(--sun-2)}
.blob--mint{width:min(380px,70vw);aspect-ratio:1;left:-160px;bottom:-60px;background:var(--mint)}
.mg-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:920px){.mg-hero__grid{grid-template-columns:1fr;gap:40px}}
.mascot{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.mascot .appicon{width:84px;height:84px;border-radius:26px;border:4px solid #fff;box-shadow:0 14px 30px -12px rgba(11,61,32,.45);transform:rotate(-6deg)}
.mascot .eyebrow{margin:0}
.mg-hero h1{font-size:clamp(2.3rem,5.6vw,4.2rem);line-height:1.04}

/* signature: chew-to-watch demo */
.demo{margin:0;position:relative;max-width:480px;justify-self:center;width:100%}
.demo__device{background:var(--forest);border-radius:36px;padding:14px;box-shadow:0 40px 70px -30px rgba(11,61,32,.6),0 0 0 6px #fff;transform:rotate(2deg)}
.demo__screen{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:16/10;background:#8fd8ff}
.demo__video{width:100%;height:100%;transition:filter .5s}
.demo .clouds{animation:drift 14s linear infinite}
.demo .hopper{offset-path:path("M -20 150 Q 40 110 80 140 T 170 135 T 260 130 T 340 132");animation:hop 6s linear infinite}
@keyframes drift{to{transform:translateX(-320px)}}
@keyframes hop{from{offset-distance:0%}to{offset-distance:100%}}
.demo__bar{position:absolute;left:14px;right:14px;bottom:12px;height:6px;border-radius:6px;background:rgba(255,255,255,.5)}
.demo__bar span{display:block;height:100%;width:30%;border-radius:6px;background:#fff;animation:prog 20s linear infinite}
@keyframes prog{from{width:8%}to{width:96%}}
.demo__pause{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .4s}
.demo__pause svg{width:64px;height:64px;fill:#fff;padding:14px;border-radius:50%;background:rgba(11,61,32,.55)}
.demo__buddy{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;color:var(--forest);font-weight:600;font-size:.95rem;box-shadow:0 10px 20px -10px rgba(0,0,0,.4);transform:translateY(-140%) scale(.8);opacity:0;transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.demo__buddy img{width:40px;height:40px;border-radius:50%}
.demo__meter{display:flex;align-items:center;gap:14px;padding:14px 6px 2px;color:#d9f0e0;font-weight:600;font-size:.95rem}
.demo__label{white-space:nowrap}
.demo__label--off{display:none}
.meter{flex:1;height:16px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.meter span{display:block;height:100%;width:82%;border-radius:999px;background:repeating-linear-gradient(-45deg,var(--sun) 0 10px,#ffc21a 10px 20px);transition:width .6s ease}
.demo[data-state=play] .meter span{animation:chew .9s ease-in-out infinite}
@keyframes chew{50%{transform:scaleX(.94);transform-origin:left}}
.demo[data-state=pause] .demo__video{filter:saturate(.35) brightness(.8)}
.demo[data-state=pause] .clouds,.demo[data-state=pause] .hopper,.demo[data-state=pause] .demo__bar span{animation-play-state:paused}
.demo[data-state=pause] .demo__pause{opacity:1}
.demo[data-state=pause] .demo__buddy{transform:none;opacity:1}
.demo[data-state=pause] .meter span{width:6%}
.demo[data-state=pause] .demo__label--on{display:none}
.demo[data-state=pause] .demo__label--off{display:inline;color:var(--sun)}
.demo.is-frozen .clouds,.demo.is-frozen .hopper,.demo.is-frozen .demo__bar span,.demo.is-frozen .meter span{animation-play-state:paused}
.demo figcaption{margin:22px 4px 0;font-size:.98rem;color:var(--fb-muted);text-align:center}
.demo__toggle{display:block;margin:10px auto 0;min-height:40px;padding:6px 16px;border-radius:999px;border:2px solid var(--forest);background:#fff;color:var(--forest);font-weight:600;cursor:pointer}

/* features as tilted stickers */
.mg-help{position:relative;background:var(--mint);padding:clamp(40px,6vw,80px) 0 clamp(120px,12vw,160px)}
.stickers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
@media(max-width:920px){.stickers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.stickers{grid-template-columns:1fr;gap:22px}}
.sticker{position:relative;padding:28px 26px 26px;border-radius:30px;background:#fff;border:5px solid #fff;box-shadow:0 2px 0 rgba(11,61,32,.06),0 20px 36px -22px rgba(11,61,32,.55);transform:rotate(var(--tilt,0deg));transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.sticker:hover{transform:rotate(0) scale(1.02)}
.sticker h3{font-size:1.35rem;margin-bottom:.4em}
.sticker p{margin:0;color:#36503f}
.sticker .ic{display:grid;place-items:center;width:58px;height:58px;margin:-50px 0 12px;border-radius:50%;background:var(--forest);color:var(--sun);font-weight:700;font-size:1.2rem;border:4px solid #fff;box-shadow:0 8px 16px -8px rgba(0,0,0,.4)}
.sticker--1{--tilt:-2.5deg;background:var(--sun-2)}
.sticker--2{--tilt:1.8deg;background:#fff}
.sticker--3{--tilt:-1.2deg;background:var(--lilac)}
.sticker--4{--tilt:2.2deg;background:#ffe0d4}
.sticker--5{--tilt:-2deg;background:var(--sky)}
.sticker--6{--tilt:1.4deg;background:#fff}
.mg-help .stickers{padding-top:24px}

/* iPad on a stand at the table */
.mg-table{padding:clamp(56px,8vw,100px) 0;overflow:hidden}
.mg-table__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
@media(max-width:920px){.mg-table__grid{grid-template-columns:1fr}}
.mg-table__copy p{color:var(--fb-muted);font-size:1.1rem}
.scene{position:relative;padding:40px 20px 0;border-radius:40px;background:radial-gradient(circle at 80% 18%,var(--sun) 0 54px,transparent 55px),linear-gradient(180deg,var(--sun-2),#fff1c4);isolation:isolate;overflow:hidden}
.scene__ipad{position:relative;z-index:2;width:min(300px,62%);margin:0 auto;padding:12px;border-radius:30px;background:#1f2a24;box-shadow:0 30px 50px -24px rgba(60,40,0,.6);transform:rotate(-3deg)}
.scene__ipad img{border-radius:20px;width:100%}
.scene__stand{position:relative;z-index:1;width:46%;max-width:180px;height:44px;margin:-14px auto 0;background:linear-gradient(#cfd8d2,#a8b5ad);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);border-radius:6px}
.scene__plate{position:absolute;z-index:3;right:4%;bottom:26px;width:min(200px,40%)}
.scene__table{height:70px;margin:0 -20px;background:repeating-linear-gradient(90deg,var(--mint-2) 0 28px,var(--mint) 28px 56px);border-top:6px solid #fff}

/* screenshots as a playful polaroid row */
.mg-screens{padding:clamp(40px,6vw,80px) 0;background:radial-gradient(circle,rgba(22,163,74,.16) 2px,transparent 2.5px) 0 0/26px 26px,var(--cream-2)}
.polaroids{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px max(16px,calc((100% - 1180px)/2)) 40px;scrollbar-width:thin}
.polaroids img{flex:0 0 auto;width:min(220px,58vw);border-radius:28px;border:6px solid #fff;box-shadow:0 22px 40px -22px rgba(11,61,32,.6);scroll-snap-align:center}
.polaroids img:nth-child(odd){transform:rotate(-2deg)}.polaroids img:nth-child(even){transform:rotate(2deg) translateY(14px)}

/* free + chunky FAQ */
.mg-free{padding:clamp(56px,8vw,110px) 0}
.mg-free__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
@media(max-width:920px){.mg-free__grid{grid-template-columns:1fr}}
.freebie{position:relative;padding:clamp(28px,4vw,44px);border-radius:44px 44px 44px 12px;background:var(--sun);color:#3b2a00}
.freebie h2{color:#2c1f00}.freebie .eyebrow{background:#fff;color:#4a3200}
.freebie p{margin:0;font-size:1.1rem}
.faq{display:grid;gap:14px}
.faq details{border:3px solid var(--forest);border-radius:26px;background:#fff;box-shadow:5px 5px 0 var(--mint-2);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:600;font-size:1.12rem;color:var(--forest)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--mint);color:var(--forest);font-size:1.5rem;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--sun)}
.faq details p{margin:0;padding:0 22px 20px;color:#36503f}
.faq a{color:var(--green-ink)}

/* get the app */
.mg-get{padding:0 0 clamp(56px,8vw,100px)}
.band{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:clamp(28px,5vw,56px);border-radius:48px;background:var(--green);color:#fff;box-shadow:0 30px 60px -30px rgba(11,61,32,.7);position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-60px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:rgba(255,216,77,.35)}
.band img{width:84px;height:84px;border-radius:24px;border:4px solid #fff;transform:rotate(-6deg)}
.band>div{flex:1 1 240px}
.band h2{color:#fff;margin:0}.band p{margin:.3em 0 0;opacity:.95}
.band .appstore{position:relative;z-index:1}

/* support / press / legal pages */
.doc-hero{position:relative}
.doc-hero h1{font-weight:700;color:var(--forest)}
.doc-hero .eyebrow{background:var(--sun)}
main:has(.doc){background:radial-gradient(circle at 100% 0,var(--sun-2) 0 180px,transparent 181px),radial-gradient(circle at 0 260px,var(--mint) 0 140px,transparent 141px)}
.prose{border:3px solid var(--forest);box-shadow:8px 8px 0 var(--mint-2)}
.prose h2{color:var(--forest)}
.toc{border-left:4px solid var(--mint-2)}
.contact{background:var(--mint)}
.prose .facts{display:grid;gap:10px;margin:0 0 1em}
.prose .facts>div{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 16px;border-radius:18px;background:var(--cream)}
.prose .screenshot-grid{display:grid;gap:12px}

@media (prefers-reduced-motion:reduce){
 .demo .clouds,.demo .hopper,.demo__bar span,.meter span{animation:none!important}
 .demo .hopper{offset-distance:40%}
 .demo__toggle{display:none}
 .sticker,.sticker:hover{transition:none}
}