/* Компоненты, которых не было в Astro-версии: сравнение, поиск,
   выбор карточек.

   Отдельный файл, а не дополнение к site.css: тот собран из Astro
   и в части «уборка» будет чиститься от привязок data-astro-cid.
   Смешивать перенесённое и новое в одном файле — гарантированно
   потерять часть при той чистке.

   Токены берём из site.css, своих цветов не вводим: дизайн утверждён. */

/* --- Выбор в сравнение на карточках ------------------------------------ */

.cmp-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
}

.cmp-pick input {
  width: 16px;
  height: 16px;
  accent-color: var(--ink);
  cursor: pointer;
}

/* --- Всплывающая панель ------------------------------------------------- */

.cmp-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(140%);
  z-index: 40;

  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 20px;

  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgb(0 0 0 / 22%);

  transition: transform .18s ease-out;
}

/* Показываем панель, когда что-то отмечено.
   Два правила подряд не случайно: :has() понимают браузеры примерно
   с 2023 года, класс проставляет скрипт. Сработает то, что доступно;
   без обоих панель просто не появится, а форма останется рабочей. */
.cmp-form:has(input[name="p[]"]:checked) .cmp-bar,
.cmp-form.has-picked .cmp-bar {
  transform: translateX(-50%) translateY(0);
}

.cmp-bar b { font-family: var(--fm, monospace); }
.cmp-bar .cmp-hint { color: rgb(255 255 255 / 65%); font-size: 13px; }

.cmp-bar button {
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.cmp-bar button:disabled { opacity: .45; cursor: not-allowed; }

/* --- Страница сравнения ------------------------------------------------- */

.cmp-empty { padding: 48px 0; max-width: var(--narrow, 720px); }

.cmp-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
}

.cmp-controls label { font-size: 13px; color: var(--ink-muted); }

/* Селекты.

   Системный вид списка не совпадает с дизайном ничем: серый градиент,
   своя рамка, свой шрифт. appearance: none снимает всё это разом,
   но вместе с оформлением убирает и стрелку — поэтому рисуем её фоном.

   -moz-appearance нужен для Firefox старше 63: там appearance без
   префикса не понимался, и без этой строки рядом с нашей стрелкой
   осталась бы системная. В свежих версиях достаточно appearance,
   лишний префикс безвреден. */
.cmp-controls select,
.cmp-head-cell select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  display: block;
  margin-top: 4px;
  padding: 8px 34px 8px 12px;

  font-family: var(--fd);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;

  background-color: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;

  /* Стрелка. Цвет зашит в саму разметку: currentColor в data-URI
     не работает, а лишний файл ради одной галки не нужен. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230e0e0e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;

  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}

.cmp-controls select:hover,
.cmp-head-cell select:hover { border-color: var(--ink); }

/* Фокус лаймовым: тем же акцентом, что у кнопок. Оставляем видимым —
   по клавиатуре иначе не понять, где находишься. */
.cmp-controls select:focus-visible,
.cmp-head-cell select:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--lime);
}

/* Раскрытый список рисует система, и шрифт в нём наш не применится.
   Хотя бы выравниваем цвет, чтобы не было чужого синего выделения. */
.cmp-controls select option,
.cmp-head-cell select option { color: var(--ink); background: var(--white); }

.cmp-controls input[type="search"] {
  display: block;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font: inherit;
  background: var(--white);
}

.cmp-table { width: 100%; border-collapse: collapse; }

.cmp-table th,
.cmp-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.cmp-table thead th { background: var(--surface); }
.cmp-table tbody th { font-weight: 400; color: var(--ink-muted); width: 220px; }
.cmp-table .cmp-num { font-family: var(--fm, monospace); }

/* Лучшее значение в строке. Только там, где сравнение осмысленно,
   и только среди раскрытых значений: иначе нераскрытие выглядело бы
   как проигрыш. */
.cmp-best { background: color-mix(in srgb, var(--lime) 45%, transparent); font-weight: 500; }

.cmp-undisclosed { color: var(--ink-faint); }

.cmp-head-cell { min-width: 190px; }
.cmp-head-cell .cmp-remove { float: right; color: var(--ink-faint); text-decoration: none; font-size: 18px; line-height: 1; }
.cmp-head-cell select { width: 100%; margin-top: 8px; font-size: 13px; padding-block: 6px; }

