/* Mortgage brokers hero: three real 1st Choice screens in 3D (Evan picked option C in the lab, 2026-10-09). meridian-ads-51. */
.mbx-c { position: absolute; inset: 0; }
.mbx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 56px; align-items: center; }
.mbx-grid h1 { font-size: clamp(48px, 5.6vw, 86px); }
.mbx-stage { position: relative; height: 580px; --ease: cubic-bezier(.7, 0, .3, 1); font-size: 14px; line-height: 1.35; color: #000; }
.mbx-stage, .mbx-stage * { box-sizing: border-box; }
.mbx-ph { position: absolute; width: 270px; height: 584px; border-radius: 44px; background: #0b0b0b; padding: 9px; box-shadow: 0 0 0 1.5px #3a3a3a inset, 0 30px 60px -30px rgba(0,0,0,.45); }
.mbx-ph .scr { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #0d1b2e; }
.mbx-ph .scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mbx-ph .isl { position: absolute; top: 9px; left: 50%; width: 82px; height: 24px; margin-left: -41px; border-radius: 20px; background: #000; z-index: 2; }
.mbx-c .tag { position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; color: #000; background: #fff; border-radius: 16px; padding: 5px 12px; box-shadow: 0 2px 10px rgba(0,0,0,.12); opacity: 0; transition: opacity .6s 1s; }
.mbx-c.go .tag { opacity: 1; }
@media (max-width: 991px) {
  .mbx-grid { grid-template-columns: 1fr; gap: 48px; }
  .mbx-stage { width: 520px; max-width: 100%; margin: 0 auto 50px; }
}
@media (max-width: 560px) {
  .mbx-stage { zoom: .66; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mbx-stage *, .mbx-stage *::before, .mbx-stage *::after { transition: none !important; }
}
.mbx-c .tag { bottom: auto; top: -40px; }
.mbx-c { perspective: 1600px; transform-style: preserve-3d; }
.mbx-c .fan { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.mbx-c .mbx-ph { top: 0; left: 50%; margin-left: -135px; transform-style: preserve-3d; will-change: transform, filter;
  box-shadow: 0 0 0 1.5px #3a3a3a inset, 0 calc(20px + var(--d, 0) * 30px) calc(40px + var(--d, 0) * 40px) calc(-28px) rgba(0,0,0,calc(.32 + var(--d, 0) * .18)); }
.mbx-c .tag { transition: opacity .6s 1s, transform .5s cubic-bezier(.22, 1, .36, 1); }
/* The fanned side phones can reach past narrow screens; keep the page from scrolling sideways. */
.lp-hero:has(.mbx-c) { overflow-x: clip; }