/* Body Balance — nutrition-focused, responsive, buildless website. */
:root {
  --green:#164d34;
  --deep:#123c2b;
  --lime:#dcf3a6;
  --ink:#1e3026;
  --muted:#647166;
  --line:#e2e8df;
  --soft:#f5f8f0;
  --ease:cubic-bezier(.22,1,.36,1)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:36px
}

body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

::selection {
  background:var(--lime);
  color:var(--deep)
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

a,button,summary {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #72a13c;
  outline-offset:5px
}

p,h1,h2,h3 {
  margin:0
}

h1,h2,h3 {
  font-weight:700
}

svg {
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

img {
  display:block;
  max-width:100%
}

.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.section-shell {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto
}

.section-space {
  padding-block:96px
}

.eyebrow {
  font-size:12px;
  line-height:1.6;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--green)
}

.announcement {
  background:var(--green);
  color:#fff;
  padding:9px 24px;
  text-align:center;
  font-size:12px;
  font-weight:500;
  letter-spacing:.025em
}

.announcement span {
  padding-left:20px;
  margin-left:20px;
  border-left:1px solid #ffffff50;
  color:#d2e7c5
}

.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  height:116px;
  width:min(1392px,100%);
  padding-inline:56px;
  margin:auto;
  position:relative;
  z-index:20
}

.wordmark {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  line-height:.97;
  letter-spacing:-.055em;
  font-weight:800;
  color:var(--green)
}

.brand-logo {
  display:block;
  width:158px;
  height:auto;
  flex-shrink:0
}

.site-footer .brand-logo {
  width:200px
}

.desktop-nav {
  display:flex;
  gap:29px
}

.desktop-nav a {
  font-size:14px;
  font-weight:500
}

.desktop-nav a:hover {
  color:#4c852d
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  min-height:56px;
  padding:16px 26px;
  font-size:15px;
  line-height:1.4;
  border-radius:8px;
  font-weight:600;
  transition:transform .25s var(--ease),background .25s
}

.button:hover {
  transform:translateY(-3px)
}

.header-button {
  border:1px solid var(--line);
  font-size:13px;
  padding:12px 18px;
  min-height:46px;
  gap:18px
}

.header-button span {
  font-size:19px
}

.button-green {
  background:var(--green);
  color:#fff
}

.button-green:hover {
  background:#246743
}

.button-lime {
  background:var(--lime);
  color:var(--deep)
}

.menu-toggle,.mobile-nav {
  display:none
}

.hero {
  display:grid;
  grid-template-columns:1.03fr 1fr;
  gap:58px;
  align-items:center;
  padding-block:35px 61px
}

.hero-copy {
  padding-block:20px
}

.hero-copy .eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:21px
}

.small-dot {
  display:inline-block;
  flex-shrink:0;
  width:7px;
  height:7px;
  background:#6f9c39;
  border-radius:50%
}

h1 {
  font-size:clamp(54px,5.4vw,78px);
  line-height:1.055;
  letter-spacing:-.065em
}

h1>span {
  color:#59933f
}

.product-name {
  font-size:13px;
  font-weight:700;
  letter-spacing:.075em;
  color:var(--green);
  margin:28px 0 12px
}

.hero-description {
  font-size:18px;
  color:var(--muted);
  max-width:440px;
  line-height:1.7
}

.hero-tags {
  display:flex;
  gap:23px;
  margin:23px 0 29px
}

.hero-tags span {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:13px;
  font-weight:500
}

.hero-tags svg {
  width:19px;
  height:19px;
  color:var(--green)
}

.serving-note {
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  margin-top:17px;
  max-width:390px
}

.product-gallery {
  background:var(--soft);
  border-radius:26px;
  height:583px;
  position:relative;
  padding:24px;
  display:flex;
  flex-direction:column;
  min-width:0;
  isolation:isolate
}

.gallery-top {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.09em;
  font-weight:600;
  color:#67785f;
  position:relative;
  z-index:3
}

.product-photo {
  flex:1;
  min-height:0;
  overflow:hidden;
  position:relative;
  mix-blend-mode:normal
}

.product-photo img {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:contain;
  object-position:center;
  transform:scale(1.2);
  transition:opacity .2s
}

.product-photo img[data-view="back"] {
  transform:scale(1.2)
}

.product-photo.is-changing img {
  opacity:0
}

.dose-badge {
  position:absolute;
  right:20px;
  top:62px;
  width:102px;
  height:102px;
  background:var(--lime);
  color:var(--deep);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transform:rotate(10deg);
  box-shadow:0 5px 15px #164d3408;
  z-index:4
}

.dose-badge strong {
  font-size:29px;
  line-height:1.1;
  letter-spacing:-.065em
}

.dose-badge strong span {
  font-size:14px;
  margin-left:2px
}

