/* =========================================================
   Responsive — breakpoints aligned to Tailwind defaults
   sm 640 | md 768 | lg 1024 | xl 1280
   ========================================================= */

@media (max-width: 1279.98px) {
  .rate-widget-ref { display: none !important; }
  .phz-nav-desktop { display: none !important; }
  .phz-menu-btn { display: inline-flex !important; }
}

@media (min-width: 1280px) {
  .rate-widget-ref { display: inline-flex !important; }
  .phz-nav-desktop { display: flex !important; }
  .phz-menu-btn { display: none !important; }
}

@media (min-width: 1280px) and (max-width: 1439.98px) {
  .phz-nav-desktop { margin-left: 0.35rem; gap: 0; }
  .phz-nav-desktop a { padding: 0.4rem 0.5rem; font-size: 0.8125rem; }
  .rate-widget-ref { padding: 0.3rem 0.5rem; }
  .rate-label-ref { display: none; }
  .brand-logo-img { max-width: 8.5rem; }
}

@media (max-width: 1023.98px) {
  .section-hero { padding-top: 6rem; padding-bottom: 6rem; }
  .feature-grid-ref { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .product-grid-ref { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .invest-grid-ref { grid-template-columns: 1fr !important; }
  .plan-mini-grid-ref { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .plan-grid,
  .steps-grid-ref { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 639.98px) {
  .feature-grid-ref,
  .product-grid-ref,
  .plan-mini-grid-ref,
  .testimonial-grid-ref,
  .steps-grid-ref,
  .plan-grid {
    grid-template-columns: 1fr !important;
  }
  .section-hero h1 { font-size: 2.25rem !important; }
  .hero-actions-ref { flex-direction: column; width: 100%; }
  .hero-actions-ref .btn-ref { width: 100%; }
  .btn-login-ref { display: none !important; }
  .auth-actions-ref { display: flex !important; }
  .whatsapp-fab { right: 1rem; bottom: 1rem; width: 3.25rem; height: 3.25rem; }
}

@media (min-width: 640px) {
  .section-hero h1 { font-size: 3rem; }
}
@media (min-width: 1024px) {
  .section-hero { padding-top: 8rem; padding-bottom: 8rem; }
  .section-hero h1 { font-size: 3.75rem; }
}