/* ════ /sellers по брендбуку ODA.PRO 2026-10 — вариант 1 «Бережно», выбран владельцем 07.10.2026 (сравнение трёх — handoff 2026-10-07-100000) ════
   Только токены поверх theme.css, разметка не меняется. Что приводится к брендбуку:
   · шрифт Manrope (слайд «Шрифт»; лежит у нас, OFL — без запроса к Google);
   · программа «Трафик» — бирюза: зелёный — цвет группы «ОДА», ODA.PRO в него не перекрашиваем (слайд «Запреты»);
   · «Штурман» — тёмно-синий текста #142D3D вместо фиолетового: фиолетового в палитре нет;
   · метки разделов — моно с оранжевым квадратом (слайд «Шрифт и графика · Метка»). */
@font-face { font-family: "Manrope"; src: url("manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
:root { --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --font-head: var(--font-body); }
body { font-feature-settings: "tnum" 0; }

.shero { --sh-b: #13777A; --sh-c: #142D3D; }
.stf { --stf: #13777A; --stf-tint: #E5F3F2; }
.sht { --sht: #142D3D; --sht-tint: #EDF1F3; }
.prog--traffic { --prog: #13777A; --prog-tint: #E5F3F2; }
.prog--analytics { --prog: #142D3D; --prog-tint: #EDF1F3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shero { --sh-b: #5FD3D4; --sh-c: #E6EFF4; }
  :root:not([data-theme="light"]) .stf { --stf: #5FD3D4; --stf-tint: #13302F; }
  :root:not([data-theme="light"]) .sht { --sht: #E6EFF4; --sht-tint: #14232D; }
  :root:not([data-theme="light"]) .prog--traffic { --prog: #5FD3D4; --prog-tint: #13302F; }
  :root:not([data-theme="light"]) .prog--analytics { --prog: #E6EFF4; --prog-tint: #14232D; }
}
:root[data-theme="dark"] .shero { --sh-b: #5FD3D4; --sh-c: #E6EFF4; }
:root[data-theme="dark"] .stf { --stf: #5FD3D4; --stf-tint: #13302F; }
:root[data-theme="dark"] .sht { --sht: #E6EFF4; --sht-tint: #14232D; }
:root[data-theme="dark"] .prog--traffic { --prog: #5FD3D4; --prog-tint: #13302F; }
:root[data-theme="dark"] .prog--analytics { --prog: #E6EFF4; --prog-tint: #14232D; }

/* метка раздела: квадрат всегда оранжевый, текст — цвет программы */
.bb__kicker::before, .stf__for::before, .sht__kicker::before { background: #F15A24; }
.bbp__kick::before { width: 14px; height: 14px; background: #F15A24; }

/* Manrope шире Segoe UI: прежний трекинг −0,055/−0,035 em слеплял буквы заголовков */
.hero__title { letter-spacing: -.03em; }
.section__title, .prog__name, .shero__q { letter-spacing: -.02em; }

/* Вариант 1 «Бережно» (выбран владельцем 07.10.2026): кнопки и тени строго по слайду «Сайт: компоненты».
   Вёрстка и порядок те же; меняются шрифт, цвета программ, кнопки и плоская тень. */
.btn { border-radius: 6px; min-height: 48px; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.btn.btn--primary { font-weight: 600; box-shadow: none; }
.btn.btn--primary:hover { box-shadow: none; }
/* плоская тень #D7E2E9 со сдвигом 12 px — фирменный приём карточек v7 */
.shero__door, .shero__sub, .bb__form, .bb__fit { box-shadow: 12px 12px 0 var(--shadow-flat); }

/* 16.10.2026: на /sellers одна программа — карточка во всю ширину колонки; трафик и «Штурман» — строкой-сноской */
@media (min-width: 700px) { .shero__doors--one { grid-template-columns: 1fr; } }
.shero__also .shero__sub-t a { color: var(--sh-c); font-weight: 600; }
/* «Для продавцов также есть» — короткие карточки со ссылками на страницы сервисов */
.smore__title { margin: 0 0 16px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; }
.smore__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .smore__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.smore__a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 22px; color: var(--fg); text-decoration: none; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--accent); }
.smore__a b { font-size: 18px; }
.smore__a span { color: var(--muted); font-size: 15px; }
.smore__a .smore__cta { margin-top: auto; padding-top: 4px; color: var(--accent); font-weight: 600; }
.smore__a:hover b, .smore__a:focus-visible b { color: var(--accent); }
.scrumbs { margin: 0 0 14px; }