.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--lg { max-width: var(--container-lg); }
.container--md { max-width: var(--container-md); }
.container--2xl { max-width: var(--container-2xl); }

.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
  position: relative;
}

.section--sm {
  padding-top: var(--section-padding-sm);
  padding-bottom: var(--section-padding-sm);
}

.section--paper { background: var(--color-paper); }
.section--paper-2 { background: var(--color-paper-2); }
.section--paper-3 { background: var(--color-paper-3); }
.section--navy {
  background: var(--color-navy-900);
  color: var(--color-paper);
}
.section--navy h1, .section--navy h2, .section--navy h3,
.section--navy h4, .section--navy h5 {
  color: var(--color-paper);
}
.section--navy p { color: hsla(40, 20%, 90%, 0.8); }

.section__header {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  max-width: 36rem;
}

.section__header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section__header--center p {
  margin-left: auto;
  margin-right: auto;
}

.section__header h2 {
  margin-top: var(--space-4);
}

.section__header p {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
.grid--6 { grid-template-columns: 1fr; }

.grid--gap-lg { gap: var(--space-10); }
.grid--gap-xl { gap: var(--space-12); }

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

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.divider-line {
  height: 1px;
  background: var(--color-line);
  width: 100%;
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }