/* Открытые страницы pflux.io (CMS и /docs): цвета и шрифт - как в приложении FluxUI (variables.scss, fonts.scss) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/inter-v13-cyrillic-ext_latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/inter-v13-cyrillic-ext_latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/inter-v13-cyrillic-ext_latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/inter-v13-cyrillic-ext_latin-700.woff2') format('woff2'); }

:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --fg: #142033;
  --muted: #475872;
  --line: #dde3ec;
  --teal: #007A68;
  --blue: #1550C0;
  --soft: rgba(0, 122, 104, .08);
  --grad: linear-gradient(135deg, #007A68, #1550C0);
  --code: #eef2f7;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1520; --surface: #172131; --fg: #e6ecf5; --muted: #9aaac2; --line: #2a3850;
    --teal: #2fc2a8; --blue: #6f9bff; --soft: rgba(47, 194, 168, .12); --code: #1d2a3d;
    --grad: linear-gradient(135deg, #12907c, #2d64d8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.6; }
a { color: var(--teal); }
img, video { max-width: 100%; }
h1, h2, h3 { line-height: 1.25; text-wrap: balance; margin: 0; }
.fs-wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
/* документация: шире обычной страницы, текст на всю колонку */
.fs-wrap--wide { max-width: 1480px; }
/* шапка и подвал страницы документации - той же ширины, логотип над меню разделов */
body:has(.fs-wrap--wide) .fs-header .fs-wrap, body:has(.fs-wrap--wide) .fs-footer .fs-wrap { max-width: 1480px; }

/* шапка */
.fs-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.fs-header__in { display: flex; align-items: center; gap: 24px; padding-block: 12px; }
.fs-logo { display: inline-flex; flex: none; }
.fs-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; flex: 1; font-size: 15px; font-weight: 500; }
.fs-nav a { color: var(--fg); text-decoration: none; }
.fs-nav a:hover, .fs-nav a.is-active { color: var(--teal); }
.fs-header__login { flex: none; }

.fs-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 1px solid var(--teal); color: var(--teal); background: transparent; }
.fs-btn--fill { background: var(--grad); border-color: transparent; color: #fff; }
.fs-btn:focus-visible, .fs-nav a:focus-visible { outline: 3px solid var(--soft); outline-offset: 2px; }

.fs-main { min-height: 60vh; }
.fs-section { padding-block: 40px; }
.fs-crumbs { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.fs-crumbs a { color: var(--muted); }
.fs-label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); font-weight: 700; }

/* страница профиля */
.fs-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; }
.fs-hero__text { display: grid; gap: 16px; }
.fs-hero h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.5px; }
.fs-hero__lead p { margin: 0; color: var(--muted); font-size: 17px; }
.fs-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fs-video { border-radius: 14px; overflow: hidden; background: var(--grad); box-shadow: 0 24px 50px -30px rgba(20, 32, 51, .55); }
.fs-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.fs-features h2 { font-size: 24px; margin-bottom: 16px; }
.fs-features ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.fs-features li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; color: var(--muted); }
.fs-features li b { display: block; color: var(--fg); margin-bottom: 4px; }
.fs-more { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 15px; }
.fs-more span { color: var(--muted); }

/* документация */
/* размер текста документации - множитель --doc-zoom, кнопки «А» (flux-docs.js) ставят data-doc-font на html */
.fs-docs { --doc-zoom: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 40px; align-items: start; }
:root[data-doc-font="s"] .fs-docs { --doc-zoom: .9; }
:root[data-doc-font="l"] .fs-docs { --doc-zoom: 1.15; }
.fs-docs__side { position: sticky; top: 76px; font-size: calc(14px * var(--doc-zoom)); }
.fs-docs__links { display: grid; gap: 4px; }
.fs-docs__menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-weight: 600;
  color: var(--fg); }
