/**
 * PM Media / REV DE$K / MedSync — mobile readability + media visibility
 * Loaded last so it wins over stacked chrome / reveal / music collisions.
 */

/* Pictures must never stay invisible because a reveal class never fired */
.pics,
.pics.reveal,
.pics.wide,
.pics.wide.reveal,
#visual-world .reveal,
#pain .reveal,
#solve .reveal,
#engines .reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  filter: none !important;
}

.pics {
  display: grid !important;
  gap: 10px !important;
}

.pics figure {
  margin: 0;
  min-width: 0;
}

.pics img {
  width: 100% !important;
  height: auto !important;
  min-height: 160px;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  background: #101018;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 840px) {
  html, body {
    overflow-x: hidden !important;
  }

  /* Kill the ghosted / mashed type that tight tracking + text-stroke creates */
  body, p, .support, .slogan, .lead, .lede, .cta, .btn, .sticky-m a, .sticky-m button {
    letter-spacing: 0.02em !important;
    word-spacing: 0.12em !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }

  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .corp {
    display: none;
  }

  .pm-channel-switch {
    position: sticky;
    top: 0;
    z-index: 8600;
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 6px;
  }

  .pm-channel-switch a {
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    padding: 0 12px !important;
  }

  header {
    position: sticky;
    top: 0;
  }

  .head {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-height: 52px;
    padding: 6px 0 !important;
  }

  .brand {
    min-width: 0;
    max-width: none;
    gap: 8px !important;
  }

  /* One mark only — the CloudFront twin crowds the phone header */
  .brand img.logo:nth-of-type(2) {
    display: none !important;
  }

  .brand img.logo {
    height: 28px !important;
    width: auto !important;
  }

  .head .cta,
  .head .cta.nav-aff {
    display: none !important;
  }

  .lang button {
    min-height: 36px;
    padding: 4px 10px !important;
    letter-spacing: 0.04em !important;
  }

  .burger {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  /* Stop the hero from sliding under the channel switch + header */
  .hero,
  .hero.pm-noon-hero {
    margin-top: 0 !important;
    min-height: auto !important;
    height: auto !important;
    padding: 16px 14px 28px !important;
    overflow: hidden;
  }

  .hero-stage {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    gap: 14px !important;
  }

  .hero-copy {
    max-width: none !important;
    padding: 4px 2px 10px !important;
  }

  .hero-copy .kicker {
    letter-spacing: 0.16em !important;
    -webkit-text-stroke: 0 !important;
    font-size: 10px !important;
  }

  .hero-copy .h1,
  .hzone .h1,
  .h1,
  .h2,
  h1, h2,
  .pmm-medtab-h {
    font-family: "Plus Jakarta Sans", "IBM Plex Sans", system-ui, sans-serif !important;
    max-width: none !important;
    letter-spacing: -0.015em !important;
    word-spacing: 0.02em !important;
    line-height: 1.22 !important;
    font-weight: 700 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }

  .h1 .grad,
  .hero-copy .kicker,
  .chrome {
    -webkit-text-stroke: 0 !important;
    paint-order: normal;
  }

  .hero-copy .h1,
  .hzone .h1,
  .h1 {
    font-size: clamp(1.55rem, 7.2vw, 2.1rem) !important;
  }

  .support,
  .hero-where,
  .lead,
  .sp-aeo-direct,
  [data-sp-aeo-direct] {
    max-width: none !important;
    line-height: 1.55 !important;
    font-size: 15px !important;
    letter-spacing: 0.02em !important;
    word-spacing: 0.12em !important;
    text-shadow: none !important;
  }

  .hero-neon {
    min-height: min(28vh, 200px) !important;
    padding-top: 0 !important;
  }

  .cta-row,
  .hero-cta,
  .pm-noon-cta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .cta-row .cta,
  .hero-cta .btn,
  .pm-noon-cta .btn {
    flex: 1 1 calc(50% - 10px);
    min-width: 140px;
    width: auto !important;
    white-space: normal !important;
    text-align: center;
    letter-spacing: 0.01em !important;
  }

  .pics,
  .pics.wide {
    grid-template-columns: 1fr 1fr !important;
  }

  .pics img {
    min-height: 132px;
    height: 38vw !important;
  }

  /* MedSync doorway on the house page — readable, not clipped */
  .pmm-medtab {
    overflow: visible !important;
    padding: 48px 0 !important;
    width: 100% !important;
  }

  .pmm-medtab-in {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

  .pmm-medtab-h {
    letter-spacing: -0.012em !important;
    word-spacing: 0.06em !important;
    max-width: 100% !important;
    -webkit-text-stroke: 0 !important;
    line-height: 1.18 !important;
  }

  .pmm-medtab-stage {
    width: 100% !important;
    min-height: 180px !important;
    max-width: 280px;
    margin: 0 auto;
  }

  .pmm-medtab-acts {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .pmm-medtab-cta,
  .pmm-medtab-ghost {
    width: 100%;
    justify-content: center;
    white-space: normal !important;
    text-align: center;
  }

  #medsync.ms-home-lane {
    padding: 40px 0 !important;
  }

  #medsync.ms-home-lane .lane {
    padding: 22px 16px !important;
  }

  /* Reveal animations must not hide content on phones */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    filter: none !important;
  }

  section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Room for sticky CTA. Music docks ABOVE this bar, never on top of copy. */
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }

  .sticky-m {
    pointer-events: none;
    z-index: 300;
  }

  .sticky-m a,
  .sticky-m button {
    pointer-events: auto;
    letter-spacing: 0.02em !important;
  }

  /* Last-wins clamp so the music tab cannot stay 168px wide when tucked */
  .sp-music-controls.is-collapsed,
  .sp-music-controls.is-collapsed .sp-music-shell,
  .sp-music-controls.is-collapsed .sp-music-core,
  .sp-music-controls.is-collapsed .sp-music-head {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
}

