.container {
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
@media (max-width: 768px) {
  .container {
    width: min(
      var(--container),
      100% - (var(--gutter) * 2) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
    );
  }
  .section {
    padding: var(--section-y-mobile, var(--s-8)) 0;
  }
  .section--alt {
    padding: calc(var(--section-y-mobile, var(--s-8)) + var(--s-2)) 0;
  }
  .page-hero {
    padding: calc(var(--s-7) - var(--s-2)) 0 var(--s-7);
  }
}

.section {
  padding: var(--s-10) 0;
}

.section--alt {
  position: relative;
  padding: calc(var(--s-10) + var(--s-3)) 0;
}
.section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 600px at 50% 0%, rgba(255,255,255,.08), transparent 60%);
  pointer-events: none;
}

.section__header {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
  max-width: 70ch;
}

.section__footer {
  margin-top: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.two-col {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .two-col { grid-template-columns: 1.05fr .95fr; }
}

.page-hero {
  padding: calc(var(--s-10) - var(--s-2)) 0 var(--s-9);
}
.page-hero__inner {
  display: grid;
  gap: var(--s-4);
  max-width: 80ch;
}

.divider {
  height: 1px;
  background: var(--stroke);
  margin: var(--s-5) 0;
}