/* Дополнения темы neo к вёрстке (main.css — сборка вёрстки, её не правим): заявка, результаты поиска города,
   страница тарифов (шаблон neo/tariffs), страница ТВ (neo/tv), каналов (neo/channels), интернета (neo/internet), проверки адреса
   (neo/proverit-adres). Цвета — палитра main.css */

:root {
  --neo-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  --neo-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  --neo-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.5'/%3E%3C/svg%3E");
}

.neo-form-msg {
  margin-top: 1rem;
  border-radius: 1rem;
  background: rgb(255 241 240);
  padding: .75rem 1rem;
  font-size: .9375rem;
  line-height: 1.4;
  color: rgb(200 27 22);
}
.neo-form-msg.is-ok {
  background: rgb(240 248 253);
  color: rgb(24 27 33);
}
.neo-form-msg[hidden],
.city-list[hidden] {
  display: none;
}
.field.is-invalid {
  border-color: rgb(229 34 28);
}

/* Подвал: другие города региона (над колонками, как блок «Дом.ру в других городах» основного шаблона) — ссылки в строку
   через точку; мессенджеры — круглые кнопки под телефонами */
.footer-cities {
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgb(24 27 33 / .1);
  padding-bottom: 2.5rem;
}
.footer-cities h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: rgb(24 27 33);
}
.footer-cities ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: 1rem;
  font-size: .9375rem;
}
.footer-cities a {
  color: rgb(92 100 112);
  transition: color .15s;
}
.footer-cities a:hover {
  color: rgb(229 34 28);
}
.footer-messengers {
  display: flex;
  gap: .625rem;
  margin-top: 1.25rem;
}
.footer-messengers a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: #fff;
  color: rgb(30 31 51);
  box-shadow: 0 0 0 1px rgb(227 233 239);
  transition: color .15s, box-shadow .15s;
}
.footer-messengers a:hover {
  color: rgb(229 34 28);
  box-shadow: 0 0 0 1px rgb(229 34 28 / .4);
}
.footer-messengers svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* «Населенный пункт не найден…» из template/city-search.php — на всю ширину, без колонок */
.city-list .no-city-result {
  column-span: all;
  padding: .625rem .75rem;
  font-size: .9375rem;
  line-height: 1.4;
  color: rgb(92 100 112);
}

/* Список в форме: своя стрелка вместо системной */
select.field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 3rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1f33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") right 1rem center / 1.125rem no-repeat;
  text-overflow: ellipsis;
}
/* Текущий раздел в меню шапки; у подменю — кнопка раздела (.is-current, header.php) и пункт открытой страницы */
.nav-list a[aria-current="page"],
.nav-list .sub-toggle.is-current {
  color: rgb(200 27 22);
}
.nav-list > li > a[aria-current="page"]::after,
.nav-list > li > .sub-toggle.is-current::after {
  --tw-scale-x: 1;
}

/* Город в выдвижном меню (до 1024px): слева, на уровне кнопки закрытия. Длинное название — в одну строку
   с многоточием, до кнопки закрытия — не меньше .75rem. Открывает то же окно, что кнопка города в шапке (theme.js) */
.nav-top {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .5rem 0 1.25rem;
}
.nav-top .nav-close {
  margin: 0 0 0 auto;
}
.nav-city {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: .25rem;
  border-radius: 9999px;
  background: rgb(245 248 251);
  padding: .375rem .875rem .375rem .625rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: rgb(24 27 33);
  transition: background-color .15s;
}
.nav-city:hover {
  background: rgb(225 240 248);
}
.nav-city svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: rgb(229 34 28);
}
.nav-city span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) {
  .nav-top {
    display: none;
  }
}

/* До 640px закреплённые шапка и строка навигации страницы тарифов ниже: 44 + 36 = 80px вместо 64 + 56.
   Переменные — из main.css: строка шапки (--nav-h), логотип (--logo-h); от --nav-h считаются и прилипание строки
   навигации, и отступ якорей (scroll-padding-top) */
@media (max-width: 639.98px) {
  :root {
    --nav-h: 2.75rem;
    --logo-h: 3.25rem;
  }
  .site-header .cta {
    padding-top: .4375rem;
    padding-bottom: .4375rem;
  }
  .site-header .burger {
    width: 2.5rem;
    height: 2.5rem;
  }
}


/* ===== Шапка: чат-квиз «Помощь в подборе тарифа» (кнопка data-quiz) слева от «Стать клиентом» =====
   Обе кнопки — в .header-actions, она занимает ячейку сетки шапки, где была «Стать клиентом» (main.css: .cta — 2/2, от 1024px — 2/4).
   Квиз — круглая кнопка с иконкой высотой с «Стать клиентом», от 1440px — с подписью (до этого подпись — только для экранных чтецов).
   Чтобы кнопка помещалась: до 360px логотип чуть меньше и у «Стать клиентом» поля уже (до 340px — и шрифт), в 1024–1279px пункты меню
   ближе друг к другу */
