@import '/fonts/faces.css';

/* ============================================================
   happ.claims — разбор обращений.

   Визуальный ключ: служебный бланк. Тема сайта — спорные деньги,
   поэтому оформление намеренно канцелярское: линии вместо теней,
   разлинованные поля, штамп статуса, моноширинные номера. Ни одного
   маркетингового приёма — человек и так раздражён.

   Дизайн-система
   Цвет      бумага / бланк / чернила / штамп + семантика состояний
   Шрифт     PT Serif (заголовки-документ) · Golos Text (текст) ·
             Martian Mono (номера, статусы, коды)
   Размеры   11 12 13 15 17 20 24 30 38
   Отступы   4 8 12 16 24 32 48 64
   Радиусы   0 2 3 — бумага не бывает круглой
   ============================================================ */

:root{
  --bg:      #EBEBE5;   /* холодная канцелярская бумага */
  --surface: #FFFFFF;   /* сам бланк */
  --sunk:    #F4F4EF;   /* поле формы, вложенная поверхность */
  --ink:     #191B21;   /* текст */
  --muted:   #63666F;   /* служебные подписи */
  --rule:    #D3D3CB;   /* линейки бланка */
  --rule-2:  #E3E3DC;   /* внутренняя разлиновка */
  --accent:  #2A3F73;   /* чернила: ссылки и действия */
  --stamp:   #8C3A34;   /* штамп: текущий статус */
  --ok:      #27614A;
  --warn:    #8A6410;
  --bad:     #A03A2E;

  --f-display:'PTSerif',Georgia,'Times New Roman',serif;
  --f-body:'GolosText',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-data:'MartianMono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --t-11:11px; --t-12:12px; --t-13:13px; --t-15:15px; --t-17:17px;
  --t-20:20px; --t-24:24px; --t-30:30px; --t-38:clamp(27px,4.2vw,38px);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r1:2px; --r2:3px;
  --wrap:1180px; --measure:70ch;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:      #131519;
    --surface: #1B1E25;
    --sunk:    #21252D;
    --ink:     #E5E8EE;
    --muted:   #979BA7;
    --rule:    #333845;
    --rule-2:  #282D37;
    --accent:  #93AEE8;
    --stamp:   #E29288;
    --ok:      #6FC79E;
    --warn:    #D8AE55;
    --bad:     #E28A7C;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 var(--t-17)/1.62 var(--f-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.18;margin:0;
  letter-spacing:-.005em}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
a:hover{border-bottom-color:var(--accent)}
img{max-width:100%;height:auto;display:block}
code{font:400 .88em/1.4 var(--f-data);background:var(--sunk);border:1px solid var(--rule-2);
  border-radius:var(--r1);padding:.08em .32em;word-break:break-word}
pre{font:400 var(--t-13)/1.55 var(--f-data);background:var(--sunk);border:1px solid var(--rule);
  border-radius:var(--r1);padding:var(--s4);overflow:auto;margin:0 0 var(--s5)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r1)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:99;background:var(--surface);
  padding:var(--s3) var(--s4);border:1px solid var(--accent)}
.page{position:relative}
.tag{font:500 var(--t-11)/1 var(--f-data);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:var(--s1);font:500 var(--t-11)/1 var(--f-data);
  letter-spacing:.05em;text-transform:uppercase;padding:5px 8px;border:1px solid var(--rule);
  border-radius:var(--r1);color:var(--muted);background:var(--sunk)}

/* ---------- шапка ---------------------------------------------- */
.hdr{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--rule)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:var(--s3) var(--s5);
  display:flex;align-items:center;gap:var(--s5)}
.brand{display:grid;grid-template-columns:auto max-content 1fr;grid-template-areas:'logo mark rest' 'logo tag tag';
  column-gap:var(--s3);align-items:center;border:0;flex:0 0 auto}
