/* ==========================================================================
   AEO-AGENCY · ОБЩАЯ ДИЗАЙН-СИСТЕМА
   Базовый слой для всех страниц: токены, типографика, шапка, подвал,
   кнопки, формы, редакционные компоненты.
   Сигнатурные механики главной (матрица, линза, режим «Человек/Машина»,
   печатающийся ответ) остаются в самой странице — сюда не выносятся.
   ========================================================================== */

:root{
  color-scheme: dark;

  --bg:#0b0d10;
  --surface:#0f1216;
  --surface-2:#131720;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --control-line:rgba(255,255,255,.34);   /* границы интерактивных элементов: контраст ≥ 3:1 */
  --ink:#f2f0ec;
  --muted:#9aa0ac;
  --dim:#767c88;
  --acc:#ffb020;
  --acc-weak:rgba(255,176,32,.12);
  --acc-line:rgba(255,176,32,.45);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- типографическая шкала ----
     Девять ступеней вместо тринадцати произвольных кеглей, которые набежали
     за три волны правок. Соседние ступени различаются заметно: если разница
     меньше двух пунктов, читатель видит не иерархию, а неаккуратность. */
  --fs-3xs: 10.5px;   /* моно-метки в подменю */
  --fs-2xs: 11.5px;   /* надстрочные метки, номера, служебное */
  --fs-xs:  13px;     /* сноски, подписи под кнопками */
  --fs-sm:  14.5px;   /* меню, вторичные ссылки */
  --fs-md:  16.5px;   /* тело второстепенных блоков */
  --fs-base: 17px;    /* основной текст */
  --fs-lg:  clamp(19px, 1.6vw, 21px);          /* подзаголовки, вопросы FAQ */
  --fs-xl:  clamp(20px, 2.2vw, 27px);          /* заголовки третьего уровня */
  --fs-2xl: clamp(24px, 3vw, 42px);            /* заголовки секций */
  --fs-3xl: clamp(28px, 4.2vw, 56px);          /* заголовок страницы */

  /* ---- плотность линий ----
     Три значения вместо случайных: чем крупнее кегль, тем плотнее строки. */
  --lh-tight: 1.08;
  --lh-snug: 1.35;
  --lh-base: 1.62;

  /* ---- вертикальный ритм ---- */
  --gap-xs: 6px;
  --gap-sm: 12px;
  --gap-md: 18px;
  --gap-lg: clamp(24px, 4vh, 44px);
  --gap-xl: clamp(34px, 6vh, 64px);

  --bar:0px;          /* плашка прототипа снята перед выкладкой */
  --head:57px;         /* высота залипающей шапки */
  --pad:clamp(18px,4.4vw,56px);
  --wrap:1320px;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;
}
body{
  margin:0;
  padding-top:var(--bar);
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;                 /* clip, а не hidden: hidden ломает position:sticky */
}
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.025em; text-wrap:balance }
/* pretty вместо balance для абзацев: убирает висячие однословные строки,
   не трогая длину строк — balance на длинном тексте стоит дорого */
p, li, dd{ text-wrap:pretty }
/* кавычки и тире выносятся в поле: край текстового блока становится ровным */
p, li, blockquote{ hanging-punctuation: first last }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit }
img,svg,canvas{ max-width:100% }
::selection{ background:var(--acc); color:#0b0d10 }
:focus-visible{ outline:2px solid var(--acc); outline-offset:3px }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad) }
.mono{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums }
.num{ font-variant-numeric:tabular-nums lining-nums }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#0b0d10; padding:10px 16px; font-family:var(--mono); font-size:var(--fs-2xs) }
.skip:focus{ left:8px; top:calc(var(--bar) + 8px) }
hr.rule{ border:0; border-top:1px solid var(--line); margin:0 }
.tlink{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--acc-line) }
.tlink:hover{ color:var(--acc); border-bottom-color:var(--acc) }


/* ==========================================================================
   ШАПКА · одинаковая на всех страницах без исключений
   ========================================================================== */
