/* ═══════════════════════════════════════════════════════════════════════
   HostMetrics — дизайн-система из хендоффа
   Источник: design_handoff_hostmetrics/README.md, раздел Design Tokens.

   Стиль плоский: глубину задаёт обводка 1.5px, а не тени. Фон кремовый,
   панели белые, акцент оранжевый, кнопки зелёные. Зазор между панелями —
   всегда 10px.

   Предыдущий файл (11 867 строк, 1807 !important, четыре слоя заплаток)
   заменён целиком: накатывать систему поверх той свалки было невозможно —
   каждое правило требовало !important. Здесь ноль !important, потому что
   спорить больше не с кем. Старый файл: /tmp/style-pre-designsystem.css
   ═══════════════════════════════════════════════════════════════════════ */

/* Шрифты самохостятся в static/fonts/ (fonts.css скачан с Google Fonts и
   переписан на локальные пути): fonts.googleapis.com у части посетителей
   из РФ недоступен или блокируется, и без этого у них весь сайт тихо
   переключался на системный шрифт вместо Golos Text / Roboto Mono. */
@import url("/static/fonts/fonts.css");

/* ── Токены ──────────────────────────────────────────────────────────── */
:root {
  --bg:          #f5f3ec;
  --panel:       #ffffff;
  --ink:         #111114;
  --ink-nested:  #1d1d20;
  --ink-hero:    #0a0b0a;

  --accent:      #23a094;
  --accent-2:    #23a094;
  --yellow:      #ffc900;

  --btn:         #1f9c6b;
  --btn-hover:   #18815a;

  --text:        #111114;
  --text-2:      #5c5c61;
  --text-3:      #83838a;
  --on-dark:     #c9c9ce;
  --mono-dark:   #a0a0a6;

  --field:       #f6f4ed;
  --line:        #111114;
  --hair:        #e7e4d9;

  --ok:   #4cc38a;  --ok-bg:   #e4f1eb;  --ok-text:   #0f7a55;
  --warn: #e0b341;  --warn-bg: #fbf0dc;  --warn-text: #8a5a00;
  --risk: #f0857a;  --risk-bg: #fbe7e4;  --risk-text: #a83a2c;

  --promo-label: #7be3a8;
  --promo-text:  #f1f1f2;
  --note-bg:     #ffe9a8;
  --note-text:   #3a2b00;

  --net-bg:   rgba(29,29,32,.92);
  --net-line: #2a2a2e;

  --s10: 10px; --s12: 12px; --s14: 14px; --s16: 16px;
  --s18: 18px; --s20: 20px; --s22: 22px; --s24: 24px;
  --s28: 28px; --s36: 36px; --s40: 40px; --s44: 44px;

  --r: 10px; --r8: 8px; --r6: 6px;
  --bw: 1.5px;

  --font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1280px;
}

/* ── База ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1 { font: 700 46px/1.03 var(--font); letter-spacing: -.025em;
     text-transform: uppercase; margin: 0 0 var(--s14); }
h2 { font: 600 30px/1.08 var(--font); letter-spacing: -.03em; margin: 0 0 var(--s14); }
h3 { font: 600 17px/1.25 var(--font); letter-spacing: -.02em; margin: 0 0 var(--s10); }
h4 { font: 600 15px/1.3 var(--font); letter-spacing: -.015em; margin: 0 0 var(--s10); }

p { margin: 0 0 var(--s10); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
small { font-size: 12px; }
b, strong { font-weight: 600; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Моно-метки */
.eyebrow, .info-kicker, .blog-kicker, .rail-label,
.poster-meta, .promo-label, .ad-placeholder-meta span,
.gpu-filter-label, .compare-label-icon,
.risk-pill, .live-source span,
.provider-rank span, .breadcrumbs {
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-3);
}
.poster-meta { display: flex; justify-content: space-between; }

.sub, .source-line, .method-note, .section-note, .provider-checked,
.blog-card-summary, .gpu-resource-meta { font-size: 13px; color: var(--text-2); }
.nodata { color: var(--text-3); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.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; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s20); }

/* ── Панели ──────────────────────────────────────────────────────────── */
.card, .hybrid-ranking, .catalog-filter-panel, .blog-article-card,
.blog-featured-card, .glossary-card, .feature-card, .location-risk-card,
.about-proof, .method-section, .gpu-decision-panel,
.compare-card, .energy-zone, .about-split, .about-moderation,
.methodology-glossary, .hoster-section, .gpu-method,
.gpu-provider-summary, .metric-grid > div, .provider-service-grid article,
.data-passport, .gpu-filter-rail, .blog-filters, .compare-picker,
.glossary-tools, .mini-card, .empty-state, .ad, .table-card, .stats,
.gpu-chart, .method-section header + .measurement-plan-grid {
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  padding: var(--s20);
  box-shadow: none;
  color: var(--text);
}
.card > :first-child, .metric-grid > div > :first-child { margin-top: 0; }
.hybrid-ranking, .table-card { padding: 0; overflow: hidden; }