.header-actions {
  grid-area: 2 / 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.quiz-open {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 9999px;
  background: rgb(225 240 248);
  color: rgb(30 31 51);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  transition: color .2s, background-color .2s;
}
/* При наведении меняется только фон, текст и иконка — того же цвета (решение пользователя) */
.quiz-open:hover {
  background: rgb(207 230 242);
}
.quiz-open svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}
.quiz-open span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
@media (max-width: 359.98px) {
  :root {
    --logo-h: 2.75rem;
  }
  .site-header .cta {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}
@media (max-width: 339.98px) {
  .site-header .cta { font-size: .75rem; }
}
@media (min-width: 640px) {
  .quiz-open { width: 2.5rem; height: 2.5rem; }
}
@media (min-width: 768px) {
  .quiz-open { width: 2.75rem; height: 2.75rem; }
  .quiz-open svg { width: 1.5rem; height: 1.5rem; }
}
@media (min-width: 1024px) {
  .header-actions { grid-area: 2 / 4; gap: .5rem; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .site-nav .nav-list { column-gap: .75rem; }
}
@media (min-width: 1440px) {
  .quiz-open { width: auto; padding: 0 1.25rem 0 1rem; }
  .quiz-open span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* Окно чат-квиза (.qmodal, theme.js — раздел «Чат-квиз») — как виджет чата: тёмная шапка с иконкой и подписью, полоса прогресса,
   переписка (бот слева, ответы справа), внизу — кнопки ответов или поле телефона / адреса. На телефоне — во весь экран (модальное,
   как все окна), от 640px — немодальное окно справа внизу, выезжает справа; страница под ним доступна */
.qmodal[open] {
  animation: quiz-in .25s ease-out;
}
@keyframes quiz-in {
  0% { opacity: 0; transform: translateX(2rem); }
}
.qmodal .modal-head {
  background: rgb(30 31 51);
  padding-bottom: 1rem;
  color: #fff;
}
.qmodal .modal-close {
  color: #fff;
}
.qmodal .modal-close:hover {
  background: rgba(255, 255, 255, .1);
}
.quiz-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .75rem;
}
.quiz-avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: rgb(229 34 28);
  color: #fff;
}
.quiz-avatar svg {
  width: 1.5rem;
  height: 1.5rem;
}
.qmodal .modal-title {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: 0;
}
.quiz-sub {
  margin-top: .125rem;
  font-size: .8125rem;
  line-height: 1.3;
  color: rgb(170 213 234);
}
.qmodal-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.quiz-progress {
  flex-shrink: 0;
  height: 4px;
  background: rgb(237 242 246);
}
.quiz-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 0 9999px 9999px 0;
  background: rgb(229 34 28);
  transition: width .3s;
}
.quiz-log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
  scrollbar-width: none; /* полосы прокрутки нет (решение пользователя): листается колесом, пальцем и сама к новым сообщениям */
}
.quiz-log::-webkit-scrollbar {
  display: none;
}
.quiz-msg {
  max-width: 85%;
  border-radius: 1.25rem 1.25rem 1.25rem .375rem;
  background: rgb(245 248 251);
  padding: .75rem 1rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: rgb(24 27 33);
}
/* Новое сообщение появляется: вопрос — слева, ответ — справа; кнопки ответов — снизу */
.quiz-msg {
  animation: quiz-msg-in .3s ease-out;
}
.quiz-msg--me {
  animation-name: quiz-msg-me-in;
}
.quiz-choices,
.quiz-input,
.quiz-done {
  animation: quiz-foot-in .25s ease-out;
}
@keyframes quiz-msg-in {
  0% { opacity: 0; transform: translate(-.75rem, .375rem); }
}
@keyframes quiz-msg-me-in {
  0% { opacity: 0; transform: translate(.75rem, .375rem); }
}
@keyframes quiz-foot-in {
  0% { opacity: 0; transform: translateY(.5rem); }
}
.quiz-msg--me {
  align-self: flex-end;
  border-radius: 1.25rem 1.25rem .375rem 1.25rem;
  background: rgb(30 31 51);
  color: #fff;
  overflow-wrap: anywhere;
}
.quiz-msg--error {
  background: rgb(255 241 240);
  color: rgb(200 27 22);
}
/* «Печатает…» — три точки */
.quiz-typing {
  display: flex;
  gap: .25rem;
  padding: 1rem 1.125rem;
}
.quiz-typing span {
  width: .4375rem;
  height: .4375rem;
  border-radius: 9999px;
  background: rgb(150 160 172);
  animation: quiz-dot 1s infinite ease-in-out;
}
.quiz-typing span:nth-child(2) { animation-delay: .15s; }
.quiz-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes quiz-dot {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-typing span,
  .quiz-msg,
  .quiz-choices,
  .quiz-input,
  .quiz-done { animation: none; }
  .quiz-progress span { transition: none; }
}
.quiz-foot {
  flex-shrink: 0;
  border-top: 1px solid rgb(227 233 239);
  padding: .875rem 1.25rem max(.875rem, env(safe-area-inset-bottom));
}
.quiz-foot:empty {
  display: none;
}
.quiz-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}
.quiz-choice {
  border: 2px solid rgb(227 233 239);
  border-radius: 9999px;
  background: #fff;
  padding: .5rem 1rem;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: rgb(30 31 51);
  transition: border-color .15s, color .15s;
}
.quiz-choice:hover {
  border-color: rgb(229 34 28);
  color: rgb(229 34 28);
}
.quiz-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: center;
}
.quiz-send {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background: rgb(229 34 28);
  color: #fff;
  transition: background-color .15s;
}
.quiz-send:hover {
  background: rgb(200 27 22);
}
.quiz-send svg {
  width: 1.375rem;
  height: 1.375rem;
}
.quiz-error {
  grid-column: 1 / -1;
  font-size: .8125rem;
  line-height: 1.4;
  color: rgb(200 27 22);
}
.quiz-error[hidden] {
  display: none;
}
.quiz-done {
  width: 100%;
}
/* На телефоне — во весь экран от верха: при экранной клавиатуре theme.js (quizFit) задаёт top и height по видимой области */
@media (max-width: 639.98px) {
  .qmodal { inset: 0 0 auto; margin: 0; }
}
@media (min-width: 640px) {
  .qmodal {
    position: fixed;
    inset: auto 1.5rem 1.5rem auto;
    z-index: 60;
    margin: 0;
    width: 24rem;
    max-width: calc(100% - 3rem);
    height: min(40rem, calc(100% - 3rem));
    border-radius: 1.5rem;
    box-shadow: 0 0 0 1px rgb(227 233 239), 0 24px 56px -12px rgba(24, 27, 33, .35);
  }
  .qmodal .modal-head { padding: 1rem .75rem 1rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qmodal[open] { animation: none; }
}

/* ===== Главная города (neo/gorod) ===== */

/* Стоимость подключения (#cost) — коротко, плашкой .note вёрстки: подробные цены — на странице тарифов.
   Ссылка — под текстом, от 1024px — справа от него */
.cost-short {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1rem;
}
.cost-short .link-pill {
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .cost-short {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .cost-short > svg {
    top: 50%;
    transform: translateY(-50%);
  }
}


/* ===== Страница тарифов (neo/tariffs) ===== */

/* Якоря: под шапкой закреплена ещё и строка навигации по разделам (страницы тарифов и ТВ) */
:is(.tariffs-page, .tv-page) [id] {
  scroll-margin-top: 4rem;
}

/* Заголовки в несколько строк: в main.css от 1024px шрифт .h2 крупнее межстрочного интервала */
:is(.tariffs-page, .tv-page) .h2 {
  line-height: 1.1;
}

/* Ссылки в тексте — как .inline-link вёрстки */
:is(.tariffs-page, .tv-page) :is(.lead, .section-more, .tips, .answer, .text, .card, .steps) a:not(.btn) {
  font-weight: 600;
  color: rgb(30 31 51);
  text-decoration: underline;
  text-decoration-color: #ff312c;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .15s;
}
:is(.tariffs-page, .tv-page) :is(.lead, .section-more, .tips, .answer, .text, .card, .steps) a:not(.btn):hover {
  color: rgb(229 34 28);
}

/* Хлебные крошки */
.crumbs {
  margin-top: 1.25rem;
  font-size: .875rem;
  line-height: 1.25rem;
  color: rgb(92 100 112);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .625rem;
}
.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
}
.crumbs li + li::before {
  content: "";
  width: .375rem;
  height: .375rem;
  border-top: 1.5px solid;
  border-right: 1.5px solid;
  transform: rotate(45deg);
  opacity: .5;
}
.crumbs a {
  font-weight: 500;
  color: rgb(30 31 51);
  text-decoration: none;
  transition: color .15s;
}
.crumbs a:hover {
  color: rgb(229 34 28);
}

/* Первый экран (и у страницы ТВ — те же классы). Блок не создаёт своей коробки: строка .chips внутри него закрепляется на всю длину страницы */
.tariffs-head {
  display: contents;
}
.tariffs-head h1 {
  margin-top: .75rem;
  max-width: 20ch;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.tariffs-head .lead {
  max-width: 72ch;
  color: rgb(24 27 33);
}
/* Дата проверки цен — мелкая серая строка в конце последнего раздела с тарифами (#tv) */
.updated {
  margin-top: .75rem;
  font-size: .875rem;
  line-height: 1.5;
  color: rgb(92 100 112);
}
.tariffs-page .on-dark .updated {
  color: rgba(255, 255, 255, .6);
}

/* Навигация по линейкам: одна строка с прокруткой, закреплена под шапкой. Фон — до краёв окна
   (border-image не расширяет страницу), линия снизу — когда строка закреплена (.is-stuck, theme.js) */
.chips {
  position: sticky;
  top: var(--nav-h);
  z-index: 30;
  margin: 1.5rem -1rem 0;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: .625rem 1rem;
  border-image: linear-gradient(hsla(0, 0%, 100%, .94), hsla(0, 0%, 100%, .94)) fill 0 / 0 / 0 100vmax;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chips.is-stuck {
  border-image-source: linear-gradient(to top, rgb(227 233 239) 1px, hsla(0, 0%, 100%, .94) 1px);
}
.chips li {
  flex: none;
}
.chips a {
  display: block;
  border: 2px solid rgb(227 233 239);
  border-radius: 9999px;
  background: #fff;
  padding: .375rem .875rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
  color: rgb(30 31 51);
  text-decoration: none;
  transition: color .15s, background-color .15s, border-color .15s;
}
.chips a:hover {
  border-color: rgb(170 213 234);
}
.chips a[aria-current] {
  border-color: rgb(30 31 51);
  background: rgb(30 31 51);
  color: #fff;
}
/* До 640px строка ниже: 36px вместо 56px (вместе с шапкой — 80px). Якорь — на 24px ниже строки, как шире */
@media (max-width: 639.98px) {
  .chips {
    padding-top: .25rem;
    padding-bottom: .25rem;
  }
  .chips a {
    padding: .25rem .75rem;
    font-size: .8125rem;
    line-height: 1rem;
  }
  :is(.tariffs-page, .tv-page) [id] {
    scroll-margin-top: 2.75rem;
  }
}
.tariffs-head + .section {
  margin-top: 3rem;
}

/* Подзаголовки блоков и строки «подробнее» под блоком */
.block-title {
  margin-top: 2.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.section-more {
  margin-top: 1.5rem;
  max-width: 68ch;
  font-size: .9375rem;
  line-height: 1.625;
  color: rgb(92 100 112);
}

/* Карточки тарифов: цветная шапка по линейке (как лента тарифов главной города), цена, состав, кнопка.
   Линейка — класс сетки (.plans--sky …) или самой карточки (.plan--sky …: страница частного дома, где линейки в одной сетке) */
.plans {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.plan {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(227 233 239);
  border-radius: 1.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 27, 33, .04), 0 8px 24px -12px rgba(24, 27, 33, .12);
  color: rgb(24 27 33); /* и на тёмной панели игровых тарифов */
  transition: box-shadow .2s;
}
.plan:target {
  box-shadow: 0 0 0 4px rgb(170 213 234), 0 18px 40px -16px rgba(24, 27, 33, .22);
}
.plan-head {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.25rem 1.375rem;
}
.plan-head h3 {
  position: relative;
  padding-right: 2rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.plan-head .speed {
  position: relative;
  margin-top: .875rem;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}
.plan-head .speed small {
  margin-left: .125rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
.plan-head .plan-deco {
  top: auto;
  right: -1.75rem;
  bottom: -2.25rem;
  width: 7.5rem;
  height: 7.5rem;
  opacity: .22;
}
:is(.plans--sky, .plan--sky) .plan-head {
  background: linear-gradient(135deg, #8cc3dd, #cfe6f2);
  color: rgb(30 31 51);
}
:is(.plans--navy, .plan--navy) .plan-head {
  background: linear-gradient(135deg, #1e1f33, #3a3d5c);
  color: #fff;
}
:is(.plans--rose, .plan--rose) .plan-head {
  background: linear-gradient(135deg, #f2a5a0, #ffe0de);
  color: rgb(30 31 51);
}
:is(.plans--light, .plan--light) .plan-head {
  background: linear-gradient(160deg, #f0f7fb, #cfe6f2);
  color: rgb(30 31 51);
}
:is(.plans--light, .plan--light) .plan-deco {
  opacity: .7;
}
/* Игровые линейки: тёмная шапка с сотами (как «Тарифы с играми» на dom.ru), текст светлый; фигуры в углу нет.
   «Леста» — синие соты, светятся в правом верхнем углу; Warface — те же соты (гаснут маской в SVG) на сине-оранжевом градиенте */
:is(.plans--game, .plan--game) .plan-head {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
:is(.plans--game, .plan--game) .plan-head .speed small {
  color: rgba(255, 255, 255, .75);
}
:is(.plans--game-lesta, .plan--game-lesta) .plan-head {
  background:
    radial-gradient(85% 130% at 88% 10%, rgba(6, 9, 20, 0) 0%, rgba(6, 9, 20, .55) 45%, rgba(6, 9, 20, .95) 85%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48' fill='none' stroke='%235fb4e6' stroke-width='1.2'%3E%3Cpath d='M13.856 0L27.713 8V24L13.856 32L0 24V8ZM13.856 32V48'/%3E%3C/svg%3E") 0 0 / 27.713px 48px,
    radial-gradient(70% 100% at 88% 10%, rgba(56, 150, 230, .6), transparent 70%),
    #090d1b;
}
:is(.plans--game-wf, .plan--game-wf) .plan-head {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='220' viewBox='0 0 640 220'%3E%3Cdefs%3E%3Cpattern id='h' width='27.713' height='48' patternUnits='userSpaceOnUse'%3E%3Cpath d='M13.856 0L27.713 8V24L13.856 32L0 24V8ZM13.856 32V48' fill='none' stroke='%235fb4e6' stroke-width='1.2'/%3E%3C/pattern%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='330' gradientTransform='translate(595 12) scale(1 .5)'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='.45'/%3E%3Cstop offset='.85' stop-color='%23fff' stop-opacity='.06'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='640' height='220' fill='url(%23g)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='640' height='220' fill='url(%23h)' mask='url(%23m)'/%3E%3C/svg%3E") right top / 640px 220px no-repeat,
    radial-gradient(120% 110% at 0% 100%, rgba(255, 106, 26, .85) 0%, rgba(229, 34, 28, .35) 38%, transparent 68%),
    linear-gradient(120deg, #2a2150 0%, #15307a 55%, #0d1a45 100%);
}
.plan .price {
  margin: 1.25rem 1.25rem 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.plan .price small {
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: rgb(92 100 112);
}
.plan .after {
  margin: .625rem 1.25rem 0;
  width: fit-content;
  border-radius: 9999px;
  background: rgb(245 248 251);
  padding: .25rem .75rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: rgb(30 31 51);
}
.plan ul {
  margin: 1.25rem 1.25rem 1.5rem;
  display: grid;
  gap: .625rem;
  border-top: 1px solid rgb(227 233 239);
  padding-top: 1.25rem;
  font-size: .9375rem;
  line-height: 1.375;
}
.plan li,
.bonus-list li {
  position: relative;
  padding-left: 1.875rem;
}
.plan li::before,
.bonus-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: rgb(79 143 176);
  -webkit-mask: var(--neo-i-check) center / contain no-repeat;
  mask: var(--neo-i-check) center / contain no-repeat;
}
/* Подписки тарифа (ikonki_servisov): подпись и логотипы сервисов под списком */
.plan-subs {
  margin: -.25rem 1.25rem 1.5rem;
  border-radius: 1rem;
  background: rgb(245 248 251);
  padding: .75rem .875rem .875rem;
}
.plan-subs p {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: rgb(92 100 112);
}
.plan-logos,
.tinfo-logos {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.plan-subs p + .plan-logos {
  margin-top: .375rem;
}
.plan-logos img,
.tinfo-logos img {
  height: 1.5625rem;
  width: auto;
  overflow: hidden;
  border-radius: .4375rem;
}
/* Низ карточки: «Подключить» и круглая кнопка «Подробнее» (i) */
.plan-actions {
  margin: auto 1.25rem 1.25rem;
  display: flex;
  gap: .5rem;
}
.plan-actions .btn {
  flex: 1 1 auto;
}
.plan-info {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  background: rgb(225 240 248);
  color: rgb(30 31 51);
  transition: background-color .15s, color .15s;
}
.plan-info:hover {
  background: rgb(170 213 234);
}
.plan-info svg {
  width: 1.375rem;
  height: 1.375rem;
}

/* Таблицы: прокрутка внутри рамки, тени у краёв показывают, что таблица продолжается */
.tbl-scroll {
  margin-top: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid rgb(227 233 239);
  border-radius: 1.25rem;
  background:
    linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 2.5rem 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(24, 27, 33, .16), transparent) left center / .875rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(24, 27, 33, .16), transparent) right center / .875rem 100% no-repeat scroll,
    #fff;
}
.block-title + .tbl-scroll {
  margin-top: 1rem;
}
.tbl {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
  font-size: .9375rem;
  line-height: 1.4;
}
.tbl--narrow {
  min-width: 30rem;
}
.tbl--wide {
  min-width: 50rem;
}
.tbl th {
  background: rgb(245 248 251);
  padding: .75rem 1rem;
  vertical-align: bottom;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: rgb(92 100 112);
}
.tbl td {
  border-top: 1px solid rgb(227 233 239);
  padding: .875rem 1rem;
  vertical-align: top;
  color: rgb(92 100 112);
}
.tbl :is(th, td):first-child {
  padding-left: 1.25rem;
}
.tbl :is(th, td):last-child {
  padding-right: 1.25rem;
}
.tbl td:first-child,
.tbl td.num {
  color: rgb(24 27 33);
}
.tbl td:first-child {
  font-weight: 600;
}
.tbl td.num {
  white-space: nowrap;
  font-weight: 700;
}
.tbl tbody tr {
  transition: background-color .15s;
}
.tbl tbody tr:hover {
  background: rgb(240 247 251);
}
.tbl tr:target {
  background: rgb(225 240 248);
}
.tbl a {
  font-weight: 700;
  color: rgb(30 31 51);
  text-decoration: underline;
  text-decoration-color: rgb(170 213 234);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.tbl a:hover {
  color: rgb(229 34 28);
  text-decoration-color: currentColor;
}

/* Игровые тарифы — тёмная панель, линейки — полупрозрачные блоки с таблицами */
.gaming {
  position: relative;
  overflow: hidden;
  background: rgb(30 31 51);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  color: #fff;
}
.gaming .lead {
  color: rgb(207 230 242);
}
.game-line {
  margin-top: 2rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  padding: 1.25rem;
}
.game-line + .game-line {
  margin-top: 1.25rem;
}
.game-line .block-title {
  margin-top: 0;
}
.game-line .plans {
  margin-top: 1.5rem;
}
.game-line .plan {
  border-color: transparent;
}
.bonus-list {
  margin-top: 1rem;
  display: grid;
  gap: .625rem 2rem;
  font-size: .9375rem;
  line-height: 1.45;
}
.on-dark .bonus-list li {
  color: rgba(255, 255, 255, .88);
}
.on-dark .bonus-list li::before {
  background: rgb(170 213 234);
}

/* «Как платить меньше» — карточки с номерами (цвета номеров — как у шагов подключения на главной) */
.tips {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
  counter-reset: tip;
}
.tips li {
  counter-increment: tip;
  position: relative;
  border-radius: 1.5rem;
  background: #fff;
  padding: 1.25rem 1.25rem 1.375rem 4.25rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: rgb(92 100 112);
  box-shadow: 0 1px 2px rgba(24, 27, 33, .04), 0 8px 24px -12px rgba(24, 27, 33, .12);
}
.tips li::before {
  content: counter(tip);
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 800;
}
.tips li:nth-child(3n+1)::before {
  background: rgb(229 34 28);
  color: #fff;
}
.tips li:nth-child(3n+2)::before {
  background: rgb(170 213 234);
  color: rgb(30 31 51);
}
.tips li:nth-child(3n)::before {
  background: rgb(30 31 51);
  color: #fff;
}
.tips strong {
  display: block;
  margin-bottom: .375rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: rgb(24 27 33);
}

/* Стоимость подключения: «Работы» и «Оборудование» рядом от 1024px.
   minmax(0, …) — иначе колонка растягивается по ширине таблицы и страница уезжает вбок */
.cost-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 1.25rem;
}

/* Заявка на тёмном фоне */
.tariffs-page .on-dark .section-more {
  margin-top: 1.25rem;
  color: rgb(207 230 242);
}
.tariffs-page .on-dark .section-more a {
  color: #fff;
}
.tariffs-page .on-dark .section-more a:hover {
  color: rgb(170 213 234);
}

/* Первый экран: текст слева, иллюстрация справа (от 1024px) — картинка карточки «Все тарифы» главной на светлом круге с фигурами */
.tariffs-intro {
  display: grid;
  align-items: center;
  gap: 2rem;
}
.tariffs-art {
  position: relative;
  display: none;
  aspect-ratio: 1;
}
.tariffs-art::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0, rgb(240 247 251) 40%, rgb(207 230 242) 100%);
}
.tariffs-art .deck-art {
  position: relative;
  display: block;
  margin: 0;
}
.tariffs-art .deck-art svg {
  width: 100%;
  height: auto;
  margin: 0;
}
.tariffs-art-shape {
  position: absolute;
}
.tariffs-art-shape--drop {
  left: 1%;
  top: 6%;
  width: 17%;
  height: 17%;
  transform: rotate(-12deg);
}
.tariffs-art-shape--sq {
  right: 3%;
  top: 16%;
  width: 13%;
  height: 13%;
  transform: rotate(10deg);
}
.tariffs-art-shape--tri {
  right: 12%;
  bottom: 5%;
  width: 12%;
  height: 12%;
  opacity: .12;
  transform: rotate(-8deg);
}
@media (prefers-reduced-motion: no-preference) {
  .tariffs-art .deck-art svg {
    animation: neo-float 6s ease-in-out infinite;
  }
}
@keyframes neo-float {
  50% { transform: translateY(-8px); }
}
/* До 1024px: заголовок и лид — в светлой плашке, иллюстрация выглядывает из её нижнего правого угла
   (вариант В4 из шести, выбор пользователя 06.10.2026) */
@media (max-width: 1023.98px) {
  .tariffs-intro {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    border-radius: 1.75rem;
    padding: 1.25rem 1.25rem 4.25rem;
    background:
      radial-gradient(120% 90% at 100% 100%, #ffe0de 0, rgba(255, 224, 222, 0) 55%),
      linear-gradient(160deg, #f0f7fb 0%, #dcedf6 100%);
  }
  .tariffs-intro > div:not(.tariffs-art) {
    position: relative;
    z-index: 1;
  }
  .tariffs-head .tariffs-intro h1 {
    margin-top: 0;
  }
  .tariffs-art {
    display: block;
    position: absolute;
    z-index: 0;
    right: -1.5rem;
    bottom: -3.25rem;
    width: 9.5rem;
    pointer-events: none;
  }
  .tariffs-art::before,
  .tariffs-art-shape--sq {
    display: none;
  }
  .tariffs-art-shape--drop {
    left: -22%;
    top: 18%;
  }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .tariffs-intro {
    padding: 2rem 13rem 2rem 2rem;
  }
  .tariffs-art {
    right: -1rem;
    bottom: -2.5rem;
    width: 14rem;
  }
  .tariffs-art-shape--drop {
    left: 2%;
    top: 2%;
  }
}

/* Список тарифов в заявке: своя кнопка и выпадающий список вместо системного (theme.js, neoSelect).
   Сам <select> остаётся в форме и хранит значение */
.tselect {
  position: relative;
}
.tselect > select {
  display: none;
}
.tselect-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  text-align: left;
}
.tselect-btn[aria-expanded="true"] {
  border-color: rgb(30 31 51);
}
.tselect-value {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.tselect-value b {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tselect-value span {
  flex-shrink: 0;
  font-size: .875rem;
  color: rgb(92 100 112);
}
.tselect-value.is-empty b {
  font-weight: 400;
}
.tselect-chev {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  background: rgb(30 31 51);
  -webkit-mask: var(--neo-i-chevron) center / contain no-repeat;
  mask: var(--neo-i-chevron) center / contain no-repeat;
  transition: transform .2s;
}
.tselect-btn[aria-expanded="true"] .tselect-chev {
  transform: rotate(180deg);
}
.tselect-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .375rem);
  z-index: 40;
  max-height: min(22rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgb(227 233 239);
  border-radius: 1.25rem;
  background: #fff;
  padding: .375rem;
  box-shadow: 0 2px 4px rgba(24, 27, 33, .05), 0 18px 40px -16px rgba(24, 27, 33, .3);
}
.tselect-pop.is-up {
  top: auto;
  bottom: calc(100% + .375rem);
}
.tselect-pop[hidden] {
  display: none;
}
.tselect-list:focus {
  outline: none;
}
.tselect-group {
  padding: .75rem .75rem .25rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: rgb(92 100 112);
}
.tselect-opt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: .75rem;
  border-radius: .875rem;
  padding: .625rem .75rem .625rem 2.25rem;
  cursor: pointer;
  font-size: .9375rem;
  line-height: 1.3;
  color: rgb(24 27 33);
}
.tselect-opt b {
  font-weight: 600;
}
.tselect-price {
  font-weight: 700;
  white-space: nowrap;
}
.tselect-opt small {
  grid-column: 1 / -1;
  margin-top: .125rem;
  font-size: .8125rem;
  color: rgb(92 100 112);
}
.tselect-opt small em {
  font-style: normal;
  font-weight: 600;
  color: rgb(200 27 22);
}
.tselect-opt.is-active {
  background: rgb(245 248 251);
}
.tselect-opt[aria-selected="true"] {
  background: rgb(240 247 251);
}
.tselect-opt[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: .75rem;
  top: .75rem;
  width: 1rem;
  height: 1rem;
  background: rgb(79 143 176);
  -webkit-mask: var(--neo-i-tick) center / contain no-repeat;
  mask: var(--neo-i-tick) center / contain no-repeat;
}

/* Окна страницы тарифов (<dialog class="modal"> вёрстки): «Подробнее» о тарифе, заявка, сертифицированные роутеры, проверка адреса,
   «Стать клиентом» (.cmodal — копия заявки из #request) */
.tmodal-body,
.rmodal-body,
.amodal-body,
.cmodal-body,
.routers-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 1.5rem;
}
.tmodal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgb(227 233 239);
  padding: .875rem 1.25rem max(.875rem, env(safe-area-inset-bottom));
}
.tmodal-sum {
  font-weight: 700;
  line-height: 1.3;
}
.rmodal-lead,
.rlist-lead {
  margin-bottom: 1.25rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: rgb(92 100 112);
}
.rmodal .neo-form,
.cmodal .neo-form {
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* «Подробнее» о тарифе: цена, характеристики, сервисы, роутер и оборудование (по образцу окна основного шаблона) */
.tinfo-price {
  position: relative;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgb(240 247 251), rgb(225 240 248));
  padding: 1.25rem 1.25rem 1.375rem;
}
.tinfo-kind {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgb(79 143 176);
}
.tinfo-now {
  margin-top: .5rem;
  color: rgb(92 100 112);
}
.tinfo-now strong {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: rgb(24 27 33);
}
.tinfo-then {
  margin-top: .625rem;
  width: fit-content;
  border-radius: 9999px;
  background: #fff;
  padding: .25rem .75rem;
  font-size: .875rem;
  font-weight: 600;
  color: rgb(30 31 51);
}
.tinfo-cond {
  margin-top: .75rem;
  font-size: .875rem;
}
.tinfo-attrs {
  margin-top: 1.25rem;
}
.tinfo-attr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  border-bottom: 1px solid rgb(227 233 239);
  padding: 1rem 0;
}
.tinfo-attr dt,
.tinfo-val {
  font-size: 1.0625rem;
  line-height: 1.35;
}
.tinfo-attr dt {
  font-weight: 700;
}
.tinfo-val {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
  text-align: right;
  font-weight: 800;
}
.tinfo-desc {
  grid-column: 1 / -1;
  margin-top: .375rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: rgb(92 100 112);
}
.tinfo-desc a {
  font-weight: 600;
  color: rgb(30 31 51);
  text-decoration: underline;
  text-decoration-color: #ff312c;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.tinfo-desc a:hover {
  color: rgb(229 34 28);
}
.tinfo-block {
  margin-top: 1.75rem;
}
.tinfo-block h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.tinfo-block > p {
  margin-top: .375rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: rgb(92 100 112);
}
.tinfo-services,
.tinfo-equip {
  margin-top: 1rem;
  display: grid;
  gap: .625rem;
}
.tinfo-services {
  counter-reset: svc;
}
.tinfo-services li {
  counter-increment: svc;
  position: relative;
  border-radius: 1rem;
  background: rgb(245 248 251);
  padding: .875rem 1rem .875rem 3.25rem;
  font-size: .9375rem;
  line-height: 1.45;
}
.tinfo-services li::before {
  content: counter(svc);
  position: absolute;
  left: 1rem;
  top: .8125rem;
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 9999px;
  background: rgb(30 31 51);
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
}
/* Значки сервиса (из servicy_v_tarife) — над его текстом */
.tinfo-logos {
  margin-bottom: .5rem;
}
.tinfo-logos img {
  height: 2.5rem;
}
.tinfo-services li:has(> .tinfo-logos)::before {
  top: 1.375rem; /* номер — по центру строки значков */
}
/* Модель оборудования: картинка, название и характеристики, цена */
.tinfo-equip li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .875rem;
  border: 1px solid rgb(227 233 239);
  border-radius: 1rem;
  padding: .75rem 1rem .75rem .75rem;
}
.tinfo-equip img {
  grid-row: 1 / span 2;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  object-fit: contain;
  color: transparent; /* картинка не загрузилась — без текста alt поверх карточки */
}
.tinfo-equip strong {
  grid-column: 2;
  align-self: end;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
}
.tinfo-equip span {
  grid-column: 2;
  align-self: start;
  font-size: .8125rem;
  line-height: 1.4;
  color: rgb(92 100 112);
}
.tinfo-equip b {
  grid-column: 3;
  grid-row: 1 / span 2;
  white-space: nowrap;
  font-weight: 800;
}

/* Окно, пока грузится содержимое, и ошибка загрузки */
.modal-state {
  padding: 2rem 0;
  text-align: center;
  font-size: .9375rem;
  color: rgb(92 100 112);
}
.modal-state.is-error {
  color: rgb(200 27 22);
}
.tmodal-foot[hidden] {
  display: none;
}
.tinfo-routers {
  margin-top: .875rem;
  border-radius: 1rem;
  background: rgb(245 248 251);
}
.tinfo-routers summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 1rem;
  font-weight: 600;
}
.tinfo-routers summary::-webkit-details-marker {
  display: none;
}
.tinfo-routers summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background: rgb(30 31 51);
  -webkit-mask: var(--neo-i-chevron) center / contain no-repeat;
  mask: var(--neo-i-chevron) center / contain no-repeat;
  transition: transform .2s;
}
.tinfo-routers[open] summary::after {
  transform: rotate(180deg);
}
.tinfo-routers .routers {
  padding: 0 1rem;
}
.tinfo-routers .routers-note {
  padding: .875rem 1rem 1rem;
}

/* Список сертифицированных роутеров (parts/routers.php): в «Подробнее» — под спойлером, в своём окне — карточками */
.routers {
  display: grid;
  gap: .75rem 1.5rem;
  font-size: .875rem;
  line-height: 1.45;
}
.routers dt {
  font-weight: 700;
}
.routers dd {
  color: rgb(92 100 112);
}
.routers-note {
  font-size: .8125rem;
  line-height: 1.45;
  color: rgb(92 100 112);
}
.rlist .routers {
  gap: .625rem;
  font-size: .9375rem;
}
.rlist .routers > div {
  border-radius: 1rem;
  background: rgb(245 248 251);
  padding: .875rem 1rem;
}
.rlist .routers-note {
  margin-top: 1rem;
}

@media (min-width: 420px) {
  .tariffs-head h1 { font-size: 2.25rem; }
}
@media (min-width: 640px) {
  .crumbs { margin-top: 2rem; }
  .tariffs-head h1 { margin-top: 1rem; font-size: 3rem; }
  .chips { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  .tariffs-head + .section { margin-top: 4rem; }
  .block-title { margin-top: 3rem; font-size: 1.5rem; }
  .plans { margin-top: 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .plan-head { padding: 1.5rem; }
  .plan .price,
  .plan .after,
  .plan ul { margin-left: 1.5rem; margin-right: 1.5rem; }
  .plan-actions { margin: auto 1.5rem 1.5rem; }
  .gaming { padding: 3.5rem 2.5rem; }
  .game-line { margin-top: 2.5rem; padding: 1.75rem; }
  .tips li { padding: 1.5rem 1.75rem 1.625rem 5rem; }
  .tips li::before { left: 1.75rem; top: 1.5rem; }
  .tmodal { height: min(46rem, calc(100% - 2rem)); }
  /* по содержимому: у открытого dialog top и bottom — 0, height: auto растянул бы окно на всю высоту */
  .rmodal,
  .amodal,
  .cmodal,
  .routers-modal { height: fit-content; max-height: calc(100% - 2rem); }
  .tmodal-body,
  .rmodal-body,
  .amodal-body,
  .cmodal-body,
  .routers-modal-body { padding: 1.25rem 2rem 2rem; }
  .tmodal-foot { padding: 1rem 2rem; }
  .tinfo-price { padding: 1.5rem 1.75rem 1.625rem; }
  .tinfo-services,
  .tinfo-equip,
  .routers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .tmodal-foot .btn { flex: 1 1 auto; }
}
@media (min-width: 768px) {
  .bonus-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1024px) {
  .tariffs-head h1 { font-size: 3.5rem; }
  .tariffs-intro { grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: 3rem; }
  .tariffs-art { display: block; }
  .chips { margin-left: -2rem; margin-right: -2rem; padding-left: 2rem; padding-right: 2rem; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gaming { padding: 4rem 3.5rem; }
  .cost-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .plans:not(.plans--3) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tariffs-intro { grid-template-columns: minmax(0, 1fr) 27rem; gap: 4rem; }
}
@media (min-width: 1536px) {
  .chips { margin-left: -2.5rem; margin-right: -2.5rem; padding-left: 2.5rem; padding-right: 2.5rem; }
}


/* ===== Страница ТВ (neo/tv). Первый экран, навигация, таблицы, .tips, FAQ и заявка — общие со страницей тарифов.
   У страницы каналов (neo/channels) тот же класс .tv-page (main.tv-page.ch-page) — правила раздела действуют и на неё ===== */

/* Кнопки под лидом первого экрана */
.hero-cta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Таблицы с заголовками строк (th scope="row"): заголовок — как первая колонка, а не как шапка */
.tbl tbody th {
  border-top: 1px solid rgb(227 233 239);
  background: none;
  padding: .875rem 1rem;
  vertical-align: top;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(24 27 33);
}
/* Цифровое и кабельное ТВ. Цифровое — первая колонка и выделено как блок (.compare-main): тёмная шапка,
   голубой фон и рамка колонки; его предлагаем в первую очередь. Разметка — обычная таблица */
.compare {
  min-width: 40rem;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.compare thead th:first-child,
.compare tbody th {
  width: 26%;
}
.compare th.compare-main {
  width: 40%;
}
.compare thead th + th {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  color: rgb(24 27 33);
}
.compare thead th + th::before {
  content: "";
  display: inline-block;
  margin-right: .5rem;
  width: .625rem;
  height: .625rem;
  border-radius: 9999px;
  background: rgb(170 213 234);
  vertical-align: .05em;
}
.compare td.num {
  white-space: normal;
}
.compare th.compare-main {
  border-radius: 1rem 1rem 0 0;
  background: rgb(30 31 51);
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.0625rem;
  color: #fff;
}
.compare th.compare-main::before {
  background: rgb(255 49 44);
  box-shadow: 0 0 0 3px rgba(255, 49, 44, .25);
}
.compare td.compare-main {
  border-top-color: rgb(207 230 242);
  background: rgb(240 247 251);
  color: rgb(24 27 33);
  box-shadow: inset 2px 0 rgb(30 31 51), inset -2px 0 rgb(30 31 51);
}
.compare tbody tr:last-child td.compare-main {
  border-radius: 0 0 1rem 1rem;
  box-shadow: inset 2px 0 rgb(30 31 51), inset -2px 0 rgb(30 31 51), inset 0 -2px rgb(30 31 51);
}
/* До 640px — по строкам: сверху подписи видов ТВ, в строке — её название и значения в тех же колонках;
   значение цифрового ТВ — голубой плашкой. Разметка та же (table, th scope="row"), меняется только раскладка */
@media (max-width: 639.98px) {
  .compare,
  .compare thead,
  .compare tbody {
    display: block;
    min-width: 0;
  }
  .compare tr {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    padding: .75rem .625rem;
  }
  .compare tbody tr {
    border-top: 1px solid rgb(227 233 239);
  }
  .compare thead tr {
    background: rgb(245 248 251);
  }
  .compare thead th:first-child {
    display: none;
  }
  .compare :is(th, td),
  .tbl.compare :is(th, td):is(:first-child, :last-child) {
    width: auto;
    border: 0;
    padding: .375rem .625rem;
    background: none;
    box-shadow: none;
  }
  .compare thead th,
  .compare td {
    flex: 1 1 0;
    min-width: 0;
  }
  .compare tbody th {
    flex: 0 0 100%;
    padding-bottom: 0;
  }
  .compare thead th + th {
    font-size: .9375rem;
  }
  .tbl.compare .compare-main {
    border-radius: .75rem;
  }
  .compare thead tr {
    align-items: center;
  }
  .tbl.compare th.compare-main {
    padding: .5rem .625rem;
    background: rgb(30 31 51);
  }
  .compare .compare-main {
    flex-grow: 1.4;
  }
  .tbl.compare td.compare-main,
  .tbl.compare tbody tr:last-child td.compare-main {
    background: rgb(240 247 251);
    box-shadow: inset 0 0 0 1.5px rgb(207 230 242);
  }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .compare {
    min-width: 34rem;
  }
}

/* Подсказки раздела кабельного ТВ (.tips страницы тарифов) — на белом фоне страницы серыми плашками, от 1024px — в ряд.
   .tips--art — иконка-иллюстрация вместо номера: до 1024px слева, от 1024px — над заголовком */
.tv-page .tips li {
  background: rgb(245 248 251);
  box-shadow: none;
}
.tv-page .tips + .section-more {
  margin-top: 1.75rem;
}
.tips--art li {
  min-height: 5.75rem;
  padding: 1.25rem 1.25rem 1.375rem 6rem;
}
.tips--art li::before {
  content: none;
}
.tips--art .ico-art {
  position: absolute;
  left: .875rem;
  top: .75rem;
  width: 4.5rem;
  height: 4.5rem;
}

/* Иконки-иллюстрации ссылок на соседние страницы и картинка «Все тарифы» (из .deck-art главной) — одного размера */
.seealso-art {
  flex: none;
  width: 4rem;
  height: 4rem;
}
.seealso-art .deck-art {
  display: block;
  margin: 0;
  padding: 0;
}
.seealso-art svg,
.seealso-art .deck-art svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Пакеты каналов: первые логотипы из списка канала, последние гаснут — список не весь. До 1024px — строкой под текстом,
   от 1024px — сеткой справа, гаснет нижний правый угол */
.packages {
  display: grid;
}
/* до 1024px логотипы — между текстом и ссылкой на весь список */
@media (max-width: 1023.98px) {
  .packages > div {
    display: contents;
  }
  .packages .ch-logos {
    order: 1;
    margin-top: .75rem;
  }
  .packages .section-more {
    order: 2;
  }
}
.ch-logos {
  display: flex;
  gap: .75rem;
  overflow: hidden;
  margin: -.75rem;
  padding: .75rem;
  -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 96%);
  mask-image: linear-gradient(to right, #000 50%, transparent 96%);
}
.ch-logos li {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border: 1px solid rgb(227 233 239);
  border-radius: 1.125rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 27, 33, .05), 0 10px 22px -12px rgba(24, 27, 33, .3);
}
.ch-logos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Первый экран до 640px: кнопки — над иллюстрацией, она целиком под ними в правом нижнем углу плашки */
@media (max-width: 639.98px) {
  .tv-page .tariffs-intro {
    padding-bottom: 6.75rem;
  }
  .tv-page .tariffs-art {
    right: -.75rem;
    bottom: -2.25rem;
    width: 10.5rem;
  }
  .hero-cta .btn {
    flex: 1 1 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Карточки разделов «Какой телевизор подойдёт» и «ТВ на нескольких телевизорах» — как .tile главной города */
.cards {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.card {
  position: relative;
  border-radius: 1.5rem;
  background: #fff;
  padding: 1.5rem 1.5rem 1.625rem;
  box-shadow: 0 1px 2px rgba(24, 27, 33, .04), 0 8px 24px -12px rgba(24, 27, 33, .12);
}
.card::before {
  content: "";
  display: block;
  margin-bottom: 1rem;
  width: 2.5rem;
  height: .3125rem;
  border-radius: 9999px;
  background: rgb(229 34 28);
}
.card:nth-child(3n+2)::before {
  background: rgb(170 213 234);
}
.card:nth-child(3n)::before {
  background: rgb(30 31 51);
}
.card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.card p {
  margin-top: .5rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: rgb(92 100 112);
}
.cards + .tbl-scroll {
  margin-top: 1.25rem;
}

/* Шаги (.steps вёрстки, как «Как проходит подключение» главной): --plain — текст без заголовка,
   --inline — жирное начало фразы в строку с текстом. От 1024px — в ряд */
.tv-page .steps {
  margin-top: 2rem;
}
.tv-page .block-title + .steps {
  margin-top: 1.5rem;
}
.steps--plain li,
.steps--inline li {
  font-size: 1rem;
  line-height: 1.6;
}
.steps--plain li {
  color: rgb(24 27 33);
}
.steps--inline li {
  color: rgb(92 100 112);
}
.steps--inline strong {
  display: inline;
  padding-top: 0;
  font-size: inherit;
  line-height: inherit;
  color: rgb(24 27 33);
}
@media (max-width: 1023.98px) {
  .steps--plain li,
  .steps--inline li {
    padding-top: .875rem;
  }
}

/* Текст под подзаголовком */
.text {
  margin-top: 1rem;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.625;
  color: rgb(92 100 112);
}
.block-title + .text {
  margin-top: .75rem;
}

/* Ссылки на страницы соседних тем (тарифы, Movix, приставки) — плашками в ряд, с иконками-иллюстрациями */
.seealso {
  margin-top: 2.5rem;
  display: grid;
  gap: .75rem;
}
.seealso li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 2px solid rgb(227 233 239);
  border-radius: 1.25rem;
  padding: .875rem 1.25rem .875rem .875rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: rgb(92 100 112);
  transition: border-color .15s;
}
.seealso li:hover {
  border-color: rgb(170 213 234);
}
.seealso a {
  font-weight: 700;
  color: rgb(30 31 51);
  text-decoration: underline;
  text-decoration-color: #ff312c;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .15s;
}
.seealso a:hover {
  color: rgb(229 34 28);
}
/* Вся плашка — ссылка */
.seealso a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

@media (min-width: 640px) {
  .cards { margin-top: 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .card { padding: 1.75rem 1.75rem 1.875rem; }
}
@media (min-width: 1024px) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tv-page .tips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tips--art li { min-height: 0; padding: 1.25rem 1.75rem 1.625rem; }
  .tips--art .ico-art { position: static; display: block; width: 5.5rem; height: 5.5rem; margin: 0 0 .5rem -.5rem; }
  .packages { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4rem; }
  .ch-logos { display: grid; grid-template-columns: repeat(3, 6.5rem); gap: 1rem; margin: -1.25rem; padding: 1.25rem;
    -webkit-mask-image: linear-gradient(140deg, #000 45%, transparent 88%); mask-image: linear-gradient(140deg, #000 45%, transparent 88%); }
  .ch-logos li { width: 6.5rem; height: 6.5rem; border-radius: 1.5rem; }
  .tv-page .steps { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 1.5rem; margin-top: 2.5rem; }
  .tv-page .block-title + .steps { margin-top: 1.75rem; }
  .seealso { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}


/* ===== Страница каналов (neo/channels). Первый экран, навигация по жанрам, .text, .seealso, FAQ и заявка — как у страницы ТВ ===== */

/* Поиск по списку: поле с лупой; «Канал не найден» и сброс — строка .ch-empty (создаёт theme.js) */
.ch-search {
  margin-top: 1.75rem;
  max-width: 30rem;
}
.ch-search-box {
  position: relative;
}
.ch-search-box svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  color: rgb(92 100 112);
  pointer-events: none;
}
.ch-search .field {
  padding-left: 2.875rem;
}
.ch-search .field::-webkit-search-cancel-button {
  cursor: pointer;
}
.ch-empty {
  margin-top: 1.5rem;
  border-radius: 1.25rem;
  background: rgb(245 248 251);
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgb(24 27 33);
}
.ch-empty button {
  margin-left: .5rem;
  font-weight: 600;
  color: rgb(30 31 51);
  text-decoration: underline;
  text-decoration-color: #ff312c;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .15s;
}
.ch-empty button:hover {
  color: rgb(229 34 28);
}

/* Жанр: заголовок с числом каналов и сетка каналов */
.genre {
  margin-top: 2.5rem;
}
.genre[hidden],
.ch[hidden] {
  display: none;
}
.genre > .block-title {
  margin-top: 0;
}
.ch-list {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
}

/* Канал: логотип, номер кнопки — клавишей пульта, название, пометка HD. Номер — всегда во второй колонке:
   у канала без номера названия остаются на одной линии с остальными */
.ch {
  display: grid;
  grid-template-columns: 2.5rem 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .75rem;
  min-height: 3.5rem;
  border: 1px solid rgb(227 233 239);
  border-radius: 1rem;
  background: #fff;
  padding: .5rem .875rem .5rem .5rem;
}
.ch img {
  grid-column: 1;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .625rem;
  object-fit: contain;
  box-shadow: 0 0 0 1px rgb(227 233 239);
}
.ch-num {
  grid-column: 2;
  justify-self: start;
  min-width: 2.375rem;
  border-radius: .5rem;
  background: rgb(240 247 251);
  box-shadow: inset 0 -2px rgb(207 230 242);
  padding: .125rem .375rem .1875rem;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: rgb(30 31 51);
}
.ch-name {
  grid-column: 3;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgb(24 27 33);
}
.ch-hd {
  grid-column: 4;
  border-radius: .375rem;
  background: rgb(30 31 51);
  padding: .125rem .375rem;
  font-size: .6875rem;
  font-weight: 800;
  line-height: 1rem;
  letter-spacing: .04em;
  color: #fff;
}

/* 20 общедоступных каналов — плитками: крупный номер кнопки и логотип сверху, название под ними */
.ch-must {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.ch-must .ch {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "num img" "name name";
  align-items: start;
  row-gap: .75rem;
  min-height: 0;
  border-radius: 1.25rem;
  padding: .75rem .75rem .875rem .875rem;
}
.ch-must img {
  grid-area: img;
}
.ch-must .ch-num {
  grid-area: num;
  min-width: 2.75rem;
  border-radius: .625rem;
  padding: .3125rem .5rem .4375rem;
  background: rgb(30 31 51);
  box-shadow: inset 0 -3px rgb(0 0 0 / .35);
  font-size: 1.25rem;
  line-height: 1.5rem;
  color: #fff;
}
.ch-must .ch-name {
  grid-area: name;
}
.ch-must + .text {
  margin-top: 1.75rem;
}

/* До 640px список жанра — одной плашкой с разделителями: каналов много, отдельные плитки удлиняют страницу */
@media (max-width: 639.98px) {
  .ch-list {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgb(227 233 239);
    border-radius: 1.25rem;
    background: #fff;
  }
  .ch-list .ch {
    min-height: 3.25rem;
    border: 0;
    border-radius: 0;
    padding: .375rem .875rem .375rem .5rem;
  }
  .ch-list .ch:not([hidden]) ~ .ch {
    box-shadow: inset 0 1px rgb(227 233 239);
  }
}

@media (min-width: 640px) {
  .ch-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-must { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
}
@media (min-width: 1024px) {
  .ch-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
  .ch-must { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .ch-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ===== Страница интернета (neo/internet): main.tv-page.inet-page — первый экран, навигация, .tips, .cards, .steps,
   .seealso, FAQ и заявка как у страницы ТВ ===== */

/* Ползунок скоростей (#speeds): шкала и карточка выбранной скорости на светлой плашке, не шире 64rem. Все карточки — в HTML,
   видна выбранная (.is-active, theme.js). Бегунок двигается плавно (step="any"), заливка — до него (--sp: 0…1), цвет —
   пастельный коралл (по просьбе пользователя 08.10.2026; --sp-coral); подписи — из data-v, их место — --x */
.speed-picker {
  --sp-coral: #f28b82;
  --sp-fill: linear-gradient(90deg, #ffd3cc, var(--sp-coral));
  max-width: 64rem;
  margin-top: 2rem;
  border-radius: 1.75rem;
  background: rgb(245 248 251);
  padding: .75rem 1rem 1rem;
}
.sp-scale {
  --thumb: 1.75rem;
  position: relative;
  margin: 0 .25rem .75rem;
  padding-bottom: 1.75rem;
}
.sp-range {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.sp-range:focus {
  outline: none;
}
.sp-range::-webkit-slider-runnable-track {
  height: .5rem;
  border-radius: 9999px;
  background: var(--sp-fill) 0 0 / calc(var(--thumb) / 2 + var(--sp) * (100% - var(--thumb))) 100% no-repeat, rgb(207 230 242);
}
.sp-range::-moz-range-track {
  height: .5rem;
  border-radius: 9999px;
  background: rgb(207 230 242);
}
.sp-range::-moz-range-progress {
  height: .5rem;
  border-radius: 9999px;
  background: var(--sp-fill);
}
.sp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((.5rem - var(--thumb)) / 2);
  border: .4375rem solid var(--sp-coral);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px -2px rgba(24, 27, 33, .35);
  transition: transform .15s, box-shadow .15s;
}
.sp-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border: .4375rem solid var(--sp-coral);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px -2px rgba(24, 27, 33, .35);
  transition: transform .15s, box-shadow .15s;
}
.sp-range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}
.sp-range:active::-moz-range-thumb {
  transform: scale(1.12);
}
.sp-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgb(170 213 234), 0 2px 10px -2px rgba(24, 27, 33, .35);
}
.sp-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgb(170 213 234), 0 2px 10px -2px rgba(24, 27, 33, .35);
}
.sp-ticks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.75rem;
}
.sp-ticks span {
  position: absolute;
  top: 0;
  left: calc(var(--thumb) / 2 + var(--x) * (100% - var(--thumb)));
  transform: translateX(-50%);
  padding: .125rem .375rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
  color: rgb(92 100 112);
  cursor: pointer;
  transition: color .15s;
}
.sp-ticks span:first-child {
  left: -.375rem;
  transform: none;
}
.sp-ticks span:last-child {
  left: auto;
  right: -.375rem;
  transform: none;
}
.sp-ticks span::before {
  content: attr(data-v);
}
.sp-ticks span:hover {
  color: rgb(30 31 51);
}
.sp-ticks span.is-active {
  font-weight: 800;
  color: rgb(30 31 51);
}

/* Карточка скорости: цветная шапка по полосе скорости (как шапки карточек тарифов), описание, цена и «Подключить» */
.speed-option {
  display: none;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 27, 33, .04), 0 8px 24px -12px rgba(24, 27, 33, .12);
}
.speed-option.is-active {
  display: grid;
}
@media (prefers-reduced-motion: no-preference) {
  .speed-option.is-active {
    animation: neo-sp-in .25s ease-out;
  }
}
@keyframes neo-sp-in {
  from { opacity: 0; transform: translateY(6px); }
}
.sp-head {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.25rem 1.375rem;
}
.sp-head h3 {
  position: relative;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}
.sp-head h3 small {
  margin-left: .125rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.sp-head .plan-deco {
  top: auto;
  right: -1.75rem;
  bottom: -2.25rem;
  width: 7.5rem;
  height: 7.5rem;
  opacity: .22;
}
/* Уровень скорости — столбики в правом верхнем углу шапки (заполнены по полосе скорости) */
.sp-level {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: flex-end;
  gap: .25rem;
  height: 1.75rem;
}
.sp-level i {
  width: .4375rem;
  border-radius: 2px;
  background: currentColor;
  opacity: .22;
}
.sp-level i:nth-child(1) { height: 25%; }
.sp-level i:nth-child(2) { height: 50%; }
.sp-level i:nth-child(3) { height: 75%; }
.sp-level i:nth-child(4) { height: 100%; }
.sp-level i.on {
  opacity: 1;
}
.sp--light .sp-level i.on,
.sp--sky .sp-level i.on {
  background: rgb(229 34 28);
}
.sp--light .sp-head {
  background: linear-gradient(160deg, #f0f7fb, #cfe6f2);
  color: rgb(30 31 51);
}
.sp--light .sp-head .plan-deco {
  opacity: .7;
}
.sp--sky .sp-head {
  background: linear-gradient(135deg, #8cc3dd, #cfe6f2);
  color: rgb(30 31 51);
}
.sp--navy .sp-head {
  background: linear-gradient(135deg, #1e1f33, #3a3d5c);
  color: #fff;
}
.sp--red .sp-head {
  background: linear-gradient(135deg, #e5221c, #ff7d72);
  color: #fff;
}
.sp-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.25rem;
}
.sp-body > p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgb(92 100 112);
}
.sp-order {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.sp-order .price {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: rgb(24 27 33);
}
.sp-order .price small {
  margin-left: .125rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: rgb(92 100 112);
}
.sp-order .price .from {
  margin: 0 .125rem 0 0;
}
@media (max-width: 639.98px) {
  .sp-order .btn {
    flex: 1 1 100%;
  }
}

/* Как интернет приходит в квартиру: шаги с иконками-иллюстрациями, номер — меткой у иконки, между иконками — «кабель»
   (красный пунктир; до 1024px — вниз, от 1024px — вправо) */
.steps--art li::before {
  left: 3.375rem;
  top: -.25rem;
  width: 1.625rem;
  height: 1.625rem;
  font-size: .8125rem;
  line-height: 1;
  box-shadow: 0 0 0 3px #fff;
}
.steps--art .ico-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 4.5rem;
  height: 4.5rem;
}
.steps--art li::after {
  left: 2.25rem;
  top: 5rem;
  bottom: .25rem;
  width: 2px;
  background: linear-gradient(rgb(255 49 44) 50%, transparent 0) 0 0 / 2px 10px;
  opacity: .55;
}
@media (max-width: 1023.98px) {
  .steps--art li {
    min-height: 4.5rem;
    padding-left: 5.75rem;
    padding-top: .625rem;
  }
}

/* Кабель и Wi-Fi: начало фразы — в строку с текстом («По кабелю — для компьютера…») */
.tips--inline strong {
  display: inline;
  margin: 0;
  font-size: inherit;
}

/* Что входит: галочки вместо номеров (цвета кружков — как у .tips; .tips. — чтобы фон кружка из .tips не сбросил картинку) */
.tips.tips--check li::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.125rem;
}
.tips.tips--check li:nth-child(3n+2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1f33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

@media (min-width: 640px) {
  .speed-picker { padding: 1rem 1.5rem 1.5rem; }
  .sp-scale { margin: 0 .5rem 1rem; }
  .speed-option.is-active { grid-template-columns: minmax(12rem, 2fr) 3fr; }
  .sp-head { display: flex; align-items: flex-end; min-height: 11rem; padding: 1.75rem; }
  .sp-head h3 { font-size: 3.5rem; }
  .sp-level { top: 1.75rem; right: 1.75rem; height: 2.25rem; }
  .sp-level i { width: .5rem; }
  .sp-body { padding: 1.75rem 2rem; }
  .sp-ticks span { font-size: .9375rem; }
}
@media (min-width: 1024px) {
  .speed-picker { padding: 1.25rem 2rem 2rem; }
  .sp-scale { --thumb: 2rem; margin: 0 .75rem 1.25rem; padding-bottom: 2rem; }
  .sp-ticks { height: 2rem; }
  .sp-ticks span { font-size: 1rem; }
  .sp-head { min-height: 12.5rem; padding: 2rem; }
  .sp-head h3 { font-size: 4.5rem; }
  .sp-head h3 small { font-size: 1.375rem; }
  .sp-level { top: 2rem; right: 2rem; height: 2.75rem; gap: .3125rem; }
  .sp-level i { width: .5625rem; }
  .sp-head .plan-deco { width: 10rem; height: 10rem; right: -2rem; bottom: -3rem; }
  .sp-body { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; padding: 2rem 2.5rem; }
  .sp-body > p { max-width: 40ch; font-size: 1.0625rem; }
  .sp-order { flex: none; flex-direction: column; align-items: flex-end; gap: 1rem; }
  .inet-page .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--art li { padding-top: 6.5rem; }
  .steps--art .ico-art { width: 5.5rem; height: 5.5rem; left: -.375rem; top: -.25rem; }
  .steps--art li::before { left: 4.125rem; top: -.375rem; }
  .steps--art li::after { left: 6rem; right: -1.25rem; top: 2.5rem; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, rgb(255 49 44) 50%, transparent 0) 0 0 / 10px 2px; }
}


/* ===== Страница проверки адреса (neo/proverit-adres): main.tv-page.adr-page — первый экран как у страницы тарифов, .cards, .steps,
   .tips, .seealso и FAQ как у страниц ТВ и интернета ===== */

/* Первый экран: у страницы нет строки навигации — блок со своей коробкой, чтобы якорь #check работал */
.adr-page .tariffs-head {
  display: block;
}
/* До 640px иллюстрация — как у страницы тарифов (у страниц ТВ и интернета плашка выше из-за кнопок под лидом) */
@media (max-width: 639.98px) {
  .adr-page .tariffs-intro {
    padding-bottom: 5.25rem;
  }
  .adr-page .tariffs-art {
    right: -1.25rem;
    bottom: -2.5rem;
    width: 9.5rem;
  }
}

/* Форма проверки адреса — под первым экраном на всю ширину, на тёмной плашке с фигурами (как заявка внизу других страниц):
   переключатель «Квартира / Частный дом», ниже поля и кнопка; от 1024px — адрес, под ним телефон, имя и кнопка; от 1280px — в одну строку */
.adr-form {
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
  border-radius: 1.75rem;
  background: rgb(30 31 51);
  padding: 1.25rem 1.25rem 1.5rem;
  color: #fff;
}
.adr-form > * {
  position: relative;
}
.adr-form > .adr-form-shape {
  position: absolute;
  pointer-events: none;
  opacity: .06;
}
.adr-form-shape--tri {
  right: -3rem;
  bottom: -4.5rem;
  width: 14rem;
  height: 14rem;
  transform: rotate(-12deg);
}
.adr-form-shape--drop {
  display: none;
  left: 36%;
  top: -5.5rem;
  width: 11rem;
  height: 11rem;
  transform: rotate(20deg);
}
.adr-form .field-label {
  color: rgb(207 230 242);
}
.adr-form .field:focus {
  border-color: rgb(170 213 234);
  box-shadow: 0 0 0 3px rgba(170, 213, 234, .35);
}
.adr-switch {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
/* Переключатель — как вкладки главной города (.seg), на тёмном: выбранное — белым */
.adr-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 22rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .1);
  padding: .25rem;
}
.adr-seg label {
  position: relative;
  border-radius: 9999px;
  padding: .625rem .75rem;
  text-align: center;
  white-space: nowrap;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.adr-seg label:hover {
  color: rgb(170 213 234);
}
.adr-seg input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.adr-seg label:has(:checked) {
  background: #fff;
  color: rgb(30 31 51);
}
.adr-seg label:has(:focus-visible) {
  outline: 2px solid rgb(170 213 234);
  outline-offset: 2px;
}
.adr-fields {
  margin-top: 1.25rem;
  display: grid;
  gap: 1rem;
}
/* Кнопка — высотой с поле */
.adr-fields .btn {
  width: 100%;
  min-height: calc(3.25rem + 4px);
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1rem;
}
/* Подпись под формой — на всю ширину плашки (решение пользователя) */
.adr-form .form-note {
  margin-top: 1rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .65);
}
.adr-form .form-note a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgb(170 213 234);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .15s;
}
.adr-form .form-note a:hover {
  color: rgb(170 213 234);
}

/* Та же форма в окне «Проверка адреса» (ajax/address-form.php): без плашки, на белом; переключатель — как вкладки главной города (.seg),
   поля — в одну колонку, от 640px телефон и имя рядом (город — на странице без города — и адрес на всю ширину); кнопка — на всю ширину */
/* .adr-form.adr-form--light — сильнее правил .adr-form ниже по файлу (отступы и скругление от 640px и 1024px) */
.adr-form.adr-form--light {
  margin-top: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  color: inherit;
}
.adr-form--light .field-label {
  color: rgb(24 27 33);
}
.adr-form--light .field:focus {
  border-color: rgb(79 143 176);
  box-shadow: 0 0 0 3px rgba(170, 213, 234, .5);
}
.adr-form--light .adr-seg {
  background: rgb(245 248 251);
}
.adr-form--light .adr-seg label {
  color: rgb(24 27 33);
}
.adr-form--light .adr-seg label:hover {
  color: rgb(229 34 28);
}
.adr-form--light .adr-seg label:has(:checked) {
  background: rgb(30 31 51);
  color: #fff;
}
.adr-form--light .adr-seg label:has(:focus-visible) {
  outline-color: rgb(79 143 176);
}
.adr-form--light .adr-fields {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.adr-form--light .adr-fields .btn {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: .5rem;
}
.adr-form--light .form-note {
  color: rgb(92 100 112);
}
.adr-form--light .form-note a {
  color: rgb(30 31 51);
}
.adr-form--light .form-note a:hover {
  color: rgb(229 34 28);
}
@media (min-width: 640px) {
  .adr-form--light .adr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adr-form--light .adr-field--city,
  .adr-form--light .adr-field--addr { grid-column: 1 / -1; }
}

/* Иконки-иллюстрации из .deck-art главной (метка, календарь, рубль…) в .ico-art — без отступов и сдвигов карточек главной */
.ico-art > .deck-art {
  display: block;
  margin: 0;
  padding: 0;
}
.ico-art > .deck-art svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
}

/* Что вы узнаете: карточки с иконкой-иллюстрацией вместо цветной полоски */
.cards--art .card::before {
  content: none;
}
.cards--art .ico-art {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin: -.5rem 0 .5rem -.5rem;
}

/* Улицы — белыми плашками с меткой, все сразу */
.adr-page #streets .text {
  margin-top: 1.75rem;
  font-weight: 600;
  color: rgb(24 27 33);
}
.streets {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.streets li {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border-radius: 9999px;
  background: #fff;
  padding: .5rem .875rem .5rem .625rem;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.25;
  color: rgb(24 27 33);
  box-shadow: 0 1px 2px rgba(24, 27, 33, .04), 0 6px 16px -10px rgba(24, 27, 33, .2);
}
.streets svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: rgb(229 34 28);
}
/* До 640px плашки мельче: в строку помещается больше улиц */
@media (max-width: 639.98px) {
  .streets {
    gap: .375rem;
  }
  .streets li {
    gap: .25rem;
    padding: .4375rem .75rem .4375rem .5rem;
    font-size: .875rem;
  }
  .streets svg {
    width: 1rem;
    height: 1rem;
  }
}

@media (min-width: 640px) {
  .adr-form { margin-top: 2rem; border-radius: 2rem; padding: 1.75rem 2rem 2rem; }
  .adr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adr-field--addr,
  .adr-fields .btn { grid-column: 1 / -1; }
  .seealso--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .adr-form { padding: 2rem 2.5rem 2.25rem; }
  .adr-form-shape--drop { display: block; }
  .adr-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
  .adr-fields .btn { grid-column: auto; width: auto; padding-left: 2rem; padding-right: 2rem; }
  .adr-page .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seealso--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .adr-fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1.15fr) minmax(0, 1fr) auto; }
  .adr-field--addr { grid-column: auto; }
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adr-page .tips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .seealso--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ===== Страница частного дома (neo/private-house): main.tv-page.ph-page — первый экран как у страницы тарифов (без строки
   навигации), .steps, .tips, .cards, .streets, .seealso и FAQ как у страниц интернета и проверки адреса ===== */

/* Тарифы: в HTML три карточки, остальное добавляет theme.js — кнопки-фильтры по линейкам над карточками, карточку
   «Показать все тарифы» в конце сетки и карточки из JSON. От 1024px — 4 колонки (три карточки и «Показать все» в ряд) */
.ph-filters {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.ph-filters button {
  border: 2px solid rgb(227 233 239);
  border-radius: 9999px;
  background: #fff;
  padding: .4375rem 1rem;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: rgb(30 31 51);
  transition: color .15s, background-color .15s, border-color .15s;
}
.ph-filters button:hover {
  border-color: rgb(170 213 234);
}
.ph-filters button[aria-pressed="true"] {
  border-color: rgb(30 31 51);
  background: rgb(30 31 51);
  color: #fff;
}
.ph-filters button span {
  margin-left: .375rem;
  font-weight: 500;
  color: rgb(92 100 112);
}
.ph-filters button[aria-pressed="true"] span {
  color: rgba(255, 255, 255, .65);
}
.ph-filters + .ph-plans {
  margin-top: 1.25rem;
}
.ph-plans > [hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ph-plans > .is-new {
    animation: neo-sp-in .25s ease-out;
  }
}
/* «Показать все тарифы» — карточка-кнопка: светлая, с пунктирной рамкой, «+» в красном круге */
.ph-more {
  display: flex;
  min-height: 9rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  border: 2px dashed rgb(170 213 234);
  border-radius: 1.75rem;
  background: rgb(240 247 251);
  padding: 1.5rem;
  text-align: center;
  color: rgb(30 31 51);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.ph-more:hover {
  border-color: rgb(30 31 51);
  background: rgb(225 240 248);
}
.ph-more:focus-visible {
  outline: 2px solid rgb(30 31 51);
  outline-offset: 3px;
}
.ph-more i {
  position: relative;
  margin-bottom: .5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: rgb(229 34 28);
  box-shadow: 0 10px 22px -10px rgba(229, 34, 28, .7);
  transition: transform .2s;
}
.ph-more i::before,
.ph-more i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.375rem;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.ph-more i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.ph-more:hover i {
  transform: rotate(90deg);
}
.ph-more b {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.ph-more small {
  font-size: .875rem;
  line-height: 1.35;
  color: rgb(92 100 112);
}

/* Телевидение: текст слева, иллюстрация справа на светлом круге (как на первом экране); до 640px — без иллюстрации */
.ph-split-art {
  position: relative;
  display: none;
  aspect-ratio: 1;
}
.ph-split-art::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0, rgb(240 247 251) 40%, rgb(207 230 242) 100%);
}
.ph-split-art .deck-art {
  position: relative;
  display: block;
  margin: 0;
}
.ph-split-art .deck-art svg {
  width: 100%;
  height: auto;
  margin: 0;
}

/* Где подключены: улицы и ссылки на соседние страницы — белыми плашками на серой панели */
.ph-page #where .text {
  margin-top: 1.75rem;
  font-weight: 600;
  color: rgb(24 27 33);
}
.ph-page .panel .seealso li {
  border-color: #fff;
  background: #fff;
}
.ph-page .panel .seealso li:hover {
  border-color: rgb(170 213 234);
}

/* Заявка — поля прототипа: до 640px друг под другом; шире — «Что подключить» и тариф в строку (тарифу — 2/3),
   ниже адрес (2/3) и телефон */
.ph-fields {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .ph-split { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; align-items: center; gap: 2rem; }
  .ph-split-art { display: block; }
  .ph-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-f--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .ph-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ph-page .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-split { grid-template-columns: minmax(0, 1fr) 17rem; gap: 4rem; }
}

/* ===== Страница «Интернет в новостройку» (neo/novosel): main.tv-page.nb-page — первый экран как у страницы тарифов, .tips, .cards,
   .steps (с иконками), текст с иллюстрацией справа (.ph-split частного дома), FAQ и заявка — как у страниц интернета и частного дома ===== */

/* На серой панели плашки и карточки — белые */
.nb-page .panel .tips li,
.nb-page .panel .card {
  background: #fff;
}
.nb-page .panel .text {
  margin-top: 1.75rem;
}
.nb-page .ph-split .text {
  margin-top: 1rem;
}

/* Заявка: до 640px поля друг под другом, шире — по два в строку (город и адрес, что подключить и телефон) */
.nb-fields {
  display: grid;
  gap: 1rem;
}
/* Списки по три пункта до 1024px — в одну колонку (в две третий оставался бы один) */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .nb-page .tips { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) {
  .nb-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Страница игровых тарифов (neo/gaming): main.tv-page.gm-page — первый экран как у страницы тарифов (иллюстрация — геймпад
   карточки «Игровые тарифы» главной), строка навигации, линейки — тёмная панель с карточками тарифов, как игровые тарифы страницы тарифов,
   .steps, FAQ и заявка — как у страниц ТВ и новостройки ===== */

/* Иллюстрация первого экрана — геймпад из карточки главной (parts/art/plan-game.php), крупно */
.tariffs-art .plan-extra-art {
  position: relative;
  display: block;
}
.tariffs-art .plan-extra-art svg {
  width: 100%;
  height: auto;
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tariffs-art .plan-extra-art svg {
    animation: neo-float 6s ease-in-out infinite;
  }
}

/* Линейки — тёмная панель .gaming страницы тарифов; линейки (H2, лид, бонусы, карточки .plans--game-…) — без своей подложки
   (одним уровнем вложенности меньше, чем на странице тарифов — просьба пользователя), между ними — линия */
.gm-lines .game-line {
  margin-top: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
.gm-lines .game-line + .game-line {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 2.5rem;
}
.gm-lines .plans {
  margin-top: 1.75rem;
}
.gm-lines .game-line .lead {
  max-width: 64ch;
}
.gm-lines .bonus-list {
  margin-top: 1.25rem;
}
.gm-lines .updated {
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, .6);
}

/* «Чем отличается»: сравнение с обычным тарифом — белой плашкой на серой панели */
.gm-page .panel .text {
  margin-top: 1.25rem;
}
.gm-page .panel .lead + .text,
.gm-page .panel .h2 + .text {
  margin-top: 1rem;
}
.gm-diff {
  border-left: 4px solid rgb(229 34 28);
  border-radius: 1rem;
  background: #fff;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: rgb(24 27 33);
}

/* «Чем отличается»: ответы QAPage — белые плашки по ширине текста сразу под заголовком, в строку с переносом */
.gm-answers {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.gm-answers li {
  border-radius: 1.375rem; /* одна строка — «таблетка», при переносе на телефоне — скруглённый прямоугольник */
  background: #fff;
  padding: .75rem 1.25rem;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgb(24 27 33);
  box-shadow: 0 1px 2px rgba(24, 27, 33, .04), 0 8px 24px -12px rgba(24, 27, 33, .12);
}

/* «Какой выбрать»: подблоки с иконкой — от 640px слева от заголовка и текста, уже — над заголовком.
   Цвета плашек — как у номеров шагов (красный, голубой, тёмный) */
.gm-choice {
  margin-top: 2rem;
}
.gm-choice-ico {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
}
.gm-choice-ico svg {
  width: 1.5rem;
  height: 1.5rem;
}
.gm-choice:nth-of-type(3n+1) .gm-choice-ico {
  background: rgb(229 34 28);
  color: #fff;
}
.gm-choice:nth-of-type(3n+2) .gm-choice-ico {
  background: rgb(170 213 234);
  color: rgb(30 31 51);
}
.gm-choice:nth-of-type(3n) .gm-choice-ico {
  background: rgb(30 31 51);
  color: #fff;
}
.gm-choice .block-title {
  margin-top: .875rem;
}
@media (min-width: 640px) {
  .gm-choice {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 1.5rem;
  }
  .gm-choice-ico {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.125rem;
  }
  .gm-choice-ico svg {
    width: 1.75rem;
    height: 1.75rem;
  }
  /* заголовок — по центру плашки */
  .gm-choice .block-title {
    margin-top: .9375rem;
  }
}

/* Заявка: до 640px поля друг под другом, шире — по два в строку (город и тариф, адрес и телефон) */
.gm-fields {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .gm-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .gm-lines .game-line + .game-line { margin-top: 3.5rem; padding-top: 3.5rem; }
}