@font-face {
  font-family: "ABC Marist";
  src: url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/ABCMarist-Book.woff2") format("woff2"),
       url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/ABCMarist-Book.woff") format("woff"),
       url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/ABCMarist-Book.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Marist";
  src: url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/ABCMarist-BookItalic.woff2") format("woff2"),
       url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/ABCMarist-BookItalic.woff") format("woff"),
       url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/ABCMarist-BookItalic.otf") format("opentype");
  font-weight: 350;
  font-style: italic;
  font-display: swap;
}
/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --cream:#f8f7f2;
  --deep-green:#103608;
  --vital-green:#a7fe75;
  --orange:#ff8629;
  --dark:#382E2C;
  --cta:#382E2C;     /* dark CTA buttons (Add to Cart / Learn More) */
  --green:#379c20;
  --green-2:#32951c;
  --ink:#0a0a0a;
  --panel:#ffffff;
  --panel-2:#f9fafb;
  --ph:#e5e7eb;      /* image placeholder */
  --ph-2:#e7e4dd;
  --ph-3:#e1e1e1;
  --sand:#e7e4de;

  --font-sans:"Neue Haas Unica Pro","Helvetica Neue",Arial,system-ui,sans-serif;
  --font-serif: "ABC Marist", serif;

  --maxw:1280px;
  --pad:clamp(16px,4vw,32px);
  --radius:12px;
  --radius-lg:24px;
}

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
    overflow-x: hidden;
  margin:0;
  background:var(--cream);
  color:var(--dark);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
button{font:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}

/* shared image placeholder — keeps layout stable before assets arrive */
.img-ph{
  background:var(--ph);
  background-size:cover;
  background-position:center;
  position:relative;
}
.mobile-only{ display: none; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.serif{font-family:var(--font-serif)}
.italic{font-family:var(--font-serif);font-style:italic}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:100px;text-align:center;text-decoration:none;
  text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  padding:16px 24px;line-height:1.25;
  cursor: pointer !important;
}
.btn--dark{background:var(--cta);color:#fff}
.btn--block{width:100%}

/* ============================================================
   1. HERO
   ============================================================ */
   .hero{
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, 
    #DED2C7 0%, 
    #D3C9BD 22%, 
    #CFC2B5 54%, 
    #C8B8AA 100%
  );

  color: var(--dark);
  overflow: hidden;
}

.hero__bg{
  position: absolute;
  top: 0;
  left: 48%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1440px;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
@media (min-width: 1440px){
  .hero__bg{
    left: 48%;
    transform: translateX(-50%);
    object-position: center center;
  }
}
.option{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--ph); /* default gray */
  border-radius: 100px;
  padding: 5px 15px;
  cursor: pointer;
}

.option .label{
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: -.01em;
  flex: 1;
  line-height: 100%;
  color: var(--ink);
}

.option .price{
  font-weight: 700;
  font-size: clamp(16px, 1.48vw, 19px);
  text-align: right;
  white-space: nowrap;
  line-height: 100%;
  color: var(--ink);
}

/* selected state — green border and text */
.option.active{
  border-color: var(--green-2);
  border-width: 2px;
}

.option.active .label,
.option.active .price{
  color: var(--green-2);
/*   font-weight: 700;
 */}

/* sub option default */
.option--sub{
  border-color: var(--ph);
}

/* sub option selected */
.option--sub.active{
  border-color: var(--green-2);
}

