/* =====================================================================
   steps.css — Docokids "how it works" numbered steps.

   A big teal number with a hairline rule under it, then a title and copy.
   The title sets its OWN size token (--fs-h3) so it never depends on the
   global h3 rule or a page ancestor. Every value is a var(--token).
   ===================================================================== */
.step-number {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--p-verde);
  line-height: 1;
  letter-spacing: -0.01em;
  display: inline-block;
  min-width: 3.5rem;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-3);
}
.step-title {
  /* size token only; line-height (1.15) and letter-spacing (-0.01em) come from
     the global h3 rule in base.css, which is the scale the mockup renders. */
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}