/* ============================================================
   EVERYDAY EATS — landing page
   Editorial type, scroll-driven motion, horizontal feature carousel.
   ============================================================ */

:root {
  --linen: #FCF7ED;
  --cream: #F5ECDB;
  --paper: #EFE3CC;
  --sienna: #8F4A38;
  --siennaDeep: #5C2C22;
  --terracotta: #B86152;
  --olive: #617A5C;
  --butter: #FFF4DB;
  --apricot: #FFD1B8;
  --ink: #1F1817;
  --inkSoft: #4A3F3D;
  --inkMuted: #8A7E7C;
  --hair: rgba(31,24,23,0.12);
  --shadow-md: 0 20px 40px -24px rgba(60,34,20,0.18);
  --shadow-lg: 0 40px 80px -40px rgba(60,34,20,0.28);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--linen); color: var(--ink); }
body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--sienna); color: var(--linen); }

/* ─── Type ─── */
.display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.editorial {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.02em;
  line-height: 1.08;
  padding-bottom: 0.08em;
}
.italic { font-style: italic; }
.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--inkMuted);
}

/* ─── Nav ─── */
nav.top {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 14px 28px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 100;
  color: var(--ink);
  background: rgba(252, 247, 237, 0);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}
nav.top.scrolled {
  background: rgba(252, 247, 237, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--hair);
  padding: 10px 28px;
}
nav.top .brand {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: inherit;
}
nav.top .links { display: flex; gap: 22px; align-items: center; }
nav.top .links a {
  color: inherit; text-decoration: none;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
nav.top .links a:hover { color: var(--sienna); }
nav.top .links a.pill {
  background: var(--ink);
  color: var(--linen);
  border: 1px solid var(--ink);
  padding: 9px 18px; border-radius: 999px;
  font-size: 13px;
  transition: background 0.25s, transform 0.25s, color 0.25s;
}
nav.top .links a.pill:hover {
  background: var(--sienna);
  border-color: var(--sienna);
  color: var(--linen);
  transform: translateY(-1px);
}

/* ─── Hero ─── */
section.hero {
  min-height: 100vh;
  /* svh accounts for mobile URL bars so 100vh doesn't overshoot/undershoot */
  min-height: 100svh;
  padding: 92px 32px 48px;
  position: relative;
  display: flex; flex-direction: column;
  /* Poster as fallback bg so there's no black flash before the video paints */
  background:
    #2a1d14 url('./assets/hero-poster.jpg') center / cover no-repeat;
  gap: 28px;
  overflow: hidden;
  isolation: isolate;            /* contain the negative-z video stack */
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  display: block;
}
/* Scrim · top-darker for nav/headline contrast, gentler middle so the video
   reads through, soft bottom darken that carries the scene labels without
   making the hero/creators boundary look like a black band on mobile. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(20, 14, 12, 0.50) 0%,
      rgba(20, 14, 12, 0.20) 30%,
      rgba(20, 14, 12, 0.22) 60%,
      rgba(20, 14, 12, 0.55) 100%);
}
.hero-top { position: relative; z-index: 1; }
@keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.hero h1 {
  font-size: clamp(42px, 7.5vw, 108px);
  color: var(--linen);
  margin-top: 18px;
  max-width: 14ch;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero h1 .word {
  display: inline-block;
  margin-right: 0.18em;
  vertical-align: bottom;
}
.hero h1 .word:last-child { margin-right: 0; }
.hero h1 .word .inner {
  display: inline-block;
  transform: translateY(0);
  opacity: 1;
  animation: rise 1.0s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
@keyframes rise {
  from { transform: translateY(60%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.hero h1 .word:nth-child(1) .inner { animation-delay: 0.04s; }
.hero h1 .word:nth-child(2) .inner { animation-delay: 0.12s; }
.hero h1 .word:nth-child(3) .inner { animation-delay: 0.20s; }
.hero h1 .word:nth-child(4) .inner { animation-delay: 0.28s; }
.hero h1 .word:nth-child(5) .inner { animation-delay: 0.36s; }
.hero h1 .word:nth-child(6) .inner { animation-delay: 0.44s; }
.hero h1 em {
  font-style: italic;
  color: var(--ee-apricot, #F0AA7C);  /* warm pop against the video scrim */
  font-weight: 300;
}

/* Rotating word swap in the headline */
.rotator {
  display: inline-grid;
  grid-template-columns: minmax(0, max-content);
  vertical-align: baseline;
  line-height: inherit;
}
.rotator > .rot-word {
  grid-column: 1;
  grid-row: 1;
  white-space: nowrap;
  opacity: 0;
  animation: rotateWord 12.5s infinite;
  will-change: opacity, transform;
}
.rotator > .rot-word:nth-child(1) { animation-delay: 0s; }
.rotator > .rot-word:nth-child(2) { animation-delay: 2.5s; }
.rotator > .rot-word:nth-child(3) { animation-delay: 5s; }
.rotator > .rot-word:nth-child(4) { animation-delay: 7.5s; }
.rotator > .rot-word:nth-child(5) { animation-delay: 10s; }

@keyframes rotateWord {
  0%   { opacity: 0; transform: translateY(28%); }
  4%   { opacity: 1; transform: translateY(0); }
  16%  { opacity: 1; transform: translateY(0); }
  20%  { opacity: 0; transform: translateY(-22%); }
  100% { opacity: 0; transform: translateY(-22%); }
}

/* Scene labels overlaying the bottom of the hero, driven by the video's
   currentTime in main.js. Active scene is full-bright, others fade.        */
