/* ==========================================================================
   th3vitalitylab — /get-v3-duyu — bright editorial system
   Reference language: duyucare.dops.agency (white editorial, giant grotesque
   + italic serif accents, full-bleed cinematic band, generous whitespace)
   ========================================================================== */

:root{
  --paper:   #FAF7F1;
  --white:   #FFFFFF;
  --ink:     #1A1A1A;
  --ink-soft:#4A4A44;
  --olive-deep:#2F3834;
  --olive:   #6B8E23;
  --sage:    #7C8A6E;
  --gold:    #C9A227;
  --line:    rgba(26,26,26,.14);

  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;

  --pad-x: clamp(20px, 5vw, 72px);
  --section-gap: clamp(88px, 14vw, 200px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* Overflow safety net: nothing may ever create horizontal page scroll. */
html, body{ overflow-x:clip; max-width:100%; }
/* Flex/grid children default to min-width:auto and can force overflow —
   neutralize that everywhere a row/column could carry long content. */
.split > *, .how__step > *, .stats__grid > *, .newsletter-form > *,
.faq-item__q > span:first-child, .hero__content, .hero__foot > *,
.site-header > *, .checklist__card{ min-width:0; }
/* Long tokens ("hydroxytyrosol", "Reg. (EU) 432/2012", URLs) must wrap
   inside their boxes rather than push past the viewport. */
h1,h2,h3,p,li{ overflow-wrap:break-word; }
.stat__cap, .science__flow p, .hotspot .tip, .fine-print,
.site-footer__legal p, .form-status, .ftc-top{ overflow-wrap:anywhere; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video{ max-width:100%; height:auto; display:block; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--ink); color:var(--paper); padding:.6em 1em; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

em.accent-serif, em.accent, .hero__title em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  letter-spacing:-0.01em;
}

/* ---------------- FTC top note ---------------- */
.ftc-top{
  margin:0;
  padding:.65em var(--pad-x);
  font-size:.74rem;
  line-height:1.5;
  color:var(--ink-soft);
  background:var(--paper);
  border-bottom:1px solid var(--line);
  text-align:center;
}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px var(--pad-x);
  background:rgba(250,247,241,0);
  transition:background .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{
  background:rgba(250,247,241,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.wordmark{
  font-family:var(--font-display); font-weight:700;
  font-size:1.2rem; letter-spacing:-0.01em;
  color:var(--ink); text-decoration:none;
}
.wordmark__dot{ color:var(--gold); }
.site-nav{ display:flex; gap:clamp(16px,3vw,40px); }
.site-nav a{
  font-size:.92rem; font-weight:500; color:var(--ink);
  text-decoration:none; position:relative;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:100%; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s ease;
}
.site-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.pill-cta{
  background:var(--ink); color:var(--paper);
  font-size:.92rem; font-weight:500;
  text-decoration:none;
  padding:.72em 1.35em; border-radius:99px;
  white-space:nowrap;
  transition:background .3s ease, transform .3s ease;
}
.pill-cta:hover{ background:var(--olive-deep); transform:translateY(-1px); }
.header-cta{ display:flex; align-items:center; gap:clamp(12px,2vw,22px); }
.nav-shop{
  font-size:.92rem; font-weight:600; color:var(--olive-deep);
  text-decoration:none; white-space:nowrap; letter-spacing:-0.005em;
  display:inline-flex; align-items:center; gap:.3em;
  transition:color .25s ease;
}
.nav-shop:hover{ color:var(--gold); }
.nav-shop span[aria-hidden]{ font-size:.9em; }
@media (max-width: 720px){
  .site-nav{ display:none; }
  .nav-shop__full{ display:none; }
  .header-cta{ gap:10px; }
  .pill-cta{ padding:.58em 1em; font-size:.82rem; }
  .nav-shop{ font-size:.86rem; }
}

/* ---------------- Hero (full-bleed autoplay orbit video) ---------------- */
.hero{
  position:relative;
  height:100svh;
  min-height:540px;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--paper);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:72% 50%; /* sprig lives on the right — keep it in frame */
}
/* The video sits over the poster: same cover framing, sprig held to the RIGHT
   so the headline keeps its clean negative space on the left. The poster stays
   underneath so there is never a blank/black hero before the video paints. */
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:72% 50%;
}
/* Fallback motion: gentle Ken-Burns drift on the still
   (reduced motion / save-data / 2g-3g — the inline gate removes the video). */
.hero--drift .hero__poster{
  animation:hero-drift 20s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes hero-drift{
  from{ transform:scale(1) translate(0,0); }
  to{ transform:scale(1.06) translate(-6px,4px); }
}
@media (prefers-reduced-motion: reduce){
  .hero--drift .hero__poster{ animation:none; }
}
/* Dark left-side scrim for headline contrast — weighted left + bottom, sprig stays bright */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(16,24,14,.70) 0%,
      rgba(16,24,14,.46) 32%,
      rgba(16,24,14,.16) 56%,
      rgba(16,24,14,0) 74%),
    linear-gradient(0deg,
      rgba(16,24,14,.30) 0%,
      rgba(16,24,14,0) 34%);
}
.hero__content{
  position:relative; z-index:1;
  width:100%;
  padding:0 var(--pad-x);
}
.hero__title{
  margin:0;
  max-width:12ch;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.5rem, 6.4vw, 6.4rem);
  line-height:1.0;
  letter-spacing:-0.035em;
  color:var(--paper);
  text-shadow:0 1px 30px rgba(8,14,6,.45), 0 1px 2px rgba(8,14,6,.28);
}
.h-line{ display:block; overflow:hidden; padding-bottom:.06em; }
.h-line-inner{ display:inline-block; }
.hero__title em{ font-weight:500; padding-right:.06em; color:#E7CB72; }
/* Functional value-prop subheadline directly under the headline (added 2026-06-16).
   Regular weight, cream body-text tone, slightly smaller than the headline. */
.hero__lead{
  margin:1.15em 0 0; max-width:44ch;
  font-family:var(--font-body); font-weight:400;
  font-size:clamp(1.08rem, 1.5vw, 1.32rem); line-height:1.55;
  color:rgba(250,247,241,.92); text-shadow:0 1px 18px rgba(8,14,6,.42);
}
.hero__sub{
  margin:1.1em 0 0; max-width:36ch;
  font-size:clamp(1rem, 1.3vw, 1.15rem); line-height:1.6;
  color:rgba(250,247,241,.82); text-shadow:0 1px 18px rgba(8,14,6,.42);
}
.hero__foot{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  padding:0 var(--pad-x) clamp(22px,4vh,44px);
}
.scroll-cue{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--paper); text-decoration:none;
  font-size:.85rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 1px 12px rgba(8,14,6,.5);
}
.scroll-cue__arrow{ display:inline-block; animation:cue-bob 1.8s ease-in-out infinite; }
@keyframes cue-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
@media (prefers-reduced-motion: reduce){ .scroll-cue__arrow{ animation:none; } }
@media (max-width: 768px){
  .hero{ min-height:480px; }
  .hero__title{ font-size:clamp(2.4rem, 11vw, 3.4rem); }
  .hero__poster, .hero__video{ object-position:68% 50%; }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(16,24,14,.68) 0%,
      rgba(16,24,14,.44) 46%,
      rgba(16,24,14,.12) 78%,
      rgba(16,24,14,0) 100%);
  }
  .hero{ justify-content:flex-start; }
  .hero__content{ margin-top:clamp(88px,18vh,160px); }
}

