/* ═══════════════════════════════════════════════════════════════════════
   BAKERSFIELD ESTATE — DESIGN SYSTEM
   Palette: Deep Forest Green · Aged Gold · Warm Cream · Rich Earth
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --green-deep:    #0f2d1a;
  --green-mid:     #1a4a2f;
  --green-bright:  #2d6a47;
  --gold-rich:     #c4991f;
  --gold-light:    #e8c660;
  --gold-pale:     #f5e9b0;
  --cream:         #f8f4ec;
  --cream-dark:    #ede5d4;
  --earth:         #5a3e1b;
  --text-dark:     #1a1208;
  --text-mid:      #3a3020;
  --text-light:    #7a6840;
  --white:         #ffffff;
  --shadow-sm:     0 2px 12px rgba(0,0,0,.08);
  --shadow-md:     0 8px 32px rgba(0,0,0,.12);
  --shadow-lg:     0 20px 60px rgba(0,0,0,.18);
  --radius:        10px;
  --radius-lg:     18px;
  --transition:    0.3s cubic-bezier(0.4,0,0.2,1);
  /* Aliases used across portal & footer */
  --border:        #e0d8c8;
  --cream-light:   #f8f4ec;
  --text:          #1a1208;
}

/* ── Reset & Base ──────────────────────────────────────────────────────── */
.mbe-landing, .mbe-portal, .mbe-auth-page {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
}

.mbe-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   COMMUNITY NOTICE BAR
   Sits just below the hero. Alerts residents to AGMs, dues, governance notices.
   ══════════════════════════════════════════════════════════════════════════════ */
.mbe-notice-bar {
  background: linear-gradient(90deg, #0f2d1a 0%, #1a4a2e 50%, #0f2d1a 100%);
  border-top: 2px solid rgba(196,153,31,.45);
  border-bottom: 2px solid rgba(196,153,31,.25);
  padding: 14px 0;
  position: relative;
  z-index: 10;
}
.mbe-notice-bar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mbe-notice-bar__icon {
  font-size: 20px;
  flex-shrink: 0;
}
.mbe-notice-bar__text {
  flex: 1;
  font-size: 13.5px;
  color: rgba(255,255,255,.88);
  line-height: 1.5;
}
.mbe-notice-bar__text strong {
  color: var(--gold-light);
  font-weight: 700;
}
.mbe-notice-bar__link {
  flex-shrink: 0;
  background: rgba(196,153,31,.18);
  border: 1px solid rgba(196,153,31,.45);
  color: var(--gold-light);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.mbe-notice-bar__link:hover {
  background: rgba(196,153,31,.35);
  color: #fff;
}
@media (max-width: 600px) {
  .mbe-notice-bar__text { font-size: 12.5px; }
  .mbe-notice-bar__link { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════ */
.mbe-hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mbe-hero__slideshow {
  position: absolute;
  inset: 0;
  pointer-events: none; /* background layer — never absorbs touches */
}

.mbe-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  /* Speed is driven by the admin setting via --mbe-hero-speed */
  transition: opacity var(--mbe-hero-speed, 1400ms) ease-in-out,
              transform var(--mbe-hero-speed, 1400ms) ease-in-out,
              filter var(--mbe-hero-speed, 1400ms) ease-in-out;
  /* Fallback colour — also sits behind 'contain' images so letterbox bars
     show estate green rather than dead black. */
  background-color: var(--green-deep);
  will-change: opacity, transform;
}
/* Only the empty fallback slide paints the gradient. A slide WITH a real
   background-image must not have the gradient composited on top of it. */
.mbe-hero__slide:not([style*="background-image"]) {
  background-image:
    linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 40%, var(--green-bright) 80%, #1a4a2f 100%);
}

.mbe-hero__slide.active { opacity: 1; }

/* ── Hero height (admin: Hero Height) ──────────────────────────────────── */
.mbe-hero { min-height: var(--mbe-hero-h, 100svh); }

/* ══ HERO ANIMATION STYLES (admin: Animation Style) ════════════════════════
   Each effect animates ONLY the active slide, so an incoming image begins its
   motion exactly as it fades in. The duration is the slide hold plus the
   transition speed, so movement runs for the whole time the image is visible
   instead of finishing early and sitting frozen. */

/* Ken Burns — slow zoom with a gentle drift. The default. */
@keyframes mbeKenBurns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.6%, -1.2%, 0); }
}
.mbe-hero--fx-kenburns .mbe-hero__slide.active {
  animation: mbeKenBurns calc(var(--mbe-hero-hold, 6s) + var(--mbe-hero-speed, 1400ms)) ease-out both;
}

/* Zoom In */
@keyframes mbeZoomIn {
  from { transform: scale(1); }
  to   { transform: scale(1.18); }
}
.mbe-hero--fx-zoom .mbe-hero__slide.active {
  animation: mbeZoomIn calc(var(--mbe-hero-hold, 6s) + var(--mbe-hero-speed, 1400ms)) ease-out both;
}

/* Zoom Out */
@keyframes mbeZoomOut {
  from { transform: scale(1.18); }
  to   { transform: scale(1); }
}
.mbe-hero--fx-zoomout .mbe-hero__slide.active {
  animation: mbeZoomOut calc(var(--mbe-hero-hold, 6s) + var(--mbe-hero-speed, 1400ms)) ease-out both;
}

/* Slide — horizontal glide that keeps drifting while visible */
@keyframes mbeSlideIn {
  from { transform: translate3d(6%, 0, 0) scale(1.08); }
  to   { transform: translate3d(-2%, 0, 0) scale(1.08); }
}
.mbe-hero--fx-slide .mbe-hero__slide.active {
  animation: mbeSlideIn calc(var(--mbe-hero-hold, 6s) + var(--mbe-hero-speed, 1400ms)) ease-out both;
}

/* Blur dissolve — resolves from soft focus as it fades up */
@keyframes mbeBlurIn {
  from { filter: blur(14px); transform: scale(1.10); }
  to   { filter: blur(0);    transform: scale(1.04); }
}
.mbe-hero--fx-blur .mbe-hero__slide.active {
  animation: mbeBlurIn var(--mbe-hero-speed, 1400ms) ease-out both;
}

/* Fade / None — no transform work at all */
.mbe-hero--fx-fade .mbe-hero__slide.active,
.mbe-hero--fx-none .mbe-hero__slide.active { animation: none; }
.mbe-hero--fx-none .mbe-hero__slide { transition: none; }

/* ── Mobile behaviour (admin: Mobile Behaviour) ─────────────────────────── */
@media (max-width: 768px) {
  /* 'simple' — keep the cross-fade, drop the transforms */
  .mbe-hero--mob-simple .mbe-hero__slide.active { animation: none !important; transform: none !important; }
  /* 'static' — first image only, no motion at all */
  .mbe-hero--mob-static .mbe-hero__slide.active { animation: none !important; transform: none !important; }
  .mbe-hero--mob-static .mbe-hero__slide { transition: none !important; }
}

/* ── Accessibility: OS-level reduce-motion always wins ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mbe-hero__slide,
  .mbe-hero__slide.active {
    animation: none !important;
    transform: none !important;
    transition: opacity 200ms linear !important;
  }
}

.mbe-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15,45,26,.65) 0%,
    rgba(15,45,26,.45) 40%,
    rgba(15,45,26,.75) 100%
  );
  /* Purely decorative — must never absorb pointer/touch events */
  pointer-events: none;
}

.mbe-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  padding: 0 20px;
  max-width: 800px;
}

.mbe-hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 20px;
  animation: fadeUp .8s ease both;
}

.mbe-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-rich);
  display: inline-block;
}

.mbe-hero__logo-lockup {
  margin-bottom: 16px;
  animation: fadeUp .8s .15s ease both;
}

.mbe-hero__mhasibu {
  display: block;
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}

.mbe-hero__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  /* ONE fluid rule for every device. Capped at 54px so a long, multi-word
     title fits the 800px hero column (2–3 lines) instead of overflowing the
     screen; scales smoothly down to 28px on phones. No breakpoints, no
     !important — identical behaviour everywhere. */
  font-size: clamp(28px, 4vw + 0.5rem, 54px);
  font-weight: 700;
  line-height: 1.08;
  color: var(--white);
  letter-spacing: -0.5px;
  text-wrap: balance;          /* evens out multi-line wrapping (modern browsers) */
  overflow-wrap: normal;       /* wrap between words only — never split a word */
  word-break: keep-all;        /* extra guard against mid-word breaks */
  hyphens: none;               /* no automatic hyphenation */
}

.mbe-hero__title em {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 300;
}

.mbe-hero__tagline {
  font-size: clamp(14px, 2vw, 18px);
  color: rgba(255,255,255,.8);
  margin-bottom: 24px;
  animation: fadeUp .8s .3s ease both;
}

.mbe-hero__scripture {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--gold-pale);
  border-left: 2px solid var(--gold-rich);
  padding-left: 16px;
  text-align: left;
  display: inline-block;
  margin-bottom: 32px;
  animation: fadeUp .8s .45s ease both;
}

.mbe-hero__scripture cite {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-top: 4px;
  font-style: normal;
}

.mbe-hero__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
  animation: fadeUp .8s .6s ease both;
}

.mbe-hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  animation: fadeUp .8s .75s ease both;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 18px 12px;
  margin-top: 36px;
  width: 100%;          /* fill content width — no fixed max-width on mobile */
  max-width: 580px;     /* cap on desktop */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.mbe-stat {
  text-align: center;
  padding: 4px 20px;
}

.mbe-stat__num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--gold-light);
  display: block;
  line-height: 1;
}

.mbe-stat__lbl {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}

.mbe-stat__divider {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}

.mbe-hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
  width: 42px; height: 42px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bounce 2s infinite;
  z-index: 2;
}

.mbe-hero__scroll span {
  width: 8px; height: 8px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg);
  margin-top: -4px;
}

.mbe-hero__slide-dots {
  position: absolute;
  bottom: 32px;
  right: 32px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.mbe-hero__slide-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
}
.mbe-hero__slide-dots button.active { background: var(--gold-rich); width: 24px; border-radius: 4px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.mbe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: var(--transition);
  font-family: inherit;
}

.mbe-btn--gold {
  background: var(--gold-rich);
  color: var(--green-deep);
  border-color: var(--gold-rich);
}
.mbe-btn--gold:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196,153,31,.35);
}

.mbe-btn--ghost {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,.4);
}
.mbe-btn--ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.7);
}

.mbe-btn--dark {
  background: var(--green-deep);
  color: var(--gold-light);
  border-color: var(--green-deep);
}
.mbe-btn--dark:hover {
  background: var(--green-mid);
  transform: translateY(-2px);
}

.mbe-btn--full { width: 100%; }

.mbe-btn--submit { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════
   ABOUT SECTION
   ═══════════════════════════════════════════════════════════════════ */
.mbe-about {
  padding: 100px 0;
  background: var(--white);
}

.mbe-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.mbe-about__visual { position: relative; }

.mbe-about__image-frame {
  position: relative;
  height: 480px;
  overflow: visible; /* allow badge to protrude */
}

.mbe-about__img-main {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--green-mid), var(--green-bright));
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mbe-about__img-main::before {
  content: "🏘";
  font-size: 80px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: .15;
}

.mbe-about__img-accent {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 200px;
  height: 160px;
  background: linear-gradient(135deg, var(--gold-rich), var(--gold-light));
  border-radius: var(--radius);
  opacity: .3;
}

.mbe-about__badge {
  position: absolute;
  bottom: 12px;
  left: -24px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--cream-dark);
}

.mbe-badge__icon { font-size: 28px; }
.mbe-badge__text { font-size: 12px; color: var(--text-light); line-height: 1.4; }
.mbe-badge__text strong { display: block; color: var(--green-deep); font-size: 14px; }

.mbe-section-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-rich);
  margin-bottom: 12px;
  font-weight: 600;
}
.mbe-section-label--light { color: var(--gold-light); }

.mbe-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--green-deep);
  margin-bottom: 24px;
}
.mbe-section-title em { color: var(--gold-rich); font-style: italic; font-weight: 300; }
.mbe-section-title--light { color: var(--white); }

.mbe-about__text p {
  color: var(--text-mid);
  margin-bottom: 16px;
  line-height: 1.75;
}

.mbe-scripture-inline {
  background: var(--cream);
  border-left: 3px solid var(--gold-rich);
  padding: 14px 18px;
  margin: 24px 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.mbe-scripture-mark { color: var(--gold-rich); margin-right: 8px; }
.mbe-scripture-inline em { font-style: italic; color: var(--text-mid); font-size: 14px; }
.mbe-scripture-inline cite { display: block; font-size: 12px; color: var(--text-light); margin-top: 4px; font-style: normal; }

.mbe-about__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.mbe-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--cream);
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid var(--cream-dark);
  transition: box-shadow 0.2s;
}
.mbe-feature:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.mbe-feature__icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.mbe-feature strong { display: block; font-size: 14px; color: var(--green-deep); font-weight: 600; }
.mbe-feature div { font-size: 13px; color: var(--text-light); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════
   LOCATION SECTION
   ═══════════════════════════════════════════════════════════════════ */
.mbe-location {
  position: relative;
  padding: 80px 0;
  text-align: center;
  overflow: hidden;
}

.mbe-location__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 60%, var(--green-bright) 100%);
}

.mbe-location { position: relative; }

.mbe-location .mbe-section-label,
.mbe-location .mbe-section-title { position: relative; z-index: 1; }

.mbe-location__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
  position: relative;
  z-index: 1;
}

.mbe-location__card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  padding: 36px 20px;
  color: white;
  text-align: center;
  transition: background 0.25s, transform 0.25s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mbe-location__card:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-6px);
  border-color: rgba(196,153,31,.4);
}
.mbe-location__card span { font-size: 34px; display: block; margin-bottom: 12px; }
.mbe-location__card strong { font-size: 26px; font-family: 'Cormorant Garamond',serif; color: var(--gold-light); display: block; line-height: 1; }
.mbe-location__card p { font-size: 13px; color: rgba(255,255,255,.75); margin: 8px 0 0; }

/* ── Live Google Map embed ─────────────────────────────────────────────── */
.mbe-map-wrap {
  position: relative;
  margin-top: 48px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(196,153,31,0.25);
}

/* Gold-tinted location badge floating over the top-left of the map */
.mbe-map-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10,28,18,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(196,153,31,0.45);
  border-radius: 30px;
  padding: 8px 16px 8px 10px;
  pointer-events: none;
}
.mbe-map-badge__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #4cdd72;
  box-shadow: 0 0 0 3px rgba(76,221,114,0.3);
  flex-shrink: 0;
  animation: mbePulseGreen 2s ease-in-out infinite;
}
@keyframes mbePulseGreen {
  0%, 100% { box-shadow: 0 0 0 3px rgba(76,221,114,0.3); }
  50%       { box-shadow: 0 0 0 7px rgba(76,221,114,0); }
}
.mbe-map-badge strong {
  font-size: 13px;
  font-weight: 700;
  color: white;
}
.mbe-map-badge span {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-left: 2px;
}

/* The iframe wrapper */
.mbe-map-frame {
  width: 100%;
  height: 460px;
  display: block;
  line-height: 0;
}
.mbe-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* Bottom bar: coordinates + directions button */
.mbe-map-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(10,28,18,0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(196,153,31,0.2);
  padding: 14px 20px;
  flex-wrap: wrap;
}
.mbe-map-cta__coords {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-family: 'Inter', monospace;
}
.mbe-map-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold-rich), var(--gold-light));
  color: var(--green-deep);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 30px;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}
.mbe-map-cta__btn:hover { opacity: 0.9; transform: translateY(-1px); }

@media (max-width: 600px) {
  .mbe-map-frame { height: 300px; }
  .mbe-map-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mbe-map-cta__btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   PORTAL CARDS
   ═══════════════════════════════════════════════════════════════════ */
.mbe-portals { padding: 100px 0; background: var(--cream); text-align: center; }
.mbe-portals__subtitle {
  max-width: 600px;
  margin: 0 auto 48px;
  color: var(--text-light);
  font-size: 16px;
  line-height: 1.7;
}

.mbe-portals__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  text-align: left;
}

.mbe-portal-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  border: 1px solid rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
}
.mbe-portal-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 56px rgba(0,0,0,.16);
}

.mbe-portal-card__header {
  padding: 32px 28px 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.mbe-portal-card__header::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.mbe-portal-card--resident .mbe-portal-card__header {
  background: linear-gradient(140deg, var(--green-deep) 0%, var(--green-mid) 60%, var(--green-bright) 100%);
  color: white;
}
.mbe-portal-card--committee .mbe-portal-card__header {
  background: linear-gradient(140deg, #0d1f3c 0%, #1e3a6e 60%, #2d57a8 100%);
  color: white;
}

.mbe-portal-card__icon {
  font-size: 40px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
.mbe-portal-card__header h3 {
  color: white;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.2;
}
.mbe-portal-tag {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 600;
}

.mbe-portal-card__features {
  padding: 24px 28px;
  list-style: none;
  border-bottom: 1px solid var(--cream-dark);
  flex: 1;
}
.mbe-portal-card__features li {
  padding: 9px 0;
  font-size: 14px;
  color: var(--text-mid);
  border-bottom: 1px solid var(--cream);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mbe-portal-card__features li:last-child { border: none; }

.mbe-portal-card__actions { padding: 24px 28px 28px; }
.mbe-portal-card__note {
  font-size: 12px;
  color: var(--text-light);
  margin: 12px 0 0;
  text-align: center;
}
.mbe-portal-card__note a { color: var(--gold-rich); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   FAITH BANNER
   ═══════════════════════════════════════════════════════════════════ */
.mbe-faith-banner {
  background: linear-gradient(135deg, var(--earth), #3a2010);
  padding: 64px 24px;
  text-align: center;
}

.mbe-faith-banner__inner { max-width: 700px; margin: 0 auto; }
.mbe-faith-banner__cross { font-size: 28px; color: var(--gold-light); margin-bottom: 20px; display: block; }
.mbe-faith-banner blockquote { font-family: 'Cormorant Garamond',Georgia,serif; font-style: italic; font-size: clamp(18px,2.5vw,24px); color: var(--gold-pale); line-height: 1.7; }
.mbe-faith-banner cite { display: block; margin-top: 16px; color: rgba(255,255,255,.5); font-size: 13px; font-style: normal; }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.mbe-footer {
  background: var(--green-deep);
  padding: 64px 0 0;
  color: rgba(255,255,255,.75);
}

.mbe-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}

.mbe-footer__logo { font-family: 'Cormorant Garamond',serif; font-size: 22px; color: var(--gold-light); margin-bottom: 12px; }
.mbe-footer__address { margin-top: 12px; font-size: 13px; }
.mbe-footer h4 { color: var(--gold-light); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; }
.mbe-footer ul { list-style: none; }
.mbe-footer ul li { margin-bottom: 8px; }
.mbe-footer a { color: rgba(255,255,255,.65); text-decoration: none; font-size: 14px; transition: color .2s; }
.mbe-footer a:hover { color: var(--gold-light); }
.mbe-footer p { font-size: 14px; line-height: 1.7; }

.mbe-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0;
  text-align: center;
}
.mbe-footer__bottom p { font-size: 12px; color: rgba(255,255,255,.4); margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════════ */
.mbe-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.mbe-modal.open { display: flex; }

.mbe-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  animation: fadeIn .3s ease;
}

.mbe-modal__box {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: 540px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp .4s cubic-bezier(0.4,0,0.2,1);
}

.mbe-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--cream);
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  z-index: 1;
  color: var(--text-mid);
}

.mbe-modal__header {
  background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
  padding: 32px;
  text-align: center;
  color: white;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.mbe-modal__icon { font-size: 40px; margin-bottom: 8px; }
.mbe-modal__header h2 { color: white; margin: 0 0 6px; font-size: 22px; }
.mbe-modal__header p { color: rgba(255,255,255,.7); font-size: 14px; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════ */
.mbe-form { padding: 24px 32px 32px; }

.mbe-form__group {
  margin-bottom: 18px;
}

.mbe-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mbe-form__group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--text-mid);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.mbe-form__group input,
.mbe-form__group select,
.mbe-form__group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--cream-dark);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--text-dark);
  transition: border-color .2s;
  background: var(--white);
}

.mbe-form__group input:focus,
.mbe-form__group select:focus,
.mbe-form__group textarea:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(26,74,47,.08);
}

.mbe-form__hint { font-size: 12px; color: var(--text-light); margin-top: 4px; display: block; }

.mbe-form__notice {
  background: var(--gold-pale);
  border: 1px solid var(--gold-rich);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--earth);
  margin-bottom: 16px;
}

.mbe-form__message {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  display: none;
}
.mbe-form__message.success { background: #e8f5e9; color: #2e7d32; display: block; }
.mbe-form__message.error   { background: #ffebee; color: #c62828; display: block; }

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGE
   ═══════════════════════════════════════════════════════════════════ */
.mbe-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 40px 20px;
}

.mbe-auth-page__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 60%, var(--green-bright) 100%);
}

.mbe-auth-page--committee .mbe-auth-page__bg {
  background: linear-gradient(135deg, #0a1828 0%, #1a2a4a 60%, #2d4a7a 100%);
}

.mbe-auth-page__content { position: relative; z-index: 1; width: 100%; max-width: 480px; }

.mbe-auth-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.mbe-auth-card__header {
  background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
  padding: 36px;
  text-align: center;
  color: white;
}
.mbe-auth-page--committee .mbe-auth-card__header { background: linear-gradient(135deg, #0a1828, #1a2a4a); }
.mbe-auth-card__logo { font-size: 48px; margin-bottom: 10px; display: block; }
.mbe-auth-card__header h1 { color: white; font-size: 24px; margin: 0 0 6px; font-family: 'Cormorant Garamond',serif; }
.mbe-auth-card__subtitle { color: var(--gold-light); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
.mbe-auth-card__roles { color: rgba(255,255,255,.5); font-size: 12px; margin-top: 6px; }

.mbe-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--cream-dark);
}
.mbe-auth-tab {
  padding: 14px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-light);
  transition: var(--transition);
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.mbe-auth-tab.active {
  color: var(--green-mid);
  border-bottom-color: var(--green-mid);
  background: var(--cream);
}

.mbe-auth-panel { display: none; }
.mbe-auth-panel.active { display: block; }

.mbe-auth-card__footer {
  padding: 16px 32px 24px;
  border-top: 1px solid var(--cream-dark);
  text-align: center;
}
.mbe-auth-scripture {
  font-style: italic;
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 12px;
  font-family: 'Cormorant Garamond',serif;
}
.mbe-auth-back { font-size: 13px; color: var(--gold-rich); text-decoration: none; }

/* ════════════════════════════════════════════════════════════════════
   FORGOT / RESET PASSWORD UI
   ════════════════════════════════════════════════════════════════════ */

@keyframes mbeStepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "Forgot password?" link inside the password field group */
.mbe-form__group--password { position: relative; }
.mbe-forgot-link {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--gold-rich);
  text-decoration: none;
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color 0.2s;
}
.mbe-forgot-link:hover { color: var(--gold-light); text-decoration: underline; }

/* Back arrow at top of forgot/reset panels */
.mbe-panel-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 20px;
  transition: color 0.2s;
}
.mbe-panel-back:hover { color: var(--green-deep); }

/* Panel heading: icon + title + subtitle */
.mbe-panel-heading { text-align: center; margin-bottom: 24px; }
.mbe-panel-heading__icon { font-size: 40px; margin-bottom: 10px; line-height: 1; }
.mbe-panel-heading h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: var(--green-deep);
  margin: 0 0 6px;
}
.mbe-panel-heading p { font-size: 13px; color: var(--text-light); margin: 0; line-height: 1.6; }

/* ── Success state (email sent / password updated) ── */
.mbe-fp-success { text-align: center; padding: 8px 0 12px; }
.mbe-fp-success__icon { font-size: 52px; margin-bottom: 14px; line-height: 1; }
.mbe-fp-success h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: var(--green-deep);
  margin: 0 0 10px;
}
.mbe-fp-success p { font-size: 14px; color: var(--text-mid); margin: 0 0 16px; line-height: 1.7; }
.mbe-fp-success__note {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  background: var(--gold-pale);
  border: 1px solid var(--gold-light);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--earth);
  font-weight: 600;
}

/* ── Not found state ── */
.mbe-fp-notfound { text-align: center; padding: 8px 0 12px; }
.mbe-fp-notfound__icon { font-size: 44px; margin-bottom: 14px; line-height: 1; }
.mbe-fp-notfound h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: var(--green-deep);
  margin: 0 0 8px;
}
.mbe-fp-notfound p { font-size: 14px; color: var(--text-mid); margin: 0 0 8px; line-height: 1.7; }
.mbe-fp-notfound__sub { font-size: 13px !important; color: var(--text-light) !important; margin-bottom: 18px !important; }

/* ── Registration option cards ── */
.mbe-fp-options { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.mbe-fp-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--cream);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.18s;
}
.mbe-fp-option:hover {
  border-color: var(--green-mid);
  background: white;
  transform: translateY(-1px);
}
.mbe-fp-option--email { cursor: pointer; }
.mbe-fp-option__icon { font-size: 24px; flex-shrink: 0; }
.mbe-fp-option div { flex: 1; }
.mbe-fp-option strong {
  display: block;
  font-size: 14px;
  color: var(--green-deep);
  font-weight: 700;
  margin-bottom: 2px;
}
.mbe-fp-option small { font-size: 12px; color: var(--text-light); }
.mbe-fp-option__arrow { font-size: 18px; color: var(--gold-rich); flex-shrink: 0; }

/* Password strength indicator */
.mbe-rp-strength {
  font-size: 12px;
  font-weight: 700;
  min-height: 18px;
  margin: -8px 0 8px;
  transition: color 0.3s;
}

/* ═══════════════════════════════════════════════════════════════════
   PORTAL LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.mbe-portal {
  display: flex;
  min-height: 100vh;
  background: var(--cream);
}

/* SIDEBAR */
.mbe-portal__sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--green-deep);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  overflow-y: auto;
  z-index: 100;
  transition: transform var(--transition);
  /* Desktop: always visible — never hidden by inline styles */
  visibility: visible;
  pointer-events: auto;
}

.mbe-portal__sidebar--dark { background: #0a1828; }

.mbe-portal__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mbe-portal__brand-icon { font-size: 28px; }
.mbe-portal__brand-name { font-family: 'Cormorant Garamond',serif; font-size: 18px; color: white; font-weight: 700; }
.mbe-portal__brand-sub { font-size: 10px; color: var(--gold-light); letter-spacing: 2px; text-transform: uppercase; }

.mbe-portal__nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mbe-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius);
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 14px;
  transition: var(--transition);
  position: relative;
}
.mbe-nav-item:hover { background: rgba(255,255,255,.06); color: white; }
.mbe-nav-item.active { background: rgba(196,153,31,.15); color: var(--gold-light); border-left: 3px solid var(--gold-rich); }
.mbe-nav-icon { font-size: 16px; width: 20px; }

.mbe-badge-pending {
  margin-left: auto;
  background: #ff5722;
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 7px;
}

.mbe-portal__sidebar-footer {
  padding: 16px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mbe-portal__user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  margin-bottom: 8px;
}
.mbe-portal__user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold-rich);
  color: var(--green-deep);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mbe-portal__user-avatar--gold { background: var(--gold-rich); }
.mbe-portal__user-name { font-size: 13px; color: white; font-weight: 600; }
.mbe-portal__user-plot { font-size: 11px; color: rgba(255,255,255,.5); }
.mbe-logout-btn {
  display: block;
  text-align: center;
  padding: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  border-radius: var(--radius);
  transition: var(--transition);
}
.mbe-logout-btn:hover { background: rgba(255,255,255,.06); color: white; }

/* Logout row: Sign Out + a small "force sign-out / clear cache" button */
.mbe-logout-row { display: flex; align-items: center; gap: 6px; }
.mbe-logout-row .mbe-logout-btn { flex: 1; }
.mbe-force-logout {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.mbe-force-logout:hover { background: rgba(220,38,38,.85); color: #fff; border-color: transparent; transform: rotate(90deg); }
.mbe-force-logout:active { transform: rotate(180deg); }

/* MAIN */
.mbe-portal__main {
  flex: 1;
  margin-left: 260px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mbe-portal__topbar {
  background: white;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--cream-dark);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.mbe-portal__greeting { flex: 1; font-size: 15px; font-weight: 600; color: var(--green-deep); }

/* ── Rich greeting (v3.65.0) ─────────────────────────────────────────── */
.mbe-portal__greeting.is-rich { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.2; }
.mbe-greet__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #b8891a; margin-bottom: 3px; animation: mbeGreetIn .6s ease both; }
.mbe-greet__line { display: flex; align-items: baseline; gap: 0; min-width: 0; white-space: nowrap;
  animation: mbeGreetIn .6s ease .08s both; }
.mbe-greet__lead { font-size: 15.5px; font-weight: 600; color: #4a5a4f; flex-shrink: 0; }
.mbe-greet__name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 700;
  letter-spacing: .01em; margin-left: 4px; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(100deg, #0f5132 0%, #1f7a4a 28%, #c4991f 58%, #e0a526 72%, #1f7a4a 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #1f7a4a;
  animation: mbeGreetShimmer 7s ease-in-out infinite; }
.mbe-greet__wave { display: inline-block; font-size: 19px; margin-left: 7px; transform-origin: 70% 75%;
  animation: mbeGreetWave 2.2s ease-in-out .7s 2; }
@keyframes mbeGreetIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes mbeGreetShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes mbeGreetWave {
  0%,60%,100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
@media (max-width: 600px) {
  .mbe-greet__kicker { font-size: 9.5px; margin-bottom: 1px; }
  .mbe-greet__lead { font-size: 13px; }
  .mbe-greet__name { font-size: 17px; }
  .mbe-greet__wave { font-size: 16px; margin-left: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mbe-greet__kicker, .mbe-greet__line, .mbe-greet__name, .mbe-greet__wave { animation: none; }
}
.mbe-portal__date { font-size: 13px; color: var(--text-light); }
/* ── Sidebar Toggle (legacy selector kept for compat) ─────────────────── */
.mbe-sidebar-toggle { display: none; } /* overridden below */

/* ══════════════════════════════════════════════════════════════════════
   IMPROVED SIDEBAR NAVIGATION SYSTEM
   Animated hamburger · Staggered entry · Backdrop · Desktop collapse
   ══════════════════════════════════════════════════════════════════════ */

/* Toggle wrapper — hidden on desktop, flex on mobile */
.mbe-sidebar-toggle-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* Animated hamburger button */
.mbe-sidebar-toggle {
  width: 44px;
  height: 44px;
  background: var(--green-deep);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  transition: background 0.3s ease, transform 0.18s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 10px rgba(15,45,26,0.35);
  position: relative;
  overflow: hidden;
}

/* Ripple glow on hover */
.mbe-sidebar-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.mbe-sidebar-toggle:hover::after { opacity: 1; }
.mbe-sidebar-toggle:hover {
  background: var(--green-mid);
  transform: scale(1.06);
  box-shadow: 0 4px 18px rgba(15,45,26,0.45);
}
.mbe-sidebar-toggle:active { transform: scale(0.94); }

/* The three bars */
.mbe-hamburger__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1),
              opacity 0.25s ease,
              width 0.3s ease;
  transform-origin: center;
  pointer-events: none;
}

/* Bars morph into × when open */
.mbe-sidebar-toggle.is-open .mbe-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mbe-sidebar-toggle.is-open .mbe-hamburger__bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.mbe-sidebar-toggle.is-open .mbe-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hint text below button */
.mbe-sidebar-hint {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-light);
  white-space: nowrap;
  transition: opacity 0.25s ease, transform 0.25s ease;
  user-select: none;
}
.mbe-sidebar-hint.hint-fade {
  opacity: 0;
  transform: translateY(-3px);
}

/* ── Backdrop overlay (mobile) ─────────────────────────────────────────── */
.mbe-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 18, 10, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 98;
  opacity: 0;
  pointer-events: none;   /* ← THE FIX: invisible backdrop must not eat taps */
  transition: opacity 0.38s ease;
  cursor: pointer;
}
.mbe-sidebar-backdrop.active {
  opacity: 1;
  pointer-events: auto;  /* ← only intercept taps when sidebar is actually open */
}

/* ── Enhanced sidebar open transition ─────────────────────────────────── */
.mbe-portal__sidebar {
  transition: transform 0.42s cubic-bezier(0.4,0,0.2,1),
              width 0.42s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.42s ease;
}
.mbe-portal__sidebar.open {
  box-shadow: 10px 0 50px rgba(0,0,0,0.35);
}

/* ── Staggered nav item entrance animation ────────────────────────────── */
@keyframes mbeNavSlideIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mbe-portal__sidebar.open .mbe-nav-item {
  animation: mbeNavSlideIn 0.42s cubic-bezier(0.4,0,0.2,1) both;
}
.mbe-portal__sidebar.open .mbe-nav-item:nth-child(1) { animation-delay: 0.06s; }
.mbe-portal__sidebar.open .mbe-nav-item:nth-child(2) { animation-delay: 0.11s; }
.mbe-portal__sidebar.open .mbe-nav-item:nth-child(3) { animation-delay: 0.16s; }
.mbe-portal__sidebar.open .mbe-nav-item:nth-child(4) { animation-delay: 0.21s; }
.mbe-portal__sidebar.open .mbe-nav-item:nth-child(5) { animation-delay: 0.26s; }
.mbe-portal__sidebar.open .mbe-nav-item:nth-child(6) { animation-delay: 0.31s; }
.mbe-portal__sidebar.open .mbe-nav-item:nth-child(7) { animation-delay: 0.36s; }
.mbe-portal__sidebar.open .mbe-nav-item:nth-child(8) { animation-delay: 0.41s; }

/* ── Active nav shimmer effect ────────────────────────────────────────── */
@keyframes mbeNavShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.mbe-nav-item.active {
  overflow: hidden;
}
.mbe-nav-item.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196,153,31,0.14) 50%,
    transparent 100%
  );
  background-size: 200% auto;
  animation: mbeNavShimmer 3s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* nav label (hidden when collapsed) */
.mbe-nav-label {
  flex: 1;
  transition: opacity 0.3s, transform 0.3s;
}

/* ── Desktop sidebar collapse button ──────────────────────────────────── */
.mbe-sidebar-collapse-btn {
  position: absolute;
  right: -14px;
  top: 26px;
  width: 28px;
  height: 28px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mid);
  transition: background 0.25s, border-color 0.25s, color 0.25s,
              transform 0.38s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.25s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.13);
  z-index: 102;
}
.mbe-sidebar-collapse-btn:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: white;
  box-shadow: 0 4px 14px rgba(15,45,26,0.35);
}
.mbe-sidebar-collapse-btn svg { display: block; }

/* Arrow rotates when collapsed */
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-sidebar-collapse-btn {
  transform: rotate(180deg);
}
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-sidebar-collapse-btn:hover {
  transform: rotate(180deg) scale(1.1);
}

/* ══════════════════════════════════════════════════════════════════════
   COLLAPSED SIDEBAR — Navigation Rail
   100 px wide · Icon on top · Label below · Both always visible
   Available via the manual collapse button (‹/›) only — never
   triggered automatically on desktop.
   ══════════════════════════════════════════════════════════════════════ */

.mbe-portal__sidebar.mbe-sidebar--collapsed {
  width: 100px;
}

/* ── Brand: stacked icon + tiny site name ── */
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-portal__brand {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 8px 16px;
  gap: 6px;
}
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-portal__brand-icon {
  font-size: 28px;
}
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-portal__brand-text {
  opacity: 1;
  width: auto;
  overflow: hidden;
  text-align: center;
}
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-portal__brand-name {
  display: block;
  font-size: 11px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
  text-align: center;
}
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-portal__brand-sub {
  display: none;
}

/* ── Nav items: icon above label (navigation-rail layout) ── */
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-nav-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  gap: 5px;
  min-height: 62px;
  border-left: none;           /* remove vertical active bar */
  border-radius: 10px;
  position: relative;
}
/* Active rail item: bottom gold underline instead of side bar */
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-nav-item.active {
  background: rgba(196,153,31,0.15);
  border-bottom: 2px solid var(--gold-rich);
}

.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-nav-icon {
  font-size: 22px;
  width: auto;
  margin: 0;
  line-height: 1;
  display: block;
}