.brand__logo{grid-area:logo;display:block;width:34px;height:34px}
.brand__logo img{width:34px;height:34px}
.brand__logo-d{display:none}
.brand__mark{grid-area:mark;font:700 var(--t-20)/1 var(--f-display);letter-spacing:.01em;color:var(--ink)}
.brand__tag{grid-area:tag;font:400 9.5px/1.2 var(--f-data);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.hdr__nav{display:flex;gap:var(--s4);margin-left:auto;align-items:center;min-width:0}
.hdr__links{display:flex;gap:var(--s4);flex-wrap:wrap}
.hdr__nav a{font:500 var(--t-13)/1 var(--f-body);color:var(--ink);border:0;padding:var(--s2) 0;
  border-bottom:2px solid transparent;white-space:nowrap}
.hdr__nav a:hover,.hdr__nav a[aria-current]{border-bottom-color:var(--accent);color:var(--accent)}
.hdr__act{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.searchbtn{display:flex;align-items:center;gap:var(--s2);background:var(--sunk);
  border:1px solid var(--rule);border-radius:var(--r1);padding:7px var(--s3);
  font:400 var(--t-12)/1 var(--f-body);color:var(--muted);cursor:pointer}
.searchbtn:hover{border-color:var(--accent);color:var(--ink)}
.searchbtn kbd{font:500 var(--t-11)/1 var(--f-data);border:1px solid var(--rule);border-radius:2px;
  padding:2px 4px}
.burger{display:none;background:var(--sunk);border:1px solid var(--rule);border-radius:var(--r1);
  font:500 var(--t-15)/1 var(--f-data);color:var(--ink);padding:8px 11px;cursor:pointer}
.mnav{display:none;border-top:1px solid var(--rule);background:var(--surface)}
.mnav.is-open{display:block}
.mnav ul{list-style:none;margin:0;padding:var(--s2) var(--s5) var(--s4)}
.mnav li{border-bottom:1px solid var(--rule-2)}
.mnav li:last-child{border-bottom:0}
.mnav a{display:block;padding:11px 0;color:var(--ink);border:0;font-size:var(--t-15)}
.mnav a[aria-current]{color:var(--accent);font-weight:600}
@media (min-width:1025px){.mnav{display:none !important}}

/* ---------- кнопки ---------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font:600 var(--t-13)/1 var(--f-body);color:#fff;background:var(--accent);
  border:1px solid var(--accent);border-radius:var(--r1);padding:11px var(--s4);
  cursor:pointer;text-align:center}
.btn:hover{background:color-mix(in srgb,var(--accent) 84%,#000);border-color:color-mix(in srgb,var(--accent) 84%,#000)}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:8px var(--s3);font-size:var(--t-12)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{background:var(--sunk);color:var(--accent);border-color:var(--accent)}
@media (prefers-color-scheme:dark){
  .btn{color:#12141A}
  .btn:hover{background:color-mix(in srgb,var(--accent) 82%,#fff);border-color:color-mix(in srgb,var(--accent) 82%,#fff)}
}
.hdr__go{white-space:nowrap}
.hdr__go-s{display:none}
/* Кнопка перехода остаётся в шапке и на телефоне — просто с коротким словом. */
@media (max-width:1024px){
  .hdr__go{padding:9px 11px}
  .hdr__go-l{display:none}
  .hdr__go-s{display:inline}
}

/* ---------- SIGNATURE: карточка обращения ----------------------- */
.tkt{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r2)}
.tkt__hd{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline;justify-content:space-between;
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--rule);background:var(--sunk)}
.tkt__no{font:500 var(--t-13)/1 var(--f-data);letter-spacing:.04em;color:var(--ink)}
.tkt__meta{font:400 var(--t-11)/1 var(--f-data);letter-spacing:.06em;color:var(--muted)}
.tkt__bd{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr)}
.tkt__fields{list-style:none;margin:0;padding:0;border-right:1px solid var(--rule);
  display:flex;flex-direction:column}
/* Поля тянутся на всю высоту журнала статусов: иначе снизу остаётся
   пустая разлинованная полоса, и бланк выглядит недозаполненным. */