.option--sub.active .label,
.option--sub.active .price{
  color: var(--green-2);
}
.hero__inner{
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(25px, 12vw, 200px) var(--pad) clamp(18px, 4vw, 40px);
  min-height: min(694px, 54vw);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero__top{
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}
.hero__credit{
  position: absolute;
  top: clamp(30px, 12vw, 200px);
  right: 0; /* relative to .hero__inner which already has max-width + centering */
  text-align: left;
  max-width: 260px;
}
.hero__credit .name{font-size:clamp(18px,2vw,24px);letter-spacing:-.01em}
.hero__credit .role{font-size:12px;line-height:1.35;text-transform:capitalize;margin-top:6px}
.hero__title{
  max-width:760px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 75px;
  line-height: 86px;
  letter-spacing: 0px;
  color: #382E2C;
  text-indent: -0.6em;
  position:relative;
}
.hero__title .quote{
  font-family: var(--font-serif);
  line-height: 0;
  vertical-align: 0.25em;
  margin-right: 0.1em;
}
.hero__title .italic{
  font-family: var(--font-serif);
  font-weight: 350;
  font-style: italic;
  font-size: 75px;
  line-height: 86px;
  letter-spacing: 0px;
}
.hero__promo{
  max-width: 702px;
  font-size: clamp(12px, 1.6vw, 19px);
  line-height: 1.6;
  letter-spacing: .02em;
  margin: 0;
  position: relative;
}
.hero__promo .green{   
  color:#A7FE75;
}
.card__reviews{
  gap:7px
}

.hero__promo .purpose{    margin-top: clamp(20px, 10vw, 80px);
    max-width: 702px;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.6;
    letter-spacing: .02em;
    color:#A7FE75;}
.promo__leaf{
  position: absolute;
  left: 330px;
    top: -12px;
  height: clamp(40px, 6.25vw, 70px);
  width: auto;
}
.hero__promo b:first-child{
  display: block;
  text-transform: uppercase;
  color: var(--dark);
  font-size: clamp(14px, 1.9vw, 22px);
  letter-spacing: .06em;
}
.hero__promo b{
  text-transform: uppercase;
  display: block;
  color: var(--green);
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: .06em;
}.hero__lockup{
  margin-top:clamp(10px,1.5vw,10px);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}

/* ============================================================
   2. "BETTER SLEEP CHANGED EVERYTHING"
   ============================================================ */
.why{padding:clamp(48px,7vw,79px) 0 0;  overflow-x: hidden;}
.why__grid{
  max-width: 1000px;
  margin-inline: auto;
}
.why__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(24px,5vw,64px);
  align-items:start;
}
.why__head{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(32px, 4.55vw, 58.14px);
  line-height: 110%;
  letter-spacing: 0;
  color: #382E2C;
}
.why__head u{
  font-family: var(--font-serif);
  font-weight: 350;
  font-style: italic;
  font-size: clamp(32px, 4.55vw, 58.14px);
  line-height: 110%;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
}

.why__body{
  max-width: 574px;
  min-width: 0;
  overflow: visible;
}
.why__body p{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 16px);
  line-height: clamp(23px, 1.8vw, 23px);
  letter-spacing: 0;
  margin-bottom: 1em;
  color: #382E2C;
}

