/* =============================================================================
   PINGR MOBILE — Gold Page
   ============================================================================= */

@media screen and (max-width: 768px) {

  /* ── 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; }

  /* ── Hero ────────────────────────────────────────────────────────────────── */
  .hero-gold {
    padding-top: 100px !important;
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hero-gold .h1 { font-size: clamp(32px, 9vw, 48px) !important; }
  .gold-subtitle { font-size: 15px !important; margin-top: 1rem !important; }

  /* ── Risk banner ─────────────────────────────────────────────────────────── */
  .risk-banner { font-size: 11px !important; padding: 10px 14px !important; }

  /* ── Pillar section ──────────────────────────────────────────────────────── */
  .pillar-section { margin-bottom: 3rem !important; }
  .pillar-grid { grid-template-columns: 1fr !important; gap: 12px !important; padding: 0 !important; }
  .pillar-card { padding: 20px 16px !important; }
  .pillar-card:hover { transform: none !important; }

  /* ── Math section ────────────────────────────────────────────────────────── */
  .math-section { padding: 0 14px !important; margin-bottom: 3rem !important; }
  .math-box { padding: 24px 16px !important; border-radius: 14px !important; }
  .math-box .h2 { font-size: clamp(22px, 6vw, 32px) !important; }

  /* Table — make it scrollable on mobile */
  .data-table { font-size: 12px !important; }
  .data-table th, .data-table td { padding: 10px 8px !important; font-size: 11px !important; }
  .col-pingr { font-size: 12px !important; }
  .math-box > div:has(.data-table) { overflow-x: auto !important; }

  /* Chart */
  .chart-container { height: 260px !important; }

  /* ── Bamboo / confidence sections ────────────────────────────────────────── */
  .bamboo-section,
  .confidence-section { padding: 0 14px !important; margin-bottom: 3rem !important; }
  .bamboo-content { padding-left: 18px !important; }
  .bamboo-content p { font-size: 15px !important; line-height: 1.7 !important; }

  /* ── Scripture image ─────────────────────────────────────────────────────── */
  .bamboo-scripture-wrapper { padding: 0 14px !important; margin-bottom: 3rem !important; }
  .bamboo-scripture-img:hover { transform: none !important; }

  /* ── CTA section ─────────────────────────────────────────────────────────── */
  .cta-section { padding: 3rem 20px !important; margin-bottom: 4rem !important; }
  .cta-title { font-size: clamp(24px, 7vw, 36px) !important; }
  .cta-subtitle { font-size: 15px !important; margin-bottom: 2rem !important; }
  .btn-gold-solid {
    padding: 1rem 2rem !important;
    font-size: 15px !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  .btn-gold-solid:hover { transform: none !important; }

} /* end @media 768px */

@media screen and (max-width: 375px) {
  .hero-gold .h1 { font-size: 28px !important; }
  .math-box { padding: 18px 12px !important; }
}