/* RU: Страница «OneMaps для бизнеса» /business (БП1.1, docs/BIZ-SUBSCRIPTION-PLAN-2026-09-29.md). Все правила — под классом
       страницы `.bl` или с префиксом `bl-`: файл подключает только public/business/index.html, и витрину с картой он задевать
       не должен. Цвета, кегли, отступы и радиусы — только токены --k-* из kartivi.css: ночная тема и палитры переключают их
       сами, а литерал цвета здесь запрещён храповиком (npm run check:theme). Кегли — пары токенов --k-fs-… и --k-lh-… шкалы ТГ1.
   EN: The "OneMaps for business" page /business (БП1.1). Every rule sits under the `.bl` page class or has the `bl-` prefix:
       only public/business/index.html loads this file, and it must not touch the map storefront. Colours, sizes, spacing and
       radii are --k-* tokens from kartivi.css only: the night theme and palettes switch them themselves, and a colour literal
       here is forbidden by the ratchet (npm run check:theme). Font sizes are pairs of --k-fs-… and --k-lh-… tokens of the ТГ1 scale. */

/* RU: Фон страницы — свой у каждой страницы без карты (kartivi.css, раздел 9), здесь ровный фон сайта. Токены страницы —
       по правилам П4/П5 (docs/UI-RULES.md): радиусы только 8 (мелкие) и 12 (панели и поля) — в kartivi.css таких нет
       (6/10/14/20), поэтому они заданы здесь, как у .meetings; высота кнопок 40, а для пальца (pointer: coarse) — 44.
   EN: The page background is each map-less page's own (kartivi.css, section 9); here it is the site's flat ground. Page
       tokens follow rules П4/П5: radii only 8 (small) and 12 (panels and fields) — kartivi.css has none of these
       (6/10/14/20), so they are set here, as .meetings does; button height is 40, and 44 for a finger (pointer: coarse). */
.bl {
  --bl-r-s: 8px;
  --bl-r-m: 12px;
  --bl-h-ctl: 40px;
  background: var(--k-bg);
}
@media (pointer: coarse) {
  .bl {
    --bl-h-ctl: 44px;
  }
}

/* RU: Колонка содержимого. Боковое поле 16 px на телефоне и перенос длинных слов — чтобы на 320 px не было горизонтальной
       прокрутки (приёмка БП1) даже от длинного названия организации в результатах поиска.
   EN: The content column. A 16 px side gutter on a phone and long-word wrapping — so 320 px has no horizontal scroll
       (БП1 acceptance) even from a long organisation name in the search results. */
.bl-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--k-s-5) var(--k-s-4) var(--k-s-8);
  overflow-wrap: anywhere;
}

/* RU: Ссылки в тексте — цветом бренда для текста (--k-brand-ink держит контраст на светлом и тёмном фоне); кнопки .k-btn
       красятся сами.
   EN: Links in text use the brand text colour (--k-brand-ink keeps contrast on light and dark grounds); .k-btn buttons
       colour themselves. */
.bl-main a:not(.k-btn),
.bl-hint a {
  color: var(--k-brand-ink);
}

/* RU: Первый экран: надзаголовок, заголовок знаком бренда (Unbounded — только от 20 px, правило ТГ3) и подводка.
   EN: The first screen: the eyebrow, the heading in the brand face (Unbounded only from 20 px, rule ТГ3) and the lead. */
.bl-hero {
  padding: var(--k-s-4) 0 var(--k-s-2);
}
.bl-eyebrow {
  margin: 0 0 var(--k-s-2);
  color: var(--k-brand-ink);
  font-size: var(--k-fs-sm);
  line-height: var(--k-lh-sm);
  font-weight: 600;
}
.bl h1 {
  max-width: 24ch;
  margin: 0 0 var(--k-s-3);
  font-family: var(--k-font-brand);
  font-size: var(--k-fs-head);
  line-height: var(--k-lh-head);
  font-weight: 600;
}
/* RU: Цена в заголовке не рвётся между числом и «₽». EN: The price in the heading never wraps between the number and "₽". */
.bl-nowrap {
  white-space: nowrap;
}
/* RU: Подводка — 16/22, а не 15/22: на экране не больше шести кеглей (П1), и 16 уже занят подписями и полем поиска.
   EN: The lead is 16/22 rather than 15/22: a screen has at most six sizes (П1), and 16 is already used by labels and the
       search field. */
