/* ==========================================================================
   Периметр — раздел статей.

   Отдельный файл от styles.css лендинга: страницы статей собирает движок, и
   тащить на них стили всей главной незачем. Токены продублированы намеренно —
   это один сайт, а связи между файлами на сервере нет.

   ЗАМЫСЕЛ тот же, что на лендинге: охраняемый контур. Чистый монохром, роль
   акцента играет белый свет, а не цвет; углы отмечены засечками; разделители —
   линии, а не плашки. Светящихся градиентов нет ни одного.

   Префикс классов pm-. Имена блоков не повторяют раздел статей действующего
   сайта (.post*, .crumbs, .listing*, .cta-*, .try-*, .related-*).
   ========================================================================== */

:root {
  --pm-base: #0d0e0f;
  --pm-base-2: #121314;
  --pm-slab: #17181a;
  --pm-slab-2: #1e1f21;

  --pm-light: #f5f5f4;
  --pm-grey: #a6a7a5;
  --pm-mute: #76787a;

  --pm-line: rgba(245, 245, 244, 0.13);
  --pm-line-soft: rgba(245, 245, 244, 0.07);

  --pm-beam: #ffffff;
  --pm-on: #e8e8e6;

  --pm-tg: #2a7391;
  --pm-tg-hot: #3286a8;

  --pm-hold: 1180px;
  --pm-text: 760px;
  --pm-r: 4px;
  --pm-r-lg: 6px;
  --pm-block: clamp(48px, 4.8vw, 76px);

  --pm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
  background: var(--pm-base);
}

body {
  margin: 0;
  background: var(--pm-base);
  color: var(--pm-light);
  font-family: "Inter Tight", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--pm-beam);
  outline-offset: 3px;
}

.pm-skip {
  position: absolute;
  left: -9999px;
}

.pm-skip:focus {
  left: 16px;
  top: 16px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--pm-light);
  color: var(--pm-base);
  border-radius: var(--pm-r);
}

.pm-hold {
  width: 100%;
  max-width: var(--pm-hold);
  margin: 0 auto;
  padding: 0 24px;
}

/* ───────────────────────────── Метка раздела ───────────────────────────── */

.pm-tag {
  margin-bottom: 14px;
  color: var(--pm-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ────────────────────────────── Кнопки ────────────────────────────────── */

.pm-act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--pm-r);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s var(--pm-ease), border-color 0.2s var(--pm-ease),
    color 0.2s var(--pm-ease);
}

.pm-act--solid {
  background: var(--pm-light);
  color: var(--pm-base);
}

.pm-act--solid:hover {
  background: var(--pm-beam);
}

.pm-act--line {
  border-color: var(--pm-line);
  color: var(--pm-light);
}

.pm-act--line:hover {
  border-color: var(--pm-grey);
}

.pm-act--tg {
  background: var(--pm-tg);
  color: var(--pm-light);
}

.pm-act--tg:hover {
  background: var(--pm-tg-hot);
}

/* Ненастроенный бот: кнопка видна, но мертва — забытый токен обязан бросаться
   в глаза, а не прятаться. */
.pm-act--off {
  border-color: var(--pm-line);
  color: var(--pm-mute);
  cursor: not-allowed;
}

.pm-act--sm {
  padding: 9px 15px;
  font-size: 14px;
}

/* ─────────────────────────────── Шапка ─────────────────────────────────── */

.pm-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(13, 14, 15, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pm-line-soft);
}

.pm-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--pm-hold);
  margin: 0 auto;
  padding: 14px 24px;
}

.pm-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.pm-mark-box {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--pm-light);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-r);
}

.pm-mark-word {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pm-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-menu-link {
  padding: 9px 12px;
  color: var(--pm-grey);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s var(--pm-ease);
}

.pm-menu-link:hover {
  color: var(--pm-light);
}

.pm-main {
  display: block;
  padding-bottom: var(--pm-block);
}

/* ─────────────────────────── Хлебные крошки ───────────────────────────── */

.pm-trace {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--pm-hold);
  margin: 0 auto;
  padding: 26px 24px 0;
  color: var(--pm-mute);
  font-size: 13px;
}

.pm-trace a {
  color: var(--pm-mute);
  text-decoration: none;
}

.pm-trace a:hover {
  color: var(--pm-light);
}

