/* =========================================================================
   СИСТЕМЫ ПОРЯДОК — дизайн-система
   Тема: инженерная документация. Бумага, сетка, штамп листа, выносные линии.
   ========================================================================= */

/* ---------- Шрифты ----------
   IBM Plex, подрезанный до нужных символов: кириллица, латиница, цифры,
   типографские знаки, ₽ и стрелки. Пять файлов, около 50 КБ на всё.
   Лицензия SIL OFL 1.1 — текст лежит рядом, в fonts/LICENSE.txt.
   ---------------------------------------------------------------------- */
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/PlexSans-400.7e574719fd12.woff2") format('woff2');}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/PlexSans-500.657eb7e57c72.woff2") format('woff2');}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/PlexSans-600.e6f5631e10ca.woff2") format('woff2');}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/PlexMono-400.11292ff48f41.woff2") format('woff2');}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/PlexMono-500.5f8e66adaeb1.woff2") format('woff2');}

/* ---------- Токены ---------- */
:root{
  /* Палитра. Цвет назван ролью, а не собой: «графит» — это и карандаш,
     и заливка тёмной панели, и в тёмной теме эти две роли расходятся
     в разные стороны. Поэтому заливка панели живёт отдельным токеном. */
  --graphite:#0D0F0E;   /* графит — текст, линии, кнопки, «карандаш» */
  --paper:#F2F2EE;      /* бумага — фон страницы */
  --sheet:#FFFFFF;      /* лист — карточки, поля, наложенные панели */
  --line:#C7CBC3;       /* линия — рамки, разделители, штриховка */
  --muted:#5E635C;      /* серый текст — вторичный уровень */
  --ink:#1F3EC8;        /* чернила — акцент: активное, ссылки, фокус */

  --panel:#0D0F0E;      /* заливка тёмной панели: цена, заявка, штамп */
  --on-panel:242,242,238;  /* что написано на тёмной панели */
  --shade:13,15,14;        /* тень и штриховка — каналами, ради прозрачности */

  /* Состояния. Красный, жёлтый и зелёный на бумаге тёмные, на тёмном
     листе — светлые: иначе просроченное на нём просто не видно. */
  --alarm:#B3261E;      /* просрочено, ждёт клиента, ошибка */
  --alarm-ink:#7A1C15;  /* тот же смысл текстом на светлом фоне */
  --warn:#8A6A00;       /* на проверке */
  --good:#1B6B3A;       /* оплачено, сделано */

  /* Портрет тонируется под графит — это тоже цвет, а не украшение. */
  --portrait-filter:grayscale(1) contrast(1.06) brightness(1.02);

  --grid-minor:rgba(var(--shade),.035);
  --grid-major:rgba(var(--shade),.075);
  --ink-wash:rgba(31,62,200,.07);
  --graphite-wash:rgba(var(--shade),.045);

  /* Сетка */
  --wrap:1240px;
  --pad:clamp(18px,5vw,48px);
  --gut:clamp(16px,2.2vw,28px);
  --u:8px;                       /* базовый модуль вертикального ритма */
  --sec:clamp(60px,7vw,104px);   /* вертикальный отступ секции */

  /* Типографика */
  --f-sans:'Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --t-h1:clamp(2.05rem,1.15rem + 3.7vw,4.25rem);
  --t-h2:clamp(1.6rem,1.05rem + 2.1vw,2.75rem);
  --t-h3:clamp(1.12rem,1.02rem + .4vw,1.375rem);
  --t-lede:clamp(1.02rem,.97rem + .3vw,1.25rem);
  --t-body:1rem;
  --t-small:.875rem;
  --t-tag:.6875rem;   /* mono-надписи чертежа */
}

/* ---------- Тёмная тема ----------

   Не «инверсия светлой»: на чертеже переворачивать нечего — линия
   остаётся линией, а лист остаётся листом, просто лист теперь тёмный.
   Меняются только цвета ролей, ни одного правила вёрстки ниже это
   не касается.

   Тёмная панель (цена, заявка) в тёмной теме не становится белой:
   белый прямоугольник на тёмной странице бьёт по глазам сильнее,
   чем что-либо на светлой. Она поднимается на тон над листом и
   держится рамкой.

   Выбор берётся из системы: своего переключателя нет намеренно — он
   означал бы кнопку, которую надо помнить, и хранилище, которое надо
   объяснять в политике конфиденциальности. */

/* Тёмная палитра включается двумя путями, и оба обязаны дать один и тот
   же лист: системная тема — когда выбора не делали, и атрибут на корне —
   когда человек нажал переключатель в шапке. Два одинаковых блока ниже
   не случайность и не копипаста, которую забыли убрать: правило внутри
   @media нельзя объединить с правилом снаружи. Держит их в согласии
   проверка в тестах — она падает, если блоки разошлись хоть запятой. */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --graphite:#E7E8E2;   /* карандаш стал светлым: текст, линии, кнопки */
    --paper:#121412;      /* лист */
    --sheet:#1A1D19;      /* карточки, поля, наложенные панели */
    --line:#363B34;
    --muted:#9BA194;      /* 7:1 на листе — вторичный, но не слепой */
    --ink:#8FA6FF;        /* чернила светлее: синий из светлой темы тут не читается */

    --panel:#22261F;      /* тёмная панель — на тон выше листа */
    --on-panel:236,237,231;
    --shade:0,0,0;

    --grid-minor:rgba(231,232,226,.035);
    --grid-major:rgba(231,232,226,.07);
    --ink-wash:rgba(143,166,255,.12);
    --graphite-wash:rgba(231,232,226,.06);

    --alarm:#FF8F84;
    --alarm-ink:#FFA79E;
    --warn:#E0B341;
    --good:#5CC98D;

    /* Портрет обесцвечен и притемнён под графит; на тёмном листе ему
       нужен обратный ход, иначе лицо уходит в чёрное пятно. */
    --portrait-filter:grayscale(1) contrast(1.02) brightness(1.12);
  }
}

:root[data-theme="dark"]{
    --graphite:#E7E8E2;   /* карандаш стал светлым: текст, линии, кнопки */
    --paper:#121412;      /* лист */
    --sheet:#1A1D19;      /* карточки, поля, наложенные панели */
    --line:#363B34;
    --muted:#9BA194;      /* 7:1 на листе — вторичный, но не слепой */
    --ink:#8FA6FF;        /* чернила светлее: синий из светлой темы тут не читается */

    --panel:#22261F;      /* тёмная панель — на тон выше листа */
    --on-panel:236,237,231;
    --shade:0,0,0;

    --grid-minor:rgba(231,232,226,.035);
    --grid-major:rgba(231,232,226,.07);
    --ink-wash:rgba(143,166,255,.12);
    --graphite-wash:rgba(231,232,226,.06);

    --alarm:#FF8F84;
    --alarm-ink:#FFA79E;
    --warn:#E0B341;
    --good:#5CC98D;

    /* Портрет обесцвечен и притемнён под графит; на тёмном листе ему
       нужен обратный ход, иначе лицо уходит в чёрное пятно. */
    --portrait-filter:grayscale(1) contrast(1.02) brightness(1.12);
}

/* Браузеру тоже надо сказать, какой лист: от этого зависят полосы
   прокрутки и его собственные элементы в полях ввода. */
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Атрибут hidden должен побеждать любые display из компонентов */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;color-scheme:light dark}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  font-family:var(--f-sans);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--graphite);
  background-color:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---------- Синий ----------
   Синий на чертеже — карандаш проверяющего: им отмечают одно место,
   а не расчерчивают лист. Раньше он стоял на каждом номере карточки,
   на каждой боковой подписи и в штампе каждого листа — и перестал
   что-либо значить. Теперь он оставлен там, где означает действие
   (ссылка, фокус, отмеченное поле) или находку (здесь течёт, здесь
   просрочено), а ряды одинаковых подписей стали серыми. */

/* Фокус — виден всегда, толщиной в чертёжную линию */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
.on-graphite :focus-visible{outline-color:rgb(var(--on-panel))}

.skip{
  position:absolute;left:var(--pad);top:-100px;z-index:100;
  background:var(--graphite);color:var(--paper);
  padding:12px 18px;font:500 var(--t-small)/1 var(--f-mono);
  text-decoration:none;transition:top .15s;
}
.skip:focus{top:12px}

