/* MS Quiz — self-contained styling that echoes the site's ms3 guide cards.
   Tokens: ink #09071d · accent #3882fa · muted #627192 · border #e4e8f1 · panel #f4f7fa */
.ms-quiz{--ms-ink:#09071d;--ms-accent:#3882fa;--ms-accent2:#2a6fe0;--ms-muted:#627192;
  --ms-soft:#8a93a6;--ms-border:#e4e8f1;--ms-panel:#f4f7fa;--ms-panel2:#f7f9ff;
  max-width:760px;margin:0 auto;padding:8px 6px 20px;font-family:inherit;color:var(--ms-ink)}
.ms-quiz *{box-sizing:border-box}

/* progress */
.msq-progress{display:flex;gap:7px;justify-content:center;margin:0 0 18px}
.msq-dot{width:26px;height:5px;border-radius:999px;background:var(--ms-border)}
.msq-dot.done{background:var(--ms-accent)}
.msq-dot.now{background:var(--ms-ink)}

/* card shell */
.msq-card{background:#fff;border:1px solid var(--ms-border);border-radius:20px;padding:26px 26px 22px}
.msq-head{margin-bottom:18px}
.msq-q{font-size:22px;font-weight:800;letter-spacing:-.3px;line-height:1.2;margin:0}
.msq-help{font-size:14px;color:var(--ms-muted);line-height:1.55;margin:8px 0 0;max-width:56ch}

/* options */
.msq-opts{display:flex;flex-direction:column;gap:10px}
.msq-opt{text-align:left;font-size:16px;font-weight:600;color:var(--ms-ink);background:var(--ms-panel2);
  border:1.5px solid var(--ms-border);border-radius:13px;padding:15px 18px;cursor:pointer;transition:.14s}
.msq-opt:hover{border-color:var(--ms-accent);background:#eef3ff}
.msq-opt.sel{border-color:var(--ms-accent);background:#e9f0ff}

/* text step */
.msq-text{width:100%;min-height:110px;font:inherit;font-size:15px;color:var(--ms-ink);
  border:1.5px solid var(--ms-border);border-radius:13px;padding:14px 16px;resize:vertical;background:var(--ms-panel2)}
.msq-text:focus{outline:none;border-color:var(--ms-accent)}

/* nav */
.msq-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px}
.msq-back{background:none;border:none;color:var(--ms-muted);font-weight:700;font-size:14px;cursor:pointer;padding:8px 4px}
.msq-back:hover{color:var(--ms-ink)}
.msq-go,.msq-restart{background:var(--ms-ink);color:#fff;border:none;font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:11px;cursor:pointer;transition:.15s}
.msq-go:hover,.msq-restart:hover{transform:translateY(-1px)}
.msq-restart{display:block;margin:22px auto 0;background:none;color:var(--ms-muted);border:1.5px solid var(--ms-border)}
.msq-restart:hover{color:var(--ms-ink);border-color:var(--ms-soft);transform:none}

/* loading */
.msq-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 26px}
.msq-spin{width:34px;height:34px;border:3px solid var(--ms-border);border-top-color:var(--ms-accent);
  border-radius:50%;animation:msq-rot .8s linear infinite}
@keyframes msq-rot{to{transform:rotate(360deg)}}

/* result */
.msq-reslede{font-size:13px;color:var(--ms-muted);text-align:center;margin:6px 0 18px}
.msq-runlabel{font-size:14px;font-weight:700;color:var(--ms-muted);margin:22px 0 10px 2px}
.msq-pick{padding:0;overflow:hidden}
.msq-pick.is-primary{border-color:#c6d8f5;box-shadow:0 12px 30px rgba(20,30,60,.10)}
.msq-top{display:grid;grid-template-columns:44% 1fr;min-height:230px}
.msq-photo{position:relative;display:flex;padding:16px}
.msq-img{width:100%;height:100%;object-fit:cover;border-radius:16px;box-shadow:0 10px 26px rgba(20,30,60,.16)}
.msq-badge{position:absolute;top:26px;left:26px;padding:5px 12px;border-radius:999px;background:var(--ms-ink);
  color:#fff;font-size:12px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.msq-box{padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.msq-name{font-size:23px;font-weight:800;letter-spacing:-.3px;margin:0 0 14px}
.msq-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:14px}
.msq-fact{display:flex;flex-direction:column;gap:2px}
.msq-fact span{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ms-soft);font-weight:700}
.msq-fact b{font-size:14px;color:var(--ms-ink);font-weight:700}
.msq-signal{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.msq-buzz{display:inline-flex;align-items:center;gap:8px;background:#fff4e6;border-radius:999px;padding:6px 12px}
.msq-buzzlbl{font-size:11.5px;font-weight:800;color:#b5701f}
.msq-bars{display:inline-flex;gap:4px}
.msq-bars i{width:6px;height:13px;border-radius:2px;background:#f0d3ad}
.msq-bars i.on{background:#e0902f}
.msq-pros{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ms-accent);
  background:#e9f0ff;border-radius:999px;padding:6px 13px}
.msq-mentions{font-size:11.5px;color:var(--ms-soft)}
.msq-cta{display:block;text-align:center;background:var(--ms-accent);color:#fff;font-weight:700;font-size:14.5px;
  padding:12px 24px;border-radius:11px;text-decoration:none;box-shadow:0 6px 16px rgba(56,130,250,.28);transition:.15s}
.msq-cta:hover{background:var(--ms-accent2)}
.msq-why{padding:8px 28px 20px}
.msq-whylbl{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ms-soft);font-weight:800;margin-bottom:7px}
.msq-whytext{font-size:15px;color:var(--ms-ink);line-height:1.65;margin:0}
.msq-proof{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:2px 28px 26px}
.msq-prooflbl{font-size:12px;font-weight:700;color:var(--ms-muted);width:100%}
.msq-prooflink{font-size:12.5px;font-weight:600;color:var(--ms-accent2);background:#eef3ff;
  border-radius:999px;padding:6px 12px;text-decoration:none}
.msq-prooflink:hover{background:#e0e9ff}

@media(max-width:560px){
  .msq-top{grid-template-columns:1fr}
  .msq-photo{min-height:200px}
  .msq-facts{grid-template-columns:1fr 1fr}
  .msq-card{padding:20px 18px 18px}
}