/* The wrapper has no layout box on desktop: keep the approved desktop scene. */
.mch-hero-intro { display: contents; }

@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  .hero.hero-scene,
  .sr-hero.hero-scene,
  .mt-page .sr-hero {
    display: block;
    min-height: 0;
    padding: 0 0 24px;
    background: #edf8ff;
  }
  .hero-scene-image,
  .mt-page .mt-hero-scene,
  .hero-scene .hero-overlay,
  .sr-hero.hero-scene::after,
  .mt-page .sr-hero::before,
  .mt-page .sr-hero::after,
  .hero .desktop-phone-card,
  .sr-hero .desktop-phone-card,
  .hero-scene .hero-visual { display: none; }

  .hero-scene .hero-inner,
  .hero-scene .sr-hero-inner,
  .mt-page .sr-hero-inner {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 0;
  }
  .hero-scene .hero-left,
  .hero-scene .sr-hero-copy,
  .mt-page .sr-hero-copy {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .mch-hero-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    isolation: isolate;
    min-height: 390px;
    padding: 32px max(24px, calc((100vw - 960px) / 2));
    text-align: left;
    background: #edf8ff;
  }
  .mch-hero-intro::before,
  .mch-hero-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
  .mch-hero-intro::before {
    left: auto;
    width: 50%;
    background-image: var(--intro-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
    mask-image: linear-gradient(90deg, transparent, #000 22%);
  }
  .mch-hero-intro::after {
    background: linear-gradient(90deg, #edf8ff 0%, rgba(237,248,255,.97) 32%, rgba(237,248,255,.84) 53%, rgba(237,248,255,.12) 85%);
  }
  .mt-page .mch-hero-intro::before {
    background-size: contain;
    width: auto;
    height: 100%;
    max-width: 50%;
    aspect-ratio: 1122 / 1402;
  }
  .mch-hero-intro > * { max-width: 62%; }
  .hero .mch-hero-intro .hero-lead,
  .hero .mch-hero-intro .hero-note,
  .sr-hero .mch-hero-intro .sr-lead,
  .sr-hero .mch-hero-intro .sr-note { margin-left: 0; margin-right: 0; }
  .mch-hero-intro .sr-kicker { margin-bottom: 2px; }
  .mch-hero-intro .hero-note,
  .mch-hero-intro .sr-note { margin-bottom: 0; }

  .hero a.mch-hero-call[href^="tel:"],
  .sr-hero a.mch-hero-call[href^="tel:"] {
    width: min(620px, calc(100% - 32px));
    margin: 18px auto 14px;
  }
  .hero .home-hero-simulator {
    width: min(620px, calc(100% - 32px));
    max-width: none;
    margin: 0 auto;
  }
  .hero .home-hero-simulator .sr-wizard { width: 100%; margin: 0; }
  .sr-hero .sr-wizard {
    width: min(620px, calc(100% - 32px));
    max-width: none;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  /* Match the five portrait scenes instead of cropping them to a short banner. */
  .mt-page .mch-hero-intro { width: 100%; aspect-ratio: 1122 / 1402; }
  .mt-page .mch-hero-intro::before { background-position: center bottom; }
  .mch-hero-intro {
    min-height: 390px;
    padding: 28px 18px;
    align-items: center;
    text-align: center;
  }
  .mch-hero-intro > * { max-width: 100%; }
  .mch-hero-intro::before,
  .mt-page .mch-hero-intro::before {
    left: 0;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mch-hero-intro::after {
    background: linear-gradient(180deg, rgba(237,248,255,.72), rgba(237,248,255,.66) 62%, rgba(237,248,255,.96));
  }
  .hero .mch-hero-intro .hero-lead,
  .hero .mch-hero-intro .hero-note,
  .sr-hero .mch-hero-intro .sr-lead,
  .sr-hero .mch-hero-intro .sr-note { margin-left: auto; margin-right: auto; }
}