/* ==========================================================================
   MSBM executive landing pages: shared brand layer on top of Bootstrap 5.3
   (template--executive-leadership-retreat.php, template--executive-leadership-series.php)
   These pages load Bootstrap 5 themselves and skip the site's Bootstrap 4
   stylesheets ($skip_site_stylesheets). Layout, grid, spacing helpers, navbar,
   cards, modal, forms and buttons all come from Bootstrap's markup. This file
   adds the fonts, brand colours (as Bootstrap CSS variables), button variants,
   and the hero, feature bar, final CTA, footer and modal every page shares.
   Each page's own stylesheet loads after this one.

   The fonts live in fonts/executive-leadership-retreat/ because that page came
   first. The icon font is a subset of Material Symbols Outlined holding only
   the icons these pages use. A new icon needs a new subset from
   https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,200..500,0..1,0&icon_names=...
   (icon names comma-separated in alphabetical order, requested with a browser
   user agent so it returns woff2), saved under a new file name so browsers
   holding the old font pick it up.
   ========================================================================== */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/dmsans-latinext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/dmsans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-cyrillicext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-latinext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 200 500; font-display: block;
  src: url("../fonts/executive-leadership-retreat/material-symbols-subset-2.woff2") format('woff2');
}

/* ---------- BRAND TOKENS (override Bootstrap's CSS variables) ---------- */
:root {
  --msbm-navy: #0c1a35;
  --msbm-navy-2: #13264a;
  --msbm-ink: #13213d;
  --msbm-gold: #f1c467;
  --msbm-gold-hover: #f6d283;
  --msbm-gold-text: #f1c062;
  --msbm-tint: #e8eff9;
  --msbm-pale: #f5f6f8;
  --msbm-gutter: clamp(20px, 4vw, 64px);

  --bs-body-font-family: 'DM Sans', system-ui, sans-serif;
  --bs-body-color: #13213d;
  --bs-body-bg: #ffffff;
  --bs-body-line-height: normal;
  --bs-link-color-rgb: 19, 38, 74;
  --bs-link-hover-color-rgb: 201, 154, 58;
  --bs-heading-color: inherit;
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
section[id] { scroll-margin-top: 64px; }
#top { scroll-margin-top: 0; }

.font-serif { font-family: 'Source Serif 4', serif; font-weight: 700; }
.text-gold { color: var(--msbm-gold-text) !important; }
.msbm-lh-tight { line-height: 1.3; }
.msbm-gutter { --bs-gutter-x: calc(2 * var(--msbm-gutter)); }

/* ---------- ICONS (Material Symbols ligatures) ---------- */
.msi {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  line-height: 1;
  overflow: hidden;
  display: inline-block;
  flex: none;
  font-size: 24px;
  width: 1em;
}
.msi-18 { font-size: 18px; } .msi-19 { font-size: 19px; } .msi-20 { font-size: 20px; }
.msi-22 { font-size: 22px; } .msi-24 { font-size: 24px; } .msi-30 { font-size: 30px; }
.msi-36 { font-size: 36px; } .msi-38 { font-size: 38px; } .msi-40 { font-size: 40px; }
.msi-fill { font-variation-settings: 'FILL' 1; }
.msi-light { font-weight: 300; }
.msi-bold { font-weight: 600; }
.msi-feature { font-size: clamp(24px, 2.8vw, 34px); font-weight: 300; color: var(--msbm-navy-2); }

/* ---------- BUTTONS (Bootstrap .btn + brand variants via --bs-btn-* vars) ---------- */
.btn-gold, .btn-navy, .btn-outline-gold, .btn-outline-white {
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.2;
  --bs-btn-border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  white-space: nowrap;
}
.btn-gold {
  --bs-btn-color: var(--msbm-ink);
  --bs-btn-bg: var(--msbm-gold);
  --bs-btn-border-color: var(--msbm-gold);
  --bs-btn-hover-color: var(--msbm-ink);
  --bs-btn-hover-bg: var(--msbm-gold-hover);
  --bs-btn-hover-border-color: var(--msbm-gold-hover);
  --bs-btn-active-color: var(--msbm-ink);
  --bs-btn-active-bg: #e9b94f;
  --bs-btn-active-border-color: #e9b94f;
  --bs-btn-focus-shadow-rgb: 241, 196, 103;
  --bs-btn-disabled-color: var(--msbm-ink);
  --bs-btn-disabled-bg: var(--msbm-gold);
  --bs-btn-disabled-border-color: var(--msbm-gold);
}
.btn-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--msbm-navy-2);
  --bs-btn-border-color: var(--msbm-navy-2);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1d3666;
  --bs-btn-hover-border-color: #1d3666;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1d3666;
  --bs-btn-active-border-color: #1d3666;
  --bs-btn-focus-shadow-rgb: 19, 38, 74;
}
.btn-outline-gold {
  --bs-btn-color: var(--msbm-gold-text);
  --bs-btn-border-color: var(--msbm-gold-text);
  --bs-btn-border-width: 1.5px;
  --bs-btn-hover-color: var(--msbm-gold-text);
  --bs-btn-hover-bg: rgba(241, 192, 98, .12);
  --bs-btn-hover-border-color: var(--msbm-gold-text);
  --bs-btn-active-color: var(--msbm-gold-text);
  --bs-btn-active-bg: rgba(241, 192, 98, .2);
  --bs-btn-active-border-color: var(--msbm-gold-text);
  --bs-btn-focus-shadow-rgb: 241, 192, 98;
}
.btn-outline-white {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(12, 26, 53, .35);
  --bs-btn-border-color: #fff;
  --bs-btn-border-width: 1.5px;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, .12);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .2);
  --bs-btn-active-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}
