/*!
 * =============================================================================
 *  Don8Play — Unified Design System (site.css)
 *  Единая визуальная база под канон главной: космический тёмный фон,
 *  неоновый градиент, стекло, Inter + AeonikPro. Цвета — общие цвета сайта
 *  (/assets/css/tokens.css, подключается перед этим файлом; docs/CHANGES.md Ц1).
 *  Используется на: /brands/, /brands/*, /articles/ (хаб), тех-страницах,
 *  /ratings/ (палитра). Главная (reflect.css) и категории рейтингов — отдельно.
 * =============================================================================
 */

/* ---------- FONTS ---------- */
@font-face{font-family:"Inter V";src:url(/home/fonts/InterV/regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter V";src:url(/home/fonts/InterV/medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"AeonikPro";src:url(/home/fonts/AeonikPro/medium.woff2) format("woff2");font-weight:500 800;font-display:swap}

/* ---------- TOKENS ---------- */
/* Цвета — общие цвета сайта, снятые с главной (/assets/css/tokens.css, docs/CHANGES.md Ц1): имена ниже — ссылки
   на них, чтобы правила и вставки страниц (var(--line), var(--text-2)…) не переписывать. */
:root{
  --bg-0:var(--d8-bg); --bg-1:var(--d8-bg); --bg-2:var(--d8-bg);
  --text-0:var(--d8-text-1); --text-1:var(--d8-text-2); --text-2:var(--d8-text-3);
  --line:var(--d8-line-3); --line-2:var(--d8-line-2);
  --surface-0:var(--d8-surface-3); --surface-1:var(--d8-surface-5);
  --accent-pink:var(--d8-pink); --accent-violet:var(--d8-violet); --accent-blue:var(--d8-blue);
  --accent-cyan:#2CD9FF; --accent-mint:#2CFFCC;
  --g-accent:var(--d8-gradient);
  --g-accent-wide:linear-gradient(100deg,#FC72FF,#8F68FF,#487BFF,#2CD9FF,#2CFFCC); /* точки-значки и полоса чтения */
  --g-surface:var(--d8-surface-card);
  --good:var(--d8-good); --warn:var(--d8-warn); --bad:var(--d8-bad);
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --sh-1:0 14px 38px rgba(0,0,0,.45); --sh-2:0 26px 70px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(186,156,255,.18),0 18px 60px rgba(124,98,255,.16);
  --container:1200px;
  /* высота шапки сайта — её задаёт header.css (--hdr-h: 72 px, 56 px на телефоне и на боку, Ш1) */
  --header-h:var(--hdr-h,72px);
  --font-sans:"Inter V",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:"AeonikPro","Inter V",system-ui,sans-serif;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-anchor:none}
/* плавный скролл только при переходе по якорям, не на обычной прокрутке колесом */
@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{margin:0}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--d8-focus);outline-offset:3px}

/* ---------- BASE ---------- */
/* фон — ровный фон главной (Ц1): без фиксированных свечений и шума поверх страницы; свечения — у героев */
body{
  min-height:100vh;
  font-family:var(--font-sans);
  font-size:1rem; line-height:1.6;
  color:var(--text-0);
  background:var(--d8-bg);
}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:500;margin:0 0 .5em;line-height:1.12;letter-spacing:-.02em;color:var(--text-0)}
h1{font-size:clamp(2rem,5vw,3.5rem)}
h2{font-size:clamp(1.5rem,3vw,2.25rem)}
h3{font-size:clamp(1.125rem,2vw,1.375rem)}
p{margin:0 0 1em;color:var(--text-1)}
.muted{color:var(--text-2)}
.lead{font-size:clamp(1rem,1.4vw,1.1875rem);color:var(--text-1);max-width:62ch}
.gradient-text{background:var(--g-accent);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- LAYOUT ---------- */
.container{width:min(100% - 40px,var(--container));margin-inline:auto}
@media (max-width:560px){.container{width:min(100% - 28px,var(--container))}}
.site-main{padding-top:calc(var(--header-h) + 28px);padding-bottom:72px}
.section{margin-top:clamp(28px,5vw,56px)}
.section:first-child{margin-top:0}

/* ---------- ЛОГОТИП ПОДВАЛА (шапка сайта — header.css, Ш1) ---------- */
.logo{font-family:var(--font-head);font-weight:800;font-size:1.25rem;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:9px}
.logo::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--g-accent-wide);box-shadow:0 0 14px rgba(186,156,255,.7)}

/* ---------- SKIP LINK / BREADCRUMBS ---------- */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:300;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid var(--line)}
.skip-link:focus{left:14px}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.8125rem;color:var(--text-2);margin-bottom:18px}
.breadcrumbs a{color:var(--text-1)}.breadcrumbs a:hover{color:var(--text-0)}
.breadcrumbs .sep{opacity:.5}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line);
  background:var(--g-surface);box-shadow:var(--sh-1);padding:clamp(28px,5vw,64px) clamp(22px,4vw,56px)}
.hero::after{content:"";position:absolute;inset:-40% -20% auto -20%;height:60%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(229,156,255,.22),transparent 70%),
            radial-gradient(closest-side,rgba(156,178,255,.18),transparent 70%);filter:blur(30px)}
.hero>*{position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--d8-surface-3);font-size:.8125rem;color:var(--text-1);margin-bottom:18px}
.hero-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g-accent-wide)}
.hero h1{margin-bottom:.35em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* Hero video backdrop (black hole) — lazy via preload=none */
.hero--video .hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
.hero--video .hero-video video{width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(1.1)}
.hero--video::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 120% at 50% 0%,transparent 30%,rgba(3,0,20,.7) 80%,var(--bg-0))}
/* подзаголовок на кадре чёрной дыры — с ореолом главной, не ниже AA (Т33, PAL-5) */
.hero--video>p{text-shadow:var(--d8-text-halo)}

/* ---------- BUTTONS ---------- */
.button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border-radius:14px;font-weight:500;min-height:46px;white-space:nowrap;
  border:1px solid var(--line);background:var(--d8-surface-4);color:var(--text-0);
  position:relative;overflow:hidden;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}
