/* Лендинг ОБТ (/). Файл самодостаточный: site.css сюда НЕ подключается.
   Причина — палитра. В site.css золото и фон зашиты литералами (:focus-visible,
   .card:hover, .steps li::before и ещё десяток мест), переопределить их токенами
   нельзя, а править site.css нельзя: он обслуживает /privacy /rules /agreement
   /cookies и входит в контрольную сумму backups/pre-classic-20260906.
   Поэтому здесь свои примитивы с префиксом k-, и столкнуться они ни с чем не могут. */

/* ---------- шрифты: локальные, без обращения к fonts.googleapis.com ---------- */
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-cyrillic.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Forum';src:url('/assets/fonts/forum-cyrillic.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Forum';src:url('/assets/fonts/forum-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- токены: сняты с kaelara.one ---------- */
:root{
  --k-bg:#070F33; --k-bg-deep:#040A24; --k-surface:#0C1740; --k-panel:#12204F; --k-panel-h:#18295E;
  --k-scrim:7,15,51; --k-bg-deep-rgb:4,10,36;
  --k-line:rgba(98,190,255,.18); --k-line-2:rgba(98,190,255,.38);
  --k-line-ctl:rgba(98,190,255,.55);  /* поле и кнопка-обводка: 1.4.11 требует 3:1, декоративным рамкам это не нужно */
  --k-ink:#EAF4FA; --k-body:#CEDEE5; --k-mut:#A9BCCB; --k-faint:#8195A8;
  --k-accent:#62BEFF; --k-accent-h:#8ED2FF; --k-accent-ink:#041024; --k-accent-soft:rgba(98,190,255,.12);
  --k-focus:#8ED2FF;
  --k-gold:#FFBA4D;            /* только 5 мест, см. ТЗ: «золота сейчас слишком много» */
  --k-danger:#FF8A8A;
  --k-max:1120px; --k-r:14px; --k-r-sm:8px; --k-header-h:56px; --k-chip-h:39px;
  --k-display:'Forum',Georgia,'Times New Roman',serif;
  --k-font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
@media (min-width:900px){ :root{--k-header-h:64px} }
@media (min-width:1000px){ :root{--k-chip-h:0px} }

/* ---------- база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* липкий стек сверху — шапка + лента якорей; снизу — закреплённая панель.
     Без этого Tab уводил фокус под них, а клик по якорю прятал верх секции. */
  scroll-padding-top:calc(var(--k-header-h) + var(--k-chip-h) + 12px);
  scroll-padding-bottom:calc(78px + env(safe-area-inset-bottom))}
body{margin:0;background:var(--k-bg);color:var(--k-body);font-family:var(--k-font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--k-accent);text-decoration:none}
a:hover{color:var(--k-accent-h);text-decoration:underline}
:focus-visible{outline:2px solid var(--k-focus);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--k-display);font-weight:400;color:var(--k-ink);margin:0;line-height:1.14;letter-spacing:.01em}
p{margin:0}
ul,ol{margin:0;padding:0}
.k-muted{color:var(--k-mut)}
.k-faint{color:var(--k-faint);font-size:.8rem;line-height:1.5}
.k-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.k-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--k-panel);color:var(--k-ink);padding:10px 14px;border-radius:0 0 var(--k-r-sm) 0}
.k-skip:focus{left:0}
.k-container{width:min(100% - 2rem,var(--k-max));margin-inline:auto}
.k-section{padding:52px 0}
@media (min-width:900px){ .k-section{padding:80px 0} }
.k-section--alt{background:var(--k-surface)}
.k-h2{font-size:clamp(1.6rem,4.4vw,2.2rem)}
.k-lead{margin-top:10px;max-width:62ch;color:var(--k-mut)}
.k-ico{width:1em;height:1em;fill:currentColor;flex:0 0 auto;vertical-align:-.12em}

/* ---------- кнопки ---------- */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--k-font);font-weight:700;font-size:.9rem;letter-spacing:.03em;
  min-height:44px;padding:11px 20px;border-radius:var(--k-r-sm);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .16s,border-color .16s,color .16s,transform .16s}
