/* ════════════════════════════════════════════════════════════════════════════════
   MOBILE-FIXES.CSS — PREMIUM SAAS HOME PAGE (COMPLETE)
   Phases 1-4: Navbar, Hero, Sections, Footer, Accessibility, Performance
   Mobile-only: @media (max-width: 768px) + (max-width: 480px) for small phones
   Generated: 2026-06-11 — Clean rebuild with Phase 0-3 consolidation + Phase 4 audit
   ════════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────────── */
/* VERTICAL SPACING AUDIT FIX — Eliminate 250px+ dead zones */
/* Root causes: (1) .reveal elements stay opacity:0 if IntersectionObserver fails on mobile */
/*              (2) Desktop-scale margins (.sec-hdr margin-bottom: 3rem) not overridden */
/* Fix: Force reveal elements visible + consolidate margins to spacing scale */
/* ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* CRITICAL FIX: Disable scroll-reveal animations on mobile — force visible immediately */
  /* Elements with .reveal stay opacity:0 in layout until IntersectionObserver fires; */
  /* on mobile, if observer doesn't trigger reliably, invisible elements create empty gaps */
  /* Solution: make them visible by default, let animations only run if in-view triggers */
  .reveal,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  [class*="reveal"] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* When in-view class IS added (animation completes), keep it as-is */
  .reveal.in-view,
  .reveal.active,
  [class*="reveal"].in-view {
    opacity: 1 !important;
    transform: none !important;
  }

  /* MARGIN CONSOLIDATION: Eliminate stacking of desktop margins */
  /* Desktop spacing between sections: section padding (5rem) + element margins */
  /* Mobile: single 48px padding per section (already done in Phase 3) */
  /* Now override ALL element-level margins to prevent double-stacking */

  /* Section header block: eyebrow → 12px → title → 10px → subtitle → 24px → content */
  .sec-hdr {
    margin-bottom: 24px !important; /* was 3rem (48px) on desktop */
  }

  .sec-eyebrow {
    margin-bottom: 12px !important; /* was 0.8rem (~13px), now explicit */
  }

  .sec-h2 {
    margin-bottom: 10px !important; /* was 1rem (16px) */
  }

  .sec-h2 + p {
    margin-bottom: 24px !important; /* gap before first content element */
  }

  /* Card/item spacing: 14px between cards in vertical stack */
  .card, .ccard, .stat-card, .faq-item, .award-card, .path-step,
  [class*="card"], [class*="item"]:not(.faq-toggle) {
    margin-bottom: 14px !important;
  }

  /* Feature items: 14px gap */
  .feat-item {
    margin-bottom: 14px !important;
  }

  /* Testimonial cards: 14px gap */
  .tcard, .testimonial-card {
    margin-bottom: 14px !important;
  }

  /* Override any section-internal margins that might stack */
  .sec-stats, .sec-path, .sec-courses, .sec-testi, .sec-faq {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Grid gaps: standardize to 14px between items */
  .stats-grid, .path-grid, .ccard-grid, .testimonial-grid, .faq-grid {
    gap: 14px !important;
  }

  /* Ensure mb-section uses spacing scale (already set in Phase 3 to 28px, confirm here) */
  .mb-section {
    margin-bottom: 24px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────── */
/* PHASE 4: ACCESSIBILITY & PERFORMANCE — Tap targets, animations, contrast, overflow */
/* ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Ensure no horizontal scroll anywhere on mobile */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  main, section, .container, [class*="wrap"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Minimum tap target size: 44×44px for all interactive elements */
  button, a, [role="button"], input[type="checkbox"], input[type="radio"] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Input minimum font size: 16px (prevents iOS zoom-on-focus) */
  input, textarea, select {
    font-size: 16px !important;
    padding: 12px !important;
  }

  /* Consistent radius scale: 8px (small), 12px (medium), 16px (large) */
  button, a[class*="btn"], input, textarea, select {
    border-radius: 8px !important;
  }

  .card, [class*="card"], .faq-item, .stat-card, .ccard {
    border-radius: 12px !important;
  }

  [class*="section"], section, .modal-box {
    border-radius: 16px !important;
  }

  /* Consistent shadow scale */
  .card, [class*="card"], .faq-item {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  .card:hover, [class*="card"]:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  }

  /* Type scale consistency on mobile */
  h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  h2 {
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  h3 {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
  }

  p, body, main {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }

  small, .small, .text-sm {
    font-size: 0.8rem !important;
  }

  /* Light mode contrast verification: all text colors */
  [data-theme="light"] body,
  [data-theme="light"] p,
  [data-theme="light"] span {
    color: #1e293b !important;
  }

  [data-theme="light"] h1,
  [data-theme="light"] h2,
  [data-theme="light"] h3 {
    color: #0a0e27 !important;
  }

  [data-theme="light"] .muted,
  [data-theme="light"] [class*="muted"] {
    color: #64748b !important;
  }

  /* Accent colors on light mode: dark blue for contrast */
  [data-theme="light"] [class*="accent"],
  [data-theme="light"] [class*="primary"],
  [data-theme="light"] .color-cyan {
    color: #0062cc !important;
  }

  /* Remove hover-only interactions: all buttons must have :active states */
  button:active, a[class*="btn"]:active, [role="button"]:active {
    transform: scale(0.98) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  }

  /* Focus states for keyboard navigation (accessibility) */
  button:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid var(--c) !important;
    outline-offset: 2px !important;
  }

  /* Reduce animation duration for better performance */
  * {
    transition-duration: 200ms !important;
  }

  /* Remove heavy glows for scroll performance */
  [class*="glow"], [class*="shadow-lg"], [class*="shadow-xl"] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────────── */
/* 1. GLOBAL — Prevent horizontal scroll, box-sizing fixes */
/* ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
  }

  * {
    box-sizing: border-box !important;
  }

  /* Lock scroll when mobile nav is open */
  body.nav-open {
    overflow-y: hidden !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────── */
/* 2. NAVBAR — Fixed top positioning, no dead space above */
/* ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  nav.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    margin-top: 0 !important;
    z-index: 1000 !important;
    padding: 0.75rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Theme toggle: 44×44px tap target, centered vertically */
  #theme-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* Hamburger: 44×44px tap target */
  .ham {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* Light mode navbar */
  [data-theme="light"] nav.navbar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  [data-theme="light"] #theme-toggle {
    color: #1e293b !important;
  }

  /* ═══ P1: HEADER LAYOUT — 3-zone flex: logo | toggle | hamburger ═══ */
  nav.navbar > .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 16px !important;
  }

  a.nav-logo {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  #theme-toggle {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    padding: 0 !important;
    /* surface removed — toggle is a bare icon, matching the hamburger */
  }

  #theme-toggle svg,
  #theme-toggle i {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
  }

  .ham {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin-left: 10px !important;
  }

  [data-theme="light"] #theme-toggle {
    /* T4: Remove white background, make neutral like hamburger */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* ═══ P2: MOBILE NAV MENU — Left-aligned rows, one active state ═══ */
  .mob-nav {
    text-align: left !important;
  }

  .mob-nav > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    width: 100% !important;
    background: transparent !important;
    border-left: 3px solid transparent !important;
  }

  .mob-nav > a i,
  .mob-nav > a svg {
    flex: 0 0 20px !important;
  }

  [data-theme="light"] .mob-nav > a {
    color: #475569 !important;
  }

  /* ═══ F1: LOGO LOCKUP — Single-line name, optional tagline ═══ */
  .logo-text {
    white-space: nowrap !important;
    font-size: 0.9rem !important; /* Scale down to fit 360px */
  }

  .logo-sub {
    font-size: 0.55rem !important;
    letter-spacing: 0.18em !important;
    color: var(--tm) !important;
    white-space: nowrap !important;
  }

  @media (max-width: 480px) {
    .logo-sub {
      display: none !important; /* Hide tagline at small phones */
    }
  }

  [data-theme="light"] .logo-sub {
    color: #64748b !important;
  }

  /* ═══ F2: TOGGLE NEUTRAL SURFACE — Match hamburger ═══ */
  #theme-toggle {
    background: transparent !important;
    border: none !important;
  }

  #theme-toggle:focus-visible {
    outline: 2px solid var(--c) !important;
    outline-offset: 2px !important;
  }

  #theme-toggle:focus:not(:focus-visible) {
    background: transparent !important;
  }

  #theme-toggle:active {
    background: transparent !important;
  }

  .ham {
    background: transparent !important;
    border: none !important;
  }

  .ham:focus-visible {
    outline: 2px solid var(--c) !important;
    outline-offset: 2px !important;
  }

  .ham:focus:not(:focus-visible) {
    background: transparent !important;
  }

  .ham:active {
    background: transparent !important;
  }

  /* ═══ F3: NAV MENU — Remove all active styling ═══ */
  /* All rows identical, no highlights, no active styling */
  /* (active-state rules deleted above, no replacements needed) */

  /* ═══ T1-T3: CARD TYPOGRAPHY HIERARCHY — Premium internal structure ═══ */

  /* T1: CARD TYPE SCALE — Apply to all card components */

  /* Card eyebrow/label: whisper-quiet muted text */
  [class*="step"]:not([class*="title"]) .path-label,
  [class*="step"] .step-label,
  [class*="badge"] .badge-label,
  .faq-item .faq-label,
  .card-label,
  [class*="eyebrow"] {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    color: rgba(226, 232, 240, 0.45) !important;
    text-transform: uppercase !important;
  }

  [data-theme="light"] [class*="badge"] .badge-label,
  [data-theme="light"] .faq-item .faq-label,
  [data-theme="light"] .card-label,
  [data-theme="light"] [class*="eyebrow"] {
    color: #94a3b8 !important;
  }

  /* Card title: unmistakably dominant (FAQ question excluded — sized separately to fit one line) */
  .path-step .path-title,
  .step-card .step-title,
  .card-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    color: #f1f5f9 !important;
    line-height: 1.25 !important;
  }

  .faq-item .faq-question {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #f1f5f9 !important;
    line-height: 1.35 !important;
  }

  [data-theme="light"] .path-step .path-title,
  [data-theme="light"] .step-card .step-title,
  [data-theme="light"] .card-title,
  [data-theme="light"] .faq-item .faq-question {
    color: #0f172a !important;
  }

  /* Keep the one-line size winning over any h3/.faq-question rules below */
  .faq-item .faq-header .faq-question {
    font-size: 0.8rem !important;
  }

  /* Card subtitle: clearly muted, reads with title as one unit */
  .path-step .path-subtitle,
  .step-card .step-subtitle,
  .card-subtitle,
  .faq-item .faq-subtitle {
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    color: rgba(226, 232, 240, 0.6) !important;
    line-height: 1.5 !important;
  }

  [data-theme="light"] .path-step .path-subtitle,
  [data-theme="light"] .step-card .step-subtitle,
  [data-theme="light"] .card-subtitle,
  [data-theme="light"] .faq-item .faq-subtitle {
    color: #64748b !important;
  }

  /* Badge/pill: accent supporting text */
  .path-step .path-badge,
  .step-card .step-badge,
  .card-badge,
  .faq-item .faq-badge,
  [class*="badge"] {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    padding: 0.3rem 0.7rem !important;
    border-radius: 6px !important;
  }

  /* T2: STEP CARD SPACING — Tight grouping, clear separation */
  .path-step {
    padding: 22px 18px !important;
  }

  /* Icon 34px */
  .path-step [class*="icon"],
  .step-card [class*="icon"] {
    width: 34px !important;
    height: 34px !important;
    font-size: 34px !important;
  }

  /* Spacing: eyebrow → 14px → icon → 12px → title → 4px → subtitle → 14px → badge */
  .path-step .path-label {
    margin-bottom: 14px !important;
  }

  .path-step [class*="icon"] {
    margin-bottom: 12px !important;
  }

  .path-step .path-title {
    margin-bottom: 4px !important; /* Tight title-subtitle bond */
  }

  .path-step .path-subtitle {
    margin-bottom: 14px !important;
  }

  .path-step .path-badge {
    margin-bottom: 0 !important;
  }

  /* Path connector arrows */
  .path-arr {
    font-size: 20px !important;
    margin: 10px 0 !important;
    color: rgba(168, 162, 196, 0.5) !important;
  }

  /* T3: FAQ CARD TYPOGRAPHY & ALIGNMENT */
  /* 0.88rem so most questions fit one line at 360px — premium compact */
  .faq-question {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #f1f5f9 !important;
  }

  [data-theme="light"] .faq-question {
    color: #0f172a !important;
  }

  /* A: FAQ HEADER — Flex layout with text taking remaining width */
  .faq-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 16px !important;
  }

  /* Icon fixed width, centers vertically */
  .faq-toggle {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
    color: rgba(168, 162, 196, 0.6) !important;
  }

  /* A: QUESTION TEXT — Takes all remaining width (CRITICAL FIX for wrapping) */
  .faq-question {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-right: 0 !important;
  }

  /* B: FAQ CARD & STEP CONTAINMENT — Fix overflow */
  /* No card-level side padding — the header/answer carry their own,
     doubling it was stealing ~36px of text width and forcing 3-line wraps */
  .faq-item {
    padding: 0 !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Step card containment: prevent right-edge overflow */
  .path-track,
  .sec-path {
    padding: 0 16px !important;
    overflow-x: visible !important;
  }

  [class*="path-step"],
  .step-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Answer text: muted, readable line-height */
  .faq-answer {
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
    color: rgba(226, 232, 240, 0.7) !important;
    margin-top: 12px !important;
  }

  [data-theme="light"] .faq-answer {
    color: #64748b !important;
  }

  /* Open state: icon accent color */
  .faq-item[data-faq-open] .faq-toggle {
    color: var(--c) !important;
  }

  [data-theme="light"] .faq-item[data-faq-open] .faq-toggle {
    color: #0062cc !important;
  }

  /* ═══ C: ANIMATED JOURNEY TIMELINE — DISABLED ═══ */
  /* Hide timeline completely, show old step cards */
  .journey-timeline {
    display: none !important;
  }

  /* Step cards: vertical stack inside the card (flex row was cramming
     label/icon/title/badge into one squashed line) */
  .path-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 18px !important;
  }

  /* Real selectors for this card are .ps-* (not .path-title/.path-subtitle) */
  .path-step .ps-num {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    color: rgba(226, 232, 240, 0.45) !important;
    margin-bottom: 14px !important;
  }

  .path-step .ps-ico {
    font-size: 28px !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
  }

  .path-step .ps-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    color: #f1f5f9 !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important; /* tight title-subtitle bond */
  }

  .path-step .ps-sub {
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    color: rgba(226, 232, 240, 0.6) !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }

  .path-step .ps-tag {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    padding: 0.3rem 0.7rem !important;
    border-radius: 6px !important;
    align-self: center !important;
  }

  [data-theme="light"] .path-step .ps-num {
    color: #94a3b8 !important;
  }

  [data-theme="light"] .path-step .ps-title {
    color: #0f172a !important;
  }

  [data-theme="light"] .path-step .ps-sub {
    color: #64748b !important;
  }

  /* Arrows between cards: point downward, centered, compact */
  .path-arr {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    transform: rotate(90deg) !important;
    font-size: 20px !important;
    color: rgba(168, 162, 196, 0.5) !important;
    margin: 10px 0 !important;
  }

  /* Timeline container */
  .journey-timeline {
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }

  /* Vertical rail and progress line */
  .timeline-track {
    position: relative !important;
    padding: 0 0 0 60px !important;
    min-height: 400px !important;
  }

  /* Static background rail (always visible) */
  .timeline-rail {
    position: absolute !important;
    left: 22px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  [data-theme="light"] .timeline-rail {
    background: rgba(0, 0, 0, 0.08) !important;
  }

  /* Animated progress line (drawn on scroll) */
  .timeline-progress {
    position: absolute !important;
    left: 22px !important;
    top: 0 !important;
    width: 3px !important;
    background: linear-gradient(180deg, #34d399 0%, #00d4ff 25%, #6366f1 50%, #f59e0b 100%) !important;
    height: 0 !important;
    transition: height 300ms ease-out !important;
    will-change: height !important;
  }

  /* Respect prefers-reduced-motion: show full line */
  @media (prefers-reduced-motion: reduce) {
    .timeline-progress {
      transition: none !important;
      height: 100% !important;
    }
  }

  /* Timeline step */
  .timeline-step {
    position: relative !important;
    margin-bottom: 28px !important;
    padding: 0 !important;
  }

  .timeline-step:last-child {
    margin-bottom: 0 !important;
  }

  /* Node: 34px circle on the rail */
  .timeline-node {
    position: absolute !important;
    left: -39px !important;
    top: 0 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: white !important;
    background: currentColor !important;
    border: 3px solid rgba(255, 255, 255, 0.15) !important;
    z-index: 10 !important;
    transition: transform 300ms ease-out, box-shadow 300ms ease-out !important;
    will-change: transform, box-shadow !important;
  }

  [data-theme="light"] .timeline-node {
    border-color: rgba(0, 0, 0, 0.08) !important;
  }

  /* Level-specific node colors */
  .timeline-step.level-1 .timeline-node {
    color: #34d399; /* Green - Foundational */
  }

  .timeline-step.level-2 .timeline-node {
    color: #00d4ff; /* Cyan - Associate */
  }

  .timeline-step.level-3 .timeline-node {
    color: #6366f1; /* Indigo - Professional */
  }

  .timeline-step.level-4 .timeline-node {
    color: #f59e0b; /* Amber - Expert */
  }

  /* Node active state: pulse + scale */
  .timeline-step.active .timeline-node {
    transform: scale(1) !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.1) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .timeline-step.active .timeline-node {
      box-shadow: 0 0 0 rgba(0, 212, 255, 0.3), inset 0 0 0 rgba(255, 255, 255, 0.1) !important;
    }
  }

  /* Inactive node: scale down */
  .timeline-step.inactive .timeline-node {
    transform: scale(0.6) !important;
    opacity: 0.6 !important;
  }

  /* Step content: one tight row per step */
  .timeline-content {
    opacity: 0 !important;
    transform: translateY(12px) !important;
    transition: opacity 300ms ease-out 80ms, transform 300ms ease-out 80ms !important;
  }

  .timeline-step.active .timeline-content {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .timeline-content {
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* Certification name + level pill inline */
  .timeline-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #f1f5f9 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 6px !important;
  }

  [data-theme="light"] .timeline-title {
    color: #0f172a !important;
  }

  /* Level pill */
  .timeline-level {
    display: inline-block !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    background: rgba(0, 212, 255, 0.1) !important;
    color: var(--c) !important;
  }

  .timeline-step.level-1 .timeline-level {
    background: rgba(52, 211, 153, 0.1) !important;
    color: #34d399 !important;
  }

  .timeline-step.level-2 .timeline-level {
    background: rgba(0, 212, 255, 0.1) !important;
    color: #00d4ff !important;
  }

  .timeline-step.level-3 .timeline-level {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #6366f1 !important;
  }

  .timeline-step.level-4 .timeline-level {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
  }

  [data-theme="light"] .timeline-level {
    background: rgba(0, 98, 204, 0.08) !important;
    color: #0062cc !important;
  }

  /* Meta line: track + duration + price */
  .timeline-meta {
    font-size: 0.85rem !important;
    color: rgba(226, 232, 240, 0.6) !important;
    line-height: 1.4 !important;
  }

  [data-theme="light"] .timeline-meta {
    color: #64748b !important;
  }

  /* End cap: trophy/destination node */
  .timeline-destination {
    position: relative !important;
    margin-top: 28px !important;
    padding-left: 60px !important;
    text-align: left !important;
  }

  .destination-node {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    background: rgba(245, 158, 11, 0.2) !important;
    border: 2px solid #f59e0b !important;
  }

  .destination-text {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #f59e0b !important;
  }

  [data-theme="light"] .destination-node {
    background: rgba(0, 98, 204, 0.1) !important;
    border-color: #0062cc !important;
  }

  [data-theme="light"] .destination-text {
    color: #0062cc !important;
  }

  /* Desktop: timeline disabled, old cards shown */
  /* No media query needed — timeline hidden at all breakpoints */
}

/* ──────────────────────────────────────────────────────────────────────────────── */
/* 3. MAIN CONTENT — Account for fixed navbar, no margin overlap */
/* ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  main#main-content {
    margin-top: 0 !important;
    padding: 0 !important;
    overflow-x: clip !important; /* clip (not hidden) so position:sticky still works inside */
  }
}

