/* Keep long mobile headings and their original highlights inside the content gutter. */
@media (max-width: 767px) {
  :is(h1, h2, h3) {
    overflow-wrap: anywhere;
  }

  :is(h1, h2, h3) :is(.marker-yellow, .marker-pink, .marker-teal, .underline-hand) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  [data-testid="sector-showcase-title"] > .inline-flex {
    max-width: 100%;
  }

  [data-testid="sector-showcase-title"] > .inline-flex > span {
    min-width: 0;
  }

  [data-testid="sector-showcase-hero"] > .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fit the single long pricing word without splitting it on narrow phones. */
@media (max-width: 639px) {
  [data-testid="pricing-hand-title"] {
    font-size: clamp(2.25rem, calc(12.5vw - 5px), 3rem);
  }
}