.scorecard-hero { padding: 165px 0 90px; }
.scorecard-hero-inner { max-width: 850px; }
.scorecard-hero h1 { margin-bottom: 26px; }
.scorecard-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.scorecard-meta span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #bfcbd6; font-size: .7rem; font-weight: 750; }
.scorecard-layout { display: grid; grid-template-columns: .6fr 1.4fr; gap: 90px; }
.scorecard-guide { position: sticky; top: 120px; align-self: start; }
.scorecard-guide h2 { margin-bottom: 24px; font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
.guide-note { display: flex; flex-direction: column; margin-top: 32px; padding: 22px; border-left: 3px solid var(--blue); background: var(--mist); }
.guide-note strong { margin-bottom: 6px; color: var(--ink); font-size: .78rem; }
.guide-note span { color: var(--slate); font-size: .81rem; }
.scorecard-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.scorecard-panel form { display: grid; gap: 0; }
.scorecard-panel fieldset { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; padding: 32px; border: 0; border-bottom: 1px solid var(--line); }
.scorecard-panel legend { width: 100%; margin-bottom: 20px; color: var(--ink); font-family: var(--display); font-size: 1.35rem; font-weight: 500; }
.scorecard-panel legend span { margin-right: 12px; color: var(--blue-dark); font-family: var(--body); font-size: .65rem; font-weight: 850; }
.scorecard-panel label { position: relative; cursor: pointer; }
.scorecard-panel input { position: absolute; opacity: 0; }
.scorecard-panel label > span { display: flex; min-height: 64px; align-items: center; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); font-size: .8rem; font-weight: 650; transition: border-color var(--transition), background var(--transition); }
.scorecard-panel input:checked + span { border-color: var(--blue); background: rgba(49,94,207,.09); box-shadow: inset 0 0 0 1px var(--blue); }
.scorecard-panel input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 3px; }
.scorecard-panel form > .button { margin: 28px; width: calc(100% - 56px); }
.form-error { margin: 22px 28px 0; color: #a52b2b; font-size: .8rem; font-weight: 750; }
.score-result { padding: 55px; text-align: center; }
.result-label { color: var(--blue-dark); font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.result-score { display: flex; align-items: baseline; justify-content: center; margin: 15px 0 24px; }
.result-score strong { color: var(--ink); font-family: var(--display); font-size: 6rem; font-weight: 500; line-height: 1; }
.result-score span { color: var(--slate); }
.score-result h2 { margin-bottom: 22px; font-size: clamp(2.1rem, 4vw, 3.4rem); }
.score-result > p:not(.result-label) { max-width: 620px; margin: 0 auto 30px; }
.result-actions { display: flex; align-items: center; justify-content: center; gap: 25px; }
.text-button { padding: 8px 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; font-weight: 750; }

@media (max-width: 760px) {
  .scorecard-hero { padding: 135px 0 75px; }
  .scorecard-layout { grid-template-columns: 1fr; gap: 40px; }
  .scorecard-guide { position: static; }
  .scorecard-panel fieldset { grid-template-columns: 1fr; padding: 24px 18px; }
  .scorecard-panel form > .button { margin: 22px 18px; width: calc(100% - 36px); }
  .score-result { padding: 38px 20px; }
  .result-actions { flex-direction: column; }
}