/* =============================================================
   Better Marriage University — Encore Brand Overlay
   Layered after Encore's compiled styles.scss to retheme
   the marketing and learning portal pages with the BMU
   design system: forest + mint + bone, Switzer + PP Editorial.
   Ported from /design-system/ui_kits/kajabi.
   ============================================================= */


/* ---------- Self-hosted fonts (assets/) ------------------- */

@font-face { font-family: "PP Editorial New"; src: url("PPEditorialNew-Ultralight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Editorial New"; src: url("PPEditorialNew-UltralightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Editorial New"; src: url("PPEditorialNew-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Editorial New"; src: url("PPEditorialNew-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Editorial New"; src: url("PPEditorialNew-Ultrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Editorial New"; src: url("PPEditorialNew-UltraboldItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }

@font-face { font-family: "Switzer"; src: url("Switzer-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-ThinItalic.woff2") format("woff2"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-Extralight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-ExtralightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-SemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-Extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-ExtraboldItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("Switzer-BlackItalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }


/* ---------- BMU design tokens ----------------------------- */

:root {
  --bmu-forest:        #17634F;
  --bmu-forest-deep:   #0D4636;
  --bmu-teal:          #136555;
  --bmu-mint:          #A8E6BD;
  --bmu-mint-soft:     #D5F0DD;
  --bmu-bone:          #EDECE7;
  --bmu-sand:          #E7D8C8;
  --bmu-charcoal:      #202125;
  --bmu-fg:            #202125;
  --bmu-fg-2:          #34363B;
  --bmu-fg-muted:      #5E6066;
  --bmu-fg-faint:      #8C8E94;
  --bmu-rule:          rgba(32, 33, 37, 0.16);
  --bmu-rule-faint:    rgba(32, 33, 37, 0.08);
  --bmu-rule-strong:   rgba(32, 33, 37, 0.42);

  --bmu-font-display:  "PP Editorial New", Georgia, serif;
  --bmu-font-sans:     "Switzer", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --bmu-fs-display:    clamp(56px, 8vw, 128px);
  --bmu-fs-h1:         clamp(40px, 5.2vw, 72px);
  --bmu-fs-h2:         clamp(30px, 3.6vw, 48px);
  --bmu-fs-h3:         clamp(22px, 2.2vw, 30px);

  --bmu-r-xs:          3px;
  --bmu-r-sm:          6px;
  --bmu-r-md:          10px;
  --bmu-r-lg:          18px;
  --bmu-r-xl:          28px;
  --bmu-r-pill:        999px;

  --bmu-shadow-1:      0 1px 0 rgba(32, 33, 37, 0.06);
  --bmu-shadow-2:      0 6px 18px -8px rgba(32, 33, 37, 0.18);
  --bmu-shadow-3:      0 24px 60px -30px rgba(13, 70, 54, 0.45);

  --bmu-dur-fast:      140ms;
  --bmu-dur-base:      240ms;
  --bmu-dur-slow:      480ms;
  --bmu-ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);

  --bmu-space-3:       12px;
  --bmu-space-4:       16px;
  --bmu-space-5:       24px;
  --bmu-space-6:       32px;
  --bmu-space-7:       48px;
  --bmu-space-8:       64px;
  --bmu-space-9:       96px;
  --bmu-space-10:      144px;
}


/* ---------- Global typography ----------------------------- */

body,
#encore-theme,
input,
select,
textarea,
button,
.text-paragraph,
.rich-text,
p {
  font-family: var(--bmu-font-sans) !important;
}

body,
#encore-theme {
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "kern";
  text-rendering: optimizeLegibility;
  color: var(--bmu-charcoal);
  background-color: var(--bmu-bone) !important;
}

h1, h2, h3, h4, h5, h6,
.text-heading,
.text-display,
.section__heading,
.section__subheading,
.products__title,
.product__title,
.page__title,
.card__title,
.block__heading {
  font-family: var(--bmu-font-sans) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--bmu-charcoal);
  text-wrap: balance;
}

h1, .text-display { font-size: var(--bmu-fs-h1); }
h2 { font-size: var(--bmu-fs-h2); }
h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; font-size: var(--bmu-fs-h3); }
h4 { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 18px; }

/* Editorial italic. <em> inside headings flips to PP italic. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.text-heading em,
.text-display em,
.section__heading em,
.section__subheading em,
.product__title em,
.products__title em,
.page__title em,
.accent-word {
  font-family: var(--bmu-font-display) !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--bmu-forest);
}

p, .text-paragraph, .rich-text {
  text-wrap: pretty;
  line-height: 1.55;
}

::selection {
  background: var(--bmu-forest);
  color: var(--bmu-bone);
}

.eyebrow,
.text-eyebrow {
  display: inline-block;
  font-family: var(--bmu-font-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bmu-fg-muted);
  margin: 0 0 var(--bmu-space-4);
}

.pull-quote,
.text-pullquote,
blockquote.text-pullquote,
.block-type--quote blockquote {
  font-family: var(--bmu-font-display) !important;
  font-size: clamp(24px, 3vw, 40px) !important;
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bmu-charcoal);
  border-left: 2px solid var(--bmu-forest);
  padding: 12px 0 12px 24px;
  margin: 32px 0;
}


/* ---------- Buttons --------------------------------------- */

.btn,
.btn-primary,
.btn-default,
.btn--solid,
.btn--outline,
.btn--text,
button.btn,
input[type="submit"].btn,
input[type="submit"]:not([class]),
.section__btn,
.element__button,
.element-button,
a.btn-default,
.product__button .btn,
.products .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px !important;
  font-family: var(--bmu-font-sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em;
  line-height: 1 !important;
  border-radius: var(--bmu-r-pill) !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--bmu-dur-base) var(--bmu-ease-out),
    color var(--bmu-dur-base) var(--bmu-ease-out),
    border-color var(--bmu-dur-base) var(--bmu-ease-out),
    transform var(--bmu-dur-fast) var(--bmu-ease-out) !important;
}

.btn:active,
.btn-primary:active,
button.btn:active,
input[type="submit"].btn:active,
.element__button:active {
  transform: scale(0.98);
}

/* Primary fill: forest bg, mint type. */
.btn-primary,
.element__button.btn-primary,
.btn.btn-primary,
a.btn.btn-primary,
.btn--solid,
.products .btn,
.product__button .btn,
input[type="submit"].btn,
input[type="submit"]:not([class]) {
  background-color: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  border-color: var(--bmu-forest) !important;
}

.btn-primary:hover,
.element__button.btn-primary:hover,
.btn.btn-primary:hover,
a.btn.btn-primary:hover,
.btn--solid:hover,
.products .btn:hover,
.product__button .btn:hover,
input[type="submit"].btn:hover,
input[type="submit"]:not([class]):hover {
  background-color: var(--bmu-forest-deep) !important;
  color: var(--bmu-mint) !important;
  border-color: var(--bmu-forest-deep) !important;
}

/* Ghost / outline variant */
.btn-default,
a.btn-default,
.btn--outline,
.products .btn--outline {
  background-color: transparent !important;
  color: var(--bmu-charcoal) !important;
  border-color: var(--bmu-rule-strong) !important;
}

.btn-default:hover,
a.btn-default:hover,
.btn--outline:hover,
.products .btn--outline:hover {
  background-color: var(--bmu-mint-soft) !important;
  color: var(--bmu-forest-deep) !important;
  border-color: var(--bmu-forest) !important;
}

/* Text-only variant */
.btn--text {
  background: transparent !important;
  color: var(--bmu-charcoal) !important;
  border: 0 !important;
  padding: 8px 0 !important;
  text-decoration: none;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
}

/* Trailing arrow on buttons via ::after for nav-style */
.btn--arrow::after,
a.btn-primary::after,
.btn-primary.btn--with-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform var(--bmu-dur-base) var(--bmu-ease-out);
  margin-left: 4px;
}

.btn--arrow:hover::after,
a.btn-primary:hover::after,
.btn-primary.btn--with-arrow:hover::after {
  transform: translateX(3px);
}


/* ---------- Links ----------------------------------------- */

a {
  transition: color var(--bmu-dur-fast) var(--bmu-ease-out);
}

a:not(.btn):not(.btn-primary):not(.btn-default):not(.element__button):not(.link-list__link):hover {
  color: var(--bmu-forest-deep);
}


/* ---------- Header (compact portal-style) ----------------- */

.header,
.header.header--standard {
  background-color: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bmu-rule-faint);
  font-family: var(--bmu-font-sans) !important;
  font-size: 15px !important;
}

.header__container,
.header__content,
.header__content--desktop {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.header a,
.header .link-list__link,
.header .link-list__link:hover,
.header .nav-link {
  font-family: var(--bmu-font-sans) !important;
  font-weight: 500;
  color: var(--bmu-fg-2) !important;
  text-decoration: none;
}

.header .link-list__link {
  padding: 9px 16px !important;
  border-radius: var(--bmu-r-pill);
  transition:
    background-color var(--bmu-dur-fast) var(--bmu-ease-out),
    color var(--bmu-dur-fast) var(--bmu-ease-out);
}

.header .link-list__link:hover,
.header .link-list__link.is-active,
.header .link-list__link[aria-current="page"] {
  background-color: var(--bmu-mint-soft);
  color: var(--bmu-forest-deep) !important;
  font-weight: 600;
}

.header .logo img,
.header .logo svg {
  max-height: 32px;
  width: auto;
}

/* Header user/avatar block */
.header__block--user .user__login,
.header__block--user .user__avatar,
.header__block--user .dropdown__trigger {
  width: 36px;
  height: 36px;
  border-radius: var(--bmu-r-pill);
  background: var(--bmu-forest);
  color: var(--bmu-mint) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bmu-font-sans) !important;
  font-weight: 600;
  font-size: 13px;
}

/* Hello bar, if used */
.header__block--hello-bar {
  background-color: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  font-family: var(--bmu-font-sans) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
}

.header__block--hello-bar a {
  color: var(--bmu-mint) !important;
  border-bottom: 1px solid currentColor;
}

/* Mobile hamburger */
.hamburger__slice {
  background-color: var(--bmu-charcoal) !important;
}


/* ---------- Footer ---------------------------------------- */

.footer {
  background-color: var(--bmu-charcoal) !important;
  color: var(--bmu-bone) !important;
  font-family: var(--bmu-font-sans) !important;
  padding-top: var(--bmu-space-9);
  padding-bottom: var(--bmu-space-7);
}

.footer a,
.footer .link-list__link {
  color: var(--bmu-bone) !important;
  font-weight: 400;
}

.footer a:hover,
.footer .link-list__link:hover {
  color: var(--bmu-mint) !important;
}

.copyright,
.powered-by a {
  color: rgba(237, 236, 231, 0.7) !important;
  font-size: 13px;
}


/* ---------- Section / sizer / container rhythm ----------- */

.section {
  font-family: var(--bmu-font-sans) !important;
}

.section__heading,
.section__subheading {
  margin-bottom: var(--bmu-space-5) !important;
}

.section__overlay {
  background: linear-gradient(180deg, rgba(13, 70, 54, 0.35) 0%, rgba(13, 70, 54, 0.65) 100%) !important;
}

.sizer {
  padding-top: var(--bmu-space-9);
  padding-bottom: var(--bmu-space-9);
}

.sizer--full {
  padding-top: var(--bmu-space-9);
  padding-bottom: var(--bmu-space-9);
}


/* ---------- Page template (article / page.liquid) -------- */

.page {
  background-color: var(--bmu-bone) !important;
}

.page__title {
  font-family: var(--bmu-font-sans) !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05;
  font-weight: 700;
  color: var(--bmu-charcoal) !important;
  margin-bottom: var(--bmu-space-7);
  text-wrap: balance;
}


/* ---------- Library / products page (the BIG one) -------- */

.products {
  background-color: var(--bmu-bone) !important;
  font-family: var(--bmu-font-sans) !important;
}

.products .container {
  max-width: 1240px !important;
}

.products__title {
  font-family: var(--bmu-font-sans) !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  color: var(--bmu-charcoal) !important;
  margin-bottom: var(--bmu-space-7);
  text-wrap: balance;
}

.products__list {
  gap: var(--bmu-space-4) !important;
}

/* Product card. Mirror the BMU ClassCard from the ui_kit. */
.product {
  background-color: #FFFFFF !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-lg) !important;
  padding: 18px !important;
  display: flex;
  flex-direction: column;
  gap: var(--bmu-space-3);
  box-shadow: var(--bmu-shadow-1);
  transition:
    box-shadow var(--bmu-dur-base) var(--bmu-ease-out),
    transform var(--bmu-dur-base) var(--bmu-ease-out),
    border-color var(--bmu-dur-base) var(--bmu-ease-out);
  text-align: left !important;
  overflow: hidden;
}

.product:hover {
  box-shadow: var(--bmu-shadow-2);
  border-color: var(--bmu-rule);
  transform: translateY(-2px);
}

.product__image {
  border-radius: var(--bmu-r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bmu-sand);
  margin: 0 0 var(--bmu-space-3);
}

.product__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--bmu-dur-slow) var(--bmu-ease-out);
}

.product:hover .product__image img {
  transform: scale(1.03);
}

.product__content {
  display: flex;
  flex-direction: column;
  gap: var(--bmu-space-3);
  flex: 1;
}

.product__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bmu-space-2);
}

