/* ==========================================================================
   КэшКвест — Tokens
   Тёплый монохром. Ни одного цветного акцента: иерархия строится инверсией,
   масштабом и плотностью. Зелёный неон убран полностью — он и делал сайт
   похожим на воронку.

   Все текстовые токены проверены расчётом на трёх подложках (--void/--slab/
   --rise): минимум 4.63:1 при норме 4.5. Референс в этом месте не копируем —
   там серый на сером ниже нормы.
   ========================================================================== */

:root {
  /* ---- Слои. Тёплый уголь: чуть в красную сторону, не синий «дизайнерский» --- */
  --void:   #0A0908;   /* дно документа */
  --pit:    #100E0D;   /* провал, тень между слоями */
  --slab:   #161413;   /* карточка */
  --rise:   #1E1B1A;   /* поднятая поверхность, hover */
  --edge:   #2A2624;   /* волосяная линия, граница */
  --edge-2: #3A3532;   /* активная граница */
  --edge-3: #4A443F;   /* сильная граница */

  /* ---- Чернила ---- */
  --ink:    #F7F5F3;   /* 18.3:1 — заголовки, инверсия */
  --ink-2:  #C9C4BF;   /* 11.5:1 — основной текст */
  --ink-3:  #A39D97;   /*  7.4:1 — вторичный */
  --ink-4:  #8A847E;   /*  5.4:1 — подписи, минимум шкалы */

  --on-ink: #0A0908;   /* текст на инвертированном (белом) — 18.3:1 */

  /* ---- Свет как материал: мягкое пятно внутри карточки. Не «свечение». ---- */
  --bloom:      radial-gradient(120px 90px at 50% 0%, rgba(255,251,245,.16), transparent 72%);
  --bloom-wide: radial-gradient(60% 80% at 50% 0%, rgba(255,251,245,.09), transparent 68%);
  --bloom-hot:  radial-gradient(140px 100px at 50% 0%, rgba(255,251,245,.26), transparent 70%);

  /* ---- Типографика: Golos Text — кириллица по рождению, плотный, с характером.
         Не Inter и не Manrope: это дефолт «сделай красиво». ---- */
  --font: 'Golos Text', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Гигантское обрезанное слово героя */
  --fs-crop: clamp(6rem, 21vw, 20rem);
  --fs-mega: clamp(3rem, 8vw, 6.5rem);
  --fs-h1:   clamp(2.4rem, 5.4vw, 4.2rem);
  --fs-h2:   clamp(1.85rem, 3.8vw, 2.9rem);
  --fs-h3:   clamp(1.18rem, 1.8vw, 1.45rem);
  --fs-h4:   1.02rem;
  --fs-lead: clamp(1rem, 1.4vw, 1.16rem);
  --fs-body: .95rem;
  --fs-sm:   .862rem;
  --fs-xs:   .775rem;
  --fs-mi:   .7rem;

  --lh-crop: .78;
  --lh-head: 1.06;
  --lh-body: 1.66;

  --tr-crop: -.055em;
  --tr-head: -.03em;
  --tr-flat: -.012em;
  --tr-caps: .14em;

  /* ---- Ритм ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(18px, 4.5vw, 40px);
  --bay:    clamp(72px, 11vw, 152px);
  --maxw:   1200px;
  --maxw-tight: 720px;
  --pill-h: 52px;

  /* ---- Форма: скругления сдержаннее, чем были. Брутализм не любит пухлость. --- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 26px; --r-pill: 999px;

  /* ---- Тени: глубокие и направленные, без цветного свечения ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 4px 14px rgba(0,0,0,.55), 0 12px 32px rgba(0,0,0,.4);
  --sh-3: 0 12px 32px rgba(0,0,0,.6), 0 32px 70px rgba(0,0,0,.45);
  --sh-4: 0 28px 64px rgba(0,0,0,.68), 0 64px 140px rgba(0,0,0,.55);
  --sh-in: inset 0 1px 0 rgba(255,251,245,.06);

  /* ---- Движение: тише и точнее, чем в цветной версии ---- */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io:  cubic-bezier(.65, 0, .35, 1);
  --e-sp:  cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: .16s; --t-mid: .32s; --t-slow: .58s; --t-lush: 1s;

  --z-crop: 1; --z-body: 2; --z-nav: 100; --z-menu: 110;
}

@media (prefers-contrast: more) {
  :root {
    --ink-3: #CFCAC5;
    --ink-4: #BAB4AE;
    --edge:   #423C38;
    --edge-2: #575049;
  }
}


/* ==========================================================================
   Base — сброс, полотно, типографика, доступность
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--pill-h) + var(--s7));
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--void);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Полотно: тёплая тьма со сдвигом плотности. Ни одного цветного пятна. --- */
.field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(64% 44% at 50% -4%,  rgba(255,251,245,.055), transparent 66%),
    radial-gradient(40% 34% at 96% 24%,  rgba(255,251,245,.022), transparent 62%),
    radial-gradient(52% 40% at 2% 78%,   rgba(255,251,245,.018), transparent 64%);
}

