/* ============================================================
   CAPELY: how it works

   Three steps, sitting directly under the hero. Moved here out of the trust
   section on 2026-08-31 at the owner's request, and cut down at the same time:
   the model is the three-step block simplycapes.com runs, which is a number, a
   two-word title and one short line, with no eyebrow and no supporting
   paragraph above it.

   The fourth step (equip on Bedrock) is not here on purpose. It is real, but
   it is a quirk of one platform, and carrying it here made a three-step
   purchase look like a four-step one. It is answered in full in the FAQ. A
   one-line footnote under the grid was tried and the owner cut it too
   (2026-08-31): three steps and nothing else.

   Card background, border and radius come from the shared .card class in
   site.css; this file only lays the steps out.
   ============================================================ */

.steps-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.step-card {
  min-width: 0;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 16px;
}

.step-card h3 {
  font-size: 16.5px;
  margin-bottom: 8px;
}

.step-card p {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* Underlined, not colour-only, per contract section 10.5. */
.step-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.step-link:hover { color: var(--mint-300); }

.step-ext-ic {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  vertical-align: -1px;
}

/* Three across holds down to 640px: the cards carry one short line each, so
   they stay readable narrow, and a single file of three would push the
   catalogue below the fold on a laptop. */
@media (max-width: 640px) {
  .steps-grid { grid-template-columns: 1fr; }
}