.k-btn:hover{text-decoration:none;transform:translateY(-1px)}
.k-btn:disabled{opacity:.55;cursor:default;transform:none}
.k-btn-primary,a.k-btn-primary{background:var(--k-accent);color:var(--k-accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(98,190,255,.16)}
.k-btn-primary:hover,a.k-btn-primary:hover{background:var(--k-accent-h);color:var(--k-accent-ink)}
.k-btn-ghost,a.k-btn-ghost{background:rgba(98,190,255,.06);color:var(--k-ink);border-color:var(--k-line-ctl)}
.k-btn-ghost:hover,a.k-btn-ghost:hover{background:var(--k-accent-soft);color:var(--k-ink);border-color:var(--k-accent)}
.k-btn:active{transform:translateY(0)}
.k-btn-primary:active{filter:brightness(.93)}
.k-btn-ghost:active{background:rgba(98,190,255,.18)}
/* На фото 6-процентная заливка — фактически прозрачность: сквозь кнопку видно рисунок.
   Контекстные правила идут ПОСЛЕ общего :active — специфичность равная, побеждает порядок. */
.k-hero .k-btn-ghost,.k-band .k-btn-ghost{background:rgba(var(--k-bg-deep-rgb),.55);border-color:rgba(98,190,255,.5)}
.k-hero .k-btn-ghost:hover,.k-band .k-btn-ghost:hover{background:rgba(var(--k-bg-deep-rgb),.72);border-color:var(--k-accent)}
.k-hero .k-btn-ghost:active,.k-band .k-btn-ghost:active{background:rgba(var(--k-bg-deep-rgb),.85)}
.k-btn-lg{min-height:50px;padding:14px 26px;font-size:.98rem}
.k-cta-row{display:flex;flex-wrap:wrap;gap:12px}
.k-cta-row--center{justify-content:center}

/* ---------- шапка ---------- */
.k-header{position:sticky;top:0;z-index:40;background:rgba(var(--k-scrim),.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--k-line)}
.k-header-inner{width:min(100% - 2rem,var(--k-max));margin-inline:auto;min-height:var(--k-header-h);
  display:flex;align-items:center;gap:16px}
.k-brand{display:flex;align-items:center;flex:0 0 auto}
.k-brand img{height:26px;width:auto}
@media (min-width:900px){ .k-brand img{height:32px} }
.k-nav{display:none;gap:20px;margin-left:8px;flex:1 1 auto}
.k-nav a{color:var(--k-body);font-size:.88rem;font-weight:500;white-space:nowrap}
.k-nav a:hover{color:var(--k-accent);text-decoration:none}
.k-header-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.k-header-right .k-btn{font-size:.82rem;min-height:38px;padding:8px 16px}
.k-btn-nav.is-hidden,.k-header-right .k-btn-ghost.is-hidden{visibility:hidden}
/* Разметка отдаётся уже с is-hidden, чтобы без JS не было двух одинаковых кнопок
   на первом экране. Ручной выключатель data-header-cta="always" класс не снимает,
   поэтому возвращаем видимость стилем. */
.k-header[data-header-cta="always"] .k-btn-nav.is-hidden,
.k-header[data-header-cta="always"] .k-header-right .k-btn-ghost.is-hidden{visibility:visible}
@media (min-width:1000px){ .k-nav{display:flex} }
@media (max-width:719px){ .k-header-right .k-btn-ghost{display:none} }

/* лента якорей вместо бургер-меню: на 5 пунктов дешевле и привычнее на телефоне */
.k-chipnav{position:sticky;top:var(--k-header-h);z-index:35;min-height:var(--k-chip-h);background:rgba(var(--k-scrim),.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--k-line);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.k-chipnav::-webkit-scrollbar{display:none}
.k-chipnav ul{display:flex;gap:7px;list-style:none;padding:5px 1rem}
.k-chipnav a{scroll-snap-align:start;display:block;white-space:nowrap;font-size:.76rem;font-weight:600;
  color:var(--k-body);background:var(--k-accent-soft);border:1px solid var(--k-line);
  border-radius:999px;padding:5px 12px}
.k-chipnav a:hover{text-decoration:none;color:var(--k-accent)}
@media (min-width:1000px){ .k-chipnav{display:none} }

/* ---------- первый экран ---------- */
.k-hero{position:relative;display:flex;align-items:flex-end;isolation:isolate;
  min-height:calc(100vh - var(--k-header-h) - var(--k-chip-h) - 5px);
  min-height:calc(100svh - var(--k-header-h) - var(--k-chip-h) - 5px);
  padding:16px 0 18px}
.k-hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
/* Мобильный кроп 1080×1350: персонаж стоит в правой трети (x≈680–1080), а на узком
   экране по ширине влезает только середина. При 50% кадр обрывался на x≈906 — ровно
   по лицу. Сдвигаем вправо; текст при этом ложится на тёмную часть пещеры слева.
   На ≥1024px действует своё правило ниже, десктопный кроп другой. */
.k-hero-media img{width:100%;height:100%;object-fit:cover;object-position:90% 22%}
.k-hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--k-scrim),.42) 0%,rgba(var(--k-scrim),.8) 46%,rgba(var(--k-scrim),.98) 100%)}
/* На телефоне текст начинается примерно с 42 % высоты, а плотность заливки тратилась
   выше — там, где на картинку ещё можно смотреть. Верх приоткрываем, под текстом
   оставляем почти непрозрачным. Медиазапрос совпадает с <source media> в разметке. */
