.card a.button-link {
    align-self: flex-start;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-accent);
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition);
  }

  .card a.button-link:hover,
  .card a.button-link:focus {
    border-color: var(--color-accent);
  }

  footer {
    background-color: #f9fafb;
    text-align: center;
    color: var(--color-secondary);
    font-size: 0.875rem;
    padding: 2rem 1rem;
    user-select: none;
    border-top: 1px solid #e5e7eb;
  }

  /* Responsive adjustments */

  @media (max-width: 768px) {
    .hero h1 {
      font-size: 3rem;
    }
    section h2 {
      font-size: 2.25rem;
    }
    nav a {
      font-size: 0.9rem;
    }
  }

  @media (max-width: 480px) {
    main {
      margin: 3rem 1rem 4rem;
    }
    .hero h1 {
      font-size: 2rem;
    }
  }