/* The home page, in the app's look. Colours come from v/tokens.css (generated from
   MunchPalette, light and dark), the backdrop is the app's JellyBackground mesh, the one
   big line in each section is condensed Fredoka (weight 700, width 75, as in the app and
   the App Store frames), everything else is SF Rounded, and the food sits on the vote
   card's poster. Only index.html loads this sheet: the other pages keep styles.css. */

@font-face{font-family:"Fredoka Display";src:url("assets/Fredoka.ttf") format("truetype");font-weight:300 700;font-stretch:75% 125%;font-display:swap}

:root{--round:ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--display:"Fredoka Display",var(--round);
 --focus:#7251A1;--shadow:#3B273329;--soft:#7434491A;--device:#2B1B26;--live:#4F8A2E;
 /* JellyBackground.defaultColors, row by row */
 --m1:#FFE6EE;--m2:#FFE0D2;--m3:#FFD6E2;--m4:#FFF1C4;--m5:#FFF7FA;--m6:#E8DEFF;--m7:#D6F5EA;--m8:#FFE3F3;--m9:#DDEBFF;
 --ribbon-a:#FFF1C4;--ribbon-b:#D6F5EA;--ribbon-c:#E8DEFF;
 --closing-a:#FFB3C6;--closing-b:#D9C9FF}
@media (prefers-color-scheme:dark){:root{--focus:#B79DFF;--shadow:#00000066;--soft:#00000040;--device:#0F0A12;--live:#93D16F;
 --m1:#21152A;--m2:#2E1B33;--m3:#3A1A35;--m4:#251A36;--m5:#2B1E3D;--m6:#32204A;--m7:#1B2236;--m8:#2A1631;--m9:#1E1A3A;
 --ribbon-a:#3A2341;--ribbon-b:#24304A;--ribbon-c:#3A2A55;
 --closing-a:#5A2346;--closing-b:#3B2C66}}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 var(--round);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
 radial-gradient(60% 45% at 0% 0%,var(--m1),transparent 72%),
 radial-gradient(45% 40% at 50% 0%,var(--m2),transparent 72%),
 radial-gradient(60% 45% at 100% 0%,var(--m3),transparent 72%),
 radial-gradient(50% 45% at 0% 50%,var(--m4),transparent 72%),
 radial-gradient(55% 45% at 100% 50%,var(--m6),transparent 72%),
 radial-gradient(60% 45% at 0% 100%,var(--m7),transparent 72%),
 radial-gradient(45% 40% at 50% 100%,var(--m8),transparent 72%),
 radial-gradient(60% 45% at 100% 100%,var(--m9),transparent 72%),
 var(--m5)}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
h1,h2,h3,p{margin-top:0}
.wrap{max-width:1200px;margin:0 auto;padding-inline:40px}
.skip{position:absolute;top:-100px;left:20px;background:var(--ink);color:var(--bg);padding:10px;border-radius:10px;z-index:10}
.skip:focus{top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Type: condensed Fredoka for the one big line, SF Rounded for the rest */
h1,h2,.poster .title,.poster h3,.crew-card h3,.demo-screen h3{font-family:var(--display);font-weight:700;font-stretch:75%;font-variation-settings:"wdth" 75;letter-spacing:0}
h1{font-size:clamp(60px,6.8vw,92px);line-height:.92;margin-bottom:26px}
h2{font-size:clamp(42px,5.2vw,68px);line-height:.98;margin-bottom:18px;text-wrap:balance}
h3{font-weight:700}
.eyebrow{margin:0 0 12px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.section{padding-block:96px}
.section-heading{text-align:center;max-width:760px;margin-inline:auto}
.section-heading>p:last-child{color:var(--ink-2);font-size:19px;margin-bottom:0}

/* Buttons: the app's jelly word buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:14px 24px;border:0;border-radius:26px;font:600 17px/1.2 var(--round);text-align:center;white-space:nowrap;transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
.button.primary{background:var(--button);color:var(--button-ink);box-shadow:inset 0 14px 12px -12px #FFFFFF73,inset 0 -4px 0 #0000002E,0 6px 12px #74344933}
.button.secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--sunken),inset 0 -4px 0 #00000012,0 4px 10px var(--soft)}
.button:hover{transform:translateY(-2px)}
.button:active{transform:scale(.97)}
.button[disabled]{opacity:.6;cursor:progress;transform:none}
.text-link{font-size:15px;font-weight:600;color:var(--ink);border-bottom:1.5px solid var(--ink-2);padding-bottom:2px}

/* Nav */
.nav{height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand-wordmark{display:block;width:170px;height:auto}
.nav nav{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:600}
.nav nav>a:not(.nav-pill){color:var(--ink-2)}
.nav nav>a:not(.nav-pill):hover{color:var(--ink)}
.nav-pill{min-height:44px;padding:10px 18px;font-size:15px;gap:10px}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:24px;padding-block:8px 72px}
.product-identity{display:flex;gap:14px;align-items:center;margin-bottom:22px;font-size:15px;line-height:1.35;color:var(--ink-2)}
.product-identity span{max-width:13.5em}
.product-identity img{width:56px;height:56px;flex:none;filter:drop-shadow(0 6px 10px var(--soft))}
.product-identity strong{color:var(--ink);font-weight:700}
.availability{display:inline-flex;gap:9px;align-items:center;margin:0 0 20px;padding:6px 14px 6px 12px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--sunken);font-size:14px;font-weight:600;color:var(--ink-2)}
.availability>span{width:8px;height:8px;border-radius:50%;background:var(--live)}
.whatever{position:relative;display:inline-block}
.whatever svg{position:absolute;left:0;bottom:-.08em;width:100%;height:.2em;fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.hero-description{font-size:20px;line-height:1.45;color:var(--ink-2);max-width:31ch;margin-bottom:28px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px}
.release-note{font-size:14px;color:var(--ink-2);margin:22px 0 0}
.release-note.free-note{margin-top:4px;font-weight:700;color:var(--ink)}
.store-download{display:inline-flex;align-items:center;min-height:60px;line-height:0}
.store-download img{display:block;width:180px;height:60px}
.release-note a,.closing-note a{text-decoration:underline;text-underline-offset:3px}

/* The scene: the chef, a fan of three posters, two bubbles */
.hero-scene{position:relative;width:100%;max-width:640px;justify-self:end;aspect-ratio:640/580;isolation:isolate}
.scene-halo{position:absolute;inset:6% 0 4% 8%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--f-taro) 34%,transparent),color-mix(in srgb,var(--f-strawberry) 14%,transparent) 60%,transparent);z-index:-1}
.hero-scene .poster{position:absolute;width:33%;transform-origin:50% 100%}
.fan-one{left:33.5%;top:17%;transform:rotate(-8deg)}
.fan-two{left:50%;top:4%;z-index:1}
.fan-three{left:67%;top:18%;z-index:2;transform:rotate(9deg)}
.hero-chef{position:absolute;left:-1%;bottom:1%;width:43%;z-index:3;filter:drop-shadow(0 14px 16px var(--shadow))}
.chef-floor{position:absolute;left:2%;bottom:0;width:40%;height:7%;border-radius:50%;background:radial-gradient(closest-side,var(--shadow),transparent);z-index:2}
.bubble{position:absolute;z-index:4;background:var(--surface);color:var(--ink);padding:10px 18px;border-radius:22px;font:700 19px/1.2 var(--round);white-space:nowrap;box-shadow:0 8px 18px var(--soft),inset 0 0 0 1.5px var(--sunken)}
.bubble::after{content:"";position:absolute;width:16px;height:16px;background:var(--surface);border-radius:3px;transform:rotate(45deg)}
.bubble-one{left:2%;top:0;transform:rotate(-5deg)}
.bubble-one::after{left:36px;bottom:-6px}
.bubble-two{left:42%;top:70%;transform:rotate(4deg)}
.bubble-two::after{left:-6px;top:calc(50% - 8px)}

/* The poster: the vote card's face. Light top behind the food, easing into the deep shade under the title. */
.poster{container-type:inline-size;position:relative;display:flex;flex-direction:column;aspect-ratio:5/7;border-radius:22px;overflow:hidden;background:var(--deep);color:var(--poster-title);text-align:left;box-shadow:0 14px 28px var(--shadow)}
.poster .art-zone{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding-top:9cqw;background:linear-gradient(to bottom,var(--top) 60%,var(--s1) 68%,var(--s2) 76%,var(--s3) 84%,var(--s4) 92%,var(--deep) 100%)}
.poster .dish{display:block;width:84cqw;height:auto;aspect-ratio:1}
.poster .title-block{flex:none;padding:0 7cqw 6cqw;background:var(--deep)}
.poster .title,.poster h3{font-size:11cqw;line-height:1.05;margin:0 0 1cqw;color:var(--poster-title);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.poster .line-row{display:flex;align-items:center;gap:4cqw;min-height:17cqw}
.poster .line{flex:1;margin:0;font-size:max(11px,5.4cqw);line-height:1.3;color:var(--poster-line);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.poster .mode-icon{width:17cqw;height:17cqw;flex:none}
@container (max-width:200px){.poster .line{display:none}.poster .line-row{justify-content:flex-end;min-height:15cqw}}

/* Ribbon */
.ribbon{background:linear-gradient(100deg,var(--ribbon-a),var(--ribbon-b) 50%,var(--ribbon-c));padding:16px 20px;overflow:hidden;box-shadow:inset 0 1.5px 0 #FFFFFF59,inset 0 -1.5px 0 #00000010}
.ribbon p{display:flex;justify-content:center;align-items:center;gap:44px;margin:0;white-space:nowrap;font:700 21px/1.2 var(--round);color:var(--ink)}
.ribbon span{display:inline-flex;align-items:center;gap:10px}
.ribbon img{width:38px;height:38px}
.ribbon-star{font-size:26px;color:var(--accent-text)}

/* Waitlist */
.waitlist{padding-block:56px 8px}
.waitlist-card{display:grid;grid-template-columns:1fr 1fr;gap:20px 44px;align-items:center;padding:34px 38px;background:var(--surface);border-radius:30px;box-shadow:inset 0 0 0 1.5px var(--sunken),0 12px 28px var(--soft)}
.waitlist-copy h2{font-size:clamp(34px,3.8vw,46px);margin-bottom:10px}
.waitlist-copy p{margin:0;color:var(--ink-2)}
.waitlist-form label{display:block;font-size:15px;font-weight:600;margin-bottom:7px}
.waitlist-row{display:flex;gap:10px;align-items:stretch}
.waitlist-row input{flex:1;min-width:0;min-height:52px;font:inherit;font-size:17px;color:var(--ink);background:var(--bg);border:1.5px solid var(--ink-2);border-radius:14px;padding:12px 14px}
.waitlist-row input::placeholder{color:var(--ink-2);opacity:.75}
.waitlist-row input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.waitlist-row .button{flex-shrink:0}
.waitlist-status{margin:10px 0 0;min-height:1.4em;font-size:15px;font-weight:600;color:var(--stamp-yep)}
.waitlist-status.is-error{color:var(--accent-text)}
.waitlist-note{grid-column:1/-1;margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.waitlist-note a{text-decoration:underline;text-underline-offset:3px}
.waitlist-sent{display:none;padding:14px 18px;margin-bottom:12px;background:color-mix(in srgb,var(--f-matcha) 30%,var(--surface));border-radius:16px;font-weight:600}
.waitlist-sent:target,.waitlist-panel.is-done .waitlist-sent{display:block}
.waitlist-sent:target~.waitlist-form,.waitlist-panel.is-done .waitlist-form{display:none}
.waitlist-sent:focus-visible{outline-offset:2px}
.field-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* How it works */
.journey{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:48px}
.step-controls{display:grid;gap:10px}
.step-controls button{display:flex;text-align:left;align-items:center;gap:20px;border:0;background:none;padding:20px 22px;border-radius:24px;transition:background .2s}
.step-controls button[aria-selected=true]{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--sunken),0 8px 20px var(--soft)}
.step-number{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--sunken);color:var(--ink);font:700 18px/1 var(--round)}
[aria-selected=true] .step-number{background:var(--f-strawberry);color:var(--jelly-ink);box-shadow:inset 0 3px 3px #FFFFFF80,inset 0 -3px 3px #0000001F}
.step-controls strong{display:block;font:700 23px/1.25 var(--round);margin-bottom:4px}
.step-controls small{display:block;font-size:16px;line-height:1.4;color:var(--ink-2)}
.hand-note{font-size:17px;font-weight:600;color:var(--ink-2);text-align:center;margin:32px 0 0}
.hand-note span{color:var(--accent);font-size:22px}
.phone-stage{position:relative;text-align:center;padding:16px 0 28px}
.phone-orbit{position:absolute;width:430px;max-width:100%;aspect-ratio:1;border-radius:50%;left:50%;top:46%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--f-taro) 40%,transparent),color-mix(in srgb,var(--f-blueberry) 18%,transparent) 70%,transparent)}
.phone{position:relative;z-index:1;width:236px;margin:auto;border:7px solid var(--device);border-radius:38px;overflow:hidden;background:var(--bg);aspect-ratio:452/983;box-shadow:0 22px 40px var(--shadow),inset 0 0 0 1px #FFFFFF22}
.phone img{display:block;width:100%;height:100%;object-fit:cover}
.screen-caption{display:block;font-size:13px;color:var(--ink-2);margin-top:22px}
.floating-food{position:absolute;width:150px;bottom:12%;right:2%;transform:rotate(10deg);z-index:2;filter:drop-shadow(0 14px 14px var(--shadow))}

/* The crew: each way to eat on its own poster */
.crew-section{padding-block:96px}
.crew-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.crew-card{display:flex;flex-direction:column;border-radius:150px 150px 30px 30px;overflow:hidden;background:var(--deep);color:var(--poster-title);box-shadow:0 14px 28px var(--shadow)}
.crew-art{height:300px;display:flex;align-items:flex-end;justify-content:center;padding-top:28px;background:linear-gradient(to bottom,var(--top) 62%,var(--s1) 70%,var(--s2) 78%,var(--s3) 86%,var(--s4) 94%,var(--deep) 100%)}
.crew-art img{height:100%;width:auto;filter:drop-shadow(0 10px 10px #00000026)}
.crew-copy{padding:6px 26px 30px}
.crew-mode{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--poster-line)}
.crew-mode img{width:34px;height:34px}
.crew-card h3{font-size:32px;line-height:1.02;margin:10px 0 8px;color:var(--poster-title);text-wrap:balance}
.crew-card p{font-size:16px;line-height:1.45;color:var(--poster-line);margin:0}

/* Plan the week */
.week{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.week-copy>p:not(.eyebrow){color:var(--ink-2);max-width:470px}
.week-copy .text-link{display:inline-block;margin-top:6px}
.week-art{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;padding:34px 28px 30px;border-radius:40px;background:color-mix(in srgb,var(--surface) 70%,transparent);box-shadow:inset 0 0 0 1.5px var(--sunken),0 12px 28px var(--soft)}
.week-day{display:flex;flex-direction:column;align-items:center;gap:10px}
.week-day .day{font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.week-day .poster{width:100%}
.week-day:nth-child(1) .poster{transform:rotate(-3deg)}
.week-day:nth-child(2) .poster{transform:translateY(-10px)}
.week-day:nth-child(3) .poster{transform:rotate(3deg)}

/* Have a taste: the sample vote, as a little deck */
.taste{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.taste-copy>p:not(.eyebrow){max-width:420px;color:var(--ink-2)}
.demo{width:100%;max-width:370px;justify-self:center;padding:20px 22px 14px;background:var(--surface);border-radius:32px;box-shadow:inset 0 0 0 1.5px var(--sunken),0 16px 34px var(--soft);text-align:center}
.demo-top{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600;margin-bottom:14px}
.demo-top span:first-child{background:color-mix(in srgb,var(--f-matcha) 34%,var(--surface));padding:5px 13px;border-radius:30px}
.demo-top span:last-child{color:var(--ink-2)}
.demo-stage{position:relative}
.demo .poster{width:100%;border-radius:28px}
.demo .poster.enter{animation:card-in .2s ease-out backwards}
@keyframes card-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.demo-chef{position:absolute;left:3%;bottom:2%;width:30%;height:auto;filter:drop-shadow(0 8px 8px #00000030)}
.demo-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:5/7;padding:20px;border-radius:28px;background:var(--sunken)}
.demo-screen img{width:42%;height:auto;margin-bottom:14px}
.demo-screen h3{font-size:34px;line-height:1.02;margin:0 0 8px;color:var(--ink)}
.demo-screen p{margin:0;color:var(--ink-2);max-width:26ch}
.demo-note{margin:12px 0 0;font-size:15px;line-height:1.4;color:var(--ink-2)}
.votes{display:grid;grid-template-columns:repeat(2,1fr);justify-items:center;gap:22px;width:158px;margin:18px auto 4px}
.vote-btn{width:68px;height:68px;border-radius:50%;border:0;padding:0;background:none;position:relative}
.vote-btn svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 6px #74344933);transform-origin:50% 100%;transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
.vote-btn:hover svg{transform:translateY(-2px)}
.vote-btn:active svg{transform:scale(1.06,.92)}
.vote-btn .rim{fill:none}
.vote-btn.nope .fill{fill:var(--vote-nope)}
.vote-btn.nope .rim{stroke:var(--vote-nope-rim)}
.vote-btn.yep .fill{fill:var(--vote-yep)}
.vote-btn.yep .rim{stroke:var(--vote-yep-rim)}
.vote-btn .g0{stop-color:#FFFFFF;stop-opacity:var(--gloss)}
.vote-btn .g1{stop-color:#FFFFFF;stop-opacity:0}
.vote-btn .g2{stop-color:#000000;stop-opacity:var(--gloss-shade)}
.vote-btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--surface),0 0 0 7px var(--focus)}
.demo-next{width:100%;margin-top:16px}
.reset{border:0;background:none;text-decoration:underline;text-underline-offset:3px;color:var(--ink-2);font-size:14px;padding:12px 10px 4px;min-height:44px}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1.25fr;gap:72px}
.faq h2{font-size:clamp(42px,4.6vw,58px)}
.faq-items details{border-bottom:1.5px solid var(--sunken);padding:18px 0}
.faq-items details:first-child{padding-top:4px}
.faq summary{font-size:18px;font-weight:700;cursor:pointer;list-style:none;position:relative;padding-right:34px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:-4px;font-size:26px;font-weight:500;color:var(--accent-text)}
.faq details[open] summary::after{content:"−"}
.faq details p{font-size:16px;color:var(--ink-2);margin:12px 28px 0 0}
.faq details a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}

/* Closing */
.closing{text-align:center;padding:56px 0 64px;background:linear-gradient(120deg,var(--closing-a),var(--closing-b))}
.closing-chef{display:block;width:110px;margin:0 auto 6px;filter:drop-shadow(0 10px 10px #00000026)}
.closing p{font-size:19px;font-weight:600;margin:8px 0 10px}
.closing h2{font-size:clamp(48px,6vw,80px);margin-bottom:26px}
.closing .closing-note{font-size:14px;font-weight:500;margin-top:22px;color:var(--ink)}
/* the softer ink only reads on the dark gradient: on the light one it's under 4.5:1 */
@media (prefers-color-scheme:dark){.closing .closing-note{color:var(--ink-2)}}

/* Footer */
.footer{display:flex;align-items:center;gap:30px;padding-block:32px;font-size:14px}
.footer .brand-wordmark{width:130px}
.footer nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:22px}
.footer nav a{color:var(--ink-2)}
.footer nav a:hover{color:var(--ink)}

/* Motion */
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
 .hero-chef{animation:chef-in .9s cubic-bezier(.3,1.4,.5,1) both}
 .hero-scene .poster{animation:deal .7s ease-out both}
 .hero-scene .fan-one{--r:-8deg;animation-delay:.1s}.hero-scene .fan-two{--r:0deg;animation-delay:.2s}.hero-scene .fan-three{--r:8deg;animation-delay:.3s}
 .bubble-two{animation:pop .5s .9s cubic-bezier(.3,1.6,.5,1) both}
 @keyframes chef-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
 @keyframes deal{from{opacity:0;transform:translateY(30px) rotate(0)}to{opacity:1;transform:rotate(var(--r))}}
 @keyframes pop{from{opacity:0;transform:scale(.6) rotate(4deg)}to{opacity:1;transform:rotate(4deg)}}}

/* Tablet */
@media (max-width:1000px){
 .wrap{padding-inline:28px}
 .hero{grid-template-columns:1fr;gap:12px}
 .hero-copy{max-width:640px}
 .hero-scene{justify-self:center;max-width:600px}
 .journey{gap:28px}
 .crew-art{height:250px}
 .crew-card h3{font-size:28px}
 .crew-copy{padding:6px 20px 26px}
 .week{grid-template-columns:1fr;gap:40px}
 .week-art{max-width:620px;width:100%;margin-inline:auto}
 .taste{gap:40px}
 .ribbon p{gap:26px;font-size:19px}}

/* Phone */
@media (max-width:700px){
 .wrap{padding-inline:20px}
 .nav{height:76px}
 .brand-wordmark{width:132px}
 .nav nav>a:not(.nav-pill){display:none}
 .nav-pill{font-size:14px;padding:8px 14px;min-height:42px;gap:8px}
 .hero{padding-block:4px 40px}
 .product-identity{font-size:14px;margin-bottom:18px}
 .product-identity img{width:48px;height:48px}
 h1{font-size:clamp(56px,17vw,80px)}
 h2{font-size:clamp(38px,11vw,48px)}
 .hero-description{font-size:18px}
 .hero-actions .button{width:100%}
 .hero-scene{margin-top:12px}
 .bubble{font-size:15px;padding:8px 13px;border-radius:18px}
 .bubble::after{width:12px;height:12px}
 .bubble-one::after{left:24px;bottom:-5px}
 .bubble-two::after{left:-5px;top:calc(50% - 6px)}
 .hero-scene .poster{border-radius:14px;box-shadow:0 10px 20px var(--shadow)}
 .fan-three{left:64%;transform:rotate(7deg)}
 .ribbon{padding:12px 0}
 /* sized to the screen, so all three fit on a 320 px phone */
 .ribbon p{font-size:clamp(12px,3.9vw,15px);gap:clamp(8px,3vw,16px);width:max-content;position:relative;left:50%;transform:translateX(-50%)}
 .ribbon span{gap:6px}
 .ribbon img{width:clamp(20px,6.5vw,26px);height:clamp(20px,6.5vw,26px)}
 .ribbon p>span:nth-child(4){display:none}
 .section{padding-block:64px}
 .section-heading>p:last-child{font-size:17px}
 .waitlist{padding-block:36px 0}
 .waitlist-card{grid-template-columns:1fr;padding:24px 20px;border-radius:26px}
 .journey{grid-template-columns:1fr;gap:12px;margin-top:28px}
 .step-controls{gap:4px}
 .step-controls button{padding:14px;gap:14px}
 .step-controls strong{font-size:20px}
 .step-controls small{font-size:15px}
 .hand-note{display:none}
 .phone-stage{margin-top:12px}
 .phone{width:220px}
 .phone-orbit{width:330px}
 .floating-food{width:104px;right:0;bottom:16%}
 .crew-section{padding-block:64px}
 .crew-grid{grid-template-columns:1fr;max-width:380px;margin:32px auto 0;gap:22px}
 .crew-card{border-radius:130px 130px 28px 28px}
 .crew-art{height:230px}
 .crew-card h3{font-size:30px}
 .week-art{padding:24px 14px 22px;gap:8px;border-radius:30px}
 .week-day .day{font-size:13px}
 .week-day .poster{border-radius:14px}
 .taste{grid-template-columns:1fr;gap:28px}
 .taste-copy{text-align:center}
 .taste-copy>p:not(.eyebrow){margin-inline:auto}
 .demo{padding:16px 16px 10px;border-radius:28px}
 .faq{grid-template-columns:1fr;gap:16px}
 .faq summary{font-size:17px}
 .closing{padding:44px 0 50px}
 .footer{flex-wrap:wrap;gap:16px;padding-block:26px}
 .footer nav{width:100%;margin-left:0;gap:20px}}
@media (max-width:520px){.waitlist-row{flex-direction:column}.waitlist-row .button{width:100%}}
@media (max-width:360px){.wrap{padding-inline:16px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}