/* Supplied phone artwork, with a single entrance when the hero enters view. */
.detail-hero.detail-hero--self-pay{overflow:clip;overflow-clip-margin:16px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;padding-block:36px 64px}
.detail-hero.detail-hero--self-pay h1{font-size:clamp(2.375rem,4vw,3.5rem);line-height:1.12}
.self-pay-phones{position:relative;width:100%;max-width:460px;min-width:0;aspect-ratio:530/672;margin:0;justify-self:center}
.self-pay-phones img{display:block;width:100%;height:auto;transform-origin:52% 58%}
.self-pay-phones.is-waiting img{opacity:0}
.self-pay-phones:not(.self-pay-phones--paired).is-arriving img{animation:self-pay-phone-arrival 1.3s cubic-bezier(.16,1,.3,1) both}
@keyframes self-pay-phone-arrival{
  from{opacity:0;transform:translate3d(28px,42px,0) rotate(-28deg) scale(.88)}
  35%{opacity:1}
  to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}
}
@media(max-width:1100px){.detail-hero.detail-hero--self-pay{gap:32px}.detail-hero.detail-hero--self-pay h1{font-size:2.75rem}}
@media(max-width:850px){.detail-hero.detail-hero--self-pay{grid-template-columns:1fr;gap:36px;padding-block:40px 56px}.self-pay-phones{max-width:400px}.detail-hero--self-pay .detail-hero-copy{max-width:680px}}
@media(max-width:650px){.detail-hero.detail-hero--self-pay{gap:32px;padding-top:36px}.detail-hero.detail-hero--self-pay h1{font-size:2.375rem}.self-pay-phones{width:calc(100% - 12px);max-width:340px}}
@media(prefers-reduced-motion:reduce){.self-pay-phones.is-waiting img{opacity:1}.self-pay-phones.is-arriving img{animation:none;transform:none}}

/* Core: independent phone layers converge into the original angled composition. */
.self-pay-phones--paired{isolation:isolate}
.self-pay-phones--paired .core-phone{position:absolute;width:44%;transform-origin:50% 55%;filter:drop-shadow(0 14px 14px #213a5420)}
.self-pay-phones--paired .core-phone--blue{z-index:1;right:2%;top:28%;width:46%;transform:rotate(12deg)}
.self-pay-phones--paired .core-phone--marketplace{z-index:2;left:8%;top:6%;transform:rotate(-12deg)}
.self-pay-phones--paired img{width:100%;height:auto}
.self-pay-phones--paired.is-waiting .core-phone{opacity:0}
.self-pay-phones--paired.is-arriving .core-phone--blue{animation:core-phone-blue-arrival 1.5s cubic-bezier(.16,1,.3,1) both}
.self-pay-phones--paired.is-arriving .core-phone--marketplace{animation:core-phone-marketplace-arrival 1.6s .12s cubic-bezier(.16,1,.3,1) both}
@keyframes core-phone-blue-arrival{
 from{opacity:0;transform:translate3d(24%,16%,0) rotate(48deg) scale(.86)}
 28%{opacity:1}
 to{opacity:1;transform:translate3d(0,0,0) rotate(12deg) scale(1)}
}
@keyframes core-phone-marketplace-arrival{
 from{opacity:0;transform:translate3d(-24%,18%,0) rotate(-48deg) scale(.86)}
 28%{opacity:1}
 to{opacity:1;transform:translate3d(0,0,0) rotate(-12deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){
 .self-pay-phones--paired.is-waiting .core-phone{opacity:1}
 .self-pay-phones--paired.is-arriving .core-phone{animation:none}
}