/* ============================================================
   pronakrutka.ru — design system v2 (тёмная неоновая)
   Namespace: .pn-*

   Дизайн-язык взят с референса, утверждённого владельцем 2026-08-22:
   тёмная база, неоновый зелёный акцент со свечением, крупная
   гротескная типографика Unbounded для заголовков и Onest для текста,
   карточки со скруглением 16px и полупрозрачной границей,
   вертикальный ритм секций 130px.

   Шрифты подключены локально (кириллица + латиница): Google отдаёт их
   из России нестабильно, внешний запрос был бы точкой отказа.
   ============================================================ */

@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/onest-400-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/onest-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/onest-600-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/onest-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/unbounded-600-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/unbounded-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/unbounded-900-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/unbounded-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  /* нативные контролы (select, checkbox, скроллбары) должны быть тёмными,
     иначе браузер рисует их светлыми поверх тёмной страницы */
  color-scheme: dark;

  /* --- база --- */
  --pn-black:      #08090C;
  --pn-dark:       #0E0F14;
  --pn-card:       #13151C;
  --pn-card-hi:    #191C25;
  --pn-border:     rgba(255, 255, 255, .07);
  --pn-border-hi:  rgba(255, 255, 255, .14);

  /* --- акценты --- */
  --pn-green:      #00FF87;
  --pn-green-dim:  rgba(0, 255, 135, .12);
  --pn-green-glow: rgba(0, 255, 135, .30);
  --pn-green-deep: #006621;
  --pn-purple:     #7B5CF0;
  --pn-purple-dim: rgba(123, 92, 240, .12);
  --pn-warn:       #FFC65C;
  --pn-warn-dim:   rgba(255, 198, 92, .10);

  /* --- текст ---
     У референса приглушённый текст задан прозрачностью .45 — на тёмном фоне
     это 4.2:1, ниже порога WCAG AA. Держим .68: читаемость важнее буквального
     повторения, визуально разница почти незаметна. */
  --pn-white:      #F0F2F8;
  --pn-text:       rgba(240, 242, 248, .86);
  --pn-muted:      rgba(240, 242, 248, .68);
  /* .45 как у референса давало 4.14:1 на подписях — ниже порога. Мелкий текст
     (подписи фактов, метки кейсов, крошки) требует те же 4.5:1, поэтому .60 */
  --pn-faint:      rgba(240, 242, 248, .60);

  /* --- совместимость со старыми именами (страницы их используют) --- */
  --pn-paper:      var(--pn-black);
  --pn-paper-deep: var(--pn-dark);
  --pn-ink:        var(--pn-white);
  --pn-ink-soft:   var(--pn-text);
  --pn-ink-mute:   var(--pn-muted);
  --pn-line:       var(--pn-border);
  --pn-line-hard:  var(--pn-border-hi);
  --pn-brand:      var(--pn-green);
  --pn-brand-deep: #00D46F;
  --pn-brand-wash: var(--pn-green-dim);
  --pn-second:     var(--pn-purple);
  --pn-second-wash:var(--pn-purple-dim);
  --pn-ok:         var(--pn-green);
  --pn-warn-wash:  var(--pn-warn-dim);

  /* --- типографика --- */
  --pn-head: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --pn-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pn-serif: var(--pn-head);
  --pn-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* --- ритм --- */
  --pn-s1: 4px;  --pn-s2: 8px;  --pn-s3: 14px; --pn-s4: 20px;
  --pn-s5: 28px; --pn-s6: 44px; --pn-s7: 72px; --pn-s8: 130px;

  --pn-wrap: 1140px;
  --pn-radius: 16px;
  --pn-radius-sm: 8px;
  --pn-rule: 1px solid var(--pn-border);
  --pn-rule-hard: 1px solid var(--pn-border-hi);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--pn-black); }

body {
  margin: 0;
  background: var(--pn-black);
  color: var(--pn-text);
  font-family: var(--pn-sans);
  font-size: 17px;
  /* 1.75 — интерлиньяж для узкой книжной колонки; на 335 px мобильного
     контента он превращается в лишний воздух между каждой строкой, а строк
     на этих страницах тысячи. 1.65 при 17 px даёт 28 px — по-прежнему
     просторно, но главная становится короче примерно на пол-экрана. */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--pn-head);
  color: var(--pn-white);
  margin: 0 0 var(--pn-s4);
  line-height: 1.1;
  /* Русские слова длинные, а Unbounded — широкий шрифт: «коэффициенты» на
     32 пикселях занимает больше трёхсот, то есть шире всей колонки на
     телефоне. Заголовок при этом честно сообщал свою ширину как 303px,
     а текст рисовался за краем и тянул горизонтальную прокрутку всей страницы.
     Поэтому разрешаем перенос слова — но только как крайнюю меру.

     `hyphens: auto` здесь стоять не должен: он переносит по слогам не когда
     не хватает места, а когда так «ровнее» строка. На главной это дало
     «Накрутка го-лосов в интер-нет-голосованиях» в самом крупном заголовке
     сайта. overflow-wrap срабатывает только если слово физически не влезает,
     и это ровно то поведение, которое здесь нужно. */
  overflow-wrap: break-word;
}
/* Нижние границы clamp разведены. На 375 px оба размера упирались в минимум,
   и заголовок страницы отличался от заголовка раздела на два пункта — 28 и
   26: иерархии на телефоне не было вовсе. Заодно заголовок из пяти строк
   («Накрутка голосов ВКонтакте: расчёт, подача, отчёт») становится короче на
   строку, а это единственный способ выиграть высоту первого экрана, не трогая
   текст. Разрядка на мобильном тоже убрана: 1.5 px на 26-м кегле только
   растягивает и без того длинные строки. */
h1 { font-size: clamp(26px, 5vw, 58px); font-weight: 900; letter-spacing: 1.5px; }
h2 { font-size: clamp(22px, 3.4vw, 44px); font-weight: 600; letter-spacing: .5px; margin-top: var(--pn-s7); }
@media (max-width: 620px) { h1 { letter-spacing: .4px; } }
h3 { font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; margin-top: var(--pn-s5); }
h4 { font-size: 18px; font-weight: 600; margin-top: var(--pn-s4); }

p { margin: 0 0 var(--pn-s3); }
ul, ol { margin: 0 0 var(--pn-s3); padding-left: 22px; }
li { margin-bottom: var(--pn-s2); }
strong, b { font-weight: 600; color: var(--pn-white); }
small { font-size: 14px; }

a { color: var(--pn-green); text-decoration: none; border-bottom: 1px solid rgba(0, 255, 135, .3); transition: border-color .15s, color .15s; }
a:hover { color: #6BFFB8; border-bottom-color: var(--pn-green); }

img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--pn-green); color: var(--pn-black); }

/* ------------------------------------------------------------ layout */
.pn-wrap { width: 100%; max-width: var(--pn-wrap); margin: 0 auto; padding: 0 var(--pn-s4); }
.pn-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--pn-s7); align-items: start; }
.pn-main { min-width: 0; }
.pn-aside { position: sticky; top: 92px; }

.pn-band { padding: var(--pn-s8) 0; }
.pn-band--deep { background: var(--pn-dark); }
.pn-band--ink { background: var(--pn-card); }

/* ------------------------------------------------------------ header */
.pn-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 9, 12, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: var(--pn-rule);
}
.pn-head__row { display: flex; align-items: center; gap: var(--pn-s4); min-height: 72px; }
.pn-logo { font-family: var(--pn-head); font-size: 19px; font-weight: 900; letter-spacing: .5px; color: var(--pn-white); border: none; }
.pn-logo span { color: var(--pn-green); }
.pn-logo:hover { color: var(--pn-white); }
.pn-nav { display: flex; gap: var(--pn-s5); margin-left: auto; }
.pn-nav a { color: var(--pn-muted); font-size: 15px; font-weight: 500; border: none; padding: 4px 0; }
.pn-nav a:hover, .pn-nav a[aria-current="page"] { color: var(--pn-white); }
.pn-nav a[aria-current="page"] { border-bottom: 1px solid var(--pn-green); }
.pn-burger { display: none; background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius-sm); color: var(--pn-white); padding: 9px 14px; font: 500 15px var(--pn-sans); cursor: pointer; }

