/* ============================================================
   Внутренние страницы: то, чего нет в макете главной.
   Всё остальное — токены, кнопки, шапка, футер, section.s, .wrap,
   .lede — берётся из site.css, собранного из того же макета.

   Правило именования после четырёх столкновений классов на этом
   проекте: любой класс отсюда начинается с p- или .page-.
   ============================================================ */

/* Шапка страницы: та же синяя плоскость, что и первый экран главной,
   но ровно на высоту заголовка — внутренняя страница обязана сразу
   показать текст, а не картинку. */
.page-head {
  background: var(--blue);
  color: #fff;
  padding: 56px 0 64px;
}
/* Здесь лежал блок объявлений без селектора — хлебные крошки, разметки
   под которые в шаблонах нет. Парсер CSS, не найдя селектора, глотал
   прелюдию до следующей «{» и вместе с ней выбрасывал правило
   .page-head h1: заголовки на всех внутренних страницах шли браузерным
   дефолтом 36px/1.5 вместо clamp(30px, 4vw, 52px). Мёртвые объявления
   убраны; если крошки понадобятся — добавлять с селектором. */
.page-head h1 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 600; line-height: 1.12; letter-spacing: normal;
  max-width: 20ch;
}
.page-head .lede {
  color: rgba(255, 255, 255, 0.86);
  margin-top: 20px; max-width: 54ch;
}
.page-head .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-head:not(.ph-light) .btn-primary { background: #fff; color: var(--blue); }
.page-head:not(.ph-light) .btn-primary:hover { background: var(--lav); }
/* второстепенная кнопка на цветном — ровно как в герое главной */
.page-head:not(.ph-light) .btn-ghost { background: rgba(255,255,255,0.16); color: #fff; }
.page-head:not(.ph-light) .btn-ghost:hover { background: rgba(255,255,255,0.28); }
@media (max-width: 700px) { .page-head { padding: 36px 0 44px; } }

/* Плитки: зазор 8, как у Точки, не 24 — тесная сетка её узнаваемая черта */
.pgrid { display: grid; gap: 8px; margin-top: 40px; }
.pgrid-2 { grid-template-columns: repeat(2, 1fr); }
.pgrid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pgrid-2, .pgrid-3 { grid-template-columns: 1fr; } }

.ptile {
  background: var(--tile);
  border-radius: var(--r-md);
  padding: 30px 28px;
}
.ptile h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; }
.ptile p { margin-top: 12px; font-weight: 300; color: var(--muted); }
.ptile-lav { background: var(--lav); }
.ptile-lav p { color: #4a4a63; }

/* Шаги: номер отдельной колонкой, а не бейджем поверх плитки —
   так последовательность читается сверху вниз одним взглядом. */
.psteps { margin-top: 44px; display: grid; gap: 8px; counter-reset: pstep; }
/* Три колонки, а не две: срок уезжает вправо и держит правый край плитки.
   С текстом в одну колонку плитка на 1184px оставалась пустой на две трети. */
.pstep {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) 232px; gap: 28px; align-items: start;
  background: var(--tile); border-radius: var(--r-md); padding: 30px 28px;
}
@media (max-width: 1100px) { .pstep { grid-template-columns: 78px minmax(0, 1fr); } .pstep .pmeta { grid-column: 2; } }
.pstep::before {
  counter-increment: pstep; content: counter(pstep);
  font-size: 44px; font-weight: 600; line-height: 1; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.pstep h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.3px; }
.pstep p { margin-top: 12px; font-weight: 300; color: var(--muted); max-width: 62ch; }
.pstep .pmeta { margin: 0; font-size: 15px; font-weight: 500; color: var(--blue); padding-top: 6px; }
@media (max-width: 700px) {
  .pstep { grid-template-columns: 1fr; gap: 10px; padding: 24px 20px; }
  .pstep::before { font-size: 34px; }
  .pstep .pmeta { grid-column: 1; }
}

/* Чек-лист: то, что клиент готовит со своей стороны */
.plist { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: 92ch; }
.plist li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--line);
  font-weight: 300; color: var(--ink);
}
.plist li:last-child { border-bottom: 1px solid var(--line); }
.plist li b { font-weight: 500; }
.plist li::before {
  content: ""; width: 12px; height: 12px; border-radius: 3px;
  background: var(--blue); transform: translateY(-1px);
}
.plist-soft li::before { background: var(--lav); }

