/* MYCELX Spill Products page: shared product hero / tiles / steps (mx-product.css) plus the bag that straddles "How it works" and the product cards.
   Desktop values are PSD px x --mx-u. Product cards scale with their own width (--pu = one PSD px inside a 371px-wide card). */
.mx-phero-bg{background-image:url("../img/spill-products/spill-products-hero-background.webp");background-position:25% 50%}
.mx-steps{background-image:url("../img/spill-products/spill-products-how-it-works-background.webp")}

/* ---------- Hero: product (fringed SheenDevil, mirrored as in the PSD) left, copy right; the product hangs over the white section below (only the background is clipped) ---------- */
.mx-sp-hero-clip{position:absolute;inset:0;z-index:-1;overflow:hidden}
.mx-sp-hero .mx-phero-product{width:min(100%,460px);max-width:none}

/* ---------- "How it works": four white cards on the dark glow, no step numbers; the bag hangs over the next section ---------- */
.mx-steps,.mx-prod{--bw:min(88vw,520px)}
.mx-sp-how{padding-bottom:0}
.mx-sp-how .mx-sechead-intro{color:#fff}
.mx-sp-how .mx-step h3{margin:14px 0 10px}
.mx-sp-bag{display:block;position:relative;z-index:2;width:var(--bw);height:auto;margin:32px auto calc(var(--bw)*-.17)}   /* .17 = the part of the bag (182 of 524 PSD px) below the dark section */

/* ---------- Product suite ---------- */
.mx-prod{position:relative;padding:calc(var(--bw)*.17 + 48px) var(--mx-gutter) 64px;background:#ededed}
.mx-pcards{list-style:none;display:grid;gap:20px;max-width:420px;margin:32px auto 0}
.mx-pcard{container-type:inline-size;border-radius:var(--mx-radius-img);background:#fff;overflow:hidden}
.mx-pcard>*{--pu:calc(100cqw/371)}
.mx-pcard-img{position:relative;height:calc(309*var(--pu))}
.mx-pcard-img img{position:absolute;left:calc(var(--x)*var(--pu));top:calc(var(--y)*var(--pu));width:calc(var(--w)*var(--pu));height:auto}
.mx-pcard-copy{padding:0 max(22px,calc(50*var(--pu))) max(28px,calc(40*var(--pu))) max(22px,calc(51*var(--pu)))}
.mx-pcard h3{font:700 max(24px,calc(30*var(--pu)))/1.1 var(--mx-font-head);color:var(--mx-ink);margin:0 0 8px}
.mx-pcard p{font-size:clamp(15px,calc(16*var(--pu)),17px);line-height:1.6;color:var(--mx-grey)}

/* ---------- Get Started: PSB values (copy x 987, black heading and copy, white eyebrow, blue phone; responders on the shore) ---------- */
.mx-cta--sp{--mx-cta-wash:255,255,255;--mx-cta-bg:#ededed;--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:111.1px;--mx-wx:.176}
.mx-cta--sp .mx-eyebrow{letter-spacing:.5em}
.mx-cta--sp .mx-stage{--mx-asp:2000/933;--mx-px:.14}
@media (min-width:768px){.mx.mx .mx-cta--sp .mx-stage{--mx-px:.18}}

.mx-anim :is(.mx-pcard,.mx-sp-bag){opacity:0}

/* ---- wide mobile (>= 550px): product cards become image-left rows ---- */
@media (min-width:550px){
  .mx.mx .mx-pcards{max-width:none}
  .mx.mx .mx-pcard{display:flex;align-items:center}
  .mx.mx .mx-pcard-img{flex:0 0 40%;height:auto;display:flex;align-items:center;justify-content:center;padding:24px}
  .mx.mx .mx-pcard-img img{position:static;width:100%;max-width:240px}
  .mx.mx .mx-pcard-copy{flex:1;padding:24px 28px 24px 0}
  .mx.mx .mx-pcard h3{font-size:26px}
  .mx.mx .mx-pcard p{font-size:15px}
  .mx.mx .mx-steps,.mx.mx .mx-prod{--bw:min(70vw,560px)}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-sp-hero .mx-phero-product{width:115%;max-width:none;margin:0 0 0 -15%}   /* bleeds to the left only, never into the copy column */
  .mx.mx .mx-sp-how{padding-bottom:0}
  .mx.mx .mx-sp-how .mx-step h3{margin:14px 0 10px}
  .mx.mx .mx-sp-bag{margin-top:48px}
  .mx.mx .mx-prod{padding:calc(var(--bw)*.17 + 64px) var(--mx-gutter) 104px}
  .mx.mx .mx-pcard h3{font-size:calc(26px + 4*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-pcard p{font-size:calc(15px + 1.2*(var(--mx-frame-w) - 768px)/432)}
}

/* ---- tablet landscape (>= 1024px): three product cards across ---- */
@media (min-width:1024px){
  .mx.mx .mx-pcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
  .mx.mx .mx-pcard{display:block}
  .mx.mx .mx-pcard-img{flex:none;display:block;height:calc(309*var(--pu));padding:0}
  .mx.mx .mx-pcard-img img{position:absolute;width:calc(var(--w)*var(--pu));max-width:none}
  .mx.mx .mx-pcard-copy{padding:0 max(22px,calc(50*var(--pu))) max(28px,calc(40*var(--pu))) max(22px,calc(51*var(--pu)))}
  .mx.mx .mx-pcard h3{font-size:max(24px,calc(30*var(--pu)))}
  .mx.mx .mx-pcard p{font-size:clamp(15px,calc(16*var(--pu)),17px)}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-sp-hero{overflow:visible;z-index:2}
  .mx.mx .mx-sp-hero{padding:calc(var(--mx-u)*332) var(--mx-side) 0 calc(var(--mx-side) + var(--mx-u)*785)}
  .mx.mx .mx-sp-hero .mx-phero-product{position:absolute;left:calc(var(--mx-side) - var(--mx-u)*189);top:calc(var(--mx-u)*213);width:calc(var(--mx-u)*1111);max-width:none;margin:0}
  .mx.mx .mx-sp-hero .mx-phero-text{max-width:calc(var(--mx-u)*393);margin-top:calc(var(--mx-u)*14)}
  .mx.mx .mx-sp-hero .mx-btn{margin-top:calc(var(--mx-u)*31)}
  .mx.mx .mx-sechead h2{line-height:1.053}

  .mx.mx .mx-sp-apps{padding:calc(var(--mx-u)*170) var(--mx-side) calc(var(--mx-u)*131)}
  .mx.mx .mx-sp-apps .mx-sechead-intro{max-width:calc(var(--mx-u)*849)}
  .mx.mx .mx-sp-apps .mx-tiles{width:calc(var(--mx-u)*1387);gap:0 calc(var(--mx-u)*38);margin-top:calc(var(--mx-u)*58)}
  .mx.mx .mx-sp-apps .mx-tile{min-height:calc(var(--mx-u)*329);padding:calc(var(--mx-u)*32) calc(var(--mx-u)*30) calc(var(--mx-u)*30) calc(var(--mx-u)*41)}
  .mx.mx .mx-sp-apps .mx-tile-icon{height:calc(var(--mx-u)*74);align-items:flex-end}
  .mx.mx .mx-sp-apps .mx-tile h3{margin:calc(var(--mx-u)*18) 0 calc(var(--mx-u)*11)}
  .mx.mx .mx-sp-apps .mx-tile p{max-width:calc(var(--mx-u)*335)}

  .mx.mx .mx-steps,.mx.mx .mx-prod{--bw:calc(var(--mx-u)*1068)}
  .mx.mx .mx-sp-how{padding:calc(var(--mx-u)*141) var(--mx-side) 0}
  .mx.mx .mx-sp-how .mx-sechead-intro{max-width:calc(var(--mx-u)*924)}
  .mx.mx .mx-sp-how .mx-steps-list{margin-top:calc(var(--mx-u)*67);gap:0 calc(var(--mx-u)*28)}
  .mx.mx .mx-sp-how .mx-step{min-height:calc(var(--mx-u)*582);padding:calc(var(--mx-u)*31) calc(var(--mx-u)*30) calc(var(--mx-u)*30) calc(var(--mx-u)*42)}
  .mx.mx .mx-sp-how .mx-step-icon{height:calc(var(--mx-u)*200);margin:calc(var(--mx-u)*24) 0 0}
  .mx.mx .mx-sp-how .mx-step h3{font-size:calc(var(--mx-u)*30);margin:calc(var(--mx-u)*38) 0 calc(var(--mx-u)*15)}
  .mx.mx .mx-sp-bag{margin:calc(var(--mx-u)*64) auto calc(var(--bw)*-.17)}

  .mx.mx .mx-prod{padding:calc(var(--bw)*.17 + var(--mx-u)*45) var(--mx-side) calc(var(--mx-u)*163)}
  .mx.mx .mx-prod .mx-sechead-intro{max-width:calc(var(--mx-u)*630)}
  .mx.mx .mx-pcards{width:calc(var(--mx-u)*1172);max-width:100%;gap:0 calc(var(--mx-u)*30);margin:calc(var(--mx-u)*46) auto 0}
  .mx.mx .mx-pcard{min-height:calc(var(--mx-u)*551);border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-pcard-copy{padding:0 calc(var(--mx-u)*50) calc(var(--mx-u)*40) calc(var(--mx-u)*51)}
  .mx.mx .mx-pcard h3{font-size:calc(var(--mx-u)*30);margin-bottom:calc(var(--mx-u)*8)}
  .mx.mx .mx-pcard p{font-size:calc(var(--mx-u)*16);line-height:1.625}
}