/* Label: visible, centred, two-line max, 10 px */
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-nav-label {
  display: block !important;
  opacity: 1 !important;
  width: 100% !important;
  overflow: hidden !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.25;
  color: rgba(255,255,255,0.65);
  pointer-events: none;
  white-space: normal;
  word-break: break-word;
  max-width: 88px;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-nav-item.active .mbe-nav-label {
  color: var(--gold-light);
}

/* Badge repositioned for rail layout */
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-badge-pending {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 8px;
  padding: 1px 4px;
}

/* ── Footer: avatar + tiny "Sign Out" ── */
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-portal__sidebar-footer {
  padding: 10px 6px;
}
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-portal__user-card {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  gap: 4px;
}
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-portal__user-name,
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-portal__user-plot,
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-portal__brand-sub {
  display: none;
}
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-logout-btn {
  font-size: 9px;
  padding: 4px 6px;
  opacity: 0.7;
  display: block;
  text-align: center;
}

/* No tooltip — labels are always shown */
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-nav-item::before {
  display: none;
}

/* ── Collapse button: rotated when collapsed ── */
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-sidebar-collapse-btn {
  transform: rotate(180deg);
  width: 32px;
  height: 32px;
  right: -16px;
}
.mbe-portal__sidebar.mbe-sidebar--collapsed .mbe-sidebar-collapse-btn:hover {
  transform: rotate(180deg) scale(1.1);
}

/* ── Main content margin when rail is active ── */
.mbe-portal__main--sidebar-collapsed {
  margin-left: 100px !important;
}

/* Smooth main-content transition for collapse toggle */
.mbe-portal__main {
  transition: margin-left 0.42s cubic-bezier(0.4,0,0.2,1);
}

/* Brand text collapses gracefully */
.mbe-portal__brand-text {
  overflow: hidden;
  transition: opacity 0.3s ease, width 0.42s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
}

/* SECTIONS */
/* ── Section reveal — plays every time a section becomes active ────────────
   The sidebar retreats left while the content slides in from the right,
   creating a choreographed push-reveal effect.                             */
@keyframes mbeSectionReveal {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}

.mbe-section { display: none; padding: 32px; }
.mbe-section.active {
  display: block;
  animation: mbeSectionReveal 0.42s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* No-motion preference */
@media (prefers-reduced-motion: reduce) {
  .mbe-section.active { animation: none; }
}

.mbe-page-header {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mbe-page-header h2 { font-family: 'Cormorant Garamond',serif; font-size: 32px; color: var(--green-deep); margin: 0 0 4px; }
.mbe-page-header p { color: var(--text-light); font-size: 14px; margin: 0; }

.mbe-scripture-strip {
  background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold-pale);
  font-style: italic;
  font-family: 'Cormorant Garamond',serif;
  font-size: 15px;
}
.mbe-scripture-strip__icon { color: var(--gold-rich); flex-shrink: 0; }
.mbe-scripture-strip cite { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.5); font-style: normal; flex-shrink: 0; }

/* KPI GRID */
.mbe-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.mbe-kpi {
  background: white;
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--cream-dark);
  transition: var(--transition);
}
.mbe-kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mbe-kpi--gold { background: linear-gradient(135deg, var(--green-deep), var(--green-mid)); color: white; }
.mbe-kpi--green { background: linear-gradient(135deg, #1b5e20, #2e7d32); color: white; }
.mbe-kpi--orange { background: linear-gradient(135deg, #e65c00, #f57c00); color: white; }
.mbe-kpi--blue { background: linear-gradient(135deg, #0d47a1, #1565c0); color: white; }

.mbe-kpi__icon { font-size: 28px; margin-bottom: 8px; }
.mbe-kpi__value { font-family: 'Cormorant Garamond',serif; font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.mbe-kpi__label { font-size: 12px; opacity: .75; letter-spacing: .5px; }
.mbe-kpi--gold .mbe-kpi__value, .mbe-kpi--gold .mbe-kpi__label { color: white; }

/* WIDGETS & TABLES */
.mbe-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mbe-widget { background: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--cream-dark); overflow: hidden; }
.mbe-widget__header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--cream-dark); }
.mbe-widget__header h3 { font-size: 15px; font-weight: 600; color: var(--green-deep); margin: 0; }
.mbe-nav-link { font-size: 13px; color: var(--gold-rich); text-decoration: none; }

.mbe-table-wrap { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--cream-dark); }
.mbe-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mbe-table thead th { background: var(--green-deep); color: white; padding: 12px 16px; text-align: left; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; font-weight: 600; }
.mbe-table tbody tr { border-bottom: 1px solid var(--cream); transition: background .15s; }
.mbe-table tbody tr:hover { background: var(--cream); }
.mbe-table tbody td { padding: 12px 16px; color: var(--text-mid); vertical-align: middle; }
.mbe-table .mbe-loading { text-align: center; color: var(--text-light); padding: 32px; }

/* STATUS BADGES */
.mbe-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.mbe-status--approved { background: #e8f5e9; color: #2e7d32; }
.mbe-status--pending  { background: #fff3e0; color: #e65c00; }
.mbe-status--suspended{ background: #ffebee; color: #c62828; }
.mbe-status--confirmed{ background: #e3f2fd; color: #1565c0; }
.mbe-status--proposed { background: #e8eaf6; color: #283593; }
.mbe-status--ongoing  { background: #fffde7; color: #f57f17; }
.mbe-status--completed{ background: #e8f5e9; color: #1b5e20; }

/* NEWS FEED */
.mbe-news-feed { display: flex; flex-direction: column; gap: 20px; }
.mbe-news-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--cream-dark); overflow: hidden; transition: var(--transition); }
.mbe-news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mbe-news-card__header { background: linear-gradient(135deg, var(--green-deep), var(--green-mid)); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; }
.mbe-news-card__cat { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light); }
.mbe-news-card__date { font-size: 11px; color: rgba(255,255,255,.5); }
.mbe-news-card h3 { padding: 16px 20px 8px; font-size: 17px; color: var(--green-deep); margin: 0; }
.mbe-news-card p { padding: 0 20px 20px; font-size: 14px; color: var(--text-mid); line-height: 1.6; margin: 0; }

/* NEWS LIST (widget) */
.mbe-news-list { padding: 16px 24px; }
.mbe-news-item { padding: 12px 0; border-bottom: 1px solid var(--cream); }
.mbe-news-item:last-child { border: none; }
.mbe-news-item h4 { font-size: 14px; color: var(--green-deep); margin: 0 0 4px; }
.mbe-news-item span { font-size: 12px; color: var(--text-light); }

/* PROJECTS */
.mbe-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.mbe-project-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--cream-dark); overflow: hidden; transition: var(--transition); }
.mbe-project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mbe-project-card__header { padding: 20px; border-bottom: 1px solid var(--cream-dark); }
.mbe-project-card__header h3 { font-size: 16px; margin: 0 0 8px; color: var(--green-deep); }
.mbe-project-card__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.mbe-project-card__body { padding: 16px 20px; }
.mbe-project-card__body p { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin: 0 0 14px; }
.mbe-progress { background: var(--cream-dark); border-radius: 4px; height: 8px; overflow: hidden; margin-top: 4px; }
.mbe-progress__fill { height: 100%; background: linear-gradient(90deg, var(--green-mid), var(--gold-rich)); border-radius: 4px; transition: width .8s ease; }
.mbe-progress__label { font-size: 11px; color: var(--text-light); margin-top: 4px; display: block; }

/* BYLAWS */
.mbe-accordion { display: flex; flex-direction: column; gap: 12px; }
.mbe-accordion-item { background: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--cream-dark); overflow: hidden; }
.mbe-accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; cursor: pointer; user-select: none; }
.mbe-accordion-header:hover { background: var(--cream); }
.mbe-accordion-header-left { display: flex; align-items: center; gap: 14px; }
.mbe-accordion-num { background: var(--green-deep); color: var(--gold-light); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.mbe-accordion-title { font-size: 15px; font-weight: 600; color: var(--green-deep); }
.mbe-accordion-toggle { color: var(--text-light); font-size: 20px; transition: transform .3s; }
.mbe-accordion-item.open .mbe-accordion-toggle { transform: rotate(45deg); }
.mbe-accordion-body { display: none; padding: 0 24px 20px; font-size: 14px; color: var(--text-mid); line-height: 1.7; }
.mbe-accordion-item.open .mbe-accordion-body { display: block; }

/* PLOT CARD */
.mbe-plot-card { padding: 24px; }
.mbe-plot-detail { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--cream); font-size: 14px; }
.mbe-plot-detail:last-child { border: none; }
.mbe-plot-detail span:first-child { color: var(--text-light); }
.mbe-plot-detail span:last-child { font-weight: 600; color: var(--green-deep); }

/* PENDING LIST */
.mbe-pending-list { padding: 16px 24px; }
.mbe-pending-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--cream); gap: 12px; }
.mbe-pending-item:last-child { border: none; }
.mbe-pending-info { flex: 1; }
.mbe-pending-info strong { display: block; font-size: 14px; color: var(--green-deep); }
.mbe-pending-info span { font-size: 12px; color: var(--text-light); }
.mbe-pending-actions { display: flex; gap: 8px; }
.mbe-btn-approve { background: var(--gold-rich); color: var(--green-deep); border: none; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.mbe-btn-reject  { background: #ffebee; color: #c62828; border: none; padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }

/* RESIDENTS TABLE — action buttons.
   Wrapped in a flex row so they wrap neatly and never overlap,
   and each action carries its own distinct colour. */
.mbe-table tbody td:last-child { vertical-align: middle; }
.mbe-res-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 150px; }
.mbe-ra {
  border: none; cursor: pointer; font-family: inherit; font-weight: 600;
  font-size: 12px; line-height: 1; padding: 7px 12px; border-radius: 7px;
  color: #fff; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mbe-ra:hover  { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.mbe-ra:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.mbe-ra:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mbe-ra--approve   { background: #16a34a; }   /* green  */
.mbe-ra--request   { background: #2563eb; }   /* blue   */
.mbe-ra--suspend   { background: #ea580c; }   /* orange */
.mbe-ra--reinstate { background: #0d9488; }   /* teal   */
.mbe-ra--received  { background: #7c3aed; }   /* violet */
.mbe-ra--restore   { background: #ca8a04; }   /* gold   */
.mbe-ra--email     { background: #4f46e5; }   /* indigo */
.mbe-ra--delete    { background: #dc2626; }   /* red    */

/* Give the "removed" status pill a proper look (was unstyled). */
.mbe-status--removed { background: #f1f5f9; color: #64748b; }

/* FILTER BAR */
.mbe-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.mbe-filter { padding: 7px 16px; border-radius: 20px; border: 1.5px solid var(--cream-dark); background: white; font-size: 13px; cursor: pointer; transition: var(--transition); font-family: inherit; }
.mbe-filter.active, .mbe-filter:hover { background: var(--green-deep); color: white; border-color: var(--green-deep); }

.mbe-search-bar { margin-bottom: 20px; }
.mbe-search-bar input { width: 100%; max-width: 360px; padding: 10px 16px; border: 1.5px solid var(--cream-dark); border-radius: var(--radius); font-size: 14px; font-family: inherit; }
.mbe-search-bar input:focus { outline: none; border-color: var(--green-mid); }

/* PAYMENT SUMMARY */
.mbe-payment-summary { background: linear-gradient(135deg, var(--green-deep), var(--green-mid)); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px; color: white; }
.mbe-payment-summary strong { font-family: 'Cormorant Garamond',serif; font-size: 28px; display: block; color: var(--gold-light); }
.mbe-payment-summary span { font-size: 13px; color: rgba(255,255,255,.65); }

/* DOCUMENTS */
.mbe-documents-grid { padding: 40px 0; }

/* Document library cards (restored) */
.mbe-documents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.mbe-doc-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg); padding: 16px 18px;
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mbe-doc-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,45,26,.12); border-color: var(--gold-rich); }
.mbe-doc-card__icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.mbe-doc-card__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mbe-doc-card__title { font-size: 15px; color: var(--green-deep); }
.mbe-doc-card__desc { font-size: 12.5px; color: var(--text-mid); line-height: 1.45; }
.mbe-doc-card__cat {
  align-self: flex-start; margin-top: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--earth); background: var(--gold-pale); border-radius: 999px; padding: 2px 9px;
}
.mbe-doc-card__dl { font-size: 20px; color: var(--gold-rich); flex-shrink: 0; }
.mbe-empty-state { text-align: center; padding: 60px 0; }
.mbe-empty-state__icon { font-size: 48px; margin-bottom: 16px; opacity: .5; }
.mbe-empty-state h3 { color: var(--green-deep); margin-bottom: 8px; }
.mbe-empty-state p { color: var(--text-light); font-size: 14px; }

/* COLLAPSIBLE */
.mbe-collapsible { margin-bottom: 24px; }

/* UTILITY */
.mbe-loading { text-align: center; padding: 40px; color: var(--text-light); font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}
@keyframes countUp {
  from { opacity: 0; } to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .mbe-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .mbe-about__grid { grid-template-columns: 1fr; gap: 40px; }
  .mbe-location__grid { grid-template-columns: repeat(2, 1fr); }
  .mbe-portals__grid { grid-template-columns: 1fr; }
  .mbe-footer__grid { grid-template-columns: 1fr 1fr; }
  .mbe-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .mbe-portal__sidebar { transform: translateX(-100%); pointer-events: none; visibility: hidden; transition: transform 0.38s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.38s; }
  .mbe-portal__sidebar.open { transform: translateX(0); pointer-events: auto; visibility: visible; transition: transform 0.38s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0s; }
  .mbe-portal__main { margin-left: 0; }
  .mbe-sidebar-toggle-wrap { display: flex; }
  .mbe-sidebar-backdrop { display: block; }
  .mbe-sidebar-collapse-btn { display: none !important; }
  .mbe-section { padding: 20px 16px; }
  .mbe-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
  .mbe-kpi { padding: 14px 10px; border-radius: 12px; }
  .mbe-kpi__icon { font-size: 20px; margin-bottom: 4px; }
  .mbe-kpi__value { font-size: 20px; margin-bottom: 2px; }
  .mbe-kpi__label { font-size: 10.5px; letter-spacing: .2px; }
  .mbe-form__row { grid-template-columns: 1fr; }
  .mbe-location__grid { grid-template-columns: 1fr 1fr; }
  .mbe-footer__grid { grid-template-columns: 1fr; }
  .mbe-table-wrap { overflow-x: auto; }
}

@media (max-width: 480px) {
  .mbe-hero__ctas { flex-direction: column; align-items: center; }
  .mbe-kpi-grid { grid-template-columns: 1fr; }
  .mbe-location__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   BIBLE & AI COMPANION
   ══════════════════════════════════════════════════════════════════════════════ */

/* Stats bar */
.mbe-bible-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
  gap: 12px;
  margin-bottom: 24px;
}
.mbe-bstat {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.mbe-bstat--scripture {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-size: 13px;
  color: var(--earth);
  font-style: italic;
  padding: 16px 20px;
}
.mbe-bstat__num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1;
}
.mbe-bstat__label {
  display: block;
  font-size: 11px;
  color: var(--earth);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Bible cards */
.mbe-bible-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.mbe-bible-card__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.mbe-bible-card__icon {
  font-size: 28px;
  flex-shrink: 0;
  margin-top: 2px;
}
.mbe-bible-card__header h3 {
  margin: 0 0 4px;
  color: var(--green-deep);
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
}
.mbe-bible-card__header p {
  margin: 0;
  font-size: 13px;
  color: var(--earth);
}

/* Intention card */
.mbe-intention-card {
  border-left: 4px solid var(--gold-rich);
  background: linear-gradient(135deg, #fffdf6 0%, #fff 100%);
}
.mbe-intention-textarea {
  width: 100%;
  min-height: 100px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.6;
}
.mbe-intention-textarea:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(45,106,71,0.08);
}

/* Testament tabs */
.mbe-testament-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.mbe-test-tab {
  padding: 8px 18px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: var(--earth);
  cursor: pointer;
  transition: all 0.2s;
}
.mbe-test-tab.active {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: white;
}

/* Book grid */
.mbe-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.mbe-book-btn {
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--cream-light);
  font-size: 12px;
  font-weight: 600;
  color: var(--green-deep);
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  position: relative;
}
.mbe-book-btn:hover {
  background: var(--green-deep);
  color: white;
  border-color: var(--green-deep);
}
.mbe-book-btn.has-progress {
  border-color: var(--gold-rich);
}
.mbe-book-btn .mbe-progress-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-rich);
  margin-right: 4px;
  vertical-align: middle;
}
.mbe-book-chapters {
  font-size: 10px;
  color: var(--earth);
  font-weight: 400;
  display: block;
  margin-top: 2px;
}

/* Chapter reader */
.mbe-reader-card {
  border-left: 4px solid var(--green-mid);
}
.mbe-reader-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.mbe-reader-header h2 {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  color: var(--green-deep);
}
.mbe-chapter-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mbe-chapter-nav select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--green-deep);
}
.mbe-chapter-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.9;
  color: #2a2a2a;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px;
}
.mbe-verse-num {
  font-size: 11px;
  color: var(--gold-rich);
  font-weight: 700;
  vertical-align: super;
  margin-right: 2px;
}

/* Devotional card */
.mbe-devotional-card {
  border-left: 4px solid var(--gold-rich);
  background: linear-gradient(135deg, #fffef8 0%, #fff 100%);
}
.mbe-devotional-text {
  font-family: 'Georgia', serif;
  font-size: 15px;
  line-height: 1.85;
  color: #2a2a2a;
  white-space: pre-wrap;
}
.mbe-ai-badge {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--cream-light);
  color: var(--earth);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* Loading spinner */
.mbe-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--green-mid);
  border-radius: 50%;
  animation: mbeSpinAnim 0.8s linear infinite;
  margin: 0 auto 12px;
}
@keyframes mbeSpinAnim { to { transform: rotate(360deg); } }
.mbe-chapter-loading, .mbe-devotional-loading {
  text-align: center;
  padding: 32px;
  color: var(--earth);
}

/* Reading history */
.mbe-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.mbe-history-item {
  background: var(--cream-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.18s;
}
.mbe-history-item:hover {
  border-color: var(--green-mid);
  background: white;
}
.mbe-history-item__book {
  font-weight: 700;
  color: var(--green-deep);
  font-size: 14px;
}
.mbe-history-item__progress {
  font-size: 12px;
  color: var(--earth);
  margin-top: 4px;
}
.mbe-history-item__bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.mbe-history-item__bar-fill {
  height: 100%;
  background: var(--gold-rich);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* Bible nav item highlight */
.mbe-nav-item--bible {
  background: linear-gradient(135deg, rgba(196,153,31,0.08) 0%, transparent 100%);
  border-left: 3px solid var(--gold-rich);
}
.mbe-nav-item--bible.active {
  background: linear-gradient(135deg, rgba(196,153,31,0.15) 0%, transparent 100%);
}

/* Responsive */
@media (max-width: 768px) {
  .mbe-bible-stats { grid-template-columns: repeat(2,1fr); }
  .mbe-bstat--scripture { grid-column: span 2; }
  .mbe-book-grid { grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); }

  .mbe-reader-header { flex-direction: column; align-items: stretch; }
  .mbe-reader-header > div:first-child { width: 100%; }

  /* Chapter/verse navigation: wrap onto two tidy rows instead of overflowing.
     Row 1: Previous + Next. Row 2: Chapter select : Verse select. */
  .mbe-chapter-nav { flex-wrap: wrap; width: 100%; gap: 8px; }
  .mbe-chapter-nav #mbe-prev-ch { order: 1; flex: 1 1 45%; }
  .mbe-chapter-nav #mbe-next-ch { order: 2; flex: 1 1 45%; }
  .mbe-chapter-nav #mbe-chapter-select { order: 3; flex: 1 1 42%; }
  .mbe-chapter-nav .mbe-ref-colon { order: 4; flex: 0 0 auto; }
  .mbe-chapter-nav #mbe-verse-select { order: 5; flex: 1 1 42%; }
  .mbe-chapter-nav select { min-width: 0; max-width: none; width: auto; }

  /* Action buttons go full width, side by side */
  .mbe-reader-actions { width: 100%; }
  .mbe-reader-actions .mbe-btn { flex: 1 1 45%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PRIMARY NAVIGATION
   ══════════════════════════════════════════════════════════════════════════════ */

.mbe-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  transition: background 0.35s ease, box-shadow 0.35s ease;
  background: transparent;
  /* NO transform here — transform: translateZ(0) was creating a GPU composite
     layer that clipped the mobile drawer when it tried to expand below the nav */
}
.mbe-nav--scrolled {
  background: var(--green-deep);
  box-shadow: 0 4px 30px rgba(0,0,0,.4);
}

.mbe-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 0;
}

/* Logo */
.mbe-nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
}
.mbe-nav__logo-icon { font-size: 24px; line-height: 1; }
.mbe-nav__logo-name {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.mbe-nav__logo-sub {
  display: block;
  font-size: 9px;
  color: var(--gold-light);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Desktop links */
.mbe-nav__menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0 16px 0 0;
  padding: 0;
}
.mbe-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 13px;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.mbe-nav__link:hover,
.mbe-nav__link--active { color: #fff; background: rgba(255,255,255,.12); }
.mbe-nav__arrow { font-size: 9px; opacity: 0.7; transition: transform 0.2s; }

/* Dropdowns */
.mbe-nav__has-drop { position: relative; }

.mbe-nav__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 270px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  border: 1px solid rgba(0,0,0,.06);
  z-index: 99999;
}
.mbe-nav__dropdown--right { left: auto; right: 0; }
/* Open via hover (desktop) OR .open class (click/touch) */
.mbe-nav__has-drop:hover .mbe-nav__dropdown,
.mbe-nav__has-drop.open .mbe-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mbe-nav__has-drop:hover .mbe-nav__arrow,
.mbe-nav__has-drop.open .mbe-nav__arrow { transform: rotate(180deg); }
.mbe-nav__drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-dark);
  transition: background 0.15s;
}
.mbe-nav__drop-item:hover { background: var(--cream); }
.mbe-nav__drop-item--highlight { background: rgba(196,153,31,.06); }
.mbe-nav__drop-item--highlight:hover { background: rgba(196,153,31,.14); }
.mbe-nav__drop-icon { font-size: 20px; flex-shrink: 0; }
.mbe-nav__drop-item strong { display: block; font-size: 13px; color: var(--green-deep); margin-bottom: 1px; }
.mbe-nav__drop-item span { font-size: 11px; color: var(--text-light); }
.mbe-nav__drop-divider { height: 1px; background: var(--cream-dark); margin: 5px 0; }

/* Sign In button */
.mbe-nav__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mbe-nav__signin-wrap { position: relative; }
.mbe-nav__signin-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--gold-rich);
  color: var(--green-deep);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.mbe-nav__signin-btn:hover { background: var(--gold-light); transform: translateY(-1px); }
.mbe-nav__signin-icon { font-size: 15px; }

/* Burger */
.mbe-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;   /* iOS HIG minimum 44×44 touch target */
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  cursor: pointer;
  padding: 9px;
  /* Mobile tap improvements */
  touch-action: manipulation;              /* Kills 300ms iOS delay */
  -webkit-tap-highlight-color: transparent; /* No blue flash on tap */
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;                    /* Explicit — never inherit none */
  position: relative;
  z-index: 10001;                          /* Above the nav's own z-index */
}
.mbe-nav__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}
.mbe-nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mbe-nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mbe-nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer — GPU-composited transform slide.
   Hides above the nav (translateY(-110%)) then slides down to show.
   visibility: hidden + pointer-events: none makes it fully inert when closed.
   z-index 9997 sits just below the nav (9999) and burger (10001). */
.mbe-nav__mobile {
  position: fixed;
  top: 68px;
  left: 0; right: 0;
  max-height: 85vh;
  overflow-y: auto;
  z-index: 9997;
  background: var(--green-deep);
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  border-bottom: 2px solid rgba(196,153,31,.3);
  transform: translateY(-110%);
  visibility: hidden;
  pointer-events: none;
  /* On open: transform transitions; visibility delays on CLOSE so it hides
     only after the slide-out completes (0.32 s). On open, no delay. */
  transition: transform 0.32s cubic-bezier(.4,0,.2,1),
              visibility 0s linear 0.32s;
}
.mbe-nav__mobile.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.32s cubic-bezier(.4,0,.2,1),
              visibility 0s linear 0s;
}
@media (max-width: 480px) {
  .mbe-nav__mobile { top: 60px; }
}

.mbe-nav__mobile-inner {
  display: flex;
  flex-direction: column;
  padding: 12px 20px 24px;
  gap: 2px;
}
.mbe-nav__mob-link {
  padding: 13px 16px;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
  display: block;
}
.mbe-nav__mob-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.mbe-nav__mob-divider { height: 1px; background: rgba(255,255,255,.1); margin: 8px 0; }
.mbe-nav__mob-cta {
  display: block;
  padding: 13px 14px;
  background: var(--gold-rich);
  color: var(--green-deep);
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  margin-top: 4px;
  transition: background 0.2s;
}
.mbe-nav__mob-cta:hover { background: var(--gold-light); }
.mbe-nav__mob-cta--ghost {
  background: transparent;
  border: 1.5px solid rgba(196,153,31,.5);
  color: var(--gold-light);
}
.mbe-nav__mob-cta--ghost:hover { background: rgba(196,153,31,.1); }

/* Hero covers full viewport — fixed nav floats on top, content clears it */
.mbe-landing .mbe-hero {
  padding-top: 0;
  min-height: 100vh;
}
/* Push hero text content below the fixed nav bar (68 px) with extra breathing room */
.mbe-landing .mbe-hero__content {
  padding-top: 110px;
}

/* ── Nav responsive ── */
@media (max-width: 880px) {
  .mbe-nav__menu    { display: none; }
  .mbe-nav__signin-wrap { display: none; }
  .mbe-nav__burger  { display: flex; }
}
@media (max-width: 480px) {
  .mbe-nav__inner   { padding: 0 16px; height: 60px; }
  .mbe-nav__logo-name { font-size: 14px; line-height: 1.05; max-width: 46vw; }
  .mbe-nav__logo-sub  { font-size: 8px; letter-spacing: 0.1em; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRAND FOOTER — beautiful, animated, fully visible
   ══════════════════════════════════════════════════════════════════════════════ */

.mbe-gfooter {
  position: relative;
  background: linear-gradient(165deg, #060e06 0%, #0c2414 40%, #081a0c 70%, #050c05 100%);
  overflow: hidden;
  color: rgba(255,255,255,.82);
}

/* ── Canvas: must be absolute so it doesn't push content in normal flow ── */
#mbeFooterCanvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}

/* ── Floating orbs ── */
.mbe-gfooter__orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.mbe-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,153,31,.18) 0%, transparent 70%);
  animation: mbeOrbFloat 18s ease-in-out infinite;
}
.mbe-orb--1 { width: 500px; height: 500px; top: -180px; left: -120px; animation-delay: 0s; }
.mbe-orb--2 { width: 380px; height: 380px; bottom: -100px; right: -80px; animation-delay: -6s; background: radial-gradient(circle, rgba(100,200,100,.1) 0%, transparent 70%); }
.mbe-orb--3 { width: 280px; height: 280px; top: 40%; left: 45%; animation-delay: -12s; background: radial-gradient(circle, rgba(196,153,31,.09) 0%, transparent 70%); }
.mbe-orb--4 { width: 200px; height: 200px; bottom: 20%; left: 20%; animation-delay: -4s; }
@keyframes mbeOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -20px) scale(1.05); }
  66%       { transform: translate(-20px, 15px) scale(.97); }
}

/* ── Scripture banner ── */
.mbe-gfooter__scripture {
  position: relative; z-index: 2;
  text-align: center;
  padding: 60px 24px 52px;
  border-bottom: 1px solid rgba(196,153,31,.2);
  background: rgba(0,0,0,.18);
}
.mbe-gfooter__scripture-cross {
  font-size: 32px;
  color: var(--gold-light);
  display: block;
  margin-bottom: 20px;
  animation: mbeCrossGlow 4s ease-in-out infinite;
}
@keyframes mbeCrossGlow {
  0%,100% { text-shadow: 0 0 0px transparent; opacity: .9; }
  50%      { text-shadow: 0 0 24px rgba(196,153,31,.8); opacity: 1; }
}
.mbe-gfooter__scripture-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(17px,2.4vw,24px);
  color: rgba(255,255,255,.92);
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto 16px;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.mbe-gfooter__scripture-ref {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--gold-light);
  font-style: normal;
  text-transform: uppercase;
}

/* ── Animated ticker ── */
.mbe-gfooter__ticker {
  position: relative; z-index: 2;
  background: rgba(196,153,31,.12);
  border-top: 1px solid rgba(196,153,31,.25);
  border-bottom: 1px solid rgba(196,153,31,.25);
  overflow: hidden;
  padding: 12px 0;
  white-space: nowrap;
}
.mbe-gfooter__ticker-track {
  display: inline-flex;
  gap: 0;
  animation: mbeTicker 40s linear infinite;
}
.mbe-gfooter__ticker-item {
  padding: 0 28px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
}
.mbe-gfooter__ticker-item span {
  color: rgba(196,153,31,.5);
  font-size: 10px;
  margin-left: 28px;
}
@keyframes mbeTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Highlights stats strip ── */
.mbe-gfooter__highlights {
  position: relative; z-index: 2;
  padding: 40px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
}
.mbe-gfooter__highlights-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.mbe-gfooter__highlight {
  text-align: center;
  padding: 8px 40px;
}
.mbe-gfooter__highlight-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px,4vw,44px);
  font-weight: 700;
  background: linear-gradient(135deg, #e8c660 0%, #c4991f 50%, #f0d87a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.mbe-gfooter__highlight-lbl {
  display: block;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: 6px;
}
.mbe-gfooter__highlight-div {
  width: 1px; height: 44px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .mbe-gfooter__highlight { padding: 6px 20px; }
  .mbe-gfooter__highlight-div { height: 32px; }
}

/* ── Scroll-reveal animation for footer columns ──────────────────────────
   Progressive enhancement: elements are VISIBLE by default.
   main.js adds .mbe-js to <html> early; that enables the hide-then-reveal
   animation. If JS fails or the IntersectionObserver doesn't fire,
   content is always visible. */
[data-animate="footer-col"] {
  transition: opacity .7s ease, transform .7s ease;
}
.mbe-js [data-animate="footer-col"] {
  opacity: 0;
  transform: translateY(28px);
}
[data-animate="footer-col"].animated {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Main body ── */
.mbe-gfooter__body { position: relative; z-index: 2; padding: 64px 0 52px; }
.mbe-gfooter__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px 48px;
}
@media (max-width: 1080px) { .mbe-gfooter__grid { grid-template-columns: 1fr 1fr; gap: 44px; } }
@media (max-width: 640px)  { .mbe-gfooter__grid { grid-template-columns: 1fr; gap: 36px; } }

/* ── Brand column ── */
.mbe-gfooter__logo {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.mbe-gfooter__logo-icon {
  font-size: 36px;
  filter: drop-shadow(0 0 12px rgba(196,153,31,.4));
}
.mbe-gfooter__logo-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.mbe-gfooter__logo-by {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--gold-light);
  text-transform: uppercase;
  margin-top: 2px;
}
.mbe-gfooter__brand-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,.62);
  line-height: 1.78;
  margin-bottom: 20px;
}
.mbe-gfooter__badges {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-bottom: 24px;
}
.mbe-gfooter__badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  border: 1px solid rgba(196,153,31,.3);
  border-radius: 100px;
  color: rgba(255,255,255,.75);
  background: rgba(196,153,31,.07);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.mbe-gfooter__badge:hover { background: rgba(196,153,31,.18); color: var(--gold-light); }

/* ── Social icons ── */
.mbe-gfooter__socials { display: flex; gap: 10px; }
.mbe-social {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.mbe-social svg { width: 17px; height: 17px; }
.mbe-social:hover {
  background: rgba(196,153,31,.2);
  border-color: rgba(196,153,31,.5);
  color: var(--gold-light);
  transform: translateY(-3px);
}

/* ── Column titles ── */
.mbe-gfooter__col-title {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.mbe-gfooter__col-line {
  display: inline-block;
  width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--gold-rich), transparent);
  flex-shrink: 0;
  border-radius: 1px;
}

/* ── Links list ── */
.mbe-gfooter__links {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mbe-gfooter__links li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 14px;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  border-radius: 6px;
  transition: color .18s, background .18s, padding-left .18s;
}
.mbe-gfooter__links li a span {
  color: var(--gold-light);
  font-size: 16px;
  transition: transform .18s;
}
.mbe-gfooter__links li a:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
  padding-left: 14px;
}
.mbe-gfooter__links li a:hover span { transform: translateX(3px); }

/* ── Divider ── */
.mbe-gfooter__divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin-bottom: 24px;
}

/* ── Estate features list ── */
.mbe-gfooter__features-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.mbe-gfooter__features-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: rgba(255,255,255,.65);
}
.mbe-gfooter__feat-icon {
  font-size: 16px;
  width: 28px;
  flex-shrink: 0;
  text-align: center;
}

/* ── Portal cards ── */
.mbe-gfooter__portal-cards { display: flex; flex-direction: column; gap: 10px; }
.mbe-gfooter__portal-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,.82);
  transition: background .2s, border-color .2s, transform .2s;
}
.mbe-gfooter__portal-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(196,153,31,.3);
  transform: translateX(4px);
}
.mbe-gfooter__portal-card--gold {
  background: rgba(196,153,31,.1);
  border-color: rgba(196,153,31,.3);
}
.mbe-gfooter__portal-card--gold:hover {
  background: rgba(196,153,31,.22);
  border-color: rgba(196,153,31,.6);
}
.mbe-gfooter__portal-icon { font-size: 22px; flex-shrink: 0; }
.mbe-gfooter__portal-text { flex: 1; }
.mbe-gfooter__portal-text strong {
  display: block; font-size: 14px; color: #fff; line-height: 1.2;
}
.mbe-gfooter__portal-text span {
  display: block; font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px;
}
.mbe-gfooter__portal-arrow {
  color: var(--gold-light);
  font-size: 16px;
  opacity: .7;
  transition: opacity .18s, transform .18s;
}
.mbe-gfooter__portal-card:hover .mbe-gfooter__portal-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* ── Contact items ── */
.mbe-gfooter__contacts { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.mbe-gfooter__contact-item {
  display: flex; align-items: flex-start; gap: 13px;
}
.mbe-gfooter__contact-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  background: rgba(196,153,31,.12);
}
.mbe-gfooter__contact-item strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.45);
  margin-bottom: 3px;
}
.mbe-gfooter__contact-item span,
.mbe-gfooter__contact-item a {
  display: block;
  font-size: 13.5px;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  line-height: 1.5;
}
.mbe-gfooter__contact-item a:hover { color: var(--gold-light); }

/* ── Prayer section ── */
.mbe-gfooter__prayer {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px;
  background: rgba(196,153,31,.07);
  border: 1px solid rgba(196,153,31,.2);
  border-radius: 10px;
}
.mbe-gfooter__prayer-cross {
  font-size: 24px;
  color: var(--gold-light);
  flex-shrink: 0;
  margin-top: 2px;
}
.mbe-gfooter__prayer strong {
  display: block;
  font-size: 13px;
  color: var(--gold-light);
  margin-bottom: 4px;
  font-weight: 600;
}
.mbe-gfooter__prayer p {
  font-size: 12.5px;
  color: rgba(255,255,255,.6);
  line-height: 1.6;
  margin: 0;
}

/* ── Bottom bar ── */
.mbe-gfooter__bottom {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 22px 0;
  background: rgba(0,0,0,.2);
}
.mbe-gfooter__bottom-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.mbe-gfooter__copy {
  font-size: 13px;
  color: rgba(255,255,255,.38);
  flex: 1;
  margin: 0;
}
.mbe-gfooter__credit {
  font-size: 13px;
  color: rgba(255,255,255,.35);
  margin: 0;
}
.mbe-gfooter__credit a { color: var(--gold-light); text-decoration: none; }
.mbe-gfooter__credit a:hover { color: #fff; }
.mbe-heart { color: #e85555; }
.mbe-gfooter__totop {
  width: 40px; height: 40px;
  background: rgba(196,153,31,.12);
  border: 1px solid rgba(196,153,31,.3);
  border-radius: 10px;
  color: var(--gold-light); font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s, box-shadow .25s;
  animation: mbeToTopPulse 3s ease-in-out infinite;
  flex-shrink: 0;
}
.mbe-gfooter__totop:hover {
  background: rgba(196,153,31,.25);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(196,153,31,.3);
}
@keyframes mbeToTopPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(196,153,31,.25); }
  50%      { box-shadow: 0 0 0 7px rgba(196,153,31,0); }
}

