.survey-roadmap { list-style:none; padding:0; margin:24px 0 18px; display:grid; gap:8px; }
.survey-roadmap li { display:flex; align-items:center; gap:12px; padding:12px 15px; border:1px solid #ffffffa0; background:#ffffff80; border-radius:16px; }
.survey-roadmap li>span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#fff,#d8d8d8); border:1px solid #ddd; font-size:12px; }
.survey-roadmap strong,.survey-roadmap small { display:block; }.survey-roadmap strong { font-size:13px; }.survey-roadmap small { font-size:11px; color:#666; margin-top:3px; }
.survey-stage { margin:12px 0 8px; font-size:12px; line-height:1.6; color:#666; }
.survey-stage + .q { padding-top:0; }
.survey-stage + .q .q-title { margin-top:0; }
.survey-checkpoint { padding-top:28px; padding-bottom:28px; text-align:center; }.checkpoint-mascot { display:block; margin:18px auto; width:128px; height:128px; border-radius:50%; border:5px solid #fff; }
.survey-checkpoint h1 { font-size:25px; line-height:1.45; margin:20px 0; }.survey-checkpoint>p { font-size:13px; line-height:1.8; }.survey-checkpoint>.tiny { font-size:11px; }
.checkpoint-result { padding:22px 18px; margin-bottom:18px; border:1px solid #fff; background:linear-gradient(140deg,#fff,#e7e7e7); border-radius:25px; box-shadow:inset 0 1px 0 #fff,0 6px 24px #00000005; }
.checkpoint-letter { display:grid; place-items:center; width:68px; height:68px; margin:0 auto 14px; border-radius:20px; background:#242424; color:#fff; font-size:38px; font-weight:600; }
.checkpoint-result h2 { font-size:20px; }.checkpoint-result p { font-size:14px; line-height:1.8; margin:12px 0; }.checkpoint-result small { display:block; font-size:11px; color:#666; line-height:1.7; }
.checkpoint-next { padding:18px; margin:22px 0; text-align:left; border:1px solid #ccc; border-radius:18px; }.checkpoint-next>* { display:block; }.checkpoint-next small { font-size:10px; color:#666; }.checkpoint-next strong { font-size:16px; margin:7px 0; }.checkpoint-next span { font-size:11px; color:#666; }
@media(prefers-reduced-motion:reduce) { .survey-checkpoint,.survey-stage { animation:none; } }