/*
 * СОБРАН ИЗ landing.css - НЕ ПРАВИТЬ РУКАМИ. Пересборка: php tools/build-chrome-css.php
 * Стили сайта продукта без секций главной (SCRUM-994); главная берёт landing.css целиком.
 */
/* ЛЕНДИНГ СЕРВИСА. Перенос из проекта 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-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__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)}

/* --- бегущее кольцо. Единственное место продукта, где цвет движется. Оно не
   индикатор фокуса: фокус - чернильное кольцо снаружи, по правилам системы.
   Останавливается навсегда, как только человек начал печатать. --- */
@property --l-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes sc-l-ring-spin{to{--l-angle:360deg}}

/* --- витрина. Одна страница крупно, соседние подглядывают краем. --- */
/* Активный кадр занимает почти всю ширину: соседи видны краем и меньше по
   размеру - видно, что лента листается, но спорить с активным им нечем. */
.sc-l-gallery{--l-slide:min(1240px,88cqi)}
.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}
@keyframes sc-l-settle{from{opacity:.4}to{opacity:1}}

/* Поля по бокам на телефоне задаются ОДИН раз, на корне лендинга, и дальше наследуются:
   контейнеров на странице десяток (`.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-container{padding-inline:var(--sc-ln-pad-mobile)}
  .sc-l-gallery{--l-slide:86cqi}
}

/* 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-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-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-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-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-hero{padding-block:clamp(48px,6vw,96px)}
.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-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{margin-block-start:var(--sc-space-12);overflow-x:auto;scrollbar-width:none;
  /* Край ленты уходит в прозрачность ТОЛЬКО с той стороны, где ещё есть что
     листать. Маска была постоянной, и дорожку приходилось отодвигать от обоих
     краёв на те же 32px, чтобы крайние пилюли не выцветали в покое, - из-за
     этого первая пилюля стояла в 40px от кнопки обновления при 8px между самими
     пилюлями. Теперь отступ дорожки нулевой, ряд начинается вплотную к кнопке, а
     маска появляется тогда, когда под неё действительно что-то уезжает. Признак
     ставит скрипт (`data-fade`); без скрипта маски нет вовсе - она украшение, и
     её отсутствие ничего не ломает. */
  --q-a:0px;--q-b:0px;
  /* Ось маски идёт по направлению чтения: `--q-a` - всегда начало ряда, `--q-b` - конец, и в RTL
     начало справа. До 27.10.2026 ось была физической, и на /he/ хвост гас со стороны начала. */
  mask-image:linear-gradient(calc(90deg * var(--sc-dir,1)),transparent 0,#000 var(--q-a),#000 calc(100% - var(--q-b)),transparent 100%)}
/* Хвост гаснет, пока список не кончился; начало - только когда ряд УЖЕ прокручен (владелец
   27.10.2026: «слева добавь прозрачность, не только справа»). В покое первая подсказка видна
   целиком: показывать её обрезанной значит прятать самое нужное. */
.sc-ln-quick[data-fade~="end"]{--q-b:32px}
.sc-ln-quick[data-fade~="start"]{--q-a: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}
/* Подсказки мельче (владелец 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-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)}
.sc-ln-acc{border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline)}
.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-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)}

/* --- подвал --- */
.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__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__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-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: кабинет этих правил не видит.
   ========================================================================= */
.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-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-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-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)}

/* Кнопка - тёмная таблетка со стрелкой. */
.sc-ln .sc-btn--ink .sc-icon{margin-inline-start:var(--sc-space-4)}
.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}
/* Размер кадра при ходе ленты пишет скрипт каждый кадр (`drift()`), плавно от расстояния до центра:
   переход по `scale` отставал бы от каждой записи. */
