/* ═══════════════════════════════════════════════════════════════
   Маяк Broadcast · направление A «Спортивный брутализм»
   Токены и правила — DESIGN.md
   ═══════════════════════════════════════════════════════════════ */
/* шрифты лежат у нас (assets/fonts, OFL): вариативные файлы Google Fonts, по одному на набор знаков; ₽ — в latin-ext */
@font-face{font-family:'Geologica';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/geologica-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geologica';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/geologica-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geologica';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/geologica-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:'Golos Text';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/golos-text-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/golos-text-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/golos-text-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}
:root{
  color-scheme:dark;  /* полоса прокрутки, поля и рамка фокуса браузера — в темном виде */
  --bg:#0E0E10;--bg-2:#18181B;--bg-3:#1F1F23;
  --fg:#EFEFF1;--fg-2:#ADADB8;--fg-3:#868692;  /* --fg-3 — мелкие подписи: контраст не ниже 4.5:1 на --bg, --bg-2 и --bg-3 */
  /* акцент по ролям: --accent — линии, рамки, маркеры, фокус (текстом не бывает: на фонах сайта 3.6–4.2:1);
     --accent-hi — заливка под светлым текстом (кнопки, бейджи; 5.5:1), --accent-lo — ее hover;
     --accent-lt — акцентный текст (не ниже 5:1 на трех фонах). --live — точка и рамки, текст ошибок — --live-lt (не ниже 5.4:1) */
  --accent:#9147FF;--accent-hi:#772CE8;--accent-lo:#5C16C5;--accent-lt:#A970FF;--live:#EB0400;--live-lt:#FF5C57;
  --rule:#3A3A3D;--rule-hi:#6A6A72;  /* --rule-hi — граница полей ввода: не ниже 3:1 к --bg, --bg-2 и --bg-3 */
  --ink-60:rgba(14,14,16,.6);--ink-70:rgba(14,14,16,.7);--ink-85:rgba(14,14,16,.85);--ink-90:rgba(14,14,16,.9);--fg-a05:rgba(239,239,241,.05);--rule-soft:rgba(239,239,241,.16);--rule-faint:rgba(239,239,241,.08);
  /* шрифты с родной кириллицей (с 17.09.2026): Geologica — заголовки, цифры, кнопки; Golos Text — текст. Оба OFL, Google Fonts */
  --disp:'Geologica','Arial',sans-serif;
  --body:'Golos Text','Arial',sans-serif;
  --gutter:56px;--section:64px;
  --radius:4px;  /* скругление только мелкого слоя: кнопки, теги, чипы, инпуты, чекбокс, точки прогресса; каркас (карточки, слоты, таблица) квадратный */
  /* кривые: --ease-out для появлений и hover-движения, --ease-in-out для движения на экране,
     обычный ease для смены цвета; --ease остаётся у демо радара (не трогать) */
  --ease:cubic-bezier(.2,.7,.3,1);--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
section[id]{scroll-margin-top:72px}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.5;
  font-feature-settings:"kern" 1,"liga" 1,"tnum" 1;overflow-x:hidden}
::selection{background:var(--accent-hi);color:var(--fg)}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}  /* та же рамка фокуса, что у кнопок */
img{display:block;max-width:100%}
ul{list-style:none}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}

/* ── типографика ─────────────────────────────────────────────── */
.label{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.label.acc{color:var(--accent-lt)}
.label.fg{color:var(--fg)}
.acc{color:var(--accent-lt)}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(36px,4.4vw,68px);line-height:.96;letter-spacing:-.03em;text-transform:uppercase}
/* ротатор игры в H1 главной (texts-build: rot_word): в тексте заголовка только первое слово — его читает поисковик;
   второе выводит ::after из data-alt, для скринридеров скрыто (/ ""). Оба слова в одной ячейке сетки — высота H1 не прыгает */
h1 .rot{display:inline-grid;text-align:left;vertical-align:baseline}
h1 .rot>span,h1 .rot::after{grid-area:1/1;opacity:0;animation:rotw 6s var(--ease) infinite}
h1 .rot::after{content:attr(data-alt);content:attr(data-alt) / "";animation-delay:3s}
@keyframes rotw{0%{opacity:0;transform:translateY(.18em)}8%,42%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(-.12em)}}  /* слово гаснет к 3 с, следующее появляется после — без наложения */
.hero-sub{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.4vw,36px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;margin-top:14px}
[hidden]{display:none!important} /* атрибут hidden сильнее display в компонентах (капча, кнопки входа через провайдеров) */
.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}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(26px,2.6vw,42px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;max-width:1100px}
h3{font-family:var(--disp);font-weight:700;font-size:24px;line-height:1.05;letter-spacing:-.02em;text-transform:uppercase}
.lead{font-size:18px;line-height:1.45;color:var(--fg-2);max-width:720px}
.lead b{color:var(--fg);font-weight:500}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-bottom:36px}
.sec-head .label{margin-bottom:16px;display:flex;align-items:center;gap:12px}
.sec-head .label::before{content:"";width:24px;height:1px;background:var(--accent)}
.sec-head .lead{margin-top:14px}
.sec-head h1{font-size:clamp(26px,2.6vw,42px);line-height:1;letter-spacing:-.02em;max-width:1100px} /* H1 внутренней страницы выглядит как H2 */
.sec-head .hero-cta{margin-top:28px}
/* прямой ответ «что это и кому» — сразу под первым экраном (методика, 6.1) */
.answer{max-width:900px;padding:40px 0 32px;font-size:19px;line-height:1.55;color:var(--fg-2)}
/* главная, секция .intro: ответ крупно (первая фраза ярче) и кейсы крупными цифрами (texts-build: r_answer, r_proof) */
.intro .answer{max-width:1000px;padding:0;font-size:26px;line-height:1.35;letter-spacing:-.005em}
.intro .answer b{color:var(--fg);font-weight:400}
.nums-h{margin-top:56px;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center;gap:12px}
.nums-h::before{content:"";width:24px;height:1px;background:var(--accent)}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.num{padding:32px 32px 32px 0;border-right:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:14px}
.num+.num{padding-left:32px}
.num:last-child{border-right:none}
.num b{font-family:var(--disp);font-weight:700;font-size:clamp(44px,4.8vw,76px);line-height:.92;letter-spacing:-.035em;white-space:nowrap}
.num b i{font-style:normal;color:var(--accent-lt)}
.num p{font-size:15px;color:var(--fg-2);max-width:300px}
.num .label{margin-top:auto}
.num-note{margin-top:18px;font-size:13px;color:var(--fg-3)}
.num-note b{color:var(--fg-2);font-weight:500}
/* «было / стало» */
.pains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.pain{padding:28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--bg);display:flex;flex-direction:column;gap:10px;transition:background .15s ease}
.pain .was{color:var(--fg-2);font-size:15px}
.pain .now{color:var(--fg);font-size:17px;margin-bottom:4px}
.steps-note{margin-top:20px;font-size:15px;color:var(--fg-2)}
/* первые блоки «Как начать», «Организаторам», «Стримерам» (section.page-top) — одной высоты на всех трех страницах,
   чтобы при переходе между ними страница не дергалась. Под H1, подзаголовок, ответ и кнопки зарезервировано столько строк,
   сколько занимает самый длинный из трех текстов на этой ширине (замер по текстам 24.09, 320–1920 px, шаг 1 px).
   Если тексты hero или answer этих страниц станут длиннее — пересчитать пороги */
