/* Comparison block */
.cmpb {
  --c-bg: #00050B; --c-card: #0C131C; --c-head: #101824; --c-text: #F8FCFF; --c-accent: #009CFF; --c-dots: #009CFF;
  --c-yes: #2BD67B; --c-part: #FFC038; --c-no: #FF6467; --c-bg-opacity: .35;
  --c-soft: color-mix(in srgb, var(--c-text) 78%, transparent);
  --c-muted: color-mix(in srgb, var(--c-text) 45%, transparent);
  --c-line: color-mix(in srgb, var(--c-text) 9%, transparent);
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0; padding: 64px 20px; background: var(--c-bg); color: var(--c-text);
  font-family: Arial, Helvetica, sans-serif;
}
.cmpb::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--c-dots) 22%, transparent) 1.1px, transparent 1.3px); background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 20%, #000 10%, transparent 75%); mask-image: radial-gradient(60% 50% at 50% 20%, #000 10%, transparent 75%); opacity: .5; }
.cmpb--nodots::before { display: none; }
.cmpb__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: var(--c-bg-opacity); pointer-events: none; }
.cmpb__inner { max-width: 1080px; margin: 0 auto; }

.cmpb__head { text-align: center; max-width: 680px; margin: 0 auto 34px; }
.cmpb__tag { display: inline-block; padding: 8px 12px; border: 1px solid var(--c-line); border-radius: 8px; background: color-mix(in srgb, var(--c-card) 90%, transparent);
  font: 600 12px/1 "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.cmpb__title { margin: 14px 0 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; color: var(--c-text); }
.cmpb__lead { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--c-soft); }

.cmpb__wrap { border-radius: 24px; border: 1px solid var(--c-line); background: var(--c-card); overflow: hidden; }
.cmpb__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmpb__table th, .cmpb__table td { padding: 15px 16px; text-align: left; vertical-align: middle; border-top: 1px solid var(--c-line); font-size: 14.5px; line-height: 1.4; }
.cmpb__table thead th { border-top: 0; padding: 18px 16px; background: var(--c-head); border-bottom: 1px solid var(--c-line); font-size: 15px; font-weight: 600; color: var(--c-text); position: relative; }
.cmpb__table thead th.cmpb__crit { color: var(--c-muted); font: 600 11px/1 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.cmpb__table tbody th { font-weight: 400; color: var(--c-text); width: 26%; }
.cmpb__table thead .cmpb__crit { width: 26%; }
.cmpb__table tbody th small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--c-muted); }
.cmpb__table td { color: var(--c-soft); }
.cmpb__table .is-hl { background: color-mix(in srgb, var(--c-accent) 7%, transparent); color: var(--c-text); }
.cmpb__table thead th.is-hl { background: color-mix(in srgb, var(--c-accent) 16%, var(--c-head)); color: color-mix(in srgb, var(--c-accent) 45%, #fff); }
.cmpb__badge { display: block; width: max-content; margin-bottom: 6px; padding: 4px 7px; border-radius: 6px; background: var(--c-accent); color: #00050B;
  font: 700 10px/1 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.cmpb__ic { display: inline-block; min-width: 1.1em; margin-right: 4px; font-weight: 700; }
.cmpb__ic--yes  { color: var(--c-yes); }
.cmpb__ic--part { color: var(--c-part); }
.cmpb__ic--no   { color: var(--c-no); }
.cmpb__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmpb__note { margin: 14px 0 0; text-align: center; font: 600 11px/1.5 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }

/* ---- мобильные: карточки по критериям ---- */
@media (max-width: 760px) {
  .cmpb { padding: 44px 16px; }
  .cmpb--m-cards .cmpb__wrap { border: 0; background: none; border-radius: 0; overflow: visible; }
  .cmpb--m-cards .cmpb__table, .cmpb--m-cards .cmpb__table tbody, .cmpb--m-cards .cmpb__table tr,
  .cmpb--m-cards .cmpb__table th, .cmpb--m-cards .cmpb__table td { display: block; width: auto; }
  .cmpb--m-cards .cmpb__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmpb--m-cards .cmpb__table tbody tr { margin-bottom: 12px; border: 1px solid var(--c-line); border-radius: 18px; background: var(--c-card); overflow: hidden; }
  .cmpb--m-cards .cmpb__table tbody th { border-top: 0; padding: 14px 16px; background: var(--c-head); font-weight: 600; font-size: 15px; }
  .cmpb--m-cards .cmpb__table td { display: grid; grid-template-columns: minmax(110px, 42%) 1fr; gap: 10px; align-items: center; padding: 11px 16px; font-size: 14px; }
  .cmpb--m-cards .cmpb__table td::before { content: attr(data-label); font: 600 11px/1.3 "Courier New", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
  .cmpb--m-cards .cmpb__table td.is-hl::before { color: var(--c-accent); }
  .cmpb--m-cards .cmpb__table td.is-hl { box-shadow: inset 3px 0 0 var(--c-accent); }

  /* вариант «таблица со свайпом»: первая колонка закреплена */
  .cmpb--m-scroll .cmpb__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; }
  .cmpb--m-scroll .cmpb__table { min-width: calc(150px + var(--c-cols, 4) * 140px); }
  .cmpb--m-scroll .cmpb__table th, .cmpb--m-scroll .cmpb__table td { padding: 12px; font-size: 13.5px; }
  .cmpb--m-scroll .cmpb__table tbody th, .cmpb--m-scroll .cmpb__table thead .cmpb__crit { position: sticky; left: 0; z-index: 1; width: 150px; background: var(--c-head); }
}

/* защита от стилей темы для таблиц */
.cmpb .cmpb__table, .cmpb .cmpb__table thead, .cmpb .cmpb__table tbody, .cmpb .cmpb__table tr { border: 0 !important; box-shadow: none; }
.cmpb .cmpb__table th, .cmpb .cmpb__table td { border-left: 0 !important; border-right: 0 !important; }
.cmpb .cmpb__table tbody th, .cmpb .cmpb__table td { border-bottom: 0 !important; }

/* защита от регистра заголовков темы */
.cmpb h1, .cmpb h2, .cmpb h3 { text-transform: none; }