.card {
      background-color: var(--surface-dark);
      border-radius: 12px;
      padding: 30px;
      max-width: 700px;
      width: 50%;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    body.light-mode .card {
      background-color: var(--surface-light);
      color: var(--text-light);
    }

    .card p {
      color: #ccc;
      line-height: 1.6;
      text-align: center; /* keep intro copy centered */
    }
    body.light-mode .card p { color: #333; }

    /* Make the card narrower on small screens */
    @media (max-width: 820px) { .card { width: 100%; } }