/* =====================================================================
   The Worlds Top — About page styles (about.css)
   Loaded AFTER theme.css. Only light, about-specific touches; cards,
   grids, buttons, and section headings are all styled by the shared theme.
   ===================================================================== */

/* Body copy blocks: readable measure, consistent paragraph rhythm */
.about-copy {
  max-width: 68ch;
}

.about-copy p + p {
  margin-top: var(--sp-4);
}

/* Numbered step cards */
.about-steps {
  counter-reset: step;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.step-card {
  counter-increment: step;
}

.step-card::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(180deg, var(--wt-blue-bright), var(--wt-blue));
  box-shadow: 0 4px 12px rgba(31, 45, 138, 0.45);
}

/* Example card: readable measure inside the card */
.about-example {
  max-width: 72ch;
}

/* Closing call-to-action */
.about-cta-lead {
  max-width: 52ch;
  margin-inline: auto;
}