/* REGEN Retrofit page: images for the shared product components, hero layout (copy left / photo right), 4-stat band,
   "Why Operators Retrofit with REGEN" section, Get Started tuning. Desktop = PSD px x --mx-u. */
.mx-phero-bg{background-image:url("../img/regen-retrofit/regen-retrofit-hero-background.webp");background-position:50% 100%}
.mx-stats{background-image:url("../img/regen-retrofit/regen-retrofit-stats-background.webp")}
.mx-rr-why{background-color:#091722;background-image:url("../img/regen-retrofit/regen-retrofit-benefits-background.webp");background-repeat:no-repeat;background-size:cover;background-position:50% 50%}

/* ---- hero: mobile = copy, then the photo full-bleed under it ---- */
.mx-rr-hero{display:flex;flex-direction:column;padding-bottom:0}
.mx-rr-hero .mx-phero-copy{order:-1;position:relative;z-index:1}
.mx-rr-hero .mx-phero-product{width:calc(100% + 2*var(--mx-gutter));max-width:none;height:auto;margin:32px calc(-1*var(--mx-gutter)) 0}

/* ---- stats: 4th value is set smaller in the PSB (75px vs 100px) ---- */
.mx-stat-sm{font-size:.75em}
.mx-stat-num{min-height:1em}
.mx-stat-label{max-width:12em}

/* ---- tiles (How it works): 3 cards on white ---- */
.mx-rr-tiles{list-style:none}

/* ---- Why operators retrofit (dark section, own layout) ---- */
.mx-rr-why{padding:64px var(--mx-gutter) 72px;color:#fff}
.mx-rr-why .mx-eyebrow{color:var(--mx-blue-on-dark)}
.mx-rr-why h2{font:700 34px/1.08 var(--mx-font-head);margin:10px 0 0;letter-spacing:0}
.mx-rr-why-list{list-style:none;display:grid;gap:32px;margin-top:40px}
.mx-rr-why-row{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px}
.mx-rr-why-num{grid-row:1;grid-column:1;padding-top:7px;font:700 16px/1 var(--mx-font-head);letter-spacing:.05em;text-transform:uppercase;color:var(--mx-blue-on-dark)}
.mx-rr-why-row h3{grid-column:2;font:700 24px/1.15 var(--mx-font-head);margin:0}
.mx-rr-why-row p{grid-column:2;margin-top:6px;font-size:15px;line-height:1.6;color:#fff}
.mx-anim :is(.mx-rr-why-row){opacity:0}
.mx-anim .mx-rr-why h2{visibility:hidden}

/* ---- Get Started: PSB values (copy at x 987, white heading / copy, blue phone, dark wash) ---- */
.mx-cta--rr{--mx-cta-wash:9,23,34;--mx-cta-bg:#091722;--mx-cta-heading:#fff;--mx-cta-ink:#fff;--mx-cta-eyebrow:var(--mx-blue-on-dark);--mx-cta-phone:var(--mx-blue-on-dark);
  --mx-cta-h:671.8px;--mx-cta-x:425.6px;--mx-cta-top:189.6px;--mx-wx:.12}
.mx-cta--rr .mx-eyebrow{letter-spacing:.5em}
.mx-cta--rr .mx-stage{--mx-asp:2.1424;--mx-px:.14}
@media (min-width:768px){.mx.mx .mx-cta--rr .mx-stage{--mx-px:.18}}
@media (min-width:1200px){.mx.mx .mx-cta--rr .mx-body>p:not(.mx-eyebrow){max-width:calc(335px*var(--mx-m))}}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-rr-hero{display:flex;flex-direction:column;min-height:0;padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 56px) var(--mx-gutter) 0}
  .mx.mx .mx-rr-hero .mx-phero-copy{max-width:36em}
  .mx.mx .mx-rr-hero .mx-phero-product{width:calc(100% + 2*var(--mx-gutter));max-width:none;margin:40px calc(-1*var(--mx-gutter)) 0}
  .mx.mx .mx-stats-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
  .mx.mx .mx-rr-why{padding:96px var(--mx-gutter) 104px}
  .mx.mx .mx-rr-why h2{font-size:calc(34px + 30.5*(var(--mx-frame-w) - 390px)/810);margin-top:12px}
  .mx.mx .mx-rr-why-list{gap:40px;margin-top:56px}
  .mx.mx .mx-rr-why-row{grid-template-columns:60px minmax(0,1fr)}
  .mx.mx .mx-rr-why-num{font-size:18px;padding-top:9px}
  .mx.mx .mx-rr-why-row h3{font-size:calc(24px + 6*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-rr-why-row p{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432);margin-top:8px}
}

/* ---- tablet landscape (>= 1024px) ---- */
@media (min-width:1024px){
  .mx.mx .mx-stats-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}
  .mx.mx .mx-rr-why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;align-items:start}
  .mx.mx .mx-rr-why-list{margin-top:0;padding-top:8px}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-rr-hero{display:block;height:calc(var(--mx-u)*853);padding:calc(var(--mx-u)*256) var(--mx-side) 0 calc(var(--mx-side) + var(--mx-u)*99)}
  .mx.mx .mx-rr-hero .mx-phero-product{position:absolute;left:calc(var(--mx-side) + var(--mx-u)*138);top:calc(var(--mx-u)*216);width:calc(var(--mx-u)*1582);max-width:none;margin:0}
  .mx.mx .mx-rr-hero .mx-phero-copy{max-width:none}
  .mx.mx .mx-rr-hero .mx-phero-text{max-width:calc(var(--mx-u)*420)}
  .mx.mx .mx-stats{padding:calc(var(--mx-u)*146) var(--mx-side) calc(var(--mx-u)*116)}
  .mx.mx .mx-stat-label{max-width:calc(var(--mx-u)*190)}
  .mx.mx .mx-rr-how{padding:calc(var(--mx-u)*126) var(--mx-side) calc(var(--mx-u)*145)}
  .mx.mx .mx-rr-tiles{width:calc(var(--mx-u)*1110);margin-top:calc(var(--mx-u)*53)}   /* QA: 'Remove Existing Media' on one line as in the PSB (browser text runs a little wider than the PSD's 1054) */
  .mx.mx .mx-rr-tiles .mx-tile{min-height:calc(var(--mx-u)*318);padding:calc(var(--mx-u)*34) calc(var(--mx-u)*29) calc(var(--mx-u)*30) calc(var(--mx-u)*44)}
  .mx.mx .mx-rr-tiles .mx-tile-icon{height:calc(var(--mx-u)*116)}
  .mx.mx .mx-rr-tiles .mx-tile h3{margin:calc(var(--mx-u)*7) 0 calc(var(--mx-u)*12)}
  .mx.mx .mx-rr-why{display:grid;grid-template-columns:calc(var(--mx-u)*601) minmax(0,1fr);column-gap:0;align-items:start;min-height:calc(var(--mx-u)*715);padding:calc(var(--mx-u)*215) var(--mx-side) calc(var(--mx-u)*120) calc(var(--mx-side) + var(--mx-u)*120)}
  .mx.mx .mx-rr-why-head{padding-top:calc(var(--mx-u)*5)}
  .mx.mx .mx-rr-why .mx-eyebrow{font-size:calc(var(--mx-u)*20)}
  .mx.mx .mx-rr-why h2{font-size:calc(var(--mx-u)*75);line-height:1.053;margin:calc(var(--mx-u)*24) 0 0}
  .mx.mx .mx-rr-why-list{gap:calc(var(--mx-u)*61);padding:0;margin:0}
  .mx.mx .mx-rr-why-row{grid-template-columns:calc(var(--mx-u)*60) minmax(0,1fr);column-gap:0}
  .mx.mx .mx-rr-why-num{font-size:calc(var(--mx-u)*20);padding-top:calc(var(--mx-u)*9)}
  .mx.mx .mx-rr-why-row h3{font-size:calc(var(--mx-u)*30);line-height:1.1}
  .mx.mx .mx-rr-why-row p{font-size:calc(var(--mx-u)*16);line-height:1.625;margin-top:calc(var(--mx-u)*4)}
}

/* QA: the How It Works intro on one line on desktop, as in the PSB (browser text runs a little wider than the 780u default) */
@media (min-width:1200px){.mx.mx .mx-rr-how .mx-sechead-intro{max-width:calc(var(--mx-u)*900)}}