/* Зерно — тактильность плёнки, не «шум для красоты» */
.grain {
  position: fixed; inset: -50%; z-index: 0; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 8s steps(5) infinite;
  will-change: transform;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1.5%, 1%); }
  50%  { transform: translate(1%, -1.5%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

main, .shell { position: relative; z-index: var(--z-body); }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  color: var(--ink);
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* Инверсия вместо цвета — главный приём выделения во всей системе */
::selection { background: var(--ink); color: var(--on-ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: fixed; top: var(--s4); left: var(--s4); z-index: 999;
  padding: var(--s3) var(--s5);
  background: var(--ink); color: var(--on-ink);
  font-weight: 700; font-size: var(--fs-sm);
  border-radius: var(--r-pill);
  transform: translateY(-200%);
  transition: transform var(--t-mid) var(--e-out);
}
.skip-link:focus { transform: translateY(0); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--edge); border-radius: var(--r-pill); border: 2px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--edge-2); }

/* ---- Раскладка ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.bay { position: relative; padding-block: var(--bay); }
.bay-top-0 { padding-top: 0; }

/* ---- Типографические утилиты ---- */
.t-ink  { color: var(--ink); }
.mono   { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Надзаголовок: капитель с трекингом. Без пилюли и без пульсирующей точки —
   это были клише. Осталась одна волосяная линия слева. */
.label {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: var(--fs-mi); font-weight: 400;
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--ink-4);
}
.label::before {
  content: ''; width: 28px; height: 1px; background: var(--edge-3);
}

/* Денежная сумма: выделяется МАСШТАБОМ и моноширинным, а не краской.
   В монохроме это единственный честный способ. */
.sum {
  font-family: var(--mono); font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   ГРАНИЦА ЧИТАЕМОСТИ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .grain { animation: none; opacity: .03; }
  [data-rise], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   Components — пилюля-навигация, инверсные кнопки, двухзонные карточки
   ========================================================================== */

/* ---------------- Иконки ---------------- */
.ico { width: 1.15em; height: 1.15em; flex: none; stroke-width: 1.75; }
.ico-sm { width: .95em; height: .95em; }
.ico-lg { width: 1.5em; height: 1.5em; }

/* Кружок-галочка как в референсе: тонкая обводка, ничего лишнего */
.tick {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--edge-2);
  color: var(--ink-2);
  background: var(--rise);
}
.tick .ico { width: 13px; height: 13px; }

/* ---------------- Кнопки ---------------- */
.btn {
  --py: 14px; --px: 24px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  padding: var(--py) var(--px);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--tr-flat);
  border-radius: var(--r-pill);
  white-space: nowrap; overflow: hidden;
  transition: transform var(--t-mid) var(--e-sp), background var(--t-fast) linear,
              color var(--t-fast) linear, border-color var(--t-fast) linear,
              box-shadow var(--t-mid) var(--e-out);
}
.btn-lg { --py: 17px; --px: 34px; font-size: .96rem; }
.btn-sm { --py: 10px; --px: 17px; font-size: var(--fs-xs); }
.btn-block { display: flex; width: 100%; }

/* ГЛАВНЫЙ приём иерархии: инверсия. Белая кнопка среди тёмных.
   Акцент без единой капли краски. */
.btn-inv {
  background: var(--ink); color: var(--on-ink);
  font-weight: 700;
  box-shadow: var(--sh-2);
}
.btn-inv:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.btn-inv:active { transform: translateY(0) scale(.98); }

.btn-dark {
  background: var(--rise); color: var(--ink);
  border: 1px solid var(--edge-2);
  box-shadow: var(--sh-1);
}
.btn-dark:hover { background: var(--edge); border-color: var(--edge-3); }
.btn-dark:active { transform: scale(.98); }

.btn .ico-arrow { transition: translate var(--t-mid) var(--e-out); }
.btn:hover .ico-arrow { translate: 3px 0; }

/* ---------------- Метки ---------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: var(--fs-mi); font-weight: 400;
  letter-spacing: .04em; white-space: nowrap;
  border: 1px solid var(--edge); color: var(--ink-3);
}
.tag-dim { color: var(--ink-4); }

/* ВОЗРАСТНОЙ БЕЙДЖ 18+ — инверсия, по вашему решению.
   Единственный инверсный элемент в потоке контента, поэтому глаз ловит его
   первым. Работает без цвета: 18.3:1 контраст. */
.tag-18 {
  background: var(--ink); color: var(--on-ink);
  border-color: var(--ink); font-weight: 700; letter-spacing: .06em;
}
.tag-14 { border-color: var(--edge-2); color: var(--ink-3); }

/* ---------------- ПИЛЮЛЯ-НАВИГАЦИЯ (по референсу) ----------------
   Плавает по центру, не растянута на всю ширину. Читается как приложение. */
.pill-nav {
  position: fixed; top: var(--s5); left: 50%; translate: -50% 0;
  z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--s1);
  height: var(--pill-h); padding: 5px 5px 5px var(--s3);
  border-radius: var(--r-pill);
  background: rgba(22,20,19,.86);
  border: 1px solid var(--edge);
  box-shadow: var(--sh-3), var(--sh-in);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
  max-width: calc(100vw - var(--s6));
}
.pill-nav[data-lifted] { border-color: var(--edge-2); box-shadow: var(--sh-4), var(--sh-in); }

.pill-mark {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--on-ink);
  font-weight: 800; font-size: .92rem;
  margin-right: var(--s2);
}

.pill-links { display: flex; align-items: center; gap: 1px; }
.pill-links a {
  position: relative; padding: 9px 13px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3);
  border-radius: var(--r-pill);
  white-space: nowrap;              /* «Как это работает» не должно ломаться */
  transition: color var(--t-fast) linear, background var(--t-fast) linear;
}
.pill-links a:hover { color: var(--ink); background: var(--rise); }
/* Активная ссылка — подчёркивание волосяной линией, как в референсе */
.pill-links a[aria-current="page"] { color: var(--ink); }
.pill-links a[aria-current="page"]::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1px; background: var(--ink);
}

