/* Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V5
 * Hallmark · macrostructure: Marquee Hero + Catalogue · theme: studied-DNA
 * DNA-source: prompt «Halo / USD Halo» (premium fintech landing, React/Tailwind)
 * Перенесено из референса: бумага #F5F5F5, крупные rounded-2xl/3xl карточки,
 *   pill-кнопки с белым кружком-стрелкой, тесный трекинг (−0.03…−0.04em),
 *   600 как самый жирный вес, 2-колоночный «заголовок слева / абзац справа»,
 *   4-колоночная сетка карточек с широкой первой, бегущая строка.
 * Адаптировано под нас: палитра брендовая (тил #3E6263 + акцент #7C3AED
 *   вместо чёрного и #2B2644); шрифт Onest вместо платного TT Norms Pro;
 *   вместо чужих CDN-видео — собственный брендовый паттерн; вместо выдуманного
 *   «backed by» с чужими логотипами — маркиз на реальных категориях заказов.
 * nav: N2 floating-over-hero · footer: Ft5 statement · enrichment: E-brand-pattern
 * motion: 1 примитив (маркиз) + переходы состояний · studied: yes · v1.1.0
 */

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { color-scheme: light; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }

.tnum { font-variant-numeric: tabular-nums; }
.u-num { font-family: var(--font-mono); }

/* Референс держит всё содержимое в max-w-[88rem] mx-auto */
.shell {
  max-width: var(--page-max);
  margin-inline: auto;
  width: 100%;
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-input);
}

/* ============ Кнопки — pill из референса ============ */
.btn {
  position: relative;
  overflow: hidden;
  /* Слой паттерна лежит на z-index: -1; без isolation он ушёл бы под
     карточку, на которой стоит кнопка. */
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  white-space: nowrap;
  cursor: pointer;
  padding: 0.75rem var(--space-lg);
  min-height: 44px;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Брендовый паттерн проявляется по наведению на любой кнопке.
   Отдельным слоем, а не фоном самой кнопки: заливка обязана остаться
   сплошной, паттерн только всплывает поверх неё.
   Размер auto 420%, не cover: на кнопке 240×44 cover показывает две линии
   и читается как грязь. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/logo/pattern-white.svg") center / auto 420%;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity var(--dur-med) var(--ease-out),
              transform 600ms var(--ease-out);
}
/* На светлых кнопках белые линии не видны — берём тёмный вариант паттерна */
.btn--light::before,
.btn--ghost::before {
  background-image: url("assets/logo/pattern-green.svg");
}

/* Кнопка со стрелкой в белом кружке: слева текст с большим отступом,
   справа кружок почти вплотную к краю (pl-8 pr-2 из референса). */
.btn--arrow {
  padding: 0.4rem 0.4rem 0.4rem var(--space-xl);
  font-size: var(--text-md);
}
.btn__circle {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-ink);
  flex: none;
}
.btn__circle svg { width: 1.125rem; height: 1.125rem; }

.btn--dark { background: var(--color-ink); color: var(--color-paper); }
.btn--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--ghost {
  background: transparent;
  color: var(--color-ink-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
/* Инверсия --dark: для тёмных поверхностей, где тёмная кнопка пропадает */
.btn--light { background: var(--color-deep-ink); color: var(--color-deep); }
.btn--light .btn__circle { background: var(--color-deep); color: var(--color-deep-ink); }

@media (hover: hover) and (pointer: fine) {
  .btn--dark:hover { background: var(--color-deep-2); }
  .btn--light:hover { background: var(--color-paper-2); }
  .btn--accent:hover { background: var(--color-accent-hover); }
  .btn--ghost:hover { color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-ink); }
  .btn:hover::before { opacity: 0.42; transform: none; }
  /* На светлой заливке тёмные линии заметнее — держим их тише */
  .btn--light:hover::before,
  .btn--ghost:hover::before { opacity: 0.26; }
}
/* С клавиатуры кнопка тоже должна показывать паттерн — иначе состояние
   фокуса выглядит беднее ховера */
.btn:focus-visible::before { opacity: 0.42; transform: none; }
.btn--light:focus-visible::before,
.btn--ghost:focus-visible::before { opacity: 0.26; }

@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: opacity 120ms linear; transform: none; }
}

/* ============ Экран 1 ============ */
.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--page-gutter);
  gap: var(--space-md);
}

/* ============ Header — самостоятельная скруглённая карточка над героем ==========
   Раньше шапка лежала абсолютом поверх героя. Теперь это отдельная светлая
   карточка: тот же радиус, что у героя, — они читаются как одна семья,
   но разделены зазором .screen (gap). */
.nav {
  position: relative;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  min-height: var(--nav-h);
  background: var(--color-card);
  border-radius: var(--radius-hero);
  /* Слева больше воздуха, справа кнопка почти вплотную к краю —
     та же логика, что у pill-кнопки со стрелкой. */
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
}
@media (min-width: 40rem) {
  .nav { padding-left: var(--space-lg); }
}
/* Кнопка в шапке компактнее на мобильном, чтобы не спорить с маркой */
.nav .btn { padding-inline: var(--space-md); font-size: var(--text-xs); }
@media (min-width: 40rem) {
  .nav .btn { padding-inline: var(--space-lg); font-size: var(--text-sm); }
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-head);
  white-space: nowrap;
  min-width: 0;
}
.nav__brand img { width: 28px; height: 28px; flex: none; }