.button:hover,.btn:hover{transform:translateY(-2px);border-color:var(--d8-accent-line);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.button:active,.btn:active{transform:translateY(0)}
.button-primary,.btn-primary{border:0;color:var(--d8-on-accent);font-weight:700;background:var(--g-accent);box-shadow:0 12px 30px rgba(186,156,255,.28)}
.button-primary:hover,.btn-primary:hover{box-shadow:0 18px 46px rgba(186,156,255,.42)}
.button-secondary,.btn-ghost{background:var(--d8-surface-3);color:var(--text-0)}
.btn-sm{min-height:38px;padding:8px 14px;font-size:.875rem;border-radius:11px}

/* ---------- CHIPS / BADGES ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--d8-surface-3);color:var(--text-1);font-size:.8125rem;transition:.16s}
a.chip:hover{color:var(--text-0);border-color:var(--d8-accent-line);transform:translateY(-1px)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--d8-surface-3);font-size:.75rem;color:var(--text-1)}
.tag-rank{font-family:var(--font-head);font-weight:800;background:var(--g-accent);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- CARDS / GRID ---------- */
.grid{display:grid;gap:clamp(14px,1.6vw,20px)}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.grid.cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

.card{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--g-surface);box-shadow:var(--sh-1);padding:clamp(18px,2vw,26px);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),var(--d8-accent-bg-strong),transparent 45%)}
.card:hover{transform:translateY(-4px);border-color:var(--d8-accent-line);box-shadow:var(--sh-2),var(--glow)}
.card:hover::before{opacity:1}
.card>*{position:relative;z-index:1}
.card-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:500;color:var(--d8-link)}
.card-link::after{content:"→";transition:transform .16s ease}
.card-link:hover::after{transform:translateX(3px)}

/* Brand catalog card */
.brand-card{display:flex;flex-direction:column}
.brand-card-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.brand-logo{width:54px;height:54px;flex:none;border-radius:15px;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--d8-on-accent);background:var(--g-accent);
  box-shadow:0 8px 22px rgba(186,156,255,.3);text-transform:uppercase}
.brand-card h2,.brand-card-title{font-size:1.25rem;margin:0}
.brand-card-meta{font-size:.8125rem;color:var(--text-2)}
.brand-card-desc{color:var(--text-1);font-size:.90625rem;flex:1}
.brand-card-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- SEARCH / CONTROLS ---------- */
.controls{margin:24px 0;display:flex;gap:12px;flex-wrap:wrap}
.input{width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:var(--d8-surface-4);color:var(--text-0);font-size:.9375rem}
.input::placeholder{color:var(--text-2)}
.input:focus-visible{border-color:var(--d8-accent-line);outline:none;box-shadow:0 0 0 4px var(--d8-accent-bg-strong)}
.search-wide{max-width:520px}
/* /search/ (search.js, И2): поле и кнопка в строку, результаты — карточки */
.search-box{display:flex;flex-wrap:wrap;gap:10px;max-width:640px;margin:0 0 16px}
.search-box .input{flex:1 1 180px;width:auto;min-width:0}
.search-stats{color:var(--text-2);font-size:.8125rem}
.search-results{display:grid;gap:12px;margin-top:14px}
.result-item{padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--d8-surface-2)}
.result-type{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.result-title{margin:6px 0 4px;font-family:var(--font-head);font-weight:700;font-size:1.0625rem;line-height:1.3}
.result-title a{color:var(--text-0)}
.result-title a:hover{text-decoration:underline}
.result-desc{margin:0;color:var(--text-1);font-size:.90625rem}
.result-item mark{background:rgba(186,156,255,.28);color:inherit;border-radius:3px;padding:0 1px}

/* ---------- LAYOUT WITH SIDEBAR (ratings/articles) ---------- */
.layout-sidebar{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start;margin-top:26px}
@media (max-width:980px){.layout-sidebar{grid-template-columns:1fr}}
.sidebar{position:sticky;top:calc(var(--header-h) + 18px);padding:22px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--d8-surface-3);box-shadow:var(--sh-1)}
@media (max-width:980px){.sidebar{position:static}}
.sidebar-title{font-family:var(--font-head);font-weight:800;font-size:.875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin-bottom:14px}
.sidebar-nav{display:grid;gap:6px}
.sidebar-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-radius:12px;
  border:1px solid transparent;color:var(--text-1);font-size:.90625rem;transition:.16s}
.sidebar-nav a:hover{background:var(--d8-surface-4);border-color:var(--line);color:var(--text-0);transform:translateX(2px)}
.sidebar-nav a.is-current{background:var(--d8-accent-bg-strong);border-color:var(--d8-accent-line);color:var(--text-0)}

/* ---------- PROSE (читаемая колонка тех-страниц на тёмном) ---------- */
.prose{max-width:780px}
.prose-card{padding:clamp(22px,3vw,40px);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--d8-surface-3);box-shadow:var(--sh-1)}
.prose h2{margin-top:1.6em;font-size:clamp(1.25rem,2.4vw,1.75rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.3em;font-size:clamp(1.0625rem,2vw,1.25rem)}
.prose p,.prose li{color:var(--text-1);line-height:1.7}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1em}
.prose li{margin:.4em 0}
.prose a{color:var(--d8-link);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--d8-link-hover)}
.prose strong{color:var(--text-0)}
.prose table{margin:1em 0;font-size:.90625rem}
.prose th,.prose td{padding:11px 14px;border:1px solid var(--line-2);text-align:left}
.prose th{background:var(--d8-surface-4);color:var(--text-0)}
.prose .updated{font-size:.8125rem;color:var(--text-2);margin-bottom:1.4em}

/* ---------- TABLES ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--d8-surface-2)}
.table{min-width:640px;font-size:.90625rem}
.table th,.table td{padding:13px 16px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:middle}
.table thead th{font-family:var(--font-head);color:var(--text-0);font-weight:700;background:var(--d8-surface-4);position:sticky;top:0}
.table tbody tr:hover td{background:var(--d8-surface-2)}

/* ---------- FAQ / DETAILS ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--d8-surface-2);padding:4px 18px;margin-bottom:10px;transition:border-color .16s}
.faq details[open]{border-color:var(--d8-accent-line)}
.faq summary{list-style:none;cursor:pointer;padding:14px 0;font-weight:500;color:var(--text-0);display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.375rem;color:var(--accent-violet);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:14px;margin:0}

/* =========================================================================
   ARTICLE — премиальный журнал: широкий hero на канон-фоне → лист статьи
   (лист был белым; с Ц1 — тёмная поверхность в цветах сайта, как карточки)
   ========================================================================= */

/* reading progress bar */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:transparent;pointer-events:none}
.reading-progress span{display:block;height:100%;width:0;background:var(--g-accent-wide);box-shadow:0 0 12px rgba(186,156,255,.6);transition:width .1s linear}

/* HERO статьи: единый журнальный блок над сеткой */
.article-hero{position:relative;max-width:880px;margin:8px auto 0;padding:clamp(8px,2vw,18px) 0 clamp(20px,3vw,30px);text-align:center}
.article-hero::before{content:"";position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  width:min(720px,90%);height:280px;z-index:-1;pointer-events:none;filter:blur(50px);opacity:.6;
  background:radial-gradient(closest-side,rgba(229,156,255,.5),transparent 70%),radial-gradient(closest-side,rgba(156,178,255,.4),transparent 70%)}
.article-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--accent-violet);padding:7px 14px;border-radius:999px;
  border:1px solid var(--d8-accent-line);background:var(--d8-accent-bg);margin-bottom:20px}
.article-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g-accent-wide)}
.article-hero h1{font-family:var(--font-head);font-weight:800;color:var(--text-0);
  font-size:clamp(1.875rem,5vw,3.25rem);line-height:1.08;letter-spacing:-.025em;margin:0 auto 20px;max-width:16ch}
