/* ══════════════════════════════════════════════════════════════
   SOVA KOD · сайт · общий слой
   Тот же графит и янтарь, что в кабинете, но воздуха больше:
   маркетинговая страница читается с расстояния, а не изучается.
   ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}

:root{
  /* Без этого браузер считает страницу светлой: полоса прокрутки выходила белой
     поверх чёрного макета, а системные части форм и автозаполнение — светлыми. */
  color-scheme:dark;
  --bg:#060607;
  --skin:rgba(255,255,255,.022);
  --skin-2:rgba(255,255,255,.04);
  --edge:rgba(255,255,255,.07);
  --edge-soft:rgba(255,255,255,.035);
  --text:#f2f2f4;
  --muted:#9a9aa4;
  /* Был #7a7a86: на подложках карточек давал 4,3–4,4 — ниже нормы для мелкого текста.
     Осветлён ровно настолько, чтобы везде выйти за 4,5, не ломая иерархию с --muted. */
  --dim:#83838e;
  --amber:#f5b544;
  --amber-dim:rgba(245,181,68,.42);
  --amber-text:rgba(245,181,68,.86);
  --ok:#57d49b;
  --warn:#e8804a;
  --r:22px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --din:Bahnschrift,"DIN Alternate","Segoe UI Variable Display",system-ui,sans-serif;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --code:"Cascadia Mono",Consolas,"SF Mono",monospace;
}
html{scroll-behavior:smooth}
/* Шапка липкая, поэтому переход по якорю ставил раздел ровно под неё: заголовок
   срезался сверху, а надзаголовок исчезал совсем. Резервируем её высоту плюс воздух. */
section[id],main [id]{scroll-margin-top:92px}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 40% at 50% -10%, rgba(245,181,68,.08), transparent 70%),
    radial-gradient(40% 30% at 90% 5%, rgba(120,170,255,.03), transparent 72%);
}
::selection{background:rgba(245,181,68,.26);color:#fff}
h1,h2,h3,.h1,.h2,.h3{text-wrap:balance}
p,.lead{text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid rgba(245,181,68,.6);outline-offset:3px;border-radius:10px}
:focus:not(:focus-visible){outline:none}
.din{font-family:var(--din);font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--amber);color:#111;
  padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ── Каркас страницы ──────────────────────────────────────── */
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 24px}
.sec{padding:96px 0}
.sec-tight{padding:64px 0}
@media(max-width:760px){ .sec{padding:64px 0} .wrap{padding:0 18px} }
/* На телефоне блоки идут в столбик, и страница вытягивается на полтора десятка экранов.
   Воздух между секциями там работает против чтения — прокрутки становится больше,
   чем смысла. Ужимаем отступы, не трогая сам текст. */
@media(max-width:560px){
  .sec{padding:44px 0}
  .sec-tight{padding:38px 0}
  .cards,.doors,.kit,.trust,.steps{gap:14px}
  .card,.door,.kit-i,.tr,.step{padding:20px}
  .lead{margin-top:16px}
  .h2{line-height:1.16}
}

/* ── Шапка ────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);
  background:rgba(6,6,7,.72);border-bottom:1px solid var(--edge-soft)}
.hdr-in{display:flex;align-items:center;gap:26px;height:66px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;padding:6px 0}
.logo img{width:32px;height:32px;border-radius:9px}
.logo-t{font-family:var(--din);font-size:16px;font-weight:600;letter-spacing:.05em}
.mnav{display:flex;align-items:center;gap:4px;margin-left:8px}
.mnav a{padding:8px 13px;border-radius:10px;font-size:14.5px;color:var(--muted);text-decoration:none;
  transition:color .25s var(--ease),background .25s var(--ease)}
.mnav a:hover{color:var(--text);background:var(--skin)}
.mnav a[aria-current="page"]{color:var(--text);background:var(--skin-2)}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:18px}
/* «Войти» было второй кнопкой рядом с главным действием: две одинаковые по весу
   цели в шапке заставляют выбирать вместо того, чтобы нажать. Вход нужен тем,
   кто и так его ищет, — делаем ссылкой. */
.hdr-login{font-size:14.5px;color:var(--muted);text-decoration:none;white-space:nowrap;
  padding:8px 2px;transition:color .25s var(--ease)}
.hdr-login:hover{color:var(--text)}
/* В свёрнутом меню входа не было вовсе: на телефоне вернувшийся человек упирался в тупик.
   Но пункт живёт внутри общего меню, поэтому на широком экране его надо прятать —
   иначе в шапке оказывается два входа подряд. */
.mnav-login{display:none}
@media(max-width:900px){
  .mnav-login{display:block;margin-top:6px;border-top:1px solid var(--edge-soft);
    padding-top:14px !important;color:var(--amber-text) !important}
}
.burger{display:none;width:42px;height:42px;border:1px solid var(--edge);border-radius:12px;
  background:none;color:var(--text);cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:19px;height:19px}
/* В шапке кнопка ломалась на две строки и раздувала её до 90 px, прижимая логотип.
   На узком экране оставляем короткое слово: длинную версию всё равно повторяет
   первый экран парой сантиметров ниже. */
.hdr-cta{white-space:nowrap}
/* Специфичность как у .btn, но правило объявлено раньше в файле, поэтому берём
   селектор посильнее — иначе базовые отступы кнопки перекрывают эти. */