/* Course detail page (mobile): the main pane is the scroller — the hero scrolls
   AWAY and the tab bar sticks to the top, giving the content maximum space.
   The sidebar is hidden (lessons live in the Lessons tab). Kept in static CSS
   so it applies regardless of the Blade view cache. */
@media (max-width: 768px) {
  .course-container-pro {
    height: calc(100vh - var(--nav-height, 70px)) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .course-sidebar-pro { display: none !important; }

  /* The scroll container — hero + tabs + content all scroll within this. */
  .course-main-pro {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
  }

  /* Hero scrolls up out of view. */
  .course-hero-pro { flex-shrink: 0 !important; }

  /* Tab bar pins to the top of the scroll pane once the hero scrolls past. */
  .course-tabs-pro {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    background: var(--bg) !important;
    box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.55) !important;
  }

  /* Content flows inside the main scroll (no separate inner scrollbar). */
  .course-content-area-pro {
    overflow: visible !important;
    min-height: 0 !important;
  }

  /* Resources tab cards: clean vertical stack with a full-width action. */
  .lesson-card-pro {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.8rem !important;
  }
  .lesson-card-pro .lesson-number-pro { align-self: flex-start !important; }
  .lesson-card-pro .enroll-button-pro,
  .lesson-card-pro > a[href],
  .lesson-card-pro > span {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────── */
/* 4. HERO SECTION — Announcement strip + hero container + premium typography */
/* ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Announcement strip: fixed, below navbar, full-width */
  #lmshero-urgency {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(90deg, rgba(255,106,0,0.12) 0%, rgba(255,152,0,0.06) 100%) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,106,0,0.25) !important;
    padding: 0 1rem !important;
    margin: 0 !important;
    gap: 0.5rem !important;
    z-index: 999 !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 0 !important;
  }

  #lmshero-urgency-dot {
    flex-shrink: 0;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
  }

  /* Light mode announcement */
  [data-theme="light"] #lmshero-urgency {
    background: linear-gradient(90deg, rgba(255,152,0,0.08) 0%, rgba(255,198,0,0.04) 100%) !important;
    border-bottom-color: rgba(255,152,0,0.2) !important;
    color: #ff9800 !important;
  }

  /* Hero container: padding-top clears navbar (70px) + announcement (34px) + gap (32px) = 136px */
  #lmshero {
    padding-top: 136px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 120px !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }

  /* ═══ PHASE 2: HERO TYPOGRAPHY & SPACING ═══ */

  /* Eyebrow badge: .68rem, letter-spacing .1em, single line */
  #lmshero-tag {
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
    margin-bottom: 14px !important;
  }

  /* Hero headline: 1.9rem, 1.15 line-height, -0.025em letter-spacing, 800 weight */
  /* Must fit 3 single lines at 360px with 20px side padding */
  #lmshero-h1 {
    font-size: 1.9rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    font-weight: 800 !important;
    margin-bottom: 18px !important;
    text-wrap: balance !important;
  }

  /* Hero subtext: 1.02rem, 1.65 line-height, max 28rem width */
  #lmshero-sub {
    font-size: 1.02rem !important;
    line-height: 1.65 !important;
    max-width: 28rem !important;
    margin-bottom: 26px !important;
  }

  /* CTA buttons: full-width, 52px height, 1.02rem font, 700 weight, 12px gap, 12px border-radius */
  #lmshero-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 30px !important;
  }

  .lhbtn {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* Primary button: cyan gradient, white text, premium shadow */
  .lhbtn-cta {
    background: linear-gradient(135deg, #00d4ff, #0099cc) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.35) !important;
  }

  .lhbtn-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.45) !important;
  }

  .lhbtn-cta:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.25) !important;
  }

  /* Secondary button: dark theme rgba(255,255,255,.06) bg + rgba(255,255,255,.18) border */
  .lhbtn-ghost {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(220, 235, 255, 0.85) !important;
  }

  .lhbtn-ghost:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) !important;
  }

  .lhbtn-ghost:active {
    transform: scale(0.98) !important;
  }

  /* Checklist: 12px row gap, .9rem text, 18px icons */
  #lmshero-badges {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .lh-badge {
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .lh-badge i {
    font-size: 18px !important;
    min-width: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Light mode hero */
  [data-theme="light"] #lmshero {
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%) !important;
  }

  [data-theme="light"] #lmshero-h1 {
    color: #0a0e27 !important;
  }

  [data-theme="light"] #lmshero-h1 .lh-blue,
  [data-theme="light"] #lmshero-h1 .lh-orange {
    color: var(--c) !important;
  }

  [data-theme="light"] #lmshero-sub {
    color: #475569 !important;
  }

  [data-theme="light"] #lmshero-sub strong {
    color: #1e293b !important;
  }

  [data-theme="light"] #lmshero-tag {
    background: rgba(0, 98, 204, 0.1) !important;
    color: #0062cc !important;
  }

  [data-theme="light"] #lmshero-tagdot {
    background: #0062cc !important;
  }

  /* Light mode secondary button: white bg + rgba(0,0,0,.12) border + soft shadow */
  [data-theme="light"] .lhbtn-ghost {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  [data-theme="light"] .lhbtn-ghost:hover {
    background: #f8fafc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }

  [data-theme="light"] .lh-badge {
    color: #64748b !important;
  }

  [data-theme="light"] .lh-badge i {
    color: #16a34a !important;
  }
}

@media (max-width: 480px) {
  #lmshero-h1 {
    font-size: 1.75rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────── */
/* 5. SECTION PATTERN — Universal spacing, headers, premium typography */
/* ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* All sections: consistent 48px padding top/bottom */
  .sec-stats,
  .sec-path,
  .sec-awards,
  .sec-courses,
  .sec-testi,
  .sec-faq,
  section[class*="sec-"] {
    padding: 48px 1rem !important;
    background-color: var(--bg) !important;
  }

  /* Alternate backgrounds for visual separation */
  .sec-path,
  .sec-testi {
    background-color: var(--bg1) !important;
  }

  .sec-awards {
    background-color: var(--bg2) !important;
  }

  /* Light mode section backgrounds */
  [data-theme="light"] .sec-stats,
  [data-theme="light"] .sec-path,
  [data-theme="light"] .sec-awards,
  [data-theme="light"] .sec-courses,
  [data-theme="light"] .sec-testi,
  [data-theme="light"] .sec-faq {
    background-color: #f5f7fa !important;
  }

  [data-theme="light"] .sec-path,
  [data-theme="light"] .sec-testi {
    background-color: #eef1f6 !important;
  }

  [data-theme="light"] .sec-awards {
    background-color: #e7ecf4 !important;
  }

  /* Section headers: eyebrow + title + gap to content */
  .sec-hdr,
  .mb-section {
    margin-bottom: 28px !important;
  }

  /* Eyebrow badge: .72rem, letter-spacing .12em */
  .sec-eyebrow {
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--c) !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .sec-eyebrow i {
    font-size: 0.8rem !important;
  }

  /* Section title: 1.45rem, bold, premium spacing */
  .sec-h2 {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: var(--tw) !important;
  }

  .sec-h2 .accent {
    color: var(--c) !important;
  }

  /* Light mode section headers */
  [data-theme="light"] .sec-eyebrow {
    color: #0062cc !important;
  }

  [data-theme="light"] .sec-h2 {
    color: #0a0e27 !important;
  }

  [data-theme="light"] .sec-h2 .accent {
    color: #0062cc !important;
  }

  /* STATS SECTION: Numbers 1.6rem accent-colored, labels small/muted */
  .stat-num {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: var(--c) !important;
  }

  .stat-lbl {
    font-size: 0.8rem !important;
    color: var(--tm) !important;
    margin-top: 4px !important;
  }

  .stat-ico {
    font-size: 1.8rem !important;
    color: var(--c) !important;
    margin-bottom: 8px !important;
  }

  /* Light mode stats */
  [data-theme="light"] .stat-num {
    color: #0062cc !important;
  }

  [data-theme="light"] .stat-ico {
    color: #0062cc !important;
  }

  [data-theme="light"] .stat-lbl {
    color: #64748b !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────── */
/* 6. FAQ SECTION — Mobile-optimized accordion with full-width styling */
/* ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* FAQ grid: full width — the section's own 16px padding provides the margins;
     the extra calc(100% - 32px) was double-indenting and narrowing the questions */
  .faq-grid,
  .faq-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* FAQ item: card styling, 12px gap between items */
  .faq-item {
    background: var(--card) !important;
    border: 1px solid var(--bdr) !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .faq-item[data-faq-open],
  .faq-item.open {
    border-color: var(--c) !important;
    border-left: 3px solid var(--c) !important;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.1) !important;
  }

  /* FAQ header: full-width, tappable, 16-18px padding, 200ms animation */
  .faq-header {
    padding: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    user-select: none !important;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 44px !important;
  }

  .faq-header:active {
    background: rgba(0, 212, 255, 0.05) !important;
  }

  /* FAQ toggle icon: 20px, centered, rotate on expand */
  .faq-toggle {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--c) !important;
    font-size: 1.2rem !important;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: bold !important;
  }

  .faq-toggle::before {
    content: '+' !important;
  }

  .faq-item[data-faq-open] .faq-toggle,
  .faq-item.open .faq-toggle {
    transform: rotate(45deg) !important;
  }

  /* FAQ question: .95rem, ≥48px right padding for icon clearance */
  .faq-question {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--tw) !important;
    padding-right: 48px !important;
    line-height: 1.4 !important;
    flex: 1 !important;
    margin: 0 !important;
  }

  /* FAQ answer: hidden by default, slides in on expand */
  .faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 16px !important;
    color: var(--tm) !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
  }

  .faq-item[data-faq-open] .faq-answer,
  .faq-item.open .faq-answer {
    max-height: 600px !important;
    padding: 0 16px 16px 16px !important;
  }

  /* Light mode FAQ */
  [data-theme="light"] .faq-header:active {
    background: rgba(0, 98, 204, 0.05) !important;
  }

  [data-theme="light"] .faq-item {
    background: white !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }

  [data-theme="light"] .faq-item[data-faq-open],
  [data-theme="light"] .faq-item.open {
    border-color: #0062cc !important;
    border-left-color: #0062cc !important;
    box-shadow: 0 4px 16px rgba(0, 98, 204, 0.08) !important;
  }

  [data-theme="light"] .faq-toggle {
    color: #0062cc !important;
  }

  [data-theme="light"] .faq-question {
    color: #0a0e27 !important;
  }

  [data-theme="light"] .faq-answer {
    color: #64748b !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────── */
/* 7. FOOTER — Stacked single column, ≥44px tap targets, light mode support */
/* ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  #site-footer {
    background: var(--bg) !important;
    padding: 48px 1rem !important;
  }

  .footer-inner {
    max-width: 100% !important;
  }

  /* Footer grid: single column on mobile */
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    margin-bottom: 32px !important;
  }

  /* Footer column title: .72rem, consistent styling */
  .f-col-title {
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    color: var(--tw) !important;
    margin-bottom: 12px !important;
  }

  /* Footer links: ≥44px tap height, legible muted text */
  .f-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .f-links a,
  .f-links span {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    font-size: 0.9rem !important;
    color: var(--tm) !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
    transition: color 200ms ease !important;
  }

  .f-links a:active,
  .f-links a:hover {
    color: var(--c) !important;
  }

  /* Social buttons: ≥44px */
  .social-links {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  .soc-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Brand section */
  .f-brand {
    font-size: 1.2rem !important;
    margin-bottom: 12px !important;
  }

  .f-desc {
    font-size: 0.9rem !important;
    margin-bottom: 16px !important;
    line-height: 1.6 !important;
  }

  /* Footer bottom: stacked on mobile */
  .footer-bot {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    font-size: 0.8rem !important;
    color: var(--tm) !important;
    border-top: 1px solid var(--bdr) !important;
    padding-top: 24px !important;
  }

  .footer-bot a {
    display: inline !important;
    color: var(--c) !important;
    text-decoration: none !important;
  }

  /* Light mode footer */
  [data-theme="light"] #site-footer {
    background: #f5f7fa !important;
  }

  [data-theme="light"] .f-col-title {
    color: #0a0e27 !important;
  }

  [data-theme="light"] .f-links a,
  [data-theme="light"] .f-links span {
    color: #64748b !important;
  }

  [data-theme="light"] .f-links a:hover,
  [data-theme="light"] .f-links a:active {
    color: #0062cc !important;
  }

  [data-theme="light"] .f-brand {
    color: #0a0e27 !important;
  }

  [data-theme="light"] .f-brand span {
    color: #0062cc !important;
  }

  [data-theme="light"] .f-desc {
    color: #64748b !important;
  }

  [data-theme="light"] .footer-bot {
    color: #64748b !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
  }

  [data-theme="light"] .footer-bot a {
    color: #0062cc !important;
  }

  [data-theme="light"] .soc-btn {
    background: white !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #64748b !important;
  }

  [data-theme="light"] .soc-btn:hover {
    border-color: #0062cc !important;
    color: #0062cc !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────── */
/* 5. CHAT SUPPORT BUBBLE — 56px cyan circle, white icon, correct positioning */
/* ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Chat widget container: fixed, respecting safe-area for iPhone notch */
  #custom-chat {
    position: fixed !important;
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 899 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Chat button: 56px circle, cyan gradient, white icon, premium shadow */
  #chat-btn {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #00d4ff, #0099cc) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  #chat-btn:active {
    transform: scale(0.94) !important;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.25) !important;
  }

  /* Chat icon: white, 24px, centered */
  #chat-btn .lc-gem {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #chat-btn i {
    color: white !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  /* Hide notification badge and tooltip on mobile */
  #lc-badge,
  .lc-tip {
    display: none !important;
  }

  /* Chat panel: bottom sheet, positioned above bubble */
  #chat-panel {
    position: fixed !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 70vh !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 898 !important;
  }

  /* Add bottom padding to prevent content hiding behind bubble */
  body,
  #main-content,
  main {
    padding-bottom: 96px !important;
  }

  /* While the lesson drawer is open, hide the chat bubble/panel — it lives in
     the root stacking context and otherwise sits above the drawer and swallows
     taps on its lesson/quiz links. */
  body.lesson-drawer-open #custom-chat,
  body.lesson-drawer-open #chat-panel {
    display: none !important;
  }

  /* The site footer is a root-level element; while the drawer is open it shows
     under the (not-full-height) drawer and its links steal taps. Hide it. */
  body.lesson-drawer-open #site-footer {
    display: none !important;
  }

  /* Force the open drawer to span nav-bottom to viewport-bottom (solid,
     full-height panel) so nothing shows beneath / through it, and keep it
     above the overlay. */
  .lesson-sidebar.drawer-open {
    top: 70px !important;
    bottom: 0 !important;
    height: auto !important;
    z-index: 1001 !important;
  }
  body.lesson-drawer-open .sidebar-overlay.active {
    z-index: 1000 !important;
  }

  /* #main-content is a stacking context at z-index:1, which traps the drawer
     beneath every other root-level layer. Lift it above them — but below the
     fixed navbar (z-index:1000) — while the drawer is open so the drawer's
     links are actually on top and tappable. */
  body.lesson-drawer-open #main-content {
    z-index: 999 !important;
  }

  /* Quiz option inputs: the 44px touch-target rule above blows up the radios
     and checkboxes. Keep them a normal control size (the whole option row is
     the real tap target). */
  .quiz-option-label .quiz-option-input,
  .quiz-option-input[type="checkbox"],
  .quiz-option-input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex: 0 0 20px !important;
    display: inline-block !important;
    align-self: center !important;
  }

  /* Light mode chat button: identical cyan gradient identity */
  [data-theme="light"] #chat-btn {
    background: linear-gradient(135deg, #00b8e0, #0077b6) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 14px rgba(0, 98, 204, 0.35) !important;
  }

  [data-theme="light"] #chat-btn i {
    color: white !important;
  }

  [data-theme="light"] #chat-btn:active {
    transform: scale(0.94) !important;
    box-shadow: 0 2px 8px rgba(0, 98, 204, 0.25) !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────── */
