/* ФРАНТЛАС - общий стиль портала. Палитра та же, что на главной. */
:root{
  --фон:#E6EAEE; --лист:#F9FAFB; --лист-2:#EFF2F5;
  --чернила:#15222E; --чернила-2:#5D6E7C;
  --линия:#C6D1D9; --линия-2:#E1E7EC;
  --акцент:#0F5A78; --акцент-фон:rgba(15,90,120,.10);
  --внимание:#9A4A16; --внимание-фон:rgba(154,74,22,.09);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --фон:#12161A; --лист:#191E23; --лист-2:#20262C;
  --чернила:#E6E8EA; --чернила-2:#9AA3AD;
  --линия:#2A3037; --линия-2:#242A30;
  --акцент:#63B4D1; --акцент-фон:rgba(99,180,209,.12);
  --внимание:#E0A070; --внимание-фон:rgba(224,160,112,.12);
}}
:root[data-theme="dark"]{
  --фон:#12161A; --лист:#191E23; --лист-2:#20262C;
  --чернила:#E6E8EA; --чернила-2:#9AA3AD;
  --линия:#2A3037; --линия-2:#242A30;
  --акцент:#63B4D1; --акцент-фон:rgba(99,180,209,.12);
  --внимание:#E0A070; --внимание-фон:rgba(224,160,112,.12);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--фон); color:var(--чернила);
  font-family:"Golos Text","Segoe UI",system-ui,sans-serif;
  font-size:18px; line-height:1.7;
}
.обёртка{max-width:760px; margin:0 auto; padding:clamp(24px,5vw,56px) 20px 72px}
.марка{position:relative; padding-left:16px; margin-bottom:30px}
.марка::before,.марка::after{
  content:""; position:absolute; left:0; width:9px; height:9px;
  border-color:var(--акцент); border-style:solid;
}
.марка::before{top:3px; border-width:1px 0 0 1px}
.марка::after{bottom:3px; border-width:0 0 1px 1px}
.лого{
  font-family:"Bitter",Georgia,serif; font-weight:700; font-size:22px;
  letter-spacing:.14em; margin:0; text-decoration:none; color:inherit; display:block;
}
.лого span{color:var(--акцент)}
h1{
  font-family:"Bitter",Georgia,serif; font-weight:600;
  font-size:clamp(25px,4.2vw,34px); line-height:1.22;
  margin:0 0 14px; text-wrap:balance; letter-spacing:-.01em;
}
h2{font-family:"Bitter",Georgia,serif; font-size:23px; margin:38px 0 12px; font-weight:600}
h3{font-size:19px; margin:26px 0 10px; font-weight:600}
p{margin:0 0 16px; max-width:64ch}
ul,ol{max-width:64ch; padding-left:22px}
li{margin-bottom:8px}
a{color:var(--акцент)}
a:focus-visible{outline:2px solid var(--акцент); outline-offset:2px}
blockquote{
  margin:24px 0; padding:14px 18px; border:1px solid var(--линия); max-width:74ch;
  background:var(--акцент-фон); font-size:15.5px;
}
blockquote p:last-child{margin-bottom:0}
table{border-collapse:collapse; width:100%; font-size:15.5px}
.таблица{overflow-x:auto; margin:22px 0}
th,td{border:1px solid var(--линия); padding:8px 11px; text-align:left}
th{background:var(--лист-2)}
code{background:var(--лист-2); padding:1px 5px; font-size:.9em}
.мета{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--чернила-2); margin:0 0 28px;
  padding-bottom:14px; border-bottom:1px solid var(--линия);
}
footer{
  margin-top:48px; padding-top:18px; border-top:1px solid var(--линия);
  font-family:"JetBrains Mono",monospace; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--чернила-2);
}

