/*
 * Markwell Futures — Design System
 * Warm Strategic Intelligence · Portland Refined · Editorial Minimalism
 *
 * Load order: Bootstrap → style.css → mf-theme.css
 * This file overrides Bootstrap defaults and style.css via cascade order
 * and targeted !important declarations.
 */

/* ─── 1. Design tokens ─── */
:root {
  /* Surfaces */
  --mf-ivory:        #F6F1E7;
  --mf-paper:        #EFE6D5;
  --mf-fog:          #E3DDD2;
  --mf-border:       #CFC7B8;

  /* Structure */
  --mf-evergreen:    #12372D;
  --mf-evergreen-dp: #0F2721;
  --mf-ink:          #1E2523;
  --mf-muted:        #69736C;

  /* Brand accents */
  --mf-rust:         #A64E32;
  --mf-rust-dark:    #873D28;
  --mf-brass:        #B9975B;
  --mf-cobalt:       #315E9E;
  --mf-violet:       #6D4CC2;

  /* App-dark variant */
  --mf-app-bg:       #0F1716;
  --mf-app-sidebar:  #102820;
  --mf-app-panel:    #17211F;
  --mf-app-card:     #1D2926;
  --mf-app-border:   #33433E;
  --mf-app-text:     #F4EFE6;
  --mf-app-muted:    #C4C9C1;
  --mf-app-rust:     #B35A3C;
  --mf-app-cobalt:   #4B7FD1;

  /* Radii */
  --mf-radius-sm:    4px;
  --mf-radius-md:    6px;
  --mf-radius-lg:    10px;

  /* Shadows */
  --mf-shadow-soft:  0 2px 12px rgba(30,37,35,0.08);
  --mf-shadow-card:  0 1px 3px rgba(30,37,35,0.05);
}


/* ─── 2. Bootstrap variable overrides — light mode ─── */
:root {
  --bs-body-bg:                    var(--mf-ivory);
  --bs-body-bg-rgb:                246, 241, 231;
  --bs-body-color:                 var(--mf-ink);
  --bs-body-color-rgb:             30, 37, 35;
  --bs-body-font-family:           'IBM Plex Sans', system-ui, sans-serif;
  --bs-secondary-color:            var(--mf-muted);
  --bs-secondary-color-rgb:        105, 115, 108;
  --bs-border-color:               var(--mf-border);
  --bs-border-color-translucent:   rgba(207,199,184,0.5);
  --bs-link-color:                 var(--mf-cobalt);
  --bs-link-color-rgb:             49, 94, 158;
  --bs-link-hover-color:           #2a4f88;
  --bs-primary:                    var(--mf-rust);
  --bs-primary-rgb:                166, 78, 50;
  --bs-card-bg:                    white;
  --bs-card-border-color:          var(--mf-border);
  --bs-card-border-radius:         var(--mf-radius-md);
  --bs-heading-color:              var(--mf-ink);
}


/* ─── 3. Bootstrap variable overrides — dark mode ─── */
[data-bs-theme="dark"] {
  --bs-body-bg:                    var(--mf-app-panel);
  --bs-body-bg-rgb:                23, 33, 31;
  --bs-body-color:                 var(--mf-app-text);
  --bs-body-color-rgb:             244, 239, 230;
  --bs-secondary-color:            var(--mf-app-muted);
  --bs-border-color:               var(--mf-app-border);
  --bs-border-color-translucent:   rgba(51,67,62,0.6);
  --bs-link-color:                 var(--mf-app-cobalt);
  --bs-link-color-rgb:             75, 127, 209;
  --bs-primary:                    var(--mf-app-rust);
  --bs-primary-rgb:                179, 90, 60;
  --bs-card-bg:                    var(--mf-app-card);
  --bs-card-border-color:          var(--mf-app-border);
  --bs-heading-color:              var(--mf-app-text);
}


/* ─── 4. Body & global typography ─── */
body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.9375rem;
  color: var(--mf-ink);
  background-color: var(--mf-ivory);
}