.product__title {
  font-family: var(--bmu-font-sans) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: var(--bmu-charcoal) !important;
}

.product__body {
  font-family: var(--bmu-font-sans) !important;
  font-size: 14px !important;
  color: var(--bmu-fg-muted) !important;
  line-height: 1.5;
  margin: 0 !important;
}

.product__button {
  margin-top: var(--bmu-space-3);
}

.product__button .btn {
  width: auto;
}

/* Progress bar (under product title for trackable products) */
.progress {
  background-color: transparent !important;
  width: 100%;
  margin: 4px 0 0 !important;
}

.progress__outer {
  background-color: var(--bmu-rule-faint) !important;
  height: 3px !important;
  border-radius: var(--bmu-r-pill);
  overflow: hidden;
  width: 100%;
}

.progress__inner {
  background-color: var(--bmu-forest) !important;
  height: 100%;
  border-radius: var(--bmu-r-pill);
}

/* Pagination */
.pag,
.pagination {
  margin-top: var(--bmu-space-7) !important;
  gap: var(--bmu-space-2);
}

.pag__link,
.pagination a {
  font-family: var(--bmu-font-sans) !important;
  font-weight: 500;
  font-size: 14px;
  color: var(--bmu-fg-2) !important;
  border-radius: var(--bmu-r-sm);
  padding: 8px 12px;
}

.pag__link:hover,
.pagination a:hover {
  background: var(--bmu-mint-soft);
  color: var(--bmu-forest-deep) !important;
}

.pag__link--current,
.pagination .current {
  background: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
}


/* ---------- Form inputs ----------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select,
.form-control {
  background-color: #FFFFFF !important;
  border: 1px solid var(--bmu-rule) !important;
  border-radius: var(--bmu-r-md) !important;
  font-family: var(--bmu-font-sans) !important;
  font-size: 16px !important;
  color: var(--bmu-charcoal) !important;
  padding: 12px 16px !important;
  transition:
    border-color var(--bmu-dur-fast) var(--bmu-ease-out),
    box-shadow var(--bmu-dur-fast) var(--bmu-ease-out);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--bmu-forest) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px var(--bmu-mint-soft) !important;
}

label {
  font-family: var(--bmu-font-sans) !important;
  font-weight: 500;
  font-size: 14px;
  color: var(--bmu-fg-2);
  margin-bottom: 8px;
}


/* ---------- Cards (generic) ------------------------------- */

.card,
.block__card,
.block-type--card,
.feature__card {
  background: #FFFFFF !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-lg) !important;
  padding: 28px !important;
  box-shadow: var(--bmu-shadow-1);
  transition: box-shadow var(--bmu-dur-base) var(--bmu-ease-out);
}

.card:hover,
.block__card:hover,
.feature__card:hover {
  box-shadow: var(--bmu-shadow-2);
}


/* ---------- Section background utilities ----------------- */

.section--bone     { background-color: var(--bmu-bone) !important; }
.section--sand     { background-color: var(--bmu-sand) !important; }
.section--brand    { background-color: var(--bmu-forest) !important; color: var(--bmu-mint); }
.section--brand h1, .section--brand h2, .section--brand h3 { color: var(--bmu-mint); }


/* ---------- Brand gradient utility ----------------------- */

