/* ============================================================
   LAYOUT — DARK.
   ============================================================ */

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

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--sm { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--lg { padding-block: clamp(6rem, 12vw, 12rem); }

.section--soft {
  background: color-mix(in srgb, var(--c-slate-900) 30%, transparent);
  border-block: 1px solid var(--border-soft);
}
.section--muted {
  background: var(--c-slate-900);
}

/* Section head pattern */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head--center { margin-inline: auto; align-items: center; text-align: center; }
.section-head__title { letter-spacing: var(--tracking-tight); }
.section-head__lead { font-size: var(--fs-lg); }

/* Asymmetric two-column */
.split {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .split--7-5 { grid-template-columns: 7fr 5fr; }
  .split--6-6 { grid-template-columns: 1fr 1fr; }
  .split--5-7 { grid-template-columns: 5fr 7fr; }
  .split--8-4 { grid-template-columns: 8fr 4fr; }
}

.grid {
  display: grid;
  gap: var(--sp-5);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

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

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

.divider { height: 1px; background: var(--border-soft); border: 0; width: 100%; }