[data-bs-theme="dark"] body {
  color: var(--mf-app-text);
  background-color: var(--mf-app-panel);
}

/* App shell body: bg-light class maps to ivory */
body.bg-light {
  background-color: var(--mf-ivory) !important;
}
[data-bs-theme="dark"] body.bg-light {
  background-color: var(--mf-app-panel) !important;
}

/* Auth pages: bg-gradient on body */
body.bg-gradient {
  background: linear-gradient(135deg, var(--mf-evergreen) 0%, var(--mf-evergreen-dp) 100%) !important;
}

h1, h2, h3,
.h1, .h2, .h3 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  color: var(--mf-ink);
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3 {
  color: var(--mf-app-text);
}

h4, h5, h6,
.h4, .h5, .h6 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--mf-ink);
}

[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  color: var(--mf-app-text);
}

/* Utility: eyebrow / kicker label */
.mf-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mf-muted);
}

/* Brass divider rule */
.mf-brass-rule {
  border: none;
  border-top: 1px solid var(--mf-brass);
  opacity: 0.4;
  margin: 2rem 0;
}


/* ─── 5. Links ─── */
/* :not(.btn) prevents the link color overriding Bootstrap's btn color variable
   in dark mode — [data-bs-theme="dark"] a has higher specificity than .btn */
a:not(.btn) { color: var(--mf-cobalt); }
a:not(.btn):hover { color: #2a4f88; }
[data-bs-theme="dark"] a:not(.btn) { color: var(--mf-app-cobalt); }
[data-bs-theme="dark"] a:not(.btn):hover { color: #6da0de; }

a.text-decoration-none,
a.text-decoration-none:hover { color: inherit; }


/* ─── 6. Primary button — rust ─── */
.btn-primary {
  --bs-btn-color:              var(--mf-ivory);
  --bs-btn-bg:                 var(--mf-rust);
  --bs-btn-border-color:       var(--mf-rust);
  --bs-btn-hover-color:        var(--mf-ivory);
  --bs-btn-hover-bg:           var(--mf-rust-dark);
  --bs-btn-hover-border-color: var(--mf-rust-dark);
  --bs-btn-focus-shadow-rgb:   166, 78, 50;
  --bs-btn-active-bg:          var(--mf-rust-dark);
  --bs-btn-active-border-color:var(--mf-rust-dark);
  --bs-btn-disabled-bg:        var(--mf-rust);
  --bs-btn-disabled-border-color: var(--mf-rust);
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color:              var(--mf-app-text);
  --bs-btn-bg:                 var(--mf-app-rust);
  --bs-btn-border-color:       var(--mf-app-rust);
  --bs-btn-hover-bg:           #9a4d33;
  --bs-btn-hover-border-color: #9a4d33;
}

.btn-outline-primary {
  --bs-btn-color:              var(--mf-rust);
  --bs-btn-border-color:       var(--mf-rust);
  --bs-btn-hover-color:        var(--mf-ivory);
  --bs-btn-hover-bg:           var(--mf-rust);
  --bs-btn-hover-border-color: var(--mf-rust);
  --bs-btn-active-color:       var(--mf-ivory);
  --bs-btn-active-bg:          var(--mf-rust);
  --bs-btn-focus-shadow-rgb:   166, 78, 50;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color:              var(--mf-app-rust);
  --bs-btn-border-color:       var(--mf-app-rust);
  --bs-btn-hover-color:        var(--mf-app-text);
  --bs-btn-hover-bg:           var(--mf-app-rust);
}


/* ─── 7. Cards ─── */
.card {
  border-radius: var(--mf-radius-md);
  box-shadow: var(--mf-shadow-card);
  border-color: var(--mf-border);
  background-color: white;
}

.card.shadow-sm {
  box-shadow: var(--mf-shadow-soft) !important;
}

[data-bs-theme="dark"] .card {
  background-color: var(--mf-app-card);
  border-color: var(--mf-app-border);
}

/* Signal cards: warm paper surface */
.signals-card {
  background-color: var(--mf-paper) !important;
  border-color: var(--mf-border) !important;
}

[data-bs-theme="dark"] .signals-card {
  background-color: var(--mf-app-card) !important;
  border-color: var(--mf-app-border) !important;
}

/* Trend card: remove harsh yellow watching border */
.card.border-warning {
  border-color: rgba(185,151,91,0.4) !important;
}


/* ─── 8. Badges / tags ─── */
.badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
}

.badge.text-bg-secondary {
  background-color: var(--mf-fog) !important;
  color: var(--mf-muted) !important;
  border: 1px solid var(--mf-border);
}

.badge.text-bg-light {
  background-color: var(--mf-fog) !important;
  color: var(--mf-muted) !important;
  border: 1px solid var(--mf-border) !important;
}

[data-bs-theme="dark"] .badge.text-bg-secondary {
  background-color: rgba(51,67,62,0.6) !important;
  color: var(--mf-app-muted) !important;
  border-color: var(--mf-app-border);
}

[data-bs-theme="dark"] .badge.text-bg-light {
  background-color: var(--mf-app-card) !important;
  color: var(--mf-app-muted) !important;
  border-color: var(--mf-app-border) !important;
}


/* ─── 9. Forms ─── */
.form-control,
.form-select {
  background-color: white;
  border-color: var(--mf-border);
  color: var(--mf-ink);
  border-radius: var(--mf-radius-sm);
  font-family: 'IBM Plex Sans', sans-serif;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--mf-cobalt);
  box-shadow: 0 0 0 0.2rem rgba(49,94,158,0.15);
  background-color: white;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mf-ink);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--mf-app-card);
  border-color: var(--mf-app-border);
  color: var(--mf-app-text);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--mf-app-card);
  box-shadow: 0 0 0 0.2rem rgba(75,127,209,0.2);
}

