/* ЛЕНДИНГ СЕРВИСА. Перенос из проекта Claude Design «SiteCreator Cabinet Design
   System», группа «Лендинг», срез 14 августа 2026.
   Источники (перенесено значение в значение, ничего не переписано заново):
     design/v4/landing/landing.css   - шапка, поле, бегущее кольцо, витрина,
                                       тёмная плоскость, точки, подвал, выбор языка,
                                       блок экономии (.sc-l-*, часть .sc-lv-*);
     design/v4/landing/landings.css  - собранная страница (.sc-ln-*, .sc-mini-*).
   Состав определён разметкой собранной страницы design/v4/landing/page.html,
   версия v=5. Правила карт сравнения (.sc-lv, .sc-lv-title, .sc-lv-kicker и родня)
   и вариант блока экономии «полоса с таблетками» (.sc-lv-pill*, .sc-lv-sums*)
   не переносились: они принадлежат версиям 1-4.

   ФАЙЛ НЕ ОБЪЯВЛЯЕТ НИ ОДНОЙ ПЕРЕМЕННОЙ --sc-. Значения приходят из tokens/*.css;
   нужно новое - оно идёт туда, а не сюда (ловит tests/landing-test.php).
   Локальные переменные раскладки макета переименованы без изменения значений:
   --sc-l-angle -> --l-angle, --sc-l-slide -> --l-slide, --sc-l-shift -> --l-shift,
   --sc-ln-photo -> --l-photo. Переменные --sc-ln-shift и --sc-ln-roff здесь только
   читаются: их пишет скрипт, объявления в CSS нет.

   Только логические свойства: страница собирается и справа налево. */

/* Раскладка считается от ширины КАДРА, а не окна: кит смотрят кадрами по 1440
   на общем холсте, и медиазапрос там мерил бы окно браузера. Поэтому каждая
   секция объявлена собственным контейнером, а все брейкпоинты - контейнерные. */
.sc-l,.sc-ln,.sc-lv,.sc-lv-sec,.sc-l-section,.sc-ln-sec,.sc-ln-hero,.sc-ln-band{container-type:inline-size}
.sc-l{background:var(--sc-bg-page)}

/* КОЛЬЦО ФОКУСА - ТОЛЬКО С КЛАВИАТУРЫ (владелец 04.10.2026). Файл идёт всем страницам
   платформы (лендинг, цены, продукт, ремёсла, справка, документы, блог) и только им, поэтому
   правило общее, без списка имён: после щелчка мышью по вопросу, кнопке, ссылке или пункту
   меню синей рамки нет, а с Tab кольцо `:focus-visible` остаётся - его требует закон о
   доступности, и его не трогает ничто здесь. */
:focus:not(:focus-visible){outline:none}
.sc-l-container{max-inline-size:var(--sc-container-max);margin-inline:auto;padding-inline:var(--sc-container-pad)}
.sc-l-section{padding-block:clamp(72px,8vw,128px)}
.sc-l-head{display:flex;flex-direction:column;align-items:center;gap:var(--sc-space-16);text-align:center;
  margin-block-end:var(--sc-space-48)}
.sc-l-head .sc-lead{max-inline-size:52ch}

/* --- шапка. Заглушка: название, две ссылки, выбор языка --- */
.sc-l-header{position:sticky;inset-block-start:0;z-index:var(--sc-z-sticky);background:var(--sc-surface);
  border-block-end:var(--sc-rule-w-hair) solid var(--sc-hairline);box-shadow:var(--sc-shadow-sticky)}
/* Шапка на 8px выше кабинетной: «Войти» здесь полного размера, потому что 36px
   кнопка не дотягивает до цели нажатия 44px, а поля вокруг неё в шапке нет. */
.sc-l-header__row{display:flex;align-items:center;gap:var(--sc-space-24);min-block-size:72px}
.sc-l-brand{font-size:var(--sc-text-lead);font-weight:var(--sc-fw-medium);letter-spacing:-.01em;display:inline-flex;align-items:center;flex:none}
/* Логотип - высота по решению владельца: 36 в шапке, 32 на телефоне и в меню телефона. */
.sc-brand-logo{display:block;block-size:36px;inline-size:auto}
.sc-ln-mob__bar .sc-brand-logo{block-size:32px}
@media (max-width:640px){.sc-l-brand .sc-brand-logo{block-size:32px}}
.sc-l-header__nav{display:flex;align-items:center;gap:var(--sc-space-24)}
.sc-l-header__nav a{display:inline-flex;align-items:center;min-block-size:var(--sc-tap-min);font-size:var(--sc-text-body-sm)}
.sc-l-header__end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--sc-space-12)}
.sc-l-lang{position:relative;display:inline-flex;align-items:center}
.sc-l-lang .sc-select{inline-size:auto;min-block-size:var(--sc-tap-min);padding-block:var(--sc-space-8);
  padding-inline:var(--sc-space-48) var(--sc-space-32);border-color:var(--sc-hairline)}
.sc-l-lang .sc-select:hover{border-color:var(--sc-border-strong)}
.sc-l-lang__glyph{position:absolute;inset-inline-start:var(--sc-space-16);color:var(--sc-ink-600);pointer-events:none}
.sc-l-lang .sc-select-wrap__chevron{inset-inline-end:var(--sc-space-12)}
.sc-l-strip{background:var(--sc-surface-sunken);border-block-end:var(--sc-rule-w-hair) solid var(--sc-hairline)}
.sc-l-strip p{margin:0;padding-block:var(--sc-space-8);font-size:var(--sc-text-body-sm);color:var(--sc-text-muted)}

/* --- первый экран. Фото во всю ширину, поверх - небольшой блок со своей подложкой.
   Высоты у экрана нет: заголовок в две строки растит блок, фон тянется за ним. --- */
.sc-l-hero{position:relative;padding-block:clamp(64px,9vw,128px)}
.sc-l-hero__photo{position:absolute;inset:0;z-index:0;inline-size:100%;block-size:100%;object-fit:cover}
.sc-l-hero > .sc-l-container{position:relative;z-index:1}
/* Текст не лежит на снимке: у блока своя плоскость. 90% белого держит контраст
   приглушённого текста даже над чёрным кадром (4.7:1), размытие - только отделка. */
.sc-l-hero__card{max-inline-size:680px;margin-inline:auto;padding:clamp(24px,3vw,40px);
  border-radius:var(--sc-radius);background:rgba(255,255,255,.90);backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:var(--sc-shadow-overlay);text-align:center;display:flex;flex-direction:column;gap:var(--sc-space-24)}
@supports not (backdrop-filter:blur(2px)){.sc-l-hero__card{background:rgba(255,255,255,.97)}}
.sc-l-hero__sub{color:var(--sc-text-muted);margin:0}
.sc-l-hero__note{font-size:var(--sc-text-body-sm);color:var(--sc-text-muted);margin:0}

/* --- бегущее кольцо. Единственное место продукта, где цвет движется. Оно не
   индикатор фокуса: фокус - чернильное кольцо снаружи, по правилам системы.
   Останавливается навсегда, как только человек начал печатать. --- */
@property --l-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
/* Кольцо 1.5px, а не 3 (владелец 06.10.2026: «not so bold stroke»); цвет и ход те же. */
.sc-l-ring{position:relative;padding:1.5px;border-radius:calc(var(--sc-radius) + 1.5px);text-align:start;
  background:conic-gradient(from var(--l-angle,0deg),var(--sc-ring-1),var(--sc-ring-2),var(--sc-ring-1));
  animation:sc-l-ring-spin 7s linear infinite}
.sc-l-ring[data-running="false"]{animation-play-state:paused}
.sc-l-ring:has(.sc-l-input:focus-visible){outline:var(--sc-focus-ring-w) solid var(--sc-focus-ring);
  outline-offset:var(--sc-focus-ring-offset)}
@keyframes sc-l-ring-spin{to{--l-angle:360deg}}
/* «Меньше анимаций»: кольцо остаётся, но стоит статичным градиентом. */
@media (prefers-reduced-motion:reduce){.sc-l-ring{animation:none}}
.sc-l-field{position:relative;display:flex;align-items:flex-end;gap:var(--sc-space-12);padding:var(--sc-space-12);
  background:var(--sc-surface);border-radius:var(--sc-radius)}
.sc-l-field .sc-btn{flex:0 0 auto;inline-size:max-content;max-inline-size:100%}
.sc-l-input{flex:1;min-inline-size:0;border:0;background:transparent;outline:none;resize:none;
  padding:var(--sc-space-12);font-size:var(--sc-text-body);line-height:var(--sc-lh-body);min-block-size:56px}

/* --- витрина. Одна страница крупно, соседние подглядывают краем. --- */
/* Активный кадр занимает почти всю ширину: соседи видны краем и меньше по
   размеру - видно, что лента листается, но спорить с активным им нечем. */
.sc-l-gallery{--l-slide:min(1240px,88cqi)}
.sc-l-viewport{overflow:hidden;padding-block:var(--sc-space-16);margin-block:calc(var(--sc-space-16) * -1)}
.sc-l-track{display:flex;gap:var(--sc-space-24);padding-inline:max(0px,calc((100% - var(--l-slide)) / 2));
  touch-action:pan-y;cursor:grab;translate:calc(var(--sc-dir) * var(--l-shift,0px)) 0;
  transition:translate var(--sc-dur-slow) var(--sc-ease)}
.sc-l-track[data-dragging="true"]{transition:none;cursor:grabbing}
.sc-l-slide{flex:0 0 var(--l-slide)}
.sc-l-card{background:var(--sc-surface);border:var(--sc-rule-w-hair) solid var(--sc-hairline);
  border-radius:var(--sc-radius);overflow:hidden;box-shadow:var(--sc-shadow-sticky);
  transition:translate var(--sc-dur-base) var(--sc-ease),box-shadow var(--sc-dur-base) var(--sc-ease)}
.sc-l-slide:hover .sc-l-card{translate:0 -4px;box-shadow:var(--sc-shadow-overlay)}
.sc-l-slide[aria-hidden="true"] .sc-l-card,.sc-l-slide[aria-hidden="true"] .sc-ln-frame{scale:.9;opacity:.8}
.sc-l-slide .sc-l-card,.sc-l-slide .sc-ln-frame{transition:scale var(--sc-dur-slow) var(--sc-ease),opacity var(--sc-dur-slow) var(--sc-ease)}
.sc-l-shot{display:block;inline-size:100%;aspect-ratio:4 / 3;object-fit:cover;background:var(--sc-surface-sunken)}
.sc-l-cap{display:flex;align-items:center;justify-content:space-between;gap:var(--sc-space-16);
  padding:var(--sc-space-16) var(--sc-space-24);border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline)}
.sc-l-cap b{font-weight:var(--sc-fw-medium)}
.sc-l-controls{display:flex;align-items:center;justify-content:center;gap:var(--sc-space-16);margin-block-start:var(--sc-space-32)}
.sc-l-dots{display:flex;align-items:center;gap:var(--sc-space-4)}
.sc-l-dot{display:grid;place-items:center;inline-size:var(--sc-tap-min);block-size:var(--sc-tap-min);
  padding:0;border:0;background:transparent;border-radius:var(--sc-radius-pill);cursor:pointer}
.sc-l-dot > span{display:block;inline-size:8px;block-size:8px;border-radius:var(--sc-radius-pill);
  background:var(--sc-ink-300);transition:inline-size var(--sc-dur-base) var(--sc-ease),background var(--sc-dur-base) var(--sc-ease)}
/* Текущая точка отличается не только цветом: она вытянута в таблетку. */
.sc-l-dot[aria-current="true"] > span{inline-size:28px;background:var(--sc-text)}
.sc-l-honest{margin-block-start:var(--sc-space-32);text-align:center;font-size:var(--sc-text-body-sm);color:var(--sc-text-muted)}

/* --- калькулятор. ВТОРОЕ ИСКЛЮЧЕНИЕ: тёмная плоскость вне экрана сборки.
   Пара берётся целиком: заливка --sc-dark-bg, текст --sc-dark-on, приглушённый
   --sc-dark-muted, линия --sc-dark-line. Кольцо фокуса на тёмном - светлое. --- */
.sc-l-dark{background:var(--sc-dark-bg);color:var(--sc-dark-on)}
.sc-l-dark .sc-lead{color:var(--sc-dark-muted)}
.sc-l-dark :focus-visible{outline-color:var(--sc-dark-on)}
.sc-l-calc{display:grid;grid-template-columns:1fr;gap:var(--sc-space-32);align-items:start}
@container (min-width:900px){.sc-l-calc{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:var(--sc-space-48)}}
.sc-l-tiles{display:flex;flex-wrap:wrap;gap:var(--sc-space-12)}
/* Подпись плитки в одну строку: цена, уехавшая на вторую строку, вываливается из
   таблетки. Длинная строка растит плитку по инлайновой оси, а не обрезается. */
.sc-l-tiles .sc-chip{white-space:nowrap;padding-block:var(--sc-space-8);
  transition:background var(--sc-dur-fast) var(--sc-ease),color var(--sc-dur-fast) var(--sc-ease)}
.sc-l-tiles .sc-chip:active{background:var(--sc-quiet-active)}
.sc-l-tiles .sc-chip[aria-pressed="true"]:active{background:var(--sc-acc-100)}
.sc-l-tiles__note{margin-block-start:var(--sc-space-24);color:var(--sc-dark-muted);font-size:var(--sc-text-caption)}
.sc-l-sum{background:var(--sc-surface);color:var(--sc-text);border-radius:var(--sc-radius);
  padding:var(--sc-space-32);box-shadow:var(--sc-shadow-overlay);display:flex;flex-direction:column;gap:var(--sc-space-16)}
.sc-l-sum__list{display:flex;flex-direction:column;gap:var(--sc-space-8);margin:0;padding:0;list-style:none;
  max-block-size:280px;overflow:auto}
.sc-l-sum__list li{display:flex;justify-content:space-between;gap:var(--sc-space-16);font-size:var(--sc-text-body-sm)}
.sc-l-sum__rule{border:0;border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline);margin:0}
/* Строка суммы: подпись сверху, число снизу. В строку они не встают - русская
   подпись и число в 24px делят одну строку только по-английски. */
.sc-l-sum__row{display:flex;flex-direction:column;gap:var(--sc-space-2)}
.sc-l-sum__row > span{font-size:var(--sc-text-body-sm);color:var(--sc-text-muted)}
.sc-l-sum__row b{font-size:var(--sc-text-h3);font-weight:var(--sc-fw-medium);line-height:var(--sc-lh-h3)}
.sc-l-diff{background:var(--sc-surface-sunken);border-radius:var(--sc-radius);padding:var(--sc-space-24);
  display:flex;flex-direction:column;gap:var(--sc-space-4)}
.sc-l-diff strong{font-size:var(--sc-text-h3);font-weight:var(--sc-fw-medium)}
/* Число меняется сразу, без бега цифр: плавно доезжает сама плашка, 200мс. */
.sc-l-amount{animation:sc-l-settle var(--sc-dur-base) var(--sc-ease)}
@keyframes sc-l-settle{from{opacity:.4}to{opacity:1}}

/* --- подвал. Заглушка --- */
.sc-l-footer{background:var(--sc-surface-sunken);border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline);
  padding-block:var(--sc-space-48)}
.sc-l-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sc-space-32)}
.sc-l-footer h3{font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);margin:0 0 var(--sc-space-12)}
.sc-l-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sc-l-footer a{display:inline-flex;align-items:center;min-block-size:var(--sc-tap-min);font-size:var(--sc-text-body-sm)}
.sc-l-footer__end{margin-block-start:var(--sc-space-32);padding-block-start:var(--sc-space-24);
  border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline);font-size:var(--sc-text-body-sm);color:var(--sc-text-muted)}