.tkt__fields li{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:var(--s3) var(--s5);min-height:68px}
.tkt__fields li+li{border-top:1px solid var(--rule-2)}
.tkt__fields li[data-state=here]{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.tkt__fk{font:400 var(--t-11)/1 var(--f-data);letter-spacing:.07em;color:var(--muted)}
.tkt__fv{font:600 var(--t-15)/1.3 var(--f-body)}
.tkt__fv a{border:0;color:var(--ink)}
.tkt__fv a:hover{color:var(--accent)}
.tkt__log{list-style:none;margin:0;padding:0;counter-reset:st}
.tkt__st+.tkt__st{border-top:1px solid var(--rule-2)}
.tkt__st a{display:grid;grid-template-columns:54px 92px minmax(0,1fr);grid-template-areas:'code name ttl' 'code name note';
  gap:2px var(--s4);align-items:center;padding:var(--s3) var(--s5);border:0;color:var(--ink)}
.tkt__code{grid-area:code;font:500 var(--t-13)/1 var(--f-data);color:var(--muted)}
.tkt__name{grid-area:name;font:500 var(--t-11)/1 var(--f-data);letter-spacing:.05em;color:var(--muted);
  border:1px solid var(--rule);border-radius:var(--r1);padding:5px 6px;text-align:center;background:var(--sunk)}
.tkt__ttl{grid-area:ttl;font:700 var(--t-17)/1.25 var(--f-display);align-self:end}
.tkt__note{grid-area:note;font:400 var(--t-13)/1.4 var(--f-body);color:var(--muted);align-self:start}
.tkt__st a:hover{background:var(--sunk)}
.tkt__st a:hover .tkt__ttl{color:var(--accent)}
.tkt__st[data-state=here] a{background:color-mix(in srgb,var(--stamp) 8%,transparent)}
.tkt__st[data-state=here] .tkt__name{border-color:var(--stamp);color:var(--stamp);
  background:color-mix(in srgb,var(--stamp) 10%,var(--surface))}
.tkt__st[data-state=here] .tkt__code{color:var(--stamp)}
.tkt__foot{margin:0;padding:var(--s3) var(--s5);border-top:1px solid var(--rule);
  font:400 var(--t-13)/1.5 var(--f-body);color:var(--muted);background:var(--sunk)}

/* корешок в шапке статьи: отрывная часть бланка */
.tkt--stub{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s4);
  padding:var(--s3) var(--s4) var(--s3) var(--s5);margin:0 0 var(--s5);background:var(--sunk);
  border-radius:var(--r1);position:relative;overflow:hidden}
.tkt--stub::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:3px;
  background-image:radial-gradient(circle,var(--rule) 1.4px,transparent 1.5px);
  background-size:3px 8px}
.tkt__sno{font:500 var(--t-12)/1 var(--f-data);color:var(--ink);letter-spacing:.03em}
.tkt__ssub{font:400 var(--t-13)/1.3 var(--f-body);color:var(--muted);flex:1 1 200px;min-width:0}
.tkt__sst{display:inline-flex;align-items:center;gap:var(--s2);border:0;padding:0}
.tkt__sst .tkt__code{font-size:var(--t-11);color:var(--stamp)}
.tkt__sst .tkt__name{border-color:var(--stamp);color:var(--stamp);
  background:color-mix(in srgb,var(--stamp) 10%,var(--surface))}
.tkt__sdate{font:400 var(--t-11)/1 var(--f-data);color:var(--muted);letter-spacing:.05em}
@media (max-width:860px){
  .tkt__bd{grid-template-columns:1fr}
  .tkt__fields{display:none}
  .tkt__st a{grid-template-columns:44px 84px;grid-template-areas:'code name' 'ttl ttl' 'note note';
    gap:var(--s2) var(--s3);padding:var(--s3) var(--s4)}
  .tkt__ttl{font-size:var(--t-15)}
}

