/* Стили сайта «Кофеин».
   Палитра, шрифты и шкала размеров — из плана редизайна
   (site/wordpress/docs/redesign-plan.md, раздел 2, направление «Чек смены»).
   Правило файла: в правилах ниже нет ни одного цвета и ни одного размера
   текста «в лоб» — всё выходит из токенов в :root. Исключения только там, где
   значение не про палитру: прозрачность поверх тёмного фона и белая бумага
   для печати. Те же значения продублированы в theme.json — редактор должен
   показывать владельцу то же, что видит посетитель.

   Контраст проверен по WCAG 2.1 AA (нормальный текст 4.5:1, крупный 3:1,
   границы полей и рамка фокуса 3:1). Главные пары:

     ночной кобальт #0d1240 на термобумаге #f2f4f4 ....... 16.1:1
     приглушённый текст #4e5674 на термобумаге ...........  6.5:1
     белый #ffffff на кобальте #2336e8 ...................  7.6:1
     термобумага #f2f4f4 на кобальте .....................  6.9:1
     мягкий текст на кобальте #dce1ff на кобальте ........  5.9:1
     мягкий текст на ночном #98a0c4 на ночном ............  6.9:1
     ночной кобальт на крафте #c8a06b ....................  7.4:1
     ночной кобальт на маркере #ffd94a ................... 13.0:1
     текст формы #0d1240 на белой подложке ............... 17.9:1
     подсказки формы #4e5674 на белой подложке ...........  7.4:1
     срочно, текст #b62a14 на термобумаге ................  5.7:1
     хорошо, текст #12714c на термобумаге ................  5.4:1
     граница поля #808b9c на белом .......................  3.4:1
     рамка фокуса #ffd94a на кобальте ....................  5.5:1

   Семантика (хорошо #1f9d6b / срочно #e5482f) живёт только в данных: рост,
   падение, «срочно». Для текста взяты отдельные тёмные варианты — яркая
   семантика на светлом фоне до 4.5:1 не дотягивает. Кнопки никогда не
   красные и не зелёные.

   Ни одной внешней зависимости: шрифты лежат рядом, иконки — юникод. */

/* --- Токены ------------------------------------------------------------ */
:root {
  /* Палитра, вариант А */
  --paper: #f2f4f4;          /* термобумага: фон светлых секций */
  --sheet: #ffffff;          /* лист: чек, поля формы, карточки */
  --surface-2: #e7ebeb;      /* мягкая подложка, состояние наведения */
  --night: #0d1240;          /* ночной кобальт: текст, тёмные блоки */
  --night-2: #171e52;        /* он же, светлее — второй тёмный блок */
  --ink: var(--night);
  --ink-soft: #4e5674;       /* текст приглушённый */
  --on-night: #f2f4f4;       /* текст на ночном и на кобальте */
  --on-night-soft: #98a0c4;  /* приглушённый на ночном */
  --on-cobalt-soft: #dce1ff; /* приглушённый на кобальте */
  --cobalt: #2336e8;         /* бренд: hero, главные кнопки, ссылки */
  --cobalt-deep: #1a28b8;    /* наведение и текст ссылок на светлом */
  --cobalt-pale: #dde3ff;    /* бледная заливка бренда */
  --kraft: #c8a06b;          /* крафт: вторичные поверхности, рамки фото */
  --kraft-deep: #7a5a2b;     /* текст на крафте и на бледном крафте */
  --kraft-pale: #f7efe1;     /* бледная заливка крафта */
  --marker: #ffd94a;         /* маркер: подсветка ключевых строк в чеке */
  --good: #1f9d6b;           /* данные: рост, выполнено */
  --good-text: #12714c;      /* он же для текста на светлом */
  --good-pale: #ddf2e8;
  --urgent: #e5482f;         /* данные: падение, «срочно» */
  --urgent-text: #b62a14;    /* он же для текста на светлом */
  --urgent-pale: #fbe0d9;
  --urgent-on-night: #ff8a73;/* «срочно» на тёмном фоне */
  --line: #d7dddd;           /* разделители, рамки блоков */
  --line-soft: #e5e9e9;      /* самый тихий разделитель */
  --line-strong: #808b9c;    /* границы полей: их видно без наведения */
  --line-on-dark: rgba(242, 244, 244, .62); /* рамка на тёмном: 3.5:1 */
  --shadow-pop: 0 24px 48px rgba(13, 18, 64, .18);

  /* Старые имена. Оставлены, чтобы содержимое, сохранённое в WordPress до
     редизайна, продолжало получать цвет, а не теряло его. Убрать после R5,
     когда страницы пересобраны из новых паттернов. */
  --surface: var(--sheet);
  --teal: var(--cobalt);
  --teal-deep: var(--cobalt-deep);
  --teal-pale: var(--cobalt-pale);
  --crema: var(--kraft);
  --crema-deep: var(--kraft-deep);
  --crema-pale: var(--kraft-pale);
  --signal: var(--urgent-text);
  --signal-pale: var(--urgent-pale);

  /* Шрифты */
  --display: "Geologica", "Golos Text", system-ui, sans-serif;
  --text: "Golos Text", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Шкала текста. Заголовки: 36→64 (H1) и 36→44 (H2) на десктопе,
     36–40 на телефоне. Текст — 18px при интерлиньяже 1.6. */
  --fs-h1: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --fs-h2: clamp(2.25rem, 1.7rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .4vw, 1.25rem);
  --fs-body: 1.125rem;
  --fs-small: .9375rem;
  --fs-fine: .875rem;
  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --ls-display: -.02em;
  --measure: 44rem;          /* строка не длиннее ~70 знаков при 18px */

  /* Скругления по иерархии, а не одним радиусом на всё */
  --r-sm: 8px;               /* плашка, метка, мелкая деталь */
  --r-md: 12px;              /* поле формы, свёрнутый вопрос */
  --r-lg: 30px;              /* фото и крупные блоки */
  --r-pill: 999px;           /* кнопки */
  --r-card: var(--r-lg);     /* старые имена, для содержимого страниц */
  --r-field: var(--r-md);

  /* Отступы. Шаг 4px, крупные значения — для секций. */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;
  --section-y: clamp(3rem, 6vw, 6rem);

  --wrap: 1120px;
  --wrap-narrow: var(--measure);

  --focus-ring: var(--cobalt);
  --focus-ring-dark: var(--marker);

  /* Зубчатый край бумаги — форма, а не цвет: цвет приходит из токенов выше.
     В data-URI подставить var() нельзя, поэтому маска хранит только контур
     (чёрная заливка = «видно»), а заливку задаёт background элемента. */
  --tooth-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12' preserveAspectRatio='none'><path d='M0 0l11 12L22 0v12H0z' fill='%23000'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  margin: 0 0 .6em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-family: var(--text); font-weight: 600; font-size: var(--fs-lead); }
p { margin: 0 0 1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }
strong { font-weight: 600; }
img, svg { max-width: 100%; height: auto; }
/* Ключевые цифры — табличные: 18 из 47 в столбце должны стоять друг под другом */
table, .cofein-num { font-variant-numeric: tabular-nums; }

a { color: var(--cobalt); text-underline-offset: 2px; }
a:hover { color: var(--cobalt-deep); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-sm); }
/* На тёмном фоне кобальтовая рамка не видна — там работает маркер. Белая
   подложка формы заявки в этот список не входит: на ней кобальтовая рамка
   как раз и нужна, поэтому правило сужено до заголовка и фото секции. */
