/* ════════════════════════════════════════════════════════════════════════
   ratings.css v5 — полированный современный слой для rating-страниц
   Подключается ПОСЛЕ home/reflect.css, home/home.css, ratings.super.css.
   Самодостаточный: содержит стили шапки/футера/breadcrumbs (на случай
   если main.css не подключён).
   Эстетика: dark + bento-grid + glassmorphism + фиолетовый акцент.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Глобальный reset (только базовый, чтобы не ломать main стили) ────── */
body.ratings-premiumtech *,
body.ratings-premiumtech *::before,
body.ratings-premiumtech *::after { box-sizing: border-box; }

body.ratings-premiumtech {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" on, "cv10" on, "calt" off, "liga" off;
  overflow-wrap: break-word; /* ТИ10: слово шире строки (при крупном шрифте браузера) переносится, а не срезается краем блока */
}

body.ratings-premiumtech img { max-width: 100%; height: auto; display: block; }
body.ratings-premiumtech a { color: var(--d8-link); text-decoration: none; }
body.ratings-premiumtech a:hover { color: var(--d8-link-hover); }
/* Ссылка внутри текста видна не только цветом (WCAG 1.4.1; axe link-in-text-block; ТИ2) — подчёркнута, как в статьях (site.css .prose a) */
body.ratings-premiumtech :is(p, .faq-a, td, dd) a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* ─── Скип-линк ──────────────────────────────────────────────────────── */
body.ratings-premiumtech .skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--d8-violet); color: var(--d8-on-accent);
  padding: 8px 16px; z-index: 999;
  font-weight: 700; font-size: .8125rem;
  border-radius: 0 0 8px 0;
}
body.ratings-premiumtech .skip-link:focus { top: 0; }

/* ─── ШАПКА ──────────────────────────────────────────────────────────── */
/* Шапка сайта — header.css (одна на все страницы, docs/CHANGES.md Ш1): position: fixed, высота --hdr-h.
   Страница начинается под ней; переход по якорю останавливает цель под ней. */
body.ratings-premiumtech { padding-top: var(--hdr-h, 72px); }
body.ratings-premiumtech :where([id]) { scroll-margin-top: calc(var(--hdr-h, 72px) + 16px); }
/* Ш2 (решение 16): body — не контейнер прокрутки. reflect.css даёт ему overflow-x/-y: hidden, и всё липкое
   внутри (боковое меню рейтингов) липло к body, который сам не прокручивается, — то есть не липло никогда.
   clip обрезает горизонтальный вылет так же, как hidden, но прокрутки у body не заводит (браузер без clip
   оставляет hidden — как было). */
body.ratings-premiumtech { overflow-x: hidden; overflow-x: clip; overflow-y: visible; }
/* с этим заработала и липкая строка заголовков большой таблицы сравнения (ratings.super.css): от 1280 px, где
   таблица не в прокручиваемой обёртке, она липнет под шапкой, а не за ней. На 721–1279 px таблица прокручивается
   вбок в своей обёртке (MOB-1, ниже) и липкая строка отсчитывает top от обёртки — там остаётся top: 0, иначе
   строка съезжает на данные (Ш2-а). */
@media (min-width: 1280px) {
  body.ratings-premiumtech .super-table thead th { top: var(--hdr-h, 72px); }
}

/* ─── BREADCRUMBS ────────────────────────────────────────────────────── */
body.ratings-premiumtech .breadcrumbs {
  padding: 14px 0;
  border-bottom: 1px solid var(--d8-line-1);
  background: rgba(3, 0, 20, 0.4);
}
body.ratings-premiumtech .breadcrumbs .container,
body.ratings-premiumtech .breadcrumbs .crumbs-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 0 24px;
}
body.ratings-premiumtech .crumbs, body.ratings-premiumtech .crumbs-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .8125rem; color: var(--d8-text-3);
}
body.ratings-premiumtech .crumb-link {
  color: var(--d8-text-2);
  transition: color .15s;
}
body.ratings-premiumtech .crumb-link:hover { color: var(--d8-link); }
body.ratings-premiumtech .crumb-sep { opacity: 0.45; }
body.ratings-premiumtech .crumb-current { color: var(--d8-text-1); }

@media (max-width: 860px) {
  body.ratings-premiumtech .breadcrumbs .container,
  body.ratings-premiumtech .breadcrumbs .crumbs-inner { padding: 0 16px; }
}

