/* The visible primary heading names both the brand and the app's purpose. */
#hero-title.brand-heading {
  width: auto;
  max-width: 570px;
  line-height: .96;
}
#hero-title .hero-name {
  display: block;
  margin-bottom: 18px;
  font: 500 clamp(30px, 2.6vw, 40px)/1.2 var(--sans);
  letter-spacing: .055em;
}
#hero-title .hero-service {
  display: block;
  max-width: 8.5ch;
  font-size: clamp(72px, 7.1vw, 108px);
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
}
#hero-title .hero-service em {
  font-size: 1em;
  line-height: inherit;
  margin-top: 0;
}
@media (max-width: 850px) {
  #hero-title .hero-service { font-size: clamp(60px, 10vw, 85px); }
}
@media (max-width: 600px) {
  #hero-title .hero-name { font-size: 30px; margin-bottom: 14px; }
  #hero-title .hero-service { font-size: clamp(44px, 11.8vw, 68px); }
}