/* ─────────────────────────────────────────────────────────────────────────
   Meal Whisperer — Shared stylesheet for marketing sub pages
   Load order: colors_and_type.css, landing.css, then this file.
   Reuses landing.css's .wrap, .eyebrow, .display, .section-title, .lede,
   .deck-italic, .btn-cta, .btn-ghost, .link-arrow, .site-header, the
   .phone-stage family, .site-footer and the 980/720/520 breakpoints.
   Everything below is new: components for the pages' own sections.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Two colours used only on the dark (Halloween) page; no site token covers
     them, since every other dark surface in the system is --mw-forest. */
  --page-ink:        #15201A;
  --page-sage-light: #97AC7E;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body.page {
  background: var(--mw-paper);
  color: var(--mw-ink);
  font-family: var(--mw-font-sans);
  -webkit-font-smoothing: antialiased;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--mw-sage);
  outline-offset: 3px;
}

body.page .section-title {
  font-size: clamp(34px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.01em;
  text-wrap: balance;
}

/*
  <section class="sect"> ... </section>
  <section class="sect flush-top"> ... </section>
  <section class="sect white"><div class="wrap"> ... </div></section>
*/
.sect { padding: clamp(64px, 9vw, 120px) 0; }
.sect.flush-top { padding-top: 0; }
.sect.white {
  background: var(--mw-card);
  border-top: 1px solid var(--mw-hairline);
  border-bottom: 1px solid var(--mw-hairline);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
/*
  <div class="wrap">
    <nav class="breadcrumb" aria-label="Breadcrumb">
      <ol>
        <li><a href="/">Home</a></li>
        <li aria-current="page">Mealime alternative</li>
      </ol>
    </nav>
  </div>
*/
.breadcrumb { padding-top: 0; }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  font-size: 14px; color: var(--mw-muted);
}
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "/"; color: var(--mw-muted); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mw-sage); }
.breadcrumb [aria-current="page"] { color: var(--mw-ink); }

/* ── Sub-hero ────────────────────────────────────────────────────────────── */
/*
  <section>
    <div class="wrap sub-hero">
      <div class="sub-hero-copy">
        <div class="kicker-row"> ... </div>
        <h1>Looking for a Mealime alternative?</h1>
        <p class="deck">Mealime is closing. Dinner isn't.</p>
        <p class="body">Mealime is shutting down ...</p>
        <div class="cta-row">
          <a class="btn-cta" href="#">Try Meal Whisperer free</a>
          <span class="note">Available on the App Store.</span>
        </div>
      </div>
      <div class="sub-hero-media">
        <div class="phone-stage"> ... <div class="phone"> ... </div> </div>
        <!-- or: <img class="sub-hero-photo" src="..." alt="" width="800" height="800"> -->
        <!-- width/height attrs are for layout stability only; the rule sets height: auto so aspect-ratio wins. -->
      </div>
    </div>
  </section>
*/
.sub-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  /* longhand on purpose: .sub-hero shares its element with .wrap (same
     pattern as landing.css's ".wrap.hero-inner"), and a padding shorthand
     here would zero out .wrap's left/right gutters. */
  padding-top: clamp(40px, 7vw, 96px);
  padding-bottom: clamp(64px, 8vw, 112px);
}
.sub-hero-copy {
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
}
.sub-hero h1 {
  font-family: var(--mw-font-display); font-weight: 500;
  font-size: clamp(44px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.015em;
  text-wrap: balance; margin: 0; color: var(--mw-ink);
}
.sub-hero .deck {
  font-family: var(--mw-font-display); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.2; color: var(--mw-sage); margin: 0;
}
.sub-hero .body {
  font-size: 19px; line-height: 1.6; color: var(--mw-ink-soft);
  max-width: 600px; text-wrap: pretty; margin: 0;
}
.sub-hero-media { display: flex; justify-content: center; }
.sub-hero-photo {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--mw-r-xl);
  box-shadow: 0 30px 70px rgba(44, 70, 50, 0.18);
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.cta-row .note { font-size: 15px; font-style: normal; color: var(--mw-muted); }

/* ── Badges, kickers, chips ──────────────────────────────────────────────── */
/*
  <div class="kicker-row">
    <span class="badge-warn">Mealime shuts down October 21, 2026</span>
    <p class="eyebrow">Seasonal Cookbook · Halloween</p>
  </div>
  <div class="chips">
    <span class="chip solid">13 recipes</span>
    <span class="chip">Appetizers</span>
  </div>
*/
.badge-warn {
  display: inline-flex; align-items: center;
  background: var(--mw-warning-bg); color: #9A5212;
  font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: var(--mw-r-pill);
}
.kicker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: var(--mw-r-pill);
  background: var(--mw-soft-sage); color: var(--mw-sage-dark);
}
.chip.solid { background: var(--mw-paper); color: var(--mw-ink); font-weight: 600; }

