/* MAXINDEX. Дизайн-система по референсу Apple (DESIGN-4): белый холст и полосы
   #f5f5f7 вместо разделителей, почти монохромная палитра, синий #0071e3 только
   заливкой у главного действия, ссылки #0066cc, кнопки-пилюли, скругление 28 px,
   ноль теней. Заголовки крупные, плотность 600-700, отрицательный трекинг.
   Тема одна, светлая. Масштабы заголовков уменьшены против оригинала: у нас
   рабочий интерфейс с таблицами, а не витрина одного товара. */
:root{
  color-scheme:light;
  --paper:#ffffff;          /* холст страницы */
  --card:#ffffff;           /* поверхность карточки */
  --canvas:#f5f5f7;         /* полоса-фон, она же заменяет разделители */
  --sand:#f5f5f7;           /* вторая поверхность: чипы, мягкие плашки */
  --wash:#e8e8ed;           /* наведение на светлые кнопки */
  --ink:#1d1d1f;            /* основной текст */
  --stone:#707070;          /* вторичный текст */
  --deep:#474747;           /* навигация */
  --blue:#0071e3;           /* только заливка действия */
  --blue-dark:#0062c4;
  --link:#0066cc;           /* текстовые ссылки */
  --magenta:#b64400;        /* единственный тёплый акцент: отрицательные значения, статусы */
  --hair:#d6d6d6;
  --hair-strong:#c9c9cc;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:var(--sans);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-card:18px; --r-panel:28px; --r-btn:980px; --r-pill:999px; --r-nav:12px; --r-sm:10px;
  --s12:12px; --s24:24px; --s48:48px; --s72:80px; --s96:100px;
  --maxw:1200px;
  /* Единая шкала: три уровня заголовков, два уровня текста. Больше нигде
     произвольных размеров: блоки главной различаются отступами, а не кеглем. */
  --t-hero:clamp(40px,5.2vw,64px);
  --t-h2:32px;      /* заголовок секции */
  --t-h3:21px;      /* заголовок карточки внутри секции */
  --t-h4:17px;      /* подзаголовок, имя в списке */
  --t-body:17px;
  --t-small:14px;
  --t-micro:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.47 var(--sans);
  letter-spacing:-.022em;-webkit-font-smoothing:antialiased;font-feature-settings:"numr" 0}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s24)}

/* типографика: заголовки средней плотности, не жирные */
h1,h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,4.6vw,56px);line-height:1.07;letter-spacing:-.028em;margin-bottom:var(--s12)}
h2{font-size:32px;line-height:1.14;letter-spacing:-.012em;margin:var(--s48) 0 var(--s12)}
h3{font-size:21px;line-height:1.24;letter-spacing:-.008em;margin:var(--s24) 0 6px}
p{margin:0 0 var(--s12)}
.lead{font-size:21px;line-height:1.38;letter-spacing:0;color:var(--stone);max-width:60ch}
.muted{color:var(--stone)}.faint{color:var(--stone);opacity:.85}
.mono{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
code{font-family:var(--mono);font-size:.92em;background:var(--sand);padding:1px 6px;border-radius:4px}

/* шапка: белая полоса, 64 px, одна синяя кнопка */
/* Шапка закреплена: полупрозрачный фон, чтобы размытие под ней было видно. */
.top{background:rgba(250,250,252,.82);border-bottom:1px solid var(--hair);
  position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px)}
@supports not (backdrop-filter:blur(1px)){.top{background:#fafafc}}
/* Якорные переходы не должны заезжать под закреплённую шапку. */
:target{scroll-margin-top:72px}
.top .wrap{display:flex;align-items:center;gap:var(--s24);min-height:56px}
.logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;letter-spacing:-.01em;color:var(--ink);font-size:17px}
.logo:hover{text-decoration:none}
.logo .mark{width:22px;height:22px;border-radius:5px;background:var(--blue);display:inline-block;position:relative}
.logo .mark::after{content:"";position:absolute;inset:6px;border:2px solid #fff;border-radius:2px;border-right-color:transparent;border-bottom-color:transparent;transform:rotate(45deg)}
.nav{display:flex;gap:22px;font-size:14px;font-weight:400;align-items:center}
.nav a{color:var(--deep);padding:6px 0}.nav a:hover{text-decoration:none;color:var(--ink)}
.nav.right{margin-left:auto}
.nav a.cta{background:var(--blue);color:#fff;border-radius:var(--r-btn);padding:8px 17px;font-weight:400}
.nav a.cta:hover{background:var(--blue-dark);color:#fff}

/* кнопки: заливка синим только у главного действия */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border:1px solid var(--blue);border-radius:var(--r-btn);background:var(--blue);color:#fff;font:inherit;font-size:17px;font-weight:400;letter-spacing:-.022em;cursor:pointer;white-space:nowrap;line-height:1.24}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(0,0,0,.28)}
.btn.ghost:hover{background:var(--wash);border-color:var(--ink)}
.btn.sm{padding:7px 16px;font-size:14px}

main{padding:var(--s24) 0 var(--s96)}
.crumbs{font-size:14px;color:var(--stone);margin:0 0 var(--s12)}.crumbs a{color:var(--stone)}

/* числа: плоские белые карточки на кремовом холсте */
.kpis{display:grid;gap:var(--s12);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:var(--s24) 0}
.kpi{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:18px var(--s24)}
.kpi b{display:block;font-family:var(--display);font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2}
.kpi span{display:block;color:var(--stone);font-size:14px;margin-top:4px}
.kpi.ok b{color:var(--blue)}.kpi.risk b{color:var(--magenta)}

/* таблицы: волосяные линии, без заливок */
.tbl{overflow-x:auto;margin:var(--s12) 0 var(--s24);background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card)}
table{width:100%;border-collapse:collapse;min-width:600px}
th{text-align:left;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--stone);font-weight:500;padding:12px 16px;border-bottom:1px solid var(--hair);white-space:nowrap}
th.num{text-align:right}
td{padding:14px 16px;border-bottom:1px solid var(--hair);vertical-align:top;font-size:15px}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--paper)}
.nm{font-weight:500}
.ds{color:var(--stone);font-size:14px;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* бейджи доверия: пилюли с контуром */
.badge{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500;border:1px solid;white-space:nowrap;vertical-align:middle;line-height:1.5}
.b-open{color:var(--stone);border-color:var(--hair-strong)}
.b-inn{color:var(--ink);border-color:var(--ink)}
.b-author{color:var(--blue);border-color:var(--blue)}
.b-gos{color:var(--stone);border-color:var(--stone);background:var(--sand)}
.chip{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);font-size:12px;background:var(--sand);color:var(--ink);margin:2px 6px 0 0}
.chip:hover{text-decoration:none;background:var(--hair)}

