/* Sendly hero headline highlight + index typography match
   Replace assets/css/hero-headline-highlight.css with this file.
   Goal: keep every hero headline using the same typography feel as the homepage/index. */

/* 1) Match all public hero H1 typography to homepage/index rhythm */
.v4-hero-copy h1,
.v23-how-copy h1,
.uc26-hero-inner h1,
.cp29-hero-inner h1,
.ip-hero-inner h1,
.snp-hero-copy h1,
.faq-pro-hero h1,
.snp-page .snp-hero-copy h1,
.public-body .snp-hero-copy h1 {
  font-family: inherit !important;
  font-weight: 800 !important;
  letter-spacing: -0.075em !important;
  line-height: .91 !important;
  font-synthesis-weight: none;
  text-rendering: geometricPrecision;
}

/* 2) Highlight text must NOT become bolder or use another font */
.sendly-hero-highlight,
.hero-highlight-box,
.v23-text-highlight,
.uc26-highlight,
.cp29-highlight {
  display: inline;
  position: relative;
  z-index: 0;
  color: inherit;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  padding: 0 .035em;
  margin: 0 -.005em;
  background-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent 58%,
      rgba(184,255,34,.92) 58%,
      rgba(184,255,34,.92) 78%,
      transparent 78%,
      transparent 100%),
    linear-gradient(180deg,
      transparent 0%,
      transparent 69%,
      rgba(105,232,126,.58) 69%,
      rgba(105,232,126,.58) 90%,
      transparent 90%,
      transparent 100%);
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sendly-hero-highlight::before,
.hero-highlight-box::before,
.v23-text-highlight::before,
.uc26-highlight::before,
.cp29-highlight::before {
  content: "";
  position: absolute;
  left: -.025em;
  right: -.025em;
  bottom: .075em;
  height: .145em;
  border-radius: 999px;
  background: rgba(10,86,45,.055);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

/* 3) Keep page-specific hero sizes intact while typography feels consistent */
.snp-features-page .snp-hero-copy h1,
.snp-serve-page .snp-hero-copy h1,
.snp-report-page .snp-hero-copy h1,
.faq-pro-page .snp-hero-copy h1 {
  font-weight: 800 !important;
  letter-spacing: -0.075em !important;
}

@media (max-width: 860px) {
  .v4-hero-copy h1,
  .v23-how-copy h1,
  .uc26-hero-inner h1,
  .cp29-hero-inner h1,
  .ip-hero-inner h1,
  .snp-hero-copy h1,
  .faq-pro-hero h1,
  .snp-page .snp-hero-copy h1,
  .public-body .snp-hero-copy h1 {
    font-weight: 800 !important;
    letter-spacing: -0.065em !important;
    line-height: .94 !important;
  }

  .sendly-hero-highlight,
  .hero-highlight-box,
  .v23-text-highlight,
  .uc26-highlight,
  .cp29-highlight {
    padding: 0 .025em;
    background-image:
      linear-gradient(180deg,
        transparent 0%,
        transparent 59%,
        rgba(184,255,34,.90) 59%,
        rgba(184,255,34,.90) 78%,
        transparent 78%,
        transparent 100%),
      linear-gradient(180deg,
        transparent 0%,
        transparent 70%,
        rgba(105,232,126,.52) 70%,
        rgba(105,232,126,.52) 90%,
        transparent 90%,
        transparent 100%);
  }

  .sendly-hero-highlight::before,
  .hero-highlight-box::before,
  .v23-text-highlight::before,
  .uc26-highlight::before,
  .cp29-highlight::before {
    bottom: .065em;
    height: .12em;
    filter: blur(7px);
  }
}