/* Supplied PNGs already contain the iPhone frame. Only empty margins are cropped. */
.device-shot{position:relative;display:block;width:300px;aspect-ratio:1/2;flex:none;overflow:hidden;background:transparent;border:0;border-radius:0;box-shadow:none}
.device-shot>img,html body .screens .device-shot>img{position:absolute;width:428.571429%;max-width:none;height:auto;left:-164.285714%;top:-30.357143%;border:0;border-radius:0;box-shadow:none;filter:none;transform:none}
.visual>.device-shot{width:min(315px,60vw);z-index:2;transform:rotate(2deg)}
.feature-shot,html:not([data-theme="dark"]) .feature-shot{height:auto;min-height:540px;background:transparent;border-radius:0;overflow:visible}
.feature-shot>.device-shot{width:260px}
.screens>.device-shot{position:absolute;width:275px}
.screens>.device-shot:first-child{left:0;top:50px;transform:rotate(-6deg)}
.screens>.device-shot:last-child{right:5%;top:0;transform:rotate(5deg)}
.beta-panel>.device-shot{width:min(230px,100%)}
@media(max-width:600px){
 .feature-shot,html:not([data-theme="dark"]) .feature-shot{min-height:430px}
 .feature-shot>.device-shot{width:min(210px,100%)}
 .screens>.device-shot{width:min(210px,60%)}
}
@media(max-width:560px){.visual>.device-shot{width:260px;max-width:100%}}

/* Smooth only the two angled homepage screenshots at their final display size. */
.screens>.device-shot{overflow:visible}
html body .screens .device-shot>img{image-rendering:auto;backface-visibility:hidden;transform:translateZ(0);clip-path:inset(18.888889% 38.333333% 18.888889% 38.333333%)}
.screens>.device-shot:first-child{transform:rotate(-3deg)}
.screens>.device-shot:last-child{transform:rotate(3deg)}


/* Keep the supplied Beta screenshot on its own transparent background. */
.beta-page .beta-panel,
html:not([data-theme="dark"]) .beta-page .beta-panel{
  background:transparent;
  padding-left:0;
  padding-right:0;
}
.beta-page .beta-panel>.device-shot{background:transparent!important}
.beta-page .beta-panel>div{
  width:100%;
  padding:24px 28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(23,62,45,.28);
}
html:not([data-theme="dark"]) .beta-page .beta-panel>div{background:#edf1e8;color:var(--ink)}
html:not([data-theme="dark"]) .beta-page .beta-panel>div p{color:var(--muted)}