/* ═══════════════════════════════════════════════════════════
   TMTradesFx — Stripe-inspired blue gradient theme
   Font: Bricolage Grotesque (display) + DM Sans (body)
═══════════════════════════════════════════════════════════ */

:root {
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --navy:     #0f172a;
  --navy-mid: #0c1a3a;
  --slate:    #64748b;
  --s-radius: 16px;
  --s-font-display: 'Inter', system-ui, sans-serif;
  --s-font-body: 'Inter', system-ui, sans-serif;
  --s-font-serif: 'Fraunces', 'Instrument Serif', Georgia, serif;
}

/* Override base font */
body { font-family: var(--s-font-body); }
h1,h2,h3,h4 { font-family: var(--s-font-display); }

/* ── Navbar override — only applies on dark-hero pages (homepage) ── */
body.has-dark-hero .navbar {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
body.has-dark-hero .navbar.scrolled {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}

/* Light text on dark hero (NO filter — proper color overrides) */
body.has-dark-hero .navbar:not(.scrolled) .nav-links > a,
body.has-dark-hero .navbar:not(.scrolled) .dropdown-toggle {
  color: rgba(255,255,255,0.92) !important;
}
body.has-dark-hero .navbar:not(.scrolled) .nav-links > a:hover,
body.has-dark-hero .navbar:not(.scrolled) .dropdown-toggle:hover {
  color: white !important;
}

/* Join Now button: glass style on dark hero, normal blue when scrolled */
body.has-dark-hero .navbar:not(.scrolled) .nav-cta-btn {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700)) !important;
  color: white !important;
  box-shadow: 0 4px 20px rgba(59,130,246,0.45), 0 0 0 1px rgba(255,255,255,0.1) !important;
  border: none !important;
}
body.has-dark-hero .navbar:not(.scrolled) .nav-cta-btn:hover {
  box-shadow: 0 8px 30px rgba(59,130,246,0.6) !important;
  transform: translateY(-2px);
}

/* Mobile menu icon white on dark hero */
body.has-dark-hero .navbar:not(.scrolled) .logo img {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35)) brightness(1.15);
}
body.has-dark-hero .navbar:not(.scrolled) .mobile-menu-btn span {
  background: white !important;
}

/* Transparent hero badge on dark hero */
body.has-dark-hero .hero-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: none !important;
}

/* When mobile drawer is OPEN, drawer has white background — force dark text
   regardless of dark-hero state (otherwise links go invisible). */
@media (max-width: 768px) {
    .nav-links.active > a,
    .nav-links.active .dropdown-toggle,
    body.has-dark-hero .navbar:not(.scrolled) .nav-links.active > a,
    body.has-dark-hero .navbar:not(.scrolled) .nav-links.active .dropdown-toggle,
    body.has-dark-hero .navbar.scrolled .nav-links.active > a,
    body.has-dark-hero .navbar.scrolled .nav-links.active .dropdown-toggle {
        color: #0f172a !important;
    }
    .nav-links.active > a:hover,
    .nav-links.active .dropdown-toggle:hover {
        color: #1d4ed8 !important;
    }
    body.has-dark-hero .navbar:not(.scrolled) .nav-links.active .mega-title {
        color: #0f172a !important;
    }
    body.has-dark-hero .navbar:not(.scrolled) .nav-links.active .mega-desc {
        color: #64748b !important;
    }
}


/* ═══════════════ HERO ═══════════════ */
.s-hero {
  position: relative;
  overflow: hidden;
  padding: 10rem 0 4rem;
  background: var(--navy);
}

/* Gradient mesh layers — Stripe's signature look in blue */
.hero-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(99,130,246,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(29,78,216,0.4) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(147,197,253,0.3) 0%, transparent 60%);
  pointer-events: none;
}
.hero-mesh-2 {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 75% 80%, rgba(14,165,233,0.2) 0%, transparent 65%);
  pointer-events: none;
}
.hero-mesh-3 {
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, #ffffff 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.s-hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding-bottom: 3rem;
}

/* Hero text */
.s-hero-text { color: white; }

.s-hero-heading {
  font-family: var(--s-font-display);
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
  color: white;
  margin-bottom: 1.5rem;
}
.s-heading-blue {
  font-family: var(--s-font-serif);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
  letter-spacing: -2px;
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 40%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.s-hero-sub {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  margin-bottom: 2rem;
}
.s-hero-sub strong { color: white; }

.s-hero-cta {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* Buttons */
.s-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  color: var(--navy) !important;
  font-family: var(--s-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.8rem 1.6rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.s-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(59,130,246,0.35);
  background: var(--blue-50);
}

/* On dark section, use blue primary */

/* Hero stats bar */
.s-hero-stats {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 1.5rem 2rem;
  margin-top: 0;
}
.s-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.s-stat-num {
  font-family: var(--s-font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.5px;
}
.s-stat-lbl {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
  text-align: center;
}
.s-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}


/* ── Hero mockup ── */
.s-hero-mockup {
  position: relative;
  z-index: 3;
}

/* Floating cards */
@keyframes float-card {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}


/* ═══════════════ TRUST LOGOS ═══════════════ */


/* ═══════════════ FEATURES ═══════════════ */
.s-features-header {
  margin-bottom: 4rem;
}
.s-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue-600);
  margin-bottom: 1rem;
}
.s-eyebrow-light {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue-400);
  margin-bottom: 1rem;
}
.s-section-title {
  font-family: var(--s-font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: #0f172a;
}
.s-section-sub {
  margin-top: 1rem;
  color: var(--slate);
  font-size: 1.05rem;
  max-width: 520px;
}


/* ═══════════════ PROOF (dark) ═══════════════ */

/* Payout stack */


/* ═══════════════ HOW IT WORKS ═══════════════ */
.s-steps {
  padding: 7rem 0;
  background: #fafbff;
}


/* ═══════════════ VIP PEEK ═══════════════ */


/* ═══════════════ PRICING ═══════════════ */


/* ═══════════════ TESTIMONIALS ═══════════════ */
.s-testimonials {
  padding: 7rem 0;
  background: white;
}

/* Override track to use new card class */
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: #e2e8f0; cursor: pointer; transition: all 0.3s ease; padding: 0; }
.carousel-dot.active { background: var(--blue-500); width: 22px; border-radius: 4px; }


/* ═══════════════ BLOG ═══════════════ */


/* ═══════════════ FAQ ═══════════════ */
.s-faq {
  padding: 7rem 0;
  background: white;
}
.s-faq-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
}
.s-faq-left { position: sticky; top: 6rem; }
.s-faq-right .faq-container { border-top: 1px solid #f1f5f9; }
.s-faq-right .faq-item { border-bottom: 1px solid #f1f5f9; }
.s-faq-right .faq-item summary {
  font-family: var(--s-font-display);
  font-weight: 700;
  color: #0f172a;
  padding: 1.25rem 0;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
}
.s-faq-right .faq-item summary::-webkit-details-marker { display: none; }
.s-faq-right .faq-item[open] summary { color: var(--blue-600); }
.s-faq-right .faq-content { color: var(--slate); font-size: 0.9rem; line-height: 1.7; padding-bottom: 1.25rem; }


/* ═══════════════ CONTACT ═══════════════ */

/* Contact form */
.s-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}


/* ═══════════════ SCROLL TO TOP ═══════════════ */
#scrollTopBtn {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700)) !important;
}


/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1024px) {
  .s-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .s-hero-mockup { display: none; }
  .s-hero-stats { flex-wrap: wrap; gap: 1rem; }
  .s-faq-inner { grid-template-columns: 1fr; gap: 2rem; }
  .s-faq-left { position: static; }
}

@media (max-width: 768px) {
  .s-hero { padding: 8rem 0 3rem; }
  .s-hero-stats { padding: 1rem; }
  .s-stat-num { font-size: 1.2rem; }
  .s-stat-divider { display: none; }
  .s-hero-stat { flex: 1; min-width: 45%; }
  .s-hero-stats { flex-wrap: wrap; gap: 1rem; }
  .s-form-row { grid-template-columns: 1fr; }

}


/* ═══════════════════════════════════════════════════════════
   LEGACY PAGE UNIFICATION — make all OLD sections match new theme
═══════════════════════════════════════════════════════════ */

/* Body & base — apply Inter to everything */
body { font-family: var(--s-font-body) !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--s-font-display) !important; letter-spacing: -0.5px; }
h1 { letter-spacing: -1.5px !important; }

/* Tool headers (used by calculator, journal, sessions, calendar etc.) — give Stripe-style dark hero */
.tool-header {
    background: var(--navy) !important;
    color: white !important;
    padding: 8.5rem 0 5rem !important;
    position: relative;
    overflow: hidden;
}
.tool-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 60% 40%, rgba(99,130,246,0.45) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 20% 70%, rgba(29,78,216,0.35) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(147,197,253,0.25) 0%, transparent 60%);
    pointer-events: none;
}
.tool-header > * { position: relative; z-index: 2; }
.tool-header h1 {
    color: white !important;
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-top: 1rem !important;
}
.tool-header p,
.tool-header .section-desc {
    color: rgba(255,255,255,0.75) !important;
    font-size: 1.05rem;
    max-width: 640px;
    margin: 1rem auto 0;
}
.tool-header .accent-text,
.tool-header .text-gradient,
.tool-header h1 .accent-text,
.tool-header h1 .text-gradient,
.tool-header h1 span.accent-text {
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 40%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    letter-spacing: inherit !important;
    display: inline-block;
}

/* Apply dark navbar styling on ALL pages with a tool-header (or has-dark-hero) */
body:has(.tool-header) .navbar:not(.scrolled) {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
body:has(.tool-header) .navbar.scrolled {
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}
body:has(.tool-header) .navbar:not(.scrolled) .nav-links > a,
body:has(.tool-header) .navbar:not(.scrolled) .dropdown-toggle {
    color: rgba(255,255,255,0.92) !important;
}
body:has(.tool-header) .navbar:not(.scrolled) .nav-cta-btn {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700)) !important;
    color: white !important;
    box-shadow: 0 4px 20px rgba(59,130,246,0.45), 0 0 0 1px rgba(255,255,255,0.1) !important;
    border: none !important;
}
body:has(.tool-header) .navbar:not(.scrolled) .mobile-menu-btn span {
    background: white !important;
}

/* Sections that were "bg-darker" — make them subtle soft blue instead of jarring */

/* Legacy section titles — apply same italic serif treatment */

/* Container max width consistency */
.container { max-width: 1200px; }

/* Buttons — unify with Stripe theme */
.btn { font-family: var(--s-font-display); }
.btn-primary {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700)) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(59,130,246,0.3);
}
.btn-primary:hover { box-shadow: 0 8px 25px rgba(59,130,246,0.4); }
.btn-outline {
    border: 1.5px solid var(--blue-500) !important;
    color: var(--blue-600) !important;
}

/* Footer — clean it up */
.footer { background: white !important; padding-top: 5rem; }
.footer h3, .footer h4 { font-family: var(--s-font-display); }


/* ═══════════════ VERIFIED PROOF GALLERY ═══════════════ */
.s-verified {
    padding: 7rem 0;
    background: white;
}


/* ═══════════════ MOBILE POLISH ═══════════════ */
@media (max-width: 768px) {
    /* Larger tap targets */
    .nav-links a, .dropdown-toggle, .btn { min-height: 44px; }

    /* Tool header sizing */
    .tool-header { padding: 7rem 0 3rem !important; }
    .tool-header h1 { font-size: 2rem !important; }

    /* Typography downscale */
    .s-section-title { font-size: 1.85rem !important; line-height: 1.15 !important; }
    .s-hero-heading { font-size: 2.4rem !important; line-height: 1.1 !important; }

    /* Hero on mobile */
    .s-hero { padding: 6rem 0 2.5rem; }
    .s-hero-cta { gap: 0.75rem; }
    .s-btn-primary { padding: 0.7rem 1.3rem; font-size: 0.9rem; }

    /* Stat tiles tighten */
    .s-hero-stats { padding: 1rem; gap: 0.5rem; flex-wrap: wrap; }
    .s-stat-num { font-size: 1.1rem; }
    .s-stat-lbl { font-size: 0.7rem; }
    .s-stat-divider { display: none; }

    /* Verified gallery */
    .s-verified { padding: 4rem 0; }
    .s-verified .s-section-title { font-size: 1.7rem !important; }

    /* Trust logos */

    /* Pricing cards */

    /* FAQ */
    .s-faq-right .faq-item summary { font-size: 0.9rem; padding: 1rem 0; }

    /* Contact form */
}

@media (max-width: 480px) {
    .s-hero-heading { font-size: 2rem !important; }
    .s-section-title { font-size: 1.6rem !important; }
    .container { padding: 0 1rem; }
    /* Make stats stack 2x2 on tiny screens */
    .s-hero-stat { min-width: 47%; }
    /* Step grid on phone */
}

/* Prevent horizontal scroll anywhere */
html, body { overflow-x: hidden; max-width: 100vw; }


/* ═══════════════════════════════════════════════════════════
   REDESIGNED TRUST WALL
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   BENTO FEATURE GRID
═══════════════════════════════════════════════════════════ */
.s-section-italic {
    font-family: inherit;
    font-style: normal;
    font-weight: 800;
    letter-spacing: inherit;
    color: var(--blue-600);
}

/* Large card (top-left, spans 2 rows) */

/* Small blue card (framework) */

/* Risk rules card */

/* Wide card (bottom, spans 2 columns) */


/* ═══════════════════════════════════════════════════════════
   CONNECTED JOURNEY (3 STEPS REDESIGN)
═══════════════════════════════════════════════════════════ */
@keyframes pulse-dot {
    0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
    50% { box-shadow: 0 0 0 6px rgba(16,185,129,0.05); }
}


/* Mobile responsive for new sections */


/* ═══════════════════════════════════════════════════════════
   GLOBAL BUTTON RULES — blue by default, white only on dark
═══════════════════════════════════════════════════════════ */

/* Default: blue gradient (visible on white backgrounds) */
.s-btn-primary {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700)) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(59,130,246,0.35);
    border: none;
}
.s-btn-primary:hover {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-800)) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59,130,246,0.45);
}