/* ── Feature rows (numbered 01-07 list) ──────────────────────────────────── */
/*
  <div class="feature-rows">
    <div class="feature-row">
      <div class="num">01</div>
      <h2>Your whole week, planned around you.</h2>
      <div class="copy">
        <p>Get a personalized week of dinners based on how you actually eat.</p>
        <p>Keep what you like. Swap what you don't.</p>
      </div>
    </div>
  </div>
*/
.feature-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.2fr);
  column-gap: clamp(32px, 6vw, 80px);
  padding: 36px 0;
  border-bottom: 1px solid var(--mw-hairline);
}
.feature-row:last-child { border-bottom: none; }
.feature-row .num {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--mw-sage); padding-top: 12px;
}
.feature-row h2 {
  font-family: var(--mw-font-display); font-weight: 500;
  font-size: clamp(28px, 3vw, 38px); line-height: 1.15; margin: 0; color: var(--mw-ink);
}
.feature-row .copy { font-size: 17px; line-height: 1.65; color: var(--mw-ink-soft); }
.feature-row .copy p { margin: 0; }
.feature-row .copy p + p { margin-top: 12px; }

/* ── Numbered feature cards ──────────────────────────────────────────────── */
/*
  <div class="num-cards">
    <div class="num-card">
      <div class="num">01</div>
      <h3>Plan the week</h3>
      <p>Get a personalized week of dinners ...</p>
    </div>
  </div>
*/
.num-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(28px, 3vw, 40px);
}
.num-card {
  border-top: 2px solid var(--mw-sage); padding-top: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.num-card .num { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; color: var(--mw-sage); }
.num-card h3 { font-family: var(--mw-font-display); font-weight: 500; font-size: 26px; margin: 0; color: var(--mw-ink); }
.num-card p { font-size: 16px; line-height: 1.65; color: var(--mw-ink-soft); margin: 0; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
/*
  <div class="grid-2">
    <div class="card">
      <h3>Know what you want?</h3>
      <p class="sub">Tell Meal Whisperer.</p>
      <div class="quotes"> ... </div>
      <p>Meal Whisperer Plus can create a personalized recipe ...</p>
    </div>
    <div class="card wash">
      <h3>Don't know what you want?</h3>
      <p class="sub">You don't need a prompt.</p>
      <p class="big">Surprise Me</p>
      <p>Surprise Me can create something personalized ...</p>
    </div>
  </div>
*/
.card {
  background: var(--mw-card); border-radius: var(--mw-r-xl);
  padding: clamp(28px, 3vw, 40px); box-shadow: var(--mw-shadow-card);
  display: flex; flex-direction: column; gap: 18px;
}
.card.wash { background: var(--mw-wash); box-shadow: none; }
.card h3 { font-family: var(--mw-font-display); font-weight: 500; font-size: 30px; margin: 0; color: var(--mw-ink); }
.card p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--mw-ink-soft); }
.card .sub { font-size: 17px; color: var(--mw-ink-soft); }
.card .big {
  font-family: var(--mw-font-display); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.15; color: var(--mw-forest); padding: 12px 0;
}
.grid-2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px;
}

