
*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}
body{background:#f7f7f7;color:#222}
.top{text-align:center;padding:30px;background:#fff}
.progress{height:6px;background:#ddd}
.bar{height:100%;width:50%;background:#f05a5a}
.steps{max-width:600px;margin:40px auto;padding:0 16px}
.step{display:none;background:#fff;padding:30px;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.step.active{display:block}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.card{padding:22px;border:2px solid #ddd;border-radius:14px;text-align:center;cursor:pointer}
.card.select{border-color:#f05a5a;background:#fff2f2}
input{width:100%;padding:12px;margin-top:10px}
input[type="range"]{padding:0}
button{width:100%;margin-top:25px;padding:14px;background:#f05a5a;border:none;border-radius:30px;color:#fff}
.result{text-align:center;padding:60px;display:none}
.result h1{font-size:42px;margin:15px 0}
.disclaimer{font-size:12px;color:#666;margin:10px 0 25px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.5}
.error{color:#d20000;font-size:13px;margin-top:8px}
.live-estimate{margin-top:14px;font-weight:600;color:#222}

@media (max-width:480px){
  .top{padding:22px 16px}
  .step{padding:20px}
  .cards{grid-template-columns:1fr}
  .result{padding:28px 16px}
  .result h1{font-size:34px}
  button{padding:16px}
}
