.metric-grid > article[data-live-mock="true"] strong {
  font-variant-numeric: tabular-nums;
}

.metric-grid > article[data-live-mock="true"] .metric-live {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.metric-grid > article[data-live-mock="true"] .metric-live.aera-mock-active::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  content: "";
  opacity: 0.85;
  animation: aera-live-pulse 1.6s ease-out infinite;
}

.metric-grid > article[data-live-mock="true"] .spark-bars i {
  transition: height 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.doctor-card .doctor-avatar {
  overflow: hidden;
  isolation: isolate;
}

.doctor-card .doctor-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

@keyframes aera-live-pulse {
  0% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 0.9;
  }
  70%,
  100% {
    box-shadow: 0 0 0 0.34rem transparent;
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .metric-grid > article[data-live-mock="true"] .metric-live.aera-mock-active::before {
    animation: none;
  }

  .metric-grid > article[data-live-mock="true"] .spark-bars i {
    transition: none;
  }
}