/* Оппонентура — лендинг. Стиль «Печать»: чернила/бордо/золото/бумага,
   PT Serif/PT Sans. Внешний кэшируемый CSS (CWV: не блокирует LCP инлайном).

   Шрифты хостим у себя (site/assets/fonts, SIL OFL 1.1 — копия лицензии
   рядом в OFL.txt). До 29.07 в CSS стояли только имена семейств, файлов не
   было — сайт молча рисовался Georgia/Segoe UI, то есть фирменной пары не
   видел никто. Внешний CDN не используем: он добавил бы стороннего
   наблюдателя за посетителями и третий домен в критический путь. */
@font-face{font-family:"PT Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/PTSans-400-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/PTSans-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PT Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/PTSans-700-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/PTSans-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PT Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/PTSerif-400-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/PTSerif-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PT Serif";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/PTSerif-700-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Serif";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/PTSerif-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PT Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/PTMono-400-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/PTMono-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Метрически подогнанные подмены (гейт запуска 05.08). Пока свой шрифт
   грузится, страница уже разложена так, как ляжет потом. Замер на живом сайте:
   одна и та же строка шириной 600 px занимала 48 px шрифтом PT Sans и 72 px
   системным — каждый абзац при подмене менял высоту, и всё, что ниже,
   съезжало. Отсюда CLS 0.354 на главной и 0.249 на новой странице при ХОЛОДНОМ
   кэше (при горячем — ноль), а «плохо» по Core Web Vitals начинается с 0.25.
   Коэффициенты — замер шириной строки в браузере: PT Sans / Arial = 0.934,
   PT Serif / Georgia = 1.104. Меняем только масштаб: ascent/descent не
   трогаем, чтобы не сдвинуть межстрочность у тех, кто дождался своего шрифта. */
/* Второй заход 12.08: ширина после `size-adjust` совпала почти идеально
   (98.6 % у Sans, 99.3 % у Serif), а ВЫСОТА строки — нет: у подмены верх+низ
   составляли 85 % от настоящего шрифта. Значит до загрузки абзацы ниже ростом,
   а когда шрифт приезжает — всё под ними уезжает вниз. Это и есть остаток CLS.
   Числа — замер в браузере при 400 px (округление до пикселя при 16 px врёт):
   PT Sans 101.8/27.5, PT Serif 104/28.5.

   Грабли, которые видно только замером ПОСЛЕ правки: `ascent-override` и
   `descent-override` умножаются на `size-adjust`. Попросили у подмены 101.8 %
   — получили 95.0 (101.8 × 0.934), у Serif попросили 104 — получили 114.8
   (104 × 1.104). Поэтому здесь стоит цель, ПОДЕЛЁННАЯ на масштаб:
   101.8/0.934 = 109 % и 27.5/0.934 = 29.4 %; 104/1.104 = 94.2 % и
   28.5/1.104 = 25.8 %. Меняете size-adjust — пересчитайте и эти. */
@font-face{font-family:"PT Sans Fallback";size-adjust:93.4%;
  ascent-override:109%;descent-override:29.4%;line-gap-override:0%;
  src:local("Arial"),local("Liberation Sans"),local("Helvetica Neue"),local("Roboto")}
@font-face{font-family:"PT Serif Fallback";size-adjust:110.4%;
  ascent-override:94.2%;descent-override:25.8%;line-gap-override:0%;
  src:local("Georgia"),local("Times New Roman"),local("Liberation Serif")}
:root{
  --paper:#ECE7DD; --paper2:#F3EFE6; --ink:#16130F; --ink-soft:#3A342B;
  --bordo:#7E1D28; --bordo-d:#651620; --gilt:#A9863F; --hairline:#D3C9B6;
  --good:#3d5a2c;
  --serif:"PT Serif","PT Serif Fallback",Georgia,"Times New Roman",serif;
  --sans:"PT Sans","PT Sans Fallback","Segoe UI",Roboto,Verdana,sans-serif;
  --mono:"PT Mono",ui-monospace,"Courier New",monospace;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Кому движение мешает, тому его нет. Главный виновник здесь не наведение
   мышью, а `scroll-behavior:smooth`: с 20.08 в меню стоит якорь «Как
   работает», то есть плавная прокрутка на пол-страницы срабатывает по кнопке
   меню на КАЖДОЙ странице. Для вестибулярных расстройств это ровно тот случай,
   ради которого запрос и придуман. Переходы наведения гасим заодно —
   уменьшать движение наполовину странно. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .btn:hover{transform:none}
}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.18;text-wrap:balance}
/* Мера строки — 35em, и это не вкус, а замер: на широком экране абзац шириной
   782 px укладывал 98 знаков в строку при комфортных 65–75, то есть 7,98 px на
   знак; 35em = 595 px = около 75 знаков. Там, где абзац лежит в рамке, меру
   получает КАРТОЧКА, а не текст внутри: у текста ширина упёрлась бы в меру, а
   рамка осталась бы во всю страницу — треть карточки пустая, и это читается
   как недовёрстка. */
.measure,details p{max-width:35em}
a{color:var(--bordo);text-decoration:none}
a:hover{text-decoration:underline}
/* Ссылка внутри текста отличалась от текста только цветом — 1.22:1 к соседним
   словам (гейт #13), а это ниже порога различимости и для дальтоника, и на
   плохом экране. В прозе подчёркиваем; кнопки, меню и подвал не трогаем — там
   ссылка опознаётся формой. */
/* Ячейки таблиц добавлены 12.08: в сравнительной таблице на обеих главных
   ссылка «проверит файл» / «check the file» — та самая, которой мы доказываем
   подлинность документа, — отличалась от жирного текста вокруг только цветом.
   Правило покрывало абзацы и списки, а таблицу нет. */
main p a:not(.btn),main li a:not(.btn),main td a:not(.btn),
.answer a:not(.btn),.legal p a,.legal li a{
  text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.07em;
  text-decoration-color:rgba(126,29,40,.45)}
main p a:not(.btn):hover,main li a:not(.btn):hover,.legal p a:hover,.legal li a:hover{
  text-decoration-color:currentColor}
.hero p a:not(.btn),.band p a:not(.btn){color:var(--gilt);text-decoration-color:rgba(169,134,63,.6)}
img,svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.3rem}
.eyebrow{font-family:var(--sans);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bordo);font-weight:700}
/* Надзаголовок-ссылка (страница проверки) не подчёркивается: это единственный
   подчёркнутый eyebrow на сайте, и он читался как ошибка вёрстки (обзор 24.08). */
main p.eyebrow a:not(.btn),.eyebrow a{color:inherit;text-decoration:none}
main p.eyebrow a:not(.btn):hover,.eyebrow a:hover{text-decoration:underline;text-decoration-color:currentColor}
/* Надзаголовок стоит и на светлой секции, и на тёмном первом экране. Бордо на
   чернилах давало 1.85:1 при 11.8 px — замерено в браузере 04.08 (гейт #12), то
   есть подпись читалась только тем, кто знал, что она там есть. На тёмном фоне
   берём золото: 5.3:1. Это тот же класс дефекта, что подписи формы и прозрачная
   кнопка: элемент, живущий на двух фонах, обязан объявить цвет для обоих. */
.hero .eyebrow,.band .eyebrow,footer.site .eyebrow{color:var(--gilt)}
section{padding:3.6rem 0}
section h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin:.3rem 0 1.4rem}
.lead{font-size:1.1rem;color:var(--ink-soft);max-width:35em}
/* Скриншот первой страницы протокола на главной (S-03). Размеры стоят в
   атрибутах img — без них картинка на ленивой загрузке двигает страницу (CLS,
   грабли 13.08). */
.protoshot{margin:28px 0 10px;max-width:460px}
.protoshot img{width:100%;height:auto;display:block;border:1px solid rgba(31,29,26,.18);
  border-radius:6px;box-shadow:0 14px 34px rgba(31,29,26,.18)}
.protoshot a{display:block}
.protoshot figcaption{margin-top:10px;font-size:.9rem;color:var(--ink-soft)}
/* Дословные цитаты из протокола на карточке образца (S-15) */
.qfind{margin:4px 0 10px;padding-left:1.2em;font-size:.95rem;color:var(--ink-soft)}
.qfind li{margin-bottom:6px}

/* header / nav */
header.top{position:sticky;top:0;z-index:50;background:rgba(22,19,15,.97);color:var(--paper);
  backdrop-filter:blur(6px)}
header.top .wrap{display:flex;align-items:center;gap:.7rem;padding-top:.7rem;padding-bottom:.7rem}
header.top .brand{display:flex;align-items:center;gap:.55rem;font-family:var(--serif);
  font-weight:700;color:var(--paper);letter-spacing:.03em}
