/* Preserve native horizontal navigation; typography and spacing use original block styles. */
@media(max-width:750px){
 #preview-products{display:flex;overflow-x:auto;gap:16px;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:14px;max-width:none}
 #preview-products .product-card{flex:0 0 88%;scroll-snap-align:start;min-width:0}
 #landing .timeline-cards,#landing .system-original-track{scroll-behavior:smooth;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
 #landing .system-original-card{scroll-snap-align:start}
 .lp-swipe-hint{display:block;font-size:12px;color:#657166;margin:12px 0 0}
}
@media(min-width:751px){.lp-swipe-hint{display:none}}
@media(prefers-reduced-motion:reduce){#landing #preview-products,#landing .timeline-cards,#landing .system-original-track{scroll-behavior:auto}}
/* Compact branded first screen, with the portrait below the centered title. */
.lp-brand-header{position:relative;height:76px;padding:12px 5%;background:#fff;border:0;border-radius:22px 22px 0 0;z-index:1}
.lp-brand-header img{display:block;width:150px;height:48px;object-fit:contain;object-position:left center}
#question-1 .hero-art h1{text-align:center;max-width:100%;font-size:clamp(32px,3.2vw,48px);line-height:1.15;letter-spacing:-1.2px;margin:0 auto}
#question-1 .hero-art{padding-top:32px}
#question-1 .bottle{object-position:center top}
@media(max-width:750px){
 .ribbon{font-size:12px;line-height:1.4;padding:10px 16px;min-height:40px}
 .ribbon span{margin-left:4px;white-space:nowrap}
 .lp-brand-header{height:60px;padding:8px 20px;border-radius:20px 20px 0 0}
 .lp-brand-header img{width:132px;height:44px;max-height:none}
 #question-1.hero{min-height:0;display:block}
 #question-1 .hero-art{height:clamp(300px,43svh,370px);min-height:0;padding:24px 16px 0}
 #question-1 .hero-art h1{font-size:clamp(27px,7.4vw,32px);line-height:1.16;letter-spacing:-.8px;max-width:370px}
 #question-1 .bottle{top:44px;bottom:auto;left:0;right:auto;width:100%;height:auto;max-width:none;object-fit:initial;transform:none}
 #question-1 .hero-art:after{background:linear-gradient(180deg,#d4d9cf 0%,#d4d9cfcc 24%,transparent 46%)}
 #question-1 .art-caption{left:20px;bottom:28px;padding:7px 10px;font-size:9px;line-height:1.5}
 #landing #question-1 .question{position:relative;margin-top:-20px;border-radius:24px 24px 0 0;background:#fff;padding:24px 20px 36px;justify-content:flex-start}
 #question-1 .steps{margin-bottom:16px}
 #question-1 .question h2{font-size:27px;line-height:1.2;margin-bottom:20px}
}
/* Compact quiz copy and a higher portrait on phones. */
@media(max-width:750px){
 #landing .question h2,#landing #question-1 .question h2{font-size:23px;line-height:1.2;margin-bottom:20px;letter-spacing:-.4px}
 #landing .choices button{font-size:13px;line-height:1.45;padding:12px 20px;min-height:50px}
 #landing .steps{font-size:14px}
 #question-1 .bottle{top:12px}
}
/* Let the first question finish the initial mobile viewport. */
@media(max-width:750px){
 #question-1 .hero-art{height:calc(100svh - 220px);min-height:300px}
}
/* Timeline slider: native swipe, discreet controls, no scroll track. */
.lp-timeline-controls{display:none}
@media(max-width:750px){
 #landing .timeline-cards{display:flex;overflow-x:auto;scrollbar-width:none;gap:16px;padding-bottom:0;scroll-snap-type:x mandatory}
 #landing .timeline-cards::-webkit-scrollbar{display:none;width:0;height:0}
 #landing .timeline-card{flex:0 0 min(85%,320px);scroll-snap-align:start;scroll-snap-stop:always;min-width:0}
 #landing .timeline-node{display:none}
 #landing .timeline-cards+.lp-swipe-hint{display:none}
 .lp-timeline-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}
 .lp-timeline-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #d5dccf;border-radius:50%;background:transparent;color:#243e32;font-size:22px;cursor:pointer}
 .lp-timeline-controls button:disabled{opacity:.3;cursor:default}
 .lp-timeline-controls button:focus-visible{outline:2px solid #243e32;outline-offset:3px}
 .lp-timeline-dots{display:flex;gap:8px}
 .lp-timeline-dots span{width:7px;height:7px;border-radius:50%;background:#d5dccf}
 .lp-timeline-dots span.is-active{background:#243e32}
}

/* Compact FAQ question headings on phones. */
@media(max-width:750px){
 #landing .faq summary{font-size:14px;line-height:1.45}
 #landing .faq details{padding:14px 0}
}
/* A continuous mobile transition from the final CTA into the app/footer. */
@media(max-width:750px){
 #landing .closing{background:linear-gradient(to bottom,#d5e6c0 0%,#d5e6c0 65%,#e2e7d9 100%);padding-bottom:48px}
 #landing + #t-footer.site-footer-original{margin-top:0;padding:0 0 40px!important;background:#e2e7d9;border-radius:0}
 #landing + #t-footer .site-footer-grid{gap:0}
 #landing + #t-footer .site-footer-app{border-radius:0;background:#e2e7d9}
 #landing + #t-footer .site-footer-app .site-footer-download{border-radius:35px;background:var(--ink);font-family:Arial,sans-serif}
 #landing + #t-footer .site-footer-details{border-radius:0;background:#e2e7d9}
}

/* Product cards use the same swipe/arrow navigation as the timeline. */
@media(max-width:750px){
 #landing #preview-products{scrollbar-width:none;padding-bottom:0;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 #landing #preview-products::-webkit-scrollbar{display:none;width:0;height:0}
 #landing #preview-products .product-card{scroll-snap-stop:always}
 #landing #preview-products+.lp-swipe-hint{display:none}
}

/* Unified mobile slider navigation, including the embedded review carousel. */
@media(max-width:750px){
 #landing .system-original-controls,#landing .system-original-track+.lp-swipe-hint{display:none!important}
 #landing .system-original-track{scroll-snap-type:x mandatory;scroll-behavior:smooth}
 #landing .system-original-card{scroll-snap-stop:always}
 #landing .lp-timeline-controls button{padding:0;line-height:1;font-family:Arial,sans-serif;flex:0 0 44px}
 #landing #reviews .sw-review-bottom{display:flex!important;align-items:center!important;justify-content:center!important;gap:18px!important;margin:20px 0 0!important;padding:0!important;min-height:44px}
 #landing #reviews .sw-swiper-button-prev,#landing #reviews .sw-swiper-button-next{position:relative!important;inset:auto!important;display:grid!important;place-items:center!important;width:44px!important;height:44px!important;flex:0 0 44px!important;margin:0!important;padding:0!important;border:1px solid #d5dccf!important;border-radius:50%!important;background:transparent!important;color:#243e32!important;box-shadow:none!important;transform:none!important}
 #landing #reviews .sw-swiper-button-prev{order:0}
 #landing #reviews .sw-swiper-button-next{order:2}
 #landing #reviews .sw-swiper-button-prev:before,#landing #reviews .sw-swiper-button-next:before{display:none!important}
 #landing #reviews .sw-swiper-button-prev:after,#landing #reviews .sw-swiper-button-next:after{position:static!important;display:block!important;width:auto!important;height:auto!important;margin:0!important;border:0!important;background:none!important;transform:none!important;font:22px/1 Arial,sans-serif!important;color:#243e32!important}
 #landing #reviews .sw-swiper-button-prev:after{content:'←'!important}
 #landing #reviews .sw-swiper-button-next:after{content:'→'!important}
 #landing #reviews .swiper-pagination{order:1!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;width:auto!important;flex:0 0 auto!important;margin:0!important;padding:0!important;inset:auto!important;transform:none!important;background:none!important}
 #landing #reviews .swiper-pagination-bullet{display:none!important;width:7px!important;height:7px!important;flex:0 0 7px!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:#d5dccf!important;opacity:1!important;transform:none!important}
 #landing #reviews .swiper-pagination-bullet.lp-dot-visible{display:block!important}
 #landing #reviews .swiper-pagination-bullet-active{background:#243e32!important}
 #landing #reviews .swiper-pagination-bullet:before,#landing #reviews .swiper-pagination-bullet:after{display:none!important}
 #landing #reviews .sw-review-bottom [class*="scrollbar"]{display:none!important}
 #landing #reviews *,#landing .system-original-track{scrollbar-width:none!important}
 #landing #reviews *::-webkit-scrollbar,#landing .system-original-track::-webkit-scrollbar{display:none!important;width:0;height:0}
}
@media(prefers-reduced-motion:reduce){#landing .system-original-track{scroll-behavior:auto}}
/* Match the source store blocks' mobile typography (site-shell/home styles). */
@media(max-width:750px){
 #landing .lp-evidence{--vm-font-body:VmFonts,Arial,sans-serif;font-family:VmFonts,Arial,sans-serif}
 #landing .lp-evidence .serum-research{font-family:VmFonts,Arial,sans-serif}
 #landing .lp-evidence .serum-research #results-title,
 #landing .lp-evidence .serum-research .section-head h2,
 #landing .lp-evidence .home-heading h2{font-family:VmFonts,Arial,sans-serif!important;font-size:clamp(20px,6.25vw,28px)!important;font-weight:500!important;line-height:1.2!important;letter-spacing:normal!important}
 #landing .lp-evidence .serum-research h3{font-family:VmFonts,Arial,sans-serif;font-weight:500}
 #landing .lp-evidence .serum-research .intro,
 #landing .lp-evidence .serum-research .section-head>p{font-family:VmFonts,Arial,sans-serif;font-size:clamp(11px,3.125vw,14px)!important;line-height:1.5!important}
 #landing .lp-evidence .serum-research .intro{margin-top:15px}
 #landing .lp-evidence .system-benefits-heading{display:block;margin:0 0 24px}
 #landing .lp-evidence .system-benefits-heading>p{font:400 13px/1.65 VmFonts,Arial,sans-serif;margin:17px 0 0}
 #landing .lp-evidence .serum-research .eyebrow,
 #landing .lp-evidence .home-eyebrow{font:400 10px/1.5 VmFonts,Arial,sans-serif;letter-spacing:.09em;margin:0 0 16px!important}
 #landing .lp-evidence .section-head{gap:16px 24px!important;margin-bottom:24px}
 #landing .lp-evidence .section-head .eyebrow{margin:0!important}
 #landing .lp-evidence .system-original-art .tn-atom{font-family:VmFonts,Arial,sans-serif!important}
}
@media(max-width:750px){
 #landing .lp-evidence .system-original-card{flex:0 0 280px;min-width:280px}
}
/* Keep the introductory ribbon visible throughout the landing. */
.ribbon{position:sticky;top:0;z-index:50}
html{scroll-padding-top:90px}
/* A compact, dismissible invitation shown after the quiz. */
.lp-quiz-prompt{position:fixed;right:24px;bottom:24px;z-index:40;display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;width:430px;max-width:calc(100% - 24px);padding:12px;background:#fff;color:var(--ink);border-radius:24px;box-shadow:0 6px 32px #253b3226;animation:lp-prompt-in .25s ease-out}
.lp-quiz-prompt-photo{min-height:190px;border-radius:16px;background:#fff url('assets/quiz-serum.jpg') 55% 72% / auto 340% no-repeat}
.lp-quiz-prompt-copy{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:7px 0}
.lp-quiz-prompt-title{font:400 19px/1.2 Arial,sans-serif;margin:0;padding-right:28px}
.lp-quiz-prompt-text{font:400 15px/1.35 Arial,sans-serif;color:#657166;margin:0;padding-right:12px}
.lp-quiz-prompt-start{font:400 16px/1.25 Arial,sans-serif;width:100%;min-height:44px;padding:12px 16px;margin-top:3px}
.lp-quiz-prompt-close{position:absolute;right:7px;top:7px;width:36px;height:36px;border:0;border-radius:50%;background:#f2f3ef;font:400 26px/1 Arial,sans-serif;display:grid;place-items:center;padding:0}
@media(max-width:750px){
 .lp-quiz-prompt{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:430px;grid-template-columns:30% minmax(0,1fr);gap:12px;padding:10px;border-radius:20px}
 .lp-quiz-prompt-photo{min-height:160px;border-radius:12px}
 .lp-quiz-prompt-copy{gap:8px;padding:5px 0}
 .lp-quiz-prompt-title{font-size:16px;padding-right:27px}
 .lp-quiz-prompt-text{font-size:13px;padding-right:4px}
 .lp-quiz-prompt-start{font-size:14px;padding:10px 14px}
 .lp-quiz-prompt-close{width:32px;height:32px;font-size:24px}
}
@keyframes lp-prompt-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.lp-quiz-prompt{animation:none}}

/* Benefits between the final headline and quiz CTA. */
#landing .lp-closing-benefits{list-style:none;display:grid;gap:14px;max-width:450px;margin:0 auto 30px;padding:0;text-align:left;font:400 16px/1.5 Arial,sans-serif}
#landing .lp-closing-benefits li{position:relative;padding-left:30px}
#landing .lp-closing-benefits li:before{content:'✓';position:absolute;left:0;top:3px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font:bold 12px/1 Arial,sans-serif}
@media(max-width:750px){#landing .lp-closing-benefits{font-size:14px;gap:12px;max-width:340px;margin-bottom:26px}}

/* Floating ingredient labels over the unchanged hero photograph. */
#question-1 .hero-ingredients{position:absolute;inset:0;z-index:2;pointer-events:none}
#question-1 .hero-ingredient{position:absolute;display:block;width:max-content;max-width:90%;padding:10px 16px;background:rgba(255,255,255,.94);border-radius:40px;box-shadow:0 10px 25px #253b3212;color:#466041;font:400 13px/1.3 Arial,sans-serif;animation:hero-ingredient-float 6s ease-in-out infinite}
#question-1 .hero-ingredient-capixyl{left:7%;top:44%}
#question-1 .hero-ingredient-procapil{right:5%;top:65%;animation-delay:-2s}
#question-1 .hero-ingredient-copper{left:7%;bottom:8%;animation-delay:-4s}
@media(max-width:750px){
 #question-1 .hero-ingredient{font-size:11px;padding:8px 12px}
 #question-1 .hero-ingredient-capixyl{left:6%;top:43%}
 #question-1 .hero-ingredient-procapil{right:5%;top:66%}
 #question-1 .hero-ingredient-copper{left:6%;bottom:32px}
}
@keyframes hero-ingredient-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){#question-1 .hero-ingredient{animation:none}}

.hero-title-mobile{display:none}
@media(max-width:750px){.hero-title-desktop{display:none}.hero-title-mobile{display:block}}