/* Стили страниц сайта поверх дизайн-системы AllCDP */
body { margin: 0; font-family: var(--font-sans); }
.wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
@media (max-width: 900px) { .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }
@media (max-width: 600px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site main { flex-grow: 1; }
h1, h2, h3 { text-wrap: balance; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; align-items: center; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.min0 { min-width: 0; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; text-align: left; }
.link-btn:hover { text-decoration: underline; }
.site a.card-link { text-decoration: none; color: var(--on-surface); }
.site a.card-link:hover { text-decoration: none; border-color: var(--outline); }
.site a.card-link:hover .title-m { color: var(--primary); }
.site .ac-btn { text-decoration: none; }
.site a.ac-btn--filled { color: var(--on-primary); }
.site a.ac-btn--tonal { color: var(--on-secondary-container); }
.site .ac-btn:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Шапка */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-appbar); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 11; background: var(--surface-container); }
/* содержимое шапки по ширине .wrap (1280px с полями 32px), фон — на всю ширину */
.topbar .ac-appbar { height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 8px; padding: 12px max(32px, env(safe-area-inset-right, 0px), calc((100% - 1280px) / 2 + 32px)) 12px max(32px, env(safe-area-inset-left, 0px), calc((100% - 1280px) / 2 + 32px)); }
.topbar .ac-appbar__brand { color: var(--on-surface); text-decoration: none; }
.topbar .ac-appbar__brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; height: 22px; width: auto; }
.brand-logo--ft { height: 26px; align-self: flex-start; }
.topbar .ac-appbar__nav { flex-wrap: wrap; }
.topbar .ac-appbar__link { text-decoration: none; }
.site .topbar a.ac-appbar__link, .site .topbar a.ac-appbar__link:hover, .site .topbar a.ac-appbar__link.is-active { color: #fff; }
.topbar .hdr-search { width: 280px; }
.topbar .hdr-search .ac-search { width: 100%; box-sizing: border-box; }
.topbar .menu-btn { display: none; }
/* подсказки поиска в шапке */
.topbar .hdr-search { position: relative; }
.hs-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 420px; max-width: calc(100vw - 32px); max-height: min(70vh, 540px); overflow: auto; box-sizing: border-box; padding: 6px; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-m); box-shadow: var(--elevation-3); z-index: 60; }
.hs-group { padding: 10px 10px 4px; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--on-surface-variant); }
.site a.hs-item, .hs-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-s); color: var(--on-surface); text-decoration: none; }
.hs-item.is-active { background: var(--surface-container-high); }
.hs-item__main { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.hs-item__title { font-size: 15px; line-height: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-item__sub { font-size: 14px; line-height: 18px; color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-item__score { font-family: var(--font-mono); font-size: 14px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.hs-item__ic { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--primary-container); color: var(--on-primary-container); }
.hs-item mark { background: color-mix(in srgb, var(--primary) 20%, transparent); color: inherit; border-radius: 2px; }
.hs-empty { padding: 12px 10px; font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }
@media (max-width: 1100px) { .topbar .hdr-search { width: 220px; } .topbar .cta-quiz { display: none; } }
@media (max-width: 1240px) { .topbar .ac-appbar__link { padding: 0 12px; } .topbar .ac-appbar__nav { gap: 2px; } }
@media (max-width: 1100px) { .topbar .hdr-search { width: 190px; } .topbar .ac-appbar__link { padding: 0 10px; } }
@media (max-width: 1000px) and (min-width: 901px) { .topbar .hdr-search { width: 150px; } .topbar .ac-appbar__link { padding: 0 8px; } .topbar .ac-appbar { column-gap: 12px; } }
@media (max-width: 900px) {
  .topbar .ac-appbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .topbar .menu-btn { display: inline-flex; }
  .topbar .ac-appbar__nav { display: none; order: 10; width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .topbar.is-open .ac-appbar__nav { display: flex; }
  .topbar .hdr-search { order: 11; width: 100%; display: none; }
  .topbar.is-open .hdr-search { display: block; }
  .hs-pop { position: static; width: auto; max-width: none; margin-top: 8px; box-shadow: none; }
  .topbar .cta-quiz { display: none; }
}

/* Таблицы и бейджи: просторные строки для чтения */
.site .ac-table { width: 100%; --row-h: 64px; --cell-pad: 18px; font-size: 15px; line-height: 24px; border-radius: var(--radius-m); }
.site .ac-table th, .site .ac-table td { padding-top: 14px; padding-bottom: 14px; }
.site .ac-table thead th { height: 52px; padding-top: 14px; padding-bottom: 14px; font-size: 14px; }
.site .ac-table .is-wrap { white-space: normal; min-width: 200px; max-width: 420px; }
.site .ac-table tbody tr:nth-child(even) > * { background: var(--table-row-alt); }
.site .ac-table tbody tr:hover > * { background: var(--table-row-hover); }
.site .ac-table tbody tr.is-selected > * { background: var(--table-row-selected); }
.site .ac-platform__name { font-size: 16px; line-height: 24px; font-weight: 500; }
.site .ac-matrix .ac-mx-feature { padding: 16px 18px; }
.site .ac-matrix .ac-mx-feature__label { font-size: 15px; line-height: 24px; }
.site .ac-matrix tbody tr.ac-mx-group > th { height: 52px; }
.site .ac-mx-group button { height: 52px; padding: 0 16px 0 12px; font-size: 16px; }
.stable { font-size: 15px; line-height: 24px; }
.stable th, .stable td { padding: 16px 18px; }
.stable thead th { padding: 14px 18px; font-size: 14px; }
.stable caption { padding: 18px 18px 14px; }
.stable tbody tr:nth-child(even) > * { background: var(--table-row-alt); }
.stable tbody tr:nth-child(even) > .sticky { background: var(--table-row-alt); }
.stable tbody th[scope="colgroup"] { padding-top: 14px; padding-bottom: 14px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fact-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 14px; line-height: 22px; }
.fact-list dt { color: var(--on-surface-variant); }
.fact-list dd { margin: 0; text-align: right; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; line-height: 18px; color: var(--on-surface-variant); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.mark-yes { color: var(--success); }
.mark-nd { color: var(--outline); }

/* Каталог */
.catalog-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.facets { flex: 1 1 280px; max-width: 280px; display: flex; flex-direction: column; gap: 4px; padding: 8px 0; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-m); }
.facets-toggle { display: none; }
@media (max-width: 900px) {
  .facets { max-width: none; flex-basis: 100%; }
  .facets-toggle { display: inline-flex; }
  .facets.is-collapsed .facets-body { display: none; }
}
.results { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sort-select { height: 32px; padding: 0 12px; border: 1px solid var(--outline); border-radius: var(--radius-full); background: var(--surface-container-lowest); color: var(--on-surface); font: inherit; font-size: 14px; }
.cmpbar-wrap { position: sticky; bottom: 16px; z-index: 20; display: flex; justify-content: center; padding: 16px 16px 0; }
.cmpbar { width: 100%; max-width: 960px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 12px 12px 20px; background: var(--inverse-surface); color: var(--inverse-on-surface); border-radius: var(--radius-l); box-shadow: var(--elevation-3); box-sizing: border-box; }
.cmpbar .pill { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border-radius: var(--radius-s); border: 1px solid var(--outline); font-size: 14px; }
.cmpbar .pill button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.site .cmpbar .ac-btn--inverse { background: var(--inverse-primary); color: var(--inverse-surface); }
.site .cmpbar .ac-btn--text { color: var(--inverse-on-surface); }

/* Hero CTA */
.inverse-panel { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: 32px; border-radius: var(--radius-l); background: var(--inverse-surface); color: var(--inverse-on-surface); }
.site .inverse-panel .ac-btn { background: var(--inverse-primary); color: var(--inverse-surface); }

/* Карточка платформы */
.monogram { width: 64px; height: 64px; flex: none; border-radius: var(--radius-m); background: var(--surface-container-highest); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 500; color: var(--on-surface-variant); }
.two-col { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.two-col > .main-col { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.two-col > aside { flex: 1 1 320px; max-width: 380px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
@media (max-width: 1000px) { .two-col > aside { position: static; max-width: none; } }
.ext::after { content: " ↗"; }

/* Подбор */
.opt { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; border-radius: var(--radius-m); border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); color: var(--on-surface); font: inherit; font-size: 16px; line-height: 22px; text-align: left; cursor: pointer; }
.opt::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; z-index: -1; transition: opacity .15s; }
.opt:hover::before { opacity: .08; }
.opt.is-on { border: 2px solid var(--primary); background: var(--secondary-container); color: var(--on-secondary-container); padding: 11px 15px; }
.progress { flex-grow: 1; height: 6px; border-radius: 999px; background: var(--surface-container-highest); overflow: hidden; }
.progress > div { height: 100%; border-radius: 999px; background: var(--primary); transition: width .2s; }

/* Раскрывающиеся группы (методика) */
.ws-group { border: 1px solid var(--outline-variant); border-radius: var(--radius-m); background: var(--surface-container-lowest); overflow: hidden; }
.ws-group > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 16px 18px; background: var(--surface-container-low); }
.ws-group > summary::-webkit-details-marker { display: none; }
.ws-group[open] > summary { border-bottom: 1px solid var(--outline-variant); }
.ws-group .stable-wrap { border: 0; border-radius: 0; }
.formula { margin: 0; padding: 16px 20px; border-radius: var(--radius-s); background: var(--surface-container-low); border: 1px solid var(--outline-variant); font-family: var(--font-mono); font-size: 14px; line-height: 24px; overflow-x: auto; white-space: pre; }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; padding: 12px 20px; border-radius: var(--radius-s); background: var(--inverse-surface); color: var(--inverse-on-surface); box-shadow: var(--elevation-3); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Подвал */
.ft a { color: var(--on-surface-variant); text-decoration: none; }
.ft a:hover { color: var(--on-surface); text-decoration: underline; }
.ft .link-btn { color: var(--on-surface-variant); font-size: 14px; line-height: 18px; }

/* Hero главной */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 72px 64px; border-bottom: 1px solid var(--outline-variant); }
/* лёгкая анимация градиента: два слоя размытых пятен медленно плывут навстречу друг другу */
.hero__bg, .hero::after { position: absolute; inset: -30%; z-index: -1; pointer-events: none; filter: blur(40px); will-change: transform, opacity; }
.hero__bg {
  background:
    radial-gradient(36% 46% at 20% 30%, color-mix(in srgb, var(--primary) 38%, transparent), transparent 70%),
    radial-gradient(40% 50% at 70% 80%, color-mix(in srgb, var(--data-1) 28%, transparent), transparent 70%);
  animation: hero-flow-a 28s ease-in-out infinite alternate; }
.hero::after { content: "";
  background:
    radial-gradient(34% 44% at 80% 24%, color-mix(in srgb, var(--data-3) 30%, transparent), transparent 70%),
    radial-gradient(28% 38% at 30% 86%, color-mix(in srgb, var(--tertiary) 20%, transparent), transparent 70%);
  animation: hero-flow-b 34s ease-in-out infinite alternate; }
@keyframes hero-flow-a {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
  50% { transform: translate3d(6%, 3%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(-3%, 5%, 0) scale(1.02); opacity: .85; }
}
@keyframes hero-flow-b {
  0% { transform: translate3d(0, 0, 0) scale(1.04); opacity: .8; }
  50% { transform: translate3d(-6%, -3%, 0) scale(1); opacity: 1; }
  100% { transform: translate3d(4%, -5%, 0) scale(1.07); opacity: .9; }
}
.hero__title { margin: 0; font-size: clamp(36px, 5.4vw, 62px); line-height: 1.06; font-weight: 450; letter-spacing: -0.02em; font-variation-settings: "opsz" 144; max-width: 820px; }
.hero__accent { display: block; font-weight: 300; background: linear-gradient(90deg, var(--primary), var(--data-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { max-width: 680px; font-size: 18px; line-height: 28px; }
.hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 16px 24px; margin: 4px 0 0; padding-top: 24px; border-top: 1px solid var(--outline-variant); max-width: 720px; }
.hero__stats div { display: flex; flex-direction: column-reverse; gap: 4px; }
.hero__stats dd { margin: 0; font-family: var(--font-mono); font-size: 30px; line-height: 38px; font-variant-numeric: tabular-nums; color: var(--on-surface); }
.hero__stats dt { font-size: 14px; line-height: 18px; letter-spacing: .4px; color: var(--on-surface-variant); }
.hero__card { box-sizing: border-box; border: 1px solid var(--outline-variant); border-radius: var(--radius-l); background: color-mix(in srgb, var(--surface-container-lowest) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--elevation-2); }
@media (max-width: 600px) { .hero { padding-block: 40px 40px; } .hero__lead { font-size: 17px; line-height: 24px; } }
@media (prefers-reduced-motion: reduce) { .hero__bg, .hero::after { animation: none; } }

/* Анализ параметров */
.bar { height: 10px; border-radius: 999px; background: var(--surface-container-highest); overflow: hidden; }
.bar > div { height: 100%; background: var(--primary); border-radius: 999px; }
.pub-bar { display: grid; grid-template-columns: minmax(140px, 240px) 1fr 64px; gap: 16px; align-items: center; }
.pub-bar .data-m { text-align: right; color: var(--on-surface-variant); }
@media (max-width: 600px) { .pub-bar { grid-template-columns: 1fr 56px; } .pub-bar .bar { grid-column: 1 / -1; grid-row: 2; } }

/* Входы по осям на главной */
.entry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.entry-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; border: 0; border-top: 1px solid var(--table-grid); background: none; color: var(--on-surface); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.entry-link:hover { color: var(--primary); }
.need-yes { border-color: var(--primary); }
.cmp-table thead th { vertical-align: top; }
.cmp-table td { vertical-align: top; overflow-wrap: anywhere; }
/* стартовый экран сравнения */
.sit-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.sit-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 16px; align-items: start; }
.sit-row > .title-s { padding-top: 7px; }
.sit-result { justify-content: center; }
.sit-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sit-top li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--outline-variant); }
.sit-top li:last-child { border-bottom: 0; }
.site .sit-top a { color: var(--on-surface); text-decoration: none; }
.site .sit-top a:hover { color: var(--primary); }
.cmp-card__top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 22px; }
.cmp-card__top li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmp-card__top li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-sm--empty { display: inline-grid; place-items: center; font-size: 14px; font-weight: 600; color: var(--on-surface-variant); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 16px; padding: 12px 16px; }
.pick-item { padding: 6px 0; }
.pick-item > span:last-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
@media (max-width: 900px) {
  .sit-layout { grid-template-columns: minmax(0, 1fr); }
  .sit-result { position: static; }
  .sit-row { grid-template-columns: minmax(0, 1fr); }
}
.cmp-sticky { position: fixed; z-index: 30; overflow: hidden; background: var(--table-header); border-bottom: 1px solid var(--table-grid-strong); box-shadow: 0 4px 10px -6px rgb(0 0 0 / .25); }
.cmp-sticky__row { display: flex; }
.cmp-sticky__cell { flex: none; box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 18px; }
.cmp-sticky__cell.is-first { position: relative; z-index: 1; background: var(--table-header); font-size: 14px; font-weight: 500; color: var(--on-surface-variant); }
.cmp-sticky__cell .title-s { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .cmpbar > .row { display: none; } .cmpbar { padding: 8px 8px 8px 16px; } }

/* Логотипы поставщиков: белая подложка в обеих темах, чтобы тёмные иконки оставались видны */
:root { --logo-tile: #ffffff; }
.site .ac-platform__logo { width: 36px; height: 36px; background: var(--logo-tile); padding: 4px; }
.site .ac-platform__mono { width: 36px; height: 36px; }
.site .ac-platform--s .ac-platform__logo, .site .ac-platform--s .ac-platform__mono { width: 28px; height: 28px; padding: 3px; }
.logo-lg { width: 64px; height: 64px; flex: none; box-sizing: border-box; padding: 8px; border-radius: var(--radius-m); border: 1px solid var(--outline-variant); background: var(--logo-tile); object-fit: contain; }

/* Новости */
.news-list { display: flex; flex-direction: column; border-top: 1px solid var(--table-grid); }
.news-item { display: grid; grid-template-columns: 96px 1fr; gap: 4px 16px; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--table-grid); color: var(--on-surface); text-decoration: none; }
.site a.news-item:hover .news-title { color: var(--primary); text-decoration: underline; }
@media (max-width: 600px) { .news-item { grid-template-columns: 1fr; } }

/* Индекс AllCDP — как в бенчмарках */
.bench { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.bench-row { display: grid; grid-template-columns: minmax(160px, 260px) 1fr 56px; gap: 16px; align-items: center; }
.bench-row .bar { height: 14px; }
.bench-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bench-name > .body-s { padding-left: 44px; }
.bench-row .bar > div { background: var(--data-1); }
.bench-row .bar.is-top > div { background: var(--primary); }
.bench-score { font-family: var(--font-mono); font-size: 22px; line-height: 28px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.index-note { margin: 0; max-width: 880px; }
.bar.is-mini { flex-grow: 1; min-width: 60px; height: 6px; }
.logo-sm { width: 24px; height: 24px; flex: none; box-sizing: border-box; padding: 2px; border-radius: var(--radius-xs); border: 1px solid var(--outline-variant); background: var(--logo-tile); object-fit: contain; }
@media (max-width: 600px) { .bench-row { grid-template-columns: 1fr 48px; } .bench-row .bar { grid-column: 1 / -1; grid-row: 2; } }

/* Таблица функций с иконками Lucide */
.lu { flex: none; display: block; }
.caps-table tr.caps-group > th { background: var(--surface-container-low); padding-top: 14px; padding-bottom: 14px; }
.caps-badge { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--radius-s); background: var(--primary-container); color: var(--on-primary-container); }
.caps-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--surface-container-high); color: var(--on-surface-variant); }
.caps-ic.is-on { background: var(--success-container); color: var(--on-success-container); }
.caps-table tr.is-off > th, .caps-table tr.is-off > td { color: var(--on-surface-variant); }
.caps-table tr.is-off .caps-ic { opacity: .6; }
.stable.caps-table tbody tr:nth-child(even) > * { background: var(--table-row); }
.caps-grid { display: flex; flex-direction: column; gap: 16px; }
.caps-card { border: 1px solid var(--outline-variant); border-radius: var(--radius-m); overflow: hidden; background: var(--table-row); }
.caps-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: color-mix(in srgb, var(--primary) 9%, var(--surface-container-low)); border-bottom: 1px solid var(--outline-variant); }
.caps-card .caps-table th, .caps-card .caps-table td { padding-top: 12px; padding-bottom: 12px; }
.params-table th[scope="row"] { width: 34%; }
.params-table td { overflow-wrap: anywhere; }

/* Товарные функции */
.prod-table th { vertical-align: top; }
.bench-row .bar.is-prod > div { background: var(--data-3); }

/* Ключевые показатели в «Коротко о главном» */
.key-index { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-m); background: color-mix(in srgb, var(--primary) 8%, var(--surface-container-low)); }
.key-label { font-size: 14px; line-height: 18px; letter-spacing: .4px; color: var(--on-surface-variant); }
.key-score { font-family: var(--font-sans); font-size: 44px; line-height: 44px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--on-surface); }
.key-bar { height: 8px; }
.key-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.key-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--radius-m); border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); min-width: 0; }
.key-value { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--on-surface); overflow-wrap: normal; hyphens: manual; }
.key-value.is-long { font-size: 14px; line-height: 20px; font-weight: 400; }
.key-value.is-na { font-size: 15px; line-height: 22px; font-weight: 400; color: var(--on-surface-variant); }
@media (max-width: 1000px) {
  .two-col > aside { order: -1; }
  .key-index, .key-pair { max-width: 560px; }
}