.hdr{
  position:sticky; top:var(--bar); z-index:90;
  background:rgba(11,13,16,.88);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr-in{
  height:var(--head);
  display:flex; align-items:center; gap:clamp(12px,2.4vw,34px);
}
.brand{
  font-size:var(--fs-md); font-weight:600; letter-spacing:-.03em; text-decoration:none; white-space:nowrap;
}
.brand span{ color:var(--muted); font-weight:400 }
.nav{ margin-left:auto }
.nav-l{ display:flex; align-items:center; gap:clamp(6px,1.5vw,22px) }
.nav-l > li{ position:relative }
.nav-l a, .nav-btn{
  display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-size:var(--fs-sm); color:var(--muted); text-decoration:none;
  background:transparent; border:0; padding:8px 2px; cursor:pointer; white-space:nowrap;
}
.nav-l a:hover, .nav-btn:hover, .nav-btn[aria-expanded="true"]{ color:var(--ink) }
/* активный раздел подсвечивается; .is-active — родитель открытой подстраницы */
.nav-l a[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 -1px 0 var(--acc) }
.nav-l a.is-active{ color:var(--ink); box-shadow:inset 0 -1px 0 var(--acc-line) }
.navsub a[aria-current="page"]{ color:var(--acc) }
.mnav a.is-active{ color:var(--ink) }
.mnav .acc-panel a[aria-current="page"]{ color:var(--acc) }
.nav-btn .chev{ width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .16s }
.nav-btn[aria-expanded="true"] .chev{ transform:rotate(225deg) translate(-1px,-1px) }
/* «ссылка + триггер»: сама «Услуги» ведёт на хаб, стрелка раскрывает подменю */
.nav-l .has-sub{ display:inline-flex; align-items:center; gap:2px }
.nav-sub-toggle{ padding:8px 4px }
.cabinet{
  flex:0 0 auto; font-size:var(--fs-xs); color:var(--dim); text-decoration:none; white-space:nowrap;
}
.cabinet:hover{ color:var(--ink) }

.navsub{
  position:absolute; top:calc(100% + 6px); left:-14px; z-index:10;
  min-width:290px; padding:10px 0 12px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:3px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.navsub[hidden]{ display:none }
.navsub a{
  display:flex; justify-content:space-between; gap:18px; align-items:baseline;
  padding:9px 16px; font-size:var(--fs-sm); color:var(--ink);
}
.navsub a:hover{ background:var(--acc-weak); color:var(--acc) }
.navsub a b{ font-family:var(--mono); font-size:var(--fs-2xs); font-weight:400; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap }
.navsub a:hover b{ color:var(--acc) }
.navsub hr{ border:0; border-top:1px solid var(--line); margin:9px 16px }
/* заголовок группы — сам по себе ссылка на раздел «Продвижение» */
.navsub a.navsub-cap{
  display:flex; justify-content:flex-start; gap:8px; padding:2px 16px 6px;
  font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.navsub a.navsub-cap:hover{ background:transparent; color:var(--acc) }

.cta{
  flex:0 0 auto;
  font-size:var(--fs-sm); font-weight:600; text-decoration:none; white-space:nowrap;
  color:#0b0d10; background:var(--acc); border:1px solid var(--acc); border-radius:2px;
  padding:9px 16px;
}
.cta:hover{ background:#ffc247; border-color:#ffc247 }

/* компактное действие для узкой шапки (<1080px) */
.cta-m{
  display:none; flex:0 0 auto; align-items:center; gap:7px;
  height:40px; padding:0 12px;
  font-size:var(--fs-sm); font-weight:600; text-decoration:none; white-space:nowrap;
  color:#0b0d10; background:var(--acc); border:1px solid var(--acc); border-radius:2px;
}
.cta-m:hover{ background:#ffc247; border-color:#ffc247 }
.cta-m svg{ width:15px; height:15px; flex:0 0 auto; display:block }

.burger{
  display:none; flex:0 0 auto; margin-left:auto;
  width:40px; height:36px; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--control-line); border-radius:2px; color:var(--ink);
}
.burger i{ display:block; width:16px; height:1px; margin:3px auto; background:currentColor }

.mnav{ border-top:1px solid var(--line); background:var(--bg); max-height:calc(100svh - var(--bar) - var(--head)); overflow-y:auto }
.mnav[hidden]{ display:none }
.mnav ul{ padding:6px 0 18px }
.mnav a, .mnav .acc-btn{
  display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%;
  font:inherit; font-size:var(--fs-base); color:var(--ink); text-decoration:none; text-align:left;
  background:transparent; border:0; border-bottom:1px solid var(--line); padding:14px 0; cursor:pointer;
}
.mnav .acc-panel{ padding-left:16px; border-left:1px solid var(--acc-line); margin:4px 0 8px }
.mnav .acc-panel[hidden]{ display:none }
.mnav .acc-panel a{ font-size:var(--fs-sm); color:var(--muted); border-bottom:1px solid var(--line); padding:11px 0 }
.mnav .acc-panel a b{ font-family:var(--mono); font-size:var(--fs-2xs); font-weight:400; color:var(--dim) }
.mnav .acc-panel a.acc-cap{
  justify-content:flex-start; gap:8px; border-bottom:0; padding:16px 0 4px;
  font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.mnav .cta{ display:inline-block; margin-top:18px }
.mnav .mrow{ display:flex; align-items:stretch; gap:0 }
.mnav .mrow a{ flex:1 1 auto }
.mnav .mrow .acc-btn{ flex:0 0 58px; width:auto; justify-content:center }
.mnav .cabinet{ display:inline-block; margin:18px 0 0 18px; font-size:var(--fs-sm) }

/* выход из кабинета: действие редкое, поэтому тихая кнопка рядом с «Кабинетом»,
   а не второй акцент в шапке */
.hdr-out{ flex:0 0 auto; display:flex }
.hdr-out button, .mnav-out button{
  font:inherit; color:var(--dim); background:transparent; border:0; padding:0; cursor:pointer; white-space:nowrap;
}
.hdr-out button{ font-size:var(--fs-xs) }
.hdr-out button:hover, .mnav-out button:hover{ color:var(--ink) }
.mnav-out{ display:block; margin:14px 0 0 18px }
.mnav-out button{ font-size:var(--fs-sm) }

/* второй уровень навигации — только для вошедшего: разделы кабинета */
.subnav{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px,2.4vw,28px);
  padding:11px 0; border-bottom:1px solid var(--line);
}
.subnav a{ font-size:var(--fs-xs); color:var(--dim); text-decoration:none; white-space:nowrap }
.subnav a:hover{ color:var(--ink) }
.subnav a[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 -1px 0 var(--acc) }

@media (max-width:1080px){
  .nav, .hdr > .hdr-in > .cta, .hdr > .hdr-in > .cabinet, .hdr > .hdr-in > .hdr-out{ display:none }
  .hdr .cta-m{ display:inline-flex; margin-left:auto }
  .burger{ display:block; margin-left:8px }
  .subnav{ display:none }
}
@media (min-width:1081px){ .mnav{ display:none } }

/* ==========================================================================
   ОБЩИЕ СЕКЦИИ И ДЕЙСТВИЯ
   ========================================================================== */
/* padding-block, а не shorthand: иначе обнуляются боковые отступы .wrap
   и на узком экране весь текст прилипает к краю окна */
section.blk{ padding-block:clamp(58px,10vh,124px); scroll-margin-top:calc(var(--bar) + var(--head) + 12px) }
.hl{ display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:clamp(14px,3vw,52px); align-items:start }
.hl h2{ font-size:var(--fs-2xl); line-height:var(--lh-tight); max-width:20ch }
.lead{ color:var(--muted); max-width:58ch; margin-top:16px; font-size:var(--fs-base) }
.eyebrow{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }

.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font:inherit; font-size:var(--fs-md); font-weight:600;
  color:#0b0d10; background:var(--acc); border:1px solid var(--acc); border-radius:2px;
  padding:13px 22px;
}
.btn:hover{ background:#ffc247; border-color:#ffc247 }
.btn:focus-visible{ outline-color:var(--ink) }
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--control-line); font-weight:500;
}
.btn-ghost:focus-visible{ outline-color:var(--acc) }
.btn-ghost:hover{ background:transparent; border-color:var(--acc); color:var(--acc) }

/* второстепенное действие: линия вместо заливки.
   Сплошная янтарная заливка — только у действия в шапке и submit проверки. */
.btn-line{
  display:inline-flex; align-items:center; gap:.55em;
  font:inherit; font-size:var(--fs-md); font-weight:600; text-decoration:none; cursor:pointer;
  color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--acc); border-radius:0;
  padding:7px 1px 6px;
}
.btn-line::after{ content:"→"; color:var(--acc); font-weight:400 }
.btn-line:hover{ color:var(--acc) }
.btn-line:focus-visible{ outline:2px solid var(--acc); outline-offset:3px }
.btn-sub{ margin-top:12px; font-size:var(--fs-xs); color:var(--dim); max-width:70ch }

/* строка доверия: короткие проверяемые факты под определением услуги.
   Не «команда экспертов» и не «лет на рынке» — только то, что можно предъявить. */
.trust{ display:flex; flex-wrap:wrap; gap:8px 0; margin-top:clamp(14px,2.4vh,22px) }
.trust li{
  position:relative; padding:0 14px 0 0; margin-right:14px;
  font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.08em;
  color:var(--muted); white-space:nowrap;
}
.trust li:not(:last-child)::after{ content:"·"; position:absolute; right:0; color:var(--line-2) }

/* ==========================================================================
   ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ
   ========================================================================== */
.crumbs{ padding-top:clamp(22px,4vh,40px); font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--dim) }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:8px; align-items:baseline }
.crumbs li + li::before{ content:"/"; color:var(--line-2); margin-right:8px }
.crumbs a{ color:var(--muted); text-decoration:none }
.crumbs a:hover{ color:var(--acc) }
.crumbs [aria-current]{ color:var(--dim) }

