/* MPMH_FRONTCONV009 — How It Works full-bleed editorial polish.
   Presentation-only owner for the public How It Works surface.
   Preserves copy, routes, forms, Signal semantics, readout authority, and all other surfaces. */

:root{
  --fc009-how-blue:#07121e;
  --fc009-how-blue-soft:#0a1a2a;
  --fc009-how-line:rgba(126,183,255,.20);
  --fc009-how-text:#d2e0e9;
  --fc009-how-muted:#91aabd;
  --fc009-how-heading:#f7fbff;
  --fc009-how-sky:#79b9eb;
  --fc009-how-green:#55d9ad;
}

/* The active How It Works surface owns the complete viewport field. The
   readable document remains contained; only the background extends edge-to-edge. */
html.mpmh-frontconv009[data-mpmh-active-surface="howitworks"],
html.mpmh-frontconv009[data-mpmh-active-surface="howitworks"] body,
html.mpmh-frontconv009[data-mpmh-active-surface="howitworks"] body #publicShell,
html.mpmh-frontconv009[data-mpmh-active-surface="howitworks"] body #publicShell #shellMain{
  background:var(--fc009-how-blue)!important;
  background-color:var(--fc009-how-blue)!important;
  background-image:none!important;
}

html.mpmh-frontconv009 body #publicShell #shellMain > .mpmh008-howitworks,
html.mpmh-frontconv009 body #publicShell #shellMain > .mpmh008-howitworks > .mpmh008-how-body,
html.mpmh-frontconv009 body #publicShell #shellMain > .mpmh008-howitworks .mpmh008-how-shell{
  background:var(--fc009-how-blue)!important;
  background-color:var(--fc009-how-blue)!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Break the panel background out to the viewport without widening the prose. */
html.mpmh-frontconv009 body #publicShell #shellMain > .mpmh008-howitworks{
  position:relative!important;
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  overflow:visible!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain > .mpmh008-howitworks > .mpmh008-how-body{
  width:100%!important;
  max-width:none!important;
  padding:0!important;
}

/* Contained editorial measure. */
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-shell{
  box-sizing:border-box!important;
  width:min(1180px,calc(100% - 48px))!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:30px clamp(20px,3vw,40px) 34px!important;
}

/* Opening hierarchy: still emphatic, but no longer billboard-heavy. */
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-hero{
  padding:8px 0 26px!important;
  border-bottom:1px solid var(--fc009-how-line)!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-platform-line{
  max-width:980px!important;
  margin:0 auto 24px!important;
  color:var(--fc009-how-heading)!important;
  font-size:clamp(27px,2.45vw,34px)!important;
  line-height:1.08!important;
  font-weight:900!important;
  letter-spacing:.028em!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-hero h1{
  max-width:860px!important;
  margin:0 0 17px!important;
  color:var(--fc009-how-sky)!important;
  font-size:clamp(24px,2.15vw,30px)!important;
  line-height:1.16!important;
  font-weight:650!important;
  letter-spacing:-.018em!important;
}

/* Editorial prose: shorter measure, slightly larger type, consistent rhythm. */
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-hero p,
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-section p{
  max-width:940px!important;
  margin:8px 0!important;
  color:var(--fc009-how-text)!important;
  font-size:13px!important;
  line-height:1.68!important;
  font-weight:400!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-section{
  padding:24px 0 25px!important;
  border-bottom:1px solid var(--fc009-how-line)!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-section h2{
  margin:0 0 9px!important;
  color:var(--fc009-how-heading)!important;
  font-size:17px!important;
  line-height:1.28!important;
  font-weight:760!important;
  letter-spacing:-.006em!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-label{
  margin:0 0 7px!important;
  color:var(--fc009-how-green)!important;
  font-size:8px!important;
  line-height:1.2!important;
  font-weight:850!important;
  letter-spacing:.095em!important;
  opacity:.88!important;
}

/* Paired sections keep the current structure but give the heavier right-hand
   copy the room it needs and quiet the divider. */
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-split{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr)!important;
  gap:38px!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-split>div+div{
  padding-left:38px!important;
  border-left:1px solid var(--fc009-how-line)!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-split p{
  max-width:100%!important;
}

/* Bottom navigation remains quiet and platform-like. */
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-footer{
  padding:24px 0 2px!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-footer>span{
  margin-bottom:11px!important;
  color:var(--fc009-how-muted)!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-footer nav{
  gap:24px!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-footer button{
  color:var(--fc009-how-sky)!important;
}
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-footer button:hover,
html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-footer button:focus-visible{
  color:var(--fc009-how-green)!important;
}

@media(max-width:900px){
  html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-shell{
    width:min(100%,calc(100% - 30px))!important;
    padding:24px 18px 30px!important;
  }
  html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-split{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }
  html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-split>div+div{
    padding-left:0!important;
    padding-top:20px!important;
    border-left:0!important;
    border-top:1px solid var(--fc009-how-line)!important;
  }
}

@media(max-width:600px){
  html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-shell{
    width:100%!important;
    padding:21px 16px 27px!important;
  }
  html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-platform-line{
    margin-bottom:19px!important;
    font-size:24px!important;
  }
  html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-hero h1{
    font-size:23px!important;
  }
  html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-hero p,
  html.mpmh-frontconv009 body #publicShell #shellMain .mpmh008-how-section p{
    font-size:12.5px!important;
    line-height:1.65!important;
  }
}