/* адрес с копированием */
.addr{display:inline-flex;align-items:center;gap:8px}
.addr code{background:var(--sand)}
.cp{padding:3px 10px;border:1px solid var(--hair-strong);border-radius:var(--r-pill);background:var(--card);color:var(--stone);font:inherit;font-size:12px;cursor:pointer}
.cp:hover{color:var(--ink);border-color:var(--ink)}.cp.done{color:var(--blue);border-color:var(--blue)}

/* карточки и сетки: 2 колонки, 24 px между */
.grid{display:grid;gap:var(--s24);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s24)}
.card h3{margin:0 0 8px;font-size:18px}
.card .ds{-webkit-line-clamp:3}
.topics{display:grid;gap:0 var(--s24);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.topics a{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--hair);color:var(--ink);font-weight:500;font-size:15px}
.topics a:hover{text-decoration:none;color:var(--blue)}
.topics a span{color:var(--stone);font-weight:400;font-variant-numeric:tabular-nums;font-size:13px}

/* фильтры */
.filters{display:flex;flex-wrap:wrap;gap:var(--s12);align-items:center;margin:var(--s24) 0 var(--s12)}
.filters input,.filters select{padding:9px 14px;border:1px solid var(--hair-strong);border-radius:var(--r-btn);background:var(--card);color:var(--ink);font:inherit;font-size:14px}
.filters input[type=number]{width:140px}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin:var(--s24) 0}
.pager a,.pager span{padding:8px 16px;border:1px solid var(--hair-strong);border-radius:var(--r-btn);color:var(--ink);font-size:14px}
.pager a:hover{text-decoration:none;background:var(--sand)}
.pager span.cur{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hint{color:var(--stone);font-size:13px;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* разворот карточки: 2 колонки */
.two{display:grid;gap:var(--s24);grid-template-columns:3fr 2fr;align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.box{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s24);margin:0 0 var(--s24)}
.box h2{margin:0 0 var(--s12);font-size:20px}
.box.alt{background:var(--sand);border-color:var(--sand)}
.note{border-left:3px solid var(--blue);padding:14px 18px;background:var(--card);border-radius:var(--r-card);color:var(--ink);font-size:15px;margin:var(--s24) 0}
.cta{display:flex;gap:var(--s12);flex-wrap:wrap;margin:var(--s12) 0 0}

/* главная: разворот «текст слева, витрина справа» */
.hero{display:grid;gap:var(--s72);grid-template-columns:5fr 6fr;align-items:center;padding:var(--s72) 0 var(--s96)}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:var(--s24);padding:var(--s24) 0 var(--s48)}}
.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.1;letter-spacing:-.02em;margin-bottom:var(--s24)}
.hero .lead{font-size:20px;line-height:1.5;margin-bottom:var(--s24)}
.hero .cta{margin-top:var(--s12)}
.hero .search{display:flex;gap:8px;margin-top:var(--s24);max-width:520px}
.hero .search input{flex:1;padding:12px 16px;border:1px solid var(--hair-strong);border-radius:var(--r-btn);background:var(--card);font:inherit;font-size:15px}
.facts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s24);padding:var(--s24) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:0 0 var(--s96)}
.facts div{font-family:var(--display);font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.facts div span{display:block;font-family:var(--sans);font-size:13px;font-weight:400;color:var(--stone);letter-spacing:0;margin-top:2px}
.section{margin:0 0 var(--s96)}
.section>h2{font-size:clamp(26px,3vw,32px);margin:0 0 var(--s12)}
.section>.lead{margin-bottom:var(--s48)}
.solutions{display:grid;gap:var(--s24);grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.solutions{grid-template-columns:1fr}}
.sol{display:grid;grid-template-columns:120px 1fr;gap:var(--s24);background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s24);align-items:start}
.sol .tile{aspect-ratio:1;border-radius:var(--r-card);background:var(--sand);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:28px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.sol h3{margin:0 0 6px;font-size:18px}
.sol p{color:var(--stone);font-size:15px;margin:0 0 10px}
.sol a.more{font-weight:500}
.feature{display:grid;gap:var(--s72);grid-template-columns:1fr 1fr;align-items:center;margin:0 0 var(--s96)}
.feature.flip>div:first-child{order:2}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:var(--s24)}.feature.flip>div:first-child{order:0}}
.feature h2{margin-top:0}
.feature .lead{font-size:18px}
.feature ul{padding-left:20px;color:var(--stone);margin:var(--s12) 0 var(--s24)}
.feature li{margin:6px 0}
.mock{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:var(--s24);overflow:hidden}
.mock .tbl{margin:0;border:none;background:transparent}
.mock table{min-width:0}
.mock td,.mock th{padding:10px 8px}
.mock caption{text-align:left;color:var(--stone);font-size:13px;padding:0 8px var(--s12)}
.mock .kpis{margin:0 0 var(--s12);gap:var(--s12)}
.mock .kpi{padding:12px 16px}.mock .kpi b{font-size:22px}
.hero .mock{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:var(--s24);overflow:hidden}
.hero .mock .tbl{margin:0;border:none;background:transparent}
.hero .mock table{min-width:0}
.hero .mock td,.hero .mock th{padding:10px 8px}
.hero .mock caption{text-align:left;color:var(--stone);font-size:13px;padding:0 8px var(--s12)}
.banner{text-align:center;padding:var(--s72) var(--s24);margin:0;background:var(--card);border:1px solid var(--hair);border-radius:12px}
.banner .icon{width:44px;height:44px;border-radius:12px;background:var(--sand);margin:0 auto var(--s24);display:flex;align-items:center;justify-content:center;color:var(--blue);font-family:var(--display);font-weight:500;font-size:20px}
.banner h2{margin:0 0 var(--s12);font-size:clamp(24px,3vw,32px)}
.banner p{max-width:60ch;margin:0 auto var(--s24);color:var(--stone);font-size:17px}

