/* ============================================================
   program-refinements.css
   Program-page polish: turns the module showcase into a true
   one-tier-at-a-time auto-carousel, lays the emoji cards out per
   breakpoint, and carries the shared .p-lead / flip-back utilities
   needed by the tier-fit snippet. LINK LAST (after tier-cards.css
   and cards-flip.css). Reuses existing tokens only.
   ============================================================ */

/* ---- Shared paragraph utilities (same as welcome-refinements) ---- */
.p-lead {
  max-width: 80%;
  margin: 0 auto var(--space-xs);
  font-family: var(--ff-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  color: var(--color-softblue);
  text-align: center;
}
.p-footnote {
  max-width: 90%;
  margin: var(--space-s) auto 0;
  font-family: var(--ff-base);
  font-size: var(--fs-footer-meta);
  line-height: 1.4;
  color: var(--color-muted);
  text-align: center;
}
@media (max-width: 1024px) { .p-lead { max-width: 92%; } }

/* Longer description paragraphs under the carousel */
.features .features-desc {
  max-width: 68ch;
  margin: 0 auto var(--space-s);
  text-align: center;
}

/* The program module carousel moved to its own file:
   assets/css/carousel-tiers.css  (link it last). */

/* ============ TIER-FIT FLIP SNIPPET (shared with welcome) ============ */
.cards-flip .separator {
  width: 40%;
  height: 1px;
  margin: var(--space-xxs) auto;
  background: var(--color-bridge);
}
.match-note {
  max-width: 90%;
  margin: var(--space-m) auto 0;
  font-family: var(--ff-base);
  font-size: var(--fs-footer-meta);
  line-height: 1.4;
  color: var(--color-muted);
  text-align: center;
}