.pill-cta { margin-left: var(--s2); }

.pill-burger {
  display: none; width: 42px; height: 42px; flex: none;
  border-radius: 50%; background: var(--rise); border: 1px solid var(--edge-2);
  place-items: center; gap: 4px;
}
.pill-burger i {
  display: block; width: 15px; height: 1.5px; border-radius: 2px; background: var(--ink);
  transition: transform var(--t-mid) var(--e-out), opacity var(--t-fast) linear;
}
.pill-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.pill-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.pill-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Мобильная выдвижная панель */
.drawer {
  position: fixed; top: calc(var(--pill-h) + var(--s5) + var(--s3));
  left: var(--gutter); right: var(--gutter); z-index: var(--z-menu);
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: rgba(16,14,13,.97);
  border: 1px solid var(--edge-2);
  box-shadow: var(--sh-4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0; translate: 0 -12px; visibility: hidden;
  transition: opacity var(--t-mid) var(--e-out), translate var(--t-mid) var(--e-out),
              visibility 0s var(--t-mid);
}
.drawer[data-open] {
  opacity: 1; translate: 0 0; visibility: visible;
  transition: opacity var(--t-mid) var(--e-out), translate var(--t-mid) var(--e-out);
}
.drawer a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s3); font-size: 1rem; font-weight: 500;
  color: var(--ink-2); border-bottom: 1px solid var(--edge);
}
.drawer a:last-of-type { border-bottom: none; }
.drawer .btn { margin-top: var(--s4); }

/* ---------------- ДВУХЗОННАЯ КАРТОЧКА (по референсу) ----------------
   Верхняя зона — «шапка» с крупной цифрой и мягким световым пятном.
   Волосяная линия. Нижняя зона — список. Внизу кнопка.
   Структура вместо «иконка → заголовок → абзац». */
.card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--slab);
  border: 1px solid var(--edge);
  overflow: hidden;
  box-shadow: var(--sh-2);
  transition: transform var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out),
              box-shadow var(--t-mid) var(--e-out);
}
.card:hover { transform: translateY(-4px); border-color: var(--edge-2); box-shadow: var(--sh-3); }

.card-top { position: relative; padding: var(--s6) var(--s6) var(--s5); overflow: hidden; }
/* Свет как материал: пятно сверху внутри карточки */
.card-top::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--bloom); opacity: .8;
  transition: opacity var(--t-mid) var(--e-out);
}
.card:hover .card-top::before { opacity: 1; }
.card-top > * { position: relative; z-index: 1; }

.card-kicker {
  font-size: var(--fs-sm); color: var(--ink-3); font-weight: 500;
  margin-bottom: var(--s4);
}
.card-figure {
  font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 700;
  letter-spacing: var(--tr-head); color: var(--ink); line-height: 1;
  display: flex; align-items: baseline; gap: 3px;
}
.card-figure .unit { font-size: .44em; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }

.card-body { padding: var(--s5) var(--s6); flex: 1; border-top: 1px solid var(--edge); }
.card-list { display: flex; flex-direction: column; gap: var(--s4); }
.card-list li { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); color: var(--ink-2); }

.card-foot { padding: var(--s5) var(--s6) var(--s6); }

/* Выделенная карточка: инверсная кнопка + чуть светлее подложка.
   Иерархия без цвета. */
.card-lead { border-color: var(--edge-2); background: var(--rise); }
.card-lead .card-top::before { background: var(--bloom-hot); }

/* ---------------- Секции ---------------- */
.head { max-width: 640px; margin-bottom: clamp(36px, 5.5vw, 64px); }
.head-mid { margin-inline: auto; text-align: center; }
.head h2 { font-size: var(--fs-h2); margin-top: var(--s4); }
.head .lede { font-size: var(--fs-lead); color: var(--ink-3); margin-top: var(--s4); }

/* ---------------- Технические выноски (регистр чертежа) ----------------
   Тонкие линии с подписью-пилюлей — как «Plans» в референсе. */
.caliper { position: relative; text-align: center; padding-block: var(--s7); }
.caliper::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: linear-gradient(180deg, transparent, var(--edge) 22%, var(--edge) 78%, transparent);
}
.caliper-tag {
  position: relative; display: inline-flex; align-items: center; gap: var(--s2);
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--slab); border: 1px solid var(--edge-2);
  font-family: var(--mono); font-size: var(--fs-mi); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--ink-3);
}

/* Горизонтальная измерительная линия с засечками */
.rule {
  position: relative; height: 1px; background: var(--edge);
  margin-block: var(--s6);
}
.rule::before, .rule::after {
  content: ''; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--edge-2);
}
.rule::before { left: 0; }
.rule::after { right: 0; }

