body {
  letter-spacing: -0.04em;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}

p {
  margin: 0 0 var(--space-4);
}

ul, ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
}

.hero-title,
.page-title {
  font-size: var(--step-4);
}

.section-head h2,
.post-title {
  font-size: var(--step-3);
  line-height: 1.06;
}

.card-title,
.product-name,
.about-panel h2 {
  font-size: var(--step-2);
}

.eyebrow {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: var(--space-3);
}

.section-sub,
.page-lead,
.hero-lead {
  color: var(--fg-muted);
  font-size: var(--step-1);
  max-width: 52ch;
}

.inline-code {
  font-family: var(--mono);
  font-size: 0.92em;
  padding: 0.12em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}