/* ============================================================================
   RateLab · home page styles
   ----------------------------------------------------------------------------
   Generated by site_source/sync_home_assets.py from stands/ratelab-final/css.
   Do not edit this file directly: rebuild the stand, then run the sync script.

   Concatenated in order: tokens.css, base.css, surfaces.css, page.css
   ========================================================================== */

/* ---------- tokens.css ---------- */
/* ============================================================================
   Rate Lab · цветовые и размерные токены
   ----------------------------------------------------------------------------
   Палитра собрана из трёх источников: холодная доказательная основа, тёплая
   песочная поверхность с горчичным акцентом логотипа и чертёжные линии.

   Три правила, которые нельзя нарушать:
     · пара «#eef3f7 на белом» и «белый на #eef3f7» — основная смена регистра;
     · #eef3f7 не бывает одновременно фоном блока и заливкой всех карточек в нём;
     · тёмный #153653 — ограниченный ресурс страницы, а не рядовая поверхность.

   Полная история решений по палитре — в стенде reDesign-iter8.
   ========================================================================== */

:root {
  /* ---------- Чернила ---------------------------------------------------- */
  --ink:            #0d203b;   /* «чёрные» чернила, основной текст */
  --ink-soft:       #41546e;   /* приглушённые чернила, вторичный текст */
  --ink-muted:      #5f6a79;   /* muted описание на светлых поверхностях */
  --ink-inverse:    #ffffff;

  /* ---------- Холодные поверхности --------------------------------------- */
  --paper:          #ffffff;   /* активная доказательная поверхность */
  --field:          #eef3f7;   /* утверждённая пара с белым */
  --field-cool:     #eaf1f6;   /* альтернатива из marketing-iteration */
  --field-deep:     #eaf2f9;   /* наиболее тёмный допустимый холодный field */
  --field-light:    #f3f7fb;   /* самый светлый холодный field */
  --canvas:         #f6f9fc;   /* фон документа под секциями */

  /* ---------- Тёмная глубина (лимитировано) ------------------------------ */
  --navy:           #153653;   /* не более одного полноширинного блока */
  --navy-deep:      #0f2a43;   /* край и градиентная глубина navy */
  --navy-line:      #2c4d6d;   /* линии внутри navy */
  --navy-copy:      #b9c9d9;   /* текст описания на navy */
  --navy-accent:    #efc878;   /* небольшой акцентный текст на navy */

  /* ---------- Линии ------------------------------------------------------ */
  --line-strong:    #b8c7d5;   /* высокое выделение: обводки и разделители */
  --line:           #cfdae4;   /* низкое выделение */
  --line-faint:     #e2eaf1;   /* внутренние швы, координатная сетка */

  /* ---------- Горчица логотипа ------------------------------------------- */
  --gold-dark:      #AD834A;   /* тёмный край и текстовый акцент на светлом */
  --gold-text:      #876230;   /* горчичный ДЛЯ ТЕКСТА: #AD834A как текст даёт 3.43:1 */
  --gold:           #BC9257;   /* базовый брендовый */
  --gold-light:     #C89D61;   /* светлая грань */
  --gold-glow:      #D4AE79;   /* блик и мягкое свечение */

  /* ---------- Горчица интерфейсная --------------------------------------- */
  --accent:         #d5a34d;   /* primary CTA с белым текстом */
  --accent-edge:    #bd8430;   /* обводка и pressed state для --accent */
  --accent-quiet:   #efc878;   /* мелкий акцент на тёмном */

  /* ---------- Тёплое поле ------------------------------------------------ */
  --warm:           #f3eadc;   /* тёплая песочная поверхность */
  --warm-alt:       #f7ead4;   /* более насыщенный вариант */
  --warm-line:      #e0d0b6;   /* линии внутри тёплого поля */
  --warm-keyline:   #bb8337;   /* ободок белых карточек на тёплом поле */
  --warm-ink:       #7f5c2f;   /* тёмный текст на тёплом (вместо ранее отклонённого оттенка) */
  --warm-accent:    #876230;   /* muted акцент на тёплом */

  /* ---------- Служебная семантика ---------------------------------------- */
  /* Горчица никогда не используется для warning / error. */
  --status-live:    #167457;   /* подтверждено production */
  --status-live-bg: #e6f2ed;
  --status-build:   #2f6ea3;   /* в разработке */
  --status-build-bg:#e6eff8;
  --status-next:    #6a5ba8;   /* next */
  --status-next-bg: #ece9f6;
  --status-vision:  #52647a;   /* направление развития */
  --status-vision-bg:#e8edf2;

  /* ---------- Тени -------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(13, 32, 59, .05);
  --shadow-sm:  0 8px 24px rgba(13, 32, 59, .06);
  --shadow-md:  0 18px 50px rgba(13, 32, 59, .09);
  --shadow-lg:  0 34px 84px rgba(13, 32, 59, .14);
  --shadow-gold:0 18px 40px rgba(173, 131, 74, .18);

  /* ---------- Радиусы ----------------------------------------------------- */
  /* Строгие блоки используют --r-0 / --r-xs: прямоугольная геометрия iter5
     оценена положительно и сохраняется как отдельный регистр. */
  --r-0:   0px;
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  30px;

  /* ---------- Ритм и сетка ------------------------------------------------ */
  --shell:      1280px;
  --shell-wide: 1440px;
  --gutter:     clamp(20px, 4.4vw, 64px);
  --section-y:  clamp(72px, 8.4vw, 132px);
  --stack-lg:   clamp(40px, 5vw, 72px);
  --stack-md:   clamp(24px, 3vw, 40px);

  /* ---------- Типографика -------------------------------------------------- */
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-body);
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Нижние границы подобраны под самое длинное слово макетов —
     «инструментальный»: при 2.9rem его min-content шире экрана 390px. */
  --t-display:  clamp(2.05rem, 5.4vw, 5.1rem);
  --t-h2:       clamp(1.72rem, 4.1vw, 3.9rem);
  --t-h3:       clamp(1.35rem, 2.1vw, 2.05rem);
  --t-lead:     clamp(1.02rem, 1.35vw, 1.22rem);
  --t-body:     1rem;
  --t-small:    .84rem;
  --t-micro:    .68rem;

  /* ---------- Движение ----------------------------------------------------- */
  --ease: cubic-bezier(.2, .75, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 520ms;

  /* ---------- Приглушение периферии --------------------------------------- */
  /* Утверждено: .58 для второстепенного окружения вокруг фокуса.
     Ограничение: приглушается только не-текстовое или крупное содержимое,
     фокусный объект остаётся полностью контрастным. */
  --peripheral: .58;
}

/* ============================================================================
   Регистры поверхностей.
   Каждый блок объявляет ровно один регистр; регистр задаёт фон, цвет линий,
   цвет текста и допустимую заливку карточек внутри.
   ========================================================================== */

[data-register="paper"] {
  --reg-bg: var(--paper);
  --reg-card: var(--field);          /* белый блок → карточки #eef3f7 */
  --reg-card-line: var(--line);
  --reg-ink: var(--ink);
  --reg-ink-soft: var(--ink-soft);
  --reg-muted: var(--ink-muted);
  --reg-line: var(--line);
  --reg-line-strong: var(--line-strong);
  --reg-accent: var(--gold-dark);
  --reg-accent-text: var(--gold-text);
}

[data-register="field"] {
  --reg-bg: var(--field);
  --reg-card: var(--paper);          /* #eef3f7 блок → карточки белые */
  --reg-card-line: var(--line);
  --reg-ink: var(--ink);
  --reg-ink-soft: var(--ink-soft);
  --reg-muted: var(--ink-muted);
  --reg-line: var(--line);
  --reg-line-strong: var(--line-strong);
  --reg-accent: var(--gold-dark);
  --reg-accent-text: var(--gold-text);
}

[data-register="warm"] {
  --reg-bg: var(--warm);
  --reg-card: var(--paper);
  --reg-card-line: var(--warm-keyline);
  --reg-ink: var(--ink);
  --reg-ink-soft: var(--warm-ink);
  --reg-muted: var(--warm-accent);
  --reg-line: var(--warm-line);
  --reg-line-strong: #cdb691;
  --reg-accent: var(--warm-ink);
  --reg-accent-text: var(--warm-ink);
}

[data-register="navy"] {
  --reg-bg: var(--navy);
  --reg-card: rgba(255, 255, 255, .055);
  --reg-card-line: var(--navy-line);
  --reg-ink: #ffffff;
  --reg-ink-soft: #d5e0ea;
  --reg-muted: var(--navy-copy);
  --reg-line: var(--navy-line);
  --reg-line-strong: #3c608180;
  --reg-accent: var(--navy-accent);
  --reg-accent-text: var(--navy-accent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}

/* ---------- base.css ---------- */
/* ============================================================================
   Rate Lab · reDesign iter8 · База: сброс, типографика, оболочка, компоненты
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
p, h1, h2, h3, h4, h5, figure, ul, ol, dl, dd, blockquote { margin: 0; }
h1, h2, h3, h4 { overflow-wrap: break-word; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: fixed; z-index: 999; top: 10px; left: 10px;
  padding: 10px 15px; border-radius: var(--r-xs);
  background: var(--ink); color: #fff; font-weight: 700;
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

/* ---------- Оболочка ------------------------------------------------------ */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.shell--wide { width: min(100% - (var(--gutter) * 2), var(--shell-wide)); }
.shell--narrow { width: min(100% - (var(--gutter) * 2), 940px); }

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--reg-bg, var(--paper));
  color: var(--reg-ink, var(--ink));
}
.section--tight { padding-block: clamp(48px, 5.4vw, 84px); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* ---------- Типографика --------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  justify-self: start; width: fit-content;
  color: var(--reg-accent-text, var(--gold-text));
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .17em;
  line-height: 1.4; text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: currentColor; opacity: .6;
}
.eyebrow--bare::before { display: none; }