/* --- Поиск -------------------------------------------------------------- */

.search-form { display: flex; gap: 8px; align-items: center; }

.search-form input[type="search"] {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: inherit;
  min-width: 200px;
  background: var(--white);
}

.search-group { margin-bottom: 36px; }
.search-group h2 { margin-bottom: 8px; }
.search-hit { padding: 12px 0; border-bottom: 1px solid var(--border); }
.search-hit a { font-weight: 500; }
.search-hit .search-meta { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.search-hit mark { background: color-mix(in srgb, var(--lime) 60%, transparent); color: inherit; }

@media (max-width: 700px) {
  .cmp-table tbody th { width: auto; }
  .search-form input[type="search"] { min-width: 0; width: 100%; }
}

/* --- Отзывы ------------------------------------------------------------- */

.rv-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
}

.rv-average b { display: block; font-family: var(--fd); font-size: 44px; line-height: 1; }
.rv-average span { color: var(--ink-muted); font-size: 13px; }

.rv-spread { flex: 1; min-width: 240px; display: grid; gap: 5px; }
.rv-bar { display: grid; grid-template-columns: 20px 1fr 32px; align-items: center; gap: 10px; font-size: 13px; }
.rv-track { height: 7px; background: var(--border); border-radius: 999px; overflow: hidden; }
.rv-fill { display: block; height: 100%; background: var(--lime); }
.rv-count { color: var(--ink-muted); text-align: right; }

.rv-list { display: grid; gap: 20px; margin: 28px 0; }

.rv-item { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); }
.rv-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 10px; font-size: 14px; }
.rv-rating { color: var(--ink); letter-spacing: 1px; }
.rv-dim { color: var(--border-strong); }
.rv-body p:first-child { margin-top: 0; }
.rv-body p:last-child { margin-bottom: 0; }
.rv-external { margin: 0; }

.rv-pages { display: flex; gap: 16px; align-items: center; }

.rv-notice,
.rv-error {
  padding: 12px 14px;
  border-radius: 8px;
  max-width: var(--narrow, 720px);
}

.rv-notice { background: color-mix(in srgb, var(--lime) 30%, transparent); }
.rv-error { background: var(--warn-bg); border: 1px solid var(--warn-border); }

.rv-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: end;
  max-width: 860px;
  margin-top: 16px;
}

.rv-form label { display: block; font-size: 13px; color: var(--ink-muted); }
.rv-form label span { display: block; margin-bottom: 5px; }
.rv-form .rv-wide { grid-column: 1 / -1; }

.rv-form input,
.rv-form select,
.rv-form textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
}

.rv-form textarea { resize: vertical; }

/* --- Блог --------------------------------------------------------------- */

.post-list { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}

.post-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.post-card .post-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.post-card h3 { margin: 0; font-size: 17px; }
.post-card .post-meta { font-size: 13px; color: var(--ink-muted); }

.post-head { max-width: var(--narrow, 720px); }
.post-meta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-muted); margin-top: 14px; }
.post-author { display: flex; gap: 10px; align-items: center; }
.post-author img { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; }

.post-toc {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 28px 0;
}

.post-toc b { display: block; margin-bottom: 8px; font-size: 13px; color: var(--ink-muted); }
.post-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

.post-body-text { max-width: var(--narrow, 720px); }
.post-body-text h2 { scroll-margin-top: 20px; }
.post-body-text pre { overflow-x: auto; background: var(--source-bg); padding: 14px; border-radius: 8px; }
.post-body-text img { max-width: 100%; height: auto; }

.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.post-tags a { font-size: 13px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; }

/* --- Меню разделов ------------------------------------------------------ */

.site-nav { display: flex; }

.site-nav a {
  text-decoration: none;
  color: var(--ink-muted);
  transition: color .12s ease-out;
}

.site-nav a:hover { color: var(--ink); }

/* Текущий пункт. Не только цветом: тонкая подложка держит различие
   и на экране с плохой цветопередачей, и при печати. */
.site-nav a.is-current { color: var(--ink); font-weight: 500; }

.site-nav-sidebar {
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.site-nav-sidebar a {
  padding: 7px 10px;
  margin-inline: -10px;
  border-radius: 8px;
  font-size: 15px;
}

.site-nav-sidebar a.is-current { background: var(--beige); }

.site-nav-footer {
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 14px;
}

.site-nav-footer a.is-current { text-decoration: underline; text-underline-offset: 4px; }

.sb-search { margin-top: 4px; }

.sb-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  background: var(--white);
}

