/* ===========================================================================
   Страницы направлений: /forma/<направление>
   Дополнение к style.css, отдельным файлом намеренно: главная страница
   даёт 1,1% конверсии, и трогать её стили ради посадочных нельзя.
   Всё, что тут есть, начинается с .np- и на главную не влияет.

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

/* ---- первый экран ---- */
/* Выключка. Сначала посадочные прижали влево, потом выровняли по центру
   под главную — но по центру они смотрелись пусто: справа не было ничего.
   Решение 05.09.2026: текст слева, справа фотография юриста. Асимметрия
   теперь оправдана — колонку держит снимок, а человек с первой секунды
   видит, к кому идёт. Фото из блока «Кто будет вести ваше дело» убрано,
   чтобы один и тот же кадр не стоял на странице дважды. */
.np-hero{padding:34px 0 8px;position:relative;text-align:left}
.np-hero-set{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:52px;
  align-items:center}
.np-hleb{font-size:12.5px;color:var(--mut);margin-bottom:22px}
.np-hleb a{color:var(--brass-lt)}
.np-hleb a:hover{color:var(--cream)}
.np-hero-in{max-width:none;margin:0}
.np-hero h1{font-family:var(--fdisp);font-weight:700;line-height:1.08;margin:0 0 14px;
  font-size:clamp(1.95rem,4.2vw,3rem);color:var(--cream);letter-spacing:-.01em}
/* Лид — что это за направление. Раньше он был неотличим от абзаца ниже,
   который рассказывает про консультацию: две мысли разного веса выглядели
   одинаково. Теперь лид крупнее, светлее и с золотой чертой слева —
   той же, что стоит под заголовками секций. */
.np-lead{font-size:20.5px;color:var(--cream);margin:0 0 16px;max-width:42ch;
  line-height:1.42;padding-left:17px;border-left:2px solid var(--brass)}
.np-pod{font-size:15px;color:var(--dim);margin:0 0 24px;max-width:52ch;line-height:1.6}
.np-hero .cta{justify-content:flex-start;margin-bottom:12px}
.np-hero .note{padding-left:0;justify-content:flex-start;text-align:left}

/* Фотография юриста на первом экране.
   Рамки нет: нижний край снимка растворяется в фоне маской-градиентом,
   и подпись начинается прямо в зоне растворения. Так портрет читается
   частью страницы, а не картинкой, положенной сверху. */
.np-hero-yu{margin:0}
.np-hero-yu img{width:100%;height:auto;display:block;border:0;
  border-radius:20px 20px 0 0;
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.45) 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.45) 80%,transparent 100%)}
.np-hero-yu figcaption{margin-top:-54px;position:relative;font-size:13px;color:var(--dim);line-height:1.5}
.np-hero-yu figcaption b{display:block;font-family:var(--fdisp);font-weight:700;
  font-size:19px;color:var(--cream);letter-spacing:-.01em;margin-bottom:4px}
.np-hero-yu .yu-rl{display:block;font-size:13.5px;color:var(--dim)}
.np-hero-yu .exp-badge{display:inline-flex;margin:11px 0 10px}
.np-hero-yu .yu-p{display:block;font-size:13px;color:var(--dim);line-height:1.55}

/* ---- секции страницы ---- */
.np-sec{padding:52px 0}
.np-sec .head{margin-bottom:30px}
.np-sec-t{background:rgba(255,255,255,.022);border-top:1px solid rgba(200,161,90,.1);
  border-bottom:1px solid rgba(200,161,90,.1)}

/* ---- с чем приходят ---- */
/* Две колонки, а не одна: семь строк в столбик читаются как длинный список,
   в котором свою ситуацию ищут глазами дольше. */
.np-sit{list-style:none;padding:0;margin:0 auto;max-width:920px;display:grid;gap:13px 34px;
  grid-template-columns:repeat(2,minmax(0,1fr));text-align:left}
.np-sit li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;
  color:#E4E0D3;line-height:1.5}
.np-sit .chk{margin-top:2px}
.np-ne{margin:26px auto 0;max-width:760px;padding:14px 18px;border-radius:11px;
  font-size:14px;line-height:1.55;color:var(--dim);background:rgba(255,255,255,.03);
  border:1px solid rgba(200,161,90,.16)}

/* ---- что делаем ---- */
.np-do{list-style:none;counter-reset:np;padding:0;margin:0 auto;display:grid;gap:2px;
  max-width:760px;text-align:left}
.np-do li{counter-increment:np;position:relative;padding:15px 0 15px 52px;
  font-size:15.5px;color:#E4E0D3;line-height:1.5;
  border-top:1px solid rgba(200,161,90,.12)}
.np-do li:first-child{border-top:none}
.np-do li::before{content:counter(np);position:absolute;left:0;top:12px;
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-family:var(--fdisp);font-size:15px;
  color:var(--brass-lt);background:rgba(200,161,90,.1);
  border:1px solid rgba(200,161,90,.26)}

/* ---- сколько стоит ---- */
/* Таблица цен убрана со страниц 20.09.2026 — стили оставлены: прайс жив в work/PRAYS.md, и если решим вернуть цены, верстать заново не придётся. */
.np-price{max-width:760px;margin:0 auto;text-align:left;
  border:1px solid rgba(200,161,90,.18);border-radius:14px;
  background:rgba(255,255,255,.035);overflow:hidden}
