/* vipnakrutka.ru — дизайн-система.
   Направление задано референсами владельца (ewp.ru, умныйсервис.рф):
   белый фон, чёрные блоки, ярко-жёлтый акцент, крупная геометрическая
   типографика, большие скругления.

   Правило контраста, выведенное замером: жёлтый на белом даёт 1.5 —
   поэтому жёлтый только заливкой, текст на нём чёрный. Жёлтым текстом
   не пишем нигде.

   Имена классов совпадают с прежней версией: страницы не переверстываются. */

@import url('/fonts/fonts.css');

:root{
  /* Поверхности */
  --bg:#FFFFFF;
  --bg-soft:#F4F5F7;
  --surface:#FFFFFF;
  --surface-2:#F0F1F4;
  --ink:#111318;          /* чёрные блоки и текст */
  --ink-soft:#1C1F26;
  --line:#E3E5EA;
  --line-strong:#CFD2DA;

  /* Текст */
  --tx:#14161A;
  --tx-dim:#454B57;
  --tx-mute:#6B7280;      /* 4.83 на белом */
  --tx-on-ink:#FFFFFF;
  --tx-on-ink-dim:#B9BEC9;

  /* Акцент */
  --acc:#FFE000;
  --acc-deep:#F2CE00;
  --acc-soft:#FFF6B8;
  --on-acc:#14161A;

  /* Состояния */
  --ok:#0E8A5F;
  --warn:#B26B00;
  --bad:#C4362A;

  /* Типографика */
  --f-head:'Unbounded','Segoe UI',system-ui,sans-serif;
  --f-body:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:ui-monospace,'Cascadia Mono','Consolas',monospace;

  /* Метрика */
  --wrap:1200px;
  --narrow:780px;
  --r:12px;
  --r-lg:20px;
  --r-pill:999px;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3.25rem; --s8:4.5rem;
  --shadow:0 2px 10px rgba(17,19,24,.06);
  --shadow-lift:0 10px 30px rgba(17,19,24,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font:400 18px/1.6 var(--f-body);
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
/* «Одноклассниках» в заголовке не влезало в 375px и уводило страницу вбок.
   break-word рвёт слово только когда иначе никак — обычный текст не трогает. */
h1,h2,h3,h4{overflow-wrap:break-word}
/* Поле ввода по умолчанию не сжимается ниже своего размера в символах и рвёт
   любую сетку на телефоне; ширину задаёт контейнер. */
input,select,textarea{min-width:0}
a{color:var(--tx);text-decoration:none;
  background:linear-gradient(var(--acc),var(--acc)) 0 100%/100% 2px no-repeat;
  transition:background-size .15s ease}
a:hover{background-size:100% 100%}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ---------- Типографика ---------- */
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.08;margin:0 0 var(--s4);letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.2rem,1.3rem + 3.6vw,3.4rem);font-weight:900}
h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);font-weight:800;margin-top:var(--s7)}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);font-weight:700;margin-top:var(--s6)}
h4{font-size:1.12rem;font-weight:700;margin-top:var(--s5)}
p,ul,ol,table{margin:0 0 var(--s4)}
li{margin-bottom:var(--s2)}
strong{font-weight:700}
small{font-size:.9rem;color:var(--tx-mute)}
.lead{font-size:1.2rem;color:var(--tx-dim);max-width:64ch}
.eyebrow{
  display:inline-block;font:700 .85rem/1 var(--f-body);letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-acc);background:var(--acc);
  padding:.45rem .8rem;border-radius:var(--r-pill);margin-bottom:var(--s4)
}
.mark{background:var(--acc);padding:0 .18em;border-radius:.15em}

/* ---------- Раскладка ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
/* Узкая колонка выравнивается по левому краю сетки, а не центрируется:
   раньше страницы с .wrap.narrow съезжали к середине, и левый край страницы
   прыгал с 90px на 240px относительно шапки (увидено на отрисовке /golosa/).
   Контейнер остаётся во всю ширину, ограничивается мера строки у текста. */
.narrow{max-width:var(--narrow)}
.wrap.narrow{max-width:var(--wrap)}
.wrap.narrow>*{max-width:var(--narrow)}
/* Блочные компоненты внутри такой секции остаются во всю ширину */
.wrap.narrow>.tldr,.wrap.narrow>.tiers,.wrap.narrow>.faq,.wrap.narrow>.grid,
.wrap.narrow>.cta,.wrap.narrow>.rel,.wrap.narrow>.tbl-scroll,
.wrap.narrow>.versus,.wrap.narrow>.hero__facts{max-width:none}
section{padding-block:var(--s7)}
/* Заголовок в начале секции не добавляет свой отступ к отступу секции:
   иначе между блоками возникает провал ~100px и страница рассыпается
   на острова (увидено на отрисовке главной 2026-08-22). */