/* ---------- Раскладка ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
/* Миллиметровка принадлежит листу, а не столу под ним: клетка начинается
   там же, где начинается лист, и заканчивается вместе с ним. Раньше она
   лежала на всей странице — вместе с шапкой, подвалом и полосой внизу
   экрана, — и лист переставал быть листом. Модуль 8px, крупная клетка
   80px, как на миллиметровке. */
.sheet{
  position:relative;padding-block:var(--sec) calc(var(--sec) * .78);
  background-image:
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px),
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:8px 8px,8px 8px,80px 80px,80px 80px;
}
/* Тёмный лист свою клетку рисует сам, светлая на нём не читается. */
.sheet.on-graphite{background-image:none}
.sheet + .sheet{border-top:1px solid var(--line)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}
@media (max-width:860px){.grid{grid-template-columns:repeat(6,1fr)}}

/* ---------- Типографика ---------- */
h1,.h1{font-size:var(--t-h1);font-weight:600;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
h2,.h2{font-size:var(--t-h2);font-weight:600;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h3,.h3{font-size:var(--t-h3);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--muted);max-width:62ch}
.small{font-size:var(--t-small);line-height:1.55;color:var(--muted)}
.mono{font-family:var(--f-mono)}

/* Выносная надпись — «язык чертежа» */
.tag{
  font:500 var(--t-tag)/1.2 var(--f-mono);
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  display:inline-flex;align-items:center;gap:.6em;
}
.tag::before{
  content:"";width:24px;height:1px;background:var(--graphite);flex:none;
}
.tag--ink{color:var(--ink)}
.tag--ink::before{background:var(--ink)}
.tag--plain::before{display:none}

.sec-head{max-width:70ch;margin-bottom:clamp(32px,4.5vw,64px)}
.sec-head .tag{margin-bottom:calc(var(--u)*3)}
.sec-head h1,.sec-head h2{margin-bottom:calc(var(--u)*2)}

/* ---------- Фирменная деталь: штамп листа (основная надпись) ---------- */
.stamp{
  display:flex;margin-top:clamp(28px,3.5vw,48px);margin-left:auto;
  width:max-content;max-width:100%;
  border:1px solid var(--graphite);background:var(--sheet);
}
.stamp span{
  padding:7px 12px;
  font:500 var(--t-tag)/1.2 var(--f-mono);
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;
}
.stamp span + span{border-left:1px solid var(--graphite)}
.stamp .s-num{background:var(--graphite);color:var(--paper)}
.stamp .s-org{color:var(--muted)}
/* Штамп на графитовом листе — инверсия */
.cta .stamp{border-color:rgb(var(--on-panel));background:transparent;color:rgb(var(--on-panel))}
.cta .stamp span + span{border-left-color:rgb(var(--on-panel))}
.cta .stamp .s-num{background:rgb(var(--on-panel));color:var(--panel)}
.cta .stamp .s-org{color:rgb(var(--on-panel))}
@media (max-width:600px){
  .stamp{width:100%}
  .stamp .s-scale{display:none}
  .stamp span{padding:6px 8px;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis}
  .stamp .s-name{flex:1;min-width:0}
}

/* Крестики привязки к сетке (уголки листа) */
.tick{position:absolute;width:9px;height:9px;pointer-events:none}
.tick::before,.tick::after{content:"";position:absolute;background:var(--graphite);opacity:.45}
.tick::before{left:0;top:4px;width:9px;height:1px}
.tick::after{top:0;left:4px;width:1px;height:9px}
.tick--tl{left:calc(var(--pad) - 4px);top:calc(var(--sec) * .38)}
.tick--tr{right:calc(var(--pad) - 4px);top:calc(var(--sec) * .38)}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.75em;
  padding:16px 26px;border:1px solid var(--graphite);background:var(--graphite);color:var(--paper);
  font:500 var(--t-small)/1 var(--f-sans);letter-spacing:.005em;
  text-decoration:none;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn .arrow{font-family:var(--f-mono);transition:transform .16s ease}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
@media (prefers-reduced-motion:no-preference){.btn:hover .arrow{transform:translateX(4px)}}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--graphite)}
.btn--ghost:hover{background:var(--graphite);border-color:var(--graphite);color:var(--paper)}
.btn--block{width:100%;justify-content:center;padding-block:18px}
.btn--sm{padding:11px 16px;font-size:var(--t-tag);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.1em}

/* ---------- Шапка ---------- */
.head{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter:blur(8px)){.head{background:var(--paper)}}
.head__in{display:flex;align-items:center;gap:var(--gut);min-height:64px}
.logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  margin-right:auto;color:var(--graphite);
}
.logo__mark{width:26px;height:26px;flex:none;display:block}
.logo__word{display:flex;flex-direction:column;line-height:1}
.logo__word i{
  font:500 .625rem/1 var(--f-mono);font-style:normal;color:var(--ink);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:3px;
}
.logo__word b{font:600 1.0625rem/1 var(--f-sans);letter-spacing:-.02em}
.logo:hover .logo__mark{color:var(--ink)}
@media (max-width:400px){
  .logo__mark{width:22px;height:22px}
  .logo__word b{font-size:.9375rem}
}
.nav{display:flex;gap:clamp(14px,1.6vw,26px)}
.nav a{
  font:400 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);text-decoration:none;padding:6px 0;position:relative;
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .16s}
.nav a:hover{color:var(--graphite)}
.nav a:hover::after{transform:scaleX(1)}
.head .btn--sm{flex:none}

/* Переключатель темы. Значок — круг с закрашенной половиной: тот же
   знак, которым на чертеже показывают разрез. Без скрипта кнопки нет
   вовсе: нажимать было бы не на что, а тему в этом случае задаёт
   система — и задаёт правильно. */
.theme{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  padding:0;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;
  transition:color .14s ease,border-color .14s ease;
}
.theme__t{display:none}
.theme svg{width:18px;height:18px}
.theme circle{fill:none;stroke:currentColor;stroke-width:1.4}
.theme__half{fill:currentColor}
.theme:hover{color:var(--graphite);border-color:var(--graphite)}
html:not([data-js]) .theme{display:none}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--line);cursor:pointer}
.burger span{display:block;width:18px;height:1px;background:var(--graphite);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1px;background:var(--graphite)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Меню, телефон и кнопка живут в одной обёртке: на широком экране — строка,
   на телефоне — выпадающая панель под шапкой. Отдельно позиционировать их
   нельзя: absolute считается от самой шапки высотой 64px, и кнопка садилась
   поверх крестика закрытия. */
.head__menu{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px)}

@media (max-width:960px){
  .burger{display:flex}
  .head__menu{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--graphite);
    padding:0 var(--pad) calc(var(--u)*3);
    max-height:calc(100vh - 64px);
    max-height:calc(100dvh - 64px);
    overflow-y:auto;
    box-shadow:0 14px 26px rgba(var(--shade),.10);
  }
  .head.is-open .head__menu{display:flex}
  .head__menu .nav{flex-direction:column;gap:0}
  .head__menu .nav a{padding:15px 0;border-top:1px solid var(--line);font-size:.8125rem}
  .head__menu .nav a::after{display:none}
  .head__menu .head__tel{
    display:block;padding:16px 0;
    border-top:1px solid var(--line);border-bottom:0;
    font-size:1.0625rem;
  }
  /* В панели меню значок стоит среди строк текста — и подписывается,
     иначе его там просто не находят. */
  .head__menu .theme{
    width:100%;height:auto;justify-items:start;align-items:center;
    grid-auto-flow:column;grid-template-columns:auto 1fr;gap:12px;
    padding:14px 0;border:0;border-top:1px solid var(--line);
    color:var(--graphite);
  }
  .head__menu .theme__t{
    display:block;text-align:left;
    font:400 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;
  }
  .head__menu .btn--sm{
    justify-content:center;margin-top:calc(var(--u)*2);
    padding-block:17px;font-size:var(--t-small);
  }
}

/* ---------- Первый экран ---------- */
.hero{padding-top:clamp(48px,7vw,96px);padding-bottom:var(--sec)}
.hero__text{grid-column:span 7}
.hero__vis{grid-column:9 / span 4;align-self:center}
@media (max-width:1080px){.hero__text{grid-column:span 12}.hero__vis{grid-column:span 12;margin-top:48px}}
@media (max-width:860px){.hero__text,.hero__vis{grid-column:span 6}}

