/* The user-supplied screenshot stays unchanged: crop and articulation in CSS only. */
.device-mask{position:absolute;pointer-events:none}
.hero-product{position:absolute;z-index:2;right:7vw;top:17%;width:clamp(310px,33vw,475px);margin:0}
.duo-cover{position:relative;width:100%;aspect-ratio:1119/1462;filter:drop-shadow(0 25px 45px #0008)}
.duo-cover,.duo-shot{clip-path:url(#duo-reference-outline);overflow:hidden}
.cover-art,.duo-shot img{position:absolute;left:-13.5836%;top:-3.00958%;width:133.6014%;height:auto;max-width:none;display:block}
.hero-product figcaption{display:flex;justify-content:space-between;gap:18px;font-size:11px;letter-spacing:1.2px;color:#c4d2db;margin:20px 3% 0;text-transform:uppercase}
.hero .intro{max-width:365px}.hero-copy{max-width:620px}.hero h1{font-size:clamp(80px,7.2vw,112px)}
.device-compatibility{max-width:360px;margin:20px 0 0;font-size:12px;line-height:1.7;color:#b0c3d1}
.duo-device{max-width:460px;aspect-ratio:1/1.15;perspective:2200px}
.duo-assembly{width:78%;left:7%;top:2%;aspect-ratio:1119/1462;transform:rotateX(-38deg) rotateY(-15deg);transform-style:preserve-3d}
.duo-half{padding:0;border:0;background:none;box-shadow:none;border-radius:0;transform-style:preserve-3d;overflow:hidden}
.duo-upper,.duo-lower{box-shadow:none;border-radius:0}
.duo-shot{position:absolute;left:0;width:100%;height:200%;pointer-events:none;transform:translateZ(.1px)}
.duo-upper .duo-shot{top:0}.duo-lower .duo-shot{top:-100%}
.duo-hinge{left:2.6%;right:2.6%;height:1px;background:#111b36;top:calc(50% - .5px);transform:translateZ(1px);box-shadow:none}
.duo-angle{left:calc(100% + 12px);transform:rotateY(15deg) rotateX(38deg);font-size:12px}
.hinge-layout{grid-template-columns:1fr 1.1fr;gap:35px}
.store-placeholder{display:flex;align-items:center;justify-content:center;gap:18px;width:fit-content;margin:32px auto 25px;padding:16px 25px;background:#ffffff04;border:1px solid #ffffff2b;border-radius:8px;color:var(--gold);font-size:13px}
.store-name{color:var(--text);font-size:19px;letter-spacing:-.4px}
@media(min-width:1600px){.hero-product{right:calc((100vw - 1400px)/2 + 90px);width:450px}}
@media(max-width:1100px){.hero-product{right:5vw;width:33vw;top:24%}.hero h1{font-size:82px}.hero .intro{max-width:330px}.hero-copy{max-width:520px}.hero-product figcaption{font-size:10px;letter-spacing:.7px}}
@media(max-width:800px){.hero{min-height:0;height:auto;max-height:none;padding-bottom:120px}.hero-copy{margin-bottom:0}.hero-product{position:relative;top:auto;left:auto;right:auto;width:70%;max-width:350px;margin:45px auto 40px}.hero .intro{max-width:440px}.hero-copy{max-width:570px}.hero-product figcaption{font-size:11px}.hinge-layout{grid-template-columns:1fr;gap:0}.duo-device{max-width:380px}.duo-assembly{width:78%;left:7%;transform:rotateX(-38deg) rotateY(-12deg)}.duo-angle{transform:rotateY(12deg) rotateX(38deg)}}
@media(max-width:540px){.hero-product{width:79%;max-width:290px;margin-top:35px;margin-bottom:35px}.hero h1{font-size:clamp(56px,16vw,72px)}.hero .intro{max-width:335px}.hero-product figcaption{font-size:10px;letter-spacing:.4px;gap:12px}.duo-device{max-width:350px;aspect-ratio:1/1.12}.duo-assembly{width:78%;left:6%;top:0}.duo-half{padding:0}.duo-hinge{left:2.6%;right:2.6%;height:1px}.duo-angle{left:calc(100% + 8px)}.device-compatibility{max-width:320px}}