/* Засечка вместо слэша — тот же знак, что в углах рамок лендинга. */
.pm-trace-tick {
  width: 10px;
  height: 6px;
  border-left: 1px solid var(--pm-line);
  border-bottom: 1px solid var(--pm-line);
}

/* ──────────────────────────── Сама статья ─────────────────────────────── */

.pm-doc {
  padding-top: 34px;
}

.pm-doc-head {
  max-width: 18em;
  font-size: clamp(30px, 4.1vw, 48px);
}

.pm-doc-lead {
  max-width: var(--pm-text);
  margin-top: 20px;
  color: var(--pm-grey);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
}

.pm-doc-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--pm-line-soft);
  color: var(--pm-mute);
  font-size: 13px;
}

.pm-doc-dot {
  color: var(--pm-line);
}

/* Кадр во всю ширину окна и в монохроме. Серый фильтр обязателен: цветной
   снимок в палитре без хроматического акцента выглядит чужой вставкой. */
.pm-doc-slab {
  margin: var(--pm-block) 0;
  border-top: 1px solid var(--pm-line-soft);
  border-bottom: 1px solid var(--pm-line-soft);
}

.pm-doc-slab img {
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  object-fit: cover;
  filter: grayscale(1) brightness(0.72) contrast(1.08);
}

/* ─────────────────────────── Содержание ───────────────────────────────── */

/* Нумерованный список в потоке текста, а не липкая боковая колонка: у этого
   сегмента статьи процедурные, и «по порядку» здесь честнее, чем «в этой
   статье». */
.pm-steps {
  max-width: var(--pm-text);
  margin: 0 0 var(--pm-block);
  padding: 22px 24px;
  background: var(--pm-base-2);
  border: 1px solid var(--pm-line-soft);
  border-left: 2px solid var(--pm-line);
  border-radius: 0 var(--pm-r) var(--pm-r) 0;
}

.pm-steps-title {
  margin-bottom: 12px;
  color: var(--pm-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pm-steps ol {
  counter-reset: pm-step;
  display: grid;
  gap: 9px;
}

.pm-steps li {
  display: flex;
  gap: 12px;
  counter-increment: pm-step;
}

.pm-steps li::before {
  content: counter(pm-step, decimal-leading-zero);
  flex: none;
  color: var(--pm-mute);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.pm-steps a {
  color: var(--pm-grey);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--pm-ease), border-color 0.2s var(--pm-ease);
}

.pm-steps a:hover {
  color: var(--pm-light);
  border-bottom-color: var(--pm-line);
}

/* ──────────────────────── Тело статьи от движка ───────────────────────── */

.pm-text {
  max-width: var(--pm-text);
}

.pm-text h2 {
  margin: calc(var(--pm-block) * 0.78) 0 18px;
  font-size: clamp(23px, 2.3vw, 30px);
  scroll-margin-top: 96px;
}

.pm-text h2:first-child {
  margin-top: 0;
}

.pm-text h3 {
  margin: 34px 0 14px;
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 600;
}

.pm-text p {
  margin: 0 0 18px;
  color: var(--pm-on);
}

/* Текст приходит от модели: там попадаются длинные имена пунктов меню и
   адреса, которые без переноса вылезают за колонку. */
.pm-text {
  overflow-wrap: break-word;
}

.pm-text strong {
  color: var(--pm-light);
  font-weight: 600;
}

.pm-text a {
  color: var(--pm-light);
  text-decoration: none;
  border-bottom: 1px solid var(--pm-grey);
}

.pm-text a:hover {
  border-bottom-color: var(--pm-light);
}

.pm-text ul,
.pm-text ol {
  display: grid;
  gap: 11px;
  margin: 0 0 22px;
  color: var(--pm-on);
}

.pm-text ul li {
  display: flex;
  gap: 12px;
}

/* Маркер — короткая засечка, а не точка: тот же знак, что в углах рамок. */
.pm-text ul li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 1px;
  margin-top: 14px;
  background: var(--pm-grey);
}

.pm-text ol {
  counter-reset: pm-item;
}

.pm-text ol li {
  display: flex;
  gap: 14px;
  counter-increment: pm-item;
}

.pm-text ol li::before {
  content: counter(pm-item) ".";
  flex: none;
  min-width: 1.4em;
  color: var(--pm-mute);
  font-variant-numeric: tabular-nums;
}

.pm-text blockquote {
  margin: 26px 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--pm-line);
  color: var(--pm-grey);
}

