.ans-npq { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.ans-npq__card{
  max-width: 760px; margin: 24px auto; background: #fff;
  border: 1px solid #e6e6e6; border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.06);
  overflow: hidden;
}
.ans-npq__header{ padding: 18px 18px 0; }
.ans-npq__title{ margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
.ans-npq__subtitle{ margin: 0; color: #555; }

.ans-npq__progress{ padding: 14px 18px 0; }
.ans-npq__progressbar{ height: 10px; background: #f1f1f1; border-radius: 999px; overflow: hidden; }
.ans-npq__progressfill{ height: 100%; background: #111; width: 0%; transition: width .25s ease; }
.ans-npq__progressmeta{ margin-top: 8px; color: #666; font-size: 13px; }

.ans-npq__body{ padding: 18px; }
.ans-npq__qtext{ font-size: 18px; margin-bottom: 12px; font-weight: 650; }
.ans-npq__answers{ display: grid; gap: 10px; }

.ans-npq__answer{
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid #e6e6e6; border-radius: 12px; padding: 12px;
  cursor: pointer; transition: transform .06s ease, border-color .2s ease;
}
.ans-npq__answer:hover{ border-color: #bbb; transform: translateY(-1px); }
.ans-npq__answer input{ margin-top: 3px; }
.ans-npq__answerText{ color: #111; }

.ans-npq__nav{ display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.ans-npq__btn{
  appearance: none; border: 0; border-radius: 12px; padding: 12px 14px;
  background: #111; color: #fff; font-weight: 650; cursor: pointer;
}
.ans-npq__btn[disabled]{ opacity: .45; cursor: not-allowed; }
.ans-npq__btn--ghost{ background: #f3f3f3; color: #111; border: 1px solid #e6e6e6; }
.ans-npq__btn--wide{ width: 100%; margin-top: 10px; }

.ans-npq__resultsTitle{ margin: 0 0 6px; font-size: 20px; }
.ans-npq__resultsSub{ margin: 0 0 14px; color: #555; }

.ans-npq__resultCard{
  border: 1px solid #e6e6e6; border-radius: 14px; padding: 14px; margin-bottom: 12px;
}
.ans-npq__resultTop{ display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ans-npq__badge{
  display: inline-block; font-size: 12px; padding: 4px 8px; border-radius: 999px;
  background: #f3f3f3; border: 1px solid #e6e6e6; margin-bottom: 6px;
}
.ans-npq__resultName{ font-size: 18px; font-weight: 700; }
.ans-npq__score{ font-weight: 800; color: #111; background: #f7f7f7; border: 1px solid #e6e6e6; padding: 6px 10px; border-radius: 999px; }
.ans-npq__bullets{ margin: 10px 0 0; padding-left: 18px; color: #333; }

.ans-npq__lead{ margin-top: 18px; padding-top: 14px; border-top: 1px solid #eee; }
.ans-npq__leadTitle{ margin: 0 0 6px; font-size: 18px; }
.ans-npq__leadSub{ margin: 0 0 12px; color: #555; }

.ans-npq__leadForm{ display: grid; grid-template-columns: 1fr 160px; gap: 10px; }
.ans-npq__input{
  width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid #e6e6e6;
}
@media (max-width: 640px){
  .ans-npq__leadForm{ grid-template-columns: 1fr; }
}

.ans-npq__leadMsg{ margin-top: 10px; color: #111; font-weight: 600; }

.ans-npq__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ans-npq__linkBtn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 12px; border-radius: 12px; text-decoration: none;
  background: #111; color: #fff; font-weight: 650;
}
.ans-npq__linkBtn--ghost{
  background: #f3f3f3; color: #111; border: 1px solid #e6e6e6;
}

.ans-npq__footer{ padding: 14px 18px 18px; color: #777; }