/* ── Quotes ──────────────────────────────────────────────────────────────── */
/*
  <div class="quotes">
    <blockquote class="quote">"Something cozy and easy for dinner."</blockquote>
    <blockquote class="quote">"High protein, but not another chicken breast."</blockquote>
  </div>
  <div class="quotes inline">
    <blockquote class="quote">"Use the salmon I have."</blockquote>
  </div>
  Note: nested inside .card.wash, the quote keeps its paper background on purpose.
*/
.quotes { display: flex; flex-direction: column; gap: 10px; }
.quotes.inline { flex-direction: row; flex-wrap: wrap; gap: 8px 12px; }
.quote {
  margin: 0; align-self: flex-start;
  background: var(--mw-paper); border-radius: var(--mw-r-lg); padding: 12px 18px;
  font-family: var(--mw-font-display); font-style: italic; font-weight: 400;
  font-size: 19px; color: var(--mw-ink);
}
.quotes.inline .quote { border-radius: var(--mw-r-pill); padding: 14px 22px; align-self: auto; }

/* ── Comparison table ────────────────────────────────────────────────────── */
/*
  <div class="cmp scroll">
    <table class="cmp-table">
      <thead>
        <tr>
          <th scope="col">Capability</th>
          <th scope="col" class="col-mw">Meal Whisperer</th>
          <th scope="col">Mealime / Meals Hub</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Plans your week</th>
          <td class="col-mw"><span class="yes">&#10003;</span></td>
          <td><span class="yes">&#10003;</span> <span class="tier">Pro</span></td>
        </tr>
        <tr>
          <th scope="row">Creates what you're craving</th>
          <td class="col-mw"><span class="yes">&#10003;</span> <span class="tier">Plus</span></td>
          <td><span class="no">&mdash;</span></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="cmp-notes">
    <p class="lead">Mealime is shutting down? <a href="#">See our guide &rarr;</a></p>
    <p>Last checked September 2026.</p>
  </div>
*/
.cmp {
  background: var(--mw-card); border-radius: var(--mw-r-xl);
  box-shadow: var(--mw-shadow-card); overflow: hidden;
  position: relative;
}
.cmp.scroll { overflow-x: auto; }
.cmp.scroll .cmp-table { min-width: 760px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.cmp-table thead th {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--mw-muted); padding: 20px 12px; text-align: center;
}
.cmp-table thead th:first-child { text-align: left; padding-left: 24px; }
.cmp-table tbody tr { border-top: 1px solid var(--mw-hairline); }
.cmp-table tbody th[scope="row"] {
  text-align: left; font-weight: 400; color: var(--mw-ink); padding: 16px 24px;
}
.cmp-table tbody td { padding: 16px 12px; text-align: center; color: var(--mw-ink-soft); }
.cmp-table .col-mw { background: var(--mw-wash); color: var(--mw-forest); font-weight: 600; }
.no { color: var(--mw-muted); }
.partial { font-size: 13px; font-weight: 500; color: var(--mw-muted); }
.tier { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--mw-muted); }
.col-mw .tier { color: var(--mw-sage); }
.cmp-notes { font-size: 14px; line-height: 1.6; color: var(--mw-muted); max-width: 820px; }
.cmp-notes p { margin: 0; }
.cmp-notes p + p { margin-top: 10px; }
.cmp-notes .lead { font-size: 16px; color: var(--mw-ink-soft); }