.dose-badge>span {
  font-size:8px;
  line-height:1.45;
  text-align:center;
  font-weight:700;
  letter-spacing:.04em;
  margin-top:5px
}

.flavour-badge {
  position:absolute;
  left:25px;
  bottom:82px;
  display:grid;
  grid-template-columns:8px auto;
  column-gap:9px;
  align-items:center;
  font-size:14px;
  font-weight:600;
  border:1px solid #e0e6d5;
  background:#ffffffeb;
  padding:12px 17px;
  border-radius:9px;
  z-index:4
}

.flavour-badge>span:last-child {
  grid-column:2;
  font-size:11px;
  color:var(--muted);
  font-weight:400
}

.gallery-bottom {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  padding-top:15px;
  border-top:1px solid #dce4d3;
  z-index:3
}

.gallery-bottom p {
  font-size:12px;
  color:#63725c
}

.view-controls {
  display:flex;
  gap:4px;
  padding:3px;
  border:1px solid #d9e2d0;
  border-radius:30px
}

.view-button {
  border:0;
  border-radius:24px;
  min-height:32px;
  padding:4px 12px;
  font-size:11px;
  background:transparent
}

.view-button.is-active {
  background:var(--green);
  color:#fff
}

.fact-strip {
  background:var(--soft);
  border-block:1px solid #eaf0e2;
  padding-block:22px
}

.fact-strip>.section-shell {
  display:flex;
  justify-content:space-between;
  gap:20px
}

.fact-strip span {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:14px;
  font-weight:500;
  color:var(--green)
}

.fact-strip svg {
  width:22px;
  height:22px
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:60px;
  margin-bottom:39px
}

.section-heading .eyebrow,.center-heading .eyebrow {
  margin-bottom:15px
}

h2 {
  font-size:clamp(36px,3.25vw,48px);
  letter-spacing:-.045em;
  line-height:1.13
}

.heading-copy {
  color:var(--muted);
  font-size:16px;
  max-width:315px;
  padding-bottom:5px;
  line-height:1.75
}

.benefit-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}

.benefit-card {
  position:relative;
  border:1px solid var(--line);
  border-radius:16px;
  padding:29px 28px 24px;
  overflow:hidden
}

.benefit-icon {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  background:#edf5df;
  border-radius:13px;
  color:var(--green);
  margin-bottom:26px
}

.benefit-icon svg {
  width:27px;
  height:27px
}

.card-number {
  position:absolute;
  top:34px;
  right:28px;
  color:#7e9072;
  font-size:13px
}

.benefit-card h3 {
  font-size:22px;
  letter-spacing:-.035em;
  margin-bottom:10px
}

.benefit-card p {
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
  max-width:290px
}

.energy-graphic {
  height:62px;
  display:flex;
  gap:8px;
  align-items:flex-end;
  margin-top:26px
}

.energy-graphic i {
  flex:1;
  background:#e2edce;
  height:22%;
  border-radius:5px 5px 0 0
}

.energy-graphic i:nth-child(2) {
  height:35%
}

.energy-graphic i:nth-child(3) {
  height:48%
}

.energy-graphic i:nth-child(4) {
  height:61%
}

.energy-graphic i:nth-child(5) {
  height:74%;
  background:#bcda92
}

.energy-graphic i:nth-child(6) {
  height:87%;
  background:#82af5b
}

.energy-graphic i:nth-child(7) {
  height:100%;
  background:#397243
}

.stamina-graphic {
  height:62px;
  display:flex;
  align-items:center;
  margin-top:26px
}

.stamina-graphic span {
  display:block;
  width:68px;
  height:52px;
  border:8px solid #d4e4bd;
  border-radius:50%;
  transform:skew(-18deg);
  margin-left:-9px
}

.stamina-graphic span:first-child {
  margin-left:8px;
  border-color:#397243
}

.stamina-graphic span:nth-child(2) {
  border-color:#89b05e
}

.wellness-graphic {
  height:62px;
  margin-top:26px;
  display:flex;
  align-items:center;
  gap:16px;
  color:#477443
}

.wellness-graphic svg {
  width:49px;
  height:49px;
  stroke-width:1.1
}

.wellness-graphic span {
  font-size:11px;
  letter-spacing:.1em;
  line-height:1.6;
  font-weight:600
}

.serving-section {
  background:#f4f8ef
}

.center-heading {
  text-align:center
}

.center-heading>p:last-child {
  margin-top:18px;
  font-size:17px;
  line-height:1.75;
  color:var(--muted)
}

.serving-equation {
  max-width:890px;
  margin:24px auto 35px;
  display:grid;
  grid-template-columns:1fr 100px 1fr;
  align-items:center;
  text-align:center
}

.ingredient-art {
  background-image:url('assets/nutrition-graphics.png');
  background-size:300% 300%;
  background-repeat:no-repeat;
  aspect-ratio:1;
  mix-blend-mode:multiply
}