/* Обложка статьи и иллюстрации в теле */
/* обложка это такая же схема с текстом, ей тоже мала колонка в 612 px */
.обложка{margin:0 -62px 30px; width:auto}
@media (max-width:1080px){.обложка{margin:0 0 26px}}
.обложка img{width:100%;height:auto;display:block;border:1px solid var(--линия,#d8dee4)}
/* Схемы выводим шире текстовой колонки: текст читается узкой строкой, а
   на схеме мелкий шрифт в 612 px превращался в кашу. На широком экране
   иллюстрация выходит за колонку до 1040 px, на узком просто во всю ширину. */
.иллюстрация{margin:30px -62px; width:auto}
@media (max-width:1080px){.иллюстрация{margin:26px 0}}
.иллюстрация img{width:100%;height:auto;display:block;border:1px solid var(--линия,#d8dee4)}
.иллюстрация figcaption{margin-top:9px;font-size:14.5px;line-height:1.5;color:var(--чернила-2,#5d6e7c)}

/* ── Блоки внутри статьи ─────────────────────────────────────────────
   Семь блоков, которыми разбиваем полотно текста: подсказка, осторожно,
   цифра, сетка цифр, полосы, до/после, шаги. Правила, когда какой ставить,
   лежат в завод/дизайн-код.md; в тексте статьи они пишутся коротким
   синтаксисом ::: имя, сборщик разворачивает их в эту разметку.

   Стиль общий с остальным порталом: прямые углы, тонкая линия, моно-метка.
   Ни градиентов, ни теней, ни скруглений: мы справочник, а не лендинг. */

.врезка{
  margin:26px 0; padding:16px 18px 14px;
  border:1px solid var(--линия); border-left-width:3px;
  border-left-color:var(--акцент); background:var(--акцент-фон);
}
.врезка--осторожно{border-left-color:var(--внимание); background:var(--внимание-фон)}
.врезка__метка{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--акцент); margin:0 0 7px;
}
.врезка--осторожно .врезка__метка{color:var(--внимание)}
.врезка p{margin:0 0 10px; max-width:none}
.врезка p:last-child,.врезка ul:last-child,.врезка ol:last-child{margin-bottom:0}
.врезка ul,.врезка ol{max-width:none; margin:0 0 10px}

.цифра{
  margin:28px 0; padding:22px 20px; border:1px solid var(--линия);
  background:var(--лист); text-align:center;
}
.цифра__значение{
  font-family:"Bitter",Georgia,serif; font-weight:700; line-height:1;
  font-size:clamp(38px,7vw,58px); color:var(--акцент); letter-spacing:-.02em;
}
.цифра__подпись{margin:10px auto 0; max-width:52ch; color:var(--чернила-2); font-size:15.5px}

.цифры{
  display:grid; gap:1px; margin:28px 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--линия); border:1px solid var(--линия);
}
.цифры__ячейка{background:var(--лист); padding:18px 16px}
.цифры__значение{
  font-family:"Bitter",Georgia,serif; font-weight:700; font-size:27px;
  line-height:1.1; color:var(--акцент);
}
.цифры__подпись{margin-top:6px; font-size:14.5px; color:var(--чернила-2); line-height:1.45}

.полосы{margin:28px 0; border:1px solid var(--линия); background:var(--лист); padding:18px 18px 6px}
.полосы__строка{margin-bottom:14px}
.полосы__верх{display:flex; gap:12px; align-items:baseline; justify-content:space-between; margin-bottom:6px}
.полосы__имя{font-size:15.5px}
.полосы__значение{
  font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--чернила-2); white-space:nowrap;
}
.полосы__жёлоб{height:9px; background:var(--лист-2); border:1px solid var(--линия-2)}
.полосы__полоса{height:100%; background:var(--акцент); display:block}
.полосы__строка--тень .полосы__полоса{background:var(--чернила-2); opacity:.45}

.до-после{
  display:grid; gap:1px; margin:28px 0; background:var(--линия);
  border:1px solid var(--линия); grid-template-columns:1fr 1fr;
}
@media (max-width:560px){.до-после{grid-template-columns:1fr}}
.до-после__часть{background:var(--лист); padding:18px 18px 14px}
.до-после__метка{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--чернила-2); margin-bottom:8px;
}
.до-после__часть--после .до-после__метка{color:var(--акцент)}
.до-после__часть p{margin:0; max-width:none; font-size:15.5px}

.шаги{
  display:grid; gap:1px; margin:28px 0; background:var(--линия);
  border:1px solid var(--линия); grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.шаги__шаг{background:var(--лист); padding:18px 16px}
.шаги__номер{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.09em;
  color:var(--акцент); margin-bottom:8px;
}
.шаги__имя{font-weight:600; margin-bottom:5px; line-height:1.35}
.шаги__текст{font-size:14.5px; color:var(--чернила-2); line-height:1.5}

/* ── Навигация и разделы ─────────────────────────────────────────────
   Состав взят с блога-образца (рубрики чипами, карточки, «читайте также»),
   наполнение наше: вместо кнопки заявки - переход к статье-опоре. */
.шапка{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--фон) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--линия);
}
.шапка-нутро{
  max-width:1100px; margin:0 auto; padding:11px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.шапка .лого{font-size:19px; letter-spacing:.13em}
.меню{display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap}
.меню a{
  text-decoration:none; color:var(--чернила-2); font-size:14.5px; font-weight:500;
  padding:7px 11px; border-radius:6px;
}
.меню a:hover{color:var(--чернила); background:var(--лист-2)}
.меню a.активный{color:var(--чернила); background:var(--лист-2)}
.меню .кнопка{
  background:var(--акцент); color:var(--лист); border:1px solid var(--акцент);
  font-weight:600; padding:8px 15px;
}
.меню .кнопка:hover{background:var(--чернила); border-color:var(--чернила); color:var(--лист)}
.разделы{position:relative}
.разделы summary{
  list-style:none; cursor:pointer; font-size:14.5px; font-weight:500;
  color:var(--чернила-2); padding:7px 11px; border-radius:6px;
}
.разделы summary::-webkit-details-marker{display:none}
.разделы summary::after{content:" ▾"; font-size:11px}
.разделы summary:hover{color:var(--чернила); background:var(--лист-2)}
.разделы-список{
  position:absolute; top:calc(100% + 8px); left:0; z-index:30; min-width:250px;
  background:var(--лист); border:1px solid var(--линия); padding:6px;
  display:flex; flex-direction:column; box-shadow:0 10px 30px rgba(21,34,46,.12);
}
.разделы-список a{display:flex; justify-content:space-between; gap:14px}
.сколько{
  font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--чернила-2);
  border:1px solid var(--линия); border-radius:20px; padding:1px 7px;
}

.обёртка.широкая{max-width:1100px}
.крошки{
  font-size:13.5px; color:var(--чернила-2); margin:0 0 18px;
  display:flex; flex-wrap:wrap; gap:7px; align-items:center;
}
.крошки a{color:var(--чернила-2); text-decoration:none}
.крошки a:hover{color:var(--акцент); text-decoration:underline}
.крошки .разделитель{color:var(--линия)}

.чипы{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; align-items:center}
/* Рубрики сгруппированы по двум веткам портала: франшизы и бизнес.
   Метка ветки идёт первым элементом строки, чтобы список читался сразу. */
.чипы-ветка{margin:0 0 10px}
.чипы-ветка:last-of-type{margin-bottom:30px}
.чип-метка{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--чернила-2); margin-right:4px; min-width:74px}
.разделы-титул{
  display:block; font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--чернила-2);
  padding:8px 12px 3px}