/* Поля по бокам на телефоне задаются ОДИН раз, на корне лендинга, и дальше наследуются:
   контейнеров на странице десяток (`.sc-ln-wrap`, `.sc-ln-band--inset`, `.sc-lv-sec__head`,
   `.sc-lv-calc`, ...), и перечислять их по именам значило бы завести список, который надо
   помнить пополнять - следующая секция молча осталась бы с полями в 32px. Запрос к ОКНУ, а не
   к контейнеру: корень лендинга сам является контейнером и собственным `@container` не
   стилизуется. */
@media (max-width:820px){
  .sc-landing,.sc-pp-page{--sc-container-pad:var(--sc-ln-pad-mobile)}
}

@container (max-width:820px){
  .sc-l-cap{flex-direction:column;align-items:flex-start;gap:var(--sc-space-4);padding:var(--sc-space-16)}
  .sc-l-container{padding-inline:var(--sc-ln-pad-mobile)}
  .sc-l-header__nav{display:none}
  .sc-l-gallery{--l-slide:86cqi}
  .sc-l-field{flex-direction:column;align-items:stretch}
  .sc-l-field .sc-btn{inline-size:100%}
  /* В строке поля кнопка делит ширину с кубиком: 100% выталкивало её за рамку на 641-820,
     а кубик сжимался. Здесь она занимает ОСТАТОК строки. */
  .sc-ln-fieldrow .sc-btn{flex:1;min-inline-size:0;inline-size:auto;max-inline-size:none}
  .sc-l-sum{padding:var(--sc-space-24)}
}

/* 390. Шапка переносит вторую строку, а не сжимает выбор языка до нечитаемого. */
@container (max-width:560px){
  .sc-l-header__row{flex-wrap:wrap;padding-block:var(--sc-space-8);gap:var(--sc-space-8)}
  .sc-l-header__end{flex-wrap:wrap;gap:var(--sc-space-8)}
}
/* Вход на телефоне слева от бургера - в одну строку и в одну линию с ним. */
.sc-ln-head-in{white-space:nowrap}

/* ============================================================================
   БЛОК ЭКОНОМИИ. Собранная страница берёт оформление «строки с тумблерами, итог
   столбиком рядом» (.sc-lv-rows / .sc-lv-side). Дисплейная антиква приходит из
   --sc-font-display, и это единственное место системы, где вторая гарнитура
   разрешена.
   ========================================================================= */
.sc-lv-block{flex-direction:column;align-items:stretch;padding:var(--sc-space-16)}
.sc-lv-accent{color:var(--sc-acc-600)}
.sc-lv-sec{padding-block:clamp(44px,5vw,72px)}
.sc-lv-sec__head{max-inline-size:1200px;margin-inline:auto;padding-inline:var(--sc-container-pad);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sc-space-12);
  margin-block-end:44px}
/* Надзаголовок обычным регистром: ВЕРХНЕГО в системе нет нигде - в иврите
   прописных не существует, и разрядка разъезжается на переводе. */
.sc-lv-eyebrow{font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);color:var(--sc-acc-700)}
.sc-lv-eyebrow--dark{color:var(--sc-acc-300)}
.sc-lv-h2{font-family:var(--sc-font-display);font-weight:var(--sc-fw-display,400);font-size:clamp(28px,3.2vw,44px);
  line-height:1.12;letter-spacing:-.01em;margin:0;max-inline-size:20ch}
.sc-lv-lead{color:var(--sc-text-muted);font-size:var(--sc-text-lead);margin:0;max-inline-size:52ch}
.sc-l-dark .sc-lv-lead{color:var(--sc-dark-muted)}
.sc-lv-calc{max-inline-size:1200px;margin-inline:auto;padding-inline:var(--sc-container-pad);
  display:grid;grid-template-columns:1fr;gap:var(--sc-space-24);align-items:start}
@container (min-width:900px){.sc-lv-calc{grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr)}
  .sc-lv-calc--rows{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)}}
/* Итог стоит столбиком рядом со списком, а не полосой под ним: пока человек
   отмечает строки, сумма всё время в поле зрения. */
.sc-lv-side{display:flex;flex-direction:column;gap:var(--sc-space-16);
  position:sticky;inset-block-start:var(--sc-space-24)}
.sc-lv-panel{border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:var(--sc-radius);padding:var(--sc-space-24)}
.sc-lv-tiles{display:flex;flex-wrap:wrap;gap:var(--sc-space-12);align-content:flex-start}
.sc-lv-tiles .sc-chip{white-space:nowrap;padding-block:var(--sc-space-8)}
.sc-lv-total{display:flex;flex-direction:column}
.sc-lv-ln{display:flex;justify-content:space-between;gap:var(--sc-space-16);padding-block:var(--sc-space-12);
  border-block-end:var(--sc-rule-w-hair) solid var(--sc-hairline);font-size:var(--sc-text-body-sm);color:var(--sc-ink-700)}
.sc-lv-ln b{color:var(--sc-text);font-weight:var(--sc-fw-text)}
.sc-lv-big{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sc-space-16);
  padding-block-start:var(--sc-space-24)}
.sc-lv-big span{color:var(--sc-text-muted);font-size:var(--sc-text-body-sm)}
.sc-lv-big b{font-size:40px;line-height:1.1;font-weight:var(--sc-fw-text);animation:sc-l-settle var(--sc-dur-base) var(--sc-ease)}
.sc-lv-diff{margin-block-start:var(--sc-space-16);border-radius:var(--sc-radius);
  padding:var(--sc-space-16) var(--sc-space-24);display:flex;flex-direction:column;gap:var(--sc-space-2)}
/* Знак разницы меняет и слова, и заливку: цвет не единственный признак. */
.sc-lv-diff--good{background:var(--sc-success);color:var(--sc-success-on)}
.sc-lv-diff--flat{background:var(--sc-surface-sunken);color:var(--sc-text)}
.sc-lv-diff__t{font-size:var(--sc-text-body-sm)}
.sc-lv-diff b{font-size:30px;line-height:1.15;font-weight:var(--sc-fw-text)}
.sc-lv-note{text-align:center;color:var(--sc-text-muted);font-size:var(--sc-text-caption);
  margin-block-start:var(--sc-space-24);padding-inline:var(--sc-container-pad)}

/* Список занимает всю свободную ширину колонки: итог стоит рядом столбиком, и
   сжимать список нечем. */
.sc-lv-rows{border:var(--sc-rule-w-hair) solid var(--sc-hairline);
  border-radius:var(--sc-radius);overflow:hidden}
.sc-lv-row-item{display:flex;align-items:center;gap:var(--sc-space-16);min-block-size:64px;
  padding:var(--sc-space-8) var(--sc-space-24);border-block-end:var(--sc-rule-w-hair) solid var(--sc-hairline)}
.sc-lv-row-item:last-child{border-block-end:0}
.sc-lv-row-item[data-on="true"]{background:var(--sc-selected-surface)}
.sc-lv-row-item .sc-switch{flex:1}
.sc-lv-row-item__price{color:var(--sc-text-muted)}
.sc-lv-row-item[data-on="true"] .sc-lv-row-item__price{color:var(--sc-selected-on)}

/* ============================================================================
   СОБРАННАЯ СТРАНИЦА. Секции одни и те же, оформление и интерактив разные:
   это материал для сборки, а не четыре готовых страницы. Всё на токенах системы,
   линии везде волосяные, движение короткое. Только логические свойства.
   ========================================================================= */
.sc-ln{background:var(--sc-plane)}
/* Набор и поля главной сжаты на одну ступень (владелец 06.10.2026, сравнение с эталоном). */
.sc-ln-sec{padding-block:clamp(48px,5.5vw,88px)}
.sc-ln-wrap{max-inline-size:var(--sc-container-max);margin-inline:auto;padding-inline:var(--sc-container-pad)}
.sc-ln-head{display:flex;flex-direction:column;gap:var(--sc-space-12);margin-block-end:var(--sc-space-32)}
.sc-ln-head--c{align-items:center;text-align:center}
.sc-ln-h2{font-family:var(--sc-font-display);font-weight:var(--sc-fw-display,400);font-size:clamp(28px,2.8vw,40px);
  line-height:1.15;letter-spacing:-.01em;margin:0;max-inline-size:22ch}
.sc-ln-eyebrow{font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);color:var(--sc-acc-700)}

/* --- первый экран --- */
.sc-ln-hero{padding-block:clamp(48px,6vw,96px)}
.sc-ln-hero__kicker{display:inline-flex;align-items:center;gap:var(--sc-space-8);min-block-size:36px;
  border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:var(--sc-radius-pill);
  padding-inline:var(--sc-space-16);font-size:var(--sc-text-body-sm);color:var(--sc-ink-700)}
.sc-ln-hero__kicker i{inline-size:6px;block-size:6px;border-radius:var(--sc-radius-pill);background:var(--sc-accent);display:block;flex:none}
.sc-ln-hero__title{font-family:var(--sc-font-display);font-weight:var(--sc-fw-display,400);line-height:1.1;letter-spacing:-.015em;
  margin:0;font-size:clamp(34px,4.4vw,60px);text-wrap:balance}
.sc-ln-hero__sub{color:var(--sc-ink-700);font-size:var(--sc-text-lead);line-height:1.5;margin:0;max-inline-size:46ch}
.sc-ln-hero__trust{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sc-space-12);
  font-size:var(--sc-text-body-sm);color:var(--sc-text-muted);margin:0}
.sc-ln-hero__trust b{color:var(--sc-text);font-weight:var(--sc-fw-text)}
.sc-ln-hero__trust i{inline-size:3px;block-size:3px;border-radius:var(--sc-radius-pill);background:var(--sc-ink-300);display:block}
.sc-ln-hero--center .sc-ln-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sc-space-24)}
.sc-ln-hero--center .sc-ln-hero__title{max-inline-size:16ch}
.sc-ln-hero--narrow .sc-ln-wrap{max-inline-size:820px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sc-space-24)}
.sc-ln-hero--narrow .sc-ln-hero__title{font-size:clamp(34px,4vw,56px)}
.sc-ln-hero--split .sc-ln-wrap{display:grid;grid-template-columns:1fr;gap:var(--sc-space-48);align-items:center}
@container (min-width:1000px){.sc-ln-hero--split .sc-ln-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.sc-ln-hero__col{display:flex;flex-direction:column;gap:var(--sc-space-24);align-items:flex-start}
.sc-ln-hero--panel .sc-ln-wrap{display:flex;flex-direction:column;gap:var(--sc-space-32)}
.sc-ln-hero__top{display:grid;grid-template-columns:1fr;gap:var(--sc-space-32);align-items:end}
@container (min-width:1000px){.sc-ln-hero__top{grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr)}}
.sc-ln-hero__list{border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:var(--sc-radius);padding:var(--sc-space-8) var(--sc-space-24)}
.sc-ln-hero__list div{display:flex;align-items:center;gap:var(--sc-space-12);min-block-size:48px;
  border-block-end:var(--sc-rule-w-hair) solid var(--sc-hairline);font-size:var(--sc-text-body-sm)}
.sc-ln-hero__list div:last-child{border-block-end:0}
.sc-ln-hero__list .sc-icon{color:var(--sc-acc-700)}
.sc-ln-field{inline-size:100%;max-inline-size:820px}
/* Поле описания - на ВСЕХ ширинах и во всех копиях (первый экран, призыв, липкое поле):
   (владелец 04.10.2026) обычная ручка растяжения по высоте и низ текста, уходящий в
   прозрачность прямо у строки кнопок, без зазора между ними. Ручку маска не гасит: в угол
   положен второй, сплошной слой маски размером с ручку. */
.sc-ln-input{flex:0 0 auto;min-block-size:96px;max-block-size:min(360px,60vh);resize:vertical;padding-block-end:var(--sc-space-12);
  mask-image:linear-gradient(#000,#000),linear-gradient(to bottom,#000 calc(100% - 28px),transparent);
  mask-size:18px 18px,100% 100%;mask-repeat:no-repeat;
  mask-position:right bottom,0 0} /* rtl-ok: угол ручки растяжения; в RTL переставлен правилом ниже */
[dir="rtl"] .sc-ln-input{mask-position:left bottom,0 0} /* rtl-ok: ручка растяжения в RTL стоит в левом нижнем углу */
.sc-ln-fieldrow{display:flex;align-items:center;gap:var(--sc-space-12);margin-block-start:0}
/* Зазор между текстом и кнопками давал ещё и общий `gap` коробки поля - у поля описания он
   снят по блоковой оси, иначе прозрачность обрывалась бы за 12px до кнопок. */
.sc-ln-field .sc-l-field{row-gap:0}
.sc-ln-fieldrow .sc-btn{margin-inline-start:auto}
/* ОТПРАВКА - КРУГЛАЯ СТРЕЛКА В УГЛУ ПОЛЯ, как у эталона (владелец 06.10.2026), а не полоса
   «Start free» во всю ширину. Слова остаются именем кнопки (`aria-label`). Вес селектора выше
   правила узкого контейнера, которое растягивает кнопку строки на остаток. */
.sc-ln-fieldrow .sc-btn.sc-ln-go{flex:none;inline-size:44px;block-size:44px;min-block-size:44px;padding:0;
  margin-inline-start:auto;border-radius:var(--sc-radius-pill);display:grid;place-items:center}
.sc-ln-fieldrow .sc-btn.sc-ln-go .sc-icon{margin:0}
/* Кубик - квадратная кнопка 44x44, сжимать его нельзя ни на какой ширине. */
.sc-ln-fieldrow .sc-iconbtn{flex-shrink:0}
/* Лента подсказок: прокручивается, по краям уходит в прозрачность. Маска
   симметричная - зеркалить в RTL нечего. */
/* Строка подсказок: кнопка обновления стоит вне прокрутки, лента - внутри. */
.sc-ln-quick-row{display:flex;align-items:center;gap:var(--sc-space-8);margin-block-start:var(--sc-space-12)}
.sc-ln-quick-row .sc-ln-quick{flex:1;min-inline-size:0;margin-block-start:0}
.sc-ln-quick__more{flex:none;display:grid;place-items:center;inline-size:40px;
  block-size:40px;padding:0;border-radius:var(--sc-radius-pill);
  border:var(--sc-rule-w-hair) solid var(--sc-hairline);background:var(--sc-surface);
  color:var(--sc-ink-700);cursor:pointer;
  transition:background var(--sc-dur-fast) var(--sc-ease),rotate var(--sc-dur-slow) var(--sc-ease)}
.sc-ln-quick__more:hover{background:var(--sc-quiet-hover);color:var(--sc-text)}
.sc-ln-quick__more:focus-visible,.sc-ln-quick__pill:focus-visible{
  outline:var(--sc-focus-ring-w) solid var(--sc-focus-ring);outline-offset:var(--sc-focus-ring-offset)}
/* Нажатие поворачивает стрелки на полный оборот: обновление видно, а не только
   слышно по смене подписей. */
.sc-ln-quick__more:active{rotate:180deg}
@media (prefers-reduced-motion:reduce){.sc-ln-quick__more{transition:none}.sc-ln-quick__more:active{rotate:0deg}}
.sc-ln-quick{margin-block-start:var(--sc-space-12);overflow-x:auto;scrollbar-width:none;
  /* Край ленты уходит в прозрачность ТОЛЬКО с той стороны, где ещё есть что
     листать. Маска была постоянной, и дорожку приходилось отодвигать от обоих
     краёв на те же 32px, чтобы крайние пилюли не выцветали в покое, - из-за
     этого первая пилюля стояла в 40px от кнопки обновления при 8px между самими
     пилюлями. Теперь отступ дорожки нулевой, ряд начинается вплотную к кнопке, а
     маска появляется тогда, когда под неё действительно что-то уезжает. Признак
     ставит скрипт (`data-fade`); без скрипта маски нет вовсе - она украшение, и
     её отсутствие ничего не ломает.
     rtl-ok: гашение симметрично по устройству, а какой край гасить, решает
     `data-fade` по фактической позиции прокрутки - в RTL она считается так же. */
  --q-a:0px;--q-b:0px;
  /* rtl-ok: гашение симметрично, край выбирает `data-fade` по позиции прокрутки. */
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--q-a),#000 calc(100% - var(--q-b)),transparent 100%)}
/* Гаснет ТОЛЬКО хвост. Начало ленты не затемняется никогда: первая подсказка -
   это то, ради чего ряд вообще стоит, и показывать её обрезанной значит прятать
   самое нужное. Хвост гасить полезно - он говорит, что список не кончился. */
.sc-ln-quick[data-fade~="end"]{--q-b:32px}
.sc-ln-quick::-webkit-scrollbar{display:none}
/* Ряд тащится мышью, а не только листается. Курсор об этом и говорит; на время
   перетаскивания подсказки перестают ловить нажатие, иначе отпускание кнопки
   после протяжки попадало бы в пилюлю и подставляло чужой промпт. */
.sc-ln-quick{cursor:grab}
.sc-ln-quick[data-dragging="true"]{cursor:grabbing}
.sc-ln-quick[data-dragging="true"] .sc-ln-quick__pill{pointer-events:none}
.sc-ln-quick__track{display:flex;gap:var(--sc-space-8);inline-size:max-content;padding-block:2px}
/* Подсказки мельче (владелец 06.10.2026): 40 в высоту и 15 кеглем, ряд прежний. */
.sc-ln-quick__pill{display:inline-flex;align-items:center;min-block-size:40px;
  padding-inline:var(--sc-space-12);border:var(--sc-rule-w-hair) solid var(--sc-hairline);
  border-radius:var(--sc-radius-pill);background:var(--sc-surface);color:var(--sc-ink-700);
  font-size:.9375rem;white-space:nowrap;cursor:pointer;
  transition:background var(--sc-dur-fast) var(--sc-ease),color var(--sc-dur-fast) var(--sc-ease)}
.sc-ln-quick__pill:hover{background:var(--sc-quiet-hover);color:var(--sc-text)}

/* --- ниши в два шага --- */
.sc-ln-drill-wrap{position:relative}
.sc-ln-drill{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--sc-space-16)}
.sc-ln-drill__head{display:flex;align-items:center;gap:var(--sc-space-16);margin-block-end:var(--sc-space-24)}
.sc-ln-drill__head--c{justify-content:center}
.sc-ln-chips .sc-chip{white-space:nowrap}
.sc-ln-drill__row{display:flex;align-items:center;gap:var(--sc-space-16);min-block-size:88px;
  padding:var(--sc-space-16) var(--sc-space-24);background:var(--sc-surface);cursor:pointer;text-align:start;
  border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:var(--sc-radius);
  transition:background var(--sc-dur-fast) var(--sc-ease),border-color var(--sc-dur-fast) var(--sc-ease)}