/* Пары «параметр — значение»: реквизиты, условия, сроки */
.pspec { margin: 32px 0 0; display: grid; }
.pspec > div {
  display: grid; grid-template-columns: 260px 1fr; gap: 24px;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.pspec > div:last-child { border-bottom: 1px solid var(--line); }
.pspec dt { font-weight: 500; color: var(--muted); margin: 0; }
.pspec dd { margin: 0; font-weight: 300; }
.pspec dd b { font-weight: 500; }
@media (max-width: 700px) {
  .pspec > div { grid-template-columns: 1fr; gap: 6px; }
  /* Ссылка, которая занимает всю ячейку, — самостоятельная цель, а не
     ссылка внутри текста: 22px высоты пальцем берутся через раз.
     Ссылки внутри абзаца не трогаем, для них правил по размеру нет. */
  .pspec dt > a:only-child,
  .pspec dd > a:only-child {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* Врезка: то, на чём клиент чаще всего спотыкается */
.pnote {
  margin-top: 36px; background: var(--wash); border-radius: var(--r-md);
  padding: 26px 28px; font-weight: 300; color: var(--ink);
}
.pnote b { font-weight: 500; }
.pnote p { margin-top: 6px; }

/* Тонированный остров: белого на странице набирается слишком много,
   один блок на страницу возвращает ритм главной. Плитки внутри белые —
   серый на тонированном грязнит, у Точки внутри тонированных блоков
   тоже всё белое. Два тонированных блока подряд не ставить: рядом
   с финальным .pcta это выглядит как одна длинная плита. */
.s.pwash {
  background: var(--wash); border-radius: var(--r-lg);
  margin: 0 12px; padding: 72px 0;
}
.s.pwash .ptile { background: #fff; }
.s.pwash .ptile-lav { background: var(--lav); }

.pfaq { margin-top: 40px; }
.pfaq details { border-top: 1px solid var(--line); }
.pfaq details:last-of-type { border-bottom: 1px solid var(--line); }
.pfaq summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  font-size: 19px; font-weight: 500;
}
.pfaq summary::-webkit-details-marker { display: none; }
.pfaq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px;
  border-right: 1.6px solid var(--blue); border-bottom: 1.6px solid var(--blue);
  transform: rotate(45deg); transition: transform 220ms ease;
}
.pfaq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.pfaq p { padding: 0 0 24px; font-weight: 300; color: var(--muted); max-width: 74ch; }

/* Финальный блок страницы */
.pcta {
  margin: 0 12px; background: var(--wash); border-radius: var(--r-lg);
  padding: 64px 48px; text-align: left;
}
.pcta h2 { font-size: clamp(26px, 3.2vw, 42px); font-weight: 600; line-height: 1.15; max-width: 20ch; }
.pcta p { margin-top: 16px; font-weight: 300; color: var(--muted); max-width: 52ch; }
.pcta .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 700px) { .pcta { padding: 40px 24px; margin: 0; border-radius: var(--r-md); } }

/* Ссылка «дальше по теме» в конце раздела */
.pmore { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 28px; font-weight: 500; color: var(--blue); }
.pmore::after { content: "\2192"; transition: transform 200ms ease; }
.pmore:hover::after { transform: translateX(4px); }

/* ============================================================
   Форма заявки. Синяя плита в конце страницы: это единственное
   место, где посетитель должен что-то сделать, и она обязана
   выглядеть как остановка, а не как ещё одна секция.
   ============================================================ */
.pform {
  background: var(--blue); color: #fff;
  border-radius: var(--r-lg); margin: 0 12px;
  padding: 64px 48px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start;
}
@media (max-width: 900px) { .pform { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; margin: 0; border-radius: var(--r-md); } }

.pform-text h2 {
  font-size: clamp(28px, 3.4vw, 46px); font-weight: 600;
  line-height: 1.12; color: #fff; max-width: 16ch;
}
.pform-text p { margin-top: 18px; font-size: 18px; font-weight: 300; color: rgba(255,255,255,0.86); max-width: 40ch; }

.pform-box { display: grid; gap: 14px; }
.pfield { display: grid; gap: 8px; }
.pfield span { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.72); }
.pfield input {
  width: 100%; border: 0; border-radius: var(--r-btn);
  background: #fff; color: var(--ink);
  padding: 17px 20px; font: 400 19px 'Golos Text', sans-serif;
}
.pfield input::placeholder { color: #a6a6b4; }
.pfield input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Ловушка для ботов: не display:none — часть автоматов такие поля пропускает */
.pf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.pform-box .btn-primary { background: #fff; color: var(--blue); padding: 17px 28px; font-size: 18px; }
.pform-box .btn-primary:hover { background: var(--lav); }
.pform-box .btn-primary[disabled] { opacity: 0.6; cursor: default; }

.pcheck { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; cursor: pointer; }
/* 18px — размер «чтобы было видно». Обязательная галочка ФЗ-152 стоит между
   пользователем и заявкой, промахиваться по ней нельзя: 22px и запас сверху. */
.pcheck input { width: 22px; height: 22px; margin: 0; accent-color: #fff; }
.pcheck span { font-size: 14px; font-weight: 300; line-height: 1.45; color: rgba(255,255,255,0.7); }
.pcheck a { text-decoration: underline; text-underline-offset: 2px; color: rgba(255,255,255,0.9); }

.pform-msg:empty { display: none; }
.pform-msg { margin-top: 2px; font-size: 15px; font-weight: 400; color: var(--lav); }
.pform-msg.err { color: #ffd2d2; }
.pform-hint { margin-top: 2px; font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.6); }

/* Ответ после отправки: форма уходит, на её месте остаётся обещание */
.pform-done { display: grid; gap: 10px; align-content: start; }
.pform-done b { font-size: 24px; font-weight: 600; }
.pform-done p { font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.86); max-width: 34ch; }

/* Реплики из разговора: доказательство без цифр. Не пузырьки мессенджера —
   это разговор голосом, и он читается как расшифровка, а не как переписка. */
.pdlg { margin-top: 40px; display: grid; gap: 8px; }
.pdlg-card { background: var(--tile); border-radius: var(--r-md); padding: 26px 28px; }
.pdlg-card > .cap { font-size: 15px; font-weight: 500; color: var(--muted); }
.pdlg-line { display: grid; grid-template-columns: 92px 1fr; gap: 18px; margin-top: 16px; align-items: baseline; }
.pdlg-line b { font-size: 14px; font-weight: 500; color: var(--muted); text-align: right; }
.pdlg-line span { font-size: 18px; font-weight: 300; line-height: 1.5; }
.pdlg-line.her b { color: var(--blue); }
.pdlg-line.her span { font-weight: 400; }
@media (max-width: 620px) {
  .pdlg-line { grid-template-columns: 1fr; gap: 4px; }
  .pdlg-line b { text-align: left; }
}

/* Ниши: плотная сетка коротких карточек, без картинок —
   здесь важен перечень, а не украшение */
.pniche { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 40px; }
@media (max-width: 1000px) { .pniche { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pniche { grid-template-columns: 1fr; } }
.pniche div { background: var(--tile); border-radius: var(--r-md); padding: 22px 22px 24px; }
.pniche b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.2px; }
.pniche span { display: block; margin-top: 8px; font-size: 16px; font-weight: 300; color: var(--muted); }
.s.pwash .pniche div { background: #fff; }

/* Тёмный лист: одна секция на страницу, которая должна звучать громче
   остальных. ⛔ НЕ использовать под «чего продукт не делает» и прочие
   оговорки: решение заказчика — границы проговаривают менеджеры голосом,
   сайт продаёт. Сюда идёт выгода, а не дисклеймер. */
.pdark { background: #1c1c24; color: var(--st-ink); border-radius: var(--r-lg); margin: 0 12px; padding: 64px 48px; }
.pdark h2 { color: #fff; font-size: clamp(26px, 3.2vw, 42px); font-weight: 600; line-height: 1.15; max-width: 18ch; }
.pdark > p { margin-top: 18px; font-weight: 300; color: var(--st-muted); max-width: 52ch; }
.pdark ul { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 900px) { .pdark { padding: 40px 24px; margin: 0; border-radius: var(--r-md); } .pdark ul { grid-template-columns: 1fr; } }
.pdark li { background: var(--st-surface); border-radius: var(--r-md); padding: 24px 26px; }
.pdark li b { display: block; font-size: 18px; font-weight: 600; color: #fff; }
.pdark li span { display: block; margin-top: 10px; font-size: 16px; font-weight: 300; color: var(--st-muted); }

/* Тарифные карточки: цена должна читаться раньше названия — на неё
   смотрят первым делом, а листают глазами по левому краю. */
.pplans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 44px; }
@media (max-width: 900px) { .pplans { grid-template-columns: 1fr; } }
.pplan { background: var(--tile); border-radius: var(--r-md); padding: 32px 28px 34px; display: flex; flex-direction: column; }
.pplan.accent { background: var(--lav); }
.pplan .name { font-size: 15px; font-weight: 500; color: var(--muted); }
.pplan.accent .name { color: #4a4a63; }
.pplan .price { margin-top: 10px; font-size: 40px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pplan .price small { display: block; margin-top: 6px; font-size: 15px; font-weight: 400; color: var(--muted); }
.pplan.accent .price small { color: #4a4a63; }
.pplan > p { margin-top: 16px; font-weight: 300; color: var(--muted); }
.pplan.accent > p { color: #4a4a63; }
.pplan ul { margin: 22px 0 26px; padding: 0; list-style: none; display: grid; gap: 11px; }
.pplan li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: baseline; font-size: 16px; font-weight: 300; }
.pplan li::before { content: ""; width: 10px; height: 2px; border-radius: 1px; background: var(--blue); transform: translateY(-4px); }
.pplan .btn { margin-top: auto; }

/* ============================================================
   Разнообразие подачи.

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

/* --- варианты шапки --- */
.page-head.ph-dark { background: #1c1c24; }
.page-head.ph-dark .lede { color: var(--st-muted); }

.page-head.ph-light { background: var(--wash); color: var(--ink); }
.page-head.ph-light h1 { color: var(--ink); }
.page-head.ph-light .lede { color: var(--muted); }

/* Шапка в две колонки: слева обещание, справа рисунок.
   Пустое место справа было у всех страниц одинаковым — теперь работает. */
.page-head .wrap.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.ph-ill { display: block; width: 100%; max-width: 360px; margin-left: auto; }
@media (max-width: 900px) {
  .page-head .wrap.split { grid-template-columns: 1fr; gap: 28px; }
  .ph-ill { max-width: 220px; margin: 0; }
}

/* --- сравнение «как обычно» / «как у нас» --- */
.pvs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 44px; }
@media (max-width: 800px) { .pvs { grid-template-columns: 1fr; } }
.pvs > div { border-radius: var(--r-md); padding: 30px 28px; }
.pvs .was { background: var(--tile); }
.pvs .now { background: var(--lav); }
.pvs h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; }
.pvs .was h3 { color: var(--muted); }
.pvs ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.pvs li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: baseline; font-size: 17px; font-weight: 300; }
.pvs .was li { color: var(--muted); }
.pvs .was li::before { content: "—"; color: #b4b4c0; }
.pvs .now li { color: #33334a; }
.pvs .now li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--blue); transform: translateY(-1px); }

/* --- лента времени: путь обращения или идеи --- */
.ptrack { margin-top: 44px; display: grid; gap: 0; }
.ptrack > div { display: grid; grid-template-columns: 118px 1fr; gap: 26px; padding: 26px 0; border-top: 1px solid var(--line); }
.ptrack > div:last-child { border-bottom: 1px solid var(--line); }
.ptrack .when { font-size: 15px; font-weight: 500; color: var(--blue); font-variant-numeric: tabular-nums; padding-top: 3px; }
.ptrack .what b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.2px; }
.ptrack .what span { display: block; margin-top: 8px; font-weight: 300; color: var(--muted); max-width: 62ch; }
.ptrack > div.bad .when { color: #b4b4c0; }
.ptrack > div.bad .what b { color: var(--muted); font-weight: 500; }
@media (max-width: 640px) { .ptrack > div { grid-template-columns: 1fr; gap: 6px; } }

/* --- крупное утверждение во всю ширину: пауза между плиточными блоками --- */
.pquote { margin: 0 12px; padding: 72px 48px; background: var(--lav); border-radius: var(--r-lg); }
.pquote p { font-size: clamp(24px, 3vw, 38px); font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; max-width: 24ch; color: #2b2b40; }
.pquote span { display: block; margin-top: 22px; font-size: 17px; font-weight: 300; color: #4a4a63; max-width: 46ch; }
@media (max-width: 700px) { .pquote { padding: 40px 24px; margin: 0; border-radius: var(--r-md); } }

/* --- сетка-хаб: страница-оглавление, ведёт в разделы --- */
.phub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 44px; }
@media (max-width: 800px) { .phub { grid-template-columns: 1fr; } }
.phub a {
  display: block; background: var(--tile); border-radius: var(--r-md);
  padding: 32px 30px 30px; transition: background-color 180ms ease, transform 180ms ease;
}
.phub a:hover { background: var(--tile-2); transform: translateY(-2px); }
.phub a.wide { grid-column: 1 / -1; background: var(--lav); }
.phub a.wide:hover { background: #d2d2f7; }
.phub b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.3px; }
.phub span { display: block; margin-top: 12px; font-weight: 300; color: var(--muted); max-width: 52ch; }
.phub a.wide span { color: #4a4a63; }
.phub em { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 20px; font-style: normal; font-weight: 500; color: var(--blue); }
.phub em::after { content: "\2192"; transition: transform 200ms ease; }
.phub a:hover em::after { transform: translateX(4px); }

/* Портрет в шапке страницы: круг вместо иллюстрации.
   Фото обрезано под квадрат заранее (крупный план лица), поэтому здесь
   достаточно скругления — object-fit оставлен на случай замены снимка
   на некадрированный. */
.ph-photo {
  /* height:auto обязателен: атрибут height="520" в разметке иначе выигрывает
     у aspect-ratio, и круг вытягивается в овал. */
  display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1 / 1;
  margin-left: auto; border-radius: 50%; object-fit: cover;
  box-shadow: 0 24px 60px -28px rgba(10, 10, 40, 0.55);
}
@media (max-width: 900px) { .ph-photo { max-width: 200px; margin: 0; } }