.cofein-hero :focus-visible,
.page-head :focus-visible,
.site-footer :focus-visible,
.cofein-dark :focus-visible,
.cofein-cta__intro :focus-visible,
.cofein-cta__figure :focus-visible,
.cofein-tier--featured :focus-visible { outline-color: var(--focus-ring-dark); }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-sm); top: -4rem; z-index: 40;
  background: var(--sheet); color: var(--ink); padding: .6rem 1rem;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  transition: top .15s ease;
}
.skip-link:focus { top: var(--space-sm); }

/* --- Каркас ------------------------------------------------------------ */
.wrap, .cofein-section > * {
  width: min(var(--wrap), calc(100% - 2.5rem));
  margin-inline: auto;
}
.cofein-narrow { width: min(var(--wrap-narrow), calc(100% - 2.5rem)); margin-inline: auto; }

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.site-header__inner {
  width: min(1320px, calc(100% - 2.5rem));
  display: flex; align-items: center; gap: var(--space-xs) var(--space-md);
  flex-wrap: wrap; padding: .6rem 0;
}

.wordmark {
  display: inline-flex; align-items: baseline; gap: var(--space-2xs);
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: var(--ls-display); text-decoration: none; color: var(--ink);
}
.wordmark:hover { color: var(--ink); }
.wordmark__tag {
  font-family: var(--text); font-size: var(--fs-fine); font-weight: 400;
  color: var(--ink-soft); letter-spacing: 0;
}

/* Панель — общий контейнер для меню и действий: в строке на широком экране
   и одним раскрывающимся блоком на телефоне. */
.site-header__panel {
  display: flex; align-items: center; gap: var(--space-lg);
  flex: 1 1 auto; min-width: 0;
}
.site-nav { min-width: 0; }
.site-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs); list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a {
  display: block; padding: .45rem .6rem; border-radius: var(--r-sm);
  font-size: var(--fs-small); color: var(--ink-soft); text-decoration: none;
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
/* Пять пунктов одного вида. Текущий отличается цветом и весом, а не
   заливкой-пилюлей: форма у всех одинаковая, отличается только выбранный.
   Якоря главной текущими не считаются — это делает фильтр в functions.php. */
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a { color: var(--cobalt-deep); font-weight: 600; }

/* Кнопка компактного меню. До включения скрипта скрыта (атрибут hidden):
   без JavaScript меню остаётся развёрнутым списком. */
.site-nav__toggle {
  display: none; align-items: center; gap: var(--space-2xs);
  min-height: 40px; padding: .35rem .9rem;
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-family: var(--text); font-size: var(--fs-fine); font-weight: 600;
  cursor: pointer;
}
.site-nav__toggle:hover { background: var(--surface-2); }
.site-nav__toggle::after {
  content: ""; width: .45rem; height: .45rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
  transition: transform .15s ease;
}
.site-header--menu-open .site-nav__toggle::after { transform: translateY(.12em) rotate(-135deg); }

.header-actions { display: flex; align-items: center; gap: var(--space-md); margin-left: auto; }
.site-header__login {
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft);
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px; white-space: nowrap;
}
.site-header__login:hover { color: var(--cobalt-deep); text-decoration-color: currentColor; }

/* --- Кнопки ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem 1.25rem; border-radius: var(--r-pill);
  border: 1px solid transparent; font-family: var(--text); font-size: var(--fs-small);
  font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--cobalt); color: var(--sheet); }
.btn--primary:hover { background: var(--cobalt-deep); color: var(--sheet); }
.btn--ghost { background: var(--sheet); border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--small { min-height: 38px; font-size: var(--fs-fine); padding: .35rem .9rem; }
.btn--wide { width: 100%; }

/* Кнопки Гутенберга приводим к тем же кнопкам, чтобы содержимое правилось
   в редакторе, а выглядело как на сайте. */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0 0; }
.cofein-section > .wp-block-buttons { margin-inline: auto; }
.wp-block-button { margin: 0; }
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .5rem 1.5rem; border-radius: var(--r-pill);
  font-family: var(--text); font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; background: var(--cobalt); color: var(--sheet); border: 1px solid var(--cobalt);
}
.wp-block-button__link:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); color: var(--sheet); }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--cobalt-deep); border-color: var(--line-strong);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--cobalt-pale); border-color: var(--cobalt); }

/* --- Секции ------------------------------------------------------------ */
.cofein-section { padding: var(--section-y) 0; }
.cofein-section + .cofein-section { border-top: 1px solid var(--line-soft); }
.cofein-section--tint { background: var(--surface-2); }
/* Подпись над заголовком — обычным предложением, без капса и разрядки */
.cofein-eyebrow {
  font-family: var(--text); font-size: var(--fs-fine); font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--cobalt-deep);
  margin: 0 0 var(--space-2xs);
}
.cofein-section > .cofein-eyebrow,
.cofein-section > .cofein-fine { margin-inline: auto; }
.cofein-lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: var(--measure); }
.cofein-grid { display: grid; gap: var(--space-md); }
.cofein-grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.cofein-card {
  background: var(--sheet); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--space-md) var(--space-lg);
}
.cofein-card h3 { margin-top: 0; }
.cofein-card p { color: var(--ink-soft); font-size: var(--fs-small); }
.cofein-card__num {
  font-family: var(--display); font-size: var(--fs-fine); font-weight: 700;
  color: var(--cobalt-deep); display: block; margin-bottom: var(--space-xs);
  font-variant-numeric: tabular-nums;
}

/* --- Первый экран ------------------------------------------------------ */
/* Фон hero — кобальт. Приглушённый текст берёт --on-cobalt-soft: на ночном
   он был бы слишком тёмным для этого фона (2.9:1). */
.cofein-hero {
  --tooth: 12px;                /* высота зубца бумаги по нижнему краю hero */
  --photo-w: 78%;               /* ширина фото в правой колонке */
  position: relative;
  overflow: hidden;             /* наклонённый чек не создаёт горизонтальной прокрутки */
  background: var(--cobalt); color: var(--on-night);
  border-top: none;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 calc(clamp(2.5rem, 5vw, 4.5rem) + var(--tooth));
}
/* Зубчатый край на стыке с термобумагой: форма — маской, цвет — токеном. */
.cofein-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--tooth);
  background: var(--paper);
  -webkit-mask: var(--tooth-mask) 0 0 / 22px var(--tooth) repeat-x;
  mask: var(--tooth-mask) 0 0 / 22px var(--tooth) repeat-x;
}
/* Зубцы уже разделяют секции, лишняя линия под ними не нужна */
.cofein-hero + .cofein-section { border-top: none; }

/* Асимметрия: слева текст, справа фото с чеком поверх. Сетка hero шире
   остальных секций — иначе заголовок не помещается в три строки. */