.sb-search input:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--lime);
}

/* --- Полоса фильтров каталога ------------------------------------------- */

.fbar {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

/* Флажок держит состояние панели. Не прячем через display: none —
   тогда он выпадает из обхода с клавиатуры; уводим за край
   и показываем фокус на подписи. */
.fbar-switch {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Кнопка раскрытия нужна только на узком экране. На широком панель
   раскрыта правилом ниже, и кнопка прячется. */
.fbar-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-family: var(--fd);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

.fbar-toggle::after {
  content: '';
  width: 10px;
  height: 6px;
  margin-left: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230e0e0e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .12s ease-out;
}

.fbar-switch:checked ~ .fbar-toggle::after { transform: rotate(180deg); }

.fbar-switch:focus-visible ~ .fbar-toggle {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink);
  border-radius: 12px;
}

.fbar-on {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--lime);
  font-family: var(--fm, monospace);
  font-size: 12px;
}

/* Раскладка задана здесь и действует всегда; переключается только
   показ. Иначе на широком экране, где панель раскрывает медиазапрос,
   а не флажок, потерялись бы отступы и промежутки.
 
   Свёрнуто по умолчанию, разворачивает флажок. Так панель управляется
   из CSS целиком — в отличие от details, где содержимое прячет сам
   браузер и правилом автора это не отменить. */
.fbar-body {
  display: none;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 32px;
  padding: 4px 18px 18px;
}

.fbar-switch:checked ~ .fbar-body { display: flex; }

.fbar-groups { display: flex; flex-wrap: wrap; gap: 20px 32px; flex: 1; }

.fbar-group { display: grid; gap: 8px; align-content: start; }

.fbar-group-title {
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.fbar-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fbar-label { font-size: 13px; color: var(--ink-muted); }
.fbar-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.fbar-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
  text-align: right;
}

/* Кнопка фильтра. Радиокнопка внутри спрятана, но остаётся настоящей:
   форма работает без JavaScript, а с клавиатуры фокус виден по обводке. */
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;

  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;

  transition: border-color .12s ease-out, background-color .12s ease-out;
}

.fchip input { position: absolute; opacity: 0; width: 0; height: 0; }

.fchip:hover { border-color: var(--ink); }

.fchip:has(input:checked) {
  background: var(--lime);
  border-color: var(--ink);
  font-weight: 500;
}

.fchip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--lime); border-color: var(--ink); }

.fcount { font-family: var(--fm, monospace); font-size: 11px; color: var(--ink-muted); font-weight: 400; }
.fchip:has(input:checked) .fcount { color: var(--ink); }

/* Вариант, который ничего не оставит. Не прячем: пусто — тоже ответ,
   и лучше увидеть ноль заранее, чем пустой список после нажатия. */
.fchip-empty { opacity: .45; }
.fchip-empty:hover { border-color: var(--border-strong); }

