/* ============================================================================
 * Cleared Capital — Mobile Stylesheet
 * ============================================================================
 * Loaded on every page via <link rel="stylesheet" href="/_mobile.css">.
 * Designed for phones first (target: iPhone 13 / Pixel 7 / 390px wide).
 * Activates at <= 900px width with !important to override per-page <style>.
 *
 * Design principles:
 *   1. Touch-first: 48px tap targets, generous spacing, thumb-zone CTAs
 *   2. Native nav patterns: bottom tab bar for app, slide drawer for marketing
 *   3. Mobile typography: 28-32px display, 15-16px body, no squished desktop
 *   4. Performance: kill canvas/particles/blur on phones
 *   5. One job per screen: focused layouts, no compressed multi-col grids
 *   6. Scroll natively: horizontal chip rows, native momentum, no fixed locks
 *
 * Required JS hooks (Claude Code wires these):
 *   .cc-nav-toggle      — hamburger button on marketing nav
 *   .cc-hamburger       — hamburger button on dashboard pages
 *   .cc-backdrop        — dim overlay behind drawer
 *   .cc-open            — added to drawer/nav when opened
 * ============================================================================ */


/* ============================================================================
 *  PART 1 — TOUCH DEVICE NORMALIZATION (always on for touch)
 * ============================================================================ */

@media (hover: none) and (pointer: coarse) {
  /* Kill the desktop custom cursor — it's broken on touch */
  *, *::before, *::after { cursor: auto !important; }
  .cursor, .cursor-ring { display: none !important; }

  /* Disable hover lifts that get stuck "active" on tap */
  *:hover { transform: none !important; }
}


/* ============================================================================
 *  PART 2 — DESKTOP-ONLY ELEMENTS (hide above tablet to keep CSS tidy)
 * ============================================================================ */

@media (min-width: 901px) {
  .cc-hamburger,
  .cc-backdrop,
  .cc-mobile-only,
  .cc-bottom-cta {
    display: none !important;
  }
}


/* ============================================================================
 *  PART 3 — GLOBAL LAYOUT (≤900px)
 * ============================================================================ */

@media (max-width: 900px) {
  /* Stop desktop pages from locking the viewport */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    height: auto !important;
    overflow-y: auto !important;
  }

  /* Universal box sizing safety */
  *, *::before, *::after {
    max-width: 100% !important;
  }

  /* Free-roaming images/SVGs/canvases */
  svg, img, canvas, video, iframe, picture, source {
    max-width: 100% !important;
    height: auto;
  }
}


/* ============================================================================
 *  PART 4 — TYPOGRAPHY SYSTEM (mobile)
 *  Clean, readable, hierarchical. Not desktop sizes scaled down.
 * ============================================================================ */

