/* VitaGen V37 — gold navigation, transparent single-DNA watermark, and mobile polishing.
   This file deliberately overrides earlier styling without touching product or form content. */

/* Light, readable navigation across all pages */
html body .site-header,
html body .site-header.scrolled {
  background:rgba(250,251,249,.96)!important;
  border-bottom:1px solid rgba(139,103,62,.16)!important;
  box-shadow:0 8px 32px rgba(19,54,57,.08)!important;
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  color:#88633b!important;
}
html body .site-header .brand{color:#164750!important;}
html body .site-header .brand strong{color:#164750!important;}
html body .site-header .brand small{color:#87623d!important;opacity:1!important;}
html body .site-header .site-nav > a:not(.nav-cta) {
  color:#805a30!important;
  opacity:1!important;
  font-weight:500;
  text-shadow:none!important;
}
html body .site-header .site-nav > a:not(.nav-cta):hover,
html body .site-header .site-nav > a:not(.nav-cta):focus-visible,
html body .site-header .site-nav > a.active:not(.nav-cta){
  color:#513917!important;
}
html body .site-header .site-nav > a:not(.nav-cta)::after{background:#b18b58!important;}
html body .site-header .site-nav > a.nav-cta {
  color:#79572d!important;
  border-color:rgba(143,104,57,.42)!important;
  background:linear-gradient(120deg,rgba(239,224,197,.39),rgba(255,255,255,.54))!important;
  box-shadow:none!important;
}
html body .site-header .site-nav > a.nav-cta:hover,
html body .site-header .site-nav > a.nav-cta:focus-visible {
  color:#473419!important;
  background:#f3e7d5!important;
  border-color:#9c794f!important;
}
html body .site-header .site-nav .nav-cta svg{color:inherit!important;}
html body .site-header .nav-toggle{color:#805a30!important;border-radius:10px;}
html body .site-header .nav-toggle:focus-visible,
html body .site-header .site-nav a:focus-visible {outline:2px solid #9c794f;outline-offset:4px;}

/* The hero watermark uses only the transparent DNA strand (not the full VitaGen logo). */
html body .hero-persona::after {
  content:"";
  position:absolute;
  z-index:0;
  left:clamp(12px,8vw,130px);
  top:51%;
  width:clamp(180px,29vw,420px);
  height:min(68%,590px);
  aspect-ratio:auto;
  transform:translateY(-50%);
  background:linear-gradient(140deg,#125563,#b18d62);
  -webkit-mask:url('images/hero-dna-watermark.png') center/contain no-repeat;
  mask:url('images/hero-dna-watermark.png') center/contain no-repeat;
  opacity:.085;
  filter:none;
  pointer-events:none;
}
html body .hero-persona > .container,
html body .hero-persona .hero-persona-inner {position:relative;z-index:1;}
html body .hero-persona{padding-top:clamp(116px,9.5vw,154px);}
html body .hero-persona--detail{padding-top:clamp(112px,8.7vw,150px);}

/* Phone/tablet layout: readable spacing and menu that contains all navigation links. */
@media(max-width:980px){
  html body .site-header .site-nav{
    position:fixed!important;
    z-index:2;
    inset:72px 0 0 0!important;
    width:100%!important;
    height:calc(100dvh - 72px)!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    padding:24px max(22px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))!important;
    background:linear-gradient(165deg,#fafbf9 0%,#f2f3ef 100%)!important;
    border-top:1px solid rgba(143,104,57,.10);
    box-shadow:0 28px 44px rgba(13,57,62,.12);
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
  }
  html body .site-header .site-nav > a:not(.nav-cta){
    font-size:clamp(16px,2.3vw,19px)!important;
    line-height:1.35!important;
    padding:15px 8px!important;
    border-bottom:1px solid rgba(143,104,57,.15)!important;
    white-space:normal;
    text-transform:none;
  }
  html body .site-header .site-nav > a.nav-cta {
    margin-top:18px!important;
    padding:15px 17px!important;
    min-height:52px!important;
    width:100%!important;
    justify-content:space-between!important;
    font-size:15px!important;
    border-radius:16px!important;
  }
  html body .site-header .nav-toggle{display:block!important;position:relative;z-index:3;}
  html body .hero-persona{padding-top:116px;}
  html body .hero-persona--detail{padding-top:106px;}
  html body .hero-persona::after{width:min(58vw,320px);height:480px;left:4%;top:32%;opacity:.068;}
  html body .hero-persona .hero-persona-visual{min-height:0!important;}
  html body .hero-persona .hero-product-stage{min-height:0!important;}
  html body .hero-persona .hero-product-main-card{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    margin:0 auto!important;
    width:min(100%,470px)!important;
    aspect-ratio:4 / 5;
  }
  html body .hero-persona .hero-product-floating--one{left:0;bottom:0;}
  html body .hero-persona .hero-product-floating--two{right:0;bottom:-14px;}
  html body .hero-persona .hero-product-badge{position:relative!important;right:auto!important;top:auto!important;max-width:470px!important;width:100%!important;margin:20px auto 0!important;text-align:left;}
}
@media(max-width:720px){
  html body .site-header,
  html body .site-header.scrolled{height:72px!important;}
  html body .site-header .brand img{width:42px!important;height:42px!important;}
  html body .site-header .brand strong{font-size:19px!important;}
  html body .site-header .brand small{font-size:9px!important;letter-spacing:.09em!important;}
  html body .hero-persona{padding:106px 0 54px!important;}
  html body .hero-persona--detail{padding:105px 0 52px!important;}
  html body .hero-persona .container{width:calc(100% - 36px);}
  html body .hero-persona-inner{gap:26px!important;}
  html body .hero-persona::after{top:210px;left:-12px;width:min(66vw,270px);height:360px;transform:none;opacity:.060;}
  html body .hero-persona-copy h1{max-width:100%;line-height:1.04!important;letter-spacing:-.025em!important;overflow-wrap:break-word;}
  html body .hero-persona-copy .hero-subline,
  html body .hero-persona-copy .detail-intro{font-size:15.5px!important;line-height:1.75!important;}
  html body .hero-factor-chips{margin-top:18px!important;gap:7px!important;}
  html body .hero-factor-chips li{font-size:12.5px!important;padding:8px 11px!important;}
  html body .hero-persona-actions{width:100%;gap:12px!important;}
  html body .hero-persona-actions .cta-v33,
  html body .hero-persona-actions .detail-hero-cta{width:100%;max-width:420px!important;min-height:50px!important;justify-content:center!important;}
  html body .hero-persona-visual{min-height:0!important;}
  html body .hero-persona .hero-product-stage{min-height:0!important;width:min(100%,440px)!important;padding-bottom:0;}
  html body .hero-persona .hero-product-main-card{aspect-ratio:5 / 5.5;max-width:100%!important;border-radius:22px!important;}
  html body .hero-persona .hero-product-floating--one{width:33%!important;left:0!important;bottom:66px!important;}
  html body .hero-persona .hero-product-floating--two{width:36%!important;right:0!important;bottom:64px!important;}
  html body .hero-persona .hero-product-badge{margin-top:18px!important;border-radius:16px;}
  html body .hero-persona .hero-product-caption{left:12px;top:12px;font-size:12px;}
  html body .hero-persona-phone,
  html body .hero-persona .detail-hero-phone{font-size:12.5px!important;text-align:left!important;overflow-wrap:anywhere;}
  html body .hero-persona .hero-scroll{position:static!important;display:grid!important;margin:27px auto 0!important;transform:none!important;background:rgba(18,62,73,.04)!important;border-color:rgba(18,62,73,.22)!important;}
  html body .hero-persona .hero-scroll svg{color:#184450!important;}
}
@media(max-width:390px){
  html body .hero-persona .container{width:calc(100% - 28px);}
  html body .hero-persona-copy h1{font-size:clamp(32px,10vw,40px)!important;}
  html body .hero-factor-chips li{font-size:12px!important;padding:7px 9px!important;}
  html body .site-header .brand small{font-size:8px!important;}
}
@media(prefers-reduced-motion:reduce){
  html body .site-header .site-nav{transition:none!important;}
}

/* Readability in the light personalized hero, including the second CTA. */
html body .hero-persona:not(.hero-persona--detail) .detail-hero-cta,
html body .hero-persona--detail .detail-hero-cta{
  color:#25505a!important;
  border-color:rgba(36,80,90,.3)!important;
  background:rgba(255,255,255,.58)!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
html body .hero-persona .detail-hero-cta:hover,
html body .hero-persona .detail-hero-cta:focus-visible{
  color:#103f49!important;
  border-color:#9b7953!important;
  background:#fff!important;
}
html body .hero-persona .detail-hero-cta svg{color:inherit!important;stroke:currentColor!important;}
html body .hero-persona .hero-scroll{
  background:rgba(255,255,255,.52)!important;
  border-color:rgba(35,82,91,.24)!important;
  box-shadow:0 8px 25px rgba(19,69,74,.07)!important;
}
html body .hero-persona .hero-scroll svg{color:#265a62!important;}

/* Some legacy detail-page CSS uses a dark background and centered title.
   Keep the NovoDailies hero aligned with the new premium light hero. */
html body.novodailies-only .detail-hero.hero-persona{
  background:linear-gradient(115deg,#fbfdfc 0%,#f4f9f7 45%,#eaf3f3 100%)!important;
}
html body.novodailies-only .detail-hero.hero-persona .detail-copy,
html body.novodailies-only .detail-hero.hero-persona .hero-persona-copy{
  text-align:left!important;
  align-items:flex-start!important;
  max-width:100%!important;
}
html body.novodailies-only .detail-hero.hero-persona .detail-copy h1{
  font-family:'Urbanist',sans-serif!important;
  font-size:clamp(2.8rem,5.8vw,5.4rem)!important;
  line-height:1.05!important;
  font-weight:300!important;
  letter-spacing:-.03em!important;
  text-align:left!important;
  color:#123e49!important;
  max-width:100%!important;
  opacity:1;
}
html body.novodailies-only .detail-hero.hero-persona .detail-intro{
  margin:1.35rem 0 0!important;
  max-width:41rem!important;
  text-align:left!important;
  color:#476971!important;
  font-size:clamp(1.06rem,1.7vw,1.28rem)!important;
}
html body.novodailies-only .detail-hero.hero-persona .breadcrumb,
html body.novodailies-only .detail-hero.hero-persona .breadcrumb a,
html body.novodailies-only .detail-hero.hero-persona .breadcrumb span{
  color:#56737b!important;
}
html body.novodailies-only .detail-hero.hero-persona .detail-hero-phone{
  text-align:left!important;
  margin:1rem 0 0!important;
  color:#446770!important;
}
html body.novodailies-only .detail-hero.hero-persona .detail-hero-phone a{
  color:#235560!important;
  text-decoration-color:rgba(35,85,96,.32)!important;
}
html body.novodailies-only .detail-hero.hero-persona .detail-hero-actions{
  margin:2rem 0 0!important;
  justify-content:flex-start!important;
}
html body.novodailies-only .detail-hero.hero-persona .hero-persona-kicker{
  color:#805b36!important;
  background:rgba(255,255,255,.75)!important;
  border-color:rgba(143,104,57,.18)!important;
}

@media(max-width:720px){
  html body.novodailies-only .detail-hero.hero-persona .detail-copy h1{
    font-size:clamp(2.35rem,11.2vw,3.25rem)!important;
  }
  html body.novodailies-only .detail-hero.hero-persona .detail-intro{
    font-size:15.5px!important;
    line-height:1.72!important;
  }
  html body.novodailies-only .detail-hero.hero-persona .hero-persona-kicker{
    font-size:11px!important;
    line-height:1.35!important;
    max-width:100%;
    text-align:left;
  }
}