.hero h1{margin-block:calc(var(--u)*3) calc(var(--u)*3)}
.hero .lede{max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--u) calc(var(--u)*2);align-items:center;margin-top:calc(var(--u)*5)}
.hero__note{
  margin-top:calc(var(--u)*3);padding-left:14px;border-left:1px solid var(--line);
  font:400 var(--t-small)/1.5 var(--f-mono);color:var(--muted);max-width:44ch;
}

/* Первый вопрос разбора прямо на первом экране. Кнопки, а не радио с
   отдельной «отправить»: одно нажатие — один шаг, и это работает без
   скрипта. Вариантов семь, поэтому они мельче кнопок и стоят плиткой. */
.ask{
  margin-top:calc(var(--u)*5);padding:clamp(16px,2vw,22px);
  background:var(--sheet);border:1px solid var(--line);
  box-shadow:6px 7px 0 rgba(var(--shade),.05);max-width:56ch;
}
.ask__label{
  font:400 var(--t-tag)/1 var(--f-mono);color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;
}
.ask__title{
  margin-top:10px;font:500 var(--t-h3)/1.25 var(--f-sans);letter-spacing:-.01em;
}
.ask__opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:calc(var(--u)*2)}
.chip{
  display:inline-flex;align-items:center;
  padding:10px 14px;border:1px solid var(--line);background:var(--paper);
  color:var(--graphite);font:400 var(--t-small)/1.2 var(--f-sans);
  text-align:left;cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.chip:hover{border-color:var(--graphite);background:var(--graphite);color:var(--paper)}
.chip:active{transform:translateY(1px)}
.chip--pale{color:var(--muted);border-style:dashed}
/* Подпись автора на первом экране. Снимок маленький нарочно: это
   подпись под чертежом, а не портрет в раме — тот стоит ниже, на своём
   листе. */
.hero__who{
  display:flex;align-items:center;gap:14px;
  margin-top:calc(var(--u)*4);max-width:56ch;
}
.portrait--mini{flex:0 0 auto;width:56px}
.portrait--mini .portrait__img::after{background-size:14px 14px}
.portrait--mini.is-empty .portrait__img::before{content:"ФОТО";font-size:6px;letter-spacing:.1em}
.hero__who-t{font:400 var(--t-small)/1.5 var(--f-sans);color:var(--muted)}
.hero__who-t b{display:block;font-weight:500;color:var(--graphite)}

.link-q{
  font:400 var(--t-small)/1 var(--f-sans);color:var(--muted);
  text-decoration:none;border-bottom:1px solid var(--line);
}
.link-q:hover{color:var(--ink);border-bottom-color:var(--ink)}
.about__go{margin-top:calc(var(--u)*4)}

/* Хаос → порядок */
/* Бумажки — левая половина мысли «хаос → порядок». Раньше две из четырёх
   уходили под карточку системы и не читались: смысл терялся, оставалась
   просто фактура. Теперь все четыре лежат выше и читаются целиком. */
/* Бумажки торчат ИЗ-ЗА верхнего края карточки системы — веером, как
   листки, засунутые в коробку. Нижняя часть каждой уходит под карточку,
   наверху остаётся ровно столько, чтобы прочесть надпись.
   z-index ниже карточки (у неё 2), иначе они лягут поверх и всё закроют. */
.flow{position:relative;padding-top:74px}
.flow__slips{position:absolute;inset:0 0 auto 0;height:210px;pointer-events:none;z-index:1}
.slip{
  position:absolute;background:var(--paper);border:1px solid var(--line);
  padding:8px 10px;font:400 var(--t-tag)/1.3 var(--f-mono);color:var(--muted);
  box-shadow:2px 3px 0 rgba(var(--shade),.05);
  width:min(46%,152px);min-height:130px;
  /* Свой угол поворота у каждой — чтобы дрейф не сбивал наклон. */
  --tilt:0deg;
  /* Вращение вокруг нижнего края: тогда верхушки расходятся веером,
     а низ остаётся на месте — под карточкой, где его не видно. */
  transform-origin:50% 100%;
  transform:rotate(var(--tilt));
}
/* Веер: крайние наклонены сильнее и сидят ниже, средние стоят прямее и
   торчат выше. Порядок в разметке — не порядок на экране: длинной записке
   в две строки нужна средняя позиция, где видно больше. */
.slip:nth-child(1){left:21%;  top:0;   --tilt:-6deg}   /* Ира — две строки */
.slip:nth-child(2){left:0;    top:28px;--tilt:-15deg}
.slip:nth-child(3){right:22%; top:4px; --tilt:7deg}
.slip:nth-child(4){right:0;   top:32px;--tilt:16deg}

/* Лёгкий дрейф. Периоды нарочно разные и не кратные друг другу — иначе
   бумажки начинают качаться в такт, и вместо беспорядка получается
   маятник. Смещения крошечные: это фон, а не аттракцион. */
@keyframes slip-drift{
  0%   {transform:rotate(var(--tilt)) translate(0,0)}
  25%  {transform:rotate(calc(var(--tilt) + .8deg)) translate(2px,-3px)}
  50%  {transform:rotate(var(--tilt)) translate(-1px,-5px)}
  75%  {transform:rotate(calc(var(--tilt) - .7deg)) translate(-3px,-2px)}
  100% {transform:rotate(var(--tilt)) translate(0,0)}
}
.flow.is-set .slip{animation:slip-drift var(--dur,9s) ease-in-out var(--lag,0s) infinite}
.slip:nth-child(1){--dur:9.4s;  --lag:0s}
.slip:nth-child(2){--dur:11.7s; --lag:-2.3s}
.slip:nth-child(3){--dur:8.3s;  --lag:-4.1s}
.slip:nth-child(4){--dur:12.9s; --lag:-1.2s}

.order{
  position:relative;z-index:2;background:var(--sheet);border:1px solid var(--graphite);
  box-shadow:10px 12px 0 rgba(var(--shade),.06);
}
.order__bar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--graphite);
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
}
.order__bar em{font-style:normal;color:var(--ink)}
.order__row{
  display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:baseline;
  padding:12px 14px;font:400 var(--t-tag)/1.4 var(--f-mono);
}
.order__row + .order__row{border-top:1px solid var(--line)}
.order__row b{font-weight:500;color:var(--muted)}
.order__row span{color:var(--graphite);font-family:var(--f-sans);font-size:.8125rem}
.order__row i{font-style:normal;justify-self:end;white-space:nowrap;letter-spacing:.04em}
.st-ok{color:var(--muted)}
.st-due{color:var(--ink);font-weight:500}
.order__foot{
  padding:11px 14px;border-top:1px solid var(--graphite);background:var(--graphite);color:var(--paper);
  font:400 var(--t-tag)/1.3 var(--f-mono);letter-spacing:.06em;
}

/* Схема процесса. Рисунок, а не снимок экрана: чужая таблица показывала бы
   не то, что человек получит. Линии рисуются цветом текста, поэтому схема
   весит ничего и одинаково чётко видна на любом экране. */
.blueprint{
  position:relative;z-index:2;margin:0;
  background:var(--sheet);border:1px solid var(--graphite);
  box-shadow:10px 12px 0 rgba(var(--shade),.06);
  padding:clamp(12px,1.6vw,18px);
}
.blueprint__svg{display:block;width:100%;height:auto}
.blueprint__cap{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font:400 var(--t-tag)/1.45 var(--f-mono);color:var(--muted);
}
.blueprint__svg text{font-family:var(--f-mono)}
.bp-box rect{fill:none;stroke:var(--graphite);stroke-width:1}
.bp-box--last rect{fill:var(--ink-wash)}
.bp-n{font-size:9px;fill:var(--muted);letter-spacing:.12em}
.bp-t{font-size:15px;font-weight:500;fill:var(--graphite)}
.bp-s{font-size:9.5px;fill:var(--muted)}
.bp-src{font-size:9px;fill:var(--muted);letter-spacing:.08em}
.bp-line,.bp-tip,.bp-thin,.bp-loop{fill:none;stroke:var(--graphite);stroke-width:1}
.bp-thin{stroke:var(--line)}
.bp-loop{stroke:var(--ink);stroke-dasharray:4 3}
.bp-loop-t{font-size:8.5px;fill:var(--ink);letter-spacing:.14em}