/* WHITE button override — only inside dark sections */
.s-hero .s-btn-primary,
.s-steps .s-btn-primary,
.s-testimonials .s-btn-primary {
    background: white !important;
    color: var(--navy) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.s-hero .s-btn-primary:hover,
.s-steps .s-btn-primary:hover,
.s-testimonials .s-btn-primary:hover {
    background: var(--blue-50) !important;
    color: var(--navy) !important;
}


/* ═══════════════════════════════════════════════════════════
   ALTERNATING DARK SECTIONS — all sky-blue → dark navy
═══════════════════════════════════════════════════════════ */

/* Steps now DARK */
.s-steps {
    background: var(--navy) !important;
    color: white;
    position: relative;
    overflow: hidden;
}
.s-steps::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(59,130,246,0.18) 0%, transparent 65%);
    pointer-events: none;
}
.s-steps > .container { position: relative; z-index: 2; }
.s-steps .s-section-title { color: white !important; }
.s-steps .s-section-title em.s-section-italic { color: #93c5fd !important; }
.s-steps .s-eyebrow { color: var(--blue-400) !important; }
/* Journey cards on dark */


/* Pricing now DARK */

/* Non-featured card: glassy dark to harmonize with the dark section */
/* Plan cards stay white for high contrast */
/* Guarantee box adjusted for dark bg */


/* Testimonials now DARK with colored card accents */
.s-testimonials {
    background: var(--navy) !important;
    position: relative;
    overflow: hidden;
}
.s-testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 30% 30%, rgba(99,130,246,0.2) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 80% 70%, rgba(168,85,247,0.12) 0%, transparent 60%);
    pointer-events: none;
}
.s-testimonials > .container { position: relative; z-index: 2; }
.s-testimonials .s-section-title { color: white !important; }
.s-testimonials .s-section-title em.s-section-italic { color: #93c5fd !important; }
.s-testimonials .s-eyebrow { color: var(--blue-400) !important; }

/* Testimonial cards: white with colored accent border + ribbon */
/* Color-coded top accent stripe */
/* Avatar with gradient ring */
/* Carousel buttons on dark */
.s-testimonials .carousel-dot {
    background: rgba(255,255,255,0.2);
}
.s-testimonials .carousel-dot.active {
    background: var(--blue-400);
}


/* Blog now DARK */
/* Blog cards stay white for max contrast */


/* ═══════════════════════════════════════════════════════════
   LEGACY .bg-darker → also dark navy (was sky blue)
═══════════════════════════════════════════════════════════ */



/* s-btn-outline visible on dark sections */

/* Plan card subtle (non-featured) button — make sure it's readable on dark pricing */

/* Add a 100KB legacy text override: force "Find Out More" / "See All" / etc. legacy buttons on dark bg */


/* ═══════════════════════════════════════════════════════════
   LEGACY CONTENT — make ALL other pages match new theme
═══════════════════════════════════════════════════════════ */

/* Old .section (white default) — refined typography */
.section { padding: 5rem 0 !important; }
.section-desc {
    font-size: 1.05rem;
    color: var(--slate);
    max-width: 640px;
    margin: 1rem auto 0;
    line-height: 1.6;
}

/* Cards everywhere — unified treatment */
.card, .blog-card, .info-card, .faq-item {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}
.card:hover, .blog-card:hover {
    border-color: var(--blue-200) !important;
    box-shadow: 0 12px 30px rgba(59,130,246,0.08) !important;
    transform: translateY(-3px);
}

/* Inside dark sections, cards become semi-transparent glass */

/* Forms — modern unified styling */
input[type="text"], input[type="email"], input[type="number"],
input[type="search"], input[type="password"], select, textarea {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
    font-family: var(--s-font-body);
    color: #0f172a;
    transition: all 0.2s ease;
    width: 100%;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="password"]:focus,
select:focus, textarea:focus {
    outline: none;
    border-color: var(--blue-400);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

/* Calculator-specific UI improvements */

/* Tool header containers — make them sit on top of dark hero properly */
.tool-header + .section,
.tool-header + section {
    padding-top: 4rem !important;
}

/* Text colors in dark sections — be aggressive */


/* ═══════════════════════════════════════════════════════════
   DARK FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
    background: #0a1226 !important;
    color: rgba(255,255,255,0.7) !important;
    padding: 5rem 0 2rem !important;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.footer h3, .footer h4 {
    color: white !important;
    font-family: var(--s-font-display);
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem !important;
}
.footer p { color: rgba(255,255,255,0.6) !important; }
.footer-brand p { color: rgba(255,255,255,0.6) !important; line-height: 1.6; margin-bottom: 1.25rem; }

/* Premium brand lockup (header + footer) */
.brand-lockup,
.footer a.brand-lockup,
.navbar a.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    line-height: 1;
    padding: 0;
}
.brand-lockup .brand-mark {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    align-self: center;
    display: block;
    transition: transform 0.3s ease;
}
.brand-lockup:hover .brand-mark {
    transform: translateY(-1px);
}
.brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    align-self: center;
    font-family: var(--s-font-display, 'Inter', sans-serif);
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}
.brand-wordmark .wm-tm {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.brand-wordmark .wm-trades {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    margin-left: 0.08em;
    letter-spacing: 0.005em;
}
.brand-wordmark .wm-fx {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 50%, #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-left: 0.08em;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.footer-brand .brand-lockup { margin-bottom: 1.25rem; }

/* Header logo: smaller mark + compact wordmark */
.navbar .brand-lockup .brand-mark {
    width: 38px;
    height: 38px;
}
.navbar .brand-lockup .brand-wordmark {
    font-size: 1.15rem;
    letter-spacing: -0.025em;
}
.navbar .brand-lockup .brand-wordmark .wm-tm { color: #0f172a; }
.navbar .brand-lockup .brand-wordmark .wm-trades { color: rgba(15, 23, 42, 0.72); }
body.has-dark-hero .navbar:not(.scrolled) .brand-wordmark .wm-tm,
body:has(.tool-header) .navbar:not(.scrolled) .brand-wordmark .wm-tm { color: #ffffff; }
body.has-dark-hero .navbar:not(.scrolled) .brand-wordmark .wm-trades,
body:has(.tool-header) .navbar:not(.scrolled) .brand-wordmark .wm-trades { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 600px) {
    .navbar .brand-lockup .brand-wordmark {
        display: inline-flex;
        font-size: 1rem;
        letter-spacing: -0.025em;
    }
}
@media (max-width: 380px) {
    .navbar .brand-lockup .brand-wordmark { font-size: 0.92rem; }
    .navbar .brand-lockup { gap: 0.5rem; }
}

/* ═══════════════════════════════════════════════════════════
   BLOG ARTICLE — premium legal-page-style layout
═══════════════════════════════════════════════════════════ */
.blog-hero {
    position: relative;
    padding: 9rem 0 4rem;
    background: radial-gradient(ellipse at top, #0f1e3d 0%, #0a1226 60%);
    color: white;
    overflow: hidden;
}
.blog-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 30% 30%, rgba(59,130,246,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 75% 70%, rgba(99,102,241,0.14) 0%, transparent 65%);
    pointer-events: none;
}
.blog-hero-inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; padding: 0 1.5rem; }
.blog-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: #93c5fd;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(147,197,253,0.25);
    padding: 0.45rem 1rem; border-radius: 999px;
    margin-bottom: 1.5rem;
}
.blog-title {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 900; letter-spacing: -1.2px;
    line-height: 1.1; margin: 0 0 1rem;
    color: white;
}
.blog-title em {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    background: linear-gradient(135deg, #93c5fd, #60a5fa, #38bdf8);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.blog-meta {
    display: inline-flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center;
    font-size: 0.88rem; color: rgba(255,255,255,0.6);
    margin-top: 0.5rem;
}
.blog-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.blog-author-chip {
    display: inline-flex; align-items: center; gap: 0.65rem;
    margin-top: 1.5rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border-radius: 999px;
}
.blog-author-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    display: inline-flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: 0.8rem;
}
.blog-author-name { color: rgba(255,255,255,0.95); font-weight: 700; font-size: 0.9rem; }
.blog-author-role { color: rgba(255,255,255,0.55); font-size: 0.78rem; margin-left: 0.4rem; }

/* Two-column shell */
.blog-shell { background: #fafbfc; padding: 4rem 0 6rem; }
.blog-grid {
    display: grid; grid-template-columns: 240px 1fr;
    gap: 4rem; max-width: 1140px; margin: 0 auto;
    padding: 0 1.5rem;
}

/* Sticky TOC */
.blog-toc {
    position: sticky; top: 100px; align-self: start;
    font-size: 0.9rem;
}
.blog-toc-label {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase; color: #94a3b8;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}
.blog-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: btoc; }
.blog-toc li { counter-increment: btoc; margin-bottom: 0.25rem; }
.blog-toc a {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    color: #475569; text-decoration: none;
    border-radius: 8px; font-weight: 600;
    transition: all 0.2s ease;
    line-height: 1.3;
}
.blog-toc a::before {
    content: counter(btoc, decimal-leading-zero);
    font-size: 0.72rem; font-weight: 700;
    color: #94a3b8; font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.blog-toc a:hover { background: #eff6ff; color: #1d4ed8; }
.blog-toc a:hover::before { color: #3b82f6; }

/* Article body */
.blog-article { max-width: 760px; }
.blog-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 2.25rem 2.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
    scroll-margin-top: 100px;
}
.blog-section-header {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.blog-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1d4ed8;
    border-radius: 10px;
    font-weight: 800; font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.blog-section h2 {
    font-size: 1.35rem !important;
    font-weight: 800;
    color: #0f172a;
    margin: 0 !important;
    letter-spacing: -0.4px;
    line-height: 1.3;
}
.blog-section p {
    color: #475569;
    line-height: 1.75;
    margin: 0 0 1rem;
    font-size: 0.98rem;
}
.blog-section p:last-child { margin-bottom: 0; }
.blog-section strong { color: #0f172a; font-weight: 700; }
.blog-section ul, .blog-section ol {
    margin: 0 0 1rem; padding-left: 1.25rem;
    color: #475569; line-height: 1.75;
}
.blog-section li { margin-bottom: 0.4rem; font-size: 0.98rem; }
.blog-section a {
    color: #2563eb; font-weight: 600;
    text-decoration: none; border-bottom: 1px dashed rgba(37,99,235,0.4);
    transition: all 0.2s ease;
}
.blog-section a:hover {
    color: #1d4ed8; border-bottom-color: #1d4ed8;
}

/* Lead paragraph (intro) */
.blog-lead {
    background: white;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.blog-lead p {
    margin: 0 0 0.8rem;
    color: #334155;
    font-size: 1.05rem;
    line-height: 1.7;
}
.blog-lead p:last-child { margin-bottom: 0; }

/* CTA card at bottom */

@media (max-width: 900px) {
    .blog-grid { grid-template-columns: 1fr; gap: 2rem; }
    .blog-toc { position: static; }
    .blog-section { padding: 1.75rem 1.5rem; }
    .blog-section-header { gap: 0.75rem; }
    .blog-num { width: 32px; height: 32px; font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════
   ELITE: Academy upgrades (comparison + featured trade)
═══════════════════════════════════════════════════════════ */
.elite-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #1d4ed8;
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.25);
    padding: 0.45rem 1rem; border-radius: 999px;
    margin-bottom: 1.5rem;
}
.elite-sub {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}
.elite-sub.light { color: rgba(255,255,255,0.7); }

/* ─── Featured trade breakdown ─── */

/* ─── Trading Academy — premium nav highlight ─── */
.navbar .nav-links > a.nav-academy {
    font-weight: 700 !important;
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 50%, #6366f1 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    position: relative;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.navbar .nav-links > a.nav-academy::before {
    content: '★';
    display: inline-block;
    margin-right: 0.35em;
    color: #fbbf24;
    -webkit-text-fill-color: #fbbf24;
    background: none;
    font-size: 0.8em;
    vertical-align: 1px;
    transition: transform 0.3s ease;
}
.navbar .nav-links > a.nav-academy:hover {
    transform: translateY(-1px);
}
.navbar .nav-links > a.nav-academy:hover::before {
    transform: rotate(72deg) scale(1.15);
}
/* Brighter gradient on dark hero / tool-header pages, unscrolled */
body.has-dark-hero .navbar:not(.scrolled) .nav-links > a.nav-academy,
body:has(.tool-header) .navbar:not(.scrolled) .nav-links > a.nav-academy {
    background: linear-gradient(135deg, #93c5fd 0%, #c7d2fe 50%, #a5b4fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.footer a {
    color: rgba(255,255,255,0.7) !important;
    transition: color 0.2s ease;
    display: block;
    padding: 0.3rem 0;
    font-size: 0.92rem;
}
.footer a:hover { color: var(--blue-400) !important; }
.footer-disclaimer {
    color: rgba(255,255,255,0.45) !important;
    font-size: 0.78rem !important;
    line-height: 1.6;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1.5rem;
    margin-top: 2.5rem;
}
.footer-disclaimer strong { color: rgba(255,255,255,0.7) !important; }
.footer-form input[type="email"] {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: white !important;
}
.footer-form input[type="email"]::placeholder { color: rgba(255,255,255,0.4) !important; }
/* Social icon override for dark footer */


/* ═══════════════════════════════════════════════════════════
   ACADEMY (education page) — refresh design
═══════════════════════════════════════════════════════════ */
.academy-sidebar {
    background: white !important;
    border-right: 1px solid #e2e8f0 !important;
    padding: 2rem 1.5rem !important;
}
.academy-sidebar h3 {
    font-family: var(--s-font-display);
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--blue-600) !important;
    margin-bottom: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════
   ITEM 8 — Accessibility
═══════════════════════════════════════════════════════════ */

/* Visible focus ring for keyboard nav */
*:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--blue-500) !important;
    outline-offset: 3px !important;
    border-radius: 4px;
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--blue-700);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0 0 8px 0;
    font-weight: 700;
    z-index: 10000;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .fade-in-up { opacity: 1 !important; transform: none !important; }
    .pulse-dot { animation: none !important; }
}

/* Better contrast: blue text on dark navy.
   2026-05-16: was unscoped `.s-eyebrow { color: #93c5fd !important }` which
   broke contrast on LIGHT-bg sections (`#verified-proofs`, `.s-faq-left`):
   1.8:1 ratio, axe-DevTools / WCAG AA failure.

   Now scoped to known dark-bg sections only. Light-bg .s-eyebrow falls back
   to the base rule (color: var(--blue-600) = #2563eb, 5.17:1 on white). */

.s-steps .s-eyebrow,
.s-testimonials .s-eyebrow { color: #93c5fd !important; }


/* ═══════════════ FOOTER FINAL FIXES ═══════════════ */

/* X social icon — proper styling */
.footer-social-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 10px;
    color: white !important;
    transition: all 0.25s ease !important;
    padding: 0 !important;
}
.footer-social-icon:hover {
    background: rgba(59,130,246,0.2) !important;
    border-color: var(--blue-400) !important;
    color: var(--blue-400) !important;
    transform: translateY(-2px);
}
.footer-social-icon svg { width: 16px; height: 16px; }

/* Risk Warning disclaimer — kill the white background */
.footer-disclaimer {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.55) !important;
    padding: 1.5rem 2rem !important;
    border-radius: 14px !important;
    margin-top: 3rem !important;
}
.footer-disclaimer strong { color: #fbbf24 !important; }

/* "Our Socials" label and similar inline-styled labels — recolor for dark footer */

/* Footer "Contact Us" + secondary links inline styles override */


/* ═══════════════════════════════════════════════════════════
   FAQ SECTION REDESIGN
═══════════════════════════════════════════════════════════ */
.s-faq-intro {
    color: var(--slate);
    margin: 1.25rem 0 2rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

.s-faq-contact {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--blue-50), white);
    border: 1px solid var(--blue-100);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    margin-bottom: 1.5rem;
}
.s-faq-contact:hover {
    border-color: var(--blue-400);
    box-shadow: 0 12px 30px rgba(59,130,246,0.15);
    transform: translateY(-2px);
}
.s-faq-contact-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}
.s-faq-contact-body { flex: 1; display: flex; flex-direction: column; }
.s-faq-contact-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--blue-600);
    margin-bottom: 2px;
}
.s-faq-contact-value {
    font-family: var(--s-font-display);
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

.s-faq-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}
.s-faq-stat {
    text-align: center;
    padding: 1rem 0.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.s-faq-stat-num {
    display: block;
    font-family: var(--s-font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--blue-600);
    letter-spacing: -0.5px;
    line-height: 1;
}
.s-faq-stat-lbl {
    display: block;
    font-size: 0.72rem;
    color: var(--slate);
    margin-top: 4px;
}

/* Iconified accordion */
.s-faq-right .faq-container { border-top: none !important; }
.s-faq-right .faq-item {
    background: white;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.s-faq-right .faq-item:hover {
    border-color: var(--blue-200) !important;
    box-shadow: 0 8px 25px rgba(59,130,246,0.06);
}
.s-faq-right .faq-item[open] {
    border-color: var(--blue-400) !important;
    box-shadow: 0 8px 30px rgba(59,130,246,0.12);
}
.s-faq-right .faq-item summary {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 1.1rem 1.4rem !important;
    font-family: var(--s-font-display);
    font-weight: 600 !important;
    color: #0f172a !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    list-style: none;
}
.s-faq-right .faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-50);
    border-radius: 10px;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.s-faq-right .faq-item[open] .faq-icon {
    background: var(--blue-500);
    color: white;
    transform: scale(1.05);
}
.faq-q { flex: 1; line-height: 1.4; }
.faq-chevron {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 50%;
    color: var(--slate);
    font-size: 1.2rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.s-faq-right .faq-item[open] .faq-chevron {
    background: var(--blue-100);
    color: var(--blue-700);
    transform: rotate(45deg);
}
.s-faq-right .faq-content {
    padding: 0 1.4rem 1.4rem 4.6rem !important;
    color: var(--slate) !important;
    line-height: 1.7 !important;
    font-size: 0.92rem !important;
}


/* ═══════════════════════════════════════════════════════════
   PRICING REDESIGN — proper SVG icons + trust badges
═══════════════════════════════════════════════════════════ */

/* Featured plan badge upgrade */

/* Trust badges row */


/* ═══════════════════════════════════════════════════════════
   VIP SECTION REDESIGN
═══════════════════════════════════════════════════════════ */

/* Live indicator */

/* Visual frame with floating cards */


/* Mobile adjustments */
@media (max-width: 1024px) {
    .s-faq-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .s-faq-stats { grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
    .s-faq-stat-num { font-size: 1.1rem; }
    .s-faq-right .faq-content { padding-left: 1.4rem !important; }
    .faq-icon { display: none; }
}


/* ═══════════════ KILL ALL REMAINING SKY-BLUE BACKGROUNDS ═══════════════ */
.bg-institutional-blue,
.bg-institutional-blue.direct-contact-section,
section[class*="bg-institutional"] {
    background: var(--navy) !important;
    color: white !important;
    position: relative;
    overflow: hidden;
}
.bg-institutional-blue::before,
section[class*="bg-institutional"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 70% at 50% 50%, rgba(59,130,246,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 20% 80%, rgba(99,102,241,0.12) 0%, transparent 65%);
    pointer-events: none;
}
.bg-institutional-blue > .container,
section[class*="bg-institutional"] > .container { position: relative; z-index: 2; }

/* Text inside these sections — light on dark */
.bg-institutional-blue h1, .bg-institutional-blue h2, .bg-institutional-blue h3, .bg-institutional-blue h4,
section[class*="bg-institutional"] h1, section[class*="bg-institutional"] h2,
section[class*="bg-institutional"] h3, section[class*="bg-institutional"] h4 { color: white !important; }
.bg-institutional-blue p,
section[class*="bg-institutional"] p { color: rgba(255,255,255,0.75) !important; }
.bg-institutional-blue strong,
section[class*="bg-institutional"] strong { color: white !important; }
.bg-institutional-blue .accent-text,
.bg-institutional-blue .text-gradient {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 40%, #38bdf8 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ═══════════════════════════════════════════════════════════
   BENTO REFINEMENTS — denser content
═══════════════════════════════════════════════════════════ */

/* Supply & Demand visual on the blue card */

/* Psychology chips */

/* Tighten risk meter card */


/* ═══════════════════════════════════════════════════════════
   TRUST WALL REDESIGN — split layout
═══════════════════════════════════════════════════════════ */

/* Featured The5ers card */

/* Other firms grid */


/* ═══════════════════════════════════════════════════════════
   MOBILE — bento + trust grid
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FIX 1 — Join Now button visible when navbar scrolled (white bg)
═══════════════════════════════════════════════════════════ */
.navbar.scrolled .nav-cta-btn {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700)) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(59,130,246,0.35) !important;
}
.navbar.scrolled .nav-cta-btn:hover {
    box-shadow: 0 8px 25px rgba(59,130,246,0.5) !important;
    transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════
   FIX 2 — Get Access button on s-proof: blue text, more contrast
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FIX 3 — Receipts wall (replaces basic gallery)
═══════════════════════════════════════════════════════════ */
.s-verified { padding: 6rem 0; }

.s-receipts {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.5rem;
    margin-top: 3.5rem;
    align-items: stretch;
}

/* Featured card */
.s-receipt-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: linear-gradient(135deg, var(--navy) 0%, #1e3a8a 100%);
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 20px 50px rgba(15,23,42,0.18);
    transition: all 0.3s ease;
    position: relative;
}
.s-receipt-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(15,23,42,0.25);
}
.s-receipt-media {
    background: #f8c52e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1.5rem;
}
.s-receipt-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.s-receipt-info {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    gap: 0.5rem;
}
.s-receipt-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--s-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 12px;
    border-radius: 50px;
    width: fit-content;
    margin-bottom: 0.5rem;
}
.s-receipt-tag-gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
}
.s-receipt-amount {
    font-family: var(--s-font-display);
    font-size: 3rem;
    font-weight: 900;
    color: white;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 1rem;
}
.s-receipt-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 1.25rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.s-receipt-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
}
.s-receipt-row .strong {
    color: white;
    font-weight: 600;
}
.s-receipt-row .strong.green { color: #4ade80; }
.s-receipt-cta {
    color: var(--blue-300);
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 0.88rem;
    transition: transform 0.2s ease;
}
.s-receipt-feature:hover .s-receipt-cta { transform: translateX(4px); color: white; }

/* Compact list */
.s-receipt-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.s-receipt-row-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.25s ease;
    flex: 1;
}
.s-receipt-row-item:hover {
    border-color: var(--blue-300);
    box-shadow: 0 12px 30px rgba(59,130,246,0.1);
    transform: translateX(4px);
}
.s-rri-thumb {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
}
.s-rri-thumb img { width: 100%; height: 100%; object-fit: cover; }
.s-rri-body { flex: 1; min-width: 0; }
.s-rri-amount {
    font-family: var(--s-font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.s-rri-cert { font-size: 1rem; }
.s-rri-meta {
    font-size: 0.78rem;
    color: var(--slate);
    margin-top: 2px;
}
.s-rri-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}
.s-receipt-row-item:hover .s-rri-icon {
    background: var(--blue-500);
    color: white;
    transform: translateX(2px);
}

/* Certificate row gets a special amber gradient thumb */
.s-receipt-row-cert .s-rri-thumb {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}


/* ═══════════════════════════════════════════════════════════
   FIX 4 — Journey card alignment + Step 1 CTA
═══════════════════════════════════════════════════════════ */

/* CTA inside step 1 */
/* On the dark bg, journey-meta needs to align */


/* ═══════════════════════════════════════════════════════════
   MOBILE — receipts
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .s-receipts { grid-template-columns: 1fr; }
    .s-receipt-feature { grid-template-columns: 1fr; }
    .s-receipt-media { padding: 1rem; max-height: 280px; }
}
@media (max-width: 768px) {
    .s-receipt-amount { font-size: 2.4rem; }
    .s-rri-amount { font-size: 1.2rem; }
    .s-rri-thumb { width: 50px; height: 50px; }
    .s-receipt-info { padding: 1.5rem; }
}


/* ═══════════════════════════════════════════════════════════
   VIP MOCKUP — interactive animated signal feed (no fake screenshots)
═══════════════════════════════════════════════════════════ */

/* Feed area */
@keyframes msg-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Signal card inside the message */

/* Animated chart */
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes pulse-dot-svg {
    0%, 100% { r: 4; }
    50% { r: 6; }
}

/* Reactions */

/* Update pill (TP hit) */

/* Typing indicator */
@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}