.hero-scenes {
  position: relative;
  z-index: 1;
  margin-top: auto;        /* push to bottom of the flex column */
  display: flex;
  gap: clamp(14px, 2.4vw, 36px);
  align-items: baseline;
  flex-wrap: wrap;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px);
  color: rgba(252, 247, 237, 0.42);
  letter-spacing: 0.005em;
}
.hero-scenes [data-i] {
  transition:
    color 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    text-shadow 0.6s ease;
  will-change: color, transform;
}
.hero-scenes [data-i].active {
  color: var(--linen);
  transform: translateY(-1px);
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.hero-scenes .arrow {
  font-style: normal;
  color: rgba(252, 247, 237, 0.22);
  font-family: 'Inter', sans-serif;
  font-size: 0.85em;
}

/* Buttons */
.btn-primary {
  background: var(--ink);
  color: var(--linen);
  border: none;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1), background 0.3s, box-shadow 0.3s;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  box-shadow: 0 12px 26px -14px rgba(31,24,23,0.55);
}
.btn-primary:hover {
  background: var(--sienna);
  transform: translateY(-2px);
  box-shadow: 0 20px 36px -16px rgba(143,74,56,0.55);
}
.btn-primary .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.btn-primary:hover .arrow { transform: translateX(4px); }

/* ─── Recipes — masonry rail ─── */
section.creators {
  padding: 120px 0 140px;
  background: var(--cream);
  overflow: hidden;
  position: relative;
}
.creators-head {
  padding: 0 32px;
  margin-bottom: 64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: end;
}
.creators-head h2 {
  font-size: clamp(36px, 5.5vw, 84px);
  max-width: 22ch;
  text-wrap: balance;
}
.creators-head h2 em { color: var(--sienna); font-weight: 300; }
.creators-head .copy {
  font-size: 17px;
  color: var(--inkSoft);
  max-width: 38ch;
  text-wrap: pretty;
  padding-bottom: 8px;
}

/* Masonry rail — continuous auto-marquee.
   main.js doubles the rail's HTML at init, so animating from 0 to -50%
   loops seamlessly. Hover pauses; reduced-motion stops it entirely. */
.masonry-viewport {
  position: relative;
  width: 100%;
  height: 760px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.masonry-rail {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 0 32px;
  will-change: transform;
  /* Marquee runs continuously from page load — no entrance, no
     hover-pause; the rail is part of the visual content, not a
     reveal. Reduced-motion users get an empty animation via
     tokens.css collapsing the duration to 0s. */
  animation: railDrift var(--ee-dur-marquee, 90s) linear infinite;
}
@keyframes railDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.masonry-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex-shrink: 0;
  width: 240px;
}
.masonry-col:nth-child(4n+1) { padding-top: 0; }
.masonry-col:nth-child(4n+2) { padding-top: 64px; }
.masonry-col:nth-child(4n+3) { padding-top: 32px; }
.masonry-col:nth-child(4n)   { padding-top: 96px; }

.recipe-card {
  width: 100%;
  background: var(--linen);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--hair);
  transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.5s;
  flex-shrink: 0;
}
.recipe-card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 30px 60px -28px rgba(60,34,20,0.32);
  z-index: 2;
}
.recipe-card .img {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.recipe-card.h-tall .img    { aspect-ratio: 3 / 4; }
.recipe-card.h-square .img  { aspect-ratio: 1 / 1; }
.recipe-card.h-short .img   { aspect-ratio: 4 / 3; }
.recipe-card.h-wide .img    { aspect-ratio: 5 / 4; }
.recipe-card .img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.2,0.7,0.2,1);
}
.recipe-card:hover .img img { transform: scale(1.06); }
.recipe-card .img-tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(252,247,237,0.94);
  backdrop-filter: blur(8px);
  padding: 5px 10px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.recipe-card .img-creator {
  position: absolute; bottom: 12px; left: 12px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(31,24,23,0.7);
  backdrop-filter: blur(8px);
  padding: 5px 12px 5px 5px; border-radius: 999px;
  color: var(--linen);
}
.recipe-card .img-creator .face {
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--linen);
}
.recipe-card .img-creator .name {
  font-size: 11px; font-weight: 600;
  letter-spacing: -0.005em;
}
.recipe-card .meta {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.recipe-card .recipe-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px; font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;                /* override <h4> default margins for SEO promotion */
  color: var(--ink);
}
.recipe-card .stats {
  display: flex; gap: 12px;
  color: var(--inkMuted); font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}
.recipe-card .stats span { display: flex; align-items: center; gap: 5px; }

/* Inline CTA after the masonry */
.creators-cta {
  margin: 72px 32px 0;
  padding: 32px 40px;
  border-radius: 24px;
  background: var(--linen);
  border: 1px solid var(--hair);
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px;
  box-shadow: var(--shadow-md);
}
.creators-cta-text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 30ch;
  line-height: 1.2;
}
.creators-cta-text em { color: var(--sienna); font-weight: 300; }
.creators-cta .btn-primary {
  padding: 16px 26px;
  font-size: 15px;
  flex-shrink: 0;
}

.parallax { will-change: transform; }

/* Floating reaction chips */
.creators-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.creators-floats .chip {
  position: absolute;
  background: var(--linen);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 7px 13px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--sienna);
  box-shadow: 0 12px 24px -16px rgba(60,34,20,0.35);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  max-width: 84vw;
}
.creators-floats .chip q { quotes: '"' '"' '"' '"'; }
.creators-floats .chip cite {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--inkMuted);
  text-transform: none;
  border-left: 1px solid var(--hair);
  padding-left: 8px;
  white-space: nowrap;
}

/* ─── Sticky features (desktop) ─── */
section.features {
  background: var(--linen);
  position: relative;
}
/* The intro header sits above the sticky pin in normal flow.  On desktop
   we don't show it (the pin already carries the section's identity through
   its progress pips); on mobile the carousel needs an announce that the
   sticky pin would otherwise provide. */
