/* ============ RESET / TOKENS ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --cream: #fbf4e8;
  --green: #163e2e;
  --green-mid: #2c5c45;
  --orange: #e06a1e;
  --peach: #fce7d2;
  --ink: #2a2622;
  --serif: 'Baloo 2', system-ui, sans-serif;
  --sans: 'Nunito Sans', system-ui, sans-serif;
}
html, body { background: var(--cream); }
body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
img { display: block; }

/* ============ STAGE (1440 design, scale-to-fill via JS zoom) ============ */
#stage {
  width: 1440px;
  margin: 0 auto;
  position: relative;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 16px;
}

/* Announcement + header pinned to the top on scroll.
   position:sticky (NOT fixed) — CSS zoom on #stage breaks position:fixed. */
.site-top {
  align-self: stretch;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ============ ANNOUNCEMENT ============ */
.announcement {
  width: 100%;
  height: 46px;
  background-color: var(--green);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  text-align: center;
  font-size: 14px;
  color: var(--cream);
}
.off-your-first { font-weight: 600; }

/* ============ HEADER ============ */
.header {
  width: 100%;
  height: 80px;
  box-shadow: 0px 2px 14px rgba(22, 62, 46, 0.1);
  background-color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 120px;
  gap: 20px;
  color: var(--green);
  font-size: 16px;
}
.nuzzle {
  font-size: 27px;
  font-weight: 800;
  font-family: var(--serif);
  color: var(--orange);
  flex-shrink: 0;
}
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-shrink: 0;
}
.navlink { font-weight: 600; }
.acts {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.login { font-weight: 600; }
.btnget-started {
  border-radius: 999px;
  background-color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  color: var(--cream);
  font-weight: 700;
}

/* ============ HERO ============ */
.hero {
  align-self: stretch;
  background-color: var(--cream);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 88px 0px 76px;
  text-align: center;
  font-size: 62px;
  color: var(--green);
}
.herorow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.hero-ingredients-icon {
  height: 300px;
  width: 230px;
  border-radius: 28px;
  object-fit: cover;
  flex-shrink: 0;
}
.herocol {
  width: 560px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.real-food-for-container {
  width: 560px;
  line-height: 104%;
  font-weight: 800;
  font-family: var(--serif);
  font-size: 62px;
}
.happier { color: var(--orange); }
.freshly-made-meals {
  width: 470px;
  font-size: 19px;
  line-height: 150%;
  color: var(--ink);
  font-weight: 400;
}
.herocta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  color: var(--cream);
}
.btnget-started2 {
  border-radius: 999px;
  background-color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  font-weight: 700;
}
.off-your-first2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--green-mid);
  text-align: center;
}
.hero-bowl-icon {
  height: 300px;
  width: 270px;
  border-radius: 32px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ============ ICON HELPERS ============ */
.arr { width: 20px; height: 14px; flex-shrink: 0; display: block; }
.ico-check { width: 15px; height: 15px; flex-shrink: 0; display: block; color: var(--green); }
.ico-star { width: 17px; height: 17px; flex-shrink: 0; display: block; color: var(--orange); }

/* ============ BENEFITS ============ */
.benefits {
  width: 100%;
  background-color: var(--cream);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0px 92px;
  font-family: var(--serif);
}
.brow { display: flex; align-items: flex-start; gap: 16px; }
.bcard {
  height: 210px;
  width: 224px;
  border-radius: 22px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px;
  gap: 12px;
}
.bcard.c-orange   { background-color: #e06a1e; color: var(--cream); }
.bcard.c-orange   .arr { color: var(--cream); }
.bcard.c-peach    { background-color: #fce7d2; color: var(--green); }
.bcard.c-peach    .arr { color: var(--green); }
.bcard.c-green    { background-color: #163e2e; color: var(--cream); }
.bcard.c-green    .arr { color: var(--cream); }
.bcard.c-greenmid { background-color: #2c5c45; color: var(--cream); }
.bcard.c-greenmid .arr { color: var(--cream); }
.btop {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}
.bcard-title {
  width: 138px;
  line-height: 108%;
  font-weight: 600;
  font-size: 18px;
}
.bphoto { width: 188px; height: 92px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }

/* ============ WHY FRESH ============ */
.whyfresh {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 88px 0px 84px;
  text-align: center;
  font-size: 44px;
  color: var(--green);
  font-family: var(--serif);
}
.wfc { width: 1200px; display: flex; flex-direction: column; align-items: center; gap: 52px; }
.wf-title { width: 820px; line-height: 110%; font-weight: 800; font-size: 44px; }
.wf-title .orange { color: var(--orange); }
.wfrow { display: flex; align-items: center; justify-content: center; gap: 48px; text-align: left; }
.wf-photo { height: 392px; width: 540px; border-radius: 28px; object-fit: cover; flex-shrink: 0; }
.rcol { width: 560px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.localpill {
  border-radius: 999px;
  background-color: #fff;
  border: 1px solid #e2d6c0;
  display: flex;
  align-items: center;
  padding: 8px 15px 8px 13px;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  font-family: var(--sans);
}
.cluster {
  width: 560px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 16px;
  font-size: 18px;
  font-family: var(--serif);
}
.mini, .mini2 {
  height: 116px;
  width: 272px;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px;
  gap: 7px;
}
.mini { background-color: #fce7d2; }
.mini2 { background-color: #fff; border: 1px solid #ece0cc; }
.mini-t { font-weight: 600; font-size: 18px; color: var(--green); }
.mini-d {
  width: 236px;
  font-size: 14px;
  line-height: 138%;
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 400;
}
.ctacard {
  height: 116px;
  width: 272px;
  border-radius: 18px;
  background-color: #163e2e;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px;
  gap: 10px;
  font-size: 13px;
  color: #9fc3ad;
  font-family: var(--sans);
}
.cta-sub { font-size: 13px; color: #9fc3ad; }
.ctarow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  font-size: 19px;
  color: var(--cream);
  font-family: var(--serif);
}
.cta-t { line-height: 108%; font-weight: 600; }
.ctacard .arr { color: var(--cream); }
.statswrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  color: var(--orange);
  font-family: var(--serif);
}
.statsrow { display: flex; align-items: center; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 0px 44px; gap: 4px; }
.s1n { display: flex; align-items: center; gap: 6px; }
.statnum { font-weight: 800; }
.statlabel {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--sans);
  color: var(--ink);
  text-align: center;
}
.w-rating { width: 170px; }
.w-recipes { width: 150px; }
.w-days { width: 160px; }
.vdiv { height: 50px; width: 1px; background-color: #e3d8c4; flex-shrink: 0; }
.placeholder-figures {
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--sans);
  color: #a89472;
}

/* ============ CREDIBILITY ============ */
.credibility {
  width: 100%;
  background-color: #163e2e;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 84px 0px;
  color: #e8a86a;
  font-family: var(--sans);
}
.crow { display: flex; align-items: center; justify-content: center; gap: 64px; }
.ccol { width: 560px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.why-it-works { font-size: 13px; letter-spacing: 0.08em; font-weight: 700; }
.made-with-real {
  width: 520px;
  font-size: 42px;
  line-height: 108%;
  font-weight: 800;
  font-family: var(--serif);
  color: var(--cream);
}
.made-with-real .orange { color: var(--orange); }
.every-recipe { width: 490px; font-size: 16px; line-height: 155%; color: #d9e2d2; font-weight: 400; }
.btn-cream {
  border-radius: 999px;
  background-color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  gap: 9px;
  color: #163e2e;
  font-weight: 700;
  font-size: 16px;
}
.btn-cream .arr { color: #163e2e; }
.diagram { width: 380px; height: 380px; position: relative; flex-shrink: 0; font-size: 13px; color: var(--cream); }
.d-ellipse { position: absolute; top: 25px; left: 25px; width: 330px; height: 330px; border-radius: 50%; border: 2px dashed #3e6b54; box-sizing: border-box; }
.d-center { position: absolute; top: 92px; left: 92px; width: 196px; height: 196px; border-radius: 50%; object-fit: cover; }
.dpill {
  position: absolute;
  border-radius: 999px;
  background-color: #2c5c45;
  display: flex;
  align-items: center;
  padding: 8px 14px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--cream);
}
.dpill-tl { top: 61px; left: 25px; }
.dpill-tr { top: 55px; left: 254px; }
.dpill-bl { top: 283px; left: 21px; }
.dpill-br { top: 283px; left: 263px; }

/* ============ COUNTER ============ */
.counter {
  width: 100%;
  background-color: var(--cream);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 78px 0px;
  font-size: 36px;
  font-family: var(--serif);
}
.cstage { width: 1000px; height: 360px; position: relative; flex-shrink: 0; }
.drow { position: absolute; top: 20px; left: 303px; display: flex; align-items: center; gap: 7px; }
.digit {
  height: 64px;
  width: 48px;
  border-radius: 11px;
  background-color: #163e2e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-weight: 800;
  font-size: 36px;
  flex-shrink: 0;
}
.comma { font-size: 40px; font-weight: 800; color: #163e2e; }
.clab {
  position: absolute;
  top: 111px;
  left: 382px;
  border-radius: 999px;
  background-color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--cream);
  font-weight: 700;
}
.ctaste {
  position: absolute;
  top: 187px;
  left: 190px;
  width: 620px;
  font-size: 32px;
  line-height: 112%;
  font-weight: 800;
  text-align: center;
  color: #163e2e;
}
.ctaste .orange { color: var(--orange); }
.cplaceholder {
  position: absolute;
  top: 277px;
  left: 357px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--sans);
  color: #a89472;
  text-align: center;
}
.fchip { position: absolute; display: flex; align-items: center; justify-content: center; }
.fchip > img { width: 64px; height: 64px; object-fit: cover; display: block; }
.fchip1 { top: 70px; left: 82.69px; width: 75.908px; height: 75.908px; }
.fchip1 > img { transform: rotate(12deg); }
.fchip2 { top: 71.6px; left: 862px; width: 76.757px; height: 76.757px; }
.fchip2 > img { transform: rotate(-13deg); }
.fchip3 { top: 239.99px; left: 120px; width: 73.224px; height: 73.224px; }
.fchip3 > img { transform: rotate(-9deg); }
.fchip4 { top: 248px; left: 845.79px; width: 75.036px; height: 75.036px; }
.fchip4 > img { transform: rotate(11deg); }

/* ============ TESTIMONIALS ============ */
.testimonials {
  width: 100%;
  background-color: #fce7d2;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0px 84px;
  gap: 14px;
  text-align: center;
  font-family: var(--sans);
}
.theading { font-size: 40px; font-weight: 800; font-family: var(--serif); color: #163e2e; white-space: nowrap; }
.theading .orange { color: var(--orange); }
.sample-reviews { font-size: 13.5px; font-weight: 600; color: #a07c53; }
.trow { display: flex; align-items: flex-start; padding-top: 24px; gap: 24px; text-align: left; }
.tcard {
  height: 212px;
  width: 376px;
  box-shadow: 0px 6px 22px rgba(22, 62, 46, 0.1);
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}
.tphoto { height: 212px; width: 118px; object-fit: cover; flex-shrink: 0; }
.tcc {
  height: 212px;
  width: 258px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px;
}
.tag {
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  white-space: nowrap;
}
.tag-green { background-color: #2c5c45; }
.tag-orange { background-color: var(--orange); }
.tquote { width: 222px; font-size: 16px; line-height: 122%; font-weight: 600; font-family: var(--serif); color: #163e2e; }
.bot { display: flex; flex-direction: column; gap: 7px; }
.av { display: flex; align-items: center; }
.avw { width: 28px; height: 28px; flex-shrink: 0; margin-right: -9px; position: relative; }
.avw img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.nn {
  height: 28px;
  width: 30px;
  border-radius: 999px;
  background-color: #2c5c45;
  border: 2px solid #fff;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.otherdogs { font-size: 13px; font-weight: 600; color: #2a2622; white-space: nowrap; }
.tctaw { display: flex; flex-direction: column; align-items: center; padding-top: 16px; }
.btn-green {
  border-radius: 999px;
  background-color: #163e2e;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  gap: 9px;
  color: var(--cream);
  font-size: 16px;
  font-weight: 700;
}
.btn-green .arr { color: var(--cream); }

/* ============ EASY STEPS ============ */
.easysteps {
  width: 100%;
  background-color: var(--cream);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0px 84px;
  font-size: 18px;
  color: var(--green);
  font-family: var(--serif);
}
.easypanel {
  width: 1200px;
  border-radius: 32px;
  background-color: #e7f0e5;
  display: flex;
  align-items: center;
  padding: 48px;
  gap: 44px;
  box-sizing: border-box;
}
.easyimg { align-self: stretch; width: 430px; border-radius: 22px; max-height: 100%; object-fit: cover; flex-shrink: 0; }
.ecol { width: 586px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 17px; }
.feeding { width: 520px; font-size: 38px; line-height: 108%; font-weight: 800; }
.feeding .orange { color: var(--orange); }
.ecard {
  width: 586px;
  border-radius: 16px;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 20px;
  gap: 4px;
}
.ecard-t { font-weight: 600; font-size: 18px; color: var(--green); }
.ecard-d { width: 524px; font-size: 14px; line-height: 140%; font-family: var(--sans); color: var(--ink); font-weight: 400; }
.ecta { display: flex; flex-direction: column; align-items: flex-start; padding-top: 6px; gap: 9px; font-size: 16px; color: var(--cream); font-family: var(--sans); }
.btn-orange {
  border-radius: 999px;
  background-color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  gap: 9px;
  color: var(--cream);
  font-weight: 700;
  cursor: pointer;
}
.btn-orange .arr { color: var(--cream); }
.off3 { font-size: 13px; font-weight: 600; color: var(--green-mid); }

/* ============ FAQ ============ */
.faq {
  width: 100%;
  background-color: var(--cream);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 46px 0px 92px;
  text-align: center;
  font-size: 38px;
  color: var(--green);
  font-family: var(--serif);
}
.faq-title { font-weight: 800; font-size: 38px; }
.faq-title .orange { color: var(--orange); }
.fcol {
  width: 820px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 22px;
  gap: 12px;
  text-align: left;
  font-size: 17px;
  font-family: var(--sans);
}
.faqitem {
  width: 820px;
  border-radius: 16px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 18px 24px;
  cursor: pointer;
}
.faqrow { display: flex; align-items: center; justify-content: flex-start; width: 100%; }
.faq-q { width: 690px; font-weight: 600; font-size: 17px; color: var(--green); }
.chev { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; display: block; transition: transform 320ms ease; }
.faqitem.open .chev { transform: rotate(180deg); }
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms ease, margin-top 320ms ease;
  margin-top: 0;
}
.faq-a { overflow: hidden; min-height: 0; }
.faqitem.open .faq-a-wrap { grid-template-rows: 1fr; margin-top: 12px; }
.faq-a-inner { width: 744px; font-size: 15px; line-height: 152%; color: var(--ink); font-weight: 400; }

/* ============ FOOTER ============ */
.footer {
  width: 100%;
  background-color: #163e2e;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 58px 0px 34px;
  color: var(--cream);
  font-family: var(--sans);
}
.fc { width: 1102px; display: flex; flex-direction: column; align-items: flex-start; gap: 34px; }
.fbrow { display: flex; align-items: center; justify-content: flex-start; gap: 72px; width: 100%; }
.badge { display: flex; align-items: center; gap: 14px; }
.ic { height: 50px; width: 50px; border-radius: 999px; background-color: #2c5c45; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic-svg { width: 26px; height: 26px; color: var(--cream); display: block; }
.bt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.badge-t { font-weight: 600; font-size: 16px; font-family: var(--serif); color: var(--cream); white-space: nowrap; }
.badge-d { font-size: 13px; line-height: 135%; font-family: var(--sans); color: #afc0b3; font-weight: 400; }
.w226 { width: 226px; }
.w210 { width: 210px; }
.fdiv { align-self: stretch; height: 1px; background-color: #2c5c45; }
.frow { display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; }
.brand { width: 264px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fnuzzle { font-weight: 800; font-family: var(--serif); color: var(--orange); font-size: 26px; }
.ftag { width: 236px; font-size: 14px; line-height: 144%; color: #afc0b3; font-weight: 400; }
.soc { display: flex; align-items: flex-start; gap: 10px; }
.s { height: 38px; width: 38px; border-radius: 999px; background-color: #2c5c45; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--cream); flex-shrink: 0; }
.cols { display: flex; align-items: flex-start; gap: 44px; font-size: 14px; }
.lcol { width: 150px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.lcol-h { font-weight: 700; color: var(--cream); }
.lcol-l { font-weight: 400; color: #b3c3b7; }
.bb { align-self: stretch; height: 18px; position: relative; font-size: 13px; color: #afc0b3; }
.made { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 6px; }
.ic-heart { width: 15px; height: 15px; color: var(--orange); display: block; }
.copyr { position: absolute; top: -1px; left: 200px; white-space: pre; }

/* ============================================================
   MOBILE STAGE (390px) — shown below 768px, scaled-to-fill
   ============================================================ */
#stage-m {
  width: 390px;
  margin: 0 auto;
  position: relative;
  background: var(--cream);
  display: none;
  flex-direction: column;
  align-items: stretch;
  font-family: var(--sans);
  color: var(--ink);
  text-align: left;
}
@media (max-width: 767.98px) {
  #stage { display: none; }
  #stage-m { display: flex; }
}
#stage-m .orange { color: var(--orange); }

/* mobile announcement */
#stage-m .m-announcement {
  align-self: stretch; height: 35px; background-color: var(--green);
  overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  padding: 10px 16px; box-sizing: border-box; text-align: center; font-size: 12px; color: var(--cream);
}
#stage-m .m-off { width: 330px; font-weight: 600; }

/* mobile header */
#stage-m .m-header {
  align-self: stretch; height: 60px; background-color: #fff; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box;
  gap: 20px;
}
#stage-m .m-nuzzle { font-size: 22px; font-weight: 800; font-family: var(--serif); color: var(--orange); }
#stage-m .hr { display: flex; align-items: center; gap: 14px; }
#stage-m .m-btn {
  border-radius: 999px; background-color: var(--orange); display: flex; align-items: center; justify-content: center;
  padding: 9px 16px; color: var(--cream); font-size: 15px; font-weight: 700;
}
#stage-m .menu-ico { width: 26px; height: 26px; color: var(--green); display: block; flex-shrink: 0; }

/* mobile hero */
#stage-m .m-hero {
  align-self: stretch; background-color: var(--cream); overflow: hidden; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; padding: 30px 0 34px; box-sizing: border-box;
  gap: 18px; text-align: center; color: var(--green);
}
#stage-m .m-h1 { width: 350px; font-size: 34px; line-height: 106%; font-weight: 800; font-family: var(--serif); }
#stage-m .m-hsub { width: 320px; font-size: 16px; line-height: 148%; color: var(--ink); font-weight: 400; }
#stage-m .m-hcta { display: flex; flex-direction: column; align-items: center; gap: 9px; }
#stage-m .m-btn2 {
  border-radius: 999px; background-color: var(--orange); display: flex; align-items: center; justify-content: center;
  padding: 13px 26px; color: var(--cream); font-size: 15px; font-weight: 700;
}
#stage-m .m-off2 { font-size: 12px; font-weight: 600; color: var(--green-mid); }
#stage-m .m-heroimg { width: 350px; height: 230px; border-radius: 24px; object-fit: cover; }

/* mobile benefits carousel */
#stage-m .m-benefits {
  align-self: stretch; background-color: var(--cream); overflow: hidden; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; padding: 6px 0 34px; box-sizing: border-box; gap: 12px;
}
#stage-m .benefits-carousel {
  width: 350px; height: 168px; overflow-x: auto; overflow-y: hidden; flex-shrink: 0;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
#stage-m .benefits-carousel::-webkit-scrollbar { display: none; }
#stage-m .brow-m { display: flex; align-items: flex-start; gap: 12px; width: max-content; }
#stage-m .bc {
  height: 168px; width: 150px; border-radius: 18px; overflow: hidden; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 14px; box-sizing: border-box; gap: 10px; scroll-snap-align: start; font-family: var(--serif);
}
#stage-m .bc.c-orange   { background-color: #e06a1e; color: var(--cream); }
#stage-m .bc.c-peach    { background-color: #fce7d2; color: var(--green); }
#stage-m .bc.c-green    { background-color: #163e2e; color: var(--cream); }
#stage-m .bc.c-greenmid { background-color: #2c5c45; color: var(--cream); }
#stage-m .bc.c-orange .arr-m, #stage-m .bc.c-green .arr-m, #stage-m .bc.c-greenmid .arr-m { color: var(--cream); }
#stage-m .bc.c-peach .arr-m { color: var(--green); }
#stage-m .bt-row { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
#stage-m .bc-title { width: 92px; line-height: 110%; font-weight: 600; font-size: 15px; }
#stage-m .arr-m { width: 16px; height: 12px; flex-shrink: 0; display: block; }
#stage-m .bc-img { width: 122px; height: 66px; border-radius: 10px; object-fit: cover; }
#stage-m .swipe-for-more { font-size: 12px; font-weight: 600; color: var(--green-mid); text-align: center; }

/* mobile why fresh */
#stage-m .m-whyfresh {
  align-self: stretch; background-color: #fff; overflow: hidden; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; padding: 40px 0; box-sizing: border-box;
  gap: 18px; text-align: center; color: var(--green); font-family: var(--serif);
}
#stage-m .m-wf-title { width: 350px; font-size: 26px; line-height: 112%; font-weight: 800; }
#stage-m .m-wfimg { width: 350px; height: 210px; border-radius: 20px; object-fit: cover; }
#stage-m .mmini, #stage-m .mmini2 {
  width: 350px; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
  padding: 16px 18px; box-sizing: border-box; gap: 5px; text-align: left;
}
#stage-m .mmini { background-color: #fce7d2; }
#stage-m .mmini2 { background-color: var(--cream); }
#stage-m .mmini-t { font-weight: 600; font-size: 17px; color: var(--green); }
#stage-m .mmini-d { width: 300px; font-size: 14px; line-height: 140%; font-family: var(--sans); color: var(--ink); font-weight: 400; }
#stage-m .statsm { display: flex; align-items: flex-start; justify-content: center; padding: 4px 0 0; gap: 20px; }
#stage-m .ms { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#stage-m .ms-n { font-size: 24px; font-weight: 800; color: var(--orange); display: flex; align-items: center; gap: 3px; }
#stage-m .star-m { width: 15px; height: 15px; color: var(--orange); display: block; }
#stage-m .ms-l { width: 96px; font-size: 11px; line-height: 125%; font-weight: 600; font-family: var(--sans); color: var(--ink); text-align: center; }
#stage-m .m-ph { font-size: 11px; font-weight: 600; font-family: var(--sans); color: #a89472; }

/* mobile credibility */
#stage-m .m-credibility {
  align-self: stretch; background-color: var(--green); overflow: hidden; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; padding: 44px 0; box-sizing: border-box;
  gap: 16px; text-align: center; color: var(--cream);
}
#stage-m .why-it-works { letter-spacing: 0.08em; color: #e8a86a; font-size: 12px; font-weight: 700; }
#stage-m .m-cred-title { width: 350px; font-size: 26px; line-height: 112%; font-weight: 800; font-family: var(--serif); color: var(--cream); }
#stage-m .m-every-recipe { width: 320px; font-size: 14px; line-height: 150%; color: #d9e2d2; font-weight: 400; }
#stage-m .m-ellipse { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; }
#stage-m .cpills { width: 350px; display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
#stage-m .cp { border-radius: 999px; background-color: var(--green-mid); display: flex; align-items: center; justify-content: center; padding: 7px 13px; font-size: 12px; font-weight: 600; color: var(--cream); white-space: nowrap; }
#stage-m .m-btn3 { border-radius: 999px; background-color: var(--cream); display: flex; align-items: center; justify-content: center; padding: 13px 26px; gap: 8px; color: var(--green); font-size: 15px; font-weight: 700; }
#stage-m .m-btn3 .arr-m { width: 18px; height: 13px; color: var(--green); }

/* mobile counter */
#stage-m .m-counter {
  align-self: stretch; background-color: var(--cream); overflow: hidden; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; padding: 44px 0; box-sizing: border-box;
  gap: 14px; font-family: var(--serif);
}
#stage-m .drow-m { display: flex; align-items: center; gap: 5px; }
#stage-m .md { height: 50px; width: 36px; border-radius: 9px; background-color: var(--green); display: flex; align-items: center; justify-content: center; color: var(--cream); font-size: 26px; font-weight: 800; flex-shrink: 0; }
#stage-m .comma-m { font-size: 28px; font-weight: 800; color: var(--green); }
#stage-m .lab-m { border-radius: 999px; background-color: var(--orange); display: flex; align-items: center; justify-content: center; padding: 6px 15px; font-size: 13px; font-family: var(--sans); color: var(--cream); font-weight: 700; }
#stage-m .m-ctaste { width: 350px; font-size: 23px; line-height: 116%; font-weight: 800; text-align: center; color: var(--green); }
#stage-m .m-ph2 { font-size: 11px; font-weight: 600; font-family: var(--sans); color: #a89472; text-align: center; }

/* mobile testimonials */
#stage-m .m-testimonials {
  align-self: stretch; background-color: #fce7d2; overflow: hidden; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; padding: 42px 0 44px; box-sizing: border-box; gap: 14px;
}
#stage-m .m-theading { font-size: 26px; font-weight: 800; font-family: var(--serif); text-align: center; color: var(--green); }
#stage-m .m-sample { font-size: 12px; font-weight: 600; color: #a07c53; text-align: center; }
#stage-m .mtcard { width: 350px; box-shadow: 0 5px 18px rgba(22,62,46,0.1); border-radius: 18px; background-color: #fff; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; }
#stage-m .mt-img { width: 350px; height: 150px; object-fit: cover; }
#stage-m .cc { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; padding: 18px; gap: 10px; }
#stage-m .tag { border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 5px 12px; font-size: 12px; font-weight: 700; color: var(--cream); white-space: nowrap; }
#stage-m .tag-green { background-color: var(--green-mid); }
#stage-m .tag-orange { background-color: var(--orange); }
#stage-m .mt-quote { width: 300px; font-size: 17px; line-height: 124%; font-weight: 600; font-family: var(--serif); color: var(--green); }
#stage-m .m-bot { display: flex; align-items: center; gap: 10px; color: var(--ink); }
#stage-m .m-av { display: flex; align-items: center; }
#stage-m .m-avimg { height: 26px; width: 26px; border-radius: 50%; object-fit: cover; }
#stage-m .m-av2 { margin-left: -9px; }
#stage-m .m-other { font-size: 12px; font-weight: 600; }
#stage-m .m-btn4 { border-radius: 999px; background-color: var(--green); display: flex; align-items: center; justify-content: center; padding: 13px 26px; gap: 8px; font-size: 15px; font-weight: 700; color: var(--cream); }
#stage-m .m-btn4 .arr-m { width: 18px; height: 13px; color: var(--cream); }

/* mobile easy steps */
#stage-m .m-easysteps {
  align-self: stretch; background-color: var(--cream); overflow: hidden; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; padding: 36px 0 40px; box-sizing: border-box;
  color: var(--green); font-family: var(--serif);
}
#stage-m .panel { width: 350px; border-radius: 24px; background-color: #e7f0e5; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 24px 22px; box-sizing: border-box; gap: 14px; }
#stage-m .m-feeding { width: 300px; font-size: 24px; line-height: 112%; font-weight: 800; text-align: center; }
#stage-m .m-eimg { width: 306px; height: 180px; border-radius: 16px; object-fit: cover; }
#stage-m .emini { width: 306px; border-radius: 14px; background-color: #fff; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 14px 16px; box-sizing: border-box; gap: 3px; }
#stage-m .emini-t { font-weight: 600; font-size: 16px; color: var(--green); }
#stage-m .emini-d { width: 270px; font-size: 13px; line-height: 138%; font-family: var(--sans); color: var(--ink); font-weight: 400; }
#stage-m .m-btn5 { border-radius: 999px; background-color: var(--orange); display: flex; align-items: center; justify-content: center; padding: 13px 26px; gap: 8px; font-size: 15px; color: var(--cream); font-family: var(--sans); font-weight: 700; cursor: pointer; }
#stage-m .m-btn5 .arr-m { width: 18px; height: 13px; color: var(--cream); }
#stage-m .m-off3 { font-size: 12px; font-weight: 600; font-family: var(--sans); color: var(--green-mid); text-align: center; }

/* mobile faq */
#stage-m .m-faq {
  align-self: stretch; background-color: var(--cream); overflow: hidden; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; padding: 36px 0 44px; box-sizing: border-box;
  gap: 12px; color: var(--green); font-family: var(--sans);
}
#stage-m .m-faq-title { width: 350px; font-size: 24px; line-height: 114%; font-weight: 800; font-family: var(--serif); text-align: center; }
#stage-m .mfaq { width: 350px; border-radius: 14px; background-color: #fff; box-sizing: border-box; padding: 16px 18px; cursor: pointer; }
#stage-m .m-r { display: flex; align-items: center; justify-content: space-between; width: 100%; }
#stage-m .m-faq-q { width: 268px; font-weight: 600; font-size: 15px; color: var(--green); }
#stage-m .m-chev { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; display: block; transition: transform 320ms ease; }
#stage-m .mfaq.open .m-chev { transform: rotate(180deg); }
#stage-m .m-faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms ease, margin-top 320ms ease; margin-top: 0; }
#stage-m .m-faq-a { overflow: hidden; min-height: 0; }
#stage-m .mfaq.open .m-faq-a-wrap { grid-template-rows: 1fr; margin-top: 10px; }
#stage-m .m-faq-a-inner { width: 300px; font-size: 14px; line-height: 148%; color: var(--ink); font-weight: 400; }

/* mobile footer */
#stage-m .m-footer {
  align-self: stretch; background-color: var(--green); overflow: hidden; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; padding: 40px 0 30px; box-sizing: border-box;
  gap: 22px; color: var(--cream);
}
#stage-m .badges { width: 350px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-family: var(--serif); }
#stage-m .mbadge { min-height: 56px; display: flex; align-items: center; gap: 13px; }
#stage-m .m-i { height: 46px; width: 46px; border-radius: 999px; background-color: var(--green-mid); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#stage-m .m-ic-svg { width: 24px; height: 24px; color: var(--cream); display: block; }
#stage-m .m-bt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#stage-m .m-badge-t { font-weight: 600; font-size: 15px; color: var(--cream); }
#stage-m .m-badge-d { width: 250px; font-size: 12px; line-height: 135%; font-family: var(--sans); color: #afc0b3; font-weight: 400; }
#stage-m .m-fdiv { width: 350px; height: 1px; background-color: var(--green-mid); }
#stage-m .m-links { width: 350px; height: 1px; flex-shrink: 0; }
#stage-m .m-brand { width: 350px; display: flex; flex-direction: column; align-items: flex-start; padding: 0 10px; box-sizing: border-box; gap: 12px; }
#stage-m .m-fnuzzle { font-size: 24px; font-weight: 800; font-family: var(--serif); color: var(--orange); }
#stage-m .m-ftag { width: 300px; font-size: 14px; line-height: 142%; color: #afc0b3; font-weight: 400; }
#stage-m .m-soc { display: flex; align-items: flex-start; gap: 10px; }
#stage-m .m-s { height: 36px; width: 36px; border-radius: 999px; background-color: var(--green-mid); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--cream); flex-shrink: 0; }
#stage-m .m-made { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: #afc0b3; }
#stage-m .m-heart { width: 14px; height: 14px; color: var(--orange); display: block; }
#stage-m .m-fnote { font-size: 12px; color: #8fa395; text-align: center; }