/* ============================================================
   PROMPTBITE — section styles
   ============================================================ */

/* ============================================================
   PITCH / AI (§5) — "Just cook."
   ============================================================ */
.pitch{ position:relative; background:#000; }
.pitch-track{ position:relative; height:460vh; }
.pitch-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; place-items:center; background:#000;
}

/* breathing tri-color bloom around the perimeter */
.pitch-bloom{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.85;
  animation:bloomBreathe 5s ease-in-out infinite, bloomColor 12s linear infinite;
}
@keyframes bloomBreathe{ 0%,100%{ opacity:.6; } 50%{ opacity:.96; } }
@keyframes bloomColor{
  0%,100%{ box-shadow: inset 0 0 55px 0 rgba(14,163,113,.62),  inset 0 0 120px 12px rgba(14,163,113,.30); }
  25%    { box-shadow: inset 0 0 55px 0 rgba(230,210,74,.62),  inset 0 0 120px 12px rgba(230,210,74,.30); }
  50%    { box-shadow: inset 0 0 55px 0 rgba(230,150,42,.62),  inset 0 0 120px 12px rgba(230,150,42,.30); }
  75%    { box-shadow: inset 0 0 55px 0 rgba(220,38,38,.62),   inset 0 0 120px 12px rgba(220,38,38,.30); }
}
.pitch-bloom.generating{ filter:brightness(1.3) saturate(1.15); }