.sc-ln-photos__track[data-flow="true"] > .sc-ln-photo{transition:opacity var(--sc-dur-slow) var(--sc-ease)}
/* Карточка почти во всю ширину и пропорций 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}
@keyframes sc-ln-page-clay{
  0%{translate:0 0}
  22.727%{translate:0 0;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  31.818%{translate:0 max(-25.25%,calc(-100% + 56.25cqi))}
  54.545%{translate:0 max(-25.25%,calc(-100% + 56.25cqi));animation-timing-function:cubic-bezier(.65,0,.35,1)}
  63.636%{translate:0 max(-73%,calc(-100% + 56.25cqi))}
  86.364%{translate:0 max(-73%,calc(-100% + 56.25cqi));animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{translate:0 0}}
@keyframes sc-ln-page-roasted{
  0%{translate:0 0}
  22.727%{translate:0 0;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  31.818%{translate:0 max(-26.933%,calc(-100% + 56.25cqi))}
  54.545%{translate:0 max(-26.933%,calc(-100% + 56.25cqi));animation-timing-function:cubic-bezier(.65,0,.35,1)}
  63.636%{translate:0 max(-42.467%,calc(-100% + 56.25cqi))}
  86.364%{translate:0 max(-42.467%,calc(-100% + 56.25cqi));animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{translate:0 0}}
@keyframes sc-ln-page-lumen{
  0%{translate:0 0}
  17.241%{translate:0 0;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  24.138%{translate:0 max(-25.25%,calc(-100% + 56.25cqi))}
  41.379%{translate:0 max(-25.25%,calc(-100% + 56.25cqi));animation-timing-function:cubic-bezier(.65,0,.35,1)}
  48.276%{translate:0 max(-42.062%,calc(-100% + 56.25cqi))}
  65.517%{translate:0 max(-42.062%,calc(-100% + 56.25cqi));animation-timing-function:cubic-bezier(.65,0,.35,1)}
  72.414%{translate:0 max(-68.812%,calc(-100% + 56.25cqi))}
  89.655%{translate:0 max(-68.812%,calc(-100% + 56.25cqi));animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{translate:0 0}}
@keyframes sc-ln-page-nexus{
  0%{translate:0 0}
  33.333%{translate:0 0;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  46.667%{translate:0 max(-49.333%,calc(-100% + 56.25cqi))}
  80%{translate:0 max(-49.333%,calc(-100% + 56.25cqi));animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{translate:0 0}}
.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}
@container (min-width:1000px){
  .sc-ln-bento__cell--c8{grid-column:span 8}
}

/* Уменьшенные куски кабинета внутри карточек. Это не скриншоты, а те же токены:
   при смене цвета или радиуса они меняются вместе с продуктом. */
.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__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__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__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--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)}

/* --- 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-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-lv-strike{text-decoration:line-through;text-decoration-thickness:2px;color:var(--sc-ink-600)}
@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--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-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__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__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}
/* Столбики занимают всю высоту карточки под числом (владелец 18.10.2026): под подписью «reviews this
   month» стояла пустая полоса, график был прижат к низу. Высоты столбиков - проценты, поэтому растут
   пропорционально; 112 - нижняя граница для узкой карточки. */
.sc-mini--chart{block-size:100%}
.sc-mini--chart .sc-mini__plot{flex:1;block-size:auto;min-block-size:112px}
.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__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-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-lv-row-item .sc-switch__state{display:none}

/* Лента клиентов: едет вверх без конца, стык скрыт дублем списка.
   Высота задана жёстко: без неё сорок плиток растянули бы весь ряд бенто. */
.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}

/* Images: обычная карусель - лента кадров едет вбок на ширину кадра (владелец
   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-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}
/* Приклеенная строка стоит в потоке и резервирует место под собой (требование 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)}
/* Круглая кнопка доступности стоит в углу конца (20 от края + 60 кнопка + 12 зазор = 92, тот же счёт, что
   у полосы cookies) и ложилась на «Open app» внизу меню (аудит 04.11.2026, 375): кнопки меню кончаются раньше. */
@media (max-width:760px){.sc-ln-mob__foot{padding-inline-end:92px}}
/* ПОРОГ 1120, А НЕ 1020 (SCRUM-960): пятый пункт «Free SEO check» удлинил ряд, и с 1021 до 1085 английская
   шапка переносила кнопку. Русская шапка длиннее всех (замер 02.11.2026: 1150 против 1013 у en и 992 у he) - у
   неё свой порог ниже; меряется прогоном ширин, а не на глаз. */