/* ------------------------------------------------------------ buttons */
.pn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px/1 var(--pn-sans);
  padding: 16px 28px; border-radius: var(--pn-radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
  background: var(--pn-card-hi); color: var(--pn-white);
}
.pn-btn:hover { transform: translateY(-2px); color: var(--pn-white); }
.pn-btn--brand { background: var(--pn-green); color: var(--pn-black); box-shadow: 0 4px 24px var(--pn-green-glow); }
.pn-btn--brand:hover { background: #3BFFA3; color: var(--pn-black); box-shadow: 0 8px 34px var(--pn-green-glow); }
.pn-btn--ghost { background: transparent; border-color: var(--pn-border-hi); color: var(--pn-white); }
.pn-btn--ghost:hover { border-color: var(--pn-green); color: var(--pn-green); }
.pn-btn--wide { width: 100%; }
.pn-btn--sm { padding: 11px 18px; font-size: 15px; }

/* ------------------------------------------------------------ hero */
.pn-hero { padding: var(--pn-s7) 0 var(--pn-s6); }
/* Порядок первого экрана задаётся здесь, а не в разметке.
   Замер на 375 px: первая кнопка стояла на 1101-м пикселе — человек с
   телефона видел заголовок, абзац и ещё один абзац, но ни кнопки, ни цены,
   ни одной цифры. Виноват порядок: между лидом и кнопками стоял блок
   развёрнутого ответа (`pn-answer`, 427 px), написанный для поисковых
   роботов и для тех, кто уже дочитал до вопроса «сколько стоит».
   Разметку трогать нельзя: порядок блоков зафиксирован в BUILD_CARD и нужен
   для чтения с экрана и для роботов. Меняем только ВИДИМЫЙ порядок — кнопки
   и цифры поднимаются к заголовку, развёрнутый ответ и форма уходят ниже.
   Фокусируемых элементов это не путает: до кнопок в hero их нет вовсе, а
   кнопки и поля формы сохраняют взаимный порядок «сначала кнопки». */
.pn-hero > .pn-wrap { display: flex; flex-direction: column; gap: var(--pn-s5); }
/* В колоночном флексе отступы соседей не схлопываются, как в обычном потоке:
   без обнуления интервал стал бы суммой двух margin вместо большего из них. */
.pn-hero > .pn-wrap > * { margin-top: 0; margin-bottom: 0; min-width: 0; }
/* Флекс по умолчанию растягивает элементы на всю ширину, и кикер из
   компактной плашки превратился в зелёную полосу во весь экран. */
.pn-hero > .pn-wrap > .pn-hero__kicker { align-self: flex-start; }
.pn-hero > .pn-wrap > .pn-metrics { order: 1; }
.pn-hero > .pn-wrap > .pn-answer  { order: 2; }
.pn-hero > .pn-wrap > .pn-lead    { order: 3; }
.pn-hero > .pn-wrap > .pn-badges  { order: 4; }
/* На телефоне первый экран — 812 px, из них 73 занимает шапка. На внутренних
   страницах над кнопкой стоят крошки (45), кикер (31), заголовок (154) и лид
   (499) — суммарно больше, чем весь экран. Текст сокращать нельзя, поэтому
   ужимаем то, что можно ужать без потери смысла: лид на полтора пункта и
   промежутки между блоками. Кнопка при этом попадает в первый экран хотя бы
   краем, а дальше её подхватывает липкая плашка. */
@media (max-width: 620px) {
  .pn-hero > .pn-wrap { gap: var(--pn-s4); }
  .pn-hero__lead { font-size: 17.5px; line-height: 1.55; }
  .pn-hero { padding-top: var(--pn-s6); }

}
.pn-hero__kicker {
  display: inline-block; font: 600 13px/1 var(--pn-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--pn-green); background: var(--pn-green-dim);
  padding: 9px 16px; border-radius: 99px; margin-bottom: var(--pn-s4);
}
.pn-hero__lead { font-size: 19px; color: var(--pn-muted); max-width: 62ch; margin-bottom: var(--pn-s5); }
.pn-hero__cta { display: flex; flex-wrap: wrap; gap: var(--pn-s3); margin-bottom: var(--pn-s5); }
.pn-hero__trust { display: flex; flex-wrap: wrap; gap: var(--pn-s3) var(--pn-s6); font-size: 15px; color: var(--pn-muted); padding-top: var(--pn-s4); border-top: var(--pn-rule); }
.pn-hero__trust b { color: var(--pn-white); }

/* ------------------------------------------------- AEO: прямой ответ */
.pn-answer {
  background: linear-gradient(180deg, var(--pn-card) 0%, var(--pn-dark) 100%);
  border: var(--pn-rule); border-left: 3px solid var(--pn-green);
  border-radius: var(--pn-radius);
  padding: var(--pn-s5); margin: var(--pn-s5) 0;
  font-size: 18px; color: var(--pn-text);
}
.pn-answer__label { display: block; font: 600 12px/1 var(--pn-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pn-green); margin-bottom: 10px; }

/* --------------------------------------------- AEO: TL;DR и факты */
.pn-tldr { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s6); margin: var(--pn-s5) 0; }
.pn-tldr h2 { margin: 0 0 var(--pn-s4); font-size: 22px; }
/* 185px не помещались дважды в 320-й экран, и пять карточек фактов вставали
   в один столбец на 550 пикселей. Факты здесь короткие — «2 часа», «от 2 ₽»,
   «100 голосов», — и в две колонки читаются лучше, чем в одну простынёй. */
.pn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--pn-s4); }
.pn-fact { padding-right: var(--pn-s4); }
.pn-fact dt { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--pn-faint); margin-bottom: 6px; }
.pn-fact dd { margin: 0; font-family: var(--pn-head); font-size: 22px; font-weight: 600; color: var(--pn-white); }
.pn-fact dd small { display: block; font-family: var(--pn-sans); font-size: 14px; font-weight: 400; color: var(--pn-muted); margin-top: 3px; }

/* ------------------------------------------------------- метрики */
/* 160 px не помещались вдвоём в 335 px контента на телефоне (160+160+20 = 340),
   и сетка молча схлопывалась в один столбец: четыре числа занимали 607 px —
   почти экран на четыре слова. 140 px дают два столбца уже на 375 px. */
.pn-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--pn-s4); margin: var(--pn-s6) 0; }
.pn-metric { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s5); }
.pn-metric__num { font-family: var(--pn-head); font-size: clamp(32px, 4vw, 48px); font-weight: 900; line-height: 1; color: var(--pn-green); letter-spacing: -.01em; }
.pn-metric__num span { font-size: .5em; font-weight: 600; }
.pn-metric__label { font-size: 14px; color: var(--pn-muted); margin-top: 10px; line-height: 1.5; }

/* --------------------------------------------------------- боли */
.pn-pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--pn-s4); margin: var(--pn-s6) 0; }
.pn-pain { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s5); transition: border-color .2s; }
.pn-pain:hover { border-color: var(--pn-border-hi); }
.pn-pain b { display: block; font-family: var(--pn-head); font-size: 17px; font-weight: 600; margin-bottom: 10px; color: var(--pn-white); }
.pn-pain span { font-size: 15px; color: var(--pn-muted); }

/* -------------------------------------------------------- кейсы */
.pn-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--pn-s4); margin: var(--pn-s6) 0; list-style: none; padding: 0; }
.pn-case { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s5); margin: 0; }
.pn-case__meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pn-faint); margin-bottom: 12px; }
.pn-case__top { display: flex; align-items: baseline; gap: 8px; font-family: var(--pn-head); font-weight: 900; font-size: 30px; color: var(--pn-green); }
.pn-case__top i { font-style: normal; font-size: 14px; font-weight: 400; color: var(--pn-muted); font-family: var(--pn-sans); }
.pn-case p { font-size: 15px; color: var(--pn-muted); margin: 12px 0 0; }