/* ---------------- Generic section scaffolding ---------------- */
.section{ padding:0 var(--pad-x) var(--section-gap); max-width:1320px; margin:0 auto; }
.section--cream{
  max-width:none;
  background:var(--white);
  padding-top:var(--section-gap);
  margin-bottom:var(--section-gap);
}
.section--cream .split{ max-width:1320px; margin:0 auto; }
.kicker{
  font-family:var(--font-display);
  font-size:.95rem; font-weight:500; letter-spacing:.05em;
  color:var(--olive);
  margin:0 0 2.2em;
}
.kicker--light{ color:var(--gold); }
.section-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem, 4.5vw, 3.4rem);
  line-height:1.05; letter-spacing:-0.025em;
  margin:0 0 1.4em;
}
.flow > * + *{ margin-top:1.35em; }
.flow p{ margin:0; }

/* split: sticky kicker aside + body */
.split{ display:grid; grid-template-columns: minmax(180px,1fr) minmax(0,2.1fr); gap:clamp(24px,5vw,80px); }
.split__aside .kicker{ position:sticky; top:96px; margin-bottom:0; }
.split__body p{ font-size:clamp(1.08rem, 1.55vw, 1.3rem); line-height:1.72; color:var(--ink); }
.split__body .fine-print, .split__body .ftc-buy{ font-size:.8rem; }
@media (max-width: 820px){
  .split{ grid-template-columns:1fr; }
  .split__aside .kicker{ position:static; margin-bottom:1.6em; }
}

