/* ================================================================
   HOME2HIRED — lesson-brand.css  v5.0  CLEAN SYSTEM
   Single source of truth for all course visuals.
   ================================================================ */

/* LAYER 0 — FONTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,400;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap');

/* LAYER 1 — DESIGN TOKENS */
:root {
  --bg-page:    #0a1628;
  --bg-section: #0f1b2d;
  --bg-card:    #1a2744;
  --bg-input:   #0a1628;
  --orange:     #f97316;
  --orange-dim: rgba(249,115,22,0.12);
  --pink:       #ec4899;
  --grad:       linear-gradient(135deg, #f97316, #ec4899);
  --text-h:     #ffffff;
  --text-body:  #e2e8f0;
  --text-sub:   rgba(226,232,240,0.72);
  --text-muted: rgba(226,232,240,0.42);
  --border:     rgba(255,255,255,0.09);
  --border-acc: rgba(249,115,22,0.22);
}

/* LAYER 2 — GLOBAL FONT ENFORCEMENT */
*,
body,
body.antialiased,
body[class],
input,
textarea,
select,
button {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.section-header,
h1.section-header, h2.section-header,
h3.section-header, h4.section-header,
.heading-serif,
h1.heading-serif, h2.heading-serif {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* LAYER 3 — LIGHT-MODE BRAND REMAPS (non-dark pages) */

[class*="from-orange-500"][class*="to-pink-500"],
[class*="from-orange-500"][class*="to-rose-500"],
[class*="from-rose-500"][class*="to-pink-500"],
[class*="from-rose-600"][class*="to-pink-600"],
[class*="from-purple-600"][class*="to-pink-600"],
[class*="from-purple-700"][class*="to-pink-700"] {
  background: var(--grad) !important;
}

[class*="from-orange-500"] p, [class*="from-orange-500"] h1,
[class*="from-orange-500"] h2, [class*="from-orange-500"] h3,
[class*="from-orange-500"] h4, [class*="from-orange-500"] li,
[class*="from-rose-500"] p, [class*="from-rose-600"] p,
[class*="from-purple-600"] p {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.bg-gray-900 { background-color: #0f172a !important; }
.bg-gray-800 { background-color: #1e293b !important; }

/* LAYER 4 — DARK MODE SYSTEM (body.bg-navy-body) */

body.bg-navy-body {
  background-color: var(--bg-page) !important;
  color: var(--text-body) !important;
}

/* 4.1 All headings → white */
body.bg-navy-body h1, body.bg-navy-body h2,
body.bg-navy-body h3, body.bg-navy-body h4,
body.bg-navy-body h5, body.bg-navy-body h6 {
  color: var(--text-h) !important;
  -webkit-text-fill-color: var(--text-h) !important;
}

/* 4.2 All body text → readable light */
body.bg-navy-body p,
body.bg-navy-body li,
body.bg-navy-body td,
body.bg-navy-body th,
body.bg-navy-body label {
  color: var(--text-body) !important;
  -webkit-text-fill-color: var(--text-body) !important;
}

/* 4.3 Spans — covers most inline text */
body.bg-navy-body span:not(.badge):not(.pill):not(.tag):not([style*="background"]) {
  color: var(--text-body) !important;
  -webkit-text-fill-color: var(--text-body) !important;
}

/* 4.4 strong/bold → bright white for emphasis */
body.bg-navy-body strong,
body.bg-navy-body b,
body.bg-navy-body .font-semibold:not([class*="btn"]):not([class*="nav"]),
body.bg-navy-body .font-bold:not([class*="btn"]):not([class*="brand"]):not([class*="nav"]) {
  color: var(--text-h) !important;
  -webkit-text-fill-color: var(--text-h) !important;
}

/* 4.5 Explicit white stays white */
body.bg-navy-body .text-white {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 4.6 Tailwind gray text → dark mode equivalents */
body.bg-navy-body .text-gray-900,
body.bg-navy-body .text-gray-800,
body.bg-navy-body .text-gray-700 {
  color: var(--text-body) !important;
  -webkit-text-fill-color: var(--text-body) !important;
}
body.bg-navy-body .text-gray-600,
body.bg-navy-body .text-gray-500,
body.bg-navy-body .text-gray-400,
body.bg-navy-body .text-gray-300 {
  color: var(--text-sub) !important;
  -webkit-text-fill-color: var(--text-sub) !important;
}

/* 4.7 Brand accent colors */
body.bg-navy-body .text-orange-500, body.bg-navy-body .text-orange-600,
body.bg-navy-body .text-orange-400 {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
}
body.bg-navy-body .text-rose-300, body.bg-navy-body .text-rose-400,
body.bg-navy-body .text-pink-400, body.bg-navy-body .text-pink-300 {
  color: #f9a8d4 !important;
  -webkit-text-fill-color: #f9a8d4 !important;
}
body.bg-navy-body .text-violet-900, body.bg-navy-body .text-purple-900,
body.bg-navy-body .text-blue-900, body.bg-navy-body .text-indigo-900,
body.bg-navy-body .text-violet-800, body.bg-navy-body .text-violet-700,
body.bg-navy-body .text-violet-600, body.bg-navy-body .text-indigo-600 {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
}
body.bg-navy-body .text-violet-200, body.bg-navy-body .text-indigo-200,
body.bg-navy-body .text-blue-200, body.bg-navy-body .text-violet-100 {
  color: rgba(249,115,22,0.75) !important;
  -webkit-text-fill-color: rgba(249,115,22,0.75) !important;
}
body.bg-navy-body .text-teal-600, body.bg-navy-body .text-teal-500,
body.bg-navy-body .text-cyan-600 {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
}

/* Quiz semantic green stays green */
body.bg-navy-body .text-green-500, body.bg-navy-body .text-green-400 {
  color: #4ade80 !important;
  -webkit-text-fill-color: #4ade80 !important;
}

/* 4.8 INLINE STYLE OVERRIDES — covers hardcoded color/bg in style="" */
/* Dark text → light */
body.bg-navy-body [style*="color:#0f172a"],
body.bg-navy-body [style*="color: #0f172a"],
body.bg-navy-body [style*="color:#1e293b"],
body.bg-navy-body [style*="color:#334155"],
body.bg-navy-body [style*="color: #334155"],
body.bg-navy-body [style*="color:#475569"],
body.bg-navy-body [style*="color: #475569"],
body.bg-navy-body [style*="color:#64748b"],
body.bg-navy-body [style*="color: #64748b"],
body.bg-navy-body [style*="color:#374151"],
body.bg-navy-body [style*="color:#1f2937"],
body.bg-navy-body [style*="color:#111827"] {
  color: var(--text-body) !important;
  -webkit-text-fill-color: var(--text-body) !important;
}
/* Dark heading colors → white */
body.bg-navy-body [style*="color:#0a1628"],
body.bg-navy-body [style*="color:#000"] {
  color: var(--text-h) !important;
  -webkit-text-fill-color: var(--text-h) !important;
}
/* Brand-derived dark orange → orange */
body.bg-navy-body [style*="color:#7c2d12"],
body.bg-navy-body [style*="color:#9a3412"],
body.bg-navy-body [style*="color:#c2410c"] {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
}
/* Light backgrounds → dark card */
body.bg-navy-body [style*="background:#fff"],
body.bg-navy-body [style*="background: #fff"],
body.bg-navy-body [style*="background-color:#fff"],
body.bg-navy-body [style*="background:#ffffff"],
body.bg-navy-body [style*="background: #ffffff"],
body.bg-navy-body [style*="background-color: #ffffff"],
body.bg-navy-body [style*="background:#f8fafc"],
body.bg-navy-body [style*="background: #f8fafc"],
body.bg-navy-body [style*="background:#f9fafb"],
body.bg-navy-body [style*="background:#fafafa"],
body.bg-navy-body [style*="background-color:#f8fafc"] {
  background-color: var(--bg-card) !important;
  background-image: none !important;
}
/* Inline borders → dark border */
body.bg-navy-body [style*="border:1.5px solid #e2e8f0"],
body.bg-navy-body [style*="border: 1.5px solid #e2e8f0"],
body.bg-navy-body [style*="border:2px solid #e2e8f0"],
body.bg-navy-body [style*="border: 2px solid #e2e8f0"],
body.bg-navy-body [style*="border:1px solid #e2e8f0"],
body.bg-navy-body [style*="border-color:#e2e8f0"] {
  border-color: var(--border) !important;
}

/* 4.9 BACKGROUND CLASS OVERRIDES */
body.bg-navy-body .bg-white,
body.bg-navy-body .bg-gray-50,
body.bg-navy-body .bg-slate-50,
body.bg-navy-body [class*="from-gray-50"],
body.bg-navy-body [class*="from-white"] {
  background-color: var(--bg-section) !important;
  background-image: none !important;
}
body.bg-navy-body .bg-gray-100 {
  background-color: var(--bg-page) !important;
}
body.bg-navy-body .bg-purple-50, body.bg-navy-body .bg-blue-50,
body.bg-navy-body .bg-green-50, body.bg-navy-body .bg-orange-50,
body.bg-navy-body .bg-indigo-50, body.bg-navy-body .bg-yellow-50,
body.bg-navy-body .bg-rose-50, body.bg-navy-body .bg-violet-50,
body.bg-navy-body .bg-teal-50, body.bg-navy-body .bg-amber-50,
body.bg-navy-body .bg-sky-50, body.bg-navy-body .bg-fuchsia-50,
body.bg-navy-body .bg-purple-100, body.bg-navy-body .bg-blue-100,
body.bg-navy-body .bg-indigo-100, body.bg-navy-body .bg-orange-100,
body.bg-navy-body [class~="from-orange-50"], body.bg-navy-body [class~="from-purple-50"],
body.bg-navy-body [class~="from-blue-50"], body.bg-navy-body [class~="from-indigo-50"] {
  background-color: var(--bg-card) !important;
  background-image: none !important;
}
body.bg-navy-body .bg-white.rounded-xl, body.bg-navy-body .bg-white.rounded-2xl,
body.bg-navy-body .bg-white.rounded-3xl, body.bg-navy-body .bg-white.rounded-lg,
body.bg-navy-body .bg-white.rounded {
  background-color: var(--bg-section) !important;
}
body.bg-navy-body .bg-gray-900, body.bg-navy-body .bg-gray-800 {
  background-color: var(--bg-section) !important;
}
body.bg-navy-body [class*="bg-purple-900"], body.bg-navy-body [class*="bg-blue-900"],
body.bg-navy-body [class*="bg-red-900"], body.bg-navy-body [class*="bg-teal-900"],
body.bg-navy-body [class*="bg-violet-900"], body.bg-navy-body [class*="bg-pink-900"] {
  background-color: var(--bg-section) !important;
}

/* Text inside dark-background named boxes → ensure it's light */
body.bg-navy-body [class*="bg-purple-900"] *,
body.bg-navy-body [class*="bg-blue-900"] *,
body.bg-navy-body [class*="bg-red-900"] *,
body.bg-navy-body [class*="bg-violet-900"] * {
  color: var(--text-body) !important;
  -webkit-text-fill-color: var(--text-body) !important;
}

/* 4.10 BORDER OVERRIDES */
body.bg-navy-body [class*="border-gray-200"],
body.bg-navy-body [class*="border-gray-300"] { border-color: var(--border) !important; }
body.bg-navy-body [class*="border-purple-200"], body.bg-navy-body [class*="border-blue-200"],
body.bg-navy-body [class*="border-green-200"], body.bg-navy-body [class*="border-violet-200"],
body.bg-navy-body [class*="border-indigo-200"], body.bg-navy-body [class*="border-orange-200"] {
  border-color: var(--border-acc) !important;
}

/* 4.11 FORM ELEMENTS */
body.bg-navy-body textarea,
body.bg-navy-body input[type="text"],
body.bg-navy-body input[type="email"],
body.bg-navy-body select {
  background-color: var(--bg-input) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: var(--text-body) !important;
  -webkit-text-fill-color: var(--text-body) !important;
}
body.bg-navy-body textarea::placeholder,
body.bg-navy-body input::placeholder {
  color: var(--text-muted) !important;
}

/* 4.12 PROSE / RICH TEXT */
body.bg-navy-body .prose, body.bg-navy-body .prose-lg,
body.bg-navy-body [class*="prose"] {
  color: var(--text-body) !important;
}
body.bg-navy-body .prose p, body.bg-navy-body .prose li,
body.bg-navy-body .prose ul, body.bg-navy-body .prose ol {
  color: var(--text-body) !important;
  -webkit-text-fill-color: var(--text-body) !important;
}
body.bg-navy-body .prose h1, body.bg-navy-body .prose h2,
body.bg-navy-body .prose h3, body.bg-navy-body .prose h4,
body.bg-navy-body .prose strong, body.bg-navy-body .prose b {
  color: var(--text-h) !important;
  -webkit-text-fill-color: var(--text-h) !important;
}
body.bg-navy-body .prose a {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
}

/* 4.13 SPECIAL BLOCKS */
/* Katherine gradient callout — all children white */
body.bg-navy-body [class*="from-orange-500"] *,
body.bg-navy-body [class*="from-orange-600"] *,
body.bg-navy-body [class*="from-rose-500"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* "From Katherine" aside strip */
body.bg-navy-body .border-l-4.border-orange-500,
body.bg-navy-body [class*="border-l-4"][class*="border-orange"] {
  background: rgba(249,115,22,0.07) !important;
  border-left-color: var(--orange) !important;
}
body.bg-navy-body .border-l-4.border-orange-500 *,
body.bg-navy-body [class*="border-l-4"][class*="border-orange"] * {
  color: var(--text-body) !important;
  -webkit-text-fill-color: var(--text-body) !important;
}

/* AI tip callout */
body.bg-navy-body [class~="from-orange-50"][class~="to-pink-50"],
body.bg-navy-body [class~="from-violet-50"], body.bg-navy-body .bg-violet-50 {
  background: rgba(249,115,22,0.07) !important;
  border-color: var(--border-acc) !important;
}
body.bg-navy-body .bg-white.border.border-violet-200,
body.bg-navy-body [class~="bg-white"][class*="border-violet"] {
  background: var(--bg-page) !important;
  border-color: var(--border-acc) !important;
}

/* Week badge pill */
body.bg-navy-body .bg-orange-100.text-orange-700,
body.bg-navy-body [class~="bg-orange-100"],
body.bg-navy-body [class~="bg-red-100"] {
  background: var(--orange-dim) !important;
}
body.bg-navy-body [class*="text-orange-700"] {
  color: #fb923c !important;
  -webkit-text-fill-color: #fb923c !important;
}

/* Breadcrumb bar */
body.bg-navy-body .bg-gray-100.border-b {
  background-color: var(--bg-page) !important;
  border-bottom-color: var(--border) !important;
}
body.bg-navy-body .bg-gray-100.border-b a,
body.bg-navy-body .bg-gray-100.border-b span {
  color: rgba(255,255,255,0.5) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.5) !important;
}
body.bg-navy-body .bg-gray-100.border-b a:hover {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
}
body.bg-navy-body .bg-gray-100.border-b svg { stroke: rgba(255,255,255,0.35) !important; }

/* 4.14 QUIZ COMPONENTS */
body.bg-navy-body .quiz-option {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-body) !important;
  -webkit-text-fill-color: var(--text-body) !important;
}
body.bg-navy-body .quiz-option.border-green-500 {
  border-color: #22c55e !important; background: rgba(34,197,94,0.10) !important;
}
body.bg-navy-body .quiz-option.border-red-500,
body.bg-navy-body .quiz-option.border-red-400 {
  border-color: #ef4444 !important; background: rgba(239,68,68,0.08) !important;
}
body.bg-navy-body #quiz-result .bg-green-100 {
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.3) !important;
}
body.bg-navy-body #quiz-result .text-green-900,
body.bg-navy-body #quiz-result .text-green-800 {
  color: #6ee7b7 !important; -webkit-text-fill-color: #6ee7b7 !important;
}
body.bg-navy-body #locked-msg {
  color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important;
}

/* Path tab active */
.path-tab { transition: all 0.2s ease !important; cursor: pointer !important; }
.bg-blue-600.text-white.shadow-lg, .path-tab.bg-blue-600 { background-color: var(--orange) !important; }
.bg-pink-600.text-white.shadow-lg { background-color: #ec4899 !important; }

/* LAYER 5 — COMPONENT LIBRARY */

/* 5.1 UNIFIED NAV */
.h2h-nav {
  background: var(--bg-page) !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky !important; top: 0 !important;
  z-index: 999 !important; height: 62px !important;
  display: flex !important; align-items: center !important;
}
.h2h-nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
}
.h2h-nav-brand {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.1rem !important; font-weight: 700 !important;
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important; text-decoration: none !important; flex-shrink: 0;
}
.h2h-nav-links { display: flex; align-items: center; gap: 4px; }
.h2h-nav-links a {
  color: rgba(255,255,255,0.58) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.58) !important;
  font-size: 0.84rem !important; font-weight: 500 !important;
  text-decoration: none !important; padding: 6px 12px !important;
  border-radius: 8px !important; background: transparent !important;
  border: none !important; white-space: nowrap; transition: all 0.18s !important;
}
.h2h-nav-links a:hover {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  background: rgba(255,255,255,0.07) !important;
}
.h2h-nav-links a.active {
  color: var(--orange) !important; -webkit-text-fill-color: var(--orange) !important;
  background: rgba(249,115,22,0.08) !important;
}
@media (max-width: 640px) {
  .h2h-nav-links a:not(:first-child):not(:last-child) { display: none !important; }
  .h2h-nav-links a { font-size: 0.78rem !important; padding: 5px 8px !important; }
}

/* 5.2 PROGRESS STRIP */
.lesson-progress-strip {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  padding: 6px 24px; background: var(--bg-page);
  border-bottom: 1px solid var(--border);
}

/* 5.3 LESSON NAV FOOTER */
.lesson-nav-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 28px 0 0; margin-top: 48px; border-top: 1px solid var(--border);
}
.lesson-nav-footer a {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-size: 0.88rem !important; font-weight: 600 !important;
  color: var(--text-sub) !important; -webkit-text-fill-color: var(--text-sub) !important;
  text-decoration: none !important; padding: 10px 18px !important;
  border: 1.5px solid var(--border) !important; border-radius: 10px !important;
  background: var(--bg-card) !important; transition: all 0.18s !important;
}
.lesson-nav-footer a:hover {
  border-color: var(--orange) !important;
  color: var(--orange) !important; -webkit-text-fill-color: var(--orange) !important;
}
.lesson-nav-footer a.next-btn {
  background: var(--grad) !important; color: #fff !important;
  -webkit-text-fill-color: #fff !important; border-color: transparent !important;
  font-weight: 700 !important;
}