/* Подборки */
.coll-grid { align-items: stretch; }
.coll-card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 20px; box-sizing: border-box; height: 100%; transition: border-color .15s, box-shadow .15s; }
.coll-card:hover, .coll-card:focus-within { border-color: var(--primary); box-shadow: var(--elevation-1); }
.coll-card__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex-grow: 1; align-self: stretch; }
.site a.coll-card__title { color: var(--on-surface); text-decoration: none; }
.site a.coll-card__title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.site a.coll-card__title:focus-visible { outline: none; }
.coll-card:hover .coll-card__title { color: var(--primary); }
.coll-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; }
.coll-card__foot { margin-top: auto; padding-top: 4px; display: flex; justify-content: space-between; align-items: center; color: var(--on-surface-variant); }
.coll-card:hover .coll-card__go { color: var(--primary); }
.matrix-table td, .matrix-table th { vertical-align: middle; }
.matrix-cell { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 28px; font-family: var(--font-mono); font-size: 14px; color: var(--on-surface-variant); }
.site a.matrix-cell.is-on { padding: 6px 12px; border-radius: var(--radius-full); background: var(--secondary-container); color: var(--on-secondary-container); font-family: var(--font-sans); font-weight: 500; text-decoration: none; white-space: nowrap; }
.site a.matrix-cell.is-on:hover { background: var(--primary-container); color: var(--on-primary-container); }
.matrix-cell.is-empty { color: var(--outline); }
.why-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 19px; color: var(--on-surface-variant); }

