/* ============================================================================
   ЛЕНДИНГ ПЛАТФОРМЫ — тот же язык, что у витрины и мини-аппа.

   Владелец сначала видит эту страницу, потом своё приложение. Если они
   выглядят разными продуктами, второй экран читается как чужой сервис,
   к которому его перекинули. Поэтому палитра, стекло и пилюля берутся из
   client_new.css, а здесь — только раскладка длинной страницы, которой у
   витрины нет.
   ============================================================================ */

.land{max-width:min(1040px,100%);padding-top:8px}

/* ── Первый экран ────────────────────────────────────────────────────── */
.land-eyebrow{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--soft);
  margin-bottom:12px}
.land-lead{font-size:15.5px;line-height:1.55;color:var(--soft);max-width:56ch;
  margin:-4px 2px 16px}
.land-hero{padding:28px 4px 8px;max-width:56ch}
.land-hero h1{font-size:clamp(32px,6.4vw,58px);line-height:1.05;font-weight:700;
  letter-spacing:-.04em}
.hero-tag{margin-top:14px;font-size:16px;line-height:1.5;color:var(--soft);max-width:52ch}
.hero-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.hero-badge{font-size:13px;font-weight:500;padding:8px 14px;border-radius:99px;
  background:rgb(var(--glass) / .8);
  box-shadow:inset 0 0 0 1px rgb(var(--glass) / .5)}
.hero-cta,.land-cta{display:inline-flex;align-items:center;justify-content:center;
  margin-top:18px;height:56px;flex:0 0 auto;text-decoration:none;padding:0 28px}
/* Перфорация точками — фактура для кнопки шириной в палец. Растянутая на
   всю страницу, она читается как грязь на стекле, а подпись под ней
   перестаёт читаться вовсе. На больших кнопках оставляем чистую заливку. */
.hero-cta::after,.land-cta::after{display:none}
.hero-cta span,.land-cta span{opacity:1;color:color-mix(in srgb,var(--cta-ink) 72%,transparent)}
@media (max-width:520px){
  /* На телефоне подпись во второй строке, а не за краем кнопки. */
  .hero-cta,.land-cta{width:100%;height:auto;padding:16px 22px;flex-direction:column;gap:2px}
  .hero-cta span,.land-cta span{margin-left:0;font-size:13px}
}
.hero-note{margin-top:10px;font-size:13px;color:var(--soft);max-width:44ch}

/* ── Блоки ───────────────────────────────────────────────────────────── */
.land-sect{margin-top:34px}
.land-h{font-size:clamp(21px,3.2vw,28px);font-weight:700;letter-spacing:-.03em;
  margin:0 2px 12px}

/* Плитки лендинга — рассказ, а не кнопки: материал тот же, что у карточек
   витрины, но без нажимаемости. Кликабельный вид у некликабельного элемента
   раздражает сильнее, чем скучный вид у скучного. */
.sgrid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:620px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.sgrid{grid-template-columns:repeat(4,1fr)}}
/* Без backdrop-filter — и это не упрощение, а починка.
   В WebKit (все браузеры на iPhone) содержимое элемента с backdrop-filter
   при прокрутке длинной страницы пропадает: карточки оставались на месте,
   а текст внутри исчезал — страница выглядела набором пустых плашек. На
   лендинге под карточками ровный градиент, размывать нечего: плотная
   заливка выглядит так же и не ломается. */
.scard{display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding:20px;border:none;text-align:left;border-radius:24px;font:inherit;
  color:var(--ink);background:rgb(var(--glass) / .78);
  box-shadow:0 8px 22px -10px rgb(10 10 20 / .28),
             inset 0 0 0 1px rgb(var(--glass) / .45)}