.bmu-gradient {
  background:
    radial-gradient(120% 90% at 18% 12%, #E5EBE7 0%, transparent 55%),
    radial-gradient(140% 110% at 95% 5%, #D3CDBF 0%, transparent 50%),
    radial-gradient(90% 80% at 100% 100%, #1E1C21 0%, transparent 60%),
    linear-gradient(150deg, #8DA89E 0%, #1E5544 55%, #022F21 100%);
  background-color: var(--bmu-forest-deep);
  color: var(--bmu-bone);
}

.bmu-gradient h1, .bmu-gradient h2, .bmu-gradient h3, .bmu-gradient p {
  color: var(--bmu-bone);
}

.bmu-gradient h1 em, .bmu-gradient h2 em, .bmu-gradient h3 em {
  color: var(--bmu-mint);
}


/* ---------- Login / auth pages --------------------------- */

.login,
.forgot-password,
.password-reset {
  background-color: var(--bmu-bone) !important;
}

.login__form,
.forgot-password__form,
.password-reset__form,
form.simple_form {
  max-width: 440px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid var(--bmu-rule);
  border-radius: var(--bmu-r-lg);
  padding: var(--bmu-space-7);
  box-shadow: var(--bmu-shadow-1);
}


/* ---------- Course outline / lesson list ---------------- */

.course-outline,
.course-outline-category {
  font-family: var(--bmu-font-sans) !important;
}

.course-outline-category__title,
.course-outline__title {
  font-family: var(--bmu-font-sans) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* ---------- Featured / hero blocks ---------------------- */

.section__overlay {
  background: linear-gradient(180deg, rgba(13, 70, 54, 0.35) 0%, rgba(13, 70, 54, 0.65) 100%);
}

.text-block__heading,
.block-type--text h1,
.block-type--text h2,
.block-type--text h3 {
  font-family: var(--bmu-font-sans) !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
}


/* ---------- Focus ring ---------------------------------- */

:focus-visible {
  outline: 2px solid var(--bmu-forest) !important;
  outline-offset: 3px;
  border-radius: var(--bmu-r-xs);
}


/* ---------- Misc Encore element retargeting ------------- */

/* Tag pill */
.tag,
.tags__tag,
.blog-post__tag,
.product__tag {
  display: inline-block;
  padding: 4px 12px !important;
  border-radius: var(--bmu-r-pill) !important;
  background: var(--bmu-mint-soft) !important;
  color: var(--bmu-forest-deep) !important;
  font-family: var(--bmu-font-sans) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0 !important;
}

/* Flash messages */
.flash-messages.flash--success {
  background: var(--bmu-mint-soft) !important;
  color: var(--bmu-forest-deep) !important;
}

.flash-messages.flash--error {
  background: rgba(220, 53, 69, 0.08) !important;
  color: #a02232 !important;
}

/* Search bar */
.blog-search,
.announcement-search {
  background-color: var(--bmu-bone) !important;
}

/* Dropdown */
.dropdown__menu {
  background: #FFFFFF !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-md) !important;
  box-shadow: var(--bmu-shadow-2) !important;
  padding: 8px !important;
}

.dropdown__item a {
  border-radius: var(--bmu-r-sm) !important;
  padding: 8px 12px !important;
  font-family: var(--bmu-font-sans) !important;
  font-size: 15px;
}

.dropdown__item a:hover {
  background: var(--bmu-mint-soft) !important;
  color: var(--bmu-forest-deep) !important;
}


/* ---------- Feature block (icon + text) ----------------- */

.feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bmu-space-3);
  text-align: left;
}

.feature__image {
  width: 44px !important;
  height: 44px;
  border-radius: var(--bmu-r-md) !important;
  background: var(--bmu-mint-soft);
  padding: 8px;
  object-fit: contain;
}

.feature__text {
  font-family: var(--bmu-font-sans) !important;
  color: var(--bmu-fg-2) !important;
  font-size: 15px;
  line-height: 1.55;
}

.feature__text h1, .feature__text h2, .feature__text h3, .feature__text h4 {
  font-size: var(--bmu-fs-h3) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 8px;
  color: var(--bmu-charcoal);
  text-transform: none;
}


/* ---------- Card block (image + body) ------------------- */

.block-type--card .card {
  background: #FFFFFF !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-lg) !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: var(--bmu-shadow-1);
  transition: box-shadow var(--bmu-dur-base) var(--bmu-ease-out);
}

.block-type--card .card:hover {
  box-shadow: var(--bmu-shadow-2);
}

.card__image {
  width: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin: 0 !important;
}

.card__body {
  padding: 24px !important;
  display: flex;
  flex-direction: column;
  gap: var(--bmu-space-3);
}

.card__text {
  font-family: var(--bmu-font-sans) !important;
  color: var(--bmu-fg-2) !important;
}

.card__text h1, .card__text h2, .card__text h3, .card__text h4 {
  font-family: var(--bmu-font-sans) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 0 8px;
  color: var(--bmu-charcoal);
  text-transform: none;
}

.card__footer {
  font-family: var(--bmu-font-sans) !important;
  font-size: 13px !important;
  color: var(--bmu-fg-muted) !important;
  padding: 0 24px 20px !important;
}


/* ---------- Carousel slick overrides --------------------- */

.slick-prev:before,
.slick-next:before {
  color: var(--bmu-forest) !important;
}

.slick-dots li button:before {
  color: var(--bmu-fg-muted) !important;
  opacity: 0.5;
}

.slick-dots li.slick-active button:before {
  color: var(--bmu-forest) !important;
  opacity: 1;
}


/* ---------- Hello bar shell ------------------------------ */

.hello-bars {
  font-family: var(--bmu-font-sans) !important;
  font-weight: 500;
}


/* ---------- Sales page ----------------------------------- */

.sales-page {
  background-color: var(--bmu-bone) !important;
}

.sales-page__content {
  font-family: var(--bmu-font-sans) !important;
}


/* ---------- Offer / Product card (block_offer) ---------- */

.block-type--offer .card,
.block-type--offer > .block > .card {
  background: #FFFFFF !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-lg) !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: var(--bmu-shadow-1);
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--bmu-dur-base) var(--bmu-ease-out),
    transform var(--bmu-dur-base) var(--bmu-ease-out),
    border-color var(--bmu-dur-base) var(--bmu-ease-out);
}

.block-type--offer .card:hover,
.block-type--offer > .block > .card:hover {
  box-shadow: var(--bmu-shadow-2);
  border-color: var(--bmu-rule);
  transform: translateY(-2px);
}

.block-type--offer .card__image,
.block-type--offer > .block > .card .card__image {
  width: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.block-type--offer .card__body {
  padding: var(--bmu-space-6) !important;
  display: flex;
  flex-direction: column;
  gap: var(--bmu-space-3);
  flex: 1;
}

.block-type--offer .card__title {
  font-family: var(--bmu-font-sans) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: var(--bmu-charcoal) !important;
  text-transform: none !important;
}

.block-type--offer .card__text {
  font-family: var(--bmu-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--bmu-fg-2) !important;
  margin: 0 !important;
}

.block-type--offer .card__price {
  font-family: var(--bmu-font-display) !important;
  font-size: clamp(28px, 3.5vw, 40px) !important;
  font-style: italic;
  font-weight: 400 !important;
  color: var(--bmu-forest) !important;
  letter-spacing: -0.01em;
  margin: var(--bmu-space-2) 0 var(--bmu-space-3) !important;
  line-height: 1;
}

.block-type--offer .cta__wrapper {
  margin-top: auto !important;
  justify-content: flex-start !important;
}

.block-type--offer .card__button.btn,
.block-type--offer .card .btn {
  width: 100%;
  background-color: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  border-color: var(--bmu-forest) !important;
}

.block-type--offer .card__button.btn:hover,
.block-type--offer .card .btn:hover {
  background-color: var(--bmu-forest-deep) !important;
  border-color: var(--bmu-forest-deep) !important;
  color: var(--bmu-mint) !important;
}


/* ---------- Pricing block (block_pricing) ---------------- */

.block-type--pricing > .block,
.block-type--pricing .pricing,
.pricing {
  background: #FFFFFF !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-lg) !important;
  padding: var(--bmu-space-7) !important;
  box-shadow: var(--bmu-shadow-1);
  font-family: var(--bmu-font-sans) !important;
}

.pricing__heading {
  font-family: var(--bmu-font-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--bmu-fg-muted) !important;
  margin-bottom: var(--bmu-space-3) !important;
}

.pricing__name {
  font-family: var(--bmu-font-sans) !important;
  font-size: clamp(28px, 3.5vw, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: var(--bmu-charcoal) !important;
  margin: 0 0 var(--bmu-space-3) !important;
  text-wrap: balance;
}

.pricing__name em {
  font-family: var(--bmu-font-display) !important;
  font-style: italic;
  font-weight: 400;
  color: var(--bmu-forest);
}

.pricing__price {
  font-family: var(--bmu-font-display) !important;
  font-size: clamp(40px, 6vw, 64px) !important;
  font-style: italic;
  font-weight: 400 !important;
  color: var(--bmu-forest) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin: var(--bmu-space-3) 0 !important;
}

.pricing__content {
  font-family: var(--bmu-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.55;
  color: var(--bmu-fg-2);
}

.pricing__content ul {
  list-style: none;
  padding: 0;
  margin: var(--bmu-space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--bmu-space-3);
  border-top: 1px solid var(--bmu-rule);
  border-bottom: 1px solid var(--bmu-rule);
  padding-top: var(--bmu-space-5);
  padding-bottom: var(--bmu-space-5);
}

.pricing__content ul li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  color: var(--bmu-fg-2);
}

.pricing__content ul li:before {
  content: "✓" !important;
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--bmu-r-pill);
  background: var(--bmu-mint-soft);
  color: var(--bmu-forest-deep) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.pricing .btn,
.pricing .btn.secondary {
  width: 100%;
  margin-top: var(--bmu-space-4);
  background-color: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  border-color: var(--bmu-forest) !important;
}

.pricing .btn.secondary {
  background: transparent !important;
  color: var(--bmu-charcoal) !important;
  border-color: var(--bmu-rule-strong) !important;
}

.pricing .btn:hover {
  background-color: var(--bmu-forest-deep) !important;
  border-color: var(--bmu-forest-deep) !important;
  color: var(--bmu-mint) !important;
}

.pricing .btn.secondary:hover {
  background: var(--bmu-mint-soft) !important;
  color: var(--bmu-forest-deep) !important;
  border-color: var(--bmu-forest) !important;
}


/* ---------- Video player (BMU/YouTube styled) ----------- */

/* Wrap the Wistia video in a clean BMU-styled frame.
   The Wistia player itself uses settings.color_primary (forest)
   for its native controls. We add the surrounding shell. */

.video,
.video__wrapper,
.fluid-video,
.block-type--video,
.block-type--video_embed,
.block-type--multi_video {
  position: relative;
  border-radius: var(--bmu-r-lg);
  overflow: hidden;
  background: var(--bmu-charcoal);
  box-shadow: var(--bmu-shadow-2);
}

/* 16:9 aspect for the video frame */
.video,
.video__wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto !important;
}

.video > *,
.video__wrapper > *,
.video iframe,
.video__wrapper iframe,
.video .wistia_embed,
.video__wrapper .wistia_embed {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  inset: 0;
}

/* Hover lift on the video container */
.video,
.block-type--video > .block,
.block-type--video_embed > .block {
  transition:
    box-shadow var(--bmu-dur-base) var(--bmu-ease-out),
    transform var(--bmu-dur-base) var(--bmu-ease-out);
}

.video:hover {
  box-shadow: var(--bmu-shadow-3);
}

/* Custom YouTube-style play overlay for poster/preview state.
   Only shows when an explicit .video__poster is rendered. */
.video__poster,
.video.video--poster {
  position: relative;
  cursor: pointer;
}

.video__poster::before,
.video.video--poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 70, 54, 0) 0%, rgba(13, 70, 54, 0.4) 100%);
  z-index: 1;
  pointer-events: none;
  transition: background var(--bmu-dur-base) var(--bmu-ease-out);
}

