/* Страница тарифов: блоки, которых нет на других страницах.
   Всё остальное берётся из landing.css и promo.css. */

.crumbs {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 18px;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs span { margin: 0 4px; }

.tarify-hero .section__head h1 {
	font-size: clamp(28px, 4.2vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	text-wrap: balance;
}

.tarify-empty {
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--muted);
}

/* В карточке тарифа показываем не выдуманный список, а реальные реквизиты из 1С */
.plan__list li .plan__prop {
	display: block;
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.35;
}
.plan__list li b {
	font-weight: 650;
	color: var(--ink);
	/* «10 000» — это одно число, а пробел внутри него обычный, и браузер
	   переносил по нему на вторую строку. Запрещаем перенос: пусть лучше
	   переносится название слева, оно из нескольких слов. */
	white-space: nowrap;
}

/* Название занимает всё, что осталось, значение прижато вправо и целиком. */
.plan__list li {
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.plan__list li .plan__prop { flex: 1; }

/* У Битрикс24 четыре тарифа вместо трёх — сетка та же, колонок больше */
.plans--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
	.plans--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.plans--four { grid-template-columns: minmax(0, 1fr); }
}
.plans--four .plan__sum { font-size: clamp(22px, 2.2vw, 28px); }

/* Какой тариф выбрать */
.pick {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}
.pick__item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px 22px;
}
.pick__item h3 {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.pick__price {
	font-size: 15px;
	font-weight: 700;
	color: var(--blue);
	margin-bottom: 10px;
}
.pick__price span {
	font-weight: 400;
	font-size: 12.5px;
	color: var(--muted);
	display: block;
}
.pick__item p {
	margin: 0;
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.62;
}

/* Таблица сравнения */
.cmp__scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	-webkit-overflow-scrolling: touch;
}
.cmp {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	min-width: 620px;
}
.cmp thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--tint);
	color: var(--ink);
	font-weight: 700;
	text-align: left;
	padding: 13px 16px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}
.cmp thead th:first-child { min-width: 240px; }

/*
 * Таблица в две колонки — «Работа | Цена» на страницах услуг.
 *
 * ⚠ Ширина 620px у общей `.cmp` рассчитана на сравнение пакетов, где колонок
 * пять-шесть. Здесь их две, и после того как убрали третью с кнопками «В
 * корзину», прежняя ширина стала вредной вдвойне: на телефоне цена уезжала за
 * край экрана, а на широком мониторе под значением в девяносто пикселей
 * оставалась колонка в триста — ровно там, где раньше стояли кнопки.
 */
.cmp--pair { min-width: 0; }
.cmp--pair thead th:first-child { min-width: 0; }
.cmp--pair tbody td,
.cmp--pair thead th:last-child {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}
.cmp tbody th {
	text-align: left;
	font-weight: 500;
	color: var(--ink);
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	position: sticky;
	left: 0;
	background: #fff;
	z-index: 1;
}
.cmp tbody td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: 0; }

/* Строки, где тарифы совпадают, сравнивать не в чем — приглушаем их */
.cmp tr.is-same th,
.cmp tr.is-same td { color: var(--muted); }
.cmp tr.is-diff td { font-weight: 650; }
.cmp tr.is-diff:hover th,
.cmp tr.is-diff:hover td { background: var(--tint); }

/* Сроки оплаты и бонусные месяцы */
.terms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}
.term {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 20px 18px;
	text-align: center;
}

/* Подсвечен один срок — с самой большой долей подарочных месяцев.
   Раньше рамка была у всех карточек с бонусом, то есть у всех сразу,
   и выделение ничего не выделяло. */
.term--best {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px var(--tint);
}

.term__tag {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--blue);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Оплаченные месяцы против подарочных: длина сегментов пропорциональна
   месяцам, поэтому доля подарка видна без чтения цифр. */