@media (max-width:1023px){
  .k-hero-scrim{background:linear-gradient(180deg,
    rgba(var(--k-scrim),.16) 0%,
    rgba(var(--k-scrim),.28) 26%,
    rgba(var(--k-scrim),.76) 42%,
    rgba(var(--k-scrim),.94) 54%,
    rgba(var(--k-scrim),.99) 100%)}
}
.k-hero-col{width:min(100% - 2rem,var(--k-max));margin-inline:auto}
.k-lockup img{height:46px;width:auto}
.k-rule{display:block;width:74px;height:2px;background:var(--k-gold);margin:12px auto 0;border-radius:2px} /* золото 1/5 */
.k-eyebrow{color:var(--k-gold);font-size:.72rem;font-weight:700;                        /* золото 2/5 */
  letter-spacing:.16em;text-transform:uppercase}
.k-h1{margin-top:8px;font-size:clamp(1.72rem,6.8vw,3.5rem);max-width:17ch}
.k-sub{margin-top:10px;max-width:52ch;color:var(--k-body);line-height:1.5;font-size:clamp(.9rem,3.2vw,1.06rem)}
.k-hero .k-cta-row{margin-top:18px}
.k-micro{margin-top:12px;color:var(--k-body);font-size:.8rem}
.k-hero .k-faint{margin-top:10px;color:var(--k-mut)}
/* На ВСЕХ ширинах «Получить уведомление» — текстовая кнопка: три полноразмерные
   в ряд не помещались в колонку героя ни при какой ширине ≥1024 и переносились.
   Заодно появляется иерархия заливка -> обводка -> текст. */
.k-hero .k-cta-row{align-items:center}
.k-hero .k-cta-row [data-obt-notify]{background:none;border:0;color:var(--k-accent);
  text-decoration:underline;text-underline-offset:3px;padding:4px 0;min-height:32px;
  font-size:.88rem;box-shadow:none}
/* Перенос на свою строку держит обёртка (она — flex-элемент на всю ширину ряда),
   а не сама ссылка. Если растягивать ссылку, текст уезжает в центр и висит между
   кнопками, а невидимая зона нажатия покрывает весь ряд. */