section>.wrap>h2:first-child,section>.wrap>*:first-child>h2:first-child{margin-top:0}
/* Две простые секции подряд не удваивают воздух между собой. */
section:not(.band):not(.band--ink)+section:not(.band):not(.band--ink){padding-top:0}
.band{background:var(--bg-soft)}
.band--ink{background:var(--ink);color:var(--tx-on-ink)}
.band--ink h1,.band--ink h2,.band--ink h3,.band--ink strong{color:var(--tx-on-ink)}
.band--ink p,.band--ink li{color:var(--tx-on-ink-dim)}
.band--ink a{color:var(--tx-on-ink);background-image:linear-gradient(var(--acc),var(--acc))}
.band--ink a:hover{color:var(--on-acc)}
.grid{display:grid;gap:var(--s4)}
@media(min-width:640px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Шапка ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:var(--s5);height:72px;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.logo{font:900 1.25rem/1 var(--f-head);letter-spacing:-.03em;color:var(--tx);white-space:nowrap;background:none}
.logo span{background:var(--acc);padding:.1em .3em;border-radius:.3em}
.logo:hover{background:none}
.nav{display:flex;gap:var(--s5);margin-left:auto;font-size:.98rem;font-weight:600}
.nav a{color:var(--tx-dim);background:none;padding-block:.45rem;display:inline-block}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tx);background:linear-gradient(var(--acc),var(--acc)) 0 100%/100% 3px no-repeat}
.burger{display:none;margin-left:auto;background:var(--acc);border:0;color:var(--on-acc);border-radius:var(--r-pill);padding:.6rem .9rem;font-size:1rem;cursor:pointer}
@media(max-width:940px){
  .nav{position:fixed;inset:72px 0 auto;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:var(--s5);gap:var(--s4);display:none;box-shadow:var(--shadow-lift)}
  .nav.open{display:flex}
  .burger{display:block}
}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.8rem;border-radius:var(--r-pill);border:2px solid transparent;
  font:700 1.02rem/1 var(--f-body);cursor:pointer;transition:.16s ease;box-shadow:none
}
.btn:hover{box-shadow:none;transform:translateY(-2px)}
.btn--gold{background:var(--acc);color:var(--on-acc)}
.btn--gold:hover{background:var(--acc-deep);color:var(--on-acc);box-shadow:0 8px 22px rgba(242,206,0,.4)}
.btn--ghost{border-color:var(--ink);color:var(--tx);background:transparent}
.btn--ghost:hover{background:var(--ink);color:var(--tx-on-ink)}
.band--ink .btn--ghost,.cta .btn--ghost,.tldr .btn--ghost,.fact .btn--ghost{border-color:var(--tx-on-ink);color:var(--tx-on-ink)}
.band--ink .btn--ghost:hover,.cta .btn--ghost:hover,.tldr .btn--ghost:hover{background:var(--tx-on-ink);color:var(--ink)}
.btn--lg{padding:1.15rem 2.3rem;font-size:1.08rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* ---------- Hero ---------- */
.hero{
  padding-block:var(--s8) var(--s7);
  background:
    radial-gradient(46rem 22rem at 88% -20%,var(--acc-soft),transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero h1{max-width:18ch}
.hero .lead{max-width:58ch;font-size:1.28rem}
.hero__facts{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:var(--s7)}
@media(min-width:1000px){.hero--split .hero__facts{grid-template-columns:repeat(2,1fr)}}
.fact{background:var(--ink);color:var(--tx-on-ink);border-radius:var(--r-lg);padding:var(--s5)}
.fact__n{display:block;font:900 2rem/1 var(--f-head);color:var(--acc);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fact__t{display:block;margin-top:.5rem;font-size:.95rem;color:var(--tx-on-ink-dim)}

/* ---------- Карточки ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card h3 a{background-size:100% 3px}
.card h3 a:hover{background-size:100% 100%}
.card:hover{box-shadow:var(--shadow-lift)}
.card--gold{background:var(--acc);border-color:var(--acc);box-shadow:none}
.card--gold .card__tag{background:var(--ink);color:var(--tx-on-ink);border-color:var(--ink)}
.card__tag{display:inline-block;font:700 .82rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--on-acc);background:var(--acc);border:1px solid var(--acc);border-radius:var(--r-pill);padding:.4rem .7rem;margin-bottom:var(--s3)}

/* ---------- Ответ на вопрос страницы ---------- */
.tldr{background:var(--ink);color:var(--tx-on-ink);border-radius:var(--r-lg);padding:var(--s6);margin-block:var(--s5)}
@media(min-width:900px){
  .tldr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s7);align-items:start;padding:var(--s7)}
  .tldr__h{margin-bottom:0;align-self:start}
  .tldr>p{max-width:66ch;font-size:1.08rem}
}
.tldr__h{display:inline-block;font:700 .85rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--on-acc);background:var(--acc);padding:.4rem .75rem;border-radius:var(--r-pill);margin-bottom:var(--s4)}
.tldr p,.tldr li{color:var(--tx-on-ink-dim)}
.tldr strong{color:var(--tx-on-ink)}
.tldr p:last-child,.tldr ul:last-child{margin-bottom:0}
.tldr a{color:var(--tx-on-ink)}
.tldr a:hover{color:var(--on-acc)}

/* ---------- Шаги ---------- */
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:var(--s5)}
.steps li{counter-increment:s;position:relative;padding-left:4.2rem;margin:0}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-.35rem;
  display:grid;place-items:center;width:3rem;height:3rem;
  font:900 1.25rem/1 var(--f-head);color:var(--on-acc);
  background:var(--acc);border-radius:50%
}