.term__bar {
	display: flex;
	gap: 2px;
	height: 8px;
	margin: 12px 0;
	border-radius: 999px;
	overflow: hidden;
}
.term__bar i { background: var(--blue); border-radius: 999px; }
.term__bar b { background: #22c55e; border-radius: 999px; }

.term__benefit {
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: #16a34a;
}
.term__pay {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.term__label {
	font-size: 12.5px;
	color: var(--muted);
	margin-bottom: 12px;
}
.term__get {
	font-size: 14.5px;
	color: var(--ink);
}
.term__get b { font-weight: 700; }
.term__bonus {
	margin-top: 8px;
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--blue);
	background: var(--tint);
	border-radius: 999px;
	padding: 4px 11px;
}

/* Живой пример с ценами из 1С под карточками сроков */
.terms__example {
	margin: 22px auto 0;
	max-width: 640px;
	text-align: center;
	font-size: 14px;
	line-height: 1.65;
	color: var(--muted);
}
.terms__example b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.terms__example a { color: var(--blue); font-weight: 700; white-space: nowrap; }

/* Куда идти дальше */
.next {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
.next__item {
	display: block;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, transform .15s ease;
}
.next__item:hover {
	border-color: var(--blue);
	transform: translateY(-2px);
}
.next__item b {
	display: block;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 5px;
}
.next__item span {
	color: var(--muted);
	font-size: 13.5px;
	line-height: 1.55;
}
.next__item:focus-visible,
.crumbs a:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

/* Заявка стоит в одном блоке со ссылками «что дальше» — отделяем воздухом */
#dalshe .cta { margin-top: 48px; }

@media (prefers-reduced-motion: reduce) {
	.next__item { transition: none; }
	.next__item:hover { transform: none; }
}

@media (max-width: 640px) {
	.cmp { font-size: 13.5px; }
	.cmp thead th, .cmp tbody th, .cmp tbody td { padding: 10px 12px; }
	.cmp thead th:first-child { min-width: 180px; }
}

/* ── Страница услуги: текст слева, форма справа ──────────────────────── */

.svc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
@media (max-width: 980px) { .svc { grid-template-columns: minmax(0, 1fr); } }

.svc__intro { color: var(--muted); font-size: 15.5px; line-height: 1.7; max-width: 62ch; margin: 0 0 20px; }

/* ⚠ `.svc__from` разметкой сейчас не используется: цена «от» переехала в
   карточку справа (`.pricecard__top`) — в левой колонке она стояла под
   вводными абзацами, то есть ниже первого экрана. Правило оставлено: блок с
   ценой в тексте может понадобиться снова, а вид у него уже согласован. */
.svc__from { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.svc__from b { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.svc__from span { color: var(--muted); font-size: 14px; }
.svc__note { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 6px 0 14px; }

/* ── Калькулятор ──────────────────────────────────────────────────────
   Публичный расчёт: те же четыре операции, что в кабинете. Поля слева,
   итог справа — на широком экране он липнет и виден при любом выборе. */

.tcalc {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 24px;
}

.tcalc__tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
	padding-bottom: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.tcalc__tabs::-webkit-scrollbar { display: none; }

.tcalc__tab {
	flex: 0 0 auto;
	padding: 10px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tcalc__tab:hover { border-color: var(--blue); color: var(--blue); }
.tcalc__tab.is-active {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.tcalc__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 28px;
}

/* Колонка растянута, поэтому подсказка внизу прижимается к нижнему краю
   и низ карточки выглядит одинаково на всех четырёх операциях. */
.tcalc__fields { display: flex; flex-direction: column; gap: 28px; }

.tcalc__note {
	list-style: none;
	margin: auto 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 7px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted);
}
.tcalc__note li { padding-left: 16px; position: relative; }
.tcalc__note li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 7px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--blue);
	opacity: .55;
}

/* Поля внутри вкладки разведены воздухом, а заголовок поля прижат к своему
   блоку (9px против 26px сверху) — видно, к чему он относится. hidden у
   панели перебивался бы display: grid, поэтому раскладка только у видимой. */
.tcalc__panel:not([hidden]) { display: grid; gap: 26px; }

.tcalc__field { display: grid; gap: 9px; }

.tcalc__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}

.tcalc__hint {
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.5;
}

.tcalc__chips { display: flex; flex-wrap: wrap; gap: 10px; }

.tcalc__chip {
	display: grid;
	gap: 3px;
	min-width: 150px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.tcalc__chip b {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}
.tcalc__chip-note {
	font-size: 12.5px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.tcalc__chip:hover:not(:disabled) { border-color: var(--blue); }
.tcalc__chip.is-active {
	border-color: var(--blue);
	background: var(--tint);
	box-shadow: 0 0 0 3px var(--tint);
}
.tcalc__chip:disabled { opacity: .45; cursor: not-allowed; }

.tcalc__chips--periods .tcalc__chip { min-width: 150px; }

/* Плитки периодов повторяют язык блока «Сроки оплаты»: полоса
   оплаченных и подарочных месяцев, пилюля бонуса, зелёная выгода. */
.tcalc__chip-bar {
	display: flex;
	gap: 2px;
	height: 6px;
	margin: 5px 0 2px;
	border-radius: 999px;
	overflow: hidden;
}
.tcalc__chip-bar .is-paid { background: var(--blue); border-radius: 999px; }
.tcalc__chip-bar .is-gift { background: #22c55e; border-radius: 999px; }

.tcalc__chip-gift {
	justify-self: start;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--tint);
	color: var(--blue);
	font-size: 11.5px;
	font-weight: 700;
}

.tcalc__chip-benefit {
	font-size: 11.5px;
	font-weight: 700;
	color: #16a34a;
}

.tcalc__stepper { display: inline-flex; align-items: center; gap: 8px; }

.tcalc__step {
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	font-size: 19px;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
}
.tcalc__step:hover { border-color: var(--blue); color: var(--blue); }

.tcalc__number,
.tcalc__date {
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}
.tcalc__number { width: 84px; text-align: center; }
.tcalc__number--wide { width: 190px; text-align: left; }
.tcalc__date { width: 190px; }

.tcalc__number:focus,
.tcalc__date:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px var(--tint);
}

/* Стрелки у числового поля мешают: рядом свои кнопки «−» и «+». */
.tcalc__number::-webkit-outer-spin-button,
.tcalc__number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tcalc__number[type=number] { -moz-appearance: textfield; }

/* Итог занимает колонку целиком, а содержимое стоит по центру: тогда
   отступ сверху и снизу одинаковый при любой длине левой колонки —
   у «Повышения тарифа» полей вдвое больше, чем у «Покупки». */
.tcalc__result {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--tint);
	border-radius: var(--radius);
	padding: 24px;
}

.tcalc__result-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.tcalc__total {
	margin: 8px 0 10px;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.tcalc__formula {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.55;
}

.tcalc__gift,
.tcalc__warn {
	margin-top: 12px;
	padding: 10px 13px;
	border-radius: 12px;
	font-size: 12.5px;
	line-height: 1.5;
}
.tcalc__gift { background: #dbeafe; color: var(--blue-dark); font-weight: 600; }
.tcalc__warn { background: #fff; color: var(--muted); border: 1px solid var(--line); }

.tcalc__actions { display: grid; gap: 8px; margin-top: 18px; }
/* Колонка узкая, а подписи длинные: у .btn перенос запрещён, здесь разрешаем.
   `.lead-ways__btn` — тот же вид, что у кнопок связи в шапке (landing.css);
   ему перенос тоже нужен: «Проверить расчёт с менеджером» в одну строку в
   эту колонку не встаёт. */
.tcalc__actions .btn,
.tcalc__actions .lead-ways__btn {
	justify-content: center;
	text-align: center;
	white-space: normal;
	line-height: 1.35;
}

.tcalc__small {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.55;
}

@media (max-width: 900px) {
	.tcalc { padding: 18px; }
	.tcalc__body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.tcalc__result { position: static; }
	.tcalc__chip { min-width: 0; flex: 1 1 calc(50% - 5px); }
}

@media (prefers-reduced-motion: reduce) {
	.tcalc__tab, .tcalc__chip { transition: none; }
}

/* ── Карточки выбора тарифа ───────────────────────────────────────────
   Краткая форма: кому, три главных лимита, что умеет и чего нет.
   Всё остальное — в шторке по кнопке «Подробнее». */

.pick__item { display: flex; flex-direction: column; }
.pick__item--best { border-color: var(--blue); box-shadow: 0 0 0 3px var(--tint); }

/*
 * Блоки карточек стоят на общих линиях: описания у тарифов разной длины, и
 * без этого разделитель перед лимитами, списки и кнопки съезжали по высоте.
 * Ряды задаёт общая сетка, карточка наследует их через subgrid. Где subgrid
 * не поддерживается, карточки остаются колонками — как было.
 */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 861px) {
		.pick { grid-template-rows: repeat(8, auto); }
		.pick__item {
			display: grid;
			grid-row: span 8;
			grid-template-rows: subgrid;
		}
	}
}

.pick__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pick__tag {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--tint);
	color: var(--blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.pick__who {
	margin: 0 0 10px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink);
	font-weight: 600;
}

.pick__limits {
	list-style: none;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 8px;
}
.pick__limits li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 13.5px;
}
.pick__limits span { color: var(--muted); }
.pick__limits b { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pick__has {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
	font-size: 13.5px;
}
.pick__has li { padding-left: 22px; position: relative; line-height: 1.45; }
.pick__has li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}
.pick__has .is-yes::before { content: "✓"; color: #16a34a; }
.pick__has .is-no::before  { content: "—"; color: var(--muted); }
.pick__has .is-no { color: var(--muted); }

.pick__when {
	margin: 14px 0 18px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted);
	font-style: italic;
}

/* Кнопка прижата к низу: карточки разной длины, а линия кнопок должна быть общей */
.pick__more { margin-top: auto; justify-content: center; }

/* ── Таблица сравнения ────────────────────────────────────────────── */

.cmp__tools {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.cmp__toggle {
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}
.cmp__toggle:hover { border-color: var(--blue); color: var(--blue); }
.cmp__toggle[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.cmp__count { font-size: 13px; color: var(--muted); }

.cmp thead th { vertical-align: top; }
.cmp__plan { display: block; font-size: 15px; font-weight: 700; }
.cmp__price {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.cmp__more {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--blue);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
.cmp__more:hover { color: var(--blue-dark); }

/* Колонка тарифа, который берут чаще, выделена подложкой во всю высоту */
.cmp thead th.is-best { background: #dbeafe; }
.cmp tbody td.is-best { background: rgba(219, 234, 254, .35); }

/* Пояснение под названием строки: что этот лимит значит на практике */
.cmp__hint {
	display: block;
	margin-top: 3px;
	max-width: 42ch;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--muted);
	white-space: normal;
}

.cmp__yes { color: #16a34a; font-weight: 700; font-size: 17px; }
.cmp__no  { color: var(--muted); }

/* Строки «есть/нет» короткие — значок центрируем под названием тарифа */
.cmp tr.is-flag td { text-align: center; }

.cmp.is-diff-only tr.is-same { display: none; }

.cmp__legend {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--muted);
}

/* ── Статьи о тарифах ─────────────────────────────────────────────────
   Лежат в разметке ради поисковика и читаются в шторке; на самой
   странице не показываются, чтобы не дублировать таблицу. */

.articles { display: none; }

.sheet__body .article__title {
	margin: 0 0 12px;
	font-size: clamp(21px, 2.6vw, 27px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
}
.sheet__body .article__lead {
	margin: 0 0 22px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--muted);
}
.sheet__body h3 {
	margin: 26px 0 10px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
}
/* Половина широкого монитора — это очень длинная строка; глаз теряет начало
   следующей. Текст держим в разумной мере, таблицы и врезки — во всю ширину. */
.sheet__body p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; max-width: 76ch; }
.sheet__body .article__list,
.sheet__body .article__steps { max-width: 76ch; }

.sheet__body .article__list,
.sheet__body .article__steps { margin: 0 0 14px; padding-left: 20px; }
.sheet__body .article__list li,
.sheet__body .article__steps li { margin-bottom: 7px; font-size: 15px; line-height: 1.6; }

.sheet__body .article__note {
	margin: 16px 0;
	padding: 13px 16px;
	border-left: 3px solid var(--blue);
	border-radius: 0 12px 12px 0;
	background: var(--tint);
	font-size: 14px;
	line-height: 1.6;
	color: var(--blue-dark);
}

.sheet__body .article__facts {
	margin: 0 0 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.sheet__body .article__facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
}
.sheet__body .article__facts > div:last-child { border-bottom: 0; }
.sheet__body .article__facts dt { font-size: 13.5px; color: var(--muted); }
.sheet__body .article__facts dd {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ── Шторка ───────────────────────────────────────────────────────── */

.sheet { position: fixed; inset: 0; z-index: 60; }

.sheet__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, .45);
	opacity: 0;
	transition: opacity .2s ease;
}
.sheet.is-open .sheet__overlay { opacity: 1; }

.sheet__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -18px 0 48px rgba(17, 24, 39, .18);
	transform: translateX(100%);
	transition: transform .22s ease;
	outline: none;
}
.sheet.is-open .sheet__panel { transform: translateX(0); }

.sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
}
.sheet__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--blue);
}
.sheet__close {
	width: 36px;
	height: 36px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	font-size: 15px;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
}
.sheet__close:hover { border-color: var(--blue); color: var(--blue); }