.page-top h1{min-height:2lh}
.page-top .sec-head .lead{min-height:2lh}
.page-top .answer{box-sizing:content-box;min-height:4lh}
.page-top .hero-cta{align-content:flex-start}  /* резерв высоты не растягивает кнопки */
@media(max-width:861px){.page-top .answer{min-height:5lh}}
@media(max-width:721px){.page-top h1{min-height:3lh}.page-top .answer{min-height:6lh}}
@media(max-width:686px){.page-top .sec-head .lead{min-height:3lh}.page-top .answer{min-height:7lh}.page-top .hero-cta{min-height:152px}}
@media(max-width:516px){.page-top .sec-head .lead{min-height:4lh}.page-top .answer{min-height:9lh}}
@media(max-width:403px){.page-top .answer{min-height:11lh}}
@media(max-width:368px){.page-top h1{min-height:4lh}.page-top .answer{min-height:12lh}.page-top .hero-cta{min-height:176px}}
@media(max-width:344px){.page-top h1{min-height:5lh}.page-top .sec-head .lead{min-height:5lh}.page-top .answer{min-height:13lh}}
.sec-num{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;padding-bottom:6px}

/* ── кнопки ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.02em;text-transform:uppercase;
  padding:20px 32px;border:1px solid var(--fg);border-radius:var(--radius);background:var(--fg);color:var(--bg);white-space:nowrap;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .16s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.acc{background:var(--accent-hi);border-color:var(--accent-hi);color:var(--fg)}
.btn.ghost{background:transparent;color:var(--fg)}
.btn.sm{padding:8px 16px;font-size:13px}
@media(hover:hover) and (pointer:fine){
  .btn:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:var(--fg);transform:translateY(-2px)}
  .btn:hover:active{transform:translateY(-2px) scale(.97)}
  .btn.acc:hover{background:var(--accent-lo);border-color:var(--accent-lo)}
  .btn.ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
}

/* ── live-точка ──────────────────────────────────────────────── */
.live{display:inline-flex;align-items:center;gap:12px}
.live i{width:10px;height:10px;background:var(--live);animation:tick 1.2s steps(2) infinite}
@keyframes tick{0%,100%{opacity:1}50%{opacity:.15}}

/* ── шапка ───────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:var(--bg-2);border-bottom:1px solid var(--rule)}  /* фон как у футера (с 17.09.2026) */
.hd{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.wordmark{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.wordmark b{color:var(--accent-lt);font-weight:700}
nav.main{display:flex;gap:24px}
nav.main a{font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--fg-2);position:relative;padding:4px 0;transition:color .15s ease}
nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease-out)}
nav.main a:hover{color:var(--fg)}nav.main a:hover::after{transform:scaleX(1)}
.hd-right{display:flex;align-items:center;gap:20px}
.hd-right .lk{font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--fg-2)}
.hd-right .lk:hover{color:var(--fg)}
.hd-right>.btn{font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.06em}  /* только кнопка в шапке: у кнопки мобильного меню обычный вид */
/* мобильное меню без JS */
details.mnav{display:none}
details.mnav summary{list-style:none;cursor:pointer;width:44px;height:44px;border:1px solid var(--rule);border-radius:var(--radius);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
details.mnav summary::-webkit-details-marker{display:none}
details.mnav summary i{display:block;width:20px;height:2px;background:var(--fg)}
details.mnav .mlist{position:absolute;left:0;right:0;top:72px;background:var(--bg-2);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;padding:8px var(--gutter) 24px}
details.mnav[open] .mlist{transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
@starting-style{details.mnav[open] .mlist{opacity:0;transform:translateY(-6px)}}
details.mnav .mlist a{padding:16px 0;border-bottom:1px solid var(--rule-soft);font-weight:500;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
details.mnav .mlist .btn{margin-top:20px;padding:20px 32px;border-bottom-color:transparent;font-weight:700;letter-spacing:.02em}  /* кнопка, а не пункт списка */

/* ── hero ────────────────────────────────────────────────────── */
.hero{position:relative;padding:0}
.hero-bottom{display:flex;flex-direction:column;gap:24px}
.hero .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));min-height:calc(100svh - 72px);position:relative}
.hero .wrap::before{content:"";position:absolute;left:calc(var(--gutter) + (100% - 2 * var(--gutter)) * 7 / 12);top:0;bottom:0;width:1px;background:var(--rule-soft)}
.hero-l{grid-column:1/8;padding:72px 48px 56px 0;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.hero-l>div:first-child{display:flex;flex-direction:column;gap:28px}
.hero-r{grid-column:8/13;padding:72px 0 56px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.rise{animation:rise .5s var(--ease-out) both}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(var(--rise-y,18px))}to{opacity:1;transform:none}}
/* мягкий вариант для отдельных страниц (тарифы, организаторам, политика): едва заметный сдвиг 8px за 400 мс,
   каскад задержек тот же (.d1–.d4); главная и 403 остаются на обычном .rise */
