:root {
  --ink:#172923;
  --green:#183c32;
  --green2:#28594a;
  --cream:#f6f4ed;
  --orange:#bd704b;
  --muted:#69746d;
  --line:#dce1d8;
  --white:#fff
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  color:var(--ink);
  font-family:Arial,sans-serif;
  line-height:1.6
}
a {
  color:inherit
}
.skip-link {
  position:absolute;
  left:-9999px;
  top:0
}
.skip-link:focus {
  left:1rem;
  z-index:10;
  background:white;
  padding:.7rem
}
.notice {
  text-align:center;
  background:var(--green);
  color:white;
  font-size:.78rem;
  padding:.42rem 1rem
}
.site-header {
  height:76px;
  max-width:1180px;
  margin:auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand {
  text-decoration:none;
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:-.06em
}
.brand span {
  color:var(--orange)
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:.9rem
}
.site-header nav a,.footer nav a {
  text-decoration:none
}
.nav-cta {
  background:var(--green);
  color:white;
  padding:10px 18px;
  border-radius:3px
}
.hero {
  max-width:1180px;
  margin:0 auto;
  padding:55px 28px 75px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:30px;
  min-height:580px
}
.eyebrow {
  text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.16em;
  margin:0 0 14px
}
.hero h1,h2 {
  font-family:Georgia,serif;
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.035em
}
.hero h1 {
  font-size:clamp(2.7rem,5.2vw,4.5rem);
  max-width:660px;
  margin:0 0 20px
}
.lead {
  color:#4d5c54;
  font-size:1.08rem;
  max-width:570px
}
.checks {
  list-style:none;
  padding:0;
  margin:24px 0;
  color:#384a40
}
.checks li {
  margin:8px 0
}
.checks li:before {
  content:"✓";
  color:var(--green2);
  font-weight:700;
  margin-right:10px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:15px 22px;
  background:#b66c47;
  color:white;
  text-decoration:none;
  font-weight:700;
  border:0;
  border-radius:3px;
  transition:background .2s,transform .2s
}
.button:hover {
  background:#975436;
  transform:translateY(-1px)
}
.button[aria-disabled="true"] {
  opacity:.58;
  cursor:not-allowed
}
.small {
  font-size:.76rem;
  color:var(--muted)
}
.hero-art {
  height:440px;
  position:relative;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at center,#e6e9dd 0,#f6f4ed 66%,transparent 67%);
  overflow:hidden
}
.orbit {
  position:absolute;
  border:1px solid rgba(24,60,50,.14);
  border-radius:50%;
  width:360px;
  height:360px
}
.orbit-two {
  width:440px;
  height:440px
}
.bottle {
  position:relative;
  z-index:2;
  width:174px;
  height:300px;
  border-radius:19px 19px 28px 28px;
  background:linear-gradient(90deg,#e9ede1,#fff 25%,#f2f2e8 85%,#d8dfd0);
  box-shadow:18px 25px 32px #344b3433;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid #d5d8cc;
  transform:rotate(-4deg)
}
.bottle:before {
  content:"";
  position:absolute;
  top:-33px;
  width:90px;
  height:43px;
  background:linear-gradient(90deg,#213d32,#456b56,#213d32);
  border-radius:8px 8px 2px 2px
}
.bottle:after {
  content:"";
  position:absolute;
  top:14px;
  width:100%;
  height:5px;
  background:#d5d8cc
}
.bottle span {
  font:1.75rem/1.05 Georgia,serif;
  color:var(--green);
  margin-top:28px
}
.bottle b {
  color:var(--orange)
}
.bottle small {
  font-size:.48rem;
  letter-spacing:.11em;
  margin:20px 0
}
.bottle i {
  font-size:.45rem;
  letter-spacing:.14em;
  font-style:normal;
  color:#58655b
}
.leaf {
  position:absolute;
  width:105px;
  height:44px;
  background:linear-gradient(135deg,#718965,#b3bb8b);
  border-radius:100% 0 100% 0;
  z-index:1;
  transform:rotate(-30deg)
}
.leaf-a {
  left:14%;
  bottom:23%
}
.leaf-b {
  right:13%;
  top:24%;
  transform:rotate(145deg);
  background:linear-gradient(135deg,#9d9761,#d7cb8b)
}
.hero-note {
  position:absolute;
  right:4%;
  bottom:8%;
  font-family:Georgia,serif;
  font-size:1.05rem;
  color:#5a695e;
  transform:rotate(-8deg)
}
.trust-strip {
  display:flex;
  justify-content:center;
  gap:clamp(24px,8vw,110px);
  padding:20px;
  background:#edf0e8;
  color:var(--green);
  font-weight:600;
  font-size:.85rem
}
.section {
  max-width:1120px;
  margin:0 auto;
  padding:100px 28px
}
.intro {
  text-align:center
}
.section h2,.guarantee h2 {
  font-size:clamp(2.15rem,4vw,3.3rem);
  margin:0 0 20px
}
.section-lead {
  max-width:680px;
  color:var(--muted);
  margin:0 auto 42px
}
.benefit-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  text-align:left;
  margin-top:55px
}
.benefit-grid article {
  padding:27px 25px;
  background:var(--cream);
  min-height:205px
}
.benefit-grid h3,.ingredient-list h3 {
  font-family:Georgia,serif;
  font-size:1.3rem;
  margin:16px 0 8px
}
.benefit-grid p,.ingredient-list p {
  margin:0;
  color:var(--muted);
  font-size:.92rem
}
.icon {
  font-size:.75rem;
  color:var(--orange);
  letter-spacing:.15em
}
.ingredients {
  max-width:none;
  background:#f0f1e9;
  padding-left:max(28px,calc((100vw - 1064px)/2));
  padding-right:max(28px,calc((100vw - 1064px)/2))
}
.ingredient-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:35px
}
.ingredient-head>p {
  max-width:390px;
  color:var(--muted);
  font-size:.9rem
}
.ingredient-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:70px
}
.ingredient-list article {
  display:flex;
  gap:18px;
  padding:21px 0;
  border-top:1px solid #d3d9ce
}
.ingredient-list article>span {
  font-size:.75rem;
  color:var(--orange);
  padding-top:20px
}
.ingredient-list h3 {
  margin:0 0 4px
}
.routine {
  display:grid;
  grid-template-columns:1fr .7fr;
  gap:70px;
  align-items:center
}
.routine-card {
  padding:50px;
  background:var(--green);
  color:white
}
.routine-card .eyebrow {
  color:#d6a481
}
.routine-card h2 {
  font:500 clamp(2rem,3.5vw,3rem)/1.13 Georgia,serif;
  letter-spacing:-.03em;
  margin:0 0 20px
}
.routine-card p:not(.eyebrow) {
  color:#d9e0db
}
.text-link {
  display:inline-block;
  margin-top:18px;
  color:#f0c29f;
  text-decoration:none;
  font-weight:700
}
.routine-side {
  text-align:center;
  font-family:Georgia,serif;
  font-size:1.35rem;
  color:var(--green2)
}
.round-mark {
  width:140px;
  height:140px;
  border:1px solid #bd704b;
  border-radius:50%;
  margin:auto auto 20px;
  display:grid;
  place-items:center;
  font-size:2.4rem;
  color:var(--orange)
}
.disclosure {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:60px;
  padding-top:48px;
  padding-bottom:48px
}
.disclosure h2 {
  font-size:2rem;
  margin:0
}
.disclosure>p {
  margin:0;
  color:var(--muted);
  font-size:.95rem
}
.offers {
  text-align:center
}
.offer-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  text-align:left;
  margin:0 auto 20px;
  max-width:1000px
}
.offer {
  position:relative;
  border:1px solid var(--line);
  padding:32px 27px;
  background:white
}
.offer.featured {
  border:2px solid var(--green);
  background:#f7f8f3
}
.popular {
  position:absolute;
  right:0;
  top:0;
  background:var(--green);
  color:white;
  padding:6px 12px;
  text-transform:uppercase;
  font-size:.62rem;
  letter-spacing:.1em
}
.offer-label {
  text-transform:uppercase;
  color:var(--orange);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.15em
}
.offer h3 {
  font:600 1.45rem Georgia,serif;
  margin:9px 0 0
}
.offer-meta {
  font-size:.78rem;
  color:var(--muted)
}
.price {
  font:600 2.65rem Georgia,serif;
  margin:18px 0 0;
  color:var(--green)
}
.price span {
  font-size:1.25rem;
  vertical-align:top
}
.offer .button {
  width:100%;
  margin-top:14px
}
.button-outline {
  background:transparent;
  color:var(--green);
  border:1px solid var(--green)
}
.button-outline:hover {
  background:var(--green);
  color:white
}
.center {
  text-align:center
}
.guarantee {
  background:var(--cream);
  padding:55px max(28px,calc((100vw - 1020px)/2));
  display:flex;
  align-items:center;
  gap:36px
}
.guarantee h2 {
  font-size:2.3rem;
  margin-bottom:10px
}
.guarantee p:last-child {
  color:var(--muted);
  max-width:720px;
  margin:0
}
.seal {
  flex:0 0 108px;
  height:108px;
  border:2px solid #bd704b;
  border-radius:50%;
  display:grid;
  align-content:center;
  text-align:center;
  color:var(--orange);
  font:600 2rem Georgia,serif;
  line-height:1
}
.seal small {
  font:700 .55rem Arial,sans-serif;
  letter-spacing:.12em
}
.faq {
  max-width:850px
}
.faq h2 {
  margin-bottom:34px
}
.faq details {
  border-top:1px solid var(--line);
  padding:19px 0
}
.faq details:last-child {
  border-bottom:1px solid var(--line)
}
.faq summary {
  cursor:pointer;
  list-style:none;
  font-weight:700;
  padding-right:32px;
  position:relative
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary:after {
  content:"+";
  position:absolute;
  right:4px;
  color:var(--orange);
  font-size:1.2rem
}
.faq details[open] summary:after {
  content:"−"
}
.faq details p {
  color:var(--muted);
  font-size:.92rem;
  margin:12px 30px 2px 0
}
.footer {
  background:#152b24;
  color:#dbe3dd;
  text-align:center;
  padding:50px 20px 30px
}
.footer .brand {
  color:white
}
.footer p {
  font-size:.8rem;
  color:#b9c5bd;
  margin:10px auto 18px;
  max-width:580px
}
.footer nav {
  display:flex;
  justify-content:center;
  gap:24px;
  font-size:.8rem;
  margin:22px 0
}
.footer nav a:hover {
  text-decoration:underline
}
.footer small {
  font-size:.7rem;
  color:#9caea3
}
@media(max-width:760px) {
  .site-header {
    height:auto;
    min-height:68px;
    padding:12px 20px
  }
  .site-header nav {
    gap:12px;
    font-size:.78rem
  }
  .site-header nav a:not(.nav-cta) {
    display:none
  }
  .hero {
    grid-template-columns:1fr;
    padding:54px 22px 36px;
    gap:5px
  }
  .hero h1 {
    font-size:3rem
  }
  .hero-art {
    height:350px
  }
  .trust-strip {
    gap:10px;
    justify-content:space-around;
    text-align:center;
    font-size:.7rem;
    padding:16px 10px
  }
  .section {
    padding:72px 22px
  }
  .benefit-grid,.offer-grid {
    grid-template-columns:1fr
  }
  .benefit-grid article {
    min-height:0
  }
  .ingredient-head {
    display:block
  }
  .ingredient-head>p {
    margin-top:15px
  }
  .ingredient-list {
    grid-template-columns:1fr
  }
  .routine {
    grid-template-columns:1fr;
    gap:40px
  }
  .routine-card {
    padding:34px 26px
  }
  .routine-side {
    font-size:1.1rem
  }
  .disclosure {
    grid-template-columns:1fr;
    gap:18px
  }
  .disclosure h2 {
    font-size:1.8rem
  }
  .offer {
    padding:28px 24px
  }
  .guarantee {
    padding:45px 22px;
    align-items:flex-start;
    gap:20px
  }
  .guarantee h2 {
    font-size:1.9rem
  }
  .seal {
    flex-basis:78px;
    height:78px;
    font-size:1.5rem
  }
  .footer nav {
    gap:14px;
    flex-wrap:wrap
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important
  }
}