/* Прокручивается только середина: шапка и подвал с ценой остаются на месте.
   Форма заявки едет вместе со статьёй — иначе она отъедает пол-экрана
   у текста, ради которого шторку и открыли. */
.sheet__scroll {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.sheet__body { padding: 24px 24px 0; }

.sheet__cta {
	margin: 24px;
	padding: 20px;
	border-radius: var(--radius);
	background: var(--bg-soft);
}
.sheet__cta h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
/* Только прямой абзац подводки: текст внутри формы стилизует сама .lead */
.sheet__cta > p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* Форма — та же .lead, что на главной; в шторке её тень мягче:
   карточка лежит в светлой врезке, а не на тёмном градиенте. */
.sheet__cta .lead { box-shadow: 0 12px 32px -18px rgba(8, 15, 40, .25); }

.sheet__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 24px;
	border-top: 1px solid var(--line);
	background: #fff;
}
.sheet__price b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.sheet__price span { font-size: 12.5px; color: var(--muted); }

/* Пока шторка открыта, страница под ней не прокручивается */
body.is-locked { overflow: hidden; }

/* Половина узкого экрана — это колонка в 400 пикселей, читать статью в ней
   невозможно. Ниже 900 шторка занимает экран целиком. */
@media (max-width: 900px) {
	.sheet__panel { width: 100%; }
	.sheet__head, .sheet__foot { padding-left: 16px; padding-right: 16px; }
	.sheet__body { padding: 18px 16px 0; }
	.sheet__cta { margin: 18px 16px; padding: 16px; }
	.sheet__foot .btn { padding: 12px 16px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.sheet__panel, .sheet__overlay { transition: none; }
}

/* ── Страница «Лицензии»: две системы рядом ───────────────────────────
   Развилка для тех, кто ещё не выбрал систему: карточка на продукт,
   внутри цена, состав линейки и переходы на тарифы и лендинг. */

.lic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	align-items: start;
}
@media (max-width: 900px) {
	.lic { grid-template-columns: minmax(0, 1fr); }
}