/* статичные страницы и статьи */
.prose{max-width:68ch;font-size:16px}
.prose h2{margin-top:var(--s48)}
.prose h3{margin-top:var(--s24)}
.prose ul,.prose ol{padding-left:22px}.prose li{margin:6px 0}
.prose table{min-width:0}
.prose .tbl{background:var(--card)}
article.prose table{width:100%;border-collapse:collapse;margin:var(--s12) 0 var(--s24);font-size:15px}
article.prose th{font-weight:500}
article.prose td,article.prose th{border-bottom:1px solid var(--hair);padding:10px 12px;text-align:left}
article.prose td,article.prose th{font-variant-numeric:tabular-nums}
article.prose blockquote{margin:var(--s24) 0;padding-left:18px;border-left:3px solid var(--sand);color:var(--stone)}
.plans{display:grid;gap:var(--s24);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:var(--s24) 0}
.plan{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s24)}
.plan:nth-child(2){background:var(--sand);border-color:var(--sand)}
.plan h3{margin-top:0}
.plan .price{font-family:var(--display);font-size:26px;font-weight:500;margin:6px 0}
.plan ul{padding-left:18px;margin:var(--s12) 0;color:var(--stone);font-size:14px}
.plan ul li{margin:4px 0}
textarea,input[type=text],input[type=search],input[type=email]{font:inherit}
.prose input[type=text],.prose textarea{padding:9px 14px;border:1px solid var(--hair-strong);border-radius:var(--r-card);background:var(--card);color:var(--ink);font:inherit;font-size:15px}

footer{border-top:1px solid var(--hair);color:var(--stone);font-size:14px;padding:var(--s72) 0;margin-top:var(--s72);background:var(--card)}
.fcols{display:grid;gap:var(--s24);grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.fcols{grid-template-columns:repeat(2,1fr)}}
.fcols h4{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);margin:0 0 var(--s12)}
.fcols a{display:block;color:var(--stone);padding:4px 0;font-size:14px}
.fcols a:hover{color:var(--ink);text-decoration:none}
.fbottom{display:flex;flex-wrap:wrap;gap:var(--s12) var(--s48);margin-top:var(--s48);padding-top:var(--s24);border-top:1px solid var(--hair);font-size:13px}
@media (max-width:760px){.top .wrap{flex-wrap:wrap;min-height:auto;padding:var(--s12) var(--s24);gap:var(--s12)}.nav{flex-wrap:wrap;gap:8px 14px}.nav.right{margin-left:0;width:100%}main{padding-top:var(--s12)}h2{margin-top:var(--s24)}.sol{grid-template-columns:88px 1fr}}
@media (prefers-reduced-motion:no-preference){.btn,.nav a,.cp{transition:background-color .15s,color .15s,border-color .15s}}

/* инструмент поиска в развороте: рабочие фильтры каталога */
.tool{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:var(--s24);margin-top:var(--s24)}
.tool .row{display:grid;gap:var(--s12);grid-template-columns:2fr 1fr 1fr auto}
@media (max-width:760px){.tool .row{grid-template-columns:1fr}}
.tool input,.tool select{width:100%;padding:11px 14px;border:1px solid var(--hair-strong);border-radius:var(--r-btn);background:var(--paper);font:inherit;font-size:15px;color:var(--ink)}
.tool .hint{display:block;margin-top:10px}

/* сценарии по ролям: нумерованные шаги со ссылками на экраны */
.flows{display:grid;gap:var(--s24);grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.flows{grid-template-columns:1fr}}
.flow{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s24)}
.flow h3{margin:0 0 6px;font-size:22px}
.flow>p{color:var(--stone);margin:0 0 var(--s24)}
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--hair);counter-increment:step}
.steps li::before{content:counter(step);width:32px;height:32px;border-radius:50%;background:var(--sand);color:var(--ink);font-family:var(--display);font-weight:500;font-size:15px;display:flex;align-items:center;justify-content:center}
.steps b{display:block;font-weight:500;font-size:16px}
.steps span{display:block;color:var(--stone);font-size:14px;margin-top:2px}
.steps a{font-weight:500}
.flow .cta{margin-top:var(--s24)}

/* уровни доверия: три колонки */
.trust{display:grid;gap:var(--s24);grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.trust{grid-template-columns:1fr}}
.trust div{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s24)}
.trust .badge{font-size:13px;padding:4px 12px}
.trust h3{margin:12px 0 6px;font-size:18px}
.trust p{color:var(--stone);font-size:15px;margin:0}
.ico{width:22px;height:22px;stroke:var(--stone);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-5px;margin-right:8px}

/* главная как рабочий каталог: шапка со счётчиками и двумя инструментами */
.head{padding:var(--s48) 0 var(--s24)}
.head h1{font-size:clamp(28px,3.2vw,40px);line-height:1.15;margin:0 0 var(--s24)}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s12);margin-bottom:var(--s24)}
@media (max-width:820px){.counters{grid-template-columns:repeat(2,1fr)}}
.counters div{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:16px 18px}
.counters b{display:block;font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.counters span{display:block;color:var(--stone);font-size:13px;margin-top:2px}
.tools{display:grid;grid-template-columns:3fr 2fr;gap:var(--s12)}
@media (max-width:820px){.tools{grid-template-columns:1fr}}
.tools .tool{margin:0}
.tool .row.two{grid-template-columns:1fr auto}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s24);margin-bottom:var(--s24)}
.sec-head h2{margin:0}
.tabs{display:flex;gap:4px;background:var(--sand);border-radius:var(--r-pill);padding:4px}
.tabs a{padding:7px 16px;border-radius:var(--r-pill);color:var(--ink);font-size:14px;font-weight:500;text-decoration:none}
.tabs a span{color:var(--stone);font-weight:400;margin-left:6px;font-variant-numeric:tabular-nums}
.tabs a.on{background:var(--card)}

/* срезы каталога: четыре колонки списков с числами */
.slices{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s24)}
@media (max-width:1000px){.slices{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.slices{grid-template-columns:1fr}}
.slice{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s24) var(--s24) var(--s12)}
.slice h3{font-size:16px;margin:0 0 10px;display:flex;justify-content:space-between}
.slice h3 span{color:var(--stone);font-weight:400;font-size:13px}
.slice ul{list-style:none;margin:0;padding:0}
.slice li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--hair);font-size:14px}
.slice li a{color:var(--ink);text-decoration:none}
.slice li a:hover{color:var(--blue)}
.slice li em{font-style:normal;color:var(--stone);font-size:12px;margin-left:4px}
.slice li span{color:var(--stone);font-variant-numeric:tabular-nums;white-space:nowrap}
.slice li span.up{color:var(--blue)}