/* ---------- Прайс: уровни защиты ---------- */
.tiers{display:grid;gap:var(--s3);margin-block:var(--s5)}
.tier{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s5);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);transition:.16s ease
}
.tier:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.tier__lvl{font:800 .95rem/1 var(--f-head);color:var(--tx);background:var(--acc);border-radius:var(--r-pill);padding:.55rem .9rem;white-space:nowrap}
.tier__d strong{display:block;margin-bottom:.15rem;font-size:1.05rem}
.tier__d span{font-size:.95rem;color:var(--tx-mute)}
.tier__p{font:900 1.5rem/1 var(--f-head);color:var(--tx);white-space:nowrap;font-variant-numeric:tabular-nums}
.tier__p small{display:block;font:400 .85rem/1 var(--f-body);color:var(--tx-mute);margin-top:.35rem}
@media(max-width:720px){
  /* minmax(0,1fr) vmesto 1fr: golaya 1fr ne uzhimaetsya nizhe min-content,
     i na 320px kartochka rasporala dokument na vseh 40 stranicah s praysom. */
  .tier{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s3);gap:var(--s4)}
  .tier__lvl{grid-column:1/-1;justify-self:start}
}
@media(max-width:352px){
  .tier{grid-template-columns:minmax(0,1fr)}
  .tier__p{white-space:normal}
}