/* ---------- разметка страницы ----------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--s7);
  max-width:var(--wrap);margin:0 auto;padding:var(--s6) var(--s5) var(--s8)}
.side{position:sticky;top:74px;align-self:start;max-height:calc(100vh - 94px);overflow:auto;
  padding-right:var(--s2)}
.side__grp+.side__grp{margin-top:var(--s5)}
.side__ttl{display:block;margin-bottom:var(--s2);font:500 var(--t-11)/1 var(--f-data);
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.side__ttl a{color:inherit;border:0}
.side ul{list-style:none;margin:0;padding:0}
.side li a{display:block;padding:5px var(--s3);font-size:var(--t-13);line-height:1.35;
  color:var(--ink);border:0;border-left:2px solid transparent}
.side li a:hover{border-left-color:var(--rule);color:var(--accent)}
.side li a[aria-current]{border-left-color:var(--stamp);color:var(--ink);font-weight:600;
  background:var(--sunk)}
.side__cta{margin-top:var(--s6);padding:var(--s4);background:var(--surface);
  border:1px solid var(--rule);border-top:2px solid var(--accent);border-radius:var(--r1)}
.side__cta-tag{display:block;margin-bottom:var(--s2);color:var(--accent)}
.side__cta-ttl{margin:0 0 var(--s2);font:700 var(--t-17)/1.2 var(--f-display)}
.side__cta-txt{margin:0 0 var(--s3);font-size:var(--t-13);line-height:1.5;color:var(--muted)}
.side__cta .btn{width:100%;padding-left:var(--s3);padding-right:var(--s3)}
.side__cta-fine{display:block;margin-top:var(--s2);font:400 var(--t-11)/1.4 var(--f-data);color:var(--muted)}
@media (max-width:1024px){
  .hdr__in{gap:var(--s3);padding:var(--s3) var(--s4)}
  .searchbtn__t,.searchbtn kbd{display:none}
  .searchbtn{padding:9px 11px}
  .layout{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5) var(--s4) var(--s7)}
  .side{position:static;max-height:none;display:none;order:2}
  .side.is-open{display:block}
  .burger{display:block;margin-left:auto}
  .hdr__nav{display:none}
}

/* ---------- статья ---------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s4)}
.crumbs a,.crumbs span{font:400 var(--t-12)/1 var(--f-data);color:var(--muted);border:0}
.crumbs a:hover{color:var(--accent)}
.crumbs i{font-style:normal;color:var(--rule)}
.art{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r2);
  padding:var(--s6) var(--s7) var(--s7)}
@media (max-width:640px){
  .art{padding:var(--s5) var(--s4) var(--s6);border-left:0;border-right:0;border-radius:0;
    margin:0 calc(-1 * var(--s4))}
}
.art h1{font-size:var(--t-38);max-width:26ch;margin-bottom:var(--s3)}
.art__meta{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;padding-bottom:var(--s5);
  border-bottom:1px solid var(--rule);margin-bottom:var(--s5)}
.art__lead{font-size:var(--t-20);line-height:1.55;max-width:var(--measure);margin:0 0 var(--s6)}
.art h2{font-size:var(--t-24);margin:var(--s7) 0 var(--s3);max-width:32ch;scroll-margin-top:84px;
  padding-top:var(--s3);border-top:1px solid var(--rule-2)}
.art h2:first-of-type{margin-top:var(--s5)}
.art h3{font-size:var(--t-20);margin:var(--s6) 0 var(--s2)}
.art p,.art li{max-width:var(--measure)}
.art p{margin:0 0 var(--s4)}
.art ul:not([class]),.art ol:not([class]){margin:0 0 var(--s5);padding-left:0;list-style:none}
.art ol:not([class]){counter-reset:n}
.art ul:not([class])>li,.art ol:not([class])>li{position:relative;padding-left:26px;margin-bottom:var(--s2)}
.art ul:not([class])>li::before{content:'';position:absolute;left:6px;top:.62em;width:7px;height:1px;
  background:var(--stamp)}
.art ol:not([class])>li::before{counter-increment:n;content:counter(n) '.';position:absolute;left:0;
  font:500 var(--t-13)/1.7 var(--f-data);color:var(--muted)}
.art strong{font-weight:600}

/* таблица данных */
.tw{overflow-x:auto;margin:0 0 var(--s5);border:1px solid var(--rule);border-radius:var(--r1)}
table{border-collapse:collapse;width:100%;font-size:var(--t-15);background:var(--surface)}
th{text-align:left;font:500 var(--t-11)/1.3 var(--f-data);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);
  background:var(--sunk);white-space:nowrap}
td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule-2);vertical-align:top;line-height:1.5}
tr:last-child td{border-bottom:0}

/* шаги */
.steps{list-style:none;margin:0 0 var(--s5);padding:0;counter-reset:s}
.steps>li{position:relative;padding:0 0 var(--s5) var(--s7);border-left:1px solid var(--rule);
  margin-left:14px}
.steps>li:last-child{border-left-color:transparent;padding-bottom:0}
.steps>li::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;
  left:-14px;top:0;width:28px;height:28px;display:grid;place-items:center;
  font:500 var(--t-11)/1 var(--f-data);color:var(--accent);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r1)}
.step__ttl{display:block;font:700 var(--t-17)/1.3 var(--f-display);margin:3px 0 var(--s2)}
.steps p{margin:0 0 var(--s3)}
.steps ul{margin:0 0 var(--s3);padding-left:0;list-style:none}
.steps ul li{position:relative;padding-left:18px;margin-bottom:var(--s1);font-size:var(--t-15)}
.steps ul li::before{content:'';position:absolute;left:2px;top:.65em;width:6px;height:1px;background:var(--rule)}