.cofein-hero > .cofein-hero__grid {
  width: min(1200px, calc(100% - 2.5rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: start;
}
/* Гутенберг сам задаёт ширину и отступы детям групп («constrained»-правила
   центрируют текст, «flow»-правила обнуляют вертикальные отступы). Hero
   собран сеткой, поэтому здесь они сняты, а ритм и ограничения по ширине
   заданы явно — иначе редактор и сайт разъедутся. */
.cofein-hero .cofein-hero__grid > *,
.cofein-hero .cofein-hero__copy > *,
.cofein-hero .cofein-hero__visual > * {
  margin-block: 0; margin-inline: 0; max-width: none;
}
/* Заголовок чуть меньше общего --fs-h1: в hero он должен укладываться
   в три строки, а на телефоне оставаться не мельче 36 px. */
.cofein-hero .cofein-hero__copy > h1 {
  color: var(--on-night);
  font-size: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);
  max-width: 11em; text-wrap: balance;
}
.cofein-hero .cofein-hero__copy > .cofein-hero__lead {
  color: var(--on-cobalt-soft); font-size: var(--fs-lead);
  max-width: 33rem; margin-top: var(--space-md);
}
.cofein-hero .cofein-hero__copy > .wp-block-buttons { margin-top: var(--space-lg); }
.cofein-hero .cofein-hero__copy > .cofein-hero__facts { margin-top: var(--space-lg); }
.cofein-hero .cofein-hero__copy > .cofein-hero__privacy { margin-top: var(--space-md); font-size: var(--fs-small); }
.cofein-hero .cofein-hero__visual > .cofein-hero__caption {
  margin-top: var(--space-md); color: var(--on-cobalt-soft);
  font-size: var(--fs-fine); max-width: 26rem;
}
/* На кобальте главная кнопка — светлая: кобальт по кобальту не читается */
.cofein-hero .wp-block-button__link { background: var(--paper); border-color: var(--paper); color: var(--cobalt-deep); }
.cofein-hero .wp-block-button__link:hover { background: var(--cobalt-pale); border-color: var(--cobalt-pale); color: var(--cobalt-deep); }
.cofein-hero .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--on-night); border-color: var(--line-on-dark);
}
.cofein-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(242, 244, 244, .12); color: var(--on-night); border-color: var(--on-night);
}
.cofein-hero a:not(.wp-block-button__link) { color: var(--on-night); }
.cofein-hero__facts {
  list-style: none; padding: var(--space-md) 0 0;
  border-top: 1px solid var(--line-on-dark);
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg);
}
.cofein-hero__facts li {
  color: var(--on-cobalt-soft); font-size: var(--fs-small); padding-left: 1.05rem;
  position: relative; margin: 0;
}
.cofein-hero__facts li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .45rem; height: .45rem; border-radius: var(--r-pill); background: var(--marker);
}

/* --- Чек смены: фото, поверх него чек ---------------------------------- */
.cofein-hero__visual { position: relative; }
.cofein-hero__stack {
  position: relative; display: flex; justify-content: flex-end;
  /* Нижний отступ — место, куда свешивается чек: он и создаёт асимметрию. */
  padding-bottom: 6.5rem;
}
.cofein-hero__photo {
  width: var(--photo-w); aspect-ratio: 4 / 5; overflow: hidden;
  border: 10px solid var(--kraft); border-radius: var(--r-lg); background: var(--kraft);
}
.cofein-hero__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 48% 52%;
}

/* Чек — разметка и стили, а не картинка: остаётся чётким на любом экране,
   в R2 в него добавляется построчная «печать». */
.cofein-receipt {
  --tooth-sm: 9px;
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: min(21rem, 74%);
  padding: var(--space-sm) var(--space-sm) calc(var(--space-md) + var(--tooth-sm));
  background: var(--sheet); color: var(--ink);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  box-shadow: var(--shadow-pop);
  font-family: var(--mono); font-size: .8125rem; line-height: 1.5;
  transform: rotate(-1.6deg);
}
/* Оторванный нижний край чека: та же маска, что у края hero */
.cofein-receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--tooth-sm)); height: var(--tooth-sm);
  background: var(--sheet);
  -webkit-mask: var(--tooth-mask) 0 0 / 20px var(--tooth-sm) repeat-x;
  mask: var(--tooth-mask) 0 0 / 20px var(--tooth-sm) repeat-x;
}
.cofein-receipt p { margin: 0; }
.cofein-receipt strong { font-weight: 500; }
p.cofein-receipt__badge {
  display: inline-block; margin-bottom: var(--space-2xs);
  padding: 0 .55em; border: 1px solid var(--kraft); border-radius: var(--r-pill);
  background: var(--kraft-pale); color: var(--kraft-deep);
  font-size: .75rem; font-weight: 500; letter-spacing: .02em;
}
p.cofein-receipt__title { font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
p.cofein-receipt__meta { color: var(--ink-soft); font-size: .95em; margin-top: .15rem; }
.cofein-receipt__rule { display: block; border-top: 1px dashed var(--line-strong); margin: .55rem 0; }
.cofein-receipt__row { display: flex; align-items: flex-end; gap: .35rem; }
.cofein-receipt__row > span:first-child { min-width: 0; }
.cofein-receipt__row .cofein-num { font-weight: 500; white-space: nowrap; }
.cofein-receipt__lead { flex: 1 1 1.25rem; height: .5em; margin-bottom: .3em; border-bottom: 1px dotted var(--line-strong); }
.cofein-receipt__row--sub { color: var(--ink-soft); padding-left: 1.1em; }
.cofein-receipt__row--sub .cofein-receipt__lead { border-bottom-color: var(--line); }
/* Подсветка «маркером»: важное в чеке видно без подписей */
.cofein-receipt__row--mark {
  justify-content: space-between; align-items: baseline;
  background: var(--marker); border-radius: 2px;
  margin: .18rem -.45rem; padding: .12rem .45rem;
}
.cofein-receipt__urgent { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; color: var(--urgent-text); font-weight: 500; }
.cofein-receipt__flag {
  padding: 0 .45em; border-radius: 2px; background: var(--urgent-pale); color: var(--urgent-text);
}
.cofein-receipt__urgent-note { color: var(--ink-soft); padding-left: 1.1em; font-size: .95em; }

/* --- Что вы узнаете после первой смены --------------------------------- */
/* Слева крупный чек, справа пояснения к его строкам с теми же номерами.
   Связь включает site-demo.js; до него пояснения остаются обычным списком,
   а строки чека — ссылками на них, поэтому секция читается и без скрипта. */
.cofein-section > .cofein-annot { margin-top: var(--space-lg); }

.cofein-annot {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: start;
}
/* Гутенберг задаёт детям групп свои отступы и ограничение по ширине —
   здесь они сняты: раскладку ведёт сетка выше. */
.cofein-annot > * { margin-block: 0; margin-inline: 0; max-width: none; }
.cofein-annot__figure { margin: 0; }
/* Тот же чек смены, что в первом экране, но крупнее и без наклона: здесь
   его читают построчно, а иначе он бы конкурировал с чеком в hero. */
.cofein-annot__sheet {
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  font-family: var(--mono); font-size: .875rem; line-height: 1.65;
}
.cofein-annot__sheet p { margin: 0; }
.cofein-annot__caption { margin-top: var(--space-sm); color: var(--ink-soft); font-size: var(--fs-fine); max-width: 34rem; }

/* Номер пояснения. Один и тот же на чеке и в списке: им и связаны строка
   с объяснением, поэтому номер — не украшение, а подпись связи. */
.cofein-annot__n {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: var(--r-pill);
  background: var(--cobalt-pale); color: var(--cobalt-deep);
  font-family: var(--text); font-size: .8125rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Строка-ссылка: на неё можно навести, встать с клавиатуры и выбрать.
   Подсветку пары ведёт скрипт, здесь — только вид и отклик. */
a.cofein-annot__row { color: inherit; text-decoration: none; border-radius: 2px; }
a.cofein-annot__row:hover,
a.cofein-annot__row.is-active { outline: 2px solid var(--cobalt); outline-offset: 2px; }
/* В чеке номер мельче, чем в списке пояснений: строка чека набрана 14 px,
   и крупный кружок перевешивал бы её. */
a.cofein-annot__row .cofein-annot__n { width: 1.25rem; height: 1.25rem; margin-right: .15rem; font-size: .75rem; }
/* На маркерной строке жёлтая заливка и номер на ней: подложка номера
   светлее маркера, чтобы цифра читалась. */
a.cofein-annot__row.cofein-receipt__row--mark .cofein-annot__n { background: var(--sheet); }

.cofein-annot__notes { list-style: none; margin: 0; padding: 0; }
.cofein-annot__note {
  padding: var(--space-sm); margin-inline: calc(-1 * var(--space-sm));
  border-radius: var(--r-md); transition: background-color .15s ease;
}
.cofein-annot__note:first-child { padding-top: 0; }
.cofein-annot__note + .cofein-annot__note {
  margin-top: var(--space-sm); padding-top: var(--space-md);
  border-top: 1px solid var(--line-soft);
}
.cofein-annot__note.is-active { background: var(--cobalt-pale); }
.cofein-annot__note-head { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-2xs); }
.cofein-annot__note-title { margin: 0; font-size: var(--fs-body); }
.cofein-annot__note-text { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); }
.cofein-annot__hint { margin: var(--space-lg) 0 0; color: var(--ink-soft); font-size: var(--fs-fine); }