[data-bs-theme="dark"] .form-label { color: var(--mf-app-text); }


/* ─── 10. Progress bars ─── */
.progress {
  background-color: var(--mf-fog);
  border-radius: 2px;
}

[data-bs-theme="dark"] .progress {
  background-color: var(--mf-app-border);
}


/* ─── 11. Navbar — evergreen surface ─── */
/* Override the hardcoded purple gradient */
.bg-gradient {
  background: var(--mf-evergreen) !important;
}

[data-bs-theme="dark"] .bg-gradient {
  background: var(--mf-app-sidebar) !important;
}

.navbar-main .nav-link,
.navbar-main .navbar-brand,
.navbar-main .bi,
.navbar-main .badge,
.navbar-main .btn-link,
.navbar-main .dropdown-toggle,
.navbar-main .navbar-text {
  color: rgba(246,241,231,0.85) !important;
  fill: rgba(246,241,231,0.85) !important;
}

.navbar-main .nav-link:hover,
.navbar-main .nav-link:focus {
  color: var(--mf-ivory) !important;
  opacity: 1;
}

.navbar-main .btn-outline-light,
.navbar-main .btn-link {
  border-color: rgba(255,255,255,0.3) !important;
}

.navbar-main .badge {
  background-color: rgba(255,255,255,0.12) !important;
}


/* ─── 12. App navbar brand bar ─── */
.navbar-dashboard .navbar-brand {
  background-color: var(--mf-evergreen-dp) !important;
  box-shadow: inset -1px 0 0 rgba(0,0,0,.2);
}

[data-bs-theme="dark"] .navbar-dashboard .navbar-brand {
  background-color: var(--mf-app-bg) !important;
}


/* ─── 13. Desktop sidebar ─── */
.mf-sidebar {
  background-color: var(--mf-evergreen) !important;
  box-shadow: inset -1px 0 0 rgba(0,0,0,.15);
}

[data-bs-theme="dark"] .mf-sidebar {
  background-color: var(--mf-app-sidebar) !important;
}

