/* Meridian Presence hero: four pieces of one business (Evan picked "B simpler" in the lab, 2026-10-09). meridian-ads-51. */
.mpx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 56px; align-items: center; }
.mpx-grid h1 { font-size: clamp(48px, 5.6vw, 86px); }
.mpx-stage { position: relative; height: 560px; }
.mpx-stage, .mpx-stage * { box-sizing: border-box; }
.mpx-stage { --g1: #f2f2f2; --g2: #e6e6e6; --g3: #8a8a8a; --ease: cubic-bezier(.7, 0, .3, 1); font-size: 14px; line-height: 1.35; color: #000; }
@media (max-width: 991px) {
  .mpx-grid { grid-template-columns: 1fr; gap: 48px; }
  .mpx-stage { height: 560px; max-width: 520px; width: 100%; margin: 0 auto 50px; }
}
@media (max-width: 560px) {
  .mpx-stage { zoom: .68; width: 520px; max-width: none; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mpx-stage *, .mpx-stage *::before { transition: none !important; animation: none !important; }
}
.mpx-s .name { position: absolute; left: 50%; top: 286px; transform: translate(-50%, -50%) scale(.9); background: #000; color: #fff; border-radius: 30px; padding: 12px 22px; font-size: 15px; white-space: nowrap; opacity: 0; transition: opacity .8s var(--ease) .9s, transform .8s var(--ease) .9s; z-index: 2; }
.mpx-s.go .name { opacity: 1; transform: translate(-50%, -50%); }
/* B simpler: one idea per card, real cues only, lots of air */
.mpx-s .pc { position: absolute; margin: 0; opacity: 0; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.mpx-s.go .pc { opacity: 1; transform: none !important; }
.mpx-s figcaption { text-align: left; font-size: 12px; color: var(--g3); margin: 0 0 8px 2px; }
.mpx-s .box { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 20px 44px -26px rgba(0,0,0,.28); overflow: hidden; }
.mpx-s b { font-weight: 500; }
.mpx-s .web { left: 0; top: 0; width: 296px; transform: translate(-50px, -20px); }
.mpx-s .chrome { height: 26px; background: #f4f4f4; display: flex; align-items: center; gap: 5px; padding: 0 12px; }
.mpx-s .chrome i { width: 7px; height: 7px; border-radius: 50%; background: #d6d6d6; }
.mpx-s .chrome span { margin: 0 auto; transform: translateX(-12px); background: #fff; border-radius: 6px; padding: 2px 16px; font-size: 9.5px; color: #6b6b6b; }
.mpx-s .pg { padding: 12px 18px 20px; }
.mpx-s .nav { display: flex; gap: 12px; font-size: 9.5px; color: #6b6b6b; margin-bottom: 20px; }
.mpx-s .nav b { color: #000; font-size: 10.5px; margin-right: auto; }
.mpx-s .pg h4 { margin: 0; font-size: 23px; line-height: 1; letter-spacing: -.04em; font-weight: 500; }
.mpx-s .pg p { margin: 8px 0 14px; font-size: 11px; line-height: 1.4; color: #555; }
.mpx-s .cta { display: flex; align-items: center; gap: 12px; }
.mpx-s .cta em { font-style: normal; background: #000; color: #fff; border-radius: 20px; padding: 6px 13px; font-size: 10.5px; }
.mpx-s .cta u { font-size: 10.5px; text-underline-offset: 3px; }
.mpx-s .gbp { right: 0; top: 56px; width: 196px; transform: translate(50px, -30px); transition-delay: .12s; }
.mpx-s .gbp .map { position: relative; height: 92px; background: #ececec; }
.mpx-s .gbp .map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mpx-s .gbp .pin { position: absolute; left: 50%; top: 22px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50% 50% 50% 0; background: #000; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.mpx-s .gbp .pin::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.mpx-s .gbp .in { padding: 13px 16px 15px; }
.mpx-s .gbp b { display: block; font-size: 16px; }
.mpx-s .gbp small { display: block; font-size: 11.5px; color: #6b6b6b; margin-top: 3px; }
.mpx-s .gbp small.open { color: #000; }
.mpx-s .ad { left: 8px; top: 292px; width: 290px; transform: translate(-40px, 50px); transition-delay: .24s; }
.mpx-s .ad .box { padding: 14px 16px 16px; }
.mpx-s .spn { font-size: 11px; color: #000; margin-bottom: 8px; }
.mpx-s .src { display: flex; align-items: center; gap: 8px; }
.mpx-s .src i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: #f0f0f0; border: 1px solid #e2e2e2; color: #000; font-size: 11px; display: grid; place-items: center; }
.mpx-s .src b { display: block; font-size: 11.5px; }
.mpx-s .src small { display: block; font-size: 10px; color: #6b6b6b; }
.mpx-s .ad h5 { margin: 10px 0 4px; font-size: 15.5px; line-height: 1.25; font-weight: 400; letter-spacing: -.01em; }
.mpx-s .ad p { margin: 0; font-size: 11px; line-height: 1.45; color: #555; }
.mpx-s .ai { right: 0; top: 318px; width: 206px; transform: translate(50px, 40px); transition-delay: .36s; }
.mpx-s .ai .box { padding: 14px; font-size: 11.5px; line-height: 1.45; }
.mpx-s .ai .q { margin-left: auto; width: fit-content; max-width: 90%; background: #f0f0f0; border-radius: 16px; padding: 7px 11px; font-size: 11px; }
.mpx-s .ai p { margin: 10px 0 4px; color: #333; }
.mpx-s .cite { display: inline-block; margin-top: 8px; font-size: 9.5px; background: #f0f0f0; border-radius: 10px; padding: 2px 8px; color: #555; }
.mpx-s .name { top: 268px; left: 236px; }
.mpx-s .logo { width: 24px; height: 24px; border-radius: 50%; background: #000; display: grid; place-items: center; flex: none; }
.mpx-s .ai p.ans { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #333; }
.mpx-s .cite { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 9px 3px 3px; }
.mpx-s .cite .logo { width: 16px; height: 16px; }
.mpx-s .src i.logo { background: #000; border: 0; color: #fff; font-size: 8.5px; }
.mpx-s .logo { font-style: normal; color: #fff; font-size: 8.5px; letter-spacing: .08em; }
.mpx-s .cite .logo { font-size: 6px; }
.mpx-s.go .name { opacity: 1; transform: translate(-50%, -50%); }