.phero{ padding-block:clamp(26px,5vh,54px) clamp(40px,7vh,82px) }
.phero h1{ font-size:var(--fs-3xl); line-height:var(--lh-tight); max-width:19ch; margin-top:clamp(12px,2vh,22px) }
.phero .lede{ color:var(--muted); font-size:var(--fs-lg); max-width:62ch; margin-top:clamp(14px,2.4vh,24px) }
.phero .lede b{ color:var(--ink); font-weight:500 }
.phero-act{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; margin-top:clamp(20px,3.4vh,34px) }

/* ==========================================================================
   РЕДАКЦИОННЫЕ КОМПОНЕНТЫ
   ========================================================================== */
.flow{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:baseline; margin-top:clamp(28px,5vh,52px) }
/* Лестница метода: кегль нарастает от диагноза к повторному замеру.
   Одинаковый размер уравнивал стадии по важности, хотя смысл метода
   именно в последней — без повторного замера сравнивать не с чем. */
.flow li{ font-weight:600; letter-spacing:-.03em; font-size:var(--fs-lg); color:var(--muted) }
.flow li:nth-child(2){ font-size:var(--fs-xl); color:var(--ink) }
.flow li:nth-child(3){ font-size:clamp(23px,2.7vw,34px); color:var(--ink) }
.flow li:nth-child(4){ font-size:var(--fs-2xl); color:var(--ink) }
.flow li + li::before{ content:"→"; color:var(--acc-line); margin-right:14px; font-weight:400; font-size:var(--fs-lg) }