/* ─── ФУТЕР ──────────────────────────────────────────────────────────── */
body.ratings-premiumtech .site-footer {
  margin-top: 80px;
  padding: 48px 0 32px;
  background: var(--d8-bg);
  border-top: 1px solid var(--d8-line-2);
  color: var(--d8-text-3);
  font-size: .875rem;
  line-height: 1.55;
}
body.ratings-premiumtech .site-footer .container,
body.ratings-premiumtech .site-footer .footer-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 0 24px;
}
body.ratings-premiumtech .footer-inner { display: grid; gap: 24px; }
body.ratings-premiumtech .footer-disclaimer {
  display: flex; align-items: flex-start; gap: 16px;
}
body.ratings-premiumtech .badge-18 {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--d8-gradient);
  color: var(--d8-on-accent);
  font-family: "Bebas Neue", sans-serif;
  font-size: .9375rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
}
body.ratings-premiumtech .footer-disclaimer p { margin: 0; max-width: 880px; }
body.ratings-premiumtech .footer-links {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--d8-line-1);
}
body.ratings-premiumtech .footer-links a {
  color: var(--d8-text-3);
  font-size: .8125rem;
  transition: color .15s;
}
body.ratings-premiumtech .footer-links a:hover { color: var(--d8-link); }
body.ratings-premiumtech .footer-meta { color: var(--d8-text-3); font-size: .75rem; }

@media (max-width: 860px) {
  body.ratings-premiumtech .site-footer { padding: 36px 0 28px; margin-top: 56px; }
  body.ratings-premiumtech .site-footer .container,
  body.ratings-premiumtech .site-footer .footer-inner { padding: 0 16px; }
}

/* Цвета — общие цвета сайта, снятые с главной (/assets/css/tokens.css, docs/CHANGES.md Ц1); --rt-* — ссылки на
   них. Места 1–3 (золото, серебро, бронза) — свои: они что-то значат. */
:root {
  --rt-bg:        var(--d8-bg);
  --rt-bg-2:      var(--d8-bg);
  --rt-glass:     var(--d8-surface-3);
  --rt-glass-2:   var(--d8-surface-5);
  --rt-line:      var(--d8-line-2);
  --rt-line-on:   var(--d8-accent-line);

  --rt-ink:       var(--d8-text-1);
  --rt-ink-2:     var(--d8-text-2);
  --rt-ink-3:     var(--d8-text-3);

  --rt-acc:       var(--d8-violet);
  --rt-acc-2:     var(--d8-pink);
  --rt-acc-3:     var(--d8-blue);
  --rt-grad:      var(--d8-gradient);
  --rt-grad-soft: linear-gradient(135deg, rgba(229,156,255,0.18) 0%, rgba(156,178,255,0.10) 100%);

  --rt-gold:      #FFD27A;
  --rt-silver:    #D8DAF5;
  --rt-bronze:    #E0A57A;

  --rt-r-sm: 10px;
  --rt-r:    16px;
  --rt-r-lg: 22px;

  --rt-glow:     0 8px 32px rgba(186,156,255,0.28), 0 0 0 1px rgba(186,156,255,0.18) inset;
  --rt-glow-soft:0 4px 24px rgba(0,0,0,0.45), 0 0 0 1px var(--rt-line) inset;
}

/* фон — ровный фон главной (Ц1): без свечений на всю страницу; свечение — у героя с чёрной дырой */
body.ratings-premiumtech {
  background: var(--rt-bg);
  color: var(--rt-ink);
}

