/* =========================================================
   MoveDone Update 050
   How MoveDone Works hero background — Key_Hero.png
   ========================================================= */

.md050-how-it-works {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: #fffaf6 !important;
}

/*
 * Use the uploaded 2400 x 900 asset as a true background layer.
 * The existing checklist mock-up, heading, steps and CTA stay as live HTML.
 */
.md050-how-it-works::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  pointer-events: none !important;

  background-image:
    linear-gradient(
      90deg,
      rgba(255, 250, 246, 0.97) 0%,
      rgba(255, 250, 246, 0.90) 40%,
      rgba(255, 250, 246, 0.56) 62%,
      rgba(255, 250, 246, 0.18) 78%,
      rgba(255, 250, 246, 0.00) 100%
    ),
    url("/assets/images/Key_Hero.png");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
}

/* Keep the existing section elements above the keys artwork. */
.md050-how-it-works > * {
  position: relative !important;
  z-index: 2 !important;
}

/*
 * Keep the keys visible in the upper-right on normal desktop widths.
 * The image already has large negative space, so this is intentionally subtle.
 */
@media (max-width: 1200px) {
  .md050-how-it-works::before {
    background-size: auto 100%;
    background-position: 76% top;
  }
}

@media (max-width: 900px) {
  .md050-how-it-works::before {
    opacity: 0.42;

    background-image:
      linear-gradient(
        rgba(255, 250, 246, 0.76),
        rgba(255, 250, 246, 0.76)
      ),
      url("/assets/images/Key_Hero.png");

    background-size: auto 100%;
    background-position: 82% top;
  }
}

@media (max-width: 700px) {
  .md050-how-it-works::before {
    opacity: 0.22;
    background-position: 88% top;
  }
}