/* ------------------------------------------------- сравнение до/после */
.pn-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pn-s4); margin: var(--pn-s6) 0; }
.pn-compare__side { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s5); }
.pn-compare__side--after { border-color: rgba(0, 255, 135, .35); background: linear-gradient(180deg, var(--pn-green-dim) 0%, var(--pn-card) 60%); }
.pn-compare__tag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pn-faint); margin-bottom: 10px; }
.pn-compare__side--after .pn-compare__tag { color: var(--pn-green); }
.pn-compare__val { font-family: var(--pn-head); font-size: 32px; font-weight: 900; line-height: 1.1; color: var(--pn-white); }
.pn-compare__side--after .pn-compare__val { color: var(--pn-green); }
.pn-compare__note { font-size: 14px; color: var(--pn-muted); margin-top: 12px; }

/* ------------------------------------------------------- матрица */
.pn-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--pn-s4); margin: var(--pn-s6) 0; }
.pn-matrix__col { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s5); }
.pn-matrix__head { font-family: var(--pn-head); font-size: 18px; font-weight: 600; color: var(--pn-white); padding-bottom: var(--pn-s3); border-bottom: var(--pn-rule); margin-bottom: var(--pn-s4); }
.pn-matrix ul { list-style: none; padding: 0; margin: 0; font-size: 15px; color: var(--pn-muted); }
.pn-matrix li { padding-left: 24px; position: relative; margin-bottom: 12px; }
.pn-matrix li::before { content: "✦"; position: absolute; left: 0; color: var(--pn-green); font-size: 12px; }

/* ------------------------------------------------------- таблицы */
.pn-table-scroll { overflow-x: auto; margin: var(--pn-s5) 0; border: var(--pn-rule); border-radius: var(--pn-radius); }
.pn-table { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--pn-card); }
.pn-table th, .pn-table td { text-align: left; padding: 16px 20px; border-bottom: var(--pn-rule); vertical-align: top; color: var(--pn-text); }
.pn-table thead th { background: var(--pn-card-hi); font: 600 13px/1.4 var(--pn-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--pn-muted); }
.pn-table tbody tr:last-child td { border-bottom: none; }
.pn-table tbody tr:hover { background: rgba(255, 255, 255, .02); }

/* -------------------------------------------------------- тарифы */
/* Пакетов ровно три, и на десктопе они должны стоять втроём в ряд. При
   минимуме 250px в основную колонку шириной 688 помещалось только две
   карточки, и третья — «Про» — падала вниз одна во всю ширину: сетка
   выглядела сломанной, а самый дорогой пакет — случайно выделенным.
   210px хватает трём колонкам, а на узком экране auto-fit всё равно
   свернёт их в один столбец. */
.pn-tariffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--pn-s4); margin: var(--pn-s6) 0; }
.pn-tariff { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s6) var(--pn-s5); display: flex; flex-direction: column; }
.pn-tariff--pick { border-color: rgba(0, 255, 135, .4); box-shadow: 0 0 40px rgba(0, 255, 135, .10); }
.pn-tariff__name { font-family: var(--pn-head); font-size: 22px; font-weight: 600; color: var(--pn-white); margin-bottom: 6px; }
.pn-tariff__note { font-size: 14px; color: var(--pn-faint); margin-bottom: var(--pn-s4); }
.pn-tariff__price { font-family: var(--pn-head); font-size: 40px; font-weight: 900; line-height: 1; color: var(--pn-green); }
.pn-tariff__price span { font-family: var(--pn-sans); font-size: 15px; font-weight: 400; color: var(--pn-muted); }
.pn-tariff ul { list-style: none; padding: 0; margin: var(--pn-s4) 0; font-size: 15px; color: var(--pn-muted); }
.pn-tariff li { padding-left: 24px; position: relative; margin-bottom: 10px; }
.pn-tariff li::before { content: "✓"; position: absolute; left: 0; color: var(--pn-green); font-weight: 600; }
.pn-tariff .pn-btn { margin-top: auto; }

/* -------------------------------------------------------- процесс */
.pn-steps { counter-reset: pn-step; list-style: none; padding: 0; margin: var(--pn-s6) 0; }
.pn-steps li { counter-increment: pn-step; position: relative; padding: 0 0 var(--pn-s5) var(--pn-s7); border-left: var(--pn-rule); margin-left: 21px; }
.pn-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pn-steps li::before {
  content: counter(pn-step); position: absolute; left: -21px; top: -4px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--pn-card); border: 1px solid var(--pn-border-hi); color: var(--pn-green);
  font: 900 16px/40px var(--pn-head); text-align: center;
}
.pn-steps b { display: block; font-family: var(--pn-head); font-size: 18px; font-weight: 600; color: var(--pn-white); margin-bottom: 6px; }
.pn-steps time { display: inline-block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pn-green); background: var(--pn-green-dim); padding: 4px 10px; border-radius: 99px; margin-bottom: 8px; }

/* --------------------------------------------------------- заметки */
.pn-note { background: var(--pn-card); border: var(--pn-rule); border-left: 3px solid var(--pn-purple); border-radius: var(--pn-radius); padding: var(--pn-s5); margin: var(--pn-s5) 0; }
.pn-note--warn { border-left-color: var(--pn-warn); background: linear-gradient(180deg, var(--pn-warn-dim) 0%, var(--pn-card) 70%); }
.pn-note__title { font-family: var(--pn-head); font-weight: 600; color: var(--pn-white); margin-bottom: 10px; }

/* ------------------------------------------------------------ FAQ */
.pn-faq { margin: var(--pn-s6) 0; display: grid; gap: var(--pn-s3); }
.pn-faq details { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); overflow: hidden; }
.pn-faq details[open] { border-color: var(--pn-border-hi); }
.pn-faq summary {
  cursor: pointer; list-style: none; padding: var(--pn-s5) 56px var(--pn-s5) var(--pn-s5); position: relative;
  font-family: var(--pn-head); font-size: 17px; font-weight: 600; color: var(--pn-white);
}
.pn-faq summary::-webkit-details-marker { display: none; }
.pn-faq summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--pn-green-dim); color: var(--pn-green);
  font: 400 20px/26px var(--pn-sans); text-align: center;
}
.pn-faq details[open] summary::after { content: "–"; }
.pn-faq__body { padding: 0 var(--pn-s5) var(--pn-s5); color: var(--pn-muted); max-width: 78ch; }

/* --------------------------------------------------- карточка сбоку */
.pn-card { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s5); margin-bottom: var(--pn-s4); }
.pn-card__title { font-family: var(--pn-head); font-size: 18px; font-weight: 600; color: var(--pn-white); margin-bottom: var(--pn-s3); }
.pn-card__price { font-family: var(--pn-head); font-size: 32px; font-weight: 900; line-height: 1.1; color: var(--pn-green); }
.pn-card__price span { font-family: var(--pn-sans); font-size: 14px; font-weight: 400; color: var(--pn-muted); }
.pn-card ul { font-size: 15px; padding-left: 20px; color: var(--pn-muted); }

/* ------------------------------------------------------ перелинковка */
/* Блок перелинковки — компактные плашки.
   Раньше каждая ссылка была карточкой в две строки: заголовок и подпись под ним.
   Подпись брали из графа, и у 604 ссылок из 967 она дословно повторяла заголовок —
   на экране одна и та же фраза печаталась дважды подряд, и выглядело это как
   недоделанная вёрстка. Гейты этого не видели: для них это корректная ссылка.
   Заодно блок был чудовищно высоким — сорок карточек по одной в ряд давали
   4470 пикселей на телефоне, шестую часть всей страницы. */
/* 150px не давали двух колонок в 303-пиксельной колонке текста: двум плашкам
   с зазором нужно было 310. Разница в семь пикселей оставляла сорок ссылок
   в один столбец на 2300 пикселей высоты. */
.pn-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; margin: var(--pn-s5) 0; padding: 0; list-style: none; }
.pn-related li { margin: 0; }
/* Не flex. Текст ссылки внутри флекс-контейнера — безымянный флекс-элемент,
   а у такого min-width равен auto: он не сжимается ниже самого длинного слова
   и рисуется за границей своей же плашки, добавляя горизонтальную прокрутку
   всей странице. Внешне плашка при этом честно показывала ширину 147 пикселей,
   поэтому поиск виновника по границам элементов ничего не находил. */