/* ═══════════════════════════════════════════════════════════
   PRICING BUTTON FIXES — equal alignment + blue Signals button
═══════════════════════════════════════════════════════════ */

/* Make plan cards equal-height with buttons aligned at the bottom */

/* VIP Signals (non-featured) button now BLUE outline */

/* Override any conflicting earlier rules */


/* ═══════════════════════════════════════════════════════════
   MOBILE — VIP mockup
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FIX — Excessive vertical gap between pricing and testimonials
   (and between any back-to-back dark sections)
═══════════════════════════════════════════════════════════ */

/* Tighten the bottom padding of the guarantee box so it doesn't add to the gap */

/* When two dark sections sit back-to-back, halve their adjoining padding */
.s-testimonials { padding-top: 4rem; }

/* Same for steps + pricing flow */


/* ═══════════════════════════════════════════════════════════
   FIX — Seamless transition between dark sections
   (no horizontal line where backgrounds meet)
═══════════════════════════════════════════════════════════ */

/* Make the radial-gradient pseudo-elements extend past the section edge
   so consecutive dark sections blend without a visible seam */
.s-steps::before,
.s-testimonials::before {
    inset: -100px 0 -100px 0 !important;  /* overflow top & bottom */
}

/* Pull adjacent dark sections together so their gradient halos blend */


/* ═══════════════════════════════════════════════════════════
   FIX — body text inside dark sections (overrides inline styles)
   Catches paragraphs/lists with inline color:var(--text-secondary)
═══════════════════════════════════════════════════════════ */

/* Force readable text on every element inside dark sections */
.bg-institutional-blue p,
.bg-institutional-blue li,
.bg-institutional-blue ul,
.bg-institutional-blue ol,
.bg-institutional-blue div,
.bg-institutional-blue span,
.bg-institutional-blue td,
.bg-institutional-blue dd {
    color: rgba(255,255,255,0.85) !important;
}
.bg-institutional-blue strong {
    color: white !important;
}

/* Inline style elements (color:var(--text-secondary), color:#64748b, etc.) inside dark sections */
.bg-institutional-blue [style*="text-secondary"] {
    color: rgba(255,255,255,0.8) !important;
}

/* Headings inside dark sections must always be white */
.bg-institutional-blue h1, .bg-institutional-blue h2, .bg-institutional-blue h3,
.bg-institutional-blue h4, .bg-institutional-blue h5, .bg-institutional-blue h6 {
    color: white !important;
}

/* Inline color:var(--text-primary) — would be dark navy on dark navy = invisible */
.bg-institutional-blue [style*="text-primary"] {
    color: white !important;
}

/* Checkmarks and accent spans stay visible */
.bg-institutional-blue [style*="accent-color"] {
    color: var(--blue-300) !important;
}


/* ═══════════════════════════════════════════════════════════
   POSITION SIZE CALCULATOR v3 — premium dashboard
═══════════════════════════════════════════════════════════ */
.calc-container { max-width: 1200px; margin: 0 auto; }

.calcv3 {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(15,23,42,0.04),
        0 30px 80px rgba(15,23,42,0.08);
    border: 1px solid #f1f5f9;
}

/* Header bar */
.calcv3-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    color: white;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.calcv3-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 100% at 80% 50%, rgba(59,130,246,0.35) 0%, transparent 65%);
    pointer-events: none;
}
.calcv3-header > * { position: relative; z-index: 2; }
.calcv3-header-left { display: flex; align-items: center; gap: 12px; }
.calcv3-icon {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #93c5fd;
}
.calcv3-icon svg { width: 20px; height: 20px; }
.calcv3-title {
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 1rem;
    color: white;
    letter-spacing: -0.3px;
}
.calcv3-subtitle {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    margin-top: 1px;
}
.calcv3-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(74,222,128,0.15);
    border: 1px solid rgba(74,222,128,0.35);
    color: #4ade80;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: 50px;
    text-transform: uppercase;
}
.calcv3-pulse {
    width: 6px; height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

/* Body grid */
.calcv3-body {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    background: linear-gradient(135deg, white 0%, #fafbff 100%);
}

/* Inputs pane */
.calcv3-inputs {
    padding: 2rem;
    border-right: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Buy/Sell toggle */
.calcv3-direction {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 4px;
    gap: 4px;
}
.calcv3-dir-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.85rem 1rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--slate);
    cursor: pointer;
    transition: all 0.25s ease;
}
.calcv3-dir-btn:hover { color: #0f172a; }
.calcv3-dir-btn.active {
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
#dir-buy.active {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 14px rgba(16,185,129,0.35);
}
#dir-sell.active {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 14px rgba(239,68,68,0.35);
}

/* Input rows */
.calcv3-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.calcv3-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.calcv3-group { display: flex; flex-direction: column; gap: 6px; }
.calcv3-group label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate);
    display: flex;
    align-items: center;
    gap: 6px;
}
.calcv3-hint {
    font-weight: 500;
    color: #94a3b8;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.7rem;
}

.calcv3-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.calcv3-input {
    width: 100%;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: #0f172a;
    transition: all 0.2s ease;
    -moz-appearance: textfield;
}
.calcv3-input::-webkit-outer-spin-button,
.calcv3-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.calcv3-input:hover { border-color: #cbd5e1; }
.calcv3-input:focus {
    outline: none;
    border-color: var(--blue-400);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.calcv3-input.has-prefix { padding-left: 2.25rem; }
.calcv3-input.has-suffix { padding-right: 3rem; }
.calcv3-prefix {
    position: absolute;
    left: 1rem;
    color: #94a3b8;
    font-weight: 700;
    font-size: 1rem;
    pointer-events: none;
}
.calcv3-suffix {
    position: absolute;
    right: 1rem;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    pointer-events: none;
}

/* Risk preset buttons */
.calcv3-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 4px;
}
.calcv3-preset {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 0;
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--slate);
    cursor: pointer;
    transition: all 0.2s ease;
}
.calcv3-preset:hover {
    border-color: var(--blue-300);
    color: var(--blue-600);
    background: var(--blue-50);
}
.calcv3-preset.active {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}

/* Divider with text */
.calcv3-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0.5rem 0 0;
}
.calcv3-divider::before,
.calcv3-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.calcv3-divider span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate);
}
.calcv3-divider em {
    font-style: normal;
    color: #94a3b8;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Pair selector */
.calcv3-pair-trigger {
    background: white !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 0.9rem 1rem !important;
    font-family: var(--s-font-display) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer;
}
.calcv3-pair-trigger:hover { border-color: #cbd5e1 !important; }
.calcv3-pair-trigger svg { color: #94a3b8; flex-shrink: 0; transition: transform 0.2s ease; }
.calcv3-pair-wrap.open .calcv3-pair-trigger svg { transform: rotate(180deg); }


/* ═══════════════ RESULTS PANE ═══════════════ */
.calcv3-results {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(180deg, #fafbff 0%, #f1f5fb 100%);
}

/* Hero result */
.calcv3-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    color: white;
    position: relative;
    overflow: hidden;
}
.calcv3-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 100% at 100% 0%, rgba(59,130,246,0.4) 0%, transparent 65%),
        radial-gradient(ellipse 60% 100% at 0% 100%, rgba(16,185,129,0.18) 0%, transparent 60%);
    pointer-events: none;
}
.calcv3-hero > * { position: relative; z-index: 2; }
.calcv3-hero-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #93c5fd;
    margin-bottom: 0.5rem;
}
.calcv3-hero-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 0.5rem;
}
.calcv3-hero-value > span:first-child {
    font-family: var(--s-font-display);
    font-size: 3.5rem;
    font-weight: 900;
    color: white;
    letter-spacing: -2.5px;
    line-height: 1;
    transition: color 0.3s;
}
.calcv3-hero-unit {
    font-family: var(--s-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    letter-spacing: -0.5px;
}
.calcv3-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.calcv3-hero-tag {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.15);
}
.calcv3-hero-formula {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
}

/* Risk:Reward visualization card */
.calcv3-rr-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1rem 1.25rem;
}
.calcv3-rr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.calcv3-rr-header > span:first-child {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate);
}
.calcv3-rr-ratio {
    font-family: var(--s-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: #f97316;
    letter-spacing: -0.3px;
}
.calcv3-rr-bar {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 6px;
    border-radius: 10px;
    overflow: hidden;
    height: auto;
}
.calcv3-rr-risk, .calcv3-rr-reward {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
}
.calcv3-rr-risk {
    background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.04));
    border: 1px solid rgba(239,68,68,0.2);
}
.calcv3-rr-reward {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.04));
    border: 1px solid rgba(16,185,129,0.2);
}
.calcv3-rr-risk > span:first-child,
.calcv3-rr-reward > span:first-child {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate);
}
.calcv3-rr-risk .amount {
    font-family: var(--s-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: #ef4444;
    letter-spacing: -0.3px;
}
.calcv3-rr-reward .amount {
    font-family: var(--s-font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: #10b981;
    letter-spacing: -0.5px;
}

/* Secondary stats grid */
.calcv3-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.calcv3-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.85rem 1rem;
}
.calcv3-stat-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.calcv3-stat-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.calcv3-stat-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
}
.calcv3-stat-val {
    font-family: var(--s-font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
}

/* Note */
.calcv3-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0.75rem 1rem;
    background: rgba(59,130,246,0.05);
    border: 1px solid rgba(59,130,246,0.15);
    border-radius: 10px;
    color: var(--slate);
    font-size: 0.78rem;
    line-height: 1.4;
    margin-top: auto;
}
.calcv3-note svg { color: var(--blue-500); flex-shrink: 0; margin-top: 2px; }


