/* Стили сервиса — «тетрадная» тема.
   Шрифты только локальные: внешние CDN не используем (в России недоступны,
   Google Fonts нельзя по 152-ФЗ). Файлы лежат в static/fonts.
   Вёрстка от мобильного: 80% открытий будут с телефона. */

/*
  Три шрифта, у каждого своя работа.

  Tovari Sans — весь текст и подзаголовки.
  Caveat — рукописный: логотип, заголовки первого уровня, кнопки
  и пометки-украшения. Мелким кеглем им набирать нельзя: низкий рост
  строчных и связные штрихи, в 16–18px читается заметно тяжелее.
  Golos Text — не показывается сам по себе, из него берутся знаки,
  которых нет в Tovari.

  Kalam из исходного макета не подошёл вовсе — у него нет кириллицы.

  Caveat и Golos собраны из исходников github.com/google/fonts
  скриптом scripts/build_fonts.py, Tovari — тем же скриптом из файла,
  присланного владельцем. Все урезаны до знаков, которые сайту нужны.
  Лицензии SIL OFL рядом с файлами.
*/
@font-face {
  font-family: "Text";
  src: url("/static/fonts/golos-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Text";
  src: url("/static/fonts/golos-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/*
  Tovari Sans Bold — Verneri Kontto и Denis Ignatov, лицензия SIL OFL.
  Одно начертание, поэтому диапазон весов указан диапазоном: иначе
  браузер дорисовывал бы жирность сам и размазывал штрих.

  Чего в шрифте нет: длинного тире «—», многоточия «…», № и ✓. Тире
  встречается в текстах чаще сотни раз, и его берёт на себя следующий
  шрифт стека — Golos. Знак ₽ в шрифте есть, его подменять не нужно.
*/
@font-face {
  font-family: "Small";
  src: url("/static/fonts/tovari-700.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hand";
  src: url("/static/fonts/caveat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hand";
  src: url("/static/fonts/caveat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Почти белая бумага с еле заметной тёплой ноткой — как настоящий
     тетрадный лист. Кремовый оттенок темнее выглядел желтоватым. */
  --paper: #fdfcf7;
  --rule: #d7e6ef;
  --margin-line: #e2a79c;
  --fg: #22314a;
  --fg-soft: #3e4759;
  --muted: #7a705c;
  --line: #d8cfb8;
  --line-strong: #a8bed0;
  --accent: #2b4c7e;
  --mark: #fbe79a;
  --surface: #ffffff;
  --surface-soft: #fbfaf4;
  --danger: #c0453a;
  --ok: #2f6b3a;
  /* Рукописный. Остался за логотипом, заголовками первого уровня,
     кнопками и пометками-украшениями — там, где объявлен явно. */
  --hand: "Hand", "Segoe Script", "Bradley Hand", cursive;
  --plain: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text: "Text", var(--plain);
  /* Tovari Sans, за ним Golos: из Golos берутся знаки, которых в Tovari
     нет, прежде всего длинное тире. */
  --small: "Small", "Text", var(--plain);
  /* Основной текст и подзаголовки. Разведены отдельными переменными,
     чтобы можно было менять их независимо. */
  --body: var(--small);
  --sub: var(--small);
  /* Моноширинный — адреса, даты и цифры: рукописным их читать тяжело,
     а адрес человек набирает с бумаги */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  /* Линованная бумага: чистый CSS, ни одной картинки */
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px);
  color: var(--fg-soft);
  /* 23px и разведённые строки — под рукописный текст, который стоял тут
     раньше. Tovari читается и мельче; если решите ужать, начинать
     с этого правила. */
  font: 700 23px/1.6 var(--body);
  letter-spacing: 0.01em;
}

/* Красное поле тетради. Только на широком экране: на телефоне оно съедает
   ширину, которой и так мало. */
@media (min-width: 900px) {
  body { position: relative; }
  body::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 60px;
    width: 2px;
    background: var(--margin-line);
    pointer-events: none;
  }
}

.wrap {
  max-width: 660px;
  margin: 0 auto;
  padding: 16px 16px 56px;
}

.wrap--wide { max-width: 1000px; }
.wrap--hero { max-width: 1180px; }

a { color: var(--accent); }
a:hover { color: var(--danger); }

/* --- шапка сайта --- */

.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1420px;
  margin: 0 auto;
  padding: 10px 20px 6px;
}

.site__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  transform: rotate(-1.5deg);
}

.site__name { font-family: var(--hand); font-size: 52px; font-weight: 700; color: var(--accent); }
.site__zone { font-family: var(--hand); font-size: 27px; color: var(--muted); }

/* Логотип не должен наезжать на красное поле тетради. Оно нарисовано
   в 60px от края окна, а шапка при широком экране центрируется — то есть
   сама уезжает вправо, и добавочный отступ ей уже не нужен. Отсюда
   вычитание: сдвигаем ровно настолько, насколько шапка не сдвинулась сама.
   Поле рисуется только от 900px, ниже сдвигать нечего. */
@media (min-width: 900px) {
  .site { padding-left: max(20px, calc(88px - max(0px, (100vw - 1420px) / 2))); }
}

.site__nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; font-size: 22px; }
.site__nav a { text-decoration: none; border-bottom: 2px solid #c7d9e6; }
.site__nav a:hover { border-color: var(--danger); }

/* Селектор с двумя классами намеренно: у пунктов меню правило
   `.site__nav a` весит больше одиночного `.site__enter` — класс плюс тег
   против одного класса, — и его голубое подчёркивание перекрашивало
   кнопке нижнюю грань. Упрощать обратно нельзя. */
.site__nav .site__enter {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 20px;
  border: 2px solid var(--accent);
  border-radius: 24px 20px 26px 18px;
  font-weight: 700;
  transform: rotate(0.8deg);
}

/* --- заголовок страницы --- */

.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.head__title { margin: 0; font-family: var(--hand); font-size: 42px; font-weight: 700; color: var(--fg); }

.lead { margin: 0 0 16px; font-size: 23px; color: var(--fg-soft); }

/* --- первый экран --- */

.hero { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.hero__title {
  margin: 0;
  max-width: 940px;
  font-family: var(--hand);
  font-size: 50px;
  line-height: 1;
  font-weight: 700;
  color: var(--fg);
  text-align: center;
  text-wrap: pretty;
  transform: rotate(-0.8deg);
}

.hero__lead {
  margin: 0;
  max-width: 900px;
  font-size: 23px;
  line-height: 1.45;
  text-align: center;
  transform: rotate(0.3deg);
}

.hero__badge {
  margin: 0;
  padding: 4px 14px;
  background: #fdf3c8;
  font-size: 22px;
  color: #8a5a12;
  transform: rotate(-1deg);
}

.hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  margin-top: 6px;
}

/* Отзыв и заметка со стрелкой — украшение первого экрана. На телефоне
   прячем: там на экране должна быть форма, а не разговоры. */
.quote,
.note { display: none; }

@media (min-width: 860px) {
  .quote {
    display: flex;
    flex: 0 0 176px;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    text-align: right;
    transform: rotate(-1deg);
  }
  .quote__text { margin: 0; font-family: var(--hand); font-size: 27px; line-height: 1.2; color: var(--fg-soft); }
  .quote__who { margin: 0; font-size: 21px; color: var(--muted); }
  .quote__count { margin: 0; font-family: var(--hand); font-size: 24px; color: var(--ok); }

  .note {
    display: block;
    position: relative;
    flex: 0 0 166px;
    height: 190px;
    margin: 0;
    font-family: var(--hand);
    font-size: 30px;
    line-height: 1.1;
    color: var(--danger);
  }
  .note__text { position: absolute; right: 0; top: 0; width: 160px; text-align: right; transform: rotate(3deg); }
  /* Стрелка: дуга на границах блока плюс наконечник-треугольник */
  .note::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 76px;
    width: 122px;
    height: 62px;
    border-bottom: 3px solid var(--danger);
    border-right: 3px solid var(--danger);
    border-radius: 0 0 66px 0;
  }
  .note::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 128px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 16px solid var(--danger);
  }
}