header.top .brand .marklogo{width:38px;height:38px;flex-shrink:0}
header.top .brand .bt{display:flex;flex-direction:column;line-height:1.05}
header.top .brand b{color:var(--paper)}
header.top .brand span{color:var(--gilt);font-family:var(--sans);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:400}
footer.site .brandfoot{display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem}
footer.site .brandfoot .marklogo{width:34px;height:34px;flex-shrink:0}
header.top nav{margin-left:auto;display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
header.top nav a{color:var(--paper);opacity:.8;padding:.4rem .55rem;font-size:.88rem;border-radius:8px}
header.top nav a:hover{opacity:1;background:rgba(169,134,63,.2);text-decoration:none}
/* Кнопка в бота ВНУТРИ выпадающего меню телефона. На широком экране её
   нет: там работает кнопка шапки, а две одинаковые рядом — это два
   призыва в одно место. На телефоне кнопка шапки скрыта (решение
   владельца 04.08, чтобы на первом экране не было шести призывов), и
   человек, открывший меню, оставался без действия — только со списком
   разделов. Правило «не шесть призывов» этим не нарушается: закрытое
   меню ничего не показывает. */
header.top nav a.navcta{display:none}
/* Одна языковая кнопка вместо переключателя из двух половинок (решение
   владельца 04.08). Подсвечивать текущий язык незачем: человек и так на нём
   читает. Кнопка сделана «монетой» под знак сайта — тонкая золотая рамка,
   бумажный текст, при наведении золото заливается. */
.langbtn{margin-left:.5rem;padding:.3rem .62rem;border:1px solid var(--gilt);
  border-radius:99px;color:var(--paper);font-family:var(--sans);font-size:.78rem;
  font-weight:700;letter-spacing:.06em;line-height:1;display:inline-flex;
  align-items:center;justify-content:center;transition:background .15s,color .15s}
.langbtn:hover{background:var(--gilt);color:var(--ink);text-decoration:none}
@media (pointer:coarse){.langbtn{min-width:44px;min-height:44px}}

/* Раскрывающиеся заголовки — тоже кнопка, и на телефоне по ней целятся
   пальцем. Замер 21.08 на живой главной при ширине 360: тринадцать `summary`
   высотой 25–28 px при норме 44. Панель Яндекса всё это время писала
   NOT_MOBILE_FRIENDLY по обоим доменам, и это единственное, что нашлось
   настоящего: горизонтального переполнения нет, `viewport` на месте, языковая
   кнопка прикрыта правилом строкой выше. Ссылки внутри абзацев в счёт не идут —
   гайдлайны исключают их прямо.
   Правило только для пальца: на десктопе вид не меняется ни на пиксель. */
@media (pointer:coarse){
  /* Отступами, а НЕ `display:flex`: флекс на `summary` в части движков
     убирает встроенный треугольник-указатель, и раскрывающийся блок перестаёт
     выглядеть раскрывающимся. Правило общее, `.faq summary` со своим отступом
     его перебивает по специфичности и остаётся как было. */
  summary{padding-top:.6rem;padding-bottom:.6rem}
}

/* Гамбургер: на широком экране его нет, на телефоне он заменяет строку меню,
   которая уезжала вбок или ломалась на два ряда (замечание владельца 04.08).
   Три полоски рисуются самим элементом — иконочный шрифт ради трёх линий
   тянуть незачем. */
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(236,231,221,.35);
  border-radius:10px;width:44px;height:44px;padding:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:19px;height:2px;background:var(--paper);border-radius:2px;
  transition:transform .18s,opacity .15s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.btn{display:inline-block;border:0;border-radius:10px;font-family:var(--sans);font-size:1rem;
  font-weight:700;padding:.85rem 1.5rem;cursor:pointer;text-align:center;transition:transform .1s,background .15s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn.primary{background:var(--bordo);color:#F6EFE4}
.btn.primary:hover{background:var(--bordo-d)}
/* Прозрачная кнопка бывает на двух фонах. По умолчанию — тёмная на светлом;
   в тёмной шапке и бордовой полосе перекрашивается. До 02.08 существовал только
   светлый вариант, и на светлой секции кнопка была невидима — как и подписи
   формы, тот же дефект «текст в цвет фона». */
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(31,29,26,.35)}
.hero .btn.ghost,.band .btn.ghost{color:var(--paper);border-color:rgba(236,231,221,.5)}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.sm{padding:.55rem 1rem;font-size:.9rem}

/* hero */
.hero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;
  padding:4.2rem 0 4rem}
.hero::before{content:"";position:absolute;right:-140px;top:-120px;width:460px;height:460px;
  border:1.5px solid rgba(169,134,63,.28);border-radius:50%}
.hero::after{content:"";position:absolute;right:-80px;top:-60px;width:340px;height:340px;
  border:1px solid rgba(169,134,63,.18);border-radius:50%}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(1.9rem,5vw,3.1rem);margin:.7rem 0 1rem;max-width:16em}
.hero .sub{font-size:1.15rem;color:#D8D0C0;max-width:34em}
/* Цена стоит ДО кнопок (S-02): человек решает, нажимать ли, зная её. Цвет задан явно — первый экран тёмный, наследование сделало бы текст невидимым (дефект случался дважды) */
.hero .offerline{font-size:1.02rem;color:#EDE6D6;max-width:34em;margin:1.1rem 0 0}
.hero .offerline b{color:var(--gilt)}
.hero .sub b{color:var(--paper)}
.hero .cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem;align-items:center}
/* Правая половина первого экрана (решение владельца 25.08, макет A2): на
   десктопе и планшете рядом с текстом стоит первая страница НАСТОЯЩЕГО
   выданного протокола со штампом вердикта — единственный вариант из пяти
   показанных, который показывает товар, а не украшение. Ниже 1000 px колонка
   одна и миниатюры нет: на телефоне ей негде стоять, а текст важнее.
   Картинка — растр первой страницы образца с витрины (`/samples/`): она не
   рисуется, а снимается с файла, который любой может скачать и сверить. */
.hero .heroside{display:none}
@media (min-width:1000px){
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3rem;align-items:center}
  .hero .heroside{display:block;position:relative;z-index:2}
  .hero .protocard{position:relative;transform:rotate(-1.4deg);
    filter:drop-shadow(0 16px 34px rgba(0,0,0,.45))}
  .hero .protocard img{display:block;width:100%;height:auto;border-radius:5px;
    border:1px solid rgba(236,231,221,.25)}
  .hero .protocard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
    border-radius:0 0 5px 5px;background:linear-gradient(to bottom,rgba(22,19,15,0),rgba(22,19,15,.96))}
  .hero .protostamp{position:absolute;left:50%;bottom:1.6rem;z-index:3;
    transform:translateX(-50%) rotate(-3deg);font-family:var(--serif);font-size:1.05rem;
    letter-spacing:.16em;color:var(--gilt);border:2px solid var(--gilt);border-radius:5px;
    padding:.5rem 1rem;background:rgba(22,19,15,.55);white-space:nowrap}
  .hero .protocap{margin:.9rem 0 0;text-align:center;font-family:var(--sans);
    font-size:.86rem;color:#B9B09C}
  .hero .protocap a{color:#C6BDA8}
}
.hero .cta .tiny{color:#C6BDA8;font-size:.94rem}
.hero .moment{margin-top:1.6rem;font-size:.9rem;color:#B9B09C;border-left:2px solid var(--gilt);
  padding-left:.9rem;max-width:34em}

/* answer box (для AEO — прямой ответ первым блоком) */
.answer{background:var(--paper2);border:1px solid var(--hairline);border-left:4px solid var(--gilt);
  border-radius:0 12px 12px 0;padding:1.3rem 1.5rem;margin:0 0 0;max-width:46em}
.answer p{margin:0;font-size:1.05rem}

/* conceptual callout («карта — не территория»): смысловая врезка, не карточка.
   Канон V2 от 21.08 разрешает её ровно один раз на каждой главной — потому и
   стиль тихий: засечки, золотая линейка слева, без фона и без рамки. */
.callout{margin:1.6rem 0 0;padding:.2rem 0 .2rem 1.4rem;border-left:3px solid var(--gilt);
  max-width:44em;font-family:var(--serif)}
.callout p{margin:0;font-size:1.08rem;line-height:1.55}
.callout p.muted{margin-top:.6rem;font-size:.9rem;font-family:var(--sans)}

/* cards / grid */
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--paper2);border:1px solid var(--hairline);border-radius:14px;padding:1.4rem 1.5rem}
.card h3{font-size:1.12rem;margin:0 0 .5rem}
.card p{margin:.3rem 0;color:var(--ink-soft);font-size:.98rem;max-width:68ch}
/* Строка длиннее ~90 знаков теряется на возврате каретки: глаз не находит
   начало следующей. Карточка бывает во всю ширину (`/method/o18/`, витрина
   образцов на одном элементе) — там абзац растягивался на 1078 px, это ~127
   знаков. Потолок ставится АБЗАЦУ, а не карточке: карточка держит рамку и
   фон, ширину читаемости держит текст (замер 24.08: 72 абзаца из 87 на
   странице метода были длиннее 95 знаков). */