/* ═══════════════ DONATE STRIP ═══════════════ */
.calcv3-donate {
    margin-top: 1.5rem;
    background: linear-gradient(135deg, white 0%, #fafbff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 4px 20px rgba(15,23,42,0.04);
}
.calcv3-donate > div {
    color: var(--slate);
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.calcv3-donate strong { color: #0f172a; font-weight: 700; }
.calcv3-donate-icon { font-size: 1.3rem; }
.calcv3-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    color: white !important;
    text-decoration: none;
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 0.88rem;
    box-shadow: 0 4px 14px rgba(59,130,246,0.35);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.calcv3-donate-btn:hover {
    box-shadow: 0 8px 25px rgba(59,130,246,0.5);
    transform: translateY(-2px);
}


/* ═══════════════ MOBILE ═══════════════ */
@media (max-width: 1024px) {
    .calcv3-body { grid-template-columns: 1fr; }
    .calcv3-inputs { border-right: none; border-bottom: 1px solid #f1f5f9; }
}
@media (max-width: 640px) {
    .calcv3-row, .calcv3-row-3 { grid-template-columns: 1fr; }
    .calcv3-grid { grid-template-columns: 1fr; }
    .calcv3-hero-value > span:first-child { font-size: 2.6rem; }
    .calcv3-inputs, .calcv3-results { padding: 1.5rem; }
    .calcv3-header { padding: 1rem 1.5rem; }
    .calcv3-donate { flex-direction: column; align-items: stretch; text-align: center; gap: 1rem; }
}


/* ═══════════════════════════════════════════════════════════
   COMPACT DESKTOP — scale down base size + tighten spacing
   (fixes "zoomed-in" feel on standard 1080p+ displays)
═══════════════════════════════════════════════════════════ */

/* Lower base font size from 16px → 15px on desktop ≥ 1024px
   This proportionally shrinks every rem-based size — section padding,
   headings, body text, card sizes — without breaking anything. */
@media (min-width: 1024px) {
    html { font-size: 15px; }
}
@media (min-width: 1440px) {
    html { font-size: 16px; }
}
@media (min-width: 1920px) {
    html { font-size: 17px; }
}

/* Cap extreme heading sizes — clamp upper bounds were too generous */
.s-hero-heading { font-size: clamp(2.4rem, 4.5vw, 4rem) !important; }
.s-section-title { font-size: clamp(1.7rem, 2.8vw, 2.6rem) !important; }
.tool-header h1 { font-size: clamp(2rem, 4vw, 3.2rem) !important; }

/* Tighten section vertical padding on desktop */
@media (min-width: 1024px) {
     .s-faq, .s-verified {
        padding: 5rem 0 !important;
    }
     .s-steps, .s-testimonials {
        padding: 5rem 0 !important;
    }
    .s-features-header { margin-bottom: 3rem !important; }
    /* Hero compresses too */
    .s-hero { padding: 8rem 0 3rem !important; }
    /* Footer */
    .footer { padding: 4rem 0 2rem !important; }
}

/* Larger displays still need wider container */
@media (min-width: 1440px) {
    .container { max-width: 1240px; }
}
@media (min-width: 1920px) {
    .container { max-width: 1320px; }
}


/* ═══════════════════════════════════════════════════════════
   TESTIMONIAL AVATARS — initial-based, matching card stripes
═══════════════════════════════════════════════════════════ */

/* Override the older client-avatar img treatment that's no longer used */


/* ═══════════════════════════════════════════════════════════
   DONATION BAR — upgraded for visibility (used across all tools)
═══════════════════════════════════════════════════════════ */
.calcv3-donate {
    margin-top: 2rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 20px 50px rgba(15,23,42,0.18), 0 0 0 1px rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
}
.calcv3-donate::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 100% at 0% 50%, rgba(59,130,246,0.35) 0%, transparent 60%),
        radial-gradient(ellipse 60% 100% at 100% 50%, rgba(99,102,241,0.25) 0%, transparent 60%);
    pointer-events: none;
}
.calcv3-donate > * { position: relative; z-index: 2; }

.calcv3-donate > div {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.98rem !important;
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    line-height: 1.5;
}
.calcv3-donate strong {
    color: white !important;
    font-weight: 800 !important;
    font-family: var(--s-font-display);
}
.calcv3-donate-icon {
    font-size: 2rem !important;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(59,130,246,0.5));
    animation: donate-bob 3s ease-in-out infinite;
    display: inline-block;
}
@keyframes donate-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(-8deg); }
}