/* --- панель загрузки --- */

.panel {
  flex: 1 1 0;
  min-width: 0;
  max-width: 680px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  /* Тонкая рамка: панель и так отделена тенью и белым фоном,
     жирная линия делала её тяжелее всего остального на экране */
  border: 1px solid var(--accent);
  border-radius: 20px 26px 22px 24px;
  background: var(--surface);
  box-shadow: 7px 8px 0 rgb(43 76 126 / 12%);
}

@media (min-width: 860px) { .panel { min-width: 320px; } }

.slug { display: flex; align-items: stretch; }

.slug__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: var(--surface);
  color: var(--fg);
  font: 16px var(--mono);
}

.slug__input::placeholder { color: #a29883; }
.slug__input:disabled { background: var(--surface-soft); }

.slug__domain {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--surface-soft);
  color: var(--accent);
  font: 16px var(--mono);
}

.slug__hint { margin: -8px 0 0; font-size: 21px; color: var(--muted); }
.slug__hint.is-ok { color: var(--ok); }
.slug__hint.is-error { color: var(--danger); }

.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 20px;
  padding-bottom: 2px;
  border-bottom: 1px solid #e7e0ce;
  font-size: 22px;
  color: var(--muted);
}

/* Вкладки — кнопки, а не ссылки: они переключают способ публикации.
   Сбрасываем всё, что браузер рисует у button по умолчанию. */