.video__poster::after,
.video.video--poster::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: var(--bmu-r-pill);
  background: var(--bmu-mint);
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230D4636'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: 36px 36px;
  background-repeat: no-repeat;
  background-position: 56% 50%;
  box-shadow: 0 8px 28px -4px rgba(13, 70, 54, 0.5);
  transition: transform var(--bmu-dur-base) var(--bmu-ease-out);
}

.video__poster:hover::after,
.video.video--poster:hover::after {
  transform: translate(-50%, -50%) scale(1.06);
}

.video__poster:hover::before,
.video.video--poster:hover::before {
  background: linear-gradient(180deg, rgba(13, 70, 54, 0.1) 0%, rgba(13, 70, 54, 0.5) 100%);
}

/* Lesson / blog post embedded video — give it consistent BMU framing */
.blog-post .video,
.blog-post .video__wrapper,
.lesson .video,
.lesson .video__wrapper,
.fluid-video,
article .fluid-video {
  border-radius: var(--bmu-r-lg);
  overflow: hidden;
  background: var(--bmu-charcoal);
  margin: var(--bmu-space-5) 0;
  box-shadow: var(--bmu-shadow-2);
}

/* Multi-video: thumbnail grid */
.multi-video,
.block-type--multi_video .multi-video {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--bmu-space-4);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.multi-video__item,
.multi-video__thumbnail {
  background: #FFFFFF;
  border: 1px solid var(--bmu-rule-faint);
  border-radius: var(--bmu-r-md);
  overflow: hidden;
  box-shadow: var(--bmu-shadow-1);
  transition: box-shadow var(--bmu-dur-base) var(--bmu-ease-out), transform var(--bmu-dur-base) var(--bmu-ease-out);
  cursor: pointer;
}

.multi-video__item:hover,
.multi-video__thumbnail:hover {
  box-shadow: var(--bmu-shadow-2);
  transform: translateY(-2px);
}

.multi-video__thumbnail img,
.multi-video__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.multi-video__title {
  padding: var(--bmu-space-3);
  font-family: var(--bmu-font-sans) !important;
  font-size: 15px;
  font-weight: 600;
  color: var(--bmu-charcoal);
  letter-spacing: -0.01em;
}

/* Wistia native player tint hooks. Wistia doesn't expose all elements,
   but these target the most visible chrome where styleable. */
.w-bigplay-button,
.wistia_click_to_play .w-bigplay-button {
  background-color: var(--bmu-mint) !important;
}

.w-vulcan-v2-button.w-css-reset-button,
.w-bottom-bar-lower {
  color: var(--bmu-mint) !important;
}


/* ---------- Sales page card body / sidebar -------------- */

.sales-page__body {
  font-family: var(--bmu-font-sans) !important;
}

.sales-page__sidebar {
  position: sticky;
  top: 80px;
}

.sales-page__sidebar .pricing,
.sales-page__sidebar .block-type--offer > .block > .card {
  position: sticky;
  top: 80px;
}


/* ---------- Lesson player / content ------------------- */

.lesson__title,
.lesson__heading {
  font-family: var(--bmu-font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.05 !important;
  color: var(--bmu-charcoal) !important;
  text-wrap: balance;
}

.lesson__title em,
.lesson__heading em {
  font-family: var(--bmu-font-display) !important;
  font-style: italic;
  font-weight: 400;
  color: var(--bmu-forest);
}

.lesson__content,
.lesson__body {
  font-family: var(--bmu-font-sans) !important;
  font-size: 17px;
  line-height: 1.65;
  color: var(--bmu-fg-2);
}

.lesson__content h2,
.lesson__content h3 {
  margin-top: var(--bmu-space-7);
  margin-bottom: var(--bmu-space-3);
}


/* =============================================================
   HIGH-SPECIFICITY OVERRIDES (beat per-section inline <style>)

   Each section in Encore renders its own scoped <style> tag like
   #section-XYZ .products .btn { color: ... !important; }.
   Equal-specificity rules from overrides.css lose because the
   inline <style> appears later in the cascade.

   These selectors prefix with body or html to win specificity.
   ============================================================= */


/* ---------- Library cards: 4-up grid + readable buttons ---- */

body .products .container .row,
body .products .row.products__list,
body #encore-theme .products .row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--bmu-space-4) !important;
  margin: 0 !important;
}

body .products .row > [class*="col-"],
body .products .row > .col-12,
body .products .row > .col-md-6,
body .products .row > .col-md-4,
body .products .row > .col-lg-3,
body .products .row > .col-lg-4 {
  flex: unset !important;
  max-width: unset !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 1099px) {
  body .products .container .row,
  body .products .row.products__list,
  body #encore-theme .products .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 599px) {
  body .products .container .row,
  body .products .row.products__list,
  body #encore-theme .products .row {
    grid-template-columns: 1fr !important;
  }
}

/* Library card button: forest fill, mint type, properly contrasted */
body .products .product .btn,
body .products .product .product__button .btn,
body .products .product__content .product__button > a,
html body .products a.btn {
  background-color: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  border-color: var(--bmu-forest) !important;
  width: auto !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--bmu-r-pill) !important;
  text-decoration: none !important;
}

