/* Balanced tool-page hero typography across desktop, tablet, and phones. */
.tool-hero h1 {
  max-width: 1020px;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.tool-hero > p {
  max-width: 760px;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 900px) {
  .tool-hero h1 {
    max-width: 760px;
    font-size: clamp(42px, 7vw, 58px);
    line-height: 1.02;
    letter-spacing: -.052em;
  }
}

@media (max-width: 620px) {
  .tool-hero {
    padding-left: 18px;
    padding-right: 18px;
  }

  .tool-hero h1 {
    max-width: 520px;
    font-size: clamp(34px, 10.1vw, 42px);
    line-height: 1.06;
    letter-spacing: -.043em;
    overflow-wrap: normal;
    word-break: normal;
  }

  .tool-hero > p {
    max-width: 500px;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 370px) {
  .tool-hero h1 {
    font-size: clamp(31px, 9.5vw, 35px);
    line-height: 1.08;
    letter-spacing: -.037em;
  }
}