.tabs__item {
  padding: 0 0 8px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.tabs__item:hover { color: var(--accent); }
.tabs__item--on { border-bottom: 2px solid var(--accent); color: var(--accent); font-weight: 700; }
.tabs__item--link { margin-left: auto; text-decoration: underline; }

/* --- вставка кода --- */

.code__label { display: block; margin-bottom: 8px; color: var(--muted); }

.code {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed #c9b8d8;
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--fg);
  font: 14px/1.45 var(--mono);
  resize: vertical;
}

.code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- зона загрузки --- */

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 260px;
  padding: 24px 20px;
  border: 2px dashed #c9a8d8;
  border-radius: 14px 18px 12px 20px;
  background: var(--surface-soft);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.drop:hover { border-color: var(--accent); }
.drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop.is-over { border-color: var(--accent); background: #f3f7fb; }

.drop__hint { font-family: var(--hand); font-size: 30px; line-height: 1.15; color: var(--muted); }

.drop__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-height, а не height: на узком экране подпись переносится на две
     строки и вылезала за пределы плашки */
  min-height: 58px;
  max-width: 100%;
  padding: 8px 32px;
  border: 2px solid var(--accent);
  border-radius: 20px 26px 18px 24px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--hand);
  font-size: 30px;
  line-height: 1.1;
  text-align: center;
  transform: rotate(-0.8deg);
}

.drop__note { font-size: 21px; color: var(--muted); }

/* --- прогресс --- */

.progress { margin-top: 4px; }
.progress__row { display: flex; justify-content: space-between; gap: 12px; font-size: 21px; margin-bottom: 6px; }
.progress__name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress__pct { color: var(--muted); font-variant-numeric: tabular-nums; }

.progress__track {
  height: 9px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(45deg, #2b4c7e 0 4px, #4e77ab 4px 8px);
  transition: width 0.15s linear;
}

.error {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 2px solid var(--danger);
  border-radius: 12px 16px 10px 14px;
  background: #fdeeec;
  color: var(--danger);
  font-size: 22px;
}

/* --- плашки «что можно опубликовать» --- */

.kinds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  list-style: none;
  max-width: 900px;
  margin: 4px 0 0;
  padding: 0;
  font-size: 22px;
}