/* Тёмные панели */
.provider-rank,
.monitor-radar, .risk-banner {
  background: var(--ink); border: var(--bw) solid var(--ink);
  border-radius: var(--r); color: #fff; padding: var(--s20);
}
/* .provider-rank и .glossary-hero-mark — вертикальный список подписанных
   строк, так и задумано.    внутри hero, без display:flex тут они схлопывались в вертикальный
   список из-за display:block у <b> и <br> внутри подписи. */
{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.provider-rank span span,
.monitor-radar span { color: var(--mono-dark); }
.provider-rank b b,
.provider-rank a, .monitor-radar a { color: #fff; }

/* Крупный тёмный баннер — одна панель, если у hero нет второй (боковой)
   колонки со статистикой (.compare-hero: только заголовок). */
.poster-main, .compare-hero {
  background: var(--ink-hero); border: var(--bw) solid var(--ink-hero);
  border-radius: var(--r); color: #fff; padding: var(--s36) var(--s40);
}
.poster-main h1, .compare-hero h1 { color: #fff; }
.poster-main h1 span { display: block; }
.poster-main p, .compare-hero p {
  font: 400 12px/1.55 var(--mono); color: var(--on-dark); letter-spacing: .02em;
}
.poster-main .poster-meta span { color: var(--mono-dark); }
.poster-hero { display: grid; grid-template-columns: minmax(0,1.5fr) 320px;
               gap: var(--s36); align-items: end; margin-bottom: var(--s10); }
.poster-side { display: grid; gap: var(--s10); }

/* ── Двухпанельный hero: тёмная панель текста + отдельная панель метрик ──
   (та же идея, что .poster-hero/.poster-main/.net-panel на главной, но
   обобщённая под остальные разделы — раньше текст и цифры были одной общей
   панелью без разделения, из-за чего боковой блок визуально сливался с
   заголовком, а не читался как отдельная карточка). */
.info-hero, .gpu-hero, .monitor-hero, .blog-hero {
  display: grid; grid-template-columns: minmax(0,1.5fr) 340px;
  gap: var(--s24); align-items: stretch; margin-bottom: var(--s10);
}
@media (max-width: 760px) {
  .info-hero, .gpu-hero, .monitor-hero, .blog-hero { grid-template-columns: minmax(0,1fr); }
}
.info-hero-copy, .gpu-hero-copy, .monitor-hero-copy, .blog-hero-copy {
  background: var(--ink-hero); border: var(--bw) solid var(--ink-hero);
  border-radius: var(--r); color: #fff; padding: var(--s36) var(--s40);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s10);
  min-width: 0;
}
.info-hero-copy h1, .gpu-hero-copy h1, .monitor-hero-copy h1, .blog-hero-copy h1 { color: #fff; margin: 0; }
.info-hero-copy p, .gpu-hero-copy p, .monitor-hero-copy p, .blog-hero-copy p {
  margin: 0; font: 400 12px/1.55 var(--mono); color: var(--on-dark); letter-spacing: .02em;
}
/* Боковая панель метрик — тот же контейнер, что .net-panel на главной
   (у GPU-страницы теперь сам .net-panel переиспользуется напрямую). */
/* Боковая панель hero на ВСЕХ страницах — один и тот же .net-panel,
   что и на главной: шапка с зелёным индикатором, строки «подпись → значение»,
   сноска. Отдельные -stats/-dashboard/-mark блоки удалены. */
.info-hero > .net-panel, .gpu-hero > .net-panel,
.monitor-hero > .net-panel, .blog-hero > .net-panel { height: 100%; }

/* ── Панель «Ваше подключение» ──────────────────────────────────────── */
/* В hero справа используется компактная карточка с реальными параметрами
   соединения посетителя. Значения считает static/js/net-panel.js; до его отработки
   и там, где Network Information API недоступен (Safari), поля показывают
   «—», а не выдуманные цифры. */
.net-panel { position: relative; background: var(--net-bg);
             border: var(--bw) solid var(--net-line); border-radius: var(--r8);
             padding: var(--s20); display: flex; flex-direction: column;
             gap: var(--s14); min-width: 0; }
.net-panel-head { display: flex; align-items: center; gap: var(--s10);
                  font: 500 10px var(--mono); letter-spacing: .1em;
                  text-transform: uppercase; color: var(--mono-dark); }
.net-panel-head i { width: 7px; height: 7px; border-radius: 999px;
                    background: var(--ok); flex: none;
                    animation: hm-pulse 1.8s ease-in-out infinite; }
.net-panel-head time { margin-left: auto; color: var(--on-dark); }
.net-panel-rows { display: flex; flex-direction: column; gap: 9px; }
.net-row { display: flex; align-items: baseline; justify-content: space-between;
           gap: var(--s14); font-size: 13px; color: var(--on-dark); }
.net-row span { min-width: 0; }
.net-row b { flex: none; font: 500 13px var(--mono); color: #fff; max-width: 60%;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-note { font-size: 12px; color: var(--mono-dark); line-height: 1.45; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .net-panel-head i { animation: none; } }

/* ── Зазор 10px и сетки ──────────────────────────────────────────────── */
.card, .hybrid-ranking, .table-card, .metric-grid, .provider-service-grid,
.ad-grid, .ad-slot-grid, .grid, .blog-card-grid, .glossary-grid,
.gpu-coverage-grid, .location-grid, .about-proof-grid, .method-rule-grid,
.data-passport, .risk-banner, .rating-section, .info-hero, .gpu-hero,
.monitor-hero, .methodology-hero, .stats, .compare-hero, .blog-hero,
.glossary-hero, .about-info-hero, .gpu-decision-panel, .gpu-comparison,
.gpu-chart, .gpu-method, .gpu-ad-grid { margin-bottom: var(--s10); }

.metric-grid, .provider-service-grid, .ad-grid, .ad-slot-grid, .grid,
.blog-card-grid, .glossary-grid, .gpu-coverage-grid, .location-grid,
.about-proof-grid, .method-rule-grid, .data-passport-grid, .rating-catalog {
  display: grid; gap: var(--s10); }
.metric-grid { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.provider-service-grid, .ad-grid, .ad-slot-grid, .grid, .blog-card-grid,
.glossary-grid, .gpu-coverage-grid, .about-proof-grid,
.method-rule-grid, .data-passport-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}

/* ── Шапка ───────────────────────────────────────────────────────────── */
/* В хендоффе шапка — плавающая карточка (радиус, обводка со всех сторон,
   sticky top:12px), а не полоса на всю ширину с одной нижней линией. */
/* margin-bottom считается от положения ДО сдвига top:12px, а хедер
   визуально сдвинут этим top на 12px вниз — без компенсации нижний край
   хедера наезжал на контент под ним на 2px на каждой странице сайта. */
header.site { margin-bottom: calc(var(--s10) + 12px); position: sticky; top: 12px; z-index: 5; }
header.site .row { background: var(--panel); border: var(--bw) solid var(--line);
                   border-radius: var(--r); padding: 14px 22px;
                   display: flex; align-items: center; gap: 18px 24px; flex-wrap: nowrap; }
.logo { display: inline-flex; align-items: center; gap: var(--s10); color: var(--text); }
.logo:hover { text-decoration: none; }
.logo-mark { width: 35px; height: 32px; flex: none; display: inline-flex;
             align-items: center; justify-content: center; }
.logo-mark img { display: block; width: 100%; height: 100%;
                 object-fit: contain; object-position: center; }
.logo-word { font: 600 18px var(--font); letter-spacing: -.02em; }
.logo-word em { font-style: normal; color: var(--btn); }
.tagline { flex: none; font: 400 11px var(--mono); color: var(--text-3);
           letter-spacing: .09em; text-transform: uppercase; }
nav.site { min-width: 0; margin-left: auto; display: flex; gap: 6px;
           align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
nav.site a { font: 500 14px var(--font); white-space: nowrap;
            background: #ededE2; color: #3a3a3e; border-radius: var(--r8);
            padding: 9px 14px; }
nav.site a:hover { background: #e2ded2; text-decoration: none; }
nav.site a.is-active { background: var(--ink); color: #fff; }
nav.site a.is-active:hover { background: var(--ink); }

/* ── Кнопки ──────────────────────────────────────────────────────────── */
button, .btn, .hybrid-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px var(--s18); font: 600 14px var(--font);
  background: var(--btn); color: #fff; border: 0; border-radius: var(--r8);
  cursor: pointer;
}
button:hover, .btn:hover, .hybrid-go:hover { background: var(--btn-hover);
                                             text-decoration: none; }
.btn.ghost, button.ghost { background: transparent; color: var(--text);
                           border: 1px solid var(--line); }
.btn.ghost:hover, button.ghost:hover { background: var(--field); }
button.danger { background: var(--risk-text); }

/* ── Поля ────────────────────────────────────────────────────────────── */
label { display: block; font-size: 13px; color: var(--text-2); }
/* Селектор от обратного, а не перечисление input[type=…]: <input> без
   атрибута type ведёт себя как text, но под [type=text] в CSS НЕ подпадает.
   В шаблонах таких полей 28 (форма для провайдеров и вся админка) — они
   рендерились браузерным дефолтом: высота 22px вместо 41px рядом с
   нормальными полями в той же строке. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]),
textarea, select {
  width: 100%; padding: 11px 13px; font: 400 14px var(--font);
  color: var(--text); background: var(--field);
  border: 1px solid var(--line); border-radius: var(--r8); appearance: none;
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23111114' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
         background-repeat: no-repeat; background-position: right 13px center;
         padding-right: 32px; }
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent);
                                            outline-offset: -2px; }

/* ── Каталог ─────────────────────────────────────────────────────────── */
.rating-catalog { grid-template-columns: 264px minmax(0,1fr); align-items: start; }
.catalog-filter-panel { position: sticky; top: var(--s10); }
.catalog-filter-panel header { margin-bottom: var(--s14); }
.catalog-filter-panel header strong { display: block; font: 600 15px var(--font); }
.catalog-filter-panel header p { font-size: 12px; color: var(--text-2); margin: 0; }
.catalog-filter-panel label { margin-bottom: var(--s14); }
.catalog-filter-panel label > span:first-child { display: flex; align-items: center;
  gap: 6px; font: 500 10.5px var(--mono); letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.catalog-filter-panel label > span:first-child svg { flex: none; color: var(--text-3); }
.catalog-filter-panel label > select, .catalog-filter-panel label > input { margin-top: 5px; }
.catalog-filter-panel button { width: 100%; }
.catalog-price-grid { display: grid; grid-template-columns: 1fr; gap: var(--s10); }
.catalog-check { display: flex; gap: var(--s10); align-items: flex-start; }
.catalog-check input { width: auto; }
.catalog-resource-filters strong { display: block; margin: var(--s14) 0 var(--s10);
                                   font: 600 13px var(--font); }
.rating-heading { display: flex; align-items: flex-end;
                  justify-content: space-between; gap: var(--s18); flex-wrap: wrap; }
.rating-sort { display: flex; align-items: center; gap: var(--s10); }
.rating-sort-field { display: flex; align-items: center; gap: 8px; }
.rating-sort-field label { flex: none; font: 500 10px var(--mono); letter-spacing: .11em;
                           text-transform: uppercase; color: var(--text-3); }
.poster-sort-icon { display: none; }
/* Кастомная кнопка селекта сортировки — без рамки и уже: подпись рядом
   уже задаёт контекст, отдельная обводка и запас по ширине не нужны. */
.rating-sort .ui-select-button { border: 0; background: transparent; padding: 4px 8px 4px 0; }
.rating-sort .ui-select-button:hover { background: var(--field); }

/* ── Карточка рейтинга ───────────────────────────────────────────────── */
/* Хендофф отдаёт каждого провайдера отдельной карточкой (своя рамка и
   радиус), а не строкой общей таблицы — так при их разном числе полей
   (нет промо, нет отзывов) карточки не разваливают общую сетку колонок. */
.rating-results-head { display: flex; align-items: center; gap: var(--s14) var(--s18);
                       flex-wrap: wrap; padding: 0 var(--s10); margin-bottom: var(--s10); }
.rating-count { font: 500 10.5px var(--mono); letter-spacing: .11em;
                text-transform: uppercase; color: var(--text-2); }
.rating-results-head .rating-sort { margin-left: auto; }

.rating-list { display: flex; flex-direction: column; gap: var(--s10); }
.rating-list > .pending-note { margin-block: 4px; }
.rating-list + .compare-toolbar { margin-top: var(--s10); }
/* align-items:stretch, а не start: обе колонки первой строки одной высоты,
   поэтому промо-блок справа кончается там же, где контент слева, а подвал
   с кнопками идёт ровной линией под ними. */
.rating-card { background: var(--panel); border: var(--bw) solid var(--line);
               border-radius: var(--r); padding: var(--s14);
               display: grid; grid-template-columns: minmax(0,1fr) 220px;
               gap: var(--s14); align-items: stretch;
               --card-action-rail: 168px; }
.rating-card:hover { box-shadow: 0 0 0 1px var(--hair); }
.rating-card-main { min-width: 0; display: flex; flex-direction: column;
                    gap: var(--s10); }

.rating-card-head { display: flex; align-items: center; gap: var(--s10); min-width: 0; }
.rating-card-head input[type=checkbox] { width: auto; flex: none; }
.rating-position { font: 500 15px var(--mono); color: var(--text-3); flex: none;
                   width: 20px; }
.rating-card-name { min-width: 0; flex: 1 1 auto; display: flex;
                    flex-direction: column; gap: 2px; }
.rating-card-name b { font: 700 19px var(--font); letter-spacing: -.02em;
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rating-card-name small { font-size: 12px; color: var(--text-2); white-space: nowrap;
                          overflow: hidden; text-overflow: ellipsis; }
.rating-card-name small b { color: var(--text); font-weight: 600; }
.rating-card-score-slot { flex: 0 0 var(--card-action-rail); display: flex;
                          justify-content: flex-end; align-items: center; gap: 8px; }
.rating-card-score-slot > small { max-width: 82px; text-align: right;
                                  font: 500 8.5px/1.25 var(--mono);
                                  letter-spacing: .08em; text-transform: uppercase;
                                  color: var(--text-3); }
.provider-mark.lg img { width: 48px; height: 48px; }

.rating-card-plan { display: flex; align-items: center; gap: var(--s10); flex-wrap: nowrap; min-width: 0; }
.rating-card-plan strong { font: 600 13px var(--font); white-space: nowrap; flex: none; }
.rating-card-plan .rating-card-specs { min-width: 0; font-size: 12px; color: var(--text-2);
                                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rating-card-plan-note { font-size: 11px; color: var(--text-3); margin-top: -6px;
                         padding-right: calc(var(--card-action-rail) + var(--s10)); }

.rating-card-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
                     margin-top: auto; }

.provider-name { display: inline-flex; align-items: center; gap: var(--s10);
                 color: var(--text); }
.provider-name:hover { text-decoration: none; }
.provider-name b { font: 600 15px var(--font); letter-spacing: -.01em; }
.provider-mark { display: inline-flex; flex: none; }
.provider-mark img, .pmark { width: 40px; height: 40px; object-fit: contain;
                             border-radius: var(--r6); background: var(--field); }
.provider-mark.compact img { width: 26px; height: 26px; }
.pmark-mono { display: inline-flex; align-items: center; justify-content: center;
              font: 600 14px var(--mono); color: var(--text-3); }

.score { display: inline-block; min-width: 46px; text-align: center; flex: none;
         padding: 4px 9px; border-radius: var(--r6); font: 700 15px var(--mono);
         background: var(--ok-bg); color: var(--ok-text);
         border: var(--bw) solid var(--ok-text); }
.score.hi { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-text); }
.score.lo { background: var(--risk-bg); color: var(--risk-text); border-color: var(--risk-text); }

.hybrid-price { display: flex; align-items: baseline; justify-content: flex-end;
               gap: 2px; margin-left: auto;
               flex: 0 0 var(--card-action-rail); max-width: var(--card-action-rail);
               text-align: right; }
.hybrid-price span { font: 500 24px var(--font); letter-spacing: -.03em; }
.hybrid-price sup { font-size: 14px; }
.hybrid-price small { font-size: 11px; color: var(--text-2); }
/* GPU-предложения без опубликованной цены показывают словесную метку
   («цена по запросу») вместо числа — той же крупной цифровой гарнитуры
   ей не место, иначе читается как реальная цена. */
.hybrid-price span.nodata { font: 500 13px var(--font); letter-spacing: 0;
                            white-space: normal; line-height: 1.3; }

.service-chip { font: 400 12px var(--font); padding: 3px 9px;
                border-radius: var(--r8); background: transparent;
                border: 1px solid var(--line); color: var(--text);
                display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.service-chip.is-good { background: var(--ok-bg); border-color: var(--ok-bg);
                        color: var(--ok-text); }
.service-chip.is-unknown { border-color: #d9d6cb; color: var(--text-3); }
.service-chip svg { flex: none; }

.rating-card-promo { grid-column: 2; grid-row: 1 / span 2;
                     display: flex; flex-direction: column; gap: var(--s10);
                     border-radius: var(--r8); border: var(--bw) solid var(--line);
                     background: var(--field); padding: var(--s14); min-width: 0; }
.rating-card-promo.has-promo { background: var(--ink); border-color: var(--ink); color: #fff; }
.hybrid-promo .promo-label { display: flex; align-items: center; gap: 6px;
                             font: 700 10px var(--mono); letter-spacing: .08em;
                             text-transform: uppercase; color: var(--text-3); }
.rating-card-promo.has-promo .promo-label { color: var(--promo-label); }
.hybrid-promo .promo-label.is-empty { color: var(--text-3); }
.hybrid-promo strong { font: 500 12px/1.4 var(--font); }
.rating-card-promo.has-promo strong { color: var(--promo-text); }
.hybrid-promo code { font: 600 12px var(--mono); letter-spacing: .06em;
                     background: var(--ink-hero); color: var(--promo-text);
                     padding: 3px 8px; border-radius: var(--r6); align-self: flex-start; }
.hybrid-promo p { font-size: 12px; color: var(--text-2); }
.rating-card-promo.has-promo p { color: var(--on-dark); }
.promo-cta { margin-top: auto; font: 600 11px var(--mono); letter-spacing: .06em;
            text-transform: uppercase; color: var(--btn); }
.promo-cta:hover { color: var(--btn-hover); }
.promo-empty-note { margin-top: auto; font: 500 10.5px var(--mono); letter-spacing: .1em;
                    text-transform: uppercase; color: var(--text-3); }
.hybrid-actions { display: flex; gap: var(--s10); align-items: center;
                  margin-top: auto; flex-wrap: wrap; }
.hybrid-actions a { font: 500 12px var(--font); }
.hybrid-go { padding: 8px var(--s14); font-size: 12px; }

/* Подвал карточки — общий для рейтинга и GPU и остаётся внутри основной
   колонки. Его правый край совпадает с правым краем плашки балла, поэтому
   мелкая строка и кнопки не уезжают под промо-блок. Промо справа занимает
   обе строки карточки и сохраняет цельную вертикальную панель. */
.rating-card-footer { grid-column: 1; display: flex; align-items: center;
                      justify-content: space-between; gap: var(--s14); flex-wrap: nowrap;
                      padding-top: var(--s10); border-top: 1px solid var(--hair); }
.rating-card-meta { flex: 1 1 auto; font-size: 11px; color: var(--text-3);
                    line-height: 1.4; min-width: 0; }
.rating-card-footer .hybrid-actions { flex: 0 0 var(--card-action-rail); margin-top: 0;
                                     margin-left: auto; justify-content: flex-end;
                                     flex-wrap: nowrap; }

/* Свободный текст вместо чипов у GPU: длинные описания состава цены не
   влезали в пилюлю одной строкой и обрезались. */
.gpu-offer-notes { display: flex; flex-direction: column; gap: 4px;
                   padding-right: calc(var(--card-action-rail) + var(--s10)); }
.gpu-offer-notes p { margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.gpu-offer-notes p b { color: var(--text); font-weight: 600; }
/* ── Скидки ──────────────────────────────────────────────────────────── */
.discount-list { padding: 0; }
.discount-row { display: grid;
                grid-template-columns: 168px minmax(0,1fr) auto;
                grid-template-areas: "brand text meta" ". . seen";
                align-items: center; gap: var(--s14);
                padding: var(--s18) var(--s20); border-bottom: 1px solid var(--hair); }
.discount-row:last-child { border-bottom: 0; }
.discount-row-brand { grid-area: brand; flex: none; }
.discount-row-text { grid-area: text; min-width: 0; font-size: 13px;
                     color: var(--text-2); line-height: 1.5; margin: 0; }
.discount-row-meta { grid-area: meta; display: flex; flex-direction: column;
                     align-items: flex-end; gap: 7px; flex: none; }
.discount-row-meta-top { display: flex; align-items: center; gap: var(--s10); }
.discount-row-cta { font: 600 11px var(--mono); letter-spacing: .06em;
                    text-transform: uppercase; color: var(--btn); white-space: nowrap; }
.discount-row-cta:hover { color: var(--btn-hover); text-decoration: none; }
.discount-row-seen { grid-area: seen; justify-self: end; margin-top: 4px; color: var(--text-3); }
.discount-code { display: inline-flex; align-items: center; gap: 7px;
                 font: 600 12px var(--mono); letter-spacing: .04em;
                 background: var(--ink); color: var(--promo-text);
                 border: 0; padding: 7px 11px; border-radius: var(--r8);
                 cursor: pointer; }
.discount-code:hover { background: var(--ink-hero); }
.discount-code.is-copied { background: var(--ok-text); color: #fff; }
.discount-code.is-empty { background: transparent; color: var(--text-3);
                          border: 1px dashed var(--line); cursor: default;
                          font: 500 12px var(--font); letter-spacing: 0;
                          padding: 6px 10px; border-radius: var(--r8); }
@media (max-width: 760px) {
  .discount-row { grid-template-columns: minmax(0,1fr); grid-template-areas:
    "brand" "text" "meta" "seen"; }
  .discount-row-meta { align-items: flex-start; }
  .discount-row-seen { justify-self: start; }
}

.compare-toolbar { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--s14); flex-wrap: wrap; padding: var(--s14);
                   border-top: 1px solid var(--line); font-size: 12px;
                   color: var(--text-2); }

/* ── Показатели ──────────────────────────────────────────────────────── */
.metric-grid > div > span, .provider-service-grid article small {
  display: block; margin-bottom: 6px;
  font: 500 10.5px var(--mono); letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-3);
}
.metric-grid b, .provider-rank b b,
.stats b, .poster-side-stats b {
  display: block; font: 600 34px/1 var(--font); letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.metric-grid b small, .provider-rank b small { font-size: 14px; font-weight: 400;
                                               letter-spacing: 0; color: var(--text-3); }
.metric-grid > div > small { font-size: 12px; color: var(--text-2); }
.primary-metric i { display: block; height: 6px; background: var(--field);
                    border-radius: 999px; overflow: hidden; margin-top: var(--s10); }
.primary-metric i u { display: block; height: 100%; background: var(--accent); }
.provider-service-grid article b { display: block; font: 600 17px var(--font);
                                   letter-spacing: -.02em; margin-bottom: 6px; }
.provider-service-grid article p { font-size: 13px; color: var(--text-2); }
.service-icon { color: var(--text-3); }

/* ── Провайдер ───────────────────────────────────────────────────────── */
.provider-hero { background: var(--panel); border: var(--bw) solid var(--line);
                 border-radius: var(--r); padding: var(--s36); margin-bottom: var(--s10);
                 display: flex; flex-wrap: wrap; gap: var(--s24); align-items: flex-start; }
/* Лого стоит в одной строке с названием (как в хендоффе), не отдельным
   блоком над ним — так карточка не растягивается по высоте зря. */
.provider-identity { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.provider-title-row { display: flex; align-items: center; gap: var(--s14); }
.provider-avatar { width: 52px; height: 52px; flex: none; overflow: hidden;
                   border-radius: var(--r8);
                   background: var(--field); display: flex;
                   align-items: center; justify-content: center; }
.provider-avatar img { width: 100%; height: 100%; object-fit: contain; }
.avatar-mono { font: 600 22px var(--mono); color: var(--text-3); }
.provider-title-row h1 { font-size: 36px; margin: 0; letter-spacing: -.03em; }
.provider-copy { display: flex; flex-direction: column; gap: var(--s10); margin-top: 4px; }
.provider-copy p { font-size: 15px; color: var(--text-2); margin: 0; }
.provider-actions { display: flex; gap: var(--s10); flex-wrap: wrap; }
.provider-actions-inline { margin-top: 4px; }

/* Тёмная панель с кольцевой диаграммой балла — flex 0 0 auto, чтобы не
   растягиваться на всю ширину рядом с описанием провайдера. */
.provider-score-panel { flex: 0 0 auto; background: var(--ink); color: #fff;
                        border-radius: 18px; padding: 22px 24px;
                        display: flex; align-items: stretch; gap: var(--s24); min-width: 0; }
.score-donut { flex: none; align-self: center; position: relative;
              width: 110px; height: 110px; display: grid; place-items: center; }
.score-donut svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.score-donut-value { position: relative; display: flex; flex-direction: column;
                     align-items: center; gap: 1px; }
.score-donut-value b { font: 500 26px var(--mono); letter-spacing: -.04em; line-height: 1; }
.score-donut-value small { font: 400 10px var(--mono); letter-spacing: .1em; color: var(--mono-dark); }
.score-panel-info { display: flex; flex-direction: column; gap: var(--s10); min-width: 0; }
.score-panel-rank { display: flex; flex-direction: column; gap: 3px; }
.score-panel-rank small { font: 400 10px var(--mono); letter-spacing: .1em;
                          text-transform: uppercase; color: var(--mono-dark); }
.score-panel-rank b { font-size: 15px; font-weight: 600; }
.score-panel-compare { display: flex; flex-direction: column; gap: 5px;
                       padding-top: var(--s10); border-top: 1px solid #24262d;
                       font-size: 12px; color: var(--mono-dark); }
.score-panel-compare span { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.score-panel-compare b { font: 500 12px var(--mono); color: var(--on-dark); }
.score-panel-link { font: 500 11px var(--mono); letter-spacing: .06em;
                    text-transform: uppercase; color: var(--accent-2); }

/* ── Колонки страницы провайдера ─────────────────────────────────────── */
.provider-columns { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
                   gap: var(--s10); align-items: start; margin-bottom: var(--s10); }
.provider-col-main, .provider-col-side { display: flex; flex-direction: column; gap: var(--s10); }
.provider-panel { display: flex; flex-direction: column; gap: var(--s14); }
.provider-panel.is-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.provider-panel.is-dark p { color: var(--mono-dark); font-size: 13px;
                           padding-top: var(--s10); border-top: 1px solid #2e2e32; margin: 0; }
.panel-kicker { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase;
               color: var(--text-3); display: flex; align-items: center; gap: 7px; }
.provider-panel.is-dark .panel-kicker { color: var(--mono-dark); }
.panel-heading { display: flex; align-items: baseline; gap: var(--s10); flex-wrap: wrap; }
.panel-heading b { font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.panel-heading span { font-size: 13px; color: var(--text-2); }

/* nowrap на строке: с flex-wrap лейбл в две строки иногда уводил бар и
   значение на отдельную flex-линию, и они центрировались сами по себе,
   а не по всей высоте строки — бар «плавал» отдельно от своего лейбла. */
.breakdown-row { display: flex; align-items: center; gap: var(--s14); flex-wrap: nowrap; }
.breakdown-label { flex: 0 0 190px; font-size: 14px; }
.breakdown-bar { flex: 1 1 120px; height: 6px; border-radius: 999px;
                 background: var(--field); min-width: 0; overflow: hidden; }
.breakdown-bar i { display: block; height: 100%; border-radius: 999px; }
.breakdown-value { font: 500 13px var(--mono); width: 48px; text-align: right; }

/* Список тарифов может быть длинным (у некоторых провайдеров 15+ строк) —
   без ограничения высоты левая колонка вытягивается далеко за пределы
   правой (там всего три плитки и две карточки), и страница внизу выглядит
   пустой с одной стороны. Скролл внутри панели держит баланс колонок. */
.provider-plan-list { display: flex; flex-direction: column; gap: var(--s10);
                      max-height: 520px; overflow-y: auto; padding-right: 4px; }
.provider-plan-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
                     background: var(--field); border-radius: var(--r8);
                     border: var(--bw) solid var(--line); padding: var(--s14) 18px; }
.provider-plan-row b { flex: 1 1 150px; font-size: 15px; font-weight: 600; }
.provider-plan-row span { flex: 1 1 190px; font-size: 13px; color: var(--text-2); }
.provider-plan-row code { flex: none; font: 500 17px var(--font); letter-spacing: -.02em; }

.provider-stat-grid { grid-template-columns: repeat(auto-fit, minmax(100px,1fr)); }
.provider-stat-grid div { padding: var(--s18); gap: 4px; }
.provider-stat-grid b { font-size: 24px; }

.review-score-line { display: flex; align-items: baseline; gap: var(--s10); }
.review-score-line b { font: 500 34px var(--mono); letter-spacing: -.03em; }
.review-score-line span { font-size: 13px; color: var(--on-dark); }
.review-histogram { display: flex; flex-direction: column; gap: 7px; }
.review-histogram-row { display: grid; grid-template-columns: 18px minmax(0,1fr) 20px;
                        align-items: center; gap: 10px; }
.review-histogram-row small { font: 400 11px var(--mono); color: var(--mono-dark); }
.review-histogram-row small:last-child { color: var(--on-dark); text-align: right; }
.review-histogram-bar { height: 5px; border-radius: 999px; background: #2e2e32; overflow: hidden; }
.review-histogram-bar i { display: block; height: 100%; background: var(--accent-2); }

.lead { font-size: 15px; color: var(--text-2); margin: 0 0 var(--s10); }
.source-note summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-2); }
.source-note p { margin-top: var(--s10); font-size: 13px; color: var(--text-2); }
.trap-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.external-rating { display: flex; gap: var(--s14); align-items: flex-start;
                   padding: var(--s14) 0; border-bottom: 1px solid var(--hair); }
.external-rating > div:first-child { flex: none; display: flex; flex-direction: column;
                                     align-items: center; gap: 2px; min-width: 64px; }
.external-rating > div:first-child b { font: 600 19px var(--font); }
.external-rating > div:first-child span { font-size: 11px; color: var(--text-3); }
.external-rating .stars { font-size: 12px; }
.external-rating p { margin: 0; font-size: 13px; color: var(--text-2); }
.external-rating strong { color: var(--text); font-size: 14px; }
.source-badge { display: inline-flex; align-items: center; justify-content: center;
                width: 20px; height: 20px; border-radius: var(--r6);
                background: var(--ink); color: #fff; font: 600 11px var(--mono);
                margin-right: 4px; vertical-align: middle; }
.rating-source-tabs { display: flex; gap: 6px; flex-wrap: wrap;
                      padding-bottom: var(--s14); margin-bottom: var(--s14);
                      border-bottom: 1px solid var(--hair); }
.rating-source-tab { font: 500 13px var(--font); background: var(--field);
                     color: var(--text-2); border: 0; border-radius: var(--r8);
                     padding: 8px 14px; cursor: pointer; }
.rating-source-tab:hover { background: var(--hair); }
.rating-source-tab.is-active { background: var(--ink); color: #fff; }
.external-review-intro { display: flex; flex-direction: column; gap: 4px;
                         padding: var(--s14) 0 var(--s10); border-top: 1px solid var(--hair);
                         margin-top: var(--s10); }
.external-review-intro b { font-size: 15px; }
.external-review-intro span { font-size: 13px; color: var(--text-2); }
.external-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
                        gap: var(--s10); margin-top: var(--s10); }
.external-review-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s10); }
.external-review-rating { font: 600 13px var(--mono); border-radius: var(--r6); padding: 4px 9px; }
/* Тот же спектр «зелёный → красный», что и в гистограмме отзывов справа. */
.external-review-rating.rating-5 { background: var(--ok-bg); color: var(--ok-text); }
.external-review-rating.rating-4 { background: #eaf3de; color: #4d7a1f; }
.external-review-rating.rating-3 { background: var(--warn-bg); color: var(--warn-text); }
.external-review-rating.rating-2 { background: #fbe4d3; color: #a35a1f; }
.external-review-rating.rating-1 { background: var(--risk-bg); color: var(--risk-text); }

.analogue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
                gap: var(--s10); margin-bottom: var(--s10); }
.analogue-grid a { display: flex; align-items: center; gap: var(--s10); min-width: 0;
                   background: var(--panel); border: var(--bw) solid var(--line);
                   border-radius: var(--r8); padding: var(--s14); color: var(--text); }
.analogue-grid a:hover { background: var(--field); text-decoration: none; }
.analogue-grid a > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.analogue-grid b { font-size: 14px; font-weight: 600; white-space: nowrap;
                   overflow: hidden; text-overflow: ellipsis; }
.analogue-grid small { font-size: 12px; color: var(--text-2); }
.analogue-grid i { flex: none; font-style: normal; color: var(--text-3); }

/* ── Блог ─────────────────────────────────────────────────────────────── */
.blog-top-ad { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
               gap: var(--s10); margin-bottom: var(--s10); }

.blog-controls { display: flex; flex-direction: column; gap: var(--s10);
                 background: var(--panel); border: var(--bw) solid var(--line);
                 border-radius: var(--r); padding: var(--s14); }
.blog-control-main { display: flex; align-items: center; gap: var(--s14); min-width: 0; }
.blog-search { flex: 1 1 auto; display: flex; align-items: center; gap: var(--s10);
               background: var(--field); border: 1px solid var(--hair);
               border-radius: var(--r8); padding: 0 var(--s14); min-width: 0; }
.blog-search span:first-child::before { content: "⌕"; color: var(--text-3); font-size: 17px; }
.blog-search input { flex: 1 1 auto; border: 0; background: transparent;
                     padding: 11px 0; min-width: 0; }
.blog-search input:focus { outline: 0; }
.blog-search kbd { flex: none; font: 500 10px var(--mono); color: var(--text-3);
                   background: var(--panel); border: 1px solid var(--hair);
                   border-radius: var(--r6); padding: 3px 6px; }
.blog-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 0;
                background: transparent; border: 0; border-radius: 0; }
.blog-filters button { font: 500 13px var(--font); background: var(--field);
                       color: var(--text-2); border: 0; border-radius: 999px;
                       padding: 8px 14px; cursor: pointer; }
.blog-filters button:hover { background: var(--hair); }
.blog-filters button.is-active { background: var(--ink); color: #fff; }
.blog-result-count { flex: none; font: 500 11px var(--mono); letter-spacing: .08em;
                     text-transform: uppercase; color: var(--text-3); }

.blog-library header { display: flex; align-items: flex-end;
                       padding-bottom: var(--s14); margin-bottom: var(--s14);
                       border-bottom: 1px solid var(--line); }
.blog-library header h2 { margin: 0; }
.blog-feed { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
             gap: var(--s10); margin-bottom: var(--s10); }
.blog-ad-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
                 gap: var(--s10); margin-bottom: var(--s10); }
.blog-article-card { display: flex; flex-direction: column; gap: 0; padding: 0;
                     min-height: 190px; overflow: hidden; color: var(--text); min-width: 0; }
.blog-article-card:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--hair); }
.blog-card-cover { position: relative; display: flex; flex-direction: column;
                   align-items: center; justify-content: center; gap: 6px;
                   aspect-ratio: 16/9; overflow: hidden; background: var(--field); }
.blog-card-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.blog-card-cover.cover-placeholder b { font: 600 10.5px var(--mono); letter-spacing: .1em;
                                      text-transform: uppercase; }
.blog-card-cover.cover-placeholder i { font: 700 21px/1.05 var(--font); font-style: normal;
                                      text-align: center; opacity: .55; }
.blog-card-content { display: flex; flex: 1 1 auto; flex-direction: column;
                     gap: var(--s10); padding: var(--s18); min-width: 0; }
.blog-card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s10); }
.blog-card-meta small { font: 500 10.5px var(--mono); letter-spacing: .1em;
                        text-transform: uppercase; color: var(--text-3); }
.blog-card-meta > span { font: 400 11px var(--mono); color: var(--text-3); white-space: nowrap; }
.blog-card-meta b { font-weight: 500; color: var(--text-2); }
.blog-card-body { display: flex; flex-direction: column; gap: 6px; max-width: 74ch; }
.blog-article-card .blog-card-body strong { margin: 0; font-size: 20px; line-height: 1.2;
                                             text-wrap: pretty; }
.blog-card-footer { display: flex; align-items: center; justify-content: space-between;
                    gap: var(--s10); margin-top: auto; padding-top: var(--s10);
                    border-top: 1px solid var(--hair); }
.blog-card-footer i { margin-left: auto; }
.blog-card-footer i { font-style: normal; font-size: 12px; color: var(--accent); }
.blog-article-card.is-featured { grid-column: 1 / -1; display: grid;
                                 grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
                                 min-height: 300px; padding: 0; background: var(--panel);
                                 border-color: var(--ink); color: #fff; }
.blog-article-card.is-featured:hover { border-color: var(--ink); }
.blog-article-card.is-featured .blog-card-cover { aspect-ratio: auto; min-height: 300px; }
.blog-article-card.is-featured .blog-card-content { padding: var(--s36);
                                                    background: var(--ink); }
.blog-article-card.is-featured .blog-card-meta small,
.blog-article-card.is-featured .blog-card-meta > span { color: var(--mono-dark); }
.blog-article-card.is-featured .blog-card-meta b { color: var(--on-dark); }
.blog-article-card.is-featured .blog-card-body strong { font-size: 30px; line-height: 1.1; }
.blog-article-card.is-featured .blog-card-summary { color: var(--on-dark); }
.blog-article-card.is-featured .blog-card-footer { border-color: #2e2e32; }
.blog-article-card.is-featured .blog-card-footer i { color: var(--accent-2); }
.blog-empty { text-align: center; padding: var(--s44) var(--s20); color: var(--text-2); }
.blog-empty b { display: block; margin-bottom: 6px; }

/* ── GPU для ИИ ───────────────────────────────────────────────────────── */
.gpu-ad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--s10); }

.gpu-decision-panel header { margin-bottom: var(--s14); }
.gpu-decision-panel header h2 { margin: 0; }
/* Ровно 5 колонок в одну строку — auto-fit(240px) заворачивал 5-й пункт
   на новую строку одиноким, что читалось как поломка, а не как перечень
   критериев. */
.gpu-coverage-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 760px) {
  .gpu-coverage-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.gpu-coverage-grid article { background: var(--field); border-radius: var(--r8);
                             padding: 11px 13px; display: flex; align-items: center;
                             gap: var(--s10); min-width: 0; }
.gpu-coverage-grid b { flex: none; font: 500 17px var(--mono); letter-spacing: -.02em; }
.gpu-coverage-grid span { font-size: 12px; line-height: 1.3; color: var(--text-2); text-wrap: pretty; }

.gpu-comparison header { margin-bottom: var(--s14); }
.gpu-comparison header h2 { margin: 0; }
.gpu-comparison-layout { display: grid; grid-template-columns: minmax(240px,300px) minmax(0,1fr);
                         gap: var(--s10); align-items: start; }
.gpu-filter-rail { position: sticky; top: var(--s10); }
.gpu-filter-title { display: block; font-size: 15px; font-weight: 600; }
.gpu-filter-copy { margin: 0 0 var(--s14); font-size: 13px; color: var(--text-2); }
.gpu-filter-form { display: flex; flex-direction: column; }
.gpu-filter-form label { margin-bottom: var(--s14); }
.gpu-filter-form button { width: 100%; }
.gpu-filter-form > a { display: block; text-align: center; margin-top: var(--s10); font-size: 13px; }
.gpu-filter-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.gpu-filter-label svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
                        stroke-width: 1.6; flex: none; }

.gpu-table-area { min-width: 0; }
.gpu-chart-logo img { width: 32px; height: 32px; object-fit: contain; }
.gpu-empty { text-align: center; padding: var(--s44) var(--s20); color: var(--text-2); }
.gpu-empty b { display: block; margin-bottom: 6px; color: var(--text); }

.gpu-chart header { margin-bottom: var(--s14); }
.gpu-chart header h2 { margin: 0; }
.gpu-chart-bars { display: flex; flex-direction: column; gap: var(--s10); }
.gpu-chart-row { display: grid; grid-template-columns: minmax(120px,180px) minmax(0,1fr) 70px;
                 gap: var(--s14); align-items: center; }
.gpu-chart-provider { display: flex; align-items: center; gap: var(--s10); min-width: 0; }
.gpu-chart-provider b { font-size: 13px; font-weight: 600; white-space: nowrap;
                        overflow: hidden; text-overflow: ellipsis; }
.gpu-chart-track { height: 8px; border-radius: 999px; background: var(--field); overflow: hidden; }
.gpu-chart-track i { display: block; height: 100%; background: var(--accent-2); border-radius: 999px; }
.gpu-chart-row strong { font: 500 14px var(--mono); text-align: right; }

.gpu-method ol { list-style: none; margin: 0; padding: 0; display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--s18); }
.gpu-method li { display: flex; flex-direction: column; gap: 4px; }
.gpu-method b { font-size: 15px; font-weight: 600; }
.gpu-method span { font-size: 13px; color: var(--text-2); }

/* ── Мониторинг локаций ──────────────────────────────────────────────── */
.hubs-map-card { background: var(--panel); border: var(--bw) solid var(--line);
                 border-radius: var(--r); padding: var(--s10);
                 display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s10); }
.hubs-map-frame { position: relative; height: 300px; border-radius: var(--r8);
                  border: var(--bw) solid var(--line); overflow: hidden; background: var(--field); }
.hubs-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hubs-map-legend { display: flex; align-items: center; gap: var(--s14); flex-wrap: wrap;
                   padding: 0 6px 2px; font: 400 10px var(--mono); letter-spacing: .1em;
                   text-transform: uppercase; color: var(--text-3); }
.hubs-map-legend span { display: flex; align-items: center; gap: 6px; }
.hubs-map-legend i { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }
.hubs-map-legend-date { margin-left: auto; }
.monitor-hero-crumb { position: relative; display: flex; align-items: center;
                      gap: var(--s14); flex-wrap: wrap; font: 500 11px var(--mono);
                      letter-spacing: .12em; text-transform: uppercase; color: var(--mono-dark);
                      margin-bottom: var(--s14); }
.monitor-hero-crumb a { background: var(--ink-nested); color: #fff; border-radius: var(--r8);
                        padding: 6px 10px; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.monitor-hero-crumb a:hover { background: #2a2a2e; text-decoration: none; }

.monitor-data-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
                      gap: 1px; margin-bottom: var(--s10); overflow: hidden;
                      border: var(--bw) solid var(--line); border-radius: var(--r);
                      background: var(--line); }
.monitor-data-strip > div { min-width: 0; padding: var(--s14) var(--s18);
                            background: var(--panel); display: flex;
                            flex-direction: column; gap: 4px; }
.monitor-data-strip small { font: 500 10px var(--mono); letter-spacing: .1em;
                            text-transform: uppercase; color: var(--text-3); }
.monitor-data-strip b { display: flex; align-items: center; gap: 7px;
                        font-size: 15px; line-height: 1.25; }
.monitor-data-strip span { color: var(--text-2); font-size: 12px; line-height: 1.35; }
.monitor-source-dot { width: 7px; height: 7px; border-radius: 999px;
                      background: var(--ok); flex: none; }
.monitor-source-dot.stale { background: var(--warn); }
.monitor-source-dot.unavailable { background: var(--risk); }

.monitor-columns { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
                  gap: var(--s10); align-items: start; margin-bottom: var(--s10); }
.location-list-head { display: flex; align-items: center; justify-content: space-between;
                      gap: var(--s14); flex-wrap: wrap; }
.location-list-head > span:first-child { font: 500 11px var(--mono); letter-spacing: .12em;
                                         text-transform: uppercase; color: var(--text-2); }
.monitor-side { display: flex; flex-direction: column; gap: var(--s10); }
.monitor-incidents-card { min-height: 360px; }
.monitor-method-note { background: var(--ink); color: #fff; border-radius: var(--r);
                       border: var(--bw) solid var(--ink); padding: var(--s24);
                       display: flex; flex-direction: column; gap: var(--s14); }
.monitor-method-note .eyebrow { color: var(--mono-dark); }
.monitor-method-note p { margin: 0; font-size: 14px; color: var(--on-dark); line-height: 1.5; text-wrap: pretty; }
.monitor-method-note .btn.ghost { align-self: flex-start; border-color: #2e2e32; color: #fff; }
.monitor-method-note .btn.ghost:hover { background: var(--ink-nested); }

.live-source { display: flex; align-items: center; gap: 6px; }
.live-source i { width: 7px; height: 7px; border-radius: 999px; background: var(--ok); flex: none;
                 display: inline-block; animation: hm-pulse 2.4s ease-in-out infinite; }

.monitor-locations-card { padding: var(--s20); }
.location-list-head > div { min-width: 0; }
.location-list-head h2 { margin: 4px 0 6px; }
.location-list-head p { margin: 0; max-width: 58ch; color: var(--text-2); font-size: 13px; }
.location-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s10); margin: var(--s18) 0 0; }
.location-card { display: flex; flex-direction: column; gap: var(--s10);
                 min-width: 0; padding: var(--s16); border: 1px solid var(--hair);
                 border-radius: var(--r8); background: var(--panel); }
.location-card.high { border-color: #dfb8ae; background: var(--risk-bg); }
.location-card.watch { border-color: #d7cba7; background: var(--warn-bg); }
.location-top { display: flex; align-items: center; gap: var(--s10); flex-wrap: wrap; }
.location-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--ok); }
.location-card.high .location-dot { background: var(--risk); }
.location-card.watch .location-dot { background: var(--warn); }
.location-city { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.location-code { font: 400 11px var(--mono); letter-spacing: .1em; color: var(--text-3); }
.risk-pill { padding: 5px 10px; border-radius: 999px; font-size: 12px;
            background: var(--field); color: var(--text-2); }
.risk-pill.bad { background: var(--risk-bg); color: var(--risk-text); }
.risk-pill.watch { background: var(--warn-bg); color: var(--warn-text); }
.location-card .risk-pill { margin-left: auto; white-space: nowrap; }
.location-alert-copy { margin: 0; min-height: 1.45em; color: var(--text-2); font-size: 13px; }
.location-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.location-metrics > span { min-width: 0; padding: 9px 10px; border-radius: 7px;
                           background: rgba(255,255,255,.64); }
.location-metrics small { display: block; overflow: hidden; color: var(--text-3);
                          font-size: 10px; line-height: 1.3; white-space: nowrap;
                          text-overflow: ellipsis; }
.location-metrics b { display: block; margin-top: 4px; font: 500 16px var(--mono); }
.location-metrics b i { margin-left: 3px; color: var(--text-3); font-size: 10px; font-style: normal; }
.location-stats { margin-left: auto; display: flex; align-items: baseline; gap: var(--s18); white-space: nowrap; }
.location-stats span { display: flex; flex-direction: column; gap: 2px; }
.location-stats b { font: 500 17px var(--mono); }
.location-stats b small { font-size: 11px; color: var(--text-3); margin-left: 1px; }
.location-stats > span > small { font-size: 11px; color: var(--text-2); }
.location-bar { display: block; height: 5px; border-radius: 999px; background: var(--field); overflow: hidden; }
.location-bar i { display: block; height: 100%; background: var(--ok); }
.location-card.high .location-bar i { background: var(--risk); }
.location-card.watch .location-bar i { background: var(--warn); }
.location-bottom { display: flex; align-items: center; gap: var(--s10); flex-wrap: wrap; }
.location-note { font-size: 13px; color: var(--text-2); text-wrap: pretty; }
.affected-providers { margin-left: auto; flex: none; font: 500 10px var(--mono);
                      letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.no-risk-signals { grid-column: 1 / -1; text-align: center; color: var(--ok-text); padding: var(--s24); }

.incident-list { display: flex; flex-direction: column; gap: var(--s14); }
.incident-list article { display: flex; gap: var(--s14); padding-top: var(--s14); border-top: 1px solid var(--hair); }
.incident-list article:first-child { padding-top: 0; border-top: 0; }
.incident-icon { flex: none; width: 32px; height: 32px; border-radius: var(--r8); background: var(--field);
                 display: flex; align-items: center; justify-content: center; font-size: 15px; }
.incident-list p { margin: 4px 0; font-size: 13px; color: var(--text-2); }
.incident-list a { font-size: 12px; }

.energy-head { display: flex; gap: var(--s24); align-items: stretch; flex-wrap: wrap; }
.energy-head-copy { flex: 1 1 220px; max-width: 260px; min-width: 0; }
.energy-head-copy p { font-size: 13px; color: var(--text-2); }
.energy-chart { flex: 3 1 480px; min-width: 0; display: flex; flex-direction: column; }
.energy-chart-plot { display: flex; gap: var(--s10); align-items: stretch; flex: 1; }
.energy-chart-yaxis { flex: none; display: flex; flex-direction: column;
                      justify-content: space-between; min-height: 160px;
                      font: 500 11px var(--mono); color: var(--text-3); text-align: right; }
.energy-chart-plot svg { flex: 1; min-width: 0; min-height: 160px; display: block; }
.energy-chart-xaxis { display: flex; justify-content: space-between; gap: 4px;
                      margin: 4px 0 0 calc(3ch + var(--s10)); }
.energy-chart-xaxis span { font-size: 10px; color: var(--text-3); }
.energy-chart-legend { display: flex; gap: var(--s24); flex-wrap: nowrap;
                       margin-top: var(--s14); padding-top: var(--s10); border-top: 1px solid var(--hair); }
.energy-chart-legend span { display: flex; align-items: center; gap: 6px; font-size: 13px;
                            color: var(--text-2); white-space: nowrap; }
.energy-chart-legend i { width: 9px; height: 9px; border-radius: 999px; flex: none; display: inline-block; }
.energy-chart-legend b { color: var(--text); font-weight: 600; }
.energy-chart-caption { display: block; color: var(--text-3); margin-top: 6px; }
.energy-current-grid { flex: 3 1 520px; min-width: 0; display: grid;
                       grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s10); }
.energy-current-grid > article { min-width: 0; padding: var(--s16); border: 1px solid var(--hair);
                                 border-radius: var(--r8); background: var(--field); }
.energy-current-grid > article small { display: block; font: 500 10px var(--mono);
                                       letter-spacing: .09em; text-transform: uppercase;
                                       color: var(--text-3); }
.energy-current-grid > article b { display: block; margin: 8px 0 4px;
                                   font: 500 24px var(--mono); }
.energy-current-grid > article b i { color: var(--text-3); font-size: 11px; font-style: normal; }
.energy-current-grid > article span { color: var(--text-2); font-size: 12px; line-height: 1.4; }
.energy-current-grid > p, .energy-delta-chart { grid-column: 1 / -1; }
.energy-delta-chart { padding: var(--s16); border: 1px solid var(--hair);
                      border-radius: var(--r8); background: var(--panel); }
.energy-delta-head { display: flex; align-items: flex-start; justify-content: space-between;
                     gap: var(--s14); margin-bottom: 6px; }
.energy-delta-head > div { display: flex; flex-direction: column; gap: 4px; }
.energy-delta-head b { font-size: 15px; }
.energy-delta-head > small { font: 500 10px var(--mono); color: var(--text-3); }
.energy-delta-chart svg { display: block; width: 100%; height: auto; min-height: 190px; overflow: visible; }
.energy-grid-lines line { stroke: var(--hair); stroke-width: 1; }
.energy-grid-lines text, .energy-axis-labels text { fill: var(--text-3); font: 9px var(--mono); }
.energy-series path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.energy-series.germany path { stroke: var(--accent-2); }
.energy-series.france path { stroke: var(--warn); }
.energy-delta-chart .energy-chart-legend { justify-content: flex-start; }
.energy-delta-chart .energy-chart-legend i.germany { background: var(--accent-2); }
.energy-delta-chart .energy-chart-legend i.france { background: var(--warn); }
.energy-delta-note, .energy-source-line { margin: var(--s10) 0 0; color: var(--text-3);
                                         font-size: 11px; line-height: 1.45; }
.energy-source-line { grid-column: 1 / -1; }
.energy-up { color: var(--risk-text); }
.energy-down { color: var(--ok-text); }

/* ── Провайдеры без места в рейтинге ─────────────────────────────────── */
.pending-note { background: var(--panel); border: var(--bw) solid var(--line);
                border-radius: var(--r); padding: var(--s20);
                display: flex; flex-direction: column; gap: var(--s14); }
.pending-note > b { font: 600 17px var(--font); letter-spacing: -.02em; }
.pending-note > span { font-size: 13px; color: var(--text-2); margin-top: -8px; }
.pending-pills { display: flex; flex-wrap: wrap; gap: var(--s10) var(--s14); }
.pending-pill { font-size: 13px; padding: 8px 14px; border-radius: 999px;
               line-height: 1.2; background: var(--field); color: var(--text-2); }
.pending-pill:hover { background: var(--hair); text-decoration: none; color: var(--text); }

/* ── Тизеры блога на главной ─────────────────────────────────────────── */
/* Нижняя «витринная» полоса главной (тизеры → база знаний → GPU → доверие)
   держит единый шаг 24px между секциями; верхняя, функциональная часть
   (hero, риски, рейтинг) — базовые 10px. */
.latest-blog { margin-bottom: var(--s10); }
.latest-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
                    gap: var(--s10); }
.latest-blog-card { display: flex; flex-direction: column; min-width: 0;
                    background: var(--panel); border: var(--bw) solid var(--line);
                    border-radius: var(--r); overflow: hidden; color: var(--text); }
.latest-blog-card:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--hair); }
.latest-blog-cover { position: relative; aspect-ratio: 16/9; overflow: hidden;
                     background: var(--field); }
.latest-blog-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.latest-blog-cover.cover-placeholder { display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; }
.latest-blog-cover.cover-placeholder b { font: 600 11px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; }
.latest-blog-cover.cover-placeholder i { font-style: normal; font: 700 22px/1.05 var(--font);
  text-align: center; opacity: .55; }
.cover-tone-1 { background: #fbeae1; color: var(--accent); }
.cover-tone-2 { background: #e3f3f0; color: var(--accent-2); }
.cover-tone-3 { background: var(--warn-bg); color: var(--warn-text); }
.latest-blog-copy { padding: var(--s14); display: flex; flex-direction: column; gap: 6px; }
.latest-blog-copy small { font: 500 10.5px var(--mono); letter-spacing: .1em;
                          text-transform: uppercase; color: var(--text-3); }
.latest-blog-copy strong { font: 600 15px var(--font); letter-spacing: -.01em; }
.latest-blog-copy em { font-style: normal; font-size: 12px; color: var(--accent); }

/* ── Мини-карточки «База знаний» ─────────────────────────────────────── */
.article-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
                     gap: var(--s10); margin-bottom: var(--s10); }
.article-mini { display: flex; flex-direction: column; gap: var(--s10); min-width: 0;
               border: var(--bw) solid var(--line); border-radius: var(--r);
               padding: var(--s18); color: var(--text); }
.article-mini:hover { text-decoration: none; }
.article-mini > span:first-child { font: 500 10.5px var(--mono); letter-spacing: .11em;
                                   text-transform: uppercase; color: var(--text-3); }
.article-mini h3 { margin: 0; font-size: 17px; }
.article-mini p { font-size: 13px; color: var(--text-2); }
.article-mini i { font-style: normal; margin-top: auto; align-self: flex-end; font-size: 17px; }
.article-tone-1 { background: #fbeae1; }
.article-tone-1 i { color: var(--accent); }
.article-tone-2 { background: #e3f3f0; }
.article-tone-2 i { color: var(--accent-2); }
.article-tone-3 { background: var(--warn-bg); }
.article-tone-3 i { color: var(--warn-text); }

/* Плитки принципов на «О нас»: в разметке заданы оттенки is-blue/is-dark/
   is-green, но правил под них не было — все четыре карточки выходили
   одинаково белыми. Палитра та же, что у .article-tone-* на главной. */
.about-proof.is-blue { background: #e8eef7; }
.about-proof.is-green { background: #e3f3f0; }
.about-proof.is-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.about-proof.is-dark h2 { color: #fff; }
.about-proof.is-dark span { color: var(--mono-dark); }
.about-proof.is-dark p { color: var(--on-dark); }
.about-proof > span { display: block; font: 500 10.5px var(--mono);
                     letter-spacing: .11em; color: var(--text-3); margin-bottom: 6px; }
.about-proof h2 { margin: 0 0 6px; font: 600 19px var(--font); letter-spacing: -.02em; }
.about-proof p { margin: 0; font-size: 13px; color: var(--text-2); }

/* ── Переход на GPU и полоса доверия ─────────────────────────────────── */
.gpu-gateway { display: flex; align-items: center; justify-content: space-between;
              gap: var(--s24); flex-wrap: wrap; background: var(--ink);
              border: var(--bw) solid var(--ink); border-radius: var(--r);
              color: #fff; padding: var(--s24) var(--s36); margin-bottom: var(--s10); }
.gpu-gateway:hover { text-decoration: none; background: var(--ink-nested); }
.gpu-gateway > span { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gpu-gateway small { font: 500 11px var(--mono); letter-spacing: .1em;
                     text-transform: uppercase; color: var(--mono-dark); }
.gpu-gateway b { font: 700 30px var(--font); letter-spacing: -.02em; }
.gpu-gateway i { font-style: normal; font-size: 13px; color: var(--on-dark); }
.gpu-gateway strong { flex: none; display: inline-flex; align-items: center; gap: 6px;
                      font: 600 14px var(--font); color: #fff; background: var(--btn);
                      border-radius: var(--r8); padding: 12px 20px; }
.gpu-gateway:hover strong { background: var(--btn-hover); }

.proof-showcase { margin-bottom: var(--s10); }
.proof-showcase-head { display: flex; align-items: flex-end; justify-content: space-between;
                       gap: var(--s18); padding: var(--s24) 0 var(--s14); }
.proof-showcase-head h2 { margin: 3px 0 0; }
.proof-showcase-head > a { flex: none; font-size: 12px; }
.proof-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
               gap: var(--s10); }
.proof-card { position: relative; min-width: 0; min-height: 176px; overflow: hidden;
              display: flex; flex-direction: column; padding: var(--s18) var(--s20);
              border: var(--bw) solid var(--line); border-radius: var(--r); }
.proof-card-network { background: #e3f3f0; }
.proof-card-price { background: #fbeae1; }
.proof-card-score { background: var(--ink); color: #fff; }
.proof-card-label { font: 500 9.5px var(--mono); letter-spacing: .11em;
                    text-transform: uppercase; color: var(--text-3); }
.proof-card-score .proof-card-label { color: var(--mono-dark); }
.proof-card h3 { margin: 4px 0 7px; font-size: 19px; }
.proof-card p { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.5;
                color: var(--text-2); }
.proof-card-score p { color: var(--on-dark); }
.proof-card footer { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto;
                     padding-top: var(--s18); }
.proof-card footer span { padding: 5px 8px; border-radius: 999px;
                          background: rgba(255,255,255,.64);
                          font: 500 9px var(--mono); color: var(--text-2); }
.proof-card-score footer span { background: #242428; color: var(--mono-dark); }
@media (max-width: 850px) {
  .proof-strip { grid-template-columns: minmax(0,1fr); }
  .proof-card { min-height: 168px; }
}
@media (max-width: 560px) {
  .proof-showcase-head { align-items: flex-start; flex-direction: column; }
}

/* ── Разделы и чипы ──────────────────────────────────────────────────── */
.section-heading { display: flex; align-items: flex-end;
                   justify-content: space-between; gap: var(--s18); flex-wrap: wrap;
                   padding: var(--s24) 0 var(--s10);
                   border-bottom: 1px solid var(--line); margin-bottom: var(--s10); }
.section-heading h2 { margin: 0; }
.section-heading > a { font: 500 12px var(--font); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips a, .chip, .info-page-nav a, .location-catalog span,
.glossary-alphabet button { font: 400 12px var(--font); padding: 4px 11px;
                            border-radius: var(--r8); background: transparent;
                            border: 1px solid var(--line); color: var(--text); }
.chips a:hover, .info-page-nav a:hover { background: var(--field);
                                         text-decoration: none; }
.glossary-alphabet { display: flex; gap: 4px; flex-wrap: wrap; }
.glossary-alphabet button.is-active, .info-page-nav a.is-active {
  background: var(--ink); border-color: var(--ink); color: #fff; }
.info-page-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s10); }

.badge { display: inline-block; padding: 3px 9px; border-radius: var(--r6);
         font: 500 11px var(--mono); letter-spacing: .06em;
         background: var(--field); color: var(--text-2); }
.badge.net-yes { background: var(--ok-bg); color: var(--ok-text); }
.badge.net-no, .badge.fx { background: var(--warn-bg); color: var(--warn-text); }

.gap, .notice, .disclosure { background: var(--note-bg); color: var(--note-text);
                             border: var(--bw) solid var(--line);
                             border-radius: var(--r); padding: var(--s14) var(--s18);
                             font-size: 13px; margin-bottom: var(--s10); }
.is-good, .no-risk-signals { color: var(--ok-text); }
.is-unknown { color: var(--text-3); }
.is-alert, .bad { color: var(--risk-text); }

/* ── Таблицы ─────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: var(--s10) var(--s14);
         border-bottom: 1px solid var(--hair); white-space: nowrap; }
thead th { background: var(--field); position: sticky; top: 0; z-index: 1;
           border-bottom: 1px solid var(--line);
           font: 500 10.5px var(--mono); letter-spacing: .11em;
           text-transform: uppercase; color: var(--text-3); }
tbody tr:hover { background: var(--field); }
tbody tr:last-child td { border-bottom: 0; }
.wrap-cell { white-space: normal; min-width: 170px; }
td.num, .num { text-align: right; font-variant-numeric: tabular-nums;
               font-family: var(--mono); }
.pos { font: 500 12px var(--mono); color: var(--text-3); width: 44px; }
.unit-cost b { display: block; font: 500 12px var(--mono); }
.unit-cost small { font-size: 11px; color: var(--text-3); }
.plan-location-map a { font-size: 12px; }

/* ── Отзывы ──────────────────────────────────────────────────────────── */
.review { padding: var(--s14) 0; border-bottom: 1px solid var(--hair); }
.review:last-child { border-bottom: 0; }
.review .head { display: flex; gap: var(--s10);
               align-items: center; flex-wrap: wrap;
               font-size: 12px; color: var(--text-2); }
.stars { color: var(--warn); letter-spacing: 1px; }
.pros { color: var(--ok-text); font-size: 13px; }
.cons { color: var(--risk-text); font-size: 13px; }

/* Карточка внешнего отзыва делила правило с .review (просто разделитель
   списка, без рамки/фона) — в сетке из нескольких колонок это выглядело
   как текст без границ карточки, а не карточками. */
.external-review-card { background: var(--panel); border: var(--bw) solid var(--line);
                        border-radius: var(--r8); padding: var(--s18);
                        display: flex; flex-direction: column; gap: var(--s10); }
.external-review-card blockquote { margin: 0; font-size: 14px; line-height: 1.5;
                                   color: var(--text); text-wrap: pretty; }
.external-review-footer { display: flex; flex-direction: column; gap: 2px;
                          margin-top: auto; padding-top: var(--s10);
                          border-top: 1px solid var(--hair);
                          font-size: 12px; color: var(--text-2); }
.external-review-footer b { white-space: normal; overflow-wrap: anywhere; color: var(--text); }

/* Заголовок «Последние отзывы на внешних площадках» — 15px читался как
   обычный текст, а не как заголовок подраздела. */
.external-review-intro b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

/* ── Форма отзыва ─────────────────────────────────────────────────────── */
.review-form { display: flex; flex-direction: column; gap: var(--s14); }
.review-form label { display: block; font-size: 13px; font-weight: 500;
                     color: var(--text); margin-bottom: 6px; }
.review-form .grid2 { gap: var(--s14) var(--s18); }
.review-form textarea { min-height: 120px; }
.review-form button { align-self: flex-start; }

/* ── Реклама ─────────────────────────────────────────────────────────── */
.ad .mark { display: flex; gap: var(--s10); flex-wrap: wrap;
            font: 400 10.5px var(--mono); letter-spacing: .08em;
            text-transform: uppercase; color: var(--text-3);
            padding-bottom: 6px; margin-bottom: var(--s10);
            border-bottom: 1px solid var(--hair); }
.ad-creative { border-radius: var(--r8); margin-bottom: var(--s10); }
.ad-placeholder-card { background: var(--panel); border: var(--bw) solid var(--line);
                       border-radius: var(--r); padding: var(--s10);
                       display: flex; flex-direction: column; gap: 8px; }
.ad-placeholder { position: relative; min-height: 132px; border-radius: var(--r8);
                  border: 1.5px dashed #cfcbbe; background: var(--field);
                  display: flex; flex-direction: column; align-items: center;
                  justify-content: center; gap: 6px; text-align: center;
                  padding: var(--s14); color: var(--text-3); }
.ad-placeholder svg { opacity: .5; }
.ad-placeholder b { font: 600 14px var(--font); color: var(--text-2); }
.ad-placeholder small { font-size: 11px; color: var(--text-3); }
.ad-placeholder-meta { display: flex; align-items: center; justify-content: space-between;
                       gap: var(--s10); padding: 0 6px 2px; }

/* ── Бегущая строка ──────────────────────────────────────────────────── */
.risk-banner { display: flex; align-items: center; gap: var(--s18);
               padding: var(--s14) var(--s18); overflow: hidden; }
.risk-banner:hover { text-decoration: none; }
.risk-banner-icon { flex: none; width: 40px; height: 40px; border-radius: var(--r8);
                   background: var(--ok); color: var(--ok);
                   display: flex; align-items: center; justify-content: center; }
.risk-banner.is-alert .risk-banner-icon { background: var(--risk); color: var(--risk); }
@keyframes hm-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.risk-banner-intro { display: flex; flex-direction: column; flex: none; gap: 2px;
                     padding-right: var(--s18); border-right: 1px solid #2e2e32; }
.risk-banner-intro small { font: 400 10px var(--mono); letter-spacing: .1em;
                           text-transform: uppercase; color: var(--mono-dark); }
.risk-banner-intro b { font: 600 15px var(--font); display: flex; align-items: center;
                       gap: 8px; color: #fff; }
.risk-banner-dot { width: 7px; height: 7px; border-radius: 999px; flex: none;
                   background: var(--risk); display: inline-block;
                   animation: hm-pulse 1.8s ease-in-out infinite; }
.risk-banner:not(.is-alert) .risk-banner-dot { background: var(--ok); }
.risk-banner-flow { flex: 1; overflow: hidden;
                    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 92%, transparent);
                    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 92%, transparent); }
.risk-banner-flow-track { display: flex; flex-wrap: nowrap; width: max-content;
                          animation: hm-marquee 26s linear infinite; }
@keyframes hm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.risk-banner:hover .risk-banner-flow-track { animation-play-state: paused; }
.risk-banner-flow-set { display: flex; align-items: center; gap: 34px;
                        flex: none; padding-right: 34px; font-size: 13px;
                        color: var(--on-dark); white-space: nowrap; }
.risk-banner-metric { display: flex; flex: none; align-items: baseline; gap: 5px;
                      white-space: nowrap; }
.risk-banner-metric b { font: 600 19px var(--font); letter-spacing: -.03em; color: #fff; }
.risk-banner-metric small { font-size: 11px; color: var(--mono-dark); }
.risk-banner-metric.is-critical b { color: var(--risk); }
.risk-banner-metric.is-watch b { color: var(--warn); }
.risk-banner-detail { display: flex; flex: none; align-items: center; gap: 8px;
                      white-space: nowrap; }
.risk-banner-detail small { font: 400 10px var(--mono); letter-spacing: .1em;
                            text-transform: uppercase; color: var(--mono-dark); }
.risk-banner-detail b { font: 500 13px var(--font); color: var(--on-dark); }
.risk-banner-link { flex: none; font: 600 12px var(--mono); letter-spacing: .08em;
                    text-transform: uppercase; color: var(--accent-2);
                    padding-left: var(--s18); border-left: 1px solid #2e2e32; }
@media (prefers-reduced-motion: reduce) {
  .risk-banner-flow-track { animation: none; }
}

/* ── Прочее ──────────────────────────────────────────────────────────── */
.blog-article-card strong, .glossary-card strong,
.location-risk-card b, .about-proof b, .method-section h3 {
  display: block; font: 600 17px var(--font); letter-spacing: -.02em; margin-bottom: 6px; }
/* .card-heading — обёртка-строка (заголовок слева, бейдж/ссылка справа),
   а не текстовая надпись: делила правило с .feature-card b и рендерилась
   как жирный текст без раскладки — дети (eyebrow+h2+бейдж) просто падали
   друг на друга без flex. */
.card-heading { display: flex; align-items: flex-start; justify-content: space-between;
               gap: var(--s18); flex-wrap: wrap; margin-bottom: var(--s14); }
.card-heading h2 { margin: 0; }
.glossary-card small { font: 500 11px var(--mono); color: var(--text-3); }
.glossary-card i { display: block; font-style: normal; font-size: 12px;
                   color: var(--accent); margin-top: 6px; }
.mini-card strong { display: block; font: 600 15px var(--font); margin-bottom: 4px; }
.mini-card span { display: block; font-size: 13px; color: var(--text-2); }
.mini-card small { display: block; font-size: 11px; color: var(--text-3); margin-top: 6px; }
.mini-card:hover { text-decoration: none; background: var(--field); }
.empty-state { text-align: center; padding: var(--s44) var(--s20); color: var(--text-2); }
.empty-state b { display: block; font: 600 17px var(--font); color: var(--text);
                 margin-bottom: 6px; }

.method-weight-row { display: grid; grid-template-columns: minmax(0,1fr) 120px 56px;
                     gap: var(--s18); align-items: center; padding: var(--s10) 0;
                     border-bottom: 1px solid var(--hair); }
.method-weight-row:last-child { border-bottom: 0; }
.method-weight-row > span { display: flex; flex-direction: column; }
.method-weight-row small { font-size: 11px; color: var(--text-3); }
.method-weight-row i { display: block; height: 6px; background: var(--field);
                       border-radius: 999px; overflow: hidden; }
.method-weight-row em { display: block; height: 100%; background: var(--accent-2); }
.method-weight-row strong { text-align: right; font: 600 14px var(--mono); }
.method-weight-row.is-reference b { color: var(--text-2); }
.method-weight-row.is-reference em { background: #d9d6cb; }

/* Шапка секции методологии — та же строка «эйброу + заголовок», что и
   .card-heading, плюс лид справа. Без правила <header> был блочным
   потоком, и подпись липла к заголовку. */
.method-section header { display: flex; align-items: flex-start;
                        justify-content: space-between; gap: var(--s18) var(--s24);
                        flex-wrap: wrap; margin-bottom: var(--s14); }
.method-section header h2 { margin: 0; }
.method-section header > p { margin: 0; flex: 1 1 280px; max-width: 46ch;
                            font-size: 13px; color: var(--text-2); }

/* Шесть правил: <span>01</span><b>заголовок</b><p>текст</p> — все инлайновые,
   без правила номер слипался с заголовком в «01Балл нельзя поправить». */
.method-rule-grid article { background: var(--panel); border: var(--bw) solid var(--line);
                           border-radius: var(--r); padding: var(--s18);
                           display: flex; flex-direction: column; gap: 4px; }
.method-rule-grid article > span { font: 500 10.5px var(--mono); letter-spacing: .11em;
                                  color: var(--text-3); }
.method-rule-grid article > b { font: 600 15px var(--font); letter-spacing: -.01em; }
.method-rule-grid article > p { margin: 0; font-size: 13px; color: var(--text-2); }

/* Раскрывающиеся критерии — по образцу .data-passport. */
.method-details { display: flex; flex-direction: column; gap: 6px; }
.method-details details { border: var(--bw) solid var(--line); border-radius: var(--r8);
                         padding: var(--s14) var(--s18); background: var(--panel); }
.method-details details[open] { background: var(--field); }
.method-details summary { cursor: pointer; display: flex; align-items: baseline;
                         gap: var(--s10) var(--s14); flex-wrap: wrap; list-style: none; }
.method-details summary::-webkit-details-marker { display: none; }
.method-details summary > span { flex: none; font: 500 10.5px var(--mono);
                                letter-spacing: .11em; color: var(--text-3); }
.method-details summary > b { font: 600 15px var(--font); letter-spacing: -.01em; }
.method-details summary > i { font-style: normal; font-size: 12px; color: var(--text-3);
                             margin-left: auto; text-align: right; }
.method-details details > p { margin: var(--s10) 0 0; font-size: 13px;
                             color: var(--text-2); line-height: 1.6; max-width: 76ch; }

.data-passport summary { cursor: pointer; display: flex; gap: var(--s14);
                         align-items: center; justify-content: space-between; }
.data-passport summary b { font: 600 17px var(--font); letter-spacing: -.02em; }
.data-passport summary small { display: block; font: 500 10.5px var(--mono);
                               letter-spacing: .11em; text-transform: uppercase;
                               color: var(--text-3); }
.data-passport summary i { font-style: normal; font-size: 12px; color: var(--accent); }
.data-passport-grid { margin-top: var(--s14); }
.data-passport-grid > div { border: 1px solid var(--line); border-radius: var(--r8);
                           padding: var(--s14); }
.data-passport-grid span { font: 500 10.5px var(--mono); letter-spacing: .11em;
                           text-transform: uppercase; color: var(--text-3); }
.data-passport-grid b { display: block; font-size: 14px; margin: 4px 0; }
.data-passport-grid small { display: block; font-size: 11px; color: var(--text-3); }
.location-catalog summary { cursor: pointer; font-size: 13px; }
.location-catalog > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--s10); }

.article-body { max-width: 68ch; font-size: 16px; line-height: 1.7; }
.article-body h2 { margin-top: var(--s36); }
.article-body img { border-radius: var(--r8); }

/* .hoster-message из этого правила убран: так называется <label> с
   textarea в форме провайдера, а не плашка-уведомление — он подхватывал
   жёлтый фон и рамку алерта. Сами уведомления используют .form-message. */
.form-message { padding: var(--s14) var(--s18);
                border-radius: var(--r8); border: 1px solid var(--line);
                background: var(--note-bg); color: var(--note-text);
                font-size: 13px; margin-bottom: var(--s10); }
.form-message.error { background: var(--risk-bg); color: var(--risk-text); }
.form-message.success { background: var(--ok-bg); color: var(--ok-text); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; }
.consent { display: flex; gap: var(--s10); align-items: flex-start;
           font-size: 12px; color: var(--text-2); margin: var(--s10) 0; }
.consent input { width: auto; margin-top: 3px; }

/* ── Блок «Для хостинг-провайдеров» ──────────────────────────────────── */
.hoster-section header { display: flex; align-items: flex-start;
                        justify-content: space-between; gap: var(--s18) var(--s24);
                        flex-wrap: wrap; margin-bottom: var(--s14); }
.hoster-section header h2 { margin: 0; }
.hoster-section header > p { margin: 0; flex: 1 1 280px; max-width: 46ch;
                            font-size: 13px; color: var(--text-2); }
.hoster-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
                 gap: var(--s10); margin-bottom: var(--s14); }
.hoster-options article { background: var(--field); border-radius: var(--r8);
                         padding: var(--s18); display: flex; flex-direction: column; gap: 4px; }
.hoster-options span { font: 500 10.5px var(--mono); letter-spacing: .11em;
                      text-transform: uppercase; color: var(--text-3); }
.hoster-options h3 { margin: 0; font: 600 15px var(--font); letter-spacing: -.01em; }
.hoster-options p { margin: 0; font-size: 13px; color: var(--text-2); }
.hoster-options article > a { width: fit-content; margin-top: 8px; color: var(--accent);
  font: 600 12px var(--mono); overflow-wrap: anywhere; }
.about-hoster-cta { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s18); padding: var(--s18); border: 1px solid var(--line);
  border-radius: var(--r8); background: #fff; }
.about-hoster-cta > div { display: grid; gap: 5px; min-width: 0; }
.about-hoster-cta b { font-size: 15px; }
.about-hoster-cta p { max-width: 690px; margin: 0; color: var(--text-2); font-size: 13px; }
.about-hoster-cta .btn { flex: none; }
.project-contact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s10); }
.project-contact-grid > a { display: grid; gap: 6px; min-width: 0; padding: var(--s18);
  border: 1px solid var(--line); border-radius: var(--r8); background: #fff; color: var(--text); }
.project-contact-grid > a:hover { border-color: var(--accent); text-decoration: none; }
.project-contact-grid span { color: var(--text-3); font: 500 10px var(--mono);
  letter-spacing: .1em; text-transform: uppercase; }
.project-contact-grid b { color: var(--accent); font-size: 15px; overflow-wrap: anywhere; }
.project-contact-grid small { color: var(--text-2); font-size: 12px; line-height: 1.45; }

/* Маркеры <ol> убраны: нумерация своя (01/02/03), иначе шли двойные
   номера «1. 01Вы описываете задачу». */
.hoster-flow { list-style: none; margin: 0 0 var(--s18); padding: 0; display: grid;
              grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--s10); }
.hoster-flow li { display: flex; align-items: baseline; gap: var(--s10); }
.hoster-flow b { flex: none; font: 500 10.5px var(--mono); letter-spacing: .11em;
                color: var(--text-3); }
.hoster-flow span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hoster-flow strong { font: 600 14px var(--font); }
.hoster-flow small { font-size: 12px; color: var(--text-2); }

/* Форма: поля в две колонки, подпись над полем на всю ширину — иначе
   input вставал инлайн рядом с текстом label и колонка «прыгала». */
.hoster-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
              gap: var(--s14); border-top: 1px solid var(--hair); padding-top: var(--s18); }
.hoster-form-heading { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.hoster-form-heading span { font: 500 10.5px var(--mono); letter-spacing: .11em;
                           text-transform: uppercase; color: var(--text-3); }
.hoster-form-heading h3 { margin: 0; font: 600 19px var(--font); letter-spacing: -.02em; }
.hoster-form-heading p { margin: 0; font-size: 13px; color: var(--text-2); max-width: 62ch; }
.hoster-form > label { display: flex; flex-direction: column; gap: 5px;
                      font-size: 13px; color: var(--text-2); }
.hoster-form .hoster-message,
.hoster-form .hoster-file,
.hoster-form .consent,
.hoster-form .hoster-submit { grid-column: 1 / -1; }
.hoster-file small { font-size: 11px; color: var(--text-3); }
.hoster-file input[type=file] { font-size: 13px; padding: var(--s10) 13px; }
.hoster-submit { display: flex; align-items: center; justify-content: space-between;
                gap: var(--s14); flex-wrap: wrap; }
.hoster-submit small { font-size: 12px; color: var(--text-3); }
.hoster-submit button { flex: none; }

/* ── Подвал ──────────────────────────────────────────────────────────── */
/* В хендоффе подвал — та же светлая карточка, что и всё остальное на
   странице, а не тёмная полоса на всю ширину. */
footer.site { margin-top: var(--s24); padding-bottom: var(--s24); }
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--s24) 40px;
              justify-content: space-between; align-items: flex-start;
              background: var(--panel); border: var(--bw) solid var(--line);
              border-radius: var(--r); padding: var(--s24) 30px; }
.footer-grid > div { display: flex; flex-direction: column; gap: 8px; }
.footer-about { max-width: 34ch; }
.footer-about p { font-size: 13px; color: var(--text-2); }
.footer-grid .footer-primary-email { width: fit-content; color: var(--accent);
  font: 600 13px var(--mono); overflow-wrap: anywhere; }
.footer-kicker { font: 500 10px var(--mono); letter-spacing: .1em;
                text-transform: uppercase; color: var(--text-2);
                display: flex; align-items: center; gap: 6px; }
.footer-grid a { font-size: 14px; color: var(--text); }
.footer-grid a:hover { color: var(--accent); text-decoration: none; }
.footer-date { font: 400 14px var(--mono); }
.footer-note { font-size: 13px; color: var(--text-2); }
.footer-grid > .footer-rights { flex: 1 0 100%; flex-direction: row;
                                align-items: center; justify-content: space-between;
                                gap: var(--s10) var(--s18); padding-top: var(--s14);
                                border-top: 1px solid var(--hair); }
.footer-rights span { font-size: 11px; line-height: 1.5; color: var(--text-3); }
.footer-grid .footer-rights a { flex: none; font-size: 11px; }

/* ── Админка ─────────────────────────────────────────────────────────── */
.admin-bar { background: var(--ink); color: var(--on-dark); margin-bottom: var(--s10); }
.admin-bar .wrap { display: flex; align-items: center; gap: var(--s18);
                   min-height: 56px; flex-wrap: wrap; }
.admin-brand { color: #fff; font: 600 12px var(--mono); letter-spacing: .1em; }
.admin-bar nav { display: flex; gap: var(--s14); flex-wrap: wrap; }
.admin-bar a { color: var(--mono-dark); font-size: 13px; }
.admin-bar a:hover { color: #fff; text-decoration: none; }
.admin-bar .out { margin-left: auto; display: flex; gap: var(--s14); }
.admin-alert { background: var(--risk-bg); color: var(--risk-text);
               border: var(--bw) solid var(--line); border-radius: var(--r);
               padding: var(--s14) var(--s18); margin-bottom: var(--s10); }
.stats { display: flex; gap: var(--s24); flex-wrap: wrap; }
.stats div { display: flex; flex-direction: column; font-size: 12px; color: var(--text-2); }
.todo { border-left: 3px solid var(--accent); background: var(--field);
        padding: var(--s10) var(--s14); margin-bottom: var(--s10);
        border-radius: 0 var(--r6) var(--r6) 0; font-size: 13px; }
.ok { color: var(--ok-text); } .err, .error { color: var(--risk-text); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s18); }
.inline { display: flex; gap: var(--s10); align-items: flex-end; flex-wrap: wrap; }

/* ── Адаптив ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rating-catalog { grid-template-columns: minmax(0,1fr); }
  .catalog-filter-panel { position: static; }
  .provider-columns { grid-template-columns: minmax(0,1fr); }
  .monitor-columns { grid-template-columns: minmax(0,1fr); }
  .monitor-data-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gpu-comparison-layout { grid-template-columns: minmax(0,1fr); }
  .gpu-filter-rail { position: static; }
}
@media (max-width: 760px) {
  h1 { font-size: 32px; }
  h2 { font-size: 23px; }
  .provider-title-row h1 { font-size: 28px; }
  .poster-main, .info-hero, .gpu-hero, .monitor-hero, .methodology-hero,
  .about-info-hero, .compare-hero, .blog-hero, .glossary-hero {
    padding: var(--s24) var(--s20); }
  .blog-hero { padding: 0; }
  .blog-hero-copy { padding: var(--s24) var(--s20); }
  .blog-control-main { align-items: stretch; flex-direction: column; gap: var(--s10); }
  .blog-result-count { align-self: flex-end; }
  .blog-feed { grid-template-columns: minmax(0,1fr); }
  .location-grid { grid-template-columns: minmax(0,1fr); }
  .monitor-locations-card { padding: var(--s16); }
  .monitor-data-strip { grid-template-columns: minmax(0,1fr); }
  .energy-current-grid { grid-template-columns: minmax(0,1fr); }
  .blog-top-ad, .blog-ad-strip { grid-template-columns: minmax(0,1fr); }
  .blog-article-card.is-featured { grid-column: 1; grid-template-columns: minmax(0,1fr);
                                   min-height: 200px; padding: 0; }
  .blog-article-card.is-featured .blog-card-cover { min-height: 0; aspect-ratio: 16/9; }
  .blog-article-card.is-featured .blog-card-content { padding: var(--s20); }
  .blog-article-card.is-featured .blog-card-body strong { font-size: 24px; }
  .blog-card-meta { align-items: flex-start; flex-wrap: wrap; }
  .rating-card { grid-template-columns: minmax(0,1fr); }
  .rating-card-promo { grid-column: 1; grid-row: auto; }
  .rating-card-score-slot, .hybrid-price,
  .rating-card-footer .hybrid-actions { flex-basis: auto; width: auto; max-width: none; }
  .rating-card-plan { flex-wrap: wrap; }
  .rating-card-plan .rating-card-specs { flex: 1 1 180px; }
  .rating-card-plan .hybrid-price { flex: 1 0 100%; margin-left: 0;
                                    justify-content: flex-start; text-align: left; }
  .rating-card-plan-note, .gpu-offer-notes { padding-right: 0; }
  .rating-card-footer { flex-wrap: wrap; }
  .poster-hero { grid-template-columns: minmax(0,1fr); }
  .rating-results-head .rating-sort { margin-left: 0; }
  .method-weight-row { grid-template-columns: minmax(0,1fr) auto; }
  .method-weight-row i { display: none; }
  .grid2, .catalog-price-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 var(--s14); }
  .risk-banner { flex-wrap: nowrap; }
}

@media print {
  .risk-banner, .catalog-filter-panel, footer.site { display: none; }
}

/* Порядок колонок hero задан явно: в разметке боковая колонка идёт первой,
   поэтому без указания она забирала широкую сторону и заголовок сжимался
   в 320px. По хендоффу заголовок слева (1.5fr), карточка справа (320px). */
.poster-hero > .poster-main { grid-column: 1; }
.poster-hero > .poster-side { grid-column: 2; }
@media (max-width: 760px) {
  .poster-hero > .poster-main,
  .poster-hero > .poster-side { grid-column: 1; }
}

/* В хендоффе правая колонка hero — компактная карточка «ваше подключение»,
   поэтому там уместен align-items:end. У нас справа медиа-слот 16:9 плюс
   счётчики — колонка выше, и прижатие вниз оставляло пустую полосу сверху.
   Растягиваем обе колонки на одну высоту. */
.poster-hero { align-items: stretch; }
.poster-main { display: flex; flex-direction: column; justify-content: flex-end; }
/* align-content:start не давал панели растянуться, и правый блок кончался
   выше левого. Обе колонки hero — одной высоты на всех страницах. */
.poster-side { align-content: stretch; }
.poster-side > .net-panel { height: 100%; }

/* Обе колонки hero принудительно в первую строку. Без grid-row авторазметка
   уводила вторую по порядку панель на новую строку (боковая колонка идёт в
   разметке первой), и hero вырастал в сумму двух строк с пустотой между. */
.poster-hero > .poster-main { grid-column: 1; grid-row: 1; }
.poster-hero > .poster-side { grid-column: 2; grid-row: 1; }
@media (max-width: 760px) {
  .poster-hero > .poster-main { grid-column: 1; grid-row: 1; }
  .poster-hero > .poster-side { grid-column: 1; grid-row: 2; }
}

/* Селект сортировки — по содержимому, а не на всю ширину: правило
   width:100% нужно фильтрам в узкой панели, но не строке заголовка. */
.rating-sort select, .rating-heading select { width: auto; min-width: 190px; }
.rating-sort { flex-wrap: wrap; }

/* ── Анимированная сетка фоном тёмных баннеров ───────────────────────── */
/* Канвас добавляется скриптом внутрь .mesh-host и лежит подложкой; всё
   содержимое панели поднимается над ним. Фон панели остаётся тёмным, чтобы
   до запуска скрипта и при prefers-reduced-motion вид не менялся. */
.mesh-host { position: relative; overflow: hidden; }
.mesh-canvas { position: absolute; inset: 0; width: 100%; height: 100%;
               display: block; z-index: 0; }
.mesh-host > *:not(.mesh-canvas) { position: relative; z-index: 1; }

/* ── Кастомный селект (catalog-ui.js) ────────────────────────────────── */
/* Скрипт заменяет нативный select на кнопку с выпадающим меню. Стилей под
   него в системе не было, поэтому кнопка и все пункты меню красились общим
   правилом button — на странице висела гроздь зелёных плашек.
   Меню скрыто, пока не открыто; пункты — обычный список, не кнопки.
   Сам select после замены не удаляется (нужен для отправки формы),
   поэтому его прячем — без этого под кастомной кнопкой висел ещё и
   нативный select, и по каждому фильтру рисовались два поля. */
.ui-select { position: relative; display: inline-block; width: 100%; }
select[data-enhanced] { position: absolute; width: 1px; height: 1px;
                        padding: 0; margin: -1px; overflow: hidden;
                        clip: rect(0 0 0 0); border: 0; }
.ui-select-button {
  width: 100%; justify-content: space-between; text-align: left;
  background: var(--field); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r8);
  font: 400 14px var(--font); padding: 11px 13px;
}
.ui-select-button:hover { background: var(--field); }
.ui-select-button::after {
  content: ""; flex: none; width: 10px; height: 6px; margin-left: 10px;
  background: var(--line);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.ui-select-menu {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 280px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r8); padding: 4px;
  display: none;
}
.ui-select-menu[data-open="true"],
.ui-select.is-open .ui-select-menu { display: block; }
.ui-select-option {
  display: block; width: 100%; text-align: left;
  background: transparent; color: var(--text); border: 0;
  border-radius: var(--r6); padding: 8px 10px;
  font: 400 14px var(--font); cursor: pointer;
}
.ui-select-option:hover { background: var(--field); }
.ui-select-option[aria-selected="true"],
.ui-select-option.is-selected { background: var(--ink); color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   Блоки, у которых в разметке были классы, но не было ни одного правила.
   Все они рендерились как поток инлайновых элементов — отсюда слипшийся
   текст вида «01 · СетьRIPE AtlasЗадержка…» и «20% прозрачность цены20%».
   ════════════════════════════════════════════════════════════════════ */

/* Методология: веса */
.method-weight-layout { display: grid; grid-template-columns: minmax(0,260px) minmax(0,1fr);
                       gap: var(--s24); align-items: start; }
.method-total { display: flex; flex-direction: column; gap: 4px;
               background: var(--field); border-radius: var(--r8); padding: var(--s18); }
.method-total small { font: 500 10.5px var(--mono); letter-spacing: .11em;
                     text-transform: uppercase; color: var(--text-3); }
.method-total b { font: 600 34px/1 var(--font); letter-spacing: -.045em; }
.method-total span { font-size: 12px; color: var(--text-2); }
.method-weight-list { min-width: 0; }

/* Методология: план измерений */
.measurement-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
                        gap: var(--s10); margin-bottom: var(--s14); }
.measurement-plan-grid article { background: var(--field); border-radius: var(--r8);
                                padding: var(--s18); display: flex; flex-direction: column; gap: 4px; }
.measurement-plan-grid b { font: 500 10.5px var(--mono); letter-spacing: .11em;
                          text-transform: uppercase; color: var(--text-3); }
.measurement-plan-grid strong { font: 600 15px var(--font); letter-spacing: -.01em; }
.measurement-plan-grid span { font-size: 13px; color: var(--text-2); }

/* Методология: уровни доказательности */
.evidence-levels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s10) var(--s18);
                  border-top: 1px solid var(--hair); padding-top: var(--s14); }
.evidence-levels > b { flex: 1 0 100%; font: 600 13px var(--font); }
.evidence-levels > span { display: inline-flex; align-items: baseline; gap: 7px;
                         font-size: 12px; color: var(--text-2); }
.evidence-levels i { font-style: normal; font: 500 10.5px var(--mono); letter-spacing: .11em;
                    color: var(--text-3); }

/* Методология: формула GPU-балла */
.gpu-score-formula { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s14); }
.gpu-score-formula span { display: inline-flex; align-items: baseline; gap: 6px;
                         background: var(--field); border-radius: var(--r8);
                         padding: 6px 11px; font-size: 12px; color: var(--text-2); }
.gpu-score-formula b { font: 600 13px var(--mono); color: var(--text); }

/* Глоссарий: поиск и алфавит */
.glossary-tools { display: flex; flex-direction: column; gap: var(--s14); }
.glossary-tools label { position: relative; display: block; margin: 0; }
.glossary-tools kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
                     font: 500 10px var(--mono); color: var(--text-3);
                     background: var(--panel); border: 1px solid var(--line);
                     border-radius: var(--r6); padding: 3px 7px; }
.glossary-tools input { padding-right: 62px; }
.glossary-tools output { font: 500 10.5px var(--mono); letter-spacing: .11em;
                        text-transform: uppercase; color: var(--text-3); }
.glossary-empty { text-align: center; padding: var(--s44) var(--s20); color: var(--text-2); }

/* Ссылка-«ещё» в заголовке секции и сброс фильтра каталога */
.poster-more, .catalog-reset { display: inline-flex; align-items: center; gap: 6px;
                              font: 500 12px var(--font); color: var(--btn); white-space: nowrap; }
.poster-more:hover, .catalog-reset:hover { color: var(--btn-hover); text-decoration: none; }
.poster-more i, .catalog-reset i { font-style: normal; }

/* Карточка провайдера: заголовок колонки и блок аналогов */
.provider-column-title { display: flex; align-items: center; gap: var(--s10);
                        color: var(--text); min-width: 0; }
.provider-column-title:hover { text-decoration: none; }
.analogue-heading { margin-top: var(--s10); }
.related-articles { margin-bottom: var(--s10); }
.related-articles > .eyebrow { margin-bottom: var(--s10); }

/* Единый вертикальный ритм. Раньше отступ выдавался поимённо каждой
   секции — любой новый блок выпадал из списка и вставал встык к соседу
   (карточка → «Ожидают данных», чарт → «Как выбирать», форма → модерация).
   Правило по потомкам main закрывает это разом; последнему отступ снимаем,
   чтобы не тянуть лишний воздух перед подвалом. */
main.wrap > * { margin-bottom: var(--s10); }
main.wrap > *:last-child { margin-bottom: 0; }

/* ── Документные страницы: методология и о проекте ─────────────────── */
.knowledge-page > * { margin-bottom: var(--s10); }
.knowledge-page > *:last-child { margin-bottom: 0; }

.doc-answer { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr);
              gap: var(--s24); align-items: stretch; background: var(--panel);
              border: var(--bw) solid var(--line); border-radius: var(--r);
              padding: var(--s24); }
.doc-answer-copy { display: flex; flex-direction: column; justify-content: center;
                   gap: 6px; min-width: 0; }
.doc-answer-copy h2 { margin: 0 0 4px; }
.doc-answer-copy p { max-width: 78ch; font-size: 14px; color: var(--text-2); }
.doc-answer-copy b { color: var(--text); }
.doc-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
             gap: 1px; margin: 0; overflow: hidden; border-radius: var(--r8);
             background: var(--hair); border: 1px solid var(--hair); }
.doc-facts > div { min-width: 0; background: var(--field); padding: var(--s14); }
.doc-facts dt { font: 500 10px var(--mono); letter-spacing: .1em;
                text-transform: uppercase; color: var(--text-3); }
.doc-facts dd { margin: 4px 0 0; font: 600 14px var(--font); color: var(--text); }

.doc-shell { display: grid; grid-template-columns: 220px minmax(0,1fr);
             gap: var(--s10); align-items: start; }
.doc-rail { position: sticky; top: 88px; display: flex; flex-direction: column;
            gap: var(--s14); background: var(--panel); border: var(--bw) solid var(--line);
            border-radius: var(--r); padding: var(--s18); }
.doc-rail > span { font: 500 10.5px var(--mono); letter-spacing: .11em;
                   text-transform: uppercase; color: var(--text-3); }
.doc-rail nav { display: flex; flex-direction: column; gap: 2px; }
.doc-rail nav a { padding: 7px 9px; border-radius: var(--r6); font-size: 13px;
                  color: var(--text); }
.doc-rail nav a:hover { background: var(--field); text-decoration: none; }
.doc-machine-note { display: flex; flex-direction: column; gap: 4px;
                    padding-top: var(--s14); border-top: 1px solid var(--hair); }
.doc-machine-note b { font-size: 12px; }
.doc-machine-note span { font-size: 11px; line-height: 1.45; color: var(--text-3); }
.doc-machine-note a { margin-top: 3px; font-size: 12px; }
.doc-main { min-width: 0; }
.doc-main > * { margin-bottom: var(--s10); }
.doc-main > *:last-child { margin-bottom: 0; }

.doc-section, .about-section { background: var(--panel); border: var(--bw) solid var(--line);
                               border-radius: var(--r); padding: var(--s20); }
.doc-section > header, .about-section > header { display: flex; align-items: flex-start;
                                                 justify-content: space-between;
                                                 gap: var(--s18) var(--s24);
                                                 flex-wrap: wrap; margin-bottom: var(--s14); }
.doc-section > header h2, .about-section > header h2 { margin: 0; }
.doc-section > header > p, .about-section > header > p { flex: 1 1 280px; max-width: 48ch;
                                                         margin: 0; font-size: 13px;
                                                         color: var(--text-2); }
.doc-lead { max-width: 76ch; font-size: 15px; line-height: 1.65; color: var(--text-2); }

.method-criteria-grid, .source-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
                                     gap: var(--s10); }
.method-criteria-grid article, .source-grid article { display: flex; flex-direction: column;
                                                      gap: 5px; min-width: 0;
                                                      background: var(--field);
                                                      border-radius: var(--r8);
                                                      padding: var(--s18); }
.method-criteria-grid article > span, .source-grid article > span {
  font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); }
.method-criteria-grid h3 { margin: 0; font-size: 16px; }
.method-criteria-grid p, .source-grid p { margin: 0; font-size: 13px; color: var(--text-2); }
.method-criteria-grid small { margin-top: auto; padding-top: var(--s10);
                              font-size: 11px; color: var(--text-3); }
.source-grid article > b { font-size: 15px; }

.evidence-ladder { display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
                   gap: var(--s10); margin-bottom: var(--s14); }
.evidence-ladder article { display: flex; align-items: flex-start; gap: var(--s10);
                           background: var(--ink); color: #fff; border-radius: var(--r8);
                           padding: var(--s14); }
.evidence-ladder article > b { flex: none; font: 500 11px var(--mono); color: var(--accent-2); }
.evidence-ladder article > div { display: flex; flex-direction: column; gap: 3px; }
.evidence-ladder strong { font-size: 13px; }
.evidence-ladder span { font-size: 11px; line-height: 1.45; color: var(--on-dark); }

.method-limits ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
                    gap: var(--s10); list-style: none; margin: 0 0 var(--s14); padding: 0; }
.method-limits li { background: var(--field); border-radius: var(--r8);
                    padding: var(--s14); font-size: 13px; color: var(--text-2); }
.method-limits li b { color: var(--text); }
.method-roadmap { display: flex; align-items: baseline; gap: var(--s10) var(--s18);
                  flex-wrap: wrap; padding-top: var(--s14); border-top: 1px solid var(--hair); }
.method-roadmap b { font-size: 13px; }
.method-roadmap span { flex: 1 1 320px; font-size: 12px; color: var(--text-2); }

.method-candidate-grid article > span { color: var(--accent); }
.method-citation { display: grid;
                   grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr);
                   gap: var(--s10); align-items: stretch; }