/* ---------------- Футер ---------------- */
.foot { border-top: 1px solid var(--edge); padding-block: var(--s8) var(--s6); margin-top: var(--s8); }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--s7); margin-bottom: var(--s7); }
.foot-brand { display: flex; align-items: center; gap: var(--s3); font-weight: 700; font-size: 1.02rem; color: var(--ink); letter-spacing: var(--tr-head); }
.foot-brand .mk {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--on-ink); font-weight: 800; font-size: .84rem;
}
.foot-about { font-size: var(--fs-sm); color: var(--ink-4); max-width: 320px; margin-top: var(--s4); }
.foot-col h4 {
  font-family: var(--mono); font-size: var(--fs-mi); text-transform: uppercase;
  letter-spacing: var(--tr-caps); color: var(--ink-4); margin-bottom: var(--s4); font-weight: 400;
}
.foot-col a {
  display: block; padding: 6px 0; font-size: var(--fs-sm); color: var(--ink-2);
  transition: color var(--t-fast) linear, translate var(--t-fast) var(--e-out);
}
.foot-col a:hover { color: var(--ink); translate: 3px 0; }
.foot-base {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  flex-wrap: wrap; padding-top: var(--s5); border-top: 1px solid var(--edge);
  font-family: var(--mono); font-size: var(--fs-mi); color: var(--ink-4);
}
.foot-legal {
  margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--edge);
  font-size: var(--fs-xs); color: var(--ink-4); line-height: 1.62; max-width: 880px;
}

/* Пометка «ЗАПОЛНИТЬ» — заметна инверсной рамкой, не цветом */
.fillme {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-xs);
  background: transparent; border: 1px dashed var(--ink-3);
  color: var(--ink); font-family: var(--mono); font-size: .84em; font-weight: 400;
  white-space: nowrap;
}

/* ---------------- Наверх ---------------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--slab); border: 1px solid var(--edge-2); color: var(--ink-2);
  box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity var(--t-mid) var(--e-out), translate var(--t-mid) var(--e-out),
              visibility 0s var(--t-mid), background var(--t-fast) linear, color var(--t-fast) linear;
}
.to-top[data-show] {
  opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity var(--t-mid) var(--e-out), translate var(--t-mid) var(--e-out),
              background var(--t-fast) linear, color var(--t-fast) linear;
}
.to-top:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* ---------------- Адаптив ---------------- */
@media (max-width: 900px) {
  .pill-links, .pill-cta { display: none; }
  .pill-burger { display: grid; }
  .pill-nav { padding-right: 5px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-base { justify-content: center; text-align: center; }
}


/* ==========================================================================
   Motion — монохромная партитура
   Тише и точнее цветной версии: масса, слои, прочерчивание линий, инверсия.
   Никаких частиц, свечений, пульсаций — это были клише.

   Правила прежние: анимируем только transform/opacity (GPU).
   Текст не двигается в момент чтения. Контент виден даже если JS упал.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Появление. Скрываем ТОЛЬКО когда JS жив (html[data-motion]).
   -------------------------------------------------------------------------- */
html[data-motion] [data-rise] {
  opacity: 0; translate: 0 22px;
  transition: opacity var(--t-slow) var(--e-out), translate var(--t-slow) var(--e-out);
}
html[data-motion] [data-rise].is-in { opacity: 1; translate: 0 0; }

html[data-motion] [data-stagger] > * {
  opacity: 0; translate: 0 18px;
  transition: opacity var(--t-slow) var(--e-out), translate var(--t-slow) var(--e-out);
}
html[data-motion] [data-stagger].is-in > * { opacity: 1; translate: 0 0; }
html[data-motion] [data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
html[data-motion] [data-stagger].is-in > *:nth-child(2) { transition-delay: 70ms; }
html[data-motion] [data-stagger].is-in > *:nth-child(3) { transition-delay: 140ms; }
html[data-motion] [data-stagger].is-in > *:nth-child(4) { transition-delay: 210ms; }
html[data-motion] [data-stagger].is-in > *:nth-child(5) { transition-delay: 280ms; }
html[data-motion] [data-stagger].is-in > *:nth-child(6) { transition-delay: 350ms; }
html[data-motion] [data-stagger].is-in > *:nth-child(7) { transition-delay: 420ms; }
html[data-motion] [data-stagger].is-in > *:nth-child(8) { transition-delay: 490ms; }

/* Строки реестра прочерчиваются по очереди — быстрый шаг, их много */
html[data-motion] [data-scan] > * {
  opacity: 0; translate: -10px 0;
  transition: opacity .42s var(--e-out), translate .42s var(--e-out);
}
html[data-motion] [data-scan].is-in > * { opacity: 1; translate: 0 0; }
html[data-motion] [data-scan].is-in > *:nth-child(1)  { transition-delay: 0ms; }
html[data-motion] [data-scan].is-in > *:nth-child(2)  { transition-delay: 28ms; }
html[data-motion] [data-scan].is-in > *:nth-child(3)  { transition-delay: 56ms; }
html[data-motion] [data-scan].is-in > *:nth-child(4)  { transition-delay: 84ms; }
html[data-motion] [data-scan].is-in > *:nth-child(5)  { transition-delay: 112ms; }
html[data-motion] [data-scan].is-in > *:nth-child(6)  { transition-delay: 140ms; }
html[data-motion] [data-scan].is-in > *:nth-child(7)  { transition-delay: 168ms; }
html[data-motion] [data-scan].is-in > *:nth-child(8)  { transition-delay: 196ms; }
html[data-motion] [data-scan].is-in > *:nth-child(n+9) { transition-delay: 220ms; }

/* --------------------------------------------------------------------------
   2. Гигантское слово въезжает массой. Один раз, потом стоит.
   -------------------------------------------------------------------------- */
html[data-motion] .crop {
  opacity: 0; translate: 0 -26px; scale: 1.04;
  transition: opacity 1s var(--e-out), translate 1.15s var(--e-out), scale 1.15s var(--e-out);
}
html[data-motion] .crop.is-in { opacity: 1; translate: 0 0; scale: 1; }

/* --------------------------------------------------------------------------
   3. Scroll-driven на нативном CSS: параллакс слоёв героя.
   Слово уезжает медленнее контента — отсюда ощущение глубины.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Индикатор прочитанного: волосяная линия под пилюлей */
    .read-bar {
      position: fixed; top: 0; left: 0; right: 0; height: 2px;
      z-index: var(--z-nav); transform-origin: 0 50%;
      background: var(--ink);
      animation: bar linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes bar { from { scale: 0 1; } to { scale: 1 1; } }

    /* Слово героя дрейфует при скролле */
    .crop {
      animation: crop-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 70vh;
    }
    @keyframes crop-drift {
      to { translate: 0 -14%; opacity: .35; }
    }

    [data-depth] {
      animation: depth linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes depth {
      from { translate: 0 var(--from, 28px); }
      to   { translate: 0 var(--to, -28px); }
    }
  }
}

/* --------------------------------------------------------------------------
   4. Магнит: трансформ на обёртке, не на кнопке — не конфликтует с :active
   -------------------------------------------------------------------------- */
.magnet { display: inline-block; }
.magnet-pull {
  display: inline-block;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate var(--t-mid) var(--e-out);
}

/* --------------------------------------------------------------------------
   5. Инверсия по курсору: тёмная кнопка становится белой.
   Главный интерактивный жест монохромной системы.
   -------------------------------------------------------------------------- */
.btn-dark, .chip { position: relative; }
.btn-dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  scale: 0 1; transform-origin: 0 50%;
  transition: scale var(--t-mid) var(--e-out);
}
@media (hover: hover) {
  .btn-dark:hover { color: var(--on-ink); border-color: var(--ink); }
  .btn-dark:hover::before { scale: 1 1; }
}

/* Волна клика — монохромная */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,251,245,.28), transparent 68%);
  scale: 0; opacity: .8;
  animation: ripple-out .6s var(--e-out) forwards;
}
.btn-inv .ripple { background: radial-gradient(circle, rgba(10,9,8,.22), transparent 68%); }
@keyframes ripple-out { to { scale: 2.6; opacity: 0; } }

