@media (max-width: 768px) {
  .hero {
    padding: var(--space-14) 0 var(--space-10);
  }

  .hero__title {
    letter-spacing: -0.03em;
  }

  .section {
    padding: var(--space-12) 0;
  }

  .section__header {
    margin-bottom: var(--space-8);
  }

  .section::before {
    width: 56px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-4);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .btn--lg {
    padding: 14px 24px;
    font-size: var(--text-sm);
  }

  .hero__eyebrow {
    font-size: 0.6875rem;
  }
}