/* --- Как это работает -------------------------------------------------- */
/* Три шага стоят на общем рельсе с номерами, но у каждого своя форма подачи:
   подписанная заглушка фото со схемой, состав отчёта и список решений.
   Три одинаковые карточки здесь были бы враньём о содержимом шагов. */
.cofein-how__head {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl)); align-items: start;
}
.cofein-how__head > * { margin-block: 0; margin-inline: 0; max-width: none; }
.cofein-how__intro > .cofein-lead { margin-top: var(--space-md); }
.cofein-how__photo { margin: 0; }
.cofein-how__photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--r-lg);
}
.cofein-how__photo figcaption { margin-top: var(--space-2xs); color: var(--ink-soft); font-size: var(--fs-fine); }

.cofein-how__rail {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1.05fr .95fr 1fr;
  gap: clamp(var(--space-md), 3vw, var(--space-xl));
}
.cofein-section > .cofein-how__rail { margin-top: var(--space-2xl); }
/* Рельс: у каждого шага точка на общей линии. Линия своя у каждой колонки,
   но стоит на одной высоте, поэтому читается как одна дорога. */
.cofein-how__step { position: relative; border-top: 2px solid var(--line-strong); padding-top: var(--space-md); }
.cofein-how__step::before {
  content: ""; position: absolute; top: calc(-1 * var(--space-3xs) - 1px); left: 0;
  width: .6rem; height: .6rem; border-radius: var(--r-pill); background: var(--cobalt);
}
.cofein-how__num {
  display: flex; align-items: baseline; gap: .4rem; margin: 0 0 var(--space-2xs);
  color: var(--ink-soft); font-size: var(--fs-fine);
}
.cofein-how__num-value {
  font-family: var(--display); font-weight: 700; font-size: var(--fs-h3);
  line-height: 1; letter-spacing: var(--ls-display); color: var(--cobalt);
  font-variant-numeric: tabular-nums;
}
.cofein-how__step-title { margin: 0 0 var(--space-2xs); }
.cofein-how__step-text { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); }

/* Шаг 1: фото комплекта ещё нет. Заглушка подписана прямо, а вместо снимка
   чужих кофемашин — схема соединения. */
.cofein-how__slot {
  margin-top: var(--space-md); padding: var(--space-sm) var(--space-md) var(--space-md);
  background: var(--sheet); border: 2px dashed var(--line-strong); border-radius: var(--r-md);
}
.cofein-how__slot-title { margin: 0; font-size: var(--fs-small); font-weight: 600; }
.cofein-how__slot-text { margin: .35rem 0 0; color: var(--ink-soft); font-size: var(--fs-fine); }
.cofein-how__flow { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3xs); margin-top: var(--space-sm); }
.cofein-how__flow-node {
  margin: 0; padding: .35rem .6rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-fine);
}
.cofein-how__flow-arrow { position: relative; width: 1px; height: .85rem; margin-left: 1rem; background: var(--line-strong); }
.cofein-how__flow-arrow::after {
  content: ""; position: absolute; left: -.22rem; bottom: 0; width: .45rem; height: .45rem;
  border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  transform: rotate(45deg);
}

/* Шаг 2: лист с составом отчёта. Это перечень, а не ещё один чек: цифр
   здесь нет, и он не спорит с примерами на чеках. */
.cofein-how__sheet {
  margin-top: var(--space-md); padding: var(--space-sm) var(--space-md);
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-md);
}
.cofein-how__sheet-title { margin: 0; color: var(--ink-soft); font-size: var(--fs-fine); font-weight: 600; }
.cofein-how__sheet-list { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; font-size: var(--fs-small); }
.cofein-how__sheet-list li { position: relative; margin: 0; padding: .35rem 0 .35rem 1.1rem; border-top: 1px solid var(--line-soft); }
.cofein-how__sheet-list li:first-child { border-top: none; }
.cofein-how__sheet-list li::before {
  content: ""; position: absolute; left: 0; top: .95rem;
  width: .35rem; height: .35rem; border-radius: var(--r-pill); background: var(--cobalt);
}

/* Шаг 3: решения на планёрке — список с галочками, а не панель. */
.cofein-how__decide { margin: var(--space-md) 0 0; font-size: var(--fs-small); }
.cofein-section > .cofein-how__fine { margin-top: var(--space-xl); }

/* --- Пример отчёта ----------------------------------------------------- */
.cofein-demo-card {
  background: var(--sheet); color: var(--ink); border-radius: var(--r-lg);
  border: 1px solid var(--line); padding: var(--space-md) var(--space-lg);
}
.cofein-demo-card__head { border-bottom: 1px solid var(--line); padding-bottom: var(--space-xs); margin-bottom: var(--space-sm); }
.cofein-demo-card__title { font-family: var(--display); font-size: 1.12rem; margin: 0; }
.cofein-demo-card__meta { color: var(--ink-soft); font-size: var(--fs-fine); margin: .2rem 0 0; }
.cofein-badge {
  display: inline-block; padding: .2rem .65rem; border-radius: var(--r-pill);
  background: var(--kraft-pale); color: var(--kraft-deep);
  font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0; text-transform: none;
}
.cofein-badge--signal { background: var(--urgent-pale); color: var(--urgent-text); }
.cofein-badge--quiet { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.cofein-demo-card h4 {
  font-family: var(--text); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--ink-soft); margin: var(--space-md) 0 var(--space-2xs);
}
.cofein-demo-card ul { padding-left: 1.15em; color: var(--ink); font-size: var(--fs-small); }
.cofein-demo-card li { margin-bottom: .4em; }
.cofein-demo-card .cofein-note { color: var(--ink-soft); font-size: var(--fs-fine); margin-top: var(--space-md); }
.cofein-demo-card table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin: .3rem 0 0; }
.cofein-demo-card th, .cofein-demo-card td {
  text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.cofein-demo-card th { color: var(--ink-soft); font-weight: 600; font-size: var(--fs-fine); }
.cofein-demo-card tr:last-child td { border-bottom: none; }

/* Макет кабинета в рамке браузера — разметка, а не снимок экрана: остаётся
   чётким, а вкладки работают. Тень здесь не нужна: рамку отделяют граница
   и собственный серый пояс, а не «парящий» вид. */
.cofein-section > .cofein-cabinet { margin-top: var(--space-xl); }

.cofein-cabinet {
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  overflow: hidden;
}
.cofein-cabinet__chrome {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.cofein-cabinet__dots { display: flex; gap: .3rem; }
.cofein-cabinet__dots span { width: .6rem; height: .6rem; border-radius: var(--r-pill); background: var(--line-strong); }
.cofein-cabinet__address { color: var(--ink-soft); font-size: var(--fs-fine); }
.cofein-cabinet__chrome .cofein-badge { margin-left: auto; }
.cofein-cabinet__bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3xs) var(--space-md);
  padding: var(--space-md) var(--space-md) 0;
}
.cofein-cabinet__point { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-lead); letter-spacing: var(--ls-display); }
.cofein-cabinet__date { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); }

