/* =============================================================================
   PINGR — MOBILE PRICING PAGE
   ============================================================================= */
@media screen and (max-width: 768px) {

  /* ── Pricing grid — stack vertically ─────────────────────────────────────── */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    margin-bottom: 40px !important;
  }

  .price-card {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  .price-card:hover { transform: none !important; }

  /* ── Page hero ───────────────────────────────────────────────────────────── */
  .pricing-hero,
  .price-hero {
    padding: 80px 20px 40px !important;
  }
  .pricing-hero h1,
  .price-hero h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
  }
  .pricing-hero p,
  .price-hero p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* ── Price numbers ───────────────────────────────────────────────────────── */
  .price-amount { font-size: 48px !important; }
  .price-period { font-size: 14px !important; }

  /* ── Feature lists ───────────────────────────────────────────────────────── */
  .price-features { gap: 10px !important; }
  .price-feature  { font-size: 13px !important; }

  /* ── CTA buttons ─────────────────────────────────────────────────────────── */
  .price-cta { height: 48px !important; font-size: 13px !important; width: 100% !important; }

  /* ── FAQ section ─────────────────────────────────────────────────────────── */
  .faq-section { padding: 40px 14px !important; }
  .faq-item { padding: 16px !important; }
  .faq-question { font-size: 14px !important; }
  .faq-answer   { font-size: 13px !important; }

  /* ── Comparison table — hide on mobile, show pricing cards ───────────────── */
  .comparison-table { display: none !important; }

  /* ── Topbar ──────────────────────────────────────────────────────────────── */
  .topbar { width: 100vw !important; max-width: 100vw !important; }
  .topbar__inner { padding: 0 14px !important; }
  .topnav a:not(.nav-btn-login):not(.open-modal) { display: none !important; }

  /* ── Blobs / ambient ─────────────────────────────────────────────────────── */
  .price-blob-1,
  .blob { opacity: 0.2 !important; }

  /* ── Stats row ───────────────────────────────────────────────────────────── */
  .stats-row,
  .pricing-stats {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 30px 20px !important;
  }

} /* end @media 768px */