/*
 * Ostoja — Future self widget.
 * Centered layout, big heading, lead, and a centered 3-col grid of stat tiles
 * where the middle (highlighted) tile is a raised white card, slightly scaled.
 */

.ost-future-wrap { padding-block: 8rem; }
@media (min-width: 1024px) { .ost-future-wrap { padding-block: 11rem; } }

.ost-future {
  max-width: 56rem;
  text-align: center;
}

.ost-future__eyebrow { margin-bottom: 1.5rem; }

.ost-future__heading {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.05;
}

.ost-future__lead {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  max-width: 42rem;
  font-size: 1.125rem;
  text-wrap: pretty;
}

.ost-future__grid {
  margin: 4rem auto 0;
  max-width: 42rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: center;
}

.ost-future__tile {
  border-radius: 1rem;
  padding: 1.5rem;
  background: color-mix(in oklab, var(--ost-secondary) 50%, transparent);
}

.ost-future__tile--hi {
  background: var(--ost-card);
  box-shadow: var(--ost-shadow-card);
  transform: scale(1.05);
}

.ost-future__tile-label {
  font-size: 0.75rem;
  color: var(--ost-muted-foreground);
}

.ost-future__tile-value {
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ost-future__tile--hi .ost-future__tile-value { color: var(--ost-primary); }

/* Optional CTA under the tiles (centered by the parent's text-align). */
.ost-future__cta { margin-top: 3rem; }