/* Layout: moss-dark hero with the bar drawn as a speckled green stone, then light herbal sections; one accent (lime) for every buy action. */
:root{
  --bg:#f3f5ee;--surface:#ffffff;--ink:#1b2419;--muted:#5b6656;--line:#d9dfd0;
  --moss:#27361f;--moss-ink:#eef3e6;--sage:#a9b98d;--stone:#4a6a34;
  --accent:#c9e265;--accent-ink:#1b2419;
  --font-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --font-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,Menlo,monospace;
  --r:14px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141a12;--surface:#1c2419;--ink:#e8eee0;--muted:#a3ad98;--line:#2e3a29;
  --moss:#0e130c;--sage:#8fa072;color-scheme:dark}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--font-display);line-height:1.05;text-wrap:balance;margin:0}
h2{font-size:clamp(28px,4.4vw,44px);font-weight:800;letter-spacing:-.02em}
h3{font-size:20px;font-weight:700}
p{margin:0}
a{color:inherit}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
section{padding-block:clamp(56px,8vw,96px)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* announcement + nav */
.announce{background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:600;text-align:center;padding:8px 16px}
nav{position:sticky;top:0;z-index:5;background:var(--moss);color:var(--moss-ink);border-bottom:1px solid rgba(255,255,255,.08)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo i{width:18px;height:16px;background:var(--stone);border-radius:50% 50% 45% 45%/60% 60% 40% 40%;display:inline-block;transform:rotate(-8deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.links{display:flex;gap:24px;font-size:14px;font-weight:500}
.links a{text-decoration:none;opacity:.8}.links a:hover{opacity:1}
.nav-buy{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;text-decoration:none}
@media (max-width:720px){.links{display:none}}

/* buttons */
.btn{display:inline-block;text-align:center;text-decoration:none;border:0;cursor:pointer;font:700 16px var(--font-body);border-radius:999px;padding:16px 26px;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid currentColor}

/* hero */
.hero{background:var(--moss);color:var(--moss-ink);padding-block:clamp(40px,6vw,80px) clamp(56px,8vw,100px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(42px,7vw,84px);font-weight:800;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{font-size:clamp(17px,1.6vw,19px);opacity:.85;max-width:34em;margin-top:20px}
.hero .eyebrow{color:var(--sage);margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 12px;font-size:13px}
.buy{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}
.price-note{font-size:14px;opacity:.75}
.stage{position:relative;aspect-ratio:1;max-width:100%;display:grid;place-items:center}
.stage::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(201,226,101,.22),transparent 65%)}
.stage img{position:relative;width:80%;border-radius:24px;object-fit:cover;aspect-ratio:1;box-shadow:0 40px 60px -20px rgba(0,0,0,.55)}
.bar{position:relative;width:68%;aspect-ratio:1.05;transform:rotate(-12deg);
  border-radius:48% 52% 38% 42%/30% 34% 66% 70%;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 40%),
    radial-gradient(2px 2px at 20% 40%,#efe7b8 50%,transparent 51%),
    radial-gradient(2px 2px at 62% 30%,#efe7b8 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 66%,#efe7b8 50%,transparent 51%),
    radial-gradient(2px 2px at 74% 58%,#efe7b8 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 52%,#1f3318 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 56% 46%,#1f3318 50%,transparent 51%),
    radial-gradient(2px 2px at 50% 80%,#1f3318 50%,transparent 51%),
    radial-gradient(circle at 70% 85%,rgba(0,0,0,.25),transparent 55%),
    var(--stone);
  background-size:auto,23px 19px,31px 27px,17px 21px,29px 23px,13px 17px,19px 15px,27px 25px,auto,auto;
  box-shadow:0 40px 60px -20px rgba(0,0,0,.55),inset 0 -10px 30px rgba(0,0,0,.18);
  animation:float 6s ease-in-out infinite}
.stamp{position:absolute;right:4%;bottom:10%;background:var(--accent);color:var(--accent-ink);width:112px;height:112px;border-radius:50%;display:grid;place-items:center;text-align:center;font:700 13px/1.15 var(--font-display);transform:rotate(10deg);padding:10px}
.stamp span{display:block;font-size:26px;letter-spacing:-.02em}
@keyframes float{50%{transform:rotate(-9deg) translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.bar{animation:none}.btn{transition:none}html{scroll-behavior:auto}}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.stage{max-width:380px;width:100%;margin:0 auto;order:-1}}

/* problem band */
.problem{padding-block:48px;border-bottom:1px solid var(--line)}
.problem .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.problem p{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.25}
.problem p::before{content:"✕";display:block;font:500 14px var(--font-mono);color:var(--muted);margin-bottom:8px}
.problem .fix::before{content:"→ Start now, not later";color:var(--ink)}
@media (max-width:720px){.problem .wrap{grid-template-columns:1fr;gap:20px}}

/* benefits */
.head{display:flex;flex-direction:column;gap:12px;max-width:640px;margin-bottom:40px}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.benefit{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:10px}
.benefit .k{font:500 13px var(--font-mono);color:var(--muted)}
.benefit p{color:var(--muted)}
@media (max-width:820px){.benefits{grid-template-columns:1fr}}

/* how to use */
.how{background:var(--surface);border-block:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--ink);padding-top:16px}
.steps li::before{content:"Step " counter(s);font:500 12px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.steps p{color:var(--muted);font-size:15px}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* shop */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.offer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:14px;position:relative}
.offer.pick{border:2px solid var(--moss);box-shadow:0 18px 40px -24px rgba(39,54,31,.5)}
.offer .tag{position:absolute;top:-12px;left:24px;background:var(--moss);color:var(--moss-ink);font:500 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.offer .amt{font-family:var(--font-display);font-size:40px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.offer .amt small{font:500 14px var(--font-body);color:var(--muted);letter-spacing:0;margin-left:6px}
.offer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:15px;flex:1}
.offer li::before{content:"+ ";color:var(--ink);font-weight:700}
.guarantee{margin-top:24px;font-size:14px;color:var(--muted);text-align:center}
.secure{margin-top:8px;font-size:13px;color:var(--muted);text-align:center}
@media (max-width:900px){.offers{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* free guide sign-up */
.lead-magnet{background:var(--surface);border-block:1px solid var(--line)}
.lm{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.lm-copy{display:flex;flex-direction:column;gap:12px}
.lm-copy p:not(.eyebrow){color:var(--muted);max-width:48ch}
.lm-form{display:flex;flex-direction:column;gap:8px;min-width:0}
.lm-form label{font-weight:600;font-size:14px}
.lm-row{display:flex;gap:8px;flex-wrap:wrap}
.lm-row input{flex:1 1 220px;min-width:0;padding:15px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:16px var(--font-body)}
.lm-row input:focus{outline:none;border-color:var(--moss)}
.lm-form small{color:var(--muted);font-size:12px}
@media (max-width:820px){.lm{grid-template-columns:1fr;gap:24px}}

/* ingredients */
.ingr{background:var(--moss);color:var(--moss-ink)}
.ingr .eyebrow{color:var(--sage)}
.ingr .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ingr dl{margin:0}
.ingr dl div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding-block:16px;border-bottom:1px solid rgba(255,255,255,.12)}
.ingr dt{font-family:var(--font-display);font-weight:700;font-size:18px}
.ingr dd{margin:0;opacity:.8;font-size:15px}
.free{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.free span{font:500 12px var(--font-mono);border:1px solid rgba(255,255,255,.22);padding:5px 10px;border-radius:6px}
@media (max-width:820px){.ingr .grid{grid-template-columns:1fr}.ingr dl div{grid-template-columns:1fr;gap:4px}}

/* faq */
.faq{max-width:760px}
details{border-bottom:1px solid var(--line);padding-block:18px}
summary{font-family:var(--font-display);font-weight:700;font-size:19px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-mono);color:var(--muted)}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin-top:10px;max-width:62ch}

/* footer */
footer{border-top:1px solid var(--line);padding-block:40px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer nav,footer .flinks{all:unset;display:flex;flex-wrap:wrap;gap:16px}
footer .flinks a{text-decoration:none}footer .flinks a:hover{text-decoration:underline}
footer .fine{flex-basis:100%;font-size:12px}

/* policy + thank-you pages */
.doc{max-width:720px;margin:0 auto;padding-block:56px}
.doc h1{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.doc h2{font-size:26px;margin-top:48px;margin-bottom:12px;scroll-margin-top:80px}
.doc p,.doc li{color:var(--muted);margin-bottom:12px}
.doc .updated{font:500 13px var(--font-mono);color:var(--muted)}
.center{text-align:center}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;z-index:30;max-width:calc(100% - 32px);text-align:center}