/* B.3 landing page. Scoped to #mm-b3 so nothing here reaches the Insights app, which keeps Heebo.
   Tokens, type scale and breakpoints are the approved B.3 values and are not to be adjusted without Paul.
   Provisional by the spec's own terms: the nav, the brand lockup and the footer. */
#mm-b3 {
  --ink: #09090b; --dark: #222427; --muted: #52525b; --soft: #71717a;
  --line: #e4e4e7; --neutral: #f9fafb; --vanilla: #f0efeb; --vanillaline: #dcdad4;
  --affiliate: #d3f0f4; --affline: #bbdde3; --afftile: #91d9e4;
  color: var(--ink); background: #fff;
  font: 400 15px/1.6 Inter, Arial, sans-serif;
}
#mm-b3 * { box-sizing: border-box }
#mm-b3 h1, #mm-b3 h2, #mm-b3 h3, #mm-b3 h4, #mm-b3 p { margin: 0 }
#mm-b3 h1, #mm-b3 h2, #mm-b3 h3, #mm-b3 h4 { font-family: Manrope, Arial, sans-serif; letter-spacing: -.035em; color: var(--ink) }
#mm-b3 h1 { font-size: clamp(29px, 4.3vw, 51px); font-weight: 800; line-height: 1.14; letter-spacing: -.052em }
#mm-b3 h2 { font-size: clamp(25px, 3vw, 36px); font-weight: 700; line-height: 1.22 }
#mm-b3 h3 { font-size: clamp(19px, 2.1vw, 25px); font-weight: 700; line-height: 1.28 }
#mm-b3 h4 { font-size: 17px; font-weight: 700; line-height: 1.35 }
#mm-b3 p { color: var(--muted) }
#mm-b3 a { color: inherit; text-decoration: none }
#mm-b3 .i { width: 21px; height: 21px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
#mm-b3 .i.sm { width: 17px; height: 17px }
#mm-b3 .i.lg { width: 27px; height: 27px }
#mm-b3 .eyebrow { font: 800 10px/1.5 Manrope, Arial, sans-serif; letter-spacing: .115em; text-transform: uppercase; color: var(--soft) }
#mm-b3 .wrap { max-width: 1090px; margin: 0 auto }
#mm-b3 .section { padding: 53px clamp(16px, 4.1vw, 45px); border-bottom: 1px solid var(--line) }
#mm-b3 .sect-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px }
#mm-b3 .sect-head p { max-width: 850px }
#mm-b3 .smallcopy { font-size: 13px; line-height: 1.6 }
#mm-b3 .lead { font-weight: 600; color: var(--ink) }

/* Header. Provisional per the spec: real destinations, only the pages that exist, plus a sign-in door.
   The deployed icon is dark artwork, so it sits on the page rather than in B.3's dark tile. */
#mm-b3 .nav { padding: 15px clamp(14px, 3vw, 30px); display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line) }
#mm-b3 .brand { display: flex; align-items: center; gap: 9px; font-family: Manrope, Arial, sans-serif; font-weight: 800; letter-spacing: -.04em; font-size: 18px; white-space: nowrap }
#mm-b3 .brand img { height: 30px; width: 30px; display: block }
#mm-b3 .navlinks { display: flex; align-items: center; gap: 19px; font-size: 12px; color: #52525b; font-weight: 600 }
#mm-b3 .navlinks a.navtext:hover, #mm-b3 .navlinks a.navsign:hover { color: var(--ink) }
/* The sign-in door stays at every width. B.3 hides the nav text on a narrow screen, but a
   contributor on a phone still has to be able to get in. */