body .products .product .btn:hover,
body .products .product .btn:focus,
html body .products a.btn:hover,
html body .products a.btn:focus {
  background-color: var(--bmu-forest-deep) !important;
  border-color: var(--bmu-forest-deep) !important;
  color: var(--bmu-mint) !important;
}

/* Force product card sizing + image aspect */
body .products .product {
  background: #FFFFFF !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-lg) !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: 100% !important;
  text-align: left !important;
  margin: 0 !important;
}

body .products .product .product__image {
  aspect-ratio: 4 / 3 !important;
  border-radius: var(--bmu-r-md) !important;
  overflow: hidden !important;
  margin: 0 0 8px !important;
  width: 100%;
  background: var(--bmu-sand);
}

body .products .product .product__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body .products .product .product__title {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--bmu-charcoal) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

body .products .product .product__body {
  font-size: 14px !important;
  color: var(--bmu-fg-muted) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

body .products .product .product__button {
  margin-top: auto !important;
  text-align: left !important;
}


/* ---------- Hello bar: clean BMU strip ------------------- */

body .header .hello-bars,
body .header .header__block--hello-bar {
  background: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  border: 0 !important;
  padding: 0 !important;
}

body .header .hello-bar,
body .header .header__block--hello-bar > * {
  background: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  font-family: var(--bmu-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  border: 0 !important;
  margin: 0 !important;
  text-align: center;
}

body .header .hello-bar a,
body .header .hello-bars a {
  color: var(--bmu-mint) !important;
  border-bottom: 1px solid currentColor;
}

/* Hide the slide-out community widget arrow if it's tearing layout */
body .header .hello-bar__close,
body .hello-bar__toggle,
body .header__hello-bar__expand {
  background: var(--bmu-forest-deep) !important;
  color: var(--bmu-mint) !important;
  border: 0 !important;
}


/* ---------- Header CTA & "Start the First Session" type --- */

/* The course landing CTAs render with section.settings.btn_background_color
   inline. We need to beat those with body-prefix specificity. */
body .section .btn,
body .section a.btn,
body #encore-theme .section .btn,
body #encore-theme .section a.btn,
body main .section .btn--solid,
body main .section a.btn--solid {
  background-color: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  border-color: var(--bmu-forest) !important;
  font-family: var(--bmu-font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--bmu-r-pill) !important;
}

body .section .btn:hover,
body main .section .btn:hover,
body main .section .btn--solid:hover {
  background-color: var(--bmu-forest-deep) !important;
  color: var(--bmu-mint) !important;
  border-color: var(--bmu-forest-deep) !important;
}

body .section .btn--outline,
body main .section .btn--outline,
body main .section a.btn--outline {
  background-color: transparent !important;
  color: var(--bmu-charcoal) !important;
  border-color: var(--bmu-rule-strong) !important;
}

body .section .btn--outline:hover,
body main .section .btn--outline:hover {
  background-color: var(--bmu-mint-soft) !important;
  color: var(--bmu-forest-deep) !important;
  border-color: var(--bmu-forest) !important;
}


/* ---------- Avatar / user icon ------------------------- */

body .header .user__avatar,
body .header .user__login img,
body .header .user img,
body .header .dropdown__trigger img,
body .header__block--user img {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--bmu-r-pill) !important;
  border: 2px solid var(--bmu-forest) !important;
  background: var(--bmu-forest) !important;
  object-fit: cover !important;
}

body .header .user__avatar--initials,
body .header .user__login__initials {
  background: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  font-family: var(--bmu-font-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--bmu-r-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ---------- Course modules / posts list ----------------- */

/* The "Modules" section on a product page renders with section
   styles. Force BMU look across module list items. */
body .product-page__modules,
body .product__modules,
body .modules,
body .post-listing,
body .posts__list {
  font-family: var(--bmu-font-sans) !important;
}

body .modules__title,
body .post-listing__title,
body .product__modules-title {
  font-family: var(--bmu-font-sans) !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--bmu-forest) !important;
  margin-bottom: var(--bmu-space-5) !important;
}

body .module,
body .module__item,
body .post,
body .post__row {
  background: #FFFFFF !important;
  border-radius: var(--bmu-r-lg) !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  padding: 16px !important;
  margin-bottom: var(--bmu-space-3) !important;
  transition: box-shadow var(--bmu-dur-base) var(--bmu-ease-out);
}

body .module:hover,
body .post__row:hover {
  box-shadow: var(--bmu-shadow-2);
}

body .module__title,
body .post__title,
body .post__row .post__title {
  font-family: var(--bmu-font-sans) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--bmu-forest) !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
}

body .module__description,
body .post__description {
  font-family: var(--bmu-font-sans) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--bmu-fg-muted) !important;
}


/* ---------- Lesson player wrapper ----------------------- */

/* Make the video container have BMU framing on lesson pages */
body .lesson .video,
body .lesson__media,
body .post-content .fluid-video,
body .post .fluid-video {
  border-radius: var(--bmu-r-lg) !important;
  overflow: hidden !important;
  background: var(--bmu-charcoal) !important;
  box-shadow: var(--bmu-shadow-2) !important;
  margin: 0 0 var(--bmu-space-5) !important;
}

/* Lesson nav (Back / Next buttons) */
body .post__nav,
body .lesson__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--bmu-space-3);
  margin-top: var(--bmu-space-7) !important;
  padding-top: var(--bmu-space-5);
  border-top: 1px solid var(--bmu-rule-faint);
}

body .post__nav .btn,
body .lesson__nav .btn,
body .post__nav a.btn,
body .lesson__nav a.btn {
  background: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  border-color: var(--bmu-forest) !important;
}

body .post__nav .btn--outline,
body .lesson__nav .btn--outline,
body .post__nav .btn[disabled],
body .lesson__nav .btn[disabled] {
  background: var(--bmu-mint-soft) !important;
  color: var(--bmu-forest-deep) !important;
  border-color: var(--bmu-mint-soft) !important;
  opacity: 0.85;
}


/* ---------- Body / heading font (force Switzer everywhere) - */

/* In case some elements escape the cascade, explicitly target every
   text element in body. Higher specificity by chaining. */
html body,
html body p,
html body span,
html body a,
html body div,
html body li,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body button,
html body input,
html body textarea,
html body label,
html body .text-heading,
html body .text-display,
html body .text-paragraph,
html body .text-eyebrow {
  font-family: var(--bmu-font-sans), -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}

/* Allow PP Editorial italic to win where appropriate */
html body h1 em,
html body h2 em,
html body h3 em,
html body h4 em,
html body .pull-quote,
html body .text-pullquote,
html body .accent-word {
  font-family: var(--bmu-font-display), Georgia, serif !important;
}


/* =============================================================
   KAJABI PRODUCT PAGE CHROME

   The /products/* URLs (course landing, modules list, lesson
   player) use Kajabi's product UI rendered with class names
   like .product-show, .post-show, .post-list, etc. These need
   their own targeting because the Site theme's section classes
   don't apply there.
   ============================================================= */


/* ---------- Product hero / "Welcome to..." section ------ */

body .product-show__header,
body .product__hero,
body .kjb-product__hero {
  font-family: var(--bmu-font-sans) !important;
}

body .product-show__title,
body .product__title,
body .kjb-product__title,
body .product-show__header h1 {
  font-family: var(--bmu-font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  text-wrap: balance;
}

body .product-show__title em,
body .product__title em {
  font-family: var(--bmu-font-display) !important;
  font-style: italic;
  font-weight: 400;
  color: var(--bmu-mint);
}

/* Hero CTA "Start the First Session" — the product hero button */
body .product-show .btn,
body .product-show__header .btn,
body .product__hero .btn,
body .product-show__cta,
body .product__cta,
body a.product__cta-button,
body .product-show a.btn,
body .kjb-button,
body button.kjb-button {
  background-color: var(--bmu-mint) !important;
  color: var(--bmu-forest-deep) !important;
  border-color: var(--bmu-mint) !important;
  font-family: var(--bmu-font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--bmu-r-pill) !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
}

body .product-show .btn:hover,
body .product__cta:hover,
body .product-show a.btn:hover,
body .kjb-button:hover {
  background-color: var(--bmu-bone) !important;
  color: var(--bmu-forest-deep) !important;
  border-color: var(--bmu-bone) !important;
}


/* ---------- Modules / post list (course outline) -------- */

body .post-list,
body .product-show__post-list,
body .post-listing,
body .kjb-posts-list,
body .product-categories,
body .category-list {
  display: flex;
  flex-direction: column;
  gap: var(--bmu-space-3);
  font-family: var(--bmu-font-sans) !important;
}

body .post-list-item,
body .post-list__item,
body .post-listing__item,
body .kjb-post-list-item,
body .product-category,
body .category-list__item {
  background: #FFFFFF !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-lg) !important;
  padding: 16px !important;
  display: flex;
  align-items: flex-start;
  gap: var(--bmu-space-4);
  text-decoration: none !important;
  transition: box-shadow var(--bmu-dur-base) var(--bmu-ease-out), border-color var(--bmu-dur-base) var(--bmu-ease-out);
}

body .post-list-item:hover,
body .post-listing__item:hover,
body .kjb-post-list-item:hover {
  box-shadow: var(--bmu-shadow-2);
  border-color: var(--bmu-rule);
}

body .post-list-item__image,
body .post-list__image,
body .kjb-post-list-item__image {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--bmu-r-md) !important;
  overflow: hidden;
  object-fit: cover;
  background: var(--bmu-sand);
}