/* ---------- 02. Боли ---------- */
.pains{border-top:1px solid var(--line)}
.pain{
  display:grid;grid-template-columns:auto 1fr auto;gap:6px clamp(16px,3vw,40px);
  align-items:baseline;padding:clamp(18px,2.4vw,26px) 0;border-top:1px solid var(--line);
}
.pains ul li:last-child{border-bottom:1px solid var(--line)}
.pain__n{font:500 var(--t-tag)/1.6 var(--f-mono);color:var(--muted);letter-spacing:.1em}
.pain__t{font-size:clamp(1.02rem,.95rem + .5vw,1.375rem);line-height:1.35;letter-spacing:-.012em;max-width:52ch}
.pain__m{
  font:400 var(--t-tag)/1.6 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink);white-space:nowrap;justify-self:end;
}
@media (max-width:720px){
  .pain{grid-template-columns:auto 1fr}
  .pain__m{grid-column:2;justify-self:start;margin-top:4px}
}
.pains__after{
  margin-top:calc(var(--u)*5);padding:clamp(18px,2.6vw,28px);
  background:var(--panel);color:rgb(var(--on-panel));max-width:64ch;
}
.pains__after p{font-size:var(--t-lede);line-height:1.5;text-wrap:balance}

/* ---------- 03. Что я делаю ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--paper);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:calc(var(--u)*2);transition:background .18s}
.card:hover{background:var(--sheet)}
.card__n{font:500 var(--t-tag)/1 var(--f-mono);color:var(--muted);letter-spacing:.14em}
.card p{color:var(--muted);font-size:var(--t-small);line-height:1.6}
.card ul{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:calc(var(--u)*2);border-top:1px solid var(--line)}
.card li{font:400 var(--t-tag)/1.5 var(--f-mono);color:var(--muted);padding-left:16px;position:relative}
.card li::before{content:"—";position:absolute;left:0;color:var(--graphite)}
.card--stat h3{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.5rem);line-height:1;letter-spacing:-.03em}

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

.works{display:grid;gap:var(--gut)}
@media (min-width:820px){.works{grid-template-columns:1fr 1fr}}

.work{
  background:var(--sheet);border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.work__shot{
  display:block;line-height:0;border-bottom:1px solid var(--line);
  overflow:hidden;background:var(--paper);
}
.work__shot img{
  width:100%;height:auto;display:block;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:no-preference){
  .work__shot:hover img{transform:scale(1.02)}
}
.work__shot:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

.work__body{padding:clamp(18px,2.6vw,26px);display:grid;gap:14px;
  align-content:start;flex:1}
.work__body h3{font-size:var(--t-h3);letter-spacing:-.01em}
.work__lede{font-size:var(--t-small);color:var(--muted);line-height:1.6}

.work__facts{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:14px clamp(18px,3vw,32px);
  padding-top:14px;border-top:1px solid var(--line);
}
.work__facts li{display:grid;gap:3px}
.work__facts span{font:400 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}
.work__facts b{font:500 .9375rem/1.3 var(--f-sans)}
.work__facts a{color:var(--ink);text-decoration:none}
.work__facts a:hover{text-decoration:underline}
.work__facts .arrow{font-family:var(--f-mono);margin-left:4px}

/* На странице работы те же факты стоят крупнее и с пояснением: «две
   недели» звучит долго, пока не сказано, что сайт открылся на третий
   день, а остальное время его доводили под человека. */
.work__facts--wide{margin-top:clamp(24px,3vw,36px);gap:18px clamp(24px,4vw,48px)}
.work__facts--wide b{font-size:1.25rem}
.work__facts--wide em{
  font:400 var(--t-tag)/1.4 var(--f-mono);color:var(--muted);
  font-style:normal;max-width:32ch;
}

.work__go{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:4px}

/* ---------- Окно «было и стало» ---------- */

.ba-box{
  border:0;padding:0;background:transparent;
  max-width:min(900px,94vw);max-height:92vh;
}
.ba-box::backdrop{background:rgba(var(--shade),.86)}
.ba-box__in{
  background:var(--sheet);border:1px solid var(--graphite);
  color:var(--graphite);max-height:92vh;overflow-y:auto;
}
.ba-box__head{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.4vw,22px) clamp(18px,2.6vw,28px);
  border-bottom:1px solid var(--graphite);
  position:sticky;top:0;background:var(--sheet);z-index:1;
}
.ba-box__head h2{font-size:var(--t-h3)}
.ba-box__close{
  flex:none;width:36px;height:36px;line-height:1;font-size:1.4rem;
  background:transparent;border:1px solid var(--line);color:var(--graphite);
  cursor:pointer;
}
.ba-box__close:hover{background:var(--graphite);color:var(--paper)}
.ba-box__foot{padding:0 clamp(18px,2.6vw,28px) clamp(18px,2.6vw,28px)}
@media (prefers-reduced-motion:no-preference){
  .ba-box[open]{animation:lightbox-in .2s ease both}
}

/* ---------- Было / стало ----------
   Две колонки, а не «до» над «после»: сравнение работает, только когда
   оба столбца видны одновременно. На узком экране они всё равно встают
   друг под друга — там сравнивать приходится памятью, деваться некуда. */

.work__ba{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:860px){
  .work__ba{grid-template-columns:1fr 1fr}
  .work__ba .ba--now{border-left:1px solid var(--line);border-top:0}
}
.ba{padding:clamp(18px,2.6vw,28px)}
.ba--now{border-top:1px solid var(--line)}
.ba h4{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:16px;
}
.ba ul{list-style:none;padding:0;display:grid;gap:14px}
.ba li{font-size:var(--t-small);line-height:1.6;position:relative;padding-left:18px}
.ba li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:1px;background:var(--line);
}
.ba--was{background:var(--graphite-wash)}
.ba--was li{color:var(--muted)}
.ba--now li::before{background:var(--ink);height:2px;top:.5em}

/* ---------- Снимки экрана ---------- */

.shots{display:grid;gap:var(--gut)}
@media (min-width:700px){.shots{grid-template-columns:1fr 1fr}}
.shot{margin:0;display:grid;gap:10px}
.shot__open{
  display:block;position:relative;line-height:0;
  border:1px solid var(--line);background:var(--paper);
  overflow:hidden;
  transition:border-color .2s ease,transform .2s ease;
}
.shot__open img{width:100%;height:auto;display:block}
.shot__open:hover,.shot__open:focus-visible{border-color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .shot__open:hover{transform:translateY(-3px)}
}
/* Подсказка «крупно» появляется по наведению. На тач-экранах наведения
   нет, поэтому там она показана всегда: иначе про увеличение
   просто не узнают. */
.shot__zoom{
  position:absolute;right:8px;bottom:8px;
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--paper);background:var(--graphite);padding:6px 9px;
  opacity:0;transition:opacity .2s ease;
}
.shot__open:hover .shot__zoom,.shot__open:focus-visible .shot__zoom{opacity:1}
@media (hover:none){.shot__zoom{opacity:.85}}
.shot figcaption{font-size:var(--t-small);color:var(--muted);line-height:1.5}
.shots__note{
  margin-top:clamp(18px,2.6vw,26px);
  font:400 var(--t-tag)/1.6 var(--f-mono);color:var(--muted);
}

/* ---------- Низ страницы работы ---------- */

.work__next{display:grid;gap:var(--gut);align-items:start}
@media (min-width:860px){
  .work__next{grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr)}
}
.work__next h2{font-size:var(--t-h2);margin-bottom:14px}
.work__others h3{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);margin-bottom:14px;
}
.work__others ul{list-style:none;padding:0;display:grid;gap:10px}
.work__others a{color:var(--graphite);font-size:var(--t-small)}

/* ---------- Снимок во весь экран ---------- */

.lightbox{
  border:0;padding:0;background:transparent;
  max-width:min(1400px,94vw);max-height:94vh;
  color:rgb(var(--on-panel));
}
.lightbox::backdrop{background:rgba(var(--shade),.88)}
.lightbox__img{
  display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;
  border:1px solid rgba(var(--on-panel),.25);background:var(--sheet);
}
.lightbox__cap{margin-top:12px;font-size:var(--t-small);line-height:1.5;text-align:center}
.lightbox__close{
  position:absolute;top:-6px;right:0;transform:translateY(-100%);
  width:40px;height:40px;line-height:1;
  font-size:1.5rem;color:rgb(var(--on-panel));
  background:transparent;border:1px solid rgba(var(--on-panel),.4);
  cursor:pointer;
}
.lightbox__close:hover{background:rgba(var(--on-panel),.15)}
/* На узком экране крестику некуда уехать вверх — он садится в угол снимка. */
@media (max-width:640px){
  .lightbox__close{top:8px;right:8px;transform:none;background:var(--panel)}
}
@media (prefers-reduced-motion:no-preference){
  .lightbox[open]{animation:lightbox-in .22s ease both}
  @keyframes lightbox-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
}

