/* ═══════════════════════════════════════
   DictaScribe — Advanced Responsive
   Complements style.css (no duplicates)
   ═══════════════════════════════════════ */

/* ── Safe Areas (iPhone notch) ── */
@supports (padding: env(safe-area-inset-top)) {
  .nav { padding-top: env(safe-area-inset-top); }
  .footer { padding-bottom: env(safe-area-inset-bottom); }
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; }
  .hero-img:hover > img { transform: none !important; }
  .step-card:hover, .spec-card:hover, .pricing-card:hover, .audience-tag:hover {
    transform: none !important;
  }
}

/* ══════════════════════════════════════
   1440px — Large Desktop
   ══════════════════════════════════════ */
@media (max-width: 1440px) {
  .hero h1 { font-size: 3rem; }
  .section-title { font-size: 2.6rem; }
  .cta-inner h2 { font-size: 2.8rem; }
}

/* ══════════════════════════════════════
   1024px — Tablet Landscape
   (extends style.css 1024px breakpoint)
   ══════════════════════════════════════ */
@media (max-width: 1024px) {
  .feature-row { gap: 48px; }
  .pricing-price { font-size: 2.6rem; }
  .stats-grid { gap: 24px; }
  .testimonial-card { padding: 40px 32px; }
}

/* ══════════════════════════════════════
   768px — Tablet
   Mobile Nav Overlay + layout tweaks
   ══════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Mobile Nav Overlay ── */
  .nav-links {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    background: #ffffff !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .menu-open .nav-links {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .menu-open .nav-links a {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
  }
  .menu-open .nav-links a::after {
    display: none !important;
  }
  .hamburger {
    z-index: 999999 !important;
    position: relative !important;
  }
  .nav-cta { display: none !important; }
  .menu-open .nav-cta {
    display: flex !important;
    flex-direction: column; align-items: center; gap: 12px;
    position: fixed; bottom: 60px; left: 0; right: 0; z-index: 999999; padding: 0 28px;
  }
  .menu-open { overflow: hidden !important; }

  /* ── Nav z-index fix ── */
  .nav { z-index: 999999 !important; }

  /* ── Hero Mobile ── */
  .hero-grid { text-align: center; }
  .hero .subtitle { margin-left: auto; margin-right: auto; }
  .hero-badge { justify-content: center; }
  .hero .btn-group { justify-content: center; }
  .hero-img img { max-width: 85%; margin: 0 auto; }

  /* ── Feature rows: ensure stack ── */
  .feature-text { text-align: center; }
  .feature-list li { justify-content: center; text-align: left; }

  /* ── Pricing featured first ── */
  .pricing-grid { display: flex; flex-direction: column; }
  .pricing-card.featured { order: -1; }

  /* ── FAQ full-width ── */
  .faq-list { max-width: 100%; }
  .faq-question { padding: 18px 20px; }
  .faq-answer-inner { padding: 0 20px 18px; }

  /* ── Footer centered ── */
  .footer-grid { text-align: center; }
  .footer-brand p { max-width: 100%; margin: 0 auto; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-social { justify-content: center; }

  /* ── Typography scale ── */
  .section-title { font-size: 2rem; }
  .section-sub { font-size: .95rem; }
  .feature-text h3 { font-size: 1.5rem; }
  .pricing-name { font-size: 1.15rem; }
  .pricing-price { font-size: 2.4rem; }

  /* ── Touch targets ── */
  .btn { min-height: 44px; }
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
  .faq-question { min-height: 44px; }
  .footer-col a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .footer-social a { min-width: 44px; min-height: 44px; }
}

/* ══════════════════════════════════════
   480px — Mobile
   ══════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Typography scale ── */
  .hero h1 { font-size: 1.85rem; }
  .section-title { font-size: 1.7rem; }
  .cta-inner h2 { font-size: 1.8rem; }
  .feature-text h3 { font-size: 1.3rem; }
  .testimonial-text { font-size: 1rem; }
  .section-sub { font-size: .88rem; }

  /* ── Hero ── */
  .hero { padding: 100px 0 48px; }
  .hero .btn-group { flex-direction: column; width: 100%; }
  .hero .btn-group .btn { width: 100%; justify-content: center; }
  .hero-img img { max-width: 100%; }

  /* ── Steps: horizontal scroll-snap carousel ── */
  .steps-grid {
    display: flex !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px; padding-bottom: 8px;
    scrollbar-width: none;
  }
  .steps-grid::-webkit-scrollbar { display: none; }
  .step-card {
    flex: 0 0 85vw; max-width: 340px;
    scroll-snap-align: center;
  }

  /* ── Stats: stack on mobile ── */
  .stats-grid { grid-template-columns: 1fr; gap: 16px; }
  .stat-number { font-size: 2.2rem; }

  /* ── Containers tighter ── */
  .container, .container-sm, .container-lg { padding: 0 18px; }

  /* ── Sections tighter ── */
  .section { padding: 56px 0; }
  .section-lg { padding: 72px 0; }
  .section-header { margin-bottom: 40px; }

  /* ── Pricing ── */
  .pricing-card { padding: 32px 24px; }
  .pricing-price { font-size: 2.2rem; }

  /* ── Compare table ── */
  .compare-wrapper { margin: 0 -18px; border-radius: 0; }

  /* ── CTA ── */
  .cta-section { padding: 80px 0; }
  .cta-inner p { font-size: .95rem; }

  /* ── Testimonial ── */
  .testimonial-card { padding: 28px 18px; }
  .testimonial-quote { font-size: 5rem; left: 16px; top: 8px; }
}

/* ══════════════════════════════════════
   360px — Small Mobile
   ══════════════════════════════════════ */
@media (max-width: 360px) {
  .hero h1 { font-size: 1.6rem; }
  .section-title { font-size: 1.5rem; }
  .cta-inner h2 { font-size: 1.55rem; }
  .btn { padding: 12px 20px; font-size: .85rem; }
  .btn-lg { padding: 14px 28px; font-size: .9rem; }
  .container, .container-sm, .container-lg { padding: 0 14px; }
  .pricing-price { font-size: 2rem; }
  .stat-number { font-size: 2rem; }
  .step-card { flex: 0 0 90vw; }
  .audience-tag { padding: 10px 18px; font-size: .82rem; }
  .spec-card { padding: 24px 20px; }
}