/* One iPhone 17 geometry, matching the first video message.
   Apple: body 71.5 × 149.6 mm, display 1206 × 2622 px.
   Shared dimensions scale the device, never the original media's proportions. */
.visitor-flow{
 --phone-width:min(360px,calc((100svh - 200px)*.47794));
 --phone-metal:linear-gradient(110deg,#b6bbb9,#dde0de 10%,#89908d 50%,#d9dcda 90%,#8e9692);
 --phone-shadow:0 24px 50px -30px #15261f55,0 2px 6px #17261f14,inset 0 0 0 1px #747977;
 --phone-control:#65736b;
}
.visitor-flow .dark-block{
 --phone-metal:linear-gradient(110deg,#8e9792,#d6dcd8 10%,#757f79 50%,#cdd5d0 90%,#89958e);
 --phone-shadow:0 24px 50px -24px #0009,0 0 0 1px #dfe9e52e,inset 0 0 0 1px #d5ded780;
 --phone-control:#a7b6ae;
}
body.visitor-flow #main :is(.hero-selfie,.gm-figure,[data-lead-stage],.app-device,[data-gallery-stage]){
 width:var(--phone-width);max-width:calc(100% - 48px);min-width:0;
 margin-inline:auto;container-type:inline-size;
}
body.visitor-flow #main :is(.selfie-device,.proof-device,.phone-hardware){
 position:relative;box-sizing:border-box;width:100%;max-width:100%;min-width:0;
 height:auto;aspect-ratio:715/1496;padding:0;border:0;border-radius:14.5% / 6.93%;
 background:var(--phone-metal);box-shadow:var(--phone-shadow);transform:none;animation:none;
}
body.visitor-flow #main :is(.selfie-screen,.proof-screen,.phone-display){
 position:absolute;inset:auto;left:50%;top:50%;width:93.4%;height:auto;
 aspect-ratio:1206/2622;transform:translate(-50%,-50%);box-sizing:border-box;
 border:0;border-radius:12.8% / 5.89%;overflow:hidden;isolation:isolate;
 box-shadow:0 0 0 2px #161918;
}
/* App captures have no system bars. Give them a real safe area, rather than
   extending the body with extra bars or cropping the app navigation. */
body.visitor-flow #main .phone-display{display:grid;grid-template-rows:6.7% minmax(0,1fr) 3%;background:#fff}
body.visitor-flow #main .phone-status{height:auto;padding:0 7%;font-size:3.4cqw;align-items:center}
body.visitor-flow #main .phone-island{top:31.3%;width:27%;height:56.7%}
body.visitor-flow #main .phone-indicators{font-size:2.8cqw;letter-spacing:.05em}
body.visitor-flow #main .app-screens{height:100%;min-height:0;aspect-ratio:auto;background:#fff}
body.visitor-flow #main :is(.app-motion,.app-screen img){object-fit:contain;object-position:center;background:#fff}
body.visitor-flow #main .phone-home{height:auto}
body.visitor-flow #main .phone-home:after{width:30%;height:3px;bottom:35%}
/* Recorded system bars stay intact; no second island over screenshots. */
body.visitor-flow #main :is(.proof-screen>video,.proof-slide img){object-fit:contain;object-position:center}
body.visitor-flow #main .proof-gallery-screen{background:#111}
body.visitor-flow #main .proof-device:before,body.visitor-flow #main .selfie-side,body.visitor-flow #main .phone-key:not(.key-right){
 position:absolute;left:-2px;top:24%;width:3px;height:6%;border-radius:2px;background:#929895;box-shadow:0 40px 0 #929895;
}
body.visitor-flow #main .proof-device:after,body.visitor-flow #main .phone-key.key-right{
 position:absolute;left:auto;right:-2px;top:32%;width:3px;height:9%;border-radius:2px;background:#929895;box-shadow:none;
}
body.visitor-flow #main :is(.phone-media-toolbar button,.phone-media-info summary,.hero-selfie>.selfie-start,.selfie-credit summary){color:var(--phone-control)}
body.visitor-flow #main .dark-block .phone-media-caption{color:#a7b6ae}
/* Full 44px controls stay in the gutter; media and captions share a width. */
@media(max-width:820px){
 .visitor-flow{--phone-width:min(360px,calc(100vw - 104px),max(240px,calc((100svh - 200px)*.47794)))}
 body.visitor-flow #main :is(.hero-selfie,.gm-figure,[data-lead-stage],.app-device,[data-gallery-stage]){max-width:100%}
}
/* Long explanatory panels remain inside the screen and scroll if needed. */
body.visitor-flow #main .gm-auswahl{overflow-y:auto;scrollbar-width:thin}
body.visitor-flow #main .selfie-share-panel{max-height:calc(100% - 64px);overflow-y:auto}

/* Keep the existing scenario controls readable in narrow displays. */
@container(max-width:270px){
 body.visitor-flow #main .gm-auswahl{padding:12% 5% 9%;gap:6px}
 body.visitor-flow #main .gm-auswahl .gm-mode>button{min-width:0;padding-inline:4px;font-size:11px}
 body.visitor-flow #main .gm-kopf{margin-bottom:10px}
}

/* Clip on the display's own compositing layer, including accelerated Safari video.
   Border-radius alone can leak child video/transform layers on iOS. */
body.visitor-flow #main :is(.selfie-screen,.proof-screen,.phone-display){
 clip-path:inset(0 round 12.8% / 5.89%);
 -webkit-mask-image:-webkit-radial-gradient(white,black);
}