/* msp-steps.css 2026-09-23 (task interactive-2026-09-22-blocked-drains-lead-quality-analysis).
   1. Step marker: lab step-marker, approved variant h1-medallion-ticks (Jordan 2026-09-23, hiw-lab/lab-approvals.json).
      The old .hiwc-chip wore the button fill and read as a button. Now: a white numbered medallion on the photo edge
      (CSS counter, no markup change) and the promise as a ticked line. Nothing here uses the #036B96 button fill.
   2. Phone swipe rows (Jordan 2026-09-23, "All three"): under 768px the steps (.hiwc-row), "which job is yours"
      (.hbi-grid) and "the work we install" (.msp-scope .grid) become native scroll-snap rows with a peek of the next
      card. Layout is CSS only; msp-swipe-rows.js adds the dots. Desktop is unchanged. */
.hiwc-row{counter-reset:hiwc}
.hiwc-row>.hiwc-col{counter-increment:hiwc}
.hiwc-row .hiwc-diagram{margin-bottom:30px!important}
.hiwc-row .hiwc-chip{display:block!important;position:relative;background:none!important;color:#1f2527!important;padding:0!important;border-radius:4px !important;font-weight:700;font-size:.92rem;line-height:1.3;margin:0 0 8px!important;text-align:center;box-shadow:none!important}
.hiwc-row .hiwc-chip::before{content:"";display:inline-block;width:6px;height:11px;border:solid #0383BF;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin:0 10px 3px 0;vertical-align:middle}
.hiwc-row .hiwc-chip::after{content:counter(hiwc);position:absolute;left:max(16px,calc(50% - 154px));top:-54px;width:48px;height:48px;box-sizing:border-box;border-radius:50%;background:#fff;color:#0383BF;font-weight:800;font-size:1.35rem;line-height:42px;text-align:center;border:3px solid #e2edf1;box-shadow:0 4px 12px rgba(10,61,92,.22)}
@media(max-width:767px){
.hiwc-row,.hbi-grid,.msp-scope .grid{position:relative;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:-15px!important;margin-right:-15px!important;padding:4px 15px 10px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hiwc-row::-webkit-scrollbar,.hbi-grid::-webkit-scrollbar,.msp-scope .grid::-webkit-scrollbar{display:none}
.hiwc-row>*,.hbi-grid>*,.msp-scope .grid>*{flex:0 0 84%!important;max-width:84%!important;scroll-snap-align:center;margin-bottom:0!important}
.msp-scope .grid>.c{display:block!important}
.msp-scope .grid .c img{width:100%!important;height:170px!important;min-height:0!important}
.msp-swipe-dots{display:flex;justify-content:center;gap:8px;margin:6px 0 4px}
.msp-swipe-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#c9dbe3;cursor:pointer}
.msp-swipe-dots button.on{background:#0383BF;width:22px;border-radius:4px}
}
@media(min-width:768px){.msp-swipe-dots{display:none}}