/* Вкладки: на телефоне полоса прокручивается, страница — нет. */
.cofein-cabinet__tabs {
  display: flex; gap: var(--space-3xs); margin-top: var(--space-sm);
  padding: 0 var(--space-md); border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.cofein-cabinet__tab {
  appearance: none; background: none; border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -1px; padding: .5rem .75rem; white-space: nowrap; cursor: pointer;
  font-family: var(--text); font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft);
}
.cofein-cabinet__tab:hover { color: var(--ink); }
.cofein-cabinet__tab[aria-selected="true"] { color: var(--cobalt-deep); border-bottom-color: var(--cobalt); }
.cofein-cabinet__panels { padding: var(--space-md); }
/* Заголовок раздела нужен только там, где вкладки не работают: без скрипта
   все четыре раздела идут подряд, и подписи объясняют, где какой. */
.cofein-cabinet__panel-title { margin: 0 0 var(--space-sm); font-size: var(--fs-lead); }
.cofein-cabinet--js .cofein-cabinet__panel-title { display: none; }

/* Обзор: три колонки важности — как строки чека, только плитками. */
.cofein-cabinet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.cofein-cabinet__col { border-top: 3px solid var(--line-strong); padding-top: var(--space-2xs); }
.cofein-cabinet__col--urgent { border-top-color: var(--urgent); }
.cofein-cabinet__col--mark { border-top-color: var(--marker); }
.cofein-cabinet__col-title { margin: 0 0 var(--space-2xs); color: var(--ink-soft); font-size: var(--fs-fine); font-weight: 600; }
.cofein-cabinet__tiles { list-style: none; margin: 0; padding: 0; }
.cofein-cabinet__tile { display: flex; flex-direction: column; gap: .1rem; padding: var(--space-2xs) 0; border-top: 1px solid var(--line-soft); }
.cofein-cabinet__tile:first-child { border-top: none; }
.cofein-cabinet__tile-value {
  font-family: var(--display); font-weight: 700; font-size: var(--fs-lead);
  letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums;
}
.cofein-cabinet__col--urgent .cofein-cabinet__tile-value { color: var(--urgent-text); }
/* Важное помечено маркером — тем же, что и строки чека. */
.cofein-cabinet__col--mark .cofein-cabinet__tile-value {
  align-self: flex-start; padding-inline: .25rem; margin-inline: -.25rem;
  background: var(--marker); border-radius: 2px;
}
.cofein-cabinet__tile-text { color: var(--ink-soft); font-size: var(--fs-small); }

.cofein-cabinet__lead { margin: 0 0 var(--space-sm); color: var(--ink-soft); font-size: var(--fs-small); max-width: var(--measure); }
.cofein-cabinet__scroll { overflow-x: auto; }
.cofein-cabinet__table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.cofein-cabinet__table th, .cofein-cabinet__table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.cofein-cabinet__table thead th { color: var(--ink-soft); font-size: var(--fs-fine); font-weight: 600; }
.cofein-cabinet__table tbody th { font-weight: 400; }
.cofein-cabinet__table tbody tr:last-child th, .cofein-cabinet__table tbody tr:last-child td { border-bottom: none; font-weight: 600; }
.cofein-cabinet__facts { list-style: none; margin: 0; padding: 0; }
.cofein-cabinet__facts li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  padding: var(--space-2xs) 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-small);
}
.cofein-cabinet__facts li:first-child { border-top: none; }
.cofein-cabinet__fine { margin: var(--space-md) 0 0; color: var(--ink-soft); font-size: var(--fs-fine); max-width: var(--measure); }
.cofein-section > .cofein-example__note { margin-top: var(--space-sm); }

/* --- Деньги: оценка допродаж ------------------------------------------- */
/* Крафтовая полоса — второй и последний «оторванный» край на странице
   (первый — низ hero). Внутри белый лист калькулятора: на крафте он читается
   отдельным предметом, а не ещё одной карточкой. */
/* Полосу открывает зубчатый край, поэтому линия между секциями ей не нужна:
   два класса — чтобы перебить правило «.cofein-section + .cofein-section». */
.cofein-section.cofein-roi {
  --tooth: 12px;
  position: relative; background: var(--kraft); color: var(--night);
  border-top: none; padding-top: calc(var(--section-y) + var(--tooth));
}
.cofein-roi::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--tooth);
  background: var(--paper);
  -webkit-mask: var(--tooth-mask) 0 0 / 22px var(--tooth) repeat-x;
  mask: var(--tooth-mask) 0 0 / 22px var(--tooth) repeat-x;
}
.cofein-roi + .cofein-section { border-top: none; }
/* Приглушённый текст на крафте до 4.5:1 не дотягивает, поэтому на этой
   полосе второстепенный текст набран ночным кобальтом (7.4:1), а иерархия
   держится на размере и насыщенности. */
.cofein-roi .cofein-eyebrow,
.cofein-roi .cofein-lead,
.cofein-roi .cofein-fine,
.cofein-roi .cofein-roi__formula-note,
.cofein-roi .cofein-roi__hint,
.cofein-roi .cofein-roi__caveat { color: var(--night); }

.cofein-roi__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl)); align-items: start;
}
.cofein-roi__inner > * { margin-block: 0; margin-inline: 0; max-width: none; }
.cofein-roi__intro > .cofein-lead { margin-top: var(--space-md); }
.cofein-roi__formula-note { margin: var(--space-md) 0 0; font-size: var(--fs-small); }
.cofein-roi__caveat { margin: var(--space-md) 0 0; font-size: var(--fs-small); max-width: var(--measure); }