.article-lead{font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.6;color:var(--text-1);max-width:62ch;margin:0 auto 24px}
.article-byline{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;font-size:.875rem;color:var(--text-2)}
.article-byline .author-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:.9375rem;color:var(--d8-on-accent);background:var(--g-accent);box-shadow:0 6px 18px rgba(186,156,255,.35)}
.article-byline .author-name{color:var(--text-0);font-weight:500}
.article-byline .dot{width:3px;height:3px;border-radius:50%;background:var(--text-2)}
.article-byline .badge{background:var(--d8-surface-4)}

/* раскладка: липкий прогресс-TOC слева + лист */
.article-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start;
  max-width:1120px;margin:clamp(24px,4vw,40px) auto 0}
@media (max-width:980px){.article-layout{grid-template-columns:1fr;max-width:760px}}

/* TOC с вертикальным прогресс-рельсом */
.toc{position:sticky;top:calc(var(--header-h) + 18px);padding:20px 18px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--d8-surface-3);box-shadow:var(--sh-1)}
.toc-toggle{font-family:var(--font-head);font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-2);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.toc-toggle::-webkit-details-marker{display:none}
.toc-toggle::after{content:"▾";color:var(--accent-violet);transition:transform .2s}
.toc-links{display:grid;gap:2px;position:relative;padding-left:14px}
.toc-links::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--d8-line-3)}
.toc-links a{position:relative;padding:8px 10px;border-radius:9px;color:var(--text-2);font-size:.84375rem;line-height:1.35;transition:.18s}
.toc-links a::before{content:"";position:absolute;left:-15px;top:50%;transform:translateY(-50%) scale(0);width:8px;height:8px;border-radius:50%;
  background:var(--g-accent);box-shadow:0 0 10px rgba(186,156,255,.7);transition:transform .2s}
.toc-links a:hover{color:var(--text-0)}
.toc-links a.is-active{color:var(--text-0);font-weight:500}
.toc-links a.is-active::before{transform:translateY(-50%) scale(1)}
@media (min-width:981px){
  details.toc > .toc-toggle{display:none}
  details.toc > .toc-links{display:grid!important}
}
/* И3 (найдено в 4.27): липкое оглавление не выше окна — длинное прокручивается внутри себя; svh — малая
   высота окна, чтобы на телефоне конец списка не уходил под панели браузера (где svh нет — vh) */
.toc{max-height:calc(100vh - var(--header-h) - 36px);max-height:calc(100svh - var(--header-h) - 36px);overflow-y:auto;overscroll-behavior:contain}
@media (max-width:980px){
  .toc{max-height:calc(100vh - var(--header-h) - 12px);max-height:calc(100svh - var(--header-h) - 12px)}
}
@media (max-width:980px){
  .toc{position:sticky;top:calc(var(--header-h) + 6px);z-index:50;padding:14px 16px;
    background:var(--d8-bg-glass-strong);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .toc-toggle{margin-bottom:0}
  .toc-links{margin-top:14px}
  details.toc:not([open]) > .toc-links{display:none}
  details.toc[open] > .toc-toggle::after{transform:rotate(180deg)}
}

/* лист с контентом — поверхность сайта, как карточки (Ц1; был белым #fff с тёмным текстом); рамка — тенью внутрь,
   чтобы лист не стал шире на 2 px */
.article-content{background:var(--d8-surface-3);color:var(--d8-text-2);border-radius:var(--r-xl);
  box-shadow:inset 0 0 0 1px var(--d8-line-2),var(--sh-2);
  padding:clamp(24px,3.6vw,56px);overflow:hidden;font-size:clamp(1rem,1.15vw,1.09375rem)}
.article-content h2,.article-content h3,.article-content h4{font-family:var(--font-head);color:var(--d8-text-1);letter-spacing:-.015em}
.article-content h2{font-size:clamp(1.375rem,2.6vw,1.875rem);margin:1.7em 0 .5em;padding-top:.3em;position:relative}
.article-content h2::before{content:"";position:absolute;top:0;left:0;width:42px;height:3px;border-radius:3px;background:var(--g-accent)}
.article-content > :first-child{margin-top:0}
.article-content h3{font-size:clamp(1.125rem,2vw,1.3125rem);margin:1.4em 0 .4em}
.article-content p,.article-content li{color:var(--d8-text-2);line-height:1.75}
/* drop-cap на первом абзаце после заголовка/лида */
.article-content > p:first-of-type::first-letter,.article-content .lead-in::first-letter{
  font-family:var(--font-head);font-weight:800;float:left;font-size:3.4em;line-height:.82;
  padding:6px 12px 0 0;color:var(--d8-violet);-webkit-background-clip:initial}
.article-content a{color:var(--d8-link);text-decoration:underline;text-underline-offset:2px}
.article-content a:hover{color:var(--d8-link-hover)}
.article-content strong{color:var(--d8-text-1)}
.article-content ul,.article-content ol{padding-left:1.3em;margin:0 0 1.1em}
.article-content li{margin:.4em 0}

/* tldr / врезки на листе */
.article-tldr{margin:0 0 1.6em;padding:18px 20px;border-radius:14px;border:1px solid var(--d8-line-2);
  background:var(--d8-accent-bg)}
.article-tldr strong{display:block;font-family:var(--font-head);color:var(--d8-violet);margin-bottom:8px;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}
.article-tldr ul{margin:0;padding-left:1.2em}
.article-content .callout{margin:1.4em 0;padding:16px 18px;border-radius:14px;border:1px solid var(--d8-line-2);
  border-left:4px solid var(--accent-violet);background:var(--d8-accent-bg);color:var(--d8-text-2)}
.article-content .callout p:last-child{margin-bottom:0}
.article-content blockquote{margin:1.6em 0;padding:18px 22px;border-radius:14px;
  background:var(--d8-accent-bg);border:1px solid var(--d8-line-2);color:var(--d8-text-1);font-size:1.05em;line-height:1.6}
.article-content blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:.85em;color:var(--d8-violet)}

/* таблицы на листе */
.article-content table{width:100%;margin:1.3em 0;border-collapse:collapse;font-size:.90625rem;border-radius:12px;overflow:hidden;border:1px solid var(--d8-line-2)}
.article-content th,.article-content td{padding:11px 14px;border-bottom:1px solid var(--d8-line-1);text-align:left;vertical-align:top}
.article-content thead th{font-family:var(--font-head);background:var(--d8-surface-4);color:var(--d8-text-1);font-weight:700}
.article-content tbody tr:hover td{background:var(--d8-surface-2)}

/* нумерованные шаги */
.article-content ol.steps{counter-reset:s;list-style:none;padding:0;margin:1.2em 0;display:grid;gap:10px}
.article-content ol.steps li{counter-increment:s;position:relative;padding:14px 16px 14px 52px;border-radius:12px;background:var(--d8-surface-2);border:1px solid var(--d8-line-2);margin:0}
.article-content ol.steps li::before{content:counter(s);position:absolute;left:14px;top:13px;width:26px;height:26px;
  display:grid;place-items:center;border-radius:8px;background:var(--g-accent);color:var(--d8-on-accent);font-family:var(--font-head);font-weight:800;font-size:.875rem}