.terms{ margin-top:clamp(26px,4.4vh,48px); border-top:1px solid var(--line) }
.terms li{
  display:grid; grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:clamp(10px,2.4vw,36px); align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--line);
}
/* дисциплина акцента: янтарный — сигнал, а не способ выделить каждую метку.
   На странице метода таких меток восемь, и все янтарные — акцент переставал
   что-либо значить. Метки стали основным цветом, янтарь остался за действиями. */
.terms b{ font-family:var(--mono); font-size:var(--fs-xs); font-weight:400; color:var(--ink); font-variant-numeric:tabular-nums }
.terms span{ color:var(--muted); font-size:var(--fs-md) }
.terms li{ transition:background .18s }
.terms li:hover{ background:linear-gradient(90deg, rgba(255,255,255,.022), transparent 62%) }

.price{ margin-top:clamp(28px,5vh,54px); border-top:1px solid var(--line) }
.price li{
  display:grid; grid-template-columns:minmax(0,230px) minmax(0,1fr) minmax(0,230px);
  gap:clamp(8px,2.4vw,36px); align-items:baseline;
  padding:24px 0; border-bottom:1px solid var(--line);
}
.price .p{ font-size:var(--fs-xl); font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap }
.price .p.free{ color:var(--acc) }
.price .n{ font-size:var(--fs-md); color:var(--muted) }
.price .x{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--dim); letter-spacing:.05em }
.price-cta{ margin-top:clamp(24px,4vh,40px) }