.method-citation-copy { min-width: 0; display: flex; flex-direction: column; gap: 8px;
                        background: var(--ink); color: #fff; border-radius: var(--r8);
                        padding: var(--s18); }
.method-citation-copy > span { font: 500 10px var(--mono); letter-spacing: .1em;
                               text-transform: uppercase; color: var(--accent-2); }
.method-citation-copy code { font: 400 12px/1.6 var(--mono); color: var(--on-dark);
                             white-space: normal; overflow-wrap: anywhere; }
.method-fingerprint { font: 500 11px/1.4 var(--mono) !important;
                      overflow-wrap: anywhere; }
.method-rights { margin: var(--s14) 0 0; padding-top: var(--s14);
                 border-top: 1px solid var(--hair); font-size: 12px;
                 line-height: 1.55; color: var(--text-2); }

.doc-faq > div { display: flex; flex-direction: column; gap: 6px; }
.doc-faq details { background: var(--field); border-radius: var(--r8); padding: var(--s14); }
.doc-faq summary { cursor: pointer; list-style: none; font: 600 14px var(--font); }
.doc-faq summary::-webkit-details-marker { display: none; }
.doc-faq summary::after { content: "+"; float: right; color: var(--text-3); }
.doc-faq details[open] summary::after { content: "−"; }
.doc-faq details p { max-width: 76ch; margin: var(--s10) 0 0;
                     font-size: 13px; line-height: 1.6; color: var(--text-2); }