#mm-b3 .navlinks a.navsign { white-space: nowrap }
#mm-b3 .cta { font: 700 13px/1.25 Inter, Arial, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 18px; border-radius: 9px; white-space: nowrap }
#mm-b3 .cta.dark { background: var(--dark); color: #fff }
#mm-b3 .cta.outline { border: 1px solid #fff; color: #fff; background: transparent }
#mm-b3 .cta .arrow { font-size: 17px; font-weight: 400 }
#mm-b3 .who { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted) }
#mm-b3 [hidden] { display: none !important }
#mm-b3 .who b { color: var(--ink); font-weight: 700 }

#mm-b3 .hero-main { text-align: center; max-width: 750px; margin: 0 auto 35px; display: flex; flex-direction: column; align-items: center; gap: 16px }
#mm-b3 .hero-main .subline { font-weight: 600; color: var(--ink); font-size: 16px }
#mm-b3 .hero-main .intro { max-width: 630px; font-size: 14px }
#mm-b3 .ctas { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap }
#mm-b3 .tiny { font-size: 11px; color: var(--soft) }

#mm-b3 .hub { background: var(--neutral); border: 1px solid var(--line); border-radius: 15px; padding: 24px; display: flex; flex-direction: column; gap: 22px }
#mm-b3 .hub-heading { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center }
#mm-b3 .hub-heading h2 { max-width: 660px; font-weight: 800 }
#mm-b3 .hub-heading p { font-size: 13px }
#mm-b3 .center-eyebrow { display: flex; gap: 7px; align-items: center }
#mm-b3 .hub-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
#mm-b3 .hubcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; min-width: 0; padding: 15px; display: flex; flex-direction: column; gap: 9px; text-align: left; cursor: pointer; min-height: 125px; transition: border-color .15s }
#mm-b3 .hubcard.active { border: 2px solid var(--dark); padding: 14px }
#mm-b3 .hubcard:focus-visible, #mm-b3 .seg:focus-visible { outline: 3px solid var(--afftile); outline-offset: 2px }
#mm-b3 .hubnum { font: 800 11px Manrope, Arial, sans-serif; color: var(--muted); display: flex; align-items: center; justify-content: space-between; min-height: 18px }
#mm-b3 .hubname { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: -8px }
#mm-b3 .hubname strong { font: 700 clamp(16px, 2vw, 24px)/1.2 Manrope, Arial, sans-serif; letter-spacing: -.04em; color: var(--ink) }
#mm-b3 .hubcard .desc { font: 400 12px/1.45 Inter, Arial, sans-serif; color: var(--muted) }
#mm-b3 .detail { background: var(--vanilla); border: 1px solid var(--vanillaline); border-radius: 13px; padding: 23px; display: flex; flex-direction: column; gap: 12px; min-height: 170px }
#mm-b3 .detail p { font-size: 14px; max-width: 830px }
#mm-b3 .detail .note { display: flex; align-items: center; gap: 7px; font: 700 10px/1.5 Manrope, Arial, sans-serif; letter-spacing: .045em; color: #69665f }

#mm-b3 .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
#mm-b3 .card { border: 1px solid var(--line); border-radius: 13px; padding: 20px; background: var(--neutral); display: flex; flex-direction: column; gap: 13px; min-width: 0 }
#mm-b3 .card .top { display: flex; align-items: center; justify-content: space-between }
#mm-b3 .card p { font-size: 13px }
#mm-b3 .textlink { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 7px; font-weight: 700; color: var(--dark); font-size: 12px; padding-top: 10px }
#mm-b3 .vanilla { background: var(--vanilla); border: 1px solid var(--vanillaline) }
#mm-b3 .network-strip { border-radius: 13px; padding: 24px; margin-top: 14px; display: flex; flex-direction: column; gap: 7px }
#mm-b3 .network-strip h3 { display: flex; align-items: center; gap: 10px }