.limits{ margin-top:clamp(24px,4vh,44px); border-top:1px solid var(--line) }
.limits li{
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:16px; align-items:start;
  padding:20px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:var(--fs-md);
}
.limits .ln{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--dim); padding-top:5px }
.limits b{ color:var(--ink); font-weight:600 }
.limits li{ transition:background .18s }
.limits li:hover{ background:linear-gradient(90deg, rgba(255,255,255,.022), transparent 62%) }
.price li{ transition:background .18s }
.price li:hover{ background:linear-gradient(90deg, rgba(255,255,255,.022), transparent 62%) }
.cmp li:not(.h){ transition:background .18s }
.cmp li:not(.h):hover{ background:linear-gradient(90deg, rgba(255,255,255,.022), transparent 62%) }

/* услуги: строка-запись, а не карточка-плитка */
.svc{ margin-top:clamp(28px,5vh,54px); border-top:1px solid var(--line) }
.svc > li{
  display:grid; grid-template-columns:minmax(0,54px) minmax(0,1fr) minmax(0,290px);
  gap:clamp(12px,2.6vw,44px); align-items:start;
  padding:clamp(24px,4vh,40px) 0; border-bottom:1px solid var(--line);
}
.svc .sn{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--dim); padding-top:8px }
.svc h3{ font-size:var(--fs-xl); line-height:var(--lh-snug); max-width:26ch }
.svc .sd{ color:var(--muted); font-size:var(--fs-md); max-width:62ch; margin-top:10px }
.svc .sl{ margin-top:16px; display:grid; gap:6px }
.svc .sl li{ position:relative; padding-left:16px; font-size:var(--fs-sm); color:var(--muted) }
.svc .sl li::before{ content:"·"; position:absolute; left:4px; color:var(--acc) }
.svc .sp{ font-size:var(--fs-xl); font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap }
.svc .sp.free{ color:var(--acc) }
.svc .st{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--dim); letter-spacing:.05em; margin-top:6px }
.svc .sa{ margin-top:16px }
.svc > li:hover{ background:linear-gradient(90deg, rgba(255,255,255,.022), transparent 62%) }

/* сравнение «что входит» */
.cmp{ margin-top:clamp(26px,4.4vh,46px); border-top:1px solid var(--line) }
.cmp li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,150px) minmax(0,150px);
  gap:clamp(10px,2.4vw,30px); align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line); font-size:var(--fs-md); color:var(--muted);
}
.cmp.cmp-4 li{ grid-template-columns:minmax(0,1fr) minmax(0,110px) minmax(0,110px) minmax(0,110px) }
.cmp li.h{ color:var(--dim); font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase }
.cmp .v{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink); font-variant-numeric:tabular-nums }
.cmp .v.no{ color:var(--dim) }
.cmp .v.yes{ color:var(--acc) }