/* 5.4 KATHERINE SIGNATURE */
.lesson-katherine-closer {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700;
  font-size: 1.1rem; color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
  padding: 28px 0 0; margin-top: 48px;
  border-top: 1px solid rgba(249,115,22,0.15);
}

/* LAYER 6 — TYPOGRAPHY SCALE */

body.bg-navy-body h1.section-header,
body.bg-navy-body .max-w-4xl h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.875rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important; line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}

body.bg-navy-body h1 + p.text-2xl,
body.bg-navy-body h1 + p.text-xl,
body.bg-navy-body .max-w-4xl > p.text-2xl {
  font-size: 1.05rem !important; line-height: 1.8 !important;
  color: var(--text-sub) !important; -webkit-text-fill-color: var(--text-sub) !important;
  font-weight: 400 !important;
}

body.bg-navy-body .prose p,
body.bg-navy-body .text-xl.text-gray-700,
body.bg-navy-body .text-xl.text-gray-800,
body.bg-navy-body .text-lg.text-gray-700 {
  font-size: 1rem !important; line-height: 1.8 !important;
}

/* Cap aggressive text sizes */
body.bg-navy-body .text-7xl { font-size: 2.75rem !important; }
body.bg-navy-body .text-5xl:not(.section-header):not(.heading-serif),
body.bg-navy-body .text-6xl:not(.section-header):not(.heading-serif) {
  font-size: clamp(1.875rem, 4vw, 2.75rem) !important;
}
body.bg-navy-body .text-4xl { font-size: 2rem !important; line-height: 1.2 !important; }
body.bg-navy-body .text-3xl { font-size: 1.65rem !important; line-height: 1.3 !important; }
body.bg-navy-body .text-2xl { font-size: 1.3rem !important; line-height: 1.4 !important; }

