/* «Свой чек» — сайт продукта.
 *
 * Один файл на все страницы, кроме API: та живёт отдельно и одним файлом
 * нарочно — её скачивают, печатают и открывают без интернета.
 *
 * Палитра и шрифт — из `05-фирменный-стиль\ФИРМЕННЫЙ-СТИЛЬ.md`. Ничего
 * со стороны: ни шрифтов, ни библиотек, ни счётчиков. Сайт продукта,
 * который обещает клиенту «наружу ничего не уходит», сам обязан быть таким.
 */

:root {
  --графит: #16232E;
  --янтарь: #F2762E;
  --бумага: #F6F4EF;
  --лента: #F7F3EA;
  --серый: #6B7A88;
  --линия: #E2DDD3;
  --карточка: #FFFFFF;
  --код-фон: #16232E;
  --код-текст: #E9E4DA;
  --зелёный: #1E9E64;
  --красный: #D9453C;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 20px; }

body {
  margin: 0;
  background: var(--бумага);
  color: var(--графит);
  font: 16px/1.62 "Golos Text", Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #14507E; text-decoration-color: rgba(20, 80, 126, .35); }
a:hover { text-decoration-color: currentColor; }

code, pre, .моно {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: .92em;
}

code {
  background: rgba(22, 35, 46, .06);
  padding: .1em .34em;
  border-radius: 4px;
}

pre {
  background: var(--код-фон);
  color: var(--код-текст);
  padding: 16px 18px;
  border-radius: 10px;
  overflow-x: auto;
  line-height: 1.5;
}

pre code { background: none; padding: 0; color: inherit; }

.обёртка { max-width: 940px; margin: 0 auto; padding: 0 20px; }

/* ---- шапка и подвал --------------------------------------------------- */
header.шапка {
  border-bottom: 1px solid var(--линия);
  background: var(--карточка);
  position: sticky;
  top: 0;
  z-index: 5;
}

header.шапка .обёртка {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 62px;
  flex-wrap: wrap;
}

.знак { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.знак img { height: 30px; width: auto; display: block; }
.знак b { color: var(--графит); font-size: 17px; letter-spacing: -.01em; }

nav.разделы { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
nav.разделы a { color: var(--графит); text-decoration: none; font-size: 15px; }
nav.разделы a:hover { color: #14507E; }
nav.разделы a.тут { color: var(--янтарь); font-weight: 600; }

footer.подвал {
  border-top: 1px solid var(--линия);
  margin-top: 64px;
  padding: 28px 0 48px;
  color: var(--серый);
  font-size: 14px;
}

footer.подвал a { color: var(--серый); }
footer.подвал p { margin: 6px 0; }

/* ---- заголовки и текст ------------------------------------------------ */
h1 {
  font-size: 38px;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 40px 0 14px;
}

h2 {
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 44px 0 12px;
  padding-top: 6px;
}

h3 { font-size: 19px; margin: 26px 0 8px; }

p { margin: 12px 0; }
ul, ol { margin: 12px 0; padding-left: 22px; }
li { margin: 6px 0; }

.подзаголовок {
  font-size: 19px;
  color: var(--серый);
  max-width: 640px;
  margin-top: 0;
}

.серым { color: var(--серый); }

/* ---- карточки, врезки, кнопки ----------------------------------------- */
.карточки {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 22px 0;
}

.карточка {
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 12px;
  padding: 18px 20px;
}

.карточка h3 { margin-top: 0; }
.карточка p:last-child { margin-bottom: 0; }

.врезка {
  background: var(--лента);
  border-left: 3px solid var(--янтарь);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 22px 0;
}

.врезка .шапка {
  font-weight: 600;
  margin-bottom: 4px;
}

.врезка p:last-child { margin-bottom: 0; }

.кнопки { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0; }

.кнопка {
  display: inline-block;
  background: var(--янтарь);
  color: #fff;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 9px;
  font-weight: 600;
  border: 1px solid transparent;
}

.кнопка:hover { background: #DE6A26; }

.кнопка.тихая {
  background: transparent;
  color: var(--графит);
  border-color: var(--линия);
}

.кнопка.тихая:hover { background: var(--карточка); }

/* ---- таблицы ----------------------------------------------------------- */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 18px 0;
  font-size: 15px;
  background: var(--карточка);
}

th, td {
  border: 1px solid var(--линия);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

th { background: var(--лента); font-weight: 600; }

.прокрутка { overflow-x: auto; }

/* ---- схема «как это работает» ----------------------------------------- */
.схема {
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
}

.схема pre {
  background: none;
  color: var(--графит);
  padding: 0;
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 640px) {
  h1 { font-size: 30px; }
  h2 { font-size: 22px; }
  header.шапка { position: static; }
  nav.разделы { margin-left: 0; gap: 14px; }
}