/* ========================================================================
   MPMH_FRONTCONV003 · SURFACE OWNERSHIP + PUBLIC FRAME RECONCILIATION
   Base: FRONTCONV002 presentation foundation over frozen FRONTCONV001.
   Scope: presentation only.

   Contract:
   1. Background/surface ownership may run full bleed to the viewport edges.
   2. Consumer content remains inside one contained, responsive content frame.
   3. Black is the neutral route canvas; deep platform blue is a deliberate
      owned workspace, never an accidental side gutter or inherited strip.
   4. No application behavior, data authority, Signal, Category, routing,
      form, /go/to, readout formula, accounting, publication or writer change.
   ======================================================================== */
html.mpmh-frontconv003{
  --fc3-black:#000;
  --fc3-blue:#061b2b;
  --fc3-blue-deep:#041725;
  --fc3-blue-soft:#08283f;
  --fc3-line:rgba(121,191,255,.17);
  --fc3-line-soft:rgba(121,191,255,.09);
  --fc3-sky:#79bfff;
  --fc3-green:#27f28b;
  --fc3-white:#f7fbff;
  --fc3-copy:#c6d5df;
  --fc3-muted:#8195a2;
  --fc3-frame:1480px;
  --fc3-gutter:clamp(24px,4.8vw,82px);
  background:#000;
}
html.mpmh-frontconv003,
html.mpmh-frontconv003 body,
html.mpmh-frontconv003 body #publicShell{
  min-width:0;
  overflow-x:clip;
}
html.mpmh-frontconv003 body #publicShell #shellMain{
  position:relative!important;
  min-width:0!important;
  background:#000!important;
}