.cofein-roi__calc { background: var(--sheet); color: var(--ink); border-radius: var(--r-lg); padding: var(--space-lg); }
.cofein-roi__calc-title { margin: 0 0 var(--space-md); font-family: var(--display); font-weight: 700; font-size: var(--fs-lead); letter-spacing: var(--ls-display); }
.cofein-roi__fields { display: grid; gap: var(--space-sm); }
.cofein-roi__field { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; align-items: center; gap: var(--space-2xs) var(--space-sm); }
.cofein-roi__field label { font-size: var(--fs-small); }
.cofein-roi__field input {
  width: 100%; min-height: 46px; padding: .4rem .7rem; text-align: right;
  font-family: var(--text); font-size: var(--fs-body); font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--sheet);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
}
.cofein-roi__field input:hover { border-color: var(--ink-soft); }
.cofein-roi__out { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--line); }
.cofein-roi__out-label { margin: 0; color: var(--ink-soft); font-size: var(--fs-fine); }
.cofein-roi__total {
  margin: .2rem 0 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3);
  letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums;
}
.cofein-roi__per { font-family: var(--text); font-size: var(--fs-small); font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.cofein-roi__formula { margin: .35rem 0 0; color: var(--ink-soft); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.cofein-roi__empty { margin: .35rem 0 0; color: var(--ink-soft); font-size: var(--fs-small); }
.cofein-roi__hint { margin: var(--space-md) 0 0; font-size: var(--fs-fine); }

/* --- Для кого ---------------------------------------------------------- */
/* Три широкие строки с подписью слева: их читают, а не сравнивают как
   плитки, поэтому рамок и равных высот здесь нет — только линии. */
.cofein-section > .cofein-audience__list { margin-top: var(--space-xl); }

.cofein-audience__list { list-style: none; margin: 0; padding: 0; }
.cofein-audience__row {
  display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-xl);
  padding: var(--space-lg) 0; border-top: 1px solid var(--line);
}
.cofein-audience__row:last-child { border-bottom: 1px solid var(--line); }
.cofein-audience__who {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3);
  letter-spacing: var(--ls-display);
}
.cofein-audience__title { margin: 0 0 var(--space-2xs); font-size: var(--fs-lead); }
.cofein-audience__text { margin: 0; color: var(--ink-soft); max-width: var(--measure); }
.cofein-audience__benefits { list-style: none; margin: var(--space-sm) 0 0; padding: 0; font-size: var(--fs-small); }
.cofein-audience__benefits li { position: relative; margin: 0 0 .35em; padding-left: 1.35rem; }
.cofein-audience__benefits li::before {
  content: ""; position: absolute; left: 0; top: .65em; width: .85rem; height: 2px; background: var(--cobalt);
}
.cofein-audience__link { margin: var(--space-sm) 0 0; font-weight: 600; }

/* --- Команда ----------------------------------------------------------- */
/* Асимметрия вместо ровной сетки: текст слева, высокое фото справа, поднятое
   выше границы секции. Три одинаковые карточки здесь были бы враньём —
   разговор о работе смены не про сравнение плиток. Фото стоковое и подписано
   как иллюстрация. */
.cofein-team__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl)); align-items: start;
}
.cofein-team__grid > * { margin-block: 0; margin-inline: 0; max-width: none; }
.cofein-team__body > .cofein-lead { margin-top: var(--space-md); }

.cofein-team__list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.cofein-team__row { padding: var(--space-sm) 0; border-top: 1px solid var(--line); }
.cofein-team__row:last-child { border-bottom: 1px solid var(--line); }
.cofein-team__row-title {
  margin: 0 0 .15rem; font-family: var(--display); font-weight: 700;
  font-size: var(--fs-body); letter-spacing: var(--ls-display);
}
.cofein-team__row-text { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); max-width: var(--measure); }
/* Одна подсказка на следующую смену — полоса с крафтовой линейкой, а не
   ещё один пункт списка: это вывод, к которому ведёт весь блок. */
.cofein-team__next {
  margin: var(--space-lg) 0 0; padding-left: var(--space-sm);
  border-left: 4px solid var(--kraft); font-size: var(--fs-small);
}
/* Фото поднимается над границей секции, но не выше, чем на --space-xl:
   иначе на средних экранах оно заходило бы на нижнюю строку предыдущей
   секции — отступ секции там меньше. */
.cofein-team__figure { margin: calc(-1 * var(--space-xl)) 0 0; }
/* Кадр 3:4 — как у самого файла: кадрировать стоковое фото заново не за чем. */
.cofein-team__figure img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 10px solid var(--kraft); border-radius: var(--r-lg); background: var(--kraft);
}
.cofein-team__figure figcaption { margin-top: var(--space-2xs); color: var(--ink-soft); font-size: var(--fs-fine); }

/* --- Безопасность (ночной кобальт) ------------------------------------- */
/* Тёмная полоса отвечает на вопрос «что с записями» коротко; подробности —
   на странице «Данные и безопасность», и формулировки у них одни. Обещаний
   полной анонимности и «данные никуда не уходят» здесь нет: при контуре с
   внешней ИИ-моделью ей передаётся текст отчёта. */
.cofein-security { background: var(--night); color: var(--on-night); }
.cofein-security .cofein-eyebrow { color: var(--on-night-soft); }
.cofein-security h2 { color: var(--on-night); }
.cofein-security__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl)); align-items: start;
}
.cofein-security__grid > * { margin-block: 0; margin-inline: 0; max-width: none; }
.cofein-security__lead { margin-top: var(--space-md); color: var(--on-night-soft); font-size: var(--fs-lead); max-width: var(--measure); }
.cofein-security__link { margin: var(--space-md) 0 0; color: var(--on-night-soft); font-size: var(--fs-small); }
/* Ссылка на страницу о данных: кобальт на ночном не читается, на тёмной
   полосе ссылки светлые. */
.cofein-security a { color: var(--on-night); }
/* Четыре коротких ответа плитками по два в ряд: это перечень, а не рассказ,
   и на телефоне он встаёт в один столбец. */
.cofein-security__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
}
.cofein-security__item { border-top: 1px solid var(--line-on-dark); padding-top: var(--space-sm); }
.cofein-security__item-title { margin: 0 0 var(--space-2xs); font-size: var(--fs-body); color: var(--on-night); }
.cofein-security__item-text { margin: 0; color: var(--on-night-soft); font-size: var(--fs-small); }

/* --- Тарифы ------------------------------------------------------------ */
/* Три колонки одного устройства: название, цена, состав, кнопка. Состав идёт
   от общего к частному — «как в предыдущем тарифе плюс это», — поэтому
   колонки читаются как сравнение, а не как три рассказа. Средняя залита
   кобальтом: это середина сравнения, а не «популярный тариф», данных о том,
   какой тариф выбирают чаще, у нас нет. */
.cofein-tiers__grid { align-items: stretch; }

.cofein-tier {
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column;
}
.cofein-tier--featured {
  background: var(--cobalt); border-color: var(--cobalt);
  color: var(--on-night); box-shadow: var(--shadow-pop);
}
.cofein-tier h3 { margin: 0 0 .3rem; font-size: 1.12rem; }
.cofein-tier__price {
  font-family: var(--display); font-size: 1.1rem; font-weight: 700;
  letter-spacing: var(--ls-display); margin: .2rem 0 var(--space-sm);
  font-variant-numeric: tabular-nums;
}
.cofein-tier__price small { display: block; font-family: var(--text); font-size: var(--fs-fine);
  font-weight: 400; color: var(--ink-soft); letter-spacing: 0; margin-top: .25rem; }
.cofein-tier ul { padding-left: 1.15em; font-size: var(--fs-small); margin: 0 0 var(--space-sm); }
.cofein-tier li { margin-bottom: .45em; }
/* Кнопка прижата к низу колонки: у колонок разный состав, а низ должен быть
   ровным, иначе сравнение рассыпается. */
.cofein-tier .wp-block-buttons { margin-top: auto; }
.cofein-tier__caveat {
  color: var(--ink-soft); font-size: var(--fs-fine); border-top: 1px solid var(--line-soft);
  padding-top: var(--space-xs); margin-top: auto;
}
/* Средняя колонка на кобальте: текст светлый, кнопка — как в первом экране
   (кобальт по кобальту не читается). Приглушённый текст берёт
   --on-cobalt-soft: --ink-soft на кобальте не дотягивает до AA. */