/* ─── СЖАТЫЙ HERO С ЧЁРНОЙ ДЫРОЙ ───────────────────────────────────────── */
.rating-hero-compact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 56px 0 48px;
  min-height: 360px;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--rt-line);
}
.rating-hero-compact::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(186,156,255,0.18), transparent 70%),
    linear-gradient(180deg, rgba(3,0,20,0) 0%, rgba(3,0,20,0.85) 100%);
  z-index: 0; pointer-events: none;
}
.rating-hero-compact .rh-content {
  position: relative; z-index: 2;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 20px;
  text-align: center;
}
.rating-hero-compact .rh-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  /* лиловая подложка на тёмном стекле: кольцо чёрной дыры под значком не просвечивает (Т33, PAL-5) */
  background: linear-gradient(var(--d8-accent-bg), var(--d8-accent-bg)), var(--d8-bg-glass);
  border: 1px solid var(--d8-accent-line);
  border-radius: 999px;
  font-size: .8125rem; font-weight: 500;
  color: var(--rt-acc-2);
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rating-hero-compact .rh-badge::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%; background: var(--rt-acc-2);
  box-shadow: 0 0 12px var(--rt-acc-2);
}
.rating-hero-compact h1 {
  font-family: "Manrope", -apple-system, sans-serif;
  font-size: clamp(1.875rem, 4.8vw, 3.375rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  background: linear-gradient(180deg, #ffffff 0%, #e2dcff 70%, #c5bdf5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-wrap: balance;
}
.rating-hero-compact .rh-lead {
  font-family: "Manrope", -apple-system, sans-serif;
  font-size: clamp(.9375rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  font-weight: 400;
  color: rgba(243, 241, 255, 0.78);
  max-width: 720px;
  margin: 0 auto 24px;
  text-wrap: pretty;
  text-shadow: var(--d8-text-halo);
}
/* мелкие подписи на кадре чёрной дыры — светлые и с ореолом, не ниже AA (Т33, PAL-5) */
.rating-hero-compact .rh-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px;
  font-size: .8125rem; color: var(--d8-text-1);
  text-shadow: var(--d8-text-halo);
}
.rating-hero-compact .rh-meta strong { color: var(--rt-ink); font-weight: 600; }

/* Слой чёрной дыры внутри сжатого hero — фоном, не сбоку */
.rating-hero-compact .rh-blackhole {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.65;
}
.rating-hero-compact .rh-blackhole video,
.rating-hero-compact .rh-blackhole .lazy-video {
  position: absolute;
  top: 50%; left: 50%;
  width: 140%; height: auto;
  min-width: 1440px;
  transform: translate(-50%, -50%);
  object-fit: cover;
  mix-blend-mode: screen;
}
/* Решение владельца 14 (CHANGES 27.09 «Р14а»): в блоке видео сразу видна подложка — первый кадр видео (на телефоне —
   центральные ¾ кадра, home/HeroVideo.astro); видео (reflect.js, после загрузки страницы) проявляется поверх неё.
   Оба — в одном блоке 16:9, вписаны (contain): копия для телефона стоит в том же масштабе, что целый кадр. Экраном
   смешивается весь блок .lazy-video, подложка и видео внутри — обычным наложением (иначе видео поверх такой же
   подложки было бы ярче). */
.rating-hero-compact .rh-blackhole .lazy-video { opacity: 1; }
.rating-hero-compact .rh-blackhole .lazy-video video,
.rating-hero-compact .rh-blackhole .lazy-video-poster {
  position: absolute;
  top: 50%; left: 50%;
  width: 140%; height: auto;
  min-width: 1440px; max-width: none;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  object-fit: contain;
  mix-blend-mode: normal;
}
.rating-hero-compact .rh-blackhole .lazy-video video { opacity: 0; transition: .75s cubic-bezier(.6, .6, 0, 1) opacity; }
.rating-hero-compact .rh-blackhole .lazy-video-loaded video { opacity: 1; }
.rating-hero-compact .rh-blackhole .lazy-video.is-phone video {
  -webkit-mask-image: linear-gradient(90deg, transparent 12.5%, #000 22%, #000 78%, transparent 87.5%);
  mask-image: linear-gradient(90deg, transparent 12.5%, #000 22%, #000 78%, transparent 87.5%);
}
.rating-hero-compact .rh-blackhole::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(3,0,20,0.85) 70%);
  pointer-events: none;
}

@media (max-width: 860px) {
  .rating-hero-compact { padding: 40px 0 36px; min-height: 280px; }
  .rating-hero-compact .rh-blackhole { opacity: 0.5; }
  .rating-hero-compact .rh-blackhole video { min-width: 720px; width: 200%; }
}

/* ─── ОТКАТ скучных стилей контентной зоны main.css/super.css ───────────── */
body.ratings-premiumtech .rating-content { color: var(--rt-ink-2); }
body.ratings-premiumtech .rating-content h2 {
  font-family: "Manrope", -apple-system, sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--rt-ink);
  text-wrap: balance;
}
body.ratings-premiumtech .rating-content .muted {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--d8-text-3);
  margin-bottom: 24px;
  max-width: 760px;
}
body.ratings-premiumtech .rating-content .section {
  padding: 36px 0;
  border-top: 1px solid var(--d8-line-1);
}
body.ratings-premiumtech .rating-content .section:first-child { border-top: none; padding-top: 24px; }
body.ratings-premiumtech .rating-content h3 { color: var(--rt-ink); }
body.ratings-premiumtech .rating-content p { color: var(--rt-ink-2); }

/* ─── RATING LAYOUT (grid sidebar + content) ────────────────────────── */
body.ratings-premiumtech .container.is-wide {
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px;
}
body.ratings-premiumtech .rating-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 32px 0;
}
@media (max-width: 1100px) {
  body.ratings-premiumtech .rating-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
}

/* ─── СОВРЕМЕННЫЙ SIDEBAR ─────────────────────────────────────────────── */
/* компьютер (от 1024 px): прилипает под шапкой, не выше экрана — длинный список прокручивается внутри (Ш2) */
body.ratings-premiumtech .rating-sidebar {
  position: sticky; top: calc(var(--hdr-h, 72px) + 16px);
  align-self: start;
  max-height: calc(100vh - var(--hdr-h, 72px) - 32px);
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(186,156,255,0.25) transparent;
}
body.ratings-premiumtech .rating-sidebar::-webkit-scrollbar { width: 6px; }
body.ratings-premiumtech .rating-sidebar::-webkit-scrollbar-thumb {
  background: rgba(186,156,255,0.22); border-radius: 4px;
}

