/* Shared Home Concept shapes and device finish. Content remains outside clipping masks. */
.dt-wave-band {
    position: relative;
    isolation: isolate;
    margin-block: 26px;
    clip-path: none;
}
.dt-wave-band::before, .dt-wave-band::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 27px;
    background: inherit;
    pointer-events: none;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 24C150 44 220 0 365 13S610 38 775 17 980 37 1130 18 1295 0 1440 20V40H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.dt-wave-band::before { top: -26px; }
.dt-wave-band::after { bottom: -26px; transform: rotate(180deg); }
.mp-connections { border-radius: 65px 18px 60px 18px; background: #f0e8d5; }
.op-partners { border-radius: 45px 15px 45px 15px; background: #f0e8d5; }
.mp-hero figure, .op-hero figure { box-shadow: 12px 13px 0 #e3e8d9; }
.mp-day { border-radius: 26px 26px 48px 18px; }

/* The same metal rim, dark bezel, notch and glass depth as the homepage phone. */
.op-phone, .sp-device {
    --device-angle: -4deg;
    --device-yaw: -6deg;
    position: relative;
    border: 7px solid #151a19;
    border-radius: 43px;
    box-shadow: 0 0 0 1px #a1a7a2, 0 0 0 3px #545a56,
        2px 0 0 5px #c3c6bd, 5px 4px 0 6px #353c36,
        18px 24px 32px #10211640, inset 0 0 0 1px #d3d9d4;
    transform: perspective(1400px) rotateY(var(--device-yaw)) rotate(var(--device-angle));
    transform-origin: center;
}
.op-card:nth-child(2) .op-phone, .sp-card:nth-child(2) .sp-device { --device-angle: 4deg; --device-yaw: 6deg; }
.op-card:nth-child(3) .op-phone, .sp-card:nth-child(3) .sp-device { --device-angle: -2deg; --device-yaw: -8deg; }
.sp-card:nth-child(4) .sp-device { --device-angle: 3deg; --device-yaw: 5deg; }
.sp-card:nth-child(6) .sp-device { --device-angle: -5deg; --device-yaw: -4deg; }
.op-proof .op-card .op-phone { --device-angle: 5deg; --device-yaw: -5deg; }
.op-os, .sp-phone-status { height: 35px; min-height: 35px; padding: 11px 16px 4px; align-items: center; position: relative; font-size: 10px; }
.op-os::before, .sp-island {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 38%; height: 23px; border-radius: 0 0 15px 15px; background: #101514;
}
.op-os::after, .sp-island::after {
    content: ''; position: absolute; top: 7px; left: 51%; width: 6px; height: 6px;
    background: #11242e; border-radius: 50%; box-shadow: inset 0 0 0 1px #273c46;
}
.sp-island::after { left: auto; right: 22%; }
.op-phone::after { content: ''; flex-shrink: 0; width: 30%; height: 4px; border-radius: 4px; background: #182a24; margin: 7px auto; }
.op-phone .op-app-nav { padding-bottom: 7px; }
.dt-highlights.is-expanded .op-device-stage, .dt-highlights.is-expanded .sp-stage:not(.sp-tv-stage) { padding: 28px 22px; }
@media(max-width:760px) {
    .dt-wave-band { margin-block: 20px; }
    .dt-wave-band::before, .dt-wave-band::after { height: 21px; }
    .dt-wave-band::before { top: -20px; }
    .dt-wave-band::after { bottom: -20px; }
    .mp-hero figure, .op-hero figure { box-shadow: 7px 9px 0 #e3e8d9; }
    .mp-connections { border-radius: 38px 13px 38px 13px; }
}

/* A device has one physical size, independent of its current app screen.
   Only the screen scrolls; the bezel, status bar and bottom navigation stay put. */
.op-phone, .sp-device {
    width: 298px;
    aspect-ratio: 149 / 320;
    height: auto;
    min-height: 0;
    flex: none;
    display: flex;
    flex-direction: column;
}
.op-phone > *, .sp-device > * { flex-shrink: 0; }
.op-phone [data-screen], .dt-highlights:not(.is-expanded) .op-phone [data-screen],
.sp-device-screen {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.sp-device-screen > .sp-start-screen, .sp-device-screen > .sp-widget-home { min-height: 100%; }
.op-phone .op-app-nav { margin-top: 0; }
.sp-collage-phone-screen { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.sp-collage-phone-screen > * { flex-shrink: 0; }
.sp-collage-phone-screen .sp-collage-round { padding-block: 5cqw; }
.sp-collage-phone-screen .sp-collage-partner { margin-block: 4cqw; padding-block: 3cqw; flex: 1; }
.sp-collage-phone-screen .sp-collage-partner .sp-identity { height: 20cqw; margin-block: 2cqw; }
.sp-collage-phone-screen { font-size: 6cqw; line-height: 1.4; }
.sp-collage-phone-screen .sp-collage-phone-nav { padding-block: 3cqw; margin-top: auto; }