/* ---------- Таблицы ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
th,td{padding:.9rem var(--s4);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font:700 .85rem/1.3 var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:var(--tx-dim);background:var(--bg-soft)}
tr:last-child td{border-bottom:0}

/* ---------- Вопросы и ответы ---------- */
.faq{display:grid;gap:var(--s3)}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5)}
.faq details[open]{border-color:var(--ink);box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;font-size:1.06rem;color:var(--tx);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:38px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";display:grid;place-items:center;flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;background:var(--acc);color:var(--on-acc);font:900 1.2rem/1 var(--f-head)}
.faq details[open] summary::after{content:"\2212"}
.faq summary+*{margin-top:var(--s4)}
.faq p{color:var(--tx-dim)}
.faq p:last-child{margin-bottom:0}

/* ---------- Призыв к действию ---------- */
.cta{background:var(--ink);color:var(--tx-on-ink);border-radius:var(--r-lg);padding:var(--s7) var(--s6);margin-block:var(--s7);text-align:center}
.cta h2{margin-top:0;color:var(--tx-on-ink)}
.cta p{max-width:56ch;margin-inline:auto;color:var(--tx-on-ink-dim)}

/* ---------- Хлебные крошки ---------- */
.crumbs{font-size:.92rem;color:var(--tx-mute);padding-top:var(--s5)}
.crumbs a{color:var(--tx-mute);background:none}
.crumbs a:hover{color:var(--tx);background:linear-gradient(var(--acc),var(--acc)) 0 100%/100% 2px no-repeat}
/* Разделитель крошек был --line-strong: контраст 1.51 на белом. Виден глазом,
   но формально нечитаем — поймано замером на мобильном (2026-08-22). */
.crumbs span{margin-inline:.45rem;color:var(--tx-mute)}

/* ---------- Заметки ---------- */
.note{background:var(--acc-soft);border-radius:var(--r-lg);padding:var(--s5);margin-block:var(--s5)}
.note--warn{background:#FFF1DC}
.note p:last-child{margin-bottom:0}

/* ---------- Похожие страницы ---------- */
.rel{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media(min-width:700px){.rel{grid-template-columns:repeat(2,1fr)}}
.rel a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);color:var(--tx);font-weight:600}
.rel a:hover{background:var(--acc);border-color:var(--acc)}

/* Карточки журнала: у них есть заголовок и лид, поэтому плитка крупнее обычной.
   На жёлтом наведении приглушённый текст даёт слабый контраст — на ховере
   уводим его в основной цвет, иначе описание проваливается. */
.rel--cards{gap:var(--s4)}
.rel--cards a{padding:var(--s5) var(--s6)}
.rel--cards b{display:block;font-family:var(--f-head);font-weight:700;font-size:1.06rem;
  line-height:1.25;margin-bottom:var(--s3)}
.rel--cards span{display:block;font-weight:400;color:var(--tx-mute);font-size:.96rem;line-height:1.5}
.rel--cards a:hover span{color:var(--ink)}

/* Дата публикации статьи журнала — видимая свежесть контента для SEO/AEO */
.post-date{color:var(--tx-mute);font-size:.9rem;margin-top:var(--s3)}

/* ---------- Подвал ---------- */
.ftr{background:var(--ink);color:var(--tx-on-ink-dim);padding-block:var(--s7);margin-top:var(--s7);font-size:.98rem}
.ftr .logo{color:var(--tx-on-ink)}
.ftr .logo span{color:var(--on-acc)}
/* Четыре колонки: подвал несёт все 16 адресов из LINK-PLAN, а не десять, как
   было до 2026-08-22 (поймано audit/linkplan_gate.py). На планшете колонки
   встают парами — четыре узкие колонки ссылок на 780px читаются как каша. */
.ftr__cols{display:grid;gap:var(--s6)}
@media(min-width:560px){.ftr__cols{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.ftr__cols{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.ftr h4{font-family:var(--f-body);font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin:0 0 var(--s4)}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:.6rem}
.ftr a{color:var(--tx-on-ink-dim);background:none}
.ftr a:hover{color:var(--acc);background:none}
.ftr__bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:var(--s6);padding-top:var(--s5);font-size:.9rem;color:var(--tx-on-ink-dim)}

/* ---------- Формы ---------- */
label{display:block;font-weight:700;margin-bottom:var(--s2);font-size:.98rem}
input,select,textarea{
  width:100%;padding:.95rem var(--s4);background:var(--surface);color:var(--tx);
  border:2px solid var(--line);border-radius:var(--r);font:400 1rem var(--f-body)
}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none}
.field{margin-bottom:var(--s4)}
.field--check{display:flex;gap:var(--s3);align-items:flex-start}
/* 13px по умолчанию — не попасть пальцем. Растим сам флажок и оставляем
   подпись кликабельной: реальная область нажатия у чекбокса это строка целиком. */
.field--check input{width:auto;flex:0 0 auto;inline-size:1.5rem;block-size:1.5rem;
  margin-top:.05rem;accent-color:var(--ink);cursor:pointer}
.field--check label{cursor:pointer;padding-block:var(--s2)}
.field--check label{margin:0;font-weight:400}
.field__hint{margin:var(--s2) 0 0;font-size:.9rem;color:var(--tx-mute)}
.field__err{margin:var(--s2) 0 0;font-size:.9rem;color:#B3261E;font-weight:700}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#B3261E}

/* Ловушка для роботов: поле не видно человеку, но не скрыто display:none —
   часть ботов такие поля пропускает. Заполнено = заявка от робота.
   Приём «увести на -9999px» не годится: он растягивает область прокрутки, и
   страница уезжает вбок на телефоне (поймано обходом сайта). Схлопываем поле
   в точку и обрезаем — для DOM оно на месте, для глаза его нет. */
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form-status{margin-top:var(--s4);padding:var(--s4);border-radius:var(--r);font-weight:700}
.form-status--ok{background:var(--acc-soft)}
.form-status--err{background:#FFE7E4}
.form-status[hidden]{display:none}

/* ---------- Нижний бар на мобильном ---------- */
/* Запрошен владельцем после запуска: на телефоне главное действие должно быть
   под большим пальцем всегда, а не только в hero и финальном CTA. Показывается
   на тех же ширинах, где включается бургер (до 940px). body получает отступ
   снизу, чтобы бар не накрывал подвал; safe-area — для айфонов с «бровью». */
.mbar{display:none}
@media(max-width:940px){
  .mbar{
    display:flex;gap:var(--s3);position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:.6rem var(--s4) calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(17,19,24,.97);backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.14)
  }
  /* Dvuhstrochnaya knopka po obrazcu vladel'ca: glavnaya stroka + melkaya
     podpis'. Palitra nasha (anti-affiliat: nikakogo sinego donora). */
  .mbar .btn{flex:1 1 auto;flex-direction:column;gap:.18rem;padding:.6rem .55rem;font-size:.98rem;min-width:0;text-align:center}
  /* TG-knopke - shirina po soderzhimomu, zheltoy - ostatok: pri ravnyh dolyah
     "Zakazat' v Telegram" ne vlezal i lomalsya na dve stroki s levoy vyklyuchkoy
     (skrinshot vladel'ca 2026-09-01). Zagolovok - odnostrochnyy flex-centr. */
  .mbar .btn--ghost{flex:0 0 auto}
  .mbar .btn b{display:flex;align-items:center;justify-content:center;gap:.3rem;font-weight:700;line-height:1.1;font-size:.9rem;white-space:nowrap}
  /* .74rem ot kornevyh 16px = 11.8px - sud'ya dizayna zavernul, i pravil'no:
     pol chitaemosti .82rem (13px) deystvuet i dlya podpisey. */
  .mbar .btn small{font-weight:400;font-size:.82rem;line-height:1;opacity:.85;color:inherit;white-space:nowrap}
  .mbar .btn--ghost{border-color:var(--tx-on-ink);color:var(--tx-on-ink)}
  .mbar .btn--ghost:hover{background:var(--tx-on-ink);color:var(--ink)}
  .mbar .btn--ghost svg{flex:0 0 auto}
  /* Otstup = fakticheskaya vysota bara (zamer posle dvuhstrochnyh knopok: 95px) */
  body{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}
@media(max-width:352px){
  /* Sverhuzkie: dve knopki ryadom ne zhivut - stolbikom, kazhdaya vo vsyu shirinu */
  .mbar{flex-direction:column;gap:.5rem}
  .mbar .btn--ghost{flex:1 1 auto}
  body{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
}

/* ---------- Квиз-заявка ---------- */
/* Один длинный список полей отпугивает: человек видит стену и уходит. Разбиваем
   на шаги, где каждый — один понятный вопрос. Шаги переключаются классом, без
   инлайн-стилей: их запрещает design_gate, и правильно делает. */
.quiz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6);max-width:44rem;margin-inline:auto}
.quiz__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  margin-bottom:var(--s4)}
.quiz__step{font-family:var(--f-head);font-weight:700;font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-mute)}
.quiz__bar{height:6px;background:var(--line);border-radius:var(--r-pill);overflow:hidden;
  margin-bottom:var(--s6)}
