.mortgage-compare {
  margin: 26px 0;
  padding: 22px;
  border: 1px solid #dce8d9;
  border-radius: 8px;
  background: #f7faf6;
}
.mortgage-compare__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.mortgage-compare__head h3 { margin: 0; font: 500 20px/1.2 Cy, sans-serif; }
.mortgage-compare__head span { color: #626b62; font-size: 12px; white-space: nowrap; }
.mortgage-compare__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #e3e9e0; font-size: 14px; }
.mortgage-compare__row span small { display: block; margin-top: 2px; color: #687168; font-size: 11px; }
.mortgage-compare__row strong { white-space: nowrap; font-size: 15px; font-weight: 600; text-align: right; }
.mortgage-compare__row strong small { margin-left: 2px; font-size: 11px; font-weight: 400; color: #687168; }
.mortgage-compare details { border-top: 1px solid #e3e9e0; padding-top: 13px; }
.mortgage-compare summary { width: fit-content; cursor: pointer; color: #136b2b; font-size: 13px; font-weight: 600; }
.mortgage-compare__controls { display: grid; gap: 14px; margin-top: 15px; }
.mortgage-compare__controls label { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 13px; }
.mortgage-compare__controls output { color: #136b2b; font-weight: 600; }
.mortgage-compare__controls input { grid-column: 1 / -1; width: 100%; accent-color: #20bd3f; }
.mortgage-compare p { margin: 14px 0 0; color: #687168; font-size: 11px; line-height: 1.5; }
.mortgage-compare p a { color: #136b2b; text-decoration: underline; }
@media (max-width: 700px) {
  .mortgage-compare { padding: 16px; }
  .mortgage-compare__head { display: block; }
  .mortgage-compare__head span { display: block; margin-top: 6px; }
  .mortgage-compare__row strong { font-size: 14px; }
}