.features-head { display: none; }
.features-pin {
  position: sticky; top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 80px;
  overflow: hidden;
}
.features-left {
  padding-right: 60px;
  position: relative;
}
.features-progress {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 40px;
}
.features-progress .pip {
  display: flex; align-items: center; gap: 14px;
  color: var(--inkMuted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.4s, transform 0.25s;
  cursor: pointer;
  user-select: none;
}
.features-progress .pip:hover { color: var(--sienna); transform: translateX(2px); }
.features-progress .pip:hover .bar { background: var(--sienna); width: 48px; }
.features-progress .pip:focus-visible {
  outline: 2px solid var(--sienna);
  outline-offset: 4px;
  border-radius: 2px;
}
.features-progress .pip .bar {
  width: 32px; height: 1.5px; background: var(--hair);
  transition: background 0.4s, width 0.4s;
}
.features-progress .pip.active { color: var(--sienna); }
.features-progress .pip.active .bar { background: var(--sienna); width: 60px; }

.features-stage {
  position: relative;
  min-height: 360px;
}
.feature-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
}
.feature-slide.active {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.feature-num {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;            /* override <h3> bold default after SEO promotion */
  font-size: 20px;
  color: var(--sienna);
  margin: 0 0 24px;            /* override <h3> top margin so layout stays the same */
}
.feature-pull {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  text-wrap: balance;
}
.feature-pull .quote-mark {
  color: var(--sienna);
  font-style: italic;
  font-weight: 300;
}
.feature-body {
  font-size: 18px;
  color: var(--inkSoft);
  max-width: 42ch;
  line-height: 1.55;
  text-wrap: pretty;
}

.features-right {
  position: relative;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.feature-graphic {
  position: absolute;
  width: 460px; height: 580px;
  border-radius: 38px;
  background: var(--cream);
  border: 1px solid var(--hair);
  box-shadow: 0 60px 100px -50px rgba(60,34,20,0.25);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.9) translateY(40px);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(0.2,0.7,0.2,1);
  pointer-events: none;
}
.feature-graphic.active {
  opacity: 1; transform: scale(1) translateY(0);
  pointer-events: auto;
}
.feature-graphic .gtitle {
  position: absolute; top: 28px; left: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inkMuted);
}

/* feature graphic 1 — recipe -> cart */
.fg-recipe {
  position: absolute; top: 70px; left: 28px; right: 28px;
  background: var(--linen); border-radius: 16px;
  padding: 18px 20px;
  border: 1px solid var(--hair);
}
.fg-recipe .name {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 22px; font-weight: 500;
  margin-bottom: 12px;
}
.fg-recipe .line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: var(--inkSoft);
  padding: 7px 0;
  border-top: 1px dashed var(--hair);
  display: flex; justify-content: space-between;
  opacity: 0;
  animation: fg1Line 0.6s forwards;
}
.feature-graphic.active .fg-recipe .line:nth-child(2) { animation-delay: 0.4s; }
.feature-graphic.active .fg-recipe .line:nth-child(3) { animation-delay: 0.55s; }
.feature-graphic.active .fg-recipe .line:nth-child(4) { animation-delay: 0.7s; }
@keyframes fg1Line { to { opacity: 1; } }
.fg-recipe .line .resolve { color: var(--olive); font-weight: 600; }

.fg-cart {
  position: absolute; bottom: 28px; left: 28px; right: 28px;
  background: var(--ink); color: var(--linen);
  border-radius: 16px;
  padding: 20px 22px;
  opacity: 0; transform: translateY(20px);
  animation: fg1Cart 0.6s 0.9s forwards;
}
@keyframes fg1Cart { to { opacity: 1; transform: translateY(0); } }
.fg-cart .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(252,247,237,0.5);
  margin-bottom: 8px;
}
.fg-cart .total {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 42px; font-weight: 500;
  letter-spacing: -0.025em;
}
.fg-cart .sub {
  font-size: 13px; color: rgba(252,247,237,0.7);
  margin-top: 4px;
}

/* feature graphic 2 — pack sizes */
.fg-packs {
  position: absolute; inset: 70px 28px 28px;
  display: flex; flex-direction: column; gap: 14px;
  justify-content: center;
}
.fg-pack {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: var(--linen);
  border: 1px solid var(--hair);
  border-radius: 14px;
  transition: all 0.5s;
  opacity: 0; transform: translateX(-20px);
  animation: fg2Pack 0.5s forwards;
}
.feature-graphic.active .fg-pack:nth-child(1) { animation-delay: 0.3s; }
.feature-graphic.active .fg-pack:nth-child(2) { animation-delay: 0.45s; }
.feature-graphic.active .fg-pack:nth-child(3) { animation-delay: 0.6s; }
@keyframes fg2Pack { to { opacity: 1; transform: translateX(0); } }
.fg-pack.picked {
  background: var(--olive);
  color: var(--linen);
  border-color: var(--olive);
}
.fg-pack.dim { opacity: 0.4; }
.fg-pack .visual {
  height: 50px;
  display: flex; align-items: flex-end;
  gap: 4px;
}
.fg-pack .bar { width: 14px; background: var(--sienna); border-radius: 3px 3px 0 0; }
.fg-pack.picked .bar { background: var(--linen); }
.fg-pack .info .label { font-weight: 600; font-size: 14px; }
.fg-pack .info .sub { font-size: 12px; opacity: 0.7; font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.fg-pack .check {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.fg-pack.picked .check { opacity: 1; background: var(--linen); color: var(--olive); border-color: var(--linen); }

/* feature graphic 3 — live prices */
.fg-prices {
  position: absolute; inset: 70px 28px 28px;
  display: flex; flex-direction: column; gap: 12px;
  justify-content: center;
}
.fg-price {
  background: var(--linen);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
}
.fg-price .name-l { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; }
.fg-price .price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sienna);
  transition: color 0.4s;
}
.fg-price .delta { font-size: 11px; color: var(--olive); font-weight: 600; }
.fg-price .delta.down { color: var(--olive); }
.fg-price .delta.up { color: var(--terracotta); }
.fg-price .live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--olive);
  animation: pulse 1.4s ease-in-out infinite;
  margin-right: 6px;
  display: inline-block; vertical-align: middle;
}

