/* Фирменный шрифт PF Isotext Pro (Parachute) из брендбука 2018,
   папка «Шрифты (Фирменный шрифт)». Полная кириллица, 1198 глифов —
   хватает и на «№», и на стрелки, и на надстрочные цифры, поэтому
   подмена знаков из второго шрифта больше не нужна. */

@font-face {
  font-family: 'PF Isotext Pro';
  src: url('/fonts/PFIsotextPro-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PF Isotext Pro';
  src: url('/fonts/PFIsotextPro-LightItalic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PF Isotext Pro';
  src: url('/fonts/PFIsotextPro-Reg.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PF Isotext Pro';
  src: url('/fonts/PFIsotextPro-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PF Isotext Pro';
  src: url('/fonts/PFIsotextPro-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PF Isotext Pro';
  src: url('/fonts/PFIsotextPro-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* Палитра из брендбука 2018 (стр. «Основная фирменная цветовая палитра»):
     голубой RGB 39/170/225, серый RGB 65/64/66, светло-серый RGB 222/221/221. */
  --brand:     #27AAE1;   /* фирменный голубой — акценты, линии, знак */
  --brand-dk:  #126487;   /* затемнённый: белый текст на нём читается (6.6:1) */
  --brand-dp:  #0F5470;   /* самый тёмный — наведение */
  --link:      #1578A2;   /* ссылки на белом: 5.0:1 */
  --ink:       #414042;   /* основной текст, прямо из брендбука */
  --ink-soft:  #5F5E61;
  --ink-mute:  #8A898C;
  --line:      #DEDDDD;   /* линейки и рамки, прямо из брендбука */
  --tint:      #EAF6FC;   /* голубой в 10% — подложки */
  --panel-bg:  #ffffff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font: 18px/1.68 'PF Isotext Pro', Verdana, Tahoma, Geneva, sans-serif;
  background: #cfe6f5 url("/font/fon_sneg.jpg") repeat fixed;
}

a { color: var(--brand-dk); text-decoration: none; }
a:hover { color: var(--brand-dp); text-decoration: underline; }

img { max-width: 100%; height: auto; border: 0; }

/* Заголовки — фирменным Isotext, как предписывает брендбук */
h1, h2, h3, h4 {
  margin: 0 0 .5em; line-height: 1.3; color: var(--ink);
  font-family: 'PF Isotext Pro', Verdana, sans-serif;
}
h1 { font-size: 30px; }
h2 { font-size: 23px; }
h3 { font-size: 19px; }
h4 { font-size: 17px; }
p { margin: 0 0 1em; }

/* Белое полотно сайта поверх зимнего фона */
.sheet {
  max-width: 1300px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 24px rgba(10, 60, 100, .28);
}

.wrap { padding: 0 26px; }

/* ---------- Шапка: фирменный блок + полоса неба ---------- */

/* Логотип по брендбуку — знак, логотип и дескриптор, на белом поле.
   Вокруг оставлено охранное поле. */
.brandbar { background: #fff; padding: 20px 26px 16px; }
.brandbar__row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.brandbar__logo { flex: 0 1 480px; min-width: 0; display: block; }
.brandbar__logo img { display: block; width: 100%; max-width: 480px; height: auto; }
.brandbar__contact { margin-left: auto; text-align: right; }
.brandbar__phone {
  display: block; font-family: 'PF Isotext Pro', Verdana, sans-serif;
  font-size: 27px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); white-space: nowrap;
}
.brandbar__phone:hover { color: var(--brand-dk); text-decoration: none; }
.brandbar__contact small { display: block; font-size: 13px; color: var(--ink-mute); }

.sky {
  /* лёгкая вуаль поверх неба — иначе белый текст тонет в светлых участках */
  background:
    linear-gradient(rgba(6, 44, 82, .32), rgba(6, 44, 82, .12) 55%, rgba(6, 44, 82, .28)),
    #4ba3e3 url("/data/sky.png") no-repeat center 35%;
  background-size: auto, cover;
  padding: 18px 26px;
}
.sky__slogan {
  margin: 0; text-align: center;
  font-family: 'PF Isotext Pro', Verdana, sans-serif;
  font-size: 21px; font-weight: 700; color: #fff;
  text-shadow: 0 2px 7px rgba(8,50,90,.85), 0 0 3px rgba(8,50,90,.9);
}

/* ---------- Верхнее меню ---------- */

.tabs {
  background: #fff;
  border-bottom: 3px solid var(--brand-dk);
  padding: 0 26px;
}
.tabs ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.tabs li + li { border-left: 1px solid var(--line); }
.tabs a {
  display: block; padding: 13px 20px;
  color: var(--ink-soft); font-size: 16px; font-weight: 600;
}
.tabs a:hover { background: var(--tint); color: var(--brand-dk); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--brand-dp); background: var(--tint); }

/* ---------- Сетка ---------- */

.layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 292px;
  gap: 30px;
  padding: 26px;
  align-items: start;
}
/* Элементы grid по умолчанию имеют min-width:auto и растягиваются под самое
   широкое содержимое — из-за этого страница ехала вбок на телефоне. */
.layout > * { min-width: 0; }

/* Внутренние страницы: третьей колонки нет, иначе справа пустует 292 px. */
.layout--inner { grid-template-columns: 236px minmax(0, 1fr); }

/* ---------- Левое меню разделов ---------- */

/* Меню разделов длиннее экрана, поэтому «липкая» колонка сама прокручивается:
   иначе её нижние пункты нельзя было достать, не промотав страницу до конца. */
.sections {
  position: sticky;
  top: 12px;
  font-size: 15px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-right: 4px;
}
.sections::-webkit-scrollbar { width: 6px; }
.sections::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.sections::-webkit-scrollbar-track { background: transparent; }
.sections ul { margin: 0; padding: 0; list-style: none; }
.sections > ul > li { border-bottom: 1px dotted var(--line); }
.sections a {
  display: block; padding: 7px 6px 7px 24px;
  background: url("/dotnull.png") no-repeat 4px 11px;
  background-size: 10px 10px;
  color: var(--ink); font-size: 15px;
}
.sections a:hover { background-color: var(--tint); color: var(--brand-dk); text-decoration: none; }
.sections .is-parent > a { font-weight: 700; color: var(--brand-dk); }
.sections .sub { list-style: none; margin: 0 0 4px; padding: 0; }
.sections .sub a { padding-left: 40px; background-position: 22px 12px; font-size: 14px; color: var(--ink-soft); }

/* ---------- Панели с синей шапкой (в духе прежних round-div) ---------- */

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 26px;
}
.panel__head {
  background: linear-gradient(#1a86b4, var(--brand-dk));
  color: #fff; font-family: 'PF Isotext Pro', Verdana, sans-serif;
  font-weight: 700; font-size: 16px;
  padding: 11px 17px;
}
.panel__body { padding: 16px 18px; }
.panel__body > *:last-child { margin-bottom: 0; }

/* ---------- Основная колонка ---------- */

.lead {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--tint);
  padding: 22px 24px; margin-bottom: 26px; text-align: center;
}
.lead h1 { font-size: 26px; color: var(--brand-dk); margin-bottom: .3em; }
.lead p { margin: 0; font-size: 16px; color: var(--ink-soft); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.cards figure { margin: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.cards img { display: block; width: 100%; }
.cards figcaption { padding: 12px 14px; font-size: 13px; color: var(--ink-soft); }
.cards figcaption b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 3px; }

.news { list-style: none; margin: 0; padding: 0; }
.news li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.news li:first-child { padding-top: 0; }
.news li:last-child { border-bottom: 0; padding-bottom: 0; }
.news time { display: block; font-size: 12px; color: var(--ink-mute); margin-bottom: 3px; }
.news h3 { font-size: 15px; margin-bottom: .3em; }
.news p { margin: 0; font-size: 14px; color: var(--ink-soft); }

.more { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14px; }

.pay__logos { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 12px; }
.pay__logos img { height: 32px; width: auto; border-radius: 3px; }

.minen { display: flex; gap: 16px; align-items: flex-start; }
.minen img { width: 80px; flex: none; }
.minen p { margin: 0; font-size: 14px; }

.share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); }
.share img { width: 22px; height: 22px; }

/* ---------- Формы ---------- */

.field { display: block; margin-bottom: 9px; }
.field input {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
}
.field input:focus { outline: 2px solid var(--brand-dk); outline-offset: -1px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin-bottom: 11px; }
.btn {
  display: inline-block; padding: 9px 20px; border: 0; border-radius: 4px;
  background: linear-gradient(#1a86b4, var(--brand-dk)); color: #fff;
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.btn:hover { background: var(--brand-dk); }

/* ---------- Правая колонка ---------- */

.aside .digest { list-style: none; margin: 0; padding: 0; }
.aside .digest li { padding: 13px 0; border-bottom: 1px solid var(--line); }
.aside .digest li:first-child { padding-top: 0; }
.aside .digest li:last-child { border-bottom: 0; padding-bottom: 0; }
.aside .digest h4 { font-size: 14px; margin-bottom: .3em; color: var(--brand-dk); }
.aside .digest p { font-size: 13px; color: var(--ink-soft); margin: 0; }
.aside .panel__body { font-size: 14px; }
.vk-feed > div { margin-bottom: 12px; }

/* ---------- Подвал ---------- */

.footer {
  background: var(--brand-dk); color: rgba(255,255,255,.78);
  font-size: 13px; padding: 28px 26px 32px;
}
.footer a { color: #fff; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.footer h3 { color: #fff; font-size: 14px; margin-bottom: .6em; }
.footer p { margin: 0 0 .6em; }
.footer__legal { color: rgba(255,255,255,.55); font-size: 12px; }

.uptop {
  position: fixed; right: 18px; bottom: 18px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand-dk); color: #fff;
  display: none; align-items: center; justify-content: center; font-size: 19px;
  box-shadow: 0 2px 10px rgba(8,50,90,.4);
}
.uptop:hover { background: var(--brand-dk); color: #fff; text-decoration: none; }
.uptop.is-visible { display: flex; }

/* ---------- Адаптив ---------- */

@media (max-width: 1180px) {
  .layout { grid-template-columns: 210px minmax(0, 1fr); }
  .aside { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; align-items: start; }
  .aside .panel { margin-bottom: 0; }
}

@media (max-width: 780px) {
  .layout { grid-template-columns: 1fr; gap: 22px; padding: 18px; }
  .sections { position: static; order: 2; }
  .brandbar { padding: 14px 18px 12px; }
  .brandbar__logo { flex: 1 1 100%; }
  .brandbar__contact { margin-left: 0; text-align: left; }
  .brandbar__phone { font-size: 23px; }
  .sky { padding: 12px 18px; }
  .sky__slogan { font-size: 16px; }
  .tabs { padding: 0 10px; }
  .tabs a { padding: 10px 13px; font-size: 14px; }
  .footer { padding: 22px 18px 26px; }
  h1 { font-size: 21px; }
}

/* ---------- Выпадающее подменю в шапке ---------- */

.tabs li.has-sub { position: relative; }
.tabs li.has-sub > a::after {
  content: "";
  display: inline-block;
  width: .42em; height: .42em;
  margin-left: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
}
.tabs .subnav {
  position: absolute;
  top: 100%; left: 0;
  z-index: 40;
  min-width: 264px;
  margin: 0; padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-dk);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 20px rgba(20, 40, 60, .16);
  display: none;
}
/* Раскрываем и по наведению, и при переходе табом внутрь */
.tabs li.has-sub:hover > .subnav,
.tabs li.has-sub:focus-within > .subnav { display: block; }

.tabs .subnav li + li { border-left: 0; }
.tabs .subnav a {
  display: block;
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}
.tabs .subnav a:hover { background: var(--tint); color: var(--brand-dk); text-decoration: none; }

@media (max-width: 780px) {
  /* На узком экране раскрытое подменю занимало весь первый экран. Прячем его:
     все те же страницы перечислены в боковом меню разделов, а сам пункт
     «IT-программы» остаётся ссылкой. */
  .tabs li.has-sub > a::after { display: none; }
  .tabs .subnav { display: none; }
}

/* ---------- Вход в онлайн-сервисы ----------
   Раскрывающийся список без скриптов: <details> открывается по щелчку
   и работает с клавиатуры сам по себе. */
.services__toggle {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--tint);
  color: var(--brand-dk);
  font-weight: 700;
  font-size: 15px;
  user-select: none;
}
.services__toggle::-webkit-details-marker { display: none; }
.services__toggle::after { content: " ▾"; }
.services[open] .services__toggle::after { content: " ▴"; }
.services__toggle:hover { background: #dcf0fb; }
.services__toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.services__list { margin: 8px 0 0; padding: 0; list-style: none; }
.services__list li + li { margin-top: 4px; }
.services__list a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
}
.services__list a:hover { background: var(--tint); text-decoration: none; }
.services__list span {
  display: block;
  padding: 0 12px 8px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.45;
}

/* ---------- Кнопка интернет-магазина ---------- */
.shop {
  display: inline-block;
  margin-top: 4px;
  padding: 12px 20px;
  border-radius: 6px;
  background: linear-gradient(#1d84c8, var(--brand-dk));
  color: #fff;
  text-decoration: none;
}
.shop:hover { background: var(--brand-dp); color: #fff; text-decoration: none; }
.shop:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.shop__label { display: block; font-weight: 700; font-size: 15px; }
.shop__addr { display: block; font-size: 13px; opacity: .85; }


/* Оформление содержимого, перенесённого со старых страниц.
   Всё, что лежит внутри .content, пришло из исходного сайта как есть. */

.content { font-size: 15px; overflow-wrap: break-word; }
.content > *:first-child { margin-top: 0; }
.content > *:last-child { margin-bottom: 0; }

.content h1 { font-size: 25px; color: var(--brand-dk); margin: 0 0 .6em; }
.content h2 { font-size: 20px; color: var(--brand-dk); margin: 1.6em 0 .5em; }
.content h3 { font-size: 17px; margin: 1.4em 0 .4em; }
.content h4 { font-size: 15px; margin: 1.2em 0 .4em; }
.content h1:first-child, .content h2:first-child { margin-top: 0; }

.content p { margin: 0 0 1em; }
.content ul, .content ol { margin: 0 0 1em; padding-left: 26px; }
.content li { margin-bottom: .35em; }

.content b, .content strong { color: var(--ink); }
.content hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }

/* ---------- Иллюстрации ----------
   Общие правила: одна левая граница с текстом, одинаковый отступ сверху
   и снизу, никакого растягивания сверх настоящего размера, на узком экране
   сжимаются вместе с колонкой. Размеры проставлены в разметке, поэтому
   место резервируется заранее и текст при загрузке не прыгает. */

.content img { max-width: 100%; height: auto; }

.content .pic {
  display: block;
  margin: 1.6em 0;
  border-radius: 6px;
}
/* Тонкая рамка — только крупным снимкам и схемам (класс pic--framed):
   она отделяет светлую картинку от белого фона страницы. Логотипам,
   баннерам и мелким фото рамка не нужна. */
.content .pic--framed { background: #fff; box-shadow: 0 0 0 1px var(--line); }

/* Ссылка-картинка не должна тащить за собой подчёркивание и отступ строки.
   Идущие подряд картинки выстраиваются в ряд по верхнему краю с общим
   промежутком, а не съезжают по базовой линии. */
.content a > .pic { margin: 0; }
.content a:has(> .pic) {
  display: inline-block;
  vertical-align: top;
  margin: 1.6em 14px 0 0;
  text-decoration: none;
}
.content a:has(> .pic):hover { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* Значки и мелкие пометки остаются в строке текста */
.content .pic-icon {
  display: inline-block;
  vertical-align: middle;
  margin: 0 .5em .2em 0;
  border-radius: 4px;
}

.content .pic + .pic { margin-top: 1.6em; }

/* Таблицы: их много и они разные — от прайсов до текстов законов.
   Широкие прокручиваются внутри себя, страница вбок не едет. */
.content .table-scroll { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
.content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  background: #fff;
}
.content th, .content td {
  border: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
.content th { background: var(--tint); font-weight: 700; color: var(--brand-dk); }
.content tr:nth-child(even) td { background: #f7fbfe; }

/* Таблицы, которые в исходнике служили раскладкой, а не данными */
.content table.plain, .content table.plain td, .content table.plain th {
  border: 0; background: none; padding: 2px 8px 2px 0;
}
.content table.plain tr:nth-child(even) td { background: none; }

/* Видеоролики: держат пропорцию 16:9 и сжимаются вместе с колонкой */
.content .video {
  position: relative;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 0 0 1.4em;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.content .video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

.content blockquote {
  margin: 0 0 1.2em; padding: 12px 18px;
  border-left: 3px solid var(--brand-dk); background: var(--tint);
}

/* Формы обратной связи со старых страниц */
.content input[type="text"], .content input[type="email"], .content input[type="tel"],
.content textarea, .content select {
  font: inherit; font-size: 14px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--ink); max-width: 100%;
}
.content textarea { width: 100%; min-height: 140px; }
.content input[type="submit"], .content button {
  font: inherit; font-weight: 700; font-size: 14px;
  padding: 9px 20px; border: 0; border-radius: 4px;
  background: linear-gradient(#1d84c8, var(--brand-dk)); color: #fff; cursor: pointer;
}
.content input[type="submit"]:hover, .content button:hover { background: var(--brand-dk); }

/* Заголовок страницы над содержимым */
.page-title {
  margin: 0 0 20px; padding-bottom: 12px;
  border-bottom: 3px solid var(--brand-dk);
  font-size: 25px; color: var(--brand-dk);
}

@media (max-width: 780px) {
  .content { font-size: 15px; }
  .content h1, .page-title { font-size: 20px; }
  .content h2 { font-size: 18px; }
}

/* Абзацы, которым в старой вёрстке назначили <h1>/<h2> ради крупного шрифта.
   Возвращаем им нормальный размер, выделение оставляем. */
.content p.was-heading {
  font-size: 1em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1em;
}

/* Разрыв на месте двойного <br> из старой вёрстки — вместо пустой строки
   аккуратный отступ абзаца. */
.content br.gap { display: block; content: ""; margin-top: .75em; }

/* Длина строки. Текст держим в комфортных ~80 знаках, а таблицы, картинки
   и видео пусть занимают всю ширину колонки. */
/* Ограничиваем колонку целиком, а не отдельные абзацы: иначе текст, лежащий
   в исходнике без <p>, тянулся бы на всю ширину и правый край гулял. */
.content { max-width: 900px; }



/* ---------- Правила для текста ----------
   Ссылки помечаем не только цветом, но и подчёркиванием: цвет один не
   различают дальтоники и он теряется на распечатке (WCAG 1.4.1).
   Подчёркивание тонкое и с отступом, чтобы не резать выносные элементы. */
.content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(21, 120, 162, .45);
}
.content a:hover { text-decoration-color: currentColor; }

/* Выравнивание только по левому краю: по ширине в вебе нет переносов,
   и между словами появляются «дыры». */
.content, .content p, .content li, .content td { text-align: left; }

/* Аккуратный перенос строк: браузер старается не оставлять одно слово
   в последней строке абзаца. */
.content p { text-wrap: pretty; }
.content h1, .content h2, .content h3, .content h4 { text-wrap: balance; }

/* Длинные адреса и формулы не должны распирать колонку */
.content { overflow-wrap: break-word; }

/* ---------- Блоки с командами и кнопкой «Скопировать» ----------
   Команда должна читаться однозначно: моноширинный шрифт, чтобы не путались
   похожие знаки, перенос по словам вместо горизонтальной прокрутки (иначе
   на телефоне длинную строку не увидеть целиком) и крупная кнопка копирования. */

.content .codeblock {
  position: relative;
  margin: 1.2em 0 1.6em;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  background: #F7F9FB;
}

.content .codeblock pre {
  margin: 0;
  padding: 16px 18px 18px;
  overflow: visible;
  background: none;
  border: 0;
}

.content .codeblock code {
  display: block;
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  font-size: 15px;
  line-height: 1.6;
  color: #1F3040;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-select: all;
  user-select: all;          /* один клик выделяет команду целиком */
}

.content .codeblock__copy {
  position: absolute;
  top: 8px; right: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--brand-dk);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.content .codeblock__copy:hover {
  background: var(--brand-dk);
  border-color: var(--brand-dk);
  color: #fff;
}
.content .codeblock__copy:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.content .codeblock__copy.is-done {
  background: #1F7A3D;
  border-color: #1F7A3D;
  color: #fff;
}

/* Кнопка не должна наезжать на команду */
.content .codeblock pre { padding-top: 46px; }

@media (max-width: 780px) {
  .content .codeblock code { font-size: 14px; }
  .content .codeblock__copy { font-size: 13px; padding: 6px 11px; }
}

/* Блок установки под «РЕД ОС» на /drivers.html. В исходнике он был выделен
   зелёной подложкой и пунктирной рамкой — оформление было в inline-стилях,
   которые конвертер снимает, поэтому задаём его здесь. */
.content #LINUX_LINKS {
  margin: 1.8em 0;
  padding: 20px 22px;
  border: 1px dashed #A9C7A0;
  border-radius: 8px;
  background: #F5FAF3;
}
.content #LINUX_LINKS > span:first-child { font-weight: 600; color: var(--brand-dk); }

/* ---------- Галерея: три и более картинки подряд ----------
   Одинаковый модуль и общий отступ вместо мозаики из разнокалиберных
   снимков. Кадрируем по центру — щелчок открывает снимок целиком. */
.content .esz-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin: 1.6em 0;
}
.content .esz-gallery a {
  display: block;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .15s;
}
.content .esz-gallery a:hover { box-shadow: 0 0 0 2px var(--brand); }
.content .esz-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 780px) {
  .content .esz-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}

/* Картинки с прозрачным фоном рамку не получают в принципе. */
.content .pic--plain { box-shadow: none; background: none; }

/* Несколько роликов подряд — в ряд, а не столбиком: три плеера по 720 px
   занимали полтора экрана. */
.content .esz-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 1.6em 0;
}
.content .esz-videos .video { max-width: none; margin: 0; }

@media (max-width: 780px) {
  .content .esz-videos { grid-template-columns: 1fr; }
}

/* Широкие таблицы данных — например, список представителей на contacts.html:
   8 колонок с адресами, почтой и сайтами не помещались в колонку. Уменьшаем
   набор, ужимаем отступы и разрешаем переносить длинные адреса. */
.content .table-scroll table { font-size: 13px; }
.content .table-scroll th, .content .table-scroll td {
  padding: 5px 8px;
  overflow-wrap: break-word;
  /* Разрешаем ломать слова в любом месте: без этого браузер держит ширину
     колонки по самому длинному слову, и 8 столбцов не влезают — телефон
     уезжает в прокрутку. Где браузер умеет русские переносы, hyphens
     поставит дефис по правилам. */
  word-break: break-word;
  hyphens: auto;
}

/* ---------- Контакты ----------
   Кнопки скачивания реквизитов — крупные, в фирменной рамке, их видно
   с первого взгляда. Список подразделений — с воздухом между пунктами. */
.content .esz-files { margin: 14px 0 6px; }
.content .esz-files a {
  display: block;
  max-width: 480px;
  margin: 10px auto;
  padding: 13px 20px;
  border: 2px solid var(--brand);
  border-radius: 8px;
  background: var(--tint);
  color: var(--brand-dp);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
}
.content .esz-files a::before { content: "⬇ "; }
.content .esz-files a:hover {
  background: var(--brand-dk);
  border-color: var(--brand-dk);
  color: #fff;
  text-decoration: none;
}

.content #TG_LINK { font-size: 17px; }
.content #TG_LINK a { font-weight: 700; }

.content #DEPT_LIST { list-style: none; padding-left: 0; max-width: 860px; }
.content #DEPT_LIST li {
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  background: #fff;
}