.rise.soft{--rise-y:8px;animation-duration:.4s}
.hero-cta{display:flex;gap:20px;flex-wrap:wrap}
.hero-note{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.hero-note em{color:var(--fg-2);font-style:normal}
/* правая колонка hero (.hero-r) пустая — слот под новый блок */

/* ── tally ───────────────────────────────────────────────────── */
.tally{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden;background:var(--bg-2)}
.tally-in{display:flex;width:max-content;animation:tick-run 34s linear infinite}
.tally span{display:inline-flex;align-items:center;gap:28px;padding:18px 0 18px 28px;font-weight:500;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.tally span::after{content:"";width:8px;height:8px;background:var(--accent)}
@keyframes tick-run{to{transform:translateX(-50%)}}

/* ── trust strip ─────────────────────────────────────────────── */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-bottom:1px solid var(--rule)}  /* кейсов 1–4, колонки по числу */
.trust div{padding:24px 28px 24px 0;border-right:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:12px}
.trust div+div{padding-left:28px}
.trust div:last-child{border-right:none}
.trust h3{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.2;letter-spacing:-.01em;text-transform:uppercase}
.trust p{font-size:15px;color:var(--fg-2)}

/* ── секции ──────────────────────────────────────────────────── */
section{padding:var(--section) 0;position:relative}
section.alt{background:var(--bg-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* ── image slot (заглушка 777) ───────────────────────────────── */
.slot{position:relative;border:1px solid var(--rule);background:var(--bg-2);margin:0;display:flex;flex-direction:column}
.slot .frame{aspect-ratio:16/9;overflow:hidden;position:relative}
.slot .frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.slot-tag{position:absolute;top:0;left:0;z-index:2;background:var(--accent-hi);color:var(--fg);font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot figcaption{padding:9px 14px;border-top:1px solid var(--rule-soft);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);display:flex;justify-content:space-between;gap:12px}
.slot figcaption b{color:var(--fg-2);font-weight:500}

/* ── возможности: крупные блоки ──────────────────────────────── */
.feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;border-top:1px solid var(--rule-soft);padding:36px 0}
.feature:last-of-type{border-bottom:1px solid var(--rule-soft)}
.feature .media{grid-column:1/8;padding-right:48px}
.feature .text{grid-column:8/13;display:flex;flex-direction:column;justify-content:center;gap:22px}
.feature.flip .media{grid-column:6/13;padding-right:0;padding-left:48px;order:2}
.feature.flip .text{grid-column:1/6;order:1}
.feature h3{font-size:28px}
.feature p{color:var(--fg-2);font-size:17px;max-width:460px}
.bullets{display:flex;flex-direction:column;gap:12px}
.bullets li{display:flex;align-items:center;gap:14px;font-size:16px}
.bullets li::before{content:"";width:16px;height:1px;background:var(--accent);flex:none}
/* сетка малых карточек */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.card{padding:28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--bg);display:flex;flex-direction:column;gap:12px;min-height:200px;transition:background .15s ease}
.card .label{display:flex;justify-content:space-between}
.card .plan-tag{align-self:flex-start} /* бейдж тарифа над заголовком карточки */
.card p{color:var(--fg-2);font-size:15px}
.card code{font-family:var(--disp);font-size:13px;color:var(--fg);background:var(--bg-3);padding:2px 6px;border:1px solid var(--rule-soft);border-radius:var(--radius)}

/* ── поддержка игр: три карточки (статус · иконка · название · описание · функции, в нашей сетке линеек) ── */
.gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.gcard{padding:28px 28px 24px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--bg);display:flex;flex-direction:column;gap:12px;transition:background .15s ease}
.gtop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.gcard .st{font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--rule-soft);border-radius:var(--radius);color:var(--fg-2)}
.gcard .st.on{border-color:var(--accent);color:var(--accent-lt)}
.gicon{width:48px;height:48px;border:1px solid var(--rule-soft);background:var(--bg-2);display:flex;align-items:center;justify-content:center}
.gicon img{width:28px;height:28px;object-fit:contain}  /* все иконки в одном квадрате 28×28, PNG обрезаны по контенту */
.gcard h3{font-size:24px}
.gcard p{color:var(--fg-2);font-size:15px}
.gfeat{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:6px;padding-top:16px;border-top:1px solid var(--rule-soft);flex:1}
.gfeat li{font-size:14px;color:var(--fg-2);display:flex;align-items:center;gap:10px}
.gfeat li::before{content:"";width:5px;height:9px;margin:-3px 3px 0 0;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg);flex:none}
/* игра в разработке (метка «Скоро»): приглушенные название и иконка, без списка функций */
.gcard.soon h3{color:var(--fg-2)}
.gcard.soon .gicon img{opacity:.6}

/* ── бейдж тарифа (карточки функций на главной) ───────────────────── */
.plan-tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--rule-soft);border-radius:var(--radius);color:var(--fg-2)}
.plan-tag.pro{border-color:var(--accent);color:var(--accent-lt)}

/* ── внутри ──────────────────────────────────────────────────── */
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}
.wall .slot{grid-column:2/12}

