/* MPMH_FRONTCONV010 — public hierarchy consistency + state-aware How It Works.
   Presentation owner only, except server-rendered How It Works copy can reflect existing selected-cause state.
   No routing destination, Signal formula, form, Category, Leaderboard geometry, or backend authority change. */

:root{
  --fc010-line:rgba(126,183,255,.20);
  --fc010-line-soft:rgba(126,183,255,.14);
  --fc010-sky:#79b9eb;
  --fc010-text:#d2e0e9;
  --fc010-muted:#91aabd;
  --fc010-heading:#f7fbff;
  --fc010-green:#55d9ad;
}

/* One section, one heading. Decorative eyebrow labels are retired here. */
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh008-how-label,
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh-insight-kicker{display:none!important}

/* HOW IT WORKS — one thin 2x2 information frame, no card backgrounds. */
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr)!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--fc010-line)!important;
  background:transparent!important;
}
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cell{
  box-sizing:border-box!important;
  min-width:0!important;
  padding:22px 24px 23px!important;
  background:transparent!important;
}
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cell:nth-child(odd){border-right:1px solid var(--fc010-line)!important}
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cell:nth-child(-n+2){border-bottom:1px solid var(--fc010-line)!important}
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cell h2{
  margin:0 0 10px!important;
  color:var(--fc010-heading)!important;
  font-size:17px!important;
  line-height:1.28!important;
  font-weight:760!important;
  letter-spacing:-.006em!important;
}
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cell p{
  max-width:none!important;
  margin:8px 0!important;
  color:var(--fc010-text)!important;
  font-size:13px!important;
  line-height:1.68!important;
}
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cause-link{
  color:var(--fc010-sky)!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(121,185,235,.45)!important;
}
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cause-link:hover,
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cause-link:focus-visible{
  color:#a8d9ff!important;
  border-bottom-color:#a8d9ff!important;
  outline:0!important;
}
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-outbound::after{
  content:" ↗";
  color:var(--fc010-muted)!important;
  font-size:.8em!important;
}

/* The grid itself supplies the separator at this point. */
html.mpmh-frontconv010 body #publicShell #shellMain .mpmh008-how-section.mpmh010-how-grid{border-bottom:1px solid var(--fc010-line)!important}

/* INSIGHTS — remove presentation-slide kicker hierarchy; keep active state green. */
html.mpmh-frontconv010 body #shellMain .mpmh-insight-page{padding-top:30px!important}
html.mpmh-frontconv010 body #shellMain .mpmh-insight-page h2{
  max-width:900px!important;
  margin:0 0 10px!important;
  color:#91cfff!important;
  font-size:clamp(25px,2.55vw,35px)!important;
  line-height:1.10!important;
  font-weight:560!important;
  letter-spacing:-.018em!important;
}
html.mpmh-frontconv010 body #shellMain .mpmh007-section header span,
html.mpmh-frontconv010 body #shellMain .mpmh007-two-col header span{
  color:var(--fc010-sky)!important;
  font-size:9px!important;
  letter-spacing:.075em!important;
}
html.mpmh-frontconv010 body #shellMain .mpmh007-section header strong,
html.mpmh-frontconv010 body #shellMain .mpmh007-two-col header strong{color:#809aab!important}

/* SELECTED CAUSE — green remains state/active/value; subsection labels become informational sky. */
html.mpmh-frontconv010 body #selectedCauseHero .mpmh008-activity-panel section>header span,
html.mpmh-frontconv010 body #selectedCauseHero .mpmh008-campaign-panel section>header span{
  color:var(--fc010-sky)!important;
  letter-spacing:.075em!important;
}

/* Categories and Leaderboards intentionally retain their locked geometry. */

@media(max-width:900px){
  html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-grid{grid-template-columns:1fr!important}
  html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cell{border-right:0!important;border-bottom:1px solid var(--fc010-line)!important}
  html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cell:last-child{border-bottom:0!important}
}

@media(max-width:600px){
  html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cell{padding:18px 16px 19px!important}
  html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cell h2{font-size:16px!important}
  html.mpmh-frontconv010 body #publicShell #shellMain .mpmh010-how-cell p{font-size:12.5px!important;line-height:1.65!important}
}