/* ==========================================================================
   LPV Responsive: 360–430px (mobile), ~768px (tablet portrait), ~1024px (tablet landscape)
   No horizontal scroll, no clipped content, no vh height traps, normal page scroll.
   ========================================================================== */

/* Global: prevent horizontal scroll and contain content */
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  min-width: 0;
}

/* All main content wrappers and images stay within viewport */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Tables: prevent horizontal overflow without introducing scroll containers */
table {
  max-width: 100%;
  width: 100%;
  table-layout: fixed;
}
th, td {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Containers: use full width with safe padding on small screens */
.nav-container,
.hero-container,
.page-hero .hero-content,
.hero-content,
.legal-container,
.footer-container,
.faq-section,
.pricing-section,
.comparison-section,
.security-container,
.articles-container,
.support-container,
.kb-container,
.kb-section,
.article-container,
.article-hero-container,
.stats-container,
.stats-layout,
.trust-container,
.features-container,
.trial-container {
  width: 100%;
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* ========== Mobile: 360–430px ========== */
@media (max-width: 430px) {
  nav {
    padding: 0.75rem 1rem;
  }

  .nav-container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .logo-text {
    font-size: 0.95rem;
  }

  .logo-icon {
    width: 38px;
    height: 38px;
  }

  .logo-icon img {
    width: 20px;
    height: 20px;
  }

  /* Hero: no vh trap — allow normal page scroll */
  .hero {
    min-height: 0 !important;
    padding-top: 100px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 2rem !important;
  }

  .hero h1,
  .page-hero h1,
  .hero-content h1 {
    font-size: clamp(1.5rem, 8vw, 2rem) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: break-word;
    padding-left: 0;
    padding-right: 0;
  }

  .page-hero {
    padding-top: 100px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 2rem !important;
  }

  .hero-subtitle,
  .page-hero .subtitle,
  .hero p {
    font-size: 0.95rem !important;
    padding-left: 0;
    padding-right: 0;
  }

  .hero-buttons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    padding: 12px 1rem;
    font-size: 0.9rem;
  }

  .hero-image-container {
    max-width: 100%;
  }

  /* Trial page: no vh height trap */
  .trial-page {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 100px !important;
    padding: 100px 1rem 2rem !important;
  }

  /* Breach ticker: contain so it doesn’t cause horizontal scroll */
  .breach-ticker {
    max-width: 100%;
    overflow: hidden;
  }

  .breach-scroll-container,
  .breach-track {
    max-width: 100%;
  }

  /* Section padding */
  .trust-section,
  .features-section,
  .testimonials-section,
  .stats-section,
  .why-section,
  .cta-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .faq-section,
  .pricing-section,
  .legal-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .faq-question {
    padding: 14px 1rem !important;
    font-size: 0.9rem !important;
  }

  .faq-answer-content {
    padding: 0 1rem 14px !important;
  }

  .footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Cards: allow shrink so no horizontal overflow */
  .pricing-card,
  .bundle-card,
  .product-item {
    min-width: 0;
    max-width: 100%;
  }
}

/* ========== Extra small: 360px ========== */
@media (max-width: 360px) {
  .nav-container,
  .hero-container,
  .page-hero,
  .hero {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .trust-section,
  .features-section,
  .stats-section,
  .faq-section,
  .pricing-section,
  .footer {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ========== Tablet portrait: ~768px ========== */
@media (max-width: 768px) {
  nav {
    padding: 0.875rem 1.25rem;
  }

  .nav-container {
    width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  /* Navigation: hide links so nav doesn’t overlap content; logo + home remain */
  .nav-links {
    display: none !important;
  }

  /* Hero: no vh trap on tablet */
  .hero {
    min-height: 0 !important;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(2rem, 5vw, 2.75rem) !important;
    white-space: normal !important;
  }

  .hero,
  .page-hero {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .hero-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* KB categories: single column on tablet */
  .kb-categories {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .kb-section {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ========== Tablet landscape: ~1024px ========== */
@media (max-width: 1024px) {
  .nav-container {
    width: 92%;
    max-width: 100%;
  }

  .hero-container,
  .hero-content {
    width: 100%;
    max-width: 100%;
  }
}

/* Modals: fit viewport on small screens, fully usable */
@media (max-width: 768px) {
  [class*="modal"],
  [class*="dialog"],
  .modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
  }

  [class*="modal"] > *,
  [class*="dialog"] > *,
  .modal-overlay > * {
    max-width: min(100%, calc(100vw - 2rem)) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

/* Trial page: avoid vh height trap — let content scroll normally */
@media (max-width: 768px) {
  .trial-page {
    min-height: 0 !important;
    height: auto !important;
    padding: 100px 1.25rem 2rem !important;
  }
}