:root {
  --bg: #FDFDFC; --panel: #F5F7F3; --chip: #E8EFE7; --outline: #CBD8CD;
  --ink: #1F2421; --ink-2: #4A544D; --muted: #6B736D; --muted-2: #8A918B;
  --hairline: #ECEEEA; --card-border: #E7E9E5;
  --green: #2F5D3E; --green-hover: #234730;
  --green-mid: #45684F; --green-soft: #A9C3AE; --green-pale: #F2F4F0;
  --accent: #C96F4A;
  --serif: 'Source Serif 4', Georgia, serif;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-hover); }

/* Falling superfoods (JS-simulated; see main.js) */
.hero__fruit {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 1;
}
.hero__fruit span {
  position: absolute; top: 0; left: 0; line-height: 1;
  filter: saturate(0.9); opacity: 0; will-change: transform;
}

/* Scalloped hedge divider — foods slip behind it */
.hero__hedge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  z-index: 2; pointer-events: none;
  background-image:
    radial-gradient(circle closest-side, #E8EFE7 99%, rgba(232,239,231,0) 100%),
    linear-gradient(#E8EFE7, #E8EFE7),
    radial-gradient(circle closest-side, #CBD8CD 99%, rgba(203,216,205,0) 100%);
  background-size: 48px 48px, 100% 40px, 48px 48px;
  background-position: 0 12px, left bottom, 24px 0;
  background-repeat: repeat-x, no-repeat, repeat-x;
}

/* Fruit hoops mini-game */
.hoop-toggle {
  position: absolute; left: 18px; bottom: 84px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: transparent; font-size: 22px; line-height: 1; cursor: pointer;
  opacity: 0.25; filter: grayscale(0.4); transition: opacity .2s, filter .2s;
}
.hoop-toggle:hover, .hoop-toggle[aria-pressed="true"] { opacity: 0.9; filter: none; }
.hoop-score {
  position: absolute; left: 68px; bottom: 93px; z-index: 3;
  font-size: 13px; font-weight: 600; color: var(--green);
  background: var(--green-pale); border: 1px solid var(--outline);
  border-radius: 999px; padding: 3px 10px;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .hoop-toggle, .hoop-score { display: none; }
}
.hoop { position: absolute; right: 7%; bottom: 88px; z-index: 1; width: 110px; pointer-events: none; }
.hoop__board {
  width: 88px; height: 64px; margin: 0 auto; position: relative;
  border: 3px solid var(--outline); border-radius: 6px; background: rgba(255,255,255,0.55);
}
.hoop__board::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  width: 34px; height: 26px; border: 2px solid var(--outline); border-radius: 3px;
}
.hoop__rim { width: 76px; height: 10px; margin: -2px auto 0; border-radius: 5px; background: var(--accent); }
.hoop__net {
  width: 56px; height: 44px; margin: 0 auto;
  background:
    repeating-linear-gradient(75deg, rgba(203,216,205,0.9) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-75deg, rgba(203,216,205,0.9) 0 2px, transparent 2px 9px);
  clip-path: polygon(6% 0, 94% 0, 72% 100%, 28% 100%);
}
.hoop-pop {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--green);
  transform: translateX(-50%);
  animation: hoop-pop 0.9s ease-out forwards;
}
@keyframes hoop-pop {
  from { opacity: 1; margin-top: 0; }
  to   { opacity: 0; margin-top: -46px; }
}

/* ============ NAV ============ */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 76px; border-bottom: 1px solid var(--hairline);
  background: var(--bg); position: relative; z-index: 5;
}
.nav__left { display: flex; align-items: center; gap: 40px; }
/* Wordmark PNG (617x176) carries ~30px of top air above the leaf and the
   "p" descender below, so the height below is sized off the cap band to
   match the 26px serif text it replaced. */
.logo { display: block; height: 37px; width: auto; }
.nav__links { display: flex; gap: 28px; font-size: 15.5px; color: var(--ink-2); }
.nav__links a { color: var(--ink-2); }
.nav__right { display: flex; align-items: center; gap: 20px; }
.nav__signin { font-size: 15.5px; color: var(--ink-2); }