.sc-ln-drill__row:hover{background:var(--sc-quiet-hover);border-color:var(--sc-border-strong)}
.sc-ln-drill__txt{display:flex;flex-direction:column;gap:var(--sc-space-2)}
.sc-ln-drill__txt b{font-weight:var(--sc-fw-medium);font-size:var(--sc-text-body)}
.sc-ln-drill__txt span{color:var(--sc-text-muted);font-size:var(--sc-text-body-sm)}
.sc-ln-drill__go{margin-inline-start:auto;flex:none;inline-size:36px;block-size:36px;
  border-radius:var(--sc-radius-pill);background:var(--sc-surface-sunken);display:grid;place-items:center;color:var(--sc-ink-700)}
.sc-ln-drill__row:hover .sc-ln-drill__go{background:var(--sc-plane)}
/* Слой поверх: описание не двигает то, что под ним (требование 7). */
.sc-ln-drill__layer{position:absolute;inset-inline:0;inset-block-end:calc(var(--sc-space-24) * -1);
  display:flex;justify-content:center;z-index:var(--sc-z-popover);pointer-events:none}
.sc-ln-drill__card{pointer-events:auto;position:relative;inline-size:min(720px,92%);
  background:var(--sc-surface);border:var(--sc-rule-w-hair) solid var(--sc-hairline);
  border-radius:var(--sc-radius);box-shadow:var(--sc-shadow-overlay);padding:var(--sc-space-24)}
/* Поле в карточке описания - не флекс-элемент, поэтому ширину надо задать явно:
   без этого textarea схлопывается до размера по умолчанию и текст уходит в скролл. */
.sc-ln-drill__card .sc-ln-input{inline-size:100%;min-block-size:132px;padding:var(--sc-space-8) 0}
.sc-ln-hint{margin:var(--sc-space-12) 0 0;font-size:var(--sc-text-body-sm);color:var(--sc-text-muted)}

/* --- что внутри кабинета --- */
.sc-ln-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sc-space-16)}
.sc-ln-feat__card{display:flex;flex-direction:column;gap:var(--sc-space-8);padding:var(--sc-space-24);
  border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:var(--sc-radius);background:var(--sc-surface)}
.sc-ln-feat__card .sc-icon{color:var(--sc-acc-700)}
.sc-ln-feat__card b{font-weight:var(--sc-fw-medium);font-size:var(--sc-text-body)}
.sc-ln-feat__card span{color:var(--sc-text-muted);font-size:var(--sc-text-body-sm)}

/* --- что входит в любой сайт --- */
/* Список включённого - служебный, а не главный: заголовок тише, строки в одну
   линию. Три колонки, а не четыре: в четырёх подпись «платный тариф» выталкивала
   название на вторую строку. */
.sc-ln-h2--sm{font-size:clamp(22px,1.9vw,28px);max-inline-size:26ch}
.sc-ln-inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 var(--sc-space-48);
  border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline)}
/* Старый список заменён карточками ниже; правил nowrap здесь больше нет. */

/* --- финальный призыв --- */
.sc-ln-cta{background:var(--sc-surface-sunken)}
.sc-ln-cta .sc-ln-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sc-space-24)}
.sc-ln-drill__close{position:absolute;inset-block-start:var(--sc-space-8);inset-inline-end:var(--sc-space-8);z-index:1}
.sc-ln-field--wide{max-inline-size:none}

/* --- полоса фотографии --- */
/* Подпись лежит в той же ячейке сетки, что и снимок, а не абсолютом: так она
   не вываливается за нижний край и не зависит от порядка вычисления пропорции. */
.sc-ln-band{position:relative;display:grid}
.sc-ln-band > *{grid-area:1 / 1}
.sc-ln-band__img{display:block;inline-size:100%;aspect-ratio:2400 / 1000;object-fit:cover;background:var(--sc-surface-sunken)}
.sc-ln-band--inset .sc-ln-band__img{border-radius:var(--sc-radius)}
.sc-ln-band--inset{max-inline-size:var(--sc-container-max);margin-inline:auto;padding-inline:var(--sc-container-pad)}
.sc-ln-band__cap{align-self:end;justify-self:start;margin:var(--sc-space-24);position:relative;z-index:1;
  max-inline-size:420px;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
  border-radius:var(--sc-radius);padding:var(--sc-space-16) var(--sc-space-24);box-shadow:var(--sc-shadow-overlay)}
.sc-ln-band--inset .sc-ln-band__cap{margin-inline:calc(var(--sc-container-pad) + var(--sc-space-24))}
.sc-ln-band__cap b{display:block;font-weight:var(--sc-fw-medium)}
.sc-ln-band__cap span{font-size:var(--sc-text-body-sm);color:var(--sc-text-muted)}
.sc-ln-band--veil .sc-ln-band__img{filter:saturate(.9)}
.sc-ln-band--veil::after{content:"";position:absolute;inset:0;background:rgba(18,19,23,.42)}
.sc-ln-band--veil .sc-ln-band__cap{align-self:center;justify-self:center;text-align:center;max-inline-size:520px}

/* --- ниши --- */
.sc-ln-list{border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline)}
.sc-ln-list__row{display:flex;align-items:center;gap:var(--sc-space-16);min-block-size:72px;
  padding-inline:var(--sc-space-8);border-block-end:var(--sc-rule-w-hair) solid var(--sc-hairline);
  transition:background var(--sc-dur-fast) var(--sc-ease)}
.sc-ln-list__row:hover{background:var(--sc-quiet-hover)}
.sc-ln-list__row b{font-weight:var(--sc-fw-medium);font-size:var(--sc-text-lead)}
.sc-ln-list__row span{color:var(--sc-text-muted);font-size:var(--sc-text-body-sm);margin-inline-start:auto;text-align:end}
.sc-ln-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sc-space-16)}
.sc-ln-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sc-space-4);text-align:start;
  min-block-size:104px;padding:var(--sc-space-24);background:var(--sc-surface);cursor:pointer;
  border:var(--sc-rule-w-hair) solid var(--sc-border-strong);border-radius:var(--sc-radius);
  transition:background var(--sc-dur-fast) var(--sc-ease),border-color var(--sc-dur-fast) var(--sc-ease)}
.sc-ln-card:hover{background:var(--sc-quiet-hover)}
.sc-ln-card b{font-weight:var(--sc-fw-medium);font-size:var(--sc-text-body)}
.sc-ln-card span{color:var(--sc-text-muted);font-size:var(--sc-text-body-sm)}
.sc-ln-card[aria-pressed="true"]{background:var(--sc-selected-surface);border-color:var(--sc-selected-border)}
.sc-ln-card[aria-pressed="true"] b{color:var(--sc-selected-on)}
.sc-ln-chips{display:flex;flex-wrap:wrap;gap:var(--sc-space-12);justify-content:center}
.sc-ln-acc{border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline)}

/* «What is ...?» (SCRUM-302): заголовок слева, абзац справа - та же строка, что у страниц
   цен и «о нас». Абзац один и печатается целиком: его цитирует ИИ-поиск. Отступ снизу
   убран - сразу за строкой идут вопросы, и две секции читаются одним блоком. */
.sc-ln-what{padding-block-end:0}
.sc-ln-what__row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sc-space-16) var(--sc-space-48)}
@container (min-width:900px){.sc-ln-what__row{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.sc-ln-what__p{margin:0;font-size:var(--sc-text-lead);line-height:1.55;color:var(--sc-ink-700);text-wrap:pretty}
.sc-ln-acc__item{border-block-end:var(--sc-rule-w-hair) solid var(--sc-hairline)}
.sc-ln-acc__btn{display:flex;align-items:center;gap:var(--sc-space-16);inline-size:100%;min-block-size:68px;
  padding-inline:var(--sc-space-8);background:transparent;border:0;cursor:pointer;text-align:start;
  font-size:var(--sc-text-lead);font-weight:var(--sc-fw-medium);color:var(--sc-text)}
.sc-ln-acc__btn:hover{background:var(--sc-quiet-hover)}
.sc-ln-acc__btn .sc-icon{margin-inline-start:auto;color:var(--sc-ink-600);transition:rotate var(--sc-dur-base) var(--sc-ease)}
.sc-ln-acc__btn[aria-expanded="true"] .sc-icon{rotate:180deg}
.sc-ln-acc__body{padding:0 var(--sc-space-8) var(--sc-space-24);color:var(--sc-text-muted);
  font-size:var(--sc-text-body-sm);max-inline-size:70ch}

/* --- витрина --- */
.sc-ln-shot{display:block;inline-size:100%;aspect-ratio:4 / 3;object-fit:cover;background:var(--sc-surface-sunken)}
.sc-ln-frame{border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:var(--sc-radius);overflow:hidden;
  background:var(--sc-surface);transition:translate var(--sc-dur-base) var(--sc-ease),box-shadow var(--sc-dur-base) var(--sc-ease)}
.sc-ln-frame__cap{display:flex;align-items:center;justify-content:space-between;gap:var(--sc-space-16);
  padding:var(--sc-space-16) var(--sc-space-24);border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline)}
.sc-ln-frame__cap b{font-weight:var(--sc-fw-medium)}
/* 520, а не 420: при 1440 это две колонки, и снимок остаётся целой страницей,
   а не превращается в три мелкие плитки. */
.sc-ln-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(520px,1fr));gap:var(--sc-space-32)}
.sc-ln-cols .sc-ln-frame:hover{translate:0 -4px;box-shadow:var(--sc-shadow-sticky)}
.sc-ln-tabs{display:flex;flex-wrap:wrap;gap:var(--sc-space-8);margin-block-end:var(--sc-space-24)}
.sc-ln-tab{min-block-size:var(--sc-tap-min);padding-inline:var(--sc-space-16);background:transparent;
  border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:var(--sc-radius-pill);cursor:pointer;
  font-size:var(--sc-text-body-sm);color:var(--sc-ink-700)}
.sc-ln-tab:hover{background:var(--sc-quiet-hover)}
.sc-ln-tab[aria-selected="true"]{background:var(--sc-primary);color:var(--sc-primary-on);border-color:var(--sc-primary)}
.sc-ln-thumbs{display:flex;gap:var(--sc-space-12);margin-block-start:var(--sc-space-16);flex-wrap:wrap}
.sc-ln-thumb{inline-size:168px;padding:0;background:transparent;cursor:pointer;border-radius:var(--sc-radius);
  border:var(--sc-rule-w-hair) solid var(--sc-hairline);overflow:hidden;display:block}
.sc-ln-thumb img{display:block;inline-size:100%;aspect-ratio:4 / 3;object-fit:cover;background:var(--sc-surface-sunken)}
/* Текущая миниатюра отличается не только рамкой: под ней подпись жирнее и стоит галочка. */
.sc-ln-thumb[aria-current="true"]{border-color:var(--sc-text);border-width:var(--sc-rule-w)}
.sc-ln-thumb__cap{display:flex;align-items:center;gap:var(--sc-space-4);justify-content:center;min-block-size:36px;
  font-size:var(--sc-text-caption);color:var(--sc-text-muted)}
.sc-ln-thumb[aria-current="true"] .sc-ln-thumb__cap{color:var(--sc-text);font-weight:var(--sc-fw-medium)}
.sc-ln-honest{margin-block-start:var(--sc-space-24);font-size:var(--sc-text-body-sm);color:var(--sc-text-muted)}

/* --- экономия: чекбоксы и липкий столбец --- */
.sc-ln-checks{display:grid;grid-template-columns:1fr;gap:var(--sc-space-32);align-items:start}
@container (min-width:1000px){.sc-ln-checks{grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr)}}
.sc-ln-checks__list{border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:var(--sc-radius);
  padding:var(--sc-space-8) var(--sc-space-24)}
.sc-ln-checks__row{display:flex;align-items:center;gap:var(--sc-space-16);
  border-block-end:var(--sc-rule-w-hair) solid var(--sc-hairline)}
.sc-ln-checks__row:last-child{border-block-end:0}
.sc-ln-checks__row .sc-choice{flex:1}
.sc-ln-checks__row span{color:var(--sc-text-muted);font-variant-numeric:tabular-nums}
.sc-ln-side{position:sticky;inset-block-start:var(--sc-space-24);border:var(--sc-rule-w-hair) solid var(--sc-hairline);
  border-radius:var(--sc-radius);padding:var(--sc-space-24);display:flex;flex-direction:column;gap:var(--sc-space-16)}

