@layer utilities {
  .center { text-align: center; }
  .right  { text-align: right; }
  .left   { text-align: left; }

  .hidden { display: none !important; }

  .mt-0 { margin-top: 0 !important; }
  .mt-2 { margin-top: var(--space-2); }
  .mt-3 { margin-top: var(--space-3); }
  .mt-4 { margin-top: var(--space-4); }
  .mt-5 { margin-top: var(--space-5); }
  .mt-6 { margin-top: var(--space-6); }
  .mt-7 { margin-top: var(--space-7); }
  .mt-8 { margin-top: var(--space-8); }

  .mb-0 { margin-bottom: 0 !important; }
  .mb-2 { margin-bottom: var(--space-2); }
  .mb-3 { margin-bottom: var(--space-3); }
  .mb-4 { margin-bottom: var(--space-4); }
  .mb-5 { margin-bottom: var(--space-5); }
  .mb-6 { margin-bottom: var(--space-6); }

  .w-full { width: 100%; }
}

@layer components {
  /* Responsive collapse — clipboard, prep-grid, profile-grid. */
  @media (max-width: 900px) {
    .clipboard-scene { padding: var(--space-5); }
    .prep-grid { grid-template-columns: 1fr; gap: var(--space-5); }
    .invite-hero-title { font-size: 44px; }
    .invite-hero-meta { gap: 20px; }
  }
}