.live-status { padding-top: 72px; }
.status-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 25px; }
.status-heading h2 { margin: 12px 0 0; font-size: 32px; letter-spacing: -.04em; }
.status-heading > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 12px; text-align: right; line-height: 1.7; }
.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.status-card { display: flex; align-items: center; gap: 15px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 12px 35px #263d350d; }
.status-icon { display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #e9faf4; font-size: 23px; }
.status-card div { min-width: 0; }
.status-card b { font-size: 15px; }
.status-card p { margin: 5px 0 2px; color: var(--muted); font-size: 12px; }
.status-card small { color: #929c97; font-size: 10px; }
.status-dot { width: 10px; height: 10px; margin-left: auto; border-radius: 50%; background: #aeb8b3; box-shadow: 0 0 0 5px #aeb8b320; }
.status-dot.available { background: var(--mint-dark); box-shadow: 0 0 0 5px #17a97f1f; }
.status-dot.degraded { background: #efad32; box-shadow: 0 0 0 5px #efad3224; }
.status-dot.unavailable { background: #db5961; box-shadow: 0 0 0 5px #db596120; }
@media (max-width: 900px) {
  .status-heading { display: block; }
  .status-heading > p { margin-top: 12px; text-align: left; }
  .status-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .live-status { padding-top: 52px; }
  .status-heading h2 { font-size: 28px; }
}