/* На самых узких экранах словесная марка не помещается рядом с кнопкой —
   остаётся знак. Сама кнопка не ужимается и не переносится (gate 49). */
@media (max-width: 22rem) {
  .nav__brand span { display: none; }
}
@media (min-width: 40rem) {
  .nav__brand { font-size: var(--text-lg); }
}

.nav__links {
  display: none;
  gap: var(--space-xl);
  margin-inline: auto;
}
.nav__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.nav__links a:hover { color: var(--color-ink); }

.nav .btn { margin-left: auto; }
@media (min-width: 56rem) {
  .nav__links { display: flex; }
  .nav .btn { margin-left: 0; }
}

/* ============ Hero — большая скруглённая карточка ============ */
.hero { display: flex; }

.hero__card {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  border-radius: var(--radius-hero);
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-hero-2), var(--color-hero));
  /* Референс держит карточку почти во весь экран; svh — чтобы адресная
     строка мобильного браузера не обрезала низ. Из высоты вычтены поля
     .screen, карточка-шапка и зазор между ними. */
  min-height: min(
    calc(100svh - 2 * var(--page-gutter) - var(--nav-h) - var(--space-md)),
    44rem
  );
  display: flex;
}

/* Брендовый паттерн вместо видео из референса */
.hero__pattern {
  position: absolute;
  inset: 0;
  background-image: url("assets/logo/pattern-green.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  /* Низ отдан маркизу — он прижимается к самому краю карточки */
  padding-bottom: var(--space-lg);
}

/* Текст слева, живая лента справа */
.hero__main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
.hero__text { display: flex; flex-direction: column; align-items: flex-start; }

/* ============ Живая лента свежих заказов ============ */
.hero__feed { display: none; }

.hero__feed-list { display: grid; gap: var(--space-xs); }

.hfeed {
  background: var(--color-hero-chip);
  border-radius: var(--radius-card);
  padding: var(--space-md);
}
.hfeed__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}
.hfeed__cat {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--color-primary);
}
.hfeed__date { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.hfeed__title {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--track-tight);
  overflow-wrap: anywhere;
}
.hfeed__qty {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  word-spacing: -0.3em;
}
.hfeed__qty span { font-family: var(--font-body); color: var(--color-muted); word-spacing: normal; }

.hero__title {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  max-width: 18ch;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-md);
}

.hero__lede {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-ink-2);
  max-width: 44ch;
  margin-bottom: var(--space-xl);
}

/* Маркиз прижат к самому низу карточки героя */
.hero__content .marquee { margin-top: auto; padding-top: var(--space-xl); }

/* ============ Маркиз ============ */
.marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--dur-marquee-cats) linear infinite;
}
/* Каждая категория — отдельная скруглённая плашка */
.marquee__item {
  margin-inline: var(--space-2xs);
  flex-shrink: 0;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  color: var(--color-ink);
  background: var(--color-hero-chip);
  border-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (hover: hover) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ============ Info — «Как это работает» ============ */
.info {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-3xl) var(--page-gutter);
}

/* Референс: заголовок+кнопка слева, крупный абзац справа */
.info__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
  align-items: start;
}

.info__title {
  font-size: var(--text-display-s);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-head);
  margin-bottom: var(--space-lg);
  overflow-wrap: anywhere;
}

.info__quote {
  font-size: var(--text-quote);
  line-height: 1.45;
  letter-spacing: var(--track-tight);
  color: var(--color-ink-2);
}

.info__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.fcard {
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  min-height: 19rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
}

.fcard__title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--track-tight);
  overflow-wrap: anywhere;
}
.fcard__body { font-size: var(--text-sm); line-height: 1.6; max-width: 34ch; }

/* Широкая карточка с брендовым паттерном (роль image-карточки референса) */
.fcard--wide {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--color-hero-2), var(--color-hero));
  color: var(--color-ink);
}
.fcard--wide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/logo/pattern-green.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}
.fcard--wide > * { position: relative; z-index: var(--z-base); }
.fcard--wide .fcard__body { color: var(--color-ink-2); }

/* Тёмные карточки — роль #2B2644 из референса, в брендовом тиле */
.fcard--deep { background: var(--color-deep); color: var(--color-deep-ink); }
.fcard--deep .fcard__body { color: var(--color-deep-muted); }

/* ============ Каталог ============ */
.catalog {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 var(--page-gutter) var(--space-3xl);
}

.catalog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.catalog__eyebrow {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-2xs);
}
.catalog__title {
  font-size: var(--text-display-s);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-head);
}
.catalog__count {
  font-size: var(--text-sm);
  color: var(--color-muted);
  white-space: nowrap;
}

/* Чипы категорий, поиск, селекты и «Сбросить» жили здесь до того, как
   каталог на главной стал витриной. Инструменты переезжают на catalog.html —
   стили писать заново, вместе с той страницей. */

/* --- Лента заказов: одна широкая строка в ряд ---
   Каталог не разглядывают, а сканируют и сравнивают: строка ставит все
   количества в один столбец, и объёмы читаются движением взгляда вниз.
   Сетка из карточек этого не давала — числа прыгали по экрану. */
.catalog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
}

.order-card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  grid-template-areas:
    "thumb main"
    "nums  nums"
    "cta   cta";
  gap: var(--space-md);
  /* Ховер — обводка, а не заливка: карточка светлее бумаги, заливать нечем. */
  box-shadow: inset 0 0 0 var(--rule-hair) transparent;
  transition: box-shadow var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .order-card:hover { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
}