/* топы по темам: карточки с нумерованными списками */
.tops{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s24)}
@media (max-width:1000px){.tops{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tops{grid-template-columns:1fr}}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s48)}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.two-col h2{font-size:22px;margin:0 0 var(--s12)}
.more-row{margin:var(--s12) 0 0;color:var(--stone);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s24)}
.chip{border:1px solid var(--hair-strong);border-radius:var(--r-pill);padding:6px 12px;font-size:13px;color:var(--ink);text-decoration:none;background:var(--card)}
.chip span{color:var(--stone);margin-left:4px;font-variant-numeric:tabular-nums}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on span{color:#d6d1c9}
.tool .hint{font-family:var(--sans);font-size:13px;color:var(--stone)}
/* названия тем в базе строчными; в списках показываем с заглавной */
.slice li a,.top h3 a,.topics a{display:inline-block}
.slice li a::first-letter,.top h3 a::first-letter,.topics a::first-letter{text-transform:uppercase}
.steps li span{grid-column:2}
.two-col .tbl table{min-width:0;width:100%}
.two-col td,.two-col th{padding:10px 12px}

/* кабинет: сделки, формы, подборки */
.pill{display:inline-block;border-radius:var(--r-pill);padding:4px 12px;font-size:13px;font-weight:500;border:1px solid var(--hair-strong);color:var(--stone);font-family:var(--sans);vertical-align:middle}
.pill.s-new,.pill.s-accepted,.pill.s-paid,.pill.s-published{color:var(--ink);border-color:var(--ink)}
.pill.s-done{color:#fff;background:var(--blue);border-color:var(--blue)}
.pill.s-disputed{color:var(--magenta);border-color:var(--magenta)}
.form label{display:block;margin:0 0 14px;font-size:14px;color:var(--stone)}
.form label span{display:block;font-size:13px;margin-top:4px}
.form input[type=text],.form input[type=url],.form input[type=date],.form input[type=email],.form textarea,.form select{display:block;width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--hair-strong);border-radius:8px;background:var(--paper);font:inherit;font-size:15px;color:var(--ink)}
.form .radio{display:flex;gap:16px;flex-wrap:wrap}
.form .radio label{display:flex;gap:8px;align-items:center;color:var(--ink);margin:0}
.form .btn{margin-top:6px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:132px 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--hair);font-size:14px}
.timeline .ts{color:var(--stone);font-variant-numeric:tabular-nums;white-space:nowrap}
.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.crumbs form{display:inline}
.crumbs .cp{vertical-align:baseline;margin-left:6px}

/* карточка канала: шапка, график, скоркарта */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s24);flex-wrap:wrap;margin-bottom:var(--s12)}
.page-head h1{margin-bottom:6px}
.page-head .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.head-cta{margin-top:6px}
.chartbox{margin:var(--s24) 0}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.chart-head h2{margin:0 0 8px}
svg.chart{width:100%;height:150px;display:block;margin-top:8px}
svg.chart .area{fill:var(--blue);opacity:.08}
svg.chart .line{stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke}
svg.chart .dot{fill:var(--card);stroke:var(--blue);stroke-width:1.5;vector-effect:non-scaling-stroke}
svg.chart .dot.last{fill:var(--blue)}
.chart-legend{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-top:6px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.checks{list-style:none;margin:0 0 var(--s12);padding:0}
.checks li{display:grid;grid-template-columns:18px 130px 1fr;gap:12px;padding:11px 0;border-top:1px solid var(--hair);font-size:14.5px;align-items:baseline}
@media(max-width:640px){.checks li{grid-template-columns:18px 1fr}.checks .tx{grid-column:2}}
.checks .st{width:10px;height:10px;border-radius:50%;position:relative;top:1px}
.checks .c-ok .st{background:var(--blue)}
.checks .c-warn .st{background:var(--magenta)}
.checks .c-off .st{background:transparent;border:2px solid var(--hair-strong)}
.checks b{font-weight:500}
.checks .tx{color:var(--stone)}
.checks .c-warn .tx{color:var(--ink)}

/* скринер: фильтры слева, спарклайны в строках */
.cat-layout{display:grid;grid-template-columns:230px 1fr;gap:var(--s24);align-items:start;margin-top:var(--s12)}
@media(max-width:860px){.cat-layout{grid-template-columns:1fr}}
.cat-filters{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:16px;position:sticky;top:12px}
.cat-filters label{display:block;font-size:13px;color:var(--stone);margin-bottom:12px}
.cat-filters input,.cat-filters select{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--hair-strong);border-radius:8px;background:var(--paper);font:inherit;font-size:14px;color:var(--ink)}
.cat-filters .range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cat-filters .btn{width:100%;margin-top:4px}
.cat-filters .reset{display:block;text-align:center;font-size:13px;margin-top:10px}
.cat-main{min-width:0}
.chip2{display:inline-block;border:1px solid var(--hair-strong);border-radius:var(--r-pill);padding:6px 14px;font-size:13.5px;color:var(--ink);text-decoration:none;background:var(--card);margin:0 6px 8px 0}
.chip2.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip2:hover{border-color:var(--ink)}
td.dyn{white-space:nowrap}
svg.spark{width:96px;height:26px;vertical-align:middle;margin-right:8px}
svg.spark polyline{stroke:var(--blue);stroke-width:1.6;vector-effect:non-scaling-stroke}
.dv{font-size:13px;color:var(--blue);font-variant-numeric:tabular-nums}
.dv.down{color:var(--magenta)}
td.rowact a.cp{text-decoration:none}
.faint{color:var(--hair-strong)}
.cat-main .tbl table{min-width:760px}
.cat-main .ds{max-width:340px}
.cat-main .nm{display:inline-block;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
td.rowact{width:36px}
td.rowact .cp{font-size:16px;padding:2px 10px}

/* шапка с поиском, герой главной */
.hsearch{flex:1;max-width:340px;margin:0 16px}
.hsearch input{width:100%;padding:9px 14px;border:1px solid var(--hair-strong);border-radius:var(--r-pill);background:var(--paper);font:inherit;font-size:14px;color:var(--ink)}
@media(max-width:900px){.hsearch{display:none}}
.hero2{padding:var(--s48) 0 var(--s24);max-width:820px}
.hero2 h1{font-size:clamp(30px,3.6vw,44px);line-height:1.12;margin:0 0 12px}
.hero2 .lead{font-size:18px;margin:0 0 var(--s24)}
.hero2 form{display:flex;gap:10px;max-width:640px}
.hero2 input{flex:1;padding:13px 18px;border:1px solid var(--hair-strong);border-radius:var(--r-btn);background:var(--card);font:inherit;font-size:16px;color:var(--ink)}
.hero2 .alt{margin-top:12px;font-size:14px;color:var(--stone)}
.screener{margin:var(--s24) 0 var(--s48)}
.facts2{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s24);margin:var(--s48) 0}
@media(max-width:820px){.facts2{grid-template-columns:1fr}}
.facts2 div{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:20px 22px}
.facts2 b{display:block;font-family:var(--display);font-weight:500;font-size:19px;margin-bottom:6px}
.facts2 span{color:var(--stone);font-size:14.5px}
.author-cta{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:var(--s48);display:grid;grid-template-columns:3fr 2fr;gap:var(--s48);align-items:center;margin:var(--s48) 0}
@media(max-width:820px){.author-cta{grid-template-columns:1fr;padding:var(--s24)}}
.author-cta h2{margin:0 0 10px}
.mini-dash{background:var(--paper);border:1px solid var(--hair);border-radius:8px;padding:18px}
.mini-dash .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--hair);font-size:14px}
.mini-dash .row:first-child{border-top:0}
.mini-dash b{font-variant-numeric:tabular-nums}
.linkcols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s24);margin:var(--s48) 0}
@media(max-width:1000px){.linkcols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.linkcols{grid-template-columns:1fr}}
.linkcols h3{font-size:15px;margin:0 0 8px}
.linkcols ul{list-style:none;margin:0;padding:0;font-size:14px}
.linkcols li{padding:4px 0}
.linkcols a{color:var(--stone);text-decoration:none}
.linkcols a:hover{color:var(--blue)}
.linkcols .n{color:var(--hair-strong);margin-left:6px;font-variant-numeric:tabular-nums}