.glossary-body { border: 1px solid var(--hair); border-radius: var(--r8);
                 background: var(--field); padding: var(--s14); }
.glossary-body > summary { cursor: pointer; list-style: none; display: flex;
                           align-items: center; justify-content: space-between; gap: var(--s14); }
.glossary-body > summary::-webkit-details-marker { display: none; }
.glossary-body > summary > span { display: flex; flex-direction: column; gap: 2px; }
.glossary-body > summary b { font-size: 14px; }
.glossary-body > summary small { font-size: 11px; color: var(--text-3); }
.glossary-body > summary i { font-style: normal; font-size: 12px; color: var(--accent); }
.glossary-body[open] > summary i { font-size: 0; }
.glossary-body[open] > summary i::after { content: "Свернуть"; font-size: 12px; }
.glossary-body-content { display: flex; flex-direction: column; gap: var(--s14);
                         margin-top: var(--s14); padding-top: var(--s14);
                         border-top: 1px solid var(--hair); }

.process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
                gap: var(--s10); list-style: none; margin: 0; padding: 0; }
.process-grid li { min-width: 0; background: var(--field); border-radius: var(--r8);
                   padding: var(--s18); }
.process-grid span { font: 500 10px var(--mono); letter-spacing: .1em; color: var(--text-3); }
.process-grid h3 { margin: 8px 0 5px; font-size: 15px; }
.process-grid p { margin: 0; font-size: 12px; color: var(--text-2); }