/* --- подвал --- */
.sc-ln-foot{border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline);padding-block:var(--sc-space-48)}
.sc-ln-foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sc-space-32)}
.sc-ln-foot h3{font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);margin:0 0 var(--sc-space-12)}
.sc-ln-foot ul{list-style:none;margin:0;padding:0}
.sc-ln-foot a{display:inline-flex;align-items:center;min-block-size:var(--sc-tap-min);font-size:var(--sc-text-body-sm)}
.sc-ln-foot__end{margin-block-start:var(--sc-space-32);padding-block-start:var(--sc-space-24);
  border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline);display:flex;flex-wrap:wrap;gap:var(--sc-space-16);
  font-size:var(--sc-text-body-sm);color:var(--sc-text-muted)}
.sc-ln-foot--slim .sc-ln-foot__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sc-space-24)}
.sc-ln-foot--slim a{font-size:var(--sc-text-body-sm)}
.sc-ln-foot--cta{background:var(--sc-surface-sunken)}
.sc-ln-foot__cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sc-space-16);
  padding-block-end:var(--sc-space-48)}

/* --- соберите и ведите: кадр и раскрывающийся список --- */
.sc-ln-grow{display:grid;grid-template-columns:1fr;gap:var(--sc-space-24);align-items:start}
@container (min-width:1000px){.sc-ln-grow{grid-template-columns:minmax(0,1.5fr) minmax(320px,.85fr);gap:var(--sc-space-32)}}
.sc-ln-grow__vis{margin:0;border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:var(--sc-radius);overflow:hidden;background:var(--sc-surface)}
.sc-ln-grow__list{display:flex;flex-direction:column;gap:var(--sc-space-8)}
.sc-ln-grow__item{border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:var(--sc-radius);
  padding-inline:var(--sc-space-16);background:var(--sc-surface)}
.sc-ln-grow__item[data-on="true"]{background:var(--sc-surface-sunken)}
.sc-ln-grow__btn{display:flex;align-items:center;gap:var(--sc-space-12);inline-size:100%;min-block-size:56px;
  padding:0;background:transparent;border:0;cursor:pointer;text-align:start;
  font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);color:var(--sc-text)}
.sc-ln-grow__btn .sc-icon{color:var(--sc-ink-600);flex:none}
.sc-ln-grow__body{margin:0;padding-block:0 var(--sc-space-16);padding-inline-start:var(--sc-space-32);
  color:var(--sc-text-muted);font-size:var(--sc-text-body-sm)}

/* --- помощник на тёмной плоскости --- */
.sc-ln-chat{display:flex;flex-direction:column;gap:var(--sc-space-12);max-inline-size:760px;margin-inline:auto}
.sc-ln-bub{margin:0;max-inline-size:80%;padding:var(--sc-space-12) var(--sc-space-16);
  border-radius:var(--sc-radius);font-size:var(--sc-text-body-sm);line-height:1.5}
.sc-ln-bub--them{background:var(--sc-ink-800);color:var(--sc-dark-on)}
.sc-ln-bub--me{margin-inline-start:auto;background:var(--sc-plane);color:var(--sc-text)}
.sc-ln-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;
  margin-block-start:var(--sc-space-48);border-block-start:var(--sc-rule-w-hair) solid var(--sc-dark-line)}
.sc-ln-cells__i{display:flex;flex-direction:column;gap:var(--sc-space-4);padding:var(--sc-space-24);
  border-block-end:var(--sc-rule-w-hair) solid var(--sc-dark-line);
  border-inline-end:var(--sc-rule-w-hair) solid var(--sc-dark-line)}
.sc-ln-cells__i b{font-weight:var(--sc-fw-medium)}
.sc-ln-cells__i span{color:var(--sc-dark-muted);font-size:var(--sc-text-body-sm)}

/* --- место под доказательства --- */
.sc-ln-proof__num{display:flex;flex-direction:column;align-items:center;gap:var(--sc-space-8);
  text-align:center;margin-block-end:var(--sc-space-48)}
.sc-ln-proof__num b{font-family:var(--sc-font-display);font-weight:var(--sc-fw-display,400);font-size:clamp(64px,9vw,120px);line-height:1}
/* ПРЯМОЙ потомок, а не любой вложенный: правило описывает подпись под числом, а
   написано было тогда, когда `span` внутри блока был ровно один. Табло собрано из
   вложенных `span`, и общий селектор красил и мельчил КАЖДУЮ цифру - число
   выглядело как строка мелкого серого текста вместо крупного числа. */
.sc-ln-proof__num > span{color:var(--sc-text-muted);max-inline-size:52ch;font-size:var(--sc-text-body-sm)}
.sc-ln-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sc-space-16)}
/* Пунктир - единственное место, где линия в системе не сплошная: он и означает,
   что содержимого ещё нет, а не что оно приглушено. */
.sc-ln-proof__slot{display:flex;flex-direction:column;gap:var(--sc-space-8);padding:var(--sc-space-24);
  border:var(--sc-rule-w-hair) dashed var(--sc-ink-300);border-radius:var(--sc-radius);min-block-size:180px}
.sc-ln-proof__slot .sc-icon{color:var(--sc-ink-400)}
.sc-ln-proof__slot b{font-weight:var(--sc-fw-medium)}
.sc-ln-proof__slot span{color:var(--sc-text-muted);font-size:var(--sc-text-body-sm)}

/* ============================================================================
   ЛЕНДИНГ БЛИЖЕ К РЕФЕРЕНСУ. Тёплая плоскость, крупное скругление, антиква во
   ВСЕХ заголовках секций, надзаголовок над каждой секцией, тёмная зона одна.
   Всё - только под .sc-ln: кабинет этих правил не видит.
   ========================================================================= */
.sc-ln{background:var(--sc-l-plane);color:var(--sc-l-plane-on)}
.sc-ln .sc-l-header{background:var(--sc-l-plane);border-block-end-color:var(--sc-l-hairline);box-shadow:none}
/* Антиква держит все заголовки секций, а не только первый экран: без этого
   страница ниже героя снова становится серой. Текст, подписи и кнопки - Rubik. */
.sc-ln .sc-ln-h2,.sc-ln .sc-h2,.sc-ln .sc-h3,.sc-ln .sc-lv-h2{font-family:var(--sc-font-display);font-weight:var(--sc-fw-display,400)}
.sc-ln .sc-lv-h2{font-size:clamp(34px,3.6vw,52px);line-height:1.12;letter-spacing:-.01em}
.sc-ln .sc-lv-sec__head .sc-lead{color:var(--sc-ink-700)}
/* Надзаголовок: мелкие прописные акцентным синим. В иврите прописных нет,
   поэтому там регистр не трогаем. */
.sc-ln .sc-ln-eyebrow,.sc-ln .sc-lv-eyebrow{font-size:var(--sc-text-caption);font-weight:var(--sc-fw-medium);
  letter-spacing:.09em;text-transform:uppercase;color:var(--sc-acc-700)}
.sc-ln:lang(he) .sc-ln-eyebrow,.sc-ln:lang(he) .sc-lv-eyebrow{text-transform:none;letter-spacing:0}
/* На тёмной плоскости акцент светлеет на две ступени: #2f6fd0 на чернильном даёт
   3.1:1 и не читается, #8fb4e6 даёт 7.4:1. Пара, а не один цвет. */
.sc-ln .sc-ln-eyebrow--dark,.sc-ln .sc-lv-eyebrow--dark{color:var(--sc-acc-300)}
/* Карточки и медиа - крупная ступень скругления. Таблетка остаётся таблеткой. */
.sc-ln .sc-ln-frame,.sc-ln .sc-ln-grow__vis,.sc-ln .sc-ln-feat__card,.sc-ln .sc-ln-drill__row,
.sc-ln .sc-ln-card,.sc-ln .sc-lv-panel,.sc-ln .sc-lv-rows,.sc-ln .sc-ln-checks__list,
.sc-ln .sc-ln-side,.sc-ln .sc-ln-proof__slot,.sc-ln .sc-ln-bento__cell,.sc-ln .sc-ln-shotwrap{border-radius:var(--sc-l-radius)}
.sc-ln .sc-ln-grow__item,.sc-ln .sc-l-field,.sc-ln .sc-lv-diff,.sc-ln .sc-ln-bento__slot{border-radius:var(--sc-l-radius-sm)}
.sc-ln .sc-ln-drill__biz{border-radius:var(--sc-radius-pill)}
.sc-ln .sc-l-ring{border-radius:calc(var(--sc-l-radius-sm) + 1.5px)}
.sc-ln .sc-ln-feat__card,.sc-ln .sc-ln-grow__item[data-on="true"],.sc-ln .sc-ln-bento__cell{
  background:var(--sc-l-surface);border-color:transparent}
.sc-ln .sc-ln-drill__row{background:var(--sc-l-surface);border-color:transparent}
.sc-ln .sc-ln-drill__row:hover{background:var(--sc-l-surface-2);border-color:transparent}
.sc-ln .sc-ln-drill__go{background:var(--sc-l-plane)}
.sc-ln .sc-chip,.sc-ln .sc-ln-quick__pill,.sc-ln .sc-l-field,.sc-ln .sc-ln-side,.sc-ln .sc-lv-rows,
.sc-ln .sc-ln-checks__list,.sc-ln .sc-lv-panel{background:var(--sc-l-plane)}
/* :not() обязателен: без него правило перебивает .sc-l-dark по весу и тёмная
   секция теряет заливку, оставаясь со светлым текстом. */
.sc-ln .sc-lv-sec:not(.sc-l-dark){background:transparent}

/* Кнопка - тёмная таблетка со стрелкой. */
.sc-ln .sc-btn--ink .sc-icon{margin-inline-start:var(--sc-space-4)}

/* --- вторая секция: фотокарусель во всю ширину --- */
.sc-ln-photos{position:relative;overflow:hidden;padding-block:var(--sc-space-8)}
.sc-ln-photos__track{display:flex;gap:var(--sc-space-16);
  padding-inline:max(0px,calc((100% - var(--l-photo,min(1240px,88cqi))) / 2));
  translate:calc(var(--sc-dir) * var(--sc-ln-shift,0px)) 0;
  transition:translate var(--sc-dur-slow) var(--sc-ease);touch-action:pan-y;cursor:grab}
.sc-ln-photos__track[data-dragging="true"]{transition:none;cursor:grabbing}
/* Лента идёт непрерывно и по кругу, как бегущие строки отзывов: положение пишется
   каждый кадр, и переход из правила выше дрался бы с каждой записью - ход выходил
   рваным, а перетаскивание отставало от пальца. Признак ставит скрипт; без скрипта
   лента неподвижна, и переход ей не мешает. */
.sc-ln-photos__track[data-flow="true"]{transition:none}
/* Карточка почти во всю ширину и пропорций 1.55 - как у эталонного конструктора (замер 05.10.2026:
   929x600 при окне 1024). */
.sc-ln-photo{flex:0 0 var(--l-photo,min(1240px,88cqi));position:relative;display:grid;
  border-radius:var(--sc-l-radius);overflow:hidden;background:var(--sc-l-surface-2);
  transition:scale var(--sc-dur-slow) var(--sc-ease),opacity var(--sc-dur-slow) var(--sc-ease)}
/* Соседние кадры мельче и глуше - «соседние подглядывают обрезанными краями и
   меньше по размеру» из макета. Признак был завязан на `aria-hidden`, которого
   никто не ставил, и правило не работало ни разу: все кадры шли одного размера.
   Теперь его ставит скрипт по тому, какой кадр стоит в центре, а `aria-hidden`
   вернулся к своему смыслу - он про дерево доступности, а не про размер. */
.sc-ln-photo[data-near="true"]{scale:.92}
.sc-ln-photo > *{grid-area:1 / 1}
.sc-ln-photo img.sc-ln-photo__bg{inline-size:100%;block-size:100%;object-fit:cover;aspect-ratio:1600 / 1032}
/* Фон крупнее кадра на 15%: запас под параллакс (`drift()` в landing.js), чтобы при сдвиге не
   открывался край. При «меньше движения» скрипт ленту не ведёт, и фон стоит по центру. */
.sc-ln-photo img.sc-ln-photo__bg{scale:1.15}
/* Тень под текстом - вертикальная: горизонтальных градиентов в системе нет. */
.sc-ln-photo__veil{align-self:end;block-size:62%;background:linear-gradient(to bottom,rgba(18,19,23,0),rgba(18,19,23,.72))}
.sc-ln-photo__in{align-self:end;display:flex;align-items:flex-end;gap:var(--sc-space-24);
  padding:var(--sc-space-32);z-index:1}
.sc-ln-photo__mock{flex:none;inline-size:clamp(200px,26cqi,300px);border-radius:var(--sc-l-radius-sm);overflow:hidden;
  border:2px solid var(--sc-plane);box-shadow:var(--sc-shadow-overlay);background:var(--sc-plane)}
/* Окошко 16:9 с главной страницей сайта: снимок во всю длину едет вниз и обратно. Конечный сдвиг -
   «минус собственная высота плюс высота окна»; высота окна - 56.25% его ширины, отсюда `cqi`. */
.sc-ln-photo__scr{container-type:inline-size;aspect-ratio:16 / 9;overflow:hidden}
.sc-ln-photo__scr img.sc-ln-photo__page{display:block;inline-size:100%;block-size:auto;
  animation:sc-ln-page 24s ease-in-out infinite alternate}
/* Рывками с паузами, как у эталона: проехал треть страницы - постоял - дальше. */
@keyframes sc-ln-page{
  0%,8%{translate:0 0}
  25%,33%{translate:0 calc((-100% + 56.25cqi) / 3)}
  50%,58%{translate:0 calc((-100% + 56.25cqi) * 2 / 3)}
  75%,100%{translate:0 calc(-100% + 56.25cqi)}}
@media (prefers-reduced-motion:reduce){.sc-ln-photo__scr img.sc-ln-photo__page{animation:none}}
html.atx-rm .sc-ln-photo__scr img.sc-ln-photo__page{animation:none}
.sc-ln-photo__t{color:var(--sc-plane);font-weight:var(--sc-fw-bold);font-size:clamp(22px,2.2vw,32px);
  line-height:1.2;margin:0;max-inline-size:16ch;text-wrap:balance}

/* --- бенто «что внутри» --- */
/* 12 колонок, ряды закрыты: 8+4, 4+4+4, 6+6. Неполных рядов не бывает. */
.sc-ln-bento{display:grid;grid-template-columns:1fr;gap:var(--sc-space-16)}
@container (min-width:1000px){
  .sc-ln-bento{grid-template-columns:repeat(12,minmax(0,1fr))}
  .sc-ln-bento__cell--c8{grid-column:span 8}
  .sc-ln-bento__cell--c6{grid-column:span 6}
  .sc-ln-bento__cell--c4{grid-column:span 4}
}
.sc-ln-bento__vis{flex:1;min-block-size:180px;border-radius:var(--sc-l-radius-sm);overflow:hidden;
  background:var(--sc-l-plane);display:flex}
.sc-ln-bento__vis img{inline-size:100%;block-size:100%;object-fit:cover}

/* Уменьшенные куски кабинета внутри карточек. Это не скриншоты, а те же токены:
   при смене цвета или радиуса они меняются вместе с продуктом. */
.sc-mini{display:flex;flex-direction:column;inline-size:100%;font-size:12px;line-height:1.4;
  background:var(--sc-plane);color:var(--sc-text);overflow:hidden}
.sc-mini__bar{display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-block-end:1px solid var(--sc-hairline);font-size:11px}
.sc-mini__bar b{font-weight:var(--sc-fw-medium)}
.sc-mini__save{margin-inline-start:auto;padding:5px 12px;border-radius:999px;
  background:var(--sc-primary);color:var(--sc-primary-on);font-weight:var(--sc-fw-medium);
  white-space:nowrap;flex:none}
