/* ============================================================
   PROMPTBITE — site core (base · nav · hero · shared primitives)
   Loads after tokens.css. True-black Apple-style canvas.
   ============================================================ */

*{ box-sizing:border-box; margin:0; padding:0; }
/* overflow-x:clip (not hidden) — `hidden` computes overflow-y:auto, makes the
   root a scroll container, and BREAKS position:sticky (hero/pitch never pin).
   `clip` stops horizontal overflow without creating a scroll container. */
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip; }
html, body{ background:var(--bg); }
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink-0); font-weight:400; font-size:18px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; overflow-x:clip;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--savings); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); }
.sec{ position:relative; padding:clamp(96px,13vw,168px) 0; }

/* ---------- type helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-60);
}
.eyebrow.savings{ color:var(--savings-bright); }
.eyebrow .orb-dot{ width:14px; height:14px; border-radius:50%; }
.headline{
  font-weight:800; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(40px,5.4vw,72px); color:#fff; text-wrap:balance;
}
.headline .grn{ color:var(--savings); }
.lede{
  font-size:clamp(18px,1.5vw,22px); line-height:1.55; color:var(--ink-60); font-weight:400;
}
.lede b, .lede strong{ color:#fff; font-weight:600; }
.section-head{ max-width:18em; }
.section-head .lede{ margin-top:22px; max-width:30em; }
.section-head.center{ max-width:760px; margin-inline:auto; text-align:center; }
.section-head.center .lede{ margin-inline:auto; }
.section-head .eyebrow{ margin-bottom:22px; }

/* ---------- buttons / badges ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:54px; padding:0 26px; border-radius:var(--r-pill);
  font-size:16px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .2s var(--ease-out), opacity .2s, box-shadow .25s, background .2s;
}
.btn.primary{ background:#fff; color:#000; }
.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -16px rgba(255,255,255,.4); }
.btn.ghost{ border:1.5px solid var(--glass-border-strong); color:#fff; }
.btn.ghost:hover{ border-color:#fff; }
.btn.green{ background:var(--savings); color:#fff; }
.btn.green:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(14,163,113,.6); }

.store-badge{
  display:inline-flex; align-items:center; gap:12px; height:58px; padding:0 24px 0 20px;
  background:#fff; color:#000; border-radius:var(--r-md);
  transition:transform .2s var(--ease-out), box-shadow .25s;
}
.store-badge:hover{ transform:translateY(-2px); box-shadow:0 18px 46px -18px rgba(255,255,255,.45); }
.store-badge svg{ width:26px; height:26px; flex:none; }
.store-badge .sb-l{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.store-badge .sb-s{ font-size:11px; font-weight:500; opacity:.7; }
.store-badge .sb-b{ font-size:19px; font-weight:700; letter-spacing:-.01em; }

.badge-soon{
  display:inline-flex; align-items:center; gap:9px; height:58px; padding:0 22px;
  border:1.5px solid var(--glass-border); border-radius:var(--r-md);
  color:var(--ink-60); font-size:14px; font-weight:500;
  transition:border-color .2s, color .2s, transform .2s;
}
.badge-soon:hover{ border-color:var(--ink-40); color:#fff; transform:translateY(-1px); }
.badge-soon .a-dot{ width:9px; height:9px; border-radius:50%; background:var(--ink-40); }

/* ---------- pills ---------- */
.save-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; color:#fff; background:var(--savings);
  padding:5px 11px; border-radius:var(--r-pill);
}
.from-pantry{
  display:inline-flex; align-items:center; gap:5px; flex:none; white-space:nowrap;
  font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#fff;
  background:var(--savings); padding:4px 9px; border-radius:var(--r-pill);
}
.streak-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:800; color:var(--streak-gold);
  background:rgba(255,217,133,.16); padding:5px 11px; border-radius:var(--r-pill);
}

/* ============================================================
   NAV (§3) — slim, glassy, always visible
   ============================================================ */