/* шапка: разделы индекса, моя работа, аккаунт, мобильное меню */
.nav.mine{margin-left:auto}
.nav.mine a{display:inline-flex;align-items:center;gap:6px}
.cnt{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sand);color:var(--stone);font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums}
.cnt.hot{background:var(--blue);color:#fff}
.acct{position:relative}
.acct>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid var(--hair-strong);border-radius:var(--r-pill);font-size:14px;font-weight:500;white-space:nowrap}
.acct>summary::-webkit-details-marker{display:none}
.acct>summary:hover{border-color:var(--ink)}
.acct .chev{width:6px;height:6px;border-right:1.5px solid var(--stone);border-bottom:1.5px solid var(--stone);transform:rotate(45deg);margin-top:-3px}
.acct[open]>summary{border-color:var(--ink)}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:8px;z-index:40;box-shadow:0 8px 24px rgba(30,25,25,.10)}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink);text-decoration:none;background:none;border:0;font:inherit;font-size:14px;cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--sand)}
.menu .who{display:block;padding:6px 12px 10px;font-size:12.5px;color:var(--stone);border-bottom:1px solid var(--hair);margin-bottom:6px;word-break:break-all}
.menu .sep{display:block;padding:12px 12px 6px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.burger{display:none;position:relative;margin-left:auto}
.burger>summary{list-style:none;cursor:pointer;width:38px;height:38px;border:1px solid var(--hair-strong);border-radius:10px;display:flex;align-items:center;justify-content:center}
.burger>summary::-webkit-details-marker{display:none}
.burger>summary span,.burger>summary span::before,.burger>summary span::after{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.burger>summary span::before{content:"";position:absolute;top:-5px}
.burger>summary span::after{content:"";position:absolute;top:5px}
@media(max-width:1080px){
  .nav.mine a{font-size:13.5px}
  .hsearch{max-width:220px;margin:0 10px}
}
@media(max-width:900px){
  .top .nav,.acct{display:none}
  .burger{display:block}
  .hsearch{display:block;max-width:none;flex:1;margin:0 12px}
}
@media(max-width:560px){.hsearch{display:none}}
.strip{background:var(--sand);border-bottom:1px solid var(--hair);text-align:center;padding:9px 16px;font-size:14px}
.strip a{font-weight:500}
.add-list.done{color:var(--blue);border-color:var(--blue)}
td.rowact{width:auto;white-space:nowrap}
td.rowact .cp{font-size:12.5px;padding:4px 10px}
ul.plain{list-style:none;margin:0 0 var(--s12);padding:0}
ul.plain li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--hair);font-size:14.5px}
ul.plain li:first-child{border-top:0}
.page-head .meta.muted{font-size:14px}
.fallback summary{cursor:pointer;font-weight:500;font-family:var(--display)}
.fallback summary::marker{color:var(--stone)}
.fallback[open] summary{margin-bottom:10px}
ul.tick{list-style:none;margin:0 0 var(--s12);padding:0}
ul.tick li{position:relative;padding:5px 0 5px 24px;font-size:14.5px}
ul.tick li::before{content:"";position:absolute;left:2px;top:12px;width:9px;height:5px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}

