@media (max-width: 767px) {
  #hero {
    --hero-letter-edge: #061522;
    --hero-letter-shadow:
      -1px -1px 0 var(--hero-letter-edge), 0 -1px 0 var(--hero-letter-edge), 1px -1px 0 var(--hero-letter-edge),
      -1px 0 0 var(--hero-letter-edge), 1px 0 0 var(--hero-letter-edge),
      -1px 1px 0 var(--hero-letter-edge), 0 1px 0 var(--hero-letter-edge), 1px 1px 0 var(--hero-letter-edge);
  }

  /* Transparent borders keep the previous dimensions and touch targets. */
  #hero .health-hero-copy,
  #hero .hero-enter-4,
  #hero .hero-enter-5,
  #hero #hero-cta-primary,
  #hero #hero-cta-secondary,
  #hero #motion-toggle {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  #hero .health-hero-copy > h1,
  #hero .health-hero-copy > p,
  #hero #hero-cta-primary,
  #hero #hero-cta-secondary,
  #hero #motion-toggle {
    text-shadow: var(--hero-letter-shadow);
  }

  #hero .health-hero-copy > p:first-child,
  #hero #hero-cta-primary {
    color: #ffe3a3;
  }

  #hero #hero-cta-secondary,
  #hero #motion-toggle {
    color: #fffdf6;
  }

  #hero #hero-cta-primary,
  #hero #hero-cta-secondary {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .24em;
  }

  #hero #hero-cta-secondary svg,
  #hero #motion-toggle svg {
    filter: drop-shadow(0 0 1px var(--hero-letter-edge)) drop-shadow(0 0 1px var(--hero-letter-edge));
  }
}