.pm-text code {
  padding: 2px 6px;
  background: var(--pm-slab);
  border: 1px solid var(--pm-line-soft);
  border-radius: 3px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 14px;
}

/* Таблица различий моделей — основной структурный блок этого сегмента,
   поэтому она не «оформлена слегка», а разобрана по строкам. */
.pm-text table {
  width: 100%;
  margin: 0 0 26px;
  border-collapse: collapse;
  font-size: 15px;
}

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

.pm-text th {
  color: var(--pm-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom-color: var(--pm-line);
}

.pm-text td {
  color: var(--pm-on);
}

.pm-text tr:last-child td {
  border-bottom: none;
}

.pm-text-shot {
  margin: 30px 0;
}

.pm-text-shot img {
  width: 100%;
  border: 1px solid var(--pm-line-soft);
  border-radius: var(--pm-r);
  filter: grayscale(1) brightness(0.76) contrast(1.06);
}

/* ──────────────────────────── Вопросы ────────────────────────────────── */

.pm-asked {
  max-width: var(--pm-text);
  margin-top: var(--pm-block);
  padding-top: 30px;
  border-top: 1px solid var(--pm-line);
}

.pm-asked h2 {
  margin-bottom: 24px;
  font-size: clamp(22px, 2.1vw, 28px);
}

.pm-asked-list {
  counter-reset: pm-ask;
  display: grid;
  gap: 24px;
}

.pm-asked-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 14px;
  counter-increment: pm-ask;
}

.pm-asked-list li::before {
  content: counter(pm-ask, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 3px;
  color: var(--pm-mute);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.pm-asked-q {
  font-size: 17px;
  font-weight: 600;
}

.pm-asked-a {
  color: var(--pm-grey);
}

/* ───────────────────────── Врезка в статье ───────────────────────────── */

.pm-call {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--pm-text);
  margin: calc(var(--pm-block) * 0.8) 0;
  padding: 24px 26px;
  background: var(--pm-base-2);
  border: 1px solid var(--pm-line-soft);
  border-radius: var(--pm-r);
  text-decoration: none;
}

/* Луч по левому краю: роль акцента играет свет, а не цветная плашка. */
.pm-call-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--pm-beam) 45%,
    transparent
  );
  opacity: 0.55;
}

.pm-call-copy {
  display: grid;
  gap: 7px;
}