.sc-mini__bar i{font-style:normal;color:var(--sc-text-muted);border:1px solid var(--sc-hairline);
  border-radius:999px;padding:2px 8px;background:transparent}
.sc-mini__body{display:flex;flex:1;min-block-size:0}
.sc-mini__side{display:flex;flex-direction:column;gap:2px;padding:8px;inline-size:104px;flex:none;
  border-inline-end:1px solid var(--sc-hairline);color:var(--sc-text-muted)}
.sc-mini__side > span{padding:5px 8px;border-radius:8px}
.sc-mini__side > span[data-on]{background:var(--sc-selected-surface);color:var(--sc-selected-on);font-weight:var(--sc-fw-medium)}
.sc-mini__field{flex:1;display:flex;flex-direction:column;gap:4px;padding:10px}
.sc-mini__field label{color:var(--sc-text-muted);font-size:11px}
.sc-mini__input{border:1px solid var(--sc-border-strong);border-radius:8px;padding:6px 8px;background:var(--sc-plane)}
.sc-mini__input--tall{min-block-size:44px}
.sc-mini__chips{display:flex;gap:4px;margin-block-start:2px}
/* ПРЯМОЙ потомок, а не любой вложенный: редактор оборачивает правимый текст в свой
   span, и рамка с отступами доставалась и ему - выходила рамка внутри рамки. */
.sc-mini__chips > span{border:1px solid var(--sc-hairline);box-shadow:none;outline:0;
  border-radius:999px;padding:5px 10px;color:var(--sc-ink-700);background:var(--sc-plane)}
.sc-mini__rows{display:flex;flex-direction:column;padding:4px 10px}
.sc-mini__rows > div{display:flex;align-items:center;gap:8px;padding-block:8px;
  border-block-end:1px solid var(--sc-hairline)}
.sc-mini__rows > div:last-child{border-block-end:0}
.sc-mini__rows b{font-weight:var(--sc-fw-medium);inline-size:64px;flex:none}
.sc-mini__rows span{flex:1}
.sc-mini__rows i{font-style:normal;color:var(--sc-text-muted)}
.sc-mini--chat{padding:10px;gap:6px;justify-content:flex-end;overflow:hidden;block-size:212px}
.sc-mini--chat .sc-mini__b{animation:sc-ln-rise var(--sc-dur-base) var(--sc-ease);flex:none}
.sc-mini__typing{display:inline-flex;gap:3px;align-items:center;inline-size:max-content}
.sc-mini__typing i{inline-size:5px;block-size:5px;border-radius:999px;background:currentColor;
  opacity:.45;animation:sc-ln-dot 1s infinite}
.sc-mini__typing i:nth-child(2){animation-delay:.15s}
.sc-mini__typing i:nth-child(3){animation-delay:.3s}
.sc-mini__b{margin:0;max-inline-size:80%;padding:6px 10px;border-radius:12px}
.sc-mini__b--them{background:var(--sc-surface-sunken)}
.sc-mini__b--me{margin-inline-start:auto;background:var(--sc-selected-surface);color:var(--sc-selected-on)}
.sc-ln-bento__cell{display:flex;flex-direction:column;gap:var(--sc-space-16);padding:var(--sc-space-24);
  background:var(--sc-l-surface);border:0;min-block-size:280px}
.sc-ln-bento__slot{flex:1;min-block-size:150px;background:var(--sc-l-plane);display:grid;place-items:center;
  color:var(--sc-text-muted);font-size:var(--sc-text-caption);text-align:center;padding:var(--sc-space-16);overflow:hidden}
.sc-ln-bento__slot img{inline-size:100%;block-size:100%;object-fit:cover;border-radius:var(--sc-l-radius-sm)}
.sc-ln-bento__txt b{display:block;font-weight:var(--sc-fw-medium);font-size:var(--sc-text-body)}
/* Межстрочный - как у вводного абзаца, а не 1.6 текста тела: описание в две строки под
   карточкой читалось разреженным (владелец 04.10.2026). */
.sc-ln-bento__txt span{color:var(--sc-text-muted);font-size:var(--sc-text-body-sm);line-height:var(--sc-lh-lead);display:block}

/* --- FAQ простым списком, без карточек --- */
.sc-ln .sc-ln-acc__item{border-block-end-color:var(--sc-l-hairline)}
.sc-ln .sc-ln-acc{border-block-start-color:var(--sc-l-hairline)}
/* Вопрос - выше и плотнее (владелец 05.10.2026): больше воздуха сверху и снизу, межстрочный
   меньше - вопрос в две строки читался разреженным. */
.sc-ln .sc-ln-acc__btn{font-size:var(--sc-text-lead);padding-block:var(--sc-space-24);line-height:1.3}
.sc-ln .sc-ln-inc div{border-block-end-color:var(--sc-l-hairline)}
.sc-ln .sc-ln-inc{border-block-start-color:var(--sc-l-hairline)}

/* --- тёмный подвал --- */
.sc-ln-foot--dark{background:var(--sc-dark-bg);color:var(--sc-dark-on);border-block-start:0;
  padding-block:var(--sc-space-64) var(--sc-space-48)}
.sc-ln-foot--dark :focus-visible{outline-color:var(--sc-dark-on)}
.sc-ln-foot--dark a{color:var(--sc-dark-on);text-decoration-color:rgba(255,255,255,.4)}
.sc-ln-foot--dark a:hover{color:var(--sc-plane)}
.sc-ln-foot--dark h3{color:var(--sc-dark-muted);font-weight:var(--sc-fw-text)}
.sc-ln-foot__mark{font-family:var(--sc-font-display);font-weight:var(--sc-fw-display,400);font-size:clamp(48px,7vw,104px);
  line-height:1;letter-spacing:-.02em;margin:0 0 var(--sc-space-48)}
.sc-ln-foot__mark .sc-brand-logo{block-size:clamp(56px,7vw,96px)}
.sc-ln-foot--dark .sc-ln-foot__end{border-block-start-color:var(--sc-dark-line);color:var(--sc-dark-muted)}

/* --- строка доверия со звёздами (плейсхолдер) --- */
.sc-ln-stars{display:inline-flex;gap:2px;color:var(--sc-acc-600)}
.sc-ln-stars .sc-icon{font-size:18px}
.sc-ln-hero__trust b{margin-inline-end:var(--sc-space-4)}

/* --- отзывы карточками --- */
.sc-ln-review{margin:0;display:flex;flex-direction:column;gap:var(--sc-space-16);
  padding:var(--sc-space-24);background:var(--sc-l-surface);border-radius:var(--sc-l-radius)}
.sc-ln-review blockquote{margin:0;font-size:var(--sc-text-body);line-height:1.55}
.sc-ln-review figcaption{display:flex;align-items:center;gap:var(--sc-space-12);margin-block-start:auto}
.sc-ln-review figcaption img{inline-size:44px;block-size:44px;border-radius:var(--sc-radius-pill);object-fit:cover;flex:none}
.sc-ln-review figcaption > span{display:flex;flex-direction:column}
.sc-ln-review figcaption b{font-weight:var(--sc-fw-medium);font-size:var(--sc-text-body-sm)}
.sc-ln-review figcaption span span,.sc-ln-review figcaption > span > span{color:var(--sc-text-muted);font-size:var(--sc-text-caption)}
.sc-ln-proof__num b{color:var(--sc-text)}

/* Зачёркнутая сумма в списке экономии: линия, а не цвет. */
.sc-lv-strike{text-decoration:line-through;text-decoration-thickness:2px;color:var(--sc-ink-600)}

/* Разговор с помощником. Высота задана заранее: реплики появляются внутри
   готовой коробки, раскладка не прыгает. */
.sc-ln-talk{max-inline-size:760px;margin-inline:auto;min-block-size:460px;display:flex}
.sc-ln-talk__flow{inline-size:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sc-space-8)}
.sc-ln-talk .sc-ln-bub{animation:sc-ln-rise var(--sc-dur-base) var(--sc-ease)}
@keyframes sc-ln-rise{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.sc-ln-bub--them{background:var(--sc-l-surface);color:var(--sc-text)}
.sc-ln-bub--me{background:var(--sc-ink-950);color:var(--sc-plane)}
.sc-ln-bub--typing{display:inline-flex;gap:4px;align-items:center;background:var(--sc-l-surface);inline-size:max-content}
.sc-ln-bub--typing i{inline-size:6px;block-size:6px;border-radius:999px;background:var(--sc-ink-500);
  animation:sc-ln-dot 1s infinite}
.sc-ln-bub--typing i:nth-child(2){animation-delay:.15s}
.sc-ln-bub--typing i:nth-child(3){animation-delay:.3s}
@keyframes sc-ln-dot{0%,60%,100%{opacity:.3}30%{opacity:1}}
.sc-ln-done{display:flex;align-items:center;gap:var(--sc-space-12);margin-block-start:var(--sc-space-8);
  padding:var(--sc-space-16);border-radius:var(--sc-l-radius-sm);background:var(--sc-l-surface);
  border:1px solid var(--sc-l-hairline);animation:sc-ln-rise var(--sc-dur-slow) var(--sc-ease)}
.sc-ln-done__mark{inline-size:32px;block-size:32px;border-radius:999px;background:var(--sc-success);
  color:var(--sc-success-on);display:grid;place-items:center;flex:none}
.sc-ln-done__txt{display:flex;flex-direction:column}
.sc-ln-done__txt b{font-weight:var(--sc-fw-medium)}
.sc-ln-done__txt span{color:var(--sc-text-muted);font-size:var(--sc-text-body-sm)}
.sc-ln-done .sc-btn{margin-inline-start:auto}
.sc-ln-cells{border-block-start-color:var(--sc-l-hairline)}
.sc-ln-cells__i{border-block-end-color:var(--sc-l-hairline);border-inline-end-color:var(--sc-l-hairline)}
.sc-ln-cells__i span{color:var(--sc-text-muted)}

/* --- типы содержимого бенто. Нижней карточки во всю ширину (фотография) больше нет:
   владелец снял её 04.10.2026, ряды остались закрытыми - 8+4, 4+4+4, 6+6. --- */
.sc-mini--pad{padding:12px;gap:10px}
.sc-mini__btn{margin-inline-start:auto;padding:4px 10px;border-radius:999px;background:var(--sc-primary);
  color:var(--sc-primary-on);white-space:nowrap;font-size:11px}
.sc-mini__bar i{margin-inline-start:6px}
.sc-mini__week{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.sc-mini__week b{font-weight:var(--sc-fw-text);color:var(--sc-text-muted);font-size:10px;text-align:center}
.sc-mini__week > span{block-size:20px;border-radius:6px;background:var(--sc-surface-sunken)}
.sc-mini__week > span[data-busy]{background:var(--sc-selected-surface);box-shadow:inset 0 0 0 1px var(--sc-selected-border)}
.sc-mini__note{margin:0;color:var(--sc-text-muted);font-size:11px}
.sc-mini__people{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc-mini__people > div{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:10px;background:var(--sc-surface-sunken)}
.sc-mini__ava{inline-size:26px;block-size:26px;border-radius:999px;background:var(--sc-acc-100);color:var(--sc-acc-900);
  display:grid;place-items:center;font-size:10px;font-weight:var(--sc-fw-medium)}
.sc-mini__people b{font-weight:var(--sc-fw-medium);font-size:11px}
.sc-mini__people i{font-style:normal;color:var(--sc-text-muted);font-size:10px}
.sc-mini--price{justify-content:center}
.sc-mini__plan{color:var(--sc-text-muted);font-size:11px}
.sc-mini__price{font-size:32px;line-height:1;font-weight:var(--sc-fw-text)}
.sc-mini__price small{font-size:11px;color:var(--sc-text-muted);font-weight:var(--sc-fw-text)}
.sc-mini--price ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;color:var(--sc-ink-700)}
.sc-mini__figure{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.sc-mini__figure b{font-size:20px;font-weight:var(--sc-fw-medium);line-height:1}
.sc-mini__figure span{color:var(--sc-text-muted);font-size:11px}
.sc-mini--chart{justify-content:space-between}
.sc-mini__figure{display:flex;flex-direction:column}
.sc-mini__figure b{font-size:28px;line-height:1.1;font-weight:var(--sc-fw-text)}
.sc-mini__figure span{color:var(--sc-text-muted);font-size:11px}
/* Сверху у графика своя полоса под подсказку: над графиком она ложилась на подпись числа. */
.sc-mini__plot{position:relative;box-sizing:border-box;block-size:112px;padding-block-start:24px;min-inline-size:0;cursor:crosshair}
.sc-mini__bars{display:flex;align-items:flex-end;gap:2px;block-size:100%;min-inline-size:0}
/* Обёртка столбика НЕ красится: высоту несёт вложенный i, а залитая во всю высоту
   обёртка делала все дни одинаковыми. Последний день выделен самим столбиком. */
.sc-mini__bars > span{flex:1;min-inline-size:0}
.sc-mini__bar-w{min-inline-size:0}
.sc-mini__bars > span:last-child > i{background:var(--sc-acc-600)}

/* Строка под разговором ЗАНИМАЕТ МЕСТО всегда, а показывается в конце: появляясь,
   она растила секцию на свою высоту и страница дёргалась. Две строки на телефоне -
   поэтому высота задана под две, а не под одну. */
.sc-ln-talk__hint{margin:0;min-block-size:44px;opacity:0;
  transition:opacity var(--sc-dur-base) var(--sc-ease)}
.sc-ln-talk__hint[data-on="true"]{opacity:1}

/* --- поле ввода в разговоре --- */
.sc-ln-talk{flex-direction:column;justify-content:flex-end;gap:var(--sc-space-16)}
.sc-ln-talk__composer{display:flex;align-items:center;gap:var(--sc-space-12);padding:var(--sc-space-12) var(--sc-space-16);
  border:var(--sc-rule-w-hair) solid var(--sc-border-strong);border-radius:var(--sc-l-radius-sm);background:var(--sc-plane);min-block-size:56px}
.sc-ln-talk__draft{flex:1;min-inline-size:0;font-size:var(--sc-text-body-sm)}
.sc-ln-talk__ph{color:var(--sc-text-placeholder)}
.sc-ln-caret{display:inline-block;inline-size:1px;block-size:1.1em;background:var(--sc-text);margin-inline-start:2px;
  vertical-align:-2px;animation:sc-ln-caret 1s steps(1) infinite}
@keyframes sc-ln-caret{0%,50%{opacity:1}51%,100%{opacity:0}}
.sc-ln-talk__send{inline-size:36px;block-size:36px;border-radius:999px;background:var(--sc-primary);color:var(--sc-primary-on);
  display:grid;place-items:center;flex:none}

/* --- отзывы бегущей строкой --- */
.sc-ln-marquee{overflow:hidden;margin-block-start:var(--sc-space-16);
  /* rtl-ok: маска симметричная - оба края ряда уходят в прозрачность одинаково, зеркалить нечего. */
  mask-image:linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%)}
.sc-ln-marquee{position:relative}
/* Смещение накапливается покадрово в скрипте ряда: CSS-анимации здесь нет, иначе ряд
   нельзя было бы тащить и толкать стрелками без рывка. Знак берётся из --sc-dir. */
.sc-ln-marquee__track{translate:calc(var(--sc-dir) * var(--sc-ln-roff,0px) * -1) 0;
  touch-action:pan-y;cursor:grab;user-select:none}
.sc-ln-marquee__track:active{cursor:grabbing}
.sc-ln-marquee__track{display:flex;gap:var(--sc-space-16);inline-size:max-content}

.sc-ln-marquee .sc-ln-review{inline-size:380px;flex:none}
@media (prefers-reduced-motion:reduce){
  .sc-ln-marquee{mask-image:none;overflow:visible}
  .sc-ln-marquee__track{translate:none;inline-size:100%;flex-wrap:wrap;cursor:default}
  .sc-ln-marquee .sc-ln-review{inline-size:calc(33.333% - var(--sc-space-16))}
}

/* --- что входит: карточки с крупными цветными значками --- */
.sc-ln-inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sc-space-16);border:0}
.sc-ln-inc__card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sc-space-8);
  padding:var(--sc-space-24);border-radius:var(--sc-l-radius);background:var(--sc-l-surface);border:0;min-block-size:0}
