/* Шрифти Inter і Inter Tight (SIL Open Font License) — самохостинг, без запитів до Google (26.09).
 * Файли: site/fonts/*.woff2, змінна вага; підмножини cyrillic, cyrillic-ext, latin, latin-ext.
 * Згенеровано скриптом зі стилю Google Fonts; вручну не правити. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/fonts/inter-tight-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/fonts/inter-tight-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/fonts/inter-tight-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/fonts/inter-tight-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Розкладка сайту krokul.com — пачки 1–16 виконавця (site/дизайн/site.css) без блоку @font-face
 * (шрифти — сусідній шрифти.css, змінна вага, свої підмножини). Перенесено в генератор 26.09;
 * джерело істини для класів-ролей — README пачки. Нижче, після розмітки виконавця, —
 * три службові класи генератора (примітка й посилання під секцією, тіло текстової секції).
 * Хто править вигляд (Р108): дрібні правки наявного шаблону — ми, з рядком у CHANGELOG; нова сторінка чи
 * перекомпонування — замовлення виконавцю. */
:root {
  --ba-surface: #FFFFFF;
  --ba-canvas: #ECEFF3;
  --ba-surface-sunken: #EDF1F5;
  --ba-line: #D6DCE4;
  --ba-line-soft: #E5E9EE;
  --ba-line-strong: #A3AEBC;
  --ba-ink: #0F1724;
  --ba-ink-2: #374152;
  --ba-ink-3: #5B6676;
  --ba-on-accent: #FFFFFF;
  --ba-accent: #2C5C95;
  --ba-accent-strong: #1F4677;
  --ba-accent-press: #17355B;
  --ba-accent-soft: #DBE7F5;
  --ba-accent-soft-2: #C3D8EF;
  --ba-fill-hover: #F3F5F8;
  --ba-fill-selected: var(--ba-accent-soft);
  --ba-ok: #027F58;
  --ba-warn: #AA5C03;
  --ba-danger: #D41A1E;
  --ba-danger-soft: #FBE9E7;
  --ba-danger-line: #E0BFBC;
  --ba-ok-soft: #E7F6EF;
  --ba-ok-line: #B6D2C5;
  --ba-warn-soft: #FEF3E2;
  --ba-warn-line: #DECAAA;
  --ba-info: #197091;
  --ba-info-soft: #E4F1F6;
  --ba-info-line: #B4CCD5;
  --ba-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ba-font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --ba-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --ba-fw-normal: 400;
  --ba-fw-medium: 500;
  --ba-fw-semi: 600;
  --ba-ls-tight: -.02em;
  --ba-ls-wide: .05em;
  --ba-lh-tight: 1.2;
  --ba-lh-base: 1.5;
  --ba-num: tabular-nums;
  --ba-sp-4: 4px;
  --ba-sp-8: 8px;
  --ba-sp-12: 12px;
  --ba-sp-16: 16px;
  --ba-sp-24: 24px;
  --ba-sp-32: 32px;
  --ba-radius: 4px;
  --ba-radius-card: 6px;
  --ba-radius-pill: 999px;
  --ba-ring: 0 0 0 3px var(--ba-accent-soft-2);
  --ba-marker-w: 2px;
  --ba-icon-stroke: 1.5;
  --ba-dur-fast: .12s;
  --ba-dur-base: .16s;
  --ba-ease-out: cubic-bezier(.22,.61,.36,1);

  --site-w: 1200px;
  --site-w-text: 720px;
  --site-gutter: clamp(20px, 4vw, 40px);
  --site-sec: clamp(64px, 7.5vw, 104px);
  --site-sp-48: 48px;
  --site-sp-64: 64px;
  --site-gap: clamp(24px, 3vw, 40px);
  --site-fs-hero: clamp(34px, 4.6vw, 58px);
  --site-fs-h2: clamp(26px, 2.9vw, 36px);
  --site-fs-h3: 18px;
  --site-fs-price: clamp(32px, 3vw, 40px);
  --site-fs-lead: clamp(15px, 1.2vw, 17px);
  --site-fs-body: 14px;
  --site-fs-small: 13px;
  --site-fs-kicker: 12px;
  --site-fs-logo: 22px;
  --site-ls-hero: -.028em;
  --site-fs-hero-long: clamp(30px, 3.6vw, 46px);
  --site-lh-hero-long: 1.08;
  --site-lh-hero: 1.02;
  --site-measure: 36ch;
  --site-header-h: 64px;
  --site-header-bg: rgb(255 255 255 / .92);
  --site-btn-h: 48px;
  --site-btn-px: 22px;
  --site-logo-h: 26px;
  --site-icon: 18px;
  --site-node: 14px;
  --site-node-lg: 18px;
  --site-rule: 2px;
  --site-brace-h: 14px;
  --site-sh-strip: 0 1px 3px 0 rgb(10 21 35 / .10), 0 1px 2px -1px rgb(10 21 35 / .08);
  --site-shot-shadow: 0 32px 64px -28px rgb(10 21 35 / .30), 0 0 0 1px var(--ba-line);
  --site-chain-step: .14s;
  --site-chain-fill: .4s;
  --site-bar-h: 32px;
  --site-shot-w: 560px;
  --ba-sh-2: 0 6px 22px -8px rgb(10 21 35 / .14), 0 1px 2px -1px rgb(10 21 35 / .08);
  /* 14.10: обидва вжиті тут (рядок перемикача мови, картки `.move__src`), але в цей :root не потрапили — `var()` без
   * значення мовчки скидав висоту рядка й тінь. Значення — з app/src/styles/tokens.css. */
  --ba-sh-1: 0 1px 3px 0 rgb(10 21 35 / .10), 0 1px 2px -1px rgb(10 21 35 / .08);
  --ba-row-h: 36px;
  --site-rail: 44px;
  --site-card-min: 240px;
  --site-dot: 8px;
  --site-fs-result: clamp(18px, 1.7vw, 22px);
  --site-icon-result: 28px;
  --site-fs-pain: 14px;
  --site-drop-max: calc(100vh - var(--site-header-h));
  --site-hero-bg: #F5F7F9;
  --site-foot-bg: #0F2340;
  --site-foot-ink: #C9D6E8;
  --site-foot-line: #2A4466;
  --site-og-w: 1200px;
  --site-og-h: 630px;
  --site-fs-og: 64px;
  --site-fs-og-logo: 36px;
  --site-fs-og-chain: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--site-header-h) + var(--ba-sp-16)); }
body {
  margin: 0;
  background: var(--ba-surface);
  color: var(--ba-ink);
  font-family: var(--ba-font);
  font-size: var(--site-fs-body);
  line-height: var(--ba-lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ba-accent-strong); text-decoration: none; }
a:hover { color: var(--ba-accent-press); }
:focus-visible { outline: none; box-shadow: var(--ba-ring); border-radius: var(--ba-radius); }
h1, h2, h3 { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { max-width: calc(var(--site-w) + 2 * var(--site-gutter)); margin: 0 auto; padding: 0 var(--site-gutter); }
.section { padding: var(--site-sec) 0; }
.section--tint { background: var(--ba-surface-sunken); }
.section__head { max-width: var(--site-w-text); margin-bottom: var(--site-sp-64); }
.section__title { font-size: var(--site-fs-h2); line-height: 1.08; letter-spacing: var(--site-ls-hero); }
.section__lead { margin-top: var(--ba-sp-16); font-size: var(--site-fs-lead); color: var(--ba-ink-2); }
.kicker {
  display: inline-flex; align-items: center; gap: var(--ba-sp-8);
  font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi);
  letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-accent-strong);
}
.kicker::before { content: ""; width: var(--ba-sp-16); height: var(--site-rule); background: var(--ba-accent); }

/* Логотип */
.logo { display: inline-flex; align-items: baseline; gap: var(--ba-sp-8); color: var(--ba-ink); }
.logo:hover { color: var(--ba-ink); }
.logo__mark { width: var(--site-logo-h); height: var(--site-logo-h); flex: none; color: var(--ba-accent); transform: translateY(12.5%); }
.logo__word { font-family: var(--ba-font); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-logo); letter-spacing: var(--ba-ls-tight); line-height: 1; white-space: nowrap; }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ba-sp-8);
  min-height: var(--site-btn-h); padding: 0 var(--site-btn-px);
  border: 1px solid transparent; border-radius: var(--ba-radius);
  font: var(--ba-fw-semi) var(--site-fs-body)/1 var(--ba-font);
  transition: background var(--ba-dur-base) var(--ba-ease-out), border-color var(--ba-dur-base) var(--ba-ease-out);
}
.btn--primary { background: var(--ba-accent); color: var(--ba-on-accent); }
.btn--primary:hover { background: var(--ba-accent-strong); color: var(--ba-on-accent); }
.btn--primary:active { background: var(--ba-accent-press); }
.btn--outline { background: var(--ba-surface); color: var(--ba-ink); border-color: var(--ba-line-strong); }
.btn--outline:hover { background: var(--ba-fill-hover); color: var(--ba-ink); border-color: var(--ba-ink-3); }
.btn--sm { min-height: calc(var(--site-btn-h) - var(--ba-sp-8)); padding: 0 var(--ba-sp-16); font-size: var(--site-fs-small); }
.actions { display: flex; flex-wrap: wrap; gap: var(--ba-sp-12); }
/* Другорядна дія посиланням поруч із кнопкою (аудит лендінгу 16.10, П4) — службова розкладка, вигляд `.more`. */
.actions__link { align-self: center; padding: 0 var(--ba-sp-8); }
.more { display: inline-flex; align-items: center; gap: var(--ba-sp-4); font-weight: var(--ba-fw-semi); }
.more::after { content: "→"; transition: transform var(--ba-dur-base) var(--ba-ease-out); }
.more:hover::after { transform: translateX(var(--ba-sp-4)); }

/* Шапка */
.header { position: sticky; top: 0; z-index: 10; background: var(--site-header-bg); backdrop-filter: blur(var(--ba-sp-12)); border-bottom: 1px solid var(--ba-line-soft); }
.header__bar { display: flex; align-items: center; gap: var(--ba-sp-32); min-height: var(--site-header-h); }
.nav { display: flex; gap: var(--ba-sp-4); margin-right: auto; }
.nav__link { padding: var(--ba-sp-8) var(--ba-sp-12); border-radius: var(--ba-radius); color: var(--ba-ink-2); font-size: var(--site-fs-small); font-weight: var(--ba-fw-medium); white-space: nowrap; }
.nav__link:hover { background: var(--ba-fill-hover); color: var(--ba-ink); }
.nav__link[aria-current="page"] { color: var(--ba-ink); box-shadow: inset 0 calc(-1 * var(--ba-marker-w)) 0 var(--ba-accent); border-radius: 0; }

/* Герой */
.hero { padding: var(--site-sp-64) 0 var(--site-sec); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--site-sp-64); align-items: center; }
.hero__title { margin-top: var(--ba-sp-24); font-size: var(--site-fs-hero); line-height: var(--site-lh-hero); letter-spacing: var(--site-ls-hero); }
.hero__lead { margin-top: var(--ba-sp-24); font-size: var(--site-fs-lead); color: var(--ba-ink-2); max-width: var(--site-measure); }
.hero .actions { margin-top: var(--ba-sp-32); }
.hero__micro { margin-top: var(--ba-sp-16); font-size: var(--site-fs-small); color: var(--ba-ink-3); max-width: var(--site-measure); }
/* Нова головна 16.10 (СТРАТЕГІЯ, блок 1): `lead2` — другий рядок під лідом меншим кеглем (Р108: службовий рядок — ми;
 * остаточна верстка — замовлення виконавцю). */
.hero__lead--note { margin-top: var(--ba-sp-12); font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.hero__shot { position: relative; }
.hero__shot img { border-radius: var(--ba-radius-card); box-shadow: var(--site-shot-shadow); }
.hero--center { text-align: center; }
.hero--center .hero__title { max-width: 16ch; margin-left: auto; margin-right: auto; }
.hero--center .hero__title--long { max-width: 22ch; }
.hero__title--long { font-size: var(--site-fs-hero-long); line-height: var(--site-lh-hero-long); }
.hero--center .hero__lead, .hero--center .hero__micro { margin-left: auto; margin-right: auto; max-width: 52ch; }
.hero--center .actions { justify-content: center; }
.hero__chain { margin-top: var(--site-sp-64); text-align: left; }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--site-gap); margin-top: var(--site-sp-64); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line); text-align: left; }
.facts__item { display: flex; gap: var(--ba-sp-8); align-items: flex-start; font-size: var(--site-fs-small); font-weight: var(--ba-fw-medium); color: var(--ba-ink-2); }
.facts__item svg { flex: none; width: var(--site-icon); height: var(--site-icon); color: var(--ba-accent); margin-top: calc(var(--ba-sp-4) / 2); }

/* Ланцюг — один компонент: опори, ціни, шлях партнера */
.chain { display: grid; grid-template-columns: var(--chain-cols, 3fr 4fr 4fr); gap: var(--site-gap); }
.chain__seg { display: flex; flex-direction: column; min-width: 0; }
.chain__links { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.chain__link { position: relative; padding-top: calc(var(--site-node) + var(--ba-sp-12)); font-size: var(--site-fs-small); font-weight: var(--ba-fw-semi); color: var(--ba-ink-2); padding-right: var(--ba-sp-8); overflow-wrap: anywhere; }
.chain__link::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  width: var(--site-node); height: var(--site-node); border-radius: var(--ba-radius-pill);
  background: var(--ba-accent); border: var(--site-rule) solid var(--ba-accent);
}
.chain__link::after {
  content: ""; position: absolute; left: var(--site-node); right: 0;
  top: calc((var(--site-node) - var(--site-rule)) / 2); height: var(--site-rule); background: var(--ba-accent-soft-2);
}
.chain__seg:not(:last-child) .chain__link:last-child::after { right: calc(-1 * var(--site-gap)); }
.chain__seg:last-child .chain__link:last-child::after { display: none; }
.chain__brace {
  position: relative; height: var(--site-brace-h); margin: var(--ba-sp-16) 0 var(--ba-sp-24);
  border: var(--site-rule) solid var(--ba-line-strong); border-top: 0;
  border-radius: 0 0 var(--ba-radius-card) var(--ba-radius-card);
}
.chain__brace::after { content: ""; position: absolute; left: 50%; top: 100%; width: var(--site-rule); height: var(--site-brace-h); background: var(--ba-line-strong); transform: translateX(-50%); }
.chain__body { display: flex; flex-direction: column; gap: var(--ba-sp-12); flex: 1; padding-top: var(--ba-sp-16); }
.chain__name { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.chain__text { color: var(--ba-ink-2); }
.chain__body .more, .chain__body .btn { margin-top: auto; align-self: flex-start; }
.chain__caption { margin-top: var(--site-sp-48); color: var(--ba-ink-3); font-size: var(--site-fs-small); max-width: var(--site-w-text); }

@media (prefers-reduced-motion: no-preference) {
  .js .chain--live .chain__link::before { background: var(--ba-surface); }
  .js .chain--live .chain__link::after { transform: scaleX(0); transform-origin: left; }
  .js .chain--live.is-on .chain__link::before { animation: chain-node var(--site-chain-fill) var(--ba-ease-out) forwards; animation-delay: calc(var(--i) * var(--site-chain-step)); }
  .js .chain--live.is-on .chain__link::after { animation: chain-line var(--site-chain-fill) var(--ba-ease-out) forwards; animation-delay: calc(var(--i) * var(--site-chain-step) + var(--site-chain-step) / 2); }
}
@keyframes chain-node { to { background: var(--ba-accent); } }
@keyframes chain-line { to { transform: scaleX(1); } }
.chain--lg { --site-node: var(--site-node-lg); }
.chain--lg .chain__link { font-size: var(--site-fs-body); }
.chain__tag { margin-top: var(--ba-sp-12); font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); text-align: center; }
.chain--path { --chain-cols: 1fr; }

/* Ціна всередині ланцюга */
.depth { display: grid; grid-template-columns: 3fr 4fr 4fr; column-gap: var(--site-gap); row-gap: var(--ba-sp-4); margin: var(--ba-sp-24) 0 var(--site-sp-48); }
.depth__bar { display: flex; align-items: center; min-height: var(--site-bar-h); padding: 0 var(--ba-sp-12); border-radius: var(--ba-radius); font-size: var(--site-fs-small); font-weight: var(--ba-fw-semi); }
.depth__bar--1 { grid-column: 1 / 2; background: var(--ba-accent-soft); color: var(--ba-accent-strong); }
.depth__bar--2 { grid-column: 1 / 3; background: var(--ba-accent-soft-2); color: var(--ba-accent-press); }
.depth__bar--3 { grid-column: 1 / 4; background: var(--ba-accent); color: var(--ba-on-accent); }
.plans { display: grid; grid-template-columns: 3fr 4fr 4fr; gap: var(--site-gap); }
.plan { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan__price { display: flex; align-items: baseline; gap: var(--ba-sp-8); flex-wrap: wrap; }
.plan__sum { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-price); letter-spacing: var(--ba-ls-tight); line-height: 1; font-variant-numeric: var(--ba-num); }
.plan__per { color: var(--ba-ink-3); font-size: var(--site-fs-small); }
.plan__limit { font-size: var(--site-fs-small); font-weight: var(--ba-fw-semi); color: var(--ba-accent-strong); }
.plan__limit abbr { text-decoration: underline dotted var(--ba-line-strong); text-underline-offset: var(--ba-sp-4); cursor: help; }
.plan__note { display: grid; gap: var(--ba-sp-16); margin-top: var(--site-sp-48); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line); color: var(--ba-ink-2); font-size: var(--site-fs-small); }

/* Опори з кадрами (герой Б) */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gap); }
.pillar { display: flex; flex-direction: column; gap: var(--ba-sp-12); }
.pillar__shot { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ba-radius-card); box-shadow: var(--site-shot-shadow); background: var(--ba-canvas); margin-bottom: var(--ba-sp-12); }
.pillar__shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.pillar__shot--strip { display: flex; align-items: center; padding: var(--ba-sp-16); }
.pillar__shot--strip img { height: auto; object-fit: contain; border-radius: var(--ba-radius-card); box-shadow: var(--site-sh-strip); }
.pillar .more { margin-top: auto; }

/* Сценарії */
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--site-gap); row-gap: var(--site-sp-48); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--site-gap); }
.split .section__head { margin-bottom: 0; position: sticky; top: calc(var(--site-header-h) + var(--ba-sp-32)); align-self: start; }
.split .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.job { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line); }
.job__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
/* Позначка мови картки (хаб порівнянь /no/compare/, 13.10): англійське порівняння серед норвезьких карток. */
.job__lang { display: inline-block; margin-left: var(--ba-sp-8); padding: 0 var(--ba-sp-8); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); font-size: var(--site-fs-small); font-weight: var(--ba-fw-semi); color: var(--ba-ink-2); vertical-align: middle; }
.job__text { color: var(--ba-ink-2); }

/* Для кого */
.audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gap); }
.audience__item { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding: var(--ba-sp-32); background: var(--ba-surface); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); }
.audience__item--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--site-gap); align-items: center; border-color: var(--ba-accent-soft-2); }
.audience__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.audience__item--lead .audience__title { font-size: var(--site-fs-h2); line-height: 1.08; letter-spacing: var(--site-ls-hero); }
.audience__text { color: var(--ba-ink-2); }
.audience__item--lead .audience__text { margin-top: var(--ba-sp-16); font-size: var(--site-fs-lead); }
.audience__shot img { border-radius: var(--ba-radius-card); box-shadow: var(--site-shot-shadow); }
.audience__not { margin-top: var(--site-sp-48); color: var(--ba-ink-3); font-size: var(--site-fs-small); max-width: var(--site-w-text); }

/* Картки умов (партнери) */
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ba-line); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); overflow: hidden; }
.term { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding: var(--ba-sp-32); background: var(--ba-surface); }
.term__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.term--lead { grid-column: span 2; grid-row: span 2; justify-content: flex-end; background: var(--ba-accent-soft); }
.term--lead .term__title { font-size: var(--site-fs-hero); line-height: var(--site-lh-hero); letter-spacing: var(--site-ls-hero); color: var(--ba-accent-strong); }
.term--lead .term__text { font-size: var(--site-fs-lead); color: var(--ba-ink); max-width: var(--site-measure); }
.term__text { color: var(--ba-ink-2); }
.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gap); }
.work__item { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding-top: var(--ba-sp-24); border-top: var(--site-rule) solid var(--ba-accent); }
.work__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.work__text { color: var(--ba-ink-2); }
.work__tags { display: flex; flex-wrap: wrap; gap: var(--ba-sp-8); margin-top: var(--ba-sp-8); }
.work__tag { padding: var(--ba-sp-4) var(--ba-sp-12); border-radius: var(--ba-radius); background: var(--ba-accent-soft); color: var(--ba-accent-strong); font-size: var(--site-fs-small); font-weight: var(--ba-fw-medium); }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--site-gap); }
.faq .section__head { margin-bottom: 0; }
.faq__list { border-top: 1px solid var(--ba-line); }
.faq__item { border-bottom: 1px solid var(--ba-line); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ba-sp-24);
  padding: var(--ba-sp-24) 0; cursor: pointer; list-style: none;
  font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--ba-accent-strong); }
.faq__q svg { flex: none; width: var(--site-icon); height: var(--site-icon); color: var(--ba-ink-3); transition: transform var(--ba-dur-base) var(--ba-ease-out); }
.faq__item[open] .faq__q svg { transform: rotate(45deg); }
.faq__a { padding: 0 var(--site-sp-48) var(--ba-sp-24) 0; color: var(--ba-ink-2); max-width: var(--site-w-text); }
.faq__all { margin-top: var(--ba-sp-32); }

/* Заклики */
.cta { background: var(--ba-canvas); text-align: center; }
.cta__title { font-size: var(--site-fs-h2); line-height: 1.08; letter-spacing: var(--site-ls-hero); }
.cta__text { margin: var(--ba-sp-16) auto 0; max-width: 52ch; font-size: var(--site-fs-lead); color: var(--ba-ink-2); }
.cta .actions { justify-content: center; margin-top: var(--ba-sp-32); }

/* Підвал */
.footer { padding: var(--site-sp-48) 0; border-top: 1px solid var(--ba-line); background: var(--ba-surface); }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ba-sp-24); align-items: flex-start; }
.footer__brand { display: grid; gap: var(--ba-sp-12); max-width: 34ch; color: var(--ba-ink-2); font-size: var(--site-fs-small); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--ba-sp-8) var(--ba-sp-24); font-size: var(--site-fs-small); }
.footer__links a { color: var(--ba-ink-2); }
.footer__links a:hover { color: var(--ba-ink); }
.footer__copy { margin-top: var(--ba-sp-32); color: var(--ba-ink-3); font-size: var(--site-fs-small); }

