/* Real viewport captures in a frontal graphite iPhone presentation. */
.device-phone,
.hero-preview-main .device-phone,
.selected-picture>.device-phone,
.project-cover>.device-phone,
.study-screen>.device-phone{
 display:block;position:absolute;z-index:5;inset:auto;width:24%;height:auto;min-width:0;max-width:none;
 /* The hardware uses 70.6 × 146.6 mm; the website keeps its own native ratio. */
 aspect-ratio:70.6/146.6;box-sizing:border-box;margin:0;padding:0;
 border:0;border-radius:16% / 7.705%;
 background:linear-gradient(100deg,#62666b 0%,#b5b7bb 1%,#73767c 2%,#45484e 4%,#34373d 48%,#5c6066 96%,#a3a6ab 99%,#53575d 100%);
 box-shadow:inset 0 .7px 1px #e8eaee9e,inset 0 -.8px 1.5px #101318aa,0 7px 18px #07132338,0 1px 3px #07132366;
 overflow:visible;pointer-events:none;isolation:isolate;
 transform:none;rotate:none;translate:none;scale:none;transition:none;
 font-size:0;line-height:0;place-items:normal;
}
.device-phone::before{
 content:"";position:absolute;z-index:0;inset:.48% 1%;border-radius:15.3% / 7.36%;
 background:#050608;box-shadow:inset 0 0 1px #000;
}
.device-phone::after{content:none}
.device-phone .device-phone-screen{
 display:flex;flex-direction:column;position:absolute;z-index:1;inset:1.878% 3.9%;box-sizing:border-box;
 width:auto;height:auto;min-width:0;min-height:0;max-width:none;aspect-ratio:auto;
 margin:0;padding:0;border:0;border-radius:13.12% / 6.05%;
 overflow:hidden;background:#f7f7f5;box-shadow:none;
 transform:none;rotate:none;translate:none;scale:none;font-size:0;line-height:0;
}
.device-phone .device-phone-status,.device-phone .device-phone-home{
 display:block;position:relative;inset:auto;flex:0 0 auto;box-sizing:border-box;width:100%;height:auto;
 margin:0;padding:0;border:0;border-radius:0;background:#f7f7f5;box-shadow:none;transform:none;
}
.device-phone .device-phone-status{aspect-ratio:390/60;overflow:hidden;z-index:2}
.device-phone .device-phone-status>svg{display:block;width:100%;height:100%;max-width:none;margin:0}
.device-phone .device-phone-viewport{
 display:block;position:relative;inset:auto;flex:1 1 0;box-sizing:border-box;width:100%;height:auto;min-height:0;
 margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#f7f7f5;box-shadow:none;transform:none;
}
.device-phone .device-phone-viewport>img{
 position:absolute;inset:0 auto auto 0;display:block;box-sizing:border-box;width:100%;height:auto;
 min-width:0;max-width:none;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:0;
 object-fit:contain;object-position:left top;transform:none;rotate:none;translate:none;scale:none;transition:none;
}
.device-phone .device-phone-home{aspect-ratio:390/21}
.device-phone .device-phone-home::before{content:"";position:absolute;left:33%;right:33%;top:40%;height:18%;border-radius:100px;background:#14171b}
.device-phone .device-phone-button{
 display:block;position:absolute;z-index:-1;width:1.4%;height:6%;padding:0;margin:0;border:0;
 border-radius:1px;background:linear-gradient(90deg,#a5a7ad,#53575e 45%,#34383e);box-shadow:inset 0 0 .5px #c6c8cc;transform:none;
}
.device-phone .device-phone-mute{left:-1.5%;top:19%;height:3.5%}
.device-phone .device-phone-volume-up{left:-1.5%;top:27%}
.device-phone .device-phone-volume-down{left:-1.5%;top:35%}
.device-phone .device-phone-power{right:-1.5%;top:29%;height:11%}
.hero-preview-main{overflow:visible!important;border:0!important}
/* Keep the paired screens frontal, including the surrounding hero shell. */
.hero-stage,.hero-stage:hover,.hero-stage:focus-within,
.hero-stage .hero-preview-main{
 transform:none!important;rotate:none;translate:none;scale:none;transition:none;
}
.hero-preview-main>a{isolation:isolate}
.hero-preview-main .showcase-images{border-radius:4px;aspect-ratio:1.44!important}
.hero-preview-main .showcase-images>img{object-position:top!important}
.hero-preview-main .device-phone{width:25%;right:2.5%;bottom:3%}
.hero-preview-main .stage-open{left:12px;right:auto;bottom:12px;z-index:6;max-width:65%;opacity:1;transform:none}
.selected-picture{isolation:isolate}
.selected-picture>.device-phone{width:25%;right:4%;bottom:5%}
.selected-picture>span:not(.device-phone){right:auto;left:12px;bottom:12px;z-index:6}
.project-cover>.device-phone{width:25%;right:4%;bottom:5%}
.project-cover .cover-action{right:auto;left:14px;z-index:6;max-width:65%}
.study-screen{isolation:isolate;overflow:visible;aspect-ratio:1.44!important;margin-bottom:8px}
.study-screen>picture{overflow:hidden;border-radius:inherit}
.study-screen>.device-phone{width:24%;right:2.5%;bottom:3%}
.study-screen .study-screen-action{left:16px;right:auto;z-index:6;max-width:65%;opacity:1;transform:none}
.study-screen:hover .device-phone img,.selected-card a:hover .device-phone img{transform:none}
@media(max-width:700px){
 .hero-preview-main .device-phone{width:27%;right:2.5%}
 .hero-preview-main .stage-open{font-size:9px;padding:9px 10px;left:8px;bottom:8px;min-height:34px}
 .selected-picture>.device-phone{width:27%}
 .study-screen,.study-case--waypoint .study-screen{aspect-ratio:1.36!important;max-height:none}
 .study-screen>.device-phone{width:27%}
 .study-screen .study-screen-action{display:flex;font-size:9px;padding:8px 10px;gap:8px;left:8px;bottom:8px;min-height:32px}
}
/* Keep the full desktop composition and leave the appointment drawer visible. */
.project-cover .browser-shot img{aspect-ratio:1.44!important;object-fit:contain;object-position:left top}
[data-study="atelier-desk"][data-study-state="2"] .device-phone{left:2.5%;right:auto}
[data-study="atelier-desk"][data-study-state="2"] .study-screen-action{left:auto;right:16px}
@media(max-width:700px){[data-study="atelier-desk"][data-study-state="2"] .study-screen-action{right:8px}}
/* Real EduCompass screenshots use the shared iPhone shell; the viewer keeps
   the full capture while this fixed physical viewport crops only its bottom. */
.educompass-teaser .edu-teaser-phone,
.edu-phone .edu-screen-button{
 aspect-ratio:70.6/146.6;height:auto;padding:0;border:0;border-radius:0;
 background:transparent;box-shadow:none;overflow:visible;
}
.educompass-teaser .edu-teaser-phone>.device-phone,
.edu-phone .edu-screen-button>.device-phone{
 inset:0;width:100%;height:100%;
}
.edu-phone .edu-screen-open{z-index:6;bottom:14px;right:12px;max-width:calc(100% - 24px)}