/* Portrait device mockup: both faces meet at the physical horizontal hinge.
   The complete native capture is preserved across the two clipped halves. */
.duo-feature{grid-template-columns:1.05fr 1fr;gap:20px}
.duo-visual{max-width:530px;padding:48px 34px 38px 12px}
.duo-device-stage{padding:12px 20px 26px;perspective:1400px;perspective-origin:50% 50%}
.duo-device{position:relative;aspect-ratio:2247/3093;transform:rotateY(-16deg);transform-style:preserve-3d}
.duo-device-half{position:absolute;left:0;width:100%;height:50%;transform-style:preserve-3d;backface-visibility:hidden}
.duo-device-top{top:0;transform-origin:50% 100%;transform:rotateX(-10deg)}
.duo-device-bottom{top:50%;transform-origin:50% 0;transform:rotateX(22deg)}
.duo-device-face{position:absolute;inset:0;overflow:hidden}
.duo-visual .duo-device-face img{position:absolute;left:0;top:0;display:block;width:100%;height:200%;max-width:none;border:0;border-radius:0;box-shadow:none}
.duo-visual .duo-device-bottom img{top:-100%}
.duo-device-top::after,.duo-device-bottom::after{content:"";position:absolute;left:5.34%;right:5.34%;height:2.5%;pointer-events:none}
.duo-device-top::after{bottom:0;background:linear-gradient(transparent,#05101929)}
.duo-device-bottom::after{top:0;background:linear-gradient(#030b1240,transparent)}
.duo-visual figcaption{padding-top:12px;font-size:.78rem}
@media(max-width:900px){
  .duo-feature{grid-template-columns:1fr;gap:0}
  .duo-visual{max-width:500px;padding:12px 34px 32px}
}
@media(max-width:480px){
  .duo-visual{padding:4px 16px 28px}
  .duo-device-stage{padding:8px 16px 18px;perspective:1000px}
  .duo-visual figcaption{font-size:.72rem}
}