.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-6);
}
.section--sm { padding-block: var(--space-5); }
.section--lg { padding-block: var(--space-7); }

.section--surface { background: var(--color-surface); }
.section--surface-2 { background: var(--color-surface-2); }

.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-4); }

.grid {
  display: grid;
  gap: var(--space-3);
}

.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.split {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 800px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}

.flow-tight > * + * { margin-top: var(--space-1); }

.center-text { text-align: center; }

.section-head {
  max-width: 720px;
  margin-bottom: var(--space-5);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

main { padding-top: var(--header-h); }

main.has-hero { padding-top: 0; }