/* v213: desktop-only unified hero and balanced benefit/action spacing. */
@media (min-width: 992px) {
  /* One continuous hero surface instead of two separate cards. */
  #why-wmf.wmf-v211-desktop .why-hero {
    position: relative !important;
    isolation: isolate !important;
    display: block !important;
    min-height: 520px !important;
    overflow: hidden !important;
    border: 1px solid rgba(211, 162, 118, .28) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 84% 10%, rgba(211, 162, 118, .08), transparent 35%),
      linear-gradient(145deg, #14181d 0%, #0c0f13 72%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  }

  #why-wmf.wmf-v211-desktop .why-hero-copy,
  #why-wmf.wmf-v211-desktop .why-hero-media {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #why-wmf.wmf-v211-desktop .why-hero-copy {
    position: relative !important;
    z-index: 3 !important;
    justify-content: center !important;
    width: 59% !important;
    min-height: 520px !important;
    padding: clamp(36px, 3.5vw, 58px) clamp(38px, 4.1vw, 66px) !important;
  }

  #why-wmf.wmf-v211-desktop .why-hero-media {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 0 0 auto !important;
    width: 60% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* The solid left edge matches the card, then dissolves smoothly into the photo. */
  #why-wmf.wmf-v211-desktop .why-hero-media::after {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background: linear-gradient(
      90deg,
      #0f1318 0%,
      rgba(15, 19, 24, .98) 8%,
      rgba(15, 19, 24, .84) 20%,
      rgba(15, 19, 24, .48) 33%,
      rgba(15, 19, 24, .14) 45%,
      rgba(15, 19, 24, 0) 57%
    ) !important;
  }

  #why-wmf.wmf-v211-desktop .why-hero-media img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Keep the benefit panel filled and place its action row at the visual baseline. */
  #why-wmf.wmf-v211-desktop .why-benefits-panel {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 24px 17px !important;
  }

  #why-wmf.wmf-v211-desktop .why-benefit-grid {
    grid-auto-rows: minmax(112px, 1fr) !important;
  }

  #why-wmf.wmf-v211-desktop .why-benefit-card {
    align-items: center !important;
    min-height: 112px !important;
    padding: 16px 17px !important;
  }

  #why-wmf.wmf-v211-desktop .why-benefit-copy {
    align-self: stretch !important;
    align-items: center !important;
    align-content: center !important;
    height: 100% !important;
  }

  #why-wmf.wmf-v211-desktop .why-benefit-copy > div {
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 62px !important;
  }

  #why-wmf.wmf-v211-desktop .why-line-icon {
    align-self: center !important;
  }

  #why-wmf.wmf-v211-desktop .why-actions {
    margin-top: auto !important;
    padding-top: 18px !important;
  }
}

@media (min-width: 992px) and (max-width: 1180px) {
  #why-wmf.wmf-v211-desktop .why-hero,
  #why-wmf.wmf-v211-desktop .why-hero-copy {
    min-height: 535px !important;
  }

  #why-wmf.wmf-v211-desktop .why-hero-copy {
    width: 62% !important;
    padding: 34px 38px !important;
  }

  #why-wmf.wmf-v211-desktop .why-hero-media {
    width: 62% !important;
  }

  /* On narrower desktops the close-up is enlarged from the top edge, removing its empty lower field. */
  #why-wmf.wmf-v211-desktop .why-hero-media img {
    transform: scale(1.16) !important;
    transform-origin: center top !important;
  }

  #why-wmf.wmf-v211-desktop .why-benefit-card {
    min-height: 118px !important;
    padding: 15px !important;
  }
}