.calcv3-donate-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: white !important;
    text-decoration: none;
    padding: 0.85rem 1.75rem !important;
    border-radius: 50px !important;
    font-family: var(--s-font-display);
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 8px 25px rgba(59,130,246,0.5), 0 0 0 4px rgba(59,130,246,0.15) !important;
    transition: all 0.25s ease !important;
    white-space: nowrap;
    border: none !important;
    position: relative;
}
.calcv3-donate-btn:hover {
    box-shadow: 0 12px 35px rgba(59,130,246,0.65), 0 0 0 6px rgba(59,130,246,0.2) !important;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .calcv3-donate {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 1.25rem;
        padding: 1.5rem;
    }
    .calcv3-donate > div { flex-direction: column; gap: 8px; }
    .calcv3-donate-icon { font-size: 2.5rem !important; }
    .calcv3-donate-btn { width: 100%; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════
   AGGRESSIVE DESKTOP COMPACTION
   Solves "everything looks giant" feedback on standard 1080p+
═══════════════════════════════════════════════════════════ */

/* More aggressive base font scaling */
@media (min-width: 1024px) {
    html { font-size: 14px; }
}
@media (min-width: 1440px) {
    html { font-size: 15px; }
}
@media (min-width: 1920px) {
    html { font-size: 16px; }
}

/* Tighten section vertical rhythm even more on desktop */
@media (min-width: 1024px) {
     .s-faq, .s-verified, .s-steps, .s-testimonials {
        padding: 4rem 0 !important;
    }
    .s-features-header { margin-bottom: 2.5rem !important; }
    .s-hero { padding: 7rem 0 2.5rem !important; }
    .footer { padding: 3rem 0 1.5rem !important; }
    
    /* Cap container width tighter */
    .container { max-width: 1100px !important; }
}
@media (min-width: 1440px) {
    .container { max-width: 1180px !important; }
}
@media (min-width: 1920px) {
    .container { max-width: 1260px !important; }
}

/* Cap heading sizes more tightly */
.s-hero-heading { font-size: clamp(2.2rem, 4vw, 3.6rem) !important; }
.s-section-title { font-size: clamp(1.6rem, 2.5vw, 2.3rem) !important; }


/* ═══════════════ RECEIPTS — FIX GIANT SIZING ═══════════════ */

/* Cap the whole receipts grid to a sensible max-height on desktop */
@media (min-width: 1024px) {
    .s-receipts {
        max-height: 460px !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        margin-top: 2.5rem !important;
    }
    
    /* Featured card: don't let the yellow image dominate */
    .s-receipt-feature {
        grid-template-columns: 0.85fr 1fr !important;
    }
    .s-receipt-media {
        padding: 1rem !important;
        max-height: 460px;
    }
    .s-receipt-media img {
        object-fit: contain !important;
    }
    .s-receipt-info { padding: 1.25rem 1.5rem !important; }
    .s-receipt-amount { font-size: 2.2rem !important; }
    .s-receipt-meta {
        margin-bottom: 0.85rem !important;
        padding: 0.75rem 0 !important;
    }
    .s-receipt-row { font-size: 0.78rem !important; }
    .s-receipt-tag { font-size: 0.68rem !important; padding: 4px 10px !important; }
    
    /* Compact list rows */
    .s-receipt-list { gap: 0.5rem !important; }
    .s-receipt-row-item {
        padding: 0.65rem 1rem !important;
        gap: 0.85rem !important;
    }
    .s-rri-thumb {
        width: 48px !important;
        height: 48px !important;
    }
    .s-rri-amount { font-size: 1.15rem !important; }
    .s-rri-cert { font-size: 0.9rem !important; }
    .s-rri-meta { font-size: 0.72rem !important; }
}

/* On smaller laptop screens, allow it to grow back naturally */
@media (max-width: 1023px) {
    .s-receipts { max-height: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE FIXES — comprehensive recheck
   Targets: alignment, overflow, off-screen elements
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Prevent ANY horizontal overflow site-wide */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Tighter container padding on phones (was 1rem, now 1.25rem to give more breathing room) */
    .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    
    /* ─── Hero ─── */
    .s-hero { padding: 6rem 0 2rem !important; }
    .s-hero-inner { gap: 2rem !important; padding-bottom: 1.5rem !important; }
    .s-hero-cta { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .s-hero-cta a { width: 100%; justify-content: center; text-align: center; }
    
    /* Hero stats — 2x2 grid on phones */
    .s-hero-stats {
        flex-wrap: wrap !important;
        padding: 1rem !important;
        gap: 0.75rem !important;
        justify-content: center;
    }
    .s-hero-stat { flex: 1 1 calc(50% - 0.5rem) !important; min-width: 0 !important; }
    .s-stat-num { font-size: 1.05rem !important; }
    .s-stat-divider { display: none !important; }
    
    /* ─── Trust wall ─── */
    
    /* ─── Bento grid ─── */
    
    /* ─── Receipts (proof gallery) ─── */
    .s-receipts {
        grid-template-columns: 1fr !important;
        max-height: none !important;
        gap: 0.75rem !important;
    }
    .s-receipt-feature {
        grid-template-columns: 1fr !important;
        max-height: none !important;
    }
    .s-receipt-media {
        max-height: 280px !important;
        padding: 1rem !important;
    }
    .s-receipt-media img { 
        max-height: 260px !important;
        object-fit: contain !important;
    }
    .s-receipt-info { padding: 1.5rem !important; }
    .s-receipt-amount { font-size: 2rem !important; }
    .s-receipt-row-item { padding: 0.75rem 1rem !important; gap: 0.75rem !important; }
    .s-rri-thumb { width: 44px !important; height: 44px !important; }
    .s-rri-amount { font-size: 1.1rem !important; }
    .s-rri-meta { font-size: 0.72rem !important; }
    
    /* ─── Steps / Journey ─── */
    
    /* ─── VIP mockup section ─── */
    
    /* Mockup feed — tighten spacing inside */
    
    /* ─── Pricing ─── */
    
    /* ─── Testimonials ─── */
    
    /* ─── Blog ─── */
    
    /* ─── FAQ ─── */
    .s-faq-inner {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .s-faq-left { position: static !important; }
    .s-faq-stats { grid-template-columns: 1fr 1fr 1fr !important; gap: 0.5rem !important; }
    .s-faq-stat { padding: 0.75rem 0.4rem !important; }
    .s-faq-stat-num { font-size: 1.1rem !important; }
    .s-faq-stat-lbl { font-size: 0.65rem !important; }
    .s-faq-contact { padding: 1rem 1.25rem !important; gap: 10px !important; }
    .s-faq-contact-icon { width: 38px; height: 38px; }
    .s-faq-right .faq-item summary { 
        padding: 0.9rem 1rem !important; 
        font-size: 0.88rem !important;
        gap: 10px !important;
    }
    .s-faq-right .faq-content { 
        padding: 0 1rem 1rem 1rem !important;
        font-size: 0.85rem !important;
    }
    .faq-icon { display: none !important; }
    .faq-chevron { width: 24px; height: 24px; font-size: 1rem; }
    .faq-q { font-size: 0.88rem; }
    
    /* ─── Contact section ─── */
    .s-form-row { grid-template-columns: 1fr !important; }
    
    /* ─── Proof / track record ─── */
    
    /* ─── Footer ─── */
    .footer { padding: 3rem 0 1.5rem !important; }
    .footer-disclaimer { padding: 1rem 1.25rem !important; font-size: 0.72rem !important; }
    
    /* ─── Donate bar ─── */
    .calcv3-donate {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        gap: 1rem !important;
        padding: 1.25rem !important;
    }
    .calcv3-donate > div {
        flex-direction: column !important;
        gap: 8px !important;
        font-size: 0.9rem !important;
    }
    .calcv3-donate-icon { font-size: 2.25rem !important; }
    .calcv3-donate-btn { width: 100%; justify-content: center; }
    
    /* ─── Calculator ─── */
    .calcv3-body { grid-template-columns: 1fr !important; }
    .calcv3-inputs { 
        padding: 1.25rem !important; 
        border-right: none !important; 
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .calcv3-results { padding: 1.25rem !important; }
    .calcv3-row, .calcv3-row-3 { grid-template-columns: 1fr !important; gap: 0.85rem !important; }
    .calcv3-grid { grid-template-columns: 1fr !important; gap: 0.6rem !important; }
    .calcv3-hero { padding: 1.25rem !important; }
    .calcv3-hero-value > span:first-child { font-size: 2.4rem !important; }
    .calcv3-hero-formula { font-size: 0.65rem !important; }
    .calcv3-header { padding: 1rem 1.25rem !important; }
    .calcv3-rr-bar { grid-template-columns: 1fr 1.5fr !important; }
    .calcv3-rr-risk .amount { font-size: 0.95rem !important; }
    .calcv3-rr-reward .amount { font-size: 1.2rem !important; }
    
    /* ─── Section titles & body ─── */
    .s-section-title { font-size: 1.6rem !important; line-height: 1.15 !important; }
    .s-hero-heading { font-size: 2.1rem !important; line-height: 1.1 !important; }
    .s-eyebrow { font-size: 0.7rem !important; }
    .s-section-sub { font-size: 0.92rem !important; }
    .s-features-header { margin-bottom: 2rem !important; }
}

/* Very narrow screens (< 380px) */
@media (max-width: 380px) {
    .container { padding-left: 1rem !important; padding-right: 1rem !important; }
    .s-hero-stat { flex: 1 1 100% !important; }
    .s-faq-stats { grid-template-columns: 1fr 1fr 1fr !important; }
    .s-faq-stat-num { font-size: 1rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   FIX — Calculator pair dropdown tabs overflow
═══════════════════════════════════════════════════════════ */
.select-tabs {
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding: 0.6rem 0.8rem 0.8rem !important;
}
.select-tabs .tab-btn {
    padding: 5px 10px !important;
    font-size: 0.68rem !important;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Pair/asset dropdown — full structure.
   Used by calculator.html and journal.html. */
.custom-select-container {
    position: relative;
    width: 100%;
}
.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow: hidden;
    display: none;
    animation: cs-slideUp 0.25s ease;
}
.custom-select-dropdown.show { display: block; }
@keyframes cs-slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.custom-select-search-wrap {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.custom-select-search {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #ffffff;
    font-family: inherit;
}
.custom-select-search:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.custom-select-options {
    max-height: 300px;
    overflow-y: auto;
}
.custom-select-options::-webkit-scrollbar { width: 6px; }
.custom-select-options::-webkit-scrollbar-track { background: #f1f5f9; }
.custom-select-options::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.custom-select-option {
    padding: 0.7rem 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.15s ease;
    font-size: 0.92rem;
    color: #0f172a;
}
.custom-select-option:hover { background: #eff6ff; }
.custom-select-option.selected {
    background: #3b82f6;
    color: #ffffff;
}
.asset-badge {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 5px;
    background: #f1f5f9;
    color: #64748b;
    flex-shrink: 0;
}
.custom-select-option.selected .asset-badge {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
}
.custom-select-empty {
    padding: 1rem 1.2rem;
    color: #64748b;
    font-size: 0.9rem;
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE — Direct Contact section redesign
═══════════════════════════════════════════════════════════ */
.contact-direct-section {
    background: var(--navy);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}
.contact-direct-section::before {
    content: '';
    position: absolute;
    inset: -100px 0;
    background:
        radial-gradient(ellipse 60% 70% at 30% 50%, rgba(59,130,246,0.22) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 80% 50%, rgba(99,102,241,0.15) 0%, transparent 65%);
    pointer-events: none;
}
.contact-direct-section > .container { position: relative; z-index: 2; }

.contact-direct-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-direct-header .s-eyebrow {
    color: #93c5fd !important;
    margin-bottom: 1rem;
    display: block;
}
.contact-direct-title {
    font-family: var(--s-font-display);
    font-size: clamp(1.7rem, 2.5vw, 2.3rem);
    font-weight: 800;
    color: white;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0 0 1rem;
}
.contact-direct-sub {
    color: rgba(255,255,255,0.65);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.contact-direct-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    backdrop-filter: blur(10px);
}
.contact-direct-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: var(--blue-400);
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(59,130,246,0.2);
}
.contact-direct-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(59,130,246,0.35);
}
.contact-direct-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact-direct-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #93c5fd;
}
.contact-direct-email {
    font-family: var(--s-font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.3px;
    word-break: break-all;
}
.contact-direct-arrow {
    color: var(--blue-300);
    font-size: 1.5rem;
    font-weight: 600;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.contact-direct-card:hover .contact-direct-arrow { transform: translateX(4px); color: white; }

@media (max-width: 768px) {
    .contact-direct-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
    .contact-direct-card { padding: 1.25rem 1.4rem; gap: 1rem; }
    .contact-direct-email { font-size: 1rem; }
    .contact-direct-icon { width: 48px; height: 48px; }
    .contact-direct-icon svg { width: 22px; height: 22px; }
}


/* ═══════════════════════════════════════════════════════════
   BENTO COMPACTION — reduce excessive height + density
═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    /* Tighter rows */
    
    /* Headings + body smaller */
    
    /* Stat row inside precision card — smaller */
    
    /* Precision visual chart shorter */
    
    /* Supply & Demand visual smaller */
    
    /* Risk meter compacted */
    
    /* Psychology card chips smaller */
    
    /* Section title smaller in this section */
    
    /* Whole section padding cut */
}


/* ═══════════════════════════════════════════════════════════
   PROOF VAULT — compact stat strip + thumbnail grid
═══════════════════════════════════════════════════════════ */

/* Stat strip */

/* Thumbnail grid: 5 cards in a row */
.s-vault-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.85rem;
}

/* Special highlight for the lifetime total card */


/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .s-vault-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .s-vault-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}



/* ═══════════════════════════════════════════════════════════
   UNIFIED VAULT PATTERN — receipts-style asymmetric layout
   Used by: Journey, Blog, (and as base for Pricing metaboxes)
═══════════════════════════════════════════════════════════ */

.s-vault-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

/* Featured card (left) */
.s-vault-feature {
    background: linear-gradient(135deg, var(--navy) 0%, #1e3a8a 100%);
    color: white;
    padding: 2.25rem;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(15,23,42,0.18);
    transition: all 0.3s ease;
}
.s-vault-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(59,130,246,0.4) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 0% 100%, rgba(99,102,241,0.18) 0%, transparent 65%);
    pointer-events: none;
}
.s-vault-feature > * { position: relative; z-index: 2; }
.s-vault-feature:hover { transform: translateY(-3px); box-shadow: 0 30px 60px rgba(15,23,42,0.25); }

.s-vault-eyebrow {
    display: inline-block;
    font-family: var(--s-font-display);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #93c5fd;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.s-vault-title {
    font-family: var(--s-font-display);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    color: white;
    margin: 0 0 0.75rem;
}
.s-vault-sub {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.7);
    margin: 0 0 1.5rem;
}

/* Metabox inside featured cards */
.s-vault-metabox {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
}
.s-vault-metarow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.s-vault-metarow:last-child { border-bottom: none; }
.s-vault-metalabel { color: rgba(255,255,255,0.55); }
.s-vault-metaval { color: white; font-weight: 700; font-family: var(--s-font-display); }
.s-vault-metaval.green { color: #4ade80; }

.s-vault-cta {
    color: #93c5fd;
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: auto;
    padding-top: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
}
.s-vault-feature:hover .s-vault-cta { transform: translateX(4px); color: white; }

/* Compact list (right) */
.s-vault-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.s-vault-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.25s ease;
    flex: 1;
    min-height: 70px;
}
.s-vault-row:hover {
    border-color: var(--blue-300);
    box-shadow: 0 12px 30px rgba(59,130,246,0.1);
    transform: translateX(4px);
}
.s-vault-thumb {
    width: 48px;
    height: 48px;
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--s-font-display);
    font-weight: 800;
    color: var(--blue-700);
    font-size: 0.9rem;
}
.s-vault-thumb-active {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(59,130,246,0.35);
}

.s-vault-body { flex: 1; min-width: 0; }
.s-vault-rowtitle {
    font-family: var(--s-font-display);
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.s-vault-rowmeta {
    font-size: 0.78rem;
    color: var(--slate);
    line-height: 1.3;
}
.s-vault-pill {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 1px 8px;
    border-radius: 50px;
    letter-spacing: 0.05em;
}
.s-vault-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}
.s-vault-row:hover .s-vault-arrow {
    background: var(--blue-500);
    color: white;
    transform: translateX(2px);
}
.s-vault-row-final .s-vault-thumb-active { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 12px rgba(16,185,129,0.35); }


/* ═══════════════════════════════════════════════════════════
   JOURNEY SECTION — uses vault grid
═══════════════════════════════════════════════════════════ */
.s-steps { padding: 4rem 0 !important; }


/* ═══════════════════════════════════════════════════════════
   BLOG SECTION — featured post + compact list
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   PRICING V2 — metaboxes + featured navy gradient on Mentorship
═══════════════════════════════════════════════════════════ */

/* Featured plan: navy gradient treatment */


/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS — enriched cards with metadata
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — all 5 patterns on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .s-vault-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .s-vault-feature { padding: 1.5rem; }
    .s-vault-row { padding: 0.75rem 1rem; min-height: 60px; }
    .s-vault-thumb { width: 42px; height: 42px; }
    .s-vault-rowtitle { font-size: 0.92rem; }
    .s-vault-rowmeta { font-size: 0.72rem; }
}


/* ═══════════════ Pricing v2 — restored proof + save pill ═══════════════ */


/* Pricing. 2-column grid, equal width, centered, compact */


/* ═══════════════ Blog featured — SVG hero (no photo) ═══════════════ */


/* ═══════════════ Pricing — fix Elite Choice badge clipping ═══════════════ */


/* ═══════════════ ABOUT PAGE — Story section editorial layout ═══════════════ */
.about-story-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    position: relative;
}
.about-story-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 50% 40% at 50% 30%, rgba(59,130,246,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.about-story-section > .container { position: relative; z-index: 2; }

.about-story-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}
.about-story-header .s-section-title { margin-top: 0.75rem; }
.about-story-tagline {
    color: var(--slate);
    font-size: 1rem;
    line-height: 1.55;
    margin: 1rem auto 0;
    max-width: 560px;
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

.about-story-chapter {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
}
.about-story-chapter:hover {
    border-color: var(--blue-300);
    box-shadow: 0 20px 50px rgba(59,130,246,0.1);
    transform: translateY(-3px);
}

.about-story-num {
    font-family: var(--s-font-display);
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--blue-100);
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 0.75rem;
}
.about-story-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--blue-600);
    margin-bottom: 0.5rem;
}
.about-story-title {
    font-family: var(--s-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #0f172a;
    line-height: 1.15;
    margin: 0 0 1rem;
}
.about-story-chapter p {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.about-story-chapter strong { color: #0f172a; font-weight: 800; }

/* Featured (middle) chapter — navy gradient treatment */
.about-story-featured {
    background: linear-gradient(135deg, var(--navy) 0%, #1e3a8a 100%);
    border-color: transparent;
    color: white;
    overflow: hidden;
}
.about-story-featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(59,130,246,0.4) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 0% 100%, rgba(99,102,241,0.18) 0%, transparent 65%);
    pointer-events: none;
    border-radius: 24px;
}
.about-story-featured > * { position: relative; z-index: 2; }
.about-story-featured .about-story-num { color: rgba(147,197,253,0.4); }
.about-story-featured .about-story-label { color: #93c5fd; }
.about-story-featured .about-story-title { color: white; }
.about-story-featured p { color: rgba(255,255,255,0.78); }
.about-story-featured strong { color: white; }

.about-story-highlight {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    backdrop-filter: blur(10px);
}
.about-highlight-num {
    font-family: var(--s-font-display);
    font-size: 1.6rem;
    font-weight: 900;
    color: white;
    letter-spacing: -1px;
}
.about-highlight-lbl {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #93c5fd;
    text-align: right;
}

@media (max-width: 1024px) {
    .about-story-grid { grid-template-columns: 1fr; gap: 1rem; }
    .about-story-featured { order: -1; } /* Featured first on mobile */
}
@media (max-width: 640px) {
    .about-story-section { padding: 3.5rem 0; }
    .about-story-chapter { padding: 1.5rem; }
    .about-story-num { font-size: 2rem; }
    .about-story-title { font-size: 1.2rem; }
    .about-story-highlight { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}


/* ═══════════════ Page transitions — smoother loads & navigations ═══════════════ */

/* Faster reveal transitions for snappier feel (was 1s, now 500ms) */
.reveal {
    transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Above-fold elements activated by JS on load: no animation, just appear */
.reveal-instant {
    transition: none !important;
    animation: none !important;
}

/* View Transitions API — smooth crossfade between pages on navigation (modern browsers) */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.25s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hero fade-in-up should also be quicker */
.fade-in-up {
    animation-duration: 0.6s !important;
}


/* ═══════════════ ABOUT — Stats section (rich asymmetric) ═══════════════ */
.about-stats-section {
    padding: 5rem 0;
    background: var(--navy);
    position: relative;
    overflow: hidden;
}
.about-stats-bg {
    position: absolute;
    inset: -100px 0;
    background:
        radial-gradient(ellipse 70% 60% at 30% 50%, rgba(59,130,246,0.22) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 80% 30%, rgba(16,185,129,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 90% 90%, rgba(99,102,241,0.18) 0%, transparent 65%);
    pointer-events: none;
}
.about-stats-section > .container { position: relative; z-index: 2; }

.about-stats-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}
.about-stats-title {
    font-family: var(--s-font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -1px;
    color: white;
    margin: 0.75rem 0 0.85rem;
}
.about-stats-sub {
    color: rgba(255,255,255,0.65);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 600px;
}
.s-eyebrow-light {
    color: #93c5fd;
    font-family: var(--s-font-display);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
}

/* Featured stat card */
.about-stat-feature {
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}
.about-stat-feature:hover {
    border-color: rgba(74,222,128,0.3);
    box-shadow: 0 20px 50px rgba(16,185,129,0.15);
}

.about-stat-feature-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}
.about-stat-tag {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 50px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.about-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #4ade80;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.about-stat-feature-num {
    font-family: var(--s-font-display);
    font-size: clamp(2.5rem, 4.5vw, 3.4rem);
    font-weight: 900;
    color: white;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 0.4rem;
}
.about-stat-feature-lbl {
    color: rgba(255,255,255,0.65);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.about-stat-chart {
    width: 100%;
    height: 70px;
    margin-bottom: 1.25rem;
}
.about-stat-chart svg { width: 100%; height: 100%; display: block; }

.about-stat-meta {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    margin-top: auto;
}
.about-stat-metarow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.about-stat-metarow:last-child { border-bottom: none; }
.about-stat-metarow span { color: rgba(255,255,255,0.55); }
.about-stat-metarow strong { color: white; font-family: var(--s-font-display); font-weight: 700; }
.about-stat-metarow strong.green { color: #4ade80; }

/* Compact stat cards (right column) */
.about-stats-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.about-stat-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 1.4rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    backdrop-filter: blur(10px);
    flex: 1;
    transition: all 0.3s ease;
}
.about-stat-card:hover {
    border-color: var(--blue-300);
    transform: translateX(4px);
    box-shadow: 0 12px 30px rgba(59,130,246,0.15);
}
.about-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}
.about-stat-icon.blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 6px 16px rgba(59,130,246,0.4); }
.about-stat-icon.green { background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 6px 16px rgba(16,185,129,0.4); }
.about-stat-icon.purple { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 6px 16px rgba(168,85,247,0.4); }

.about-stat-body { flex: 1; min-width: 0; }
.about-stat-num {
    font-family: var(--s-font-display);
    font-size: 1.7rem;
    font-weight: 900;
    color: white;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 4px;
}
.about-stat-lbl {
    color: white;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.about-stat-context {
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .about-stats-grid { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 640px) {
    .about-stats-section { padding: 3.5rem 0; }
    .about-stat-feature { padding: 1.5rem; }
    .about-stat-card { padding: 1.1rem 1.25rem; gap: 0.85rem; }
    .about-stat-icon { width: 40px; height: 40px; }
    .about-stat-num { font-size: 1.4rem; }
    .about-stat-feature-num { font-size: 2.2rem; }
}


/* ═══════════════════════════════════════════════════════════
   ACADEMY DASHBOARD — full curriculum interface
═══════════════════════════════════════════════════════════ */

.academy {
    background: #fafbff;
    min-height: 100vh;
    padding-top: 80px; /* nav clearance */
}

.academy-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    max-width: 1400px;
    margin: 0 auto;
    gap: 0;
    min-height: calc(100vh - 80px);
}

/* ═══════════════ Mobile menu trigger ═══════════════ */
.academy-menu-btn {
    display: none;
    position: sticky;
    top: 80px;
    z-index: 50;
    width: 100%;
    background: white;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--s-font-display);
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    font-size: 0.9rem;
}

/* ═══════════════ Sidebar ═══════════════ */
.academy-sidebar-wrap {
    background: white;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    overflow: hidden;
}

.academy-sidebar-header {
    padding: 1.5rem 1.25rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.academy-sb-eyebrow {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--blue-600);
    margin-bottom: 0.4rem;
}
.academy-sb-title {
    font-family: var(--s-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #0f172a;
    margin: 0;
}

.academy-sidebar {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0.5rem;
}

/* Progress block at top of sidebar */
.academy-sb-progress {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin: 0 0.6rem 1.25rem;
    color: white;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.academy-sb-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(59,130,246,0.4) 0%, transparent 70%);
    pointer-events: none;
}
.academy-sb-progress > * { position: relative; z-index: 2; }

.academy-sb-rank {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.academy-rank-icon {
    font-size: 1.6rem;
    line-height: 1;
}
.academy-rank-name {
    font-family: var(--s-font-display);
    font-size: 0.95rem;
    font-weight: 800;
    color: white;
    line-height: 1.1;
}
.academy-rank-xp {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
}

.academy-sb-bar {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}
.academy-sb-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #38bdf8);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Level groups */
.academy-sb-level {
    margin-bottom: 0.25rem;
}
.academy-sb-level-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}
.academy-sb-level-header:hover { background: #f1f5f9; }
.academy-sb-level.expanded .academy-sb-level-header { background: var(--blue-50); }
.academy-sb-level.current-level .academy-sb-level-header { background: var(--blue-50); }

.academy-sb-level-num {
    width: 28px;
    height: 28px;
    background: var(--blue-100);
    color: var(--blue-700);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.academy-sb-level.expanded .academy-sb-level-num,
.academy-sb-level.current-level .academy-sb-level-num {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    color: white;
    box-shadow: 0 4px 10px rgba(59,130,246,0.3);
}
.academy-sb-level-info { flex: 1; min-width: 0; }
.academy-sb-level-title {
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 0.88rem;
    color: #0f172a;
    line-height: 1.1;
}
.academy-sb-level-meta {
    font-size: 0.7rem;
    color: var(--slate);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.academy-sb-chev {
    color: var(--slate);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.academy-sb-level.expanded .academy-sb-chev { transform: rotate(90deg); }

.academy-sb-modules {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 0 0 2.5rem;
}
.academy-sb-level.expanded .academy-sb-modules {
    max-height: 600px;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}

.academy-sb-module {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: #475569;
    font-size: 0.82rem;
    transition: all 0.15s ease;
}
.academy-sb-module:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.academy-sb-module.active {
    background: var(--blue-500);
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(59,130,246,0.25);
}
.academy-sb-module.active .academy-sb-mod-status,
.academy-sb-module.active .academy-sb-mod-num { color: rgba(255,255,255,0.8); }

.academy-sb-mod-status {
    width: 16px;
    text-align: center;
    color: var(--slate);
    font-weight: 700;
    flex-shrink: 0;
}
.academy-sb-module.done .academy-sb-mod-status {
    color: #10b981;
}
.academy-sb-mod-num {
    font-weight: 700;
    color: var(--slate);
    font-family: var(--s-font-display);
    font-size: 0.78rem;
    flex-shrink: 0;
}
.academy-sb-mod-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sidebar footer CTA */
.academy-sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #f1f5f9;
}
.academy-sb-cta {
    display: block;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    color: white;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 6px 16px rgba(59,130,246,0.25);
}
.academy-sb-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59,130,246,0.4);
}
.academy-sb-cta strong {
    display: block;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: 2px;
}
.academy-sb-cta span {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
}

/* ═══════════════ Main content area ═══════════════ */
.academy-main-area {
    padding: 1.5rem 2rem 4rem;
    background: #fafbff;
    min-width: 0; /* prevent overflow */
}

/* Top bar (career progress) */
.academy-topbar {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.academy-top-bar {
    flex: 1;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
    min-width: 100px;
}
.academy-top-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue-500), #38bdf8);
    border-radius: 4px;
    transition: width 0.4s ease;
}
.academy-top-xp {
    font-family: var(--s-font-display);
    font-weight: 800;
    color: #0f172a;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ═══════════════ Module content ═══════════════ */
.academy-content {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2.5rem 3rem;
    max-width: 880px;
}

.academy-mod-bread {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--slate);
    margin-bottom: 1rem;
    font-weight: 600;
}
.academy-mod-bread svg { color: #cbd5e1; }

.academy-mod-title {
    font-family: var(--s-font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -1.5px;
    color: #0f172a;
    line-height: 1.05;
    margin: 0 0 1rem;
}

.academy-mod-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.academy-mod-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--slate);
}
.academy-mod-meta-item:last-child { font-style: italic; }

/* Article content typography */
.academy-mod-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #334155;
}
.academy-mod-content > * + * { margin-top: 1rem; }
.academy-lead {
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    color: #1e293b !important;
    font-weight: 500;
    margin-bottom: 1.5rem !important;
}
.academy-mod-content h3 {
    font-family: var(--s-font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin: 2rem 0 1rem !important;
    line-height: 1.2;
}
.academy-mod-content h4 {
    font-family: var(--s-font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 1.25rem 0 0.5rem !important;
    line-height: 1.2;
}
.academy-mod-content strong { color: #0f172a; font-weight: 700; }
.academy-mod-content a { color: var(--blue-600); font-weight: 600; }
.academy-mod-content ul, .academy-mod-content ol {
    padding-left: 1.5rem;
    margin: 1rem 0 !important;
}
.academy-mod-content ul li, .academy-mod-content ol li {
    margin-bottom: 0.6rem;
    line-height: 1.65;
}
.academy-list { list-style: none !important; padding-left: 0 !important; }
.academy-list li {
    padding-left: 1.5rem;
    position: relative;
}
.academy-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55rem;
    width: 8px; height: 8px;
    background: var(--blue-500);
    border-radius: 50%;
}
.academy-list-ordered { padding-left: 1.25rem !important; }
.academy-list-ordered li { padding-left: 0.5rem; }

/* Callouts */
.academy-callout {
    display: flex;
    gap: 1rem;
    background: var(--blue-50);
    border-left: 3px solid var(--blue-500);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin: 1.5rem 0;
}
.academy-callout.warn {
    background: rgba(251,191,36,0.1);
    border-left-color: #f59e0b;
}
.academy-callout-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1;
}
.academy-callout > div:last-child {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #334155;
}

/* Info cards */
.academy-info-card {
    background: #fafbff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin: 1rem 0;
}
.academy-info-card h4 { margin-top: 0 !important; margin-bottom: 0.5rem !important; }
.academy-info-card p { margin: 0; font-size: 0.92rem; color: #475569; }
.academy-info-card .academy-pills { margin-top: 0.75rem; }

.academy-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
}

.academy-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.academy-pills li {
    background: white;
    border: 1px solid var(--blue-200);
    color: var(--blue-700);
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 50px;
    margin-bottom: 0 !important;
}
.academy-pills li::before { display: none !important; }

/* Tables (simple grid layout) */
.academy-table {
    background: #fafbff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin: 1.25rem 0;
    overflow: hidden;
}
.academy-table > div {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
    align-items: center;
}
.academy-table > div:last-child { border-bottom: none; }
.academy-table strong { color: #0f172a; font-weight: 800; }
.academy-table span { color: #475569; font-family: var(--s-font-display); font-weight: 700; }
.academy-table em { color: var(--slate); font-style: italic; font-size: 0.85rem; }

/* Formula blocks */
.academy-formula {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin: 1.25rem 0;
    box-shadow: 0 8px 20px rgba(15,23,42,0.15);
}
.formula-line {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.academy-mono {
    font-family: 'Courier New', monospace;
    background: #f1f5f9;
    padding: 0.85rem 1.1rem;
    border-radius: 8px;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
}

/* ═══════════════ Quiz ═══════════════ */
.academy-quiz {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px dashed #e2e8f0;
}
.academy-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.academy-quiz-header h3 {
    font-family: var(--s-font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}
.academy-quiz-count {
    background: var(--blue-50);
    color: var(--blue-700);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.academy-quiz-q {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    background: #fafbff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
}
.academy-quiz-num {
    width: 28px;
    height: 28px;
    background: var(--blue-500);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.academy-quiz-body { flex: 1; min-width: 0; }
.academy-quiz-text {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}
.academy-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.academy-quiz-opt {
    background: white;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.4;
    transition: all 0.15s ease;
}
.academy-quiz-opt:hover:not(:disabled) {
    border-color: var(--blue-400);
    background: var(--blue-50);
}
.academy-quiz-opt.correct {
    background: rgba(16,185,129,0.1);
    border-color: #10b981;
    color: #047857;
    font-weight: 700;
}
.academy-quiz-opt.wrong {
    background: rgba(239,68,68,0.08);
    border-color: #ef4444;
    color: #b91c1c;
}
.academy-quiz-opt:disabled { cursor: default; }

.academy-quiz-feedback {
    margin-top: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    display: none;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.5;
}
.academy-quiz-feedback.shown { display: flex; }
.academy-quiz-feedback.correct { background: rgba(16,185,129,0.08); color: #047857; }
.academy-quiz-feedback.wrong { background: rgba(239,68,68,0.06); color: #b91c1c; }
.academy-quiz-fb-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.academy-quiz-fb-icon.right { background: #10b981; }
.academy-quiz-fb-icon.wrong { background: #ef4444; }

/* ═══════════════ Module footer (complete + next) ═══════════════ */
.academy-mod-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.academy-complete-btn {
    background: linear-gradient(135deg, #10b981, #047857);
    color: white;
    border: none;
    padding: 0.9rem 1.5rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(16,185,129,0.3);
    transition: all 0.2s ease;
}
.academy-complete-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(16,185,129,0.45);
}
.academy-complete-btn.done,
.academy-complete-btn:disabled {
    background: #cbd5e1;
    box-shadow: none;
    cursor: default;
    color: white;
}

.academy-next-btn {
    background: white;
    color: var(--blue-600);
    border: 1.5px solid var(--blue-300);
    padding: 0.9rem 1.5rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}
.academy-next-btn:hover {
    background: var(--blue-500);
    color: white;
    border-color: var(--blue-500);
    box-shadow: 0 6px 16px rgba(59,130,246,0.4);
}

/* XP burst */
.academy-xp-burst {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #10b981, #047857);
    color: white;
    padding: 1.25rem 2rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 900;
    font-size: 1.5rem;
    z-index: 999;
    box-shadow: 0 20px 50px rgba(16,185,129,0.5);
    animation: xpBurst 1.5s ease-out forwards;
    pointer-events: none;
}
@keyframes xpBurst {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    80% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -200%) scale(0.9); opacity: 0; }
}

/* ═══════════════ Responsive ═══════════════ */
@media (max-width: 1024px) {
    .academy-shell {
        grid-template-columns: 1fr;
    }
    .academy-menu-btn {
        display: flex;
    }
    .academy-sidebar-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 0 0 40px rgba(0,0,0,0.15);
        padding-top: 60px;
    }
    .academy-sidebar-wrap.open {
        transform: translateX(0);
    }
    .academy-main-area {
        padding: 1rem 1.25rem 3rem;
    }
}
@media (max-width: 640px) {
    .academy-content { padding: 1.5rem 1.25rem; border-radius: 16px; }
    .academy-mod-content { font-size: 0.95rem; }
    .academy-grid-2 { grid-template-columns: 1fr; }
    .academy-table > div { grid-template-columns: 1fr; padding: 0.75rem 1rem; }
    .academy-mod-footer { flex-direction: column; }
    .academy-next-btn { margin-left: 0; width: 100%; text-align: center; }
    .academy-complete-btn { width: 100%; }
    .academy-topbar { padding: 0.85rem 1rem; }
}


/* ═══════════════════════════════════════════════════════════
   ACADEMY DASHBOARD UPGRADES (v=6.8)
═══════════════════════════════════════════════════════════ */

/* Improved top bar with rank journey */
.academy-topbar {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%) !important;
    color: white !important;
    padding: 1.25rem 1.5rem !important;
    display: block !important;
    border: 1px solid #1e293b !important;
    position: relative;
    overflow: hidden;
}
.academy-topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 100% at 100% 0%, rgba(59,130,246,0.3) 0%, transparent 60%);
    pointer-events: none;
}
.academy-topbar > * { position: relative; z-index: 2; }

.academy-top-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}
.academy-top-info { flex: 1; min-width: 0; }
.academy-top-info-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
    flex-wrap: wrap;
}
.academy-top-rank-badge {
    background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(56,189,248,0.2));
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 800;
    border: 1px solid rgba(59,130,246,0.4);
}
.academy-top-streak-badge {
    background: rgba(251,146,60,0.15);
    color: #fbbf24;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid rgba(251,146,60,0.3);
}
.academy-top-progress-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.academy-topbar .academy-top-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.1) !important;
}
.academy-topbar .academy-top-bar-fill {
    background: linear-gradient(90deg, #3b82f6, #38bdf8) !important;
    box-shadow: 0 0 12px rgba(59,130,246,0.6);
}
.academy-topbar .academy-top-xp {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Rank journey path */
.academy-rank-journey {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.academy-rank-step {
    text-align: center;
    padding: 0.5rem 0.25rem;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s ease;
    opacity: 0.5;
}
.academy-rank-step.reached {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.3);
    opacity: 1;
}
.academy-rank-step.current {
    background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(56,189,248,0.2)) !important;
    border-color: #3b82f6 !important;
    opacity: 1 !important;
    box-shadow: 0 4px 16px rgba(59,130,246,0.3);
    transform: scale(1.05);
}
.academy-rank-step.next {
    border-color: rgba(255,255,255,0.2);
    opacity: 0.8;
}
.academy-rank-step-icon {
    font-size: 1.2rem;
    line-height: 1;
    margin-bottom: 4px;
}
.academy-rank-step-name {
    font-size: 0.68rem;
    font-weight: 800;
    color: white;
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.academy-rank-step-min {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

/* ═══════════════ Welcome state ═══════════════ */
.academy-welcome {
    padding: 0;
}
.academy-welcome-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #1e40af 100%);
    color: white;
    padding: 3rem 2.5rem;
    border-radius: 24px;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.academy-welcome-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(56,189,248,0.3) 0%, transparent 70%),
                radial-gradient(ellipse 60% 80% at 0% 100%, rgba(59,130,246,0.25) 0%, transparent 70%);
    pointer-events: none;
}
.academy-welcome-hero > * { position: relative; z-index: 2; }
.academy-welcome-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #38bdf8;
    margin-bottom: 1rem;
}
.academy-welcome-title {
    font-family: var(--s-font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin: 0 0 1rem;
    color: white;
}
.academy-welcome-title .s-section-italic {
    background: linear-gradient(135deg, #60a5fa, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.academy-welcome-sub {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    max-width: 580px;
    margin: 0 0 1.75rem;
}
.academy-welcome-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.academy-welcome-cta {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(59,130,246,0.4);
    transition: all 0.2s ease;
}
.academy-welcome-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(59,130,246,0.55);
}
.academy-welcome-progress {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Welcome stats */
.academy-welcome-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 2.5rem;
}
.academy-welcome-stat {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.2s ease;
}
.academy-welcome-stat:hover {
    border-color: var(--blue-300);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(15,23,42,0.05);
}
.academy-welcome-stat-num {
    font-family: var(--s-font-display);
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 0.4rem;
}
.academy-welcome-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Roadmap */
.academy-welcome-roadmap-title {
    font-family: var(--s-font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1rem;
    letter-spacing: -0.5px;
}
.academy-welcome-roadmap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
.academy-roadmap-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.academy-roadmap-card:hover {
    border-color: var(--blue-400);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}
.academy-roadmap-num {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--s-font-display);
    font-size: 1.1rem;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}
.academy-roadmap-info { flex: 1; min-width: 0; }
.academy-roadmap-card .academy-roadmap-title {
    font-family: var(--s-font-display);
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 2px;
}
.academy-roadmap-sub {
    font-size: 0.8rem;
    color: var(--slate);
    line-height: 1.3;
    margin-bottom: 0.65rem;
}
.academy-roadmap-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.academy-roadmap-meta span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--blue-700);
    flex-shrink: 0;
}
.academy-roadmap-bar {
    flex: 1;
    height: 5px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}
.academy-roadmap-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue-500), #38bdf8);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* SVG visual feature in modules */
.academy-svg-feature {
    background: linear-gradient(135deg, #fafbff 0%, #eff6ff 100%);
    border: 1px solid #dbeafe;
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1rem;
    margin: 0 0 1.5rem;
}

/* ===== Academy welcome hero — interactive enhancements (v11.2) ===== */
.academy-welcome-chart {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 60%;
    z-index: 1;
    opacity: 0.85;
    pointer-events: none;
}
.academy-welcome-chart-line {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: academyChartDraw 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}
.academy-welcome-chart-area {
    opacity: 0;
    animation: academyChartFade 1.6s ease 1.4s forwards;
}
@keyframes academyChartDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes academyChartFade {
    to { opacity: 1; }
}

.academy-welcome-hero-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 2.25rem;
    align-items: center;
    position: relative;
    z-index: 2;
}
.academy-welcome-hero-text { max-width: 560px; }

.academy-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38bdf8;
    margin-right: 0.5rem;
    box-shadow: 0 0 0 0 rgba(56,189,248,0.7);
    animation: academyEyebrowPulse 2.4s ease infinite;
    transform: translateY(-1px);
}
@keyframes academyEyebrowPulse {
    0% { box-shadow: 0 0 0 0 rgba(56,189,248,0.5); }
    70% { box-shadow: 0 0 0 8px rgba(56,189,248,0); }
    100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}

.academy-welcome-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.academy-welcome-cta svg { transition: transform 0.25s ease; }
.academy-welcome-cta:hover svg { transform: translateX(4px); }

.academy-welcome-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.academy-progress-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
    animation: academyProgressPulse 2s ease infinite;
}
@keyframes academyProgressPulse {
    0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
    70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* Right-side: progress ring + up-next */
.academy-welcome-hero-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}
.academy-progress-ring {
    position: relative;
    align-self: center;
    width: 120px;
    height: 120px;
}
.academy-progress-ring svg { display: block; }
.academy-progress-ring-fill {
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.academy-progress-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    line-height: 1;
}
.academy-progress-ring-num {
    font-family: var(--s-font-display);
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: -1px;
}
.academy-progress-ring-pct {
    font-family: var(--s-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    margin-left: 1px;
}
.academy-progress-ring-label {
    margin-top: 0.35rem;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.6);
}

