/* One publication hierarchy, backed by the shared design tokens. Authored
   casing is preserved; font weights stay regular or medium in every UI. */
body {
  font-weight: var(--font-weight-regular);
}
body :is(b, strong, h1, h2, h3, h4, h5, h6, th) {
  font-weight: var(--font-weight-medium);
}
body :is(h3, h4, h5, h6) {
  font-size: var(--type-subtext);
}
body :is(small, sup, sub) {
  font-size: var(--type-label);
}

/* Page and section headings share a size and wrap naturally on narrow screens. */
body :is(h1, h2, .display, .h2, .chapter-copy .h2) {
  font-size: var(--type-heading);
  font-weight: var(--font-weight-medium);
  line-height: 1.15;
  letter-spacing: -.022em;
  overflow-wrap: break-word;
}

/* Introductory copy is distinct from the smaller text inside product mockups. */
body .lead,
body .section-head > :is(.sub, p),
body .chapter-copy > .sub,
body .chapter-statement > .sub,
body #how .chapter-statement .sub,
body .closer .sub,
body .studio-download-intro p,
body .studio-download-release-intro {
  font-size: var(--type-subtext);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

/* The three home product rows use a compact claim and explanation beside each
   mockup. They share the body size; page and section headings stay at 40px. */
body #how .chapter-statement :is(.h2, .sub) {
  margin: 0;
  font-size: var(--type-subtext);
  line-height: 1.5;
  letter-spacing: 0;
}
body #how .chapter-statement { gap: var(--sp2) }
body #how .chapter-copy { gap: var(--sp4) }
body #how .blockstack { gap: var(--sp8) }