/* Dashboards page (/platform/dashboards/) — additions to pages.css */

/* platform pillars: four numbered cards */
.dash-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dash-pillars .card { padding: 28px; display: flex; flex-direction: column; }
.dash-num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--accent); margin-bottom: 26px; }
.dash-pillars h3 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.dash-pillars p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.dash-pillars + .showcase-cta { margin-top: 48px; }

/* final CTA stats: big numbers under mono labels */
.dash-facts b { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; margin-top: 12px; }

@media (max-width: 1120px) {
  .dash-pillars { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .dash-pillars { grid-template-columns: minmax(0, 1fr); }
  .dash-pillars .card { padding: 26px; }
}

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] .dash-num { color: var(--mint); }