.coordinate {
  color: var(--reg-muted, var(--ink-muted));
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}

.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 800; letter-spacing: -.052em; line-height: .98;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h2 {
  font-size: var(--t-h2); font-weight: 780;
  letter-spacing: -.048em; line-height: 1.03; text-wrap: balance;
  overflow-wrap: break-word;
}
.h3 {
  font-size: var(--t-h3); font-weight: 740;
  letter-spacing: -.035em; line-height: 1.14;
  overflow-wrap: break-word;
}
.lead {
  color: var(--reg-ink-soft, var(--ink-soft));
  font-size: var(--t-lead); line-height: 1.56;
}
.muted { color: var(--reg-muted, var(--ink-muted)); }
.small { font-size: var(--t-small); }
.serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.02em; }
.mono { font-family: var(--font-mono); }

.section-head { display: grid; gap: 18px; max-width: 940px; }
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end; gap: clamp(28px, 4vw, 76px);
}
.section-head .h2 { margin-top: 4px; }

/* ---------- Кнопки -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: .85rem; font-weight: 720; line-height: 1.1; letter-spacing: -.01em;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--gold {
  border-color: var(--accent-edge);
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover { background: var(--gold-light); border-color: var(--gold-text); }
.btn--ink { background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(13,32,59,.18); }
.btn--ink:hover { background: #17304f; }
.btn--quiet {
  border-color: var(--reg-line-strong, var(--line-strong));
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  color: var(--reg-ink, var(--ink));
}
.btn--quiet:hover { border-color: var(--reg-ink-soft, var(--ink-soft)); background: var(--paper); }
.btn--onnavy { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; }
.btn--onnavy:hover { background: rgba(255,255,255,.15); }
.btn--square { border-radius: var(--r-0); }
.btn--sm { min-height: 40px; padding: 0 15px; font-size: .78rem; }

.link-underline {
  display: inline-flex; align-items: center; gap: 12px; width: fit-content;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--reg-accent, var(--gold-dark));
  color: var(--reg-accent-text, var(--gold-text));
  font-size: .85rem; font-weight: 720;
  transition: gap var(--dur) var(--ease);
}
.link-underline:hover { gap: 18px; }

/* ---------- Статусы зрелости ---------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  justify-self: start; align-self: start; width: fit-content;
  min-height: 26px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .64rem; font-weight: 820; letter-spacing: .1em; text-transform: uppercase;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--live   { border-color: #b8dbcb; background: var(--status-live-bg);  color: var(--status-live); }
.status--build  { border-color: #b9d2ea; background: var(--status-build-bg); color: var(--status-build); }
.status--next   { border-color: #c9c0e6; background: var(--status-next-bg);  color: var(--status-next); }
.status--vision { border-color: #c3cedb; background: var(--status-vision-bg);color: var(--status-vision); }
.status--square { border-radius: var(--r-0); }
[data-register="navy"] .status {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: var(--navy-accent);
}

/* ---------- Карточки и поверхности внутри регистра ------------------------ */
.card {
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid var(--reg-card-line, var(--line));
  border-radius: var(--r-md);
  background: var(--reg-card, var(--paper));
}
.card--square { border-radius: var(--r-0); }
.card--paper { background: var(--paper); }
.card--raised { box-shadow: var(--shadow-sm); }

/* ---------- Продуктовое окно ---------------------------------------------- */
.window {
  position: relative;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.window--square { border-radius: var(--r-0); }
.window__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 2px 6px 11px;
  color: var(--ink-muted);
  font-size: .6rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.window__bar b { color: var(--ink); letter-spacing: 0; text-transform: none; font-size: .74rem; }
.window img {
  width: 100%;
  border: 1px solid var(--line-faint);
  border-radius: var(--r-sm);
  object-fit: cover; object-position: top center;
}
.window--square img { border-radius: 0; }
.window__note {
  position: absolute; padding: 15px 17px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper); box-shadow: var(--shadow-md);
  font-size: .74rem; line-height: 1.45;
}

/* ---------- Списки доказательств ------------------------------------------ */
.evidence-list { display: grid; gap: 12px; }
.evidence-list li {
  position: relative;
  padding-left: 24px;
  color: var(--reg-ink-soft, var(--ink-soft));
  font-size: .89rem; line-height: 1.55;
}
.evidence-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 11px; height: 1px;
  background: var(--reg-accent, var(--gold-dark));
}
.evidence-list--dense li { font-size: .84rem; }

.rule { height: 1px; border: 0; background: var(--reg-line, var(--line)); }
.rule--strong { background: var(--reg-line-strong, var(--line-strong)); }
.rule--gold { background: linear-gradient(90deg, var(--gold-dark), var(--gold-glow) 60%, transparent); }

