/* ==========================================================================
   Capital Path Academy — Premium dark skin, applied site-wide.
   Loaded after styles.css on every page that uses it (pricing, curriculum,
   members, terms, privacy, refund, verify). Same class names/markup as
   styles.css — this file only re-skins colors/surfaces, so all existing
   payment/exam/progress/login logic keeps working exactly as before.
   Formerly members-dark.css (members-only); now shared site-wide so the
   whole site matches the homepage's dark/premium direction (index.html).
   ========================================================================== */

:root {
  --mbg: #08090c;
  --mbg-elevated: #101219;
  --mbg-elevated-2: #161924;
  --mcard: rgba(255, 255, 255, 0.035);
  --mcard-hover: rgba(255, 255, 255, 0.06);
  --mborder: rgba(255, 255, 255, 0.09);
  --mborder-strong: rgba(255, 255, 255, 0.16);
  --mtext-1: #F4F5F7;
  --mtext-2: #A6ADBB;
  --mtext-3: #6E7684;
  --mgold: #D8B888;
  --mgold-dim: #B08D57;
  --mgreen: #3ECF8E;
  --mred: #F0685C;
}

body {
  background: var(--mbg);
  color: var(--mtext-2);
}
h1, h2, h3, h4, h5 { color: var(--mtext-1); }
a { color: var(--mgold); }
strong, b { color: var(--mtext-1); }