.fs-docs__menu > summary::-webkit-details-marker { display: none; }
.fs-docs__menu > summary::after { content: '▾'; color: var(--muted); }
.fs-docs__menu[open] > summary::after { content: '▴'; }
.fs-docs__menu[open] > summary { margin-bottom: 8px; }
@media (min-width: 1001px) {
  .fs-docs__menu > summary { display: none; }
}
.fs-docs__side .g { font-weight: 700; margin-top: 12px; color: var(--fg); }
.fs-docs__side a { color: var(--muted); text-decoration: none; }
.fs-docs__side a:hover, .fs-docs__side a.is-current { color: var(--teal); }
.fs-docs__side a.is-current { font-weight: 600; }
.fs-docs__toc { position: sticky; top: 76px; display: grid; gap: 6px; font-size: calc(13px * var(--doc-zoom)); border-left: 1px solid var(--line); padding-left: 14px; }
.fs-docs__toc b { color: var(--fg); }
.fs-docs__toc a { color: var(--muted); text-decoration: none; }
.fs-docs h1 { font-size: calc(clamp(26px, 3.4vw, 34px) * var(--doc-zoom)); margin-bottom: 18px; }
.fs-docs__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.fs-docs__bar .fs-crumbs { margin-bottom: 0; }
.fs-docs .fs-groups a strong { font-size: calc(16px * var(--doc-zoom)); }
.fs-docs .fs-groups a small { font-size: calc(13px * var(--doc-zoom)); }
.fs-font { display: inline-flex; align-items: baseline; gap: 2px; }
.fs-font__btn { min-width: 30px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--muted); font-family: inherit; line-height: 1.2; cursor: pointer; }
.fs-font__btn.is-s { font-size: 12px; }
.fs-font__btn.is-m { font-size: 15px; }
.fs-font__btn.is-l { font-size: 19px; }
.fs-font__btn:hover { border-color: var(--teal); color: var(--teal); }
.fs-font__btn.is-active { border-color: var(--teal); color: var(--teal); font-weight: 600; }
.fs-font__btn:focus-visible { outline: 3px solid var(--soft); outline-offset: 2px; }
.fs-doc-profile { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

.fs-md { font-size: calc(16px * var(--doc-zoom, 1)); }
.fs-md p, .fs-md ul, .fs-md ol { margin: 0 0 14px; }
.fs-md h2 { font-size: calc(22px * var(--doc-zoom, 1)); margin: 32px 0 12px; scroll-margin-top: 80px; }
.fs-md h3 { font-size: calc(18px * var(--doc-zoom, 1)); margin: 24px 0 10px; scroll-margin-top: 80px; }
.fs-md li { margin-bottom: 4px; }
.fs-md code { background: var(--code); padding: 1px 5px; border-radius: 4px; font-size: .92em; overflow-wrap: anywhere; }
.fs-md pre { background: var(--code); padding: 14px; border-radius: 8px; overflow-x: auto; }
.fs-md blockquote { margin: 0 0 14px; padding: 6px 16px; border-left: 3px solid var(--teal); color: var(--muted); }
.ds-md-table { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ds-md-table table { border-collapse: collapse; width: 100%; font-size: calc(14px * var(--doc-zoom, 1)); }
.ds-md-table th, .ds-md-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ds-md-table th { font-size: calc(13px * var(--doc-zoom, 1)); color: var(--muted); }
.fs-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.fs-pager a { display: grid; text-decoration: none; }
.fs-pager a span { font-size: 13px; color: var(--muted); }
.fs-pager .next { text-align: right; margin-left: auto; }

.fs-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.fs-group { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: grid; gap: 10px; align-content: start; }
.fs-group h3 { font-size: 17px; }
.fs-group a { display: grid; text-decoration: none; }
.fs-group a strong { color: var(--fg); font-weight: 600; }
.fs-group a small { color: var(--muted); font-size: 13px; }
.fs-profiles { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-chip { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--fg); font-size: 14px; }
.fs-chip:hover { border-color: var(--teal); color: var(--teal); }

/* главная /: заголовок, вкладки профилей, карточки (блоки CMS cases-<профиль>) и ролик профиля */
.fs-home__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; align-items: start; }
.fs-home__head { display: grid; gap: 16px; max-width: 640px; padding-top: 12px; }
/* форма входа главной (flux-login.js) - как карточка входа приложения */
.fs-login { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 12px;
  box-shadow: 0 18px 44px -28px rgba(20, 32, 51, .45); }
.fs-login [hidden] { display: none !important; }
.fs-login__title { font-size: 24px; text-align: center; }
.fs-login__email, .fs-login__email > div { display: grid; gap: 10px; }
.fs-login__hint { margin: 0; color: var(--muted); font-size: 14px; }
.fs-login__label { font-size: 14px; font-weight: 600; }
.fs-login__input { font: inherit; font-size: 16px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg); width: 100%; }
.fs-login__input:focus { outline: 3px solid var(--soft); border-color: var(--teal); }
.fs-login__code { letter-spacing: 8px; font-size: 20px; font-weight: 600; text-align: center; }
.fs-login__error { margin: 0; color: #d64545; font-size: 14px; }
.fs-login__submit { justify-content: center; width: 100%; cursor: pointer; font-family: inherit; }
.fs-login__submit:disabled { opacity: .55; cursor: default; }
.fs-login__again { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fs-login__link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--teal); text-decoration: underline; }
.fs-login__link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.fs-login__divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin-top: 4px; }
.fs-login__divider::before, .fs-login__divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.fs-login__social { display: grid; gap: 10px; }
.fs-login__social-row { display: grid; gap: 10px; }
.fs-login__social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-weight: 600;
  cursor: pointer; }
