/* Metrics page (/platform/metrics-engine/): extras on top of pages.css */

/* original Coralogix icon tiles (green rounded squares) */
.me-ic { display: block; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 26px; }

/* senders → Coralogix GIF is drawn on white: invert lightness (hue kept) so it sits on the dark frame */
.me-senders { background: var(--bg-1); }
.me-senders > img { filter: var(--flip, invert(1) hue-rotate(180deg) saturate(1.4) brightness(1.6)); }

/* billable unit callout */
.me-unit { margin-top: 140px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; align-items: center; padding: 48px 56px; border-color: rgba(19,233,137,.28); background: radial-gradient(80% 140% at 0% 0%, rgba(19,233,137,.09), transparent 60%), linear-gradient(180deg, var(--card-a), var(--card-b)); }
.me-unit .me-ic { width: 56px; height: 56px; margin: 0; border-radius: 14px; }
.me-unit .eyebrow { display: block; margin-bottom: 12px; }
.me-unit h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 560; }
.me-unit p { margin-top: 14px; max-width: 640px; font-size: 16.5px; line-height: 1.65; color: var(--fg-2); }
.me-unit .btn { height: 46px; padding: 0 24px; font-size: 15px; white-space: nowrap; }

/* four governance cards */
.me-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.me-grid .card { padding: 28px; }
.me-grid h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.me-grid p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.me-grid .persona-ic { margin-bottom: 22px; }

/* facts: values are short, let them read as numbers */
.final .facts span { font-size: 13px; text-transform: none; letter-spacing: .08em; }

@media (max-width: 1120px) {
  .me-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .me-unit { margin-top: 96px; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px; }
  .me-unit .btn { justify-self: start; }
}
@media (max-width: 560px) {
  .me-unit { margin-top: 80px; padding: 28px; }
  .me-grid { grid-template-columns: minmax(0, 1fr); }
  .me-grid .card { padding: 26px; }
}