/* ── сцены ───────────────────────────────────────────────────── */
.scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.url-line{margin-top:12px;border:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.url-line .label{padding:12px 24px;border-right:1px solid var(--rule-soft)}
.url-line .txt{font-size:17px;color:var(--fg);padding:12px 24px}
.url-line span:last-child{padding:12px 24px;border-left:1px solid var(--rule-soft);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}

/* ── шаги ────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.step{padding:32px 32px 36px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:20px}
.step .n{font-family:var(--disp);font-weight:700;font-size:64px;line-height:1;letter-spacing:-.03em;color:var(--accent-lt)}
.step p{color:var(--fg-2);font-size:16px}
.step .hint{margin-top:auto;font-family:var(--disp);font-size:13px;color:var(--fg-2);border:1px solid var(--rule-soft);border-radius:var(--radius);padding:12px 14px;background:var(--bg)}
.step .hint b{color:var(--fg)}


/* ── тарифы ──────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.plan{padding:32px 28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;position:relative;background:var(--bg);transition:background .15s ease}
.plan.hot{background:var(--bg-2)}
.plan.hot::before{content:"Популярный";position:absolute;top:-1px;right:-1px;background:var(--accent-hi);color:var(--fg);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:8px 12px}
.plan h3{font-size:26px;margin-top:8px}
.plan .for{color:var(--fg-2);font-size:14px;margin-top:6px}
.plan .price{margin:22px 0 4px;display:flex;align-items:baseline;gap:8px}
.plan .price b{font-family:var(--disp);font-weight:700;font-size:48px;line-height:1;letter-spacing:-.03em}
.plan .price span{font-size:15px;color:var(--fg-2)}
.plan .dev{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.plan ul{margin:20px 0 24px;flex:1;display:flex;flex-direction:column}
.plan li{padding:8px 0;border-bottom:1px solid var(--rule-faint);font-size:15px;display:flex;gap:12px;align-items:flex-start}
.plan li::before{content:"";width:12px;height:1px;background:var(--accent);flex:none;margin-top:12px}
.plan .btn{width:100%}
.plans-note{margin-top:24px;display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--fg-3)}
.plans-note em{color:var(--fg-2);font-style:normal}
/* таблица сравнения */
.cmp{position:relative;margin-top:48px;border:1px solid var(--rule)}  /* relative: скрытые «Да» / «Нет» не выходят за прокрутку таблицы на мобильном */
.cmp table{border-collapse:collapse;width:100%;min-width:760px;table-layout:fixed}
.cmp th:first-child{width:40%}
.cmp th,.cmp td{padding:0 20px;height:44px;border-bottom:1px solid var(--rule-soft);border-left:1px solid var(--rule-faint);text-align:center;font-size:15px;vertical-align:middle}
.cmp th:first-child,.cmp td:first-child{text-align:left;border-left:none}
.cmp thead th{position:sticky;top:72px;z-index:2;background:var(--bg-3);box-shadow:0 1px 0 var(--rule);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.cmp thead th.hot{color:var(--accent-lt)}
.cmp td:nth-child(3){background:var(--bg-3)}
.cmp td.grp{height:40px;font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-lt);background:var(--bg);border-top:1px solid var(--rule);text-align:left}
.cmp .y{font-family:var(--disp);font-weight:700;color:var(--fg)}
.cmp .yes::before{content:"";display:inline-block;width:7px;height:13px;margin-top:-4px;border:solid var(--accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);vertical-align:middle}
.cmp .n{color:var(--fg-3)}
.cmp td small{display:block;font-size:13px;color:var(--fg-3);margin-top:2px}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq{max-width:900px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;font-weight:500;font-size:19px;transition:color .15s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-lt)}
.faq summary i{position:relative;width:20px;height:20px;flex:none}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;background:var(--fg);transition:transform .2s var(--ease-out)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 60px 22px 0;color:var(--fg-2);font-size:16px;max-width:760px}
.faq details[open] p{transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
@starting-style{.faq details[open] p{opacity:0;transform:translateY(4px)}}
.faq details p code{font-family:var(--disp);font-size:14px;color:var(--fg);background:var(--bg-3);padding:2px 6px;border:1px solid var(--rule-soft);border-radius:var(--radius)}

/* ── документы (privacy.html) ────────────────────────────────── */
.doc{max-width:900px;overflow-wrap:anywhere}  /* адрес сайта и другие неразрывные строки не вылезают за экран на 320 px */
/* разделы документа: h2 в политике (сразу после H1 страницы), h3 — в черновиках legal-drafts */
.doc h2,.doc h3{font-size:20px;line-height:1.05;margin:44px 0 16px;padding-top:24px;border-top:1px solid var(--rule)}
.doc .req+h2,.doc .req+h3{margin-top:24px;padding-top:0;border-top:none}
.doc p{color:var(--fg-2);font-size:16px;margin-bottom:12px}
.doc p b{color:var(--fg);font-weight:500}
.doc .bullets{margin:4px 0 16px}
.doc .bullets li{align-items:flex-start;color:var(--fg-2);font-size:16px}
.doc .bullets li::before{margin-top:12px}
.doc .req{font-family:var(--disp);font-size:14px;line-height:1.6;color:var(--fg);background:var(--bg-2);border:1px solid var(--rule);padding:16px 20px}
/* маркер недостающих данных заказчика — см. TODO-RELEASE.md; перед релизом убрать */
.todo{color:var(--accent-lt);background:var(--bg-3);border:1px dashed var(--accent);padding:0 6px;font-family:var(--disp);font-size:.9em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ── финальный CTA ───────────────────────────────────────────── */
.final{border-top:1px solid var(--rule);padding:var(--section) 0}
.final .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.final .in{grid-column:1/10;display:flex;flex-direction:column;gap:32px}
.final h2{max-width:1100px}
.final .cta{display:flex;gap:20px;flex-wrap:wrap}

/* ── футер ───────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);background:var(--bg-2)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding:40px 0 28px}
.foot h2{font-family:var(--body);font-weight:500;font-size:12px;line-height:1.5;letter-spacing:.18em;color:var(--fg-3);margin-bottom:12px}  /* заголовок колонки — в виде Label */
.foot a{display:block;padding:4px 0;font-size:15px;color:var(--fg-2);transition:color .15s ease}
.foot a:hover{color:var(--accent-lt)}
.foot .req{color:var(--fg-3);font-size:13px;line-height:1.6;margin-top:12px}
.copy{border-top:1px solid var(--rule-soft);padding:16px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--fg-3)}
.tm{padding:0 0 20px;font-size:12px;line-height:1.5;color:var(--fg-3)} /* дисклеймер Valve под копирайтом */

/* кнопка «Наверх» (главная, assets/totop.js): появляется, когда первый экран ушел из вида; при наведении стрелка
   приподнимается, по нажатию «улетает» вверх и возвращается снизу, пока страница едет наверх (класс .go, --go = время прокрутки) */
.totop{position:fixed;right:24px;bottom:24px;z-index:40;width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--radius);color:var(--fg-2);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s linear .2s,color .15s ease,border-color .15s ease}
.totop.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s,color .15s ease,border-color .15s ease}
.totop:active{transform:scale(.92)}
.totop::before{content:"";width:10px;height:10px;margin-top:5px;border:solid currentColor;border-width:2px 0 0 2px;transform:rotate(45deg);transition:transform .2s var(--ease-out)}
.totop.go::before{animation:totop-go var(--go,.5s) var(--ease-in-out)}
@keyframes totop-go{0%{transform:translateY(0) rotate(45deg)}45%{transform:translateY(-30px) rotate(45deg)}46%{transform:translateY(30px) rotate(45deg)}100%{transform:translateY(0) rotate(45deg)}}
.totop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── зона нажатия мелких элементов — не меньше 44 px по высоте: невидимая накладка, вид не меняется ── */
a.wordmark,.auth-links a{position:relative}
a.wordmark::after,.auth-links a::after,.forgot::after,.rnav::after,.eye::after{content:"";position:absolute;inset:var(--hit) 0}
a.wordmark{--hit:-9px}.auth-links a{--hit:-12px}.forgot{--hit:-6px}.rnav{--hit:-5px}.eye{--hit:-2px}  /* «Забыли пароль?» — 33 px: ниже поле ввода */
.rnav::after{inset:var(--hit)}

