/* MYCELX Drinking Water page: left-aligned photo hero, applications tiles, "How it works" panel with limit cards, benefits, white-copy Get Started.
   Desktop values are PSD px x --mx-u (see mx-product.css). Stat cards scale with their own width (--pu = one PSD px inside a card). */
.mx-chero-bg{background-image:url("../img/drinking-water/drinking-water-hero.webp");background-position:62% 50%}
.mx-how{background:#091722 url("../img/drinking-water/drinking-water-how-it-works-background.webp") 50% 100%/100% 100% no-repeat}

/* ---------- Hero: copy left, blue eyebrow (PSB) ---------- */
.mx-dhero{text-align:left;min-height:clamp(520px,80svh,640px);display:flex;align-items:flex-end}
.mx-dhero .mx-eyebrow{color:var(--mx-blue-on-dark)}
.mx-dhero h1{max-width:none;margin:12px 0 0}
.mx-dhero-text{margin-top:16px;font-size:15px;line-height:1.55;max-width:26em;color:#fff}

/* ---------- Applications ---------- */
.mx-dapps .mx-sechead h2{margin-bottom:14px}

/* ---------- How it works (dark) ---------- */
.mx-how{padding:64px var(--mx-gutter) 72px;color:#fff}
.mx-how .mx-eyebrow{color:var(--mx-blue-on-dark)}
.mx-how h2{font:700 34px/1.1 var(--mx-font-head);margin:8px 0 18px;letter-spacing:0}
.mx-how-lead{font-size:15px;line-height:1.6;color:#fff}
.mx-how-list{list-style:none;margin-top:22px;font-size:15px;line-height:1.55}
.mx-how-list li{position:relative;padding-left:22px}
.mx-how-list li::before{content:"\2022";position:absolute;left:2px;top:0;color:var(--mx-blue-on-dark)}
.mx-how-cards{display:grid;gap:16px;max-width:520px;margin-top:36px}
.mx-dcard{container-type:inline-size;border-radius:calc(20*var(--pu,1px));background:#172d3f;color:#fff}
.mx-dcard>*{--pu:min(calc(100cqw/467),1px)}
.mx-dcard h3{font:700 calc(40*var(--pu))/1 var(--mx-font-head);letter-spacing:0;color:#fff}
.mx-dcard--flow{padding:20px 20px 22px}
.mx-dcard--limits{padding:20px 20px 20px}
.mx-dcard--flow h3{font-size:max(26px,calc(40*var(--pu)))}
.mx-dcard--limits h3{font-size:max(28px,calc(40*var(--pu)))}
.mx-dcard--flow p{margin-top:8px;font-size:15px;line-height:1.5;max-width:20em;color:#fff}
.mx-limits{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.mx-limit{position:relative;min-height:calc(93*100cqw/467);min-height:max(76px,calc(93/467*100cqw));padding:8px 12px;border-radius:10px;background:#fff;display:flex;flex-direction:column;justify-content:space-between}
.mx-limit dt{font-size:14px;line-height:1.3;color:#555}
.mx-limit-num{margin:0;font:700 clamp(40px,calc(75/467*100cqw),75px)/1 var(--mx-font-head);color:#091722;align-self:flex-end}
.mx-limit-num span{font-size:.42em;margin-left:.06em}
.mx-limit--mcl .mx-limit-num{color:var(--mx-blue)}
.mx-how-note{font-size:12px;line-height:1.5;color:#fff;margin-top:-4px}

/* ---------- Benefits ---------- */
.mx-dben .mx-sechead h2{margin-bottom:14px}

/* ---------- Get Started (values from the PSB: white copy, blue eyebrow, water tower) ---------- */
.mx-cta--dw{--mx-cta-wash:9,23,34;--mx-cta-bg:#1d43a8;--mx-cta-heading:#fff;--mx-cta-ink:#fff;--mx-cta-eyebrow:#226cf2;--mx-cta-phone:#fff;
  --mx-cta-h:671.8px;--mx-cta-x:445.8px;--mx-cta-top:184.6px;--mx-wx:.035}
.mx-cta--dw .mx-eyebrow{letter-spacing:.5em}
.mx-cta--dw .mx-stage{--mx-asp:2000/933;--mx-px:.14}
@media (min-width:768px){.mx.mx .mx-cta--dw .mx-stage{--mx-px:.18}}

.mx-anim :is(.mx-dhero-text,.mx-how-copy .mx-eyebrow,.mx-how-lead,.mx-how-list li,.mx-dcard,.mx-how-note){opacity:0}
.mx-anim .mx-how h2{visibility:hidden}

@media (min-width:550px){
  .mx.mx .mx-dhero-text{font-size:16px}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-dhero{min-height:clamp(600px,64svh,760px)}
  .mx.mx .mx-dhero-text{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432);max-width:24em}
  .mx.mx .mx-how{padding:96px var(--mx-gutter) 104px}
  .mx.mx .mx-how h2{font-size:calc(34px + 30.5*(var(--mx-frame-w) - 390px)/810);margin:10px 0 20px}
  .mx.mx .mx-how-lead,.mx.mx .mx-how-list{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-how-cards{max-width:560px}
}

/* ---- tablet landscape (>= 1024px): copy left, cards right ---- */
@media (min-width:1024px){
  .mx.mx .mx-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);column-gap:56px;align-items:start}
  .mx.mx .mx-how-cards{margin-top:48px;max-width:none}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx{--mx-chero-h:855;--mx-chero-top:298}
  .mx.mx .mx-dhero{display:block;padding-left:calc(var(--mx-side) + var(--mx-u)*119)}
  .mx.mx .mx-dhero h1{margin-top:calc(var(--mx-u)*20)}
  .mx.mx .mx-dhero-text{margin-top:calc(var(--mx-u)*24);max-width:calc(var(--mx-u)*410);font-size:calc(var(--mx-u)*20);line-height:1.4}

  .mx.mx .mx-dapps{padding:calc(var(--mx-u)*112) var(--mx-side) calc(var(--mx-u)*143)}
  .mx.mx .mx-dapps .mx-tiles{width:auto;margin-top:calc(var(--mx-u)*50);gap:calc(var(--mx-u)*38)}
  .mx.mx .mx-dapps .mx-tile{min-height:calc(var(--mx-u)*335);padding:calc(var(--mx-u)*38) calc(var(--mx-u)*29) calc(var(--mx-u)*30) calc(var(--mx-u)*48)}
  .mx.mx .mx-dapps .mx-tile p{max-width:calc(var(--mx-u)*290)}

  .mx.mx .mx-how{grid-template-columns:calc(var(--mx-u)*575) calc(var(--mx-u)*467);column-gap:calc(var(--mx-u)*127);height:calc(var(--mx-u)*971);padding:calc(var(--mx-u)*156) var(--mx-side) 0 calc(var(--mx-side) + var(--mx-u)*119);box-sizing:border-box}
  .mx.mx .mx-how h2{font-size:calc(var(--mx-u)*75);line-height:1.053;margin:calc(var(--mx-u)*20) 0 calc(var(--mx-u)*38)}
  .mx.mx .mx-how-lead{font-size:calc(var(--mx-u)*20);line-height:1.4}
  .mx.mx .mx-how-list{margin-top:calc(var(--mx-u)*28);font-size:calc(var(--mx-u)*20);line-height:1.4}
  .mx.mx .mx-how-list li{padding-left:calc(var(--mx-u)*36)}
  .mx.mx .mx-how-cards{margin-top:calc(var(--mx-u)*48);gap:calc(var(--mx-u)*20)}
  .mx.mx .mx-dcard--flow{padding:calc(var(--mx-u)*33) calc(var(--mx-u)*44) calc(var(--mx-u)*30)}
  .mx.mx .mx-dcard--limits{padding:calc(var(--mx-u)*32) calc(var(--mx-u)*42) calc(var(--mx-u)*30) calc(var(--mx-u)*44)}
  .mx.mx .mx-dcard--flow h3,.mx.mx .mx-dcard--limits h3{font-size:calc(var(--mx-u)*40)}
  .mx.mx .mx-dcard--flow p{font-size:calc(var(--mx-u)*20);line-height:1.4;margin-top:calc(var(--mx-u)*12);max-width:calc(var(--mx-u)*330)}
  .mx.mx .mx-limits{gap:calc(var(--mx-u)*14);margin-top:calc(var(--mx-u)*9)}
  .mx.mx .mx-limit{min-height:calc(var(--mx-u)*93);padding:calc(var(--mx-u)*14) calc(var(--mx-u)*21)}
  .mx.mx .mx-limit dt{font-size:calc(var(--mx-u)*16)}
  .mx.mx .mx-limit-num{font-size:calc(var(--mx-u)*75)}
  .mx.mx .mx-how-note{font-size:calc(var(--mx-u)*12);margin:calc(var(--mx-u)*-8) 0 0 calc(var(--mx-u)*3)}

  .mx.mx .mx-dben{padding:calc(var(--mx-u)*108) var(--mx-side) calc(var(--mx-u)*90)}
  .mx.mx .mx-dben .mx-benefit-list{margin-top:calc(var(--mx-u)*65);row-gap:calc(var(--mx-u)*77)}
  .mx.mx .mx-dben .mx-benefit{min-height:calc(var(--mx-u)*193)}
  .mx.mx .mx-dben .mx-benefit p{max-width:calc(var(--mx-u)*340)}
}
@media (max-width:767px){.mx-dhero{--mx-scrim:dark}}   /* readability on phones: white copy on the photo */