.kinds li {
  padding: 3px 14px;
  border: 2px solid #dfd6c2;
  border-radius: 20px 16px 22px 14px;
  background: var(--surface);
  color: var(--muted);
}

.kinds li:nth-child(3n) { transform: rotate(-1deg); }
.kinds li:nth-child(3n + 2) { transform: rotate(0.8deg); }
.kinds a { color: var(--accent); text-decoration: none; }
.kinds a:hover { color: var(--danger); }

/* --- секции ниже первого экрана --- */

.block { margin-top: 56px; }

.block__title {
  margin: 0 0 10px;
  font-family: var(--sub);
  font-size: 30px;
  font-weight: 700;
  color: var(--fg);
  transform: rotate(-0.5deg);
}

.block__lead { margin: 0 0 20px; color: var(--muted); }
.block__more { margin: 16px 0 0; }

/* --- витрина примеров --- */

.showcase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.showcase__item {
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: 18px 22px 16px 20px;
  background: var(--surface);
  box-shadow: 4px 5px 0 rgb(40 35 25 / 6%);
}

.showcase__link { display: block; text-decoration: none; }

.showcase__kind {
  display: inline-block;
  margin-bottom: 6px;
  padding: 1px 10px;
  background: #fdf3c8;
  font: 16px var(--mono);
  color: #8a5a12;
}

.showcase__name {
  display: block;
  font-family: var(--sub);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}

.showcase__link:hover .showcase__name { color: var(--danger); }
.showcase__note { margin: 6px 0 0; font-size: 21px; color: var(--muted); }

/* --- списки «кому», «что умеет», «три шага», «чем лучше» --- */

.who,
.feats,
.versus,
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps { counter-reset: step; }

.who li,
.feats li,
.versus li,
.steps li {
  padding-left: 16px;
  border-left: 3px solid var(--line-strong);
  font-size: 22px;
  line-height: 1.45;
  color: var(--fg-soft);
}

.versus li { border-left-color: #e8c4c0; }

.who b,
.feats b,
.versus b,
.steps b {
  display: block;
  font-family: var(--sub);
  font-size: 21px;
  font-weight: 700;
  color: var(--accent);
}

.versus b { color: var(--danger); }

.steps li b::before {
  counter-increment: step;
  content: counter(step) ". ";
}

/* --- короткий блок тарифов --- */

.prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prices__item {
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: 18px 14px 20px 16px;
  background: var(--surface);
}

.prices__name { display: block; font-family: var(--sub); font-size: 22px; color: var(--fg); }
.prices__sum { display: block; font-family: var(--sub); font-size: 28px; color: var(--accent); }
.prices__what { display: block; margin-top: 4px; font-size: 21px; color: var(--muted); }

/* --- вопросы аккордеоном --- */

.qa { display: grid; gap: 8px; }

.qa__item {
  padding: 10px 16px;
  border: 2px solid var(--line);
  border-radius: 16px 20px 14px 18px;
  background: var(--surface);
}

.qa__item summary {
  font-family: var(--sub);
  font-size: 21px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

.qa__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.qa__item[open] summary { margin-bottom: 6px; }
.qa__item p { margin: 0; font-size: 22px; color: var(--fg-soft); }

/* --- финальный призыв --- */

.final {
  margin: 56px 0 0;
  padding: 28px 20px;
  border-top: 2px dashed var(--line);
  text-align: center;
}

.final__text {
  margin: 0 0 16px;
  font-family: var(--sub);
  font-size: 27px;
  color: var(--fg);
  transform: rotate(-0.6deg);
}

.btn--wide { padding: 12px 32px; font-size: 26px; }

/* --- посадочные страницы --- */

.land__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 8px; }
.land__free { color: var(--muted); }

.related { margin-top: 56px; padding-top: 20px; border-top: 2px solid var(--line); }
.related__title { margin: 0 0 10px; font-family: var(--sub); font-size: 22px; color: var(--muted); }
.related ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }

/* --- три стикера под формой --- */

.about {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  width: 100%;
  margin: 22px 0 0;
  padding: 0;
}

.about li {
  flex: 1 1 240px;
  padding: 16px 18px;
  font-size: 22px;
  line-height: 1.5;
  color: #4a4636;
  box-shadow: 3px 4px 10px rgb(40 35 25 / 12%);
}

.about li:nth-child(1) { background: #fdf3c8; transform: rotate(-1deg); }
.about li:nth-child(2) { background: #d9efd3; transform: rotate(0.8deg); }
.about li:nth-child(3) { background: #dce8f7; transform: rotate(-0.6deg); }

.about b { display: block; margin-bottom: 4px; font-family: var(--sub); font-size: 24px; font-weight: 700; color: var(--accent); }

/* --- результат --- */

.done { margin: 0 0 4px; font-family: var(--sub); font-size: 24px; color: var(--ok); }
.result-title { margin: 0 0 14px; font-family: var(--hand); font-size: 44px; line-height: 1.05; color: var(--fg); overflow-wrap: anywhere; }

.link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--accent);
  border-radius: 16px 22px 14px 20px;
  background: var(--surface);
  transform: rotate(-0.6deg);
}

.link__url {
  min-width: 0;
  font: 600 18px/1.3 var(--mono);
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.link__url:hover { text-decoration: underline; }

.btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 18px;
  border: 2px solid var(--line-strong);
  border-radius: 16px 12px 18px 14px;
  background: var(--surface);
  color: var(--accent);
  font-family: var(--hand);
  font-size: 24px;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--primary { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.btn--primary:hover { filter: brightness(1.1); }
.btn.is-done { color: var(--ok); border-color: var(--ok); background: var(--surface); }
.btn--danger { color: var(--danger); border-color: #e8c4c0; }
.btn--danger:hover { border-color: var(--danger); }

.cards { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 0; }

.card {
  flex: 1 1 180px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
  box-shadow: 3px 4px 10px rgb(40 35 25 / 12%);
}

.card:nth-child(odd) { transform: rotate(1deg); }
.card:nth-child(even) { transform: rotate(-1.2deg); }

.card__cap { margin-top: 10px; font-family: var(--sub); font-size: 18px; }
.card__cap a { color: var(--accent); }

.preview { max-width: 100%; max-height: 220px; display: block; margin: 0 auto; }

.qr img { width: 100%; max-width: 180px; height: auto; display: block; margin: 0 auto; }

/* --- почта --- */

.claim { margin-top: 22px; }
.claim__warn { margin: 0 0 12px; font-size: 22px; color: var(--muted); }
.claim__label { display: block; font-family: var(--sub); font-size: 22px; color: var(--accent); margin-bottom: 8px; }
.claim__row { display: flex; flex-wrap: wrap; gap: 8px; }

.input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 12px 16px 10px 14px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
}

.input::placeholder { color: #a29883; }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.input--area { width: 100%; resize: vertical; line-height: 1.5; }

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  font-size: 21px;
  color: var(--fg-soft);
  cursor: pointer;
}

.check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--accent);
}

.claim__msg { margin: 12px 0 0; font-size: 22px; }
.claim__msg.is-ok { color: var(--ok); }
.claim__msg.is-error { color: var(--danger); }

.again { margin: 24px 0 0; }

.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  border-bottom: 2px solid #c7d9e6;
}

.linkish:hover { color: var(--danger); }

/* --- футер --- */

.foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 32px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  border-top: 2px solid var(--margin-line);
  font-size: 21px;
}

.foot__col { display: flex; flex-direction: column; gap: 6px; }

.foot__head {
  font-family: var(--sub);
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
}

.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); }