.scard--static{cursor:default}
.scard__ttl{font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.scard__big{font-size:30px;font-weight:700;letter-spacing:-.04em;line-height:1}
.scard__sub{font-size:13.5px;line-height:1.5;color:var(--soft)}

.land-price{grid-template-columns:1fr}
@media (min-width:620px){.land-price{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.land-price{grid-template-columns:repeat(3,1fr)}}

.land-rows{display:flex;flex-direction:column;gap:10px}
.land-row{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:24px;
  background:rgb(var(--glass) / .78);
  box-shadow:inset 0 0 0 1px rgb(var(--glass) / .45)}
.land-row b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.land-row span{font-size:14px;line-height:1.55;color:var(--soft)}

/* ── Боль ────────────────────────────────────────────────────────────── */
/* Красная полоса слева — единственная краска на странице кроме кнопки:
   этот блок человек должен узнать как свой вечер, а не пролистать. */
.land-row.pain{border-left:3px solid color-mix(in srgb,#e0453a 65%,transparent);
  border-radius:8px 24px 24px 8px}

/* ── Демонстрация переписки ──────────────────────────────────────────── */
/* Собрана вёрсткой, а не картинкой: скриншот устаревает молча, а этот
   диалог показывает ровно то, что продукт умеет сегодня. */
.chatdemo{display:grid;gap:12px}
@media (min-width:820px){.chatdemo{grid-template-columns:1.15fr .85fr;align-items:start}}
.chat{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:24px;
  background:rgb(var(--glass) / .78);box-shadow:inset 0 0 0 1px rgb(var(--glass) / .5)}
.chat-head{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--soft);
  padding:0 2px 4px}
.chat-dot{width:7px;height:7px;border-radius:50%;background:#2fbf5f}
.msg{max-width:88%;padding:11px 14px;border-radius:18px;font-size:14.5px;
  line-height:1.45}
.msg.in{align-self:flex-end;border-bottom-right-radius:6px;
  color:var(--cta-ink);background:linear-gradient(120deg,hsl(var(--cta2)),hsl(var(--cta)))}
.msg.out{align-self:flex-start;border-bottom-left-radius:6px;color:var(--ink);
  background:rgb(var(--glass) / .92);box-shadow:inset 0 0 0 1px rgb(var(--glass) / .6)}
.msg.done{align-self:flex-start;font-weight:600;color:var(--ink);
  background:color-mix(in srgb,#2fbf5f 18%,rgb(var(--glass) / .92));
  border-bottom-left-radius:6px}
.chips-demo{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.chips-demo i{font-style:normal;font-size:12.5px;padding:6px 11px;border-radius:99px;
  background:rgb(var(--glass) / .95);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)}
.chips-demo i.on{color:var(--cta-ink);background:hsl(var(--cta));box-shadow:none}
.chat-note{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:24px;
  background:rgb(var(--glass) / .6);box-shadow:inset 0 0 0 1px rgb(var(--glass) / .45)}
.chat-note b{font-size:15.5px}
.chat-note span{font-size:14px;line-height:1.55;color:var(--soft)}

/* ── Сравнение ───────────────────────────────────────────────────────── */
.compare{display:grid;gap:10px}
@media (min-width:620px){.compare{grid-template-columns:1fr 1fr}}
.compare-col{padding:20px;border-radius:24px;background:rgb(var(--glass) / .7);
  box-shadow:inset 0 0 0 1px rgb(var(--glass) / .45)}
.compare-col.now{background:rgb(var(--glass) / .95)}
.compare-h{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);margin-bottom:10px}
.compare-col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px}
.compare-col li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45}
.compare-col.was li{color:var(--soft)}
.compare-col.was li::before{content:'×';position:absolute;left:4px;top:-1px;
  font-size:16px;color:color-mix(in srgb,#e0453a 70%,transparent)}
.compare-col.now li::before{content:'✓';position:absolute;left:2px;top:0;
  font-size:14px;font-weight:700;color:#2fbf5f}

/* Тариф, который выбирают чаще всего, — плотнее прочих: без подсказки взгляд
   останавливается на бесплатном и дальше не идёт. */
.scard--hi{background:rgb(var(--glass) / .95);
  box-shadow:0 12px 30px -12px rgb(10 10 20 / .4),inset 0 0 0 1.5px hsl(var(--cta) / .5)}
.scard__big i{font-style:normal;font-size:15px;font-weight:500;color:var(--soft)}

.land-final{margin-top:44px;padding:28px 20px 32px;border-radius:28px;
  background:rgb(var(--glass) / .6);box-shadow:inset 0 0 0 1px rgb(var(--glass) / .45)}

/* Форма заказа рекламы. Три поля: больше на холодной странице никто не
   заполнит, а меньше — не с чем перезвонить. */
.land-form{display:flex;flex-direction:column;gap:12px;margin-top:16px;
  max-width:520px}
.land-form .fld{display:flex;flex-direction:column;gap:5px}
.land-form .fld span{font-size:12.5px;color:var(--soft)}
.land-form input{width:100%;border:none;outline:none;font:inherit;font-size:16px;
  padding:13px 15px;border-radius:16px;color:var(--ink);
  background:rgb(var(--glass) / .75);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent)}
.land-form input:focus{box-shadow:inset 0 0 0 1.5px hsl(var(--cta))}
.land-form .land-cta{margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ── Шапка лендинга ──────────────────────────────────────────────────── */
/* Ссылки, а не кнопки экрана: это страница, а не приложение. */
.sitebar__nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none}
.sitebar__nav a{font-size:14px;font-weight:500;color:var(--soft);text-decoration:none;
  padding:9px 12px;border-radius:99px;white-space:nowrap;
  transition:color .2s,background .2s}
.sitebar__nav a:hover{color:var(--ink);background:rgb(var(--glass) / .6)}
.sitebar__cta{color:var(--cta-ink) !important;
  background:linear-gradient(120deg,hsl(var(--cta2)),hsl(var(--cta)))}
/* На телефоне в шапке помещается одно действие. Пункты меню там не нужны:
   страница короткая и листается быстрее, чем ищется ссылка, — а обрезанная
   кнопка «Подключ…» выглядит поломкой. */
@media (max-width:640px){
  .sitebar__nav a:not(.sitebar__cta){display:none}
  .sitebar__cta{padding:10px 16px}
}