.quiz__bar i{display:block;height:100%;width:var(--p,20%);background:var(--acc);
  border-radius:var(--r-pill);transition:width .35s ease}
.quiz__q{font-family:var(--f-head);font-weight:700;font-size:1.25rem;line-height:1.25;
  margin:0 0 var(--s5)}
.quiz__pane{display:none}
.quiz__pane.is-on{display:block}
.quiz__opts{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
@media(min-width:620px){.quiz__opts--2{grid-template-columns:1fr 1fr}}
.quiz__opt{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4) var(--s5);
  border:2px solid var(--line);border-radius:var(--r);cursor:pointer;background:var(--bg)}
.quiz__opt:hover{border-color:var(--ink)}
.quiz__opt input{width:auto;flex:0 0 auto;inline-size:1.25rem;block-size:1.25rem;
  margin-top:.15rem;accent-color:var(--ink)}
.quiz__opt span{font-weight:600}
.quiz__opt small{display:block;font-weight:400;color:var(--tx-mute);margin-top:.15rem}
.quiz__opt:has(input:checked){border-color:var(--ink);background:var(--acc-soft)}
/* На жёлтой подложке выбранного варианта приглушённый серый даёт 4.40 при норме
   4.5 — поймано замером, не глазом. Затемняем подпись только у выбранного. */