.muted { color: var(--muted); }
.muted--small { font-size: 21px; }

/* --- кабинет --- */

.my__new { margin: 18px 0 22px; }

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 3px 4px 10px rgb(40 35 25 / 10%);
}

.card-row:nth-child(odd) { transform: rotate(-0.4deg); }
.card-row:nth-child(even) { transform: rotate(0.5deg); }

/* 76, а не 56: в квадрат не влезало слово «страница», и оно вылезало
   за края плашки. Ширина общая для картинок и для плашек с типом,
   иначе колонка съезжает от строки к строке. */
.card-row__thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 56px;
  object-fit: cover;
  background: repeating-linear-gradient(135deg, #efe7d4 0 6px, #fbfaf4 6px 12px);
}

.card-row__thumb--kind {
  display: grid;
  place-items: center;
  padding: 4px 3px;
  background: #fdf3c8;
  font: 14px/1.2 var(--mono);
  text-align: center;
  color: #8a5a12;
}

.card-row__main { flex: 1 1 220px; min-width: 0; }
.card-row__title { margin: 0 0 2px; font-size: 23px; color: var(--fg); overflow-wrap: anywhere; }
.card-row__meta { margin: 0; font-size: 21px; color: var(--muted); overflow-wrap: anywhere; }
.card-row__meta a { color: var(--accent); font-family: var(--mono); font-size: 15px; }
.card-row__acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.drop-menu { position: relative; }
.drop-menu summary { list-style: none; display: inline-flex; align-items: center; }
.drop-menu summary::-webkit-details-marker { display: none; }

.drop-menu__body {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--accent);
  border-radius: 14px 10px 16px 12px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(40 35 25 / 20%);
  width: max(240px, 100%);
}

.drop-menu__body .btn { text-align: center; }

.rename { display: flex; gap: 8px; flex-wrap: wrap; }
.rename .input { flex: 1 1 140px; }

/* --- сообщения и формы --- */