body.ratings-premiumtech .rating-sidebar .sidebar-sticky {
  background: var(--d8-surface-2);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--d8-line-1);
  border-radius: 16px;
  padding: 20px 18px;
}
body.ratings-premiumtech .rating-sidebar .sidebar-head {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--d8-line-1);
}
body.ratings-premiumtech .rating-sidebar .sidebar-title {
  color: var(--d8-text-1);
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -0.005em;
  text-transform: none;
  margin: 0 0 2px;
  line-height: 1.2;
}
body.ratings-premiumtech .rating-sidebar .sidebar-sub {
  color: var(--d8-text-3);
  font-size: .75rem;
}

body.ratings-premiumtech .rating-sidebar .rating-nav {
  display: flex; flex-direction: column;
  gap: 0;
}
body.ratings-premiumtech .rating-sidebar .rating-nav > .nav-item {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--d8-line-2);
}
body.ratings-premiumtech .rating-sidebar .nav-group {
  padding: 14px 0;
  border-top: 1px solid var(--d8-line-2);
  position: relative;
}
body.ratings-premiumtech .rating-sidebar .nav-group:first-of-type { border-top: none; padding-top: 4px; }
body.ratings-premiumtech .rating-sidebar .nav-group::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 24px; height: 1px;
  background: linear-gradient(90deg, var(--rt-acc-2), transparent);
  opacity: 0.65;
}
body.ratings-premiumtech .rating-sidebar .nav-group:first-of-type::before { display: none; }
body.ratings-premiumtech .rating-sidebar .nav-group-title {
  font-size: .75rem; /* MOB-13: не мельче 12 px (было 10.5) */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rt-acc-2);
  margin: 6px 8px 6px;
  opacity: 0.82;
}
body.ratings-premiumtech .rating-sidebar .nav-list {
  list-style: none;
  margin: 0; padding: 0;
}
body.ratings-premiumtech .rating-sidebar .nav-list li { margin: 0; }
body.ratings-premiumtech .rating-sidebar .nav-item {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--d8-text-2);
  font-size: .84375rem;
  line-height: 1.35;
  text-decoration: none;
  transition: background .15s, color .15s, padding-left .15s;
  border-left: 2px solid transparent;
}
body.ratings-premiumtech .rating-sidebar .nav-item:hover {
  background: var(--d8-accent-bg);
  color: var(--d8-text-1);
  border-left-color: var(--d8-accent-line);
  padding-left: 14px;
}
body.ratings-premiumtech .rating-sidebar .nav-item.is-active {
  background: linear-gradient(90deg, rgba(229,156,255,0.15), rgba(156,178,255,0.05));
  color: var(--d8-text-1);
  border-left-color: var(--rt-acc-2);
  font-weight: 600;
  padding-left: 14px;
}

body.ratings-premiumtech .rating-sidebar .sidebar-links {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--d8-line-1);
  display: flex; flex-direction: column; gap: 2px;
}
body.ratings-premiumtech .rating-sidebar .side-link {
  display: block;
  padding: 7px 12px;
  font-size: .78125rem;
  color: var(--d8-text-3);
  border-radius: 6px;
  text-decoration: none;
  transition: color .15s, background .15s;
}
body.ratings-premiumtech .rating-sidebar .side-link::before {
  content: "↓ "; color: var(--rt-acc-2); opacity: 0.6;
}
body.ratings-premiumtech .rating-sidebar .side-link:hover {
  color: var(--d8-text-1);
  background: var(--d8-surface-3);
}

/* ─── МОБИЛЬНЫЙ DRAWER для sidebar ────────────────────────────────────── */
.sidebar-trigger {
  display: none;
  width: 100%;
  padding: 14px 18px;
  background: var(--d8-surface-3);
  border: 1px solid var(--d8-line-3);
  border-radius: 12px;
  color: var(--d8-text-1);
  font-family: "Manrope", sans-serif;
  font-size: .875rem; font-weight: 600;
  cursor: pointer;
  text-align: left;
  align-items: center; justify-content: space-between;
  margin: 0 0 16px;
  transition: background .15s, border-color .15s;
}
.sidebar-trigger:hover {
  background: var(--d8-accent-bg);
  border-color: var(--d8-accent-line);
}
.sidebar-trigger .sb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--rt-grad);
  color: var(--d8-on-accent);
  font-size: .875rem; font-weight: 800;
  margin-right: 10px;
}
.sidebar-trigger .sb-count {
  font-size: .75rem; color: var(--d8-text-3);
  font-weight: 500;
}