.academy-up-next {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
}
.academy-up-next:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(96,165,250,0.45);
    transform: translateY(-2px);
}
.academy-up-next-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #93c5fd;
}
.academy-up-next-title {
    font-family: var(--s-font-display);
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: -0.3px;
}
.academy-up-next-meta {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
}

/* Roadmap card states */
.academy-roadmap-card {
    position: relative;
    overflow: hidden;
}
.academy-roadmap-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59,130,246,0.04), rgba(99,102,241,0.04));
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.academy-roadmap-card:hover::before { opacity: 1; }
.academy-roadmap-card.is-done .academy-roadmap-num {
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
.academy-roadmap-card.is-progress .academy-roadmap-num {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}
.academy-roadmap-arrow {
    align-self: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--blue-700);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    opacity: 0;
    transform: translateX(-6px);
}
.academy-roadmap-card:hover .academy-roadmap-arrow {
    opacity: 1;
    transform: translateX(0);
    background: var(--blue-500);
    color: white;
}

/* ===== Academy final CTA (below elite-compare) ===== */

/* Right side stat stack */

/* Mobile responsive for new elements */
@media (max-width: 1024px) {
    .academy-rank-journey { grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .academy-rank-step-name { font-size: 0.6rem; }
    .academy-welcome-hero { padding: 2rem 1.5rem; border-radius: 18px; }
    .academy-welcome-hero-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .academy-welcome-hero-side { flex-direction: row; align-items: stretch; gap: 1rem; }
    .academy-progress-ring { flex-shrink: 0; }
    .academy-up-next { flex: 1; }
    .academy-welcome-stats { grid-template-columns: repeat(2, 1fr); }
    .academy-welcome-roadmap { grid-template-columns: 1fr; }
    .academy-rank-step-min { display: none; }
}
@media (max-width: 640px) {
    .academy-rank-journey { grid-template-columns: repeat(7, 1fr); gap: 3px; }
    .academy-rank-step { padding: 0.4rem 0.15rem; }
    .academy-rank-step-icon { font-size: 1rem; }
    .academy-rank-step-name { font-size: 0.55rem; }
    .academy-welcome-stats { grid-template-columns: repeat(2, 1fr); }
    .academy-welcome-hero-side { flex-direction: column; }
    .academy-progress-ring { align-self: center; }
}


/* ═══════════════════════════════════════════════════════════
   AFFILIATES PAGE — full redesign (v=6.8)
═══════════════════════════════════════════════════════════ */

/* Hero (matches site dark hero pattern) */
.s-hero-affiliates {
    background: var(--navy);
    color: white;
    padding: 8rem 0 5rem;
    position: relative;
    overflow: hidden;
}
/* Match index hero mesh: subtle blue radial glows on dark navy */
.s-hero-affiliates .s-hero-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 80% 60% at 60% 40%, rgba(99,130,246,0.55) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 20% 70%, rgba(29,78,216,0.4) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(147,197,253,0.3) 0%, transparent 60%);
}
.s-hero-affiliates .s-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
}
.s-hero-affiliates .s-hero-glow-1 {
    top: -10%;
    right: -5%;
    width: 600px;
    height: 600px;
    background: rgba(14,165,233,0.18);
}
.s-hero-affiliates .s-hero-glow-2 {
    bottom: -20%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: rgba(59,130,246,0.18);
}
.s-hero-affiliates .s-hero-container {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.s-hero-affiliates .s-hero-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.45rem 1.1rem;
    border-radius: 50px;
    margin-bottom: 1.75rem;
    box-shadow: none;
}
.s-hero-affiliates .s-hero-title {
    font-family: var(--s-font-display);
    font-size: clamp(3rem, 5.5vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
    color: white;
    margin: 0 0 1.5rem;
}
.s-hero-affiliates .s-section-italic {
    font-family: var(--s-font-serif);
    font-style: italic;
    font-weight: 500;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 40%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.s-hero-affiliates .s-hero-sub {
    font-size: 1.15rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    max-width: 680px;
    margin: 0 auto 2rem;
}
.s-hero-affiliates .s-hero-cta-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3.5rem;
}
.s-hero-affiliates .s-hero-cta-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 1rem 2.25rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.45);
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.1);
}
.s-hero-affiliates .s-hero-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(59, 130, 246, 0.6);
}
.s-hero-affiliates .s-hero-cta-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    padding: 1rem 2.25rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
}
.s-hero-affiliates .s-hero-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}
.s-hero-affiliates .s-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1.25rem 2rem;
    backdrop-filter: blur(20px);
}
.s-hero-affiliates .s-hero-stat {
    text-align: center;
    padding: 0 1.5rem;
}
.s-hero-affiliates .s-hero-stat-num {
    font-family: var(--s-font-display);
    font-size: 1.6rem;
    font-weight: 900;
    background: linear-gradient(135deg, #60a5fa, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 0.4rem;
    letter-spacing: -0.5px;
}
.s-hero-affiliates .s-hero-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.s-hero-affiliates .s-hero-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.12);
}