@media(max-width:560px){
  .wide-only{display:none}
  .hdr-r .hdr-cta{padding:11px 16px;font-size:14.5px}
}
/* На 320 px (iPhone SE, а ещё любой телефон с крупным системным шрифтом) шапка
   не помещалась и уводила всю страницу в горизонтальную прокрутку. Логотип и
   кнопку не режем — сокращаем только зазоры между ними. */
@media(max-width:359px){
  .hdr-in{gap:12px}
  .hdr-r{gap:10px}
  /* Подпись кнопки на разных страницах разной длины («Начать», «Получить счёт»),
     поэтому одних зазоров мало — на самых узких экранах ужимаем и саму кнопку. */
  .hdr-r .hdr-cta{padding:10px 12px;font-size:14px}
  .logo-t{font-size:15px}
}
@media(max-width:900px){
  .mnav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:2px;padding:12px 18px 18px;background:rgba(9,9,11,.98);border-bottom:1px solid var(--edge)}
  /* Панель на треть экрана выпрыгивала одним кадром — глазу негде было зацепиться
     за то, откуда она взялась. Съезжает из-под шапки за 0,2 с; discrete-переход
     display оставляет её в DOM на время ухода, а @starting-style задаёт, с чего
     начинать появление. Где этого не понимают — просто мгновенно, как раньше. */
  .mnav{opacity:0;transform:translateY(-10px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),display .2s allow-discrete}
  .mnav.open{display:flex;opacity:1;transform:none}
  @starting-style{ .mnav.open{opacity:0;transform:translateY(-10px)} }
  .mnav a{padding:13px}
  .burger{display:flex}
  .hdr-login{display:none}          /* на узком экране вход живёт в свёрнутом меню */
}

/* ── Кнопки ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:13px;font-size:15px;font-weight:500;font-family:var(--sans);
  border:1px solid var(--edge);background:var(--skin);color:var(--text);cursor:pointer;text-decoration:none;
  transition:transform .2s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{background:var(--skin-2);border-color:rgba(255,255,255,.14)}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--amber);border-color:var(--amber);color:#151109;font-weight:600}
.btn.solid:hover{background:#ffc25c;border-color:#ffc25c}
.btn.ghost{background:transparent}
.btn.lg{padding:16px 28px;font-size:16px;border-radius:15px}
.btn svg{width:17px;height:17px}

/* ── Типографика секций ───────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-text);margin-bottom:16px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--amber-dim)}
/* При 62 px в колонку влезало 18 знаков, и обещание разваливалось на три строки.
   На 52 px помещается «Все нейросети для кода» целиком — перенос падает по смыслу. */
.h1{font-family:var(--din);font-size:clamp(34px,4.2vw,52px);line-height:1.08;font-weight:600;letter-spacing:-.01em}
.h2{font-family:var(--din);font-size:clamp(28px,3.6vw,42px);line-height:1.12;font-weight:600}
.h3{font-size:19px;font-weight:600}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--muted);margin-top:20px;max-width:620px}
.note{font-size:14px;color:var(--dim)}

/* ── Первый экран ─────────────────────────────────────────── */
.hero{padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,88px)}
/* Колонка под текст была 604 px при заголовке в 68 px — он разваливался на три
   строки, и обещание читалось не с одного взгляда. Отдаём тексту больше места,
   иллюстрацию делаем чуть уже: она и так читается. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,460px);gap:48px;align-items:center}
@media(max-width:1000px){ .hero-grid{grid-template-columns:1fr;gap:40px} }
/* Без этого длинная строка внутри колонки (например, кусок настройки) распирает
   сетку и уводит вбок всю страницу вместо того, чтобы прокручиваться самой. */
.hero-grid>*{min-width:0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-under{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;font-size:14px;color:var(--dim)}
.hero-under span{display:inline-flex;align-items:center;gap:7px}
.hero-under svg{width:15px;height:15px;color:var(--ok)}

/* Иллюстрация: запрос уходит в один ключ и расходится по моделям */
.router{position:relative;border:1px solid var(--edge);border-radius:var(--r);padding:26px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008))}
.router-t{font-size:12.5px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.router-key{display:flex;align-items:center;gap:12px;margin:16px 0 18px;padding:13px 15px;border-radius:14px;
  border:1px solid var(--amber-dim);background:rgba(245,181,68,.07);font-family:var(--code);font-size:13.5px}
.router-key b{font-weight:400;color:var(--amber-text)}
.rays{display:grid;gap:10px}
.ray{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;
  border:1px solid var(--edge-soft);background:var(--skin);transition:border-color .3s var(--ease)}
.ray.on{border-color:var(--amber-dim);background:rgba(245,181,68,.05)}
.ray-n{font-size:14px;font-weight:500}
.ray-p{margin-left:auto;font-family:var(--din);font-size:14px;color:var(--muted);white-space:nowrap}
/* Зачёркнутая цена — цена того же запроса напрямую у поставщика. Разница должна
   быть видна глазами, а не заявлена словами «дешевле в N раз». */
.ray-p s{color:var(--dim);text-decoration-color:rgba(232,128,74,.7);margin-right:6px}
.ray-p b{font-weight:600;color:var(--text)}
.ray.on .ray-p b{color:var(--amber)}
/* На телефоне иллюстрация с ценами начиналась на 766-й точке — то есть после
   полутора экранов прокрутки. Это главное доказательство, поэтому поджимаем
   отступы и высоту строк: блок целиком становится компактнее, а цены —
   ближе к началу. Ничего не прячем: список моделей остаётся полным. */
@media(max-width:560px){
  .hero{padding-top:32px}
  .lead{margin-top:16px}
  .hero-cta{margin-top:24px}
  .hero-under{margin-top:20px;gap:12px}
  .hero-grid{gap:26px}
  .router{padding:18px 16px;border-radius:18px}
  .router-key{margin:12px 0 14px;padding:11px 13px}
  .rays{gap:7px}
  .ray{padding:9px 12px}
  .ray-n{font-size:13.5px}
  .router .note{font-size:13px;margin-top:12px}
}
.ray-d{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16);flex:none}
.ray.on .ray-d{background:var(--amber)}