.independence-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
                     gap: var(--s10); margin-bottom: var(--s14); }
.independence-grid article { background: var(--field); border-radius: var(--r8);
                             padding: var(--s18); }
.independence-grid article.is-positive { background: var(--ok-bg); }
.independence-grid article > span { font: 500 10px var(--mono); letter-spacing: .1em;
                                    text-transform: uppercase; color: var(--text-3); }
.independence-grid ul { margin: var(--s10) 0 0; padding-left: 18px; }
.independence-grid li { margin: 4px 0; font-size: 13px; color: var(--text-2); }

.machine-section { background: var(--ink); border-color: var(--ink); color: #fff; }
.machine-section h2 { color: #fff; }
.machine-section .eyebrow { color: var(--mono-dark); }
.machine-section > header > p { color: var(--on-dark); }
.machine-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s10); }
.machine-links a { position: relative; display: flex; flex-direction: column; gap: 4px;
                   min-width: 0; border: 1px solid #333338; border-radius: var(--r8);
                   padding: var(--s14); color: #fff; }
.machine-links a:hover { background: var(--ink-nested); text-decoration: none; }
.machine-links span { font: 500 10px var(--mono); letter-spacing: .1em; color: var(--accent-2); }
.machine-links b { font-size: 15px; }
.machine-links small { padding-right: var(--s24); font-size: 11px; color: var(--mono-dark); }
.machine-links i { position: absolute; right: var(--s14); bottom: var(--s14);
                   font-style: normal; color: var(--accent-2); }

.hoster-optional { grid-column: 1 / -1; border: 1px solid var(--hair);
                   border-radius: var(--r8); padding: var(--s14); background: var(--field); }
.hoster-optional summary { cursor: pointer; list-style: none; display: flex;
                           align-items: center; justify-content: space-between; gap: var(--s14); }
.hoster-optional summary::-webkit-details-marker { display: none; }
.hoster-optional summary > span { display: flex; flex-direction: column; gap: 2px; }
.hoster-optional summary b { font-size: 13px; }
.hoster-optional summary small { font-size: 11px; color: var(--text-3); }
.hoster-optional summary i { font-style: normal; font-size: 12px; color: var(--accent); }
.hoster-optional[open] summary i { font-size: 0; }
.hoster-optional[open] summary i::after { content: "Свернуть"; font-size: 12px; }
.hoster-optional-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
                        gap: var(--s14); margin-top: var(--s14);
                        padding-top: var(--s14); border-top: 1px solid var(--hair); }