/* --------------------------------------------------------------------------
   6. Прочерчивание технических линий — регистр чертежа
   -------------------------------------------------------------------------- */
html[data-motion] .rule { transform-origin: 0 50%; scale: 0 1; transition: scale 1s var(--e-out); }
html[data-motion] .rule.is-in { scale: 1 1; }

html[data-motion] .caliper::before { scale: 1 0; transform-origin: 50% 0; transition: scale .8s var(--e-out); }
html[data-motion] .caliper.is-in::before { scale: 1 1; }

/* --------------------------------------------------------------------------
   7. Счётчики
   -------------------------------------------------------------------------- */
.tally { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   8. Переходы между страницами
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .26s var(--e-io) both; }
  ::view-transition-new(root) { animation: vt-in .38s var(--e-out) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in  { from { opacity: 0; } }
}

/* --------------------------------------------------------------------------
   9. ГРАНИЦА: мобильные — облегчённая партитура.
   Продукт живёт в Телеграме, большинство трафика мобильное.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .grain { display: none; }
  [data-depth] { animation: none !important; }
  .crop { animation: none !important; }
  html[data-motion] [data-scan] > * { transition-duration: .3s; }
}


/* ==========================================================================
   Sections — слоёный герой, реестр заданий, способы вывода, FAQ, страницы
   ========================================================================== */

/* ==========================================================================
   ГЕРОЙ: гигантское обрезанное слово, перекрытое слоем контента.
   Главная композиционная идея референса — глубина слоями, а не блоки друг
   под другом. Никакого макета телефона справа.
   ========================================================================== */
/* Отступ сверху: пилюля-навигация плавает над потоком, поэтому герою нужен
   зазор = высота пилюли + её top-отступ + воздух. Иначе слово лезет под неё. */
.hero {
  position: relative;
  padding-top: calc(var(--pill-h) + var(--s5) + var(--s8));
  padding-bottom: var(--bay);
  overflow: hidden;
}

/* Слово, обрезанное сверху. Живёт ПОД контентом.
   Кегль подобран так, чтобы слово влезало по ширине: обрезка идёт сверху,
   а не по бокам — иначе читается как ошибка вёрстки, а не как приём. */
