/* ============================
   Alevia Wellness — Design tokens
   ============================ */
:root{
  --teal:#0D5076;
  --green:#206139;
  --orange:#D66624;
  --cream:#F7EEE5;
  --ink:#20291f;
  --white:#ffffff;
  --line: rgba(13,80,118,0.12);
  --shadow: 0 12px 30px rgba(32,41,31,0.08);
  --shadow-lg: 0 24px 60px rgba(32,41,31,0.14);
  --radius: 20px;
  --radius-sm: 12px;
  --ff: 'Poppins', system-ui, -apple-system, sans-serif;
  --header-h: 92px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px);}
body{
  margin:0;
  font-family:var(--ff);
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

h1,h2,h3{font-weight:800; margin:0 0 .5em; line-height:1.15; color:var(--teal);}
h1{font-size:clamp(2.2rem, 5vw, 3.6rem);}
h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem);}
h3{font-size:1.15rem; color:var(--ink);}
p{margin:0 0 1em; color:#3c473a;}

.eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:.6em;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--orange); color:var(--white); box-shadow:0 10px 24px rgba(214,102,36,.32);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(214,102,36,.4);}
.btn-line{background:transparent; border-color:var(--teal); color:var(--teal);}
.btn-line:hover{background:var(--teal); color:var(--white);}

/* Reveal-on-scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============================
   Header
   ============================ */
.site{
  position:sticky; top:0; z-index:60;
  background:rgba(247,238,229,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
  height:var(--header-h);
  display:flex; align-items:center;
}
.site[data-scrolled="1"]{border-color:var(--line); box-shadow:0 6px 20px rgba(32,41,31,.06);}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:32px;}

.brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand-icon{width:52px; height:auto; object-fit:contain; flex-shrink:0;}
.brand-word{display:flex; flex-direction:column; line-height:1.05;}
.brand-word strong{font-size:1.5rem; color:var(--teal); font-weight:800; letter-spacing:-.01em;}
.brand-word small{font-size:.72rem; letter-spacing:.18em; color:var(--green); font-weight:700; margin-top:2px;}

.nav-desktop{display:flex; align-items:center; gap:44px; flex:1; justify-content:center;}
.nav-desktop a{font-weight:600; font-size:.95rem; color:var(--ink); position:relative; padding:8px 2px;}
.nav-desktop a:hover{color:var(--orange);}

.header-actions{display:flex; align-items:center; gap:20px; flex-shrink:0;}
.shop-cta{padding:10px 20px; font-size:.85rem;}

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border:none; background:none; cursor:pointer;
}
.menu-toggle span{display:block; height:2px; background:var(--teal); border-radius:2px;}

.mobile-panel{
  position:fixed; inset:0 0 0 auto; width:min(86vw, 340px);
  background:var(--cream); z-index:80;
  transform:translateX(100%); transition:transform .3s ease;
  padding:28px 32px; display:flex; flex-direction:column; gap:40px;
  box-shadow:-10px 0 40px rgba(0,0,0,.15);
}
.mobile-panel.open{transform:translateX(0);}
.mobile-panel nav{display:flex; flex-direction:column; gap:30px; margin-top:12px;}
.mobile-panel nav a{font-size:1.2rem; font-weight:700; color:var(--teal); padding:4px 0;}
.close-x{align-self:flex-end;}

