/* ==========================================================================
   reporting-automation.html-only rules. Everything else (header, footer,
   buttons, cards, hero shell, related-links, pricing, FAQ, CTA, back-to-top,
   global typography, dark-mode colors) comes from css/*.css and must not be
   redefined here.
   Requires the full shared foundation to be loaded first.
   ========================================================================== */

/* ---- hero summary card ----
   Uses the shared .hero-card--icon family (hero.css) - no page-specific
   rules needed here. */

/* ---- "what's included": 5-card icon grid ----
   Reuses the shared .card-base.icon-card.included-card shell. 5 items (not
   6, unlike the other service pages) sits fine in a 3-col grid at desktop -
   the last row just holds 2 cards instead of 3 rather than 3 full rows. */

.ra-included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1100px) {
  .ra-included-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ra-included-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---- "is this the right fit" ----
   Fully covered by the shared .trio-grid family (cards.css) - no
   page-specific rules needed here. */