:root{--header-offset:100px}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-offset);scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
html.lenis{scroll-behavior:auto}
.container{padding-left:max(clamp(24px,3vw,40px),env(safe-area-inset-left));padding-right:max(clamp(24px,3vw,40px),env(safe-area-inset-right))}
.hero-grid,.life-grid,.story-grid,.faq-grid,.final-inner,.peptide-grid{min-width:0}
.hero-copy,.hero-visual,.bundle-copy,.faq-heading,.faq-list,.peptide-content,.section-heading>*,.story-person>div{min-width:0}
.hero-trust,.viva-hero-product .hero-product-sub{flex-wrap:wrap}
.hero-secondary{max-width:100%;width:fit-content}
.hero-copy h1{text-wrap:balance}
.hero-lead{text-wrap:pretty}
.header-inner{gap:20px}
.desktop-nav{gap:clamp(14px,1.7vw,26px)}
.desktop-nav a{white-space:nowrap}
.header-right{flex-shrink:0}
.button{transition:background-color 160ms ease-out,transform 160ms ease-out}
.button:active{transform:scale(.98)}
dialog{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.dialog-close{width:44px;height:44px;display:grid;place-items:center;right:8px;top:8px}
.dialog-toolbar{position:sticky;top:12px;height:0;display:flex;justify-content:flex-end;z-index:5;pointer-events:none}
.dialog-toolbar .dialog-close{position:relative;right:-12px;top:0;flex-shrink:0;pointer-events:auto;background:#fff;border-radius:50%;box-shadow:0 2px 12px #112b5114}
.film-caption,.catalog-bottom,.benefits-action,.bundle-total,.footer-bottom{flex-wrap:wrap}
.comparison-help{text-wrap:pretty}
@media(min-width:961px){.mobile-menu{display:none}.desktop-nav a{display:block!important}}
@media(max-width:960px){
 :root{--header-offset:92px}
 .header-inner{height:76px;gap:12px}
 .desktop-nav,.region{display:none}
 .menu-toggle{display:block;min-width:44px;min-height:44px;padding:10px}
 .header-right{gap:8px}
 .header-right .button-small{min-height:44px;font-size:13px;padding:12px 16px;gap:10px}
 .header-right .button-small svg{width:18px;height:18px}
 .viva-logo img{width:128px;max-width:100%}
 .mobile-menu{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;border-bottom:1px solid var(--line);box-shadow:0 18px 28px #112b5110;padding:12px max(24px,env(safe-area-inset-right)) 18px max(24px,env(safe-area-inset-left))}
 .mobile-menu a{font-size:16px;min-height:48px;padding:13px 0}
 .hero-grid{grid-template-columns:1fr;gap:24px;min-height:0;padding-top:40px;padding-bottom:42px}
 .hero-copy{padding:0}
 .vivalab-page h1{font-size:clamp(38px,7vw,64px);max-width:760px}
 .hero-lead{font-size:17px;line-height:1.7;max-width:620px}
 .product-label{font-size:12px;flex-wrap:wrap;row-gap:8px}
 .hero-secondary{font-size:14px;padding:20px 0;min-height:44px}
 .hero-trust{font-size:13px;gap:14px 22px}
 .hero-note{font-size:12px;line-height:1.7;max-width:540px}
 .hero .button-large{font-size:16px;min-height:54px}
 .viva-hero-visual{width:100%;max-width:470px;height:500px;justify-self:center;margin:12px 0 0}
 .viva-hero-product .hero-product-name{font-size:20px}
 .viva-hero-product .hero-product-sub{font-size:13px;gap:6px 16px;line-height:1.6}
 .viva-quality{font-size:11px}
 .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-top:28px;padding-bottom:28px}
 .proof-brand{font-size:22px}
 .proof-brand>span,.proof-item small{font-size:12px;line-height:1.65}
 .proof-item{font-size:14px;align-items:flex-start;gap:12px}
 .proof-item>span{min-width:0}
 .section,.film-section,.story-section{padding-top:64px;padding-bottom:64px}
 .section-heading{display:block;margin-bottom:32px}
 .section-heading h2,.bundle-copy h2,.faq-heading h2,.film-heading h2,.story-heading h2{font-size:clamp(32px,5vw,44px)}
 .section-heading>p,.film-intro>p{font-size:16px;line-height:1.75;max-width:620px;margin-top:20px}
 .peptide-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:none}
 .peptide-card{display:flex;flex-direction:column;min-height:0;border-radius:24px}
 .peptide-photo{height:auto;aspect-ratio:1;flex-shrink:0}
 .peptide-photo>img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center}
 .peptide-category{left:14px;top:14px;right:auto;max-width:calc(100% - 28px);font-size:10px;padding:7px 10px;white-space:normal}
 .peptide-content{padding:22px;display:flex;flex-direction:column;flex:1}
 .peptide-content h3{font-size:24px}
 .peptide-format{font-size:14px;line-height:1.6;margin-top:8px}
 .fixed-strength{font-size:14px;min-height:38px}
 .peptide-content .strengths{margin-top:18px}
 .peptide-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:22px 0}
 .peptide-price strong{font-size:32px}
 .peptide-price>span{font-size:13px;margin:0}
 .peptide-content .button{min-height:52px;font-size:15px;gap:14px;padding:14px 18px;margin-top:auto}
 .peptide-content .button svg{width:20px;height:20px}
 .catalog-bottom p,.catalog-bottom .text-link{font-size:13px;line-height:1.75}
 .catalog-bottom .text-link{min-height:44px}
 .film-duration,.film-caption p{font-size:13px}
 .film-caption .text-link{font-size:14px;min-height:44px}
 .film-start{font-size:14px}
 .film-corner{font-size:11px}
 .story-grid{grid-template-columns:1fr;gap:36px}
 .story-visual{position:static;max-width:480px;width:100%;justify-self:center}
 .story-copy{max-width:680px;width:100%;justify-self:center}
 .story-heading>p{font-size:16px}
 .story-heading-meta .content-kicker{font-size:13px}
 .story-demo-badge{font-size:11px}
 .comparison-label{font-size:12px}
 .comparison-watermark{font-size:10px}
 .comparison-help{font-size:12px;line-height:1.75}
 .story-person{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 12px;align-items:center}
 .story-avatar{grid-row:span 2;width:44px;height:44px}
 .story-person h3{font-size:20px}
 .story-person>div>span{font-size:12px;line-height:1.6}
 .story-period{grid-column:2;margin-left:0;font-size:13px}
 .story-copy blockquote{font-size:clamp(22px,3.5vw,28px);line-height:1.5}
 .story-copy>p,.story-details>div>p{font-size:16px;line-height:1.8}
 .story-metrics{gap:12px}
 .story-metrics>div>span{font-size:12px;min-height:36px;line-height:1.5}
 .story-metrics strong{font-size:clamp(30px,6vw,40px);white-space:nowrap}
 .story-metrics small{font-size:13px;margin-left:3px}
 .story-timeline>div{grid-template-columns:80px minmax(0,1fr);gap:12px}
 .story-month{font-size:12px;line-height:1.5}
 .story-timeline strong{font-size:16px;line-height:1.5}
 .story-timeline p{font-size:14px;line-height:1.75}
 .story-details summary{font-size:15px;min-height:56px}
 .story-actions .button{font-size:15px;min-height:52px}
 .story-actions .text-link{font-size:14px;min-height:44px}
 .story-disclosure{font-size:12px;line-height:1.8}
 .benefit-grid{grid-template-columns:1fr;gap:28px}
 .benefit{padding:0 0 28px!important;border-left:0!important;border-bottom:1px solid var(--line);display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 18px}
 .benefit-icon{grid-row:span 3;margin:0;width:48px;height:48px}
 .benefit h3{font-size:21px}
 .benefit p{font-size:15px;line-height:1.8}
 .benefit-phrase{font-size:13px;line-height:1.7}
 .benefits-action p{font-size:14px;max-width:none}
 .benefits-action .text-link{font-size:14px;min-height:44px}
 .viva-sets .life-grid{grid-template-columns:1fr;gap:36px}
 .set-visual{width:100%;max-width:580px;height:430px;justify-self:center}
 .set-photo-label{font-size:12px}
 .set-saving-card>span,.set-saving-card>small{font-size:12px;line-height:1.6}
 .bundle-copy>p{font-size:16px;line-height:1.8;max-width:680px}
 .bundle-controls>label,.bundle-strength-row>span{font-size:14px;line-height:1.6}
 .bundle-controls>select{height:52px;font-size:16px}
 .bundle-quantities>button{min-height:74px;padding:14px 8px}
 .bundle-quantities strong{font-size:14px}
 .bundle-quantities span{font-size:12px}
 .bundle-total{gap:14px}
 .bundle-total strong{font-size:36px}
 .bundle-total>div>span{font-size:13px}
 .bundle-comparison del{font-size:16px}
 .viva-sets .bundle-comparison>span{font-size:12px!important;line-height:1.6}
 .viva-sets .bundle-saved{font-size:15px!important}
 .viva-sets .bundle-micro{font-size:12px!important}
 .bundle-copy .button{font-size:16px;min-height:54px}
 .steps{grid-template-columns:1fr;gap:28px}
 .steps article{padding-left:66px;min-height:100px}
 .steps article:not(:last-child):after{left:23px;top:48px;bottom:-28px;right:auto;width:1px;height:auto}
 .step-number{position:absolute;left:0;top:0;width:46px;height:46px;font-size:20px}
 .steps h3{font-size:21px;padding-top:8px;margin-bottom:12px}
 .steps p{font-size:15px;line-height:1.75;max-width:none}
 .how-cta{flex-wrap:wrap}
 .how-cta>span{font-size:13px;line-height:1.6}
 .how-cta .button{font-size:15px;min-height:52px}
 .reassurance-inner{flex-wrap:wrap;align-items:flex-start}
 .reassurance-inner>div:nth-child(2){flex:1;min-width:180px}
 .reassurance h2{font-size:24px}
 .reassurance p{font-size:14px;line-height:1.75}
 .reassurance .text-link{font-size:15px;min-height:44px;margin-left:0}
 .faq-grid{grid-template-columns:1fr;gap:28px}
 .faq-heading p{font-size:16px;line-height:1.75}
 .faq-list summary{font-size:16px;line-height:1.6;min-height:64px;gap:16px}
 .faq-list details>p{font-size:15px;line-height:1.8}
 .final-inner{grid-template-columns:1fr;gap:36px}
 .final-inner h2{font-size:clamp(38px,6vw,54px)}
 .final-small{font-size:13px}
 .final-inner p{font-size:16px}
 .final-inner .button-large{font-size:16px;min-height:54px}
 .final-sets-link{font-size:13px;line-height:1.75}
 .final-vials{max-width:500px;width:100%;justify-self:center;margin:8px 0 24px}
 .final-vials>div{min-width:0}
 .final-vials span{font-size:11px}
 .footer-top p,.footer-top>span,.footer-bottom,.footer-legal{font-size:12px;line-height:1.7}
 .footer-bottom{row-gap:18px}
 .footer-bottom a,.footer-legal{display:inline-flex;align-items:center;min-height:44px}
 .benefit a{min-height:44px;display:flex;align-items:center}
 .medical-warning{font-size:16px}
 .footer-medical>p:not(.medical-warning){font-size:12px;line-height:1.8}
 .viva-order-dialog{padding:24px}
 .viva-order-dialog .dialog-product{height:clamp(120px,25vh,200px);height:clamp(120px,25dvh,200px)}
 .viva-order-dialog h2{font-size:30px}
 .viva-order-dialog>p{font-size:15px}
 .dialog-price-line strong{font-size:32px}
 .dialog-price-line>span{font-size:13px}
 .viva-order-dialog .button{font-size:15px;min-height:52px}
 .viva-order-dialog .dialog-handoff,.dialog-research{font-size:12px}
 .info-dialog p{font-size:15px}
}
@media(max-width:760px){
 .mobile-sticky{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));gap:12px}
 .mobile-sticky>span{font-size:18px}
 .mobile-sticky small{font-size:11px}
 .mobile-sticky .button{font-size:14px;min-height:48px;padding:12px 22px;gap:12px}
 .footer-medical{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
 html{scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}
@media(max-width:639px){
 .header-inner{height:72px}
 .hero-grid{padding-top:34px;gap:16px}
 .vivalab-page h1{font-size:clamp(36px,9vw,52px)}
 .hero-lead{font-size:16px}
 .viva-hero-visual{height:clamp(330px,105vw,480px);margin-top:8px}
 .hero-main-vial{top:22px}
 .hero-mini-left{top:36%}
 .hero-mini-right{top:50%}
 .viva-hero-product{width:90%;left:5%;padding:18px}
 .viva-hero-product .hero-product-name{font-size:18px}
 .viva-hero-product .hero-product-sub{font-size:12px}
 .viva-quality{font-size:10px;top:48px;padding:10px 12px}
 .section,.film-section,.story-section{padding-top:52px;padding-bottom:52px}
 .section-heading h2,.bundle-copy h2,.faq-heading h2,.film-heading h2,.story-heading h2{font-size:clamp(30px,7.5vw,38px)}
 .section-heading>p,.film-intro>p{font-size:15px}
 .peptide-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
 .peptide-content{padding:22px}
 .film-caption{display:flex;align-items:flex-start;gap:8px}
 .film-corner{font-size:10px;padding:6px 9px}
 .film-play-icon{width:58px;height:58px}
 .film-start{font-size:12px;gap:10px}
 .story-copy>p,.story-details>div>p{font-size:15px}
 .story-metrics strong{font-size:32px}
 .story-metrics>div>span{font-size:11px}
 .story-actions{gap:12px}
 .story-actions .button{width:100%}
 .comparison-watermark{font-size:10px;padding:7px}
 .benefit{grid-template-columns:40px minmax(0,1fr);gap:0 14px}
 .benefit-icon{width:40px;height:40px}
 .benefit h3{font-size:20px}
 .set-visual{height:350px}
 .set-saving-card{width:190px}
 .bundle-quantities{gap:7px}
 .bundle-quantities strong{font-size:13px}
 .bundle-total strong{font-size:32px}
 .bundle-strength-row{align-items:flex-start}
 .bundle-strength-row>span{max-width:170px}
 .reassurance-inner{gap:14px}
 .reassurance-icon{display:none}
 .reassurance-inner>div:nth-child(2){width:100%;min-width:0;flex-basis:100%}
 .reassurance .text-link{margin-left:0}
 .final-vials{gap:8px}
 .final-vials>div{padding:5px 4px 12px}
 .final-vials span{font-size:10px}
 .footer-top{gap:16px}
 .footer-top p{width:100%}
}
@media(max-width:399px){
 .viva-logo img{width:118px}
 .header-right .button-small svg{display:none}
 .header-right .button-small{padding-inline:14px;font-size:12px}
 .hero-trust{font-size:12px}
 .proof-grid{grid-template-columns:1fr;gap:20px}
 .proof-item{font-size:14px}
 .peptide-content{padding:20px}
 .bundle-quantities strong{font-size:12px}
 .bundle-quantities>button{padding-inline:4px}
 .bundle-total{align-items:flex-start}
 .bundle-total strong{font-size:30px}
 .story-metrics strong{font-size:30px}
 .story-metrics small{font-size:12px}
 .story-timeline>div{grid-template-columns:70px minmax(0,1fr);gap:10px}
 .story-month{font-size:11px}
 .mobile-sticky .button{padding-inline:18px}
 .mobile-sticky small{font-size:10px}
 .final-vials span{font-size:9px}
}
@media(hover:none){.button:hover{transform:none}.film-start:hover .film-play-icon{transform:none}.button:active{transform:scale(.98)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button:active{transform:none}}