/* ── Mode cards ──────────────────────────────────────────────────────────── */
/*
  <section class="sect band-wash">
    <div class="wrap">
      <h2 class="section-title">How much do you want to think about dinner?</h2>
      <div class="mode-cards">
        <div class="mode-card">
          <h3>Not at all.</h3>
          <p class="pick">Surprise Me.</p>
        </div>
      </div>
    </div>
  </section>

  Standalone (not inside .band-wash):
  <div class="mode-cards">
    <div class="mode-card">
      <h3>Surprise Me</h3>
      <p class="when">When you don't want to decide.</p>
      <p>No searching. No prompt required.</p>
    </div>
  </div>
*/
.mode-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px;
}
.mode-card {
  background: var(--mw-paper); border-radius: var(--mw-r-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.mode-card h3 { font-family: var(--mw-font-display); font-weight: 500; font-size: 26px; margin: 0; color: var(--mw-ink); }
.mode-card .when { font-size: 15px; font-weight: 600; color: var(--mw-sage); margin: 0; }
.mode-card p { font-size: 15px; line-height: 1.6; color: var(--mw-ink-soft); margin: 0; }

.band-wash { background: var(--mw-wash); padding: clamp(64px, 9vw, 112px) 0; }
.band-wash .mode-card {
  background: var(--mw-card); box-shadow: var(--mw-shadow-card);
  min-height: 180px; justify-content: space-between; gap: 20px;
}
.band-wash .mode-card h3 {
  font-family: var(--mw-font-display); font-style: italic; font-weight: 400;
  font-size: 24px; line-height: 1.3; color: var(--mw-ink-soft);
}
.band-wash .mode-card .pick { font-size: 18px; font-weight: 600; color: var(--mw-forest); margin: 0; }

/* ── Wash panel ──────────────────────────────────────────────────────────── */
/*
  <div class="panel-wash">
    <h2>What happens to Mealime?</h2>
    <div class="copy">
      <p>Mealime says its app will shut down on October 21, 2026 ...</p>
      <p>If you're looking for a meal planner that goes beyond ...</p>
      <a class="btn-cta" href="#">Try Meal Whisperer free</a>
    </div>
  </div>
*/
.panel-wash {
  background: var(--mw-wash); border-radius: var(--mw-r-2xl); padding: clamp(32px, 6vw, 72px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
.panel-wash h2 {
  font-family: var(--mw-font-display); font-weight: 500;
  font-size: clamp(34px, 4vw, 48px); line-height: 1.1; margin: 0; color: var(--mw-ink);
}

/* ── Android/web hero nudge ──────────────────────────────────────────────── */
/*
  <p class="trust-line">...</p>
  <p class="android-nudge"><a href="#waitlist">On Android? Get one email when Meal Whisperer arrives.</a></p>
*/
.android-nudge { margin: 6px 0 0; max-width: 34em; }
.android-nudge a {
  font-size: 13.5px; font-weight: 600; color: var(--mw-sage);
  text-decoration: underline; text-underline-offset: 2px;
}
.android-nudge a:hover { color: var(--mw-sage-deep); }

/* ── Waitlist form (built on .panel-wash) ───────────────────────────────── */
/*
  <div class="panel-wash">
    <h2>Not on iPhone yet?</h2>
    <div class="wl-panel">
      <p class="copy">Meal Whisperer is on iPhone and iPad today...</p>
      <form class="wl-form" novalidate>
        <label class="wl-label" for="waitlistEmail">Email address</label>
        <input class="wl-input" type="email" id="waitlistEmail" name="email" required>
        <fieldset class="wl-choices">
          <legend class="wl-legend">Notify me about</legend>
          <label class="wl-choice"><input type="radio" name="list" value="android" checked><span>Android</span></label>
          <label class="wl-choice"><input type="radio" name="list" value="web"><span>Web</span></label>
        </fieldset>
        <button type="submit" class="btn-cta wl-submit" disabled>Notify me</button>
        <p class="wl-status" role="status" aria-live="polite"></p>
        <noscript><p class="wl-noscript">To join the waitlist, email <a href="mailto:hello@mealwhisperer.com">hello@mealwhisperer.com</a>.</p></noscript>
      </form>
    </div>
  </div>
  waitlist.js wires the fetch + status text; every tap target below is at
  least 44px tall for comfortable use on a 390px-wide phone.
*/
.wl-panel { display: flex; flex-direction: column; gap: 20px; }
.wl-form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.wl-label { font-size: 14px; font-weight: 600; color: var(--mw-ink); }
.wl-input {
  min-height: 44px; width: 100%;
  background: var(--mw-card); color: var(--mw-ink);
  border: 1px solid var(--mw-hairline); border-radius: var(--mw-r-pill);
  padding: 12px 20px; font-family: var(--mw-font-sans); font-size: 15px;
  box-shadow: 0 1px 2px rgba(20,35,20,0.04);
  transition: border-color .18s var(--mw-ease), box-shadow .18s var(--mw-ease);
}
.wl-input::placeholder { color: var(--mw-muted); }
.wl-input:focus {
  outline: none; border-color: var(--mw-sage);
  box-shadow: 0 0 0 3px rgba(84,105,79,0.15);
}
.wl-choices { display: flex; flex-wrap: wrap; gap: 20px; border: 0; margin: 0; padding: 0; }
.wl-legend {
  width: 100%; padding: 0; margin: 0 0 2px;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--mw-ink-soft);
}
.wl-choice {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 15px; color: var(--mw-ink); cursor: pointer;
}
.wl-choice input[type="radio"] { width: 20px; height: 20px; accent-color: var(--mw-sage); cursor: pointer; }
.wl-submit { align-self: flex-start; min-height: 44px; }
.wl-submit:disabled, .wl-submit[aria-disabled="true"] {
  opacity: 0.6; cursor: not-allowed; transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 6px rgba(44,70,50,0.16);
}
.wl-status { min-height: 1.3em; margin: 0; font-size: 14px; font-weight: 500; color: var(--mw-ink-soft); }
.wl-status.is-success { color: var(--mw-sage-dark); }
.wl-status.is-error { color: var(--mw-danger); }
.wl-noscript { margin: 0; font-size: 14px; color: var(--mw-ink-soft); }
.wl-noscript a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 390px) {
  .wl-submit { align-self: stretch; }
}

/* ── Two-column layout + reusable copy block ────────────────────────────── */
/*
  <div class="two-col">
    <div>
      <h2>Halloween Party Food Worth Gathering Around</h2>
    </div>
    <div class="copy">
      <p class="lead-italic">Halloween food can be playful without becoming a craft project.</p>
      <p>Spooky Soirée is filled with Halloween recipes designed for an actual party ...</p>
    </div>
  </div>
*/
.two-col { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 80px); }
.two-col > :first-child { flex: 1 1 280px; }
.two-col > :last-child { flex: 2 1 460px; min-width: 0; }
.two-col h2 {
  font-family: var(--mw-font-display); font-weight: 500;
  font-size: clamp(34px, 4vw, 48px); line-height: 1.1; margin: 0; color: var(--mw-ink);
  text-wrap: balance;
}
body.page-dark .two-col:not(.faq) > :first-child,
body.page-dark .two-col:not(.faq) > :last-child { flex: 1 1 400px; }
.lead-italic {
  font-family: var(--mw-font-display); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2vw, 24px); line-height: 1.35; color: var(--mw-ink); margin: 0;
}
/* Reusable longform copy block — also used inside .panel-wash. */
.copy { font-size: 18px; line-height: 1.65; color: var(--mw-ink-soft); text-wrap: pretty; }
.copy p { margin: 0; }
.copy p + p { margin-top: 18px; }