/* ---------- Табличная строка данных --------------------------------------- */
.spec { display: grid; gap: 0; border-top: 1px solid var(--reg-line, var(--line)); }
.spec > div {
  display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
  gap: 20px; padding: 14px 0;
  border-bottom: 1px solid var(--reg-line, var(--line));
}
.spec dt { color: var(--reg-muted, var(--ink-muted)); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.spec dd { color: var(--reg-ink-soft, var(--ink-soft)); font-size: .88rem; }

/* ---------- Утилиты -------------------------------------------------------- */
.stack { display: grid; align-content: start; }
.stack--xs { gap: 8px; }  .stack--sm { gap: 14px; }
.stack--md { gap: 22px; } .stack--lg { gap: 34px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 1080px) {
  .section-head--split { grid-template-columns: 1fr; align-items: start; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- surfaces.css ---------- */
/* ============================================================================
   Rate Lab · reDesign iter8 · Библиотека поверхностей и фонов
   ----------------------------------------------------------------------------
   Каждая поверхность — самостоятельный кандидат дизайн-системы онлайн-админки.
   Классы применяются к секции; секция дополнительно объявляет data-register.

   Утверждено как варианты (iter5):
     .sf-blueprint       — чертёжные диагонали и узловые точки hero;
     .sf-columns         — вертикальные координатные линии для строгих блоков.
   Экспериментальные:
     .sf-tide, .sf-ledger, .sf-halo, .sf-mesh, .sf-strata, .sf-contour
   ========================================================================== */

.sf { position: relative; isolation: isolate; }
.sf > * { position: relative; z-index: 1; }
.sf::before,
.sf::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }

/* ---------------------------------------------------------------------------
   01 · Blueprint — утверждённый чертёжный фон hero из iter5.
   Диагональные оси, узловые точки, мягкое холодное свечение.
   ------------------------------------------------------------------------- */
.sf-blueprint::before {
  inset: 0;
  opacity: .78;
  background:
    linear-gradient(138deg, transparent 49.78%, rgba(60,136,195,.22) 49.88%, rgba(60,136,195,.22) 50.12%, transparent 50.22%),
    linear-gradient(42deg,  transparent 49.82%, rgba(60,136,195,.14) 49.92%, rgba(60,136,195,.14) 50.08%, transparent 50.18%),
    radial-gradient(circle at 23% 61%, #6faedd 0 2px, transparent 3px),
    radial-gradient(circle at 62% 18%, #c5ddeb 0 2px, transparent 3px),
    radial-gradient(circle at 82% 72%, #a8cce4 0 2px, transparent 3px),
    radial-gradient(circle at 41% 88%, #b6d3e8 0 2px, transparent 3px);
  background-repeat: no-repeat;
  background-size: 640px 640px, 640px 640px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 26% 4%, 26% 4%, 0 0, 0 0, 0 0, 0 0;
}
.sf-blueprint::after {
  inset: 0;
  background: radial-gradient(120% 78% at 74% 22%, rgba(212,174,121,.14), transparent 62%);
}

/* Тёплая настройка того же чертежа — mustard-редакция. */
.sf-blueprint--warm::before {
  background:
    linear-gradient(138deg, transparent 49.82%, rgba(173,131,74,.22) 49.9%, rgba(173,131,74,.22) 50.1%, transparent 50.18%),
    linear-gradient(42deg,  transparent 49.86%, rgba(173,131,74,.13) 49.94%, rgba(173,131,74,.13) 50.06%, transparent 50.14%),
    radial-gradient(circle at 23% 61%, #c89d61 0 2px, transparent 3px),
    radial-gradient(circle at 62% 18%, #e4cfae 0 2px, transparent 3px),
    radial-gradient(circle at 82% 72%, #d4ae79 0 2px, transparent 3px),
    radial-gradient(circle at 41% 88%, #ddc49c 0 2px, transparent 3px);
  background-repeat: no-repeat;
  background-size: 640px 640px, 640px 640px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 26% 4%, 26% 4%, 0 0, 0 0, 0 0, 0 0;
}

/* ---------------------------------------------------------------------------
   02 · Columns — утверждённые вертикальные координатные линии iter5.
   Используется точечно, на «строгих» блоках, не на всей странице.
   ------------------------------------------------------------------------- */
.sf-columns::before {
  inset: 0 var(--gutter);
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(8.3333% - 1px),
    rgba(122,153,176,.10) calc(8.3333% - 1px),
    rgba(122,153,176,.10) 8.3333%
  );
}
.sf-columns--tight::before {
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(6.25% - 1px),
    rgba(122,153,176,.085) calc(6.25% - 1px),
    rgba(122,153,176,.085) 6.25%
  );
}
/* Линии, затухающие сверху и снизу — менее «технично», больше воздуха. */
.sf-columns--fade::before {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
/* Одна усиленная координата — «ось блока». */
.sf-columns--axis::after {
  top: 0; bottom: 0;
  left: calc(var(--gutter) + 33.3333%);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

/* ---------------------------------------------------------------------------
   03 · Tide — мягкое «переливание» холодного в тёплое.
   Основной приём перехода creative ↔ blueprint.
   ------------------------------------------------------------------------- */
.sf-tide::before {
  inset: 0;
  background:
    radial-gradient(88% 62% at 8% 0%,   rgba(212,174,121,.20), transparent 60%),
    radial-gradient(76% 68% at 96% 78%, rgba(120,170,214,.16), transparent 62%);
}
.sf-tide--reverse::before {
  background:
    radial-gradient(88% 62% at 4% 88%,  rgba(120,170,214,.18), transparent 62%),
    radial-gradient(76% 70% at 92% 4%,  rgba(212,174,121,.22), transparent 60%);
}

/* ---------------------------------------------------------------------------
   04 · Ledger — редакционная бумага: горизонтальная линовка и поле слева.
   ------------------------------------------------------------------------- */
.sf-ledger::before {
  inset: 0;
  opacity: .5;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 43px,
    rgba(173,131,74,.10) 43px,
    rgba(173,131,74,.10) 44px
  );
}
.sf-ledger::after {
  top: 0; bottom: 0;
  left: calc(var(--gutter) + 54px);
  width: 1px;
  background: rgba(187,131,55,.35);
}

/* ---------------------------------------------------------------------------
   05 · Halo — одиночное горчичное свечение за фокусным объектом.
   ------------------------------------------------------------------------- */
.sf-halo::before {
  inset: 0;
  background: radial-gradient(46% 52% at var(--halo-x, 72%) var(--halo-y, 42%), rgba(212,174,121,.30), transparent 64%);
}

/* ---------------------------------------------------------------------------
   06 · Mesh — узловая сетка: точки на пересечениях координат.
   ------------------------------------------------------------------------- */
.sf-mesh::before {
  inset: 0;
  opacity: .72;
  background-image: radial-gradient(circle, rgba(122,153,176,.34) 0 1px, transparent 1.6px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(72% 68% at 50% 42%, #000, transparent 76%);
          mask-image: radial-gradient(72% 68% at 50% 42%, #000, transparent 76%);
}

/* ---------------------------------------------------------------------------
   07 · Strata — горизонтальные слои поверхностей, «разрез породы».
   Переход одной поверхности в другую внутри одного блока.
   ------------------------------------------------------------------------- */
.sf-strata::before {
  inset: 0;
  background: linear-gradient(180deg,
    var(--strata-1, #ffffff) 0%,
    var(--strata-1, #ffffff) 38%,
    var(--strata-2, #eef3f7) 38%,
    var(--strata-2, #eef3f7) 100%);
}
.sf-strata::after {
  left: 0; right: 0; top: 38%;
  height: 1px;
  background: var(--line-strong);
}

/* ---------------------------------------------------------------------------
   08 · Contour — топографические изолинии, самый «творческий» фон.
   ------------------------------------------------------------------------- */
.sf-contour::before {
  inset: 0;
  opacity: .5;
  background:
    repeating-radial-gradient(ellipse 140% 100% at 18% 108%,
      transparent 0 38px, rgba(173,131,74,.16) 38px 39px),
    repeating-radial-gradient(ellipse 130% 96% at 96% -12%,
      transparent 0 46px, rgba(96,146,190,.14) 46px 47px);
}

/* ---------------------------------------------------------------------------
   09 · Frosted — матовое стекло прилипающего header.
   Приём из ratelab-design-system-lab при отключённом --surface.
   ------------------------------------------------------------------------- */
.sf-frosted {
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
          backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
}
.sf-frosted--cool {
  background: color-mix(in srgb, var(--field) 58%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
          backdrop-filter: blur(22px) saturate(1.5);
}
.sf-frosted--warm {
  background: color-mix(in srgb, var(--warm) 52%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
          backdrop-filter: blur(22px) saturate(1.45);
  border-bottom-color: color-mix(in srgb, var(--warm-keyline) 42%, transparent);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sf-frosted { background: color-mix(in srgb, var(--paper) 96%, transparent); }
  .sf-frosted--cool { background: color-mix(in srgb, var(--field) 96%, transparent); }
  .sf-frosted--warm { background: color-mix(in srgb, var(--warm) 96%, transparent); }
}

/* ---------------------------------------------------------------------------
   10 · Navy depth — ограниченная тёмная сцена.
   ------------------------------------------------------------------------- */
.sf-navy::before {
  inset: 0;
  background:
    radial-gradient(72% 88% at 88% 8%, rgba(60,120,175,.28), transparent 62%),
    radial-gradient(58% 72% at 6% 96%, rgba(239,200,120,.10), transparent 60%);
}
.sf-navy--grid::after {
  inset: 0;
  opacity: .5;
  background: repeating-linear-gradient(
    90deg, transparent 0, transparent calc(8.3333% - 1px),
    rgba(255,255,255,.055) calc(8.3333% - 1px), rgba(255,255,255,.055) 8.3333%);
}

/* ---------------------------------------------------------------------------
   11 · Seam — верхний/нижний шов между двумя соседними регистрами.
   Тонкая горчичная или холодная линия, «переливание» поверхностей.
   ------------------------------------------------------------------------- */
.seam { position: relative; height: 0; }
.seam-gold::after,
.seam-cool::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
}
.seam-gold::after {
  background: linear-gradient(90deg, transparent, var(--gold-glow) 22%, var(--gold-dark) 50%, var(--gold-glow) 78%, transparent);
}
.seam-cool::after {
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
}

/* Переходной клин между блоками: одна поверхность «стекает» в следующую. */
.seam-wedge {
  height: clamp(48px, 6vw, 96px);
  background: linear-gradient(180deg, var(--seam-from, #ffffff), var(--seam-to, #eef3f7));
}
.seam-wedge--angled {
  height: clamp(56px, 7vw, 112px);
  background: var(--seam-to, #eef3f7);
  clip-path: polygon(0 0, 100% 42%, 100% 100%, 0 100%);
}

/* ---------------------------------------------------------------------------
   12 · Фокус и приглушение периферии.
   ------------------------------------------------------------------------- */
.peripheral { opacity: var(--peripheral); transition: opacity var(--dur) var(--ease); }
.focus-scope:hover .peripheral,
.focus-scope:focus-within .peripheral { opacity: 1; }
.focus-scope .focused { opacity: 1 !important; }

/* ---------- page.css ---------- */
/* ============================================================================
   Rate Lab · финальная страница · стили блоков
   ----------------------------------------------------------------------------
   Файл собран из стилей лабораторий iter8 — по одному разделу на утверждённый
   блок — и очищен от правил, которые на этой странице ни к чему не относятся.
   Проверка сделана браузером: каждый селектор искался на собранной странице
   через querySelectorAll. Правила состояний (:hover, .is-open, [aria-expanded])
   сохранены принудительно.

   Порядок разделов совпадает с порядком блоков на странице.
   ========================================================================== */

/* ############################################################################
   01 · Hero   (источник: blocks/css/hero.css)
   ######################################################################## */

/* ============================================================================
   iter8 · Блок 01 · Hero
   Постоянные условия всех вариантов:
     · заголовок слева, продуктовое окно справа (утверждено);
     · один primary CTA и максимум один secondary;
     · H1 идентичен во всех вариантах — сравниваются композиция и регистр.
   ========================================================================== */

.hero { position: relative; overflow: hidden; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
}

/* Русский H1 длинный: в hero дисплейный кегль ниже общего --t-display,
   иначе заголовок распадается на шесть строк по два слова. */

.hero h1 { font-size: clamp(2.4rem, 3.72vw, 3.95rem); letter-spacing: -.048em; line-height: 1.0; }

.hero__copy { position: relative; z-index: 2; max-width: 620px; }

.hero__copy h1 { margin-top: 20px; }

.hero__sub { margin-top: 24px; max-width: 540px; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px;
  color: var(--reg-muted, var(--ink-muted)); font-size: .76rem;
}

.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }

.hero__trust span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--reg-accent, var(--gold-dark));
}

/* ---------- Общая рельса «движение данных» под hero ------------------------- */

.hero__rail {
  display: grid; align-items: center;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  gap: 14px; margin-top: clamp(40px, 5vw, 72px);
  color: var(--reg-muted, var(--ink-muted));
  font-size: .74rem; font-weight: 700;
}

.hero__rail i { height: 1px; background: linear-gradient(90deg, var(--reg-line, var(--line)), var(--gold-light)); }

.hero__rail b { color: var(--reg-ink, var(--ink)); font-weight: 780; }

.hero__rail b.is-accent { color: var(--reg-accent-text, var(--gold-text)); }

/* ============================================================================
   H1 · Чертёжный горизонт — #eef3f7 + утверждённый blueprint iter5
   ========================================================================== */

.hero--horizon { padding-block: clamp(64px, 7.4vw, 116px) clamp(48px, 5vw, 76px); }

.hero--horizon .hero__stage { position: relative; }

.hero--horizon .window { border-radius: var(--r-md); }

.hero--horizon .window::before {
  content: ""; position: absolute; z-index: -1;
  inset: -22px 44px 40px -26px;
  border: 1px solid #b9cfdf; border-radius: var(--r-md);
}

/* ---------- Адаптив ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr !important; gap: clamp(32px, 5vw, 52px); }
  .hero__copy { max-width: none; }
  .hero__rail { grid-template-columns: 1fr; gap: 8px; justify-items: start; }
  .hero__rail i { width: 1px; height: 16px; margin-left: 4px; background: var(--line); }
}

@media (max-width: 620px) {
  .hero__actions .btn { width: 100%; }
}

/* ============================================================================
   H8 · Тёмный вход — единственный hero на #153653, свечение вместо теней
   ========================================================================== */

.hero--night .btn--quiet:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }

/* ############################################################################
   01a · Чертёжный фон   (источник: blocks/css/blueprint.css)
   ######################################################################## */

/* ============================================================================
   iter8 · Лаборатория 01a · Чертёжный фон hero
   ----------------------------------------------------------------------------
   Композиция hero утверждена: вариант H1 «Чертёжный горизонт».
   Здесь исследуется только одно — как именно исполнен чертёж под ней.

   Все шестнадцать исполнений сделаны на чистом CSS, без SVG и растровых
   изображений. Это принципиально: один и тот же класс работает и в витрине
   образцов, и под настоящим hero, поэтому образец нельзя «нарисовать красивее»,
   чем итоговый фон.

   Общие правила для любого исполнения:
     · фон всегда под содержимым и никогда не перекрывает текст;
     · линии не темнее rgba(...,.22) на холодном поле — иначе чертёж
       превращается в декор и спорит с продуктовым окном;
     · тёплое свечение допускается один раз и только за окном справа.
   ========================================================================== */

.bp { position: relative; isolation: isolate; }

.bp > * { position: relative; z-index: 1; }

.bp::before,
.bp::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}

/* Общие переменные исполнения — можно переопределить на секции */

.bp {
  --bp-cold: 94, 139, 178;   /* холодная линия */
  --bp-node: 60, 136, 195;   /* узловая точка */
  --bp-warm: 173, 131, 74;   /* горчичная линия */
  --bp-glow: 212, 174, 121;  /* тёплое свечение */
}

/* ============================================================================
   B8 · Триангуляция — геодезическая сетка из треугольников
   ========================================================================== */

.bp-8::before {
  background-image:
    radial-gradient(circle, rgba(var(--bp-node), .34) 0 1.8px, transparent 2.4px),
    repeating-linear-gradient(60deg,  transparent 0 27px, rgba(var(--bp-cold), .16) 27px 28px),
    repeating-linear-gradient(120deg, transparent 0 27px, rgba(var(--bp-cold), .16) 27px 28px),
    repeating-linear-gradient(0deg,   transparent 0 23px, rgba(var(--bp-cold), .11) 23px 24px);
  background-size: 56px 48px, auto, auto, auto;
  -webkit-mask-image: linear-gradient(105deg, #000 6%, rgba(0,0,0,.5) 46%, transparent 82%);
          mask-image: linear-gradient(105deg, #000 6%, rgba(0,0,0,.5) 46%, transparent 82%);
}

/* ============================================================================
   Витрина образцов
   ========================================================================== */

.bp-card:hover { border-color: var(--gold-light); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ############################################################################
   02 · Движение данных   (источник: blocks/css/flow.css)
   ######################################################################## */

/* ============================================================================
   iter8 · Блок 02 · Движение данных
   Данные рынка → Единый контекст → Обсуждение → Задача
   Основа: «Атлас решения» iter5, переосмысленный как движение данных,
   а не как перечисление этапов развития продукта.
   Общее ограничение: переключатель не может быть главным способом понять блок.
   ========================================================================== */

.flow { position: relative; overflow: hidden; }

.flow__head { margin-bottom: clamp(34px, 4vw, 62px); }

/* ============================================================================
   D1 · Горизонтальная координата — четыре состояния на одной оси
   ========================================================================== */

.flow--axis .stage:hover { background: color-mix(in srgb, var(--field) 60%, transparent); }

/* ============================================================================
   D3 · Один контекст, четыре выноски — окно в центре, аннотации по углам
   ========================================================================== */

.flow--orbit .callout:hover { border-color: var(--gold-light); box-shadow: var(--shadow-sm); }

/* ============================================================================
   РАУНД 3 · компоновка «квадрант» 2×2. Добавлена к D1–D8.
   ----------------------------------------------------------------------------
   Причина отдельного семейства: линейные компоновки 4 → 2 → 1 на узком экране
   теряют логику — четыре состояния превращаются в длинную ленту, где связь
   между соседями уже не читается. Сетка 2×2 сворачивается в одну колонку
   без перестановки: порядок 01 → 02 → 03 → 04 сохраняется на любой ширине.

   Общее правило семейства: DOM-порядок ячеек всегда 01, 02, 03, 04.
   Раскладка меняется только через grid-template-areas, поэтому на мобильном
   ничего не переставляется.
   ========================================================================== */

.quad {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.qcell {
  position: relative;
  display: grid; align-content: start; gap: 12px;
  padding: clamp(22px, 2.6vw, 36px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease);
}

.qcell:nth-child(2n) { border-right: 0; }

.qcell:nth-child(n + 3) { border-bottom: 0; }

.qcell:hover { background: #fbfdfe; }

.qcell.is-accent { background: #fdfaf4; }

.qcell.is-accent:hover { background: #fcf6ea; }

.qcell__num {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--ink-muted); font-family: var(--font-mono);
  font-size: .66rem; font-weight: 800; letter-spacing: .16em;
}

.qcell__num::after { content: ""; width: 26px; height: 1px; background: var(--line-strong); }

.qcell.is-accent .qcell__num { color: var(--gold-text); }

.qcell.is-accent .qcell__num::after { background: var(--gold-light); }

.qcell h3 { font-size: clamp(1.3rem, 2vw, 1.72rem); letter-spacing: -.038em; line-height: 1.12; }

.qcell.is-accent h3 { color: var(--gold-text); }

.qcell > p { color: var(--ink-soft); font-size: .89rem; line-height: 1.56; }

/* Крестообразный шов в центре сетки */

.quad--cross::after {
  content: ""; position: absolute; z-index: 2;
  left: 50%; top: 50%; width: 46px; height: 46px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--gold-dark), var(--gold-dark)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--gold-dark), var(--gold-dark)) 0 50% / 100% 1px no-repeat;
  opacity: .55;
  pointer-events: none;
}

/* ============================================================================
   D13 · Квадрант с кадрами — в каждой ячейке свой продуктовый кадр
   ========================================================================== */

.flow--quadshots .qcell { gap: 13px; }

.flow--quadshots .qcell .window { border-radius: 0; box-shadow: none; border-color: var(--line); padding: 7px; }

.flow--quadshots .qcell .window img { border-radius: 0; max-height: 168px; }

.flow--quadshots .qcell h3 { font-size: clamp(1.14rem, 1.7vw, 1.44rem); }

.flow--quadshots .qcell > p { font-size: .84rem; }

.flow--quadshots .quadshots__foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 2.4vw, 40px); align-items: center;
  margin-top: clamp(22px, 2.6vw, 34px); padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--line-strong);
}

.flow--quadshots .quadshots__foot p { color: var(--ink-soft); font-size: .9rem; max-width: 760px; }

.flow--quadshots .quadshots__foot b { color: var(--gold-text); }

/* ============================================================================
   Адаптив семейства: одна колонка без перестановки порядка
   ========================================================================== */

@media (max-width: 760px) {
  .quad { grid-template-columns: 1fr; }
  .quad--cross::after { display: none; }
  .qcell { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .qcell:last-child { border-bottom: 0 !important; }
  /* перекрёсток разворачивается в вертикальную цепочку */
  .flow--quadshots .qcell .window img { max-height: 210px; }
}

/* ############################################################################
   03 · Коллаборация   (источник: blocks/css/collab.css)
   ######################################################################## */

/* ============================================================================
   iter8 · Блок 03 · Коллаборация и работа с контекстом
   Механики, которые обязан показать блок:
     · создание обсуждения из точки, даты, диапазона и визуального сегмента;
     · выделение сегментов дат и shadow-связь якоря с главным окном;
     · повышение сообщения до задачи с сохранением переписки и якорей;
     · иконки смены статуса диалогов и сортировка для быстрого менеджмента;
     · раздел длинных задач: планирование, отслеживание, подзадачи.
   ========================================================================== */

.collab { position: relative; overflow: hidden; }

.collab__head { margin-bottom: clamp(30px, 3.6vw, 54px); }

/* --- Панель рабочего окна ------------------------------------------------- */

.pane {
  display: grid; grid-template-rows: auto 1fr;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}

.pane--square { border-radius: 0; }

.pane__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--field);
  color: var(--ink-muted);
  font-size: .64rem; font-weight: 780; letter-spacing: .1em; text-transform: uppercase;
}

.pane__bar b { color: var(--ink); font-size: .78rem; letter-spacing: -.01em; text-transform: none; }

/* --- Мини-график рынка ----------------------------------------------------- */

.chart { display: block; width: 100%; height: auto; }

/* --- Сообщение / диалог ------------------------------------------------------ */

.msg {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.msg + .msg { border-top: 0; }

.msg__ava {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--field); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .6rem; font-weight: 800;
}

.msg__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }

.msg__top b { font-size: .76rem; letter-spacing: -.01em; }

.msg__top time { color: var(--ink-muted); font-size: .62rem; font-family: var(--font-mono); }

.msg p { margin-top: 5px; color: var(--ink-soft); font-size: .74rem; line-height: 1.45; }

.msg__anchor {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  padding: 3px 8px;
  border: 1px solid var(--gold-light); background: #fbf6ec;
  color: var(--warm-ink); font-size: .62rem; font-weight: 720;
}

.msg__anchor::before { content: "⌖"; font-size: .78rem; line-height: 1; }

/* ============================================================================
   C2 · Четыре входа в контекст — четыре мини-сцены создания обсуждения
   ========================================================================== */

.collab--entries .entries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }

.collab--entries .entry {
  display: grid; grid-template-rows: auto auto 1fr;
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.collab--entries .entry:hover { border-color: var(--gold-light); box-shadow: var(--shadow-sm); transform: translateY(-2px); }

.collab--entries .entry__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--line-faint);
}

.collab--entries .entry__head span { color: var(--gold-text); font-family: var(--font-mono); font-size: .6rem; font-weight: 800; letter-spacing: .12em; }

.collab--entries .entry__head b { font-size: .9rem; letter-spacing: -.025em; }

.collab--entries .entry__scene { padding: 12px 15px; background: #fbfdfe; border-bottom: 1px solid var(--line-faint); }

.collab--entries .entry__body { padding: 14px 15px 18px; display: grid; gap: 10px; align-content: start; }

.collab--entries .entry__body p { color: var(--ink-muted); font-size: .77rem; line-height: 1.5; }

.collab--entries .entry__result {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--warm-ink); font-size: .68rem; font-weight: 740;
}

.collab--entries .entry__result::before { content: "→"; color: var(--gold-text); }

.collab--entries .entries__foot {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(22px, 3vw, 50px); align-items: center;
  margin-top: clamp(28px, 3.4vw, 48px); padding-top: clamp(26px, 3vw, 42px);
  border-top: 1px solid var(--line-strong);
}

/* ============================================================================
   C4 · Две скорости — быстрый менеджмент слева, длинные задачи справа
   ========================================================================== */

.collab--speeds .sortchip.is-active { border-color: var(--gold-text); background: #fbf6ec; color: var(--warm-ink); }

.collab--speeds .queue__row:hover { background: #fbfdfe; }

/* ---------- Адаптив ------------------------------------------------------------ */

@media (max-width: 1080px) {
  .collab--entries .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collab--entries .entries__foot { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .collab--entries .entries { grid-template-columns: 1fr; }
}

/* ############################################################################
   04 · Глубина   (источник: blocks/css/depth.css)
   ######################################################################## */

/* ============================================================================
   iter8 · Блок 04 · Глубина погружения — Digest и Workspace
   Содержательная основа: trust-first landing. Цветовое решение оценено
   положительно, форма карточек не утверждена.
   Утверждённая пара поверхностей: белые объекты на #eef3f7 и #eef3f7 на белом.
   Рамка смысла: это не free/pro и не simple/advanced, а два входа в один контекст.
   ========================================================================== */

.depth { position: relative; overflow: hidden; }

.depth__head { margin-bottom: clamp(30px, 3.6vw, 56px); }

/* Общая «рамка смысла» — строка-опровержение под заголовком */

.depth__frame {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 22px;
}

.depth__frame span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--reg-line, var(--line));
  color: var(--reg-muted, var(--ink-muted)); font-size: .74rem;
}

.depth__frame span b { color: var(--reg-ink, var(--ink)); font-weight: 760; }

.depth__frame span.is-true { border-color: var(--gold-text); color: var(--gold-text); }

/* ============================================================================
   M1 · Исходная пара карточек — светлая и тёмная, форма trust-first
   ========================================================================== */

.depth--pair .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }

.depth--pair .mode {
  display: flex; flex-direction: column;
  min-height: 380px; padding: clamp(28px, 3vw, 46px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--field);
}

.depth--pair .mode--dark { border-color: var(--navy); background: var(--navy); color: #fff; }

.depth--pair .mode__label { color: var(--gold-text); font-size: .64rem; font-weight: 830; letter-spacing: .13em; text-transform: uppercase; }

.depth--pair .mode--dark .mode__label { color: var(--navy-accent); }

.depth--pair .mode h3 { margin-top: clamp(40px, 5vw, 76px); font-size: clamp(2rem, 3.2vw, 3.1rem); letter-spacing: -.05em; line-height: 1; }

.depth--pair .mode > p { max-width: 520px; margin: 18px 0 26px; color: var(--ink-soft); line-height: 1.65; font-size: .95rem; }

.depth--pair .mode--dark > p { color: var(--navy-copy); }

.depth--pair .mode ul { margin-bottom: 26px; }

.depth--pair .mode--dark .evidence-list li { color: #c8d5e1; }

.depth--pair .mode--dark .evidence-list li::before { background: var(--navy-accent); }

.depth--pair .mode .link-underline { margin-top: auto; }

.depth--pair .mode--dark .link-underline { border-color: var(--navy-accent); color: var(--navy-accent); }

/* ---------- Адаптив ------------------------------------------------------------ */

@media (max-width: 1080px) {
  .depth--pair .pair { grid-template-columns: 1fr; }
}

/* ############################################################################
   05 · Роли   (источник: blocks/css/roles.css)
   ######################################################################## */

/* ============================================================================
   iter8 · Блок 05 · Для всей коммерческой команды
   Заголовок раздела утверждён. Первый сегмент — Revenue & Commercial team —
   признан удачным. Второй и третий сегменты остаются кандидатами, поэтому
   R5 показывает витрину всех вариантов состава.
   Ограничение аудита: роли различаются рабочим вопросом и глубиной входа,
   а не отдельным набором функций.
   ========================================================================== */

.roles { position: relative; overflow: hidden; }

.roles__head { margin-bottom: clamp(30px, 3.8vw, 58px); }

/* ============================================================================
   R1 · Три редакционные колонки на тёплом поле
   ========================================================================== */

.roles--columns .role:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(127,92,47,.14); }

/* ============================================================================
   R4 · Разный вес — первый сегмент доминирует, два других поддерживают
   ========================================================================== */

.roles--weight .weighted { display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(0, .83fr) minmax(0, .83fr); gap: clamp(14px, 1.8vw, 24px); align-items: stretch; }

.roles--weight .wrole {
  display: grid; align-content: start; gap: 15px;
  padding: clamp(22px, 2.6vw, 38px);
  border: 1px solid var(--warm-keyline); background: var(--paper);
}

.roles--weight .wrole--lead { background: var(--paper); box-shadow: 0 26px 56px rgba(127,92,47,.16); }

.roles--weight .wrole--lead h3 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }

.roles--weight .wrole--lead .wrole__job { font-size: .95rem; }

.roles--weight .wrole--lead > p { font-size: .95rem; }

.roles--weight .wrole h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.036em; line-height: 1.14; }

.roles--weight .wrole__tier { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--warm-line); }

.roles--weight .wrole__tier span { color: var(--warm-ink); font-family: var(--font-mono); font-size: .58rem; font-weight: 800; letter-spacing: .13em; }

.roles--weight .wrole__tier em { font-style: normal; color: var(--warm-accent); font-size: .66rem; }

.roles--weight .wrole__job { color: var(--warm-ink); font-size: .8rem; font-weight: 740; }

.roles--weight .wrole > p { color: var(--ink-soft); font-size: .86rem; line-height: 1.56; }

.roles--weight .wrole ul li::before { background: var(--warm-keyline); }

.roles--weight .wrole .window { border-radius: 0; box-shadow: none; border-color: var(--line); margin-top: 4px; }

.roles--weight .wrole .window img { border-radius: 0; max-height: 190px; }

.roles--weight .weighted__note {
  grid-column: 1 / -1; margin-top: 6px; padding-top: 20px;
  border-top: 1px solid var(--warm-line);
  color: var(--warm-accent); font-size: .82rem;
}

.roles--weight .weighted__note b { color: var(--warm-ink); }

/* ---------- Адаптив ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .roles--weight .weighted { grid-template-columns: 1fr; }
}

/* ############################################################################
   06 · Граница продукта   (источник: blocks/css/maturity.css)
   ######################################################################## */

/* ============================================================================
   iter8 · Блок 06 · Честная граница продукта
   Четыре стадии с явными статусами:
     Current            — Rate Shopper 2.0 + Revenue Workspace
     В разработке       — Сигналы (базовые и продвинутые + загрузка)
     Next               — AI внутри разговора
     Направление        — Vision: управляемое человеком, выполняемое AI
   Ограничение: карточки не могут быть единственным форматом, а Vision
   не должен читаться как четвёртая равная карточка «на будущее».
   ========================================================================== */

.maturity { position: relative; overflow: hidden; }

.maturity__head { margin-bottom: clamp(30px, 3.8vw, 58px); }

.maturity__head h2 b { color: var(--gold-text); font-weight: inherit; }

/* ############################################################################
   06a · Полоса «Направление»   (источник: blocks/css/vision-band.css)
   ######################################################################## */

/* ---------------------------------------------------------------------------
   Общее тёмное поле трёх стадий
   ------------------------------------------------------------------------- */

.vb .vb-field { display: grid; grid-template-columns: 1.34fr 1fr 1fr; border-top: 1px solid var(--navy-line); }

.vb .vb-stage {
  position: relative;
  padding: 30px clamp(16px, 1.8vw, 28px) clamp(26px, 2.8vw, 40px);
  border-right: 1px solid var(--navy-line);
}

.vb .vb-stage:first-child { padding-left: 0; }

.vb .vb-stage:last-child { border-right: 0; padding-right: 0; }

.vb .vb-stage__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }

.vb .vb-stage--current .vb-stage__bar { background: #3fbf90; box-shadow: 0 0 14px rgba(63,191,144,.5); }

.vb .vb-stage--build   .vb-stage__bar { background: #63a8e0; box-shadow: 0 0 14px rgba(99,168,224,.45); }

.vb .vb-stage--next    .vb-stage__bar { background: #9d8ee0; box-shadow: 0 0 14px rgba(157,142,224,.4); }

.vb .vb-stage--current { background: linear-gradient(180deg, rgba(63,191,144,.07), transparent 46%); }

.vb .vb-st {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 24px; padding: 0 10px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  font-size: .6rem; font-weight: 820; letter-spacing: .12em; text-transform: uppercase;
}

.vb .vb-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.vb .vb-st--current { color: #6fdcb0; }

.vb .vb-st--build { color: #8cc2f0; }

.vb .vb-st--next { color: #b8aaf0; }

.vb .vb-stage h3 { margin-top: 14px; font-size: clamp(1.2rem, 1.85vw, 1.56rem); letter-spacing: -.036em; line-height: 1.15; color: #fff; }

.vb .vb-stage__lead { margin-top: 12px; color: var(--navy-copy); font-size: .85rem; line-height: 1.55; }

.vb .vb-stage ul { margin-top: 18px; }

.vb .vb-stage .evidence-list li { color: #c2d2e0; }

.vb .vb-stage .evidence-list li::before { background: var(--navy-accent); }

.vb .vb-sub { margin-top: 18px; padding-top: 15px; border-top: 1px dashed var(--navy-line); }

.vb .vb-sub b { display: block; font-size: .82rem; color: #fff; letter-spacing: -.02em; }

.vb .vb-sub p { margin-top: 7px; color: #8ea4b8; font-size: .76rem; line-height: 1.48; }

/* ---------------------------------------------------------------------------
   Общая типографика полосы
   ------------------------------------------------------------------------- */

.vband { position: relative; }

.vband > * { position: relative; z-index: 1; }

.vband__label {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--navy-accent);
  font-size: .64rem; font-weight: 830; letter-spacing: .14em; text-transform: uppercase;
}

.vband__label::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }

.vband h3 {
  margin-top: 14px;
  font-size: clamp(1.72rem, 2.9vw, 2.72rem); font-weight: 780;
  letter-spacing: -.052em; line-height: 1.03; color: #fff;
}

.vband__lead { margin-top: 15px; color: var(--navy-copy); font-size: 1rem; line-height: 1.6; }

.vband__grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 3.4vw, 62px); align-items: center;
}

.vband .evidence-list li { color: #cfdbe6; }

.vband .evidence-list li::before { background: var(--navy-accent); }

/* ============================================================================
   V5 · Горчичная рамка — полоса как отдельный объект внутри тёмного поля
   ========================================================================== */

.vband--frame {
  margin-top: clamp(28px, 3.4vw, 50px);
  padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 44px);
  border: 1px solid var(--gold-dark);
  background: rgba(255,255,255,.045);
}

.vband--frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(64% 130% at 86% 0%, rgba(239,200,120,.10), transparent 66%);
}

.vband--frame .vband__grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }

/* ---------------------------------------------------------------------------
   Адаптив лаборатории 06a
   ------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .vb .vb-field { grid-template-columns: 1fr; }
  .vb .vb-stage { border-right: 0; padding-inline: 0; border-top: 1px solid var(--navy-line); }
  .vb .vb-stage:first-child { border-top: 0; }
  .vband__grid,
  .vband--frame .vband__grid { grid-template-columns: 1fr; }
}

/* ############################################################################
   07 · Тарифы   (источник: blocks/css/pricing.css)
   ######################################################################## */

/* ============================================================================
   iter8 · Блок 07 · Тарифы — Тест / Pro / Max
   Основа: pricing-блок trust-first landing, включая карточки.
   Добавлен уровень Max. Целевые цены: Pro $35/мес, Max $100/мес.
   Локализация: USD для en, UAH для uk и ru.
   ========================================================================== */

.pricing { position: relative; overflow: hidden; }

/* Переключатель валюты / сценария — общий примитив */

.switcher button.is-active { background: var(--ink); color: #fff; }

.price-note {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px;
  color: var(--reg-muted, var(--ink-muted)); font-size: .74rem;
}

.price-note b { color: var(--gold-text); }

/* P5 · Тёмный премиум — карточки на #153653 */

.pricing--night .switcher button.is-active { background: var(--navy-accent); color: var(--navy); }

/* ============================================================================
   РАУНД 5 · семейство «trust-first»: точная реконструкция формы тарифного блока
   из ../ratelab-trust-first-landing и её вариации.
   ----------------------------------------------------------------------------
   Что именно взято из оригинала:
     · двухколоночная раскладка pricing-layout — заголовок слева (.82fr),
       карточки справа (1.18fr), крупный зазор;
     · крупный редакционный h2 с letter-spacing -.06em;
     · скруглённые карточки radius 14 и min-height 470;
     · порядок внутри карточки: метка → крупная цена → примечание → список
       → кнопка во всю ширину → мелкая приписка;
     · маркер списка — средняя точка «·», а не тире;
     · выделенная карточка: тёплая заливка и золотая обводка.

   Что заменено на эквиваленты iter8 и почему:
     · #9c6b24 (champagne-deep оригинала) → --gold-dark #AD834A: близкий тон
       из горчичной линейки логотипа, уже принятый в системе;
     · заливка featured-карточки оригинала → #fdfaf4: тот же оттенок, уже
       используемый в стенде, и не совпадает с исключённым кремовым;
     · текст горчичной кнопки белый — по отдельному утверждению палитры.
   ========================================================================== */

.pricing--tf { --tf-paper: #ffffff; }

.pricing--tf .tf-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(30px, 5.4vw, 90px);
  align-items: start;
}

.pricing--tf .tf-head h2 {
  max-width: 820px; margin-top: 16px;
  font-size: clamp(2.1rem, 3.8vw, 4rem); font-weight: 750;
  letter-spacing: -.058em; line-height: 1.05;
  overflow-wrap: break-word;
}

.pricing--tf .tf-head .tf-lede { margin-top: 30px; max-width: 560px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; }

.pricing--tf .tf-head .price-note { margin-top: 22px; }

.tf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }

.tf-card {
  display: flex; flex-direction: column;
  min-height: 470px; padding: clamp(26px, 2.6vw, 34px);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--tf-paper);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.tf-card:hover { border-color: var(--line-strong); }

.tf-card--featured { border-color: #b88940; background: #fdfaf4; box-shadow: var(--shadow-sm); }

.tf-card--max { border-color: var(--line-strong); }

.tf-card > span {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--gold-text); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase;
}

.tf-card__flag {
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: .58rem; font-weight: 820; letter-spacing: .1em;
}

.tf-card--max .tf-card__flag { background: var(--ink); }

.tf-card > strong {
  margin-top: 30px; font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  letter-spacing: -.06em; line-height: 1;
}

/* единица измерения отдельной строкой: иначе в трёхколоночной сетке цена
   переносится по случайному месту, чего в двухколоночном оригинале не было */

.tf-card > strong small { display: block; margin-top: 5px; font-size: .4em; font-weight: 700; letter-spacing: -.01em; color: var(--ink-muted); }

.tf-card > p,
.tf-card > small { margin-top: 12px; color: var(--ink-muted); font-size: .74rem; line-height: 1.5; }

.tf-card ul {
  display: grid; gap: 12px; margin: 32px 0 auto; padding: 22px 0 30px;
  border-top: 1px solid var(--line); list-style: none;
}

/* Маркер оригинала — средняя точка. Сетка вместо inline-::before нужна,
   чтобы перенос строки не уезжал под маркер. */

.tf-card li {
  display: grid; grid-template-columns: 11px minmax(0, 1fr); gap: 10px;
  color: var(--ink-soft); font-size: .83rem; line-height: 1.45;
}

.tf-card li::before { content: "·"; color: var(--gold-text); font-weight: 900; line-height: 1.1; }

.tf-card li.is-inherit { color: var(--ink-muted); }

.tf-card li.is-inherit::before { color: var(--line-strong); }

.btn--wide { width: 100%; }

/* Общая строка под карточками */

.tf-shared {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  margin-top: 16px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--tf-paper);
  color: var(--ink-muted); font-size: .78rem;
}

.tf-shared b { color: var(--ink); font-weight: 740; }

/* ============================================================================
   P7 · Реконструкция trust-first — кремовая бумага карточек #fbfbfa
   ========================================================================== */

.pricing--tf7 { --tf-paper: #fbfbfa; }

/* ---------------------------------------------------------------------------
   Адаптив семейства
   ------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .pricing--tf .tf-layout { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 44px); }
}

@media (max-width: 900px) {
  .tf-grid { grid-template-columns: 1fr; }
  .tf-card { min-height: 0; }
}

/* ############################################################################
   08 · Подключение и вопросы   (источник: blocks/css/adoption.css)
   ######################################################################## */

/* ============================================================================
   iter8 · Блок 08 · Без PMS и вопросы перед стартом
   Утверждённый текст «Работает без PMS. Становится информативнее с вашими
   данными.» перенесён сюда из блока зрелости: формулировка признана удачной,
   но её прежнее место — заголовок maturity — освобождено.
   ========================================================================== */

.adoption { position: relative; overflow: hidden; }

/* ---------- Общий примитив FAQ ---------------------------------------------- */

.faq { display: grid; }

.faq details { border-bottom: 1px solid var(--reg-line, var(--line)); }

.faq details:first-child { border-top: 1px solid var(--reg-line-strong, var(--line-strong)); }

.faq summary {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 40px 18px 0;
  cursor: pointer; list-style: none;
  color: var(--reg-ink, var(--ink));
  font-size: .96rem; font-weight: 720; letter-spacing: -.024em;
  transition: color var(--dur-fast) var(--ease);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 1.5px solid var(--reg-accent, var(--gold-dark));
  border-bottom: 1.5px solid var(--reg-accent, var(--gold-dark));
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.faq summary:hover { color: var(--reg-accent-text, var(--gold-text)); }

.faq details > div {
  padding: 0 60px 20px 0;
  color: var(--reg-ink-soft, var(--ink-soft));
  font-size: .88rem; line-height: 1.62;
}

/* ---------- Два честных уровня ---------------------------------------------- */

.levels { display: grid; gap: clamp(12px, 1.6vw, 18px); }

.level {
  display: grid; gap: 11px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--reg-line, var(--line));
  background: var(--reg-card, var(--paper));
}

.level--now { border-left: 3px solid var(--status-live); }

.level--next { border-left: 3px solid var(--status-build); }

.level b { font-size: .96rem; letter-spacing: -.028em; }

.level p { color: var(--reg-ink-soft, var(--ink-soft)); font-size: .86rem; line-height: 1.56; }

/* ============================================================================
   A3 · Тёмный тезис, светлые ответы
   ========================================================================== */

.adoption--dark { padding-block: 0 !important; }

.adoption--dark .claim-plate {
  padding-block: clamp(44px, 5vw, 80px);
  background: var(--navy); color: #fff;
}

.adoption--dark .claim-plate__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 3.4vw, 62px); align-items: center; }

.adoption--dark .claim-plate h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); letter-spacing: -.052em; line-height: 1.04; }

.adoption--dark .claim-plate .eyebrow { color: var(--navy-accent); }

.adoption--dark .claim-plate .level { background: rgba(255,255,255,.055); border-color: var(--navy-line); }

.adoption--dark .claim-plate .level p { color: var(--navy-copy); }

.adoption--dark .answers { padding-block: clamp(44px, 5vw, 78px); background: var(--paper); }

.adoption--dark .answers__grid { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); }

/* ---------- Адаптив ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .adoption--dark .claim-plate__grid,
  .adoption--dark .answers__grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .faq summary { font-size: .9rem; padding-right: 34px; }
  .faq details > div { padding-right: 20px; }
}

/* ############################################################################
   09 · Рамка страницы   (источник: blocks/css/framing.css)
   ######################################################################## */

/* ---------- Демонстрационная сцена header ------------------------------------ */

.siteheader {
  position: absolute; z-index: 20; left: 0; right: 0; top: 0;
  min-height: 72px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(18px, 2.4vw, 40px);
  padding-inline: var(--gutter);
}

.siteheader__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.038em; font-size: 1.06rem; white-space: nowrap; }

.siteheader__brand img { width: 28px; height: 28px; }

.siteheader nav { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(14px, 2vw, 28px); }

.siteheader nav a { color: var(--ink-soft); font-size: .8rem; font-weight: 660; white-space: nowrap; }

.siteheader nav a:hover { color: var(--ink); }

.siteheader__actions { display: flex; align-items: center; gap: 10px; }

.langswitch { display: inline-flex; border: 1px solid var(--line-strong); }

.langswitch a { min-width: 34px; min-height: 32px; display: grid; place-items: center; color: var(--ink-muted); font-size: .66rem; font-weight: 800; border-right: 1px solid var(--line); }

.langswitch a:last-child { border-right: 0; }

.langswitch a.is-active { background: var(--ink); color: #fff; }

/* ---------- Финальный CTA ---------------------------------------------------- */

.finalcta { position: relative; overflow: hidden; }

.finalcta__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(26px, 3.6vw, 68px); align-items: center;
}

.finalcta h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); letter-spacing: -.055em; line-height: 1.02; }

.finalcta__lead { margin-top: 18px; max-width: 560px; font-size: 1.02rem; line-height: 1.6; }

.finalcta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.finalcta__facts { display: grid; gap: 0; }

.finalcta__facts > div { display: grid; gap: 4px; padding: 15px 0; border-bottom: 1px solid var(--reg-line, var(--line)); }

.finalcta__facts > div:first-child { border-top: 1px solid var(--reg-line-strong, var(--line-strong)); }

.finalcta__facts dt { color: var(--reg-accent-text, var(--gold-text)); font-size: .62rem; font-weight: 830; letter-spacing: .13em; text-transform: uppercase; }

.finalcta__facts dd { color: var(--reg-ink-soft, var(--ink-soft)); font-size: .86rem; }

.finalcta--navy { background: var(--navy); color: #fff; }

.finalcta--navy .finalcta__lead { color: var(--navy-copy); }

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

.sitefooter { padding-block: clamp(38px, 4vw, 62px) clamp(28px, 3vw, 44px); }

.sitefooter__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, .8fr)); gap: clamp(20px, 2.6vw, 44px); }

.sitefooter h3 { color: var(--reg-muted, var(--ink-muted)); font-size: .64rem; font-weight: 830; letter-spacing: .13em; text-transform: uppercase; }

.sitefooter ul { display: grid; gap: 9px; margin-top: 14px; }

.sitefooter li a { color: var(--reg-ink-soft, var(--ink-soft)); font-size: .82rem; }

.sitefooter li a:hover { color: var(--reg-accent-text, var(--gold-text)); }

.sitefooter__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: clamp(26px, 3vw, 44px); padding-top: 20px;
  border-top: 1px solid var(--reg-line, var(--line));
  color: var(--reg-muted, var(--ink-muted)); font-size: .74rem;
}

@media (max-width: 1080px) {
  .finalcta__grid { grid-template-columns: 1fr; }
  .sitefooter__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .siteheader { grid-template-columns: auto 1fr; }
  .siteheader nav { display: none; }
  .siteheader__actions { justify-content: flex-end; }
}

@media (max-width: 620px) {
  .sitefooter__grid { grid-template-columns: 1fr; }
  /* на узком экране в шапке остаётся только бренд и одно действие */
  .siteheader { min-height: 60px; gap: 12px; }
  .siteheader__brand { font-size: .98rem; }
  .siteheader__brand img { width: 24px; height: 24px; }
  .langswitch { display: none; }
  .siteheader .btn { min-height: 38px; padding: 0 13px; font-size: .74rem; }
}

/* ############################################################################
   09a · Косой переход к футеру   (источник: blocks/css/footer-transition.css)
   ######################################################################## */

/* ============================================================================
   iter8 · Лаборатория 09a · Косой переход к тёмному футеру
   ----------------------------------------------------------------------------
   Рамка страницы утверждена: шапка F1 «нейтральное стекло», финал F4 «тёмный».
   Одно изменение: прямой стык светлого блока и тёмного финала заменяется
   косым переходом. Здесь исследуется только форма этого перехода.

   Устройство одинаковое у всех вариантов и намеренно простое:
     · .slant — полоса высотой в 64–132px, залитая цветом ПРЕДЫДУЩЕГО блока;
     · .slant__cut — тёмная фигура с clip-path, залитая цветом СЛЕДУЮЩЕГО блока;
     · .slant__edge — та же фигура на 2px выше, залитая горчичным: даёт кромку.

   Ни одного изображения и ни одного SVG: срез — это clip-path, кромка —
   смещённая копия той же фигуры. Поэтому переход честно масштабируется
   вместе со страницей и не размывается на ретине.
   ========================================================================== */

.slant {
  position: relative;
  height: var(--slant-h, clamp(64px, 8vw, 132px));
  background: var(--slant-from, #ffffff);
  overflow: hidden;
}

.slant__edge,
.slant__cut { position: absolute; inset: 0; pointer-events: none; }

.slant__edge { background: var(--slant-line, var(--gold-dark)); transform: translateY(-2px); }

.slant__cut { background: var(--slant-to, var(--navy)); }

/* ============================================================================
   S1 · Сплошная диагональ вверх направо + горчичная кромка
   ========================================================================== */

.slant--rise .slant__edge,
.slant--rise .slant__cut { clip-path: polygon(0 100%, 100% 0, 100% 100%); }

/* ---------------------------------------------------------------------------
   Адаптив: на узком экране тот же угол съедал бы слишком много высоты
   ------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .slant { --slant-h: 46px; }
}

/* ============================================================================
   Оболочка страницы
   ----------------------------------------------------------------------------
   Всё, чего не было в лабораториях: прилипающая шапка настоящей страницы,
   мобильное меню, тёмный подвал и отступ якорей под высоту шапки.
   ========================================================================== */

body { background: var(--paper); }

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

   Поэтому знак поднят на 17.5% собственной высоты. Величина не подобрана на
   глаз: она получена из совпадения центров массы — отрисованного знака и
   глифов «Rate Lab», измеренных по пикселям. На высотах 28–34px нужная
   поправка держится в пределах 16.8–17.9%, так что доля от высоты работает
   на любом размере, а em шрифта — нет.

   Высота задаётся, ширина считается сама: пропорция знака 213:325, и жёсткий
   квадрат, оставшийся от прежнего фавикона, его сплющивал. */

.siteheader__brand img,
.sitefooter .siteheader__brand img {
  width: auto; height: 32px;
  transform: translateY(-17.5%);
}

/* ---------- Прилипающая шапка ------------------------------------------------ */

.siteheader--sticky { position: sticky; top: 0; left: auto; right: auto; z-index: 80; }

.section--anchor { scroll-margin-top: 84px; }

/* Кнопка мобильного меню. На десктопе её нет — навигация помещается в строку. */

.siteheader__burger {
  display: none;
  width: 42px; height: 38px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.siteheader__burger span[aria-hidden] {
  display: block; position: relative; width: 18px; height: 1px; margin: 0 auto;
  background: var(--ink);
}

.siteheader__burger span[aria-hidden]::before,
.siteheader__burger span[aria-hidden]::after { content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: var(--ink); }

.siteheader__burger span[aria-hidden]::before { top: -6px; }

.siteheader__burger span[aria-hidden]::after { top: 6px; }

.siteheader__burger[aria-expanded="true"] { border-color: var(--accent-edge); background: var(--accent); }

/* ---------- Карточка-доказательство под продуктовым окном --------------------
   На месте индекса «01.01» стоит компактная карточка: она называет статус
   кадра и то, что он доказывает. Ширина ограничена, потому что карточка не
   должна перекрывать сам график — она подпись, а не блок. */

.proof-callout {
  /* Карточка висит под правым нижним углом кадра и заходит на него только
     краем: нижняя часть графика содержательна, перекрывать её нельзя. */
  position: absolute; right: -18px; top: calc(100% - 20px); z-index: 2;
  max-width: 252px; padding: 12px 15px 13px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--gold-dark);
  box-shadow: var(--shadow-sm);
}

.proof-callout span {
  display: block;
  color: var(--gold-text);
  font-family: var(--font-mono); font-size: .58rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}

.proof-callout strong {
  display: block; margin-top: 6px;
  font-size: .92rem; font-weight: 760; letter-spacing: -.026em; line-height: 1.24;
}

.proof-callout p {
  margin-top: 6px;
  color: var(--ink-muted); font-size: .76rem; line-height: 1.45;
}

@media (min-width: 761px) {
  /* карточка выступает ниже кадра, поэтому рельса «Данные рынка → Задача»
     отодвигается: иначе выноска накрывает её правый конец */
  .hero--horizon .hero__rail { margin-top: clamp(76px, 8.4vw, 146px); }
}

@media (max-width: 760px) {
  /* на телефоне карточка перестаёт быть выноской и просто идёт под кадром */
  .proof-callout {
    position: static; max-width: none; margin-top: 14px;
    border-left-width: 2px;
  }
}

/* ---------- Подпись под мини-графиком ----------------------------------------
   Графики блока 03 вынесены в отдельные файлы, поэтому подпись оси («17.09»,
   «участок кривой») переехала из SVG в разметку: иначе её пришлось бы держать
   в трёх языковых копиях каждого файла. */

.chart__label {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .06em;
  color: var(--ink-muted);
}

/* ---------- Шапка над тёмными блоками ---------------------------------------
   Матовое стекло берёт цвет того, что под ним, но светлая заливка в 58% над
   #153653 всё равно остаётся светлой: получается светлая полоса, разрезающая
   тёмный блок. Поэтому у шапки есть второе состояние — тёмное стекло; класс
   вешает site.js, пока под шапкой проходит тёмная поверхность. */

.siteheader--onnavy {
  background: color-mix(in srgb, var(--navy) 66%, transparent);
  border-bottom-color: color-mix(in srgb, var(--navy-line) 80%, transparent);
}

.siteheader--onnavy .siteheader__brand { color: #fff; }

.siteheader--onnavy nav a { color: var(--navy-copy); }

.siteheader--onnavy nav a:hover { color: #fff; }

.siteheader--onnavy .langswitch { border-color: rgba(255,255,255,.28); }

.siteheader--onnavy .langswitch a { color: var(--navy-copy); border-right-color: rgba(255,255,255,.18); }

.siteheader--onnavy .langswitch a.is-active { background: #fff; color: var(--ink); }

.siteheader--onnavy .siteheader__burger {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
}

.siteheader--onnavy .siteheader__burger span[aria-hidden],
.siteheader--onnavy .siteheader__burger span[aria-hidden]::before,
.siteheader--onnavy .siteheader__burger span[aria-hidden]::after { background: #fff; }

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

.sitefooter { background: var(--navy-deep); color: #fff; }

.sitefooter .siteheader__brand { color: #fff; }

/* У знака нет инверсной версии: контур колбы тёмно-синий, и на глухом
   #0f2a43 подвала он почти пропадает. В шапке этой проблемы нет — там
   тёмное стекло заметно светлее. Поэтому в подвале знак ставится на
   собственную светлую подложку: логотип не перекрашивается, меняется
   только то, на чём он лежит. */

.sitefooter .siteheader__brand img {
  box-sizing: content-box;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
}

.sitefooter__about { margin-top: 12px; max-width: 320px; color: var(--navy-copy); }

.sitefooter h3 { color: var(--navy-accent); }

.sitefooter li a { color: #cfdbe6; }

.sitefooter li a:hover { color: var(--navy-accent); }

.sitefooter__legal { border-top-color: var(--navy-line); color: var(--navy-copy); }

/* ---------- Доступность: белый текст на горчичном ---------------------------
   Белый на #d5a34d даёт 2.29:1, на #AD834A — 3.43:1 при норме 4.5. Для
   горчичной КНОПКИ белый текст — утверждённое правило палитры, и здесь оно
   не трогается. Но индекс hero и метка «Основной» кнопками не являются:
   у них сохраняется тот же горчичный фон, а текст становится чернильным —
   4.76:1 и 7.13:1 соответственно. */

.tf-card__flag { color: var(--ink); }

.tf-card--max .tf-card__flag { color: #fff; }

/* ---------- Зоны нажатия на телефоне -----------------------------------------
   Ниже 760px всё, по чему нажимают пальцем, поднимается до 40px и выше.
   Это касается и текстовых ссылок в конце карточек: на десктопе их высота
   равна высоте строки, и на телефоне в них трудно попасть. */

@media (max-width: 760px) {
  .siteheader__brand { padding-block: 8px; }
  .siteheader__brand img { height: 26px; }
  .siteheader__burger { height: 42px; }
  .siteheader .btn { min-height: 42px; }
  .link-underline { display: inline-flex; align-items: center; min-height: 40px; }
  .faq summary { min-height: 44px; }
  .sitefooter li a,
  .sitefooter__locales a { display: inline-flex; align-items: center; min-height: 40px; }
  .sitefooter ul { gap: 0; }
}

/* ---------- Мобильная навигация ---------------------------------------------- */

@media (max-width: 1080px) {
  .siteheader { grid-template-columns: auto auto 1fr; }
  .siteheader__burger { display: block; }
  .siteheader nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line-strong);
    box-shadow: var(--shadow-sm);
  }
  .siteheader nav.is-open { display: flex; }
  /* развёрнутое меню над тёмным блоком тоже тёмное — иначе светлая панель
     наследует светлый текст тёмного режима шапки */
  .siteheader--onnavy nav { background: var(--navy); border-bottom-color: var(--navy-line); }
  .siteheader--onnavy nav a { border-bottom-color: rgba(255,255,255,.12); }
  .siteheader nav a { width: 100%; padding: 11px 0; border-bottom: 1px solid var(--line-faint); font-size: .92rem; }
  .siteheader nav a:last-child { border-bottom: 0; }
}