/* Mounir Institute shared page styles (29 October 2026). Linked from every public page.
   One header, one footer and a phone-first finish for the whole site, so every page looks and behaves the same.
   The pages carry many older inline style blocks with !important, so the header rules start with
   "html body #top.site-topbar" and the footer rules with "html body footer.mi-foot": the id outranks them all. */

:root {
  --mi-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mi-serif: Georgia, "Times New Roman", serif;
  --mi-gold: #d7b56d;
  --mi-gold-light: #f0dca5;
  --mi-cream: #f7f4ec;
  --mi-gold-text: linear-gradient(180deg, #f8ebc4 0%, #e7c983 52%, #c19a52 100%);
  --mi-gold-fill: linear-gradient(135deg, #f4e4b4 0%, #dcbb72 48%, #b98f47 100%);
  --mi-hairline: linear-gradient(90deg, transparent, rgba(215, 181, 109, .42) 18%, rgba(240, 220, 165, .62) 50%, rgba(215, 181, 109, .42) 82%, transparent);
  --mi-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Finish across the whole site ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html body {
  font-family: var(--mi-sans) !important;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
html body :is(h1, h2, h3) { text-wrap: balance; }
html body :is(p, li) { text-wrap: pretty; }
html body ::selection { background: rgba(215, 181, 109, .32); color: #fff; }
html body :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #e6c97f !important; outline-offset: 3px !important; }
html body :is(a, button, summary) { touch-action: manipulation; }

/* ---------- Header ---------- */
html body #top.site-topbar {
  position: relative !important; z-index: 1000 !important; display: block !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
  background: linear-gradient(180deg, rgba(16, 15, 12, .98) 0%, rgba(9, 9, 9, .96) 100%) !important;
  font-family: var(--mi-sans) !important; height: auto !important; min-height: 0 !important; transform: none !important;
}
html body #top.site-topbar::before { content: none !important; }
html body #top.site-topbar::after {
  content: "" !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  height: 1px !important; background: var(--mi-hairline) !important; opacity: .8 !important; pointer-events: none !important; border: 0 !important;
}
html body #top.site-topbar .topbar-inner {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 22px !important;
  width: 100% !important; max-width: 1180px !important; min-height: 78px !important; margin: 0 auto !important;
  padding: 12px clamp(20px, 4vw, 40px) !important; position: static !important; flex-wrap: nowrap !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
}

/* Logo: the cropped emblem, a gold hairline and a letter-spaced two-line wordmark in gold */
html body #top.site-topbar .topbar-logo {
  display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 !important; padding: 0 !important;
  text-decoration: none !important; flex: 0 0 auto !important; min-width: 0 !important; border: 0 !important; background: none !important;
}
html body #top.site-topbar .topbar-logo img {
  display: block !important; flex: 0 0 auto !important; width: auto !important; height: 46px !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important; object-fit: contain !important; mix-blend-mode: normal !important;
  filter: drop-shadow(0 2px 10px rgba(215, 181, 109, .18)) !important; transform: none !important;
}
html body #top.site-topbar .topbar-brand-name {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 3px !important;
  margin: 0 !important; padding: 2px 0 2px 14px !important; border: 0 !important; border-left: 1px solid rgba(215, 181, 109, .5) !important;
  white-space: nowrap !important; background: none !important;
}
html body #top.site-topbar .topbar-brand-name span {
  display: block !important; margin: 0 !important; padding: 0 !important;
  font-family: var(--mi-sans) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.15 !important;
  letter-spacing: .26em !important; text-transform: uppercase !important;
  background: var(--mi-gold-text) !important; -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important;
}