/* ── Step cards ──────────────────────────────────────────────────────────── */
/*
  <ol class="step-cards">
    <li class="step-card">
      <span class="n">1</span>
      <span>Save your favorite Mealime recipes.</span>
    </li>
  </ol>
*/
.step-cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px;
}
.step-card {
  background: var(--mw-card); border-radius: var(--mw-r-lg); padding: 26px;
  box-shadow: var(--mw-shadow-card); display: flex; flex-direction: column; gap: 14px;
  font-size: 17px; line-height: 1.5; color: var(--mw-ink);
}
.step-card .n {
  font-family: var(--mw-font-display); font-weight: 400; font-size: 40px; line-height: 1; color: var(--mw-sage);
}

/* ── FAQ (built on .two-col) ─────────────────────────────────────────────── */
/*
  <div class="two-col faq">
    <h2>Frequently asked questions</h2>
    <div class="faq-list">
      <div class="faq-item">
        <h3>Is Mealime shutting down?</h3>
        <p>Yes. Mealime currently says its app will shut down on October 21, 2026.</p>
      </div>
    </div>
  </div>
*/
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  padding: 24px 0; border-top: 1px solid var(--mw-hairline);
  display: flex; flex-direction: column; gap: 10px;
}
.faq-item:last-child { border-bottom: 1px solid var(--mw-hairline); }
.faq-item h3 {
  font-family: var(--mw-font-display); font-weight: 500; font-size: 22px; line-height: 1.3;
  color: var(--mw-ink); margin: 0;
}
.faq-item p { font-size: 16px; line-height: 1.65; color: var(--mw-ink-soft); text-wrap: pretty; margin: 0; }

