/* <device-frame> styles — phone bezel + screenshot fit */
.dvc {
  position: relative; flex-shrink: 0; background: #0c0c10; border-radius: 54px; padding: 13px;
  box-shadow:
    inset 0 0 0 2px #3b3b44, inset 0 0 0 4px #0c0c10, inset 0 0 0 6px #1b1b21,
    0 1px 3px rgba(0,0,0,.45), 0 44px 90px -34px rgba(13,13,17,.55), 0 16px 36px -22px rgba(13,13,17,.4);
}
.dvc-screen { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: var(--bg); }
.dvc.android { border-radius: 48px; }
.dvc.android .dvc-screen { border-radius: 34px; }
.dvc-btn { position: absolute; background: #17171c; }
.dvc-btn.vor { right: -3px; top: 150px; width: 3px; height: 54px; border-radius: 0 3px 3px 0; }
.dvc.android .dvc-btn.pwr { top: 214px; }
.dvc-btn.pwr { right: -3px; top: 176px; width: 3px; height: 80px; border-radius: 0 3px 3px 0; }
.dvc-btn.vu { left: -3px; top: 152px; width: 3px; height: 50px; border-radius: 3px 0 0 3px; }
.dvc-btn.vd { left: -3px; top: 214px; width: 3px; height: 50px; border-radius: 3px 0 0 3px; }
.dvc-btn.mt { left: -3px; top: 110px; width: 3px; height: 30px; border-radius: 3px 0 0 3px; }
.dvc.sz-hero { width: clamp(330px, 34vw, 404px); }
.dvc.sz-md { width: clamp(330px, 34vw, 404px); }

/* real-screenshot frames: screen height follows the image so nothing crops */
.dvc.shot { aspect-ratio: auto; height: auto; }
.dvc.shot .dvc-screen { height: auto; background: transparent; }
.dvc-img { display: block; width: 100%; height: auto; }

@media (max-width: 1024px) {
  .dvc.sz-hero, .dvc.sz-md { width: min(404px, 84vw); }
}