/* Оппонентура — лендинг. Стиль «Печать»: чернила/бордо/золото/бумага,
   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}
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}
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}
/* полоска «есть вторая языковая версия» — предложение вместо авторедиректа */
.langbar{display:flex;gap:.6rem;align-items:center;justify-content:center;
  background:var(--paper2);border-bottom:1px solid var(--hairline);
  padding:.5rem 2.4rem .5rem 1rem;font-size:.9rem;position:relative}
.langbar a{font-weight:700;text-decoration:underline}
.langbar button{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  background:none;border:0;font-size:1.2rem;line-height:1;color:var(--ink-soft);
  cursor:pointer;padding:.2rem .4rem}
.eyebrow{font-family:var(--sans);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bordo);font-weight:700}
/* Надзаголовок стоит и на светлой секции, и на тёмном первом экране. Бордо на
   чернилах давало 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:42em}

/* 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). Подсвечивать текущий язык незачем: человек и так на нём
   читает. Кнопка сделана «монетой» под знак сайта — тонкая золотая рамка,
   бумажный текст, при наведении золото заливается. */
.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}}

/* Гамбургер: на широком экране его нет, на телефоне он заменяет строку меню,
   которая уезжала вбок или ломалась на два ряда (замечание владельца 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}
.hero .cta .tiny{color:#B9B09C;font-size:.9rem}
.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}

/* 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}

/* steps */
.steps{counter-reset:st;display:grid;gap:.9rem}
.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)}
.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 .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:.82rem;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:.82rem;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}
table.rights.req td:first-child{width:38%}
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:900px){.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:900px){
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}
  /* Скрипт добавляет этот класс: до него панель видна, после — управляется */
  body.js header.top nav{display:none}
  body.js header.top nav.open{display:flex}
  /* На первом экране телефона было шесть кликабельных призывов, и три из них
     вели в одно и то же место разными словами (гейт #47). Решение владельца
     04.08: оставить два — «оставить заявку» и «открыть бота». Кнопка шапки
     дублирует первую и на телефоне прячется (в шапке остаётся навигация),
     мелкая ссылка «как проходит заседание» дублирует пункт меню. */
  header.top .btn.primary.tiny{display:none}
  .hero .cta .tiny{display:none}
}
/* страница оплаты: карточки тарифов. Цена — крупно, «что входит» — читаемо,
   кнопка не уезжает вниз при разной длине описания (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:.78rem;color:var(--ink-soft);margin:.5rem 0 0}
/* Рекомендованный тариф и строка-якорь «по договору» (персона-аудит 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 .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 и от вида страницы не зависит. */
@media (max-width:560px){.crumbs{font-size:.8rem}.crumbs [aria-current]{display:none}
  .crumbs a:last-of-type::after{content:none}}

/* «Дальше» — куда идти с этой страницы (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): она нужна машинам
   — ИИ-ответчик не цитирует как свежее то, у чего не видит даты, — а человеку
   на первом экране отвечала на вопрос, которого он не задавал. */
.updated{font-size:.78rem;opacity:.55;margin:.7rem 0 0}
.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:900px){.earlybadge{display:none}}

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

/* Единственное действие на телефоне — нижняя полоса (решение владельца 12.08).
   Кнопка шапки на узком экране скрыта с 04.08, чтобы не было шести призывов на
   первом экране, — и человек, пролиставший страницу, оставался без действия.
   Полоса не наезжает на текст: страница получает нижний отступ. На десктопе её
   нет, там всегда видна липкая шапка. */
.mobilecta{display:none}
@media (max-width:900px){
  .mobilecta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    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)}
  .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}