/* ---------- 05. Как проходит работа ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  display:grid;grid-template-columns:clamp(56px,7vw,96px) 1fr;
  gap:clamp(16px,3vw,40px);padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--line);
}
.steps .step:last-child{border-bottom:1px solid var(--line)}
.step__n{font:500 clamp(1.5rem,3.4vw,2.5rem)/1 var(--f-mono);color:var(--line);letter-spacing:-.02em}
.step h3{margin-bottom:10px}
.step p{color:var(--muted);max-width:58ch;font-size:var(--t-small);line-height:1.65}
.step__meta{margin-top:12px;font:400 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}

/* ---------- 06. Цена ---------- */
.price{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);align-items:start}
.price__box{grid-column:span 5;background:var(--panel);color:rgb(var(--on-panel));padding:clamp(26px,3.4vw,44px);border:1px solid var(--line)}
.price__box .tag{color:rgba(var(--on-panel),.6)}
.price__box .tag::before{background:rgba(var(--on-panel),.6)}
.price__box .price__fig{
  font-family:var(--f-sans);font-weight:500;line-height:1;color:rgb(var(--on-panel));
  font-size:clamp(2.1rem,1.2rem + 3.4vw,3.75rem);
  letter-spacing:-.03em;margin:calc(var(--u)*2) 0 calc(var(--u)*1.5);
}
/* Кнопка в конструктор — единственное яркое место на листе цены.
   Вопрос «сколько стоит» человек хочет закрыть здесь и сейчас, а не
   назначить ради него встречу.

   Лист графитовый, а обычная кнопка тоже графитовая — на нём её просто
   не видно. Здесь она выворачивается: бумага на графите. */
.price__go{margin-top:clamp(20px,3vw,28px)}
.price__go .btn{
  background:rgb(var(--on-panel));border-color:rgb(var(--on-panel));color:var(--panel);
}
.price__go .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
/* Конструктор — вторая дверь, и говорит она тише: обводка вместо заливки.
   Залитая кнопка здесь спорила бы с главной кнопкой сайта — «записаться
   на разбор», — а спор двух одинаково громких кнопок человек решает тем,
   что уходит. */
.price__go .btn--ghost{background:transparent;border-color:rgba(var(--on-panel),.5);color:rgb(var(--on-panel))}
.price__go .btn--ghost:hover{background:rgb(var(--on-panel));border-color:rgb(var(--on-panel));color:var(--panel)}
.price__box .small{margin-top:10px;color:rgba(var(--on-panel),.55)}
.price__box p{color:rgba(var(--on-panel),.72);font-size:var(--t-small);line-height:1.65}
.price__side{grid-column:7 / span 6;display:grid;gap:calc(var(--u)*3)}

/* Лестница цен. Три строки чертежа: номер, что входит, во что обходится. */
.ladder{margin-top:calc(var(--u)*6)}
.ladder__head{
  font:400 var(--t-tag)/1.5 var(--f-mono);color:var(--muted);
  padding-bottom:calc(var(--u)*2);max-width:70ch;
}
.ladder__row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:6px clamp(14px,2.4vw,32px);padding:clamp(14px,2vw,20px) 0;
  border-top:1px solid var(--line);
}
.ladder__row:last-of-type{border-bottom:1px solid var(--line)}
.ladder__n{font:500 var(--t-tag)/1.7 var(--f-mono);color:var(--muted);letter-spacing:.12em}
.ladder__t{display:grid;gap:4px}
.ladder__t b{font:500 var(--t-h3)/1.2 var(--f-sans);letter-spacing:-.01em}
.ladder__t span{font-size:var(--t-small);line-height:1.6;color:var(--muted)}
.ladder__fig{
  justify-self:end;white-space:nowrap;
  font:500 var(--t-small)/1.4 var(--f-mono);letter-spacing:.02em;
}
.ladder__foot{margin-top:calc(var(--u)*3);color:var(--muted);max-width:70ch}
@media (max-width:640px){
  .ladder__row{grid-template-columns:auto 1fr}
  .ladder__fig{grid-column:2;justify-self:start;padding-top:6px}
}
@media (max-width:960px){.price{grid-template-columns:1fr}.price__box,.price__side{grid-column:1 / -1}}
.price__row{display:grid;grid-template-columns:auto 1fr;gap:14px;padding-bottom:calc(var(--u)*3);border-bottom:1px solid var(--line)}
.price__row:last-child{border-bottom:0;padding-bottom:0}
.price__row .k{font:500 var(--t-tag)/1.6 var(--f-mono);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.price__row .v{font-size:var(--t-small);line-height:1.65;color:var(--muted)}
.price__row .v strong{color:var(--graphite);font-weight:500}

/* ---------- 07. Экспресс-проверка (второстепенный блок) ---------- */
.tool{border:1px solid var(--graphite);background:var(--sheet)}
.tool__head{padding:clamp(22px,3vw,34px);border-bottom:1px solid var(--line)}
.tool__head h2{font-size:clamp(1.35rem,1.05rem + 1.2vw,1.875rem);margin:calc(var(--u)*2) 0 10px}
.tool__body{padding:clamp(22px,3vw,34px);display:grid;gap:calc(var(--u)*2)}
.tool__row{display:grid;grid-template-columns:1fr auto;gap:var(--u) calc(var(--u)*2);align-items:end}
@media (max-width:640px){.tool__row{grid-template-columns:1fr}}

/* ---------- 08. Обо мне ---------- */
.about{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);align-items:start}
.about__photo{grid-column:span 4}
.about__text{grid-column:6 / span 7}
@media (max-width:960px){.about{grid-template-columns:1fr}.about__photo{grid-column:1 / -1;max-width:340px}.about__text{grid-column:1 / -1}}

.portrait{border:1px solid var(--graphite);background:var(--panel)}
.portrait__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel)}
.portrait__img img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  /* Фильтр — часть палитры: на тёмном листе лицу нужен обратный ход. */
  filter:var(--portrait-filter);
}
/* Тонировка под графит + едва заметная сетка поверх — фото становится частью чертежа */
.portrait__img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px;
  mix-blend-mode:overlay;
}
.portrait.is-empty .portrait__img{display:grid;place-items:center}
.portrait.is-empty .portrait__img img{display:none}
.portrait.is-empty .portrait__img::before{
  content:"ФОТО 4:5";position:absolute;inset:0;display:grid;place-items:center;
  font:400 var(--t-tag)/1 var(--f-mono);letter-spacing:.2em;color:rgba(var(--on-panel),.35);
}
.portrait__cap{
  display:flex;border-top:1px solid var(--line);background:var(--sheet);
}
.portrait__cap span{padding:8px 11px;font:500 var(--t-tag)/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.09em}
.portrait__cap span + span{border-left:1px solid var(--line);color:var(--muted)}

.about__text h2{margin-block:calc(var(--u)*2) calc(var(--u)*3)}
.facts{display:grid;gap:0;margin-top:calc(var(--u)*4)}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,2vw,28px);padding:18px 0;border-top:1px solid var(--line)}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts .k{font:500 var(--t-tag)/1.7 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.facts .v{font-size:var(--t-small);line-height:1.65;color:var(--muted);max-width:56ch}
@media (max-width:600px){.facts li{grid-template-columns:1fr;gap:6px}}

/* ---------- 09. Заявка ---------- */
.cta{background:var(--panel);color:rgb(var(--on-panel));border-top:1px solid var(--line)}
.cta .lede{color:rgba(var(--on-panel),.72)}
.cta .tag{color:rgba(var(--on-panel),.6)}
.cta .tag::before{background:rgba(var(--on-panel),.6)}
.cta__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,4vw,64px) var(--gut);align-items:start}
.cta__left{grid-column:span 6}
.cta__right{grid-column:8 / span 5}
@media (max-width:960px){.cta__grid{grid-template-columns:1fr}.cta__left,.cta__right{grid-column:1 / -1}}
.cta__list{margin-top:calc(var(--u)*4);display:grid;gap:0}
.cta__list li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 0;border-top:1px solid rgba(var(--on-panel),.18)}
.cta__list li:last-child{border-bottom:1px solid rgba(var(--on-panel),.18)}
.cta__list .n{font:500 var(--t-tag)/1.7 var(--f-mono);color:rgba(var(--on-panel),.5)}
.cta__list .v{font-size:var(--t-small);line-height:1.6;color:rgba(var(--on-panel),.85)}