.art-gummies {
  background-position:0 0
}

.art-resin {
  background-position:50% 0
}

.art-mango {
  background-position:100% 0
}

.art-ashwagandha {
  background-position:0 50%
}

.art-gokshura {
  background-position:50% 50%
}

.art-musli {
  background-position:100% 50%
}

.art-ginger {
  background-position:0 100%
}

.art-kaunch {
  background-position:50% 100%
}

.art-akarkara {
  background-position:100% 100%
}

.equation-item .ingredient-art {
  max-width:295px;
  margin:auto
}

.equation-item h3 {
  font-size:25px;
  letter-spacing:-.04em;
  font-weight:600
}

.equation-item h3 strong {
  font-size:44px;
  letter-spacing:-.065em;
  margin-right:3px
}

.equation-item>p {
  font-size:16px;
  color:var(--muted);
  margin-top:3px
}

.equals {
  font-size:62px;
  font-weight:600;
  color:#7b9765;
  padding-bottom:62px
}

.serving-bottom {
  display:flex;
  justify-content:center;
  gap:45px;
  border-top:1px solid #dce6d3;
  padding-top:28px
}

.serving-bottom p {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  color:var(--green);
  font-weight:500
}

.serving-bottom svg {
  width:20px;
  height:20px
}

.visual-note {
  text-align:center;
  color:#6d7b61;
  font-size:12px;
  margin-top:25px
}

.formula-layout {
  display:grid;
  grid-template-columns:.85fr 2fr;
  gap:22px
}

.core-ingredient {
  border-radius:18px;
  background:#eaf1df;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  min-width:0
}

.core-label {
  font-size:10px;
  letter-spacing:.1em;
  font-weight:700;
  color:#5f7650
}

.core-ingredient h3 {
  font-size:28px;
  line-height:1.2;
  letter-spacing:-.04em;
  margin-top:13px
}

.core-ingredient>div>p {
  font-size:13px;
  color:#627554;
  margin-top:8px
}

.core-ingredient .ingredient-art {
  width:100%;
  margin-block:20px
}

.core-dose {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border-top:1px solid #ccd9bb;
  padding-top:22px
}

.core-dose strong {
  font-size:45px;
  letter-spacing:-.065em;
  line-height:1.2
}

.core-dose strong span {
  font-size:22px
}

.core-dose>span {
  font-size:10px;
  color:#5c714e;
  letter-spacing:.035em;
  font-weight:600;
  line-height:1.5
}

.botanical-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.botanical {
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px 18px 19px;
  min-width:0;
  transition:border-color .3s,transform .3s
}

.botanical:hover {
  border-color:#94b86f;
  transform:translateY(-4px)
}

.botanical .ingredient-art {
  width:100%;
  max-width:177px;
  margin:0 auto 9px
}

.botanical-title {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:5px
}

.botanical-title h3 {
  font-size:16px;
  letter-spacing:-.035em
}

.botanical-title>span {
  font-size:12px;
  color:var(--green);
  font-weight:600;
  white-space:nowrap
}

.botanical>p {
  font-size:12px;
  margin-top:3px;
  color:var(--muted)
}

.formula-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:25px
}

.formula-foot>p {
  font-size:12px;
  color:var(--muted);
  max-width:660px
}

.text-link {
  display:inline-flex;
  gap:17px;
  font-size:14px;
  font-weight:600;
  color:var(--green);
  border-bottom:1px solid #8da47b;
  padding-bottom:4px;
  flex-shrink:0
}

.flavour-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#f0f5d9;
  border-radius:24px;
  overflow:hidden
}

.flavour-image {
  position:relative;
  padding:30px 35px;
  display:grid;
  align-items:center
}

.flavour-image .ingredient-art {
  width:100%;
  max-width:440px;
  margin:auto
}

.flavour-stamp {
  position:absolute;
  left:34px;
  bottom:34px;
  font-size:11px;
  line-height:1.6;
  letter-spacing:.09em;
  transform:rotate(-7deg);
  background:var(--lime);
  color:var(--deep);
  padding:12px 21px;
  border:1px solid #bcd48c;
  border-radius:10px
}

.flavour-stamp strong {
  font-size:14px;
  letter-spacing:0
}

.flavour-copy {
  padding:65px 55px 65px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.flavour-copy h2 {
  margin-top:16px
}

.flavour-copy>p:not(.eyebrow):not(.small-note) {
  font-size:17px;
  color:#5d6d50;
  margin-top:20px;
  max-width:425px
}

.flavour-facts {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:27px
}

.flavour-facts>span {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:500;
  color:var(--green)
}

.flavour-facts svg {
  width:19px;
  height:19px
}

.small-note {
  font-size:12px;
  color:#66765b;
  margin-top:15px
}

.ritual-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  margin-top:48px
}

.ritual-steps article {
  position:relative
}