/* ── Плитки «что это» ─────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:980px){ .cards{grid-template-columns:1fr;gap:16px} }
.card{border:1px solid var(--edge);border-radius:var(--r);padding:24px 24px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.008));
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.card:hover{border-color:rgba(255,255,255,.13);transform:translateY(-2px)}
/* Иллюстрация объясняет плитку быстрее заголовка, поэтому стоит первой.
   Все три лежат в одинаковой утопленной рамке: раньше рамка была только у третьей,
   и ряд читался как три разные по плотности картинки. */
.card-art{margin:0 0 18px;padding:12px 10px;border:1px solid var(--edge-soft);border-radius:15px;
  background:rgba(0,0,0,.22)}
.card-art svg{width:100%;height:auto;display:block}
.card .h3{margin-bottom:10px}
.card-p{font-size:15px;color:var(--muted);line-height:1.62}
/* Каскад: плитки появляются одна за другой с шагом в 90 мс — взгляд успевает
   пройти слева направо. Все три разом читаются как рывок. */
.cards .rise:nth-child(2){transition-delay:.09s}
.cards .rise:nth-child(3){transition-delay:.18s}
@media(prefers-reduced-motion:reduce){ .cards .rise{transition-delay:0s !important} }


/* ── Подписка против баланса ──────────────────────────────── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media(max-width:900px){ .vs{grid-template-columns:1fr;gap:16px} }
.vs-col{border:1px solid var(--edge);border-radius:var(--r);padding:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.006))}
/* Правая колонка — наша: подсвечена, но не кричит */
.vs-col.good{border-color:var(--amber-dim);
  background:linear-gradient(180deg,rgba(245,181,68,.055),rgba(245,181,68,.012))}
.vs-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--edge-soft)}
/* Это заголовки колонок, а не просто крупный текст: без них диктор читает
   два списка подряд без всякого контекста, «плюс» и «минус» сливаются. */
.vs-t{font-size:16px;font-weight:600;margin:0}
.vs-p{margin-left:auto;font-size:15px;color:var(--muted);white-space:nowrap}
.vs-col.good .vs-p{color:var(--amber-text)}
.vs-list{list-style:none;display:grid;gap:14px}
.vs-list li{display:flex;gap:12px;font-size:14.5px;color:var(--muted);line-height:1.55}
.vs-list b{color:var(--text);font-weight:600}
/* Значок дублируется словом в тексте пункта, поэтому цвет — не единственный носитель смысла */
.vs-m{flex:none;width:20px;height:20px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:12px;margin-top:1px}
.vs-m.bad{background:rgba(232,128,74,.14);color:var(--warn)}
.vs-m.ok{background:rgba(87,212,155,.14);color:var(--ok)}
.vs-fair{margin-top:18px;padding-top:16px;border-top:1px solid var(--edge-soft);
  font-size:13.5px;color:var(--dim);line-height:1.6}
.vs-plus{margin-top:18px;padding-top:16px;border-top:1px solid rgba(245,181,68,.18);
  font-size:13.5px;color:var(--muted);line-height:1.6}
/* Вывод одной цифрой */
.vs-sum{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:20px;
  border:1px solid var(--edge);border-radius:var(--r);padding:22px 24px;background:var(--skin)}
.vs-sum-n{font-size:44px;font-weight:600;color:var(--amber);line-height:1}
.vs-sum-t{font-size:17px;font-weight:600}
/* Текст сжимается, кнопка остаётся в строке: иначе на средних ширинах она
   срывается вниз и висит справа под пустотой — читается как сбой вёрстки. */
.vs-sum-c{flex:1 1 280px;min-width:0}
.vs-sum-b{margin-left:auto;flex:none}
@media(max-width:700px){
  .vs-sum{gap:14px}
  .vs-sum-b{margin-left:0;width:100%}
}

/* ── Калькулятор «сколько стоит» ──────────────────────────── */
/* Главный вопрос после сравнения — «а сколько выйдет у меня». Отвечаем
   не таблицей, а одним движением ползунка: считать в уме никто не будет. */
/* Без скрипта ползунок двигается, а сумма стоит на месте — человек видит чужое число
   и считает его своим. Поэтому калькулятор показываем только когда скрипт жив. */
.calc{display:none;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:26px;margin-top:30px;
  border:1px solid var(--edge);border-radius:var(--r);background:var(--skin);padding:26px}
.js .calc{display:grid}
.есть-скрипт{display:none}
.js .есть-скрипт{display:inline}
.js .нет-скрипта{display:none}
/* Если у такого блока есть собственное правило display (например, .fnd — flex),
   оно объявлено позже и перебивает «спрятать». Поэтому прячем явно и жёстко. */
