/* ================================================
   PAGE: products.html
   Scoped page-specific styles — extends main.css
   components without modifying shared files.
   ================================================ */

/* Product tour — sequence of alternating feature rows,
   built from the .tabs / .tab-panel.active markup used
   statically (no JS tab-switcher). */
.product-tour {
  padding: var(--sp-24) 0;
  background: var(--white);
}

/* Reverse alternate rows so the image sits on the left */
.product-tour__row--reverse .tab-panel__content {
  order: 2;
}

.product-tour__row--reverse .tab-panel__image {
  order: 1;
}

/* Second capabilities-grid instance on this page needs a
   white background so it alternates against the gray-50
   "Integrations" section above it. */
.capabilities--white {
  background: var(--white);
}

/* Light intro strip that sits directly above the dark
   .stats-section customer-results strip. */
.product-results-intro {
  padding: var(--sp-20) 0 var(--sp-4);
  background: var(--gray-50);
}

.product-results-intro .section-header {
  margin-bottom: 0;
}

/* Only 3 results on this page — override the 4-col grid */
.product-results__grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .product-results__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .product-results__grid {
    grid-template-columns: 1fr;
  }
}