.quiz__opt:has(input:checked) small{color:#4B515C}
.quiz__nav{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.quiz__nav .btn{flex:0 0 auto}
.quiz__back{background:none;border:none;color:var(--tx-mute);font:600 1rem var(--f-body);
  cursor:pointer;padding:var(--s3) var(--s4);border-radius:var(--r)}
.quiz__back:hover{color:var(--tx);background:var(--surface)}
.quiz__back[hidden]{display:none}

/* ---------- Калькулятор сметы ---------- */
/* Считает ровно по модели «уровень защиты + гео», другой цены на сайте нет.
   Итог всегда со словом «от»: точную ставку называем после просмотра площадки. */
/* minmax(0,1fr) обязателен и для одной колонки: по умолчанию минимум трека —
   min-content, и форма с полями ввода растягивала колонку до 387px внутри
   контейнера в 323px. Страница уезжала вбок на телефоне. */
.calc{display:grid;gap:var(--s6);align-items:start;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.calc{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}}
.calc__form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
.calc__out{background:var(--ink);color:var(--tx-on-ink);border-radius:var(--r-lg);padding:var(--s6)}
.calc__sum{font-family:var(--f-head);font-weight:900;font-size:clamp(2rem,1.4rem + 2vw,2.8rem);line-height:1.05;margin:var(--s3) 0}
.calc__sum span{color:var(--acc)}
.calc__row{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid rgba(255,255,255,.14)}
/* Запрет переноса рассчитан на короткое значение («от 2,5 ₽»). Длинная фраза с
   ним уезжает за экран, а не переносится, — поэтому вместо nowrap выравниваем
   значение по правому краю: числа и так не рвутся, а фраза переносится. */
.calc__row b{text-align:right}
@media(max-width:480px){
  /* Tot zhe defekt, chto u speccard: "Shag 2" rvalsya po slovam, znachenie
     viselo rvanym flagom. Na uzkih - stek: leybl sverhu, znachenie sleva. */
  .calc__row{flex-direction:column;align-items:flex-start;gap:.1rem}
  .calc__row b{text-align:left}
}
.calc__note{margin-top:var(--s5);font-size:.94rem;color:var(--tx-on-ink-dim)}
/* Ссылка внутри тёмного табло наследовала основной цвет текста — почти чёрный
   на почти чёрном, контраст 1.03. Глазом это выглядит как «ссылки просто нет». */
/* ---------- Ссылки на тёмных поверхностях ---------- */
/* Правило одно на все тёмные блоки, и это принципиально: сначала невидимая
   ссылка нашлась в табло калькулятора, потом такая же — в блоке призыва на
   /otzyvy-klientov/. Чинить по одному месту значит ждать третьего.
   Тёмные поверхности сайта: .cta, .tldr, .calc__out (у .band--ink и .ftr свои
   правила выше). Кнопки исключены: у них своя заливка, и без :not(.btn)
   жёлтая кнопка получила жёлтый текст — контраст 1.00. */
.cta a:not(.btn),
.tldr a:not(.btn),
.calc__out a:not(.btn){color:var(--acc);text-decoration:underline;text-underline-offset:.2em}
.cta a:not(.btn):hover,
.tldr a:not(.btn):hover,
.calc__out a:not(.btn):hover{color:var(--tx-on-ink)}

/* =========================================================================
   ФИРМЕННЫЕ КОМПОНЕНТЫ
   Приём взят не из «красивого вообще», а из предмета: сайт про голосования,
   значит его визуальный якорь — табло хода кампании. Оно же показывает то,
   что мы продаём: ровный темп и отчётность по этапам.
   ========================================================================= */

/* ---------- Первый экран: текст слева, табло справа ---------- */
.hero__in{display:grid;gap:var(--s7);align-items:center}
@media(min-width:1000px){
  .hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s8);align-items:start}
}
.hero__text{min-width:0}
/* Deti grid-treka ne dolzhny rasporat' dokument svoim min-content:
   na 320px kartochka .speccard (stroki+polya+ramka = 309px) rastyagivala
   trek shire ekrana na 42 stranicah. min-width:0 vozvrashchaet perenosy. */
.hero__in>*{min-width:0}
@media(max-width:400px){.pricecard,.speccard{padding:var(--s5) var(--s4)}}
.hero--split h1{max-width:16ch;font-size:clamp(2rem,1.2rem + 2.6vw,3rem);line-height:1.06}
/* Заголовок внутренней страницы длиннее, чем у главной: даём ему ширину колонки */
.hero--split .hero__text h1:not(:only-child){max-width:none}
.hero--split .lead{max-width:46ch}

/* ---------- Табло кампании ---------- */
.board{
  background:var(--ink);color:var(--tx-on-ink);border-radius:28px;
  padding:var(--s6);position:relative;overflow:hidden;min-width:0;
  box-shadow:0 24px 60px rgba(17,19,24,.18)
}
.board::after{                      /* угловой блик, чтобы плоскость не читалась мёртвой */
  content:"";position:absolute;inset:auto -30% -45% auto;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,224,0,.16),transparent 62%);pointer-events:none
}
.board__top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.board__live{
  display:inline-flex;align-items:center;gap:.45rem;font:700 .84rem/1 var(--f-body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--on-acc);
  background:var(--acc);padding:.4rem .7rem;border-radius:var(--r-pill)
}
.board__live i{width:.5rem;height:.5rem;border-radius:50%;background:var(--ink);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.board__meta{font-size:.9rem;color:var(--tx-on-ink-dim)}
.board__num{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.board__num b{
  font:900 clamp(2.6rem,1.6rem + 3.4vw,4rem)/1 var(--f-head);color:var(--acc);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums
}
.board__num span{font-size:1rem;color:var(--tx-on-ink-dim)}
.board__bar{height:14px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);margin:var(--s5) 0 var(--s3);overflow:hidden}
.board__bar i{display:block;height:100%;width:var(--p,0%);border-radius:var(--r-pill);background:var(--acc);transition:width 1.6s cubic-bezier(.22,.8,.3,1)}
.board__legend{display:flex;justify-content:space-between;gap:var(--s4);font-size:.9rem;color:var(--tx-on-ink-dim);flex-wrap:wrap}
.board__spark{margin-top:var(--s5)}
.board__spark svg{display:block;width:100%;height:64px;overflow:visible}
.board__rows{margin-top:var(--s5);border-top:1px solid rgba(255,255,255,.14);padding-top:var(--s4);display:grid;gap:.7rem}
.board__row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center;font-size:.94rem}
.board__row span:first-child{color:var(--tx-on-ink-dim);white-space:nowrap}
.board__row em{
  height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.16);position:relative;overflow:hidden
}
.board__row em::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--acc);border-radius:var(--r-pill)}
.board__row b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Площадки: чипы ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:var(--s5) 0 0}
.chips li{
  display:inline-flex;align-items:center;gap:.45rem;font:600 .92rem/1 var(--f-body);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.55rem .9rem;color:var(--tx-dim)
}
.chips li::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--acc)}
.band--ink .chips li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--tx-on-ink-dim)}

