.container-hero,
.container-wide,
.container-text,
.container-narrow {
  width: min(100% - (var(--gutter) * 2), var(--col-wide));
  margin-inline: auto;
}

.container-hero {
  max-width: var(--col-hero);
}

.container-text {
  max-width: var(--col-text);
}

.container-narrow {
  max-width: var(--col-narrow);
}

.site-header {
  padding: var(--s-3) 0 0;
}

.hero-section {
  padding: var(--s-6) 0 var(--s-7);
}

.modes-section,
.supported-section,
.how-section,
.privacy-section,
.scenario-section,
.pricing-section,
.download-section,
.faq-section,
.final-cta {
  padding: var(--s-6) 0;
}

.trust-strip {
  padding: var(--s-4) 0;
}

.hero-layout,
.modes-grid,
.pricing-columns,
.privacy-panels,
.download-grid,
.scenario-list,
.footer-layout {
  display: grid;
  gap: var(--s-5);
}

.hero-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: start;
  gap: var(--s-4);
}

.modes-grid,
.pricing-columns,
.privacy-panels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.download-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scenario-list {
  grid-template-columns: 1fr;
}

.footer-layout {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

@media (max-width: 1120px) {
  .hero-layout,
  .modes-grid,
  .pricing-columns,
  .privacy-panels,
  .download-grid,
  .footer-layout {
    grid-template-columns: 1fr;
  }

  .hero-layout {
    gap: var(--s-5);
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: var(--s-5) 0 var(--s-6);
  }

  .modes-section,
  .supported-section,
  .how-section,
  .privacy-section,
  .scenario-section,
  .pricing-section,
  .download-section,
  .faq-section,
  .final-cta {
    padding: var(--s-5) 0;
  }

  .trust-strip {
    padding: var(--s-3) 0;
  }
}