/* ============================================================
   FibreTempo — Main Stylesheet
   Architecture: Variables → Base → Components (desktop-first)
                 → @media 1120px → @media 760px → @media 430px
                 → @media prefers-reduced-motion
   All base/desktop declarations appear BEFORE media queries.
   ============================================================ */

/* ── 1. Variables & Reset ────────────────────────────────── */
:root {
  --bg: #050704;
  --bg-soft: #090d08;
  --surface: #0f150d;
  --surface-2: #131b11;
  --text: #f6f1e6;
  --muted: rgba(246,241,230,.72);
  --soft: rgba(246,241,230,.5);
  --leaf: #c5ea6d;
  --leaf-2: #e2f6a7;
  --gold: #ddc58e;
  --gold-2: #f3dfb0;
  --line: rgba(236,244,221,.1);
  --line-strong: rgba(197,234,109,.3);
  --shadow: 0 32px 100px rgba(0,0,0,.48);
  --radius: 28px;
  --serif: "Iowan Old Style","Baskerville","Times New Roman",serif;
  --sans: -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --shell: 1240px;
}
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; background: var(--bg) }
body {
  margin: 0;
  background:
    radial-gradient(circle at 75% 3%, rgba(197,234,109,.07), transparent 25%),
    radial-gradient(circle at 10% 30%, rgba(221,197,142,.05), transparent 25%),
    linear-gradient(180deg, #050704, #070a06 55%, #050704);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 30;
  pointer-events: none; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
body.menu-open { overflow: hidden }
img { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
button { font: inherit }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }

/* ── 2. Layout ───────────────────────────────────────────── */
.shell { width: min(var(--shell), calc(100% - 40px)); margin-inline: auto }
.section { padding: 94px 0; position: relative }

/* ── 3. Typography ───────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; text-wrap: balance; margin-top: 0 }
h1 { font-size: clamp(3rem,4.75vw,4.85rem); line-height: .98; margin-bottom: 24px; max-width: 13ch }
h2 { font-size: clamp(2.2rem,3.5vw,3.55rem); line-height: 1.04; margin-bottom: 20px }
h3 { font-size: 1.34rem; line-height: 1.15; margin-bottom: 10px }
h1 span, h2 span { color: var(--leaf) }
p { margin-top: 0; color: var(--muted) }

/* ── 4. Shared Components ────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }
.skip-link { position: absolute; left: -9999px; top: auto }
.skip-link:focus { left: 12px; top: 12px; z-index: 999; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 12px }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 17px; color: var(--leaf); font-size: .73rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase }
.eyebrow::before { content: ""; width: 35px; height: 1px; background: currentColor }
.glass { background: linear-gradient(145deg, rgba(24,34,21,.78), rgba(8,12,7,.72)); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1) }
.liquid-glass { position: relative; overflow: hidden }
.liquid-glass::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,0) 23%, rgba(197,234,109,.08) 50%, rgba(255,255,255,0) 72%, rgba(221,197,142,.08)); mix-blend-mode: screen }
.liquid-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.025) }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease }
.reveal.visible { opacity: 1; transform: none }

/* ── 5. Buttons ──────────────────────────────────────────── */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 780; font-size: .93rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease }
.button:hover { transform: translateY(-2px) }
.button svg, .mobile-store svg { width: 17px; height: 17px; fill: currentColor; stroke: none }
.button-store { color: #11150b; background: linear-gradient(180deg, var(--gold-2), #e5c783); box-shadow: 0 13px 36px rgba(227,198,127,.22) }
.button-primary { color: #11170b; background: linear-gradient(180deg, var(--leaf-2), var(--leaf)); box-shadow: 0 13px 36px rgba(197,234,109,.18) }
.button-secondary { color: var(--text); background: rgba(8,12,7,.48); border-color: rgba(255,255,255,.18) }
.button.full { width: 100% }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--leaf); font-weight: 750 }
.text-link:hover span { transform: translate(2px,-2px) }
.text-link span { transition: transform .2s ease }

/* ── 6. Header & Navigation ──────────────────────────────── */
.site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 50; padding: 16px 0; transition: background .25s ease }
.site-header.scrolled { background: linear-gradient(180deg, rgba(5,7,4,.9), rgba(5,7,4,.55), transparent); backdrop-filter: blur(12px) }
.nav {
  height: 64px; padding: 0 12px 0 19px; border-radius: 21px;
  display: flex; align-items: center; gap: 24px;
  background: rgba(8,12,7,.48); border-color: rgba(255,255,255,.09);
  box-shadow: 0 10px 35px rgba(0,0,0,.24);
  overflow: visible; /* allow dropdown to show */
}
.brand { display: flex; align-items: center; gap: 8px; font: 500 1.34rem/1 var(--serif); letter-spacing: .13em; white-space: nowrap }
.brand em { font-style: normal; color: var(--leaf) }
.brand-mark { width: 29px; height: 29px; color: var(--leaf); flex-shrink: 0 }
.nav-links { margin-left: auto; display: flex; gap: 25px; align-items: center; color: rgba(255,255,255,.78); font-size: .86rem }
.nav-links a:hover { color: var(--leaf) }
.nav-cta { padding: 12px 17px; font-size: .82rem }
.menu-toggle {
  display: none;
  margin-left: auto;
  background: none; border: 0;
  color: var(--text);
  padding: 0;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  cursor: pointer;
}
.menu-toggle span:not(.sr-only) {
  display: block; width: 23px; height: 1px;
  background: currentColor;
  transition: transform .22s ease, opacity .22s ease;
}
.menu-toggle.is-open span:not(.sr-only):nth-child(1) { transform: translateY(6px) rotate(45deg) }
.menu-toggle.is-open span:not(.sr-only):nth-child(2) { opacity: 0; transform: scaleX(0) }
.menu-toggle.is-open span:not(.sr-only):nth-child(3) { transform: translateY(-6px) rotate(-45deg) }