.bl-lead {
  max-width: 62ch;
  margin: 0 0 var(--k-s-5);
  color: var(--k-text-muted);
  font-size: var(--k-fs-title-s);
  line-height: var(--k-lh-title-s);
}

/* RU: На широком экране — только больше воздуха сверху. Заголовок остаётся 24/30 и там: 32 px нет в шкале П1 (верх — 24/30).
   EN: On a wide screen — only more air on top. The heading stays 24/30 there too: 32 px is not on the П1 scale (the top is
       24/30). */
@media (min-width: 720px) {
  .bl-main {
    padding-top: var(--k-s-7);
  }
}

/* RU: Поиск своей организации — карточкой на поверхности, чтобы с первого экрана было видно главное действие страницы.
   EN: The own-organisation search sits on a surface card, so the page's main action is visible on the first screen. */
.bl-search {
  display: grid;
  gap: var(--k-s-2);
  max-width: 680px;
  padding: var(--k-s-4);
  border: 1px solid var(--k-border);
  border-radius: var(--bl-r-m);
  background: var(--k-surface);
  box-shadow: var(--k-shadow-1);
}
.bl-search-label {
  font-size: var(--k-fs-title-s);
  line-height: var(--k-lh-title-s);
  font-weight: 600;
}
.bl-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-s-2);
}
/* RU: 16 px в поле ввода — меньший кегль заставляет Safari на iPhone увеличивать страницу при фокусе.
   EN: 16 px in the input — a smaller size makes iPhone Safari zoom the page on focus. */
.bl-search-row input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: var(--k-tap-min);
  padding: 0 var(--k-s-3);
  border: 1px solid var(--k-border-strong);
  border-radius: var(--bl-r-s);
  background: var(--k-surface);
  color: var(--k-text);
  font: inherit;
  font-size: var(--k-fs-title-s);
  line-height: var(--k-lh-title-s);
}
.bl-search-row input::placeholder {
  color: var(--k-text-subtle);
}
/* RU: Пустая строка состояния не занимает места: сообщение появляется только после поиска.
   EN: An empty status line takes no space: the message appears only after a search. */
.bl-search-msg {
  margin: 0;
  color: var(--k-text-muted);
}
.bl-search-msg:empty {
  display: none;
}
.bl-results {
  display: grid;
  gap: var(--k-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bl-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-s-2) var(--k-s-3);
  padding: var(--k-s-3);
  border: 1px solid var(--k-border-soft);
  border-radius: var(--bl-r-s);
  background: var(--k-surface-2);
}
.bl-result-text {
  display: grid;
  gap: var(--k-s-1);
  flex: 1 1 200px;
  min-width: 0;
}
/* RU: <b> по умолчанию — «bolder», то есть 700; явный 600 держит три начертания на экране (П1).
   EN: <b> defaults to "bolder", i.e. 700; an explicit 600 keeps three weights on the screen (П1). */
.bl-result-name {
  font-weight: 600;
}
.bl-result-addr,
.bl-result-note {
  color: var(--k-text-muted);
  font-size: var(--k-fs-sm);
  line-height: var(--k-lh-sm);
}
.bl-hint {
  margin: var(--k-s-3) 0 0;
  color: var(--k-text-muted);
}

/* RU: Разделы страницы: заголовок второго уровня и подпись под ним.
   EN: Page sections: the second-level heading and the caption under it. */
