/*
 * Layout - Containers, page structure, and grid systems
 */

.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px 48px;
}

/* Section wrapper */
.section {
  padding: 80px 0;
  margin: 0;
}

.section.alt-bg {
  background-color: var(--deep-slate);
  /* Break out of .page-content container to span full viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Dark background text colors */
.section.alt-bg .section-header h2,
.section.alt-bg .section-header p,
.section.alt-bg .eyebrow {
  color: #ffffff;
}

.section.alt-bg .eyebrow.muted {
  color: rgba(255, 255, 255, 0.7);
}

.section.alt-bg .section-header p {
  color: rgba(255, 255, 255, 0.85);
}

/* Common grids */
.feature-grid,
.plan-grid,
.pricing-grid,
.faq-grid {
  display: grid;
  gap: 18px;
}

.feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

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

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 24px;
}

@media (max-width: 1024px) {
  .feature-grid.icon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .feature-grid.icon-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}