/* assets/home-dark.css — HOME PAGE ONLY dark-theme overrides.
   Loaded last (after styles.css, conversion.css, home-polish.css), so its
   !important rules win on the shared classes those files also style.
   Reuses the mentorship page's exact palette (bg #11161C, surface #1A2129,
   cream #F4F0E7, gold accent #E0C38B, accent-ink #17130A) so the two pages
   read as one brand. Never edits styles.css/conversion.css/home-polish.css
   themselves — those stay untouched for the 12+ other (light-theme) pages
   that share them. index.html's own inline styles were converted separately,
   directly in the file; this sheet only covers shared-class components. */

/* The base page color: styles.css's body{} rule is shared and still light —
   every section without its OWN inline background falls through to this,
   so it must be overridden first. */
body { background-color: #11161C !important; color: #F4F0E7 !important; }
html { color-scheme: dark; }

::selection { background: rgba(224,195,139,0.32); color: #F4F0E7; }
:focus-visible { outline-color: rgba(224,195,139,0.85); }
html { scrollbar-color: #E0C38B #090D11; }
::-webkit-scrollbar-track { background: #090D11 !important; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#E0C38B,#C9A876) !important; border-color: #090D11 !important; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#F0DDB8,#E0C38B) !important; }

/* ── Nav ── */
.navbar { background: rgba(9,13,17,0.92) !important; border-bottom-color: rgba(244,240,231,0.1) !important; }
.nav-link { color: rgba(244,240,231,0.75) !important; }
.nav-link:hover { color: #F4F0E7 !important; }
.nav-link::after { background: #D3C7AD !important; }
.navbar .btn-nav, .btn-nav { background-color: #242C36 !important; color: #F4F0E7 !important; border-color: rgba(244,240,231,0.15) !important; }
.navbar .btn-nav::after, .btn-nav::after { background: linear-gradient(105deg,transparent 0%,rgba(244,240,231,0.25) 50%,transparent 100%) !important; }
.btn-nav { box-shadow: inset 0 1px 0 rgba(244,240,231,0.12), 0 4px 16px rgba(0,0,0,0.4) !important; }
.nav-hamburger span { background: rgba(244,240,231,0.85) !important; }
.mobile-menu { background: #0C1015 !important; border-top-color: rgba(244,240,231,0.1) !important; }
.mobile-menu a { color: rgba(244,240,231,0.72) !important; border-bottom-color: rgba(244,240,231,0.08) !important; }
.mobile-menu a:hover { color: #F4F0E7 !important; }
.mobile-menu .btn-nav { background: linear-gradient(145deg,#E0C38B 0%,#C9A876 100%) !important; background-color: #E0C38B !important; color: #17130A !important; }

/* ── Primary CTA (home-polish.css flattens this to a solid fill — stay flat, just gold) ── */
.btn-liquid-primary, .mp-btn, .modal-enroll-btn, #mobile-sticky-cta a,
.curriculum-grid a[href*="whop.com"] {
  background-color: #E0C38B !important;
  color: #17130A !important;
}
.btn-liquid-primary::after { background: linear-gradient(105deg, transparent 0%, rgba(23,19,10,0.3) 50%, transparent 100%) !important; }
.btn-liquid-primary:focus-visible { outline-color: #E0C38B !important; }
@keyframes ctaBreatheDark {
  0%, 100% { filter: drop-shadow(0 3px 10px rgba(224,195,139,0.35)); }
  50%      { filter: drop-shadow(0 5px 22px rgba(224,195,139,0.7)); }
}
.hero-ctas > .btn-liquid-primary, .enrol-cta > .btn-liquid-primary { animation-name: ctaBreatheDark !important; }
.hero-ctas > .btn-liquid-primary:hover, .enrol-cta > .btn-liquid-primary:hover {
  filter: brightness(1.05) drop-shadow(0 6px 24px rgba(224,195,139,0.6)) !important;
}
.modal-enroll-btn {
  box-shadow: 0 4px 24px rgba(224,195,139,0.4), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.modal-enroll-btn:hover { box-shadow: 0 8px 36px rgba(224,195,139,0.5), inset 0 1px 0 rgba(255,255,255,0.35) !important; }

/* ── Ghost button ── */
.btn-liquid-ghost {
  color: rgba(244,240,231,0.85) !important;
  background: rgba(244,240,231,0.06) !important;
  border-color: rgba(244,240,231,0.16) !important;
  box-shadow: inset 0 1px 0 rgba(244,240,231,0.1), inset 0 -1px 0 rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.3) !important;
}
.btn-liquid-ghost::before { background: linear-gradient(180deg, rgba(244,240,231,0.08) 0%, transparent 60%) !important; }
.btn-liquid-ghost:hover {
  border-color: rgba(224,195,139,0.45) !important;
  color: #F4F0E7 !important;
  box-shadow: inset 0 1px 0 rgba(244,240,231,0.14), 0 8px 28px rgba(0,0,0,0.5), 0 0 20px rgba(224,195,139,0.15) !important;
}

/* ── Glass utilities ── */
.glass { background: rgba(244,240,231,0.05) !important; border-color: rgba(244,240,231,0.12) !important; }
.glass-dark { background: rgba(9,13,17,0.55) !important; border-color: rgba(244,240,231,0.1) !important; }
.glass-red { background: rgba(224,195,139,0.1) !important; border-color: rgba(224,195,139,0.3) !important; }
.glass, .glass-highlight, .curriculum-grid, .about-img-wrap, .date-pill {
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 30px -22px rgba(0,0,0,.65) !important;
}
div.fade-up.delay-4 > div[style*="border-radius:20px"] {
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 22px 44px -28px rgba(0,0,0,.75) !important;
}

/* ── Section bands ── */
.band-elev { background: #1A2129 !important; border-top-color: rgba(244,240,231,0.06) !important; border-bottom-color: rgba(244,240,231,0.06) !important; }
.band-warm { background: #1A2129 !important; border-top-color: rgba(224,195,139,0.2) !important; border-bottom-color: rgba(224,195,139,0.2) !important; }

/* ── Stats / labels ── */
.stat-num, .section-label { color: #E0C38B !important; }

/* ── Hero video facade ── */
.yt-play { background: linear-gradient(135deg,#E0C38B 0%,#C9A876 100%) !important; box-shadow: 0 10px 36px rgba(224,195,139,0.5), inset 0 1px 0 rgba(255,255,255,0.3) !important; }
.yt-play::before { border-left-color: #17130A !important; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { box-shadow: 0 14px 48px rgba(224,195,139,0.68), inset 0 1px 0 rgba(255,255,255,0.35) !important; }

/* Hero accent-word shimmer: the base rule in styles.css (including
   background-clip:text, text-fill-color:transparent and the sweep
   animation) is keyed to a selector matching the OLD inline color
   (#754437), which index.html no longer has post-conversion — so that
   whole rule silently stopped matching, not just its color. Re-declare
   the full effect here against the new gold inline color. */
.hero-h1 span[style*="color:#E0C38B"], .hero-h1 .accent-flow {
  background: linear-gradient(100deg, #E0C38B 0%, #E0C38B 42%, #F0DDB8 50%, #E0C38B 58%, #E0C38B 100%) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: accentSweep 7s cubic-bezier(0.5,0,0.15,1) infinite !important;
}

/* ── Tier detail modals ── */
.tier-modal-overlay { background: rgba(9,13,17,0.9) !important; }
.tier-modal-panel {
  background: rgba(26,33,41,0.97) !important;
  border-color: rgba(244,240,231,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(244,240,231,0.06), 0 2px 4px rgba(0,0,0,0.4), 0 24px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(224,195,139,0.08) !important;
  scrollbar-color: rgba(224,195,139,0.3) transparent !important;
}
.tier-modal-panel::-webkit-scrollbar-thumb { background: rgba(224,195,139,0.3) !important; }
.tier-modal-close { background: rgba(244,240,231,0.06) !important; border-color: rgba(244,240,231,0.12) !important; }
.tier-modal-close:hover { background: rgba(224,195,139,0.18) !important; }
.modal-header { border-bottom-color: rgba(244,240,231,0.08) !important; }
.modal-feature-row { border-bottom-color: rgba(244,240,231,0.06) !important; }
.modal-feature-icon { background: rgba(224,195,139,0.12) !important; border-color: rgba(224,195,139,0.25) !important; }
.modal-section-label { color: #E0C38B !important; }

/* ── Check items / roadmap ── */
.check-item { background: rgba(244,240,231,0.04) !important; border-color: rgba(244,240,231,0.08) !important; box-shadow: inset 0 1px 0 rgba(244,240,231,0.06) !important; }
.check-item:hover { border-color: rgba(224,195,139,0.3) !important; }
.mroad-step:not(:last-child)::before { background: rgba(224,195,139,0.25) !important; }
.mroad-num { background: linear-gradient(135deg,#E0C38B,#C9A876) !important; color: #17130A !important; box-shadow: 0 3px 10px rgba(224,195,139,0.3) !important; }
.mroad-txt h4 { color: #F4F0E7 !important; }
.mroad-txt p { color: rgba(244,240,231,0.65) !important; }
/* Roadmap screenshots had no frame by design (blended into the old cream bg) —
   that stops working on dark, so give them a tasteful dark mat here. */
.mroad-thumb { background: rgba(26,33,41,0.6); border-radius: 12px; }
.mroad-thumb img { border-radius: 10px; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 32px -16px rgba(0,0,0,.6); }
.btn-more-details { background: rgba(244,240,231,0.04) !important; border-color: rgba(244,240,231,0.12) !important; color: rgba(244,240,231,0.65) !important; }
.btn-more-details:hover { background: rgba(244,240,231,0.08) !important; border-color: rgba(244,240,231,0.22) !important; color: rgba(244,240,231,0.9) !important; }

/* ── FAQ ── */
.faq-item { background: rgba(244,240,231,0.04) !important; border-color: rgba(244,240,231,0.1) !important; }
.faq-item[open] { border-color: rgba(224,195,139,0.35) !important; background: rgba(224,195,139,0.06) !important; }
.faq-item summary { color: #F4F0E7 !important; }
.faq-item summary .faq-icon { border-color: rgba(244,240,231,0.25) !important; }
.faq-item[open] summary .faq-icon { border-color: #E0C38B !important; }
.faq-item .faq-body { color: rgba(244,240,231,0.68) !important; }

/* ── Testimonial scroller (assets/testimonials.js injects its own <style>
   tag at runtime with light-theme colors baked in — shared with the
   mentorship page, which already overrides it in its own <head> stylesheet;
   this is the equivalent override for index.html). */
.tst-card { background: #1A2129 !important; border-color: rgba(244,240,231,.14) !important; }
.tst-title { color: #F4F0E7 !important; }
.tst-sum { color: rgba(244,240,231,.65) !important; }
.tst-sum b { color: #E0C38B !important; }
.tst-shots { background: #11161C !important; border-color: rgba(244,240,231,.14) !important; }
.tst-nav button { background: #1A2129 !important; border-color: rgba(244,240,231,.18) !important; }
.tst-nav button:hover { border-color: #E0C38B !important; }
.tst-nav button:focus-visible { outline-color: #E0C38B !important; }
.tst-nav button svg path { stroke: #F4F0E7 !important; }
.tst-lb-overlay { background: rgba(9,13,17,.92) !important; }

/* ── Rewards grid ── */
.rewards-grid img { border-color: rgba(244,240,231,0.1) !important; }
.rewards-grid img:hover { border-color: rgba(224,195,139,0.4) !important; }

/* ── Mentorship cross-link strip ── */
.mentorship-pointer { background: linear-gradient(110deg, rgba(224,195,139,0.12), rgba(224,195,139,0.03)) !important; border-color: rgba(224,195,139,0.25) !important; }
.mentorship-pointer::after { background: radial-gradient(ellipse 60% 120% at 90% 50%, rgba(224,195,139,0.14), transparent 70%) !important; }
.mentorship-pointer .mp-eyebrow { color: #E0C38B !important; }
.mentorship-pointer .mp-title { color: #F4F0E7 !important; }
.mentorship-pointer .mp-sub, .mentorship-pointer .mp-sub b { color: rgba(244,240,231,0.75) !important; }
.mentorship-pointer .mp-sub b { color: #F4F0E7 !important; }

/* ── Masterclass popup (injected at runtime by assets/lead-capture.js) ── */
.mc-popup-overlay { background: rgba(9,13,17,0.88) !important; }
.mc-popup-card {
  background: #1A2129 !important;
  border-color: rgba(224,195,139,0.3) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(244,240,231,0.05) inset !important;
}
.mc-popup-close { background: rgba(244,240,231,0.06) !important; border-color: rgba(244,240,231,0.12) !important; color: #F4F0E7 !important; }
.mc-popup-close:hover { background: rgba(224,195,139,0.2) !important; border-color: rgba(224,195,139,0.45) !important; }
.mc-popup-eyebrow { color: #E0C38B !important; }
.mc-popup-card h3, .mc-popup-success h3 { color: #F4F0E7 !important; }
.mc-popup-card p.mc-popup-sub { color: rgba(244,240,231,0.68) !important; }
.mc-popup-card p.mc-popup-sub b { color: #F4F0E7 !important; }
.mc-popup-form input[type="email"] { background: rgba(244,240,231,0.06) !important; border-color: rgba(244,240,231,0.16) !important; color: #F4F0E7 !important; }
.mc-popup-form input[type="email"]::placeholder { color: rgba(244,240,231,0.5) !important; }
.mc-popup-form input[type="email"]:focus { border-color: #E0C38B !important; background: rgba(244,240,231,0.1) !important; }
.mc-popup-form button[type="submit"] {
  color: #17130A !important;
  background: linear-gradient(145deg,#F0DDB8 0%,#E0C38B 48%,#C9A876 100%) !important;
  box-shadow: 0 6px 24px rgba(224,195,139,0.4) !important;
}
.mc-popup-error { color: #e8a382 !important; }
.mc-popup-fine { color: rgba(244,240,231,0.55) !important; }

/* ── EU/UK cookie-consent banner (assets/consent.js, shared with 21 other
   pages — injects its own <style> with light-theme colors baked in). ── */
.topa-consent { background: #1A2129 !important; border-color: rgba(244,240,231,.14) !important; box-shadow: 0 20px 60px -15px rgba(0,0,0,.6) !important; }
.topa-consent p { color: rgba(244,240,231,.85) !important; }
.topa-consent-accept { border-color: #E0C38B !important; background: #E0C38B !important; color: #17130A !important; }
.topa-consent-accept:hover { background: #C9A876 !important; border-color: #C9A876 !important; }
.topa-consent-decline { border-color: rgba(244,240,231,.24) !important; color: rgba(244,240,231,.85) !important; }
.topa-consent-decline:hover { border-color: #F4F0E7 !important; }
.topa-consent button:focus-visible { outline-color: #E0C38B !important; }

/* ── Masterclass popup (assets/lead-capture.js, shared with the mentorship
   page — injects its own <style> tag with ".mcp-*" classes at runtime,
   light-theme colors baked in; mentorship already overrides these in its
   own <head> stylesheet, this is the equivalent for index.html). The
   earlier ".mc-popup-*" rules above target a different, unused component
   and are left in place but harmless. ── */
.mcp-card { background: #1A2129 !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6) !important; }
.mcp-close { border-color: rgba(244,240,231,.18) !important; color: #F4F0E7 !important; }
.mcp-close:hover { border-color: #E0C38B !important; }
.mcp-close:focus-visible { outline-color: #E0C38B !important; }
.mcp-card h3 { color: #F4F0E7 !important; }
.mcp-sub, .mcp-bonus-lead { color: rgba(244,240,231,.68) !important; }
.mcp-bonus-highlight { color: #E0C38B !important; background: rgba(224,195,139,.12) !important; border-color: rgba(224,195,139,.3) !important; }
.mcp-form input[type=text], .mcp-form input[type=email] { background: rgba(244,240,231,.06) !important; border-color: rgba(244,240,231,.18) !important; color: #F4F0E7 !important; }
.mcp-form input::placeholder { color: rgba(244,240,231,.4) !important; }
.mcp-form input:focus-visible { border-color: #E0C38B !important; }
.mcp-submit { border-color: #E0C38B !important; color: #17130A !important; background: #E0C38B !important; }
.mcp-submit:hover { background: #C9A876 !important; border-color: #C9A876 !important; }
.mcp-submit:focus-visible { outline-color: #E0C38B !important; }
.mcp-error { color: #e8a382 !important; }
.mcp-typo { color: rgba(244,240,231,.62) !important; }
.mcp-consent, .mcp-no-thanks { color: rgba(244,240,231,.5) !important; }
.mcp-no-thanks:hover { color: #F4F0E7 !important; }
.mcp-no-thanks:focus-visible { outline-color: #E0C38B !important; }
.mcp-success p { color: rgba(244,240,231,.72) !important; }
.mcp-success mark { background: rgba(224,195,139,.16) !important; color: #E0C38B !important; }

/* ── Footer (home-polish.css's own "links were cream-on-cream" fix now needs the inverse) ── */
footer .footer-links a, footer .footer-links .nav-link,
footer .footer-legal-links a, footer .footer-legal-copy {
  color: rgba(244,240,231,.85) !important;
}
footer .footer-legal { border-top-color: rgba(244,240,231,.12) !important; }
footer .footer-legal-links a:focus-visible { outline-color: #E0C38B !important; }

/* ── Highlights band (8yr / $5M+ / 500+ / ...) ── */
.home-highlights { background: #11161C !important; }
.hl-title, .hl-num { color: #F4F0E7 !important; }
.hl-num span { color: #E0C38B !important; }
.hl-label { color: rgba(244,240,231,.8) !important; }

/* ── "Not for you" qualification card ── */
.qual-card { border-color: rgba(244,240,231,.18) !important; background: rgba(244,240,231,.04) !important; }
.qual-card h3 { color: #F4F0E7 !important; }
.qual-card li span { color: rgba(244,240,231,.88) !important; }

/* ── Track record ($5M+ verified P&L tiles) ── */
.ht-key { color: #E0C38B !important; }
.ht-sub { color: rgba(244,240,231,.8) !important; }
.ht-frame { border-color: rgba(244,240,231,.14) !important; background: #1A2129 !important; box-shadow: 0 1px 2px rgba(0,0,0,.35),0 12px 28px -8px rgba(0,0,0,.55) !important; }
.ht-frame:hover { box-shadow: 0 2px 4px rgba(0,0,0,.4),0 20px 40px -10px rgba(224,195,139,.3) !important; }
.ht-frame:focus-visible { outline-color: #E0C38B !important; }
.ht-fig { color: #F4F0E7 !important; }
.ht-fig span { color: rgba(244,240,231,.8) !important; }
.ht-lb { background: rgba(9,13,17,.96) !important; }
.ht-lb img { border-color: rgba(244,240,231,.2) !important; background: #1A2129 !important; }
.ht-lb-x { border-color: rgba(244,240,231,.3) !important; background: #1A2129 !important; color: #F4F0E7 !important; }
.ht-lb-x:focus-visible { outline-color: #E0C38B !important; }

/* ── Mobile readable-copy fix (home-polish.css set these to ink; need cream) ── */
@media (max-width:760px){
  #programs .sec-inner > div:first-child > p,
  .video-lessons-section .sec-inner > div:first-child > p,
  .for-grid p, #about p, .hero-section p {
    color: rgba(244,240,231,.88) !important;
  }
}

/* ── Featured plan: The Transformation (2nd card). A warm tint plus a sleek
   gold hairline border. Desktop rounds only the card's outer (right) corners
   so the inset border follows the grid's radius; on phones the card is its
   own rounded box and the border is plain. !important because the card's
   inline background is re-applied by its own mouseover/mouseout handlers. ── */
.curriculum-grid > div:nth-child(2) {
  background: linear-gradient(180deg, #2C2923 0%, #232426 42%, #1A2129 82%) !important;
  border-color: rgba(224,195,139,0.6) !important;
}
@media (min-width: 769px) {
  .curriculum-grid > div:nth-child(2) {
    border-radius: 0 28px 28px 0 !important;
    box-shadow: inset 0 0 0 1px rgba(224,195,139,0.6), inset 0 0 36px rgba(224,195,139,0.05) !important;
  }
}

/* Hero VSL play button: flat gold with a black drop shadow, exactly like the mentorship
   page's poster (overrides the older gold-gradient + glow .yt-play rules above). */
.hero-vsl .yt-play { background: #E0C38B !important; box-shadow: 0 10px 32px rgba(0,0,0,.45) !important; }
.hero-vsl .yt-facade:hover .yt-play, .hero-vsl .yt-facade:focus-visible .yt-play { box-shadow: 0 10px 32px rgba(0,0,0,.45) !important; }
.hero-vsl .yt-play::before { border-left-color: #0C1015 !important; }