.calculator-card {
  margin: 2rem 0;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid rgba(7, 27, 45, .15);
  border-radius: 18px;
  background: #f7fafc;
}

.calculator-card h2 { margin-top: 0; }

.calculator-intro { max-width: 66ch; }

.calculator-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.calculator-field label {
  display: block;
  margin-bottom: .4rem;
  font-weight: 700;
}

.calculator-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: .7rem .8rem;
  border: 1px solid #8a99a6;
  border-radius: 9px;
  background: #fff;
  color: #071b2d;
  font: inherit;
}

.calculator-field input:focus {
  outline: 3px solid rgba(17, 126, 167, .25);
  border-color: #117ea7;
}

.calculator-help,
.calculator-disclaimer {
  color: #526473;
  font-size: .92rem;
}

.calculator-result {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-left: 5px solid #14834b;
  border-radius: 8px;
  background: #eaf8f0;
}

.calculator-result--warning {
  border-left-color: #b64b1c;
  background: #fff2eb;
}

.calculator-result strong,
.calculator-result output { display: block; }

.calculator-result output {
  margin: .2rem 0;
  color: #071b2d;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
}

@media (max-width: 640px) {
  .calculator-fields { grid-template-columns: 1fr; }
}