/* Content padding */
body.bg-navy-body [class*="py-24"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
body.bg-navy-body [class*="py-20"] { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
body.bg-navy-body [class*="py-16"] { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* Readability cap */
.max-w-4xl { max-width: 56rem !important; }
.prose.prose-lg { max-width: 56rem !important; }

/* ════════════════════════════════════════════════════════════════
   LAYER 7 — COVERAGE EXTENSIONS
   Covers bg-navy-900 Tailwind pages (week-1 through week-4 overviews)
   and additional edge-case patterns not covered above.
   ════════════════════════════════════════════════════════════════ */

/* bg-navy-900 pages (week overview pages) use Tailwind custom navy */
/* We extend all dark-mode rules to them */
body.bg-navy-900,
body[class*="bg-navy"] {
  background-color: #0a1628 !important;
  color: #e2e8f0 !important;
}

body.bg-navy-900 h1, body.bg-navy-900 h2,
body.bg-navy-900 h3, body.bg-navy-900 h4,
body[class*="bg-navy"] h1, body[class*="bg-navy"] h2,
body[class*="bg-navy"] h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.bg-navy-900 p, body.bg-navy-900 li, body.bg-navy-900 span,
body[class*="bg-navy"] p, body[class*="bg-navy"] li {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

body.bg-navy-900 .text-gray-900, body.bg-navy-900 .text-gray-800,
body.bg-navy-900 .text-gray-700 {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
body.bg-navy-900 .text-gray-600, body.bg-navy-900 .text-gray-500,
body.bg-navy-900 .text-gray-400, body.bg-navy-900 .text-gray-300 {
  color: rgba(226,232,240,0.72) !important;
  -webkit-text-fill-color: rgba(226,232,240,0.72) !important;
}
body.bg-navy-900 .text-white { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }

/* Breadcrumb bar on navy-900 pages */
body.bg-navy-900 .bg-gray-100,
body.bg-navy-900 .bg-navy-800\/50 {
  background-color: rgba(15,27,45,0.8) !important;
}

/* ── Amber/brown text → brand orange (these are invisible on dark bg) ── */
/* Covers ALL pages regardless of body class */
[style*="color:#92400e"], [style*="color: #92400e"] {
  color: rgba(249,115,22,0.9) !important;
  -webkit-text-fill-color: rgba(249,115,22,0.9) !important;
}
[style*="color:#b45309"], [style*="color: #b45309"] {
  color: rgba(249,115,22,0.85) !important;
  -webkit-text-fill-color: rgba(249,115,22,0.85) !important;
}
[style*="color:#78350f"], [style*="color: #78350f"] {
  color: rgba(249,115,22,0.8) !important;
  -webkit-text-fill-color: rgba(249,115,22,0.8) !important;
}

/* ── Warm light card backgrounds → dark (covers any missed instances) ── */
body.bg-navy-body [style*="background:#fff7ed"],
body.bg-navy-body [style*="background: #fff7ed"] {
  background: rgba(249,115,22,0.08) !important;
}
body.bg-navy-body [style*="background:#fdf2f8"],
body.bg-navy-body [style*="background: #fdf2f8"] {
  background: rgba(236,72,153,0.08) !important;
}
body.bg-navy-body [style*="background:#f0fdf4"],
body.bg-navy-body [style*="background: #f0fdf4"] {
  background: rgba(16,185,129,0.08) !important;
}
body.bg-navy-body [style*="background:#fef3c7"],
body.bg-navy-body [style*="background:#fffbeb"] {
  background: rgba(249,115,22,0.08) !important;
}

/* ── Warm border colors → dark ── */
body.bg-navy-body [style*="border-color:#e2e8f0"],
body.bg-navy-body [style*="border-color: #e2e8f0"] {
  border-color: rgba(255,255,255,0.09) !important;
}
body.bg-navy-body [style*="border:1.5px solid rgba(249,115,22"] {
  border-color: rgba(249,115,22,0.3) !important;
}

/* ── 94a3b8 (slate-400) on dark bg → readable ── */
body.bg-navy-body [style*="color:#94a3b8"],
body.bg-navy-body .text-slate-400,
body.bg-navy-body .text-slate-500 {
  color: rgba(226,232,240,0.55) !important;
  -webkit-text-fill-color: rgba(226,232,240,0.55) !important;
}

/* ── Light section dividers ── */
body.bg-navy-body .bg-gradient-to-b,
body.bg-navy-body [class*="from-gray-50"],
body.bg-navy-body [class*="from-slate-50"] {
  background: var(--bg-section, #0f1b2d) !important;
  background-image: none !important;
}

/* ════════════════════════════════════════════════════════════════
   LAYER 8 — COMPLETE LIGHT-TO-DARK TAILWIND COVERAGE
   Every single light background Tailwind class → dark card
   This is the definitive fix for all "light card on dark page" bugs.
   ════════════════════════════════════════════════════════════════ */

/* The universal rule: ANY element on a dark page with a Tailwind 
   light background class gets converted to the dark card color.
   Covers ALL color families at -50, -100, -200 levels. */

body.bg-navy-body .bg-red-50,
body.bg-navy-body .bg-red-100,
body.bg-navy-body .bg-red-200,
body.bg-navy-body .bg-rose-50,
body.bg-navy-body .bg-rose-100,
body.bg-navy-body .bg-pink-50,
body.bg-navy-body .bg-pink-100,
body.bg-navy-body .bg-pink-200,
body.bg-navy-body .bg-orange-50,
body.bg-navy-body .bg-orange-100,
body.bg-navy-body .bg-orange-200,
body.bg-navy-body .bg-amber-50,
body.bg-navy-body .bg-amber-100,
body.bg-navy-body .bg-yellow-50,
body.bg-navy-body .bg-yellow-100,
body.bg-navy-body .bg-yellow-200,
body.bg-navy-body .bg-lime-50,
body.bg-navy-body .bg-green-50,
body.bg-navy-body .bg-green-100,
body.bg-navy-body .bg-green-200,
body.bg-navy-body .bg-emerald-50,
body.bg-navy-body .bg-emerald-100,
body.bg-navy-body .bg-emerald-200,
body.bg-navy-body .bg-teal-50,
body.bg-navy-body .bg-teal-100,
body.bg-navy-body .bg-cyan-50,
body.bg-navy-body .bg-cyan-100,
body.bg-navy-body .bg-cyan-200,
body.bg-navy-body .bg-sky-50,
body.bg-navy-body .bg-sky-100,
body.bg-navy-body .bg-blue-50,
body.bg-navy-body .bg-blue-100,
body.bg-navy-body .bg-blue-200,
body.bg-navy-body .bg-indigo-50,
body.bg-navy-body .bg-indigo-100,
body.bg-navy-body .bg-violet-50,
body.bg-navy-body .bg-violet-100,
body.bg-navy-body .bg-purple-50,
body.bg-navy-body .bg-purple-100,
body.bg-navy-body .bg-purple-200,
body.bg-navy-body .bg-fuchsia-50,
body.bg-navy-body .bg-fuchsia-100,
body.bg-navy-body .bg-gray-50,
body.bg-navy-body .bg-gray-100,
body.bg-navy-body .bg-gray-200,
body.bg-navy-body .bg-slate-50,
body.bg-navy-body .bg-slate-100,
body.bg-navy-body .bg-white,
/* from-* gradient start classes */
body.bg-navy-body [class~="from-red-50"],
body.bg-navy-body [class~="from-rose-50"],
body.bg-navy-body [class~="from-pink-50"],
body.bg-navy-body [class~="from-orange-50"],
body.bg-navy-body [class~="from-amber-50"],
body.bg-navy-body [class~="from-yellow-50"],
body.bg-navy-body [class~="from-green-50"],
body.bg-navy-body [class~="from-emerald-50"],
body.bg-navy-body [class~="from-teal-50"],
body.bg-navy-body [class~="from-cyan-50"],
body.bg-navy-body [class~="from-blue-50"],
body.bg-navy-body [class~="from-indigo-50"],
body.bg-navy-body [class~="from-violet-50"],
body.bg-navy-body [class~="from-purple-50"],
body.bg-navy-body [class~="from-gray-50"],
body.bg-navy-body [class~="from-slate-50"],
body.bg-navy-body [class~="from-white"] {
  background-color: #1a2744 !important;
  background-image: none !important;
}

/* Same coverage for bg-navy-900 pages (week overview pages) */
body.bg-navy-900 .bg-red-50, body.bg-navy-900 .bg-rose-50,
body.bg-navy-900 .bg-pink-50, body.bg-navy-900 .bg-orange-50,
body.bg-navy-900 .bg-yellow-50, body.bg-navy-900 .bg-green-50,
body.bg-navy-900 .bg-emerald-50, body.bg-navy-900 .bg-blue-50,
body.bg-navy-900 .bg-indigo-50, body.bg-navy-900 .bg-violet-50,
body.bg-navy-900 .bg-purple-50, body.bg-navy-900 .bg-gray-50,
body.bg-navy-900 .bg-gray-100, body.bg-navy-900 .bg-white {
  background-color: #1a2744 !important;
  background-image: none !important;
}

/* TEXT inside ANY of these now-dark cards must be readable */
body.bg-navy-body .bg-red-50 *,
body.bg-navy-body .bg-rose-50 *,
body.bg-navy-body .bg-pink-50 *,
body.bg-navy-body .bg-pink-100 *,
body.bg-navy-body .bg-pink-200 *,
body.bg-navy-body .bg-orange-50 *,
body.bg-navy-body .bg-orange-100 *,
body.bg-navy-body .bg-yellow-50 *,
body.bg-navy-body .bg-yellow-100 *,
body.bg-navy-body .bg-green-50 *,
body.bg-navy-body .bg-green-100 *,
body.bg-navy-body .bg-emerald-50 *,
body.bg-navy-body .bg-teal-50 *,
body.bg-navy-body .bg-cyan-50 *,
body.bg-navy-body .bg-cyan-100 *,
body.bg-navy-body .bg-cyan-200 *,
body.bg-navy-body .bg-blue-50 *,
body.bg-navy-body .bg-blue-100 *,
body.bg-navy-body .bg-blue-200 *,
body.bg-navy-body .bg-indigo-50 *,
body.bg-navy-body .bg-violet-50 *,
body.bg-navy-body .bg-violet-100 *,
body.bg-navy-body .bg-purple-50 *,
body.bg-navy-body .bg-purple-100 *,
body.bg-navy-body .bg-purple-200 *,
body.bg-navy-body .bg-gray-50 *,
body.bg-navy-body .bg-gray-100 *,
body.bg-navy-body .bg-gray-200 *,
body.bg-navy-body [class~="from-red-50"] *,
body.bg-navy-body [class~="from-orange-50"] *,
body.bg-navy-body [class~="from-blue-50"] *,
body.bg-navy-body [class~="from-green-50"] *,
body.bg-navy-body [class~="from-purple-50"] * {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

/* Headings inside these cards → white */
body.bg-navy-body .bg-red-50 h1, body.bg-navy-body .bg-red-50 h2,
body.bg-navy-body .bg-red-50 h3, body.bg-navy-body .bg-red-50 h4,
body.bg-navy-body .bg-blue-50 h1, body.bg-navy-body .bg-blue-50 h2,
body.bg-navy-body .bg-blue-50 h3, body.bg-navy-body .bg-blue-50 h4,
body.bg-navy-body .bg-green-50 h1, body.bg-navy-body .bg-green-50 h2,
body.bg-navy-body .bg-green-50 h3, body.bg-navy-body .bg-green-50 h4,
body.bg-navy-body .bg-orange-50 h1, body.bg-navy-body .bg-orange-50 h2,
body.bg-navy-body .bg-orange-50 h3, body.bg-navy-body .bg-orange-50 h4,
body.bg-navy-body .bg-purple-50 h1, body.bg-navy-body .bg-purple-50 h2,
body.bg-navy-body .bg-purple-50 h3, body.bg-navy-body .bg-purple-50 p.font-bold,
body.bg-navy-body [class~="from-orange-50"] h1,
body.bg-navy-body [class~="from-orange-50"] h2,
body.bg-navy-body [class~="from-orange-50"] h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Strong/bold text inside cards → white for emphasis */
body.bg-navy-body .bg-red-50 strong, body.bg-navy-body .bg-red-50 b,
body.bg-navy-body .bg-blue-50 strong, body.bg-navy-body .bg-blue-50 b,
body.bg-navy-body .bg-green-50 strong, body.bg-navy-body .bg-green-50 b,
body.bg-navy-body .bg-orange-50 strong, body.bg-navy-body .bg-purple-50 strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Border fix for these cards on dark bg */
body.bg-navy-body .bg-red-50.border-red-500,
body.bg-navy-body .bg-red-50.border-l-4 { border-color: #ef4444 !important; }
body.bg-navy-body .bg-blue-50.border-blue-400,
body.bg-navy-body .bg-blue-50.border-l-4 { border-color: #60a5fa !important; }
body.bg-navy-body .bg-green-50.border-green-500,
body.bg-navy-body .bg-green-50.border-l-4 { border-color: #22c55e !important; }

/* Remaining text color classes inside light-turned-dark cards */
body.bg-navy-body .bg-red-50 .text-red-900,
body.bg-navy-body .bg-red-50 .text-red-800,
body.bg-navy-body .bg-red-50 .text-red-700 {
  color: #fca5a5 !important;
  -webkit-text-fill-color: #fca5a5 !important;
}
body.bg-navy-body .bg-blue-50 .text-blue-900,
body.bg-navy-body .bg-blue-50 .text-blue-800,
body.bg-navy-body .bg-blue-50 .text-blue-700 {
  color: #93c5fd !important;
  -webkit-text-fill-color: #93c5fd !important;
}
body.bg-navy-body .bg-green-50 .text-green-900,
body.bg-navy-body .bg-green-50 .text-green-800,
body.bg-navy-body .bg-emerald-50 .text-emerald-900 {
  color: #6ee7b7 !important;
  -webkit-text-fill-color: #6ee7b7 !important;
}
body.bg-navy-body .bg-orange-50 .text-orange-900,
body.bg-navy-body .bg-orange-50 .text-orange-800 {
  color: #fb923c !important;
  -webkit-text-fill-color: #fb923c !important;
}
body.bg-navy-body .bg-purple-50 .text-purple-900,
body.bg-navy-body .bg-purple-50 .text-purple-800,
body.bg-navy-body .bg-indigo-50 .text-indigo-900 {
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
}

/* The one remaining inline light color (#eff6ff = blue-50) */
body.bg-navy-body [style*="background:#eff6ff"],
body.bg-navy-body [style*="background: #eff6ff"] {
  background-color: #1a2744 !important;
}

/* ================================================================
   HOME2HIRED — PHASE/PATH ARCHITECTURE LAYER  v6.0
   New tokens, badges, and structural UI for 3-path ecosystem
   ================================================================ */

/* PATH COLOR TOKENS — W2 = indigo, 1099 = amber/orange, Social = pink */
:root {
  --path-w2:        #6366f1;
  --path-w2-dim:    rgba(99,102,241,0.12);
  --path-w2-border: rgba(99,102,241,0.25);
  --path-1099:      #f97316;
  --path-1099-dim:  rgba(249,115,22,0.12);
  --path-1099-border: rgba(249,115,22,0.25);
  --path-social:    #ec4899;
  --path-social-dim: rgba(236,72,153,0.12);
  --path-social-border: rgba(236,72,153,0.25);
  --path-launchpad: #14b8a6;
  --path-launchpad-dim: rgba(20,184,166,0.12);
  --path-foundation: #8b5cf6;
  --path-foundation-dim: rgba(139,92,246,0.12);
}

/* PATH BADGE — pill shown in lesson header */
.path-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid;
}
.path-badge.badge-w2         { color: var(--path-w2);     background: var(--path-w2-dim);     border-color: var(--path-w2-border);     }
.path-badge.badge-1099        { color: var(--path-1099);   background: var(--path-1099-dim);   border-color: var(--path-1099-border);   }
.path-badge.badge-social      { color: var(--path-social); background: var(--path-social-dim); border-color: var(--path-social-border); }
.path-badge.badge-launchpad   { color: var(--path-launchpad); background: var(--path-launchpad-dim); border-color: rgba(20,184,166,0.25); }
.path-badge.badge-foundation  { color: var(--path-foundation); background: var(--path-foundation-dim); border-color: rgba(139,92,246,0.25); }
.path-badge.badge-all         { color: var(--orange); background: var(--orange-dim); border-color: var(--border-acc); }

/* PATH BADGE DOT */
.path-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* PHASE BANNER — top-of-lesson context strip */
.phase-banner {
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.phase-banner-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.phase-banner-left  { display: flex; align-items: center; gap: 10px; }
.phase-banner-phase { font-size: 0.75rem; color: var(--text-sub); font-weight: 500; }
.phase-banner-sep   { color: var(--text-muted); font-size: 0.7rem; }
.phase-banner-title { font-size: 0.82rem; font-weight: 600; color: var(--text-body); }

/* LESSON SCAFFOLDING BLOCKS */
.lesson-before-you-start {
  background: var(--path-launchpad-dim);
  border: 1px solid rgba(20,184,166,0.2);
  border-left: 3px solid var(--path-launchpad);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 28px 0;
}
.lesson-before-you-start .scaffold-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--path-launchpad);
  margin-bottom: 8px;
}

.lesson-what-youll-get {
  background: var(--path-foundation-dim);
  border: 1px solid rgba(139,92,246,0.2);
  border-left: 3px solid var(--path-foundation);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 28px 0;
}
.lesson-what-youll-get .scaffold-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--path-foundation);
  margin-bottom: 8px;
}

.lesson-real-talk {
  background: rgba(249,115,22,0.06);
  border: 1px solid rgba(249,115,22,0.15);
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  padding: 22px 26px;
  margin: 28px 0;
}
.lesson-real-talk .scaffold-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.lesson-real-talk .real-talk-attr {
  font-size: 0.78rem;
  color: var(--text-sub);
  margin-top: 12px;
  font-style: italic;
}

.lesson-prove-it {
  background: rgba(236,72,153,0.06);
  border: 1px solid rgba(236,72,153,0.15);
  border-left: 3px solid var(--pink);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 36px 0 20px;
}
.lesson-prove-it .scaffold-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 8px;
}

.lesson-say-it-loud {
  background: linear-gradient(135deg, rgba(249,115,22,0.07), rgba(236,72,153,0.07));
  border: 1px solid rgba(249,115,22,0.15);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 28px 0;
  text-align: center;
}
.lesson-say-it-loud .scaffold-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.lesson-say-it-loud .say-it-prompt {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: #fff;
  line-height: 1.55;
}

/* MILESTONE COMPLETION BLOCK */
.phase-complete-block {
  background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(236,72,153,0.08));
  border: 1px solid rgba(249,115,22,0.2);
  border-radius: 18px;
  padding: 40px 36px;
  text-align: center;
  margin: 48px 0 32px;
}
.phase-complete-block .complete-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
}
.phase-complete-block h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  color: #fff;
  margin-bottom: 12px;
}
.phase-complete-block p {
  color: var(--text-sub);
  font-size: 0.95rem;
  max-width: 520px;
  margin: 0 auto 24px;
  line-height: 1.7;
}
.phase-complete-btn {
  display: inline-block;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(249,115,22,0.25);
  transition: opacity 0.2s;
}
.phase-complete-btn:hover { opacity: 0.88; }

/* PATH SELECTION CARD (used in path-select.html) */
.path-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 32px 0;
}
.path-select-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  display: block;
}
.path-select-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.path-select-card.card-w2:hover      { border-color: var(--path-w2);     }
.path-select-card.card-1099:hover    { border-color: var(--path-1099);   }
.path-select-card.card-social:hover  { border-color: var(--path-social); }
.path-card-icon {
  font-size: 2.2rem;
  margin-bottom: 18px;
}
.path-card-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.path-card-label.w2     { color: var(--path-w2);     }
.path-card-label.c1099  { color: var(--path-1099);   }
.path-card-label.social { color: var(--path-social); }
.path-select-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 10px;
}
.path-select-card p {
  font-size: 0.84rem;
  color: var(--text-sub);
  line-height: 1.65;
  margin-bottom: 20px;
}
.path-card-fits {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.path-card-fits span {
  display: inline-block;
  margin: 3px 4px 3px 0;
  padding: 3px 9px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  color: var(--text-sub);
}
.path-card-cta {
  font-size: 0.85rem;
  font-weight: 700;
}
.path-card-cta.w2     { color: var(--path-w2);     }
.path-card-cta.c1099  { color: var(--path-1099);   }
.path-card-cta.social { color: var(--path-social); }

/* ACADEMY HEADER (top of each academy overview) */
.academy-header {
  padding: 60px 24px 44px;
  text-align: center;
}
.academy-header .academy-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.academy-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.2;
}
.academy-header p {
  font-size: 1rem;
  color: var(--text-sub);
  max-width: 600px;
  margin: 0 auto 28px;
  line-height: 1.72;
}
.academy-progress-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.academy-stage-dot {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.academy-stage-dot.active {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-dim);
}