.mf-sidebar .nav-link {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(246,241,231,0.68);
  padding: 0.45rem 1rem;
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: background-color 0.1s ease, color 0.1s ease, border-left-color 0.1s ease;
}

.mf-sidebar .nav-link:hover {
  color: var(--mf-ivory);
  background-color: rgba(255,255,255,0.06);
  border-left-color: rgba(185,151,91,0.45);
}

[data-bs-theme="dark"] .mf-sidebar .nav-link {
  color: rgba(196,201,193,0.7);
}

[data-bs-theme="dark"] .mf-sidebar .nav-link:hover {
  color: var(--mf-app-text);
  background-color: rgba(255,255,255,0.04);
  border-left-color: rgba(185,151,91,0.3);
}

.mf-sidebar .feather {
  color: rgba(246,241,231,0.32);
  flex-shrink: 0;
}

.mf-sidebar .nav-link:hover .feather {
  color: rgba(246,241,231,0.65);
}

[data-bs-theme="dark"] .mf-sidebar .feather {
  color: rgba(196,201,193,0.3);
}

[data-bs-theme="dark"] .mf-sidebar .nav-link:hover .feather {
  color: rgba(196,201,193,0.75);
}

/* Sidebar group labels */
.mf-sidebar-group {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(246,241,231,0.28);
  padding: 1rem 1rem 0.2rem;
}

[data-bs-theme="dark"] .mf-sidebar-group {
  color: rgba(196,201,193,0.28);
}

/* Compatibility: legacy sidebar-heading */
.mf-sidebar .sidebar-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.625rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246,241,231,0.28) !important;
}


/* ─── 14. Mobile offcanvas — evergreen ─── */
.offcanvas {
  --bs-offcanvas-bg:    var(--mf-evergreen);
  --bs-offcanvas-color: rgba(246,241,231,0.8);
}

[data-bs-theme="dark"] .offcanvas {
  --bs-offcanvas-bg: var(--mf-app-sidebar);
}

.offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.offcanvas-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9375rem;
  color: rgba(246,241,231,0.9);
}

/* White × button on dark background */
.offcanvas .btn-close {
  filter: invert(1) opacity(0.65);
}

.offcanvas .text-body-secondary {
  color: rgba(246,241,231,0.5) !important;
}

.offcanvas strong {
  color: rgba(246,241,231,0.9);
  font-family: 'IBM Plex Sans', sans-serif;
}

.offcanvas .nav.flex-column .nav-link {
  color: rgba(246,241,231,0.68);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9rem;
  padding: 0.5rem 0.25rem;
  border-left: 2px solid transparent;
  transition: color 0.1s ease, border-left-color 0.1s ease;
}

.offcanvas .nav.flex-column .nav-link:hover {
  color: var(--mf-ivory);
  border-left-color: rgba(185,151,91,0.45);
}

.offcanvas hr {
  border-color: rgba(255,255,255,0.1);
}

/* Secondary outline buttons inside offcanvas */
.offcanvas .btn-outline-secondary {
  --bs-btn-color:              rgba(246,241,231,0.7);
  --bs-btn-border-color:       rgba(246,241,231,0.25);
  --bs-btn-hover-color:        var(--mf-ivory);
  --bs-btn-hover-bg:           rgba(255,255,255,0.08);
  --bs-btn-hover-border-color: rgba(246,241,231,0.5);
  --bs-btn-active-color:       var(--mf-ivory);
  --bs-btn-active-bg:          rgba(255,255,255,0.12);
}

[data-bs-theme="dark"] .offcanvas {
  --bs-offcanvas-bg: var(--mf-app-sidebar);
}


/* ─── 15. Footer (app pages — minimal) ─── */
footer {
  background-color: var(--mf-evergreen-dp) !important;
  padding-top: 24px;
  padding-bottom: 16px;
}

footer .copy {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.75rem;
  color: rgba(246,241,231,0.45);
}

footer .copy a {
  color: rgba(246,241,231,0.4);
  text-decoration: none;
}

footer .copy a:hover {
  color: rgba(246,241,231,0.8);
}