.подвал-ветка{
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--чернила-2); margin-top:8px; list-style:none}
.чип{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  border:1px solid var(--линия); border-radius:22px; padding:6px 14px;
  font-size:14.5px; color:var(--чернила); background:var(--лист);
}
.чип:hover{border-color:var(--акцент)}
.чип.активный{background:var(--акцент); color:var(--лист); border-color:var(--акцент)}
.чип.активный .сколько{color:var(--лист); border-color:color-mix(in srgb, var(--лист) 45%, transparent)}

.сетка{
  display:grid; gap:20px; margin:0 0 34px;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
.карточка-статьи{
  background:var(--лист); border:1px solid var(--линия-2);
  display:flex; flex-direction:column; overflow:hidden;
}
.карточка-статьи:hover{border-color:var(--линия)}
.карточка-фото{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--лист-2)}
.карточка-фото img{width:100%; height:100%; object-fit:cover; display:block}
.карточка-текст{padding:16px 18px 18px}
.карточка-рубрика{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--акцент); text-decoration:none;
}
.карточка-статьи h3{
  font-family:"Bitter",Georgia,serif; font-size:18px; line-height:1.3;
  margin:9px 0 8px; font-weight:600;
}
.карточка-статьи h3 a{color:inherit; text-decoration:none}
.карточка-статьи h3 a:hover{color:var(--акцент)}
.карточка-статьи p{font-size:14.5px; color:var(--чернила-2); margin:0 0 12px; max-width:none}
.карточка-статьи time{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--чернила-2);
}
.пусто{color:var(--чернила-2); font-style:italic}