/* ---------------- Recognition ---------------- */
.recognition{ padding-top:0; }
.recognition__list{
  list-style:none; margin:0; padding:0;
  max-width:880px;
}
.recognition__list li{
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 2.6vw, 1.9rem);
  font-weight:500; line-height:1.35; letter-spacing:-0.015em;
  padding:1.1em 0;
  border-top:1px solid var(--line);
}
.recognition__list li:last-child{ border-bottom:1px solid var(--line); }
.recognition__resolution{
  max-width:880px;
  margin:2.4em 0 0;
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(1.3rem, 2.6vw, 1.85rem);
  line-height:1.45;
  color:var(--olive-deep);
}

/* ---------------- Stats ---------------- */
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,40px);
  border-top:1px solid var(--line);
  padding-top:clamp(28px,4vw,56px);
}
.stat__num{
  margin:0 0 .35em;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem, 5.5vw, 4.6rem);
  letter-spacing:-0.03em; line-height:1;
  color:var(--olive-deep);
}
.stat__cap{ margin:0; font-size:.88rem; line-height:1.6; color:var(--ink-soft); }
@media (max-width: 900px){ .stats__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 480px){ .stats__grid{ grid-template-columns:1fr; } }

/* ---------------- Marquee ---------------- */
.marquee-wrap{ margin-bottom:var(--section-gap); }
.marquee{
  background:var(--olive-deep);
  overflow:hidden;
  padding:1.15em 0;
}
.marquee__track{
  display:flex; width:max-content;
  animation:marquee 36s linear infinite;
}
.marquee__seq{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1rem, 2vw, 1.35rem);
  color:var(--paper); white-space:nowrap;
  letter-spacing:.01em;
}
.marquee__seq i{
  font-style:normal; color:var(--gold);
  padding:0 .9em;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
}
.marquee__fine{ padding:1em var(--pad-x) 0; text-align:center; }
.fine-print{
  font-size:.78rem; line-height:1.6; color:var(--ink-soft);
  margin:0;
}

/* ---------------- How it works ---------------- */
.how__list{ list-style:none; margin:0; padding:0; counter-reset:none; }
.how__step{
  display:grid; grid-template-columns: 90px minmax(0,1fr);
  gap:clamp(16px,3vw,48px);
  padding:clamp(24px,3.5vw,44px) 0;
  border-top:1px solid var(--line);
}
.how__step:last-child{ border-bottom:1px solid var(--line); }
.how__num{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.4rem,2.4vw,2rem);
  color:var(--gold); line-height:1.1;
}
.how__step h3{
  margin:0 0 .5em;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.2rem, 2.2vw, 1.7rem); letter-spacing:-0.015em;
}
.how__step p{ margin:0; max-width:62ch; color:var(--ink-soft); font-size:1.02rem; }
@media (max-width: 560px){
  .how__step{ grid-template-columns:1fr; gap:10px; }
}