.hoster-optional-grid label { display: flex; flex-direction: column; gap: 5px;
                              font-size: 13px; color: var(--text-2); }
.hoster-optional-grid .hoster-file { grid-column: 1 / -1; }

@media (max-width: 1000px) {
  .doc-shell { grid-template-columns: minmax(0,1fr); }
  .doc-rail { position: static; top: auto; }
  .doc-rail nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .doc-rail nav a { padding: 5px 10px; background: var(--field); }
  .doc-machine-note { display: grid; grid-template-columns: auto minmax(0,1fr) auto;
                      align-items: center; gap: var(--s10); }
}

@media (max-width: 760px) {
  .methodology-hero, .about-info-hero { padding: 0; }
  .methodology-hero .info-hero-copy, .about-info-hero .info-hero-copy {
    padding: var(--s24) var(--s20); }
  .doc-answer { grid-template-columns: minmax(0,1fr); padding: var(--s20); }
  .method-weight-layout, .method-criteria-grid, .source-grid,
  .evidence-ladder, .method-limits ul, .process-grid,
  .independence-grid, .machine-links, .hoster-optional-grid,
  .method-citation {
    grid-template-columns: minmax(0,1fr); }
  .doc-machine-note { display: flex; }
  .doc-section, .about-section { padding: var(--s18); }
  .hoster-optional-grid .hoster-file { grid-column: 1; }
  .hoster-submit button { width: 100%; justify-content: center; }
  .footer-grid > .footer-rights { align-items: flex-start; flex-direction: column; }
}

/* ── Каталог скидок ─────────────────────────────────────────────────── */
.discounts-page > * { margin-bottom: var(--s10); }
.discounts-page > *:last-child { margin-bottom: 0; }

.discount-catalog { background: var(--panel);
  border: var(--bw) solid var(--line); border-radius: var(--r); padding: var(--s20); }
.discount-section-heading { display: flex; align-items: flex-end;
  justify-content: space-between; gap: var(--s18) var(--s24); flex-wrap: wrap;
  margin-bottom: var(--s18); }
.discount-section-heading h2 { margin: 3px 0 0; }
.discount-section-heading > p { flex: 0 1 520px; margin: 0; font-size: 13px;
  color: var(--text-2); text-align: right; }

.discount-featured { background: transparent; border: 0; padding: 0; }
.discount-featured-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--s10); }
.discount-sponsor-slot { min-width: 0; background: var(--ink-nested);
  border: 1px solid #343439; border-radius: var(--r8); overflow: hidden; }
.discount-sponsor-label { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s10); padding: 10px var(--s14); border-bottom: 1px solid #343439; }
.discount-sponsor-label span { font: 600 10px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--promo-label); }
.discount-sponsor-label small { font: 500 10px var(--mono); color: var(--mono-dark); }
.discount-sponsor-slot > .ad-placeholder-card { margin: var(--s10); border: 0; }
.discount-sponsor-slot > .ad { min-height: 176px; padding: var(--s18); color: #fff; }
.discount-sponsor-slot > .ad .mark { color: var(--mono-dark); border-color: #343439; }
.discount-sponsor-slot > .ad > b { display: block; margin-bottom: 5px; font-size: 17px; }
.discount-sponsor-slot > .ad > div:not(.mark) { color: var(--on-dark); }
.discount-sponsor-slot > .ad p { margin-top: var(--s14); }

.discount-controls { display: grid; grid-template-columns: minmax(260px,1fr) auto auto;
  gap: var(--s10); align-items: center; padding: var(--s14); margin-bottom: var(--s10);
  background: var(--field); border-radius: var(--r8); }
.discount-search { position: relative; display: block; min-width: 0; }
.discount-search input { width: 100%; padding-right: 58px; background: var(--panel); }
.discount-search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font: 500 10px var(--mono); color: var(--text-3); background: var(--field);
  border: 1px solid var(--hair); border-radius: var(--r6); padding: 3px 7px; }
.discount-filters { display: flex; gap: 4px; }
.discount-filters button { background: transparent; color: var(--text-2);
  border: 1px solid transparent; padding: 8px 11px; font-size: 12px; }
.discount-filters button:hover { background: var(--panel); color: var(--text); }
.discount-filters button.is-active { background: var(--ink); color: #fff; }
.discount-controls output { justify-self: end; font: 500 10.5px var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
  white-space: nowrap; }

.discount-card-list { display: flex; flex-direction: column; gap: var(--s10); }
.discount-card { display: grid; grid-template-columns: minmax(0,1fr) 270px;
  background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r);
  overflow: hidden; min-width: 0; }
.discount-card-main { min-width: 0; padding: var(--s20); display: flex;
  flex-direction: column; gap: var(--s18); }
.discount-card-main > header { display: flex; align-items: center;
  justify-content: space-between; gap: var(--s14); }
.discount-card-brand > span:last-child { display: flex; flex-direction: column;
  gap: 2px; min-width: 0; }
.discount-card-brand > span:last-child b { font-size: 18px; }
.discount-card-brand > span:last-child small { font-size: 11px; color: var(--text-3); }
.discount-date { flex: none; font: 500 10px var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); }
.discount-card-copy { max-width: 78ch; }
.discount-card-copy h3 { margin: 5px 0 7px; font-size: 18px; }
.discount-card-copy p { margin: 0; font-size: 14px; line-height: 1.62;
  color: var(--text-2); overflow-wrap: anywhere; }
