/* ═══ ЖИВЫЕ ДЕМО ════════════════════════════════════════════════════
   Общая рамка на все три: плита корпуса, как у прибора в первом экране.
   Демо должно выглядеть частью продукта, а не вставленным виджетом. */
.demo {
  margin: 28px 0 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--hull-hi) 0%, var(--hull) 70%);
  padding: 18px;
  max-width: 1100px;
  overflow-x: auto;
}

/* ── Мини-доска ────────────────────────────────────────────────────── */
.db-bar-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.db-tab {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute);
}
.db-switch {
  margin-left: auto; appearance: none; cursor: pointer;
  border: 1px solid var(--brass-dim); background: transparent; color: var(--paper);
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px;
}
.db-switch.on { background: var(--brass); color: var(--on-brass); border-color: var(--brass); font-weight: 700; }

.db-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(210px, .8fr); gap: 16px; }
.db-table { min-width: 420px; }
.db-row {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, 92px) 88px;
  align-items: center; gap: 6px; padding: 9px 0; border-top: 1px solid var(--line);
}
.db-head {
  border-top: 0; padding-top: 0;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mute);
}
.db-head i { font-style: normal; opacity: .6; }
.db-name { font-size: 14.5px; color: var(--paper); }
.db-cell { display: flex; align-items: center; gap: 5px; justify-content: center; }
.db-cell b { font-family: var(--mono); font-size: 14px; min-width: 26px; text-align: center; }
.db-step {
  appearance: none; cursor: pointer; width: 22px; height: 22px; line-height: 1;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--well); color: var(--brass); font-size: 13px;
}
.db-step:hover { border-color: var(--brass-dim); background: var(--well-hi); }
.db-cost { font-family: var(--mono); font-size: 13.5px; color: var(--brass); text-align: right; }

.db-side { display: flex; flex-direction: column; gap: 10px; }
.db-p { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
/* Красным — только тот, кто за чертой. Тревога на всей команде из-за
   одного перегруженного приучает не смотреть на цвет. */
.db-p.over { border-color: var(--over); background: var(--over-wash); }
.db-p-top { display: flex; justify-content: space-between; font-size: 13px; }
.db-p-top i { font-style: normal; font-family: var(--mono); color: var(--mute); }
.db-p.over .db-p-top i { color: var(--over-hi); }
.db-bar { display: block; height: 5px; background: var(--well); border-radius: 3px; margin: 7px 0 5px; overflow: hidden; }
.db-bar i { display: block; height: 100%; background: var(--water-hi); transition: width .35s ease; }
.db-p.over .db-bar i { background: var(--over-hi); }
.db-p-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.db-sum { margin-top: auto; border-top: 2px solid var(--brass-dim); padding-top: 12px; }
.db-sum-lab, .db-sum-sub {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute);
}
.db-sum b { display: block; font-family: var(--mono); font-size: 24px; color: var(--brass); margin: 3px 0; }
.db-hint { margin: 14px 0 0; color: var(--mute); font-size: 13px; }

/* ── Двусторонняя Jira ─────────────────────────────────────────────── */
.ds-wrap { display: grid; grid-template-columns: 1fr 54px 1fr; gap: 10px; align-items: start; }
.ds-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.ds-card h4 {
  margin: 0 0 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brass);
}
.ds-f { display: block; margin-bottom: 11px; }
.ds-f > span {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 4px;
}
.ds-f input, .ds-f select {
  width: 100%; background: var(--well); color: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; font: 13px/1.3 var(--sans);
}
/* Селектор с «span» не для красоты: выше стоит «.ds-f > span» с
   display:block, он выигрывал по специфичности, и подписи QA/FE/BE
   слипались в одну строку без просветов — так и было на телефоне
   владельца. */
.ds-f > span.ds-split, .ds-split { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; }
.ds-split i { font-style: normal; color: var(--mute); }
.ds-split b { color: var(--brass); }
.ds-fine { margin: 12px 0 0; font-size: 12px; color: var(--mute); }
.ds-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 34px; }
/* Стрелка — единственная анимация здесь, и она означает ровно одно:
   значение поехало на ту сторону. */