.pn-related a {
  display: block; min-height: 46px;
  background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius-sm);
  padding: 12px 14px; color: var(--pn-text); font-size: 14px; font-weight: 500; line-height: 1.3;
}
.pn-related a::before { content: "→ "; color: var(--pn-green); font-size: 13px; }
.pn-related a:hover { border-color: rgba(0, 255, 135, .35); color: var(--pn-green); }
/* Подпись-дубль больше не выводится генератором, но если старая разметка
   где-то осталась — не показываем её, а не показываем криво. */
.pn-related span { display: none; }

/* ------------------------------------------------------ каталог/список */
.pn-catalog { list-style: none; padding: 0; margin: var(--pn-s5) 0; display: grid; gap: var(--pn-s3); }
.pn-catalog > li { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s5); }
.pn-catalog b, .pn-catalog strong { font-family: var(--pn-head); font-size: 18px; font-weight: 600; }
.pn-catalog p { margin: 8px 0 0; font-size: 15px; color: var(--pn-muted); }

.pn-list { list-style: none; padding: 0; margin: var(--pn-s4) 0; }
.pn-list li { padding-left: 24px; position: relative; margin-bottom: 10px; color: var(--pn-muted); }
.pn-list li::before { content: "✦"; position: absolute; left: 0; color: var(--pn-green); font-size: 12px; }

/* ------------------------------------------------------------ квиз */
.pn-quiz { background: var(--pn-card); border: 1px solid var(--pn-border-hi); border-radius: var(--pn-radius); padding: var(--pn-s6); }
.pn-quiz__bar { height: 4px; background: rgba(255, 255, 255, .06); border-radius: 99px; overflow: hidden; margin-bottom: var(--pn-s5); }
.pn-quiz__bar i { display: block; height: 100%; width: 0; background: var(--pn-green); box-shadow: 0 0 14px var(--pn-green-glow); transition: width .3s ease; }
.pn-quiz__q { font-family: var(--pn-head); font-size: 21px; font-weight: 600; color: var(--pn-white); margin-bottom: var(--pn-s4); }
.pn-quiz__opts { display: grid; gap: 10px; margin-bottom: var(--pn-s5); }
.pn-quiz__opt { text-align: left; background: var(--pn-card-hi); border: var(--pn-rule); border-radius: var(--pn-radius-sm); padding: 15px 18px; font: 400 16px/1.4 var(--pn-sans); color: var(--pn-text); cursor: pointer; transition: border-color .15s, background .15s; }
.pn-quiz__opt:hover { border-color: var(--pn-border-hi); background: #1E212B; }
.pn-quiz__opt[aria-pressed="true"] { border-color: var(--pn-green); background: var(--pn-green-dim); color: var(--pn-white); font-weight: 600; }
.pn-quiz__nav { display: flex; justify-content: space-between; gap: var(--pn-s3); }
.pn-quiz__field { display: block; margin-bottom: var(--pn-s4); }
.pn-quiz__field span { display: block; font-size: 14px; color: var(--pn-muted); margin-bottom: 7px; }
/* только текстовые поля: без указания типа селектор ловил и чекбоксы,
   растягивая их в тёмные полосы 289×13px вместо квадратиков */
.pn-quiz input[type="text"], .pn-quiz input[type="email"], .pn-quiz textarea,
.pn-calc select, .pn-calc input[type="number"], .pn-calc input[type="text"] {
  width: 100%; font: 400 16px/1.4 var(--pn-sans); color: var(--pn-white);
  padding: 14px 16px; border: var(--pn-rule); border-radius: var(--pn-radius-sm); background: var(--pn-card-hi);
}
.pn-quiz input:focus, .pn-quiz textarea:focus, .pn-calc select:focus, .pn-calc input:focus {
  outline: none; border-color: var(--pn-green); box-shadow: 0 0 0 3px var(--pn-green-dim);
}
.pn-calc input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pn-green); margin-right: 8px; vertical-align: -3px; }

/* ------------------------------------------------------ калькулятор */
.pn-calc { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s6); }
.pn-calc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--pn-s4); margin-bottom: var(--pn-s4); }
.pn-calc__out { border-top: var(--pn-rule); padding-top: var(--pn-s4); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pn-s4); }
.pn-calc__sum { font-family: var(--pn-head); font-size: 42px; font-weight: 900; line-height: 1; color: var(--pn-green); }
.pn-calc__hint { font-size: 14px; color: var(--pn-muted); }

/* ------------------------------------------------------------ крошки */
.pn-crumbs { font-size: 14px; color: var(--pn-faint); padding: var(--pn-s4) 0 0; }
.pn-crumbs a { color: var(--pn-muted); border: none; }
.pn-crumbs a:hover { color: var(--pn-green); }
.pn-crumbs span { margin: 0 8px; color: var(--pn-faint); }

/* ------------------------------------------------------------ блог */
.pn-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--pn-s4); list-style: none; padding: 0; }
.pn-post { background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s5); margin: 0; }
.pn-post:hover { border-color: var(--pn-border-hi); }
.pn-post h3 { margin: 0 0 var(--pn-s3); font-size: 19px; }
.pn-post h3 a { color: var(--pn-white); border: none; }
/* Дата статьи: для блога это признак свежести, но не часть текста —
   поэтому размер и цвет как у служебной подписи. */
.pn-post__date { color: var(--pn-faint); font-size: 14px; margin: 0 0 var(--pn-s3); }
.pn-post .pn-post__date { margin: var(--pn-s3) 0 0; }
.pn-post h3 a:hover { color: var(--pn-green); }
.pn-post p { font-size: 15px; color: var(--pn-muted); margin-bottom: var(--pn-s3); }
.pn-post time { font-size: 13px; color: var(--pn-faint); }
.pn-article { max-width: 76ch; }
.pn-article h2 { border-bottom: var(--pn-rule); padding-bottom: var(--pn-s3); }

/* --------------------------------------------------- финальный экран */
.pn-final {
  background: linear-gradient(160deg, var(--pn-card) 0%, var(--pn-black) 100%);
  border: 1px solid var(--pn-border-hi); border-radius: 24px;
  padding: var(--pn-s8) var(--pn-s6); margin: var(--pn-s8) 0 0; text-align: center;
  position: relative; overflow: hidden;
}
.pn-final::before {
  content: ""; position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 420px; height: 280px; background: var(--pn-green-glow); filter: blur(120px); pointer-events: none;
}
.pn-final h2 { margin-top: 0; position: relative; }
.pn-final p { max-width: 62ch; margin-left: auto; margin-right: auto; color: var(--pn-muted); position: relative; }
.pn-final__cta { display: flex; flex-wrap: wrap; gap: var(--pn-s3); justify-content: center; margin-top: var(--pn-s5); position: relative; }

/* ------------------------------------------------------------ подвал */
.pn-foot { background: var(--pn-dark); border-top: var(--pn-rule); color: var(--pn-muted); padding: var(--pn-s7) 0 var(--pn-s5); margin-top: var(--pn-s8); font-size: 15px; }
.pn-foot a { color: var(--pn-muted); border: none; }
.pn-foot a:hover { color: var(--pn-green); }
.pn-foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--pn-s5); }
.pn-foot h3, .pn-foot h4 { font-family: var(--pn-sans); color: var(--pn-faint); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--pn-s3); }
.pn-foot ul { list-style: none; padding: 0; margin: 0; }
.pn-foot li { margin-bottom: 10px; }
.pn-foot__bottom { border-top: var(--pn-rule); margin-top: var(--pn-s6); padding-top: var(--pn-s4); font-size: 13px; color: var(--pn-faint); display: flex; flex-wrap: wrap; gap: var(--pn-s3) var(--pn-s5); justify-content: space-between; }

/* ------------------------------------------------------------ утилиты */
.pn-sm { font-size: 15px; }
.pn-hidden { display: none !important; }
.pn-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Ссылка «к содержимому»: первый фокусируемый элемент страницы. Не видна,
   пока на неё не встал фокус, — иначе клавиатурный посетитель проходит
   логотип и шесть пунктов меню на каждой из 74 страниц. */
.pn-skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.pn-skip:focus { left: 12px; top: 12px; width: auto; height: auto; padding: 10px 16px; background: var(--pn-green); color: var(--pn-black); border-radius: var(--pn-radius-sm); font-weight: 600; }
.pn-lede { font-size: 19px; color: var(--pn-muted); }
/* Крупный текст держит читаемость и при более плотном интерлиньяже, а строк
   в лиде и в развёрнутом ответе на телефоне по десятку. */