/* ── hover только для мыши: на тачах эффект «залипает» после тапа ── */
@media(hover:hover) and (pointer:fine){
  .card:hover,.gcard:hover,.plan:hover,.pain:hover{background:var(--bg-3)}
  .rnav:hover,.totop:hover{color:var(--fg);border-color:var(--accent)}
  .totop:hover::before{transform:translateY(-3px) rotate(45deg)}
}

/* ── reduced motion ──────────────────────────────────────────── */
/* reduced-motion: отключаем только декоративное (появление hero, мигание точек). Демо продукта —
   бегущая строка, радар, ротатор игр — крутятся всегда (требование заказчика). */
@media(prefers-reduced-motion:reduce){
  .rise,.live i{animation:none}  /* точка чипа радара (.rchip i) — в блоке радара: там ее правило стоит ниже по файлу */
  .rise{opacity:1;transform:none}
}

/* ── адаптив ─────────────────────────────────────────────────── */
/* шапка с шестью пунктами меню: пункты 13px без переносов на любой ширине (с 29.09.2026, иначе шире 1440
   меню упиралось в вордмарк и «Войти»), до 1400 кнопка тарифа скрыта (она есть в hero и в мобильном меню),
   с 1200 — бургер. Пороги подобраны под Golos Text */
@media(max-width:1400px){
  .hd-right>.btn{display:none}  /* только кнопка в шапке; кнопка мобильного меню лежит глубже и остается */
}
@media(max-width:1200px){
  nav.main,.hd-right .lk{display:none}
  details.mnav{display:block}
}
@media(max-width:1160px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scenes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  :root{--section:56px}
  .hero .wrap{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-l,.hero-r{min-width:0}
  .hero .wrap::before{display:none}
  .hero-l{grid-column:1;padding:56px 0 40px}
  .hero-r{grid-column:1;padding:0 0 56px;border-top:1px solid var(--rule-soft);padding-top:40px}
  .trust{grid-template-columns:1fr 1fr}
  .intro .answer{font-size:21px}
  .nums-h{margin-top:40px}
  .nums{grid-template-columns:1fr}
  .num,.num+.num{padding:24px 0;border-right:none;border-bottom:1px solid var(--rule-soft)}
  .num:last-child{border-bottom:none}
  .trust div{border-right:none;border-bottom:1px solid var(--rule-soft);padding:24px 0}
  .trust div+div{padding-left:0}
  .feature,.feature.flip{grid-template-columns:1fr}
  .feature .media,.feature.flip .media{grid-column:1;padding:0;order:1;margin-bottom:28px}
  .feature .text,.feature.flip .text{grid-column:1;order:2}
  .steps{grid-template-columns:1fr}
  .gcards{grid-template-columns:1fr}
  .wall .slot{grid-column:1/-1}
  .cmp{overflow-x:auto}.cmp thead th{position:static}
  .foot{grid-template-columns:1fr 1fr}
  .sec-head{grid-template-columns:1fr}
  .sec-num{display:none}
  .url-line{grid-template-columns:1fr}
  .url-line .label,.url-line span:last-child{border:none;border-bottom:1px solid var(--rule-soft)}
  .url-line span:last-child{border-bottom:none;border-top:1px solid var(--rule-soft)}
}
@media(max-width:640px){
  :root{--gutter:24px}
  .totop{right:16px;bottom:16px}
  .plans,.scenes,.cards,.foot,.trust,.pains{grid-template-columns:1fr}
  .sec-head h1{font-size:22px}  /* длинный H1 внутренних страниц — не больше 3 строк на 390 px (чек-лист ТЗ) */
  .btn{width:100%;white-space:normal;text-align:center}
  .faq summary{font-size:17px}
  .faq details p{padding-right:0}
  .url-line .txt{font-size:15px}
  #privacy h1{font-size:min(22px,6vw)}  /* «конфиденциальности» целиком в строке и на 320 px */
  .foot a{padding:11px 0}  /* на тачах строка ссылки — 44 px */
  .feature h3{font-size:min(28px,7vw)}.card h3{font-size:min(24px,5.6vw)}  /* длинное слово («автоприближением») не шире экрана и на 320 px */
}
@media(max-width:380px){.gfeat{grid-template-columns:1fr}}  /* карточки «Игр»: функции в одну колонку, иначе карточка шире экрана */
/* активный пункт меню (страница открыта) */
nav.main a.on{color:var(--fg)}nav.main a.on::after{transform:scaleX(1)}
details.mnav .mlist a.on{color:var(--accent-lt)}

/* ── радар: CSS-демо динамического приближения (IMG-01) ─────── */
/* ВНИМАНИЕ: цвета сторон CT #2BB8F5 (+ ореол rgba(43,184,245,.25)) и T #F2A51C — игровые цвета из HUD.
   Они НЕ относятся к палитре сайта и не меняются при перекраске (зафиксировано заказчиком 16.09.2026),
   поэтому заданы литералами. Всё остальное в радаре (фон, чипы, номера, обводки) — через токены сайта. */
.radar-demo{position:absolute;inset:0;background:var(--bg);overflow:hidden;font-family:var(--body)}
.radar-demo .grid{position:absolute;inset:0;background-image:linear-gradient(var(--fg-a05) 1px,transparent 1px),linear-gradient(90deg,var(--fg-a05) 1px,transparent 1px);background-size:40px 40px}
.radar-demo .map{position:absolute;left:0;top:50%;width:100%;aspect-ratio:1/1;margin-top:-50%;transform-origin:0 0;
  container-type:inline-size;  /* 1cqi = 1% карты — в этих единицах заданы позиции маркеров */
  background:url(radar/de_mirage.webp) center/cover no-repeat;animation:rscene var(--rcycle) linear infinite}
/* СЦЕНЫ (зум, цель, позиции, статусы игроков, заголовки, точки прогресса) генерируются:
   tools/radar-scenes.mjs → assets/radar-scenes.css (keyframes rscene, rmk, pN, rtN, rdN). Здесь только статика.
   Маркер = <svg class="mk [t] pN">: группа .al (живой: стрелка .ar, тело, номер) и .dd (крестик выбывшего).
   Состояние приходит из keyframes pN: translate (позиция в cqi), --al (жив 1/0), --fo (в фокусе — белая обводка), --rot (угол стрелки). */
.mk-defs{position:absolute;width:0;height:0;overflow:hidden}
/* размер маркера — от ширины карты (1cqi = 1% карты): на десктопе 40px, на узком экране меньше, чтобы спавны не слипались в пятно */
.mk{--mk:clamp(28px,6.4cqi,40px);position:absolute;left:0;top:0;width:var(--mk);height:var(--mk);margin:calc(var(--mk) / -2) 0 0 calc(var(--mk) / -2);overflow:visible;animation:rmk var(--rcycle) linear infinite;
  --mk-fill:#2BB8F5;--mk-x:#2BB8F5;--mk-num:var(--fg);--mk-arrow:var(--fg);--mk-ring:var(--ink-70);--mk-ring-w:1.5}
.mk text{fill:var(--mk-num);font-family:var(--disp);font-weight:700;font-size:11px;text-anchor:middle;dominant-baseline:central}
.mk.t{--mk-fill:#F2A51C;--mk-x:#F2A51C;--mk-arrow:#F2A51C;--mk-num:var(--bg)}
.mk .al{opacity:var(--al,1)}
.mk .dd{opacity:calc((1 - var(--al,1)) * .35)}   /* выбывший: только крестик цветом своей стороны, приглушён */
.mk .ar{transform-origin:20px 20px;transform:rotate(calc(var(--rot,0) * 1deg))}
/* чипы внутри радара */
.rchip{position:absolute;z-index:3;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;background:var(--ink-90);border:1px solid var(--rule-soft);border-radius:var(--radius);color:var(--fg-2);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.rchip i{width:7px;height:7px;background:var(--live);animation:tick 1.2s steps(2) infinite}
@media(prefers-reduced-motion:reduce){.rchip i{animation:none}}  /* мигание точки — декоративное, как у .live i */
.rchip.br{bottom:14px;right:14px}
/* стрелки смены сцены (assets/radar.js, без JS скрыты): по краям кадра, демо при переключении не останавливается */
.rnav{position:absolute;top:50%;z-index:5;margin-top:-18px;width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;
  background:var(--ink-90);border:1px solid var(--rule-soft);border-radius:var(--radius);color:var(--fg-2);cursor:pointer;
  transition:color .15s ease,border-color .15s ease,transform .2s var(--ease-out)}
.rnav.prev{left:12px}.rnav.next{right:12px}
.rnav::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0}
.rnav.prev::before{margin-left:4px;transform:rotate(135deg)}
.rnav.next::before{margin-right:4px;transform:rotate(-45deg)}
.rnav:active{transform:scale(.92)}
.rnav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* радар ушел из вида (класс .off на кадре, radar.js) — его анимации стоят, а не крутятся впустую */
.slot.off .radar-demo *,.slot.off .rdots i{animation-play-state:paused}
/* заголовок сцены: всплывает сверху по центру на 2 с в начале сцены (keyframes rtN) */
.rtitle{position:absolute;top:12px;left:50%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;opacity:0;transform:translate(-50%,-60px)}
.rtitle b{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg);background:var(--ink-90);border:1px solid var(--rule-soft);border-radius:var(--radius);padding:6px 14px}
.rtitle.frag b{color:var(--live-lt);border-color:var(--live)}
.rtitle.clutch b{color:var(--accent-lt);border-color:var(--accent)}
.rtitle span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.radar-demo .vig{position:absolute;inset:0;box-shadow:inset 0 0 120px var(--ink-85);pointer-events:none}
/* статус-бар под радаром (figcaption): DE_MIRAGE · точки прогресса сцен (keyframes rdN) · легенда сторон */
.rdots{display:flex;gap:5px;align-items:center}
.rdots i{display:block;width:5px;height:5px;border-radius:var(--radius);background:var(--fg-3)}
.rleg{display:flex;gap:14px}
.rleg b{font-weight:500;color:var(--fg-2);display:inline-flex;align-items:center;gap:6px}
.rleg b::before{content:"";width:8px;height:8px}
.rleg .ct::before{background:#2BB8F5}
.rleg .t::before{background:#F2A51C}

/* ── страница входа (login.html) ─────────────────────────────── */
.auth-body{min-height:100svh}
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100svh}
.auth-brand{background:var(--bg-2);border-right:1px solid var(--rule);padding:32px var(--gutter);display:flex;flex-direction:column;justify-content:space-between;gap:48px;position:relative;overflow:hidden}
.auth-brand-in{display:flex;flex-direction:column;gap:28px;max-width:520px;animation:rise .4s var(--ease-out) both}
.auth-brand h1{font-size:clamp(40px,4.6vw,68px)}
.auth-brand .bullets li{font-size:16px}
.auth-foot{color:var(--fg-3)}
/* весь текст бренд-панели входа и регистрации — по центру (вордмарк, лейбл, H1, подзаголовок, буллеты, копирайт) */
.auth-brand{align-items:center;text-align:center}
.auth-brand-in{align-items:center}
.auth-brand .bullets{text-align:left}  /* список по центру блока, строки внутри — по левому краю */
.auth-panel{display:flex;align-items:flex-start;justify-content:center;padding:36px var(--gutter) 24px}  /* карточка прижата к верху: при раскрытии требований к паролю форма растёт только вниз */
.auth-card{width:100%;max-width:460px;display:flex;flex-direction:column;gap:10px;animation:rise .4s .08s var(--ease-out) both}
@media(prefers-reduced-motion:reduce){.auth-brand-in,.auth-card{animation:none}}  /* появление декоративное, как у .rise */
.auth-card h2{font-size:clamp(28px,2.6vw,38px);max-width:none}
.auth-sub{color:var(--fg-2);font-size:17px;margin-bottom:10px}
.auth-form{display:flex;flex-direction:column}
.auth-form .field{display:flex;flex-direction:column}  /* расстояние между полями задаёт зарезервированная строка ошибки */
.auth-form label{font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin:0 0 8px}
.auth-form input[type=email],.auth-form input[type=password],.auth-form input[type=text],.auth-form input[type=date],.auth-form textarea{width:100%;background:var(--bg-2);border:1px solid var(--rule-hi);border-radius:var(--radius);color:var(--fg);font-family:var(--body);font-size:16px;padding:13px 18px;outline:none;transition:border-color .15s ease,background .15s ease}
.auth-form input::placeholder{color:var(--fg-3)}
.auth-form input:focus,.auth-form textarea:focus{border-color:var(--accent);background:var(--bg-3)}
.auth-form textarea{min-height:120px;resize:vertical;line-height:1.5}
/* валидация: HTML5-ограничения (required, type, pattern, minlength); ошибка показывается после ввода (:user-invalid)
   или после попытки отправки (form.was-submitted). Совпадение паролей и чек-лист правил — assets/auth.js */
/* строка ошибки всегда занимает место (min-height), появление ничего не сдвигает — только проявляется */
.auth-form .err{display:block;visibility:hidden;opacity:0;min-height:20px;margin:4px 0 2px;font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.01em;line-height:1.4;color:var(--live-lt);transition:opacity .15s ease}
/* ответ сервера после отправки (неверный email/пароль, занятый email): .form-msg над кнопкой, текст ставит auth.js */
.form-msg{display:none;margin:0 0 10px;padding:9px 14px;border:1px solid var(--live);border-radius:var(--radius);background:color-mix(in srgb,var(--live) 10%,transparent);font-family:var(--disp);font-weight:500;font-size:13px;line-height:1.4;color:var(--fg);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.form-msg.ok{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)} /* успешная отправка заявки */
.form-msg.on{display:block}
@starting-style{.form-msg.on{opacity:0;transform:translateY(-4px)}}
.auth-form input:user-invalid,.auth-form.was-submitted input:invalid{border-color:var(--live)}
.auth-form .field:has(input:user-invalid) .err,.auth-form.was-submitted .field:has(input:invalid) .err{visibility:visible;opacity:1}
.auth-form .check:has(input:user-invalid) span,.auth-form.was-submitted .check:has(input:invalid) span{color:var(--live-lt)}
/* глазик показать/скрыть пароль: кнопка внутри поля справа (auth.js переключает type) */
.pwwrap{position:relative}
.pwwrap input{padding-right:56px}
.eye{position:absolute;right:6px;top:50%;translate:0 -50%;width:40px;height:40px;border:0;border-radius:var(--radius);background:none;color:var(--fg-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease,transform .16s var(--ease-out)}
.eye:hover{color:var(--fg)}
.eye:active{transform:scale(.9)}
.eye:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.eye .slash{display:none}
.eye[aria-pressed="true"] .slash{display:block}
/* требования к паролю: свёрнуты (grid-template-rows 0fr), раскрываются по высоте за 200 мс при фокусе на поле
   или когда оно заполнено; пункты выезжают каскадом (шаг 40 мс). Форма при этом растёт только вниз. */
.pwbox{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s var(--ease-out)}
.pwrules{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.35;color:var(--fg-3)}
.pwrules li:first-child{padding-top:2px}
.pwrules li:last-child{padding-bottom:8px}  /* зазор до следующего поля; внутри overflow:hidden, в свёрнутом виде не виден */
.pwrules li{display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(-4px);transition:color .15s ease,opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.field:has(#password:focus) .pwbox,.field:has(#password:not(:placeholder-shown)) .pwbox{grid-template-rows:1fr}
.field:has(#password:focus) .pwrules li,.field:has(#password:not(:placeholder-shown)) .pwrules li{opacity:1;transform:none}
.field:has(#password:focus) .pwrules li:nth-child(2),.field:has(#password:not(:placeholder-shown)) .pwrules li:nth-child(2){transition-delay:0s,40ms,40ms}
.field:has(#password:focus) .pwrules li:nth-child(3),.field:has(#password:not(:placeholder-shown)) .pwrules li:nth-child(3){transition-delay:0s,80ms,80ms}
.field:has(#password:focus) .pwrules li:nth-child(4),.field:has(#password:not(:placeholder-shown)) .pwrules li:nth-child(4){transition-delay:0s,120ms,120ms}
.pwrules li::before{content:"";width:5px;height:9px;margin:-3px 3px 0 0;border:solid var(--fg-3);border-width:0 2px 2px 0;transform:rotate(45deg);transition:border-color .15s ease}
.pwrules li.ok{color:var(--fg-2)}
.pwrules li.ok::before{border-color:var(--accent)}
/* место под капчу: контейнер провайдера (TODO-08 в TODO-RELEASE.md), пока показывается плашка.
   Появляется только когда все текстовые поля прошли проверку (чекбокс согласия не считается) */
.auth-form:has(input:not([type=checkbox]):invalid) .captcha{display:none}
.auth-form.gate:not(.ready) .captcha{display:none}  /* вход: дополнительно ждём сильный пароль (класс ready ставит auth.js) */
.captcha{transition:opacity .2s var(--ease-out),transform .2s var(--ease-out);margin:0 0 14px;border:1px dashed var(--rule);border-radius:var(--radius);background:var(--bg-2);min-height:62px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.captcha::before{content:"";width:18px;height:18px;border:1px solid var(--fg-3);border-radius:var(--radius)}
@starting-style{.captcha{opacity:0;transform:translateY(-4px)}}
.auth-form .check{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--fg-2);margin:2px 0 12px;cursor:pointer}
.auth-form .check input{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;border:1px solid var(--fg-2);border-radius:var(--radius);background:var(--bg-2);cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .16s var(--ease-out)}
/* галочка: рисуется рамкой, появляется из scale(.6) + opacity за 160ms ease-out (не из нуля) */
.auth-form .check input::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--fg);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);opacity:0;transition:transform .16s var(--ease-out),opacity .12s ease}
.auth-form .check input:checked{background:var(--accent);border-color:var(--accent)}
.auth-form .check input:checked::after{transform:rotate(45deg) scale(1);opacity:1}
.auth-form .check input:active{transform:scale(.92)}
.auth-form .check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.auth-form .check a{color:var(--fg);border-bottom:1px solid var(--rule-soft);transition:color .15s ease,border-color .15s ease}
.auth-form .check a:hover{color:var(--accent-lt);border-color:var(--accent)}
.auth-form .btn{width:100%}
/* пока обязательные поля не заполнены, кнопка отправки приглушена (остаётся кликабельной: браузер подскажет, что не заполнено) */
.auth-form:invalid .btn[type=submit]{background:var(--bg-3);border-color:var(--rule);color:var(--fg-2)}
/* ── форма заявки (orgs.html#lead): поля .auth-form, раскладка своя ── */
.lead-form{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;max-width:920px}
.lead-form .wide{grid-column:1/-1}
.lead-form .btn{width:auto;justify-self:start}
@media(max-width:640px){.lead-form{grid-template-columns:1fr}.lead-form .btn{width:100%}}
.auth-or{display:flex;align-items:center;gap:16px;margin:18px 0 14px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--rule-soft)}
/* кнопки входа через провайдеров (свои, без виджетов): иконка + название, в ряд по три */
.social{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}  /* колонок столько, сколько подключено провайдеров */
.sbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 12px;border:1px solid var(--rule-soft);border-radius:var(--radius);background:var(--bg-2);color:var(--fg);font-weight:500;font-size:14px;letter-spacing:.02em;white-space:nowrap;transition:border-color .15s ease,background .15s ease,transform .16s var(--ease-out)}
.sbtn:active{transform:scale(.97)}
.sbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sbtn svg{flex:none}
@media(hover:hover) and (pointer:fine){.sbtn:hover{border-color:var(--fg-2);background:var(--bg-3)}}
/* слот капчи с живым виджетом reCAPTCHA: убираем плашку и рамку */
.captcha.live{border:0;background:none;min-height:78px;justify-content:flex-start;padding:0}
.captcha.live::before{display:none}
.auth-links{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule-soft);font-size:15px;color:var(--fg-2)}
.auth-links a{color:var(--fg);border-bottom:1px solid var(--rule-soft);transition:color .15s ease,border-color .15s ease}
.auth-links a:hover{color:var(--accent-lt);border-color:var(--accent)}
/* вход: «Забыли пароль?» справа в строке подписи поля пароля; в разметке ссылка после поля (порядок Tab), места не занимает */
.field:has(.forgot){position:relative}
.forgot{position:absolute;top:0;right:0;font-size:13px;line-height:1.5;color:var(--fg-2);border-bottom:1px solid var(--rule-soft);transition:color .15s ease,border-color .15s ease}
.forgot:hover{color:var(--accent-lt);border-color:var(--accent)}
/* кнопка действия в ответе сервера: «Отправить письмо еще раз» на входе с неподтвержденной почтой (auth.js) */
.form-msg .act{display:block;margin-top:6px;padding:0;border:0;border-bottom:1px solid var(--rule-soft);background:none;font:inherit;color:var(--fg);cursor:pointer;transition:color .15s ease,border-color .15s ease}
.form-msg .act:hover:not(:disabled){color:var(--accent-lt);border-color:var(--accent)}
.form-msg .act:disabled{color:var(--fg-3);cursor:default}
.form-msg .act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* состояния карточки (регистрация, reset.html, password.html): форма ↔ «проверьте почту» / «ссылка не работает».
   Переключает auth.js атрибутом hidden; внутри тот же столбец, что у .auth-card. Новое состояние проявляется
   тем же rise, что карточка, но короче и ближе: 200 мс, сдвиг 6px */
.auth-state{display:flex;flex-direction:column;gap:10px}
.auth-state.in{--rise-y:6px;animation:rise .2s var(--ease-out) both}
@media(prefers-reduced-motion:reduce){.auth-state.in{animation:none}}
.auth-state h2:focus{outline:none}  /* фокус ставит auth.js, чтобы скринридер прочитал новое состояние; рамка не нужна */
.auth-state .btn{width:100%}
.auth-state .bullets{gap:6px;margin-bottom:12px}
.auth-state .bullets li{font-size:15px;color:var(--fg-2)}
.auth-sub b{color:var(--fg);font-weight:500;overflow-wrap:anywhere}  /* email в тексте состояния */
/* «Отправить еще раз»: первые 60 с неактивна, после текста обратный отсчет .cd — в той же строке текста,
   чтобы на узком экране переносился вместе с последним словом */
.btn.resend:disabled{pointer-events:none;border-color:var(--rule);color:var(--fg-3)}
.btn .cd{margin-left:.6em;font-variant-numeric:tabular-nums}
@media(max-width:960px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-brand{border-right:none;border-bottom:1px solid var(--rule);padding:24px var(--gutter) 40px;gap:32px}
  .auth-brand h1{font-size:40px}
  .auth-foot{display:none}
  .auth-panel{padding:40px var(--gutter) 64px}
}


/* ── Страница ошибки 403 (403.html) ─────────────────────────── */
/* экран под шапкой на высоту окна, футер ниже; «0» в коде ошибки — контур акцентного цвета;
   появление — тот же каскад .rise, что у hero (новых анимаций нет) */
.errp{min-height:calc(100svh - 72px);display:flex;align-items:center;overflow:hidden;padding:56px 0}
.errp .wrap{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.errp .label{display:flex;align-items:center;gap:12px}
.errp .label::before{content:"";width:24px;height:1px;background:var(--accent)}
.errp .code{font-family:var(--disp);font-weight:700;font-size:clamp(112px,15vw,240px);line-height:.85;letter-spacing:-.03em;margin:8px 0}
.errp .code b{color:transparent;-webkit-text-stroke:3px var(--accent)}
.errp h1{font-size:clamp(26px,2.6vw,42px);line-height:1;letter-spacing:-.02em}
.errp .lead{max-width:640px}
.errp .cta{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px}
@media(max-width:640px){.errp{padding:48px 0}.errp .code b{-webkit-text-stroke-width:2px}.errp .cta{width:100%}}