.order-card__thumb {
  grid-area: thumb;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 0.625rem;
  background: var(--color-paper-2);
}
/* Заглушка вместо фото — брендовый паттерн на светлой подложке героя */
.order-card__thumb--empty {
  background:
    url("assets/logo/pattern-green.svg") center / cover,
    linear-gradient(150deg, var(--color-hero-2), var(--color-hero));
  background-blend-mode: multiply;
}
.order-card__main { grid-area: main; min-width: 0; }
.order-card__nums { grid-area: nums; }
.order-card__cta  { grid-area: cta; }

.order-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}
.order-card__cat {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--color-primary);
}
.order-card__date { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }

.order-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  color: var(--color-ink);
  overflow-wrap: anywhere;
  margin-bottom: var(--space-2xs);
}

/* Колонка чисел: количество — самое крупное, под ним ткань, срок и цена
   строками. Значения набраны 600-м, подписи — обычным: столбец сканируется
   по правому краю карточек, а не читается как текст. */
.order-card__nums {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
}

.order-card__qty {
  font-family: var(--font-mono);
  /* PT Mono есть только в 400 — жирность не задаём, иначе браузер
     синтезирует псевдожирный. Заметность даёт размер. */
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--color-ink);
  white-space: nowrap;
  /* Intl ru-RU разделяет разряды неразрывным пробелом; в моноширинном
     шрифте он шириной с цифру и «3 000» распадается — поджимаем. */
  word-spacing: -0.3em;
  margin-bottom: var(--space-3xs);
}
.order-card__unit {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  /* Возвращаем нормальный пробел: иначе поджатие приклеит «шт» к цифре */
  word-spacing: normal;
  margin-left: 0.35em;
}

.order-card__spec {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}
.order-card__spec b { font-weight: 600; color: var(--color-ink); }

.order-card__body {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.order-card__notes {
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.order-card__cta .btn { width: 100%; }

/* Полоса «показать ещё» под двумя строками каталога */
.catalog__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}
.catalog__more:empty { display: none; }

/* ============ Промо канала ============
   Врезка внутри ленты и плитка в сетке каталога — один компонент в двух
   формах. Тёмная поверхность + белый паттерн: та же семья, что тариф
   «3 месяца» и футер, поэтому врезка не читается рекламным баннером. */
.promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-deep);
  color: var(--color-deep-ink);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/logo/pattern-white.svg") center / cover;
  opacity: 0.16;
  pointer-events: none;
}
.promo__title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--track-tight);
  margin-bottom: var(--space-2xs);
}
.promo__text {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-deep-muted);
  max-width: 52ch;
}
/* В сетке плитка тянется по высоте ряда — кнопку прижимаем к низу,
   иначе под ней остаётся пустое поле в половину карточки */
.promo .btn { width: 100%; margin-top: auto; }

/* Широкая врезка в ленте: текст слева, кнопка справа */
@media (min-width: 48rem) {
  .promo--wide {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-lg) var(--space-xl);
  }
  .promo--wide .btn { width: auto; margin-left: auto; flex: none; }
}

.empty {
  grid-column: 1 / -1;
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}
.empty h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  margin-bottom: var(--space-xs);
}
.empty p { color: var(--color-muted); margin-bottom: var(--space-md); max-width: 40ch; margin-inline: auto; }

/* ============ Страница полного каталога (catalog.html) =======================
   Здесь, в отличие от главной, каталог — инструмент: есть поиск, фильтры и
   сортировка. Форма карточки другая — плитка с фото, а не строка: на странице
   с фильтрами заказ уже выбирают глазами, а не сравнивают числа подряд. */
.catpage {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-3xl);
}

.crumbs { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-sm); }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--color-ink); }
.crumbs span::before { content: "→"; margin: 0 0.5em; color: var(--color-rule); }

.catpage__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.catpage__title {
  font-size: var(--text-display-s);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-display);
}
.catpage__count { font-size: var(--text-sm); color: var(--color-muted); }

/* Панель инструментов: «Создать заказ» + поиск + ткань + сортировка */
.tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.tools__search { position: relative; flex: 1 1 20rem; min-width: 11rem; }
.tools__search svg {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-muted);
  pointer-events: none;
}
.fld {
  height: 48px;
  width: 100%;
  border: var(--rule-hair) solid var(--color-rule);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-card);
  border-radius: var(--radius-pill);
  padding-inline: var(--space-lg);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  transition: border-color var(--dur-short) var(--ease-out);
}
.tools__search .fld { padding-left: 2.75rem; }
.fld--sel { width: auto; min-width: 10.5rem; cursor: pointer; }
.fld::placeholder { color: var(--color-muted); }
@media (hover: hover) and (pointer: fine) {
  .fld:hover { border-color: var(--color-ink-2); }
}
.fld:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.tools .btn { min-height: 48px; }

.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.tile {
  position: relative;
  background: var(--color-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 var(--rule-hair) transparent;
  transition: box-shadow var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
}

/* flex: none — иначе плитка тянется по высоте ряда вместе с фото */
.tile__media {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 11;
  background:
    url("assets/logo/pattern-green.svg") center / cover,
    linear-gradient(150deg, var(--color-hero-2), var(--color-hero));
  background-blend-mode: multiply;
}
/* absolute обязателен: height: 100% зависит от высоты родителя, а её задаёт
   aspect-ratio — связь циклическая, и плитка растёт по размеру фотографии */
.tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-sm) var(--space-md);
  background: oklch(21% 0.014 196 / 0.72);
  color: var(--color-deep-ink);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Плашка «Срочно». Красного в палитре нет и заводить его ради одного ярлыка
   нельзя — берём тёмную. Ставится только если срок реально помечен срочным. */
