/* Real app screens in a thin-bezel phone, on the brand's dark field with a lime glow (matches the App Store set). */
.app-stage{position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;padding:4% 0}
.app-stage::before{content:"";position:absolute;inset:6% 0;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(168,255,0,.2),rgba(168,255,0,.05) 55%,transparent 75%)}
.app-phone{position:relative;flex:none;width:min(300px,66%);aspect-ratio:420/913;padding:2.2%;border:1px solid rgba(255,255,255,.18);border-radius:13% / 6%;background:#1c1c21;box-shadow:0 34px 70px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.7)}
.app-phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:11.5% / 5.3%}
.app-stage-pair .app-phone{width:min(270px,50%)}
.app-stage-pair .app-phone:first-child{z-index:0;margin-right:-9%;transform:translateY(7%) rotate(-5deg) scale(.9);filter:brightness(.78)}
.app-stage-pair .app-phone:last-child{z-index:1}
.app-stage-caption{margin:14px 0 0;color:#8e8e93;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-align:center}
@media(max-width:720px){.app-phone{width:min(250px,66%)}.app-stage-pair .app-phone{width:min(220px,52%)}}
/* Feature and comparison heroes: the phones replace a full-bleed photo. */
.feature-app-media{display:flex;align-items:center;justify-content:center;min-height:570px;padding:34px 24px 54px;background:radial-gradient(circle at 50% 35%,rgba(168,255,0,.1),transparent 60%),#1c1c21}
.feature-app-media .app-stage{width:min(100%,560px)}
.feature-hero-media.feature-app-media .app-phone img{width:100%;height:100%;object-fit:cover}
@media(max-width:1100px){.feature-app-media{min-height:480px}}
@media(max-width:720px){.feature-app-media{min-height:0;padding:22px 12px 50px}}
/* Homepage hero and chapters. */
.mr-hero-phones{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:radial-gradient(circle at 50% 42%,rgba(168,255,0,.13),transparent 62%),#1c1c21}
.mr-hero-phones .app-stage{width:min(100%,500px)}.mr-hero-phones .app-stage-pair .app-phone{width:min(232px,46%)}
.mr-motion-media .app-phone{width:min(300px,86%)}
@media(max-width:720px){.mr-hero-stage{height:auto!important;aspect-ratio:auto!important}.mr-hero-phones{position:relative;padding:20px 0 26px}}