/* врезки */
.note{margin:0 0 var(--s5);padding:var(--s4) var(--s5);background:var(--sunk);
  border:1px solid var(--rule);border-left:3px solid var(--muted);border-radius:var(--r1)}
.note p{margin:0 0 var(--s2)}
.note p:last-child{margin-bottom:0}
.note__ttl{display:block;font:700 var(--t-15)/1.3 var(--f-display);margin-bottom:var(--s2)}
.note ul{margin:var(--s2) 0 0;padding-left:0;list-style:none}
.note li{position:relative;padding-left:18px;margin-bottom:var(--s1);font-size:var(--t-15)}
.note li::before{content:'';position:absolute;left:2px;top:.65em;width:6px;height:1px;background:var(--rule)}
.note--info{border-left-color:var(--accent)}
.note--warn{border-left-color:var(--warn)}
.note--ok{border-left-color:var(--ok)}
.note--down{border-left-color:var(--bad)}
.note--warn .note__ttl{color:var(--warn)}
.note--ok .note__ttl{color:var(--ok)}
.note--down .note__ttl{color:var(--bad)}

/* заключение: что имеет смысл, а что нет */
.vrd{margin:0 0 var(--s5);border:1px solid var(--rule);border-radius:var(--r1);background:var(--surface)}
.vrd__tag{display:block;padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);background:var(--sunk)}
.vrd__cols{display:grid;grid-template-columns:1fr 1fr}
.vrd__col{padding:var(--s4)}
.vrd__col--yes{border-right:1px solid var(--rule)}
.vrd__hd{display:block;font:500 var(--t-11)/1 var(--f-data);letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:var(--s3)}
.vrd__col--yes .vrd__hd{color:var(--ok)}
.vrd__col--no .vrd__hd{color:var(--bad)}
.vrd ul{list-style:none;margin:0;padding:0}
.vrd li{position:relative;padding-left:22px;margin-bottom:var(--s2);font-size:var(--t-15);line-height:1.45}
.vrd li:last-child{margin-bottom:0}
.vrd__col--yes li::before{content:'+';position:absolute;left:2px;top:0;
  font:500 var(--t-13)/1.5 var(--f-data);color:var(--ok)}
.vrd__col--no li::before{content:'−';position:absolute;left:2px;top:0;
  font:500 var(--t-13)/1.5 var(--f-data);color:var(--bad)}
.vrd__fine{margin:0;padding:var(--s3) var(--s4);border-top:1px solid var(--rule-2);
  font-size:var(--t-13);line-height:1.5;color:var(--muted)}
@media (max-width:640px){
  .vrd__cols{grid-template-columns:1fr}
  .vrd__col--yes{border-right:0;border-bottom:1px solid var(--rule)}
}

/* чек-лист */
.chk{margin:0 0 var(--s5);border:1px solid var(--rule);border-radius:var(--r1);background:var(--surface)}
.chk__hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);background:var(--sunk)}
.chk__cnt{font:500 var(--t-11)/1 var(--f-data);color:var(--muted)}
.chk__list{list-style:none;margin:0;padding:0}
.chk__list li+li{border-top:1px solid var(--rule-2)}
.chk__list label{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);
  cursor:pointer}
.chk__list input{margin:3px 0 0;width:17px;height:17px;accent-color:var(--accent);flex:0 0 auto}
.chk__txt{font-size:var(--t-15);line-height:1.45}
.chk__list li[data-done='1'] .chk__txt{color:var(--muted);text-decoration:line-through;
  text-decoration-color:var(--rule)}
.chk__done{margin:0;padding:var(--s3) var(--s4);border-top:1px solid var(--rule);
  background:color-mix(in srgb,var(--ok) 10%,var(--surface));color:var(--ok);
  font:600 var(--t-13)/1.5 var(--f-body)}
.chk__fine{margin:0;padding:var(--s2) var(--s4) var(--s3);font:400 var(--t-11)/1.5 var(--f-data);
  color:var(--muted)}

/* вопросы */
.faq{margin:0 0 var(--s5);border-top:1px solid var(--rule-2)}
.faq h3{font:700 var(--t-17)/1.35 var(--f-display);margin:var(--s5) 0 var(--s2)}
.faq p{margin:0 0 var(--s3)}