/* Navigation */
html body #top.site-topbar .topbar-links {
  display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 2px !important;
  margin: 0 0 0 auto !important; padding: 0 !important; border: 0 !important; background: none !important;
  position: static !important; flex: 0 1 auto !important; width: auto !important; overflow: visible !important;
}
html body #top.site-topbar .topbar-links > a,
html body #top.site-topbar .topbar-dropdown > summary {
  position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  height: 42px !important; min-height: 0 !important; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important;
  font-family: var(--mi-sans) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .03em !important;
  text-transform: none !important; text-decoration: none !important; white-space: nowrap !important;
  color: rgba(247, 244, 236, .82) !important; background: transparent !important; box-shadow: none !important;
  cursor: pointer !important; list-style: none !important; user-select: none !important; -webkit-user-select: none !important;
  transition: color .25s ease, background-color .25s ease !important;
}
html body #top.site-topbar .topbar-links > a::before, html body #top.site-topbar .topbar-links > a::after,
html body #top.site-topbar .topbar-dropdown > summary::before { content: none !important; display: none !important; }
html body #top.site-topbar .topbar-dropdown > summary::-webkit-details-marker { display: none !important; }
html body #top.site-topbar .topbar-dropdown > summary::marker { content: "" !important; }
html body #top.site-topbar .topbar-links > a:hover,
html body #top.site-topbar .topbar-dropdown > summary:hover,
html body #top.site-topbar .topbar-dropdown[open] > summary { color: var(--mi-gold-light) !important; background: rgba(215, 181, 109, .09) !important; }
/* A drawn chevron replaces the text one, and turns over when its menu opens */
html body #top.site-topbar .topbar-dropdown > summary > span[aria-hidden] {
  position: relative !important; display: inline-block !important; width: 9px !important; height: 9px !important; margin: 0 !important; padding: 0 !important;
  font-size: 0 !important; line-height: 0 !important; color: inherit !important; transform: none !important; border: 0 !important; background: none !important;
}
html body #top.site-topbar .topbar-dropdown > summary > span[aria-hidden]::before {
  content: "" !important; position: absolute !important; left: 1.5px !important; top: 0 !important; width: 6px !important; height: 6px !important;
  border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; opacity: .75 !important;
  transform: rotate(45deg) !important; transform-origin: 60% 60% !important; transition: transform .35s var(--mi-ease), top .35s var(--mi-ease) !important;
}
html body #top.site-topbar .topbar-dropdown[open] > summary > span[aria-hidden]::before { transform: rotate(-135deg) !important; top: 3px !important; opacity: 1 !important; }
html body #top.site-topbar .topbar-dropdown > summary::after { content: none !important; }
/* Older page styles drew a second chevron on the same span; only the one above is kept. */
html body #top.site-topbar .topbar-dropdown > summary > span[aria-hidden]::after { content: none !important; display: none !important; }

/* Dropdown panel (desktop: a floating card under its button) */
@keyframes mi-menu-in { from { opacity: 0; transform: translate(-50%, -6px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes mi-sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
html body #top.site-topbar .topbar-dropdown { position: relative !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
html body #top.site-topbar .topbar-dropdown .topbar-menu {
  position: absolute !important; top: calc(100% + 12px) !important; left: 50% !important; right: auto !important; bottom: auto !important;
  transform: translateX(-50%) !important; width: max-content !important; min-width: 250px !important; max-width: calc(100vw - 32px) !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important; margin: 0 !important; padding: 8px !important;
  background: linear-gradient(180deg, rgba(26, 24, 19, .97), rgba(14, 13, 11, .98)) !important;
  border: 1px solid rgba(215, 181, 109, .26) !important; border-radius: 16px !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6), 0 2px 0 rgba(255, 255, 255, .03) inset !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important; backdrop-filter: blur(18px) saturate(140%) !important;
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 1001 !important;
}
@media (prefers-reduced-motion: no-preference) {
  html body #top.site-topbar .topbar-dropdown[open] .topbar-menu { animation: mi-menu-in .28s var(--mi-ease) both !important; }
}
/* An invisible bridge so the mouse can travel from the button to the panel */
html body #top.site-topbar .topbar-dropdown .topbar-menu::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: -14px !important; height: 14px !important; background: none !important; border: 0 !important; }
html body #top.site-topbar .topbar-menu .mi-menu-title { display: none !important; }
html body #top.site-topbar .topbar-dropdown .topbar-menu a {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important;
  min-height: 46px !important; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important;
  font-family: var(--mi-sans) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: .01em !important;
  text-transform: none !important; text-decoration: none !important; white-space: nowrap !important; text-align: left !important;
  color: #ece6d8 !important; background: transparent !important; transition: background-color .2s ease, color .2s ease !important;
}
html body #top.site-topbar .topbar-dropdown .topbar-menu a::before { content: none !important; }
html body #top.site-topbar .topbar-dropdown .topbar-menu a::after {
  content: "\2192" !important; display: inline-block !important; position: static !important; width: auto !important; height: auto !important; background: none !important; border: 0 !important;
  font-size: 14px !important; color: var(--mi-gold) !important; opacity: 0 !important; transform: translateX(-6px) !important;
  transition: opacity .2s ease, transform .25s var(--mi-ease) !important;
}
html body #top.site-topbar .topbar-dropdown .topbar-menu a:hover,
html body #top.site-topbar .topbar-dropdown .topbar-menu a:focus-visible { background: rgba(215, 181, 109, .1) !important; color: var(--mi-gold-light) !important; }
html body #top.site-topbar .topbar-dropdown .topbar-menu a:hover::after,
html body #top.site-topbar .topbar-dropdown .topbar-menu a:focus-visible::after { opacity: 1 !important; transform: none !important; }