/* тест «Нужна ли вам CDP» */
.need-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; padding: 24px 28px; border-color: color-mix(in srgb, var(--primary) 35%, var(--outline-variant)); background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 12%, var(--surface-container-low)), var(--surface-container-low) 60%); }
.need-banner__ic { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.verdict__ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.verdict--yes .verdict__ic { background: color-mix(in srgb, var(--data-3) 18%, transparent); color: var(--data-3); }
.verdict--light .verdict__ic { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.verdict--no .verdict__ic { background: color-mix(in srgb, var(--data-2) 18%, transparent); color: var(--data-2); }
.verdict__bar { flex: 1 1 auto; max-width: 360px; height: 8px; }

/* баннер «Пять вопросов — и шорт-лист» */
.short-cta { display: flex; flex-direction: column; gap: 24px; padding: 28px; border-color: color-mix(in srgb, var(--data-3) 30%, var(--outline-variant));
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--data-3) 14%, transparent), transparent 55%), radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%), var(--surface-container-low); }
.short-cta__head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; }
.short-cta__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.short-cta__steps li { flex: 1 1 180px; }
.short-cta__steps li { position: relative; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 12px 14px; border-radius: var(--radius-m); border: 1px solid var(--outline-variant); background: color-mix(in srgb, var(--surface-container) 70%, transparent); }
.short-cta__n { font-size: 14px; font-weight: 600; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.short-cta__ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--radius-s); background: var(--primary-container); color: var(--on-primary-container); }