/* телефон и планшет (до 1023 px, было до 1100 px — Ш2): список рейтингов — выдвижная панель поверх шапки */
@media (max-width: 1023.98px) {
  body.ratings-premiumtech .rating-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  body.ratings-premiumtech .rating-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(320px, 88vw);
    max-height: none;
    height: 100%;
    background: var(--d8-bg-glass-strong);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    z-index: 260; /* над шапкой сайта (z-index 200, header.css) */
    padding: 24px 18px 32px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.22,1,.36,1), visibility 0s linear .28s;
    border-right: 1px solid var(--d8-line-1);
    box-shadow: 8px 0 32px rgba(0,0,0,0.5);
    visibility: hidden; /* П4: закрытый список — вне порядка Tab (после выезда; открытый — сразу) */
    /* Ш2-б: панель открывается прокрученной к текущему рейтингу (ratings.js), поэтому прокручивается список
       под крестиком, а не вся панель — крестик всегда на месте */
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  body.ratings-premiumtech .rating-sidebar.is-open { transform: translateX(0); visibility: visible; transition: transform .28s cubic-bezier(.22,1,.36,1); }
  body.ratings-premiumtech .rating-sidebar .sidebar-sticky {
    background: transparent; border: none; padding: 0;
    flex: 1 1 auto; min-height: 0;
    overflow: hidden auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(186,156,255,0.25) transparent;
  }
  .sidebar-trigger { display: flex; }
  .sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(3,0,20,0.65);
    backdrop-filter: blur(4px);
    z-index: 250;
    opacity: 0; pointer-events: none;
    transition: opacity .22s;
  }
  .sidebar-overlay.is-open { opacity: 1; pointer-events: auto; }
  .sidebar-close {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--d8-surface-4);
    border: 1px solid var(--d8-line-3);
    border-radius: 10px;
    color: var(--d8-text-1); font-size: 1.375rem;
    cursor: pointer;
    margin-bottom: 16px;
    line-height: 1;
    flex: none;
    align-self: flex-start;
  }
}
@media (min-width: 1024px) {
  .sidebar-close, .sidebar-overlay { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BENTO-GRID для брендов: ТОП-3 крупные + 15 компактных
   ═══════════════════════════════════════════════════════════════════════ */
.bento-top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin: 8px 0 24px;
}

.bento-card {
  position: relative;
  background: var(--rt-glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-r);
  padding: 20px;
  transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s, background .25s;
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.bento-card::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--rt-grad-soft);
  opacity: 0; transition: opacity .25s;
  z-index: -1;
  border-radius: inherit;
}
.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--rt-line-on);
  box-shadow: var(--rt-glow);
}
.bento-card:hover::before { opacity: 1; }

/* ТОП-1: 6 колонок × 2 ряда */
.bento-card.is-top-1 {
  grid-column: span 6;
  grid-row: span 2;
  background:
    linear-gradient(135deg, rgba(229,156,255,0.10), rgba(156,178,255,0.06)),
    var(--d8-surface-3);
  border-color: rgba(229,156,255,0.40);
}
.bento-card.is-top-1::after {
  content: "★ ЛИДЕР РЕЙТИНГА";
  position: absolute; top: 14px; right: 16px;
  font-size: .75rem; font-weight: 700; letter-spacing: 0.08em; /* MOB-13: не мельче 12 px (было 11) */
  color: var(--rt-gold);
  text-shadow: 0 0 12px rgba(255,210,122,0.5);
}

/* ТОП-2: 3 × 2; ТОП-3: 3 × 2 */
.bento-card.is-top-2, .bento-card.is-top-3 {
  grid-column: span 3;
  grid-row: span 2;
}
.bento-card.is-top-2 { border-color: rgba(216,218,245,0.32); }
.bento-card.is-top-3 { border-color: rgba(224,165,122,0.32); }

/* Остальные: 4 × 1 (по 3 в ряду) */
.bento-card.is-regular {
  grid-column: span 4;
}

