.features-page {
  padding-top: 56px;
}

.features-intro {
  max-width: 880px;
  padding-bottom: 48px;
}

.features-intro h1 {
  margin-top: 20px;
  margin-bottom: 24px;
}

.features-intro__lede {
  max-width: 680px;
  color: var(--c-muted);
  font-size: var(--fs-h3);
  line-height: 1.8;
}

.features-intro__note {
  max-width: 680px;
  margin-top: 24px;
  margin-bottom: 0;
  font-size: var(--fs-small);
}

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

.features-page .table-scroll {
  margin-top: 32px;
  margin-bottom: 32px;
  border: var(--line) solid var(--c-border);
  border-radius: var(--r-menu);
}

.features-example {
  max-width: 920px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.features-example pre {
  margin-top: 16px;
  margin-bottom: 20px;
}

.features-example > p:last-child {
  font-size: var(--fs-small);
}

.features-page > section > .callout {
  max-width: var(--reading);
}

.features-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 64px;
}

.features-settings > article {
  min-width: 0;
  padding-top: 20px;
  border-top: var(--line) solid var(--c-border);
}

.features-settings h3 {
  margin-top: 0;
}

.features-settings p {
  color: var(--c-muted);
}

.features-settings p:last-child {
  margin-bottom: 0;
}

.features-page .grouped-list {
  max-width: var(--reading);
  margin-top: 32px;
}

@media (max-width: 768px) {
  .features-page {
    padding-top: 32px;
  }

  .features-intro__lede {
    font-size: var(--fs-body);
  }

  .features-settings {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}