/* ── Chapter cards ───────────────────────────────────────────────────────── */
/*
  <div class="chapter-cards">
    <article class="chapter">
      <img class="chapter-photo" src="assets/halloween-apps.webp" alt="">
      <p class="eyebrow">To Start</p>
      <h2>Halloween Appetizers &amp; Party Bites</h2>
      <p class="deck">Start with something savory.</p>
      <p>Build your Halloween party menu around appetizers ...</p>
      <a class="link-arrow" href="#">Explore Halloween Appetizers in the app <span class="arw">&rarr;</span></a>
    </article>
  </div>
*/
.chapter-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px;
}
.chapter {
  background: var(--mw-card); border-radius: var(--mw-r-xl); padding: 32px;
  box-shadow: var(--mw-shadow-card); display: flex; flex-direction: column; gap: 16px;
}
.chapter-photo {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--mw-r-md); margin-bottom: 4px;
}
.chapter h2 {
  font-family: var(--mw-font-display); font-weight: 500; font-size: 30px; line-height: 1.15;
  margin: 0; color: var(--mw-ink);
}
.chapter .deck { font-family: var(--mw-font-display); font-style: italic; font-weight: 400; font-size: 20px; color: var(--mw-ink-soft); margin: 0; }
.chapter p { font-size: 16px; line-height: 1.65; color: var(--mw-ink-soft); margin: 0; }
.chapter .link-arrow { margin-top: auto; padding: 10px 0; display: inline; }
.chapter .link-arrow .arw { display: inline; margin-left: 4px; }

/* ── Dark forest band ────────────────────────────────────────────────────── */
/*
  <section class="band-dark">
    <div class="wrap">
      <p class="eyebrow">Now on the App Store</p>
      <h2>Your next week of dinners is waiting.</h2>
      <p>Plan the week. Prep ahead. Ask for exactly what you want.</p>
      <a class="btn-paper" href="#">Try Meal Whisperer free</a>
      <p class="tagline">Food you love, tailored to you.</p>
    </div>
  </section>
  <section class="band-dark ink"> ... </section>  (Halloween page variant)
*/
.band-dark { background: var(--mw-forest); color: var(--mw-paper); text-align: center; padding: clamp(72px, 10vw, 128px) 0; }
.band-dark .wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.band-dark h2 {
  font-family: var(--mw-font-display); font-weight: 500;
  font-size: clamp(40px, 5vw, 68px); line-height: 1.05; letter-spacing: -0.015em;
  text-wrap: balance; margin: 0; color: inherit;
}
.band-dark p { font-size: 19px; line-height: 1.6; color: var(--mw-soft-sage); max-width: 620px; margin: 0; }
.band-dark .tagline {
  font-family: var(--mw-font-display); font-style: italic; font-weight: 400;
  font-size: 22px; color: var(--mw-soft-sage); padding-top: 18px; margin: 0;
}
.band-dark .eyebrow { color: var(--page-sage-light); }
.band-dark.ink { background: var(--page-ink); }
.band-dark p.eyebrow {
  font-size: 12px; line-height: 1.5; letter-spacing: 0.22em; max-width: none;
}
.band-dark a:focus-visible {
  outline-color: var(--mw-paper);
}