.pn-hero__lead, .pn-lede, .pn-answer { line-height: 1.5; }
.pn-muted { color: var(--pn-muted); }
.pn-center { text-align: center; }
.pn-mt0 { margin-top: 0; }

/* ------------------------------------------------------------ адаптив */
@media (max-width: 980px) {
  .pn-cols { grid-template-columns: 1fr; gap: var(--pn-s6); }
  .pn-aside { position: static; }
  :root { --pn-s8: 80px; --pn-s7: 52px; }
}
/* Бургер включается на 900px, а не на 720: шесть пунктов меню занимают 558px
   и на планшетной ширине выходили за вьюпорт, давая горизонтальный скролл
   на всех страницах сразу (поймано ревью адаптива). */
@media (max-width: 900px) {
  .pn-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--pn-dark);
    border-bottom: var(--pn-rule); padding: var(--pn-s3) var(--pn-s4);
  }
  .pn-nav.is-open { display: flex; }
  .pn-nav a { padding: 13px 0; border-bottom: var(--pn-rule); }
  .pn-burger { display: block; margin-left: auto; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  /* Правила меню сюда не дублируются: они уже применены блоком 900px, который
     покрывает и эту ширину. Копия жила здесь с прошлой брейкпойнт-схемы и
     означала, что любую правку меню нужно делать в двух местах. */
  .pn-compare { grid-template-columns: 1fr; }
  .pn-hero__cta .pn-btn { width: 100%; }
  .pn-tldr, .pn-quiz, .pn-calc, .pn-final { padding: var(--pn-s5) var(--pn-s4); }
  /* Палец не мышь. Маленькие кнопки — «Дальше» в квизе, «Открыть чат»,
     «Написать в мессенджер» — имели 39 пикселей высоты: формально выше
     минимума доступности, но ниже размера, с которого промахи прекращаются.
     Поднимаем только на телефоне: на десктопе курсор точнее. */
  .pn-btn, .pn-burger { min-height: 44px; }
  :root { --pn-s8: 60px; }
}

/* --------------------------------------------------------------------------
   Длинное слово не должно распирать колонку.

   Ячейка grid по умолчанию не сжимается уже своего содержимого: min-width у неё
   равен auto, то есть ширине самого длинного слова. В сочетании с широким
   шрифтом заголовков это давало вот что: блок сравнения на телефоне честно
   переключался в одну колонку, но слово «Сервис полного цикла» в крупном
   начертании занимало 374 пикселя, колонка растягивалась до 433 при доступных
   303, и вся страница ехала вбок на сотню пикселей.

   Поэтому: ячейкам блоков разрешаем сжиматься, а крупному тексту внутри —
   переноситься. Правило общее, потому что дефект общий: он повторился на
   заголовке страницы, на блоке сравнения и на карточках с числами.
   -------------------------------------------------------------------------- */
.pn-compare > *, .pn-metrics > *, .pn-cases > *, .pn-pains > *,
.pn-matrix > *, .pn-tariffs > *, .pn-facts > *, .pn-gauge__row > *,
.pn-cols > *, .pn-related > * { min-width: 0; }

.pn-compare__val, .pn-compare__tag, .pn-metric__num, .pn-metric__label,
.pn-case__top, .pn-tariff__name, .pn-tariff__price, .pn-pain b,
.pn-fact dd, .pn-fact dt, .pn-gauge__name, .pn-matrix__head, .pn-note__title,
.pn-badge, .pn-viz__title, .pn-related a, .pn-catalog b, .pn-steps b,
.pn-quiz__opt, .pn-table td, .pn-table th { overflow-wrap: break-word; }

/* ==========================================================================
   КОНВЕРСИОННЫЙ СЛОЙ И ГРАФИКА

   Механика взята из соседнего проекта, где она себя окупила: кнопка заказа в шапке
   и липкий бар внизу. Разметка, имена классов, форма и текст — свои. Копия
   чужого бара дала бы поисковику ровно тот признак сетки, от которого весь
   этот сайт и строился отдельно.

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

/* ------------------------------------------------ кнопка заказа в шапке */
.pn-head__cta { display: inline-flex; align-items: center; gap: var(--pn-s3); margin-left: var(--pn-s4); }
.pn-head__cta .pn-btn { padding: 10px 18px; font-size: 14px; white-space: nowrap; }
/* Пока страница вверху, кнопка в шапке дублирует кнопку в первом экране и
   только шумит. Появляется вместе с липкой плашкой — по одному сигналу. */
.pn-head__cta { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s, transform .22s, visibility .22s; }
body.pn-scrolled .pn-head__cta { opacity: 1; visibility: visible; transform: none; }

/* На мобильном за то же действие отвечает липкая плашка внизу, а две кнопки
   с одним смыслом на одном экране конкурируют друг с другом. Правило стоит
   здесь, а не в общем блоке адаптива выше: тот идёт раньше по файлу, и
   объявление `.pn-head__cta { display: inline-flex }` его перебивало — кнопка
   оставалась в потоке, распирала строку шапки и давала горизонтальную
   прокрутку на всей странице. Видимая ошибка была за сотни строк от причины. */
@media (max-width: 900px) {
  .pn-head__cta { display: none; }
}

/* ------------------------------------------------------ липкая плашка */
/* Две кнопки во всю ширину, у каждой подпись мелким шрифтом под названием.
   Форма выбрана владельцем 2026-08-23 по образцу соседнего сайта ниши, где
   она себя окупила: там узкая плашка с одной кнопкой заметно проигрывала.
   Копируется механика, не оформление и не текст — цвета, шрифты, скругления
   и подписи здесь свои. Подписи вообще не могли быть теми же: у соседей
   «тест 10 голосов бесплатно» и «ответим за 5 минут», а у нас другая модель
   (оплата после тестовой партии) и честно заявленный срок ответа.

   Отступ снизу — переменная, а не константа: под плашкой живёт виджет чата,
   и на телефоне он разворачивается полосой во всю ширину экрана, а не
   пузырьком в углу. CSS виджета трогать нельзя — правило сети, — поэтому
   двигается наша плашка, а величину считает js/pn.js по фактическому замеру:
   форма виджета зависит от устройства и настроек в панели оператора. */
.pn-dock {
  position: fixed; left: 50%; bottom: var(--pn-dock-gap, 16px); transform: translate(-50%, 0);
  z-index: 40; width: min(680px, calc(100vw - 20px));
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px;
  background: rgba(19, 21, 28, .93);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--pn-border-hi); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s, visibility .3s;
  /* Решение владельца 2026-09-03: плашка видна всегда — с первого кадра, на
     любой прокрутке, поверх квиза и калькулятора. Раньше она появлялась после
     первого экрана и пряталась у форм (класс pn-dock-off из pn.js). Если
     скрытое состояние когда-нибудь вернётся, прятать нужно через visibility,
     а не только opacity: иначе невидимые кнопки остаются в табуляции. */
  opacity: 1;
  visibility: visible;
}

