.proof{--proof-ring:#fff;--proof-text:var(--color-neutral-100);--proof-sub:var(--color-neutral-60);display:flex;align-items:center;gap:12px}
.hero .proof,.mh-section--deep .proof,.proof--dark{--proof-ring:#002d3c;--proof-text:#fff;--proof-sub:#c9d6dc}
.proof--tint{--proof-ring:#cfe3ea}
.proof-avatars{display:flex;align-items:center}
.proof-avatar{width:36px;height:36px;border-radius:50%;border:2px solid var(--proof-ring);background:#1f5f86;color:#fff;font-size:12px;font-weight:var(--font-weight-bold,700);line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.proof-avatar+.proof-avatar{margin-left:-10px}
.proof-avatar:nth-child(2){background:#2d7a99}
.proof-avatar:nth-child(3){background:#3a8fb0}
.proof-avatar:nth-child(4){background:#4aa3c2}
.proof-avatar:nth-child(5){background:#5fb4d1;color:#002d3c}
.proof-avatar p{margin:0!important;line-height:0;width:100%;height:100%}
.proof-avatar img{width:100%;height:100%;margin:0!important;padding:0!important;object-fit:cover}
.proof-text{display:flex;flex-direction:column;line-height:1.2;color:var(--proof-text)}
.proof-text strong{font-size:15px;color:var(--proof-text);font-weight:var(--font-weight-bold,700)}
.proof-text span{font-size:12px;color:var(--proof-sub)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 24px;margin-bottom:10px}
.sec-head>div:first-child{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:900px}
.sec-head span{color:var(--color-two-90)}
.sec-head h2{margin:0}
.sec-head h2,.sec-head p,.intent-heading{text-wrap:balance}
.sec-head a:not(.btn){color:var(--color-two-100);text-decoration:none;white-space:nowrap}
.sec-head a:not(.btn):hover{text-decoration:underline}
@media (min-width:600px){
  .sec-head{flex-wrap:nowrap}
}
@media (min-width:992px){
  .sec-head{margin-left:auto;margin-right:auto}
}
.sec-actions{display:flex;flex-wrap:wrap;align-items:center;gap:5px 5px;margin-top:5px}
.sec-actions .btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:auto;max-width:100%;margin:0;color:#fff!important;text-decoration:none}
.sec-actions .btn.btn-alt{background:transparent;box-shadow:inset 0 0 0 2px var(--color-two-100);border-color:transparent;color:var(--color-two-100)!important}
.sec-actions .btn.btn-alt:hover,.sec-actions .btn.btn-alt:focus{background:var(--color-two-100);color:#fff!important}
.sec-actions a:not(.btn){color:var(--color-two-100);text-decoration:none}
.sec-actions a:not(.btn):hover{text-decoration:underline}
.eyebrow,.mh-eyebrow{display:block;color:var(--color-tertiary-100,var(--color-two-100,#00779a));font-weight:700}
/* eyebrow--light: the eyebrow on a dark background (hero bands, the blue band, dark cards), in the light teal.
   Add it to the eyebrow on any page or component that sits on a dark background: class="eyebrow eyebrow--light". */
.eyebrow--light,.mh-eyebrow--light{color:#7fc4d6}


.mh{--mh-teal:var(--color-tertiary-100,var(--color-two-100,#00779a));--mh-teal-dark:var(--color-tertiary-110,var(--color-two-110,#18506d));--mh-tint:var(--color-tertiary-5,var(--color-two-5,#e8f1f4));--mh-ink:var(--color-neutral-100);--mh-muted:var(--color-neutral-60);--mh-line:var(--color-neutral-20);--mh-soft:var(--color-neutral-5);--mh-white:#fff;--mh-radius:12px;color:var(--mh-ink)}
.mh *,.mh *::before,.mh *::after{box-sizing:border-box}
.mh p{margin:0}
.mh h1,.mh h2,.mh h3{margin:0}
/* Width: .mh-inner copies the site's own .container (1230px, 15px sides, 20px below 1200px), so content
   lines up with the logo and breadcrumb whether or not the CMS wraps the block in a container.
   Grey and dark backgrounds run the full width of the screen, drawn behind the section. */
.mh-section{position:relative;isolation:isolate;padding:clamp(40px,6vw,64px) 0}
.mh-section--soft::before,.mh-section--deep::before,.mh-section--blue::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:calc(100vw + 2px);z-index:-1}
.mh-section--soft::before{background:var(--mh-soft)}
.mh-section--deep::before{background:var(--mh-teal-dark)}
.mh-section--deep{color:var(--mh-white)}
.mh-inner,.mh-nav__inner{box-sizing:border-box;width:100%;max-width:1230px;margin:0 auto;padding-left:15px;padding-right:15px}
@media (max-width:1199px){.mh-inner,.mh-nav__inner{padding-left:20px;padding-right:20px}}
.container .mh-inner,.container .mh-nav__inner{padding-left:0;padding-right:0}
.mh-lead{color:var(--mh-muted);max-width:60ch;text-wrap:pretty}
.mh-section--deep .mh-lead{color:var(--mh-white)}
.mh-stack{display:flex;flex-direction:column;gap:20px}
/* buttons: the site's own .btn / .btn.btn-bordered, laid out side by side with no stray margins */
.mh .btn{display:inline-flex;align-items:center;justify-content:center;width:auto;max-width:100%;margin:0;text-decoration:none}
.mh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:10px;}
.mh-actions--center{justify-content:center}
/* mh-foot: a centred closing block under a table or grid (heading, a line of copy, buttons). Markup:
     <div class="mh-foot"><h3>…</h3><p class="mh-lead">…</p><div class="mh-actions">…</div></div>
   On the blue band the heading goes white and the lead the soft grey-blue. */
.mh-foot{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:720px;margin:clamp(32px,5vw,48px) auto 0;text-align:center}
.mh-foot .mh-lead{margin:0 auto}
.mh-foot .mh-actions{justify-content:center;padding-top:8px}
.mh-section--blue .mh-foot h3{color:var(--mh-white)}
/* numbered steps (mh-steps) on the blue band: light teal circles with dark numbers, step text in the soft grey-blue */
.mh-section--blue .mh-steps li::before{background:#7fc4d6;color:#002d3c}
.mh-section--blue .mh-steps strong{color:var(--mh-white)}
.mh-section--blue .mh-steps p{color:#c9d6dc}
.mh-section--blue .mh-foot .mh-lead{color:#c9d6dc}
.mh-actions .btn,.mh-actions .mh-btn{flex:0 0 auto}

/* ── LEGACY BUTTONS (mh-btn) ──────────────────────────────────────────────────────────────
   The membership pages are moving to the site's own buttons: class="btn" (solid) and
   class="btn btn-bordered" (outline). The Overview page already uses them. Pages still on
   mh-btn / mh-btn--ghost / mh-btn--block / mh-btn--line keep working with the styles below.
   Once every membership page has been switched over, delete this block (down to END LEGACY). */
.mh-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:2px solid var(--mh-teal);border-radius:8px;background:var(--mh-teal);color:var(--mh-white)!important;font-weight:600;text-decoration:none!important;transition:background .15s,color .15s}
.mh-btn:hover,.mh-btn:focus-visible{background:var(--mh-teal-dark);border-color:var(--mh-teal-dark)}
.mh-btn--ghost{background:var(--mh-white);color:var(--mh-teal)!important}
.mh-btn--ghost:hover,.mh-btn--ghost:focus-visible{background:var(--mh-tint);color:var(--mh-teal-dark)!important}
.mh-btn--block{width:100%}
.mh-btn--line{background:transparent;border-color:var(--mh-white)}
.mh-btn--line:hover,.mh-btn--line:focus-visible{background:var(--mh-white);border-color:var(--mh-white);color:var(--mh-teal-dark)!important}
.mh-section--deep .mh-btn--ghost{background:var(--mh-white)}
.mh-door .mh-btn,.mh-panel .mh-btn{align-self:flex-start;margin-top:auto}
.mh-plan .mh-btn{margin-top:auto}
@media (max-width:599px){
  .mh-hero .mh-actions .mh-btn{width:100%}
}
/* ── END LEGACY BUTTONS ─────────────────────────────────────────────────────────────────── */
.mh-link{color:var(--mh-teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mh-link:hover{color:var(--mh-teal-dark)}

/* hero: grey band (mh-section--soft) with the copy on the left and a cut-out photo on the right
   standing on the bottom edge of the band; on phones the photo sits under the copy and the
   buttons go full width. Add "mh-section--hero" to the hero section. CMS images come wrapped
   in <p> with inline spacing, so those are zeroed here. The photo works best as a PNG with the
   background removed. .mh-hero__card is the name badge at the bottom-right of the photo
   (logo image, role, name); it straddles the bottom edge of the band, half over the hero
   and half over the section below (z-index:1 on the hero keeps it on top). The avatars line
   above the heading is the shared "proof" component. */
.mh-section--hero{padding-bottom:0;z-index:1}
/* hero band, every screen size: dark teal gradient (top-left #013040 to bottom-right #04637F) instead
   of the grey, with the copy, proof line and lead in white. Buttons: both carry class="btn btn-bordered".
   The first (primary) is filled white with dark-teal text; the second is transparent and keeps the
   site's own btn-bordered border, with its text in the same colour as that border. The story strip
   underneath stays on the grey (--mh-soft). */
.mh-section--hero.mh-section--soft::before{background:linear-gradient(135deg,#013040 60%,#04637F 0%)}
.mh-section--hero .mh-hero__copy,.mh-section--hero .mh-hero__title,.mh-section--hero .mh-hero__copy .mh-lead{color:var(--mh-white)}
.mh-section--hero .mh-hero__copy .proof{--proof-ring:#013040;--proof-text:#fff;--proof-sub:#c9d6dc}
/* grade pages: the hero copy can also hold a tick list (mh-checks), a line of small print (mh-muted) and a
   text link (mh-link). On the dark band they go light: ticks in the light teal, small print in the soft
   grey-blue, links white and underlined. The eyebrow in the hero copy carries class "eyebrow eyebrow--light"
   (see SHARED); the story strip's eyebrow sits on the grey, so it stays the normal teal. */
.mh-section--hero .mh-hero__copy .mh-checks{color:var(--mh-white)}
.mh-section--hero .mh-hero__copy .mh-checks li::before{border-color:#7fc4d6}
.mh-section--hero .mh-hero__copy .mh-muted{color:#c9d6dc}
.mh-section--hero .mh-hero__copy .mh-link{color:var(--mh-white);text-decoration:underline;text-underline-offset:3px}
.mh-section--hero .mh-hero__copy .mh-link:hover{color:var(--mh-white);text-decoration-thickness:2px}
.mh-section--hero .mh-actions .btn.btn-bordered:first-child{background:var(--mh-white);border-color:var(--mh-white);color:var(--mh-teal-dark)}
.mh-section--hero .mh-actions .btn.btn-bordered:first-child:hover,.mh-section--hero .mh-actions .btn.btn-bordered:first-child:focus-visible{background:var(--mh-tint);border-color:var(--mh-tint);color:var(--mh-teal-dark)}
.mh-section--hero .mh-actions .btn.btn-bordered:not(:first-child){background:transparent;border-color:var(--mh-white);color:var(--mh-white)}
.mh-section--hero .mh-actions .btn.btn-bordered:not(:first-child):hover,.mh-section--hero .mh-actions .btn.btn-bordered:not(:first-child):focus-visible{background:rgba(255,255,255,.08)}
.mh-hero{display:flex;flex-wrap:wrap;align-items:stretch;gap:0 clamp(32px,5vw,64px)}
.mh-hero__copy{flex:1 1 420px;align-self:center;display:flex;flex-direction:column;gap:10px;padding-bottom:clamp(40px,6vw,64px)}
.mh-hero__title{max-width:26ch}
.mh-hero__media{position:relative;flex:1 1 340px;max-width:560px;margin:0 auto;align-self:flex-end;padding-top:8px}
.mh-hero__media p{margin:0!important;line-height:0}
.mh-hero__media>p>img,.mh-hero__media>img{display:block;width:100%;height:auto;max-width:100%;margin:0!important;padding:0!important;border-radius:0}
.mh-hero__card{position:absolute;right:0;bottom:0;transform:translateY(50%);display:flex;align-items:center;gap:14px;max-width:calc(100% - 16px);padding:10px 20px 10px 10px;border-radius:6px;background:linear-gradient(100deg,var(--mh-teal),var(--mh-teal-dark));color:var(--mh-white);box-shadow:0 10px 30px rgba(15,42,53,.2);line-height:1.3;border: 0.5px solid rgba(255,255,255,.2);}
.mh-hero__card img{display:block;flex-shrink:0;width:112px;height:56px;margin:0!important;padding:6px 10px;border-radius:4px;background:var(--mh-white);object-fit:contain}
.mh-hero__card span{display:block;opacity:.85}
.mh-hero__card strong{display:block;font-weight:700}
/* the avatars + "Join 4,000+ members" line is the shared "proof" component (see SHARED above):
   <div class="proof proof--tint"> ... </div> inside .mh-hero__copy; nothing extra is needed here */
@media (max-width:767px){
  .mh-hero__card{gap:10px;padding:8px 14px 8px 8px}
  .mh-hero__card img{width:96px;height:48px}
}
@media (max-width:599px){
  .mh-hero .mh-actions{flex-direction:column;align-items:stretch}
  .mh-hero .mh-actions .btn{width:100%}
}

/* hero member story: the quote from the person in the photo. It is the third child of .mh-hero,
   after .mh-hero__copy and .mh-hero__media:
     <div class="mh-hero__story"><span class="eyebrow">...</span><h2>...</h2>
       <p class="mh-hero__quote">"..."</p><cite class="mh-cite">...</cite></div>
   The quote is a plain paragraph with ordinary quotation marks typed in the text (not the site's
   blockquote style).
   A full-width grey strip under the hero band (the grey is drawn behind it, edge to edge),
   centred eyebrow + heading + quote + name. Its top padding clears the name badge, which
   hangs over the band edge. The photo column sits above the strip so the badge is never covered.
   Phones: same strip, same order (copy, photo, strip). */
.mh-hero__media{z-index:2}
.mh-hero__story{position:relative;isolation:isolate;order:3;flex:1 1 100%;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:none;margin:0;padding:clamp(104px,12vw,144px) 0 clamp(56px,7vw,80px);text-align:center}
.mh-hero__story::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:calc(100vw + 2px);background:var(--mh-soft);z-index:-1}
.mh-hero__story .eyebrow{margin:0}
.mh-hero__story h2{max-width:28ch;text-wrap:balance;}
.mh-hero__story .mh-hero__quote{max-width:60ch;margin:8px auto;font-weight:500;font-style:italic;color:var(--mh-muted);text-wrap:pretty}
.mh-hero__story .mh-cite{font-weight:600;color:var(--mh-ink)}

/* two doors */
.mh-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
.mh-door{display:flex;flex-direction:column;gap:14px;padding:28px;border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:var(--mh-white)}
.mh-door__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mh-door .btn{align-self:flex-start;margin-top:auto}

/* section heading row + cards (benefits, grades) */
.mh-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:32px}
.mh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.mh-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:var(--mh-white);transition:box-shadow .15s,transform .15s}
.mh-card:hover{box-shadow:0 8px 24px rgba(15,42,53,.08);transform:translateY(-2px)}
/* card picture: the first thing in the card, whether an image widget on its own (the CMS wraps it in <p>), a bare
   <img>, or an element carrying class mh-card__icon. It runs edge to edge across the top of the card, cropped to
   2:1, with the card's rounded corners. The !important rules override the widget's inline sizing. */
.mh-card>p:first-child:has(>img),.mh-card>img:first-child,.mh-card>.mh-card__icon,.mh-card>div:first-child:has(>p>img),.mh-card>div:first-child:has(>img){display:block;width:auto!important;height:auto!important;max-width:none;margin:-24px -24px 4px!important;padding:0!important;line-height:0;overflow:hidden;border-radius:calc(var(--mh-radius) - 1px) calc(var(--mh-radius) - 1px) 0 0;background:var(--mh-soft)}
.mh-card>div:first-child p{margin:0!important;padding:0!important;line-height:0}
.mh-card>p:first-child>img,.mh-card>img:first-child,img.mh-card__icon,.mh-card>.mh-card__icon img,.mh-card>div:first-child img{display:block;width:100%!important;height:auto!important;max-width:none;aspect-ratio:2/1;object-fit:cover;margin:0!important;padding:0!important;border-radius:0}
.mh-card>img:first-child,.mh-card>img.mh-card__icon{width:calc(100% + 48px)!important;margin:-24px -24px 4px!important;border-radius:calc(var(--mh-radius) - 1px) calc(var(--mh-radius) - 1px) 0 0}
.mh-card__body{color:var(--mh-muted)}
.mh-card__link{color:inherit;text-decoration:none}
.mh-card:hover .mh-card__link{color:var(--mh-teal)}
.mh-card__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.mh-grades{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:28px 0}
.mh-center{display:flex;justify-content:center}

/* mh-title--center: a centred title block (eyebrow, heading, lead) */
.mh-title--center{align-items:center;text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.mh-title--center .mh-lead{margin-left:auto;margin-right:auto}
/* mh-title--split: eyebrow + heading on the left, lead on the right (Relume two-up). Stacks under 768px.
   Written as .mh-title.mh-title--split so it wins over the plain .mh-title rule further down the file. */
.mh-title.mh-title--split{align-items:flex-start;text-align:left;gap:12px;margin-bottom:40px}
@media (min-width:768px){
  .mh-title.mh-title--split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 64px;align-items:end;margin-bottom:56px}
  .mh-title.mh-title--split>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .mh-title.mh-title--split .mh-lead{max-width:52ch;margin:0}
  /* mh-title--top: both columns aligned to the top (for a right column taller than one paragraph) */
  .mh-title.mh-title--split.mh-title--top{align-items:start}
}

/* mh-ways: the "Seven ways to belong" grade cards, in three groups (mockup: Option D, Relume split rows).
   Markup (the membership home page):
     <div class="mh-ways">
       <div class="mh-tier">                                   one row per group, divided by hairlines
         <div class="mh-tier__head">                           left: eyebrow, group title, one line, meta
           <span class="eyebrow">Grades 1–3</span><h3>…</h3><p>…</p><span class="mh-tier__meta">Studying · Essentials · Affiliate</span>
         </div>
         <div class="mh-tier__cards">                          right: the group's cards, equal heights
           <article class="mh-way">
             <span class="mh-way__num">01</span>
             <div class="mh-way__icon">{{image}}</div>
             <span class="eyebrow">Learners</span><h4>…</h4><p class="mh-way__body">…</p>
             <div class="mh-way__actions"><a class="btn btn-bordered">…</a><a class="mh-link mh-link--arrow">…</a></div>
           </article> …
         </div>
       </div>
       Enforcement Agent: the same row, with its one card carrying class "mh-way mh-way--wide": it fills
       the right column, laid out as a row (icon · text · buttons). Its text is wrapped in <div class="mh-way__text">.
     </div>
   Screens: 1024px and up, head left (5/17) and cards right (12/17), head sticky while the row scrolls.
            768–1023px, head on top as a two-up (title left, line right), cards 3 across beneath.
            Under 768px, everything stacks in one column.
   The number is a faded watermark top-right (opacity on ".mh-way__num"). The icon is a CMS image
   widget: the CMS wraps it in its own <p> with inline sizing, so the !important rules override that.
   Icon size: the width/height on ".mh-way__icon img". */
.mh-ways{margin-bottom:40px}
.mh-tier{display:flex;flex-direction:column;gap:18px;padding:28px 0;border-top:1px solid var(--mh-line)}
.mh-tier:last-child{border-bottom:1px solid var(--mh-line)}
.mh-tier__head{display:flex;flex-direction:column;gap:6px}
.mh-tier__head h3,.mh-tier__head p{margin:0}
.mh-tier__head p{color:var(--mh-muted);max-width:34ch}
.mh-tier__meta{display:block;color:var(--mh-muted);font-size:13px;margin-top:2px}
.mh-tier__cards{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:stretch}
.mh-way{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:20px;border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:var(--mh-white);overflow:hidden}
.mh-way__num{position:absolute;top:-5px;right:10px;font-size:64px;line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--mh-teal);opacity:.045;pointer-events:none}
.mh-way__icon{display:block;width:36px;height:36px;line-height:0;margin-bottom:14px}
.mh-way__icon p{margin:0!important;padding:0!important;line-height:0}
.mh-way__icon img{display:block;width:36px!important;height:36px!important;max-width:none;margin:0!important;padding:0!important;object-fit:contain}
.mh-way>.eyebrow,.mh-way__text>.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.mh-way h4{margin:0 0 6px}
.mh-way__body{color:var(--mh-muted);text-wrap:pretty}
.mh-way__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;padding-top:16px}
.mh-way__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.mh-ways+.mh-center{margin-top:8px}
/* mh-section--blue: the Seven ways section on the site's dark blue, with white cards (mockup: Option E).
   Only the section heading, group headings, dividers and the buttons under the grid change colour;
   everything inside the cards stays as on a white page. */
.mh-section--blue::before{background:#002d3c}
.mh-section--blue{color:var(--mh-white)}
.mh-section--blue .mh-title .eyebrow,.mh-section--blue .mh-tier__head .eyebrow{color:#7fc4d6}
.mh-section--blue .mh-title h2,.mh-section--blue .mh-tier__head h3{color:var(--mh-white)}
.mh-section--blue .mh-title .mh-lead,.mh-section--blue .mh-tier__head p{color:#c9d6dc}
.mh-section--blue .mh-tier__meta{color:#8fa6af}
.mh-section--blue .mh-tier{border-top-color:rgba(255,255,255,.14)}
.mh-section--blue .mh-tier:last-child{border-bottom-color:rgba(255,255,255,.14)}
.mh-section--blue .mh-way{color:var(--mh-ink);border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.18)}
.mh-section--blue .mh-way h4{color:var(--mh-ink)}
.mh-section--blue .mh-center .btn:not(.btn-bordered){background:var(--mh-white);border-color:var(--mh-white);color:#002d3c}
.mh-section--blue .mh-center .btn:not(.btn-bordered):hover,.mh-section--blue .mh-center .btn:not(.btn-bordered):focus-visible{background:var(--mh-tint);border-color:var(--mh-tint);color:#002d3c}
.mh-section--blue .mh-center .btn.btn-bordered{background:transparent;border-color:var(--mh-white);color:var(--mh-white)}
.mh-section--blue .mh-center .btn.btn-bordered:hover,.mh-section--blue .mh-center .btn.btn-bordered:focus-visible{background:var(--mh-white);color:#002d3c}
/* a button row (mh-actions) on the blue band, e.g. under the comparison table on a grade page: a plain "btn" is
   filled white with dark-blue text, a "btn btn-bordered" is transparent with a white border and white text.
   !important because the site's own .btn / .btn-bordered rules set these colours too. */
.mh-section--blue .mh-actions .btn{background:var(--mh-white)!important;border-color:var(--mh-white)!important;color:#002d3c!important}
.mh-section--blue .mh-actions .btn:hover,.mh-section--blue .mh-actions .btn:focus-visible{background:var(--mh-tint)!important;border-color:var(--mh-tint)!important;color:#002d3c!important}
.mh-section--blue .mh-actions .btn.btn-bordered{background:transparent!important;border-color:var(--mh-white)!important;color:var(--mh-white)!important}
.mh-section--blue .mh-actions .btn.btn-bordered:hover,.mh-section--blue .mh-actions .btn.btn-bordered:focus-visible{background:rgba(255,255,255,.12)!important;color:var(--mh-white)!important}
@media (min-width:768px){
  .mh-tier{gap:22px;padding:32px 0}
  .mh-tier__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 40px;align-items:end}
  .mh-tier__head>.eyebrow,.mh-tier__head h3{grid-column:1}
  .mh-tier__head p{grid-column:2;grid-row:1/3;max-width:none}
  .mh-tier__meta{display:none}
  .mh-tier__cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .mh-way__actions{flex-direction:column;align-items:flex-start;padding-top:18px}
  .mh-way--wide{grid-column:1/-1;display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:20px;align-items:center;padding:24px}
  .mh-way--wide .mh-way__icon{margin:0;align-self:start}
  .mh-way--wide .mh-way__num{top:50%;right:220px;transform:translateY(-50%);font-size:80px}
  .mh-way--wide .mh-way__body{max-width:48ch}
  .mh-way--wide .mh-way__actions{margin:0;padding:0;align-items:flex-end}
}
@media (min-width:1024px){
  .mh-tier{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,12fr);gap:32px 64px;padding:40px 0}
  .mh-tier__head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:sticky;top:140px;align-self:start}
  .mh-tier__head p{max-width:34ch}
  .mh-tier__meta{display:block;margin-top:6px}
  /* desktop: heading and cards share the row half and half; the cards stack in one column on the right,
     upright (icon on top, then text, then the button and link side by side) */
  .mh-tier{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px}
  .mh-tier__cards{grid-template-columns:minmax(0,1fr);gap:16px}
  .mh-way,.mh-way--wide{display:flex;flex-direction:column;align-items:flex-start;padding:28px}
  .mh-way .mh-way__icon{margin:0 0 18px;align-self:auto}
  .mh-way__icon,.mh-way__icon img{width:40px!important;height:40px!important}
  .mh-way>.eyebrow,.mh-way__text>.eyebrow{font-size:12px;margin-bottom:4px}
  .mh-way h4{margin-bottom:8px}
  .mh-way .mh-way__body{max-width:none}
  .mh-way .mh-way__actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:auto 0 0;padding:20px 0 0}
  .mh-way .mh-way__num{top:-5px;right:10px;transform:none;font-size:80px}
}

/* mh-link--arrow: a text link with an arrow after it */
.mh-link--arrow{text-decoration:none;white-space:nowrap}
.mh-link--arrow::after{content:" \2192"}
.mh-link--arrow:hover{text-decoration:underline}

/* proof */
.mh-proof{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(32px,5vw,56px)}
.mh-proof__media{flex:0 1 360px}
.mh-proof__media img{display:block;width:100%;height:auto;border-radius:16px;object-fit:cover;aspect-ratio:3/2}
.mh-proof__body{flex:1 1 380px;display:flex;flex-direction:column;gap:20px}
.mh-quote{margin:0;font-weight:600}
.mh-quote p{quotes:"\201C" "\201D"}
.mh-quote p::before{content:open-quote}
.mh-quote p::after{content:close-quote}
.mh-cite{color:var(--mh-muted);font-style:normal}
.mh-stats{display:flex;flex-wrap:wrap;gap:48px}
.mh-stat{display:flex;flex-direction:column;gap:6px}
.mh-stat__n{color:var(--mh-teal);font-weight:700;line-height:1;font-size:clamp(28px,3vw,40px)}
.mh-stat__l{color:var(--mh-muted)}

/* closing call to action */
.mh-cta{max-width:640px;display:flex;flex-direction:column;gap:5px}
.mh-section--deep h2{color:var(--mh-white)}

/* mh-closer: the closing band on the Overview page (Relume Testimonial 29 style). Grey band (mh-section--soft):
   the grade question and buttons on the left, a member quote card on the right, so the page hands over cleanly
   to the dark footer call to action below it. Stacks under 900px (question first, then the card).
   HTML: <div class="mh-inner mh-closer">
           <div class="mh-cta"><span class="eyebrow">…</span><h2>…</h2><p class="mh-lead">…</p><div class="mh-actions">…</div></div>
           <figure class="mh-testimonial"><p class="mh-testimonial__quote">…</p>
             <figcaption class="mh-testimonial__by"><span class="mh-testimonial__avatar">{{image}}</span>
               <span class="mh-testimonial__who"><strong>Name</strong><span>Role, Company</span></span></figcaption></figure></div>
   mh-testimonial works on its own anywhere: white card, a quote mark drawn above the text (so no quote marks in
   the text), a round photo cropped to the face, name and role on two lines. The quote is a plain paragraph, not a
   blockquote, so the site's own blockquote marks and indent stay out of it. */
.mh-closer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(40px,6vw,80px)}
.mh-closer .mh-cta{max-width:none;gap:16px}
.mh-closer .mh-cta .eyebrow{margin:0}
.mh-closer .mh-actions{gap:10px}
.mh-actions{padding-top:20px}
.mh-testimonial{display:flex;flex-direction:column;gap:28px;margin:0;padding:clamp(24px,3.5vw,40px);border:1px solid var(--mh-line);border-radius:16px;background:var(--mh-white);box-shadow:0 12px 32px rgba(15,45,59,.06)}
.mh-testimonial__quote{position:relative;margin:0;padding-top:40px;font-weight:500;font-style:normal;text-wrap:pretty}
.mh-testimonial__quote::before{content:"\201C";position:absolute;top:-14px;left:-2px;font-size:72px;line-height:1;font-weight:700;color:var(--mh-teal)}
.mh-testimonial__by{display:flex;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--mh-line)}
.mh-testimonial__avatar{flex:0 0 64px;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--mh-tint)}
.mh-testimonial__avatar > *{display:block;width:100%;height:100%;margin:0!important}
.mh-testimonial__avatar img{display:block;width:100%!important;height:100%!important;margin:0!important;padding:0!important;object-fit:cover;object-position:50% 15%}
/* The CMS editor strips the avatar span, so the photo widget usually sits straight inside the figcaption.
   Whatever the widget comes wrapped in (<p>, <div>, bare <img>), the first thing in the figcaption that is not
   the name block becomes the 64px circle. object-fit on both rules: when the first thing IS the <img>, the first
   rule sizes it to 64x64 directly, and without object-fit a portrait photo would be squashed to fit. */
.mh-testimonial__by>:first-child:not(.mh-testimonial__who){flex:0 0 64px;width:64px!important;height:64px!important;margin:0!important;padding:0!important;border-radius:50%;overflow:hidden;background:var(--mh-tint);line-height:0;object-fit:cover;object-position:50% 15%}
.mh-testimonial__by>:first-child:not(.mh-testimonial__who) img{display:block;width:100%!important;height:100%!important;margin:0!important;padding:0!important;object-fit:cover;object-position:50% 15%}
.mh-testimonial__who{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.mh-testimonial__who strong{font-weight:600;color:var(--mh-ink)}
.mh-testimonial__who span{color:var(--mh-muted);font-size:.9375em}
@media (max-width:899px){
  .mh-closer{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:599px){
  .mh-closer .mh-actions .btn{flex:1 1 100%}
  .mh-testimonial__avatar,.mh-testimonial__by>:first-child:not(.mh-testimonial__who){flex-basis:56px;width:56px!important;height:56px!important}
}


/* links that jump down the page stop below the site header */
.mh [id],.mh[id]{scroll-margin-top:140px}

/* title + intro above a section's content */
.mh-title{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.mh-title h1,.mh-title h2{text-wrap:balance}
.mh-section--deep h3{color:var(--mh-white)}

/* mh-section--band: the dark teal gradient from the membership home hero, for a text-only hero
   (eyebrow, heading, lead, buttons) with no photo. Everything in it goes light.
   Buttons: a plain "btn" is filled white with dark-teal text; a "btn btn-bordered" is transparent with a
   white border and white text. If every button in .mh-actions is btn-bordered (the membership home pattern),
   the first one is filled instead. Works whether or not the buttons sit inside .mh-actions.
   !important because the site's own .btn / .btn-bordered rules set these colours too.
   Jump links (.mh-pills), if a band has them: plain underlined text links in light teal, not pills,
   so they are never mistaken for the buttons. Everywhere else mh-pills keep their pill shape. */
.mh-section--band::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:calc(100vw + 2px);z-index:-1;background:linear-gradient(135deg,#013040 60%,#04637F 0%)}
.mh-section--band,.mh-section--band h1,.mh-section--band h2,.mh-section--band .mh-lead{color:var(--mh-white)}
.mh-section--band .eyebrow{color:#7fc4d6}
.mh-section--band .btn{display:inline-flex;align-items:center;justify-content:center;margin:0;background:transparent!important;border:2px solid var(--mh-white)!important;color:var(--mh-white)!important}
.mh-section--band .btn:hover,.mh-section--band .btn:focus-visible{background:rgba(255,255,255,.12)!important;border-color:var(--mh-white)!important;color:var(--mh-white)!important}
.mh-section--band .btn:not(.btn-bordered),.mh-section--band .mh-actions .btn.btn-bordered:first-child{background:var(--mh-white)!important;border-color:var(--mh-white)!important;color:var(--mh-teal-dark)!important}
.mh-section--band .btn:not(.btn-bordered):hover,.mh-section--band .btn:not(.btn-bordered):focus-visible,.mh-section--band .mh-actions .btn.btn-bordered:first-child:hover,.mh-section--band .mh-actions .btn.btn-bordered:first-child:focus-visible{background:var(--mh-tint)!important;border-color:var(--mh-tint)!important;color:var(--mh-teal-dark)!important}
.mh-section--band .mh-pills{gap:6px 22px}
.mh-section--band .mh-pills a{min-height:0;padding:0;border:0;border-radius:0;background:none;color:#bfe6f0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(191,230,240,.5)}
.mh-section--band .mh-pills a:hover,.mh-section--band .mh-pills a:focus-visible{border:0;background:none;color:var(--mh-white);text-decoration-color:var(--mh-white)}
/* text links sitting directly on a dark background (hero band, blue or deep band): white and underlined,
   with or without the mh-link--light class. Links inside white cards, routes, tables and quote cards on a
   dark band keep the normal teal mh-link colour. */
.mh-section--band .mh-link:not(.mh-panel *):not(.mh-route *):not(.mh-table-wrap *):not(.mh-testimonial *):not(.mh-way *),
.mh-section--blue .mh-link:not(.mh-panel *):not(.mh-route *):not(.mh-table-wrap *):not(.mh-testimonial *):not(.mh-way *),
.mh-section--deep .mh-link:not(.mh-panel *):not(.mh-route *):not(.mh-table-wrap *):not(.mh-testimonial *):not(.mh-way *),
.mh-link--light{color:var(--mh-white);text-decoration:underline;text-underline-offset:3px}
.mh-section--band .mh-link:not(.mh-panel *):not(.mh-route *):not(.mh-table-wrap *):not(.mh-testimonial *):not(.mh-way *):hover,
.mh-section--blue .mh-link:not(.mh-panel *):not(.mh-route *):not(.mh-table-wrap *):not(.mh-testimonial *):not(.mh-way *):hover,
.mh-section--deep .mh-link:not(.mh-panel *):not(.mh-route *):not(.mh-table-wrap *):not(.mh-testimonial *):not(.mh-way *):hover,
.mh-link--light:hover,.mh-link--light:focus-visible{color:var(--mh-white);text-decoration-thickness:2px}

/* mh-jump: the "Explore our benefits" jump links under the hero buttons (Benefits page). A small label,
   then the links. On a dark band they keep their pill shape but are drawn quietly (thin translucent
   border, no fill) so they never compete with the buttons above. Markup:
     <div class="mh-jump"><span>Explore our benefits</span><ul class="mh-pills">...</ul></div> */
.mh-jump{display:flex;flex-direction:column;gap:12px;margin-top:clamp(20px,3vw,32px)}
.mh-jump>span{font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:var(--mh-muted)}
.mh-section--band .mh-jump>span{color:#9fd8e8}
.mh-section--band .mh-jump .mh-pills{gap:10px}
.mh-section--band .mh-jump .mh-pills a{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.06);color:var(--mh-white);text-decoration:none}
.mh-section--band .mh-jump .mh-pills a:hover,.mh-section--band .mh-jump .mh-pills a:focus-visible{border:1px solid var(--mh-white);background:rgba(255,255,255,.14);color:var(--mh-white);text-decoration:none}

/* mh-pills: row of rounded links (jump links, "which sounds like you") */
.mh-pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.mh-pills li{margin:0;padding:0}
.mh-pills li::before{content:none}
.mh-pills a{display:inline-flex;align-items:center;min-height:44px;padding:6px 18px;border:1px solid var(--mh-line);border-radius:999px;background:var(--mh-white);color:var(--mh-ink);font-weight:400;text-decoration:none}
.mh-pills a:hover,.mh-pills a:focus-visible{border-color:var(--mh-teal);color:var(--mh-teal);text-decoration:none}

/* mh-split: text one side, picture the other. Add mh-split--flip to put the picture on the left */
.mh-split{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,64px)}
.mh-split__copy{flex:1 1 380px;display:flex;flex-direction:column;gap:18px}
.mh-split__media{flex:1 1 320px;max-width:520px}
.mh-split__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;background:var(--mh-tint);color:var(--mh-muted)}
@media (min-width:768px){
  .mh-split--flip .mh-split__media{order:-1}
}

/* mh-checks: list with teal ticks */
.mh-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mh-checks li{position:relative;margin:0;padding:0 0 0 30px}
.mh-checks li::before{content:"";position:absolute;left:3px;top:.35em;width:14px;height:8px;border:0;border-left:2.5px solid var(--mh-teal);border-bottom:2.5px solid var(--mh-teal);border-radius:0;background:none;transform:rotate(-45deg)}
.mh-checks--arrow li::before{content:"\2192";top:0;left:0;width:auto;height:auto;border:0;transform:none;color:var(--mh-muted)}
.mh-section--deep .mh-checks li::before{border-color:var(--mh-white)}

/* mh-duo + mh-panel: two or three boxes side by side */
.mh-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.mh-panel{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:var(--mh-white);color:var(--mh-ink)}
.mh-panel--tint{background:var(--mh-tint);border-color:transparent}
/* mh-panel--dark: the box on the hero's darkest blue (#013040), text in white, ticks in a very light blue.
   Used for the "Yes, if you..." box on grade pages. An eyebrow inside it takes class "eyebrow eyebrow--light". */
.mh-panel--dark{background:#013040;border-color:transparent;color:var(--mh-white)}
.mh-panel--dark h3,.mh-panel--dark h4{color:var(--mh-white)}
.mh-panel--dark .mh-muted{color:#c9d6dc}
.mh-panel--dark .mh-checks li::before{border-color:#bfe6f0}
.mh-panel--dark .mh-checks--arrow li::before{color:#bfe6f0}
.mh-panel--dark .mh-link{color:var(--mh-white);text-decoration:underline;text-underline-offset:3px}
.mh-panel--dark .mh-link:hover{color:var(--mh-white);text-decoration-thickness:2px}
.mh-panel--dark .btn{background:var(--mh-white)!important;border-color:var(--mh-white)!important;color:#013040!important}
.mh-panel--dark .btn.btn-bordered{background:transparent!important;border-color:var(--mh-white)!important;color:var(--mh-white)!important}
.mh-panel .btn{align-self:flex-start;margin-top:auto}
.mh-muted{color:var(--mh-muted)}

/* mh-routes + mh-route: a short list of routes, each row one link (Grades page "Other routes").
   Markup: <div class="mh-routes"><a class="mh-route" href="..."><span class="mh-route__text"><strong>Name</strong>
   <span>One line about it</span></span><span class="mh-route__go">Label &rarr;</span></a> ...</div>
   On its own the rows sit in a grid (one column under 600px); inside .mh-split they stack beside the text. */
.mh-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.mh-split .mh-routes,.mh-routes--stack{grid-template-columns:minmax(0,1fr)}
.mh-route{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:var(--mh-white);color:var(--mh-ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.mh-route:hover,.mh-route:focus-visible{border-color:var(--mh-teal);box-shadow:0 8px 24px rgba(15,42,53,.08);color:var(--mh-ink);text-decoration:none}
.mh-route__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.mh-route__text strong{font-weight:600}
.mh-route__text span{color:var(--mh-muted)}
.mh-route__go{flex-shrink:0;color:var(--mh-teal);font-weight:600;white-space:nowrap}
.mh-route:hover .mh-route__go{text-decoration:underline}
@media (max-width:599px){
  .mh-route{flex-direction:column;align-items:flex-start;gap:10px}
}

/* mh-bento: one large tinted lead panel across the top, smaller white panels under it (Benefits page, CPD).
   Markup: <div class="mh-bento"><div class="mh-bento__lead">eyebrow, h3, p, <div class="mh-bento__links">links</div></div>
   <div class="mh-panel">...</div> x3</div>. Three across from 900px, otherwise as many as fit. */
.mh-bento{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.mh-bento__lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center;padding:28px;border-radius:var(--mh-radius);background:var(--mh-tint)}
.mh-bento__text{display:flex;flex-direction:column;gap:14px;min-width:0}
.mh-bento__text p{max-width:60ch}
.mh-bento__links{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:6px}
/* photos: image widgets placed straight into the boxes, no wrapper (the CMS strips wrappers round a widget).
   The lead panel: the widget goes after <div class="mh-bento__text"> (it shows on the right from 768px).
   A card: the widget goes FIRST, before the heading (it runs across the top of the card, 3:2, cropped to fit).
   The CMS wraps each image in its own <p> with inline sizing, so the !important rules override that. */
.mh-bento__lead>p:has(>img),.mh-bento__lead>img{display:block;margin:0!important;padding:0!important;line-height:0;border-radius:var(--mh-radius);overflow:hidden;background:var(--mh-white)}
.mh-panel>p:first-child:has(>img),.mh-panel>img:first-child{display:block;margin:-24px -24px 6px!important;padding:0!important;line-height:0;border-radius:calc(var(--mh-radius) - 1px) calc(var(--mh-radius) - 1px) 0 0;overflow:hidden;background:var(--mh-white)}
.mh-bento__lead>p>img,.mh-bento__lead>img,.mh-panel>p:first-child>img,.mh-panel>img:first-child{display:block;width:100%!important;height:auto!important;max-width:none;aspect-ratio:3/2;object-fit:cover;margin:0!important;padding:0!important}
/* mh-ph: a placeholder until the photo is added. <div class="mh-ph">Knowledge Hub screenshot</div> in the same spot the
   widget will go: a tinted 3:2 box with the text centred in it. Replace the whole div with the image widget, or drop
   the widget inside the div: either way the photo fills the box edge to edge. */
.mh-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;border-radius:var(--mh-radius);background:var(--mh-tint);color:var(--mh-teal-dark);font-size:14px;text-align:center;padding:16px;overflow:hidden}
.mh-bento__lead>.mh-ph{background:var(--mh-white)}
.mh-panel>.mh-ph:first-child{margin:-24px -24px 6px;border-radius:calc(var(--mh-radius) - 1px) calc(var(--mh-radius) - 1px) 0 0}
.mh-ph:has(img){display:block;padding:0;line-height:0;font-size:0}
.mh-ph p{margin:0!important;padding:0!important;line-height:0;width:100%;height:100%}
.mh-ph img{display:block;width:100%!important;height:100%!important;max-width:none;object-fit:cover;margin:0!important;padding:0!important}
/* a card left on a row by itself (two-column widths, 600 to 899px): it spans both columns and turns sideways,
   photo on the left, text on the right. The photo is exactly the width of the left column above it (half the
   row minus half the 16px gap), so the split lines up with the gap between the two cards above. */
@media (min-width:600px) and (max-width:899px){
  .mh-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mh-bento>.mh-panel:nth-child(even):last-child{grid-column:1/-1;position:relative;min-height:220px;padding-left:calc(50% + 8px + 24px)}
  .mh-bento>.mh-panel:nth-child(even):last-child>:first-child:is(.mh-ph,p,img){position:absolute;top:0;bottom:0;left:0;width:calc(50% - 8px);height:auto;margin:0!important;aspect-ratio:auto;border-radius:calc(var(--mh-radius) - 1px) 0 0 calc(var(--mh-radius) - 1px)}
  .mh-bento>.mh-panel:nth-child(even):last-child>p:first-child>img,.mh-bento>.mh-panel:nth-child(even):last-child>img:first-child{height:100%!important;aspect-ratio:auto}
}
@media (min-width:768px){
  .mh-bento__lead{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:32px}
}
@media (min-width:900px){
  .mh-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* mh-ask: a tinted "how it works" panel, three steps top to bottom (Benefits page, Advice and support).
   Markup: <div class="mh-ask"><h3>How it works</h3><ol class="mh-steps"><li><div><strong>Step</strong><p>Line</p></div></li>...</ol></div> */
.mh-ask{display:flex;flex-direction:column;gap:20px;padding:28px;border-radius:var(--mh-radius);background:var(--mh-tint);min-width:0}
.mh-ask .mh-steps{grid-template-columns:minmax(0,1fr);gap:18px}
.mh-ask .mh-steps li{flex-direction:row;align-items:flex-start;gap:14px}
.mh-ask .mh-steps li::before{flex-shrink:0}
.mh-ask .mh-steps li>div{display:flex;flex-direction:column;gap:4px}

/* mh-bridge: a member quote card straddling the join between two bands (Benefits page, between Recognition
   and Advice and support). The section ABOVE the bridge carries class "mh-section--pre-bridge" (extra bottom
   padding, so its text stays clear of the card); the bridge section itself has no padding and is pulled up by
   the same amount, so the card sits half on each band. Inside it, one mh-testimonial, usually the dark version.
   mh-testimonial--dark: the quote card on the site's dark blue, with an optional eyebrow and heading at the
   top left (<div class="mh-testimonial__head"><span class="eyebrow">...</span><h3>...</h3></div>) before the quote. */
.mh-section--pre-bridge{padding-bottom:calc(clamp(24px,3vw,36px) + 80px)}
.mh-bridge{padding:0;margin-top:-80px}
.mh-bridge .mh-testimonial{max-width:820px;margin:0 auto}
.mh-testimonial--dark{background:#002d3c;border-color:transparent;color:var(--mh-white);box-shadow:0 16px 40px rgba(0,45,60,.25)}
.mh-testimonial__head{display:flex;flex-direction:column;gap:6px}
.mh-testimonial__head .eyebrow{color:#7fc4d6}
.mh-testimonial__head h3{color:var(--mh-white)}
.mh-testimonial--dark .mh-testimonial__quote{color:var(--mh-white)}
.mh-testimonial--dark .mh-testimonial__quote::before{color:#7fc4d6}
.mh-testimonial--dark .mh-testimonial__by{border-top-color:rgba(255,255,255,.16)}
.mh-testimonial--dark .mh-testimonial__who strong{color:var(--mh-white)}
.mh-testimonial--dark .mh-testimonial__who span{color:#c9d6dc}
.mh-testimonial__head+.mh-testimonial__quote{padding-top:36px;margin-top:-8px}

/* mh-points: short statements in a row (used on the dark band) */
.mh-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.mh-point{display:flex;flex-direction:column;gap:8px}

/* mh-table: comparison and fees tables. On phones the table scrolls sideways inside its box */
.mh-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:var(--mh-white)}
.mh-table{width:100%;min-width:760px;margin:0;border:0;border-collapse:collapse;background:none}
.mh-table th,.mh-table td{padding:14px 16px;border:0;border-bottom:1px solid var(--mh-line);background:none;color:var(--mh-ink);text-align:center;vertical-align:middle}
.mh-table th:first-child,.mh-table td:first-child{text-align:left}
.mh-table tbody tr:last-child>*{border-bottom:0}
.mh-table thead th{font-weight:700}
.mh-table tbody th{font-weight:600}
.mh-table .mh-table__group>*{background:var(--mh-tint);color:var(--mh-teal-dark);font-weight:700}
.mh-table--grades tr>*:nth-child(5),.mh-table--grades .mh-table__group>*:nth-child(3){border-left:2px solid var(--mh-line)}
/* benefits-by-grade table drawn by membership.js (see MH_BENEFITS there). Column groups are separated by a
   stronger vertical line (class mh-table__sep on the first cell of each group). The Studying column has its
   own group ("Learners only") and a soft tint, so it reads as a different kind of grade from the rest.
   A note under a grade's name in the header goes in <small>. */
.mh-table .mh-table__sep{border-left:2px solid var(--mh-line)}
.mh-table .mh-table__note{display:block;max-width:18ch;margin:4px auto 0;font-weight:400;color:var(--mh-muted)}
.mh-table .mh-table__study{background:var(--mh-soft)}
.mh-table .mh-table__group .mh-table__study{background:var(--mh-tint)}
.mh-table .mh-table__group .mh-table__study small{display:block;margin-top:2px;font-weight:400;color:var(--mh-teal-dark)}
/* dark version: inside a dark band (mh-section--blue / mh-section--deep), or add class "mh-table-wrap--dark" */
.mh-section--blue .mh-table-wrap,.mh-section--deep .mh-table-wrap,.mh-table-wrap--dark{--mh-line:rgba(255,255,255,.16);--mh-ink:#fff;--mh-muted:#c9d6dc;--mh-soft:rgba(255,255,255,.05);--mh-tint:rgba(127,196,214,.18);--mh-teal-dark:#9fd8e8;--mh-teal:#7fc4d6;background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.16)}
.mh-section--blue .mh-table th,.mh-section--blue .mh-table td,.mh-section--deep .mh-table th,.mh-section--deep .mh-table td,.mh-table-wrap--dark .mh-table th,.mh-table-wrap--dark .mh-table td{color:var(--mh-ink)}
.mh-table--fees{min-width:0}
.mh-table--fees th:not(:first-child),.mh-table--fees td:not(:first-child){text-align:right;white-space:nowrap}
.mh-yes{color:var(--mh-teal);font-weight:700}
.mh-no{color:var(--mh-muted)}
.mh-table small{display:block;color:var(--mh-muted)}
/* the column for the grade a page is about (added automatically on grade pages) */
.mh-table .mh-col{background:var(--mh-tint)}
/* when one grade's column is highlighted (a grade page), the Studying column loses its own tint so that only
   the page's grade stands out. Studying keeps its own column group and heading note. The class is added by
   membership.js whenever data-mh-table names a grade. */
.mh-table-wrap--one .mh-table .mh-table__study:not(.mh-col){background:none}
/* on the Studying page itself, its column is the highlighted one */
.mh-table-wrap--one .mh-table .mh-table__study.mh-col{background:var(--mh-tint)}
.mh-table-wrap--one .mh-table .mh-table__group .mh-table__study{background:var(--mh-tint)}
.mh-table thead .mh-col{color:var(--mh-teal-dark)}

/* mh-table--criteria: the professional grade criteria table on the Grades page (ACICM, MCICM, FCICM
   side by side, one row per question: who it is for, roles, qualification route, what you show, evidence).
   Every cell is left-aligned and top-aligned, since the cells hold short lists, not ticks.
   The first column (the row labels) stays narrow; the grade columns share the rest equally. */
.mh-table--criteria th,.mh-table--criteria td{text-align:left;vertical-align:top}
.mh-table--criteria thead th{vertical-align:middle}
.mh-table--criteria tbody th{width:150px;color:var(--mh-muted)}
.mh-table--criteria .mh-tag{margin-bottom:6px}
.mh-table--criteria .mh-checks{gap:8px}
.mh-table--criteria .mh-btn{margin-top:4px}
.mh-table--criteria .mh-link{display:inline-block;margin-top:4px}

/* mh-plans + mh-plan: grade cards with the fee and one button each.
   A link to #essentials (the card's id) outlines that card when the visitor lands on it */
.mh-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.mh-plans+.mh-title{margin-top:clamp(56px,8vw,96px);padding-top:clamp(40px,6vw,64px);border-top:1px solid var(--mh-line)}
.mh-plan{display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:var(--mh-white)}
.mh-plan:target,.mh-title:target+.mh-plans .mh-plan{border-color:var(--mh-teal);box-shadow:0 0 0 2px var(--mh-teal)}
.mh-plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.mh-plan__price strong{color:var(--mh-ink);font-weight:700;line-height:1;font-size:clamp(28px,3vw,36px)}
.mh-plan__price span{color:var(--mh-muted)}
.mh-plan__alt{color:var(--mh-muted);margin-top:-8px!important}
.mh-plan .btn{margin-top:auto}
.mh-plan__more{align-self:center}
.mh-tag{display:inline-block;align-self:flex-start;padding:2px 10px;border-radius:999px;background:var(--mh-tint);color:var(--mh-teal-dark);font-weight:600}

/* mh-grade-icon: a grade's icon at the top of a plan card (Grades page) or an "Other routes" panel.
   The icon is a CMS image widget inside <div class="mh-grade-icon">: the CMS wraps it in its own <p>
   with inline sizing, so the !important rules override that. Icon size: the width/height below (40px). */
.mh-grade-icon{display:block;width:40px;height:40px;line-height:0}
.mh-grade-icon p{margin:0!important;padding:0!important;line-height:0}
.mh-grade-icon img{display:block;width:40px!important;height:40px!important;max-width:none;margin:0!important;padding:0!important;object-fit:contain}
.mh-grade-icon+.mh-tag{margin-top:-2px}

/* mh-price: the fee box beside a grade page's heading */
.mh-price{flex:0 1 380px;display:flex;flex-direction:column;gap:14px;padding:24px;border:2px solid var(--mh-teal);border-radius:var(--mh-radius);background:var(--mh-white)}
/* buttons in the fee box use the site's own btn / btn btn-bordered, stretched to the box's full width */
.mh-price .btn{display:flex;width:100%}

/* mh-faq: questions that open when clicked. Add class "mh-faq--wide" to a <details> whose answer
   holds a table, so the answer can use the full width instead of the usual reading measure */
.mh-faq{border-top:1px solid var(--mh-line)}
/* mh-faq--solo: the questions as a section of their own (no join box beside them): kept to a reading width */
.mh-faq--solo{max-width:820px}
.mh-faq details{border-bottom:1px solid var(--mh-line)}
.mh-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-weight:600;cursor:pointer;list-style:none}
.mh-faq summary::-webkit-details-marker{display:none}
.mh-faq summary::after{content:"";flex-shrink:0;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--mh-muted);border-bottom:2px solid var(--mh-muted);transform:rotate(45deg);transition:transform .15s}
.mh-faq details[open] summary::after{transform:rotate(-135deg)}
.mh-faq summary:hover{color:var(--mh-teal)}
.mh-faq details>div{display:flex;flex-direction:column;gap:10px;max-width:72ch;padding:0 0 20px;color:var(--mh-muted)}
.mh-faq details.mh-faq--wide>div{max-width:none}
.mh-faq details.mh-faq--wide>div>p{max-width:72ch}
.mh-faq .mh-table-wrap{margin-top:6px}

/* mh-steps: numbered steps in a row */
.mh-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px;counter-reset:mh-step}
.mh-steps li{margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-increment:mh-step}
.mh-steps li::before{content:counter(mh-step);position:static;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--mh-teal);color:var(--mh-white);font-weight:700}
.mh-steps p{color:var(--mh-muted)}

/* mh-path: the grade ladder. aria-current="step" marks the grade the page is about */
.mh-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.mh-path li{margin:0;padding:14px 0 0;border-top:4px solid var(--mh-line);display:flex;flex-direction:column;gap:6px}
.mh-path li::before{content:none}
.mh-path li[aria-current]{border-top-color:var(--mh-teal)}
.mh-path span{color:var(--mh-muted)}

/* mh-statrow: a labelled row of figures (Fees page) */
.mh-statrow{display:flex;flex-direction:column;gap:14px;padding:24px 0;border-top:1px solid var(--mh-line)}
.mh-statrow:last-child{padding-bottom:0}
.mh-statrow .mh-stat{min-width:150px;max-width:230px}

/* ── FEES & HOW TO APPLY (/membership/application-process.html) ───────────────────────────────────── */
/* mh-band-facts: a text hero on the dark band (mh-section--band) with three key figures beside it (Relume Stats 15).
   Each figure has a thin light rule on its left, no box, so the numbers carry the contrast and nothing competes
   with the heading. Desktop (900px+): copy left, figures stacked on the right. 600 to 899px: copy, then the three
   figures in a row. Phones (under 600px): the figures are hidden. Markup:
     <section class="mh mh-section mh-section--band"><div class="mh-inner mh-band-facts">
       <div class="mh-title">eyebrow, h1, lead, mh-actions</div>
       <div class="mh-facts">
         <div class="mh-fact"><span class="mh-fact__n">10 min</span><span class="mh-fact__l">to apply online</span></div> ...
       </div>
     </div></section> */
.mh-band-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center}
.mh-band-facts>.mh-title{margin:0}
.mh-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mh-fact{display:flex;flex-direction:column;gap:6px;min-width:0;padding:2px 0 2px 14px;border-left:2px solid rgba(255,255,255,.28)}
.mh-fact__n{font-size:clamp(28px,7vw,40px);line-height:1;font-weight:700;color:var(--mh-white);white-space:nowrap}
.mh-fact__l{color:#dbe7ec;line-height:1.35}
@media (max-width:599px){
  .mh-band-facts .mh-actions{flex-direction:column;align-items:stretch}
  .mh-band-facts .mh-actions .btn{width:100%}
  /* phones: the three key figures are hidden, so the hero is just the heading, intro and buttons */
  .mh-band-facts .mh-facts{display:none}
}
@media (min-width:900px){
  .mh-band-facts{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px}
  .mh-facts{grid-template-columns:minmax(0,1fr);gap:28px}
  .mh-fact{padding-left:28px}
  .mh-fact__n{font-size:clamp(44px,4.6vw,60px)}
}

/* mh-apply: the two ways to apply as stacked cards (Relume FAQ 11 accordion pattern). Each card shows the route's
   name, grades, key facts and its main button straight away, so visitors can act without opening anything. The steps
   and "Have ready" open underneath from a "See the steps" bar: a native <details>, so no script is needed (the same
   click-to-open as the FAQs). The card's border turns teal while it is open. Markup:
     <div class="mh-apply-list">
       <article class="mh-apply">
         <div class="mh-apply__head">
           <div class="mh-apply__name"><h3>Introductory grades</h3><p>Studying, Essentials or Affiliate</p></div>
           <ul class="mh-apply__meta"><li><strong>5 min</strong> online</li>…</ul>
           <a class="btn" href="…">Join now</a>
         </div>
         <details class="mh-apply__more">
           <summary><span class="mh-apply__show">See the steps and what to have ready</span><span class="mh-apply__hide">Hide the steps</span></summary>
           <div class="mh-apply__body">
             <ol class="mh-timeline"><li><h4>…</h4><p>…</p></li>…</ol>
             <div class="mh-apply__side"><h4>Have ready</h4><ul class="mh-checks mh-checks--todo">…</ul><a class="mh-link mh-link--arrow">…</a></div>
           </div>
         </details>
       </article> …
     </div>
   Add the attribute "open" to a <details> to have that card start open.
   The key facts sit under the title in the same grey, regular weight (no bold), separated by dots.
   Desktop (900px+): title and key facts on the left, button on the right; when open, steps on the left and "Have ready" on the right.
   Phones: title, key facts and a full-width button stacked with generous space between them,
   and extra room between the steps and between checklist lines.
   mh-apply-after: a centred line under the cards ("Not sure which grade?"). */
.mh-apply-list{display:flex;flex-direction:column;gap:20px}
.mh-apply{min-width:0;border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:var(--mh-white);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.mh-apply:has(.mh-apply__more[open]){border-color:var(--mh-teal);box-shadow:0 8px 24px rgba(15,42,53,.08)}
.mh-apply__head{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:28px 24px 24px}
.mh-apply__name{display:flex;flex-direction:column;gap:6px}
.mh-apply__name p{color:var(--mh-muted)}
.mh-apply__meta{display:block;list-style:none;margin:0;padding:0;color:var(--mh-muted)}
.mh-apply__meta li{display:inline;margin:0;padding:0;white-space:nowrap}
.mh-apply__meta li::before{content:none}
.mh-apply__meta li:not(:last-child)::after{content:"\00a0\00a0\00b7\00a0"}
.mh-apply__meta strong{color:inherit;font-weight:inherit}
.mh-apply__head .btn{width:100%;margin-top:14px}
@media (min-width:600px){
  .mh-apply__head .btn{width:auto;justify-self:start;margin-top:10px}
}
@media (min-width:900px){
  .mh-apply__head{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 32px;padding:28px}
  .mh-apply__name,.mh-apply__meta{grid-column:1}
  .mh-apply__head .btn{grid-column:2;grid-row:1/3;margin-top:0}
}
.mh-apply__more{border-top:1px solid var(--mh-line)}
.mh-apply__more summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;color:var(--mh-teal);font-weight:600;cursor:pointer;list-style:none}
.mh-apply__more summary::-webkit-details-marker{display:none}
.mh-apply__more summary::after{content:"";flex-shrink:0;width:9px;height:9px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.mh-apply__more[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.mh-apply__more summary:hover,.mh-apply__more summary:focus-visible{background:var(--mh-soft)}
.mh-apply__hide,.mh-apply__more[open] .mh-apply__show{display:none}
.mh-apply__more[open] .mh-apply__hide{display:inline}
.mh-apply__body{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;padding:12px 24px 36px}
.mh-apply__side{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:32px;border-top:1px solid var(--mh-line)}
.mh-apply__side h4{margin:0}
@media (min-width:900px){
  .mh-apply__more summary{padding:18px 28px}
  .mh-apply__body{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px;padding:12px 28px 32px}
  .mh-apply__side{padding-top:0;border-top:0}
}
@media (max-width:599px){
  .mh-apply-list{gap:24px}
  .mh-apply__body .mh-timeline li{padding-bottom:30px}
  .mh-apply__body .mh-timeline li:last-child{padding-bottom:0}
  .mh-apply__body .mh-timeline h4{margin-bottom:6px}
  .mh-apply__side .mh-checks{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .mh-apply,.mh-apply__more summary::after{transition:none}
}
.mh .mh-apply-after{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;margin-top:28px;text-align:center;color:var(--mh-muted)}

/* mh-timeline: numbered steps top to bottom, joined by a line. Add class "mh-timeline__ours" to a step CICM does
   (e.g. the review): its circle is hollow, so the visitor's own steps stand out. */
.mh-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;counter-reset:mh-tl}
.mh-timeline li{position:relative;margin:0;padding:0 0 22px 48px;counter-increment:mh-tl}
.mh-timeline li:last-child{padding-bottom:0}
.mh-timeline li::before{content:counter(mh-tl);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--mh-teal);color:var(--mh-white);font-weight:700;line-height:1}
.mh-timeline li:not(:last-child)::after{content:"";position:absolute;left:15px;top:38px;bottom:6px;width:2px;background:var(--mh-line)}
.mh-timeline li.mh-timeline__ours::before{background:var(--mh-white);color:var(--mh-teal);box-shadow:inset 0 0 0 2px var(--mh-teal)}
.mh-timeline h4{margin:4px 0}
.mh-timeline p{margin:0;color:var(--mh-muted)}

/* mh-checks--todo: an empty circle per line instead of a tick, for "have ready" checklists */
.mh-checks--todo li::before{top:.2em;left:0;width:16px;height:16px;border:2px solid var(--mh-teal);border-radius:50%;transform:none}

/* mh-fees: the fees table (mh-table mh-table--fees) with a side column: the "employer pays" card (the biggest lever for
   professional grades) and the tax relief card under it. On the dark blue band, see "Fees on the dark blue band" below.
   Side column on the right from 900px, where it stays in view while the table scrolls past.
   In the table the annual fee is bold and the other columns muted, so the eye goes to one number per grade.
   Grade names link to their grade pages; a note under a name goes in <small>.
   Phones (under 600px): each grade becomes a block, name on top and the three fees side by side under it, labelled
   from the data-label on each cell (<td data-label="Annual">), so nothing scrolls sideways.
   mh-fees__notes: the small print under the table, one <li> per point. */
.mh-fees{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.mh-fees__aside{display:flex;flex-direction:column;gap:16px}
.mh-fees__aside .mh-panel{padding:28px}
@media (min-width:900px){
  .mh-fees{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px}
  .mh-fees__aside{position:sticky;top:140px}
}
.mh-table--fees td:nth-of-type(1){font-weight:700}
.mh-table--fees td:nth-of-type(n+2){color:var(--mh-muted)}
.mh-table--fees tbody th a{color:inherit;text-decoration:none}
.mh-table--fees tbody th a:hover,.mh-table--fees tbody th a:focus-visible{color:var(--mh-teal);text-decoration:underline}
.mh-table--fees tbody th small,.mh-table--fees thead small{font-weight:400}
@media (max-width:599px){
  .mh-table--fees thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mh-table--fees,.mh-table--fees tbody{display:block;width:100%}
  .mh-table--fees tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px;padding:14px 16px;border-bottom:1px solid var(--mh-line)}
  .mh-table--fees tbody tr:last-child{border-bottom:0}
  .mh-table--fees tbody tr>*{padding:0;border:0;text-align:left!important;white-space:normal}
  .mh-table--fees tbody th{grid-column:1/-1;margin-bottom:6px}
  .mh-table--fees tbody tr.mh-table__group{display:block;padding:10px 16px;background:var(--mh-tint)}
  .mh-table--fees td::before{content:attr(data-label);display:block;font-weight:400;color:var(--mh-muted)}
}
.mh-fees__notes{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--mh-muted)}
.mh-fees__notes li{position:relative;margin:0;padding:0 0 0 16px}
.mh-fees__notes li::before{content:"";position:absolute;left:2px;top:.6em;width:5px;height:5px;border:0;border-radius:50%;background:var(--mh-muted);transform:none}
/* Fees on the dark blue band: the section carries class "mh-section--blue" (the same band as the grade comparison
   sections). The table switches to its dark version by itself. The notes under the table go light grey-blue.
   mh-fees__employer: the white "Get your employer to pay" card, the brightest thing on the band. Its button opens the
   business case dialog (see mh-case below and MH_CASES in the membership script).
   mh-fees__tax: the tax relief card, drawn quietly (translucent, white text) so it sits behind the employer card. */
.mh-section--blue .mh-fees__notes{color:#c9d6dc}
.mh-section--blue .mh-fees__notes li::before{background:#7fc4d6}
.mh-fees__employer{border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.18)}
.mh-fees__employer .btn{align-self:flex-start;margin-top:6px}
.mh-fees__tax{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--mh-white)}
.mh-fees__tax h3{color:var(--mh-white)}
.mh-fees__tax .mh-muted{color:#c9d6dc}
.mh-fees__tax .mh-link{color:var(--mh-white)}
@media (max-width:599px){
  .mh-fees__employer .btn{width:100%}
}
/* a <button class="btn"> that opens the business case dialog: same font as the site's link buttons */
.mh button.btn[data-mh-case]{font:inherit;font-weight:600;cursor:pointer}

/* mh-case: the business case dialog, drawn by the membership script (MH_CASES) the first time a button with
   data-mh-case is clicked. Centred over the page on desktop; slides up from the bottom on phones.
   Inside: the grade picker, a preview of the two-page PDF (thumbnail in the PDF's own colours, what is inside),
   one Download button (greyed out until a grade is picked) and a "Find my grade" link. */
html.mh-case-open{overflow:hidden}
dialog.mh-case{box-sizing:border-box;width:calc(100% - 48px);max-width:560px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;border-radius:16px;background:var(--mh-white);color:var(--mh-ink);box-shadow:0 24px 64px rgba(0,0,0,.35);overflow:auto}
dialog.mh-case::backdrop{background:rgba(1,24,32,.62)}
.mh-case__box{position:relative;display:flex;flex-direction:column;gap:10px;padding:32px}
.mh-case__box h3{margin:0 0 4px;padding-right:36px;color:var(--mh-ink)}
.mh-case__x{position:absolute;top:14px;right:14px;width:40px;height:40px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mh-ink);font:inherit;font-size:24px;line-height:1;cursor:pointer}
.mh-case__x:hover,.mh-case__x:focus-visible{background:var(--mh-soft)}
.mh-case__label{margin-top:12px;font-weight:600}
.mh-case__select{width:100%;margin:0;padding:12px 14px;border:1px solid var(--mh-line);border-radius:8px;background:var(--mh-white);color:var(--mh-ink);font:inherit}
.mh-case__select:focus-visible{outline:2px solid var(--mh-teal);outline-offset:1px}
.mh-case__preview{display:grid;grid-template-columns:108px minmax(0,1fr);gap:18px;align-items:start;margin-top:10px;padding:18px;border-radius:var(--mh-radius);background:var(--mh-soft)}
.mh-case__preview strong{display:block}
.mh-case__meta{display:block;margin-bottom:10px;color:var(--mh-muted)}
.mh-case__preview .mh-checks{gap:6px}
.mh-case__pages{display:flex;gap:4px}
.mh-case__pg{position:relative;display:flex;flex-direction:column;gap:4px;width:52px;height:68px;padding:7px 6px 0;background:#f7f4ef;box-shadow:0 2px 8px rgba(0,0,0,.14);overflow:hidden}
.mh-case__pg b{display:block;height:6px;width:85%;border-radius:1px;background:#1d3a4c}
.mh-case__pg b.s{height:3px;width:45%;background:#0b7a9a}
.mh-case__pg i{display:block;height:2px;width:100%;background:#cfd6da}
.mh-case__pg u{position:absolute;left:0;right:0;bottom:0;height:9px;background:#0f2d3e}
.mh-case .mh-case__cta{display:flex;width:100%;margin-top:10px}
.mh-case .mh-case__cta[aria-disabled="true"]{opacity:.45;pointer-events:none}
.mh-case__help{margin-top:10px!important;color:var(--mh-muted)}
@media (max-width:599px){
  dialog.mh-case{width:100%;max-width:none;max-height:92vh;max-height:92dvh;margin:auto 0 0;border-radius:16px 16px 0 0}
  .mh-case__box{padding:28px 20px 32px}
  .mh-case__preview{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* mh-crit: the professional grade criteria (ACICM, MCICM, FCICM) as click-to-open rows, using the mh-faq rows so no
   script is needed. Each row shows the grade as an h3 with who it is for in a grey line under it (the same title style
   as the route cards above), so the row title stays bigger than the h4 headings inside. Opening it shows who it is for, what the assessors
   look for and the qualified route on the left, and "What to send" with the grade's buttons in a white card on the
   right (stacked under 900px). A link to #criteria-acicm (or -mcicm, -fcicm) opens that row. Markup:
     <div class="mh-faq mh-crit">
       <details id="criteria-acicm">
         <summary><h3>Associate (ACICM)</h3><span class="mh-crit__sub">Who it is for, one line</span></summary>
         <div class="mh-crit__body">
           <div class="mh-crit__main"><h4>…</h4><p>…</p><ul class="mh-checks mh-checks--cols">…</ul></div>
           <div class="mh-crit__send"><h4>What to send</h4><ul class="mh-checks mh-checks--todo">…</ul><a class="btn">…</a></div>
         </div>
       </details> …
     </div>
   mh-checks--cols: a long tick list in two columns from 1100px. */
.mh-crit summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:24px 0;font-weight:400}
.mh-crit summary h3{grid-column:1;margin:0}
.mh-crit__sub{grid-column:1;color:var(--mh-muted)}
.mh-crit summary::after{grid-column:2;grid-row:1/3}
.mh-crit summary:hover h3,.mh-crit details[open] summary h3{color:var(--mh-teal)}
/* older row markup (<span><strong>Grade</strong><small>line</small></span>): still drops the line under the grade,
   in regular weight and grey, so a page that has not been re-pasted reads the same way */
.mh-crit summary>span:not(.mh-crit__sub),.mh-crit summary>strong,.mh-crit summary>small{grid-column:1}
.mh-crit summary>span:not(.mh-crit__sub){display:flex;flex-direction:column;gap:6px;min-width:0}
.mh-crit summary small{display:block;font-weight:400;color:var(--mh-muted)}
.mh-crit details>.mh-crit__body{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:none;padding:4px 0 32px;color:var(--mh-ink)}
.mh-crit__main{display:flex;flex-direction:column;gap:12px;min-width:0}
.mh-crit__main h4{margin:14px 0 0}
.mh-crit__main h4:first-child{margin-top:0}
.mh-crit__main p{color:var(--mh-muted);max-width:68ch}
.mh-crit__main .mh-checks{gap:10px}
.mh-crit__send{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px;border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:var(--mh-white)}
.mh-crit__send h4{margin:0}
.mh-crit__send .mh-checks{gap:12px}
.mh-crit__send .btn{margin-top:4px}
@media (min-width:900px){
  .mh-crit details>.mh-crit__body{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px;align-items:start}
}
@media (min-width:1100px){
  .mh-crit__main .mh-checks--cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px}
}
@media (max-width:599px){
  .mh-crit__send{padding:20px}
  .mh-crit__send .btn{width:100%}
  .mh-crit__main .mh-checks{gap:14px}
}
/* mh-aud: "Who it's for", every audience shown at once (no tabs or clicking), from Relume Layout 611.
   Two by two (one column on phones): a big number beside each audience, then its name (h3), one line
   (p.mh-muted) and one or two arrow links in .mh-aud__links. Works on white and on the dark band
   (mh-section--blue: light text, light teal numbers, faint dividers). First used on /membership/creditmatters.html.
   <div class="mh-aud">
     <div class="mh-aud__item"><span class="mh-aud__n">01</span>
       <div class="mh-aud__body"><h3>Audience</h3><p class="mh-muted">One line.</p>
         <div class="mh-aud__links"><a class="mh-link mh-link--arrow" href="...">Link</a></div></div></div>
   </div> */
.mh-aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
.mh-aud__item{display:flex;gap:24px;min-width:0;padding:32px 0;border-top:1px solid var(--mh-line)}
.mh-aud__n{flex:none;width:64px;color:var(--color-two-100,#00779a);font-weight:700;font-size:44px;line-height:1}
.mh-aud__body{display:flex;flex-direction:column;gap:12px;min-width:0}
.mh-aud__body h3,.mh-aud__body p{margin:0}
.mh-aud__links{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:8px}
.mh-section--blue .mh-aud__item{border-top-color:rgba(255,255,255,.18)}
.mh-section--blue .mh-aud__n{color:#7fc4d6}
.mh-section--blue .mh-aud h3{color:#fff}
.mh-section--blue .mh-aud .mh-muted{color:#c9d6dc}
@media (max-width:767px){
  .mh-aud{grid-template-columns:minmax(0,1fr)}
  .mh-aud__n{width:48px;font-size:32px}
}
/* mh-split--fill: add to an mh-split so the picture fills the full height of the text beside it, cropped to fit,
   instead of sitting in the middle with white space above and below. On phones (stacked) it keeps at least 260px.
   First used on /membership/benefits-of-membership/retirement.html ("Who it is for" and the retirement planner). */
.mh-split--fill{align-items:stretch}
.mh-split--fill>.mh-split__media{display:flex;flex-direction:column}
.mh-split--fill>.mh-split__media>p{flex:1 1 auto;display:flex;margin:0!important;line-height:0}
.mh-split--fill>.mh-split__media img{flex:1 1 auto;height:100%!important;min-height:260px;aspect-ratio:auto!important;object-fit:cover}

/* mh-feats: short features in a two by two grid (one column on phones), a line above each, from Relume Layout 4.
   Sits in an mh-split__copy under the title. On the dark band (mh-section--blue) the lines go light teal, headings
   white and text the soft grey-blue; small print (p.mh-muted) straight inside the copy goes a quieter grey-blue.
   <div class="mh-feats"><div class="mh-feat"><h3>Tax</h3><p>One line.</p></div> ...</div>
   Phones: a button row carrying "mh-actions--early" moves up to sit straight under the title, above the features,
   so the call to action is seen without scrolling past them; the small print stays at the end. */
.mh-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin:4px 0}
.mh-feat{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:2px solid var(--color-two-100,#00779a)}
.mh-feat h3,.mh-feat p{margin:0}
.mh-section--blue .mh-feat{border-top-color:#7fc4d6}
.mh-section--blue .mh-feat h3{color:#fff}
.mh-section--blue .mh-feat p{color:#c9d6dc}
.mh-section--blue .mh-split__copy>.mh-muted{color:#9fb3bb}
@media (max-width:767px){
  .mh-split__copy:has(>.mh-feats)>.mh-actions--early{order:1;padding-top:0}
  .mh-split__copy:has(>.mh-feats)>.mh-feats{order:2}
  .mh-split__copy:has(>.mh-feats)>.mh-muted{order:3}
}
@media (max-width:599px){.mh-feats{grid-template-columns:minmax(0,1fr)}}
/* mh-lines: a short list as clean rows, a hairline between each and a small teal marker, e.g. the five elements of a
   skill area on the Professional standards page. Long items wrap neatly on their own row.
   <ul class="mh-lines"><li>Strategy and policy</li> ...</ul>
   In an mh-panel, a link straight after the list sits at the bottom of the card, so the cards' links line up. */
.mh-lines{list-style:none;margin:4px 0 0;padding:0;border-bottom:1px solid var(--mh-line)}
.mh-lines li{position:relative;margin:0;padding:11px 0 11px 20px;border-top:1px solid var(--mh-line);color:var(--mh-ink);line-height:1.35}
.mh-lines li::before{content:"";position:absolute;left:2px;top:calc(11px + .68em - 3px);width:6px;height:6px;border:0;border-radius:50%;background:var(--color-two-100,#00779a);transform:none}
.mh-panel .mh-lines+.mh-link{margin-top:auto;padding-top:10px}

/* mh-bento__links: the button and the text link beside it sit on one centre line; when they wrap onto two lines
   (phones), a little more space between them */
.mh-bento__links{align-items:center}
@media (max-width:599px){.mh-bento__links{row-gap:18px}}

/* mh-index: a numbered index in two columns (one on phones), from Relume Layout 242. Each line: a small group label
   in capitals over the item name; the numbers (01, 02 ...) are added automatically. First used for the eleven
   specialisms on /membership/professional-standards.html.
   <ol class="mh-index"><li><small>Credit risk</small><strong>Consumer credit risk management</strong></li> ...</ol> */
.mh-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;list-style:none;margin:0 0 8px;padding:0;counter-reset:mh-ix}
.mh-index li{counter-increment:mh-ix;display:grid;grid-template-columns:52px minmax(0,1fr);gap:2px 12px;margin:0;padding:18px 0;border-top:1px solid var(--mh-line)}
.mh-index li::before{content:counter(mh-ix,decimal-leading-zero);position:static;grid-row:1/3;width:auto;height:auto;border:0;background:none;transform:none;color:var(--color-two-100,#00779a);font-weight:700;font-size:24px;line-height:1.1}
.mh-index small{color:var(--mh-muted);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.mh-index strong{font-weight:600;color:var(--mh-ink)}
@media (max-width:767px){.mh-index{grid-template-columns:minmax(0,1fr)}}

/* mh-bento__lead--bleed: add to an mh-bento__lead so its picture fills the right-hand side of the tinted panel, right
   to its top, right and bottom edges (no white frame, no rounded corners of its own; the panel's corners round it),
   cropped to fit the height of the text beside it. Phones: the picture runs edge to edge across the bottom of the
   panel, under the text. First used on /membership/professional-standards.html ("What they are"). */
.mh-bento__lead--bleed{padding:0 0 0 28px;align-items:stretch;overflow:hidden}
.mh-bento__lead--bleed>.mh-bento__text{align-self:center;padding:28px 0}
.mh-bento__lead--bleed>p:has(>img),.mh-bento__lead--bleed>img{display:flex;border-radius:0;background:none}
.mh-bento__lead--bleed>p>img,.mh-bento__lead--bleed>img{height:100%!important;min-height:240px;aspect-ratio:auto;object-fit:cover;object-position:50% 35%}
@media (max-width:767px){
  .mh-bento__lead--bleed{padding:0}
  .mh-bento__lead--bleed>.mh-bento__text{padding:28px 28px 8px}
}
/* mh-library: ReadyMembership's own resource widgets (the grid of resources), shown as a list in the style of the
   restyled events list: one row per item with the date, a "Members only" tag, the title, two lines of teaser, the
   tags, and a "Watch" or "Listen" button on the right (under the text on phones). The pictures are hidden.
   The section carries data-mh-library (see "Library" in the notes above MEMBERSHIP_JS); membership.js adds
   class mh-library and, when there is more than one widget, a row of pills to switch between them (with counts),
   and shows the first 6 items of each with a "Show all" button. Without the script the widgets show as normal. */
.mh-library .widget-resource{margin:0;padding:6px 24px 24px;border:1px solid var(--mh-line);border-radius:16px;background:var(--mh-white)}
.mh-library .widget-resource[hidden]{display:none!important}
.mh-library .widget-resource>.widget-title{display:none}
.mh-lib__bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.mh-lib__bar[hidden]{display:none}
.mh-lib__bar button{margin:0;padding:8px 16px;border:1px solid var(--mh-line);border-radius:999px;background:var(--mh-white);color:var(--mh-ink);font:inherit;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer}
.mh-lib__bar button:hover{border-color:var(--color-two-100,#00779a);color:var(--color-two-100,#00779a)}
.mh-lib__bar button[aria-pressed="true"]{background:var(--color-two-100,#00779a);border-color:var(--color-two-100,#00779a);color:#fff}
.mh-lib__bar button span{margin-left:6px;font-weight:400;opacity:.75}
.mh-library .article-list{display:block!important;margin:0!important;padding:0!important}
.mh-library .article-list-item{display:block!important;width:auto!important;max-width:none!important;flex:none!important;float:none!important;margin:0!important;padding:20px 0!important;border-bottom:1px solid var(--mh-line);background:none!important;cursor:pointer}
.mh-library .article-list-item:last-child{border-bottom:0}
.mh-library .article-list-item[hidden]{display:none!important}
.mh-library .article-img{display:none!important}
.mh-library .article-wrapper{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
.mh-library .article-details{position:static!important;display:flex;flex-direction:column;gap:6px;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;transform:none!important;background:none!important}
.mh-library .article-meta-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;padding:0}
.mh-library .article-meta-list-item{margin:0;padding:0;color:var(--color-two-90,#0e6a86);font-size:14px}
.mh-library .article-meta-list-item .font-icon{display:none}
.mh-lib__lock{padding:2px 8px;border-radius:999px;background:var(--mh-tint);color:var(--color-two-110,#18506d);font-size:12px;font-weight:600}
.mh-library h4.article-title{margin:0;font-size:inherit;font-weight:600;line-height:1.35;text-wrap:balance}
.mh-library h4.article-title a{color:var(--mh-ink);text-decoration:none}
.mh-library .article-list-item:hover h4.article-title a{color:var(--color-two-100,#00779a)}
.mh-library .article-teaser{margin:0}
.mh-library .article-teaser p{margin:0;color:var(--mh-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mh-library .article-post-meta{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0}
.mh-library .article-post-meta a{padding:2px 9px;border:1px solid var(--mh-line);border-radius:999px;background:var(--mh-soft);color:var(--mh-muted);font-size:13px;line-height:1.4;text-decoration:none}
.mh-lib__go{justify-self:start;color:var(--color-two-100,#00779a);font-weight:700;white-space:nowrap}
.mh-lib__more{display:block;margin:20px auto 0;padding:10px 20px;border:2px solid var(--color-two-100,#00779a);border-radius:999px;background:transparent;color:var(--color-two-100,#00779a);font:inherit;font-weight:700;cursor:pointer}
.mh-lib__more:hover,.mh-lib__more:focus-visible{background:var(--color-two-100,#00779a);color:#fff}
.mh-lib__more[hidden]{display:none}
.mh-library .article-list-more{margin:16px 0 0;text-align:center}
.mh-library .article-list-more .btn{display:inline;min-height:0;margin:0;padding:0;border:0;background:none!important;color:var(--color-two-100,#00779a)!important;font-weight:600;text-decoration:underline}
@media (min-width:768px){
  .mh-library .article-wrapper{grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center}
  .mh-lib__go{grid-column:2;grid-row:1;padding:10px 20px;border:2px solid var(--color-two-100,#00779a);border-radius:999px}
  .mh-library .article-list-item:hover .mh-lib__go{background:var(--color-two-100,#00779a);color:#fff}
}
@media (max-width:599px){.mh-library .widget-resource{padding:4px 18px 20px}}


.ms.mh-section{padding:clamp(64px,9vw,112px) 0}
.ms.mh-section--band{padding:clamp(40px,6vw,64px) 0}
.ms-stack{display:flex;flex-direction:column;gap:clamp(32px,5vw,48px)}
.ms .mh-title{gap:14px;margin:0}
.ms .mh-title h1,.ms .mh-title h2{max-width:22ch}
/* a title straight inside mh-inner (the "Three ways we can support you" doors heading) runs full width: one line on desktop */
.ms .mh-inner>.mh-title h2{max-width:none}
/* and it keeps a gap above the door cards (the shared .ms .mh-title rule zeroes its margin) */
.ms .mh-inner:not(.ms-faq)>.mh-title{margin-bottom:clamp(28px,4vw,40px)}
.ms .mh-lead{max-width:58ch}
.ms-section--tint::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:calc(100vw + 2px);z-index:-1;background:var(--mh-tint)}
/* hero (the mh-inner there is a grid, not the column stack). On this page the band's diagonal split sits further to
   the bottom right (82% instead of the shared 60%), so less of the lighter blue runs behind the contact card. The card
   itself has a solid fill (#103c4b, the same tone the old 6% white overlay gave on the dark blue), so its text keeps
   its contrast wherever the split falls, on any screen size. */
.ms.mh-section--band::before{background:linear-gradient(135deg,#013040 82%,#04637F 0%)}
.ms-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center}
.ms-contact{display:flex;flex-direction:column;gap:16px;padding:26px 28px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:#103c4b;color:var(--mh-white)}
.ms-contact .eyebrow{margin:0}
.ms-contact__row{display:flex;gap:14px;align-items:center}
.ms-contact__row svg{flex:0 0 auto;width:24px;height:24px;color:#7fc4d6}
.ms-contact__text{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.ms-contact__text a{color:var(--mh-white);font-weight:700;text-decoration:none}
.ms-contact__text a:hover,.ms-contact__text a:focus-visible{color:var(--mh-white);text-decoration:underline;text-underline-offset:3px}
.ms-contact__text span,.ms-contact .mh-muted{color:#c9d6dc}
@media (min-width:900px){
  .ms-hero{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px}
}
@media (max-width:599px){
  .ms-hero .mh-actions{flex-direction:column;align-items:stretch}
  .ms-hero .mh-actions .btn{width:100%}
}
/* door cards */
.ms-door .mh-link{align-self:flex-start;margin-top:auto;padding-top:4px}
/* two-up title: eyebrow + heading left, lead right, bottoms aligned */
.ms-head{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.ms-head .mh-lead{margin:0}
@media (min-width:900px){
  .ms-head{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 80px;align-items:end}
}
/* fact tiles */
.ms-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.ms-tile{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:var(--mh-white);color:var(--mh-muted)}
.ms-tile strong{color:var(--mh-ink)}
.ms-tile p{margin:0}
.ms-tile__icon,.ms-tile__num{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%;margin-bottom:4px;line-height:0}
.ms-tile__icon{background:var(--mh-tint);color:var(--mh-teal)}
.ms-tile__icon svg{width:22px;height:22px}
.ms-tile__num{background:var(--mh-teal);color:var(--mh-white);font-weight:700;line-height:1}
.ms-tile--note{background:transparent;border-style:dashed;border-color:#9fc3cf}
.ms-tile--note .ms-tile__icon{background:var(--mh-white)}
/* grey text on a light blue surface is hard to read, so there the text takes the standard text colour:
   the Subscription support tiles, the Advice section's intro, and its dashed "Good to know" tile */
.ms.mh-section:not(.mh-section--blue):not(.ms-section--tint) .ms-tile,.ms-section--tint .ms-head .mh-lead,.ms-section--tint .ms-tile--note{color:var(--mh-ink)}
/* tiles on a white section (Subscription support): tinted, with the circle (number or icon) on the dark blue
   (#013040) and its number or icon in the light teal */
.ms.mh-section:not(.mh-section--blue):not(.ms-section--tint) .ms-tile{background:var(--mh-tint);border-color:transparent}
.ms.mh-section:not(.mh-section--blue):not(.ms-section--tint) .ms-tile__icon,.ms.mh-section:not(.mh-section--blue):not(.ms-section--tint) .ms-tile__num{background:#013040;color:#7fc4d6}
/* the caveat tile's circle (Advice section): white with a teal "i" */
.ms-tile--note .ms-tile__num{background:var(--mh-white);color:var(--mh-teal)}
/* tiles on the dark band: translucent, light-teal circle (number or icon) */
.mh-section--blue .ms-tile{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#c9d6dc}
.mh-section--blue .ms-tile strong{color:var(--mh-white)}
.mh-section--blue .ms-tile__icon,.mh-section--blue .ms-tile__num{background:rgba(127,196,214,.18);color:#7fc4d6}
.mh-section--blue .ms-tile a{color:var(--mh-white)}
.mh-section--blue .ms-head .eyebrow{color:#7fc4d6}
.mh-section--blue .ms-head h2{color:var(--mh-white)}
.mh-section--blue .ms-head .mh-lead{color:#c9d6dc}
/* the form card */
.ms-card{max-width:900px;border:1px solid var(--mh-line);border-radius:16px;overflow:hidden;background:var(--mh-white);color:var(--mh-ink);box-shadow:0 16px 40px rgba(0,45,60,.08);scroll-margin-top:140px}
.ms-card__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 32px;padding:28px 36px;background:#013040;color:var(--mh-white)}
.ms-card--teal .ms-card__head{background:var(--mh-teal)}
.ms-card__head>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.ms-card__head h3{margin:0;color:var(--mh-white)}
.ms-card__head p{margin:0;color:#c9d6dc;max-width:56ch}
.ms-card--teal .ms-card__head p{color:#dff0f5}
.ms-card__tag{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-weight:600;color:var(--mh-white);white-space:nowrap}
.ms-card__tag svg{width:16px;height:16px;color:#7fc4d6}
.ms-card--teal .ms-card__tag svg{color:var(--mh-white)}
.ms-form{display:flex;flex-direction:column;gap:24px;padding:36px;scroll-margin-top:160px}
.ms-form__foot{color:var(--mh-muted);margin:0}
/* links inside the white card keep the teal, even on the dark band (whose own rule turns links white) */
.ms-card .mh-link,.ms-card .mh-link:hover,.ms-card .mh-link:focus-visible{color:var(--mh-teal)!important}
.ms-form>p:empty{display:none}
.ms-form__foot,.ms .formbuilder-form form>p,.ms-form .mh-muted,.ms-terms,.ms-card__head p,.ms-card__tag,.ms-tile{font-size:.9375em;line-height:1.5}
.ms-next{display:none;flex-direction:column;gap:14px}
.ms-next h3{margin:0}
.ms-next .mh-steps{grid-template-columns:minmax(0,1fr);gap:12px}
.ms-next .mh-steps li{flex-direction:row;align-items:flex-start;gap:14px}
.ms-next .mh-steps li::before{flex-shrink:0;width:32px;height:32px;background:var(--mh-tint);color:var(--mh-teal-dark)}
.ms-next .mh-steps p{margin:0}
.ms-next .mh-actions{padding-top:4px}
/* sent: ReadyMembership has swapped the form for its alert */
.ms-form--done .ms-form__foot,.ms-form:has(.formbuilder-form):not(:has(form)) .ms-form__foot{display:none}
.ms-form--done .ms-next,.ms-form:has(.formbuilder-form):not(:has(form)) .ms-next{display:flex}
/* the help strip under the Fund's card */
.ms-help{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;max-width:900px;padding:22px 28px;border-radius:var(--mh-radius);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.ms-help strong{color:#9fd8e8}
.ms-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.ms-links li{margin:0;padding:0}
.ms-links li::before{content:none}
.ms-help .ms-links a{color:var(--mh-white)}
/* ReadyMembership's form widget, restyled: labels above fields, no Bootstrap grid columns, two-up where it fits */
.ms .formbuilder-form{display:flex;flex-direction:column;gap:24px;margin:0}
.ms .formbuilder-form form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
.ms .formbuilder-form form>*{grid-column:1/-1;min-width:0}
/* half-width: first and last name; email when a phone number or the enquiry type follows it, which fills the other half */
.ms .formbuilder-form form>.form-group:has(input[name=first_name]),.ms .formbuilder-form form>.form-group:has(input[name=last_name]),.ms .formbuilder-form form>.form-group:has(input[name=email]):has(+.form-group :is(input[name=phone_number],select)),.ms .formbuilder-form form>.form-group:has(input[name=phone_number]),.ms .formbuilder-form form>.form-group:has(select[name=enquiry_typ]){grid-column:auto}
.ms .formbuilder-form .form-group{margin:0}
.ms .formbuilder-form .form-group.is-horizontal{display:flex;flex-direction:column;gap:8px}
.ms .formbuilder-form label{margin:0;line-height:1.4}
.ms .formbuilder-form .control-label,.ms .formbuilder-form .col-xs-12,.ms .formbuilder-form .col-sm-9,.ms .formbuilder-form .col-md-9,.ms .formbuilder-form .col-md-offset-3{float:none;width:auto;min-height:0;padding:0;margin:0;text-align:left}
.ms .formbuilder-form .control-label{display:block;font-weight:600;color:var(--mh-ink)}
.ms .formbuilder-form .control-label .required{font-style:normal;font-weight:400;color:var(--mh-muted)}
.ms .formbuilder-form .control-label .required sup{display:none}
.ms .formbuilder-form .form-field{width:100%}
.ms .formbuilder-form .form-control{display:block;width:100%;height:auto;min-height:52px;padding:12px 16px;border:1px solid #c4ced3;border-radius:8px;background:var(--mh-white);box-shadow:none;font:inherit;color:var(--mh-ink)}
.ms .formbuilder-form .form-control:focus{border-color:var(--mh-teal);outline:0;box-shadow:0 0 0 3px var(--mh-tint)}
.ms .formbuilder-form textarea.form-control{min-height:140px;resize:vertical}
.ms .formbuilder-form select.form-control{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a666c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
/* checkboxes in two columns (the subscription form's six reasons) */
.ms .formbuilder-form .form-field:has(.checkbox){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.ms .formbuilder-form .checkbox,.ms .formbuilder-form .radio{display:flex;gap:12px;align-items:flex-start;margin:0;padding:0}
.ms .formbuilder-form .checkbox input[type=checkbox],.ms .formbuilder-form .radio input[type=radio]{position:static;flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--mh-teal)}
.ms .formbuilder-form .checkbox label,.ms .formbuilder-form .radio label{min-height:0;margin:0;padding:0;font-weight:400;line-height:1.45;cursor:pointer}
.ms .formbuilder-form .checkbox label::first-letter{text-transform:uppercase}
/* paragraphs the form carries (terms, data privacy): folded into the ms-terms toggle by membership.js; blank ones hidden */
.ms .formbuilder-form form>p{margin:0;color:var(--mh-muted)}
.ms .formbuilder-form form>p:empty,.ms .formbuilder-form form>p.ms-blank{display:none}
.ms-terms{margin:0;color:var(--mh-muted)}
.ms-terms summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--mh-ink)}
.ms-terms summary::-webkit-details-marker{display:none}
.ms-terms summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--mh-muted);border-bottom:2px solid var(--mh-muted);transform:rotate(45deg);transition:transform .15s}
.ms-terms[open] summary::after{transform:rotate(-135deg)}
.ms-terms>div{display:flex;flex-direction:column;gap:8px;padding-top:10px}
.ms-terms>div p{margin:0}
/* captcha and button on one line */
.ms .formbuilder-form form>.form-group:has(.g-recaptcha){grid-column:1/span 1;align-self:center}
.ms .formbuilder-form form>.form-group:has(.btn){grid-column:2/span 1;align-self:center}
.ms .formbuilder-form .g-recaptcha{margin:0}
.ms .formbuilder-form .btn{display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0}
@media (max-width:599px){
  .ms .formbuilder-form form{grid-template-columns:minmax(0,1fr)}
  .ms .formbuilder-form form>*,.ms .formbuilder-form form>.form-group:has(.g-recaptcha),.ms .formbuilder-form form>.form-group:has(.btn){grid-column:1/-1}
  .ms .formbuilder-form .form-field:has(.checkbox){grid-template-columns:minmax(0,1fr)}
  .ms-card__head,.ms-form{padding:24px}
}
/* validation and the sent state */
.ms .formbuilder-form .has-error .form-control{border-color:#b42318;box-shadow:none}
.ms .formbuilder-form .help-block,.ms .formbuilder-form .error-message{margin:0;color:#b42318}
.ms .formbuilder-form .alert,.ms .formbuilder-form .alert-success{display:flex;gap:12px;align-items:center;margin:0;padding:14px 16px;border:0;border-radius:10px;background:#e4f6ec;color:#1b5e3a;font-weight:600;font-size:inherit;line-height:1.4}
.ms .formbuilder-form .alert-danger{background:#fdecea;color:#8a2a21}
/* questions */
.ms-faq{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.ms-faq>.mh-title{margin:0}
@media (min-width:900px){
  .ms-faq{grid-template-columns:minmax(0,5fr) minmax(0,12fr);gap:64px}
}


.page-section-title{display:none!important}
[data-mh-nav]{min-height:53px}
.mh-nav{position:relative;isolation:isolate}
.mh-nav::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:calc(100vw + 2px);z-index:-1;background:var(--mh-white);border-bottom:1px solid var(--mh-line)}
.mh-nav__inner{display:flex;align-items:center;gap:20px}
.mh-nav__list{flex:1;min-width:0;display:flex;gap:28px;list-style:none;margin:0;padding:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.mh-nav__list::-webkit-scrollbar{display:none}
.mh-nav__list li{margin:0;padding:0}
.mh-nav__list a{display:block;padding:14px 0 11px;border-bottom:3px solid transparent;color:var(--mh-ink);text-decoration:none}
.mh-nav__list a:hover,.mh-nav__list a:focus-visible{color:var(--mh-teal);text-decoration:none}
.mh-nav__list a[aria-current]{color:var(--mh-teal);border-bottom-color:var(--mh-teal);font-weight:600}
.mh-nav__join{flex-shrink:0;margin:0;padding:8px 16px;font-size:14px}
@media (max-width:599px){
  .mh-nav__list{gap:20px}
  .mh-nav__join{display:none}
}