/* 6. TOOLTIP — Prevent JS tooltip initialization on mobile */
/* Source: premium-interactions.js initTooltips() attaches mouseenter to [title] elements */
/* Fix: guard function skips init when window.innerWidth < 769 */
/* ──────────────────────────────────────────────────────────────────────────────── */

/* No CSS needed — fix applied at source in premium-interactions.js:311-316 */

/* ──────────────────────────────────────────────────────────────────────────────── */
/* FINAL: NAV CONTROLS NEUTRALIZED — kill animations.css glow/halo on toggle + ham  */
/* animations.css gives ALL buttons hover glow (0 0 30px cyan), cyan border, and a  */
/* 300px radial ::before halo; hover sticks after tap on touch. This block is last  */
/* in the cascade and flattens every state for the two nav controls.               */
/* ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  #theme-toggle,
  #theme-toggle:hover,
  #theme-toggle:focus,
  #theme-toggle:active,
  .ham,
  .ham:hover,
  .ham:focus,
  .ham:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    animation: none !important;
  }

  /* Kill the radial halo pseudo-elements */
  #theme-toggle::before,
  #theme-toggle::after,
  .ham::before,
  .ham::after {
    display: none !important;
    content: none !important;
  }

  /* Keyboard accessibility only */
  #theme-toggle:focus-visible,
  .ham:focus-visible {
    outline: 2px solid var(--c) !important;
    outline-offset: 2px !important;
  }

  /* Exact vertical centering in the navbar */
  nav.navbar .nav-inner {
    align-items: center !important;
  }

  #theme-toggle,
  .ham {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #theme-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  #theme-toggle i {
    margin: 0 !important;
    line-height: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════════
   LESSON PLAYER + QUIZ — responsive across all phone sizes (authoritative)
   ════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Lesson content + scrolling ── */
  .lesson-content-area { padding: 1rem 1rem 2rem !important; }
  .lesson-player-main { -webkit-overflow-scrolling: touch; }

  /* Lesson body typography + media never overflow */
  .lesson-body { font-size: 0.95rem !important; line-height: 1.7 !important; }
  .lesson-body h1 { font-size: 1.4rem !important; }
  .lesson-body h2 { font-size: 1.2rem !important; }
  .lesson-body h3 { font-size: 1.05rem !important; }
  .lesson-body img,
  .lesson-body video,
  .lesson-body iframe { max-width: 100% !important; height: auto !important; }
  .lesson-body pre { overflow-x: auto !important; }
  .lesson-body table { display: block !important; width: 100% !important; overflow-x: auto !important; }

  /* Lesson tabs: horizontally scrollable, compact */
  .lesson-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .lesson-tab { padding: 0.6rem 0.7rem !important; font-size: 0.78rem !important; white-space: nowrap !important; }

  /* Breadcrumb / nav bar */
  .lesson-nav-current { font-size: 0.8rem !important; }

  /* ── Quiz header ── */
  .quiz-header-title { font-size: 1.15rem !important; line-height: 1.25 !important; }
  .quiz-header-subtitle { font-size: 0.85rem !important; }

  /* ── Quiz questions + options ── */
  .quiz-question { padding: 1rem !important; }
  .quiz-question-text { font-size: 0.98rem !important; line-height: 1.55 !important; }
  .quiz-options { gap: 0.7rem !important; margin-top: 1.1rem !important; }
  .quiz-option-label { padding: 0.8rem 0.9rem !important; gap: 0.55rem !important; align-items: flex-start !important; transform: none !important; }
  .quiz-option-label:hover { transform: none !important; box-shadow: none !important; }
  .quiz-option-letter { min-width: 16px !important; font-size: 0.85rem !important; }
  .quiz-option-text { font-size: 0.9rem !important; line-height: 1.5 !important; word-break: break-word !important; }

  /* ── Matching: stack prompt over its dropdown on phones ── */
  .quiz-match-row { flex-wrap: wrap !important; gap: 0.4rem !important; }
  .quiz-match-arrow { display: none !important; }
  .quiz-match-left,
  .quiz-match-select { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }

  /* Submit full width */
  .quiz-submit-button { width: 100% !important; }
}

/* Small phones (≤400px) */
@media (max-width: 400px) {
  .lesson-content-area { padding: 0.85rem 0.85rem 1.5rem !important; }
  .lesson-sidebar { width: 88vw !important; }
  .quiz-question { padding: 0.8rem !important; }
  .quiz-option-label { padding: 0.7rem 0.7rem !important; }
  .quiz-option-text { font-size: 0.86rem !important; }
  .quiz-question-text { font-size: 0.93rem !important; }
  .quiz-header-title { font-size: 1.05rem !important; }
}

/* End mobile-fixes.css */