.k-hero .k-cta-row .k-cta-break{flex-basis:100%;display:block}
.k-hero .k-cta-row [data-obt-notify]:hover{color:var(--k-accent-h);transform:none;background:none}
.k-hero .k-cta-row [data-obt-notify]{position:relative}
.k-hero .k-cta-row [data-obt-notify]::after{content:'';position:absolute;left:0;right:0;top:-6px;bottom:-6px}
@media (max-width:719px){
  .k-hero .k-cta-row{gap:10px;margin-top:16px}
  .k-hero .k-btn-lg{min-height:46px;padding:12px 18px;font-size:.92rem}
  .k-sub+.k-sub{margin-top:8px}
  /* строка фактов обязана держаться в одну строку, иначе съедает бюджет фолда */
  .k-micro{font-size:.76rem;margin-top:10px}
  .k-hero .k-faint{margin-top:8px}
}

/* Текстовая кнопка внутри абзаца — шаг «Подпишитесь на уведомление» */
.k-btn-inline{background:none;border:0;padding:0;font:inherit;color:var(--k-accent);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.k-btn-inline:hover{color:var(--k-accent-h)}

/* Подзаголовок внутри секции «Как начать» */
.k-subhead{font-family:var(--k-font);font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--k-mut);margin-bottom:14px}
/* 320px (iPhone SE первого поколения и старые Android): первый экран не помещался
   на 81px. Ничего не прячем — только поджимаем типографику. */
@media (max-width:359px){
  .k-hero{padding:12px 0 14px}
  .k-h1{font-size:1.5rem;margin-top:6px}
  .k-sub{font-size:.86rem;margin-top:8px}
  .k-sub+.k-sub{margin-top:6px}
  .k-micro{font-size:.68rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:8px}
  .k-hero .k-cta-row{margin-top:12px;gap:8px}
  .k-hero .k-btn-lg{min-height:44px;padding:11px 14px;font-size:.88rem}
  .k-hero .k-faint{font-size:.74rem;margin-top:6px}
  .k-eyebrow{font-size:.68rem;letter-spacing:.12em}
}
@media (min-width:900px){ .k-hero{align-items:center;padding:48px 0} }

/* B-9. Альбомная ориентация телефона: при высоте 375px герой занимал 525px,
   кнопки уходили на 249px за фолд. Ставим ПОСЛЕ правила min-width:900px —
   у 667×375 срабатывают оба, и побеждать должен этот. */
