/* ============================================================
   Каркас: полосы, оболочка, шапка, подвал.
   Ни одного значения цвета или размера — только из токенов.
   ============================================================ */

/* Атрибут hidden обязан выигрывать у display, назначенного классом.
   Без !important строка `.pa-working { display: flex }` перебивает hidden по
   специфичности, и «спрятанный» блок остаётся на экране. Ровно это и вышло:
   надпись «конвертирую…» висела над готовым результатом. */
[hidden] { display: none !important; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Оболочка держит содержимое в пределах страницы. Полосы, которые красят
   фон во всю ширину, кладут её внутрь себя, а не заменяют собой. */
.pa-shell {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* ---------- шапка ---------- */

.pa-headerbar {
  background: var(--c-bg);
  border-bottom: var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.pa-header {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: 4rem;
}

.pa-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-text);
  text-decoration: none;
}

/*
 * Знак: лист, из которого выходит строка. Рисуется в `parts/brand-mark.php`,
 * один файл на шапку и подвал.
 *
 * Обводка внутри берёт `currentColor` и потому живёт в цвете текста вокруг.
 * Зелёная строка — через `--c-mark`: на бумаге обычный акцент, на тёмной
 * плите он даёт 3,19 к одному, поэтому там подставляется светлее.
 */
.pa-mark-brand {
  --c-mark: var(--c-accent);

  /*
   * Цвет берётся у основного текста, а не наследуется от родителя: в подвале
   * родитель приглушён, и знак выходил бледнее имени рядом с ним. На тёмной
   * плите `--c-text` сам подменяется на светлый, так что случая два, а
   * правило одно.
   */
  color: var(--c-text);

  display: block;

  /*
   * 36 точек. Шли от 22: сперва 32, потом владелец попросила ещё немного.
   * В шапку высотой 64 входит с полями по 14; дальше 38 знак начинает спорить
   * с именем по весу, и поднимать пришлось бы оба.
   */
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: none;
}

.pa-slab--ink .pa-mark-brand { --c-mark: var(--c-accent-ink); }

.pa-mark-brand svg { display: block; inline-size: 100%; block-size: 100%; }

/*
 * 24 точки при знаке в 36: знак выше кегля ровно в полтора раза — обычное
 * соотношение для связки знака с именем. Прежде было 18, и после того как
 * знак вырос, имя рядом с ним читалось подписью.
 *
 * Токена на 24 нет нарочно: `--t-xl` — это заголовок внутри текста, и связать
 * с ним имя в шапке значит потом двигать одно, ломая другое.
 */
.pa-brand__name {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: 1.5rem;
  letter-spacing: var(--ls-tight);
}

.pa-nav {
  margin-inline-start: auto;
}

/* ---------- подвал ---------- */

/*
 * Три столбца: имя, документы, реквизиты. Ниже — строка через всю ширину.
 *
 * Раньше подвал был одной строкой: имя слева, список документов справа. Когда
 * документов семь, а к ним прибавились четыре реквизита, строка перестала
 * держаться — поэтому столбцы.
 */
/*
 * Подвал — такая же плита, как разделы, и тёмная: страница открывается тёмным
 * героем и закрывается тёмным подвалом. Прежде это была полоса с чертой сверху.
 */
.pa-footerbar {
  /*
   * Подвал лежит вне контейнера родительской темы и потому тянулся на всю
   * страницу: 1580 против 1480 у прочих плит — торчал полосой по краям.
   * Держим его на ширине остальных и по середине.
   */
  /*
   * Наименьшее из двух: предел полотна и фактическая ширина за вычетом полей.
   * Прежняя формула брала только первое и предполагала, что контейнер всегда
   * во всю допустимую ширину; при окне уже 1200 подвал выходил шире плит.
   */
  max-inline-size: min(
    calc(var(--w-page) - var(--s-gap) * 2),
    calc(100% - var(--s-gap) * 2)
  );
  margin: var(--s-9) auto var(--s-gap);
}

.pa-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-7) var(--s-8);
  align-items: start;
  padding-block: var(--s-8) var(--s-6);
  color: var(--c-muted);
  font-size: var(--t-sm);
}