body .post-list-item__title,
body .post-list__title,
body .post-listing__title,
body .kjb-post-list-item__title,
body .post-list-item h3,
body .post-list-item h4 {
  font-family: var(--bmu-font-sans) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  color: var(--bmu-forest) !important;
  margin: 0 0 6px !important;
  text-decoration: none !important;
}

body .post-list-item__description,
body .post-list__description,
body .post-listing__description,
body .kjb-post-list-item__description {
  font-family: var(--bmu-font-sans) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--bmu-fg-muted) !important;
  margin: 0 !important;
}


/* ---------- Lesson page (post-show) ---------------------- */

body .post-show,
body .post-show__main,
body .post-show__body {
  font-family: var(--bmu-font-sans) !important;
}

body .post-show__title,
body .post-show h1,
body .post-content__title,
body article.post h1 {
  font-family: var(--bmu-font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  font-size: clamp(28px, 3.5vw, 44px) !important;
  color: var(--bmu-charcoal) !important;
  margin: 0 0 var(--bmu-space-4) !important;
}

body .post-show__title em,
body .post-content__title em {
  font-family: var(--bmu-font-display) !important;
  font-style: italic;
  font-weight: 400;
  color: var(--bmu-forest);
}

/* Breadcrumbs */
body .breadcrumb,
body .post-show__breadcrumb,
body nav.breadcrumb {
  font-family: var(--bmu-font-sans) !important;
  font-size: 14px !important;
  color: var(--bmu-fg-muted) !important;
  margin-bottom: var(--bmu-space-5) !important;
}

body .breadcrumb a,
body .post-show__breadcrumb a {
  color: var(--bmu-fg-muted) !important;
  text-decoration: none !important;
}

body .breadcrumb a:hover,
body .post-show__breadcrumb a:hover {
  color: var(--bmu-forest-deep) !important;
}

/* Active breadcrumb (current page) */
body .breadcrumb__current,
body .breadcrumb .active,
body .breadcrumb [aria-current] {
  color: var(--bmu-forest) !important;
  font-weight: 600;
}

/* Lesson video — the main content media block */
body .post-show .video,
body .post-show .fluid-video,
body .post-show__media,
body .post-content__media,
body .lesson .video,
body .lesson__media,
body .post-show iframe,
body .post-show .wistia_embed {
  border-radius: var(--bmu-r-lg) !important;
  overflow: hidden !important;
  background: var(--bmu-charcoal) !important;
  box-shadow: var(--bmu-shadow-2) !important;
  margin-bottom: var(--bmu-space-6) !important;
}

/* Lesson body content */
body .post-content,
body .post-show__content,
body .post__content,
body .lesson__content {
  font-family: var(--bmu-font-sans) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--bmu-fg-2) !important;
}

body .post-content h2,
body .post-content h3,
body .post-show__content h2,
body .post-show__content h3 {
  font-family: var(--bmu-font-sans) !important;
  margin-top: var(--bmu-space-7) !important;
  color: var(--bmu-charcoal) !important;
}

/* Lesson navigation: Back / Next */
body .post-show__nav,
body .post-nav,
body .lesson__nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: var(--bmu-space-3) !important;
  margin-top: var(--bmu-space-7) !important;
  padding-top: var(--bmu-space-5) !important;
  border-top: 1px solid var(--bmu-rule-faint) !important;
}

body .post-nav .btn,
body .post-show__nav .btn,
body .post-nav__prev,
body .post-nav__next,
body a.post-nav__prev,
body a.post-nav__next {
  background-color: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  border-color: var(--bmu-forest) !important;
  font-family: var(--bmu-font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--bmu-r-pill) !important;
  padding: 12px 24px !important;
  text-decoration: none !important;
}

body .post-nav .btn:hover,
body a.post-nav__prev:hover,
body a.post-nav__next:hover {
  background-color: var(--bmu-forest-deep) !important;
  color: var(--bmu-mint) !important;
  border-color: var(--bmu-forest-deep) !important;
}

/* Disabled / first-page Back button */
body .post-nav__prev[disabled],
body .post-nav__prev.disabled,
body a.post-nav__prev[aria-disabled="true"],
body .post-nav .btn[disabled] {
  background-color: var(--bmu-mint-soft) !important;
  color: var(--bmu-forest-deep) !important;
  border-color: var(--bmu-mint-soft) !important;
  opacity: 0.6;
  pointer-events: none;
}

/* "Video 1 of 1" caption between buttons */
body .post-nav__counter,
body .lesson__counter,
body .post-show__nav-counter {
  font-family: var(--bmu-font-sans) !important;
  font-size: 14px !important;
  color: var(--bmu-fg-muted) !important;
}


/* ---------- Completion / progress sidebar -------------- */

body .completion-tracker,
body .product-show__sidebar,
body .product__sidebar,
body .completion {
  background: #FFFFFF !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-lg) !important;
  padding: 24px !important;
  font-family: var(--bmu-font-sans) !important;
}

body .completion-tracker__title,
body .completion__title,
body .product__sidebar h3 {
  font-family: var(--bmu-font-sans) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--bmu-forest) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.01em !important;
}

body .completion-tracker__progress,
body .completion__progress {
  height: 4px !important;
  background: var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-pill) !important;
}

body .completion-tracker__progress-bar,
body .completion__progress-bar,
body .completion__progress > div {
  background: var(--bmu-forest) !important;
  border-radius: var(--bmu-r-pill) !important;
  height: 100% !important;
}


/* =============================================================
   LOGIN, FORGOT PASSWORD, PASSWORD RESET pages
   ============================================================= */

/* Force the login section background to bone, not olive/sage.
   Per-section bg is set inline via class="section background-X"
   so we override with body+section_id-style specificity. */

body main > .section,
body section.section {
  background-color: var(--bmu-bone) !important;
}

body main > .section .section__overlay,
body section.section .section__overlay {
  display: none !important;
}

/* The form gets a proper white card with shadow. The auth__content
   wrapper is what holds the form internals. */
body .auth__content,
body .col-6 .auth__content,
body .row .col-6 > .auth__content {
  background: #FFFFFF !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-lg) !important;
  padding: 48px 40px !important;
  max-width: 480px !important;
  width: 100% !important;
  margin: 64px auto !important;
  box-shadow: var(--bmu-shadow-2) !important;
  text-align: left !important;
}

@media (max-width: 600px) {
  body .auth__content {
    padding: 32px 24px !important;
    margin: 32px 16px !important;
  }
}

/* Override Bootstrap col widths so the card is centered, not split */
body .row > .col-6.text-center:has(.auth__content),
body .auth__content {
  flex: unset !important;
  max-width: 480px !important;
}

/* Login title */
body .auth__title,
body .auth__content h1 {
  font-family: var(--bmu-font-sans) !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  color: var(--bmu-charcoal) !important;
  margin: 0 0 8px !important;
  text-align: left !important;
}

/* Add an eyebrow before the title via :before */
body .auth__content > .auth__title::before,
body .auth__content > h1::before {
  content: "Better Marriage University";
  display: block;
  font-family: var(--bmu-font-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bmu-fg-muted);
  margin-bottom: 12px;
  letter-spacing: 0.18em;
}

/* Subtle subtitle below the heading via :after */
body .auth__content > .auth__title::after,
body .auth__content > h1::after {
  content: "Welcome back. Class is in session.";
  display: block;
  font-family: var(--bmu-font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--bmu-fg-muted);
  letter-spacing: -0.005em;
  margin-top: 8px;
  margin-bottom: 24px;
  line-height: 1.4;
}

/* Form group spacing */
body .auth__content .form-group {
  margin-bottom: 18px !important;
  text-align: left !important;
}