/* takeaways */
.article-content ul.takeaways{list-style:none;padding:16px 18px;margin:1.4em 0;border-radius:14px;border:1px solid var(--d8-line-2);background:var(--d8-surface-2)}
.article-content ul.takeaways li{position:relative;padding-left:26px}
.article-content ul.takeaways li::before{content:"✓";position:absolute;left:0;color:var(--d8-violet);font-weight:700}

/* FAQ внутри статьи (на листе) */
.article-content .faq-item,.article-content details.faq-item{border:1px solid var(--d8-line-2);border-radius:12px;background:var(--d8-surface-2);padding:2px 16px;margin-bottom:10px}
.article-content .faq-item summary{list-style:none;cursor:pointer;padding:13px 0;font-weight:600;color:var(--d8-text-1);display:flex;justify-content:space-between;gap:12px}
.article-content .faq-item summary::-webkit-details-marker{display:none}
.article-content .faq-item summary::after{content:"+";font-size:1.25rem;color:var(--d8-violet)}
.article-content .faq-item[open] summary::after{content:"–"}
.article-content .faq-a{padding-bottom:12px}
.article-content .faq-a p{margin:0}

/* блоки после статьи (на тёмном): прозрачность, рейтинги, связанные — это обычные .card сетки */
.article-content .section{margin-top:1.8em}
.responsible{margin-top:1.8em;padding:18px 20px;border-radius:14px;border:1px solid var(--d8-bad-line);background:var(--d8-bad-bg);color:var(--d8-text-2)}
.responsible h2{color:var(--d8-text-1);font-size:1.125rem;margin:0 0 .4em}
.responsible .btn-secondary{margin-top:6px}
.article-content .view-count{opacity:.7}

/* ---------- FOOTER (compact, fixes doubled/empty footer) ---------- */
.site-footer,.footer{margin-top:56px;border-top:1px solid var(--line-2);background:var(--d8-bg)}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;padding:28px 0 20px;align-items:start}
@media (max-width:760px){.footer-inner{grid-template-columns:1fr;gap:24px}}
.footer-brand .logo{margin-bottom:12px}
.footer-disclaimer{color:var(--text-2);font-size:.8125rem;line-height:1.6;max-width:60ch;margin:0}
.footer-age{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 9px;margin-bottom:12px;border-radius:999px;border:1px solid var(--line);background:var(--d8-surface-3);font-size:.75rem;color:var(--text-1)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px}
.footer-links a{color:var(--text-2);font-size:.8125rem;padding:7px 11px;border-radius:10px;border:1px solid transparent;transition:.16s}
.footer-links a:hover{color:var(--text-0);background:var(--d8-surface-3);border-color:var(--line)}
.footer-meta{grid-column:1/-1;padding-top:18px;border-top:1px solid var(--line-2);color:var(--text-2);font-size:.75rem}

/* ---------- COMPAT (классы старого main.css, чтобы контент тех-страниц работал) ---------- */
.crumbs,.crumbs-inner{display:flex;flex-wrap:wrap;gap:8px;font-size:.8125rem;color:var(--text-2);margin-bottom:18px}
.crumb-link{color:var(--text-1)}.crumb-link:hover{color:var(--text-0)}
.crumb-sep{opacity:.5}.crumb-current{color:var(--text-0)}
.list{padding-left:1.3em;margin:0 0 1em;color:var(--text-1)}
.list li{margin:.4em 0;line-height:1.7}
.list strong{color:var(--text-0)}
.subtle{color:var(--text-2);font-size:.90625rem}
.meta{color:var(--text-2);font-size:.78125rem;margin-top:10px}
.link{color:var(--d8-link);text-decoration:underline;text-underline-offset:2px}
.link:hover{color:var(--d8-link-hover)}
.card h3{margin-top:0}
.note,.callout{margin-top:16px;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:linear-gradient(180deg,var(--d8-accent-bg),var(--d8-surface-2));color:var(--text-1)}
.kv{display:flex;flex-direction:column;gap:10px}
.kv-row{display:flex;justify-content:space-between;gap:12px}
.kv-key{color:var(--text-2);font-size:.8125rem}.kv-val{color:var(--text-0);font-size:.875rem;text-align:right}
.tag{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--d8-surface-3);font-size:.8125rem;color:var(--text-1)}
.tag strong{color:var(--text-0)}
/* старая разметка футера → компактный единый вид (чинит «двойной» подвал) */
.footer-disclaimer{display:flex;align-items:flex-start;gap:14px;color:var(--text-2);font-size:.8125rem;line-height:1.6;max-width:60ch}
.footer-disclaimer p{margin:0;color:var(--text-2)}
.badge-18{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--d8-surface-3);font-family:var(--font-head);font-weight:800;font-size:.8125rem;color:var(--text-0)}

/* =========================================================================
   BRAND PAGE — премиальный конверсионный разбор (/brands/{slug}/)
   ========================================================================= */

/* Единая ширина брендовой страницы (всё выстроено по одной сетке) */
.brand-page{--brand-w:1080px}
.brand-page .container{width:min(calc(100% - 48px),var(--brand-w))}

/* HERO бренда — чёрная дыра (видео) + глубокий космос, центр */
.brand-hero{position:relative;overflow:hidden;text-align:center;border-radius:var(--r-xl);border:1px solid var(--line);
  background:var(--d8-bg);box-shadow:var(--sh-1);padding:clamp(36px,5vw,72px) clamp(20px,4vw,48px);margin-top:8px}
.brand-hero .bh-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.brand-hero .bh-video video{width:100%;height:100%;object-fit:cover;opacity:.55}
/* подложка-свечение + затемнение краёв поверх видео */
.brand-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 42%,transparent 18%,rgba(3,0,20,.55) 62%,var(--d8-bg) 92%)}
.brand-hero::after{content:"";position:absolute;left:50%;top:38%;transform:translateX(-50%);width:min(560px,80%);aspect-ratio:1/.5;z-index:1;
  pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at center,rgba(184,138,255,.45),transparent 68%);filter:blur(46px)}
.brand-hero>*{position:relative;z-index:2}
.brand-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:600;letter-spacing:.06em;
  color:var(--text-1);padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--d8-surface-3);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-bottom:22px}
.brand-eyebrow .brand-mark{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:.6875rem;color:var(--d8-on-accent);background:var(--g-accent);text-transform:uppercase}
.brand-hero h1{font-family:var(--font-head);font-weight:800;color:var(--text-0);letter-spacing:-.03em;
  font-size:clamp(1.875rem,4.4vw,3.25rem);line-height:1.06;margin:0 auto;max-width:16ch}