.fapply {
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* С JavaScript форма отправляется сама, кнопка не нужна. Скрывает её
   сам скрипт, а не CSS: без скрипта кнопка обязана остаться. */
.cat-filters.js-live .fapply,
.fbar-body.js-live .fapply { display: none; }

.fcount-total { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.fcount-total b { font-family: var(--fm, monospace); color: var(--ink); }

.fbar-reset { font-size: 13px; color: var(--ink-muted); }

/* На широком экране панель всегда раскрыта, кнопка не нужна. */
@media (min-width: 900px) {
  .fbar > .fbar-toggle { display: none; }

  .fbar > .fbar-body {
    display: flex;
    padding-top: 18px;
  }
}

@media (max-width: 899px) {
  .fbar-side { align-items: flex-start; text-align: left; margin-left: 0; }
}

/* ===========================================================================
   Подбор тарифа под задачу (страница площадки)
   =========================================================================== */

.quiz {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 32px;

  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.quiz-q { border: none; padding: 0; margin: 0; display: grid; gap: 8px; align-content: start; }

.quiz-q legend {
  padding: 0;
  font-size: 13px;
  color: var(--ink-muted);
}

.quiz-opts { display: flex; flex-wrap: wrap; gap: 6px; }

/* Кнопка-переключатель. Форма живёт без JavaScript, поэтому это радио,
   спрятанное под подписью, а не кнопка со скриптом. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;

  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;

  transition: border-color .12s ease-out, background-color .12s ease-out;
}

.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:hover { border-color: var(--ink); }

.chip:has(input:checked) {
  background: var(--lime);
  border-color: var(--ink);
  font-weight: 500;
}

.chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--lime); border-color: var(--ink); }

.quiz-act { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Скрипт снимает этот класс с формы и прячет кнопку: с ним отбор
   применяется сразу по нажатию. Без скрипта кнопка остаётся на месте. */
.quiz.js-on .js-quiz-submit { display: none; }

.quiz-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 24px;
}

.quiz-num { display: flex; flex-direction: column; max-width: 260px; }
.quiz-num b { font-size: 30px; letter-spacing: -.03em; }
.quiz-num span { margin-top: 2px; font-size: 14px; color: var(--ink-muted); }
.quiz-num em { margin-top: 4px; font-size: 12px; font-style: normal; color: var(--ink-faint); line-height: 1.4; }

.quiz-hint { margin-top: 20px; font-size: 14px; color: var(--ink-muted); }
.quiz-nums + .fempty { margin-top: 20px; }

/* Отметки в таблице тарифов. Неподходящие строки не приглушаются:
   человек смотрит всю линейку, подбор только показывает своё мнение. */
/* Полосатость строк в site.css задана через :nth-child, поэтому отметку
   пишем с той же длиной селектора — иначе чётные строки её перекрывают. */
.sum tbody tr.is-best { background: #fbfee9; box-shadow: inset 3px 0 0 var(--ink); }
.sum tbody tr.is-best:hover { background: #f6fcd8; }

.tag-best,
.tag-match {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
}

.tag-best { background: var(--lime); }
.tag-match { background: var(--beige); color: var(--ink-muted); }

@media (width <= 900px) {
  .quiz { padding: 16px; gap: 16px; }
  .quiz-act { margin-left: 0; width: 100%; }
  .quiz-nums { gap: 20px; }
  .quiz-num b { font-size: 24px; }
}

/* ===========================================================================
   Страница площадки: шапка, вкладки, характеристики, аналоги, акции
   =========================================================================== */

.ph-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.ph-logo { object-fit: contain; width: auto; max-width: 140px; height: auto; max-height: 32px; }
.ph-top .tag { margin-left: 0; }

.ph-rating { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ph-stars { font-size: 18px; letter-spacing: 2px; }
.ph-rating b { font-size: 20px; }

/* Вкладки на радиокнопках: без JavaScript. Переключатели прячем от глаз,
   но не от клавиатуры — display:none выкинул бы их из порядка обхода. */
.tabsw { position: absolute; opacity: 0; width: 0; height: 0; }

.ptabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 8px;
  border-bottom: 1px solid var(--border);
}

.ptab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: -1px;

  font-family: var(--fd);
  font-size: 16px;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ptab b { font-size: 13px; color: var(--ink-faint); }
.ptab:hover { color: var(--ink); }

#tab-tarify:checked  ~ .ptabs [for="tab-tarify"],
#tab-otzyvy:checked  ~ .ptabs [for="tab-otzyvy"],
#tab-analogi:checked ~ .ptabs [for="tab-analogi"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 500;
}

#tab-tarify:checked  ~ .ptabs [for="tab-tarify"]  b,
#tab-otzyvy:checked  ~ .ptabs [for="tab-otzyvy"]  b,
#tab-analogi:checked ~ .ptabs [for="tab-analogi"] b { color: var(--ink); }

.tabsw:focus-visible ~ .ptabs label[for="tab-tarify"],
.tabsw:focus-visible ~ .ptabs label[for="tab-otzyvy"],
.tabsw:focus-visible ~ .ptabs label[for="tab-analogi"] { outline: 2px solid var(--ink); outline-offset: -2px; }

.ppanel { display: none; }

#tab-tarify:checked  ~ #panel-tarify,
#tab-otzyvy:checked  ~ #panel-otzyvy,
#tab-analogi:checked ~ #panel-analogi { display: block; }

/* Прямой якорь показывает свой раздел независимо от выбранной вкладки:
   ссылка из сайдбара или поиска не должна упираться в скрытый блок. */
.ppanel:target,
.ppanel:has(:target) { display: block; }

/* Характеристики блоками */
.sgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
.sgroup h3 { margin-bottom: 8px; font-size: 19px; }

/* Похожие площадки */
.rel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.rel-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.rel-name { display: block; text-decoration: none; }
.rel-name img { object-fit: contain; width: auto; max-width: 100%; height: 24px; }
.rel-name b { font-family: var(--fd); font-size: 18px; font-weight: 600; }
.rel-facts { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ink-muted); }
.rel-why { font-size: 14px; color: var(--ink-muted); }
.rel-card .btn { margin-top: auto; }

/* Акции */
.promos { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.promos li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.promos b { font-family: var(--fd); font-weight: 500; }
.promos em { font-style: normal; font-size: 13px; margin-left: auto; }

@media (width <= 1100px) { .rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width <= 900px) {
  .sgroups { grid-template-columns: 1fr; gap: 20px; }
  .ptab { padding: 10px 12px; font-size: 15px; }
}
@media (width <= 560px) { .rel { grid-template-columns: 1fr; } }

/* ===========================================================================
   Текстовые блоки главной

   Структура делается типографикой: тонкие разделители, крупные числа
   моноширинным, лаймовый акцент точечно. Карточек, рамок и теней здесь
   нет — иначе текст превращается в набор плашек, а он остаётся текстом.

   Блоки занимают всю ширину, как остальной сайт. От длинной строки
   спасает не предел ширины абзаца, а раскладка по колонкам: меру строки
   задаёт сама колонка, поэтому отдельного ограничения нигде нет.
   =========================================================================== */

.ht p { font-size: 17px; line-height: 1.65; }
.ht p + p { margin-top: 14px; }

/* Вводная задаёт тон: крупнее основного текста и чуть приглушённее. */
.ht-lead {
  font-size: 19px !important;
  line-height: 1.55 !important;
  color: var(--ink-muted);
}

.ht-p { margin-top: 22px; }
.ht-h { margin: 36px 0 16px; font-size: 22px; }

/* --- Блок 1: сравнительная полоса ---------------------------------------- */

.ht-vs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
}

/* Разделитель — одна линия между колонками, а не рамка вокруг каждой.
   Промежуток даёт не gap, а внутренние отступы колонок: иначе линия
   встаёт у края промежутка, а не посередине, и колонки выходят разной
   ширины. */
.ht-vs-col:first-child { padding-right: 40px; }
.ht-vs-col + .ht-vs-col { padding-left: 40px; border-left: 1px solid var(--border); }

.ht-vs-col h3 { font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.ht-vs-col ul { margin: 10px 0 0; padding: 0; list-style: none; }

.ht-vs-col li {
  padding: 11px 0;
  font-size: 16px;
  border-bottom: 1px solid var(--border);
}

.ht-vs-col li:first-child { border-top: 1px solid var(--ink); }
.ht-vs-col li:last-child { border-bottom: none; }

/* --- Два абзаца рядом -----------------------------------------------------
   Не ради красоты: во всю ширину эти абзацы дают строку под двести
   знаков. Колонка ставит меру строки сама. */

.ht-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 48px;
  margin-top: 28px;
}

.ht-two p { margin: 0; }

/* --- Строка перечисления --------------------------------------------------
   Не список с маркерами, а компактная строка: это перечисление внутри
   мысли, а не самостоятельные пункты. Идёт во всю ширину — она короткая. */

.ht-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;

  font-size: 15px;
  color: var(--ink-muted);
}

.ht-inline li { display: inline-flex; align-items: center; }
.ht-inline li + li::before { content: "·"; margin: 0 12px; color: var(--border-strong); }

/* --- Нумерованные пункты -------------------------------------------------- */

.ht-num {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.ht-num li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 0 8px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ht-n {
  font-family: var(--fm);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -.03em;
  color: var(--ink-faint);
  line-height: 1.1;
}

/* --- Блок 2: три числа ---------------------------------------------------- */

.ht-three {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px 40px;
  margin-top: 28px;
}

.ht-three-item { border-top: 2px solid var(--ink); padding-top: 14px; }
.ht-three-item h3 { margin: 8px 0 6px; font-size: 19px; }
.ht-three-item p { font-size: 15px !important; line-height: 1.55 !important; color: var(--ink-muted); }

/* --- Где прячется разница -------------------------------------------------
   Лаймовая черта слева — точечный акцент, а не заливка. */

/* Число колонок считает сама раскладка: между сайдбаром и узким экраном
   есть полоса ширин, где три жёстко заданные колонки сжимаются до двухсот
   пикселей — это семнадцать знаков в строке, газетное объявление, а не
   текст. auto-fit переводит их в две, потом в одну. */
.ht-marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px 40px;
}

.ht-mark {
  padding-left: 18px;
  border-left: 2px solid var(--lime);
  font-size: 17px;
  line-height: 1.6;
}

.ht-mark b { font-weight: 500; }

/* --- До оплаты проверьте --------------------------------------------------- */

.ht-check {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ht-check li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-top: 1px solid var(--border);
  font-size: 16px;
}

.ht-check li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 0;
  width: 14px;
  height: 2px;
  background: var(--lime);
}