@media (max-width: 760px) {
  .mbe-gfooter__scripture { padding: 44px 20px 36px; }
  .mbe-gfooter__scripture-quote { font-size: 16px; }
  .mbe-gfooter__bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mbe-gfooter__body { padding: 44px 0 36px; }
}
@media (max-width: 400px) {
  .mbe-gfooter__badges { gap: 6px; }
  .mbe-gfooter__badge { font-size: 11px; padding: 4px 9px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE OVERRIDES (mobile-first fixes)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── All screen sizes: prevent overflow ── */
html, body { overflow-x: hidden; }
* { min-width: 0; }

/* ── Hero: always full viewport, nav floats above it ── */
.mbe-hero {
  height: 100svh;
  min-height: 580px;
  padding-top: 0 !important;
  /* flex-start so content starts from nav bottom, not vertical centre */
  align-items: flex-start !important;
  justify-content: center !important;
  /* NEVER overflow-y: auto — that traps touch scroll inside the hero
     making it impossible to scroll past it on mobile devices. */
  overflow: hidden !important;
}
.mbe-hero__content {
  padding: 90px 20px 28px; /* 68px nav + 22px breathing room */
  text-align: center;
  width: 100%;
}

/* ── Containers always fit viewport ── */
.mbe-container { padding: 0 20px; }

/* ── Hero stats: no horizontal overflow ── */
.mbe-hero__stats {
  max-width: 100%;
  padding: 12px 10px;
  gap: 0;
  margin-top: 20px;
}
.mbe-stat { padding: 2px 10px; }
.mbe-stat__num { font-size: 24px; }
.mbe-stat__lbl { font-size: 9px; letter-spacing: .8px; }

/* ── CTAs: full-width stacked on mobile ── */
.mbe-hero__ctas {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.mbe-hero__ctas .mbe-btn {
  width: 100%;
  max-width: 300px;
  text-align: center;
  justify-content: center;
  padding: 14px 20px;
}

/* ── Scripture: tighten on small screens ── */
.mbe-hero__scripture {
  margin-bottom: 20px;
  font-size: 13.5px;
}

/* ── Tagline ── */
.mbe-hero__tagline { font-size: 13px; margin-bottom: 14px; }

/* ── Very small phones (≤ 430px wide OR ≤ 700px tall): hide decorative text ── */
@media (max-width: 430px), (max-height: 700px) {
  .mbe-hero__eyebrow { display: none; }         /* Juja South · Kiambu · Kenya */
  .mbe-hero__mhasibu { display: none; }         /* MHASIBU HOUSING sub-line */
  .mbe-hero__logo-lockup { margin-bottom: 8px; }
  /* title size comes from the single fluid clamp — no override here */
  .mbe-hero__tagline { font-size: 12.5px; margin-bottom: 10px; }
  .mbe-hero__scripture { margin-bottom: 14px; font-size: 13px; }
  .mbe-hero__ctas { gap: 8px; margin-bottom: 14px; }
  .mbe-hero__stats { padding: 10px 8px; margin-top: 14px; }
  .mbe-stat__divider { height: 30px; }
  /* Scroll chevron: hide to save space */
  .mbe-hero__scroll { display: none; }
}

/* ── About section ── */
@media (max-width: 900px) {
  .mbe-about__grid { grid-template-columns: 1fr !important; }
  .mbe-about__visual { display: none; } /* hide decorative frame on mobile */
  .mbe-about__features { grid-template-columns: 1fr; } /* single column features */
}

/* ── Portals grid ── */
@media (max-width: 860px) {
  .mbe-portals__grid { grid-template-columns: 1fr !important; max-width: 480px; margin: 0 auto; }
}

/* ── Location cards ── */
@media (max-width: 600px) {
  .mbe-location__grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .mbe-location__card { padding: 24px 14px; }
  .mbe-location__card strong { font-size: 20px; }
}
@media (max-width: 380px) {
  .mbe-location__grid { grid-template-columns: 1fr !important; }
}

/* ── Footer portal cards ── */
@media (max-width: 600px) {
  .mbe-gfooter__portal-cards { display: flex; flex-direction: column; gap: 8px; }
  .mbe-gfooter__socials { justify-content: flex-start; }
}

/* ── Hero title scale: handled by the single fluid clamp on .mbe-hero__title
   (no per-breakpoint overrides, so behaviour is identical on every device) ── */

/* ── Faith-banner CTA buttons ── */
.mbe-faith-banner__ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ── Section headings ── */
@media (max-width: 600px) {
  .mbe-section-title { font-size: clamp(28px, 8vw, 48px) !important; }
  .mbe-portals__subtitle { font-size: 14px; }
  .mbe-about, .mbe-location, .mbe-portals { padding: 60px 0; }
  .mbe-faith-banner { padding: 50px 20px; }
  .mbe-faith-banner blockquote { font-size: 18px; }
  /* Fix about-badge overflow: was left:-24px which bleeds off screen */
  .mbe-about__badge { left: 0; right: auto; bottom: -16px; }
  .mbe-about__image-frame { margin-bottom: 32px; }
  /* Faith-banner CTAs stack on small screens */
  .mbe-faith-banner__ctas { flex-direction: column; align-items: center; }
  .mbe-faith-banner__ctas .mbe-btn { width: 100%; max-width: 300px; justify-content: center; }
}

/* ── Modal: full screen on small phones ── */
@media (max-width: 480px) {
  .mbe-modal { align-items: stretch; }                 /* was flex-end — that pushed the top (and close button) off-screen */
  .mbe-modal__box {
    width: 100%; max-width: 100%;
    max-height: 100vh;                                 /* fallback */
    max-height: 100dvh;                                /* real visible height — excludes the mobile address bar */
    border-radius: 0; margin: 0;
    -webkit-overflow-scrolling: touch;                 /* smooth momentum scroll inside the form */
  }
  .mbe-modal.open .mbe-modal__box { animation: slideUpMob .35s ease; }
  .mbe-form { padding: 20px 16px 24px; }
  .mbe-modal__header { padding: 24px 16px; }
  .mbe-form__row { grid-template-columns: 1fr !important; }
  /* Pin the close button to the visible corner so it's ALWAYS tappable */
  .mbe-modal__close {
    position: fixed; top: 12px; right: 12px;
    width: 40px; height: 40px; font-size: 22px;
    background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25);
    z-index: 10;
  }
}
@keyframes slideUpMob { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── Portal sidebar: full overlay on mobile ── */
@media (max-width: 900px) {
  .mbe-portal__sidebar {
    transform: translateX(-100%);
    width: 280px;
    /* Slide + delay visibility until transform finishes (prevents touch bleed-through) */
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1),
                visibility 0s linear 0.38s,
                pointer-events 0s linear 0.38s;
    pointer-events: none;
    visibility: hidden;
    /* Allow footer to stick to bottom on mobile */
    display: flex;
    flex-direction: column;
  }
  .mbe-portal__sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,.3);
    /* Open: visibility and pointer-events kick in immediately (no delay) */
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1),
                visibility 0s linear 0s,
                pointer-events 0s linear 0s;
    pointer-events: auto;
    visibility: visible;
  }
  /* Sign Out footer: pinned to the bottom of the sidebar so it's always
     visible without scrolling — solves the "tap lands on backdrop" problem */
  .mbe-portal__nav {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mbe-portal__sidebar-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--green-deep);
    border-top: 1px solid rgba(255,255,255,0.1);
    z-index: 2;
    padding: 12px 16px !important;
  }
  .mbe-portal__main { margin-left: 0 !important; width: 100%; }
  .mbe-sidebar-toggle-wrap { display: flex !important; }
  .mbe-section { padding: 16px !important; }
}

/* ── KPI grid ── */
@media (max-width: 640px) {
  .mbe-kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .mbe-kpi { padding: 12px 8px; }
  .mbe-kpi__icon { font-size: 19px; margin-bottom: 3px; }
  .mbe-kpi__value { font-size: 19px; }
  .mbe-kpi__label { font-size: 10px; }
}
@media (max-width: 360px) {
  .mbe-kpi-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Bible stats bar ── */
@media (max-width: 700px) {
  .mbe-bible-stats { grid-template-columns: repeat(2,1fr); }
  .mbe-bstat--scripture { grid-column: span 2; }
}
@media (max-width: 400px) {
  .mbe-bible-stats { grid-template-columns: 1fr 1fr; }
  .mbe-book-grid { grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); }
}

/* ── Tables: horizontal scroll ── */
.mbe-table-wrap, .mbe-committee-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Portal topbar ── */
@media (max-width: 480px) {
  .mbe-portal__topbar { padding: 10px 14px; gap: 8px; }
  .mbe-portal__date { display: none; }
}

/* ── Ensure images don't overflow ── */
img, video, iframe, embed, object { max-width: 100%; height: auto; }