.tile__flag {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  padding: 0.25rem var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}

.tile__body { padding: var(--space-md); display: flex; flex-direction: column; flex: 1; }
.tile__qty {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1.1;
  word-spacing: -0.3em;
  margin-bottom: var(--space-sm);
}
.tile__qty span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  word-spacing: normal;
  margin-left: 0.35em;
}
.tile__specs { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.tile__spec { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink-2); }
.tile__spec svg { width: 16px; height: 16px; color: var(--color-primary); flex: none; }
.tile__spec b { font-weight: 600; color: var(--color-ink); }
.tile__foot {
  margin-top: auto;
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ============ Подписка — по схеме блока «Как это работает» ====================
   Шапка в два столбца + сетка карточек с одной акцентной. Асимметрия здесь
   зеркальная: не 2+1+1, а 1+1+2 — карточки растут слева направо и взгляд
   приходит на самый выгодный тариф. Тёмная карточка ровно одна.
   Верхнего отступа нет: его даёт padding-bottom каталога. */
.plans {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 var(--page-gutter) var(--space-3xl);
}

.plans__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
  align-items: start;
}

.plans__title {
  font-size: var(--text-display-s);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-head);
  overflow-wrap: anywhere;
}

.plans__quote {
  font-size: var(--text-quote);
  line-height: 1.45;
  letter-spacing: var(--track-tight);
  color: var(--color-ink-2);
}

.plans__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.plan {
  background: var(--color-card);
  border-radius: var(--radius-card);
  /* На узких экранах 2.5rem полей съедают строку списка и подпись кнопки —
     полный отступ включается вместе с многоколоночной сеткой (40rem). */
  padding: var(--space-lg);
  min-height: 19rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
}

.plan__name {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--track-tight);
}

/* Цена — тот же приём, что «Количество» в карточке заказа: моно, --text-xl.
   PT Mono только в 400 — жирность не задаём. */
.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin-top: var(--space-xs);
}
.plan__amount {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1.1;
  white-space: nowrap;
  /* Пробел в моноширинном шрифте шириной с цифру — «1000 ₽» распадается */
  word-spacing: -0.3em;
}
/* Символ валюты — основным шрифтом, как единица в карточке заказа */
.plan__cur {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-muted);
  word-spacing: normal;
}
.plan--feature .plan__cur { color: var(--color-deep-muted); }
.plan__period { font-size: var(--text-sm); color: var(--color-muted); }

.plan__note {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-deep-ink);
}

.plan__list {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-ink-2);
}
.plan__item { display: flex; align-items: flex-start; gap: var(--space-xs); }
.plan__icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.15rem;
  color: var(--color-primary);
}
/* То, чего в тарифе нет: приглушено целиком, вместе с иконкой */
.plan__item--off { color: var(--color-muted); }
.plan__item--off .plan__icon { color: currentColor; }

.plan .btn { width: 100%; }
/* Отступ слева у кнопки-стрелки рассчитан на широкую кнопку: в узкой
   карточке подпись из-за него обрезается. Полный отступ — от 40rem. */
.plan .btn--arrow { padding-left: var(--space-lg); }

/* Акцентный тариф. Фиолетовый сюда не идёт — сплошная заливка акцентом
   закреплена за «Связаться с заказчиком»; выделяем тёмной поверхностью. */
.plan--feature {
  position: relative;
  overflow: hidden;
  background: var(--color-deep);
  color: var(--color-deep-ink);
}
.plan__pattern {
  position: absolute;
  inset: 0;
  background-image: url("assets/logo/pattern-white.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  pointer-events: none;
}
.plan__inner {
  position: relative;
  z-index: var(--z-base);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
}
.plan--feature .plan__period,
.plan--feature .plan__list { color: var(--color-deep-muted); }
.plan--feature .plan__icon { color: var(--color-deep-ink); }

/* ============ Экосистема — третий макет: плитки слева, крупная плита справа ==
   Шаблон описан в DESIGN.md и до этого блока не использовался. Отличия от
   «Как это работает»: заголовок крупнее (--text-display), появляется
   надзаголовок, справа одна плита вместо сетки, текст лежит поверх подложки,
   а ссылка внизу — не pill-кнопка, а кружок со стрелкой + текст.
   Слева — три плитки-переключателя; активная задаёт содержимое плиты.
   Верхнего отступа нет намеренно: его даёт padding-bottom каталога. */
.media {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 var(--page-gutter) var(--space-3xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

/* Шапка блока занимает всю ширину — под ней уже идут две колонки */
.media__head { grid-column: 1 / -1; }

.media__eyebrow {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

.media__title {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--track-display);
  max-width: 18ch;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-lg);
}

.media__lede {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-ink-2);
  max-width: 46ch;
}

/* --- Плитки-переключатели --- */
.media__cards {
  display: grid;
  gap: var(--space-md);
  align-self: stretch;      /* тянемся по высоте плиты справа */
  grid-auto-rows: 1fr;      /* три равные полосы */
}

.ecard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2xs);
  min-height: 9rem;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  border: 0;
  border-radius: var(--radius-card);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

/* Паттерн отдельным слоем — прозрачность не должна задевать текст */
.ecard__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  transition: opacity var(--dur-med) var(--ease-out),
              transform 600ms var(--ease-out);
}

