/* ─── RESPONSIVE ─────────────────────────────────────────── */
  @media (max-width: 640px) {
    .header { padding: 12px 20px; }
    .logo-mark { height: 34px; padding: 5px 8px; border-radius: 6px; }
    .intro-hero { padding: 48px 20px 44px; }
    .intro-logo-hero { width: 56px; height: 68px; }
    .intro-body { padding: 32px 20px; }
    .q-page-header { padding: 24px 20px 16px; }
    .questions-container { padding: 0 20px 32px; }
    .nav-bar { padding: 16px 20px 40px; }
    .results-body { padding: 24px 20px; }
    .results-footer { padding: 0 20px 48px; }
    .profile-grid { grid-template-columns: 1fr; }
    .type-grid { grid-template-columns: 1fr; }
    .intro-meta { gap: 24px; }
    .likert-btn { height: 38px; font-size: 0.8rem; }
    .main-type-percent { font-size: 3rem; top: 24px; right: 24px; }
    .results-hero { padding: 40px 20px 36px; }
    .legal-footer { padding: 14px 16px 22px; }
  }