.iphone-device,
.ipad-device {
    position: relative;
    min-width: 0;
    margin: 0;
    isolation: isolate;
}

.iphone-device {
    /* The shadow below is measured against this box, so a phone drawn at 220px in
       the homepage fan and one drawn at 380px on a product hero cast the same
       shadow rather than the same number of pixels. */
    container-type: inline-size;
    width: min(31%,14rem);
    flex: 0 1 min(31%,14rem);
    padding: clamp(4px,.5vw,6px);
    border-radius: 12% / 5.6%;
    background:
        linear-gradient(102deg,
            #64230e 0%,
            #be4a19 2%,
            #f29a62 4%,
            #d65d24 8%,
            #8c2d0f 15%,
            #d6531c 48%,
            #f18549 72%,
            #8a2c0e 92%,
            #ef9c68 97%,
            #5e210d 100%);
    box-shadow:
        0 0 0 1px rgba(67, 20, 5, .9),
        0 .35rem .6rem rgba(0, 0, 0, .16),
        0 1.35rem 2.7rem rgba(0, 0, 0, .3),
        inset 1px 0 rgba(255, 220, 195, .72),
        inset -1px 0 rgba(55, 12, 3, .75);
}

.iphone-device img,
.ipad-device img {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: none;
    height: auto !important;
    display: block;
    object-fit: contain !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.iphone-device img {
    border-radius: 10.7% / 5% !important;
    box-shadow: 0 0 0 clamp(1px, .16vw, 2px) #050505 !important;
}

/* Some marketing captures already contain a complete iPhone shell. Keep that
   native frame intact instead of drawing a second device around it. */
.iphone-device--native-frame {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* A shadow that falls, rather than a halo. The blur used to be wider than the
   offset, so it wrapped the device on all four sides and read as grey dirt on the
   paper ground - worst where two phones overlap and their haloes add together. A
   tight contact layer and a wider cast one, both offset far enough that nothing
   spills above the device. */
.iphone-device--native-frame img {
    border-radius: 0 !important;
    clip-path: none;
    box-shadow: none !important;
    filter:
        drop-shadow(0 1cqw 1.4cqw rgba(20, 26, 23, .18))
        drop-shadow(0 5cqw 5.5cqw rgba(20, 26, 23, .2));
}
.iphone-device--native-frame::before,
.iphone-device--native-frame::after { display: none; }

/* Specular edge only. Captures keep their own camera/island geometry. */
.iphone-device::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(255, 220, 196, .45),
        inset .14rem 0 .2rem rgba(255, 190, 145, .24),
        inset -.12rem 0 .18rem rgba(51, 12, 3, .55);
    pointer-events: none;
}

/* Orange action/volume controls on the left and power button on the right. */
.iphone-device::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0 clamp(-5px, -.42vw, -3px);
    border-radius: inherit;
    background:
        linear-gradient(#f19a61, #8b2c0e) left 18% / 3px 7% no-repeat,
        linear-gradient(#f19a61, #8b2c0e) left 29% / 3px 13% no-repeat,
        linear-gradient(#f19a61, #8b2c0e) left 45% / 3px 13% no-repeat,
        linear-gradient(#f19a61, #8b2c0e) right 30% / 3px 20% no-repeat;
    pointer-events: none;
}

.ipad-device {
    width: min(62%,31rem);
    flex: 0 1 min(62%,31rem);
    padding: clamp(7px,1vw,12px);
    border-radius: clamp(20px,2.2vw,34px);
    background: linear-gradient(145deg, #393a3d, #08090a 28%, #17181a 72%, #4b4c50);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.25),
        0 22px 48px rgba(0,0,0,.34),
        inset 0 0 0 1px rgba(255,255,255,.11);
}

.ipad-device img { border-radius: clamp(14px,1.65vw,25px) !important; }

.ipad-device::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: clamp(3px,.42vw,6px);
    left: 50%;
    width: clamp(3px,.38vw,5px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #08090a;
    box-shadow: inset 0 0 0 1px #28364a;
    transform: translateX(-50%);
}

@media (max-width: 680px) {
    .iphone-device {
        width: min(76vw,16rem);
        max-width: none;
        flex: 0 0 min(76vw,16rem);
        scroll-snap-align: center;
    }

    .ipad-device {
        width: min(88vw,32rem);
        max-width: none;
        flex: 0 0 min(88vw,32rem);
        scroll-snap-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .iphone-device,
    .ipad-device { transform: none !important; }
}