/* ============================================================
   coaches.css: /coaches only. Shared components live in styles.css.
   ============================================================ */

/* Stat row (3% / 0% / plans). Numbers use the app's condensed number face. */
.creator-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 40px; }
.cstat { padding: 22px 22px 20px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); text-align: center; }
.cs-num { font-family: var(--font-num); font-weight: 800; font-size: clamp(34px, 2vw + 22px, 48px); line-height: 1.05; letter-spacing: -0.02em; color: var(--text); }
.cs-lbl { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--text-dim); }
@media (max-width: 760px) { .creator-stats { grid-template-columns: minmax(0, 1fr); } }

/* Hero: the real coach chat screen with its program card floating off the edge. */
.coach-hero .hero-visual { display: flex; justify-content: center; }
.coach-hero .device--hero { --device-w: clamp(250px, 14vw + 150px, 360px); }

/* Pillar icons are the app's glyphs, neutral ink in a quiet well. */
.pillar .p-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--r-well, 14px); background: var(--bg-2); border: 1px solid var(--line); color: var(--text); }
.pillar .p-ic .glyph { width: 22px; height: 22px; }

/* Links on this page follow the app's link colour. */
.cmp-note a, .alt-links a:hover { color: var(--link); }