/* ---------- Формы ---------- */
.form{display:grid;gap:calc(var(--u)*2)}
.field{display:grid;gap:8px}
.field > label{font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.cta .field > label{color:rgba(var(--on-panel),.6)}
.input{
  width:100%;padding:15px 16px;background:var(--sheet);color:var(--graphite);
  border:1px solid var(--line);border-radius:0;
  font:400 var(--t-body)/1.3 var(--f-sans);
  transition:border-color .16s,box-shadow .16s;
}
.input::placeholder{color:#A6ABA3}
.input:hover{border-color:var(--muted)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cta .input{background:transparent;color:rgb(var(--on-panel));border-color:rgba(var(--on-panel),.3)}
.cta .input::placeholder{color:rgba(var(--on-panel),.35)}
.cta .input:hover{border-color:rgba(var(--on-panel),.55)}
.cta .input:focus{border-color:rgb(var(--on-panel));box-shadow:inset 0 0 0 1px rgb(var(--on-panel))}
.cta .btn{background:rgb(var(--on-panel));color:var(--panel);border-color:rgb(var(--on-panel))}
.cta .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.consent{font:400 var(--t-tag)/1.55 var(--f-mono);color:rgba(var(--on-panel),.55)}
.consent a{color:inherit}
.err{font:400 var(--t-tag)/1.5 var(--f-mono);color:var(--ink);display:none}
.cta .err{color:#FFD2CB}
.field.is-bad .err{display:block}
.field.is-bad .input{border-color:currentColor}
/* Подстановка сохранённых данных в браузере красит поле в голубой.
   Возвращаем бумажный фон, иначе форма выглядит чужой. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--graphite);
  -webkit-box-shadow:0 0 0 40px var(--sheet) inset;
  box-shadow:0 0 0 40px var(--sheet) inset;
}

/* Сообщение об успехе */
.done{border:1px solid var(--paper);padding:22px;margin-bottom:calc(var(--u)*3)}
.done b{display:block;font:500 var(--t-small)/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.done--bad{border-style:dashed}
.done p{font-size:var(--t-small);color:rgba(var(--on-panel),.72)}
.note{border:1px solid var(--line);background:var(--sheet);padding:18px;font-size:var(--t-small);line-height:1.55}

/* ---------- Подвал ---------- */
.foot{border-top:1px solid var(--line);padding-block:calc(var(--u)*5)}
.foot__in{display:flex;flex-wrap:wrap;gap:var(--u) calc(var(--u)*3);justify-content:space-between;align-items:center}
.foot p,.foot a{font:400 var(--t-tag)/1.6 var(--f-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.foot a{text-decoration:none;border-bottom:1px solid var(--line)}
.foot a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- Появление блоков ---------- */
.js-anim .rv{opacity:0;transform:translateY(14px)}
.js-anim .rv.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.js-anim .rv-d1.is-in{transition-delay:.06s}
.js-anim .rv-d2.is-in{transition-delay:.12s}
.js-anim .rv-d3.is-in{transition-delay:.18s}

/* Первый экран: хаос собирается в порядок (один раз, при загрузке) */
/* Появление: бумажки сперва лежат ниже и криво, потом поднимаются на
   место и только тогда становятся читаемыми. Это и есть «поднимаются
   чуть вверх, чтобы стало видно надписи». */
.js-anim .slip{transition:transform .8s cubic-bezier(.2,.7,.25,1),opacity .5s ease}
.js-anim .flow:not(.is-set) .slip{opacity:0}
/* До появления записки утоплены в карточку и почти без наклона — потом
   выезжают вверх и расходятся веером. */
.js-anim .flow:not(.is-set) .slip{transform:rotate(0deg) translateY(64px)}
.js-anim .flow:not(.is-set) .blueprint{opacity:0;transform:translateY(16px)}
.js-anim .blueprint{transition:opacity .6s ease .25s,transform .6s cubic-bezier(.2,.7,.3,1) .25s}

@media (prefers-reduced-motion:reduce){
  .js-anim .rv,.js-anim .slip,.js-anim .blueprint{opacity:1!important;transition:none!important}
  .js-anim .slip{transform:rotate(var(--tilt))!important}
  .flow.is-set .slip{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- Узкие экраны (360px и ниже) ---------- */
@media (max-width:400px){
  :root{--pad:16px}
  /* На узком экране четыре веера не помещаются: крайняя убирается,
     остальные жмутся. Три записки читаются, четыре — превращаются в кашу. */
  .flow{padding-top:62px}
  .slip{width:min(52%,124px);min-height:112px;padding:6px 8px}
  .slip:nth-child(1){left:14%;  top:0}
  .slip:nth-child(2){left:0;    top:22px}
  .slip:nth-child(3){right:0;   top:6px}
  .slip:nth-child(4){display:none}
  .order__row{grid-template-columns:auto 1fr}
  .order__row i{grid-column:2;justify-self:start}
}


/* =========================================================================
   ДОБАВЛЕНИЯ: телефон в шапке, липкая кнопка, cookie, вопросы, клуб, документ
   ========================================================================= */

/* ---------- Телефон в шапке ---------- */
.head__tel{
  font:500 var(--t-small)/1 var(--f-mono);letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;flex:none;
  border-bottom:1px solid var(--line);padding-bottom:2px;
}
.head__tel:hover{color:var(--ink);border-color:var(--ink)}
/* На узком десктопе телефон прячется, чтобы не ломать строку.
   На телефоне он снова появляется — уже внутри выпадающей панели. */
@media (max-width:1200px){.head__tel{display:none}}

/* ---------- Липкая кнопка на телефоне ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  border-top:1px solid var(--graphite);background:var(--paper);
}
.dock a{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:15px 12px;text-decoration:none;
  font:500 var(--t-small)/1 var(--f-sans);
}
.dock__tel{color:var(--graphite);border-right:1px solid var(--graphite);flex:0 0 40%}
.dock__cta{background:var(--graphite);color:var(--paper)}
@media (max-width:860px){
  .dock{display:flex}
  body{padding-bottom:52px}
  .cookie{bottom:52px}
}

/* ---------- Предупреждение о cookie ---------- */
.cookie{
  position:fixed;left:var(--pad);right:var(--pad);bottom:16px;z-index:50;
  max-width:640px;margin-inline:auto;
  display:flex;gap:var(--gut);align-items:center;flex-wrap:wrap;
  padding:16px 18px;background:var(--sheet);
  border:1px solid var(--graphite);box-shadow:6px 8px 0 rgba(var(--shade),.08);
}
.cookie__text{flex:1;min-width:220px;font:400 var(--t-tag)/1.6 var(--f-mono);color:var(--muted)}
.cookie__text a{color:var(--ink)}
.cookie .btn--sm{flex:none}
@media (max-width:520px){.cookie{left:8px;right:8px;bottom:8px;padding:14px}.cookie .btn--sm{width:100%;justify-content:center}}

/* ---------- Согласие рядом с формой ---------- */
.check{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  cursor:pointer;font:400 var(--t-tag)/1.55 var(--f-mono);color:var(--muted);
}
.check input{
  appearance:none;-webkit-appearance:none;margin:2px 0 0;
  width:16px;height:16px;flex:none;border:1px solid var(--line);
  background:var(--sheet);cursor:pointer;display:grid;place-items:center;
}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check a{color:var(--ink)}
.cta .check{color:rgba(var(--on-panel),.6)}
.cta .check input{background:transparent;border-color:rgba(var(--on-panel),.4)}
.cta .check input:checked{background:rgb(var(--on-panel));border-color:rgb(var(--on-panel))}
.cta .check input:checked::after{border-color:var(--graphite)}
.cta .check a{color:rgb(var(--on-panel))}
.check.is-bad input{border-color:var(--ink)}
.cta .check.is-bad input{border-color:#FFD2CB}

/* Ошибка, пришедшая с сервера, показывается сразу */
.err--shown{display:block}

/* ---------- Выпадающий список ---------- */
select.input{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:40px;
}
.cta select.input option{background:var(--sheet);color:var(--graphite)}

/* ---------- Частые вопросы ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(18px,2.4vw,24px) 44px clamp(18px,2.4vw,24px) 0;
  font-size:clamp(1rem,.95rem + .35vw,1.1875rem);font-weight:500;
  line-height:1.4;letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";position:absolute;right:14px;top:50%;width:13px;height:13px;
  border-right:1px solid var(--graphite);border-bottom:1px solid var(--graphite);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq__item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__item summary:hover{color:var(--ink)}
.faq__item p{
  padding:0 clamp(0px,4vw,56px) clamp(20px,2.6vw,28px) 0;
  max-width:72ch;color:var(--muted);font-size:var(--t-small);line-height:1.7;
}

/* ---------- Тарифы клуба ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--gut)}
.plan{position:relative;background:var(--sheet);border:1px solid var(--line);padding:clamp(22px,2.8vw,32px)}
.plan__n{font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.plan__fig{
  font-family:var(--f-sans);font-weight:500;line-height:1;letter-spacing:-.03em;
  font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);
  margin:calc(var(--u)*2) 0 calc(var(--u)*1.5);
}
.plan__note{color:var(--muted);font-size:var(--t-small);line-height:1.6}
.plan--best{border-color:var(--panel);background:var(--panel);color:rgb(var(--on-panel))}
.plan--best .plan__n{color:rgba(var(--on-panel),.6)}
.plan--best .plan__note{color:rgba(var(--on-panel),.72)}
.plan__flag{
  position:absolute;top:-1px;right:-1px;
  background:var(--ink);color:#fff;padding:5px 10px;
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
}

/* ---------- Тизер клуба на главной ---------- */
.teaser{
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,4vw,64px);
  border:1px solid var(--graphite);background:var(--sheet);padding:clamp(24px,3.4vw,48px);
}
@media (max-width:860px){.teaser{grid-template-columns:1fr}}
.teaser__text h2{margin-block:calc(var(--u)*2) calc(var(--u)*2)}
.teaser__side{display:grid;gap:0;align-content:start}
.teaser__row{
  display:grid;grid-template-columns:auto 1fr;gap:14px;
  padding:14px 0;border-top:1px solid var(--line);
}
.teaser__row:last-child{border-bottom:1px solid var(--line)}
.teaser__row b{font:500 var(--t-tag)/1.7 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.teaser__row span{font-size:var(--t-small);line-height:1.6;color:var(--muted)}

/* ---------- Телефон в блоке заявки ---------- */
.cta__limit{
  margin-top:calc(var(--u)*4);padding-left:14px;
  border-left:1px solid rgba(var(--on-panel),.28);
  font:400 var(--t-small)/1.6 var(--f-mono);color:rgba(var(--on-panel),.72);max-width:52ch;
}
.cta__phone{
  margin-top:calc(var(--u)*4);font:400 var(--t-small)/1.6 var(--f-mono);
  color:rgba(var(--on-panel),.6);
}
.cta__phone a{color:rgb(var(--on-panel));border-bottom:1px solid rgba(var(--on-panel),.4);text-decoration:none}
.cta__phone a:hover{border-color:rgb(var(--on-panel))}

/* ---------- Схема процессов ----------
   Лист, который человек уносит. Всё рисуется линиями цвета текста:
   такой лист одинаково выглядит на экране, на печати и в чёрно-белом
   принтере, который у малого бизнеса обычно и стоит. */
.scheme{
  margin:0;background:var(--sheet);border:1px solid var(--graphite);
  padding:clamp(14px,2vw,26px);
}
.scheme__scroll{overflow-x:auto}
.scheme__svg{display:block;width:100%;height:auto;min-width:620px}
/* Подсказка про горизонтальную прокрутку нужна только там, где она есть. */
.scheme__pan{display:none;margin-top:10px;font-size:var(--t-tag);color:var(--muted)}
@media (max-width:700px){.scheme__pan{display:block}}
.scheme__svg text{font-family:var(--f-mono)}
.sch-step rect{fill:none;stroke:var(--graphite);stroke-width:1}
.sch-step.is-leak rect{stroke-dasharray:5 3;fill:var(--ink-wash)}
.sch-n{font-size:10px;fill:var(--muted);letter-spacing:.14em}
.sch-t{font-size:17px;font-weight:500;fill:var(--graphite)}
.sch-said{font-size:10.5px;fill:var(--muted)}
.sch-v{font-size:11px;fill:var(--graphite)}
.sch-mark{font-size:9.5px;fill:var(--muted);letter-spacing:.16em;text-transform:uppercase}
.sch-step.is-leak .sch-mark{fill:var(--ink);font-weight:500}
.sch-fix{font-size:9.5px;fill:var(--muted);letter-spacing:.04em}
.sch-top{font-size:10px;fill:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.sch-arrow,.sch-tip{fill:none;stroke:var(--graphite);stroke-width:1}
.sch-loop{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:4 3}
.sch-tip--loop{stroke:var(--ink)}
.scheme__cap{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font:400 var(--t-small)/1.55 var(--f-sans);color:var(--muted);max-width:74ch;
}
.scheme__go{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--u) calc(var(--u)*2);
  margin-top:calc(var(--u)*4);
}
.scheme__hint{font:400 var(--t-tag)/1.4 var(--f-mono);color:var(--muted)}
.scheme__stamp{
  display:flex;flex-wrap:wrap;margin-top:calc(var(--u)*3);border:1px solid var(--line);
}
.scheme__stamp span{
  padding:9px 14px;font:400 var(--t-tag)/1.3 var(--f-mono);color:var(--muted);
}
.scheme__stamp span + span{border-left:1px solid var(--line)}
.scheme__stamp b{font-weight:500;color:var(--graphite)}

/* Печать: на листе остаётся лист. Всё остальное — экран, на котором
   его открыли. */
@media print{
  @page{size:A4;margin:14mm}
  /* Печать всегда светлая: в тёмной теме карандаш стал светлым, и на
     белой бумаге от чертежа не осталось бы ни линии. Палитра здесь
     задаётся заново, а не «поверх» — правил вёрстки это не касается. */
  :root{
    --graphite:#0D0F0E;--paper:#fff;--sheet:#fff;--line:#B9BDB5;
    --muted:#4A4F48;--ink:#1F3EC8;--panel:#fff;--on-panel:13,15,14;
    --shade:0,0,0;--grid-minor:transparent;--grid-major:transparent;
    --ink-wash:transparent;--graphite-wash:transparent;
    --alarm:#B3261E;--alarm-ink:#7A1C15;--warn:#8A6A00;--good:#1B6B3A;
  }
  html,body{background:#fff!important;color:#0D0F0E!important}
  .head,.dock,.foot,.cookie,.skip,.scheme__go,.scheme-after,
  .cta,.tool,.burger,
  .sheet--first .lead,.sheet--first .tag{display:none!important}
  .sheet,.wrap{padding:0!important;margin:0!important;max-width:none!important}
  .scheme{border:0;padding:0;break-inside:avoid}
  .scheme__scroll{overflow:visible}
  .scheme__svg{min-width:0}
  .scheme__pan{display:none!important}
  .scheme-sheet{break-before:avoid}
  .q-title{font-size:16pt;margin-bottom:8mm}
  a{color:#000;text-decoration:none}
}

/* Кнопка печати вызывается скриптом, и без него была бы мёртвой.
   Ctrl+P работает всегда — пропадает обещание кнопки, а не возможность. */
html:not([data-js]) [data-print]{display:none}

/* ---------- Документ (политика) ---------- */
.doc__body{max-width:74ch}
.doc__meta{font:400 var(--t-tag)/1.6 var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:calc(var(--u)*4)}
.doc__body h3{margin-top:calc(var(--u)*5);margin-bottom:calc(var(--u)*1.5)}
.doc__body p{color:var(--muted);line-height:1.7;font-size:var(--t-small)}
.doc__body p + p{margin-top:calc(var(--u)*1.5)}
.doc__body a{color:var(--ink)}
.doc__list{margin-top:calc(var(--u)*1.5);display:grid;gap:8px}
.doc__list li{
  position:relative;padding-left:20px;color:var(--muted);
  font-size:var(--t-small);line-height:1.7;
}
.doc__list li::before{content:"—";position:absolute;left:0;color:var(--graphite)}
.note b{font-weight:500}


/* ---------- Разбор процессов: тест ---------- */
/* Логика такая же, как у чертежа: один вопрос — один лист, номер слева,
   выбранный вариант обведён синим. Без JS все листы просто идут подряд. */

.tool__list{display:grid;gap:10px;margin:0}
.tool__list li{
  position:relative;padding-left:22px;
  font-size:var(--t-small);line-height:1.6;color:var(--muted);
}
.tool__list li::before{
  content:"—";position:absolute;left:0;color:var(--ink);font-family:var(--f-mono);
}

.q-title{font-size:var(--t-h1);
  font-weight:600;line-height:1.04;letter-spacing:-.025em;margin-bottom:calc(var(--u)*3)}
.q-alert{
  border:1px solid var(--ink);background:var(--ink-wash);color:var(--ink);
  padding:14px 16px;font:400 var(--t-small)/1.5 var(--f-mono);
  margin-bottom:calc(var(--u)*3);
}
.err--on{display:block}

/* Полоса прогресса — прилипает под шапкой */
.q-bar{
  position:sticky;top:64px;z-index:40;
  background:var(--paper);border-bottom:1px solid var(--line);
  padding-block:12px;
}
.q-bar__in{display:flex;align-items:center;gap:calc(var(--u)*2)}
.q-bar__num{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);white-space:nowrap;
}
.q-bar__num b{color:var(--graphite)}
.q-bar__track{flex:1;height:2px;background:var(--line);position:relative}
.q-bar__fill{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--ink);
  transition:width .22s ease;
}

.q-steps{padding-block:calc(var(--u)*5) var(--sec)}
.q-step{border:0;padding:0;margin:0;max-width:62ch}
.q-step + .q-step{margin-top:calc(var(--u)*8);padding-top:calc(var(--u)*8);border-top:1px solid var(--line)}
.q-sprite{position:absolute;width:0;height:0;overflow:hidden}

.q-step__legend{display:grid;gap:8px;margin-bottom:calc(var(--u)*3);padding:0}
/* fill и stroke наследуются, поэтому доходят внутрь <use>. Если задать их
   селектором по самому набору значков, до копии они не дойдут, и значок
   зальётся чёрным — что и случилось в первой версии. */
.q-step__icon{
  width:34px;height:34px;color:var(--ink);
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:square;stroke-linejoin:miter;
  margin-bottom:calc(var(--u)*.5);
}
.q-step__num{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink);
}
.q-step__title{font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);font-weight:600;
  line-height:1.2;letter-spacing:-.015em;display:block}
.q-step__hint{font:400 var(--t-small)/1.5 var(--f-sans);color:var(--muted);display:block}

.q-opts{display:grid;gap:10px}
@media (min-width:720px){
  /* На широком экране длинные списки идут в два столбца — иначе вопрос
     с семью вариантами выгоняет кнопку за нижний край экрана. */
  .q-opts{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .q-other{grid-column:1/-1}
}
.q-opt{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  border:1px solid var(--line);background:var(--sheet);
  padding:14px 16px;transition:border-color .14s ease,background .14s ease;
}
.q-opt:hover{border-color:var(--graphite)}
.q-opt input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:18px;height:18px;margin-top:1px;border:1px solid var(--graphite);
  background:var(--sheet);cursor:pointer;position:relative;
}
.q-opt input[type=radio]{border-radius:50%}
.q-opt input:checked{border-color:var(--ink)}
.q-opt input:checked::after{
  content:"";position:absolute;inset:3px;background:var(--ink);
}
.q-opt input[type=radio]:checked::after{border-radius:50%}
.q-opt input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.q-opt span{font-size:1rem;line-height:1.4}
.q-opt:has(input:checked){border-color:var(--ink);background:var(--ink-wash)}
.q-other{margin-top:2px}
.q-text{min-height:120px;resize:vertical;font-family:var(--f-sans)}

.q-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--u);margin-top:calc(var(--u)*3)}
.q-keys{
  font:400 var(--t-tag)/1.4 var(--f-mono);color:var(--muted);
  letter-spacing:.04em;
}
@media (max-width:640px){.q-keys{display:none}}

/* Номер варианта — как на чертеже, слева от подписи */
.q-opt__key{
  flex:0 0 auto;font:500 var(--t-tag)/1 var(--f-mono);color:var(--muted);
  min-width:1.1em;padding-top:3px;
}
.q-opt:has(input:checked) .q-opt__key{color:var(--ink)}
@media (max-width:640px){.q-opt__key{display:none}}
/* Столбцы прижимаются к верху. Иначе поле без подписи снизу растягивается
   на высоту соседнего, у которого подпись есть, — и съезжает вниз. */
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2);align-items:start}
.q-grid > .field{align-content:start}
@media (max-width:640px){.q-grid{grid-template-columns:1fr}}
.q-step--last .check{margin-top:var(--u)}
.btn--lg{padding:17px 26px;font-size:1rem}

/* Со скриптом виден один лист за раз */
.q-js .q-step{display:none}
.q-js .q-step.is-now{display:block;animation:q-in .2s ease}
.q-js .q-step + .q-step{margin-top:0;padding-top:0;border-top:0}
@keyframes q-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .q-js .q-step.is-now{animation:none}
  .q-bar__fill{transition:none}
}

/* ---------- Разбор процессов: результат ---------- */
.res-money{border:1px solid var(--graphite);background:var(--sheet);padding:clamp(24px,4vw,44px)}
.res-money__label{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);
}
.res-money__fig{
  font-family:var(--f-sans);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2.2rem,1.2rem + 4.4vw,4.5rem);
  color:var(--ink);margin:calc(var(--u)*2) 0 calc(var(--u)*3);
}
.res-money__fig span{font-size:.3em;font-weight:400;color:var(--muted);letter-spacing:0}
.res-money__parts{display:grid;gap:10px;margin-bottom:calc(var(--u)*3)}
.res-money__parts li{
  position:relative;padding-left:22px;font-size:var(--t-small);
  line-height:1.6;color:var(--muted);
}
.res-money__parts li::before{content:"—";position:absolute;left:0;color:var(--graphite);font-family:var(--f-mono)}
.res-money__parts b{color:var(--graphite);font-weight:600}

.res-h{margin-bottom:calc(var(--u)*4)}
.res-list{display:grid;gap:calc(var(--u)*3);counter-reset:none;list-style:none}
.res-item{
  display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u)*2);
  border-left:2px solid var(--ink);padding-left:calc(var(--u)*2);
}
.res-item__num{
  font:500 1.25rem/1 var(--f-mono);color:var(--ink);
}
.res-item h3{font-size:1.125rem;font-weight:600;margin-bottom:8px}
.res-item p{color:var(--muted);line-height:1.65;font-size:var(--t-small)}
.res-ok{margin-top:calc(var(--u)*4)}