.btn-pill {
  background: var(--green); color: #FFFFFF; font-size: 15px; font-weight: 500;
  padding: 10px 20px; border-radius: 999px;
}
.btn-pill:hover { background: var(--green-hover); color: #FFFFFF; }
.btn-pill--lg { display: inline-block; font-size: 17px; padding: 15px 34px; }

/* ============ HERO ============ */
.hero { position: relative; overflow: hidden; padding: 130px 24px 190px; text-align: center; }
/* Above the fruit layer (z-index 1) — fruit falls behind the copy and the
   search bar, not across them. */
.hero__inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.hero__inner h1 {
  font-family: var(--serif); font-weight: 700; font-size: 58px; line-height: 1.08;
  letter-spacing: -0.015em; margin: 0 0 22px;
}
.hero__sub { font-size: 19px; color: var(--muted); margin: 0 0 44px; line-height: 1.5; }

.search-bar {
  position: relative; display: flex; align-items: center; background: #FFFFFF; border: 1px solid var(--card-border);
  border-radius: 999px; box-shadow: 0 8px 28px rgba(31,36,33,0.07);
  padding: 10px 10px 10px 28px; text-align: left;
}
/* A margin note in the whitespace beside the bar: the arrow's tip sits just
   off the submit button's lower-right corner, the words trail down the curve.
   It bows out the moment there's a real query to send. */
.try-me {
  position: absolute; left: calc(100% - 8px); top: calc(50% + 23px);
  display: flex; align-items: flex-end; color: var(--accent);
  pointer-events: none; white-space: nowrap;
  transition: opacity .3s ease;
  animation: try-me-bob 2.6s ease-in-out infinite;
}
.try-me__arrow { width: 80px; height: 56px; flex-shrink: 0; }
.try-me__text {
  font-family: var(--hand); font-size: 25px; line-height: 1; font-weight: 600;
  margin: 0 0 6px -4px; transform: rotate(-4deg);
}
.search-bar.is-filled .try-me { opacity: 0; }
@keyframes try-me-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* Below this the hero's side margins can't hold it, so the note tucks under
   the bar instead and the arrow sweeps up the other way into the button. */
@media (max-width: 1120px) {
  .try-me { left: auto; right: 60px; flex-direction: row-reverse; }
  .try-me__arrow { transform: scaleX(-1); }
  .try-me__text { margin: 0 -4px 6px 0; transform: rotate(4deg); }
}
/* At phone widths the space under the bar belongs to the note, so the whole
   thing flips above it and the arrow points down into the button instead. */
@media (max-width: 860px) {
  .try-me { top: -46px; right: 20px; align-items: flex-start; }
  .try-me__arrow { width: 64px; height: 44px; transform: scale(-1, -1); }
  .try-me__text { font-size: 22px; margin: 0 -2px 0 0; transform: rotate(-4deg); }
  .hero__sub { margin-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) { .try-me { animation: none; } }

/* Submit: the button fills in once there's something to send and lifts under
   the cursor; on send the arrow takes off as a ring expands out of the button. */
.search-bar__go {
  position: relative; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--green-pale); color: var(--green); font-size: 19px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease,
              transform .25s cubic-bezier(.22,.9,.28,1);
}
.search-bar__go-icon {
  display: block; line-height: 1;
  transition: transform .25s cubic-bezier(.22,.9,.28,1), opacity .2s ease;
}
.search-bar__go.is-armed { background: var(--green); color: #FFFFFF; }
.search-bar__go:hover, .search-bar__go:focus-visible {
  background: var(--green); color: #FFFFFF;
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(47,93,62,0.28);
}
.search-bar__go:hover .search-bar__go-icon,
.search-bar__go:focus-visible .search-bar__go-icon { transform: translateY(-2px); }
.search-bar__go:active { transform: scale(0.93); box-shadow: none; }
/* Expanding ring on send — outside the button, so it can't be clipped. */
.search-bar__go::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--green); opacity: 0; pointer-events: none;
}
.search-bar__go.is-launching {
  background: var(--green); color: #FFFFFF; transform: scale(1.06);
}
.search-bar__go.is-launching .search-bar__go-icon {
  transform: translateY(-14px); opacity: 0; transition-duration: .22s, .18s;
}
.search-bar__go.is-launching::after { animation: go-ring .5s ease-out forwards; }
.search-bar__go.is-nudging { animation: go-nudge .4s ease; }
@keyframes go-ring {
  from { opacity: 0.5; transform: scale(1); }
  to   { opacity: 0;   transform: scale(1.85); }
}
@keyframes go-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .search-bar__go, .search-bar__go-icon { transition: none; }
  .search-bar__go:hover, .search-bar__go:focus-visible { transform: none; }
  .search-bar__go.is-launching { transform: none; }
  .search-bar__go.is-launching::after,
  .search-bar__go.is-nudging { animation: none; }
}