/* ------------------------------------------------------------------------
   FULL-BLEED SURFACE OWNERSHIP
   ------------------------------------------------------------------------
   The hero/workspace owns the viewport background. The child content frame
   stays centered and bounded. This retires the visible black side-gutter
   effect without changing route, scroll or content behavior.
   ------------------------------------------------------------------------ */
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-state>.mpmh280-hero{
  box-sizing:border-box!important;
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  border-left:0!important;
  border-right:0!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-selected .mpmh280-selected-hero{
  min-height:clamp(530px,71vh,620px)!important;
  padding:clamp(42px,4.4vw,68px) var(--fc3-gutter) clamp(38px,4vw,58px)!important;
  background:
    radial-gradient(circle at 13% 42%,rgba(34,120,177,.10),transparent 29%),
    linear-gradient(90deg,#071f31 0%,#061b2b 58%,#041725 100%)!important;
  background-color:var(--fc3-blue)!important;
  box-shadow:inset 0 1px 0 rgba(121,191,255,.18),inset 0 -1px 0 rgba(121,191,255,.10)!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-entry .mpmh054-entry-hero{
  min-height:clamp(500px,67vh,590px)!important;
  padding:clamp(42px,4.4vw,68px) var(--fc3-gutter) clamp(38px,4vw,58px)!important;
  background:radial-gradient(circle at 13% 44%,rgba(24,100,150,.09),transparent 29%),#000!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-state>.mpmh280-hero .mpmh280-hero-bridge-row{
  box-sizing:border-box!important;
  width:min(100%,1320px)!important;
  max-width:1320px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Existing/legacy selected-Cause stage uses the same visual ownership rule
   when that surface is the visible owner. Geometry inside it is untouched. */
html.mpmh-frontconv003 body #publicShell #shellMain #selectedCauseHero.mph-home-cause-stage{
  box-sizing:border-box!important;
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  padding-left:var(--fc3-gutter)!important;
  padding-right:var(--fc3-gutter)!important;
  border-left:0!important;
  border-right:0!important;
}

/* ------------------------------------------------------------------------
   ONE PUBLIC CONTENT FRAME
   ------------------------------------------------------------------------ */
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-section{
  box-sizing:border-box!important;
  width:min(100%,var(--fc3-frame))!important;
  max-width:var(--fc3-frame)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--fc3-gutter)!important;
  padding-right:var(--fc3-gutter)!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-section::before{
  left:var(--fc3-gutter)!important;
  right:var(--fc3-gutter)!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-section-head{
  max-width:1320px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-section-head-split{
  gap:clamp(32px,5.5vw,82px)!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-section-copy{
  max-width:790px!important;
}

/* ------------------------------------------------------------------------
   SELECTED HOME · HERO RHYTHM
   The scale/readout is the conclusion of the hero rather than a detached
   footer floating at the bottom of a tall stage.
   ------------------------------------------------------------------------ */
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-selected .mpmh288-full-hero-switch{
  min-height:clamp(250px,22vw,330px)!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-selected .mpmh053-selected-scale-line{
  margin-top:clamp(30px,3.2vw,48px)!important;
  padding-top:15px!important;
  border-top:1px solid rgba(121,191,255,.11)!important;
  color:#8fa5b2!important;
  line-height:1.55!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-selected .mpmh053-selected-scale-line strong{
  color:#c4d5df!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-selected .mpmh053-selected-scale-line b{
  color:var(--fc3-green)!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-selected .mpmh280-selected-hero .mpmh280-context-line{
  margin-top:clamp(18px,1.6vw,24px)!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-selected .mpmh280-selected-hero .mpmh280-hero-bridge{
  max-width:820px!important;
  color:#cbdbe5!important;
}

/* ------------------------------------------------------------------------
   GLOBAL NAV / PAGE-ENTRY RELATIONSHIP
   No route or control behavior changes. This only quiets inherited chrome
   and gives selected/hover states one consistent hierarchy.
   ------------------------------------------------------------------------ */
html.mpmh-frontconv003 body #publicShell #mpmhUnifiedShell .mpmh-nav-search-row{
  border-bottom-color:rgba(121,191,255,.13)!important;
  box-shadow:none!important;
}
html.mpmh-frontconv003 body #publicShell #mpmhUnifiedShell #tabs.tabs{
  column-gap:clamp(11px,1.1vw,19px)!important;
}
html.mpmh-frontconv003 body #publicShell #mpmhUnifiedShell #tabs .tab-btn{
  opacity:.88!important;
  transition:color .15s ease,opacity .15s ease!important;
}
html.mpmh-frontconv003 body #publicShell #mpmhUnifiedShell #tabs .tab-btn:hover,
html.mpmh-frontconv003 body #publicShell #mpmhUnifiedShell #tabs .tab-btn:focus-visible{
  opacity:1!important;
  color:var(--fc3-sky)!important;
  -webkit-text-fill-color:var(--fc3-sky)!important;
}
html.mpmh-frontconv003 body #publicShell #mpmhUnifiedShell #tabs .tab-btn.active,
html.mpmh-frontconv003 body #publicShell #mpmhUnifiedShell #tabs .tab-btn[aria-selected="true"]{
  opacity:1!important;
  color:var(--fc3-green)!important;
  -webkit-text-fill-color:var(--fc3-green)!important;
}
html.mpmh-frontconv003 body #publicShell #mpmhLiveSectionHeader.mpmh-live-section-header{
  background:linear-gradient(180deg,#071e2f 0%,#061827 100%)!important;
  border-top-color:rgba(121,191,255,.17)!important;
  border-bottom-color:rgba(121,191,255,.17)!important;
}

/* ------------------------------------------------------------------------
   REUSABLE PUBLIC SECTION + READOUT PATTERNS
   These normalize presentation only; no values or labels are recalculated.
   ------------------------------------------------------------------------ */
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-kicker,
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-eyebrow{
  color:var(--fc3-green)!important;
  text-shadow:none!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-section-head h2{
  text-wrap:balance;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-readout-row,
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh055-network-grid,
html.mpmh-frontconv003 body #publicShell .mpmh076-stats-summary{
  border-color:var(--fc3-line)!important;
  box-shadow:none!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-readout-row>div,
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh055-network-readouts>div,
html.mpmh-frontconv003 body #publicShell .mpmh076-stats-summary>div{
  border-color:var(--fc3-line-soft)!important;
}
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-readout-row strong,
html.mpmh-frontconv003 body #publicShell #shellMain .mpmh055-network-readouts strong,
html.mpmh-frontconv003 body #publicShell .mpmh076-stats-summary strong{
  font-variant-numeric:tabular-nums lining-nums;
}

/* ------------------------------------------------------------------------
   CROSS-SURFACE CONTINUITY
   Leave the individual experiences intact, but remove accidental inherited
   outer shadows/plates from the major public route owners.
   ------------------------------------------------------------------------ */
html.mpmh-frontconv003 body #publicShell #shellMain > .tab-panel,
html.mpmh-frontconv003 body #publicShell #shellMain > section.tab-panel{
  box-shadow:none!important;
}
html.mpmh-frontconv003 body #publicShell :is(.brand-profile-panel,.signals-panel,.mpmh044-readout-page,.mpmh076-insights){
  --fc3-local-line:rgba(121,191,255,.14);
}
html.mpmh-frontconv003 body #publicShell .brand-profile-panel .side-head{
  border-color:var(--fc3-local-line)!important;
}

/* ------------------------------------------------------------------------
   RESPONSIVE RECONCILIATION
   Full bleed remains full bleed; only the contained content gutter contracts.
   ------------------------------------------------------------------------ */
@media(max-width:1100px){
  html.mpmh-frontconv003{--fc3-gutter:clamp(22px,4vw,46px);}
  html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-section-head-split{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-section-copy{
    padding-top:0!important;
  }
}
@media(max-width:820px){
  html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-selected .mpmh280-selected-hero,
  html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-entry .mpmh054-entry-hero{
    min-height:auto!important;
    padding-top:42px!important;
    padding-bottom:42px!important;
  }
  html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-selected .mpmh288-full-hero-switch{
    min-height:240px!important;
  }
}
@media(max-width:620px){
  html.mpmh-frontconv003{--fc3-gutter:20px;}
  html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-state>.mpmh280-hero{
    width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
  }
  html.mpmh-frontconv003 body #publicShell #shellMain .mpmh280-home-selected .mpmh053-selected-scale-line{
    margin-top:26px!important;
    padding-top:12px!important;
  }
  html.mpmh-frontconv003 body #publicShell #mpmhUnifiedShell #tabs.tabs{
    column-gap:10px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html.mpmh-frontconv003 body #publicShell *{scroll-behavior:auto!important;}
}