.step-number {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  background:var(--soft);
  border:1px solid #dce8cf;
  border-radius:50%;
  color:var(--green);
  font-size:15px;
  font-weight:700;
  margin-bottom:22px
}

.ritual-steps article:not(:last-child)::after {
  content:'';
  position:absolute;
  height:1px;
  background:#e1e8d9;
  top:23px;
  left:66px;
  width:calc(100% - 40px)
}

.ritual-steps h3 {
  font-size:21px;
  letter-spacing:-.025em;
  margin-bottom:12px
}

.ritual-steps p {
  color:var(--muted);
  font-size:16px;
  line-height:1.8
}

.faq-section {
  background:#f8faf5
}

.questions {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px
}

.questions-intro h2 {
  margin-top:16px
}

.questions-intro>p:not(.eyebrow) {
  font-size:17px;
  color:var(--muted);
  margin:23px 0 25px;
  max-width:330px
}

.faq-list {
  border-top:1px solid #dbe4d2
}

.faq-list details {
  border-bottom:1px solid #dbe4d2
}

.faq-list summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:23px 0;
  cursor:pointer;
  font-size:16px;
  line-height:1.55;
  font-weight:500
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.plus {
  width:17px;
  height:17px;
  position:relative;
  flex-shrink:0
}

.plus::before,.plus::after {
  content:'';
  position:absolute;
  width:13px;
  height:1.5px;
  background:var(--green);
  top:8px;
  left:2px;
  transition:transform .25s
}

.plus::after {
  transform:rotate(90deg)
}

details[open] .plus::after {
  transform:rotate(0)
}

.faq-content {
  padding:0 27px 25px 0;
  font-size:15px;
  line-height:1.8;
  color:var(--muted)
}

.faq-content p+p {
  margin-top:15px
}

.closing {
  margin-block:64px;
  background:var(--green);
  color:white;
  border-radius:22px;
  padding:49px 55px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.closing .eyebrow {
  color:#c6dea8;
  font-size:11px
}

.closing h2 {
  margin-top:14px;
  font-size:42px
}

.closing .button {
  flex-shrink:0
}

.site-footer {
  padding-bottom:30px
}

.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-bottom:34px
}

.footer-top>p {
  color:var(--muted);
  font-size:15px
}

.footer-top>a:last-child {
  font-size:14px;
  font-weight:500
}

.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:23px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:15px;
  font-size:12px;
  color:var(--muted)
}

.footer-disclaimer {
  font-size:12px;
  color:#70816d;
  margin-top:21px;
  max-width:1080px;
  line-height:1.75
}

.skip-link {
  position:fixed;
  top:12px;
  left:16px;
  z-index:100;
  padding:10px 20px;
  background:var(--green);
  color:#fff;
  transform:translateY(-180%)
}

.skip-link:focus {
  transform:translateY(0)
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}

.reveal {
  opacity:1;
  transform:none
}

.motion-ready .reveal {
  transition:opacity .7s var(--ease),transform .8s var(--ease)
}

.motion-ready .reveal:not(.is-visible) {
  opacity:0;
  transform:translateY(20px)
}

@media(min-width:1500px) {
  .hero {
    gap:80px;
    padding-top:40px
  }
  .product-gallery {
    height:620px
  }
}

@media(max-width:1150px) {
  .section-shell {
    width:calc(100% - 72px)
  }
  .site-header {
    padding-inline:36px;
    gap:20px
  }
  .desktop-nav {
    gap:18px
  }
  .desktop-nav a {
    font-size:12px
  }
  .header-button {
    font-size:12px;
    gap:14px
  }
  .hero {
    gap:35px
  }
  .hero-description {
    font-size:17px
  }
  .product-gallery {
    height:545px;
    padding:20px
  }
  .dose-badge {
    width:90px;
    height:90px;
    right:12px
  }
  .hero-tags {
    gap:15px
  }
  .hero-tags span {
    font-size:12px
  }
  .fact-strip span {
    font-size:12px
  }
  .section-space {
    padding-block:78px
  }
  .benefit-card {
    padding:24px 22px
  }
  .benefit-card h3 {
    font-size:20px
  }
  .formula-layout {
    grid-template-columns:.85fr 2fr;
    gap:16px
  }
  .core-ingredient {
    padding:24px
  }
  .botanical-grid {
    gap:12px
  }
  .botanical {
    padding:13px
  }
  .botanical-title {
    display:block
  }
  .botanical-title h3 {
    font-size:15px
  }
  .botanical>p {
    font-size:11px
  }
  .core-dose {
    flex-wrap:wrap;
    gap:10px
  }
  .core-dose>span br {
    display:none
  }
  .core-dose>span {
    font-size:9px
  }
  .flavour-copy {
    padding:45px 35px 45px 15px
  }
  .questions {
    gap:60px
  }
  .ritual-steps {
    gap:40px
  }
}

