/* The longevity page shares its components with the weight-loss page. */
.hero{background:#000 url(../images/longevity-hero.webp) center 10%/cover no-repeat;min-height:clamp(760px,68vw,1080px);display:flex;align-items:flex-end;padding:0}
.hero::before{inset:0;width:auto;height:auto;transform:none;border-radius:0;z-index:0;background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 28%,rgba(0,0,0,.3) 45%,rgba(0,0,0,0) 58%)}
.hero .wrap{position:relative;z-index:1;width:100%;max-width:none;padding-inline:var(--gutter)}
.hero-grid{grid-template-columns:1fr;align-items:end;padding:0 0 clamp(2.5rem,4vw,3.5rem)}
.hero h1{font-size:clamp(3.6rem,9vw,8.5rem);line-height:.92;letter-spacing:-.055em}
.hero-what{font-size:clamp(1.1rem,1.35vw,1.3rem);max-width:34em;margin-top:1.3rem;color:rgba(255,255,255,.88)}
.hero-join{font-size:1.2rem;color:rgba(255,255,255,.8)}
.hero-join b{color:#fff}
.hero-fine{color:rgba(255,255,255,.6)}
.hero h1,.hero-what,.hero-join{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.proof b{white-space:nowrap}
/* Five longevity treatments, with room for the full catalog names. */
.prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.prod-body p{margin-bottom:1.1rem}
.prod-body p + .btn{margin-top:auto}
.nasal-spray .cap{width:38%;height:26%;border-radius:8px 8px 2px 2px;position:relative}
.nasal-spray .cap::after{content:"";position:absolute;bottom:0;left:-55%;width:210%;height:25%;border-radius:4px;background:var(--c2)}
@media(max-width:1000px){
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{min-height:0;background-size:auto 480px;background-position:center top}
  .hero::before{background:linear-gradient(180deg,transparent 0,transparent 330px,#000 478px)}
  .hero-grid{padding-top:430px}
}
@media(max-width:640px){
  .prod-grid{grid-template-columns:minmax(0,1fr)}
}