/* строки-переходы */
.rows{list-style:none;margin:0 0 var(--s5);padding:0;border:1px solid var(--rule);border-radius:var(--r1);
  background:var(--surface)}
.rows li+li{border-top:1px solid var(--rule-2)}
.row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:var(--s4);align-items:center;
  padding:var(--s3) var(--s4);border:0;color:var(--ink)}
.row:hover{background:var(--sunk)}
.row__idx{font:500 var(--t-11)/1 var(--f-data);color:var(--muted);letter-spacing:.04em}
.row__ttl{display:block;font:600 var(--t-15)/1.35 var(--f-body)}
.row:hover .row__ttl{color:var(--accent)}
.row__sub{display:block;font-size:var(--t-13);line-height:1.4;color:var(--muted);max-width:64ch}
.row__go{font:400 var(--t-11)/1 var(--f-data);color:var(--muted);white-space:nowrap}
@media (max-width:640px){
  .row{grid-template-columns:44px minmax(0,1fr)}
  .row__go{display:none}
}

/* скриншоты */
.shot{margin:0 0 var(--s5)}
.shot__frame{display:grid;place-items:center;min-height:150px;border:1px dashed var(--rule);
  border-radius:var(--r1);background:
    repeating-linear-gradient(135deg,transparent 0 7px,var(--sunk) 7px 14px)}
.shot__code{font:500 var(--t-12)/1 var(--f-data);color:var(--muted);letter-spacing:.06em}
.shot__cap{margin-top:var(--s2);font-size:var(--t-13);line-height:1.45;color:var(--muted)}
.shot__link{display:block;border:1px solid var(--rule);border-radius:var(--r1);overflow:hidden;position:relative}
.shot__link img{max-height:520px;width:auto;margin:0 auto}
.shot__zoom{position:absolute;right:8px;bottom:8px;font:400 var(--t-11)/1 var(--f-data);
  background:var(--surface);border:1px solid var(--rule);padding:4px 6px;border-radius:var(--r1);
  color:var(--muted)}
.shot__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.shot__part{position:relative}
.shot__part img{max-height:400px;width:auto;margin:0 auto;border:1px solid var(--rule)}
.shot__mark{position:absolute;left:6px;top:6px;font:500 var(--t-11)/1 var(--f-data);
  background:var(--surface);border:1px solid var(--rule);padding:3px 6px;border-radius:var(--r1)}
.shot__partcap{display:block;margin-top:var(--s2);font-size:var(--t-12);color:var(--muted)}
@media (max-width:640px){
  .shot__pair{grid-template-columns:1fr}
  .shot__link img,.shot__part img{max-height:none}
}

/* ---------- предложения ----------------------------------------- */
.trial{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;
  margin:0 0 var(--s6);padding:var(--s4);background:var(--sunk);
  border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:var(--r1)}
.trial__tag{flex:0 0 100%;color:var(--accent)}
.trial__txt{margin:0;flex:1 1 320px;font-size:var(--t-15);line-height:1.5;max-width:none}
.cta{margin:var(--s6) 0;padding:var(--s5);background:var(--surface);border:1px solid var(--rule);
  border-top:2px solid var(--accent);border-radius:var(--r1)}
.cta--diag{border-top-color:var(--stamp)}
.cta__tag{display:block;margin-bottom:var(--s3);color:var(--accent)}
.cta--diag .cta__tag{color:var(--stamp)}
.cta__ttl{margin:0 0 var(--s2);font:700 var(--t-24)/1.2 var(--f-display);max-width:34ch}
.cta p{margin:0 0 var(--s3);max-width:var(--measure)}
.cta__pts{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0 0 var(--s4);padding:0}
.cta__pts li{position:relative;padding-left:18px;font:400 var(--t-13)/1.4 var(--f-body);color:var(--muted);
  max-width:none}
.cta__pts li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--ok)}
.cta__row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center}
.cta__fine{font:400 var(--t-11)/1.4 var(--f-data);color:var(--muted)}
.cta--foot{margin-top:var(--s7)}

/* нижняя панель (телефон) */
.gobar{position:fixed;left:0;right:0;bottom:0;z-index:40;transform:translateY(102%);
  transition:transform .18s ease;background:var(--surface);border-top:1px solid var(--rule)}