/* steps */
.steps{counter-reset:st;display:grid;gap:.9rem;max-width:42em}
.step{display:flex;gap:1rem;background:var(--paper2);border:1px solid var(--hairline);
  border-radius:12px;padding:1.1rem 1.3rem}
.step .n{counter-increment:st;flex-shrink:0;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--ink);color:var(--gilt);font-family:var(--mono);font-weight:700;
  display:flex;align-items:center;justify-content:center}
.step .n::before{content:counter(st)}
/* Номер шага — значок из фирменного набора «В кольце» (решение владельца
   25.08, выбран вариант «светлая выкладка»): золотое кольцо знака и засечная
   цифра. Файлы — `site/assets/icons/step-N.svg`, копии
   `docs/brand/out/icons/svg/light/digit-N.svg`; чертёж в `docs/brand/icons.py`,
   руками svg не править. Счётчик остаётся в `::before` для скринридера и на
   случай, если значок не загрузился: текст делается прозрачным, а не пустым. */
.step .n{background:transparent center/contain no-repeat;border:0;width:2.5rem;height:2.5rem;
  color:transparent;box-shadow:none}
.steps .step:nth-child(1) .n{background-image:url(/assets/icons/step-1.svg)}
.steps .step:nth-child(2) .n{background-image:url(/assets/icons/step-2.svg)}
.steps .step:nth-child(3) .n{background-image:url(/assets/icons/step-3.svg)}
.steps .step:nth-child(4) .n{background-image:url(/assets/icons/step-4.svg)}
.steps .step:nth-child(5) .n{background-image:url(/assets/icons/step-5.svg)}
.steps .step:nth-child(6) .n{background-image:url(/assets/icons/step-6.svg)}
.steps .step:nth-child(7) .n{background-image:url(/assets/icons/step-7.svg)}
.steps .step:nth-child(8) .n{background-image:url(/assets/icons/step-8.svg)}
.steps .step:nth-child(9) .n{background-image:url(/assets/icons/step-9.svg)}
.step h3{margin:.1rem 0 .3rem;font-size:1.05rem}
.step p{margin:0;color:var(--ink-soft);font-size:.96rem}

/* fact table */
.tbl{width:100%;border-collapse:collapse;background:var(--paper2);border:1px solid var(--hairline);
  border-radius:12px;overflow:hidden;font-size:.98rem}
.tbl th,.tbl td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top}
.tbl th{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase}
.tbl tr:last-child td{border-bottom:0}
.tbl .vs{color:var(--ink-soft)}
.tbl .us{font-weight:700}

/* privacy / list */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;max-width:46em}
.ticks li{padding-left:1.7rem;position:relative;color:var(--ink-soft)}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700}
.ticks li b{color:var(--ink)}
.honest{margin-top:1.2rem;font-size:.95rem;color:var(--ink-soft);font-style:italic;
  border-left:2px solid var(--hairline);padding-left:.9rem;max-width:46em}

/* vignettes */
.vig{background:var(--paper2);border:1px solid var(--hairline);border-radius:12px;padding:1.1rem 1.3rem}
.vig .q{font-family:var(--serif);font-style:italic;font-size:1.05rem;margin:0 0 .4rem}
.vig p{margin:0;color:var(--ink-soft);font-size:.95rem}
/* Разбор одного случая на странице /cases/: реплика заказчика заголовком,
   под ней — ловушка, работа коллегии и результат. */
.case{border-left:3px solid var(--gilt);padding:.2rem 0 .2rem 1.4rem;margin:2.2rem 0;
  max-width:52em}
.case h3{font-family:var(--serif);font-style:italic;font-size:1.25rem;font-weight:400;
  margin:0 0 .7rem;line-height:1.35}
.case p{margin:0 0 .7rem;color:var(--ink-soft)}
.case p b{color:var(--ink)}
@media (max-width:640px){.case{padding-left:1rem;margin:1.8rem 0}
  .case h3{font-size:1.12rem}}

