/* 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; }
}

/* MacBook laptop frame (2026-08-04) — wraps a DESKTOP screenshot in an Apple-style
   aluminium lid + base so web/workspace shots read as "the live product on a Mac",
   matching the phone frame's pure-CSS approach: no binary bezel assets, aspect-
   agnostic (screen sizes to the image), decorative chrome stays aria-hidden and
   the <img> keeps its own descriptive alt. Dark titanium reads correctly on both
   site themes; --laptop-* hooks allow a light-aluminium override if ever wanted. */

.laptop-frame {
    --laptop-bezel: #0d0d10;
    --laptop-metal-hi: #3a3a40;
    --laptop-metal-lo: #1a1a1e;
    position: relative;
    margin: 0 auto;
    max-width: 720px;              /* sensible feature-panel default; override per-instance */
}

/* The lid: thin dark bezel around the screen, rounded top corners like an
   open MacBook viewed straight-on. */
.laptop-frame__lid {
    position: relative;
    padding: 12px 12px 16px;
    background: linear-gradient(165deg, #232327 0%, var(--laptop-bezel) 55%, #060608 100%);
    border-radius: 16px 16px 0 0;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.05),
        0 1px 2px rgba(255, 255, 255, 0.10),
        0 34px 60px -26px rgba(0, 0, 0, 0.75);
}

/* FaceTime camera dot, centred in the top bezel strip. Decorative. */
.laptop-frame__lid::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #17171b;
    box-shadow: inset 0 0 1px 1px rgba(90, 110, 140, 0.55);
    pointer-events: none;
}

.laptop-frame__screen {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 5px;
    background: #000;
}

.laptop-frame__screen > img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;   /* the frame provides the depth, not the img */
}

/* The base/deck: a slim aluminium bar wider than the lid, with the thumb-scoop
   notch in the middle — the classic "MacBook from the front" silhouette. */
.laptop-frame__base {
    /* Fixed-px overhang (not a % of the frame's own width) — a % overhang
       compounds with the frame's fluid width and, on narrow grid columns
       (e.g. the 2-up #chat-voice-video layout at ~1024px viewport), pushed
       past the page's side padding into real horizontal scroll (12px
       measured at 1024px, 2026-08-05). 14px is comfortably inside the
       smallest page gutter (--spacing-md = 24px) at every breakpoint. */
    position: relative;
    height: 13px;
    width: calc(100% + 28px);
    margin-left: -14px;
    background: linear-gradient(180deg, var(--laptop-metal-hi) 0%, var(--laptop-metal-lo) 72%, #0a0a0c 100%);
    border-radius: 2px 2px 12px 12px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 14px 26px -12px rgba(0, 0, 0, 0.7);
}

.laptop-frame__base::before {      /* thumb-scoop notch */
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 6px;
    background: linear-gradient(180deg, #0b0b0d, #202024);
    border-radius: 0 0 10px 10px;
    pointer-events: none;
}

@media (max-width: 800px) {
    .laptop-frame { max-width: 94vw; }
    .laptop-frame__lid { padding: 8px 8px 11px; border-radius: 12px 12px 0 0; }
    .laptop-frame__base { height: 10px; width: calc(100% + 20px); margin-left: -10px; }
    .laptop-frame__base::before { width: 84px; height: 5px; }
}