/* ─── 16. Full public footer ─── */
.mf-footer-full {
  background-color: var(--mf-evergreen-dp);
  color: rgba(246,241,231,0.65);
  padding: 56px 0 0;
  font-family: 'IBM Plex Sans', sans-serif;
}

.mf-footer-full .mf-footer-brand {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--mf-ivory);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mf-footer-full .mf-footer-tagline {
  font-size: 0.8125rem;
  color: rgba(246,241,231,0.4);
  max-width: 220px;
  line-height: 1.55;
  margin-top: 6px;
}

.mf-footer-full .mf-footer-col-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(246,241,231,0.28);
  margin-bottom: 10px;
}

.mf-footer-full a {
  color: rgba(246,241,231,0.5);
  text-decoration: none;
  font-size: 0.875rem;
  display: block;
  padding: 0.2rem 0;
  transition: color 0.1s;
}

.mf-footer-full a:hover {
  color: var(--mf-ivory);
}

.mf-footer-full .mf-footer-legal {
  font-size: 0.75rem;
  color: rgba(246,241,231,0.3);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 16px 0;
  margin-top: 40px;
}

.mf-footer-full .mf-footer-legal a {
  display: inline;
  font-size: 0.75rem;
  color: rgba(246,241,231,0.3);
  padding: 0;
}

.mf-footer-full .mf-footer-legal a:hover {
  color: rgba(246,241,231,0.7);
}


/* ─── 17. Public homepage ─── */

/* Hero */
.mf-hero {
  background:
    linear-gradient(150deg, rgba(18,55,45,0.30) 0%, rgba(15,39,33,0.40) 100%),
    url('../images/hero.png') center / cover no-repeat;
  position: relative;
  overflow: hidden;
  padding: 88px 0 104px;
}

/* Subtle signal-arc rings — brass, very faint */
.mf-hero::before {
  content: '';
  position: absolute;
  right: -100px;
  top: -100px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(185,151,91,0.12);
  pointer-events: none;
}

.mf-hero::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(185,151,91,0.07);
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .mf-hero { padding: 56px 0 72px; }
  .mf-hero::before, .mf-hero::after { display: none; }
}

.mf-hero-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(185,151,91,0.75);
  margin-bottom: 20px;
}

.mf-hero h1 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.14;
  color: var(--mf-ivory);
  margin-bottom: 20px;
}

.mf-hero-lead {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(246,241,231,0.65);
  max-width: 520px;
  margin-bottom: 36px;
}

.mf-hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.mf-hero-link {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9rem;
  color: rgba(246,241,231,0.55);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.1s;
}

.mf-hero-link:hover { color: var(--mf-ivory); }

/* Offerings */
.mf-offerings-section {
  background: var(--mf-ivory);
  padding: 80px 0;
}

.mf-offerings-section .mf-section-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin-bottom: 8px;
}

.mf-offerings-section h2 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  font-size: 1.625rem;
  color: var(--mf-ink);
  margin-bottom: 48px;
}

.mf-offering {
  padding-left: 28px;
  border-left: 1px solid var(--mf-border);
}

.mf-offering:first-child {
  padding-left: 0;
  border-left: none;
}

@media (max-width: 767.98px) {
  .mf-offering {
    border-left: none;
    padding-left: 0;
    padding-top: 28px;
    border-top: 1px solid var(--mf-border);
    margin-top: 4px;
  }
  .mf-offering:first-child { padding-top: 0; border-top: none; }
}

.mf-offering-icon {
  color: var(--mf-rust);
  font-size: 1.25rem;
  margin-bottom: 14px;
  line-height: 1;
}

.mf-offering h3 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--mf-ink);
  margin-bottom: 10px;
}

.mf-offering p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--mf-muted);
  margin-bottom: 14px;
}

.mf-offering-link {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mf-cobalt);
  text-decoration: none;
}

.mf-offering-link:hover { color: var(--mf-rust); }

