.pig-quickscan,
.pig-quickscan * { box-sizing: border-box; }

.pig-quickscan {
  --pig-blue-dark: #1F497D;
  --pig-blue-mid: #2E74B5;
  --pig-blue-light: #BDD7EE;
  --pig-blue-pale: #EBF3FA;
  --pig-line: #D8DEE8;
  --pig-text: #3F4650;
  --pig-muted: #717B88;
  --pig-bg: #F4F8FD;
  --pig-white: #FFFFFF;
  color: var(--pig-text);
  font-family: inherit;
  line-height: 1.55;
  background: var(--pig-bg);
  border-radius: 10px;
  overflow: hidden;
}

.pig-quickscan [hidden] { display: none !important; }

.pig-qs-hero {
  background: var(--pig-blue-dark);
  color: #fff;
  padding: 34px 44px 30px;
}
.pig-qs-hero h1 { margin: 0; color: #fff; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; }
.pig-qs-hero p { margin: 8px 0 0; opacity: .8; font-size: 14px; }

.pig-qs-shell { max-width: 1000px; margin: 0 auto; padding: 34px 24px 54px; }
.pig-qs-intro,
.pig-qs-step,
.pig-qs-overall,
.pig-qs-conclusions { background: #fff; border: 1px solid var(--pig-line); border-radius: 8px; padding: 28px 30px; margin-bottom: 24px; }
.pig-qs-intro h2,
.pig-qs-step h2,
.pig-qs-overall h2,
.pig-qs-conclusions h2 { color: var(--pig-blue-dark); margin: 0 0 12px; font-size: 21px; }
.pig-qs-intro p { margin: 0 0 10px; }
.pig-qs-intro ul { margin: 12px 0 12px 20px; padding: 0; }

.pig-qs-step-kicker { color: var(--pig-blue-mid); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.pig-qs-muted { color: var(--pig-muted); margin: 0 0 20px; }
.pig-qs-small { font-size: 12px; margin: 10px 0 0; }

.pig-qs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.pig-qs-field { display: flex; flex-direction: column; gap: 6px; }
.pig-qs-field-wide { grid-column: 1 / -1; }
.pig-qs-field label { color: var(--pig-blue-dark); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pig-qs-field input,
.pig-qs-field select,
.pig-qs-field textarea {
  width: 100%;
  border: 1px solid #C9D1DC;
  border-radius: 6px;
  background: #fff;
  color: #2F3540;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pig-qs-field textarea { resize: vertical; min-height: 110px; }
.pig-qs-field input:focus,
.pig-qs-field select:focus,
.pig-qs-field textarea:focus { border-color: var(--pig-blue-mid); box-shadow: 0 0 0 3px rgba(46,116,181,.10); }

.pig-qs-consent { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; font-size: 13px; color: #505A66; }
.pig-qs-consent input { margin-top: 4px; }
.pig-qs-consent a { color: var(--pig-blue-mid); }
.pig-qs-hp { position: absolute !important; left: -99999px !important; width: 1px; height: 1px; overflow: hidden; }

.pig-qs-primary {
  appearance: none;
  border: 0;
  border-radius: 6px;
  background: var(--pig-blue-mid);
  color: #fff;
  padding: 12px 20px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s, opacity .12s, background .12s;
}
.pig-qs-primary:hover:not(:disabled) { background: var(--pig-blue-dark); transform: translateY(-1px); }
.pig-qs-primary:disabled { opacity: .45; cursor: not-allowed; }

.pig-qs-error { border: 1px solid #e3a5a5; background: #fff1f1; color: #8d2525; border-radius: 6px; padding: 10px 12px; margin: 14px 0; font-size: 13px; }

.pig-qs-scale { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.pig-qs-scale span { border: 1px solid var(--pig-blue-light); background: var(--pig-blue-pale); color: var(--pig-blue-dark); border-radius: 4px; padding: 5px 9px; font-size: 12px; }

.pig-qs-progress-wrap { margin: 12px 0 24px; }
.pig-qs-progress-text { text-align: right; color: var(--pig-muted); font-size: 12px; margin-bottom: 5px; }
.pig-qs-progress { height: 7px; background: #E9EEF5; border-radius: 20px; overflow: hidden; }
.pig-qs-progress > div { height: 100%; width: 0; background: var(--pig-blue-mid); transition: width .2s ease; }

.pig-qs-dimension { background: #fff; border: 1px solid var(--pig-line); border-radius: 8px; overflow: visible; margin-bottom: 18px; }
.pig-qs-dim-header { color: #fff; border-radius: 7px 7px 0 0; padding: 12px 18px; }
.pig-qs-dim-header h3 { margin: 0; color: #fff; font-size: 16px; }
.pig-qs-dim-intro { margin: 0; padding: 12px 18px; border-bottom: 1px solid #EEF1F5; background: #FAFCFF; color: #596471; font-size: 13px; font-style: italic; }
.pig-qs-questions { padding: 2px 18px; }
.pig-qs-question-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid #EEF1F5; }
.pig-qs-question-row:last-child { border-bottom: 0; }
.pig-qs-question-text { display: flex; align-items: flex-start; gap: 9px; min-width: 0; font-size: 14px; }
.pig-qs-q-num { font-weight: 800; min-width: 18px; }

.pig-qs-score-buttons { display: flex; gap: 5px; }
.pig-qs-score-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid; background: #fff; font: inherit; font-weight: 700; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.pig-qs-score-btn:focus-visible { outline: 3px solid rgba(31,73,125,.25); outline-offset: 2px; }

.pig-qs-info { position: relative; display: inline-flex; flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; align-items: center; justify-content: center; font: italic 700 11px Georgia, serif; cursor: help; margin-top: 1px; }
.pig-qs-tooltip { display: none; position: absolute; z-index: 50; left: 26px; top: 50%; transform: translateY(-50%); width: 285px; padding: 11px 13px; background: #fff; border: 1px solid #C8D4E8; box-shadow: 0 5px 18px rgba(0,0,0,.13); border-radius: 6px; color: #333; font: normal 400 12px/1.5 Arial, sans-serif; }
.pig-qs-tooltip strong { display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.pig-qs-tooltip ul { margin: 0; padding-left: 16px; }
.pig-qs-info:hover .pig-qs-tooltip,
.pig-qs-info:focus .pig-qs-tooltip { display: block; }

.pig-qs-finish { text-align: center; padding: 16px 0 4px; }

.pig-qs-result-panel { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-radius: 8px; background: var(--pig-blue-dark); color: #fff; padding: 24px 28px; margin-bottom: 24px; }
.pig-qs-result-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-bottom: 4px; }
.pig-qs-level-name { font-size: clamp(21px, 3vw, 30px); font-weight: 800; line-height: 1.1; }
.pig-qs-level-desc { margin-top: 6px; font-size: 13px; opacity: .82; max-width: 650px; }
.pig-qs-score-total { font-size: 35px; font-weight: 800; white-space: nowrap; }
.pig-qs-score-total span { font-size: 14px; font-weight: 400; opacity: .7; }

.pig-qs-overall-grid { display: grid; grid-template-columns: minmax(320px, 430px) 1fr; gap: 30px; align-items: center; }
.pig-qs-radar-wrap { display: flex; justify-content: center; overflow: hidden; }
.pig-qs-radar-wrap canvas { max-width: 100%; height: auto; }
.pig-qs-level-item { display: grid; grid-template-columns: 10px minmax(120px, 1fr) minmax(70px, 1.4fr) 34px; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid #EEF1F5; font-size: 12px; }
.pig-qs-level-dot { width: 10px; height: 10px; border-radius: 50%; }
.pig-qs-level-title { color: #46505B; }
.pig-qs-level-bar { height: 7px; background: #EEF2F8; border-radius: 8px; overflow: hidden; }
.pig-qs-level-bar span { display: block; height: 100%; border-radius: inherit; }

.pig-qs-conclusions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pig-qs-concl-box { border: 1px solid var(--pig-blue-light); border-radius: 6px; padding: 15px; }
.pig-qs-concl-box h3 { margin: 0 0 7px; color: var(--pig-blue-mid); text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.pig-qs-concl-box p { margin: 0; color: #5F6974; font-size: 13px; }

@media (max-width: 760px) {
  .pig-qs-hero { padding: 24px 20px; }
  .pig-qs-shell { padding: 22px 12px 38px; }
  .pig-qs-intro, .pig-qs-step, .pig-qs-overall, .pig-qs-conclusions { padding: 22px 18px; }
  .pig-qs-grid { grid-template-columns: 1fr; }
  .pig-qs-field-wide { grid-column: auto; }
  .pig-qs-question-row { grid-template-columns: 1fr; gap: 10px; }
  .pig-qs-score-buttons { padding-left: 27px; }
  .pig-qs-tooltip { left: auto; right: -10px; top: 26px; transform: none; width: min(280px, 78vw); }
  .pig-qs-result-panel { align-items: flex-start; flex-direction: column; }
  .pig-qs-overall-grid { grid-template-columns: 1fr; }
  .pig-qs-conclusions-grid { grid-template-columns: 1fr; }
}

.pig-qs-result-actions {
  background: #fff;
  border: 1px solid var(--pig-line);
  border-radius: 8px;
  padding: 28px 30px;
  margin-bottom: 24px;
}
.pig-qs-result-actions h2 { color: var(--pig-blue-dark); margin: 0 0 8px; font-size: 21px; }
.pig-qs-result-action-buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pig-qs-secondary {
  appearance: none;
  border: 1px solid var(--pig-blue-mid);
  border-radius: 6px;
  background: #fff;
  color: var(--pig-blue-mid);
  padding: 11px 19px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s, background .12s, color .12s;
}
.pig-qs-secondary:hover { background: var(--pig-blue-pale); color: var(--pig-blue-dark); transform: translateY(-1px); }
.pig-qs-action-message { min-height: 22px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.pig-qs-action-message.is-success { color: #2f6f43; }
.pig-qs-action-message.is-error { color: #8d2525; }

@media (max-width: 760px) {
  .pig-qs-result-actions { padding: 22px 18px; }
  .pig-qs-result-action-buttons { align-items: stretch; flex-direction: column; }
  .pig-qs-result-action-buttons .pig-qs-primary,
  .pig-qs-result-action-buttons .pig-qs-secondary { width: 100%; }
}

/* Step 2 introduction should not inherit centered Breakdance typography. */
.pig-quickscan .pig-qs-scan > h2,
.pig-quickscan .pig-qs-scan > .pig-qs-muted {
  text-align: left;
}