/* ── 7. Hero ─────────────────────────────────────────────── */
.hero { min-height: 820px; padding: 132px 0 74px; position: relative; overflow: hidden; display: flex; align-items: center }
.hero-background {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(90deg, rgba(5,7,4,.98) 0%, rgba(5,7,4,.92) 29%, rgba(5,7,4,.57) 61%, rgba(5,7,4,.73) 100%),
    linear-gradient(180deg, rgba(5,7,4,.08), rgba(5,7,4,.18) 55%, #050704 100%),
    url('assets/hero-garden.webp');
  background-position: center; background-size: cover;
}
.hero-grid { display: grid; grid-template-columns: minmax(0,.96fr) minmax(500px,1.04fr); align-items: center; gap: 34px }
.hero-copy { position: relative; z-index: 2; max-width: 620px }
.hero-lead { font-size: 1rem; max-width: 560px }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 12px }
.trial-note { font-size: .8rem; color: var(--soft) }
.trust-mini { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 25px }
.trust-mini span { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: rgba(255,255,255,.74) }
.trust-mini svg { width: 18px; height: 18px; color: var(--leaf) }
.hero-phones { height: 590px; position: relative; display: flex; align-items: center; justify-content: center }
.phone { position: absolute; filter: drop-shadow(0 34px 55px rgba(0,0,0,.6)) }
.phone img { height: auto }
.phone-primary { width: 292px; left: 14%; top: 18px; z-index: 2; transform: rotate(-1.4deg) }
.phone-secondary { width: 252px; right: 7%; top: 84px; z-index: 1; transform: rotate(2deg) }

/* ── 8. Answer Strip ─────────────────────────────────────── */
.answer-strip { padding: 28px 0 10px }
.answer-card { border-radius: 30px; padding: 34px 38px; display: grid; grid-template-columns: .72fr 1.4fr; column-gap: 42px; align-items: start }
.answer-card .eyebrow { grid-column: 1 }
.answer-card h2 { grid-column: 1; font-size: 1.95rem; margin-bottom: 0 }
.answer-card p:last-child { grid-column: 2; grid-row: 1/3; align-self: center; font-size: .96rem; margin: 0 }