@media (max-width: 960px) {
  .hero__grid, .audience__item--lead, .faq, .split { grid-template-columns: minmax(0, 1fr); }
  .split .section__head { position: static; }
  .depth { display: none; }
  .plans { grid-template-columns: minmax(0, 1fr); row-gap: var(--site-sp-48); }
  .term--lead { grid-row: auto; }
  .hero__shot { max-width: var(--site-shot-w); }
  .hero__shot { margin-right: 0; }
  .facts, .jobs, .audience, .terms, .work, .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain { grid-template-columns: minmax(0, 1fr); row-gap: var(--site-sp-48); }
  .chain__seg:not(:last-child) .chain__link:last-child::after { display: none; }
  .chain__tag { text-align: left; }
}
@media (max-width: 720px) {
  .header__bar { flex-wrap: wrap; gap: 0 var(--ba-sp-16); justify-content: space-between; }
  .nav { order: 3; flex-basis: 100%; margin: 0 calc(-1 * var(--site-gutter)); padding: 0 var(--site-gutter) var(--ba-sp-8); overflow-x: auto; scrollbar-width: none; }
  .header__bar { padding-top: var(--ba-sp-8); }
  .facts, .jobs, .audience, .terms, .work, .pillars, .split .jobs { grid-template-columns: minmax(0, 1fr); }
  .term--lead { grid-column: auto; }
  .audience__item, .term { padding: var(--ba-sp-24); }
  .faq__a { padding-right: 0; }
  .hero { padding-top: var(--site-sp-48); }
  .actions .btn { flex: 1 1 auto; }
  .chain--path .chain__links { grid-template-columns: minmax(0, 1fr); row-gap: var(--ba-sp-24); }
  .chain--path .chain__link { padding: 0 0 0 calc(var(--site-node) + var(--ba-sp-12)); }
  .chain--path .chain__link::before { top: var(--ba-sp-4); }
  .chain--path .chain__link::after { left: calc((var(--site-node) - var(--site-rule)) / 2); top: calc(var(--site-node) + var(--ba-sp-4)); bottom: calc(-1 * var(--ba-sp-24) - var(--ba-sp-4)); width: var(--site-rule); height: auto; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Кадр для соцмереж — лише og.html */
body.og-page { overflow: auto; }
.og { width: var(--site-og-w); height: var(--site-og-h); padding: var(--site-sp-64); display: flex; flex-direction: column; justify-content: space-between; background: var(--ba-surface); border-top: var(--ba-sp-12) solid var(--ba-accent); }
.og .logo__mark { width: var(--site-fs-og-logo); height: var(--site-fs-og-logo); }
.og__top { display: flex; justify-content: space-between; align-items: baseline; }
.og__domain { color: var(--ba-ink-3); font-size: var(--site-fs-og-chain); font-weight: var(--ba-fw-medium); }
.og .logo__word { font-size: var(--site-fs-og-logo); }
.og__title { margin-top: var(--site-sp-48); max-width: 16ch; font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-og); line-height: var(--site-lh-hero); letter-spacing: var(--site-ls-hero); }
.og .og__chain { --site-node: var(--site-node-lg); grid-template-columns: 3fr 4fr 4fr; gap: var(--ba-sp-24); }
.og .og__chain .chain__seg:not(:last-child) .chain__link:last-child::after { display: block; right: calc(-1 * var(--ba-sp-24)); }
.og .og__chain .chain__link { font-size: var(--site-fs-og-chain); }
/* САЙТ-ІНТЕГРАЦІЇ-OG-І-БАНКИ (а), 20.10 — картка сторінки інтеграції (og-integration.html): та сама рамка `.og`; замість
 * ланцюга — пара «сервіс + Krokul» кеглем заголовка і бейдж статусу внизу (кольори — як `.int-st--*` в інтеграції.css).
 * Логотип — лише коли він є; без нього пара стоїть словами. */
.og--int .og__title { max-width: 20ch; }
.og__pair { display: flex; align-items: center; gap: var(--site-sp-48); }
.og__logo { flex: none; width: var(--site-sp-64); height: var(--site-sp-64); object-fit: contain; }
.og__plus { color: var(--ba-ink-3); }
.og__st { align-self: flex-start; display: inline-flex; align-items: center; padding: var(--ba-sp-12) var(--ba-sp-24); border: 2px solid var(--ba-line); border-radius: var(--ba-radius-pill); background: var(--ba-surface); color: var(--ba-ink); font-size: var(--site-fs-og-chain); font-weight: var(--ba-fw-semi); }
.og__st--native { border-color: var(--ba-ok-line); background: var(--ba-ok-soft); }
.og__st--builtin { border-color: var(--ba-accent-soft-2); background: var(--ba-accent-soft); }
.og__st--api { border-color: var(--ba-info-line); background: var(--ba-info-soft); }
.og__st--aggregator { border-color: var(--ba-line-strong); background: var(--ba-warn-soft); }
.og__st--request { border-style: dashed; border-color: var(--ba-line-strong); color: var(--ba-ink-2); }

/* Меню сайту за аудиторією (САЙТ-МЕНЮ-АУДИТОРІЯ, 14.10): «Для кого», «Можливості», «Ресурси». Перші дві — панель на всю
 * ширину смуги (точка відліку — `.header`, вона sticky), «Ресурси» — картка під пунктом, як список мов: пʼять рядків на всю
 * ширину лишили б порожню смугу. Відкрита одна; наведення з затримкою — сайт.js. Кадрів і значків у панелях немає. */
:root {
  --site-drop-platform: .8fr;
  --site-drop-card-w: 240px;
}
.header { position: sticky; }
.navdrop { display: flex; }
.navdrop__toggle { display: inline-flex; align-items: center; gap: var(--ba-sp-4); }
.navdrop__toggle svg { width: var(--ba-sp-12); height: var(--ba-sp-12); transition: transform var(--ba-dur-base) var(--ba-ease-out); }
.navdrop.is-open .navdrop__toggle { color: var(--ba-ink); background: var(--ba-fill-hover); }
.navdrop.is-open .navdrop__toggle svg { transform: rotate(180deg); }
.navdrop__panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ba-surface); border-bottom: 1px solid var(--ba-line); box-shadow: var(--ba-sh-2); max-height: var(--site-drop-max); overflow-y: auto; }
.navdrop.is-open .navdrop__panel { display: block; animation: navdrop-in var(--ba-dur-base) var(--ba-ease-out); }
@keyframes navdrop-in { from { opacity: 0; } }
.navdrop__inner { padding-top: var(--ba-sp-32); padding-bottom: var(--ba-sp-32); }
/* «Для кого»: шість дверей 3 × 2 — назва й речення (h1 сторінки дверей). Сітку зсунуто на поле рядка, щоб текст стояв по
 * краю смуги, а заливка наведення мала повітря з обох боків. */
.navdrop__doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ba-sp-4) var(--ba-sp-8); margin: 0 calc(-1 * var(--ba-sp-16)); }
.navdrop__doors a { display: grid; gap: var(--ba-sp-4); align-content: start; height: 100%; padding: var(--ba-sp-12) var(--ba-sp-16); border-radius: var(--ba-radius-card); color: var(--ba-ink); }
.navdrop__doors b { font-size: var(--site-fs-body); font-weight: var(--ba-fw-semi); line-height: var(--ba-lh-tight); }
.navdrop__doors span { color: var(--ba-ink-2); font-size: var(--site-fs-small); text-wrap: pretty; }
.navdrop__doors a:hover { background: var(--ba-fill-hover); color: var(--ba-ink); }
.navdrop__doors a:hover b, .navdrop__doors a[aria-current="page"] b { color: var(--ba-accent-strong); }
.navdrop__doors a[aria-current="page"] { background: var(--ba-fill-selected); }
/* «Можливості»: три стовпи тарифів (Р87) і вужча «Платформа». */
.navdrop__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, var(--site-drop-platform)); gap: var(--site-gap); }
.navdrop__head {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0 var(--ba-sp-12); margin: 0 0 var(--ba-sp-8);
  border: 0; border-bottom: var(--site-rule) solid var(--ba-accent); background: none; text-align: left; cursor: default;
  font: var(--ba-fw-semi) var(--site-fs-kicker)/1.2 var(--ba-font); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-accent-strong);
}
.navdrop__head svg { display: none; width: var(--ba-sp-16); height: var(--ba-sp-16); }
.navdrop__group--platform .navdrop__head { border-bottom-color: var(--ba-line-strong); color: var(--ba-ink-2); }
.navdrop__list { display: grid; }
.navdrop__list a { display: block; padding: var(--ba-sp-8) 0; color: var(--ba-ink); font-size: var(--site-fs-small); }
.navdrop__list a:hover { color: var(--ba-accent-strong); }
.navdrop__list a[aria-current="page"] { color: var(--ba-accent-strong); font-weight: var(--ba-fw-semi); }
.navdrop__foot { display: flex; flex-wrap: wrap; gap: var(--ba-sp-24); margin-top: var(--ba-sp-24); padding-top: var(--ba-sp-16); border-top: 1px solid var(--ba-line-soft); font-size: var(--site-fs-small); }
.navdrop__note { flex: 1 1 40ch; color: var(--ba-ink-3); }
.navdrop__foot .more { flex: none; }
/* «Ресурси»: картка під пунктом — та сама рука, що список мов (рамка, радіус картки, рядок 36). */
.navdrop--resources { position: relative; }
.navdrop--resources .navdrop__panel { right: auto; width: max-content; min-width: var(--site-drop-card-w); margin-top: var(--ba-sp-4); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); max-height: none; overflow: visible; }
.navdrop--resources .navdrop__inner { padding: var(--ba-sp-4); }
.navdrop--resources .navdrop__list { gap: 1px; }
.navdrop--resources .navdrop__list a { display: flex; align-items: center; min-height: var(--ba-row-h); padding: 0 var(--ba-sp-12); border-radius: var(--ba-radius); white-space: nowrap; }
.navdrop--resources .navdrop__list a:hover { background: var(--ba-fill-hover); color: var(--ba-ink); }
.navdrop--resources .navdrop__list a[aria-current="page"] { background: var(--ba-fill-selected); }
@media (prefers-reduced-motion: reduce) { .navdrop.is-open .navdrop__panel { animation: none; } }

/* Крихти */
.crumbs { padding-top: var(--ba-sp-24); }
.crumbs__list { display: flex; flex-wrap: wrap; gap: var(--ba-sp-4) var(--ba-sp-8); font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.crumbs__list li { display: flex; gap: var(--ba-sp-8); }
.crumbs__list li + li::before { content: "›"; color: var(--ba-line-strong); }
.crumbs__list a { color: var(--ba-ink-2); }
.crumbs__list a:hover { color: var(--ba-accent-strong); }
.crumbs__list [aria-current="page"] { color: var(--ba-ink); font-weight: var(--ba-fw-medium); }

/* Кадр на полотні — один вигляд для всіх кадрів шаблону */
.shot { margin: 0; padding: var(--ba-sp-24); background: var(--ba-canvas); border-radius: var(--ba-radius-card); }
.shot img { width: 100%; border-radius: var(--ba-radius-card); box-shadow: var(--site-sh-strip); }
.shot--tall { padding: var(--ba-sp-24) var(--ba-sp-24) 0; overflow: hidden; }
.shot--tall img { border-radius: var(--ba-radius-card) var(--ba-radius-card) 0 0; }

/* Герой рішення */
.hero--solution { padding-top: var(--site-sp-48); }
.hero--solution .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
.hero--solution .hero__title { font-size: var(--site-fs-hero-long); line-height: var(--site-lh-hero-long); }

/* Тариф — підсвічений відрізок ланцюга */
.tier { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ba-sp-8) var(--ba-sp-12); margin-top: var(--ba-sp-24); font-size: var(--site-fs-small); color: var(--ba-ink-2); }
.tier__chain { display: inline-flex; gap: var(--ba-sp-8); }
.tier__seg { display: inline-flex; gap: var(--ba-sp-4); }
.tier__dot { width: var(--site-dot); height: var(--site-dot); border-radius: var(--ba-radius-pill); background: var(--ba-line); }
.tier__seg--on .tier__dot { background: var(--ba-accent); }
.cta .tier { justify-content: center; }

/* Біль */
.pain__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--site-card-min), 1fr)); gap: var(--site-gap); counter-reset: pain; }
.pain__item { counter-increment: pain; display: grid; gap: var(--ba-sp-16); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line-strong); font-size: var(--site-fs-pain); color: var(--ba-ink); }
.pain__item::before { content: counter(pain, decimal-leading-zero); font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); color: var(--ba-ink-3); font-variant-numeric: var(--ba-num); }

/* Що робить Krokul */
.solution__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--site-card-min), 1fr)); gap: var(--site-gap); }
.solution__item { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding-top: var(--ba-sp-24); border-top: var(--site-rule) solid var(--ba-accent); }
.solution__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.solution__text { color: var(--ba-ink-2); }

/* Як це працює */
.steps { counter-reset: step; display: grid; }
.step { counter-increment: step; position: relative; display: grid; grid-template-columns: var(--site-rail) minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--site-gap); padding-bottom: var(--site-sp-64); }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: counter(step); grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center;
  width: var(--site-rail); height: var(--site-rail); border-radius: var(--ba-radius-pill);
  background: var(--ba-accent); color: var(--ba-on-accent); font: var(--ba-fw-semi) var(--site-fs-h3)/1 var(--ba-font-display); position: relative; z-index: 1;
}
.step::after { content: ""; position: absolute; left: calc((var(--site-rail) - var(--site-rule)) / 2); top: var(--site-rail); bottom: 0; width: var(--site-rule); background: var(--ba-accent-soft-2); }
.step:last-child::after { display: none; }
.step__text { grid-column: 2; display: flex; flex-direction: column; gap: var(--ba-sp-12); padding-top: var(--ba-sp-8); }
.step__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.step__body { color: var(--ba-ink-2); }
.step .shot { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
.step--text .step__text { grid-column: 2 / 4; max-width: var(--site-w-text); }

/* Результат */
.result { background: var(--ba-surface); border-top: 1px solid var(--ba-line); }
.result__list { display: grid; border-top: var(--site-rule) solid var(--ba-accent); }
.result__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ba-sp-24); align-items: start; padding: var(--ba-sp-32) 0; border-bottom: 1px solid var(--ba-line); font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-result); line-height: 1.3; letter-spacing: var(--ba-ls-tight); text-wrap: pretty; }
.result__item svg { width: var(--site-icon-result); height: var(--site-icon-result); padding: var(--ba-sp-4); border-radius: var(--ba-radius); background: var(--ba-accent); color: var(--ba-on-accent); margin-top: var(--ba-sp-4); }

/* Межі */
.limits__box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ba-sp-24); padding: var(--ba-sp-32); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); font-size: var(--site-fs-lead); color: var(--ba-ink); }
.limits__box svg { width: var(--ba-sp-24); height: var(--ba-sp-24); color: var(--ba-ink-3); margin-top: var(--ba-sp-4); }
.limits__box p + p { margin-top: var(--ba-sp-12); }

/* Далі в ланцюзі */
.related__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-gap); }
.related__card { display: grid; gap: var(--ba-sp-8); padding: var(--ba-sp-32); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface); color: var(--ba-ink); transition: border-color var(--ba-dur-base) var(--ba-ease-out), background var(--ba-dur-base) var(--ba-ease-out); }
.related__card:hover { color: var(--ba-ink); border-color: var(--ba-accent); background: var(--ba-fill-hover); }
.related__card--next { text-align: right; }
.related__dir { font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-accent-strong); }
.related__title { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.related__also { display: flex; flex-wrap: wrap; gap: var(--ba-sp-8) var(--ba-sp-24); margin-top: var(--ba-sp-24); font-size: var(--site-fs-small); color: var(--ba-ink-3); }

/* Хаб */
.hub .chain__body { padding-top: 0; }
.hub__list { display: grid; gap: var(--ba-sp-24); }
.hub__item { display: grid; gap: var(--ba-sp-4); }
.hub__title { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-body); line-height: var(--ba-lh-tight); }
.hub__title a { color: var(--ba-ink); }
.hub__title a:hover { color: var(--ba-accent-strong); }
.hub__pain { color: var(--ba-ink-2); font-size: var(--site-fs-small); }
.hub__tag { justify-self: start; margin-top: var(--ba-sp-4); padding: 0 var(--ba-sp-8); border-radius: var(--ba-radius); background: var(--ba-accent-soft); color: var(--ba-accent-strong); font-size: var(--ba-sp-12); font-weight: var(--ba-fw-semi); line-height: 1.6; }
.hub__common { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ba-sp-32) var(--site-gap); }
.hub__common .hub__item { padding-top: var(--ba-sp-16); border-top: 1px solid var(--ba-line); }
.job__more { margin-top: auto; font-size: var(--site-fs-small); }

/* Підвал: колонки */
/* 14.10 (САЙТ-МЕНЮ-АУДИТОРІЯ): бренд і чотири колонки — «Для кого», «Можливості», «Ресурси», «Krokul». Колонки — сітка з
 * однакових треків, тож рядок, доданий у будь-яку (юридичні сторінки в «Krokul»), не зсуває сусідні. Сторінки порівнянь
 * у «Ресурсах» — під своїм хабом із відступом (`footer__sub`). */
:root { --site-foot-brand: 280px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, var(--site-foot-brand)) minmax(0, 1fr); gap: var(--site-sp-48) var(--site-gap); }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ba-sp-32) var(--site-gap); }
.footer__col { display: grid; gap: var(--ba-sp-8); align-content: start; font-size: var(--site-fs-small); }
.footer__head { font-weight: var(--ba-fw-semi); color: var(--ba-ink); }
.footer__col a { color: var(--ba-ink-2); }
.footer__col a:hover { color: var(--ba-ink); }
.footer__col .footer__head { margin-bottom: var(--ba-sp-4); }
.footer__col .footer__sub { padding-left: var(--ba-sp-12); }
@media (max-width: 960px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--site-sp-48); }
  .footer__col a { padding: var(--ba-sp-4) 0; }
}

@media (max-width: 960px) {
  .navdrop__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .navdrop__doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero--solution .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: var(--site-rail) minmax(0, 1fr); }
  .step .shot, .step--text .step__text { grid-column: 2; }
  .step .shot { grid-row: auto; margin-top: var(--ba-sp-24); }
  .hub__common { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .navdrop { position: static; }
  .navdrop__inner { padding-top: var(--ba-sp-8); padding-bottom: var(--ba-sp-24); }
  .navdrop__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .navdrop__head { cursor: pointer; padding: var(--ba-sp-16) 0; margin: 0; border-bottom: 1px solid var(--ba-line-soft); font-size: var(--site-fs-small); }
  .navdrop__group--platform .navdrop__head { border-bottom-color: var(--ba-line-soft); }
  .navdrop__head svg { display: block; transition: transform var(--ba-dur-base) var(--ba-ease-out); }
  .navdrop__group .navdrop__list { display: none; padding: var(--ba-sp-4) 0 var(--ba-sp-12); }
  .navdrop__group.is-open .navdrop__list { display: grid; }
  .navdrop__group.is-open .navdrop__head svg { transform: rotate(180deg); }
  .navdrop__doors { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
  .navdrop__doors a { min-height: 44px; padding: var(--ba-sp-12) 0 var(--ba-sp-12) var(--ba-sp-12); border-radius: 0; }
  .navdrop__foot { gap: var(--ba-sp-12); margin-top: var(--ba-sp-8); }
  .navdrop--resources .navdrop__panel { width: auto; min-width: 0; margin: 0; border: 0; border-bottom: 1px solid var(--ba-line-soft); border-radius: 0; }
  .navdrop--resources .navdrop__inner { padding: var(--ba-sp-4) 0 var(--ba-sp-12); }
  .navdrop--resources .navdrop__list a { min-height: 44px; padding: 0 0 0 var(--ba-sp-12); }
  .step { column-gap: var(--ba-sp-16); }
  .shot { padding: var(--ba-sp-12); }
  .related__pair, .hub__common { grid-template-columns: minmax(0, 1fr); }
  .related__card--next { text-align: left; }
  .limits__box { grid-template-columns: minmax(0, 1fr); padding: var(--ba-sp-24); }
}

/* Далі в ланцюзі — всередині заклику */
.cta .related { max-width: var(--site-w); margin: var(--site-sp-64) auto 0; padding-top: var(--site-sp-48); border-top: 1px solid var(--ba-line-strong); text-align: left; }
.related__head { margin-bottom: var(--ba-sp-24); font-size: var(--site-fs-h3); }
.tier__seg { cursor: help; }

.shot--narrow { display: flex; justify-content: center; }
.shot--narrow img { width: auto; max-width: 100%; }
.path__shot { margin-top: var(--site-sp-48); }

/* Можливості: групи */
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--site-gap); row-gap: var(--site-sp-64); }
.group { display: flex; flex-direction: column; gap: var(--ba-sp-16); padding-top: var(--ba-sp-24); border-top: var(--site-rule) solid var(--ba-accent); scroll-margin-top: calc(var(--site-header-h) + var(--ba-sp-32)); }
.group__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.group__list { display: grid; list-style: none; }
.group__list li { padding: var(--ba-sp-12) 0; border-bottom: 1px solid var(--ba-line); color: var(--ba-ink-2); text-wrap: pretty; }
.group__more { align-self: flex-start; }

/* Порівняння */
.cmp { overflow-x: auto; border: 1px solid var(--ba-line); border-radius: var(--ba-radius); background: var(--ba-surface); }
.cmp__table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: var(--site-fs-small); }
.cmp__table th, .cmp__table td { padding: var(--ba-sp-16); text-align: left; vertical-align: top; border-bottom: 1px solid var(--ba-line); color: var(--ba-ink-2); text-wrap: pretty; }
.cmp__table thead th { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); color: var(--ba-ink); border-bottom: var(--site-rule) solid var(--ba-line); }
.cmp__table tbody th { font-weight: var(--ba-fw-medium); color: var(--ba-ink); width: 22%; }
.cmp__table tbody tr:last-child > * { border-bottom: 0; }
.cmp__table .cmp__us { background: var(--ba-accent-soft); color: var(--ba-ink); font-weight: var(--ba-fw-medium); }
.cmp__table thead .cmp__us { background: var(--ba-accent); color: var(--ba-on-accent); }
.cmp__yes { display: inline-flex; color: var(--ba-accent); }
.cmp__yes svg { width: var(--site-icon); height: var(--site-icon); }
.cmp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cmp__no { color: var(--ba-ink-3); }

/* Ціни: обсяг */
.volume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gap); }
.volume__item { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding: var(--ba-sp-24); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); background: var(--ba-surface); }
.volume__item--lead { border-color: var(--ba-accent); }
.volume__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.volume__sum { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-result); color: var(--ba-accent-strong); font-variant-numeric: tabular-nums; }
.volume__text { color: var(--ba-ink-2); }
.volume + .chain__caption { margin-top: var(--ba-sp-24); }
.facts:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .groups, .volume { grid-template-columns: minmax(0, 1fr); }
}

/* Колір: герой, заклик, підвал */
.hero { background: var(--site-hero-bg); border-bottom: 1px solid var(--ba-line-soft); }
.cta { background: var(--ba-accent); color: var(--ba-on-accent); }
.cta .cta__text { color: var(--ba-on-accent); }
/* 09.10: лід смуги-заклику сторінок напрямків (`for/*`) має свій клас `.cta__lead` (р. ~1085, колір `--ba-ink-2`) —
 * без цього рядка темний текст на синьому тлі не читався (знайшов власник на `/uk/for/integrators/`). */