.bento-rank {
  position: absolute; top: 14px; left: 18px;
  font-size: .875rem; font-weight: 800;
  color: var(--rt-ink-3);
  letter-spacing: 0.08em;
  z-index: 2;
}
.bento-card.is-top-1 .bento-rank,
.bento-card.is-top-2 .bento-rank,
.bento-card.is-top-3 .bento-rank {
  font-family: "Bebas Neue", -apple-system, sans-serif;
  font-size: 4rem; line-height: 1;
  background: var(--rt-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  top: 18px; left: 22px;
}
.bento-card.is-top-1 .bento-rank { font-size: 6rem; }

.bento-card .bento-brand {
  font-family: "Manrope", -apple-system, sans-serif;
  margin-top: calc(.875rem + 28px); /* ТИ10: место под номером растёт вместе с ним (42 px при 16 px) */
  font-size: 1.375rem; font-weight: 800;
  color: var(--rt-ink);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  line-height: 1.15;
}
/* ТИ10: верх названия = размер номера минус постоянная — при крупном шрифте браузера номер не наезжает на название
   (при 16 px те же 76/62 px, на телефоне 56/48 px) */
.bento-card.is-top-1 .bento-brand { font-size: 2.375rem; margin-top: calc(6rem - 20px); letter-spacing: -0.025em; }
.bento-card.is-top-2 .bento-brand,
.bento-card.is-top-3 .bento-brand { font-size: 1.75rem; margin-top: calc(4rem - 2px); letter-spacing: -0.02em; }

.bento-card .bento-score {
  font-size: .75rem;
  color: var(--rt-acc-2);
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bento-card .bento-note {
  font-size: .84375rem;
  color: var(--d8-text-2);
  line-height: 1.55;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.bento-card.is-top-1 .bento-note { font-size: .9375rem; line-height: 1.6; }

.bento-card .bento-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.bento-tag {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .75rem; font-weight: 600; /* MOB-13: не мельче 12 px (было 11) */
  background: var(--d8-surface-4);
  border: 1px solid var(--d8-line-3);
  color: var(--rt-ink-2);
  letter-spacing: 0.02em;
}
.bento-tag.is-accent {
  background: var(--d8-accent-bg-strong);
  border-color: var(--d8-accent-line);
  color: var(--rt-acc-2);
}

.bento-card .bento-actions {
  margin-top: auto;
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
/* ТОП-2 и ТОП-3 — узкие колонки, кнопки в столбик чтобы не вылезали */
.bento-card.is-top-2 .bento-actions,
.bento-card.is-top-3 .bento-actions { flex-direction: column; }
.bento-card.is-top-2 .bento-actions .bento-btn,
.bento-card.is-top-3 .bento-actions .bento-btn { width: 100%; flex: none; }

.bento-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: .8125rem; font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--rt-line);
  background: var(--d8-surface-3);
  color: var(--rt-ink);
  transition: all .18s;
  white-space: nowrap;
  flex: 1;
}
.bento-btn:hover {
  background: var(--d8-surface-5);
  border-color: var(--rt-line-on);
  transform: translateY(-1px);
}
.bento-btn.is-primary {
  background: var(--rt-grad);
  color: var(--d8-on-accent);
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(186,156,255,0.30);
}
.bento-btn.is-primary:hover {
  box-shadow: 0 6px 28px rgba(186,156,255,0.50);
  filter: brightness(1.10);
}

/* ─── KPI-карточки (bento) ───────────────────────────────────────────── */
.kpi-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 14px 0 24px;
}
.kpi-bento .kpi {
  background: var(--rt-glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-r);
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, border-color .25s;
}
.kpi-bento .kpi:hover {
  transform: translateY(-3px);
  border-color: var(--rt-line-on);
}
.kpi-bento .kpi::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(186,156,255,0.20), transparent 70%);
  pointer-events: none;
}
.kpi-bento .kpi-value {
  font-family: "Bebas Neue", -apple-system, sans-serif;
  font-size: 2.375rem; line-height: 1;
  background: var(--rt-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
  font-weight: 700;
}
.kpi-bento .kpi-label {
  color: var(--rt-ink-2); font-size: .8125rem;
  line-height: 1.45;
}

/* ─── Критерии — современные карточки с glow ────────────────────────── */
body.ratings-premiumtech .criteria-card {
  background: var(--rt-glass) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--rt-line) !important;
  border-radius: var(--rt-r) !important;
  transition: border-color .25s, transform .2s;
}
body.ratings-premiumtech .criteria-card:hover {
  border-color: var(--rt-line-on) !important;
  transform: translateY(-3px);
}