html:not(.js) .есть-скрипт{display:none !important}
.calc-nojs{margin-top:30px;border:1px solid var(--edge);border-radius:var(--r);background:var(--skin);
  padding:24px;font-size:15px;color:var(--muted);line-height:1.7}
.calc-nojs b{color:var(--text);font-weight:600}
.calc-f{border:0;padding:0;margin:0 0 26px}
.calc-f:last-of-type{margin-bottom:0}
.calc-lg{font-size:13.5px;color:var(--muted);margin-bottom:11px}
.calc-seg{display:flex;flex-wrap:wrap;gap:8px}
/* Сам переключатель прячем, нажимаем по подписи. pointer-events обязателен:
   без него невидимые кружки лежат поверх подписей и съедают клики. */
.calc-seg input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.calc-seg label{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  border:1px solid var(--edge);border-radius:13px;font-size:14.5px;color:var(--muted);cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.calc-seg label:hover{color:var(--text);background:var(--skin-2)}
.calc-seg input:checked+label{border-color:var(--amber-dim);color:var(--text);background:var(--skin-2)}
.calc-seg input:focus-visible+label{outline:2px solid rgba(245,181,68,.6);outline-offset:3px}
.calc-n{display:flex;align-items:baseline;gap:9px;margin-bottom:2px}
.calc-n b{font-family:var(--din);font-size:26px;font-weight:600;color:var(--text)}
.calc-n span{font-size:14px;color:var(--muted)}
.calc-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:none;cursor:pointer}
.calc-range::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--skin-2);
  border:1px solid var(--edge)}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--amber);border:0;margin-top:-10px;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.calc-range::-moz-range-track{height:6px;border-radius:99px;background:var(--skin-2);border:1px solid var(--edge)}
.calc-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--amber);border:0}
.calc-range:focus-visible{outline:2px solid rgba(245,181,68,.6);outline-offset:2px;border-radius:12px}
.calc-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dim)}
.calc-out{border:1px solid var(--amber-dim);border-radius:16px;background:rgba(245,181,68,.05);
  padding:22px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.calc-sum{font-family:var(--din);font-size:42px;font-weight:600;color:var(--amber);line-height:1.05;
  font-variant-numeric:tabular-nums}
.calc-sub{font-size:15px;font-weight:600}
.calc-cmp{margin-top:12px;padding-top:12px;border-top:1px solid rgba(245,181,68,.18);
  font-size:13.5px;color:var(--muted);line-height:1.6}
.calc-cmp s{color:var(--dim)}
.calc-cmp b{color:var(--text);font-weight:600}
.calc-free{margin-top:18px;font-size:13.5px;color:var(--muted);line-height:1.6}
.calc-free b{color:var(--amber-text);font-weight:600}
.calc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.calc-note{flex:1 1 260px;min-width:0;font-size:12.5px;color:var(--dim);line-height:1.6}
@media(max-width:860px){
  .calc{grid-template-columns:minmax(0,1fr);padding:22px}
  .calc-out{order:-1}          /* на телефоне ответ показываем раньше настроек */
}

/* ── Три двери «кому подходит» ────────────────────────────── */
/* Дальше у людей расходятся вопросы: бухгалтерии нужен договор, студии — расход
   по клиентам, одному разработчику — быстрый старт. Даём три двери, а не один текст. */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px}
.door{position:relative;display:flex;flex-direction:column;border:1px solid var(--edge);
  border-radius:var(--r);background:var(--skin);padding:24px;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.door:hover{border-color:var(--amber-dim);background:var(--skin-2);transform:translateY(-2px)}
/* Нажимается вся карточка, значит и рамка фокуса должна быть у карточки: контур
   вокруг одного заголовка не совпадал с тем, что реально сработает по Enter. */
.door:focus-within{border-color:var(--amber-dim);outline:2px solid rgba(245,181,68,.6);outline-offset:3px}
.door-t a:focus-visible{outline:none}
.door-art{height:96px;margin-bottom:16px;display:flex;align-items:center;justify-content:center}
.door-art svg{width:100%;height:100%}
.door-t{font-size:18px;font-weight:600;margin-bottom:8px}
/* Ссылка растянута на всю карточку: нажимается любое место, а диктору читается
   только заголовок — иначе именем ссылки становится весь текст блока. */
.door-t a{text-decoration:none}
.door-t a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.door-p{font-size:14.5px;color:var(--muted);line-height:1.65;margin-bottom:16px}
.door-l{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.door-l span{display:flex;gap:9px;font-size:13.5px;color:var(--muted);line-height:1.5}
.door-l svg{flex:none;width:15px;height:15px;margin-top:3px;color:var(--amber-text)}
/* Раньше это была просто подпись со стрелкой, и её принимали за часть текста.
   Делаем её «капсулой»-переходом: сразу читается как кнопка, по которой можно
   уйти к своему случаю. Нажимается по-прежнему вся карточка. */
.door-go{align-self:flex-start;margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--amber-text);
  padding:8px 14px;border:1px solid var(--edge);border-radius:999px;background:var(--skin);
  transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
/* Когда под текстом нет списка галочек, капсула вставала по концу абзаца — и в
   ряду карточки получались со ступенькой. Прижимаем её к низу карточки. */
.door-p + .door-go{margin-top:auto}
.door-go svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.door:hover .door-go{border-color:var(--amber-dim);background:rgba(245,181,68,.12)}
.door:hover .door-go svg{transform:translateX(3px)}
/* После того как карточки появились, переход коротко «загорается» — по очереди
   слева направо. Взгляд успевает понять: сюда можно нажать и увидеть свой случай.
   Кадры 0 % и 100 % совпадают с покоем, поэтому наведение работает и после вспышки. */
@keyframes doorGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(245,181,68,0);border-color:var(--edge);background:var(--skin)}
  32%,46%{box-shadow:0 0 0 5px rgba(245,181,68,.16);border-color:var(--amber-dim);background:rgba(245,181,68,.16)}
}
.js .doors .door.seen .door-go{animation:doorGlow 1.3s var(--ease) .55s}
.js .doors .door:nth-child(2).seen .door-go{animation-delay:.8s}
.js .doors .door:nth-child(3).seen .door-go{animation-delay:1.05s}
/* Линия-путь под заголовком «Кто вы?»: три узла в порядке роста — разработчик,
   студия, компания. Когда шапка появилась, по линии слева направо пробегает искра,
   а узлы загораются один за другим: наглядный переход между тремя случаями. */
