/* style.min.css - Non-critical styles & responsive overrides */
/* Ensures mobile version maintains same colors as desktop */

@media (max-width: 768px) {
  .container { padding-left: var(--space-md); padding-right: var(--space-md); }
  .hero { padding: var(--space-2xl) 0; }
  .hero h1 { font-size: 1.75rem; }
  .hero p { font-size: 1rem; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.375rem; }
  h3 { font-size: 1.125rem; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section-title::after { width: 60px; }

  .nav { display: none; }
  .nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: var(--space-md);
    right: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    background: var(--color-bg);
    gap: var(--space-sm);
    animation: slideDown .3s ease;
    z-index: 200;
  }
  .nav.open a {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    width: 100%;
    color: var(--color-text-muted);
  }
  .nav.open a:hover { background: var(--color-primary-light); color: var(--color-primary); }
  .hamburger { display: block; }
  .price-card { margin-bottom: var(--space-md); }
  .channel-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-cta { flex-direction: column; align-items: center; }
  .trust-bar { flex-direction: column; align-items: center; gap: var(--space-md); }
  .trust-bar span { width: 100%; justify-content: center; }
  .page-header { padding: var(--space-2xl) 0 var(--space-xl); }

  .table-wrap { overflow-x: auto; }
  table { font-size: .8125rem; }
  th, td { padding: var(--space-sm) var(--space-md); }

  .faq-question { font-size: .9375rem; padding: var(--space-md); }
  .faq-answer { padding: 0 var(--space-md) var(--space-md); font-size: .875rem; }

  .cta-banner { padding: var(--space-2xl) var(--space-md); }
  .cta-banner h2 { font-size: 1.375rem; }

  section .container[style] { 
    max-width: 100% !important;
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
  }

  .card, .glass-card { padding: var(--space-lg); }
  .price-card { padding: var(--space-xl) var(--space-lg); }

  .breadcrumbs { font-size: .75rem; }
  .post-card { padding: var(--space-md); }
  .quick-answer { padding: var(--space-lg); font-size: .875rem; }

  .contact-form { max-width: 100%; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .hero-cta { flex-direction: column; align-items: center; }
  .trust-bar { flex-direction: column; align-items: center; gap: var(--space-md); }
  .trust-bar span { width: 100%; justify-content: center; }
  .channel-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .social-proof { flex-direction: column; gap: var(--space-lg); }
  .hero h1 { font-size: 1.5rem; }
  h1 { font-size: 1.5rem; }
  .price { font-size: 1.75rem; }
}

@media (max-width: 360px) {
  .channel-grid { grid-template-columns: repeat(2, 1fr); }
  .header-inner { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .logo { font-size: 1.0625rem; }
}