/* ── 9. Value / Benefit Cards ────────────────────────────── */
.section-heading { max-width: 860px; margin-bottom: 34px }
.section-heading > p:last-child { font-size: .96rem; max-width: 650px }
.value-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px }
.value-card { min-height: 345px; border-radius: 26px; padding: 23px; position: relative; display: flex; flex-direction: column }
.value-icon { width: 42px; height: 42px; border-radius: 15px; background: rgba(197,234,109,.09); border: 1px solid rgba(197,234,109,.2); display: grid; place-items: center; color: var(--leaf) }
.value-icon svg { width: 22px; height: 22px }
.value-card h3 { margin: 18px 0 8px }
.value-card p { font-size: .9rem }
.ring-demo {
  position: absolute; right: 50%; transform: translateX(50%); bottom: 23px;
  width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: conic-gradient(var(--leaf) 0 80%, rgba(255,255,255,.1) 80% 100%);
  padding: 10px;
}
.ring-demo::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #10150d }
.ring-demo-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center }
.ring-demo span { display: block; font-size: 1.72rem; line-height: .95 }
.ring-demo span small { font-size: .72rem; margin-left: 1px }
.ring-demo em { display: block; margin-top: 5px; line-height: 1; font-size: .64rem }
.value-food-frame { width: 86%; height: 154px; margin: auto auto -2px; display: flex; align-items: center; justify-content: center; overflow: visible; border: 0; background: transparent }
.value-food-frame img { width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 18px 24px rgba(0,0,0,.36)) }
.gradual-demo { margin-top: auto; padding: 20px 4px 3px }
.gradual-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(197,234,109,.2), rgba(197,234,109,.82)); position: relative; margin: 12px 8px 17px }
.gradual-track i { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: 50%; background: #182012; border: 3px solid var(--leaf); box-shadow: 0 0 0 5px rgba(197,234,109,.08) }
.gradual-track i:nth-child(1) { left: 0 }
.gradual-track i:nth-child(2) { left: 34% }
.gradual-track i:nth-child(3) { left: 67% }
.gradual-track i:nth-child(4) { left: 100%; background: var(--leaf) }
.gradual-labels { display: flex; justify-content: space-between; color: var(--soft); font-size: .65rem; letter-spacing: .02em }
.leaf-art { position: absolute; right: 18px; bottom: 14px; width: 130px; color: rgba(197,234,109,.74) }
.leaf-art svg { width: 100%; height: auto }
.leaf-art path { stroke-width: 2.5 }
.growth-demo, .value-food { display: none }
.steps { margin-top: 18px; border-radius: 27px; padding: 24px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px }
.steps > div { padding: 7px 18px 7px 55px; position: relative; border-right: 1px solid rgba(255,255,255,.08) }
.steps > div:last-child { border-right: 0 }
.steps span { position: absolute; left: 8px; top: 7px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--leaf); background: rgba(197,234,109,.09); border: 1px solid rgba(197,234,109,.2) }
.steps strong { display: block; font-size: .92rem; line-height: 1.35 }
.steps p { font-size: .76rem; margin: 5px 0 0 }

/* ── 10. Food Discovery ──────────────────────────────────── */
.food-section { background: linear-gradient(180deg, transparent, rgba(10,14,9,.7), transparent) }
.food-layout { display: grid; grid-template-columns: .58fr 1.42fr; gap: 36px; align-items: start }
.food-copy { position: sticky; top: 118px }
.food-copy > p:not(.eyebrow) { font-size: .9rem }
.check-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 11px }
.check-list li { position: relative; padding-left: 27px; color: var(--muted) }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--leaf); font-weight: 800 }
.food-visual-column { min-width: 0 }
.food-gallery { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 11px; align-items: start }
.food-card { border-radius: 22px; padding: 16px 14px 18px; display: flex; flex-direction: column; min-height: 0; align-self: start; min-width: 0 }
.food-card img { width: 100%; height: 154px; object-fit: contain; object-position: center; border-radius: 0; margin: 0 auto 10px; background: transparent; filter: drop-shadow(0 16px 21px rgba(0,0,0,.32)) }
.food-card div { padding: 0 4px }
.food-card h3 { font-size: 1.06rem; margin-bottom: 4px }
.food-card p { font-size: .72rem; line-height: 1.45; margin: 0 }
.food-card.apple-card img { width: 90%; height: 154px; margin-inline: auto; object-fit: contain; filter: drop-shadow(0 15px 20px rgba(0,0,0,.28)) }
.food-benefits { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 22px 2px 0; padding-top: 20px; border-top: 1px solid rgba(236,244,221,.09) }
.food-benefits li { min-width: 0; position: relative; padding-left: 25px; font-size: .78rem; line-height: 1.45; color: rgba(246,241,230,.76) }
.food-benefits li::before { content: "✓"; position: absolute; left: 0; top: .03em; color: var(--leaf); font-weight: 800 }