.cta .cta__lead { color: var(--ba-on-accent); }
.cta .btn--primary { background: var(--ba-surface); color: var(--ba-accent-strong); }
.cta .btn--primary:hover { background: var(--ba-accent-soft); color: var(--ba-accent-press); }
.cta .btn--outline { background: transparent; color: var(--ba-on-accent); border-color: var(--ba-on-accent); }
.cta .btn--outline:hover { background: var(--ba-accent-strong); color: var(--ba-on-accent); }
/* Другорядна дія посиланням на синьому тлі заклику (16.10: без цього правила `.more` брав колір посилання — темний на темному). */
.cta .actions__link { color: var(--ba-on-accent); }
.cta .actions__link:hover { color: var(--ba-accent-soft); }
.cta .related { border-top-color: var(--ba-accent-soft-2); }
.cta .related__head, .cta .related__also, .cta .related__also a, .cta .related__also .more { color: var(--ba-on-accent); }
.footer { background: var(--site-foot-bg); border-top: 0; color: var(--site-foot-ink); }
.footer .footer__brand, .footer .footer__copy, .footer .footer__col a, .footer .footer__links a { color: var(--site-foot-ink); }
.footer .footer__head, .footer .footer__col a:hover, .footer .footer__links a:hover, .footer .logo { color: var(--ba-on-accent); }
/* Перемикач мови в рядку © (САЙТ-LLM фаза 2, 08.10): той самий колір підвалу, підкреслення — щоб читалось як посилання. */
.footer .footer__lang a { color: var(--site-foot-ink); text-decoration: underline; text-underline-offset: 2px; }
.footer .footer__lang a:hover { color: var(--ba-on-accent); }
.kicker { color: var(--ba-accent-strong); }

/* Ціни: картки */
.section--plans { padding-top: var(--site-sp-64); }
.plans--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.plans--cards .plan { gap: var(--ba-sp-16); padding: var(--ba-sp-32); border: 1px solid var(--ba-line); border-top: 4px solid var(--ba-accent-soft-2); border-radius: var(--ba-radius-card); background: var(--ba-surface); }
.plans--cards .plan--2 { border-color: var(--ba-accent); border-top-color: var(--ba-accent); box-shadow: var(--ba-sh-2); }
.plans--cards .plan--3 { border-top-color: var(--ba-accent-press); }
.plans--cards .plan .btn { margin-top: 0; align-self: stretch; justify-content: center; }
.plan__name { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.plan__inc { font-size: var(--site-fs-small); font-weight: var(--ba-fw-semi); color: var(--ba-ink); padding-top: var(--ba-sp-16); border-top: 1px solid var(--ba-line-soft); }
.plan--1 .plan__list { padding-top: var(--ba-sp-16); border-top: 1px solid var(--ba-line-soft); }
.plan__list { display: grid; gap: var(--ba-sp-8); font-size: var(--site-fs-small); color: var(--ba-ink-2); }
.plan__list li { display: flex; gap: var(--ba-sp-8); align-items: flex-start; }
.plan__list svg { flex: none; width: var(--site-icon); height: var(--site-icon); color: var(--ba-ok); margin-top: 1px; }
.plans--cards + .plan__note { display: grid; gap: var(--ba-sp-8); margin-top: var(--site-sp-48); font-size: var(--site-fs-small); color: var(--ba-ink-3); max-width: var(--site-w-text); }
@media (max-width: 900px) { .plans--cards { grid-template-columns: minmax(0, 1fr); } }
.hero--compact { padding: var(--site-sp-48) 0; }
.plans--cards .plan .btn { text-align: center; }
.plans--cards .plan__limit { min-height: calc(3em * var(--ba-lh-base)); }
@media (max-width: 900px) { .plans--cards .plan__limit { min-height: 0; } }
.cta .tier { color: var(--ba-on-accent); }
.cta .tier__dot { background: var(--ba-accent-strong); }
.cta .tier__seg--on .tier__dot { background: var(--ba-on-accent); }

/* Кольори етапів: продати — синій, гроші — зелений, маржа — бурштин */
:root { --st-1: var(--ba-accent); --st-1s: var(--ba-accent-soft); --st-2: var(--ba-ok); --st-2s: var(--ba-ok-soft); --st-3: var(--ba-warn); --st-3s: var(--ba-warn-soft); }
.chain__seg:nth-child(1) { --st: var(--st-1); --sts: var(--st-1s); }
.chain__seg:nth-child(2) { --st: var(--st-2); --sts: var(--st-2s); }
.chain__seg:nth-child(3) { --st: var(--st-3); --sts: var(--st-3s); }
.chain__seg .chain__link::before { background: var(--st, var(--ba-accent)); border-color: var(--st, var(--ba-accent)); }
.chain__seg .chain__link::after { background: var(--st, var(--ba-accent-soft-2)); opacity: .35; }
.chain__seg .chain__name { color: var(--st); }
.chain__seg .chain__tag { color: var(--st); }
@media (prefers-reduced-motion: no-preference) {
  .js .chain--live .chain__seg .chain__link::before { background: var(--ba-surface); }
  .js .chain--live.is-on .chain__seg .chain__link::before { animation-name: chain-node-st; }
}
@keyframes chain-node-st { to { background: var(--st, var(--ba-accent)); } }
.depth__bar--1 { background: var(--st-1s); color: var(--ba-accent-strong); }
.depth__bar--2 { background: var(--st-2s); color: var(--ba-ok); }
.depth__bar--3 { background: var(--st-3s); color: var(--ba-warn); }
.plans--cards .plan--1 { border-top-color: var(--st-1); }
.plans--cards .plan--2 { border-top-color: var(--st-2); border-color: var(--ba-ok-line); border-top-color: var(--st-2); }
.plans--cards .plan--3 { border-top-color: var(--st-3); }
.plans--cards .plan--1 .plan__limit { color: var(--ba-accent-strong); }
.plans--cards .plan--2 .plan__limit { color: var(--ba-ok); }
.plans--cards .plan--3 .plan__limit { color: var(--ba-warn); }
.plans--cards .plan--2 .btn--primary { background: var(--ba-ok); border-color: var(--ba-ok); }
.plans--cards .plan--2 .btn--primary:hover { background: var(--ba-accent-strong); border-color: var(--ba-accent-strong); }
/* Р110 (19.10, наша дрібна правка за Р108): четвертий тариф «Масштаб». Сітка на 3 колонки клала його самого в другий
 * ряд; при чотирьох — чотири колонки з вужчим полем картки від 1101 px, дві на дві в 901–1100, стовпчик нижче (правило
 * вище). Колір — темний синій «вище за маржу»: етапів ланцюга три, четвертого етапу немає. */
@media (min-width: 1101px) {
  .plans--cards:has(> .plan--4) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plans--cards:has(> .plan--4) .plan { padding: var(--ba-sp-24); }
  .plans--cards:has(> .plan--4) .plan__price { gap: var(--ba-sp-4); }
  .plans--cards:has(> .plan--4) .plan__sum { font-size: var(--site-fs-price-4); }
}
:root { --site-fs-price-4: clamp(28px, 2.5vw, 36px); }
@media (min-width: 901px) and (max-width: 1100px) { .plans--cards:has(> .plan--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plans--cards .plan--4 { border-top-color: var(--ba-accent-press); }
.plans--cards .plan--4 .plan__limit { color: var(--ba-accent-press); }
.tier__seg--on:nth-child(1) .tier__dot { background: var(--st-1); }
.tier__seg--on:nth-child(2) .tier__dot { background: var(--st-2); }
.tier__seg--on:nth-child(3) .tier__dot { background: var(--st-3); }
.cta .tier__seg--on .tier__dot { background: var(--ba-on-accent); }
/* Акценти секцій */
.section--tint { background: var(--ba-surface-sunken); }
.pain__item { border-top-color: var(--ba-danger-line); }
.pain__item::before { color: var(--ba-danger); }
.solution__item:nth-child(3n+2) { border-top-color: var(--st-2); }
.solution__item:nth-child(3n) { border-top-color: var(--st-3); }
.group:nth-child(4n+2) { border-top-color: var(--st-2); }
.group:nth-child(4n+3) { border-top-color: var(--st-3); }
.group:nth-child(4n) { border-top-color: var(--ba-info); }
.facts__item svg, .plan__list svg { color: var(--ba-ok); }
.result__item svg { background: var(--ba-ok); }
.result__list { border-top-color: var(--ba-ok); }
.cmp__yes { color: var(--ba-ok); }
.kicker { color: var(--ba-info); }
.work__tag { background: var(--ba-info-soft); color: var(--ba-info); }
/* Логотип у темному підвалі */
.footer .logo__mark { color: var(--ba-accent-soft-2); }

/* Мобільне меню */
.burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: calc(-1 * var(--ba-sp-8)); padding: 0; border: 0; border-radius: var(--ba-radius); background: none; color: var(--ba-ink); cursor: pointer; }
.burger:hover { background: var(--ba-fill-hover); }
.burger svg { width: var(--ba-sp-24); height: var(--ba-sp-24); }
.burger__close { display: none; }
.header.is-menu .burger__open { display: none; }
.header.is-menu .burger__close { display: inline; }
.nav__cta { display: none; }
@media (max-width: 720px) {
  .header__bar { flex-wrap: nowrap; padding-top: 0; gap: var(--ba-sp-12); }
  .header .logo { margin-right: auto; }
  .burger { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--site-header-h)); flex-direction: column; flex-basis: auto; order: 0; gap: 0; margin: 0; padding: var(--ba-sp-8) var(--site-gutter) var(--ba-sp-32); background: var(--ba-surface); border-top: 1px solid var(--ba-line-soft); overflow-y: auto; }
  .header.is-menu { background: var(--ba-surface); backdrop-filter: none; }
  .header.is-menu .nav { display: flex; }
  .nav > .nav__link, .nav .navdrop__toggle { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0; border-radius: 0; border-bottom: 1px solid var(--ba-line-soft); font-size: var(--site-fs-lead); font-weight: var(--ba-fw-semi); color: var(--ba-ink); box-shadow: none; }
  .nav > .nav__link:hover, .nav .navdrop__toggle:hover, .navdrop.is-open .navdrop__toggle { background: none; }
  .nav .nav__link[aria-current="page"] { color: var(--ba-accent-strong); box-shadow: none; }
  .nav .navdrop__toggle svg { width: var(--ba-sp-16); height: var(--ba-sp-16); }
  .navdrop { flex-direction: column; }
  .navdrop__panel { position: static; max-height: none; overflow: visible; box-shadow: none; border-bottom: 1px solid var(--ba-line-soft); }
  .navdrop__panel > .wrap { padding-left: 0; padding-right: 0; }
  .navdrop__head { font-size: var(--site-fs-body); text-transform: none; letter-spacing: 0; color: var(--ba-ink-2); }
  .navdrop__list a { min-height: 44px; display: flex; align-items: center; padding: 0 0 0 var(--ba-sp-12); font-size: var(--site-fs-body); }
  .nav__cta { display: inline-flex; justify-content: center; margin-top: var(--ba-sp-24); flex: none; }
  body.menu-open { overflow: hidden; }
}

/* Пачка 4 — двері за типом, сходи довіри, сторінка дверей */
:root {
  --site-door-min: 260px;
  --site-fs-door: clamp(20px, 1.9vw, 24px);
  --site-riser: 4px;
}
.doors__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-door-min)), 1fr)); gap: var(--site-gap); align-items: stretch; }
.doors__grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door { display: flex; flex-direction: column; gap: var(--ba-sp-24); min-width: 0; padding: var(--ba-sp-32); background: var(--ba-surface); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); }
.door__title { font-size: var(--site-fs-door); line-height: var(--ba-lh-tight); letter-spacing: var(--ba-ls-tight); }
.door__pain { margin-top: calc(-1 * var(--ba-sp-12)); font-size: var(--site-fs-lead); color: var(--ba-ink-2); }
.door__see { display: grid; gap: var(--ba-sp-12); padding-top: var(--ba-sp-16); border-top: 1px solid var(--ba-line-soft); }
.door__see-text { font-weight: var(--ba-fw-medium); color: var(--ba-ink); }
.door__shot { margin: 0; }
.door__shot .app-name { flex-wrap: wrap; }
.door__situations { display: grid; border-top: 1px solid var(--ba-line); }
.door__situation { display: grid; gap: var(--ba-sp-4); padding: var(--ba-sp-16) 0; border-bottom: 1px solid var(--ba-line); }
.door__said { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-body); line-height: var(--ba-lh-tight); color: var(--ba-ink); }
.door__answer { color: var(--ba-ink-2); }
.door__link { margin-top: var(--ba-sp-4); font-size: var(--site-fs-small); }
.door__cta { margin-top: auto; align-self: flex-start; }
.doors__not { margin-top: var(--site-sp-48); color: var(--ba-ink-3); font-size: var(--site-fs-small); max-width: var(--site-w-text); }
.door__situations--page { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-door-min)), 1fr)); column-gap: var(--site-gap); row-gap: var(--site-sp-48); border-top: 0; }
.door__situations--page .door__situation { align-content: start; padding: var(--ba-sp-24) 0 0; border-top: var(--site-rule) solid var(--ba-accent); border-bottom: 0; }
.door__situations--page .door__said { font-size: var(--site-fs-h3); margin-bottom: var(--ba-sp-8); }

.ladder { display: grid; border-top: 1px solid var(--ba-line); }
.ladder__step { display: grid; grid-template-columns: auto minmax(0, 5fr) minmax(0, 7fr); gap: var(--ba-sp-16) var(--site-gap); align-items: start; padding: var(--ba-sp-24) 0; border-bottom: 1px solid var(--ba-line); }
.ladder__step::before { content: ""; width: var(--ba-sp-4); height: calc(var(--site-riser) * (var(--i) + 1)); margin-top: calc(var(--site-riser) * (6 - var(--i)) - var(--ba-sp-4)); border-radius: var(--ba-radius-pill); background: var(--ba-accent); }
.ladder__doubt { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); color: var(--ba-ink); }
.ladder__fact { color: var(--ba-ink-2); }

.week { display: grid; }
.week__link { position: relative; padding: 0 0 var(--ba-sp-32) calc(var(--site-node) + var(--ba-sp-16)); }
.week__link:last-child { padding-bottom: 0; }
.week__link::before { content: ""; position: absolute; left: 0; top: var(--ba-sp-4); width: var(--site-node); height: var(--site-node); border-radius: var(--ba-radius-pill); background: var(--st, var(--ba-accent)); }
.week__link::after { content: ""; position: absolute; left: calc((var(--site-node) - var(--site-rule)) / 2); top: calc(var(--site-node) + var(--ba-sp-4)); bottom: calc(-1 * var(--ba-sp-4)); width: var(--site-rule); background: var(--st, var(--ba-accent)); opacity: .35; }
.week__link:last-child::after { display: none; }
.week__name { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.week__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--site-gap); margin-top: var(--ba-sp-4); }
.week__text { display: grid; gap: var(--ba-sp-12); align-content: start; }
.week__title, .week__next { display: none; }
.week__caption { color: var(--ba-ink-2); max-width: var(--site-measure); }
.week__shot { grid-column: 2; align-self: start; }


/* Тиждень — перемикач (з JS і ширше 720) */
.week--tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.week--tabs .week__link { display: contents; }
.week--tabs .week__link::before, .week--tabs .week__link::after { content: none; }
.week--tabs .week__name { grid-row: 1; min-width: 0; font-size: var(--site-fs-small); }
.week--tabs .week__tab { position: relative; display: block; height: 100%; padding: calc(var(--site-node-lg) + var(--ba-sp-12)) var(--ba-sp-8) var(--ba-sp-16) 0; border-bottom: var(--site-rule) solid var(--ba-line-soft); color: var(--ba-ink-3); cursor: pointer; overflow-wrap: anywhere; transition: color var(--ba-dur-base) var(--ba-ease-out), border-color var(--ba-dur-base) var(--ba-ease-out); }
.week--tabs .week__tab:hover { color: var(--ba-ink); }
.week--tabs .week__tab::before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: var(--site-node-lg); height: var(--site-node-lg); box-sizing: border-box; border-radius: var(--ba-radius-pill); border: var(--site-rule) solid var(--st); background: var(--ba-surface); transition: background var(--ba-dur-base) var(--ba-ease-out); }
.week--tabs .week__tab::after { content: ""; position: absolute; left: var(--site-node-lg); right: 0; top: calc((var(--site-node-lg) - var(--site-rule)) / 2); height: var(--site-rule); background: var(--st); opacity: .35; }
.week--tabs .week__link:last-child .week__tab::after { display: none; }
.week--tabs .week__tab[aria-expanded="true"] { color: var(--ba-ink); border-bottom-color: var(--st); }
.week--tabs .week__tab[aria-expanded="true"]::before { background: var(--st); }
.week--tabs .week__panel { grid-row: 2; grid-column: 1 / -1; display: none; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; margin-top: var(--site-sp-48); }
.week--tabs .week__panel.is-on { display: grid; }
.week--tabs .week__panel:not(:has(.week__shot)) { grid-template-columns: minmax(0, 1fr); min-height: var(--site-week-shot-h); }
.week--tabs .week__title { display: block; font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-door); line-height: var(--ba-lh-tight); color: var(--ba-ink); }
.week--tabs .week__caption { font-size: var(--site-fs-lead); }
.week--tabs .week__next { display: inline-flex; justify-self: start; margin-top: var(--ba-sp-8); padding: 0; border: 0; background: none; font: var(--ba-fw-semi) var(--site-fs-body)/1.4 var(--ba-font); color: var(--ba-accent-strong); cursor: pointer; }
.week--tabs .week__next:hover { color: var(--ba-accent-press); }
.week--tabs .week__shot { grid-column: 2; margin-top: 0; display: flex; align-items: center; justify-content: center; min-height: var(--site-week-shot-h); padding: var(--ba-sp-32); background: var(--ba-canvas); border-radius: var(--ba-radius-card); }
.week--tabs .week__shot .app { width: 100%; max-width: 100%; }
.week--tabs .week__shot .app-task { width: auto; }
:root { --site-week-shot-h: clamp(320px, 34vw, 460px); }

.demo-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--site-gap); }
.demo-list__item { display: grid; gap: var(--ba-sp-8); align-content: start; padding-top: var(--ba-sp-16); border-top: var(--site-rule) solid var(--ba-ok); }
.demo-list__num { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-result); line-height: var(--ba-lh-tight); font-variant-numeric: var(--ba-num); color: var(--ba-ink); }
.demo-list__text { color: var(--ba-ink-2); }
.demo-list__actions { margin-top: var(--site-sp-48); }
.bridge { display: flex; flex-wrap: wrap; gap: var(--ba-sp-8) var(--ba-sp-16); align-items: baseline; margin-top: var(--site-sp-48); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line); color: var(--ba-ink-2); }

@media (max-width: 960px) {
  .week__panel { grid-template-columns: minmax(0, 1fr); }
  .week__shot { grid-column: 1; margin-top: var(--ba-sp-16); }
  .hero__shot--card { justify-self: start; }
  .ladder__step { grid-template-columns: auto minmax(0, 1fr); }
  .ladder__fact { grid-column: 2; }
}
@media (max-width: 720px) {
  .door { padding: var(--ba-sp-24); }
  .door__cta { align-self: stretch; }
  .doors__grid:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
}

/* Крихти всередині героя сторінки дверей */
.hero--door { padding-top: var(--ba-sp-24); }
.hero--door .crumbs { padding-top: 0; margin-bottom: var(--site-sp-48); }

@media (max-width: 960px) { .hours-panel { justify-self: start; } }
@media (max-width: 960px) {
  .week--tabs .week__panel { grid-template-columns: minmax(0, 1fr); row-gap: var(--ba-sp-24); }
  .week--tabs .week__shot { grid-column: 1; }
}

:root { --site-fs-app: 13px; --site-fs-app-meta: 12px; --site-fs-app-head: 11px; --site-app-row: 36px; --site-app-ctl: 32px; }






/* Тиждень: панель — текст рядком зверху, екран на всю ширину під ним */
.week--tabs .week__panel { grid-template-columns: minmax(0, 1fr); row-gap: var(--ba-sp-24); align-items: start; }
.week--tabs .week__text { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--site-gap); align-items: baseline; }
.week--tabs .week__title { grid-row: 1 / span 2; }
.week--tabs .week__caption { max-width: var(--site-w-text); }
.week--tabs .week__next { grid-column: 2; }
.week--tabs .week__shot { grid-column: 1; min-height: 0; padding: var(--site-sp-48) var(--site-sp-64); }
.week--tabs .week__shot .app { max-width: 960px; }

@media (max-width: 960px) {
  .week--tabs .week__text { grid-template-columns: minmax(0, 1fr); }
  .week--tabs .week__title { grid-row: auto; }
  .week--tabs .week__next { grid-column: 1; }
  .week--tabs .week__shot { padding: var(--ba-sp-24); }
}

/* Кадри без сірого полотна, з тінню кадру сайту */
.week--tabs .week__shot { padding: 0; background: none; justify-content: flex-start; }
.week--tabs .week__shot .app { max-width: none; }
.week--tabs .week__shot .app-task { width: 100%; max-width: 420px; }

:root { --site-kb-col: 300px; --ba-surface-sunken-app: #F2F4F7; --ba-cat-1: #2C5C95; --ba-cat-2: #BE4839; --ba-cat-3: #21A3A0; --ba-cat-5: #E69825; --ba-sh-1: 0 1px 3px 0 rgb(10 21 35 / .10), 0 1px 2px -1px rgb(10 21 35 / .08); }
.btn { white-space: nowrap; }
.hero--door .hero__lead { max-width: 52ch; }

/* Тиждень: текст цінності ліворуч, кадр праворуч фіксованої висоти, «Далі» під кадром — усе в один екран */
:root { --site-week-stage-h: min(440px, calc(100vh - 330px)); }
.week--tabs .week__panel { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--site-sp-48); row-gap: var(--ba-sp-16); align-items: start; margin-top: var(--site-sp-48); }
.week--tabs .week__text { grid-column: 1; grid-row: 1 / span 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ba-sp-16); padding-top: var(--ba-sp-8); }
.week--tabs .week__title { grid-row: auto; }
.week--tabs .week__caption { font-size: var(--site-fs-lead); color: var(--ba-ink-2); }
.week--tabs .week__shot { grid-column: 2; grid-row: 1; position: relative; display: block; height: var(--site-week-stage-h); min-height: 280px; overflow: hidden; border-radius: var(--ba-radius-card); box-shadow: var(--site-shot-shadow); }
.week--tabs .week__shot .app { zoom: .82; width: auto; max-width: none; min-height: 100%; box-shadow: none; border-radius: 0; }
.week--tabs .week__shot .app-task { width: auto; max-width: none; }
.week--tabs .week__shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ba-sp-32); background: linear-gradient(to top, var(--ba-surface), transparent); pointer-events: none; }
.week--tabs .week__shot:has(.kb)::after { background: linear-gradient(to top, var(--ba-canvas), transparent); }
.week--tabs .week__next { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 0; }
@media (max-width: 960px) {
  .week--tabs .week__panel { grid-template-columns: minmax(0, 1fr); }
  .week--tabs .week__text, .week--tabs .week__shot, .week--tabs .week__next { grid-column: 1; grid-row: auto; }
}
.week--tabs .week__shot { height: auto; max-height: var(--site-week-stage-h); min-height: 0; }
.week--tabs .week__shot .app { min-height: 0; }
.week--tabs .week__shot:has(.app-task) { justify-self: start; width: 420px; max-width: 100%; }
.week--tabs .week__shot:has(.app-task)::after { display: none; }