@media (max-height:480px) and (orientation:landscape){
  .k-hero{min-height:auto;padding:14px 0 16px;align-items:flex-start}
  .k-h1{font-size:1.35rem;max-width:34ch}
  .k-sub{margin-top:8px;font-size:.9rem}
  .k-sub+.k-sub{display:none}
  .k-micro{margin-top:8px}
  .k-hero .k-cta-row{margin-top:12px}
  .k-hero .k-btn-lg{min-height:44px;padding:11px 16px;font-size:.9rem}
  .k-hero .k-faint{display:none}
}
@media (min-width:1024px){
  .k-hero-col{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .k-hero-col>*{grid-column:2}
  /* Персонаж нарисован справа, а текстовая колонка на десктопе тоже справа —
     она ложилась прямо на него. Отражаем картинку: после scaleX(-1) персонаж
     оказывается слева, под светлой частью затемнения, а текст справа — под тёмной.
     Само затемнение НЕ отражаем, оно и так темнеет вправо.
     object-position считается ДО трансформации, поэтому 60% сдвигает окно кадра
     вправо — чтобы после отражения персонаж не упирался в левый край экрана. */
  .k-hero-media img{object-position:60% 38%;transform:scaleX(-1)}
  .k-hero-scrim{background:linear-gradient(90deg,rgba(var(--k-scrim),.2) 0%,rgba(var(--k-scrim),.55) 42%,rgba(var(--k-scrim),.94) 72%),
    linear-gradient(180deg,rgba(var(--k-scrim),.5) 0%,rgba(var(--k-scrim),0) 34%)}
}

/* ---------- сетки и карточки ---------- */
.k-grid{display:grid;gap:14px;margin-top:22px}
.k-grid-2{grid-template-columns:1fr}
.k-grid-3{grid-template-columns:1fr}
@media (min-width:560px){ .k-grid-3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .k-grid-2{grid-template-columns:1fr 1fr} .k-grid-3{grid-template-columns:repeat(3,1fr)} .k-grid{gap:18px} }
.k-card{background:var(--k-panel);border:1px solid var(--k-line);border-radius:var(--k-r);padding:18px;
  transition:border-color .16s,background .16s,transform .16s}
.k-card:hover{border-color:var(--k-line-2);background:var(--k-panel-h);transform:translateY(-2px)}
.k-card h3{font-size:1.06rem;margin-bottom:6px}
.k-card p{color:var(--k-mut);font-size:.9rem}
.k-card .k-ico{font-size:1.5rem;color:var(--k-accent);margin-bottom:10px}
.k-card--gold .k-ico{color:var(--k-gold)}                                                                /* золото 3/5 */
a.k-card{display:flex;gap:12px;align-items:flex-start;color:inherit}
a.k-card:hover{text-decoration:none}
a.k-card .k-ico{font-size:1.5rem;margin:2px 0 0}
a.k-card strong{display:block;color:var(--k-ink);font-weight:600;margin-bottom:4px}
a.k-card span span{color:var(--k-mut);font-size:.88rem}

/* ---------- «Возможности»: два яруса вместо восьми одинаковых плиток ----------
   Восемь равных карточек читались как список, а не как рассказ о продукте:
   Парагон и новая стартовая локация — то, чего на 3.3.5 нет вообще, и они не
   должны весить столько же, сколько «Коллекции». Правила намеренно ограничены
   #features: на .k-grid-3 держатся «Почему Kaelara» и «Сообщество». */
#features .k-grid{grid-template-columns:1fr;gap:10px}
#features .k-card--lead{grid-column:1 / -1}
/* На телефоне — одна колонка. Замерено: при двух колонках карточка выходит 159px,
   текст рвётся по два слова, а суммарная высота секции та же самая — узкие колонки
   ровно настолько же выше. ТЗ прямо разрешает одну колонку на мобильном. */
@media (min-width:560px){
  #features .k-grid{grid-template-columns:repeat(4,1fr);gap:14px}
  #features .k-card--lead{grid-column:span 4}
  #features .k-card--compact{grid-column:span 2}
}
@media (min-width:1000px){
  #features .k-grid{grid-template-columns:repeat(6,1fr);gap:16px}
  #features .k-card--lead{grid-column:span 3}
  #features .k-card--compact{grid-column:span 2}
}
.k-card--lead{padding:22px 24px;border-color:var(--k-line-2);
  background:linear-gradient(160deg,#16265C 0%,var(--k-panel) 62%)}
.k-card--lead p{color:var(--k-body);font-size:.95rem}
.k-card--compact{padding:16px}

/* Перепад «заголовок/текст» держался на +2.5px кегля без разницы в насыщенности,
   а Forum — тонкая антиква: на тёмно-синем штрихи съедало сглаживанием.
   Forum остаётся маркером уровня (h1, h2, крупные карточки), мелкие — Manrope 600. */
.k-card h3{font-family:var(--k-font);font-weight:600;font-size:1rem;letter-spacing:.01em;line-height:1.3;margin-bottom:6px}
.k-card--compact h3{font-size:.98rem;margin-bottom:4px}
.k-card--compact p{font-size:.86rem;line-height:1.5}
.k-card--compact .k-ico{font-size:1.15rem;opacity:.85;margin-bottom:8px}
.k-card--lead h3{font-family:var(--k-display);font-weight:400;font-size:clamp(1.25rem,2.4vw,1.5rem);margin-bottom:8px}
.k-card--lead .k-ico{font-size:1.5rem;width:46px;height:46px;padding:11px;box-sizing:content-box;
  border-radius:12px;background:var(--k-accent-soft);border:1px solid var(--k-line);margin-bottom:14px}
@media (max-width:559px){ .k-card--lead .k-ico{width:36px;height:36px;padding:9px;margin-bottom:10px} }

/* ---------- полоса ОБТ ---------- */
.k-band{position:relative;padding:56px 0;background:var(--k-bg-deep)}
.k-band-media{position:absolute;inset:0;overflow:hidden}
.k-band-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.k-band-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--k-scrim),.78),rgba(var(--k-scrim),.94))}
.k-band>.k-container{position:relative}
@media (min-width:900px){ .k-band{padding:84px 0} }
.k-band .k-h2{font-size:clamp(1.9rem,5.2vw,2.75rem)}
/* На десктопе приоткрываем панораму справа, где нет текста. На мобильном не трогаем:
   это единственное место, где сказано про удаление персонажей. */
