/* Native iPhone-style frames. The screen stays the original 750 × 1624 artwork. */
.sst-page .iphone-frame {
    position:relative;display:block;isolation:isolate;width:100%;height:auto;
    aspect-ratio:810 / 1684;margin:0;padding:0;border:0;line-height:0;
    border-radius:14.2% / 6.83%;overflow:visible;
    background:linear-gradient(115deg,#85868a 0%,#45474c 10%,#27292e 45%,#73777e 80%,#34363b 100%);
    box-shadow:inset 0 0 0 1px #23262b,inset 0 0 0 2px #a8a9ad,
        inset 0 0 0 3px #36393e,0 9px 18px -7px #172d4845;
}
.sst-page .iphone-frame img.iphone-screen {
    position:absolute;display:block;left:3.7037037%;top:1.7814727%;
    width:92.5925926%;height:auto;max-width:none;max-height:none;
    aspect-ratio:750 / 1624;object-fit:contain;margin:0;padding:0;
    border:0;border-radius:10.9333333% / 5.0492611%;background:transparent;
    box-shadow:0 0 0 1px #090a0c;filter:none;transform:none;
}
.sst-page .iphone-island {
    position:absolute;display:block;z-index:2;left:36.17284%;top:2.731591%;
    width:27.654321%;height:2.969121%;border-radius:999px;
    background:#090a0c;box-shadow:inset 0 0 0 1px #1b1c20;pointer-events:none;
}
.sst-page .iphone-island::after {
    content:"";position:absolute;right:6%;top:27%;height:46%;aspect-ratio:1;
    border-radius:50%;background:radial-gradient(circle at 35% 35%,#273c5e,#121721 60%,#090b10);
}
.sst-page .iphone-frame::before,
.sst-page .iphone-frame::after,
.sst-page .iphone-side-buttons::before,
.sst-page .iphone-side-buttons::after {
    content:"";position:absolute;width:.9%;border-radius:2px;
    background:linear-gradient(90deg,#777b82,#35383e);pointer-events:none;
}
.sst-page .iphone-frame::before { left:-.7%;top:12.2%;height:2.6%; }
.sst-page .iphone-frame::after { right:-.7%;top:20.8%;height:9.2%; }
.sst-page .iphone-side-buttons { position:absolute;inset:0;pointer-events:none; }
.sst-page .iphone-side-buttons::before { left:-.7%;top:17.6%;height:5.6%; }
.sst-page .iphone-side-buttons::after { left:-.7%;top:25.2%;height:5.6%; }

/* Remove the old white borders so every preview has one device frame. */
.sst-page .media-design-phone,
.sst-page .product-terminal .mini-phone,
.sst-page .design-terminal-screen {
    border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none;
    aspect-ratio:810 / 1684;
}
.sst-page .media-design-phone { height:100%; }
.sst-page .product-terminal .mini-phone { height:auto;margin:0; }
.sst-page .product-terminal .phone-picture { overflow:visible; }
.sst-page .product-design-tile,
.sst-page .product-design-gallery button,
.sst-demo .demo-card-design .demo-image {
    padding:0;border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none;
}
.sst-page .catalog-visual-design { padding-bottom:22px;align-items:center; }
.sst-page .catalog-visual-design>.iphone-frame {
    width:auto;height:100%;max-width:30%;flex:0 1 auto;
}
.sst-page .product-design-overview {
    border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;
}
.sst-page .product-design-gallery { padding:36px 20px;background:transparent; }
.sst-page .product-design-gallery>div { max-width:256px; }
.sst-page .demo-artwork { max-width:230px;width:100%;justify-self:center; }
.sst-page .demo-artwork-grid { padding-block:32px 24px; }

@media(max-width:680px) {
    .sst-page .product-terminal .phone-picture { height:auto;min-height:180px; }
    .sst-page .product-terminal .mini-phone { width:min(100%,80px); }
    .sst-page .design-terminal { padding-bottom:20px; }
    .sst-page .design-terminal-screen { transform:none;align-self:center; }
    .sst-page .product-design-gallery { padding:24px 8px;gap:12px; }
    .sst-page .demo-artwork-grid { padding:24px 13px 16px; }
    .sst-page .catalog-visual-design { padding:20px 18px; }
}

@media(max-width:360px) {
    .sst-page .catalog-visual-design>.iphone-frame { width:30%;max-width:78px;height:auto; }
}