.discount-card-main > footer { display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--s10) var(--s18); flex-wrap: wrap;
  margin-top: auto; padding-top: var(--s14); border-top: 1px solid var(--hair); }
.discount-card-main > footer span { font-size: 11px; color: var(--text-3); }
.discount-card-main > footer a { font-size: 12px; white-space: nowrap; }

.discount-card-promo { display: flex; flex-direction: column; gap: var(--s14);
  position: relative; min-width: 0; padding: var(--s20); background: var(--ink);
  color: #fff; border-left: 0;
  background-color: var(--ink);
  background-image: repeating-linear-gradient(to bottom,
    #68686e 0 5px, transparent 5px 10px);
  background-repeat: no-repeat;
  background-position: left 16px;
  background-size: 2px calc(100% - 32px); }
/* Перфорация начинается только после верхней вырубки и заканчивается перед
   нижней. Поэтому штрих не проходит сквозь круглые отверстия. */
.discount-card-promo::before, .discount-card-promo::after {
  content: ""; position: absolute; z-index: 2; left: -13px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--bg);
  border: var(--bw) solid var(--line); pointer-events: none;
}
.discount-card-promo::before { top: -14px; }
.discount-card-promo::after { bottom: -14px; }
.discount-card-promo .promo-label { display: flex; align-items: center; gap: 6px;
  color: var(--promo-label); }
.discount-validity, .discount-no-code { display: flex; flex-direction: column; gap: 3px; }
.discount-validity small, .discount-no-code small { font: 500 10px var(--mono);
  letter-spacing: .09em; text-transform: uppercase; color: var(--mono-dark); }
.discount-validity b { font: 600 16px var(--font); }
.discount-no-code { padding: var(--s14); border: 1px solid #343439;
  border-radius: var(--r8); background: var(--ink-nested); }
.discount-no-code b { font-size: 12px; line-height: 1.45; color: var(--on-dark); }
.discount-card-code { width: 100%; justify-content: space-between; padding: 11px 12px;
  background: #fff; color: var(--ink); }
.discount-card-code:hover { background: var(--field); }
.discount-card-code > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.discount-card-code small { font: 500 9px var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3); }
.discount-card-code code { font: 700 13px var(--mono); color: var(--ink); }
.discount-card-code.is-copied { background: var(--ok); color: var(--ink); }
.discount-card-cta { width: 100%; justify-content: center; margin-top: auto; }
.discount-price-note { font-size: 10.5px; line-height: 1.45; color: var(--mono-dark); }
.discount-empty, .discount-empty-static { padding: var(--s36) var(--s20);
  border: 1px dashed #cfcbbe; border-radius: var(--r8); text-align: center; }
.discount-empty b, .discount-empty span,
.discount-empty-static b, .discount-empty-static span { display: block; }
.discount-empty span, .discount-empty-static span { margin-top: 4px;
  font-size: 12px; color: var(--text-3); }

@media (max-width: 900px) {
  .discount-controls { grid-template-columns: minmax(0,1fr) auto; }
  .discount-controls output { grid-column: 1 / -1; justify-self: start; }
  .discount-card { grid-template-columns: minmax(0,1fr) 240px; }
}

@media (max-width: 760px) {
  .discount-hero { padding: 0; }
  .discount-hero .info-hero-copy { padding: var(--s24) var(--s20); }
  .discount-catalog { padding: var(--s14); }
  .discount-section-heading { align-items: flex-start; }
  .discount-section-heading > p { text-align: left; }
  .discount-featured-grid, .discount-card { grid-template-columns: minmax(0,1fr); }
  .discount-controls { grid-template-columns: minmax(0,1fr); }
  .discount-filters { overflow-x: auto; padding-bottom: 2px; }
  .discount-controls output { grid-column: 1; }
  .discount-card-main { padding: var(--s18); }
  .discount-card-main > header { align-items: flex-start; }
  .discount-date { max-width: 110px; text-align: right; white-space: normal; }
  .discount-card-promo { padding: var(--s18); border-left: 0; border-top: 0;
    background-image: repeating-linear-gradient(to right,
      #68686e 0 5px, transparent 5px 10px);
    background-position: 16px top;
    background-size: calc(100% - 32px) 2px; }
  .discount-card-promo::before, .discount-card-promo::after {
    top: -13px; bottom: auto;
  }
  .discount-card-promo::before { left: -14px; }
  .discount-card-promo::after { left: auto; right: -14px; }
}

@media (max-width: 460px) {
  .discount-card-main > header { flex-direction: column; }
  .discount-date { max-width: none; text-align: left; }
  .discount-card-main > footer { align-items: flex-start; flex-direction: column; }
}

/* ── Продуктовые страницы и публичная доказательная база ─────────── */
.product-tabs { display: flex; gap: 6px; margin: 0 0 var(--s14); padding: 5px;
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r8);
  background: #fff; }
.product-tabs a { flex: 0 0 auto; padding: 9px 13px; border-radius: 7px;
  color: var(--text-2); font-size: 12px; font-weight: 650; }
.product-tabs a:hover, .product-tabs a.is-active { color: #fff; background: var(--ink); text-decoration: none; }
.nav-more { position: relative; }
.nav-more summary { list-style: none; cursor: pointer; padding: 10px 13px;
  border-radius: 9px; background: var(--field); font-weight: 650; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more[open] summary { background: var(--ink); color: #fff; }
.nav-more.is-active summary { background: var(--ink); color: #fff; }
.nav-more > div { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
  width: 210px; padding: 6px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; box-shadow: 0 16px 38px rgba(0,0,0,.14); }
.nav-more > div a { display: block; background: transparent; }
.nav-more > div a.nav-more-mobile { display: none; }
.evidence-hero { display: grid; grid-template-columns: minmax(0,1fr) 230px;
  gap: var(--s18); align-items: stretch; margin-bottom: var(--s18); padding: var(--s28);
  border-radius: var(--r); background: var(--ink); color: #fff; }
.evidence-hero > * { min-width: 0; }
.evidence-hero h1 { margin: 5px 0 8px; color: #fff;
  font-size: clamp(30px, 3.5vw, 46px); overflow-wrap: anywhere; text-wrap: balance; }
.evidence-hero p { max-width: 760px; margin: 0; color: var(--on-dark); }
.evidence-score { display: flex; flex-direction: column; justify-content: center;
  padding: var(--s18); border: 1px solid #38383c; border-radius: var(--r8); background: var(--ink-nested); }
.evidence-score small, .evidence-score span { font: 600 10px var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--mono-dark); }
.evidence-score b { margin: 6px 0; font: 700 34px var(--mono); color: #fff; }
.evidence-grid, .hub-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s12); margin-bottom: var(--s20); }
.evidence-card, .hub-links a { display: flex; flex-direction: column; min-width: 0;
  padding: var(--s20); border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); }
.evidence-card h2 { margin: 6px 0 8px; font-size: 22px; }
.evidence-card p { color: var(--text-2); }
.evidence-card > small { margin-top: 8px; color: var(--text-3); }
.evidence-card dl { margin: auto 0 12px; }
.evidence-card dl > div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.evidence-card dt { color: var(--text-3); }.evidence-card dd { margin: 0; }
.hub-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
.hub-links a { position: relative; min-height: 135px; }
.hub-links a:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.hub-links span { font: 650 10px var(--mono); color: var(--accent); letter-spacing: .12em; }
.hub-links b { margin: 15px 0 4px; font-size: 22px; }.hub-links small { color: var(--text-3); }.hub-links i { position: absolute; right: 18px; bottom: 16px; color: var(--accent); }
.source-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s10); margin-bottom: var(--s14); }
.source-summary > div { display: flex; flex-direction: column; padding: var(--s18); border: 1px solid var(--line); border-radius: var(--r8); background: #fff; }
.source-summary b { font: 700 28px var(--mono); }.source-summary span { color: var(--text-3); }
.source-list, .timeline { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.source-list article, .timeline article { display: grid; gap: var(--s12); align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--line); }
.source-list article { grid-template-columns: 10px minmax(0,1fr) 165px auto; }
.timeline article { grid-template-columns: 90px minmax(0,1fr) 165px auto; }
.source-list article:last-child, .timeline article:last-child { border-bottom: 0; }
.source-list article > div, .timeline article > div { display: flex; flex-direction: column; min-width: 0; }
.source-list small, .timeline span, .source-list time, .timeline time { color: var(--text-3); font-size: 11px; }
.source-state { display: block; width: 9px; height: 9px; overflow: hidden; border-radius: 50%;
  background: var(--text-3); color: transparent; font-size: 0; }
.source-state.is-ok { background: var(--ok); }.source-state.is-error { background: #d95b4f; }.source-state.is-new, .source-state.is-stale { background: #d39a24; }
.data-table-wrap { overflow-x: auto; margin-bottom: var(--s20); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }.data-table th { color: var(--text-3); font: 650 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.data-table th, .data-table td { padding: 13px 15px; text-align: left; border-bottom: 1px solid var(--line); }.data-table tr:last-child td { border-bottom: 0; }.data-table td small { display: block; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s14); margin: var(--s18) 0 var(--s12); }
.section-head h2 { margin: 3px 0 0; }
.section-head > a, .section-head > span { flex: none; }
.chart-card, .honesty-panel, .version-card { margin: var(--s16) 0; padding: var(--s22); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.chart-card-empty { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s18); }
.chart-card-empty h2 { margin: 4px 0 6px; }
.chart-card-empty p { max-width: 680px; margin: 0; color: var(--text-2); }
.chart-card-empty > span { flex: none; color: var(--text-3); font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.price-chart { width: 100%; height: 210px; color: var(--accent); background: linear-gradient(to bottom, transparent 49%, var(--line) 50%, transparent 51%); }
.honesty-panel { background: var(--ink); color: #fff; }.honesty-panel h2 { color: #fff; }.honesty-panel p { color: var(--on-dark); max-width: 760px; }
.contact-action-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.honesty-panel .contact-text-link { color: var(--accent-2); font-weight: 650; }
.version-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.5fr) auto; gap: var(--s18); align-items: center; }.version-card dl { margin: 0; }.version-card dl div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; border-bottom: 1px solid var(--line); }.version-card dd { margin: 0; font-weight: 700; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s14); }.partner-form { display: grid; gap: 12px; padding: var(--s20); }.partner-form label { display: grid; gap: 5px; font-size: 11px; color: var(--text-2); }.partner-form input, .partner-form textarea { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.empty-state { padding: var(--s24); color: var(--text-3); text-align: center; }
.config-gateway { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr); gap: var(--s20); align-items: center; margin: var(--s28) 0; padding: var(--s22); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }.config-gateway h2 { margin: 4px 0 7px; }.config-gateway p { margin: 0; color: var(--text-2); }.config-gateway nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }.config-gateway nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 8px; background: var(--field); color: var(--ink); font-weight: 650; }.config-gateway nav a span { display: grid; gap: 2px; }.config-gateway nav a small { color: var(--text-3); font-size: 9px; font-weight: 500; }.config-gateway nav a:hover { background: var(--ink); color: #fff; text-decoration: none; }.config-gateway nav a:hover small { color: var(--on-dark); }

/* ── Подбор VPS по минимальным ресурсам ───────────────────────────── */
.config-hero { margin-bottom: var(--s12); }
.config-presets { display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 7px; margin-bottom: var(--s24); }
.config-presets a { display: grid; gap: 4px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r8); background: #fff; color: var(--ink); }
.config-presets a:hover, .config-presets a.is-active { border-color: var(--ink); background: var(--ink); color: #fff; text-decoration: none; }
.config-presets small { color: var(--text-3); font-size: 9px; }
.config-presets a:hover small, .config-presets a.is-active small { color: var(--on-dark); }
.config-results-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s20); margin: 0 0 var(--s12); }
.config-results-head h2 { margin: 3px 0 0; }
.config-results-head p { max-width: 520px; margin: 0; color: var(--text-2); text-align: right; }
.config-results { display: grid; gap: var(--s10); }
.config-result-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.config-result-card > header { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s14); padding: 13px 16px; border-bottom: 1px solid var(--line); }
.config-provider { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); }
.config-provider:hover { text-decoration: none; color: var(--accent); }
.config-provider > span:last-child { display: grid; min-width: 0; }
.config-provider b { font-size: 16px; }
.config-provider small { color: var(--text-3); font-size: 9px; }
.config-provider-logo { width: 38px; height: 38px; flex: 0 0 38px; }
.config-match { flex: none; padding: 6px 9px; border-radius: 999px; background: var(--field);
  color: var(--text-2); font: 650 8.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.config-match.is-exact { background: var(--ok-bg); color: var(--ok); }
.config-result-main { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,.28fr); }
.config-plan-copy { min-width: 0; padding: 17px 18px; }
.config-plan-copy h3 { margin: 4px 0; font-size: 20px; }
.config-plan-copy p { margin: 0; color: var(--text-2); }
.config-deltas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.config-deltas span, .config-alt-deltas i { padding: 4px 7px; border-radius: 999px;
  background: var(--field); color: var(--text-2); font-size: 9px; font-style: normal; }
