/* ═══════════════════════════════════════════════════════════════════════
   GreenOps 101 — Posetiv Brand Layer v2 (Light, Modern, Crisp)
   Loaded AFTER all inline module CSS. Enforces the Posetiv brand:
   white canvas, near-black type, restrained Posetiv-lime accents.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   POSETIV LIGHT PALETTE — overrides all module CSS variables
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Canvas */
  --page-bg: #FFFFFF !important;
  --card-bg: #FFFFFF !important;
  --section-alt: #FAFAF7 !important;
  --section-soft: #F5F5F0 !important;
  --white: #FFFFFF !important;

  /* Type — near-black, not green */
  --ink: #141414 !important;
  --ink-soft: #2A2A2A !important;
  --text-primary: #141414 !important;
  --text-secondary: #4F4F4D !important;
  --text-muted: #787875 !important;

  /* Slate / grey scale */
  --slate: #4F4F4D !important;
  --slate-mid: #787875 !important;
  --slate-dim: #A8A8A4 !important;

  /* Legacy dark-tone variables repointed to near-black (most hero blocks
     re-styled to white below — this is just safety) */
  --navy: #141414 !important;
  --navy-mid: #1F1F1F !important;
  --navy-mid-alt: #1F1F1F !important;
  --navy-card: #FFFFFF !important;
  --navy-light: #2A2A2A !important;
  --navy-raised: #FFFFFF !important;
  --navy-border: rgba(20,20,20,0.08) !important;

  /* Posetiv lime — the signature accent */
  --posetiv: #93C01F !important;
  --posetiv-dark: #7BA019 !important;
  --posetiv-darker: #5E7F12 !important;
  --posetiv-muted: #DCE8B8 !important;
  --posetiv-pale: #F3F8E4 !important;
  --posetiv-tint: rgba(147,192,31,0.08) !important;
  --posetiv-glow: rgba(147,192,31,0.14) !important;

  /* Compat aliases — older tokens map to Posetiv */
  --teal: #93C01F !important;
  --teal-dark: #7BA019 !important;
  --teal-muted: #DCE8B8 !important;
  --teal-light: #F3F8E4 !important;
  --teal-bg: rgba(147,192,31,0.06) !important;
  --teal-border: rgba(147,192,31,0.22) !important;
  --teal-glow: rgba(147,192,31,0.12) !important;
  --teal-subtle: rgba(147,192,31,0.04) !important;

  --orange: #93C01F !important;
  --orange-light: #A8D020 !important;
  --orange-bg: #F3F8E4 !important;
  --orange-border: rgba(147,192,31,0.22) !important;

  /* Borders */
  --border: #E8E6E1 !important;
  --border-light: #EFEDE8 !important;
  --border-strong: #D4D2CC !important;

  /* Track distinctions — three visually separable hues */
  --track1: #93C01F !important;      /* lime */
  --track2: #3A5A4C !important;      /* forest slate */
  --track3: #141414 !important;      /* near-black */

  /* Feedback */
  --correct: #2E8B4E !important;
  --correct-bg: #E8F5ED !important;
  --wrong: #C53030 !important;
  --wrong-bg: #FDECEC !important;

  /* Greys */
  --grey-100: #FAFAF7 !important;
  --grey-200: #F0EFEA !important;
  --grey-300: #E0DEDA !important;
  --grey-500: #787875 !important;
  --grey-700: #2A2A2A !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   FOUNDATION — Inter everywhere, near-black ink on white
   ═══════════════════════════════════════════════════════════════════════ */
html, body {
  background: #FFFFFF !important;
  color: #141414 !important;
}
body, p, li, td, th, span, div, section, article, aside, main, header, footer, nav,
.card, .panel, .kc-block, .reflect, .accordion-body, .content, .module-body,
.question, .answer, .prompt, .lesson, .note {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  font-style: normal !important;
}
body {
  font-weight: 400 !important;
  font-feature-settings: 'cv11', 'ss01', 'ss03' !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.65;
}
/* Preserve monospace where intended */
code, kbd, pre, samp, .mono, .eyebrow, .section-sub, .hero-badge,
.module-eyebrow, .aud-entry, .track-num, .at-label, .at-num,
.module-row-num, .module-row-duration,
.hero-meta-item .label, .module-meta-item .label,
.badge-ring .bl1, .badge-sub, .footer-brand,
.nav-course, .nav-home, .nav-module, .nav-tbm,
.kc-label, .kc-reveal-label {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
}