.crop {
  position: relative; z-index: var(--z-crop);
  font-size: min(var(--fs-crop), 15.5vw);
  line-height: var(--lh-crop);
  letter-spacing: var(--tr-crop);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  /* Обрезка сверху: слово выходит за границу секции */
  margin-top: calc(min(var(--fs-crop), 15.5vw) * -.34);
  user-select: none;
  /* Гаснет книзу. КРИТИЧНО: текст поверх слова не ставим вообще —
     он становится нечитаемым. Слово перекрывает только плотная панель. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.2) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.2) 78%, transparent 100%);
}
.crop-sub {
  position: relative; z-index: var(--z-body);
  text-align: center;
  font-family: var(--mono); font-size: var(--fs-mi);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--ink-4);
  margin-top: var(--s5);
}

/* Слой контента. Стоит ПОД словом, не поверх него: заголовок обязан читаться.
   На слово наезжает только плотная панель с цифрами (см. .figures). */
.hero-deck {
  position: relative; z-index: var(--z-body);
  margin-top: var(--s7);
}
.hero-head { max-width: 620px; margin-inline: auto; text-align: center; margin-bottom: var(--s8); }
.hero-head h1 { font-size: var(--fs-h1); margin-bottom: var(--s5); }
.hero-head .lede { font-size: var(--fs-lead); color: var(--ink-3); }
.hero-acts { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-top: var(--s6); }
.hero-fine {
  margin-top: var(--s5); text-align: center;
  font-size: var(--fs-xs); color: var(--ink-4);
}

/* Полоса подтверждённых цифр: три ячейки, разделённые волосяными линиями */
.figures {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--edge); border-radius: var(--r-lg);
  background: var(--slab);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.figure { padding: var(--s6) var(--s5); text-align: center; border-left: 1px solid var(--edge); }
.figure:first-child { border-left: none; }
.figure .v {
  font-family: var(--mono); font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -.03em;
}
.figure .v .pre { font-family: var(--font); font-size: .5em; font-weight: 500; color: var(--ink-4); letter-spacing: 0; display: block; margin-bottom: 4px; }
.figure .k { font-size: var(--fs-xs); color: var(--ink-4); margin-top: var(--s3); line-height: 1.5; }

/* ==========================================================================
   РЕЕСТР ЗАДАНИЙ — плотная таблица вместо сетки карточек.
   Регистр инженерного реестра: выравнивание по сетке, моноширинные суммы,
   волосяные линии между строками. Так шаблоны каталог не показывают.
   ========================================================================== */
.registry {
  border: 1px solid var(--edge); border-radius: var(--r-lg);
  background: var(--slab); overflow: hidden;
  box-shadow: var(--sh-2);
}
.reg-head {
  display: grid; grid-template-columns: 1fr 108px 96px 128px;
  gap: var(--s4); padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--edge);
  background: var(--pit);
  font-family: var(--mono); font-size: var(--fs-mi);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4);
}
.reg-head .pay-col { text-align: right; }

.reg-row {
  display: grid; grid-template-columns: 1fr 108px 96px 128px;
  gap: var(--s4); align-items: center;
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--edge);
  transition: background var(--t-fast) linear;
  position: relative;
}
.reg-row:last-child { border-bottom: none; }
.reg-row:hover { background: var(--rise); }
.reg-row:hover .reg-title { color: var(--ink); }
.reg-row:hover .reg-go { opacity: 1; translate: 0 0; }

.reg-main { min-width: 0; }
.reg-title {
  font-size: var(--fs-body); font-weight: 600; color: var(--ink-2);
  letter-spacing: var(--tr-flat); line-height: 1.4;
  transition: color var(--t-fast) linear;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.reg-meta {
  display: flex; align-items: center; gap: var(--s4);
  font-size: var(--fs-xs); color: var(--ink-4); margin-top: 5px;
  flex-wrap: wrap;
}
.reg-meta span { display: inline-flex; align-items: center; gap: 5px; }
.reg-meta .ico { width: 12px; height: 12px; }

.reg-time { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); text-align: left; }
.reg-age { text-align: left; }
.reg-pay { text-align: right; }
.reg-pay .sum { font-size: 1.06rem; display: block; }
.reg-pay .note { font-size: var(--fs-mi); color: var(--ink-4); display: block; margin-top: 2px; }

.reg-go {
  position: absolute; right: var(--s6); bottom: var(--s3);
  font-family: var(--mono); font-size: var(--fs-mi); color: var(--ink-3);
  opacity: 0; translate: -6px 0;
  transition: opacity var(--t-fast) linear, translate var(--t-fast) var(--e-out);
  display: inline-flex; align-items: center; gap: 5px;
}

.is-filtered { display: none !important; }

/* Фильтры: волосяные пилюли, активная — инверсия */
.sieve { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--edge);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3);
  transition: background var(--t-fast) linear, border-color var(--t-fast) linear,
              color var(--t-fast) linear;
}
.chip .ico { width: 14px; height: 14px; }
.chip:hover { color: var(--ink); border-color: var(--edge-3); }
.chip[aria-pressed="true"] {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink); font-weight: 600;
}
.sieve-note { font-family: var(--mono); font-size: var(--fs-mi); color: var(--ink-4); }

/* ==========================================================================
   СПОСОБЫ ВЫВОДА — слот трёх карточек референса.
   У продукта нет тарифов, поэтому здесь способы вывода: у них есть
   естественная иерархия и ограничение «крипта только 18+».
   ========================================================================== */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); align-items: stretch; }

/* ==========================================================================
   КАК ЭТО РАБОТАЕТ — нумерованный технический разбор.
   Без иконок-плиток: только крупные моноширинные номера и волосяные линии.
   ========================================================================== */
.steps { border-top: 1px solid var(--edge); }
.step {
  display: grid; grid-template-columns: 92px 1fr;
  gap: var(--s6);
  padding: var(--s7) 0;
  border-bottom: 1px solid var(--edge);
  align-items: start;
}
.step-n {
  font-family: var(--mono); font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700; color: var(--ink-4); line-height: .9; letter-spacing: -.04em;
  transition: color var(--t-mid) var(--e-out);
}
.step:hover .step-n { color: var(--ink); }
.step h3 { font-size: var(--fs-h3); margin-bottom: var(--s3); }
.step p { color: var(--ink-3); font-size: var(--fs-sm); max-width: 60ch; }
.step-note {
  margin-top: var(--s4); padding-left: var(--s4);
  border-left: 1px solid var(--edge-2);
  font-size: var(--fs-xs); color: var(--ink-4);
}