/* Кадри в сторінках — обгортки місця (самі кадри — frames.css) */
.hero__frame { justify-self: center; width: 100%; max-width: 360px; }
.door__shot .app-table tbody tr:nth-child(n+2), .door__shot .app-table tfoot { display: none; }
@media (max-width: 960px) { .hero__frame { justify-self: start; } }

/* Кадри-фрагменти в наявних обгортках кадру (пачка 5) */
.shot--frame { padding: 0; background: none; }
.shot--frame.shot--narrow { justify-content: flex-start; }
.shot--frame .hours-panel, .shot--frame .app-task { width: auto; }
.hero__shot > .frame { max-width: 628px; }
.pillar__shot.shot--frame { aspect-ratio: auto; max-height: 320px; box-shadow: none; }
.audience__shot.shot--frame { min-width: 0; }
.hero--crumbs { padding-top: var(--ba-sp-24); }
.hero--crumbs .crumbs { padding-top: 0; margin-bottom: var(--site-sp-48); }

/* Двері — спокійніше (28.09): менше тексту на око, ситуації — компактним списком */
.doors .section__head { margin-bottom: var(--site-sp-48); }
.doors .section__lead { max-width: 60ch; }
.door { gap: var(--ba-sp-24); padding: var(--ba-sp-32); }
.door__pain { margin-top: calc(-1 * var(--ba-sp-16)); font-size: var(--site-fs-body); color: var(--ba-ink-3); }
.door__see { gap: var(--ba-sp-8); padding: 0; border: 0; }
.door__shot { max-width: 360px; }
.door__see-text { font-size: var(--site-fs-small); font-weight: var(--ba-fw-normal); color: var(--ba-ink-3); }
.door__situations { counter-reset: sit; border-top: 0; gap: var(--ba-sp-4); }
.door__situation { counter-increment: sit; position: relative; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--ba-sp-12) 0 var(--ba-sp-12) var(--ba-sp-32); border-bottom: 1px solid var(--ba-line-soft); }
.door__situation::before { content: counter(sit); position: absolute; left: 0; top: var(--ba-sp-12); display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--ba-radius-pill); background: var(--ba-accent-soft); color: var(--ba-accent-strong); font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); }
.door__said { font-size: var(--site-fs-body); }
.door__answer { font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.door__link { margin-top: 2px; font-size: var(--site-fs-small); }
.door__situation:last-child { border-bottom: 0; }
.door__shot .app { overflow: hidden; }

/* Двері = двері (28.09, слово власника): лише «хто ви», біль і вхід. Ситуації, кадри й числа — на сторінці дверей */
.doors__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-door-min)), 1fr)); }
a.door { display: flex; flex-direction: column; gap: var(--ba-sp-12); min-height: 0; padding: var(--ba-sp-32); background: var(--ba-surface); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); color: var(--ba-ink); transition: border-color var(--ba-dur-base) var(--ba-ease-out), box-shadow var(--ba-dur-base) var(--ba-ease-out); }
a.door:hover { color: var(--ba-ink); border-color: var(--ba-accent); box-shadow: var(--ba-sh-2); }
a.door .door__title { font-size: var(--site-fs-door); }
a.door .door__pain { margin: 0; font-size: var(--site-fs-lead); color: var(--ba-ink-2); }
a.door .door__cta { margin-top: auto; padding-top: var(--ba-sp-12); align-self: flex-start; font-size: var(--site-fs-body); color: var(--ba-accent-strong); }
a.door:hover .door__cta::after { transform: translateX(var(--ba-sp-4)); }
@media (max-width: 720px) { a.door { padding: var(--ba-sp-24); } }

/* Смуги глибини тарифу — не зливаються з тоновим тлом (28.09) */
.depth__bar { background: var(--ba-surface); border: 1px solid var(--ba-line); box-shadow: inset 4px 0 0 var(--st, var(--ba-accent)); padding-left: var(--ba-sp-16); }
.depth__bar--1 { --st: var(--st-1); border-color: var(--ba-accent-soft-2); }
.depth__bar--2 { --st: var(--st-2); border-color: var(--ba-ok-line); }
.depth__bar--3 { --st: var(--st-3); border-color: var(--ba-warn-line); }

/* Візуал світліший і багатший (28.09): тло героя — м'які плями + тонка сітка, секції майже білі */
.hero { position: relative; isolation: isolate; background:
  radial-gradient(60% 70% at 88% 20%, color-mix(in oklab, var(--ba-accent-soft) 70%, transparent), transparent 70%),
  radial-gradient(45% 60% at 8% 90%, color-mix(in oklab, var(--ba-info-soft) 90%, transparent), transparent 70%),
  var(--ba-surface); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(color-mix(in oklab, var(--ba-line) 45%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--ba-line) 45%, transparent) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(70% 80% at 70% 40%, black, transparent 75%); mask-image: radial-gradient(70% 80% at 70% 40%, black, transparent 75%); }
.section--tint { background: linear-gradient(180deg, color-mix(in oklab, var(--ba-info-soft) 55%, var(--ba-surface)), var(--ba-surface)); }
.doors { background: radial-gradient(50% 60% at 50% 0%, color-mix(in oklab, var(--ba-accent-soft) 45%, transparent), transparent 70%), var(--ba-surface); }
a.door { background: color-mix(in oklab, var(--ba-surface) 88%, transparent); backdrop-filter: blur(6px); }
.hero__lead { max-width: 44ch; }
#how .chain__body { gap: var(--ba-sp-8); }

/* Одне число скрізь */
/* Біль «Гроші за зроблене» (нова головна 16.10, тип секції `pain`): службова розкладка до верстки виконавця — значення лише з токенів. */
.pain2__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-gap); }
.pain2__item { display: grid; gap: var(--ba-sp-8); align-content: start; padding: var(--ba-sp-24); border: 1px solid var(--ba-line-soft); border-radius: var(--ba-radius-card); background: var(--ba-surface); }
.pain2__text { font-size: var(--site-fs-lead); color: var(--ba-ink); }
.pain2__num { font-size: var(--site-fs-h2); font-weight: var(--ba-fw-semi); color: var(--ba-accent-strong); }
.pain2__src { font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.pain2__bridge { margin-top: var(--site-gap); font-size: var(--site-fs-lead); color: var(--ba-ink-2); max-width: var(--site-measure); }
@media (max-width: 960px) { .pain2__grid { grid-template-columns: minmax(0, 1fr); } }
.same { background: radial-gradient(50% 60% at 20% 30%, color-mix(in oklab, var(--ba-ok-soft) 80%, transparent), transparent 70%), var(--ba-surface); }
.same__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--site-gap); align-items: start; }
.same__col { display: grid; gap: var(--site-gap); min-width: 0; }
.same__cell { display: grid; gap: var(--ba-sp-8); min-width: 0; }
.same__label { font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-ink-3); }
.same .hours-panel__row--total dd, .same .app-table tbody tr:first-child .app-strong { color: var(--ba-ok); }
.same .app-table tbody tr:nth-child(n+2), .same .app-table tfoot { opacity: .45; }
/* Переїзд без ризику */
.move { background: linear-gradient(180deg, color-mix(in oklab, var(--ba-accent-soft) 40%, var(--ba-surface)), var(--ba-surface)); }
.move__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--site-gap); align-items: center; }
.move .section__head, .move__grid > div:first-child .section__title { margin-bottom: 0; }
.move__side { display: grid; gap: var(--ba-sp-24); }
.move__src { display: flex; flex-wrap: wrap; gap: var(--ba-sp-12); }
.move__src li { padding: var(--ba-sp-12) var(--ba-sp-16); background: var(--ba-surface); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); box-shadow: var(--ba-sh-1); font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); }
.move__steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ba-sp-8); counter-reset: none; }
.move__steps li { display: inline-flex; align-items: center; gap: var(--ba-sp-8); color: var(--ba-ink-2); font-weight: var(--ba-fw-medium); }
.move__steps li + li::before { content: ""; width: var(--ba-sp-24); height: var(--site-rule); background: var(--ba-line-strong); margin-right: var(--ba-sp-4); }
.move__steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--ba-radius-pill); background: var(--ba-surface); border: 1px solid var(--ba-line); font-size: var(--site-fs-kicker); }
.move__step--key { color: var(--ba-ink); }
.move__step--key b { background: var(--ba-accent); border-color: var(--ba-accent); color: var(--ba-on-accent); }
@media (max-width: 960px) { .same__grid, .move__grid { grid-template-columns: minmax(0, 1fr); } }
/* Герой на телефоні: канбан нижчий і з м'яким обрізом */
@media (max-width: 720px) {
  .hero__shot .kb { max-height: 360px; -webkit-mask-image: linear-gradient(black 75%, transparent); mask-image: linear-gradient(black 75%, transparent); }
  .hero__shot .kb-col:nth-child(n+2) { display: none; }
  .hero__shot .kb-col { flex: 1 1 auto; width: auto; }
}
.move__src li { white-space: nowrap; }
.same__cell--panel .frame { justify-self: start; width: 100%; max-width: 360px; }
.same__cell--panel .app { overflow: hidden; }
.move__wrap { display: grid; gap: var(--site-sp-48); }
.move__groups { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: var(--site-gap); }
.move__group { display: grid; gap: var(--ba-sp-12); align-content: start; }
.move__label { font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-ink-3); }
.move__src--csv li { background: color-mix(in oklab, var(--ba-surface) 70%, transparent); box-shadow: none; border-style: dashed; color: var(--ba-ink-2); }
.move__steps { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: var(--ba-sp-12); flex-wrap: nowrap; }
.move__steps li { white-space: nowrap; }
.move__steps li + li::before { width: clamp(16px, 6vw, 96px); }
@media (max-width: 960px) { .move__groups { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .move__steps { grid-template-columns: minmax(0, 1fr); justify-content: start; } .move__steps li + li::before { display: none; } }
.move__src--all { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--ba-sp-12); }
.move__src--all li { display: flex; align-items: center; justify-content: center; min-height: 64px; text-align: center; }
.move__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-gap); }
.move__fact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ba-sp-16); align-items: start; font-size: var(--site-fs-lead); color: var(--ba-ink-2); }
.move__fact b { color: var(--ba-ink); font-weight: var(--ba-fw-semi); }
.move__fact-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ba-radius-pill); background: var(--ba-accent); color: var(--ba-on-accent); font-weight: var(--ba-fw-semi); }
@media (max-width: 720px) { .move__facts { grid-template-columns: minmax(0, 1fr); } }

/* Заклики (28.09) */
.header__login { margin-left: auto; }
.nav { margin-right: 0; }
.header__demo { flex: none; }
/* Перемикач мови в шапці (САЙТ-ПЕРЕМИКАЧ-ВИГЛЯД, 14.10; перша редакція — САЙТ-ПЕРЕМИКАЧ-МОВ, 12.10). Згорнутий — контрол
 * тієї ж руки, що «Увійти»: висота `btn--sm`, рамка й радіус контрола, код мови напівжирним. Значка мови немає свідомо:
 * код уже каже «мова», а значок дав би +20 px у смузі, де місця нема (721–1200). Прапорів немає — мова не країна.
 * Відкритий — картка поверх сторінки праворуч під перемикачем: назва мови її ж мовою, праворуч код дрібним капсом, поточна —
 * заливкою вибору, акцентом і галочкою. Галочка намальована рамкою, не символом «✓»: у підмножинах шрифту його немає, і на
 * частині систем він падав в інший шрифт. Порядок — генератор (`site/мови.json`). Висоти: рядок 36 (телефон 44). */
:root {
  --site-lang-w: 208px;
  --site-lang-h: calc(var(--site-btn-h) - var(--ba-sp-8));
  --site-lang-check-w: 10px;
  --site-lang-check-h: 5px;
  --site-lang-shift: -4px;
}
.langdrop { position: relative; flex: none; margin-left: auto; }
.langdrop + .header__login { margin-left: 0; }
.langdrop__toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--ba-sp-4); min-height: var(--site-lang-h); padding: 0 var(--ba-sp-8) 0 var(--ba-sp-12); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); background: var(--ba-surface); color: var(--ba-ink-2); font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); line-height: 1; cursor: pointer; list-style: none; user-select: none; transition: background-color var(--ba-dur-fast) var(--ba-ease-out), border-color var(--ba-dur-fast) var(--ba-ease-out), color var(--ba-dur-fast) var(--ba-ease-out); }
.langdrop__toggle::-webkit-details-marker { display: none; }
.langdrop__toggle svg { width: var(--ba-sp-12); height: var(--ba-sp-12); color: var(--ba-ink-3); transition: transform var(--ba-dur-base) var(--ba-ease-out); }
.langdrop__toggle:hover { background: var(--ba-fill-hover); border-color: var(--ba-line-strong); color: var(--ba-ink); }
.langdrop[open] .langdrop__toggle { background: var(--ba-accent-soft); border-color: var(--ba-accent-soft-2); color: var(--ba-accent-strong); }
.langdrop[open] .langdrop__toggle svg { color: var(--ba-accent-strong); transform: rotate(180deg); }
.langdrop__toggle:focus-visible { outline: none; border-color: var(--ba-accent); box-shadow: var(--ba-ring); }
.langdrop__list { position: absolute; right: 0; top: 100%; z-index: 11; display: grid; gap: 1px; width: max-content; min-width: var(--site-lang-w); max-width: calc(100vw - 2 * var(--site-gutter)); margin: var(--ba-sp-4) 0 0; padding: var(--ba-sp-4); list-style: none; background: var(--ba-surface); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); box-shadow: var(--ba-sh-2); }
.langdrop[open] .langdrop__list { animation: langdrop-in var(--ba-dur-base) var(--ba-ease-out); }
@keyframes langdrop-in { from { opacity: 0; transform: translateY(var(--site-lang-shift)); } }
.langdrop__list a { display: grid; grid-template-columns: var(--ba-sp-16) minmax(0, 1fr) auto; align-items: center; column-gap: var(--ba-sp-8); min-height: var(--ba-row-h); padding: 0 var(--ba-sp-12) 0 var(--ba-sp-8); border-radius: var(--ba-radius); color: var(--ba-ink); font-size: var(--site-fs-small); font-weight: var(--ba-fw-medium); white-space: nowrap; text-decoration: none; }
.langdrop__list a::before { content: ""; }
.langdrop__list a::after { content: attr(hreflang); padding-left: var(--ba-sp-16); color: var(--ba-ink-3); font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-medium); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; }
.langdrop__list a:hover { background: var(--ba-fill-hover); color: var(--ba-ink); }
.langdrop__list a:focus-visible { outline: var(--site-rule) solid var(--ba-accent); outline-offset: calc(-1 * var(--site-rule)); }
.langdrop__list a[aria-current] { background: var(--ba-fill-selected); color: var(--ba-accent-strong); font-weight: var(--ba-fw-semi); text-decoration: none; }
.langdrop__list a[aria-current]::before { justify-self: center; width: var(--site-lang-check-w); height: var(--site-lang-check-h); border: solid currentColor; border-width: 0 0 var(--site-rule) var(--site-rule); transform: translateY(calc(var(--site-rule) * -1)) rotate(-45deg); }
.langdrop__list a[aria-current]::after { content: attr(lang); color: var(--ba-accent-strong); }
.help-hnav .langdrop { margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
  .langdrop[open] .langdrop__list { animation: none; }
  .langdrop__toggle svg { transition: none; }
}
/* 721–1200 смуга повна: перемикач тепер ВИДНО, а місце звільняє проміжок смуги (32 → 16, чотири проміжки = −64) і стисла
 * кнопка без шеврона (−16). Розрахунок проти браку з черги: +31 на 740, +45 на 920, +71 на 1120 → запас 49 / 35 / 9 px.
 * На телефоні (≤720) перемикач лишається в смузі поруч із бургером — один дотик, ціль 44.
 * Замір на стенді 12.10: на 920 бракувало ще 25 px (розрахунок давав запас 35), тому в 901–1000 пункти меню стиснуто до 4.
 * 14.10: згорнутий у цьому діапазоні — 8 + код + 8 + рамка 2 ≈ 35 px (12.10 був ≈ 33: ті самі поля без рамки). */
@media (min-width: 901px) and (max-width: 1000px) {
  .header .nav .nav__link { padding-inline: var(--ba-sp-4); }
}
@media (min-width: 721px) and (max-width: 1200px) {
  .header:not(.header--help) .header__bar { gap: var(--ba-sp-16); }
  .langdrop__toggle { padding-inline: var(--ba-sp-8); }
  .langdrop__toggle svg { display: none; }
}
/* 721–960 (САЙТ-МЕНЮ-АУДИТОРІЯ, 14.10; перша редакція — 721–800, замір 13.10). Одразу після мобільної розкладки смузі
 * бракує місця підписам меню, а не перемикачу. Замір стенда 14.10 (пʼять пунктів, перемикач у редакції 14.10, «Увійти»
 * сховано до 1100) без цього блоку: uk −14 px на 820; pt-BR −82 на 820, −67 на 740, −7 на 901. Місце: проміжок смуги
 * 16 → 8, проміжок меню 4 → 0, поля демо 16 → 12; до 900 ще поля пунктів 8 → 4 і «Партнерам» сховано (у бургері й підвалі
 * пункт лишається) — та сама міра, що стояла тут для «Порівняння» й «Партнерам» до 14.10. Числа запасу — README пачки. */
@media (min-width: 721px) and (max-width: 960px) {
  .header:not(.header--help) .header__bar { gap: var(--ba-sp-8); }
  .header .nav { gap: 0; }
  .header .header__demo { padding-inline: var(--ba-sp-12); }
}
@media (min-width: 721px) and (max-width: 900px) {
  .header .nav .nav__link { padding-inline: var(--ba-sp-4); }
  .nav > .nav__link[href$="/partners/"] { display: none; }
}
@media (max-width: 720px) {
  .langdrop__toggle { min-width: 44px; min-height: 44px; padding-inline: var(--ba-sp-8); }
  .langdrop__toggle svg { display: none; }
  .langdrop__list { position: fixed; top: var(--site-header-h); right: var(--site-gutter); left: auto; }
  .langdrop__list a { min-height: 44px; }
}
.section__more { margin-top: var(--site-sp-48); }
.move .actions { margin-top: var(--ba-sp-8); }
.sticky-cta { display: none; }
@media (max-width: 720px) {
  .header__demo { display: none; }
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; padding: var(--ba-sp-12) var(--site-gutter) calc(var(--ba-sp-12) + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--ba-surface) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--ba-line-soft); transform: translateY(100%); transition: transform var(--ba-dur-slow, .28s) var(--ba-ease-out); }
  .sticky-cta .btn { width: 100%; }
  .sticky-cta.is-on { transform: none; }
  body.menu-open .sticky-cta { display: none; }
  .footer { padding-bottom: calc(var(--site-sp-48) + 72px); }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .header__bar { gap: var(--ba-sp-12); }
  .nav .nav__link { padding: var(--ba-sp-8); }
  .header__login { display: none; }
}

/* Сторінки напрямків (for/consulting, for/goods) */
.hero--dir { padding-top: var(--ba-sp-24); }
.hero--dir .crumbs { padding-top: 0; margin-bottom: var(--site-sp-48); }
.hero__frame--wide { max-width: 560px; }
.pains__list { display: flex; flex-wrap: wrap; gap: var(--ba-sp-12); }
.pains__item { padding: var(--ba-sp-12) var(--ba-sp-16); background: var(--ba-surface); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-pill); color: var(--ba-ink-2); font-size: var(--site-fs-body); }
.pains .section__title { margin-bottom: var(--ba-sp-24); }
.feat__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--site-sp-48); align-items: center; }
.feat--rev .feat__text { order: 2; }
.feat__text { display: grid; gap: var(--ba-sp-12); }
.feat__title { font-size: var(--site-fs-h2); line-height: 1.1; letter-spacing: var(--site-ls-hero); }
.feat__lead { font-size: var(--site-fs-lead); color: var(--ba-ink-2); }
.feat__shot { min-width: 0; }
.feat__shot > .frame { max-width: 100%; }
.feat .section { padding: 0; }
.feat { padding: var(--site-sp-64) 0; }
.ints .section__title { margin-bottom: var(--ba-sp-24); }
/* ІНТ-ПОСИЛАННЯ (13.10): назва сервісу в плитці — посилання на його сторінку; «Усі інтеграції» під плитками й під
   переліком рішення (`solutions/api`). Діє лише коли сторінки інтеграцій опубліковані. */
.move__src--all li a { color: inherit; text-decoration: none; }
.move__src--all li a:hover { color: var(--ba-accent); }
.ints__all { margin-top: var(--ba-sp-24); }
.facts-row__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gap); }
.facts-row__item { padding-top: var(--ba-sp-16); border-top: var(--site-rule) solid var(--ba-accent); font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); }
@media (max-width: 960px) { .feat__grid, .facts-row__list { grid-template-columns: minmax(0, 1fr); } .feat--rev .feat__text { order: 0; } }