.res-next{border:1px solid var(--graphite);background:var(--sheet);padding:clamp(24px,4vw,44px)}
.res-next h2{margin-bottom:calc(var(--u)*2)}
.res-next .btn{margin-top:calc(var(--u)*2);margin-right:var(--u)}

.res-dump summary{
  cursor:pointer;font:500 var(--t-tag)/1 var(--f-mono);
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink);
  padding:14px 0;
}
.res-answers{margin-top:calc(var(--u)*2);max-width:74ch}
.res-answers dt{
  font:500 var(--t-tag)/1.4 var(--f-mono);text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-top:calc(var(--u)*2);
}
.res-answers dd{font-size:var(--t-small);line-height:1.6;margin-top:4px}


/* ---------- Вход через Telegram ---------- */
.tg-login{
  border:1px solid rgba(var(--on-panel),.25);padding:16px 18px;
  margin-bottom:calc(var(--u)*3);display:grid;gap:10px;justify-items:start;
}
.tg-login__label{
  font:500 var(--t-tag)/1 var(--f-mono);text-transform:uppercase;
  letter-spacing:.12em;color:rgba(var(--on-panel),.6);
}
.tg-login iframe{max-width:100%}

/* Блок «вы не знаете, сколько теряете». Стоит вместо суммы, а не рядом
   с ней: это не оговорка к цифре, это сама находка. */
.res-idk{
  border-left:3px solid var(--ink);padding:14px 0 14px 16px;
  margin:0 0 18px;display:grid;gap:8px;
}
.res-idk p{margin:0;font-size:var(--t-small);line-height:1.6}
.res-idk b{font-weight:500}
.res-basis{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}