/* ==========================================================================
   ЧЕСТНЫЙ БЛОК — «чего мы не обещаем». Оставлен, он ценный.
   ========================================================================== */
.candid {
  border: 1px solid var(--edge-2); border-radius: var(--r-lg);
  background: var(--pit); padding: clamp(28px, 4vw, 48px);
  position: relative; overflow: hidden;
}
.candid::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--bloom-wide);
}
.candid > * { position: relative; z-index: 1; }
.candid h2 { font-size: var(--fs-h3); margin-bottom: var(--s5); }
.candid-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s7); }
.candid-list li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.candid-list .ico { flex: none; margin-top: 3px; width: 14px; height: 14px; color: var(--ink-4); }

/* ---- Списки требований и отказов ---- */
.notes { display: flex; flex-direction: column; gap: var(--s3); }
.notes li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.notes .ico { flex: none; margin-top: 3px; width: 14px; height: 14px; color: var(--ink-4); }

/* ==========================================================================
   FAQ — плоский список. Без пилюль, без пульсаций.
   grid-template-rows вместо max-height: не ломается при загрузке шрифта.
   ========================================================================== */
.faq { max-width: var(--maxw-tight); margin-inline: auto; border-top: 1px solid var(--edge); }
.ask { border-bottom: 1px solid var(--edge); }
.ask-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s5) 0;
  font-size: 1.02rem; font-weight: 600; text-align: left; color: var(--ink);
  letter-spacing: var(--tr-flat);
  transition: color var(--t-fast) linear;
}
.ask-q:hover { color: var(--ink); }
.ask-sign {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--edge-2); color: var(--ink-3);
  transition: rotate var(--t-mid) var(--e-out), background var(--t-fast) linear,
              color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.ask[data-open] .ask-sign {
  rotate: 45deg; background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}
.ask-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--e-out); }
.ask[data-open] .ask-a { grid-template-rows: 1fr; }
.ask-a > div { overflow: hidden; }
.ask-a p { padding-bottom: var(--s5); color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.7; max-width: 66ch; }
.ask-a p + p { padding-top: var(--s3); }

/* ==========================================================================
   ФИНАЛЬНЫЙ ПРИЗЫВ
   ========================================================================== */
.summon {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--r-lg); padding: clamp(48px, 8vw, 104px) var(--gutter);
  background: var(--slab); border: 1px solid var(--edge);
  box-shadow: var(--sh-2);
}
.summon::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 0%, rgba(255,251,245,.1), transparent 68%);
}
.summon-in { position: relative; z-index: 1; max-width: 600px; margin-inline: auto; }
.summon h2 { font-size: var(--fs-h2); margin-block: var(--s4) var(--s4); }
.summon p { color: var(--ink-3); font-size: var(--fs-lead); margin-bottom: var(--s6); }
.summon .fine { margin-top: var(--s5); font-size: var(--fs-xs); color: var(--ink-4); }

/* ==========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ
   ========================================================================== */
.crown { padding-top: calc(var(--pill-h) + var(--s8)); padding-bottom: var(--s6); }
.crown-mid { text-align: center; }
.crown h1 { font-size: var(--fs-h1); margin-bottom: var(--s4); }
.crown .lede { font-size: var(--fs-lead); color: var(--ink-3); max-width: 42rem; }
.crown-mid .lede { margin-inline: auto; }

.trail {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--fs-mi); color: var(--ink-4);
  margin-bottom: var(--s5); letter-spacing: .04em;
}
.crown-mid .trail { justify-content: center; }
.trail a { transition: color var(--t-fast) linear; }
.trail a:hover { color: var(--ink); }
.trail .ico { width: 11px; height: 11px; }

/* ---- Страница задания ---- */
.detail { display: grid; grid-template-columns: 1.55fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.detail-side { position: sticky; top: calc(var(--pill-h) + var(--s7)); display: flex; flex-direction: column; gap: var(--s4); }

.pay-slab {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--rise);
  border: 1px solid var(--edge-2); padding: var(--s6); text-align: center;
  box-shadow: var(--sh-2);
}
.pay-slab::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--bloom-hot);
}
.pay-slab > * { position: relative; z-index: 1; }
.pay-slab .k {
  font-family: var(--mono); font-size: var(--fs-mi); color: var(--ink-4);
  text-transform: uppercase; letter-spacing: var(--tr-caps);
}
.pay-slab .sum { font-size: clamp(2rem, 4vw, 2.7rem); display: block; margin-block: var(--s3); }
.pay-slab .note { font-size: var(--fs-xs); color: var(--ink-3); }
.pay-slab .btn { margin-top: var(--s5); }

.spec { border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--slab); overflow: hidden; }
.spec-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--edge); font-size: var(--fs-sm);
}
.spec-row:last-child { border-bottom: none; }
.spec-row .k { color: var(--ink-4); display: inline-flex; align-items: center; gap: 8px; }
.spec-row .v { color: var(--ink); font-weight: 600; text-align: right; }
.spec-foot { padding: var(--s4) var(--s5); border-top: 1px solid var(--edge); font-size: var(--fs-xs); color: var(--ink-4); line-height: 1.6; }

.block { margin-bottom: var(--s8); }
.block h2 { font-size: var(--fs-h3); margin-bottom: var(--s5); }
.block p { color: var(--ink-2); }
.block > p + p { margin-top: var(--s4); }