.why__body u{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: clamp(20px, 1.8vw, 23px);
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  color: #382E2C;
}
.why__sign{margin-top:8px;max-width:172px;opacity:.9}
.why__last-row{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.why__credit{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  position: relative;
    left: 251px;
    top: -60px;
}

.why__sign{
  max-width: 170px;
  width: 170px;
  flex-shrink: 0;
}

.why__byline{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px !important;
  line-height: 18px;
  letter-spacing: -0.15px;
  text-transform: capitalize;
  color: #382E2C;
  margin: 0;
  flex-shrink: 1;
  min-width: 0;
  position: relative;
    top: 60px;
    left: -50px;
    line-height: 14px !important;

}
/* ============================================================
   3. MARQUEE — "Breakthrough Science I Trust"
   ============================================================ */
.marquee{
  margin:clamp(20px,6vw,05px) 0;
  overflow:hidden;
  white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{
  display: inline-flex;
  align-items: center;
  gap: 0;
  animation: scroll 28s linear infinite;
  will-change: transform;
}
.marquee__leaf{
  height: 24px;
  width: auto;
  margin-right: 24px; /* space between leaf and next text */
}
.marquee__item{
  display: inline-flex;
  align-items: center;
  gap: 6px; /* between "Breakthrough Science" and "I Trust" */
  color: var(--green);
  font-family: var(--font-serif);
  font-weight: 350;
  font-style: normal;
  font-size: clamp(16px, 1.93vw, 24.66px);
  line-height: 100%;
  letter-spacing: 0;
  white-space: nowrap;
  padding-right: 25px; /* space between text and leaf */
}
.marquee__item .italic{
  font-family: var(--font-serif);
  font-weight: 350;
  font-style: italic;
  font-size: clamp(16px, 1.93vw, 24.66px);
  line-height: 100%;
  letter-spacing: 0;
}
.marquee__item img{height:24px;width:auto}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ============================================================
   4. VIP MODULE — quote + accordion
   ============================================================ */
   .vip{
  max-width: var(--maxw);
  margin: clamp(20px,6vw,62px) auto 0;
  background: var(--panel-2);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
}

.vip__grid{
  display: grid;
  grid-template-columns: 0.85fr 1fr;
}

.vip__media{
  position: relative;
  background: var(--ph) url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/jay-shetty-drink.png") center/cover no-repeat;
  min-height: clamp(320px, 45vw, 520px);
  border-radius: 12px 0 0 12px;
}

.vip__content{
  background: #fff;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  justify-content: center;
}
.badge{
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--dark);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(13px, 1.31vw, 16.73px);
  line-height: clamp(15px, 1.40vw, 17px);
  letter-spacing: -0.18px;
}

.vip__quote{
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(20px, 2.58vw, 33px);
  line-height: clamp(28px, 3.28vw, 42px);
  letter-spacing: -1%;
  color: #382E2C;
}
.promo-line .green{display:inline;color:var(--green);text-transform:uppercase;letter-spacing:1.34px;font-size:clamp(18px,1.9vw,22px);line-height:30px}
.promo-line b{display:block;color:var(--dark);text-transform:uppercase;letter-spacing:1.34px;font-size:clamp(18px,1.9vw,22px);line-height:30px}
.promo-line span{font-size:clamp(16px,1.6vw,19px)}
.promo-line span b{display:inline;color:var(--green); font-size:clamp(16px,1.6vw,19px)}

.accordion{border-top:1px solid var(--ink)}
.accordion__item{border-bottom:1px solid var(--ink)}
.accordion__head{
  width:100%;background:none;border:0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;text-align:left;
  font-size:clamp(18px,2vw,21px);color:var(--dark);
}
.accordion__head .icon{flex:0 0 auto;width:22px;height:22px;transition:transform .25s}
/* .accordion__head[aria-expanded="true"] .icon{transform:rotate(45deg)} */
.accordion__panel{
  overflow:hidden;max-height:0;transition:max-height .3s ease;
}
.accordion__panel p{padding-bottom:18px;font-size:14px;line-height:1.35;max-width:450px}

/* ============================================================
   5. JAY'S SLEEP RITUAL — product cards
   ============================================================ */
.section-title{
  text-align:center;
  font-size:clamp(28px,3.6vw,36px);
  line-height:1.1;letter-spacing:-.01em;
  margin:clamp(40px,5vw,55px) 0 clamp(40px,5vw,55px);
  color:#382E2C;
}
.section-title--ink{color:#0A0A0A}
.ritual{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;
  grid-template-columns:1.38fr 1fr 1fr;
  gap:clamp(16px,1.8vw,22px);
  align-items:stretch;
}
.ritual__feature{
  position:relative;
  background:var(--ph) url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/img-mags-desktop-updated.png") center/cover no-repeat;
  border-radius:var(--radius-lg);
  min-height:420px;
}
.card{
  display:flex;flex-direction:column;gap:16px;
  position:relative;
}
.card__img{
  position:relative;
  aspect-ratio:465/592;
  border-radius:var(--radius);
}
.img_caps{
  background:var(--ph-2) url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/img-mag-caps-desktop.png") center/cover no-repeat;;;
}
.img_drink{
  background:var(--ph-2) url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/img-mag-drink-desktop.png") center/cover no-repeat;;;
}
.card__badge{
  position:absolute;top:20px;left:20px;
  background:#c0cdbc;color:var(--dark);
  padding:7px 9px;border-radius:3px;font-size:16px;
  line-height: 100%;
}
.card__reviews{display:flex;align-items:center;gap:14px}
.card__stars{color:var(--orange);letter-spacing:2px;font-size:18px}
.card__reviews span{font-size:13px}
.card__row{display:flex;justify-content:space-between;gap:9px;align-items:flex-start}
.card__name{font-size:clamp(18px,2vw,22px);line-height:1.25;color:#0A0A0A}
.card__price{font-weight:700;font-size:20px;text-transform:uppercase;white-space:nowrap}
.card .btn{margin-top:auto}
.card__learn{
  text-align:center;text-decoration:underline;
  text-underline-offset:2px;font-size:15px;
}

/* ============================================================
   6. PRODUCT DETAIL
   ============================================================ */
.detail{max-width:var(--maxw);margin:clamp(48px,6vw,62px) auto 0}
.detail__tabs{display:flex;gap:clamp(16px,2.5vw,28px);margin-bottom:clamp(28px,4vw,40px)}
.tab{
  flex:1;border-radius:10px !important;padding:10px 14px;text-align:center;
  font-size:clamp(15px,1.6vw,19px);letter-spacing:-.01em;line-height:1.05;
  border:1px solid var(--dark);background:transparent;color:var(--dark);
}
.tab[aria-selected="true"]{background:var(--green-2);border-color:var(--green-2);color:#fff}
.detail__body{
  display: grid;
  grid-template-columns: clamp(240px, 28.2vw, 361px) 1fr;
  gap: clamp(20px, 3vw, 38px);
  align-items: stretch;
}
.detail__media{
  position:relative;background:var(--ph) url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/offer-caps-desktop.png") center/cover no-repeat;
  border-radius:12px;  min-height: clamp(200px, 28vw, 420px);
  display:flex;align-items:center;justify-content:center;
}
.detail__card{
  background:#fff;border-radius:11px;
  padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column;gap:24px;justify-content:center;
}
.detail__name{font-size:clamp(30px,4vw,42px);line-height:1.04;color:var(--ink)}
.detail__sub{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pill{background:#c0cdbc;color:var(--ink);padding:5px 16px;border-radius:6px;font-size:17px; line-height:100%}
.detail__sub p{font-size:clamp(16px,1.7vw,19px);letter-spacing:-.01em; color:var(--ink)}
.options{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.option{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  padding: 5px 15px;
}

.option .label{
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: -.01em;
  flex: 1;
  line-height: 100%;
  color:var(--ink)
}

.option .price{
  font-weight: 700;
  font-size: clamp(16px, 1.48vw, 19px);
  text-align: right;
  white-space: nowrap;
  line-height: 100%;
    color:var(--ink)
}


.feats{display:flex;flex-direction:column;gap:6px}
.feats li{
  text-transform:uppercase;font-weight:700;letter-spacing:.06em;
  font-size:clamp(14px,1.5vw,16px);line-height:1.25;
  padding:6px 0;border-bottom:1px solid rgba(10,10,10,.18);
}
.feats li:last-child{border-bottom:0}

/* ============================================================
   7. QUOTE BANNER
   ============================================================ */
   .quote-banner{
  max-width: var(--maxw);
  margin: clamp(48px,6vw,62px) auto 0;
  border: 2.3px solid var(--green);
  border-radius: 12px;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 48px);
  text-align: center;
}

.quote-banner p{
  font-family: var(--font-serif);
  font-weight: 350;
  font-style: normal;
  color: #379C20;
  font-size: clamp(22px, 2.97vw, 38px);
  line-height: clamp(30px, 3.67vw, 47px);
  letter-spacing: 0.07px;
  text-align: center;
  max-width: 686px;
  margin-inline: auto;
}

.quote-banner .attr{
  font-family: var(--font-sans);
  font-weight: 700;
  color: #32951C;
  font-size: clamp(14px, 1.41vw, 18px);
  line-height: 110%;
  letter-spacing: 3%;
  text-transform: uppercase;
  text-align: center;
  margin-top: 40px;
}

.quote-banner p .italic{
  font-family: var(--font-serif);
  font-weight: 350;
  font-style: italic;
  font-size: clamp(22px, 2.97vw, 38px);
  line-height: clamp(30px, 3.67vw, 47px);
  letter-spacing: 0.07px;
}

/* ============================================================
   8. INTEGRATED INTO JAY'S DAY
   ============================================================ */
.integrated{max-width:var(--maxw);margin-inline:auto}
.integrated__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);
}
.vthumb{
  position: relative;
  background: var(--ph-3);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 611/389;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px,3vw,33px);
  color: #fff;
}

.img-8{
background:var(--ph-3) url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/jay-shetty-8pm-updated.png") center/cover no-repeat;;
}
.img-11{
background:var(--ph-3) url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/jay-shetty-11am-updated.png") center/cover no-repeat;;
}
.vthumb__time{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: clamp(16px,1.9vw,18px);
  align-self: flex-end; /* ← moves time to the right */
}
.vthumb__quote{
  font-size: 16px;
  line-height: 1.25;
  max-width: 560px;
  letter-spacing: -.01em;
}
/* ============================================================
   9. YOUR LIFE, OPTIMIZED
   ============================================================ */
   .optimized{
  width: 100%;
  margin-top: clamp(56px,7vw,79px);
  padding: 0;
  position: relative;
}

.optimized__inner{
  position: relative;
  min-height: clamp(320px, 35vw, 449px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0 !important;
  max-width: 100%;
}

.optimized__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--dark) url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/optimized-bg-desktop.png") center/cover no-repeat;
  order: 0;
  min-height: unset;
}

.optimized__text{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  padding: clamp(48px, 8vw, 80px) clamp(24px, 4vw, 48px);
  max-width: 600px;
  margin-inline: auto;
}

.optimized__text h2{
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.3;
  color: #fff; /* white text over image */
}

.optimized__text p{
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.25;
  color: #fff;
}
@media (min-width: 820px){
  .optimized__inner{
    margin-left: calc(50% - 680px); /* centers at 1280px then shifts left */
  }
}
.optimized__media{background:var(--dark)  url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/optimized-bg-desktop.png") center/cover no-repeat;
min-height:449px;
order: -1;}
.optimized__text{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;text-align:center;
  padding:clamp(40px,6vw,72px) clamp(24px,4vw,48px);
  max-width:480px;margin-inline:auto;
}
.optimized__text h2{font-size:clamp(30px,4vw,36px);line-height:1.3;color:#fff}
.optimized__text p{font-size:clamp(18px,2.2vw,23px);line-height:1.25}

/* ============================================================
   Responsive
   ============================================================ */
/* @media (max-width:980px){
  
} */
.card__desc{
  display: none;
}
/* @media (max-width:820px){
  .why__grid{grid-template-columns:1fr}
  .vip__grid{
    grid-template-columns: 1fr;
  }
  .vip__media{
    min-height: 412px;
    border-radius: 12px 12px 0 0;
  }
  .vip__content{
    padding: 28px 24px;
  }
  .detail__body{grid-template-columns:1fr}
  .detail__media{min-height:300px}
  .integrated__grid{grid-template-columns:1fr}
  .optimized__inner{grid-template-columns:1fr}
  .optimized__media{min-height:320px;order:-1}
  .hero__credit{position:static;text-align:left;max-width:none;margin-bottom:20px}
  .hero__inner{justify-content:flex-end}
} */
@media (max-width:560px){
  .ritual{grid-template-columns:1fr}
  .ritual__feature{min-height:260px}
  .detail__tabs{flex-direction:column}
  .options{flex-direction:column}
  .option{flex:1 1 auto}
}
.mobile-leaf{ display: none; }
.desktop-leaf{ display: inline-block; }

@media (max-width: 991px){
  .why__grid{grid-template-columns:1fr}
  .vip__grid{
    grid-template-columns: 1fr;
  }
  .vip__media{
    min-height: 412px;
    border-radius: 12px 12px 0 0;
  }
  .vip__content{
    padding: 28px 24px;
  }
  .detail__body{grid-template-columns:1fr}
  .detail__media{min-height:300px}
  .integrated__grid{grid-template-columns:1fr}
  .optimized__inner{grid-template-columns:1fr}
  .optimized__media{min-height:320px;order:-1;
    background-image: url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/optimized-bg-mobile.png");}
  .hero__credit{position:static;text-align:left;max-width:none;margin-bottom:20px}
  .hero__inner{justify-content:flex-end}
  .ritual{grid-template-columns:1fr 1fr}
  .ritual__feature{grid-column:1 / -1;min-height:300px}
  .why__grid{
    grid-template-columns: 1fr;
  }
  .mobile-leaf{ 
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: clamp(40px, 8vw, 60px);
  }
  .desktop-leaf{ display: none; }
  .promo__leaf{
    position: absolute;
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
    height: clamp(58px, 8vw, 60px);
  }
  .why__credit{
    position: static;
    left: auto;
    top: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
  }

  .why__sign{
    max-width: 120px;
    width: 120px;
    position: relative;
    top: -50px;
    left: 50px;
  }

  .why__byline{
    position: static;
    top: auto;
    left: auto;
    font-size: 12px !important;
    line-height: 16px !important;
  }
}
@media (max-width: 991px){
  .mobile-only{ display: inline; }
  .desktop-only{ display: none; }
    .why__head{
    font-size: 37.4px;
    line-height: 44px;
    letter-spacing: 0;
  }

  .why__head u{
    font-size: 37.4px;
    line-height: 44px;
  }

  .why__body p{
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0;
  }

  .why__byline{
    font-size: 12px !important;
    line-height: 14px !important;
    letter-spacing: -0.15px;
    text-transform: capitalize;
  }
    .btn{
    font-size: 14px;
    line-height: 125%;
    letter-spacing: 0.04em;
    font-weight: 700;
    text-transform: uppercase;
  }
  .optimized__inner{
    min-height: clamp(400px, 60vw, 400px);
  }
  .optimized__media{
    min-height: 320px;
    order: -1;
  }

  .optimized__text{
    padding: clamp(32px, 6vw, 56px) clamp(24px, 6vw, 48px);
    max-width: 100%;
  }

 

  .integrated__grid{
    grid-template-columns: 1fr 1fr; /* keep 2 columns on mobile */
    gap: 8px;
  }

  .vthumb{
    aspect-ratio: 3/4; /* taller on mobile */
    padding: clamp(12px, 3vw, 20px);
    border-radius: 8px;
  }

  .vthumb__time{
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.31px;
    text-align: right;
    text-transform: uppercase;
  }

  .vthumb__quote{
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.01em;
    max-width: 100%;
  }
  .vthumb__time{
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.31px;
    text-align: right;
    text-transform: uppercase;
    white-space: normal; /* ← allows wrapping */
    word-break: break-word;
    max-width: 85px; /* ← controls where it breaks */
  }
  .img-11{
    background-image: url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/jay-shetty-11am-mobile-updated.png");
    background-position: center center;
  }

  .img-8{
    background-image: url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/jay-shetty-8pm-mobile-updated.png");
    background-position: center center;
  }

  .quote-banner{
    padding: 28px 24px;
    border-radius: 12px;
    border: 1px solid #379C20;
    gap: 24px;
  }
  .quote-banner p{
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0.07px;
  }

  .quote-banner p .italic{
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0.07px;
    white-space: nowrap;
  }

  .quote-banner .attr{
    font-size: 14px;
    margin-top: 24px;
  }
  .detail__media{
    min-height: 370px;
    background-size: cover;
    background-position: center center;
  }

  .detail__media.caps-mobile{
    background-image: url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/offer-caps-mobile.png");
  }

  .detail__media.drink-mobile{
    background-image: url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/offer-drink-mobile-2.png");
  }
  .detail__name{
    font-size: 28px;
    line-height: 125%;
    letter-spacing: 0;
  }

  .pill{
    font-size: 14.42px;
    line-height: 100%;
    letter-spacing: 0;
    padding: 4px 12px;
  }
  .detail__sub p{
    font-size: 16px;
    line-height: 24.44px;
    letter-spacing: -0.18px;
  }

  .feats li{
    font-size: 14px;
    line-height: 137%;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
  }

  .detail__card .btn{
    font-size: 14px;
    line-height: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
  }
  .detail__tabs{
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto; /* allows scroll if needed */
    margin-bottom: 20px;
  }

  .tab{
    flex: 0 0 auto; /* ← key: don't grow or shrink */
    width: auto;
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
  }

  .ritual{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ritual__feature{
    display: none; /* hide the big feature image on mobile */
  }

  .card{
    display: grid;
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 6px 16px;
    align-items: start;
  }

  .card__img{
    grid-column: 1;
    grid-row: 1 / 6;
    aspect-ratio: auto;
    height: 240px;
    border-radius: 12px;
  }

  .card__reviews{
    grid-column: 2;
    grid-row: 1;
    align-items: center;
  }

  .card__row{
    grid-column: 2;
    grid-row: 2;
    flex-direction: column;
    gap: 2px;
  }

  .card__name{
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
    font-weight: 400;
  }

  .card__price{
    font-size: 14px;
    line-height: 17.5px;
    letter-spacing: 0;
    font-weight: 700;
    text-transform: uppercase;
  }

  .card__desc b{
    display: block;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0;
    font-weight: 700;
  }

  .card__desc{
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0;
    font-weight: 400;
  }
  .card__badge{
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0;
    font-weight: 400;
    padding: 5px 7px;
    top: 10px;
    left: 10px;
  }
  .card .btn{
    grid-column: 2;
    grid-row: 4;
    margin-top: 4px;
    padding: 8px 20px;
    cursor: pointer;
  }

  .card__learn{
    grid-column: 2;
    grid-row: 5;
    text-align: left;
    font-size: 12px;
  }
  .card__desc{
    display: block;
    grid-column: 2;
    grid-row: 3;
    font-size: 12px;
    line-height: 1.4;
    color: #382E2C;
  }
  .ritual{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ritual__feature{
    display: block; /* ← remove the display:none */
    grid-column: auto;
    min-height: 430px;
    border-radius: 16px;
  }
  .vip{
    border-radius: 0; /* full width */
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    width: calc(100% + 2 * var(--pad));
  }

  .vip__grid{
    grid-template-columns: 1fr;
  }

  .vip__media{
    min-height: 450px;
    border-radius: 0;
  }

  .marquee__item{
    font-size: 15.38px;
    line-height: 100%;
    letter-spacing: 0;
  }

  .marquee__item .italic{
    font-size: 15.38px;
    line-height: 100%;
  }


  .vip__content{
    padding: 24px 20px;
    border-radius: 0;
  }

  .vip__quote{
    font-size: 28px;
    line-height: 35px;
    letter-spacing: -0.01em;
  }

  .promo-line b{
    font-size: 18px;
    line-height: 34px;
    letter-spacing: 1.34px;
  }

  .accordion__head{
    font-size: 16px;
    line-height: 25.5px;
    letter-spacing: 0;
  }

  .accordion__panel p{
    font-size: 14.34px;
    line-height: 19.11px;
    letter-spacing: -0.01em;
  }
  .desktop-only{
    display: none;
  }
  .hero__bg{
    content: url("https://static-v1.cdn-bio.com/bio-shop/jay-shetty/hero-bg-mobile-3.png");
    object-position: top center;
    left:50%;
  }
  .hero__promo .green,   .hero__promo .purpose{
    color:#A7FE75;
  }

  .hero__inner{
    padding: clamp(20px, 5vw, 40px) var(--pad) clamp(24px, 5vw, 40px);
    min-height: 80svh;
    justify-content: space-between;
    padding-left: clamp(20px, 8vw, 25px);
    padding-right: clamp(20px, 8vw, 25px);
  }

  .hero__credit{
    display: none; /* hidden on mobile */
  }

  .hero__top{
    margin-top: auto;
    gap: 12px;
  }

  .hero__title{
    font-size: clamp(36px, 10vw, 52px);
    line-height: 1.1;
    color: #fff;
    text-indent: -0.4em;
  }

  .hero__title .italic{
    font-size: clamp(36px, 10vw, 52px);
    line-height: 1.1;
    color: #fff;
  }

  .hero__title .quote{
    color: #fff;
  }

  .hero__lockup{
    position: absolute;
    top: clamp(20px, 5vw, 40px);
 /*    left: 50%;
    transform: translateX(-50%); */
    white-space: nowrap;
    width: auto; /* ← let it size to content */
  }

  .hero__lockup img{
    width: 90% !important;
    height: auto !important;
    filter: invert(1) brightness(2);
    display: block;
  }
  .hero__promo{
    color: #fff;
    max-width: 450px;
  }
  .why__body{
    max-width: 100%;
  }
  .hero__promo b:first-child{
    color: var(--white);
  }

  .hero__bottom{
    padding-bottom: 8px;
    padding-top: 20px;
  }
  .optimized__inner{
    min-height: clamp(400px, 60vw, 400px);
  }

  .optimized__text h2{
    font-size: 28px;
    line-height: 125%;
    color: var(--dark);
  }

  .optimized__text p{
    font-size: 22.69px;
    line-height: 28px;
    color: var(--dark);
  }
  .card__reviews{gap:7px}
}
.optimized__inner{
  grid-template-columns: unset !important;
}
.very-small{display:none;}

@media (max-width: 400px){
  .quote-banner p .italic {
  
        white-space: normal;
    }
    .why__byline{
      font-size: 10px !important;
    }
    .card__stars{max-width: 300px;}
    .very-small{display:block;}
}

@media (max-width: 340px){
  .quote-banner p .italic {
  
        white-space: normal;
    }
    .why__byline{
      font-size: 10px !important;
    }
    .card__stars{max-width: 60px;}
    .card__reviews span{font-size: 10px;}
}