/* ЛЕНДИНГ NEXO.
 *
 * ТЕЗИС. Соседи по рынку продают «приложение для записи». Мы даём САЙТ, в
 * котором есть запись, — и это единственное, что нужно показать первым.
 * Поэтому герой не заголовок над градиентом, а сама витрина: настоящий
 * салон в рамке телефона, с переключателем трёх видов.
 *
 * ЦВЕТА НА СТРАНИЦЕ НЕТ. Это не аскетизм, а следствие тезиса: весь цвет
 * здесь принадлежит не нам, а салонам, и живёт внутри их витрин. Страница
 * — тёплый графит и тёплая бумага; стоит на ней что-то раскрасить, и
 * настоящие сайты внутри рамок перестанут быть главными.
 *
 * Прежняя страница была холодно-белой (#fbfbfd, #111114) с пастельным
 * пятном за заголовком — цвет был, но ничей: он не принадлежал ни нам, ни
 * клиенту, и работал как фон, а не как смысл.
 *
 * ШРИФТЫ СВОИ, НЕ ГУГЛОВЫЕ. Onest переменный, кириллический, лежит у нас
 * самохостом — 14 КБ. Внешний шрифт означал бы запрос браузера клиента на
 * чужой сервер за границу на каждой загрузке, а мы этого избегаем
 * намеренно. Подписи набраны Ubuntu — тем же, чем набраны подписи внутри
 * самого продукта: связь страницы с продуктом настоящая, а не выдуманная.
 */

@font-face{
  font-family:"Onest";src:url("/static/fonts/onest-cyrillic.woff2") format("woff2");
  font-weight:100 900;font-display:swap;
  unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F;
}
@font-face{
  font-family:"Onest";src:url("/static/fonts/onest-latin.woff2") format("woff2");
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2212;
}
@font-face{
  font-family:"UbuntuL";src:url("/static/fonts/ubuntu-cyrillic-500.woff2") format("woff2");
  font-weight:500;font-display:swap;
  unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F;
}
@font-face{
  font-family:"UbuntuL";src:url("/static/fonts/ubuntu-latin-500.woff2") format("woff2");
  font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F;
}

*,*::before,*::after{box-sizing:border-box}

:root{
  --night:#151110;          /* тёплый графит, не сине-чёрный */
  --paper:#f6f2ee;          /* тёплая бумага */
  --card:#fff;
  --ink:#191311;
  --mute:#6e625c;
  --faint:#9a8e88;
  --line:rgb(25 19 17 / .10);
  --line-dark:rgb(255 255 255 / .13);
  --gap:clamp(72px,10vw,132px);
  --pad:max(20px,env(safe-area-inset-left));
  --quick:.15s;             /* одна длительность на всю страницу */
}

html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Onest",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-weight:420;line-height:1.5;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}

/* Подпись — единственное место, где живёт второй шрифт. */
.kick{
  margin:0 0 14px;font-family:"UbuntuL",system-ui,sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
}

.wrap{width:min(1160px,100%);margin:0 auto;padding-inline:var(--pad)}

