/* Tools pages: Start Here + Maintenance Calculator */
.toolsPageWrap{max-width:1000px;margin:auto;padding:26px 16px}
.toolsHero{padding:10px 0 14px}
.toolsHero .pill{display:inline-flex;gap:8px;align-items:center;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);padding:6px 10px;border-radius:999px;font-size:13px}
.toolsHero h1{margin:10px 0 6px;font-size:34px;line-height:1.2}
.toolsHero p{margin:0;color:var(--muted);max-width:80ch}

.stepGrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.stepCard{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:14px;background:var(--card)}
.stepHead{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.stepNum{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(0,0,0,.06);font-weight:700}
.stepCard h2{margin:0;font-size:18px}
.stepCard label{display:block;font-size:14px;margin:10px 0 6px;color:var(--muted)}
.stepCard select,.stepCard input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:transparent;color:inherit}
.stepActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.stepActions .btn{border-radius:12px}

.resultBox{margin-top:14px}
.resultGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.resultGrid .card{padding:14px;border-radius:16px}
.resultGrid .card h3{margin:0 0 6px;font-size:16px}
.resultGrid .card p{margin:0;color:var(--muted);font-size:14px}

.noteBox{margin-top:14px;border-radius:16px;padding:14px;border:1px dashed rgba(0,0,0,.18);background:rgba(0,0,0,.03)}
.noteBox h3{margin:0 0 6px;font-size:16px}
.noteBox p{margin:0;color:var(--muted)}

@media(min-width:900px){
  .stepGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .toolsHero h1{font-size:40px}
}
@media(max-width:640px){
  .resultGrid{grid-template-columns:1fr}
}