.sc-ln-inc__ico{inline-size:48px;block-size:48px;border-radius:14px;display:grid;place-items:center;margin-block-end:var(--sc-space-4)}
.sc-ln-inc__card b{font-weight:var(--sc-fw-medium);font-size:var(--sc-text-body)}
.sc-ln-inc__card > span:last-child{color:var(--sc-text-muted);font-size:var(--sc-text-body-sm)}
.sc-ln-inc__card[data-tint="1"] .sc-ln-inc__ico{background:var(--sc-l-tint-1);color:var(--sc-l-tint-1-on)}
.sc-ln-inc__card[data-tint="2"] .sc-ln-inc__ico{background:var(--sc-l-tint-2);color:var(--sc-l-tint-2-on)}
.sc-ln-inc__card[data-tint="3"] .sc-ln-inc__ico{background:var(--sc-l-tint-3);color:var(--sc-l-tint-3-on)}
.sc-ln-inc__card[data-tint="4"] .sc-ln-inc__ico{background:var(--sc-l-tint-4);color:var(--sc-l-tint-4-on)}
.sc-ln-inc__card[data-tint="5"] .sc-ln-inc__ico{background:var(--sc-l-tint-5);color:var(--sc-l-tint-5-on)}
.sc-ln-inc__card[data-tint="6"] .sc-ln-inc__ico{background:var(--sc-l-tint-6);color:var(--sc-l-tint-6-on)}

/* ПАРА ВНУТРИ ТЁМНОЙ СЦЕНЫ. Светлая панель на тёмной секции обязана переопределить
   пару целиком: цвет текста, унаследованный от сцены, давал светлое по светлому. */
.sc-ln .sc-l-dark .sc-lv-rows,.sc-ln .sc-l-dark .sc-lv-side,.sc-ln .sc-l-dark .sc-lv-panel,
.sc-ln .sc-l-dark .sc-ln-checks__list,.sc-ln .sc-l-dark .sc-lv-row-item{color:var(--sc-text)}
.sc-ln .sc-l-dark .sc-lv-ln span,.sc-ln .sc-l-dark .sc-lv-big span{color:var(--sc-text-muted)}
.sc-ln .sc-l-dark .sc-lv-ln b,.sc-ln .sc-l-dark .sc-lv-big b{color:var(--sc-text)}
.sc-ln .sc-l-dark .sc-lv-diff--flat{color:var(--sc-text)}
.sc-ln .sc-l-dark .sc-lv-diff--good{color:var(--sc-success-on)}
.sc-ln .sc-l-dark .sc-lv-row-item[data-on="true"] .sc-lv-row-item__price{color:var(--sc-selected-on)}
.sc-ln .sc-l-dark .sc-lv-row-item__price{color:var(--sc-text-muted)}
/* Состояние несёт сам тумблер и подсветка строки: слово «плачу» ничего не добавляло. */
.sc-lv-row-item .sc-switch__state{display:none}

/* Карточки «что входит»: подпись переносится и живёт внутри карточки, высота
   выравнивается по ряду. Проверено на строке вдвое длиннее показанной. */
.sc-ln-inc__card{block-size:100%;white-space:normal}
.sc-ln-inc__card b,.sc-ln-inc__card > span:last-child{white-space:normal;overflow-wrap:anywhere;
  text-wrap:pretty;max-inline-size:100%}
.sc-ln-inc__ico{inline-size:64px;block-size:64px;border-radius:18px}
.sc-ln-inc__ico .sc-icon{font-size:40px;font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 40}

/* Лента клиентов: едет вверх без конца, стык скрыт дублем списка.
   Высота задана жёстко: без неё сорок плиток растянули бы весь ряд бенто. */
.sc-mini--flow{block-size:212px;overflow:hidden;padding-block:0;
  mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
/* Скорость меняется БЕЗ РЫВКА, поэтому лента едет не анимацией, а покадровым
   сдвигом из скрипта: смена animation-duration сохраняет пройденное ВРЕМЯ, а не
   пройденный путь, и лента прыгала при наведении. Здесь остаётся только запрет на
   собственный переход - иначе браузер сглаживал бы каждый кадр. */
.sc-mini__people[data-run="true"]{transition:none;will-change:translate}

/* Image Studio: обычная карусель - лента кадров едет вбок на ширину кадра (владелец
   04.10.2026). Номер кадра пишет скрипт в --at; знак инлайновой оси берётся из --sc-dir,
   поэтому в RTL лента едет в зеркальную сторону сама. data-snap - мгновенный перескок с
   копии первого кадра в хвосте обратно на настоящий первый. */
.sc-mini__shots{position:relative;inline-size:100%;block-size:100%;min-block-size:150px;
  overflow:hidden;background:var(--sc-l-plane)}
.sc-mini__strip{display:flex;inline-size:100%;block-size:100%;
  translate:calc(var(--sc-dir) * var(--at,0) * -100%) 0;
  transition:translate calc(var(--sc-dur-enter) * var(--sc-ln-mini-slow,1)) var(--sc-ease-enter)}
.sc-mini__strip[data-snap]{transition:none}
.sc-mini__strip img{flex:0 0 100%;inline-size:100%;block-size:100%;min-block-size:150px;object-fit:cover;border:0}
@media (prefers-reduced-motion:reduce){.sc-mini__strip{transition:none}}
html.atx-rm .sc-mini__strip{transition:none}

/* --- ШАПКА: четыре пункта, три раскрываются слоем поверх страницы --- */
.sc-ln .sc-l-header{background:var(--sc-l-plane);border-block-end-color:var(--sc-l-hairline)}
.sc-ln-nav{display:flex;align-items:center;gap:var(--sc-space-2);margin-inline-start:var(--sc-space-32)}
.sc-ln-nav__b{display:inline-flex;align-items:center;gap:var(--sc-space-4);min-block-size:44px;
  padding-inline:var(--sc-space-12);border:0;background:none;font:inherit;font-size:var(--sc-text-body-sm);
  color:var(--sc-text);border-radius:var(--sc-radius-pill);cursor:pointer;text-decoration:none;white-space:nowrap}
.sc-ln-nav__b:hover,.sc-ln-nav__b[aria-expanded="true"]{background:var(--sc-l-surface)}
.sc-ln-nav__b .sc-icon{font-size:18px;color:var(--sc-text-muted)}
/* Слой меню рисуется ПОВЕРХ страницы и не двигает то, что под шапкой (требование 7). */
.sc-ln-menu{position:absolute;inset-inline:0;inset-block-start:100%;background:var(--sc-surface);
  border-block-end:var(--sc-rule-w-hair) solid var(--sc-l-hairline);box-shadow:var(--sc-shadow-overlay);
  padding-block:var(--sc-space-24);z-index:var(--sc-z-popover,40)}
.sc-ln-menu__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sc-space-4) var(--sc-space-32)}
/* Отраслей 15 (SCRUM-576): двумя колонками слой выходил за 768 px экрана ноутбука. Больше десяти
   пунктов - три колонки; и слой не длиннее окна под шапкой (73 px), остальное прокручивается. */
.sc-ln-menu{max-block-size:calc(100dvh - 73px);overflow-y:auto;overscroll-behavior:contain}
.sc-ln-menu__grid:has(> :nth-child(11)){grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sc-space-16)}
.sc-ln-menu__i{display:flex;gap:var(--sc-space-16);align-items:center;padding:var(--sc-space-12);
  border-radius:var(--sc-l-radius-sm);text-decoration:none;color:inherit;min-block-size:var(--sc-tap-min)}
.sc-ln-menu__i:hover{background:var(--sc-l-plane)}
.sc-ln-menu__ico{flex:none;inline-size:44px;block-size:44px;border-radius:var(--sc-l-radius-sm);display:grid;
  place-items:center;background:var(--sc-l-surface);color:var(--sc-l-surface-on)}
.sc-ln-menu__ico .sc-icon{font-size:22px}
.sc-ln-menu__txt{display:flex;flex-direction:column;gap:var(--sc-space-2);min-inline-size:0}
.sc-ln-menu__txt b{font-weight:var(--sc-fw-medium)}
.sc-ln-menu__txt span{font-size:var(--sc-text-body-sm);color:var(--sc-text-muted)}
.sc-ln-only-mob{display:none}
.sc-ln-only-desk{display:inline-flex}

/* --- МОБИЛЬНОЕ МЕНЮ: слой во весь экран, кнопка действия приклеена к низу --- */
.sc-ln-mob{position:fixed;inset:0;z-index:var(--sc-z-modal,60);display:flex;
  background:color-mix(in srgb,var(--sc-ink-950) 44%,transparent)}
.sc-ln-mob__panel{inline-size:100%;display:flex;flex-direction:column;background:var(--sc-l-plane);
  color:var(--sc-l-plane-on);transition:translate var(--sc-dur-base) var(--sc-ease);touch-action:pan-y}
.sc-ln-mob__bar{position:relative;display:flex;align-items:center;gap:var(--sc-space-12);
  padding:var(--sc-space-16);border-block-end:var(--sc-rule-w-hair) solid var(--sc-l-hairline)}
.sc-ln-mob__bar .sc-l-brand{margin-inline-end:auto}
.sc-ln-mob__grip{position:absolute;inset-block-start:6px;inset-inline:0;margin-inline:auto;inline-size:44px;
  block-size:4px;border-radius:var(--sc-radius-pill);background:var(--sc-l-hairline)}
.sc-ln-mob__body{flex:1 1 auto;overflow:auto;padding:var(--sc-space-8) var(--sc-space-16) var(--sc-space-32)}
.sc-ln-mob__sec{border-block-end:var(--sc-rule-w-hair) solid var(--sc-l-hairline)}
.sc-ln-mob__head{display:flex;align-items:center;justify-content:space-between;inline-size:100%;min-block-size:60px;
  background:none;border:0;padding:0;font:inherit;font-size:var(--sc-text-h3);font-weight:var(--sc-fw-medium);
  color:var(--sc-text);cursor:pointer;text-align:start}
.sc-ln-mob__link{display:flex;align-items:center;justify-content:space-between;min-block-size:60px;
  font-size:var(--sc-text-h3);font-weight:var(--sc-fw-medium);text-decoration:none;color:var(--sc-text);
  border-block-end:var(--sc-rule-w-hair) solid var(--sc-l-hairline)}
.sc-ln-mob__list{display:flex;flex-direction:column;gap:var(--sc-space-4);padding-block-end:var(--sc-space-16)}
.sc-ln-mob__list .sc-ln-menu__i{padding-inline:0}
.sc-ln-mob__lang{padding-block-start:var(--sc-space-24)}
/* Приклеенная строка стоит в потоке и резервирует место под собой (требование 6):
   кнопка «Open app» не уезжает за край ни при какой длине списка. */
.sc-ln-mob__foot{flex:none;padding:var(--sc-space-16);background:var(--sc-surface);
  border-block-start:var(--sc-rule-w-hair) solid var(--sc-l-hairline);box-shadow:var(--sc-shadow-sticky)}
@container (max-width:1020px){
  .sc-ln-nav{display:none}
  .sc-ln-only-desk{display:none}
  .sc-ln-only-mob{display:inline-flex}
  .sc-ln .sc-l-header__row{flex-wrap:nowrap}
}
@container (max-width:560px){
  .sc-ln .sc-l-header__end .sc-l-lang{display:none}
}

/* --- стрелки на карточке «Images»: появляются при наведении, автосмена встаёт --- */
.sc-mini__arrows{position:absolute;inset-block:0;inset-inline:0;display:flex;align-items:center;
  justify-content:space-between;padding-inline:var(--sc-space-4);opacity:0;pointer-events:none;
  transition:opacity var(--sc-dur-fast) var(--sc-ease)}
.sc-mini__shots:hover .sc-mini__arrows,.sc-mini__arrows:focus-within{opacity:1;pointer-events:auto}
@media (hover:none){.sc-mini__arrows{opacity:1;pointer-events:auto}}
.sc-mini__arrow{inline-size:44px;block-size:44px;display:grid;place-items:center;padding:0;border:0;
  background:none;cursor:pointer}
.sc-mini__arrow .sc-icon{inline-size:32px;block-size:32px;display:grid;place-items:center;font-size:20px;
  border-radius:var(--sc-radius-pill);background:var(--sc-surface);color:var(--sc-text);box-shadow:var(--sc-shadow-sticky)}

/* --- подвал: строка соцсетей. Знаки площадок одноцветные, без подписей (05.10.2026, решение
   владельца); цель нажатия - 44, знак - 22, цвет - текущий, ярче при наведении --- */
.sc-ln-foot__social{display:flex;flex-wrap:wrap;gap:var(--sc-space-8);margin-block-start:var(--sc-space-32)}
.sc-ln-foot__social a{display:inline-flex;align-items:center;justify-content:center;
  min-inline-size:var(--sc-tap-min);min-block-size:var(--sc-tap-min);border-radius:var(--sc-radius-pill);
  color:inherit;opacity:.72;transition:opacity var(--sc-dur-fast,120ms) var(--sc-ease,ease),background-color var(--sc-dur-fast,120ms) var(--sc-ease,ease)}
.sc-ln-foot__social a:hover,.sc-ln-foot__social a:focus-visible{opacity:1;background:var(--sc-dark-line,rgba(255,255,255,.12))}
.sc-ln-foot__ico{inline-size:22px;block-size:22px;fill:currentColor}
.sc-ln-inc__card[data-tint="7"] .sc-ln-inc__ico{background:var(--sc-l-tint-7);color:var(--sc-l-tint-7-on)}
.sc-ln-inc__card[data-tint="8"] .sc-ln-inc__ico{background:var(--sc-l-tint-8);color:var(--sc-l-tint-8-on)}

/* --- ниши, второй шаг: карточки «Build your ... business» --- */
.sc-ln-drill__title{font-family:var(--sc-font-display);font-weight:var(--sc-fw-display,400);font-size:clamp(28px,3.2vw,44px);
  line-height:1.08;letter-spacing:-.015em;margin:0}
.sc-ln-drill__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--sc-space-12)}
/* ТАБЛЕТКА: форма выбираемого. Кегль подписи - как у направлений первого шага и
   меньше, а не крупнее: это второй уровень. Подпись переносится (немецкая строка
   длиннее английской), но таблетка остаётся таблеткой - скругление 999px. */
.sc-ln-drill__biz{display:flex;align-items:center;gap:var(--sc-space-12);min-block-size:64px;font:inherit;
  padding-block:var(--sc-space-16);padding-inline:var(--sc-space-24) var(--sc-space-8);text-align:start;
  background:var(--sc-l-surface);color:var(--sc-l-surface-on);border:var(--sc-rule-w-hair) solid transparent;
  border-radius:var(--sc-radius-pill);cursor:pointer;transition:background var(--sc-dur-fast) var(--sc-ease)}
.sc-ln-drill__biz:hover{background:var(--sc-l-surface-2)}
.sc-ln-drill__biz-t{flex:1;min-inline-size:0;font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);
  line-height:var(--sc-lh-h3);text-wrap:pretty}
