/* Final mobile hero containment layer. Loaded after main.css. */
@media (max-width: 720px) {
  .hero-grid {
    width: 100%;
    max-width: none;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
  }

  .hero-copy,
  .hero-message,
  .hero-buttons,
  .hero .mini-proof {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .hero h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(39px, 11.8vw, 52px);
    overflow-wrap: normal;
  }

  .hero-title__line {
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
  }

  .hero-title__highlight {
    width: 100%;
    white-space: normal;
    line-height: 0.94;
  }

  .hero-highlight__mobile-line {
    display: block;
    width: 100%;
    white-space: nowrap;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    box-sizing: border-box;
  }

  .hero .mini-proof {
    gap: 6px;
  }

  html:is(
    [lang="de"],
    [lang="fr"],
    [lang="es"],
    [lang="it"],
    [lang="nl"],
    [lang="bg"],
    [lang="ro"],
    [lang="el"],
    [lang="sr"],
    [lang="hr"],
    [lang="bs"],
    [lang="sq"],
    [lang="mk"]
  ) .hero h1 {
    font-size: clamp(33px, 9.8vw, 43px);
  }

  html[lang="ar"] .hero h1 {
    font-size: clamp(35px, 10.4vw, 45px);
  }
}

@media (min-width: 721px) {
  .hero-highlight__mobile-line {
    display: inline;
  }

  .hero-highlight__mobile-line + .hero-highlight__mobile-line::before {
    content: " ";
  }
}

@media (max-width: 380px) {
  .hero-grid {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .hero h1 {
    font-size: clamp(37px, 10.7vw, 41px);
  }
}