/* Affiliates vault grid (override default columns to give featured more room) */
.s-affiliates-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}
.s-affiliates-grid .s-vault-feature {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    color: white;
    padding: 2.5rem 2.25rem;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
}
.s-affiliates-grid .s-vault-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 100% at 100% 0%, rgba(59,130,246,0.35) 0%, transparent 60%);
    pointer-events: none;
}
.s-affiliates-grid .s-vault-feature > * { position: relative; z-index: 2; }
.s-affiliates-grid .s-vault-pill {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    z-index: 3;
}
.s-affiliates-grid .s-vault-eyebrow {
    color: #38bdf8;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: 1rem;
}
.s-affiliates-grid .s-vault-title {
    font-family: var(--s-font-display);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.5px;
    margin: 0 0 1rem;
    color: white;
}
.s-affiliates-grid .s-vault-sub {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
    margin: 0 0 1.75rem;
    font-size: 0.95rem;
}
.s-affiliates-grid .s-vault-metabox {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.75rem;
}
.s-affiliates-grid .s-vault-metarow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.s-affiliates-grid .s-vault-metarow:last-child { border-bottom: none; }
.s-affiliates-grid .s-vault-metalabel {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 600;
}
.s-affiliates-grid .s-vault-metaval {
    color: white;
    font-size: 0.92rem;
    font-weight: 800;
    font-family: var(--s-font-display);
}
.s-affiliates-grid .s-vault-metaval.green { color: #10b981; }
.s-affiliates-grid .s-vault-cta {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white !important;
    padding: 0.85rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.4);
    transition: all 0.2s ease;
}
.s-affiliates-grid .s-vault-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.55);
}

.s-affiliates-grid .s-vault-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.s-affiliates-grid .s-vault-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    transition: all 0.2s ease;
    flex: 1;
}
.s-affiliates-grid .s-vault-row:hover {
    border-color: var(--blue-300);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}
.s-affiliates-grid .s-vault-thumb {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.s-affiliates-grid .s-vault-body { flex: 1; min-width: 0; }
.s-affiliates-grid .s-vault-rowtitle {
    font-family: var(--s-font-display);
    font-weight: 800;
    color: #0f172a;
    font-size: 1rem;
    margin-bottom: 3px;
}
.s-affiliates-grid .s-vault-rowmeta {
    color: var(--slate);
    font-size: 0.82rem;
}
.s-affiliates-grid .s-vault-arrow {
    color: var(--slate);
    flex-shrink: 0;
}

/* Steps (How It Works) */
.s-affiliates-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 3.5rem;
}
.s-affiliates-step {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem 1.75rem;
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
    position: relative;
}
.s-affiliates-step:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-4px);
}
.s-affiliates-step-num {
    font-family: var(--s-font-display);
    font-size: 0.78rem;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    background: rgba(56, 189, 248, 0.1);
    display: inline-block;
    padding: 4px 10px;
    border-radius: 50px;
    border: 1px solid rgba(56, 189, 248, 0.25);
}
.s-affiliates-step-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(56, 189, 248, 0.1));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.s-affiliates-step-title {
    font-family: var(--s-font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: white;
    margin: 0 0 0.6rem;
    line-height: 1.2;
    letter-spacing: -0.4px;
}
.s-affiliates-step-text {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.55;
    font-size: 0.92rem;
    margin: 0 0 1rem;
}
.s-affiliates-step-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.s-step-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    padding: 4px 11px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.s-step-pill.green {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

/* Personas (Who this is for) */
.s-affiliates-personas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
}
.s-affiliates-persona {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
    transition: all 0.2s ease;
}
.s-affiliates-persona:hover {
    border-color: var(--blue-300);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}
.s-persona-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
    color: var(--blue-600);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.s-affiliates-persona h3,
.s-affiliates-persona h4 {
    font-family: var(--s-font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.3px;
}
.s-affiliates-persona p {
    color: var(--slate);
    line-height: 1.55;
    font-size: 0.88rem;
    margin: 0;
}

/* FAQ on affiliates page (uses existing s-faq pattern) */
.s-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 2.5rem;
}
.s-faq-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    transition: all 0.2s ease;
}
.s-faq-item[open] {
    border-color: var(--blue-300);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.s-faq-item summary {
    cursor: pointer;
    padding: 1.1rem 1.4rem;
    font-family: var(--s-font-display);
    font-weight: 800;
    color: #0f172a;
    font-size: 1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.s-faq-item summary::-webkit-details-marker { display: none; }
.s-faq-item summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--blue-600);
    font-weight: 400;
    transition: transform 0.2s ease;
}
.s-faq-item[open] summary::after {
    content: '−';
}
.s-faq-content {
    padding: 0 1.4rem 1.25rem;
    color: var(--slate);
    line-height: 1.65;
    font-size: 0.95rem;
}

/* Application form */
.s-affiliates-form-wrap {
    max-width: 720px;
    margin: 3rem auto 0;
    background: white;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.s-affiliates-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.s-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.s-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.s-form-field label {
    font-family: var(--s-font-display);
    font-weight: 700;
    color: #0f172a;
    font-size: 0.85rem;
}
.s-form-optional {
    color: var(--slate);
    font-weight: 500;
    font-size: 0.78rem;
    font-style: italic;
}
.s-form-field input,
.s-form-field select,
.s-form-field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    font-family: inherit;
    font-size: 0.95rem;
    color: #0f172a;
    background: #fafbff;
    transition: all 0.15s ease;
}
.s-form-field input:focus,
.s-form-field select:focus,
.s-form-field textarea:focus {
    outline: none;
    border-color: var(--blue-500);
    background: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}
.s-form-field textarea { resize: vertical; min-height: 80px; }
.s-affiliates-submit {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    padding: 1.05rem 2rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(59, 130, 246, 0.4);
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}
.s-affiliates-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.55);
}
.s-affiliates-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.s-affiliates-form-msg {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.95rem;
}

/* Mobile responsive */
@media (max-width: 1024px) {
    .s-affiliates-grid { grid-template-columns: 1fr; }
    .s-affiliates-steps { grid-template-columns: 1fr; }
    .s-affiliates-personas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .s-hero-affiliates { padding: 6rem 0 3rem; }
    .s-hero-affiliates .s-hero-stats {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        width: 100%;
    }
    .s-hero-affiliates .s-hero-stat { padding: 0; }
    .s-hero-affiliates .s-hero-stat-divider { width: 100%; height: 1px; }
    .s-hero-affiliates .s-hero-cta-row { flex-direction: column; align-items: stretch; }
    .s-hero-affiliates .s-hero-cta-primary,
    .s-hero-affiliates .s-hero-cta-secondary { text-align: center; }
    .s-affiliates-personas { grid-template-columns: 1fr; }
    .s-affiliates-form-wrap { padding: 1.5rem; }
    .s-form-row { grid-template-columns: 1fr; }
    .s-affiliates-grid .s-vault-feature { padding: 2rem 1.5rem; }
    .s-affiliates-grid .s-vault-title { font-size: 2rem; }
}


/* Dark section variant for affiliates (matches site pattern) */
.s-section-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    color: white;
    position: relative;
    overflow: hidden;
}
.s-section-dark::before {
    content: '';
    position: absolute;
    inset: -100px 0;
    background: radial-gradient(ellipse 60% 80% at 80% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 60%),
                radial-gradient(ellipse 60% 80% at 20% 100%, rgba(59, 130, 246, 0.2) 0%, transparent 60%);
    pointer-events: none;
}
.s-section-dark > .container { position: relative; z-index: 2; }
.s-section-bg-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 70% at 100% 50%, rgba(59,130,246,0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.s-section-light {
    background: white;
    position: relative;
}

/* Centered section header (light variant) */
.s-section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.s-section-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--blue-600);
    margin-bottom: 0.85rem;
}
.s-section-title {
    font-family: var(--s-font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -1.2px;
    line-height: 1.1;
    color: #0f172a;
    margin: 0 0 1rem;
}
.s-section-title .s-section-italic {
    font-family: inherit;
    font-style: normal;
    font-weight: 800;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.s-section-sub {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--slate);
    margin: 0 auto;
    max-width: 620px;
}

/* Dark variants for section header */
.s-section-header-dark { color: white; }
.s-section-eyebrow-dark {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 0.4rem 1rem;
    border-radius: 50px;
}
.s-section-title-dark {
    color: white !important;
}
.s-section-title-dark .s-section-italic-light {
    font-family: inherit;
    font-style: normal;
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.s-section-sub-dark {
    color: rgba(255, 255, 255, 0.75) !important;
}


/* ═══════════════════════════════════════════════════════════
   ACADEMY CERTIFICATE (v=7.0)
═══════════════════════════════════════════════════════════ */

/* Sidebar certificate entry */
.academy-sb-cert-wrap {
    padding: 0.75rem 0.5rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}
.academy-sb-cert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    background: rgba(241, 245, 249, 0.6);
    border: 1px solid #e2e8f0;
}
.academy-sb-cert:hover { background: white; border-color: var(--blue-300); transform: translateY(-1px); }
.academy-sb-cert.locked { opacity: 0.85; }
.academy-sb-cert.unlocked {
    background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.08));
    border-color: rgba(251,191,36,0.4);
    box-shadow: 0 4px 14px rgba(251,191,36,0.15);
}
.academy-sb-cert.unlocked:hover {
    background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.12));
    border-color: rgba(251,191,36,0.6);
}
.academy-sb-cert.active {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700)) !important;
    border-color: var(--blue-500) !important;
    color: white !important;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.3);
}
.academy-sb-cert.active .academy-sb-cert-title,
.academy-sb-cert.active .academy-sb-cert-meta { color: white !important; }
.academy-sb-cert.active .academy-sb-cert-icon { color: white !important; }

.academy-sb-cert-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slate);
}
.academy-sb-cert.unlocked .academy-sb-cert-icon { color: #d97706; }
.academy-sb-cert-body { flex: 1; min-width: 0; }
.academy-sb-cert-title {
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.88rem;
    color: #0f172a;
    line-height: 1.1;
}
.academy-sb-cert-meta {
    font-size: 0.7rem;
    color: var(--slate);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.academy-sb-cert.unlocked .academy-sb-cert-meta { color: #d97706; font-weight: 700; }

/* Certificate locked state */
.academy-cert-locked {
    text-align: center;
    padding: 2rem 1rem;
}
.academy-cert-lock-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.academy-cert-lock-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--slate);
    background: #f1f5f9;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
}
.academy-cert-lock-title {
    font-family: var(--s-font-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -1px;
    color: #0f172a;
    margin: 0 0 1rem;
}
.academy-cert-lock-sub {
    color: var(--slate);
    line-height: 1.55;
    max-width: 520px;
    margin: 0 auto 2rem;
    font-size: 1rem;
}

.academy-cert-progress {
    max-width: 480px;
    margin: 0 auto 2.5rem;
}
.academy-cert-progress-bar {
    height: 10px;
    background: #f1f5f9;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.academy-cert-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue-500), #38bdf8);
    border-radius: 5px;
    transition: width 0.4s ease;
}
.academy-cert-progress-text {
    color: var(--slate);
    font-size: 0.95rem;
}
.academy-cert-progress-text strong { color: var(--blue-700); font-family: var(--s-font-display); font-size: 1.1rem; }

.academy-cert-preview-blur {
    max-width: 700px;
    margin: 0 auto 2rem;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    filter: blur(6px) saturate(0.7);
    opacity: 0.55;
    pointer-events: none;
    border: 1px solid #e2e8f0;
}
.academy-cert-preview-blur::after {
    content: '🔒';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    z-index: 2;
    filter: none;
}
.academy-cert-preview-blur svg { width: 100%; height: auto; display: block; }

.academy-cert-resume-btn {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(59, 130, 246, 0.4);
    transition: all 0.2s ease;
}
.academy-cert-resume-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.55);
}

/* Certificate unlocked state */
.academy-cert-unlocked {
    padding: 0.5rem 0;
}
.academy-cert-celebration {
    text-align: center;
    margin-bottom: 2rem;
}
.academy-cert-celebration-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
}
.academy-cert-celebration-title {
    font-family: var(--s-font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1.2px;
    color: #0f172a;
    margin: 0 0 0.75rem;
}
.academy-cert-celebration-sub {
    color: var(--slate);
    line-height: 1.55;
    max-width: 560px;
    margin: 0 auto;
    font-size: 1rem;
}

.academy-cert-name-input {
    max-width: 520px;
    margin: 0 auto 2rem;
    text-align: center;
}
.academy-cert-name-input label {
    display: block;
    font-family: var(--s-font-display);
    font-weight: 700;
    color: #0f172a;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.academy-cert-name-input input {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    font-family: inherit;
    font-size: 1rem;
    color: #0f172a;
    background: #fafbff;
    text-align: center;
    transition: all 0.15s ease;
}
.academy-cert-name-input input:focus {
    outline: none;
    border-color: var(--blue-500);
    background: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.academy-cert-preview {
    max-width: 760px;
    margin: 0 auto 2rem;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(251, 191, 36, 0.2);
}
.academy-cert-preview svg {
    width: 100%;
    height: auto;
    display: block;
}

.academy-cert-actions {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.academy-cert-download-btn {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    border: none;
    padding: 0.95rem 1.75rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 22px rgba(251, 191, 36, 0.4);
    transition: all 0.2s ease;
}
.academy-cert-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(251, 191, 36, 0.55);
}
.academy-cert-share-btn {
    background: white;
    color: #0f172a;
    border: 1.5px solid #e2e8f0;
    padding: 0.95rem 1.75rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.academy-cert-share-btn:hover {
    border-color: var(--blue-400);
    background: var(--blue-50);
}

/* Final completion burst override */
.academy-xp-burst.academy-xp-burst-final {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    font-size: 1.4rem;
    line-height: 1.3;
    text-align: center;
    padding: 1.75rem 2.5rem;
    box-shadow: 0 25px 60px rgba(251, 191, 36, 0.6);
    animation: xpBurstFinal 3.5s ease-out forwards;
}
@keyframes xpBurstFinal {
    0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    25% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    85% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -100%) scale(0.95); opacity: 0; }
}

/* Mobile responsive certificate */
@media (max-width: 640px) {
    .academy-cert-actions { flex-direction: column; }
    .academy-cert-download-btn,
    .academy-cert-share-btn { width: 100%; justify-content: center; }
    .academy-cert-preview { border-radius: 12px; }
}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE: ACADEMY PROMO SECTION (v=7.1)
═══════════════════════════════════════════════════════════ */

/* Right-side certificate preview */

/* 4-stat strip below */

/* Mobile responsive */


/* ═══════════════════════════════════════════════════════════
   FINAL EXAM (v=7.2)
═══════════════════════════════════════════════════════════ */

/* Exam intro page */
.academy-exam-intro {
    padding: 1rem 0;
}
.academy-exam-hero {
    text-align: center;
    padding: 2rem 1rem 2.5rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    color: white;
    border-radius: 22px;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.academy-exam-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(251,191,36,0.15) 0%, transparent 60%);
    pointer-events: none;
}
.academy-exam-hero > * { position: relative; z-index: 2; }
.academy-exam-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.15));
    color: #fbbf24;
    padding: 5px 14px;
    border-radius: 50px;
    border: 1px solid rgba(251,191,36,0.3);
    margin-bottom: 1rem;
}
.academy-exam-title {
    font-family: var(--s-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 1.1;
    color: white;
    margin: 0 0 1rem;
}
.academy-exam-sub-large {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.55;
    max-width: 540px;
    margin: 0 auto;
}

.academy-exam-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0 auto 1.75rem;
}
.academy-exam-rule {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.academy-exam-rule-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
    color: var(--blue-600);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.academy-exam-rule-body { flex: 1; min-width: 0; }
.academy-exam-rule-title {
    font-family: var(--s-font-display);
    font-weight: 800;
    color: #0f172a;
    font-size: 1rem;
    margin-bottom: 2px;
}
.academy-exam-rule-meta {
    color: var(--slate);
    font-size: 0.82rem;
    line-height: 1.4;
}

.academy-exam-warn {
    background: linear-gradient(135deg, rgba(251,191,36,0.08), rgba(245,158,11,0.04));
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin: 0 auto 1.75rem;
    color: #78350f;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
}

.academy-exam-stats-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.academy-exam-stat-block {
    background: #fafbff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    text-align: center;
    min-width: 140px;
}
.academy-exam-stat-num {
    font-family: var(--s-font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 4px;
}
.academy-exam-stat-lbl {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.academy-exam-start-btn {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    border: none;
    padding: 1.1rem 2rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(251,191,36,0.45);
    transition: all 0.2s ease;
}
.academy-exam-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(251,191,36,0.6);
}
.academy-exam-warn-text {
    text-align: center;
    color: var(--slate);
    font-size: 0.85rem;
    margin: 0;
}

.academy-exam-cooldown {
    background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(220,38,38,0.04));
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 14px;
    padding: 1.25rem;
    text-align: center;
    color: #b91c1c;
    margin: 0 auto;
    max-width: 480px;
}

/* Exam locked state (modules incomplete) */
.academy-exam-locked,
.academy-exam-passed {
    text-align: center;
    padding: 2rem 1rem;
}
.academy-exam-lock-icon,
.academy-exam-passed-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.academy-exam-passed-icon {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(5,150,105,0.1));
    color: #047857;
}