@media(max-width:850px) {
  .site-header {
    height:110px
  }
  .desktop-nav {
    display:none
  }
  .header-button {
    margin-left:auto
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:34px;
    height:42px;
    padding:5px;
    border:0;
    background:none
  }
  .menu-toggle span {
    height:2px;
    width:24px;
    background:var(--green);
    transition:transform .25s
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform:translateY(4px) rotate(45deg)
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform:translateY(-4px) rotate(-45deg)
  }
  .mobile-nav:not([hidden]) {
    display:flex;
    position:absolute;
    left:0;
    right:0;
    top:109px;
    flex-direction:column;
    background:white;
    padding:12px 36px 24px;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 20px #164d3408
  }
  .mobile-nav a {
    font-size:16px;
    padding-block:13px;
    border-bottom:1px solid var(--line)
  }
  .hero {
    gap:25px;
    padding-top:22px;
    padding-bottom:45px
  }
  h1 {
    font-size:52px
  }
  .hero-copy .eyebrow {
    font-size:10px
  }
  .product-name {
    font-size:10px;
    margin-top:23px
  }
  .hero-description {
    font-size:16px
  }
  .hero-tags {
    flex-wrap:wrap;
    gap:9px;
    margin:20px 0
  }
  .button {
    font-size:13px;
    padding:15px 20px;
    gap:20px
  }
  .serving-note {
    font-size:11px
  }
  .product-gallery {
    height:505px;
    padding:17px
  }
  .gallery-top {
    font-size:8px
  }
  .dose-badge {
    top:48px;
    width:79px;
    height:79px
  }
  .dose-badge strong {
    font-size:25px
  }
  .dose-badge>span {
    font-size:6px
  }
  .flavour-badge {
    left:16px;
    bottom:87px;
    padding:9px 11px;
    font-size:12px
  }
  .flavour-badge>span:last-child {
    font-size:9px
  }
  .gallery-bottom p {
    font-size:10px
  }
  .view-button {
    padding-inline:8px;
    font-size:10px
  }
  .fact-strip>.section-shell {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
  }
  .fact-strip span {
    font-size:13px
  }
  .section-heading {
    gap:30px
  }
  .heading-copy {
    font-size:15px;
    max-width:230px
  }
  h2 {
    font-size:35px
  }
  .benefit-grid {
    gap:14px
  }
  .benefit-card {
    padding:23px 18px
  }
  .benefit-card h3 {
    font-size:19px;
    line-height:1.35
  }
  .benefit-card p {
    font-size:14px
  }
  .card-number {
    right:18px
  }
  .wellness-graphic {
    gap:9px
  }
  .wellness-graphic span {
    font-size:9px
  }
  .formula-layout {
    grid-template-columns:1fr
  }
  .core-ingredient {
    display:grid;
    grid-template-columns:1fr 170px;
    gap:15px;
    padding:25px
  }
  .core-ingredient .ingredient-art {
    grid-column:2;
    grid-row:1/3;
    margin:0
  }
  .core-dose {
    grid-column:1;
    border:0;
    padding:0;
    justify-content:flex-start;
    gap:20px
  }
  .core-dose strong {
    font-size:39px
  }
  .botanical-title {
    display:flex
  }
  .botanical {
    padding:16px
  }
  .botanical>p {
    font-size:12px
  }
  .formula-foot {
    align-items:flex-start
  }
  .flavour-copy {
    padding:38px 30px 38px 10px
  }
  .flavour-copy .eyebrow {
    font-size:10px
  }
  .flavour-copy>p:not(.eyebrow):not(.small-note) {
    font-size:15px
  }
  .flavour-image {
    padding:25px
  }
  .flavour-stamp {
    left:20px;
    bottom:25px;
    font-size:9px;
    padding:9px 14px
  }
  .flavour-stamp strong {
    font-size:12px
  }
  .flavour-facts {
    gap:10px
  }
  .flavour-facts>span {
    font-size:12px
  }
  .ritual-steps {
    gap:25px
  }
  .ritual-steps h3 {
    font-size:19px
  }
  .ritual-steps p {
    font-size:15px
  }
  .questions {
    gap:40px
  }
  .faq-list summary {
    font-size:15px
  }
  .questions-intro>p:not(.eyebrow) {
    font-size:16px
  }
  .closing {
    padding:36px
  }
  .closing h2 {
    font-size:36px
  }
  .footer-top>p {
    font-size:13px
  }
}