/* ---------------- Science (dark editorial w/ hotspots) ---------------- */
.science{
  max-width:none;
  background:var(--olive-deep);
  color:var(--paper);
  padding-top:var(--section-gap);
  margin-bottom:var(--section-gap);
}
.science__hint{
  max-width:880px; margin:-1.4em auto 2.8em;
  font-size:.82rem; color:rgba(250,247,241,.55);
}
.science .kicker{ max-width:880px; margin-left:auto; margin-right:auto; }
.science__flow{ max-width:880px; margin:0 auto; }
.science__flow p{
  font-size:clamp(1.05rem, 1.45vw, 1.22rem);
  line-height:1.78;
  color:rgba(250,247,241,.92);
}
.science__flow strong{ color:var(--white); }
.note-oleuropein{ border-top:1px solid rgba(250,247,241,.18); padding-top:1.6em; }

.hotspot{
  appearance:none; background:none; border:none; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer;
  position:relative;
  border-bottom:2px dotted var(--gold);
  transition:color .25s ease;
}
.hotspot:hover, .hotspot:focus-visible{ color:var(--gold); outline:none; }
.hotspot:focus-visible{ box-shadow:0 0 0 2px rgba(201,162,39,.5); border-radius:2px; }
.hotspot .tip{
  position:absolute; left:50%; bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(6px);
  width:min(300px, calc(100vw - 40px));
  background:var(--paper); color:var(--ink);
  font-size:.85rem; font-weight:400; line-height:1.55; font-style:normal;
  font-family:var(--font-body);
  text-align:left; letter-spacing:0;
  padding:.9em 1.05em;
  border-radius:12px;
  box-shadow:0 16px 48px -12px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  z-index:60;
}
.hotspot .tip::after{
  content:""; position:absolute; top:100%; left:50%;
  transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--paper);
}
.hotspot.open .tip, .hotspot:hover .tip, .hotspot:focus-visible .tip{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
@media (pointer: coarse){
  .hotspot:hover .tip{ opacity:0; visibility:hidden; }   /* tap-only on touch */
  .hotspot.open .tip{
    opacity:1; visibility:visible;
    position:fixed; left:16px; right:16px; bottom:16px; top:auto;
    width:auto; transform:none;
  }
  .hotspot.open .tip::after{ display:none; }
}
/* Narrow viewports (any pointer): the centered tooltip could overflow the
   viewport edge — pin it to the bottom of the screen instead. */
@media (max-width: 640px){
  .hotspot .tip,
  .hotspot.open .tip, .hotspot:hover .tip, .hotspot:focus-visible .tip{
    position:fixed; left:16px; right:16px; bottom:16px; top:auto;
    width:auto; transform:none;
  }
  .hotspot .tip::after{ display:none; }
}

/* ---------------- Checklist / email capture ---------------- */
.checklist{ max-width:none; padding-left:var(--pad-x); padding-right:var(--pad-x); }
.checklist__card{
  max-width:880px; margin:0 auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:28px;
  padding:clamp(32px,6vw,72px);
  text-align:center;
  box-shadow:0 30px 80px -40px rgba(47,56,52,.25);
}
.checklist__title{
  margin:0 0 .5em;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.8rem, 4vw, 3rem); letter-spacing:-0.025em; line-height:1.08;
}
.checklist__sub{
  margin:0 auto 2em; max-width:46ch;
  color:var(--ink-soft); font-size:1.02rem;
}
.newsletter-form{
  display:flex; gap:12px; max-width:560px; margin:0 auto;
}
.newsletter-form input[type=email]{
  flex:1; min-width:0;
  font:inherit; color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line); border-radius:99px;
  padding:.85em 1.3em;
}
.newsletter-form input[type=email]:focus{
  outline:2px solid var(--olive); outline-offset:1px;
}
.btn-primary{
  font:inherit; font-weight:600;
  background:var(--olive-deep); color:var(--paper);
  border:none; border-radius:99px;
  padding:.85em 1.6em;
  cursor:pointer; white-space:nowrap;
  transition:background .3s ease, transform .3s ease;
}
.btn-primary:hover{ background:var(--ink); transform:translateY(-1px); }
.btn-primary:disabled{ opacity:.6; cursor:default; transform:none; }
.checklist__note{
  margin:1.4em auto 0; max-width:46ch;
  color:var(--ink-soft); font-size:.9rem; line-height:1.55;
}
.form-status{ margin:1.2em auto 0; max-width:46ch; font-size:.95rem; }
.form-status.success{ color:var(--olive); font-weight:600; }
.form-status.error{ color:#A33A2A; }
@media (max-width: 560px){
  .newsletter-form{ flex-direction:column; }
}

/* ---------------- Product ---------------- */
.product__figure{
  margin:0;
  aspect-ratio:1344/768;          /* reserved box — zero CLS */
  border-radius:22px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 26px 64px -30px rgba(47,56,52,.38);
}
.product__figure img{ width:100%; height:100%; object-fit:cover; }
.benefit-lead{ font-weight:600; }
.benefit-list{
  list-style:none; margin:0; padding:0;
}
.benefit-list li{
  position:relative;
  padding:.85em 0 .85em 2em;
  border-top:1px solid var(--line);
  font-size:1.02rem; line-height:1.6; color:var(--ink-soft);
}
.benefit-list li:last-child{ border-bottom:1px solid var(--line); }
.benefit-list li::before{
  content:"✦"; position:absolute; left:0; top:.85em;
  color:var(--gold); font-size:.9em;
}
.benefit-list strong{ color:var(--ink); }
.ftc-buy{ font-size:.8rem; color:var(--ink-soft); }
.buy-btn{
  display:inline-block;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-display); font-weight:500; font-size:1.05rem;
  text-decoration:none;
  padding:1em 1.9em; border-radius:99px;
  transition:background .3s ease, transform .3s ease;
}
.buy-btn:hover{ background:var(--olive-deep); transform:translateY(-2px); }