form.cf{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; max-width:640px }
form.cf label{ flex:1 1 260px; display:block; min-width:0 }
form.cf input{
  width:100%; background:#08090b; color:var(--ink); border:1px solid var(--control-line);
  border-radius:2px; padding:14px; font:inherit; font-size:var(--fs-md); font-family:var(--mono); letter-spacing:.04em;
}
form.cf input::placeholder{ color:#7a828c }
form.cf input:focus{ border-color:var(--acc) }
form.cf input:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }
.checkout{ margin-top:16px; font-family:var(--mono); font-size:var(--fs-xs); line-height:1.7; color:var(--muted); min-height:1.2em; max-width:70ch }
.checkout b{ color:var(--acc); font-weight:400 }
.cnote{ margin-top:14px; font-size:var(--fs-xs); color:var(--dim); max-width:70ch }
.check{ background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:clamp(22px,4vw,44px) }
.check h2{ font-size:var(--fs-2xl); margin-top:14px; max-width:24ch }
.check .lead{ margin-top:14px }
.check-buy{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line) }
.check-buy[hidden]{ display:none }
.gate{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line) }
.gate[hidden]{ display:none }
.gate h3{ font-size:var(--fs-base); line-height:var(--lh-snug); max-width:34ch }
.gate .gnote{ margin-top:8px; font-size:var(--fs-xs); color:var(--dim); max-width:74ch }
.gate .gok{ margin-top:12px; font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.04em; color:var(--acc); min-height:1.2em }

/* ---- статья блога ----
   Одна колонка ограниченной меры: длинную строку глаз теряет на возврате.
   Заголовки внутри текста крупнее подзаголовков интерфейса — читатель
   ориентируется по ним, а не по номерам секций. */
.prose{ max-width:74ch; margin-top:clamp(24px,4vh,40px) }
.prose > * + *{ margin-top:clamp(16px,2.4vh,24px) }
.prose h2{
  font-size:var(--fs-xl); line-height:var(--lh-snug); max-width:26ch;
  margin-top:clamp(34px,5.4vh,56px); padding-top:clamp(20px,3vh,30px);
  border-top:1px solid var(--line);
}
.prose h3{ font-size:var(--fs-lg); line-height:var(--lh-snug); margin-top:clamp(24px,3.4vh,34px) }
.prose p{ color:var(--muted); font-size:var(--fs-md) }
.prose p b, .prose strong{ color:var(--ink); font-weight:600 }
.prose a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--acc-line) }
.prose a:hover{ color:var(--acc); border-bottom-color:var(--acc) }
.prose ul, .prose ol{ display:grid; gap:8px }
.prose li{ position:relative; padding-left:18px; color:var(--muted); font-size:var(--fs-md) }
.prose ul li::before{ content:"·"; position:absolute; left:5px; color:var(--acc) }
.prose ol{ counter-reset:pr }
.prose ol li::before{
  counter-increment:pr; content:counter(pr,decimal-leading-zero);
  position:absolute; left:0; font-family:var(--mono); font-size:var(--fs-2xs); color:var(--acc);
}
.prose pre{
  background:#08090b; border:1px solid var(--line); border-radius:3px;
  padding:clamp(14px,2vw,20px); overflow-x:auto;
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink); line-height:1.6;
}
.prose code{ font-family:var(--mono); font-size:.92em; color:var(--acc) }
.prose pre code{ color:inherit }
.prose blockquote{
  border-left:2px solid var(--acc-line); padding-left:clamp(14px,2vw,20px);
  color:var(--ink); font-size:var(--fs-lg); line-height:var(--lh-snug);
}
/* прямой ответ в начале статьи: то, что модель может процитировать целиком */
.lead-answer{
  background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--acc);
  border-radius:3px; padding:clamp(18px,2.6vw,26px);
  color:var(--ink); font-size:var(--fs-md); max-width:74ch;
}