.cofein-tier--featured h3,
.cofein-tier--featured .cofein-tier__price { color: var(--on-night); }
.cofein-tier--featured .cofein-tier__price small { color: var(--on-cobalt-soft); }
.cofein-tier--featured .cofein-tier__caveat {
  color: var(--on-cobalt-soft); border-top-color: var(--line-on-dark);
}
.cofein-tier--featured .wp-block-button__link {
  background: var(--paper); border-color: var(--paper); color: var(--cobalt-deep);
}
.cofein-tier--featured .wp-block-button__link:hover {
  background: var(--cobalt-pale); border-color: var(--cobalt-pale); color: var(--cobalt-deep);
}

/* --- Вопросы и ответы -------------------------------------------------- */
.cofein-faq details {
  background: var(--sheet); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .2rem var(--space-xs); margin-bottom: var(--space-2xs);
}
.cofein-faq summary {
  cursor: pointer; font-weight: 600; font-size: var(--fs-body); padding: var(--space-xs) 0;
  list-style-position: outside;
}
.cofein-faq summary::marker { color: var(--cobalt); }
.cofein-faq details[open] summary { border-bottom: 1px solid var(--line-soft); margin-bottom: var(--space-xs); }
.cofein-faq details p, .cofein-faq details ul { color: var(--ink-soft); font-size: var(--fs-small); }

/* --- Заявка ------------------------------------------------------------ */
/* Фон секции — кобальт, форма лежит на белой подложке. Подложка возвращает
   свои цвета текста: без этого подписи и подсказки полей унаследовали бы
   светлый цвет секции и стали бы нечитаемыми на белом. Слева от формы —
   заголовок и фото владельца с отчётом, на телефоне форма идёт сразу за
   заголовком. Стили самой формы живут в плагине заявок (plugin/cofein-leads):
   форма должна выглядеть одинаково и с другой темой. */
/* Два класса — чтобы снять линию между секциями, которую ставит общее правило
   «.cofein-section + .cofein-section»: на кобальте она выглядит швом. */
.cofein-section.cofein-cta { background: var(--cobalt); color: var(--on-night); border-top: none; }
.cofein-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-areas: "intro panel" "photo panel";
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl)) clamp(var(--space-lg), 5vw, var(--space-3xl));
  align-items: start;
}
.cofein-cta__grid > * { margin-block: 0; margin-inline: 0; max-width: none; }
.cofein-cta__intro { grid-area: intro; }
.cofein-cta__figure { grid-area: photo; align-self: end; margin: 0; }
/* Подложка тянется на всю высоту колонки: она держит правый край композиции,
   а форма стоит по её середине. На телефоне высота подложки — по содержимому. */
.cofein-cta__panel {
  grid-area: panel; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--sheet); color: var(--ink);
  border-radius: var(--r-lg); padding: clamp(var(--space-md), 3vw, var(--space-xl));
}
.cofein-cta .cofein-eyebrow { color: var(--on-cobalt-soft); }
.cofein-cta h2 { color: var(--on-night); }
.cofein-cta__lead { margin-top: var(--space-md); color: var(--on-cobalt-soft); font-size: var(--fs-lead); max-width: 30rem; }
/* Кадр 5:7 — как у файла, но по высоте ограничен: рядом стоит форма, и фото
   не должно задавать высоту всей секции. На телефоне кадр горизонтальный. */
.cofein-cta__figure img {
  display: block; width: 100%; aspect-ratio: 5 / 7; max-height: 32rem; object-fit: cover;
  border: 10px solid var(--kraft); border-radius: var(--r-lg); background: var(--kraft);
}
.cofein-cta__figure figcaption { margin-top: var(--space-2xs); color: var(--on-cobalt-soft); font-size: var(--fs-fine); }
/* Форма внутри подложки: свои ширина и верхний отступ ей здесь не нужны,
   подложка уже дала поля. */
.cofein-cta__panel .cofein-lead-form { max-width: none; margin-top: 0; }
/* Контакт человека, если он задан: пока контакта нет, строки нет вовсе. */
.cofein-cta__contact {
  margin: var(--space-md) 0 0; padding-top: var(--space-sm);
  border-top: 1px solid var(--line); color: var(--ink); font-size: var(--fs-small);
}
.cofein-cta__contact-value { font-weight: 600; }

/* --- Страницы ---------------------------------------------------------- */
.page-head { background: var(--night); color: var(--on-night); padding: clamp(2.4rem, 5vw, 4rem) 0; }
.page-head h1 { color: var(--on-night); margin-bottom: .4em; }
.page-head p { color: var(--on-night-soft); margin: 0; max-width: var(--measure); }
.page-body { padding: var(--section-y) 0; }
.page-body h2 { margin-top: var(--space-xl); }
.page-body h2:first-child { margin-top: 0; }
.page-body p, .page-body ul, .page-body ol { max-width: var(--measure); }

.cofein-draft-note {
  background: var(--kraft-pale); color: var(--kraft-deep); border-radius: var(--r-lg);
  padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); font-size: var(--fs-small);
  border: 2px dashed var(--kraft);
}
.cofein-draft-note strong { display: block; font-family: var(--display); font-size: var(--fs-body); margin-bottom: .3rem; }

.cofein-thanks { text-align: left; }
.cofein-thanks__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: var(--r-pill);
  background: var(--good-pale); color: var(--good-text); font-size: 1.3rem; margin-bottom: var(--space-sm);
}