/* ---------------- FAQ ---------------- */
.faq__list{ max-width:880px; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item__q{
  appearance:none; background:none; border:none;
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  text-align:left; cursor:pointer;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.1rem, 2vw, 1.45rem); letter-spacing:-0.01em;
  color:var(--ink);
  padding:1.2em 0;
}
.faq-item__icon{
  font-size:1.4em; line-height:1; color:var(--gold);
  transition:transform .35s ease;
  flex:none;
}
.faq-item.open .faq-item__icon{ transform:rotate(45deg); }
.faq-item__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-item__body{ grid-template-rows:1fr; }
.faq-item__body > div{ overflow:hidden; }
.faq-item__body p{
  margin:0 0 1.6em; max-width:68ch;
  color:var(--ink-soft); line-height:1.7;
}

/* ---------------- Footer ---------------- */
.site-footer{
  background:var(--olive-deep); color:rgba(250,247,241,.78);
  padding:clamp(48px,7vw,88px) var(--pad-x) 40px;
}
.site-footer__mark{
  font-family:var(--font-display); font-weight:700; font-size:1.4rem;
  color:var(--paper); margin:0 0 2em;
}
.site-footer__legal{ max-width:780px; }
.site-footer__legal p{
  font-size:.8rem; line-height:1.65; margin:0 0 1.1em;
}
.site-footer__copy{
  margin:3em 0 0; font-size:.78rem; color:rgba(250,247,241,.5);
}