.bl-section {
  margin-top: var(--k-s-8);
}
.bl-section h2 {
  margin: 0 0 var(--k-s-3);
  font-size: var(--k-fs-title);
  line-height: var(--k-lh-title);
  font-weight: 600;
}
.bl-sub {
  margin: 0 0 var(--k-s-4);
  color: var(--k-text-muted);
}

/* RU: Сетка карточек-обещаний. min(100 %, 240 px) — чтобы на экране уже 240 px колонка сжималась, а не вылезала за край.
   EN: The promise card grid. min(100%, 240px) — so on a screen narrower than 240 px the column shrinks instead of overflowing. */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--k-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bl-card {
  padding: var(--k-s-4);
  border: 1px solid var(--k-border);
  border-radius: var(--bl-r-m);
  background: var(--k-surface);
}
.bl-card h3 {
  margin: 0 0 var(--k-s-2);
  font-size: var(--k-fs-title-s);
  line-height: var(--k-lh-title-s);
  font-weight: 600;
}
.bl-card p {
  margin: 0;
  color: var(--k-text-muted);
}

/* RU: Список «Бесплатно навсегда»: на широком экране — в две колонки, чтобы восемь коротких строк не тянулись столбиком.
   EN: The "Free forever" list: two columns on a wide screen, so eight short lines do not trail down in one column. */
.bl-list {
  display: grid;
  gap: var(--k-s-2);
  margin: 0;
  padding-left: var(--k-s-5);
}
.bl-list li::marker {
  color: var(--k-brand);
}
@media (min-width: 720px) {
  .bl-list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--k-s-7);
  }
}

/* RU: Калькулятор: строка-флажок во всю ширину и не ниже 44 px — в неё легко попасть пальцем; цена справа не переносится.
   EN: The calculator: a full-width checkbox row no lower than 44 px — easy to hit with a finger; the price on the right never
       wraps. */
.bl-calc {
  display: grid;
  gap: var(--k-s-4);
  max-width: 720px;
}
.bl-calc-set {
  display: grid;
  gap: var(--k-s-2);
  margin: 0;
  padding: 0;
  border: 0;
}
.bl-check {
  display: flex;
  align-items: center;
  gap: var(--k-s-3);
  min-height: var(--k-tap-min);
  padding: var(--k-s-2) var(--k-s-3);
  border: 1px solid var(--k-border);
  border-radius: var(--bl-r-s);
  background: var(--k-surface);
  cursor: pointer;
}
.bl-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--k-brand);
}
.bl-check-text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}
.bl-check-text small {
  color: var(--k-text-muted);
  font-size: var(--k-fs-sm);
  line-height: var(--k-lh-sm);
}
.bl-check-price {
  flex: none;
  white-space: nowrap;
  font-weight: 600;
}
/* RU: Отмеченная строка подсвечена — видно, что попало в сумму, без чтения флажков по одному.
   EN: A ticked row is highlighted — what went into the sum is visible without reading the boxes one by one. */
.bl-check:has(input:checked) {
  border-color: var(--k-brand);
  background: var(--k-brand-soft);
}
.bl-calc-out {
  display: grid;
  gap: var(--k-s-1);
  padding: var(--k-s-4);
  border-radius: var(--bl-r-m);
  background: var(--k-surface-2);
}
.bl-calc-out span:empty,
.bl-calc-out strong:empty {
  display: none;
}
.bl-calc-out strong {
  color: var(--k-brand-ink);
  font-size: var(--k-fs-title-s);
  line-height: var(--k-lh-title-s);
  font-weight: 600;
}

/* RU: Таблицы сравнения. Столбец OneMaps — последний и выделен цветом, чтобы глаз сравнивал строку с ним.
   EN: The comparison tables. The OneMaps column is the last one and coloured, so the eye compares each row against it. */