@container (max-width:1120px){
  .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:1240px){
  .sc-ln-nav:lang(ru){display:none}
  .sc-ln-only-desk:lang(ru){display:none}
  .sc-ln-only-mob:lang(ru){display:inline-flex}
  .sc-ln .sc-l-header__row:lang(ru){flex-wrap:nowrap}
}
@container (max-width:560px){
  .sc-ln .sc-l-header__end .sc-l-lang{display:none}
}
.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-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__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}
/* Развёрнутое поле - только само поле (владелец 04.10.2026): ни белой рамки-подложки
   вокруг, ни чернильного кольца фокуса поверх бегущего. Тень переехала на кольцо, чтобы
   поле не сливалось со страницей; видимым признаком фокуса остаются само кольцо и каретка. */
.sc-ln-dock__full{inline-size:min(720px,100%);background:none;padding:0}
/* Место под липкое поле зарезервировано в подвале: оно не перекрывает содержимое. */
.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}}
/* Строка списка отвечает на наведение: подложка светлеет, строка сдвигается по
   инлайновой оси (знак берётся из --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}
/* Телефон: малая карточка сайта снова видна (владелец 05.10.2026) - над заголовком, в столбец. */
@container (max-width:640px){
  /* Телефон (решение владельца 03.10.2026): кадр на 50% выше, тень под текстом гуще и выше. */
  /* Кадр выше (4:5): в столбец над заголовком встаёт малая карточка сайта (05.10.2026). */
  .sc-ln-photo img.sc-ln-photo__bg{aspect-ratio:4 / 5}}

/* ЯРЛЫК У КУРСОРА. Подпись не стоит в углу кадра, а едет за указателем и возникает
   увеличением из ничего. Положение считается от ЛОГИЧЕСКОГО начала кадра, поэтому в
   письме справа налево ярлык едет так же; смещение на 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}
}
/* На касании наведения нет: там ярлыка не будет никогда, и подпись остаётся на
   месте обычной таблеткой. */
@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 p{margin:0;font-size:11px;line-height:1.35}
.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-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}}
/* Слой поля выше кнопки доступности, но закрыть её свёрнутой полосой нельзя: виджет обязан
   оставаться достижимым. Там, где полоса доходит до угла (уже ~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__foot .sc-l-langs{display:block}
.sc-ln-mob__foot .sc-l-langs__btn{inline-size:100%;justify-content:center}
.sc-ln-mob__foot .sc-l-langs__list{position:static;margin-block-start:var(--sc-space-8);box-shadow:none}
.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-photo__t{font-size:26px}
  .sc-mini--chat{block-size:176px;min-block-size:176px}
  .sc-mini--flow{block-size:176px}

  /* Отзывы: карточка уже, строка одна (вторую снимает разметка). */
  .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-bento,.sc-ln-inc,.sc-ln-cells,.sc-ln-drill__cards{grid-template-columns:1fr}
  .sc-ln-wrap,.sc-l-container{overflow-x:clip}

  /* Куски кабинета внутри карточек. Ширины, посчитанные под 1440, на 390 не влезают:
     боковая колонка уже, подписи переносятся, ничего не обрезается. */
  .sc-mini__side{inline-size:92px;padding:6px}
  .sc-mini__chips{flex-wrap:wrap}
  .sc-mini__b{max-inline-size:88%}
}
@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}}

/* Заголовок по буквам: каждая проявляется по очереди и падает сверху. Приём стоит
   через одну секцию - на каждой он стал бы манерой страницы, а не акцентом.
   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}}

/* AI Edit крупно (SCRUM-1027): запись петли вместо живого интерфейса. Ширину задаёт контейнер,
   своей нет: видео растягивается на колонку и держит пропорцию атрибутами width/height. Узкая
   запись - своя раскладка, а не сжатая широкая; граница та же, что у самой записи (720). */
.sc-ln-demo__fig{margin:0;inline-size:100%;border-radius:var(--sc-l-radius);overflow:hidden;background:var(--sc-l-plane)}
.sc-ln-demo__v{display:block;inline-size:100%;block-size:auto}
.sc-ln-demo__v--compact{display:none}
@media (max-width:719px){
  .sc-ln-demo__v--wide{display:none}
  .sc-ln-demo__v--compact{display:block;max-inline-size:358px;margin-inline:auto}
}