::selection {
  background: rgba(147,192,31,0.25) !important;
  color: #141414 !important;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(20,20,20,0.15) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20,20,20,0.14); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(20,20,20,0.28); }


/* ═══════════════════════════════════════════════════════════════════════
   TOP NAV — white, hairline border, tiny lime accent
   ═══════════════════════════════════════════════════════════════════════ */
.top-nav, .site-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  height: 52px !important;
  padding: 0 1.5rem !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E8E6E1 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.top-nav::before, .site-nav::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  height: 2px !important;
  background: #93C01F !important;
  pointer-events: none !important;
}
.nav-home {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  color: #141414 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}
.nav-home:hover {
  color: #93C01F !important;
  letter-spacing: 0.01em !important;
}
.nav-home img {
  height: 22px !important;
  width: auto !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s;
}
.nav-home:hover img { transform: translateX(-2px); }
.nav-sep { color: #D4D2CC !important; }
.nav-module {
  color: #141414 !important;
  font-weight: 500 !important;
}
.nav-track-pill {
  background: #F3F8E4 !important;
  color: #5E7F12 !important;
  border: 1px solid rgba(147,192,31,0.25) !important;
  border-radius: 999px !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
.nav-progress, .nav-progress-wrap {
  color: #787875 !important;
  font-size: 0.72rem !important;
}
.nav-prog-bar { background: #F0EFEA !important; }
.nav-prog-fill { background: #93C01F !important; }


/* ═══════════════════════════════════════════════════════════════════════
   HERO — invert from dark to light
   ═══════════════════════════════════════════════════════════════════════ */
.module-hero, .hero {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E8E6E1 !important;
  padding: 4rem var(--content-gutter) 3.5rem var(--content-gutter) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  max-width: none !important;
}
.course-hub .hero {
  background: #141414 !important;
  border-bottom: none !important;
}
.module-hero::before, .hero-bg, .hero-grid {
  background: none !important;
  background-image: none !important;
  display: none !important;
}
.course-hub .hero-bg,
.course-hub .hero-grid {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.module-eyebrow, .hero-badge {
  color: #787875 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin-bottom: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
.module-eyebrow::before, .hero-badge::before {
  content: '' !important;
  display: inline-block !important;
  width: 24px !important;
  height: 2px !important;
  background: #93C01F !important;
  flex-shrink: 0 !important;
}

.module-title, .hero-title {
  color: #141414 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(2.25rem, 4.75vw, 3.75rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  font-weight: 600 !important;
  margin-bottom: 1.25rem !important;
  background: none !important;
  -webkit-text-fill-color: #141414 !important;
  max-width: 900px !important;
}
.hero-title em, .module-title em {
  color: #141414 !important;
  font-style: normal !important;
  font-weight: 500 !important;
  display: block !important;
  position: relative !important;
  padding-left: 1.5rem !important;
  margin-top: 0.1em !important;
}
.hero-title em::before, .module-title em::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.5em !important;
  bottom: 0.3em !important;
  width: 3px !important;
  background: #93C01F !important;
  border-radius: 2px !important;
}

.module-subtitle, .hero-subtitle, .hero-tagline {
  color: #4F4F4D !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  max-width: 640px !important;
  -webkit-text-fill-color: #4F4F4D !important;
}

.module-meta, .hero-meta {
  color: #787875 !important;
  border-top: 1px solid #EFEDE8 !important;
  padding-top: 1.25rem !important;
  margin-top: 2rem !important;
  font-size: 0.8rem !important;
}
.module-meta-item .label, .hero-meta-item .label {
  color: #A8A8A4 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.module-meta-item .value, .hero-meta-item .value { color: #141414 !important; font-weight: 500 !important; }
.meta-divider { background: #E8E6E1 !important; }

.hero-num {
  color: #F0EFEA !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS — confident, modern, clear hierarchy
   ═══════════════════════════════════════════════════════════════════════ */
.btn, .hero-cta, .complete-btn, button.primary, .nav-cta, .kc-submit, .start-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  background: #141414 !important;
  color: #FFFFFF !important;
  border: 1px solid #141414 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, transform 0.1s !important;
  box-shadow: none !important;
}
.btn:hover, .hero-cta:hover, .complete-btn:hover, .nav-cta:hover, .kc-submit:hover, .start-btn:hover {
  background: #93C01F !important;
  border-color: #93C01F !important;
  color: #141414 !important;
}
.btn:active, .hero-cta:active, .complete-btn:active { transform: translateY(1px); }

.btn.done, .complete-btn.done {
  background: #F3F8E4 !important;
  color: #5E7F12 !important;
  border-color: rgba(147,192,31,0.3) !important;
}
.btn.done:hover, .complete-btn.done:hover {
  background: #DCE8B8 !important;
  color: #5E7F12 !important;
}

.btn-secondary, button.secondary, .nav-prev {
  background: #FFFFFF !important;
  color: #141414 !important;
  border: 1px solid #D4D2CC !important;
}
.btn-secondary:hover, button.secondary:hover, .nav-prev:hover {
  background: #FAFAF7 !important;
  border-color: #93C01F !important;
  color: #141414 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   CARDS, PANELS, SECTIONS — hairline borders, consistent radius
   ═══════════════════════════════════════════════════════════════════════ */
.card, .panel, .viz-panel, .info-card, .content-card,
.objectives, .lesson, .insight-card, .frame-block {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  box-shadow: none !important;
  transition: border-color 0.15s, transform 0.15s !important;
}
.card:hover, .info-card:hover, .insight-card:hover {
  border-color: #D4D2CC !important;
}

.section-alt, .map-section, .course-frame, .how-section, .is-section, .audience-section {
  background: #FAFAF7 !important;
  border-top: 1px solid #E8E6E1 !important;
  border-bottom: 1px solid #E8E6E1 !important;
}
.course-frame, .map-section, .how-section, .audience-section {
  padding: 4rem 3rem !important;
}

.section-title, h2.section-title, .is-section h2, .map-section h2, .audience-section h2, .how-section h2 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(1.85rem, 3vw, 2.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.032em !important;
  font-weight: 700 !important;
  color: #141414 !important;
  margin-bottom: 1rem !important;
}
.section-sub {
  color: #787875 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.card-title, .card h4, .info-card h4, .frame-block h3, .viz-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #141414 !important;
  margin-bottom: 0.6rem !important;
  line-height: 1.35 !important;
  font-style: normal !important;
}
/* Eyebrow labels inside cards */
.frame-block h3 {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #787875 !important;
}

.stat-num, .big-num {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(2.25rem, 4vw, 3rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: #141414 !important;
  line-height: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   KNOWLEDGE CHECKS — tactile, clear feedback, modern
   ═══════════════════════════════════════════════════════════════════════ */
.kc-block, .knowledge-check, .kc {
  background: #FAFAF7 !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #93C01F !important;
  border-radius: 12px !important;
  padding: 1.75rem !important;
  margin: 2rem 0 !important;
}
.kc-block *, .knowledge-check *, .kc * {
  font-family: 'Inter', system-ui, sans-serif !important;
}
.kc-block h3, .kc-prompt, .kc-question,
.kc-block > p, .kc-block p:first-of-type,
.kc-block .question, .kc-block .prompt {
  color: #141414 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.125rem !important;
  line-height: 1.45 !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: -0.01em !important;
  font-style: normal !important;
}
.kc-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #787875 !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

.kc-option {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.9rem !important;
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 10px !important;
  padding: 1rem 1.15rem !important;
  margin-bottom: 0.6rem !important;
  cursor: pointer !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.975rem !important;
  color: #1F1F1F !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em !important;
  transition: border-color 0.15s, background 0.15s, transform 0.1s !important;
}
.kc-option:hover {
  border-color: #93C01F !important;
  background: #F3F8E4 !important;
}
.kc-option:active { transform: translateY(1px); }
.kc-option.selected-correct {
  background: #E8F5ED !important;
  border-color: #2E8B4E !important;
  color: #1F5E35 !important;
}
.kc-option.selected-wrong {
  background: #FDECEC !important;
  border-color: #C53030 !important;
  color: #8A1F1F !important;
}

.kc-reveal {
  margin-top: 1.25rem !important;
  padding: 1rem 1.15rem !important;
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #93C01F !important;
  border-radius: 8px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  color: #2A2A2A !important;
  line-height: 1.6 !important;
  font-style: normal !important;
}
.kc-reveal p, .kc-reveal span, .kc-reveal strong {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
}
/* Placeholder prompt ("Select an answer to reveal...") */
.kc-block > .kc-prompt-placeholder, .kc-placeholder, .kc-hint {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.85rem !important;
  color: #787875 !important;
  font-style: normal !important;
  margin-top: 1rem !important;
}
.kc-reveal-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #5E7F12 !important;
  font-weight: 600 !important;
  margin-bottom: 0.4rem !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   PAUSE & REFLECT — distinct treatment
   ═══════════════════════════════════════════════════════════════════════ */
.reflect, .pause-reflect, .reflection {
  background: #FAFAF7 !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #141414 !important;
  border-radius: 12px !important;
  padding: 1.75rem !important;
  margin: 2rem 0 !important;
  color: #2A2A2A !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   ACCORDIONS / TABS / CHIPS — modern, quiet, clear interactions
   ═══════════════════════════════════════════════════════════════════════ */
.accordion-item, details {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 10px !important;
  margin-bottom: 0.65rem !important;
  overflow: hidden;
  transition: border-color 0.15s !important;
}
.accordion-item:hover, details:hover { border-color: #D4D2CC !important; }
.accordion-header, details > summary {
  padding: 1rem 1.2rem !important;
  font-weight: 500 !important;
  color: #141414 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
}
.accordion-header::after, details > summary::after {
  content: '+' !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.25rem !important;
  color: #93C01F !important;
  font-weight: 400 !important;
  transition: transform 0.2s !important;
  line-height: 1 !important;
}
.accordion-item.open .accordion-header::after,
details[open] > summary::after { transform: rotate(45deg) !important; }
.accordion-body {
  padding: 0 1.2rem 1.2rem !important;
  color: #2A2A2A !important;
  line-height: 1.65 !important;
  font-size: 0.95rem !important;
}

.tabs, .track-tabs {
  display: flex !important;
  gap: 0.5rem !important;
  border-bottom: 1px solid #E8E6E1 !important;
  margin-bottom: 2rem !important;
}
.tab, .track-tab {
  background: transparent !important;
  color: #787875 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 0.75rem 1rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: color 0.15s, border-color 0.15s !important;
}
.tab:hover, .track-tab:hover { color: #141414 !important; }
.tab.active, .track-tab.active,
.track-tab[data-track="1"].active,
.track-tab[data-track="2"].active,
.track-tab[data-track="3"].active {
  color: #141414 !important;
  border-bottom-color: #93C01F !important;
}

.chip, .pill, .tag, .track-audience, .badge {
  display: inline-flex !important;
  align-items: center !important;
  background: #F0EFEA !important;
  color: #2A2A2A !important;
  border: 1px solid #E0DEDA !important;
  border-radius: 999px !important;
  padding: 0.3rem 0.75rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
.chip.active, .pill.active, .chip.lime {
  background: #F3F8E4 !important;
  color: #5E7F12 !important;
  border-color: rgba(147,192,31,0.3) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   MODULE ROWS & TRACK NAVIGATION
   ═══════════════════════════════════════════════════════════════════════ */
.module-row {
  background: #FFFFFF !important;
  border-bottom: 1px solid #EFEDE8 !important;
  transition: background 0.12s !important;
}
.module-row:hover { background: #FAFAF7 !important; }
.module-row:hover .module-row-title { color: #141414 !important; }
.module-row:hover .module-row-arrow { color: #93C01F !important; }
.module-row-num {
  color: #787875 !important;
  border-right: 1px solid #EFEDE8 !important;
  font-weight: 600 !important;
}
.module-row-title { color: #2A2A2A !important; font-weight: 500 !important; }
.module-row-duration { color: #A8A8A4 !important; }
.module-row-arrow { color: #D4D2CC !important; transition: color 0.15s !important; }
.module-row.complete .module-row-num { color: #93C01F !important; }
.module-row.complete .module-status { background: #93C01F !important; }
.module-status { background: #E8E6E1 !important; }

.track-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E8E6E1 !important;
}
.track-name {
  color: #141414 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.01em !important;
}
.track-desc { color: #4F4F4D !important; }
.track-num {
  color: #787875 !important;
  font-family: 'JetBrains Mono', monospace !important;
}
.t1 .track-num { color: #5E7F12 !important; }
.t2 .track-num { color: #3A5A4C !important; }
.t3 .track-num { color: #141414 !important; }

.track-content {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
}
.all-tracks { background: #FFFFFF !important; gap: 0 !important; border: 1px solid #E8E6E1 !important; border-radius: 12px !important; overflow: hidden; }
.all-track-col { background: #FFFFFF !important; border-right: 1px solid #EFEDE8 !important; }
.all-track-col:last-child { border-right: none !important; }
.at-title { color: #2A2A2A !important; }
.at-module-link:hover .at-title { color: #93C01F !important; }
.at-module-link:hover { background: #FAFAF7 !important; }
.at-num { color: #A8A8A4 !important; }
.at-dot { background: #E8E6E1 !important; }
.at-module-link.complete .at-dot { background: #93C01F !important; }
.at-module-link.complete .at-num { color: #5E7F12 !important; }


/* ═══════════════════════════════════════════════════════════════════════
   COURSE HUB — index.html & module0 specific
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Course hub hero — dark treatment for the gateway page ──────── */
.course-hub .hero {
  background: #141414 !important;
  border-bottom: none !important;
  padding: 5rem var(--content-gutter) 4.5rem var(--content-gutter) !important;
  min-height: 420px !important;
  position: relative !important;
  overflow: hidden !important;
}
.course-hub .hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 60% 50% at 70% 30%, rgba(147,192,31,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(147,192,31,0.05) 0%, transparent 50%) !important;
  opacity: 1 !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.course-hub .hero > * {
  position: relative !important;
  z-index: 1 !important;
}
.course-hub .hero-badge {
  color: #93C01F !important;
  -webkit-text-fill-color: #93C01F !important;
}
.course-hub .hero-badge::before {
  background: #93C01F !important;
}
.course-hub .hero-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem) !important;
  max-width: 780px !important;
  line-height: 1.0 !important;
}
.course-hub .hero-title em {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 400 !important;
  opacity: 0.7 !important;
}
.course-hub .hero-title em::before {
  background: #93C01F !important;
}
.course-hub .hero-tagline {
  color: rgba(255,255,255,0.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
  font-size: 1.1rem !important;
  max-width: 580px !important;
  margin-bottom: 2.5rem !important;
}
.course-hub .hero-meta {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding-top: 1.5rem !important;
}
.course-hub .hero-meta-item .label {
  color: rgba(255,255,255,0.45) !important;
}
.course-hub .hero-meta-item .value {
  color: #FFFFFF !important;
}
.course-hub .meta-divider {
  background: rgba(255,255,255,0.12) !important;
}
.course-hub .hero-cta {
  background: #93C01F !important;
  color: #141414 !important;
  border-color: #93C01F !important;
  font-weight: 600 !important;
  margin-top: 2rem !important;
}
.course-hub .hero-cta:hover {
  background: #A8D020 !important;
  border-color: #A8D020 !important;
  color: #141414 !important;
}

.course-def {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.2rem !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  color: #141414 !important;
  background: #FAFAF7 !important;
  border-left: 3px solid #93C01F !important;
  padding: 1rem 1.4rem !important;
}
.is-grid { gap: 1rem !important; background: transparent !important; }
.is-item {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 10px !important;
  padding: 1.25rem !important;
  opacity: 1 !important;
}
.is-item.is { border-left: 3px solid #93C01F !important; }
.is-item.not {
  background: #FAFAF7 !important;
  border-left: 3px solid #D4D2CC !important;
  color: #787875 !important;
  opacity: 1 !important;
}
.is-item.not .is-icon { color: #A8A8A4 !important; }
.is-icon { color: #93C01F !important; }

.audience-grid { background: transparent !important; gap: 1rem !important; }
.audience-card {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 10px !important;
  padding: 1.25rem !important;
}
.aud-role { color: #141414 !important; }
.aud-entry { color: #5E7F12 !important; font-weight: 600 !important; }
.how-step { gap: 1rem !important; }
.how-num {
  color: #F0EFEA !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 2.5rem !important;
}
.how-body strong { color: #141414 !important; }
.how-body p { color: #4F4F4D !important; }

.accred-strip {
  background: #FAFAF7 !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #93C01F !important;
  border-radius: 12px !important;
  padding: 2rem !important;
}
.accred-body h3 {
  color: #141414 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
}
.accred-body p { color: #2A2A2A !important; }
.badge-ring {
  border: 1.5px solid #93C01F !important;
  background: #FFFFFF !important;
}
.badge-ring .bl1 { color: #5E7F12 !important; }
.badge-ring .bl2 { color: #141414 !important; font-family: 'Inter', system-ui, sans-serif !important; }
.badge-sub { color: #787875 !important; }


/* ═══════════════════════════════════════════════════════════════════════
   FOOTER — minimal, hairline
   ═══════════════════════════════════════════════════════════════════════ */
footer {
  background: #FFFFFF !important;
  border-top: 1px solid #E8E6E1 !important;
  padding: 2rem 3rem !important;
  color: #787875 !important;
}
.footer-brand { color: #787875 !important; }
.footer-brand span { color: #141414 !important; font-weight: 600 !important; }


/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Instrument Serif for editorial, Inter for UI, Mono for labels
   ═══════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #141414 !important;
  font-style: normal !important;
}
h1 { font-weight: 700 !important; letter-spacing: -0.035em !important; font-size: clamp(2.25rem, 4.5vw, 3.25rem) !important; line-height: 1.05 !important; }
h2 { font-weight: 700 !important; letter-spacing: -0.03em !important; font-size: clamp(1.65rem, 2.8vw, 2.1rem) !important; line-height: 1.15 !important; }
h3 { font-weight: 600 !important; letter-spacing: -0.015em !important; font-size: 1.25rem !important; line-height: 1.3 !important; }
h4 { font-weight: 600 !important; letter-spacing: -0.01em !important; font-size: 1.05rem !important; line-height: 1.35 !important; }
h5, h6 { font-weight: 600 !important; font-size: 0.95rem !important; letter-spacing: -0.005em !important; }
p { color: #2A2A2A !important; line-height: 1.65 !important; font-size: 1rem !important; }
strong, b { color: #141414 !important; font-weight: 600 !important; }

.mono, code, kbd, .eyebrow, .section-sub,
.aud-entry, .hero-badge, .track-num, .at-label,
.module-row-num, .module-row-duration,
.hero-meta-item .label, .module-meta-item .label,
.badge-ring .bl1, .badge-sub, .footer-brand,
.nav-tbm, .nav-course, .nav-home, .nav-module {
  font-family: 'JetBrains Mono', monospace !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   DATA VIZ / CHARTS
   ═══════════════════════════════════════════════════════════════════════ */
.chart, .viz {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
}
.chart-axis, .axis-label {
  color: #787875 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
}
.bar-primary, .bar-lime { fill: #93C01F !important; background: #93C01F !important; }
.bar-slate { fill: #3A5A4C !important; background: #3A5A4C !important; }
.bar-dark { fill: #141414 !important; background: #141414 !important; }
.bar-muted { fill: #DCE8B8 !important; background: #DCE8B8 !important; }


/* ═══════════════════════════════════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════════════════════════════════ */
a { color: #5E7F12 !important; text-decoration: none !important; }
a:hover { color: #93C01F !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
.content a, .module-body a, p a, li a {
  color: #5E7F12 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(147,192,31,0.4) !important;
}
.content a:hover, .module-body a:hover, p a:hover, li a:hover {
  color: #93C01F !important;
  text-decoration-color: #93C01F !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   REVEAL / ANIMATIONS — preserve motion
   ═══════════════════════════════════════════════════════════════════════ */
.reveal { transition: opacity 0.5s, transform 0.5s !important; }


/* ═══════════════════════════════════════════════════════════════════════
   UNIFIED CONTAINER SYSTEM v2
   ─────────────────────────────────────────────────────────────────────
   One authoritative content width. One set of gutters. Every content
   block resolves to the same horizontal frame.

   Two kinds of block:

   1. IN-FLOW BLOCKS — live at document or section level with no
      full-bleed background. They get max-width + gutters directly.

   2. FULL-BLEED BLOCKS — have a coloured or textured background that
      should span the viewport (hero, section-alt, footer). The block
      itself is full-width; its direct children get the content frame.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --content-max: 1120px;
  --content-gutter: clamp(1rem, 4vw, 3rem);
}

/* ── 1. IN-FLOW BLOCKS ────────────────────────────────────────────── */
.module-content,
.module-section,
.content-section,
.kc-block,
.reflect,
.pause-reflect,
.takeaways,
.module-nav,
.accred-strip,
.objectives-strip {
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--content-gutter) !important;
  padding-right: var(--content-gutter) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ── 2. FULL-BLEED BLOCKS ─────────────────────────────────────────── */
.module-hero, .hero,
.course-frame, .map-section, .how-section, .audience-section, .is-section,
footer {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}
/* Full-bleed non-hero blocks get zero side padding (content uses inner containers) */
.course-frame, .map-section, .how-section, .audience-section, .is-section,
footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hero keeps content gutter so text does not hit the viewport edge */
.module-hero, .hero {
  padding: 4rem var(--content-gutter) 3.5rem var(--content-gutter) !important;
}

/* Section-alt full-bleed backgrounds */
.course-frame, .map-section, .how-section, .audience-section, .is-section {
  background: #FAFAF7 !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
  border-top: 1px solid #E8E6E1 !important;
  border-bottom: 1px solid #E8E6E1 !important;
}

/* Footer full-bleed background with top hairline */
footer {
  background: #FFFFFF !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
  border-top: 1px solid #E8E6E1 !important;
}

/* Children of full-bleed blocks get the content frame */
.module-hero > *,
.hero > *,
.course-frame > *,
.map-section > *,
.how-section > *,
.audience-section > *,
.is-section > *,
footer > * {
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--content-gutter) !important;
  padding-right: var(--content-gutter) !important;
  box-sizing: border-box !important;
}

/* Hero num is absolute-positioned — pin to the right edge of the
   content frame (not viewport edge) */
.module-hero .hero-num,
.hero .hero-num {
  position: absolute !important;
  right: calc(max((100% - var(--content-max)) / 2, 0px) + var(--content-gutter)) !important;
  top: 3rem !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 0 !important;
}

/* Footer flex layout — the parent footer is full-bleed, a wrapper
   child holds the flex content. If footer has multiple direct
   children (common case), use the first child as a flex wrapper. */
footer {
  display: block !important;
}
footer > .footer-brand:first-child {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}
/* When footer has several direct footer-brand children, wrap them
   visually but don't break the frame — they stack inside the content
   frame as separate lines */
.module-section { padding: 3rem 0 !important; border-bottom: 1px solid #EFEDE8 !important; text-align: left !important; }
.module-section:last-of-type { border-bottom: none !important; }

/* Enforce consistent left alignment across all major blocks */
.module-hero, .hero, .content-section, .module-section,
.kc-block, .reflect, .pause-reflect, .takeaways,
.objectives, .module-content, .card, .info-card,
.accred-strip, .how-section, .audience-section,
.is-section, .map-section, .course-frame {
  text-align: left !important;
}
.module-hero *, .hero *,
.content-section > *, .module-section > *,
.kc-block > *, .reflect > *, .pause-reflect > *, .takeaways > *,
.card > *, .callout > * {
  text-align: left !important;
}
/* Exception: elements explicitly intended to be centred */
.sci-result, .sci-formula, .badge-ring, .accred-badge,
.stat-num-centered, [data-align="center"] {
  text-align: center !important;
}

/* Takeaways block — force light styling (modules often inherit dark backgrounds from inline CSS) */
.takeaways {
  background: #FAFAF7 !important;
  color: #141414 !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  margin: 2rem auto !important;
}
.takeaways *, .takeaways p, .takeaways strong, .takeaway-item, .takeaway-body {
  color: #141414 !important;
  background: transparent !important;
}
.takeaways-heading {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #141414 !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #E8E6E1 !important;
}
.takeaway-item {
  display: flex !important;
  gap: 0.85rem !important;
  padding: 0.85rem 0 !important;
  border-bottom: 1px solid #EFEDE8 !important;
  align-items: flex-start !important;
}
.takeaway-item:last-child { border-bottom: none !important; }
.takeaway-icon {
  color: #93C01F !important;
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
  margin-top: 0.4rem !important;
}
.takeaway-body strong {
  display: block !important;
  color: #141414 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin-bottom: 0.35rem !important;
}
.takeaway-body p {
  color: #2A2A2A !important;
  font-size: 0.93rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Pause-and-Reflect block — redesigned: less box-in-box, more rhythm */
.pause-reflect {
  background: transparent !important;
  color: #141414 !important;
  border: none !important;
  border-top: 1px solid #E8E6E1 !important;
  border-bottom: 1px solid #E8E6E1 !important;
  border-radius: 0 !important;
  padding: 3rem 0 !important;
  margin: 3rem auto !important;
  position: relative !important;
  text-align: left !important;
}
.pause-reflect::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: var(--content-gutter) !important;
  width: 48px !important;
  height: 2px !important;
  background: #93C01F !important;
}
.pause-reflect *, .pause-reflect p, .pause-reflect div { color: #2A2A2A !important; background: transparent !important; max-width: none !important; }
.pause-reflect p { margin: 0 0 0.5rem 0 !important; }
.pause-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #5E7F12 !important;
  font-weight: 600 !important;
  margin-bottom: 0.9rem !important;
  display: block !important;
}
.pause-intro {
  color: #141414 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.4 !important;
  margin: 0 0 2rem 0 !important;
  max-width: 720px !important;
}
.pause-questions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.pause-q {
  display: grid !important;
  grid-template-columns: 2.5rem 1fr !important;
  gap: 1rem !important;
  padding: 1.25rem 0 !important;
  color: #2A2A2A !important;
  line-height: 1.55 !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  border-bottom: 1px solid #EFEDE8 !important;
  align-items: baseline !important;
  letter-spacing: -0.005em !important;
}
.pause-q:last-child { border-bottom: none !important; }
.pause-q-num {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.6rem !important;
  color: #93C01F !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  min-width: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
}

/* Module nav at bottom of module */
.module-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  padding: 2rem 0 !important;
  margin: 2rem auto !important;
  border-top: 1px solid #E8E6E1 !important;
}
.module-nav .nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.85rem 1.25rem !important;
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: #141414 !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.module-nav .nav-btn:hover { border-color: #93C01F !important; background: #FAFAF7 !important; }
.module-nav .nav-btn-label { display: block; font-family: 'JetBrains Mono', monospace !important; font-size: 0.65rem !important; color: #787875 !important; letter-spacing: 0.08em !important; }
.module-nav .nav-btn-title { display: block; font-weight: 500 !important; font-size: 0.9rem !important; color: #141414 !important; margin-top: 0.15rem !important; }

/* Responsive 2-column grid that collapses cleanly on narrow screens */
.grid-2, .cards-2 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  gap: 1rem !important;
  margin-top: 1.5rem !important;
}
.grid-2 > *, .cards-2 > * { min-width: 0 !important; }

/* Any inline grid the author dropped in needs guard rails */
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr"] {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
}

/* Card children: force min-width 0 so long content wraps instead of overflowing */
.card, .info-card, .panel, .viz-panel { min-width: 0 !important; overflow-wrap: break-word !important; word-wrap: break-word !important; }
.card ul, .card ol { margin: 0 !important; padding-left: 1.1rem !important; }
.card li { margin-bottom: 0.35rem !important; font-size: 0.95rem !important; line-height: 1.6 !important; color: #2A2A2A !important; }
.card li:last-child { margin-bottom: 0 !important; }
.card p + p { margin-top: 0.75rem !important; }

/* Tables inside cards and sections — clean, scrollable on mobile */
.card table, .content-section table, .module-section table {
  width: 100% !important;
  border-collapse: collapse !important;
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Callout blocks — consistent style */
.callout, .callout-insight, .callout-warn {
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
  margin: 1rem 0 !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.callout-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: #141414 !important;
  margin-bottom: 0.4rem !important;
  letter-spacing: -0.005em !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   HARMONISE MODULE-SPECIFIC COMPONENTS
   ─────────────────────────────────────────────────────────────────────
   Each module has its own inline CSS for its interactive components.
   This block overrides the inline CSS to use the Posetiv palette,
   consistent spacing, and proper visual hierarchy — without touching
   the DOM. Every rule uses !important because inline module CSS loads
   before polish.css but both are authored; we want polish to win.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Module hero — consistent across modules ────────────────────── */
/* Hide the complete-btn when it lands in the hero; keep the one in module-nav */
.module-hero .complete-btn,
.hero .complete-btn {
  display: none !important;
}

/* Meta items — fix spacing between label and value, support both class names */
.module-meta, .hero-meta {
  display: flex !important;
  gap: 2.5rem !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
}
.meta-item, .module-meta-item, .hero-meta-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}
.meta-item .label, .module-meta-item .label, .hero-meta-item .label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #787875 !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: block !important;
}
.meta-item .value, .module-meta-item .value, .hero-meta-item .value {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  color: #141414 !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* Hero number — subtle background decorative numeral */
.module-hero .hero-num, .hero .hero-num {
  position: absolute !important;
  right: var(--content-gutter) !important;
  top: 2.5rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(4rem, 8vw, 7rem) !important;
  font-weight: 300 !important;
  color: rgba(147,192,31,0.12) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.04em !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Hero eyebrow — small lime rule, caps label, consistent styling */
.module-eyebrow, .hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #5E7F12 !important;
  font-weight: 600 !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.module-eyebrow::before, .hero-badge::before {
  content: '' !important;
  display: inline-block !important;
  width: 28px !important;
  height: 2px !important;
  background: #93C01F !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* Hero title — consistent weight, tight tracking */
.module-title, .hero-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  color: #141414 !important;
  margin: 0 0 1rem 0 !important;
  max-width: 920px !important;
  background: none !important;
  -webkit-text-fill-color: #141414 !important;
}

/* Hero subtitle / tagline */
.module-subtitle, .hero-subtitle, .hero-tagline {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #4F4F4D !important;
  margin: 0 0 2rem 0 !important;
  max-width: 700px !important;
  -webkit-text-fill-color: #4F4F4D !important;
  letter-spacing: -0.01em !important;
}

/* Some modules have dark-gradient hero backgrounds from inline CSS — force white */
.module-hero, .hero {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #141414 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.course-hub .hero {
  background: #141414 !important;
  background-image: none !important;
  color: #FFFFFF !important;
}
.module-hero::before, .module-hero::after,
.hero::before, .hero::after,
.hero-bg, .hero-grid {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}
.course-hub .hero::after,
.course-hub .hero-bg,
.course-hub .hero-grid {
  opacity: 1 !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}
.module-hero-label { /* some modules use this for pill above title */
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
  color: #5E7F12 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
}
.module-hero-intro { color: #4F4F4D !important; }


/* ── Objectives strip — fix spacing + modernise ──────────────────── */
.objectives-strip {
  background: #FAFAF7 !important;
  border: none !important;
  border-top: 1px solid #E8E6E1 !important;
  border-bottom: 1px solid #E8E6E1 !important;
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
  /* Preserve content gutter and centering from container system */
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--content-gutter) !important;
  padding-right: var(--content-gutter) !important;
}
.objectives-strip h3,
.objectives-heading {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #5E7F12 !important;
  margin-bottom: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
.objectives-strip h3::before,
.objectives-heading::before {
  content: '' !important;
  display: inline-block !important;
  width: 24px !important;
  height: 2px !important;
  background: #93C01F !important;
}
.objectives-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1rem 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.objectives-list li {
  list-style: none !important;
  padding: 1rem 1.15rem !important;
  color: #2A2A2A !important;
  line-height: 1.55 !important;
  font-size: 0.92rem !important;
  position: relative !important;
  display: flex !important;
  gap: 0.75rem !important;
  align-items: flex-start !important;
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #93C01F !important;
  border-radius: 8px !important;
}
.objectives-list li::before {
  content: '' !important;
  display: none !important;
}
.obj-num {
  /* Reset box/layout properties that diverge across modules */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
  /* Consistent text styling */
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #93C01F !important;
  min-width: 24px !important;
  margin-right: 0.25rem !important;
  flex-shrink: 0 !important;
  line-height: 1.6 !important;
}


/* ── Section label — cleaner, less boxy ──────────────────────────── */
.section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #5E7F12 !important;
  margin-bottom: 0.9rem !important;
  border-radius: 0 !important;
}
.section-label::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 2px !important;
  background: #93C01F !important;
}

/* Section titles — stronger, with subtle accent */
.section-title, .content-section h2 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(1.75rem, 2.8vw, 2.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.032em !important;
  line-height: 1.1 !important;
  color: #141414 !important;
  margin: 0 0 1rem 0 !important;
  max-width: 820px !important;
}

/* Section intro — slightly larger, better contrast */
.section-intro {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  color: #2A2A2A !important;
  font-weight: 400 !important;
  max-width: 720px !important;
  margin: 0 0 2rem 0 !important;
  letter-spacing: -0.005em !important;
}

/* Content section spacing — reset divergent inline CSS from M4/M7/M9/M10-14 */
.content-section {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #EFEDE8 !important;
}
.content-section:last-of-type { border-bottom: none !important; }


/* ── Domain panels (M4) — harmonise with Posetiv ─────────────────── */
.domain-explorer { width: 100% !important; }
.domain-tabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 0.5rem !important;
  margin-bottom: 2rem !important;
  border-bottom: none !important;
}
.domain-tab {
  padding: 1.1rem 0.75rem !important;
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 10px !important;
  color: #4F4F4D !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s, transform 0.1s !important;
  border-top: 1px solid #E8E6E1 !important;
  text-align: center !important;
}
.domain-tab:hover {
  border-color: #93C01F !important;
  background: #F3F8E4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(147,192,31,0.1) !important;
}
.domain-tab.active {
  border-color: #93C01F !important;
  border-top-color: #93C01F !important;
  background: #F3F8E4 !important;
  color: #141414 !important;
  box-shadow: 0 2px 8px rgba(147,192,31,0.15) !important;
}
.domain-panel {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  margin-top: 1rem !important;
}
.domain-panel h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #141414 !important;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid #E8E6E1 !important;
  padding-bottom: 1rem !important;
}
.domain-panel h4 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #141414 !important;
  margin: 1.5rem 0 0.75rem 0 !important;
}
.domain-panel p {
  color: #2A2A2A !important;
  line-height: 1.65 !important;
}
.domain-panel-content {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
}
.domain-levers {
  background: #FAFAF7 !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #93C01F !important;
  padding: 1.25rem 1.4rem !important;
  border-radius: 10px !important;
  margin: 1rem 0 !important;
}
.domain-levers h5 {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #5E7F12 !important;
  margin-bottom: 0.75rem !important;
}
.domain-levers ul { padding-left: 1.1rem !important; margin: 0 !important; }
.domain-levers li {
  color: #2A2A2A !important;
  line-height: 1.55 !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.92rem !important;
}
.domain-levers li:last-child { margin-bottom: 0 !important; }


/* ── PUE matrix (M4) ─────────────────────────────────────────────── */
.pue-matrix {
  background: #E8E6E1 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  gap: 1px !important;
}
.pue-scenario {
  background: #FFFFFF !important;
  padding: 1.5rem !important;
  min-height: 180px !important;
  transition: background 0.15s !important;
}
.pue-scenario:hover {
  transform: none !important;
  box-shadow: none !important;
  background: #FAFAF7 !important;
}
.pue-scenario-status {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #787875 !important;
  margin-bottom: 0.75rem !important;
}
.pue-scenario-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #141414 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0.6rem !important;
}
.pue-scenario-desc { color: #2A2A2A !important; font-size: 0.9rem !important; line-height: 1.55 !important; }
.pue-scenario-metric {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  color: #787875 !important;
  font-style: normal !important;
  border-top: 1px solid #EFEDE8 !important;
}
.pue-scenario.efficient { border-left: 3px solid #2E8B4E !important; background: #F4FBF6 !important; }
.pue-scenario.efficient .pue-scenario-status { color: #2E8B4E !important; }
.pue-scenario.wasteful-infra, .pue-scenario.wasteful-compute {
  border-left: 3px solid #D98A3A !important; background: #FEF8F0 !important;
}
.pue-scenario.wasteful-infra .pue-scenario-status, .pue-scenario.wasteful-compute .pue-scenario-status { color: #B5651A !important; }
.pue-scenario.worst { border-left: 3px solid #C53030 !important; background: #FDECEC !important; }
.pue-scenario.worst .pue-scenario-status { color: #C53030 !important; }


/* ── Control loop (M4) ───────────────────────────────────────────── */
.control-loop-step {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #E8E6E1 !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
  margin: 0.75rem 0 !important;
  transition: border-color 0.15s, background 0.15s, transform 0.1s !important;
}
.control-loop-step:hover {
  border-color: #93C01F !important;
  border-left-color: #93C01F !important;
  background: #FAFAF7 !important;
  transform: none !important;
}
.control-loop-step.active {
  border-color: #93C01F !important;
  border-left-color: #93C01F !important;
  background: #F3F8E4 !important;
}
.control-loop-step h4 {
  color: #141414 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
.control-loop-step .step-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: #93C01F !important;
  color: #141414 !important;
  border-radius: 50% !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.control-loop-detail { color: #2A2A2A !important; font-size: 0.92rem !important; line-height: 1.6 !important; border-top: 1px solid #EFEDE8 !important; padding-top: 0.9rem !important; margin-top: 0.9rem !important; }


/* ── AI stop/start lists (M4) ────────────────────────────────────── */
.ai-lists {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.25rem !important;
  margin: 1.5rem 0 !important;
}
@media (max-width: 768px) { .ai-lists { grid-template-columns: 1fr !important; } }
.ai-list-col h4 {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.ai-list-col.stop-list h4 { color: #C53030 !important; border-bottom-color: rgba(197,48,48,0.25) !important; }
.ai-list-col.start-list h4 { color: #5E7F12 !important; border-bottom-color: rgba(147,192,31,0.4) !important; }
.ai-item {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid !important;
  border-radius: 8px !important;
  padding: 0.9rem 1.1rem !important;
  margin-bottom: 0.6rem !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.ai-list-col.stop-list .ai-item { border-left-color: #C53030 !important; }
.ai-list-col.start-list .ai-item { border-left-color: #93C01F !important; }
.ai-item:hover {
  background: #FAFAF7 !important;
  transform: none !important;
  box-shadow: none !important;
}
.ai-item-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  color: #141414 !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}
.ai-item-detail {
  color: #2A2A2A !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  margin-top: 0.6rem !important;
  padding-top: 0.6rem !important;
  border-top: 1px solid #EFEDE8 !important;
}


/* ── Lifecycle chain (M4 hardware) ───────────────────────────────── */
.lifecycle-chain {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
  margin: 1.5rem 0 !important;
}
.lifecycle-stage {
  flex: 1 !important;
  min-width: 100px !important;
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-radius: 10px !important;
  padding: 0.9rem 0.75rem !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s, transform 0.1s !important;
}
.lifecycle-stage:hover {
  border-color: #93C01F !important;
  background: #F3F8E4 !important;
  transform: translateY(-1px) !important;
}
.lifecycle-stage-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  color: #141414 !important;
}
.lifecycle-arrow {
  color: #D4D2CC !important;
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
}
.lifecycle-detail {
  background: #FAFAF7 !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #93C01F !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.4rem !important;
  margin-top: 1rem !important;
}
.lifecycle-detail h5 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: #141414 !important;
  margin-bottom: 0.6rem !important;
  letter-spacing: -0.01em !important;
}
.lifecycle-detail p { color: #2A2A2A !important; font-size: 0.93rem !important; line-height: 1.6 !important; margin: 0 !important; }


/* ── Callouts / metric-note / info boxes ─────────────────────────── */
.metric-note, .callout-note, .info-note {
  background: #FAFAF7 !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #141414 !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
  color: #2A2A2A !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin: 1.5rem 0 !important;
}
.metric-note strong { color: #141414 !important; font-weight: 600 !important; }

.callout-insight {
  background: #F3F8E4 !important;
  border: 1px solid rgba(147,192,31,0.25) !important;
  border-left: 3px solid #93C01F !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
  margin: 1.5rem 0 !important;
}


/* ── Takeaway cards (M4, M9, etc.) ───────────────────────────────── */
.takeaways-section {
  padding: 3rem 0 !important;
  border-top: 1px solid #E8E6E1 !important;
}
.takeaways-section h2 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: #141414 !important;
  margin-bottom: 1.5rem !important;
}
.takeaways-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 1rem !important;
}
.takeaway-card {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #93C01F !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.4rem !important;
}
.takeaway-card h4 {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #141414 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: -0.015em !important;
}
.takeaway-card p {
  color: #2A2A2A !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}


/* ── Knowledge check (alternate class names) ─────────────────────── */
.kc-container {
  background: #FAFAF7 !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #93C01F !important;
  border-radius: 12px !important;
  padding: 1.75rem !important;
  margin: 2rem 0 !important;
}
.kc-question, .kc-q {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: #141414 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.45 !important;
}
.kc-option.selected {
  border-color: #93C01F !important;
  background: #F3F8E4 !important;
}
.kc-option.correct {
  background: #E8F5ED !important;
  border-color: #2E8B4E !important;
  color: #1F5E35 !important;
}
.kc-option.wrong {
  background: #FDECEC !important;
  border-color: #C53030 !important;
  color: #8A1F1F !important;
}
.kc-feedback {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #93C01F !important;
  border-radius: 8px !important;
  padding: 1rem 1.15rem !important;
  color: #2A2A2A !important;
  margin-top: 1.25rem !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}


/* ── Footer variants (.footer class + <footer> element) ──────────── */
.footer {
  background: #FFFFFF !important;
  color: #787875 !important;
  border-top: 1px solid #E8E6E1 !important;
}
.footer p { color: #787875 !important; margin: 0.35rem 0 !important; }
.footer strong { color: #141414 !important; }
.footer a { color: #5E7F12 !important; }
.footer a:hover { color: #93C01F !important; }


/* ── Viz / example items ─────────────────────────────────────────── */
.viz-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #5E7F12 !important;
  font-weight: 600 !important;
  font-style: normal !important;
  margin-bottom: 1rem !important;
}
.example-item {
  background: #FAFAF7 !important;
  border: 1px solid #E8E6E1 !important;
  border-left: 3px solid #93C01F !important;
  border-radius: 8px !important;
  padding: 1rem 1.15rem !important;
  color: #2A2A2A !important;
  font-size: 0.93rem !important;
  line-height: 1.6 !important;
  margin-bottom: 0.6rem !important;
}
.example-item strong { color: #141414 !important; font-weight: 600 !important; }


/* ═══════════════════════════════════════════════════════════════════════
   COURSE HUB HERO — final-authority overrides (must appear after all
   generic .hero rules to win the cascade)
   ═══════════════════════════════════════════════════════════════════════ */
.course-hub .hero {
  background: #141414 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-bottom: none !important;
  padding: 5rem 3rem 4.5rem !important;
  min-height: 420px !important;
}
.course-hub .hero-bg {
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: radial-gradient(ellipse 70% 55% at 65% 20%, rgba(147,192,31,0.10) 0%, transparent 60%),
              radial-gradient(ellipse 50% 35% at 20% 75%, rgba(147,192,31,0.06) 0%, transparent 50%),
              #141414 !important;
}
.course-hub .hero-grid {
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: linear-gradient(rgba(147,192,31,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(147,192,31,0.04) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}
.course-hub .hero > * {
  position: relative !important;
  z-index: 1 !important;
}
.course-hub .hero-badge {
  color: #93C01F !important;
  -webkit-text-fill-color: #93C01F !important;
}
.course-hub .hero-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem) !important;
  max-width: 780px !important;
}
.course-hub .hero-title em {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 0.7 !important;
}
.course-hub .hero-tagline {
  color: rgba(255,255,255,0.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
  font-size: 1.1rem !important;
  max-width: 580px !important;
}
.course-hub .hero-meta {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding-top: 1.5rem !important;
}
.course-hub .hero-meta-item .label {
  color: rgba(255,255,255,0.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.45) !important;
}
.course-hub .hero-meta-item .value {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.course-hub .hero-cta {
  background: #93C01F !important;
  color: #141414 !important;
  -webkit-text-fill-color: #141414 !important;
  border-color: #93C01F !important;
  font-weight: 600 !important;
}
.course-hub .hero-cta:hover {
  background: #A8D020 !important;
  border-color: #A8D020 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — most horizontal sizing is handled by the clamp() gutter on
   the container system. These rules handle vertical spacing reductions
   and component-level adjustments only.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .module-hero, .hero { padding-top: 3rem !important; padding-bottom: 2.5rem !important; }
  .course-frame, .map-section, .how-section, .audience-section, .is-section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .module-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .kc-option { font-size: 0.92rem !important; padding: 0.85rem 1rem !important; }
  .module-hero .hero-num, .hero .hero-num { font-size: 3rem !important; top: 1.5rem !important; }
}
@media (max-width: 640px) {
  .grid-2, .cards-2 { grid-template-columns: 1fr !important; }
  .module-nav { flex-direction: column !important; gap: 0.75rem !important; align-items: stretch !important; }
  .module-nav .nav-btn { width: 100% !important; }
}