/* главная в логике каталога рынка: заголовок, панели, рейтинги в три колонки */
.lead-block{text-align:center;padding:var(--s48) 0 var(--s24)}
.lead-block h1{font-size:clamp(28px,3.4vw,40px);line-height:1.15;margin:0 auto var(--s24);max-width:20ch}
.bignums{display:flex;justify-content:center;gap:var(--s72);flex-wrap:wrap;margin-bottom:var(--s24)}
.bignums b{display:block;font-family:var(--display);font-weight:500;font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bignums span{display:block;color:var(--stone);font-size:13.5px;margin-top:2px}
.bigsearch{display:flex;gap:10px;max-width:620px;margin:0 auto}
.bigsearch input{flex:1;padding:13px 18px;border:1px solid var(--hair-strong);border-radius:var(--r-btn);background:var(--card);font:inherit;font-size:16px;color:var(--ink)}
.added{color:var(--stone);font-size:13.5px;margin:var(--s12) 0 0}
.added b{color:var(--ink);font-variant-numeric:tabular-nums}

.panel{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:var(--s24);margin:var(--s24) 0}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s24);flex-wrap:wrap;margin-bottom:var(--s12)}
.panel-head h2{margin:0;font-size:22px}
.panel-head h2 a{color:var(--ink);text-decoration:none}
.panel-head .muted{font-size:14px;margin:4px 0 0}
.slice-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--hair);padding-bottom:var(--s12);margin-bottom:var(--s12)}
.slice-tabs .st{display:inline-flex;gap:6px;align-items:baseline;padding:6px 12px;border-radius:8px;font-size:14px;color:var(--stone);text-decoration:none}
.slice-tabs .st b{font-weight:500;color:var(--ink);font-size:12.5px;font-variant-numeric:tabular-nums}
.slice-tabs .st.on{background:var(--sand);color:var(--ink)}
.slice-tabs a.st:hover{background:var(--sand)}
.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 24px}
@media(max-width:900px){.topic-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.topic-grid{grid-template-columns:1fr}}
.topic-grid a{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.topic-grid a:hover span{color:var(--blue)}
.topic-grid b{color:var(--stone);font-weight:400;font-variant-numeric:tabular-nums}

/* Каталог категорий: группы тем на /temy/ */
.tgroups{display:flex;flex-direction:column;gap:var(--s28)}
.tgroup h2{margin:0 0 var(--s12);font-size:var(--t-h4)}
.tgroup .topic-grid{gap:2px 24px}

.showcases{display:grid;grid-template-columns:1fr 1fr;gap:var(--s24)}
@media(max-width:900px){.showcases{grid-template-columns:1fr}}
.showcases .panel{margin:0}
.chan-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
@media(max-width:640px){.chan-grid{grid-template-columns:1fr}}
.chan{display:flex;align-items:center;gap:10px;padding:8px 0;text-decoration:none;min-width:0}
.chan .t{display:flex;flex-direction:column;min-width:0}
.chan b{font-weight:500;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chan .muted{font-size:12.5px}
.chan:hover b{color:var(--blue)}
.ava{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--sand)}
.chan .ava{width:40px;height:40px}
.mono-ava{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:500;font-size:14px;color:var(--stone)}
.chan .mono-ava{font-size:17px}

.rank3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s24)}
@media(max-width:1000px){.rank3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.rank3{grid-template-columns:1fr}}
.rank{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:var(--s24) var(--s24) var(--s12)}
.rank-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.rank-head h3{margin:0;font-size:18px}
.rank-head .per{font-size:12.5px;color:var(--stone)}
.rank ol{list-style:none;margin:0;padding:0}
.rank li{display:grid;grid-template-columns:18px 32px 1fr auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--hair)}
.rank li:first-child{border-top:0}
.rank .n{color:var(--stone);font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
.rank .t{display:flex;flex-direction:column;min-width:0}
.rank .t a{font-size:14px;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .t a:hover{color:var(--blue)}
.rank .t .muted{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .v{font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--stone)}
.rank .v.up{color:var(--blue)}
.rank .more{display:inline-block;margin-top:10px;font-weight:500;font-size:14px}

/* переключатель срезов каталога: содержимое меняется на месте, без перехода */
.switcher>input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.switcher .slice-body{display:none}
.switcher #sl-topics:checked~#body-topics,
.switcher #sl-regions:checked~#body-regions,
.switcher #sl-sizes:checked~#body-sizes{display:block}
.slice-tabs .st{cursor:pointer;user-select:none}
.switcher #sl-topics:checked~.slice-tabs label[for=sl-topics],
.switcher #sl-regions:checked~.slice-tabs label[for=sl-regions],
.switcher #sl-sizes:checked~.slice-tabs label[for=sl-sizes]{background:var(--sand);color:var(--ink)}
.switcher input:focus-visible~.slice-tabs label{outline:2px solid var(--blue);outline-offset:2px}
.topic-grid em{font-style:normal;font-size:12px}

/* верифицированные каналы и популярные публикации */
.chan-grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.chan-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.chan-grid.four{grid-template-columns:1fr}}
.chan .vmark{margin-left:auto;padding:1px 7px;font-size:11px}
.empty{background:var(--paper);border:1px dashed var(--hair-strong);border-radius:var(--r-card);padding:var(--s24);text-align:center}
.empty p{max-width:70ch;margin:0 auto var(--s12);color:var(--stone)}
.empty p b{color:var(--ink)}
.empty .cta{justify-content:center}
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s12) var(--s24)}
@media(max-width:820px){.posts{grid-template-columns:1fr}}
.post{border-top:1px solid var(--hair);padding:14px 0}
.post .ph{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px}
.post .ph .nm{font-weight:500}
.post .pt{margin:0 0 8px;font-size:14.5px;color:var(--ink)}
.post .pf{display:flex;gap:14px;font-size:13px;align-items:center}
.post .pf .v{color:var(--blue);font-variant-numeric:tabular-nums}


/* ── Слой Apple-системы: полосы вместо разделителей, крупные скругления,
      плоские поверхности. Идёт последним и приводит компоненты к референсу. ── */

/* Полоса на всю ширину: ритм задаёт чередование белого и #f5f5f7. */

.band+.band{margin-top:0}
.band>*:first-child{margin-top:0}
.band>*:last-child{margin-bottom:0}

/* Карточки и панели: без теней, крупный радиус, граница только там,
   где поверхность совпадает с фоном. */
.panel{border-radius:var(--r-panel);border:0;background:var(--card);padding:var(--s48) var(--s48) var(--s40,40px)}
.band .panel{background:var(--card)}
.box,.rank,.card,.plan,.kpi,.slice,.top-card,.flow,.cardx{border-radius:var(--r-card);box-shadow:none}
.box,.card,.flow{border:1px solid var(--hair)}
.rank{border:0;background:var(--canvas);padding:var(--s24) var(--s24) var(--s12)}
.band .rank{background:var(--card)}
.kpi{border:0;background:var(--canvas);padding:20px 22px}
.kpi b{font-size:32px;font-weight:600;letter-spacing:-.012em}
.kpi span{font-size:14px}
.author-cta{border-radius:var(--r-panel);border:0;background:var(--canvas);padding:var(--s72) var(--s48)}
.mini-dash{background:var(--card);border:0;border-radius:var(--r-card);padding:20px 22px}
.empty{border:0;background:var(--canvas);border-radius:var(--r-card);padding:var(--s48) var(--s24)}
.note{border-radius:var(--r-card);border:0;border-left:3px solid var(--blue);background:var(--canvas)}
.box.alt,.plan.alt{background:var(--canvas);border-color:transparent}

/* Таблицы: контейнер без рамки, строки разделены волосяной линией. */
.tbl{border-radius:var(--r-card);overflow:hidden;border:0;background:var(--card)}
.tbl table{border:0;background:transparent;font-size:15px;letter-spacing:-.01em}
.tbl th{background:transparent;border-bottom:1px solid var(--hair);color:var(--stone);
  font-size:12px;font-weight:400;letter-spacing:.01em;text-transform:none;padding:12px 14px}
