/* "Coming from Mealime?" page (October 30, 2026 rebuild, in the homepage's look). Brand tokens, the nav, buttons, the
   highlight block, sparkles, the skip link, .ep-sr and the footer with columns live in ep-tokens.css; this file is this
   page only. Static HTML: no icon font, no outside requests.
   Motion: only the hero words rise on load, sparkles twinkle, and the one screen recording plays while it is on screen
   (../assets/site.js). Nothing fades in on scroll; prefers-reduced-motion turns all of it off (the recording shows its
   still poster). Apple's iPhone frame is shown as supplied: no shadow, no tilt, nothing over it. */

.m-page {
  --m-sec: clamp(72px, 2.5rem + 4vw, 120px);
  --m-max: 1180px;
  --m-band-a: var(--ep-surface);     /* white bands */
  --m-band-b: var(--ep-canvas);      /* pale blue bands */
  --m-card-a: var(--ep-canvas);      /* a card on a white band */
  --m-card-b: var(--ep-surface);     /* a card on a pale band */
  --m-mute: var(--ep-ink-3);
  --m-screen: #F2F3F7;
  /* The hero's blue, with the slides' light corner moved to the top right (behind the iPhone) when the words sit on
     the left, so they stay on the deeper blue (white text 4.5:1 or more, tools/contrast.mjs) */
  --m-grad-hero-r: radial-gradient(clamp(300px, 34vw, 620px) clamp(200px, 22vw, 360px) at 100% 0%, rgba(90,168,255,0.78) 0%, rgba(90,168,255,0) 100%),
                   radial-gradient(60% 55% at 0% 100%, rgba(11,73,196,0.55) 0%, rgba(11,73,196,0) 70%),
                   linear-gradient(180deg, #1767F1 0%, #1466FA 50%, #0F5BE8 100%);
  background: var(--ep-canvas);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .m-page { --m-band-a: var(--ep-canvas); --m-band-b: var(--ep-canvas-2); --m-card-a: var(--ep-surface); --m-screen: #000; }
}
:root[data-theme="dark"] .m-page { --m-band-a: var(--ep-canvas); --m-band-b: var(--ep-canvas-2); --m-card-a: var(--ep-surface); --m-screen: #000; }

.m-wrap { width: 100%; max-width: calc(var(--m-max) + 2 * var(--ep-gutter)); margin: 0 auto; padding: 0 var(--ep-gutter); box-sizing: border-box; }
.m-sec { padding: var(--m-sec) 0; background: var(--m-band-a); }
.m-sec--alt { background: var(--m-band-b); }

/* ---------- Type: an eyebrow with a colored dot, two-tone headlines (lead in ink, the rest in gray) ---------- */
.m-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--ep-font-display); font-weight: 800; font-size: 17px; line-height: 1.3; color: var(--ep-ink); }
.m-eyebrow::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--ep-blue-500)); }
.m-h2 { margin: 16px 0 0; font-family: var(--ep-font-display); font-weight: 900; font-size: clamp(34px, 1.1rem + 2.5vw, 54px); line-height: 1.05;
  letter-spacing: -0.03em; color: var(--ep-ink); text-wrap: balance; }
.m-mute { color: var(--m-mute); }
.m-lead { margin: 22px 0 0; font-size: clamp(18px, 1rem + 0.3vw, 21px); line-height: 1.5; color: var(--ep-ink-2); text-wrap: pretty; max-width: 34em; }
.m-head { text-align: center; max-width: 820px; margin: 0 auto; }
.m-head .m-lead { margin-left: auto; margin-right: auto; }
/* The Pro tag (the homepage's): everything else on the page is in the free app */
.m-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 6px; border-radius: 999px; vertical-align: 2px; white-space: nowrap;
  background: var(--ep-blue-600); color: #fff; font-family: var(--ep-font-display); font-weight: 900; font-size: 12.5px; letter-spacing: 0.02em; line-height: 1; }

/* ---------- The official App Store badge (Apple's artwork, unaltered: no hover, no motion, clear space kept) ---------- */
.ep-page a.m-badge { display: inline-block; flex: none; margin: 14px; border-radius: 9px; line-height: 0; }
.m-badge img { display: block; height: 52px; width: auto; }
.ep-page a.m-badge:focus-visible { outline-offset: 4px; }
@media (max-width: 600px) { .m-badge img { height: 50px; } }

