/* MYCELX MERSEP page: images for the shared product components, no-number step cards, the overhanging element photo, Get Started tuning.
   Desktop values are PSD px x --mx-u. */
.mx-phero-bg{background-image:url("../img/mersep/mersep-hero-background.webp")}
.mx-stats{background-image:url("../img/mersep/mersep-stats-background.webp")}
.mx-steps{background-image:url("../img/mersep/mersep-how-it-works-background.webp")}

/* hero product is a tall vessel: smaller than MAC's on mobile / tablet */
.mx-phero-product{width:min(44%,180px)}

/* step cards without a number: icon first */
.mx-how{position:relative;z-index:2;padding-bottom:0}
.mx-how .mx-step-icon{margin-top:4px}
.mx-how .mx-step h3{margin:14px 0 10px}
.mx-how-photo{position:relative;display:block;width:100%;max-width:560px;height:auto;margin:36px auto -56px}   /* overhangs the dark section into the benefits */
.mx-mbenefits{padding-top:110px}
.mx-mbenefits .mx-sechead-intro{max-width:40em}

/* Get Started: PSB values (copy x 987, black heading/paragraph, blue eyebrow (.5em) + phone, power-plant photo) */
.mx-cta--mersep{--mx-cta-heading:#000;--mx-cta-ink:#000;--mx-cta-eyebrow:#226cf2;--mx-cta-phone:#226cf2;--mx-cta-h:671.8px;--mx-cta-x:425.6px;--mx-cta-top:109.7px;--mx-wx:.01}
.mx-cta--mersep .mx-eyebrow{letter-spacing:.5em}
.mx-cta--mersep .mx-stage{--mx-asp:2000/933;--mx-px:.14}
@media (min-width:768px){.mx.mx .mx-cta--mersep .mx-stage{--mx-px:.18}}

.mx-anim .mx-how-photo{opacity:0}

@media (min-width:768px){
  .mx.mx .mx-phero-product{max-width:260px}
  .mx.mx .mx-how .mx-step{padding:36px 28px 32px}
  .mx.mx .mx-how .mx-step-icon{height:170px;margin:0}
  .mx.mx .mx-how-photo{margin:56px auto -96px;max-width:none;width:min(100%,900px)}
  .mx.mx .mx-mbenefits{padding-top:170px}
}
@media (min-width:1024px){
  .mx.mx .mx-phero-product{max-width:300px}
}
@media (min-width:1200px){
  .mx.mx .mx-phero{padding:calc(var(--mx-u)*275) var(--mx-side) 0 calc(var(--mx-side) + var(--mx-u)*719)}
  .mx.mx .mx-phero-product{left:calc(var(--mx-side) + var(--mx-u)*212);top:calc(var(--mx-u)*158);width:calc(var(--mx-u)*422);max-width:none}
  .mx.mx .mx-phero-text{max-width:calc(var(--mx-u)*560)}
  .mx.mx .mx-tile{min-height:calc(var(--mx-u)*491)}
  .mx.mx .mx-tile-icon{height:calc(var(--mx-u)*108)}
  .mx.mx .mx-how{padding-top:calc(var(--mx-u)*137)}
  .mx.mx .mx-how .mx-sechead h2{line-height:1.054;margin:calc(var(--mx-u)*30) 0 calc(var(--mx-u)*26)}
  .mx.mx .mx-how .mx-sechead-intro{max-width:calc(var(--mx-u)*660)}
  .mx.mx .mx-steps-list{margin-top:calc(var(--mx-u)*74);gap:0 calc(var(--mx-u)*30)}
  .mx.mx .mx-how .mx-step{min-height:calc(var(--mx-u)*608);padding:calc(var(--mx-u)*45) calc(var(--mx-u)*30) calc(var(--mx-u)*31) calc(var(--mx-u)*35)}
  .mx.mx .mx-how .mx-step-icon{height:calc(var(--mx-u)*200);margin:0}
  .mx.mx .mx-how .mx-step h3{font-size:calc(var(--mx-u)*30);margin:calc(var(--mx-u)*25) 0 calc(var(--mx-u)*18)}
  .mx.mx .mx-how-photo{width:calc(var(--mx-u)*1118);margin:calc(var(--mx-u)*154) auto calc(var(--mx-u)*-165)}
  .mx.mx .mx-mbenefits{padding:calc(var(--mx-u)*210) var(--mx-side) calc(var(--mx-u)*155)}   /* QA: less space under the photo */
  .mx.mx .mx-mbenefits .mx-sechead-intro{max-width:calc(var(--mx-u)*890)}
  .mx.mx .mx-benefit-list{gap:calc(var(--mx-u)*57) calc(var(--mx-u)*29)}
}