.tbl td{border-bottom:1px solid #ededf0;padding:13px 14px}
.tbl tr:last-child td{border-bottom:0}
.band .tbl,.panel .tbl{background:transparent}

/* Ссылки и действия. */
a.nm{color:var(--ink);font-weight:500}
a.nm:hover{color:var(--link)}
.more,.more-row a{color:var(--link)}
.more::after,.more-row a::after{content:" ›";font-weight:400}
.cta{gap:14px}

/* Заголовки главной: крупный набор с плотным трекингом. */
.lead-block{padding:var(--s96) 0 var(--s72)}
.lead-block h1{font-size:clamp(40px,5.4vw,72px);line-height:1.05;letter-spacing:-.035em;max-width:18ch}
.bignums{gap:var(--s96)}
.bignums b{font-size:44px;font-weight:600;letter-spacing:-.02em}
.bignums span{font-size:14px;color:var(--stone)}
.bigsearch input{border-radius:var(--r-btn);border:1px solid var(--hair);background:var(--canvas);font-size:17px;padding:14px 22px}
.bigsearch input:focus{outline:none;border-color:var(--ink);background:var(--card)}
.added{font-size:14px}

/* Чипы, бейджи, вкладки: пилюли без обводки. */
.badge{border-radius:var(--r-pill);border:0;background:var(--canvas);color:var(--deep);font-weight:400;font-size:12px;padding:4px 11px}
.badge.b-author{background:rgba(0,113,227,.1);color:var(--blue)}
.badge.b-gos{background:rgba(182,68,0,.1);color:var(--magenta)}
.chip,.chip2{border-radius:var(--r-pill);border:0;background:var(--canvas);color:var(--ink);font-size:14px;padding:8px 16px}
.chip2.on{background:var(--ink);color:#fff}
.tabs{background:var(--canvas);border-radius:var(--r-pill);padding:4px}
.tabs a{border-radius:var(--r-pill);font-weight:400}
.tabs a.on{background:var(--card)}
.slice-tabs{border-bottom:1px solid var(--hair)}
.slice-tabs .st{border-radius:var(--r-sm);font-size:15px}

/* Фильтры каталога: поля с мягкими скруглениями на светлой подложке. */
.cat-filters{border:0;background:var(--canvas);border-radius:var(--r-card);padding:20px}
.cat-filters input,.cat-filters select,.tool input,.tool select,.form input,.form textarea,.form select,.filters input,.filters select{
  border-radius:var(--r-sm);border:1px solid var(--hair);background:var(--card);font-size:15px}
.hsearch input{border-radius:var(--r-pill);background:var(--canvas);border:1px solid transparent;font-size:14px}
.hsearch input:focus{outline:none;border-color:var(--hair-strong);background:var(--card)}

/* Графики и мелкие детали. */
svg.chart .area{fill:var(--blue);opacity:.07}
svg.chart .line{stroke:var(--blue)}
svg.spark polyline{stroke:var(--blue)}
.dv,.rank .v.up,.post .pf .v{color:var(--blue)}
.dv.down{color:var(--magenta)}
.checks .c-ok .st{background:var(--blue)}
.checks .c-warn .st{background:var(--magenta)}
.ava{border-radius:50%}
.mono-ava{background:var(--canvas)}
footer{background:var(--canvas);border-top:0}
.fbottom{font-size:12px;color:var(--stone)}
.menu{border-radius:var(--r-card);border:1px solid var(--hair);box-shadow:0 8px 30px rgba(0,0,0,.08)}
.strip{background:var(--canvas);border-bottom:0}

/* Рейтинги по образцу: крупная иконка с номером, зебра строк, значение справа. */
.rank2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s24)}
@media(max-width:900px){.rank2{grid-template-columns:1fr}}
.rank2 .rank{padding:var(--s24) var(--s24) 18px}
.rank2 .rank-head{margin-bottom:14px}
.rank2 .rank-head h3{font-size:24px;letter-spacing:-.012em}
.rank-list{list-style:none;margin:0;padding:0}
.rank-list li{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;
  padding:10px 12px;border:0;border-radius:var(--r-sm)}
.rank-list li:nth-child(odd){background:var(--canvas)}
.band .rank-list li:nth-child(odd){background:#fafafc}
.rank-list .pic{position:relative;width:48px;height:48px}
.rank-list .pic .ava{width:48px;height:48px}
.rank-list .pic .mono-ava{width:48px;height:48px;font-size:19px}
.rank-list .pic i{position:absolute;left:-4px;bottom:-2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--card);color:var(--stone);font:500 11px/16px var(--sans);
  font-style:normal;text-align:center;font-variant-numeric:tabular-nums;border:1px solid var(--hair)}