/* --- Подвал ------------------------------------------------------------ */
.site-footer { background: var(--night); color: var(--on-night-soft); padding: var(--space-xl) 0 var(--space-lg); font-size: var(--fs-small); }
.site-footer a { color: var(--on-night); }
.site-footer a:hover { color: var(--sheet); }
.site-footer .wordmark { color: var(--on-night); }
.site-footer .wordmark:hover { color: var(--sheet); }
.site-footer .wordmark__tag { color: var(--on-night-soft); }
.site-footer__grid { display: grid; gap: var(--space-md); grid-template-columns: 1.4fr 1fr 1fr; }
.site-footer h4 {
  font-family: var(--text); font-size: var(--fs-fine); letter-spacing: 0;
  text-transform: none; color: var(--on-night-soft); margin: 0 0 var(--space-xs); font-weight: 600;
}
.site-footer__about { margin: var(--space-sm) 0 0; max-width: 26rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45em; }
.site-footer__note {
  border-top: 1px solid var(--line-on-dark); margin-top: var(--space-lg); padding-top: var(--space-sm);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
.site-footer__note p { margin: 0; max-width: var(--measure); }

/* --- Мелкое ------------------------------------------------------------ */
.cofein-fine { color: var(--ink-soft); font-size: var(--fs-fine); }
.cofein-section--tint .cofein-fine { color: var(--ink-soft); }
.cofein-list-check { list-style: none; padding-left: 0; }
.cofein-list-check li { padding-left: 1.5rem; position: relative; }
.cofein-list-check li::before {
  content: "✓"; position: absolute; left: 0; color: var(--cobalt-deep); font-weight: 700;
}

/* --- Телефон ----------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Подпись у знака уступает место пунктам меню */
  .wordmark__tag { display: none; }
}
@media (max-width: 1000px) {
  /* Hero в одну колонку: заголовку и чеку нужно место */
  .cofein-hero > .cofein-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .cofein-hero .cofein-hero__copy > h1 { max-width: none; }
  .cofein-hero .cofein-hero__grid > .cofein-hero__visual { max-width: 34rem; }
  .cofein-hero__stack { display: block; padding-bottom: 0; }
  /* На телефоне кадр горизонтальный: фото не занимает весь экран, чек
     остаётся целиком виден. Наклон и перекрытие тут только мешают чтению. */
  .cofein-hero__photo { width: 100%; aspect-ratio: 16 / 11; }
  .cofein-receipt {
    position: relative; left: auto; bottom: auto;
    width: min(100%, 22rem); margin: -1.75rem 0 0; transform: none;
  }
  /* Секции ниже hero: две колонки становятся одной, порядок чтения —
     сверху вниз, как в разметке. */
  .cofein-annot { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .cofein-how__head { grid-template-columns: minmax(0, 1fr); }
  .cofein-how__rail { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .cofein-roi__inner { grid-template-columns: minmax(0, 1fr); }
  .cofein-audience__row { grid-template-columns: minmax(0, 1fr); }
  /* Команда: фото встаёт под текстом, подъём над границей секции снят —
     иначе на телефоне он читается как случайный сдвиг. */
  .cofein-team__grid { grid-template-columns: minmax(0, 1fr); }
  .cofein-team__figure { margin-top: 0; }
  .cofein-security__grid { grid-template-columns: minmax(0, 1fr); }
  /* Заявка: форма идёт сразу за заголовком, фото — после неё. */
  .cofein-cta__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "panel" "photo";
  }
  /* Фото заявки на телефоне — широкий кадр: оно здесь фон, а не содержание.
     Ограничение по высоте снято: в одну колонку оно ничего не ломает. */
  .cofein-cta__figure img { aspect-ratio: 16 / 9; max-height: none; }
}
@media (max-width: 900px) {
  /* Пять пунктов и две ссылки в строку не встают — меню уходит под кнопку.
     Состояние включает скрипт: без него меню показано списком. */
  .site-header { position: relative; }
  .site-header__inner { gap: var(--space-2xs) var(--space-sm); }
  .site-header--js .site-nav__toggle { display: inline-flex; margin-left: auto; }
  .site-header__panel { flex-basis: 100%; display: block; }
  .site-header--js .site-header__panel { display: none; }
  .site-header--js.site-header--menu-open .site-header__panel {
    display: block; padding-bottom: var(--space-xs);
  }
  .site-nav__list { display: block; }
  .site-nav a { padding: .7rem .6rem; font-size: var(--fs-body); }
  .header-actions { margin-left: 0; padding-top: var(--space-xs); border-top: 1px solid var(--line-soft); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .wordmark { font-size: 1.05rem; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .cofein-form__row--split { grid-template-columns: 1fr; }
  .wp-block-columns { flex-direction: column; }
  .wp-block-column { width: 100%; }
  .cofein-card, .cofein-tier, .cofein-demo-card { padding: var(--space-md); }
  /* Обзор кабинета: три колонки важности встают друг под другом, иначе
     плитки сжимаются в столбик по одному слову. */
  .cofein-cabinet__grid { grid-template-columns: minmax(0, 1fr); }
  .cofein-cabinet__panels, .cofein-roi__calc { padding: var(--space-md); }
  .cofein-annot__sheet { padding: var(--space-sm) var(--space-md) var(--space-md); font-size: .8125rem; }
  .cofein-audience__row { padding: var(--space-md) 0; }
  /* Тарифы на телефоне — вертикально: в две колонки состав читается по слогу. */
  .cofein-tiers__grid { grid-template-columns: minmax(0, 1fr); }
  .cofein-security__list { grid-template-columns: minmax(0, 1fr); }
  .cofein-team__figure img, .cofein-cta__figure img { border-width: 8px; }
}

/* --- Печать ------------------------------------------------------------ */
@media print {
  .site-header, .site-footer, .cofein-form, .wp-block-buttons { display: none; }
  body { background: var(--sheet); color: var(--night); }
}

/* На телефоне пример продукта появляется сразу после кнопок. */
@media (max-width: 780px) {
  .cofein-hero > .cofein-hero__grid { gap: var(--space-md); }
  .cofein-hero .cofein-hero__copy { display: contents; }
  .cofein-hero .cofein-hero__copy > h1 { grid-row: 1; margin: 0; }
  .cofein-hero .cofein-hero__copy > .cofein-hero__lead { grid-row: 2; margin: 0; }
  .cofein-hero .cofein-hero__copy > .wp-block-buttons { grid-row: 3; margin: 0; }
  .cofein-hero .cofein-hero__grid > .cofein-hero__visual { grid-row: 4; max-width: none; }
  .cofein-hero .cofein-hero__copy > .cofein-hero__facts { grid-row: 5; margin: 0; }
  .cofein-hero .cofein-hero__copy > .cofein-hero__privacy { grid-row: 6; margin: 0; }
  .cofein-hero__photo { aspect-ratio: 5 / 2; }
  .cofein-hero__visual .cofein-receipt { margin-top: calc(-1 * var(--space-xl)); }
}

@media (max-width: 480px) {
  /* Узкий телефон: подпись поля встаёт над числом — в две колонки на 320 px
     от неё остаётся столбик по слогу. */
  .cofein-roi__field { grid-template-columns: minmax(0, 1fr); }
  .cofein-roi__field input { text-align: left; }
  .cofein-cabinet__bar { padding: var(--space-sm) var(--space-sm) 0; }
  .cofein-cabinet__tabs { padding: 0 var(--space-sm); }
  .cofein-cabinet__panels { padding: var(--space-sm); }
  .cofein-how__rail { gap: var(--space-md); }
}

/* Короткие вводные абзацы начинаются на одной оси с заголовком. */
.cofein-section > .cofein-lead {
  width: min(var(--measure), calc(100% - 2.5rem));
  margin-left: max(1.25rem, calc((100% - var(--wrap)) / 2));
  margin-right: auto;
}

/* Страница, содержимое которой собрано из секций (страница «Пример отчёта»):
   секция стоит внутри обычного содержимого страницы, а не полосой во всю
   ширину экрана. Собственные отступы секции и линия между секциями здесь
   лишние — их роль играют отступы самой страницы, а ширина берётся у
   колонки содержимого. Фон этих секций тот же, что у страницы. */
.page-body .cofein-section { padding-block: 0; border-top: none; }
.page-body .cofein-section > * { width: 100%; margin-inline: 0; max-width: none; }
/* Ритм внутри секции задаёт сама секция: отступ заголовков и сдвиг вводного
   абзаца, рассчитанные на полосу во всю ширину, здесь лишние. */
.page-body .cofein-section h2 { margin-top: 0; }
.page-body .cofein-section > .cofein-lead { width: 100%; margin-left: 0; }

/* Пример отчёта всегда под рукой на телефоне. */
.cofein-mobile-cta { display: none; }
@media (max-width: 780px) {
  body.home { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .cofein-mobile-cta {
    display: block; position: fixed; bottom: 0; inset-inline: 0; z-index: 30;
    padding: .65rem 1.25rem calc(.65rem + env(safe-area-inset-bottom));
    background: var(--sheet); border-top: 1px solid var(--line);
  }
  .cofein-mobile-cta a {
    display: block; padding: .7rem 1rem; border-radius: var(--r-md);
    background: var(--cobalt); color: var(--sheet); text-align: center;
    font-weight: 600; text-decoration: none;
  }
}
@media print { .cofein-mobile-cta { display: none; } }