/* Shared accent treatments for existing KPI cards and the demo introductions. */
#pagecontent :is(.metric, .metricitem, .perfmetric, .workmetric, .an-kpi, .in-kpi, .evalcard, .demo-brief, .cat-card, .templatecard, .quick-preview, .agent-form-layout > section.box, .cat-industrytile),
#pagecontent :is(.cat-stats, .dashmetrics, .littlemetrics, .dm-ministats, .tool-metrics, .uc-kpis, .uc-metrics, .roi-snapshot, .roi-details, .resultpair) > div {
  --demo-accent: #6548d4;
  --demo-tint: #f4efff;
  --demo-outline: #d9cef9;
  border: 1px solid var(--demo-outline);
  border-inline-start: 3px solid var(--demo-accent);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--demo-tint), #fff 85%);
}
#pagecontent :is(.metric, .metricitem, .perfmetric, .workmetric, .an-kpi, .in-kpi, .evalcard, .cat-card, .templatecard, .cat-industrytile, .cat-stats > div, .dashmetrics > div, .littlemetrics > div, .dm-ministats > div, .tool-metrics > div, .uc-kpis > div, .uc-metrics > div, .roi-snapshot > div, .roi-details > div, .resultpair > div):nth-child(4n+2) {
  --demo-accent: #137c99;
  --demo-tint: #eaf8fc;
  --demo-outline: #badfe9;
}
#pagecontent :is(.metric, .metricitem, .perfmetric, .workmetric, .an-kpi, .in-kpi, .evalcard, .cat-card, .templatecard, .cat-industrytile, .cat-stats > div, .dashmetrics > div, .littlemetrics > div, .dm-ministats > div, .tool-metrics > div, .uc-kpis > div, .uc-metrics > div, .roi-snapshot > div, .roi-details > div, .resultpair > div):nth-child(4n+3) {
  --demo-accent: #22815c;
  --demo-tint: #ecf9f2;
  --demo-outline: #c3e7d4;
}
#pagecontent :is(.metric, .metricitem, .perfmetric, .workmetric, .an-kpi, .in-kpi, .evalcard, .cat-card, .templatecard, .cat-industrytile, .cat-stats > div, .dashmetrics > div, .littlemetrics > div, .dm-ministats > div, .tool-metrics > div, .uc-kpis > div, .uc-metrics > div, .roi-snapshot > div, .roi-details > div, .resultpair > div):nth-child(4n) {
  --demo-accent: #a26116;
  --demo-tint: #fff6e9;
  --demo-outline: #efd8b2;
}
#pagecontent .demo-brief { padding: 18px 22px; margin-block: 0 16px; }
#pagecontent .demo-brief small { color: #5132b7; font-size: 12.65px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
#pagecontent .demo-brief h2 { margin: 5px 0; color: #19143c; font-size: clamp(19.55px, 2.3vw, 25.3px); }
#pagecontent .demo-brief p { margin: 0; color: #3e4568; line-height: 1.5; }
#pagecontent :is(.cat-card,.templatecard) h3 { color: #23184a; }
#pagecontent .cat-card:focus-within, #pagecontent .templatecard:focus-within { outline: 2px solid var(--demo-accent); outline-offset: 2px; }