/* Публичная страница сервиса. */

/* --- публичная страница (лендинг) ------------------------------------- */

/* Единственный экран сервиса, который видит человек «с улицы». Тон тот же,
   что у рабочих экранов: белая бумага поверх серого фона, тонкие границы,
   охра точками. Отдельный набор классов (`lp-`) вместо переиспользования
   рабочих — у витрины другой ритм: крупнее заголовки, больше воздуха между
   секциями, шире колонка. */
.landing { max-width: var(--col); margin: 0 auto; padding: 0 24px 96px; }

.lp-hero {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 56px;
  align-items: start;
  padding: 48px 0 24px;
}
.lp-hero h1 {
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.07;
  letter-spacing: -.03em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.lp-lead { color: var(--fg-2); font-size: 17px; margin: 0 0 26px; max-width: 46ch; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-note { color: var(--fg-3); font-size: 13px; margin: 18px 0 0; max-width: 44ch; }

/* Кусок настоящей формы вместо картинки: сметчик узнаёт свои графы быстрее,
   чем читает заголовок. */
.lp-hero-form {
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.lp-form-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bd);
  background: var(--sunken);
  font-size: 13px;
  font-weight: 500;
}
.lp-form-sub { color: var(--fg-3); font-weight: 400; }
.lp-scroll-hint { display: none; color: var(--fg-3); font-weight: 400; margin-left: auto; }
/* `table-layout: fixed` — обязателен: при автоматической раскладке длинное
   наименование в первой графе растягивало колонку, и три цены (ради которых
   таблица здесь и стоит) уезжали за правый край карточки. */
.lp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.lp-table col.lp-c-name { width: 34%; }
.lp-table col.lp-c-unit { width: 9%; }
.lp-table th {
  text-align: left;
  font-weight: 500;
  color: var(--fg-3);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 9px;
  border-bottom: 1px solid var(--bd);
}
.lp-table th.num { text-align: right; }
.lp-table td { padding: 10px 9px; border-bottom: 1px solid var(--bd); overflow-wrap: anywhere; }
.lp-table tr:last-child td { border-bottom: 0; }
.lp-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-accepted { background: var(--accent-wash); position: relative; font-weight: 500; }
.lp-mark {
  display: block;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-top: 2px;
}
.lp-empty { color: var(--fg-3); font-size: 11.5px; text-align: right; }
.lp-form-foot {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--bd);
  background: var(--sunken);
  color: var(--fg-3);
  font-size: 12.5px;
}

.lp-block { padding: 64px 0 0; }
.lp-block > h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -.02em;
  margin: 0 0 26px;
}

.lp-files { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lp-files article {
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 20px;
}
.lp-file-kind {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 10px;
}
.lp-files h3, .lp-trust h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -.01em; }
.lp-files p, .lp-trust p, .lp-steps p { color: var(--fg-2); margin: 0; }

/* Шаги без карточек: только номер, линия сверху и текст — так секция
   читается как оглавление, а не как три рекламных плитки. */
.lp-steps {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-steps li { border-top: 1px solid var(--bd-2); padding-top: 16px; }
.lp-step-num {
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.lp-steps h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -.01em; }

.lp-split { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.lp-split > div {
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 22px;
}
.lp-split h3 { font-size: 16px; margin: 0 0 14px; }
.lp-split ul { margin: 0; padding-left: 18px; color: var(--fg-2); }
.lp-split li { margin-bottom: 9px; }
.lp-split li:last-child { margin-bottom: 0; }

.lp-trust { display: grid; gap: 20px 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lp-trust article { border-left: 2px solid var(--accent-ring); padding-left: 16px; }

.lp-cta {
  margin-top: 72px;
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  padding: 36px;
  max-width: 620px;
}
.lp-cta h2 { font-size: 22px; margin: 0 0 12px; letter-spacing: -.02em; }
.lp-cta p { color: var(--fg-2); margin: 0 0 22px; }

@media (max-width: 900px) {
  /* Форма уезжает под текст: в две колонки на планшете таблица сжимается до
     нечитаемых цифр, а ради них она здесь и стоит. */
  .lp-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .lp-split { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .lp-actions .btn { width: 100%; }
  .lp-cta { padding: 24px; }
  /* Таблица прокручивается вбок целиком: разбирать её на карточки незачем,
     смысл именно в сравнении трёх цен в одной строке. */
  .lp-hero-form { overflow-x: auto; }
  .lp-table { min-width: 460px; }
  .lp-scroll-hint { display: inline; }
}

/* Блок «Что дозаполнить» — ОДНА форма на весь экран дела с одной кнопкой
   внизу. До него каждое поле сохранялось своей кнопкой ценой полного
   переразбора документа с повторным платным распознаванием, а половину
   полей вписать было негде вообще. */
.dozapolnenie { display: grid; gap: 18px; margin-bottom: 26px; }
.dozap-group { display: grid; gap: 12px; }
.dozap-group-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.dozap-group summary { cursor: pointer; font-size: 13px; color: var(--fg-2); }
/* Свёрнутые технические замечания к форме: заголовок читается как раздел,
   а не как мелкая подпись, — раскрывать его человек решает сам. */
.zamechaniya-svertka { margin-bottom: 26px; }
.zamechaniya-svertka > summary { font-size: 15px; font-weight: 600; color: var(--fg-1); margin-bottom: 6px; }
.zamechaniya-svertka > summary .aside { font-weight: 400; font-size: 13px; color: var(--fg-2); }
/* Карточка повода: заголовок поля, где оно живёт, что закроется — и сразу
   поле ввода. Обещание «что закроется» стоит рядом с полем нарочно: человек
   решает, стоит ли отвечать, по последствию, а не по названию графы. */
.dozap-card { display: grid; gap: 8px; }
.dozap-card .head { gap: 8px; align-items: baseline; }
.dozap-card .override-label { min-width: 100%; }
.dozap-card input[type="text"], .dozap-card input[type="date"] {
  width: 100%;
  box-sizing: border-box;
}
.dozap-offers { display: grid; gap: 6px; }
.dozap-offers small { color: var(--fg-3); }
/* Кнопка одна на весь блок, и она главная на экране: ради неё человек сюда
   и пришёл. */
.dozap-submit {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 4px;
}
.dozap-submit .files { flex: 1; min-width: 220px; }
/* Подсказки по группе КСР: нажатие подставляет код в поле рядом. Обычные
   кнопки, а не ссылки, — они ничего не открывают и никуда не ведут. */
.dozap-hints { display: grid; gap: 6px; }
.dozap-hint {
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  color: var(--fg-2);
  background: var(--bg-2, #f6f6f4);
  border: 1px solid var(--line, #e2e2dd);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}
.dozap-hint:hover { border-color: var(--accent); color: var(--fg-1); }
/* Заголовок карточки — имя поля, и переносить его по слогам нельзя:
   «код / КСР» в две строки читается как два разных поля. */
.dozap-card .head .msg { white-space: nowrap; }
.dozap-card .head .unit { white-space: normal; }