@charset "UTF-8";

:root {
  --green: #176440;
  --bright: #078440;
  --cta: #078440;
  --cta-hover: #056e34;
  --deep: #205f4e;
  --orange: #df651c;
  --ink: #252923;
  --muted: #62685f;
  --line: #dfe7dd;
  --soft: #f6f8f5;
  --pale: #e9f2e7;
  --cream: #fff7ed;
  --white: #ffffff;
  --body: 'Segoe UI', Arial, sans-serif;
  --heading: 'Arial Black', 'Segoe UI', Arial, sans-serif;
  --scroll-thumb: #859b8a;
  --scroll-track: #f6f8f5;
  --scroll-hover: #176440;
  --scroll-active: #205f4e;
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  font-synthesis: none;
  scroll-behavior: smooth;
  scroll-padding-top: 18px;
  scroll-padding-bottom: 100px;
  scrollbar-gutter: stable;
}
*, *::before, *::after { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--scroll-track); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
::-webkit-scrollbar-thumb:active { background: var(--scroll-active); }
body { margin: 0; font-size: 15px; line-height: 1.6; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2 { font-family: var(--heading); font-weight: 900; letter-spacing: -.045em; line-height: 1.17; text-align: center; text-wrap: balance; }
h1 { font-size: clamp(25px, 6.8vw, 32px); color: var(--green); text-wrap: initial; }
h1 > span { color: var(--ink); }
h2 { font-size: clamp(22px, 5.8vw, 27px); }
h2 > span { color: var(--bright); }
h3 { font-weight: 800; line-height: 1.35; }
p { color: var(--muted); }
strong { font-weight: 750; }
img { display: block; max-width: 100%; height: auto; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
a { color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
[hidden] { display: none !important; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: min(920px, calc(100% - 32px)); margin-inline: auto; }
.narrow { max-width: 760px; }
.section { padding-block: 42px; }
.tinted { background: var(--soft); }
.section-intro { text-align: center; font-size: 13px; line-height: 1.7; max-width: 590px; margin: 15px auto 26px; }
.eyebrow { display: block; font-size: 10px; font-weight: 750; letter-spacing: .07em; text-align: center; margin-bottom: 12px; }
.cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 485px; min-height: 55px; margin-inline: auto; padding: 16px 13px; background: var(--cta); color: var(--white); border: 1px solid transparent; border-bottom: 4px solid #056c34; border-radius: 9px; box-shadow: 0 5px 13px #078c4220; font-weight: 850; font-size: 12px; line-height: 1.35; text-align: center; transition: background .15s, transform .15s, box-shadow .15s; }
.cta > span { font-size: 20px; flex-shrink: 0; }
.cta > svg { width: 19px; height: 19px; }
.cta:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 7px 18px #078c422b; }
.cta:active { transform: translateY(1px); box-shadow: none; }
.skip-link { position: fixed; left: 15px; top: -90px; z-index: 100; padding: 12px; background: var(--green); color: var(--white); }
.skip-link:focus { top: 10px; }
.skip-link:not(:focus) { clip-path: inset(50%); }
.topbar { padding: 8px 12px; background: var(--deep); color: var(--white); text-align: center; font-size: 8px; font-weight: 700; letter-spacing: .02em; }
.topbar > span { padding-inline: 6px; color: #f6b877; }

/* A single centered sales column introduces the offer before plan selection. */
.hero { padding-top: 20px; padding-bottom: 28px; }
.hero-inner { max-width: 680px; text-align: center; }
.brand-logo { width: 152px; height: auto; margin: 0 auto 19px; }
.hero-lead { margin: 15px auto 8px; font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 490px; }
.hero-lead strong { color: var(--green); }
.hero-description { margin: 0 auto; max-width: 560px; font-size: 12px; line-height: 1.65; }
.hero-product { margin: 21px auto 16px; }
.hero-product figcaption { font-size: 8px; color: var(--muted); margin: 9px auto 0; max-width: 410px; line-height: 1.5; }
.product-scene { width: 100%; aspect-ratio: 1.42; position: relative; border-radius: 13px; background: #e9eadf; isolation: isolate; overflow: hidden; container-type: inline-size; box-shadow: 0 13px 25px #27483313; }
.scene-backdrop { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, #f9f8ef 5%, #eff2e4 65%, #d6e0cf); }
.scene-label { position: absolute; top: 10%; right: 6%; font-size: 2.1cqw; color: var(--green); line-height: 1.5; text-align: left; letter-spacing: .03em; }
.scene-label strong { font-size: 2.5cqw; font-weight: 850; }
.product-book { position: absolute; left: 11%; top: 8%; width: 43%; height: 80%; transform: perspective(700px) rotateY(-10deg) rotateZ(-5deg); box-shadow: 15px 18px 19px #28392a35; }
.book-front { height: 100%; background: #fffaf0; padding: 6% 8% 5%; position: relative; border: 1px solid #d4d6c0; border-right: 3px solid #f1f0e2; border-radius: 1px 3px 3px 1px; display: flex; flex-direction: column; gap: 4%; }
.book-front::after { content: ''; position: absolute; inset: 3%; border: 1px solid #17644033; pointer-events: none; }
.book-spine { position: absolute; left: -7%; top: 0; height: 100%; width: 8%; background: #235a3c; writing-mode: vertical-rl; transform: rotate(180deg); color: white; font-size: 1.15cqw; font-weight: 800; letter-spacing: .05em; padding: 5% 1.8%; text-align: center; }
.book-front > img { width: 75%; height: 14%; object-fit: contain; margin: 0 auto; flex-shrink: 0; }
.cover-title { font-family: var(--heading); font-size: 3.05cqw; letter-spacing: -.035em; line-height: 1.15; color: var(--green); }
.cover-title > span { color: var(--orange); }
.cover-foods { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: 1; min-height: 0; }
.cover-foods > div { border-radius: 3px; }
.cover-bottom { display: flex; align-items: center; justify-content: center; gap: 7%; height: 13%; flex-shrink: 0; color: var(--green); }
.cover-bottom strong { font-family: var(--heading); font-size: 5.5cqw; line-height: 1; }
.cover-bottom span { font-size: 1.45cqw; font-weight: 850; line-height: 1.4; text-align: left; }
.product-phone { position: absolute; left: 56%; top: 27%; width: 26%; height: 60%; background: #fffaf0; border: 5px solid #232720; border-radius: 18px; padding: 4% 1.7% 2%; transform: rotate(6deg); box-shadow: 9px 13px 14px #28392a35; display: flex; flex-direction: column; gap: 4%; }
.phone-island { position: absolute; width: 38%; height: 4%; top: 2%; left: 31%; border-radius: 15px; background: #232720; }
.product-phone > img { width: 90%; height: 16%; object-fit: contain; margin: 0 auto; flex-shrink: 0; }
.product-phone > strong { display: block; font-family: var(--heading); font-size: 2.2cqw; line-height: 1.15; color: var(--green); }
.phone-photo { flex: 1; min-height: 0; border-radius: 2px; }
.phone-grid { height: 21%; flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.product-phone > span { font-size: .9cqw; color: var(--green); font-weight: 800; display: block; }
.product-stamp { position: absolute; right: 1.8%; bottom: 18%; background: #fdf6e6; color: var(--green); border: 2px solid var(--orange); border-radius: 50%; width: 22%; aspect-ratio: 1; transform: rotate(10deg); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 2px 4px 8px #352f1a18; }
.product-stamp span { font-size: 1.33cqw; line-height: 1.5; font-weight: 800; }
.product-stamp strong { font-family: var(--heading); font-size: 7.5cqw; color: var(--orange); line-height: 1.1; }
.scene-chips { position: absolute; left: 0; right: 0; bottom: 3.5%; display: flex; gap: 8px; justify-content: center; }
.scene-chips span { background: #ffffffea; border-radius: 4px; padding: 4px 8px; font-size: 1.8cqw; color: var(--green); font-weight: 700; }

.compare-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 10px; padding: 12px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.compare-link:hover { color: var(--green); }
.compare-link span { display: inline-block; margin-left: 5px; }

/* Compact benefit and identification blocks, as in the supplied sales pages. */
.benefits-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 25px 0; }
.benefit { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 13px; background: var(--white); border: 1px solid #e9ece6; border-radius: 9px; }
.benefit-icon { color: var(--orange); background: #fff3d9; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.benefit-icon svg { width: 20px; height: 20px; }
.benefit p { font-size: 11px; line-height: 1.55; color: #525b50; }
.benefit p strong { color: var(--ink); }
.recipe-section { background: var(--pale); }
.recipe-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 10px; }
.recipe-card { background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 3px 0 #d4e0d3; }
.recipe-card > .food-photo { aspect-ratio: 1.15; }
.recipe-card > div:last-child { padding: 13px 8px 15px; text-align: center; }
.recipe-card h3 { font-size: 10px; color: var(--green); font-weight: 850; margin-bottom: 5px; min-height: 26px; display: grid; place-content: center; }
.recipe-card p { font-size: 10px; line-height: 1.5; }
.food-photo { background-position: center; background-size: cover; background-repeat: no-repeat; }
.food-0 { background-image: url('assets/recipe-0.webp'); }
.food-1 { background-image: url('assets/recipe-1.webp'); }
.food-2 { background-image: url('assets/recipe-2.webp'); }
.food-3 { background-image: url('assets/recipe-3.webp'); }
.food-4 { background-image: url('assets/recipe-4.webp'); }
.food-5 { background-image: url('assets/recipe-5.webp'); }
.food-6 { background-image: url('assets/recipe-6.webp'); }
.food-7 { background-image: url('assets/recipe-7.webp'); }
.image-note { font-size: 8px; text-align: center; margin-top: 13px; }
.collection-callout { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid #d2dfce; border-radius: 9px; padding: 18px; margin: 24px 0 18px; }
.collection-number { font-family: var(--heading); font-size: 41px; letter-spacing: -.07em; color: var(--green); line-height: 1; }
.collection-callout h3 { font-size: 12px; color: var(--green); }
.collection-callout p { font-size: 11px; line-height: 1.6; margin-top: 5px; }
.mechanism { background: var(--deep); color: var(--white); }
.mechanism .eyebrow { color: #dcebd2; font-size: 9px; }
.mechanism h2 > span { color: #dbedba; }
.mechanism .section-intro { color: #e0e9df; }
.comparison { display: grid; gap: 12px; margin-top: 22px; }
.comparison > div { background: var(--white); color: var(--ink); display: flex; gap: 13px; align-items: center; padding: 18px; border-radius: 9px; }
.comparison-sign { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 23px; line-height: 1; background: #fbeddf; color: #bd5628; }
.comparison h3 { font-size: 11px; margin-bottom: 5px; }
.comparison p { font-size: 12px; line-height: 1.55; }
.comparison-smart .comparison-sign { background: #e8f2df; color: var(--green); }
.comparison-smart h3 { color: var(--green); }
.method-flow { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 21px 0; font-size: 9px; font-weight: 650; }
.method-flow span { text-align: center; flex: 1; }
.method-flow b { color: #d2e4b6; font-size: 16px; }
.mechanism-close { text-align: center; color: #e0e9df; font-size: 12px; line-height: 1.75; max-width: 530px; margin: 0 auto 23px; }
.mechanism-close strong { color: var(--white); }
.mechanism .cta { border: 1px solid #41b976; border-bottom: 4px solid #055c2d; }

/* The bonus stack leads immediately to the two-plan price comparison. */
.bonus-section { background: var(--cream); }
.bonus-tag { display: table; margin: 0 auto 12px; color: var(--white); background: #ca5016; border-radius: 40px; padding: 5px 11px; font-size: 9px; font-weight: 800; }
h2 > .orange { color: var(--orange); }
.bonus-list { display: grid; gap: 18px; }
.bonus-item { display: flex; align-items: center; gap: 17px; background: var(--white); border: 1px solid #ede5d8; border-radius: 9px; padding: 19px 14px; }
.mini-book { position: relative; width: 93px; min-width: 93px; height: 134px; padding: 14px 8px 8px 12px; border-left: 4px solid #ffffff3b; border-radius: 1px 3px 3px 1px; box-shadow: 5px 5px 0 #c9c9bba6, 5px 8px 12px #232d211f; transform: rotate(-5deg); display: flex; flex-direction: column; text-align: left; }
.mini-book::after { content: ''; position: absolute; top: 4px; right: -3px; bottom: 1px; width: 3px; background: #eee; }
.mini-number { position: absolute; top: -11px; left: -5px; padding: 3px 7px; color: var(--white); background: #dc6a20; border-radius: 3px; font-size: 7px; font-weight: 800; }
.mini-brand { font-size: 5px; font-weight: 800; letter-spacing: .04em; margin-bottom: 10px; }
.mini-book > strong { font-family: Georgia, serif; font-size: 12px; line-height: 1.3; font-weight: 400; }
.mini-book > small { font-size: 4px; margin-top: auto; font-weight: 700; }
.bonus-one { background: #20583e; color: var(--white); }
.bonus-two { background: #b5c9a0; color: #254b2d; }
.bonus-three { background: #f2d395; color: #4d4120; }
.mini-calendar { height: 24px; border: 1px solid #dce9c780; background: repeating-linear-gradient(to right,transparent 0,transparent 12px,#dce9c780 12px,#dce9c780 13px), repeating-linear-gradient(to bottom,transparent 0,transparent 7px,#dce9c780 7px,#dce9c780 8px); margin-top: 10px; }
.mini-swap { font-size: 26px; margin-top: 3px; line-height: 1; }
.mini-seven { font-family: Georgia,serif; font-size: 28px; margin-top: 3px; line-height: 1; }
.mini-seven > small { font-family: var(--body); font-size: 6px; }
.bonus-info { min-width: 0; }

.bonus-info h3 { font-size: 14px; color: var(--green); margin: 4px 0 7px; }
.bonus-info p { font-size: 10px; line-height: 1.65; }

.bonus-total { margin-top: 23px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--deep); padding: 15px; border-radius: 6px; color: var(--white); box-shadow: 0 3px 0 #123c2e25; }
.bonus-total svg { width: 18px; height: 18px; color: #ffd6a4; }
.bonus-total strong { font-size: 10px; line-height: 1.55; text-align: center; }
.offer-section { background: var(--deep); color: var(--white); scroll-margin-top: 0; }
.offer-section > .container > h2 > span { color: #dcf2c4; }
.offer-section .section-intro { color: #e5eee4; }
.offer-section .eyebrow { color: #d1e7c6; font-size: 10px; }

.cta-basic { background: var(--green); border-bottom-color: #0a482d; box-shadow: none; }

.faq-section { background: var(--soft); }
.faq-list { display: grid; gap: 9px; margin-top: 26px; }
.faq-list details { background: var(--white); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; list-style: none; padding: 16px 14px; font-size: 12px; font-weight: 700; line-height: 1.6; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { color: var(--orange); font-size: 21px; font-weight: 500; transition: transform .15s; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-list details[open] summary { color: var(--green); }
.faq-list summary:hover { background: #f7faf3; }
.faq-list details > p { padding: 0 16px 18px; font-size: 12px; line-height: 1.8; }
.final-offer { text-align: center; }
.final-offer p { font-size: 12px; margin-top: 16px; }
.final-offer .cta { margin-top: 24px; }
.final-price { font-family: var(--heading); font-size: 42px; letter-spacing: -.05em; color: var(--bright); margin: 12px 0 13px; line-height: 1.3; }

.footer { background: #202922; color: #d3dbd1; padding: 29px 20px 108px; text-align: center; }
.footer img { width: 130px; margin: 0 auto 15px; }
.footer p { color: #d3dbd1; font-size: 9px; }
.footer small { display: block; font-size: 8px; margin-top: 9px; }
.sticky-offer { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding: 10px 14px max(10px,env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px #132b1b14; display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.sticky-offer > div { flex-shrink: 0; }
.sticky-offer > div > span { display: block; font-size: 7px; color: var(--muted); font-weight: 750; }
.sticky-offer > div > strong { display: block; font-family: var(--heading); font-size: 25px; color: var(--green); letter-spacing: -.05em; line-height: 1.3; }
.sticky-offer .cta { width: auto; margin: 0; flex: 1; max-width: 265px; padding: 12px 10px; min-height: 46px; font-size: 10px; gap: 8px; }

/* Compare, select and review locally; only the final action opens payment. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero-price-guide { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 21px auto 17px; }
.hero-price-guide > div { text-align: left; }
.hero-price-guide > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.hero-price-guide span { display: block; font-size: 9px; font-weight: 750; color: var(--muted); }
.hero-price-guide strong { display: block; font-size: 25px; line-height: 1.4; letter-spacing: -.045em; color: var(--green); }

.benefit p { font-size: 12px; }
.bonus-info p { font-size: 12px; }
.recipe-card h3, .recipe-card p { font-size: 11px; }
.offer-panel { background: var(--white); color: var(--ink); border-radius: 14px; padding: 20px 14px; box-shadow: 0 12px 30px #10352825; }
.plan-comparison { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; line-height: 1.5; }
.plan-comparison caption { text-align: left; font-size: 13px; font-weight: 750; padding: 0 0 16px; }
.plan-comparison th, .plan-comparison td { padding: 12px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.plan-comparison th:first-child { width: 54%; text-align: left; font-weight: 600; padding-left: 0; }
.plan-comparison thead th { vertical-align: bottom; color: var(--green); font-weight: 800; }
.plan-comparison thead th:first-child { color: var(--muted); font-size: 10px; }
.plan-comparison small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.plan-comparison thead small { font-weight: 750; color: var(--green); white-space: nowrap; }
.plan-comparison tr > :nth-child(2) { background: #edf5e8; }
.plan-comparison td { color: var(--green); font-size: 17px; font-weight: 800; }
.plan-picker { border: 0; min-width: 0; margin: 28px 0 0; padding: 0; }
.plan-picker legend, .order-review h3 { padding: 0; font-size: 15px; font-weight: 800; }
.plan-picker legend > span, .order-review h3 > span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: white; margin-right: 6px; font-size: 12px; }
#selection-help { font-size: 12px; margin: 9px 0 15px; }
.plan-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-option { min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 14px 10px; border: 2px solid var(--line); border-radius: 9px; cursor: pointer; }
.plan-option:hover { border-color: #80a789; }
.plan-option:has(input:checked) { border-color: var(--green); background: #f1f7ec; }
.plan-option:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
.option-top { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.option-top input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--green); margin: 0; cursor: pointer; }
.option-price { font-size: 24px; font-weight: 850; letter-spacing: -.055em; color: var(--green); line-height: 1.25; white-space: nowrap; }
.option-description { font-size: 11px; line-height: 1.6; color: var(--muted); }

.order-review { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 24px; }
.selection-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.selection-heading > div > span { display: block; font-size: 9px; font-weight: 700; color: var(--muted); }
#selected-name { display: block; font-size: 17px; color: var(--green); }
#selected-price { font-size: 26px; letter-spacing: -.055em; color: var(--green); white-space: nowrap; }
.selected-base { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; margin-top: 16px; color: var(--ink); }
.selected-base svg { width: 17px; height: 17px; color: var(--green); margin-top: 2px; }
.selected-extras { min-height: 158px; padding: 14px; margin: 13px 0 17px; background: var(--soft); border-radius: 7px; }
#selected-bonuses > p { font-size: 9px; font-weight: 800; color: var(--green); }
#selected-bonuses ul { padding-left: 17px; margin: 9px 0 0; display: grid; gap: 6px; font-size: 12px; color: var(--ink); }
#selected-bonuses li::marker { color: var(--green); }
#selected-basic-note { font-size: 12px; line-height: 1.75; }
.checkout-explanation { text-align: center; font-size: 11px; margin: 12px auto 0; max-width: 370px; }
.plan-fallback { padding-top: 24px; }
.plan-fallback > p { font-size: 13px; text-align: center; margin-bottom: 15px; }
.plan-fallback .cta + .cta { margin-top: 13px; }

.offer-faq-link { display: flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; margin-top: 12px; }
.sticky-offer > div > strong { font-family: var(--body); font-size: 16px; letter-spacing: -.02em; }

@media (min-width: 540px) {
  .offer-panel { padding: 30px; }
  .plan-comparison { font-size: 13px; }
  .plan-comparison caption { font-size: 16px; }
  .plan-comparison th, .plan-comparison td { padding: 13px 12px; }
  .plan-comparison small { font-size: 11px; }
  .plan-comparison thead th:first-child { font-size: 12px; }
  .plan-option { padding: 20px; gap: 12px; }
  .option-top { font-size: 16px; }
  .option-price { font-size: 30px; }
  .option-description { font-size: 13px; }

  .selected-extras { min-height: 142px; }

  .container { width: min(920px, calc(100% - 48px)); }
  .section { padding-block: 49px; }
  .hero { padding-top: 23px; padding-bottom: 35px; }
  h1 { font-size: 39px; }
  h2 { font-size: 29px; }
  .hero-inner { max-width: 640px; }
  .hero-description { font-size: 14px; }
  .hero-lead { font-size: 18px; }
  .brand-logo { width: 157px; }
  .hero-product { margin-top: 23px; }
  .product-scene { aspect-ratio: 1.55; }

  .cta { font-size: 14px; padding: 17px 19px; min-height: 57px; }

  .compare-link { font-size: 11px; }
  .benefit { flex-direction: row; align-items: center; gap: 12px; padding: 17px; }
  .benefit p { font-size: 13px; }
  .benefits-grid { gap: 12px; }
  .recipe-card h3 { font-size: 12px; }
  .recipe-card p { font-size: 12px; }
  .recipe-card > div:last-child { padding-block: 16px; }
  .comparison { grid-template-columns: 1fr 1fr; gap: 14px; }
  .method-flow { font-size: 11px; max-width: 530px; margin-inline: auto; }
  .mechanism-close { font-size: 13px; }

  .bonus-list { max-width: 630px; margin-inline: auto; }
  .bonus-item { padding: 23px 26px; gap: 30px; }
  .mini-book { width: 109px; min-width: 109px; height: 151px; padding: 17px 10px 11px 13px; }
  .mini-brand { font-size: 6px; }
  .mini-book > strong { font-size: 14px; }
  .mini-book > small { font-size: 5px; }
  .mini-calendar { margin-top: 14px; }
  .mini-swap { font-size: 32px; }
  .mini-seven { font-size: 34px; }

  .bonus-info h3 { font-size: 18px; }
  .bonus-info p { font-size: 12px; }

  .bonus-total strong { font-size: 12px; }

  .faq-list summary { font-size: 13px; padding-inline: 20px; }
  .faq-list details > p { padding-inline: 20px; }
  .sticky-offer { left: 50%; right: auto; transform: translateX(-50%); width: 510px; bottom: 15px; border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; }
}
@media (min-width: 820px) {
  .topbar { font-size: 10px; padding: 8px; }
  .recipe-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
  .recipe-card > .food-photo { aspect-ratio: 1.1; }
  .recipe-card h3 { font-size: 11px; }
  .recipe-card p { font-size: 11px; }
  .collection-callout { max-width: 700px; margin-inline: auto; padding-inline: 27px; }
  .collection-number { font-size: 51px; }
  .collection-callout h3 { font-size: 15px; }
  .collection-callout p { font-size: 12px; }
  .hero-inner { max-width: 640px; }

  .footer { padding-bottom: 103px; }
}
@media (max-width: 359px) {
  h1 { font-size: 25px; }
  h2 { font-size: 21px; }
  .topbar { font-size: 7px; }
  .cta { font-size: 10px; gap: 6px; }

  .benefit { padding: 11px; }
  .benefit p { font-size: 12px; }
  .bonus-item { padding-inline: 11px; gap: 13px; }
  .mini-book { min-width: 77px; width: 77px; height: 122px; padding-left: 8px; }
  .mini-book > strong { font-size: 10px; }
  .bonus-info h3 { font-size: 12px; }
  .bonus-info p { font-size: 12px; }

  .bonus-total strong { font-size: 9px; }

  .sticky-offer .cta { font-size: 9px; padding-inline: 9px; }
}
/* Reading hierarchy: useful copy stays legible; artwork has its own scale. */
:root { --copy-size: 15px; --detail-size: 12px; }
h1 { font-size: clamp(26px, 7vw, 39px); }
h2 { font-size: clamp(24px, 6vw, 30px); line-height: 1.22; }
.section { padding-block: clamp(40px, 7vw, 60px); }
.hero { padding-top: 23px; padding-bottom: 30px; }
.hero-description, .section-intro, .mechanism-close, .comparison p,
.benefit p, .bonus-info p, .collection-callout p, .faq-list details > p,
.final-offer p { font-size: var(--copy-size); line-height: 1.7; }
.hero-description { max-width: 540px; }
.hero-lead { font-size: clamp(17px, 4.3vw, 20px); margin-block: 17px 10px; }
.section-intro { margin-block: 18px 28px; }
.hero-product { margin-top: 24px; }
.hero-product figcaption, .image-note { font-size: var(--detail-size); line-height: 1.5; }
.hero-price-guide { gap: 20px; }
.hero-price-guide > div + div { padding-left: 20px; }
.hero-price-guide span { font-size: 11px; }
.hero-price-guide strong { font-size: 28px; }
.cta { font-size: 13px; min-height: 56px; padding: 17px 12px; }
.compare-link { font-size: 13px; margin-top: 8px; }
.eyebrow, .mechanism .eyebrow, .bonus-tag { font-size: 11px; }
.comparison h3 { font-size: 12px; }
.method-flow { font-size: 12px; gap: 8px; margin-block: 24px; }
.benefits-grid { gap: 12px; }
.benefit { padding: 16px; }
.benefit p strong { display: block; margin-bottom: 4px; }
.recipe-card h3 { font-size: 12px; min-height: 32px; margin: 0; }
.recipe-card > div:last-child { padding: 14px 9px; }
.collection-callout { align-items: flex-start; }
.collection-callout h3 { font-size: 14px; }
.bonus-info h3 { font-size: 19px; line-height: 1.3; margin: 0 0 9px; }
.bonus-info p strong { color: var(--ink); font-weight: 650; }
.bonus-item { align-items: center; padding: 24px 16px; }
.bonus-total strong { font-size: 13px; }
.plan-comparison { font-size: 13px; line-height: 1.55; }
.plan-comparison caption { font-size: 17px; line-height: 1.4; }
.plan-comparison th:first-child { width: 52%; }
.plan-comparison thead th { font-size: 12px; padding-inline: 3px; }
.plan-comparison thead th:first-child { font-size: 12px; }
.plan-comparison small { font-size: 12px; line-height: 1.5; margin-top: 5px; }
.plan-comparison thead small { font-size: 11px; }
.plan-picker legend, .order-review h3 { font-size: 17px; }
#selection-help { font-size: 13px; }
.plan-option { padding: 15px 11px; gap: 12px; }
.option-top { font-size: 15px; }
.option-purpose { font-size: 14px; line-height: 1.45; }
.option-description { font-size: 13px; line-height: 1.65; }
.option-price { font-size: 28px; }
.selected-base, #selected-basic-note, #selected-bonuses ul { font-size: 14px; line-height: 1.65; }
.selected-extras { min-height: 218px; }
#selected-bonuses > p { font-size: 14px; line-height: 1.5; }
.checkout-explanation, .offer-faq-link { font-size: 12px; }
.faq-list summary { font-size: 15px; }
.final-offer p { max-width: 540px; margin-inline: auto; }
.final-price > small { display: block; font-family: var(--body); font-size: 12px; letter-spacing: .02em; font-weight: 700; color: var(--muted); margin: 22px 0 7px; }
.footer p, .footer small { font-size: 12px; }
.sticky-offer > div > span { font-size: 10px; }
.sticky-offer .cta { font-size: 12px; }
@media (max-width: 539px) {
  .hero { padding-top: 18px; }
  .brand-logo { width: 136px; margin-bottom: 15px; }
  .hero-product { margin-top: 18px; }
  .product-scene { aspect-ratio: 1.55; }
  .hero-lead { margin-block: 13px 9px; }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit { flex-direction: row; gap: 13px; }
  .bonus-item { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 17px; }
  .mini-book { min-width: 0; width: 80px; height: 125px; padding-left: 8px; }
  .mini-book > strong { font-size: 11px; }
}
@media (min-width: 540px) {
  .plan-option { padding: 22px; }
  .option-top { font-size: 18px; }
  .option-price { font-size: 34px; }
  .option-description, .option-purpose { font-size: 15px; }
  .plan-comparison { font-size: 15px; }
  .plan-comparison thead th, .plan-comparison thead th:first-child { font-size: 14px; }
  .plan-comparison thead small { font-size: 12px; }
  .selected-extras { min-height: 180px; }
  .cta { font-size: 15px; }
}
@media (min-width: 360px) {
  .selected-extras { min-height: 180px; }
}
@media (max-width: 359px) {
  .hero-price-guide { gap: 14px; }
  .hero-price-guide > div + div { padding-left: 14px; }
  .hero-price-guide span { font-size: 10px; }
  .option-top { font-size: 14px; }
  .option-price { font-size: 26px; }
  .plan-option { padding-inline: 9px; }
  .bonus-item { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
  .mini-book { margin-inline: auto; }
  .sticky-offer > div > strong { font-size: 14px; }
  .sticky-offer .cta { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .cta:hover, .cta:active { transform: none; }
}
@media (forced-colors: active) {
  * { scrollbar-color: auto; }
  .cta, .benefit, .recipe-card, .bonus-item { border: 1px solid ButtonText; }
  .food-photo, .product-scene, .brand-logo { forced-color-adjust: none; }
  a:focus-visible, summary:focus-visible { outline-color: Highlight; }
}