/* Hero search bar: a real textarea, with the design's typed phrases shown as
   an animated ghost overlay. The ghost hides the moment the field is focused
   or has any content, so the animation never fights real input. */
.search-bar__field { position: relative; flex: 1; min-width: 0; display: flex; }
.search-bar textarea {
  flex: 1; min-width: 0; min-height: 46px; box-sizing: border-box; resize: none;
  overflow: hidden; border: none; outline: none; font-size: 17px; line-height: 1.35;
  color: var(--ink); background: transparent; font-family: inherit; padding: 11px 0;
  position: relative; z-index: 1;
}
.search-bar__ghost {
  position: absolute; inset: 0; display: flex; align-items: center;
  font-size: 17px; line-height: 1.35; color: var(--ink);
  pointer-events: none; white-space: pre; overflow: hidden;
}
.search-bar__ghost[hidden] { display: none; }
.search-bar__caret {
  display: inline-block; width: 2px; height: 22px; background: var(--green);
  margin-left: 2px; flex-shrink: 0; animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .search-bar__caret { animation: none; } }

.hero__note { font-size: 15.5px; color: var(--muted-2); margin: 26px 0 0; min-height: 22px; }

/* ============ STEPS INTRO ============ */
.steps-intro { padding: 110px 24px 10px; text-align: center; }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green); margin: 0 0 14px;
}
.steps-intro h2 {
  font-family: var(--serif); font-weight: 700; font-size: 40px; letter-spacing: -0.01em; margin: 0 0 12px;
}

/* ============ JOURNEY: five steps threaded on one timeline spine ============ */
.journey { max-width: 1080px; margin: 0 auto; }
.jstep {
  display: grid; grid-template-columns: 1fr 64px 1fr; gap: 40px;
  align-items: center; padding: 70px 24px;
}
.jstep--last { padding-bottom: 90px; }
/* Copy stays first in the DOM (reading + stacking order); on desktop the
   flipped rows re-order visually so the vignettes alternate sides. */
.jstep__copy { order: 1; }
.spine { order: 2; }
.vig { order: 3; }
.jstep--flip .jstep__copy { order: 3; }
.jstep--flip .vig { order: 1; }

.jstep__eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green); margin: 0 0 10px;
}
.jstep__copy h3 { font-family: var(--serif); font-weight: 700; font-size: 34px; margin: 0 0 16px; }
.jstep__copy p:not(.jstep__eyebrow) { font-size: 17px; color: var(--ink-2); line-height: 1.6; margin: 0; }

