/* Shared editorial axis and one consistent handset for the four original bill screens. */
body.mobile-first-case.approved-case-template :is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account){display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:clamp(28px,4vw,60px);align-items:start;margin-top:64px}
:is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) .mf-copy h3{margin:0 0 22px}
:is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) .mf-copy p{margin:0}
:is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) .mf-bill-artwork{display:flex;justify-content:center;padding:0;background:none}
:is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) figure{width:300px;max-width:100%;margin:0;padding:0;background:none}
:is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) figcaption{font-size:12px;color:#53656f;margin:0 0 12px;min-height:18px}
body.mobile-first-case.approved-case-template :is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) .device-phone{width:100%;max-width:none;border-radius:24px!important}
body.mobile-first-case.approved-case-template :is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) .mf-bill-stage{aspect-ratio:865/1553;height:auto;border-radius:20px!important;background:#fff}
body.mobile-first-case.approved-case-template :is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) img.wireframe-layer{top:6px;bottom:0;left:0;width:100%;height:calc(100% - 6px)!important;object-fit:contain;object-position:center top;border-radius:0}
:is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) .phone-hover-cue{display:none!important}
@media(max-width:750px){body.mobile-first-case.approved-case-template :is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account){grid-template-columns:1fr;gap:28px;margin-top:48px}:is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) .mf-bill-artwork{width:100%}:is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) figure{width:290px}}

/* Confirmation artwork fills the glass without white inset strips. */
body.mobile-first-case.approved-case-template #manage-payment-methods img.wireframe-layer:nth-child(5),body.mobile-first-case.approved-case-template #add-checking-account img.wireframe-layer:nth-child(4){top:0;bottom:0;height:100%!important;object-fit:cover}

/* Final designs share the bill handset size; longer originals crop naturally inside its glass. */
body.mobile-first-case.approved-case-template #final-designs .mf-bill-stage{background:#e5e5e5}
body.mobile-first-case.approved-case-template #final-designs img.wireframe-layer{top:0;bottom:auto;width:100%;height:auto!important;object-fit:initial;object-position:top left}

/* Match the shared case-study body-copy scale throughout the app examples. */
body.mobile-first-case.approved-case-template .case-section .mf-copy p{font-size:14px;line-height:1.7}
/* Keep every image eyebrow aligned to its centered handset, including narrow screens. */
body.mobile-first-case.approved-case-template :is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) figure{max-width:min(100%,250px,calc((100svh - 160px)*.46));margin-inline:auto}
@media(max-width:750px){body.mobile-first-case.approved-case-template :is(#final-designs,#understand-the-bill,#manage-payment-methods,#add-checking-account) figure{max-width:min(100%,230px,calc((100svh - 170px)*.46))}}