/* ─────────────────────────────────────────────────────────────
   10-responsive.css
   Mobile breakpoint — 768px
   All multi-column layouts collapse to single column below 768px.
───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Global section padding ── */
  section {
    padding: 70px 6%;
    /* NOTE: do NOT set overflow-x: hidden here — it clips
       transformed cards and breaks inner scroll containers */
  }

  /* ── Hero ── */
  #hero {
    padding: 80px 6%;
  }

  .hero__headline {
    font-size: 38px;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .hero__subheadline {
    font-size: 15px;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .hero__offer-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── Section headings ── */
  .section-heading {
    font-size: 32px;
    word-break: break-word;
  }

  /* ── Section 2 · Who — single column grid ── */
  .who__grid {
    grid-template-columns: 1fr;
  }

  /* ── Section 4 · Vision — stack stats vertically ── */
  .vision__quote {
    font-size: 24px;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .vision__stats {
    flex-direction: column;
    gap: 32px;
    align-items: center;
  }

  /* ── Results section — single column ── */
  .results__grid {
    grid-template-columns: 1fr;
  }

  .results__metric {
    font-size: 38px;
  }

  /* ── Section 5 · Mechanism — tighten timeline for narrow screens ── */
  .timeline {
    padding-left: 44px;
  }

  .timeline::before {
    left: 11px;
  }

  .timeline__number {
    left: -44px;
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  /* ── Deliverables — single column + footer wraps ── */
  .deliverables__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .deliverables__footer {
    flex-wrap: wrap;
    gap: 14px;
  }

  /* ── Comparison table ──
     .comparison__scroll is the ONLY scrollable element.
     The section and .inner stay at 100% width — they do not scroll.
     The table itself is allowed a minimum width so columns
     don't collapse; users swipe the wrapper to see all columns. ── */
  #comparison .inner {
    width: 100%;
    overflow: visible; /* let .comparison__scroll handle scrolling */
  }

  .comparison__scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison__table {
    min-width: 520px; /* wide enough to be readable; wrapper scrolls */
    width: 520px;
  }

  /* ── Section 6 · Offer — single column cards ── */
  .offer__cols {
    grid-template-columns: 1fr;
  }

  /* ── FAQ ── */
  .faq__question-text {
    font-size: 15px;
  }

  /* ── Section 7 · CTA ── */
  #cta {
    padding: 80px 6%;
  }

  .cta__headline {
    font-size: 32px;
    word-break: break-word;
  }

  /* ── Footer logo scales down on mobile ── */
  .logo-lockup {
    width: 140px;
  }

  /* ── Ticker ── */
  .ticker__item {
    font-size: 11px;
    padding: 0 20px;
  }

  /* ── Hero orbs — shrink so they stay within #hero's overflow:hidden ── */
  .hero__orb--1 {
    width: 280px;
    height: 220px;
  }

  .hero__orb--2,
  .hero__orb--3 {
    display: none;
  }

}