/* feature graphic 4 — aisle map */
.fg-aisle { position: absolute; inset: 70px 28px 28px; display: flex; flex-direction: column; }
.fg-aisle svg { width: 100%; height: 100%; }
.fg-aisle .path-anim {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawPath 1.6s 0.4s forwards cubic-bezier(0.5, 0, 0.2, 1);
}
@keyframes drawPath { to { stroke-dashoffset: 0; } }
.feature-graphic .fg-aisle .pin { opacity: 0; animation: fadePin 0.4s forwards; }
.feature-graphic.active .fg-aisle .pin:nth-of-type(1) { animation-delay: 0.6s; }
.feature-graphic.active .fg-aisle .pin:nth-of-type(2) { animation-delay: 0.85s; }
.feature-graphic.active .fg-aisle .pin:nth-of-type(3) { animation-delay: 1.1s; }
.feature-graphic.active .fg-aisle .pin:nth-of-type(4) { animation-delay: 1.35s; }
@keyframes fadePin { to { opacity: 1; } }

/* feature graphic 5 — cook-along */
.fg-cook { position: absolute; inset: 70px 28px 28px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.fg-cook .step {
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--linen); border: 1px solid var(--hair);
  transition: all 0.6s;
}
.fg-cook .step.active {
  background: var(--ink); color: var(--linen); border-color: var(--ink);
  transform: scale(1.04);
}
.fg-cook .step .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; opacity: 0.6; }
.fg-cook .step .text { font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-style: italic; margin-top: 6px; }
.fg-cook .timer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--sienna); color: var(--linen);
  border-radius: 14px;
  font-family: 'JetBrains Mono', monospace;
}
.fg-cook .timer .ring {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--linen);
  border-top-color: transparent;
  animation: spin 2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* feature graphic 6 — pantry */
.fg-pantry { position: absolute; inset: 70px 28px 28px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.fg-pantry .row {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 18px;
  background: var(--linen); border: 1px solid var(--hair);
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
}
.fg-pantry .row.has { background: rgba(97,122,92,0.12); border-color: var(--olive); }
.fg-pantry .row .icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: 18px; color: var(--sienna);
}
.fg-pantry .row.has .icon { background: var(--olive); color: var(--linen); }
.fg-pantry .row .name { font-size: 14px; font-weight: 500; }
.fg-pantry .row .status { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.fg-pantry .row.has .status { color: var(--olive); }
.fg-pantry .row.miss .status { color: var(--terracotta); }

/* feature graphic 7 — diet badges */
.fg-diet { position: absolute; inset: 70px 28px 28px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.fg-diet .badges { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-diet .badge {
  padding: 8px 14px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--hair);
  color: var(--inkMuted);
  background: var(--linen);
  transition: all 0.4s;
}
.fg-diet .badge.on {
  background: var(--sienna); color: var(--linen); border-color: var(--sienna);
}
.fg-diet .preview {
  margin-top: 8px; padding: 18px 20px;
  background: var(--linen); border: 1px solid var(--hair);
  border-radius: 16px;
}
.fg-diet .preview .meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--olive); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
.fg-diet .preview .name { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 22px; }
.fg-diet .preview .swap {
  margin-top: 10px;
  font-size: 13px; color: var(--inkSoft);
}
.fg-diet .preview .swap b { color: var(--olive); font-weight: 600; }


/* ─── Stats ─── */
section.stats {
  background: var(--paper);
  padding: 120px 32px;
  position: relative;
  overflow: hidden;
}
.stats-head {
  margin-bottom: 80px;
}
.stats-head .mono { color: var(--siennaDeep); }
.stats-head h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-top: 20px;
  max-width: 22ch;
  text-wrap: balance;
  padding-bottom: 0.08em;
}
.stats-head h2 em { color: var(--sienna); font-weight: 300; }
/* On desktop, widen the measure so the health headline reads on two lines
   ("Most apps guess what you ate." / "We use the exact ingredients you bought.")
   instead of three. Mobile keeps the tighter 22ch measure. */
@media (min-width: 901px) {
  .stats-head h2 { max-width: 42ch; }
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(31,24,23,0.18);
}
.stat {
  padding: 48px 32px 48px 0;
  border-right: 1px solid rgba(31,24,23,0.14);
  display: flex; flex-direction: column; gap: 14px;
}
.stat:last-child { border-right: none; padding-right: 0; padding-left: 48px; }
.stat:nth-child(2) { padding-left: 48px; }
.stat .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inkSoft);
}
.stat .number {
  font-family: 'Fraunces', serif;
  font-size: clamp(64px, 9vw, 152px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--sienna);
  font-variation-settings: "opsz" 144;
}
.stat .number .unit { font-size: 0.5em; color: var(--ink); margin-left: 6px; font-style: italic; font-weight: 300; }
/* Secondary line under a stat's main number — used for the money + time stat
   so the page can show "$1,547" with "+ 6 hrs / week reclaimed" beneath it. */
.stat .number-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--olive);
  margin-top: 6px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.stat .number-sub .count { font-style: normal; font-weight: 600; color: var(--olive); }