/* ── ШАПКА ──────────────────────────────────────────────────────────── */
.sitebar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:16px;
  padding:12px var(--pad);background:rgb(21 17 16 / .72);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid var(--line-dark);
}
.sitebar__brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none}
.sitebar__mark{display:block;width:26px;height:26px}
.sitebar__name{font-size:18px;font-weight:700;letter-spacing:-.03em}
.sitebar__nav{display:flex;align-items:center;gap:6px}
.sitebar__nav a{
  padding:8px 12px;border-radius:999px;color:rgb(255 255 255 / .62);
  font-size:14px;font-weight:500;text-decoration:none;
  transition:color var(--quick),background var(--quick);
}
.sitebar__nav a:hover{color:#fff}
.sitebar__cta{background:#fff;color:var(--night) !important;font-weight:650}
.sitebar__cta:hover{background:rgb(255 255 255 / .88)}
.sitebar__nav a:focus-visible,.pill:focus-visible,.sitenav a:focus-visible{
  outline:2px solid currentColor;outline-offset:3px
}

/* Полоса разделов на телефоне. */
.sitenav{display:none}

/* ── ГЕРОЙ ──────────────────────────────────────────────────────────── */
.hero{
  position:relative;background:var(--night);color:#fff;
  padding:clamp(34px,6vw,72px) 0 clamp(52px,7vw,96px);
}
.hero-in{
  display:grid;gap:clamp(30px,5vw,56px);align-items:center;
  grid-template-columns:1fr;
}
.hero h1{
  margin:0 0 16px;font-size:clamp(38px,6.6vw,72px);font-weight:800;
  letter-spacing:-.055em;line-height:1.0;max-width:15ch;
}
.hero h1 em{font-style:normal;color:rgb(255 255 255 / .42)}
.hero-line{
  margin:0 0 26px;max-width:34ch;color:rgb(255 255 255 / .68);
  font-size:clamp(16px,2vw,20px);line-height:1.45;
}
.hero .kick{color:rgb(255 255 255 / .40)}

/* Одно действие. Всё, что рядом, — тише и мельче. */
.pill{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  padding:15px 30px;border-radius:999px;background:#fff;color:var(--night);
  font-size:17px;font-weight:680;letter-spacing:-.02em;text-decoration:none;
  transition:transform var(--quick),background var(--quick);
}
.pill span{font-size:12.5px;font-weight:450;opacity:.55;letter-spacing:0}
.pill:active{transform:scale(.98)}
.pill.dark{background:var(--night);color:#fff}
/* ── ВХОД С ПЕРВОГО ЭКРАНА ────────────────────────────────────────────
   Поле и кнопка в одну строку на широком, в столбик на телефоне: поле
   почты, ужатое до половины телефонного экрана, набирают с опечатками, а
   опечатка здесь стоит письма, ушедшего в никуда.

   Поле ТЁМНОЕ на тёмном, а не белое. Белая коробка на ночном фоне тянет
   на себя весь взгляд и спорит с кнопкой рядом — а решение принимается
   кнопкой. Границы хватает, чтобы поле читалось как поле. */
.hero-go{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin:0}
.hero-fld{display:flex;flex-direction:column;gap:5px;flex:1 1 240px;min-width:0}
.hero-fld span{font-size:12px;letter-spacing:.02em;color:rgb(255 255 255 / .42)}
.hero-fld input{
  width:100%;padding:14px 18px;border-radius:999px;
  border:1px solid rgb(255 255 255 / .22);background:rgb(255 255 255 / .06);
  color:#fff;font:inherit;font-size:16px;
  transition:border-color var(--quick),background var(--quick);
}
.hero-fld input::placeholder{color:rgb(255 255 255 / .32)}
.hero-fld input:focus{outline:none;border-color:rgb(255 255 255 / .55);
  background:rgb(255 255 255 / .1)}
.hero-go .pill{align-self:flex-end;border:0;cursor:pointer;font-family:inherit}
/* «или» — не заголовок и не подпись: это шов между двумя дверями, и он
   должен быть тише обеих. */
/* Ссылка на дверь со страницы рассказа. Вход живёт на корне, и второй
   его копии здесь нет — только дорога к нему. */
.hero-go-back{margin:22px 0 0}
.hero-go-back .pill{display:inline-flex}
.hero-or{margin:14px 0 10px;font-size:13px;color:rgb(255 255 255 / .34)}
.pill.ghost{background:rgb(255 255 255 / .08);color:#fff;
  border:1px solid rgb(255 255 255 / .22)}
.pill.ghost span{opacity:.5}
.hero-quiet{margin:16px 0 0;font-size:14px}
.hero-quiet a{color:rgb(255 255 255 / .42);text-decoration:none;border-bottom:1px solid rgb(255 255 255 / .2);margin-right:16px}
.hero-quiet a:hover{color:rgb(255 255 255 / .7)}

/* ── ЖИВАЯ ВИТРИНА — ПОДПИСЬ СТРАНИЦЫ ───────────────────────────────
   Единственное цветное пятно на всём лендинге находится ЗДЕСЬ, внутри
   рамки, и принадлежит салону, а не нам. */
.show{display:grid;gap:20px;justify-items:center}
/* РАМКА СЧИТАЕТСЯ ОТ МАСШТАБА, А НЕ НАОБОРОТ.

   Было `transform:scale(calc((min(300px,84vw) - 18px) / 390))`. Деление
   длины на число даёт ДЛИНУ, а `scale()` принимает только число, — и
   правило отбрасывалось целиком. Страница внутри рисовалась в полный
   размер и обрезалась справа: у одних салонов в рамке оставалось цветное
   пятно обложки, у других — половина карточек без правого края.

   Теперь единственная величина — коэффициент. Ширина и высота рамки
   считаются из него, поэтому разойтись им негде. */
.frame{
  --k:.72;
  position:relative;width:calc(390px * var(--k) + 18px);padding:9px;
  border-radius:44px;background:#000;
  box-shadow:0 30px 60px -20px rgb(0 0 0 / .7),
    inset 0 0 0 1.5px rgb(255 255 255 / .16);
}
.frame-screen{
  position:relative;overflow:hidden;border-radius:36px;background:#fff;
  width:calc(390px * var(--k));height:calc(806px * var(--k));
}
.frame-screen>iframe{
  position:absolute;top:0;left:0;width:390px;height:806px;border:0;
  transform-origin:0 0;transform:scale(var(--k));
}
.frame-notch{
  position:absolute;z-index:3;top:9px;left:50%;width:82px;height:24px;
  border-radius:999px;background:#000;transform:translateX(-50%);
}
/* Кадр не должен ловить нажатия: страница внутри — витрина, а не
   элемент управления. Открыть её целиком можно ссылкой ниже. */
.frame-veil{position:absolute;inset:0;z-index:2}

.looks{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.looks button{
  padding:9px 15px;border:1px solid var(--line-dark);border-radius:999px;
  background:transparent;color:rgb(255 255 255 / .62);cursor:pointer;
  font:inherit;font-size:14px;font-weight:550;
  transition:background var(--quick),color var(--quick),border-color var(--quick);
}
.looks button.on{background:#fff;border-color:#fff;color:var(--night)}
.looks button:active{transform:scale(.97)}
.show-note{margin:0;color:rgb(255 255 255 / .5);font-size:14px;text-align:center}
.show-note a{color:rgb(255 255 255 / .8)}

/* ── СЕКЦИИ ─────────────────────────────────────────────────────────── */
.land-sect{
  padding-block:var(--gap);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
}
.land-sect.seen{opacity:1;transform:none}
.land-h{
  margin:0 0 12px;max-width:17ch;font-size:clamp(28px,4.4vw,46px);
  font-weight:760;letter-spacing:-.05em;line-height:1.05;
}
.land-lead{margin:0 0 30px;max-width:44ch;color:var(--mute);font-size:clamp(16px,1.8vw,19px)}

/* Карточка со снимком продукта: подпись сверху, картинка снизу и во всю
   ширину. Читают заголовок, смотрят картинку — в таком порядке. */
.shots{display:grid;gap:16px}
.shot{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:28px;background:var(--card);
}
.shot-copy{padding:26px 26px 20px}
.shot-copy b{display:block;font-size:20px;font-weight:700;letter-spacing:-.03em}
.shot-copy span{display:block;margin-top:6px;color:var(--mute);font-size:15.5px;line-height:1.45}
/* Снимок продукта во всю ширину карточки и без полей снизу: он и есть
   содержание, а подпись над ним — подпись. */
.shot-body{margin-top:auto;padding:0 22px}
/* СНИМОК ПОКАЗЫВАЕТ РОВНО ТО, ЧТО ОБЕЩАЕТ ПОДПИСЬ.
   Сначала клали экран целиком — карточка выходила в девятьсот пикселей, и
   раздел превращался в четыре простыни. Потом обрезали по высоте — и
   подпись «день виден сразу» оказалась над шапкой бизнеса, а сам день
   уехал за край. Теперь в каждом файле лежит ровно один блок панели, и
   он показывается целиком. */
.shot-body img{
  display:block;width:100%;height:auto;
  border-radius:18px 18px 0 0;border:1px solid var(--line);border-bottom:0;
  background:var(--paper);
}

/* Полный список того, что стоит за экранами: снимок показывает, строка
   называет. */
.surfaces{display:grid;gap:2px;margin:16px 0 0;padding:0;list-style:none;
  border:1px solid var(--line);border-radius:24px;background:var(--card);
  overflow:hidden}
.surfaces li{padding:18px 24px;border-top:1px solid var(--line)}
.surfaces li:first-child{border-top:0}
.surfaces b{display:block;font-size:16.5px;font-weight:680;letter-spacing:-.025em}
.surfaces span{display:block;margin-top:3px;color:var(--mute);font-size:15px}

/* ── ТРИ ШАГА ДО ЗАПУСКА ────────────────────────────────────────────
   Здесь нумерация честная: это правда последовательность, и порядок
   несёт смысл. Человек должен увидеть, что между «нажал» и «клиент
   записался» три шага, а не тридцать. */
.steps{display:grid;gap:14px;counter-reset:step}
.step{
  position:relative;padding:24px 24px 24px 66px;
  border:1px solid var(--line);border-radius:24px;background:var(--card);
}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:24px;top:23px;display:grid;width:28px;height:28px;
  place-items:center;border-radius:50%;background:var(--night);color:#fff;
  font-family:"UbuntuL",system-ui,sans-serif;font-size:13px;
}
.step b{display:block;font-size:18px;font-weight:700;letter-spacing:-.03em}
.step span{display:block;margin-top:4px;color:var(--mute);font-size:15px}

/* ── ТАРИФЫ ─────────────────────────────────────────────────────────── */
.land-prices{display:grid;gap:14px}
.land-price{
  display:flex;flex-direction:column;gap:9px;padding:28px;
  border:1px solid var(--line);border-radius:26px;background:var(--card);
}
.land-price h3{margin:0;font-size:21px;font-weight:720;letter-spacing:-.035em}
.land-price .price-num{font-size:34px;font-weight:760;letter-spacing:-.05em}
.land-price ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.land-price li{padding-left:18px;position:relative;color:var(--mute);font-size:15px}
.land-price li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;
  background:var(--faint);
}
/* Метка пробного периода. Она стоит НАД названием тарифа: сначала «это
   можно взять сейчас и даром», потом цена. В обратном порядке цена успевает
   отпугнуть раньше, чем человек дочитает. */
.land-try{
  align-self:flex-start;margin:0;padding:5px 11px;
  border:1px solid var(--line);border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);
}
.land-price.on{background:var(--night);color:#fff;border-color:var(--night)}
.land-price.on li{color:rgb(255 255 255 / .66)}
.land-price.on li::before{background:rgb(255 255 255 / .4)}
.land-once{margin:18px 0 22px;color:var(--mute);font-size:15px;max-width:52ch}
/* Кнопка после шагов — не абзац: лишние поля читались как пустой экран. */
.steps + .land-once{margin:22px 0 0}

/* ── ВОПРОСЫ ────────────────────────────────────────────────────────── */
.faq-groups{display:grid;gap:10px}
.faq-group{border:1px solid var(--line);border-radius:22px;background:var(--card);overflow:hidden}
.faq-group>summary,.faq>summary{cursor:pointer;list-style:none}
.faq-group>summary::-webkit-details-marker,.faq>summary::-webkit-details-marker{display:none}
.faq-group>summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 24px;font-size:17px;font-weight:650;letter-spacing:-.025em;
}
.faq-group>summary i{
  font-family:"UbuntuL",system-ui,sans-serif;font-style:normal;font-size:12px;
  color:var(--faint);
}
.faq-list{padding:0 24px 12px}
.faq{border-top:1px solid var(--line)}
.faq>summary{padding:15px 0;font-size:15.5px;font-weight:550;color:var(--ink)}
.faq p{margin:0 0 15px;color:var(--mute);font-size:15px;line-height:1.5}

/* ── ФИНАЛ ──────────────────────────────────────────────────────────── */
.land-final{text-align:center}
.land-final .land-h{margin-inline:auto}
.land-final .land-lead{margin-inline:auto}

/* Липкая кнопка на телефоне: страница длинная, а действие одно. */
.stickycta{
  position:fixed;z-index:28;left:var(--pad);right:var(--pad);
  bottom:max(14px,env(safe-area-inset-bottom));
  display:none;justify-content:center;
  padding:15px;border-radius:999px;background:var(--night);color:#fff;
  font-size:16px;font-weight:650;text-decoration:none;
  box-shadow:0 14px 34px -10px rgb(0 0 0 / .5);
}

/* ── ПАРТНЁРАМ ──────────────────────────────────────────────────────── */
.landing-form{display:grid;gap:12px;padding:20px 0}
.landing-form input,.landing-form textarea,.landing-form select{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:14px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:15px;
}
.landing-form button{
  padding:14px 22px;border:0;border-radius:999px;background:var(--night);
  color:#fff;font:inherit;font-size:15px;font-weight:650;cursor:pointer;
}
.sitebar__signin{color:rgb(255 255 255 / .5) !important}
/* Годовая цена — ссылка, а не вторая кнопка: выбор тарифа и выбор срока
   не должны выглядеть одинаково важными. */
/* ОПЛАТА ВПЕРЁД — ДВУМЯ ПЛИТКАМИ С СУММАМИ.

   Здесь была одна подчёркнутая ссылка «Оплатить сразу за год» без единой
   цифры: сколько это и что человек экономит, узнать было неоткуда, и
   нажимали её из любопытства. Теперь оба срока — полгода и год — стоят
   рядом, каждый с суммой и ценой месяца внутри неё: именно этим числом
   люди и сравнивают, а «4680 за год» само по себе не сравнивается ни с
   чем. */
.ahead-row{display:flex;gap:8px;margin-top:12px}
.ahead{
  flex:1;display:flex;flex-direction:column;gap:1px;
  padding:9px 11px;border-radius:14px;text-decoration:none;color:inherit;
  background:rgb(0 0 0 / .05);font-size:12px;line-height:1.25;
  transition:background .15s ease;
}
.ahead:hover{background:rgb(0 0 0 / .09)}
.ahead b{font-size:15px;font-weight:720;letter-spacing:-.02em}
.ahead span{opacity:.6}
/* Выделенная карточка тёмная — на ней плитки должны быть светлее фона,
   а не темнее: иначе они пропадают. */
.land-price.on .ahead{background:rgb(255 255 255 / .14)}
.land-price.on .ahead:hover{background:rgb(255 255 255 / .22)}
.year{
  margin-top:6px;color:inherit;opacity:.7;font-size:14px;
  text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;
}
.year:hover{opacity:1}
.land-form__submit{
  padding:14px 22px;border:0;border-radius:999px;background:var(--night);
  color:#fff;font:inherit;font-size:15px;font-weight:650;cursor:pointer;
}
.land-form__status{display:block;color:var(--mute);font-size:14px}
.land-partner{padding-block:var(--gap);border-top:1px solid var(--line)}
.landfoot{
  padding:30px 0 40px;border-top:1px solid var(--line);
  color:var(--faint);font-size:13.5px;
}
.landfoot a{color:var(--mute);text-decoration:none;margin-right:14px}

/* ── ШИРОКИЙ ЭКРАН ──────────────────────────────────────────────────── */
@media (min-width:881px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:56px}
  .shots{grid-template-columns:repeat(2,1fr)}
  .surfaces{grid-template-columns:repeat(2,1fr);gap:0}
  .surfaces li:nth-child(2){border-top:0}
  .steps{grid-template-columns:repeat(3,1fr)}
  .land-prices{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1120px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
  .frame{--k:.84}
}

/* ── ТЕЛЕФОН ────────────────────────────────────────────────────────── */
@media (max-width:880px){
  .sitebar__nav a:not(.sitebar__cta){display:none}
  /* Полоса разделов продолжает шапку, а не спорит с ней. Светлой она
     ложилась поперёк тёмного первого экрана отдельной чужой лентой. */
  .sitenav{
    position:sticky;z-index:29;top:51px;display:flex;gap:6px;overflow-x:auto;
    padding:8px var(--pad) 10px;background:rgb(21 17 16 / .82);
    scrollbar-width:none;
    -webkit-backdrop-filter:saturate(1.6) blur(16px);
    backdrop-filter:saturate(1.6) blur(16px);
  }
  .sitenav::-webkit-scrollbar{display:none}
  .sitenav a{
    flex:none;padding:8px 13px;border:1px solid var(--line-dark);
    border-radius:999px;background:transparent;color:rgb(255 255 255 / .62);
    font-size:13.5px;font-weight:550;text-decoration:none;white-space:nowrap;
  }
  .sitenav a.on{border-color:#fff;background:#fff;color:var(--night)}
  .land-sect{scroll-margin-top:102px}
  .stickycta{display:flex}
  body{padding-bottom:76px}
}

/* На узком экране рамка не должна упираться в края. */
@media (max-width:430px){ .frame{--k:.62} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .land-sect{opacity:1;transform:none;transition:none}
}