/* =====================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ (sp-блоки) — визуальный язык новой главной.
   Одна адаптивная вёрстка от 320px: без дублей десктоп/моб.
   Грузится ПОСЛЕ awesomic.css. Генерация: tools/build-pages.js.
   ===================================================================== */

/* ---------- каркас ---------- */
body.pg { background: #fdfdfd; }

.sp-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 6.25vw, 100px);
  box-sizing: border-box;
}
.sp-in--narrow { max-width: 980px; }

.sp-h2 {
  margin: 0;
  font-family: 'Onest', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #09090b;
  text-wrap: balance;
}
.sp-h2 .g { color: #c6c6c6; }
.sp-sub {
  margin: 14px 0 0;
  font-family: 'Onest', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: #52525b;
  max-width: 640px;
}

.spfeat, .spabout, .spprice, .spcases, .spcta, .spproc, .spfaq, .sprel { margin-top: 90px; }
@media (max-width: 1023px) {
  .spfeat, .spabout, .spprice, .spcases, .spcta, .spproc, .spfaq, .sprel { margin-top: 64px; }
}

/* ---------- герой страницы ---------- */
.sphero { padding-top: 44px; }
.sphero__crumbs {
  font-family: 'Onest', sans-serif;
  font-weight: 300; font-size: 13px; line-height: 20px;
  color: #71717a;
}
.sphero__crumbs a { display: inline-block; padding: 6px 2px; color: #71717a; }
.sphero__crumbs a:hover { color: #09090b; }
.sphero__crumbs span { padding: 6px 2px; }
.sphero__badge {
  display: inline-flex; align-items: center;
  margin-top: 18px;
  padding: 5px 12px; border-radius: 100px;
  background: #fafafa; border: 1px solid #f4f4f5;
  font-family: 'Onest', sans-serif; font-weight: 400; font-size: 13px; line-height: 19.5px;
  color: #18181b;
}
.sphero__t {
  margin: 16px 0 0;
  font-family: 'Onest', sans-serif;
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #09090b;
  max-width: 900px;
  text-wrap: balance;
}
.sphero__t .g { color: #c6c6c6; }
.sphero__p {
  margin: 20px 0 0;
  font-family: 'Onest', sans-serif;
  font-weight: 300; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5;
  color: #52525b;
  max-width: 640px;
}
.sphero__form { margin-top: 28px; max-width: 560px; }

/* цифры доверия */
.sphero__trust { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 36px; }
.spchip { display: flex; flex-direction: column; gap: 2px; }
.spchip__n {
  font-family: 'Onest', sans-serif; font-weight: 500;
  font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; color: #09090b;
}
.spchip__l { font-family: 'Onest', sans-serif; font-weight: 300; font-size: 13px; line-height: 1.4; color: #71717a; }

/* ---------- быстрая форма (как форма первого экрана главной) ---------- */
.spq {
  display: flex; align-items: center; gap: 8px;
  min-height: 78px;
  background: #fff; border: 1px solid #ececee; border-radius: 30px;
  padding: 11px 11px 11px 25px;
  box-shadow: 0 1px 0 rgba(9, 9, 11, .03);
  width: 100%; box-sizing: border-box;
}
.spq input {
  flex: 1 1 auto; min-width: 0;
  border: none; outline: none; background: none;
  font-family: 'Onest', sans-serif; font-weight: 400; font-size: 17px; color: #18181b;
}
.spq input::placeholder { color: #a1a1aa; }
.spq button {
  flex: 0 0 auto; height: 56px;
  border: none; border-radius: 20px;
  background: #262626; color: #fff;
  font-family: 'Onest', sans-serif; font-weight: 400; font-size: 15px; line-height: 18.75px;
  padding: 0 26px;
  box-shadow: inset 0 9px 14px 0 rgba(117, 123, 133, .4);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.spq button:hover { background: #333; transform: translateY(-1px); }
@media (max-width: 639px) {
  .spq { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 21px; }
  .spq input { height: 24px; width: 100%; }
  .spq button { width: 100%; padding: 0; }
}

/* ---------- карточки «что входит» ---------- */
.spfeat__grid {
  margin-top: 36px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1023px) { .spfeat__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .spfeat__grid { grid-template-columns: 1fr; } }
.spcard {
  background: #f7f7f8; border: 1px solid #f0f0f1; border-radius: 24px;
  padding: 24px; box-sizing: border-box;
}
.spcard__n { font-family: 'Onest', sans-serif; font-weight: 400; font-size: 13px; color: #a1a1aa; }
.spcard__t { margin: 10px 0 0; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3; color: #18181b; }
.spcard__d { margin: 8px 0 0; font-family: 'Onest', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.5; color: #52525b; }

/* ---------- абзацы о городе ---------- */
.spabout p {
  margin: 16px 0 0;
  font-family: 'Onest', sans-serif; font-weight: 300;
  font-size: 16px; line-height: 1.6; color: #3f3f46;
}

/* ---------- тарифы ---------- */
.spprice__grid {
  margin-top: 36px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
@media (max-width: 1023px) { .spprice__grid { grid-template-columns: 1fr; max-width: 560px; } }
.spplan {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #ececee; border-radius: 28px;
  padding: 28px; box-sizing: border-box;
}
.spplan__pop {
  position: absolute; top: 24px; right: 24px;
  padding: 5px 12px; border-radius: 100px;
  background: #fff; color: #09090b;
  font-family: 'Onest', sans-serif; font-weight: 500; font-size: 12px; line-height: 18px;
}
.spplan--pop { background: #09090b; border-color: #09090b; }
.spplan__name { margin: 0; font-family: 'Onest', sans-serif; font-weight: 500; font-size: 17px; line-height: 1.3; color: #52525b; }
/* справа вверху карточки висит плашка «Популярный» — оставляем ей место,
   иначе название тарифа уходит под неё */
.spplan--pop .spplan__name { color: #a1a1aa; padding-right: 118px; }
/* на самых узких экранах места для плашки справа нет — ставим её в поток
   над названием, иначе карточка распирает сетку шире экрана */
@media (max-width: 479px) {
  .spplan__pop { position: static; align-self: flex-start; display: inline-flex; margin-bottom: 12px; border: 1px solid #e4e4e7; }
  .spplan--pop .spplan__pop { border-color: #3f3f46; }
  .spplan--pop .spplan__name { padding-right: 0; }
}
/* содержимое не должно распирать колонки сеток */
.spfeat__grid > *, .spprice__grid > *, .spproc__grid > * { min-width: 0; }
.spplan__price {
  margin-top: 10px;
  font-family: 'Onest', sans-serif; font-weight: 500;
  font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.02em;
  color: #09090b;
}
.spplan--pop .spplan__price { color: #fff; }
.spplan__per { margin-left: 6px; font-weight: 300; font-size: 15px; letter-spacing: 0; color: #71717a; }
.spplan__list { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.spplan__list li {
  position: relative; padding-left: 30px;
  font-family: 'Onest', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.45;
  color: #3f3f46;
}
.spplan--pop .spplan__list li { color: #d4d4d8; }
.spplan__list li::before {
  content: '';
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="%2318181b"/><path d="M5.8 10.3l2.7 2.7 5.7-6" stroke="%23fff" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}
.spplan--pop .spplan__list li::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="%23ffffff"/><path d="M5.8 10.3l2.7 2.7 5.7-6" stroke="%2309090b" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.spplan__btn {
  margin-top: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; border-radius: 18px;
  background: #262626; color: #fff;
  font-family: 'Onest', sans-serif; font-weight: 400; font-size: 15px;
  box-shadow: inset 0 9px 14px 0 rgba(117, 123, 133, .4);
  transition: background .2s ease, transform .2s ease;
}
.spplan__btn:hover { background: #333; transform: translateY(-1px); }
.spplan--pop .spplan__btn { background: #fff; color: #09090b; box-shadow: none; }
.spplan--pop .spplan__btn:hover { background: #f4f4f5; }
.spplan { padding-bottom: 28px; }
.spplan__list { flex: 1 1 auto; }

/* ---------- лента кейсов (наполняется из панели, как на главной) ---------- */
.spcases__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; }
.spcases__head .sp-h2 { min-width: 0; }
.spcases__nav { display: flex; gap: 10px; flex: 0 0 auto; }
/* класс m6b__arw цепляет прокрутку из main.js; вид — свой, под белый фон */
.spcases__arw {
  box-sizing: border-box; width: 42px; height: 42px; padding: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #ececee; border-radius: 14px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.spcases__arw:hover { background: #f4f4f5; }
.spcases__arw:active { transform: scale(.94); }
.spcases__arw img { width: 16px; height: 16px; display: block; }

.spcases__wrap {
  margin-top: 32px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.spcases__wrap::-webkit-scrollbar { display: none; }
.spcases__track {
  display: flex; gap: 12px;
  width: max-content;
  padding: 0 clamp(20px, 6.25vw, 100px);
}
.spcases__track > div {
  flex: 0 0 auto;
  width: clamp(280px, 32vw, 420px);
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 28px; overflow: hidden;
  scroll-snap-align: center;
  background: #ececee;
}
.spcases__track > div img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- тёмная CTA-карточка с быстрой формой ---------- */
.spcta__card {
  position: relative;
  border-radius: 36px; overflow: hidden;
  padding: clamp(28px, 5vw, 64px);
  background: #18181b;
}
.spcta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spcta__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 9, 11, .62) 0%, rgba(9, 9, 11, .28) 100%); }
.spcta__t {
  position: relative; z-index: 2;
  margin: 0;
  font-family: 'Onest', sans-serif; font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.16; letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.spcta__t .g { color: rgba(255, 255, 255, .55); }
.spcta__card .spq { position: relative; z-index: 2; margin-top: 28px; max-width: 560px; border: none; }

/* ---------- как мы работаем ---------- */
.spproc__grid {
  margin-top: 36px;
  display: grid; gap: 24px 14px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1023px) { .spproc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .spproc__grid { grid-template-columns: 1fr; } }
.spstep { border-top: 1px solid #e4e4e7; padding-top: 20px; }
.spstep__n { font-family: 'Onest', sans-serif; font-weight: 400; font-size: 13px; color: #a1a1aa; }
.spstep__t { margin: 10px 0 0; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; color: #18181b; }
.spstep__d { margin: 8px 0 0; font-family: 'Onest', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.5; color: #52525b; }

/* ---------- FAQ страницы (свои классы — контент FAQ главной сюда не пишется) ---------- */
.spfaq__list { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.spfaq__item {
  background: #fff; border: 1px solid #ececee; border-radius: 20px;
}
.spfaq__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  cursor: pointer; list-style: none;
}
.spfaq__head::-webkit-details-marker { display: none; }
.spfaq__q { font-family: 'Onest', sans-serif; font-weight: 500; font-size: 16px; line-height: 1.4; color: #18181b; }
.spfaq__chev { flex: 0 0 28px; }
.spfaq__chev svg { width: 28px; height: 28px; display: block; transition: transform .25s ease; }
.spfaq__item[open] .spfaq__chev svg { transform: rotate(180deg); }
.spfaq__a {
  padding: 0 52px 18px 20px;
  font-family: 'Onest', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.55;
  color: #52525b;
}
.spfaq__card {
  margin-top: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: #f4f4f5; border-radius: 24px;
  padding: 24px;
}
.spfaq__card-t { margin: 0; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 17px; color: #18181b; }
.spfaq__card-d { margin: 4px 0 0; font-family: 'Onest', sans-serif; font-weight: 300; font-size: 15px; color: #52525b; }
.spfaq__card-btn {
  flex: 0 0 auto;
  height: 52px; padding: 0 26px;
  border: none; border-radius: 18px; cursor: pointer;
  background: #262626; color: #fff;
  font-family: 'Onest', sans-serif; font-weight: 400; font-size: 15px;
  box-shadow: inset 0 9px 14px 0 rgba(117, 123, 133, .4);
  transition: background .2s ease, transform .2s ease;
}
.spfaq__card-btn:hover { background: #333; transform: translateY(-1px); }
@media (max-width: 639px) {
  .spfaq__card { flex-direction: column; align-items: stretch; text-align: left; }
  .spfaq__card-btn { width: 100%; }
}

/* ---------- юридические страницы ---------- */
.splegal { padding-top: 44px; }
.splegal__t {
  margin: 16px 0 0;
  font-family: 'Onest', sans-serif; font-weight: 400;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.02em;
  color: #09090b;
}
.splegal__upd { margin: 14px 0 0; font-family: 'Onest', sans-serif; font-weight: 300; font-size: 13px; color: #71717a; }
.splegal__sec { margin-top: 36px; }
.splegal__sec h2 {
  margin: 0 0 12px;
  font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; color: #18181b;
}
.splegal__sec p, .splegal__sec li {
  font-family: 'Onest', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.6; color: #3f3f46;
}
.splegal__sec p { margin: 0 0 12px; }
.splegal__sec ul { margin: 0 0 12px; padding-left: 22px; }
.splegal__sec a { color: #09090b; text-decoration: underline; }

/* ---------- перелинковка: другие услуги и города ---------- */
.sprel__chips { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.sprel__chip {
  display: inline-flex; align-items: center;
  padding: 11px 18px; border-radius: 100px;
  background: #fff; border: 1px solid #ececee;
  font-family: 'Onest', sans-serif; font-weight: 400; font-size: 14px; line-height: 20px;
  color: #18181b;
  transition: background .2s ease, border-color .2s ease;
}
.sprel__chip:hover { background: #f4f4f5; border-color: #e4e4e7; }

/* ---------- поправки хрома в контексте страницы ---------- */
/* Контакт и футер идут после собственных блоков страницы, а не в связке
   блоков главной — наезды по отступам главной здесь не нужны. */
.pg .b12 { margin-top: 90px; }
.pg .b14 { margin-top: 88px; }
/* текущая страница подсвечена в выпадающем меню «Услуги» */
.pg .anav__drop a.is-active { background: #f4f4f5; font-weight: 500; }
@media (max-width: 1023px) {
  /* на главной .m12b наезжает на предыдущий моб-блок (-40px) — здесь перед
     ним белый spfaq, наезд оставил бы дыру в тексте */
  .pg .m12b { margin-top: 64px; }
}