.bl-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--k-border);
  background: var(--k-surface);
}
.bl-table caption {
  caption-side: bottom;
  padding-top: var(--k-s-2);
  color: var(--k-text-muted);
  font-size: var(--k-fs-sm);
  line-height: var(--k-lh-sm);
  text-align: left;
}
.bl-table th,
.bl-table td {
  padding: var(--k-s-2) var(--k-s-3);
  border-bottom: 1px solid var(--k-border-soft);
  text-align: left;
  vertical-align: top;
}
.bl-table thead th {
  background: var(--k-surface-2);
  font-weight: 600;
}
.bl-table tbody th {
  font-weight: 500;
}
.bl-table td:last-child {
  color: var(--k-brand-ink);
  font-weight: 600;
}

/* RU: На узком экране таблица из четырёх столбцов не помещается — строки становятся карточками, а подпись столбца
       (data-label) встаёт над значением. Прокрутка вбок внутри таблицы на телефоне хуже: сравнение прячется за край.
   EN: On a narrow screen a four-column table does not fit — rows turn into cards, and the column label (data-label) stands
       above the value. Sideways scrolling inside the table is worse on a phone: the comparison hides past the edge. */
@media (max-width: 640px) {
  .bl-table,
  .bl-table tbody,
  .bl-table tr,
  .bl-table th,
  .bl-table td {
    display: block;
  }
  .bl-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .bl-table tr {
    padding: var(--k-s-3);
    border-bottom: 1px solid var(--k-border);
  }
  .bl-table th,
  .bl-table td {
    padding: 0;
    border: 0;
  }
  .bl-table tbody th {
    margin-bottom: var(--k-s-2);
    font-weight: 600;
  }
  .bl-table td + td {
    margin-top: var(--k-s-2);
  }
  .bl-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--k-text-muted);
    font-size: var(--k-fs-sm);
    line-height: var(--k-lh-sm);
    font-weight: 400;
  }
  /* RU: Подпись таблицы — тоже блоком: иначе она остаётся table-caption в безымянной обёртке, сжимается до ширины одной
         буквы (перенос длинных слов разрешён) и встаёт столбиком.
     EN: The caption becomes a block too: otherwise it stays a table-caption in an anonymous wrapper, shrinks to one letter's
         width (long-word wrapping is allowed) and stands in a column. */
  .bl-table caption {
    display: block;
    padding: var(--k-s-2) var(--k-s-3);
  }
}

/* RU: Переключатель месяц/год — два переключателя-«таблетки» поверх настоящих radio: клавиатура и читалка экрана работают
       с radio как обычно, а выбранный вариант виден заливкой. `[hidden]` задан явно: display: inline-flex иначе перебил бы
       атрибут hidden, и переключатель без JavaScript остался бы виден (память проекта «hidden проигрывает display: flex»).
   EN: The month/year switch — two pill toggles over real radios: the keyboard and screen readers work with radios as usual,
       and the chosen option shows by its fill. `[hidden]` is set explicitly: display: inline-flex would otherwise override
       the hidden attribute, and the switch would stay visible without JavaScript (project note "hidden loses to display: flex"). */
.bl-billing {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--k-s-1);
  margin: 0 0 var(--k-s-4);
  padding: var(--k-s-1);
  border: 1px solid var(--k-border);
  border-radius: var(--bl-r-m);
  background: var(--k-surface);
}
.bl-billing[hidden] {
  display: none;
}
.bl-billing-opt {
  position: relative;
  display: inline-flex;
}
.bl-billing-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bl-billing-opt span {
  display: inline-flex;
  align-items: center;
  min-height: var(--bl-h-ctl);
  padding: 0 var(--k-s-4);
  border-radius: var(--bl-r-s);
  color: var(--k-text);
  font-weight: 500;
}
.bl-billing-opt input:checked + span {
  background: var(--k-brand);
  color: var(--k-text-on-accent);
}
.bl-billing-opt input:focus-visible + span {
  box-shadow: var(--k-focus);
}

/* RU: Карточки тарифов: кнопка прижата к низу, чтобы три кнопки стояли в ряд при разной длине списков; «Бизнес» — с рамкой
       бренда как рекомендуемый.
   EN: Plan cards: the button is pinned to the bottom so the three buttons line up whatever the list lengths; "Business" has
       the brand frame as the recommended one. */
