.site-shell {
  max-width: 100%;
  width: 100%;
}

.container {
  margin-inline: auto;
  max-width: var(--container);
  min-width: 0;
  padding-inline: var(--page-gutter);
  width: 100%;
}

.container--medium {
  max-width: var(--container-medium);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--reading {
  max-width: var(--container-reading);
}

.section {
  padding-block: var(--space-12);
  position: relative;
}

.section--dense {
  padding-block: var(--space-10);
}

.section--flush-top {
  padding-top: 0;
}

.section--alt {
  background: var(--color-section-alt-bg);
  border-block: 1px solid var(--color-section-alt-border);
}

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

.section-header {
  align-items: start;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--space-9);
}

.section-header__copy {
  max-width: none;
  width: 100%;
}

.stack {
  display: grid;
  gap: var(--stack-gap, var(--space-5));
}

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

.cluster--between {
  justify-content: space-between;
}

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

.grid > *,
.split > *,
.page-grid > *,
.surface-grid > *,
.section-header > *,
.hero__copy > *,
.hero__media > * {
  min-width: 0;
}

.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));
}

.grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.split {
  align-items: center;
  display: grid;
  gap: var(--space-10);
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.split--reverse {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.hero {
  padding-block: var(--space-11) var(--space-13);
}

.hero--compact {
  padding-block: var(--space-10) var(--space-11);
}

.hero__copy {
  display: grid;
  gap: var(--space-6);
  max-width: 780px;
}

.hero__media {
  min-width: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
  min-width: 0;
}

.page-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
}

.surface-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

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

@media (max-width: 1120px) {
  .grid--4,
  .grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-header,
  .page-grid,
  .split,
  .split--reverse {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .container {
    max-width: 100%;
  }

  .section {
    padding-block: var(--space-10);
  }

  .hero {
    padding-block: var(--space-9) var(--space-10);
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero__actions > * {
    max-width: 100%;
    width: 100%;
  }
}