/* Scorecard component, styled to the page's existing palette and type. */
.sc-root { background: #F6F3EC; border: 1px solid #E4DFD3; border-radius: 16px; padding: 32px; color: #33363C; font-size: 15px; line-height: 1.55; scroll-margin-top: 24px; min-height: 420px; }
.sc-root :focus-visible { outline: 2px solid #47166C; outline-offset: 2px; }
.sc-root h3:focus, .sc-sent:focus { outline: none; }
.sc-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #47166C; margin-bottom: 8px; }

.sc-progress { margin-bottom: 26px; }
.sc-progress-label { font-size: 13px; color: #5B5F66; margin-bottom: 8px; }
.sc-progress-track { height: 6px; background: #E4DFD3; border-radius: 999px; overflow: hidden; }
.sc-progress-fill { height: 100%; background: #47166C; border-radius: 999px; transition: width 0.3s ease; }

.sc-question { font-family: 'Fraunces', serif; font-weight: 400; font-size: 24px; line-height: 1.25; color: #14171C; margin: 0 0 20px; }
.sc-options { display: flex; flex-direction: column; gap: 10px; }
.sc-option { display: block; width: 100%; text-align: left; background: #FFFFFF; border: 1px solid #E4DFD3; border-radius: 10px; padding: 14px 16px; font: inherit; font-size: 15px; color: #14171C; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.sc-option:hover { border-color: #9F84B4; }
.sc-option.is-selected { border-color: #47166C; background: #F1EBF6; box-shadow: inset 0 0 0 1px #47166C; }
.sc-nav { margin-top: 18px; min-height: 22px; }
.sc-back { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: #47166C; cursor: pointer; }
.sc-back:hover { text-decoration: underline; }

.sc-hero { display: flex; align-items: center; gap: 20px; margin: 6px 0 24px; }
.sc-circle { flex-shrink: 0; width: 96px; height: 96px; border-radius: 50%; background: #F1EBF6; border: 3px solid #47166C; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sc-num { font-family: 'Fraunces', serif; font-size: 34px; line-height: 1; color: #47166C; }
.sc-outof { font-size: 9px; letter-spacing: 0.06em; color: #5B5F66; margin-top: 4px; }
.sc-stage { font-family: 'Fraunces', serif; font-weight: 400; font-size: 26px; line-height: 1.2; color: #14171C; margin: 0; }

.sc-bars { display: flex; flex-direction: column; gap: 18px; }
.sc-bar-label { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #14171C; margin-bottom: 6px; }
.sc-bar-track { height: 8px; background: #E4DFD3; border-radius: 999px; overflow: hidden; }
.sc-bar-fill { height: 100%; border-radius: 999px; }
.sc-read { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #5B5F66; }
.sc-pct { font-weight: 700; }
.sc-red { color: #C0392B; } .sc-amber { color: #D98E2B; } .sc-green { color: #2E7D6B; }
.sc-bg-red { background: #C0392B; } .sc-bg-amber { background: #D98E2B; } .sc-bg-green { background: #2E7D6B; }
.sc-callout { margin-top: 24px; background: #FFFFFF; border-left: 3px solid #47166C; border-radius: 0 8px 8px 0; padding: 14px 16px; font-size: 14px; line-height: 1.55; }
.sc-callout strong { color: #14171C; }

.sc-form { margin-top: 28px; padding-top: 24px; border-top: 1px solid #E4DFD3; display: flex; flex-direction: column; gap: 14px; }
.sc-form-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; color: #14171C; margin: 0; }
.sc-form-intro { margin: -6px 0 4px; font-size: 14px; color: #5B5F66; }
.sc-field label { display: block; font-size: 13px; font-weight: 600; color: #14171C; margin-bottom: 6px; }
.sc-input { width: 100%; background: #FFFFFF; border: 1px solid #D9D3C7; border-radius: 8px; padding: 11px 12px; font: inherit; font-size: 15px; color: #14171C; }
.sc-input:focus { border-color: #47166C; outline: none; box-shadow: 0 0 0 3px rgba(71, 22, 108, 0.15); }
.sc-consent label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13px; line-height: 1.5; color: #33363C; cursor: pointer; }
.sc-consent input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: #47166C; }
.sc-consent a { color: #47166C; text-decoration: underline; }
.sc-error { font-size: 13px; color: #C0392B; margin-top: 4px; }
.sc-error:empty { display: none; }
.sc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sc-submit { display: inline-block; align-self: flex-start; background: #47166C; color: #FFFFFF; border: 0; padding: 14px 24px; border-radius: 8px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.sc-submit:disabled { opacity: 0.6; cursor: default; }
.sc-sent p { margin: 12px 0 20px; }
.sc-link { text-decoration: none; }

@media (max-width: 760px) {
  .sc-root { padding: 22px; }
  .sc-question { font-size: 21px; }
  .sc-hero { gap: 14px; }
  .sc-circle { width: 80px; height: 80px; }
  .sc-num { font-size: 28px; }
  .sc-stage { font-size: 22px; }
}