.ds-arrow { font-size: 22px; color: var(--line); transition: color .2s, transform .3s; }
.ds-arrow.go { color: var(--brass); transform: translateX(6px) scale(1.25); }
.ds-arrow.back.go { transform: translateX(-6px) scale(1.25); }
.ds-jira { background: var(--water-wash); }
.ds-j { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 9px; font-size: 13px; }
.ds-j span { color: var(--mute); }
.ds-j b { font-family: var(--mono); }
.ds-note { margin: 14px 0 0; color: var(--ink2); font-size: 13.5px; min-height: 2.6em; }

/* ── Выгода ────────────────────────────────────────────────────────── */
.roi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); gap: 20px; }
.roi-f { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-bottom: 16px; align-items: center; }
.roi-f > span {
  grid-column: 1 / -1; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute);
}
.roi-f input { width: 100%; accent-color: var(--brass); }
.roi-f b { font-family: var(--mono); font-size: 14px; color: var(--brass); min-width: 54px; text-align: right; }
.roi-out { border-left: 2px solid var(--brass-dim); padding-left: 18px; }
.roi-lab { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.roi-num { display: block; font-family: var(--mono); font-size: clamp(24px, 3vw, 32px); color: var(--brass); margin: 3px 0 2px; }
.roi-good { color: var(--water-hi); }
.roi-sub { display: block; font-size: 12.5px; color: var(--mute); }
.roi-line { display: block; height: 1px; background: var(--line); margin: 16px 0; }
.roi-note { margin: 16px 0 0; color: var(--ink2); font-size: 13.5px; }

.top-nav a.on { color: var(--brass); }
.feat h3 a { color: var(--brass); text-decoration: none; }
.feat h3 a:hover { border-bottom: 1px solid var(--brass-dim); }

@media (max-width: 860px) {
  .db-grid, .ds-wrap, .roi-grid { grid-template-columns: 1fr; }
  .ds-mid { flex-direction: row; padding: 4px 0; }
  .roi-out { border-left: 0; border-top: 2px solid var(--brass-dim); padding: 16px 0 0; }
}

/* ── Страница «Watch» ────────────────────────────────────────────────
   Ролики вертикальные (4:5), поэтому в ряд их идёт два, а не три: третий
   на широком экране сжимался до неразборчивых подписей внутри кадра.
   Плеер родной, без чужого: встроенный YouTube тянет трекеры на страницу,
   где мы обещаем не следить, и ломает нашу же CSP. */
.films {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 34px 28px;
  max-width: 1100px;
  margin-top: 30px;
}
.film { margin: 0; }
.film video {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--pit);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: block;
}
.film figcaption { padding: 16px 2px 0; }
.film-no {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--brass-dim);
}
.film h2 {
  margin: 6px 0 8px;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 90, 'wght' 740;
  font-size: 22px; letter-spacing: -.02em; color: var(--paper);
}
.film figcaption p { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.5; }

/* ── Шапка на телефоне ──────────────────────────────────────────────
   Блок стоит В КОНЦЕ файла сознательно: правила переключателя темы и
   кнопок объявлены ниже первого мобильного блока, и при равной
   специфичности перебивали его — шапка выглядела нетронутой. Каскад
   решает порядок, и порядок здесь и есть исправление.

   Сама шапка закреплена, значит каждая её строка — отобранный у страницы
   экран: держим две. Первая — знак, две точки темы и кнопка; у
   переключателя остаются только цветные точки, слова Dark и Women in
   Tech на палец не нужны, выбор виден по точкам. Вторая — навигация,
   скроллится пальцем. */
@media (max-width: 560px) {
  .top { padding-top: 10px; padding-bottom: 10px; row-gap: 8px; gap: 10px; }
  .brand { font-size: 17px; }
  .brand svg { width: 22px; height: 22px; }
  .thm { margin-left: auto; }
  /* На узком экране в шапке остаётся ОДНА точка цвета: подпись выбранной
     темы съедала строку, а список её всё равно называет словом. */
  .thm-head { padding: 7px; gap: 0; }
  .thm-head [data-thm-name], .thm-caret { display: none; }
  .thm-dot { width: 10px; height: 10px; }
  .thm-list { min-width: 0; }
  .thm-o { font-size: 9px; padding: 8px 9px; }
  .btn { padding: 9px 13px; font-size: 10.5px; }
  .top .btn { margin-left: 0; }
  .btn-lg { padding: 13px 18px; font-size: 11.5px; }
}

