/*
 * Final centering correction
 *
 * Explicitly overrides the older split-column section geometry so the metrics
 * and FAQ sections share one clear centered axis.
 */

/* Metrics: centered title, cards, then supporting footnote — equal rhythm. */
.metrics-section .section-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  justify-items: center;
  align-items: start;
  width: min(var(--section-max), calc(100% - (var(--page-gutter) * 2)));
  gap: clamp(40px, 4.8vw, 64px);
}

.metrics-section .metrics-heading {
  position: static !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: grid;
  justify-self: stretch;
  justify-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
}

.metrics-section .metrics-heading .expressive-heading {
  display: flex;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  align-items: baseline;
  justify-content: center;
  justify-items: center;
  text-align: center;
}

.metrics-section .metrics-heading .expressive-heading > span {
  text-align: center;
}

.metrics-section .metric-rail {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  justify-self: center;
  align-self: start;
  width: min(1120px, 100%);
  margin: 0 auto;
  gap: clamp(14px, 1.8vw, 24px);
  transform: none !important;
}

.metrics-section .metric-row {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.metrics-section .metrics-footnote {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  width: min(560px, 100%);
  max-width: 54ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

/* FAQ: centered title over a constrained, centered accordion. */
.faq-section .faq-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  align-items: start;
  gap: clamp(48px, 6vw, 72px);
}

.faq-section .faq-heading {
  position: static !important;
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
}

.faq-section .faq-heading h2,
.faq-section .faq-heading .expressive-heading {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.faq-section .faq-heading p {
  display: none !important;
}

.faq-section .faq-list {
  justify-self: center;
  width: min(900px, 100%);
  margin-inline: auto;
}

@media (max-width: 820px) {
  .metrics-section .metrics-heading .expressive-heading {
    display: grid;
    place-items: center;
  }

  .metrics-section .metric-rail {
    gap: 14px;
  }
}

@media (max-width: 700px) {
  .metrics-section .metric-rail {
    grid-column: 1 !important;
    grid-template-columns: 1fr !important;
    width: min(440px, 100%);
  }
}