/* MYCELX REGEN page: images for the shared product components, the blue call-out banner, the "how it works" section and Get Started tuning.
   Desktop values are PSD px x --mx-u (see mx-product.css). */
.mx-phero-bg{background-image:url("../img/regen/regen-hero-background.webp")}
.mx-stats{background-image:url("../img/regen/regen-stats-background.webp")}
.mx-rg-how{background-image:url("../img/regen/regen-how-it-works-background.webp")}

/* ================= Blue call-out banner ================= */
.mx-rg-call{background:var(--mx-blue);color:#fff}
.mx-rg-call-in{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:28px var(--mx-gutter)}
.mx-rg-call h2{font:700 28px/1.12 var(--mx-font-head);letter-spacing:0}   /* client 10-13: Retrofit bar more prominent (PSB) */
.mx-rg-call p{margin-top:6px;font-size:15px;line-height:1.5}
.mx.mx .mx-rg-call .mx-btn{background:#fff;border-color:#fff;color:var(--mx-blue-text);width:100%}

/* ================= Stats modifiers ================= */
.mx-stat-unit--sm{font-size:.3em;margin-left:.06em}
.mx-stat-unit--stack{align-self:flex-start;display:inline-block;font-size:.4em;line-height:1;margin:.1em 0 0 .18em}
.mx-stat-unit--pct{font-size:1em}

/* ================= How it works ================= */
.mx-rg-how{position:relative;z-index:2;padding:56px var(--mx-gutter) 0;color:#fff;background-color:#091722;background-repeat:no-repeat;background-size:100% 100%;background-position:50% 0}
.mx-rg-cards{list-style:none;display:grid;gap:20px;max-width:520px;margin:32px auto 0}
.mx-rg-card{display:flex;flex-direction:column;padding:24px 24px 28px;border-radius:var(--mx-radius-img);background:#fff;color:var(--mx-ink)}
.mx-rg-card-icon{display:flex;align-items:center;justify-content:center;height:calc(235*var(--mx-is))}
.mx-rg-card-icon img{height:calc(var(--h,200)*var(--mx-is));width:auto;max-width:100%}
.mx-rg-card h3{font:700 26px/1.1 var(--mx-font-head);margin:14px 0 10px}
.mx-rg-card p{font-size:15px;line-height:1.55;color:var(--mx-grey)}
.mx-rg-how{display:flow-root}   /* keeps the media's negative margin inside the section (it collapsed through, so the dark band covered the whole unit) */
.mx-rg-media{margin:40px 0 -16.26%}   /* the unit hangs 229 of its 750 PSD px below the band, as in the PSB */   /* the diagram overhangs the dark band by 229 of its 1408 PSD px */
.mx-rg-media img{display:block;width:100%;height:auto}
.mx-rg-benefits{padding-top:calc((100% - 2*var(--mx-gutter))*.1626 + 40px)}

/* ================= Applications: 4 cards ================= */
.mx-rg-apps .mx-tiles{max-width:520px}

/* ================= Get Started ================= */
.mx-cta--regen{--mx-cta-bg:#fff;--mx-cta-wash:255,255,255;--mx-cta-ink:#000;--mx-cta-eyebrow:var(--mx-blue-text);--mx-cta-phone:var(--mx-blue-text);
  --mx-cta-h:671.8px;--mx-cta-x:425.6px;--mx-cta-top:138.5px;--mx-wx:.184}
.mx-cta--regen .mx-eyebrow{letter-spacing:.5em}
.mx-cta--regen .mx-stage{--mx-asp:2000/933;--mx-px:.14}

/* ================= Animation start states ================= */
.mx-anim :is(.mx-rg-call-in>*,.mx-rg-card,.mx-rg-media){opacity:0}

@media (hover:hover){.mx.mx .mx-rg-call .mx-btn:hover{background:#eaf1ff;border-color:#eaf1ff;color:var(--mx-blue-text)}}

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-rg-call .mx-btn{width:auto}
  .mx.mx .mx-rg-apps .mx-tiles{max-width:none}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-rg-call-in{flex-direction:row;align-items:center;justify-content:space-between;gap:32px;padding:32px var(--mx-gutter)}
  .mx.mx .mx-rg-call h2{font-size:calc(30px + 8*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-rg-call p{font-size:16px}
  .mx.mx .mx-rg-call .mx-btn{flex:none}
  .mx.mx .mx-rg-stats .mx-stats-list{grid-template-columns:1fr 1fr;gap:44px 24px}
  .mx.mx .mx-rg-apps .mx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx.mx .mx-rg-how{padding:104px var(--mx-gutter) 0}
  .mx.mx .mx-rg-cards{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
  .mx.mx .mx-rg-card{padding:28px 24px 32px}
  .mx.mx .mx-rg-card h3{font-size:calc(24px + 4*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-rg-card p{font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-rg-media{margin-top:64px}
  .mx.mx .mx-rg-benefits{padding-top:calc((100% - 2*var(--mx-gutter))*.1626 + 64px)}
  .mx.mx .mx-cta--regen .mx-stage{--mx-px:.18}
}

/* ---- tablet landscape (>= 1024px) ---- */
@media (min-width:1024px){
  .mx.mx .mx-rg-stats .mx-stats-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-phero{padding-top:calc(var(--mx-u)*328)}
  .mx.mx .mx-phero-product{left:calc(var(--mx-side) + var(--mx-u)*96);top:calc(var(--mx-u)*161);width:calc(var(--mx-u)*603)}
  .mx.mx .mx-phero-text{margin-top:calc(var(--mx-u)*14);max-width:calc(var(--mx-u)*535)}
  .mx.mx .mx-phero .mx-btn{margin-top:calc(var(--mx-u)*24)}

  .mx.mx .mx-rg-call-in{height:calc(var(--mx-u)*234);padding:0 var(--mx-side);justify-content:center;gap:calc(var(--mx-u)*133)}
  .mx.mx .mx-rg-call h2{font-size:calc(var(--mx-u)*44);line-height:1.1}
  .mx.mx .mx-rg-call p{margin-top:calc(var(--mx-u)*10);font-size:calc(var(--mx-u)*16);line-height:1.75}
  .mx.mx .mx-rg-call .mx-btn{min-width:calc(var(--mx-u)*237);min-height:calc(var(--mx-u)*42);padding:0;font-size:calc(var(--mx-u)*16)}

  .mx.mx .mx-rg-stats{padding-bottom:calc(var(--mx-u)*94)}
  .mx.mx .mx-rg-stats .mx-stats-list{grid-template-columns:359fr 397fr 326fr 331fr;gap:0}

  .mx.mx .mx-rg-apps .mx-sechead-intro{max-width:calc(var(--mx-u)*650)}
  .mx.mx .mx-rg-apps .mx-tiles{width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--mx-u)*25)}
  .mx.mx .mx-rg-apps .mx-tile{min-height:calc(var(--mx-u)*389);padding:calc(var(--mx-u)*29) calc(var(--mx-u)*20) calc(var(--mx-u)*36) calc(var(--mx-u)*43)}
  .mx.mx .mx-rg-apps .mx-tile p{max-width:calc(var(--mx-u)*264)}

  .mx.mx .mx-rg-how{padding:calc(var(--mx-u)*139) var(--mx-side) 0}
  .mx.mx .mx-rg-how .mx-sechead-intro{max-width:calc(var(--mx-u)*905)}
  .mx.mx .mx-rg-cards{margin-top:calc(var(--mx-u)*62);gap:calc(var(--mx-u)*24)}
  .mx.mx .mx-rg-card{min-height:calc(var(--mx-u)*619);padding:calc(var(--mx-u)*60) calc(var(--mx-u)*40) calc(var(--mx-u)*40) calc(var(--mx-u)*66);border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-rg-card-icon{position:relative;left:calc(var(--mx-u)*-13)}
  .mx.mx .mx-rg-card h3{font-size:calc(var(--mx-u)*40);margin:calc(var(--mx-u)*32) 0 calc(var(--mx-u)*23)}
  .mx.mx .mx-rg-card p{font-size:calc(var(--mx-u)*16);line-height:1.625}
  .mx.mx .mx-rg-media{margin-top:calc(var(--mx-u)*146)}

  .mx.mx .mx-rg-benefits{padding-top:calc((100% - 2*var(--mx-side))*.1626 + var(--mx-u)*96);padding-bottom:calc(var(--mx-u)*160)}
  .mx.mx .mx-rg-benefits .mx-sechead-intro{max-width:calc(var(--mx-u)*745)}
  .mx.mx .mx-cta--regen .mx-stage{--mx-px:.18}
}