/* QR for computers: phones can't scan their own screen, so it only appears with a mouse on a wide screen */
.m-qr { display: none; align-items: center; gap: 14px; margin: 14px; text-align: left; }
.m-qr__code { flex: none; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px rgba(15,30,61,0.08); }
.m-qr__code svg { display: block; width: 66px; height: 66px; color: #0F1E3D; }
.m-qr__text { max-width: 9.5em; font-size: 14.5px; line-height: 1.4; font-weight: 600; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .m-qr { display: flex; } }
.m-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 8px -14px 0; }

/* ---------- iPhone frame with a live screen (the homepage's markup; ../assets/site.js plays it) ---------- */
.phone { position: relative; flex: none; width: var(--w, 280px); aspect-ratio: 490 / 1000; }
.phone__screen { position: absolute; left: 4.898%; top: 2.1%; width: 90.204%; height: 95.8%; border-radius: 14.7% / 6.8%; overflow: hidden; background: var(--m-screen); }
.phone__media { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; }
.phone__media.is-on { display: block; }
.phone__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* Play/pause (WCAG 2.2.2): beside the iPhone, never on its screen */
.m-pp { position: absolute; left: calc(100% + 16px); bottom: 0; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(6,30,90,0.28); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5); transition: background var(--ep-dur-1) var(--ep-ease); }
.m-pp:hover { background: rgba(6,30,90,0.42); }
.m-pp svg { width: 15px; height: 15px; fill: currentColor; }
.m-pp[hidden] { display: none; }

/* ---------- Hero: the blue stage, the news, the badge, the Meal Plan in use ---------- */
.m-hero { padding: 10px 10px 0; }
.m-hero__panel { position: relative; isolation: isolate; overflow: hidden; border-radius: clamp(28px, 2.4vw, 44px); background: var(--ep-grad-hero); color: #fff;
  text-align: center; padding: clamp(36px, 1.6rem + 2vw, 56px) var(--ep-gutter) clamp(40px, 1.5rem + 2.4vw, 64px); }