@media(max-width:600px) {
  .section-shell {
    width:calc(100% - 40px)
  }
  .announcement {
    font-size:10px;
    padding:8px 15px
  }
  .announcement span {
    display:none
  }
  .site-header {
    padding-inline:20px;
    height:96px;
    gap:18px
  }
  .wordmark {
    font-size:17px;
    gap:8px
  }
  .brand-logo {
    width:135px
  }
  .site-footer .brand-logo {
    width:170px
  }
  .header-button {
    display:none
  }
  .menu-toggle {
    margin-left:auto
  }
  .mobile-nav:not([hidden]) {
    top:95px;
    padding-inline:20px
  }
  .hero {
    grid-template-columns:1fr;
    gap:28px;
    padding-top:18px;
    padding-bottom:32px
  }
  .hero-copy {
    padding-block:8px 0
  }
  .hero-copy .eyebrow {
    font-size:10px;
    margin-bottom:17px
  }
  h1 {
    font-size:clamp(45px,11.8vw,66px);
    letter-spacing:-.058em
  }
  .product-name {
    font-size:10px;
    letter-spacing:.065em;
    margin-top:23px
  }
  .hero-description {
    font-size:17px;
    line-height:1.75;
    max-width:420px
  }
  .hero-tags {
    margin:20px 0 24px;
    gap:22px
  }
  .hero-tags span {
    font-size:13px
  }
  .button {
    min-height:54px;
    font-size:14px;
    gap:30px;
    padding:15px 22px
  }
  .serving-note {
    font-size:12px;
    max-width:340px;
    line-height:1.75;
    margin-top:15px
  }
  .product-gallery {
    height:480px;
    border-radius:20px;
    padding:20px
  }
  .gallery-top {
    font-size:8px
  }
  .dose-badge {
    top:54px;
    right:17px;
    width:88px;
    height:88px
  }
  .dose-badge strong {
    font-size:29px
  }
  .dose-badge>span {
    font-size:7px
  }
  .product-photo img {
    transform:scale(1.06)
  }
  .product-photo img[data-view="back"] {
    transform:scale(1.06)
  }
  .flavour-badge {
    bottom:81px;
    left:17px;
    font-size:13px
  }
  .flavour-badge>span:last-child {
    font-size:10px
  }
  .gallery-bottom p {
    font-size:11px
  }
  .view-button {
    font-size:11px;
    padding-inline:11px
  }
  .fact-strip {
    padding-block:20px
  }
  .fact-strip>.section-shell {
    gap:17px 12px
  }
  .fact-strip span {
    font-size:11px;
    gap:8px
  }
  .fact-strip svg {
    width:19px;
    height:19px
  }
  .section-space {
    padding-block:58px
  }
  .eyebrow {
    font-size:10px
  }
  h2 {
    font-size:34px;
    line-height:1.16;
    letter-spacing:-.044em
  }
  .section-heading {
    display:block;
    margin-bottom:28px
  }
  .section-heading .eyebrow {
    margin-bottom:12px
  }
  .heading-copy {
    max-width:350px;
    font-size:16px;
    margin-top:17px;
    padding:0
  }
  .benefit-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  .benefit-card {
    padding:24px;
    display:grid;
    grid-template-columns:1fr 90px;
    gap:0 15px
  }
  .benefit-icon {
    grid-column:1;
    margin-bottom:18px;
    width:43px;
    height:43px
  }
  .benefit-card h3 {
    grid-column:1/-1;
    font-size:23px;
    margin-bottom:9px
  }
  .benefit-card p {
    grid-column:1/-1;
    font-size:16px;
    max-width:100%;
    line-height:1.7
  }
  .card-number {
    right:24px;
    top:25px;
    font-size:12px
  }
  .energy-graphic,.stamina-graphic,.wellness-graphic {
    grid-column:2;
    grid-row:1;
    height:38px;
    margin:0;
    align-self:end;
    margin-bottom:18px
  }
  .energy-graphic {
    gap:4px
  }
  .stamina-graphic span {
    width:37px;
    height:30px;
    border-width:5px;
    margin-left:-6px
  }
  .wellness-graphic svg {
    width:35px;
    height:35px
  }
  .wellness-graphic span {
    display:none
  }
  .wellness-graphic {
    justify-content:flex-end
  }
  .center-heading .eyebrow {
    margin-bottom:13px
  }
  .center-heading>p:last-child {
    font-size:16px;
    line-height:1.7;
    margin-top:16px
  }
  .desktop-break {
    display:none
  }
  .serving-equation {
    grid-template-columns:1fr 32px 1fr;
    margin:22px auto 28px;
    gap:4px
  }
  .equals {
    font-size:35px;
    padding-bottom:68px
  }
  .equation-item .ingredient-art {
    width:100%
  }
  .equation-item h3 {
    font-size:16px;
    white-space:nowrap;
    letter-spacing:-.035em
  }
  .equation-item h3 strong {
    font-size:30px;
    margin-right:2px
  }
  .equation-item>p {
    font-size:12px;
    margin-top:5px;
    line-height:1.5
  }
  .serving-bottom {
    gap:13px;
    justify-content:flex-start;
    flex-wrap:wrap;
    padding-top:23px
  }
  .serving-bottom p {
    font-size:12px;
    gap:7px
  }
  .serving-bottom svg {
    width:18px;
    height:18px
  }
  .visual-note {
    font-size:11px;
    line-height:1.6;
    margin-top:21px;
    text-align:left
  }
  .formula-layout {
    gap:15px
  }
  .core-ingredient {
    grid-template-columns:1fr 120px;
    padding:21px;
    gap:15px
  }
  .core-label {
    font-size:9px
  }
  .core-ingredient h3 {
    font-size:24px;
    margin-top:10px
  }
  .core-ingredient>div>p {
    font-size:11px;
    margin-top:7px
  }
  .core-dose {
    gap:10px;
    flex-wrap:wrap
  }
  .core-dose strong {
    font-size:35px
  }
  .core-dose strong span {
    font-size:18px
  }
  .core-dose>span {
    font-size:8px
  }
  .botanical-grid {
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .botanical {
    padding:13px 13px 17px;
    border-radius:12px
  }
  .botanical-title {
    display:block
  }
  .botanical-title h3 {
    font-size:16px;
    line-height:1.4
  }
  .botanical-title>span {
    font-size:13px;
    display:block;
    margin-top:4px
  }
  .botanical>p {
    font-size:10px;
    line-height:1.6
  }
  .botanical .ingredient-art {
    margin-bottom:10px
  }
  .formula-foot {
    display:block;
    margin-top:21px
  }
  .formula-foot>p {
    font-size:12px;
    line-height:1.7
  }
  .formula-foot .text-link {
    margin-top:16px;
    font-size:14px
  }
  .flavour-section {
    grid-template-columns:1fr;
    border-radius:20px
  }
  .flavour-image {
    padding:20px 35px 0
  }
  .flavour-image .ingredient-art {
    max-width:290px
  }
  .flavour-stamp {
    bottom:9px;
    left:20px
  }
  .flavour-copy {
    padding:32px 25px 34px
  }
  .flavour-copy h2 {
    margin-top:14px
  }
  .flavour-copy>p:not(.eyebrow):not(.small-note) {
    font-size:16px;
    margin-top:18px
  }
  .flavour-facts {
    gap:12px;
    margin-top:22px
  }
  .flavour-facts>span {
    font-size:12px
  }
  .small-note {
    font-size:11px;
    margin-top:17px
  }
  .ritual-steps {
    grid-template-columns:1fr;
    gap:27px;
    margin-top:31px
  }
  .ritual-steps article {
    display:grid;
    grid-template-columns:44px 1fr;
    gap:0 18px
  }
  .step-number {
    grid-column:1;
    grid-row:1/3;
    width:40px;
    height:40px;
    font-size:13px;
    margin:0
  }
  .ritual-steps article:not(:last-child)::after {
    display:none
  }
  .ritual-steps h3 {
    grid-column:2;
    font-size:21px;
    margin-bottom:8px
  }
  .ritual-steps p {
    grid-column:2;
    font-size:16px;
    line-height:1.75
  }
  .questions {
    grid-template-columns:1fr;
    gap:30px
  }
  .questions-intro>p:not(.eyebrow) {
    font-size:16px;
    margin:19px 0 22px;
    max-width:none
  }
  .faq-list summary {
    font-size:16px;
    padding-block:21px;
    gap:18px
  }
  .faq-content {
    font-size:15px;
    padding:0 16px 22px 0
  }
  .closing {
    margin-block:40px;
    display:block;
    padding:29px 25px;
    border-radius:18px
  }
  .closing .eyebrow {
    font-size:9px;
    max-width:230px
  }
  .closing h2 {
    font-size:34px;
    margin-top:15px
  }
  .closing .button {
    margin-top:25px
  }
  .footer-top {
    flex-wrap:wrap;
    gap:21px;
    padding-bottom:25px
  }
  .footer-top>p {
    order:3;
    width:100%;
    font-size:14px
  }
  .footer-top>a:last-child {
    font-size:13px
  }
  .footer-bottom {
    font-size:11px;
    gap:11px
  }
  .footer-bottom p:nth-child(2) {
    order:3;
    width:100%
  }
  .footer-disclaimer {
    font-size:11px;
    line-height:1.8;
    margin-top:18px
  }
}

.coming-soon {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px, 6vw, 90px);
  align-items:center;
}
.coming-copy h2 { margin:20px 0; }
.coming-description { font-size:18px; line-height:1.8; color:var(--muted); max-width:470px; }
.coming-note { font-size:14px; color:var(--muted); margin:22px 0 12px; }
.coming-card {
  border:1px solid var(--line);
  background:var(--soft);
  padding:32px;
  border-radius:26px;
  text-align:center;
  overflow:hidden;
}
.coming-pill {
  display:inline-block;
  border:1px solid #cfddbd;
  border-radius:30px;
  padding:6px 15px;
  color:var(--green);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
}
.coming-art { position:relative; width:220px; height:220px; margin:24px auto; display:grid; place-items:center; }
.coming-orbit { position:absolute; inset:0; border:1px solid #d4e0c9; border-radius:50%; }
.coming-orbit::after { content:""; position:absolute; inset:22px; border:1px dashed #c9d9ba; border-radius:50%; }
.coming-plus { width:126px; height:126px; display:grid; place-items:center; background:var(--lime); border-radius:32px; font-size:84px; font-weight:300; line-height:1; color:var(--green); transform:rotate(-8deg); }
.coming-art i { position:absolute; width:14px; height:14px; border-radius:50%; background:var(--green); top:28px; right:25px; }
.coming-art i:last-child { width:10px; height:10px; background:#a8c779; bottom:30px; left:23px; top:auto; right:auto; }
.coming-card h3 { font-size:25px; letter-spacing:-.04em; }
.coming-card>p { margin-top:7px; color:var(--muted); font-size:14px; }
.contact-section { margin-top:0; }
.contact-copy { flex:1; min-width:0; }
.contact-copy>p:last-child { color:#d5e5d6; max-width:360px; margin-top:18px; font-size:15px; }
.contact-links { width:43%; min-width:0; font-style:normal; }
.contact-links a { display:block; padding:21px 0; border-bottom:1px solid #ffffff36; }
.contact-links a:first-child { padding-top:0; }
.contact-label { display:flex; justify-content:space-between; align-items:center; color:#c6dea8; font-size:10px; letter-spacing:.13em; font-weight:600; }
.contact-label>span { font-size:19px; }
.contact-value { display:block; font-size:26px; font-weight:500; margin-top:5px; }
.contact-email { font-size:clamp(15px, 1.6vw, 21px); overflow-wrap:anywhere; }
.contact-links a:hover .contact-value { text-decoration:underline; text-underline-offset:5px; }
@media(max-width:850px) {
  .coming-soon { gap:30px; }
  .coming-card { padding:25px 18px; }
  .coming-art { width:180px; height:180px; }
  .coming-plus { width:105px; height:105px; font-size:70px; }
  .contact-section { display:grid; grid-template-columns:1fr; }
  .contact-links { width:100%; }
}
@media(max-width:600px) {
  .coming-soon { grid-template-columns:1fr; }
  .coming-description { font-size:16px; }
  .coming-copy h2 { margin-block:16px; }
  .coming-card { padding:26px 20px; }
  .coming-art { width:210px; height:210px; }
  .coming-plus { width:120px; height:120px; font-size:80px; }
  .contact-section { margin-top:0; }
  .contact-copy>p:last-child { font-size:14px; }
  .contact-links { margin-top:0; }
  .contact-value { font-size:24px; }
  .contact-email { font-size:16px; }
}

/* The rotation sequence is loaded on demand, with no automatic motion. */
.product-gallery [hidden] { display:none!important; }
.view-controls { flex-shrink:0; }
.product-gallery[data-mode="spin"] .dose-badge,
.product-gallery[data-mode="spin"] .flavour-badge { display:none; }
.spin-view { flex:1; min-height:0; display:flex; flex-direction:column; }
.spin-stage {
  flex:1;
  min-height:0;
  position:relative;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.spin-stage.is-dragging { cursor:grabbing; }
.spin-stage img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(1.2);
  pointer-events:none;
}
.spin-hint {
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:8px 14px;
  border:1px solid #dce4d3;
  border-radius:30px;
  background:#fffffff0;
  color:var(--green);
  font-size:12px;
  pointer-events:none;
}
.spin-controls {
  display:grid;
  grid-template-columns:1fr auto;
  gap:0 12px;
  margin:8px 15px 0;
  align-items:center;
  color:var(--green);
}
.spin-controls label { font-size:9px; font-weight:600; letter-spacing:.12em; }
.spin-controls output { font-size:12px; font-variant-numeric:tabular-nums; }
.spin-controls input { grid-column:1/-1; width:100%; height:28px; margin:0; accent-color:var(--green); cursor:ew-resize; }
.spin-status { font-size:11px; text-align:center; color:#63725c; margin:0 0 12px; min-height:16px; }
.spin-retry { border:0; background:none; color:var(--green); text-decoration:underline; align-self:center; padding:0 8px 10px; font-size:12px; }
@media(max-width:1150px) and (min-width:851px), (max-width:600px) {
  .gallery-bottom { flex-wrap:wrap; gap:7px; padding-top:10px; }
  .gallery-bottom p { flex-basis:100%; text-align:center; }
  .gallery-bottom .view-controls { margin-inline:auto; }
  .flavour-badge { bottom:112px; }
  .spin-status { font-size:10px; margin-bottom:7px; }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .motion-ready .reveal:not(.is-visible) {
    opacity:1;
    transform:none
  }
}