/* Кадри в героях (перенесено з frames.css — контекст сторінки, не кадру) */
.hero .frame .app-table th,.hero .frame .app-table td{white-space:normal;padding-inline:var(--ba-sp-8)}
.hero .frame .app-table__chk,.hero .frame td.app-icon{display:none}
.hero .frame .app-cut{max-width:none}
.hero .frame .app-name{flex-wrap:wrap;row-gap:2px}
.hero .frame .app-kpis--4,.hero .frame .app-cards3{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero .frame .app-doc__bar{flex-wrap:wrap}
.hero .frame .app-bar .app-input--search{min-width:0}
.hero .frame .kb__cols{overflow:hidden}
.hero .frame .app-path{width:96px}
.hero .frame .app{overflow-x:hidden}
.hero .frame--company-debt .app{min-width:0}
.hero .frame .app{font-size:var(--site-fs-app-meta)}
.hero .frame .app-row,.hero .frame .app-page__head{flex-wrap:wrap}
.hero .frame .app-input--grow{flex-basis:100%}
.hero .frame .app-badge{white-space:normal}
.hero .frame .app-kpi--inline{flex-wrap:wrap}
.hero .frame .app-legend{flex-wrap:wrap}
.hero .frame p,.hero .frame .app-doc__bar p,.hero .frame .app-kpi p,.hero .frame .app-card-pad p{text-wrap:wrap;white-space:normal}
.hero .frame .app-path{width:64px}
.hero .frame .app-doc__actions,.hero .frame .app-bar{flex-wrap:wrap}
.hero .frame .app-btn{white-space:nowrap}
.hero .frame .app-tabs{flex-wrap:wrap;column-gap:var(--ba-sp-16)}
.hero .frame .kb-col{flex:1 1 0;width:auto;min-width:0}
.pains__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pains__item { border-radius: var(--ba-radius-card); padding: var(--ba-sp-16); line-height: var(--ba-lh-base); border-top: var(--site-rule) solid var(--ba-danger-line); }
.app-phone__list b { white-space: nowrap; }

/* Кадри на сторінках напрямків — ширша колонка кадру й дрібніший масштаб, щоб таблиці вміщались без прокрутки */
.feat__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--site-sp-48); }
.feat__shot .app { zoom: .86; }
.feat__shot .app-task, .feat__shot .hours-panel, .feat__shot .app-phone { zoom: 1; }
.hero--dir .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hero__frame--wide { max-width: none; }
.hero--dir .hero__frame .app { zoom: .9; }
@media (max-width: 960px) { .feat__shot .app { zoom: .8; } }
@media (max-width: 720px) { .feat__shot .app { zoom: .72; } }
.feat__shot .app-table td:not(.app-num), .feat__shot .app-table th:not(.app-num) { white-space: normal; }
.feat__shot .app-table td { height: auto; padding-block: var(--ba-sp-8); }
.feat__shot .app-table__chk, .feat__shot td.app-icon { display: none; }
.feat__shot .app-cut { max-width: none; }
.feat__shot .app-page__head { flex-wrap: wrap; }
.feat--rev .feat__grid { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); }
@media (max-width: 960px) { .feat--rev .feat__grid { grid-template-columns: minmax(0, 1fr); } }
.feat__grid:has(.app-task, .hours-panel, .app-phone) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.feat__grid:has(.app-task, .hours-panel, .app-phone) .feat__shot { justify-self: center; }
.feat__shot .app-task, .feat__shot .hours-panel { zoom: 1.12; }
.hero--dir .hero__frame:has(.hours-panel) { justify-self: center; }
.hero--dir .hero__frame .hours-panel { zoom: 1.4; }
@media (max-width: 960px) { .hero--dir .hero__frame .hours-panel { zoom: 1.15; } .feat__grid:has(.app-task, .hours-panel, .app-phone) { grid-template-columns: minmax(0, 1fr); } }
.feat__shot .app-task { width: 30rem; max-width: 100%; }
.feat__shot .app-task .app-muted, .feat__shot .app-task__timer > span { white-space: nowrap; }
.step:has(.shot--frame:not(.shot--narrow)) { grid-template-columns: var(--site-rail) minmax(0, 3fr) minmax(0, 9fr); }
.step:has(.shot--narrow) { grid-template-columns: var(--site-rail) minmax(0, 1fr) minmax(0, 1fr); }
.step .shot--frame.shot--narrow { justify-content: center; }
.step .shot--frame { max-height: none; }
.step .shot--frame .app { zoom: .86; }
.step .shot--frame .app-task, .step .shot--frame .hours-panel { zoom: 1.12; }
.step .shot--frame .app-table td:not(.app-num), .step .shot--frame .app-table th:not(.app-num) { white-space: normal; }
.step .shot--frame .app-table td { height: auto; padding-block: var(--ba-sp-8); }
.step .shot--frame .app-table__chk, .step .shot--frame td.app-icon { display: none; }
.step .shot--frame .app-cut { max-width: none; }
.step .shot--frame .app-page__head { flex-wrap: wrap; }
.step .shot--frame .app-task { width: 30rem; max-width: 100%; }
.step .shot--frame .app-task .app-muted, .step .shot--frame .app-task__timer > span { white-space: nowrap; }
@media (max-width: 960px) { .step:has(.shot--frame:not(.shot--narrow)), .step:has(.shot--narrow) { grid-template-columns: var(--site-rail) minmax(0, 1fr); } .step .shot--frame { grid-column: 2; grid-row: auto; margin-top: var(--ba-sp-24); } .step .shot--frame .app { zoom: .8; } }
@media (max-width: 720px) { .step .shot--frame .app { zoom: .72; } }

/* Перенесено з хвоста генератора (відповідь на пачку 16) */
.same__cell { grid-template-columns: minmax(0, 1fr); }
.same .app-table th:nth-child(3), .same .app-table td:nth-child(3) { display: none; }
.same .app-table td:first-child, .same .app-table .app-badge { white-space: normal; }
.cmp { position: relative; }
@media (max-width: 960px) { .hero--dir .hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .hero--dir .hero__frame .hours-panel, .feat__shot .app-task, .feat__shot .hours-panel, .feat__shot .app-phone { zoom: 1; }
  .feat__shot .app-task { width: 100%; }
  .feat__shot .app-task .app-muted, .feat__shot .app-task__timer > span { white-space: normal; }
}
.door--soon { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding: var(--ba-sp-32); background: color-mix(in oklab, var(--ba-surface) 88%, transparent); border: 1px dashed var(--ba-line-strong); border-radius: var(--ba-radius-card); }
.door--soon .door__title { font-size: var(--site-fs-door); }
.door--soon .door__pain { margin: 0; font-size: var(--site-fs-lead); color: var(--ba-ink-2); }
.door__soon { margin-top: auto; padding-top: var(--ba-sp-12); font-size: var(--site-fs-small); color: var(--ba-ink-3); }
@media (max-width: 720px) { .door--soon { padding: var(--ba-sp-24); } }
/* Сторінка інтеграторів */
.hero--dir .hero__frame--table { min-width: 0; width: 100%; max-width: none; justify-self: stretch; }
.hero--dir .hero__frame--table .app { zoom: .86; }
.cta__lead { max-width: var(--site-w-text); margin-inline: auto; color: var(--ba-ink-2); font-size: var(--site-fs-lead); text-wrap: pretty; }
.feat__text .more { align-self: start; }
.feat__shot .hours-panel { zoom: 1; width: 24rem; max-width: 100%; }
.hero--dir .hero__frame--table .app-table td { height: auto; padding-block: var(--ba-sp-8); }
@media (max-width: 960px) { .feat__grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 721px) { .hero--dir .hero__frame--table .app-table td:first-child, .hero--dir .hero__frame--table .app-badge { white-space: nowrap; } .hero--dir .hero__frame--table .app-name { flex-wrap: nowrap; } }
@media (max-width: 720px) { .hero--dir .hero__frame--table .app { zoom: .72; overflow-x: auto; } .hero--dir .hero__frame--table .app-table th:nth-child(3), .hero--dir .hero__frame--table .app-table td:nth-child(3) { display: none; } }
@media (max-width: 720px) { .feat__shot .app-doc__fields { grid-template-columns: minmax(0, 1fr); } .feat__shot .app-tabs { flex-wrap: wrap; column-gap: var(--ba-sp-16); } .feat__shot .app-block { min-width: 0; max-width: 100%; overflow-x: auto; } }
@media (max-width: 720px) { .feat__grid:has(.hours-panel) .feat__shot { justify-self: stretch; } .feat__shot .hours-panel { width: 100%; } }

/* ---- frames.css (пачки 5–16, кадри розміткою) ---- */
/* frames.css — кадри продукту розміткою; після site.css; лише змінні --ba-* і --site-*, без сирих кольорів.
   (14.10, wave-1410: тут стояв вираз із зірочкою й косою впритул — він закривав коментар, хвіст ставав селектором,
   і браузер відкидав правило .frame нижче; знайшов виконавець. 22.10: саме це пояснення цитувало
   той вираз дослівно і закривало себе так само — цитату знято.) */