/* ── Utilities ── */
@media (max-width: 768px) {
  .mbe-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .mbe-hide-desktop { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BEAUTIFUL WORD — Styles (v2.1.0)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nav badge ── */
.mbe-nav-item--bword { position: relative; }
.mbe-nav-item--bword::after {
  content: 'NEW';
  position: absolute;
  top: 6px;
  right: 8px;
  background: linear-gradient(135deg, #c9952b, #e8b84b);
  color: #0a0a18;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 4px;
}

/* ── Section header ── */
.mbe-bw-header p {
  color: #c9952b;
  font-style: italic;
}

/* ── Committee note banner ── */
.mbe-bw-committee-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(201,149,43,0.08), rgba(201,149,43,0.03));
  border: 1px solid rgba(201,149,43,0.25);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 28px;
}
.mbe-bw-committee-note span { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.mbe-bw-committee-note p { margin: 0; color: var(--mbe-text-muted, #8a899a); font-size: 14px; line-height: 1.6; }

/* ── Sub-tabs ── */
.mbe-bw-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--mbe-border, #1e1e3a);
  padding-bottom: 0;
}
.mbe-bw-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 10px 18px;
  cursor: pointer;
  color: var(--mbe-text-muted, #8a899a);
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  transition: color 0.2s, border-color 0.2s;
}
.mbe-bw-tab:hover { color: #c9952b; }
.mbe-bw-tab.active { color: #c9952b; border-bottom-color: #c9952b; }

/* ── Panels ── */
.mbe-bw-panel { display: none; }
.mbe-bw-panel.active { display: block; }

/* ── Loading state ── */
.mbe-bw-loading {
  text-align: center;
  padding: 48px 20px;
  color: var(--mbe-text-muted, #8a899a);
}
.mbe-bw-loading p { margin: 12px 0 0; font-size: 14px; font-style: italic; }

/* ── Today's Reading Banner ── */
.mbe-bw-today-reading {
  background: linear-gradient(135deg, #0f0f20, #13132a);
  border: 1px solid rgba(201,149,43,0.3);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.mbe-bw-today-reading__icon { font-size: 32px; flex-shrink: 0; }
.mbe-bw-today-reading__text { flex: 1; }
.mbe-bw-today-reading__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c9952b;
  margin: 0 0 4px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
}
.mbe-bw-today-reading__ref {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 2px;
}
.mbe-bw-today-reading__day {
  font-size: 12px;
  color: var(--mbe-text-muted, #8a899a);
  margin: 0;
}

/* ── Words grid (5 time-slot cards) ── */
.mbe-bw-words-grid {
  display: grid;
  gap: 20px;
}

/* ── Single Beautiful Word card ── */
.mbe-bw-card {
  background: linear-gradient(160deg, #0f0f22, #12102a);
  border: 1px solid #1e1e3a;
  border-left: 4px solid #c9952b;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
}
.mbe-bw-card:hover { border-left-color: #e8b84b; transform: translateX(2px); }
.mbe-bw-card--morning    { --bw-slot-color: #c9952b; }
.mbe-bw-card--midmorning { --bw-slot-color: #e8a82a; }
.mbe-bw-card--midday     { --bw-slot-color: #d4af37; }
.mbe-bw-card--evening    { --bw-slot-color: #b5860d; }
.mbe-bw-card--midnight   { --bw-slot-color: #8b6914; }
.mbe-bw-card { border-left-color: var(--bw-slot-color, #c9952b); }

.mbe-bw-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #1a1a30;
}
.mbe-bw-card__emoji { font-size: 22px; }
.mbe-bw-card__meta { flex: 1; }
.mbe-bw-card__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--bw-slot-color, #c9952b);
  margin: 0 0 2px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
}
.mbe-bw-card__time {
  font-size: 12px;
  color: var(--mbe-text-muted, #6a6980);
  margin: 0;
}
.mbe-bw-card__ref {
  font-size: 11px;
  color: #5a5480;
  font-style: italic;
}

.mbe-bw-card__body {
  padding: 20px 24px 24px;
  color: #d8d4f0;
  font-size: 15.5px;
  line-height: 1.85;
  white-space: pre-line;
}

/* Pending card (word not yet generated) */
.mbe-bw-card--pending {
  border-left-color: #2a2a4a;
  opacity: 0.6;
}
.mbe-bw-card--pending .mbe-bw-card__body {
  text-align: center;
  padding: 32px 24px;
  color: var(--mbe-text-muted, #6a6980);
  font-style: italic;
}

/* ── Empty state ── */
.mbe-bw-empty {
  text-align: center;
  padding: 60px 24px;
}
.mbe-bw-empty-icon { font-size: 56px; margin-bottom: 16px; }
.mbe-bw-empty h3 { color: #ffffff; margin: 0 0 10px; }
.mbe-bw-empty p { color: var(--mbe-text-muted, #8a899a); max-width: 420px; margin: 0 auto; font-size: 14px; line-height: 1.7; }

/* ── Life Story Form ── */
.mbe-bw-profile-intro {
  background: linear-gradient(135deg, #0e0e22, #141430);
  border: 1px solid #2a2a4a;
  border-radius: 12px;
  padding: 28px 28px 24px;
  margin-bottom: 32px;
  text-align: center;
}
.mbe-bw-profile-intro__icon { font-size: 42px; margin-bottom: 12px; }
.mbe-bw-profile-intro h3 { color: #c9952b; margin: 0 0 10px; font-size: 20px; }
.mbe-bw-profile-intro p { color: var(--mbe-text-muted, #8a899a); margin: 0; max-width: 540px; margin: 0 auto; line-height: 1.7; font-size: 14px; }

.mbe-bw-profile-form { display: grid; gap: 24px; }

.mbe-bw-field label {
  display: block;
  font-weight: 600;
  color: #c8c4e0;
  margin-bottom: 6px;
  font-size: 15px;
}
.mbe-bw-field__hint {
  color: var(--mbe-text-muted, #7a7890);
  font-size: 13px;
  margin: 0 0 10px;
  line-height: 1.6;
}
.mbe-bw-field textarea {
  width: 100%;
  background: #0e0e1e;
  border: 1px solid #2a2a42;
  border-radius: 8px;
  color: #ddd8f5;
  padding: 14px 16px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.65;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.mbe-bw-field textarea:focus {
  outline: none;
  border-color: #c9952b;
}
.mbe-bw-field--gold {
  background: linear-gradient(135deg, rgba(201,149,43,0.06), rgba(201,149,43,0.02));
  border: 1px solid rgba(201,149,43,0.2);
  border-radius: 10px;
  padding: 18px;
}
.mbe-bw-field--gold label { color: #c9952b; }

.mbe-bw-form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.mbe-btn--gold {
  background: linear-gradient(135deg, #c9952b, #e8b84b);
  color: #0c0c1a;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  font-family: inherit;
}
.mbe-btn--gold:hover { opacity: 0.9; transform: translateY(-1px); }
.mbe-btn--gold:disabled { opacity: 0.5; cursor: not-allowed; }

.mbe-btn--ghost {
  background: transparent;
  border: 1px solid #2a2a4a;
  color: #9a96b8;
  padding: 9px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.2s, color 0.2s;
}
.mbe-btn--ghost:hover { border-color: #c9952b; color: #c9952b; }
.mbe-btn--ghost:disabled { opacity: 0.4; cursor: not-allowed; }

.mbe-bw-profile-msg {
  font-size: 13px;
  color: #5ecb8a;
  font-style: italic;
}
.mbe-bw-profile-msg.error { color: #e05c6a; }

/* ── Archive ── */
.mbe-bw-archive-intro {
  color: var(--mbe-text-muted, #7a7890);
  font-size: 14px;
  margin-bottom: 24px;
  font-style: italic;
}
.mbe-bw-archive-list { display: grid; gap: 16px; }

.mbe-bw-archive-card {
  background: #0f0f1e;
  border: 1px solid #1a1a30;
  border-radius: 10px;
  overflow: hidden;
}
.mbe-bw-archive-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #13132a;
  border-bottom: 1px solid #1a1a30;
  cursor: pointer;
}
.mbe-bw-archive-card__header:hover { background: #161630; }
.mbe-bw-archive-card__slot {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c9952b;
  font-weight: 600;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.mbe-bw-archive-card__ref { font-size: 12px; color: #5a5480; font-style: italic; }
.mbe-bw-archive-card__date { margin-left: auto; font-size: 12px; color: #5a5480; }
.mbe-bw-archive-card__body {
  padding: 16px 18px;
  color: #ccc8e8;
  font-size: 14.5px;
  line-height: 1.8;
  white-space: pre-line;
  display: none;
}
.mbe-bw-archive-card.open .mbe-bw-archive-card__body { display: block; }

/* ── Archive grouped by day (v3.67.0) ── */
.mbe-bw-archive-count { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #b5860d; margin: 0 0 4px; font-weight: 600; }
.mbe-bw-archive-empty { color: #5a5480; font-style: italic; text-align: center; padding: 40px 0; }
.mbe-bw-archive-day { background: #0b0b18; border: 1px solid #1a1a30; border-radius: 12px; overflow: hidden; }
.mbe-bw-archive-day__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 14px 18px; cursor: pointer; user-select: none;
  background: linear-gradient(90deg, #14142c, #0f0f1e);
}
.mbe-bw-archive-day__head::before { content: '\25B8'; color: #c9952b; transition: transform .2s; }
.mbe-bw-archive-day.open .mbe-bw-archive-day__head::before { transform: rotate(90deg); }
.mbe-bw-archive-day__date { color: #efe7cf; font-weight: 600; font-size: 14.5px; }
.mbe-bw-archive-day__ref { color: #8d86b8; font-size: 12.5px; font-style: italic; }
.mbe-bw-archive-day__count { margin-left: auto; font-size: 11px; color: #c9952b; border: 1px solid #3a3050; border-radius: 20px; padding: 2px 9px; }
.mbe-bw-archive-day__words { display: none; padding: 12px; gap: 10px; }
.mbe-bw-archive-day.open .mbe-bw-archive-day__words { display: grid; }

/* ── Catch-up states on Today's Words (v3.67.0) ── */
.mbe-spinner--sm { width: 16px; height: 16px; border-width: 2px; margin: 0; display: inline-block; vertical-align: -3px; border-color: #3a3050; border-top-color: #c9952b; }
.mbe-bw-writing { color: #d4af37; font-style: normal; }
.mbe-bw-card--pending:has(.mbe-bw-writing) { opacity: 1; border-left-color: #c9952b; }
.mbe-bw-retry { margin-left: 8px; background: none; border: 1px solid #c9952b; color: #d4af37; border-radius: 16px; padding: 3px 12px; font-size: 12px; cursor: pointer; font-style: normal; }
.mbe-bw-retry:hover { background: #c9952b; color: #0b0b18; }

/* ── Archive pager ── */
.mbe-bw-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
  flex-wrap: wrap;
}
#bwArchivePageInfo { font-size: 13px; color: #5a5480; }

/* ── Reading Schedule ── */
.mbe-bw-schedule-intro { margin-bottom: 24px; }
.mbe-bw-schedule-intro h3 { color: #c9952b; margin: 0 0 8px; }
.mbe-bw-schedule-intro p { color: var(--mbe-text-muted, #7a7890); font-size: 14px; margin: 0; line-height: 1.6; }

.mbe-bw-schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.mbe-bw-schedule-item {
  background: #0f0f1e;
  border: 1px solid #1e1e38;
  border-radius: 8px;
  padding: 14px 16px;
  transition: border-color 0.2s;
}
.mbe-bw-schedule-item:hover { border-color: #c9952b; }
.mbe-bw-schedule-item--today {
  border-color: #c9952b;
  background: linear-gradient(135deg, rgba(201,149,43,0.1), #0f0f1e);
}
.mbe-bw-schedule-item__date {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5a5480;
  margin: 0 0 4px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.mbe-bw-schedule-item__today-tag {
  display: inline-block;
  background: #c9952b;
  color: #0a0a18;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.mbe-bw-schedule-item__book { color: #c8c4e0; font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.mbe-bw-schedule-item__chapter { color: var(--mbe-text-muted, #6a6880); font-size: 12px; margin: 0; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .mbe-bw-tabs { gap: 4px; }
  .mbe-bw-tab { padding: 8px 12px; font-size: 13px; }
  .mbe-bw-card__body { padding: 16px; font-size: 14.5px; }
  .mbe-bw-profile-intro { padding: 20px 16px; }
  .mbe-bw-field--gold { padding: 14px; }
  .mbe-bw-schedule-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .mbe-bw-today-reading { flex-direction: column; gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BAKERSFIELD GALLERY — landing section
   ════════════════════════════════════════════════════════════════════════════ */
.mbe-gsec {
  position: relative;
  padding: 90px 0 100px;
  background: linear-gradient(180deg, #faf8f4 0%, #f2efe7 100%);
  overflow: hidden;
}
.mbe-gsec__head { text-align: center; margin-bottom: 42px; }
.mbe-gsec__eyebrow {
  display: inline-block; padding: 6px 16px; border-radius: 20px;
  background: rgba(15,45,26,.08); color: var(--green-deep, #0f2d1a);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.mbe-gsec__title {
  margin: 16px 0 10px; font-size: clamp(28px, 4.4vw, 44px);
  color: var(--green-deep, #0f2d1a); font-weight: 700; line-height: 1.15;
}
.mbe-gsec__sub {
  margin: 0 auto; max-width: 620px; color: #5c6b60;
  font-size: 16px; line-height: 1.6;
}

/* ── Carousel (marquee) ──────────────────────────────────────────────────── */
.mbe-gsec__marquee {
  position: relative;
  /* Feather both edges so tiles enter and leave instead of being chopped */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mbe-gsec__track {
  display: flex; gap: 18px; width: max-content;
  animation: mbeGsecScroll var(--mbe-gsec-speed, 40s) linear infinite;
}
/* Track holds two identical passes, so -50% lands exactly on the seam */
@keyframes mbeGsecScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.mbe-gsec__marquee:hover .mbe-gsec__track { animation-play-state: paused; }
.mbe-gsec--carousel .mbe-gsec__tile { width: clamp(240px, 26vw, 340px); flex: 0 0 auto; }

/* ── Grid / masonry / mosaic ─────────────────────────────────────────────── */
.mbe-gsec__grid { display: grid; gap: 18px; }
.mbe-gsec--grid .mbe-gsec__grid    { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mbe-gsec--masonry .mbe-gsec__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mbe-gsec--masonry .mbe-gsec__tile:nth-child(3n+2) { margin-top: 30px; }
.mbe-gsec--mosaic .mbe-gsec__grid  { grid-template-columns: repeat(4, 1fr); }
.mbe-gsec--mosaic .mbe-gsec__tile:first-child { grid-column: span 2; grid-row: span 2; }

/* ── Tiles ───────────────────────────────────────────────────────────────── */
.mbe-gsec__tile {
  position: relative; margin: 0; border-radius: 12px; overflow: hidden;
  aspect-ratio: 4 / 3; background: #e6e2d8;
  box-shadow: 0 4px 16px rgba(15,45,26,.13);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s;
}
.mbe-gsec--mosaic .mbe-gsec__tile:first-child { aspect-ratio: auto; }
.mbe-gsec__tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .5s;
}
.mbe-gsec__tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 14px;
  background: linear-gradient(transparent, rgba(15,45,26,.90));
  color: #fff; font-size: 14px;
  transform: translateY(101%); opacity: 0;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s;
}
.mbe-gsec__tile:hover { box-shadow: 0 14px 34px rgba(15,45,26,.26); }

/* Hover effects (admin: Hover Effect) */
.mbe-gsec--hover-zoom-caption .mbe-gsec__tile:hover img,
.mbe-gsec--hover-zoom .mbe-gsec__tile:hover img { transform: scale(1.09); }
.mbe-gsec--hover-zoom-caption .mbe-gsec__tile:hover figcaption { transform: translateY(0); opacity: 1; }
.mbe-gsec--hover-grayscale .mbe-gsec__tile img { filter: grayscale(1); }
.mbe-gsec--hover-grayscale .mbe-gsec__tile:hover img { filter: grayscale(0); transform: scale(1.05); }
.mbe-gsec--hover-tilt .mbe-gsec__tile { transform-style: preserve-3d; }
.mbe-gsec--hover-tilt .mbe-gsec__tile:hover { transform: perspective(900px) rotateX(5deg) rotateY(-5deg) scale(1.04); }

/* Light sweep */
.mbe-gsec__shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 120% 0;
}
.mbe-gsec--hover-shine .mbe-gsec__tile:hover .mbe-gsec__shine {
  opacity: 1; animation: mbeShine .9s ease-out;
}
@keyframes mbeShine { from { background-position: 120% 0; } to { background-position: -60% 0; } }

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.mbe-gsec__cta { text-align: center; margin-top: 46px; }
.mbe-gsec__btn { display: inline-flex; align-items: center; gap: 10px; }
.mbe-gsec__btn-arrow { transition: transform .3s; }
.mbe-gsec__btn:hover .mbe-gsec__btn-arrow { transform: translateX(6px); }

@media (max-width: 768px) {
  .mbe-gsec { padding: 62px 0 70px; }
  .mbe-gsec--mosaic .mbe-gsec__grid { grid-template-columns: repeat(2, 1fr); }
  .mbe-gsec--mosaic .mbe-gsec__tile:first-child { grid-column: span 2; grid-row: auto; }
  .mbe-gsec--masonry .mbe-gsec__tile:nth-child(3n+2) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mbe-gsec__track { animation: none; }
  .mbe-gsec__tile, .mbe-gsec__tile img { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   GALLERY PAGE
   ════════════════════════════════════════════════════════════════════════════ */
.mbe-gallery-page { background: #faf8f4; min-height: 100vh; padding-bottom: 70px; }

.mbe-gp__head { position: relative; padding: 96px 20px 70px; text-align: center; overflow: hidden; }
.mbe-gp__head-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(232,198,106,.20), transparent 55%),
    linear-gradient(160deg, #0f2d1a 0%, #17422a 55%, #1d5334 100%);
}
.mbe-gp__head-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 22px 22px;
}
.mbe-gp__head-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.mbe-gp__eyebrow {
  display: inline-block; padding: 6px 16px; border-radius: 20px;
  background: rgba(232,198,106,.16); color: #e8c66a;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.mbe-gp__title {
  margin: 18px 0 12px; color: #fff; font-weight: 700; line-height: 1.1;
  font-size: clamp(32px, 5.6vw, 58px);
}
.mbe-gp__sub { margin: 0 auto; max-width: 600px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.6; }
.mbe-gp__meta {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 24px; color: rgba(255,255,255,.66); font-size: 13px;
}
.mbe-gp__meta strong { color: #e8c66a; }
.mbe-gp__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); }

/* ── Filters ─────────────────────────────────────────────────────────────── */
.mbe-gp__filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 1180px; margin: -28px auto 34px; padding: 0 20px;
  position: relative; z-index: 2;
}
.mbe-gp__filter {
  padding: 10px 20px; border: 1px solid #ddd6c6; border-radius: 24px;
  background: #fff; color: #3c4a40; cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: inherit;
  box-shadow: 0 2px 8px rgba(15,45,26,.09);
  transition: background .25s, color .25s, transform .25s, border-color .25s;
}
.mbe-gp__filter span {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border-radius: 10px; background: rgba(15,45,26,.09);
  font-size: 11px; font-weight: 700;
}
.mbe-gp__filter:hover { transform: translateY(-2px); border-color: #0f2d1a; }
.mbe-gp__filter.active { background: #0f2d1a; color: #fff; border-color: #0f2d1a; }
.mbe-gp__filter.active span { background: rgba(232,198,106,.28); color: #e8c66a; }

/* ── Grid ────────────────────────────────────────────────────────────────── */
.mbe-gp__grid {
  display: grid; gap: 18px; max-width: 1180px;
  margin: 0 auto; padding: 0 20px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 220px;
}
.mbe-gp__tile {
  position: relative; margin: 0; border-radius: 14px; overflow: hidden;
  background: #e6e2d8; cursor: pointer; outline: none;
  box-shadow: 0 4px 16px rgba(15,45,26,.13);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s, opacity .4s;
}
.mbe-gp__tile--tall { grid-row: span 2; }
.mbe-gp__tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .5s;
}
.mbe-gp__tile:hover, .mbe-gp__tile:focus-visible {
  box-shadow: 0 16px 40px rgba(15,45,26,.28);
}
.mbe-gp__tile:focus-visible { outline: 3px solid #e8c66a; outline-offset: 3px; }
.mbe-gp__tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 15px;
  background: linear-gradient(transparent, rgba(15,45,26,.92));
  color: #fff; transform: translateY(101%); opacity: 0;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s;
}
.mbe-gp__tile figcaption strong { display: block; font-size: 15px; margin-bottom: 3px; }
.mbe-gp__tile figcaption span { font-size: 13px; color: rgba(255,255,255,.80); line-height: 1.45; }
.mbe-gp__tile-zoom {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: #0f2d1a; font-size: 15px;
  transform: scale(0) rotate(-45deg); transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.mbe-gp__tile:hover .mbe-gp__tile-zoom { transform: scale(1) rotate(0); }
.mbe-gp__tile-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 120% 0;
}

/* Hover effects mirror the landing section */
.mbe-gp--hover-zoom-caption .mbe-gp__tile:hover img,
.mbe-gp--hover-zoom .mbe-gp__tile:hover img { transform: scale(1.09); }
.mbe-gp--hover-zoom-caption .mbe-gp__tile:hover figcaption,
.mbe-gp--hover-zoom-caption .mbe-gp__tile:focus-visible figcaption { transform: translateY(0); opacity: 1; }
.mbe-gp--hover-grayscale .mbe-gp__tile img { filter: grayscale(1); }
.mbe-gp--hover-grayscale .mbe-gp__tile:hover img { filter: grayscale(0); transform: scale(1.05); }
.mbe-gp--hover-tilt .mbe-gp__tile:hover { transform: perspective(900px) rotateX(5deg) rotateY(-5deg) scale(1.04); }
.mbe-gp--hover-shine .mbe-gp__tile:hover .mbe-gp__tile-shine { opacity: 1; animation: mbeShine .9s ease-out; }

/* Filter transition */
.mbe-gp__tile.mbe-hide {
  opacity: 0; transform: scale(.86); pointer-events: none;
  position: absolute; visibility: hidden;
}

/* ── Scroll reveal (admin: Scroll Reveal) ────────────────────────────────── */
.mbe-gp--reveal-fade-up .mbe-gp__tile,
.mbe-gp--reveal-fade    .mbe-gp__tile,
.mbe-gp--reveal-scale   .mbe-gp__tile,
.mbe-gp--reveal-flip-in .mbe-gp__tile { opacity: 0; }
.mbe-gp--reveal-fade-up .mbe-gp__tile { transform: translateY(38px); }
.mbe-gp--reveal-scale   .mbe-gp__tile { transform: scale(.90); }
.mbe-gp--reveal-flip-in .mbe-gp__tile { transform: perspective(900px) rotateX(-16deg); }
.mbe-gp__tile.mbe-in { opacity: 1 !important; transform: none !important; }

.mbe-gp__none, .mbe-gp__empty { text-align: center; padding: 70px 20px; color: #6a7a6f; }
.mbe-gp__empty-icon { font-size: 54px; margin-bottom: 12px; }
.mbe-gp__empty h3 { color: #0f2d1a; margin: 0 0 8px; font-size: 22px; }
.mbe-gp__foot { text-align: center; margin-top: 56px; }

@media (max-width: 768px) {
  .mbe-gp__head { padding: 64px 18px 52px; }
  .mbe-gp__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 150px; gap: 12px; }
  .mbe-gp__filters { margin-top: -20px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════════════════════════════════════════════ */
.mbe-lb {
  position: fixed; inset: 0; z-index: 999999;
  display: none; align-items: center; justify-content: center;
}
.mbe-lb.open { display: flex; }
.mbe-lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(8,18,12,.96); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s;
}
.mbe-lb.shown .mbe-lb__backdrop { opacity: 1; }

.mbe-lb__stage {
  position: relative; z-index: 2;
  width: 92vw; height: 76vh;
  display: flex; align-items: center; justify-content: center;
}
.mbe-lb__img {
  position: absolute; max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1), filter .45s;
}
.mbe-lb__img.active { opacity: 1; }

/* Transition styles (admin: Lightbox Transition). The .enter class is applied
   to the incoming image for one frame, then removed to animate to rest. */
.mbe-lb[data-transition="fade-scale"] .mbe-lb__img.enter { transform: scale(.90); }
.mbe-lb[data-transition="slide"] .mbe-lb__img.enter      { transform: translateX(9%); }
.mbe-lb[data-transition="slide"] .mbe-lb__img.leave      { transform: translateX(-9%); }
.mbe-lb[data-transition="slide"].rev .mbe-lb__img.enter  { transform: translateX(-9%); }
.mbe-lb[data-transition="slide"].rev .mbe-lb__img.leave  { transform: translateX(9%); }
.mbe-lb[data-transition="flip"] .mbe-lb__img.enter       { transform: perspective(1400px) rotateY(28deg); }
.mbe-lb[data-transition="flip"] .mbe-lb__img.leave       { transform: perspective(1400px) rotateY(-28deg); }
.mbe-lb[data-transition="zoom"] .mbe-lb__img.enter       { transform: scale(1.30); }
.mbe-lb[data-transition="zoom"] .mbe-lb__img.leave       { transform: scale(.80); }
.mbe-lb[data-transition="blur"] .mbe-lb__img.enter       { filter: blur(20px); transform: scale(1.06); }
.mbe-lb[data-transition="blur"] .mbe-lb__img.leave       { filter: blur(20px); }

.mbe-lb__spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.20); border-top-color: #e8c66a;
  animation: mbeSpin .8s linear infinite; opacity: 0; transition: opacity .2s;
}
.mbe-lb__spinner.on { opacity: 1; }
@keyframes mbeSpin { to { transform: rotate(360deg); } }

.mbe-lb__close, .mbe-lb__nav {
  position: absolute; z-index: 5;
  border: 0; background: rgba(255,255,255,.10); color: #fff;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s;
}
.mbe-lb__close { top: 20px; right: 20px; width: 46px; height: 46px; font-size: 19px; }
.mbe-lb__nav { top: 50%; margin-top: -30px; width: 60px; height: 60px; font-size: 36px; line-height: 1; }
.mbe-lb__nav--prev { left: 22px; }
.mbe-lb__nav--next { right: 22px; }
.mbe-lb__close:hover, .mbe-lb__nav:hover { background: rgba(232,198,106,.90); color: #0f2d1a; transform: scale(1.09); }

.mbe-lb__bar {
  position: absolute; left: 0; right: 0; bottom: 96px; z-index: 4;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; padding: 0 26px; color: #fff;
}
.mbe-lb__cap { max-width: 62%; }
.mbe-lb__cap strong { display: block; font-size: 17px; margin-bottom: 4px; color: #fff; }
.mbe-lb__cap span { font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.5; }
.mbe-lb__tools { display: flex; align-items: center; gap: 12px; }
.mbe-lb__count { font-size: 13px; color: rgba(255,255,255,.68); letter-spacing: .06em; }
.mbe-lb__tool {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.10); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; text-decoration: none; transition: background .25s;
}
.mbe-lb__tool:hover { background: rgba(232,198,106,.90); color: #0f2d1a; }

.mbe-lb__strip {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4;
  display: flex; gap: 9px; padding: 0 26px;
  overflow-x: auto; scrollbar-width: none;
}
.mbe-lb__strip::-webkit-scrollbar { display: none; }
.mbe-lb__thumb {
  flex: 0 0 auto; width: 74px; height: 54px; border-radius: 5px;
  object-fit: cover; cursor: pointer; opacity: .40;
  border: 2px solid transparent;
  transition: opacity .25s, border-color .25s, transform .25s;
}
.mbe-lb__thumb:hover { opacity: .85; transform: translateY(-2px); }
.mbe-lb__thumb.active { opacity: 1; border-color: #e8c66a; }

@media (max-width: 768px) {
  .mbe-lb__stage { width: 96vw; height: 62vh; }
  .mbe-lb__nav { width: 44px; height: 44px; font-size: 27px; margin-top: -22px; }
  .mbe-lb__nav--prev { left: 8px; }
  .mbe-lb__nav--next { right: 8px; }
  .mbe-lb__bar { bottom: 84px; padding: 0 14px; flex-direction: column; align-items: flex-start; }
  .mbe-lb__cap { max-width: 100%; }
  .mbe-lb__strip { padding: 0 14px; }
  .mbe-lb__thumb { width: 58px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .mbe-lb__img, .mbe-gp__tile, .mbe-gp__tile img { transition: opacity .2s linear !important; }
  .mbe-gp__tile { opacity: 1 !important; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   GALLERY HERO — animated word patterns
   Sits between the gradient background and the title. z-index 0 keeps it below
   .mbe-gp__head-inner (z-index 1), and pointer-events:none means it can never
   swallow a click on the heading or a link.
   ════════════════════════════════════════════════════════════════════════════ */
.mbe-ha {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  opacity: var(--ha-op, .13);
  /* Fade the layer out toward the bottom so it never crowds the sub-heading */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}

/* ── Shared word styling ─────────────────────────────────────────────────── */
.mbe-ha__word {
  position: absolute;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--ha-size, 20px);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}

/* Colour options */
.mbe-ha--gold  .mbe-ha__word, .mbe-ha--gold  .mbe-ha__star { color: #e8c66a; }
.mbe-ha--white .mbe-ha__word, .mbe-ha--white .mbe-ha__star { color: #ffffff; }
.mbe-ha--mint  .mbe-ha__word, .mbe-ha--mint  .mbe-ha__star { color: #b7e4c7; }
.mbe-ha--mixed .mbe-ha__word:nth-child(odd)  { color: #e8c66a; }
.mbe-ha--mixed .mbe-ha__word:nth-child(even) { color: #ffffff; }
.mbe-ha--mixed .mbe-ha__star { color: #e8c66a; }

/* Style options */
.mbe-ha--outline .mbe-ha__word {
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
}
/* -webkit-text-stroke needs a real colour on the element to stroke with, so
   re-assert the palette colour via the stroke property itself. */
.mbe-ha--outline.mbe-ha--gold  .mbe-ha__word { -webkit-text-stroke-color: #e8c66a; }
.mbe-ha--outline.mbe-ha--white .mbe-ha__word { -webkit-text-stroke-color: #ffffff; }
.mbe-ha--outline.mbe-ha--mint  .mbe-ha__word { -webkit-text-stroke-color: #b7e4c7; }
.mbe-ha--outline.mbe-ha--mixed .mbe-ha__word:nth-child(odd)  { -webkit-text-stroke-color: #e8c66a; }
.mbe-ha--outline.mbe-ha--mixed .mbe-ha__word:nth-child(even) { -webkit-text-stroke-color: #ffffff; }
.mbe-ha--blur .mbe-ha__word { filter: blur(1.5px); }

/* ── Pattern: Falling ────────────────────────────────────────────────────── */
@keyframes mbeHaFall {
  from { transform: translate3d(0, -130%, 0) rotate(var(--ha-rot, 0deg)); }
  to   { transform: translate3d(0, 780%, 0)  rotate(var(--ha-rot, 0deg)); }
}
.mbe-ha--falling .mbe-ha__word {
  left: var(--ha-x, 50%); top: 0;
  /* --ha-dur is a per-word multiplier (0.7–1.5) so words fall at varied speeds */
  animation: mbeHaFall calc(var(--ha-speed, 24s) * var(--ha-dur, 1)) linear infinite;
  animation-delay: var(--ha-delay, 0s);
}

/* ── Pattern: Rising ─────────────────────────────────────────────────────── */
@keyframes mbeHaRise {
  from { transform: translate3d(0, 0, 0) rotate(var(--ha-rot, 0deg)); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  to   { transform: translate3d(0, -820%, 0) rotate(var(--ha-rot, 0deg)); opacity: 0; }
}
.mbe-ha--rising .mbe-ha__word {
  left: var(--ha-x, 50%); bottom: 0;
  animation: mbeHaRise calc(var(--ha-speed, 24s) * var(--ha-dur, 1)) linear infinite;
  animation-delay: var(--ha-delay, 0s);
}

/* ── Pattern: Side Drift ─────────────────────────────────────────────────── */
@keyframes mbeHaDrift {
  from { transform: translate3d(-40vw, 0, 0) rotate(var(--ha-rot, 0deg)); }
  to   { transform: translate3d(140vw, 0, 0) rotate(var(--ha-rot, 0deg)); }
}
.mbe-ha--drift .mbe-ha__word {
  left: 0; top: var(--ha-y, 50%);
  animation: mbeHaDrift calc(var(--ha-speed, 24s) * var(--ha-dur, 1)) linear infinite;
  animation-delay: var(--ha-delay, 0s);
}

/* ── Pattern: Pulse Glow ─────────────────────────────────────────────────── */
@keyframes mbeHaPulse {
  0%, 100% { opacity: 0;   transform: scale(.86) rotate(var(--ha-rot, 0deg)); }
  50%      { opacity: 1;   transform: scale(1)   rotate(var(--ha-rot, 0deg)); }
}
.mbe-ha--pulse .mbe-ha__word {
  left: var(--ha-x, 50%); top: var(--ha-y, 50%);
  animation: mbeHaPulse calc(var(--ha-speed, 24s) * var(--ha-dur, 1) * .55) ease-in-out infinite;
  animation-delay: var(--ha-delay, 0s);
}

/* ── Pattern: Orbit ──────────────────────────────────────────────────────── */
.mbe-ha__orbit {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  animation: mbeHaSpin var(--ha-speed, 24s) linear infinite;
}
@keyframes mbeHaSpin { to { transform: rotate(360deg); } }
.mbe-ha--orbit .mbe-ha__word {
  left: 0; top: 0;
  /* Rotate out to the radius, then counter-rotate so text stays upright */
  transform:
    rotate(var(--ha-angle, 0deg))
    translateX(var(--ha-radius, 220px))
    rotate(calc(var(--ha-angle, 0deg) * -1));
}

/* ── Pattern: Marquee Bands ──────────────────────────────────────────────── */
.mbe-ha--bands { display: flex; flex-direction: column; justify-content: center; gap: 4vh; }
.mbe-ha__band { overflow: hidden; white-space: nowrap; }
.mbe-ha__band-track {
  display: inline-flex; gap: 42px; width: max-content;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(26px, 4.4vw, 58px);
  font-weight: 700; letter-spacing: .03em;
  animation: mbeHaBand var(--ha-speed, 24s) linear infinite;
}
/* Odd rows run the other way, which is what makes the pattern read as woven */
.mbe-ha__band:nth-child(even) .mbe-ha__band-track { animation-direction: reverse; }
/* Stagger each row so they don't align into a visible column */
.mbe-ha__band-track { animation-delay: calc(var(--ha-row, 0) * -2.5s); }
@keyframes mbeHaBand {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.mbe-ha--bands.mbe-ha--gold  .mbe-ha__band-track { color: #e8c66a; }
.mbe-ha--bands.mbe-ha--white .mbe-ha__band-track { color: #fff; }
.mbe-ha--bands.mbe-ha--mint  .mbe-ha__band-track { color: #b7e4c7; }
.mbe-ha--bands.mbe-ha--mixed .mbe-ha__band:nth-child(odd)  .mbe-ha__band-track { color: #e8c66a; }
.mbe-ha--bands.mbe-ha--mixed .mbe-ha__band:nth-child(even) .mbe-ha__band-track { color: #fff; }
.mbe-ha--bands.mbe-ha--outline .mbe-ha__band-track {
  color: transparent; -webkit-text-stroke: 1px #e8c66a;
}
.mbe-ha--bands.mbe-ha--outline.mbe-ha--white .mbe-ha__band-track { -webkit-text-stroke-color: #fff; }
.mbe-ha--bands.mbe-ha--outline.mbe-ha--mint  .mbe-ha__band-track { -webkit-text-stroke-color: #b7e4c7; }
.mbe-ha--bands.mbe-ha--blur .mbe-ha__band-track { filter: blur(1.5px); }

/* ── Pattern: Constellation ──────────────────────────────────────────────── */
.mbe-ha__star {
  position: absolute;
  left: var(--ha-x, 50%); top: var(--ha-y, 50%);
  width: var(--ha-size, 3px); height: var(--ha-size, 3px);
  border-radius: 50%; background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: mbeHaTwinkle var(--ha-dur, 5s) ease-in-out infinite;
  animation-delay: var(--ha-delay, 0s);
}
@keyframes mbeHaTwinkle {
  0%, 100% { opacity: .15; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

/* ── Pattern: Aurora ─────────────────────────────────────────────────────── */
.mbe-ha--aurora { mask-image: none; -webkit-mask-image: none; }
.mbe-ha__blob {
  position: absolute; border-radius: 50%;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  filter: blur(90px);
  animation: mbeHaBlob calc(var(--ha-speed, 24s) * 1.6) ease-in-out infinite alternate;
  animation-delay: calc(var(--ha-i, 0) * -6s);
}
.mbe-ha__blob:nth-child(1) { left: -8%;  top: -30%; }
.mbe-ha__blob:nth-child(2) { right: -10%; top: -18%; }
.mbe-ha__blob:nth-child(3) { left: 34%;  bottom: -46%; }
.mbe-ha--aurora.mbe-ha--gold  .mbe-ha__blob { background: #e8c66a; }
.mbe-ha--aurora.mbe-ha--white .mbe-ha__blob { background: #ffffff; }
.mbe-ha--aurora.mbe-ha--mint  .mbe-ha__blob { background: #7fd1a4; }
.mbe-ha--aurora.mbe-ha--mixed .mbe-ha__blob:nth-child(1) { background: #e8c66a; }
.mbe-ha--aurora.mbe-ha--mixed .mbe-ha__blob:nth-child(2) { background: #7fd1a4; }
.mbe-ha--aurora.mbe-ha--mixed .mbe-ha__blob:nth-child(3) { background: #ffffff; }
@keyframes mbeHaBlob {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 9%, 0) scale(1.22); }
}

/* ── Responsive + accessibility ──────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Fewer words fit on a phone, so thin the field out rather than let it clutter */
  .mbe-ha--falling .mbe-ha__word:nth-child(n+11),
  .mbe-ha--rising  .mbe-ha__word:nth-child(n+11),
  .mbe-ha--drift   .mbe-ha__word:nth-child(n+9),
  .mbe-ha--pulse   .mbe-ha__word:nth-child(n+11) { display: none; }
  .mbe-ha__band:nth-child(n+4) { display: none; }
  .mbe-ha__blob { filter: blur(60px); }
}
@media (prefers-reduced-motion: reduce) {
  .mbe-ha__word, .mbe-ha__star, .mbe-ha__band-track,
  .mbe-ha__orbit, .mbe-ha__blob {
    animation: none !important;
  }
  /* Falling/rising words are parked off-screen by their start frame, so with
     the animation removed they must be pulled back into view. */
  .mbe-ha--falling .mbe-ha__word,
  .mbe-ha--rising  .mbe-ha__word {
    top: var(--ha-y, 40%); bottom: auto;
    transform: rotate(var(--ha-rot, 0deg));
  }
  .mbe-ha--drift .mbe-ha__word { left: var(--ha-x, 40%); transform: rotate(var(--ha-rot, 0deg)); }
  .mbe-ha--pulse .mbe-ha__word { opacity: 1; }
}

/* ── Auto pattern cycling ────────────────────────────────────────────────── */
.mbe-ha__layer {
  position: absolute; inset: 0;
  /* Crossfade between patterns. Matches the 1200ms swap delay in main.js. */
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.mbe-ha__layer--in { opacity: 1; }
/* The layer carries the pattern class, so flex-based patterns need it here too */
.mbe-ha__layer.mbe-ha--bands { display: flex; flex-direction: column; justify-content: center; gap: 4vh; }


/* ═══════════════════════════════════════════════════════════════════════════
   AI DEVOTIONAL REFLECTION — Rich Card Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer wrap */
.mbe-devotional-card-wrap {
  margin: 24px 0;
  animation: mbeDevFadeIn .5s ease both;
}
@keyframes mbeDevFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Main card */
.mbe-dev-card {
  background: linear-gradient(160deg, #0f1a12 0%, #0d1f15 60%, #0b1810 100%);
  border: 1px solid rgba(90,154,106,.28);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(90,154,106,.08);
}

/* Top bar */
.mbe-dev-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  background: rgba(255,255,255,.025);
  border-bottom: 1px solid rgba(90,154,106,.18);
  gap: 12px;
  flex-wrap: wrap;
}
.mbe-dev-topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mbe-dev-topbar__icon { font-size: 26px; line-height: 1; }
.mbe-dev-topbar__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #e8f5e9;
  margin: 0 0 2px;
}
.mbe-dev-topbar__ref {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #5a9a6a;
  letter-spacing: .5px;
}

/* Loading state */
.mbe-devotional-loading { padding: 60px 24px; }
.mbe-dev-loading-inner {
  text-align: center;
  color: #7ab888;
}
.mbe-dev-pulse {
  font-size: 36px;
  color: #5a9a6a;
  animation: mbeDevPulse 1.6s ease-in-out infinite;
  margin-bottom: 16px;
}
@keyframes mbeDevPulse {
  0%,100% { opacity: .3; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1.15); }
}
.mbe-dev-loading-inner p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  color: #a8d4b0;
  margin: 0 0 6px;
}
.mbe-dev-loading-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #4a7a58;
}

/* ── Devotional Body ─────────────────────────────────────────────────────── */

/* Header section inside body */
.mbe-dev-header {
  text-align: center;
  padding: 32px 28px 16px;
}
.mbe-dev-star-row {
  font-size: 10px;
  letter-spacing: 8px;
  color: #5a9a6a;
  opacity: .6;
  margin-bottom: 14px;
}
.mbe-dev-greeting {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: #7ab888;
  letter-spacing: .5px;
}
.mbe-dev-greeting strong { color: #c8e6c9; }

/* Reference pill */
.mbe-dev-ref-pill {
  display: block;
  text-align: center;
  margin: 0 28px 24px;
}
.mbe-dev-ref-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(90,154,106,.12);
  border: 1px solid rgba(90,154,106,.35);
  border-radius: 24px;
  padding: 6px 20px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #81c784;
  letter-spacing: .5px;
  margin: 0 auto 24px;
  display: table; /* centred block */
}

/* Profile nudge */
.mbe-dev-nudge {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(201,149,43,.07);
  border: 1px solid rgba(201,149,43,.25);
  border-left: 3px solid #c9952b;
  border-radius: 10px;
  margin: 0 28px 24px;
  padding: 16px 20px;
}
.mbe-dev-nudge__icon { font-size: 24px; flex-shrink: 0; line-height: 1.3; }
.mbe-dev-nudge strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: #e0b040;
  display: block;
  margin-bottom: 5px;
}
.mbe-dev-nudge p {
  font-size: 13px;
  color: #9a8a60;
  line-height: 1.65;
  margin: 0 0 12px;
}

/* Gold button variant */
.mbe-btn--gold {
  background: linear-gradient(135deg, #b8820a, #e0b030, #c9952b) !important;
  color: #07070f !important;
  font-weight: 700 !important;
  border: none !important;
}
.mbe-btn--gold:hover { filter: brightness(1.1); }

/* Devotional text */
.mbe-dev-text {
  padding: 0 32px 8px;
}
.mbe-dev-para {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.9;
  color: #d4edda;
  margin: 0 0 20px;
  text-align: justify;
}
.mbe-dev-para--first { margin-top: 0; }

/* Drop-cap */
.mbe-dev-dropcap {
  float: left;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 64px;
  font-weight: 600;
  line-height: .78;
  color: #5a9a6a;
  margin: 4px 10px 0 0;
  text-shadow: 0 2px 12px rgba(90,154,106,.4);
}

/* Section divider */
.mbe-dev-divider {
  text-align: center;
  font-size: 10px;
  letter-spacing: 8px;
  color: #3a6a48;
  padding: 4px 0 24px;
}

/* Reflection prompt */
.mbe-dev-reflect {
  margin: 0 28px 24px;
  background: rgba(90,154,106,.06);
  border: 1px solid rgba(90,154,106,.18);
  border-radius: 10px;
  padding: 18px 22px;
}
.mbe-dev-reflect__label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #5a9a6a;
  margin-bottom: 8px;
}
.mbe-dev-reflect p {
  font-family: Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: #7aaa88;
  line-height: 1.75;
  margin: 0;
}

/* Email sent chip */
.mbe-dev-email-chip {
  text-align: center;
  margin: 0 28px 20px;
  background: rgba(90,154,106,.1);
  border: 1px solid rgba(90,154,106,.25);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #81c784;
  letter-spacing: .3px;
}

/* Provider label */
.mbe-dev-provider {
  text-align: right;
  padding: 0 28px 20px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  color: #3a5a42;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Error state */
.mbe-dev-error {
  text-align: center;
  padding: 40px 28px;
  color: #a07070;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

/* ── AI badge variants ────────────────────────────────────────────────────── */
.mbe-ai-badge {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(90,154,106,.15);
  border: 1px solid rgba(90,154,106,.3);
  border-radius: 20px;
  padding: 4px 12px;
  color: #81c784;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 600px) {
  .mbe-dev-topbar { padding: 16px 18px; }
  .mbe-dev-text { padding: 0 18px 8px; }
  .mbe-dev-header { padding: 24px 18px 12px; }
  .mbe-dev-nudge,
  .mbe-dev-reflect,
  .mbe-dev-email-chip { margin-left: 18px; margin-right: 18px; }
  .mbe-dev-para { font-size: 17px; }
  .mbe-dev-dropcap { font-size: 52px; }
}

/* -- Story Nudge Alert Banner -- */
.mbe-story-alert {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: linear-gradient(135deg, #fffbea 0%, #fff3c0 100%);
  border: 1.5px solid #e8c22a;
  border-left: 5px solid #c9952b;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 4px;
  animation: mbeDevFadeIn .35s ease both;
  box-shadow: 0 2px 12px rgba(201,149,43,.14);
}
.mbe-story-alert--empty {
  background: linear-gradient(135deg, #fffbea 0%, #fff3c0 100%);
  border-color: #e8c22a;
  border-left-color: #c9952b;
}
.mbe-story-alert--partial {
  background: linear-gradient(135deg, #f0fff4 0%, #e4f5ea 100%);
  border-color: #5a9a6a;
  border-left-color: #2d7a4a;
  box-shadow: 0 2px 12px rgba(45,122,74,.12);
}
.mbe-story-alert__icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1.1;
  margin-top: 1px;
}
.mbe-story-alert__body { flex: 1; min-width: 0; }
.mbe-story-alert__body strong {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #7a5200;
  margin-bottom: 6px;
  line-height: 1.4;
}
.mbe-story-alert--partial .mbe-story-alert__body strong { color: #0f4a24; }
.mbe-story-alert__body p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: #7a6010;
  line-height: 1.65;
  margin: 0 0 14px;
}
.mbe-story-alert--partial .mbe-story-alert__body p { color: #1e4a2e; }
.mbe-story-alert__btn { margin-top: 0; }
.mbe-btn--green {
  background: linear-gradient(135deg, #2d7a4a, #1a5a30);
  color: #fff;
  border: none;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(45,122,74,.25);
  transition: opacity .2s, transform .15s;
}
.mbe-btn--green:hover { opacity: .88; transform: translateY(-1px); }
@media (max-width: 600px) {
  .mbe-story-alert { flex-direction: column; gap: 10px; padding: 14px 16px; }
  .mbe-story-alert__icon { font-size: 24px; }
  .mbe-story-alert__body strong { font-size: 13px; }
}

/* ══ VIDEO SECTION ═══════════════════════════════════════════════════════════ */
.mbe-videos {
  padding: 80px 0;
  background: #f9f7f3;
}
.mbe-videos__intro {
  text-align: center;
  color: #555;
  max-width: 600px;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 1.7;
}
.mbe-videos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}
.mbe-video__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mbe-video__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 30px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mbe-video__frame iframe,
.mbe-video__frame video {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
}
.mbe-video__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px;
}
.mbe-video__label {
  font-size: 14px;
  color: #444;
  text-align: center;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 600px) {
  .mbe-videos { padding: 48px 0; }
  .mbe-videos__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Video tap-to-activate overlay (prevents iframe eating mobile scroll) ── */
.mbe-video__frame--activate { position: relative; }

/* By default on mobile, iframe is pointer-events:none until activated */
.mbe-video__embed-hold { width: 100%; height: 100%; }
.mbe-video__embed-hold iframe,
.mbe-video__embed-hold video { pointer-events: none; }

/* Once activated, iframe gets pointer events */
.mbe-video__frame--activate.mbe-active .mbe-video__embed-hold iframe,
.mbe-video__frame--activate.mbe-active .mbe-video__embed-hold video {
  pointer-events: auto;
}

/* Tap overlay — always shown on touch, hidden on desktop after activation */
.mbe-video__tap-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(10, 30, 15, 0.55);
  cursor: pointer;
  border-radius: 10px;
  transition: opacity 0.25s;
}
.mbe-video__frame--activate.mbe-active .mbe-video__tap-cover {
  opacity: 0;
  pointer-events: none;
}
.mbe-video__tap-play {
  width: 56px; height: 56px;
  background: var(--gold-rich, #c49a1e);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  padding-left: 4px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  transition: transform 0.15s;
}
.mbe-video__tap-cover:hover .mbe-video__tap-play { transform: scale(1.1); }
.mbe-video__tap-hint {
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
}

/* On large screens — hide the overlay so mouse users click normally */
@media (hover: hover) and (pointer: fine) {
  .mbe-video__tap-cover { display: none; }
  .mbe-video__embed-hold iframe,
  .mbe-video__embed-hold video { pointer-events: auto; }
}

/* ══ MEETING ALERT BANNER ════════════════════════════════════════════════════ */
#mbe-meeting-banner {
  margin: 0 0 20px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(13,71,161,.28);
  animation: mbeMeetingSlideIn 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes mbeMeetingSlideIn {
  from { opacity:0; transform:translateY(-20px) scale(.98); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
#mbe-mb-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(135deg, #0a1628 0%, #1a2d5a 45%, #0a2044 100%);
  color: #fff;
  border-left: 6px solid #42a5f5;
  position: relative;
}
#mbe-mb-inner::after {
  content:'';
  position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M20 20h20v20H20zM0 0h20v20H0z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
#mbe-mb-icon {
  font-size: 28px;
  animation: mbePulse 1.4s infinite;
  flex-shrink: 0;
  margin-top: 2px;
}
#mbe-mb-body { flex: 1; min-width: 0; position:relative; z-index:1; }
#mbe-mb-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 4px;
  letter-spacing: .2px;
}
#mbe-mb-sub {
  font-size: 12.5px;
  opacity: .8;
  line-height: 1.5;
}
#mbe-mb-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}
#mbe-mb-venue {
  background: rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11.5px;
}
.mbe-mb-cd {
  font-size: 12.5px;
  font-weight: 700;
  color: #90caf9;
  letter-spacing: .3px;
}
#mbe-mb-agenda-wrap { margin-top: 10px; }
#mbe-mb-agenda-toggle {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
}
#mbe-mb-agenda-toggle:hover { background: rgba(255,255,255,.22); }
#mbe-mb-agenda {
  display: none;
  margin-top: 10px;
  background: rgba(255,255,255,.09);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  max-height: 180px;
  overflow-y: auto;
}
#mbe-mb-agenda.open { display: block; }
.mbe-rsvp-opt {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.mbe-rsvp-opt:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); }
#mbe-mb-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  position:relative;z-index:1;
}
#mbe-mb-zoom {
  display: inline-block;
  background: linear-gradient(135deg,#1976d2,#42a5f5);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(66,165,245,.4);
  transition: opacity .15s, transform .1s;
}
#mbe-mb-zoom:hover { opacity:.9; transform:translateY(-1px); }
#mbe-mb-dismiss {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
#mbe-mb-dismiss:hover { background: rgba(255,255,255,.22); color:#fff; }
@media (max-width: 600px) {
  #mbe-mb-inner   { flex-wrap: wrap; gap: 12px; padding: 16px; }
  #mbe-mb-actions { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
  #mbe-mb-zoom    { font-size: 12px; padding: 8px 14px; }
}

/* ── Meeting banner: credentials + embed + share ─────────────────────────── */
.mbe-mb-cred-item { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mbe-mb-cred-lbl  { font-size:10px; text-transform:uppercase; letter-spacing:1px; opacity:.65; margin-right:2px; }
.mbe-mb-cred-val  { font-size:14px; font-weight:700; letter-spacing:.5px; }
.mbe-mb-copy      { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:4px; padding:2px 8px; font-size:10px; cursor:pointer; transition:.15s; }
.mbe-mb-copy:hover{ background:rgba(255,255,255,.28); }
.mbe-mb-share-btn { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:5px; padding:4px 10px; font-size:11px; cursor:pointer; transition:.15s; }
.mbe-mb-share-btn:hover { background:rgba(255,255,255,.24); }
#mbe-mb-embed-btn { background:linear-gradient(135deg,#00897b,#26a69a); border:none; color:#fff; padding:10px 18px; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:.15s; }
#mbe-mb-embed-btn:hover { opacity:.9; transform:translateY(-1px); }
#mbe-mb-embed { border-radius:0 0 14px 14px; overflow:hidden; }

/* ── Smart Registration Form — Multi-plot & 3-name ───────────────────────── */
.mbe-reg-section {
  border: 1px solid rgba(180,145,60,.18);
  border-radius: 10px;
  padding: 14px 16px 10px;
  margin-bottom: 16px;
  background: rgba(255,248,225,.35);
}
.mbe-reg-section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #7a6040;
  margin-bottom: 12px;
}
.mbe-form__row--3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 540px) {
  .mbe-form__row--3 { grid-template-columns: 1fr; }
}
.mbe-checkbox-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #5a4a2a;
  cursor: pointer;
  user-select: none;
}
.mbe-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #b8902a;
  cursor: pointer;
}
/* Plot grid — chips for extra plots */
.mbe-plot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
  background: rgba(255,255,255,.6);
  border-radius: 8px;
  border: 1px solid rgba(180,145,60,.2);
}
.mbe-plot-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1.5px solid rgba(180,145,60,.35);
  font-size: 12px;
  font-weight: 600;
  color: #6a5020;
  background: #fffbf0;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
}
.mbe-plot-chip input[type="checkbox"] { display: none; }
.mbe-plot-chip:has(input:checked) {
  background: #b8902a;
  color: #fff;
  border-color: #b8902a;
}
.mbe-plot-chip--disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
/* Plot summary badge strip */
.mbe-plot-summary {
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #fffbef, #fff8e1);
  border: 1.5px solid #d4a62a;
  border-radius: 8px;
  font-size: 12.5px;
  color: #5a4010;
  line-height: 1.8;
}
.mbe-plot-badge {
  display: inline-block;
  background: #b8902a;
  color: #fff;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  margin: 2px 3px 2px 0;
}
.mbe-plot-badge em {
  font-style: normal;
  font-weight: 400;
  opacity: .85;
  font-size: 10px;
}

/* ── Registration Firewall Popup ──────────────────────────────────────────── */

/* Full-screen overlay */
#mbeFirewallPopup {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(8, 2, 0, 0.88) !important;
  backdrop-filter: blur(10px) saturate(0.4) !important;
  -webkit-backdrop-filter: blur(10px) saturate(0.4) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .3s ease !important;
}
#mbeFirewallPopup.mbe-fw--visible {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* Card — position:relative so the close button stays anchored to IT */
.mbe-fw-card {
  position: relative !important;  /* <-- CRITICAL: close btn positions against this */
  background: #fff;
  border-radius: 20px;
  padding: 44px 32px 30px;        /* extra top padding so close btn doesn't overlap title */
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 32px 100px rgba(0,0,0,.7),
    0 0 0 1.5px rgba(185,28,28,.2);
  animation: mbe-fw-drop .35s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes mbe-fw-drop {
  from { transform: scale(.84) translateY(-24px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);     opacity: 1; }
}

/* Shield / icon */
.mbe-fw-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
}

.mbe-fw-title {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #b91c1c;
  margin-bottom: 14px;
}
.mbe-fw-msg {
  font-size: 14.5px;
  color: #3a2010;
  line-height: 1.7;
  margin: 0 0 20px;
}
.mbe-fw-dismiss-hint {
  font-size: 11.5px;
  color: #9ca3af;
  margin: 14px 0 0;
  font-style: italic;
}
.mbe-fw-contact {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.mbe-fw-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.mbe-fw-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.mbe-fw-btn--email { background: linear-gradient(135deg,#1e40af,#3b82f6); color:#fff; }
.mbe-fw-btn--call  { background: linear-gradient(135deg,#065f46,#10b981); color:#fff; }

/* ── Close button — inside card, top-right corner ── */
.mbe-fw-close {
  position: absolute !important;  /* relative to .mbe-fw-card */
  top: 12px !important;
  right: 14px !important;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fee2e2;
  border: 2px solid #fca5a5;
  color: #b91c1c;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(185,28,28,.2);
  transition: background .15s, color .15s, transform .12s;
  z-index: 1;
}
.mbe-fw-close:hover {
  background: #b91c1c;
  color: #fff;
  transform: scale(1.15);
}

@media (max-width: 500px) {
  /* Let the whole overlay scroll and anchor to the top, so a tall card never
     hides its own close button behind the address bar — mobile users were
     getting stuck here and couldn't reach the login screen. */
  #mbeFirewallPopup {
    align-items: flex-start !important;
    padding: 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .mbe-fw-card   { padding: 44px 18px 22px; border-radius: 16px; margin: auto; }
  .mbe-fw-title  { font-size: 18px; }
  .mbe-fw-msg    { font-size: 13.5px; }
  .mbe-fw-btn    { padding: 10px 14px; font-size: 12px; }
  .mbe-fw-icon   { font-size: 44px; }
  /* Bigger, always-tappable close button */
  .mbe-fw-close  {
    width: 42px !important; height: 42px !important;
    top: 10px !important; right: 10px !important;
    font-size: 22px !important;
  }
}

/* ── Hard-lock wall (replaces the form completely) ── */
.mbe-fw-hardwall {
  text-align: center;
  padding: 40px 24px 32px;
  background: linear-gradient(160deg, #fff5f5, #fff);
  border-radius: 16px;
  border: 2px solid #fca5a5;
  box-shadow: 0 8px 40px rgba(185,28,28,.12);
  animation: mbe-fw-drop .4s cubic-bezier(.34,1.2,.64,1) both;
}
.mbe-fw-hw-icon  { font-size: 64px; display: block; margin-bottom: 14px; }
.mbe-fw-hw-title { font-size: 20px; font-weight: 800; color: #b91c1c; margin: 0 0 12px; }
.mbe-fw-hw-sub   { font-size: 14px; color: #6b7280; margin: 0 0 16px; }
.mbe-fw-hw-msg   {
  font-size: 14.5px; color: #3a2010; line-height: 1.7;
  margin: 0 0 4px; padding: 14px 16px;
  background: #fee2e2; border-radius: 10px; border-left: 4px solid #b91c1c;
}
.mbe-fw-hw-case  { font-size: 11.5px; color: #9ca3af; margin: 18px 0 0; font-style: italic; }

/* ── Mhasibu Housing contact card (inside firewall popup) ──────────────── */
.mbe-fw-housing-card {
  margin-top: 14px;
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border: 1.5px solid #6ee7b7;
  border-radius: 12px;
  padding: 16px 18px 12px;
  text-align: left;
  animation: mbe-fw-drop .25s ease both;
}
.mbe-fw-housing-card strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 10px;
  text-align: center;
}
.mbe-fw-housing-contacts {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mbe-fw-hc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #a7f3d0;
  font-size: 13.5px;
  font-weight: 600;
  color: #065f46;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.mbe-fw-hc-row:hover { background: #d1fae5; transform: translateX(3px); }
.mbe-fw-hc-email { color: #1e40af; border-color: #bfdbfe; font-size: 12.5px; word-break: break-all; }
.mbe-fw-hc-email:hover { background: #eff6ff; }
.mbe-fw-hc-close {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: none;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
}
.mbe-fw-hc-close:hover { color: #374151; }

/* ── Field error highlight ──────────────────────────────────────────────── */
.mbe-field--error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.22) !important;
  animation: mbe-field-shake .45s ease;
}
@keyframes mbe-field-shake {
  0%,100%{ transform:translateX(0); }
  18%{ transform:translateX(-7px); }
  36%{ transform:translateX(7px);  }
  54%{ transform:translateX(-4px); }
  72%{ transform:translateX(4px);  }
}

/* Taken plot chips */
.mbe-plot-chip--taken {
  opacity: .35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #f3f3f3 !important;
  border-color: #ccc !important;
  color: #aaa !important;
  text-decoration: line-through !important;
}
select option:disabled { color: #aaa !important; font-style: italic; }

/* Taken plot chips */
.mbe-plot-chip--taken {
  opacity: .38 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #f3f3f3 !important;
  border-color: #ccc !important;
  color: #999 !important;
  text-decoration: line-through !important;
}
/* Plot select taken options */
select option:disabled { color: #aaa !important; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════
   ESTATE PLOT MAP — v3.71.0
   Occupancy strip, compass, land-use zones (Common Ground etc.), search,
   spotlight filters, neighbour card, route from the gate, live refresh.
   Plot colours are driven by classes (s-* status, z-* land use) so the
   live refresh and the committee editor can recolour plots in place.
   ═══════════════════════════════════════════════════════════════════════ */
.mbe-estate-map{margin:8px 0 4px;position:relative}
.mbe-estate-map [hidden]{display:none !important}
.mbe-emk{width:15px;height:15px;border-radius:4px;border:1.5px solid;display:inline-block;flex:0 0 15px}
.mbe-emk--await{background:#fbf7ee;border-color:#d9cba6}
.mbe-emk--owned{background:#e8f4ec;border-color:#3f9c6d}
.mbe-emk--pending{background:#fff7e6;border-color:#e0a63c}
.mbe-emk--reserved{background:#f3eef9;border-color:#7a6bb0}
.mbe-emk--you{background:#fff;border-color:#b8860b;border-width:3px}
.mbe-emk--z-common{background:#1f5b38;border:2px dashed #d9b54e}
.mbe-emk--z-green{background:#dcefcf;border:2px dashed #5f9e3a}
.mbe-emk--z-facility{background:#d9eef0;border:2px dashed #2a8c95}
.mbe-emk--z-utility{background:#e3e9f3;border:2px dashed #5470a0}

/* ── occupancy ─────────────────────────────────────────────────────── */
.mbe-emap-stats{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"lead strip" "lead foot";gap:10px 22px;align-items:center;background:#fff;border:1px solid var(--cream-dark,#e5ddc9);border-radius:14px;padding:14px 18px;margin:0 0 12px}
.mbe-emap-stats__lead{grid-area:lead;display:flex;align-items:center;gap:12px;padding-right:22px;border-right:1px solid #efe7d4;align-self:stretch}
.mbe-emap-stats__pct{font-family:'Cormorant Garamond',Georgia,serif;color:#1c5b3a;line-height:.85;display:flex;align-items:flex-start}
.mbe-emap-stats__pct b{font-size:56px;font-weight:700;font-variant-numeric:lining-nums}
.mbe-emap-stats__pct small{font-size:22px;font-weight:600;margin:4px 0 0 2px;color:#b8860b}
.mbe-emap-stats__txt{display:flex;flex-direction:column;gap:3px;max-width:200px}
.mbe-emap-stats__txt strong{font-size:13px;color:#233029;font-weight:600;line-height:1.3}
.mbe-emap-stats__txt span{font-size:12px;color:#7a705a;line-height:1.4}
.mbe-emap-strip{grid-area:strip;display:grid;grid-template-columns:repeat(73,minmax(0,1fr));gap:2px;height:24px}
.mbe-emap-strip i{display:block;border-radius:2px;background:#f1eadb;cursor:pointer;transition:transform .12s ease}
.mbe-emap-strip i:hover,.mbe-emap-strip i.is-hot{transform:scaleY(1.3)}
.mbe-emap-strip i.c-owned{background:#3f9c6d}
.mbe-emap-strip i.c-pending{background:#e0a63c}
.mbe-emap-strip i.c-await{background:#e6dcc3}
.mbe-emap-strip i.c-reserved{background:#9a8cc8}
.mbe-emap-strip i.c-zone{background:#1f5b38;box-shadow:inset 0 -3px 0 #d9b54e}
.mbe-emap-stats__foot{grid-area:foot;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.mbe-emap-counts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0}
.mbe-emap-counts div{display:flex;align-items:center;gap:6px}
.mbe-emap-counts div::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--c)}
.mbe-emap-counts dt{font-size:12px;color:#7a705a;order:2;margin:0}
.mbe-emap-counts dd{font-size:15px;font-weight:700;color:#233029;margin:0;font-variant-numeric:tabular-nums}
.mbe-emap-counts .c-owned{--c:#3f9c6d}.mbe-emap-counts .c-pending{--c:#e0a63c}.mbe-emap-counts .c-await{--c:#e6dcc3}
.mbe-emap-counts .c-reserved{--c:#9a8cc8}.mbe-emap-counts .c-zone{--c:#1f5b38}
.mbe-emap-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:#7a705a;white-space:nowrap}
.mbe-emap-live i{width:7px;height:7px;border-radius:50%;background:#3f9c6d;animation:mbeEmapPulse 2.6s ease-out infinite}
.mbe-emap-live.is-stale i{background:#c9b98f;animation:none}
@keyframes mbeEmapPulse{0%{box-shadow:0 0 0 0 rgba(63,156,109,.45)}70%{box-shadow:0 0 0 7px rgba(63,156,109,0)}100%{box-shadow:0 0 0 0 rgba(63,156,109,0)}}

/* ── toolbar, search, filters ──────────────────────────────────────── */
.mbe-emap-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 8px}
.mbe-emap-search{flex:1 1 260px;max-width:420px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5ddc9;border-radius:10px;padding:0 12px;height:38px;color:#8a7f66;margin:0}
.mbe-emap-search:focus-within{border-color:#b8860b;box-shadow:0 0 0 3px rgba(184,134,11,.15)}
.mbe-emap-search svg{width:16px;height:16px;flex:0 0 16px}
.mbe-emap-search input{flex:1;min-width:0;height:36px;border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent !important;padding:0 !important;margin:0;font-size:13.5px;color:#233029}
.mbe-emap-search__count{font-size:11.5px;color:#9a8f78;white-space:nowrap}
.mbe-emap-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mbe-emap-btn{height:34px;min-width:34px;padding:0 12px;border:1px solid #e5ddc9;background:#fff;border-radius:9px;font-size:13px;font-weight:600;line-height:1;color:#1c5b3a;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,border-color .15s,color .15s}
.mbe-emap-btn:hover{background:#f6f2e8;border-color:#d9cba6}
.mbe-emap-btn:disabled{opacity:.4;cursor:default}
.mbe-emap-btn:focus-visible,.mbe-emap-chip:focus-visible,.mbe-emap-ztype:focus-visible,.mbe-emap-nbr:focus-visible,.mbe-mapcard button:focus-visible{outline:2px solid #1f6fd6;outline-offset:2px}
.mbe-emap-btn[data-mapzoom="in"],.mbe-emap-btn[data-mapzoom="out"]{font-size:18px;padding:0 10px}
.mbe-emap-btn--gold{background:#fdf6e3;border-color:#e6cf8f;color:#8a6410}
.mbe-emap-btn--gold:hover{background:#faefcf;border-color:#d8b85f}
.mbe-emap-btn--edit[aria-pressed="true"],.mbe-emap-btn[data-emap-act="expand"][aria-pressed="true"]{background:#1c5b3a;border-color:#1c5b3a;color:#fff}
.mbe-emap-btn--primary{background:#1c5b3a;border-color:#1c5b3a;color:#fff}
.mbe-emap-btn--primary:hover{background:#174d31;border-color:#174d31}
.mbe-map-zoom__level{min-width:44px;text-align:center;font-size:12.5px;font-weight:600;color:var(--text-mid,#6b6350)}
.mbe-emap-filters{display:flex;flex-wrap:wrap;gap:4px 6px;margin:0 0 6px}
.mbe-emap-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 8px;border:1px solid transparent;border-radius:999px;background:transparent;font-size:12.5px;color:#5a5240;cursor:pointer;font-family:inherit}
.mbe-emap-chip:hover{background:#f4efe2}
.mbe-emap-chip[aria-pressed="true"]{background:#fff;border-color:#b8860b;color:#233029;box-shadow:0 1px 3px rgba(15,45,26,.08)}
.mbe-emap-chip--static,.mbe-emap-chip--static:hover{cursor:default;background:transparent}
.mbe-emap-hint{font-size:12px;color:#8a7f66;margin:0 0 8px}

/* ── canvas ────────────────────────────────────────────────────────── */
.mbe-estate-map__scroll{background:#fff;border:1px solid var(--cream-dark,#e5ddc9);border-radius:12px;padding:10px;overflow:auto;box-shadow:0 8px 30px rgba(15,45,26,.06);position:relative;-webkit-overflow-scrolling:touch}
.mbe-estate-map__svg{width:100%;height:auto;display:block;min-width:900px;font-family:Inter,system-ui,sans-serif}
.mbe-emap.is-zoomed .mbe-estate-map__scroll{cursor:grab}
.mbe-emap.is-panning .mbe-estate-map__scroll{cursor:grabbing;user-select:none}

/* plots: status colours */
.mbe-emap .mbe-plot-g{cursor:pointer;outline:none;transition:opacity .2s ease}
.mbe-emap .mbe-plot-r{stroke-width:1.5;transition:fill .25s ease,stroke .25s ease}
.mbe-emap .s-await .mbe-plot-r{fill:#fbf7ee;stroke:#d9cba6}
.mbe-emap .s-owned .mbe-plot-r{fill:#e8f4ec;stroke:#3f9c6d}
.mbe-emap .s-pending .mbe-plot-r{fill:#fff7e6;stroke:#e0a63c}
.mbe-emap .s-reserved .mbe-plot-r{fill:#f3eef9;stroke:#7a6bb0}
.mbe-emap .mbe-plot-num{fill:#0f2d1a}
.mbe-emap .s-await .mbe-plot-sub{fill:#9a8a6a}
.mbe-emap .s-owned .mbe-plot-sub{fill:#1c6b42}
.mbe-emap .s-pending .mbe-plot-sub{fill:#9a6a12}
.mbe-emap .s-reserved .mbe-plot-sub{fill:#5a4a90}
.mbe-emap .mbe-plot-name{font-weight:500}
.mbe-emap .s-owned .mbe-plot-name{fill:#174d31;font-weight:600}
.mbe-emap .mbe-plot-inset{fill:none;stroke:none;pointer-events:none}
.mbe-emap .mbe-plot-icon{pointer-events:none}

/* plots: land use (wins over status) */
.mbe-emap .mbe-plot-g.z-common .mbe-plot-r{fill:#1f5b38;stroke:#c9a13c;stroke-width:2}
.mbe-emap .mbe-plot-g.z-common .mbe-plot-inset{stroke:#e2c46a;stroke-width:1.2;stroke-dasharray:5 3.5}
.mbe-emap .mbe-plot-g.z-common .mbe-plot-num{fill:#fdf6df}
.mbe-emap .mbe-plot-g.z-common .mbe-plot-sub{fill:#e9d48f}
.mbe-emap .mbe-plot-g.z-common .mbe-plot-name{fill:#fff3cf;font-weight:700}
.mbe-emap .mbe-plot-g.z-green .mbe-plot-r{fill:#dcefcf;stroke:#5f9e3a;stroke-width:2}
.mbe-emap .mbe-plot-g.z-green .mbe-plot-inset{stroke:#86bd62;stroke-width:1.2;stroke-dasharray:5 3.5}
.mbe-emap .mbe-plot-g.z-green .mbe-plot-num{fill:#1f3d10}
.mbe-emap .mbe-plot-g.z-green .mbe-plot-sub{fill:#3f6d22}
.mbe-emap .mbe-plot-g.z-green .mbe-plot-name{fill:#2c5418;font-weight:700}
.mbe-emap .mbe-plot-g.z-facility .mbe-plot-r{fill:#d9eef0;stroke:#2a8c95;stroke-width:2}
.mbe-emap .mbe-plot-g.z-facility .mbe-plot-inset{stroke:#5ab3ba;stroke-width:1.2;stroke-dasharray:5 3.5}
.mbe-emap .mbe-plot-g.z-facility .mbe-plot-num{fill:#0c3c41}
.mbe-emap .mbe-plot-g.z-facility .mbe-plot-sub{fill:#22727a}
.mbe-emap .mbe-plot-g.z-facility .mbe-plot-name{fill:#14545a;font-weight:700}
.mbe-emap .mbe-plot-g.z-utility .mbe-plot-r{fill:#e3e9f3;stroke:#5470a0;stroke-width:2}
.mbe-emap .mbe-plot-g.z-utility .mbe-plot-inset{stroke:#859cc6;stroke-width:1.2;stroke-dasharray:5 3.5}
.mbe-emap .mbe-plot-g.z-utility .mbe-plot-num{fill:#1e3558}
.mbe-emap .mbe-plot-g.z-utility .mbe-plot-sub{fill:#45608d}
.mbe-emap .mbe-plot-g.z-utility .mbe-plot-name{fill:#2a4470;font-weight:700}

/* plots: interaction states */
.mbe-emap .mbe-plot-g:hover .mbe-plot-r{filter:brightness(1.03) drop-shadow(0 1px 4px rgba(15,45,26,.3))}
.mbe-emap .mbe-plot-g:focus-visible .mbe-plot-r{stroke:#1f6fd6;stroke-width:3}
.mbe-emap .mbe-plot-g.is-you .mbe-plot-r{stroke:#b8860b;stroke-width:3;filter:drop-shadow(0 0 3px rgba(184,134,11,.55))}
.mbe-emap .mbe-plot-g.is-nb .mbe-plot-r{stroke:#b8860b;stroke-width:2.4;stroke-dasharray:7 4}
.mbe-emap .mbe-plot-g.is-active .mbe-plot-r{stroke:#b8860b;stroke-width:3.2;stroke-dasharray:none}
.mbe-emap.has-spot .mbe-plot-g:not(.is-lit){opacity:.2}
.mbe-emap.has-spot .mbe-plot-g.is-lit .mbe-plot-r{stroke-width:2.6}
.mbe-emap .mbe-plot-g.is-flash .mbe-plot-r{animation:mbeEmapFlash .6s ease}
@keyframes mbeEmapFlash{0%{filter:brightness(1.25) drop-shadow(0 0 8px rgba(184,134,11,.9))}100%{filter:none}}
.mbe-emap.is-editing .mbe-plot-g{cursor:copy}
.mbe-emap.is-editing .mbe-plot-g:hover .mbe-plot-r{stroke:#1c5b3a;stroke-width:3;stroke-dasharray:4 3}
.mbe-emap.is-editing .mbe-estate-map__scroll{border-color:#d8b85f;box-shadow:0 0 0 3px rgba(216,184,95,.25)}

/* compass, pin, route */
.mbe-compass{pointer-events:none}
.mbe-compass__rose{animation:mbeCompassSettle 1.8s cubic-bezier(.2,.8,.2,1) .25s both}
@keyframes mbeCompassSettle{0%{transform:rotate(-55deg)}55%{transform:rotate(9deg)}78%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
.mbe-you-pin{pointer-events:none}
.mbe-you-pin__b{animation:mbePinDrop .7s cubic-bezier(.3,1.5,.5,1) .5s both}
@keyframes mbePinDrop{0%{transform:translateY(-22px);opacity:0}100%{transform:none;opacity:1}}
.mbe-route{stroke:#1f6fd6;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 8;opacity:0;pointer-events:none;transition:opacity .2s}
.mbe-route.is-on{opacity:.95;animation:mbeRouteMarch .9s linear infinite}
@keyframes mbeRouteMarch{to{stroke-dashoffset:-18}}
.mbe-route-end{fill:#1f6fd6;stroke:#fff;stroke-width:2.5;opacity:0;pointer-events:none}
.mbe-route-end.is-on{opacity:1}

/* ── detail card ───────────────────────────────────────────────────── */
.mbe-mapcard{position:absolute;top:0;left:0;z-index:60;width:268px;max-width:84vw;background:#fff;border:1px solid var(--cream-dark,#e5ddc9);border-radius:14px;box-shadow:0 12px 34px rgba(15,45,26,.2);padding:13px 14px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .13s ease,transform .13s ease;pointer-events:none}
.mbe-mapcard.is-show{opacity:1;visibility:visible;transform:none}
.mbe-mapcard.is-pinned{pointer-events:auto;box-shadow:0 16px 42px rgba(15,45,26,.28)}
.mbe-mapcard__close{position:absolute;top:6px;right:9px;border:0;background:transparent;font-size:20px;line-height:1;color:#9a8f78;cursor:pointer;display:none}
.mbe-mapcard.is-pinned .mbe-mapcard__close{display:block}
.mbe-mapcard__head{display:flex;align-items:center;gap:11px;padding-right:14px}
.mbe-mapcard__avatar{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:#eef3ec center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#3f9c6d;border:2px solid #e8f4ec;overflow:hidden}
.mbe-mapcard__avatar.is-zone{font-size:22px;background:#1f5b38;border-color:#e2c46a}
.mbe-mapcard__id{display:flex;flex-direction:column;gap:4px;min-width:0}
.mbe-mapcard__plot{font-size:12px;font-weight:600;color:var(--green-deep,#1c5b3a)}
.mbe-mapcard__badge{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.2px;padding:2px 8px;border-radius:20px;background:#eef3ec;color:#3f9c6d}
.mbe-mapcard__badge.is-owned{background:#e8f4ec;color:#1c6b42}
.mbe-mapcard__badge.is-pending{background:#fff5e2;color:#9a6a12}
.mbe-mapcard__badge.is-reserved{background:#f1ecfa;color:#5a4a90}
.mbe-mapcard__badge.is-await{background:#f4efe4;color:#8a7a58}
.mbe-mapcard__badge.is-z-common{background:#1f5b38;color:#fbeebe}
.mbe-mapcard__badge.is-z-green{background:#dcefcf;color:#2c5418}
.mbe-mapcard__badge.is-z-facility{background:#d9eef0;color:#14545a}
.mbe-mapcard__badge.is-z-utility{background:#e3e9f3;color:#2a4470}
.mbe-mapcard__name{margin:9px 0 0;font-size:15px;font-weight:600;color:#233029;line-height:1.3;word-break:break-word;overflow-wrap:anywhere}
.mbe-mapcard__rel{margin-top:6px;display:inline-block;font-size:11.8px;font-weight:600;color:#8a6410;background:#fdf6e3;border-radius:7px;padding:3px 8px}
.mbe-mapcard__rel:empty,.mbe-mapcard__warn:empty{display:none}
.mbe-mapcard__warn{margin-top:7px;font-size:11.8px;line-height:1.4;color:#8a3b12;background:#fdf0e8;border-radius:8px;padding:6px 8px}
.mbe-mapcard__contacts{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.mbe-mapcard__row{display:flex;align-items:center;gap:8px;font-size:12.7px;color:#3a4a40;text-decoration:none;border-radius:8px;padding:4px 5px;margin:0 -5px}
a.mbe-mapcard__row:hover{background:#f6f2e8;color:var(--green-deep,#1c5b3a)}
.mbe-mapcard__ico{font-size:13px;flex:0 0 auto}
.mbe-mapcard__val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbe-mapcard__empty{margin-top:9px;font-size:12.3px;color:#8a8168;font-style:italic}
.mbe-mapcard__nbrs{margin-top:10px;padding-top:9px;border-top:1px solid #f0e9d8;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mbe-mapcard__nb{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;border:0;background:#faf7ef;border-radius:8px;padding:5px 7px;text-align:left;font:inherit;cursor:pointer}
.mbe-mapcard__nb:hover{background:#f1ead6}
.mbe-mapcard__nb small{font-size:10px;font-weight:700;color:#b8962e}
.mbe-mapcard__nb span{font-size:11.8px;line-height:1.3;color:#233029;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.mbe-mapcard__nb.is-edge{cursor:default;background:transparent;border:1px dashed #eadfc4}
.mbe-mapcard__nb.is-edge span{color:#9a8f78}
.mbe-mapcard__acts{margin-top:9px;display:none}
.mbe-mapcard.is-pinned .mbe-mapcard__acts{display:block}
.mbe-mapcard__act{width:100%;min-height:32px;border-radius:8px;border:1px solid #cfe0f5;background:#eef5fd;color:#1f5fb8;font:inherit;font-weight:600;font-size:12.5px;cursor:pointer}
.mbe-mapcard__act:hover{background:#e2eefc}
.mbe-mapcard__act[aria-pressed="true"]{background:#1f6fd6;border-color:#1f6fd6;color:#fff}

/* ── committee land-use editor ─────────────────────────────────────── */
.mbe-emap-editor{background:#fffdf6;border:1px solid #e6cf8f;border-radius:14px;padding:14px 16px;margin:0 0 12px;box-shadow:0 8px 24px rgba(184,134,11,.08)}
.mbe-emap-editor__head{display:flex;flex-direction:column;gap:3px}
.mbe-emap-editor__head strong{font-size:14.5px;color:#233029}
.mbe-emap-editor__head span{font-size:12.5px;color:#7a705a}
.mbe-emap-editor__types{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:12px 0}
.mbe-emap-ztype{display:flex;align-items:center;gap:10px;text-align:left;border:1.5px solid #ece3cd;background:#fff;border-radius:11px;padding:8px 10px;cursor:pointer;font:inherit;color:#233029}
.mbe-emap-ztype:hover{border-color:#d9c894}
.mbe-emap-ztype[aria-checked="true"]{border-color:#1c5b3a;box-shadow:0 0 0 3px rgba(28,91,58,.14)}
.mbe-emap-ztype__sw{width:36px;height:36px;flex:0 0 36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;border:2px dashed;color:#8a7f66}
.mbe-emap-ztype--common .mbe-emap-ztype__sw{background:#1f5b38;border-color:#e2c46a}
.mbe-emap-ztype--green .mbe-emap-ztype__sw{background:#dcefcf;border-color:#5f9e3a}
.mbe-emap-ztype--facility .mbe-emap-ztype__sw{background:#d9eef0;border-color:#2a8c95}
.mbe-emap-ztype--utility .mbe-emap-ztype__sw{background:#e3e9f3;border-color:#5470a0}
.mbe-emap-ztype--clear .mbe-emap-ztype__sw{background:#fbf7ee;border-color:#d9cba6;font-size:14px}
.mbe-emap-ztype__txt{display:flex;flex-direction:column;min-width:0}
.mbe-emap-ztype__txt b{font-size:13px;font-weight:600}
.mbe-emap-ztype__txt small{font-size:11px;color:#8a7f66;line-height:1.3}
.mbe-emap-editor__label{display:flex;flex-direction:column;gap:5px;max-width:380px;margin:0}
.mbe-emap-editor__label>span,.mbe-emap-editor__roadgrid label span{font-size:12.5px;font-weight:600;color:#3a4a40}
.mbe-emap-editor__label small{font-weight:400;color:#8a7f66}
.mbe-emap-editor input[type="text"]{height:36px;border:1px solid #e5ddc9;border-radius:9px;padding:0 10px;font-size:13.5px;background:#fff;color:#233029;width:100%;box-sizing:border-box}
.mbe-emap-editor input[type="text"]:focus{outline:0;border-color:#b8860b;box-shadow:0 0 0 3px rgba(184,134,11,.15)}
.mbe-emap-editor__roads{margin-top:12px}
.mbe-emap-editor__roads summary{cursor:pointer;font-size:13px;font-weight:600;color:#1c5b3a}
.mbe-emap-editor__roadgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:10px}
.mbe-emap-editor__roadgrid label{display:flex;flex-direction:column;gap:5px;margin:0}
.mbe-emap-editor__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px}
.mbe-emap-editor__msg{margin-right:auto;font-size:12.5px;color:#7a705a}
.mbe-emap-editor__msg.is-ok{color:#1c6b42;font-weight:600}
.mbe-emap-editor__msg.is-err{color:#b3261e;font-weight:600}

/* ── resident: your neighbours ─────────────────────────────────────── */
.mbe-emap-nbrs{margin-top:14px;background:#fff;border:1px solid var(--cream-dark,#e5ddc9);border-radius:14px;padding:14px 16px}
.mbe-emap-nbrs h4{margin:0 0 10px;font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:700;color:#1c5b3a}
.mbe-emap-nbrs__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mbe-emap-nbr{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;border:1px solid #ece3cd;border-radius:11px;background:#fbf8f1;padding:9px 11px;font:inherit;cursor:pointer;color:#233029}
.mbe-emap-nbr:hover{border-color:#b8860b;background:#fff}
.mbe-emap-nbr__dir{font-size:11px;font-weight:700;color:#b8860b}
.mbe-emap-nbr__plot{font-size:12px;color:#6b6350}
.mbe-emap-nbr__name{font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.mbe-emap-nbr.is-edge{cursor:default;background:transparent;border-style:dashed}
.mbe-emap-nbr.is-edge .mbe-emap-nbr__name{color:#9a8f78;font-weight:500}

/* ── full screen ───────────────────────────────────────────────────── */
.mbe-emap.is-expanded{position:fixed;inset:0;z-index:100000;margin:0;padding:16px 18px 24px;background:#faf6ee;overflow:auto}
.mbe-emap.is-expanded .mbe-estate-map__svg{min-width:1100px}
body.mbe-emap-lock{overflow:hidden}

/* ── small screens ─────────────────────────────────────────────────── */
@media (max-width:820px){
  .mbe-emap-stats{grid-template-columns:1fr;grid-template-areas:"lead" "strip" "foot";padding:12px 14px}
  .mbe-emap-stats__lead{border-right:0;padding-right:0}
  .mbe-emap-stats__pct b{font-size:46px}
  .mbe-emap-live{margin-left:0}
  .mbe-emap-nbrs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .mbe-emap-search{max-width:none}
  .mbe-emap-tools{width:100%}
  .mbe-mapcard{position:fixed;left:10px !important;right:10px;top:auto !important;bottom:12px;width:auto;max-width:none;z-index:100001}
}
@media (prefers-reduced-motion:reduce){
  .mbe-compass__rose,.mbe-you-pin__b,.mbe-route.is-on,.mbe-emap-live i,.mbe-emap .mbe-plot-g.is-flash .mbe-plot-r{animation:none !important}
  .mbe-mapcard,.mbe-emap .mbe-plot-g,.mbe-emap .mbe-plot-r{transition:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   GOVERNANCE VIEWER — Bylaws & Constitution (read-only) — v3.9.20
   ═══════════════════════════════════════════════════════════════════════ */
.mbe-gov{--gtop:62px;position:relative;margin:6px 0 4px;color:#2b2a24}
.mbe-gov *{box-sizing:border-box}

/* progress + sticky tabs */
.mbe-gov__progress{position:sticky;top:var(--gtop);z-index:21;height:3px;background:rgba(184,134,11,.14);border-radius:3px;overflow:hidden}
.mbe-gov__progress-bar{display:block;height:100%;width:0;background:linear-gradient(90deg,#b8860b,#d9b24a);transition:width .12s linear}

/* masthead */
.mbe-gov__masthead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,#12351f,#1f5b38);color:#f3ecd8;border-radius:14px;padding:20px 22px;margin:0 0 14px;box-shadow:0 10px 30px rgba(15,45,26,.18)}
.mbe-gov__crest{font-size:30px;width:54px;height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(214,178,74,.5);border-radius:50%;color:#e8cf86}
.mbe-gov__mast-text{flex:1;min-width:180px}
.mbe-gov__estate{font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;font-weight:700;letter-spacing:.4px;line-height:1.1}
.mbe-gov__tag{font-style:italic;font-size:13px;color:#e4cf94;margin-top:3px}
.mbe-gov__reg{font-size:11px;color:rgba(243,236,216,.66);margin-top:5px;letter-spacing:.3px}
.mbe-gov__mast-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mbe-gov__readonly{font-size:11.5px;font-weight:600;color:#e8cf86;background:rgba(0,0,0,.18);border:1px solid rgba(214,178,74,.4);padding:5px 10px;border-radius:20px}
.mbe-gov__print{font-size:12.5px;font-weight:600;color:#12351f;background:linear-gradient(135deg,#e8cf86,#d9b24a);border:0;padding:7px 14px;border-radius:8px;cursor:pointer;transition:filter .15s}
.mbe-gov__print:hover{filter:brightness(1.05)}

/* tabs */
.mbe-gov__tabs{position:sticky;top:calc(var(--gtop) + 3px);z-index:20;display:flex;gap:8px;flex-wrap:wrap;background:var(--cream,#fbf7ee);padding:10px 0 12px;margin-bottom:6px}
.mbe-gov__tab{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--cream-dark,#e5ddc9);border-radius:12px;padding:10px 16px;cursor:pointer;text-align:left;transition:border-color .18s,box-shadow .18s,transform .18s;color:#3a4a40}
.mbe-gov__tab:hover{border-color:#d9b24a;transform:translateY(-1px)}
.mbe-gov__tab.is-active{border-color:#b8860b;box-shadow:0 6px 18px rgba(184,134,11,.16);background:linear-gradient(180deg,#fffdf7,#fbf3e0)}
.mbe-gov__tab-ico{font-size:20px}
.mbe-gov__tab-label{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:16.5px;color:var(--green-deep,#12351f);display:block;line-height:1.1}
.mbe-gov__tab-count{display:block;font-size:11px;color:var(--text-mid,#7a6f57);letter-spacing:.4px}
.mbe-gov__tab .mbe-gov__tab-labelwrap{display:flex;flex-direction:column}

/* panels */
.mbe-gov__panel{display:none;animation:mbeGovFade .35s ease}
.mbe-gov__panel.is-active{display:block}
@keyframes mbeGovFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mbe-gov__layout{display:grid;grid-template-columns:232px 1fr;gap:26px;align-items:start}

/* table of contents */
.mbe-gov__toc{position:sticky;top:calc(var(--gtop) + 66px);align-self:start;background:#fff;border:1px solid var(--cream-dark,#e5ddc9);border-radius:12px;padding:14px 12px;max-height:calc(100vh - var(--gtop) - 90px);overflow:auto;box-shadow:0 6px 20px rgba(15,45,26,.05)}
.mbe-gov__toc-title{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:#b8860b;font-weight:700;padding:2px 8px 10px}
.mbe-gov__toc-list{display:flex;flex-direction:column;gap:1px}
.mbe-gov__toc-link{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:#4a4a3e;font-size:13px;line-height:1.35;border-left:2.5px solid transparent;transition:background .15s,color .15s,border-color .15s}
.mbe-gov__toc-link:hover{background:#f7f2e6;color:var(--green-deep,#12351f)}
.mbe-gov__toc-link.is-current{background:#f4edda;color:var(--green-deep,#12351f);border-left-color:#b8860b;font-weight:600}
.mbe-gov__toc-num{flex:0 0 auto;min-width:20px;text-align:center;font-size:11px;font-weight:700;color:#b8860b;font-variant-numeric:tabular-nums}

/* document stream */
.mbe-gov__stream{min-width:0}
.mbe-gov__doc-head{text-align:center;padding:14px 10px 20px;border-bottom:1px dashed var(--cream-dark,#e5ddc9);margin-bottom:20px}
.mbe-gov__doc-kind{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#b8860b;font-weight:700}
.mbe-gov__doc-estate{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:700;color:var(--green-deep,#12351f);margin-top:4px}
.mbe-gov__doc-sub{font-size:12px;color:var(--text-mid,#7a6f57);margin-top:3px}
.mbe-gov__doc-blurb{font-style:italic;font-size:13.5px;color:#6a5c40;margin-top:8px}

/* reveal animation */
.mbe-gov__reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.mbe-gov__reveal.is-in{opacity:1;transform:none}

/* article cards */
.mbe-gov__article{background:#fffdf8;border:1px solid #ece3cd;border-left:4px solid #d9b24a;border-radius:12px;padding:20px 22px;margin:0 0 16px;box-shadow:0 4px 16px rgba(15,45,26,.05);scroll-margin-top:calc(var(--gtop) + 74px)}
.mbe-gov__article--intro{background:linear-gradient(180deg,#f6faf4,#fffdf8);border-left-color:#3f9c6d}
.mbe-gov__art-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.mbe-gov__art-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#12351f,#2d5a3d);padding:4px 10px;border-radius:20px;white-space:nowrap}
.mbe-gov__article--intro .mbe-gov__art-label{background:none;color:#3f9c6d;font-size:16px;padding:0}
.mbe-gov__sign .mbe-gov__art-label{background:none;color:#b8860b;font-size:18px;padding:0}
.mbe-gov__art-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:700;color:var(--green-deep,#12351f);line-height:1.15;margin:0}

.mbe-gov__intro p{font-size:14.5px;line-height:1.75;color:#40402f;margin:0 0 10px;font-family:Georgia,'Times New Roman',serif}
.mbe-gov__intro p:last-child{margin-bottom:0}

.mbe-gov__clauses{display:flex;flex-direction:column;gap:12px}
.mbe-gov__clause{display:flex;gap:13px}
.mbe-gov__clause-num{flex:0 0 auto;min-width:38px;height:23px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#8a6410;background:#f6edd6;border:1px solid #e6d5a8;border-radius:7px;font-variant-numeric:tabular-nums;margin-top:1px}
.mbe-gov__clause-body{min-width:0}
.mbe-gov__clause-body>p{font-size:14.5px;line-height:1.72;color:#3a3a2c;margin:0;font-family:Georgia,'Times New Roman',serif}
.mbe-gov__lettered{list-style:none;margin:9px 0 2px;padding:0;display:flex;flex-direction:column;gap:7px}
.mbe-gov__lettered li{display:flex;gap:10px;font-size:14px;line-height:1.65;color:#43412f;font-family:Georgia,'Times New Roman',serif}
.mbe-gov__lk{flex:0 0 22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#12351f;background:#eaf3ea;border:1px solid #cfe4cf;border-radius:50%;margin-top:1px}

/* signatories */
.mbe-gov__sign{background:linear-gradient(180deg,#fffdf8,#fbf5e6)}
.mbe-gov__sign-lead{font-size:13.5px;color:#6a5c40;font-style:italic;margin:0 0 14px}
.mbe-gov__sign-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mbe-gov__sign-card{background:#fff;border:1px solid #ece3cd;border-radius:10px;padding:12px 14px;text-align:center}
.mbe-gov__sign-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:700;color:var(--green-deep,#12351f)}
.mbe-gov__sign-role{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#b8860b;font-weight:600;margin-top:2px}
.mbe-gov__sign-foot{text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:16px;color:#6a5c40;margin-top:18px;padding-top:14px;border-top:1px dashed var(--cream-dark,#e5ddc9)}

/* responsive */
@media(max-width:860px){
  .mbe-gov__layout{grid-template-columns:1fr}
  .mbe-gov__toc{position:relative;top:0;max-height:none;order:-1}
  .mbe-gov__toc-list{max-height:210px;overflow:auto}
}
@media(max-width:520px){
  .mbe-gov__masthead{padding:16px}
  .mbe-gov__article{padding:16px 15px}
  .mbe-gov__clause-num{min-width:34px}
}

/* print apparatus — hidden on screen, shown only when printing */
.mbe-gov__pmark,.mbe-gov__ptitle,.mbe-gov__pfooter{display:none}

/* print — a clean, watermarked, letterheaded read-only copy */
@media print{
  /* hide the app shell + on-screen viewer chrome */
  .mbe-portal__sidebar,.mbe-portal__topbar,.mbe-sidebar-backdrop,.mbe-nav-item,.mbe-scripture-strip,.mbe-page-header,.mbe-sidebar-toggle,header,footer,#main-header,#main-footer,.et-l--header,.et-l--footer,.mbe-gfooter{display:none !important}
  .mbe-portal__main{margin:0 !important;width:100% !important}
  body{background:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .mbe-gov__tabs,.mbe-gov__progress,.mbe-gov__mast-actions,.mbe-gov__toc,.mbe-gov__masthead{display:none !important}
  .mbe-gov__layout{grid-template-columns:1fr !important;gap:0}
  .mbe-gov__panel{display:none !important}
  .mbe-gov__panel.is-active{display:block !important}
  .mbe-gov__reveal{opacity:1 !important;transform:none !important}
  .mbe-legal-page{padding:0 !important;max-width:none}

  @page{margin:15mm 14mm 24mm}
  .mbe-gov{padding:0 2mm}
  .mbe-gov__stream{padding-bottom:8mm}

  /* diagonal watermark, tiled on every page */
  .mbe-gov__pmark{display:block !important;position:fixed;inset:0;z-index:0;pointer-events:none;
    background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0NzAnIGhlaWdodD0nMzIwJz48dGV4dCB4PScyMzUnIHk9JzE3MCcgZm9udC1mYW1pbHk9J0dlb3JnaWEsIFRpbWVzIE5ldyBSb21hbiwgc2VyaWYnIGZvbnQtc2l6ZT0nMjEnIGZpbGw9JyMxMjM1MWYnIGZpbGwtb3BhY2l0eT0nMC4wOCcgdGV4dC1hbmNob3I9J21pZGRsZScgbGV0dGVyLXNwYWNpbmc9JzInIHRyYW5zZm9ybT0ncm90YXRlKC0zMCAyMzUgMTYwKSc+TUhBU0lCVSBCQUtFUlNGSUVMRCBFU1RBVEU8L3RleHQ+PC9zdmc+") repeat;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mbe-gov__stream,.mbe-gov__ptitle{position:relative;z-index:1}

  /* first-page title band (letterhead) */
  .mbe-gov__ptitle{display:block !important;text-align:center;padding:0 0 5mm;margin-bottom:6mm}
  .mbe-gov__ptitle-rule{height:2px;width:66%;margin:3mm auto;background:linear-gradient(90deg,transparent,#b8860b,transparent);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mbe-gov__ptitle-crest{font-size:32pt;color:#b8860b;line-height:1}
  .mbe-gov__ptitle-estate{font-family:'Cormorant Garamond',Georgia,serif;font-size:23pt;font-weight:700;color:#12351f;letter-spacing:.5px;margin-top:1mm}
  .mbe-gov__ptitle-kind{font-family:'Cormorant Garamond',Georgia,serif;font-size:14pt;font-weight:600;color:#8a6410;text-transform:uppercase;letter-spacing:3px;margin:1.5mm 0}
  .mbe-gov__ptitle-reg{font-size:8.5pt;color:#5a5442;line-height:1.5}
  .mbe-gov__ptitle-tag{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:12pt;color:#12351f;margin-top:2mm}
  .mbe-gov__ptitle-seal{display:inline-block;margin-top:4mm;border:2px solid #9a2b2b;color:#9a2b2b;font-size:8.5pt;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:2px 12px;border-radius:4px;transform:rotate(-3.5deg);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mbe-gov__pkind{display:none}
  .mbe-gov[data-active="constitution"] .mbe-gov__pkind[data-doc="constitution"],
  .mbe-gov[data-active="bylaws"] .mbe-gov__pkind[data-doc="bylaws"],
  .mbe-gov[data-active="terms"] .mbe-gov__pkind[data-doc="terms"],
  .mbe-gov[data-active="privacy"] .mbe-gov__pkind[data-doc="privacy"],
  .mbe-gov[data-active="acceptable"] .mbe-gov__pkind[data-doc="acceptable"],
  .mbe-gov[data-active="cookies"] .mbe-gov__pkind[data-doc="cookies"]{display:inline}

  /* fixed footer with the property statement (every page) */
  .mbe-gov__pfooter{display:flex !important;align-items:center;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:3;
    background:#fff;border-top:1.5px solid #d9b24a;padding:2.4mm 4mm;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mbe-gov__pfooter-crest{color:#b8860b;font-size:11pt;flex:0 0 auto}
  .mbe-gov__pfooter-txt{flex:1;font-size:7.3pt;line-height:1.35;color:#4a4436;font-family:Georgia,serif;text-align:left}
  .mbe-gov__pfooter-txt strong{color:#12351f}
  .mbe-gov__pfooter-date{flex:0 0 auto;font-size:7pt;color:#8a8168;white-space:nowrap}

  /* document body, print-optimised (ink-light, watermark shows through) */
  .mbe-gov__doc-head{border-bottom:1px solid #d9cba6;margin-bottom:5mm}
  .mbe-gov__article{break-inside:avoid;box-shadow:none !important;background:transparent !important;border:1px solid #e2dcc6 !important;border-left:3px solid #b8860b !important;padding:3.5mm 5mm;margin:0 0 4mm}
  .mbe-gov__article--intro{border-left-color:#3f9c6d !important}
  .mbe-gov__art-label{background:#12351f !important;color:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mbe-gov__art-title,.mbe-gov__doc-estate,.mbe-gov__doc-kind{color:#12351f !important}
  .mbe-gov__clause-num{background:#f6edd6 !important;border-color:#e6d5a8 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mbe-gov__dtable th{background:#12351f !important;color:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mbe-gov__box{background:#f7f3e8 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mbe-gov__sign-grid{grid-template-columns:repeat(3,1fr)}
  .mbe-gov a{color:#12351f !important;text-decoration:none}
}

/* ── Legal viewer — block styles (Terms, Privacy, Acceptable Use, Cookies) ── */
.mbe-legal-page{max-width:1120px;margin:0 auto;padding:28px 18px 60px}
.mbe-legal-page .mbe-gov{--gtop:10px}
.mbe-gov__ptext{font-size:14.5px;line-height:1.72;color:#3a3a2c;margin:0 0 11px;font-family:Georgia,'Times New Roman',serif}
.mbe-gov__ptext:last-child{margin-bottom:0}
.mbe-gov__blist{list-style:none;margin:2px 0 12px;padding:0;display:flex;flex-direction:column;gap:9px}
.mbe-gov__blist:last-child{margin-bottom:0}
.mbe-gov__blist li{position:relative;padding-left:20px;font-size:14px;line-height:1.68;color:#3a3a2c;font-family:Georgia,'Times New Roman',serif}
.mbe-gov__blist li::before{content:'';position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:2px;background:#d9b24a;transform:rotate(45deg)}
.mbe-gov__blist li strong{color:var(--green-deep,#12351f)}
.mbe-gov__box{background:linear-gradient(180deg,#f6faf4,#fbf6ea);border:1px solid #e2dcc6;border-left:4px solid #d9b24a;border-radius:10px;padding:13px 16px;margin:6px 0 12px}
.mbe-gov__box h4{margin:0 0 6px;font-size:13.5px;font-weight:700;color:var(--green-deep,#12351f);letter-spacing:.2px}
.mbe-gov__box p{margin:0 0 6px;font-size:13.3px;line-height:1.62;color:#40402f;font-family:Georgia,'Times New Roman',serif}
.mbe-gov__box p:last-child{margin-bottom:0}
.mbe-gov__dtable-wrap{overflow-x:auto;margin:4px 0 12px}
.mbe-gov__dtable{width:100%;border-collapse:collapse;font-family:'Inter',system-ui,sans-serif;font-size:12.7px}
.mbe-gov__dtable th{background:var(--green-deep,#12351f);color:#fff;text-align:left;padding:8px 11px;font-weight:600;font-size:12px;letter-spacing:.2px}
.mbe-gov__dtable td{padding:8px 11px;border-bottom:1px solid #ece3cd;color:#3a3a2c;vertical-align:top;line-height:1.5}
.mbe-gov__dtable tbody tr:nth-child(odd){background:#fbf7ee}
.mbe-gov__dtable tbody tr:last-child td{border-bottom:0}

/* registration consent checkbox */
.mbe-form__consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;padding:12px 14px;background:#f8f4ec;border:1px solid #e5ddc9;border-radius:10px;font-size:13px;line-height:1.55;color:#4a4436;cursor:pointer}
.mbe-form__consent input[type=checkbox]{flex:0 0 auto;width:17px;height:17px;margin-top:1px;accent-color:#1c5b3a;cursor:pointer}
.mbe-form__consent a{color:#1c5b3a;font-weight:600;text-decoration:underline}
.mbe-form__consent a:hover{color:#8a6410}

/* footer legal links */
.mbe-gfooter__legal{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:2px 0 4px}
.mbe-gfooter__legal a{color:rgba(255,255,255,.72);font-size:12.5px;text-decoration:none;transition:color .15s}
.mbe-gfooter__legal a:hover{color:#e8cf86}
.mbe-gfooter__legal span{color:rgba(255,255,255,.3);font-size:12px}

/* public Legal page — standalone full-width shell (matches the landing page) */
.mbe-legal-shell{display:flex;flex-direction:column;min-height:100vh;background:#f8f4ec}
.mbe-legal-shell .mbe-nav{background:var(--green-deep);box-shadow:0 4px 30px rgba(0,0,0,.4)}
.mbe-legal-main{flex:1 0 auto;padding-top:68px;background:#f8f4ec}
.mbe-legal-shell .mbe-legal-page{padding-top:22px}
.mbe-legal-shell .mbe-legal-page .mbe-gov{--gtop:80px}
@media(max-width:600px){
  .mbe-legal-main{padding-top:60px}
  .mbe-legal-shell .mbe-legal-page{padding:14px 12px 40px}
  .mbe-legal-shell .mbe-legal-page .mbe-gov{--gtop:64px}
}

/* ── Estate Map — members-only lock notice ───────────────────────── */
.mbe-map-locked{max-width:520px;margin:24px auto;text-align:center;background:#fff;border:1px solid var(--cream-dark);border-radius:12px;padding:32px 26px;box-shadow:0 8px 30px rgba(15,45,26,.06)}
.mbe-map-locked__icon{font-size:38px;line-height:1;margin-bottom:8px}
.mbe-map-locked h3{margin:6px 0 8px;color:var(--green-deep);font-size:18px}
.mbe-map-locked p{margin:0;color:var(--text-mid);font-size:13.5px;line-height:1.6}
.mbe-map-locked a{color:var(--gold-rich);font-weight:600}

/* ── Estate Map — landing-page section ───────────────────────────── */
.mbe-mapsec{padding:70px 20px;background:linear-gradient(180deg,#fbf8f1,#f4eee2)}
.mbe-mapsec{background:#faf6ee}
.mbe-mapsec__inner{max-width:1240px;margin:0 auto;text-align:center}
.mbe-mapsec__inner .mbe-estate-map{margin-top:26px;text-align:left}
.mbe-mapsec__inner .mbe-section-title{margin-bottom:6px}

/* ═══════════════════════════════════════════════════════════════════════
   HERO TITLE ANIMATIONS  (Bakersfield → 🎨 Appearance → Title Animation)
   Speed is driven by --mbe-anim-mult (slow 1.7 · normal 1 · fast 0.55),
   emitted inline per-site so one stylesheet serves every configuration.
   ═══════════════════════════════════════════════════════════════════════ */
.mbe-hero__title { --mbe-anim-mult: 1; }

/* fadeup — gentle rise + fade (the classic, default) */
.mbe-hero__title--fx-fadeup {
  animation: mbeTitleFadeUp calc(1.1s * var(--mbe-anim-mult)) .15s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes mbeTitleFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* reveal — a clip-path wipe uncovers the words left→right */
.mbe-hero__title--fx-reveal {
  animation: mbeTitleReveal calc(1.3s * var(--mbe-anim-mult)) .1s cubic-bezier(.16,.84,.24,1) both;
}
@keyframes mbeTitleReveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(8px); }
  60%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

/* glow — fades in, then breathes a soft gold halo forever */
.mbe-hero__title--fx-glow {
  animation:
    mbeTitleFadeUp calc(1s * var(--mbe-anim-mult)) .15s cubic-bezier(.2,.7,.2,1) both,
    mbeTitleGlow   calc(3.6s * var(--mbe-anim-mult)) calc(1s * var(--mbe-anim-mult)) ease-in-out infinite;
}
@keyframes mbeTitleGlow {
  0%,100% { text-shadow: 0 0 0 rgba(232,198,96,0); }
  50%     { text-shadow: 0 0 26px rgba(232,198,96,.55), 0 0 48px rgba(196,153,31,.30); }
}

/* float — settles in, then bobs slowly like a lantern */
.mbe-hero__title--fx-float {
  animation:
    mbeTitleFadeUp calc(1s * var(--mbe-anim-mult)) .15s cubic-bezier(.2,.7,.2,1) both,
    mbeTitleFloat  calc(5s * var(--mbe-anim-mult)) calc(1s * var(--mbe-anim-mult)) ease-in-out infinite;
}
@keyframes mbeTitleFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-9px); }
}

/* shimmer — a bright band of gold sweeps continuously across the letters */
.mbe-hero__title--fx-shimmer,
.mbe-hero__title--fx-gradient {
  color: transparent;
  -webkit-text-fill-color: transparent; /* iOS Safari needs this for clip-text */
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
}
/* shimmer keeps the letters white with a gold light travelling over them */
.mbe-hero__title--fx-shimmer {
  background-image: linear-gradient(
    100deg,
    #ffffff 0%, #ffffff 38%,
    var(--gold-light) 50%,
    #ffffff 62%, #ffffff 100%);
  background-size: 220% 100%;
  animation:
    mbeTitleFadeUp calc(1s * var(--mbe-anim-mult)) .15s cubic-bezier(.2,.7,.2,1) both,
    mbeTitleShimmer calc(4.5s * var(--mbe-anim-mult)) linear infinite;
}
@keyframes mbeTitleShimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
/* gradient — full two-tone estate gradient drifting across the headline */
.mbe-hero__title--fx-gradient {
  background-image: linear-gradient(
    100deg,
    var(--gold-light), #ffffff,
    var(--gold-rich), var(--gold-pale), var(--gold-light));
  background-size: 260% 100%;
  animation:
    mbeTitleFadeUp calc(1s * var(--mbe-anim-mult)) .15s cubic-bezier(.2,.7,.2,1) both,
    mbeTitleGradient calc(7s * var(--mbe-anim-mult)) ease-in-out infinite;
}
@keyframes mbeTitleGradient {
  0%,100% { background-position:   0% 0; }
  50%     { background-position: 100% 0; }
}
/* when the whole title is painted by a gradient, the <em> must inherit it */
.mbe-hero__title--fx-shimmer em,
.mbe-hero__title--fx-gradient em { color: inherit; -webkit-text-fill-color: inherit; }

/* Respect the visitor's reduced-motion preference — kill looping motion,
   keep a simple fade so nothing pops in abruptly. */
@media (prefers-reduced-motion: reduce) {
  .mbe-hero__title[class*="mbe-hero__title--fx-"] {
    animation: mbeTitleFadeUp .6s ease both !important;
  }
  .mbe-hero__title--fx-shimmer,
  .mbe-hero__title--fx-gradient {
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    background-image: none;
  }
  .mbe-hero__title--fx-shimmer em,
  .mbe-hero__title--fx-gradient em { color: var(--gold-light); -webkit-text-fill-color: var(--gold-light); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ADVANCED HERO TITLE ANIMATIONS  (v3.8.0)
   liquid · wordreveal · raindrop · glowcursor · scramble · auto
   JS engine in main.js splits letters/words + drives cursor glow & auto-rotate.
   All honour prefers-reduced-motion (see block at the very end).
   ═══════════════════════════════════════════════════════════════════════ */

/* LIQUID — vibrant multi-colour gradient wave flowing through the letters */
.mbe-hero__title--fx-liquid {
  color: transparent;
  -webkit-text-fill-color: transparent; /* iOS Safari clip-text fix */
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(-45deg,
    var(--gold-light), #ffffff, var(--gold-rich),
    var(--green-bright), var(--gold-light), var(--gold-pale));
  background-size: 400% 400%;
  animation:
    mbeTitleFadeUp calc(1s * var(--mbe-anim-mult)) .15s cubic-bezier(.2,.7,.2,1) both,
    mbeLiquidWave  calc(9s * var(--mbe-anim-mult)) ease-in-out infinite;
}
.mbe-hero__title--fx-liquid em { color: inherit; -webkit-text-fill-color: inherit; }
@keyframes mbeLiquidWave {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* WORDREVEAL — each word rises out of an invisible mask, staggered.
   JS wraps words: <span class="mbe-rvl"><span class="mbe-rvl-i">word</span></span> */
.mbe-hero__title--fx-wordreveal { line-height: 1.08; }
.mbe-rvl   { display: inline-block; overflow: hidden; vertical-align: top; }
.mbe-rvl-i {
  display: inline-block; transform: translateY(110%);
  animation: mbeWordRise calc(.9s * var(--mbe-anim-mult)) cubic-bezier(.77,0,.175,1) forwards;
}
@keyframes mbeWordRise { to { transform: translateY(0); } }

/* RAINDROP — letters fall from above and settle with a soft bounce.
   JS wraps chars in <span class="mbe-drop"> with a random animation-delay. */
.mbe-word-drop { display: inline-block; white-space: nowrap; } /* keep a word's letters together */
.mbe-hero__title--fx-raindrop .mbe-drop {
  display: inline-block;
  transform: translateY(-120px);
  opacity: 0;
  animation: mbeRainFall calc(.9s * var(--mbe-anim-mult)) cubic-bezier(.25,1,.5,1) forwards;
}
@keyframes mbeRainFall {
  0%  { transform: translateY(-120px) scaleY(1.5); opacity: 0; }
  70% { transform: translateY(8px)    scaleY(.82); opacity: 1; }
  100%{ transform: translateY(0)      scaleY(1);   opacity: 1; }
}

/* GLOWCURSOR — dim letters lit by a gold spotlight that follows the cursor.
   JS sets --mx / --my. On touch / no-pointer it auto-sweeps side to side. */
.mbe-hero__title--fx-glowcursor {
  --mx: 50%; --my: 50%;
  color: rgba(255,255,255,.22);
  -webkit-text-fill-color: rgba(255,255,255,.22); /* iOS Safari clip-text fix */
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle closest-side,
    var(--gold-light) 0%, var(--gold-rich) 40%, rgba(255,255,255,0) 100%);
  background-size: 460px 460px;
  background-position: calc(var(--mx) - 230px) calc(var(--my) - 230px);
  transition: background-position .12s ease-out;
  animation: mbeTitleFadeUp calc(1s * var(--mbe-anim-mult)) .1s ease both;
}
.mbe-hero__title--fx-glowcursor em { color: inherit; -webkit-text-fill-color: inherit; }
.mbe-hero__title--fx-glowcursor.mbe-glow-auto {
  transition: none;
  animation:
    mbeTitleFadeUp calc(1s * var(--mbe-anim-mult)) .1s ease both,
    mbeGlowSweep   calc(6s * var(--mbe-anim-mult)) ease-in-out infinite;
}
@keyframes mbeGlowSweep {
  0%,100% { background-position: -120px 50%; }
  50%     { background-position: calc(100% + 120px) 50%; }
}

/* SCRAMBLE — letters decode into place (JS swaps glyphs, then settles).
   The container just needs the entrance fade; JS handles the characters. */
.mbe-hero__title--fx-scramble {
  animation: mbeTitleFadeUp calc(.8s * var(--mbe-anim-mult)) .05s ease both;
}
.mbe-hero__title--fx-scramble .mbe-scr.is-live { color: var(--gold-light); }

/* AUTO — JS rotates through the looping effects; this just sets a smooth
   colour + shadow transition so swaps never snap. */
.mbe-hero__title--fx-auto { transition: color .6s ease, background-position .6s ease; }

/* Reduced-motion: no splitting animations, no loops — just a gentle fade. */
@media (prefers-reduced-motion: reduce) {
  .mbe-hero__title--fx-liquid,
  .mbe-hero__title--fx-glowcursor {
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    background-image: none;
    animation: mbeTitleFadeUp .6s ease both !important;
  }
  .mbe-hero__title--fx-liquid em,
  .mbe-hero__title--fx-glowcursor em { color: var(--gold-light); }
  .mbe-rvl-i,
  .mbe-hero__title--fx-raindrop .mbe-drop {
    transform: none !important; opacity: 1 !important; animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PROFILE & SETTINGS  (v3.9.16)
   ═══════════════════════════════════════════════════════════════════ */

/* Sidebar avatar can now show an uploaded photo */
.mbe-portal__user-avatar.has-img,
.mbe-avatar-preview.has-img {
  background-size: cover;
  background-position: center;
  color: transparent;
  text-indent: -9999px;
}

/* Settings layout — single readable column, generous on desktop */
.mbe-settings {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mbe-set-card {
  background: #fff;
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
}
.mbe-set-card__head { margin-bottom: 18px; }
.mbe-set-card__head h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--green-deep);
  margin: 0 0 2px;
}
.mbe-set-card__head p { margin: 0; font-size: 13px; color: var(--text-light); }

/* Profile block: avatar + fields side by side */
.mbe-set-profile { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.mbe-set-profile__fields { flex: 1; min-width: 220px; }

/* Avatar uploader */
.mbe-avatar-upload { position: relative; width: 108px; text-align: center; }
.mbe-avatar-preview {
  width: 108px; height: 108px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; font-weight: 700;
  border: 3px solid var(--gold-rich);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.mbe-avatar-preview::after { content: attr(data-initials); }
.mbe-avatar-preview.has-img::after { content: ''; }
.mbe-avatar-camera {
  position: absolute; top: 74px; right: 2px;
  width: 34px; height: 34px;
  background: var(--gold-rich);
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.mbe-avatar-camera:hover { background: var(--gold-light); transform: scale(1.08); }
.mbe-avatar-upload__hint { margin-top: 10px; font-size: 11px; color: var(--text-light); line-height: 1.4; }
.mbe-avatar-preview.is-uploading { opacity: .55; }

/* Accent themes for the avatar preview */
.mbe-avatar-preview[data-accent="green"] { background: linear-gradient(135deg,#0f2d1a,#1a4a2f); border-color:#2e7d32; }
.mbe-avatar-preview[data-accent="blue"]  { background: linear-gradient(135deg,#0d47a1,#1565c0); border-color:#42a5f5; color:#e3f2fd;}
.mbe-avatar-preview[data-accent="plum"]  { background: linear-gradient(135deg,#4a148c,#6a1b9a); border-color:#ab47bc; color:#f3e5f5;}

/* Fields */
.mbe-set-field { margin-bottom: 14px; }
.mbe-set-field:last-child { margin-bottom: 0; }
.mbe-set-field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--green-deep); margin-bottom: 6px; letter-spacing: .2px;
}
.mbe-set-field input[type="text"],
.mbe-set-field input[type="tel"],
.mbe-set-field input[type="email"],
.mbe-set-field input[type="password"] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--cream-dark);
  border-radius: var(--radius);
  font-size: 14px; font-family: inherit;
  color: var(--text-dark); background: #fdfcf9;
  transition: var(--transition);
  box-sizing: border-box;
}
.mbe-set-field input.is-locked {
  background: #f1efe9; color: var(--text-light); cursor: not-allowed;
}
.mbe-set-field input:focus {
  outline: none; border-color: var(--gold-rich);
  background: #fff; box-shadow: 0 0 0 3px rgba(196,153,31,.12);
}
.mbe-set-field__hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-light); line-height: 1.5; }
.mbe-set-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Read-only plot / role card reuses .mbe-plot-detail rows */
.mbe-set-plot { padding: 4px 0 0; }

/* Toggle switches */
.mbe-set-toggles { display: flex; flex-direction: column; gap: 4px; }
.mbe-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 4px;
  border-bottom: 1px solid var(--cream);
  cursor: pointer;
}
.mbe-toggle:last-child { border-bottom: none; }
.mbe-toggle--muteall { background: #fff8ec; border-radius: 8px; padding: 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--cream); }
.mbe-toggle__input:disabled + .mbe-toggle__track { opacity: .45; cursor: not-allowed; }
.mbe-toggle__text { display: flex; flex-direction: column; gap: 2px; }
.mbe-toggle__text strong { font-size: 14px; color: var(--text-dark); font-weight: 600; }
.mbe-toggle__text small { font-size: 12px; color: var(--text-light); }
.mbe-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.mbe-toggle__track {
  position: relative; flex-shrink: 0;
  width: 46px; height: 26px;
  background: #cfc7b4; border-radius: 20px;
  transition: var(--transition);
}
.mbe-toggle__track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: var(--transition);
}
.mbe-toggle__input:checked + .mbe-toggle__track { background: var(--green-mid); }
.mbe-toggle__input:checked + .mbe-toggle__track::after { transform: translateX(20px); }
.mbe-toggle__input:focus-visible + .mbe-toggle__track { box-shadow: 0 0 0 3px rgba(196,153,31,.3); }

/* Accent picker */
.mbe-accent-picker { display: flex; gap: 12px; }
.mbe-accent {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
  transition: var(--transition); padding: 0;
}
.mbe-accent:hover { transform: scale(1.1); }
.mbe-accent.is-active { border-color: var(--text-dark); box-shadow: 0 0 0 2px #fff inset; }
.mbe-accent--gold  { background: linear-gradient(135deg,#c4991f,#e8c660); }
.mbe-accent--green { background: linear-gradient(135deg,#0f2d1a,#2e7d32); }
.mbe-accent--blue  { background: linear-gradient(135deg,#0d47a1,#42a5f5); }
.mbe-accent--plum  { background: linear-gradient(135deg,#4a148c,#ab47bc); }

/* Save bar */
.mbe-set-savebar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; flex-wrap: wrap;
}
.mbe-set-savebar--inline { margin-top: 18px; }
.mbe-set-savemsg { font-size: 13px; font-weight: 600; margin-right: auto; }
.mbe-set-savemsg.is-ok  { color: #2e7d32; }
.mbe-set-savemsg.is-err { color: #c62828; }
.mbe-set-card--security { border-color: #f0d9d9; }

/* Committee (dark) portal — tune settings surfaces for contrast */
.mbe-portal--committee .mbe-set-card__head h3 { color: var(--green-deep); }

/* Mobile */
@media (max-width: 768px) {
  .mbe-settings { max-width: 100%; }
  .mbe-set-card { padding: 18px 16px; border-radius: 14px; }
  .mbe-set-profile { gap: 16px; }
  .mbe-avatar-upload { width: 92px; margin: 0 auto; }
  .mbe-avatar-preview { width: 92px; height: 92px; font-size: 32px; }
  .mbe-avatar-camera { top: 62px; }
  .mbe-set-grid-2 { grid-template-columns: 1fr; }
  .mbe-set-savebar { justify-content: stretch; }
  .mbe-set-savebar .mbe-btn { width: 100%; }
  .mbe-set-savemsg { width: 100%; text-align: center; margin: 0 0 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   VERSE SELECTOR + WORD STUDY  (v3.24.0)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Reader action button group */
.mbe-reader-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mbe-ref-colon {
  font-weight: 700;
  color: var(--gold-rich);
  padding: 0 1px;
}
#mbe-verse-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--green-deep);
  background: #fff;
  max-width: 160px;
}

/* Clickable verses in the reader */
.mbe-verse {
  cursor: pointer;
  border-radius: 4px;
  transition: background .18s ease, box-shadow .18s ease;
  padding: 1px 2px;
}
.mbe-verse:hover { background: rgba(196,153,31,.10); }
.mbe-verse.is-selected {
  background: rgba(196,153,31,.18);
  box-shadow: inset 0 0 0 1px rgba(196,153,31,.45);
}

/* ── Word Study card ── */
.mbe-wordstudy-wrap { margin: 0 0 22px; }
.mbe-ws-card {
  background:
    radial-gradient(120% 140% at 0% 0%, #fffdf6 0%, #fbf7ec 45%, #f4efe0 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(15,45,26,.10);
}
.mbe-ws-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--green-deep) 0%, #16452a 100%);
  color: #f4efe0;
}
.mbe-ws-topbar__left { display: flex; align-items: center; gap: 14px; }
.mbe-ws-topbar__icon { font-size: 24px; line-height: 1; }
.mbe-ws-topbar__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .3px;
}
.mbe-ws-topbar__ref {
  font-size: 13px;
  color: var(--gold-light, #e9c65a);
  margin-top: 1px;
}
.mbe-ws-close {
  background: rgba(255,255,255,.12);
  border: none;
  color: #f4efe0;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 30px;
  transition: background .18s ease;
}
.mbe-ws-close:hover { background: rgba(255,255,255,.24); }

.mbe-ws-loading { text-align: center; padding: 40px 20px; color: var(--earth); }
#mbe-ws-body { padding: 22px; }

/* Before → now → after flow */
.mbe-ws-flow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.mbe-ws-flow-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 15px;
  position: relative;
}
.mbe-ws-flow-step--now {
  border-color: rgba(196,153,31,.55);
  box-shadow: 0 4px 18px rgba(196,153,31,.12);
  background: linear-gradient(180deg, #fffdf4 0%, #fff 100%);
}
.mbe-ws-flow-tag {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--gold-rich);
  margin-bottom: 6px;
}
.mbe-ws-flow-step--now .mbe-ws-flow-tag { color: var(--green-deep); }
.mbe-ws-flow-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #43413a;
}

/* Study tiles grid */
.mbe-ws-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.mbe-ws-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 17px;
}
.mbe-ws-tile--full { grid-column: 1 / -1; }
.mbe-ws-tile__h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: 10px;
}
.mbe-ws-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mbe-ws-chip {
  background: rgba(15,45,26,.06);
  color: var(--green-deep);
  border: 1px solid rgba(15,45,26,.10);
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
}
.mbe-ws-list { margin: 0; padding-left: 18px; }
.mbe-ws-list li {
  font-size: 13.5px;
  line-height: 1.6;
  color: #43413a;
  margin-bottom: 6px;
}
.mbe-ws-keyref {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--gold-rich);
  margin-bottom: 6px;
}
.mbe-ws-tile--key p,
.mbe-ws-tile--word p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #43413a;
}
.mbe-ws-origword {
  font-size: 17px;
  color: var(--green-deep);
  font-weight: 700;
  margin-bottom: 6px;
}
.mbe-ws-origword em { color: var(--earth); font-weight: 500; font-size: 14px; }

/* Cross references */
.mbe-ws-cross-wrap { display: flex; flex-direction: column; gap: 8px; }
.mbe-ws-cross {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(15,45,26,.035);
  border-radius: 8px;
  border-left: 3px solid var(--gold-rich);
}
.mbe-ws-cross__ref {
  font-weight: 700;
  color: var(--green-deep);
  font-size: 13px;
  white-space: nowrap;
}
.mbe-ws-cross__note { font-size: 13px; color: #43413a; line-height: 1.5; }

/* Reflection */
.mbe-ws-reflect {
  margin-top: 16px;
  background: linear-gradient(135deg, var(--green-deep) 0%, #163f27 100%);
  border-radius: 14px;
  padding: 18px 20px;
  color: #eef5ee;
}
.mbe-ws-reflect__h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-light, #e9c65a);
  margin-bottom: 8px;
}
.mbe-ws-reflect ul { margin: 0; padding-left: 18px; }
.mbe-ws-reflect li { font-size: 14px; line-height: 1.65; margin-bottom: 7px; }

/* Footer */
.mbe-ws-footer {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mbe-ws-cachechip {
  font-size: 11.5px;
  color: var(--earth);
  background: rgba(196,153,31,.10);
  border: 1px solid rgba(196,153,31,.28);
  padding: 4px 10px;
  border-radius: 12px;
}

@media (max-width: 720px) {
  .mbe-ws-flow { grid-template-columns: 1fr; }
  .mbe-ws-grid { grid-template-columns: 1fr; }
  .mbe-ws-cross { flex-direction: column; gap: 2px; }
  #mbe-ws-body { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   Footer legal/credit card — cute animated "certificate" frame
   Flowing gold→green border, soft breathing glow, dotted pattern,
   grow-in entrance. Responsive: 2 columns desktop, stacked mobile.
   ═══════════════════════════════════════════════════════════════ */
.mbe-legalcard{
  position:relative;
  flex:1 1 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 28px;
  align-items:center;
  padding:20px 26px;
  border-radius:18px;
  border:1px solid rgba(196,153,31,.35);           /* fallback if mask unsupported */
  background:
    radial-gradient(circle at 1px 1px, rgba(196,153,31,.10) 1px, transparent 1.7px) 0 0/20px 20px,
    linear-gradient(160deg, rgba(20,52,32,.72), rgba(8,24,15,.85));
  box-shadow:0 10px 40px rgba(0,0,0,.28);
  overflow:hidden;
  isolation:isolate;
  animation:mbeCardIn .7s cubic-bezier(.22,1,.36,1) both, mbeCardGlow 4.5s ease-in-out infinite;
}
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .mbe-legalcard{ border:none; }
  .mbe-legalcard::before{
    content:"";
    position:absolute; inset:0;
    border-radius:inherit;
    padding:2px;
    background:linear-gradient(115deg,#c4991f,#e8c660,#3f9c6d,#e8c660,#c4991f);
    background-size:300% 100%;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite:exclude;
    animation:mbeBorderFlow 6s linear infinite;
    pointer-events:none;
  }
}
.mbe-legalcard .mbe-gfooter__copy{ flex:unset; margin:0; color:rgba(255,255,255,.55); line-height:1.65; }
.mbe-legalcard .mbe-gfooter__credit{ margin:0; color:rgba(255,255,255,.5); text-align:right; line-height:1.65; }
.mbe-legalcard .mbe-gfooter__copy a{ color:var(--gold-light); text-decoration:none; }
.mbe-legalcard .mbe-gfooter__copy a:hover{ color:#fff; }

@keyframes mbeBorderFlow{ 0%{background-position:0% 0} 100%{background-position:300% 0} }
@keyframes mbeCardGlow{ 0%,100%{box-shadow:0 8px 30px rgba(0,0,0,.28), 0 0 22px rgba(196,153,31,.05)} 50%{box-shadow:0 8px 30px rgba(0,0,0,.28), 0 0 34px rgba(196,153,31,.16)} }
@keyframes mbeCardIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }

@media (max-width:760px){
  .mbe-legalcard{ flex-basis:100%; grid-template-columns:1fr; gap:12px; text-align:center; padding:18px 16px; }
  .mbe-legalcard .mbe-gfooter__credit{ text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .mbe-legalcard, .mbe-legalcard::before{ animation:none; }
}

/* ── An unverified claim is not a registration ──────────────────────────────
   A plot somebody signed up for an hour ago is blocked from selection, like a
   registered one, but it must not LOOK like a registered one. Struck through
   and grey says "settled, go away". Amber says "spoken for, not yet decided",
   which is the truth and leaves the real owner room to come forward. */
.mbe-plot-chip--taken.mbe-plot-chip--pending {
  opacity: .72 !important;
  background: #fff7e6 !important;
  border-color: #e0a63c !important;
  color: #9a6a12 !important;
  text-decoration: none !important;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTATE PROJECTS (v3.65.0): cards, reader, committee editor
   ═══════════════════════════════════════════════════════════════════════════ */
.mbe-pj-grid { --pj-prop: #3565c9; --pj-prop-bg: #eaf0fc; --pj-ong: #c48a0c; --pj-ong-bg: #fdf3dc;
  --pj-done: #1f7a4a; --pj-done-bg: #e3f4ea; --pj-ink: #1a2a20; --pj-muted: #6a6450; --pj-line: #ece4d2;
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)) !important;
  gap: 22px !important; align-items: start; }
.mbe-pj-intro { margin: -6px 0 20px; color: #6a6450; font-size: 14px; line-height: 1.6; max-width: 720px; }
.mbe-pj-ico { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* ── Filters ── */
.mbe-pj-fdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.mbe-pj-fdot.is-proposed { background: #3565c9; } .mbe-pj-fdot.is-ongoing { background: #d9a118; } .mbe-pj-fdot.is-completed { background: #1f7a4a; }
.mbe-pj-count { display: inline-block; min-width: 20px; margin-left: 8px; padding: 1px 7px; border-radius: 10px;
  background: rgba(15,45,26,.08); font-size: 11.5px; font-weight: 700; text-align: center; }
.mbe-filter.active .mbe-pj-count, .mbe-filter:hover .mbe-pj-count { background: rgba(255,255,255,.2); }

/* ── Card ── */
.mbe-pj-card { position: relative; background: #fff; border: 1px solid var(--pj-line); border-radius: 18px;
  padding: 22px 22px 18px; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 2px rgba(15,45,26,.04), 0 8px 26px rgba(15,45,26,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: mbePjIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.mbe-pj-card:hover { transform: translateY(-3px); border-color: #e0d2ae; box-shadow: 0 2px 4px rgba(15,45,26,.05), 0 16px 40px rgba(15,45,26,.11); }
@keyframes mbePjIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.mbe-pj-card__band { position: absolute; inset: 0 0 auto 0; height: 5px; }
.mbe-pj-card.is-proposed .mbe-pj-card__band { background: linear-gradient(90deg, #3565c9, #7aa0ea); }
.mbe-pj-card.is-ongoing  .mbe-pj-card__band { background: linear-gradient(90deg, #c48a0c, #f0c85a, #c48a0c); background-size: 200% 100%; animation: mbePjBand 3.5s linear infinite; }
.mbe-pj-card.is-completed .mbe-pj-card__band { background: linear-gradient(90deg, #1f7a4a, #58b884); }
@keyframes mbePjBand { to { background-position: 200% 0; } }
.mbe-pj-ribbon { position: absolute; top: 14px; right: -34px; transform: rotate(38deg); background: linear-gradient(135deg,#c4991f,#e8c660);
  color: #2a1e00; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 40px; box-shadow: 0 2px 8px rgba(196,153,31,.35); }
.mbe-pj-ribbon.is-upd { background: linear-gradient(135deg,#1f7a4a,#3aa56c); color: #fff; }

.mbe-pj-card__head { display: flex; gap: 14px; align-items: flex-start; padding-right: 22px; }
.mbe-pj-badge { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.mbe-pj-badge .mbe-pj-ico { width: 24px; height: 24px; }
.mbe-pj-badge.is-proposed { background: var(--pj-prop-bg); color: var(--pj-prop); }
.mbe-pj-badge.is-ongoing  { background: var(--pj-ong-bg);  color: var(--pj-ong); }
.mbe-pj-badge.is-completed{ background: var(--pj-done-bg); color: var(--pj-done); }
.mbe-pj-card__titles { min-width: 0; flex: 1; }
.mbe-pj-card__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 700; line-height: 1.22;
  color: var(--pj-ink); margin: 0 0 9px; cursor: pointer; overflow-wrap: anywhere; }
.mbe-pj-card__title:hover { color: #1f5236; }

.mbe-pj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mbe-pj-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 30px; font-size: 11.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #f3efe5; color: #5d5642; }
.mbe-pj-chip.is-proposed { background: var(--pj-prop-bg, #eaf0fc); color: var(--pj-prop, #3565c9); }
.mbe-pj-chip.is-ongoing  { background: var(--pj-ong-bg, #fdf3dc);  color: var(--pj-ong, #c48a0c); }
.mbe-pj-chip.is-completed, .mbe-pj-chip.is-done { background: var(--pj-done-bg, #e3f4ea); color: var(--pj-done, #1f7a4a); }
.mbe-pj-chip.is-done { text-transform: none; letter-spacing: 0; font-weight: 600; }
.mbe-pj-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.mbe-pj-chip.is-ongoing .mbe-pj-dot { animation: mbePjPulse 1.8s ease-in-out infinite; }
@keyframes mbePjPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,154,26,.55); } 50% { box-shadow: 0 0 0 5px rgba(212,154,26,0); } }

.mbe-pj-byline { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #faf7ef; border-radius: 12px; }
.mbe-pj-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(135deg,#0f2d1a,#2d6b46); color: #f4ead2; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.mbe-pj-byline b { display: inline; font-size: 13.5px; color: var(--pj-ink); }
.mbe-pj-byline em { font-style: normal; font-size: 11.5px; color: #8a6c14; font-weight: 700; margin-left: 7px; }
.mbe-pj-byline span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--pj-muted); margin-top: 2px; }
.mbe-pj-byline span .mbe-pj-ico { width: 13px; height: 13px; }

.mbe-pj-summary { margin: 0; font-size: 14.5px; line-height: 1.72; color: #3c3a30; }

.mbe-pj-progress__top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--pj-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
.mbe-pj-progress__top b { color: var(--pj-ink); font-size: 14px; letter-spacing: 0; }
.mbe-pj-progress__track { height: 9px; border-radius: 9px; background: #f0ead9; overflow: hidden; }
.mbe-pj-progress__fill { height: 100%; width: 0; border-radius: 9px; transition: width 1.1s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(90deg,#1f7a4a,#c4991f); position: relative; overflow: hidden; }
.mbe-pj-card.is-completed .mbe-pj-progress__fill { background: linear-gradient(90deg,#1f7a4a,#3fae70); }
.mbe-pj-progress__fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform: translateX(-100%); animation: mbePjShine 2.8s ease-in-out 1.2s infinite; }
@keyframes mbePjShine { 60%,100% { transform: translateX(100%); } }

.mbe-pj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.mbe-pj-stats:empty { display: none; }
.mbe-pj-stat { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--pj-line); border-radius: 12px; }
.mbe-pj-stat .mbe-pj-ico { color: #b8891a; width: 20px; height: 20px; }
.mbe-pj-stat b { display: block; font-size: 14px; color: var(--pj-ink); white-space: nowrap; }
.mbe-pj-stat span { display: block; font-size: 11.5px; color: var(--pj-muted); }
.mbe-pj-updated { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #1f7a4a; font-weight: 600; }
.mbe-pj-updated .mbe-pj-ico { width: 14px; height: 14px; }

.mbe-pj-read { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border-radius: 12px; cursor: pointer;
  border: 0; font: inherit; font-size: 14px; font-weight: 700; color: #f4ead2; text-align: left;
  background: linear-gradient(135deg,#0f2d1a,#1f5236); transition: transform .2s ease, box-shadow .2s ease; }
.mbe-pj-read span { flex: 1; } .mbe-pj-read small { font-size: 12px; font-weight: 600; color: #e8c660; }
.mbe-pj-read:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,45,26,.25); }

.mbe-pj-manage { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 12px; border-top: 1px dashed var(--pj-line); }
.mbe-pj-act { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--pj-line); background: #fff; color: #2d3b31; transition: all .18s ease; }
.mbe-pj-act .mbe-pj-ico { width: 15px; height: 15px; }
.mbe-pj-act:hover { border-color: #c4991f; color: #6b5310; background: #fffaf0; }
.mbe-pj-act--ongoing  { border-color: #f0dca8; color: #8a620a; }
.mbe-pj-act--completed{ border-color: #bfe2cd; color: #1f7a4a; }
.mbe-pj-act--completed:hover { background: #1f7a4a; color: #fff; border-color: #1f7a4a; }
.mbe-pj-act--ongoing:hover { background: #c48a0c; color: #fff; border-color: #c48a0c; }

.mbe-pj-empty { grid-column: 1 / -1; text-align: center; padding: 56px 20px; border: 2px dashed #e6dcc4; border-radius: 18px; color: #6a6450; background: #fffdf7; }
.mbe-pj-empty .mbe-pj-ico { width: 44px; height: 44px; color: #c4991f; }
.mbe-pj-empty h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; color: #0f2d1a; margin: 10px 0 6px; }
.mbe-pj-loading { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; padding: 50px 0; }
.mbe-pj-loading span { width: 10px; height: 10px; border-radius: 50%; background: #c4991f; animation: mbePjDots 1s ease-in-out infinite; }
.mbe-pj-loading span:nth-child(2) { animation-delay: .15s; } .mbe-pj-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes mbePjDots { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-8px); opacity: 1; } }

/* ── Modal shell ── */
html.mbe-pj-lock, html.mbe-pj-lock body { overflow: hidden !important; }
.mbe-pj-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 720px) { .mbe-pj-modal { align-items: center; padding: 24px; } }
.mbe-pj-modal__backdrop { position: absolute; inset: 0; background: rgba(8,22,13,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
.mbe-pj-modal__sheet { position: relative; width: 100%; max-width: 820px; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  background: #fffdf8; border-radius: 22px 22px 0 0; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: translateY(40px); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
@media (min-width: 720px) { .mbe-pj-modal__sheet { border-radius: 22px; } }
.mbe-pj-modal--form .mbe-pj-modal__sheet { max-width: 680px; }
.mbe-pj-modal--small .mbe-pj-modal__sheet { max-width: 480px; }
.mbe-pj-modal.show .mbe-pj-modal__backdrop { opacity: 1; }
.mbe-pj-modal.show .mbe-pj-modal__sheet { transform: none; opacity: 1; }
.mbe-pj-modal__x { position: sticky; top: 12px; float: right; margin: 12px 12px -48px 0; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #0f2d1a; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.mbe-pj-modal__x:hover { background: #fff; transform: rotate(90deg); transition: transform .25s ease; }

/* ── Reader ── */
.mbe-pj-rd__hero { padding: 34px 32px 26px; color: #f4ead2; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(232,198,96,.28), transparent 55%), linear-gradient(135deg,#0f2d1a 0%,#1f5236 60%,#153a25 100%); }
.mbe-pj-rd__hero.is-proposed { background: radial-gradient(120% 140% at 100% 0%, rgba(122,160,234,.35), transparent 55%), linear-gradient(135deg,#132a4a,#24488a 60%,#172f58); }
.mbe-pj-rd__hero.is-completed { background: radial-gradient(120% 140% at 100% 0%, rgba(88,184,132,.35), transparent 55%), linear-gradient(135deg,#0d3320,#1f7a4a 60%,#145a35); }
.mbe-pj-rd__badge { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.14); margin-bottom: 14px; }
.mbe-pj-rd__badge .mbe-pj-ico { width: 28px; height: 28px; }
.mbe-pj-chip.is-light { background: rgba(255,255,255,.16); color: #fff; }
.mbe-pj-rd__hero h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(26px, 4vw, 36px); line-height: 1.15; margin: 14px 0 16px; color: #fff; }
.mbe-pj-rd__by { display: flex; gap: 11px; align-items: center; }
.mbe-pj-rd__by .mbe-pj-avatar { background: linear-gradient(135deg,#c4991f,#e8c660); color: #2a1e00; }
.mbe-pj-rd__by b { display: block; font-size: 14px; color: #fff; } .mbe-pj-rd__by span { font-size: 12.5px; opacity: .8; }
.mbe-pj-rd__bar { margin-top: 20px; height: 8px; border-radius: 8px; background: rgba(255,255,255,.18); overflow: hidden; }
.mbe-pj-rd__bar div { height: 100%; border-radius: 8px; background: linear-gradient(90deg,#e8c660,#fff3c4); animation: mbePjGrow 1.2s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; }
@keyframes mbePjGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mbe-pj-rd__pct { font-size: 12.5px; font-weight: 700; margin-top: 6px; color: #e8c660; }
.mbe-pj-rd__body { padding: 26px 32px 36px; }
.mbe-pj-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 26px; }
.mbe-pj-facts div { padding: 11px 14px; background: #fff; border: 1px solid #ece4d2; border-radius: 12px; }
.mbe-pj-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8a7d5c; font-weight: 700; }
.mbe-pj-facts dd { margin: 3px 0 0; font-size: 15px; font-weight: 700; color: #1a2a20; }

/* The formatted description */
.mbe-pj-doc { font-size: 16px; line-height: 1.8; color: #2f2d25; }
.mbe-pj-doc p { margin: 0 0 18px; }
.mbe-pj-doc > p:first-child { font-size: 17.5px; color: #1a2a20; }
.mbe-pj-doc strong { color: #0f2d1a; }
.mbe-pj-doc .mbe-pj-money { font-weight: 700; color: #6b5310; white-space: nowrap; }
.mbe-pj-h { display: flex; align-items: center; gap: 11px; font-family: 'Cormorant Garamond', Georgia, serif; color: #0f2d1a; line-height: 1.25; }
.mbe-pj-h--3 { font-size: 24px; margin: 30px 0 12px; padding-bottom: 9px; border-bottom: 2px solid #f0e6cc; }
.mbe-pj-h--4 { font-size: 19px; margin: 26px 0 8px; }
.mbe-pj-doc > .mbe-pj-h:first-child { margin-top: 0; }
.mbe-pj-h__num { flex-shrink: 0; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center;
  font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 800; color: #2a1e00; background: linear-gradient(135deg,#c4991f,#e8c660); }
.mbe-pj-h--4 .mbe-pj-h__num { min-width: 28px; height: 26px; font-size: 12px; background: #f3e7c4; color: #6b5310; }
.mbe-pj-h__dot { width: 8px; height: 8px; border-radius: 50%; background: #c4991f; flex-shrink: 0; }
.mbe-pj-list { margin: 0 0 18px; padding: 0; list-style: none; }
.mbe-pj-list li { position: relative; padding: 4px 0 4px 30px; }
ul.mbe-pj-list li::before { content: ''; position: absolute; left: 9px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: #1f7a4a; box-shadow: 0 0 0 3px #e3f4ea; }
ol.mbe-pj-list { counter-reset: pj; }
ol.mbe-pj-list li { counter-increment: pj; }
ol.mbe-pj-list li::before { content: counter(pj); position: absolute; left: 0; top: 6px; width: 21px; height: 21px; border-radius: 50%;
  background: #0f2d1a; color: #f4ead2; font-size: 11px; font-weight: 800; display: grid; place-items: center; line-height: 21px; text-align: center; }

/* Journal */
.mbe-pj-journal { margin-top: 30px; padding-top: 22px; border-top: 1px solid #ece4d2; }
.mbe-pj-journal h3 { display: flex; align-items: center; gap: 8px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: #0f2d1a; margin: 0 0 16px; }
.mbe-pj-journal h3 .mbe-pj-ico { color: #c4991f; }
.mbe-pj-journal ol { list-style: none; margin: 0; padding: 0; position: relative; }
.mbe-pj-journal ol::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: #efe6cf; }
.mbe-pj-jr { position: relative; display: flex; gap: 14px; padding: 0 0 18px; }
.mbe-pj-jr > i { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; background: #fff; border: 3px solid #c4991f; }
.mbe-pj-jr.is-complete > i { border-color: #1f7a4a; background: #1f7a4a; }
.mbe-pj-jr.is-stage > i, .mbe-pj-jr.is-reopen > i { border-color: #c48a0c; }
.mbe-pj-jr.is-created > i { border-color: #3565c9; }
.mbe-pj-jr b { display: block; font-size: 14.5px; color: #1a2a20; }
.mbe-pj-jr p { margin: 4px 0; font-size: 14px; line-height: 1.6; color: #3c3a30; }
.mbe-pj-jr span { font-size: 12px; color: #8a7d5c; }

/* ── Forms ── */
.mbe-pj-form { padding: 30px 30px 26px; }
.mbe-pj-form h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; color: #0f2d1a; margin: 0 0 6px; padding-right: 40px; }
.mbe-pj-form__lead { margin: 0 0 20px; color: #6a6450; font-size: 14px; line-height: 1.6; }
.mbe-pj-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .mbe-pj-row { grid-template-columns: 1fr; gap: 0; } .mbe-pj-form, .mbe-pj-rd__body { padding-left: 20px; padding-right: 20px; } .mbe-pj-rd__hero { padding: 30px 20px 22px; } }
.mbe-pj-f { display: block; margin-bottom: 14px; }
.mbe-pj-f > span { display: block; font-size: 12.5px; font-weight: 700; color: #3d4a40; margin-bottom: 6px; }
.mbe-pj-f > small { display: block; font-size: 12px; color: #8a7d5c; margin-top: 5px; }
.mbe-pj-f input:not([type=range]), .mbe-pj-f select, .mbe-pj-f textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; font: inherit; font-size: 14px;
  border: 1.5px solid #e0d8c8; border-radius: 10px; background: #fff; color: #1a2a20; transition: border-color .15s ease, box-shadow .15s ease; }
.mbe-pj-f textarea { line-height: 1.6; resize: vertical; }
.mbe-pj-f input:focus, .mbe-pj-f select:focus, .mbe-pj-f textarea:focus { outline: 0; border-color: #c4991f; box-shadow: 0 0 0 4px rgba(196,153,31,.14); }
.mbe-pj-f input[type=range], .mbe-pj-dial input { width: 100%; accent-color: #1f7a4a; margin-top: 8px; }
.mbe-pj-dial { text-align: center; padding: 18px; border-radius: 14px; background: #faf7ef; margin-bottom: 12px; }
.mbe-pj-dial b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 46px; color: #0f2d1a; line-height: 1; }
.mbe-pj-hint { font-size: 12.5px; color: #6b5310; background: #fdf6e3; padding: 9px 12px; border-radius: 10px; margin: 0 0 14px; }
.mbe-pj-toggle { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid #ece4d2; border-radius: 12px; margin-bottom: 12px; cursor: pointer; }
.mbe-pj-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.mbe-pj-toggle i { flex-shrink: 0; width: 40px; height: 23px; border-radius: 23px; background: #d9d2c0; position: relative; transition: background .2s ease; margin-top: 1px; }
.mbe-pj-toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s ease; }
.mbe-pj-toggle input:checked + i { background: #1f7a4a; }
.mbe-pj-toggle input:checked + i::after { transform: translateX(17px); }
.mbe-pj-toggle input:focus-visible + i { box-shadow: 0 0 0 3px rgba(196,153,31,.35); }
.mbe-pj-toggle b { display: block; font-size: 13.5px; color: #1a2a20; }
.mbe-pj-toggle small { display: block; font-size: 12px; color: #8a7d5c; margin-top: 2px; line-height: 1.5; }
.mbe-pj-form__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.mbe-pj-btn { padding: 12px 22px; border-radius: 11px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; transition: all .18s ease; }
.mbe-pj-btn.is-ghost { background: #fff; border-color: #e0d8c8; color: #3d4a40; }
.mbe-pj-btn.is-gold { background: linear-gradient(135deg,#c4991f,#e8c660); color: #241a00; border-color: #c4991f; }
.mbe-pj-btn.is-gold:hover { box-shadow: 0 8px 20px rgba(196,153,31,.35); transform: translateY(-1px); }
.mbe-pj-btn[disabled] { opacity: .6; cursor: progress; }
.mbe-pj-btn.is-busy { position: relative; color: transparent !important; }
.mbe-pj-btn.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2.5px solid rgba(36,26,0,.25); border-top-color: #241a00; animation: mbePjSpin .7s linear infinite; }
@keyframes mbePjSpin { to { transform: rotate(360deg); } }
.mbe-pj-stagehead { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 14px; }
.mbe-pj-stagehead .mbe-pj-ico { width: 30px; height: 30px; }
.mbe-pj-stagehead.is-completed { background: #e3f4ea; color: #1f7a4a; }
.mbe-pj-stagehead.is-ongoing { background: #fdf3dc; color: #c48a0c; }
.mbe-pj-stagehead.is-proposed { background: #eaf0fc; color: #3565c9; }

/* ── Toast & confetti ── */
.mbe-pj-toast { position: fixed; left: 50%; bottom: 26px; z-index: 100001; transform: translate(-50%, 30px); opacity: 0; max-width: min(92vw, 520px);
  padding: 13px 20px; border-radius: 12px; background: #0f2d1a; color: #f4ead2; font-size: 14px; font-weight: 600; line-height: 1.5;
  box-shadow: 0 12px 34px rgba(0,0,0,.3); border-left: 4px solid #c4991f; transition: all .35s cubic-bezier(.2,.8,.2,1); }
.mbe-pj-toast.show { transform: translate(-50%, 0); opacity: 1; }
.mbe-pj-toast.is-err { background: #4a1512; border-left-color: #ff8a80; }
.mbe-pj-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100002; overflow: hidden; }
.mbe-pj-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: mbePjFall linear forwards; }
@keyframes mbePjFall { to { transform: translateY(105vh) rotate(720deg); opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
  .mbe-pj-card, .mbe-pj-card__band, .mbe-pj-dot, .mbe-pj-progress__fill::after, .mbe-pj-rd__bar div, .mbe-pj-loading span { animation: none !important; }
  .mbe-pj-card:hover, .mbe-pj-read:hover { transform: none; }
  .mbe-pj-progress__fill, .mbe-pj-modal__sheet { transition: none; }
}
.mbe-pj-numpara { display: flex; gap: 12px; align-items: flex-start; }
.mbe-pj-numpara .mbe-pj-h__num { margin-top: 2px; }

/* ═══ ESTATE NEWS AND NOTICES (v3.66.0): category colours on the shared cards ═══ */
.mbe-nw-card { --nw: #1f7a4a; --nw-bg: #e3f4ea; }
.is-cat-announcement { --nw: #b07d0c; --nw-bg: #fdf3dc; }
.is-cat-event        { --nw: #3565c9; --nw-bg: #eaf0fc; }
.is-cat-notice       { --nw: #b4452f; --nw-bg: #fbe9e4; }
.is-cat-news         { --nw: #1f7a4a; --nw-bg: #e3f4ea; }
.mbe-nw-card .mbe-pj-card__band { background: var(--nw); }
.mbe-nw-card .mbe-pj-card__band { background: linear-gradient(90deg, var(--nw), color-mix(in srgb, var(--nw) 55%, #fff)); }
.mbe-pj-badge[class*="is-cat-"], .mbe-pj-chip[class*="is-cat-"] { background: var(--nw-bg); color: var(--nw); }
.mbe-pj-fdot.is-cat-news { background: #1f7a4a; } .mbe-pj-fdot.is-cat-announcement { background: #d9a118; }
.mbe-pj-fdot.is-cat-event { background: #3565c9; } .mbe-pj-fdot.is-cat-notice { background: #b4452f; }
.mbe-nw-card.is-pinned { border-color: #e6cf8c; box-shadow: 0 0 0 1px #f0e0b0, 0 10px 30px rgba(196,153,31,.14); }
.mbe-nw-card.is-hidden { opacity: .72; background: repeating-linear-gradient(135deg,#fff,#fff 12px,#faf7ef 12px,#faf7ef 24px); }
.mbe-nw-card.is-hidden:hover { opacity: 1; }
.mbe-pj-chip.is-pin { background: #fdf3dc; color: #8a620a; text-transform: none; letter-spacing: 0; }
.mbe-pj-chip.is-hid { background: #efeae0; color: #6a6450; text-transform: none; letter-spacing: 0; }
.mbe-pj-chip .mbe-pj-ico { width: 13px; height: 13px; }

.mbe-nw-event { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg,#eef3fd,#f7f9ff); border: 1px solid #d9e4fa; }
.mbe-nw-event__tile { flex-shrink: 0; width: 54px; border-radius: 12px; overflow: hidden; text-align: center; background: #fff; box-shadow: 0 2px 8px rgba(53,101,201,.15); }
.mbe-nw-event__tile b { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 1.2; color: #1c3f86; padding-top: 3px; }
.mbe-nw-event__tile span { display: block; background: #3565c9; color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 2px 0; }
.mbe-nw-event strong { display: block; font-size: 14px; color: #1a2a4a; }
.mbe-nw-event > div > span { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #4a5a7a; margin-top: 3px; }
.mbe-nw-event .mbe-pj-ico { width: 14px; height: 14px; }
.mbe-nw-event.is-past { background: #f5f3ee; border-color: #e6e0d2; }
.mbe-nw-event.is-past .mbe-nw-event__tile span { background: #8a8470; }
.mbe-nw-event.is-past .mbe-nw-event__tile b { color: #6a6450; }

.mbe-pj-rd__hero.is-cat-announcement { background: radial-gradient(120% 140% at 100% 0%, rgba(240,200,90,.35), transparent 55%), linear-gradient(135deg,#3d2c05,#8a620a 60%,#5a4007); }
.mbe-pj-rd__hero.is-cat-event { background: radial-gradient(120% 140% at 100% 0%, rgba(122,160,234,.35), transparent 55%), linear-gradient(135deg,#132a4a,#24488a 60%,#172f58); }
.mbe-pj-rd__hero.is-cat-notice { background: radial-gradient(120% 140% at 100% 0%, rgba(240,140,110,.3), transparent 55%), linear-gradient(135deg,#3f1409,#8e3522 60%,#5c1f12); }

/* Dashboard "Recent News" */
.mbe-nw-ov { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; border-bottom: 1px solid #f0e9d8;
  background: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .2s ease;
  animation: mbePjIn .45s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
.mbe-nw-ov:last-child { border-bottom: 0; }
.mbe-nw-ov:hover { background: #fcf9f1; }
.mbe-nw-ov__ico { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--nw-bg, #e3f4ea); color: var(--nw, #1f7a4a); }
.mbe-nw-ov__txt { flex: 1; min-width: 0; }
.mbe-nw-ov__txt b { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #1a2a20; }
.mbe-nw-ov__txt b .is-pin { width: 14px; height: 14px; color: #b07d0c; }
.mbe-nw-ov__txt em { display: block; font-style: normal; font-size: 13px; color: #5d5a4c; line-height: 1.5; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mbe-nw-ov__txt small { display: block; font-size: 12px; color: #8a7d5c; margin-top: 4px; }
.mbe-nw-ov__go { font-size: 26px; color: #c4991f; transition: transform .2s ease; }
.mbe-nw-ov:hover .mbe-nw-ov__go { transform: translateX(4px); }
.mbe-nw-ov-empty { padding: 22px 18px; color: #8a7d5c; font-size: 14px; }

/* v3.67.0: lets the autofill guard notice Chrome filling a search box late. */
@keyframes mbeAutofillStart { from { opacity: 1; } to { opacity: 1; } }
#residentSearch:-webkit-autofill, #rgcSearch:-webkit-autofill { animation-name: mbeAutofillStart; animation-duration: 1ms; }

/* v3.71.0: estate land in the registration plot picker */
.mbe-plot-chip--taken.mbe-plot-chip--shared{background:#eaf3ec !important;border-color:#1f5b38 !important;color:#1f5b38 !important;text-decoration:none !important}

/* v3.71.1: owners with more than one plot see them all on the dashboard */
.mbe-kpi__plots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;font-size:26px}
.mbe-kpi__plot{display:inline-flex;align-items:center;line-height:1;padding:4px 10px 5px;border-radius:10px;background:#f4efe2;color:var(--green-deep,#1c5b3a);border:1px solid #e6dcc3}
.mbe-kpi__plot.is-primary{background:#fdf6e3;border-color:#d9b54e;box-shadow:inset 0 -2px 0 #d9b54e}
.mbe-kpi__plots.is-many{font-size:19px;gap:5px}
.mbe-kpi__plots.is-many .mbe-kpi__plot{padding:3px 7px 4px;border-radius:8px}
.mbe-kpi__sub{display:block;margin-top:3px;font-size:11px;letter-spacing:0;opacity:.85;color:#9a7a1f}
@media (max-width:640px){.mbe-kpi__plots{font-size:18px;gap:4px}.mbe-kpi__plot{padding:3px 7px 4px;border-radius:8px}.mbe-kpi__sub{font-size:9.5px}}

/* ═══ v3.71.2: Back button in the portal top bar ═══════════════════════ */
.mbe-backbtn{display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;max-width:280px;height:38px;padding:0 14px 0 9px;border:1px solid #e2d6b4;border-radius:999px;background:#fdf8ea;color:var(--green-deep,#1c5b3a);font:inherit;font-size:13.5px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.mbe-backbtn[hidden]{display:none !important}
.mbe-backbtn svg{width:18px;height:18px;flex:0 0 18px;transition:transform .15s ease}
.mbe-backbtn:hover{background:#f8eed2;border-color:#d4b25a}
.mbe-backbtn:hover svg{transform:translateX(-2px)}
.mbe-backbtn:active{transform:scale(.97)}
.mbe-backbtn:focus-visible{outline:2px solid #1f6fd6;outline-offset:2px}
.mbe-backbtn__txt{overflow:hidden;text-overflow:ellipsis;min-width:0}
.mbe-backbtn__lead{font-weight:500;color:#7a6a3a}
@media (max-width:640px){
  .mbe-backbtn{height:36px;padding:0 11px 0 7px;max-width:44vw;font-size:13px}
  .mbe-backbtn__lead{display:none}
}
@media (prefers-reduced-motion:reduce){.mbe-backbtn,.mbe-backbtn svg{transition:none}}

/* Signed-in shortcut on the public home page */
a.mbe-nav__signin-btn--in{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
@media (max-width:640px){
  .mbe-portal__topbar:has(.mbe-backbtn:not([hidden])) .mbe-portal__greeting{font-size:13px;min-width:0}
}

/* ═══ v3.71.3: floating Back button on phones and tablets ═════════════
   Sits bottom-left, level with the settings button on the right. It can be
   dragged up or down either edge and glides to the nearest side on release.
   Shrinks to a round arrow while you read down a page. */
.mbe-backfab{position:fixed;left:14px;left:max(14px,env(safe-area-inset-left));bottom:22px;z-index:97;display:none;align-items:center;gap:9px;height:50px;max-width:min(62vw,250px);padding:0 16px 0 5px;border:1.5px solid rgba(214,178,74,.7);border-radius:999px;background:linear-gradient(135deg,#1b4a2e 0%,#0f2d1a 100%);color:#fff;font-family:Inter,system-ui,sans-serif;text-align:left;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 10px 24px rgba(8,28,16,.30),0 2px 6px rgba(8,28,16,.18),inset 0 1px 0 rgba(255,255,255,.08);transition:bottom .35s cubic-bezier(.2,.8,.2,1),left .35s cubic-bezier(.2,.8,.2,1),right .35s cubic-bezier(.2,.8,.2,1),max-width .3s ease,padding .3s ease,opacity .2s ease,transform .18s ease}
.mbe-backfab.is-right{left:auto;right:14px;right:max(14px,env(safe-area-inset-right))}
.mbe-backfab svg{width:20px;height:20px;flex:0 0 20px;padding:9px;box-sizing:content-box;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(248,222,140,.28),rgba(232,198,96,.12));color:#f0d27a}
.mbe-backfab__txt{display:flex;flex-direction:column;min-width:0;line-height:1.12;overflow:hidden;transition:opacity .2s ease}
.mbe-backfab__lead{font-size:14.5px;font-weight:700;letter-spacing:.15px}
.mbe-backfab .mbe-backbtn__to{font-size:11.5px;font-weight:500;color:#dccb8e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbe-backfab:active:not(.is-dragging){transform:scale(.95)}
.mbe-backfab:focus-visible{outline:3px solid #e8c660;outline-offset:3px}
.mbe-backfab.is-compact{max-width:50px;padding:0 4px}
.mbe-backfab.is-compact .mbe-backfab__txt{opacity:0}
.mbe-backfab.is-dragging{transition:none;cursor:grabbing;box-shadow:0 18px 38px rgba(8,28,16,.4),0 4px 10px rgba(8,28,16,.2)}
.mbe-backfab-tip{position:absolute;left:0;bottom:calc(100% + 10px);white-space:nowrap;padding:7px 11px;border-radius:10px;background:#fffdf6;color:#1c5b3a;font-size:12px;font-weight:600;border:1px solid #e6cf8f;box-shadow:0 8px 20px rgba(8,28,16,.18);opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.mbe-backfab.is-right .mbe-backfab-tip{left:auto;right:0}
.mbe-backfab-tip.is-show{opacity:1;transform:none}
@media (max-width:900px){
  .mbe-backfab:not([hidden]){display:inline-flex}
  .mbe-portal__topbar .mbe-backbtn{display:none !important}
  body[data-mbe-section] .mbe-portal__main{padding-bottom:84px}
  /* chatroom: its message box is at the bottom, so use the top-bar button there */
  body[data-mbe-section="chat"] .mbe-backfab{display:none !important}
  body[data-mbe-section="chat"] .mbe-portal__topbar .mbe-backbtn:not([hidden]){display:inline-flex !important}
  body.mbe-menu-open .mbe-backfab,body.mbe-typing .mbe-backfab{opacity:0;pointer-events:none;transform:translateY(14px)}
}
@media (max-width:360px){.mbe-backfab{max-width:58vw}}
@media print{.mbe-backfab{display:none !important}}
@media (prefers-reduced-motion:reduce){.mbe-backfab,.mbe-backfab-tip,.mbe-backfab__txt{transition:none !important}}

/* ══════════════════════════════════════════════════════════════════════════════
   BAKERSFIELD BLOG (v3.72.0) — index + single article, standalone (no Divi)
   ══════════════════════════════════════════════════════════════════════════════ */
.mbe-blog-shell { display: flex; flex-direction: column; min-height: 100vh; background: #faf8f4; }
.mbe-blog-main  { flex: 1 0 auto; padding-bottom: 70px; }

.mbe-blog { max-width: 1160px; margin: 0 auto; padding: 40px 24px 0; }

/* Toolbar: category chips + search */
.mbe-blog__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.mbe-blog__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mbe-blog__filter {
  padding: 8px 16px; border-radius: 999px; border: 1px solid #e0d8c8; background: #fff;
  color: #3a3020; font-size: 13px; font-weight: 600; text-decoration: none; transition: all .2s;
}
.mbe-blog__filter:hover { border-color: #c4991f; color: #0f2d1a; }
.mbe-blog__filter.is-active { background: #0f2d1a; border-color: #0f2d1a; color: #e8c660; }
.mbe-blog__search { display: flex; align-items: center; background: #fff; border: 1px solid #e0d8c8; border-radius: 999px; overflow: hidden; min-width: 240px; }
.mbe-blog__search input { flex: 1; border: 0; outline: 0; padding: 10px 16px; font: inherit; font-size: 14px; background: transparent; color: #1a1208; min-width: 0; }
.mbe-blog__search button { border: 0; background: transparent; padding: 0 16px; cursor: pointer; font-size: 15px; }
.mbe-blog__search:focus-within { border-color: #c4991f; box-shadow: 0 0 0 3px rgba(196,153,31,.15); }

/* Grid + cards */
.mbe-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.mbe-blog__card {
  background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid #ede5d4;
  box-shadow: 0 2px 12px rgba(15,45,26,.06); transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.mbe-blog__card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15,45,26,.14); }
.mbe-blog__card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.mbe-blog__card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, #0f2d1a, #1d5334); }
.mbe-blog__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.mbe-blog__card:hover .mbe-blog__card-media img { transform: scale(1.05); }
.mbe-blog__card-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 46px; opacity: .55; }
.mbe-blog__chip {
  position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px;
  background: rgba(15,45,26,.88); color: #e8c660; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.mbe-blog__card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.mbe-blog__meta { display: flex; flex-wrap: wrap; gap: 6px; color: #7a6840; font-size: 12.5px; font-weight: 500; }
.mbe-blog__card-title {
  margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; color: #0f2d1a;
  font-size: 23px; line-height: 1.2;
}
.mbe-blog__card-excerpt { margin: 0; color: #3a3020; font-size: 14.5px; line-height: 1.65; }
.mbe-blog__readmore { margin-top: auto; padding-top: 6px; color: #c4991f; font-size: 13.5px; font-weight: 700; }
.mbe-blog__card:hover .mbe-blog__readmore span { display: inline-block; transform: translateX(4px); transition: transform .2s; }

/* Featured (first article on page 1) */
.mbe-blog__card--featured { grid-column: 1 / -1; }
.mbe-blog__card--featured .mbe-blog__card-link { flex-direction: row; }
.mbe-blog__card--featured .mbe-blog__card-media { flex: 0 0 56%; aspect-ratio: auto; min-height: 340px; }
.mbe-blog__card--featured .mbe-blog__card-body { padding: 36px 38px; justify-content: center; }
.mbe-blog__card--featured .mbe-blog__card-title { font-size: 36px; }
.mbe-blog__card--featured .mbe-blog__card-excerpt { font-size: 16px; }

/* Buttons + pager */
.mbe-blog__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 24px; border-radius: 999px; border: 2px solid #0f2d1a; background: #0f2d1a;
  color: #e8c660; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .2s;
}
.mbe-blog__btn:hover { background: #1a4a2f; border-color: #1a4a2f; color: #f5e9b0; }
.mbe-blog__btn--ghost { background: transparent; color: #0f2d1a; border-color: #d8ccb2; }
.mbe-blog__btn--ghost:hover { background: #fff; border-color: #c4991f; color: #0f2d1a; }
.mbe-blog__pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 44px; }
.mbe-blog__pager-count { color: #7a6840; font-size: 14px; }
.mbe-blog__section-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; color: #0f2d1a; text-align: center; margin: 0 0 28px; }
.mbe-blog--more { padding-top: 64px; }

/* ── Single article ─────────────────────────────────────────────────────── */
.mbe-article-shell .mbe-gp__title { font-size: clamp(28px, 4.4vw, 48px); max-width: 920px; margin-left: auto; margin-right: auto; }
.mbe-article-shell .mbe-gp__meta { flex-wrap: wrap; }
.mbe-article-shell .mbe-gp__meta span + span::before { content: "·"; margin-right: 14px; opacity: .6; }

.mbe-article { max-width: 780px; margin: 0 auto; padding: 30px 24px 0; }
.mbe-article__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #7a6840; margin-bottom: 26px; }
.mbe-article__crumbs a { color: #1a4a2f; text-decoration: none; font-weight: 600; }
.mbe-article__crumbs a:hover { color: #c4991f; }
.mbe-article__cover { margin: 0 0 34px; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(15,45,26,.16); }
.mbe-article__cover img { width: 100%; height: auto; display: block; max-height: 520px; object-fit: cover; }

.mbe-article__content { color: #1a1208; font-size: 17.5px; line-height: 1.85; overflow-wrap: break-word; }
.mbe-article__content > * { margin-top: 0; margin-bottom: 1.3em; }
.mbe-article__content h2, .mbe-article__content h3, .mbe-article__content h4 {
  font-family: 'Cormorant Garamond', Georgia, serif; color: #0f2d1a; line-height: 1.2; margin-top: 1.8em; margin-bottom: .6em;
}
.mbe-article__content h2 { font-size: 34px; }
.mbe-article__content h3 { font-size: 27px; }
.mbe-article__content h4 { font-size: 22px; }
.mbe-article__content a { color: #1a4a2f; text-decoration: underline; text-decoration-color: #c4991f; text-underline-offset: 3px; }
.mbe-article__content a:hover { color: #c4991f; }
.mbe-article__content img { max-width: 100%; height: auto; border-radius: 12px; }
.mbe-article__content figure { margin-left: 0; margin-right: 0; }
.mbe-article__content figcaption { font-size: 13.5px; color: #7a6840; text-align: center; margin-top: 8px; }
.mbe-article__content ul, .mbe-article__content ol { padding-left: 1.4em; }
.mbe-article__content li { margin-bottom: .4em; }
.mbe-article__content blockquote {
  margin-left: 0; margin-right: 0; padding: 18px 24px; border-left: 4px solid #c4991f; background: #f5efe0;
  border-radius: 0 12px 12px 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-style: italic; color: #0f2d1a;
}
.mbe-article__content blockquote p { margin: 0 0 .6em; }
.mbe-article__content blockquote p:last-child { margin-bottom: 0; }
.mbe-article__content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mbe-article__content th, .mbe-article__content td { border: 1px solid #e0d8c8; padding: 10px 12px; text-align: left; }
.mbe-article__content iframe, .mbe-article__content video { max-width: 100%; border-radius: 12px; }
.mbe-article__content hr { border: 0; height: 1px; background: #e0d8c8; margin: 2.4em 0; }

.mbe-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.mbe-article__tags span { padding: 5px 12px; border-radius: 999px; background: #ede5d4; color: #5a3e1b; font-size: 12.5px; font-weight: 600; }

.mbe-article__share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; padding: 20px 0; border-top: 1px solid #e0d8c8; border-bottom: 1px solid #e0d8c8; }
.mbe-article__share-label { font-weight: 700; color: #0f2d1a; font-size: 14px; margin-right: 6px; }
.mbe-article__share-btn {
  padding: 8px 16px; border-radius: 999px; border: 1px solid #d8ccb2; background: #fff; color: #0f2d1a;
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all .2s;
}
.mbe-article__share-btn:hover { border-color: #c4991f; background: #0f2d1a; color: #e8c660; }

.mbe-article__adjacent { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.mbe-article__adj {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 14px; background: #fff;
  border: 1px solid #ede5d4; text-decoration: none; color: #0f2d1a; transition: all .2s;
}
.mbe-article__adj:hover { border-color: #c4991f; box-shadow: 0 10px 28px rgba(15,45,26,.1); }
.mbe-article__adj small { color: #c4991f; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.mbe-article__adj strong { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; line-height: 1.25; }
.mbe-article__adj--next { text-align: right; }

@media (max-width: 960px) {
  .mbe-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mbe-blog__card--featured .mbe-blog__card-link { flex-direction: column; }
  .mbe-blog__card--featured .mbe-blog__card-media { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  .mbe-blog__card--featured .mbe-blog__card-body { padding: 24px; }
  .mbe-blog__card--featured .mbe-blog__card-title { font-size: 28px; }
}
@media (max-width: 640px) {
  .mbe-blog { padding: 28px 16px 0; }
  .mbe-blog__grid { grid-template-columns: 1fr; gap: 20px; }
  .mbe-blog__toolbar { flex-direction: column; align-items: stretch; }
  .mbe-blog__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .mbe-blog__filter { white-space: nowrap; }
  .mbe-blog__search { min-width: 0; }
  .mbe-article { padding: 22px 16px 0; }
  .mbe-article__content { font-size: 16.5px; }
  .mbe-article__content h2 { font-size: 28px; }
  .mbe-article__adjacent { grid-template-columns: 1fr; }
  .mbe-article__adj--next { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TODAY'S WORD & PRAYER FOR BAKERS (v3.73.0) — top of both dashboards
   ══════════════════════════════════════════════════════════════════════════════ */
@property --ep-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.mbe-ep {
  position: relative; margin: 0 0 28px; padding: 2px; border-radius: 20px;
  background: conic-gradient(from var(--ep-angle), #c4991f, #f5e9b0, #e8a87c, #0f2d1a 40%, #0f2d1a 60%, #e8c660, #c4991f);
  animation: mbeEpSpin 7s linear infinite;
  box-shadow: 0 18px 50px rgba(15,45,26,.28), 0 0 0 1px rgba(196,153,31,.15);
}
@keyframes mbeEpSpin { to { --ep-angle: 360deg; } }

.mbe-ep__inner {
  position: relative; overflow: hidden; border-radius: 18px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(232,168,124,.22), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(232,198,96,.14), transparent 50%),
    linear-gradient(145deg, #0b2415 0%, #123a22 55%, #1a4a2f 100%);
  color: #f5e9b0;
}
.mbe-ep__body { position: relative; z-index: 2; padding: 26px 30px 24px; }

/* Ambient light — a slow dawn glow, like a heartbeat under the surface */
.mbe-ep__glow { position: absolute; border-radius: 50%; filter: blur(46px); pointer-events: none; z-index: 1; }
.mbe-ep__glow--1 { width: 300px; height: 300px; right: -80px; top: -120px; background: rgba(232,168,124,.30); animation: mbeEpBreathe 6s ease-in-out infinite; }
.mbe-ep__glow--2 { width: 260px; height: 260px; left: -90px; bottom: -130px; background: rgba(196,153,31,.26); animation: mbeEpBreathe 6s ease-in-out 3s infinite; }
@keyframes mbeEpBreathe { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.18); opacity: 1; } }

.mbe-ep__stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mbe-ep__stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f5e9b0; box-shadow: 0 0 6px #e8c660; opacity: 0; animation: mbeEpTwinkle 4s ease-in-out infinite; }
.mbe-ep__stars i:nth-child(1) { left: 8%;  top: 18%; animation-delay: .2s; }
.mbe-ep__stars i:nth-child(2) { left: 22%; top: 72%; animation-delay: 1.4s; }
.mbe-ep__stars i:nth-child(3) { left: 41%; top: 12%; animation-delay: 2.6s; }
.mbe-ep__stars i:nth-child(4) { left: 57%; top: 84%; animation-delay: .9s; }
.mbe-ep__stars i:nth-child(5) { left: 69%; top: 26%; animation-delay: 3.1s; }
.mbe-ep__stars i:nth-child(6) { left: 83%; top: 62%; animation-delay: 1.9s; }
.mbe-ep__stars i:nth-child(7) { left: 93%; top: 14%; animation-delay: 2.2s; }
.mbe-ep__stars i:nth-child(8) { left: 33%; top: 46%; animation-delay: 3.6s; }
@keyframes mbeEpTwinkle { 0%,100% { opacity: 0; transform: scale(.6); } 50% { opacity: .9; transform: scale(1.3); } }

/* Top row */
.mbe-ep__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.mbe-ep__badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: rgba(232,198,96,.14); border: 1px solid rgba(232,198,96,.35);
  color: #e8c660; font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.mbe-ep__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #e8a87c; box-shadow: 0 0 0 0 rgba(232,168,124,.7); animation: mbeEpPulse 1.6s ease-out infinite; }
@keyframes mbeEpPulse { 0% { box-shadow: 0 0 0 0 rgba(232,168,124,.7); } 70% { box-shadow: 0 0 0 9px rgba(232,168,124,0); } 100% { box-shadow: 0 0 0 0 rgba(232,168,124,0); } }
.mbe-ep__reading { font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; color: rgba(245,233,176,.72); }
.mbe-ep__reading strong { color: #f5e9b0; font-weight: 600; }

/* Theme — shimmering gold */
.mbe-ep__theme {
  margin: 0 0 12px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; line-height: 1.1;
  font-size: clamp(26px, 3.2vw, 36px);
  background: linear-gradient(100deg, #c4991f 0%, #f5e9b0 25%, #e8a87c 45%, #fff3d1 60%, #c4991f 85%);
  background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mbeEpShimmer 6s linear infinite;
}
@keyframes mbeEpShimmer { to { background-position: 250% center; } }

/* Scripture */
.mbe-ep__verse {
  margin: 0 0 16px; padding: 0; border: 0; background: none;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; line-height: 1.55; color: #fff6dc;
  text-shadow: 0 1px 12px rgba(0,0,0,.25);
}
.mbe-ep__qmark { color: #e8c660; font-size: 1.3em; line-height: 0; vertical-align: -.1em; margin: 0 2px; }
.mbe-ep__verse cite { display: inline-block; margin-left: 8px; font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-size: 12.5px; font-weight: 700; color: #e8c660; letter-spacing: .04em; white-space: nowrap; }

/* Word */
.mbe-ep__word { margin: 0 0 18px; font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.75; color: rgba(255,246,220,.92); }

/* Prayer */
.mbe-ep__prayer {
  position: relative; padding: 16px 20px 16px 22px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(232,198,96,.22); border-left: 3px solid #e8c660;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mbe-ep__prayer-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #e8a87c; }
.mbe-ep__heart { display: inline-block; font-size: 16px; animation: mbeEpHeartbeat 2.4s ease-in-out infinite; }
@keyframes mbeEpHeartbeat { 0%,40%,100% { transform: scale(1); } 10% { transform: scale(1.22); } 20% { transform: scale(1); } 30% { transform: scale(1.14); } }
.mbe-ep__prayer p { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18.5px; line-height: 1.6; color: #fff6dc; }

/* Footer + the link to the Beautiful Word */
.mbe-ep__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.mbe-ep .mbe-ep__link {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: rgba(232,198,96,.10); border: 1px solid rgba(232,198,96,.45);
  color: #f5e9b0; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.mbe-ep .mbe-ep__link:hover { background: #e8c660; border-color: #e8c660; color: #0f2d1a; transform: translateY(-1px); }
.mbe-ep__arrow { display: inline-block; animation: mbeEpNudge 1.8s ease-in-out infinite; }
@keyframes mbeEpNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.mbe-ep__regen { border: 1px dashed rgba(245,233,176,.35); background: transparent; color: rgba(245,233,176,.7); border-radius: 999px; padding: 6px 12px; font: 600 12px 'Inter', system-ui, sans-serif; cursor: pointer; }
.mbe-ep__regen:hover { color: #f5e9b0; border-color: #e8c660; }

/* Entrance — each part rises in turn */
.mbe-ep.is-ready .mbe-ep__body > * { animation: mbeEpRise .8s cubic-bezier(.2,.7,.2,1) both; }
.mbe-ep.is-ready .mbe-ep__body > *:nth-child(2) { animation-delay: .12s; }
.mbe-ep.is-ready .mbe-ep__body > *:nth-child(3) { animation-delay: .26s; }
.mbe-ep.is-ready .mbe-ep__body > *:nth-child(4) { animation-delay: .40s; }
.mbe-ep.is-ready .mbe-ep__body > *:nth-child(5) { animation-delay: .54s; }
.mbe-ep.is-ready .mbe-ep__body > *:nth-child(6) { animation-delay: .68s; }
@keyframes mbeEpRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* While the word is being written */
.mbe-ep__skeleton { padding: 4px 0 6px; }
.mbe-ep__waiting { margin: 0 0 14px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 19px; color: #fff6dc; animation: mbeEpFade 2.4s ease-in-out infinite; }
@keyframes mbeEpFade { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.mbe-ep__skeleton span { display: block; height: 12px; border-radius: 8px; margin: 10px 0; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(232,198,96,.22), rgba(255,255,255,.06)); background-size: 200% 100%; animation: mbeEpShimmer 1.6s linear infinite; }
.mbe-ep__skeleton span:nth-child(3) { width: 88%; }
.mbe-ep__skeleton span:nth-child(4) { width: 64%; }
.mbe-ep.is-loading .mbe-ep__regen { opacity: .4; pointer-events: none; }

@media (max-width: 640px) {
  .mbe-ep { margin-bottom: 22px; border-radius: 16px; }
  .mbe-ep__inner { border-radius: 14px; }
  .mbe-ep__body { padding: 20px 18px 18px; }
  .mbe-ep__verse { font-size: 18px; }
  .mbe-ep__verse cite { display: block; margin: 6px 0 0; }
  .mbe-ep__word { font-size: 14.5px; }
  .mbe-ep__prayer { padding: 14px 16px; }
  .mbe-ep__prayer p { font-size: 17px; }
  .mbe-ep .mbe-ep__link { width: 100%; justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mbe-ep, .mbe-ep *, .mbe-ep *::before { animation: none !important; }
}
@media print { .mbe-ep { display: none !important; } }

/* ── Today's Word: compact by default, unfolds on demand (v3.73.1) ─────────── */
.mbe-ep__body { padding: 18px 24px 16px; }
.mbe-ep__top { margin-bottom: 8px; }
.mbe-ep__theme { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 6px; }
.mbe-ep__verse { font-size: 18px; line-height: 1.5; margin-bottom: 0; }

/* Folded: the verse shows two lines, the reference stays visible under it */
.mbe-ep:not(.is-open) .mbe-ep__vtext {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.mbe-ep:not(.is-open) .mbe-ep__verse cite { display: block; margin: 4px 0 0; }

/* The word and prayer slide open and closed */
.mbe-ep__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1), opacity .35s ease; }
.mbe-ep__more-inner { overflow: hidden; min-height: 0; }
.mbe-ep.is-open .mbe-ep__more { grid-template-rows: 1fr; opacity: 1; }
.mbe-ep.is-open .mbe-ep__more-inner { padding-top: 14px; }
.mbe-ep__more .mbe-ep__word { margin-bottom: 14px; }

.mbe-ep__foot { margin-top: 14px; gap: 8px 10px; justify-content: flex-start; }
.mbe-ep__foot .mbe-ep__regen { margin-left: auto; }
.mbe-ep__toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #e8c660, #c4991f); border: 1px solid #e8c660; color: #0f2d1a;
  font: 700 13px 'Inter', system-ui, sans-serif; box-shadow: 0 4px 16px rgba(196,153,31,.3);
  transition: transform .2s, box-shadow .2s;
}
.mbe-ep__toggle:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(196,153,31,.42); }
.mbe-ep__toggle:focus-visible { outline: 2px solid #f5e9b0; outline-offset: 2px; }
.mbe-ep__toggle-close { display: none; }
.mbe-ep.is-open .mbe-ep__toggle-open { display: none; }
.mbe-ep.is-open .mbe-ep__toggle-close { display: inline; }
.mbe-ep.is-open .mbe-ep__toggle { background: rgba(232,198,96,.12); color: #f5e9b0; box-shadow: none; }
.mbe-ep__chev { display: inline-block; transition: transform .3s; }
.mbe-ep.is-open .mbe-ep__chev { transform: rotate(180deg); }
.mbe-ep .mbe-ep__link { padding: 9px 14px; }

@media (max-width: 640px) {
  .mbe-ep__body { padding: 16px 16px 14px; }
  .mbe-ep__verse { font-size: 16.5px; }
  .mbe-ep__toggle, .mbe-ep .mbe-ep__link { flex: 1 1 auto; justify-content: center; width: auto; }
  .mbe-ep__foot .mbe-ep__regen { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .mbe-ep__more { transition: none; } }
.mbe-ep__credit { margin: 12px 0 0; font: 400 10.5px/1.5 'Inter', system-ui, sans-serif; color: rgba(245,233,176,.5); }

/* ── Amen button (v3.75.0) ──────────────────────────────────────────────── */
.mbe-ep__foot .mbe-ep__regen { margin-left: 0; }
.mbe-ep__amen {
  position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 11px; border-radius: 999px; cursor: pointer;
  background: rgba(232,168,124,.12); border: 1px solid rgba(232,168,124,.45); color: #f5e9b0;
  font: 700 12px 'Inter', system-ui, sans-serif; letter-spacing: .02em;
  transition: background .25s, border-color .25s, transform .2s;
}
.mbe-ep__amen:hover:not([disabled]) { background: rgba(232,168,124,.24); border-color: #e8a87c; transform: translateY(-1px); }
.mbe-ep__amen:focus-visible { outline: 2px solid #f5e9b0; outline-offset: 2px; }
.mbe-ep__amen[disabled] { cursor: default; opacity: .75; }
.mbe-ep__amen-icon { font-size: 13px; line-height: 1; }
.mbe-ep__amen-count {
  min-width: 22px; padding: 2px 7px; border-radius: 999px; text-align: center;
  background: rgba(15,45,26,.65); color: #e8c660; font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.mbe-ep__amen.is-said { background: linear-gradient(135deg, #e8c660, #c4991f); border-color: #e8c660; color: #0f2d1a; cursor: default; }
.mbe-ep__amen.is-said .mbe-ep__amen-count { background: rgba(15,45,26,.85); color: #f5e9b0; }
.mbe-ep__amen.is-bump { animation: mbeEpAmenBump .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes mbeEpAmenBump { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
.mbe-ep__amen.is-said .mbe-ep__amen-icon { animation: mbeEpHeartbeat 2.4s ease-in-out infinite; }
.mbe-ep__amen-fly {
  position: absolute; left: 50%; top: -4px; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  font-size: 12px; font-weight: 800; color: #f5e9b0; text-shadow: 0 2px 8px rgba(0,0,0,.5);
  animation: mbeEpAmenFly 1.3s ease-out forwards;
}
@keyframes mbeEpAmenFly { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.8); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px) scale(1.1); } }

/* Committee only: who prayed today */
.mbe-ep__who { margin-top: 12px; font: 400 12.5px/1.5 'Inter', system-ui, sans-serif; color: rgba(245,233,176,.85); }
.mbe-ep__who summary { cursor: pointer; font-weight: 700; color: #e8c660; list-style: none; display: inline-flex; gap: 6px; }
.mbe-ep__who summary::-webkit-details-marker { display: none; }
.mbe-ep__who summary::after { content: '▾'; transition: transform .2s; }
.mbe-ep__who[open] summary::after { transform: rotate(180deg); }
.mbe-ep__who ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.mbe-ep__who li { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(232,198,96,.2); }
.mbe-ep__who li span { color: #e8a87c; }
.mbe-ep__who li em { color: rgba(245,233,176,.5); font-style: normal; font-size: 11px; }
.mbe-ep__who p { margin: 6px 0 0; }

@media (max-width: 640px) {
  .mbe-ep__amen { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .mbe-ep__amen, .mbe-ep__amen * { animation: none !important; } }

/* ── AI Devotional: reflections left today + limit panel (v3.76.0) ─────────── */
.mbe-dev-quota {
  display: inline-flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 7px 14px; border-radius: 999px;
  background: #f5efe0; border: 1px solid #e3d6b4; color: #5a4a22; font-size: 13px; line-height: 1.3;
}
.mbe-dev-quota strong { color: #1a4a2f; }
.mbe-dev-quota__dots { display: inline-flex; gap: 4px; }
.mbe-dev-quota__dot { width: 9px; height: 9px; border-radius: 50%; background: #e3d6b4; box-shadow: inset 0 0 0 1px #d2c190; }
.mbe-dev-quota__dot.is-on { background: linear-gradient(135deg, #e8c660, #c4991f); box-shadow: 0 0 0 2px rgba(196,153,31,.18); }
.mbe-dev-quota.is-spent { background: #f1ede6; color: #7a6f5c; }
#mbe-devotion-btn.is-spent { background: #6f8f7a; border-color: #6f8f7a; opacity: .85; }

.mbe-dev-limit { text-align: center; padding: 10px 6px 4px; color: #d8e6da; }
.mbe-dev-limit__moon { font-size: 38px; line-height: 1; margin-bottom: 10px; animation: mbeEpBreathe 5s ease-in-out infinite; }
.mbe-dev-limit h4 { margin: 0 0 8px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 25px; font-weight: 600; color: #e8c660; line-height: 1.25; }
.mbe-dev-limit__lead { margin: 0 auto 18px; max-width: 520px; font-size: 14.5px; line-height: 1.65; color: #c8dccb; }
.mbe-dev-limit__lead strong { color: #f5e9b0; }
.mbe-dev-limit__ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: left; }
.mbe-dev-limit__way {
  display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(232,198,96,.25); color: #f5e9b0; font: inherit; text-align: left;
  transition: background .2s, border-color .2s, transform .2s;
}
.mbe-dev-limit__way:hover { background: rgba(232,198,96,.12); border-color: #e8c660; transform: translateY(-2px); }
.mbe-dev-limit__way span { font-size: 22px; line-height: 1; }
.mbe-dev-limit__way strong { font-size: 14px; }
.mbe-dev-limit__way em { font-style: normal; font-size: 12.5px; color: #a9c3ae; line-height: 1.4; }
.mbe-dev-limit__note { margin: 16px 0 0; font-size: 12.5px; color: #8fb39a; }

.mbe-dev-diag {
  margin: 12px auto 0; max-width: 620px; padding: 10px 14px; border-radius: 10px; text-align: left;
  background: rgba(196,80,60,.12); border: 1px solid rgba(232,140,110,.35); color: #f3d3c6; font-size: 12.5px; line-height: 1.55; word-break: break-word;
}
@media (max-width: 640px) {
  .mbe-dev-limit__ways { grid-template-columns: 1fr; }
  .mbe-dev-quota { font-size: 12.5px; }
}

/* ── Hero: direct portal doors (v3.77.0) ──────────────────────────────────── */
.mbe-hero__signup-hint { margin: -6px 0 20px; font-size: 13.5px; color: rgba(255,255,255,.78); text-align: center; animation: fadeUp .8s .75s ease both; }
.mbe-hero__signup-hint a { color: #e8c660; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mbe-hero__signup-hint a:hover { color: #f5e9b0; }


/* ═══════════════════════════════════════════════════════════════════════════
   NOTICE MEDIA, LIKES AND DISCUSSION  (v3.81.0)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Editor: the gallery ─────────────────────────────────────────────────── */
.mbe-nm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;margin:8px 0}
.mbe-nm-grid:empty{display:none}
.mbe-nm-th{position:relative;border-radius:11px;overflow:hidden;border:1.5px solid rgba(15,45,26,.14);
  background:#fff;cursor:grab}
.mbe-nm-th.is-drag{opacity:.45}
.mbe-nm-th__img{display:flex;align-items:center;justify-content:center;height:78px;
  background-size:cover;background-position:center;background-color:rgba(15,45,26,.07)}
.mbe-nm-th__img .mbe-pj-ico{width:24px;height:24px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.mbe-nm-th__img.is-link .mbe-pj-ico{color:var(--green-deep,#0f2d1a);filter:none}
.mbe-nm-th__cover{position:absolute;top:6px;left:6px;padding:3px 8px;border-radius:6px;
  background:var(--gold-rich,#c4991f);color:#241a00;font-size:10px;font-weight:800;letter-spacing:.04em}
.mbe-nm-th__x{position:absolute;top:5px;right:5px;width:22px;height:22px;border:none;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.mbe-nm-th__x:hover{background:#d63638}
.mbe-nm-th__cap{width:100%;border:none;border-top:1px solid rgba(15,45,26,.1);padding:6px 8px;
  font-size:11.5px;font-family:inherit;background:#fff}
.mbe-nm-th__cap:focus{outline:none;background:rgba(196,153,31,.08)}
.mbe-nm-th.is-busy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  height:104px;border-style:dashed;color:#7a8780;font-size:11px}
.mbe-nm-th.is-busy i{width:18px;height:18px;border:2px solid rgba(15,45,26,.16);
  border-top-color:var(--gold-rich,#c4991f);border-radius:50%;animation:mbeNmSpin .7s linear infinite}
@keyframes mbeNmSpin{to{transform:rotate(360deg)}}
.mbe-nm-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.mbe-nm-add{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:10px;
  border:1.5px dashed rgba(15,45,26,.25);background:rgba(15,45,26,.02);color:var(--green-deep,#0f2d1a);
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s ease}
.mbe-nm-add:hover:not(:disabled){border-color:var(--gold-rich,#c4991f);background:rgba(196,153,31,.07)}
.mbe-nm-add:disabled{opacity:.4;cursor:not-allowed}
.mbe-nm-add .mbe-pj-ico{width:16px;height:16px}
.mbe-nm-linkrow{display:flex;gap:8px;margin-top:9px}
.mbe-nm-url{flex:1;padding:11px 13px;border:1.5px solid rgba(15,45,26,.18);border-radius:9px;
  font-size:14px;font-family:inherit}
.mbe-nm-url:focus{outline:none;border-color:var(--gold-rich,#c4991f);box-shadow:0 0 0 3px rgba(196,153,31,.14)}
.mbe-nm-hint{display:block;margin-top:8px;font-size:11.5px;color:#7a8780;line-height:1.55}

/* ── Card cover ──────────────────────────────────────────────────────────── */
.mbe-nw-cover{display:block;width:100%;height:168px;border:none;padding:0;cursor:pointer;position:relative;
  background-size:cover;background-position:center;background-color:rgba(15,45,26,.08)}
.mbe-nw-cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,31,19,.35));opacity:0;transition:opacity .25s ease}
.mbe-nw-cover:hover::after{opacity:1}
.mbe-nw-cover__more{position:absolute;right:10px;bottom:10px;padding:5px 11px;border-radius:8px;
  background:rgba(11,31,19,.78);color:var(--gold-light,#e8c660);font-size:11.5px;font-weight:700}

/* ── Reader gallery ──────────────────────────────────────────────────────── */
.mbe-nm-gallery{margin:0 0 22px}
.mbe-nm-fig{margin:0 0 14px;border-radius:13px;overflow:hidden;background:#0b1f13;line-height:0}
.mbe-nm-fig img,.mbe-nm-fig video{width:100%;height:auto;display:block}
.mbe-nm-fig.is-video{position:relative;aspect-ratio:16/9}
.mbe-nm-fig.is-video iframe,.mbe-nm-fig.is-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.mbe-nm-fig figcaption{padding:9px 13px;background:rgba(15,45,26,.05);color:#4a5d50;
  font-size:12.5px;line-height:1.55;text-align:left}
.mbe-nm-fig.is-video figcaption{position:static}
.mbe-nm-card{display:flex;margin:0 0 14px;border:1.5px solid rgba(15,45,26,.14);border-radius:13px;
  overflow:hidden;text-decoration:none;background:#fff;transition:box-shadow .2s ease,transform .2s ease}
.mbe-nm-card:hover{box-shadow:0 8px 26px rgba(15,45,26,.14);transform:translateY(-1px)}
.mbe-nm-card__img{flex:0 0 132px;background-size:cover;background-position:center;background-color:rgba(15,45,26,.06)}
.mbe-nm-card__txt{padding:13px 15px;min-width:0;display:flex;flex-direction:column;gap:4px}
.mbe-nm-card__txt b{font-size:14.5px;color:var(--green-deep,#0f2d1a);line-height:1.35}
.mbe-nm-card__txt em{font-style:normal;font-size:12.5px;color:#5d6b62;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mbe-nm-card__txt small{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#8a9690}
.mbe-nm-card__txt small .mbe-pj-ico{width:13px;height:13px}

/* ── Likes and the way in to the discussion ──────────────────────────────── */
.mbe-nw-social{display:flex;gap:8px;padding:10px 0 2px;border-top:1px solid rgba(15,45,26,.08);margin-top:12px}
.mbe-nw-like,.mbe-nw-cmt{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;
  border:1.5px solid rgba(15,45,26,.14);background:#fff;color:#4a5d50;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .18s ease;-webkit-tap-highlight-color:transparent}
.mbe-nw-like svg,.mbe-nw-cmt svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linejoin:round;transition:fill .2s ease,stroke .2s ease}
.mbe-nw-like:hover{border-color:rgba(214,54,56,.4);color:#c0392b}
.mbe-nw-like.is-on{border-color:rgba(214,54,56,.5);color:#c0392b;background:rgba(214,54,56,.06)}
.mbe-nw-like.is-on svg{fill:#d63638;stroke:#d63638}
.mbe-nw-like.is-pop svg{animation:mbeLikePop .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes mbeLikePop{0%{transform:scale(1)}45%{transform:scale(1.38)}100%{transform:scale(1)}}
.mbe-nw-cmt em{font-style:normal;font-weight:600;opacity:.7;font-size:12px}
.mbe-nw-cmt:hover{border-color:rgba(196,153,31,.55);color:var(--green-deep,#0f2d1a)}

/* ── Seen by ──────────────────────────────────────────────────────────────── */
.mbe-nw-views{margin-top:10px}
.mbe-nw-views__btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;
  border:1.5px solid rgba(15,45,26,.12);background:#fbf9f3;color:#6b7268;font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}
.mbe-nw-views__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.mbe-nw-views__btn:disabled{cursor:default}
.mbe-nw-views__btn:not(:disabled):hover{border-color:rgba(196,153,31,.5);color:var(--green-deep,#0f2d1a)}
.mbe-nw-views__btn em{font-style:normal}
.mbe-nw-views__list{margin-top:10px;padding:6px 4px;border-top:1px dashed rgba(15,45,26,.1);max-height:260px;overflow-y:auto}
.mbe-nw-views__row{display:flex;align-items:center;gap:10px;padding:7px 4px}
.mbe-nw-views__who{display:flex;flex-direction:column;gap:1px;min-width:0}
.mbe-nw-views__who b{font-size:13px;color:var(--green-deep,#0f2d1a);font-weight:600}
.mbe-nw-views__who b i{font-style:normal;font-weight:600;color:#8a9690;font-size:11.5px}
.mbe-nw-views__who small{font-size:11px;color:#8a9690}
.mbe-nw-views__empty{padding:14px 4px;color:#8a9690;font-size:13px}

/* ── The discussion ──────────────────────────────────────────────────────── */
.mbe-nw-discuss{margin-top:28px;padding-top:22px;border-top:1px solid rgba(15,45,26,.12)}
.mbe-nw-dh{display:flex;align-items:center;gap:9px;margin:0 0 4px;font-size:16px;color:var(--green-deep,#0f2d1a)}
.mbe-nw-dh .mbe-pj-ico{width:19px;height:19px;color:var(--gold-rich,#c4991f)}
.mbe-nw-dlead{margin:0 0 16px;font-size:13px;color:#5d6b62;line-height:1.6}
.mbe-nw-clist{display:flex;flex-direction:column;gap:13px;margin-bottom:18px}
.mbe-nw-c{display:flex;gap:11px}
.mbe-nw-c .mbe-pj-avatar{flex:0 0 auto}
.mbe-nw-c__body{flex:1;min-width:0;background:rgba(15,45,26,.04);border-radius:13px;padding:11px 14px}
.mbe-nw-c.is-committee .mbe-nw-c__body{background:rgba(196,153,31,.1);border:1px solid rgba(196,153,31,.24)}
.mbe-nw-c__body b{display:block;font-size:13.5px;color:var(--green-deep,#0f2d1a);margin-bottom:3px}
.mbe-nw-c__body b i{font-style:normal;font-weight:600;color:#8a9690;font-size:12px}
.mbe-nw-c__tag{display:inline-block;padding:2px 7px;border-radius:5px;background:var(--green-deep,#0f2d1a);
  color:var(--gold-light,#e8c660);font-size:10px;font-weight:800;letter-spacing:.04em;vertical-align:1px}
.mbe-nw-c__body p{margin:0 0 5px;font-size:13.5px;line-height:1.65;color:#3d4a42;word-break:break-word}
.mbe-nw-c__body small{font-size:11.5px;color:#8a9690}
.mbe-nw-cempty{padding:20px;text-align:center;border:1.5px dashed rgba(15,45,26,.16);border-radius:13px;
  color:#8a9690;font-size:13px}
.mbe-nw-cform{display:flex;flex-direction:column;gap:9px}
.mbe-nw-cform textarea{width:100%;padding:12px 14px;border:1.5px solid rgba(15,45,26,.18);border-radius:11px;
  font-size:14px;font-family:inherit;line-height:1.6;resize:vertical}
.mbe-nw-cform textarea:focus{outline:none;border-color:var(--gold-rich,#c4991f);
  box-shadow:0 0 0 3px rgba(196,153,31,.14)}
.mbe-nw-cform button{align-self:flex-end}

@media (max-width:600px){
  .mbe-nm-card{flex-direction:column}
  .mbe-nm-card__img{flex:none;height:150px}
  .mbe-nm-linkrow{flex-direction:column}
  .mbe-nw-cover{height:140px}
  .mbe-nm-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .mbe-nw-cform button{align-self:stretch}
}

/* ── News photo viewer (v3.82.2) ──
   Named mbe-nwlb, not mbe-lb. The gallery page has owned .mbe-lb since long
   before this existed: it hides the viewer with display:none and reveals it
   with .open. This block is appended at the end of the stylesheet, so a rule
   of mine called .mbe-lb{display:flex} overrode that and the gallery viewer
   could be opened but never closed. Nothing in here may reuse a class name
   that already exists earlier in this file. ──────────────────────────────────────────────── */
.mbe-nwlb{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;
  background:rgba(8,16,11,.94);animation:mbeNwLbIn .2s ease}
@keyframes mbeNwLbIn{from{opacity:0}to{opacity:1}}
.mbe-nwlb__stage{margin:0;max-width:92vw;max-height:86vh;display:flex;flex-direction:column;
  align-items:center;gap:12px}
.mbe-nwlb__stage img{max-width:92vw;max-height:76vh;border-radius:10px;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.mbe-nwlb__stage figcaption{color:#e8e4d8;font-size:13.5px;line-height:1.6;text-align:center;max-width:600px}
.mbe-nwlb__x{position:absolute;top:16px;right:16px;width:42px;height:42px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  transition:background .18s ease}
.mbe-nwlb__x:hover{background:rgba(255,255,255,.26)}
.mbe-nwlb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:none;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:32px;line-height:1;
  cursor:pointer;transition:background .18s ease}
.mbe-nwlb__nav:hover{background:rgba(255,255,255,.24)}
.mbe-nwlb__nav.is-prev{left:14px}
.mbe-nwlb__nav.is-next{right:14px}
.mbe-nwlb__count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:6px 15px;
  border-radius:20px;background:rgba(255,255,255,.12);color:#e8e4d8;font-size:12.5px;font-weight:600}
.mbe-nm-fig.is-open{cursor:zoom-in}
.mbe-nw-cover__more{cursor:pointer;transition:background .18s ease}
.mbe-nw-cover__more:hover{background:var(--gold-rich,#c4991f);color:#241a00}
@media (max-width:600px){
  .mbe-nwlb__nav{width:44px;height:44px;font-size:27px}
  .mbe-nwlb__nav.is-prev{left:6px}
  .mbe-nwlb__nav.is-next{right:6px}
  .mbe-nwlb__stage img{max-height:70vh}
}
@media (prefers-reduced-motion:reduce){.mbe-nwlb{animation:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   AWAITING APPROVAL  (v3.81.9)
   A member who has just registered sees this, possibly for days. It is the
   first impression the estate makes on a new owner, so it owns the window
   rather than sitting in a column.
   ═══════════════════════════════════════════════════════════════════════════ */
.mbe-pend{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto;
  background:radial-gradient(1200px 700px at 50% -10%,#1a4a2f 0%,#0f2d1a 55%,#0a1f12 100%)}
.mbe-pend__card{width:100%;max-width:560px;margin:auto;background:#fffdf8;border-radius:20px;
  border:1px solid rgba(196,153,31,.35);box-shadow:0 24px 70px rgba(0,0,0,.45);
  padding:40px 34px;text-align:center;animation:mbePendIn .45s cubic-bezier(.22,1,.36,1) both}
@keyframes mbePendIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.mbe-pend__crest{font-size:46px;line-height:1;margin-bottom:10px}
.mbe-pend__hi{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;color:#0f2d1a;margin:0 0 4px;font-weight:600}
.mbe-pend__sub{margin:0 0 20px;font-size:14px;color:#7a6840}
.mbe-pend__status{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:30px;
  background:rgba(196,153,31,.12);border:1px solid rgba(196,153,31,.4);color:#7a5f10;
  font-size:13px;font-weight:700;margin-bottom:24px}
.mbe-pend__dot{width:9px;height:9px;border-radius:50%;background:#c4991f;animation:mbePendPulse 1.9s ease-in-out infinite}
@keyframes mbePendPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.mbe-pend__steps{list-style:none;margin:0 0 20px;padding:0;text-align:left}
.mbe-pend__steps li{position:relative;padding:0 0 20px 34px}
.mbe-pend__steps li::before{content:"";position:absolute;left:9px;top:20px;bottom:0;width:2px;background:rgba(15,45,26,.12)}
.mbe-pend__steps li:last-child{padding-bottom:0}
.mbe-pend__steps li:last-child::before{display:none}
.mbe-pend__steps li::after{content:"";position:absolute;left:2px;top:3px;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(15,45,26,.2);background:#fffdf8}
.mbe-pend__steps li.is-done::after{content:"\2713";border-color:#2d6a47;background:#2d6a47;color:#fff;
  font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.mbe-pend__steps li.is-now::after{border-color:#c4991f;background:#c4991f;
  box-shadow:0 0 0 4px rgba(196,153,31,.2)}
.mbe-pend__steps b{display:block;font-size:14px;color:#0f2d1a;margin-bottom:2px}
.mbe-pend__steps li.is-done b{color:#2d6a47}
.mbe-pend__steps span{display:block;font-size:12.5px;color:#6b7a70;line-height:1.6}

.mbe-pend__when{margin:0 0 20px;font-size:13px;color:#5d6b62;line-height:1.65}
.mbe-pend__verse{padding:15px 18px;border-radius:12px;background:rgba(45,106,71,.07);
  border-left:3px solid #2d6a47;text-align:left;margin-bottom:24px}
.mbe-pend__verse span{display:block;font-style:italic;color:#2d6a47;font-size:13.5px;line-height:1.65}
.mbe-pend__verse em{display:block;margin-top:5px;font-style:normal;font-size:11.5px;color:#5a9a6a}
.mbe-pend__acts{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.mbe-pend__btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:10px;
  border:1.5px solid rgba(15,45,26,.2);background:#fff;color:#0f2d1a;text-decoration:none;
  font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .18s ease}
.mbe-pend__btn:hover{border-color:#c4991f;background:rgba(196,153,31,.07)}
.mbe-pend__btn.is-primary{background:linear-gradient(135deg,#c4991f,#e8c660);border:none;color:#241a00;
  box-shadow:0 4px 16px rgba(196,153,31,.32)}
.mbe-pend__btn.is-primary:disabled{opacity:.6;cursor:wait}
.mbe-pend__btn.is-quiet{border-color:transparent;color:#8a9690;font-weight:600}
.mbe-pend__btn.is-quiet:hover{color:#a6271b;background:rgba(214,54,56,.06)}
.mbe-pend__help{margin:0;font-size:12px;color:#8a9690}
.mbe-pend__help a{color:#c4991f}

@media (max-width:600px){
  .mbe-pend{padding:14px;align-items:flex-start}
  .mbe-pend__card{padding:30px 22px;border-radius:16px}
  .mbe-pend__hi{font-size:25px}
  .mbe-pend__acts{flex-direction:column}
  .mbe-pend__btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .mbe-pend__card{animation:none}.mbe-pend__dot{animation:none}
}

/* ── Estate News: share link modal (v3.100.0) ──────────────────────────── */
.mbe-nw-share h2 { margin: 0 0 6px; font-size: 20px; }
.mbe-nw-share__loading { display: flex; justify-content: center; gap: 8px; padding: 40px 0; }
.mbe-nw-share__loading span { width: 10px; height: 10px; border-radius: 50%; background: #c4991f; animation: mbePjDots 1s ease-in-out infinite; }
.mbe-nw-share__loading span:nth-child(2) { animation-delay: .15s; }
.mbe-nw-share__loading span:nth-child(3) { animation-delay: .3s; }
.mbe-nw-share__err { color: #a13d2c; background: #fbeae5; border-radius: 10px; padding: 14px 16px; font-size: 13.5px; }
.mbe-nw-share__body input[readonly],
.mbe-nw-share__body textarea[readonly] { background: #f8f5ec; cursor: text; }
.mbe-nw-share__body textarea { resize: vertical; line-height: 1.6; font-size: 13px; }

/* ── Meeting Minutes (v3.101.0) ────────────────────────────────────────── */
.mbe-mn-attend { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0 22px; }
@media (max-width: 640px) { .mbe-mn-attend { grid-template-columns: 1fr; } }
.mbe-mn-attend__col { background: #f8f5ec; border-radius: 12px; padding: 14px 16px; }
.mbe-mn-attend__col h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: #6b5416; }
.mbe-mn-attend__col h4 .mbe-pj-ico { width: 14px; height: 14px; }
.mbe-mn-names { list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: #3d4a40; }
.mbe-mn-names li { padding: 3px 0; }
.mbe-mn-file__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mbe-mn-file__chip { display: inline-flex; align-items: center; gap: 6px; background: #f0ece0; border-radius: 8px; padding: 6px 12px; font-size: 13px; color: #3d4a40; }
.mbe-mn-file__chip.is-busy { color: #8a8072; font-style: italic; }
.mbe-mn-dl { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; text-decoration: none; }

/* ── Meeting Minutes: cover photo/video (v3.102.0) ─────────────────────── */
.mbe-mn-cover--video { cursor: pointer; }
.mbe-mn-cover--video video { display: block; width: 100%; height: 168px; object-fit: cover; background: #173726; }
@media (max-width: 640px) { .mbe-mn-cover--video video { height: 140px; } }
.mbe-pj-rd__cover { width: 100%; max-height: 320px; object-fit: cover; display: block; background: #173726; }