/* MKH Dark — homepage + shared chrome
   Tokens aligned to approved express dark + solid float cards.
   No cream/heritage. No glass. No stars. No "Express" chrome. */
:root {
  --mkh-page: #0b2035;
  --mkh-page-deep: #0a1c33;
  --mkh-page-ramp: #08182e;
  --mkh-card: #0d2444;
  --mkh-card-raised: #122a4a;
  --mkh-border: rgba(255, 255, 255, 0.12);
  --mkh-border-strong: rgba(255, 255, 255, 0.22);
  --mkh-ink: #ffffff;
  --mkh-ink-soft: #c6d9f0;
  --mkh-ink-dim: #93aecd;
  --mkh-gold: #efa93f;
  --mkh-gold-hi: #f5c477;
  --mkh-gold-lo: #bf7010;
  --mkh-navy-950: #061426;
  --mkh-cast: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px -10px rgba(0, 0, 0, 0.55),
    0 28px 56px -24px rgba(0, 0, 0, 0.65);
}

/* Remap heritage parchment / forest stack → navy+gold (skip express shell) */
html:not(:has(.express-root)) {
  color-scheme: dark;
  --color-parchment-50: #0d2444;
  --color-parchment-100: #0b2035;
  --color-parchment-200: #122a4a;
  --color-parchment-300: #1a3554;
  --color-parchment-400: #2a4a6e;
  --color-ink-900: #ffffff;
  --color-ink-800: #e8f0fa;
  --color-ink-700: #c6d9f0;
  --color-ink-600: #a8c0dc;
  --color-ink-500: #93aecd;
  --color-ink-400: #7a9bc4;
  --color-ink-300: #6280ab;
  --color-forest-50: #122a4a;
  --color-forest-100: #0d2444;
  --color-forest-200: #1a3554;
  --color-forest-600: #efa93f;
  --color-forest-700: #0d2444;
  --color-forest-800: #0a1c33;
  --color-forest-900: #061426;
  --color-gold-50: #1a2f4a;
  --color-gold-100: #243a56;
  --color-gold-300: #efa93f;
  --color-gold-400: #efa93f;
  --color-gold-500: #efa93f;
  --color-gold-600: #f5c477;
  --color-gold-700: #f5c477;
  --color-gold-800: #f5c477;
}

html:not(:has(.express-root)) body {
  background-color: var(--mkh-page) !important;
  color: var(--mkh-ink-soft) !important;
}