.fs-login__social-btn:hover { border-color: var(--teal); }
.fs-login__social-btn:disabled { opacity: .6; cursor: default; }
.fs-login__social-icon svg { width: 20px; height: 20px; display: block; }
.fs-login__gis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fs-login__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 4px 0 0; font-size: 14px; }
.fs-login__already, .fs-login__loading, .fs-login__unavailable { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.fs-home__head h1 { font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -.8px; }
.fs-home__cases h2 { font-size: clamp(22px, 3vw, 28px); }
.fs-home__sub { color: var(--muted); margin: 6px 0 18px; }
.fs-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.fs-tab { font: inherit; font-size: 15px; padding: 7px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
  color: var(--fg); cursor: pointer; }
.fs-tab:hover { border-color: var(--teal); color: var(--teal); }
.fs-tab.is-active { background: var(--grad); border-color: transparent; color: #fff; font-weight: 600; }
.fs-tab:focus-visible { outline: 3px solid var(--soft); outline-offset: 2px; }
.fs-case { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 24px; }
.fs-js .fs-tabs { display: flex; }
html:not(.fs-js) .fs-tabs { display: none; }
.fs-js .fs-case { display: none; }
.fs-js .fs-case.is-active { display: grid; }
.fs-cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.fs-cases li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; color: var(--muted);
  font-size: 14px; line-height: 1.5; }
.fs-cases li b { display: block; color: var(--fg); font-size: 15px; margin-bottom: 4px; }
.fs-cases li.is-soon { opacity: .7; }
.fs-soon { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 99px; background: var(--soft); color: var(--teal);
  font-size: 12px; font-weight: 600; vertical-align: 2px; }
.fs-case__side { display: grid; gap: 14px; }
.fs-case__links { display: grid; gap: 6px; font-size: 15px; }
.fs-home__hint { color: var(--muted); font-size: 15px; }
@media (max-width: 860px) {
  .fs-case { grid-template-columns: minmax(0, 1fr); }
  .fs-home__hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* тарифы /tarify: карточки из блока CMS plans, под ними цена действий, пакеты и условия */
.fs-pricing__head { display: grid; gap: 12px; margin-bottom: 28px; max-width: 760px; }
.fs-pricing__head h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.5px; }
.fs-promo { display: grid; gap: 4px; margin: 0 0 24px; padding: 16px 20px; border-radius: 14px; background: var(--soft);
  border: 1px solid var(--teal); }
.fs-promo b { font-size: 18px; color: var(--fg); }
.fs-promo p { margin: 0; color: var(--fg); }
.fs-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }
.fs-plan { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 20px; }
.fs-plan h3 { font-size: 19px; }
.fs-plan p { margin: 0; }
.fs-plan__price b { font-size: 30px; letter-spacing: -.5px; }
.fs-plan__price span { color: var(--muted); font-size: 14px; }
.fs-plan__credits { font-weight: 600; }
.fs-plan__limit { color: var(--teal); font-weight: 600; font-size: 15px; }
.fs-plan__who { color: var(--muted); font-size: 15px; flex: 1; }
.fs-plan .fs-btn { justify-content: center; margin-top: 6px; }
.fs-plan--accent { border: 2px solid var(--teal); box-shadow: 0 8px 28px var(--soft); }
.fs-plan__badge { position: absolute; top: -12px; left: 20px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px; letter-spacing: .04em; text-transform: uppercase; }
.fs-pricing__more { display: grid; gap: 28px; padding-top: 8px; }
.fs-pricing__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px 40px; align-items: start; }
.fs-pricing__more h2 { font-size: 22px; margin-bottom: 12px; }
.fs-pricing__more .fs-md td:last-child, .fs-pricing__more .fs-md th:last-child { text-align: right; white-space: nowrap; }
.fs-legal { display: grid; gap: 10px; padding-left: 20px; margin-top: 16px; }

/* подвал */
.fs-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 48px; }
.fs-footer__in { padding-block: 24px; display: grid; gap: 10px; }
.fs-footer__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.fs-footer__note { margin: 0; font-size: 13px; color: var(--muted); }

@media (max-width: 1240px) {
  .fs-docs { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  .fs-docs__toc { display: none; }
}
@media (max-width: 1000px) {
  .fs-docs { grid-template-columns: minmax(0, 1fr); }
  .fs-docs__side, .fs-docs__toc { position: static; }
  .fs-docs__toc { display: none; }
}
@media (max-width: 760px) {
  .fs-hero { grid-template-columns: minmax(0, 1fr); }
  /* телефон: шапка не держит экран, меню - одна строка с прокруткой вбок и затенением у края */
  .fs-header { position: static; }
  .fs-header__in { flex-wrap: wrap; gap: 4px 16px; padding-block: 10px 2px; }
  .fs-nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 0 20px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 24px; }
  .fs-nav::-webkit-scrollbar { display: none; }
  .fs-nav a { white-space: nowrap; }
  .fs-section { padding-block: 28px; }
}
/* сенсорный экран (телефон, планшет) или узкое окно: касание пальцем - не меньше ~40 px */
@media (max-width: 760px), (pointer: coarse) {
  .fs-nav a { padding-block: 11px; }
  .fs-logo { padding-block: 6px; }
  .fs-footer__nav { gap: 0 20px; }
  .fs-footer__nav a, .fs-case__links a, .fs-more a, .fs-login__links a, .fs-crumbs a { display: inline-block; padding-block: 9px; }
  .fs-docs__links { gap: 0; }
  .fs-docs__links a { padding-block: 9px; }
  .fs-docs__links .g { margin-top: 10px; }
  .fs-docs__toc a { padding-block: 6px; }
  .fs-font__btn { min-width: 40px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }