/* v15: a delayed mobile contact bar, one hero action, and mobile spacing. */

/* Match the legal card's width while retaining desktop vertical spacing. */
@media (min-width: 821px) {
  .hero .hero__actions { width: 100%; max-width: 650px; }
  .hero .hero__actions > .button--primary { width: 100%; }
}

/* The hero becomes a single column at this existing breakpoint. */
@media (max-width: 820px) {
  .hero .legal-teaser { margin-bottom: 20px; }
  .hero .hero__status { margin-top: 16px; }
  .hero .hero__grid { row-gap: 28px; }
}

/* Keep the existing phone-only contact bar and its button sizes. */
@media (max-width: 560px) {
  .mobile-contact-bar {
    visibility: hidden;
    pointer-events: none;
  }
  .mobile-contact-bar.is-visible {
    visibility: visible;
    pointer-events: auto;
    animation: mobile-contact-enter 1.12s cubic-bezier(.2, .8, .2, 1) both;
  }
}

@keyframes mobile-contact-enter {
  from { opacity: 0; transform: translateY(calc(100% + 16px)); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-contact-bar.is-visible { animation: none; }
}