.kto-calc {
  --red: #CF0028;
  --red-d: #a80020;
  --red-l: #ff4d6a;
  --blue: #0088D2;
  --green: #3AB452;
  --dark: #0c1829;
  --ink: #1a1a2e;
  --glass: rgba(255,255,255,.07);
  --gb: rgba(255,255,255,.1);
  --brd: #e2e5ea;
  --r: 14px;
  --ease: cubic-bezier(.22,1,.36,1);
  box-sizing: border-box;
  max-width: 820px;
  padding: 2rem;
  margin: 1rem 0;
  border: 1px solid var(--brd);
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.55;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.kto-calc *, .kto-calc *::before, .kto-calc *::after { box-sizing: border-box; }
.kto-calc__title { margin: 0 0 1.25rem; font-size: 1.35rem; line-height: 1.25; }
.kto-calc__form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: end; }
.kto-calc__field { display: block; font-size: .82rem; font-weight: 700; }
.kto-calc__field span { display: block; min-height: 2.5em; margin-bottom: .35rem; }
.kto-calc__input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--brd); border-radius: 8px; font: inherit; font-size: .95rem; color: var(--ink); }
.kto-calc__input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(207,0,40,.1); }
.kto-calc__hint { grid-column: 1 / -1; margin: -.25rem 0 0; color: #6b7280; font-size: .8rem; }
.kto-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border: 0; border-radius: var(--r); font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background .2s, transform .2s, opacity .2s; }
.kto-btn:hover:not(:disabled) { transform: translateY(-2px); }
.kto-btn:disabled { cursor: wait; opacity: .65; }
.kto-btn--red { background: var(--red); color: #fff; }
.kto-btn--red:hover:not(:disabled) { background: var(--red-d); }
/* 🔴 24.09: кнопка была зелёной — чужой цвет для куста. Фирменный акцент красный,
   он же у «Подобрать», «Заказать звонок» и кнопок карточек товара. */
.kto-btn--chat { margin-top: 1rem; background: var(--red); color: #fff; }
.kto-btn--chat:hover:not(:disabled) { background: var(--red-d); }
.kto-calc__result { margin-top: 1.25rem; }
.kto-calc__result-title { margin: 0 0 .75rem; font-weight: 800; }
.kto-calc__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.kto-calc__item { padding: 1rem; border: 1px solid var(--brd); border-radius: var(--r); background: #fff; }
.kto-calc__item h3 { margin: 0 0 .35rem; font-size: .95rem; }
.kto-calc__item p { margin: 0; color: #6b7280; font-size: .82rem; }
.kto-calc__more { margin: .75rem 0 0; color: #6b7280; font-size: .82rem; }
.kto-note { padding: 1rem 1.25rem; border-radius: var(--r); font-size: .9rem; }
.kto-note--b { background: #e8f4fd; border: 1px solid rgba(0,136,210,.15); color: #1a5276; }
.kto-note--r { background: #fef2f4; border: 1px solid rgba(207,0,40,.12); color: #7f1d2a; }
.kto-note--w { background: #fef3c7; border: 1px solid rgba(217,119,6,.15); color: #92400e; }

@media (max-width: 680px) {
  .kto-calc { padding: 1.25rem; }
  .kto-calc__form, .kto-calc__items { grid-template-columns: 1fr; }
  .kto-calc__field span { min-height: 0; }
  .kto-calc .kto-btn { width: 100%; }
}