.sc-ln-drill__biz .sc-ln-drill__go{inline-size:32px;block-size:32px;background:var(--sc-l-plane)}
.sc-ln-drill__biz:hover .sc-ln-drill__go{background:var(--sc-surface)}

/* --- разговор: коробка фиксирована, прокрутка ВНУТРИ неё --- */
.sc-ln-talk{block-size:520px;min-block-size:0}
/* Полосы прокрутки в карточках и диалогах нет ВООБЩЕ: старые реплики уходят вверх
   за границу и растворяются в затухании. Прокрутка остаётся программной - лента
   сама подкручивается к последней реплике. */
.sc-ln-talk__flow{flex:1;min-block-size:0;overflow:hidden;display:block;scrollbar-width:none;
  mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 100%)}
.sc-ln-talk__inner{display:flex;flex-direction:column;gap:var(--sc-space-8);margin-block-start:auto;min-block-size:100%;
  justify-content:flex-end}
/* Высота задана числом, а не процентом: у карточки-родителя высота не определена,
   и block-size:100% превращался в auto - переписка растила карточку до 1100px. */
.sc-mini--chat{block-size:212px;min-block-size:212px;overflow:hidden;justify-content:flex-start;scrollbar-width:none;
  mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 100%)}
.sc-mini__stack{display:flex;flex-direction:column;gap:6px;margin-block-start:auto}

/* --- живая карточка правки страницы --- */
.sc-mini__caret{display:inline-block;inline-size:1px;block-size:1em;background:var(--sc-text);
  margin-inline-start:1px;vertical-align:-1px;animation:sc-ln-caret 1s steps(1) infinite}
.sc-mini__input{min-block-size:26px}
.sc-mini__input--tall{block-size:54px;min-block-size:54px;overflow:hidden}
.sc-mini__chips > span{transition:background var(--sc-dur-fast) var(--sc-ease),color var(--sc-dur-fast) var(--sc-ease)}
.sc-mini__chips > span[data-press]{background:var(--sc-selected-surface);color:var(--sc-selected-on);border-color:transparent}
.sc-ln .sc-mini__save,.sc-ln .sc-mini__btn,.sc-ln .sc-ln-talk__send{background:var(--sc-dark-bg);color:var(--sc-dark-on)}
.sc-ln .sc-mini__side > span[data-on]{background:var(--sc-l-surface);color:var(--sc-l-surface-on)}
.sc-ln .sc-mini__b--me{background:var(--sc-dark-bg);color:var(--sc-dark-on)}
.sc-ln .sc-mini__b--them{background:var(--sc-l-surface);color:var(--sc-l-surface-on)}

/* --- липкое поле внизу страницы --- */
.sc-ln-dock{position:fixed;inset-block-end:0;inset-inline:0;z-index:var(--sc-z-sticky,30);display:flex;
  justify-content:center;pointer-events:none;padding:var(--sc-space-16);
  padding-block-end:max(var(--sc-space-16),env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;translate:0 16px;
  transition:opacity var(--sc-dur-base) var(--sc-ease),translate var(--sc-dur-base) var(--sc-ease),visibility 0s linear var(--sc-dur-base)}
.sc-ln-dock[data-on="true"]{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.sc-ln-dock > *{pointer-events:auto}
.sc-ln-dock__bar{display:flex;align-items:center;gap:var(--sc-space-16);inline-size:min(560px,100%);min-block-size:64px;
  padding-block:var(--sc-space-8);padding-inline:var(--sc-space-24) var(--sc-space-8);font:inherit;text-align:start;
  background:var(--sc-surface);color:var(--sc-text);border:var(--sc-rule-w-hair) solid var(--sc-hairline);
  border-radius:var(--sc-radius-pill);box-shadow:var(--sc-shadow-overlay);cursor:pointer}
.sc-ln-dock__bar:hover{border-color:var(--sc-border-strong)}
.sc-ln-dock__ph{flex:1;min-inline-size:0;color:var(--sc-text-muted);font-size:var(--sc-text-body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-ln-dock__go{flex:none;inline-size:48px;block-size:48px;border-radius:var(--sc-radius-pill);display:grid;
  place-items:center;background:var(--sc-dark-bg);color:var(--sc-dark-on)}
/* Развёрнутое поле - только само поле (владелец 04.10.2026): ни белой рамки-подложки
   вокруг, ни чернильного кольца фокуса поверх бегущего. Тень переехала на кольцо, чтобы
   поле не сливалось со страницей; видимым признаком фокуса остаются само кольцо и каретка. */
.sc-ln-dock__full{inline-size:min(720px,100%);background:none;padding:0}
.sc-ln-dock__full .sc-l-ring{box-shadow:var(--sc-shadow-overlay)}
.sc-ln-dock__full .sc-l-ring:has(.sc-l-input:focus-visible){outline:none}
.sc-ln-dock__full .sc-ln-quick-row{display:none}
.sc-ln-dock__full .sc-ln-field{max-inline-size:none}
/* Место под липкое поле зарезервировано в подвале: оно не перекрывает содержимое. */
.sc-ln .sc-ln-foot{padding-block-end:112px}
@container (max-width:640px){.sc-ln-dock{padding-inline:var(--sc-space-12)}.sc-ln-dock__bar,.sc-ln-dock__full{inline-size:100%}}
@media (prefers-reduced-motion:reduce){.sc-ln-dock{transition:none;translate:none}}


/* ================= ЖИВЫЕ КАРТОЧКИ И КАДРЫ ================= */

/* Общая вертикальная шторка: единственный приём смены кадра на всей странице. */
.sc-ln-wipe{position:relative;inline-size:100%;block-size:100%;overflow:hidden;background:var(--sc-l-plane)}
.sc-ln-wipe img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:1}
.sc-ln-wipe__o{animation:sc-ln-wipe 520ms var(--sc-ease)}
@keyframes sc-ln-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.sc-ln-wipe__o{animation:none}}

/* Кадр секции «Launch it, then grow it». НА НАВЕДЕНИЕ НЕ ОТВЕЧАЕТ: снимок связан с
   открытым пунктом списка, и это всё, что он сообщает. Прежний выезжающий макет и
   отъезд картинки вглубь только дёргали кадр. */
.sc-ln-grow__frame{position:relative;block-size:clamp(280px,34cqi,420px);overflow:hidden}
/* Строка списка отвечает на наведение: подложка светлеет, строка сдвигается по
   инлайновой оси (знак берётся из --sc-dir, в RTL сама едет в другую сторону). */
.sc-ln-grow__item{transition:background var(--sc-dur-fast) var(--sc-ease),translate var(--sc-dur-fast) var(--sc-ease),
  border-color var(--sc-dur-fast) var(--sc-ease)}
.sc-ln-grow__item:hover{background:var(--sc-l-surface);border-color:var(--sc-l-surface-2);translate:calc(var(--sc-dir) * 4px) 0}
@media (prefers-reduced-motion:reduce){.sc-ln-grow__item{transition:none}}

/* Слайд витрины стал кнопкой: сброс оформления кнопки, подсказка о нажатии. */
.sc-ln-photo{appearance:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:start;cursor:pointer}
.sc-ln-photo__go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-block-size:44px;
  padding-inline:var(--sc-space-16);border-radius:var(--sc-radius-pill);background:rgba(255,255,255,.92);
  color:var(--sc-ink-950);font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);
  /* Подпись на телефоне (касание) - тоже в одну строку, как ярлык у курсора на компьютере. */
  white-space:nowrap;text-wrap:nowrap;text-wrap-mode:nowrap;inline-size:max-content;
  /* В углу кадра, а не в строке с заголовком: в строке подпись в одну строку отнимала у
     заголовка ширину и сжимала его в три строки. */
  position:absolute;inset-block-start:var(--sc-space-24);inset-inline-end:var(--sc-space-24)}
.sc-ln-photo:hover .sc-ln-photo__go{background:#fff}
/* Решение владельца 03.10.2026: постоянной подписи на снимке нет совсем (на касании
   нажимается сам снимок), а на телефоне нет и малой картинки внутри. */
.sc-ln-photo__go{display:none}
/* Телефон: малая карточка сайта снова видна (владелец 05.10.2026) - над заголовком, в столбец. */
@container (max-width:640px){.sc-ln-photo__in{flex-direction:column;align-items:flex-start;gap:var(--sc-space-12);padding:var(--sc-space-16)}
  /* Телефон (решение владельца 03.10.2026): кадр на 50% выше, тень под текстом гуще и выше. */
  /* Кадр выше (4:5): в столбец над заголовком встаёт малая карточка сайта (05.10.2026). */
  .sc-ln-photo img.sc-ln-photo__bg{aspect-ratio:4 / 5}
  .sc-ln-photo__veil{block-size:85%;background:linear-gradient(to bottom,rgba(18,19,23,0),rgba(18,19,23,.88))}}

/* ЯРЛЫК У КУРСОРА. Подпись не стоит в углу кадра, а едет за указателем и возникает
   увеличением из ничего. Положение считается от ЛОГИЧЕСКОГО начала кадра, поэтому в
   письме справа налево ярлык едет так же; смещение на 14/12 - чтобы ярлык не лежал
   ровно под остриём. */
.sc-ln-photo__cue{position:absolute;z-index:3;pointer-events:none;
  inset-inline-start:var(--cx,0px);inset-block-start:var(--cy,0px);
  margin-inline-start:calc(var(--cw,0px) / -2);margin-block-start:calc(var(--ch,0px) / -2);
  display:inline-flex;align-items:center;gap:8px;min-block-size:40px;padding-inline:var(--sc-space-16);
  border-radius:var(--sc-radius-pill);background:#fff;color:var(--sc-ink-950);white-space:nowrap;
  /* Подпись всегда в одну строку: у края снимка абсолютной плашке не хватает места, и браузер
     сжимал её по доступной ширине - текст переносился. Ширина - по содержимому, не по месту. */
  inline-size:max-content;max-inline-size:none;flex-wrap:nowrap;
  /* body наследует `text-wrap:pretty`, и в свежем Chrome это перебивало `white-space:nowrap`
     у подписи - перенос был у владельца и не повторялся в старом движке. Запрет - явно. */
  text-wrap:nowrap;text-wrap-mode:nowrap;
  font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);box-shadow:var(--sc-shadow-overlay);
  opacity:0;scale:.55;transform-origin:50% 50%;
  transition:opacity var(--sc-dur-base) var(--sc-ease),scale var(--sc-dur-base) var(--sc-ease)}
.sc-ln-photo__cue[data-on="true"]{opacity:1;scale:1}
/* Пока ярлык ведёт себя как курсор, родная стрелка над кадром лишняя. */
@media (hover:hover){
  .sc-ln-photo{cursor:none}
  .sc-ln-photo__go{display:none}
}
/* На касании наведения нет: там ярлыка не будет никогда, и подпись остаётся на
   месте обычной таблеткой. */
@media (hover:none){.sc-ln-photo__cue{display:none}}
@media (prefers-reduced-motion:reduce){.sc-ln-photo__cue{transition:none;scale:1}}

/* Окна записи: занимаются по одному, последнее пульсирует. Признаков два -
   пульсация и точка внутри окна, плюс строка словами под сеткой. */
.sc-mini__week > span[data-busy]{animation:sc-mini-pop 260ms var(--sc-ease);display:grid;place-items:center}
.sc-mini__week > span[data-busy] > i{inline-size:4px;block-size:4px;border-radius:999px;background:var(--sc-selected-on);opacity:.7}
.sc-mini__week > span[data-now]{animation:sc-mini-now 1.8s var(--sc-ease) infinite}
@keyframes sc-mini-pop{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
@keyframes sc-mini-now{0%,100%{box-shadow:inset 0 0 0 1px var(--sc-selected-border)}
  50%{box-shadow:inset 0 0 0 2px var(--sc-primary)}}
@media (prefers-reduced-motion:reduce){.sc-mini__week > span[data-busy],.sc-mini__week > span[data-now]{animation:none}}

/* Отзывы: под указателем подсвечивается КОЛОНКА (ловится вся высота графика, а не
   синий столбик), остальные приглушаются; встаёт вертикальный прицел и подсказка с
   датой и числом. Положение прицела и подсказки пишет скрипт логическим отступом от
   начала строки - в RTL зеркалится само. */
.sc-mini__bar-w{position:relative;flex:1;display:flex;align-items:flex-end;block-size:100%}
.sc-mini__bar-w i{inline-size:100%;background:var(--sc-acc-300);border-radius:3px 3px 0 0;
  transition:background var(--sc-dur-fast) var(--sc-ease),opacity var(--sc-dur-fast) var(--sc-ease)}
.sc-mini__bars[data-hot] > span:not([data-on]) > i{opacity:.45}
.sc-mini__bar-w[data-on] > i{background:var(--sc-acc-600);opacity:1}
.sc-mini__bars[data-hot] > span:last-child > i{background:var(--sc-acc-300)}
.sc-mini__bars[data-hot] > span:last-child[data-on] > i{background:var(--sc-acc-600)}
.sc-mini__cross{position:absolute;inset-block:22px 0;inset-inline-start:var(--x,0px);inline-size:0;
  border-inline-start:1px dashed var(--sc-ink-500);pointer-events:none;opacity:0;
  transition:opacity var(--sc-dur-fast) var(--sc-ease)}
.sc-mini__tip{position:absolute;inset-block-start:0;inset-inline-start:var(--tx,0px);
  translate:calc(var(--sc-dir) * -50%) 0;font-style:normal;font-size:10px;white-space:nowrap;
  background:var(--sc-dark-bg);color:var(--sc-dark-on);border-radius:var(--sc-radius-pill);padding:3px 8px;
  opacity:0;transition:opacity var(--sc-dur-fast) var(--sc-ease);pointer-events:none}
.sc-mini__plot[data-hot] .sc-mini__cross,.sc-mini__plot[data-hot] .sc-mini__tip{opacity:1}

/* Находимость: ответ ИИ проявляется на зарезервированном месте, строки выдачи
   переставляются сдвигом по блоковой оси. */
.sc-mini--found{gap:8px}
.sc-mini__ai{border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:10px;padding:8px 10px;
  display:flex;flex-direction:column;gap:2px;min-block-size:62px;background:var(--sc-surface);
  opacity:0;transition:opacity var(--sc-dur-slow) var(--sc-ease)}
.sc-mini__ai[data-on="true"]{opacity:1}
.sc-mini__ai-l{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--sc-acc-700)}
.sc-mini__ai p{margin:0;font-size:11px;line-height:1.35}
.sc-mini__ai-s{font-size:10px;color:var(--sc-text-muted)}
.sc-mini__q{display:flex;align-items:center;gap:6px;min-block-size:28px;padding-inline:10px;
  border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:999px;font-size:11px;color:var(--sc-text)}
.sc-mini__q .sc-icon{font-size:14px;color:var(--sc-text-muted)}
.sc-mini__res{position:relative;block-size:120px}
.sc-mini__res-i{position:absolute;inset-inline:0;inset-block-start:0;block-size:26px;padding-inline:8px;
  display:flex;align-items:center;gap:6px;border-radius:8px;background:var(--sc-surface-sunken);
  opacity:0;transition:translate var(--sc-dur-slow) var(--sc-ease),opacity var(--sc-dur-base) var(--sc-ease)}