.m-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.m-hero__copy { position: relative; max-width: 760px; margin: 0 auto; }
.m-hero__icon { display: block; width: 60px; height: 60px; margin: 0 auto; border-radius: 22.5%; box-shadow: 0 2px 4px rgba(3,18,60,0.16), 0 12px 28px rgba(3,18,60,0.28); }
.m-hero__eyebrow { margin: 16px 0 0; font-family: var(--ep-font-display); font-weight: 800; font-size: clamp(16px, 0.9rem + 0.25vw, 19px); line-height: 1.3; color: #fff; text-wrap: balance; }
.m-hero__h1 { margin: 12px 0 0; font-family: var(--ep-font-display); font-weight: 900; font-size: clamp(40px, 1rem + 3.2vw, 64px); line-height: 1.04; letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.m-hero__l1 { display: block; }
.m-hero__h1 .ep-hl { white-space: nowrap; margin-top: 0.06em; }
.m-hero__lead { max-width: 31em; margin: 18px auto 0; font-size: clamp(18px, 1rem + 0.3vw, 20px); line-height: 1.5; color: #fff; text-wrap: pretty; }
.m-hero__foot { max-width: 46em; margin: 0 auto; font-size: 15px; line-height: 1.5; color: #fff; text-wrap: balance; }
.ep-page .m-hero__foot a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.7); text-underline-offset: 0.2em; white-space: nowrap; }
.m-hero__device { display: flex; justify-content: center; margin-top: clamp(32px, 1rem + 2vw, 48px); }
.m-hero__phone { --w: min(276px, 72vw); }
.m-sp1 { --sz: 22px; left: 5%; top: 26px; }
.m-sp2 { --sz: 26px; right: 5%; top: 34px; }
.m-sp3 { --sz: 14px; display: none; }
/* Wide screens: the words on the left, the iPhone on the right, so the whole head fits on one screen */
@media (min-width: 1000px) {
  .m-hero__panel { --m-pad: max(var(--ep-gutter), calc((100% - var(--m-max)) / 2)); --m-w: clamp(250px, 9rem + 10vw, 300px);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(40px, 5vw, 96px); text-align: left;
    padding: clamp(44px, 1.5rem + 2vw, 64px) var(--m-pad); background: var(--m-grad-hero-r); }
  .m-hero__copy { max-width: 660px; margin: 0; }
  .m-hero__h1 { font-size: clamp(44px, 1rem + 3.2vw, 58px); }   /* "planning to EasyPantry." stays one line in the 660 px column */
  .m-hero__icon { margin: 0; }
  .m-hero__lead, .m-hero__foot { margin-left: 0; margin-right: 0; }
  .m-hero .m-cta { justify-content: flex-start; }
  .m-hero__device { margin: 0; padding-right: 60px; }
  .m-hero__phone { --w: var(--m-w); }
  /* two in the gap just left of the iPhone (near its top and its foot), the gold one in the top right corner */
  .m-sp1 { left: auto; right: calc(var(--m-pad) + var(--m-w) + 78px); top: 8%; }
  .m-sp2 { right: 2.4%; top: 8%; }
  .m-sp3 { display: block; left: auto; right: calc(var(--m-pad) + var(--m-w) + 82px); top: auto; bottom: 11%; --op: 0.6; }
}
@media (max-width: 600px) {
  .m-hero { padding: 8px 8px 0; }
  .m-hero__icon { width: 56px; height: 56px; }
  /* two lines on a phone reach toward the light corner: 19 px bold is large text there (3:1 needed, 4:1 or more measured) */
  .m-hero__eyebrow { font-size: 19px; }
  .m-hero__h1 { font-size: min(40px, calc((100vw - 56px) / 8)); }
  .m-hero__lead { font-size: 17.5px; }
}
/* Narrow phones: the play/pause button moves under the iPhone, at its right */
@media (max-width: 480px) {
  .m-hero__device { padding-bottom: 54px; }
  .m-pp { left: auto; right: -2px; bottom: -54px; }
}

/* ---------- The facts: what Mealime said, and where EasyPantry stands ---------- */
.m-facts__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.m-facts .m-h2 { font-size: clamp(34px, 1.1rem + 2vw, 48px); }
.ep-page a.m-source { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-top: 14px; font-family: var(--ep-font-display); font-weight: 800; font-size: 16px; }
.m-source svg { flex: none; width: 13px; height: 13px; fill: currentColor; }
.m-facts__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ep-line-2); }
.m-facts__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 16px; padding: 20px 4px; border-bottom: 1px solid var(--ep-line-2); }
.m-facts__list p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ep-ink); text-wrap: pretty; }
.m-facts__ico { width: 24px; height: 24px; margin-top: 2px; fill: var(--ic, var(--ep-blue-500)); }
.m-facts__own { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 16px; margin: 24px 0 0; padding: 20px 22px; border-radius: 22px;
  background: var(--m-card-a); box-shadow: inset 0 0 0 1px var(--ep-line); font-size: 17px; line-height: 1.55; color: var(--ep-ink-2); text-wrap: pretty; }
@media (max-width: 899px) {
  .m-facts__grid { grid-template-columns: minmax(0, 1fr); }
  .m-facts__head { text-align: center; }
  .m-facts__body { width: 100%; max-width: 680px; margin: 0 auto; }
}
@media (max-width: 600px) { .m-facts__list p { font-size: 17px; } .m-facts__own { padding: 18px 18px; font-size: 16.5px; } }

/* ---------- What you get: one calm grid (like the homepage's "And so much more") ---------- */
.m-feats { list-style: none; margin: clamp(48px, 5vw, 72px) auto 0; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 56px; }
.m-feats li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; align-content: start; }
.m-feats__ico { grid-row: span 2; width: 28px; height: 28px; margin-top: 1px; fill: var(--ic, var(--ep-blue-500)); }
.m-feats h3 { margin: 0; font-family: var(--ep-font-display); font-weight: 800; font-size: 19px; line-height: 1.3; color: var(--ep-ink); }
.m-feats p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--ep-ink-2); }
.m-diff { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; max-width: 860px; margin: clamp(48px, 5vw, 72px) auto 0; padding: 26px 28px 28px;
  border-radius: 28px; background: var(--m-card-b); box-shadow: inset 0 0 0 1px var(--ep-line); }
.m-diff__ico { width: 26px; height: 26px; margin-top: 1px; fill: var(--ep-ink-2); }
.m-diff h3 { margin: 0; font-family: var(--ep-font-display); font-weight: 900; font-size: 20px; line-height: 1.3; color: var(--ep-ink); }
.m-diff p { margin: 8px 0 0; font-size: 17px; line-height: 1.6; color: var(--ep-ink-2); }
@media (max-width: 960px) { .m-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
@media (max-width: 600px) { .m-feats { grid-template-columns: minmax(0, 1fr); gap: 30px; } .m-diff { padding: 22px 20px 24px; column-gap: 14px; } }

/* ---------- How to switch: four steps, then a note about Mealime recipes ---------- */
.m-steps { list-style: none; margin: clamp(44px, 5vw, 64px) auto 0; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.m-steps li { padding: 28px 24px 30px; border-radius: 28px; background: var(--m-card-a); box-shadow: inset 0 0 0 1px var(--ep-line); }
.m-steps__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ep-blue-600); color: #fff;
  font-family: var(--ep-font-display); font-weight: 900; font-size: 18px; line-height: 1; }
.m-steps h3 { margin: 18px 0 0; font-family: var(--ep-font-display); font-weight: 900; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ep-ink); }
.m-steps p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--ep-ink-2); }
.m-note { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; max-width: 860px; margin: 24px auto 0; padding: 20px 24px; box-sizing: border-box;
  border-radius: 22px; background: var(--ep-blue-100); font-size: 17px; line-height: 1.55; color: var(--ep-ink); text-wrap: pretty; }
.m-note__ico { width: 22px; height: 22px; margin-top: 2px; fill: var(--ep-blue-500); }
@media (max-width: 1000px) { .m-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } }
@media (max-width: 600px) {
  .m-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* one column: the number sits beside the step's name */
  .m-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 22px 20px 24px; }
  .m-steps__n { width: 36px; height: 36px; font-size: 17px; }
  .m-steps h3 { margin: 0; }
  .m-steps p { grid-column: 1 / -1; }
  .m-note { padding: 18px 18px; font-size: 16.5px; }
}

/* ---------- Free and Pro: the homepage's three plans, then what each includes ---------- */
.m-plans { list-style: none; margin: clamp(44px, 5vw, 64px) auto 0; padding: 0; max-width: 1020px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.m-plan { position: relative; padding: 30px 28px; border-radius: 28px; background: var(--m-card-b); box-shadow: inset 0 0 0 1px var(--ep-line); }
.m-plan--best { background: var(--ep-surface); box-shadow: inset 0 0 0 2px var(--ep-blue-500), 0 24px 50px -18px rgba(15,91,232,0.40); }
.m-plan__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-family: var(--ep-font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.01em; color: var(--ep-ink); }
.m-plan__tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--ep-blue-600); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0; }
.m-plan__price { margin: 14px 0 0; font-family: var(--ep-font-display); font-weight: 900; font-size: clamp(40px, 1.6rem + 1.4vw, 50px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ep-ink); }
.m-plan__per { font-family: var(--ep-font-text); font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--ep-ink-2); }
.m-plan__sub { margin: 8px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--ep-ink-2); }
.m-plan__trial { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 8px 14px; border-radius: 999px; background: var(--ep-in-soft); color: var(--ep-in-ink);
  font-family: var(--ep-font-display); font-weight: 800; font-size: 14.5px; line-height: 1.2; }