/* Call to action */
html body #top.site-topbar .topbar-cta {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex: 0 0 auto !important;
  height: 44px !important; min-height: 0 !important; margin: 0 0 0 6px !important; padding: 0 20px !important; border: 0 !important; border-radius: 10px !important;
  font-family: var(--mi-sans) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .02em !important;
  text-transform: none !important; text-decoration: none !important; white-space: nowrap !important;
  color: #15110a !important; background: var(--mi-gold-fill) !important;
  box-shadow: 0 8px 22px rgba(215, 181, 109, .2), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12) !important;
  transition: transform .25s var(--mi-ease), box-shadow .25s ease !important;
}
html body #top.site-topbar .topbar-cta:hover { transform: translateY(-1px) !important; box-shadow: 0 12px 28px rgba(215, 181, 109, .28), inset 0 1px 0 rgba(255, 255, 255, .5) !important; }
html body #top.site-topbar .topbar-cta > span { display: inline-block !important; font-size: 14px !important; transition: transform .25s var(--mi-ease) !important; }
html body #top.site-topbar .topbar-cta:hover > span { transform: translateX(3px) !important; }

/* Mid widths: a little tighter so everything fits on one line */
@media (max-width: 1040px) and (min-width: 761px) {
  html body #top.site-topbar .topbar-inner { gap: 14px !important; }
  html body #top.site-topbar .topbar-links > a, html body #top.site-topbar .topbar-dropdown > summary { padding: 0 10px !important; font-size: 12.5px !important; }
  html body #top.site-topbar .topbar-brand-name span { font-size: 12px !important; letter-spacing: .22em !important; }
  html body #top.site-topbar .topbar-cta { padding: 0 16px !important; }
}

/* Phones: logo and button on the first row, a full-width menu bar on the second, and each dropdown
   opening as a full-width sheet under the header with large rows that are easy to tap. */