/* подзаголовок и чипы мест — на кадре чёрной дыры: ореол главной и тёмное стекло под чипом, не ниже AA (Т33, PAL-5) */
.brand-tagline{color:var(--text-1);font-size:clamp(.9375rem,1.3vw,1.0625rem);line-height:1.6;max-width:58ch;margin:18px auto 0;text-shadow:var(--d8-text-halo)}
.brand-usp{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px auto 0;max-width:720px}
.usp-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:linear-gradient(var(--d8-surface-3),var(--d8-surface-3)),var(--d8-bg-glass);font-size:.84375rem;color:var(--text-1);transition:.18s}
.usp-chip:hover{border-color:var(--d8-accent-line);color:var(--text-0)}
.usp-chip b{font-family:var(--font-head);font-weight:800;color:var(--text-0)}
.brand-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:26px}
.brand-cta .partner-note{flex-basis:100%;font-size:.75rem;color:var(--text-2);margin:8px 0 0}
/* score-капсула в hero */
.brand-score{display:inline-flex;align-items:center;gap:14px;margin:24px auto 0;padding:12px 20px 12px 12px;
  border-radius:999px;border:1px solid var(--line);background:var(--d8-surface-3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.score-ring{--val:82;width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(from -90deg,var(--accent-pink),var(--accent-violet) calc(var(--val)*3.6deg),var(--d8-surface-5) 0)}
.score-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--d8-bg)}
.score-ring .score-num{position:relative;font-family:var(--font-head);font-weight:800;font-size:1.125rem;color:var(--text-0);line-height:1}
.score-ring .score-num small{display:none}
.brand-score .score-label{text-align:left;font-size:.8125rem;color:var(--text-2)}
.brand-score .score-label b{display:block;font-family:var(--font-head);color:var(--text-0);font-size:.875rem;font-weight:700}
.brand-score .score-meta{display:none}

/* Sticky якорная навигация — тонкая, по центру */
.brand-anchors{position:sticky;top:var(--header-h);z-index:90;margin:14px 0 0;padding:11px 0;
  background:linear-gradient(180deg,rgba(3,0,20,.92),rgba(3,0,20,.4));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2)}
.brand-anchors-inner{display:flex;justify-content:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.brand-anchors-inner::-webkit-scrollbar{display:none}
.brand-anchors a{flex:none;font-size:.84375rem;padding:8px 16px;border-radius:999px;color:var(--text-2);white-space:nowrap;transition:.16s}
.brand-anchors a:hover{color:var(--text-0)}
.brand-anchors a.is-active{color:var(--text-0);background:var(--d8-surface-4)}

/* ЕДИНЫЙ БЛОК СЕКЦИИ: каждая секция = карточка одинаковой ширины, без голого текста */
.brand-section{position:relative;margin-top:clamp(16px,2.2vw,22px);padding:clamp(22px,3vw,34px);
  border-radius:var(--r-xl);border:1px solid var(--line);background:var(--g-surface);box-shadow:var(--sh-0),var(--sh-1);
  scroll-margin-top:calc(var(--header-h) + 64px)}
.brand-section>h2{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em;font-size:1.5rem;
  margin:0 0 4px;display:flex;align-items:center;gap:12px}
.brand-section>h2::before{content:"";width:5px;height:24px;border-radius:3px;background:var(--g-accent);flex:none}
.brand-section>.section-sub,.brand-section>p:first-of-type:not(.muted){color:var(--text-2);font-size:.90625rem;margin:0 0 20px}
.brand-section>.section-sub{margin-bottom:20px}
.brand-section>p{color:var(--text-1);line-height:1.7}
.brand-section .list{color:var(--text-1)}

/* Стат-плитки — единая сетка с верхним бликом */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.stat-tile{position:relative;overflow:hidden;padding:18px;border-radius:var(--r-md);
  border:1px solid var(--line);background:radial-gradient(120% 120% at 50% 0%,var(--d8-surface-4),var(--d8-surface-1));transition:.2s}
.stat-tile::after{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(186,156,255,.5),transparent);opacity:.6}
.stat-tile:hover{border-color:var(--d8-accent-line);transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.stat-tile .stat-k{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin-bottom:8px}
.stat-tile .stat-v{font-family:var(--font-head);font-weight:700;color:var(--text-0);font-size:1rem;line-height:1.3}

/* Авторский разбор — внутри блока, аватар слева */
.review-author{display:flex;align-items:center;gap:13px;margin:4px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.review-author .author-avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;color:var(--d8-on-accent);background:var(--g-accent);box-shadow:0 8px 22px rgba(186,156,255,.3)}
.review-author .ra-name{color:var(--text-0);font-weight:600}
.review-author .ra-role{font-size:.8125rem;color:var(--text-2)}
.review-card p{color:var(--text-1);font-size:1rem;line-height:1.75}
.review-card p+p{margin-top:14px}

/* Позиции — компактная сетка плиток: иконка категории, место, название рейтинга; плитка — ссылка на рейтинг
   (решение владельца 5). На телефоне — две колонки, шире — по 220 px на плитку (3–4 в ряд) */
.pos-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pos-row{min-width:0;display:flex}
.pos-link{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico rank" "name name";align-items:center;gap:8px 10px;
  padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--d8-surface-2);transition:.16s}
.pos-link:hover{border-color:var(--d8-accent-line);background:var(--d8-accent-bg)}
.pos-ico{grid-area:ico;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--accent-violet);
  background:var(--d8-accent-bg);border:1px solid rgba(186,156,255,.2)}
.pos-rank{grid-area:rank;justify-self:end;font-family:var(--font-head);font-weight:800;font-size:1.125rem;line-height:1;color:var(--text-0)}
.pos-rank small{font-size:.75rem;font-weight:700;margin-right:1px;color:var(--accent-violet)}
.pos-name{grid-area:name;color:var(--text-0);font-size:.84375rem;font-weight:500;line-height:1.3;overflow-wrap:break-word}
.pos-link:hover .pos-name{color:var(--text-0)}
@media (max-width:560px){
  .pos-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pos-link{padding:10px 11px}
  .pos-name{font-size:.8125rem}
}
/* 320–360 px: плитка ≈ 100 px — длинные слова («Бездепозитные») переносятся по слогам, а не рвутся */
@media (max-width:360px){.pos-link{padding:10px 9px}.pos-name{font-size:.78125rem;-webkit-hyphens:auto;hyphens:auto}}

/* Отзывы игроков — отдельный блок от разбора редакции (решение владельца 8): карточка отзыва, внизу — дата публикации,
   статус игрока, отметка проверки. Колонка не уже min(280px, 100%) — на 320 px карточка не шире колонки */
.pr-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.pr-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);
  background:radial-gradient(120% 120% at 50% 0%,var(--d8-surface-3),var(--d8-surface-1))}