.gobar.is-on{transform:none}
.gobar__in{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  max-width:var(--wrap);margin:0 auto}
.gobar__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.gobar__txt b{font:600 var(--t-13)/1.2 var(--f-body)}
.gobar__txt span{font:400 var(--t-11)/1.2 var(--f-data);color:var(--muted)}
.gobar__x{background:transparent;border:0;color:var(--muted);font-size:20px;line-height:1;
  padding:var(--s2);cursor:pointer}
body.has-gobar{padding-bottom:64px}
@media (min-width:861px){.gobar{display:none}}
@media (prefers-reduced-motion:reduce){.gobar{transition:none}}

/* ---------- инструменты ----------------------------------------- */
.tool{margin:0 0 var(--s5);border:1px solid var(--rule);border-radius:var(--r1);background:var(--surface)}
.tool__hd{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);background:var(--sunk)}
.tool__local{color:var(--ok)}
.tool__bd{padding:var(--s4)}
.tool__f{margin-bottom:var(--s3)}
.tool label{display:block;font:500 var(--t-11)/1 var(--f-data);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s2)}
.tool input,.tool textarea,.tool select{width:100%;font:400 var(--t-15)/1.5 var(--f-body);
  color:var(--ink);background:var(--sunk);border:1px solid var(--rule);border-radius:var(--r1);
  padding:9px var(--s3)}
.tool textarea{resize:vertical}
.tool input:focus,.tool textarea:focus,.tool select:focus{outline:2px solid var(--accent);outline-offset:1px}
.tool__row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s3)}
.tool__out:not(:empty){margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule-2)}
.tool__pre{white-space:pre-wrap;font:400 var(--t-13)/1.6 var(--f-body);background:var(--sunk)}
.tool__note{margin:var(--s3) 0 0;font-size:var(--t-13);line-height:1.5;color:var(--muted)}
.kv{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:var(--r1)}
.kv li{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:var(--s3);
  padding:var(--s2) var(--s3);font-size:var(--t-13);line-height:1.45}
.kv li+li{border-top:1px solid var(--rule-2)}
.kv b{font:500 var(--t-11)/1.5 var(--f-data);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* ---------- хвост статьи ---------------------------------------- */
.also{margin:var(--s6) 0 0;padding-top:var(--s4);border-top:1px solid var(--rule)}
.also__list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:var(--s2) var(--s5);margin:var(--s3) 0 0;padding:0}
.also__list li{max-width:none}
.also__list a{font-size:var(--t-15);line-height:1.4}
.helpful{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s6);
  padding-top:var(--s4);border-top:1px solid var(--rule-2)}
.helpful__q{font:400 var(--t-13)/1 var(--f-body);color:var(--muted)}
.helpful__btns{display:flex;gap:var(--s2)}
.helpful button{font:500 var(--t-11)/1 var(--f-data);letter-spacing:.05em;color:var(--ink);
  background:var(--sunk);border:1px solid var(--rule);border-radius:var(--r1);padding:7px 12px;cursor:pointer}
.helpful button:hover{border-color:var(--accent);color:var(--accent)}
.helpful[data-done] .helpful__btns{display:none}
.helpful__thanks{font-size:var(--t-13);color:var(--ok)}

/* ---------- главная и хабы -------------------------------------- */
.hero{max-width:var(--wrap);margin:0 auto;padding:var(--s7) var(--s5) var(--s5)}
.hero__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:var(--s5) var(--s7);
  align-items:end;margin-bottom:var(--s5)}
.hero h1{font-size:var(--t-38);max-width:20ch;margin-bottom:var(--s3)}
.hero__lead{margin:0;font-size:var(--t-17);line-height:1.55;color:var(--muted);max-width:56ch}
.hero__side{padding:var(--s4);border:1px solid var(--rule);border-left:3px solid var(--stamp);
  border-radius:var(--r1);background:var(--surface)}
