html,
body {
  overflow-x: hidden;           /* no horizontal scroll anywhere */
  overscroll-behavior-x: none;  /* disable iOS rubber-band swipe */
}
/* css/mobile.css */
/*HEAD or custom.css*/

  /* 1) Remove mobile bg and visuals by default */
  .hero-header {
    background-image: none !important;
  }
  .hero-visual {
    display: none;
  }

  /* 2) Only on desktop (≥768px) show bg + image */
  @media (min-width: 768px) {
    .hero-header {
      background-image: url('img/bg/waves.jpg') !important;
      background-size: cover;
      background-position: center;
    }
    .hero-visual {
      display: block;
    }
  }
</style>


/*------------------------------------------------
  Mobile‐only: make commission/example tables
  horizontally scrollable with sticky headers
------------------------------------------------*/
/* MOBILE ONLY: show tables and enable horizontal scroll */
.commission-table,
.example-table {
  display: block !important;               /* force visible as block */
  position: relative !important;           /* for sticky headers/pseudo-elements */
  width: 100% !important;                  /* fill container */
  overflow-x: auto !important;             /* allow sideways pan */
  -webkit-overflow-scrolling: touch;        /* smooth on iOS */
  margin: 1.5rem 0 !important;             /* vertical spacing */
}

/* Sticky header row so column titles stay in view */
.commission-table thead,
.example-table thead {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 5;
}

/* Prevent cell wrapping and tighten padding */
.commission-table th,
.commission-table td,
.example-table th,
.example-table td {
  white-space: nowrap;
  padding: 0.5rem 1rem !important;
}

.commission-table,
.example-table {
  display: block !important;             /* allow overflow on the table element */
  width: 100% !important;
  overflow-x: auto !important;           /* enable horizontal scroll */
  -webkit-overflow-scrolling: touch;      /* smooth iOS scrolling */
  margin-bottom: 1.5rem !important;
}

/* Keep the header row visible while scrolling */
.commission-table thead,
.example-table thead {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

/* Ensure cells don’t wrap their content */
.commission-table td,
.example-table td {
  white-space: nowrap;
  padding: 0.5rem 1rem !important;
}

/* Optional: give a subtle fade at the edges to indicate scroll */
.commission-table::after,
.example-table::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

@media (max-width: 767px) {
  /* Make both commission and example tables sit full-width on phones */
  .table-scroll {
    width: 100% !important;       /* fill 100% of viewport */
    max-width: none !important;    /* remove any desktop caps */
    margin: 0rem auto !important;  /* center with vertical breathing room */
    padding: 0 0rem !important;    /* gutter so cells don’t touch edges */
    overflow-x: hidden !important; /* remove horizontal scroll */
  }

  /* Ensure the table inside stretches to its container */
  .table-scroll table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;            /* allow cells to size naturally */
  }

  /* Optional: slightly shrink font for very wide tables */
  .table-scroll table th,
  .table-scroll table td {
    font-size: 0.95rem;
  }

  /* MOBILE: Fit example‐payout tables fully in view */
  .example-table {
    width: 100% !important;      /* span full width of its container */
    table-layout: fixed;         /* divide width equally among columns */
  }

  .example-table th,
  .example-table td {
    padding: 0.35rem 0.5rem !important;  /* tighter cell padding */
    font-size: 0.9rem;                   /* slightly smaller text */
    white-space: nowrap;                 /* prevent wrapping */
    overflow: hidden;                    /* hide any overflow */
    text-overflow: ellipsis;             /* indicate truncated text */
  }

  /* center & enlarge table text */
  .commission-table {
    width: 100% !important;
    font-size: 1rem !important;
    margin: 0 auto !important;
  }

  /* style the small notes under each pct */
  .pct-note {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.25rem;
    font-style: italic;
  }
  /* Make the table divide its width evenly among 3 columns */
  .commission-table,
  .example-table {
    table-layout: fixed;
    width: 100% !important;
  }

  /* Allow header text to break into multiple lines */
  .commission-table th,
  .example-table th {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.2;
    font-size: 0.9rem;
    padding: 0.5rem 0.5rem !important;
  }

  /* Tweak body cells padding to match */
  .commission-table td,
  .example-table td {
    padding: 0.5rem 0.5rem !important;
    font-size: 0.9rem;
  }

  /* Always show the deep-dive examples on mobile */
  .deep-dive {
    display: block !important;
  }
  .deep-dive details {
    display: block !important;
  }
  .deep-dive summary {
    width: 100% !important;
    text-align: center;
  }

  /* Stack bonus-tier cards vertically */
  .bonus-tiers {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Full-width, tap-friendly buttons */
  .bnt,
  .bnt-contrast,
  .btn-affiliate,
  .btn-affiliate-contrast,
  .plan-button {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 1rem auto !important;
    padding: 1rem 1.5rem !important;
  }
  /* MOBILE-ONLY: ensure white‐contrast buttons show up */
  .bnt-contrast,
  .btn-contrast {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 1rem auto !important;
    padding: 1rem 1.5rem !important;
    background-color: #fff !important;
    color: #000 !important;
    border: none !important;
    border-radius: 2rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    overflow: visible !important;
  }

  /* MOBILE-ONLY: clip the gradient into the text */
  .bnt-contrast .gradient-text,
  .btn-contrast .gradient-text {
    background-image: linear-gradient(135deg, #0997d9 0%, #ff0090 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }


  /* Tighter padding on affiliate section */
  .affiliate-section {
    padding: 1.5rem 0 !important;
  }

  /* Tighter padding in tables (if any remain) */
  .commission-table th,
  .commission-table td,
  .example-table th,
  .example-table td {
    padding: 0.5rem 0.75rem !important;
  }

  /* Pricing section tweaks on mobile */
  .pricing-section .plan-title {
    font-size: 1.25rem !important;
  }
  .pricing-section .plan-price {
    font-size: 2rem !important;
  }
  .pricing-section .features li {
    font-size: 0.9rem !important;
  }
  /* Remove all glow/outline from the “See example payouts” toggle */
  .deep-dive summary,
  .deep-dive summary:hover,
  .deep-dive summary:focus,
  .deep-dive summary:active,
  .details[open] summary,
  details[open] summary {
    outline: none !important;
    box-shadow: none !important;
  }
}