.audit { padding: clamp(36px, 6vw, 80px) 0 20px; }
.narrow { width: min(100% - 2 * var(--gutter), 820px); }
.audit-head { display: grid; gap: 18px; margin-bottom: 40px; }
.audit-head h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.audit-head h1 .serif { font-size: 1.06em; }

.quiz { border-radius: 24px; padding: clamp(22px, 4vw, 40px); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); box-shadow: var(--shadow); }
.q-progress { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.q-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--volt), var(--signal)); transition: width .4s ease; }
.q-meta { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 8px; font: 500 12.5px/1 var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; min-height: 32px; }
.q-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 8px; border-radius: 8px; }
.q-back:hover { color: #fff; }
.q-back svg { width: 16px; height: 16px; }
.q-card { border: 0; margin: 0; padding: 0; min-width: 0; }
.q-card legend { font: 700 clamp(1.35rem, 2.6vw, 1.85rem)/1.2 var(--display); letter-spacing: -.02em; color: #fff; padding: 0; }
.q-hint { color: var(--muted); font-size: 15px; margin: 10px 0 0; min-height: 1em; }
.q-options { display: grid; gap: 12px; margin-top: 24px; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 18px 20px; border-radius: 14px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 500 16px/1.4 var(--body); transition: background .15s, box-shadow .15s, transform .15s; }
.opt:hover { background: rgba(124,92,255,.1); box-shadow: inset 0 0 0 1px rgba(167,139,255,.45); transform: translateY(-1px); }
.opt[aria-pressed="true"] { background: rgba(124,92,255,.16); box-shadow: inset 0 0 0 1.5px var(--volt-2); }
.opt .key { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.06); font: 600 13px/1 var(--mono); color: var(--muted); }
.opt small { display: block; color: var(--faint); font-size: 13.5px; margin-top: 2px; }

.result { border-radius: 24px; padding: clamp(24px, 4vw, 44px); background: radial-gradient(120% 90% at 100% 0%, rgba(255,90,60,.16), transparent 60%), radial-gradient(120% 90% at 0% 100%, rgba(124,92,255,.2), transparent 60%), var(--ink-1); box-shadow: var(--shadow); display: grid; gap: 22px; }
.result-top { display: grid; grid-template-columns: 170px 1fr; gap: 30px; align-items: center; }
.result-top h2 { margin: 12px 0 10px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.ring { position: relative; width: 170px; height: 170px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .track { stroke: rgba(255,255,255,.08); }
.ring .val { stroke: url(#none); stroke: var(--ring, var(--mint)); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: calc(326.7 - 326.7 * var(--v) / 100); transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1); }
.ring > div { text-align: center; }
.ring b { display: block; font: 800 3rem/1 var(--display); letter-spacing: -.04em; color: #fff; }
.ring span { font: 500 12px/1 var(--mono); color: var(--muted); }
.fix-h { margin-top: 8px; }
.fixes { margin: 0; padding: 0; list-style: none; counter-reset: f; display: grid; gap: 12px; }
.fixes li { counter-increment: f; display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 18px; border-radius: 14px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); }
.fixes li::before { content: counter(f); width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--signal), var(--signal-2)); color: #160803; font: 800 16px/1 var(--display); }
.fixes b { display: block; color: #fff; font: 600 16.5px/1.35 var(--display); letter-spacing: -.01em; margin-bottom: 4px; }
.fixes p { color: var(--muted); font-size: 15px; }
.result-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 22px; border-radius: 16px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line); }
.result-cta p { flex: 1 1 280px; color: var(--muted); font-size: 15px; }
.result-cta p b { color: #fff; }
.result .fine { font-size: 13px; color: var(--faint); }
.result > .btn { justify-self: start; }

@media (max-width: 600px) {
  .result-top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .result-top .eyebrow::before { display: none; }
  .result-cta .btn { width: 100%; }
}
/* [hidden] must win over .result{display:grid} etc.: the result card stays hidden until the last answer */
.audit [hidden] { display: none !important; }

/* Phones: the first question and all its answers sit inside the first screen (375x812). */
@media (max-width: 640px) {
  .audit { padding-top: 14px; }
  .audit-head { gap: 8px; margin-bottom: 14px; }
  .audit-head h1 { font-size: 1.85rem; }
  .audit-head .lede { font-size: 15px; line-height: 1.45; }
  .quiz { padding: 16px; }
  .q-meta { margin: 12px 0 4px; }
  .q-hint { margin-top: 6px; }
  .q-options { gap: 8px; margin-top: 12px; }
}