.pm-call-head {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pm-call-sub {
  color: var(--pm-grey);
  font-size: 15px;
}

.pm-call-trust {
  color: var(--pm-mute);
  font-size: 13px;
}

/* ───────────────────── Продающий блок в конце ────────────────────────── */

.pm-deal {
  margin-top: var(--pm-block);
  padding: var(--pm-block) 0;
  background: var(--pm-base-2);
  border-top: 1px solid var(--pm-line-soft);
  border-bottom: 1px solid var(--pm-line-soft);
}

.pm-deal-head {
  max-width: 20em;
  font-size: clamp(25px, 2.8vw, 36px);
}

.pm-deal-sub {
  max-width: 44em;
  margin-top: 16px;
  color: var(--pm-grey);
  font-size: 17px;
}

.pm-deal-note {
  max-width: 44em;
  margin-top: 12px;
  color: var(--pm-mute);
  font-size: 15px;
}

/* Два пути строками у общей линии, а не парой карточек-близнецов. */
.pm-deal-ways {
  display: grid;
  gap: 1px;
  margin-top: 34px;
  background: var(--pm-line-soft);
  border: 1px solid var(--pm-line-soft);
  border-radius: var(--pm-r);
  overflow: hidden;
}

.pm-deal-way {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 10px 24px;
  padding: 24px 26px;
  background: var(--pm-base);
}

.pm-deal-label {
  color: var(--pm-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pm-deal-title {
  grid-column: 1;
  grid-row: 2;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pm-deal-text {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--pm-grey);
  font-size: 15px;
}

.pm-deal-way .pm-act {
  grid-column: 3;
  grid-row: 1 / span 2;
}

/* Шкала сроков — отметки на линии, как в блоке цен лендинга. */
.pm-deal-scale {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 1px;
  background: var(--pm-line-soft);
  border: 1px solid var(--pm-line-soft);
  border-top: none;
  border-radius: 0 0 var(--pm-r) var(--pm-r);
  overflow: hidden;
}

.pm-deal-mark {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  background: var(--pm-base);
  color: var(--pm-light);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s var(--pm-ease);
}

.pm-deal-mark b {
  color: var(--pm-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pm-deal-mark:hover {
  background: var(--pm-slab);
}

.pm-deal-mark--pick {
  background: var(--pm-slab-2);
}

.pm-deal-trust {
  margin-top: 20px;
  color: var(--pm-mute);
  font-size: 13px;
}

/* ───────────────────────── Список материалов ─────────────────────────── */

.pm-index {
  padding-top: 34px;
}

.pm-index-head {
  font-size: clamp(30px, 4vw, 46px);
}

.pm-index-sub {
  max-width: 46em;
  margin-top: 18px;
  color: var(--pm-grey);
  font-size: 18px;
}

.pm-index-count {
  margin-top: 14px;
  color: var(--pm-mute);
  font-size: 13px;
}

.pm-index-list,
.pm-next-list {
  counter-reset: pm-row;
  display: grid;
  margin-top: 34px;
  border-top: 1px solid var(--pm-line-soft);
}

.pm-index-list li,
.pm-next-list li {
  counter-increment: pm-row;
  border-bottom: 1px solid var(--pm-line-soft);
}

.pm-index-list a,
.pm-next-list a {
  display: grid;
  grid-template-columns: 56px minmax(0, 26em) 1fr;
  gap: 6px 20px;
  align-items: baseline;
  padding: 22px 0;
  text-decoration: none;
  transition: background 0.2s var(--pm-ease);
}

.pm-index-list a::before,
.pm-next-list a::before {
  content: counter(pm-row, decimal-leading-zero);
  color: var(--pm-mute);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.pm-index-list a:hover,
.pm-next-list a:hover {
  background: var(--pm-base-2);
}

.pm-index-title,
.pm-next-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pm-index-lead,
.pm-next-lead {
  color: var(--pm-mute);
  font-size: 15px;
}

.pm-next {
  margin-top: var(--pm-block);
}

.pm-next-head {
  font-size: clamp(22px, 2.1vw, 28px);
}

/* ─────────────────────────────── Подвал ───────────────────────────────── */

.pm-foot {
  border-top: 1px solid var(--pm-line-soft);
  padding: 30px 0;
}

.pm-foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--pm-mute);
  font-size: 14px;
}

.pm-foot-mark {
  color: var(--pm-light);
  font-weight: 600;
}

.pm-foot-nav {
  display: flex;
  gap: 18px;
}

.pm-foot-nav a {
  color: var(--pm-mute);
  text-decoration: none;
}

.pm-foot-nav a:hover {
  color: var(--pm-light);
}

/* ───────────────────────────── Узкий экран ────────────────────────────── */

@media (max-width: 900px) {
  .pm-deal-way {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pm-deal-title,
  .pm-deal-text,
  .pm-deal-way .pm-act {
    grid-column: 1;
    grid-row: auto;
  }

  .pm-deal-way .pm-act {
    justify-self: start;
  }

  .pm-deal-scale {
    grid-template-columns: repeat(2, 1fr);
  }

  .pm-index-list a,
  .pm-next-list a {
    grid-template-columns: 40px 1fr;
  }

  .pm-index-lead,
  .pm-next-lead {
    grid-column: 2;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 16px;
  }

  .pm-hold,
  .pm-bar-inner,
  .pm-trace {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Разделы на узком экране убираем из шапки: названия длинные и ломают
     строку. Переходы остаются в подвале и в крошках. */
  .pm-menu-link {
    display: none;
  }

  .pm-steps {
    padding: 18px 18px;
  }

  .pm-asked-list li {
    grid-template-columns: 26px 1fr;
  }

  /* Таблицу на узком экране не оборачиваем в прокрутку: обёртку мог бы дать
     только <div>, а гейт качества вырезает из текста модели все теги, кроме
     разрешённых, и div среди них нет. Поэтому уменьшаем шрифт и отбивку —
     три колонки коротких значений в 354 px читаются. */
  .pm-text table {
    font-size: 14px;
  }

  .pm-text th,
  .pm-text td {
    padding: 10px 8px;
  }

  .pm-call {
    flex-direction: column;
    align-items: flex-start;
  }

  .pm-foot-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}