@media (max-width: 420px) {
  .pics,
  .pics.wide {
    grid-template-columns: 1fr !important;
  }

  .pics img {
    height: 52vw !important;
    min-height: 180px;
  }

  .cta-row .cta,
  .hero-cta .btn,
  .pm-noon-cta .btn {
    flex-basis: 100%;
  }
}

/* ── MedSync medical site ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  [data-ms-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .ms-header {
    padding-block: 10px !important;
  }

  .ms-header-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .ms-lane-nav {
    display: flex !important;
    width: 100%;
    order: 4;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ms-lane-nav::-webkit-scrollbar { display: none; }

  .ms-lane-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .ms-hero,
  .ms-split,
  .ms-close {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .ms-hero {
    padding-top: 28px !important;
    padding-bottom: 72px !important;
    overflow: hidden;
  }

  .ms-hero-mark,
  #pm3d-ms-mark {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: min(140px, 38vw) !important;
    max-width: 140px !important;
    margin: 0 auto 8px !important;
    pointer-events: none;
  }

  .ms-title,
  .ms-hero h1,
  .ms-h {
    max-width: 100% !important;
    letter-spacing: -0.01em !important;
    word-spacing: 0.06em !important;
    line-height: 1.18 !important;
    -webkit-text-stroke: 0 !important;
  }

  .ms-lede,
  .ms-copy,
  .ms-hero p {
    letter-spacing: 0.01em !important;
    word-spacing: 0.07em !important;
    line-height: 1.5 !important;
  }

  .ms-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .ms-btn {
    width: 100% !important;
    justify-content: center;
    text-align: center;
  }

  .ms-shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  #ms-sticky-cta {
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .pm3d-zone,
  #pm3d-ms-mark,
  #pm3d-ms-hero-mark {
    max-width: 120px !important;
    width: 32vw !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
}