.pn-dock__btn {
  display: block; min-width: 0; text-align: center; cursor: pointer;
  border: 1px solid transparent; border-radius: 12px; padding: 9px 10px;
  font-family: var(--pn-sans); line-height: 1.2;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.pn-dock__btn b {
  display: block; font-family: var(--pn-head); font-size: 15px; font-weight: 600;
  overflow-wrap: break-word;
}
/* Было 11.5px с прозрачностью .8 — самый мелкий текст сайта стоял в главном
   конверсионном элементе и читался на телефоне хуже всего остального. */
.pn-dock__btn span { display: block; font-size: 12.5px; margin-top: 3px; opacity: .9; }
.pn-dock__btn:hover { transform: translateY(-1px); }

.pn-dock__btn--main { background: var(--pn-green); color: var(--pn-black); box-shadow: 0 4px 20px var(--pn-green-glow); }
.pn-dock__btn--main:hover { background: #3BFFA3; box-shadow: 0 8px 28px var(--pn-green-glow); }
.pn-dock__btn--alt { background: var(--pn-card-hi); border-color: var(--pn-border-hi); color: var(--pn-white); }
.pn-dock__btn--alt:hover { border-color: var(--pn-green); color: var(--pn-green); }

@media (max-width: 330px) {
  /* Порог был 380px — и подписи пропадали на 360 и 375, то есть на самых
     ходовых телефонах. Ровно там, где эта плашка и работает, от неё
     оставались две голые кнопки без объяснения, зачем нажимать. Прячем
     подписи только на действительно узких экранах. */
  .pn-dock__btn span { display: none; }
  .pn-dock__btn b { font-size: 14px; }
}

/* --------------------------------------------------------- бейджи доверия */
.pn-badges { display: flex; flex-wrap: wrap; gap: var(--pn-s3); margin: var(--pn-s5) 0; padding: 0; list-style: none; }
.pn-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px; border-radius: 99px;
  background: var(--pn-card); border: var(--pn-rule);
  font-size: 13px; color: var(--pn-muted);
}
.pn-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pn-green); box-shadow: 0 0 10px var(--pn-green-glow); flex: none;
}
.pn-badge--warn::before { background: var(--pn-warn); box-shadow: 0 0 10px var(--pn-warn-dim); }

/* ------------------------------------------------------------- графика */
.pn-viz {
  background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius);
  padding: var(--pn-s5); margin: var(--pn-s6) 0;
}
.pn-viz__title { font-family: var(--pn-head); font-size: 17px; font-weight: 600; color: var(--pn-white); margin: 0 0 4px; }
.pn-viz__sub { font-size: 14px; color: var(--pn-faint); margin: 0 0 var(--pn-s4); }
.pn-viz__canvas { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Минимальной ширины у графика больше нет. С ней он на телефоне не помещался
   и прокручивался внутри себя: половина линии и обе подписи оставались за
   краем, а прокручивать график никто не станет — его или видно целиком, или
   его нет. Теперь он ужимается по ширине экрана, а подписи внутри укрупняются
   отдельным правилом ниже: в координатах картинки 11px на телефоне давали
   реальных семь, то есть нечитаемо. */
.pn-viz svg { display: block; width: 100%; height: auto; }
.pn-viz__legend { display: flex; flex-wrap: wrap; gap: var(--pn-s4); margin-top: var(--pn-s4); font-size: 13px; color: var(--pn-muted); }
.pn-viz__legend i { display: inline-block; width: 22px; height: 3px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }
.pn-viz__note { font-size: 13px; color: var(--pn-faint); margin: var(--pn-s4) 0 0; }

/* линии графика */
.pn-line-ok   { fill: none; stroke: var(--pn-green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pn-line-bad  { fill: none; stroke: var(--pn-warn); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 4; }
.pn-area-ok   { fill: var(--pn-green-dim); stroke: none; }
.pn-axis      { stroke: var(--pn-border-hi); stroke-width: 1; }
.pn-grid      { stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.pn-viz text  { font: 11px var(--pn-sans); fill: rgba(240, 242, 248, .60); }
.pn-viz text.pn-viz__mark { font-weight: 600; fill: var(--pn-warn); }

/* -------------------------------------------- шкала цены по типу защиты */
.pn-gauge { display: grid; gap: var(--pn-s3); margin: var(--pn-s5) 0; }
.pn-gauge__row { display: grid; grid-template-columns: minmax(120px, 1.1fr) 3fr auto; gap: var(--pn-s4); align-items: center; }
.pn-gauge__name { font-size: 14px; color: var(--pn-muted); }
.pn-gauge__track { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.pn-gauge__fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pn-green-deep), var(--pn-green)); }
.pn-gauge__fill--mid { background: linear-gradient(90deg, #2C6E4A, var(--pn-green)); }
.pn-gauge__fill--top { background: linear-gradient(90deg, #6B4CD6, var(--pn-purple)); }
.pn-gauge__val { font-family: var(--pn-head); font-size: 16px; font-weight: 600; color: var(--pn-white); white-space: nowrap; }
@media (max-width: 620px) {
  .pn-gauge__row { grid-template-columns: 1fr auto; grid-template-areas: "name val" "track track"; }
  .pn-gauge__name { grid-area: name; }
  .pn-gauge__val { grid-area: val; }
  .pn-gauge__track { grid-area: track; }

  /* Таблица на телефоне вмещается целиком, а не уезжает вбок. Замер на
     375 px: таблица форматов занимала 492 px в контейнере 335 px, и последняя
     колонка — со ставкой, то есть самая нужная — не была видна вовсе; ничто
     при этом не намекало, что содержимое можно листать. `table-layout: fixed`
     раздаёт колонкам равную ширину и переносит текст по словам (перенос
     длинных слов уже разрешён выше правилом overflow-wrap). */
  .pn-table { table-layout: fixed; font-size: 13px; }
  .pn-table th, .pn-table td { padding: 9px 6px; }
  .pn-table thead th { font-size: 12px; letter-spacing: .04em; }
  /* Равные колонки резали слова посреди («Отметка «Нравитс я» под постом»):
     на первую колонку приходится название формата — самое длинное, на
     последнюю ставка вида «5 ₽» — самое короткое. Раздаём ширину по смыслу,
     а не поровну. */
  .pn-table th:first-child, .pn-table td:first-child { width: 32%; }
  .pn-table th:last-child, .pn-table td:last-child { width: 13%; }
  /* В колонке шириной 64 px «подписки» не помещалось в строку и рвалось без
     переноса — «подписк / и». Просим браузер переносить по слогам: страница
     объявлена как lang="ru", словарь переносов у него есть. break-word
     остаётся запасным вариантом для слов, которым не помогает и перенос. */
  .pn-table td, .pn-table th { hyphens: auto; }
}

/* ------------------------------------------------- шаги с полосой хода */
.pn-steps__bar { display: block; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .06); margin: 10px 0 2px; overflow: hidden; }
.pn-steps__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pn-green-deep), var(--pn-green)); }

/* --------------------------------------------------- декоративный слой */
/* Тёмная страница без подсветки читается плоской простынёй. Свечение
   позиционируется абсолютно и не участвует в потоке, поэтому не может
   ни сдвинуть вёрстку, ни дать горизонтальную прокрутку. */
.pn-aura { position: relative; isolation: isolate; }
.pn-aura::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -140px; left: 50%; width: 780px; height: 460px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--pn-green-glow), transparent 72%);
  opacity: .5; filter: blur(18px);
}
/* Подписи графика заданы в координатах картинки, а картинка ужимается вместе
   с экраном. На 400px ширины множитель около 0.55, и 11 единиц превращались
   в шесть-семь реальных пикселей. Здесь укрупняем до размера, который после
   сжатия остаётся читаемым. */
@media (max-width: 720px) {
  /* График в колонке текста ужимался до 245 пикселей ширины и 82 высоты —
     подписи выходили по шесть с половиной пикселей, то есть графика на
     телефоне фактически не было. Выпускаем его на всю ширину экрана за
     поля колонки и укрупняем подписи в координатах картинки. */
  .pn-viz {
    margin-left: calc(var(--pn-s4) * -1); margin-right: calc(var(--pn-s4) * -1);
    border-radius: 0; border-left: none; border-right: none;
    padding-left: var(--pn-s4); padding-right: var(--pn-s4);
  }
  .pn-viz__canvas { margin-left: calc(var(--pn-s4) * -1); margin-right: calc(var(--pn-s4) * -1); }
  .pn-viz text { font-size: 24px; }
  .pn-viz text.pn-viz__mark { font-size: 25px; }
  .pn-viz .pn-line-ok, .pn-viz .pn-line-bad { stroke-width: 4; }
}

/* Липкая плашка перекрывает низ страницы: она вне потока, и последний блок
   уезжает под неё. Компенсируем отступом ровно на её высоту с запасом. */
body { padding-bottom: 0; transition: padding-bottom .2s; }
/* Плашка висит всегда, значит и место под ней внизу страницы нужно всегда:
   без отступа последний экран (подвал, кнопка связи) уходил бы под неё. */