.rank-list .t{display:flex;flex-direction:column;min-width:0;gap:2px}
.rank-list .t a{font-size:17px;font-weight:500;letter-spacing:-.018em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-list .t a:hover{color:var(--link);text-decoration:none}
.rank-list .t .muted{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-list .v{font-size:19px;font-weight:500;letter-spacing:-.015em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-list .v.grow{color:#248a3d}   /* семантика роста, а не второй акцент палитры */


/* ── Единая шкала на главной: одинаковые заголовки, подписи и строки списков ── */
.lead-block h1{font-size:var(--t-hero)}
.panel>.panel-head h2,.section>.sec-head h2,.section>h2{font-size:var(--t-h2);line-height:1.14;letter-spacing:-.014em;margin:0}
.panel-head .muted,.sec-sub{font-size:var(--t-body);color:var(--stone);margin:6px 0 0;max-width:70ch}
.section>.lead{font-size:var(--t-body);margin:6px 0 var(--s24)}
.rank2 .rank-head h3,.panel h3,.top h3,.rank h3{font-size:var(--t-h3);line-height:1.24;letter-spacing:-.01em}
.rank-head .per{font-size:var(--t-small)}

/* Списки каналов: одна плотность в рейтингах, верифицированных и публикациях. */
.rank-list li{grid-template-columns:40px 1fr auto;gap:12px;padding:9px 10px}
.rank-list .pic,.rank-list .pic .ava,.rank-list .pic .mono-ava{width:40px;height:40px}
.rank-list .pic .mono-ava{font-size:16px}
.rank-list .t a{font-size:var(--t-h4);font-weight:500}
.rank-list .t .muted{font-size:var(--t-small)}
.rank-list .v{font-size:var(--t-h4);font-weight:500}
.chan .ava,.chan .mono-ava{width:40px;height:40px}
.chan b{font-size:var(--t-h4);font-weight:500}
.chan .muted{font-size:var(--t-small)}
.post .ph{font-size:var(--t-small)}
.post .ph .nm{font-size:var(--t-h4)}
.post .pt{font-size:var(--t-body);line-height:1.4}
.post .pf{font-size:var(--t-small)}
.topic-grid a{font-size:var(--t-body)}
.topic-grid b{font-size:var(--t-small)}
.linkcols h3{font-size:var(--t-h4)}
.linkcols ul,.linkcols a{font-size:var(--t-small)}
.bignums b{font-size:40px}
.added{font-size:var(--t-small)}

/* Ритм: одинаковые отступы у всех секций главной. */
.lead-block{padding:var(--s72) 0 var(--s48)}

.section{margin:var(--s72) 0}
.panel{padding:var(--s48)}
.panel+.panel{margin-top:var(--s24)}
.author-cta{padding:var(--s48);margin:var(--s72) 0}
.author-cta h2{font-size:var(--t-h2);line-height:1.14}
.linkcols{margin:var(--s72) 0 0;padding-top:var(--s48);border-top:1px solid var(--hair)}

/* Переключатели периода в шапке карточки рейтинга. */
.rank-head{gap:var(--s12);flex-wrap:wrap}
.per-tabs{display:flex;gap:4px;background:var(--canvas);border-radius:var(--r-pill);padding:3px;margin-left:auto}
.band .per-tabs,.rank .per-tabs{background:#eeeef1}
.per-tabs label{padding:5px 12px;border-radius:var(--r-pill);font-size:13px;color:var(--deep);cursor:pointer;white-space:nowrap;user-select:none}
.per-tabs label:hover{color:var(--ink)}
.rank>input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.rank .pset{display:none}
.rank .pset.empty-note{padding:14px 10px;color:var(--stone);font-size:var(--t-small)}
/* Вкладки типа в каталоге и переключение наборов рейтинга. */
.tabs.kind-tabs{display:inline-flex;margin-bottom:var(--s24)}
.tabs.kind-tabs label{padding:8px 18px;border-radius:var(--r-pill);font-size:var(--t-small);color:var(--deep);cursor:pointer;user-select:none;display:inline-flex;gap:7px;align-items:baseline}
.tabs.kind-tabs label span{color:var(--stone);font-variant-numeric:tabular-nums;font-size:13px}
.switcher .kind-body{display:none}
.switcher #k-ch:checked~#kb-ch,.switcher #k-bot:checked~#kb-bot,.switcher #k-price:checked~#kb-price{display:block}
.switcher #k-ch:checked~.kind-tabs label[for=k-ch],
.switcher #k-bot:checked~.kind-tabs label[for=k-bot],
.switcher #k-price:checked~.kind-tabs label[for=k-price]{background:var(--card);color:var(--ink)}
.band .tabs.kind-tabs{background:var(--canvas)}
.rank #gp-d1:checked~#ps-gp-d1,.rank #gp-d7:checked~#ps-gp-d7,.rank #gp-d30:checked~#ps-gp-d30,
.rank #vw-24h:checked~#ps-vw-24h,.rank #vw-7d:checked~#ps-vw-7d,.rank #vw-30d:checked~#ps-vw-30d{display:block}
.rank #gp-d1:checked~.rank-head label[for=gp-d1],.rank #gp-d7:checked~.rank-head label[for=gp-d7],
.rank #gp-d30:checked~.rank-head label[for=gp-d30],.rank #vw-24h:checked~.rank-head label[for=vw-24h],
.rank #vw-7d:checked~.rank-head label[for=vw-7d],.rank #vw-30d:checked~.rank-head label[for=vw-30d]{background:var(--card);color:var(--ink);font-weight:500}
.price-tag{margin-left:auto;font-size:var(--t-small);font-weight:500;color:var(--ink);white-space:nowrap}


/* ── Первый экран: каталог должен быть виден без прокрутки ──
   Шапка 56 + заголовок + числа + поиск укладываются примерно в 400 px,
   дальше сразу начинается полоса с каталогом. Пропорции по telemetr. */
.lead-block{padding:var(--s48) 0 var(--s24)}
.lead-block h1{font-size:clamp(28px,3.6vw,44px);line-height:1.1;margin:0 auto 20px;max-width:26ch}
.bignums{gap:var(--s48);margin-bottom:20px}
.bignums b{font-size:30px;line-height:1.1}
.bignums span{font-size:13px;margin-top:1px}
.bigsearch input{padding:11px 18px;font-size:16px}
.bigsearch .btn{padding:11px 22px}
.added{margin-top:10px;font-size:13px}

.panel{padding:var(--s24) var(--s48) var(--s48)}
.panel-head{margin-bottom:16px}
@media(max-width:820px){
  .lead-block{padding:var(--s24) 0}
  .bignums{gap:var(--s24)}
  .bignums b{font-size:24px}
}

/* Заголовок набирается в две строки: SEO-фраза сохраняется целиком,
   но не отжимает каталог за пределы первого экрана. */
.lead-block{padding:40px 0 20px}
.lead-block h1{font-size:clamp(26px,3vw,38px);line-height:1.12;max-width:34ch;margin-bottom:18px}
.bignums{gap:56px;margin-bottom:18px}


/* Ничто не должно выходить за ширину экрана: полосы во всю ширину и центрированный
   заголовок легко дают горизонтальную прокрутку на телефоне. */
html,body{overflow-x:clip;max-width:100%}
.lead-block h1{max-width:min(34ch,100%)}
/* Пилюля с вкладками шире экрана телефона: html обрезает переполнение,
   поэтому последняя вкладка стала бы недостижимой. Переносим по строкам. */
.sec-head{flex-wrap:wrap}
.tabs{flex-wrap:wrap}
.bigsearch{max-width:100%;flex-wrap:wrap}
.bigsearch input{min-width:0}
@media(max-width:640px){
  .lead-block{padding:28px 0 16px}
  .lead-block h1{font-size:24px;line-height:1.15;margin-bottom:14px}
  .bignums{gap:20px;margin-bottom:14px}
  .bignums b{font-size:22px}
  .bignums span{font-size:12px}
  .bigsearch{flex-direction:column;gap:8px}
  .bigsearch input,.bigsearch .btn{width:100%}
  .bigsearch .btn{justify-content:center}
  .panel{padding:20px 16px 24px}
  
  .panel-head h2,.section>.sec-head h2{font-size:24px}
  .tabs.kind-tabs{width:100%;overflow-x:auto;justify-content:flex-start}
  .slice-tabs{overflow-x:auto;flex-wrap:nowrap}
  .slice-tabs .st{white-space:nowrap}
}

/* Полоса во всю ширину: фон рисуется псевдоэлементом, геометрия контента не меняется.
   Прежний вариант с отрицательными полями и процентным padding сдвигал содержимое
   вправо на узких экранах, потому что проценты считаются от родителя, а не от окна. */
.band{position:relative;z-index:0;background:transparent;padding:40px 0 var(--s72);margin:0}
.band::before{content:"";position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;
  background:var(--canvas);z-index:-1}
@media(max-width:640px){.band{padding:24px 0 40px}}
.cellname{display:inline-flex;align-items:center;gap:10px;min-width:0}
.cellname .ava,.cellname .mono-ava{width:32px;height:32px;flex:0 0 auto}
.chip2.sm{padding:5px 13px;font-size:13.5px}
mark{background:rgba(0,113,227,.16);color:inherit;border-radius:3px;padding:0 2px}
/* Разделов стало больше: сжимаем интервалы и поиск, чтобы шапка держалась в одну строку. */
.top .nav{gap:16px}
.top .nav a{font-size:13.5px;white-space:nowrap}
.hsearch{max-width:230px;margin:0 12px}
@media(max-width:1280px){.hsearch{display:none}}
@media(max-width:1120px){.top .nav:not(.mine) a:nth-child(n+5){display:none}}
@media(max-width:980px){.nav.mine{display:none}}