:root {
  --site-gutter: 1rem;
  --site-section-space: 3.5rem;
  --site-card-space: 1rem;
}

/* One vertical rhythm for the primary homepage sections. */
#campaign-story,
#features,
#home-products,
#comparison {
  padding-top: var(--site-section-space) !important;
  padding-bottom: var(--site-section-space) !important;
}

#home-products {
  padding-right: var(--site-gutter) !important;
  padding-left: var(--site-gutter) !important;
}

/* Comparison content is easier to scan when both columns share one edge. */
#comparison :is(th, td),
#comparison :is(th, td) * {
  text-align: left !important;
}

#comparison :is(th, td) > div {
  justify-content: flex-start !important;
}

/* Static About page spacing. */
.about-values,
.about-details {
  padding-top: var(--site-section-space) !important;
  padding-right: var(--site-gutter) !important;
  padding-left: var(--site-gutter) !important;
}

.about-story-card,
.about-detail-grid article {
  padding: 1.5rem !important;
}

.about-closing {
  margin-top: var(--site-section-space) !important;
  padding: 1.5rem !important;
}

/* Product pages use the same compact outer and card spacing. */
@media (max-width: 760px) {
  .category-main {
    padding: 7.25rem var(--site-gutter) var(--site-section-space) !important;
  }

  .category-panel,
  .category-panel-products {
    padding: var(--site-card-space) !important;
    border-radius: 1.75rem !important;
  }

  .category-product-grid {
    gap: 1rem !important;
    margin-top: 2rem !important;
  }

  .category-product-card {
    padding: var(--site-card-space) !important;
  }

  .category-explore {
    display: none !important;
  }
}

@media (min-width: 761px) {
  :root {
    --site-gutter: 2rem;
    --site-section-space: 6rem;
    --site-card-space: 1.5rem;
  }

  .about-values,
  .about-details {
    padding-top: var(--site-section-space) !important;
  }

  .about-story-card,
  .about-detail-grid article,
  .about-closing {
    padding: 2rem !important;
  }

  .category-main {
    padding-top: 8rem !important;
    padding-bottom: var(--site-section-space) !important;
  }

  .category-panel,
  .category-panel-products {
    padding: 3rem !important;
  }
}