.np-price-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:16px 22px;border-bottom:1px solid rgba(200,161,90,.14);
  background:rgba(200,161,90,.06)}
.np-price-h span{font-size:14px;color:var(--dim)}
.np-price-h b{font-family:var(--fdisp);font-size:19px;color:var(--brass-lt);
  font-variant-numeric:tabular-nums}
.np-price .plist{padding:4px 22px 16px}
.np-price .prow:first-child{border-top:none}
.np-sec .pnote{margin:16px auto 0;max-width:760px}

/* ---- частые вопросы ---- */
/* Раскрывашки на <details>: работают без скрипта, читаются поисковиком
   и не ломаются, если JavaScript не загрузился. */
.np-faq{display:grid;gap:10px;max-width:820px;margin:0 auto;text-align:left}
.np-q{border:1px solid rgba(200,161,90,.17);border-radius:13px;
  background:rgba(255,255,255,.035);transition:border-color .2s,background .2s}
.np-q[open]{border-color:rgba(200,161,90,.34);background:rgba(255,255,255,.05)}
.np-q summary{list-style:none;cursor:pointer;padding:17px 54px 17px 22px;
  position:relative;font-family:var(--fdisp);font-size:16.5px;color:var(--cream);
  line-height:1.35}
.np-q summary::-webkit-details-marker{display:none}
.np-q summary:hover{color:var(--brass-lt)}
.np-q summary:focus-visible{outline:2.5px solid var(--brass);outline-offset:-2px;
  border-radius:13px}
.np-q summary::after{content:"";position:absolute;right:22px;top:22px;
  width:9px;height:9px;border-right:2px solid var(--brass-lt);
  border-bottom:2px solid var(--brass-lt);transform:rotate(45deg);
  transition:transform .25s}
.np-q[open] summary::after{transform:rotate(-135deg);top:26px}
.np-a{padding:0 22px 19px}
.np-a p{margin:0;font-size:15px;line-height:1.65;color:var(--dim);max-width:62ch}

/* ---- форма и телефон рядом ---- */
/* Окно заявки открывается только по нажатию кнопки: человек, пришедший
   с рекламы, ещё не понял, куда попал, — просить у него телефон рано. */
.np-svyaz{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;
  background:radial-gradient(80% 130% at 88% 15%,rgba(200,161,90,.2),transparent 55%),
  linear-gradient(150deg,var(--green),var(--green-900));
  border:1px solid rgba(200,161,90,.28);border-radius:20px;padding:40px 42px;
  box-shadow:0 24px 60px rgba(0,0,0,.32)}
.np-svyaz h2{font-family:var(--fdisp);font-weight:700;margin:0 0 12px;
  font-size:clamp(1.5rem,3vw,2.1rem);color:var(--cream);line-height:1.14}
.np-svyaz-tx p{margin:0;font-size:15.5px;color:var(--dim);line-height:1.6;max-width:44ch}
.np-svyaz-d{display:grid;gap:12px}
.np-svyaz-d .btn{width:100%}
.np-svyaz-d .mess-blok{margin-top:6px;padding-top:16px;
  border-top:1px solid rgba(200,161,90,.18)}
/* В этом блоке кнопки растянуты во всю ширину и подписаны по центру —
   подпись над мессенджерами тоже центрируем, иначе она висит сбоку. */
.np-svyaz-d .mess-lab{text-align:center}
.np-svyaz-d .mess-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.np-svyaz-d .mess-btn{justify-content:center}

/* ---- узкий экран ---- */
@media (max-width:900px){
  /* Снимок на первом экране перестаёт помещаться сбоку — уводим под текст. */
  .np-hero-set{grid-template-columns:1fr;gap:20px}
  .np-hero-yu{max-width:280px}
}
@media (max-width:820px){
  .np-svyaz{grid-template-columns:1fr;gap:26px;padding:30px 24px}
}
@media (max-width:620px){
  /* Первый экран телефона считаем по кнопкам: они должны заканчиваться выше
     уведомления о cookie, которое занимает нижние 98 px экрана 375×667.
     Иначе первое нажатие по «Позвонить» достанется баннеру, а не ссылке. */
  .np-hero{padding-top:20px}
  /* На телефоне снимок уходит под кнопки: первый экран остаётся коротким,
     кнопки по-прежнему заканчиваются выше уведомления о cookie. */
  .np-hero-set{gap:16px}
  .np-hero-yu{max-width:240px}
  .np-hero h1{font-size:1.85rem;margin-bottom:11px}
  .np-lead{font-size:17.5px;margin-bottom:12px;padding-left:13px;line-height:1.4}
  .np-pod{font-size:14.5px;line-height:1.5;margin-bottom:18px}
  .np-hleb{margin-bottom:14px}
  .np-sec{padding:42px 0}
  .np-sit{grid-template-columns:1fr;gap:12px}
  .np-do li{padding-left:46px;font-size:15px}
  .np-price-h,.np-price .plist{padding-left:17px;padding-right:17px}
  .np-q summary{font-size:15.5px;padding:15px 46px 15px 17px}
  .np-a{padding:0 17px 17px}
  /* Кнопки идут одна под другой во всю ширину: палец попадает в них
     без прицеливания, а вместе они занимают меньше высоты, чем две
     кнопки в строку с переносом. */
  .np-hero .cta,.np-sec .cta{display:grid;grid-template-columns:1fr;width:100%}
  .np-hero .cta .btn,.np-sec .cta .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .np-q,.np-q summary::after{transition:none}
}