/* Large CTA button size */
.btn-xl {
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-font-size: 1rem;
  height: 54px;
  transition: transform .2s, background-color .2s, border-color .2s, color .2s;
}
.btn-xl:hover { transform: translateY(-2px); }
.msbm-hero-ctas .btn-xl { min-width: 212px; }
.msbm-hero-ctas .btn-gold { min-width: 262px; }
/* Small nav button */
.btn-nav {
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 18px;
  --bs-btn-font-size: 14px;
  --bs-btn-border-radius: 9px;
  gap: .5rem;
  flex: none;
}
.btn-nav-lg {
  --bs-btn-padding-y: clamp(10px, 1vw, 13px);
  --bs-btn-padding-x: clamp(14px, 1.8vw, 22px);
  --bs-btn-font-size: clamp(13.5px, 1.3vw, 15px);
  --bs-btn-border-radius: 10px;
  gap: .625rem;
}

/* ---------- NAVBARS (hero + sticky) ---------- */
.msbm-nav {
  --bs-navbar-padding-y: 10px;
  --bs-navbar-padding-x: 0;
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #c99a3a;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-brand-margin-end: 0;
  --bs-navbar-brand-font-size: inherit;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-nav-link-padding-x: 0;
}
.msbm-nav .container-fluid { gap: 16px; }
.msbm-brand { display: flex; flex-direction: column; line-height: 1; }
.msbm-brand-name {
  font-family: 'Source Serif 4', serif;
  font-weight: 700;
  color: #fff;
}
.msbm-brand-sub { font-weight: 600; color: #fff; margin-top: 2px; }
.msbm-navlinks {
  --bs-nav-link-padding-y: 0;
  gap: clamp(14px, 2.2vw, 32px);
  justify-content: center;
  white-space: nowrap;
  min-width: 0;
}
.msbm-navlinks .nav-link.active { font-weight: 700; }

.msbm-sticky-nav {
  background: rgba(12, 26, 53, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.msbm-sticky-nav.show { opacity: 1; visibility: visible; transform: none; }
.msbm-sticky-nav .msbm-brand-name { font-size: 26px; letter-spacing: -.01em; }
.msbm-sticky-nav .msbm-brand-sub { font-size: 7.5px; letter-spacing: .06em; }
.msbm-sticky-nav .nav-link { font-size: clamp(13px, 1.2vw, 14px); }

.msbm-hero-nav { --bs-navbar-padding-y: 18px; }
.msbm-hero-nav .msbm-brand-name { font-size: 38px; letter-spacing: -.015em; }
.msbm-hero-nav .msbm-brand-sub { font-size: 9.5px; letter-spacing: .05em; }
.msbm-hero-nav .msbm-navlinks { gap: clamp(14px, 2.4vw, 36px); }
.msbm-hero-nav .nav-link { font-size: clamp(13px, 1.3vw, 14.5px); }

/* Way back to the main site at the end of the sticky nav's links */
.msbm-navlinks-site { padding-left: clamp(14px, 2.2vw, 32px); border-left: 1px solid rgba(255, 255, 255, .25); }
.msbm-navlinks-site .nav-link { gap: 6px; }
.msi-flip { transform: scaleX(-1); }

/* ---------- MAIN SITE STRIP (links back to msbm.org.uk, above the hero nav) ---------- */
.msbm-sitebar { background: rgba(8, 16, 32, .4); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.msbm-sitebar .container-fluid { min-height: 38px; }
.msbm-sitebar-links { gap: clamp(12px, 2vw, 28px); }
.msbm-sitebar-link {
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.msbm-sitebar-link:hover, .msbm-sitebar-link:focus-visible { color: var(--msbm-gold-text); }
/* Below 360px the four links ran past the screen edge at full size */
@media (max-width: 359.98px) {
  .msbm-sitebar .container-fluid { gap: 10px !important; }
  .msbm-sitebar-links { gap: 10px; }
  .msbm-sitebar-link { font-size: 12px; letter-spacing: 0; }
  .msbm-sitebar-link .msi { display: none; }
}

/* ---------- SHARED TEXT PIECES ---------- */
.msbm-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3em;
}
.msbm-eyebrow-dark { color: var(--msbm-ink); }

/* ---------- HERO ---------- */
.msbm-hero { background: var(--msbm-navy); }
.msbm-hero-img { object-position: 60% 40%; }
.msbm-hero-overlay {
  background:
    linear-gradient(180deg, rgba(12, 26, 53, .75), rgba(12, 26, 53, 0)) top / 100% 140px no-repeat,
    linear-gradient(90deg,
      rgba(12, 26, 53, .82) 0%,
      rgba(12, 26, 53, .74) 22%,
      rgba(12, 26, 53, .52) 40%,
      rgba(12, 26, 53, .24) 58%,
      rgba(12, 26, 53, .06) 76%,
      rgba(12, 26, 53, 0) 100%);
}
.msbm-hero-body { padding-top: 38px; padding-bottom: 22px; }
.msbm-hero-eyebrow { font-size: 14.5px; }
.msbm-hero-title {
  margin-top: 16px !important;
  font-size: clamp(44px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.msbm-hero-subtitle { margin-top: 20px; font-size: clamp(18px, 1.8vw, 22px); }
.msbm-hero-info { gap: 22px 30px; margin-top: 30px; font-size: 16px; }
.msbm-hero-info li { gap: 12px; }
.msbm-hero-ctas { margin-top: 28px; gap: 20px !important; }

/* ---------- FEATURE BAR ---------- */
.msbm-features {
  background: var(--msbm-pale);
  border-bottom: 1px solid #e9ecf1;
  padding-top: 16px;
  padding-bottom: 16px;
}
.msbm-feature {
  gap: clamp(8px, 1.2vw, 14px);
  padding: 6px clamp(8px, 1.6vw, 24px);
}
@media (min-width: 768px) {
  .msbm-feature:not(:first-child) { border-left: 1px solid #d9dfe8; }
}
.msbm-icon-circle {
  flex: none;
  border-radius: 50%;
  background: #e4ebf5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msbm-icon-circle-lg { width: clamp(42px, 5vw, 60px); height: clamp(42px, 5vw, 60px); }
.msbm-icon-circle-sm { width: 32px; height: 32px; color: var(--msbm-navy-2); }
.msbm-feature-label {
  font-size: clamp(12.5px, 1.35vw, 15px);
  line-height: 1.35;
  white-space: nowrap;
  min-width: 0;
}

/* ---------- FINAL CTA ---------- */
.msbm-cta { background: var(--msbm-navy); padding-top: 64px; padding-bottom: 64px; }
.msbm-cta .msbm-eyebrow { font-size: 14px; }
.msbm-cta-title {
  margin-top: 14px !important;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
}
.msbm-cta-row { margin-top: 32px; }
.msbm-cta .btn-xl { height: 58px; font-size: 17px; }
.msbm-cta .btn-gold { min-width: 200px; }
.msbm-cta .btn-outline-white { min-width: 300px; background: transparent; }
.msbm-cta-features { gap: 24px clamp(24px, 3vw, 48px); }
.msbm-cta-features li { gap: 14px; }
.msbm-cta-label { font-size: 15px; line-height: 1.35; }

/* ---------- SITE FOOTER (components/footer.inc.php) ----------
   The main site's footer, shared with every other page. Its styles live in the site's Bootstrap 4
   stylesheets (css/style.css and css/new2025/style.css), which these pages skip, so the rules it
   needs are repeated here and scoped to .msbm-footer. Update them if the main footer's look changes. */
.msbm-footer {
  min-height: 100vh;
  background-color: #000;
  color: #fff;
  font-family: 'Europa', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.msbm-footer-title { margin-bottom: 1rem; font-size: 24px; font-weight: 700; text-align: center; }
.msbn-footer-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  place-items: center;
  place-content: center;
  gap: 10px;
  max-width: 90%;
  margin: 2rem auto 0;
}
.msbm-footer-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  justify-items: center;
  align-content: center;
  gap: 28px;
  max-width: 90%;
  margin: 2rem auto 0;
}
.msbm-footer-items-grid ul { display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.msbm-footer-items-grid li { padding-bottom: 5px; font-size: .8rem; color: #b8b8b8; }
.msbm-footer-items-grid ul a { font-size: 16px; color: #fff; opacity: .9; text-decoration: none; transition: opacity .3s ease; }
.msbm-footer-items-grid ul a:hover { color: #fff; opacity: 1; }
.msbm-footer-items-grid .msbm-footer-items-title { display: inline-block; margin-bottom: 1rem; font-size: 20px; font-weight: 600; }
.msbm-footer .msbm-country-select {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  transform: translateY(-8px);
}
/* The "Language" link opens a Google Translate modal that lives in the site navbar, which these pages don't use */
.msbm-footer #google_translate_modal_trigger { display: none !important; }
.msbm-footer-app-download p:nth-child(1) { margin-bottom: 1rem; font-size: 20px; font-weight: 600; }
.msbm-footer-app-download p:nth-child(2) { font-size: 14px; }
.msbm-footer .msbm-btn { text-decoration: none; transition: opacity .3s ease; }
.msbm-footer .msbm-btn:hover { opacity: .9; }
.msbm-footer-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  margin: 3rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.msbm-footer-end p { font-size: 12px; }
.msbm-footer-end a { color: #fff; text-decoration: none; }
.msbm-footer-end-social { display: flex; gap: 1.5rem; }
@media (max-width: 768px) {
  .msbm-footer-items-grid {
    grid-template-columns: 1fr;
    justify-items: start;
    align-content: start;
    max-width: 100%;
    padding: 0 1rem;
  }
}

/* ---------- MODAL (Bootstrap .modal, themed) ---------- */
.msbm-modal {
  --bs-modal-width: 480px;
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: 14px;
  --bs-modal-inner-border-radius: 14px;
  --bs-modal-padding: 0;
  --bs-modal-box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.modal-backdrop {
  --bs-backdrop-bg: #081020;
  --bs-backdrop-opacity: .62;
  backdrop-filter: blur(4px);
}
.msbm-modal-header { background: var(--msbm-navy); color: #fff; padding: 22px 28px 20px; }
.msbm-modal-heading { flex: 1 1 auto; min-width: 0; }
.msbm-modal-header .btn-close { opacity: .85; flex: none; margin: 0 -4px 0 12px; }
.msbm-modal-header .btn-close:hover { opacity: 1; }
.msbm-modal-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .28em; color: var(--msbm-gold-text); }
.msbm-modal-title { margin-top: 6px; font-size: 25px; line-height: 1.15; }
.msbm-modal-subtitle { margin-top: 6px; font-size: 13.5px; color: #c9d2e2; }
.msbm-modal-body { padding: 22px 28px 26px; }
.msbm-modal .form-label { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.msbm-modal .form-control {
  height: 44px;
  border-radius: 8px;
  border: 1.5px solid #d3dae5;
  padding: 0 14px;
  font-size: 15px;
  color: var(--msbm-ink);
}
.msbm-modal .form-control:focus {
  border-color: var(--msbm-navy-2);
  box-shadow: 0 0 0 3px rgba(19, 38, 74, .12);
}
.msbm-modal .form-control.is-invalid { border-color: #c0392b; background-position: right 12px center; }
.msbm-modal .invalid-feedback { font-size: 12px; color: #c0392b; }
.msbm-form-optional { font-weight: 400; color: #6b7486; }
.msbm-submit { margin-top: 20px; height: 50px; font-size: 15.5px; }
.msbm-form-message { margin-top: 16px; padding: 10px 14px; font-size: 13.5px; border-radius: 8px; }
/* Honeypot field for bots. Kept off-screen rather than display:none, which some bots skip. */
.msbm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.msbm-fineprint { margin-top: 14px; font-size: 11.5px; color: #6b7486; }
.msbm-success { padding: 12px 0 4px; }
.msbm-success-icon { width: 64px; height: 64px; background: var(--msbm-tint); color: var(--msbm-navy-2); }
.msbm-success-title { margin-top: 16px; font-size: 22px; }
.msbm-success-text { margin-top: 8px !important; max-width: 340px; font-size: 14.5px; line-height: 1.5; color: #3a4558; }
.msbm-success-close { margin-top: 22px; height: 42px; padding: 0 28px; border-radius: 8px; font-weight: 600; }

/* ---------- SMALL SCREENS ---------- */
@media (max-width: 767.98px) {
  .msbm-hero-body { padding-top: 24px; }
  .msbm-cta { padding-top: 48px; padding-bottom: 48px; }
}
@media (max-width: 575.98px) {
  .msbm-hero-ctas .btn-xl { width: 100%; min-width: 0 !important; }
  /* Two feature columns on a phone are too narrow for the unwrapped labels, which ran into the next icon */
  .msbm-feature-label { white-space: normal; }
}