body { padding-bottom: calc(var(--pn-dock-gap, 16px) + 70px); }
body.pn-dock-closed { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .pn-dock, .pn-head__cta, body { transition: none; }
  /* Плавная прокрутка по якорям объявлена в самом начале файла (html) и в
     этот блок не попадала: правило стояло рядом с анимациями плашки, а не
     рядом со всем, что двигается. Для человека с вестибулярными нарушениями
     прыжок по якорю на 20 экранов — тот же самый раздражитель. */
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   БЛОКИ ПРОДАЮЩЕЙ ПОСАДОЧНОЙ (структура утверждена владельцем 2026-08-23)

   Здесь только те блоки, содержимое которых у нас честно есть. Отзывы,
   награды, акции с таймером и программа лояльности требуют реальных данных
   владельца и намеренно НЕ реализованы выдуманным содержимым: придуманный
   отзыв или несуществующая награда — это подделка, а таймер, который
   перезапускается при перезагрузке, — обман посетителя.
   ========================================================================== */

/* ------------------------------------------ форма заказа в первом экране */
.pn-lead {
  background: linear-gradient(180deg, var(--pn-card-hi) 0%, var(--pn-card) 100%);
  border: 1px solid var(--pn-border-hi); border-radius: var(--pn-radius);
  padding: var(--pn-s5); margin-top: var(--pn-s5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.pn-lead__title { font-family: var(--pn-head); font-size: 19px; font-weight: 600; color: var(--pn-white); margin: 0 0 4px; }
.pn-lead__sub { font-size: 14px; color: var(--pn-faint); margin: 0 0 var(--pn-s4); }
.pn-lead__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pn-lead__row > * { min-width: 0; }
.pn-lead input, .pn-lead select {
  width: 100%; background: var(--pn-black); color: var(--pn-white);
  border: 1px solid var(--pn-border-hi); border-radius: var(--pn-radius-sm);
  padding: 12px 14px; font: 15px var(--pn-sans);
}
/* .42 давало контраст 3.73:1 при норме 4.5:1. Ровно эту ошибку уже находили
   и чинили выше для --pn-muted/--pn-faint, но до плейсхолдера правка не
   дошла — а он до появления подписи был здесь единственным словом в поле. */
.pn-lead input::placeholder { color: rgba(240, 242, 248, .58); }
.pn-lead input:focus, .pn-lead select:focus { outline: none; border-color: var(--pn-green); box-shadow: 0 0 0 3px rgba(0, 255, 135, .22); }
/* Подпись поля. Экранно она не нужна — placeholder говорит то же самое, —
   но без неё поле не имеет имени для скринридера и для автозаполнения. */
.pn-lead__lab { display: block; }
.pn-lead__lab > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pn-lead .pn-btn { margin-top: 10px; }
.pn-lead__note { font-size: 12.5px; color: var(--pn-faint); margin: 10px 0 0; }
.pn-lead__note a { color: var(--pn-muted); }
.pn-lead__ok { font-size: 15px; color: var(--pn-green); margin: 0; }
@media (max-width: 620px) { .pn-lead__row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- преимущества */
.pn-adv { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--pn-s4); margin: var(--pn-s6) 0; }
.pn-adv > * { min-width: 0; }
.pn-adv__item {
  background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius);
  padding: var(--pn-s5); position: relative; padding-top: calc(var(--pn-s5) + 10px);
}
.pn-adv__item::before {
  content: ""; position: absolute; top: var(--pn-s5); left: var(--pn-s5);
  width: 28px; height: 3px; border-radius: 2px; background: var(--pn-green);
}
.pn-adv__item b { display: block; font-family: var(--pn-head); font-size: 17px; font-weight: 600; color: var(--pn-white); margin: 14px 0 8px; overflow-wrap: break-word; }
.pn-adv__item span { display: block; font-size: 14.5px; color: var(--pn-muted); }

/* ---------------------------------------------------------- гарантии */
.pn-guarantees { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--pn-s4); margin: var(--pn-s6) 0; }
.pn-guarantees > * { min-width: 0; }
.pn-guarantee {
  background: linear-gradient(180deg, var(--pn-green-dim) 0%, var(--pn-card) 55%);
  border: 1px solid rgba(0, 255, 135, .22); border-radius: var(--pn-radius); padding: var(--pn-s5);
}
.pn-guarantee b { display: block; font-family: var(--pn-head); font-size: 16px; font-weight: 600; color: var(--pn-white); margin-bottom: 8px; overflow-wrap: break-word; }
.pn-guarantee span { display: block; font-size: 14.5px; color: var(--pn-muted); }

/* ------------------------------------------------------ полезные советы */
.pn-tips { display: grid; gap: var(--pn-s3); margin: var(--pn-s6) 0; padding: 0; list-style: none; counter-reset: pn-tip; }
.pn-tips li {
  counter-increment: pn-tip; position: relative; padding: var(--pn-s4) var(--pn-s5) var(--pn-s4) 62px;
  background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius);
  font-size: 15px; color: var(--pn-muted);
}
.pn-tips li::before {
  content: counter(pn-tip); position: absolute; left: var(--pn-s5); top: var(--pn-s4);
  font: 900 20px/1 var(--pn-head); color: var(--pn-green);
}
.pn-tips b { color: var(--pn-white); font-weight: 600; }

/* ------------------------------------------------------------ контакты */
.pn-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--pn-s4); margin: var(--pn-s6) 0; }
.pn-contacts > * { min-width: 0; }
.pn-contact-card {
  background: var(--pn-card); border: var(--pn-rule); border-radius: var(--pn-radius); padding: var(--pn-s5);
}
.pn-contact-card b { display: block; font-family: var(--pn-head); font-size: 16px; font-weight: 600; color: var(--pn-white); margin-bottom: 6px; }
.pn-contact-card span { display: block; font-size: 14px; color: var(--pn-faint); margin-bottom: var(--pn-s4); }

@media print {
  .pn-head, .pn-foot, .pn-quiz, .pn-aside, .pn-final, .pn-dock { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
}

/* ==========================================================================
   ПЛОТНОСТЬ НА ТЕЛЕФОНЕ. Блок стоит в самом конце файла намеренно: первая
   версия этих правил лежала выше базовых объявлений `.pn-metric__num` и
   `.pn-badge` и проигрывала им по порядку следования при равной
   специфичности — правило было написано, применялось не оно, а высота блока
   как была 607 px, так и осталась. Проверять надо не «правило есть», а
   «размер изменился».
   ========================================================================== */
@media (max-width: 620px) {

  /* Метрики: две колонки задаются явно. auto-fit при 335 px контента не мог
     дать вторую колонку и молча схлопывался в одну — 607 px на четыре числа.
     Вместе с уменьшенным внутренним отступом карточка перестаёт быть
     наполовину воздухом. */
  .pn-metrics { grid-template-columns: 1fr 1fr; gap: var(--pn-s3); }
  .pn-metric { padding: var(--pn-s3); }
  .pn-metric__num { font-size: 26px; }
  .pn-metric__label { font-size: 13px; line-height: 1.35; margin-top: var(--pn-s2); }

  /* Бейджи: чип не влезает в половину строки целиком, и это нормально —
     пусть переносится внутри своей ячейки, чем занимает всю ширину. */
  .pn-badges { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pn-s2); }
  .pn-badge { width: 100%; padding: var(--pn-s2) var(--pn-s3); font-size: 12.5px; line-height: 1.3; }
}

/* ==========================================================================
   ПРОДАЮЩИЕ БЛОКИ — усиление по итогам дизайн-ревью 2026-09-01.
   Блок стоит в конце файла осознанно: правила перекрывают базовые
   объявления выше, и порядок следования здесь — часть механики, а не
   случайность (на этом уже споткнулись правила плотности).
   ========================================================================== */

/* Зебра в таблицах. Единственной подсказкой, где строка начинается и
   кончается, была подсветка по наведению мыши — на телефоне её нет вовсе.
   Оттенок берём тот же, что у шапки таблицы, новых цветов не заводим. */
.pn-table tbody tr:nth-child(even) td { background: var(--pn-card-hi); }

/* Итог калькулятора. Момент, ради которого человек открыл калькулятор, был
   оформлен как подвал формы: та же плоскость, только линия сверху. Собираем
   сумму и кнопку в одну подсвеченную панель. */