/* --- На что можно не смотреть ---------------------------------------------
   Блок-опровержение: должен читаться иначе, чем рекомендации выше.
   Отличие даёт фон и приглушённый текст, рамки нет. */

.ht-not {
  margin-top: 36px;
  padding: 24px 28px;
  border-radius: var(--r-md);
  background: var(--surface);
}

.ht-not h3 { margin-bottom: 14px; font-size: 19px; }

.ht-not-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px 40px;
}

.ht-not p { margin: 0; font-size: 15px !important; line-height: 1.6 !important; color: var(--ink-muted); }
.ht-not b { font-weight: 500; color: var(--ink); }

/* Четыре коротких пункта в ряд перестают помещаться раньше остальных:
   у последнего подпись в четыре слова. */
@media (width <= 1200px) {
  .ht-check { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width <= 900px) {
  .ht-vs,
  .ht-two,
  .ht-num,
  .ht-three,
  .ht-marks,
  .ht-check,
  .ht-not-items { grid-template-columns: 1fr; }

  .ht-vs { gap: 24px; }
  .ht-vs-col:first-child { padding-right: 0; }
  .ht-vs-col + .ht-vs-col { padding-left: 0; border-left: none; }

  .ht-two { gap: 20px; }
  .ht-three { gap: 18px; }
  .ht-marks { gap: 18px; }
  .ht-not-items { gap: 12px; }

  .ht-num li { grid-template-columns: 48px minmax(0, 1fr); }
  .ht-num li + li { border-top: none; }
  .ht-n { font-size: 22px; }

  .ht-lead { font-size: 18px !important; }
  .ht-not { padding: 20px; }
}

/* ===========================================================================
   Знак бренда рядом с текстовым логотипом (сайдбар, топбар)
   =========================================================================== */

.sb-logo,
.tb-logo { display: inline-flex; align-items: center; gap: 8px; }

.sb-mark,
.tb-mark { flex: none; width: auto; }

.sb-mark { height: 17px; }
.tb-mark { height: 15px; }

/* ===========================================================================
   Текстовые блоки раздела /vps/

   Вёрстка по docs/vps-blocks-mockup.html. Цвета, шрифты и радиусы взяты
   из токенов сайта; из макета не перенесён ни один литерал, кроме одного
   ниже — ему не нашлось аналога.

   Префикс vb-: имена .steps, .prose, .note и .legend в site.css уже
   заняты другими компонентами, и совпадение развалило бы обе стороны.
   =========================================================================== */

:root {
  /* Кромка лайма: граница шкалы и полоса у оговорки. --lime-hover
     не подходит — это состояние наведения, у него другая роль,
     и подгонять его под границу значит связать несвязанное. */
  --lime-edge: #c8e02f;
}

/* Отступы и разделитель между блоками даёт общее правило для section
   из site.css: 56px сверху и снизу плюс волосяная линия. Так эти два
   блока стоят в одном ритме с каталогом, таблицей и вопросами, а не
   живут по своим правилам посреди страницы. */
.vb h2 { margin-bottom: 20px; }

.vb-lead {
  margin: 0;
  max-width: 60ch;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* --- Шаги ----------------------------------------------------------------- */

.vb-steps {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.vb-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 280px) minmax(0, 1fr);
  gap: 32px;
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
}

.vb-num { font-family: var(--fm); font-size: 14px; color: var(--ink-muted); padding-top: 5px; }
.vb-step h3 { margin: 0; font-size: 22px; line-height: 1.3; }
.vb-body { max-width: 62ch; }
.vb-body > * + * { margin-top: 20px; }
.vb-hint { font-size: 14px; color: var(--ink-muted); }

/* Тройка чисел конфигурации */
.vb-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.vb-specs div { padding: 18px 20px; }
.vb-specs div + div { border-left: 1px solid var(--border); }
.vb-specs b { display: block; font-family: var(--fm); font-weight: 500; font-size: 34px; line-height: 1; }
.vb-specs span { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-muted); }