.hero__side p{margin:var(--s2) 0 0;font-size:var(--t-13);line-height:1.5;color:var(--muted)}
.hero__side .btn{margin-top:var(--s3);width:100%}
@media (max-width:860px){
  .hero{padding:var(--s5) var(--s4)}
  .hero__top{grid-template-columns:1fr}
}
.sect{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5) var(--s7)}
.sect__hd{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline;justify-content:space-between;
  margin:var(--s7) 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.sect__ttl{font:700 var(--t-24)/1.2 var(--f-display)}
.sect__note{font-size:var(--t-13);color:var(--muted);max-width:52ch}
@media (max-width:860px){.sect{padding:0 var(--s4) var(--s6)}}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.card{padding:var(--s4);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r1)}
.card__k{font:500 var(--t-11)/1 var(--f-data);letter-spacing:.06em;color:var(--muted)}
.card__t{display:block;margin:var(--s2) 0;font:700 var(--t-17)/1.25 var(--f-display)}
.card__t a{border:0;color:var(--ink)}
.card__t a:hover{color:var(--accent)}
.card p{margin:0;font-size:var(--t-13);line-height:1.5;color:var(--muted)}
.card ul{list-style:none;margin:var(--s3) 0 0;padding:0}
.card li{margin-bottom:var(--s1);font-size:var(--t-13)}

/* ---------- поиск ------------------------------------------------ */
.sdlg{position:fixed;inset:0;z-index:60;display:none}
.sdlg.is-open{display:block}
.sdlg__bd{position:absolute;inset:0;background:rgba(20,22,28,.42)}
.sdlg__box{position:relative;max-width:640px;margin:9vh auto 0;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r2);overflow:hidden}
.sdlg input{width:100%;font:400 var(--t-17)/1.4 var(--f-body);color:var(--ink);background:var(--surface);
  border:0;border-bottom:1px solid var(--rule);padding:var(--s4) var(--s5)}
.sdlg input:focus{outline:0;border-bottom-color:var(--accent)}
.sres{list-style:none;margin:0;padding:0;max-height:52vh;overflow:auto}
.sres a{display:flex;gap:var(--s4);align-items:baseline;justify-content:space-between;
  padding:var(--s3) var(--s5);border:0;color:var(--ink)}
.sres a.is-sel,.sres a:hover{background:var(--sunk);color:var(--accent)}
.sres__t{font-size:var(--t-15);line-height:1.35}
.sres__p{font:400 var(--t-11)/1 var(--f-data);color:var(--muted);white-space:nowrap}
.sdlg__foot{padding:var(--s2) var(--s5);border-top:1px solid var(--rule);background:var(--sunk);
  font:400 var(--t-11)/1.6 var(--f-data);color:var(--muted)}

/* ---------- подвал ----------------------------------------------- */
.ftr{border-top:1px solid var(--rule);background:var(--surface);margin-top:var(--s7)}
.ftr__in{max-width:var(--wrap);margin:0 auto;padding:var(--s6) var(--s5)}
.ftr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s5)}
.ftr__grid ul{list-style:none;margin:0;padding:0}
.ftr__grid li{margin-bottom:var(--s1)}
.ftr__grid a{font-size:var(--t-13);color:var(--ink);border:0}
.ftr__grid a:hover{color:var(--accent)}
.ftr__disc{margin:var(--s6) 0 0;padding-top:var(--s4);border-top:1px solid var(--rule-2);
  font-size:var(--t-12);line-height:1.6;color:var(--muted);max-width:100ch}
.ftr__bar{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;margin-top:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--rule-2)}
.ftr__bar a{font:400 var(--t-11)/1 var(--f-data);letter-spacing:.05em;color:var(--muted);border:0}
.ftr__bar a:hover{color:var(--accent)}
.ftr__dom{margin-left:auto;font:400 var(--t-11)/1 var(--f-data);letter-spacing:.05em;color:var(--muted)}

@media (prefers-color-scheme:dark){
  .brand__logo-l{display:none}
  .brand__logo-d{display:block}
  .sdlg__bd{background:rgba(8,10,14,.6)}
}

/* ═══ Живая кнопка перехода ═══
   Блик проходит по кнопке раз в пять секунд: на длинной статье он ловит взгляд там,
   где статичная плашка уже стала частью фона. Класс btn--go отдельных стилей раньше
   не имел — кнопка перехода отличалась только разметкой. */
.btn--go{position:relative;overflow:hidden}
.btn--go::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  animation:go-sweep 5s ease-in-out infinite;pointer-events:none}
@keyframes go-sweep{0%{transform:translateX(0)}26%{transform:translateX(420%)}100%{transform:translateX(420%)}}
@media (prefers-reduced-motion:reduce){.btn--go::after{animation:none}}