/* iPhone-style presentation around unmodified 390 × 844 screen captures. */
.iphone-frame, .phone-shot.iphone-frame {
  display: block; position: relative; box-sizing: border-box; aspect-ratio: auto;
  padding: 30px 6px 18px; border: 3px solid #626872; border-radius: 34px;
  background: #080d12; overflow: hidden;
  box-shadow: 0 0 0 1px #171a20, inset 0 0 0 2px #20262e, 0 20px 46px #0004;
}
.iphone-frame::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 42%; height: 19px; border-radius: 0 0 12px 12px; background: #020304; z-index: 2;
}
.iphone-frame::after {
  content: ''; position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 3px; border-radius: 10px; background: #e9edf1;
}
.iphone-frame img, .phone-shot.iphone-frame img {
  display: block; width: 100%; height: auto; border: 0; border-radius: 3px 3px 14px 14px;
  box-shadow: none; transform: none;
}
.iphone-status {
  position: absolute; inset: 8px 17px auto; display: flex; justify-content: space-between;
  color: #f5f6fa; font: 600 9px/1 Arial, sans-serif; letter-spacing: .03em;
}
.sgr-preview .iphone-frame { border-width: 2px; border-radius: 23px; padding: 21px 4px 12px; }
.sgr-preview .iphone-frame::before { height: 13px; border-radius: 0 0 9px 9px; }
.sgr-preview .iphone-frame::after { bottom: 4px; height: 2px; }
.sgr-preview .iphone-status { inset: 6px 11px auto; font-size: 6px; }