/* ==========================================================================
   Кнопка-таблетка
   Размеры по макету при ширине 1920 — 681 × 97, радиус 50:
   белый Muller Regular 36 / 1.7 на чёрной плашке.

   Радиус в макете (50) больше половины высоты (48.5), то есть это таблетка,
   а не скруглённый прямоугольник — поэтому 999px: форма не поплывёт, когда
   кнопка станет ниже на узком экране.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(3rem, 5.0521vw, 6.0625rem); /* 97px */
  padding: 0.5em 1.5em;
  font-size: clamp(1rem, 1.875vw, 2.25rem);
  font-weight: var(--fw-regular);
  line-height: 1.7;
  text-align: center;
  color: var(--text-inverse);
  background-color: var(--bg-inverse);
  border-radius: 999px;
  transition: background-color 0.25s ease;
}

.btn:hover,
.btn:focus-visible {
  background-color: var(--accent-hover);
}

/* --- Светлый вариант -------------------------------------------------------
   Кнопка «Другие услуги» на серой подложке тарифов: та же таблетка 681 × 97,
   но белая, с чёрным Muller Regular 30 / 1.25. Ширина по макету
   фиксированная — на узком экране кнопка ужимается до ширины колонки.
   -------------------------------------------------------------------------- */

.btn--light {
  width: min(100%, 42.5625rem);
  font-size: clamp(1rem, 1.5625vw, 1.875rem);
  line-height: 1.25;
  color: var(--text-primary);
  background-color: var(--bg-base);
}

.btn--light:hover,
.btn--light:focus-visible {
  color: var(--text-inverse);
  background-color: var(--accent-hover);
}