.pr-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pr-name{min-width:0;color:var(--text-0);font-weight:600;font-size:.9375rem;line-height:1.3;overflow-wrap:anywhere}
.pr-stars{flex:none;color:#f5b73b;font-size:.875rem;letter-spacing:1px;line-height:1}
.pr-stars-off{color:rgba(255,255,255,.2)}
.brand-section .pr-text{margin:0;color:var(--text-1);font-size:.90625rem;line-height:1.6}
.pr-meta{margin:auto 0 0;padding-top:10px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  color:var(--text-2);font-size:.78125rem;line-height:1.4}
.pr-meta time{color:var(--text-1)}
.pr-proof{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;border:1px solid rgba(44,255,204,.28);
  background:rgba(44,255,204,.06);color:var(--good);font-size:.75rem}
.pr-proof::before{content:"✓";font-size:.75rem}

/* note/callout внутри блока бренда */
.brand-section .note{margin-top:18px}
/* промокод внутри блока — без двойной рамки */
.brand-section .promo-card{border:0;background:transparent;box-shadow:none;padding:0}
.brand-section .promo-card .promo-row{margin-bottom:14px}
/* вложенные .card в сетках бренда — оставляем как карточки, но заголовок не льнёт */
.brand-section .grid .card h3{margin-top:0}
/* кнопки старого вида внутри бренда → привести к .button */
.brand-section .btn.is-primary,.brand-section .btn-sm.is-primary{background:var(--g-accent);color:var(--d8-on-accent);border:0;font-weight:700;border-radius:13px;padding:11px 18px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.brand-section .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;border:1px solid var(--line);background:var(--d8-surface-4);color:var(--text-0);padding:8px 14px;min-height:38px;font-weight:500;transition:.16s}
.brand-section .btn:hover{border-color:var(--d8-accent-line);transform:translateY(-1px)}

/* CTA-полоса — свечение, центр */
.brand-cta-band{position:relative;overflow:hidden;margin-top:clamp(16px,2.2vw,22px);border-radius:var(--r-xl);
  border:1px solid var(--line);background:radial-gradient(120% 160% at 50% -30%,rgba(168,120,255,.22),var(--d8-surface-1));
  padding:clamp(30px,4vw,52px);text-align:center}
.brand-cta-band::before{content:"";position:absolute;left:50%;top:-40%;transform:translateX(-50%);width:60%;height:120%;z-index:0;
  background:radial-gradient(ellipse at center,rgba(186,156,255,.35),transparent 70%);filter:blur(50px);pointer-events:none}
.brand-cta-band>*{position:relative;z-index:1}
.brand-cta-band h2{font-family:var(--font-head);font-weight:800;margin:0;font-size:clamp(1.3125rem,2.4vw,1.875rem)}
.brand-cta-band p{margin:8px auto 20px;color:var(--text-1);font-size:.90625rem;max-width:50ch}

/* ---------- BRAND CARD COMPAT (классы карточек /brands/{slug}/) ---------- */
.anchor-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.anchor-nav .sep{display:none}
.anchor-nav a{font-size:.8125rem;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--d8-surface-3);color:var(--text-1);transition:.16s;white-space:nowrap}
.anchor-nav a:hover{color:var(--text-0);border-color:var(--d8-accent-line);transform:translateY(-1px)}
.author-card{display:flex;flex-direction:column;gap:4px}
.author-card p{margin:0;color:var(--text-1)}
.facts-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:760px){.facts-grid{grid-template-columns:1fr 1fr}}
.is-half{margin:0}
.promo-card .promo-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.promo-label{color:var(--text-2);font-size:.8125rem}
.promo-code{font-family:var(--font-head);font-weight:800;letter-spacing:.1em;padding:10px 14px;border-radius:12px;border:1px dashed rgba(186,156,255,.5);background:var(--d8-accent-bg);color:var(--text-0)}
.disclosure{border:1px solid var(--line);border-radius:var(--r-md);background:var(--d8-surface-2);padding:10px 16px;margin-top:12px}
.disclosure summary{cursor:pointer;list-style:none;font-weight:500;color:var(--text-0)}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure summary::after{content:"▾";float:right;color:var(--accent-violet);transition:transform .2s}
.disclosure[open] summary::after{transform:rotate(180deg)}
.disclosure.is-compact{padding:8px 14px}
.facts-bullets{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.facts-bullets .fact-rich{border:1px solid var(--line);border-radius:var(--r-md);background:var(--d8-surface-3);padding:16px}
.facts-bullets .fact-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.facts-bullets .chip{font-size:.75rem}
.facts-bullets .fact-section-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin:12px 0 8px}
/* sticky nav под карточкой — упрощаем до статичной ленты на site.css */
.brand-sticky-nav{margin-top:16px}
.brand-sticky-nav .anchor-nav{margin-top:0}

/* ---------- UTILITIES ---------- */
.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}
.is-hidden{display:none!important}
.reveal{opacity:0;transform:translateY(16px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================================
   MOBILE FIXES — этап 3 (docs/CHANGES.md, раздел «Этап 3: мобильная вёрстка»)
   ========================================================================= */

/* MOB-1: таблица без обёртки .table-wrap на телефоне прокручивается внутри своей рамки —
   min-width:640px у .table больше не распирает её за край карточки (.card{overflow:hidden})
   или белого листа статьи; узкая таблица помещается целиком */
@media (max-width:760px){
  :not(.table-wrap)>.table{display:block;min-width:0;max-width:100%;overflow-x:auto}
  /* от трёх колонок таблица всё равно прокручивается — колонка не сжимается до одного слова в строке:
     распорка в ячейке задаёт колонке минимум 7em (width/min-width у ячеек браузеры минимумом не считают) */
  :not(.table-wrap)>.table:has(tr>:nth-child(3)) :is(th,td)::before{content:"";display:block;width:7em;height:0}
}
/* длинная ссылка переносится внутри строки (адреса в списках); ширину колонок таблиц не меняет */
.link{overflow-wrap:break-word}
/* кнопка шире экрана переносит текст на вторую строку, а не обрезается */
@media (max-width:480px){
  .btn,.button{white-space:normal;max-width:100%;text-align:center}
}
/* список шагов в статье: колонка не шире листа; на телефоне подпись шага идёт в строку с текстом
   (флекс «подпись | текст» не помещался и обрезался) */
.article-content ol.steps{grid-template-columns:minmax(0,1fr)}
@media (max-width:480px){
  .article-content ol.steps li{display:block}
}

/* MOB-8: переход по якорю останавливает цель под фиксированной шапкой, а не за ней
   (:where — нулевая специфичность: свои отступы, как у .brand-section, остаются в силе) */
:where([id]){scroll-margin-top:calc(var(--header-h) + 16px)}
/* в статье до 980 px под шапкой ещё липкое свёрнутое оглавление (top: шапка + 6px, высота ≈ 50px) */
@media (max-width:980px){
  .article-layout :where([id]){scroll-margin-top:calc(var(--header-h) + 76px)}
}
/* MOB-8: на служебных страницах крошки стоят между фиксированной шапкой и main и были закрыты шапкой
   на всех ширинах — опускаем их под шапку; отступ main уменьшается на столько же, текст не сдвигается */
.site-header+.breadcrumbs{padding-top:calc(var(--header-h) + 14px)}
.site-header+.breadcrumbs+.site-main{padding-top:14px}
/* MOB-5: меню разделов бренда по центру, только когда помещается; иначе начинается с первого пункта
   (justify-content:center уводил первые пункты за левый край, куда прокрутка не достаёт) */
.brand-anchors-inner{justify-content:flex-start}
.brand-anchors-inner>:first-child{margin-left:auto}
.brand-anchors-inner>:last-child{margin-right:auto}

/* MOB-9: на телефоне site.js видео заставки не грузит (< 760 px) — пустой блок видео убираем */
@media (max-width:759.98px){
  .hero--video .hero-video{display:none}
}

/* MOB-10: кнопка «Содержание» статьи (до 980 px) — 44 px в высоту вместо 19; поля блока уменьшены на
   столько же, свёрнутое оглавление прежней высоты, расстояние до пунктов прежнее */
@media (max-width:980px){
  .toc{padding-top:1.5px;padding-bottom:1.5px}
  details.toc[open]{padding-bottom:14px}
  .toc-toggle{min-height:44px}
  .toc-links{margin-top:1.5px}
}
/* MOB-10: ссылка карточки «… →» — зона нажатия 44,6 px вместо 25,6 (внутренние поля по 9,5 px);
   поля уменьшены на прибавку сверху и снизу — вид и положение текста не меняются */
.card-link{padding-block:9.5px;margin-top:4.5px;margin-bottom:-9.5px}
/* MOB-12: поля ввода и списки на телефоне не мельче 16 px — iOS не увеличивает страницу при фокусе
   (:root поднимает вес правила над стилями страниц вида «.gsel-grid input») */
@media (max-width:760px){
  :root :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]){font-size:1rem}
}