/* карточки статей в списке блога */
.posts{ margin-top:clamp(28px,5vh,54px); border-top:1px solid var(--line) }
.posts > li{
  display:grid; grid-template-columns:minmax(0,54px) minmax(0,1fr) minmax(0,150px);
  gap:clamp(12px,2.6vw,44px); align-items:start;
  padding:clamp(22px,3.6vh,34px) 0; border-bottom:1px solid var(--line);
  transition:background .18s;
}
.posts > li:hover{ background:linear-gradient(90deg, rgba(255,255,255,.022), transparent 62%) }
.posts .pn{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--dim); padding-top:6px }
.posts h3{ font-size:var(--fs-xl); line-height:var(--lh-snug); max-width:30ch }
.posts h3 a{ text-decoration:none }
.posts h3 a:hover{ color:var(--acc) }
.posts .pd{ color:var(--muted); font-size:var(--fs-md); margin-top:8px; max-width:66ch }
.posts .pm{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--dim); letter-spacing:.05em }
@media (max-width:760px){
  .posts > li{ grid-template-columns:minmax(0,1fr); gap:6px }
  .posts .pn{ padding-top:0 }
}

/* ---- вход, регистрация, настройки ---- */
.auth-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,32px); margin-top:clamp(24px,4vh,40px);
}
.auth-card{
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  padding:clamp(20px,2.4vw,30px);
}
.auth-card h3{ font-size:var(--fs-lg); margin-bottom:6px }
.auth-form{ display:grid; gap:14px; margin-top:18px }
.auth-form label{ display:grid; gap:6px }
.auth-form label > span{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--dim) }
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"]{
  width:100%; background:#08090b; color:var(--ink); border:1px solid var(--control-line);
  border-radius:2px; padding:13px 14px; font:inherit; font-size:var(--fs-md);
}
.auth-form input:focus{ border-color:var(--acc) }
.auth-form input:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }
.auth-form .btn, .auth-form .btn-line{ justify-self:start }
/* согласие в публичных формах: та же механика, что в формах кабинета */
.consent{ display:flex; align-items:flex-start; gap:9px; margin:4px 0 2px; cursor:pointer }
.consent input{ margin-top:3px; width:16px; height:16px; flex:0 0 auto; accent-color:var(--acc) }
.consent span{ font-size:var(--fs-xs); line-height:1.45; color:var(--muted) }

.auth-consent{ grid-template-columns:auto minmax(0,1fr); align-items:start; gap:10px }
.auth-consent input{ margin-top:4px; width:16px; height:16px; accent-color:var(--acc) }
.auth-consent span{ font-size:var(--fs-xs); color:var(--muted); text-transform:none; letter-spacing:0; font-family:var(--sans) }
@media (max-width:900px){ .auth-grid{ grid-template-columns:minmax(0,1fr) } }

/* ---- результат проверки ----
   Оценка крупно, дальше список сигналов: сначала невыполненные — они и есть
   предмет разговора. Порядок не по алфавиту, а по тому, что чинить. */
.res-score{ margin-top:22px; display:flex; align-items:baseline; gap:12px }
.res-score b{ font-size:clamp(40px,7vw,72px); font-weight:600; letter-spacing:-.04em; color:var(--acc); line-height:1 }
.res-score span{ color:var(--muted); font-size:var(--fs-md) }
.res-sum{ margin-top:10px; color:var(--muted); font-size:var(--fs-md) }
.res-list{ margin-top:clamp(18px,3vh,28px); border-top:1px solid var(--line) }
.res-list li{
  display:grid; grid-template-columns:minmax(0,86px) minmax(0,1fr); gap:14px; align-items:start;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:var(--fs-md); color:var(--muted);
}
.res-list .res-mark{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; padding-top:4px }
.res-list li.res-fail .res-mark{ color:var(--acc) }
.res-list li.res-warn .res-mark{ color:var(--ink) }
.res-list li.res-ok .res-mark{ color:var(--dim) }
.res-list li.res-ok span:last-child{ color:var(--dim) }
.res-next{ margin-top:clamp(20px,3.4vh,32px); font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--dim) }
.res-recs{ margin-top:10px; counter-reset:rec }
.res-recs li{ position:relative; padding:8px 0 8px 30px; font-size:var(--fs-md); color:var(--ink) }
.res-recs li::before{
  counter-increment:rec; content:counter(rec,decimal-leading-zero);
  position:absolute; left:0; top:11px; font-family:var(--mono); font-size:var(--fs-2xs); color:var(--acc);
}
[data-check-result][hidden]{ display:none }