.просмотры{
  font-family:"JetBrains Mono",monospace; font-size:inherit; letter-spacing:inherit;
  text-transform:inherit; color:var(--чернила-2); white-space:nowrap;
}
.просмотры::before{content:"·"; margin:0 7px; opacity:.55}
.карточка-статьи .просмотры{font-size:11px; letter-spacing:.06em; text-transform:uppercase}

.раздел{margin:0 0 12px}
.раздел-шапка{display:flex; align-items:baseline; gap:16px; border-top:1px solid var(--линия); padding-top:22px}
.раздел-шапка h2{margin:0}
.раздел-все{margin-left:auto; font-size:14px; text-decoration:none; white-space:nowrap}
.раздел-все:hover{text-decoration:underline}
.раздел-описание{color:var(--чернила-2); font-size:15px; margin:8px 0 20px}

.также{max-width:1100px; margin:44px auto 0; border-top:1px solid var(--линия); padding-top:10px}
.также h2{margin-top:18px}

.поделиться{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:34px 0 0; padding-top:18px; border-top:1px solid var(--линия);
}
.поделиться-титул{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--чернила-2);
}
.поделиться a,.копировать{
  font:inherit; font-size:14px; text-decoration:none; cursor:pointer;
  border:1px solid var(--линия); background:var(--лист); color:var(--чернила);
  padding:6px 13px; border-radius:6px;
}
.поделиться a:hover,.копировать:hover{border-color:var(--акцент); color:var(--акцент)}

.наверх{
  position:fixed; right:20px; bottom:20px; z-index:15;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--лист); border:1px solid var(--линия); color:var(--чернила);
  text-decoration:none; font-size:19px; opacity:0; pointer-events:none;
  transition:opacity .18s;
}
.наверх.видна{opacity:1; pointer-events:auto}
.наверх:hover{border-color:var(--акцент); color:var(--акцент)}

.подвал{
  margin-top:56px; padding-top:26px; border-top:1px solid var(--линия);
  font-family:inherit; font-size:15px; text-transform:none; letter-spacing:0;
  color:var(--чернила-2);
}
.подвал-колонки{display:grid; gap:26px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.подвал-титул{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--чернила); margin:0 0 10px;
}
.подвал ul{list-style:none; padding:0; margin:0}
.подвал li{margin-bottom:7px}
.подвал a{text-decoration:none}
.подвал a:hover{text-decoration:underline}
.подвал-текст{font-size:14px; margin:0 0 10px; max-width:46ch}
.подвал-низ{
  margin:26px 0 0; padding-top:14px; border-top:1px solid var(--линия-2);
  font-family:"JetBrains Mono",monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
}

@media (max-width:640px){
  .шапка-нутро{padding:9px 16px; gap:10px}
  .меню{gap:4px; width:100%; margin-left:0}
  .меню .кнопка{margin-left:auto}
  .сетка{grid-template-columns:1fr; gap:16px}
  .наверх{right:12px; bottom:12px}
}

/* Страница «Связаться с нами»: форма собирает mailto, сервер её не принимает */
.почта{font-weight:600}
.письмо{display:flex; flex-direction:column; gap:14px; max-width:44rem; margin:26px 0 0}
.письмо label{display:flex; flex-direction:column; gap:6px; font-size:14.5px; color:var(--чернила-2)}
.письмо input, .письмо textarea{
  font:inherit; font-size:15.5px; color:var(--чернила); background:var(--лист);
  border:1px solid var(--линия); padding:10px 12px; border-radius:0}
.письмо input:focus, .письмо textarea:focus{outline:2px solid var(--акцент); outline-offset:1px}
.письмо .кнопка{
  align-self:flex-start; cursor:pointer; font:inherit; font-size:15px; font-weight:600;
  background:var(--акцент); color:var(--лист); border:1px solid var(--акцент);
  padding:11px 20px; letter-spacing:.01em}
.письмо .кнопка:hover{background:var(--чернила); border-color:var(--чернила)}
.письмо .мелко{font-size:13.5px; color:var(--чернила-2); margin:0; max-width:52ch}

/* ── Оглавление статьи ───────────────────────────────────────────────
   Колонка слева от текста: разделы статьи, активный подсвечивается при
   прокрутке. Подписи короткие, по смыслу раздела, а не полные заголовки.
   Уже 1024px колонка не помещается рядом с текстом - там это свёрнутый
   список над статьёй. */