.nav{
  position:fixed; top:16px; left:0; right:0; z-index:200;
  display:flex; justify-content:center; pointer-events:none;
}
.nav-inner{
  pointer-events:auto;
  display:flex; align-items:center; justify-content:space-between;
  width:min(calc(100% - 32px), var(--maxw));
  padding:10px 12px 10px 22px;
  background:rgba(10,10,12,.45);
  backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--glass-border); border-radius:var(--r-pill);
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.nav-inner.scrolled{ background:rgba(8,8,10,.78); border-color:var(--glass-border-strong); box-shadow:0 12px 40px rgba(0,0,0,.5); }
.nav-brand{ font-size:20px; font-weight:800; letter-spacing:-.03em; color:#fff; }
.nav-brand i{ color:var(--savings-bright); font-style:normal; }
.nav-links{ display:flex; gap:28px; margin-left:auto; margin-right:26px; }
.nav-links a{ font-size:14px; font-weight:500; color:var(--ink-60); transition:color .18s; }
.nav-links a:hover{ color:#fff; }
.nav-cta{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px;
  background:#fff; color:#000; border-radius:var(--r-pill); font-size:14px; font-weight:600;
  transition:transform .18s;
}
.nav-cta:hover{ transform:translateY(-1px); }
.nav-cta svg{ width:15px; height:15px; }
.nav-burger{ display:none; width:42px; height:42px; border-radius:50%; }
.nav-burger span{ display:block; width:17px; height:2px; background:#fff; margin:3.5px auto; border-radius:2px; }

/* ============================================================
   HERO (§4) — pinned scroll-scrub of the shakshuka tilt sweep,
   wordmark composited in front (z-order LOCKED: type over dish)
   ============================================================ */
.hero{ position:relative; height:300vh; background:var(--bg); }
.hero-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; place-items:center;
}
/* title block: eyebrow + wordmark, tightly stacked in the upper third */
.hero-title{
  position:absolute; left:0; right:0; top:clamp(104px,13.5vh,160px); z-index:30;
  display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1vw,15px);
  text-align:center; pointer-events:none;
}
.hero-eyebrow{
  font-size:clamp(15px,1.7vw,24px); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--savings-bright); will-change:opacity;
}
/* dish canvas sits in the LOWER half; black frame bg melts into page black */
.hero-dish-wrap{
  position:absolute; left:50%; top:60%; transform:translate(-50%,-50%);
  width:min(1380px, 112vw); aspect-ratio:16/9; z-index:10;
  will-change:transform;
}
.hero-canvas{ width:100%; height:100%; display:block; }

/* rising steam over the bowl (behind the wordmark) — the isolated
   frames trimmed the original steam, so we recreate it in CSS */
