* { box-sizing: border-box; }
body {
  margin: 0; padding: 24px; background: #f3f7f4; color: #222;
  font-family: Arial, Helvetica, sans-serif;
}
.a2z-calculator {
  max-width: 680px; margin: auto; padding: 30px; background: #fff;
  border: 1px solid #d6e2d8; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
h1 { margin-top: 0; color: #176b38; font-size: 29px; }
.subtitle { color: #666; margin-bottom: 25px; }
label { display: block; margin: 18px 0 8px; font-weight: 700; }
input, select {
  width: 100%; padding: 13px; border: 1px solid #bbb; border-radius: 7px;
  background: #fff; font-size: 16px;
}
button {
  width: 100%; margin-top: 24px; padding: 14px; border: 0; border-radius: 7px;
  background: #176b38; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
}
button:hover { background: #10532b; }
.results {
  margin-top: 24px; padding: 18px; border-radius: 8px; background: #f0f7f1;
  overflow-wrap: anywhere;
}
.results h2 { color: #176b38; font-size: 21px; }
.results p { margin: 13px 0; line-height: 1.5; }
.total { border-top: 1px solid #d0dfd2; padding-top: 12px; font-weight: 700; }
.disclaimer { margin-top: 22px; color: #666; font-size: 12px; line-height: 1.6; }
[hidden] { display: none !important; }
@media (max-width: 480px) {
  body { padding: 12px; }
  .a2z-calculator { padding: 20px; }
  h1 { font-size: 24px; }
}