/* Section shell: page rhythm + hero (tokens from clover-brand.css). */

.clover-brand-hub-section {
  padding-block: 48px 56px;
}

@media (min-width: 768px) {
  .clover-brand-hub-section {
    padding-block: 64px 72px;
  }
}

.clover-brand-hub-section__hero {
  max-width: 52rem;
  margin-inline: auto;
  margin-block-end: 40px;
  text-align: center;
}

.clover-brand-hub-section__title {
  margin-block: 0 12px;
  color: rgb(var(--brand-dark));
}

.clover-brand-hub-section__lede {
  margin: 0;
  color: rgb(var(--brand-muted));
  font-size: 1.05rem;
  line-height: 1.65;
}

.clover-brand-hub__heading {
  margin: 0 0 20px;
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgb(var(--brand-dark));
  text-align: center;
}