/* Шаги выполнения: моноширинные номера, волосяные линии */
.walk { border-top: 1px solid var(--edge); counter-reset: walk; }
.walk li {
  counter-increment: walk; display: grid; grid-template-columns: 44px 1fr; gap: var(--s4);
  padding: var(--s5) 0; border-bottom: 1px solid var(--edge);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.walk li::before {
  content: counter(walk, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-4); padding-top: 2px;
}

/* Возрастное предупреждение — инверсная рамка вместо цветной плашки */
.age-note {
  border: 1px solid var(--edge-2); border-left: 3px solid var(--ink);
  border-radius: var(--r-sm);
  padding: var(--s5); background: var(--pit);
  display: flex; gap: var(--s4); align-items: flex-start;
}
.age-note .ico { flex: none; margin-top: 2px; color: var(--ink); }
.age-note p { font-size: var(--fs-sm); color: var(--ink-2); }
.age-note strong { color: var(--ink); }

/* Блок «почему могут не зачесть» */
.warn {
  border: 1px solid var(--edge-2); border-radius: var(--r-lg);
  background: var(--pit); padding: clamp(24px, 3.5vw, 40px);
}
.warn h2 { display: flex; align-items: center; gap: var(--s3); }
.warn h2 .ico { color: var(--ink-3); }

/* ---- Юрстраницы ---- */
.doc { max-width: var(--maxw-tight); margin-inline: auto; }
.doc-brief {
  padding: var(--s5); border-radius: var(--r-md);
  background: var(--slab); border: 1px solid var(--edge);
  border-left: 3px solid var(--ink-4);
  color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: var(--s7);
}
.doc-when { font-family: var(--mono); font-size: var(--fs-mi); color: var(--ink-4); margin-bottom: var(--s6); letter-spacing: .04em; }
.doc section { margin-bottom: var(--s8); scroll-margin-top: calc(var(--pill-h) + var(--s7)); }
.doc h2 { font-size: var(--fs-h3); margin-bottom: var(--s4); display: flex; gap: var(--s3); align-items: baseline; }
.doc h2 .n { font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-4); flex: none; }
.doc p { color: var(--ink-2); font-size: var(--fs-body); margin-bottom: var(--s4); }
.doc ul { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); }
.doc li { position: relative; padding-left: var(--s5); color: var(--ink-2); font-size: var(--fs-body); }
.doc li::before { content: ''; position: absolute; left: 4px; top: .78em; width: 6px; height: 1px; background: var(--ink-4); }

.doc-toc { border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--slab); overflow: hidden; margin-bottom: var(--s7); }
.doc-toc h2 { font-size: var(--fs-h4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--edge); margin: 0; }
.doc-toc nav { display: flex; flex-direction: column; }
.doc-toc a {
  padding: 10px var(--s5); font-size: var(--fs-sm); color: var(--ink-3);
  border-bottom: 1px solid var(--edge);
  transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.doc-toc a:last-child { border-bottom: none; }
.doc-toc a:hover { background: var(--rise); color: var(--ink); }

/* ---- 404 ---- */
.lost { min-height: 72vh; display: grid; place-items: center; text-align: center; padding-top: calc(var(--pill-h) + var(--s7)); }
.lost .code {
  font-family: var(--mono); font-size: clamp(4.5rem, 15vw, 11rem); font-weight: 700;
  line-height: .84; letter-spacing: -.05em; color: var(--ink);
}

/* ---- Отзывы: плоские, обезличенные ---- */
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.voice {
  border: 1px solid var(--edge); border-radius: var(--r-lg);
  background: var(--slab); padding: var(--s6);
  display: flex; flex-direction: column;
}
.voice-slot { border-style: dashed; border-color: var(--edge-2); background: transparent; }
.voice-slot .hint { font-size: var(--fs-sm); color: var(--ink-4); line-height: 1.62; margin-top: var(--s4); }

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width: 1000px) {
  .trio { grid-template-columns: 1fr; }
  .voices { grid-template-columns: 1fr; }
  .candid-list { grid-template-columns: 1fr; }
  /* Реестр: убираем колонку времени, она уходит в мету */
  .reg-head { grid-template-columns: 1fr 88px 120px; }
  .reg-row  { grid-template-columns: 1fr 88px 120px; }
  .reg-head .time-col, .reg-time { display: none; }
}
@media (max-width: 920px) {
  .detail { grid-template-columns: 1fr; }
  .detail-side { position: static; }
}
@media (max-width: 700px) {
  .figures { grid-template-columns: 1fr; }
  .figure { border-left: none; border-top: 1px solid var(--edge); }
  .figure:first-child { border-top: none; }
  .step { grid-template-columns: 1fr; gap: var(--s3); }
  .step-n { font-size: 1.5rem; }
  /* Реестр → стопка: строка становится блоком */
  .reg-head { display: none; }
  .reg-row {
    grid-template-columns: 1fr auto; gap: var(--s3) var(--s4);
    padding: var(--s5) var(--s5);
  }
  .reg-main { grid-column: 1 / -1; }
  .reg-age { grid-column: 1; text-align: left; }
  .reg-pay { grid-column: 2; }
  .reg-go { display: none; }
  .hero-acts .btn { flex: 1; }
}
@media (max-width: 420px) {
  .crop { font-size: clamp(4.2rem, 26vw, 7rem); }
}