.sp {
  --sp-ink: #0D1A2E;        
  --sp-ink-2: #17263F;      
  --sp-paper: #F4F1EA;      
  --sp-bumaga: #F3EFE6;     
  --sp-shtamp: #9B2D20;     
  --sp-svet: #C9C4B8;       
  --sp-tusk: #9A958A;       
  --sp-liniya: #253552;     
}
.sp {
  --sp-ten-list: 0 22px 34px -18px rgba(13, 26, 46, .45);     
  --sp-ten-podnyat: 0 30px 44px -20px rgba(13, 26, 46, .55);  
}
.sp-poshlina { max-width: 640px; padding: 18px 20px; background: #fff; border: 1px solid #D8D3C8; box-shadow: var(--sp-ten-list); }
.sp-poshlina-h { display: flex; align-items: center; gap: 8px; margin-bottom: .75rem; font-weight: 800; color: var(--sp-ink); }
.sp-poshlina-h .ico { color: var(--brass); }
.sp-poshlina-f label { font-size: var(--fs-2); font-weight: 600; }
.sp-poshlina-ryad { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.sp-poshlina-ryad input { flex: 1 1 180px; min-width: 0; padding: 8px 12px; border: 1.5px solid var(--sp-ink); font: inherit; }
.sp-poshlina-l { display: flex; gap: 8px; align-items: flex-start; font-weight: 400 !important; }
.sp-poshlina-l input { margin-top: 4px; }
.sp-poshlina-err { margin: 6px 0 0; color: var(--sp-shtamp); font-size: var(--fs-2); }
.sp-poshlina-itog { display: grid; gap: 4px; margin-top: 12px; padding: 12px 14px; background: var(--sp-ink); color: var(--sp-paper); }
.sp-poshlina-summa { font-size: var(--fs-5); font-weight: 900; color: var(--gold-old); }
.sp-poshlina-itog span { font-size: var(--fs-2); }
.sp-poshlina-lgota { color: var(--sp-svet); }
.sp-poshlina.gp { max-width: 720px; }
.gp-vybor { margin: 0; padding: 0; border: 0; }
.gp-vybor legend { margin-bottom: 8px; font-size: var(--fs-3); font-weight: 700; color: var(--sp-ink); }
.gp-vybor .sp-poshlina-l { margin-bottom: 8px; font-size: var(--fs-3); }
.gp-pole { margin: 0 0 12px 26px; }
.gp-pole label { display: block; margin-bottom: 4px; font-size: var(--fs-2); font-weight: 600; }
.gp-pole input { width: 100%; max-width: 320px; padding: 8px 12px; border: 1.5px solid var(--sp-ink); font: inherit; }
.gp-invalid { margin-top: 6px; padding-top: 10px; border-top: 1px dashed #C9C2B3; }
.gp-stroki { margin: 8px 0 4px; padding: 0; list-style: none; }
.gp-stroki li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--sp-liniya); }
.gp-t { font-weight: 600; }
.gp-s { white-space: nowrap; color: var(--gold-old); }
.gp-x { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: var(--sp-svet); }
.gp-dal { margin-top: 8px; font-weight: 600; color: var(--gold-old); }
.gp-dal:hover { color: var(--sp-paper); }
@media (max-width: 575.98px) { .gp-pole { margin-left: 0; } }

/* Только рекламная страница (подключается одна, рядом со style.css; при сборке в начало добавляется раздел «Первый экран»
   из spory.css). «Живая речь» главных обещаний первого экрана
   (владелец 15.10.2026: «не бегущая строка, а перетекающая из одного слова в другое, как на всех сделанных страницах»).
   Скрипт — eksport/rech-obeshchaniya.mjs: пункт набирается с золотым курсором, гаснет, набирается следующий; один раз,
   потом — обычный список .hero-ob. Отдельным файлом — потому что описание движения (@keyframes) сборка оформления
   других страниц из style.css не выбрасывает, и их файлы менялись бы зря */
.hero-rech.rech-on > ul { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
                          clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-rech .rech-vid { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0 0;
                       font-family: var(--font); font-size: var(--fs-4); font-weight: 500; line-height: 1.35; color: var(--paper);
                       cursor: pointer; transition: opacity .2s ease; }
.hero-rech .rech-ischez { opacity: 0; }
.hero-rech .rech-kursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -.15em; background: var(--gold-old); }
.hero-rech .rech-net { opacity: 0; }
.hero-rech.rech-gotovo > ul { animation: rech-pojavlenie .45s ease both; }
@keyframes rech-pojavlenie { from { opacity: 0; } }
@media (min-width: 992px) { .hero-rech .rech-vid { font-size: 21px; } }   /* на ПК — 21 px, как «Работаем на всей территории РФ» (владелец 15.10.2026: «шрифт на ПК поменьше, на телефоне нормально») */
@media (prefers-reduced-motion: reduce) { .hero-rech.rech-gotovo > ul { animation: none; } }

/* ---------- Первый экран «как на страницах цен и наследства» (PERVYJ_EKRAN = 'dosye' в sborka.mjs) ----------
   Основа — раздел «Первый экран» spory.css (при сборке ставится в начало этого файла, mess-bok.mjs → pervyjEkranCss).
   Здесь — только своё: обещания с галочками в тёмном первом экране и строка о товарном знаке */
.rk-hero .hero-rech .hero-ob { display: grid; margin: 20px 0 0; }
.rk-hero .hero-rech .rech-vid { justify-content: flex-start; margin-top: 20px; }
.rk-hero .hero-ob li, .rk-hero .hero-rech .rech-vid { font-size: var(--fs-3); }
.rk-hero .hero-ok { width: 26px; height: 26px; }
.rk-reestr { max-width: 60ch; margin: 20px 0 0; font-size: var(--fs-1); line-height: 1.5; color: var(--sp-tusk); }
@media (min-width: 992px) {
  .rk-hero .hero-ob li, .rk-hero .hero-rech .rech-vid { font-size: 19px; }
}

/* ---------- Формы — объёмные, как на страницах «Досье» (владелец 15.10.2026: «и если можно формы тоже 3D»): опросник
   «Какой путь вам подходит», заявка «Консультация юриста», анкета «Развод онлайн», калькулятор госпошлины. Тёмная рамка, прямые углы, жёсткая
   тёмно-синяя тень со сдвигом и мягкая тень снизу — лист лежит над страницей. Только эта страница: файл подключается одна */
.forma, .kviz-box, .an, .rk-poshlina .sp-poshlina { border: 2px solid var(--navy); border-radius: 0;
                         box-shadow: 10px 10px 0 var(--navy), 0 22px 34px -18px rgba(13, 26, 46, .45); }
@media (max-width: 575.98px) {
  .forma, .kviz-box, .an, .rk-poshlina .sp-poshlina { box-shadow: 6px 6px 0 var(--navy), 0 18px 28px -16px rgba(13, 26, 46, .45); }
}