.hl-assessment { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 900px; margin: 0 auto; }
.hl-assessment .hl-domain { margin-bottom: 32px; background: #f8f9fa; border-radius: 12px; padding: 24px; border: 1px solid #e9ecef; }
.hl-assessment .hl-domain h3 { font-size: 18px; font-weight: 700; margin: 0 0 16px 0; color: #0a2540; }
.hl-assessment .hl-question { display: flex; flex-wrap: wrap; align-items: center; padding: 10px 0; border-bottom: 1px solid #e9ecef; }
.hl-assessment .hl-question:last-child { border-bottom: none; }
.hl-assessment .hl-qtext { flex: 0 0 260px; font-weight: 600; font-size: 14px; color: #1a1a1a; padding-right: 16px; }
.hl-assessment .hl-qtext small { display: block; font-weight: 400; color: #6c757d; font-size: 12px; }
.hl-assessment .hl-options { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.hl-assessment .hl-opt { position: relative; }
.hl-assessment .hl-opt input { position: absolute; opacity: 0; cursor: pointer; }
.hl-assessment .hl-opt label { display: block; padding: 8px 16px; border: 2px solid #dee2e6; border-radius: 8px; font-size: 13px; cursor: pointer; transition: all .15s; background: #fff; color: #495057; font-weight: 500; }
.hl-assessment .hl-opt input:checked + label { border-color: #0a2540; background: #e8edf5; color: #0a2540; }
.hl-assessment .hl-opt label:hover { border-color: #0a2540; }
.hl-scoreboard { background: #0a2540; color: #fff; border-radius: 12px; padding: 24px; margin-bottom: 32px; }
.hl-scoreboard h3 { margin: 0 0 16px 0; font-size: 16px; color: rgba(255,255,255,0.8); }
.hl-score-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hl-score-label { flex: 0 0 130px; font-size: 13px; font-weight: 500; }
.hl-score-bar { flex: 1; height: 10px; background: rgba(255,255,255,0.15); border-radius: 5px; overflow: hidden; }
.hl-score-fill { height: 100%; border-radius: 5px; transition: width .4s ease; }
.hl-score-pct { flex: 0 0 40px; text-align: right; font-size: 13px; font-weight: 700; }
.hl-total-score { text-align: center; margin: 20px 0 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.2); }
.hl-total-score .hl-big { font-size: 42px; font-weight: 800; line-height: 1; }
.hl-total-score .hl-label { font-size: 14px; color: rgba(255,255,255,0.7); }
.hl-total-score .hl-tier { font-size: 18px; font-weight: 600; margin-top: 4px; }
.hl-cta-box { background: #f8f9fa; border-radius: 12px; padding: 24px; text-align: center; margin-bottom: 32px; }
.hl-cta-box h3 { font-size: 18px; margin: 0 0 8px 0; }
.hl-cta-box p { color: #6c757d; font-size: 14px; margin: 0 0 16px 0; }
.hl-cta-box input[type="text"], .hl-cta-box input[type="email"] { padding: 10px 16px; border: 2px solid #dee2e6; border-radius: 8px; font-size: 14px; width: 220px; margin: 4px; }
.hl-cta-box button { background: #0a2540; color: #fff; border: none; padding: 10px 32px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.hl-cta-box button:hover { background: #1a3a60; }
#hl-email-error { color: #c5221f; font-size: 12px; margin: 4px 0; display: none; }
@media (max-width: 600px) { .hl-assessment .hl-qtext { flex-basis: 100%; margin-bottom: 8px; } .hl-assessment .hl-opt label { padding: 6px 12px; font-size: 12px; } .hl-score-label { flex-basis: 100px; font-size: 12px; } }