/* Плитки — второй по величине текст на странице после заголовка блока,
   поэтому размер задан clamp'ом, а не токеном шкалы */
.ecard__label {
  font-size: clamp(1.625rem, 1.4vw + 0.9rem, 2.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: var(--track-head);
  overflow-wrap: anywhere;
}
.ecard__hint {
  font-size: var(--text-lg);
  line-height: 1.35;
  max-width: 30ch;
}

/* Метка активной плитки: полоска у левого края, цвет наследуется от плитки,
   поэтому одинаково читается и на светлой, и на тёмной подложке */
.ecard::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
  background: currentColor;
  transition: height var(--dur-med) var(--ease-out);
}
.ecard.is-active::after { height: 42%; }

/* Неактивные притушены, активная выступает вперёд */
.ecard:not(.is-active) { opacity: 0.66; }
.ecard.is-active {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px oklch(20% 0.02 196 / 0.55);
}
.ecard.is-active .ecard__pattern { opacity: 0.42; transform: scale(1.06); }
.ecard:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Фиолетовая: сплошной акцент закреплён за CTA «Связаться с заказчиком»,
   поэтому здесь светлая акцентная подложка + фиолетовые линии паттерна */
.ecard--accent {
  background: linear-gradient(150deg, oklch(98% 0.014 293), var(--color-accent-50));
  color: var(--color-accent-700);
}
.ecard--accent .ecard__pattern {
  background-image: url("assets/logo/pattern-accent.svg");
}
.ecard--accent .ecard__hint { color: var(--color-ink-2); }

/* Светлая: тот же рецепт, что подложка героя */
.ecard--light {
  background: linear-gradient(150deg, var(--color-hero-2), var(--color-hero));
  color: var(--color-ink);
}
.ecard--light .ecard__pattern {
  background-image: url("assets/logo/pattern-green.svg");
}
.ecard--light .ecard__hint { color: var(--color-ink-2); }

/* Зелёная: тёмная брендовая поверхность + белые линии */
.ecard--deep {
  background: var(--color-deep);
  color: var(--color-deep-ink);
}
.ecard--deep .ecard__pattern {
  background-image: url("assets/logo/pattern-white.svg");
  opacity: 0.14;
}
.ecard--deep.is-active .ecard__pattern { opacity: 0.26; }
/* Тёмную притушиваем слабее — на 0.66 она уходит в серый */
.ecard--deep:not(.is-active) { opacity: 0.84; }
.ecard--deep .ecard__hint { color: var(--color-deep-muted); }

/* Плита — та же семья, что герой: радиус --radius-hero, градиент и паттерн.
   Высота растёт с шириной, но не выше 45rem, иначе на большом мониторе
   получается пустая простыня. */
.media__plate {
  --plate-pad: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-hero);
  background: linear-gradient(150deg, var(--color-hero-2), var(--color-hero));
  min-height: clamp(24rem, 40vw + 10rem, 45rem);
  display: flex;
  padding: var(--plate-pad);
}

/* Отдельный слой — чтобы прозрачность паттерна не задевала текст.
   Цвет и фон плиты следуют за активной плиткой слева (JS переключает
   модификатор на .media__plate) — без этого паттерн остаётся всегда
   зелёным, даже когда активна фиолетовая или тёмная плитка. */
.media__pattern {
  position: absolute;
  inset: 0;
  background-image: url("assets/logo/pattern-green.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}

/* Медиа: та же светлая акцентная подложка, что у .ecard--accent */
.media__plate--accent {
  background: linear-gradient(150deg, oklch(98% 0.014 293), var(--color-accent-50));
}
.media__plate--accent .media__pattern {
  background-image: url("assets/logo/pattern-accent.svg");
}

/* Чат: тёмная брендовая поверхность + белые линии, текст инвертирован —
   тот же рецепт, что у .btn--light (--color-deep-ink на --color-deep) */
.media__plate--deep {
  background: var(--color-deep);
}
.media__plate--deep .media__pattern {
  background-image: url("assets/logo/pattern-white.svg");
  opacity: 0.16;
}
.media__plate--deep .media__plate-title { color: var(--color-deep-ink); }
.media__plate--deep .media__plate-body { color: var(--color-deep-muted); }
.media__plate--deep .arrow-link { color: var(--color-deep-ink); }
.media__plate--deep .arrow-link__circle {
  background: var(--color-deep-ink);
  color: var(--color-deep);
}
@media (hover: hover) and (pointer: fine) {
  .media__plate--deep .arrow-link:hover .arrow-link__circle { background: var(--color-paper-2); }
}

/* Панели лежат друг на друге и переключаются кроссфейдом (JS в app.js).
   visibility: hidden — а не display: none — чтобы фейд работал, и при этом
   неактивные панели не читались скринридером и не ловили Tab. */
.media__plate-content {
  position: absolute;
  z-index: var(--z-base);
  left: var(--plate-pad);
  right: var(--plate-pad);
  bottom: var(--plate-pad);  /* текст прижат к низу плиты */
  max-width: 40ch;
}

.media__pane {
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    visibility 0s linear var(--dur-med);
}
.media__pane.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

/* Плита остаётся главной: её заголовок крупнее подписи на плитке слева */
.media__plate-title {
  font-size: clamp(1.875rem, 1.7vw + 1rem, 2.625rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-head);
  overflow-wrap: anywhere;
  margin-bottom: var(--space-sm);
}

.media__plate-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-ink-2);
  margin-bottom: var(--space-lg);
}