.config-deltas .is-exact, .config-alt-deltas .is-exact { background: var(--ok-bg); color: var(--ok); }
.config-price { display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  padding: 17px 18px; border-left: 1px solid var(--line); text-align: right; }
.config-price > small { color: var(--text-3); font: 600 8.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.config-price strong { margin: 5px 0 2px; font: 700 25px var(--mono); }
.config-price strong i { margin-left: 3px; color: var(--text-3); font: 500 10px var(--sans); font-style: normal; }
.config-price > span { color: var(--text-3); font-size: 9px; }
.config-price a { margin-top: 10px; font-size: 11px; }
.config-alternatives { border-top: 1px solid var(--line); }
.config-alternatives summary { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px; cursor: pointer; list-style: none; color: var(--text-2); font-size: 10px; }
.config-alternatives summary::-webkit-details-marker { display: none; }
.config-alternatives summary i { font-style: normal; transition: transform .2s; }
.config-alternatives[open] summary i { transform: rotate(180deg); }
.config-alternatives > div { border-top: 1px solid var(--line); background: var(--field); }
.config-alternative-row { display: grid; grid-template-columns: minmax(170px,1fr) minmax(200px,1fr) auto;
  gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.config-alternative-row > span:first-child { display: grid; min-width: 0; }
.config-alternative-row small { color: var(--text-3); }
.config-alt-deltas { display: flex; flex-wrap: wrap; gap: 4px; }
.config-alternative-row > strong { white-space: nowrap; font: 650 12px var(--mono); }
.config-all-link { display: block; padding: 11px 16px; text-align: right; }
.config-help { display: flex; align-items: center; justify-content: space-between; gap: var(--s20);
  margin: var(--s24) 0; padding: var(--s22); border-radius: var(--r); background: var(--ink); color: #fff; }
.config-help h2 { margin: 4px 0; color: #fff; }
.config-help p { margin: 0; color: var(--on-dark); }
.config-help .btn { flex: none; }
.probe-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s12); }.probe-card { padding: var(--s16); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }.probe-card header, .probe-card footer { display: flex; justify-content: space-between; gap: 10px; }.probe-card header span { padding: 4px 7px; border-radius: 99px; background: var(--ok-bg); color: var(--ok); font-size: 10px; }.probe-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 13px 0; }.probe-metrics > span { padding: 10px; border-radius: 8px; background: var(--field); }.probe-metrics small, .probe-card footer { font-size: 9px; color: var(--text-3); }.probe-metrics b { display: block; margin-top: 4px; font: 700 20px var(--mono); }.probe-metrics i { font-size: 9px; font-style: normal; }.probe-sparkline { width: 100%; height: 70px; }.probe-sparkline line { stroke: var(--line); }.probe-sparkline polyline { fill: none; stroke: var(--accent); stroke-width: 2; }.probe-history-empty, .probe-load-error { padding: 18px; color: var(--text-3); text-align: center; }
@media (max-width: 1180px) {
  header.site .tagline { display: none; }
}
@media (max-width: 900px) {
  header.site .row { gap: 12px; padding: 11px 14px; }
  header.site nav.site > a:nth-of-type(4),
  header.site nav.site > a:nth-of-type(5),
  header.site nav.site > a:nth-of-type(6) { display: none; }
  .nav-more > div a.nav-more-mobile:not(.nav-more-compare) { display: block; }
}
@media (max-width: 620px) {
  header.site { top: 6px; margin-bottom: calc(var(--s10) + 6px); }
  header.site .row { padding: 9px 10px; }
  header.site nav.site > a:nth-of-type(3) { display: none; }
  .nav-more > div a.nav-more-compare { display: block; }
  nav.site a, .nav-more summary { padding: 8px 10px; font-size: 12px; }
}
@media (max-width: 460px) {
  header.site .logo-word { display: none; }
  header.site .logo { gap: 0; }
}
@media (max-width: 980px) { .evidence-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.source-list article { grid-template-columns: 10px minmax(0,1fr) auto; }.timeline article { grid-template-columns: 80px minmax(0,1fr) auto; }.source-list time { display: none; } }
@media (max-width: 980px) {
  .config-presets { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 700px) { .evidence-hero, .version-card, .two-col, .config-gateway { grid-template-columns: 1fr; }.evidence-grid, .hub-links, .source-summary, .probe-grid { grid-template-columns: 1fr; }.source-list article { grid-template-columns: 10px minmax(0,1fr); }.timeline article { grid-template-columns: 70px minmax(0,1fr); }.source-list article > a, .timeline article > a { grid-column: 2; }.evidence-hero { padding: var(--s20); }.probe-metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .config-results-head { align-items: flex-start; flex-direction: column; }
  .config-results-head p { text-align: left; }
  .config-help { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
  .section-head { align-items: flex-start; flex-direction: column; }
  .section-head > a, .section-head > span { flex: initial; }
  .chart-card-empty { align-items: flex-start; flex-direction: column; }
  .data-table-wrap { overflow: visible; border: 0; background: transparent; }
  .data-table, .data-table tbody { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px 14px; margin-bottom: 8px; padding: 15px;
    border: 1px solid var(--line); border-radius: var(--r8); background: #fff; }
  .data-table td { display: block; min-width: 0; padding: 0; border: 0;
    overflow-wrap: anywhere; }
  .data-table td::before { content: attr(data-label); display: block; margin-bottom: 3px;
    font: 600 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-3); }
  .data-table td[data-label="Ресурсы"], .data-table td[data-label="Конфигурация"] { grid-column: 1 / -1; }
  .config-presets { display: flex; overflow-x: auto; padding-bottom: 3px; }
  .config-presets a { flex: 0 0 145px; }
  .config-result-card > header { align-items: flex-start; }
  .config-result-main { grid-template-columns: 1fr; }
  .config-price { align-items: flex-start; border-top: 1px solid var(--line); border-left: 0; text-align: left; }
  .config-alternative-row { grid-template-columns: 1fr auto; }
  .config-alt-deltas { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  .provider-hero { padding: var(--s18); }
  .provider-score-panel { width: 100%; max-width: 100%; padding: 16px;
    gap: 14px; overflow: hidden; }
  .score-donut { width: 86px; height: 86px; }
  .score-panel-info { flex: 1 1 auto; }
  .score-panel-compare span { gap: 7px; }
  .product-tabs { flex-wrap: wrap; overflow-x: visible; }
  .product-tabs a { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 420px) {
  .risk-banner-flow { min-width: 0; }
  .risk-banner-intro { display: none; }
  .risk-banner-link { padding-left: 10px; font-size: 0; }
  .risk-banner-link::after { content: "Карта →"; font-size: 10px; }
}

/* ── Кабинет данных для хостеров ───────────────────────────────────── */
.hoster-portal-hero {
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(330px,.65fr);
  gap: 30px; align-items: end; margin-bottom: var(--s10); padding: 34px;
  color: #fff; background: var(--ink-hero); border: var(--bw) solid var(--ink);
  border-radius: var(--r);
}
.hoster-portal-copy { min-width: 0; }
.hoster-portal-copy .eyebrow { color: var(--accent-2); }
.hoster-portal-copy h1 { max-width: 830px; margin-top: 8px; color: #fff; }
.hoster-portal-copy > p { max-width: 720px; margin: 0; color: var(--on-dark); font-size: 16px; }
.hoster-trust-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.hoster-trust-row span { padding: 7px 10px; border: 1px solid #36363a; border-radius: 999px;
  color: #d9d9dc; font-size: 11px; white-space: nowrap; }
.hoster-trust-row span::before { content: ""; display: inline-block; width: 6px; height: 6px;
  margin-right: 7px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.hoster-hero-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  border: 1px solid #343438; border-radius: var(--r8); background: rgba(29,29,32,.86); }
.hoster-hero-flow li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px;
  align-items: center; padding: 14px 16px; border-bottom: 1px solid #343438; }
.hoster-hero-flow li:last-child { border-bottom: 0; }
.hoster-hero-flow li > b { font: 600 11px var(--mono); color: var(--accent-2); }
.hoster-hero-flow li > span { display: grid; gap: 2px; min-width: 0; }
.hoster-hero-flow strong { color: #fff; font-size: 13px; }
.hoster-hero-flow small { color: var(--mono-dark); font-size: 11px; }

.hoster-portal { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.45fr);
  gap: var(--s10); align-items: start; }
.hoster-form-card, .hoster-checklist { background: var(--panel); border: var(--bw) solid var(--line);
  border-radius: var(--r); }
.hoster-email-card { min-width: 0; padding: 28px; background: var(--panel);
  border: var(--bw) solid var(--line); border-radius: var(--r); }
.hoster-email-card > header { display: grid; gap: 5px; margin-bottom: var(--s20); }
.hoster-email-card > header h2 { margin: 0; }
.hoster-email-card > header p { max-width: 690px; margin: 0; color: var(--text-2); font-size: 13px; }
.hoster-email-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s10); }
.hoster-email-option { display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 5px var(--s12); min-width: 0; padding: var(--s20); color: var(--text);
  background: var(--field); border: 1px solid var(--hair); border-radius: var(--r8); }
.hoster-email-option:hover { border-color: var(--accent); background: #fff; text-decoration: none; }
.hoster-email-option > span { grid-column: 1 / -1; color: var(--text-3);
  font: 600 9px var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.hoster-email-option b { min-width: 0; font-size: 18px; overflow-wrap: anywhere; }
.hoster-email-option small { grid-column: 1 / -1; color: var(--text-2); font-size: 11px; }
.hoster-email-option i { grid-column: 2; grid-row: 2; align-self: center; color: var(--accent);
  font-size: 11px; font-style: normal; white-space: nowrap; }
.hoster-email-option.is-commercial { color: #fff; background: var(--ink); border-color: var(--ink); }
.hoster-email-option.is-commercial > span, .hoster-email-option.is-commercial small { color: var(--on-dark); }
.hoster-email-option.is-commercial i { color: var(--accent-2); }
.hoster-email-option.is-commercial:hover { color: #fff; background: var(--ink-nested); }
.hoster-mail-guide { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s18);
  margin-top: var(--s18); padding-top: var(--s18); border-top: 1px solid var(--hair); }
.hoster-mail-guide ol { margin: var(--s10) 0 0; padding-left: 19px; color: var(--text-2); font-size: 12px; }
.hoster-mail-guide li + li { margin-top: 6px; }
.hoster-mail-example { align-self: start; padding: var(--s16); border-radius: var(--r8); background: var(--field); }
.hoster-mail-example code { display: block; margin-top: var(--s10); color: var(--text);
  font: 650 12px var(--mono); overflow-wrap: anywhere; }
.hoster-mail-example p { margin: 9px 0 0; color: var(--text-2); font-size: 11px; }
.hoster-security-note { display: grid; gap: 3px; margin-top: var(--s18); padding: 13px 15px;
  color: #6d4b00; background: #fff4d7; border-radius: var(--r8); }
.hoster-security-note b { font-size: 12px; }
.hoster-security-note span { font-size: 11px; line-height: 1.45; }
.hoster-privacy-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--hair);
  color: var(--text-3); font-size: 10.5px; line-height: 1.5; }
.hoster-form-card { min-width: 0; padding: 28px; }
.hoster-form-card > header { display: grid; gap: 5px; margin-bottom: var(--s20); }
.hoster-form-card > header h2, .hoster-checklist h2 { margin: 0; }
.hoster-form-card > header p { max-width: 690px; margin: 0; color: var(--text-2); font-size: 13px; }
.hoster-portal-form { display: grid; gap: var(--s18); }
.hoster-request-types { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px;
  min-width: 0; margin: 0; padding: 0; border: 0; }
.hoster-request-types legend { width: 100%; margin-bottom: 7px; color: var(--text-3);
  font: 500 10.5px var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.hoster-request-types label { position: relative; display: block; min-width: 0; cursor: pointer; }
.hoster-request-types input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hoster-request-types label > span { display: grid; gap: 4px; min-height: 92px; padding: 15px;
  border: 1px solid var(--hair); border-radius: var(--r8); background: var(--field); }
.hoster-request-types label > span::before { content: ""; width: 9px; height: 9px;
  border: 1px solid var(--text-3); border-radius: 50%; }
.hoster-request-types input:checked + span { border-color: var(--ink); background: #fff; }
.hoster-request-types input:checked + span::before { border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 2px #fff; }
.hoster-request-types b { color: var(--text); font-size: 13px; }
.hoster-request-types small { color: var(--text-3); font-size: 11px; line-height: 1.35; }
.hoster-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.hoster-field-grid label, .hoster-message { display: grid; gap: 6px; min-width: 0; color: var(--text-2); font-size: 12px; }
.hoster-field-grid label > span, .hoster-message > span { color: var(--risk-text); }
.hoster-message textarea { min-height: 120px; }
.hoster-portal .hoster-optional { padding: 15px 16px; }
.hoster-portal .hoster-submit { padding-top: 16px; border-top: 1px solid var(--hair); }
.hoster-portal .hoster-submit .consent { flex: 1 1 340px; margin: 0; }
.hoster-portal .hoster-submit button { min-width: 185px; }
.hoster-checklist { position: sticky; top: 92px; padding: 24px; }
.hoster-checklist > .eyebrow { color: var(--accent); }
.hoster-checklist h2 { margin-top: 5px; font-size: 23px; }
.hoster-checklist ul { list-style: none; margin: 18px 0; padding: 0; border-top: 1px solid var(--hair); }
.hoster-checklist li { position: relative; display: grid; gap: 2px; padding: 14px 0 14px 24px;
  border-bottom: 1px solid var(--hair); }
.hoster-checklist li::before { content: ""; position: absolute; left: 2px; top: 20px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.hoster-checklist li b { font-size: 13px; }
.hoster-checklist li small { color: var(--text-3); font-size: 11px; line-height: 1.45; }
.hoster-principle { padding: 14px; border-radius: var(--r8); background: var(--ink); color: #fff; }
.hoster-principle b { color: var(--accent-2); font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hoster-principle p { margin-top: 6px; color: var(--on-dark); font-size: 11px; line-height: 1.5; }
.hoster-direct-mail { display: grid; gap: 7px; margin-top: 14px; }
.hoster-direct-mail > span { color: var(--text-3); font: 500 9px var(--mono);
  letter-spacing: .1em; text-transform: uppercase; }
.hoster-direct-mail > a { display: grid; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--hair); border-radius: var(--r8); background: var(--field); color: var(--text); }
.hoster-direct-mail > a:hover { border-color: var(--accent); text-decoration: none; }
.hoster-direct-mail b { font-size: 12px; }
.hoster-direct-mail small { color: var(--accent); font: 550 11px var(--mono); overflow-wrap: anywhere; }

/* ── Сравнение провайдеров ─────────────────────────────────────────── */
.compare-page { display: grid; gap: var(--s10); }
.compare-page .compare-hero { display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 28px; align-items: end; margin: 0; padding: 30px 34px; }
.compare-page .compare-hero > div:first-child { min-width: 0; }
.compare-page .compare-hero h1 { max-width: 780px; margin-top: 7px; }
.compare-page .compare-hero p { max-width: 700px; margin: 0; }
.compare-hero-facts { display: grid; grid-template-columns: repeat(3,minmax(94px,1fr));
  margin: 0; border: 1px solid #343438; border-radius: var(--r8); overflow: hidden; }
.compare-hero-facts div { padding: 13px 14px; border-right: 1px solid #343438; }
.compare-hero-facts div:last-child { border-right: 0; }
.compare-hero-facts dt { color: var(--mono-dark); font: 500 9px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.compare-hero-facts dd { margin: 4px 0 0; color: #fff; font: 650 22px var(--mono); }

.compare-page .compare-picker { padding: 24px; }
.compare-picker-head { display: flex; align-items: end; justify-content: space-between; gap: 20px;
  margin-bottom: 18px; }
.compare-picker-head > div { min-width: 0; }
.compare-picker-head h2 { margin: 3px 0 5px; }
.compare-picker-head p { margin: 0; color: var(--text-2); font-size: 13px; }
.compare-search { flex: 0 1 300px; }
.compare-provider-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px;
  max-height: 292px; padding: 1px 3px 1px 1px; overflow-y: auto; }
.compare-provider-choice { display: grid; grid-template-columns: 17px minmax(0,1fr); gap: 10px;
  align-items: center; min-width: 0; padding: 11px 12px; border: 1px solid var(--hair);
  border-radius: var(--r8); background: var(--field); cursor: pointer; }
.compare-provider-choice:hover { border-color: #b9b6ad; }
.compare-provider-choice.is-selected { border-color: var(--ink); background: var(--ink); color: #fff; }
.compare-provider-choice[hidden] { display: none; }
.compare-provider-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.compare-provider-choice > span:last-child { display: grid; min-width: 0; }
.compare-provider-choice b { overflow: hidden; color: inherit; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.compare-provider-choice small { color: var(--text-3); font-size: 10px; }
.compare-provider-choice.is-selected small { color: var(--on-dark); }
.compare-choice-mark { width: 16px; height: 16px; border: 1px solid var(--text-3); border-radius: 4px; background: #fff; }
.compare-provider-choice.is-selected .compare-choice-mark { border-color: var(--accent-2); background: var(--accent-2); }
.compare-provider-choice.is-selected .compare-choice-mark::after { content: ""; display: block; width: 7px; height: 4px;
  margin: 4px 0 0 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); }
.compare-provider-choice:has(input:disabled) { opacity: .52; cursor: not-allowed; }
.compare-picker-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.compare-picker-actions p { margin: 0; color: var(--text-2); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.compare-picker-actions > div { display: flex; align-items: center; gap: 14px; }
.compare-picker-actions button:disabled { background: #d8d6cf; color: #88878a; cursor: not-allowed; }

.compare-results, .compare-breakdown { min-width: 0; background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); }
.compare-results { overflow: hidden; }
.compare-results-head, .compare-breakdown > header { display: flex; align-items: end; justify-content: space-between;
  gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.compare-results-head h2, .compare-breakdown h2 { margin: 3px 0 0; }
.compare-results-head > p { max-width: 390px; margin: 0; color: var(--text-3); font-size: 11px; text-align: right; }
.compare-table-shell { min-width: 0; overflow: auto; -webkit-overflow-scrolling: touch; outline: none; }
.compare-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.compare-table th, .compare-table td { width: 220px; min-width: 220px; padding: 15px 17px;
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.compare-table tr > :first-child { position: sticky; left: 0; z-index: 2; width: 245px; min-width: 245px; background: #fbfaf6; }
.compare-table thead th { position: sticky; top: 0; z-index: 3; background: #fff; }
.compare-table thead th:first-child { z-index: 4; background: #fbfaf6; color: var(--text-3); font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.compare-table tr > :last-child { border-right: 0; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.provider-column-title { display: flex; align-items: center; gap: 10px; color: var(--text); }
.provider-column-title:hover { text-decoration: none; }
.provider-column-title > span:last-child { display: grid; min-width: 0; }
.provider-column-title b { font-size: 15px; }
.provider-column-title small { color: var(--accent); font-size: 10px; }
.compare-table th > b { display: block; font-size: 13px; }
.compare-table th > small, .compare-table td > small { display: block; margin-top: 4px;
  color: var(--text-3); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.compare-value-primary { display: block; font-size: 19px; line-height: 1.2; }
.compare-value { display: block; font-size: 14px; }
.compare-group-row th { position: static; width: auto; min-width: 0; padding: 8px 17px;
  background: var(--ink); color: var(--accent-2); border-color: var(--ink);
  font: 500 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.compare-sources { display: flex; flex-wrap: wrap; gap: 5px; }
.compare-sources a { padding: 5px 8px; border-radius: 999px; background: var(--field); font-size: 10px; }
.compare-value-badge .net-badge { max-width: 100%; }
.compare-breakdown { overflow: hidden; }
.compare-breakdown > header a { flex: none; }
.compare-score-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.compare-score-table th, .compare-score-table td { padding: 13px 16px; border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair); text-align: left; }
.compare-score-table tr > :first-child { position: sticky; left: 0; z-index: 2; min-width: 220px; background: #fbfaf6; }
.compare-score-table thead th { color: var(--text-3); font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.compare-score-table td small { display: block; color: var(--text-3); font-size: 9px; }
.compare-score-table tr:last-child > * { border-bottom: 0; }
.compare-empty { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px; align-items: center;
  padding: 24px; border: 1px dashed #c9c5b9; border-radius: var(--r); color: var(--text-2); }
.compare-empty > span { font: 650 24px var(--mono); color: var(--accent); }
.compare-empty b { color: var(--text); }
.compare-empty p { margin: 3px 0 0; font-size: 12px; }
.compare-client-results { min-width: 0; overflow: hidden; background: var(--panel);
  border: var(--bw) solid var(--line); border-radius: var(--r); }
.compare-client-results[hidden] { display: none; }
.compare-client-grid { --compare-count: 3; display: grid;
  grid-template-columns: repeat(var(--compare-count),minmax(0,1fr)); gap: var(--s10); padding: var(--s10); }
.compare-provider-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--r8); background: #fff; }
.compare-provider-panel[hidden] { display: none; }
.compare-provider-panel > header { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 72px; padding: 14px; border-bottom: 1px solid var(--line); }
.compare-provider-panel > header > a { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); }
.compare-provider-panel > header > a:hover { text-decoration: none; }
.compare-provider-panel > header > a > span:last-child { display: grid; min-width: 0; }
.compare-provider-panel > header > a b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.compare-provider-panel > header > a small { color: var(--accent); font-size: 9px; }
.compare-provider-facts { margin: 0; }
.compare-provider-facts > div { display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 2px 12px; align-items: baseline; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
.compare-provider-facts dt { min-width: 0; color: var(--text-2); font-size: 11px; }
.compare-provider-facts dd { margin: 0; color: var(--text); font-size: 12px; font-weight: 650; text-align: right; }
.compare-provider-facts small { grid-column: 1 / -1; color: var(--text-3); font-size: 9px; }
.compare-provider-score { border-bottom: 1px solid var(--hair); }
.compare-provider-score summary { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; color: var(--text-2); font-size: 11px; }
.compare-provider-score summary::-webkit-details-marker { display: none; }
.compare-provider-score summary span { color: var(--accent); font: 600 14px var(--mono); }
.compare-provider-score[open] summary span { transform: rotate(45deg); }
.compare-provider-score > div { padding: 0 14px 10px; }
.compare-provider-score p { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 0; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 9.5px; }
.compare-provider-score p span { color: var(--text-3); }
.compare-provider-score p b { flex: none; }
.compare-provider-panel > footer { padding: 12px 14px; }

/* Новая последовательность меню: рейтинг, GPU, скидки, сравнение,
   надёжность, исследования. */
@media (max-width: 900px) {
  .nav-more > div a.nav-more-mobile { display: none; }
  .nav-more > div a.nav-hidden-tablet { display: block; }
}
@media (max-width: 620px) {
  .nav-more > div a.nav-hidden-phone { display: block; }
}

@media (max-width: 1050px) {
  .hoster-portal-hero { grid-template-columns: minmax(0,1fr) minmax(285px,.55fr); }
  .hoster-portal { grid-template-columns: minmax(0,1fr) 280px; }
  .compare-provider-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .compare-page .compare-hero { grid-template-columns: 1fr; }
  .compare-hero-facts { max-width: 520px; }
}
@media (max-width: 820px) {
  .hoster-portal-hero, .hoster-portal { grid-template-columns: 1fr; }
  .hoster-checklist { position: static; }
  .hoster-checklist ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
  .compare-provider-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .compare-client-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hoster-portal-hero { padding: 22px; }
  .hoster-portal-copy h1 { font-size: 34px; }
  .hoster-trust-row span { white-space: normal; }
  .hoster-form-card, .hoster-email-card, .hoster-checklist { padding: 18px; }
  .hoster-email-options, .hoster-mail-guide { grid-template-columns: 1fr; }
  .hoster-request-types, .hoster-field-grid, .hoster-checklist ul { grid-template-columns: 1fr; }
  .hoster-request-types label > span { min-height: 0; }
  .hoster-portal .hoster-submit { align-items: stretch; flex-direction: column; }
  .hoster-portal .hoster-submit .consent { flex-basis: auto; }
  .compare-page .compare-hero { padding: 22px; }
  .compare-page .compare-hero h1 { font-size: 34px; }
  .compare-hero-facts { grid-template-columns: repeat(3,1fr); }
  .compare-hero-facts div { padding: 10px; }
  .compare-hero-facts dd { font-size: 18px; }
  .compare-page .compare-picker { padding: 18px; }
  .compare-picker-head, .compare-picker-actions, .compare-results-head,
  .compare-breakdown > header { align-items: stretch; flex-direction: column; }
  .compare-search { flex: auto; width: 100%; }
  .compare-provider-grid { grid-template-columns: 1fr 1fr; max-height: 360px; }
  .compare-picker-actions > div { justify-content: space-between; }
  .about-hoster-cta { align-items: stretch; flex-direction: column; }
  .about-hoster-cta .btn { width: 100%; text-align: center; }
  .compare-picker-actions button { flex: 1; }
  .compare-results-head > p { text-align: left; }
  .compare-client-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .compare-provider-grid { grid-template-columns: 1fr; }
  .compare-hero-facts dt { font-size: 7.5px; }
  .compare-picker-actions > div { align-items: stretch; flex-direction: column-reverse; }
}