@media (max-width: 760px) {
  html body #top.site-topbar .topbar-inner {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "logo cta" "nav nav" !important;
    align-items: center !important; gap: 0 !important; min-height: 0 !important; padding: 12px 16px 0 !important;
  }
  html body #top.site-topbar .topbar-logo { grid-area: logo !important; gap: 11px !important; }
  html body #top.site-topbar .topbar-logo img { height: 38px !important; }
  html body #top.site-topbar .topbar-brand-name { padding-left: 11px !important; gap: 2px !important; }
  html body #top.site-topbar .topbar-brand-name span { font-size: 11px !important; letter-spacing: .24em !important; }
  html body #top.site-topbar .topbar-cta { grid-area: cta !important; height: 40px !important; padding: 0 15px !important; margin: 0 !important; font-size: 12.5px !important; border-radius: 10px !important; gap: 6px !important; }
  html body #top.site-topbar .topbar-links {
    grid-area: nav !important; display: flex !important; justify-content: space-between !important; gap: 0 !important;
    margin: 12px -16px 0 !important; padding: 0 10px !important; width: auto !important; border-top: 1px solid rgba(255, 255, 255, .06) !important;
  }
  html body #top.site-topbar .topbar-links > a,
  html body #top.site-topbar .topbar-dropdown > summary {
    width: auto !important; height: 48px !important; padding: 0 10px !important; border-radius: 0 !important; gap: 6px !important;
    font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .11em !important; text-transform: uppercase !important;
    background: transparent !important; color: rgba(247, 244, 236, .84) !important;
  }
  html body #top.site-topbar .topbar-links > a:hover, html body #top.site-topbar .topbar-dropdown > summary:hover { background: transparent !important; }
  html body #top.site-topbar .topbar-dropdown[open] > summary { background: transparent !important; color: var(--mi-gold-light) !important; }
  /* A short gold line marks the open menu's button */
  html body #top.site-topbar .topbar-dropdown > summary::after {
    content: "" !important; position: absolute !important; left: 22% !important; right: 22% !important; bottom: 0 !important; height: 2px !important;
    border-radius: 2px !important; background: var(--mi-gold-fill) !important; transform: scaleX(0) !important; transition: transform .3s var(--mi-ease) !important;
  }
  html body #top.site-topbar .topbar-dropdown[open] > summary::after { transform: scaleX(1) !important; }
  html body #top.site-topbar .topbar-dropdown > summary > span[aria-hidden] { width: 8px !important; height: 8px !important; }
  html body #top.site-topbar .topbar-dropdown > summary > span[aria-hidden]::before { width: 5px !important; height: 5px !important; }
  html body #top.site-topbar .topbar-dropdown { position: static !important; }
  html body #top.site-topbar .topbar-dropdown .topbar-menu {
    top: calc(100% + 8px) !important; left: 12px !important; right: 12px !important; transform: none !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; padding: 8px 8px 10px !important; border-radius: 20px !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02) inset !important;
  }
  @media (prefers-reduced-motion: no-preference) {
    html body #top.site-topbar .topbar-dropdown[open] .topbar-menu { animation: mi-sheet-in .3s var(--mi-ease) both !important; }
  }
  html body #top.site-topbar .topbar-dropdown .topbar-menu::before { content: none !important; }
  html body #top.site-topbar .topbar-menu .mi-menu-title {
    display: block !important; padding: 12px 14px 8px !important;
    font: 700 10.5px/1 var(--mi-sans) !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--mi-gold) !important;
  }
  html body #top.site-topbar .topbar-dropdown .topbar-menu a {
    min-height: 56px !important; padding: 0 14px !important; border-radius: 12px !important; white-space: normal !important;
    font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: #f4efe3 !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
  }
  html body #top.site-topbar .topbar-dropdown .topbar-menu .mi-menu-title + a { border-top-color: transparent !important; }
  html body #top.site-topbar .topbar-dropdown .topbar-menu a::after { opacity: .9 !important; transform: none !important; font-size: 16px !important; }
  html body #top.site-topbar .topbar-dropdown .topbar-menu a:active { background: rgba(215, 181, 109, .12) !important; }
}
@media (max-width: 370px) {
  html body #top.site-topbar .topbar-inner { padding: 10px 12px 0 !important; }
  html body #top.site-topbar .topbar-links { margin: 10px -12px 0 !important; padding: 0 2px !important; }
  html body #top.site-topbar .topbar-logo img { height: 34px !important; }
  html body #top.site-topbar .topbar-brand-name span { font-size: 10px !important; letter-spacing: .2em !important; }
  html body #top.site-topbar .topbar-cta { padding: 0 12px !important; font-size: 12px !important; }
  html body #top.site-topbar .topbar-links > a, html body #top.site-topbar .topbar-dropdown > summary { font-size: 10.5px !important; letter-spacing: .08em !important; }
}