.sc-mini__res-i[data-on="true"]{opacity:1}
.sc-mini__res-i b{font-size:10px;font-weight:var(--sc-fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-mini__res-i span{font-size:9px;color:var(--sc-text-muted);white-space:nowrap}
.sc-mini__res-i[data-mine]{background:var(--sc-selected-surface);box-shadow:inset 0 0 0 1px var(--sc-selected-border)}
.sc-mini__res-i em{margin-inline-start:auto;font-style:normal;font-size:9px;background:var(--sc-dark-bg);
  color:var(--sc-dark-on);border-radius:999px;padding:2px 6px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.sc-mini__res-i,.sc-mini__ai{transition:none}}

/* ВДВОЕ МЕДЛЕННЕЕ - ВСЁ ДВИЖЕНИЕ ВНУТРИ КАРТОЧЕК БЕНТО (владелец 04.10.2026). Множитель
   один, `--sc-ln-mini-slow` в tokens/landing.css; паузы, печать, ленты и автосмену им же
   растягивает скрипт. Здесь - то, что крутит сам CSS: появление реплик и окон, точки
   «печатает», каретка, нажатие чипа, перестановка выдачи. «Меньше анимаций» по-прежнему
   сжимает всё до 1мс правилом токенов движения. */
.sc-ln-bento .sc-mini--chat .sc-mini__b{animation-duration:calc(var(--sc-dur-base) * var(--sc-ln-mini-slow,1))}
.sc-ln-bento .sc-mini__typing i{animation-duration:calc(1s * var(--sc-ln-mini-slow,1))}
.sc-ln-bento .sc-mini__typing i:nth-child(2){animation-delay:calc(.15s * var(--sc-ln-mini-slow,1))}
.sc-ln-bento .sc-mini__typing i:nth-child(3){animation-delay:calc(.3s * var(--sc-ln-mini-slow,1))}
.sc-ln-bento .sc-mini__caret{animation-duration:calc(1s * var(--sc-ln-mini-slow,1))}
.sc-ln-bento .sc-mini__chips > span{transition-duration:calc(var(--sc-dur-fast) * var(--sc-ln-mini-slow,1))}
.sc-ln-bento .sc-mini__week > span[data-busy]{animation-duration:calc(260ms * var(--sc-ln-mini-slow,1))}
.sc-ln-bento .sc-mini__week > span[data-now]{animation-duration:calc(1.8s * var(--sc-ln-mini-slow,1))}
.sc-ln-bento .sc-mini__res-i{transition-duration:calc(var(--sc-dur-slow) * var(--sc-ln-mini-slow,1)),calc(var(--sc-dur-base) * var(--sc-ln-mini-slow,1))}
.sc-ln-bento .sc-mini__ai{transition-duration:calc(var(--sc-dur-slow) * var(--sc-ln-mini-slow,1))}

/* Свёрнутое липкое поле показывает первую строку написанного, а не подсказку. */
.sc-ln-dock__ph[data-filled]{color:var(--sc-text)}


/* ================= ТЕЛЕФОН 390 ================= */

/* Слой липкого поля рисуется порталом в body. Внутри страницы он бы прижался к
   низу ВСЕЙ страницы: у корня container-type, а он делает корень содержащим
   блоком для fixed. Здесь слой сам занимает экран, а поле прижато к его низу. */
/* Слою нужен класс .sc-ln - оттуда токены и гарнитура, - но заливку плоскости он
   брать не должен: слой растянут на весь экран и закрывал страницу белой пеленой,
   сквозь которую видно было только само поле. */
/* Слой выше круглой кнопки виджета доступности (владелец 04.10.2026): развёрнутое поле на
   телефоне во всю ширину, и кнопка ложилась поверх кнопки «Start free». */
.sc-ln-dockroot{position:fixed;inset:0;pointer-events:none;z-index:var(--sc-z-dock);background:none}
.sc-ln-dockroot .sc-ln-dock{position:absolute;inset-block-end:0;inset-inline:0}
/* Слой поля выше кнопки доступности, но закрыть её свёрнутой полосой нельзя: виджет обязан
   оставаться достижимым. Там, где полоса доходит до угла (уже ~760px), кнопка на время
   показа полосы поднимается над ней. Развёрнутое поле - короткое состояние, его закрывает
   Esc или щелчок мимо, и тогда оно лежит поверх кнопки, как просил владелец. */
@media (max-width:760px){
  .atx-root{transition:inset-block-end var(--sc-dur-base) var(--sc-ease)}
  body:has(.sc-ln-dock[data-on="true"][data-open="false"]) .atx-root{
    inset-block-end:calc(64px + var(--sc-space-16) * 2)}
}

/* Панель меню: кнопка и язык одной колонкой, обе прижаты к низу. */
.sc-ln-mob__foot{display:flex;flex-direction:column;gap:var(--sc-space-12)}
.sc-ln-mob__foot .sc-l-lang{inline-size:100%}
.sc-ln-mob__body{scrollbar-width:none}
.sc-ln-mob__body::-webkit-scrollbar,.sc-ln-talk__flow::-webkit-scrollbar,.sc-mini--chat::-webkit-scrollbar{display:none}

/* Подвал аккордеоном. Ссылка - цель нажатия 44px, а не строка в 18px. */
.sc-ln-foot__acc{display:flex;flex-direction:column}
.sc-ln-foot__sec{border-block-end:var(--sc-rule-w-hair) solid var(--sc-l-hairline)}
.sc-ln-foot__head{display:flex;align-items:center;justify-content:space-between;inline-size:100%;min-block-size:56px;
  background:none;border:0;padding:0;font:inherit;color:inherit;font-weight:var(--sc-fw-medium);cursor:pointer;text-align:start}
.sc-ln-foot__acc ul{list-style:none;margin:0;padding:0 0 var(--sc-space-12);display:flex;flex-direction:column}
.sc-ln-foot__acc a{display:flex;align-items:center;min-block-size:44px}
.sc-ln-foot--dark .sc-ln-foot__sec{border-block-end-color:var(--sc-dark-line)}

@container (max-width:640px){
  /* Карусель: один кадр в ширину экрана, листается пальцем, стрелок нет. */
  .sc-ln-photos__track{--l-photo:calc(100cqi - 24px)}
  .sc-ln-photos + .sc-l-controls .sc-iconbtn{display:none}
  .sc-ln-photo__t{font-size:26px}
  .sc-ln-photo__mock{inline-size:min(180px,46%)}

  /* Диалоги ниже десктопных, лента внутри, полос прокрутки нет. */
  .sc-ln-talk{block-size:400px}
  .sc-mini--chat{block-size:176px;min-block-size:176px}
  .sc-mini--flow{block-size:176px}
  .sc-ln-grow__frame{block-size:240px}

  /* Экономия: список сверху, панель итога снизу (порядок в разметке), кнопка
     во всю ширину. Итог не липкий: на телефоне липкая панель съедает экран. */
  .sc-lv-side{position:static}
  .sc-lv-side .sc-btn,.sc-ln-cta .sc-btn,.sc-lv-panel .sc-btn{inline-size:100%}

  /* Отзывы: карточка уже, строка одна (вторую снимает разметка). */
  .sc-ln-marquee .sc-ln-review{inline-size:300px}
  /* rtl-ok: маска симметричная - оба края ряда уходят в прозрачность одинаково, зеркалить нечего. */
  .sc-ln-marquee{mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}

  /* Поле первого экрана: кнопка занимает всю оставшуюся ширину - её цель
     нажатия на телефоне важнее изящества, а длинная английская подпись
     переносится внутри кнопки, а не обрезается. */
  .sc-ln-fieldrow .sc-btn{flex:1;inline-size:auto;max-inline-size:none}
  /* Телефон (владелец 03.10.2026): текст поля начинается по левому краю кубика, без лишних
     полей сверху и слева. Уход низа в прозрачность - общее правило поля, выше. */
  .sc-ln-input{padding-block:0 var(--sc-space-12);padding-inline-start:0}
  .sc-ln-field,.sc-ln-field--wide{max-inline-size:none}

  /* Ни один блок не требует горизонтальной прокрутки. */
  .sc-ln-bento,.sc-ln-inc,.sc-ln-cells,.sc-ln-drill__cards{grid-template-columns:1fr}
  .sc-ln-wrap,.sc-l-container{overflow-x:clip}

  /* Бенто на телефоне: карточки одна под другой во всю ширину, растяжки на 4/6/8/12
     колонок сняты - иначе сетка создаёт неявные колонки и уводит карточки в строку. */
  .sc-ln-bento__cell{grid-column:auto;padding:var(--sc-space-16);min-block-size:0;gap:var(--sc-space-12)}
  .sc-ln-bento__vis{min-block-size:0}

  /* Куски кабинета внутри карточек. Ширины, посчитанные под 1440, на 390 не влезают:
     боковая колонка уже, подписи переносятся, ничего не обрезается. */
  .sc-mini__side{inline-size:92px;padding:6px}
  .sc-mini__field{padding:8px}
  .sc-mini__rows b{inline-size:auto;min-inline-size:52px}
  .sc-mini__rows > div{gap:6px}
  .sc-mini__chips{flex-wrap:wrap}
  .sc-mini__b{max-inline-size:88%}
}

/* Значки «что входит»: проявляются по одному, когда секция вошла в кадр. Один раз,
   не по кругу - это вход, а не мигание. Задержка на карточку, шаг 60мс.
   Под указателем значок чуть подрастает и клонится - отклик, а не движение само по
   себе. При «меньше анимаций» значки просто стоят на месте. */
.sc-ln-inc__ico{transition:scale var(--sc-dur-base) var(--sc-ease),rotate var(--sc-dur-base) var(--sc-ease)}
.sc-ln-inc[data-in="true"] .sc-ln-inc__ico{animation:sc-ln-ico-in 420ms var(--sc-ease) both,
  sc-ln-ico-live 3.6s var(--sc-ease) 420ms infinite}
.sc-ln-inc[data-in="false"] .sc-ln-inc__ico{opacity:0}
.sc-ln-inc__card:nth-child(1) .sc-ln-inc__ico{animation-delay:0ms,420ms}
.sc-ln-inc__card:nth-child(1) .sc-ln-inc__ico .sc-icon{animation-delay:420ms}
.sc-ln-inc__card:nth-child(2) .sc-ln-inc__ico{animation-delay:60ms,600ms}
.sc-ln-inc__card:nth-child(2) .sc-ln-inc__ico .sc-icon{animation-delay:600ms}
.sc-ln-inc__card:nth-child(3) .sc-ln-inc__ico{animation-delay:120ms,780ms}
.sc-ln-inc__card:nth-child(3) .sc-ln-inc__ico .sc-icon{animation-delay:780ms}
.sc-ln-inc__card:nth-child(4) .sc-ln-inc__ico{animation-delay:180ms,960ms}
.sc-ln-inc__card:nth-child(4) .sc-ln-inc__ico .sc-icon{animation-delay:960ms}
.sc-ln-inc__card:nth-child(5) .sc-ln-inc__ico{animation-delay:240ms,1140ms}
.sc-ln-inc__card:nth-child(5) .sc-ln-inc__ico .sc-icon{animation-delay:1140ms}
.sc-ln-inc__card:nth-child(6) .sc-ln-inc__ico{animation-delay:300ms,1320ms}
.sc-ln-inc__card:nth-child(6) .sc-ln-inc__ico .sc-icon{animation-delay:1320ms}
.sc-ln-inc__card:nth-child(7) .sc-ln-inc__ico{animation-delay:360ms,1500ms}
.sc-ln-inc__card:nth-child(7) .sc-ln-inc__ico .sc-icon{animation-delay:1500ms}
.sc-ln-inc__card:nth-child(8) .sc-ln-inc__ico{animation-delay:420ms,1680ms}
.sc-ln-inc__card:nth-child(8) .sc-ln-inc__ico .sc-icon{animation-delay:1680ms}
@keyframes sc-ln-ico-in{from{opacity:0;scale:.72;translate:0 10px}to{opacity:1;scale:1;translate:0 0}}
/* Дыхание: подъём на 3 точки и рост на 4 процента. Больше - и сетка начинает
   мельтешить, меньше - незаметно. Глиф внутри клонится на полтора градуса. */
@keyframes sc-ln-ico-live{0%,72%,100%{translate:0 0;scale:1}36%{translate:0 -3px;scale:1.04}}
@keyframes sc-ln-glyph-live{0%,72%,100%{rotate:0deg}36%{rotate:-1.5deg}}
.sc-ln-inc[data-in="true"] .sc-ln-inc__ico .sc-icon{animation:sc-ln-glyph-live 3.6s var(--sc-ease) 420ms infinite}
.sc-ln-inc__card:hover .sc-ln-inc__ico{scale:1.07;rotate:-4deg}
@media (prefers-reduced-motion:reduce){
  .sc-ln-inc[data-in] .sc-ln-inc__ico,.sc-ln-inc[data-in] .sc-ln-inc__ico .sc-icon{animation:none;opacity:1}
  .sc-ln-inc__ico{transition:none}
  .sc-ln-inc__card:hover .sc-ln-inc__ico{scale:1;rotate:0deg}
}

/* Заголовок по буквам: каждая проявляется по очереди и падает сверху. Приём стоит
   через одну секцию - на каждой он стал бы манерой страницы, а не акцентом.
   inline-block обязателен: у строчного элемента translate не работает. */
.sc-ln-keys{display:inline}
/* Слово целое: перенос только по пробелам между словами. Буква внутри - inline-block
   (без него не работает сдвиг), поэтому без обёртки слова каждая граница букв была бы
   законным местом переноса. */
.sc-ln-keys__w{display:inline-block;white-space:nowrap}
.sc-ln-keys__w > span{display:inline-block}
.sc-ln-keys[data-on="false"] .sc-ln-keys__w > span{opacity:0}
.sc-ln-keys[data-on="true"] .sc-ln-keys__w > span{
  animation:sc-ln-key 380ms var(--sc-ease) both;animation-delay:calc(var(--k,0) * 34ms)}
@keyframes sc-ln-key{from{opacity:0;translate:0 -.38em}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){
  .sc-ln-keys__w > span{animation:none;opacity:1;translate:none}
}

/* Табло: у каждого разряда свой столбик 0..9, в окошке видна одна цифра.
   Высота окошка и шаг ленты - одна величина, иначе цифра встаёт между строк.
   1.1em, а не 1em: у антиквы цифры выше собственного кегля, и при ровно 1em у них
   срезало макушки. */
.sc-ln-odo{--h:1.1em;display:inline-flex;align-items:flex-start;line-height:1}
.sc-ln-odo > [aria-hidden]{display:inline-flex;align-items:flex-start}
.sc-ln-odo__s{display:inline-block;block-size:var(--h)}
.sc-ln-odo__d{display:inline-block;block-size:var(--h);overflow:hidden}
.sc-ln-odo__r{display:flex;flex-direction:column}
.sc-ln-odo__r > span{display:block;block-size:var(--h);
  /* Цифры одной ширины: пропорциональные знаки дёргали бы столбик по горизонтали
     на каждом обороте. */
  font-variant-numeric:tabular-nums}
/* Конечное состояние - столбик стоит на своей цифре. Столбики собирает скрипт, а сервер
   печатает одно число, поэтому без скрипта и при заглушенной анимации оно просто читается. */
.sc-ln-odo__r{translate:0 calc(var(--d,0) * var(--h) * -1);
  transition:translate calc(1100ms + var(--i,0) * 160ms) cubic-bezier(.12,.9,.2,1)}
/* Отмотка назад: на целые обороты выше своей цифры. Лента поэтому едет ВНИЗ -
   цифры входят в окошко сверху, как на механическом табло. */
.sc-ln-odo[data-on="false"] .sc-ln-odo__r{
  translate:0 calc((var(--d,0) + 10 * var(--n,3)) * var(--h) * -1);transition:none}
@media (prefers-reduced-motion:reduce){.sc-ln-odo__r{transition:none}}


/* Значки вынесены в parts/icons.css: ими пользуются лендинг, мастер и
   регистрация, а этот файл подключается только на лендинге. */