/* Keep complete case-study handsets within a mobile browser's usable height. */
@media(max-width:750px){
 body:is(.approved-case-template,.uad-case) :is(#design,#redemption-design) .device-phone{max-width:min(100%,230px,calc((100svh - 170px)*.46))!important}
}
/* A quieter desktop scale, leaving room for captions and navigation below. */
@media(min-width:751px){
 body:is(.approved-case-template,.uad-case) :is(#design,#redemption-design) .device-phone,
 body:is(.approved-case-template,.uad-case) :is(#design,#redemption-design) figure.story-screen:has(>.device-phone){max-width:min(100%,250px,calc((100svh - 160px)*.46))!important}
 body:is(.approved-case-template,.uad-case) :is(#design,#redemption-design) figure.story-screen:has(>.device-phone){margin-inline:auto}
 .myaccess-case .access-animation-board{width:250px}
}

/* Shared case-study handset corners: 24px shell and 20px glass inside its 4px edge. */
body:is(.approved-case-template,.uad-case) :is(#design,#redemption-design) .device-phone{border-radius:24px!important}
body:is(.approved-case-template,.uad-case) :is(#design,#redemption-design) .device-phone .device-phone-screen{border-radius:20px!important;overflow:hidden}

/* My Verizon animations stay slightly smaller on phones than on desktop. */
@media(max-width:750px){
 body.mobile-first-case.approved-case-template #design .device-phone,
 body.mobile-first-case.approved-case-template #design figure.story-screen:has(>.device-phone){max-width:min(100%,230px,calc((100svh - 170px)*.46))!important}
 body.mobile-first-case.approved-case-template #design figure.story-screen:has(>.device-phone){margin-inline:auto}
}

@media(max-width:750px){
 body.uad-case .case-hero .hero-mobile{aspect-ratio:195/1980!important;height:auto!important;overflow:hidden}
 body.uad-case .case-hero .hero-mobile>img{width:100%;height:auto!important;max-height:none;object-fit:contain;object-position:top}
 body.uad-case .benefit-signals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 body.uad-case .benefit-signals>div{min-width:0;padding:14px 10px}
 body.uad-case .benefit-signals strong{font-size:30px}
 body.uad-case .benefit-signals span{font-size:11px;line-height:1.4}
}