/* Surface cards, process steps, numbered markers and stat tiles */

.card {
  background: var(--surface-1);
  border-radius: var(--r-sm);
  padding: var(--card-p);
  border: 1px solid var(--border-soft);
}

.card--plain { border-color: transparent; background: var(--surface-2); }
.card--pad-lg { border-radius: var(--r-md); padding: clamp(1.25rem, 3vw, 2rem); }
.card--accent-top { border-block-start: 3px solid var(--card-accent, var(--accent)); }

.card__title { font-size: 1.0625rem; font-weight: 600; margin-block-end: 0.5rem; }
.card__name { font-size: var(--fs-body); font-weight: 600; margin-block-end: 0.25rem; }
.card__meta { font-size: var(--fs-xs); color: var(--text-4); }
.card__body { font-size: var(--fs-sm); color: var(--text-4); line-height: 1.55; }

.card__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--card-accent, var(--accent));
  margin-block-end: 0.75rem;
}

/* Numbered process steps */
.step__n {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  margin-block-end: 0.75rem;
}

.step__title { font-size: var(--fs-body); font-weight: 600; margin-block-end: 0.5rem; }
.step__body { font-size: var(--fs-xs); color: var(--text-4); line-height: 1.5; }

/* Circled step marker used inside flow cards */
.marker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 0.75rem;
}

.marker__n {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.marker__label { font-weight: 600; font-size: var(--fs-xs); color: var(--text); }

/* Big-number stat tiles */
.stat { text-align: center; }

.stat__num {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 700;
  color: var(--accent);
  margin-block-end: 0.25rem;
  line-height: 1.1;
}

.stat__label { font-size: var(--fs-xs); color: var(--text-4); }