/* ---------- Утилиты отступа и меры строки ----------
   Нужны, чтобы не разводить инлайн-стили в разметке: гейт дизайна
   считает инлайн-правки дефектом, место правок — этот файл. */
.mt-5{margin-top:var(--s5)}
.mt-6{margin-top:var(--s6)}
.mt-7{margin-top:var(--s7)}
.measure{max-width:60ch}
.center{justify-content:center}


/* ---------- Композиция «заголовок слева, содержимое справа» ----------
   Раньше такие секции были узкой колонкой по центру, и левый край страницы
   прыгал с 90px на 210px — глаз спотыкался на ступеньке (увидено на отрисовке). */
.split{display:grid;gap:var(--s6)}
.split h2{margin-top:0}
@media(min-width:980px){
  .split{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:var(--s8);align-items:start}
  .split__aside{position:sticky;top:96px}
}
.split__aside p{color:var(--tx-mute);font-size:1.02rem}

/* ---------- Компактная карточка цены ----------
   Для первого экрана внутренних страниц: справа от лида оставалась дыра
   в пол-экрана, а посетителю на входе нужен порядок цифр. */
/* .speccard — тот же компонент под нецифровые факты (лимиты площадки, условия) */
.pricecard,.speccard{background:var(--surface);border:2px solid var(--ink);border-radius:24px;padding:var(--s6)}
.pricecard__h,.speccard__h{font:700 .85rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mute);margin-bottom:var(--s5)}
.pricecard__row,.speccard__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.35rem var(--s4);padding:.8rem 0;border-bottom:1px solid var(--line)}
.pricecard__row:last-of-type,.speccard__row:last-of-type{border-bottom:0}
.pricecard__row span,.speccard__row span{font-size:.98rem;color:var(--tx-dim)}
.pricecard__row b,.speccard__row b{font:900 1.35rem/1 var(--f-head);white-space:nowrap;font-variant-numeric:tabular-nums}
.speccard__row b{font:700 .97rem/1.35 var(--f-body);white-space:normal;text-align:right;max-width:19ch}
@media(max-width:480px){
  .speccard__row{flex-direction:column;align-items:flex-start;gap:.15rem}
  .speccard__row b{text-align:left;max-width:none}
}
.pricecard__note,.speccard__note{margin:var(--s5) 0 0;font-size:.93rem;color:var(--tx-mute)}

/* ---------- Мотив отметок: разделитель секций ---------- */
.ticks{display:block;height:30px;width:100%;overflow:hidden;line-height:0;background:var(--bg-soft)}
.ticks svg{width:100%;height:30px;display:block}

/* ---------- Крупная цитата-утверждение ---------- */
.claim{
  font:800 clamp(1.5rem,1.1rem + 1.8vw,2.3rem)/1.18 var(--f-head);
  letter-spacing:-.02em;max-width:20ch;margin:0
}
.claim--ink{color:var(--tx-on-ink)}
.claim em{font-style:normal;background:var(--acc);color:var(--on-acc);padding:0 .2em;border-radius:.16em}

/* ---------- Сравнение: две колонки со смещением ---------- */
.versus{display:grid;gap:var(--s4)}
@media(min-width:860px){.versus{grid-template-columns:1fr 1fr;gap:var(--s5)}.versus>:last-child{transform:translateY(var(--s6))}}
.versus__col{border-radius:var(--r-lg);padding:var(--s6);border:1px solid var(--line);background:var(--surface);color:var(--tx)}
/* Светлый островок внутри чёрной секции возвращает тёмный текст.
   Приглушённый столбец сюда НЕ входит: он прозрачный, фон под ним чёрный,
   и тёмный текст на нём исчезает (контраст ~1.1, поймано глазом 2026-08-22).
   Специфичность :not() считается по аргументу — без второго :not это
   правило перебивало правило приглушённого столбца. */