/* Совсем узко (старые и маленькие телефоны): шапке хватает двух строк,
   только если знак, точки и кнопка ужаты ещё на шаг. */
@media (max-width: 380px) {
  .top { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .brand { font-size: 15px; gap: 6px; }
  .brand svg { width: 19px; height: 19px; }
  .thm-head { padding: 6px; }
  .thm-dot { width: 9px; height: 9px; }
  .top .btn { padding: 8px 10px; font-size: 9.5px; letter-spacing: .03em; }
}

/* Разбивка налога под ценой. Итог МЕЛЬЧЕ самой цены — решение
   владельца: крупным остаётся то, что он продаёт, а налог виден, но не
   спорит с ценой за внимание. */
.pr-tax{display:flex;flex-direction:column;gap:1px;margin:2px 0 10px;
  font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--mute)}
.pr-tax .pr-tax-add{color:var(--brass-dim)}
.pr-tax b{font-size:12px;color:var(--paper);font-variation-settings:'wdth' 100,'wght' 600}
@media (max-width:760px){
  .pr-tax{font-size:9.5px;margin-bottom:8px}
  .pr-tax b{font-size:10px}
}

/* ── ВЫБОР РАЗМЕРА ПАКЕТА ───────────────────────────────────────────
   Пакеты отличаются только числом людей, поэтому карточка одна, а размер
   выбирают здесь — ПЛИТКАМИ, а не выпадающим списком.

   Список прятал пять пакетов из шести за щелчком, и владелец сказал
   ровно это: «интуитивно непонятно, как выбрать своё количество
   человек». Плитка несёт две цифры — сколько людей и сколько денег, —
   поэтому шесть плиток и есть прайс целиком, видимый одним взглядом.

   Три в ряд: карточка занимает треть витрины (~310px внутри отступов),
   и «€2 900» моноширинным в 10.5px укладывается в ячейку 97px. */
.pr-sizes { margin: 12px 0 8px; }
.pr-sizes-q { margin: 0 0 7px; font-size: 12px; color: var(--mute); letter-spacing: .02em; }
.pr-size-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.pr-size {
  appearance: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 7px 3px;
  background: var(--film-lo);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--paper);
  transition: border-color .12s ease, background .12s ease;
}
/* Имя пакета — тише всего: выбирают по числу людей и по цене, имя лишь
   называет выбранное. На узком экране его нет вовсе. */
.pr-size em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--idle);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-size.on em { color: var(--brass-dim); }
.pr-size b {
  font-family: var(--mono);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 13px;
  line-height: 1;
}
/* Цена на плитке — приглушённая: крупное число над списком остаётся
   единственной «ценой», а здесь это подпись к выбору. Выбранная
   загорается латунью, и тогда две цифры совпадают. */
.pr-size i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
  color: var(--mute);
  white-space: nowrap;
}
.pr-size:hover { border-color: var(--brass-dim); }
.pr-size:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.pr-size.on { border-color: var(--brass); background: var(--brass-wash); }
.pr-size.on i { color: var(--brass); }

/* На телефоне карточка сжата до колонки шириной в палец: три плитки в
   ряд стали бы по 28px, и цена в них не помещается. Поэтому одна
   колонка, а плитка разворачивается в строку — люди слева, деньги
   справа, как в прайсе. */
@media (max-width: 760px) {
  .pr-sizes { margin: 8px 0 6px; }
  .pr-sizes-q { font-size: 9.5px; margin-bottom: 5px; line-height: 1.3; }
  .pr-size-row { grid-template-columns: 1fr; gap: 4px; }
  .pr-size {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
    padding: 6px 6px;
    border-radius: 7px;
  }
  .pr-size em { display: none; }
  .pr-size b { font-size: 10.5px; }
  .pr-size i { font-size: 9px; }
}

/* Строка про пробный период — под кнопкой оплаты. Тише кнопки и тише
   цены: это условие сделки, а не предложение. */
.pr-trialnote{margin:8px 2px 0;font-size:11.5px;line-height:1.4;color:var(--mute)}
@media (max-width:760px){ .pr-trialnote{font-size:9px;line-height:1.35} }