@media (min-width:900px){
  .k-band-media::after{background:
    linear-gradient(180deg,rgba(var(--k-scrim),.78),rgba(var(--k-scrim),.94)),
    linear-gradient(90deg,rgba(var(--k-scrim),.55) 0%,rgba(var(--k-scrim),.55) 42%,rgba(var(--k-scrim),.10) 100%)}
}
.k-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.k-facts li{border:1px solid var(--k-line-2);background:var(--k-accent-soft);border-radius:999px;
  padding:6px 14px;font-size:.84rem;font-weight:600;color:var(--k-ink)}
.k-notice{margin-top:20px;border-left:3px solid var(--k-gold);                                           /* золото 4/5 */
  background:rgba(255,186,77,.07);border-radius:0 var(--k-r-sm) var(--k-r-sm) 0;padding:14px 16px}
.k-notice strong{color:var(--k-ink)}
.k-notice p{max-width:68ch}

/* ---------- Парагон ---------- */
.k-list{list-style:none;margin-top:16px;display:grid;gap:12px}
.k-list li{position:relative;padding-left:26px;color:var(--k-body)}
.k-list li::before{content:'';position:absolute;left:6px;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--k-accent);box-shadow:0 0 0 4px var(--k-accent-soft)}
.k-figure{background:var(--k-panel);border:1px solid var(--k-line);border-radius:var(--k-r);padding:18px}
.k-figure-img{width:100%;height:auto;display:block;border-radius:var(--k-r-sm)}
.k-figcap{margin-top:12px;color:var(--k-faint);font-size:.8rem}

/* ---------- шаги ---------- */
.k-steps{list-style:none;display:grid;gap:14px;margin-top:22px}
.k-steps li{position:relative;padding-left:52px;min-height:36px}
.k-steps li::before{content:counter(list-item);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--k-display);font-size:1.05rem;
  color:var(--k-accent);border:1px solid var(--k-line-2);background:var(--k-accent-soft)}  /* золото 5/5 */
.k-steps strong{color:var(--k-ink);font-weight:600}
.k-steps p{color:var(--k-mut);font-size:.9rem;margin-top:2px;max-width:72ch}

/* ---------- FAQ ---------- */
.k-faq{display:grid;gap:10px;margin-top:22px}
.k-faq details{background:var(--k-panel);border:1px solid var(--k-line);border-radius:var(--k-r-sm)}
.k-faq summary{cursor:pointer;padding:14px 16px;font-weight:600;color:var(--k-ink);list-style:none}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq summary::after{content:'+';float:right;color:var(--k-accent);font-weight:400;font-size:1.25rem;line-height:1}
.k-faq details[open] summary::after{content:'−'}
.k-faq summary:hover{color:var(--k-accent)}
.k-faq p{padding:0 16px 14px;color:var(--k-mut);font-size:.92rem;max-width:68ch}

/* ---------- финал и подвал ---------- */
.k-final{background:var(--k-bg-deep);text-align:center}
.k-final .k-lead{margin-inline:auto}
.k-footer{background:var(--k-bg-deep);border-top:1px solid var(--k-line);padding:34px 0 28px;color:var(--k-faint);font-size:.84rem}
.k-footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px}
.k-footer nav a{color:var(--k-mut);font-size:.84rem}
.k-footer p{margin-bottom:6px}
.k-age{display:inline-block;border:1px solid var(--k-line-2);border-radius:4px;padding:0 5px;margin-right:6px;font-size:.74rem}