.band--ink .versus__col:not(.versus__col--ink):not(.versus__col--muted),
.band--ink .card:not(.card--gold),
.band--ink .versus__col:not(.versus__col--ink):not(.versus__col--muted) h3,
.band--ink .versus__col:not(.versus__col--ink):not(.versus__col--muted) strong{color:var(--tx)}
.band--ink .versus__col:not(.versus__col--ink):not(.versus__col--muted) li,
.band--ink .versus__col:not(.versus__col--ink):not(.versus__col--muted) p{color:var(--tx-dim)}
/* Та же ловушка каскада для светлой карточки внутри тёмной секции: правило
   `.band--ink h3` красило заголовок в белый, а карточка под ним белая — контраст
   1.00, то есть заголовка на экране нет вообще. Правило для секции задаёт цвет
   самой карточке, но не её заголовкам и абзацам: те красятся напрямую и потому
   выигрывают. Перечисляем их явно. Поймано замером 2026-09-01 на /konkursy/premii/. */
.band--ink .card:not(.card--gold) h2,
.band--ink .card:not(.card--gold) h3,
.band--ink .card:not(.card--gold) strong{color:var(--tx)}
.band--ink .card:not(.card--gold) p,
.band--ink .card:not(.card--gold) li{color:var(--tx-dim)}
.versus__col--ink{background:var(--ink);color:var(--tx-on-ink);border-color:var(--ink)}
.versus__col--ink h3,.versus__col--ink strong{color:var(--tx-on-ink)}
.versus__col--ink li{color:var(--tx-on-ink-dim)}
.versus h3{margin:0 0 var(--s4)}
.versus ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
.versus li{padding-left:1.9rem;position:relative}
.versus li::before{content:"";position:absolute;left:0;top:.45em;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--line)}
.versus__col--ink li::before{background:var(--acc)}

/* Приглушённый столбец сравнения: то, что мы НЕ хвалим, не должно быть
   ярче нашего формата. До правки конкурент лежал в белой карточке и
   притягивал взгляд сильнее, чем наше предложение. */
.versus__col--muted{background:transparent;border-color:rgba(255,255,255,.2)}
.band--ink .versus__col--muted h3{color:var(--tx-on-ink-dim)}
.band--ink .versus__col--muted li{color:var(--tx-on-ink-dim);opacity:.85}
.versus__col--muted li::before{background:rgba(255,255,255,.28)}
/* Маркеры нашего списка внутри чёрной секции — жёлтые: серые на белой
   карточке почти не читались, список терял вид утверждения. */
.band--ink .versus__col:not(.versus__col--muted) li::before{background:var(--acc)}

/* ---------- Кнопка «Оформить» в шапке ---------- */
/* Чёрная таблетка: рядом с жёлтым бургером на мобильном не сливается,
   в белой шапке на десктопе — самый контрастный элемент. */
.hdr-cta{background:var(--ink);color:var(--tx-on-ink);padding:.62rem 1.15rem;font-size:.92rem;white-space:nowrap;flex:0 0 auto}
.hdr-cta:hover{background:var(--acc);color:var(--on-acc)}
@media(max-width:940px){
  /* Na uzkom ekrane v shapke zhivut troe: logo + burger + "Oformit'".
     Bez uzhatiya summa shirin 424px > 375px, i knopka lozhitsya na kray. */
  .hdr__in{gap:.6rem;padding-inline:var(--s4)}
  .logo{font-size:1.08rem}
  .hdr-cta{padding:.55rem .9rem;font-size:.88rem}
  .nav{inset:72px 0 auto}
}
@media(max-width:352px){
  /* Sverhuzkie ekrany: knopke mesta net, snizu vsegda est' fiks-bar. */
  .hdr-cta{display:none}
}

/* ---------- Полоса захвата заявок (cta3) ---------- */
/* Три канала на каждой странице перед подвалом: чат, форма, Telegram.
   Тёмная полоса во всю ширину — отличается от контентной .cta-карточки. */
.cta3{background:var(--ink);padding:var(--s6) var(--s5);border-bottom:1px solid rgba(255,255,255,.14)}
.cta3+.ftr{margin-top:0}
.cta3__in{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.cta3__t{font:800 1.3rem/1.25 var(--f-head);color:var(--tx-on-ink);margin:0}
.cta3__btns{display:flex;gap:var(--s3);flex-wrap:wrap;margin-left:auto}
.cta3 .btn--paper{background:#fff;color:var(--ink)}
.cta3 .btn--paper:hover{background:var(--acc);color:var(--on-acc)}
.cta3 .btn--ghost{border-color:var(--tx-on-ink);color:var(--tx-on-ink)}
.cta3 .btn--ghost:hover{background:var(--tx-on-ink);color:var(--ink)}
.cta3 .btn svg{flex:0 0 auto}
@media(max-width:700px){
  .cta3__in{flex-direction:column;align-items:stretch;text-align:center}
  .cta3__btns{margin-left:0;flex-direction:column}
  .cta3 .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:hover{transform:none}
  .board__bar i{transition:none}
}