/* Put the first question in view as soon as this page opens. */
.layout { margin-top: 18px; }
.intro strong { color: #fff; font-weight: 850; }
.card-top { margin-bottom: 27px; }
.preview-status {
  align-self: flex-start;
  border: 1px solid #bfd5f5;
  background: #edf5ff;
  color: #174287;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.card:has(.result-icon) { min-height: 450px; }
@media (max-width: 850px) {
  .card { order: 1; min-height: 0; }
  .intro { order: 2; padding: 30px; }
  .layout { gap: 18px; }
}
@media (max-width: 560px) {
  .layout { margin-top: 12px; }
  .card { padding: 23px 20px; min-height: 0; }
  .card-top { margin-bottom: 22px; flex-wrap: wrap; gap: 8px; }
  .preview-status { font-size: .7rem; padding: 5px 8px; }
  .intro { padding: 28px 25px; }
  .card:has(.result-icon) { min-height: 420px; }
}