.lic__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 26px;
}

.lic__top { display: grid; justify-items: start; align-content: start; gap: 10px; }
.lic__top h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }

.lic__tag {
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--tint);
	color: var(--blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.lic__price {
	margin: 16px 0 12px;
	font-size: 15px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.lic__price b {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ink);
}
.lic__price span { display: block; font-size: 13px; }

.lic__text { margin: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.65; }

.lic__plans {
	list-style: none;
	margin: 0 0 16px;
	padding: 14px 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 9px;
}
.lic__plans li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14.5px;
}
.lic__plans span { color: var(--ink); }
.lic__plans i {
	font-style: normal;
	color: var(--muted);
	font-size: 12.5px;
	white-space: nowrap;
}
.lic__plans b { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.lic__facts {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: 13.5px;
	color: var(--muted);
}
.lic__facts li { padding-left: 18px; position: relative; line-height: 1.5; }
.lic__facts li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--blue);
	opacity: .55;
}

/* Кнопки прижаты к низу: карточки разной длины, линия действий общая */
.lic__actions { display: grid; gap: 8px; margin-top: auto; }
.lic__actions .btn { justify-content: center; }

/* ── Страницы ошибок ──────────────────────────────────────────────────
   404 и 403 рисуются с шапкой сайта: человек, попавший на битую ссылку,
   должен видеть, куда идти дальше, а не сообщение веб-сервера. */