.btn-paper {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mw-paper); color: var(--mw-ink);
  font-size: 16px; font-weight: 600; padding: 16px 28px; border-radius: var(--mw-r-pill);
  transition: background var(--mw-dur) var(--mw-ease);
}
.btn-paper:hover { background: var(--mw-card); }
.btn-paper.sm { padding: 13px 24px; }

/* ── Ghost button, CTA size (secondary button) ──────────────────────────── */
.btn-ghost.lg {
  padding: 15px 28px; font-size: 15px; color: var(--mw-ink); border: 1px solid var(--mw-ink);
}
.btn-ghost.lg:hover { background: var(--mw-ink); color: #fff; }

/* ── Dark page variant (Halloween) ───────────────────────────────────────── */
/*
  <body class="mw page page-dark">
  Header markup must stay byte-identical to index.html's; everything here
  keys off body.page-dark, never off a header class, so build-legal.mjs's
  header sync never drifts from this theme.

  <header class="site-header scrolled"> ... same markup as index.html ... </header>

  <header class="hero-dark">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="Breadcrumb"> ... </nav>
    </div>
    <div class="wrap sub-hero">
      <div class="sub-hero-copy">
        <div class="kicker-row"> ... </div>
        <h1>Halloween Recipes for a Spooky Soirée</h1>
        <p class="deck">A little spooky. Very good to eat.</p>
        <p class="body">Set the table for Halloween with ...</p>
        <div class="chips"> ... </div>
        <div class="cta-row">
          <a class="btn-paper" href="#">Download the app</a>
          <span class="note">Free for everyone, October 9-13.</span>
        </div>
      </div>
      <div class="sub-hero-media">
        <img class="sub-hero-photo" src="assets/halloween-fudge.png" alt="">
      </div>
    </div>
  </header>
*/
body.page-dark .site-header.scrolled {
  background: color-mix(in srgb, var(--page-ink) 92%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
body.page-dark .site-header .wordmark { color: var(--mw-paper); }
body.page-dark .site-header .wordmark .dot { color: var(--page-sage-light); }
body.page-dark .site-header .nav-links a { color: var(--mw-soft-sage); }
body.page-dark .site-header .nav-links a:hover { color: #fff; }
body.page-dark .site-header .nav-links a[aria-current="page"] { color: #fff; }
body.page-dark .site-header .nav-links a[aria-current="page"]::after { background: var(--page-sage-light); }
body.page-dark .site-header .nav-toggle { color: var(--mw-soft-sage); }
body.page-dark .site-header .nav-toggle:hover { color: #fff; }
body.page-dark .site-header .btn-cta.sm { background: var(--mw-paper); color: var(--mw-ink); }
body.page-dark .site-header .btn-cta.sm:hover { background: #fff; color: var(--mw-ink); }
body.page-dark .site-header a:focus-visible { outline-color: var(--mw-paper); }
body.page-dark .site-header .nav-toggle:focus-visible { outline-color: var(--mw-paper); }

body.page-dark .hero-dark { background: var(--page-ink); color: var(--mw-paper); }
/* min-width-scoped so this never outranks the 980px single-column collapse
   below, which it otherwise would: two classes beat .sub-hero's one. */
@media (min-width: 981px) {
  body.page-dark .sub-hero { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); }
}
body.page-dark .hero-dark .breadcrumb ol { color: var(--page-sage-light); }
body.page-dark .hero-dark .breadcrumb a { color: var(--mw-soft-sage); }
body.page-dark .hero-dark .breadcrumb a:hover { color: #fff; }
body.page-dark .hero-dark .breadcrumb li + li::before { color: var(--page-sage-light); }
body.page-dark .hero-dark .breadcrumb [aria-current="page"] { color: var(--mw-paper); }
body.page-dark .hero-dark h1 { color: var(--mw-paper); }
body.page-dark .hero-dark .deck { color: var(--mw-soft-sage); }
body.page-dark .hero-dark .body { color: var(--mw-soft-sage); }
body.page-dark .hero-dark strong { color: #fff; }
body.page-dark .hero-dark .chip { background: rgba(242, 245, 240, 0.12); color: var(--mw-soft-sage); }
body.page-dark .hero-dark .chip.solid { background: var(--mw-paper); color: var(--mw-ink); }
body.page-dark .hero-dark .sub-hero-photo { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
body.page-dark .hero-dark .note { color: var(--mw-soft-sage); }
body.page-dark .hero-dark .eyebrow { color: var(--page-sage-light); }
body.page-dark .hero-dark a:focus-visible { outline-color: var(--mw-paper); }

/* ── Rating ──────────────────────────────────────────────────────────────── */
/*
  <div class="rating">
    <span class="stars" aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
    <span><strong>5.0</strong> on the App Store</span>
  </div>
*/
.rating { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--mw-ink-soft); }
.rating .stars { color: var(--mw-forest); letter-spacing: 0.12em; font-size: 18px; }
.rating strong { color: var(--mw-ink); font-weight: 600; }

/* ── Demo video in the phone ────────────────────────────────────────────── */
/*
  <div class="phone-screen">
    <picture>...</picture>
    <video class="phone-video" preload="none" playsinline muted poster="..." tabindex="-1">
      <source src="assets/dinner-solved.mp4" type="video/mp4">
    </video>
    <button type="button" class="phone-play" data-demo-play aria-label="Watch the demo">...</button>
    <button type="button" class="phone-stop" data-demo-stop aria-label="Stop the demo" hidden>...</button>
  </div>
  JS toggles .is-playing on .phone to swap the poster picture for the video.
*/
.phone-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  background: var(--mw-paper); display: none;
}
.phone-play {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 68px;
  margin: -34px 0 0 -34px; border: 0; border-radius: 50%;
  background: rgba(242,245,240,0.94); color: var(--mw-forest);
  box-shadow: 0 8px 24px rgba(20,35,20,0.28);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 3; transition: transform var(--mw-dur) var(--mw-ease);
}
.phone-play svg { width: 28px; height: 28px; fill: currentColor; }
.phone-play:hover { transform: scale(1.04); }
.phone-stop {
  position: absolute; top: 58px; right: 14px; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: rgba(242,245,240,0.94); color: var(--mw-ink);
  z-index: 4; display: none; align-items: center; justify-content: center; cursor: pointer;
}
.phone-stop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.phone.is-playing picture, .phone.is-playing .phone-play { display: none; }
.phone.is-playing .phone-video { display: block; }
.phone.is-playing .phone-stop { display: flex; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* justify-items left at its stretch default on purpose: .sub-hero-copy
     stays full-column-width and centers its own children via align-items
     below, which is more predictable than shrinking the grid item itself
     to fit-content. */
  .sub-hero { grid-template-columns: 1fr; text-align: center; }
  .sub-hero-copy { align-items: center; }
  .cta-row { justify-content: center; }
  .kicker-row, .chips { justify-content: center; }
}
@media (max-width: 720px) {
  .feature-row { grid-template-columns: 1fr; row-gap: 12px; }
  .two-col > :first-child, .two-col > :last-child { flex: 1 1 100%; }
}
@media (max-width: 520px) {
  .card { padding: 24px; }
  .band-dark h2 { font-size: clamp(32px, 9vw, 44px); }
  .sub-hero-media .phone-glow { inset: -8% 0; }
}