/* the AI Payoff Score (score.html): one-question-at-a-time quiz on the dark
   theme. Reuses site.css primitives (.wrap, .eyebrow, .sub, .cta); everything
   page-specific carries the sc- prefix. Ember is the only accent. */

.sc { background: #060606; color: #f8fafc; min-height: 100vh; display: flex; flex-direction: column; }
.sc-nav { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.sc-tag { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(248, 250, 252, 0.55); }

.sc-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.sc-card { width: min(680px, 100%); text-align: left; }
.sc-card .sub { color: rgba(248, 250, 252, 0.64); }

.sc-h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.14; margin: 14px 0 16px; }
.sc-h1 .ember, .sc .ember { color: #e27f48; }
.sc-start { margin-top: 26px; }

.sc-progress { height: 2px; background: rgba(255, 255, 255, 0.12); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.sc-bar { display: block; height: 100%; width: 0%; background: #e27f48; transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.sc-count { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(248, 250, 252, 0.42); margin-bottom: 14px; }
.sc-q { font-size: clamp(24px, 3.6vw, 34px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; min-height: 3.4em; }
.sc-q.is-out { opacity: 0; transform: translateY(6px); }
.sc-q { transition: opacity 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }

.sc-answers { display: flex; gap: 14px; margin-top: 30px; }
.sc-btn {
  flex: 1; padding: 18px 0; font: inherit; font-size: 17px; font-weight: 700;
  color: #f8fafc; background: #121212; border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px; cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}
.sc-btn:hover { background: rgba(255, 255, 255, 0.08); }
.sc-btn:active { transform: scale(0.99); }
.sc-btn:focus-visible { outline: 2px solid #e27f48; outline-offset: 2px; }

.sc-num { font-size: clamp(84px, 16vw, 140px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: #e27f48; margin: 10px 0 6px; }
.sc-verdict { font-size: clamp(19px, 2.6vw, 24px); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px; }
.sc-invite { margin-top: 10px; }
.sc-cta { margin-top: 22px; display: inline-flex; }
.sc-fine { margin-top: 22px; font-size: 12.5px; color: rgba(248, 250, 252, 0.42); }
.sc-fine a { color: inherit; }

.sc-footer { border-top: 1px solid rgba(255, 255, 255, 0.09); }