.scrim{
  position:fixed; inset:0; background:rgba(20,25,20,.4); z-index:70;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.scrim.show{opacity:1; pointer-events:auto;}

/* ============================
   Pre-order modal
   ============================ */
.preorder-modal{
  position:fixed; top:50%; left:50%; z-index:90;
  width:min(90vw, 420px);
  background:#fff; border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  padding:32px 28px 26px;
  transform:translate(-50%, -50%) scale(.94); opacity:0; pointer-events:none;
  transition:transform .2s ease, opacity .2s ease;
}
.preorder-modal.open{transform:translate(-50%, -50%) scale(1); opacity:1; pointer-events:auto;}
.preorder-modal h2{margin-bottom:8px; font-size:1.35rem;}
.preorder-modal p{font-size:.92rem;}
.preorder-close{
  position:absolute; top:14px; right:16px;
  background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--teal);
}
#preorderForm{display:flex; flex-direction:column; gap:12px; margin-top:16px;}
#preorderForm input[type="email"]{
  padding:14px 16px; border-radius:999px; border:1px solid var(--line);
  font-family:var(--ff); font-size:.95rem;
}
.preorder-modal .form-msg{color:var(--teal); font-weight:600; font-size:.85rem; min-height:1.2em; margin:10px 0 0;}
.preorder-note{font-size:.75rem; color:#7a847a; margin:6px 0 0;}

/* ============================
   Hero
   ============================ */
.hero{
  position:relative; overflow:hidden;
  padding:96px 0 100px;
  min-height:560px;
  display:flex; align-items:center;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
}
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    var(--cream) 0%,
    rgba(247,238,229,.96) 24%,
    rgba(247,238,229,.8) 38%,
    rgba(247,238,229,.35) 50%,
    rgba(247,238,229,0) 60%);
}
.hero-inner{
  display:block; width:100%; max-width:540px;
  padding-left:max(24px, 6vw); padding-right:24px;
  box-sizing:border-box;
}
.hero-sub{font-size:1.08rem; max-width:42ch;}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 26px;}
.badge{
  background:#fff; border:1px solid var(--line); color:var(--teal);
  font-size:.78rem; font-weight:700; padding:7px 14px; border-radius:999px;
  box-shadow:0 4px 14px rgba(32,41,31,.08);
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

/* ============================
   Benefit strip
   ============================ */
.benefit-strip{background:var(--teal); padding:28px 0;}
.benefit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.benefit-item{display:flex; align-items:center; gap:10px;}
.benefit-icon{font-size:1.4rem;}
.benefit-item p{color:#fff; margin:0; font-size:.88rem; font-weight:600;}

/* ============================
   Mini add-to-bag bar
   ============================ */
.mini-bar{
  position:fixed; top:var(--header-h); left:0; right:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  transform:translateY(-120%); transition:transform .25s ease;
}
.mini-bar.show{transform:translateY(0);}
.mini-bar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 24px;}
.mini-bar-info{display:flex; align-items:center; gap:12px;}
.mini-bar-info img{width:40px; height:40px; object-fit:cover; border-radius:8px;}
.mini-bar-info div{display:flex; flex-direction:column; line-height:1.3;}
.mini-bar-info strong{font-size:.88rem; color:var(--teal);}
.mini-bar-info span{font-size:.8rem; color:var(--orange); font-weight:700;}
.mini-bar .btn{padding:10px 20px; font-size:.85rem;}

/* ============================
   Stats
   ============================ */
.stats{padding:52px 0; background:#fff;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
.stat-num{display:block; font-size:clamp(2rem,4vw,2.6rem); font-weight:800; color:var(--orange);}
.stat-item p{margin:.2em 0 0; font-size:.85rem; font-weight:600; color:var(--teal);}

/* ============================
   Section head
   ============================ */
.section-head{max-width:640px; margin:0 auto 44px; text-align:center;}
.section-head p{font-size:1.02rem;}

section{padding:76px 0;}

/* ============================
   Shop grid
   ============================ */
.product-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
.product-card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.product-media{
  display:block; position:relative;
  aspect-ratio:3/4; overflow:hidden;
  padding:18px;
  box-sizing:border-box;
}
#sku-powder .product-media{background:linear-gradient(135deg, #FBE3C4 0%, #F2A15C 100%);}
#sku-capsules .product-media{background:linear-gradient(135deg, #CFE6EE 0%, #6FA9C2 100%);}
.product-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 12%;
  border-radius:calc(var(--radius) - 8px);
  box-shadow:var(--shadow);
}
.product-info{padding:22px 24px 26px;}
.product-info h3{margin-bottom:4px;}
.product-format{font-size:.85rem; color:#7a847a; margin-bottom:12px;}
.product-tags{display:flex; gap:8px; margin-bottom:18px;}
.tag{background:var(--cream); color:var(--green); font-size:.72rem; font-weight:700; padding:5px 10px; border-radius:999px;}
.product-buy{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.price{font-size:1.25rem; font-weight:800; color:var(--teal);}

/* ============================
   Compare table
   ============================ */
.compare{margin-top:56px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 32px;}
.compare h3{text-align:center; color:var(--teal); margin-bottom:22px;}
.compare-table{display:flex; flex-direction:column;}
.compare-row{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); align-items:center;}
.compare-row:last-child{border-bottom:none;}
.compare-head span{font-weight:800; color:var(--teal); font-size:.9rem;}
.compare-row span[role="rowheader"]{font-weight:700; color:var(--ink); font-size:.88rem;}
.compare-row:not(.compare-head) span:not([role="rowheader"]){font-size:.88rem; color:#4a544a; text-align:center;}
.compare-head span:not(:first-child){text-align:center;}

/* ============================
   Product detail
   ============================ */
.product-detail{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:640px; display:flex; align-items:center;
  padding:80px 0;
  background:#fff;
}
.product-detail.alt{background:var(--cream);}
.pd-bg-img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:contain; object-position:20% center;
}
.product-detail.alt .pd-bg-img{object-position:80% center;}
.pd-scrim{position:absolute; inset:0; z-index:-1;}
.pd-scrim-r{
  background:linear-gradient(260deg,
    var(--cream) 0%, rgba(247,238,229,.96) 24%,
    rgba(247,238,229,.8) 38%, rgba(247,238,229,.35) 50%,
    rgba(247,238,229,0) 60%);
}
.pd-scrim-l{
  background:linear-gradient(100deg,
    var(--cream) 0%, rgba(247,238,229,.96) 24%,
    rgba(247,238,229,.8) 38%, rgba(247,238,229,.35) 50%,
    rgba(247,238,229,0) 60%);
}
.pd-inner{width:100%; max-width:1180px; margin:0 auto; padding:0 24px; display:flex; box-sizing:border-box;}
.pd-inner.pd-align-right{justify-content:flex-end;}
.pd-copy{max-width:480px;}
.pd-price{font-size:1.15rem; font-weight:700; color:var(--orange); margin-bottom:14px;}
.pd-desc{font-size:1.05rem;}
.pd-claims{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px;}
.pd-claims li{
  background:var(--cream); color:var(--teal); font-weight:600; font-size:.82rem;
  padding:8px 14px; border-radius:999px; border:1px solid var(--line);
}
.product-detail.alt .pd-claims li{background:#fff;}
.pd-usage{background:var(--cream); border-radius:var(--radius-sm); padding:18px 20px; margin-bottom:22px;}
.product-detail.alt .pd-usage{background:#fff;}
.pd-usage h3{margin-bottom:6px; font-size:1rem; color:var(--teal);}
.pd-usage p{margin:0; font-size:.92rem;}

/* Product tabs */
.pd-tabs{margin-bottom:24px;}
.pd-tab-btns{display:flex; gap:6px; border-bottom:2px solid var(--line); margin-bottom:18px;}
.pd-tab-btn{
  background:none; border:none; cursor:pointer; font-family:var(--ff);
  font-weight:700; font-size:.9rem; color:#8a948a;
  padding:10px 4px; margin-bottom:-2px; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.pd-tab-btn + .pd-tab-btn{margin-left:16px;}
.pd-tab-btn:hover{color:var(--teal);}
.pd-tab-btn.active{color:var(--orange); border-color:var(--orange);}
.pd-tab-panel{min-height:60px;}
.pd-ingredients{font-size:.92rem; line-height:1.6;}
.pd-ingredients-note{font-size:.78rem; color:#8a948a; font-style:italic;}

/* ============================
   Fiber education
   ============================ */
.fiber-ed{background:var(--cream);}
.fiber-gap{max-width:640px; margin:0 auto 50px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 32px;}
.fiber-gap-row{margin-bottom:18px;}
.fiber-gap-row:last-of-type{margin-bottom:12px;}
.fiber-gap-label{display:block; font-size:.85rem; font-weight:700; color:var(--teal); margin-bottom:8px;}
.fiber-gap-track{background:var(--cream); border-radius:999px; height:14px; overflow:hidden;}
.fiber-gap-fill{height:100%; width:0; background:var(--orange); border-radius:999px; transition:width 1.1s ease;}
.fiber-gap-fill.full{background:var(--green);}
.fiber-gap-note{margin:14px 0 0; font-size:.85rem; color:#4a544a; text-align:center;}
.fiber-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.fiber-fact{background:#fff; border-radius:var(--radius-sm); padding:22px; box-shadow:var(--shadow);}
.fiber-fact h3{color:var(--orange); margin-bottom:6px;}
.fiber-fact p{margin:0; font-size:.9rem;}

/* ============================
   Clean label
   ============================ */
.clean-label{background:var(--teal);}
.clean-label .eyebrow{color:#f2b788;}
.clean-label h2, .clean-label p{color:#fff;}
.clean-label .section-head p{color:#d9e6ee;}
.clean-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.clean-item{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); padding:26px;}
.clean-item h3{color:#fff; margin-bottom:8px;}
.clean-item p{color:#d9e6ee; margin:0;}

/* ============================
   Believe
   ============================ */
.believe-inner{text-align:center;}
.believe blockquote{
  font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; color:var(--teal);
  margin:0 auto 46px; max-width:18ch; line-height:1.3;
}
.believe-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:left;}
.believe-item{background:#fff; border-radius:var(--radius); padding:26px; box-shadow:var(--shadow);}

/* ============================
   Story
   ============================ */
.story{background:#fff;}
.story-inner{max-width:720px; margin:0 auto;}
.story-inner p{font-size:1.05rem;}

/* ============================
   FAQ
   ============================ */
.faq-list{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 20px;}
.faq-item summary{cursor:pointer; font-weight:700; color:var(--teal); list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:1.3rem; color:var(--orange); margin-left:12px;}
.faq-item[open] summary::after{content:'−';}
.faq-item p{margin:12px 0 0; font-size:.92rem;}

/* ============================
   Cohort
   ============================ */
.cohort{background:var(--orange);}
.cohort-inner{text-align:center; max-width:560px; margin:0 auto;}
.cohort h2, .cohort p{color:#fff;}
.cohort-copy p{color:#fce2d0;}
#cohortForm{display:flex; gap:10px; margin-top:8px;}
#emailInput{
  flex:1; padding:14px 18px; border-radius:999px; border:none; font-family:var(--ff); font-size:.95rem;
}
.cohort .btn-primary{background:var(--teal);}
.form-msg{margin-top:12px; color:#fff; font-weight:600; font-size:.9rem; min-height:1.2em;}

/* ============================
   Footer
   ============================ */
.site-footer{background:var(--ink); padding:40px 0;}
.footer-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;}
.site-footer .brand-word strong{color:#fff;}
.site-footer .brand-word small{color:#9fd0a3;}
.site-footer nav{display:flex; gap:20px; flex-wrap:wrap;}
.site-footer nav a{color:#cfd6cd; font-size:.88rem; font-weight:600;}
.site-footer nav a:hover{color:#fff;}
.site-footer span{color:#8b948a; font-size:.8rem;}

/* ============================
   Responsive
   ============================ */
@media (max-width: 920px){
  .nav-desktop{display:none;}
  .menu-toggle{display:flex;}
  .hero{padding:64px 0 48px; min-height:0;}
  .hero-inner{max-width:none; text-align:center; margin:0 auto; padding-left:24px; padding-right:24px;}
  .hero-badges, .hero-ctas{justify-content:center;}
  .hero-scrim{
    background:linear-gradient(180deg,
      var(--cream) 0%,
      rgba(247,238,229,.96) 55%,
      rgba(247,238,229,.9) 100%);
  }
  .benefit-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:1fr;}
  .product-detail{min-height:0; padding:56px 0;}
  .pd-inner, .pd-inner.pd-align-right{justify-content:center; text-align:center;}
  .pd-copy{max-width:none;}
  .pd-claims, .hero-badges{justify-content:center;}
  .pd-scrim-r, .pd-scrim-l{
    background:linear-gradient(180deg,
      var(--cream) 0%,
      rgba(247,238,229,.96) 45%,
      rgba(247,238,229,.9) 100%);
  }
  .clean-grid, .believe-grid{grid-template-columns:1fr;}
  #cohortForm{flex-direction:column;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .compare-row{grid-template-columns:1fr; text-align:left; gap:4px;}
  .compare-row:not(.compare-head) span:not([role="rowheader"]){text-align:left;}
  .compare-head{display:none;}
  .compare-row:not(.compare-head) span[role="rowheader"]::after{content:':';}
  .fiber-facts{grid-template-columns:1fr;}
}

@media (max-width: 520px){
  .hero-bg{background-position:75% center;}
  section{padding:56px 0;}
  .brand-icon{width:40px;}
  .brand-word strong{font-size:1.2rem;}
  .brand-word small{font-size:.62rem;}
  .shop-cta{display:none;}
  .mini-bar-info strong{font-size:.78rem;}
  .mini-bar-info img{width:34px; height:34px;}
}