/* Витрина «Калька» на корне calka.ru (LAND-11). Свой файл: base.css не подключается, класс темы витрина
   не получает (RD-00g §4.5), живые партиалы приложения запрещены (APEX-R §6.2).

   Значения — tokens.json, тема light (имена кастом-свойств = ключи tokens.json). Цвета холста, у
   которых в ДС нет роли, вынесены отдельно и помечены «холст ≠ ДС»: где роль в ДС есть, взята ДС
   (REDESIGN-R §1 п. 18 а). Брейкпоинты — ровно холста: 960 и 760.

   Анимация «Как это работает» — чистый CSS (@keyframes kd1…kd36, цикл 30 с). Без JS и при
   prefers-reduced-motion страница показывает сцену 1 без движения; пауза — класс is-paused. */

/* Одна гарнитура витрины. Файл общий с приложением (static/fonts), но грузится независимо от флага
   шрифта приложения: решение LAND-11-R §1 п. 3. Диапазон символов — перечень из паспорта
   static/fonts/README.md (шаг 2). Символа ✓ (U+2713) в файле нет — рисует следующее семейство. */
@font-face {
  font-family: "Manrope";
  src: url("../../fonts/manrope-var.e6cce1d7dbc1.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00B7, U+00BB, U+00D7, U+0401-044F, U+0451-045F, U+0490-0491, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+2039-203A, U+20BD, U+2116, U+2190, U+2192, U+2248, U+2713;
}

:root {
  --lavender: #D2CDE7;
  --lavender-soft: #ECEAF5;
  --ink: #1A1A18;
  --ink-muted: #5C5A63;
  --ink-subtle: #74727C;
  --surface: #F7F7F8;
  --surface-raised: #FFFFFF;
  --line: #E3E1EA;
  --line-strong: #8E8B97;
  --primary: #1A1A18;
  --primary-hover: #33322F;
  --on-primary: #FFFFFF;
  --focus: #1A1A18;
  --success: #1F6B45;
  --success-soft: #E4F3EA;
  --success-line: #CDE6D7;
  --radius-sm: 12px;
  --radius-xl: 40px;
  --radius-full: 9999px;
  --shadow-soft: 0 24px 60px -28px #1A1A1833;

  /* холст ≠ ДС: роли в tokens.json нет */
  --canvas-outline: #D9D6E2;   /* рамка вторичной кнопки */
  --canvas-ink-strong: #2E2D33; /* текст на лавандовом блоке */
  --canvas-ink-soft: #3B3A42;   /* надзаголовок на лавандовом блоке */
  --canvas-on-dark: #CFCDD6;    /* текст на тёмном блоке */
  --canvas-grid: #F0EEF4;       /* линии и штриховка сетки календаря в кадре */

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 800; }

a { color: var(--ink); }
a:hover { color: var(--ink-muted); }

main:focus { outline: none; }

/* Фокус клавиатуры: кольцо 2 px токеном focus (ДС). */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- Skip-link (Skip-Link-Focus.dc.html) ------------------------------------------------------ */
.lk-skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
.lk-skip:focus,
.lk-skip:focus-visible {
  top: 12px;
  color: #FFFFFF;
  outline: 3px solid var(--lavender);
  outline-offset: 2px;
}

/* --- Шапка ------------------------------------------------------------------------------------ */
.lk-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.lk-header__in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.lk-logo { display: flex; align-items: center; }
.lk-logo img { height: 40px; width: auto; display: block; }
/* В снимке каталога состояний img встраивается вектором: без этого svg теряет размер (0×44 у ссылки). */
.lk-logo svg { height: 40px; width: auto; display: block; }
.lk-nav { display: flex; flex-wrap: wrap; gap: 28px; font-size: 15px; font-weight: 600; }
.lk-nav a { text-decoration: none; color: var(--ink-muted); }
.lk-nav a:hover { color: var(--ink); }
.lk-actions { display: flex; align-items: center; gap: 16px; }
.lk-login { font-size: 15px; font-weight: 700; text-decoration: none; color: var(--ink); }
.lk-create {
  background: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: var(--radius-full);
}
.lk-create:hover { background: var(--primary-hover); color: var(--on-primary); }

/* --- Кнопки ----------------------------------------------------------------------------------- */
.lk-btn {
  display: inline-flex;
  align-items: center;
  background: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  padding: 17px 28px;
  border-radius: var(--radius-full);
}
.lk-btn:hover { background: var(--primary-hover); color: var(--on-primary); }
.lk-btn--ghost {
  background: transparent;
  color: var(--ink);
  padding: 15.5px 26px;
  border: 1.5px solid var(--canvas-outline);
}
.lk-btn--ghost:hover { background: transparent; color: var(--ink-muted); }
.lk-btn--outline {
  justify-content: center;
  margin-top: auto;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  padding: 14px 20px;
  border: 1.5px solid var(--canvas-outline);
}
.lk-btn--outline:hover { background: transparent; color: var(--ink-muted); }
.lk-btn--lavender { background: var(--lavender); color: var(--ink); font-weight: 800; }
.lk-btn--lavender:hover { background: var(--lavender); color: var(--ink-muted); }

/* --- Общие блоки ------------------------------------------------------------------------------ */
.lk-eb {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lk-sec { max-width: 1200px; margin: 0 auto; padding: 0 24px 112px; }
.lk-sec__head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin-bottom: 40px; }
.lk-h2 {
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.lk-h2--how { font-size: 48px; }
.lk-lead { font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.lk-lead--19 { font-size: 19px; line-height: 30px; }

/* Метка демо-кадров: «Пример» (Р8). */
.lk-example {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-full);
  padding: 4px 10px;
}
.lk-example--stage { left: auto; right: 76px; top: 28px; }
/* Холст красит #74727C (4.42:1 на surface, ниже 4.5): берём --ink-muted, DoD 9 (е). */
.lk-fict { font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* --- Первый экран ----------------------------------------------------------------------------- */
.lk-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 104px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 48px;
  align-items: stretch;
}
.lk-hero__text { display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.lk-hero__title {
  font-weight: 800;
  font-size: clamp(42px, 5vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.lk-hero__lead { font-size: 20px; line-height: 31px; color: var(--ink-muted); max-width: 500px; }
.lk-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lk-hero__note { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lk-shotwrap { display: flex; flex-direction: column; gap: 10px; }
.lk-shot {
  position: relative;
  min-height: 580px;
  background: var(--lavender);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.lk-shot__cat { position: absolute; left: -60px; bottom: -110px; width: 420px; height: 420px; }
.lk-shot__slots {
  position: absolute;
  top: 40px;
  right: 40px;
  width: min(330px, calc(100% - 64px));
  box-sizing: border-box;
  background: var(--surface-raised);
  border-radius: 28px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-soft);
}
.lk-shot__title { display: flex; flex-direction: column; gap: 2px; }
.lk-shot__title b { font-size: 16px; }
.lk-shot__title span { font-size: 13px; color: var(--ink-muted); }
.lk-shot__toast {
  position: absolute;
  top: 300px;
  right: clamp(24px, 14%, 120px);
  width: min(300px, calc(100% - 48px));
  box-sizing: border-box;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: 22px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 24px 60px -28px rgba(26, 26, 24, 0.5);
}
.lk-shot__toast i {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-shot__toast span { font-size: 14px; line-height: 20px; }
.lk-shot__remind {
  position: absolute;
  top: 410px;
  right: 40px;
  width: min(260px, calc(100% - 64px));
  box-sizing: border-box;
  background: var(--surface-raised);
  border-radius: 22px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 20px;
  box-shadow: var(--shadow-soft);
}
.lk-shot__remind span { color: var(--ink-muted); }

/* Слоты времени: кадр hero и пример страницы записи. */
.lk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lk-slot {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 0;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}
.lk-slot--on { border-color: var(--ink); background: var(--ink); color: #FFFFFF; }
.lk-slots--lg .lk-slot { padding: 10px 0; font-size: 15px; }

/* --- «Узнаёте?» ------------------------------------------------------------------------------- */
.lk-pain {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 112px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 48px;
  align-items: center;
}
.lk-pain__text { display: flex; flex-direction: column; gap: 28px; }
.lk-pain__head { display: flex; flex-direction: column; gap: 14px; }
.lk-pain__head p { font-size: 19px; line-height: 30px; color: var(--ink-muted); }
.lk-stats { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lk-stat {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.lk-stat:last-child { border-bottom: 1px solid var(--line); }
.lk-stat__n {
  flex: none;
  width: 64px;
  text-align: left;
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.lk-stat__t { font-size: 16px; line-height: 24px; }
.lk-stat__t span { color: var(--ink-muted); }
.lk-pain__card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 46px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lk-pain__card > .lk-example { top: 16px; left: 28px; }
.lk-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-tab {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  background: var(--lavender-soft);
  color: var(--ink);
}
.lk-tab[aria-selected="true"] { background: var(--ink); color: #FFFFFF; }
.lk-panel { display: flex; flex-direction: column; gap: 16px; }
.lk-chat {
  background: var(--surface);
  border-radius: 28px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 290px;
}
.lk-msg {
  max-width: 82%;
  padding: 11px 15px;
  font-size: 15px;
  line-height: 21px;
  border-radius: 18px;
}
.lk-msg--me {
  align-self: flex-end;
  background: var(--ink);
  color: #FFFFFF;
  border-bottom-right-radius: 6px;
}
.lk-msg--them {
  align-self: flex-start;
  background: var(--lavender-soft);
  color: var(--ink);
  border-bottom-left-radius: 6px;
}
.lk-countbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--radius-full);
  padding: 10px 10px 10px 22px;
}
.lk-countbar > span:first-child { font-size: 14px; line-height: 20px; }
.lk-countbar b { color: var(--lavender); }
.lk-countbar__url {
  background: var(--lavender);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  font-family: ui-monospace, Menlo, monospace;
}

/* --- «Для кого» ------------------------------------------------------------------------------- */
.lk-scenarios {
  background: var(--surface-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lk-scenarios__in { max-width: 1200px; margin: 0 auto; padding: 112px 24px; }
.lk-scenarios__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}
.lk-scenarios__title { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.lk-scenarios__head p { font-size: 17px; line-height: 27px; color: var(--ink-muted); max-width: 420px; }
.lk-scn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 16px;
}
.lk-scn {
  background: var(--surface);
  border-radius: 28px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lk-scn__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lk-scn__ico {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-chip {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  background: var(--surface-raised);
}
.lk-scn h3 {
  margin: 8px 0 0;
  font-weight: 800;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.02em;
}
.lk-scn p { font-size: 16px; line-height: 25px; color: var(--ink-muted); }

/* --- «Как это работает» ----------------------------------------------------------------------- */
.lk-how {
  max-width: 1200px;
  margin: 0 auto;
  padding: 112px 24px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.lk-how__head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.lk-how-grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}
.lk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.lk-step {
  position: relative;
  border-radius: 24px;
  padding: 22px 24px;
  display: flex;
  gap: 16px;
  overflow: hidden;
}
.lk-step__n {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--lavender);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}
.lk-step__n--dark { background: var(--ink); color: #FFFFFF; }
.lk-step__body { display: flex; flex-direction: column; gap: 8px; }
.lk-step__body b { font-size: 20px; line-height: 26px; letter-spacing: -0.01em; }
.lk-step__desc { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.lk-step__meta { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; }
.lk-step__who {
  background: var(--lavender);
  color: var(--ink);
  border-radius: var(--radius-full);
  padding: 3px 10px;
}
.lk-step__who--dark { background: var(--ink); color: #FFFFFF; }
.lk-step__meta > span:last-child { color: var(--ink-muted); }
.lk-prog { position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; overflow: hidden; }
.lk-prog > span { display: block; height: 3px; width: 0; background: var(--ink); animation-timing-function: linear; }

.lk-stage {
  position: relative;
  min-height: 620px;
  border-radius: 32px;
  background: var(--lavender-soft);
  overflow: hidden;
}
.lk-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-scene__tag {
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 13px;
  font-weight: 700;
  background: var(--surface-raised);
  border-radius: var(--radius-full);
  padding: 6px 14px;
}
.lk-l1 { width: 420px; transform: scale(1.22); margin-top: 24px; }
.lk-l2 { width: auto; transform: scale(1.08); margin-top: 24px; }
.lk-l3 { width: auto; transform: scale(1.05); margin-top: 24px; }
.lk-pair { display: flex; gap: 20px; align-items: center; }

.lk-pause {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 6;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-raised);
  box-shadow: 0 8px 20px -10px rgba(26, 26, 24, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.lk-pause:hover { background: var(--surface); }
.lk-pause:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.lk-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.lk-checks { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0; padding: 0; list-style: none; }
.lk-checks li { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 700; }
.lk-checks i {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Кадры продукта (демо) -------------------------------------------------------------------- */
.lk-d-win {
  position: relative;
  background: var(--surface-raised);
  border-radius: 18px;
  box-shadow: 0 24px 50px -30px rgba(26, 26, 24, 0.45);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
  box-sizing: border-box;
}
.lk-d-win--tight { gap: 9px; }
.lk-d-win--w300 { width: 300px; }
.lk-d-win--cal { width: 560px; padding: 18px 18px 12px; }
.lk-d-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14px; }
.lk-d-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--surface);
  border-radius: var(--radius-full);
  padding: 3px 9px;
}
.lk-d-row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; }
.lk-d-day { font-weight: 700; color: var(--ink-muted); font-size: 12px; }
.lk-d-chips { position: relative; display: flex; gap: 6px; height: 26px; }
.lk-d-chip {
  border-radius: 8px;
  background: var(--lavender);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  white-space: nowrap;
}
.lk-d-chip--busy {
  background: var(--surface-raised);
  border: 1.5px dashed var(--line-strong);
  color: var(--ink-muted);
  font-weight: 600;
}
.lk-d-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--lavender-soft);
  border-radius: var(--radius-sm);
  padding: 8px 8px 8px 12px;
}
.lk-d-link b { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-d-btn {
  position: relative;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
  height: 30px;
  width: 150px;
}
.lk-d-btn > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lk-d-chat { display: flex; flex-direction: column; gap: 6px; min-height: 150px; justify-content: flex-end; }
.lk-d-bub { max-width: 86%; padding: 8px 11px; border-radius: 14px; font-size: 12px; line-height: 17px; }
.lk-d-me { align-self: flex-end; background: var(--ink); color: #FFFFFF; border-bottom-right-radius: 4px; }
.lk-d-them { align-self: flex-start; background: var(--lavender-soft); border-bottom-left-radius: 4px; }
.lk-d-me u { color: var(--lavender); }
.lk-d-sec {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.lk-d-sec--gap { margin-top: 6px; }
.lk-d-sub { color: var(--ink-muted); }
.lk-d-prov {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 8px 7px 10px;
  font-weight: 700;
}
.lk-d-calg { flex: none; display: block; }
.lk-d-pbtn {
  position: relative;
  margin-left: auto;
  height: 26px;
  width: 96px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--ink);
  font-size: 11px;
  font-weight: 700;
}
.lk-d-pbtn > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}
.lk-d-on { background: var(--success-soft); color: var(--success); border-color: var(--success-line); }
.lk-d-ready { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.lk-d-ready i {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-d-chathead {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
  font-weight: 800;
}
.lk-d-ava {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lavender-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.lk-d-online { font-size: 11px; font-weight: 600; color: var(--ink-subtle); }
.lk-d-prev {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--surface-raised);
  color: var(--ink);
  border-radius: 10px;
  padding: 6px;
  margin-top: 6px;
}
.lk-d-prev img { width: 26px; height: 26px; border-radius: 7px; }
.lk-d-prev b { display: block; font-size: 11px; line-height: 14px; }
.lk-d-prev span { font-size: 10px; line-height: 13px; color: var(--ink-muted); }
.lk-d-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-full);
  padding: 5px 5px 5px 12px;
  color: var(--ink-subtle);
  font-size: 12px;
}
.lk-d-send {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-d-cal { display: grid; grid-template-columns: 36px repeat(5, minmax(0, 1fr)); font-size: 11px; }
.lk-d-cal .hd { font-weight: 800; text-align: center; padding-bottom: 6px; color: var(--ink); }
.lk-d-cal .hd small { display: block; font-weight: 600; color: var(--ink-subtle); }
.lk-d-hr { height: 34px; border-top: 1px solid var(--line); color: var(--ink-subtle); font-size: 10px; padding-top: 2px; }
.lk-d-cell { position: relative; height: 34px; border-top: 1px solid var(--line); border-left: 1px solid var(--canvas-grid); }
.lk-d-ev {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  border-radius: 7px;
  padding: 4px 6px;
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
  overflow: hidden;
  z-index: 1;
}
.lk-d-ev small { display: block; font-weight: 600; opacity: 0.75; }
.lk-d-ev1 { background: var(--lavender); color: var(--ink); }
.lk-d-ev2 { background: var(--ink); color: #FFFFFF; }
.lk-d-ev--busy {
  background: repeating-linear-gradient(135deg, var(--canvas-grid) 0 6px, var(--surface-raised) 6px 12px);
  color: var(--ink-muted); /* холст: #74727C на штриховке ≈ 4.1:1 — ниже 4.5 */
  font-weight: 600;
}
.lk-d-notif {
  position: absolute;
  right: -18px;
  top: -26px;
  width: 250px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: var(--surface-raised);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 18px 40px -16px rgba(26, 26, 24, 0.45);
  font-size: 11px;
  line-height: 15px;
  z-index: 4;
}
.lk-d-notif b { display: block; font-size: 12px; }
.lk-d-env {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--lavender-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-d-cursor {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  right: 6px;
  bottom: -14px;
}

/* Анимация: общий режим — бесконечный цикл 30 с; конкретный keyframes — классом lk-kN. */
.lk-a {
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.lk-hide { opacity: 0; }
/* Ручная пауза (is-paused) и авто-пауза вне экрана (is-offscreen) — независимые классы, ставит
   скрипт: кадр замирает как есть. */
.lk-steps.is-paused .lk-a,
.lk-stage.is-paused .lk-a,
.lk-steps.is-offscreen .lk-a,
.lk-stage.is-offscreen .lk-a { animation-play-state: paused; }
/* «Ждём старта» (is-idle, ставит скрипт до входа блока в экран и после полного ухода): анимаций нет,
   вид — кадр 0 % @keyframes: сцена 1, полоски шагов на нуле, курсоры скрыты. Снятие класса само
   запускает цикл с 0 %, отдельного сброса не нужно. */
.lk-steps.is-idle .lk-a,
.lk-stage.is-idle .lk-a { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Кадр 0 % для элементов, у которых база (конечное состояние) отличается от него. Под reduce не
     применяется: там показывается сцена 1 в конечном состоянии (правила ниже). */
  .lk-stage.is-idle .lk-k3,
  .lk-stage.is-idle .lk-k4,
  .lk-stage.is-idle .lk-k5,
  .lk-stage.is-idle .lk-k6,
  .lk-stage.is-idle .lk-k7,
  .lk-stage.is-idle .lk-k8,
  .lk-stage.is-idle .lk-k9,
  .lk-stage.is-idle .lk-k10,
  .lk-stage.is-idle .lk-k13,
  .lk-stage.is-idle .lk-k14,
  .lk-stage.is-idle .lk-k15,
  .lk-stage.is-idle .lk-k16,
  .lk-stage.is-idle .lk-k17,
  .lk-stage.is-idle .lk-k18,
  .lk-stage.is-idle .lk-k19,
  .lk-stage.is-idle .lk-k20,
  .lk-stage.is-idle .lk-k21,
  .lk-stage.is-idle .lk-k22,
  .lk-stage.is-idle .lk-k36 { opacity: 0; }
  .lk-stage.is-idle .lk-k2,
  .lk-stage.is-idle .lk-k12,
  .lk-stage.is-idle .lk-k34 { opacity: 1; }
}

.lk-k1 { animation-name: kd1; }   .lk-k2 { animation-name: kd2; }   .lk-k3 { animation-name: kd3; }
.lk-k4 { animation-name: kd4; }   .lk-k5 { animation-name: kd5; }   .lk-k6 { animation-name: kd6; }
.lk-k7 { animation-name: kd7; }   .lk-k8 { animation-name: kd8; }   .lk-k9 { animation-name: kd9; }
.lk-k10 { animation-name: kd10; } .lk-k11 { animation-name: kd11; } .lk-k12 { animation-name: kd12; }
.lk-k13 { animation-name: kd13; } .lk-k14 { animation-name: kd14; } .lk-k15 { animation-name: kd15; }
.lk-k16 { animation-name: kd16; } .lk-k17 { animation-name: kd17; } .lk-k18 { animation-name: kd18; }
.lk-k19 { animation-name: kd19; } .lk-k20 { animation-name: kd20; } .lk-k21 { animation-name: kd21; }
.lk-k22 { animation-name: kd22; } .lk-k23 { animation-name: kd23; } .lk-k24 { animation-name: kd24; }
.lk-k25 { animation-name: kd25; } .lk-k26 { animation-name: kd26; } .lk-k27 { animation-name: kd27; }
.lk-k28 { animation-name: kd28; } .lk-k29 { animation-name: kd29; } .lk-k30 { animation-name: kd30; }
.lk-k31 { animation-name: kd31; } .lk-k32 { animation-name: kd32; } .lk-k33 { animation-name: kd33; }
.lk-k34 { animation-name: kd34; } .lk-k35 { animation-name: kd35; } .lk-k36 { animation-name: kd36; }

@keyframes kd1{0%,1.3%{opacity:0;transform:translate(-70px,80px)}4.3%{opacity:1;transform:translate(-70px,80px)}6.0%{opacity:1;transform:translate(0,0)}7.0%{transform:scale(.8)}9.0%{transform:scale(1)}10.0%{opacity:1}14.0%,100%{opacity:0}}
@keyframes kd2{0%,7.0%{opacity:1}8.0%,100%{opacity:0}}
@keyframes kd3{0%,6.3%{opacity:0;transform:translateY(6px) scale(.97)}8.8%,32.3%{opacity:1;transform:none}33.8%,100%{opacity:0;transform:none}}
@keyframes kd4{0%,11.0%{opacity:0;transform:translateY(6px) scale(.97)}13.5%,32.3%{opacity:1;transform:none}33.8%,100%{opacity:0;transform:none}}
@keyframes kd5{0%,13.0%{opacity:0;transform:translateY(6px) scale(.97)}15.5%,32.3%{opacity:1;transform:none}33.8%,100%{opacity:0;transform:none}}
@keyframes kd6{0%,23.0%{opacity:0;transform:translateY(6px) scale(.97)}25.5%,32.3%{opacity:1;transform:none}33.8%,100%{opacity:0;transform:none}}
@keyframes kd7{0%,15.0%{opacity:0;transform:translateY(6px) scale(.97)}17.5%,32.3%{opacity:1;transform:none}33.8%,100%{opacity:0;transform:none}}
@keyframes kd8{0%,17.0%{opacity:0;transform:translateY(6px) scale(.97)}19.5%,32.3%{opacity:1;transform:none}33.8%,100%{opacity:0;transform:none}}
@keyframes kd9{0%,19.0%{opacity:0;transform:translateY(6px) scale(.97)}21.5%,32.3%{opacity:1;transform:none}33.8%,100%{opacity:0;transform:none}}
@keyframes kd10{0%,9.7%{opacity:0;transform:translateY(6px) scale(.97)}12.2%,32.3%{opacity:1;transform:none}33.8%,100%{opacity:0;transform:none}}
@keyframes kd11{0%,35.3%{opacity:0;transform:translate(70px,90px)}38.3%{opacity:1;transform:translate(70px,90px)}41.3%{opacity:1;transform:translate(0,0)}42.3%{transform:scale(.8)}44.3%{transform:scale(1)}45.3%{opacity:1}49.3%,100%{opacity:0}}
@keyframes kd12{0%,42.3%{opacity:1}43.3%,100%{opacity:0}}
@keyframes kd13{0%,41.3%{opacity:0;transform:translateY(6px) scale(.97)}43.8%,65.6%{opacity:1;transform:none}67.1%,100%{opacity:0;transform:none}}
@keyframes kd14{0%,43.6%{opacity:0;transform:translateY(6px) scale(.97)}46.1%,65.6%{opacity:1;transform:none}67.1%,100%{opacity:0;transform:none}}
@keyframes kd15{0%,45.0%{opacity:0;transform:translateY(6px) scale(.97)}47.5%,65.6%{opacity:1;transform:none}67.1%,100%{opacity:0;transform:none}}
@keyframes kd16{0%,49.6%{opacity:0;transform:translateY(6px) scale(.97)}52.1%,65.6%{opacity:1;transform:none}67.1%,100%{opacity:0;transform:none}}
@keyframes kd17{0%,56.9%{opacity:0;transform:translateY(6px) scale(.97)}59.4%,65.6%{opacity:1;transform:none}67.1%,100%{opacity:0;transform:none}}
@keyframes kd18{0%,85.6%{opacity:0;transform:translateY(6px) scale(.97)}88.1%,98.0%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:none}}
@keyframes kd19{0%,68.3%{opacity:0;transform:translateY(6px) scale(.97)}70.8%,98.0%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:none}}
@keyframes kd20{0%,80.3%{opacity:0;transform:translateY(6px) scale(.97)}82.8%,98.0%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:none}}
@keyframes kd21{0%,74.3%{opacity:0;transform:translateY(6px) scale(.97)}76.8%,98.0%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:none}}
@keyframes kd22{0%,91.0%{opacity:0;transform:translateY(6px) scale(.97)}93.5%,98.0%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:none}}
@keyframes kd23{0%,68.8%{opacity:0;transform:translateY(-8px)}70.8%,80.3%{opacity:1;transform:none}81.3%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes kd24{0%,74.8%{opacity:0;transform:translateY(-8px)}76.8%,86.3%{opacity:1;transform:none}87.3%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes kd25{0%,80.8%{opacity:0;transform:translateY(-8px)}82.8%,92.3%{opacity:1;transform:none}93.3%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes kd26{0%,86.1%{opacity:0;transform:translateY(-8px)}88.1%,97.0%{opacity:1;transform:none}98.0%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes kd27{0%,91.5%{opacity:0;transform:translateY(-8px)}93.5%,97.0%{opacity:1;transform:none}98.0%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes kd28{0%,0.0%{background:transparent;box-shadow:none}1.0%,32.3%{background:#FFFFFF;box-shadow:0 18px 40px -24px rgba(26,26,24,.35)}34.3%,100%{background:transparent;box-shadow:none}}
@keyframes kd29{0%,0.0%{width:0}33.3%{width:100%}33.4%,100%{width:0}}
@keyframes kd30{0%,32.3%{background:transparent;box-shadow:none}34.3%,65.6%{background:#FFFFFF;box-shadow:0 18px 40px -24px rgba(26,26,24,.35)}67.6%,100%{background:transparent;box-shadow:none}}
@keyframes kd31{0%,33.3%{width:0}66.6%{width:100%}66.7%,100%{width:0}}
@keyframes kd32{0%,65.6%{background:transparent;box-shadow:none}67.6%,99.0%{background:#FFFFFF;box-shadow:0 18px 40px -24px rgba(26,26,24,.35)}100.0%,100%{background:transparent;box-shadow:none}}
@keyframes kd33{0%,66.6%{width:0}100.0%{width:100%}100.0%,100%{width:0}}
@keyframes kd34{0%,32.3%{opacity:1}34.3%,100%{opacity:0}}
@keyframes kd35{0%,32.3%{opacity:0}34.3%,65.6%{opacity:1}67.6%,100%{opacity:0}}
@keyframes kd36{0%,65.6%{opacity:0}67.6%,98%{opacity:1}100%{opacity:0}}

/* Без движения — сцена 1 неподвижно, первый шаг подсвечен, курсоры и пауза скрыты. Те же правила для
   html.no-js (WCAG 2.2.2: бесконечная анимация без возможности паузы недопустима, а паузу даёт
   только скрипт). Правило продублировано в двух селекторах намеренно: @media нельзя объединить с
   классом через запятую. */
@media (prefers-reduced-motion: reduce) {
  .lk-a { animation: none !important; }
  .lk-stage > .lk-scene { opacity: 0 !important; }
  .lk-stage > .lk-scene--first { opacity: 1 !important; }
  .lk-steps > li:first-child { background: #FFFFFF; box-shadow: 0 18px 40px -24px rgba(26, 26, 24, 0.35); }
  .lk-pause { display: none !important; }
  .lk-d-cursor { display: none; }
}
.no-js .lk-a { animation: none !important; }
.no-js .lk-stage > .lk-scene { opacity: 0 !important; }
.no-js .lk-stage > .lk-scene--first { opacity: 1 !important; }
.no-js .lk-steps > li:first-child { background: #FFFFFF; box-shadow: 0 18px 40px -24px rgba(26, 26, 24, 0.35); }
.no-js .lk-pause { display: none !important; }
.no-js .lk-d-cursor { display: none; }

/* --- «Что внутри» ----------------------------------------------------------------------------- */
.lk-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
.lk-feat {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lk-feat h3 { font-weight: 800; font-size: 19px; line-height: 25px; }
.lk-feat p { font-size: 15px; line-height: 23px; color: var(--ink-muted); }

/* --- Для гостя -------------------------------------------------------------------------------- */
.lk-guest {
  background: var(--lavender);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  align-items: center;
}
.lk-guest__text { display: flex; flex-direction: column; gap: 18px; }
.lk-guest .lk-eb { color: var(--canvas-ink-soft); }
.lk-guest__lead { font-size: 18px; line-height: 28px; color: var(--canvas-ink-strong); }
.lk-guest__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 24px;
}
.lk-guest__list li { display: flex; gap: 12px; align-items: flex-start; }
.lk-guest__list svg { flex: none; margin-top: 1px; }
.lk-guest__card {
  position: relative;
  background: var(--surface-raised);
  border-radius: 28px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-soft);
}
.lk-guest__card > .lk-example { top: auto; bottom: 16px; left: auto; right: 16px; background: var(--surface); }
.lk-guest__who { display: flex; gap: 14px; align-items: center; }
.lk-guest__ava {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--lavender-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
}
.lk-guest__name { display: flex; flex-direction: column; gap: 2px; }
.lk-guest__name b { font-size: 17px; }
.lk-guest__name span { font-size: 14px; color: var(--ink-muted); }
.lk-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lk-day {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
}
.lk-day b { display: block; font-size: 17px; color: var(--ink); }
.lk-day--on { border: 1.5px solid var(--ink); background: var(--lavender-soft); }
.lk-guest__tz { font-size: 13px; color: var(--ink-muted); }

/* --- «Доверие» -------------------------------------------------------------------------------- */
.lk-trust {
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}
.lk-trust__badge {
  font-weight: 800;
  font-size: clamp(64px, 9vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--lavender);
}
.lk-trust__text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; }
.lk-trust__text h2 { font-weight: 800; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; }
.lk-trust__text p { font-size: 17px; line-height: 27px; color: var(--canvas-on-dark); }

/* --- Тарифы ----------------------------------------------------------------------------------- */
.lk-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  max-width: 880px;
}
.lk-plan {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lk-plan__head { display: flex; flex-direction: column; gap: 6px; }
.lk-plan__head h3 { font-weight: 800; font-size: 20px; }
.lk-plan__head span { font-size: 15px; color: var(--ink-muted); }
.lk-plan__price { font-weight: 800; font-size: 52px; line-height: 1; letter-spacing: -0.04em; }
.lk-plan__price span { font-size: 18px; letter-spacing: 0; font-weight: 700; }
.lk-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 22px;
}

/* --- BILL-10: набор основателей ----------------------------------------------------------------
   Разметку вставляет landing-kalka.js из ответа GET /api/v1/founding-offer (полоса — перед <header>,
   карточка — второй в сетку тарифов). Без неё ни одно правило ниже не срабатывает: ветка off
   выглядит ровно как LAND-11. Цвета — роли ДС из :root; сдвиг страницы при вставке полосы принят
   владельцем (FOUNDER-R §2, второй заход), место под полосу не резервируется. */
.lk-founders-bar {
  background: var(--primary);
  color: var(--on-primary);
  padding: 11px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.lk-founders-bar__badge {
  background: var(--lavender);
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.lk-founders-bar__more { color: var(--lavender); font-weight: 700; }
.lk-founders-bar__more:hover { color: var(--on-primary); }

/* Третья карточка: сетка холста (auto-fit) — три колонки на 1440, одна на 390. Влитая сетка
   LAND-11 рассчитана ровно на две карточки (repeat(2), 880 px) и без founding не меняется. */
.lk-plans:has(> .lk-plan-founding) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  max-width: none;
}
.lk-plan-founding { position: relative; background: var(--lavender); border: none; }
.lk-plan-founding .lk-plan__head span { color: var(--canvas-ink-strong); }
.lk-plan-founding__badge {
  align-self: flex-start;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-full);
}
.lk-plan-founding__cta {
  justify-content: center;
  margin-top: auto;
  font-size: 15px;
  padding: 15px 20px;
}

.lk-plan-founding.is-sold-out { background: var(--lavender-soft); border: 1px solid var(--line); }
.lk-plan-founding.is-sold-out .lk-plan-founding__badge {
  background: var(--surface-raised);
  color: var(--ink-muted);
  border: 1px solid var(--canvas-outline);
}
.lk-plan-founding.is-sold-out .lk-plan__price { color: var(--ink-subtle); }
.lk-plan-founding__note {
  margin: auto 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-muted);
}
.lk-plan-founding.is-sold-out .lk-plan-founding__cta {
  margin-top: 0;
  padding: 14px 20px;
  border-color: var(--ink);
}

/* --- FAQ -------------------------------------------------------------------------------------- */
.lk-faq { display: flex; flex-wrap: wrap; gap: 40px; }
.lk-faq__side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; }
.lk-faq__side p { font-size: 16px; line-height: 25px; color: var(--ink-muted); }
.lk-faq__list { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; }
.lk-qa { border-bottom: 1px solid var(--line); padding: 22px 0; }
.lk-qa summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 18px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}
.lk-qa summary::-webkit-details-marker { display: none; }
.lk-qa__plus { font-size: 26px; line-height: 1; transition: transform 0.2s; }
.lk-qa[open] .lk-qa__plus { transform: rotate(45deg); }
.lk-qa p { margin: 12px 0 0; font-size: 16px; line-height: 25px; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) {
  .lk-qa__plus { transition: none; }
}

/* --- Финал ------------------------------------------------------------------------------------ */
.lk-final-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px 96px; }
.lk-final {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: clamp(40px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.lk-final h2 {
  max-width: 680px;
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.lk-final p { font-size: 18px; line-height: 28px; color: var(--canvas-on-dark); }
.lk-final .lk-btn--lavender:focus-visible { outline-color: var(--lavender); }
.lk-final__cat { position: absolute; right: -40px; bottom: -70px; width: 300px; height: 300px; }

/* --- Подвал ----------------------------------------------------------------------------------- */
.lk-footer { border-top: 1px solid var(--line); }
.lk-footer__in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lk-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.lk-footer__row img { height: 34px; width: auto; }
.lk-footer nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; }
.lk-footer nav a { text-decoration: none; color: var(--ink-muted); }
.lk-footer nav a:hover { color: var(--ink); }
.lk-footer p { font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* --- ≤ 960: сетка «Как это работает» в одну колонку ------------------------------------------- */
@media (max-width: 960px) {
  .lk-how-grid { grid-template-columns: 1fr; }
}

/* --- ≤ 760: мобильная вёрстка (холст, Landing-Mobile) ----------------------------------------- */
@media (max-width: 760px) {
  .lk-plans { grid-template-columns: 1fr; }
  .lk-stat { gap: 12px; padding: 16px 0; }
  .lk-stat__n { width: 48px; font-size: 40px; }
  .lk-nav { display: none; }

  /* Цели касания ≥ 44 px: ссылки, кнопки, summary, вкладки, «Войти», пауза. */
  a, button, summary { min-height: 44px; box-sizing: border-box; }
  a { display: inline-flex; align-items: center; }
  .lk-tap { min-width: 44px; justify-content: center; }
  .lk-login { padding: 0 4px; }
  .lk-create { white-space: nowrap; font-size: 14px; padding: 0 10px; }
  .lk-header__in { gap: 8px; padding: 0 16px; }
  .lk-actions { gap: 2px; }
  /* Логотип не сжимается (≥ 100 px по ширине): место на 320 px добирается отступами кнопок шапки,
     а не логотипом и не шрифтом (LAND-11 §4.5 п. 3). */
  .lk-logo { flex: none; }
  .lk-logo img { height: 30px; }
  .lk-logo svg { height: 30px; }

  .lk-example--stage { right: 72px; top: 24px; }
  .lk-h2--how { font-size: 34px; line-height: 38px; }
  .lk-how__head .lk-lead { font-size: 16px; line-height: 25px; }
  .lk-stage { order: -1; min-height: 480px; border-radius: 24px; }
  .lk-l1 { transform: scale(0.82); margin-top: 40px; }
  .lk-l2 { transform: scale(0.62); margin-top: 40px; }
  .lk-pair { flex-direction: column; gap: 12px; }
  .lk-l3 { transform: scale(0.58); margin-top: 40px; }
  .lk-d-notif { right: auto; left: 20px; top: -70px; width: 300px; }
  .lk-how-grid li { padding: 18px 16px; }
  .lk-btn--wide { width: 100%; justify-content: center; box-sizing: border-box; }

  /* Радиусы: 40 и 32 → 24, 28 → 20. */
  .lk-shot, .lk-pain__card, .lk-guest, .lk-trust, .lk-final { border-radius: 24px; }
  .lk-shot__slots, .lk-chat, .lk-scn, .lk-feat, .lk-guest__card, .lk-plan { border-radius: 20px; }
  .lk-countbar { border-radius: 20px; padding: 14px 16px; gap: 10px; }
  .lk-countbar__url { border-radius: 10px; }
  .lk-chip { white-space: nowrap; font-size: 12px; padding: 6px 11px; }

  .lk-final-btn {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px;
    padding: 16px 20px;
  }
  .lk-final__cat { width: 160px; height: 160px; right: -30px; bottom: -50px; opacity: 0.5; }
}