/* Ссылка-кружок: инверсия кнопки — там светлый кружок на тёмной заливке,
   здесь тёмный кружок на светлой плите. Заливки нет, поэтому с CTA заказа
   она не спорит. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--color-ink);
}
.arrow-link__circle {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-paper);
  flex: none;
  transition: background-color var(--dur-short) var(--ease-out);
}
.arrow-link__circle svg { width: 1.125rem; height: 1.125rem; }
@media (hover: hover) and (pointer: fine) {
  .arrow-link:hover .arrow-link__circle { background: var(--color-deep-2); }
}

/* ============ Медиа (articles.html) ============
   Страница берёт форму у справочной Точка-банка (лента новостей, сетка
   статей), но в фиолетовой, а не чёрно-серой семье — тот же рецепт, что
   у ecard--accent и media__plate--accent: светлый акцентный градиент +
   фиолетовые линии паттерна вместо зелёных. */

/* Пилюля-чип с категорией — общая для последней статьи и страницы статьи */
.chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  background: var(--color-card);
  border-radius: var(--radius-pill);
  padding: 0.3rem var(--space-sm);
  color: var(--color-ink-2);
  margin-bottom: var(--space-md);
}

/* ============ Последняя статья — играет роль героя ============
   На референсе это голая фотография с подписью под ней — без карточки
   выглядит бедно и не похоже на остальной сайт. Наш вариант — брендовая
   плита акцентной семьи, вся кликабельна и ведёт на страницу статьи.
   Заголовок здесь — <h1> страницы: отдельного блока .hero больше нет. */
.feature {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-xl) var(--page-gutter) 0;
}
.feature__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  border-radius: var(--radius-hero);
  background: linear-gradient(150deg, oklch(98% 0.014 293), var(--color-accent-50));
  padding: clamp(1.75rem, 4vw, 3rem);
  transition: box-shadow var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .feature__card:hover { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
}
.feature__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("assets/logo/pattern-accent.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}
/* Фото статьи, если есть, — полностью заменяет паттерн (не одновременно,
   как order-card__thumb/tile__media: нет фото → остаётся паттерн). Тёмный
   скрим поверх гарантирует контраст текста независимо от тона фотографии. */
.feature__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature__card--photo {
  background: var(--color-deep);
  color: var(--color-deep-ink);
}
.feature__card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, oklch(21% 0.014 196 / 0.88), oklch(21% 0.014 196 / 0.15) 60%);
}
.feature__card--photo .chip { background: oklch(100% 0 0 / 0.16); color: var(--color-deep-ink); }
.feature__card--photo .feature__excerpt,
.feature__card--photo .feature__meta { color: var(--color-deep-muted); }
.feature__card--photo .arrow-link { color: var(--color-deep-ink); }
.feature__card--photo .arrow-link__circle { background: var(--color-deep-ink); color: var(--color-deep); }
.feature__title {
  font-size: var(--text-display-s);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-head);
  max-width: 26ch;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-md);
}
.feature__excerpt {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-ink-2);
  max-width: 58ch;
  margin-bottom: var(--space-lg);
}
.feature__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
}

/* ============ Новости ============
   Плотная сетка коротких блоков без картинок — референс держит их
   отдельно от «настоящих» статей, у нас та же логика: заголовок и дата,
   без экскерпта и без брендового паттерна, который тут был бы лишним. */
.news {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-3xl) var(--page-gutter);
}
.news__title {
  font-size: var(--text-display-s);
  font-weight: 600;
  letter-spacing: var(--track-head);
  margin-bottom: var(--space-lg);
}
.news-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
.news-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.news-row__title {
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--track-tight);
  overflow-wrap: anywhere;
  transition: color var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .news-row:hover .news-row__title { color: var(--color-accent-700); }
}
.news-row__date {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ============ Сетка статей ============
   Тот же рецепт плитки, что у .tile в каталоге: картинки нет, поэтому
   вместо фото — брендовый паттерн. Три цветовые семьи по кругу (акцент /
   светлая / тёмная — тот же набор, что у плиток экосистемы), иначе подряд
   идущие карточки слипаются в одинаковые фиолетовые прямоугольники. */
.articles {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 var(--page-gutter) var(--space-3xl);
}
.articles__title {
  font-size: var(--text-display-s);
  font-weight: 600;
  letter-spacing: var(--track-head);
  margin-bottom: var(--space-lg);
}
.articles-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.acard {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: inset 0 0 0 var(--rule-hair) transparent;
  transition: box-shadow var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .acard:hover { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
}
/* Только акцентная (медиа) семья: зелёная и тёмная закреплены за продуктом
   заказов/каналом/чатом (см. DESIGN.md → цветокодирование), сюда не идут. */
.acard__media {
  position: relative;
  overflow: hidden;
  flex: none;
  aspect-ratio: 16 / 10;
  background: linear-gradient(150deg, oklch(98% 0.014 293), var(--color-accent-50));
}
.acard__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/logo/pattern-accent.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}
/* Есть фото — оно поверх паттерна (::before остаётся его фолбэком) */
.acard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acard__cat {
  position: relative;
  z-index: var(--z-base);
  display: inline-block;
  margin: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  background: oklch(21% 0.014 196 / 0.72);
  color: var(--color-deep-ink);
  border-radius: var(--radius-pill);
  padding: 0.3rem var(--space-sm);
}
.acard__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.acard__title {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--track-tight);
  overflow-wrap: anywhere;
}
.acard__excerpt {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.acard__meta {
  margin-top: auto;
  padding-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ============ Страница статьи (article.html?id=) ============
   Читатель пришёл читать текст — узкая колонка, широкая только у фото
   сверху (если оно есть). Заголовок и подписи переиспользуют .chip/
   .crumbs/.arrow-link, не заводя новых классов ради одной страницы. */
.post {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-3xl);
}
.post__media {
  border-radius: var(--radius-hero);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  margin-bottom: var(--space-2xl);
}
.post__media img { width: 100%; height: 100%; object-fit: cover; }
.post__col { max-width: 42rem; margin-inline: auto; }
.post__title {
  font-size: var(--text-display-s);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-head);
  overflow-wrap: anywhere;
  margin-bottom: var(--space-md);
}
.post__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.post__body {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-ink-2);
  margin-bottom: var(--space-xl);
}
.post__body p + p { margin-top: 1.1em; }

