@supports (font: -apple-system-body) {
  :root {
    font: -apple-system-body;
    line-height: 1.5;
  }

  .state h1,
  .coach h1 {
    font-size: min(2em, 12vw);
    overflow-wrap: anywhere;
  }

  .coach .eyebrow {
    display: inline-block;
    max-width: 100%;
    font-size: min(1em, 5vw);
    overflow-wrap: anywhere;
  }
}

/* Android WebView applies system fontScale after CSS sizing. Keep the primary intake text
   fluid against the viewport so 200% text cannot create an unbreakable horizontal layout. */
@media (max-width: 480px) {
  .state h1,
  .coach h1 {
    max-width: 100%;
    font-size: clamp(1.5rem, 8vw, 2.5rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .coach input {
    min-width: 0;
    text-overflow: ellipsis;
  }
}