.обёртка-статьи{max-width:1192px}
.статья-сетка{display:block}
.оглавление{
  margin:0 0 28px; border:1px solid var(--линия); background:var(--лист);
  padding:12px 14px;
}
.оглавление summary{
  list-style:none; cursor:pointer;
  font-family:"JetBrains Mono",monospace; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--чернила-2);
}
.оглавление summary::-webkit-details-marker{display:none}
.оглавление summary::after{content:" ▾"; font-size:10px}
.оглавление[open] summary::after{content:" ▴"}
.оглавление-список{display:flex; flex-direction:column; margin-top:10px}
.оглавление-список a{
  text-decoration:none; color:var(--чернила-2); font-size:14.5px; line-height:1.4;
  padding:7px 0 7px 13px; border-left:2px solid transparent;
}
.оглавление-список a:hover{color:var(--чернила)}
.оглавление-список a.активный{
  color:var(--чернила); font-weight:600; border-left-color:var(--акцент);
}
/* якорь не должен уезжать под липкую шапку */
main h2{scroll-margin-top:84px}

@media (min-width:900px){
  /* Колонка появляется только там, где меню действительно есть.
     Две строки: в верхней слева меню, справа крошки; в нижней - текст.
     Так меню стоит слева вверху, выше заголовка статьи, а не вровень с ним. */
  .статья-сетка:has(.оглавление){
    display:grid; grid-template-columns:206px minmax(0,1fr);
    column-gap:42px; align-items:start;
  }
  .статья-сетка:has(.оглавление) > .крошки{grid-column:2; grid-row:1}
  .статья-сетка:has(.оглавление) > main{grid-column:2; grid-row:2}
  .статья-сетка:has(.оглавление) > .оглавление{
    grid-column:1; grid-row:1 / span 2;
    position:sticky; top:76px; margin:0; padding:0;
    border:0; background:none;
    max-height:calc(100vh - 108px); overflow-y:auto;
  }
  .оглавление summary{cursor:default; margin-bottom:4px}
  .оглавление summary::after,
  .оглавление[open] summary::after{content:""}
  .оглавление-список{
    margin-top:8px; border-left:1px solid var(--линия-2);
  }
  .оглавление-список a{margin-left:-1px}
}

/* Схемы плотные, и в ширину колонки их подписи мелкие: клик открывает
   картинку в полном размере отдельной вкладкой. */
.иллюстрация a{display:block; position:relative}
.иллюстрация a::after{
  content:"Открыть крупнее"; position:absolute; right:10px; bottom:10px;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--лист);
  background:rgba(21,34,46,.72); padding:5px 9px; opacity:0; transition:opacity .15s;
}
.иллюстрация a:hover::after,.иллюстрация a:focus-visible::after{opacity:1}

/* ── Одна ширина у текста и иллюстраций ──────────────────────────────
   Решение руководителя 07.09.2026: абзацы и картинки должны начинаться
   и заканчиваться на одной вертикали, без выступающих схем.
   Колонка статьи 900 px. Чтобы строка при этой ширине осталась в норме,
   кегль в статье поднят с 17 до 19 px: 900 px при 19 px это примерно
   80 знаков, верхняя граница читаемого. На узких экранах всё как было. */
@media (min-width:900px){
  .статья-сетка main{font-size:20px; line-height:1.75}
  .статья-сетка main p,
  .статья-сетка main ul,
  .статья-сетка main ol,
  .статья-сетка main blockquote{max-width:none}
  .статья-сетка main h2{font-size:25px}
  .статья-сетка main h3{font-size:20.5px}
  .статья-сетка main .иллюстрация,
  .статья-сетка main .обложка{margin-left:0; margin-right:0}
}

/* ── Боковые поля главной ────────────────────────────────────────────
   На широком экране по краям оставалось по 250-400 px пустоты. Кладём туда
   то, ради чего на портал приходят: разделы и что читают сейчас слева,
   маршрут проверки по госреестрам справа. Ниже 1500 px поля не показываем:
   там они отняли бы ширину у карточек статей (проверено: центр сжимался
   с 1060 до 788 px). */
.полотно{display:block}
.поле{display:none}