.pn-calc__out {
  background: linear-gradient(160deg, var(--pn-green-dim), var(--pn-card-hi) 70%);
  border: 1px solid var(--pn-green-glow);
  border-radius: var(--pn-radius-sm);
  padding: var(--pn-s4) var(--pn-s5);
}

/* Линия шагов была белой на 7% непрозрачности — на тёмном фоне её почти не
   видно, хотя весь смысл блока в том, чтобы показать путь от заявки к
   отчёту. Последний шаг — это точка, ради которой всё и делалось. */
.pn-steps li:not(:last-child) {
  border-left-color: transparent;
  background: linear-gradient(var(--pn-green-dim), var(--pn-green) 92%) left top / 2px 100% no-repeat;
}
.pn-steps li:last-child::before {
  background: var(--pn-green); border-color: var(--pn-green); color: var(--pn-black);
  box-shadow: 0 0 18px var(--pn-green-glow);
}

/* Раскрытый вопрос FAQ отличался от закрытого только цветом рамки — в списке
   из восьми пунктов этого мало, чтобы понять, что именно сейчас открыто. */
.pn-faq details[open] { background: var(--pn-card-hi); }

/* Метка формата в кейсе была просто капителью и терялась среди четырёх
   карточек подряд. Делаем её чипом — тем же приёмом, что и бейджи. */
.pn-case__meta {
  display: inline-block; background: var(--pn-card-hi); border: var(--pn-rule);
  border-radius: 99px; padding: 4px 10px;
}

@media (max-width: 720px) {
  /* Кнопки финального экрана на телефоне остаются автоширины, хотя тот же
     шаблон в первом экране давно растянут на всю ширину. Разнобой заметнее
     всего именно в финале — это последняя кнопка перед уходом со страницы. */
  .pn-final__cta .pn-btn { width: 100%; }
}

/* Плашка рекомендуемого пакета. До неё выбор отличала только рамка на 40%
   непрозрачности зелёного — на тёмном фоне почти незаметно, а на телефоне
   карточки идут по одной в столбец, и сравнивать рамку не с чем. */
.pn-tariff--pick { position: relative; background: var(--pn-card-hi); padding-top: calc(var(--pn-s6) + 12px); box-shadow: 0 0 46px rgba(0, 255, 135, .16); }
.pn-tariff__ribbon {
  position: absolute; top: 0; left: var(--pn-s5); transform: translateY(-50%);
  display: inline-block; white-space: nowrap;
  background: var(--pn-green); color: var(--pn-black);
  font: 600 12px/1 var(--pn-sans); letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 99px;
}

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН НА ДЕСКТОПЕ. Замер на 1280: контейнер 1140 px, и всё внутри
   растянуто на всю ширину — развёрнутый ответ идёт строками по ~140 знаков,
   форма из двух полей размазана на 1100 px. Ниже по странице сайт сам
   держит текст в колонке 688 px (`.pn-cols`), то есть первый экран
   единственный, где это правило нарушено. Ограничиваем ширину по смыслу:
   лид уже ограничен 62ch, ответ — та же логика, форма — по своим полям.
   ========================================================================== */
@media (min-width: 981px) {
  .pn-hero > .pn-wrap > .pn-answer { max-width: 78ch; }
  .pn-hero > .pn-wrap > form.pn-lead { max-width: 720px; }
  .pn-hero > .pn-wrap > .pn-badges { max-width: 900px; }
}

/* Ставка в сравнительной таблице — единственная коммерческая колонка среди
   справочных, а набрана была так же, как «ссылка на пост». Класс ставится по
   ЗАГОЛОВКУ колонки, а не по её номеру: на разных страницах цена стоит то
   третьей, то четвёртой (audit/fix_table_price_cells.py). */
/* Селектор с тегом: базовое правило `.pn-table th, .pn-table td` задаёт
   цвет с большей специфичностью, и голый `.pn-table__price` ему проигрывал
   независимо от порядка в файле — класс стоял в разметке, цвет не менялся. */
.pn-table td.pn-table__price { color: var(--pn-green); font-weight: 600; font-family: var(--pn-head); white-space: nowrap; }


/* ==========================================================================
   Страница оплаты (/oplata/). Классы живут только там, но лежат в общем файле:
   отдельная таблица стилей ради одной страницы — это второй файл, который надо
   версионировать, и второй шанс забыть про бамп версии.
   ========================================================================== */
.pn-pay { display: grid; gap: var(--pn-s4); }
.pn-pay__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pn-s3); }
.pn-pay__out {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pn-s2) var(--pn-s3);
  background: var(--pn-card-hi); border: var(--pn-rule-hard);
  border-radius: var(--pn-radius); padding: var(--pn-s4);
}
.pn-pay__sum { font-family: var(--pn-head); font-weight: 900; font-size: clamp(28px, 5vw, 42px); color: var(--pn-green); line-height: 1.1; }
.pn-pay__hint { color: var(--pn-muted); font-size: 15px; flex: 1 1 240px; min-width: 0; }
.pn-pay__stages { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pn-s3); }
.pn-pay__stage {
  display: block; cursor: pointer; padding: var(--pn-s3);
  border: var(--pn-rule-hard); border-radius: var(--pn-radius-sm); background: var(--pn-card);
}
.pn-pay__stage:has(input:checked) { border-color: var(--pn-green); background: var(--pn-green-dim); }
.pn-pay__stage b { display: block; font-family: var(--pn-head); font-size: 17px; margin-top: var(--pn-s1); }
.pn-pay__stage span { color: var(--pn-faint); font-size: 14px; }
.pn-pay__error { color: var(--pn-warn); background: var(--pn-warn-dim); border-radius: var(--pn-radius-sm); padding: var(--pn-s3); }

/* --- панель после создания оплаты --- */
.pn-pay-panel { display: grid; gap: var(--pn-s4); }
.pn-pay-panel__head {
  display: flex; flex-wrap: wrap; gap: var(--pn-s2) var(--pn-s4); align-items: baseline;
  border-bottom: var(--pn-rule); padding-bottom: var(--pn-s3);
}
.pn-pay-panel__amount { font-family: var(--pn-head); font-weight: 900; font-size: clamp(26px, 4.4vw, 38px); color: var(--pn-green); }
.pn-pay-panel__ref { font-family: var(--pn-mono); color: var(--pn-faint); font-size: 14px; }
.pn-pay__qr-row { display: flex; flex-wrap: wrap; gap: var(--pn-s5); align-items: flex-start; }
.pn-pay__qr {
  background: var(--pn-white); padding: var(--pn-s3); border-radius: var(--pn-radius);
  line-height: 0; flex: 0 0 auto;
}
.pn-pay__qr svg { display: block; width: 260px; height: 260px; max-width: 60vw; }
.pn-pay__qr-side { flex: 1 1 280px; min-width: 0; display: grid; gap: var(--pn-s3); align-content: start; }
.pn-pay__status {
  border: var(--pn-rule-hard); border-radius: var(--pn-radius-sm);
  padding: var(--pn-s3); color: var(--pn-muted); font-size: 15px;
}
.pn-pay__status--bad { color: var(--pn-warn); border-color: var(--pn-warn); }
.pn-pay__done { border: 1px solid var(--pn-green); background: var(--pn-green-dim); border-radius: var(--pn-radius); padding: var(--pn-s5); }
.pn-pay__done h2 { margin-top: 0; }

@media (max-width: 720px) {
  .pn-pay__grid, .pn-pay__stages { grid-template-columns: 1fr; }
  .pn-pay__qr svg { width: 220px; height: 220px; }
}


/* Квиз на телефоне: кнопка «Получить расчёт» занимала правую треть ряда, и
   ровно туда ложится пузырёк Jivo (его CSS не трогаем — правило сети). Найдено
   живым прогоном 2026-09-03: подпись обрезана до «Получить рас». Главная
   кнопка растягивается на всю ширину, «Назад» уходит строкой выше — пузырёк
   перекроет лишь правый край, подпись и зона нажатия остаются. */
@media (max-width: 620px) {
  .pn-quiz__nav { flex-wrap: wrap; }
  .pn-quiz__nav .pn-btn--brand { flex: 1 1 100%; order: 2; }
  .pn-quiz__nav .pn-btn--ghost { order: 1; }
}