:root { --mw: 1120px; }
html, body { margin: 0; }
* { box-sizing: border-box; }
body { background: var(--bg-card); color: var(--text); font-family: var(--font); font-feature-settings: var(--font-features); -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav__in { max-width: var(--mw); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.nav__logo { display: flex; text-decoration: none; }
.nav__links { display: flex; gap: 26px; margin-left: 12px; }
.nav__links a { font: 600 13.5px var(--font); color: var(--text-muted); text-decoration: none; }
.nav__links a:hover { color: var(--text); }
.nav__links a.active { color: var(--accent); }
.nav__cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav__burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--text); padding: 6px; align-items: center; justify-content: center; }
.nav__mobile { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 6px 24px 20px; }
.nav__mobile.open { display: flex; flex-direction: column; }
.nav__mobile a { font: 600 15px var(--font); color: var(--text); text-decoration: none; padding: 15px 0; border-bottom: 1px solid var(--divider); }
.nav__mobile a.active { color: var(--accent); }
.nav__mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* ---------- Generic section ---------- */
.sec { max-width: var(--mw); margin: 0 auto; padding: 84px 24px; }
.sec--soft { background: var(--bg-app); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec--soft .inner { max-width: var(--mw); margin: 0 auto; padding: 84px 24px; }
.hd { max-width: 660px; margin: 0 0 44px; }
.hd.center { margin-left: auto; margin-right: auto; text-align: center; }
.hd .k { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.hd h2 { font: 700 38px/1.12 var(--font); letter-spacing: -.025em; margin: 12px 0 14px; }
.hd p { font: 400 17px/1.6 var(--font); color: var(--text-muted); margin: 0; }

/* ---------- Hero ---------- */
.hero { max-width: var(--mw); margin: 0 auto; padding: 72px 24px 52px; display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.hero h1 { font: 700 56px/1.06 var(--font); letter-spacing: -.035em; margin: 20px 0 0; }
.hero h1 .hl { color: var(--accent); }
.hero p.lede { font: 400 19px/1.62 var(--font); color: var(--text-muted); margin: 22px 0 30px; max-width: 540px; }
.hero__cta { display: flex; gap: 12px; }
.hero__stats { display: flex; gap: 40px; margin-top: 40px; }
.hero__stat b { font: 700 28px var(--font); letter-spacing: -.02em; display: block; font-variant-numeric: tabular-nums; }
.hero__stat span { font: 500 12.5px var(--font); color: var(--text-light); }

/* ---------- Sub-page hero ---------- */
.phero { max-width: var(--mw); margin: 0 auto; padding: 40px 24px 8px; text-align: center; }
.phero .k { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.phero h1 { font: 700 52px/1.08 var(--font); letter-spacing: -.03em; margin: 14px auto 0; max-width: 800px; }
.phero p { font: 400 18px/1.6 var(--font); color: var(--text-muted); margin: 20px auto 28px; max-width: 600px; }
.phero .cta-row { display: flex; gap: 12px; justify-content: center; }

/* ---------- Product mock ---------- */
.mock { background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 24px 60px -24px rgba(15,23,42,.22); max-width: 100%; }
.mock--flat { box-shadow: none; }
.mock__bar { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.mock__bar .ttl { font: 600 12.5px var(--font); color: var(--text-muted); margin-left: 2px; }
.mock__bar .ago { margin-left: auto; font: 500 11.5px var(--font); color: var(--text-light); }
.mock__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
/* На узких экранах KPI-карточки моков — в 1 колонку (крупные значения вроде «1,24 млн ₽»
   не помещались в 2-3 колонки и резались). !important перебивает инлайн-grid у reports-мока. */
@media (max-width: 560px) { .mock__kpis { grid-template-columns: 1fr !important; } }
.chartcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.chartcard .ch-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chartcard .ch-hd b { font: 600 12.5px var(--font); }
.bars { display: flex; align-items: flex-end; gap: 9px; height: 116px; }
.bars i { flex: 1; border-radius: 5px 5px 0 0; background: var(--accent-line); display: block; }
.bars i.a { background: var(--accent); }
.insight { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 11px 13px; }
.insight .ic { color: var(--accent); display: flex; flex-shrink: 0; }
.insight p { margin: 0; font: 500 12.5px/1.45 var(--font); color: var(--text); }
.insight em { font-style: normal; font-weight: 600; }

/* extra mock bits (retention / integrations / billing) */
.rfm { display: flex; height: 36px; border-radius: 8px; overflow: hidden; margin-top: 4px; }
.rfm span { display: flex; align-items: center; justify-content: center; font: 600 11px var(--font); color: #fff; }
.rfm__legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.rfm__legend span { display: flex; align-items: center; gap: 6px; font: 500 11.5px var(--font); color: var(--text-muted); }
.rfm__legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.svc { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--divider); }
.svc:first-child { border-top: 0; }
.svc .sic { width: 34px; height: 34px; border-radius: 9px; background: var(--hover); color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc .nm { font: 600 13px var(--font); }
.svc .st { margin-left: auto; }
.bill__row { display: flex; justify-content: space-between; font: 500 13px var(--font); color: var(--text-muted); padding: 9px 0; border-top: 1px solid var(--divider); }
.bill__row:first-child { border-top: 0; }
.bill__row b { color: var(--text); font-variant-numeric: tabular-nums; }
.bill__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.bill__total b { font: 700 26px var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- Logos strip ---------- */
.logos { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.logos .lbl { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); width: 100%; text-align: center; margin-bottom: 4px; }
.logos span.l { font: 700 20px var(--font); color: var(--text-faint); letter-spacing: -.01em; }

/* ---------- Features grid ---------- */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; transition: border-color var(--dur-fast, .12s) ease, box-shadow var(--dur-fast, .12s) ease; }
.feat:hover { border-color: var(--border-strong); box-shadow: 0 10px 30px -18px rgba(15,23,42,.18); }
.feat.clickable { cursor: pointer; text-align: left; font-family: var(--font); width: 100%; }
.feat.clickable:hover { border-color: var(--accent-line); }
.feat__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.feat h3 { font: 600 17px var(--font); margin: 0 0 9px; letter-spacing: -.01em; }
.feat p { font: 400 14px/1.6 var(--font); color: var(--text-muted); margin: 0; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; position: relative; }
.step__n { font: 700 14px var(--font); color: var(--accent); width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.step h3 { font: 600 16px var(--font); margin: 0 0 8px; }
.step p { font: 400 14px/1.55 var(--font); color: var(--text-muted); margin: 0; }

/* ---------- Deep-dive rows ---------- */
.dd { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dd + .dd { margin-top: 88px; }
.dd.rev .dd__txt { order: 2; }
.dd__txt .k { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.dd__txt h3 { font: 700 30px/1.16 var(--font); letter-spacing: -.02em; margin: 12px 0 14px; }
.dd__txt p { font: 400 16px/1.62 var(--font); color: var(--text-muted); margin: 0 0 20px; max-width: 480px; }
.dd__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dd__list li { display: flex; gap: 10px; align-items: flex-start; font: 500 14.5px/1.5 var(--font); color: var(--text); }
.dd__list li .ck { color: var(--success); flex-shrink: 0; margin-top: 1px; }

/* ---------- Feature explorer (interactive) ---------- */
.fx { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.fx__tabs { display: flex; flex-direction: column; gap: 8px; }
.fx__tab { display: flex; gap: 14px; align-items: flex-start; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 17px; cursor: pointer; font-family: var(--font); transition: border-color var(--dur-fast,.12s) ease, background var(--dur-fast,.12s) ease; }
.fx__tab:hover { border-color: var(--border-strong); }
.fx__tab.active { border-color: var(--accent); background: var(--accent-soft); }
.fx__tab .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--hover); color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fx__tab.active .ic { background: var(--accent); color: #fff; }
.fx__tab .tx b { font: 600 15px var(--font); display: block; color: var(--text); margin-bottom: 3px; }
.fx__tab .tx span { font: 400 12.5px/1.45 var(--font); color: var(--text-muted); }
.fx__panel { background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center; }
.fx__panel > * { min-width: 0; }
/* Эксплореры (features/industries) рендерят ВСЕ панели server-side; неактивные
   скрыты атрибутом [hidden] — нужен явный override, т.к. .fx__panel = display:grid.
   Без JS видна только первая (активная); site-app.js переключает .hidden по клику. */
.fx__panel[hidden] { display: none; }
.fx__info .k { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.fx__info h3 { font: 700 26px/1.18 var(--font); letter-spacing: -.02em; margin: 12px 0 12px; }
.fx__info p { font: 400 15.5px/1.6 var(--font); color: var(--text-muted); margin: 0 0 18px; }
.fx__list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.fx__list li { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.5 var(--font); }
.fx__list li .ck { color: var(--success); flex-shrink: 0; margin-top: 1px; }

/* ---------- Excel compare ---------- */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmp__card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.cmp__card.bad { background: var(--bg-app); }
.cmp__card.good { background: var(--accent-soft); border-color: var(--accent-line); }
.cmp__card h4 { font: 600 16px var(--font); margin: 0 0 16px; display: flex; align-items: center; gap: 9px; }
.cmp__card.bad h4 { color: var(--text-muted); }
.cmp__card.good h4 { color: var(--accent); }
.cmp__list { display: flex; flex-direction: column; gap: 12px; }
.cmp__li { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.5 var(--font); color: var(--text-muted); }
.cmp__li .ic { flex-shrink: 0; margin-top: 1px; }
.cmp__card.good .cmp__li { color: var(--text); }

/* ---------- Industries ---------- */
.ind { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.indc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: border-color var(--dur-fast, .12s) ease; }
.indc:hover { border-color: var(--accent-line); }
.indc .c { width: 48px; height: 48px; border-radius: 12px; background: var(--hover); color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.indc:hover .c { background: var(--accent-soft); color: var(--accent); }
.indc span { font: 600 14px var(--font); }

/* ---------- Testimonials ---------- */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; }
.tcard .stars { display: flex; gap: 3px; color: var(--accent); margin-bottom: 14px; }
.tcard blockquote { margin: 0 0 14px; font: 400 15px/1.62 var(--font); color: var(--text); position: relative; max-height: 168px; overflow: hidden; transition: max-height .3s ease; }
.tcard blockquote.is-clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52px; background: linear-gradient(transparent, var(--bg-card)); pointer-events: none; }
.tcard.is-open blockquote { max-height: 1600px; }
.tcard.is-open blockquote.is-clamped::after { opacity: 0; }
.tcard__more { align-self: flex-start; margin: 0 0 18px; padding: 0; background: none; border: 0; cursor: pointer; font: 600 13px var(--font); color: var(--accent); }
.tcard__more:hover { text-decoration: underline; }
.tcard .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tcard .who b { font: 600 13.5px var(--font); display: block; }
.tcard .who span { font: 500 12.5px var(--font); color: var(--text-light); }

/* ---------- Pricing ---------- */
.price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.pc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.pc--feat { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); position: relative; }
.pc__badge { position: absolute; top: -12px; left: 28px; }
.pc h3 { font: 600 17px var(--font); margin: 0; }
.pc .desc { font: 400 13px/1.5 var(--font); color: var(--text-light); margin: 6px 0 0; }
.pc__price { font: 700 38px var(--font); letter-spacing: -.02em; margin: 18px 0 2px; font-variant-numeric: tabular-nums; }
.pc__price span { font: 500 15px var(--font); color: var(--text-light); }
.pc__per { font: 400 12.5px var(--font); color: var(--text-light); }
.pc__list { display: flex; flex-direction: column; gap: 11px; margin: 20px 0 24px; }
.pc__li { display: flex; gap: 9px; align-items: flex-start; font: 400 13.5px/1.45 var(--font); color: var(--text-muted); }
.pc__li svg { color: var(--success); flex-shrink: 0; margin-top: 1px; }
.pc__total { font: 500 12.5px var(--font); color: var(--text-muted); margin: -2px 0 0; }
.pc__total b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Pricing calculator ---------- */
.calc { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0 auto 44px; }
.calc__group { display: flex; align-items: center; gap: 12px; }
.calc__lbl { font: 500 13.5px var(--font); color: var(--text-muted); }
.calc__seg { min-width: 280px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.stepper button { width: 40px; height: 40px; border: 0; background: var(--bg-card); cursor: pointer; color: var(--text); display: flex; align-items: center; justify-content: center; }
.stepper button:hover { background: var(--hover); }
.stepper button:disabled { color: var(--text-faint); cursor: not-allowed; }
.stepper .val { min-width: 56px; text-align: center; font: 600 16px var(--font); font-variant-numeric: tabular-nums; border-left: 1px solid var(--border); border-right: 1px solid var(--border); height: 40px; display: flex; align-items: center; justify-content: center; }
.save-pill { font: 600 12px var(--font); color: var(--success); background: var(--success-soft); border: 1px solid var(--success-line); border-radius: 999px; padding: 5px 12px; }

/* ---------- Comparison table ---------- */
.cmpt-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cmpt { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--bg-card); }
.cmpt th, .cmpt td { padding: 15px 18px; border-bottom: 1px solid var(--divider); text-align: center; font: 500 13.5px var(--font); color: var(--text-muted); }
.cmpt thead th { border-bottom: 1px solid var(--border); background: var(--bg-app); }
.cmpt thead th .cmpt-pn { font: 600 15px var(--font); color: var(--text); display: block; }
.cmpt thead th .pp { font: 500 12px var(--font); color: var(--text-light); }
.cmpt thead th.feat { background: var(--accent-soft); }
.cmpt thead th.feat .cmpt-pn { color: var(--accent); }
.cmpt td:first-child, .cmpt th:first-child { text-align: left; color: var(--text); font-weight: 600; }
.cmpt tbody td.on { color: var(--success); }
.cmpt tbody td.off { color: var(--text-faint); }
.cmpt .grp td { background: var(--bg-app); font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); text-align: left; }
.cmpt td.col-feat { background: var(--accent-soft); }

/* ---------- Integrations ---------- */
.intg-filter { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.intg-chip { font: 600 13px var(--font); padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-family: var(--font); transition: border-color var(--dur-fast,.12s) ease, color var(--dur-fast,.12s) ease; }
.intg-chip:hover { border-color: var(--accent-line); color: var(--text); }
.intg-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* На мобиле чипы-фильтры (каталог /features, интеграции) — компактнее и по левому
   краю, иначе крупные центрированные чипы переносятся «лесенкой» по 1-2 в ряд. */
@media (max-width: 560px) {
  .featdir__nav, .intg-filter { justify-content: flex-start; gap: 7px; }
  .featdir__nav .intg-chip, .intg-filter .intg-chip { font-size: 12px; padding: 7px 12px; }
}
.intg { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; transition: border-color var(--dur-fast,.12s) ease, box-shadow var(--dur-fast,.12s) ease; }
.intg:hover { border-color: var(--border-strong); box-shadow: 0 10px 30px -18px rgba(15,23,42,.18); }
.intg__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.intg__ic { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.intg h3 { font: 600 17px var(--font); margin: 0 0 8px; letter-spacing: -.01em; }
.intg p { font: 400 14px/1.6 var(--font); color: var(--text-muted); margin: 0 0 18px; }
.intg__st { display: flex; align-items: center; gap: 7px; font: 500 12.5px var(--font); color: var(--success); margin-top: auto; }

/* ---------- About: stat strip ---------- */
.statstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.statc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; }
.statc b { display: block; font: 700 40px/1 var(--font); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.statc b.accent { color: var(--accent); }
.statc span { display: block; font: 400 13.5px/1.5 var(--font); color: var(--text-muted); margin-top: 12px; }

/* ---------- About: founder note ---------- */
.fnote { max-width: 820px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 44px 48px; }
.fnote blockquote { margin: 0; font: 500 22px/1.5 var(--font); letter-spacing: -.01em; color: var(--text); }
.fnote blockquote em { font-style: normal; font-weight: 600; color: var(--accent); }
.fnote__who { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.fnote__who b { display: block; font: 600 14.5px var(--font); }
.fnote__who div span { display: block; font: 500 12.5px var(--font); color: var(--text-light); margin-top: 2px; }

/* ---------- About: story rows ---------- */
.story { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.story__row { display: grid; grid-template-columns: 132px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid var(--divider); }
.story__row:first-child { border-top: 0; }
.story__yr { font: 700 17px var(--font); color: var(--accent); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.story__row h3 { font: 600 17px var(--font); margin: 0 0 7px; letter-spacing: -.01em; }
.story__row p { font: 400 14.5px/1.62 var(--font); color: var(--text-muted); margin: 0; }

@media (max-width: 920px) {
  .statstrip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .statstrip { grid-template-columns: 1fr 1fr; }
  .fnote { padding: 32px 24px; }
  .fnote blockquote { font-size: 19px; }
  .story__row { grid-template-columns: 1fr; gap: 6px; }
}
/* Тарифы-калькулятор и плитки «о нас» на мобиле: калькулятор в колонку (иначе
   «Оплата» + тоггл 280px + «−15%» обрезались по краям), цифры статов мельче. */
@media (max-width: 560px) {
  .calc { flex-direction: column; gap: 16px; }
  .calc__group { flex-wrap: wrap; justify-content: center; }
  .calc__seg { min-width: 0; }
  .statc b { font-size: 30px; }
  .statc { padding: 22px 18px; }
}
@media (max-width: 480px) {
  .statstrip { grid-template-columns: 1fr; }
}

/* ---------- Careers: positions list ---------- */
.jobs { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }
.job { display: grid; grid-template-columns: 48px 1fr auto; gap: 18px; align-items: center; width: 100%; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; cursor: pointer; font-family: var(--font); transition: border-color var(--dur-fast,.12s) ease, box-shadow var(--dur-fast,.12s) ease; }
.job:hover { border-color: var(--accent-line); box-shadow: 0 10px 30px -18px rgba(15,23,42,.18); }
.job__ic { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.job__main h3 { font: 600 17px var(--font); margin: 0 0 8px; letter-spacing: -.01em; }
.job__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.job__tag { font: 500 12px var(--font); color: var(--text-muted); background: var(--hover); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; }
.job__go { display: flex; align-items: center; gap: 7px; font: 600 13px var(--font); color: var(--accent); white-space: nowrap; }
.job--hot { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- Careers: job modal ---------- */
.jm { display: flex; flex-direction: column; gap: 0; }
.jm__close { position: sticky; top: 0; align-self: flex-end; margin: -6px -6px -2px 0; background: transparent; border: 0; cursor: pointer; color: var(--text-light); padding: 6px; border-radius: var(--radius-sm); display: flex; z-index: 3; }
.jm__close:hover { background: var(--hover); color: var(--text); }
.jm__head h3 { font: 700 25px var(--font); letter-spacing: -.02em; margin: 0 0 12px; }
.jm__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.jm__lead { font: 400 15px/1.62 var(--font); color: var(--text-muted); margin: 0 0 8px; }
.jm__sec { padding: 22px 0 0; }
.jm__sec h4 { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); margin: 0 0 14px; }
.jm__list { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.jm__list li { display: flex; gap: 11px; align-items: flex-start; font: 400 14.5px/1.55 var(--font); color: var(--text); }
.jm__list li .ck { color: var(--success); flex-shrink: 0; margin-top: 1px; }
.jm__list li .dt { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.jm__sub { font: 500 13.5px var(--font); color: var(--text-muted); margin: 18px 0 0; }
.jm__sub b { color: var(--text); font-weight: 700; }
.jm__apply { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border); }
.jobform { display: flex; flex-direction: column; gap: 14px; }
.jobform__ta { width: 100%; min-height: 84px; resize: vertical; font: 400 14px/1.5 var(--font); color: var(--text); background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 11px 13px; font-family: var(--font); }
.jobform__ta:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.jobform__lbl { font: 600 12.5px var(--font); color: var(--text); margin-bottom: -8px; }
.jm__done { text-align: center; padding: 18px 0 6px; }
.jm__done .ico { width: 60px; height: 60px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.jm__done h3 { font: 700 22px var(--font); letter-spacing: -.02em; margin: 0 0 8px; }
.jm__done p { font: 400 14.5px/1.55 var(--font); color: var(--text-muted); margin: 0 auto; max-width: 360px; }

@media (max-width: 560px) {
  .job { grid-template-columns: 44px 1fr; }
  .job__go { display: none; }
}

/* ---------- Contacts ---------- */
.contact { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; max-width: var(--mw); margin: 0 auto; align-items: start; }
.contact__card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.contact__card h2 { font: 700 24px var(--font); letter-spacing: -.02em; margin: 0 0 6px; }
.contact__card p.sub { font: 400 14.5px/1.55 var(--font); color: var(--text-muted); margin: 0 0 24px; }
.cform { display: flex; flex-direction: column; gap: 15px; }
.cform__lbl { font: 600 12.5px var(--font); color: var(--text); margin-bottom: -8px; }
/* Лид-формы (Этап 5): honeypot, согласие 152-ФЗ, состояния ошибки/успеха. */
.lead-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-consent { display: flex; align-items: flex-start; gap: 9px; font: 400 12.5px/1.5 var(--font); color: var(--text-muted); cursor: pointer; }
.lead-consent input { margin-top: 2px; flex-shrink: 0; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.lead-consent a { color: var(--accent); text-decoration: none; }
.lead-consent a:hover { text-decoration: underline; }
.lead-consent--sm { font-size: 11.5px; }
.lead-alert { padding: 11px 14px; border-radius: var(--radius-sm); background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); font: 500 13px/1.45 var(--font); }
.lead-sent { display: flex; align-items: center; gap: 13px; padding: 20px 22px; border: 1px solid var(--success-line); background: var(--success-soft); border-radius: var(--radius); }
.lead-sent__ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; }
.lead-sent b { display: block; font: 700 14.5px var(--font); color: var(--text); }
.lead-sent div span { font: 400 13px/1.45 var(--font); color: var(--text-muted); }
.lmag__form--lead { display: flex; flex-direction: column; gap: 11px; }
.lmag__form-row { display: flex; gap: 10px; }
.lmag__form-row > *:first-child { flex: 1; }
.ds-sel--err .ds-sel__wrap { border-color: var(--danger); }
@media (max-width: 480px) { .lmag__form-row { flex-direction: column; } .lmag__form-row > * { width: 100%; } }
.cside { display: flex; flex-direction: column; gap: 12px; }
.cmethod { display: grid; grid-template-columns: 44px 1fr; gap: 15px; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; transition: border-color var(--dur-fast,.12s) ease; }
.cmethod:hover { border-color: var(--accent-line); }
.cmethod .ic { width: 44px; height: 44px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.cmethod b { font: 600 14.5px var(--font); display: block; color: var(--text); }
.cmethod .v { font: 500 13px var(--font); color: var(--accent); margin-top: 2px; display: block; }
.cmethod .d { font: 400 12.5px var(--font); color: var(--text-light); margin-top: 3px; display: block; }
.creq { background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; }
.creq h4 { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); margin: 0 0 14px; }
.creq__row { display: flex; gap: 10px; align-items: flex-start; font: 400 13.5px/1.5 var(--font); color: var(--text); padding: 8px 0; border-top: 1px solid var(--divider); }
.creq__row:first-of-type { border-top: 0; }
.creq__row .ic { color: var(--text-light); flex-shrink: 0; margin-top: 1px; }
.cdone { text-align: center; padding: 28px 0; }
.cdone .ico { width: 64px; height: 64px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.cdone h3 { font: 700 23px var(--font); letter-spacing: -.02em; margin: 0 0 8px; }
.cdone p { font: 400 14.5px/1.55 var(--font); color: var(--text-muted); margin: 0 auto 22px; max-width: 360px; }

@media (max-width: 920px) {
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .contact__card { padding: 24px; }
}

/* ---------- Knowledge base: hero stats ---------- */
.kb-stats { display: flex; gap: 56px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.kb-stat b { font: 700 30px var(--font); letter-spacing: -.02em; display: block; font-variant-numeric: tabular-nums; }
.kb-stat span { font: 500 12.5px var(--font); color: var(--text-light); }

/* ---------- Breadcrumb (cross-cutting, under nav) ---------- */
.crumb { border-bottom: 1px solid var(--border); background: var(--bg-card); }
.crumb__in { max-width: var(--mw); margin: 0 auto; padding: 16px 24px; display: flex; gap: 9px; align-items: center; font: 500 12.5px var(--font); color: var(--text-muted); }
.crumb a { color: var(--text-muted); text-decoration: none; }
.crumb a:hover { color: var(--text); }
.crumb .sep { color: var(--text-faint); display: flex; }
.crumb .cur { color: var(--text); }

/* ---------- KB category cards ---------- */
.kbcats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kbcat { display: grid; grid-template-columns: 46px 1fr auto; gap: 16px; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; cursor: pointer; font-family: var(--font); text-align: left; transition: border-color var(--dur-fast,.12s) ease, box-shadow var(--dur-fast,.12s) ease; }
.kbcat:hover { border-color: var(--accent-line); box-shadow: 0 10px 30px -18px rgba(15,23,42,.18); }
.kbcat .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.kbcat b { font: 600 15.5px var(--font); display: block; color: var(--text); }
.kbcat span { font: 500 12.5px var(--font); color: var(--text-light); margin-top: 3px; display: block; }
.kbcat .arr { color: var(--text-faint); display: flex; }
.kbcat:hover .arr { color: var(--accent); }
/* База знаний (v3): карточки-ссылки (рендерятся как <a> для SEO) без подчёркивания
   + пустой результат поиска/фильтра в индексе и рубрике. */
.kbcat, .art, .feat-art { text-decoration: none; }
.kb-noresults { text-align: center; padding: 40px 20px; color: var(--text-light); font: 500 15px var(--font); }
.art-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shbtn.is-copied { border-color: var(--success); color: var(--success); }

/* ---------- KB toolbar (filter + search) ---------- */
.kbtoolbar { display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 28px; }
.kbchips { display: flex; gap: 9px; flex-wrap: wrap; }
.kbsearch { min-width: 260px; flex: 0 0 auto; }
@media (max-width: 700px) { .kbsearch { width: 100%; min-width: 0; } }

/* ---------- Featured article ---------- */
.feat-art { display: grid; grid-template-columns: 1.08fr .92fr; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; cursor: pointer; background: var(--bg-card); width: 100%; text-align: left; font-family: var(--font); transition: box-shadow var(--dur-fast,.12s) ease; }
.feat-art:hover { box-shadow: 0 16px 44px -22px rgba(15,23,42,.24); }
.feat-art__body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.feat-art__k { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 14px; }
.feat-art__body h2 { font: 700 29px/1.2 var(--font); letter-spacing: -.02em; margin: 0 0 14px; }
.feat-art__body p { font: 400 15px/1.62 var(--font); color: var(--text-muted); margin: 0 0 22px; max-width: 470px; }
.feat-art__meta { display: flex; gap: 14px; align-items: center; font: 500 12.5px var(--font); color: var(--text-light); }
.feat-art__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }
.feat-art__cover { background: #0f172a; color: #fff; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; min-height: 300px; }
.feat-art__cover .glow { position: absolute; right: -90px; top: -90px; width: 320px; height: 320px; border-radius: 50%; background: rgba(234,88,12,.18); }
.feat-art__cover .big { width: 100px; height: 100px; border-radius: 26px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; position: relative; }
.feat-art__cover .clabel { position: absolute; left: 32px; bottom: 30px; font: 600 13px var(--font); color: rgba(255,255,255,.78); }

/* ---------- Article grid ---------- */
.artgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.art { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; cursor: pointer; text-align: left; font-family: var(--font); transition: border-color var(--dur-fast,.12s) ease, box-shadow var(--dur-fast,.12s) ease; }
.art:hover { border-color: var(--accent-line); box-shadow: 0 10px 30px -18px rgba(15,23,42,.18); }
.art__cat { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 12px; }
.art h3 { font: 600 16.5px/1.32 var(--font); letter-spacing: -.01em; margin: 0 0 10px; }
.art p { font: 400 13.5px/1.6 var(--font); color: var(--text-muted); margin: 0 0 18px; }
.art__meta { margin-top: auto; display: flex; gap: 12px; align-items: center; font: 500 12px var(--font); color: var(--text-light); }
.art__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }
.kb-empty { grid-column: 1 / -1; text-align: center; padding: 64px 0; color: var(--text-light); font: 500 15px var(--font); }

/* Rubric page: centered rubric nav + anchored list header with search */
.rubnav { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.listbar { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.listbar__h { font: 700 19px var(--font); letter-spacing: -.01em; color: var(--text); display: flex; align-items: baseline; gap: 10px; margin: 0; }
.listbar__h span { font: 600 13px var(--font); color: var(--text-light); }
@media (max-width: 560px) {
  .listbar { align-items: stretch; }
  .listbar .kbsearch { width: 100%; }
}

/* Prev / next article navigation */
.prevnext { max-width: 820px; margin: 44px auto 56px; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pn { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; background: var(--bg-card); cursor: pointer; text-align: left; font-family: var(--font); text-decoration: none; transition: border-color var(--dur-fast,.12s) ease, box-shadow var(--dur-fast,.12s) ease; }
.pn:hover { border-color: var(--accent-line); box-shadow: 0 10px 30px -18px rgba(15,23,42,.18); }
.pn--next { text-align: right; align-items: flex-end; }
.pn__lbl { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); }
.pn:hover .pn__lbl { color: var(--accent); }
.pn__t { font: 600 15px/1.35 var(--font); color: var(--text); letter-spacing: -.01em; }
@media (max-width: 560px) {
  .prevnext { grid-template-columns: 1fr; }
  .pn--next { text-align: left; align-items: flex-start; }
}

/* Footer legal links */
.foot__legal a { color: inherit; text-decoration: none; }
.foot__legal a:hover { color: var(--text); }

/* Legal document: section numbering + last-updated note */
.legal-note { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px var(--font); color: var(--text-muted); background: var(--bg-app); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; margin-top: 20px; }
.art-body h2.legal-h { display: flex; gap: 12px; }
.art-body h2.legal-h .legal-n { color: var(--accent); font-variant-numeric: tabular-nums; }
.legal-req { background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin: 8px 0 0; }
.legal-req dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; }
.legal-req dt { font: 500 13.5px var(--font); color: var(--text-light); }
.legal-req dd { font: 600 13.5px var(--font); color: var(--text); margin: 0; }

/* ===================================================================
   FEATURE DETAIL PAGE
   =================================================================== */
.fhero { max-width: var(--mw); margin: 0 auto; padding: 48px 24px 8px; display: grid; grid-template-columns: 1fr 1.06fr; gap: 56px; align-items: center; }
.fhero > * { min-width: 0; }
.fhero__k { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.fhero h1 { font: 700 46px/1.08 var(--font); letter-spacing: -.03em; margin: 14px 0 0; text-wrap: pretty; }
.fhero__desc { font: 400 18px/1.6 var(--font); color: var(--text-muted); margin: 18px 0 26px; }
.fhero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.report-embed { position: relative; }
.report-embed__cap { display: flex; align-items: center; gap: 8px; font: 500 12px var(--font); color: var(--text-light); margin-top: 12px; justify-content: center; }
.report-embed__cap b { color: var(--text-muted); font-weight: 600; }
.report-embed__cap a { color: var(--accent); text-decoration: none; }
.report-embed .mock { overflow-x: auto; }

/* Big stat divider */
.bigstat { text-align: center; padding: 8px 0 0; }
.bigstat b { display: block; font: 800 64px/1 var(--font); letter-spacing: -.04em; color: var(--accent); }
.bigstat > span { display: block; font: 400 15px var(--font); color: var(--text-muted); margin-top: 12px; }

/* Industry pains */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pain { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start; }
.pain__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pain p { margin: 0; font: 400 15px/1.55 var(--font); color: var(--text); }
@media (max-width: 760px) { .pains { grid-template-columns: 1fr; } }

/* Lead magnets */
.lmag-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 920px; margin: 0 auto; }
.lmag { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.lmag__main { flex: 1; }
.lmag__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lmag__ic { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.lmag__k { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 10px; }
.lmag h3 { font: 600 17px/1.3 var(--font); letter-spacing: -.01em; margin: 0 0 8px; }
.lmag p { font: 400 14px/1.55 var(--font); color: var(--text-muted); margin: 0; }
.lmag__form { display: flex; gap: 10px; }
.lmag__form > *:first-child { flex: 1; }
.lmag__done { display: flex; align-items: center; gap: 8px; font: 600 13.5px var(--font); color: var(--success); background: var(--success-soft); border: 1px solid var(--success-line); border-radius: var(--radius-sm); padding: 12px 14px; }
.lmag--inline { display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center; background: var(--accent-soft); border-color: var(--accent-line); }
.lmag--inline .lmag__form { min-width: 340px; }
@media (max-width: 760px) { .lmag-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .lmag--inline { grid-template-columns: 1fr; }
  .lmag--inline .lmag__form { min-width: 0; }
  .lmag__form { flex-direction: column; }
  .lmag__form > * { width: 100%; }
}

/* How it works — scroll conveyor */
.how { max-width: 940px; margin: 0 auto; position: relative; }
.how::before { content: ''; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--border); }
.howstep { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 28px; padding-bottom: 40px; position: relative; }
.howstep:last-child { padding-bottom: 0; }
.howstep__body { min-width: 0; }
.howstep .mock { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.howstep__num { width: 56px; height: 56px; border-radius: 16px; background: var(--accent); color: #fff; font: 700 22px var(--font); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.howstep__k { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); }
.howstep__body h3 { font: 700 24px/1.2 var(--font); letter-spacing: -.02em; margin: 6px 0 10px; }
.howstep__body > p { font: 400 16px/1.6 var(--font); color: var(--text-muted); margin: 0 0 20px; max-width: 560px; }
@media (max-width: 640px) {
  .how::before { left: 21px; }
  .howstep { grid-template-columns: 44px 1fr; gap: 16px; }
  .howstep__num { width: 44px; height: 44px; font-size: 18px; border-radius: 13px; }
}

/* Sticky CTA bar (appears on scroll, dismissible) */
.stickycta { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 150%); z-index: 50; display: flex; align-items: center; gap: 16px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 18px 50px -16px rgba(15,23,42,.35); padding: 11px 12px 11px 20px; max-width: calc(100vw - 32px); opacity: 0; transition: transform var(--dur-base,.18s) cubic-bezier(.4,0,.2,1), opacity var(--dur-base,.18s) ease; }
.stickycta.show { transform: translate(-50%, 0); opacity: 1; }
.stickycta__txt { font: 600 14px var(--font); color: var(--text); white-space: nowrap; line-height: 1.25; }
.stickycta__txt span { display: block; font: 400 12px var(--font); color: var(--text-light); }
.stickycta__close { width: 30px; height: 30px; border: 0; background: transparent; color: var(--text-light); cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stickycta__close:hover { background: var(--hover); color: var(--text); }
@media (max-width: 560px) {
  .stickycta { left: 12px; right: 12px; bottom: 12px; transform: translateY(150%); padding: 10px 10px 10px 16px; gap: 10px; }
  .stickycta.show { transform: translateY(0); }
  .stickycta__txt span { display: none; }
  /* лейбл сжимается и усекается, кнопка/закрыть — никогда (иначе CTA вылезает за экран на узких iPhone) */
  .stickycta__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  .stickycta .ds-btn { flex-shrink: 0; }
}

/* Implementation steps */
.impl-steps { max-width: 760px; margin: 0 auto; counter-reset: ist; display: grid; gap: 14px; }
.impl-step { counter-increment: ist; display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.impl-step::before { content: counter(ist); width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); font: 700 17px var(--font); display: flex; align-items: center; justify-content: center; }
.impl-step h3 { font: 600 16px var(--font); margin: 0 0 5px; letter-spacing: -.01em; }
.impl-step p { font: 400 14px/1.55 var(--font); color: var(--text-muted); margin: 0; }
.impl-free { display: inline-flex; align-items: center; gap: 8px; background: var(--success-soft); border: 1px solid var(--success-line); color: var(--success); font: 600 13px var(--font); padding: 7px 16px; border-radius: 999px; margin-bottom: 18px; }

/* Feature directory (full report catalog list) */
.featdir { max-width: var(--mw); margin: 0 auto; }
.featdir__nav { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-bottom: 48px; }
.featcat { margin-top: 52px; scroll-margin-top: 80px; }
.featcat:first-of-type { margin-top: 0; }
.featcat__h { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.featcat__ic { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.featcat__h h3 { font: 700 21px var(--font); letter-spacing: -.02em; margin: 0; }
.featcat__h .cnt { font: 600 13px var(--font); color: var(--text-light); }
.featlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.featrow { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: start; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); text-decoration: none; cursor: pointer; transition: border-color var(--dur-fast,.12s) ease, box-shadow var(--dur-fast,.12s) ease; }
.featrow:hover { border-color: var(--accent-line); box-shadow: 0 8px 24px -16px rgba(15,23,42,.2); }
.featrow b { font: 600 15px var(--font); color: var(--text); letter-spacing: -.01em; }
.featrow .arr { color: var(--text-faint); display: flex; margin-top: 2px; }
.featrow:hover .arr { color: var(--accent); }
.featrow p { grid-column: 1 / -1; margin: 0; font: 400 13px/1.5 var(--font); color: var(--text-muted); }
@media (max-width: 760px) {
  .featlist { grid-template-columns: 1fr; }
}

/* Report preview frame (placeholder for a real dashboard screenshot) */
.report-frame { max-width: 880px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }
.report-frame-mock { max-width: 600px; margin: 0 auto; } /* мок отчёта в секции «Так выглядит отчёт» */
/* живой интерактивный отчёт (ReportEmbed) — шире обычной --mw (1120): расширяем сам .inner
   секции до ~1300 (без breakout-трюков, чтобы не ломать поток), и режем большие отступы. */
.sec--soft .inner--report { max-width: 1340px; padding-top: 48px; padding-bottom: 48px; }
.report-frame-live { max-width: 100%; margin: 0 auto; }
/* Широкий мок (виджет дашборда с 3-колоночной сеткой) — во всю ширину .inner--report. */
.report-frame-mock--wide { max-width: 100%; }

/* Мок-виджет «Ваш филиал vs Сеть» (network_compare из дашборда) — вёрстка тег-в-тег
   на v3-токенах, превью функционала сравнения филиалов. */
.netcmp-mock { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; text-align: left; }
.netcmp-mock__head { margin-bottom: 16px; }
.netcmp-mock__title { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.3; }
.netcmp-mock__sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.netcmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.netcmp-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.netcmp-card__title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.netcmp-card__main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.netcmp-card__value { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--text); line-height: 1.1; white-space: nowrap; }
.netcmp-card__diff { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-xs); white-space: nowrap; }
.netcmp-card__diff--pos { color: var(--success); background: var(--success-soft); }
.netcmp-card__diff--neg { color: var(--danger); background: var(--danger-soft); }
.netcmp-card__bars { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.netcmp-card__bar-row { display: flex; flex-direction: column; gap: 4px; }
.netcmp-card__bar-row__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; gap: 8px; }
.netcmp-card__bar-row__label { color: var(--text-muted); font-weight: 500; }
.netcmp-card__bar-row__value { color: var(--text); font-weight: 600; white-space: nowrap; }
.netcmp-card__bar-row__track { position: relative; height: 8px; background: var(--divider); border-radius: var(--radius-xs); overflow: hidden; }
.netcmp-card__bar-row__fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--radius-xs); min-width: 2px; }
.netcmp-card__bar-row__fill--branch { background: var(--text-muted); }
.netcmp-card__bar-row--pos .netcmp-card__bar-row__fill--branch { background: var(--success); }
.netcmp-card__bar-row--neg .netcmp-card__bar-row__fill--branch { background: var(--danger); }
.netcmp-card__bar-row__fill--avg { background: var(--text-faint); }
.netcmp-card__range { font-size: 11px; color: var(--text-light); line-height: 1.4; }
.netcmp-card__range strong { color: var(--text-muted); font-weight: 600; }
@media (max-width: 980px) { .netcmp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .netcmp-grid { grid-template-columns: 1fr; gap: 14px; } .netcmp-mock { padding: 16px; } }

/* Мок AI-ассистента (чат: вопрос на естественном языке → ответ с данными). */
.chatmock { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.chatmock__row { display: flex; gap: 10px; align-items: flex-start; }
.chatmock__row--user { justify-content: flex-end; }
.chatmock__ava { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font: 700 10px var(--font); }
.chatmock__bubble { max-width: 82%; padding: 10px 14px; border-radius: var(--radius); font: 400 13.5px/1.5 var(--font); color: var(--text); background: var(--hover); border: 1px solid var(--border); }
.chatmock__bubble--user { background: var(--accent); border-color: var(--accent); color: #fff; }
.chatmock__list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chatmock__list span { display: flex; justify-content: space-between; gap: 12px; }
.chatmock__list b { font-weight: 600; }
.chatmock__list i { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.chatmock__input { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-light); font: 400 13px var(--font); }
.chatmock__input span { flex: 1; }
.chatmock__send { color: var(--accent); flex-shrink: 0; display: flex; }
.chatmock__sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chatmock__sg { font: 500 12.5px var(--font); color: var(--text-muted); padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); }

/* Мок ClientFlow (Mini-CRM) — структура строки как в приложении (renderBlockTable):
   табы-категории + таблица; ячейка Клиент = аватар + имя(+VIP) + телефон; справа
   3 иконки-действия (сообщение / звонок / открыть карточку). */
.cfmock__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; text-align: left; }
.cfmock__cli { display: flex; align-items: center; gap: 10px; }
.cfmock__ava { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font: 600 11px var(--font); }
.cfmock__nm { font: 600 13px var(--font); color: var(--text); display: flex; align-items: center; gap: 6px; }
.cfmock__ph { font: 400 11.5px var(--font); color: var(--text-light); margin-top: 1px; }
.cfmock__acts { display: inline-flex; gap: 5px; }
.cfmock__act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); }
.report-frame__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-app); }
.report-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); display: block; }
.report-frame__bar span { margin-left: 10px; font: 500 12px var(--font); color: var(--text-light); }
.report-frame__body { aspect-ratio: 16 / 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; }
.report-frame__ic { width: 64px; height: 64px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.report-frame__body b { font: 600 17px var(--font); color: var(--text); }
.report-frame__body em { font-style: normal; font: 400 13.5px var(--font); color: var(--text-light); }

/* Roles */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.role { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.role__h { display: flex; align-items: center; gap: 11px; margin: 0 0 16px; }
.role__ic { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.role__h b { font: 600 16px var(--font); color: var(--text); }
.role ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.role li { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.5 var(--font); color: var(--text-muted); }
.role li .ck { color: var(--success); flex-shrink: 0; margin-top: 1px; }

/* Included-in-plans strip */
.inplans { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; max-width: 820px; margin: 0 auto; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; }
.inplans p { margin: 0; font: 500 14.5px var(--font); color: var(--text); }
.inplans p span { display: block; font: 400 13px var(--font); color: var(--text-light); margin-top: 4px; }

@media (max-width: 920px) {
  .fhero { grid-template-columns: 1fr; gap: 32px; }
  .report-embed { order: -1; }
  .roles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fhero { padding: 36px 20px 4px; }
  .fhero h1 { font-size: 34px; }
  .bigstat b { font-size: 48px; }
}

/* 404 */
.nf { max-width: 680px; margin: 0 auto; padding: 96px 24px 40px; text-align: center; }
.nf__code { font: 800 96px/1 var(--font); letter-spacing: -.04em; color: var(--accent); }
.nf h1 { font: 700 34px/1.1 var(--font); letter-spacing: -.02em; margin: 18px 0 0; }
.nf p { font: 400 17px/1.6 var(--font); color: var(--text-muted); margin: 16px auto 0; max-width: 480px; }
.nf__cta { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.nf__links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; margin: 48px auto 0; }
.nf__link { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); font: 600 14.5px var(--font); color: var(--text); text-decoration: none; transition: border-color var(--dur-fast,.12s) ease; }
.nf__link:hover { border-color: var(--accent-line); }
.nf__link .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nf__link .arr { margin-left: auto; color: var(--text-faint); display: flex; }
.nf__link:hover .arr { color: var(--accent); }
@media (max-width: 560px) {
  .nf { padding: 64px 20px 32px; }
  .nf__code { font-size: 72px; }
  .nf h1 { font-size: 28px; }
  .nf__cta { flex-direction: column; align-items: stretch; }
  .nf__links { grid-template-columns: 1fr; }
}

/* Author page header */
.authhero { max-width: 860px; margin: 0 auto; padding: 44px 24px 0; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.authhero__k { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.authhero h1 { font: 700 34px/1.1 var(--font); letter-spacing: -.02em; margin: 10px 0 4px; }
.authhero__role { font: 600 14.5px var(--font); color: var(--accent); margin: 0 0 16px; }
.authhero__bio { font: 400 16px/1.62 var(--font); color: var(--text-muted); margin: 0 0 20px; max-width: 560px; }
.authhero__meta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.authhero__stat b { font: 700 18px var(--font); color: var(--text); font-variant-numeric: tabular-nums; }
.authhero__stat span { font: 500 12.5px var(--font); color: var(--text-light); margin-left: 6px; }
.authhero__tg { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--font); color: var(--text-muted); text-decoration: none; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 999px; }
.authhero__tg:hover { border-color: var(--accent-line); color: var(--accent); }
@media (max-width: 560px) {
  .authhero { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .authhero h1 { font-size: 28px; }
}

@media (max-width: 920px) {
  .kbcats { grid-template-columns: 1fr; }
  .artgrid { grid-template-columns: 1fr; }
  .feat-art { grid-template-columns: 1fr; }
  .feat-art__cover { min-height: 200px; order: -1; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 17px var(--font); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex-shrink: 0; color: var(--text-light); transition: transform var(--dur-base, .18s) ease; }
.faq details[open] summary .pm { transform: rotate(45deg); color: var(--accent); }
.faq .ans { padding: 0 0 22px; font: 400 15px/1.65 var(--font); color: var(--text-muted); max-width: 660px; }

/* ===================================================================
   ARTICLE PAGE
   =================================================================== */
/* Reading progress bar */
.readbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 60; transition: width .08s linear; }

/* Header */
.art-head { max-width: 820px; margin: 0 auto; padding: 40px 24px 0; }
.art-head .k { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.art-head h1 { font: 700 44px/1.12 var(--font); letter-spacing: -.03em; margin: 14px 0 0; text-wrap: pretty; }
.art-meta { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; }
.art-meta .who { display: flex; align-items: center; gap: 11px; }
.art-meta .who b { font: 600 13.5px var(--font); color: var(--text); display: block; }
.art-meta .who div span { font: 500 12px var(--font); color: var(--text-light); display: block; margin-top: 1px; }
.art-meta .mdot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }
.art-meta .mi { font: 500 12.5px var(--font); color: var(--text-muted); }

/* Cover */
.art-cover { max-width: 1000px; margin: 28px auto 0; padding: 0 24px; }
.art-cover__inner { aspect-ratio: 21/9; border-radius: var(--radius-lg); background: #0f172a; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.art-cover__inner .glow { position: absolute; width: 460px; height: 460px; border-radius: 50%; background: rgba(234,88,12,.20); right: -120px; top: -160px; }
.art-cover__inner .glow2 { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(37,99,235,.16); left: -100px; bottom: -150px; }
.art-cover__badge { position: absolute; left: 28px; bottom: 26px; font: 600 12.5px var(--font); color: rgba(255,255,255,.72); display: flex; align-items: center; gap: 8px; }
.art-cover__mark { width: 92px; height: 92px; border-radius: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: #fff; position: relative; }

/* Layout: body + sticky TOC */
.art-wrap { max-width: 1060px; margin: 0 auto; padding: 48px 24px 0; display: grid; grid-template-columns: minmax(0,1fr) 248px; gap: 56px; align-items: start; }
.art-body { max-width: 720px; min-width: 0; }
.art-body .mock { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* TOC */
.toc { position: sticky; top: 84px; }
.toc__t { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); margin: 0 0 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--border); }
.toc a { display: block; font: 500 13px/1.4 var(--font); color: var(--text-muted); text-decoration: none; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; transition: color var(--dur-fast,.12s) ease, border-color var(--dur-fast,.12s) ease; }
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* Prose */
.art-body p { font: 400 16.5px/1.72 var(--font); color: #243044; margin: 0 0 22px; text-wrap: pretty; }
.art-lead { font: 400 20px/1.62 var(--font) !important; color: var(--text) !important; margin-bottom: 28px !important; }
.art-body h2 { font: 700 27px/1.22 var(--font); letter-spacing: -.02em; color: var(--text); margin: 48px 0 18px; scroll-margin-top: 80px; }
.art-body h3 { font: 600 19px/1.3 var(--font); letter-spacing: -.01em; color: var(--text); margin: 32px 0 12px; }
.art-body a.inl { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.art-body a.inl:hover { border-bottom-color: var(--accent); }
.art-body strong { font-weight: 700; color: var(--text); }
.art-body em { font-style: normal; font-weight: 600; color: var(--text); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-xs,6px); padding: 1px 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.art-body mark { background: #fff3c4; color: var(--text); padding: 1px 4px; border-radius: 4px; }

/* Lists */
.art-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.art-list li { display: flex; gap: 12px; align-items: flex-start; font: 400 16px/1.6 var(--font); color: #243044; }
.art-list li .ck { color: var(--success); flex-shrink: 0; margin-top: 3px; }
.art-ol { counter-reset: s; list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.art-ol li { counter-increment: s; position: relative; padding-left: 44px; min-height: 30px; font: 400 16px/1.6 var(--font); color: #243044; }
.art-ol li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); font: 700 13px/1 var(--font); display: flex; align-items: center; justify-content: center; }

/* Pull quote */
.pullquote { margin: 40px 0; padding: 0 0 0 26px; border-left: 3px solid var(--accent); }
.pullquote p { font: 600 25px/1.4 var(--font); letter-spacing: -.02em; color: var(--text); margin: 0; text-wrap: balance; }

/* Block quote with attribution */
.bquote { margin: 36px 0; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 30px; }
.bquote p { font: 500 18px/1.55 var(--font); color: var(--text); margin: 0 0 18px; }
.bquote__who { display: flex; align-items: center; gap: 13px; }
.bquote__who b { font: 600 13.5px var(--font); color: var(--text); display: block; }
.bquote__who span { font: 500 12px var(--font); color: var(--text-light); display: block; margin-top: 2px; }

/* Callouts */
.callout { display: grid; grid-template-columns: 22px 1fr; gap: 14px; margin: 30px 0; padding: 20px 22px; border-radius: var(--radius); border: 1px solid; }
.callout .cic { margin-top: 1px; }
.callout h4 { font: 600 13px var(--font); margin: 0 0 6px; letter-spacing: .01em; }
.callout p { font: 400 14.5px/1.6 var(--font) !important; margin: 0 !important; color: var(--text-muted) !important; }
.callout p + p { margin-top: 8px !important; }
.callout--tip  { background: var(--tip-soft); border-color: var(--tip-line); }
.callout--tip .cic, .callout--tip h4 { color: var(--tip); }
.callout--info { background: var(--info-soft); border-color: var(--info-line); }
.callout--info .cic, .callout--info h4 { color: var(--info); }
.callout--warn { background: var(--warning-soft); border-color: var(--warning-line); }
.callout--warn .cic, .callout--warn h4 { color: var(--warning); }
.callout--key  { background: var(--success-soft); border-color: var(--success-line); }
.callout--key .cic, .callout--key h4 { color: var(--success); }

/* Figure */
.figure { margin: 32px 0; }
.figure__img { aspect-ratio: 16/8; border-radius: var(--radius); background: var(--bg-app); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-faint); position: relative; overflow: hidden; }
.figure figcaption { font: 400 12.5px var(--font); color: var(--text-light); margin-top: 10px; text-align: center; }

/* Data table */
.art-table { margin: 30px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art-table table { width: 100%; border-collapse: collapse; }
.art-table th, .art-table td { padding: 13px 18px; text-align: right; font: 500 14px var(--font); color: var(--text); border-bottom: 1px solid var(--divider); font-variant-numeric: tabular-nums; }
.art-table th { background: var(--bg-app); font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); }
.art-table th:first-child, .art-table td:first-child { text-align: left; }
.art-table tbody tr:last-child td { border-bottom: 0; }
.art-table tbody tr.tot td { background: var(--accent-soft); color: var(--text); font-weight: 700; border-top: 1px solid var(--accent-line); }

/* Formula */
.formula { margin: 28px 0; background: #0f172a; border-radius: var(--radius); padding: 26px 28px; text-align: center; }
.formula .eq { font: 600 19px/1.5 var(--font); color: #fff; }
.formula .eq b { color: #fb923c; }
.formula .nt { font: 500 12.5px var(--font); color: #94a3b8; margin-top: 12px; }

/* KPI row */
.art-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0; }
.art-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.art-kpi b { font: 700 27px var(--font); letter-spacing: -.02em; color: var(--text); display: block; font-variant-numeric: tabular-nums; }
.art-kpi span { font: 500 12.5px var(--font); color: var(--text-muted); display: block; margin-top: 6px; }

/* Good / bad comparison */
.compare2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0; }
.cmp { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cmp__h { display: flex; align-items: center; gap: 8px; padding: 12px 18px; font: 600 12.5px var(--font); }
.cmp__b { padding: 16px 18px; font: 400 14.5px/1.55 var(--font); color: #243044; }
.cmp--bad .cmp__h { background: var(--danger-soft); color: var(--danger); border-bottom: 1px solid var(--danger-line); }
.cmp--good .cmp__h { background: var(--success-soft); color: var(--success); border-bottom: 1px solid var(--success-line); }

/* Chat example */
.chat { margin: 30px 0; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 78%; padding: 11px 15px; font: 400 14.5px/1.5 var(--font); border-radius: 14px; }
.bubble.in { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--text); }
.bubble.out { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }

/* Footnote refs + list */
.fnref { font-size: .68em; vertical-align: super; line-height: 0; }
.fnref a { color: var(--accent); text-decoration: none; font-weight: 700; padding: 0 1px; }
.footnotes { margin: 44px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.footnotes h4 { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); margin: 0 0 14px; }
.footnotes ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.footnotes li { font: 400 13px/1.55 var(--font); color: var(--text-muted); }
.footnotes li a { color: var(--accent); text-decoration: none; }

/* Author bio */
.author { max-width: 820px; margin: 56px auto 0; padding: 0 24px; }
.author__in { display: grid; grid-template-columns: auto 1fr; gap: 20px; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 30px; align-items: start; }
.author__name { font: 700 17px var(--font); color: var(--text); margin: 0; }
.author__role { font: 500 12.5px var(--font); color: var(--accent); margin: 3px 0 12px; }
.author__bio { font: 400 14.5px/1.6 var(--font); color: var(--text-muted); margin: 0; }

/* Share + rating */
.art-foot { max-width: 820px; margin: 40px auto 0; padding: 28px 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.art-share { display: flex; align-items: center; gap: 10px; }
.art-share .lbl { font: 600 12.5px var(--font); color: var(--text-muted); }
.shbtn { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: border-color var(--dur-fast,.12s) ease, color var(--dur-fast,.12s) ease; }
.shbtn:hover { border-color: var(--accent-line); color: var(--accent); }
.rate { display: flex; align-items: center; gap: 10px; }
.rate .lbl { font: 600 12.5px var(--font); color: var(--text-muted); }
.rate__btn { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--font); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-family: var(--font); transition: all var(--dur-fast,.12s) ease; }
.rate__btn:hover { border-color: var(--accent-line); color: var(--text); }
.rate__btn.on { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.rate__done { font: 600 13px var(--font); color: var(--success); display: inline-flex; align-items: center; gap: 7px; }

@media (max-width: 940px) {
  .art-wrap { display: block; padding-top: 40px; }
  .toc { display: none; }
  .art-body { max-width: 720px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .art-head h1 { font-size: 32px; }
  .art-body h2 { font-size: 24px; }
  .art-lead { font-size: 18px !important; }
  .art-body p { font-size: 16px; }
  .art-kpis { grid-template-columns: 1fr; }
  .compare2 { grid-template-columns: 1fr; }
  .pullquote p { font-size: 21px; }
  .author__in { grid-template-columns: 1fr; }
}

/* ===================================================================
   ARTICLE BLOCK GUIDE (editor reference)
   =================================================================== */
.guide { max-width: 920px; margin: 0 auto; padding: 40px 24px 0; }
.guide__grp { margin-top: 56px; }
.guide__grp:first-child { margin-top: 8px; }
.guide__gh { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--text); margin-bottom: 26px; }
.guide__gh h2 { font: 700 22px var(--font); letter-spacing: -.02em; margin: 0; }
.guide__gh span { font: 500 13px var(--font); color: var(--text-light); }
.spec { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; background: var(--bg-card); }
.spec__hd { display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; align-items: center; padding: 16px 20px; background: var(--bg-app); border-bottom: 1px solid var(--border); }
.spec__name { font: 700 15px var(--font); color: var(--text); display: flex; align-items: center; gap: 10px; }
.spec__num { width: 24px; height: 24px; border-radius: 7px; background: var(--text); color: #fff; font: 700 11px var(--font); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.spec__tag { font: 600 12px ui-monospace, "SF Mono", Menlo, monospace; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-xs,6px); padding: 5px 10px; white-space: nowrap; }
.spec__use { grid-column: 1 / -1; font: 400 13px/1.5 var(--font); color: var(--text-muted); margin: 0; }
.spec__use b { color: var(--text); font-weight: 600; }
.spec__demo { padding: 22px 24px; }
.spec__demo > *:first-child { margin-top: 0 !important; }
.spec__demo > *:last-child { margin-bottom: 0 !important; }
.spec__demo .art-body { max-width: none; }
@media (max-width: 560px) {
  .spec__hd { grid-template-columns: 1fr; }
}

/* ---------- Dark CTA ---------- */
.cta { max-width: var(--mw); margin: 0 auto; padding: 88px 24px 88px; }
/* Keep one consistent rhythm unit of space above the dark box: a plain section
   right before the CTA drops its own bottom padding so the gap never doubles,
   while soft bands keep their symmetric padding and the CTA's top owns the gap. */
.sec:has(+ .cta) { padding-bottom: 0; }
.ctabox { background: #0f172a; border-radius: var(--radius-lg); padding: 64px 48px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.ctabox .glow { position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: rgba(234,88,12,.16); }
.ctabox h2 { font: 700 36px/1.12 var(--font); letter-spacing: -.025em; margin: 0 0 14px; position: relative; }
.ctabox p { font: 400 17px var(--font); color: #94a3b8; margin: 0 0 28px; position: relative; }
.ctabox .cta-row { display: flex; gap: 12px; justify-content: center; position: relative; }
.ctabox .note { margin-top: 18px; font: 500 12.5px var(--font); color: #64748b; }
/* Secondary button on the dark CTA — single source of truth, no per-page inline styles */
.ctabox .ds-btn:not(.ds-btn--primary) { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.ctabox .ds-btn:not(.ds-btn--primary):hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); color: #fff; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--border); background: var(--bg-app); }
.foot__in { max-width: var(--mw); margin: 0 auto; padding: 56px 24px 28px; }
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot__brand p { font: 400 13.5px/1.6 var(--font); color: var(--text-muted); margin: 16px 0 0; max-width: 280px; }
.foot__col h4 { font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); margin: 0 0 16px; }
.foot__col a { display: block; font: 500 13.5px var(--font); color: var(--text-muted); text-decoration: none; margin-bottom: 11px; }
.foot__col a:hover { color: var(--text); }
.foot__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.foot__bottom p { font: 500 12px var(--font); color: var(--text-light); margin: 0; }

/* ---------- Stories highlights rail ---------- */
.stories { max-width: var(--mw); margin: 0 auto; padding: 44px 24px; }
.stories__lbl { text-align: center; font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); margin-bottom: 26px; }
.rail { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.shl { display: flex; flex-direction: column; align-items: center; gap: 11px; cursor: pointer; background: none; border: 0; padding: 0; font-family: var(--font); }
.hl__ring { display: inline-flex; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, #ea580c, #fb923c 55%, #fdba74); transition: transform var(--dur-fast, .12s) ease; }
.shl:hover .hl__ring { transform: scale(1.05); }
.shl.seen .hl__ring { background: var(--border-strong); }
.hl__gap { display: inline-flex; padding: 3px; background: var(--bg-card); border-radius: 50%; }
.hl__cover { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hl__cover--accent { background: var(--accent); color: #fff; }
.hl__cover--dark { background: #0f172a; color: #fff; }
.hl__cover--soft { background: var(--accent-soft); color: var(--accent); }
.hl__lbl { font: 600 13px var(--font); color: var(--text); }

/* ---------- Stories viewer ---------- */
.sv { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,.84); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; animation: svfade var(--dur-base,.18s) ease; }
@keyframes svfade { from { opacity: 0; } to { opacity: 1; } }
.sv__close { position: absolute; top: 24px; right: 28px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; }
.sv__close:hover { background: rgba(255,255,255,.24); }
.sv__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; }
.sv__nav:hover { background: rgba(255,255,255,.24); }
.sv__nav--prev { left: max(20px, calc(50% - 300px)); }
.sv__nav--next { right: max(20px, calc(50% - 300px)); }
.sv__card { position: relative; height: min(88vh, 760px); aspect-ratio: 9 / 16; max-width: 94vw; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); }
.sv__bars { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; gap: 5px; padding: 16px 16px 0; }
.sv__bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.34); overflow: hidden; }
.sv__bar i { display: block; height: 100%; background: #fff; width: 0; }
.sv__bar.full i { width: 100%; }
.sv__bar.active i { animation: svfill 5s linear forwards; }
@keyframes svfill { from { width: 0; } to { width: 100%; } }
.sv__hd { position: absolute; top: 32px; left: 20px; right: 20px; z-index: 6; display: flex; align-items: center; gap: 10px; color: #fff; pointer-events: none; }
.sv__hd .t { font: 600 13.5px var(--font); }
.sv__zone { position: absolute; top: 0; bottom: 0; z-index: 5; cursor: pointer; }
.sv__zone--prev { left: 0; width: 34%; }
.sv__zone--next { right: 0; width: 66%; }

/* ---------- Story slide ---------- */
.slide { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 76px 38px 46px; }
.slide--accent { background: var(--accent); color: #fff; }
.slide--dark { background: #0f172a; color: #fff; }
.slide--soft { background: var(--bg-app); color: var(--text); }
.slide__ic { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }
.slide--accent .slide__ic { background: rgba(255,255,255,.16); color: #fff; }
.slide--dark .slide__ic { background: var(--accent); color: #fff; }
.slide--soft .slide__ic { background: var(--accent-soft); color: var(--accent); }
.slide__k { font: 600 13px var(--font); text-transform: uppercase; letter-spacing: .12em; opacity: .82; margin-bottom: 16px; }
.slide__title { font: 700 38px/1.12 var(--font); letter-spacing: -.02em; margin: 0; }
.slide__txt { font: 400 18px/1.5 var(--font); margin: 18px 0 0; opacity: .92; }
.slide__metric { font: 700 64px/1 var(--font); letter-spacing: -.03em; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.slide__foot { margin-top: auto; }
.slide__who { display: flex; align-items: center; gap: 12px; }
.slide__who b { font: 600 14.5px var(--font); display: block; }
.slide__who span { font: 500 12.5px var(--font); opacity: .7; }
.slide__logos { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.slide__logos .lg { display: flex; align-items: center; gap: 12px; font: 600 19px var(--font); }
.slide__logos .lg .dot { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .sv__bar.active i { animation: none; width: 100%; }
  .sv { animation: none; }
}

/* ---------- Auth modal ---------- */
.ds-modal { max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.ds-modal__body { overflow-y: auto; min-height: 0; }
@media (max-width: 600px) { .ds-modal { max-height: 92vh; } }
.auth { display: flex; flex-direction: column; gap: 14px; }
.auth__close { position: sticky; top: 0; align-self: flex-end; margin: -6px -6px -14px 0; background: transparent; border: 0; cursor: pointer; color: var(--text-light); padding: 6px; border-radius: var(--radius-sm); display: flex; z-index: 3; }
.auth__close:hover { background: var(--hover); color: var(--text); }
.auth__head { text-align: center; }
.auth__head .lg { display: flex; justify-content: center; margin-bottom: 18px; }
.auth__head h3 { font: 700 23px var(--font); letter-spacing: -.02em; margin: 0 0 7px; }
.auth__head p { font: 400 14px/1.5 var(--font); color: var(--text-muted); margin: 0; }
.auth__fields { display: flex; flex-direction: column; gap: 11px; }
.auth__error { font: 500 13px/1.4 var(--font); color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: var(--radius-sm); padding: 8px 11px; margin: 0 0 4px; }
.auth__note { font: 500 13px/1.4 var(--font); color: var(--text-muted); background: var(--hover); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 11px; margin: 0 0 11px; }
/* Standalone auth-страницы (login/register/forgot-password/invite) — карточка как в модалке, но как страница. */
.auth-page { background: var(--bg-app); }
.auth-page__wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-page__card { width: 100%; max-width: 380px; max-height: none; }
.auth-page__logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.auth-page__logo-badge { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--accent); color: var(--bg-card); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font: 700 17px var(--font); letter-spacing: -.02em; }
.auth-page__logo-word { font: 700 17px var(--font); letter-spacing: -.02em; color: var(--text); }
.auth__submit { width: 100%; text-decoration: none; }
.auth__row--end { justify-content: flex-end; }
.auth-page .auth__head { margin-bottom: 14px; }
.auth__pw { display: block; height: 4px; margin-top: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.auth__pw-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s ease; }
/* Compact modal: labels removed (placeholders carry the meaning) so the submit button fits without scrolling. */
.auth .ds-field__label { display: none; }
.auth .ds-field { gap: 0; }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth__link { font: 600 13px var(--font); color: var(--accent); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font-family: var(--font); }
.auth__link:hover { color: var(--accent-hover); }
.auth__divider { display: flex; align-items: center; gap: 12px; color: var(--text-light); font: 500 12px var(--font); }
.auth__divider::before, .auth__divider::after { content: ''; height: 1px; background: var(--border); flex: 1; }
.auth__switch { text-align: center; font: 400 13.5px var(--font); color: var(--text-muted); }
.auth__consent { font: 400 12.5px/1.5 var(--font); color: var(--text-muted); }
.auth__consent a { color: var(--accent); text-decoration: none; }
/* Full-width кнопки модалки через класс (вместо инлайн width:100% из экспорта). */
.auth > .ds-btn { width: 100%; }
/* Вход через YCLIENTS — шаги внутри попапа: список салонов. */
.auth__salons { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; margin: 0; padding: 2px; }
.auth__salon { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer; font-family: var(--font); }
.auth__salon:hover { border-color: var(--accent); }
.auth__salon.is-on { border-color: var(--accent); background: var(--hover); }
.auth__salon.is-conn { opacity: .55; cursor: default; }
.auth__salon__chk { flex-shrink: 0; }
.auth__salon.is-on .auth__salon__chk { color: var(--accent); }
.auth__salon__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth__salon__name { font: 600 14px var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.auth__salon__meta { font: 400 12px var(--font); color: var(--text-muted); }

/* Stack the explorer early enough that the mock track never goes too narrow for a table. */
@media (max-width: 1040px) {
  .fx { grid-template-columns: 1fr; }
  .fx__panel { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .hero { grid-template-columns: 1fr; min-width: 0; }
  .hero > * { min-width: 0; }
  .hero .mock { overflow: hidden; }
  .hero h1 { font-size: 42px; }
  .phero h1 { font-size: 40px; }
  .fgrid, .steps, .tgrid, .price { grid-template-columns: 1fr; }
  .ind { grid-template-columns: 1fr 1fr; }
  .dd { grid-template-columns: 1fr; gap: 28px; }
  .dd.rev .dd__txt { order: 0; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .fx { grid-template-columns: 1fr; }
  .fx__panel { grid-template-columns: 1fr; }
  .cmp { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sec { padding: 56px 20px; }
  .sec--soft .inner { padding: 56px 20px; }
  .hero { padding: 40px 20px 36px; }
  .hero h1 { font-size: 34px; }
  .hero p.lede { font-size: 17px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__stats { gap: 22px 28px; flex-wrap: wrap; margin-top: 30px; }
  .phero { padding: 44px 20px 4px; }
  .phero h1 { font-size: 32px; }
  .hd h2 { font-size: 30px; }
  .ctabox { padding: 44px 24px; }
  .cta { padding-top: 60px; padding-bottom: 60px; }
  .ctabox h2 { font-size: 28px; }
  .ctabox .cta-row { flex-direction: column; align-items: stretch; }
  .phero .cta-row { flex-direction: column; align-items: stretch; }
  .foot__top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  /* Stories rail becomes a horizontal scroller on phones */
  .rail { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 16px; padding-bottom: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .shl { flex: 0 0 auto; scroll-snap-align: start; }
}
@media (max-width: 420px) {
  .ind { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rail { gap: 18px; }
  .hl__cover { width: 64px; height: 64px; }
  .slide__title { font-size: 32px; }
}