/* ─── FAQ — accordion с glassmorphism ────────────────────────────────── */
body.ratings-premiumtech .faq-item,
body.ratings-premiumtech .faq details {
  background: var(--rt-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-r);
  margin: 8px 0;
  overflow: hidden;
  transition: border-color .2s;
}
body.ratings-premiumtech .faq-item[open],
body.ratings-premiumtech .faq details[open] {
  border-color: var(--rt-line-on);
}
body.ratings-premiumtech .faq-item summary,
body.ratings-premiumtech .faq summary {
  list-style: none; cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 1rem; color: var(--rt-ink);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
body.ratings-premiumtech .faq-item summary::-webkit-details-marker,
body.ratings-premiumtech .faq summary::-webkit-details-marker { display: none; }
body.ratings-premiumtech .faq-item summary::after,
body.ratings-premiumtech .faq summary::after {
  content: "+"; font-size: 1.5rem; color: var(--rt-acc-2); transition: transform .25s;
  font-weight: 300; line-height: 1;
}
body.ratings-premiumtech .faq-item[open] summary::after,
body.ratings-premiumtech .faq details[open] summary::after { transform: rotate(45deg); }
body.ratings-premiumtech .faq-item .faq-a,
body.ratings-premiumtech .faq .faq-a {
  padding: 0 22px 18px; color: var(--rt-ink-2);
}

/* ─── Author-card ────────────────────────────────────────────────────── */
body.ratings-premiumtech .author-card {
  background: var(--rt-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--rt-line);
  border-left: 3px solid var(--rt-acc);
  border-radius: var(--rt-r);
  padding: 22px 26px;
  margin-top: 32px;
}

/* ─── Блок «Что значит быстрый вывод» — раскрытие сущностей ─────────── */
.entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 14px 0 24px;
}
.entity-card {
  position: relative;
  background: var(--d8-surface-2);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--d8-line-2);
  border-radius: 16px;
  padding: 22px;
  transition: border-color .22s, transform .22s, box-shadow .22s;
  overflow: hidden;
}
.entity-card::before {
  content: "";
  position: absolute; top: -40%; right: -30%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(186,156,255,0.18), transparent 70%);
  pointer-events: none;
  transition: opacity .25s;
  opacity: 0.6;
}
.entity-card:hover {
  border-color: var(--d8-accent-line);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(186,156,255,0.18);
}
.entity-card:hover::before { opacity: 1; }
.entity-card .ent-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(229,156,255,0.18), rgba(156,178,255,0.10));
  border: 1px solid var(--d8-accent-line);
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.125rem;
  background-clip: padding-box;
  margin-bottom: 14px;
  position: relative;
  color: var(--rt-acc-2);
  letter-spacing: 0.04em;
}
.entity-card h3 {
  font-family: "Manrope", sans-serif;
  font-size: 1.125rem; font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--d8-text-1);
  margin: 0 0 8px;
  line-height: 1.25;
}
.entity-card p {
  font-size: .875rem; line-height: 1.55;
  color: var(--d8-text-2);
  margin: 0 0 10px;
  text-wrap: pretty;
}
.entity-card .ent-fact {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 700;
  color: var(--rt-acc-2);
  background: var(--d8-accent-bg);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.entity-card .ent-fact::before {
  content: "✓"; font-size: .6875rem; line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ АДАПТИВ
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .bento-card.is-top-1 { grid-column: span 12; grid-row: span 1; }
  .bento-card.is-top-2, .bento-card.is-top-3 { grid-column: span 6; grid-row: span 1; }
  .bento-card.is-regular { grid-column: span 6; }
}

@media (max-width: 640px) {
  .bento-top { grid-template-columns: 1fr; gap: 12px; }
  .bento-card.is-top-1, .bento-card.is-top-2, .bento-card.is-top-3, .bento-card.is-regular {
    grid-column: span 1;
    grid-row: auto;
  }
  .bento-card { padding: 18px 16px; }
  .bento-card.is-top-1 .bento-rank { font-size: 4.5rem; }
  .bento-card.is-top-1 .bento-brand { font-size: 1.625rem; margin-top: calc(4.5rem - 16px); }
  .bento-card.is-top-2 .bento-brand, .bento-card.is-top-3 .bento-brand { font-size: 1.375rem; margin-top: calc(4rem - 16px); }
  .bento-card .bento-actions { flex-direction: column; }
  .bento-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   reduced motion
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .bento-card:hover, .kpi:hover, .bento-btn:hover { transform: none !important; }
}

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

/* MOB-1, MOB-7: таблица не обрезается, а прокручивается внутри своей обёртки.
   До 720 px сравнительные таблицы — карточки (ratings.super.css), от 1280 px помещаются. */
body.ratings-premiumtech .table-wrap { overflow-x: auto; }
@media (min-width: 721px) and (max-width: 1279.98px) {
  body.ratings-premiumtech .table-wrap--super { overflow-x: auto; }
  body.ratings-premiumtech .section > .super-table {
    display: block; min-width: 0; max-width: 100%; overflow-x: auto;
  }
}

/* Видео заставки на телефоне, при prefers-reduced-motion и Save-Data — см. «Р14а» у .rh-blackhole выше: вместо
   свечения на CSS (MOB-9) там подложка с первым кадром видео. */

/* MOB-12: поля калькуляторов на телефоне не мельче 16 px — iOS не увеличивает страницу при фокусе
   (:root поднимает вес правила над стилями страниц вида «.md-cc__field input») */
@media (max-width: 760px) {
  :root :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Техническая проверка 28.09 — адаптивность (docs/CHANGES.md, Т12–Т14)
   ═══════════════════════════════════════════════════════════════════════ */

/* Т12-а (MISS-1): значение KPI, которое не помещается в карточку, переносится, а не обрезается её рамкой
   («Pragmatic+NetEnt» на /ratings/frispiny/ — на 25–31 px); делится по «+» (<wbr> ставит сборка, Method.astro) */
body.ratings-premiumtech .kpi-bento .kpi-value { overflow-wrap: break-word; }

/* Т13 (MISS-4, RESP-17): обычные таблицы рейтингов (класс table — не сравнительная super-table) были без отступов и
   линий: ячейки с полями, линия под строкой, шапка на подложке и слева. */
body.ratings-premiumtech .rating-content .table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 16px 0; }
body.ratings-premiumtech .rating-content .table :is(th, td) {
  padding: 10px 14px; border-bottom: 1px solid var(--d8-line-2); text-align: left; vertical-align: top;
}
body.ratings-premiumtech .rating-content .table thead th { background: var(--d8-surface-4); color: var(--rt-ink); font-weight: 700; }
body.ratings-premiumtech .rating-content .table-wrap .table { margin: 0; }
/* на телефоне поля ячеек меньше, у крайних колонок снаружи — 0, шапка без подложки (линия под ней): таблица из трёх
   колонок текста (novye-kazino) остаётся в колонке страницы */
@media (max-width: 760px) {
  body.ratings-premiumtech .rating-content .table :is(th, td) { padding: 8px 6px; }
  body.ratings-premiumtech .rating-content .table :is(th, td):first-child { padding-left: 0; }
  body.ratings-premiumtech .rating-content .table :is(th, td):last-child { padding-right: 0; }
  body.ratings-premiumtech .rating-content .table thead th { background: none; border-bottom-color: var(--d8-line-3); }
}

/* Т13: таблица-сравнение брендов (BrandTable, класс table--cards ставит сборка) на телефоне — карточками, как таблицы
   служебных страниц (site.css, решение владельца 17): строка — карточка, первая ячейка — заголовок, у остальных над
   значением подпись колонки (data-label); ячейки шапки скрыты только с экрана. Шире 760 px — таблица. */
@media (max-width: 760px) {
  body.ratings-premiumtech .rating-content .table.table--cards { display: block; font-size: .9375rem; }
  body.ratings-premiumtech .table--cards :is(thead, tbody, tr, td) { display: block; }
  body.ratings-premiumtech .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;
  }
  body.ratings-premiumtech .table--cards tbody tr {
    padding: 14px 16px; border: 1px solid var(--d8-line-2); border-radius: 16px; background: var(--d8-surface-2);
  }
  body.ratings-premiumtech .table--cards tbody tr + tr { margin-top: 10px; }
  body.ratings-premiumtech .rating-content .table.table--cards td { padding: 0; border: 0; line-height: 1.5; }
  body.ratings-premiumtech .table--cards td + td { margin-top: 10px; }
  body.ratings-premiumtech .table--cards td:first-child { font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--rt-ink); }
  body.ratings-premiumtech .table--cards td + td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--d8-text-3);
  }
}