/* Что оплачивается сверху */
.vb-extras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.vb-extras li {
  padding: 6px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  font-size: 15px;
}

/* Периоды, за которые называют цену */
.vb-units { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }

.vb-units li {
  font-family: var(--fm);
  font-size: 14px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-muted);
}

/* Основа сравнения раздела. Какой именно период подсвечен, решает
   ServiceType, а не вёрстка. */
.vb-units li.is-base { background: var(--lime); color: var(--ink); }

/* Пара определений */
.vb-terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0;
}

.vb-terms div { background: var(--white); padding: 18px 20px; }
.vb-terms dt { font-family: var(--fm); font-weight: 500; font-size: 15px; margin-bottom: 6px; }
.vb-terms dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* --- Шкала частоты -------------------------------------------------------- */

.vb-scale {
  margin: 56px 0 0;
  padding: 32px 32px 28px;
  background: var(--surface);
  border-radius: var(--r-lg);
}

.vb-track { position: relative; height: 88px; }

.vb-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  height: 14px;
  border-radius: 3px;
  background: var(--white);
  border: 1px solid var(--border);
}

/* Разброс заявленных частот: от минимума раздела до правого края. */
.vb-range {
  position: absolute;
  right: 0;
  top: 40px;
  height: 14px;
  background: var(--border-strong);
  border-radius: 3px;
}

