@keyframes fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade { animation: fade .4s cubic-bezier(.2,.7,.2,1); }
.optbtn { transition: border-color .15s, background .15s, color .15s, transform .12s; }
.optbtn:hover { border-color: #C7C3E4 !important; }
.optbtn:active { transform: scale(.995); }
.primary-btn { transition: opacity .15s, transform .12s; }
.primary-btn:active { transform: scale(.98); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fin { width: 100%; font-family: inherit; font-size: 15px; color: #221C57; padding: 13px 15px; border: 1.5px solid #E4E3EC; border-radius: 12px; background: #fff; outline: none; transition: border-color .15s; }
.fin:focus { border-color: #2E2270; }
.fin::placeholder { color: #B4B1C6; }

@media (max-width: 720px) {
  .intro-dims { grid-template-columns: 1fr 1fr !important; }
  .res-top { grid-template-columns: 1fr !important; text-align: center; }
  .res-donutwrap { justify-content: center !important; }
}
@media (max-width: 560px) {
  .page-pad { padding-left: 18px !important; padding-right: 18px !important; }
  .intro-h1 { font-size: 32px !important; }
  .quiz-q { font-size: 21px !important; }
  .res-score { font-size: 30px !important; }
  .intro-dims { grid-template-columns: 1fr 1fr !important; }
  .quiz-nav { flex-direction: column-reverse !important; gap: 12px !important; }
  .quiz-nav > * { width: 100% !important; text-align: center; justify-content: center !important; }
  .form-grid { grid-template-columns: 1fr !important; }
}