.bl-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--k-s-3);
}
.bl-plan {
  display: flex;
  flex-direction: column;
  gap: var(--k-s-2);
  padding: var(--k-s-5);
  border: 1px solid var(--k-border);
  border-radius: var(--bl-r-m);
  background: var(--k-surface);
}
.bl-plan.is-featured {
  border-color: var(--k-brand);
  box-shadow: 0 0 0 1px var(--k-brand);
}
.bl-plan h3 {
  margin: 0;
  font-size: var(--k-fs-title);
  line-height: var(--k-lh-title);
  font-weight: 600;
}
.bl-plan-price {
  margin: 0;
  color: var(--k-text-muted);
}
/* RU: Цена — 600, а не 700: 700 правило П1 оставляет только знаку бренда. EN: The price is 600, not 700: rule П1 keeps 700
       for the brand mark only. */
.bl-plan-price b {
  color: var(--k-text);
  font-size: var(--k-fs-head);
  line-height: var(--k-lh-head);
  font-weight: 600;
  white-space: nowrap;
}
.bl-plan-tag {
  margin: 0;
}
.bl-plan-note {
  margin: 0;
  color: var(--k-brand-ink);
  font-size: var(--k-fs-sm);
  line-height: var(--k-lh-sm);
}
.bl-plan-items {
  display: grid;
  flex: 1 1 auto;
  gap: var(--k-s-1);
  margin: var(--k-s-1) 0 0;
  padding-left: var(--k-s-5);
}
.bl-plan .k-btn {
  margin-top: auto;
}
.bl-trial {
  margin: var(--k-s-3) 0 0;
  color: var(--k-brand-ink);
  font-weight: 600;
}

/* RU: Раскрывающиеся блоки (подробное сравнение, вопросы): строка заголовка не ниже 44 px за счёт полей, а не display: flex —
       иначе Chrome убирает треугольник раскрытия у summary.
   EN: Disclosure blocks (detailed comparison, questions): the summary row is at least 44 px through padding rather than
       display: flex — otherwise Chrome drops the summary's disclosure triangle. */
.bl-more {
  margin-top: var(--k-s-4);
}
.bl-more > summary,
.bl-faq summary {
  padding: var(--k-s-3) 0;
  font-weight: 600;
  cursor: pointer;
}
.bl-faq {
  display: grid;
  gap: var(--k-s-2);
  max-width: 760px;
}
.bl-faq details {
  padding: 0 var(--k-s-4);
  border: 1px solid var(--k-border);
  border-radius: var(--bl-r-s);
  background: var(--k-surface);
}
.bl-faq p {
  margin: 0 0 var(--k-s-3);
  color: var(--k-text-muted);
}

/* RU: Честный блок — полоса бренда слева: он должен читаться как главное предупреждение страницы, а не как реклама.
   EN: The honesty block — a brand stripe on the left: it must read as the page's main caveat, not as an advert. */
.bl-honest {
  padding: var(--k-s-5);
  border-left: 4px solid var(--k-brand);
  border-radius: var(--bl-r-m);
  background: var(--k-surface-2);
}
.bl-honest-text {
  margin: 0 0 var(--k-s-2);
  font-size: var(--k-fs-title-s);
  line-height: var(--k-lh-title-s);
  font-weight: 600;
}
.bl-honest p:last-child {
  margin: 0;
  color: var(--k-text-muted);
}

/* RU: Подвал: документы и вход в кабинет; ссылки высотой кнопки (40, для пальца 44) — в них попадают пальцем.
   EN: The footer: documents and the cabinet entry; links as tall as a button (40, 44 for a finger) — they are hit with a
       finger. */
.bl-foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--k-s-4) var(--k-s-4) var(--k-s-7);
  border-top: 1px solid var(--k-border);
}
.bl-foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--k-s-5);
}
.bl-foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bl-h-ctl);
  color: var(--k-text-muted);
}