/* The spine itself */
.spine { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.spine__line { flex: 1; width: 2px; border-radius: 1px; background: var(--outline); transition: background .6s ease; }
.spine__line--blank { background: transparent; }
.spine__line.is-filled { background: var(--green); }
.spine__node {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--green); background: var(--bg); border: 1px solid var(--outline);
  transition: color .5s ease, background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.spine__node.is-reached { color: #FFFFFF; background: var(--green); border-color: var(--green); }
.spine__node.is-current { box-shadow: 0 0 0 6px var(--chip); }

/* ============ VIGNETTE (shared panel) ============ */
.vignette {
  position: relative; background: var(--panel); border: 1px solid var(--card-border);
  border-radius: 20px; padding: 32px; box-shadow: 0 2px 10px rgba(31,36,33,0.04);
  transition: transform .6s ease, box-shadow .6s ease;
}
.vig[data-vig="0"], .vig[data-vig="2"], .vig[data-vig="4"] { transform: rotate(-0.8deg); }
.vig[data-vig="1"], .vig[data-vig="3"] { transform: rotate(0.8deg); }
.vig.is-active { transform: rotate(0deg) scale(1.035); box-shadow: 0 24px 56px rgba(31,36,33,0.16); }
.vig__badge {
  position: absolute; top: -18px; left: -18px; width: 48px; height: 48px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 6px 18px rgba(31,36,33,0.14);
  display: flex; align-items: center; justify-content: center; font-size: 23px;
}

/* Elements that fade up as the story reaches them */
[data-appear] { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
[data-appear].is-in { opacity: 1; transform: translateY(0); }
.plan-grid__meal[data-appear] { opacity: 0.25; transform: translateY(6px); }
.plan-grid__meal[data-appear].is-in { opacity: 1; transform: translateY(0); }

/* Discover */
.mini-search {
  display: flex; align-items: center; background: #FFFFFF; border: 1px solid var(--card-border);
  border-radius: 999px; padding: 8px 8px 8px 20px;
}
.mini-search__q { flex: 1; font-size: 15px; color: var(--ink); min-height: 20px; }
.mini-search__go {
  width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #FFF;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.read-chips { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; flex-wrap: wrap; }
.read-chips__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2);
}
.chip {
  background: var(--chip); color: var(--green); font-size: 12.5px; font-weight: 500;
  padding: 4px 12px; border-radius: 999px;
}
.vignette__stack { display: flex; flex-direction: column; gap: 10px; }
.rcard {
  background: #FFFFFF; border: 1px solid var(--card-border); border-radius: 12px;
  padding: 12px 14px; display: flex; gap: 10px; align-items: center;
}
.rcard__thumb {
  width: 46px; height: 46px; border-radius: 10px; background: var(--panel);
  display: flex; align-items: center; justify-content: center; font-size: 23px; flex-shrink: 0;
}
.rcard__body { flex: 1; min-width: 0; }
.rcard__title { font-family: var(--serif); font-weight: 600; font-size: 15.5px; }
.rcard__meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.pill {
  font-size: 11px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--card-border);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
}
.rcard__time { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.rcard__save {
  font-size: 12.5px; font-weight: 500; padding: 4px 8px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0; box-sizing: border-box;
  color: var(--green); background: transparent;
  transition: color .35s ease, background .35s ease;
}
.rcard__save.is-saved { color: #FFFFFF; background: var(--green); }
/* Only this chip's label changes as the story plays. Carrying the width of its
   widest label from the outset means the swap to "Saved ✓" costs the row
   nothing, so the meta line beneath it never re-wraps part-way through. The
   label sits flush right so the narrower "Save" still lines up with the card
   below it while the reserved width goes unused. */
.rcard__save--live { text-align: right; }
.rcard__save--live::before {
  content: "Saved ✓"; display: block; height: 0; overflow: hidden; visibility: hidden;
}

/* Import */
.vignette--methods { display: flex; flex-direction: column; gap: 12px; }
.method-card {
  background: #FFFFFF; border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.method-card__icon {
  width: 34px; height: 34px; border-radius: 9px; background: var(--chip); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
}
.method-card__title { font-weight: 600; font-size: 14.5px; }
.method-card__desc { font-size: 13px; color: var(--muted-2); }
.method-card--highlight { border: 1.5px solid var(--green); position: relative; }
.method-card__icons { display: flex; gap: 6px; }
.badge-new {
  position: absolute; top: -9px; right: 14px; background: var(--green); color: #FFFFFF;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px;
}

/* Plan */
.plan-grid { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: stretch; }
.plan-grid__label {
  display: flex; align-items: center; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--muted-2);
}
.plan-grid__meal {
  background: #FFFFFF; border: 1px solid var(--card-border); border-radius: 10px; padding: 9px 14px;
  font-size: 14px; font-family: var(--serif); font-weight: 600; color: var(--ink);
}
.plan-grid__meal--hero { border: 1.5px solid var(--green); }

/* Shop */
.vignette__label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 14px;
}
.shop-list { display: flex; flex-direction: column; gap: 8px; }
.shop-aisle {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green);
}
.shop-aisle + .shop-row, .shop-aisle + .shop-row-wrap { margin-top: -2px; }
.shop-row-wrap { position: relative; }
.shop-row {
  display: flex; align-items: center; gap: 10px; background: #FFFFFF;
  border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 12px;
}
.shop-row__icon {
  width: 30px; height: 30px; border-radius: 8px; background: var(--panel);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.check {
  width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--outline);
  background: #FFFFFF; color: #FFFFFF; font-size: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .3s ease, border-color .3s ease;
}
.check.is-done { background: var(--green); border-color: var(--green); }
.check.is-done::after { content: "✓"; }
.shop-row__name { flex: 1; font-size: 14px; }
.shop-row__qty { font-size: 12.5px; color: var(--muted-2); }
.shop-row__chev {
  font-size: 13px; color: var(--muted-2); display: inline-block; line-height: 1;
  transition: transform .4s ease;
}
.shop-row__chev.is-open { transform: rotate(180deg); }
/* The "why 3 leeks?" receipt that opens under the row */
.shop-math {
  position: absolute; top: calc(100% + 6px); left: 40px; right: 0; z-index: 2;
  overflow: hidden; max-height: 0; opacity: 0; background: #FFFFFF; border-radius: 10px;
  pointer-events: none;              /* decorative, and inert while collapsed */
  border: 1px solid transparent;
  transition: max-height .5s ease, opacity .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.shop-math.is-open {
  max-height: 220px; opacity: 1; border-color: var(--card-border);
  box-shadow: 0 14px 34px rgba(31,36,33,0.16);
}
.shop-math__inner { padding: 14px 16px; }
.shop-math__label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.shop-math__row { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.shop-math__row + .shop-math__row { margin-top: 4px; }
.shop-math__row strong { font-weight: 600; color: var(--ink); }
.shop-math__total {
  border-top: 1px solid var(--hairline); margin-top: 10px; padding-top: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}

/* Cook */
.vignette--dark { background: var(--green); border: none; padding: 36px; color: var(--green-pale); }
.cook__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cook__title { font-family: var(--serif); font-weight: 600; font-size: 15px; }
.cook__title span { font-weight: 400; color: var(--green-soft); font-size: 12px; }
.cook__servings { white-space: nowrap; }
.cook__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green-soft); white-space: nowrap;
}
.cook__body { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; }
.cook__ings { display: flex; flex-direction: column; gap: 4px; }
.cook__ings-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green-soft); margin-bottom: 4px;
}
.cook__ing {
  display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 8px;
  border-radius: 8px; background: transparent; color: #CBDCCE; font-weight: 400;
  transition: background .4s ease, color .4s ease;
}
.cook__ing.is-active { background: rgba(255,255,255,0.16); color: #FFFFFF; font-weight: 600; }
.cook__dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--green-soft); flex-shrink: 0; }
.cook__ing-name { flex: 1; }
.cook__ing-qty { font-size: 10.5px; color: var(--green-soft); }
.cook__step-text {
  font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.4; min-height: 132px;
}
.progress { display: flex; gap: 8px; align-items: center; margin: 16px 0; }
.progress__seg { height: 4px; flex: 1; border-radius: 2px; background: var(--green-mid); transition: background .4s ease; }
.progress__seg--done { background: var(--green-soft); }
.progress__seg--current { background: var(--green-pale); }
.cook__actions { display: flex; gap: 10px; }
.cook__back {
  font-size: 13px; color: var(--green-soft); padding: 9px 18px;
  border: 1px solid var(--green-mid); border-radius: 999px;
}
.cook__next {
  flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--green);
  background: var(--green-pale); padding: 9px 18px; border-radius: 999px;
}