#mm-b3 .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px }
#mm-b3 .whitecard { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 20px; min-width: 0; display: flex; flex-direction: column; gap: 15px }
#mm-b3 .segments { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 3px; background: var(--neutral) }
#mm-b3 .seg { background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 10px 5px; cursor: pointer; font: 700 12px Inter, Arial, sans-serif; color: var(--muted) }
#mm-b3 .seg.active { background: var(--dark); color: #fff }
#mm-b3 .bullets { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none }
#mm-b3 .bullets li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5 }
#mm-b3 .bullets .i { width: 16px; height: 16px; margin-top: 2px; color: #52525b }
#mm-b3 .takeaway { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--ink) }

#mm-b3 .snapshot { background: var(--neutral); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 14px }
#mm-b3 .modelname { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12px }
#mm-b3 .modelname strong { font-family: Manrope, Arial, sans-serif; color: var(--ink) }
#mm-b3 .modelname span { color: var(--soft) }
#mm-b3 .track { position: relative; height: 11px; background: #e0e3e5; border-radius: 8px; margin-top: 7px }
/* Real figures from /api/peers. Band is the middle 50%, dot is the peer average.
   Nothing is drawn until the data lands, and nothing is drawn for a cut under the 5-organization floor. */
#mm-b3 .track .band { position: absolute; top: 0; height: 11px; border-radius: 8px; background: #bbc5c8 }
#mm-b3 .track .avg { position: absolute; top: -2px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--dark); border: 2px solid var(--neutral) }
#mm-b3 .trackwrap .thin { font-size: 11px; color: var(--soft); margin-top: 6px }
#mm-b3 .axis { display: flex; justify-content: space-between; color: var(--soft); font-size: 11px }
#mm-b3 .legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--muted) }
#mm-b3 .legend span { display: flex; gap: 6px; align-items: center }
#mm-b3 .legend .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dark) }
#mm-b3 .mid50 { width: 17px; height: 8px; background: #bbc5c8; border-radius: 3px }

#mm-b3 .oneofus { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 13px; padding: 22px; margin-top: 14px }
#mm-b3 .oneofus .left { display: flex; flex-direction: column; gap: 7px }
#mm-b3 .oneofus .left p { font-size: 13px }

#mm-b3 .strategy-shell { background: #fff; border: 1px solid var(--line); border-radius: 17px; padding: 24px; display: flex; flex-direction: column; gap: 18px }
#mm-b3 .strategy-shell .sect-head { margin-bottom: 0 }
#mm-b3 .affiliate { background: var(--affiliate); border: 1px solid var(--affline); border-radius: 13px; padding: 22px; display: flex; flex-direction: column; gap: 16px }
#mm-b3 .affmain { display: flex; align-items: flex-start; gap: 14px }
#mm-b3 .tile { background: var(--afftile); border-radius: 10px; padding: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--dark); flex-shrink: 0 }
#mm-b3 .afftext { display: flex; flex-direction: column; gap: 11px; min-width: 0 }
#mm-b3 .afftext p { font-size: 13px; color: #254950 }
#mm-b3 .afftext .bigline { font-weight: 700; color: var(--ink) }
#mm-b3 .afffoot { border-top: 1px solid #a3ced5; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
#mm-b3 .afffoot .micro { font-size: 11px; color: #254950 }

#mm-b3 .stepcard { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 19px; display: flex; flex-direction: column; gap: 11px }
#mm-b3 .stepcard .top { display: flex; justify-content: space-between; align-items: center }
#mm-b3 .stepcard p { font-size: 12px }
#mm-b3 .shareicon { background: var(--dark); border-radius: 8px; color: #fff; padding: 9px; display: inline-flex }
#mm-b3 .journey-title { text-align: center; display: flex; flex-direction: column; gap: 5px; margin-top: 5px }
#mm-b3 .route { border-radius: 13px; padding: 22px; display: flex; flex-direction: column; gap: 12px; min-height: 350px }
#mm-b3 .route p { font-size: 13px }
#mm-b3 .route .textlink { border-top: 1px solid rgba(75, 75, 75, .17); padding-top: 14px }
#mm-b3 .route.coached { background: var(--affiliate); border: 1px solid var(--affline) }
#mm-b3 .route.coached p { color: #254950 }
#mm-b3 .route .route-top { display: flex; align-items: center; justify-content: space-between; gap: 10px }
#mm-b3 .reassure { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 19px; display: flex; flex-direction: column; gap: 5px; margin-top: 14px }
#mm-b3 .reassure p { font-size: 13px }

