.container {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}
.container.narrow { width: min(860px, calc(100% - 40px)); }
.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section-tight { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.section-band {
  background: rgba(255, 255, 255, 0.58);
  border-block: 1px solid var(--border);
}
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.section-header {
  max-width: 760px;
  margin-bottom: 2.5rem;
}
.section-header.center { margin-inline: auto; text-align: center; }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4, .split { grid-template-columns: 1fr; }
}

/* Keep stacked mobile sections compact without changing desktop spacing. */
@media (max-width: 640px) {
  .section { padding-block: 2.5rem; }
  .section-tight { padding-block: 1.5rem; }
  .section-header { margin-bottom: 1.5rem; }
  .split { gap: 1.5rem; }
}