/* CROSSOVER TEASER BLOCK (shown at end of path) */
.crossover-teaser {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
  margin: 48px 0;
}
.crossover-teaser .ct-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.crossover-teaser h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 10px;
}
.crossover-teaser p {
  color: var(--text-sub);
  font-size: 0.88rem;
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 20px;
}
.crossover-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.crossover-pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid;
  transition: opacity 0.2s;
}
.crossover-pill:hover { opacity: 0.78; }
.crossover-pill.pill-w2     { color: var(--path-w2);     border-color: var(--path-w2-border);     background: var(--path-w2-dim);     }
.crossover-pill.pill-1099   { color: var(--path-1099);   border-color: var(--path-1099-border);   background: var(--path-1099-dim);   }
.crossover-pill.pill-social { color: var(--path-social); border-color: var(--path-social-border); background: var(--path-social-dim); }

/* ================================================================
   HOME2HIRED — PHASE/PATH ARCHITECTURE LAYER  v6.0
   New tokens, badges, and structural UI for 3-path ecosystem
   ================================================================ */

/* PATH COLOR TOKENS */
:root {
  --path-w2:            #6366f1;
  --path-w2-dim:        rgba(99,102,241,0.12);
  --path-w2-border:     rgba(99,102,241,0.25);
  --path-1099:          #f97316;
  --path-1099-dim:      rgba(249,115,22,0.12);
  --path-1099-border:   rgba(249,115,22,0.25);
  --path-social:        #ec4899;
  --path-social-dim:    rgba(236,72,153,0.12);
  --path-social-border: rgba(236,72,153,0.25);
  --path-launchpad:     #14b8a6;
  --path-launchpad-dim: rgba(20,184,166,0.12);
  --path-foundation:    #8b5cf6;
  --path-foundation-dim:rgba(139,92,246,0.12);
}

/* PATH BADGE */
.path-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; padding: 5px 13px;
  border-radius: 999px; border: 1px solid;
}
.path-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.path-badge.badge-w2        { color:var(--path-w2);       background:var(--path-w2-dim);        border-color:var(--path-w2-border);       }
.path-badge.badge-1099       { color:var(--path-1099);     background:var(--path-1099-dim);      border-color:var(--path-1099-border);     }
.path-badge.badge-social     { color:var(--path-social);   background:var(--path-social-dim);    border-color:var(--path-social-border);   }
.path-badge.badge-launchpad  { color:var(--path-launchpad);background:var(--path-launchpad-dim); border-color:rgba(20,184,166,0.25);       }
.path-badge.badge-foundation { color:var(--path-foundation);background:var(--path-foundation-dim);border-color:rgba(139,92,246,0.25);     }
.path-badge.badge-all        { color:var(--orange);        background:var(--orange-dim);         border-color:var(--border-acc);           }

/* PHASE BANNER */
.phase-banner { background:var(--bg-section); border-bottom:1px solid var(--border); padding:10px 0; }
.phase-banner-inner { max-width:860px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.phase-banner-left { display:flex; align-items:center; gap:10px; }
.phase-banner-phase { font-size:0.75rem; color:var(--text-sub); font-weight:500; }
.phase-banner-sep { color:var(--text-muted); font-size:0.7rem; }
.phase-banner-title { font-size:0.82rem; font-weight:600; color:var(--text-body); }

/* SCAFFOLDING BLOCKS */
.lesson-before-you-start,.lesson-what-youll-get,.lesson-real-talk,.lesson-prove-it {
  border-radius:10px; padding:20px 24px; margin:28px 0; border:1px solid; border-left:3px solid;
}
.lesson-before-you-start { background:var(--path-launchpad-dim); border-color:rgba(20,184,166,0.2); border-left-color:var(--path-launchpad); }
.lesson-what-youll-get   { background:var(--path-foundation-dim); border-color:rgba(139,92,246,0.2); border-left-color:var(--path-foundation); }
.lesson-real-talk        { background:rgba(249,115,22,0.06); border-color:rgba(249,115,22,0.15); border-left-color:var(--orange); }
.lesson-prove-it         { background:rgba(236,72,153,0.06); border-color:rgba(236,72,153,0.15); border-left-color:var(--pink); }
.scaffold-label { font-size:0.65rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; display:block; }
.lesson-before-you-start .scaffold-label { color:var(--path-launchpad); }
.lesson-what-youll-get .scaffold-label   { color:var(--path-foundation); }
.lesson-real-talk .scaffold-label        { color:var(--orange); }
.lesson-prove-it .scaffold-label         { color:var(--pink); }
.real-talk-attr { font-size:0.78rem; color:var(--text-sub); margin-top:12px; font-style:italic; }

.lesson-say-it-loud {
  background:linear-gradient(135deg,rgba(249,115,22,0.07),rgba(236,72,153,0.07));
  border:1px solid rgba(249,115,22,0.15); border-radius:14px;
  padding:24px 28px; margin:28px 0; text-align:center;
}
.lesson-say-it-loud .scaffold-label { color:var(--orange); }
.lesson-say-it-loud .say-it-prompt { font-family:'Playfair Display',serif; font-size:1.15rem; font-style:italic; color:#fff; line-height:1.55; }

/* MILESTONE / PHASE COMPLETE */
.phase-complete-block {
  background:linear-gradient(135deg,rgba(249,115,22,0.08),rgba(236,72,153,0.08));
  border:1px solid rgba(249,115,22,0.2); border-radius:18px;
  padding:40px 36px; text-align:center; margin:48px 0 32px;
}
.phase-complete-block .complete-icon { font-size:2.5rem; margin-bottom:16px; }
.phase-complete-block h2 { font-family:'Playfair Display',serif; font-size:1.7rem; color:#fff; margin-bottom:12px; }
.phase-complete-block p  { color:var(--text-sub); font-size:0.95rem; max-width:520px; margin:0 auto 24px; line-height:1.7; }
.phase-complete-btn {
  display:inline-block; background:var(--grad); color:#fff; font-weight:700;
  font-size:0.95rem; padding:14px 32px; border-radius:12px; text-decoration:none;
  box-shadow:0 4px 20px rgba(249,115,22,0.25); transition:opacity 0.2s;
}
.phase-complete-btn:hover { opacity:0.88; }

/* PATH SELECT CARDS */
.path-select-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin:32px 0; }
.path-select-card {
  background:var(--bg-card); border:2px solid var(--border); border-radius:18px;
  padding:32px 28px; cursor:pointer; text-decoration:none;
  transition:transform 0.18s,border-color 0.18s,box-shadow 0.18s; display:block;
}
.path-select-card:hover { transform:translateY(-4px); box-shadow:0 8px 32px rgba(0,0,0,0.25); }
.path-select-card.card-w2:hover    { border-color:var(--path-w2);     }
.path-select-card.card-1099:hover  { border-color:var(--path-1099);   }
.path-select-card.card-social:hover{ border-color:var(--path-social); }
.path-card-icon { font-size:2.2rem; margin-bottom:18px; }
.path-card-label { font-size:0.65rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
.path-card-label.w2     { color:var(--path-w2);     }
.path-card-label.c1099  { color:var(--path-1099);   }
.path-card-label.social { color:var(--path-social); }
.path-select-card h3 { font-family:'Playfair Display',serif; font-size:1.2rem; color:#fff; margin-bottom:10px; }
.path-select-card p  { font-size:0.84rem; color:var(--text-sub); line-height:1.65; margin-bottom:20px; }
.path-card-fits span {
  display:inline-block; margin:3px 4px 3px 0; padding:3px 9px;
  background:rgba(255,255,255,0.05); border-radius:999px; color:var(--text-sub); font-size:0.78rem;
}
.path-card-cta { font-size:0.85rem; font-weight:700; }
.path-card-cta.w2     { color:var(--path-w2);     }
.path-card-cta.c1099  { color:var(--path-1099);   }
.path-card-cta.social { color:var(--path-social); }

/* CROSSOVER TEASER */
.crossover-teaser { background:var(--bg-section); border:1px solid var(--border); border-radius:16px; padding:36px 32px; margin:48px 0; }
.crossover-teaser .ct-label { font-size:0.65rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
.crossover-teaser h3 { font-family:'Playfair Display',serif; font-size:1.3rem; color:#fff; margin-bottom:10px; }
.crossover-teaser p  { color:var(--text-sub); font-size:0.88rem; line-height:1.65; max-width:560px; margin-bottom:20px; }
.crossover-cards { display:flex; gap:12px; flex-wrap:wrap; }
.crossover-pill { display:inline-block; padding:8px 16px; border-radius:999px; font-size:0.8rem; font-weight:600; text-decoration:none; border:1px solid; transition:opacity 0.2s; }
.crossover-pill:hover { opacity:0.78; }
.crossover-pill.pill-w2     { color:var(--path-w2);     border-color:var(--path-w2-border);     background:var(--path-w2-dim);     }
.crossover-pill.pill-1099   { color:var(--path-1099);   border-color:var(--path-1099-border);   background:var(--path-1099-dim);   }
.crossover-pill.pill-social { color:var(--path-social); border-color:var(--path-social-border); background:var(--path-social-dim); }