/* Sticky header → deep navy glassless bar */
html:not(:has(.express-root)) header.sticky {
  background: rgba(10, 28, 51, 0.96) !important;
  border-bottom-color: var(--mkh-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html:not(:has(.express-root)) header .text-ink-900,
html:not(:has(.express-root)) header .font-semibold.text-ink-900 {
  color: var(--mkh-ink) !important;
}

html:not(:has(.express-root)) header a.text-ink-600,
html:not(:has(.express-root)) header button.text-ink-600,
html:not(:has(.express-root)) header .text-ink-700 {
  color: var(--mkh-ink-dim) !important;
}

html:not(:has(.express-root)) header a:hover,
html:not(:has(.express-root)) header button:hover {
  color: var(--mkh-ink) !important;
}

html:not(:has(.express-root)) header .hover\:bg-parchment-200:hover {
  background-color: rgba(239, 169, 63, 0.12) !important;
}

/* Gold CTAs — express gold-chrome language */
html:not(:has(.express-root)) .gold-face {
  background-image: linear-gradient(180deg, #ffffff52 0%, #ffffff0f 44%, #fff0 52%),
    linear-gradient(180deg, var(--mkh-gold-hi) 0%, var(--mkh-gold) 46%, var(--mkh-gold-lo) 100%) !important;
  color: var(--mkh-navy-950) !important;
  border-color: rgba(239, 169, 63, 0.45) !important;
  box-shadow: inset 0 1px #ffffff80, inset 0 -2px 4px #6d3f0973, 0 2px 10px #0003,
    0 18px 40px -16px #efa93f80 !important;
}

html:not(:has(.express-root)) .gold-face:hover {
  filter: brightness(1.08);
}

/* Secondary buttons — outlined gold / deep navy fill */
html:not(:has(.express-root)) a.bg-white,
html:not(:has(.express-root)) button.bg-white {
  background-color: transparent !important;
  color: var(--mkh-ink) !important;
  border-color: rgba(239, 169, 63, 0.55) !important;
}

html:not(:has(.express-root)) a.bg-white:hover,
html:not(:has(.express-root)) button.bg-white:hover,
html:not(:has(.express-root)) a.hover\:bg-gold-50:hover {
  background-color: rgba(239, 169, 63, 0.12) !important;
  border-color: var(--mkh-gold) !important;
  color: var(--mkh-ink) !important;
}

html:not(:has(.express-root)) a.bg-forest-700,
html:not(:has(.express-root)) button.bg-forest-700 {
  background-image: linear-gradient(180deg, #ffffff52 0%, #ffffff0f 44%, #fff0 52%),
    linear-gradient(180deg, var(--mkh-gold-hi) 0%, var(--mkh-gold) 46%, var(--mkh-gold-lo) 100%) !important;
  background-color: var(--mkh-gold) !important;
  color: var(--mkh-navy-950) !important;
  border-color: rgba(239, 169, 63, 0.45) !important;
}

html:not(:has(.express-root)) a.bg-forest-700:hover,
html:not(:has(.express-root)) a.hover\:bg-forest-600:hover {
  filter: brightness(1.08);
  background-color: var(--mkh-gold) !important;
}

/* Hero overlays — navy wash over photo (kill cream gradients) */
html:not(:has(.express-root)) main .from-parchment-50 {
  --tw-gradient-from: rgba(11, 32, 53, 0.94) !important;
}
html:not(:has(.express-root)) main .via-parchment-50\/90 {
  --tw-gradient-via: rgba(11, 32, 53, 0.82) !important;
}
html:not(:has(.express-root)) main .to-parchment-100,
html:not(:has(.express-root)) main .from-parchment-100 {
  --tw-gradient-to: var(--mkh-page) !important;
  --tw-gradient-from: var(--mkh-page) !important;
}
html:not(:has(.express-root)) main .bg-gradient-to-r.from-parchment-50,
html:not(:has(.express-root)) main div.absolute.inset-0.-z-10.bg-gradient-to-r {
  background-image: linear-gradient(
    to right,
    rgba(11, 32, 53, 0.96),
    rgba(11, 32, 53, 0.78),
    rgba(11, 32, 53, 0.15)
  ) !important;
}
html:not(:has(.express-root)) main div.absolute.inset-x-0.bottom-0.-z-10.h-20 {
  background-image: linear-gradient(to top, var(--mkh-page), transparent) !important;
}

/* Headlines */
html:not(:has(.express-root)) .text-hero,
html:not(:has(.express-root)) .text-display,
html:not(:has(.express-root)) .text-title,
html:not(:has(.express-root)) h1,
html:not(:has(.express-root)) h2,
html:not(:has(.express-root)) .font-display {
  color: var(--mkh-ink);
}
html:not(:has(.express-root)) .text-gold-600,
html:not(:has(.express-root)) .eyebrow {
  color: var(--mkh-gold) !important;
}
html:not(:has(.express-root)) .font-script {
  color: var(--mkh-ink-soft) !important;
  text-shadow: 0 1px 12px rgba(11, 32, 53, 0.9) !important;
}

/* Floating solid cards (eligibility / journey) — step lighter than page */
html:not(:has(.express-root)) a.rounded-card.bg-white,
html:not(:has(.express-root)) .rounded-card.bg-white,
html:not(:has(.express-root)) .rounded-card.border-parchment-300 {
  background-color: var(--mkh-card) !important;
  border-color: var(--mkh-border) !important;
  box-shadow: var(--mkh-cast) !important;
}
html:not(:has(.express-root)) a.rounded-card:hover,
html:not(:has(.express-root)) .hover\:border-gold-300:hover {
  border-color: rgba(239, 169, 63, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 24px 48px -20px rgba(0, 0, 0, 0.55) !important;
}

/* Step badges — gold instead of forest */
html:not(:has(.express-root)) .bg-forest-700.text-white,
html:not(:has(.express-root)) span.bg-forest-700 {
  background-color: var(--mkh-gold) !important;
  color: var(--mkh-navy-950) !important;
}

/* AI eligibility band — Notion/express float-card language */
html:not(:has(.express-root)) .border-forest-200.bg-gradient-to-r,
html:not(:has(.express-root)) .from-forest-50 {
  background-image: none !important;
  background-color: var(--mkh-card) !important;
  border-color: var(--mkh-border) !important;
  box-shadow: var(--mkh-cast);
}
html:not(:has(.express-root)) .text-forest-600 {
  color: var(--mkh-gold) !important;
}

/* Feature icon pills */
html:not(:has(.express-root)) .bg-parchment-200 {
  background-color: var(--mkh-card-raised) !important;
  border: 1px solid var(--mkh-border);
}

/* Sunset band top fade */
html:not(:has(.express-root)) .from-parchment-100.to-transparent {
  --tw-gradient-from: var(--mkh-page) !important;
}
html:not(:has(.express-root)) div.absolute.inset-x-0.top-0.h-24.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--mkh-page), transparent) !important;
}
html:not(:has(.express-root)) .from-forest-900\/55 {
  --tw-gradient-from: rgba(6, 20, 38, 0.7) !important;
}

/* Footer → deep navy (not forest green) */
html:not(:has(.express-root)) footer.bg-forest-900,
html:not(:has(.express-root)) footer {
  background-color: var(--mkh-navy-950) !important;
}
html:not(:has(.express-root)) footer .from-forest-900,
html:not(:has(.express-root)) footer .via-forest-900\/85,
html:not(:has(.express-root)) footer .to-forest-900\/60 {
  --tw-gradient-from: rgba(6, 20, 38, 0.95) !important;
  --tw-gradient-via: rgba(6, 20, 38, 0.85) !important;
  --tw-gradient-to: rgba(6, 20, 38, 0.55) !important;
}
html:not(:has(.express-root)) footer div.absolute.inset-0.-z-10.bg-gradient-to-r {
  background-image: linear-gradient(
    to right,
    rgba(6, 20, 38, 0.96),
    rgba(6, 20, 38, 0.82),
    rgba(6, 20, 38, 0.55)
  ) !important;
}

/* Mobile menu / misc white panels */
html:not(:has(.express-root)) #mobile-nav,
html:not(:has(.express-root)) [id="mobile-nav"] {
  background-color: var(--mkh-page-deep) !important;
  color: var(--mkh-ink);
}

/* Kill leftover cream flashes */
html:not(:has(.express-root)) .bg-gold-50,
html:not(:has(.express-root)) .hover\:bg-gold-50:hover {
  background-color: rgba(239, 169, 63, 0.1) !important;
}

/* Active nav gold underline already uses bg-gold-500 — keep */
html:not(:has(.express-root)) .bg-gold-500,
html:not(:has(.express-root)) .bg-gold-400 {
  background-color: var(--mkh-gold) !important;
}

/* Gold CTA text must stay navy (beats Tailwind text-white) */
html:not(:has(.express-root)) a.gold-face,
html:not(:has(.express-root)) button.gold-face,
html:not(:has(.express-root)) .gold-face.text-white {
  color: var(--mkh-navy-950) !important;
}

/* Partner / muted header subtitle */
html:not(:has(.express-root)) header .text-ink-400 {
  color: var(--mkh-ink-dim) !important;
}

/* Journey card body copy */
html:not(:has(.express-root)) .text-ink-500 {
  color: var(--mkh-ink-dim) !important;
}
html:not(:has(.express-root)) .text-ink-600 {
  color: var(--mkh-ink-soft) !important;
}
html:not(:has(.express-root)) .text-ink-800 {
  color: var(--mkh-ink) !important;
}

/* Skip-link focus */
html:not(:has(.express-root)) a.focus\:bg-forest-700:focus {
  background-color: var(--mkh-gold) !important;
  color: var(--mkh-navy-950) !important;
}