.pa-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Тот же знак, что в шапке: подвал — второй конец одной и той же страницы.
   Рисует его та же часть; отдельного правила размеру больше не нужно. */

.pa-footer__name {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--t-base);
  color: var(--c-text);
  letter-spacing: var(--ls-tight);
}

.pa-footer__blurb {
  margin: var(--s-4) 0 0;
  max-inline-size: 34ch;
  line-height: 1.7;
}

.pa-footer__k {
  margin: 0 0 var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.pa-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.pa-footer__list a {
  color: var(--c-muted);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.pa-footer__list a:hover {
  color: var(--c-text);
  border-block-end-color: var(--c-accent-text);
}

/*
 * Название документа, за которым пока нечего читать. Пунктир под словом
 * говорит то же, что серый цвет, но глазом: это ещё не ссылка. Цвет взят не
 * самый бледный из возможных — 4,6 : 1 к фону, то есть читается по правилам,
 * а не «почти виден».
 */
.pa-footer__list .is-pending {
  color: color-mix(in srgb, var(--c-muted) 80%, var(--c-bg));
  border-block-end: 1px dashed color-mix(in srgb, var(--c-muted) 45%, transparent);
  cursor: default;
}

/* ---------- реквизиты ---------- */

.pa-footer__who {
  margin: 0;
  display: grid;
  gap: var(--s-3);
}

.pa-footer__who > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--s-4);
  align-items: baseline;
}

.pa-footer__who dt {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.pa-footer__who dd {
  margin: 0;
  color: var(--c-text);
}

/*
 * Незаполненное поле. Не пусто и не выдумано: рамка на месте значения
 * показывает, что здесь чему-то быть, а подпись внутри говорит, чему именно.
 */
.pa-footer__who .is-blank {
  color: color-mix(in srgb, var(--c-muted) 80%, var(--c-bg));
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  border: 1px dashed color-mix(in srgb, var(--c-muted) 40%, transparent);
  padding: var(--s-1) var(--s-2);
  justify-self: start;
}

.pa-footer__pending {
  margin: var(--s-4) 0 0;
  max-inline-size: 30ch;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-muted) 80%, var(--c-bg));
}

/*
 * Знаки карт — строкой над копирайтом, в самом низу. Не рядом с ценами и не в
 * шапке: это не довод продажи, а требование эквайера, и место ему там же, где
 * прочие обязательные надписи.
 *
 * Слегка приглушены прозрачностью: на тёмной плите белые прямоугольники карт
 * светятся ярче имени компании, а главным в подвале должно остаться имя.
 */
.pa-footer__pay {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line-soft);
  list-style: none;
}

.pa-footer__pay img {
  display: block;
  block-size: 25px;
  inline-size: auto;
  border-radius: 3px;
  opacity: .85;
}

/* Название словом, когда файла нет: слово ничего не обещает про картинку. */
.pa-footer__pay span {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: color-mix(in srgb, var(--c-muted) 80%, var(--c-bg));
}

/* Копирайт идёт сразу за знаками — своей черты ему больше не нужно. */
.pa-footer__pay + .pa-footer__copy {
  padding-block-start: var(--s-4);
  border-block-start: 0;
}

.pa-footer__copy {
  grid-column: 1 / -1;
  margin: 0;
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line-soft);
  font-size: var(--t-xs);
  color: color-mix(in srgb, var(--c-muted) 80%, var(--c-bg));
}

/* Три столбца в 1200 точек встают свободно, в 900 — уже нет: реквизиты
   переносят значения по слогам. Сперва два столбца, потом один. */