.err { padding-top: 56px; }
.err__inner { max-width: 720px; margin: 0 auto; text-align: center; }

.err__code {
	margin: 18px 0 6px;
	font-size: clamp(64px, 12vw, 116px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.04em;
	background: linear-gradient(160deg, var(--blue), #4338ca);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.err h1 {
	margin: 0 0 12px;
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 800;
	letter-spacing: -.02em;
}

.err__lead { margin: 0 auto; max-width: 52ch; color: var(--muted); font-size: 16px; }

.err__url {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--muted);
	overflow-wrap: anywhere;
}
.err__url code {
	padding: 3px 8px;
	border-radius: 8px;
	background: var(--tint);
	color: var(--blue-dark);
	font-size: 12.5px;
}

.err__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 26px 0 40px;
}

/* Список разделов под кнопками — те же карточки, что в «Что дальше» */
.err__links { text-align: left; }

/* Три раздела в ряд: две CRM и виджеты к ним */
.lic--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/*
 * Все линии карточек на одной высоте: цена, описание, список тарифов,
 * факты и кнопка. Тексты у разделов разной длины, и без общей сетки
 * кнопки съезжали ступеньками. Ряды задаёт контейнер, карточка наследует
 * их через subgrid; где subgrid не поддерживается — остаётся как было.
 */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 761px) {
		.lic { grid-template-rows: repeat(7, auto); }
		.lic__card {
			display: grid;
			grid-row: span 7;
			grid-template-rows: subgrid;
		}
	}
}
@media (max-width: 1100px) {
	.lic--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.lic--three { grid-template-columns: minmax(0, 1fr); }
}

