.hm-cta {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-color: var(--color-background-surface);
  color: #000000;
  position: relative;
  overflow: hidden;
}

.hm-cta__background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-secondary);
  opacity: 0.05;
  pointer-events: none;
}

.hm-cta__container {
  max-width: var(--spacing-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-gutter);
  padding-right: var(--spacing-gutter);
  text-align: center;
  position: relative;
  z-index: 10;
}

.hm-cta__content {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hm-cta__heading {
  font-family: var(--font-display-lg);
  font-size: 40px;
  color: inherit;
  line-height: 1.25;
  margin: 0 0 1.5rem 0; /* mb-6 */
}

@media (min-width: 768px) {
  .hm-cta__heading {
    font-size: 64px;
  }
}

.hm-cta__text {
  font-family: var(--font-body-lg);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-height);
  color: var(--color-on-primary-fixed-variant);
  max-width: 42rem; /* max-w-2xl */
  margin: 0 auto 2.5rem auto; /* mx-auto mb-10 */
}

.hm-cta__button {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 1.25rem 3rem; /* py-5 px-12 */
  border-radius: 9999px;
  font-family: var(--font-display-lg);
  font-size: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
  text-decoration: none;
}

.hm-cta__button:hover {
  transform: scale(1.05);
  color: #fff;
}

.hm-cta__button:active {
  transform: scale(0.95);
}