@media (max-width: 768px) {
  /* Display titles (hero, top of page) */
  .hero h1,
  .hero-title,
  .hero-left h1,
  .doc-title {
    font-size: 32px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
  }

  /* Page titles inside the app shell */
  h1,
  .page-title,
  .form-title,
  .title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    font-weight: 700 !important;
  }

  /* Section headlines on landing page */
  .section-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }

  /* Sub-section / card titles */
  h2,
  .card-title,
  .form-subtitle {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  /* Body / lead copy */
  body {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .hero-sub,
  .section-body,
  .page-sub,
  .form-sub {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* Eyebrow / tag labels */
  .section-tag,
  .page-eyebrow,
  .eyebrow,
  .nav-section,
  .form-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }

  /* Big numeric values (account size, balances) */
  .price-account-size,
  .price-now,
  .acct-num,
  .stat-value,
  .balance-value,
  .total-value,
  .summary-total,
  .pool-value,
  .hero-stat-num {
    font-size: 28px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    word-break: keep-all !important;
  }

  /* Long IDs, refs, breakable text */
  .acct-meta,
  .detail-value,
  .receipt-value,
  .copy-text,
  .field-hint,
  .table .id,
  .code-link,
  .link-url,
  .manual-key-code {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }
}


/* ============================================================================
 *  PART 5 — TAP TARGETS & FORM ELEMENTS
 * ============================================================================ */

@media (max-width: 768px) {
  /* All buttons get a thumb-friendly height */
  .btn,
  .btn-primary, .btn-ghost, .btn-buy, .btn-pay, .btn-save, .btn-cancel,
  .btn-google, .btn-danger, .btn-apply, .btn-secondary, .btn-copy,
  .btn-export, .btn-ifx, .btn-ifx-ghost, .btn-submit,
  .nav-cta,
  button:not(.cc-nav-toggle):not(.cc-hamburger):not(.dot):not(.range-btn):not(.faq-q) {
    min-height: 48px !important;
    padding: 0 1.25rem !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  /* Primary CTA buttons get extra weight */
  .btn-primary,
  .btn-buy,
  .btn-pay,
  .btn-save,
  .btn-submit,
  .nav-cta {
    font-weight: 700 !important;
  }

  /* Form inputs — 16px font prevents iOS zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px !important;
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
  }

  textarea {
    min-height: 96px !important;
    padding: 0.875rem 1rem !important;
  }

  /* Make labels readable */
  label {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Field rows always stack (no side-by-side cramming) */
  .field-row,
  .field-row-3,
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }

  /* Settings/profile field grids stack */
  .field-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Button rows go vertical, full width */
  .btn-row,
  .save-row,
  .form-actions,
  .cta-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
    width: 100% !important;
  }
  .btn-row > *,
  .save-row > *,
  .form-actions > *,
  .cta-row > * {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Toggles stay on one line; label can wrap */
  .toggle-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
  }
  .toggle-info { flex: 1 !important; min-width: 0 !important; }
}


/* ============================================================================
 *  PART 6 — PERFORMANCE / DECORATIVE EFFECTS
 *  Phones can't handle blurs, particles, and full-canvas animations.
 * ============================================================================ */

@media (max-width: 900px) {
  .particle, .sparkle, .confetti,
  .glow-bottom, .glow-top, .spotlight,
  .wrench-rotate,
  canvas#heroCanvas,
  .hero-vignette {
    display: none !important;
  }

  /* Disable expensive backdrop blurs (just use solid backgrounds) */
  .promo-bar,
  nav,
  .top-nav,
  .topbar,
  .summary-card,
  .order-summary {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ============================================================================
 *  PART 7 — MARKETING NAV (Hamburger + Slide-out menu)
 *  Used by: index, about, faq, contact, affiliate-signup, terms, privacy,
 *            risk-disclosure, refund-policy, lifecycle pages, error pages,
 *            checkout success/failed/pending, payout-submitted, 2fa pages,
 *            verify-email, email-verified, password-reset-success
 * ============================================================================ */

/* Hamburger button — invisible above 900px */
.cc-nav-toggle {
  display: none;
  position: relative;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: inherit;
  border-radius: 10px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.cc-nav-toggle:active {
  background: rgba(200,245,90,0.06);
}
.cc-nav-toggle::before,
.cc-nav-toggle::after,
.cc-nav-toggle > span {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
  transition: top 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}
.cc-nav-toggle::before { top: 15px; }
.cc-nav-toggle > span  { top: 21px; }
.cc-nav-toggle::after  { top: 27px; }
.cc-nav-toggle svg { display: none; }

/* Open state — top + bottom collapse into X, middle hides */
nav.cc-nav-open .cc-nav-toggle::before,
.top-nav.cc-nav-open .cc-nav-toggle::before {
  top: 21px; transform: rotate(45deg);
}
nav.cc-nav-open .cc-nav-toggle::after,
.top-nav.cc-nav-open .cc-nav-toggle::after {
  top: 21px; transform: rotate(-45deg);
}
nav.cc-nav-open .cc-nav-toggle > span,
.top-nav.cc-nav-open .cc-nav-toggle > span {
  opacity: 0;
}

@media (max-width: 768px) {
  /* Top nav collapses to: logo (left) + hamburger (right). 56px tall. */
  nav,
  nav.top-nav,
  .top-nav {
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.625rem 1rem !important;
    height: 56px !important;
    gap: 1rem !important;
    background: rgba(8,8,8,0.95) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    z-index: 100 !important;
  }

  /* If a promo bar exists above the nav, push the nav down to clear it */
  .promo-bar ~ nav,
  .promo-bar + nav {
    top: 32px !important;
  }

  .cc-nav-toggle {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    order: 99 !important;
  }

  /* Logo styles: keep brand visible */
  nav .nav-logo,
  .top-nav .logo {
    font-size: 18px !important;
    flex-shrink: 0 !important;
  }

  /* Slide-down menu — covers the screen below the nav */
  nav .nav-links,
  .top-nav .nav-links {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.75rem 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: #0a0a0a !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45) !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: max-height 0.28s ease, opacity 0.18s ease !important;
    z-index: 99 !important;
  }
  /* Account for promo bar spacing */
  .promo-bar ~ nav .nav-links,
  .promo-bar + nav .nav-links {
    top: 88px !important;
  }
  nav.cc-nav-open .nav-links,
  .top-nav.cc-nav-open .nav-links {
    max-height: calc(100vh - 56px) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
  }

  nav .nav-links li,
  .top-nav .nav-links li {
    list-style: none !important;
    width: 100% !important;
    padding: 0 !important;
  }

  nav .nav-links a,
  nav .nav-links li a,
  .top-nav .nav-links a,
  .top-nav .nav-links .nav-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 1.125rem 1.25rem !important;
    text-align: left !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.92) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    text-decoration: none !important;
  }
  nav .nav-links li:last-child a,
  .top-nav .nav-links a:last-child {
    border-bottom: none !important;
  }

  /* CTA at end of menu — make it a real button */
  nav .nav-cta,
  .top-nav .nav-cta {
    margin: 0.875rem 1rem 1.25rem !important;
    width: calc(100% - 2rem) !important;
    height: 52px !important;
    padding: 0 1.25rem !important;
    background: #c8f55a !important;
    color: #080808 !important;
    border-radius: 12px !important;
    border-bottom: none !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-align: center !important;
    justify-content: center !important;
  }
}


/* ============================================================================
 *  PART 8 — APP NAV (Bottom Tab Bar)
 *  Used by: dashboard, accounts, new-challenge, payouts, settings,
 *            verification, affiliate-dashboard, affiliate-marketing,
 *            affiliate-payouts.
 *
 *  Behavior: the desktop sidebar becomes a slide-out drawer (for full nav)
 *            triggered by .cc-hamburger button at the top-left.
 *            Sticky topbar at top, body content full width below it.
 * ============================================================================ */

@media (max-width: 900px) {
  /* App grid → vertical stack */
  .app {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  /* Sidebar becomes a hidden slide-in drawer */
  aside.sidebar,
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 320px) !important;
    height: 100vh !important;
    z-index: 1001 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.6) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  aside.sidebar.cc-open,
  .sidebar.cc-open {
    transform: translateX(0) !important;
  }

  /* Hamburger button — top-left, sits in the topbar */
  .cc-hamburger {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 1002 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15,15,15,0.96) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    color: #edeae4 !important;
    cursor: pointer !important;
  }
  .cc-hamburger svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
  }
  .cc-hamburger:active {
    background: rgba(200,245,90,0.08) !important;
  }

  /* Backdrop dim layer */
  .cc-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 1000 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.28s ease !important;
    backdrop-filter: blur(2px) !important;
  }
  .cc-backdrop.cc-open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Main column — full width */
  .main,
  main.main {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  /* Topbar — pad-left for hamburger room */
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 0.625rem 1rem 0.625rem 4rem !important;
    background: rgba(8,8,8,0.95) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .crumb-page {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  .topbar .actions { gap: 0.5rem !important; }
  .topbar .btn {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 0.875rem !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
  .topbar .icn-btn {
    width: 36px !important;
    height: 36px !important;
  }

  /* Body content area */
  .body,
  .main .body,
  main.main .body {
    overflow: visible !important;
    height: auto !important;
    padding: 1rem 1rem 6rem !important;  /* extra bottom padding for safe scroll */
    max-width: 100% !important;
  }
}


/* ============================================================================
 *  PART 9 — AUTH PAGES (signup / login / forgot-password / reset-password)
 *  Two-panel desktop becomes single-panel mobile.
 * ============================================================================ */

@media (max-width: 900px) {
  body > .page {
    display: block !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
  }
  body > .page > .left,
  body > .page > .left-panel,
  body > .page > .marketing-side {
    display: none !important;
  }
  body > .page > .right {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 2rem 1.25rem 3rem !important;
    overflow: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .form-wrap {
    max-width: 100% !important;
    width: 100% !important;
  }

  .form-header { margin-bottom: 1.5rem !important; }
  .form-title  { font-size: 26px !important; }
  .form-subtitle { font-size: 14px !important; }

  .form { gap: 1rem !important; }

  .divider { margin: 0.5rem 0 !important; }

  .btn-google,
  .btn-primary {
    width: 100% !important;
    justify-content: center !important;
  }

  .stats-row,
  .left-bottom,
  .welcome-card,
  .recent-payout,
  .left-glow {
    display: none !important;
  }

  .terms-row {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}


/* ============================================================================
 *  PART 11 — INDEX HOMEPAGE (the showcase page)
 *  Full mobile redesign covering every section:
 *    11a. Promo bar
 *    11b. Hero
 *    11c. Pool / Payout reserve section
 *    11d. Vault diagram (Payout Reserve / Operations)
 *    11e. Journey path (3 steps)
 *    11f. Bento grid (4 cards: ZAR pricing / 80% split / payouts / support)
 *    11g. Pricing card (R500K horizontal price card)
 *    11h. Rules grid (3-column comparison)
 *    11i. Calculator wrap
 *    11j. Honesty section
 *    11k. FAQ list
 *    11l. Footer
 * ============================================================================ */

@media (max-width: 768px) {

  /* ============================================
   *  11a. Promo bar — single line
   * ============================================ */
  .promo-bar {
    height: 32px !important;
    padding: 0 0.875rem !important;
    font-size: 12px !important;
    gap: 0.5rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .promo-bar-divider,
  .promo-bar-label { display: none !important; }
  .promo-bar-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ============================================
   *  11b. Hero — clean, focused, centered
   * ============================================ */

  /* Hide decorative right column and scroll hint */
  .hero-right,
  .hero-scroll {
    display: none !important;
  }

  .hero {
    min-height: auto !important;
    padding: 0 !important;
    display: block !important;
  }
  .hero-inner {
    display: block !important;
    grid-template-columns: 1fr !important;
    padding: 1.5rem 1.25rem 2.5rem !important;
    max-width: 100% !important;
    gap: 0 !important;
  }
  .hero-left {
    width: 100% !important;
    align-items: stretch !important;
    text-align: left !important;
  }

  /* Badge — single-line tagline, "Live payouts active" prefix hidden */
  .hero-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    padding: 0.5rem 0.875rem !important;
    margin: 0 auto 1.5rem !important;
    width: fit-content !important;
    max-width: 100% !important;
    border-radius: 100px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.02) !important;
    color: rgba(237,234,228,0.85) !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    backdrop-filter: none !important;
  }
  .hero-badge .badge-live { display: none !important; }

  /* Headline */
  .hero h1,
  .hero-left h1 {
    font-size: 30px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 0.75rem !important;
    font-weight: 800 !important;
    text-align: center !important;
  }
  .hero-line {
    display: block !important;
    white-space: nowrap !important;
  }

  /* Sub copy */
  .hero-sub {
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin: 0 auto 1.5rem !important;
    max-width: 100% !important;
    text-align: center !important;
    color: rgba(200,196,190,0.78) !important;
  }

  /* Bullet checklist — minimal, no pill backgrounds */
  .hero-bullets {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
    margin: 0 auto 1.75rem !important;
    width: 100% !important;
    align-items: center !important;
  }
  .hero-bullet {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: rgba(237,234,228,0.92) !important;
    width: auto !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }
  .hero-bullet-icon {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--accent) !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* CTAs */
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin-top: 0 !important;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost,
  .hero-actions a {
    width: 100% !important;
    height: 48px !important;
    padding: 0 1.25rem !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }
  .hero-actions .btn-primary { box-shadow: none !important; }


  /* ============================================
   *  11c. Pool / Payout Reserve section
   *  Desktop: 2-column with vertical divider
   *  Mobile: vertical stack, divider as horizontal bar
   * ============================================ */
  .pool-section {
    padding: 0 !important;
  }
  .pool-inner {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    display: block !important;
  }
  .pool-divider-v {
    width: 100% !important;
    height: 1px !important;
    background: var(--border) !important;
  }
  .pool-panel {
    padding: 2.5rem 1.25rem !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .pool-value {
    font-size: 32px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }
  .pool-label {
    font-size: 11px !important;
  }
  .pool-sub {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .pool-breakdown {
    margin-top: 1.25rem !important;
  }
  .pool-transparency-note {
    margin-top: 1rem !important;
    font-size: 12px !important;
  }


  /* ============================================
   *  11d. Vault diagram — TWO COLUMNS at 1.85fr 1fr on desktop.
   *  Mobile: stack vertically, hide the connecting SVG paths.
   * ============================================ */
  .vault-section {
    padding: 3.5rem 1.25rem 2rem !important;
    max-width: 100% !important;
  }
  .vault-diagram {
    margin-top: 2rem !important;
  }
  .vault-source-wrap {
    margin-bottom: 1.25rem !important;
  }
  .vault-source {
    padding: 0.75rem 1rem !important;
    gap: 0.625rem !important;
  }
  .vault-source-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  .vault-source-label {
    font-size: 12px !important;
  }
  .vault-source-meta {
    font-size: 9px !important;
  }

  /* HIDE the connecting SVG paths — they only make sense on a 2-col layout */
  .vault-paths-svg {
    display: none !important;
  }

  /* Vaults stack vertically, full width */
  .vault-pair {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
    max-width: 100% !important;
  }
  .vault {
    border-radius: 14px !important;
  }
  .vault-header {
    padding: 0.75rem 1rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .vault-header-label {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.3 !important;
  }
  .vault-header-tag,
  .vault-header-pct {
    font-size: 10px !important;
  }
  .vault-body {
    padding: 1.25rem 1rem !important;
  }
  .vault-name {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.5rem !important;
  }
  .vault-percent {
    font-size: 56px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    margin: 0.25rem 0 !important;
  }
  .vault-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-top: 0.75rem !important;
  }
  .vault-footer {
    padding: 1rem !important;
  }
  .vault-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  .vault-stat-label {
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
  }
  .vault-stat-value {
    font-size: 14px !important;
  }
  .vault-tags {
    gap: 0.375rem !important;
    flex-wrap: wrap !important;
  }
  .vault-tag {
    font-size: 11px !important;
    padding: 0.3rem 0.625rem !important;
  }


  /* ============================================
   *  11e. Sections shared style
   * ============================================ */
  .section,
  section.section {
    padding: 3rem 1.25rem !important;
    max-width: 100% !important;
  }
  .section-tag {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 0.75rem !important;
  }
  .section-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.875rem !important;
  }
  .section-body {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: rgba(200,196,190,0.78) !important;
  }
  .sep {
    margin: 0 1.25rem !important;
  }


  /* ============================================
   *  11f. Journey path — vertical timeline
   * ============================================ */
  .journey {
    margin-top: 2rem !important;
  }
  .journey-path {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  .journey-line-track { display: none !important; }
  .journey-step {
    width: 100% !important;
    flex: none !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.875rem !important;
    text-align: left !important;
  }
  .journey-node {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  .journey-node-num {
    font-size: 16px !important;
  }
  .journey-card {
    max-width: 100% !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 1rem 1.125rem !important;
    border-radius: 12px !important;
  }
  .journey-card-tag {
    font-size: 9px !important;
    margin-bottom: 0.5rem !important;
  }
  .journey-card-title {
    font-size: 14px !important;
    margin-bottom: 0.5rem !important;
  }
  .journey-card-body {
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin-bottom: 0.75rem !important;
  }
  .journey-stats {
    gap: 0.3rem !important;
  }
  .journey-stat {
    padding: 0.35rem 0.5rem !important;
  }
  .journey-stat-label,
  .journey-stat-value {
    font-size: 10px !important;
  }
  .journey-replay {
    margin-top: 1.25rem !important;
  }


  /* ============================================
   *  11g. Bento grid (4 cards) — single column
   * ============================================ */
  .bento {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 0.75rem !important;
    margin-top: 2rem !important;
  }
  .bento-card {
    padding: 1.5rem 1.25rem !important;
    border-radius: 14px !important;
  }
  .bento-zar {
    grid-column: span 1 !important;
  }
  .bento-zar-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.25rem !important;
  }
  .bento-zar-left {
    flex: none !important;
  }
  .bento-zar-comparison {
    width: 100% !important;
  }
  .zar-row {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    gap: 0.875rem !important;
  }
  .zar-firm { font-size: 11px !important; }
  .zar-price { font-size: 13px !important; }
  .zar-tag { font-size: 8px !important; }
  .zar-nopes {
    gap: 0.35rem !important;
    margin-top: 0.625rem !important;
  }
  .zar-nope {
    font-size: 11px !important;
  }
  .bento-label {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 0.4rem !important;
  }
  .bento-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin-bottom: 0.4rem !important;
  }
  .bento-body {
    font-size: 12.5px !important;
    line-height: 1.65 !important;
  }
  .bento-split-num {
    font-size: 64px !important;
    margin: 0.5rem 0 !important;
    letter-spacing: -0.04em !important;
  }
  .bento-split-sub {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  .bento-feed {
    margin-top: 0.875rem !important;
    gap: 0.4rem !important;
  }
  .bento-feed-item {
    padding: 0.45rem 0.625rem !important;
    font-size: 10px !important;
  }
  .bento-feed-amount {
    font-size: 12px !important;
  }
  .bento-support-tags {
    margin-top: 0.875rem !important;
    gap: 0.4rem !important;
  }
  .bento-tag {
    padding: 0.3rem 0.7rem !important;
    font-size: 10px !important;
  }
  .same-day-badge {
    margin-top: 0.625rem !important;
    padding: 0.4rem 0.7rem !important;
    font-size: 11px !important;
  }

  /* Tax callout (collapsible inside ZAR card) */
  .tax-callout {
    margin-top: 0.875rem !important;
  }
  .tax-callout-header {
    padding: 0.625rem 0.875rem !important;
  }
  .tax-callout-label {
    font-size: 11px !important;
  }
  .tax-callout-body p {
    font-size: 11.5px !important;
    line-height: 1.65 !important;
  }


  /* ============================================
   *  11h. Pricing card (the R500K horizontal card)
   *  Desktop: complex 2-col with everything inside.
   *  Mobile: clean vertical stack.
   * ============================================ */
  .platform-strip {
    margin: 1.5rem 0 1.75rem !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: center !important;
  }
  .platform-strip-label {
    font-size: 10px !important;
    width: 100% !important;
    text-align: center !important;
  }
  .platform-strip-divider { display: none !important; }
  .platform-item {
    font-size: 12px !important;
  }
  .platform-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .pricing-single {
    padding: 0 !important;
  }
  .price-card-horizontal {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    display: block !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .pch-left,
  .pch-right {
    padding: 1.5rem 1.25rem !important;
    border: none !important;
  }
  .pch-left {
    border-bottom: 1px solid var(--border) !important;
  }
  .pch-badge {
    font-size: 10px !important;
    padding: 0.3rem 0.625rem !important;
    margin-bottom: 0.875rem !important;
  }
  .pch-account {
    font-size: 11px !important;
    margin-bottom: 0.5rem !important;
  }
  .pch-price-wrap {
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
  }
  .pch-price {
    font-size: 36px !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
  }
  .pch-strike {
    font-size: 16px !important;
  }
  .pch-save {
    font-size: 10px !important;
    padding: 0.2rem 0.5rem !important;
  }
  .pch-ratio {
    font-size: 11px !important;
    margin-top: 0.5rem !important;
  }
  .pch-payout-info {
    margin-top: 1.25rem !important;
    padding: 1rem !important;
    border-radius: 10px !important;
  }
  .pch-payout-label {
    font-size: 10px !important;
    margin-bottom: 0.5rem !important;
  }
  .pch-payout-row {
    padding: 0.4rem 0 !important;
    font-size: 12px !important;
  }
  .pch-payout-num,
  .pch-payout-val {
    font-size: 13px !important;
  }
  .pch-note {
    margin-top: 0.875rem !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  .pch-rules-label {
    font-size: 10px !important;
    margin-bottom: 0.625rem !important;
  }
  .pch-rules {
    gap: 0.5rem !important;
    margin-bottom: 1.25rem !important;
  }
  .pch-rules-row {
    font-size: 12px !important;
    padding: 0.5rem 0 !important;
  }
  .pch-platforms-label {
    font-size: 10px !important;
    margin-bottom: 0.625rem !important;
  }
  .pch-platforms {
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
  }
  .pch-platform-badge {
    padding: 0.4rem 0.7rem !important;
    font-size: 11px !important;
  }
  /* The "Take Challenge" button inside this card */
  .price-card-horizontal .btn-primary,
  .pch-right .btn-primary,
  .btn-challenge-horizontal {
    width: 100% !important;
    height: 48px !important;
    margin-top: 1rem !important;
    justify-content: center !important;
    flex-direction: row !important;
    align-items: center !important;
  }


  /* ============================================
   *  11i. Rules grid — 3-col comparison.
   *  Mobile: stack into 3 sections, each as own card.
   * ============================================ */
  .rules-wrap {
    padding: 0 !important;
  }
  .rules-grid {
    grid-template-columns: 1fr !important;
    gap: 0.625rem !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .rules-col {
    padding: 1.25rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
  }
  .rules-col-header {
    margin-bottom: 0.875rem !important;
    padding-bottom: 0.625rem !important;
  }
  .rules-col-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .rules-col-title {
    font-size: 14px !important;
  }
  .rule-row {
    padding: 0.625rem 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .rule-icon {
    width: 16px !important;
    height: 16px !important;
  }

  /* "vs" banner under rules */
  .vs-banner {
    flex-direction: column !important;
    gap: 0.625rem !important;
    padding: 1.25rem !important;
    border-radius: 14px !important;
    margin-top: 1.5rem !important;
  }
  .vs-item {
    width: 100% !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 12.5px !important;
  }


  /* ============================================
   *  11j. Calculator — stack vertically
   * ============================================ */
  .calc-wrap {
    padding: 1.5rem 1.25rem !important;
    border-radius: 14px !important;
    margin-top: 2rem !important;
  }
  .calc-inputs {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  .calc-field {
    padding: 0.875rem 1rem !important;
  }
  .calc-field-label {
    font-size: 10px !important;
    margin-bottom: 0.4rem !important;
  }
  .calc-val {
    font-size: 22px !important;
  }
  .calc-metrics {
    grid-template-columns: 1fr !important;
    gap: 0.625rem !important;
  }
  .calc-best {
    padding: 1rem !important;
    border-radius: 10px !important;
  }
  .calc-best-label {
    font-size: 10px !important;
  }
  .calc-best-value {
    font-size: 24px !important;
  }
  .calc-tiers {
    gap: 0.4rem !important;
  }
  .calc-tier {
    font-size: 12px !important;
    padding: 0.5rem 0.75rem !important;
  }


  /* ============================================
   *  11k. Honesty section (testimonial / quote block)
   * ============================================ */
  .honesty-wrap {
    padding: 0 !important;
    margin: 0 1.25rem !important;
  }
  .honesty-inner {
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: 2rem 1.5rem !important;
    border-radius: 16px !important;
  }
  .honesty-left {
    flex: none !important;
    width: 100% !important;
  }
  .honesty-quote {
    font-size: 18px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
  }
  .honesty-body {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
  }
  .honesty-callout {
    padding: 1rem 1.125rem !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
  }


  /* ============================================
   *  11l. FAQ list on homepage
   * ============================================ */
  .faq-list {
    gap: 0.5rem !important;
    margin-top: 1.5rem !important;
  }
  .faq-item {
    border-radius: 10px !important;
  }
  .faq-q {
    padding: 1rem 1.125rem !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    min-height: 56px !important;
  }
  .faq-a-inner {
    padding: 0 1.125rem 1.125rem !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }


  /* ============================================
   *  Footer (homepage footer specifically)
   * ============================================ */
  footer,
  .footer {
    padding: 2.5rem 1.25rem 1.5rem !important;
    text-align: left !important;
  }
  .footer-grid,
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .footer-logo {
    font-size: 18px !important;
  }
  .footer-reg {
    font-size: 11.5px !important;
    line-height: 1.6 !important;
  }
  .footer-legal {
    font-size: 12px !important;
    line-height: 1.7 !important;
    margin-top: 0.875rem !important;
  }
  .footer-links {
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-top: 0.875rem !important;
    align-items: flex-start !important;
  }
  .footer-links a {
    font-size: 13px !important;
  }
}


/* === Very small phones === */
@media (max-width: 480px) {
  .hero h1, .hero-left h1 { font-size: 26px !important; }
  .hero-sub { font-size: 13.5px !important; }
  .hero-bullet { font-size: 13px !important; }
  .hero-inner { padding: 1.25rem 1.125rem 2rem !important; }

  .section { padding: 2.5rem 1.125rem !important; }
  .section-title { font-size: 23px !important; }

  .pool-value { font-size: 28px !important; }
  .pool-panel { padding: 2rem 1.125rem !important; }

  .vault-percent { font-size: 48px !important; }
  .vault-section { padding: 2.5rem 1.125rem 1.5rem !important; }

  .bento-split-num { font-size: 56px !important; }
  .pch-price { font-size: 32px !important; }

  .calc-val { font-size: 20px !important; }
  .calc-best-value { font-size: 22px !important; }

  .honesty-quote { font-size: 16px !important; }
}


/* ============================================================================
 *  PART 12 — DASHBOARD (the trader's main control panel)
 * ============================================================================ */

@media (max-width: 900px) {
  /* Main grid → single column */
  .main-grid {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
    margin-bottom: 0.875rem !important;
  }

  /* Payout banner — vertical CTA card */
  .payout-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .pb-amount-wrap { width: 100% !important; }
  .pb-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 48px !important;
  }
  .pb-icon {
    width: 40px !important;
    height: 40px !important;
  }

  /* Cards — clean padding */
  .chart-card,
  .rules-card,
  .trades-card {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .chart-title-row,
  .rule-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  .chart-svg-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* ============================================================================
 *  PART 13 — ACCOUNTS LIST PAGE
 * ============================================================================ */

@media (max-width: 768px) {
  .accounts-grid {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }
  .acct-tile {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .tile-top,
  .tile-pg-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.625rem !important;
  }
  .cta-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    border-radius: 14px !important;
    text-align: left !important;
  }
  .cta-card .btn-primary {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ============================================================================
 *  PART 14 — NEW CHALLENGE PAGE
 * ============================================================================ */

@media (max-width: 900px) {
  .wrap { padding: 0 !important; max-width: 100% !important; }
  .main-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .price-card {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .price-card-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.625rem !important;
  }
  .summary-card {
    padding: 1.25rem !important;
    border-radius: 14px !important;
    position: static !important;
  }
  .extra-card {
    padding: 1rem !important;
    border-radius: 12px !important;
  }
  .flow-arrow { display: none !important; }
  .total-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
  }
  .btn-buy {
    width: 100% !important;
    height: 52px !important;
    justify-content: center !important;
  }
  .rules-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
}


/* ============================================================================
 *  PART 15 — CHECKOUT PAGE
 *  Form on top, summary card at bottom (with sticky CTA effect from buy button)
 * ============================================================================ */

@media (max-width: 900px) {
  .main {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 1.25rem 1rem 2rem !important;
    max-width: 100% !important;
  }
  /* Checkout summary moves below the form on mobile */
  .order-summary {
    position: static !important;
    order: 2 !important;
  }
  .checkout-form {
    order: 1 !important;
    gap: 1.25rem !important;
  }
  .summary-card {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .form-section {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 768px) {
  .payment-methods {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .pay-method {
    padding: 0.75rem 0.5rem !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  .btn-pay {
    width: 100% !important;
    height: 52px !important;
    font-size: 16px !important;
    justify-content: center !important;
  }
  .trust-row {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    font-size: 12px !important;
  }
  .nav-secure { font-size: 12px !important; }
  .discount-applied {
    font-size: 13px !important;
    padding: 0.5rem 0.75rem !important;
  }
  .code-row { flex-direction: column !important; gap: 0.5rem !important; }
  .code-row > * { width: 100% !important; }
}


/* ============================================================================
 *  PART 16 — PAYOUTS PAGE
 * ============================================================================ */

@media (max-width: 900px) {
  .payout-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .payout-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px !important;
  }
  .ph-amount-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
  }

  /* IFX info card */
  .ifx-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    border-radius: 14px !important;
    text-align: left !important;
  }
  .ifx-cta-row {
    width: 100% !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .btn-ifx, .btn-ifx-ghost {
    width: 100% !important;
    height: 48px !important;
    justify-content: center !important;
  }

  /* History card with table */
  .history-card {
    padding: 1.25rem 1rem !important;
    border-radius: 14px !important;
    overflow-x: hidden !important;
  }

  /* Form section + summary */
  .form-section {
    padding: 1.25rem !important;
  }
  .summary-cta-wrap {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .summary-cta-wrap .btn-submit {
    width: 100% !important;
    height: 52px !important;
    justify-content: center !important;
  }
}


/* ============================================================================
 *  PART 17 — SETTINGS PAGE
 * ============================================================================ */

@media (max-width: 768px) {
  .form-section,
  .settings-section {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .kyc-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
  }
  /* Save row pinned-feel at bottom */
  .save-row {
    margin-top: 1.5rem !important;
  }
}


/* ============================================================================
 *  PART 18 — AFFILIATE PAGES
 * ============================================================================ */

/* Affiliate tabs row — horizontal scroll */
@media (max-width: 900px) {
  .aff-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    gap: 0.375rem !important;
    padding: 0.25rem !important;
    margin-bottom: 1.25rem !important;
  }
  .aff-tabs::-webkit-scrollbar { display: none !important; }
  .aff-tabs > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  /* Page header — title + tier pill stack */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.875rem !important;
  }
  .tier-pill { align-self: flex-start !important; }

  /* Code/referral card */
  .code-card {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .code-display {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .code-text {
    font-size: 22px !important;
    word-break: break-all !important;
  }
  .code-link {
    word-break: break-all !important;
    font-size: 13px !important;
  }
  .code-actions {
    width: 100% !important;
    display: flex !important;
    gap: 0.5rem !important;
  }
  .btn-copy,
  .btn-secondary {
    flex: 1 !important;
    justify-content: center !important;
    height: 44px !important;
  }

  /* Stats grid — 2 cols on phone */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.625rem !important;
  }
  .stat-card {
    padding: 1rem !important;
    border-radius: 12px !important;
  }

  /* Two-column comparison → stack */
  .two-col {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }

  /* Card containers */
  .chart-card,
  .tier-progress-card,
  .table-card {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.625rem !important;
  }
  .card-actions {
    width: 100% !important;
    overflow-x: auto !important;
    display: flex !important;
    gap: 0.375rem !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Marketing assets grids — all stack to single column */
  .banners-grid,
  .snippets-grid,
  .brand-grid,
  .guidelines-list {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }
  .banner-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .snippet-text {
    font-size: 13px !important;
    max-height: 240px !important;
    line-height: 1.5 !important;
  }

  /* Tracking links */
  .link-row {
    grid-template-columns: 1fr !important;
    gap: 0.625rem !important;
    padding: 1rem !important;
  }
  .link-url {
    word-break: break-all !important;
    font-size: 13px !important;
  }

  /* Section headers */
  .section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.375rem !important;
  }

  /* Earnings hero (affiliate-payouts) */
  .earnings-hero {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px !important;
  }
  .next-payout-block {
    padding-left: 0 !important;
    border-left: none !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
  }

  /* Filter bar */
  .filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .filter-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    scrollbar-width: none !important;
  }
  .filter-tabs::-webkit-scrollbar { display: none !important; }
  .filter-search { width: 100% !important; }

  /* Pagination */
  .pagination {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    font-size: 13px !important;
  }
  .btn-export {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Affiliate signup (marketing page) */
@media (max-width: 768px) {
  .tiers-section,
  .steps-section,
  .form-section {
    padding: 2.5rem 1.25rem !important;
  }
  .tiers-grid {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }
  .steps-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .form-inner {
    padding: 1.75rem 1.25rem !important;
    border-radius: 16px !important;
  }
}


/* ============================================================================
 *  PART 19 — LIFECYCLE PAGES (funded, phase-passed, breach)
 * ============================================================================ */

@media (max-width: 768px) {
  /* Stats trio — keep 3-up but smaller */
  .stats-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .stat-tile {
    padding: 0.875rem 0.625rem !important;
    border-radius: 10px !important;
  }
  .stat-tile .value {
    font-size: 16px !important;
  }
  .stat-tile .label {
    font-size: 10px !important;
  }

  /* Big medal/badge */
  .medal-wrap, .badge-wrap {
    width: 96px !important;
    height: 96px !important;
    margin-bottom: 1.25rem !important;
  }
  .medal, .badge {
    width: 96px !important;
    height: 96px !important;
  }
  .medal svg { width: 44px !important; height: 44px !important; }

  /* Reset offer card (breach page) */
  .reset-offer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    border-radius: 14px !important;
    text-align: left !important;
  }
  .lessons-card {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .share-row {
    font-size: 13px !important;
    padding-top: 1.25rem !important;
  }
  .account-showcase {
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px !important;
  }
  .acc-amount {
    font-size: 32px !important;
  }

  /* Phase progression track */
  .phase-track {
    gap: 0.375rem !important;
  }
  .phase-circle {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .stat-tile {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.875rem 1rem !important;
  }
  .stat-tile .value {
    font-size: 18px !important;
  }
}


/* ============================================================================
 *  PART 20 — STATUS / RESULT PAGES
 *  checkout-success, checkout-failed, checkout-pending, payout-submitted
 * ============================================================================ */

@media (max-width: 768px) {
  .receipt,
  .reason-card,
  .details-card,
  .next-card {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }
  .receipt-row,
  .details-row,
  .reason-row {
    font-size: 14px !important;
    padding: 0.5rem 0 !important;
  }
  .timeline {
    padding: 1.25rem 1rem !important;
    border-radius: 14px !important;
  }
  .amount-display {
    padding: 1.5rem 1.25rem !important;
    border-radius: 14px !important;
  }
}


/* ============================================================================
 *  PART 21 — 2FA SETUP & VERIFY
 * ============================================================================ */

@media (max-width: 768px) {
  /* QR code section */
  .qr-row {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 1.25rem !important;
    padding: 1.25rem !important;
  }
  .qr-box {
    margin: 0 auto !important;
    width: 200px !important;
    height: 200px !important;
  }

  /* Manual key entry */
  .manual-key {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }
  .manual-key-code {
    word-break: break-all !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* App suggestion chips */
  .app-suggestions {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }

  /* 6-digit code input */
  .code-input-wrap {
    gap: 0.375rem !important;
    justify-content: center !important;
  }
  .code-digit {
    width: 44px !important;
    height: 52px !important;
    font-size: 22px !important;
    border-radius: 10px !important;
  }

  /* Recovery codes */
  .codes-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    padding: 1rem !important;
  }
  .code-item {
    font-size: 13px !important;
    padding: 0.5rem 0.625rem !important;
  }
  .code-actions {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  /* Stepper */
  .stepper {
    gap: 0.5rem !important;
    margin-bottom: 1.25rem !important;
  }
  .step-line {
    width: 16px !important;
  }
}

@media (max-width: 480px) {
  .code-digit {
    width: 40px !important;
    height: 48px !important;
    font-size: 20px !important;
  }
}


/* ============================================================================
 *  PART 22 — AUTH FLOW (verify-email, email-verified, password-reset-success)
 * ============================================================================ */

@media (max-width: 768px) {
  .resend-row {
    font-size: 13px !important;
    margin-top: 1.25rem !important;
  }
  .next-item,
  .step-item {
    font-size: 14px !important;
    padding: 0.75rem 0 !important;
  }
  .pw-strength {
    gap: 3px !important;
  }
  .tips-card {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }
  .tip-item {
    font-size: 13px !important;
  }
}


/* ============================================================================
 *  PART 23 — MARKETING PAGES (about, faq, contact, affiliate-signup)
 * ============================================================================ */

@media (max-width: 900px) {
  /* Contact layout */
  .contact-layout {
    grid-template-columns: 1fr !important;
    padding: 2rem 1.25rem 3rem !important;
    gap: 1.25rem !important;
  }
  .info-col { gap: 0.75rem !important; }
  .info-card {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .form-col {
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px !important;
  }

  /* FAQ layout — categories slide horizontally above the questions */
  .faq-layout {
    grid-template-columns: 1fr !important;
    padding: 1.5rem 1.25rem 3rem !important;
    gap: 1.25rem !important;
  }
  .cat-nav {
    position: static !important;
    border-radius: 12px !important;
    padding: 0.75rem !important;
    order: -1 !important;
    background: rgba(15,15,15,0.95) !important;
  }
  .cat-list {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 0.375rem !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 !important;
  }
  .cat-list::-webkit-scrollbar { display: none !important; }
  .cat-list a {
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 13px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 100px !important;
    background: rgba(255,255,255,0.03) !important;
    flex-shrink: 0 !important;
  }
  .cat-list a.active {
    background: rgba(200,245,90,0.1) !important;
    border-color: rgba(200,245,90,0.3) !important;
    color: #c8f55a !important;
  }

  /* About page sections */
  .values-grid,
  .mission,
  .story {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .mission-visual {
    height: 220px !important;
    order: -1 !important;
    border-radius: 14px !important;
  }
  .team-card {
    padding: 1.5rem 1.25rem !important;
    border-radius: 14px !important;
  }
  .team-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
}

@media (max-width: 768px) {
  /* Marketing page hero */
  .hero {
    padding: 3.5rem 1.25rem 2.5rem !important;
  }
  .hero-title {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }

  /* Section padding */
  .content-section,
  .cta-section {
    padding: 3rem 1.25rem !important;
  }

  /* FAQ items — bigger tap targets */
  .faq-q {
    font-size: 15px !important;
    padding: 1rem 1rem !important;
    line-height: 1.4 !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
  }
  .faq-a-inner {
    padding: 0 1rem 1.25rem !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Search input */
  .search-wrap {
    max-width: 100% !important;
  }
  .search-input {
    font-size: 16px !important;
    height: 48px !important;
  }

  /* "Still got questions" buttons */
  .sq-buttons {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .sq-buttons .btn-primary,
  .sq-buttons .btn-ghost {
    width: 100% !important;
    height: 48px !important;
    justify-content: center !important;
  }
}


/* ============================================================================
 *  PART 24 — LEGAL PAGES (terms, privacy, risk-disclosure, refund-policy)
 *  TOC sidebar becomes a horizontal pill row at the top.
 * ============================================================================ */

@media (max-width: 900px) {
  .doc-layout {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 1.5rem 1.25rem 3rem !important;
  }
  .toc {
    position: static !important;
    max-height: none !important;
    border-radius: 12px !important;
    padding: 0.75rem !important;
    order: -1 !important;
    background: rgba(15,15,15,0.95) !important;
  }
  .toc-list {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0.375rem !important;
  }
  .toc-list::-webkit-scrollbar { display: none !important; }
  .toc-list a {
    font-size: 13px !important;
    padding: 0.5rem 0.875rem !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 100px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    background: rgba(255,255,255,0.02) !important;
  }
  .toc-list a.active {
    background: rgba(200,245,90,0.1) !important;
    border-color: rgba(200,245,90,0.3) !important;
    color: #c8f55a !important;
  }
}

@media (max-width: 768px) {
  .doc-header {
    padding: 3rem 1.25rem 2rem !important;
  }
  .doc-title {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
  .doc-content h2 {
    font-size: 18px !important;
    margin-top: 2rem !important;
  }
  .doc-content h3 {
    font-size: 16px !important;
  }
  .doc-content p,
  .doc-content li {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  .callout {
    padding: 1rem 1.25rem !important;
    border-radius: 10px !important;
  }
  .doc-footer {
    padding: 1.5rem 1.25rem !important;
    font-size: 13px !important;
  }
}


/* ============================================================================
 *  PART 25 — ERROR & SYSTEM PAGES (404, 500, maintenance)
 * ============================================================================ */

@media (max-width: 768px) {
  .error-code {
    font-size: 96px !important;
    line-height: 1 !important;
    margin-bottom: 1rem !important;
  }
  .quick-links {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
    gap: 0.5rem !important;
  }
  .quick-link {
    padding: 0.875rem 0.75rem !important;
    border-radius: 12px !important;
  }
  .error-detail {
    flex-direction: column !important;
    padding: 1.25rem !important;
    gap: 0.75rem !important;
    border-radius: 12px !important;
  }
  .status-card {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .progress-card,
  .affected-list {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .affected-item {
    font-size: 14px !important;
    padding: 0.625rem 0 !important;
  }
}


/* ============================================================================
 *  PART 26 — VERIFICATION (KYC) PAGE
 * ============================================================================ */

@media (max-width: 768px) {
  .form-card {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .form-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.625rem !important;
  }
  .form-progress {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }
  .form-body {
    padding: 1.25rem !important;
  }
  .form-foot {
    padding: 1rem 1.25rem !important;
  }
  .form-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .form-actions > * {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ============================================================================
 *  PART 27 — PAYOUT REQUEST (split panel becomes single)
 *  Uses .page > .left + .right layout.
 *  Left side hidden, right side full width — handled in PART 9.
 *  This section adds payout-specific tweaks.
 * ============================================================================ */

@media (max-width: 900px) {
  .split-card {
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }
  .balance-card {
    padding: 1.5rem 1.25rem !important;
    border-radius: 14px !important;
  }
  .quick-amounts {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .info-row {
    font-size: 14px !important;
    padding: 0.625rem 0 !important;
  }
  .confirm-row {
    padding: 1rem !important;
    border-radius: 12px !important;
  }
}


/* ============================================================================
 *  PART 28 — TABLES (universal — works on any page with a table)
 *  Mobile pattern: horizontal scroll inside a container, NOT cell wrapping.
 * ============================================================================ */

@media (max-width: 768px) {
  .table-wrap,
  .table-scroll,
  .history-card,
  .table-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table,
  .table {
    min-width: 100% !important;
    white-space: nowrap !important;
  }
  .table th,
  .table td,
  table th,
  table td {
    padding: 0.625rem 0.75rem !important;
    font-size: 13px !important;
  }
  /* Sticky first column for ID/date readability (optional, breaks on iOS Safari sometimes) */
  /* not enabled by default — uncomment if needed */
}


/* ============================================================================
 *  PART 29 — FOOTER
 * ============================================================================ */

@media (max-width: 768px) {
  .footer {
    padding: 2.5rem 1.25rem 2rem !important;
    text-align: center !important;
    font-size: 13px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: left !important;
  }
  .footer h4 {
    font-size: 13px !important;
    margin-bottom: 0.625rem !important;
  }
  .footer a {
    display: inline-block !important;
    padding: 0.25rem 0 !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center !important;
    padding-top: 1.5rem !important;
    margin-top: 1.5rem !important;
  }
}


/* ============================================================================
 *  PART 30 — VERY SMALL SCREENS (≤ 380px) FINE-TUNING
 * ============================================================================ */

@media (max-width: 380px) {
  /* Tighter container padding */
  .body,
  .main .body {
    padding: 0.875rem !important;
  }

  /* Tighter card padding */
  .form-section,
  .settings-section,
  .card,
  .stat-card,
  .price-card,
  .summary-card,
  .acct-card {
    padding: 1rem !important;
  }

  /* Hero scales down */
  .hero h1, .hero-left h1 {
    font-size: 24px !important;
  }
  .hero-inner {
    padding: 1rem 1rem 2rem !important;
  }
  .hero-sub { font-size: 13px !important; }

  /* Section titles scale down */
  .section-title {
    font-size: 22px !important;
  }
  .doc-title {
    font-size: 24px !important;
  }

  /* Big numbers */
  .price-account-size,
  .acct-num,
  .pool-value {
    font-size: 24px !important;
  }

  /* Code digits — very compact */
  .code-digit {
    width: 38px !important;
    height: 46px !important;
    font-size: 18px !important;
  }
}


/* ============================================================================
 *  PART 31 — STICKY CTA BARS
 *  On checkout, new-challenge, payout-request: keep the primary action
 *  always reachable by thumb, pinned to the bottom of the viewport.
 * ============================================================================ */

@media (max-width: 768px) {
  /* Checkout — pay button stays at bottom */
  body.checkout-page .btn-pay,
  .summary-card .btn-pay {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    margin: 1rem -1.25rem -1.25rem !important;
    border-radius: 0 !important;
    height: 56px !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.4) !important;
  }

  /* Add bottom safe padding to the body content so sticky bar doesn't cover content */
  body.has-sticky-cta .body,
  body.has-sticky-cta .main {
    padding-bottom: 80px !important;
  }

  /* iOS safe-area for sticky elements */
  @supports (padding: max(0px)) {
    body > .page,
    .body,
    .main {
      padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
    }
  }
}


/* ============================================================================
 *  PART 32 — VISUAL POLISH
 *  Final professional touches
 * ============================================================================ */

@media (max-width: 768px) {
  /* Remove all border-radius weirdness — keep pills/cards uniform */
  .btn-primary,
  .btn-buy,
  .btn-pay,
  .btn-save,
  .btn-cancel,
  .btn-google,
  .btn-secondary {
    border-radius: 12px !important;
  }

  /* Card rhythm — 14px radius is the standard */
  .form-section,
  .settings-section,
  .card,
  .stat-card,
  .price-card,
  .summary-card,
  .acct-card,
  .acct-tile,
  .info-card,
  .form-card,
  .chart-card,
  .rules-card,
  .trades-card,
  .table-card,
  .tier-progress-card,
  .reset-offer,
  .lessons-card,
  .extra-card,
  .form-col,
  .ifx-card,
  .history-card,
  .next-card,
  .reason-card,
  .details-card,
  .receipt,
  .timeline,
  .status-card,
  .progress-card,
  .affected-list,
  .balance-card,
  .split-card,
  .confirm-row,
  .form-inner,
  .code-card {
    border-radius: 14px !important;
  }

  /* Hero cards / banners */
  .payout-banner,
  .payout-hero,
  .earnings-hero,
  .account-showcase,
  .amount-display {
    border-radius: 16px !important;
  }

  /* Modal-style centered cards on result pages */
  body > .page > .card {
    border-radius: 20px !important;
  }

  /* Buttons inside cards always look like buttons */
  .pay-method,
  .quick-amount,
  .cat-list a,
  .toc-list a,
  .filter-tab,
  .range-btn {
    border-radius: 10px !important;
  }

  /* Inputs */
  input, select, textarea {
    border-radius: 10px !important;
  }
}


/* ============================================================================
 *  PART 33 — MOTION REDUCTION (reduce battery drain on mobile)
 * ============================================================================ */

@media (max-width: 900px) {
  /* Disable expensive transitions on decorative elements */
  .reveal,
  .fade-up,
  .fade-in,
  [class*="reveal-delay"],
  [class*="fade-up delay"] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* But keep functional transitions (drawer, accordion, hamburger) */
  .cc-nav-toggle,
  .cc-nav-toggle::before,
  .cc-nav-toggle::after,
  .cc-nav-toggle > span,
  aside.sidebar,
  .sidebar,
  .cc-backdrop,
  nav .nav-links,
  .top-nav .nav-links,
  .faq-a,
  .faq-q {
    transition-duration: 0.25s !important;
  }
}