/* =========================================================
 * HP Hero Mobile Intro (Below Hero)
 * ========================================================= */

.hp-hero-mobile-intro {
  padding: 2rem 0 0 0;
  background-color: var(--white);
  color: var(--text-color);
  text-align: left;
}

.hp-hero-mobile-intro__inner {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 100%;
  margin: 0 auto;
}

/* Subtle animation (optional, same as hero fade) */
@media (prefers-reduced-motion: no-preference) {
  .hp-hero-mobile-intro__inner {
    opacity: 0;
    transform: translateY(0.75rem);
    animation: heroIntroFade 0.8s ease-out 0.3s forwards;
  }

  @keyframes heroIntroFade {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Hide on desktop (≥1024px) */
@media (min-width: 64rem) {
  .hp-hero-mobile-intro {
    display: none;
  }
}