/* Local, resolution-independent presentation frames. Original interface images
   remain separate and proportional. Device styling is illustrative, not a photo. */
.device-mockup{position:relative;width:100%;margin:0 auto 28px;padding:0 2% 2.1%;isolation:isolate}
.device-lid{position:relative;padding:2.1% 1.2% 1.4%;border:1px solid #777b80;border-radius:22px 22px 8px 8px;background:linear-gradient(115deg,#6c7074 0%,#202123 1%,#060708 2%,#111214 98%,#5f6368 99%,#a3a5a8 100%);box-shadow:inset 0 1px 1px #e6e7e9,0 1px 2px #0003}
.device-lid::before{content:"";position:absolute;inset:4px;border:1px solid #ffffff16;border-radius:18px 18px 5px 5px;pointer-events:none}
.device-camera{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:12%;height:2.7%;border-radius:0 0 9px 9px;background:#090a0c;z-index:2}
.device-camera::after{content:"";position:absolute;width:4px;height:4px;left:50%;top:40%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#27465c,#101820 50%,#060709 80%);box-shadow:0 0 0 1px #161a1d}
.device-mockup .screen-evidence{overflow:hidden;background:#e8e8e8;border:0;border-radius:8px 8px 1px 1px;padding:0}
.device-mockup .screen-evidence picture{display:block}
.device-mockup .screen-evidence img{display:block;width:100%;height:auto;object-fit:contain}
.device-base{position:absolute;bottom:0;left:.5%;width:99%;height:3.6%;border:1px solid #585b60;border-radius:3px 3px 11px 11px;background:linear-gradient(180deg,#85888c 0%,#4d5055 12%,#686b70 20%,#55585d 74%,#34373c 95%,#4c4f53 100%);box-shadow:inset 0 1px 0 #b6b8ba,0 12px 13px -12px #0009}
.device-base::before{content:"";position:absolute;top:-1px;left:43%;width:14%;height:29%;background:linear-gradient(180deg,#24262a,#56595e);border-radius:0 0 7px 7px;box-shadow:0 1px 0 #919499}
.device-base::after{content:"";position:absolute;bottom:-3px;left:11%;width:78%;height:3px;background:linear-gradient(90deg,#17181b 0 13%,transparent 13% 87%,#17181b 87%);border-radius:2px}
.device-buttons{display:none}
@media(max-width:760px){
.device-mockup{width:min(100%,340px);padding:0;margin-bottom:24px}
.device-lid{padding:10px;border:1px solid #85878b;border-radius:49px;background:linear-gradient(110deg,#a5a7aa,#54565a 9%,#1e2023 21%,#6d7074 43%,#b2b4b6 58%,#494c50 76%,#979a9e);box-shadow:inset 0 0 0 2px #282a2e,inset 0 0 0 4px #c6c8ca,0 14px 24px -16px #0007}
.device-lid::before{inset:5px;border:2px solid #070809;border-radius:44px}
.device-mockup .screen-evidence{padding-top:35px;padding-bottom:17px;border-radius:38px;background:#e8e8e8;box-shadow:0 0 0 3px #070809}
.device-mockup .screen-evidence img{aspect-ratio:390/844}
.device-camera{top:20px;width:25%;height:22px;border-radius:20px;background:#060708;box-shadow:inset 0 0 0 1px #121418}
.device-camera::after{left:auto;right:9px;top:7px;width:7px;height:7px;background:radial-gradient(circle at 35% 30%,#2c3d4d,#111722 45%,#080a10 70%)}
.device-base{left:36%;bottom:19px;width:28%;height:4px;border:0;border-radius:4px;background:#17181a;box-shadow:none}
.device-base::before,.device-base::after{display:none}
.device-buttons{display:block;position:absolute;top:17%;left:-2px;width:3px;height:7%;background:linear-gradient(90deg,#777,#c4c6c9,#383b40);border-radius:2px;box-shadow:0 65px 0 #8d9095}
.device-buttons::before{content:"";position:absolute;top:-41px;left:0;width:3px;height:20px;border-radius:2px;background:inherit}
.device-buttons::after{content:"";position:absolute;top:25px;left:calc(min(100vw - 48px,340px) + 0px);width:3px;height:70px;border-radius:2px;background:inherit}
}
@media(forced-colors:active){.device-lid{border:2px solid CanvasText}.device-base,.device-camera{background:CanvasText}.device-buttons{display:none}}