.frame{margin:0;min-width:0}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.hours-panel{justify-self:center;width:100%;max-width:360px;background:var(--ba-surface);border:1px solid var(--ba-line);border-radius:var(--ba-radius-card);box-shadow:var(--site-shot-shadow);font-variant-numeric:var(--ba-num)}.hours-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--ba-sp-12);padding:var(--ba-sp-8) var(--ba-sp-16);border-bottom:1px solid var(--ba-line-soft)}.hours-panel__title{font-size:var(--site-fs-h3);font-weight:var(--ba-fw-semi);color:var(--ba-ink)}.hours-panel__btn{display:inline-flex;align-items:center;gap:var(--ba-sp-4);height:32px;padding:0 var(--ba-sp-12);border:1px solid var(--ba-line-strong);border-radius:var(--ba-radius);font-size:var(--site-fs-small);font-weight:var(--ba-fw-medium);color:var(--ba-ink);white-space:nowrap;flex:none}.hours-panel__btn svg{width:var(--ba-sp-16);height:var(--ba-sp-16)}.hours-panel__body{display:flex;flex-direction:column;gap:var(--ba-sp-4);padding:var(--ba-sp-16)}.hours-panel__value{font-size:var(--site-fs-door);font-weight:var(--ba-fw-semi);line-height:var(--ba-lh-tight);color:var(--ba-danger)}.hours-panel__bar{height:var(--ba-sp-8);border-radius:var(--ba-radius-pill);background:var(--ba-danger)}.hours-panel__over{font-size:var(--site-fs-kicker);color:var(--ba-danger)}.hours-panel__overage{font-size:var(--site-fs-kicker);font-weight:var(--ba-fw-medium);color:var(--ba-warn)}.hours-panel__money{display:flex;flex-direction:column;gap:2px;margin:var(--ba-sp-8) 0 0;padding-top:var(--ba-sp-8);border-top:1px solid var(--ba-line-soft);font-size:var(--site-fs-kicker)}.hours-panel__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ba-sp-8)}.hours-panel__row dt{color:var(--ba-ink-3)}.hours-panel__row dd{margin:0;color:var(--ba-ink)}.hours-panel__row--total dt{font-weight:var(--ba-fw-medium);color:var(--ba-ink-2)}.hours-panel__row--total dd{font-weight:var(--ba-fw-medium)}.app{min-width:0;overflow-x:auto;overflow-y:hidden;background:var(--ba-surface);border:1px solid var(--ba-line);border-radius:var(--ba-radius-card);box-shadow:var(--site-sh-strip);font-family:var(--ba-font);font-size:var(--site-fs-app);line-height:1.4;color:var(--ba-ink);text-align:left;font-variant-numeric:var(--ba-num)}.app p{margin:0}.app svg{flex:none;width:14px;height:14px}.app-muted{color:var(--ba-ink-3)}.app-ink{color:var(--ba-ink)}.app-strong{font-weight:var(--ba-fw-semi)}.app-num{text-align:right;white-space:nowrap}.app-link{display:inline-flex;align-items:center;gap:var(--ba-sp-4);color:var(--ba-accent-strong);font-weight:var(--ba-fw-medium)}.app-check{display:inline-block;width:14px;height:14px;border:1px solid var(--ba-line-strong);border-radius:3px;background:var(--ba-surface);vertical-align:middle}.app-icon{display:inline-flex;color:var(--ba-ink-3)}.app-label{font-size:var(--site-fs-app-head);font-weight:var(--ba-fw-semi);letter-spacing:var(--ba-ls-wide);text-transform:uppercase;color:var(--ba-ink-3)}.app-req{color:var(--ba-danger)}.app-input{display:flex;align-items:center;min-height:var(--site-app-ctl);padding:0 var(--ba-sp-8);border:1px solid var(--ba-line);border-radius:var(--ba-radius);background:var(--ba-surface)}.app-badge{display:inline-flex;align-items:center;gap:var(--ba-sp-4);padding:1px var(--ba-sp-8);border:1px solid var(--ba-line);border-radius:var(--ba-radius);font-size:var(--site-fs-app-meta);font-weight:var(--ba-fw-medium);line-height:1.5;white-space:nowrap}.app-badge__dot{width:5px;height:5px;border-radius:var(--ba-radius-pill);background:currentColor}.app-badge--info{background:var(--ba-info-soft);border-color:var(--ba-info-line);color:var(--ba-info)}.app-badge--accent{background:var(--ba-accent-soft);border-color:var(--ba-accent-soft-2);color:var(--ba-accent-strong)}.app-badge--warn{background:var(--ba-warn-soft);border-color:var(--ba-warn-line);color:var(--ba-warn)}.app-btn{display:inline-flex;align-items:center;gap:var(--ba-sp-8);height:var(--site-app-ctl);padding:0 var(--ba-sp-12);border:1px solid transparent;border-radius:var(--ba-radius);font-weight:var(--ba-fw-semi);white-space:nowrap}.app-btn--outline{border-color:var(--ba-line-strong);background:var(--ba-surface);color:var(--ba-ink)}.app-btn--focus{box-shadow:var(--ba-ring);border-color:var(--ba-accent)}.app-btn--ghost{color:var(--ba-ink-3);font-weight:var(--ba-fw-medium)}.app-btn--primary{background:var(--ba-accent);color:var(--ba-on-accent)}.app-btn--disabled{background:var(--ba-fill-hover);color:var(--ba-ink-3);padding-right:0;gap:0}.app-btn__split{display:inline-flex;align-items:center;height:100%;margin-left:var(--ba-sp-12);padding:0 var(--ba-sp-8);border-left:1px solid var(--ba-line)}.app-btn--icon{padding:0 var(--ba-sp-8)}.app-table{width:100%;border-collapse:collapse}.app-table th{height:var(--site-app-row);padding:0 var(--ba-sp-12);background:var(--ba-fill-hover);border-bottom:1px solid var(--ba-line);font-size:var(--site-fs-app-head);font-weight:var(--ba-fw-semi);letter-spacing:var(--ba-ls-wide);text-transform:uppercase;color:var(--ba-ink-3);text-align:left;white-space:nowrap}.app-table th.app-num{text-align:right}.app-table td{height:var(--site-app-row);padding:0 var(--ba-sp-12);border-bottom:1px solid var(--ba-line-soft);white-space:nowrap}.app-table tbody tr:last-child td{border-bottom:0}.app-table__chk{width:14px;padding-right:0}.app-table__sub td{height:auto;padding-top:0;padding-bottom:var(--ba-sp-4);font-size:var(--site-fs-app-meta);border-bottom:1px solid var(--ba-line-soft)}.app-table tr:has(+.app-table__sub) td{border-bottom:0}.app-table__warn td:first-child{box-shadow:inset var(--ba-marker-w) 0 0 var(--ba-danger)}.app-cut{max-width:220px;overflow:hidden;text-overflow:ellipsis}.app-table tfoot td{height:var(--site-app-row);padding:0 var(--ba-sp-12);border-top:1px solid var(--ba-line);font-weight:var(--ba-fw-semi)}.app-name{display:inline-flex;align-items:center;gap:var(--ba-sp-8);color:var(--ba-accent-strong);font-weight:var(--ba-fw-medium)}.app-name svg{color:var(--ba-ink-3)}.app-total{font-size:var(--site-fs-body)}.app-task{width:100%;max-width:420px}.app-task__head{display:flex;justify-content:space-between;gap:var(--ba-sp-12);padding:var(--ba-sp-16) var(--ba-sp-16) var(--ba-sp-8)}.app-task__title{font-family:var(--ba-font-display);font-weight:var(--ba-fw-semi);font-size:var(--site-fs-door);line-height:var(--ba-lh-tight)}.app-task__timer{display:flex;align-items:center;gap:var(--ba-sp-12);padding:0 var(--ba-sp-16);color:var(--ba-ink-2)}.app-task>.app-link{padding:var(--ba-sp-12) var(--ba-sp-16) var(--ba-sp-16)}.app-task__body{display:grid;gap:var(--ba-sp-8);padding:var(--ba-sp-16);border-top:1px solid var(--ba-line)}.app-task__done{display:flex;align-items:center;gap:var(--ba-sp-8);margin-bottom:var(--ba-sp-8)!important;padding:var(--ba-sp-8) var(--ba-sp-12);border-radius:var(--ba-radius-card);background:var(--ba-surface-sunken)}.app-doc__head{display:grid;gap:var(--ba-sp-4);padding:var(--ba-sp-12) var(--ba-sp-16)}.app-doc__bar{display:flex;justify-content:space-between;align-items:center;gap:var(--ba-sp-16)}.app-doc__actions{display:flex;align-items:center;gap:var(--ba-sp-8)}.app-doc__title{display:flex;align-items:center;gap:var(--ba-sp-8);font-family:var(--ba-font-display);font-weight:var(--ba-fw-semi);font-size:var(--site-fs-h3)}.app-doc__title svg{color:var(--ba-ink-3)}.app-doc__canvas{display:grid;gap:var(--ba-sp-12);padding:var(--ba-sp-12);background:var(--ba-canvas)}.app-block{background:var(--ba-surface);border:1px solid var(--ba-line);border-radius:var(--ba-radius-card)}.app-doc__fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--ba-sp-24);padding:var(--ba-sp-12) var(--ba-sp-16)}.app-doc__fields>div{display:grid;gap:var(--ba-sp-4);align-content:start}.app-tabs{display:flex;gap:var(--ba-sp-24);padding:0 var(--ba-sp-16);border-bottom:1px solid var(--ba-line);color:var(--ba-ink-2);font-weight:var(--ba-fw-medium)}.app-tabs>span{padding:var(--ba-sp-8) 0}.app-tabs__on{color:var(--ba-ink);box-shadow:inset 0 calc(-1*var(--ba-marker-w)) 0 var(--ba-accent)}.app-doc__frozen{display:flex;align-items:center;gap:6px;padding:var(--ba-sp-12) var(--ba-sp-16) var(--ba-sp-8);font-size:var(--site-fs-app-meta)}.app-table--boxed{width:calc(100% - 2 * var(--ba-sp-12));margin:0 var(--ba-sp-12) var(--ba-sp-12);border:1px solid var(--ba-line)}.app-table--boxed tfoot td{background:var(--ba-fill-hover)}.app-tile{display:grid;gap:var(--ba-sp-4);padding:var(--ba-sp-12) var(--ba-sp-16)}.app-tile__head{display:flex;justify-content:space-between;gap:var(--ba-sp-12)}.app-tile__value{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ba-sp-8) var(--ba-sp-12)}.app-tile__value strong{font-size:var(--site-fs-h3);font-weight:var(--ba-fw-semi)}@media (max-width:960px){.app-table th,.app-table td{padding:0 var(--ba-sp-8)}}@media (max-width:960px){.app-name{flex-wrap:wrap;row-gap:var(--ba-sp-4);padding:var(--ba-sp-4) 0}}.app{box-shadow:var(--site-shot-shadow);border-color:transparent}.kb{position:relative;overflow:hidden;padding:var(--ba-sp-12);background:var(--ba-canvas)}.kb__cols{display:flex;gap:var(--ba-sp-12)}.kb__fade{position:absolute;top:0;bottom:0;right:0;width:var(--ba-sp-24);background:linear-gradient(to left,var(--ba-canvas),transparent);pointer-events:none}.kb-col{display:flex;flex-direction:column;flex:none;width:var(--site-kb-col);overflow:hidden;background:var(--ba-surface-sunken-app);border:1px solid var(--ba-line);border-radius:var(--ba-radius-card)}.kb-col__stripe{height:var(--ba-sp-4);background:var(--kb-st)}.kb-col__head{display:flex;align-items:center;gap:var(--ba-sp-8);height:var(--site-app-row);padding:0 var(--ba-sp-12);border-bottom:1px solid var(--ba-line)}.kb-col__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--site-fs-app-head);font-weight:var(--ba-fw-medium);letter-spacing:var(--ba-ls-wide);text-transform:uppercase;color:var(--ba-ink-3)}.kb-col__count{font-size:var(--site-fs-app-meta);color:var(--ba-ink-3)}.kb-col__body{display:flex;flex-direction:column;gap:var(--ba-sp-8);flex:1;padding:var(--ba-sp-8)}.kb-col__empty{padding:var(--ba-sp-24) var(--ba-sp-8);text-align:center;font-size:var(--site-fs-app-meta);color:var(--ba-ink-3)}.kb-col__sum{display:flex;align-items:center;justify-content:flex-end;height:var(--site-app-row);padding:0 var(--ba-sp-12);border-top:1px solid var(--ba-line);font-weight:var(--ba-fw-medium)}.kb-card{display:flex;flex-direction:column;gap:6px;padding:var(--ba-sp-12);background:var(--ba-surface);border:1px solid var(--ba-line);border-radius:var(--ba-radius);box-shadow:var(--ba-sh-1)}.kb-card__top{display:flex;align-items:flex-start;gap:var(--ba-sp-8)}.kb-card__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--ba-fw-medium)}.kb-card__client{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--site-fs-app-meta);color:var(--ba-ink-2)}.kb-card__meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--site-fs-app-meta);color:var(--ba-ink-3)}.kb-card__sum{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ba-sp-8)}.kb-card__sum strong{font-weight:var(--ba-fw-semi)}.kb-card__sum span{font-size:var(--site-fs-app-meta);color:var(--ba-ink-2)}.kb-card__alert{display:flex;align-items:center;gap:6px;font-size:var(--site-fs-app-meta);font-weight:var(--ba-fw-semi);letter-spacing:var(--ba-ls-wide);color:var(--ba-danger)}.kb-card__next{display:flex;align-items:center;gap:6px;font-size:var(--site-fs-app-meta);color:var(--ba-ink-2)}.kb-dot{flex:none;width:var(--ba-sp-8);height:var(--ba-sp-8);border-radius:var(--ba-radius-pill);background:var(--ba-ok)}.kb-card__foot{display:flex;justify-content:space-between;gap:var(--ba-sp-8);font-size:var(--site-fs-app-meta);color:var(--ba-ink-3)}.app-avatar{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:var(--ba-radius-pill);background:var(--ba-accent-soft);color:var(--ba-accent-strong);font-size:var(--site-fs-app-head);font-weight:var(--ba-fw-medium)}.app-table--top{margin-top:var(--ba-sp-12)}.app-page{display:grid;gap:var(--ba-sp-12);padding:var(--ba-sp-16);background:var(--ba-canvas)}.app-page--flush{padding:0;background:var(--ba-canvas);gap:var(--ba-sp-8)}.app-page__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ba-sp-8)}.app-page__title{font-family:var(--ba-font-display);font-size:19px;font-weight:var(--ba-fw-semi)}.app-page__title--sm{font-size:var(--site-fs-h3)}.app-push{margin-left:auto}.app-self{justify-self:start}.app-gap{margin-left:var(--ba-sp-8)}.app-meta{font-size:var(--site-fs-app-meta)}.app-lg{font-size:15px}.app-xl{font-size:19px}.app-big{font-family:var(--ba-font-display);font-size:19px;font-weight:var(--ba-fw-semi);text-align:right}.app-mono{font-family:var(--ba-font-mono);font-size:var(--site-fs-app-meta)}.app-danger{color:var(--ba-danger)}.app-warn{color:var(--ba-warn)}.app-ok{color:var(--ba-ok)}.app-accent{color:var(--ba-accent-strong)}.app-tag{font-size:var(--site-fs-app-head);font-weight:var(--ba-fw-semi)}.app-sub{display:block;font-size:var(--site-fs-app-meta);font-weight:var(--ba-fw-normal);color:var(--ba-ink-3)}.app-cut--sm{max-width:120px}.app-cut--lg{max-width:260px}.app-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ba-sp-12)}.app-card-pad{display:grid;gap:var(--ba-sp-8);align-content:start;padding:var(--ba-sp-12) var(--ba-sp-12)}.app-link--ink{color:var(--ba-ink)}.app-icon-text{display:inline-flex;align-items:center;gap:var(--ba-sp-4)}.app-kpis{display:grid;gap:var(--ba-sp-8)}.app-kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}.app-kpis--4{grid-template-columns:repeat(4,minmax(0,1fr))}.app-kpi{display:grid;gap:2px;padding:var(--ba-sp-8) var(--ba-sp-12);background:var(--ba-surface-sunken-app);border:1px solid var(--ba-line);border-radius:var(--ba-radius-card)}.app-kpi--danger{border-color:var(--ba-danger-line)}.app-kpi--plain,.app-kpi--card,.app-kpi--inline{background:var(--ba-surface)}.app-kpi--plain strong{font-family:var(--ba-font-display);font-size:19px;font-weight:var(--ba-fw-semi)}.app-kpi--card{gap:var(--ba-sp-8);padding:var(--ba-sp-16)}.app-kpi--inline{display:flex;gap:var(--ba-sp-8);align-items:baseline}.app-kpi--inline strong{font-weight:var(--ba-fw-semi)}.app-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ba-sp-8)}.app-bar--boxed{padding:var(--ba-sp-8);background:var(--ba-surface);border:1px solid var(--ba-line);border-radius:var(--ba-radius-card)}.app-bar--in{padding:var(--ba-sp-12)}.app-input--search,.app-input--select{gap:var(--ba-sp-8);color:var(--ba-ink-3)}.app-input--search{flex:1;min-width:180px}.app-input--w{flex:0 1 320px}.app-input--select{justify-content:space-between;min-width:160px;color:var(--ba-ink)}.app-input--area{align-items:flex-start;min-height:72px;padding-top:var(--ba-sp-8)}.app-chip{display:inline-flex;align-items:center;height:28px;padding:0 var(--ba-sp-8);border:1px solid var(--ba-line-strong);border-radius:var(--ba-radius);background:var(--ba-surface);font-weight:var(--ba-fw-medium)}.app-switch{display:inline-flex;align-items:center;gap:var(--ba-sp-8);font-size:var(--site-fs-app-head);font-weight:var(--ba-fw-semi);letter-spacing:var(--ba-ls-wide);text-transform:uppercase;color:var(--ba-ink-2)}.app-switch__knob{position:relative;width:28px;height:16px;border-radius:var(--ba-radius-pill);background:var(--ba-line-strong)}.app-switch__knob::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:var(--ba-radius-pill);background:var(--ba-surface)}.app-badge--ok{background:var(--ba-ok-soft);border-color:var(--ba-ok-line);color:var(--ba-ok)}.app-badge--danger{background:var(--ba-danger-soft);border-color:var(--ba-danger-line);color:var(--ba-danger)}.app-table__mark td:first-child{box-shadow:inset var(--ba-marker-w) 0 0 var(--ba-danger)}.app-table__mark--warn td:first-child{box-shadow:inset var(--ba-marker-w) 0 0 var(--ba-warn)}.app-table td .app-sub{line-height:1.2}.app-doc__row{display:flex;align-items:center;justify-content:space-between;gap:var(--ba-sp-12)}.app-doc__head .app-kpis{margin-top:var(--ba-sp-8)}.app-tabs--bare{padding:0;border-bottom:1px solid var(--ba-line);background:none}.app-summary{padding:var(--ba-sp-8) var(--ba-sp-12);border-radius:var(--ba-radius-card);background:var(--ba-surface-sunken-app)}.app-cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ba-sp-8)}.app-debt strong{font-family:var(--ba-font-display);font-size:19px;font-weight:var(--ba-fw-semi);color:var(--ba-danger)}.app-debt span{font-weight:var(--ba-fw-semi);color:var(--ba-danger)}.app-rule{height:1px;background:var(--ba-line-soft)}.app-limit{height:4px;border-radius:var(--ba-radius-pill);background:var(--ba-line);overflow:hidden}.app-limit span{display:block;width:calc(var(--p) * 100%);height:100%;background:var(--ba-danger)}.app-feed__compose{display:grid;gap:var(--ba-sp-12);padding:var(--ba-sp-12);border-bottom:1px solid var(--ba-line)}.app-seg{display:inline-flex;justify-self:start;gap:2px;padding:2px;border:1px solid var(--ba-line);border-radius:var(--ba-radius);background:var(--ba-surface-sunken-app)}.app-seg>span{padding:var(--ba-sp-4) var(--ba-sp-8);border-radius:var(--ba-radius);color:var(--ba-ink-2)}.app-seg__on{background:var(--ba-surface);color:var(--ba-ink);font-weight:var(--ba-fw-medium);box-shadow:var(--ba-sh-1)}.app-feed__add{justify-self:end;color:var(--ba-ink-3);font-weight:var(--ba-fw-medium)}.app-feed__filter{display:flex;align-items:center;gap:var(--ba-sp-8);padding:var(--ba-sp-8) var(--ba-sp-12)}.app-feed__day{padding:var(--ba-sp-4) var(--ba-sp-12);background:var(--ba-fill-hover);border-block:1px solid var(--ba-line-soft);font-size:var(--site-fs-app-meta);color:var(--ba-ink-2)}.app-feed__list{display:grid}.app-feed__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--ba-sp-12);padding:var(--ba-sp-8) var(--ba-sp-12);border-bottom:1px solid var(--ba-line-soft)}.app-feed__icon{color:var(--ba-ink-3);padding-top:2px}.app-mrr__row,.app-mrr__total{display:flex;align-items:center;gap:var(--ba-sp-8);min-height:var(--site-app-row);padding:0 var(--ba-sp-12);border-bottom:1px solid var(--ba-line-soft)}.app-mrr__row svg{color:var(--ba-ink-3)}.app-mrr__total{justify-content:space-between;background:var(--ba-fill-hover)}.app-mrr__total--end{justify-content:flex-start;border-bottom:0}.app-reg__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ba-sp-12);padding:var(--ba-sp-12)}.app-reg{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:var(--ba-sp-12);align-items:center;padding:var(--ba-sp-12);border-bottom:1px solid var(--ba-line-soft)}.app-reg:last-child{border-bottom:0}.app-reg__sum{text-align:right;white-space:nowrap}.app-name--ink{color:var(--ba-ink)}.app-alert{display:flex;align-items:center;gap:var(--ba-sp-8);padding:var(--ba-sp-8) var(--ba-sp-12);border:1px solid var(--ba-warn-line);border-radius:var(--ba-radius-card);background:var(--ba-warn-soft);color:var(--ba-ink-2);font-size:var(--site-fs-app-meta)}.app-alert svg{color:var(--ba-warn)}.app-legend{display:inline-flex;align-items:center;gap:var(--ba-sp-8);font-size:var(--site-fs-app-meta);color:var(--ba-ink-2)}.app-legend i{display:inline-block;width:12px;height:8px;border-radius:2px}.app-legend__a,.app-path__a{background:var(--ba-accent)}.app-legend__b,.app-path__b{background:var(--ba-accent-soft-2)}.app-legend__c,.app-path__c{background:repeating-linear-gradient(135deg,var(--ba-line) 0 2px,var(--ba-surface) 2px 5px);border:1px solid var(--ba-line)}.app-stage{display:inline-flex;align-items:center;gap:var(--ba-sp-8)}.app-stage::before{content:"";width:2px;height:16px;background:var(--st)}.app-path{display:flex;width:186px;height:16px}.app-path i{display:block;height:100%}.app-path__a{width:calc(var(--a) / 11 * 100%);background:var(--st)}.app-path__b{width:calc(var(--b) / 11 * 100%);opacity:.6;background:var(--st)}.app-path__c{width:calc(var(--c) / 11 * 100%)}.app-table--funnel tfoot td{background:var(--ba-fill-hover)}@media (max-width:720px){.app-kpis--4,.app-cards3{grid-template-columns:repeat(2,minmax(0,1fr))}}.app-chip,.app-tabs>span,.app-kpi--inline,.app-btn{white-space:nowrap}.app-row.app-card-pad{display:flex}td.app-icon{display:table-cell;vertical-align:middle}.app-kpi p,.app-card-pad p,.app-doc__bar p{white-space:nowrap}.app-check--on{display:inline-grid;place-items:center;background:var(--ba-accent);border-color:var(--ba-accent);color:var(--ba-on-accent)}.app-check--on svg{width:10px;height:10px}.app-ink2{color:var(--ba-ink-2)}.app-field{display:grid;gap:var(--ba-sp-4);align-content:start}.app-grid2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--ba-sp-12)}.app-input--dis{background:var(--ba-surface-sunken-app);color:var(--ba-ink-3)}.app-input--focus{border-color:var(--ba-accent);box-shadow:var(--ba-ring)}.app-input--title{justify-self:start;font-weight:var(--ba-fw-semi)}.app-input--grow{flex:1;font-family:var(--ba-font-display);font-size:17px}.app-sec{display:flex;align-items:baseline;gap:var(--ba-sp-8);padding:var(--ba-sp-12);border-bottom:1px solid var(--ba-line-soft);color:var(--ba-ink-3);font-size:var(--site-fs-app-meta)}.app-sec b{font-size:15px;letter-spacing:var(--ba-ls-wide);text-transform:uppercase;color:var(--ba-accent-strong)}.app-action{border:1px solid var(--ba-line);border-radius:var(--ba-radius-card);overflow:hidden}.app-action__head{display:flex;align-items:center;gap:var(--ba-sp-8);padding:var(--ba-sp-8) var(--ba-sp-12);background:var(--ba-fill-hover);border-bottom:1px solid var(--ba-line)}.app-stagerow{display:flex;align-items:center;gap:var(--ba-sp-12);min-height:var(--site-app-row);padding:0 var(--ba-sp-12);border-bottom:1px solid var(--ba-line-soft)}.app-stagerow:last-child{border-bottom:0}.app-steps{display:flex;align-items:center;gap:var(--ba-sp-8);color:var(--ba-ink-3)}.app-steps i{flex:0 0 24px;height:1px;background:var(--ba-line)}.app-steps__i{display:inline-flex;align-items:center;gap:var(--ba-sp-8)}.app-steps__i b{display:grid;place-items:center;width:20px;height:20px;border-radius:var(--ba-radius-pill);background:var(--ba-surface-sunken-app);font-size:var(--site-fs-app-head);font-weight:var(--ba-fw-semi)}.app-steps__i--on{color:var(--ba-ink);font-weight:var(--ba-fw-semi)}.app-steps__i--on b{background:var(--ba-accent);color:var(--ba-on-accent)}.app-mig{position:relative;padding-bottom:150px}.app-mig__row{display:flex;align-items:end;gap:var(--ba-sp-12)}.app-mig__row .app-field{flex:0 0 224px}.app-menu{position:absolute;left:var(--ba-sp-12);top:72px;width:224px;padding:var(--ba-sp-4);background:var(--ba-surface);border:1px solid var(--ba-line);border-radius:var(--ba-radius-card);box-shadow:var(--ba-sh-2)}.app-menu__i{display:flex;align-items:center;gap:var(--ba-sp-8);padding:var(--ba-sp-4) var(--ba-sp-8) var(--ba-sp-4) 26px;border-radius:var(--ba-radius)}.app-menu__i--on{padding-left:var(--ba-sp-8);background:var(--ba-fill-selected);box-shadow:inset 0 0 0 1px var(--ba-accent-soft-2)}.app-asst{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);min-height:460px;background:var(--ba-canvas)}.app-asst__under{display:flex;gap:var(--ba-sp-12);padding:var(--ba-sp-12);opacity:.45}.app-asst__col{flex:1;border-radius:var(--ba-radius-card);background:var(--ba-surface-sunken-app);border:1px solid var(--ba-line);border-top:4px solid var(--ba-cat-1)}.app-asst__panel{display:flex;flex-direction:column;background:var(--ba-surface);border-left:1px solid var(--ba-line);box-shadow:var(--ba-sh-3,var(--ba-sh-2))}.app-asst__head{display:flex;justify-content:space-between;gap:var(--ba-sp-12);padding:var(--ba-sp-16) var(--ba-sp-24);border-bottom:1px solid var(--ba-line)}.app-asst__title{font-family:var(--ba-font-display);font-size:19px;font-weight:var(--ba-fw-semi)}.app-asst__body{display:grid;gap:var(--ba-sp-8);align-content:start;flex:1;padding:var(--ba-sp-24)}.app-asst__bot{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--ba-radius);background:var(--ba-accent-soft);color:var(--ba-accent-strong)}.app-asst__foot{display:grid;gap:var(--ba-sp-8);padding:var(--ba-sp-12) var(--ba-sp-24) var(--ba-sp-16);border-top:1px solid var(--ba-line)}.app-asst__ask{display:flex;align-items:end;gap:var(--ba-sp-8)}.app-asst__ask .app-input{flex:1}.app-search{max-width:680px;padding-bottom:var(--ba-sp-8)}.app-search__box{padding:var(--ba-sp-8)}.app-search__input{gap:var(--ba-sp-8)}.app-search__group{padding:var(--ba-sp-4) var(--ba-sp-12);background:var(--ba-fill-hover);border-block:1px solid var(--ba-line-soft);font-size:var(--site-fs-app-head);font-weight:var(--ba-fw-semi);letter-spacing:var(--ba-ls-wide);text-transform:uppercase;color:var(--ba-ink-3)}.app-search__i{padding:var(--ba-sp-4) var(--ba-sp-12);line-height:20px}.app-empty{display:grid;justify-items:center;gap:var(--ba-sp-12);padding:var(--ba-sp-32) var(--ba-sp-24);text-align:center}.app-empty__title{display:flex;align-items:center;gap:var(--ba-sp-8);font-weight:var(--ba-fw-semi);font-size:15px}.app-empty__text{max-width:300px}.app-empty .app-cards3{width:100%;text-align:left}.app-excard{display:grid;gap:var(--ba-sp-8);align-content:start;padding:var(--ba-sp-12);border:1px solid var(--ba-line);border-radius:var(--ba-radius-card);box-shadow:var(--ba-sh-1)}.app-table--audit td{height:48px}.app-audit__t{width:96px;white-space:normal!important;line-height:1.3}.app-int{display:flex;gap:var(--ba-sp-12);padding:var(--ba-sp-12);background:var(--ba-surface);border:1px solid var(--ba-line);border-radius:var(--ba-radius-card)}.app-int>div{display:grid;gap:var(--ba-sp-4);min-width:0}.app-int__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--ba-ink-2);font-size:var(--site-fs-app-meta)}.app-int__logo{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--ba-radius);font-weight:var(--ba-fw-semi)}.app-int__logo--accent{background:var(--ba-accent-soft);color:var(--ba-accent-strong)}.app-int__logo--ok{background:var(--ba-ok-soft);color:var(--ba-ok)}.app-int__logo--info{background:var(--ba-info-soft);color:var(--ba-info)}.app-int__logo--warn{background:var(--ba-warn-soft);color:var(--ba-warn)}.app-int__logo--cat6{background:var(--ba-surface-sunken-app);color:var(--ba-cat-6,var(--ba-ink-3))}.app-pstage{display:grid;gap:var(--ba-sp-8);justify-items:start;margin-top:var(--ba-sp-8);padding:var(--ba-sp-12);border:1px solid var(--ba-line);border-radius:var(--ba-radius-card)}.app-pstage__name{display:flex;align-items:center;width:100%}.app-pstage__name .app-strong{flex:1;text-align:center}.app-pstage__grip{color:var(--ba-line-strong)}@media (max-width:720px){.app-asst{grid-template-columns:minmax(0,1fr)}.app-asst__under{display:none}.app-grid2{grid-template-columns:minmax(0,1fr)}}.app-seg>span,.app-input--title,.app-mig__file,.app-steps__i{white-space:nowrap}.app-mig__row{flex-wrap:wrap}.frame--migration-sources .app-steps{flex-wrap:wrap;row-gap:var(--ba-sp-4)}.frame--migration-sources .app-steps i{flex-basis:12px}.frame--migration-sources .app-page__head{flex-wrap:wrap}.frame--migration-sources .app-mig__row .app-field{flex:1 1 180px;min-width:0}.frame--migration-sources .app-menu{width:min(224px,calc(100% - 24px))}.frame--migration-sources .app-mig__row{align-items:flex-end}.frame--migration-sources .app-mig__row .app-field{flex:1 1 200px}.frame--migration-sources .app-input--select{white-space:nowrap}.frame--migration-sources .app-mig__file{order:3}.frame--migration-sources .app-mig{padding-bottom:160px}.frame--migration-sources .app-menu{top:78px}.frame{position:relative}.frame--migration-sources .app{overflow:hidden}.frame--migration-sources .app-mig__file{display:none}.app-table--wrap td{white-space:normal;height:auto;padding-block:var(--ba-sp-8)}.app-table--wrap .app-sub{margin-top:var(--ba-sp-4);font-size:var(--site-fs-app-meta)}.shot.shot--frame,.door__shot{overflow:visible}.frame--company-debt .app{min-width:0}.frame--company-debt .app>*{min-width:900px}.door__see>*,.shot--frame>.frame,.door__shot>.frame{min-width:0;max-width:100%}.app-alert--danger{border-color:var(--ba-danger-line);background:var(--ba-danger-soft)}.app-alert--danger svg{color:var(--ba-danger)}.app-phone{max-width:360px;display:grid;gap:var(--ba-sp-12);padding:var(--ba-sp-16);border-radius:20px}.app-phone__head{font-weight:var(--ba-fw-semi)}.app-phone__list{display:grid}.app-phone__list li{display:flex;justify-content:space-between;gap:var(--ba-sp-12);padding:var(--ba-sp-8) 0;border-bottom:1px solid var(--ba-line-soft)}.app-phone__btn{justify-content:center}
.app-table--boxed{box-sizing:border-box}

/* ---- Службові класи генератора (не з пачки): примітка під секцією, посилання «ще» під секцією,
 * тіло текстової секції. Ті самі токени. ---- */
.section__note { margin-top: var(--site-sp-48); color: var(--ba-ink-3); font-size: var(--site-fs-small); max-width: var(--site-w-text); }
.section__more { margin-top: var(--ba-sp-32); }
.text__body { max-width: var(--site-w-text); color: var(--ba-ink-2); font-size: var(--site-fs-lead); }
/* OG на сторінку (генератор, --og): довгий H1 у картці 1200×630 — менший кегль, ширша колонка. */
.og__title--long { font-size: 44px; max-width: 24ch; line-height: 1.12; }
/* Shadow fix (28.09): a wrapper with overflow-x:auto clips the frame's box-shadow. The frame (.app)
 * already scrolls inside itself, so wrappers stay overflow:visible; the one wide frame (company-debt)
 * keeps its 900px on the content, not on .app, so .app scrolls and keeps its shadow. */
.shot.shot--frame, .door__shot { overflow: visible; }
.frame--company-debt .app { min-width: 0; }
.frame--company-debt .app > * { min-width: 900px; }
/* Without wrapper scroll the frame must be allowed to shrink: grid/flex children default to min-width:auto. */
.door__see > *, .shot--frame > .frame, .door__shot > .frame { min-width: 0; max-width: 100%; }


/* ---- довідка (пачка help-pages + help-fixes 30.09, site/дизайн/site.css дослівно) ---- */
/* ── Довідка: стаття й індекс (help-article.html, help-index.html; 30.09, редизайн — пачка help-redesign) ──
   Лише токени сайту. Ширина читання — --site-w-text, як у тексту сторінок рішень. */
.help-head { padding: var(--ba-sp-24) 0 var(--ba-sp-32); background: var(--site-hero-bg); border-bottom: 1px solid var(--ba-line-soft); }
.help-head__title { margin-top: var(--ba-sp-16); max-width: var(--site-w-text); font-size: var(--site-fs-hero-long); line-height: var(--site-lh-hero-long); letter-spacing: var(--site-ls-hero); text-wrap: balance; }
.help-head--index .help-head__title { margin-top: var(--ba-sp-16); }
.help-head__lead { margin-top: var(--ba-sp-12); max-width: var(--site-w-text); font-size: var(--site-fs-lead); color: var(--ba-ink-2); text-wrap: pretty; }
.help-head__meta { margin-top: var(--ba-sp-12); font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.help-tags { display: flex; flex-wrap: wrap; gap: var(--ba-sp-8); margin: 0; padding: 0; list-style: none; }
/* Тег — посилання на пошук індексу (?q=тег). */
.help-tags__item { display: inline-flex; padding: var(--ba-sp-4) var(--ba-sp-8); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-pill); background: var(--ba-surface); font-size: var(--site-fs-small); color: var(--ba-ink-2); white-space: nowrap; transition: border-color var(--ba-dur-base) var(--ba-ease-out), color var(--ba-dur-base) var(--ba-ease-out); }
.help-tags__item:hover { border-color: var(--ba-accent); color: var(--ba-accent-strong); }

/* Розкладка 1a (09.10, пачка help-rail): стаття ліворуч, праворуч колонка — пошук по довідці, зміст і перелік
   розділу; колонка прилипає цілою й прокручується сама, коли не влазить у вікно (нічого не наїжджає одне на одне).
   До 960 — одна колонка: пошук і зміст рядком над текстом, перелік розділу після статті (.help-rail — display: contents). */
:root { --site-help-rail: 300px; }
.help-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "find" "toc" "body" "side"; gap: var(--ba-sp-16) var(--site-gap); padding-top: var(--ba-sp-32); padding-bottom: var(--site-sec); }
.help-layout .help-rail { display: contents; }
.help-layout .help-search { grid-area: find; }
.help-layout .help-body { margin-top: var(--ba-sp-16); }

.help-toc { grid-area: toc; display: flex; align-items: center; gap: var(--ba-sp-12); min-width: 0; max-width: var(--site-w-text); padding: var(--ba-sp-8) var(--ba-sp-12); border: 1px solid var(--ba-line-soft); border-radius: var(--ba-radius-card); background: var(--ba-surface-sunken); }
.help-toc__title { flex: none; font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-ink-3); }
.help-toc__list { display: flex; gap: var(--ba-sp-4); min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; font-size: var(--site-fs-small); mask-image: linear-gradient(to right, black calc(100% - var(--ba-sp-24)), transparent); }
.help-toc__list li { flex: none; }
.help-toc__list a { display: block; padding: var(--ba-sp-4) var(--ba-sp-8); border-radius: var(--ba-radius); color: var(--ba-ink-2); white-space: nowrap; }
.help-toc__list a:hover { color: var(--ba-accent-strong); background: var(--ba-fill-hover); }
.help-toc__list a[aria-current="true"] { color: var(--ba-ink); background: var(--ba-fill-selected); font-weight: var(--ba-fw-medium); }
.help-toc__rest { padding-left: var(--ba-sp-4); border-left: 1px solid var(--ba-line); }
.help-toc__rest + .help-toc__rest { padding-left: 0; border-left: 0; }

/* Перелік статей розділу — порядок із розділи.uk.json; поточна — aria-current="page". */
.help-side { grid-area: side; min-width: 0; max-width: var(--site-w-text); padding: var(--ba-sp-16); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); }
.help-side__title { font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; }
.help-side__title a { color: var(--ba-ink-3); }
.help-side__title a:hover { color: var(--ba-accent-strong); }
.help-side__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--site-card-min)), 1fr)); gap: var(--ba-sp-4) var(--ba-sp-12); margin: var(--ba-sp-12) 0 0; padding: 0; list-style: none; font-size: var(--site-fs-body); }
.help-side__list a { display: block; padding: var(--ba-sp-8) var(--ba-sp-12); border-radius: var(--ba-radius); color: var(--ba-ink-2); line-height: var(--ba-lh-tight); }
.help-side__list a:hover { color: var(--ba-ink); background: var(--ba-fill-hover); }
.help-side__list a[aria-current="page"] { color: var(--ba-accent-strong); background: var(--ba-accent-soft); font-weight: var(--ba-fw-semi); }

