/* iPhone device frame (2026-07-14) — wraps an app SCREENSHOT in an Apple-style
   bezel + Dynamic Island + side buttons so it reads instantly as "a real iOS app",
   not a bare screenshot. Aspect-agnostic: the screen sizes to the image, so both
   a true-phone-aspect shot and a wider annotated scene both look framed. Pure CSS,
   no new binary assets, themes with the site's dark glass. Accessible: the <img>
   keeps its own alt; the frame chrome is decorative (aria-hidden). */

.device-frame {
    position: relative;
    margin: 0 auto;
    max-width: 300px;              /* default phone width; override per-instance */
    padding: 11px;                 /* the bezel thickness */
    background: linear-gradient(155deg, #26262b 0%, #101013 52%, #08080a 100%);
    border-radius: 46px;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.05),   /* inner bezel highlight */
        0 1px 2px rgba(255, 255, 255, 0.12),          /* top edge catch-light */
        0 30px 55px -22px rgba(0, 0, 0, 0.75);        /* lift off the page */
}

/* The screen: clips the screenshot to rounded corners over a black base. */
.device-frame__screen {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 36px;
    background: #000;
}

.device-frame__screen > img {
    display: block;
    width: 100% !important;        /* beat any per-image width/max-width (e.g. the */
    max-width: 100% !important;    /* guidance img's width:260px; max-width:60%) — */
    height: auto !important;       /* it must fill the screen inside the frame */
    border: 0 !important;
    border-radius: 0;              /* the screen clips; the img must not double-round */
    box-shadow: none !important;   /* the frame provides the depth, not the img */
}

/* Dynamic Island — a black pill near the top of the screen (sits over the shot's
   status-bar strip, exactly like a real device frame). */
.device-frame__island {
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 82px;
    height: 20px;
    background: #000;
    border-radius: 999px;
    z-index: 3;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

/* Side buttons — subtle nubs on the titanium rail. Decorative. */
.device-frame::before,
.device-frame::after {
    content: "";
    position: absolute;
    width: 3px;
    background: #34343a;
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}
.device-frame::before {         /* volume pair (left) */
    left: -2px;
    top: 132px;
    height: 78px;
    border-radius: 2px 0 0 2px;
    box-shadow: 0 96px 0 #34343a;   /* second volume button below */
}
.device-frame::after {          /* power / side button (right) */
    right: -2px;
    top: 150px;
    height: 64px;
}

/* A slightly larger frame for a feature-centrepiece shot. */
.device-frame--lg {
    max-width: 340px;
}

@media (max-width: 480px) {
    .device-frame { max-width: 240px; padding: 9px; border-radius: 38px; }
    .device-frame__screen { border-radius: 29px; }
    .device-frame__island { width: 66px; height: 17px; top: 9px; }
    .device-frame--lg { max-width: 260px; }
}