/* ==========================================================================
   fractional-bi-support.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": 6-card icon grid ----
   Reuses the shared .card-base.icon-card.included-card shell. */

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

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

@media (max-width: 640px) {
  .fbi-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. */

/* ---- pricing: 3 monthly tiers ----
   This page is the only one with 3 pricing tiers (the other pricing.css
   users - bi-consulting-services.html, reporting-reality-check.html - both
   use 2), so the 3-column layout is scoped here via a page-specific
   ancestor rather than added as a general modifier to the shared component
   for a single current user. Card/border/padding all still come from
   css/pricing.css unchanged - only the column count is overridden. */

.fbi-pricing-tiers .pricing-options-row {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1000px) {
  .fbi-pricing-tiers .pricing-options-row {
    grid-template-columns: 1fr;
  }
}