.hero-steam{
  position:absolute; left:50%; top:60%; transform:translateX(-50%);
  width:34%; max-width:420px; height:1px; z-index:31; pointer-events:none;
}
.hero-steam .wisp{
  position:absolute; bottom:0; left:50%; width:104px; height:240px;
  background:radial-gradient(44% 50% at 50% 90%, rgba(255,255,255,.84), rgba(255,255,255,0) 72%);
  filter:blur(10px); opacity:0; transform:translate(-50%,0) scale(.6);
  animation:steamRise 6s ease-in-out infinite;
}
.hero-steam .w1{ left:40%; animation-duration:6.2s; animation-delay:-1s; }
.hero-steam .w2{ left:52%; width:110px; animation-duration:5.2s; animation-delay:-3s; }
.hero-steam .w3{ left:60%; width:134px; animation-duration:7s; animation-delay:-5s; }
.hero-steam .w4{ left:47%; width:96px; animation-duration:5.8s; animation-delay:-2.4s; }
@keyframes steamRise{
  0%{ opacity:0; transform:translate(-50%,40px) scale(.55); }
  14%{ opacity:.85; }
  60%{ opacity:.5; }
  100%{ opacity:0; transform:translate(-56%,-270px) scale(1.7); }
}
.hero-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* wordmark — IN FRONT of the dish */
.hero-wordmark{
  color:#fff; font-weight:900; letter-spacing:-.035em; line-height:.9;
  font-size:clamp(60px,14.5vw,224px); white-space:nowrap; pointer-events:none;
  will-change:transform;
  text-shadow:0 2px 60px rgba(0,0,0,.45);
}
.hero-wordmark .dot{ color:var(--savings-bright); }
.hero-cue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:35;
  display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--ink-40);
  will-change:opacity;
}
.hero-cue span{ font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
.hero-cue .mouse{ width:23px; height:36px; border:2px solid var(--ink-20); border-radius:13px; position:relative; }
.hero-cue .mouse::after{ content:""; position:absolute; left:50%; top:7px; transform:translateX(-50%); width:3px; height:7px; border-radius:2px; background:var(--ink-40); animation:cuedrop 1.7s ease-in-out infinite; }
@keyframes cuedrop{ 0%,100%{ opacity:0; transform:translate(-50%,0); } 40%{ opacity:1; } 75%{ opacity:0; transform:translate(-50%,11px); } }

/* ============================================================
   SHARED — three-up stat row (Apple layout)
   ============================================================ */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.stat{ padding:26px 4px; border-top:1px solid var(--glass-border); }
.stat .num{ font-size:clamp(34px,3.6vw,52px); font-weight:800; letter-spacing:-.03em; line-height:1; color:#fff; }
.stat .num.grn{ color:var(--savings); }
.stat .lbl{ margin-top:12px; font-size:15px; color:var(--ink-60); font-weight:500; line-height:1.45; }
.stat .lbl b{ color:#fff; font-weight:600; }
.stat .cap{ margin-top:3px; font-size:13px; color:var(--ink-40); }

/* ============================================================
   SHARED — iPhone replica
   ============================================================ */
.phone{
  position:relative; width:330px; flex:none; border-radius:54px; padding:11px;
  background:linear-gradient(150deg,#26282d,#0a0b0d 62%);
  box-shadow:0 60px 120px -36px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04);
}
.phone-screen{
  position:relative; border-radius:44px; overflow:hidden; aspect-ratio:9/19.3;
  background:var(--app-canvas); display:flex; flex-direction:column;
}
.phone-notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:108px; height:30px; background:#000; border-radius:999px; z-index:40;
}
.sb{ display:flex; justify-content:space-between; align-items:center; padding:14px 24px 4px; font-size:13px; font-weight:700; color:#fff; flex:none; z-index:20; }
.sb-ic{ display:flex; gap:6px; align-items:center; }

/* tri-color orb glyph reused in composers */
.orb-glyph{ width:26px; height:26px; border-radius:50%; flex:none; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }

/* ============================================================
   RESPONSIVE (shared)
   ============================================================ */
@media (max-width:900px){
  :root{ --edge:20px; }
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:block; margin-left:auto; }
  .stat-row{ grid-template-columns:1fr; gap:0; }
  .stat{ padding:22px 4px; }
  .hero{ height:260vh; }
}
@media (max-width:760px){
  /* the sticky clips horizontal overflow, so oversize the 16:9 frame to zoom
     INTO the dish — at 100vw the bowl only filled ~half the screen width */
  .hero-dish-wrap{ width:min(1380px, 162vw); top:62%; }
  /* the rising-steam plume reads as a heavy smudge at phone scale — retire it */
  .hero-steam{ display:none; }
  /* tighten the vertical rhythm — 96px floors felt like dead black gaps */
  .sec{ padding:64px 0; }
  /* shorter scrub runway so the hero doesn't scroll forever on a phone */
  .hero{ height:220vh; }
}
@media (max-width:460px){
  .hero-dish-wrap{ width:min(1380px, 178vw); }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-cue, .hero-eyebrow{ animation:none; }
  .hero-steam .wisp{ animation:none; opacity:.26; transform:translate(-50%,-190px) scale(1.6); }
}