/* ============================================
   RESPONSIVE — Tablet + Mobile breakpoints
   ============================================ */

/* ─── TABLET (1024px and below) ─── */
@media (max-width: 1024px) {

  .hero-split { grid-template-columns: 1fr; gap: 40px; }
  .waveform-container { max-width: 380px; margin: 0 auto; }

  .bento { grid-template-columns: 1fr 1fr; }
  .b-1 { grid-column: 1/2; }
  .b-2 { grid-column: 2/3; }
  .b-3 { grid-column: 1/2; }
  .b-4 { grid-column: 2/3; }

  .demo-split,
  .about-split,
  .contact-grid { grid-template-columns: 1fr; }

  .timeline { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .timeline::before { display: none; }
}

/* ─── MOBILE (768px and below) ─── */
@media (max-width: 768px) {
  .wrap { padding: 0 20px; }
  .sec { padding: 80px 0; }

  /* ── Mobile Nav Dropdown ── */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg2);
    border-bottom: 1px solid var(--glass-border);
    padding: 12px 20px 16px;
    z-index: 99;
  }
  .nav-links a {
    padding: 12px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--glass-border);
  }
  .nav-links a:last-of-type {
    border-bottom: none;
  }
  .nav-links .theme-toggle {
    margin: 12px auto 4px;
    align-self: center;
  }
  .nav-links .btn-nav {
    margin-top: 8px;
    text-align: center;
    width: 100%;
    color: white;
  }
  .hamburger { display: block; }

  /* ── Hero ── */
  .hero { padding: 130px 0 80px; min-height: auto; }

  /* ── Bento / Services ── */
  .bento { grid-template-columns: 1fr; }
  .b-1, .b-2, .b-3, .b-4 { grid-column: auto; }

  /* ── Use Cases ── */
  .uc-grid { grid-template-columns: 1fr; }

  /* ── Timeline ── */
  .timeline { grid-template-columns: 1fr 1fr; }

  /* ── Audio Player ── */
  .audio-box {
    flex-direction: column;
    padding: 16px 20px;
    gap: 14px;
    align-items: stretch;
  }
  .ab-play {
    width: 44px;
    height: 44px;
    align-self: flex-start;
  }
  .ab-top { justify-content: space-between; }

  /* ── Provider Table (Legal page) ── */
  .provider-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px -20px 20px;
    padding: 0 20px;
  }
  .provider-table {
    min-width: 540px;
  }

  /* ── Contact Form ── */
  .f-row { grid-template-columns: 1fr; }
  .ct-form { padding: 24px 20px; }

  /* ── Footer ── */
  .ft-top { flex-direction: column; gap: 28px; }
  .ft-cols { gap: 32px; flex-wrap: wrap; }
  .ft-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* ── CTA ── */
  .cta-sec { padding: 72px 0; }
  .cta-sec::before { width: 300px; height: 300px; }

  /* ── Float Badges ── */
  /*.float-badge { display: none; } */

  /* ── Legal Page ── */
  .doc-tabs { width: 100%; }
  .doc-tab { flex: 1; text-align: center; padding: 10px 12px; font-size: 0.78rem; }
  .legal-hero { padding: 140px 0 48px; }
}

/* ─── SMALL PHONES (480px and below) ─── */
@media (max-width: 480px) {

  /* ── Tighter spacing ── */
  .sec { padding: 64px 0; }
  .sec-head { margin-bottom: 36px; }

  /* ── Hero adjustments ── */
  .hero { padding: 120px 0 60px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn-p,
  .hero-btns .btn-s { width: 100%; text-align: center; justify-content: center; }

  /* ── Section titles ── */
  .sec-title { font-size: clamp(1.5rem, 7vw, 2rem); }

  /* ── Marquee bar ── */
  .marquee-item .mi-val { font-size: 1.2rem; }
  .marquee-track { gap: 40px; }

  /* ── Bento cards ── */
  .bento-card { padding: 24px 20px; }

  /* ── Timeline — single column ── */
  .timeline { grid-template-columns: 1fr; gap: 32px; }

  /* ── Use case cards ── */
  .uc { padding: 22px 20px; }

  /* ── Audio player fine-tuning ── */
  .audio-box { padding: 14px 16px; }
  .ab-play { width: 40px; height: 40px; }
  .ab-info strong { font-size: 0.8rem; }
  .ab-bottom { gap: 8px; }

  /* ── Demo features ── */
  .demo-features-wrap { margin-top: 36px !important; }
  .d-feat { padding: 14px 12px; }

  /* ── About values ── */
  .a-val { padding: 16px 14px; }

  /* ── CTA ── */
  .cta-sec { padding: 56px 0; }
  .cta-btns { flex-direction: column; }
  .cta-btns .btn-p,
  .cta-btns .btn-s { width: 100%; text-align: center; justify-content: center; }

  /* ── Contact ── */
  .contact-sec { padding: 64px 0; }
  .ct-info h3 { font-size: 1.4rem; }
  .ct-form { padding: 20px 16px; }

  /* ── Footer ── */
  .ft-cols { flex-direction: column; gap: 24px; }
  .ft-brand p { max-width: 100%; }

  /* ── Legal Page ── */
  .legal-hero { padding: 120px 0 36px; }
  .legal-hero p { font-size: 0.88rem; }
  .legal-body { padding: 36px 0 80px; }
  .policy-section { margin-bottom: 40px; }
  .policy-section h2 { font-size: 1.2rem; }
  .policy-callout { padding: 16px 18px; }
}