/* MYCELX Polishers page: images for the shared product components, 3-stat band, 6-tile grid, dark performance section, Get Started tuning. */
.mx-phero-bg{background-image:url("../img/polishers/polishers-hero-background.webp")}
.mx-stats{background-image:url("../img/polishers/polishers-stats-background.webp")}

/* stats: three items */
.mx-stats-list{grid-template-columns:1fr}
.mx-stat-num{white-space:nowrap}

/* performance benefits: polisher image overlapping the top of the dark panel */
.mx-perf{--pw:min(78vw,340px);position:relative;padding-top:0}
.mx-perf-media{position:relative;z-index:1;width:var(--pw);margin:0 auto}
.mx-perf-media img{display:block;width:100%;height:auto}
.mx-perf-panel{position:relative;margin-top:calc(var(--pw)*-.647);padding:calc(var(--pw)*.647 + 32px) var(--mx-gutter) 64px;color:#fff;background:#091722 url("../img/polishers/polishers-benefits-background.webp") 50% 0/100% 100% no-repeat}
.mx-perf .mx-sechead-intro{color:#fff}
.mx-perf .mx-benefit h3,.mx-perf .mx-benefit p{color:#fff}
.mx-perf .mx-benefit-num{color:var(--mx-blue-on-dark)}
.mx-anim .mx-perf-media{opacity:0}

@media (min-width:550px){
  .mx.mx .mx-stats-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mx.mx .mx-tiles{max-width:none}
  .mx.mx .mx-perf{--pw:min(60vw,420px)}
}

@media (min-width:768px){
  .mx.mx .mx-phero-product{max-width:none;width:120%;margin-left:-20%}   /* bleeds to the left only, never into the copy column */
  .mx.mx .mx-stats-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mx.mx .mx-stat-num{font-size:calc(40px + 12*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-perf{--pw:min(52vw,520px)}
  .mx.mx .mx-perf-panel{padding:calc(var(--pw)*.647 + 48px) var(--mx-gutter) 104px}
  .mx.mx .mx-perf .mx-benefit-list{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .mx.mx .mx-perf .mx-benefit-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:1200px){
  .mx.mx .mx-phero{padding:calc(var(--mx-u)*291) var(--mx-side) 0 calc(var(--mx-side) + var(--mx-u)*860)}
  .mx.mx .mx-phero-product{left:calc(var(--mx-side) - var(--mx-u)*145);top:calc(var(--mx-u)*220);width:calc(var(--mx-u)*893);margin:0}
  .mx.mx .mx-phero-text{max-width:calc(var(--mx-u)*456)}
  .mx.mx .mx-phero h1{margin-top:calc(var(--mx-u)*30)}
  .mx.mx .mx-phero-text{margin-top:calc(var(--mx-u)*20)}
  .mx.mx .mx-stats-list{display:flex;justify-content:center;gap:0 calc(var(--mx-u)*63)}
  .mx.mx .mx-stat{min-height:calc(var(--mx-u)*150);padding-left:calc(var(--mx-u)*45)}
  .mx.mx .mx-stat-num{height:calc(var(--mx-u)*100)}
  .mx.mx .mx-stat--sm .mx-stat-num{font-size:calc(var(--mx-u)*75);height:calc(var(--mx-u)*100);align-items:flex-start}
  .mx.mx .mx-stat-label{margin-top:calc(var(--mx-u)*14)}
  .mx.mx .mx-sechead h2{line-height:1.053}
  .mx.mx .mx-apps{padding:calc(var(--mx-u)*124) var(--mx-side) calc(var(--mx-u)*75)}
  .mx.mx .mx-tiles{width:100%;margin-top:calc(var(--mx-u)*49);gap:calc(var(--mx-u)*23) calc(var(--mx-u)*38)}
  .mx.mx .mx-tile{min-height:calc(var(--mx-u)*363);padding:calc(var(--mx-u)*26) calc(var(--mx-u)*30) calc(var(--mx-u)*30) calc(var(--mx-u)*40)}
  .mx.mx .mx-tile:nth-child(n+4){min-height:calc(var(--mx-u)*343)}
  .mx.mx .mx-tile-icon{height:calc(var(--mx-u)*104)}
  .mx.mx .mx-tile h3{margin:calc(var(--mx-u)*8) 0 calc(var(--mx-u)*14)}
  .mx.mx .mx-perf{--pw:calc(var(--mx-u)*928)}
  .mx.mx .mx-perf-media{margin:0 auto}
  .mx.mx .mx-perf-panel{padding:calc(var(--mx-u)*652) var(--mx-side) calc(var(--mx-u)*171)}
  .mx.mx .mx-perf .mx-sechead-intro{max-width:calc(var(--mx-u)*860)}
  .mx.mx .mx-perf .mx-benefit-list{margin-top:calc(var(--mx-u)*53)}
  .mx.mx .mx-perf .mx-benefit p{max-width:calc(var(--mx-u)*370)}
}

/* Get Started: PSB values (copy at x 1077, white copy on the dark offshore photo, eyebrow .5em in blue) */
.mx-cta--polishers{--mx-cta-wash:9,23,34;--mx-cta-bg:var(--mx-navy);--mx-cta-heading:#fff;--mx-cta-ink:#fff;--mx-cta-eyebrow:#226cf2;--mx-cta-phone:#fff;--mx-cta-h:671.8px;--mx-cta-x:490.4px;--mx-cta-top:202.6px;--mx-wx:.11}
.mx-cta--polishers .mx-eyebrow{letter-spacing:.5em}
.mx-cta--polishers .mx-stage{--mx-asp:2000/933;--mx-px:.14}