.stat-savings .number { color: var(--olive); }
.stat .copy {
  font-size: 15px; color: var(--inkSoft);
  line-height: 1.5;
  max-width: 30ch;
  text-wrap: pretty;
}
.stat .source {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--inkMuted);
  letter-spacing: 0.04em;
  margin-top: auto;
  padding-top: 18px;
}
.savings-panel {
  margin-top: 72px;
  background: var(--ink); color: var(--linen);
  border-radius: 28px;
  padding: 60px 48px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.savings-panel::before {
  content: ''; position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(184,97,82,0.3) 0%, transparent 70%);
  right: -200px; top: -200px;
  border-radius: 50%;
}
.savings-panel .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(252,247,237,0.6);
}
.savings-panel h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 3.6vw, 48px);
  margin-top: 14px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.savings-panel h3 em { color: var(--apricot); font-weight: 300; }
.savings-panel .savings-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px;
  padding: 14px 22px;
  background: var(--apricot);
  color: var(--ink);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: transform 0.3s, background 0.3s;
}
.savings-panel .savings-cta:hover {
  background: var(--linen);
  transform: translateY(-2px);
}
.savings-amount {
  text-align: right;
  position: relative;
}
.savings-amount .big {
  font-family: 'Fraunces', serif;
  font-size: clamp(96px, 14vw, 240px);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--apricot);
  font-variation-settings: "opsz" 144;
}
/* ─── Meal-prep panel (replaces savings amount on health section) ─── */
.prep-panel { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
.prep-blurb {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(252,247,237,0.78);
  margin-top: 16px;
  max-width: 38ch;
  text-wrap: pretty;
}
.prep-amount {
  text-align: left;
  width: 100%;
}
.prep-target {
  background: rgba(252,247,237,0.05);
  border: 1px solid rgba(252,247,237,0.14);
  border-radius: 22px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.prep-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252,247,237,0.55);
}
.prep-row .v {
  color: var(--linen);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: right;
}
.prep-row.foot {
  padding-top: 14px;
  border-top: 1px solid rgba(252,247,237,0.1);
}
.prep-recipe {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(252,247,237,0.1);
}
.prep-recipe-name {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.15;
  color: var(--linen);
  letter-spacing: -0.015em;
  font-weight: 500;
}
.prep-recipe-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252,247,237,0.55);
}
.prep-cal {
  display: flex;
  flex-direction: column;
  padding-top: 14px;
  border-top: 1px solid rgba(252,247,237,0.08);
}
.prep-cal-value {
  font-family: 'Fraunces', serif;
  font-size: clamp(52px, 7vw, 76px);
  font-weight: 400;
  line-height: 1;
  color: var(--apricot);
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.prep-cal-unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(252,247,237,0.55);
  font-weight: 500;
}
.prep-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(252,247,237,0.1);
}
.prep-action {
  appearance: none;
  font: inherit;
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,189,154,0.32);
  background: transparent;
  color: var(--linen);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.prep-action .plus {
  color: var(--apricot);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-0.5px);
}
.prep-action:hover {
  background: rgba(255,189,154,0.08);
  border-color: rgba(255,189,154,0.55);
}
.prep-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0;
}
.prep-pills .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,189,154,0.10);
  border: 1px solid rgba(255,189,154,0.22);
  color: rgba(252,247,237,0.72);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.prep-pills .pill b {
  color: var(--apricot);
  font-weight: 600;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* ─── FAQ ─── */
/* Compact half-page section: paired with the CTA below it, the two together
   should read as one viewport-tall block on desktop. Tight padding + smaller
   type keeps the FAQ from dominating the lower page. */
section.faq {
  background: var(--linen);
  padding: 64px 32px 56px;
  position: relative;
}
.faq-head {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: left;
}
.faq-head .mono {
  color: var(--siennaDeep);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.faq-head h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  max-width: 28ch;
  text-wrap: balance;
}
.faq-head h2 em { color: var(--sienna); font-weight: 300; }
/* Two independent columns so expanding an item in one column doesn't
   leave blank space next to it in the other.  Each .faq-col is its own
   stacking context with its own height. */
.faq-list {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  align-items: start;
}
.faq-col {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hair);
}
.faq-item {
  border-bottom: 1px solid var(--hair);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  transition: color 0.25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--sienna); }
