/* The single iPhone plays the uploaded recording at its native proportions. */
.hero-video-stage{display:flex;align-items:center;justify-content:center;justify-self:center;align-self:stretch;width:100%;min-height:0;min-width:0;padding:clamp(14px,2svh,26px) 0 clamp(12px,2svh,24px)}
.video-device{box-sizing:border-box;flex:0 0 auto;position:relative;height:min(52svh,520px);aspect-ratio:512/1108;max-width:100%;padding:6px;background:linear-gradient(112deg,#cfd3d9,#4f535a 8%,#101216 16%,#363b42 85%,#c1c5cd);border-radius:clamp(24px,2.6vw,38px);box-shadow:0 22px 50px -19px rgba(12,20,35,.31),0 0 0 1px rgba(78,84,92,.7)}
.video-device::before{content:"";position:absolute;top:2.2%;left:36%;width:28%;height:2.7%;border-radius:999px;background:#101115;z-index:2}
.hero-demo{display:block;height:100%;width:100%;max-width:none;max-height:none;object-fit:contain;border-radius:clamp(20px,2.4vw,34px);background:#fff}
/* Keep the original photos from both transformations, grouped before and after. */
.potential-card .transformation-visual{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;padding:15px 0 27px}
.potential-card .transformation-pairs{display:grid;width:min(100%,275px);min-height:0;grid-template-rows:1fr 1fr;gap:13px}
.potential-card .transformation-pair{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;gap:10px;min-width:0}
.potential-card .transformation-pair figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;min-width:0}
.potential-card .transformation-pair img{display:block;width:100%;height:170px;max-width:100%;object-fit:cover;object-position:center 31%;border-radius:13px;background:#050608;filter:none;box-shadow:0 8px 22px rgba(0,0,0,.2)}
.potential-card .transformation-pair:nth-child(2) img{object-position:center 38%}
.potential-card .transformation-pair figcaption{font:500 11px/1.2 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:#bdc2cb;letter-spacing:.01em}
@media(max-width:800px){
 .hero-video-stage{flex:1 1 auto;min-height:0;align-self:stretch;padding:clamp(14px,2svh,22px) 0 clamp(10px,2svh,20px)}
 .video-device{height:min(50svh,460px);border-radius:30px;padding:5px}
 .hero-demo{border-radius:25px}
 .potential-card .transformation-pairs{width:min(100%,270px)}
}
@media(max-width:500px){
 .video-device{height:min(45svh,400px);border-radius:25px;padding:4px}
 .hero-demo{border-radius:21px}
 .potential-card .transformation-pair img{height:178px}
}
@media(prefers-reduced-motion:reduce){.video-device{transition:none}}