.who-path{position:relative;margin:22px 0 4px;max-width:560px;
  display:grid;grid-template-columns:repeat(3,1fr);align-items:start}
.who-path .wp-line{position:absolute;left:16.6667%;right:16.6667%;top:6px;height:2px;
  background:var(--edge);border-radius:2px;overflow:hidden}
.who-path .wp-line::after{content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(90deg,transparent 0,var(--amber) 42%,var(--amber) 58%,transparent 100%);
  background-size:180% 100%;background-position:150% 0}
.who-path .wp-node{display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;padding:0 6px}
.who-path .wp-dot{position:relative;z-index:1;flex:none;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--edge);background:var(--bg)}
.who-path .wp-label{font-size:13px;line-height:1.25;color:var(--muted);font-weight:500}
/* 0 % и 100 % совпадают с покоем — после проигрыша ничего не «прыгает». */
@keyframes wpSpark{0%{opacity:0;background-position:150% 0}12%{opacity:1}88%{opacity:1}100%{opacity:0;background-position:-70% 0}}
@keyframes wpDot{
  0%{border-color:var(--edge);background:var(--bg);box-shadow:0 0 0 0 rgba(245,181,68,0)}
  45%{border-color:var(--amber);background:var(--amber);box-shadow:0 0 0 6px rgba(245,181,68,.16)}
  100%{border-color:var(--amber-dim);background:var(--amber-dim);box-shadow:0 0 0 0 rgba(245,181,68,0)}}
.js #who .rise.seen .wp-line::after{animation:wpSpark 1.7s var(--ease) .15s}
.js #who .rise.seen .wp-node:nth-of-type(1) .wp-dot{animation:wpDot .7s var(--ease) .35s both}
.js #who .rise.seen .wp-node:nth-of-type(2) .wp-dot{animation:wpDot .7s var(--ease) .75s both}
.js #who .rise.seen .wp-node:nth-of-type(3) .wp-dot{animation:wpDot .7s var(--ease) 1.15s both}
@media(max-width:560px){ .who-path{max-width:none} .who-path .wp-label{font-size:12px} }
@media(max-width:900px){ .doors{grid-template-columns:minmax(0,1fr)} }
/* В ряд картинки задают ритм, а в столбик превращаются в 288 px пустой прокрутки
   между смыслом. На телефоне оставляем их, но вдвое ниже. */
@media(max-width:560px){ .door-art{height:56px;margin-bottom:12px} }

/* ── Поиск по базе знаний ─────────────────────────────────── */
/* Специфичность выше, чем у общего «.js .есть-скрипт{display:inline}», иначе
   строка поиска теряет flex и иконка с кнопкой разъезжаются. */
.fnd,.js .fnd{position:relative;display:flex;align-items:center;margin-top:28px;max-width:560px}
.js .fnd-n{display:block}
.fnd-i{position:absolute;left:16px;width:18px;height:18px;color:var(--dim);pointer-events:none}
.fnd-in{width:100%;min-height:52px;padding:12px 108px 12px 46px;font:inherit;font-size:15px;
  color:var(--text);background:var(--skin);border:1px solid var(--edge);border-radius:14px}
.fnd-in::placeholder{color:var(--dim)}
/* Свой крестик браузера убираем: он рисуется рядом с кнопкой «Очистить», выглядит
   чужеродно и занимает всего десяток пикселей — пальцем в него не попасть. */
.fnd-in::-webkit-search-cancel-button,
.fnd-in::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.fnd-in:focus-visible{outline:2px solid rgba(245,181,68,.6);outline-offset:2px}
/* 44 px — минимальный размер, в который уверенно попадает палец */
.fnd-x{position:absolute;right:5px;min-height:44px;padding:8px 14px;font:inherit;font-size:13.5px;
  color:var(--muted);background:var(--skin-2);border:1px solid var(--edge);border-radius:10px;cursor:pointer}
.fnd-x:hover{color:var(--text)}
/* Строка «Ничего не нашлось по запросу …» повторяет введённое целиком. Запрос без
   пробелов (случайный набор, вставленный ключ) не переносился и растягивал страницу
   вбок на телефоне — 441 px при экране 375. Рвём такое слово по месту. */