@media (max-width: 1000px) {
  .pa-footer {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6) var(--s-6);
  }

  .pa-footer__col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .pa-footer {
    grid-template-columns: 1fr;
    padding-block: var(--s-7) var(--s-5);
  }

  .pa-footer__who > div {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }

  .pa-footer__pending { max-inline-size: none; }
}

/* ---------- содержимое ---------- */

/* GeneratePress раскладывает свои контейнеры сам; здесь только то, что
   касается нашей полосы содержимого. */
.site-content,
.pa-main {
  display: block;
  padding-block: var(--s-7);
}

.pa-prose {
  max-width: var(--w-text);
}

/* ---------- родительская тема ---------- */

/* Цвета родителя переведены на наши токены в tokens.css — там же объяснено
   почему. Здесь остаётся только то, что цветом не лечится: GeneratePress
   вешает на карточку содержимого тень, рассчитанную на светлый сайт. */
.inside-article,
.site-content,
.content-area,
.site-main {
  box-shadow: none;
}

/* ---------- заголовки ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  color: var(--c-text);
}

/* ---------- меню ---------- */

.pa-nav { margin-inline-start: auto; }

.pa-nav__list {
  display: flex;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pa-nav__list a {
  color: var(--c-muted);
  text-decoration: none;
  font-size: var(--t-sm);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

.pa-nav__list a:hover { color: var(--c-text); }

.pa-header__cta {
  background: var(--c-accent);
  color: var(--c-accent-in);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  white-space: nowrap;
  margin-inline-start: var(--s-5);
}

/* На телефоне шапка складывается: в строку имя, меню и кнопка не помещаются. */
@media (max-width: 640px) {
  .pa-header {
    flex-wrap: wrap;
    gap: var(--s-3);
    padding-block: var(--s-4);
  }

  .pa-nav { margin-inline-start: 0; inline-size: 100%; order: 3; }
  .pa-nav__list { gap: var(--s-4); flex-wrap: wrap; }
  .pa-header__cta { margin-inline-start: auto; }
}

/* ============================================================
   Свет и разметка фона

   Раньше это жило в home.css и работало только на первой
   странице: внутренние оставались ровным чёрным полем.
   Владелец попросил свет и туда — значит, это уже не украшение
   лендинга, а общий приём сайта, и место ему здесь.
   ============================================================ */

/*
 * Слой света шире полотна, а всё, что вылезло за край, обычно даёт
 * горизонтальную прокрутку. clip срезает его и, в отличие от hidden, не
 * превращает страницу в область прокрутки — прилипший заголовок остаётся
 * прилипшим.
 */

/*
 * Края слоя света растворяются.
 *
 * Без этого нижнее пятно упиралось в край полотна и обрывалось ровной
 * горизонтальной гранью — на короткой странице «Join» это читалось как
 * светлый прямоугольник, положенный поверх фона. Растворение задано в точках,
 * а не в процентах: на странице в 640 точек 90 — заметная доля, на странице в
 * 6900 их попросту не видно, и первый экран ничего не теряет. Потолок в 12 %
 * нужен для совсем коротких: у «Privacy» полотно в 356 точек, и два раза по
 * 90 съели бы половину — от света осталась бы полоска.
 */

.pa-home,
.pa-main { position: relative; }

/* ---------- скругление в шапке и подвале ---------- */

.pa-header__cta { border-radius: var(--r-pill); }

.pa-footer__who .is-blank { border-radius: var(--r-sm); }

/* Знак у имени — квадрат, но не острый: он лежит рядом со скруглённой
   кнопкой, и один прямой угол на всю шапку выглядит забытым. */
/* Заглушки-квадраты убраны 15.09.2026 — скруглять больше нечего. */

/* ============================================================
   Плиты.

   Страница не во всю ширину: у неё поля, а содержимое лежит на
   скруглённых плитах. Приём взят у apex — у него секция имеет
   поля, а внутри лежит блок со скруглением 42 px.

   Тёмная плита переопределяет токены внутри себя. Так дешевле и
   честнее, чем заводить вторые имена: всё, что внутри, красится
   само, и ни одна точка вызова не правится. Тот же ход уже
   сделан для переменных GeneratePress ниже.
   ============================================================ */

.pa-slab {
  position: relative;
  border-radius: var(--r-slab);
  overflow: hidden;
  margin-block: var(--s-gap);
}

.pa-slab__pad {
  padding-block: clamp(var(--s-6), 4vw, var(--s-8));
  /* Боковые поля: без них карточки упираются в тёмную рамку плиты, а при
     скруглении в 40 px это читается как обрезка. */
  padding-inline: clamp(var(--s-4), 3vw, var(--s-7));
}

/*
 * Белая плита лежит листом поверх линованной бумаги: тонкая рамка и мягкая
 * тень показывают, что она сверху. Без них она читается дырой в фоне.
 */
.pa-slab--paper {
  background: var(--c-surface);
  border: var(--border);
  box-shadow: var(--sh-card);
}
/* Кремовая плита, наоборот, утоплена в бумагу: линии под ней не просвечивают,
   и ряд белых листов перестаёт быть однообразным. */
.pa-slab--raised {
  background: var(--c-raised);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent);
}

/*
 * Тёмная плита. Зелёный текстом на ней даёт 3,19 : 1 при пороге 4,5, поэтому
 * акцент-текст здесь осветлён до 5,16 (измерено 13.09.2026). Заливке кнопки
 * это не мешает: для крупного пятна порог 3:1.
 */
.pa-slab--ink {
  --c-bg:          var(--c-ink);
  /*
   * --c-surface здесь нарочно НЕ переопределяется. Карточки внутри тёмной
   * плиты изображают светлый интерфейс, лежащий на ней, — почернев, они
   * сливаются с плитой. Это уже случилось: таблица в сцене стала чёрной.
   */
  --c-text:        var(--c-on-ink);
  --c-muted:       color-mix(in srgb, var(--c-on-ink) 72%, transparent);
  --c-accent-text: var(--c-accent-ink);
  --c-line:        color-mix(in srgb, var(--c-on-ink) 18%, transparent);

  background: var(--c-ink);
  color: var(--c-on-ink);
}

/* Поля страницы, на которых лежат плиты. */
.pa-home,
.pa-main { padding-inline: var(--s-gap); }

/*
 * Ширина полотна принадлежит нам, а не родительской теме.
 *
 * У GeneratePress свой контейнер `.site.grid-container` с пределом 1200 px, и
 * пока он стоял, наш --w-page не решал ничего: подняли токен до 1500, а
 * страница осталась прежней. Обнаружено замером цепочки, а не на глаз.
 */
.site.grid-container { max-width: var(--w-page); }

/* ============================================================
   Линованный фон.

   Лист разлинован строкой в 28 px, как бухгалтерская бумага.
   Это не украшение ради узора: товар — документы и таблицы, и
   фон говорит то же самое, что страница.

   Линия бледная нарочно. Всё, что заметнее, начинает спорить с
   содержимым: у клетки это проверялось макетом и отброшено.

   Не путать со снятым свечением: то держалось тьмой и на бумаге
   читалось замыленностью. Здесь рисунок, а не свет.
   ============================================================ */

body {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 27px,
    color-mix(in srgb, var(--c-edge) 55%, transparent) 27px 28px
  );
}

/* ============================================================
   Перенос строк.

   Приём apex: на каждом заголовке балансировка, на абзацах —
   «красивый» перенос. Браузер выравнивает длину строк вместо
   того, чтобы оставлять последней одно висящее слово. Ничего
   не стоит и разметки не меняет.
   ============================================================ */

h1, h2, h3,
.pa-hero__title,
.pa-lede__title { text-wrap: balance; }

p, li, figcaption { text-wrap: pretty; }