.features-intro {
  padding-top: var(--space-12);
  padding-bottom: var(--space-10);
}
.features-intro__panel {
  padding: var(--space-14);
  border: var(--stroke) solid var(--line-dark-strong);
  border-radius: var(--radius-panel);
  background: var(--ink);
  color: var(--on-dark);
}
.features-intro__panel h1 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}
.features-intro__accent {
  color: var(--accent-on-dark);
}
.features-intro__lead {
  max-width: 38em;
  margin-bottom: var(--space-7);
  color: var(--on-dark-muted);
  font-size: var(--size-lead);
  line-height: var(--leading-prose);
}
.features-intro__sequence {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: var(--stroke) solid var(--line-dark-strong);
  color: var(--on-dark-muted);
  font-family: var(--font-mono);
  font-size: var(--size-sm);
}
.features-intro__sequence [aria-hidden] {
  color: var(--accent-on-dark);
}
.features-directory .toc {
  margin-bottom: var(--space-6);
}
.features-directory .callout {
  line-height: var(--leading-prose);
}
.features-directory .callout p {
  margin-top: var(--space-3);
}
#main-content .sect-head + .section-sub + .reading {
  padding-inline: var(--gutter);
}
@media (max-width: 768px) {
  .features-intro {
    padding-top: var(--space-6);
  }
  .features-intro__panel {
    padding: var(--space-7) var(--space-5);
  }
  .features-intro__lead {
    font-size: var(--size-body);
  }
  .features-intro__panel .fact-row {
    justify-content: flex-start;
  }
  .features-intro__sequence {
    gap: var(--space-2);
    font-size: var(--size-xs);
  }
}