/*
 * ALL pages must import this file. Do not add inline container/responsive rules
 * to individual pages. Layout, container, nav collapse, grid responsive, and
 * footer stacking rules live HERE and only here.
 *
 * Pages may add page-specific VISUAL styles inline (colors, typography, card
 * borders, etc.) but NEVER redefine max-width containers, responsive breakpoints,
 * nav hamburger patterns, or footer stacking behavior.
 *
 * Breakpoints: 360px | 768px | 1024px | 1440px | 1920px
 * Container:   max-width 1280px, centered, 32px side padding (16px on mobile)
 */

/* ─── Reset & Base (all pages) ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ─── Shared Container Utility ───────────────────────────────────────────── */
.shared-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ─── Main Site Nav (.nav / .nav-inner) ──────────────────────────────────── */
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ─── Main Site Section Container (.section-inner) ───────────────────────── */
.section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ─── Main Site Footer (.footer-inner, .footer-bottom) ───────────────────── */
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px 0;
}

/* ─── Verify Pages Nav (.vfy-nav-inner) ──────────────────────────────────── */
.vfy-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
}

/* ─── Verify Pages Layout (.vfyi-layout, .vfy-layout) ────────────────────── */
.vfyi-layout,
.vfy-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

/* ─── Verify Pages Footer (.vfy-footer-inner) ────────────────────────────── */
.vfy-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ─── Verify Pages Hero (.vfy-hero-inner, .vfyi-hero-inner) ──────────────── */
.vfy-hero-inner,
.vfyi-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ─── Compact Footer (.footer-compact-inner) ─────────────────────────────── */
.footer-compact-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ─── Card Grids ─────────────────────────────────────────────────────────── */
/* Main site grids */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Verify page grids */
.vfyi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ─── Hamburger Menu Pattern (all pages, ≤768px) ─────────────────────────── */
/* Main site nav hamburger (hidden by default, shown on mobile) */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #f0f2ff;
}
.nav-hamburger svg { display: block; }

/* Verify page hamburger */
.vfy-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #f0f2ff;
}
.vfy-hamburger svg { display: block; }

/* Mobile overlay menus */
.vfy-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(6,8,16,0.98);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.vfy-mobile-menu.open { display: flex; }

.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(6,8,16,0.98);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.nav-mobile-menu.open { display: flex; }

/* ─── Responsive: 1440px+ (large desktop) ────────────────────────────────── */
@media (min-width: 1440px) {
  .shared-container,
  .nav-inner,
  .section-inner,
  .footer-inner,
  .footer-bottom,
  .vfy-nav-inner,
  .vfyi-layout,
  .vfy-layout,
  .vfy-footer-inner,
  .vfy-hero-inner,
  .vfyi-hero-inner,
  .footer-compact-inner {
    max-width: 1280px;
  }
}

/* ─── Responsive: ≤1024px (tablet landscape) ─────────────────────────────── */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .about-values { grid-template-columns: 1fr; }
  .vfyi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Responsive: ≤768px (mobile) ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Container side padding → 16px */
  .shared-container,
  .nav-inner,
  .section-inner,
  .footer-inner,
  .footer-bottom,
  .vfyi-layout,
  .vfy-layout,
  .vfy-hero-inner,
  .vfyi-hero-inner,
  .vfy-footer-inner,
  .footer-compact-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .vfy-nav-inner {
    padding: 14px 16px;
  }

  /* Main site: hide nav links, show hamburger */
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
  .nav-inner { gap: 0; justify-content: space-between; }

  /* Verify pages: hide nav links, show hamburger */
  .vfy-nav-links { display: none; }
  .vfy-hamburger { display: block; }

  /* Grids → single column */
  .features-grid { grid-template-columns: 1fr; }
  .vfyi-grid { grid-template-columns: 1fr; }

  /* Footer stacking */
  .footer-inner { flex-direction: column; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .vfy-footer-inner { flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
  .vfy-footer-links { justify-content: center; }
  .footer-compact-inner { flex-direction: column; align-items: center; text-align: center; }
}

/* ─── Responsive: ≤640px (small mobile) ──────────────────────────────────── */
@media (max-width: 640px) {
  .vfyi-grid { grid-template-columns: 1fr; }
}

/* ─── Responsive: ≤480px (very small mobile) ─────────────────────────────── */
@media (max-width: 480px) {
  .nav-actions .btn-ghost { display: none; }
}

/* ─── Responsive: ≤360px (minimum supported) ─────────────────────────────── */
@media (max-width: 360px) {
  .shared-container,
  .nav-inner,
  .section-inner,
  .footer-inner,
  .footer-bottom,
  .vfyi-layout,
  .vfy-layout,
  .vfy-hero-inner,
  .vfyi-hero-inner,
  .vfy-footer-inner,
  .vfy-nav-inner,
  .footer-compact-inner {
    padding-left: 12px;
    padding-right: 12px;
  }
}