/* Тёмная, не такая, как обычный чип-категория: срочность — сигнал, а не тема.
   Общий класс для .post и .order-page. */
.chip--urgent { background: var(--color-ink); color: var(--color-paper); }

/* ============ Страница заказа (order.html?id=) ============
   Это объявление на маркетплейсе, не статья: пришли за конкретными
   условиями и действием, а не почитать (референсы — пошив.рус,
   швейник-онлайн). Фото и текст — слева, специфики и кнопка «Связаться» —
   в закреплённой карточке справа: деньги и действие рядом с глазами,
   а не в подвале длинного текста. */

/* Уже, чем --page-max: на 88rem колонки расходятся по разным краям экрана,
   фото раздувается во всю ширину .order-main, а текста поста хватает на
   три строки — страница читается пустой. 72rem держит фото, описание и
   карточку действия в одном поле зрения. Шапка и футер остаются на 88rem:
   это оболочка сайта, а не колонка контента. */
.order-page {
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-3xl);
}
.order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.order-head__tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.order-head__tags .chip { margin-bottom: 0; }
.order-head__title {
  font-size: var(--text-display-s);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-head);
  max-width: 34ch;
  overflow-wrap: anywhere;
}
.order-head__date { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }

.order-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.order-main { min-width: 0; }

/* order: -1 — на мобильном карточка со спецификами и кнопкой идёт ПЕРЕД
   описанием: это самое важное на странице, а не награда за долистывание. */
.order-side {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}
.order-side .btn { width: 100%; }
/* «Связаться с заказчиком» — самая длинная подпись на сайте, а карточка
   всего 20rem: со штатным --text-md и отступом --space-xl строка не влезала
   и кружок-стрелка срезался краем пилюли (.btn { overflow: hidden }).
   Тот же приём, что у .plan .btn--arrow в узком тарифе. */
.order-side .btn--arrow { padding-left: var(--space-lg); font-size: var(--text-base); }

.order-side__qty {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1.1;
  word-spacing: -0.3em;
}
.order-side__qty span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  word-spacing: normal;
  margin-left: 0.35em;
}

/* Специфики заказа (ткань/срок/цена) — блок целиком условен: у большинства
   реальных постов из канала этих полей не будет, там просто свободный
   текст. Нет ни одного поля — в карточке остаются только кнопка и, если
   есть, количество (см. renderOrderDetail() в app.js). */
.order-specs { display: grid; gap: var(--space-sm); }
.order-specs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--text-sm);
}
.order-specs__row + .order-specs__row {
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.order-specs__label { color: var(--color-muted); }
.order-specs__value { font-weight: 600; color: var(--color-ink); text-align: right; }

/* Замок над кнопкой: главное правило сайта — контакты у подписчиков —
   должно стоять там, где на него нажимают, а не только в футере.
   Зелёная семья: это про канал и заказы, не про медиа. */
.order-lock {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-input);
  background: var(--color-hero-2);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.order-lock svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.15em;
  color: var(--color-primary);
}
.order-lock b { display: block; font-weight: 600; color: var(--color-ink); }

/* Фото и описание — в один ряд, а не фото сверху во всю колонку: пост из
   канала обычно в три-четыре строки, и баннер 4:3 над ним перевешивал
   страницу. Ниже 48rem — друг под другом, там ширины на два столбца нет. */
.order-brief {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

/* Фото — контейнерное, внутри колонки текста, не полноэкранный баннер
   (в отличие от .post__media у статьи — заказ не редакционный материал).
   Нет фото — брендовый паттерн, тот же приём, что у .tile__media. */
/* 16/10 на узком экране, 4/3 — когда фото стоит колонкой рядом с текстом:
   во всю ширину телефона портретный формат съедал треть экрана, а фото
   у постов из канала чаще всего нет вовсе — это был бы просто паттерн. */
.order-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 16 / 10;
}
.order-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-media--empty {
  background:
    url("assets/logo/pattern-green.svg") center / cover,
    linear-gradient(150deg, var(--color-hero-2), var(--color-hero));
  background-blend-mode: multiply;
}

.order-desc__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  margin-bottom: var(--space-sm);
}
.order-desc p {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-ink-2);
}
.order-desc__notes {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
/* Сноска про ███ — рендерится только когда в тексте реально что-то
   вырезано (см. renderOrderDetail() в app.js) */
.order-desc__cut {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Похожие заказы — плитки каталога (.tile), третьего вида карточки не
   заводим. Тупик «прочитал заказ — некуда идти» закрывается здесь. */
.order-more {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.order-more__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.order-more__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--track-head);
}
@media (min-width: 48rem) {
  .order-brief { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-xl); }
  .order-media { aspect-ratio: 4 / 3; }
}