#mm-b3 .closing { background: var(--dark); color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 17px; padding-top: 60px; padding-bottom: 60px }
#mm-b3 .closing h2 { color: #fff; max-width: 760px; font-weight: 800; font-size: clamp(28px, 3.5vw, 45px) }
#mm-b3 .closing p { color: #d4d4d8; font-size: 14px; max-width: 590px }
#mm-b3 .closing .mini-link { font-size: 12px; color: #fff; font-weight: 600 }

#mm-b3 .footer { padding: 35px clamp(16px, 4.1vw, 45px); background: #fff }
#mm-b3 .footer-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px }
#mm-b3 .footbrand { display: flex; flex-direction: column; gap: 10px }
#mm-b3 .footbrand p { font-size: 13px; max-width: 290px }
#mm-b3 .footbrand img { height: 22px; display: block }
#mm-b3 .footcols { display: grid; grid-template-columns: 1fr 1fr; gap: 15px }
#mm-b3 .footcol { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; color: #52525b }
#mm-b3 .footcol strong { font-size: 13px; color: var(--ink); margin-bottom: 5px }
#mm-b3 .footcol a:hover { color: var(--ink) }
#mm-b3 .foot-bottom { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: #71717a; font-size: 11px }

/* Reveal on first scroll into view, once. No fade-out: dimming text someone may still be reading
   is the part of this pattern that annoys. Content is visible without JavaScript and for anyone
   who has asked for less motion. */
#mm-b3 .reveal { opacity: 1 }
#mm-b3.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease }
#mm-b3.js .reveal.seen { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  #mm-b3.js .reveal { opacity: 1; transform: none; transition: none }
}

@media (max-width: 740px) {
  #mm-b3 .navlinks .navtext { display: none }
  #mm-b3 .section { padding: 37px 17px }
  #mm-b3 .hub { padding: 14px; gap: 15px }
  #mm-b3 .hubcard { padding: 11px; min-height: 110px }
  #mm-b3 .hubcard.active { padding: 10px }
  #mm-b3 .hubname { gap: 5px }
  #mm-b3 .hubname .i { width: 18px; height: 18px }
  #mm-b3 .hubname strong { font-size: clamp(13px, 3vw, 18px) }
  #mm-b3 .hubcard .desc { font-size: 11px }
  #mm-b3 .three { grid-template-columns: 1fr }
  #mm-b3 .strategy-shell { padding: 15px }
  #mm-b3 .card { padding: 17px }
  #mm-b3 .oneofus { align-items: flex-start; flex-direction: column }
}
@media (max-width: 620px) {
  #mm-b3 .two { grid-template-columns: 1fr }
  #mm-b3 .affmain { flex-direction: column }
  #mm-b3 .footer-main { grid-template-columns: 1fr }
  #mm-b3 .route { min-height: 0 }
  #mm-b3 .hubcard .desc { font-size: 10px }
}
@media (max-width: 420px) {
  #mm-b3 .hub-cards { gap: 5px }
  #mm-b3 .hubcard { padding: 8px; min-height: 100px }
  #mm-b3 .hubcard.active { padding: 7px }
  #mm-b3 .hubname strong { font-size: 13px }
  #mm-b3 .hubname .i { width: 15px; height: 15px }
  #mm-b3 .hubcard .desc { font-size: 10px }
  #mm-b3 .nav .cta { padding: 10px; font-size: 11px }
  #mm-b3 .brand { font-size: 14px }
  #mm-b3 .stepcard { padding: 10px }
  #mm-b3 .stepcard h3 { font-size: 16px }
}