/* LT Performance26 mobile homepage overflow regression fix.
   Loaded after the shared/mobile styles so the hero always stays inside the phone viewport. */
@media (max-width: 700px) {
  html,
  body,
  #root,
  .app-shell,
  main,
  .content,
  .hero,
  .hero-copy {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
  }

  html,
  body {
    overflow-x: hidden !important;
  }

  .hero {
    display: block !important;
    min-height: auto !important;
    overflow-x: clip !important;
  }

  .hero-copy {
    padding: 58px 16px 45px !important;
    margin: 0 auto !important;
    overflow: hidden;
    text-align: center;
  }

  .hero .status-pill {
    box-sizing: border-box;
    max-width: 100%;
    margin-inline: auto;
    white-space: normal;
  }

  .hero h1 {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 34px auto 24px !important;
    font-size: clamp(42px, 11vw, 50px) !important;
    line-height: .86 !important;
    letter-spacing: -.055em !important;
    white-space: normal !important;
  }

  .hero h1 > span {
    display: inline-block;
  }

  .hero h1 em {
    display: inline;
  }

  .hero-copy > p {
    box-sizing: border-box;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto 28px !important;
    padding-inline: 4px;
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
    margin: 0 auto !important;
  }

  .hero-actions button,
  .hero .primary,
  .hero .secondary {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
  }

  .hero .trust-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 32px !important;
  }

  .hero .trust-row > div {
    box-sizing: border-box;
    min-width: 0;
    padding: 10px 6px !important;
  }

  .hero .trust-row strong {
    font-size: clamp(28px, 8vw, 40px);
  }

  .hero .trust-row span {
    display: block;
    font-size: 10px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 390px) {
  .hero-copy {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero h1 {
    font-size: clamp(39px, 10.5vw, 43px) !important;
    letter-spacing: -.06em !important;
  }
}