@media (min-width: 60rem) {
  .order-layout { flex-direction: row; align-items: flex-start; }
  .order-main { flex: 1; }
  .order-side { order: 0; flex: none; width: 20rem; position: sticky; top: var(--space-lg); }
}

/* Похожих всегда три — четвёртая колонка каталога оставила бы дыру в ряду */
@media (min-width: 72rem) {
  .order-more .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============ Toast ============ */
.toast {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: min(24rem, calc(100% - 2 * var(--space-md)));
  background: var(--color-deep);
  color: var(--color-deep-ink);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-toast);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }

.toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); flex: none; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { display: block; font-size: var(--text-sm); font-weight: 600; }
.toast-text {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-deep-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast-cta {
  background: transparent;
  border: var(--rule-hair) solid var(--color-deep-muted);
  color: var(--color-deep-ink);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.toast-close {
  background: transparent;
  border: 0;
  color: var(--color-deep-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-2xs);
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 100ms linear; transform: none; }
  .ecard, .ecard__pattern, .ecard::after { transition: none; }
  .ecard.is-active { transform: none; }
  .ecard.is-active .ecard__pattern { transform: none; }
  .media__pane, .media__pane.is-active { transition: none; transform: none; }
}

/* ============ Футер — Ft5 statement в тёмной карточке ============ */
.foot { padding: 0 var(--page-gutter) var(--page-gutter); }

.foot__card {
  max-width: var(--page-max);
  margin-inline: auto;
  background: var(--color-deep);
  color: var(--color-deep-ink);
  border-radius: var(--radius-hero);
  padding: clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
}

.foot__statement {
  font-size: var(--text-display-s);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-head);
  max-width: 20ch;
  overflow-wrap: anywhere;
}

.foot__card .btn__circle { background: var(--color-deep-ink); }

.foot__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
  width: 100%;
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-deep-2);
  font-size: var(--text-sm);
  color: var(--color-deep-muted);
}
/* Полный брендовый бейдж (logo-white.svg) на 22px нечитаем — берём
   компактный знак, он для малых размеров и нарисован; инверсия делает его
   белым на тёмной карточке. */
.foot__wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--color-deep-ink);
  white-space: nowrap;
}
.foot__wordmark img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* ============ Брейкпоинты ============ */
@media (min-width: 40rem) {
  /* Строка складывается в два ряда: сверху фото и текст, снизу числа
     и кнопка бок о бок. До 40rem всё лежит столбиком. */
  .order-card {
    grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 15rem);
    grid-template-areas:
      "thumb main main"
      "nums  nums cta";
    align-items: start;
    padding: var(--space-lg);
  }
  .order-card__thumb { width: 6.5rem; height: 6.5rem; }
  /* На средней ширине числа идут в строку. Именно flex-wrap, а не колонки
     грида: max-content-колонки не переносились и подлезали под кнопку. */
  .order-card__nums {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-lg);
    min-width: 0;
  }
  .order-card__qty { margin-bottom: 0; }
  .order-card__cta { align-self: center; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .info__grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Два коротких тарифа в ряд, акцентный — во всю ширину под ними */
  .plans__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan--feature { grid-column: span 2; }
  .plan { padding: var(--space-xl); }
  .plan .btn--arrow { padding-left: var(--space-xl); }
  /* В широкой карточке кнопка во всю ширину развела бы текст и кружок
     по разным краям — оставляем её собственной ширины, слева.
     Ниже 40rem карточка узкая, там кнопка остаётся на всю ширину. */
  .plan--feature .btn { width: auto; align-self: flex-start; }
}

@media (min-width: 60rem) {
  /* Лента появляется только когда справа реально есть место —
     на мобильном она бы вытолкнула маркиз за пределы экрана. */
  .hero__main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    gap: var(--space-3xl);
  }
  .hero__feed { display: block; }

  .info__top  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); }
  /* Плита шире текстовой колонки — она здесь главный элемент */
  .media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: var(--space-3xl);
    row-gap: var(--space-xl);
  }

  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .articles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .plans__top  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); }
  /* 1 + 1 + 2: акцентный тариф вдвое шире и стоит последним */
  .plans__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Первая карточка вдвое шире — как в референсе (lg:col-span-2 из 4 колонок) */
  .info__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fcard--wide { grid-column: span 2; }
}

/* Полная строка: фото — текст — числа — кнопка в один ряд. Раньше этого
   не хватало ширины, и колонка чисел прижималась к описанию. */
@media (min-width: 72rem) {
  /* Четыре колонки плиток — как в референсе. Больше не ставить: заголовок
     заказа в плашке начнёт обрезаться на втором слове. */
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .order-card {
    grid-template-columns: 6.5rem minmax(0, 1fr) minmax(11rem, max-content) 15rem;
    grid-template-areas: "thumb main nums cta";
    align-items: center;
    column-gap: var(--space-xl);
  }
  /* На всю ширину числа снова встают столбиком: количество крупно,
     под ним ткань, срок и цена — так колонка сканируется сверху вниз. */
  .order-card__nums {
    display: grid;
    align-content: start;
    gap: var(--space-3xs);
  }
  .order-card__qty { margin-bottom: var(--space-3xs); }
}