/* Use display-format captures: tablet 1920 × 1077; original mobile app 590 × 1280. Keep the physical bezel visible. */
/* Shared product stage: upright devices, restrained depth, consistent baseline. */
.hero-shell{background:#2d3330}
.hero .hero-stage{perspective:none;padding:0;min-width:0}
.hero .hero-stage:before,.hero .hero-stage:after{display:none}
.hero .stage-label{margin:0 0 16px;color:#bac4bc}
.hero .stage-label>span:last-child{display:none}
.hero .stage-tabs{margin:0 0 8px;gap:4px}
.hero .stage-tabs button{border-radius:3px;border-color:transparent;padding:9px 12px;color:#bcc6bf}
.hero .stage-tabs button[aria-pressed=true]{background:#ffffff0d;border-color:#ffffff24;color:#fff}
.hero .stage-tabs button:hover{background:#ffffff0b;border-color:#ffffff30}
.hero .device-family{position:relative;isolation:isolate;width:calc(100% + 48px);margin:10px -24px 0;aspect-ratio:1.4}
.hero .device-family .hero-screen.laptop-scene{position:absolute;top:0;left:-9%;width:109%;margin:0;transform:none;transition:none;filter:drop-shadow(0 12px 10px #10161333)}
.hero .device-family .laptop-caption,.hero .stage-status{display:none}
.companion-device{position:absolute;transform:none;filter:drop-shadow(0 8px 5px #10161355)}
.companion-hardware{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.companion-phone{width:21%;aspect-ratio:2/3;left:10%;bottom:2.7%;z-index:5}
.companion-tablet{width:54%;aspect-ratio:3/2;right:-2%;bottom:0;z-index:4}
.companion-screen{position:absolute;display:block;border:0;padding:0;background:#edf0ef;overflow:hidden;cursor:zoom-in;box-shadow:inset 0 0 1px 1px #0009}
.companion-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.phone-screen{left:22.3%;top:8.6%;width:55.4%;height:78.7%;border-radius:8.5% / 4%;background:#e9eeee}
.phone-screen img{object-fit:cover;object-position:50% 50%}
.phone-screen:after{content:'';position:absolute;top:-1px;left:38%;width:24%;height:3.5%;border-radius:0 0 50% 50%;background:radial-gradient(circle at 50% 25%,#132027 0 12%,#06090a 15% 26%,#17191a 29%);pointer-events:none}
.tablet-screen{left:14.4%;top:19.6%;width:71.4%;height:60.1%;border-radius:.6%;background:#edf0ef}
.tablet-screen:after{content:'';position:absolute;inset:0;background:linear-gradient(140deg,#ffffff08,transparent 44%,#00000008);pointer-events:none}
.companion-screen:focus-visible{outline:3px solid #c7ed98;outline-offset:3px}
.hero .hero-bottom{margin-top:30px}
@media(min-width:941px){.hero{grid-template-columns:.9fr 1.15fr;gap:44px;min-height:590px;padding:46px 55px 40px}.hero h1{font-size:clamp(43px,4.2vw,65px)}.hero .hero-stage{padding:0;margin:0}.hero .hero-text{font-size:15px;max-width:460px}}
@media(min-width:1600px){.hero{min-height:660px;gap:64px;padding-block:55px}}
@media(max-width:940px){.hero .hero-stage{padding:0;margin-top:46px}.hero .device-family{width:100%;margin:12px 0 0;max-width:650px}.hero .stage-label,.hero .stage-tabs{margin-left:0;margin-right:0}}
@media(max-width:600px){.hero .hero-stage{margin-top:34px}.hero .stage-label{font-size:7px;margin-bottom:13px}.hero .stage-tabs button{font-size:9px;padding:8px 10px}.hero .device-family{width:calc(100% + 32px);margin:8px -16px 0;aspect-ratio:1.34}.hero .device-family .hero-screen.laptop-scene{left:-9%;width:109%;transform:none}.companion-phone{width:23%;left:7%;bottom:3.2%}.companion-tablet{width:58%;right:-2%;bottom:0}.companion-device{filter:drop-shadow(0 5px 3px #10161355)}}