.faq-item .faq-q {
  font-family: 'Fraunces', serif;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.faq-item .faq-toggle {
  width: 20px; height: 20px;
  position: relative;
  flex-shrink: 0;
}
.faq-item .faq-toggle::before,
.faq-item .faq-toggle::after {
  content: '';
  position: absolute;
  background: var(--ink);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-item .faq-toggle::before {
  /* horizontal bar */
  top: 50%; left: 0; right: 0; height: 1.5px;
  transform: translateY(-50%);
}
.faq-item .faq-toggle::after {
  /* vertical bar — rotates flat when open */
  top: 0; bottom: 0; left: 50%; width: 1.5px;
  transform: translateX(-50%);
}
.faq-item[open] .faq-toggle::after {
  transform: translateX(-50%) rotate(90deg);
}
.faq-item .faq-a {
  margin: 0 6px 18px;
  padding-right: 44px;
  color: var(--inkSoft);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
  max-width: 64ch;
}

/* ─── CTA — centered stack ─── */
/* Compact half-page section: paired with the FAQ above. */
section.cta {
  background: var(--sienna);
  color: var(--linen);
  padding: 80px 32px 100px;
  position: relative;
  overflow: hidden;
}
section.cta .bg-word {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fraunces', serif;
  font-size: clamp(180px, 28vw, 480px);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: rgba(255,244,219,0.09);
  pointer-events: none;
  font-variation-settings: "opsz" 144;
  white-space: nowrap;
}
.cta-inner {
  position: relative; z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.cta-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(252,247,237,0.7);
}
.cta h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(38px, 5.6vw, 80px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 16ch;
  text-wrap: balance;
  padding-bottom: 0.08em;
  margin: 0;
}
.cta h2 em { font-style: italic; color: var(--butter); font-weight: 300; }
.cta-tag {
  font-size: 17px;
  color: rgba(252,247,237,0.85);
  max-width: 38ch;
  line-height: 1.5;
  margin-top: 4px;
}
.cta-buttons {
  justify-content: center;
  margin-top: 12px;
}
.cta-buttons,
.store-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}

.store {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--linen);
  padding: 12px 22px 12px 18px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1), background 0.3s, box-shadow 0.3s;
  border: 1px solid var(--ink);
  min-width: 180px;
  box-shadow: 0 14px 32px -16px rgba(0,0,0,0.5);
}
.store:hover {
  transform: translateY(-3px);
  background: #000;
  box-shadow: 0 22px 40px -18px rgba(0,0,0,0.65);
}
.store .glyph {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.store .glyph svg { width: 100%; height: 100%; display: block; }
.store-text {
  display: flex; flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.store .small {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(252,247,237,0.78);
  text-transform: none;
}
.store .big {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 19px;
  letter-spacing: -0.01em;
  margin-top: 2px;
}

/* Compact, hollow variant for inline CTAs */
.store.mini {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 9px 16px 9px 14px;
  min-width: 0;
  border-radius: 12px;
  gap: 10px;
  box-shadow: none;
}
.store.mini:hover {
  background: var(--ink);
  color: var(--linen);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(0,0,0,0.5);
}
.store.mini .glyph { width: 22px; height: 22px; }
.store.mini .small {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--inkSoft);
}
.store.mini:hover .small { color: rgba(252,247,237,0.78); }
.store.mini .big { font-size: 15px; margin-top: 1px; }
.cta-pricetag {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid rgba(252,247,237,0.3);
  border-radius: 999px;
  padding: 10px 20px 10px 14px;
  width: fit-content;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--linen);
}
.cta-pricetag .free-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--butter);
}

/* ─── Footer ─── */
footer.foot {
  background: var(--linen);
  padding: 88px 32px 32px;
  color: var(--ink);
  border-top: 1px solid var(--hair);
}
.foot-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--hair);
}
.foot-brand .brand-mark {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.foot-brand .brand-tag {
  margin-top: 12px;
  color: var(--inkSoft);
  font-size: 14px;
  max-width: 30ch;
  line-height: 1.5;
}
.foot-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inkMuted);
  margin-bottom: 14px;
  font-weight: 500;
}
.foot-col a {
  display: block;
  color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 500;
  margin-bottom: 10px;
  transition: color 0.2s;
}
.foot-col a:hover { color: var(--sienna); }

/* Contact column with two-line emails */
.foot-contact a {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
  line-height: 1.3;
  gap: 1px;
}
.foot-contact .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkMuted);
  font-weight: 500;
}
.foot-contact .email {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.foot-contact a:hover .email { color: var(--sienna); }

.foot-bottom {
  padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--inkMuted);
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  gap: 12px;
}

/* ─── Contact modal ───
   Triggered from any [data-open-contact] (footer Careers + Affiliates).
   Backdrop blur + linen card, focus trap is wired in main.js. */
.modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: var(--ee-z-modal, 200);
  padding: 20px;
}
.modal.is-open { display: flex; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(31, 24, 23, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.modal-card {
  position: relative;
  background: var(--linen);
  border-radius: 28px;
  padding: 48px 48px 40px;
  max-width: 540px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 60px 120px -40px rgba(60,34,20,0.45);
  animation: modalRise 0.5s cubic-bezier(0.2,0.7,0.2,1) backwards;
}
@keyframes modalRise {
  from { transform: translateY(40px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 50%;
  font-size: 22px; line-height: 1;
  color: var(--inkSoft);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.modal-close:hover { background: var(--paper); border-color: var(--inkMuted); }
.modal-eyebrow {
  color: var(--sienna);
  margin-bottom: 12px;
}
#contact-title {
  font-size: clamp(36px, 4vw, 48px);
  margin-bottom: 12px;
}
/* Coming-soon modal · smaller than the contact modal, single CTA below
   a one-line message. The mini modifier just relaxes max-width and
   tightens vertical rhythm. */
.modal--mini .modal-card {
  max-width: 420px;
  padding: 40px 36px 32px;
  text-align: left;
}
#comingsoon-title {
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.05;
  margin: 8px 0 14px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
#comingsoon-title em { color: var(--sienna); font-weight: 300; }
.modal--mini .modal-sub { margin-bottom: 24px; }
.modal--mini .modal-submit { width: auto; align-self: flex-start; }
.modal-sub {
  font-size: 15px;
  color: var(--inkSoft);
  margin-bottom: 28px;
  line-height: 1.5;
}
.modal-sub strong { color: var(--ink); font-weight: 600; }
#contact-form {
  display: flex; flex-direction: column; gap: 18px;
}
.modal-label {
  display: flex; flex-direction: column; gap: 6px;
}
.modal-label > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inkMuted);
  font-weight: 500;
}
.modal-label input,
.modal-label select,
.modal-label textarea {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  width: 100%;
  resize: vertical;
  transition: border-color 0.2s;
}
.modal-label input:focus,
.modal-label select:focus,
.modal-label textarea:focus {
  outline: none;
  border-color: var(--sienna);
}
.modal-submit {
  align-self: flex-start;
  margin-top: 4px;
}
.modal-fineprint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--inkMuted);
  letter-spacing: 0.08em;
  margin-top: 4px;
}
body.modal-open { overflow: hidden; }
@media (max-width: 600px) {
  .modal-card { padding: 40px 24px 28px; border-radius: 22px; }
  #contact-title { font-size: clamp(28px, 7vw, 36px); }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .word .inner,
  .masonry-rail,
  .hero-bg-video,
  .feature-graphic,
  .feature-slide,
  .modal-card,
  .feature-graphic .live-dot, .fg-cook .timer .ring, .walker { animation: none; transition: none; }
  /* Reduced-motion users get a still frame; main.js calls .pause() on the
     video element since CSS can't drive HTMLMediaElement playback state. */
  .rotator > .rot-word { animation: none; opacity: 0; transform: none; }
  .rotator > .rot-word:first-child { opacity: 1; }
}

