/* Калькуляторы (roi, timezone, marketplace) в оформлении сайта.
   Разметка у них на Tailwind, поэтому здесь — перекраска его классов под
   токены из landing.css, а не новая вёрстка: логику страниц не трогаем. */

body.tool { background: var(--ink); color: var(--text); font-family: var(--display); }
.tool main { padding-top: 112px !important; padding-bottom: 72px !important; }
.tool main h1 { font-size: clamp(34px, 5vw, 54px) !important; font-weight: 720 !important; letter-spacing: -.04em; line-height: 1.04; color: var(--text) !important; }
.tool main h1 + p { font-size: 17px !important; color: var(--mute) !important; line-height: 1.6; margin-top: 14px; }
.tool h2, .tool h3 { letter-spacing: -.02em; }

/* панели и поля */
.tool .glass { background: var(--ink-2) !important; border: 1px solid var(--line) !important; backdrop-filter: none !important; border-radius: 16px !important; }
.tool input:not([type="checkbox"]):not([type="radio"]), .tool select, .tool textarea {
  background: var(--ink) !important; border: 1px solid var(--line-2) !important; color: var(--text) !important;
  border-radius: 10px !important; font-family: var(--display);
}
.tool input:focus, .tool select:focus, .tool textarea:focus { outline: none; border-color: var(--violet) !important; box-shadow: 0 0 0 3px rgba(124,77,255,.18); }
.tool label > span, .tool .text-slate-400 { color: var(--mute) !important; }
.tool .text-slate-500, .tool .text-slate-600 { color: var(--dim) !important; }
.tool .text-white, .tool .text-slate-100, .tool .text-slate-200 { color: var(--text) !important; }
.tool .bg-slate-900, .tool .bg-slate-900\/80, .tool .bg-slate-900\/60, .tool .bg-slate-800 { background: var(--ink) !important; }
.tool .border-slate-700, .tool .border-slate-800 { border-color: var(--line) !important; }
.tool .rounded-xl { border-radius: 12px !important; }

/* главная кнопка и главный результат */
.tool button.bg-emerald-500, .tool button.bg-violet-600, .tool .bg-sky-500 {
  background: var(--violet-btn) !important; color: #fff !important; font-weight: 550 !important; border-radius: 10px !important;
}
.tool button.bg-emerald-500:hover, .tool button.bg-violet-600:hover { background: var(--violet-btn-h) !important; }
.tool .bg-emerald-500\/10 { background: linear-gradient(180deg, rgba(124,77,255,.14), rgba(124,77,255,.04)) !important; }
.tool .border-emerald-500\/40 { border-color: #4a3a78 !important; }
.tool .text-emerald-300, .tool .text-emerald-400, .tool .text-emerald-400\/80 { color: var(--violet) !important; }
.tool .text-sky-300, .tool .text-sky-400 { color: var(--data) !important; }
.tool .text-amber-300 { color: #ffd08a !important; }
.tool .out-val { font-family: var(--mono); font-stretch: 87.5%; font-weight: 600; letter-spacing: -.01em; }
.tool .text-violet-400, .tool .text-violet-300 { color: var(--violet) !important; }
.tool pre { font-family: var(--mono); }

/* шапка и подвал на трёх языках: видна та версия, что совпадает с языком страницы */
.tool [data-tc-lang]:not(.on) { display: none !important; }
.tool .uq-langs .lang-btn { font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--dim); padding: 7px; border-radius: 6px; background: none; border: 0; cursor: pointer; }
.tool .uq-langs .lang-btn:hover { color: var(--text); }
.tool .uq-langs .lang-btn.is-on { color: var(--text); background: var(--ink-3); }

/* продающий блок под калькулятором — в тех же цветах */
.tool .promo-card { border-color: #4a3a78 !important; background: radial-gradient(120% 140% at 100% 0%, rgba(124,77,255,.26), transparent 60%), var(--ink-2) !important; border-radius: 18px !important; }
.tool .promo-eyebrow { font-family: var(--mono); font-weight: 500 !important; color: var(--violet) !important; background: rgba(124,77,255,.14) !important; }
.tool .promo-card h2 { font-weight: 680 !important; letter-spacing: -.03em; }
.tool .promo-f .tick { color: var(--violet) !important; }
.tool .promo-plan { background: var(--ink) !important; border-color: var(--line) !important; }
.tool .promo-plan .p { color: var(--text) !important; }
.tool .promo-btn { background: var(--violet-btn) !important; }
.tool .promo-btn:hover { background: var(--violet-btn-h) !important; }
.tool .promo-btn2 { border-color: var(--line-2) !important; }
.tool .tc-copy h2 { font-weight: 650 !important; letter-spacing: -.02em; }
.tool .tc-copy a { color: var(--violet) !important; }
.tool .tc-copy th { background: var(--ink-2) !important; }
.tool .tc-copy th, .tool .tc-copy td, .tool .tc-copy details { border-color: var(--line) !important; }