/* ambassadors band */
.band{background:var(--bordo);color:#F6EFE4}
.band h2{color:#F6EFE4}
.band .lead{color:#F0E2D6}
.band .btn.primary{background:var(--ink);color:var(--paper)}
.band .slots{font-family:var(--mono);font-size:.85rem;letter-spacing:.05em;opacity:.9;margin-top:.8rem}

footer.site .links.other{opacity:.75;font-size:.9rem;margin-top:.4rem}
/* блок основателя: портрет + текст, на узком экране — стопкой */
.founder{display:grid;grid-template-columns:280px 1fr;gap:2rem;align-items:start;margin-top:1.2rem}
.founder .portrait{width:100%;height:auto;border-radius:14px;border:1px solid var(--hairline);
  display:block}
.founder-text p{color:var(--ink-soft);margin:0 0 1rem}
.founder-text .sign{font-family:var(--serif);font-weight:700;color:var(--ink);margin-top:1.3rem}
@media(max-width:760px){.founder{grid-template-columns:1fr;gap:1.2rem}
  .founder .portrait{max-width:240px}}

/* video placeholder */
.videobox{background:var(--paper2);border:1.5px dashed var(--hairline);border-radius:14px;
  padding:2.4rem 1.5rem;text-align:center;color:var(--ink-soft)}
.videobox .play{width:60px;height:60px;border-radius:50%;background:var(--bordo);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:.7rem}

/* faq */
.faq details{background:var(--paper2);border:1px solid var(--hairline);border-radius:10px;
  padding:.4rem 1.1rem;margin-bottom:.7rem}
.faq summary{cursor:pointer;font-weight:700;font-family:var(--serif);padding:.6rem 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--gilt);font-family:var(--mono)}
.faq details[open] summary::before{content:"– "}
.faq details p{margin:.2rem 0 .8rem;color:var(--ink-soft);font-size:.97rem}

/* form */
.applyform{background:var(--paper2);border:1px solid var(--hairline);border-radius:14px;
  padding:1.6rem;max-width:34em}
/* Цвет подписи задаём явно. Форма стоит в бордовой полосе (.band задаёт
   color:#F6EFE4), а фон у самой формы — #F6EFE4: без этой строки подписи всех
   полей — кремовый текст на кремовом фоне, то есть невидимы. Прожили так до
   02.08, пока владелец не спросил, почему у первого поля нет подсказки. */
.applyform label{display:block;font-size:.85rem;font-weight:700;margin:.9rem 0 .3rem;
  color:var(--ink)}
.applyform .hint{display:block;font-size:.8rem;font-weight:400;color:var(--ink-soft);
  margin:.15rem 0 .1rem}
.applyform fieldset{border:0;padding:0;margin:1.1rem 0 0}
.applyform legend{font-size:.85rem;font-weight:700;color:var(--ink);padding:0}
/* Подпись рядом с флажком — ОДИН flex-элемент. Пока текст лежал в label голым,
   каждый его кусок и ссылка внутри становились самостоятельными колонками: на
   телефоне согласие разъезжалось на две узкие полосы (замечено владельцем
   04.08 по скриншоту). Текст обёрнут в span, а span тянется на всю ширину. */
.applyform .choice > span{flex:1 1 auto;min-width:0}
.applyform .choice{display:flex;align-items:flex-start;gap:.55rem;font-size:.92rem;
  font-weight:400;color:var(--ink);margin:.35rem 0;cursor:pointer}
.applyform .choice input{width:auto;flex:none;margin:.25rem 0 0;padding:0}
/* Согласие на обработку. Цвет задан ЯВНО: подписи формы уже дважды сливались
   с фоном, унаследовав его от тёмной секции (правило проекта — элемент,
   который стоит и на светлом, и на тёмном, объявляет свой цвет сам). */
.applyform .consent{margin:1rem 0 .2rem;color:var(--ink);font-size:.88rem;line-height:1.45}
.applyform .consent a{color:var(--bordo);text-decoration:underline}
.applyform .consent input{min-width:24px;min-height:24px}
.applyform .choice input{min-width:24px;min-height:24px}
.applyform input,.applyform textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--hairline);
  border-radius:8px;font:inherit;font-size:.98rem;background:#fff;color:var(--ink)}
.applyform textarea{min-height:5rem;resize:vertical}
.applyform select{width:100%;padding:.7rem .8rem;border:1px solid var(--hairline);
  border-radius:8px;font:inherit;font-size:.98rem;background:#fff;color:var(--ink)}
.applyform .btn{margin-top:1.1rem;width:100%}
.applyform .fine{font-size:.8rem;color:var(--ink-soft);margin-top:.8rem}
.formnote{padding:.8rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.92rem}
.formnote.ok{background:#E3ECDB;color:var(--good)}
.formnote.err{background:#F4E1E3;color:var(--bordo)}

/* Плавающая кнопка в Telegram-бота (правка владельца 02.08). Не виджет: виджет
   Telegram — сторонний скрипт, а мы обещали ноль чужих скриптов и закрепили это
   CSP. Обычная ссылка, работает без JavaScript. На узком экране остаётся только
   значок — подпись съедала бы пол-экрана. */
.tgfab{transition:opacity .2s;position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;display:flex;
  align-items:center;gap:.55rem;background:var(--bordo);color:#F6EFE4;
  border:1px solid rgba(169,134,63,.55);border-radius:99px;padding:.7rem 1.15rem;
  font-family:var(--sans);font-size:.92rem;font-weight:700;text-decoration:none;
  box-shadow:0 6px 22px rgba(22,19,15,.28);transition:transform .12s,box-shadow .12s}
.tgfab:hover{text-decoration:none;color:#fff;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(22,19,15,.34)}
.tgfab svg{flex:none}
@media (max-width:720px){
  .tgfab{padding:.75rem;right:.8rem;bottom:.8rem}
  .tgfab span{display:none}
}
@media print{.tgfab{display:none}}

/* footer */
footer.site{background:var(--ink);color:#CFC6B4;padding:2.6rem 0;font-size:.9rem}
footer.site .wrap{display:grid;gap:1rem}
footer.site a{color:var(--gilt)}
footer.site .disc{font-size:.88rem;color:#9A917E;max-width:52em}
footer.site .links{display:flex;gap:1.2rem;flex-wrap:wrap}
footer.site .seal{opacity:.5;font-family:var(--mono);font-size:.75rem}
footer.site .fine{font-size:.88rem;color:#9A917E;max-width:56em;margin:0}
/* Подробная таблица прав и словарь терминов на странице тарифов */
.card.scrollx{overflow-x:auto}
table.rights{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
table.rights th{text-align:left;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink-soft);border-bottom:2px solid var(--ink);padding:.6rem .7rem;white-space:nowrap}
table.rights td{border-bottom:1px solid var(--hairline);padding:.6rem .7rem;vertical-align:top}
table.rights td.num{text-align:center;font-family:var(--mono);white-space:nowrap}
/* Реквизиты оператора — две колонки, а не пять: `min-width: 640px` от таблицы
   прав уводил её за край экрана телефона, и страница /about/ ехала вбок
   (замер 05.08 на 390 px: таблица 640 px, документ 686 px). Здесь ширина
   свободная, длинные значения переносятся. */
table.rights.req{min-width:0}
table.rights.req td{overflow-wrap:anywhere}
/* 42 %, а не 38: на 390 px «наименование» рвалось посередине слова. */
table.rights.req td:first-child{width:42%;overflow-wrap:normal;hyphens:manual}
table.rights tr:hover td{background:#FAF7F0}
table.rights .muted{font-size:.82rem;color:var(--ink-soft)}
.gloss{columns:2;column-gap:2.2rem;margin-top:1rem}
.gloss h3{font-family:var(--serif);font-size:1.02rem;margin:0 0 .3rem;break-after:avoid}
.gloss p{margin:0 0 1.2rem;color:var(--ink-soft);break-inside:avoid}
@media (max-width:1150px){.gloss{columns:1}}
footer.site .closed{color:var(--gilt);font-size:.85rem;margin:0}
/* Активный пункт меню: человек должен видеть, где он, а не гадать */
header.top nav a.on{opacity:1;background:rgba(169,134,63,.22)}
header.top .btn.tiny{font-size:.85rem;padding:.4rem .9rem;white-space:nowrap}
/* На узком экране кнопка доступа важнее пунктов меню — она остаётся, меню
   переносится на вторую строку, а не исчезает (правка 02.08: раньше на
   внутренних страницах половина навигации просто отсутствовала) */
@media (max-width:1150px){
header.top .wrap{flex-wrap:wrap;row-gap:.4rem}
header.top nav{order:3;width:100%;margin-left:0}
}

/* misc */
.center{text-align:center}
.mt{margin-top:1.4rem}
/* список первоисточников метода: ссылки должны переноситься, а не растягивать
   страницу на телефоне (правило «горизонтальный скролл — внутри блока») */
.src{max-width:52em;margin:.8rem 0 0;padding-left:1.1rem;color:var(--ink-soft)}
.src li{margin:.5rem 0;font-size:.98rem}
.src a{overflow-wrap:anywhere}
@media(max-width:640px){
  section{padding:2.6rem 0}
  .hero{padding:3rem 0}
  /* Раньше на телефоне все пункты меню просто скрывались (display:none) — и
     навигации не оставалось вовсе: ни у человека, ни у краулера. Теперь пункты
     живут строкой, которая прокручивается вбок внутри себя. */
  /* Меню на телефоне — выпадающая панель под шапкой, а не строка, уезжающая
     вбок (замечание владельца 04.08: пункты либо прячутся за краем, либо
     встают в два ряда и шапка «прыгает»). Панель закрыта по умолчанию и
     раскрывается кнопкой-гамбургером; без JavaScript пункты остаются видимы —
     навигация не должна зависеть от скрипта. */
  /* Порядок в шапке телефона: знак — язык — гамбургер в одну строку, панель
     меню под ними. Без явного порядка языковая кнопка сваливалась на вторую
     строку и шапка выглядела разбалансированной (замечено глазами 04.08). */
  .burger{display:flex;order:3;margin-left:.4rem;flex:none}
  .langbtn{order:2;margin-left:auto;flex:none}
  /* Дескриптор под знаком на телефоне не помещается: знак, язык и гамбургер
     втроём шире 390 px, и гамбургер сваливался на вторую строку. Слово
     «ОППОНЕНТУРА» остаётся, дескриптор виден на всех остальных экранах и в
     подвале. */
  header.top .brand{min-width:0}
  header.top .brand .bt span{display:none}
  header.top .wrap{flex-wrap:wrap;row-gap:.5rem}
  header.top nav{order:9;width:100%;flex-direction:column;align-items:stretch;
    gap:0;margin:0;border-top:1px solid rgba(236,231,221,.16)}
  header.top nav a{padding:.85rem .2rem;font-size:.98rem;border-radius:0;
    border-bottom:1px solid rgba(236,231,221,.1)}
  header.top nav a:last-child{border-bottom:0}
  header.top nav a.navcta{display:block;background:var(--bordo);color:#F6EFE4;
    opacity:1;font-weight:700;text-align:center;border-bottom:0;border-radius:10px;
    margin:.7rem 0 .35rem;padding:.9rem .2rem}
  header.top nav a.navcta:hover{background:var(--bordo-d)}
  /* Меню на телефоне скрыто СРАЗУ, а не после отработки скрипта
     (гейт запуска 13.08). Здесь стояло `body.js header.top nav`, то есть
     панель была видна до тех пор, пока site.js не поставит класс: шапка
     схлопывалась с ~342 px до ~66 px уже после первой отрисовки и
     толкала вверх весь первый экран. Это и есть CLS 0.318 при пороге
     0,25 — прыгали `section.hero` и строка с ценой, между которыми
     стоит главная кнопка.
     Причина прежнего порядка была верной: у человека с выключенным
     JavaScript навигация не должна пропадать. Она и не пропадает —
     её возвращает `<noscript>` в шапке страницы (`gen_site_chrome`).
     Так правильнее по сути: у большинства скрипт есть, и платить
     прыжком первого экрана за меньшинство неверно. */
  header.top nav{display:none}
  header.top nav.open{display:flex}
  /* На первом экране телефона было шесть кликабельных призывов, и три из них
     вели в одно и то же место разными словами (гейт #47). Решение владельца
     04.08: оставить два — «оставить заявку» и «открыть бота». Кнопка шапки
     дублирует первую и на телефоне прячется (в шапке остаётся навигация),
     мелкая ссылка «как проходит заседание» дублирует пункт меню. */
  header.top .btn.primary.tiny{display:none}
  .hero .cta .tiny{display:none}
}
/* поля формы. До 20.08 их не было вовсе: страница проверки подлинности —
   та, что доказывает, что документ настоящий, — стояла на браузерных полях
   `2px inset` и серой системной кнопке. Класс `btn` без варианта рисует
   именно её: рядом с бордовыми кнопками сайта главное действие страницы
   выглядело выключенным. */
.inp{font:inherit;color:var(--ink);background:var(--paper2);
  border:1px solid var(--hairline);border-radius:10px;padding:.7rem .8rem;
  width:100%;max-width:34rem;transition:border-color .15s,box-shadow .15s}
.inp:hover{border-color:var(--gilt)}
.inp:focus{outline:none;border-color:var(--gilt);box-shadow:0 0 0 3px rgba(169,134,63,.28)}
.inp.short{max-width:11rem}
.inp.mono{font-family:var(--mono);letter-spacing:.01em}
.field{display:block;margin-bottom:1.2rem}
.field>span{display:block;margin-bottom:.35rem}
.field .hint{display:block;margin:.4rem 0 0;font-size:.92rem;color:var(--ink-soft)}
/* Сам виджет выбора файла остаётся РОДНЫМ: его подпись браузер пишет на языке
   пользователя, и подменять её своей — значит врать тому, у кого браузер на
   другом языке. Красим только кнопку внутри него. */
.filein{font:inherit;max-width:100%;padding:0}
.filein::file-selector-button{font:inherit;font-weight:700;cursor:pointer;
  margin-right:.7rem;padding:.6rem 1rem;border:1px solid var(--hairline);
  border-radius:10px;background:var(--paper2);color:var(--ink);
  transition:background .15s,border-color .15s}
.filein::file-selector-button:hover{background:var(--paper);border-color:var(--gilt)}

/* страница проверки подлинности */
.vform{margin:2rem 0;max-width:38em}
.vform .field:last-of-type{margin-bottom:0}
.vform details.inside{margin:0 0 1.4rem}
.vout{font-size:1.1rem;min-height:1.6rem;margin:0 0 1.5rem}
.vcard{margin:0 0 1.5rem}

/* страница оплаты: карточки тарифов. Цена — крупно, «что входит» — читаемо,
   кнопка не уезжает вниз при разной длине описания (grid + align-self:end) */
.plans{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.plan{background:var(--card,#fff);border:1px solid var(--hairline);border-radius:14px;
padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.35rem}
/* Кнопка прижата к низу карточки: число строк у карточек разное (плашка есть не у всех), и жёсткая grid-раскладка растягивала кнопку в блок */
/* Задача над названием тарифа (S-06): человек покупает работу, а не размер коллегии. Цвет задан явно — карточка стоит и на светлой, и на тёмной секции */
.plan .job{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--bordo);margin:0}
.plan h3{font-size:1.15rem;margin:0}
.plan .price{font-family:var(--mono);font-size:1.7rem;font-weight:700;color:var(--bordo);margin:.1rem 0}
.plan .quota{font-size:.85rem;color:var(--ink-soft);margin:0 0 .4rem}
.plan .what{font-size:.95rem;color:var(--ink-soft);margin:0 0 .9rem}
.plan .btn{align-self:start;margin-top:auto}
.plan .tiny{font-size:.86rem;color:var(--ink-soft);margin:.5rem 0 0;max-width:60ch}
/* Рекомендованный тариф и строка-якорь «по договору» (персона-аудит 02.08) */
.plan.pick{border-color:var(--bordo);box-shadow:0 0 0 3px rgba(126,29,40,.08)}
.plan .pick.alt{background:transparent;color:var(--bordo);border:1px solid var(--bordo)}
.plan .pick{align-self:start;width:fit-content;background:var(--bordo);color:#fff;font-size:.7rem;
letter-spacing:.06em;text-transform:uppercase;padding:.2rem .6rem;border-radius:99px;margin:0 0 .5rem}
/* Плашки карточек обязаны быть одной высоты, иначе заголовки в ряду стоят на разной.
   Две причины разъезда: у плашки с рамкой на 2 px больше (прозрачная рамка у всех
   выравнивает), а пустая плашка без текста схлопывается (неразрывный пробел держит) */
.plan .pick{border:1px solid transparent}
.plan .pick.hollow{visibility:hidden}
.plan .pick.hollow::before{content:"\00a0"}
.plan.contract{background:transparent;border-style:dashed}
/* Якорь «Особое дело» — четвёртый в сетке из трёх, и он вставал один во
   вторую строку на треть ширины: сирота читается как недогруженная страница,
   а не как якорь. Он занимает всю ширину под тарифами и раскладывается в
   строку — так он и работает: это не четвёртая кнопка, а рамка сверху. */
.plan.contract{grid-column:1/-1;display:grid;gap:.2rem 1.5rem;align-items:start;
  grid-template-columns:minmax(14rem,20rem) 1fr auto}
.plan.contract .job{grid-column:1}
.plan.contract h3{grid-column:1}
.plan.contract .price{grid-column:1;font-size:1.45rem}
.plan.contract .quota{grid-column:1}
.plan.contract .what{grid-column:2;grid-row:1/4;margin:0;align-self:center}
.plan.contract .btn{grid-column:3;grid-row:1/4;align-self:center;margin:0}
.plan.contract .tiny{grid-column:2;grid-row:4;margin:0}
.plan.contract .pick.hollow{display:none}
@media (max-width:860px){.plan.contract{grid-template-columns:1fr}
  .plan.contract .job,.plan.contract h3,.plan.contract .price,
  .plan.contract .quota,.plan.contract .what,.plan.contract .btn,
  .plan.contract .tiny{grid-column:1;grid-row:auto}
  .plan.contract .btn{justify-self:start;margin-top:.6rem}}
/* Цена «от 1 200 € / $1 200» в моно-шрифте рвалась между «$1» и «200» —
   число, разорванное переносом, читается как другое число. */
.plan .price{white-space:nowrap}
.plan.contract .price{white-space:normal}
.plan.contract .price span,.plan .price nobr{white-space:nowrap}
.plan.contract .price{color:var(--ink)}

/* Крошки: где человек находится и как вернуться на шаг назад (Y-04, 07.08).
   Цвет объявлен явно — и текст, и разделитель: это третий по счёту элемент,
   который стоит и на светлой странице, и рядом с тёмным первым экраном, а
   унаследованный цвет здесь уже дважды оборачивался невидимым текстом. */
.crumbs{font-size:.85rem;color:var(--ink-soft);padding:.9rem 0 .35rem}
.crumbs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.crumbs a{color:var(--ink-soft);text-decoration:underline;
  text-decoration-color:rgba(58,52,43,.35);text-underline-offset:.15em}
.crumbs a:hover{color:var(--bordo);text-decoration-color:currentColor}
.crumbs a::after{content:"›";margin-left:.35rem;color:var(--hairline);
  text-decoration:none;display:inline-block}
.crumbs [aria-current]{color:var(--ink);font-weight:700}
/* На телефоне длинная цепочка не должна съедать первый экран: последнее звено
   переносится целиком, а не рвётся посреди слова. */
/* На телефоне последнее звено скрыто: оно слово в слово повторяет заголовок,
   который стоит сразу под ним, — а на 390 px это полтора сантиметра первого
   экрана, отданных дважды сказанному. Остаётся то, ради чего крошки и нужны на
   маленьком экране: шаг назад в раздел. В разметке цепочка остаётся полной —
   она в JSON и от вида страницы не зависит. */
/* На телефоне текущий пункт крошек остаётся: одинокая «Главная» без
   продолжения выглядела как ошибка, а не как навигация (обзор 24.08). */
@media (max-width:560px){.crumbs{font-size:.8rem}}

/* «Дальше» — куда идти с этой страницы (Y-05, 07.08). Подвал связывает всё со
   всем и потому не связывает ничего: двенадцать ссылок подряд человек читает
   как выходные данные, а не как продолжение. Цвет задан явно — блок стоит и на
   светлом фоне, и следом за тёмной секцией. */
.next{border-top:1px solid var(--hairline);padding:1.5rem 0 1.8rem;color:var(--ink-soft)}
.next .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.4rem}
.next h2{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bordo);
  font-family:var(--sans);margin:0;flex:0 0 100%}
.next a{color:var(--bordo);font-weight:700;text-decoration:underline;
  text-decoration-color:rgba(126,29,40,.35);text-underline-offset:.18em}
.next a:hover{text-decoration-color:currentColor}

/* Широкая таблица прокручивается ВНУТРИ себя, а не тянет за собой страницу
   (правило класса web-frontend; замер 07.08 на телефоне: таблица тарифов в
   оферте — 798 px при экране 390, шесть колонок уезжали за край). На десктопе
   таблица остаётся обычной: приём включается только там, где не помещается. */
@media (max-width:820px){
  main table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
}

/* Видимая дата обновления (аудит SEO/GEO 07.08: её не было ни на одной
   странице, кроме юридических). Свежесть — прямой рычаг: поисковик и ИИ не
   станут цитировать как актуальное то, у чего не видят даты. Цвет объявлен
   явно — строка стоит и на светлом фоне, и под тёмной шапкой. */
/* Дата обновления живёт в ПОДВАЛЕ (правка владельца 11.08): она нужна машинам
   — ИИ-ответчик не цитирует как свежее то, у чего не видит даты, — а человеку
   на первом экране отвечала на вопрос, которого он не задавал. */
/* Дата обновления — единственный на сайте видимый признак свежести, и до
   13.08 она была самым нечитаемым текстом страницы: opacity .55 давала
   контраст 4.06 при норме 4.5 (axe, impact serious, все три вьюпорта, обе
   языковые версии). .7 даёт ≈5.8 — правится числом, а не размером шрифта. */
.updated{font-size:.86rem;opacity:.75;margin:.7rem 0 0}
/* Кегль ниже 13 px читают не все и не везде: 11–12.5 px стояли на подписях
   под кнопками, ⭐-ценах, подвале и дате обновления (замер 24.08 — 14
   элементов на главной). Подняты до 13.8–14 px; капс-надстрочники
   (`.eyebrow`, шапки таблиц) остаются мелкими намеренно — там кегль работает
   как ранг, а не как текст. */
.crumbs + .updated{margin-top:-.2rem}

/* Сводная таблица случаев: обзор на один экран перед подробными разборами
   (аудит SEO/GEO 07.08 — на странице не было ни таблицы, ни списка, а это
   первое, что ИИ-ответ вынимает как готовый пассаж). Прокрутка внутри
   контейнера, а не у страницы — правило класса web-frontend. */
.scrollx{overflow-x:auto}
table.cases{border-collapse:collapse;width:100%;font-size:.92rem;margin:1.6rem 0 0}
table.cases th{text-align:left;font-family:var(--sans);font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bordo);
  border-bottom:1px solid var(--hairline);padding:.5rem .8rem .5rem 0;vertical-align:bottom}
table.cases td{padding:.65rem .8rem .65rem 0;border-bottom:1px solid var(--hairline);
  color:var(--ink);vertical-align:top}
table.cases td:first-child{font-weight:700}
table.cases td:nth-child(2),table.cases td:nth-child(3){color:var(--ink-soft)}

/* Режим раннего доступа — бейдж у названия, а не полоса над заголовком
   (решение владельца 11.08). На узком экране прячется: там в шапке помещаются
   только логотип, кнопка и язык. */
.earlybadge{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold,#C9A227);border:1px solid currentColor;border-radius:999px;
  padding:.16rem .5rem;margin-left:.6rem;white-space:nowrap;opacity:.85;
  align-self:center}
@media (max-width:1150px){.earlybadge{display:none}}

/* Липкая шапка накрывала заголовок раздела при переходе по якорю (#how,
   #start): человек нажимал «как проходит заседание» и попадал на середину
   первой фразы. Одна строка вместо скрипта. */
html{scroll-padding-top:5.5rem}

/* Единственное действие на телефоне — нижняя полоса (решение владельца 12.08).
   Кнопка шапки на узком экране скрыта с 04.08, чтобы не было шести призывов на
   первом экране, — и человек, пролиставший страницу, оставался без действия.
   Полоса не наезжает на текст: страница получает нижний отступ. На десктопе её
   нет, там всегда видна липкая шапка. */
.mobilecta{display:none}
@media (max-width:1150px){
  /* Появляется ПОСЛЕ первого экрана (правка владельца 18.08): на hero кнопка
     уже есть, и вторая поверх неё — шум. Класс `show` ставит site.js; без
     JavaScript кнопка видна всегда, и это правильный запасной вариант —
     потерять единственный призыв хуже, чем показать его чуть раньше. */
  .mobilecta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    transition:transform .22s ease;
    align-items:center;justify-content:center;gap:.5rem;
    background:var(--bordo);color:#F6EFE4;text-decoration:none;
    font-family:var(--sans);font-weight:700;font-size:.98rem;
    padding:.95rem 1rem calc(.95rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 22px rgba(22,19,15,.28)}
  /* Прячем только когда скрипт РАБОТАЕТ: класс `js` он ставит первой строкой.
     Иначе кнопка исчезла бы у всех без JavaScript — единственный призыв на
     странице, и потерять его хуже, чем показать раньше времени. */
  html.js .mobilecta{transform:translateY(105%)}
  html.js .mobilecta.show{transform:none}
  .mobilecta:hover,.mobilecta:focus{color:#fff;text-decoration:none}
  .mobilecta svg{flex:none}
  body{padding-bottom:4.2rem}
}
@media print{.mobilecta{display:none}}

/* Лид внутри ТЁМНОЙ секции. Третий случай «текст в цвет фона» в проекте: на
   /cases/ лид первого экрана давал контраст 1,5:1 при норме 4,5 — `.lead`
   наследовал приглушённый чернильный цвет, рассчитанный на светлый фон.
   Правило по классу, а не по странице: новый тёмный блок с лидом получит цвет
   сам. */
.hero .lead, .band .lead, section[style*="--ink"] .lead{color:var(--paper2,#F0E2D6)}
.hero .lead b, .band .lead b{color:#fff}

/* карточка «пять вопросов» — собирается из pipeline.CORE_QUESTIONS */
ol.q5{max-width:46em;margin:1.2rem 0;padding-left:1.4rem;display:grid;gap:.6rem;
  color:var(--ink-soft);font-size:1.02rem}
ol.q5 li::marker{color:var(--gilt);font-weight:700}

/* ── новая главная (18.08): схема «До → Проверяем → После», анатомия
   протокола, видео с заглушкой, раскрывающийся блок «что внутри» ── */
.hero .mech{color:#B9B09C;font-size:.97rem;max-width:34em;margin:.9rem 0 0}
.lead.big{font-size:1.15rem;max-width:35em}

.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:1rem;align-items:start;
  margin:1.6rem 0}
.flowstep{background:var(--paper2);border:1px solid var(--hairline);border-radius:12px;
  padding:1rem 1.1rem}
.flowstep h3{margin:.2rem 0 .6rem;font-size:1.05rem}
.flowstep ul{margin:0;padding-left:1.1rem;color:var(--ink-soft);font-size:.95rem;
  display:grid;gap:.3rem}
.flowarrow{align-self:center;color:var(--gilt);font-size:1.6rem;line-height:1}

.anatomy{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.6rem;
  align-items:start;margin-top:1.2rem}
.anatomy .protoshot{margin:0}
.anatomy .protoshot img{width:100%;height:auto;border:1px solid var(--hairline);
  border-radius:10px;box-shadow:0 8px 28px rgba(31,29,26,.10)}
.spots details{border-bottom:1px solid var(--hairline);padding:.6rem 0}
.spots details:first-of-type{border-top:1px solid var(--hairline)}
.spots summary{cursor:pointer;font-weight:600}
.spots summary b{color:var(--gilt);margin-right:.4rem}
.spots details p{margin:.5rem 0 0;color:var(--ink-soft)}

/* Ролик основателя. Заглушка `.videostub` жила здесь до 20.08 и удалена вместе
   с текстом «видео снимается»: мёртвое правило в таблице стилей — обещание,
   которое однажды снова покажут. `preload="none"` в разметке обязателен: без
   него сорок мегабайт уезжают всем, кто открыл страницу, включая тех, кто
   никогда не нажмёт play. */
.founder-video{width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;
  background:var(--ink);display:block}
.transcript{margin-top:1.8rem;border-top:1px solid var(--hairline);padding-top:1rem}
.transcript summary{cursor:pointer;font-family:var(--sans);font-size:.95rem;
  color:var(--bordo)}
.transcript p{color:var(--ink-soft);margin:.9rem 0;font-size:.97rem}
.transcript .tstamp{font-family:var(--mono);font-size:.82rem;color:var(--gilt);
  text-decoration:none;margin-right:.45rem}
.transcript .tstamp:hover{text-decoration:underline}
/* Заглушка ролика и рассказ основателя стоят рядом. Базовый .videobox
   центрирует содержимое — это верно для одинокой заглушки и неверно для абзацев
   рядом с ней: текст от первого лица шёл по центру на обеих языковых версиях.
   Выравнивание сбрасывается ЗДЕСЬ, у самой заглушки центр остаётся своим. */
#video .videobox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.6rem;
  align-items:start;background:none;border:0;padding:0;text-align:left}

details.inside{border:1px solid var(--hairline);border-radius:12px;padding:.8rem 1.1rem;
  background:var(--paper)}
details.inside > summary{cursor:pointer;font-weight:700;font-family:var(--sans)}
details.inside p{color:var(--ink-soft)}

#faq details{border-bottom:1px solid var(--hairline);padding:.7rem 0}
#faq summary{cursor:pointer;font-weight:600}
#faq details p{color:var(--ink-soft);max-width:35em;margin:.5rem 0 0}

@media (max-width:1150px){
  .flow{grid-template-columns:1fr;gap:.6rem}
  .flowarrow{justify-self:center;transform:rotate(90deg)}
  .anatomy,#video .videobox{grid-template-columns:1fr}
}

/* интерактив «нужен ли разбор?» — собирается tools/gen_worth_js.py */

/* Врезка, а не очередной раздел (правка владельца 18.08). Здесь сервис
   единственный раз работает против собственной выручки, и в череде одинаковых
   светлых полос это читалось как рядовой текст с формой внутри. Отсюда три
   вещи: карточка на более светлой бумаге, бордовая черта сверху — тот же
   акцент, что у печати на документе, — и метка-пилюля, которая называет жанр
   до того, как человек начнёт читать заголовок. Тень и радиус те же, что у
   карточки пяти вопросов: это соседние по смыслу предметы, которые уносят с
   собой. */
#worth .worthpanel{background:var(--paper2);border:1px solid var(--hairline);
  border-top:3px solid var(--bordo);border-radius:16px;padding:1.8rem 2rem 2rem;
  box-shadow:0 6px 20px rgba(31,29,26,.06);max-width:52em}
#worth .worthpanel h2{margin:.7rem 0 1rem}
#worth .worthpanel .muted{margin-bottom:0}
@media (max-width:640px){ #worth .worthpanel{padding:1.2rem 1.1rem 1.4rem} }

/* Метка жанра. Пилюля, а не надзаголовок: надзаголовки на этой странице
   открывают РАЗДЕЛЫ, а здесь нужно назвать предмет внутри врезки. */
.chip{display:inline-block;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--bordo);
  background:rgba(126,29,40,.07);border:1px solid rgba(126,29,40,.24);
  border-radius:999px;padding:.3rem .72rem;margin:0}

/* Строка «зачем это здесь». Она и есть доказательство: сервис называет случай,
   когда он не нужен, до того как просит денег. Золотая черта слева — тот же
   приём, что у «Материалов дела» и цитат. */
.worthwhy{border-left:3px solid var(--gilt);padding-left:1rem;margin:1.1rem 0 .9rem;
  color:var(--ink);font-size:1.02rem;max-width:44em}

/* Внутри врезки у самого опроса своей рамки нет: коробка в коробке съедает
   воздух и делает из инструмента форму. */
.worthbox{background:var(--paper2);border:1px solid var(--hairline);border-radius:14px;
  padding:1.2rem 1.3rem;margin:1.2rem 0;min-height:11rem;max-width:46em}
#worth .worthbox{background:none;border:0;padding:0;margin:1.3rem 0 1.1rem}
.worthbox h3{margin:.2rem 0 .9rem;font-size:1.12rem}
/* Счётчик шагов стоит на СВЕТЛОЙ карточке, поэтому цвет не золотой: --gilt
   задуман для тёмных секций и на бумаге даёт контраст 2.97 при норме 4.5 для
   мелкого текста. Тот же цвет, что у надзаголовков светлых секций. */
.worthstep{font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bordo);font-weight:700;margin:0}
.worthopts{display:grid;gap:.5rem}
.worthopts .btn{text-align:left;justify-content:flex-start;padding:.7rem .9rem}
.worthback{background:none;border:0;color:var(--ink-soft);cursor:pointer;
  font:inherit;font-size:.9rem;padding:.6rem 0 0;text-decoration:underline}
.worthresult h3{margin-top:0}
.worthresult p{color:var(--ink-soft);max-width:44em}
.worthresult .btn{margin:.4rem .5rem .4rem 0}


/* ── анатомия протокола: номера поверх скрина (18.08) ── */
.shotwrap{position:relative;display:block;line-height:0}
.shotwrap img{width:100%;height:auto;border:1px solid var(--hairline);border-radius:10px;
  box-shadow:0 10px 30px rgba(31,29,26,.12)}
.spot{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;
  border-radius:50%;border:0;cursor:pointer;padding:0;
  background:var(--bordo);color:#F6EFE4;font:700 .8rem/26px var(--sans);text-align:center;
  box-shadow:0 0 0 3px rgba(246,239,228,.9),0 2px 8px rgba(31,29,26,.35);
  transition:transform .16s ease,box-shadow .16s ease}
.spot:hover,.spot:focus-visible,.spot.lit{transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 4px rgba(169,134,63,.55),0 3px 12px rgba(31,29,26,.4);outline:none}
.protoshot figcaption{font-size:.86rem;color:var(--ink-soft);margin-top:.6rem;line-height:1.45}
.spots details.lit{background:rgba(169,134,63,.10);border-radius:8px}
.spots details.lit summary{color:var(--bordo)}
.spots summary b{display:inline-flex;width:22px;height:22px;border-radius:50%;
  background:var(--bordo);color:#F6EFE4;font:700 .74rem/22px var(--sans);
  justify-content:center;margin-right:.55rem;vertical-align:-.2em}
.fivebar{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 0}

@media (max-width:1150px){
  .spot{display:none}
  .protoshot figcaption{margin-bottom:.9rem}
}


/* ── правки после первого визуального прохода (18.08) ── */

/* Переход по якорю из меню ставил заголовок ПОД липкую шапку — человек
   попадал на середину раздела и не понимал, куда его привели. */
main section[id]{scroll-margin-top:5.5rem}

/* Колонки схемы «До → Проверяем → После» вровень: разная высота из-за разного
   числа пунктов читалась как небрежность, а не как смысл. */
.flow{align-items:stretch}
.flowstep{display:flex;flex-direction:column}
.flowarrow{font-size:1.9rem;font-weight:700}

/* Маркеры стоят в левом поле листа, напротив своей строки: поверх текста они
   закрывали ровно то, на что показывают. */
.shotwrap{--spot:26px}
@media (max-width:1100px){ .shotwrap{--spot:22px} }
.spot{width:var(--spot);height:var(--spot);line-height:calc(var(--spot) - 2px)}

/* Семь пунктов вместо пяти: чуть плотнее, чтобы ряд не переносился.
   Порог гамбургера поднят до 1150px — на планшете и узком ноутбуке
   выпадающая панель честнее, чем меню в две строки. */
@media (min-width:1151px){
  header.top nav{gap:.15rem;flex-wrap:nowrap}
  header.top nav a{padding:.4rem .42rem;font-size:.85rem;white-space:nowrap}
}

/* Лист протокола высокий, а пояснения короткие — правая колонка висела в
   пустоте. Липкая колонка идёт рядом с листом, пока он прокручивается. */
@media (min-width:1151px){
  .anatomy .spots{position:sticky;top:5.5rem;align-self:start}
}

/* Карточки «бесплатно» и «весь разбор» разной высоты — не растягиваем: у
   короткой снизу оставалась пустая треть, и это читалось как недоделка.
   То же самое в блоке цен: «первый разбор» длиннее «дальнейших», и вторая
   карточка вытягивалась под первую с пустотой под кнопкой. */
#result .grid,#price .grid{align-items:start}

/* Пять вопросов — предмет, который уносят: он должен выглядеть как карточка,
   которую не жалко переслать, а не как абзац посреди страницы. */
#five ol.q5{background:var(--paper);border:1px solid var(--hairline);border-radius:14px;
  padding:1.2rem 1.4rem 1.2rem 2.6rem;font-size:1.06rem;color:var(--ink);
  box-shadow:0 6px 20px rgba(31,29,26,.06);max-width:42em;gap:.75rem}
#five ol.q5 li::marker{font-size:.95em}
@media (max-width:640px){ #five ol.q5{padding:1rem 1rem 1rem 2.1rem;font-size:1rem} }

/* Страница «Случаи», перестроена 19.08. Восемь типов решений — это справочник,
   который листают в поиске своей ситуации, а не восемь эссе подряд. Поэтому
   карточка закрыта, а в её шапке стоит то единственное, ради чего человек
   читает: что станет понятнее после разбора. Восемь развёрнутых текстов на
   первом экране телефона — гарантированный отказ. */
.caselist{display:grid;gap:.6rem;max-width:56em}
.caselist details.case{border:1px solid var(--hairline);border-left:3px solid var(--gilt);
  border-radius:12px;background:var(--paper2);margin:0;padding:1rem 1.2rem}
.caselist details.case[open]{background:var(--paper2)}
.caselist summary{cursor:pointer;font-size:1.06rem;line-height:1.45}
.caselist summary b{color:var(--ink)}
.casesum{display:block;color:var(--ink-soft);font-size:.95rem;margin-top:.25rem}
.caselist details.case p{margin:.7rem 0 .4rem}
.caselist details.case ul{margin:.2rem 0 .6rem}

/* Матрица «цена ошибки × обратимость» — именно 2×2, а не «сколько поместится».
   Общая сетка .g2 при 1440 даёт три колонки, и четыре клетки ложатся как 3+1:
   читатель видит четыре карточки и ни одной оси. На телефоне разворачиваем в
   четыре полосы по порядку — сжатую 2×2 на 390 px читать невозможно. */
.matrix{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;max-width:52em}
@media (max-width:720px){ .matrix{grid-template-columns:1fr} }
.axis{font-family:var(--sans);font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .7rem}

/* Клетка матрицы «цена ошибки × обратимость», в которую сервис и целится.
   Выделяем ту, где проверка окупается, — иначе четыре одинаковых прямоугольника
   не отвечают на вопрос «а мой случай тут где». */
.card.hot{border-color:var(--bordo);border-width:1.5px;background:var(--paper)}
.card.hot h3{color:var(--bordo)}

/* Схема «решение → четыре стороны → точки возврата» на странице личных решений.
   Единственный визуал этой страницы: план прямо запрещает семейные фотостоки,
   и правильно — иллюстрация к разводу либо фальшива, либо бестактна. */
.flowend{background:var(--ink);color:var(--paper);border-radius:12px;
  padding:.8rem 1rem;font-family:var(--sans);font-weight:700;font-size:.92rem;
  text-align:center;align-self:center}
.flowarr{color:var(--gilt);font-size:1.4rem;align-self:center;text-align:center}
.flowmid{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-self:center}
.flowmid .chip{background:rgba(126,29,40,.07)}
@media (max-width:720px){
  .flow{grid-template-columns:1fr;gap:.6rem}
  .flowarr{transform:rotate(90deg)}
}

/* Оглавление паспорта О-18. Восемнадцать карточек подряд без него — стена, в
   которой нельзя найти нужную процедуру ни глазом, ни ссылкой. */
.toc{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.4rem 0 2rem;max-width:56em}
.toc a{font-family:var(--sans);font-size:.86rem;padding:.35rem .7rem;border-radius:999px;
  border:1px solid var(--hairline);background:var(--paper2);color:var(--ink-soft);
  text-decoration:none}
.toc a:hover{border-color:var(--bordo);color:var(--bordo)}
/* Якорь не должен уезжать под липкую шапку. */
.cards .card[id]{scroll-margin-top:5rem}
/* Восемнадцать процедур подряд во всю ширину читаются как стена. Две колонки
   дают строку ~62 знака и позволяют сравнивать процедуры взглядом, а не
   прокруткой. Ниже 900 px — одна колонка. */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* Витрина образцов (22.08, правка владельца: «сейчас очень много места
   занимает»). Карточка сжата в двухколоночную сетку, вердикт стоит ГРАФИЧЕСКИ
   — тем же штампом, что в самом PDF: человек узнаёт решение до чтения. */
.scards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  align-items:start;margin:1.6rem 0 2rem}
.scard{background:var(--paper2);border:1px solid var(--hairline);border-radius:14px;
  padding:1.15rem 1.25rem;scroll-margin-top:5rem;display:flex;flex-direction:column}
.scard h3{font-size:1.16rem;line-height:1.28;margin:.55rem 0 .5rem;color:var(--ink)}
.scard p{margin:.35rem 0;color:var(--ink-soft);font-size:.95rem}
.scard .meta{font-size:.82rem;letter-spacing:.02em}
.scard details{margin:.55rem 0 .2rem}
.scard details summary{cursor:pointer;font-family:var(--sans);font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gilt)}
.scard .links{margin-top:auto;padding-top:.8rem}
.scard .links .btn{font-size:.86rem;padding:.5rem .9rem}
/* Штамп вердикта: рамка и разрядка как на печатном документе, наклон тот же. */
.vstamp{display:inline-block;align-self:flex-start;font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;padding:.28rem .6rem;border:1.5px solid;
  border-radius:3px;transform:rotate(-2deg);transform-origin:left center}
.vstamp.kill{color:var(--bordo);border-color:var(--bordo)}
.vstamp.reshape{color:var(--gilt);border-color:var(--gilt)}
.vstamp.go{color:var(--ink-soft);border-color:var(--ink-soft)}
/* Историческая справка внизу страницы — мелким и свёрнутой. */
.oldnote{margin:2rem 0;font-size:.9rem;color:var(--ink-soft)}
.oldnote summary{cursor:pointer;font-family:var(--sans);font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gilt)}
.oldnote p{font-size:.9rem;margin:.6rem 0}

/* Строка об аналитике в подвале (23.08). Рисуется скриптом: без скрипта нет и
   счётчика, а мёртвая кнопка на странице хуже её отсутствия. Кнопка выглядит
   ссылкой намеренно — это не действие страницы, а переключатель настройки. */
.site .stats{margin-top:.6rem}
.site .stats a{text-decoration:underline}
.statsbtn{font:inherit;color:inherit;background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:.15em;cursor:pointer}
.statsbtn:hover{opacity:.75}
.statsbtn:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Выбор файла на /verify/: нативная кнопка показывала «Choose File / No file
   chosen» по-английски на русской странице. Кнопка — наша, поле скрыто, но
   доступно с клавиатуры (обзор 24.08). */
.filein{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.filebtn{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;margin:.3rem 0}
.filebtn .fname{font-family:var(--sans);font-size:.9rem;color:var(--ink-soft)}
.filein:focus-visible + .filebtn .btn{outline:2px solid var(--bordo);outline-offset:2px}

/* Свёрнутые разделы (решение владельца 25.08): текст остаётся, первый экран
   показывает заголовки. Раскрывашка раздела — как заголовок, не как кнопка. */
details.inside.fold{margin:1.2rem 0;background:var(--paper2)}
details.inside.fold > summary{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
details.inside.fold[open] > summary{margin-bottom:.6rem}
details.inside.fold h3{font-size:1.05rem;margin:1.1rem 0 .3rem}
details.card.lens{padding:1rem 1.3rem}
details.card.lens > summary{cursor:pointer;list-style:none;display:grid;gap:.25rem}
details.card.lens > summary::-webkit-details-marker{display:none}
details.card.lens > summary h3{margin:0;font-size:1.05rem}
details.card.lens > summary .lens-what{color:var(--ink-soft);font-size:.95rem}
details.card.lens > summary::after{content:"подробнее ▾";font-family:var(--sans);font-size:.8rem;color:var(--bordo)}
html[lang="en"] details.card.lens > summary::after{content:"more ▾"}
details.card.lens[open] > summary::after{content:"свернуть ▴"}
html[lang="en"] details.card.lens[open] > summary::after{content:"less ▴"}
details.card.lens[open] > summary{margin-bottom:.6rem}

/* Видеоархитектура 29.08: карточки коротких роликов на главной, длинное видео
   в раскрывашке и на /about/, тизеры с модальным окном на /cases/, /pay/ и
   /method/. Кнопки вместо inline-обработчиков — CSP без unsafe-inline. */
.vcard video{width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;background:#000;
  margin-bottom:.9rem}
.vcard .chip{margin-left:.5rem;vertical-align:middle}
.videobox.solo{display:block;padding:0;border:0;background:transparent}
.videobox.solo video{width:100%;max-width:860px;height:auto;aspect-ratio:16/9;
  border-radius:14px;background:#000}
details.longvideo>summary{cursor:pointer;font-family:var(--sans);font-weight:600}
details.longvideo video{width:100%;max-width:860px;height:auto;aspect-ratio:16/9;
  border-radius:14px;background:#000;margin:.9rem 0}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;cursor:pointer}
dialog.vmodal{border:0;border-radius:14px;padding:0;max-width:min(92vw,960px);
  background:#000}
dialog.vmodal::backdrop{background:rgba(0,0,0,.72)}
dialog.vmodal video{display:block;width:100%;height:auto;aspect-ratio:16/9}
dialog.vmodal .vclose{position:absolute;top:.4rem;right:.6rem;z-index:1;
  background:rgba(0,0,0,.5);color:#fff;border:0;border-radius:50%;
  width:2rem;height:2rem;font-size:1.1rem;cursor:pointer}
details.longvideo>summary{list-style:none}
details.longvideo>summary::-webkit-details-marker{display:none}
/* Логотип и дескриптор в шапке — ссылка, но подчёркивание на hover читается
   как дешёвый гиперлинк (правка владельца 29.08). Курсор остаётся pointer. */
header.top .brand:hover,header.top .brand:hover b,header.top .brand:hover span{text-decoration:none}
/* Полный список разделов — только в раскрытом мобильном меню (решение
   владельца 30.08): на десктопе шапка не плотнеет, .navmore скрыт. */
header.top .navmore{display:none}
@media (max-width:1150px){
  header.top nav .navmore{display:flex;flex-direction:column;width:100%;
    border-top:1px solid rgba(236,231,221,.22);margin-top:.5rem;padding-top:.5rem}
  header.top nav .navmore a{opacity:.65;font-size:.84rem}
}
/* Якорь-тизер видео в hero: до блока «за пять минут» теперь один клик. */
.hero .herovideo{margin:.6rem 0 0;font-family:var(--sans);font-size:.92rem}
.hero .herovideo a{color:var(--gilt)}
/* «Иногда правильный ответ — „нет"» — подзаголовок опроса (решение владельца
   30.08, из середины страницы в момент сомнения). */
.worthkicker{font-family:var(--serif);font-size:1.15rem;color:var(--bordo);
  font-weight:700;margin:.2rem 0 .6rem}