/* Responsive styles for SherGuard public and auth pages. 
   Load this file last. Dashboard/module responsive rules are intentionally excluded in Phase 1. */
   @media (max-width: 980px) {
    .public-header {
      align-items: flex-start;
      gap: 18px;
      flex-direction: column;
    }
  
    .public-nav {
      flex-wrap: wrap;
    }
  
    .public-hero,
    .public-feature-grid,
    .public-pricing-grid {
      grid-template-columns: 1fr;
    }
  
    .public-dark-section,
    .public-cta-section {
      margin-left: 5%;
      margin-right: 5%;
      padding: 34px;
    }
  }
  
  @media (max-width: 980px) {
    .public-api-grid {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 980px) {
    .legal-container {
      padding: 28px;
    }
  
    .contact-grid {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 1100px) {
    .public-proof-grid,
    .public-footer-advanced {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .public-footer-bottom {
      grid-column: 1 / -1;
    }
  }
  
  @media (max-width: 720px) {
    .public-hero-premium {
      padding-top: 64px;
    }
  
    .public-threat-flow-panel {
      min-height: auto;
    }
  
    .public-proof-grid,
    .public-footer-advanced {
      grid-template-columns: 1fr;
    }
  
    .public-footer-advanced {
      padding: 34px 7%;
    }
  }
  
  @media (max-width: 980px) {
    .auth-shell {
      grid-template-columns: 1fr;
      padding: 34px 5%;
    }
  
    .auth-feature-list {
      grid-template-columns: 1fr;
    }
  
    .auth-card {
      padding: 28px;
    }
  }

  /* SherGuard public mobile polish */
@media (max-width: 768px) {
  .public-header {
    padding: 22px 7%;
    align-items: flex-start;
    gap: 18px;
  }

  .public-logo {
    width: 100%;
  }

  .public-nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    justify-content: flex-start;
  }

  .public-nav a {
    font-size: 15px;
    line-height: 1.2;
  }

  .public-nav-cta {
    padding: 12px 20px !important;
    border-radius: 999px;
  }

  .public-hero,
  .public-pricing-hero {
    padding-top: 64px;
    padding-left: 7%;
    padding-right: 7%;
    text-align: center;
    overflow: visible;
  }

  .public-hero h1,
  .public-pricing-hero h1 {
    font-size: clamp(36px, 10vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.045em;
    max-width: 100%;
    overflow: visible;
  }

  .public-hero p,
  .public-pricing-hero p {
    font-size: 16px;
    line-height: 1.65;
  }

  .public-hero-actions {
    justify-content: center;
    gap: 14px;
  }

  .public-hero-actions .public-btn {
    font-size: 15px;
    padding: 14px 22px;
  }
}