@media (min-width:1500px){
  .обёртка.широкая{max-width:1560px}
  .полотно{display:grid; grid-template-columns:224px minmax(0,1fr) 268px; gap:40px; align-items:start}
  .поле{display:block; position:sticky; top:88px}
  /* чипы рубрик наверху повторяли бы левую колонку, поэтому на широком
     экране остаётся один список разделов, а не два */
  .полотно main > .чипы{display:none}
  .полотно main > h2:first-of-type{margin-top:12px}
}
@media (min-width:1700px){
  .обёртка.широкая{max-width:1680px}
  .полотно{grid-template-columns:250px minmax(0,1fr) 300px; gap:52px}
}

.поле-блок{
  border:1px solid var(--линия); background:var(--лист);
  padding:18px 20px 20px; margin-bottom:18px;
}
.поле-титул{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--чернила-2); margin:0 0 12px;
}
.поле-лид{font-size:14px; line-height:1.45; color:var(--чернила-2); margin:0 0 14px; max-width:none}
.поле-список,.поле-статьи,.поле-реестры{list-style:none; margin:0; padding:0}
.поле-список li{border-bottom:1px solid var(--линия-2)}
.поле-список li:last-child{border-bottom:0}
.поле-список a{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding:9px 0; font-size:15px; text-decoration:none; color:var(--чернила);
}
.поле-список a:hover{color:var(--акцент)}
.поле-статьи li{padding:10px 0; border-bottom:1px solid var(--линия-2); counter-increment:поле}
.поле-статьи li:last-child{border-bottom:0}
.поле-статьи a{font-size:14.5px; line-height:1.35; text-decoration:none; color:var(--чернила); display:block}
.поле-статьи a:hover{color:var(--акцент)}
.сколько-просмотров{
  display:block; margin-top:4px; font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.05em; color:var(--чернила-2);
}
.поле-реестры li{padding:9px 0; border-bottom:1px solid var(--линия-2)}
.поле-реестры li:last-child{border-bottom:0}
.поле-реестры a{font-size:15px; text-decoration:none; color:var(--акцент); display:block}
.поле-реестры a:hover{text-decoration:underline}
.поле-пояснение{display:block; font-size:13px; line-height:1.35; color:var(--чернила-2); margin-top:3px}
.поле-ссылка{display:inline-block; margin-top:14px; font-size:14px; text-decoration:none; color:var(--акцент)}
.поле-ссылка:hover{text-decoration:underline}
.поле-блок--письмо{background:var(--акцент-фон); border-color:var(--акцент)}
.поле-кнопка{
  display:block; text-align:center; margin-top:4px; padding:10px 14px;
  background:var(--акцент); color:var(--лист); text-decoration:none;
  font-size:14.5px; font-weight:500;
}
.поле-кнопка:hover{opacity:.9}


/* ── Шрифт чтения ────────────────────────────────────────────────────
   Замечание руководителя 09.09.2026: шрифт сделать читабельнее. В теле
   статьи ставим Literata - она нарисована для длинного чтения с экрана:
   крупнее строчные, шире просветы, засечки держат строку. Интерфейс,
   карточки и списки остаются на Golos Text, иначе портал поплывёт.
   Откат: удалить этот блок, вернётся прежний вид. */
.статья-сетка main,
main .лид{
  font-family:"Literata",Georgia,"Times New Roman",serif;
  font-size:19px; line-height:1.72;
}
.статья-сетка main h2,
.статья-сетка main h3{font-family:"Bitter",Georgia,serif}
/* моноширинные метки, врезки и таблицы живут своей типографикой */
.статья-сетка main .метка,
.статья-сетка main .цифра__значение,
.статья-сетка main table{font-family:"Golos Text","Segoe UI",system-ui,sans-serif}
@media (min-width:900px){
  .статья-сетка main{font-size:20px; line-height:1.78}
}


/* ── Частые вопросы спойлерами ───────────────────────────────────────
   Проверка 09.09.2026: восемь вопросов подряд читатель пролистывает.
   Сложенный список виден целиком, раскрывается нужное. Первый вопрос
   стоит открытым, иначе блок читается как список ссылок. */
.вопросы{margin:22px 0 8px; border-top:1px solid var(--линия-2)}
.вопрос{border-bottom:1px solid var(--линия-2)}
.вопрос summary{
  cursor:pointer; padding:14px 34px 14px 2px; position:relative;
  font-weight:600; line-height:1.45; list-style:none;
}
.вопрос summary::-webkit-details-marker{display:none}
.вопрос summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-weight:400; font-size:20px; line-height:1; color:var(--акцент);
}
.вопрос[open] summary::after{content:"\2212"}
.вопрос summary:hover{color:var(--акцент)}
.вопрос summary:focus-visible{outline:2px solid var(--акцент); outline-offset:2px}
.вопрос__ответ{padding:0 34px 16px 2px}
.вопрос__ответ p{margin:0}