.fnd-n{margin-top:10px;font-size:13.5px;color:var(--muted);min-height:20px;overflow-wrap:anywhere}
/* ── Валюта у каждой таблицы цен ────────────────────────────
   Один переключатель на всю страницу терялся в первом экране: у таблицы, где он
   и нужен, ничто не подсказывало, что цифры можно посмотреть в долларах. Ставим
   маленький рядом с каждым заголовком; нажатие в одном меняет все три. */
.ph-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cur-mini{display:inline-flex;border:1px solid var(--edge);border-radius:10px;overflow:hidden;flex:none}
.cur-mini button{min-width:46px;min-height:38px;padding:0 12px;border:none;background:transparent;
  color:var(--dim);font:inherit;font-size:14px;font-family:var(--din);cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease)}
.cur-mini button:hover{color:var(--text);background:var(--skin)}
.cur-mini button[aria-pressed="true"]{background:var(--skin-2);color:var(--amber-text)}
.cur-mini button:focus-visible{outline:2px solid rgba(245,181,68,.6);outline-offset:-2px}
@media(max-width:560px){ .cur-mini button{min-height:44px} }
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.toc a{padding:11px 14px;border:1px solid var(--edge);border-radius:11px;font-size:14px;
  color:var(--muted);text-decoration:none;transition:color .2s var(--ease),border-color .2s var(--ease)}
.toc a:hover{color:var(--text);border-color:var(--amber-dim)}
.empty{border:1px solid var(--edge);border-radius:var(--r);background:var(--skin);padding:38px 30px;text-align:center}
.empty-t{font-size:20px;font-weight:600;margin-bottom:10px}
.empty-p{font-size:14.5px;color:var(--muted);line-height:1.7;max-width:52ch;margin:0 auto 22px}
.empty-b{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── Кусок настройки ──────────────────────────────────────── */
/* Длинные строки не переносим молча: код с переносом читается неверно,
   поэтому даём блоку свою прокрутку. */
.code{font-family:var(--code);font-size:13px;line-height:1.9;color:var(--text);
  background:rgba(0,0,0,.35);border:1px solid var(--edge);border-radius:14px;
  padding:16px 18px;white-space:pre-wrap;overflow-wrap:anywhere}
.code .c-c{color:var(--dim)}
.code .c-k{color:var(--muted)}
.code .c-v{color:var(--amber)}

/* ── Таблица цен ──────────────────────────────────────────── */
/* Обёртка со своей прокруткой: на телефоне таблица не должна тащить вбок всю страницу */
.ptable-wrap{margin-top:28px;border:1px solid var(--edge);border-radius:var(--r);background:var(--skin);
  overflow-x:auto}
.ptable{width:100%;border-collapse:collapse;min-width:640px}
.ptable th,.ptable td{padding:15px 20px;text-align:left;font-size:14.5px;vertical-align:top}
.ptable thead th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  font-weight:600;border-bottom:1px solid var(--edge)}
.ptable tbody tr+tr th,.ptable tbody tr+tr td{border-top:1px solid var(--edge-soft)}
.ptable tbody th{font-weight:600;white-space:nowrap}
.ta-r{text-align:right !important}
.p-for{color:var(--muted)}
.p-our{color:var(--amber);font-weight:600;font-size:16px;white-space:nowrap}
.p-their{color:var(--dim);text-decoration:line-through;white-space:nowrap}
/* Выгода — главная цифра в таблице, поэтому она зелёная и не зачёркнута */
.p-win{color:var(--ok);font-weight:600;white-space:nowrap}
/* В сравнительной таблице правая колонка — наша сторона, её видно сразу */
.p-good{color:var(--text)}
.ptable td.p-good{background:rgba(245,181,68,.045)}
.pnote{margin-top:14px;font-size:13px;color:var(--dim);line-height:1.7;max-width:78ch}
/* Мобилка: таблицы сравнения .ptable → карточки (строка = карточка), без бокового скролла.
   Подпись столбца берётся из шапки через data-label (скрипт на странице). */
@media(max-width:560px){
  .ptable-wrap{overflow-x:visible}
  .ptable{display:block;min-width:0}
  .ptable thead{display:none}
  .ptable tbody{display:block}
  .ptable tr{display:block;border:1px solid var(--edge);border-radius:14px;background:var(--skin);
    padding:14px 16px;margin-bottom:12px}
  .ptable tbody th[scope=row]{display:block;font-size:15px;color:var(--text);margin-bottom:8px;
    padding:0;white-space:normal;border:none}
  .ptable td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-align:right;
    padding:8px 0;border-top:1px solid var(--edge-soft);white-space:normal}
  .ptable td::before{content:attr(data-label);color:var(--dim);font-size:12px;text-align:left;
    flex:none;white-space:nowrap;padding-right:10px}
  .ptable td:not([data-label])::before{display:none}
  .ptable td.p-good{background:transparent}
}

/* ── Три шага ─────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px;list-style:none}
.step{position:relative;border:1px solid var(--edge);border-radius:var(--r);background:var(--skin);padding:24px}
.step-n{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;
  background:rgba(245,181,68,.12);color:var(--amber);font-size:19px;font-weight:600;margin-bottom:14px}
.step-t{font-size:17px;font-weight:600;margin-bottom:8px}
.step-p{font-size:14.5px;color:var(--muted);line-height:1.65}
@media(max-width:860px){ .steps{grid-template-columns:minmax(0,1fr)} }

/* ── Что входит ───────────────────────────────────────────── */
/* Раньше здесь стоял калькулятор месяца. Он требовал от человека знать,
   сколько запросов он делает, — этого никто не знает. Вместо гадания
   показываем состав: что вообще доступно по одному ключу. */
.kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.kit-i{border:1px solid var(--edge);border-radius:var(--r);background:var(--skin);padding:22px 22px 24px}
.kit-t{font-size:16.5px;font-weight:600;margin-bottom:9px}
.kit-p{font-size:14.5px;color:var(--muted);line-height:1.7}
.kit-p b{color:var(--amber-text);font-weight:600}
@media(max-width:980px){ .kit{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:660px){ .kit{grid-template-columns:minmax(0,1fr)} }

/* ── Почему верить ────────────────────────────────────────── */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}
.tr{border:1px solid var(--edge);border-radius:var(--r);background:var(--skin);padding:24px}
.tr-t{font-size:17px;font-weight:600;margin-bottom:8px}
.tr-p{font-size:14.5px;color:var(--muted);line-height:1.7}
.tr-l{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:14px;
  color:var(--amber-text);font-weight:600;text-decoration:none;min-height:44px}
.tr-l svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.tr-l:hover svg{transform:translateX(3px)}
/* Полоса суток: каждое деление — пять минут работы. Показываем как пример того,
   что происходит на странице статуса, а не как обещание конкретных цифр. */
.upt{display:flex;gap:2px;margin:16px 0 10px}
.upt i{flex:1;height:26px;border-radius:3px;background:rgba(87,212,155,.5)}
.upt i.bad{background:rgba(232,128,74,.85)}
.upt i.deg{background:rgba(245,181,68,.6)}
.upt-l{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}
@media(max-width:860px){ .trust{grid-template-columns:minmax(0,1fr)} }

/* ── Последняя плашка страницы ────────────────────────────── */
.last{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:26px;
  border:1px solid var(--amber-dim);border-radius:var(--r);background:rgba(245,181,68,.05);padding:28px}
.last>div{flex:1 1 320px;min-width:0}
.last-t{font-size:21px;font-weight:600;margin-bottom:8px}
.last-p{font-size:14.5px;color:var(--muted);line-height:1.7;max-width:62ch}
.last .btn{flex:none;margin-left:auto}
@media(max-width:700px){ .last{padding:22px} .last .btn{margin-left:0;width:100%} }

/* ── Строка в счёте ───────────────────────────────────────── */
/* Показываем документ, а не рассказываем о нём: студии проще решиться,
   когда видно, как это будет выглядеть у клиента на бумаге. */
.bill{margin-top:26px;border:1px solid var(--edge);border-radius:var(--r);background:var(--skin);padding:24px 26px}
.bill-h{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.bill-row{display:flex;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid var(--edge-soft)}
.bill-t{flex:1 1 auto;min-width:0;font-size:15px}
.bill-s{flex:none;font-size:16px;font-weight:600;color:var(--amber);white-space:nowrap}
.bill-n{margin-top:16px;padding-top:16px;border-top:1px solid var(--edge-soft);
  font-size:13.5px;color:var(--muted);line-height:1.7;max-width:74ch}

/* ── Частые вопросы ───────────────────────────────────────── */
/* На <details> — чтобы вопросы раскрывались и без скрипта, и в поиске по странице */
.faq{margin-top:30px;border:1px solid var(--edge);border-radius:var(--r);background:var(--skin);overflow:hidden}
.faq-i+.faq-i{border-top:1px solid var(--edge-soft)}
.faq-q{display:flex;align-items:center;gap:12px;min-height:60px;padding:16px 22px;cursor:pointer;
  font-size:16px;font-weight:600;list-style:none;transition:background .2s var(--ease)}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:1.6px solid var(--amber);
  border-bottom:1.6px solid var(--amber);transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.faq-i[open] .faq-q::after{transform:rotate(-135deg) translateY(-2px)}
.faq-q:hover{background:var(--skin-2)}
.faq-q:focus-visible{outline:2px solid rgba(245,181,68,.6);outline-offset:-3px}
.faq-a{padding:0 22px 20px;font-size:14.5px;color:var(--muted);line-height:1.7;max-width:74ch}
/* Стрелка поворачивалась плавно, а сам ответ выпрыгивал скачком на 69 px — глаз
   терял место, куда смотрел. Раскрытие анимируем тем же временем, что и стрелку.
   Работает без единой строки скрипта; где ::details-content не поддержан,
   всё остаётся как было — мгновенно, но рабоче. */
@supports selector(::details-content){
  .faq-i{interpolate-size:allow-keywords}
  .faq-i::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .28s var(--ease),content-visibility .28s allow-discrete}
  .faq-i[open]::details-content{block-size:auto}
}
.faq-more{margin-top:18px;font-size:14.5px;color:var(--muted);line-height:1.7}
.faq-more a{color:var(--amber-text);font-weight:600}

/* ── Подвал ───────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--edge-soft);padding:56px 0 44px;margin-top:40px}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
@media(max-width:800px){ .ftr-grid{grid-template-columns:1fr 1fr;gap:28px} }
/* Разделы подвала — заголовки второго уровня: раньше стояли h4 после h2, и переход
   по заголовкам у экранного диктора спотыкался о пропущенный уровень. Вид прежний. */
