.features-page {
  padding-top: 56px;
  padding-bottom: 40px;
}
.features-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  padding-top: 24px;
  padding-bottom: 56px;
}
.features-intro h1 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.features-intro__accent {
  color: var(--c-accent);
}
.features-intro__lead {
  max-width: 32em;
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.65;
}
.features-map {
  background: linear-gradient(110deg, var(--c-orange-tint), var(--c-pink-tint), var(--c-blue-tint));
  box-shadow: var(--sh-panel);
}
.features-map h2 {
  margin-top: 24px;
  margin-bottom: 28px;
}
.features-map__flow {
  display: grid;
  gap: 20px;
  margin-top: 0;
  margin-bottom: 28px;
  padding-left: 24px;
}
.features-map__flow li {
  padding-left: 4px;
}
.features-map__flow li::marker {
  color: var(--c-accent-dark);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
}
.features-map__flow strong,
.features-map__flow span {
  display: block;
}
.features-map__flow strong {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
.features-map__flow span {
  margin-top: 4px;
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.features-map > :last-child {
  margin-bottom: 0;
}
.features-chapter {
  padding-top: var(--space-section);
}
.features-heading {
  margin-bottom: 28px;
}
.features-heading h2 {
  max-width: 28em;
  margin-top: 16px;
  margin-bottom: 0;
}
.features-chapter > p {
  max-width: var(--reading);
}
.features-chapter .table-scroll {
  margin-top: 28px;
  margin-bottom: 28px;
}
.features-note {
  margin-top: 28px;
}
.features-chapter .card p,
.features-chapter .panel p {
  max-width: 65em;
}
.features-chapter .card > :last-child,
.features-chapter .panel > :last-child {
  margin-bottom: 0;
}
.features-setting-list {
  max-width: calc(var(--reading) + 100px);
}
.features-checklist {
  margin-top: 0;
  margin-bottom: 28px;
  padding-left: 24px;
}
.features-checklist li {
  padding-left: 4px;
}
.features-checklist li + li {
  margin-top: 18px;
}
.features-checklist li::marker {
  color: var(--c-blue-ink);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
}
@media (max-width: 960px) {
  .features-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .features-page {
    padding-top: 24px;
  }
  .features-intro {
    padding-top: 16px;
    padding-bottom: 32px;
  }
  .features-intro__lead {
    font-size: var(--fs-body);
  }
  .features-heading {
    margin-bottom: 22px;
  }
}