/* Product preview */
.mf-product-section {
  background: var(--mf-paper);
  padding: 80px 0;
}

.mf-product-section .mf-section-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin-bottom: 10px;
}

.mf-product-section h2 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--mf-ink);
  margin-bottom: 16px;
}

.mf-product-frame {
  background: var(--mf-evergreen-dp);
  border-radius: var(--mf-radius-lg);
  padding: 4px;
  box-shadow: 0 20px 56px rgba(30,37,35,0.22);
}

.mf-product-frame img {
  border-radius: calc(var(--mf-radius-lg) - 4px);
  display: block;
  width: 100%;
  height: auto;
}

/* Method / POV */
.mf-method-section {
  background: var(--mf-ivory);
  padding: 80px 0;
  border-top: 1px solid var(--mf-border);
}

.mf-method-section .mf-section-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin-bottom: 12px;
}

.mf-method-tagline {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 400;
  color: var(--mf-ink);
  line-height: 1.4;
  margin-bottom: 20px;
}

.mf-method-body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--mf-muted);
  max-width: 620px;
}

/* Newsletter */
.mf-newsletter-section {
  background: var(--mf-paper);
  padding: 72px 0;
  border-top: 1px solid var(--mf-border);
}

.mf-newsletter-section .mf-section-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin-bottom: 8px;
}

.mf-newsletter-section h2 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  color: var(--mf-ink);
  margin-bottom: 24px;
}

.mf-newsletter-section h2 a {
  color: var(--mf-ink);
  text-decoration: none;
}

.mf-newsletter-section h2 a:hover { color: var(--mf-rust); }

.mf-newsletter-section iframe {
  border-radius: var(--mf-radius-md);
  border: 1px solid var(--mf-border);
}


/* ─── 18. Admin merge bar ─── */
#merge-bar {
  background-color: var(--mf-evergreen-dp) !important;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(246,241,231,0.9) !important;
}

#merge-bar .btn-outline-light {
  --bs-btn-color:              rgba(246,241,231,0.8);
  --bs-btn-border-color:       rgba(246,241,231,0.3);
  --bs-btn-hover-color:        var(--mf-ivory);
  --bs-btn-hover-bg:           rgba(255,255,255,0.08);
  --bs-btn-hover-border-color: rgba(246,241,231,0.55);
}

#merge-bar .btn-warning {
  --bs-btn-bg:           var(--mf-brass);
  --bs-btn-border-color: var(--mf-brass);
  --bs-btn-color:        var(--mf-ink);
  --bs-btn-hover-bg:     #a8853e;
  --bs-btn-hover-border-color: #a8853e;
}

/* ─── 22. App page headers ─── */
.mf-page-header {
  background: var(--mf-evergreen);
  padding: 24px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mf-page-header h1 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--mf-ivory);
  margin-bottom: 2px;
}

.mf-page-header .mf-page-header-sub {
  font-size: 0.8125rem;
  color: rgba(246,241,231,0.5);
}

[data-bs-theme="dark"] .mf-page-header {
  background: var(--mf-app-sidebar);
  border-bottom-color: var(--mf-app-border);
}

/* ─── 19. Horizon bars — cobalt palette ─── */
.mf-bar-h1 { background-color: var(--mf-cobalt) !important; }
.mf-bar-h2 { background-color: #4b7fca !important; }
.mf-bar-h3 { background-color: #8aaee0 !important; }

/* ─── 20. bg-white panels — design system tokens ─── */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--mf-app-card) !important;
}

/* Informal bg-white panels (bg-white rounded shadow-sm) get the same
   border and shadow as .card so they feel intentional, not plain-white */
.bg-white.rounded.shadow-sm {
  border: 1px solid var(--mf-border) !important;
  box-shadow: var(--mf-shadow-soft) !important;
}

[data-bs-theme="dark"] .bg-white.rounded.shadow-sm {
  border-color: var(--mf-app-border) !important;
}

/* ─── 21. prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .mf-hero::before, .mf-hero::after { display: none; }
}