/* VITAL SCIENCE V5 — contrast, image-art & mobile correction only.
   All order, pricing, tracking and Netlify behavior remains owned by existing code. */
:root{--vs-ink:#183a2b;--vs-soft:#f7f5ef;--vs-moss:#193c2e;--vs-light:#fffdf4;--vs-gold:#f1d59f}
/* Keep accessible reading size, while retaining compact spacing. */
body{color:#1c382b}
.section-desc,.mgk-intro{color:#345a43!important}
.hero-benefits li{font-size:16px!important;line-height:1.46!important;color:#f7f6e9!important;align-items:flex-start!important}
.hero-benefits li .check{flex:0 0 24px!important;width:24px!important;height:24px!important;background:#355d45!important;color:#f7d79d!important;font-weight:800!important}
.hero>.btn-primary{font-size:17px!important;font-weight:800!important}
/* Replace low-quality square-tablet illustration with compact typographic scientific graphic. */
.vs-formula-visual{isolation:isolate;display:grid!important;grid-template-columns:minmax(165px,.78fr) minmax(310px,1.22fr);gap:clamp(17px,3vw,34px)!important;align-items:center!important;justify-content:center!important;min-height:255px!important;padding:28px clamp(24px,5vw,58px)!important;background:radial-gradient(ellipse at 22% 49%,rgba(142,185,141,.18),transparent 45%),linear-gradient(128deg,#122f26 5%,#1c4937 75%,#28523e 100%)!important;border:1px solid #45654d!important;border-radius:24px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.11)}
.vs-formula-visual:before{width:430px!important;height:430px!important;inset:auto auto -240px -130px!important;border:1px solid rgba(234,225,187,.07)!important;pointer-events:none}
.vs-formula-rings{width:min(235px,100%)!important;height:auto!important;aspect-ratio:1!important;flex:initial!important;margin:0 auto!important;transform:none!important;border:1px solid rgba(236,228,188,.32)!important;box-shadow:0 0 0 28px rgba(230,226,172,.035),inset 0 0 45px rgba(144,190,143,.08)!important}
.vs-formula-rings:before{inset:21px!important;border-color:rgba(222,227,183,.23)!important}.vs-formula-rings:after{inset:49px!important;border-color:rgba(222,227,183,.22)!important}
.vs-formula-center{gap:3px!important}.vs-formula-center strong{font-family:Georgia,serif;font-size:clamp(66px,7.2vw,95px)!important;line-height:.91!important;letter-spacing:-.065em!important;color:#fffbeb!important}.vs-formula-center .vs-mini{font-size:11px!important;font-weight:700!important;letter-spacing:.18em!important;color:#e2d5ad!important}.vs-formula-center>span:last-child{font-size:12px!important;letter-spacing:.12em!important;color:#e7dfc6!important}
.vs-f-label{min-width:35px!important;width:35px!important;height:35px!important;font-size:12px!important;background:#f4f2e5!important;border:1px solid #faf7eb!important;color:#184230!important;box-shadow:0 3px 9px rgba(0,0,0,.20)!important}
.vs-fl1{left:-11px!important;top:31%!important}.vs-fl2{right:-13px!important;top:20%!important}.vs-fl3{left:18%!important;bottom:-12px!important}.vs-fl4{right:-13px!important;bottom:25%!important}
.vs-formula-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;position:relative;z-index:1}
.vs-formula-chip{min-height:92px;display:flex;align-items:center;gap:14px;padding:18px 18px;background:linear-gradient(150deg,rgba(255,255,255,.105),rgba(255,255,255,.035));border:1px solid rgba(236,239,220,.22);border-radius:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.vs-formula-chip b{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:#ebead5;color:#1c4c37;font-family:Georgia,serif;font-size:22px;font-weight:700;box-shadow:0 7px 18px rgba(0,0,0,.13)}
.vs-formula-chip span{color:#f9f8ed;font-size:15px;font-weight:750;line-height:1.2;letter-spacing:.045em}
.vs-formula-chip:nth-child(2) b{background:#f2deb6}.vs-formula-chip:nth-child(3) b{background:#d6e7d2}.vs-formula-chip:nth-child(4) b{background:#dce5e8}
/* Ensure all dark price card descendants have intentional, high-contrast colors. */
.price-card.best{background:linear-gradient(155deg,#183f30,#0f3227)!important;border:2px solid #caac71!important;box-shadow:0 15px 38px rgba(15,40,25,.18)!important;color:#fff9e9!important}
.price-card.best .price-name{color:#fffdf0!important;font-size:26px!important}
.price-card.best .price-pills{color:#dce9da!important;font-size:15px!important}
.price-card.best .price-discount-badge{background:#f0d39b!important;color:#1c3c2b!important}
.price-card.best .price-box-original{background:rgba(248,248,232,.09)!important;border:1px solid rgba(241,234,201,.4)!important}
.price-card.best .price-box-original .price-box-label{color:#f2ecd5!important;font-size:13px!important}
.price-card.best .price-box-val-original{color:#e6e5d4!important;font-size:18px!important}
.price-card.best .price-box-current{background:#f2d59d!important;border:1px solid #f6e4be!important}
.price-card.best .price-box-current .price-box-label{color:#234431!important;font-size:13px!important}
.price-card.best .price-box-current .price-box-val-current,.price-card.best .price-box-current .price-box-val-current span{color:#183b2a!important}
.price-card.best .price-savings-row{color:#f6dd9e!important;font-size:15px!important;font-weight:750!important}
.price-card.best .price-perday-pill{color:#f0e7d4!important;font-size:14px!important}
.price-card.best .price-social-proof{background:rgba(255,255,255,.085)!important;border:1px solid rgba(240,229,184,.14)!important;padding:12px!important}
.price-card.best .price-social-label{color:#fff8e6!important;font-size:14px!important;font-weight:700!important}
.price-card.best .price-social-count{color:#f3d18f!important;font-size:14px!important;font-weight:800!important}
.price-card.best .price-social-bar{background:rgba(255,255,255,.21)!important}
.price-card.best .price-features li{color:#f4f7ed!important;border-color:rgba(239,242,220,.23)!important;font-size:16px!important;line-height:1.42!important;align-items:flex-start!important;padding:10px 0!important;gap:10px!important}
.price-card.best .price-features .tick{color:#f2d59a!important;font-size:19px!important;font-weight:800!important;flex:none}
.price-card.best .btn-primary{background:#f2d59a!important;color:#183b2b!important;font-size:17px!important;min-height:54px!important}
.price-card .price-features li{font-size:15px!important;line-height:1.45!important}
.price-card .price-box-label{font-size:12px!important}.price-pills{font-size:14px!important}
/* Guarantee — light card must use dark text, not inherited white-on-light. */
.guarantee-card{background:linear-gradient(145deg,#f3f5e9 0%,#e8efe2 100%)!important;color:#173c2b!important;border:1px solid #bfcfbc!important;border-top:5px solid #be995b!important;border-radius:20px!important;box-shadow:0 14px 35px rgba(16,52,28,.08)!important;text-align:left!important;padding:30px 33px!important}
.guarantee-card::before{background:radial-gradient(circle,rgba(204,177,97,.17),transparent 69%)!important}
.guarantee-badge{margin:0 0 16px!important;width:58px!important;height:58px!important;background:#e5e0bf!important;box-shadow:none!important;font-size:27px!important}
.guarantee-card h3{font-family:Georgia,serif!important;color:#163d2b!important;font-size:clamp(27px,3.1vw,36px)!important;line-height:1.17!important;margin-bottom:13px!important}
.guarantee-card p{color:#30523d!important;font-size:17px!important;line-height:1.62!important;margin:0 0 17px!important}
.guarantee-card .guarantee-points{border-top:1px solid #cbd9c6!important;padding-top:5px!important}
.guarantee-card .g-point{color:#234936!important;font-size:16px!important;line-height:1.5!important;border-bottom:1px solid #cfddcb!important;padding:12px 0!important;gap:12px!important}
.guarantee-card .g-point .g-icon{font-size:23px!important}
/* Keep labels legible in other low-density info cards. */
.section .section-tag{color:#4a624b!important}.pain-grid .p-title{font-size:17px!important}.pain-grid .p-desc{font-size:15px!important;color:#3d5946!important}
.data-card,.mgk-info-card{color:#1c422d!important}
.data-card p,.data-card .data-desc{color:#365940!important}
.trust-item .t-label{font-size:14px!important;color:#2b4936!important}
.footer .footer-policies a{color:#f1d8ab!important}
/* Responsive: first optimize phone typography and density, not merely scale down. */
@media(max-width:1050px){.vs-formula-visual{grid-template-columns:minmax(150px,.9fr) minmax(260px,1.3fr)!important;padding:20px 23px!important}.vs-formula-chip{min-height:80px;padding:12px;gap:9px}.vs-formula-chip b{width:43px;height:43px;flex-basis:43px;font-size:20px}}
@media(max-width:700px){
 .notif-bar{font-size:12px!important}.hero h1{font-size:clamp(30px,8.3vw,38px)!important;line-height:1.14!important}.hero-sub{font-size:16px!important;color:#eff4e8!important}.hero-benefits{grid-template-columns:1fr!important;gap:4px!important;margin:12px 0 7px!important}.hero-benefits li{font-size:16px!important;line-height:1.43!important;padding:3px 0!important;gap:10px!important}.hero-benefits li .check{width:23px!important;height:23px!important;flex:0 0 23px!important}
 .section{padding:37px 17px!important}.section-desc,.mgk-intro{font-size:16px!important}.pain-grid .p-title{font-size:17px!important}.pain-grid .p-desc{font-size:15px!important}.pain-card{padding:14px 14px!important}.trust-item .t-label{font-size:13px!important}.trust-item{min-width:124px!important;flex-basis:124px!important}
 .vs-formula-visual{min-height:192px!important;padding:15px 15px!important;grid-template-columns:140px minmax(0,1fr)!important;gap:10px!important;border-radius:17px!important}
 .vs-formula-rings{width:132px!important;height:132px!important;transform:none!important;margin:0!important;box-shadow:0 0 0 15px rgba(230,226,172,.035),inset 0 0 30px rgba(144,190,143,.08)!important}
 .vs-formula-rings:before{inset:16px!important}.vs-formula-rings:after{inset:34px!important}.vs-formula-center strong{font-size:56px!important}.vs-formula-center .vs-mini{font-size:8px!important}.vs-formula-center>span:last-child{font-size:9px!important}
 .vs-f-label{height:25px!important;width:25px!important;min-width:25px!important;font-size:10px!important}.vs-fl1{left:-8px!important}.vs-fl2{right:-7px!important}.vs-fl3{bottom:-10px!important}.vs-fl4{right:-9px!important}
 .vs-formula-chips{gap:8px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.vs-formula-chip{padding:10px 5px!important;gap:5px!important;min-height:69px!important;border-radius:11px!important;flex-direction:column!important;justify-content:center!important}.vs-formula-chip b{width:35px!important;height:35px!important;flex:0 0 35px!important;font-size:16px!important}.vs-formula-chip span{font-size:11px!important;letter-spacing:.02em!important;line-height:1.15!important}
 .price-card.best .price-name{font-size:25px!important}.price-card.best .price-pills{font-size:15px!important}.price-card.best .price-social-label{font-size:13px!important}.price-card.best .price-social-count{font-size:13px!important}.price-card.best .price-features li,.price-card .price-features li{font-size:16px!important}.price-card.best .price-box-val-current{font-size:35px!important}.price-card.best .price-savings-row{font-size:14px!important}.price-card.best .price-perday-pill{font-size:13px!important}
 .guarantee-card{padding:22px 19px!important;border-radius:15px!important}.guarantee-card h3{font-size:29px!important;line-height:1.16!important}.guarantee-card p{font-size:16px!important}.guarantee-card .g-point{font-size:16px!important}
 .btn-header-cta{font-size:13px!important}.lp-quick-offer a{font-size:14px!important}.price-card .btn-primary{font-size:16px!important}
}
@media(max-width:375px){.vs-formula-visual{grid-template-columns:118px minmax(0,1fr)!important;padding:13px 10px!important;gap:8px!important}.vs-formula-rings{width:115px!important;height:115px!important}.vs-formula-center strong{font-size:51px!important}.vs-formula-chip span{font-size:10px!important}.vs-formula-chip{min-height:63px!important;padding:7px 3px!important}.vs-formula-chip b{height:30px!important;width:30px!important;flex-basis:30px!important}.hero-benefits li{font-size:15px!important}}

/* Final screenshot QA correction: original hero stylesheet used important order values,
   overriding V4's visual order and putting CTA below everything. */
.price-card.best{padding-top:63px!important}
.price-card.best::before{min-height:26px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:12px!important;line-height:1.2!important}
.price-card.best .price-discount-badge{position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:5px 10px!important;min-width:55px!important;flex:none!important;font-size:12px!important;white-space:nowrap!important}
@media(min-width:701px) and (max-width:1050px){#order .pricing-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.price-card.best{grid-column:1/-1!important}}
@media(max-width:700px){
.hero>.hero-badge{order:1!important}.hero>h1{order:2!important}.hero>.hero-sub{order:3!important}
.hero>.vs-hero-stage{order:4!important;height:239px!important;margin:3px auto 0!important}
.hero>.vs-hero-stage .vs-bottle{height:224px!important}
.hero>.btn-primary{order:5!important;margin:6px 0 0!important}
.hero>.hero-benefits{order:6!important}
.hero>.lp-hero-image-trigger{order:7!important;margin:6px 0 0!important}
.hero>.mgk-hero-nav{order:8!important}
}
@media(max-width:375px){.hero>.vs-hero-stage{height:225px!important}.hero>.vs-hero-stage .vs-bottle{height:208px!important}}