/* ---------- Header / nav ---------- */
.site-header {
  background: rgba(8, 9, 12, 0.82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--mborder);
}
.logo { color: var(--mtext-1); }
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; margin-right: 8px;
  background: linear-gradient(135deg, var(--mgold), var(--mgold-dim));
  color: #16130A; font-weight: 800; font-size: 12px; font-family: -apple-system, sans-serif;
}
nav#mainNav a { color: var(--mtext-2); }
nav#mainNav a:hover { color: var(--mtext-1); }
.nav-cta {
  background: linear-gradient(135deg, #E8CB9C, var(--mgold-dim)) !important;
  color: #16130A !important;
}
.nav-cta:hover { background: linear-gradient(135deg, #E8CB9C, var(--mgold-dim)) !important; opacity: 0.9; }
.nav-toggle { color: var(--mtext-1); }
@media (max-width: 640px) {
  nav#mainNav { background: var(--mbg-elevated); border-bottom-color: var(--mborder); }
}

/* ---------- Page header ---------- */
.page-header {
  background: radial-gradient(60% 80% at 50% -10%, rgba(216, 184, 136, 0.14), transparent 70%), var(--mbg);
}
.page-header::before {
  background:
    radial-gradient(32% 32% at 25% 30%, rgba(108, 142, 239, 0.12), transparent 70%),
    radial-gradient(28% 28% at 78% 70%, rgba(216, 184, 136, 0.16), transparent 70%);
}
.page-header h1 { color: var(--mtext-1); }
.page-header p { color: var(--mtext-2); }
.eyebrow { color: var(--mgold); }

/* ---------- Sections ---------- */
.section-alt { background: var(--mbg-elevated); }
.section-dark {
  background: radial-gradient(60% 100% at 50% 0%, rgba(216, 184, 136, 0.1), transparent 70%), var(--mbg-elevated);
}
.section-sub { color: var(--mtext-2); }

/* ---------- Module cards ---------- */
.module-card {
  background: var(--mcard);
  border: 1px solid var(--mborder);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.module-card:hover { border-color: var(--mborder-strong); }
.module-card h3 { color: var(--mtext-1); }
.module-card p { color: var(--mtext-3); }
.module-card::after { background: linear-gradient(115deg, transparent, rgba(216, 184, 136, 0.14), transparent); }
.module-card:hover, .crypto-card:hover, .exam-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: linear-gradient(135deg, #E8CB9C, var(--mgold-dim));
  color: #16130A;
  box-shadow: 0 8px 30px rgba(216, 184, 136, 0.22);
}
.btn-primary:hover { background: linear-gradient(135deg, #E8CB9C, var(--mgold-dim)); box-shadow: 0 14px 40px rgba(216, 184, 136, 0.32); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--mtext-1);
  border-color: var(--mborder-strong);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.09); }

/* ---------- Crypto / login gate cards ---------- */
.crypto-card {
  background: var(--mcard);
  border: 1px solid var(--mborder);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.crypto-label { color: var(--mtext-1); }
.crypto-address-row { background: rgba(255, 255, 255, 0.05); }
.crypto-address { color: var(--mtext-1); }
.crypto-warning { color: var(--mtext-3); }
.waitlist-message { color: var(--mgold); }

#loginGate p { color: var(--mtext-2); }
#loginGate a { color: var(--mgold); }

/* Resend-link / referral-code / cert / generic text inputs */
#resendEmailInput, #referralCodeInput, #certInput, input[type="text"], input[type="email"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--mborder-strong) !important;
  color: var(--mtext-1);
}
#resendEmailInput::placeholder, #referralCodeInput::placeholder, #certInput::placeholder { color: var(--mtext-3); }

/* ---------- Exam / community / referral cards ---------- */
.exam-card {
  background: var(--mcard);
  border: 2px solid var(--mgold-dim);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.exam-card h3 { color: var(--mtext-1); }
.exam-card p { color: var(--mtext-2); }
.exam-result-pass { color: var(--mgreen); }
.exam-result-fail { color: var(--mred); }
.exam-question { border-bottom-color: var(--mborder); }
.exam-question-tag { color: var(--mgold); }
.exam-question p.exam-q-text { color: var(--mtext-1); }
.exam-options label {
  border-color: var(--mborder);
  color: var(--mtext-2);
}
.exam-options label:hover { border-color: var(--mgold); }
.exam-progress { color: var(--mtext-3); }

/* ---------- Lesson / module content ---------- */
.lesson { border-top-color: var(--mborder); }
.lesson-heading { color: var(--mtext-1); }
.module-content h4 { color: var(--mgold); }
.module-content h5 { color: var(--mtext-1); }
.module-content p { color: var(--mtext-2); }
.module-content ul, .module-content ol { color: var(--mtext-2); }
.module-content strong, .module-content b { color: var(--mtext-1); }
.lesson-italic { color: var(--mtext-3); }
.callout {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: var(--mgold);
}

/* ---------- Pricing cards ---------- */
.price-card {
  background: var(--mcard);
  border: 1px solid var(--mborder);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.price-card-featured { border-color: var(--mgold-dim); }
.price-badge { background: linear-gradient(135deg, var(--mgold), var(--mgold-dim)); color: #16130A; }
.price-name { color: var(--mtext-1); }
.price-desc { color: var(--mtext-3); }
.price-amount { color: var(--mtext-1); }
.price-amount span { color: var(--mtext-3); }
.price-note { color: var(--mtext-3); }
.price-features li { color: var(--mtext-2); }
.price-features li::before { color: var(--mgold); }
.pricing-disclaimer { color: var(--mtext-3); }
.pricing-disclaimer a { color: var(--mgold); }

/* ---------- Curriculum accordions ---------- */
.curriculum-module {
  background: var(--mcard);
  border: 1px solid var(--mborder);
}
.curriculum-module summary { background: transparent; }
.curriculum-module summary::after { color: var(--mgold); }
.curriculum-module-tag { color: var(--mgold); }
.curriculum-module-title { color: var(--mtext-1); }
.curriculum-module-meta { color: var(--mtext-3); }

/* ---------- Curriculum visual journey ---------- */
.curriculum-journey-track { background: linear-gradient(180deg, var(--mborder-strong), rgba(255, 255, 255, 0.03)); }
.curriculum-journey-fill { background: linear-gradient(180deg, var(--mgold), var(--mgold-dim)); box-shadow: 0 0 14px rgba(216, 184, 136, 0.35); }
.curriculum-journey-dot { background: var(--mgold); box-shadow: 0 0 0 4px rgba(216, 184, 136, 0.18), 0 0 16px rgba(216, 184, 136, 0.35); }
.curriculum-phase-label::before { background: var(--mbg-elevated); border-color: var(--mgold); }
.curriculum-module-node { background: var(--mbg-elevated); border-color: var(--mborder-strong); color: var(--mgold); }
.curriculum-lessons { border-top-color: var(--mborder); }
.curriculum-lessons li { border-bottom-color: var(--mborder); }
.lesson-num { background: rgba(255, 255, 255, 0.06); color: var(--mgold); }
.lesson-body h4 { color: var(--mtext-1); }
.lesson-body > p { color: var(--mtext-2); }
.lesson-label { color: var(--mgold); }
.lesson-points li { color: var(--mtext-2); }
.lesson-points li::before { color: var(--mgold); }
.lesson-example { background: rgba(255, 255, 255, 0.04); color: var(--mtext-2) !important; }

/* ---------- Stats / footer ---------- */
.stats-section { background: var(--mbg-elevated); }
.stat-label { color: var(--mtext-3); }
.site-footer { border-top-color: var(--mborder); background: var(--mbg); }
.footer-inner p, .footer-inner p a { color: var(--mtext-3); }
.footer-inner p a:hover { color: var(--mgold); }