/* Exam question screen */
.academy-exam-question-shell {
    padding: 0;
}
.academy-exam-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.academy-exam-bar-info {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}
.academy-exam-bar-progress {
    color: var(--slate);
    font-size: 0.9rem;
}
.academy-exam-bar-progress strong {
    color: #0f172a;
    font-family: var(--s-font-display);
    font-size: 1.05rem;
    font-weight: 800;
}
.academy-exam-bar-level {
    background: var(--blue-50);
    color: var(--blue-700);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.academy-exam-bar-timer {
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.academy-exam-bar-timer.warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    animation: pulseTimer 1.5s infinite;
}
.academy-exam-bar-timer.critical {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    animation: pulseTimer 0.8s infinite;
}
@keyframes pulseTimer {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.academy-exam-bar-progressbar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 2rem;
}
.academy-exam-bar-progressbar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue-500), #38bdf8);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.academy-exam-q-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 2rem 2.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
.academy-exam-q-text {
    font-family: var(--s-font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 1.75rem;
    letter-spacing: -0.4px;
}
.academy-exam-q-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.academy-exam-q-opt {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fafbff;
    border: 1.5px solid #e2e8f0;
    color: #0f172a;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: all 0.15s ease;
    width: 100%;
}
.academy-exam-q-opt:hover {
    border-color: var(--blue-400);
    background: var(--blue-50);
    transform: translateY(-1px);
}
.academy-exam-q-letter {
    width: 32px;
    height: 32px;
    background: white;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.9rem;
    color: #475569;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.academy-exam-q-opt:hover .academy-exam-q-letter {
    background: var(--blue-500);
    color: white;
    border-color: var(--blue-500);
}
.academy-exam-q-text-opt {
    flex: 1;
}

.academy-exam-q-warn {
    text-align: center;
    color: var(--slate);
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 100%;
    margin-top: 0.75rem;
}

/* Exam result screen */
.academy-exam-result {
    padding: 0;
}
.academy-exam-result-hero {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 22px;
    margin-bottom: 2rem;
    color: white;
}
.academy-exam-result.passed .academy-exam-result-hero {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
}
.academy-exam-result.failed .academy-exam-result-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
}
.academy-exam-result-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.25rem;
    background: rgba(255,255,255,0.1);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.academy-exam-result.passed .academy-exam-result-icon {
    background: rgba(255,255,255,0.15);
    box-shadow: 0 0 60px rgba(16,185,129,0.4);
}
.academy-exam-result-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: rgba(255,255,255,0.15);
    color: white;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 1rem;
    border: 1px solid rgba(255,255,255,0.2);
}
.academy-exam-result-title {
    font-family: var(--s-font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1;
    color: white;
    margin: 0 0 0.75rem;
}
.academy-exam-result-pct {
    font-size: 0.55em;
    opacity: 0.8;
    font-weight: 700;
}
.academy-exam-result-sub {
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.85);
    max-width: 540px;
    margin: 0 auto 1rem;
}
.academy-exam-result-meta {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
}

.academy-exam-breakdown,
.academy-exam-review {
    margin-bottom: 2rem;
}
.academy-exam-breakdown-title {
    font-family: var(--s-font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1rem;
    letter-spacing: -0.4px;
}
.academy-exam-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}
.academy-exam-bd-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s ease;
}
.academy-exam-bd-card.good { border-color: rgba(16,185,129,0.4); background: linear-gradient(135deg, rgba(16,185,129,0.04), rgba(5,150,105,0.02)); }
.academy-exam-bd-card.okay { border-color: rgba(251,191,36,0.4); background: linear-gradient(135deg, rgba(251,191,36,0.04), rgba(245,158,11,0.02)); }
.academy-exam-bd-card.weak { border-color: rgba(239,68,68,0.4); background: linear-gradient(135deg, rgba(239,68,68,0.04), rgba(220,38,38,0.02)); }
.academy-exam-bd-header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.6rem;
}
.academy-exam-bd-num {
    background: var(--blue-100);
    color: var(--blue-700);
    padding: 2px 8px;
    border-radius: 6px;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.75rem;
}
.academy-exam-bd-name {
    color: #0f172a;
    font-weight: 700;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.academy-exam-bd-score {
    font-family: var(--s-font-display);
    font-size: 1.3rem;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
}
.academy-exam-bd-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.academy-exam-bd-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.academy-exam-bd-card.good .academy-exam-bd-bar-fill { background: linear-gradient(90deg, #10b981, #047857); }
.academy-exam-bd-card.okay .academy-exam-bd-bar-fill { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.academy-exam-bd-card.weak .academy-exam-bd-bar-fill { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.academy-exam-bd-status {
    font-size: 0.72rem;
    font-weight: 700;
}
.academy-exam-bd-card.good .academy-exam-bd-status { color: #047857; }
.academy-exam-bd-card.okay .academy-exam-bd-status { color: #b45309; }
.academy-exam-bd-card.weak .academy-exam-bd-status { color: #b91c1c; }

.academy-exam-review-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.academy-exam-review-item {
    background: #fafbff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
}
.academy-exam-review-q {
    font-family: var(--s-font-display);
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
    line-height: 1.4;
}
.academy-exam-review-answers {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.academy-exam-review-yours,
.academy-exam-review-correct {
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
}
.academy-exam-review-yours {
    background: rgba(239,68,68,0.06);
    color: #b91c1c;
}
.academy-exam-review-correct {
    background: rgba(16,185,129,0.08);
    color: #047857;
}
.academy-exam-review-label {
    font-weight: 800;
    margin-right: 6px;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.academy-exam-result-actions {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Sidebar exam state */
.academy-sb-cert.passed {
    background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(5,150,105,0.08));
    border-color: rgba(16,185,129,0.4);
    box-shadow: 0 4px 14px rgba(16,185,129,0.15);
}
.academy-sb-cert.passed .academy-sb-cert-icon { color: #047857; }
.academy-sb-cert.passed .academy-sb-cert-meta { color: #047857; font-weight: 700; }

/* Mobile */
@media (max-width: 1024px) {
    .academy-exam-rules { grid-template-columns: 1fr; }
    .academy-exam-breakdown-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .academy-exam-q-card { padding: 1.5rem 1.25rem; }
    .academy-exam-q-text { font-size: 1.1rem; }
    .academy-exam-bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .academy-exam-result-actions { flex-direction: column; }
    .academy-exam-result-actions button { width: 100%; }
    .academy-exam-stats-row { flex-direction: column; }
    .academy-exam-stat-block { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════
   TRADING JOURNAL v2 — calcv3 design language (v=7.2)
═══════════════════════════════════════════════════════════ */

/* Top stats overview */
.journalv2-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.journalv2-stat {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem 1.6rem;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}
.journalv2-stat:hover {
    border-color: var(--blue-300);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15,23,42,0.06);
}
.journalv2-stat-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
    color: var(--blue-600);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.journalv2-stat-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}
.journalv2-stat-value {
    font-family: var(--s-font-display);
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 0.4rem;
}
.journalv2-stat-value.win {
    background: linear-gradient(135deg, #10b981, #047857);
    -webkit-background-clip: text;
    background-clip: text;
}
.journalv2-stat-value.loss {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    -webkit-background-clip: text;
    background-clip: text;
}
.journalv2-stat-meta {
    font-size: 0.78rem;
    color: var(--slate);
    font-weight: 600;
}

/* Form area inside calcv3 body */
.journalv2-form { display: flex; flex-direction: column; gap: 1rem; }
.journalv2-textarea {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
    padding: 0.85rem 1rem;
}

/* Live preview panel (the right side) — uses calcv3-result base, with custom tweaks */
.journalv2-app .calcv3-result {
    display: flex;
    flex-direction: column;
}
.journalv2-app .calcv3-result-eyebrow {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.85rem;
}
.journalv2-app .calcv3-result-row-value {
    font-family: var(--s-font-display);
    font-weight: 800;
    color: white;
}
.journalv2-app .journalv2-dir-long { color: #34d399 !important; }
.journalv2-app .journalv2-dir-short { color: #f87171 !important; }
.journalv2-app .journalv2-result-win { color: #34d399 !important; }
.journalv2-app .journalv2-result-loss { color: #f87171 !important; }
.journalv2-app .journalv2-pnl-win {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
.journalv2-app .journalv2-pnl-loss {
    background: linear-gradient(135deg, #f87171, #ef4444) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.journalv2-submit {
    margin-top: auto !important;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: white !important;
    border: none !important;
    padding: 1rem 1.75rem !important;
    border-radius: 50px !important;
    font-family: var(--s-font-display) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    box-shadow: 0 8px 22px rgba(59,130,246,0.4) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100%;
}
.journalv2-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(59,130,246,0.55) !important;
}

.calcv3-result-footnote {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    text-align: center;
    line-height: 1.5;
}

/* History card */
.journalv2-history .calcv3-header {
    border-bottom: 1px solid #e2e8f0;
}
.journalv2-history-actions {
    display: flex !important;
    gap: 0.5rem;
}
.journalv2-action-btn {
    background: rgba(255,255,255,0.08);
    color: white;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.5rem 0.85rem;
    border-radius: 50px;
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.journalv2-action-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
}
.journalv2-action-btn.danger {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.3);
    color: #fca5a5;
}
.journalv2-action-btn.danger:hover {
    background: rgba(239,68,68,0.25);
    border-color: rgba(239,68,68,0.5);
    color: #f87171;
}

/* Trade history table */
.journalv2-table-wrap {
    overflow-x: auto;
    padding: 0.5rem;
    -webkit-overflow-scrolling: touch;
}
.journalv2-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    margin: 0;
}
.journalv2-table thead th {
    font-family: var(--s-font-display);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.85rem 1rem;
    background: #fafbff;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
}
.journalv2-table thead th:first-child { border-radius: 10px 0 0 0; }
.journalv2-table thead th:last-child { border-radius: 0 10px 0 0; }
.journalv2-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.88rem;
    color: #1e293b;
    vertical-align: middle;
}
.journalv2-table tbody tr {
    transition: background 0.15s ease;
}
.journalv2-table tbody tr:hover { background: #fafbff; }
.journalv2-table tbody tr:last-child td { border-bottom: none; }

.journalv2-td-date { font-weight: 600; color: var(--slate); white-space: nowrap; }
.journalv2-td-pair { font-family: var(--s-font-display); font-weight: 800; color: #0f172a; }
.journalv2-td-pnl { font-family: var(--s-font-display); font-weight: 800; white-space: nowrap; }
.journalv2-td-pnl.win { color: #047857; }
.journalv2-td-pnl.loss { color: #b91c1c; }

/* Pills inside table rows */
.journalv2-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.journalv2-pill-strategy { background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-200); }
.journalv2-pill-session { background: rgba(168,85,247,0.08); color: #7c3aed; border: 1px solid rgba(168,85,247,0.2); }
.journalv2-pill-mindset { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

.journalv2-delete-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.journalv2-delete-btn:hover {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.3);
    color: #ef4444;
}

/* Empty state */
.journalv2-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 2rem;
    text-align: center;
}
.journalv2-empty-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    margin-bottom: 1rem;
}
.journalv2-empty h4,
.journalv2-empty .journalv2-empty-title {
    font-family: var(--s-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.4rem;
}
.journalv2-empty p {
    color: var(--slate);
    margin: 0;
    font-size: 0.92rem;
    max-width: 320px;
    line-height: 1.5;
}

/* Mobile responsive */
@media (max-width: 1024px) {
    .journalv2-stats { grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
}
@media (max-width: 768px) {
    .journalv2-stats { grid-template-columns: 1fr; }
    .journalv2-stat { padding: 1.25rem 1.4rem; }
    .journalv2-history-actions { flex-direction: row; gap: 6px; }
    .journalv2-action-btn { padding: 0.4rem 0.7rem; font-size: 0.72rem; }
    .journalv2-table thead th, .journalv2-table tbody td {
        padding: 0.65rem 0.75rem;
        font-size: 0.82rem;
    }
}

/* ───────────────────────────────────────────────────────────────
   Mobile alignment polish.
   When the homepage's two-column grids collapse to single column at
   <=768px, half the section headers (academy, tools, pricing) center
   themselves while the other half (verified-proofs, testimonials,
   blog, results, FAQ, contact) stay left-aligned. The mismatch reads
   as inconsistent on a phone where every section stacks vertically.
   This block centers the section-header pattern + the previously-
   left-column text for a single consistent rhythm. Cards, lists,
   FAQ accordion items, and form fields keep their native alignment.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .s-features-header,
  .s-hero-text,
  .s-faq-left {
    text-align: center;
  }

  /* Inline chips / badges centered inside their (now-centered) parent */
  .s-features-header .s-eyebrow,
  .s-features-header .s-eyebrow-light,
  .s-hero-text .hero-badge,
  .s-faq-left .s-eyebrow {
    margin-left: auto;
    margin-right: auto;
  }

  /* Hero CTA + helper text centered */
  .s-hero-cta { justify-content: center; }
  .s-hero-sub,
  .s-hero-risk { margin-left: auto; margin-right: auto; }

  /* FAQ left column: contact card + stats centered */
  .s-faq-contact { margin-left: auto; margin-right: auto; }
  .s-faq-stats { justify-content: center; }

  /* Proof / results stat row centered */

  /* Contact section: email link + socials centered */
}

/* ───────────────────────────────────────────────────────────────
   Mobile pass 2 (PR #43 follow-up).
   Standalone CTAs across the conversion pages were inline-flex/block
   without a wrapping centering container, so on mobile they sat
   flush-left after content blocks. This block forces every standalone
   conversion CTA to render as a full-width centered pill on phones,
   plus tightens section vertical padding (5-6rem -> 3.5rem) for
   ~30% shorter page scroll.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Index page: 1-on-1 strip stacks + centers */
  .elite-1on1 { grid-template-columns: 1fr; text-align: center; padding: 1.5rem 1.25rem; }
  .elite-1on1-cta { width: 100%; justify-content: center; text-align: center; }
  .elite-trust { justify-content: center; text-align: center; }
  .elite-trust span { justify-content: center; }

  /* Proof payout stack centers on mobile (was floating right) */

  /* Conversion CTAs become full-width pills */
  
  .bp-cta-primary { width: 100%; justify-content: center; }

  /* Footer install button: stop leaning left */

  /* Blog mini cards single column */

  /* Testimonial cards center in their column */

  /* Tighter section rhythm — cuts ~30% of vertical scroll */
  .s-section,
  .s-section-light,
  .s-faq,
  .s-testimonials,
  .s-steps,
  .s-verified { padding: 3.5rem 0 !important; }
}

/* Very small phones (<=480px) */
@media (max-width: 480px) {
  .s-faq-right .faq-content { font-size: 0.92rem; }
  .elite-1on1 h3 { font-size: 1.2rem; }
  .elite-trust { gap: 0.6rem 1.5rem; font-size: 0.78rem; }
}

/* Sticky mobile CTA dual-button variant.
   On the /mentorship page the bar surfaces BOTH conversion paths:
   - Primary: jump to the #claim-form (broker route)
   - Secondary: open Stripe ($99/mo direct)
   Outside mentorship the bar stays single-button (Claim free access). */
#tmt-sticky-cta.is-dual .tmt-sticky-btn { flex: 1 1 60%; }
.tmt-sticky-btn-ghost {
  flex: 1 1 30%;
  text-align: center;
  padding: 0.95rem 0.75rem;
  background: rgba(255,255,255,0.04) !important;
  color: #fbbf24 !important;
  font-weight: 800; font-size: 0.9rem;
  border: 1.5px solid rgba(251,191,36,0.45);
  border-radius: 12px;
  text-decoration: none !important;
  white-space: nowrap;
}
.tmt-sticky-btn-ghost:hover {
  background: rgba(251,191,36,0.1) !important;
  border-color: #fbbf24;
}