.ftr .ftr-h{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  margin-bottom:14px;font-weight:600}
/* 44 px на строку: в подвале пальцем чаще всего и промахиваются */
.ftr a{display:block;color:var(--muted);text-decoration:none;font-size:14.5px;padding:11px 0}
.ftr a:hover{color:var(--text)}
.ftr-b{margin-top:36px;padding-top:24px;border-top:1px solid var(--edge-soft);
  display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--dim)}

/* ── Появление при прокрутке ──────────────────────────────── */
/* Прячем только там, где скрипт точно жив: класс js ставится до отрисовки. */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rise.seen{opacity:1;transform:none}
/* «Уменьшить движение» в системе включают не для красоты: у части людей от
   съезжающих блоков кружится голова. Гасим не только появление при прокрутке,
   но и все сдвиги при наведении и нажатии. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{opacity:1;transform:none;transition:none}
  .ray{transition:none}
  .door,.card,.tr,.kit-i,.btn,.faq-q,.toc a,.mnav a,.hdr-login,.fnd-x{transition:none}
  .door:hover,.card:hover,.btn:active{transform:none}
  .door-go svg,.tr-l svg,.faq-i .faq-q::after{transition:none}
  .js .doors .door.seen .door-go{animation:none}
  .js #who .rise.seen .wp-line::after{animation:none;opacity:0}
  .js #who .rise.seen .wp-node .wp-dot{animation:none;border-color:var(--amber-dim);background:var(--amber-dim)}
  .faq-i::details-content{transition:none}
  .mnav{transition:none}
  .mnav,.mnav.open{transform:none}
  .door:hover .door-go svg,.tr-l:hover svg{transform:none}
}

/* ── Бумага и PDF ─────────────────────────────────────────── */
/* Прайс уносят на согласование: печатают или сохраняют в PDF. Принтер фоны не
   переносит, поэтому светлый текст тёмной темы уходил на лист белым по белому —
   пустые страницы. Здесь страница переворачивается в печатную палитру, лишнее
   с бумаги убирается, а раскрывающиеся ответы печатаются раскрытыми. */
@media print{
  :root{
    --bg:#fff; --skin:#fff; --skin-2:#f6f6f6;
    --edge:#c9c9cf; --edge-soft:#e2e2e6;
    --text:#111; --muted:#333; --dim:#555;
    --amber:#8a5a00; --amber-dim:#c9a25a; --amber-text:#8a5a00;
    --ok:#1d6b45; --warn:#8a4415;
  }
  @page{margin:14mm}
  html,body{background:#fff !important;color:#111 !important}
  body{font-size:11pt}
  /* Ниже первого экрана блоки ждут прокрутки — при печати её не будет. */
  .js .rise{opacity:1 !important;transform:none !important;transition:none !important}
  /* На бумаге бесполезны: шапка, меню, оглавление-переходы, кнопки, поиск, фон-луч. */
  .hdr,.mnav,.burger,.toc,.btn,.hdr-cta,.hdr-login,.fnd,.ray,.scrim{display:none !important}
  .sec,.sec-tight{padding:16px 0;break-inside:auto}
  .h1{font-size:22pt}.h2{font-size:16pt}.h3{font-size:12pt}
  .card,.door,.kit-i,.tr,.step,.bill{border:1px solid #c9c9cf;box-shadow:none;
    break-inside:avoid;padding:12px}
  /* На экране таблицу можно листать вбок, на листе — нет: ужимаем, чтобы
     последняя колонка «Выгода» не уехала за край. */
  .ptable-wrap{overflow:visible}
  .ptable{font-size:9.5pt;width:100%}
  .ptable th,.ptable td{border-bottom:1px solid #d8d8dd;padding:6px 8px}
  .ptable tr{break-inside:avoid}
  /* Свёрнутый ответ на бумаге — потерянный ответ. */
  details{break-inside:avoid}
  details>*:not(summary){display:block !important}
  .faq-q::after{display:none}
  /* По распечатке должно быть понятно, куда идти: адрес рядом со ссылкой. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555;word-break:break-all}
  .ftr{border-top:1px solid #c9c9cf;padding:18px 0 0;margin-top:22px}
  .ftr a{padding:2px 0}
}

/* ── Правовой подвал ──────────────────────────────────────── */
/* Продажа доступа без оферты и с чужими реквизитами — не косметика, поэтому
   документы стоят на каждой странице, а не только на главной. Ссылки идут
   отдельной строкой над реквизитами: список из пяти пунктов вперемешку с
   ИНН читается как каша. */
.ftr-b{flex-direction:column;align-items:flex-start;gap:12px}
.ftr-l{display:flex;flex-wrap:wrap;gap:6px 18px}
.ftr-l a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;
  padding:2px 0;transition:color .2s var(--ease),border-color .2s var(--ease)}
.ftr-l a:hover{color:var(--ink);border-bottom-color:var(--edge)}
.ftr-l a:focus-visible{outline:2px solid rgba(245,181,68,.6);outline-offset:3px;border-radius:3px}
.ftr-r{margin:0}
/* Оговорка про объёмы токенов — юридически значимая, но не главная на
   странице: тем же кеглем, что и остальное, только приглушённее. */
.ftr-d{margin:0;max-width:74ch;color:var(--dim);opacity:.82;line-height:1.6}