@media (min-width: 961px) {
  .help-layout { grid-template-columns: minmax(0, 1fr) var(--site-help-rail); grid-template-areas: "body rail"; }
  .help-layout .help-body { margin-top: 0; }
  /* Відступ 4 px згори й справа — щоб overflow колонки не обрізав кільце фокуса (3 px) на полі пошуку. */
  .help-layout .help-rail { grid-area: rail; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--ba-sp-24); position: sticky; top: calc(var(--site-header-h) + var(--ba-sp-16)); align-self: start; min-width: 0; max-height: calc(100vh - var(--site-header-h) - var(--ba-sp-32)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--ba-sp-4) var(--ba-sp-4) var(--ba-sp-8) var(--ba-sp-12); margin-left: calc(-1 * var(--ba-sp-12)); }
  /* Приймання help-rail (10.10): до 960 діти колонки стоять у зонах find/toc/side сітки статті; тут колонка — власна
     сітка без цих імен, і неявні зони клали пошук, зміст і перелік в ОДНУ клітинку (заміряно 1280: три рамки 346×342,
     ширші за колонку 300). Скидаємо зону — діти йдуть рядками в порядку розмітки. */
  .help-layout .help-rail > * { grid-area: auto; }
  .help-rail .help-search__input, .help-index__rail .help-search__input { font-size: var(--site-fs-body); }
  .help-toc { display: block; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; }
  .help-toc__list { display: grid; gap: 0; margin-top: var(--ba-sp-12); overflow: visible; mask-image: none; }
  .help-toc__list a { padding: var(--ba-sp-4) var(--ba-sp-12); border-left: var(--site-rule) solid var(--ba-line-soft); border-radius: 0; white-space: normal; line-height: var(--ba-lh-tight); }
  .help-toc__list li + li a { padding-top: var(--ba-sp-8); }
  .help-toc__list a[aria-current="true"] { border-left-color: var(--ba-accent); background: none; }
  .help-toc__rest { margin-top: var(--ba-sp-8); padding-left: 0; border-left: 0; }
  .help-toc__rest + .help-toc__rest { margin-top: 0; }
  .help-side { max-width: none; padding: var(--ba-sp-16) 0 0; border: 0; border-top: 1px solid var(--ba-line-soft); border-radius: 0; }
  .help-side__list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-left: calc(-1 * var(--ba-sp-12)); }
}

.help-body { grid-area: body; display: grid; gap: var(--site-sp-48); min-width: 0; max-width: var(--site-w-text); font-size: var(--site-fs-lead); line-height: var(--ba-lh-base); color: var(--ba-ink-2); }
.help-body p, .help-body li { text-wrap: pretty; }
.help-body strong { color: var(--ba-ink); font-weight: var(--ba-fw-semi); }
.help-body code { font-family: var(--ba-font-mono); font-size: .9em; padding: 0 var(--ba-sp-4); border-radius: var(--ba-radius); background: var(--ba-surface-sunken); }
/* Розділ відкриває лінія; H2 — на крок нижче H1, H3 — ще на крок. У .faq теж одна колонка (на лендінгу .faq — дві). */
.help-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ba-sp-16); padding-top: var(--ba-sp-32); border-top: 1px solid var(--ba-line); }
.help-body > .help-sec:first-child { padding-top: 0; border-top: 0; }
.help-sec__title { font-size: calc(var(--site-fs-h2) * .8); line-height: var(--ba-lh-tight); letter-spacing: var(--ba-ls-tight); color: var(--ba-ink); scroll-margin-top: calc(var(--site-header-h) + var(--ba-sp-16)); }
.help-do { display: grid; gap: var(--ba-sp-12); padding-top: var(--ba-sp-16); border-top: 1px solid var(--ba-line-soft); }
.help-do:first-of-type { border-top: 0; padding-top: 0; }
.help-do__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); color: var(--ba-ink); scroll-margin-top: calc(var(--site-header-h) + var(--ba-sp-16)); }
.help-list { display: grid; gap: var(--ba-sp-8); margin: 0; padding-left: var(--ba-sp-24); }
/* Кроки — контурний номер і тонка лінія до наступного кроку. */
.help-steps { display: grid; gap: var(--ba-sp-16); margin: 0; padding: 0; list-style: none; counter-reset: help-step; }
.help-steps > li { position: relative; min-height: var(--site-icon-result); padding-left: calc(var(--site-icon-result) + var(--ba-sp-16)); counter-increment: help-step; }
.help-steps > li::before {
  content: counter(help-step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: var(--site-icon-result); height: var(--site-icon-result);
  border: 1px solid var(--ba-accent); border-radius: var(--ba-radius-pill); background: var(--ba-surface); color: var(--ba-accent-strong);
  font: var(--ba-fw-semi) var(--site-fs-small)/1 var(--ba-font); font-variant-numeric: var(--ba-num);
}
.help-steps > li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--site-icon-result) / 2); top: calc(var(--site-icon-result) + var(--ba-sp-4)); bottom: calc(var(--ba-sp-4) - var(--ba-sp-16)); width: 1px; background: var(--ba-line); }
/* Назва в інтерфейсі — лапки й вага, без плашки: у кроці їх по три-чотири, рядок лишається текстом. */
.help-ui { color: var(--ba-ink); font-weight: var(--ba-fw-medium); }

.help-shot { display: grid; gap: var(--ba-sp-8); margin: var(--ba-sp-8) 0; container-type: inline-size; }
/* Кнопка — розміром із кадр, не на всю колонку: інакше лупа-курсор висить і на порожньому місці поруч із вузьким кадром. */
.help-shot__zoom { display: block; justify-self: start; width: fit-content; max-width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: inherit; font: inherit; color: inherit; }
.help-shot__zoom:focus-visible { outline: none; box-shadow: var(--ba-ring); border-radius: var(--ba-radius-card); }
/* Заглушка, поки кадру немає, — низька смужка з описом, без збільшення. Справжній кадр — <img> у .help-shot__zoom. */
.help-shot__ph {
  display: flex; align-items: flex-start; gap: var(--ba-sp-12); padding: var(--ba-sp-12) var(--ba-sp-16);
  border: 1px dashed var(--ba-line-strong); border-radius: var(--ba-radius-card); background: var(--ba-canvas);
  font-size: var(--site-fs-small); line-height: var(--ba-lh-base); color: var(--ba-ink-3);
}
.help-shot__ph::before { content: ""; flex: none; width: var(--site-icon); height: var(--site-icon); margin-top: 1px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center / contain no-repeat; }
.help-shot__text { display: block; min-width: 0; text-wrap: pretty; }
/* width НЕ задаємо — кадр у СВОЄМУ розмірі з атрибута width (CSS-пікселі зйомки, gen-help.mjs ділить clipScale 2 навпіл).
   ⚠ Навіть width: auto тут шкодить: він перебиває атрибут, і завантажений кадр стає ФІЗИЧНОГО розміру — удвічі (07.10).
   До 07.10 тут стояло 100%: діалог на 350px розтягувався до колонки 720 — удвічі, з гігантським шрифтом. Широкі екрани
   (824–1366) так само вписуються в колонку через max-width, збільшення — кнопкою.
   ⚠ max-width — 100cqi (ширина figure), НЕ 100%: у кнопки fit-content, і відсоток від неї циклічний — Chrome рахує
   внесок кадру нулем, кнопка й кадр схлопуються в 0px (заміряно 07.10 на стенді). */
.help-shot img { display: block; max-width: 100cqi; height: auto; border-radius: var(--ba-radius-card); box-shadow: var(--site-shot-shadow); }
.help-shot__cap { font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.help-shot__cap .help-ui { font-weight: var(--ba-fw-normal); color: inherit; }
.help-lightbox { width: min(100vw - 2 * var(--site-gutter), var(--site-w)); max-height: calc(100vh - 2 * var(--site-gutter)); padding: var(--ba-sp-16); border: 0; border-radius: var(--ba-radius-card); box-shadow: var(--site-shot-shadow); }
.help-lightbox::backdrop { background: rgb(10 21 35 / .6); }
.help-lightbox__body { display: grid; }
.help-lightbox__close { margin-left: auto; }
.help-lightbox form { display: flex; justify-content: flex-end; margin-bottom: var(--ba-sp-12); }

/* Таблиця статті — під ширину тексту, без min-width; прокрутка вбік лише запасна. */
.help-table { overflow-x: auto; margin: var(--ba-sp-8) 0; border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface); }
.help-table table { width: 100%; border-collapse: collapse; font-size: var(--site-fs-small); line-height: var(--ba-lh-base); }
.help-table th, .help-table td { padding: var(--ba-sp-8) var(--ba-sp-12); text-align: left; vertical-align: top; border-bottom: 1px solid var(--ba-line-soft); color: var(--ba-ink-2); text-wrap: pretty; hyphens: auto; }
.help-table thead th { background: var(--ba-canvas); border-bottom-color: var(--ba-line); color: var(--ba-ink); font-weight: var(--ba-fw-semi); }
.help-table tbody th { color: var(--ba-ink); font-weight: var(--ba-fw-medium); }
.help-table tbody tr:last-child > * { border-bottom: 0; }

.help-body .faq__q { font-size: var(--site-fs-h3); padding: var(--ba-sp-16) 0; }
.help-faq__text { min-width: 0; text-wrap: pretty; }
.help-body .faq__a { padding-bottom: var(--ba-sp-16); }

/* «Спробуйте в Krokul» — рядок, а не банер; тому, хто прийшов із застосунку (генератор ставить data-from="app"), не показується. */
.help-open { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ba-sp-12) var(--ba-sp-24); padding: var(--ba-sp-16) var(--ba-sp-24); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface-sunken); }
.help-open__copy { display: grid; gap: var(--ba-sp-4); flex: 1 1 var(--site-card-min); min-width: 0; }
.help-open__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); color: var(--ba-ink); }
.help-open__text { font-size: var(--site-fs-body); color: var(--ba-ink-2); }
html[data-from="app"] .help-open { display: none; }

.help-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ba-sp-12); }
.help-pager__link { display: grid; align-content: start; gap: var(--ba-sp-4); padding: var(--ba-sp-16); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface); color: var(--ba-ink); transition: border-color var(--ba-dur-base) var(--ba-ease-out), background var(--ba-dur-base) var(--ba-ease-out); }
.help-pager__link:hover { color: var(--ba-ink); border-color: var(--ba-accent); background: var(--ba-fill-hover); }
.help-pager__link--next { grid-column: 2; text-align: right; }
.help-pager__dir { font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.help-pager__title { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); text-wrap: balance; }
/* «Чи допомогла стаття?» (30.09) — після питань, перед сусідніми статтями; показується й тим, хто прийшов
   із застосунку. Стани перемикає сайт.js атрибутом hidden: запитання → подяка («Так») або поле («Ні») → подяка. */
.help-vote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ba-sp-12) var(--ba-sp-24); padding: var(--ba-sp-16) var(--ba-sp-24); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface-sunken); }
.help-vote [hidden] { display: none; }
.help-vote__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); color: var(--ba-ink); }
.help-vote__actions { display: flex; flex-wrap: wrap; gap: var(--ba-sp-8); }
.help-vote__actions .btn { min-width: calc(var(--site-btn-h) * 2); }
.help-vote__more { display: grid; gap: var(--ba-sp-8); flex: 1 1 100%; max-width: var(--site-w-text); }
.help-vote__label { font-size: var(--site-fs-small); color: var(--ba-ink-2); }
.help-vote__text { box-sizing: border-box; width: 100%; min-height: calc(var(--site-btn-h) * 2); padding: var(--ba-sp-8) var(--ba-sp-12); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); background: var(--ba-surface); color: var(--ba-ink); font: inherit; font-size: var(--site-fs-body); line-height: var(--ba-lh-base); resize: vertical; }
.help-vote__text:focus { outline: none; border-color: var(--ba-accent); box-shadow: var(--ba-ring); }
.help-vote__more .btn { justify-self: start; }
.help-vote__thanks { flex: 1 1 100%; font-size: var(--site-fs-body); color: var(--ba-ink-2); }
.help-related { display: grid; gap: var(--ba-sp-16); }
.help-md { font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.help-md a { color: var(--ba-ink-3); text-decoration: underline; text-underline-offset: 2px; }

.help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--site-card-min)), 1fr)); gap: var(--ba-sp-12); margin: 0; padding: 0; list-style: none; }
.help-card { display: grid; align-content: start; gap: var(--ba-sp-8); height: 100%; padding: var(--ba-sp-16); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface); color: var(--ba-ink); transition: border-color var(--ba-dur-base) var(--ba-ease-out), background var(--ba-dur-base) var(--ba-ease-out); }
.help-card:hover { color: var(--ba-ink); border-color: var(--ba-accent); background: var(--ba-fill-hover); }
.help-card__title { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); text-wrap: balance; }
.help-card__text { font-size: var(--site-fs-body); line-height: var(--ba-lh-base); color: var(--ba-ink-2); text-wrap: pretty; }
.help-card__text .help-ui { font-weight: var(--ba-fw-normal); color: inherit; }

.help-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.help-search { position: relative; display: flex; gap: var(--ba-sp-8); max-width: var(--site-w-text); }
/* Від висоти ПОЛЯ, не форми: на телефоні під полем стоїть кнопка. */
.help-search__icon { position: absolute; left: var(--ba-sp-16); top: calc(var(--site-btn-h) / 2); width: var(--site-icon); height: var(--site-icon); transform: translateY(-50%); color: var(--ba-ink-3); pointer-events: none; }
.help-search__input { flex: 1; min-width: 0; min-height: var(--site-btn-h); padding: 0 var(--ba-sp-16) 0 calc(var(--ba-sp-16) + var(--site-icon) + var(--ba-sp-8)); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); background: var(--ba-surface); font: var(--site-fs-lead) var(--ba-font); color: var(--ba-ink); }
.help-search__input::placeholder { color: var(--ba-ink-3); }
.help-search__input:focus { outline: none; border-color: var(--ba-accent); box-shadow: var(--ba-ring); }
.help-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--site-sp-48) var(--site-gap); padding-top: var(--site-sp-48); padding-bottom: var(--site-sec); }
.help-index__main { display: grid; gap: var(--site-sp-64); min-width: 0; }
/* Права колонка індексу (1a, 09.10): пошук, розділи, популярні питання. До 960 — над розділами. */
.help-index__rail { order: -1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--ba-sp-24); min-width: 0; }
@media (min-width: 961px) {
  .help-index { grid-template-columns: minmax(0, 1fr) var(--site-help-rail); }
  .help-index__rail { order: 0; position: sticky; top: calc(var(--site-header-h) + var(--ba-sp-16)); align-self: start; }
}
.help-sections__list { display: grid; margin: var(--ba-sp-8) 0 0; padding: 0; list-style: none; font-size: var(--site-fs-body); }
.help-sections__list a { display: block; padding: var(--ba-sp-8) 0; border-bottom: 1px solid var(--ba-line-soft); color: var(--ba-ink); }
.help-sections__list a:hover { color: var(--ba-accent-strong); }

/* Сторінка пошуку (help-search.html, 09.10): поле, результати або порожній стан, «Не знайшли відповідь?» → бот.
   Результати малює site.js з #help-search-data (генератор кладе туди всі статті). */
.help-results { display: grid; gap: var(--ba-sp-24); padding-top: var(--ba-sp-24); padding-bottom: var(--site-sec); }
.help-results > * { max-width: var(--site-w-text); }
.help-results [hidden] { display: none; }
.help-results__count { font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.help-results__list { display: grid; margin: 0; padding: 0; list-style: none; }
.help-results__item { display: grid; gap: 2px; padding: var(--ba-sp-12) 0; border-bottom: 1px solid var(--ba-line-soft); color: var(--ba-ink); }
.help-results__item:hover { color: var(--ba-accent-strong); }
.help-results__title { font-size: var(--site-fs-lead); font-weight: var(--ba-fw-medium); }
.help-results__where { font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.help-results__empty { display: grid; gap: var(--ba-sp-16); }
.help-results__img { width: var(--site-card-min); height: auto; }
.help-results__none { font-size: var(--site-fs-lead); font-weight: var(--ba-fw-semi); color: var(--ba-ink); }
.help-ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ba-sp-16) var(--ba-sp-24); max-width: none; padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line-soft); }
.help-ask__title { font-size: calc(var(--site-fs-h2) * .67); line-height: var(--ba-lh-tight); letter-spacing: var(--ba-ls-tight); color: var(--ba-ink); }
/* Популярні питання — у правій колонці, під розділами. */
.help-popular, .help-sections { min-width: 0; }
.help-popular__title, .help-sections__title { font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-ink-3); }
.help-popular__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--site-card-min) * 1.5)), 1fr)); gap: var(--ba-sp-4) var(--site-gap); margin: var(--ba-sp-8) 0 0; padding: 0; list-style: none; font-size: var(--site-fs-body); }
.help-popular__list .more { padding: var(--ba-sp-4) 0; text-wrap: pretty; }

.help-group { display: grid; gap: var(--ba-sp-16); scroll-margin-top: calc(var(--site-header-h) + var(--ba-sp-16)); }
.help-group__title { display: flex; align-items: baseline; gap: var(--ba-sp-8); font-size: var(--site-fs-h2); line-height: 1.08; letter-spacing: var(--site-ls-hero); scroll-margin-top: calc(var(--site-header-h) + var(--ba-sp-16)); }
.help-group__head { display: grid; gap: var(--ba-sp-8); }
.help-group__lead { max-width: var(--site-w-text); font-size: var(--site-fs-lead); color: var(--ba-ink-2); text-wrap: pretty; }
/* Розділ: перші чотири статті — картками (скільки влізе в рядок), решта — списком посилань. */
.help-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--site-card-min)), 1fr)); column-gap: var(--ba-sp-12); margin: 0; padding: 0; list-style: none; }
.help-more__link { display: flex; align-items: center; justify-content: space-between; gap: var(--ba-sp-8); min-height: calc(var(--site-btn-h) - var(--ba-sp-4)); padding: var(--ba-sp-8) var(--ba-sp-4); border-bottom: 1px solid var(--ba-line-soft); font-size: var(--site-fs-body); font-weight: var(--ba-fw-medium); color: var(--ba-ink); }
.help-more__link::after { content: "→"; flex: none; color: var(--ba-ink-3); }
.help-more__link:hover { color: var(--ba-accent-strong); }
.help-more__link:hover::after { color: var(--ba-accent-strong); }
@media (max-width: 720px) {
  .help-search { flex-direction: column; }
  /* 16 px — менше iOS збільшує сторінку при фокусі поля. */
  .help-search__input { font-size: 16px; }
  .help-table th, .help-table td { padding: var(--ba-sp-8); }
  .help-open { padding: var(--ba-sp-16); }
  .help-vote { padding: var(--ba-sp-16); }
  /* 16 px — як у пошуку: менше iOS збільшує сторінку при фокусі поля. */
  .help-vote__text { font-size: 16px; }
  .help-pager { grid-template-columns: minmax(0, 1fr); }
  .help-pager__link--next { grid-column: auto; text-align: left; }
}

/* ── Шапка довідки — варіант .header для родів help / helpIndex (30.09) ──
   Та сама висота й логотип; замість меню — дві дії. Пошук по довідці — у правій колонці сторінок (09.10, help-rail). */
.logo__sub { padding-left: var(--ba-sp-8); border-left: 1px solid var(--ba-line-strong); font-size: var(--site-fs-lead); font-weight: var(--ba-fw-medium); line-height: 1; letter-spacing: 0; color: var(--ba-ink-2); white-space: nowrap; }
.header--help .header__bar { gap: var(--ba-sp-24); }
.help-hnav { display: flex; align-items: center; gap: var(--ba-sp-8); flex: none; margin-left: auto; }
@media (max-width: 720px) {
  /* Два ряди не липнуть: понад 100 px згори на кожному екрані статті — забагато. */
  .header--help { position: static; }
  .header--help .header__bar { flex-wrap: wrap; gap: var(--ba-sp-12) var(--ba-sp-8); padding-top: var(--ba-sp-12); padding-bottom: var(--ba-sp-12); }
  .header--help .logo { margin-right: 0; }
  .header--help .logo__word { display: none; }
  .header--help .logo__sub { padding-left: 0; border-left: 0; font-size: var(--site-fs-logo); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-tight); color: var(--ba-ink); }
  .help-hnav .nav__link { padding: var(--ba-sp-8); }
  .help-hnav__long { display: none; }
}

/* Таблиця статті на телефоні — рядок карткою: назва рядка зверху, далі «колонка — значення».
   Лише коли генератор дав комірці data-label; без нього лишається прокрутка вбік. */
@media (max-width: 720px) {
  .help-table:has(td[data-label]) { overflow: visible; border: 0; border-radius: 0; background: none; }
  .help-table:has(td[data-label]) :is(table, tbody, tr, th, td) { display: block; }
  .help-table:has(td[data-label]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .help-table:has(td[data-label]) tbody { display: grid; gap: var(--ba-sp-8); }
  .help-table:has(td[data-label]) tbody tr { padding: var(--ba-sp-12) var(--ba-sp-16); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface); }
  .help-table:has(td[data-label]) tbody th { padding: 0 0 var(--ba-sp-8); margin-bottom: var(--ba-sp-4); border-bottom: 1px solid var(--ba-line-soft); font-size: var(--site-fs-body); font-weight: var(--ba-fw-semi); }
  .help-table:has(td[data-label]) td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--ba-sp-12); padding: var(--ba-sp-4) 0; border: 0; }
  .help-table:has(td[data-label]) td::before { content: attr(data-label); color: var(--ba-ink-3); }
}

/* ── Довідка: задачі «кроки поруч із кадром» (30.09, пілот help-1a) ──
   Сторінка з модифікатором help-layout--tasks: стаття на всю ширину своєї колонки, текстові блоки — у ширину читання.
   Кроки поруч із кадром — від 1200; нижче кадр над кроками й не прилипає.
   Координати смуги й номерів — у відсотках висоти рамки, з frames.json. */
:root { --site-task-shot-w: 500px; --site-pin: 24px; }
.help-layout--tasks .help-body { max-width: none; }
.help-layout--tasks .help-body > .faq, .help-layout--tasks .help-vote, .help-layout--tasks .help-open { max-width: var(--site-w-text); }

.help-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ba-sp-8); margin-top: var(--ba-sp-12); font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.help-where__step { padding: 2px var(--ba-sp-8); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); background: var(--ba-surface); color: var(--ba-ink-2); }

.help-lead-shot { display: grid; gap: var(--ba-sp-16); margin: 0; }
.help-lead-shot__img { width: 100%; height: auto; border-radius: var(--ba-radius-card); box-shadow: var(--site-shot-shadow); }
.help-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--site-card-min) * .8)), 1fr)); gap: var(--ba-sp-12) var(--ba-sp-24); font-size: var(--site-fs-body); line-height: var(--ba-lh-base); color: var(--ba-ink-2); }
.help-kinds__name { font-weight: var(--ba-fw-semi); color: var(--ba-ink); }
.help-kinds__name--fact { color: var(--ba-ok); }
.help-kinds__name--refund { color: var(--ba-danger); }