/* ---------- закреплённая панель: одна кнопка ---------- */
.k-sticky{position:fixed;left:0;right:0;bottom:0;z-index:38;display:flex;gap:10px;align-items:center;
  padding:10px 1rem calc(10px + env(safe-area-inset-bottom));
  background:rgba(var(--k-scrim),.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--k-line);transition:transform .2s,opacity .2s}
.k-sticky .k-btn{flex:1 1 auto}
.k-sticky.hide{transform:translateY(110%);opacity:0;pointer-events:none}
body.k-has-sticky{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
@media (min-width:900px){ .k-sticky{display:none!important} body.k-has-sticky{padding-bottom:0} html{scroll-padding-bottom:0} }

/* ---------- попап ---------- */
.k-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(3,6,18,.76);opacity:0;transition:opacity .18s}
.k-modal.open{opacity:1}
.k-modal-panel{position:relative;width:min(100%,460px);max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--k-surface);border:1px solid var(--k-line-2);border-radius:var(--k-r);padding:24px;
  transform:translateY(10px);transition:transform .18s}
.k-modal.open .k-modal-panel{transform:none}
.k-modal-panel h2{font-size:1.4rem}
.k-modal-lead{margin-top:10px;color:var(--k-mut);font-size:.9rem}
.k-modal-x{position:absolute;top:8px;right:8px;width:38px;height:38px;border:0;border-radius:var(--k-r-sm);
  background:transparent;color:var(--k-mut);font-size:1.5rem;line-height:1;cursor:pointer}
.k-modal-x:hover{color:var(--k-ink);background:var(--k-accent-soft)}
body.k-modal-open{overflow:hidden}
@media (max-width:480px){
  .k-modal{padding:0;align-items:flex-end}
  .k-modal-panel{width:100%;max-height:92vh;border-radius:var(--k-r) var(--k-r) 0 0;border-bottom:0}
}

/* ---------- поля формы ---------- */
.k-field{margin-top:16px}
.k-field label{display:block;font-size:.84rem;font-weight:600;color:var(--k-body);margin-bottom:6px}
.k-field input[type=email]{width:100%;background:var(--k-bg);color:var(--k-ink);font:inherit;font-size:16px;
  border:1px solid var(--k-line-ctl);border-radius:var(--k-r-sm);padding:12px 14px}
.k-field input[type=email]::placeholder{color:var(--k-faint)}
.k-field input[aria-invalid=true]{border-color:var(--k-danger)}
.k-err{min-height:1.1em;margin-top:6px;font-size:.82rem;color:var(--k-danger)}
.k-err.notice{color:var(--k-mut)}
.k-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#obt-form .k-btn-primary{width:100%;margin-top:16px}
.k-consent{margin-top:12px;color:var(--k-faint);font-size:.76rem;line-height:1.5}
.k-consent a{color:var(--k-mut);text-decoration:underline}
.k-formbox.hide{display:none}
.k-success{display:none}
.k-success.show{display:block}
.k-success h2{margin-bottom:8px}
.k-success-socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.k-success-socials .k-btn{flex:1 1 auto;min-width:120px}

/* Состояние «уже подписан». Блок стоит в конце файла намеренно: правила
   .k-hero .k-btn-ghost и .k-band .k-btn-ghost имеют ту же специфичность (0,2,0),
   и раньше побеждали они — кнопка оставалась полноразмерной и залитой. */
.k-btn.is-done,.k-hero .k-btn.is-done,.k-band .k-btn.is-done{
  background:none;border-color:transparent;min-height:auto;padding:11px 0;
  color:var(--k-faint);font-weight:400;box-shadow:none;text-decoration:none}
.k-btn.is-done:hover,.k-hero .k-btn.is-done:hover,.k-band .k-btn.is-done:hover{
  transform:none;background:none;color:var(--k-faint)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .k-btn:hover,.k-card:hover{transform:none}
}