/* Keep these hex values in sync with tailwind.config.js -> theme.colors */
.hdg-highlight {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(
    in srgb,
    var(--color-secondary) 40%,
    transparent
  );
  text-decoration-thickness: 6px;
  text-underline-offset: 4px;
}

.hdg-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background-color: var(--color-secondary);
  margin-right: 8px;
  vertical-align: middle;
}

.hdg-size-hero {
  font-size: clamp(32px, 20.571px + 3.571vw, 48px);
  line-height: 1.08; /* 51.84px at 48px */
  letter-spacing: -0.09rem;
}

.hdg-size-xl {
  font-size: clamp(26px, 16px + 3.125vw, 40px);
  line-height: 1.12; /* 44.8px at 40px */
  letter-spacing: -0.063rem;
}

.hdg-size-lg {
  font-size: clamp(26px, 18.857px + 2.232vw, 36px);
  line-height: 1.2; /* 43.2px at 36px */
}

.hdg-size-md {
  font-size: clamp(26px, 20.286px + 1.786vw, 34px);
  line-height: 1.029; /* 35px at 34px */
}

.hdg-size-sm {
  font-size: clamp(26px, 23.143px + 0.893vw, 30px);
  line-height: 1.067; /* 32px at 30px */
}

.w-heading.hdg-stats {
  row-gap: 4px;
}

.w-heading.hdg-stats > p {
  font-size: 12px;
  font-weight: 500;
  line-height: 19.2px;
  letter-spacing: 0.12px;
}