/* The quick check and the certified exam, side by side. Shared by /quiz and
   /exam so the two entry points always describe each other the same way.
   The exam card carries the visual weight because it is the one that ends
   with something the visitor keeps. */

.ch-wrap { width: 100%; max-width: 46rem; margin: 0 auto 1.25rem; }
.ch-lede { font-size: 0.9rem; color: var(--muted, #7488c2); margin-bottom: 0.7rem; }

.ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.ch-card {
  background: #fff; border-radius: 18px; padding: 1.25rem 1.35rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  box-shadow: 0 18px 44px -34px rgba(16, 42, 102, 0.4);
}
.ch-card.ch-lead { background: linear-gradient(135deg, #2f6bff 0%, #12317f 100%); color: #fff; }
.ch-card.ch-here { outline: 2px solid rgba(16, 42, 102, 0.16); }
.ch-card.ch-lead.ch-here { outline-color: rgba(255, 255, 255, 0.4); }

.ch-tag {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue, #2563ff);
}
.ch-lead .ch-tag { color: #9cc0ff; }
.ch-tag span {
  font-size: 0.6rem; letter-spacing: 0.1em; padding: 2px 7px; border-radius: 999px;
  background: rgba(16, 42, 102, 0.09); color: var(--dark-2, #1c47a8);
}
.ch-lead .ch-tag span { background: rgba(255, 255, 255, 0.2); color: #fff; }

.ch-card h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.ch-card p { font-size: 0.84rem; line-height: 1.55; color: var(--dark-2, #1c47a8); }
.ch-lead p { color: rgba(239, 245, 255, 0.9); }

.ch-card ul { list-style: none; padding: 0; margin: 0.15rem 0 0.35rem; display: grid; gap: 0.28rem; }
.ch-card li {
  position: relative; padding-left: 1.15rem; font-size: 0.8rem; line-height: 1.45;
}
.ch-card li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--blue, #2563ff);
}
.ch-lead li::before { background: #9cc0ff; }
.ch-card li.ch-no { color: var(--muted, #7488c2); }
.ch-card li.ch-no::before { background: rgba(116, 136, 194, 0.5); }
.ch-lead li.ch-no { color: rgba(239, 245, 255, 0.66); }
.ch-lead li.ch-no::before { background: rgba(255, 255, 255, 0.34); }

.ch-btn {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; font-weight: 700; padding: 0.55rem 1.1rem; border-radius: 999px;
  background: var(--ink, #102a66); color: #fff; text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.22, 0.68, 0, 1);
}
.ch-btn:hover { transform: scale(1.05); }
.ch-btn svg { width: 0.85rem; height: 0.85rem; }
.ch-lead .ch-btn { background: #fff; color: #12317f; }
.ch-btn.ch-off {
  background: transparent; color: var(--muted, #7488c2);
  border: 1px dashed rgba(16, 42, 102, 0.24); cursor: default;
}
.ch-btn.ch-off:hover { transform: none; }
.ch-lead .ch-btn.ch-off { color: rgba(239, 245, 255, 0.7); border-color: rgba(255, 255, 255, 0.3); }

/* the prompt shown after the quick check ends */
.quiz-next {
  background: linear-gradient(135deg, #2f6bff 0%, #12317f 100%); color: #fff;
  border-radius: 18px; padding: 1.5rem 1.6rem; margin-top: 1rem;
}
.quiz-next h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.45rem; }
.quiz-next p { font-size: 0.88rem; line-height: 1.6; color: rgba(239, 245, 255, 0.9); max-width: 56ch; }
.quiz-next-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1rem;
  background: #fff; color: #12317f; font-weight: 700; font-size: 0.88rem;
  padding: 0.65rem 1.3rem; border-radius: 999px; text-decoration: none;
}
.quiz-next-btn:hover { transform: scale(1.04); }

@media (max-width: 700px) { .ch-grid { grid-template-columns: 1fr; } }
@media print { .ch-wrap, .quiz-next { display: none !important; } }