/* ================= Vi Peel page (shares the laser + lip + Morpheus8 building blocks) ================= */

/* two price cards, centered */
.vp-prices{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}
@media(max-width:600px){.vp-prices{grid-template-columns:1fr}}

/* hero shows a photo instead of a video */
.lp-reel img{position:relative;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;border-radius:26px}
@media(max-width:860px){.lp-reel img{border-radius:20px;object-position:50% 35%}}
/* shorter banner frame for the photo (desktop; phones already use 4:5) */
@media(min-width:861px){.lp-hero .lp-reel{aspect-ratio:4/5;max-width:400px}}
@media(max-width:860px){.lp-hero .lp-reel{aspect-ratio:1/1}.lp-reel img{object-position:50% 45%}}
/* booking button at the bottom of each price card */
.vp-book{margin-top:auto;align-self:stretch;justify-content:center;text-align:center}
.lp-card p:has(+.vp-book){margin-bottom:22px}
/* phones: "Choose your" / "peel plan" on two lines */
@media(max-width:600px){.vp-split em{display:block}}
/* "What is Vi Peel" video: wider and shorter on desktop */
@media(min-width:861px){.m8-watch .m8-reel{max-width:420px;aspect-ratio:4/5}}
/* banner headline: longer first line scales down so it clears the photo and fits phones */
@media(min-width:601px){.lp-hero h1.vp-h1{font-size:clamp(34px,4vw,58px)}}
@media(max-width:600px){.lp-hero h1.vp-h1{font-size:min(36px,calc((100vw - 40px) * .082))}}
/* peel types + concerns cards, results checklist */
.lp-goals.vp-types{grid-template-columns:repeat(5,1fr)}
.lp-goals.vp-concerns{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.lp-goals.vp-types,.lp-goals.vp-concerns{grid-template-columns:1fr 1fr}}
.vp-results{max-width:720px;margin:32px auto 40px}