.m-plan__trial svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
.m-nw { white-space: nowrap; }
.m-incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; max-width: 860px; margin: 48px auto 0; }
.m-incl__h { margin: 0; padding: 0 4px 14px; border-bottom: 1px solid var(--ep-line-2); font-family: var(--ep-font-display); font-weight: 900; font-size: 18px; line-height: 1.3; color: var(--ep-ink); }
.m-incl__sub { margin-left: 6px; font-family: var(--ep-font-text); font-weight: 500; font-size: 14px; color: var(--ep-ink-2); }
.m-incl__list { list-style: none; margin: 0; padding: 0; }
.m-incl__list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; border-bottom: 1px solid var(--ep-line); font-size: 16.5px; line-height: 1.4; color: var(--ep-ink); }
.m-incl__list svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: var(--ep-in-ink); }
.m-incl__list--pro svg { fill: var(--ep-blue-500); }
.m-fine { max-width: 40em; margin: 32px auto 0; text-align: center; font-size: 14px; line-height: 1.55; color: var(--ep-ink-3); text-wrap: balance; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-plan--best { box-shadow: inset 0 0 0 2px var(--ep-blue-500), 0 24px 50px -18px rgba(23,103,241,0.55); } }
:root[data-theme="dark"] .m-plan--best { box-shadow: inset 0 0 0 2px var(--ep-blue-500), 0 24px 50px -18px rgba(23,103,241,0.55); }
@media (max-width: 1000px) { .m-plan { padding: 26px 22px; } .m-plan__price { font-size: clamp(34px, 1rem + 2.4vw, 44px); } }
@media (max-width: 759px) { .m-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .m-plan__price { font-size: 42px; } }
@media (max-width: 700px) { .m-incl { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }

/* ---------- Questions ---------- */
.m-faq__in { max-width: calc(860px + 2 * var(--ep-gutter)); }
.m-faq .m-h2 { margin: 0; text-align: center; }
.m-faq__list { margin-top: clamp(36px, 4vw, 52px); border-top: 1px solid var(--ep-line-2); }
.m-faq details { border-bottom: 1px solid var(--ep-line-2); }
.m-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 22px 4px; list-style: none; cursor: pointer;
  font-family: var(--ep-font-display); font-weight: 800; font-size: clamp(18px, 1rem + 0.25vw, 20px); line-height: 1.35; color: var(--ep-ink); border-radius: 12px; }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary svg { flex: none; width: 16px; height: 16px; fill: var(--ep-ink-3); transition: transform var(--ep-dur-2) var(--ep-ease); }
.m-faq details[open] summary svg { transform: rotate(180deg); }
.m-faq summary:hover svg { fill: var(--ep-ink); }
.m-faq details > p { margin: -6px 0 0; padding: 0 44px 24px 4px; font-size: 17px; line-height: 1.6; color: var(--ep-ink-2); }
.m-faq__more { margin: 32px 0 0; text-align: center; font-size: 17px; line-height: 1.6; color: var(--ep-ink-2); }
@media (max-width: 600px) { .m-faq details > p { padding-right: 4px; } }

/* ---------- The close: the blue stage again, one badge ---------- */
.m-close { padding: 0 10px clamp(56px, 6vw, 96px); background: var(--m-band-a); }
.m-close__panel { position: relative; isolation: isolate; overflow: hidden; max-width: calc(var(--m-max) + 2 * var(--ep-gutter)); margin: 0 auto; border-radius: clamp(28px, 2.4vw, 44px);
  background: var(--ep-grad-hero); color: #fff; text-align: center; padding: clamp(56px, 2.5rem + 3vw, 104px) var(--ep-gutter); box-sizing: border-box; }
.m-close__icon { display: block; width: 80px; height: 80px; margin: 0 auto; border-radius: 22.5%; box-shadow: 0 2px 4px rgba(3,18,60,0.16), 0 14px 30px rgba(3,18,60,0.30); }
.m-close__h2 { max-width: 14em; margin: 26px auto 0; font-family: var(--ep-font-display); font-weight: 900; font-size: clamp(36px, 1rem + 3.4vw, 64px); line-height: 1.05;
  letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.m-close__h2 .ep-hl { display: block; width: fit-content; margin: 0.12em auto 0; white-space: nowrap; }
.m-close__lead { max-width: 32em; margin: 22px auto 0; font-size: clamp(18px, 1rem + 0.35vw, 21px); line-height: 1.5; color: #fff; text-wrap: pretty; }
.m-close__foot { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #fff; }
.m-close .m-cta { margin-top: 18px; }
@media (max-width: 600px) {
  .m-close { padding: 0 8px 48px; }
  .m-close__fx .ep-spark:nth-child(n+3) { display: none; }
  /* "the meals you love." stays one block on one line down to 320 px */
  .m-close__h2 { font-size: min(36px, calc((100vw - 72px) / 10.4)); }
}

/* ---------- Load-time motion only ---------- */
@keyframes m-rise { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .m-rise { animation: m-rise 0.7s var(--ep-ease) both; animation-delay: var(--d, 0s); }
}
@media (prefers-reduced-motion: reduce) { .m-faq summary svg, .m-pp { transition: none; } }

/* The badge under the plans (October 30, 2026 review) */
.m-plans__cta { display: flex; justify-content: center; margin: 22px 0 0; }
.m-h2 .m-mute { display: block; }   /* the gray continuation starts its own line, as on the homepage */