/* ТИ8 (PAL-9): сравнительная таблица на телефоне — карточками (ratings.super.css), но её поля, промежуток «подпись —
   значение» и скругление заданы переменными main.css (--s-4, --s-5, --r-xl), которого на рейтингах нет (и не было на
   старом сайте): карточка без полей, «Удобство10 рук…» слитно. Здесь — те же значения, что задуманы там. */
@media (max-width: 720px) {
  body.ratings-premiumtech .super-table tr { box-sizing: border-box; margin-bottom: 16px; padding: 20px; border-radius: 28px; }
  body.ratings-premiumtech .super-table td { gap: 16px; }
}
/* самые узкие телефоны: длинное значение, которому не хватает места рядом с подписью, уходит под неё во всю ширину карточки */
@media (max-width: 360px) {
  body.ratings-premiumtech .super-table td { flex-wrap: wrap; row-gap: 4px; }
}

/* Т13 (RESP-17): сравнительные таблицы (super-table) на компьютере — линия под строкой, шапка на подложке и слева над
   значениями (была по центру над значениями слева); до 720 px они карточки (ratings.super.css), это не меняется. */
@media (min-width: 721px) {
  body.ratings-premiumtech .super-table :is(th, td) { padding: 7px 12px; border-bottom: 1px solid var(--d8-line-2); text-align: left; }
  /* подложка шапки — поверхность сайта поверх фона страницы: непрозрачная, строки не просвечивают под липкой шапкой */
  body.ratings-premiumtech .super-table thead th {
    background: linear-gradient(var(--d8-surface-4), var(--d8-surface-4)) var(--d8-bg); color: var(--rt-ink);
  }
}

/* Т13 (MISS-4, RESP-17): таблица, которая не помещается и прокручивается вбок, растворяется у края, за которым есть
   продолжение — как в site.css (там же — почему !important). Здесь: обёртка .table-wrap (onlajn-kazino на телефоне),
   сравнительные таблицы на 721–1279 px (обёртка .table-wrap--super или сама таблица, MOB-1 выше). */
@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()) {
  body.ratings-premiumtech .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;
  }
  @media (min-width: 721px) and (max-width: 1279.98px) {
    body.ratings-premiumtech :is(.table-wrap--super, .section > .super-table) {
      -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 знаков (было до 118): абзацы, простые списки и врезки разделов — не
   шире 40em (подписи .muted тоже — у них было 760 px); таблицы и сетки карточек — во всю колонку. */
body.ratings-premiumtech .rating-content :is(.section, .callout) > :is(p, ul:not([class]), ol:not([class])),
body.ratings-premiumtech .rating-content .faq-a { max-width: 40em; }