/* One hinge at y=100%: lid bottom and deck top use exactly the same width and origin.
   Real intersecting CSS planes, then a single camera rotation on their assembly. */
.hero-v2 .desktop-product{transform:none!important;transform-style:preserve-3d;perspective:2000px;padding:0 0 29%;margin:0;overflow:visible;box-shadow:none}
.laptop-assembly{position:relative;width:100%;transform-style:preserve-3d;transform-origin:50% 100%;transform:translateY(calc(var(--float)*3px)) rotateX(-7deg) rotateY(calc(-8deg + var(--tilt)*1deg));will-change:transform}
.laptop-assembly .laptop-lid{position:relative;width:100%;box-sizing:border-box;transform:rotateX(8deg);transform-origin:50% 100%;border:2px solid #929a9c;border-bottom:2px solid #565f61;border-radius:16px 16px 5px 5px;padding:15px 11px 0;background:#111415;box-shadow:inset 0 0 0 2px #303637,0 0 0 1px #182325;backface-visibility:hidden}
.laptop-assembly .laptop-chin{height:20px}.laptop-assembly .laptop-base{position:absolute;top:100%;left:0;width:100%;height:auto;aspect-ratio:1.68;margin:0;box-sizing:border-box;border:1px solid #c5cccd;border-radius:3px 3px 12px 12px;clip-path:none;transform:rotateX(72deg);transform-origin:50% 0;transform-style:preserve-3d;background:linear-gradient(115deg,#9ba5a7,#d0d6d6 35%,#b6c0c2 80%,#96a2a6);box-shadow:inset 0 0 0 1px #e4e8e6;backface-visibility:hidden}
.laptop-hinge{position:absolute;top:-2px;left:4%;width:92%;height:3%;border-radius:0 0 5px 5px;background:linear-gradient(#1d2527,#657073,#2a3537)}
.laptop-keyboard{position:absolute;left:12%;right:12%;top:8%;height:52%;padding:1%;border-radius:6px;background:#899598;display:flex;flex-direction:column;gap:3%;box-shadow:inset 0 1px 4px #526164}
.key-row{display:flex;flex:1;gap:.8%;min-height:0}.key-row span{display:block;flex:1;border-radius:3px;background:linear-gradient(#24292a,#111718);box-shadow:0 1px 0 #657073,inset 0 1px 0 #454d4f}.key-row:first-child{flex:.55}.keyboard-bottom{padding:0 1%}.keyboard-bottom .space-key{flex:6}
.laptop-trackpad{position:absolute;left:34%;width:32%;top:66%;height:27%;border:1px solid #7e8c90;border-radius:5px;background:#b5c0c2;box-shadow:inset 0 1px 0 #d6dedd}
.speaker{position:absolute;top:11%;width:5%;height:44%;opacity:.42;background:radial-gradient(#45565c 1px,transparent 1px) 0 0/4px 4px}.speaker-left{left:4%}.speaker-right{right:4%}
.laptop-front{position:absolute;top:100%;left:-1px;width:calc(100% + 2px);height:7px;transform:rotateX(-90deg);transform-origin:50% 0;background:linear-gradient(#c2cbcd,#718087);border-radius:0 0 5px 5px;box-shadow:0 20px 35px #03171066}.laptop-front i{position:absolute;left:42%;top:0;bottom:auto;width:16%;height:3px;border-radius:0 0 6px 6px;background:#75878b}
@media(max-width:1000px){.hero-v2 .desktop-product{padding-bottom:28%}.laptop-keyboard{border-radius:3px}.key-row span{border-radius:2px}}
@media(max-width:700px){.hero-v2 .product-stage{padding-left:28px;padding-right:28px;gap:40px}.hero-v2 .desktop-product{transform:none!important;padding-bottom:30%}.laptop-assembly{transform:translateY(calc(var(--float)*2px)) rotateX(-6deg) rotateY(-6deg)}.laptop-assembly .laptop-lid{padding:9px 6px 0;border-radius:9px 9px 3px 3px;border-width:1px}.laptop-assembly .laptop-chin{height:13px}.laptop-trackpad{border-radius:2px}.laptop-front{height:4px}.speaker{background-size:2px 2px}.key-row span{border-radius:1px}}
body.reduced .laptop-assembly{transform:rotateX(-7deg) rotateY(-8deg);will-change:auto}@media(prefers-reduced-motion:reduce){.laptop-assembly{transform:rotateX(-7deg) rotateY(-8deg);will-change:auto}}

/* A single camera avoids compounding perspective through the stage and the laptop. */
.hero-v2 .product-stage{perspective:none}.hero-v2 .desktop-product{perspective:4200px;padding-bottom:34%}.laptop-assembly{transform:translateY(calc(var(--float)*3px)) rotateX(-3deg) rotateY(calc(-8deg + var(--tilt)*1deg))}
@media(max-width:700px){.hero-v2 .desktop-product{perspective:1800px;padding-bottom:29%}.laptop-assembly{transform:translateY(calc(var(--float)*2px)) rotateX(-3deg) rotateY(-6deg)}}
body.reduced .laptop-assembly{transform:rotateX(-3deg) rotateY(-8deg)}@media(prefers-reduced-motion:reduce){.laptop-assembly{transform:rotateX(-3deg) rotateY(-8deg)}}

/* The phone viewport now uses its actual frame size at every breakpoint. */
.hero-v2 .phone-product iframe{transform:none!important;position:static;width:100%;height:calc(100% - 32px)}