/* MOB-11 (И5): липкие панели на маленьком экране не шире ~20 % его высоты.
   Телефон: меню разделов бренда тоньше (поля 11 → 4 px, пункты той же высоты): шапка 56 + 47 px на 568 px. */
@media (max-width:560px){
  .brand-anchors{padding:4px 0}
}
/* Телефон на боку (высота до 420 px): шапка 56 px (header.css), меню разделов бренда и оглавление статьи
   стоят на своём месте в странице, а не прилипают; переход по якорю больше не оставляет под них место. */
@media (orientation:landscape) and (max-height:420px){
  .brand-anchors,.toc{position:relative;top:auto}
  .brand-section,.article-layout :where([id]){scroll-margin-top:calc(var(--header-h) + 16px)}
}

/* Решение владельца 10 (docs/CHANGES.md А4): хаб /articles/ — рядом с фильтром ссылки на две части
   («Гайды», «Статьи»); часть, где фильтр не оставил ни одной карточки, прячется вместе с заголовком. */
.hub-kinds{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hub-kinds .tag{min-height:40px}
.hub-block+.hub-block{margin-top:clamp(40px,5vw,64px)}
.hub-block-intro{margin:0 0 18px}
.hub-block:not(:has([data-filter-item]:not(.is-hidden))){display:none}

/* Решение владельца 17 (docs/CHANGES.md А2): таблицы служебных страниц на телефоне — карточками, без прокрутки
   вбок. Класс table--cards и data-label у ячеек ставит сборка по шапке таблицы (src/lib/table-cards.ts).
   Строка — карточка: первая ячейка — заголовок, у остальных над значением подпись колонки; ячейки шапки скрыты
   только с экрана, каждая как .sr-only (читалки их находят). Шире 760 px таблица прежняя. */
@media (max-width:760px){
  :not(.table-wrap)>.table.table--cards{display:block;min-width:0;max-width:none;overflow:visible;font-size:.9375rem}
  .table--cards thead,.table--cards tbody,.table--cards tr,.table--cards td{display:block}
  .table--cards thead th{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .table--cards tbody tr{padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--d8-surface-2)}
  .table--cards tbody tr+tr{margin-top:10px}
  .table.table--cards td{padding:0;border:0;line-height:1.5;overflow-wrap:anywhere}
  .table--cards td+td{margin-top:10px}
  .table--cards td:first-child{font-family:var(--font-head);font-weight:700;font-size:1rem;line-height:1.35;color:var(--text-0)}
  .table--cards tbody tr:hover td{background:none}
  :not(.table-wrap)>.table.table--cards td:first-child::before{content:none}
  :not(.table-wrap)>.table.table--cards td+td[data-label]::before{content:attr(data-label);display:block;width:auto;height:auto;margin-bottom:3px;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
}

/* Ответ владельца 28.09 (docs/CHANGES.md С5): таблицы статей с текстом в ячейках — тоже карточками (какие —
   решает сборка, src/lib/table-cards.ts phoneLayout). Раскладка — правила выше; здесь цвета листа статьи
   (токены палитры главной, tokens.css — лист тёмный с 28.09, Ц1) и сброс рамок и отступов ячеек, которые дают
   таблицам статей site.css и articles.css. Здесь, а не в articles.css: лист rtp-i-volatilnost его не грузит. */
@media (max-width:760px){
  .article-content .table.table--cards{margin:1.2em 0;border:0;border-radius:0;background:none}
  .article-content .table.table--cards thead th{padding:0;border:0}
  .article-content .table--cards tbody tr{border:1px solid var(--d8-line-2);background:var(--d8-surface-2)}
  .article-content .table.table--cards td{padding:0;border:0;color:var(--d8-text-2)}
  .article-content .table--cards tbody tr:nth-child(even) td,.article-content .table--cards tbody tr:hover td{background:none}
  .article-content .table.table--cards td:first-child{color:var(--d8-text-1)}
  .article-content .table.table--cards td+td[data-label]::before{color:var(--d8-text-3)}
}

/* =========================================================================
   Техническая проверка 28.09 — адаптивность шаблонов (docs/CHANGES.md, Т10–Т19)
   ========================================================================= */

/* Т12-а (MISS-1): слово или адрес, который не помещается в строку, переносится, а не уходит за край — только там,
   где текст обрезался: лист статьи (адреса реестров в «Кратко» kak-proverit-licenziyu на 320–360 px) и H1 героев.
   У H1 это страховка: единственное слово, которое не помещалось, — «конфиденциальности» на /privacy/ — делится по
   мягкому переносу в тексте страницы (Т12-б); автоматических переносов у H1 нет. Слово, которое помещается в строку
   целиком, не делится никогда (break-word, не anywhere: ширины колонок и таблиц не меняются). От 400 px мягкий перенос
   в H1 не действует: там слово помещается в строку целиком, а перенос делил бы его и тогда («Политика конфиденци- /
   альности» на 422–538 px вместо «Политика / конфиденциальности»). */
.article-content,:is(.hero,.brand-hero,.article-hero) h1{overflow-wrap:break-word}
@media (min-width:400px){:is(.hero,.brand-hero,.article-hero) h1{-webkit-hyphens:none;hyphens:none}}

/* Т10 (RESP-4): страницы брендов на телефоне. Поле страницы — 14 px, как у остальных (было 24); до 480 px поля
   секции и вложенных блоков меньше (текст шёл по 17–22 знака в строке при 320 px); «Журнал наблюдений» — дата над
   записью, а не колонкой 92 px сбоку; значок «!» у заметок — в строке с текстом. */
@media (max-width:560px){
  .brand-page .container{width:min(calc(100% - 28px),var(--brand-w))}
}
@media (max-width:480px){
  .brand-section{padding:20px 16px}
  .brand-section :is(.card,.note,.callout,.stat-tile,.fact-rich,.pr-card,.gsel-box,.mb-card){padding:14px}
  .brand-section :is(.faq details,.disclosure,.lic-card){padding-inline:14px}
  .brand-section .bx-log div{flex-direction:column;gap:2px}
  .brand-section .bx-cons li{padding:12px 14px}
  .brand-section .bx-cons li::before{position:static;float:left;margin:0 10px 2px 0}
}

/* Т10 (RESP-4): лист статьи и категории на телефоне — поля листа 16 px (было 24), у «Кратко», врезок, цитат, итогов,
   шагов, FAQ — 12–14 px (у «Кратко» текст шёл по 19–20 знаков при 320 px); номер шага — в строке с текстом, текст
   шага под ним во всю ширину (было поле 52 px слева). «body …» — весомее тех же правил в articles.css (он ниже). */
@media (max-width:480px){
  .article-content{padding:22px 16px}
  /* «Кратко» — рамка с маркерами списка внутри листа: поля 10–12 px, отступ маркера 1em, пункты 15 px */
  body .article-content .article-tldr{padding:12px 12px 12px 10px}
  body .article-content .article-tldr ul{padding-left:1em}
  body .article-content .article-tldr li{font-size:.9375rem}
  body .article-content :is(.callout,blockquote){padding:14px}
  body .article-content ul.takeaways{padding:12px 14px}
  body .article-content ul.takeaways li{padding-left:22px}
  body .article-content ol.steps li{padding:12px 14px}
  body .article-content ol.steps li::before{position:static;float:left;margin:0 10px 2px 0}
  body .article-content :is(.faq-item,details.faq-item){padding:2px 14px}
  body .article-content>p:is(.lead,.article-outro){padding:14px}
  body .responsible{padding:14px}
}

/* Т10: самые узкие телефоны (до 359 px) — секции бренда, полоса перехода и лист статьи во всю ширину экрана, без
   боковых рамок и скруглений, поле 14 px: с двумя рамками (секция и блок в ней) тексту во вложенном блоке оставалось
   ≈ 230 px — 26 знаков. Линии сверху и снизу остаются; герой бренда — прежний. От 360 px — в рамках, как было. */
@media (max-width:359.98px){
  .brand-section,.brand-cta-band{margin-inline:-14px;border-radius:0;border-inline:0;padding-inline:14px}
  .article-content{margin-inline:-14px;border-radius:0;padding-inline:14px;
    box-shadow:inset 0 1px 0 var(--d8-line-2),inset 0 -1px 0 var(--d8-line-2)}
  .brand-section .bx-cons li{padding-inline:12px}
}

/* Т13 (MISS-4, RESP-17): таблица, которая не помещается и прокручивается вбок, растворяется у края, за которым
   есть продолжение (слева — когда уже прокрутили, справа — пока не дошли до конца). Маска идёт за прокруткой
   (animation-timeline); таблица, которая помещается, не маскируется. Браузер без scroll-timeline — без подсказки.
   !important — чтобы подсказку не выключало правило prefers-reduced-motion выше: это не движение, а след прокрутки. */
@property --d8-fade-l{syntax:"<length>";inherits:false;initial-value:0px}
@property --d8-fade-r{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes d8-scroll-edges{
  from{--d8-fade-l:0px;--d8-fade-r:32px}
  8%{--d8-fade-l:32px}
  92%{--d8-fade-r:32px}
  to{--d8-fade-l:32px;--d8-fade-r:0px}
}
@supports (animation-timeline:scroll()){
  .table-wrap{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--d8-fade-l),#000 calc(100% - var(--d8-fade-r)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--d8-fade-l),#000 calc(100% - var(--d8-fade-r)),transparent);
    animation:d8-scroll-edges linear both!important;animation-timeline:scroll(self inline)!important
  }
  /* таблица без обёртки прокручивается сама: до 760 px (MOB-1 выше), в листе статьи — до 640 px (articles.css) */
  @media (max-width:760px){
    :not(.table-wrap)>.table:not(.table--cards){
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--d8-fade-l),#000 calc(100% - var(--d8-fade-r)),transparent);
      mask-image:linear-gradient(90deg,transparent,#000 var(--d8-fade-l),#000 calc(100% - var(--d8-fade-r)),transparent);
      animation:d8-scroll-edges linear both!important;animation-timeline:scroll(self inline)!important
    }
  }
}

/* Т14 (RESP-5): мера строки на компьютере ≈ 80 знаков (было 124–158): абзацы, простые списки и цитаты в разделах
   и карточках служебных страниц, хабов и брендов — не шире 40em (em, а не ch: у Inter «0» в 0,625 em); карточки и
   сетки — прежней ширины. У брендов так же записи «Журнала наблюдений» и заметки «На заметку». Лист категории
   статей — не шире 760 px, по центру (как лист статей с оглавлением); список результатов поиска — не шире 640 px
   (как поле поиска). Т14-а: не внутри листа статьи (.article-content — у него своя ширина), не у статей с оглавлением
   вообще (блоки после .article-layout — подпись автора, подборки) и не у вводного абзаца .lead (своя мера 62ch). */
.site-main :is(.section,.card,.callout,.note,.review-card,.brand-section,.faq details):not(.article-content *,.article-layout~*,.article-layout~* *)>:is(p:not(.lead),ul:not([class]),ol:not([class]),ul.list,ol.list,blockquote),
.site-main :is(.hero,.brand-section)>p:not(.lead),.brand-section .bx-log p{max-width:40em}
.brand-section .bx-cons{max-width:calc(40em + 60px)}
@media (min-width:900px){.site-main>.container>.article-content{max-width:760px;margin-inline:auto}}
.search-results{max-width:640px}

/* Т20 (RESP-14): сетка без числа колонок (.grid без cols-N) была одной колонкой на любой ширине — карточки по 1146 px
   друг под другом; теперь колонки не уже 280 px: на компьютере 3–4 в ряд, в листе статьи 2, на телефоне одна */
.grid:not(.cols-2):not(.cols-3):not(.cols-4){grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}

/* Т18 (RESP-12): служебная страница — первый раздел после героя с отступом, как между разделами (был вплотную) */
.site-main>.container:has(>.hero)+.container>.section:first-child{margin-top:clamp(28px,5vw,56px)}