/* ─────────────────────────────────────────────────────────────
   AirSync Marketing Site — Mobile Polish
   Targets:
     - Tablet:  ≤ 920px  (gentle adjustments — most layouts already scale)
     - Phone:   ≤ 768px  (single-column, comfortable spacing)
     - Narrow:  ≤ 480px  (tight spacing, smaller display type)
   Notes:
     - !important is used liberally because the marketing pages embed
       large inline <style> blocks with high-specificity selectors that
       cannot otherwise be overridden by an external sheet.
     - Apply only mobile-relevant rules; desktop is untouched.
   ───────────────────────────────────────────────────────────── */

/* ── Base safety nets (apply at every width to prevent runaway overflow) ── */
html, body { max-width: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* ─────────────────────────────────────────────────────────────
   Tablet & below
   ───────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  /* Section padding */
  .section { padding: 72px 0 !important; }
  .section + .section { padding-top: 0 !important; }

  /* Containers — already 24/32px desktop; tighten gradually */
  .container, .wrap, .hero-inner, .hero-strip-inner, .footer-inner, .nav { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hide nav-links (tablet/phone) — both site.css and index inline */
  .nav-links { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Phone (≤ 768px) — main mobile breakpoint
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Typography scale ── */
  .h-display, .section-h { font-size: 26px !important; line-height: 1.4 !important; }
  .h-section { font-size: 21px !important; line-height: 1.45 !important; }
  .lede, .section-sub { font-size: 15px !important; line-height: 1.8 !important; }

  /* ── Sections ── */
  .section { padding: 56px 0 !important; }

  /* ── Nav: shrink, keep only primary CTA visible ── */
  .nav-wrap .nav { padding: 12px 16px !important; gap: 12px !important; }
  .brand { font-size: 17px !important; }
  .brand-mark { width: 26px !important; height: 26px !important; font-size: 13px !important; }
  .nav-actions { gap: 8px !important; margin-left: auto !important; }
  /* Surface only the primary CTA — hide every other nav-actions item */
  .nav-actions > *:not(.btn-primary) { display: none !important; }
  .nav-actions .btn-primary { padding: 0 14px !important; height: 36px !important; font-size: 13px !important; }

  /* ── Announce banner ── */
  .announce-inner { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 14px 16px !important; flex-wrap: wrap !important; }
  .announce-cta { width: 100% !important; justify-content: center !important; }
  .announce-meta { flex-wrap: wrap !important; }

  /* ── HERO (homepage) — force single column, hide dashboard mockup ── */
  .hero-inner,
  .hero[data-layout="split"] .hero-inner,
  .hero[data-layout="dashboard-led"] .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .hero-h { font-size: 30px !important; line-height: 1.4 !important; margin: 8px 0 18px !important; }
  .hero-sub { font-size: 15.5px !important; line-height: 1.8 !important; max-width: 100% !important; margin-bottom: 24px !important; }
  /* Dashboard mockup: too detailed to read on phone — hide */
  .hero-visual { display: none !important; }
  .hero-cta { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .hero-cta .btn { width: 100% !important; justify-content: center !important; }
  .hero-supplement { font-size: 11.5px !important; flex-wrap: wrap !important; }

  /* ── Sub-page hero strip ── */
  .hero-strip { padding: 56px 0 64px !important; }
  .hero-strip h1 { font-size: 28px !important; line-height: 1.45 !important; }
  .hero-strip p { font-size: 15px !important; }

  /* ── Eyebrow / display headings ── */
  .eyebrow { font-size: 11.5px !important; }

  /* ── Buttons ── */
  .btn-lg { height: 46px !important; padding: 0 20px !important; font-size: 14px !important; }
  .btn { white-space: normal !important; text-align: center !important; }

  /* ── Generic multi-column grids → single column (homepage + subpages) ── */
  .cta-strip-inner,
  .cta-final-inner,
  .feature-grid,
  .features-3 .feature-grid,
  .integ-grid,
  .integ-inner,
  .integrations-strip,
  .trust-inner,
  .case-grid,
  .cases-grid,
  .testi-grid,
  .testi-row,
  .pricing-grid,
  .pricing-cards,
  .price-grid,
  .differentiation-grid,
  .diff-grid,
  .product-grid,
  .ai-demo-grid,
  .timeline-row,
  .problem-grid,
  .vis-lock,
  .features-rail,
  .stripe-grid,
  .sec-grid,
  .integ-aside .stat-row,
  .anlx-bars,
  .faq-shell,
  .support-inner,
  .company-inner,
  .cta-r-inner,
  .steps-row,
  .footer-inner,
  .support-tiles,
  .sec-grid-3x2,
  .logo-grid,
  .logo-grid.cols-2,
  .logo-grid.cols-3,
  .logo-grid.cols-4,
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Section spacing control — collapse heavy 80–120px desktop padding */
  .ai-demo, .integrations, .cases, .pricing, .differentiation, .problem, .timeline { padding: 56px 0 !important; }

  /* Demo: hide the LINE app stage mockup on phone (too wide to read) */
  .demo-line-stage { display: none !important; }
  .demo-area { gap: 12px !important; }
  .demo-screen { min-height: 440px !important; }

  /* Steps stepper: kill the desktop-only horizontal connector lines */
  .steps-row::before, .steps-row::after { display: none !important; }
  .step-cell { padding: 0 !important; }

  /* Footer bottom row should also stack on phone */
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 20px !important; }

  /* ── Partner row (logos): 3 across on phone ── */
  .partner-row { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .partner { height: 52px !important; padding: 0 8px !important; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding-top: 20px !important; }

  /* ── Tables — wrap rather than overflow ── */
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; }
  thead, tbody, tr { display: table !important; width: 100% !important; table-layout: fixed !important; }

  /* ── Code-like surface stage / dashboard mockups ── */
  .surface-stage,
  .surface-panel,
  .surface-meta,
  .panel-dash,
  .dash-grid,
  .dash-topbar,
  .dash-main { max-width: 100% !important; }

  /* ── Cards & lifts: prevent forced widths ── */
  .lift, .card, .case-card, .pricing-card, .feature-card { max-width: 100% !important; }

  /* ── Reduced fixed-width pricing tables ── */
  .pricing-table { display: block !important; overflow-x: auto !important; }

  /* ── Hero strip (subpage) tighter ── */
  .hero-strip-inner { padding-left: 20px !important; padding-right: 20px !important; }

  /* ── FAQ page accordion: comfortable padding ── */
  .faq-q { font-size: 15.5px !important; }
  .faq-a { font-size: 14.5px !important; }

  /* ── Cta-final variants ── */
  .cta-final-inner { padding: 64px 20px !important; }
  .cta-final-copy h2 { font-size: 26px !important; }

  /* ── Section-head ── */
  .section-head { margin-bottom: 36px !important; }

  /* ── Site notice / top notice ── */
  .notice { font-size: 11px !important; padding: 8px 16px !important; flex-wrap: wrap !important; gap: 8px !important; text-align: center !important; }

  /* ── Trust block stat ── */
  .trust-block .stat-num { font-size: 24px !important; }
}

/* ─────────────────────────────────────────────────────────────
   Narrow phones (≤ 480px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .container, .wrap, .hero-inner, .hero-strip-inner, .footer-inner, .nav { padding-left: 16px !important; padding-right: 16px !important; }

  .h-display, .section-h { font-size: 23px !important; }
  .hero-h { font-size: 26px !important; }
  .hero-strip h1 { font-size: 24px !important; }

  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .partner-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* Brand name only on very narrow */
  .nav-actions .btn-primary { padding: 0 12px !important; font-size: 12.5px !important; }
  .nav-actions .btn-primary .arr { display: none !important; }

  /* Pricing card — large hero price needs to fit narrow phones */
  .price-col { padding: 28px !important; }
  .price-col .pc-price .val { font-size: 42px !important; }
  .price-col .pc-price .ask { font-size: 32px !important; }
  .price-col .pc-header h3 { font-size: 28px !important; }

  /* Trim hero so very long words wrap rather than push the layout */
  .hero-h, .hero-strip h1, .h-display, .section-h { word-break: keep-all !important; overflow-wrap: anywhere !important; }
}