body {
  line-height: 1.6;
}

.hero { padding: 30px 0 16px; }

.hero-card,
.content-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: var(--muted);
}

h1 {
  margin: 8px 0 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.6px;
}

.lead {
  margin: 12px 0 0;
  color: #3f444a;
  max-width: 80ch;
}

section { padding: 12px 0; }

.content-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -.2px;
}

.content-card h3 {
  margin: 16px 0 8px;
  font-size: 17px;
  letter-spacing: -.1px;
}

.content-card p { margin: 0 0 10px; color: #2f343a; }
.content-card ul { margin: 0 0 10px 20px; padding: 0; }
.content-card li { margin: 4px 0; }