/* С какой частоты разница перестаёт быть заметной обычному сайту. */
.vb-band {
  position: absolute;
  right: 0;
  top: 40px;
  height: 14px;
  background: var(--lime);
  border-radius: 0 3px 3px 0;
  box-shadow: inset 0 0 0 1px var(--lime-edge);
}

.vb-mark {
  position: absolute;
  top: 0;
  font-family: var(--fm);
  font-size: 15px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.vb-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 26px;
  width: 1px;
  height: 12px;
  background: var(--ink);
}

.vb-mark.is-end { transform: translateX(-100%); }
.vb-mark.is-end::after { left: auto; right: 0; }

.vb-ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  display: flex;
  justify-content: space-between;
  font-family: var(--fm);
  font-size: 13px;
  color: var(--ink-muted);
}

.vb-legend { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 12px; font-size: 15px; }

.vb-legend span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: -1px;
  background: var(--border-strong);
}

.vb-legend span.is-lime::before { background: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-edge); }

/* --- Пара терминов, проза, оговорка --------------------------------------- */

.vb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; max-width: 760px; }
.vb-pair div { border-top: 2px solid var(--ink); padding-top: 16px; }
.vb-pair p { margin: 0; }
.vb-term { font-family: var(--fd); font-weight: 500; font-size: 20px; margin-bottom: 4px !important; }
.vb-pair p:not(.vb-term) { color: var(--ink-muted); }

.vb-prose { max-width: 62ch; margin-top: 40px; }
.vb-prose p { margin: 0; }
.vb-prose p + p { margin-top: 16px; }

.vb-note {
  max-width: 760px;
  margin: 40px 0 0;
  padding: 20px 24px;
  background: var(--surface);
  border-left: 3px solid var(--lime-edge);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 16px;
}

@media (width <= 760px) {
  .vb-lead { font-size: 18px; }
  .vb-step { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .vb-specs b { font-size: 26px; }
  .vb-specs div { padding: 14px; }
  .vb-terms, .vb-pair { grid-template-columns: 1fr; }
  .vb-scale { padding: 24px 16px 20px; }
}

/* --- Оговорка в подвале --------------------------------------------------- */
/*
   Независимость, партнёрские ссылки, «учётных данных не спрашиваем».
   Стояла полосой над содержимым — убрана как слишком тяжёлая, текст
   целиком переехал сюда. Подробности в templates/partials/disclosure.php.

   Наследует размер и цвет подвала, своих токенов не вводит.
*/

.disclosure {
  max-width: var(--narrow);
  margin-bottom: 14px;
}

.disclosure p + p { margin-top: 6px; }
.disclosure b { color: var(--ink-muted); font-weight: 500; }