/* частые вопросы */
.faq{ margin-top:clamp(34px,6vh,64px) }
.faq-cap{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:4px }
.faq h3{ font-size:var(--fs-xl); line-height:var(--lh-snug); max-width:24ch; margin-bottom:6px }
.faq-lead{ color:var(--muted); font-size:var(--fs-md); max-width:58ch; margin-bottom:clamp(14px,2.4vh,24px) }
.faq details{ border-bottom:1px solid var(--line) }
.faq details:first-of-type{ border-top:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:18px 34px 18px 0;
  font-size:var(--fs-lg); font-weight:600; letter-spacing:-.015em; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; position:absolute; right:2px; top:17px;
  font-family:var(--mono); font-size:var(--fs-md); font-weight:400; color:var(--acc);
}
.faq details[open] summary::after{ content:"−" }
.faq summary:hover{ color:var(--acc) }
.faq .a{ color:var(--muted); font-size:var(--fs-md); max-width:76ch; padding:0 0 22px }
/* заголовок внутри summary: машиночитаемый, визуально не выделяется */
.faq-q{ display:inline; font-size:inherit; font-weight:inherit; letter-spacing:inherit; margin:0 }

/* ==========================================================================
   ПОДВАЛ
   ========================================================================== */
footer.site{ border-top:1px solid var(--line); padding:clamp(46px,8vh,88px) 0 clamp(40px,6vh,70px) }
.fcols{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(20px,3vw,44px) }
.fcol-title{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); font-weight:400; margin-bottom:14px }
.fcols a{ display:block; padding:6px 0; font-size:var(--fs-sm); color:var(--muted); text-decoration:none }
.fcols a:hover{ color:var(--acc) }
.fbottom{ margin-top:clamp(34px,6vh,64px); padding-top:22px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px clamp(20px,4vw,54px) }
.fbottom p{ font-size:var(--fs-xs); color:var(--dim); line-height:1.7; max-width:64ch }
.fbottom a{ color:var(--muted) }
.updated{ color:var(--dim); font-size:var(--fs-2xs); letter-spacing:.04em }

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width:1080px){
  .hl{ grid-template-columns:minmax(0,1fr) }
  .hl > .eyebrow{ margin-bottom:14px }
  .price li{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .price .x{ grid-column:1 / -1 }
  .svc > li{ grid-template-columns:minmax(0,44px) minmax(0,1fr); }
  .svc .sr{ grid-column:2 }
  .fcols{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:900px){
  .fcols{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cmp li{ grid-template-columns:minmax(0,1fr) minmax(0,96px) minmax(0,96px); gap:10px }
  .cmp.cmp-4 li{ grid-template-columns:minmax(0,1fr) minmax(0,74px) minmax(0,74px); gap:8px }
  .cmp.cmp-4 li > :nth-child(4){ grid-column:2 / -1; color:var(--dim) }
}
@media (max-width:760px){
  :root{
    --head:53px;
    /* на телефоне служебные подписи набирались 10,5–11,5 px: формально контраст
       проходит, читать неудобно. Поднимаем нижние ступени шкалы — верхние не трогаем,
       иначе поплывёт вся сетка. */
    --fs-3xs: 11.5px;
    --fs-2xs: 12.5px;
    --fs-xs:  13.5px;
  }
  body{ font-size:var(--fs-md) }
  .terms li{ grid-template-columns:minmax(0,1fr); gap:2px }
  .price li{ grid-template-columns:minmax(0,1fr) }
  .svc > li{ grid-template-columns:minmax(0,1fr); gap:6px }
  .svc .sn{ padding-top:0 }
  .fbottom{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:420px){
  .fcols{ grid-template-columns:minmax(0,1fr) }
  form.cf label{ flex:1 1 100% }
  form.cf button{ width:100% }
  .cta-m{ padding:0 10px; font-size:var(--fs-xs) }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important }
}