/* подвал: дисклеймер и «Нашли неточность?» */
.ft-note { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; padding-top: 24px; border-top: 1px solid var(--outline-variant); }
.ft-fix { flex: 0 1 340px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border-radius: var(--radius-m); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--outline-variant)); background: color-mix(in srgb, var(--primary) 8%, var(--surface-container)); }

/* оглавление руководства: текущий шаг подсвечен */
.toc-link { position: relative; display: block; width: 100%; padding: 4px 0 4px 14px; margin-left: -14px; border: 0; background: none; font: inherit; text-align: left; color: var(--on-surface-variant); cursor: pointer; transition: color .15s; }
.toc-link::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: transparent; transition: background .15s; }
.toc-link:hover { color: var(--on-surface); }
.toc-link.is-active { color: var(--primary); font-weight: 500; }
.toc-link.is-active::before { background: var(--primary); }

/* готовые интеграции со значками */
.int-row { display: flex; flex-wrap: wrap; gap: 8px; }
.int-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 4px; border-radius: var(--radius-full); border: 1px solid var(--outline-variant); background: var(--surface-container); font-size: 14px; line-height: 20px; color: var(--on-surface); }
.int-chip__ic { width: 24px; height: 24px; flex: none; box-sizing: border-box; padding: 3px; border-radius: 50%; background: var(--logo-tile, #fff); object-fit: contain; }
.int-chip__ic--mono { display: inline-grid; place-items: center; padding: 0; background: var(--primary-container); color: var(--on-primary-container); font-size: 12px; font-weight: 600; }

/* номер места в рейтинге */
.rank-n { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--surface-container-high); font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-n.is-top { background: var(--primary-container); color: var(--on-primary-container); }

/* статус «Мало данных» вместо индекса */
.low-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-full); border: 1px dashed var(--outline); color: var(--on-surface-variant); font-size: 14px; white-space: nowrap; }
.key-index.is-low { gap: 6px; }
.key-low { font-size: 22px; line-height: 28px; font-weight: 500; color: var(--on-surface-variant); }
.bench-low { align-self: center; }