/* Scroll runway behind the sticky features-pin. Each of the 7 slides gets
   ~80vh of dwell on desktop (560vh / 7). Hidden on mobile (carousel layout). */
#scroll-runway { height: 560vh; pointer-events: none; }

/* Mobile features carousel — built by main.js, hidden on desktop. */
.features-mobile { display: none; }

/* Letter-split spans · injected by motion.js when revealing headlines.
   .split-word stays together so lines never break mid-word; .split-char
   inside a word can transform independently for the cascade.
   inline-block on both lets transforms work; line-height matches parent so
   no vertical shift happens between the static and animated state. */
.split-word {
  display: inline-block;
  white-space: nowrap;
  line-height: inherit;
}
.split-char {
  display: inline-block;
  line-height: inherit;
  transform-origin: 50% 100%;
}

/* Feature graphic gets perspective so the 3D card-flip on entrance has depth */
.features-right { perspective: 1200px; }
.feature-graphic { transform-style: preserve-3d; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .features-pin { padding: 0 40px; }
  .feature-graphic { width: 380px; height: 480px; }
}

@media (max-width: 900px) {
  body { font-size: 16px; }

  nav.top { padding: 14px 20px; }
  nav.top .brand { font-size: 20px; }
  nav.top .links { gap: 14px; }
  nav.top .link-text { display: none; }
  nav.top .pill { padding: 7px 14px; font-size: 12px; }

  section.hero { padding: 80px 20px 24px; gap: 16px; }
  .hero h1 { margin-top: 8px; max-width: 100%; }
  .hero-scenes {
    font-size: 16px;
    gap: 12px;
    column-gap: 10px;
  }

  section.creators { padding: 72px 0 88px; }
  .creators-head { padding: 0 20px; margin-bottom: 40px; grid-template-columns: 1fr; gap: 24px; }
  .masonry-viewport { height: 560px; }
  .masonry-col { width: 200px; }
  .recipe-card .recipe-name { font-size: 15px; }
  .creators-floats { display: none; }
  .creators-cta {
    margin: 48px 20px 0;
    padding: 24px;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 20px;
  }
  .creators-cta .store-row { justify-content: center; }
  .creators-cta .store.mini { flex: 1 1 calc(50% - 6px); min-width: 0; justify-content: center; }

  /* Smaller text inside the mini badges so "Google Play" fits on one line */
  .store.mini { padding: 8px 12px 8px 12px; gap: 8px; }
  .store.mini .glyph { width: 18px; height: 18px; }
  .store.mini .small { font-size: 8px; letter-spacing: 0.02em; }
  .store.mini .big { font-size: 13px; white-space: nowrap; }

  /* FEATURES — horizontal scroll-snap carousel on mobile.
     The desktop sticky-pin and its runway are taken out of layout; the
     mobile track (built by main.js) becomes the primary surface. */
  section.features { padding: 56px 0 80px; }
  .features-pin { display: none; }
  #scroll-runway { display: none; }

  /* Mobile-only header above the carousel. */
  .features-head {
    display: block;
    padding: 0 20px;
    margin-bottom: 20px;
  }
  .features-head .mono {
    color: var(--siennaDeep);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .features-head h2 {
    font-family: 'Fraunces', serif;
    font-size: clamp(28px, 7.5vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 12px 0 0;
    text-wrap: balance;
    color: var(--ink);
  }
  .features-head h2 em { color: var(--sienna); font-weight: 300; }

  .features-mobile {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    gap: 16px;
    padding: 8px 20px 28px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .features-mobile::-webkit-scrollbar { display: none; }
  .features-mobile-card {
    flex: 0 0 86vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: var(--cream);
    border: 1px solid var(--hair);
    border-radius: 22px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: var(--shadow-md);
  }
  /* Inside a card, content is ALWAYS visible — strip absolute positioning
     and the desktop entrance offsets that depend on the sticky stage. */
  .features-mobile-card .feature-slide {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .features-mobile-card .feature-graphic {
    position: relative;
    width: 100%;
    height: 400px;
    margin: 0;
    border-radius: 18px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    perspective: none;
  }
  /* Card 0 (Recipe → Cart) — pin the recipe panel above the cart panel so
     they don't collide when the recipe has 3 lines. */
  .features-mobile-card .fg-recipe {
    bottom: 130px;        /* leaves room for the cart panel below */
    overflow: hidden;
  }
  .features-mobile-card .fg-cart {
    bottom: 14px;
    top: auto;
    padding: 12px 14px;
  }
  .features-mobile-card .fg-cart .total { font-size: 26px; }
  .features-mobile-card .fg-cart .label,
  .features-mobile-card .fg-cart .sub { font-size: 11px; }
  /* Cards 4 (cook), 5 (pantry), 6 (diet): the absolute-positioned content
     was justify-content:center on desktop, leaving lots of blank space below
     on mobile because the box outsizes its content. space-between fills the
     box; for cook the timer also pins to the bottom via margin-top:auto. */
  .features-mobile-card .fg-cook,
  .features-mobile-card .fg-pantry {
    inset: 50px 18px 18px;
    justify-content: space-between;
  }
  .features-mobile-card .fg-diet {
    inset: 50px 18px 18px;
    justify-content: flex-start;
  }
  .features-mobile-card .fg-cook .timer { margin-top: auto; }
  .features-mobile-card .fg-cook .step { padding: 10px 14px; }
  .features-mobile-card .fg-cook .step .num { font-size: 10px; }
  .features-mobile-card .fg-cook .step .text { font-size: 14px; margin-top: 4px; }
  .features-mobile-card .feature-num { font-size: 12px; margin-bottom: 8px; }
  .features-mobile-card .feature-pull {
    font-size: clamp(22px, 6vw, 30px);
    margin-bottom: 10px;
    line-height: 1.08;
  }
  .features-mobile-card .feature-body {
    font-size: 13px;
    line-height: 1.45;
    max-width: none;
  }
  .features-mobile-card .feature-graphic .gtitle { top: 18px; left: 18px; font-size: 10px; }
  .features-mobile-card .fg-recipe { top: 50px; left: 18px; right: 18px; padding: 14px 16px; }
  .features-mobile-card .fg-recipe .name { font-size: 18px; margin-bottom: 8px; }
  .features-mobile-card .fg-recipe .line { font-size: 11px; padding: 5px 0; }
  .features-mobile-card .fg-cart { bottom: 18px; left: 18px; right: 18px; padding: 14px 16px; }
  .features-mobile-card .fg-cart .total { font-size: 30px; }
  .features-mobile-card .fg-packs,
  .features-mobile-card .fg-prices,
  .features-mobile-card .fg-aisle,
  .features-mobile-card .fg-cook,
  .features-mobile-card .fg-pantry,
  .features-mobile-card .fg-diet { inset: 50px 18px 18px; }
  .features-mobile-card .fg-pack { padding: 10px 12px; grid-template-columns: 60px 1fr auto; gap: 10px; }
  .features-mobile-card .fg-pack .visual { height: 36px; }
  .features-mobile-card .fg-pack .info .label { font-size: 12px; }
  .features-mobile-card .fg-pack .info .sub { font-size: 10px; }
  .features-mobile-card .fg-price { padding: 10px 14px; font-size: 12px; }
  .features-mobile-card .fg-price .price { font-size: 20px; }
  .features-mobile-card .fg-cook .step { padding: 12px 14px; }
  .features-mobile-card .fg-cook .step .text { font-size: 14px; }
  .features-mobile-card .fg-pantry { gap: 8px; }
  .features-mobile-card .fg-pantry .row { padding: 8px 12px; }
  .features-mobile-card .fg-pantry .row .name { font-size: 12px; }
  .features-mobile-card .fg-pantry .row .status { font-size: 10px; }
  .features-mobile-card .fg-pantry .row .icon { width: 28px; height: 28px; font-size: 14px; }
  .features-mobile-card .fg-diet .preview .name { font-size: 18px; }

  section.stats { padding: 72px 20px; }
  .stats-head { margin-bottom: 48px; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--hair); padding: 32px 0 !important; }
  .stat:last-child { border-bottom: none; padding-bottom: 0 !important; }
  .savings-panel {
    grid-template-columns: 1fr;
    padding: 36px 28px;
    margin-top: 48px;
    gap: 24px;
  }
  .savings-amount { text-align: left; }
  .prep-panel { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
  .prep-target { padding: 20px 20px; gap: 14px; }
  .prep-recipe-name { font-size: 20px; }
  .prep-cal-value { font-size: 56px; }
  .prep-cal-unit { font-size: 10px; }
  .prep-blurb { font-size: 15px; }
  .prep-pills .pill { font-size: 9.5px; padding: 6px 10px; }
  .prep-pills .pill b { font-size: 13px; }
  .prep-actions { gap: 8px; padding-top: 14px; }
  .prep-action { padding: 11px 12px; font-size: 11px; letter-spacing: 0.12em; }
  .prep-action .plus { font-size: 14px; }

  section.faq { padding: 56px 20px; }
  .faq-head { margin-bottom: 24px; }
  .faq-list { grid-template-columns: 1fr; column-gap: 0; }
  /* On mobile both columns stack vertically; suppress the second column's
     top border so there's no double-line between col 1 and col 2. */
  .faq-col + .faq-col { border-top: 0; }
  .faq-item summary { padding: 16px 4px; gap: 16px; }
  .faq-item .faq-a { padding-right: 24px; font-size: 14px; }

  section.cta { padding: 96px 20px 120px; }
  .cta-inner { gap: 18px; }
  .cta-buttons { flex-direction: column; width: 100%; max-width: 320px; }
  .cta-buttons .store {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 18px 12px 16px;
    gap: 12px;
    justify-content: center;
  }
  .cta-buttons .store .glyph { width: 26px; height: 26px; }
  .cta-buttons .store .small { font-size: 10px; }
  .cta-buttons .store .big { font-size: 17px; }
  section.cta .bg-word { font-size: clamp(160px, 50vw, 320px); bottom: -30px; }

  footer.foot { padding: 64px 20px 28px; }
  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
    padding-bottom: 40px;
  }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bottom { font-size: 10px; }
}

@media (max-width: 600px) {
  .hero h1 { font-size: clamp(40px, 12vw, 64px); }
  .creators-head h2 { font-size: clamp(32px, 8vw, 48px); }
  .stats-head h2 { font-size: clamp(32px, 7.5vw, 48px); }
  .savings-panel h3 { font-size: clamp(22px, 5.5vw, 32px); }
}