/* The dimmed backdrop behind an open menu on phones (added by assets/site.js) */
.mi-scrim {
  position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0;
  background: rgba(4, 4, 3, .58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: opacity .3s ease;
}
html.mi-menu-open .mi-scrim { opacity: 1; pointer-events: auto; }

/* ---------- Footer ---------- */
html body footer.mi-foot {
  position: relative !important; display: block !important; overflow: hidden !important;
  margin: 0 !important; padding: 76px 24px 30px !important; border: 0 !important; box-shadow: none !important;
  background: radial-gradient(90% 70% at 50% 0%, rgba(215, 181, 109, .1) 0%, rgba(215, 181, 109, 0) 60%), linear-gradient(180deg, #12110e 0%, #0b0b0a 55%, #080808 100%) !important;
  text-align: center !important; color: #c9c2b3 !important; font-family: var(--mi-sans) !important; font-size: 14px !important; line-height: 1.6 !important;
}
html body footer.mi-foot::before {
  content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: var(--mi-hairline) !important;
}
html body footer.mi-foot .mf-inner { max-width: 980px !important; margin: 0 auto !important; padding: 0 !important; }
html body footer.mi-foot a { margin: 0 !important; text-decoration: none !important; }
html body footer.mi-foot .mf-brand { display: inline-flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important; color: inherit !important; }
html body footer.mi-foot .mf-brand img {
  display: block !important; width: auto !important; height: 86px !important; max-width: none !important; margin: 0 !important;
  filter: none !important;
}
html body footer.mi-foot .mf-name {
  display: block !important; margin: 0 -.34em 0 0 !important;
  font: 600 15px/1.2 var(--mi-sans) !important; letter-spacing: .34em !important; text-transform: uppercase !important;
  background: var(--mi-gold-text) !important; -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
}
html body footer.mi-foot .mf-tagline { max-width: 34ch !important; margin: 18px auto 0 !important; padding: 0 !important; font: 400 15px/1.7 var(--mi-sans) !important; color: #bdb5a4 !important; letter-spacing: .005em !important; }
html body footer.mi-foot .mf-guarantee {
  display: inline-flex !important; align-items: center !important; gap: 9px !important; margin: 18px auto 0 !important; padding: 8px 16px !important;
  border: 1px solid rgba(215, 181, 109, .26) !important; border-radius: 999px !important; background: rgba(215, 181, 109, .05) !important;
  font: 500 12.5px/1.4 var(--mi-sans) !important; color: #e6d6ae !important; letter-spacing: .01em !important;
}
html body footer.mi-foot .mf-guarantee::before { content: "" !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--mi-gold) !important; box-shadow: 0 0 10px rgba(215, 181, 109, .7) !important; flex: none !important; }
html body footer.mi-foot .mf-follow { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; margin: 34px auto 0 !important; }
html body footer.mi-foot .mf-follow-label { display: block !important; font: italic 400 19px/1.2 var(--mi-serif) !important; color: var(--mi-gold-light) !important; letter-spacing: .01em !important; }
html body footer.mi-foot .mf-social { display: flex !important; justify-content: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; }
html body footer.mi-foot .mf-social a {
  display: grid !important; place-items: center !important; width: 46px !important; height: 46px !important; padding: 0 !important; border-radius: 50% !important;
  border: 1px solid rgba(215, 181, 109, .34) !important; background: rgba(255, 255, 255, .025) !important; color: #ecd7a4 !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--mi-ease) !important;
}
html body footer.mi-foot .mf-social a:hover { background: var(--mi-gold) !important; border-color: var(--mi-gold) !important; color: #141109 !important; transform: translateY(-2px) !important; }
html body footer.mi-foot .mf-social svg { display: block !important; width: 19px !important; height: 19px !important; }
html body footer.mi-foot .mf-social svg.mf-stroke { fill: none !important; stroke: currentColor !important; }
html body footer.mi-foot .mf-social svg.mf-fill { fill: currentColor !important; stroke: none !important; }
html body footer.mi-foot .mf-links {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important;
  max-width: 760px !important; margin: 46px auto 0 !important; padding: 34px 0 0 !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .07) !important;
  text-align: left !important;
}
html body footer.mi-foot .mf-col { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; min-width: 0 !important; }
html body footer.mi-foot .mf-col-title { display: block !important; margin: 0 0 10px !important; font: 700 10.5px/1 var(--mi-sans) !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: var(--mi-gold) !important; }
html body footer.mi-foot .mf-col a {
  display: inline-flex !important; align-items: center !important; min-height: 38px !important; padding: 0 !important; max-width: 100% !important;
  font: 500 14.5px/1.35 var(--mi-sans) !important; color: #e6e0d2 !important; letter-spacing: .005em !important; overflow-wrap: anywhere !important;
  transition: color .2s ease !important;
}
html body footer.mi-foot .mf-col a:hover { color: var(--mi-gold-light) !important; }
html body footer.mi-foot .mf-bottom {
  display: block !important; max-width: 760px !important; margin: 34px auto 0 !important; padding: 22px 0 0 !important; border-top: 1px solid rgba(255, 255, 255, .07) !important;
  font: 400 12.5px/1.6 var(--mi-sans) !important; color: #8e877a !important; letter-spacing: .02em !important;
}
@media (max-width: 760px) {
  html body footer.mi-foot { padding: 60px 20px calc(26px + env(safe-area-inset-bottom, 0px)) !important; }
  html body footer.mi-foot .mf-brand img { height: 74px !important; }
  html body footer.mi-foot .mf-name { font-size: 14px !important; letter-spacing: .3em !important; margin-right: -.3em !important; }
  html body footer.mi-foot .mf-tagline { font-size: 14.5px !important; }
  html body footer.mi-foot .mf-guarantee { display: block !important; max-width: 30ch !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 13px !important; text-wrap: balance !important; }
  html body footer.mi-foot .mf-guarantee::before { display: inline-block !important; vertical-align: middle !important; margin: -2px 9px 0 0 !important; }
  html body footer.mi-foot .mf-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 18px !important; margin-top: 40px !important; padding-top: 30px !important; max-width: 420px !important; }
  html body footer.mi-foot .mf-col.mf-contact { grid-column: 1 / -1 !important; }
  html body footer.mi-foot .mf-col a { min-height: 44px !important; font-size: 15px !important; }
  html body footer.mi-foot .mf-bottom { max-width: 420px !important; text-align: left !important; text-wrap: balance !important; }
}

/* ---------- Phones: comfortable sizes everywhere ---------- */
@media (max-width: 760px) {
  /* 16px stops iPhones zooming the page when a field is tapped */
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  html body select, html body textarea { font-size: 16px !important; }
}

/* ---------- Phones: page-by-page polish ----------
   The section id is written twice (#programmes#programmes) on purpose: it outranks the page's older inline rules. */
@media (max-width: 760px) {
  /* Small labels stay readable: no text under about 10px */
  html body .eyebrow { font-size: 11px !important; }
  html body #watch-introduction#watch-introduction .vsl-inner > span { font-size: 11px !important; }
  html body #founding-class#founding-class .founding-number > span { font-size: 10.5px !important; }

  /* Programmes: readable labels and notes */
  html body #programmes#programmes .choice-label { font-size: 10.5px !important; }
  html body #programmes#programmes .plan-subhead { font-size: 11px !important; }
  html body #programmes#programmes .price small { font-size: 12px !important; }
  html body #programmes#programmes .assessment-notice :is(strong, p) { font-size: 12px !important; line-height: 1.4 !important; }

  /* Student stories */
  html body #testimonials#testimonials .thumbnail-result { font-size: 10px !important; }
  html body #testimonials#testimonials .thumbnail-subtitle { font-size: 9px !important; }
  html body #testimonials#testimonials .thumbnail-bottomline { font-size: 8px !important; }
  html body #testimonials#testimonials .thumbnail-name { font-size: 12.5px !important; }
  html body #testimonials#testimonials .testimonial-card-caption .eyebrow { font-size: 10.5px !important; }
  html body #testimonials#testimonials .testimonial-card-caption h3 > span { font-size: 12px !important; }

  /* FAQs read from the left, like a list */
  html body #faq#faq .faq-list summary, html body #faq#faq .faq-list details > p { text-align: left !important; }

  /* Carousel dots keep their look but get a finger-sized touch area */
  html body .carousel-dots button { position: relative !important; }
  html body .carousel-dots button::after { content: "" !important; position: absolute !important; inset: -17px -5px !important; }

  /* Assessment: Continue is the main action, full width on its own row */
  html body #form-actions#form-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  html body #form-actions#form-actions > * { width: 100% !important; min-width: 0 !important; margin: 0 !important; min-height: 48px !important; }
  html body #form-actions#form-actions #next-btn { grid-column: 1 / -1 !important; grid-row: 1 !important; min-height: 54px !important; font-size: 15px !important; }

  /* Policy pages: a little air between the label and the card, and more room for the text */
  html body main > .eyebrow + .panel { margin-top: 14px !important; }
  html body main > .eyebrow + .panel { padding: 24px 20px !important; }
}

/* Homepage plans on phones (31 October 2026): the section heading and a whole plan card fit on one screen,
   even with Safari's toolbars showing (about 660px of a 390 x 844 iPhone), so nobody scrolls to reach a button.
   The "Choose the way you want to learn" line repeats the heading, so phones skip it. */
@media (max-width: 760px) {
  html body #programmes { padding-top: 14px !important; padding-bottom: 20px !important; }
  html body #programmes .wrap > .eyebrow { margin-bottom: 4px !important; }
  html body #programmes .wrap > h2 { margin: 0 0 4px !important; }
  html body #programmes .choice-guide { display: none !important; }
  html body #programmes .carousel-dots { margin: 6px 0 6px !important; }
  html body #programmes .pricing { padding-bottom: 6px !important; }
  html body #programmes .pricing > .price-card { padding: 13px 14px 14px !important; }
  html body #programmes .price-card .choice-label { padding: 4px 10px !important; margin-bottom: 7px !important; line-height: 1.3 !important; }
  html body #programmes .price-card > p { margin: 3px 0 6px !important; }
  html body #programmes .price-card .plan-subhead { margin: 5px 0 3px !important; }
  html body #programmes .price-card .plan-benefits li { margin: 1px 0 !important; }
  html body #programmes .price-card .assessment-notice { padding: 6px 9px !important; margin: 6px 0 8px !important; }
  html body #programmes .price-card .assessment-notice p { margin: 2px 0 0 !important; }
  /* The crossed-out items already read as "not included", so phones drop their "What you miss" heading */
  html body #programmes .price-card .plan-benefits + .plan-subhead { display: none !important; }
  html body #programmes .price-card .excluded-benefits { margin-top: 3px !important; }
}
/* The plans fill one phone screen (with assets/site.js, 31 October 2026): the cards reach from under the heading to
   just above the bottom of the screen, and each card's contents spread out to fill it. On short screens the cards
   keep their natural height. They are sized to the screen with the browser's toolbars hidden (lvh), the size they
   have once the visitor scrolls down to them, and keep that size when the toolbars slide back in (1 November 2026:
   following the toolbars with dvh made the cards shrink and grow as the visitor scrolled up and down). */
@media (max-width: 760px) {
  html body #programmes .pricing { box-sizing: border-box; min-height: calc(100vh - var(--mi-plans-top, 120px) - 10px); min-height: calc(100lvh - var(--mi-plans-top, 120px) - 10px); }
  html body #programmes .pricing > .price-card { display: flex !important; flex-direction: column !important; }
  html body #programmes .price-card .plan-benefits { align-self: center; width: fit-content; max-width: 100%; text-align: left !important; }
  html body #programmes .price-card .plan-benefits:not(.excluded-benefits) { display: flex !important; flex-direction: column; gap: clamp(2px, calc((100vh - 620px) / 10), 20px); gap: clamp(2px, calc((100lvh - 620px) / 10), 20px); }
  html body #programmes .price-card .plan-benefits li { margin: 0 !important; font-size: clamp(11.5px, 1.6vh, 13.5px) !important; font-size: clamp(11.5px, 1.6lvh, 13.5px) !important; }
  /* "What you get" sits just under the description on every card, so the three line up, and the rest of the height
     goes above the crossed-out items (1 November 2026: shared above both, the self-paced card's shorter list left a
     large gap under its description). site.js gives every list the same width, so the ticks line up too. */
  html body #programmes .price-card > p + .plan-subhead { margin-top: 16px !important; }
  html body #programmes .price-card > .excluded-benefits { margin-top: auto !important; }
  html body #programmes#programmes .pricing > .price-card > .cta { margin-top: 10px !important; }
}

/* Keep the full-width plan bar and place its randomized activity count inside it. */
html body #programmes .price-card > .choice-label { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; margin: 0 0 12px !important; }
html body #programmes .price-card > .choice-label > .mi-plan-label-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
html body #programmes .price-card > .choice-label > .mi-programme-viewing { position: static !important; display: flex !important; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: 6px; width: auto; min-width: 0; margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 600; letter-spacing: .2px; color: rgba(247, 244, 236, .74) !important; white-space: nowrap; }
html body #programmes .price-card > .choice-label > .mi-programme-viewing .mi-viewing-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #4fbf8a; animation: miViewingPulse 2s ease-out infinite; }
@media (max-width: 760px) {
  html body #programmes#programmes .price-card > .choice-label { gap: 4px; padding: 4px 7px !important; font-size: 10px !important; letter-spacing: .3px !important; margin-bottom: 8px !important; }
  html body #programmes .price-card > .choice-label > .mi-programme-viewing { flex: 0 1 auto; gap: 4px; font-size: 10px !important; letter-spacing: 0; }
}
@media (max-width: 360px) {
  html body #programmes#programmes .price-card > .choice-label { gap: 3px; padding: 4px 6px !important; font-size: 9.5px !important; letter-spacing: 0 !important; }
  html body #programmes .price-card > .choice-label > .mi-programme-viewing { gap: 3px; font-size: 9.5px !important; }
}
@keyframes miViewingPulse { 0% { box-shadow: 0 0 0 0 rgba(79, 191, 138, .5); } 70% { box-shadow: 0 0 0 6px rgba(79, 191, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 191, 138, 0); } }
@media (prefers-reduced-motion: reduce) { html body #programmes .price-card > .choice-label > .mi-programme-viewing .mi-viewing-dot { animation: none; } }