/* V20: a shared centered composition; existing artwork and brand styling stay intact. */
html,body{min-width:0;max-width:100%}
.design-a .site-header>.shell,.design-b .site-header>.shell{max-width:1120px}
.design-a .hero>.shell,.design-b .hero>.shell{max-width:1120px}
@media(min-width:1181px){
 .design-a .hero-stage>.hero-copy,.design-b .hero-inner{max-width:1120px;width:calc(100% - 64px);margin-inline:auto}
 .design-a .hero-stage .hero-image,.design-b .hero-stage .hero-photo{left:calc(50% - 800px);width:1300px;max-width:none;right:auto;translate:none;object-fit:contain;object-position:center;mask-image:linear-gradient(90deg,#000 91%,transparent)}
 .design-a .hero-unit-card{right:max(32px,calc((100% - 1120px)/2));left:auto;width:280px;bottom:70px}
 .design-a .hero-copy{padding-top:52px}.design-a .hero-copy h1{width:54%}
 .design-b .hero-copy{max-width:490px;padding-top:48px}
 .design-b .hero-price{right:6px;bottom:78px}
 .design-a .hero-photo-button,.design-b .hero-photo-label{right:max(32px,calc((100% - 1120px)/2))}
 .design-a .site-nav,.design-b .site-header nav{gap:23px;font-size:16px}
 .design-a .header-row,.design-b .header-row{gap:22px}
}
.design-b .hero-stage>.hero-photo-label{position:absolute;z-index:2;bottom:22px;right:max(32px,calc((100% - 1120px)/2))}
@media(min-width:901px) and (max-width:1180px){
 .design-a .hero-stage>.hero-copy,.design-b .hero-inner{width:calc(100% - 80px);margin-inline:auto}
 .design-a .hero-unit-card{left:40px;width:min(430px,calc(100% - 598px))}
 .design-a .hero-copy h1{width:56%}
 .design-a .hero-stage:after{background:linear-gradient(90deg,#f7f4ebe6,#f7f4ebc0 29%,#f7f4eb30 47%,transparent 59%)}
 .design-b .hero-stage:after{background:linear-gradient(90deg,#fbf5dce6,#fcf8e4bc 29%,#fcf8e425 47%,transparent 59%)}
}
@media(min-width:701px) and (max-width:900px){
 .design-a .hero-stage>.hero-copy,.design-b .hero-inner{max-width:680px;width:calc(100% - 64px)}
 .design-a .hero-copy{padding:30px 0 20px}
 .design-a .hero-stage .hero-image,.design-b .hero-stage .hero-photo{height:360px;width:100%;object-fit:cover;object-position:right center;translate:none;left:auto}
 .design-b .hero-copy{padding:30px 0 22px}
 .design-b .hero-stage>.hero-photo-label{bottom:10px;right:20px;background:#fff9;padding:3px 8px;font-size:10px;margin:0}
}
@media(max-width:700px){
 .design-a .site-header>.shell,.design-b .site-header>.shell{width:calc(100% - 40px)}
 .design-a .hero-stage>.hero-copy,.design-b .hero-inner{width:calc(100% - 40px);max-width:520px;margin-inline:auto}
 .design-a .hero-stage,.design-b .hero-stage{height:auto;display:flex;flex-direction:column}
 .design-a .hero-copy{padding:22px 0 16px}
 .design-a .hero-copy>.eyebrow{font-size:14px;line-height:1.6;margin-bottom:13px}
 .design-a .hero-quantity-line{font-size:22px;line-height:1.5;margin-bottom:4px}
 .design-a .hero h1 .hero-money{font-size:clamp(54px,17vw,72px);line-height:1.12;margin:7px 0}
 .design-a .hero-money small{font-size:23px}
 .design-a .hero-copy .hero-money-label{font-size:22px;line-height:1.5;margin-top:8px}
 .design-a .hero-copy .hero-money-basis{font-size:13px;line-height:1.8;margin-top:12px}
 .design-a .hero-copy-actions{margin-top:13px}
 .design-a .hero-text-link{font-size:15px;min-height:42px;padding-bottom:6px}
 .design-a .hero-stage .hero-image,.design-b .hero-stage .hero-photo{position:relative;inset:auto;order:2;translate:none;width:100%;max-width:none;height:280px;object-fit:cover;object-position:right center;mask-image:none;margin:0;opacity:1}
 .design-a .hero-unit-card{width:calc(100% - 40px);max-width:480px;margin:0 auto;padding:15px 18px;gap:0 15px}
 .design-a .hero-unit-top{font-size:12px;padding-bottom:8px}
 .design-a .hero-unit-main{margin-top:8px}.design-a .hero-unit-main strong{font-size:38px}
 .design-a .hero-unit-main small{font-size:17px}
 .design-a .hero-unit-comparison{margin-top:9px;font-size:11px}.design-a .hero-unit-comparison b{font-size:22px}
 .design-a .hero-unit-foot{margin-top:10px;padding-top:4px}
 .design-a .hero-stage .hero-photo-button{font-size:10px;min-height:29px;padding-top:8px}
 .design-b .hero-inner{order:1;height:auto}
 .design-b .hero-copy{max-width:none;padding:22px 0 20px}
 .design-b .hero-copy>.eyebrow{font-size:14px;line-height:1.6;margin-bottom:12px}
 .design-b .hero h1{font-size:clamp(34px,9.8vw,43px);line-height:1.22;letter-spacing:-.07em}
 .design-b .hero-description{font-size:16px;line-height:1.75;margin-top:14px}
 .design-b .hero-reference-price{margin-top:12px;gap:10px}
 .design-b .hero-reference-price>span{font-size:13px}
 .design-b .hero-reference-price strong{font-size:37px}
 .design-b .hero-buttons{margin-top:15px;gap:10px 13px}
 .design-b .hero-buttons .button{min-height:48px;padding:12px 16px;font-size:15px;gap:16px}
 .design-b .hero-buttons .text-link{font-size:14px;min-height:42px}
 .design-b .hero-stage>.hero-photo-label{bottom:8px;right:12px;left:auto;margin:0;padding:3px 7px;background:#fffc;font-size:9px}
}
@media(max-width:365px){
 .design-a .hero-stage>.hero-copy,.design-b .hero-inner{width:calc(100% - 36px)}
 .design-a .hero-copy .hero-money-label{font-size:20px}
 .design-a .hero-stage .hero-image,.design-b .hero-stage .hero-photo{height:255px}
 .design-a .hero-unit-main strong{font-size:33px}.design-a .hero-unit-comparison{font-size:10px}
 .design-a .hero-unit-comparison b{font-size:19px}
 .design-b .hero-buttons{gap:5px 10px}.design-b .hero-buttons .text-link{font-size:13px}
}