/* страница «Как выбирать» */
.guide-overview { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.guide-overview__card { width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-m); border: 1px solid var(--outline-variant); background: var(--surface-container-low); color: var(--on-surface); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.guide-overview__card:hover { border-color: var(--primary); background: var(--surface-container); }
.guide-overview__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 820px) 220px; gap: 64px; align-items: start; justify-content: start; }
.guide-toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border-left: 1px solid var(--outline-variant); }
.guide-main { display: flex; flex-direction: column; gap: 56px; max-width: 820px; min-width: 0; }
.guide-step { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 96px; }
.guide-step h2 { scroll-margin-top: 96px; }
.guide-step__head { display: flex; gap: 16px; align-items: flex-start; }
.guide-step__n { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary-container); color: var(--on-primary-container); font-size: 18px; font-weight: 600; }
.guide-text { margin: 0; max-width: 72ch; }
.guide-panel { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.guide-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.guide-tips li { display: flex; gap: 14px; align-items: flex-start; }
.guide-questions { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 22px; }
.guide-questions li::marker { color: var(--primary); font-weight: 600; }
.crit-list { list-style: none; margin: 0; padding: 0; }
.crit-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 14px 18px; border-top: 1px solid var(--table-grid); }
.crit-list li:first-child { border-top: 0; }
@media (max-width: 1100px) { .guide-overview { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); } }
@media (max-width: 900px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { display: none; }
  .guide-main { gap: 44px; }
}
.guide-main .grid-cards { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
@media (max-width: 600px) {
  .guide-overview { gap: 8px; }
  .guide-overview__card { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; }
  .guide-overview__card .body-s, .guide-overview__top .data-m { display: none; }
}

.crit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.crit-tools .crit-tools__search { flex: 1 1 260px; max-width: 420px; width: auto; }
.crit-tools .ac-btn { flex: none; }

/* посадочные страницы каталога */
.site a.entry-link { color: var(--on-surface); text-decoration: none; }
.site a.entry-link:hover { color: var(--primary); }
.land-links { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius-l); border: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.land-links__group { display: flex; flex-direction: column; gap: 8px; }
.land-links__list { display: flex; flex-wrap: wrap; gap: 8px; }
.site a.land-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid var(--outline-variant); background: var(--surface-container); color: var(--on-surface); font-size: 14px; text-decoration: none; }
.site a.land-chip:hover { border-color: var(--primary); color: var(--primary); }
.land-map { list-style: none; margin: 0; padding: 0; columns: 2 360px; column-gap: 32px; }
.land-map li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--table-grid); break-inside: avoid; }
.site .land-map a { color: var(--on-surface); text-decoration: none; }
.site .land-map a:hover { color: var(--primary); }

/* Ответ в начале страницы, частые вопросы, источники — разделы под нейровыдачу */
.answer { max-width: 880px; }
.faq-list { display: flex; flex-direction: column; gap: 20px; }
.faq-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--outline-variant); }
.faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-item p { margin: 0; color: var(--on-surface-variant); }
.src-row { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--on-surface-variant); }
.site a.src-link { color: var(--on-surface-variant); text-decoration: underline; text-underline-offset: 2px; }
.code-block { margin: 0; padding: 14px 16px; border-radius: var(--radius-s); background: var(--surface-container-high); white-space: pre-wrap; word-break: break-all; font-family: var(--font-mono); }
.prose p { margin: 0; }
.guide-sec .guide-text { max-width: 76ch; }