/* ── 11. Starting Range ──────────────────────────────────── */
.starting-section { padding-top: 80px }
.starting-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 16px }
.starting-copy, .range-card { border-radius: 30px; padding: 36px }
.starting-copy p { font-size: 1rem }
.bold-line { color: var(--text); font-weight: 750 }
.range-value { font: 400 clamp(4rem,7vw,6rem)/.95 var(--serif); letter-spacing: -.055em }
.range-value span { font-size: .62em }
.range-value small { font: 600 1rem var(--sans); color: var(--soft); letter-spacing: 0 }
.range-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); position: relative; margin: 34px 0 13px }
.range-track i { position: absolute; inset: 0 45% 0 0; border-radius: inherit; background: linear-gradient(90deg, #83a844, var(--leaf)) }
.range-track b { position: absolute; left: 55%; top: 50%; transform: translate(-50%,-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 9px rgba(197,234,109,.13) }
.range-labels { display: flex; justify-content: space-between; color: var(--soft); font-size: .8rem }
.range-insight { display: flex; gap: 13px; align-items: flex-start; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08) }
.range-insight svg { width: 24px; height: 24px; color: var(--leaf); flex: 0 0 auto }
.range-insight p { margin: 0; color: var(--text) }
.trust-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px }
.trust-grid > div { padding: 18px; border-radius: 20px; background: rgba(10,14,9,.52); border: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: 30px 1fr; column-gap: 10px }
.trust-grid svg { width: 22px; height: 22px; color: var(--leaf); grid-row: 1/3 }
.trust-grid strong { font-size: .83rem }
.trust-grid span { font-size: .74rem; color: var(--soft); line-height: 1.35 }

/* ── 12. FAQ ─────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: .66fr 1.34fr; gap: 50px; align-items: start }
.faq-intro { position: sticky; top: 118px }
.faq-intro > p:not(.eyebrow) { font-size: .9rem }
.faq-list { display: grid; gap: 10px }
.faq-list details { border: 1px solid rgba(255,255,255,.1); border-radius: 19px; background: rgba(11,16,10,.68); overflow: hidden }
.faq-list summary { list-style: none; cursor: pointer; padding: 20px 22px; font-size: 1rem; font-weight: 750; display: flex; justify-content: space-between; gap: 20px }
.faq-list summary::-webkit-details-marker { display: none }
.faq-list summary::after { content: "+"; font-size: 1.4rem; color: var(--leaf); font-weight: 400 }
.faq-list details[open] summary::after { content: "–" }
.faq-list details p { padding: 0 22px 21px; margin: 0; font-size: .92rem; max-width: 750px; line-height: 1.55 }

/* ── 13. Pricing ─────────────────────────────────────────── */
.pricing-section { background: linear-gradient(180deg, transparent, rgba(9,13,8,.72), transparent) }
.pricing-grid { display: grid; grid-template-columns: .66fr 1.34fr; gap: 35px; align-items: start }
.pricing-reassurance { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: .82rem }
.pricing-main { display: grid; gap: 16px; min-width: 0 }
.included-features { padding: 25px 27px 27px; border-radius: 26px }
.included-heading { display: grid; grid-template-columns: .72fr 1.28fr; gap: 24px; align-items: end; margin-bottom: 20px }
.included-heading .eyebrow { margin-bottom: 0 }
.included-heading h3 { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; letter-spacing: -.035em; margin: 0 }
.included-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 22px }
.included-grid > div { position: relative; padding: 13px 14px 13px 34px; border-radius: 17px; background: rgba(5,8,4,.28); border: 1px solid rgba(255,255,255,.055) }
.included-grid > div::before { content: "✓"; position: absolute; left: 13px; top: 12px; color: var(--leaf); font-weight: 850 }
.included-grid strong { display: block; font-size: .83rem; margin-bottom: 3px; color: var(--text) }
.included-grid span { display: block; color: var(--soft); font-size: .72rem; line-height: 1.42 }
.plans { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px }
.plan { padding: 30px; border-radius: 29px; position: relative }
.plan-featured { border-color: var(--line-strong); box-shadow: 0 30px 80px rgba(114,151,54,.13); padding-top: 62px }
.plan-badge {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  border-radius: 999px; background: var(--leaf); color: #15200c;
  padding: 7px 13px; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.plan h3 { font-size: 1.35rem }
.price { font: 400 3.35rem/.95 var(--serif); letter-spacing: -.045em; margin: 14px 0 }
.price small { font: 600 .95rem var(--sans); color: var(--soft); letter-spacing: 0 }
.plan > p { font-size: .88rem }
.plan ul { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px }
.plan li { font-size: .9rem }
.plan li::before { content: "✓"; color: var(--leaf); font-weight: 800; margin-right: 9px }
.fine-print { display: block; color: var(--soft); font-size: .72rem; margin-top: 12px; line-height: 1.45 }

/* ── 14. Final CTA ───────────────────────────────────────── */
.final-cta { isolation: isolate; padding: 96px 0 105px; position: relative; overflow: hidden }
.final-background {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(5,7,4,.91) 0%, rgba(5,7,4,.79) 42%, rgba(5,7,4,.35) 72%, rgba(5,7,4,.52) 100%),
    linear-gradient(180deg, #050704 0%, transparent 18%, transparent 80%, #050704 100%),
    url('assets/cta-garden.webp');
  background-position: center 58%; background-size: cover;
}
.final-grid { display: grid; grid-template-columns: minmax(0,740px); align-items: start; position: relative; z-index: 1 }
.final-grid h2 { max-width: 13ch }
.final-grid > div > p:not(.eyebrow) { font-size: 1.05rem; max-width: 620px }
.download-card { display: none }

/* ── 15. Footer ──────────────────────────────────────────── */
.site-footer { padding: 44px 0 35px; border-top: 1px solid rgba(255,255,255,.08); background: #050704 }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 35px }
.footer-grid > div > p { max-width: 480px; font-size: .88rem; margin-top: 16px }
.footer-links { display: grid; grid-template-columns: repeat(3,auto); gap: 12px 24px; align-content: start; font-size: .84rem; color: rgba(255,255,255,.72) }
.footer-links a:hover { color: var(--leaf) }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 28px; padding-top: 18px; display: flex; justify-content: space-between; gap: 15px; font-size: .75rem; color: rgba(255,255,255,.42) }

/* ── 16. Mobile Sticky CTA (hidden by default) ───────────── */
.mobile-store { display: none }

/* ── 17. Tablet — max-width: 1120px ─────────────────────── */
@media (max-width: 1120px) {
  /* Collapse all major grids to 1 column */
  .hero-grid,
  .food-layout,
  .starting-grid,
  .faq-grid,
  .pricing-grid { grid-template-columns: 1fr }

  /* Hero */
  .hero { padding-top: 135px }
  .hero-copy { max-width: 760px }
  .hero-phones { height: 560px; max-width: 700px; margin-inline: auto; width: 100% }
  .phone-primary { width: 280px; left: 13% }
  .phone-secondary { width: 238px; right: 10%; top: 82px }

  /* Typography */
  h1 { max-width: 15ch }

  /* Answer card collapses */
  .answer-card { grid-template-columns: 1fr }
  .answer-card h2, .answer-card .eyebrow, .answer-card p:last-child { grid-column: auto; grid-row: auto }
  .answer-card p:last-child { margin-top: 16px }

  /* Value / benefit */
  .value-grid { grid-template-columns: repeat(2,1fr) }
  .steps { grid-template-columns: repeat(2,1fr) }
  .steps > div { border-right: 0 }

  /* Food */
  .food-copy, .faq-intro { position: static }
  .food-gallery { grid-template-columns: repeat(3,minmax(0,1fr)) }
  .food-card img { height: 168px }
  .food-card.apple-card img { height: 168px; width: 86% }

  /* Trust grid */
  .trust-grid { grid-template-columns: repeat(2,1fr) }

  /* Mobile navigation */
  .nav-links {
    display: none;
    position: fixed;
    left: 20px; right: 20px;
    top: 96px;
    z-index: 200;
    padding: 10px 8px;
    border-radius: 20px;
    background: rgba(7,10,6,.97);
    border: 1px solid rgba(255,255,255,.09);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links.open { display: flex }
  .nav-links a {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: .92rem;
  }
  .nav-links a:last-child { border-bottom: 0 }
  .menu-toggle { display: flex }
  .nav-cta { display: none }
}

/* ── 18. Mobile — max-width: 760px ──────────────────────── */
@media (max-width: 760px) {
  /* Layout */
  .shell { width: min(var(--shell), calc(100% - 28px)) }
  .section { padding: 76px 0 }

  /* Typography — mobile-specific scale, remove desktop max-widths */
  h1 { font-size: clamp(2.9rem,11.5vw,3.5rem); line-height: 1; max-width: none }
  h2 { font-size: clamp(2.05rem,8.7vw,2.9rem) }
  p { font-size: inherit }

  /* Eyebrow — reduce letter-spacing to prevent overflow on narrow screens */
  .eyebrow { font-size: .64rem; letter-spacing: .1em; overflow: hidden }

  /* Header */
  .site-header { padding-top: 10px }
  .nav { height: 58px; padding: 0 8px 0 14px }
  .brand { font-size: 1.18rem; letter-spacing: .11em }

  /* Hero — stack copy then phones, no min-height on mobile */
  .hero { min-height: auto; padding: 110px 0 0 }
  .hero-background {
    background-position: 62% center;
    background-image:
      linear-gradient(180deg, rgba(5,7,4,.85), rgba(5,7,4,.67) 45%, #050704 90%),
      url('assets/hero-garden.webp');
  }
  .hero-grid { grid-template-columns: 1fr; width: 100%; gap: 0 }
  .hero-copy { width: 100%; max-width: none; min-width: 0 }
  .hero-lead { font-size: 1.06rem; max-width: none }
  .hero-actions { flex-direction: column; align-items: stretch; margin: 24px 0 10px }
  .hero-actions .button { width: 100%; justify-content: center }
  .trust-mini { display: grid; grid-template-columns: 1fr; gap: 12px }

  /* Phone composition — below hero copy */
  .hero-phones {
    height: 400px;
    width: 100%;
    margin-top: 28px;
    overflow: hidden;
    display: block;
    position: relative;
  }
  .phone-primary { width: 226px; left: 5%; top: 8px }
  .phone-secondary { width: 182px; right: 0; top: 52px }

  /* Answer card */
  .answer-card { padding: 26px }
  .answer-card h2 { font-size: 1.75rem }

  /* Value cards */
  .value-grid { grid-template-columns: 1fr }
  .value-card { min-height: 300px }
  .value-food-frame { width: 82%; height: 142px }
  .steps { grid-template-columns: 1fr }
  .steps > div { padding: 14px 15px 14px 58px }

  /* Food discovery — single column, image-above-text cards */
  .food-layout { grid-template-columns: 1fr; width: 100%; gap: 28px }
  .food-copy { position: static }
  .food-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-items: start }
  .food-card { display: flex; flex-direction: column; min-height: 0; padding: 14px 12px 16px }
  .food-card img { height: 148px; width: 100%; margin: 0 auto 10px; object-fit: contain }
  .food-card div { padding: 0 2px }
  .food-card h3 { font-size: 1.02rem }
  .food-card p { font-size: .73rem }
  .food-card.apple-card img { width: 84%; height: 148px; margin-inline: auto }
  .food-benefits { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; padding-top: 16px }
  .food-benefits li { font-size: .76rem }

  /* Starting range */
  .starting-copy, .range-card { padding: 26px }
  .range-value { font-size: 4rem }
  .range-labels { font-size: .68rem }

  /* Trust */
  .trust-grid { grid-template-columns: repeat(2,1fr) }

  /* FAQ */
  .faq-grid { gap: 28px }
  .faq-intro { position: static }

  /* Pricing */
  .pricing-grid { gap: 28px }
  .plans { grid-template-columns: 1fr }
  .plan { padding: 27px }
  .plan-featured { padding-top: 56px }
  .included-features { padding: 23px }
  .included-heading { grid-template-columns: 1fr; gap: 9px }
  .included-heading h3 { font-size: 1.35rem }
  .included-grid { grid-template-columns: 1fr; gap: 9px }

  /* Final CTA */
  .final-cta { padding: 90px 0 110px }
  .final-background { background-position: 58% center }
  .final-grid > div > p:not(.eyebrow) { max-width: none }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr }
  .footer-links { grid-template-columns: repeat(2,auto); justify-content: start }
  .footer-bottom { flex-direction: column; padding-bottom: calc(80px + env(safe-area-inset-bottom)) }

  /* Mobile sticky CTA */
  .mobile-store {
    display: flex;
    position: fixed;
    left: 16px; right: 16px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
    height: 56px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 20px;
    border-radius: 999px;
    color: #11150b;
    background: linear-gradient(180deg, var(--gold-2), #e5c783);
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
    font-weight: 800;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
  }
  .mobile-store svg { width: 17px; height: 17px }
}

/* ── 19. Small Mobile — max-width: 430px ─────────────────── */
@media (max-width: 430px) {
  h1 { font-size: clamp(2.7rem,10.5vw,3.1rem) }
  h2 { font-size: clamp(1.9rem,8vw,2.5rem) }

  /* Food cards: 1 column for tight screens */
  .food-gallery { grid-template-columns: 1fr; gap: 10px }
  .food-card img { height: 170px }
  .food-card.apple-card img { width: 80%; height: 165px }

  /* Trust: stack */
  .trust-grid { grid-template-columns: 1fr }
}

/* ── 20. Reduced Motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .reveal { opacity: 1; transform: none; transition: none }
  .button { transition: none }
  .menu-toggle span:not(.sr-only) { transition: none }
}