.help-task { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ba-sp-24); padding-top: var(--ba-sp-32); border-top: 1px solid var(--ba-line-soft); scroll-margin-top: calc(var(--site-header-h) + var(--ba-sp-16)); }
.help-task__text { display: grid; align-content: start; gap: var(--ba-sp-16); min-width: 0; }
.help-task__head { display: grid; gap: var(--ba-sp-4); }
.help-task__kind { font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); text-transform: uppercase; color: var(--ba-ink-3); }
.help-task__kind--fact { color: var(--ba-ok); }
.help-task__kind--refund { color: var(--ba-danger); }
.help-task__kind--flow { color: var(--ba-accent-strong); }
.help-task__title { font-size: calc(var(--site-fs-h2) * .67); line-height: var(--ba-lh-tight); letter-spacing: var(--ba-ls-tight); color: var(--ba-ink); }
.help-task__lead { font-size: var(--site-fs-body); color: var(--ba-ink-2); }
.help-task__steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.help-task__step { display: grid; grid-template-columns: var(--site-pin) minmax(0, 1fr); gap: var(--ba-sp-12); padding: 10px var(--ba-sp-12); border-radius: var(--ba-radius-card); line-height: var(--ba-lh-base); color: var(--ba-ink); transition: background var(--ba-dur-fast) var(--ba-ease-out); }
.help-task__step[aria-current="step"] { background: var(--ba-fill-hover); }
.help-task__step:focus-visible { outline: none; box-shadow: var(--ba-ring); }
.help-task__n, .help-task__pin { display: grid; place-items: center; width: var(--site-pin); height: var(--site-pin); border-radius: var(--ba-radius-pill); background: var(--ba-accent-soft); color: var(--ba-accent-strong); font: var(--ba-fw-semi) var(--site-fs-kicker)/1 var(--ba-font); font-variant-numeric: var(--ba-num); }
.help-task__n { margin-top: 1px; }
.help-task__step[aria-current="step"] .help-task__n, .help-task__pin.is-current { background: var(--ba-accent); color: var(--ba-on-accent); }
.help-task__note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: var(--ba-sp-12) 14px; border-radius: var(--ba-radius-card); font-size: var(--site-fs-body); line-height: var(--ba-lh-base); color: var(--ba-ink-2); }
.help-task__note b { font-weight: var(--ba-fw-semi); }
.help-task__note--tip { background: var(--ba-info-soft); }
.help-task__note--tip b { color: var(--ba-info); }
.help-task__note--warn { background: var(--ba-warn-soft); }
.help-task__note--warn b { color: var(--ba-warn); }

.help-task__shot { margin: 0; min-width: 0; } /* ДОВІДКА-ЗАДАЧІ (2), 28.10: під 1200 px кадр іде ПІСЛЯ кроків своєї задачі — з `order: -1` він стояв над заголовком і читався як кадр попередньої. */
.help-task__frame { position: relative; overflow: hidden; aspect-ratio: var(--ar, auto); border-radius: var(--ba-radius-card); background: var(--ba-surface-sunken); box-shadow: 0 0 0 1px var(--ba-line), var(--ba-sh-2); }
.help-task__img { display: block; width: 100%; height: auto; }
.help-task__frame:has(.help-task__img + .help-task__img) .help-task__img { position: absolute; inset: 0 0 auto 0; opacity: 0; transition: opacity var(--ba-dur-base) var(--ba-ease-out); }
.help-task__frame:has(.help-task__img + .help-task__img) .help-task__img:first-child, .help-task.is-live .help-task__frame .help-task__img.is-current { opacity: 1; }
.help-task.is-live .help-task__frame .help-task__img:not(.is-current) { opacity: 0; }
.help-task__band { display: none; position: absolute; left: 0; right: 0; top: calc(var(--y, 0) * 1%); height: calc(var(--h, 0) * 1%); background: color-mix(in oklab, var(--ba-accent) 10%, transparent); border-block: 1px solid var(--ba-accent-soft-2); pointer-events: none; transition: top var(--ba-dur-base) var(--ba-ease-out), height var(--ba-dur-base) var(--ba-ease-out); }
.help-task.is-live .help-task__band { display: block; }
.help-task.is-live .help-task__band[hidden] { display: none; }
.help-task__pin { position: absolute; left: var(--ba-sp-4); top: calc(var(--y) * 1%); transform: translateY(-50%); box-shadow: 0 0 0 2px var(--ba-surface); }
.help-task__pin[data-frame] { display: none; }
.help-task.is-live .help-task__pin[data-frame].is-shown { display: grid; }
@media (min-width: 1200px) {
  .help-task { grid-template-columns: minmax(0, 1fr) min(var(--site-task-shot-w), 52%); column-gap: var(--site-gap); }
  .help-task--text { grid-template-columns: minmax(0, 1fr); }
  .help-task__shot { order: 0; position: sticky; top: calc(var(--site-header-h) + var(--ba-sp-24)); align-self: start; }
}
@media (max-width: 720px) {
  .help-task__pin { --site-pin: 20px; left: 2px; }
}
/* ДОВІДКА-ЗАДАЧІ, лишки (2) і (3) (20.10). (2) До 1200 кадр стоїть ПІД заголовком задачі, не над ним: текстовий блок
 * розкладається в сітку задачі (`display: contents`), голова — першою, кадр — другим, кроки й примітки — далі.
 * (3) Рамка стопки бере висоту ПОТОЧНОГО кадру, а не найвищого: видимий кадр — у потоці, решта — накладкою зверху
 * (`--ar` генератор більше не ставить, координати поля — відсоток свого кадру без перерахунку). */
@media (max-width: 1199px) {
  .help-task:not(.help-task--text) .help-task__text { display: contents; }
  .help-task:not(.help-task--text) .help-task__head { order: -2; }
}
.help-task__frame:has(.help-task__img + .help-task__img) .help-task__img:first-child { position: relative; }
.help-task.is-live .help-task__frame .help-task__img.is-current { position: relative; }
.help-task.is-live .help-task__frame .help-task__img:not(.is-current) { position: absolute; }
@media (prefers-reduced-motion: reduce) {
  .help-task__band, .help-task__img, .help-task__step { transition: none; }
}

.help-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--site-card-min)), 1fr)); gap: var(--ba-sp-24) var(--site-gap); margin: 0; padding: 0; list-style: none; }
.help-facts__item { display: grid; align-content: start; gap: var(--ba-sp-8); padding-top: var(--ba-sp-12); border-top: var(--site-rule) solid var(--ba-accent); }
.help-facts__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); color: var(--ba-ink); }
.help-facts__text { font-size: var(--site-fs-body); line-height: var(--ba-lh-base); color: var(--ba-ink-2); }

/* Статус клітинки порівняння з тултипом (09.10, слово власника: «іконка з тултипом легше, ніж текст»). Таблиця зі
 * статусами вузька за змістом (іконка + слово), тож без мінімальної ширини й без прокрутки обгортки — інакше
 * `overflow` обрізав би тултип. Широкий екран: тултип плаває під клітинкою (hover/focus). Вузький і дотиковий —
 * розгортається під клітинкою В ПОТОЦІ (focus; повторний тап знімає — `сайт.js`). Розшифровка лежить у HTML поруч
 * (`.cmp-tip`), а не в `title`: її читають краулери. Слово біля іконки — колір тексту (контраст на тлі колонки
 * Krokul), колір статусу — лише в іконці. */
:root { --site-tip-w: 20rem; }
.cmp--status { overflow: visible; }
.cmp--status .cmp__table { min-width: 0; table-layout: fixed; }
.cmp--status .cmp__table tbody th { width: 34%; }
.cmp--status .cmp__table td { position: relative; }
.cmp__st { display: inline-flex; align-items: center; gap: var(--ba-sp-8); color: var(--ba-ink); font-weight: var(--ba-fw-medium); cursor: help; border-radius: var(--ba-radius); }
.cmp__st:focus { outline: none; }
.cmp__st:focus-visible { outline: var(--site-rule) solid var(--ba-accent); outline-offset: var(--ba-sp-4); }
.cmp__label { text-decoration: underline dotted var(--ba-line-strong); text-underline-offset: var(--ba-sp-4); }
.cmp__st svg { flex: none; width: var(--site-icon); height: var(--site-icon); }
.cmp__st--yes svg { color: var(--ba-ok); }
.cmp__st--partial svg { color: var(--ba-warn); }
.cmp__st--no svg, .cmp__st--unchecked svg { color: var(--ba-ink-3); }
.cmp-tip { display: none; position: absolute; z-index: 5; left: var(--ba-sp-8); top: calc(100% - var(--ba-sp-8)); width: max-content; max-width: var(--site-tip-w); padding: var(--ba-sp-8) var(--ba-sp-12); border-radius: var(--ba-radius); background: var(--ba-ink); color: var(--ba-surface); box-shadow: var(--ba-sh-2); font-size: var(--site-fs-small); font-weight: var(--ba-fw-normal); line-height: var(--ba-lh-base); text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }
.cmp__table .cmp__us .cmp-tip { left: auto; right: var(--ba-sp-8); }
.cmp--status td:hover > .cmp-tip, .cmp__st:focus + .cmp-tip { display: block; }
.cmp--status td.is-tip-off > .cmp-tip { display: none; }
@media (max-width: 720px), (hover: none) {
  .cmp--status .cmp__table th, .cmp--status .cmp__table td { padding: var(--ba-sp-12) var(--ba-sp-8); }
  .cmp--status .cmp__table tbody th { width: 30%; }
  .cmp__st { align-items: flex-start; gap: var(--ba-sp-4); }
  .cmp-tip, .cmp__table .cmp__us .cmp-tip { position: static; width: auto; max-width: none; margin-top: var(--ba-sp-8); background: var(--ba-surface-sunken); color: var(--ba-ink-2); box-shadow: none; }
  .cmp--status td:hover > .cmp-tip { display: none; }
  .cmp--status .cmp__st:focus + .cmp-tip { display: block; }
}
  /* Перший екран на робочому екрані власника (09.10): 1920×1200 при масштабі 150 % — вікно 1280×~680 CSS px.
   * Довгий заголовок по центру — у 2 рядки, не 3; на низьких вікнах — менший заголовок героя й щільніші відступи героя. */
  .hero--center .hero__title--long { max-width: 30ch; }
  @media (min-width: 1024px) and (max-height: 760px) {
    :root { --site-fs-hero: clamp(34px, 3.8vw, 58px); }
    .hero:not(.hero--compact, .hero--door, .hero--crumbs, .hero--dir) { padding-top: var(--site-sp-48); padding-bottom: var(--site-sp-64); }
    .hero .facts { margin-top: var(--site-sp-48); }
  }
  /* САЙТ-ГЕРОЇ-680 (12.10): решта героїв у тому ж низькому вікні — сторінки рішень (`--solution`, `--crumbs`), напрямів
   * (`--dir`), дверей і головна зі смугою переваг. У першому екрані — заголовок, лід, кнопки й `.facts`; кадр героя висоти
   * не задає (`contain: size` — рядок сітки міряється текстом) і обрізається знизу рядком сітки. Лише `min-width: 1024px` і
   * `max-height: 760px`: 1280×900, 1600×900 і телефон не змінюються. */
  @media (min-width: 1024px) and (max-height: 760px) {
    :root {
      --site-fs-hero: clamp(34px, 3.5vw, 58px);
      --site-fs-hero-long: clamp(30px, 3.2vw, 46px);
      --site-hero-low-pt: var(--ba-sp-32);
      --site-hero-low-pb: var(--site-sp-48);
      --site-hero-low-step: var(--ba-sp-16);
    }
    .hero:not(.hero--compact, .hero--door, .hero--crumbs, .hero--dir) { padding-top: var(--site-hero-low-pt); }
    .hero:not(.hero--compact) { padding-bottom: var(--site-hero-low-pb); }
    /* САЙТ-ГЕРОЙ-ЕКРАН (13.10): герой займає рівно перший екран — наступна секція не визирає знизу; вміст по центру висоти. */
    .hero:not(.hero--compact) { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--site-header-h)); }
    .hero:not(.hero--compact) > .wrap { width: 100%; }
    .hero--crumbs .crumbs, .hero--dir .crumbs, .hero--door .crumbs { margin-bottom: var(--ba-sp-24); }
    .hero__title, .hero__lead { margin-top: var(--site-hero-low-step); }
    .hero .actions { margin-top: var(--ba-sp-24); }
    .hero__micro { margin-top: var(--ba-sp-8); }
    .hero .facts { margin-top: var(--ba-sp-24); padding-top: var(--site-hero-low-step); }
    .hero__grid > .hero__shot, .hero__grid > .hero__frame { contain: size; align-self: stretch; overflow: hidden; }
  }
/* САЙТ-ГОЛОВНА-1610 (в): `lead2` — окремим рядком під лідом, меншим кеглем, щільно до ліду; кнопки ближче, щоб
 * герой з `lead2` і мікротекстом лишався в першому екрані 1280×680. */
.hero__lead.hero__lead--note { margin-top: var(--ba-sp-8); font-size: var(--site-fs-body); color: var(--ba-ink-2); }
.hero__lead--note + .actions { margin-top: var(--ba-sp-24); }
@media (min-width: 1024px) and (max-height: 760px) {
  .hero__lead.hero__lead--note { margin-top: var(--ba-sp-4); font-size: var(--site-fs-small); }
  .hero__lead--note + .actions { margin-top: var(--ba-sp-16); }
}
/* САЙТ-ГОЛОВНА-1610 (а): «CRM-ядро» — вкладки на радіокнопках без скрипта; панель вибраної — текст ліворуч, кадр
 * праворуч. На телефоні вкладок немає: панелі стопкою, назва вкладки — H3 панелі. */
.core__tabs { position: relative; }
.core__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.core__list { display: flex; flex-wrap: wrap; gap: var(--ba-sp-4); border-bottom: 1px solid var(--ba-line); }
.core__tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ba-sp-16); margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: var(--ba-fw-semi); color: var(--ba-ink-2); cursor: pointer; transition: color var(--ba-dur-fast) var(--ba-ease-out), border-color var(--ba-dur-fast) var(--ba-ease-out); }
.core__tab:hover { color: var(--ba-ink); }
.core__panels { margin-top: var(--site-sp-48); }
.core__panel { display: none; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--site-gap); align-items: center; }
.core__text { display: grid; gap: var(--ba-sp-16); align-content: start; }
.core__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.core__lead { font-size: var(--site-fs-lead); color: var(--ba-ink-2); text-wrap: pretty; }
.core__text .more { justify-self: start; }
.core__shot { min-width: 0; overflow: hidden; }
.core__radio:nth-of-type(1):checked ~ .core__panels > .core__panel:nth-child(1),
.core__radio:nth-of-type(2):checked ~ .core__panels > .core__panel:nth-child(2),
.core__radio:nth-of-type(3):checked ~ .core__panels > .core__panel:nth-child(3),
.core__radio:nth-of-type(4):checked ~ .core__panels > .core__panel:nth-child(4),
.core__radio:nth-of-type(5):checked ~ .core__panels > .core__panel:nth-child(5),
.core__radio:nth-of-type(6):checked ~ .core__panels > .core__panel:nth-child(6) { display: grid; }
.core__radio:nth-of-type(1):checked ~ .core__list > .core__tab:nth-child(1),
.core__radio:nth-of-type(2):checked ~ .core__list > .core__tab:nth-child(2),
.core__radio:nth-of-type(3):checked ~ .core__list > .core__tab:nth-child(3),
.core__radio:nth-of-type(4):checked ~ .core__list > .core__tab:nth-child(4),
.core__radio:nth-of-type(5):checked ~ .core__list > .core__tab:nth-child(5),
.core__radio:nth-of-type(6):checked ~ .core__list > .core__tab:nth-child(6) { color: var(--ba-ink); border-bottom-color: var(--ba-accent); }
.core__radio:nth-of-type(1):focus-visible ~ .core__list > .core__tab:nth-child(1),
.core__radio:nth-of-type(2):focus-visible ~ .core__list > .core__tab:nth-child(2),
.core__radio:nth-of-type(3):focus-visible ~ .core__list > .core__tab:nth-child(3),
.core__radio:nth-of-type(4):focus-visible ~ .core__list > .core__tab:nth-child(4),
.core__radio:nth-of-type(5):focus-visible ~ .core__list > .core__tab:nth-child(5),
.core__radio:nth-of-type(6):focus-visible ~ .core__list > .core__tab:nth-child(6) { outline: var(--site-rule) solid var(--ba-accent); outline-offset: var(--ba-sp-4); }
@media (max-width: 720px) {
  .core__radio, .core__list { display: none; }
  .core__panels { margin-top: 0; display: grid; gap: var(--site-sp-48); }
  .core__panels > .core__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ba-sp-16); }
  .core__title { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font-size: var(--site-fs-door); line-height: var(--ba-lh-tight); }
}
@media (min-width: 721px) and (max-width: 960px) {
  .core__panel { grid-template-columns: minmax(0, 1fr); }
}
/* САЙТ-ГОЛОВНА-1610-ЯДРО-ВОРОНКА (22.10): кадр `funnel-report` у вкладці «Розуміти воронку» без внутрішньої
 * прокрутки. Причина — сама таблиця: сім колонок, `nowrap` і смужка шляху 186 px; шапка, плашка й плитки
 * лише розтягувались до її ширини (831 px). Масштаб і переноси — як у `.feat__shot` (~1203–1214), лише для
 * цього кадру: три інші вкладки вміщуються й без нього. Вужче за колонку кадру в парі з текстом
 * (961–1199), у вузькій одній колонці (≤ 800) і на телефоні ховаються допоміжні колонки: смужка шляху й «Сер. днів», на телефоні ще
 * «Сума». «Ще тут», «Пішли далі» і конверсія — суть кадру — лишаються завжди. */
.core__shot .frame--funnel-report .app { zoom: .78; }
.core__shot .frame--funnel-report .app-kpis--3 { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.core__shot .frame--funnel-report .app-table td:not(.app-num), .core__shot .frame--funnel-report .app-table th:not(.app-num) { white-space: normal; }
.core__shot .frame--funnel-report .app-table td { height: auto; padding-block: var(--ba-sp-8); }
@media (min-width: 961px) and (max-width: 1199px), (max-width: 800px) {
  .core__shot .frame--funnel-report .app-table th:nth-child(2), .core__shot .frame--funnel-report .app-table td:nth-child(2),
  .core__shot .frame--funnel-report .app-table th:nth-child(5), .core__shot .frame--funnel-report .app-table td:nth-child(5) { display: none; }
}
@media (max-width: 720px) {
  .core__shot .frame--funnel-report .app { zoom: .72; }
  .core__shot .frame--funnel-report .app-table th:nth-child(4), .core__shot .frame--funnel-report .app-table td:nth-child(4) { display: none; }
  .core__shot .frame--funnel-report .app-table th, .core__shot .frame--funnel-report .app-table td { padding-inline: var(--ba-sp-8); }
}
/* САЙТ-ГОЛОВНА-1610 (б): перша картка дверей — на ширину двох: текст ліворуч, мініатюра кадру праворуч.
   Селектор a.door.door--wide (0,2,1): широка картка — посилання, і a.door { display: flex } (0,1,1) інакше перебиває сітку. */
a.door.door--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.door__body { display: flex; flex-direction: column; gap: var(--ba-sp-24); min-width: 0; height: 100%; }
.door__mini { min-width: 0; overflow: hidden; pointer-events: none; }
@media (max-width: 960px) {
  a.door.door--wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .door__mini { display: none; }
}
/* САЙТ-ГОЛОВНА-1610 (г): «Krokul у власній роботі» — факти ліворуч, кадр нашого тенанта праворуч. */
.own__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--site-gap); align-items: center; }
.own .section__head { margin-bottom: var(--ba-sp-32); }
.own__facts { display: grid; gap: var(--ba-sp-16); }
.own__fact { display: flex; gap: var(--ba-sp-12); align-items: flex-start; font-size: var(--site-fs-lead); color: var(--ba-ink-2); text-wrap: pretty; }
.own__fact svg { flex: none; width: var(--site-icon); height: var(--site-icon); margin-top: 0.3em; color: var(--ba-ok); }
.own__shot { min-width: 0; overflow: hidden; }
@media (max-width: 960px) {
  .own__grid { grid-template-columns: minmax(0, 1fr); }
}
/* САЙТ-ТУР-З-КАДРІВ (20.10): тур на головній — механіка вкладок «CRM-ядра» (`.core__*`). Кроки — шість рівних колонок із
 * номером; заголовок кроку в панелі видно завжди; підпис точки — рядок із маркером під вигодою. Телефон — правила `.core__*`. */
.hero__tour { margin-top: var(--ba-sp-12); }
.tour .core__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.tour__tab { align-items: flex-start; gap: var(--ba-sp-8); padding: var(--ba-sp-12) var(--ba-sp-12) var(--ba-sp-12) 0; line-height: var(--ba-lh-tight); text-wrap: pretty; cursor: pointer; }
.tour__num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--ba-radius-pill); background: var(--ba-accent-soft); color: var(--ba-accent-strong); font-size: var(--ba-fs-sm); font-variant-numeric: tabular-nums; }
.core__radio:nth-of-type(1):checked ~ .core__list > .tour__tab:nth-child(1) .tour__num,
.core__radio:nth-of-type(2):checked ~ .core__list > .tour__tab:nth-child(2) .tour__num,
.core__radio:nth-of-type(3):checked ~ .core__list > .tour__tab:nth-child(3) .tour__num,
.core__radio:nth-of-type(4):checked ~ .core__list > .tour__tab:nth-child(4) .tour__num,
.core__radio:nth-of-type(5):checked ~ .core__list > .tour__tab:nth-child(5) .tour__num,
.core__radio:nth-of-type(6):checked ~ .core__list > .tour__tab:nth-child(6) .tour__num { background: var(--ba-accent); color: var(--ba-on-accent); }
.tour .core__title { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font-size: var(--site-fs-door); line-height: var(--ba-lh-tight); }
.tour__step { font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); letter-spacing: var(--ba-ls-wide); color: var(--ba-ink-3); font-variant-numeric: tabular-nums; }
.tour__hot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ba-sp-12); align-items: start; padding: var(--ba-sp-12) 14px; border-radius: var(--ba-radius-card); background: var(--ba-accent-soft); color: var(--ba-ink); text-wrap: pretty; }
.tour__dot { width: 12px; height: 12px; margin-top: 5px; border-radius: var(--ba-radius-pill); background: var(--ba-accent); box-shadow: 0 0 0 4px var(--ba-accent-soft-2); }
.tour__cta { justify-self: start; }
/* `hotspotAt`: рядок кадру з міткою `data-tour-hot` підсвічено лише в турі (поза ним мітка нічого не робить); у таблиці —
 * тлом комірок без рамки, щоб колонка читалась однією смугою. Підпис під кроком лишається для зчитувача екрана. */
.tour [data-tour-hot] { outline: 2px solid var(--ba-accent); outline-offset: -2px; background-color: var(--ba-accent-soft); }
.tour td[data-tour-hot], .tour th[data-tour-hot] { outline: none; }
@media (max-width: 720px) {
  /* САЙТ-ТУР-375: `.tour .core__list` (0,2,0) перебивав `.core__list { display: none }` (0,1,0) — вкладки лишались сіткою з 6. */
  .tour .core__list { display: none; }
  .tour__step { display: none; }
}