/* ============ COMPARISON (why this one) ============ */
.compare { text-align: center; padding: 110px 24px; background: var(--green); }
.compare h2 {
  font-family: var(--serif); font-weight: 700; font-size: 48px; letter-spacing: -0.01em;
  line-height: 1.15; margin: 0 0 14px; color: var(--bg);
}
.compare__sub { font-size: 18px; color: var(--green-soft); margin: 0 auto 48px; max-width: 460px; line-height: 1.55; }
.compare__card {
  max-width: 780px; margin: 0 auto; background: var(--bg); border-radius: 24px;
  padding: 40px 44px; box-shadow: 0 24px 60px rgba(0,0,0,0.18); text-align: left;
}
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare-table th, .compare-table td { padding: 15px 0; vertical-align: middle; }
.compare-table thead th { padding: 0 0 16px; border: none; }
.compare-table thead .col-us {
  text-align: center; font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--green);
}
.compare-table thead .col-them {
  text-align: center; font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--muted-2);
}
.compare-table tbody th {
  width: 44%; font-weight: 400; color: var(--ink-2); text-align: left;
  border-top: 1px solid var(--hairline); padding-right: 16px;
}
.compare-table tbody td { text-align: center; border-top: 1px solid var(--hairline); }
.compare-table td.col-us { font-weight: 600; color: var(--green-hover); background: var(--green-pale); }
.compare-table td.col-them { color: var(--muted-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.compare__cta { margin-top: 44px; }
.btn-pill--light { background: var(--bg); color: var(--green); font-weight: 600; }
.btn-pill--light:hover { background: var(--chip); color: var(--green-hover); }
.compare__fine { font-size: 14px; color: var(--green-soft); margin-top: 16px; }

/* ============ iOS TEASER ============ */
.ios-teaser { padding: 20px 24px 40px; }
.ios-teaser__card {
  max-width: 1080px; margin: 0 auto; background: var(--chip); border-radius: 24px;
  padding: 48px 56px; display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.ios-teaser__copy { max-width: 520px; }
.ios-teaser__copy .eyebrow { margin-bottom: 12px; }
.ios-teaser__copy h3 { font-family: var(--serif); font-weight: 700; font-size: 30px; margin: 0 0 12px; }
.ios-teaser__copy p { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.ios-teaser__phone {
  width: 110px; height: 220px; border-radius: 26px; border: 3px solid var(--outline);
  background: var(--bg); position: relative; flex-shrink: 0;
}
.ios-teaser__phone::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 6px; border-radius: 3px; background: var(--outline);
}
.ios-teaser__phone::after {
  content: ""; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 4px; border-radius: 2px; background: var(--outline);
}

/* ============ FAQ ============ */
.faq-section { max-width: 720px; margin: 0 auto; padding: 100px 24px 80px; }
.faq-section h2 {
  font-family: var(--serif); font-weight: 700; font-size: 38px; letter-spacing: -0.01em;
  margin: 0 0 40px; text-align: center;
}
.faq-list { display: flex; flex-direction: column; }
.faq { border-bottom: 1px solid var(--hairline); padding: 4px 0; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 0; font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__plus { color: var(--green); font-size: 22px; font-weight: 400; flex-shrink: 0; }
.faq p { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 20px; }
.faq ul { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 20px; padding-left: 22px; }
.faq li { margin-bottom: 8px; }
.faq li:last-child { margin-bottom: 0; }

/* ============ FOOTER ============ */
.footer {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 34px 48px; font-size: 14px; color: var(--muted-2);
}
.footer__logo { justify-self: start; }
.footer__links { justify-self: end; }
.footer__logo { display: block; height: 25px; width: auto; }
.footer__heart { color: var(--green); }
.footer__links { display: flex; gap: 24px; }
.footer__links a { color: var(--muted-2); }

/* Responsive: the mockup is desktop-first; stack below 860px. Values below
   come from the 390px "Mobile Landing Cleanup" design. The spine is a desktop
   device — on narrow screens the step number sits inline with the eyebrow,
   which is what the number meant all along. */
@media (max-width: 860px) {
  .nav { height: auto; padding: 12px 16px; }
  .nav__links { display: none; }
  .logo { height: 24px; }
  .nav__signin { display: none; }
  .nav__right .btn-pill { font-size: 13.5px; padding: 8px 14px; white-space: nowrap; }
  .btn-pill__tail { display: none; }

  /* The hedge sits in the flow under the note (44px gap + 56px hedge). */
  .hero { padding: 48px 20px 100px; }
  .hero__inner h1 { font-size: 34px; line-height: 1.1; margin-bottom: 14px; }
  .hero__sub { font-size: 16px; }
  .search-bar { padding: 8px 8px 8px 18px; }
  .search-bar textarea, .search-bar__ghost { font-size: 16px; }
  .search-bar textarea { min-height: 42px; padding: 9px 0; }
  .search-bar__caret { height: 18px; }
  .search-bar__go { width: 42px; height: 42px; font-size: 17px; }
  .hero__note { font-size: 14px; margin-top: 20px; min-height: 0; }
  .hero__hedge {
    height: 56px;
    background-size: 48px 48px, 100% 32px, 48px 48px;
    background-position: 0 8px, left bottom, 24px 0;
  }
  .hoop-toggle { bottom: 68px; }
  .hoop-score { bottom: 77px; }
  .hoop { bottom: 72px; }

  .steps-intro { padding: 44px 20px 0; }
  .steps-intro .eyebrow { font-size: 12px; margin-bottom: 10px; }
  .steps-intro h2 { font-size: 28px; margin-bottom: 0; }

  /* Each step becomes a two-column grid: number + eyebrow on the first row,
     then heading, copy and vignette full-width. The copy wrapper dissolves so
     its children can take grid cells of their own; the DOM order (copy, spine,
     vignette) stays as it is for reading and stacking. */
  .journey { padding: 8px 0 12px; }
  .jstep {
    grid-template-columns: auto minmax(0, 1fr); gap: 0 10px;
    align-items: start; padding: 36px 20px 4px;
  }
  .jstep--last { padding-bottom: 8px; }
  .jstep__copy { display: contents; }
  .spine, .jstep--flip .spine {
    grid-column: 1; grid-row: 1; flex-direction: row; align-self: center;
  }
  .spine__line { display: none; }
  .spine__node, .spine__node.is-reached {
    width: 26px; height: 26px; font-size: 14px;
    color: #FFFFFF; background: var(--green); border-color: var(--green);
  }
  .spine__node.is-current { box-shadow: none; }
  .jstep__eyebrow { grid-column: 2; grid-row: 1; align-self: center; font-size: 12px; margin: 0; }
  .jstep__copy h3 { grid-column: 1 / -1; grid-row: 2; font-size: 24px; margin: 12px 0 10px; }
  .jstep__copy p:not(.jstep__eyebrow) { grid-column: 1 / -1; grid-row: 3; font-size: 15.5px; margin: 0 0 24px; }
  .vig, .jstep--flip .vig { grid-column: 1 / -1; grid-row: 4; }
  /* Tilt reads as sloppiness at phone widths; keep the panels square. */
  .vig[data-vig], .vig.is-active { transform: none; }
  .vig.is-active { box-shadow: 0 12px 28px rgba(31,36,33,0.12); }
  .vignette { border-radius: 18px; padding: 20px; }
  .vig__badge { width: 38px; height: 38px; font-size: 18px; top: -14px; left: auto; right: 16px; }

  /* Discover */
  .mini-search { padding: 6px 6px 6px 14px; }
  .mini-search__q { font-size: 14px; }
  .mini-search__go { width: 32px; height: 32px; font-size: 14px; }
  .read-chips { gap: 6px; margin: 12px 0 10px; }
  .read-chips__label { font-size: 10px; }
  .chip { font-size: 12px; padding: 3px 10px; }
  .vignette__stack { gap: 8px; }
  .rcard { padding: 10px 12px; }
  .rcard__thumb { width: 40px; height: 40px; font-size: 20px; }
  .rcard__title { font-size: 14.5px; }
  .rcard__meta { margin-top: 4px; }
  .pill--wide { display: none; }
  .rcard__time { font-size: 11.5px; }
  .rcard__save { font-size: 12px; padding: 3px 8px; }

  /* Import */
  .vignette--methods { gap: 10px; }
  .method-card { padding: 12px 14px; gap: 10px; }
  .method-card__icon { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
  .method-card__icons .method-card__icon { width: 30px; height: 30px; }
  .method-card__icons svg { width: 14px; height: 14px; }
  .method-card__title { font-size: 14px; }
  .method-card__desc { font-size: 12.5px; }
  .badge-new { top: -9px; right: 12px; font-size: 10px; padding: 2px 8px; }

  /* Plan */
  .plan-grid { grid-template-columns: 44px minmax(0, 1fr); }
  .plan-grid__label { font-size: 12px; }
  .plan-grid__meal { padding: 8px 12px; font-size: 13.5px; }

  /* Shop */
  .vignette__label { font-size: 11px; margin-bottom: 12px; }
  .shop-aisle { font-size: 10px; }
  .shop-aisle + .shop-row, .shop-aisle + .shop-row-wrap { margin-top: 0; }
  .shop-row + .shop-aisle, .shop-row-wrap + .shop-aisle { margin-top: 4px; }
  .shop-row { padding: 8px 10px; }
  .shop-row__icon { width: 28px; height: 28px; font-size: 15px; }
  .shop-row__name { font-size: 13.5px; }
  .shop-row__qty { font-size: 12px; }
  .shop-math { left: 30px; }

  /* Cook: eyebrow above the title, the step before the ingredients. */
  .vignette--dark { padding: 22px; }
  .cook__head { flex-direction: column-reverse; align-items: flex-start; gap: 6px; margin-bottom: 0; }
  .cook__title { font-size: 14.5px; }
  .cook__eyebrow { font-size: 10.5px; }
  .cook__body { grid-template-columns: 1fr; gap: 0; }
  .cook__main { order: 1; }
  .cook__ings { order: 2; gap: 4px; }
  .cook__ings-label { margin-bottom: 2px; }
  .cook__ing { font-size: 12.5px; }
  .cook__step-text { min-height: 0; font-size: 17.5px; line-height: 1.45; margin: 14px 0; }
  .progress { gap: 6px; margin: 0 0 14px; }
  .cook__actions { gap: 8px; margin-bottom: 18px; }
  .cook__back, .cook__next { padding: 8px 16px; }

  /* Comparison: the table stacks into one card per feature — the label on
     top, then the two tiers side by side. */
  .compare { padding: 52px 20px; margin-top: 24px; }
  .compare h2 { font-size: 26px; line-height: 1.2; margin-bottom: 10px; }
  .compare h2 br { display: none; }
  .compare__sub { font-size: 15px; margin-bottom: 28px; }
  .compare__card { border-radius: 20px; padding: 20px 16px; }
  .compare-table, .compare-table thead, .compare-table tbody { display: block; }
  .compare-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; align-items: stretch; }
  .compare-table thead tr { padding-bottom: 6px; border-bottom: 1px solid var(--hairline); align-items: end; }
  .compare-table thead th:first-child { display: none; }
  .compare-table thead th { padding: 0; }
  .compare-table thead .col-us { font-size: 17px; }
  .compare-table thead .col-them { font-size: 14.5px; }
  .compare-table tbody tr { margin-top: 14px; }
  .compare-table tbody th {
    grid-column: 1 / -1; width: auto; border: none; padding: 0; text-align: center;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted-2);
  }
  .compare-table tbody td {
    border: none; border-radius: 10px; padding: 9px 10px;
    display: flex; align-items: center; justify-content: center;
  }
  .compare-table td.col-us { border: 1px solid #DCE5DC; font-size: 13.5px; }
  .compare-table td.col-them { background: #FAFAF8; font-size: 13px; }
  .compare__cta { margin-top: 28px; }
  .btn-pill--lg { font-size: 16px; padding: 13px 30px; }
  .compare__fine { font-size: 13px; margin-top: 12px; }

  .ios-teaser { padding: 20px 20px 0; }
  .ios-teaser__card { border-radius: 20px; padding: 28px 22px; text-align: center; gap: 0; }
  .ios-teaser__copy .eyebrow { font-size: 12px; margin-bottom: 10px; }
  .ios-teaser__copy h3 { font-size: 22px; margin-bottom: 10px; }
  .ios-teaser__copy p { font-size: 15px; }
  .ios-teaser__phone { display: none; }

  .faq-section { padding: 48px 20px 36px; }
  .faq-section h2 { font-size: 28px; margin-bottom: 20px; }
  .faq { padding: 2px 0; }
  .faq summary { gap: 14px; padding: 16px 0; font-size: 16.5px; }
  .faq__plus { font-size: 20px; }
  .faq p, .faq ul { font-size: 14.5px; margin-bottom: 18px; }
  .faq p + ul { margin-top: -6px; }
  .faq ul { padding-left: 20px; }

  .footer {
    grid-template-columns: 1fr; gap: 10px; text-align: center;
    padding: 24px 20px 32px; font-size: 13px;
  }
  .footer__logo, .footer__links { justify-self: center; }
  .footer__logo { height: 20px; }
  .footer__links { gap: 18px; }
}