/* Field labels */
body .auth__label,
body .auth__content label {
  font-family: var(--bmu-font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--bmu-fg-2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Form fields — proper sized, BMU radius */
body .auth__field,
body .auth__content .form-control,
body .auth__content input[type="text"],
body .auth__content input[type="email"],
body .auth__content input[type="password"] {
  background-color: #FFFFFF !important;
  border: 1px solid var(--bmu-rule) !important;
  border-radius: var(--bmu-r-md) !important;
  font-family: var(--bmu-font-sans) !important;
  font-size: 16px !important;
  color: var(--bmu-charcoal) !important;
  padding: 12px 14px !important;
  width: 100% !important;
  height: auto !important;
  transition: border-color var(--bmu-dur-fast) var(--bmu-ease-out), box-shadow var(--bmu-dur-fast) var(--bmu-ease-out);
}

body .auth__field:focus,
body .auth__content .form-control:focus,
body .auth__content input:focus {
  border-color: var(--bmu-forest) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px var(--bmu-mint-soft) !important;
}

/* Remember me checkbox row */
body .auth__content .form-group:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 22px !important;
}

body .auth__content input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 1px solid var(--bmu-rule);
  border-radius: 4px;
  accent-color: var(--bmu-forest);
  cursor: pointer;
}

body .auth__content input[type="checkbox"] + .auth__label,
body .auth__content label .auth__label {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--bmu-fg-2) !important;
}

/* Submit button — full width forest pill */
body .auth__content .form-btn,
body .auth__content button[type="submit"],
body .auth__content button.form-btn,
body .auth__content #form-button {
  width: 100% !important;
  background: var(--bmu-forest) !important;
  color: var(--bmu-mint) !important;
  border: 1px solid var(--bmu-forest) !important;
  border-radius: var(--bmu-r-pill) !important;
  font-family: var(--bmu-font-sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 24px !important;
  margin-top: 8px !important;
  cursor: pointer;
  transition: background-color var(--bmu-dur-base) var(--bmu-ease-out);
}

body .auth__content .form-btn:hover,
body .auth__content button[type="submit"]:hover,
body .auth__content #form-button:hover {
  background: var(--bmu-forest-deep) !important;
  border-color: var(--bmu-forest-deep) !important;
  color: var(--bmu-mint) !important;
}

/* "or" divider before social login */
body .auth__content .divider {
  position: relative;
  text-align: center;
  margin: 28px 0 16px !important;
  font-family: var(--bmu-font-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--bmu-fg-muted) !important;
}

body .auth__content .divider::before,
body .auth__content .divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 24px);
  height: 1px;
  background: var(--bmu-rule);
}

body .auth__content .divider::before { left: 0; }
body .auth__content .divider::after  { right: 0; }