/* Подпись под кнопкой раздела: объясняет, что внутри, чтобы не тащить
   на развилку ссылки на внутренние страницы. */
.lic__hint {
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted);
	text-align: center;
}

/* Зелёный на странице лицензий — тот же, что и на остальном сайте: цвет
   выгоды и подтверждения (галочка «есть», бонусные месяцы, экономия).
   Синий остаётся цветом навигации и цен, зелёным помечено «что вы
   получаете»: сколько выйдет на команду и кому система выгоднее. */

.lic__facts li.is-gain { color: #15803d; font-weight: 600; }
.lic__facts li.is-gain::before { background: #22c55e; opacity: 1; }

/* Строка таблицы с ответом «кому это выгоднее» — вывод всего сравнения */
.cmp tr.is-gain td { color: #15803d; font-weight: 700; }
.cmp tr.is-gain th { color: var(--ink); }
.cmp tr.is-gain:hover th,
.cmp tr.is-gain:hover td { background: #f0fdf4; }

/* Пометка на карточке раздела: чем именно он выигрывает */
.lic__gain {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
	padding: 7px 13px;
	border-radius: 999px;
	background: #dcfce7;
	color: #166534;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
}
.lic__gain::before {
	content: "✓";
	font-size: 13px;
	color: #16a34a;
}

/* Подпись о валюте — одна на все три карточки, чтобы не повторять «сум»
   в каждой строке прайса. */
.lic__units {
	margin: 0 0 14px;
	text-align: right;
	font-size: 12.5px;
	color: var(--muted);
}
@media (max-width: 760px) {
	.lic__units { text-align: left; }
}

/* Переключатель срока оплаты над сеткой тарифов Битрикс24.

   Годовая цена ниже месячной на пятую часть, и вендор показывает у себя
   именно её. Раньше страница знала только месячную и объявляла цену выше
   той, что обещала реклама. Кнопки лежат над карточками, а не внутри каждой:
   срок выбирают один раз для всей сетки. */
.plans-mode {
	display: flex;
	gap: 4px;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 22px;
	padding: 4px;
	border-radius: 999px;
	background: var(--soft, #f1f3f7);
}
.plans-mode__btn {
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.plans-mode__btn.is-on {
	background: #fff;
	color: var(--ink, #16181d);
	box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

/* Вторая цена: та, что не выбрана переключателем. Держим её на виду, а не
   за кликом, — иначе человек с помесячной оплатой уходит с чужим числом
   в голове. */
.plan__was {
	margin: -14px 0 18px;
	color: var(--muted);
	font-size: 12.5px;
}

@media (max-width: 560px) {
	.plans-mode { width: 100%; }
	.plans-mode__btn { flex: 1; padding: 9px 10px; font-size: 13px; }
}

/* Текстовые блоки на страницах тарифов: прямые ответы на «сколько стоит» и
   «как купить». Ширину держим читаемой — длинная строка на широком экране
   утомляет и абзац бросают на середине. */
.tarify-copy {
	max-width: 68ch;
	margin: 0 auto;
}
.tarify-copy p {
	margin: 0 0 14px;
	font-size: 15.5px;
	line-height: 1.65;
}
.tarify-copy p:last-child { margin-bottom: 0; }
.tarify-copy a { color: var(--blue); }
.pick + .tarify-copy { margin-top: 26px; }

/* ── Дополнительные блоки страницы услуги ──────────────────────────────────
   Рисует app/partials/service-blocks.php; там же описаны виды блоков.

   ⚠ ОДИН НАБОР НА ВСЕ ТРИНАДЦАТЬ СТРАНИЦ. Страницы наполняют разные руки, и
   стоит завести «свой» вариант карточки под одну услугу — через месяц их будет
   тринадцать, и сайт перестанет выглядеть одним сайтом. Нужен новый вид блока
   — добавляйте его сюда и в отрисовщик, а не рядом.

   ⚠ Цвета и радиусы берём токенами из landing.css, ничего не хардкодим:
   витрина умеет менять оформление из кабинета, и вписанный сюда синий однажды
   останется единственным синим на перекрашенном сайте. */

/* Этапы. Номер рисует вёрстка счётчиком: он про порядок, и переписывать его
   руками при вставке шага посередине никто не должен. */
.svc-steps {
	counter-reset: svc-step;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.svc-steps__item {
	counter-increment: svc-step;
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px 20px 20px 62px;
}
.svc-steps__item::before {
	content: counter(svc-step);
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tint);
	color: var(--blue);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.svc-steps__item b {
	display: block;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 5px;
}
.svc-steps__item span {
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.6;
}

/* Равнозначные карточки — те же правила, что у .next__item, но без ссылки:
   это текст, а не переход, и подчёркивать наведением нечего. */
.svc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}
.svc-cards__item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
}
.svc-cards__item b {
	display: block;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 5px;
}
.svc-cards__item span {
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.6;
}

/* Признаки. Две колонки на широком экране: список из восьми строк в одну
   колонку уводит страницу вниз на пустом месте. */
.svc-check {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 10px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.svc-check__item {
	position: relative;
	padding-left: 30px;
	color: var(--ink);
	font-size: 15.5px;
	line-height: 1.6;
}
/* Галочка нарисована рамкой, а не символом: шрифтовая галочка в разных
   системах разной высоты и съезжает относительно строки. */
.svc-check__item::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 6px;
	width: 6px;
	height: 11px;
	border: solid var(--blue);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Сравнение. Прокрутка своя: на телефоне четыре колонки иначе растягивают
   вбок всю страницу. */
.svc-table__scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
}
.svc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.svc-table th,
.svc-table td {
	padding: 13px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}
.svc-table thead th {
	background: var(--bg-soft);
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
}
.svc-table tbody tr:last-child td { border-bottom: 0; }
/* Первая колонка — что сравниваем: она подпись строки, а не значение. */
.svc-table tbody td:first-child { font-weight: 600; }
.svc-table td + td { color: var(--muted); }

/* Оговорка про сроки и сервисы.
   ⚠ Мелко и приглушённо, но НЕ спрятано: это честное уточнение, а не
   юридическая отписка петитом. Читается тем, кто дочитал страницу до конца, —
   то есть тем, кто как раз собрался считать сроки. */
.svc-note {
	max-width: 760px;
	margin: 0 auto;
	padding-top: 4px;
	color: var(--muted);
	font-size: 13.5px;
	line-height: 1.6;
	text-align: center;
}