/* the device: full-bleed → iPhone (JS drives geometry) */
.pitch-device{
  position:relative; z-index:5;
  width:100vw; height:100vh; padding:0; border-radius:0;
  background:linear-gradient(150deg,#26282d,#0a0b0d 62%);
  will-change:width,height,padding,border-radius,transform;
}
.pd-notch{
  position:absolute; top:calc(var(--pad,0px) + 9px); left:50%; transform:translateX(-50%);
  width:108px; height:28px; background:#000; border-radius:999px; opacity:0; z-index:40;
}
.pd-screen{
  position:relative; width:100%; height:100%; border-radius:inherit; overflow:hidden;
  background:var(--app-canvas);
}
.pd-scan, .pd-pg{ position:absolute; inset:0; }

/* ---- SCAN layer ---- */
.pd-scan{ z-index:2; }
.pd-fridge{ position:absolute; inset:0; width:100%; height:100%; }
video.pd-fridge{ object-fit:cover; }
.scan-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 26%,transparent 58%,rgba(0,0,0,.7)); }
.reticle{ position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:min(58%,420px); aspect-ratio:1; transition:opacity .45s ease; }
.reticle .c{ position:absolute; width:30px; height:30px; border:3px solid #fff; }
.reticle .tl{ top:0; left:0; border-right:0; border-bottom:0; border-radius:12px 0 0 0; }
.reticle .tr{ top:0; right:0; border-left:0; border-bottom:0; border-radius:0 12px 0 0; }
.reticle .bl{ bottom:0; left:0; border-right:0; border-top:0; border-radius:0 0 0 12px; }
.reticle .br{ bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 12px 0; }
.reticle .scanline{
  position:absolute; left:6%; right:6%; height:2px; top:0;
  background:linear-gradient(90deg,transparent,var(--savings-bright),transparent);
  box-shadow:0 0 14px var(--savings-bright);
  animation:scansweep 2.6s var(--ease-ios) infinite;
}
@keyframes scansweep{ 0%{ top:4%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:96%; opacity:0; } }
.det{
  position:absolute; z-index:5; display:flex; align-items:center; gap:7px;
  padding:7px 11px; border-radius:var(--r-pill);
  background:rgba(8,8,10,.62); backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);
  font-size:13px; opacity:0;
}
.dets-on .det{ animation:detpop .5s var(--ease-out) forwards; }
.det b{ font-weight:600; color:#fff; }
.det i{ font-style:normal; font-size:11px; font-weight:700; color:var(--savings-bright); text-transform:uppercase; letter-spacing:.05em; }
.det i.med{ color:var(--streak-gold); }
.det-1{ top:24%; left:10%; animation-delay:.5s; }
.det-2{ top:38%; right:9%; animation-delay:.9s; }
.det-3{ bottom:30%; left:13%; animation-delay:1.3s; }
.det-4{ bottom:22%; right:12%; animation-delay:1.7s; }
@keyframes detpop{ from{ opacity:0; transform:translateY(8px) scale(.94); } to{ opacity:1; transform:none; } }
.scan-tag{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:6;
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  transition:opacity .45s ease;
  padding:9px 16px; border-radius:var(--r-pill);
  background:rgba(8,8,10,.6); backdrop-filter:blur(10px); border:1px solid var(--glass-border);
  font-size:13px; font-weight:600; color:#fff;
}
.scan-tag .orb-glyph{ width:18px; height:18px; }

/* ---- PLAYGROUND replica (§11.1) ---- */
.pd-pg{ z-index:3; background:var(--app-canvas); opacity:0; overflow:hidden; }
/* content is authored at a fixed design width and scaled to the actual phone screen (JS) */
.pg-inner{ position:absolute; top:0; left:0; width:310px; transform-origin:top left; display:flex; flex-direction:column; }
.pd-pg .sb{ color:#fff; }
.pg-top{ display:flex; align-items:center; gap:8px; padding:6px 16px 12px; }
.pg-hist{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--glass-fill); border:1px solid var(--glass-border); display:grid; place-items:center; color:#fff; }
.pg-hist svg{ width:16px; height:16px; }
.pg-wm{ font-size:18px; font-weight:800; letter-spacing:-.03em; color:#fff; }
.pg-wm i{ color:var(--savings-bright); font-style:normal; }
.pg-day{ font-size:12px; font-weight:800; color:var(--streak-gold); background:rgba(255,217,133,.16); padding:5px 10px; border-radius:var(--r-pill); margin-left:2px; }
.pg-ic{ margin-left:auto; color:var(--ink-60); }
.pg-ic svg{ width:19px; height:19px; }
.pg-av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,#3a3d44,#16171a); border:1px solid var(--glass-border); }
.pg-greet{ padding:6px 16px 16px; }
.pg-eye{ font-size:12.5px; font-weight:700; letter-spacing:.01em; }
.pg-eye .g1{ color:var(--savings-bright); } .pg-eye .g2{ color:var(--streak-gold); }
.pg-h{ font-size:30px; font-weight:800; letter-spacing:-.02em; margin-top:5px; line-height:1.05; }
.pg-quick{ margin:0 14px; background:rgba(255,255,255,.06); border:1px solid var(--glass-border); border-radius:var(--r-lg); padding:13px 13px 14px; }
.pg-qh{ display:flex; align-items:center; }
.pg-qt{ font-size:14.5px; font-weight:700; color:#fff; }
.pg-qs{ font-size:11.5px; color:var(--ink-60); margin-top:2px; }
.pg-chev{ margin-left:auto; color:var(--ink-40); font-size:22px; }
.pg-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.pg-th{ position:relative; aspect-ratio:3/4; border-radius:11px; overflow:hidden; background:#1a1a1c; }
.pg-th img{ width:100%; height:100%; object-fit:cover; }
.pg-th span{ position:absolute; left:5px; bottom:5px; font-size:9.5px; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.pg-vision{ display:flex; align-items:center; gap:12px; margin:14px; padding:13px; background:rgba(255,255,255,.05); border:1px solid var(--glass-border); border-radius:var(--r-lg); }
.pg-vtile{ width:52px; height:52px; flex:none; border-radius:14px; display:grid; place-items:center; }
.pg-vtile svg{ width:24px; height:24px; }
.pg-vt{ font-size:15px; font-weight:700; color:#fff; }
.pg-vs{ font-size:12px; color:var(--ink-60); margin-top:2px; line-height:1.35; }
.pg-chips{ display:flex; gap:7px; padding:0 14px; margin-bottom:12px; overflow:hidden; }
.pg-chip{ display:inline-flex; align-items:center; gap:6px; flex:none; height:34px; padding:0 13px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); font-size:12.5px; font-weight:600; color:#fff; }
.pg-chip.vis{ background:linear-gradient(120deg,rgba(220,38,38,.22),rgba(230,192,120,.18),rgba(14,163,113,.22)); }
.pg-rcard{ margin:14px 14px 0; background:rgba(255,255,255,.05); border:1px solid var(--glass-border); border-radius:var(--r-lg); overflow:hidden; opacity:0; transform:translateY(14px); }
.pg-rcard img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.pg-rc-b{ padding:12px 13px 13px; }
.pg-rc-t{ font-size:15px; font-weight:700; color:#fff; }
.pg-rc-c{ display:flex; align-items:baseline; gap:8px; margin-top:7px; }
.pg-rc-c .ck{ font-size:15px; font-weight:800; color:#fff; }
.pg-rc-c .dl{ font-size:11.5px; color:var(--ink-40); text-decoration:line-through; }
.pg-rc-m{ display:flex; align-items:center; gap:8px; margin-top:9px; font-size:11.5px; color:var(--ink-60); }
.pg-spacer{ flex:1; min-height:10px; }
.pg-composer{ display:flex; align-items:center; gap:8px; margin:0 14px 12px; }
.pg-dock{ display:flex; gap:7px; align-items:center; height:48px; padding:0 11px; border-radius:var(--r-pill); background:var(--glass-fill); border:1px solid var(--glass-border); color:var(--ink-60); }
.pg-dock svg{ width:18px; height:18px; }
.pg-cap{ flex:1; display:flex; align-items:center; gap:9px; height:48px; padding:0 14px; border-radius:var(--r-pill); background:var(--glass-fill-2); border:1px solid var(--glass-border-strong); color:var(--ink-60); font-size:14px; font-weight:600; }
.pg-cap .orb-glyph{ width:22px; height:22px; }
.pg-mic{ width:40px; height:40px; flex:none; border-radius:50%; background:var(--glass-fill); display:grid; place-items:center; color:#fff; }
.pg-mic svg{ width:18px; height:18px; }
.pg-send{ width:40px; height:40px; flex:none; border-radius:50%; background:var(--savings); display:grid; place-items:center; }
.pg-send svg{ width:18px; height:18px; }
.pg-glow{ position:absolute; left:0; right:0; bottom:0; height:140px; pointer-events:none; background:radial-gradient(80% 100% at 50% 130%, rgba(14,163,113,.5), transparent 70%); }

/* staged captions + payoff */
.pitch-cap{ position:absolute; left:0; right:0; bottom:8vh; z-index:20; text-align:center; padding:0 24px; pointer-events:none; }
.pc-eye{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60); transition:opacity .45s ease; }
.pc-eye .orb-glyph{ width:15px; height:15px; }
.pc-line{ font-size:clamp(20px,2.4vw,34px); font-weight:800; letter-spacing:-.025em; color:#fff; margin-top:12px; text-wrap:balance; }
.pitch-scrim{ position:absolute; inset:0; z-index:25; background:#000; opacity:0; pointer-events:none; }
.pitch-payoff{
  position:absolute; inset:0; z-index:30; display:grid; place-items:center;
  font-size:clamp(48px,8.5vw,118px); font-weight:900; letter-spacing:-.04em; color:#fff;
  opacity:0; pointer-events:none; text-shadow:0 4px 80px rgba(14,163,113,.4);
  text-align:center; text-wrap:balance; line-height:.98; padding:0 6vw;
}

/* ============================================================
   CART (§6)
   ============================================================ */
.cart{ background:#000; }
.cart-hero.reveal{ transform:translateX(64px); }
.cart-hero.reveal.in{ transform:none; }
.cart-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.cart-copy .headline{ margin-top:20px; }
.cart-copy .lede{ margin-top:24px; max-width:30em; }
.partners{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; align-items:center; }
.partner{ display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:700; letter-spacing:-.01em; padding:9px 15px; border-radius:var(--r-pill); border:1px solid var(--glass-border); }
.partner.live{ color:#fff; background:var(--glass-fill-2); border-color:var(--glass-border-strong); }
.partner.soon{ color:var(--ink-40); }
.partner.soon i{ font-style:normal; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-40); border:1px solid var(--glass-border); padding:2px 6px; border-radius:var(--r-pill); }
.partners-note{ margin-top:14px; font-size:12px; color:var(--ink-40); }
.cart-hero{ position:relative; display:grid; place-items:center; min-height:380px; }
.cart-bag{ width:100%; height:min(72vh,560px); }
.cart-float{
  position:absolute; right:-6px; bottom:24px; width:236px; z-index:3;
  background:rgba(14,15,18,.72); backdrop-filter:blur(20px); border:1px solid var(--glass-border-strong);
  border-radius:var(--r-lg); padding:16px; box-shadow:0 30px 70px -24px rgba(0,0,0,.8);
}
.cf-head{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#fff; }
.cf-dot{ width:8px; height:8px; border-radius:50%; background:var(--savings); box-shadow:0 0 10px var(--savings); }
.cf-row{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:13px; color:var(--ink-60); }
.cf-row b{ color:#fff; font-weight:700; }
.cf-cta{ width:100%; margin-top:16px; height:42px; border-radius:var(--r-pill); background:var(--savings); color:#fff; font-size:14px; font-weight:700; }
.cart-stats{ margin-top:72px; }

/* ============================================================
   GUIDED COOKING (§7) — replica §11.2
   ============================================================ */
.cooking-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.cooking-copy .headline{ margin-top:20px; }
.cooking-copy .lede{ margin-top:24px; max-width:28em; }
.cook-points{ list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.cook-points li{ display:flex; align-items:center; gap:12px; font-size:16px; color:var(--ink-60); }
.cp-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.cp-dot.grn{ background:var(--savings); box-shadow:0 0 10px rgba(14,163,113,.7); }
.cooking{ padding:0; background:#000; }
.cooking-stage{ position:relative; display:block; width:100%; aspect-ratio:2752/1536; min-height:0; padding:0; overflow:hidden; border-radius:0; }
.cook-kitchen{ position:absolute; inset:0; width:100%; height:100%; object-position:50% 50%; filter:brightness(.66) saturate(.92); }
video.cook-kitchen{ object-fit:cover; }
.cook-kitchen::after{ content:""; }
.cook-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.58) 24%, rgba(0,0,0,.14) 47%, transparent 62%); }
.cooking-copy{ position:absolute; left:0; top:0; z-index:4; max-width:560px;
  padding:clamp(44px,6.5vw,112px) clamp(24px,5vw,84px); }
.cook-phone{ position:absolute; left:64%; top:59.5%; z-index:3; width:300px;
  background:transparent; padding:0; border-radius:34px; box-shadow:none;
  transform:translate(-50%,-50%) rotate(-2deg) scale(var(--cook-scale,.55)); transform-origin:center center; }
/* green audio-mode glow (§11.2) */
.cook-screen{ box-shadow:inset 0 0 64px rgba(14,163,113,.5); }
.cook-screen{ background:#070707; aspect-ratio:auto; height:488px; border-radius:34px; }
.cook-top{ display:flex; align-items:center; gap:10px; padding:6px 16px 12px; }
.cook-back{ font-size:24px; color:var(--ink-60); line-height:1; }
.cook-title{ font-size:16px; font-weight:700; color:#fff; flex:1; }
.cook-audio{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--savings-bright); background:rgba(14,163,113,.16); padding:5px 9px; border-radius:var(--r-pill); }
.ca-wave{ display:inline-flex; align-items:flex-end; gap:2px; height:11px; }
.ca-wave i{ width:2px; background:var(--savings-bright); border-radius:2px; animation:cawave 1s ease-in-out infinite; }
.ca-wave i:nth-child(1){ height:5px; animation-delay:0s; } .ca-wave i:nth-child(2){ height:10px; animation-delay:.15s; } .ca-wave i:nth-child(3){ height:7px; animation-delay:.3s; } .ca-wave i:nth-child(4){ height:9px; animation-delay:.45s; }
@keyframes cawave{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1); } }
.cook-steps{ padding:6px 16px 0; display:flex; flex-direction:column; position:relative; }
.cstep{ display:flex; gap:12px; padding:8px 0; position:relative; }
.cstep .cs-node{ width:22px; height:22px; flex:none; border-radius:50%; border:2px solid var(--glass-border-strong); display:grid; place-items:center; font-size:11px; color:var(--savings-bright); margin-top:1px; z-index:2; background:#070707; }
.cstep.done .cs-node{ border-color:var(--savings); color:var(--savings); }
.cstep.current .cs-node{ border-color:var(--savings-bright); box-shadow:0 0 0 4px rgba(14,163,113,.2); }
.cook-steps::before{ content:""; position:absolute; left:26px; top:14px; bottom:48px; width:2px; background:var(--glass-border); }
.cstep .cs-body{ font-size:14px; color:var(--ink-40); line-height:1.4; }
.cstep.done .cs-body{ color:var(--ink-40); }
.cstep.done .cs-body b{ color:var(--ink-60); font-weight:600; }
.cstep.current .cs-body{ color:#fff; }
.cs-k{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--savings-bright); margin-bottom:5px; }
.cs-line{ font-size:21px; font-weight:500; line-height:1.28; letter-spacing:-.01em; }
.cs-line b{ font-weight:900; color:#fff; }
.cs-timer{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; height:38px; padding:0 15px; border-radius:var(--r-pill); background:rgba(14,163,113,.14); border:1px solid rgba(14,163,113,.4); color:var(--savings-bright); font-size:14px; font-weight:800; animation:timerpulse 2s ease-in-out infinite; }
.cs-timer svg{ width:17px; height:17px; }
@keyframes timerpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(14,163,113,.3); } 50%{ box-shadow:0 0 0 6px rgba(14,163,113,0); } }
.cstep.next .cs-body{ font-size:13px; }
.cook-qa{ margin:10px 16px 0; }
.qa-q{ align-self:flex-end; margin-left:auto; width:fit-content; max-width:80%; background:#fff; color:#000; font-size:12.5px; font-weight:500; padding:9px 13px; border-radius:15px 15px 4px 15px; margin-bottom:8px; }
.qa-a{ display:flex; gap:8px; font-size:12.5px; color:var(--ink-60); background:var(--glass-fill); border:1px solid var(--glass-border); padding:10px 12px; border-radius:4px 15px 15px 15px; line-height:1.4; }
.qa-a .orb-glyph{ width:18px; height:18px; flex:none; }
.cook-bar{ margin-top:auto; display:flex; align-items:center; gap:9px; padding:12px 14px 16px; }
.cb-field{ flex:1; height:42px; display:flex; align-items:center; padding:0 15px; border-radius:var(--r-pill); background:var(--glass-fill); border:1px solid var(--glass-border); color:var(--ink-40); font-size:13px; }
.cb-ic{ width:42px; height:42px; flex:none; border-radius:50%; background:var(--glass-fill); display:grid; place-items:center; color:var(--ink-60); }
.cb-ic svg{ width:18px; height:18px; }

/* ============================================================
   PANTRY (§8)
   ============================================================ */
.pantry-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.pantry-copy .headline{ margin-top:20px; }
.pantry-copy .lede{ margin-top:24px; max-width:28em; }
.pantry-stage{ position:relative; display:grid; place-items:center; min-height:520px; }
.receipt{
  position:absolute; left:0; top:8px; width:212px; z-index:3; transform:rotate(-5deg);
  background:#f3f1ea; color:#1a1a1a; border-radius:8px; padding:18px 18px 22px;
  font-family:"Inter",monospace; box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
}
.rc-top{ text-align:center; font-size:13px; font-weight:800; letter-spacing:.12em; padding-bottom:12px; margin-bottom:10px; border-bottom:1.5px dashed rgba(0,0,0,.3); }
.rc-line{ display:flex; justify-content:space-between; font-size:12px; font-weight:500; padding:4px 0; }
.rc-tot{ display:flex; justify-content:space-between; font-size:13px; font-weight:800; padding-top:10px; margin-top:8px; border-top:1.5px dashed rgba(0,0,0,.3); }
.rc-scan{ position:absolute; left:0; right:0; height:30px; background:linear-gradient(180deg,transparent,rgba(14,163,113,.5),transparent); top:0; animation:rcscan 3s ease-in-out infinite; }
@keyframes rcscan{ 0%{ top:-10%; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ top:100%; opacity:0; } }
.pantry-list{ width:330px; margin-left:120px; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:var(--r-lg); padding:8px; box-shadow:0 30px 70px -28px #000; }
.pl-head{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 12px 8px; }
.pl-head span:first-child{ font-size:16px; font-weight:800; color:#fff; }
.pl-sub{ font-size:12px; color:var(--ink-40); }
.pl-sec{ font-size:11px; font-weight:700; color:var(--ink-40); text-transform:uppercase; letter-spacing:.14em; margin:12px 12px 2px; }
.pl-row{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-top:1px solid var(--glass-border); }
.pl-sec + .pl-row{ border-top:none; }
.pl-glyph{ width:40px; height:40px; flex:none; border-radius:12px; background:var(--glass-fill); display:grid; place-items:center; font-size:22px; line-height:1; }
.pl-text{ flex:1; min-width:0; }
.pl-n{ font-size:15px; font-weight:700; color:#fff; letter-spacing:-.005em; }
.pl-meta{ font-size:12.5px; font-weight:500; color:var(--ink-40); margin-top:2px; }
.pl-right{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; flex:none; }
.pl-q{ font-size:12.5px; font-weight:700; color:#fff; letter-spacing:-.0125em; white-space:nowrap; }
.pl-q.low{ color:#F0A93C; }
.pl-ago{ font-size:11px; font-weight:500; color:var(--ink-40); white-space:nowrap; }
.pl-badge{ font-size:11px; font-weight:700; letter-spacing:-.01em; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.pl-badge.info{ color:var(--ink-60); background:var(--glass-fill); }
.pl-badge.warn{ color:#F0A93C; background:rgba(217,119,6,.18); }
.pl-badge.critical{ color:#FF7A6B; background:rgba(220,38,38,.18); }
.pl-rescue{ display:flex; align-items:center; gap:10px; padding:13px 12px; margin-top:6px; border-top:1px solid var(--glass-border); background:rgba(14,163,113,.06); border-radius:0 0 14px 14px; }
.pl-rescue-t{ font-size:12.5px; color:var(--ink-60); margin-left:auto; text-align:right; }
.pl-rescue-t b{ font-weight:700; }
.pl-row[data-fly]{ opacity:0; transform:translateX(-18px); }
.pl-row.flew{ opacity:1; transform:none; transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }

/* ============================================================
   SAVINGS (§9)
   ============================================================ */
.savings .section-head{ margin-bottom:48px; }
.calc{ max-width:760px; margin:0 auto; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:var(--r-xl); padding:clamp(28px,4vw,52px); text-align:center; }
.calc-q{ font-size:clamp(18px,2vw,24px); font-weight:600; color:#fff; }
.calc-slider{ max-width:520px; margin:28px auto 0; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:rgba(255,255,255,.12); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:var(--savings); cursor:pointer; border:4px solid #000; box-shadow:0 0 0 1px var(--savings), 0 4px 14px rgba(14,163,113,.5); }
input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--savings); cursor:pointer; border:4px solid #000; }
.calc-ticks{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:13px; color:var(--ink-40); }
.calc-ticks span:nth-child(2){ font-size:15px; font-weight:700; color:#fff; }
.calc-out{ margin-top:40px; }
.calc-eye{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-40); }
.calc-big{ font-size:clamp(60px,10vw,116px); font-weight:900; letter-spacing:-.04em; line-height:1; color:var(--savings); margin:10px 0 18px; text-shadow:0 0 60px rgba(14,163,113,.35); }
.calc-toggle{ display:inline-flex; gap:4px; padding:4px; background:rgba(255,255,255,.06); border:1px solid var(--glass-border); border-radius:var(--r-pill); }
.calc-toggle button{ height:36px; padding:0 18px; border-radius:var(--r-pill); font-size:14px; font-weight:600; color:var(--ink-60); transition:.2s; }
.calc-toggle button.on{ background:#fff; color:#000; }
.calc-assume{ margin-top:26px; font-size:13.5px; color:var(--ink-40); max-width:42em; margin-inline:auto; line-height:1.5; }
.savings-bridge{ max-width:760px; margin:40px auto 0; text-align:center; }
.sb-line{ font-size:17px; color:var(--ink-60); }
.lifetime-card{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-top:20px; padding:22px 26px; background:linear-gradient(120deg,rgba(14,163,113,.14),rgba(14,163,113,.04)); border:1px solid rgba(14,163,113,.3); border-radius:var(--r-lg); text-align:left; }
.lt-eye{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--savings-bright); }
.lt-tag{ display:inline-block; margin-left:8px; padding:2px 7px; font-size:9.5px; font-weight:700; letter-spacing:.06em; color:var(--ink-60); border:1px solid var(--glass-border); border-radius:var(--r-pill); vertical-align:middle; }
.lt-l{ text-align:left; }
.lt-num{ font-size:clamp(32px,4vw,46px); font-weight:900; letter-spacing:-.03em; color:#fff; margin-top:6px; }
.lt-note{ font-size:11.5px; line-height:1.45; color:var(--ink-40); margin-top:10px; max-width:34em; text-align:left; }
.lt-streak{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.lt-streak-t{ font-size:12px; color:var(--ink-40); }

/* ============================================================
   PRICING
   ============================================================ */
.pricing .section-head{ margin-bottom:52px; }
.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:860px; margin:0 auto; }
.plan{ position:relative; background:rgba(255,255,255,.03); border:1px solid var(--glass-border); border-radius:var(--r-xl); padding:38px 34px 36px; display:flex; flex-direction:column; }
.plan.pro{ background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); border-color:var(--glass-border-strong); }
.pl-name{ font-size:15px; font-weight:700; color:#fff; }
.pl-name i{ font-style:normal; color:var(--savings-bright); }
.pl-name i.plus{ color:var(--streak-gold); }
.pl-price{ display:flex; align-items:baseline; gap:6px; margin-top:16px; }
.pl-price b{ font-size:48px; font-weight:900; letter-spacing:-.03em; color:#fff; }
.pl-price span{ font-size:15px; color:var(--ink-60); }
.pl-note{ margin-top:10px; font-size:14px; color:var(--ink-60); }
.plan ul{ list-style:none; margin:28px 0 30px; display:flex; flex-direction:column; gap:15px; }
.plan li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-60); line-height:1.4; }
.plan li svg{ width:19px; height:19px; flex:none; margin-top:1px; color:var(--savings); }
.annual-pill{ position:absolute; top:24px; right:24px; font-size:12px; font-weight:700; color:var(--savings-bright); background:rgba(14,163,113,.16); padding:6px 12px; border-radius:var(--r-pill); }
.plan .btn{ margin-top:auto; width:100%; }

/* ============================================================
   FAQ
   ============================================================ */
.faq .section-head{ margin-bottom:44px; }
.faq-list{ max-width:780px; margin:0 auto; border-top:1px solid var(--glass-border); }
.faq-item{ border-bottom:1px solid var(--glass-border); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 4px; text-align:left; font-size:19px; font-weight:700; letter-spacing:-.015em; color:#fff; }
.fq-ic{ flex:none; width:24px; height:24px; position:relative; }
.fq-ic::before,.fq-ic::after{ content:""; position:absolute; background:var(--ink-60); border-radius:2px; }
.fq-ic::before{ top:11px; left:3px; right:3px; height:2.4px; }
.fq-ic::after{ left:11px; top:3px; bottom:3px; width:2.4px; transition:transform .3s; }
.faq-item.open .fq-ic::after{ transform:scaleY(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .35s var(--ease-out); }
.faq-a-in{ padding:0 4px 28px; color:var(--ink-60); font-size:16px; line-height:1.6; max-width:64ch; }

/* ============================================================
   DOWNLOAD (§10)
   ============================================================ */
.dl-card{ position:relative; overflow:hidden; background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015)); border:1px solid var(--glass-border); border-radius:var(--r-xl); padding:clamp(40px,6vw,76px); display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
.dl-glow{ position:absolute; width:680px; height:680px; left:-10%; top:-60%; background:radial-gradient(circle, rgba(14,163,113,.22), transparent 62%); pointer-events:none; }
.dl-copy{ position:relative; z-index:2; }
.dl-copy .lede{ margin-top:22px; max-width:26em; }
.dl-actions{ display:flex; align-items:center; gap:24px; margin-top:32px; flex-wrap:wrap; }
.dl-qr{ display:flex; align-items:center; gap:12px; }
.qr{ position:relative; width:64px; height:64px; border-radius:12px; background:#fff; background-image:repeating-linear-gradient(#000 0 3px, transparent 3px 6px), repeating-linear-gradient(90deg,#000 0 3px, transparent 3px 6px); background-size:6px 6px; }
.qr .qf{ position:absolute; width:18px; height:18px; background:#fff; border:4px solid #000; border-radius:3px; }
.qr .qf.tl{ top:4px; left:4px; } .qr .qf.tr{ top:4px; right:4px; } .qr .qf.bl{ bottom:4px; left:4px; }
.dl-qr-t{ font-size:13px; color:var(--ink-60); max-width:7em; line-height:1.3; }
.waitlist{ position:relative; max-width:460px; margin-top:34px; }
.wl-label{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; color:var(--ink-60); margin-bottom:12px; }
.wl-row{ display:flex; gap:10px; }
.wl-input{ flex:1; height:54px; padding:0 18px; border-radius:var(--r-md); background:var(--glass-fill); border:1.5px solid var(--glass-border-strong); color:#fff; font-family:inherit; font-size:16px; outline:none; transition:border-color .18s, background .18s; }
.wl-input::placeholder{ color:var(--ink-40); }
.wl-input:focus{ border-color:var(--savings); background:rgba(255,255,255,.1); }
.wl-submit{ flex:none; height:54px; }
.waitlist.invalid .wl-input{ border-color:#ff6b6b; }
.wl-msg{ min-height:20px; margin-top:12px; font-size:14px; font-weight:600; opacity:0; transition:opacity .25s; }
.wl-msg.show{ opacity:1; } .wl-msg.ok{ color:var(--savings-bright); } .wl-msg.err{ color:#ff8a8a; }
.waitlist.done .wl-row, .waitlist.done .wl-label{ display:none; }
.dl-phone-wrap{ position:relative; z-index:2; display:grid; place-items:center; }
.dl-phone{ width:280px; }
.dl-phone .phone-screen{ background:var(--app-canvas); }
.dl-phone .phone-screen.cc-screen{ background:#fff; overflow:hidden; }
.dl-app{ position:relative; }

/* ---- Cooking Complete celebration (Session 32 port) ---- */
.cc-screen{ --cc-ink:#0a0a0a; --cc-ink5:#707070; cursor:pointer; }
.cc-screen .sb{ color:#fff; position:relative; z-index:40; }
.cc-wash{ position:absolute; inset:0; z-index:0; opacity:0; transform:scale(1.06); transform-origin:50% 30%; transition:opacity .76s cubic-bezier(.22,1,.36,1), transform .76s cubic-bezier(.22,1,.36,1); }
.cc-screen.play .cc-wash{ opacity:1; transform:scale(1); }
.cc-photo{ position:absolute; top:0; left:0; right:0; height:300px; background-size:cover; background-position:center; filter:blur(26px); transform:scale(1.25); transform-origin:50% 40%; }
.cc-scrim{ position:absolute; top:0; left:0; right:0; height:300px; background:linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,.34) 45%, #fff 100%); }
.cc-fill{ position:absolute; top:300px; left:0; right:0; bottom:0; background:#fff; }
.cc-flash{ position:absolute; top:40px; left:50%; transform:translateX(-50%) scale(.5); width:200px; height:150px; border-radius:50%; background:#fff; filter:blur(40px); mix-blend-mode:soft-light; opacity:0; z-index:6; pointer-events:none; }
.cc-flash.go{ animation:ccFlash .85s ease-out forwards; }
@keyframes ccFlash{ 0%{ opacity:.55; transform:translateX(-50%) scale(.5); } 100%{ opacity:0; transform:translateX(-50%) scale(1.3); } }
.cc-spark{ position:absolute; inset:0; z-index:14; pointer-events:none; }
.cc-content{ position:absolute; inset:0; z-index:12; display:flex; flex-direction:column; align-items:center; padding-top:56px; }
.cc-eyebrow{ font-size:9px; font-weight:700; letter-spacing:.18em; color:rgba(255,255,255,.82); }
.cc-badge{ margin-top:9px; font-size:11px; font-weight:600; color:rgba(255,255,255,.92); padding:4px 11px; border-radius:999px; background:rgba(255,255,255,.16); }
.cc-hero{ position:relative; display:flex; flex-direction:column; align-items:center; margin-top:14px; }
.cc-num{ font-size:62px; font-weight:900; line-height:1; letter-spacing:-2px; color:#fff; text-shadow:0 6px 22px rgba(0,0,0,.18); }
.cc-num.pop{ animation:ccPop .2s cubic-bezier(.5,1.8,.5,1); }
@keyframes ccPop{ 50%{ transform:scale(1.075); } }
.cc-shine{ position:absolute; top:0; left:0; right:0; height:62px; overflow:hidden; pointer-events:none; }
.cc-shine i{ position:absolute; top:-20%; left:0; width:60%; height:140%; background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.7) 50%, transparent 100%); transform:translateX(-120%) rotate(18deg); mix-blend-mode:overlay; opacity:0; }
.cc-shine.go i{ animation:ccShine 1.1s ease-out forwards; }
@keyframes ccShine{ from{ transform:translateX(-120%) rotate(18deg); opacity:1; } to{ transform:translateX(230%) rotate(18deg); opacity:1; } }
.cc-saved{ font-size:15px; font-weight:700; letter-spacing:.3px; color:rgba(255,255,255,.95); margin-top:2px; }
.cc-subline{ margin-top:12px; font-size:12px; font-weight:600; color:rgba(255,255,255,.9); }
.cc-streak{ margin-top:8px; font-size:11px; color:rgba(255,255,255,.92); }
.cc-streak b{ font-weight:800; }
.cc-streak span{ font-weight:500; }
.cc-photocard{ margin-top:18px; width:188px; height:120px; border-radius:14px; border:3px solid #fff; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.cc-pc{ width:100%; height:100%; background-size:cover; background-position:center; }
.cc-meta{ margin-top:12px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.cc-mt{ font-size:14px; font-weight:800; letter-spacing:-.3px; color:var(--cc-ink); }
.cc-ms{ font-size:11px; font-weight:500; color:var(--cc-ink5); }
.cc-bottom{ position:absolute; left:0; right:0; bottom:0; z-index:20; padding:22px 18px 26px; display:flex; flex-direction:column; gap:8px; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 36%, #fff 100%); }
.cc-save{ height:42px; border-radius:12px; background:#fafafa; border:1px solid #eee; display:flex; align-items:center; padding:0 14px; gap:9px; font-size:12.5px; font-weight:600; color:var(--cc-ink); }
.cc-save svg{ width:14px; height:14px; stroke:#3d3d3d; stroke-width:1.8; fill:none; flex:none; }
.cc-chev{ margin-left:auto; color:#a8a8a8; font-size:18px; line-height:1; }
.cc-home{ height:46px; border-radius:23px; background:#0a0a0a; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; }
/* entrance maps */
.cc-screen .ent{ opacity:0; }
.cc-screen .ent.r{ transform:translateY(12px); transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.cc-screen .ent.p{ transform:scale(.68); transition:opacity .42s ease-out, transform .42s cubic-bezier(.34,1.56,.64,1); }
.cc-screen .ent.d{ transform:translateY(-40px) scale(.96); transition:opacity .5s ease-out, transform .5s cubic-bezier(.34,1.5,.5,1); }
.cc-screen .ent.show{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .cc-wash{ opacity:1; transform:none; transition:none; }
  .cc-screen .ent{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--glass-border); padding:40px 0; }
.foot-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-wm{ font-size:22px; font-weight:800; letter-spacing:-.03em; color:#fff; }
.foot-wm i{ color:var(--savings-bright); font-style:normal; }
.foot-links{ display:flex; gap:26px; }
.foot-links a{ font-size:14px; color:var(--ink-60); transition:color .18s; }
.foot-links a:hover{ color:#fff; }
.foot-copy{ font-size:13px; color:var(--ink-40); }

/* ============================================================
   RESPONSIVE (sections)
   ============================================================ */
@media (max-width:900px){
  .cart-grid, .cooking-grid, .pantry-grid{ grid-template-columns:1fr; gap:40px; }
  .cart-stats{ margin-top:48px; }
  .cooking-stage{ min-height:520px; }
  .pantry-list{ margin-left:80px; width:300px; }
  .receipt{ width:180px; }
  .price-grid{ grid-template-columns:1fr; }
  .dl-card{ grid-template-columns:1fr; gap:48px; }
  .dl-copy, .dl-phone-wrap{ min-width:0; }   /* let grid items shrink instead of forcing overflow */
  .wl-input{ min-width:0; }                  /* the text input must be allowed to shrink */
  /* Lead with the cooking-complete celebration screen when the card stacks —
     show the payoff first, then the headline + CTA (it's otherwise buried below
     the fold). order:-1 pulls the phone above .dl-copy in the single column. */
  .dl-phone-wrap{ display:grid; order:-1; }
  /* The "Scan to download" QR is a desktop affordance (scan with your phone) —
     useless on the device you're already holding, so hide it once stacked. */
  .dl-qr{ display:none; }
}

/* ---- phones (≤760): sections with media re-flow instead of staying desktop-wide ---- */
@media (max-width:760px){
  /* shorter pinned runway — 460vh of scrub felt like endless black on a phone */
  .pitch-track{ height:340vh; }
  /* GUIDED COOKING — copy flows over a full image card instead of clipping a wide cinematic stage */
  .cooking-stage{ aspect-ratio:auto; min-height:0; }
  .cook-kitchen{ filter:brightness(.48) saturate(.95); }
  .cook-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.74) 52%, rgba(0,0,0,.9) 100%); }
  .cooking-copy{ position:relative; max-width:none;
    padding:clamp(56px,13vw,84px) clamp(22px,6vw,40px) clamp(48px,12vw,72px); }
}

@media (max-width:600px){
  /* CART — pull the floating order card fully inside the viewport */
  .cart-hero{ min-height:0; }
  .cart-bag{ height:min(64vh,460px); }
  .cart-float{ right:10px; bottom:12px; left:auto; width:min(228px, calc(100% - 24px)); }
  .partners{ gap:10px; }
  /* DOWNLOAD — keep the phone a comfortable size on small screens */
  .dl-phone{ width:min(260px, 76vw); }
}

@media (max-width:560px){
  .pantry-stage{ min-height:560px; }
  .receipt{ position:relative; transform:none; margin-bottom:-30px; z-index:5; }
  .pantry-list{ margin-left:0; width:100%; max-width:340px; }
  .lifetime-card{ flex-direction:column; align-items:flex-start; }
  .lt-streak{ align-items:flex-start; }
}