/* Google sign-in button (gsi-material-button) — match BMU */
body .auth__content .gsi-material-button {
  width: 100% !important;
  border: 1px solid var(--bmu-rule-strong) !important;
  border-radius: var(--bmu-r-pill) !important;
  background: #FFFFFF !important;
  color: var(--bmu-charcoal) !important;
  font-family: var(--bmu-font-sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 20px !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: background-color var(--bmu-dur-base) var(--bmu-ease-out), border-color var(--bmu-dur-base) var(--bmu-ease-out);
}

body .auth__content .gsi-material-button:hover {
  background: var(--bmu-mint-soft) !important;
  border-color: var(--bmu-forest) !important;
  color: var(--bmu-forest-deep) !important;
}

body .auth__content .gsi-material-button-contents {
  font-family: var(--bmu-font-sans) !important;
  color: inherit !important;
  font-weight: 600 !important;
}

body .auth__content .gsi-material-button-icon {
  margin-right: 12px;
}

/* Forgot password link */
body .auth__link,
body .auth__content .auth__link {
  margin-top: 24px !important;
  text-align: center !important;
  font-family: var(--bmu-font-sans) !important;
  font-size: 14px !important;
}

body .auth__link a,
body .auth__content .auth__link a {
  color: var(--bmu-forest) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor !important;
  padding-bottom: 1px;
}

body .auth__link a:hover {
  color: var(--bmu-forest-deep) !important;
}

/* Error message */
body .auth__message,
body .auth__content .alert,
body .auth__content .alert--danger {
  font-family: var(--bmu-font-sans) !important;
  background: rgba(220, 53, 69, 0.08) !important;
  border: 1px solid rgba(220, 53, 69, 0.4) !important;
  border-radius: var(--bmu-r-md) !important;
  padding: 10px 14px !important;
  color: #a02232 !important;
  font-size: 14px !important;
  margin-bottom: 16px !important;
}

/* Image variant — if section.settings.show_image is true */
body .auth__image {
  margin-bottom: 24px !important;
}

body .auth__image img,
body .auth__image .image {
  border-radius: var(--bmu-r-md) !important;
  max-width: 200px !important;
  margin: 0 auto !important;
}

/* Hide the section overlay that's adding the dark layer */
body section.section .section__overlay {
  display: none !important;
}

/* Ensure the row centers properly on auth pages */
body .section .row.align-items-center.justify-content-center {
  min-height: 60vh;
  align-items: center !important;
}


/* ---------- Mobile responsiveness adjustments ----------- */

@media (max-width: 767px) {
  .sizer {
    padding-top: var(--bmu-space-7);
    padding-bottom: var(--bmu-space-7);
  }

  .products__list {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .products__list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1100px) {
  .products__list {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}


/* ---------- Assessment block (iframe wrapper) ----------- */

body .assessment-wrapper {
  background: #FFFFFF !important;
  border: 1px solid var(--bmu-rule-faint) !important;
  border-radius: var(--bmu-r-lg) !important;
  padding: 8px !important;
  box-shadow: var(--bmu-shadow-1);
  overflow: hidden;
  line-height: 1.55 !important;
  position: relative;
  margin: 24px 0;
}

body .assessment-wrapper::before {
  content: "Assessment";
  display: block;
  position: absolute;
  top: 16px;
  left: 24px;
  font-family: var(--bmu-font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bmu-forest);
  z-index: 2;
  pointer-events: none;
}

body .assessment-wrapper iframe,
body iframe#assessment {
  width: 100% !important;
  border: 0 !important;
  border-radius: var(--bmu-r-md) !important;
  background: var(--bmu-bone) !important;
  min-height: 480px;
  margin-top: 32px;
}

/* Block wrapper inside section.liquid */
body .block-type--assessment {
  font-family: var(--bmu-font-sans) !important;
}

body .block-type--assessment .editor-null {
  font-family: var(--bmu-font-sans) !important;
  background: var(--bmu-mint-soft) !important;
  color: var(--bmu-forest-deep) !important;
  border-radius: var(--bmu-r-md) !important;
  padding: 24px !important;
  text-align: center;
  font-weight: 500;
}

/* ================================================================
   THANK YOU PAGE — post-checkout branded confirmation
   Stock encore renders a generic "🎉 Thank you!" — these rules force
   the BMU bone+forest editorial treatment regardless of what the
   default copy or admin offer body looks like.
   ================================================================ */

body .thank-you,
body section.thank-you {
  background: var(--bmu-bone) !important;
  color: var(--bmu-charcoal) !important;
  font-family: var(--bmu-font-sans) !important;
  position: relative;
  overflow: hidden;
}

body .thank-you::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 80% 10%, rgba(168, 230, 189, 0.30) 0%, transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(213, 240, 221, 0.40) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

body .thank-you .sizer,
body .thank-you .container {
  position: relative;
  z-index: 1;
}

body .thank-you .container {
  max-width: 880px !important;
  text-align: center;
  padding-top: clamp(48px, 8vw, 96px) !important;
  padding-bottom: clamp(48px, 8vw, 96px) !important;
}

body .thank-you__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

body .thank-you__text > * {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* Headlines — Editorial New italic, forest-deep */
body .thank-you__text h1,
body .thank-you__text h2 {
  font-family: var(--bmu-font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--bmu-forest-deep) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.04 !important;
  margin: 0 0 8px !important;
  text-wrap: balance;
}

body .thank-you__text h1 {
  font-size: clamp(40px, 5.6vw, 72px) !important;
}

body .thank-you__text h2 {
  font-size: clamp(28px, 3.6vw, 44px) !important;
}

body .thank-you__text h3,
body .thank-you__text h4 {
  font-family: var(--bmu-font-sans) !important;
  font-weight: 700 !important;
  color: var(--bmu-forest) !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  letter-spacing: -0.005em !important;
  margin: 12px 0 4px !important;
}

/* Body text */
body .thank-you__text p {
  font-family: var(--bmu-font-sans) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--bmu-charcoal-soft, #404245) !important;
  margin: 0 0 14px !important;
}

body .thank-you__text p:last-child {
  margin-bottom: 0 !important;
}

/* Hide stock emoji-only h1 (legacy default content) — gives a cleaner
   start while still allowing admin custom copy to render */
body .thank-you__text h1:first-child:only-child {
  display: none;
}

/* Eyebrow / small caps if used */
body .thank-you__text small,
body .thank-you__text .eyebrow {
  font-family: var(--bmu-font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--bmu-forest) !important;
  display: block;
  margin-bottom: 4px !important;
}

/* Inline links */
body .thank-you__text a {
  color: var(--bmu-forest) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(23, 99, 79, 0.4) !important;
  text-underline-offset: 3px !important;
  transition: text-decoration-color 200ms ease;
}
body .thank-you__text a:hover {
  text-decoration-color: var(--bmu-forest) !important;
}

/* CTA button (when section.settings.use_btn is on) */
body .thank-you .button,
body .thank-you .btn,
body .thank-you a.button,
body .thank-you button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--bmu-forest) !important;
  color: var(--bmu-bone) !important;
  font-family: var(--bmu-font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  border-radius: var(--bmu-r-pill) !important;
  border: none !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px -12px rgba(13, 70, 54, 0.45) !important;
  transition: background var(--bmu-dur-base) var(--bmu-ease-out), transform var(--bmu-dur-base) var(--bmu-ease-out) !important;
  margin-top: 12px !important;
}
body .thank-you .button:hover,
body .thank-you .btn:hover,
body .thank-you a.button:hover {
  background: var(--bmu-forest-deep) !important;
  color: var(--bmu-bone) !important;
  transform: translateY(-1px);
}

/* If the offer/admin body uses lists (next-steps style) */
body .thank-you__text ul,
body .thank-you__text ol {
  text-align: left;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(13, 70, 54, 0.10);
  border-radius: var(--bmu-r-lg);
  padding: 24px 28px 24px 56px;
  margin: 24px auto;
  max-width: 560px;
  box-shadow: var(--bmu-shadow-1);
}
body .thank-you__text li {
  font-family: var(--bmu-font-sans) !important;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bmu-charcoal) !important;
  margin-bottom: 10px;
}
body .thank-you__text li:last-child { margin-bottom: 0; }
body .thank-you__text li::marker {
  color: var(--bmu-forest);
}

/* Hide the default "🎉" that shipping content tends to include */
body .thank-you__text h1:first-child {
  font-size: clamp(40px, 5.6vw, 72px) !important;
}

/* ================================================================
   WEBSITE PAGE CONTEXT — when BMU sections are added to Kajabi's
   website page builder (NOT the offer thank-you template), the
   parent wrappers come from Kajabi's content area styles. These
   rules ensure BMU branding wins regardless of where the section
   is placed (page.liquid, sales_page, custom website thank-you).
   ================================================================ */

/* Catch-all: if any BMU section ends up in a website page,
   force the parent containers to bone with no inherited bg */
html body .bmu-toolkit-welcome,
html body .bmu-thank-you,
html body [class*="bmu-onboarding"],
html body [id*="bmu_toolkit"],
html body [id*="bmu_thank"],
html body [id*="bmu_onboarding"] {
  background: var(--bmu-bone) !important;
  color: var(--bmu-charcoal) !important;
  font-family: var(--bmu-font-sans) !important;
}

/* Forest-tier variant overrides bone */
html body .bmu-toolkit-welcome--full,
html body .bmu-thank-you--full {
  background: linear-gradient(180deg, var(--bmu-forest-deep) 0%, var(--bmu-forest) 60%, var(--bmu-forest-deep) 100%) !important;
  color: var(--bmu-bone) !important;
}

/* Ensure parent .page__content / .section--body / Kajabi wrappers don't
   inject their own backgrounds around our sections */
html body section[class*="bmu-"] {
  margin: 0;
}

html body .page__content section[class*="bmu-"],
html body .section__body section[class*="bmu-"],
html body main section[class*="bmu-"] {
  background: inherit;
}

/* Kill stock encore "thank-you" styles when our section is nested inside
   a thank-you page wrapper */
html body section.thank-you section[class*="bmu-toolkit-welcome"],
html body section.thank-you section[class*="bmu-thank-you"] {
  margin: -40px -10px;
}

/* ================================================================
   THANK YOU — extra specificity for stubborn Kajabi defaults.
   If the offer thank-you page is still rendering with a blue/purple
   theme, it's because Kajabi's core CSS or settings_data inline color
   is winning on the body class. These rules target every possible
   wrapper Kajabi might inject around the thank_you section.
   ================================================================ */

/* Body wrapper — kill any color_container_bg that's not bone */
html body[class*="thank"],
html body[class*="thank_you"],
html body[class*="thank-you"],
html body.encore-thank-you,
html body section.thank-you,
html #encore-theme body.background-light,
html body section.thank-you.background-dark,
html body section.thank-you.background-light,
html body section.thank-you[class*="background-"] {
  background: var(--bmu-bone) !important;
  background-color: var(--bmu-bone) !important;
  color: var(--bmu-charcoal) !important;
}

/* Force the section itself to bone, override any inline section-level bg */
html body section.thank-you[style*="background"] {
  background: var(--bmu-bone) !important;
  background-color: var(--bmu-bone) !important;
}

/* Body H1 / heading-level overrides — sometimes Kajabi injects color
   from theme settings via inline style */
html body section.thank-you .thank-you__text h1[style],
html body section.thank-you .thank-you__text h2[style],
html body section.thank-you .thank-you__text h3[style] {
  color: var(--bmu-forest-deep) !important;
  font-family: var(--bmu-font-display) !important;
  font-style: italic !important;
}

/* Default link color when thank-you has inline overrides */
html body section.thank-you a[style] {
  color: var(--bmu-forest) !important;
}

/* Buttons with inline color set by Kajabi */
html body section.thank-you .button[style],
html body section.thank-you a.button[style],
html body section.thank-you button[style] {
  background: var(--bmu-forest) !important;
  background-color: var(--bmu-forest) !important;
  color: var(--bmu-bone) !important;
  border-color: var(--bmu-forest) !important;
}

/* If admin's offer thank-you body has h1 with hardcoded color */
html body section.thank-you .thank-you__text *[style*="color"] {
  color: inherit !important;
}

/* Any background-{{ color_scheme_class }} class that resolves to dark/light */
html body section.thank-you.background-dark,
html body section.thank-you.background-light,
html body section.thank-you.background-default {
  background: var(--bmu-bone) !important;
  background-color: var(--bmu-bone) !important;
  color: var(--bmu-charcoal) !important;
}

/* Make sure container--main parent doesn't inject blue */
html body:has(section.thank-you),
html body:has(section.thank-you) .container--main,
html body:has(section.thank-you) .content-wrap,
html body:has(section.thank-you) .section-wrap,
html body:has(section.thank-you) main {
  background: var(--bmu-bone) !important;
  background-color: var(--bmu-bone) !important;
}

/* ================================================================
   Z-INDEX — ensure header navigation and its dropdowns always
   layer above BMU sections. Sections set z-index: 0/1 internally
   for stacking against their own bg layers; without these rules
   the header's dropdown can get sandwiched.
   ================================================================ */

html body header,
html body .header,
html body .section--header,
html body .site-header,
html body header[role="banner"] {
  position: relative;
  z-index: 9000 !important;
}

html body .header .dropdown,
html body .header .dropdown__menu,
html body .header__block--user .dropdown__menu,
html body .header__block .dropdown__menu,
html body .dropdown.is-open .dropdown__menu,
html body .header [class*="dropdown"][class*="open"],
html body .header [class*="dropdown"][class*="active"] {
  z-index: 9100 !important;
}

/* If header is fixed/sticky, raise the entire stack so the BMU
   sections below never punch through */
html body header.is-fixed,
html body header.is-sticky,
html body header[class*="fixed"],
html body header[class*="sticky"] {
  z-index: 9000 !important;
}

/* BMU sections stay in normal flow at the body level. Internal
   z-index for bg vs content layering stays intact, but the section
   root itself does not create a stacking context, so the header
   at z-index 9000 always layers above. */
html body section[class*="bmu-"] {
  isolation: auto;
  z-index: auto;
}

/* Smooth in-page anchor scrolling (manage-plan link, etc.) */
html { scroll-behavior: smooth; }