.notice { padding: 12px 14px; border-radius: 12px 16px 10px 14px; font-size: 22px; }
.notice--ok { border: 2px solid var(--ok); background: #dff1e6; color: var(--ok); }
.notice--error { border: 2px solid var(--danger); background: #fdeeec; color: var(--danger); }

.form { margin-top: 18px; }
.field { display: block; margin-bottom: 18px; border: 0; padding: 0; }
.field__label { display: block; font-family: var(--sub); font-size: 22px; color: var(--accent); margin-bottom: 6px; }
.field__hint { display: block; margin-top: 6px; font-size: 21px; color: var(--muted); }
.field__opt { font-family: var(--body); font-size: 22px; color: var(--muted); }
.field .input { width: 100%; }

.radio { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; cursor: pointer; }
.radio input { margin: 4px 0 0; accent-color: var(--accent); }

/* --- админка --- */

.sect { margin: 30px 0 12px; font-family: var(--sub); font-size: 27px; color: var(--fg); }
.count { color: var(--muted); font-family: var(--body); font-size: 22px; }
.empty { color: var(--muted); }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 3px 4px 10px rgb(40 35 25 / 10%);
}

.row__main { flex: 1 1 320px; min-width: 0; }
.row__title { margin: 0 0 2px; font-size: 23px; color: var(--fg); overflow-wrap: anywhere; }
.row__meta { margin: 0 0 8px; font-size: 21px; color: var(--muted); overflow-wrap: anywhere; }
.row__acts { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }

.signals {
  margin: 0;
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  font: 14px/1.45 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- настройки материала --- */

.block { padding: 18px 0; border-top: 2px solid #e7e0ce; }
.block__title { margin: 0 0 6px; font-family: var(--sub); font-size: 26px; font-weight: 700; color: var(--accent); }
.block .muted--small { margin: 0 0 12px; }

.row-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.row-form .input { flex: 1 1 200px; }
.row-form .btn { flex: 0 0 auto; }

/* --- юридические страницы --- */

.doc-text { max-width: 700px; }
.doc-text h2 { margin: 26px 0 8px; font-family: var(--sub); font-size: 26px; font-weight: 700; color: var(--fg); }
.doc-text p { margin: 0 0 12px; }
.doc-text ul { margin: 0 0 12px; padding-left: 20px; }
.doc-text li { margin-bottom: 6px; }
.doc-text .grid { margin: 12px 0 20px; font-size: 22px; }
.doc-text .grid td { vertical-align: top; }

.reqs {
  margin: 12px 0 20px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 22px;
}

.reqs dt { color: var(--muted); font-size: 21px; }
.reqs dd { margin: 0 0 10px; overflow-wrap: anywhere; }
.reqs dd:last-child { margin-bottom: 0; }

/* --- статистика --- */

.figures { display: flex; gap: 14px; margin: 18px 0 8px; }

.figure {
  flex: 1 1 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 3px 4px 10px rgb(40 35 25 / 10%);
}

.figure:nth-child(odd) { transform: rotate(-0.6deg); }
.figure:nth-child(even) { transform: rotate(0.7deg); }

.figure__value { margin: 0; font-family: var(--sub); font-size: 38px; line-height: 1; color: var(--accent); }
.figure__label { margin: 4px 0 0; font-size: 21px; color: var(--muted); }

.chart { display: flex; align-items: flex-end; gap: 4px; height: 130px; margin: 12px 0 6px; }

.chart__col {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid var(--line);
}

.chart__bar { width: 100%; min-height: 2px; background: var(--accent); }

.chart__axis { display: flex; justify-content: space-between; gap: 8px; font-size: 19px; color: var(--muted); }

.share { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 22px; }
.share__title { flex: 0 0 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share__track { flex: 1 1 auto; height: 10px; border: 1px solid var(--line-strong); background: var(--surface); }
.share__fill { display: block; height: 100%; background: var(--accent); }
.share__value { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- тарифы --- */

.tariffs { display: grid; gap: 18px; margin: 22px 0; }

.tariff {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--surface);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, #efe7d4 27px 28px);
  border: 1px solid var(--line);
  box-shadow: 4px 5px 12px rgb(40 35 25 / 10%);
}

.tariff:nth-child(odd) { transform: rotate(-0.7deg); }
.tariff:nth-child(even) { transform: rotate(0.6deg); }

.tariff--current {
  border: 2px solid var(--accent);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, #e4eef6 27px 28px);
}

.tariff__name { margin: 0 0 6px; font-family: var(--sub); font-size: 27px; font-weight: 700; color: var(--fg); }
.tariff__price { margin: 0; font-family: var(--sub); font-size: 38px; line-height: 1; color: var(--accent); }
.tariff__per { font-size: 22px; color: var(--muted); }
.tariff__save { margin: 6px 0 0; font-family: var(--sub); font-size: 19px; color: #8a5a12; min-height: 1.4em; }
.tariff__alt { margin: 6px 0 14px; font-size: 21px; color: var(--muted); }

.tariff__list { list-style: none; margin: 0 0 18px; padding: 0; font-size: 22px; flex: 1 1 auto; }
.tariff__list li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; }
/* Знака ✓ нет ни в Caveat, ни в Golos — берём системный явно,
   иначе браузер подставит его сам и на разных устройствах по-разному */
.tariff__mark { flex: 0 0 14px; font-family: var(--plain); color: var(--ok); }
.tariff__off { color: #a29883; }
.tariff__off .tariff__mark { color: #a29883; }
.tariff__strike { text-decoration: line-through; }

.tariff__buy { margin: 0 0 8px; }
.tariff__buy .btn { width: 100%; }
.tariff__now { margin: 0; font-family: var(--sub); font-size: 21px; color: var(--accent); }

@media (min-width: 860px) {
  .tariffs { grid-template-columns: repeat(3, 1fr); }
}

/* --- таблица контактов --- */

.grid { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 22px; }

.grid th,
.grid td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.grid th { font-family: var(--sub); font-size: 18px; color: var(--accent); }
.grid__muted { color: var(--muted); font-size: 19px; white-space: nowrap; }

@media (min-width: 560px) {
  .wrap { padding: 20px 24px 72px; }
  .link { flex-direction: row; align-items: center; }
  .link__url { flex: 1 1 auto; }
}

/* --- телефон: форма выше описания -------------------------------------------

   На узком экране рукописный заголовок в 50 пунктов занимал весь первый
   экран, и зона загрузки уходила под сгиб. По ТЗ главная решает одну задачу
   — положить файл, и маркетингового полотна выше формы быть не должно.
   Поэтому на телефоне заголовок уменьшается, а подробное описание
   переезжает под панель. На широком экране порядок исходный. */

@media (max-width: 700px) {
  .site { padding: 8px 14px 4px; }
  .site__name { font-size: 40px; }
  .site__zone { font-size: 21px; }
  .site__nav { gap: 6px 16px; font-size: 21px; }
  .site__enter { min-height: 38px; padding: 0 16px; }

  .hero { align-items: stretch; gap: 14px; }

  .hero__title {
    order: 1;
    font-size: 32px;
    line-height: 1.05;
    transform: none;
  }

  .hero__row { order: 2; margin-top: 0; }
  .hero__badge { order: 3; align-self: center; transform: none; }
  .hero__lead { order: 4; font-size: 22px; transform: none; }
  /* Порядок обязателен для каждого ребёнка .hero: без него элемент
     получает order 0 и уезжает выше заголовка. Так плашки типов
     однажды оказались первым, что видно на телефоне. */
  .kinds { order: 5; }

  .panel { padding: 16px; gap: 14px; }

  /* Зона занимает половину строки, и подсказка в поле обрывалась на
     полуслове. Моноширинному кегль можно опустить: у него нормальный
     рост строчных, читается и в 15px.

     font-family повторён намеренно, хотя и наследуется: по нему видно,
     что правило моноширинное, и оно не попадает под общее укрупнение
     текста. Без этой пометки кегль здесь уже уползал дважды. */
  .slug__input,
  .slug__domain { padding: 0 10px; font: 15px var(--mono); }

  /* Подпись на кнопке должна умещаться в одну строку: у Caveat высокие
     выносные элементы, и на двух строках она упиралась в края плашки */
  .drop__cta { font-size: 26px; padding: 10px 22px; }
  .drop__hint { font-size: 24px; }
}

/* --- уведомление о куках --------------------------------------------------
   Полоса снизу, а не окно по центру: перекрывать первый экран уведомлением
   о технических куках — значит терять посетителей ради формальности.
   Кнопка одна: плашка уведомляет, а не спрашивает разрешения — счётчик
   российский, рекламных и партнёрских кук на сервисе нет.                  */

.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -2px 12px rgba(34, 49, 74, 0.08);
}

/* Прочитавшему плашка больше не показывается. Класс ставится в <head>,
   до первой отрисовки. */
.cookie-read .cookie { display: none; }

/* Пока плашка висит, она перекрывала бы низ футера — ссылку на политику
   в том числе. Отступ снимаем сразу, как только её закрыли. */
body { padding-bottom: 132px; }
.cookie-read body { padding-bottom: 0; }

@media (min-width: 641px) {
  body { padding-bottom: 84px; }
}

.cookie__text {
  margin: 0;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--fg-soft);
}

.cookie__ok {
  flex: none;
  padding: 8px 22px;
  font: 700 18px var(--body);
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  cursor: pointer;
}

.cookie__ok:hover { background: #22406c; }
.cookie__ok:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

@media (max-width: 640px) {
  .cookie { gap: 10px; padding: 12px 16px; }
  .cookie__text { font-size: 15px; }
  .cookie__ok { width: 100%; }
}