/* Responsive Design */
@media (max-width: 480px) {
  .site-header {
    padding: 0 1rem;
  }

  .header-logo-text {
    font-size: 1rem;
  }

  .header-user span {
    display: none;
  }

  .header-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .modal {
    margin: 0.5rem;
    max-height: calc(100vh - 1rem);
  }

  .modal-body {
    padding: 1.25rem;
  }

  .signup {
    padding: 1.5rem;
  }

  .signup-form {
    flex-direction: column;
  }

  .signup-input {
    width: 100%;
  }

  .signup-button {
    width: 100%;
  }

  .feature-content-inner {
    padding-left: 1.25rem;
  }

  .demo-controls {
    gap: 1rem;
  }

  .bar-slider {
    width: 140px;
  }

  .string-indicator {
    display: none;
  }

  .demo-invite {
    padding: 2rem 1.5rem;
  }

  .demo-invite-title {
    font-size: 1.25rem;
  }

  .chord-name {
    font-size: 1.5rem;
  }

  .chord-alt {
    font-size: 1rem;
  }

  footer::before {
    width: 60px;
  }
}

/* Tablet refinements */
@media (min-width: 481px) and (max-width: 768px) {
  .demo-controls {
    gap: 1.5rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}