/* ── Подписка на разборы ─────────────────────────────────────────────
   Решение руководителя 09.09.2026: собираем свою базу читателей вместо
   кнопок «Связаться с нами». Форма стоит одна на страницу, в конце
   статьи: человек уже прочитал и понял, за чем подписывается. */
.подписка{
  max-width:904px; margin:44px auto 0; padding:28px 30px 30px;
  background:var(--лист); border:1px solid var(--линия);
}
.подписка__титул{font-family:"Bitter",Georgia,serif; font-size:23px; margin:0 0 8px}
.подписка__лид{margin:0 0 18px; color:var(--чернила-2); max-width:60ch}
.подписка__выбор{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px}
.подписка__формат{
  flex:1 1 240px; display:block; padding:12px 14px; cursor:pointer;
  border:1px solid var(--линия); background:var(--фон);
}
.подписка__формат:has(input:checked){border-color:var(--акцент); background:var(--акцент-фон)}
.подписка__формат input{margin-right:8px}
.подписка__имя{font-weight:600}
.подписка__пояснение{display:block; margin-left:24px; font-size:15px; color:var(--чернила-2)}
.подписка__строка{display:flex; flex-wrap:wrap; gap:10px}
.подписка__почта{
  flex:1 1 260px; font:inherit; font-size:17px; padding:11px 14px;
  border:1px solid var(--линия); background:var(--фон); color:var(--чернила);
}
.подписка__почта:focus-visible{outline:2px solid var(--акцент); outline-offset:1px}
.подписка__кнопка{
  flex:0 0 auto; cursor:pointer; font:inherit; font-size:16px; font-weight:600;
  padding:11px 22px; background:var(--акцент); color:var(--лист);
  border:1px solid var(--акцент);
}
.подписка__кнопка:hover{background:var(--чернила); border-color:var(--чернила)}
.подписка__кнопка:disabled{opacity:.6; cursor:default}
.подписка__согласие{
  display:flex; gap:9px; align-items:flex-start; margin-top:14px;
  font-size:15px; color:var(--чернила-2); max-width:62ch;
}
.подписка__согласие input{margin-top:4px}
.подписка__ответ{margin:12px 0 0; min-height:1.4em; font-size:15.5px}
.подписка__ответ--да{color:var(--акцент)}
.подписка__ответ--нет{color:var(--внимание)}
.ловушка{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
@media (max-width:620px){
  .подписка{padding:22px 18px 24px; margin-top:34px}
  .подписка__кнопка{width:100%}
}


/* ── Правки для телефона ─────────────────────────────────────────────
   Проверка на iPhone 10.09.2026 показала три вещи, которые на широком
   экране не видны. */

/* 1. Схема на телефоне сжималась в 3,4 раза, и кегль 26 px превращался
   в 8 px: правило «схема читается сразу» переставало работать. Даём
   картинке натуральную ширину и прокрутку вбок, плюс подсказку - иначе
   читатель не догадается, что кадр можно потянуть. */
@media (max-width:760px){
  .статья-сетка main .иллюстрация{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-left:0; margin-right:0;
  }
  .статья-сетка main .иллюстрация img{min-width:760px; max-width:none}
  .статья-сетка main .иллюстрация::after{
    content:"Схему можно потянуть вбок или открыть крупнее";
    display:block; position:sticky; left:0; width:100%;
    margin-top:7px; font-size:13px; line-height:1.4; color:var(--чернила-2);
  }
}

/* 2. Шапка липкая и полупрозрачная. На узком экране под ней просвечивал
   текст статьи: полоса читалась как наложение, а не как панель. */
@media (max-width:760px){
  .шапка{background:var(--фон); backdrop-filter:none}
}

/* 3. Метка ветки в списке рубрик занимала 74 px и утаскивала первый чип
   вправо, отчего строки разъезжались лесенкой. На телефоне ставим метку
   отдельной строкой, чипы идут ровно слева. */
@media (max-width:620px){
  .чипы-ветка{align-items:flex-start}
  .чип-метка{width:100%; min-width:0; margin:0 0 6px}
}