@import url("/assets/palette-rgb.css");

/* Mobile hero refinements */
@media (max-width: 560px) {
  .hero {
    min-height: 82svh;
    align-items: flex-start;
  }

  .hero-content {
    width: 100%;
    padding: 104px 20px 28px;
  }

  .hero .eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: .18em;
  }

  .hero h1 {
    max-width: 350px;
    font-size: clamp(30px, 8.5vw, 38px);
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 430;
  }

  .hero-copy {
    max-width: 335px;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.4;
    color: rgba(255,255,255,.84);
  }

  .hero-actions {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 135px;
  }

  .hero-actions .button {
    min-height: 40px;
    padding: 0 15px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  .hero-actions .button-primary,
  .hero-actions .button-ghost {
    min-width: 0;
  }
}