/* Блок «Что получаете» вписан сборкой пакета 2026-11-10_landing-v6-screen (block.css, tools/block.py);
   всё остальное — дизайн v6 как он лежит в пакете 2026-11-10_landing-v6-design. Этот файл руками не править. */
/* Лендинг Пирса v6 · «Нить», язык доведён. Тексты и нарратив — дизайна v5.
   Раскладка: одна колонка 1200 по центру; по левому полю идёт нить, на ней узлы заголовков; объекты лежат листами на бумаге;
   два объекта шире колонки — экран Пирса и финальная плита, оба 1360.
   Язык: бумага, чернила, янтарь. Чернильная нить — дело как есть; янтарная — нить Пирса; отметка — место денег;
   маркер — слово «деньги». У каждого знака одно начертание на всей странице, и ни один ход не сделан один раз.
   Сквозной ход — «входит много, выходит одно»: герой, разбор, схема, финал; везде одно движение — штрихи бегут по нитям туда, где они сходятся.
   Доска холста не бывает выше 8000: страница на 1440 держится ниже. */
:root{
  /* цвет */
  --paper:#f4f0e7; --sheet:#fffdf9; --tint:#ebe5d8;
  --ink:#1c1712; --ink-2:#4b4136; --mute:#75695b; --quiet:#8c7f6e;      /* quiet — второй голос заголовков, только крупно */
  --line:#dcd4c4; --line-2:#c7bca8;
  --thread:#7d7972;                                                    /* чернильная нить: чернила на 55 % по бумаге */
  --amber:#d97b12; --amber-text:#b5640a; --marker:#ffc655; --pulse:#ffe1a6; --todo:#8f4f08;
                                                                       /* amber-text — последняя фраза главной мысли; pulse — штрих на янтарной нити; todo — пометка незаполненного места */
  --plate:#1c1712; --on-plate:#f6f1e6; --on-plate-2:#b5a892; --on-plate-line:rgba(246,241,230,.16); --amber-on-plate:#f29c2f;
  --logo-ink:#121211;                                                  /* цвет логотипа по киту: design/logo/brand/BRAND.md */
  /* шрифт: заголовки и текст — Onest (у Familjen Grotesk нет кириллицы, ею набран только логотип) */
  --display:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --logo:"Familjen Grotesk","Onest",system-ui,sans-serif;
  /* кегль: десять ступеней; вне шкалы только цена (72) и логотип (22, по киту) */
  --t-hero:80px; --t-h2:54px; --t-claim:34px; --t-title:24px; --t-lead:20px; --t-body:17px; --t-ui:15px; --t-small:14px; --t-micro:13px; --t-label:12px;
  /* мера и шаг */
  --col:1200px; --wide:1360px; --gut:80px; --bleed:40px; --sec:88px; --axis:-36px;
  /* радиусы: плита и лист · карточка · вложенное · элемент управления */
  --r-plate:28px; --r-card:20px; --r-in:14px; --r-ui:12px;
  /* линии: волосная для тихих границ, чернильная для акцента; нить чернильная и янтарная */
  --hair:1px solid var(--line); --rule:1.5px solid var(--ink);
  --w-ink:1.5px; --w-amber:2.5px;
  --shadow-sheet:0 30px 60px -48px rgba(28,23,18,.4); --shadow-lift:0 50px 90px -60px rgba(28,23,18,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
p{margin:0;text-wrap:pretty}
.wrap{position:relative;width:min(var(--col),100% - 2 * var(--gut));margin-inline:auto}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}

/* типографика: два голоса. Первый — утверждение, чернилами и полужирно; второй — продолжение, светлее и тише, с новой строки.
   Курсива нет: у Onest нет своего курсива, а наклон, который подставляет браузер, выглядит подделкой */
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:var(--t-hero);line-height:.98;letter-spacing:-.04em;font-weight:600}
h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.035em;font-weight:600}
h3{font-size:var(--t-title);line-height:1.2;letter-spacing:-.018em;font-weight:600}
.ln,.voice{display:block}                      /* строки заголовка заданы смыслом: предложение, затем второй голос */
.voice{font-weight:400;color:var(--quiet)}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-2)}
.body{color:var(--ink-2)}
.claim{font-family:var(--display);font-size:var(--t-claim);line-height:1.14;letter-spacing:-.028em;font-weight:600;color:var(--ink);text-wrap:balance}

/* маркер: слово «деньги» помечено во всех крупных фразах, всегда в первом голосе */
.hl{position:relative;z-index:0;display:inline-block;line-height:1;white-space:nowrap}
.hl::before{content:"";position:absolute;z-index:-1;left:-.11em;right:-.12em;top:.07em;bottom:-.1em;background:var(--marker);border-radius:.14em .3em .18em .26em / .36em .18em .34em .2em;transform:rotate(-1.1deg)}
.nb{white-space:nowrap}                        /* помеченное слово и знак после него не разрываются */
.plate .hl{color:var(--ink)}
@keyframes swipe{from{clip-path:inset(-20% 100% -20% -10%)}to{clip-path:inset(-20% -10% -20% -10%)}}
/* маркер проводят по слову, когда оно входит в окно; где браузер не умеет — слово помечено сразу */
@supports (animation-timeline: view()){
  .sec .hl::before,.final .hl::before{animation:swipe linear both;animation-timeline:view();animation-range:entry 30% entry 180%}
}

/* кнопки */
.btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 20px 0 5px;border-radius:var(--r-ui);background:var(--ink);color:var(--on-plate);font:600 var(--t-ui)/1 var(--sans);border:0;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.btn .ic{width:38px;height:38px;border-radius:8px;background:var(--marker);color:var(--ink);display:grid;place-items:center;flex:none}
.btn .ic svg{transition:transform .2s}
.btn:hover{background:#000}
.btn:hover .ic svg{transform:translateX(3px)}
.btn.sm{height:44px;padding-right:16px;font-size:var(--t-small)}
.btn.sm .ic{width:34px;height:34px;border-radius:7px}
.btn.lg{height:60px;padding:0 26px 0 7px;gap:14px;border-radius:var(--r-in);font-size:var(--t-body)}
.btn.lg .ic{width:46px;height:46px;border-radius:9px}
.btn.light{background:var(--on-plate);color:var(--ink)}
.btn.light:hover{background:#fff}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.line .ic{background:transparent;width:30px;margin-left:4px;margin-right:-6px}
.btn.line:hover{background:var(--ink);color:var(--on-plate)}
.btn.line:hover .ic{color:var(--marker)}

/* шапка */
.top{position:sticky;top:0;z-index:30;background:rgba(244,240,231,.88);backdrop-filter:saturate(1.2) blur(16px);-webkit-backdrop-filter:saturate(1.2) blur(16px)}
.top .wrap{display:flex;align-items:center;height:76px}
.logo{font-family:var(--logo);font-weight:700;font-size:22px;letter-spacing:-.032em;line-height:1;color:var(--logo-ink)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:16px}
.nav a{font-size:var(--t-ui);font-weight:500;line-height:1;color:var(--ink-2);padding:10px 14px;border-radius:10px;transition:background .15s,color .15s}
.nav a:hover{background:var(--tint);color:var(--ink)}

/* нить по левому полю: от заголовка второго блока до заголовка цены. Отрезок на раздел: идёт от верхнего края раздела до нижнего, цвет задан разделом;
   высоты привязаны к отступам раздела (--pt, --pb), поэтому отрезки сходятся при любом содержимом */
.sec{--pt:var(--sec);--pb:var(--sec);--node-y:21px;position:relative;padding:var(--pt) 0 var(--pb);scroll-margin-top:36px}
.spine{position:absolute;left:var(--axis);top:calc(-1 * var(--pt));bottom:calc(-1 * var(--pb));width:var(--w-amber);margin-left:calc(var(--w-amber) / -2);pointer-events:none}
.spine.ink{width:var(--w-ink);margin-left:calc(var(--w-ink) / -2);background:var(--thread)}
.spine.amber{background:var(--amber)}
.spine.amber.tail{top:auto;height:var(--pb)}
.spine.amber.end{bottom:auto;height:calc(var(--pt) + var(--node-y) + 7px)}
.spine.through{left:calc((100% - min(var(--col),100% - 2 * var(--gut))) / 2 + var(--axis));top:0;bottom:0}   /* отрезок на весь раздел: стоит в разделе, не в колонке */
/* узел: кольцо чернилами — звено разбора; залитый янтарём — нить Пирса; отметка с кольцом — место денег */
.node{position:relative}
.node::before{content:"";position:absolute;z-index:1;left:calc(var(--axis) - 7px);top:var(--node-y);width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid var(--thread);background:var(--paper)}
.node.amber::before{border:0;background:var(--amber);box-shadow:0 0 0 4px var(--paper)}
.node.mark::before{border:0;background:var(--amber);box-shadow:0 0 0 8px var(--paper),0 0 0 9.5px rgba(217,123,18,.55)}

/* 1. обещание: без плиты, на бумаге; мягкий дневной свет за заголовком */
.hero{position:relative;overflow:hidden;padding:56px 0 0}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(52% 62% at 50% 36%,rgba(255,253,249,.95) 0%,rgba(255,253,249,0) 72%);pointer-events:none}
.hero-in{position:relative;z-index:1;width:min(var(--col),100% - 2 * var(--gut));margin-inline:auto;padding-bottom:124px;text-align:center}
.hero .lead{max-width:620px;margin:30px auto 46px}
.cta{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}
.cta .btn,.cta .note{position:relative;z-index:1}
.note{font-size:var(--t-small);color:var(--mute)}
/* слой нитей привязан к кнопке: её середина — точка (1400, 560) слоя, как бы ни легли строки над ней */
.threads{position:absolute;z-index:0;left:50%;top:30px;width:2800px;height:1000px;max-width:none;transform:translate(-1400px,-560px);pointer-events:none}
.th-ink use{fill:none;stroke:var(--thread);stroke-width:1.5;stroke-linecap:round}
.th-amb{fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round}
.th-dot{fill:var(--amber)}
.th-ring{fill:none;stroke:var(--amber);stroke-opacity:.55;stroke-width:1.5;transform-box:fill-box;transform-origin:center}

/* штрихи на нитях — одно движение на всю страницу (герой, схема, финал): тёмные бегут туда, где нити сходятся, светлый — по янтарной наружу */
.th-run use,.th-rush use{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-dasharray:.012 3;stroke-dashoffset:.02}
.th-rush use{stroke-dasharray:.03 3;stroke-dashoffset:.04}
.th-amb-run,.th-amb-rush{fill:none;stroke:var(--pulse);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:.07 3;stroke-dashoffset:.08}
@keyframes run{from{stroke-dashoffset:.04}to{stroke-dashoffset:-1}}
@keyframes rush{from{stroke-dashoffset:-.3}to{stroke-dashoffset:-1}}   /* по наведению штрих стартует ближе к кнопке: отклик сразу */
@keyframes run-out{0%{stroke-dashoffset:.08}14%,100%{stroke-dashoffset:-1}}
@keyframes ping{0%,13%{transform:scale(1);stroke-opacity:.55}19%{transform:scale(1.5);stroke-opacity:.15}30%,100%{transform:scale(1);stroke-opacity:.55}}
@keyframes ping-once{0%{transform:scale(1);stroke-opacity:.55}45%{transform:scale(1.6);stroke-opacity:.15}100%{transform:scale(1);stroke-opacity:.55}}

/* живое, но спокойное. Сначала один раз: нити приходят слева, янтарная выходит из кнопки, отметка проявляется, маркер проводят по слову.
   Потом по нитям идут штрихи: много к кнопке, один янтарный от неё, отметка откликается */
@keyframes draw{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.th-ink use,.th-amb{stroke-dasharray:1 3;stroke-dashoffset:0}          /* пробел длиннее штриха: до начала рисования на линии не остаётся точки */
.th-ink use{animation:draw 1.15s cubic-bezier(.3,.1,.25,1) both}       /* задержка каждой нити — в разметке */
.th-amb{animation:draw .6s cubic-bezier(.4,.1,.2,1) 1.35s both}
.th-mark{transform-box:fill-box;transform-origin:center;animation:pop .4s cubic-bezier(.3,1.4,.5,1) 1.9s both}
.hero .hl::before{animation:swipe .55s cubic-bezier(.4,.1,.2,1) 2.05s both}
.th-run use{animation:run 8s linear infinite}
.th-amb-run{animation:run-out 8s linear 4s infinite}
.th-ring{animation:ping 8s linear 4s infinite}
/* наведение на кнопку: штрихи разом влетают в неё, из неё вылетает один янтарный, отметка откликается */
.cta .btn:hover ~ .threads .th-rush use{animation:rush .55s cubic-bezier(.5,0,.75,.6) both}
.cta .btn:hover ~ .threads .th-amb-rush{animation:run .4s cubic-bezier(.3,0,.5,1) .5s both}
.cta .btn:hover ~ .threads .th-ring{animation:ping-once .5s ease-out .8s both}
@media (prefers-reduced-motion:reduce){
  .th-ink use,.th-amb,.th-mark,.th-run use,.th-amb-run,.th-ring,.fn-run,.inflow path,.hl::before{animation:none!important}
}

/* заголовок раздела: два голоса, второй с новой строки; подводка под ним */
.head{margin-bottom:48px}
.head h2{max-width:1040px}
.head .lead{max-width:700px;margin-top:26px}

/* лист: объект на бумаге */
.sheet{background:var(--sheet);border:var(--hair);border-radius:var(--r-plate);box-shadow:var(--shadow-sheet)}

/* 2. почему не видно: слева подводка и три звена на нити, последнее звено — вывод; справа карта одного дела */
.s-why{--pt:84px}
.s-why .spine.ink{top:calc(var(--node-y) + 7px)}      /* нить начинается узлом у заголовка */
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.why-text{display:flex;flex-direction:column;padding-right:72px}
.why-text .lead{margin-bottom:36px}
.chain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1}
.beat{--node-y:7px;padding-bottom:30px}
.beat h3{margin-bottom:10px}
.beat p{color:var(--ink-2)}
.tools{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--ink-2)}
.tools b{color:var(--ink);font-weight:600}
.beat.turn{--node-y:24px;flex:1;padding:12px 0 0}
.beat.turn::after{content:"";position:absolute;left:var(--axis);top:calc(var(--node-y) + 7px);bottom:0;width:var(--w-amber);margin-left:calc(var(--w-amber) / -2);background:var(--amber)}
.beat .claim{color:var(--ink)}
.claim .now{display:block;color:var(--amber-text)}   /* главная мысль блока: стоит на нити, последняя фраза — отдельной строкой и янтарём */
/* нити дела продолжают входить слева: у заголовка и у каждого звена ещё одна вливается в нить поля — ход героя, только медленно */
.inflow{position:absolute;right:calc(100% - var(--axis));bottom:calc(100% - var(--node-y) - 7px);max-width:none;overflow:visible;pointer-events:none;view-timeline:--inflow block}
.inflow path{fill:none;stroke:var(--thread);stroke-width:var(--w-ink)}
@supports (animation-timeline: view()){
  .inflow path{stroke-dasharray:1 3;animation:draw linear both;animation-timeline:--inflow;animation-range:entry 0% cover 45%}
}

/* карта одного дела: белый круг на бумаге, имена сторон по ободу; слова в центре — ярлык поверх карты */
.mapfig{margin:0;align-self:start}
.mapfig-title{font-family:var(--display);font-size:var(--t-title);line-height:1.2;letter-spacing:-.018em;font-weight:600}
.mapfig-pic{position:relative;width:calc(100% + 56px);margin:2px -28px 0;aspect-ratio:1}
.mp{display:block;width:100%;height:100%;overflow:visible}
.mp-disc{fill:var(--sheet);stroke:var(--line);stroke-width:1.5}
.mp-lk path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-opacity:.19}
.mp-rim{fill:none;stroke:var(--line-2);stroke-width:3;stroke-linecap:round}
.mp-dot{fill:var(--ink)}
.mp-place{font-family:var(--sans);font-size:25px;font-weight:700;letter-spacing:.12em;fill:var(--ink)}
.mapfig-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);background:var(--sheet);border:var(--rule);border-radius:var(--r-ui);padding:13px 22px 14px;font:600 var(--t-body)/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink);text-align:center;white-space:nowrap;box-shadow:0 16px 30px -18px rgba(28,23,18,.55)}
.mapfig figcaption{display:grid;gap:12px;margin-top:6px}
.mapfig-data{display:flex;gap:22px;font:500 var(--t-small)/1 var(--sans);color:var(--mute)}
.mapfig-data b{font-weight:700;color:var(--ink)}
.mapfig-note{font-size:var(--t-small);line-height:1.5;color:var(--mute);max-width:520px}
.todo{color:var(--todo);border-bottom:1px dashed var(--amber)}

/* 3. как это работает: один лист, сверху картинка, под каждой её частью свой шаг */
.s-how{--pt:64px}
.flow{margin:0;padding:40px 40px 36px}
.fl-scroll{margin:0 0 36px}
.fl-lines .b{fill:none;stroke:var(--thread);stroke-width:1.5}
.fl-lines .b.out{stroke:var(--amber);stroke-width:2.5;stroke-linecap:round}
/* по нитям идут короткие штрихи: слева тёмные, к карте; справа светлый, от карты к программе */
.fl-lines .d{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:14 440;animation:fl-run 5.6s linear infinite}
.fl-lines .d.in{stroke:var(--ink);stroke-width:2}
.fl-lines .d.out{stroke:var(--pulse);animation:fl-run-out 7.2s linear infinite}
@keyframes fl-run{from{stroke-dashoffset:14}to{stroke-dashoffset:-300}}
@keyframes fl-run-out{0%{stroke-dashoffset:14}48%,100%{stroke-dashoffset:-240}}
@media (prefers-reduced-motion:reduce){.fl-lines .d{animation:none;opacity:0}}
.fl-k{font:600 var(--t-label)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.fl-pill{display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--paper);border:var(--hair);border-radius:var(--r-ui);font:500 var(--t-ui)/1 var(--sans);color:var(--ink);white-space:nowrap}
.fl-pill i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.fl-map{border-radius:50%;background:var(--paper);border:1.5px solid var(--line-2)}
.fl-emb .orb{fill:none;stroke:var(--line-2);stroke-width:1.5}
.fl-emb .s{fill:var(--sheet);stroke:var(--thread);stroke-width:2}
.fl-emb .sp{fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round}
.fl-emb .m-dot{fill:var(--amber)}
.fl-emb .m-ring{fill:none;stroke:var(--amber);stroke-opacity:.55;stroke-width:1.5}
.fl-q{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:50%;background:var(--ink);color:var(--on-plate);font:600 var(--t-micro)/1.15 var(--sans)}
.fl-prog{border-radius:var(--r-in);background:var(--plate)}
.fl-in{background:var(--amber-on-plate)}        /* янтарная нить доходит до первого хода */
.fl-thread{background:rgba(246,241,230,.22)}
.fl-row{display:flex;align-items:center;gap:12px;padding:0 18px;font:500 var(--t-ui)/1 var(--sans);color:var(--on-plate);white-space:nowrap}
.fl-row i{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--amber-on-plate);color:var(--ink);font:700 var(--t-label)/1 var(--sans);font-style:normal}
.fl-goal{display:flex;align-items:center;justify-content:center;border-radius:0 0 var(--r-in) var(--r-in);background:var(--marker);color:var(--ink);font:600 var(--t-ui)/1 var(--sans);white-space:nowrap}
.fl-cap{text-align:center;font:500 var(--t-small)/1.2 var(--sans);color:var(--mute)}
.fl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:0 41px}
.fl-step{display:grid;grid-row:span 2;grid-template-rows:subgrid;border-top:var(--rule);padding-top:20px}
.fl-step h3{margin-bottom:10px}
.fl-step p{color:var(--ink-2)}

.caps2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto auto;gap:0 48px;margin-top:48px}
.cap2{display:grid;grid-row:span 2;grid-template-rows:subgrid;border-top:var(--rule);padding-top:20px}
.cap2 h3{margin-bottom:10px}
.cap2 p{color:var(--ink-2)}
/* 4. что получаете: слева карта, справа Пирс — как на экране продукта, только нарисовано знаками страницы.
   Сетка — половины, та же, что у второго блока, зеркально: там слева разбор, справа карта, тут слева карта, справа Пирс;
   подписи стоят под ними в тех же половинах. Карта — та же, что во втором блоке: там клубок и «деньги где-то здесь»,
   тут три связи и «деньги здесь» */
.got{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;align-items:center;margin:0}
.got .mapfig-pic{width:calc(100% + 32px);margin:0 -16px}
.got figcaption{grid-column:1 / -1;display:flex;justify-content:space-between;gap:24px;margin-top:10px;font-size:var(--t-small);color:var(--mute)}
.caps2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;margin-top:40px}
/* на карте: чернильная нить — связь работает, янтарная — порвана; толщины в единицах карты, на экране 1,5 и 2,5 px */
.mq-lk{fill:none;stroke:var(--thread);stroke-width:2.33;stroke-linecap:round}
.mq-lk.brk{stroke:var(--amber);stroke-width:3.88}
/* штрихи — движение страницы: тёмные бегут по нитям к разрыву, светлый по янтарной не доходит до отметки, отметка откликается
   (её отклик — .th-ring, тот же круг в 8 с, что у отметки героя) */
.mq-run{fill:none;stroke:var(--ink);stroke-width:3.1;stroke-linecap:round;stroke-dasharray:.06 3;stroke-dashoffset:.07;animation:got-run 8s linear 2.4s infinite}
.mq-run.out{stroke:var(--pulse);stroke-width:3.88;stroke-dasharray:.22 3;stroke-dashoffset:.24;animation:got-run-out 8s linear 4s infinite}
@keyframes got-run{0%{stroke-dashoffset:.07}19%,100%{stroke-dashoffset:-1}}
@keyframes got-run-out{0%{stroke-dashoffset:.24}14%,100%{stroke-dashoffset:-1}}
@media (prefers-reduced-motion:reduce){.mq-run{animation:none;opacity:0}}
.mq-core{fill:var(--ink)}
.mq-core-t{font:600 26px var(--sans);letter-spacing:-.01em;fill:var(--on-plate);text-anchor:middle}
.got-mark{position:absolute;z-index:1;width:48px;height:48px;margin:-24px 0 0 -24px;overflow:visible;pointer-events:none}
.got-mark-bg{fill:var(--sheet)}
.mapfig-core.at{transform:translate(-50%,0) rotate(-2deg)}      /* ярлык висит под отметкой, а не по центру карты */
@media (max-width:640px){.mapfig-core.at{margin-top:-8px}}      /* на телефоне карта мельче: ярлык ближе к отметке, чтобы не лечь на центр */
/* Пирс: лист; вопрос — плашкой справа, ответ — узлы на нити, как звенья разбора; у разрыва отметка, от неё нить янтарная
   и входит в программу. Номера ходов стоят на той же вертикали, что узлы, текст — на одной левой линии */
.chat{padding:30px 40px 40px}
.chat-you{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-bottom:20px}
.chat-you .fl-pill{height:40px}
.chat-who{margin:0 0 14px 54px}
.say{--axis:-24px;--paper:var(--sheet);list-style:none;margin:0;padding:0 0 0 54px}
.say li{--node-y:6px;position:relative;padding-bottom:18px;color:var(--ink-2)}
.say li b{font-weight:600;color:var(--ink)}
.say li::after{content:"";position:absolute;left:var(--axis);top:calc(var(--node-y) + 7px);bottom:calc(-1 * var(--node-y) - 7px);width:var(--w-ink);margin-left:calc(var(--w-ink) / -2);background:var(--thread)}
.say .here::after,.say .do::after{width:var(--w-amber);margin-left:calc(var(--w-amber) / -2);background:var(--amber)}
.say .here .got-mark{left:var(--axis);top:calc(var(--node-y) + 7px)}
.say .do{padding-bottom:14px;font-weight:600;color:var(--ink)}
.say .do::after{top:0;bottom:0}
.prog{position:relative;padding-top:8px}
.prog .fl-in{position:absolute;left:calc(30px - var(--w-amber) / 2);top:0;width:var(--w-amber);height:20px}
.prog .fl-thread{position:absolute;left:29px;top:30px;bottom:46px;width:2px}
.prog .fl-row{height:44px;color:var(--on-plate-2)}
.prog .fl-row b{font-weight:500;color:var(--on-plate)}
.prog .fl-goal{height:46px;margin-top:8px}
.yours{--node-y:12px;margin-top:56px;max-width:960px}

/* 5. цена: три равные карточки; строки стоят на одних уровнях и читаются как сравнение */
.kicker{font-family:var(--display);font-size:var(--t-title);line-height:1.25;letter-spacing:-.018em;font-weight:600;color:var(--ink);margin:0 0 28px}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tier{background:var(--sheet);border:var(--hair);border-radius:var(--r-card);padding:30px 30px 32px;display:flex;flex-direction:column;box-shadow:var(--shadow-sheet)}
.tier .name{font-family:var(--display);font-size:var(--t-title);line-height:1.2;letter-spacing:-.018em;font-weight:600}
.tier .price{font-family:var(--display);font-size:72px;line-height:1;font-weight:600;letter-spacing:-.05em;margin:18px 0 14px}
.tier .price small{font:400 var(--t-ui)/1 var(--sans);color:var(--mute);letter-spacing:0;margin-left:10px}
.tier .desc{color:var(--ink-2);font-size:var(--t-ui);line-height:1.5;min-height:68px}
.t-spec{margin:16px 0 28px}
.t-row{padding:14px 0 15px;border-top:var(--hair)}
.t-row dt{font:600 var(--t-label)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.t-row dd{margin:0;font-size:var(--t-ui);line-height:1.4;color:var(--ink);min-height:21px}
.t-row dd.no{color:var(--mute)}
.upd{display:flex;align-items:center;gap:12px}
.dots{display:flex;gap:5px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--amber)}
/* что питает карту: шесть источников списком в два столбца (от вас · из внешнего мира); включённое — с галочкой, невключённое зачёркнуто */
.src{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:9px 16px}
.src span{display:flex;align-items:center;font:500 var(--t-ui)/1.2 var(--sans);color:var(--mute);text-decoration:line-through;text-decoration-thickness:1px}
.src span::before{content:"";flex:none;width:8px;height:0;margin:0 12px 0 4px;border-top:1.5px solid var(--line-2)}
.src span.on{color:var(--ink);text-decoration:none}
.src span.on::before{width:9px;height:5px;margin:0 11px 3px 4px;border-top:0;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.tier .btn{margin-top:auto;align-self:flex-start}
.fine{margin-top:24px;font-size:var(--t-small);color:var(--mute)}

/* 6. вопросы: список на линейках, без плашек */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
.faq-left{position:sticky;top:108px;padding-right:48px}
.faq-left .body{margin:22px 0 26px}
.qa{border-top:var(--rule)}
.qa details{border-bottom:1px solid var(--line-2)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 0;font-family:var(--display);font-size:var(--t-lead);line-height:1.3;font-weight:600;letter-spacing:-.012em}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover .pl{box-shadow:inset 0 0 0 1.5px var(--ink)}
.qa summary .pl{flex:none;width:28px;height:28px;margin-top:-1px;border-radius:50%;display:grid;place-items:center;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background .15s,box-shadow .15s,color .15s}
.qa summary .pl svg{transition:transform .2s}
.qa details[open] summary .pl{background:var(--ink);box-shadow:none;color:var(--marker)}
.qa details[open] summary .pl svg{transform:rotate(45deg)}
.qa .a{padding:0 64px 26px 0;color:var(--ink-2);max-width:640px}

/* 7. начать — тёмная плита: три вопроса сходятся тремя янтарными нитями в кнопку; из кнопки ничего не выходит */
.final{scroll-margin-top:96px}
.plate{background:var(--plate);color:var(--on-plate);border-radius:var(--r-plate)}
.final .plate{width:min(var(--wide),100% - 2 * var(--bleed));margin-inline:auto}
.final-in{width:min(1040px,100% - 2 * var(--gut));margin-inline:auto;padding:88px 0 76px;text-align:center}
.final h2{color:var(--on-plate)}
.final .voice{color:var(--on-plate-2)}
.final .lead{color:var(--on-plate-2);max-width:760px;margin:24px auto 40px}
.pick3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:104px;text-align:left}
.qd{border:1.5px solid var(--on-plate-line);border-radius:var(--r-card);padding:22px 24px 26px;display:grid;gap:12px;align-content:start}
.qd .tag{font:600 var(--t-label)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--amber-on-plate)}
.qd .txt{font-family:var(--display);font-weight:600;font-size:var(--t-lead);line-height:1.3;letter-spacing:-.012em;color:var(--on-plate)}
.go{display:flex;flex-direction:column;align-items:center;gap:16px}
.final .note{color:var(--on-plate-2)}
.into{position:relative;display:inline-flex}
.into .btn{position:relative;z-index:1}
.funnel{position:absolute;left:50%;bottom:calc(100% - 14px);width:1040px;height:123px;max-width:none;transform:translateX(-50%);pointer-events:none}
.funnel .fn{fill:none;stroke:var(--amber-on-plate);stroke-width:2.5;stroke-linecap:round}
.funnel .fn-run,.funnel .fn-rush{fill:none;stroke:var(--pulse);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:.1 3;stroke-dashoffset:.12}
@keyframes run-in{0%{stroke-dashoffset:.12}28%,100%{stroke-dashoffset:-1}}
.funnel .fn-run{animation:run-in 6s linear infinite}                 /* те же штрихи, что в герое и на схеме: бегут в кнопку */
.into .btn:hover ~ .funnel .fn-rush{animation:run .5s cubic-bezier(.5,0,.75,.6) both}
.funnel circle{fill:var(--amber-on-plate)}

/* подвал: тихий. Логотип — по киту: два цвета, охранное поле, без обрезки */
.foot{padding:56px 0 32px}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line-2)}
.pilot{font:600 var(--t-label)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.foot-cols{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:start;padding:28px 0 40px}
.foot-about{font-size:var(--t-small);line-height:1.5;color:var(--mute);max-width:380px}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 32px}
.foot-links a{font-size:var(--t-small);font-weight:500;color:var(--ink-2);transition:color .15s}
.foot-links a:hover{color:var(--ink)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:var(--t-micro);color:var(--mute)}

/* ---------- уже основного кадра ---------- */

/* ноутбук 1280: колонка 1120, заголовок героя на ступень меньше, картинка «Как это работает» сжимается целиком */
@media (max-width:1359px){
  .fl-stage{zoom:.9286}
}
@media (max-width:1279px){
  :root{--t-hero:70px;--gut:56px}
  .fl-stage{zoom:.84}
}

/* планшет и телефон: одна колонка; нить левого поля остаётся, ближе к краю; картинка «Как это работает» листается вбок */
@media (max-width:1099px){
  :root{--t-hero:clamp(40px,9.6vw,64px);--t-h2:clamp(32px,6.4vw,46px);--t-claim:clamp(24px,4.6vw,30px);--t-lead:18px;--gut:48px;--bleed:24px;--sec:84px;--axis:-24px}
  .nav{display:none}
  .top .wrap{justify-content:space-between}
  .hero{padding-top:40px}
  .hero-in{padding-bottom:112px}
  .inflow{display:none}
  .why{grid-template-columns:minmax(0,1fr);gap:56px}
  .why-text{padding-right:0}
  .beat.turn{flex:none}
  .beat.turn::after{bottom:-56px}
  .mapfig{position:relative}                     /* карта стоит под выводом: янтарная нить идёт мимо неё */
  .mapfig::before{content:"";position:absolute;left:var(--axis);top:0;bottom:0;width:var(--w-amber);margin-left:calc(var(--w-amber) / -2);background:var(--amber)}
  .mapfig-pic{width:100%;max-width:620px;margin:8px auto 0}
  .flow{padding:28px 24px 28px}
  .fl-scroll{overflow-x:auto;padding-bottom:12px}
  .fl-stage{zoom:1}
  .fl-steps{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:28px}
  .fl-step,.cap2{display:block}
  .got{grid-template-columns:minmax(0,1fr);gap:32px 0}
  .got figcaption{flex-direction:column;gap:4px;margin-top:0}
  .prog .fl-row{height:auto;min-height:44px;padding-block:8px;white-space:normal;line-height:1.3}
  .caps2{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:32px}
  .tiers{grid-template-columns:minmax(0,1fr);max-width:520px}
  .tier .desc{min-height:0}
  .faq{grid-template-columns:minmax(0,1fr);gap:40px}
  .faq-left{position:static;padding-right:0}
  .qa .a{padding-right:0}
  .final-in{width:calc(100% - 48px);padding:72px 0 64px}
  .pick3{grid-template-columns:minmax(0,1fr);margin-bottom:36px}
  .funnel{display:none}
  .foot-cols{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:640px){
  :root{--gut:28px;--bleed:12px;--sec:72px;--axis:-16px;--r-plate:20px}
  .hero .ln{display:inline}
  .hero .lead{margin:22px auto 34px}
  .btn.sm{padding-right:12px}
  .mapfig-core{font-size:var(--t-small);padding:9px 14px 10px}
  .tier .price{font-size:60px}
}

/* ---------- английская версия ----------
   Всё выше — стили русской доски как есть (снимок холста в source/). Ниже — только то, чего требует английский текст. */
.fl-q{font-size:var(--t-label)}      /* вопрос в центре схемы стоит в три строки («Where’s / the / money?»): кегль на ступень меньше, 12 */
/* первая строка героя по-английски шире русской (≈1130 px на ступени 80): на окне уже 1360 заголовок берёт ступень 70 —
   русский берёт её ниже 1280; иначе на ноутбуке 1280 строка рвётся после «where» и заголовок встаёт в четыре строки */
@media (max-width:1359px) and (min-width:1100px){
  :root{--t-hero:70px}
}

/* ---------- правки чистовика по комментариям Олега 10.11 ---------- */
/* надзаголовок раздела: тихая подпись над заголовком, то же слово, что в меню. Стоит в верхнем поле раздела и ничего не сдвигает:
   узел нити остаётся у заголовка. Вид — подпись схемы (.fl-k): новых знаков на странице нет */
.eyebrow{position:absolute;left:0;bottom:calc(100% + 18px);margin:0;font:600 var(--t-label)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}

/* ---------- акценты: ряд 1 «золото, янтарь, жжёная сиена» (слово Олега 10.11) ----------
   «Да берём 1». «Тогда запятая Пирса тоже должна быть золотая» — «запятую можно чуть темнее красить, иначе потеряется».
   «Хочу, чтобы было понятно: золотой акцент — это акцент для денег, это основной акцент на странице».
   Золото — деньги, и только они: слово money, плитка кнопки с вопросом про деньги, строка Your money, место денег,
   свет на картах. Сиена — путь Пирса: нить, узлы, акцентная строка, точки в цене, обрыв связи. Янтарь — ободок
   вокруг места денег: золотая точка на бумаге без ободка не держится. На тёмной плите всё, что не деньги, — в тонах бумаги.
   Оттенок 80° → 60° → 40°, светлота 0,83 → 0,67 → 0,50: шаги между тремя ровные.
   Разбор, замеры и другие ряды — пакет 2026-11-10_landing-accents (этот блок — его файл applied/row1.css, вносит
   tools/apply.py). Имена токенов страницы прежние (--marker, --amber…): здесь им даны новые значения.
   Правила стоят с :root спереди, чтобы пересиливать стили, которые дописываются после этого файла (steps.css). */
:root{
  --gold:#fabb41;                    /* золото: акцент денег, главный на странице */
  --gold-small:#e5a403;              /* то же золото темнее — запятая логотипа: в мелком кегле светлое теряется */
  --signal:#d97b12;                  /* янтарь: ободок места денег */
  --sienna:#a0421d;                  /* сиена: путь Пирса */
  --marker:var(--gold);
  --amber:var(--sienna); --amber-text:var(--sienna);
  --amber-on-plate:var(--on-plate);  /* на тёмной плите номера ходов — цветом бумаги: золото там только у денег */
}
/* место денег: золото в янтарном ободке */
:root .node.mark::before{background:var(--gold);box-shadow:0 0 0 2.5px var(--signal),0 0 0 8px var(--paper),0 0 0 9.5px rgba(217,123,18,.55)}
:root .th-dot{fill:var(--gold);stroke:var(--signal);stroke-width:2.5}
:root .fl-emb .m-dot{fill:var(--gold);stroke:var(--signal);stroke-width:2}
:root .th-ring,:root .st-flash,:root .fl-emb .m-ring{stroke:var(--signal)}
/* не деньги — без золота: нити и надписи над вопросами финала, крестик открытого вопроса, стрелка кнопки «Email us» */
:root .funnel .fn{stroke:var(--on-plate-2)}
:root .funnel circle{fill:var(--on-plate-2)}
:root .qd .tag{color:var(--on-plate-2)}
:root .qa details[open] summary .pl,:root .btn.line:hover .ic{color:var(--on-plate)}
/* свет на картах и запятая логотипа: в разметке их цвет записан числами */
:root #mp-warm stop,:root #mq-warm stop{stop-color:var(--gold)}
:root .logo svg path:last-child{fill:var(--gold-small)}
/* /акценты: ряд 1 */

/* ---------- блок «Что получаете»: три шага (слово Олега 10.11) ----------
   Карта и Пирс идут одним кругом: связи появились — одна порвалась — «ваши деньги здесь» и программа.
   Перед каждой репликой Пирса стоит статус «Пирс печатает»: по нему справа читается чат.
   Здесь то, что не движется: половины связей, вспышка разрыва, статус и место реплики. Без движения
   (prefers-reduced-motion) стоит последний кадр: всё видно, статуса нет.
   Кадры круга и их привязка стоят ниже, между метками gen:steps: их пишет tools/steps.py, руками не править. */
.got.steps{--st-paper:var(--paper)}                    /* бумага страницы: внутри реплик --paper занят цветом листа */

/* связь — две половины, от точек фактов к середине: появляясь, сходятся; порванная расходится от середины и остаётся янтарной */
.steps .mq-lk{stroke-dasharray:1 3;stroke-dashoffset:0}
.steps .mq-lk.tear{stroke:var(--amber);stroke-width:3.88}
/* рваный конец нити: конец кончается зигзагом той же толщины, изломы острые; половины порванной связи обвисают на своих
   точках фактов (поворот группы; угол и место поворота — в разметке и ниже, между метками gen:steps) */
.st-zig{fill:none;stroke:var(--amber);stroke-width:3.88;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:1 3;stroke-dashoffset:0}
/* вспышка в месте разрыва — кольцо отметки, один раз */
.st-flash{fill:none;stroke:var(--amber);stroke-width:2.6;opacity:0;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.steps .mq-run{animation:none}}      /* штрихи без движения спрятаны страницей; здесь снят и их ход */

/* Пирс. Реплика и статус перед ней стоят в одном месте: статус уходит — встают реплика, узел на нити и событие на карте.
   Статус — плашка вопроса с тремя точками и слова подписью */
.steps .say li::after{transform-origin:50% 0}          /* нить растёт вниз, к следующей реплике */
.steps .say .msg{display:block;text-wrap:pretty}       /* последняя строка реплики не остаётся из одного слова */
.steps .say .here{padding-bottom:14px}
.steps .say .here::after{bottom:0}                     /* янтарная нить от отметки входит в программу */
.typing{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;height:calc(var(--t-body) * 1.6);font:500 var(--t-small)/1 var(--sans);color:var(--mute);white-space:nowrap;opacity:0;pointer-events:none}
.typing .dots{display:flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:var(--r-ui);background:var(--st-paper);border:var(--hair)}
.typing .dots i{width:6px;height:6px;border-radius:50%;background:var(--mute)}
/* gen:steps — кадры круга блока «Что получаете» и их привязка: пишет tools/steps.py, руками не править */
/* порванная связь на последнем кадре: половины отошли от середины на длину разрыва и обвисли */
.steps .mq-lk.tear.a{stroke-dashoffset:.4716}.steps .mq-lk.tear.b{stroke-dashoffset:.4711}.steps .st-swing-a{transform:rotate(9deg)}.steps .st-swing-b{transform:rotate(-9deg)}
@media (prefers-reduced-motion:no-preference){
.got.steps .st-an,.got.steps .say li::before,.got.steps .say li::after,.got.steps .th-ring,.got.steps .mapfig-core .hl::before{animation-duration:22s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-fill-mode:both;animation-play-state:running}
.got.steps .mapfig-core .hl::before{animation-timeline:auto;animation-range:normal}      /* маркер ярлыка идёт по кругу блока, а не по прокрутке */
.got.steps .st-who{animation-name:st-who}.got.steps .st-ty1{animation-name:st-ty1}.got.steps .st-m1{animation-name:st-m1}.got.steps .st-ty2{animation-name:st-ty2}.got.steps .st-m2{animation-name:st-m2}.got.steps .st-ty3{animation-name:st-ty3}.got.steps .st-m3{animation-name:st-m3}.got.steps .say .s1::before{animation-name:st-n1}.got.steps .say .s2::before{animation-name:st-n2}.got.steps .st-n3{animation-name:st-n3}.got.steps .say .s1::after{animation-name:st-th1}.got.steps .say .s2::after{animation-name:st-th2}.got.steps .say .s3::after{animation-name:st-th3}.got.steps .st-plan{animation-name:st-plan}.got.steps .st-mv1{animation-name:st-mv1}.got.steps .st-mv2{animation-name:st-mv2}.got.steps .st-mv3{animation-name:st-mv3}.got.steps .st-goal{animation-name:st-goal}.got.steps .st-lk{animation-name:st-lk}.got.steps .st-tear-a{animation-name:st-tear-a}.got.steps .st-tear-b{animation-name:st-tear-b}.got.steps .st-swing-a{animation-name:st-swing-a}.got.steps .st-swing-b{animation-name:st-swing-b}.got.steps .st-zig{animation-name:st-zig}.got.steps .st-flash{animation-name:st-flash}.got.steps .st-glow{animation-name:st-glow}.got.steps .st-mark{animation-name:st-mark}.got.steps .st-here{animation-name:st-here}.got.steps .mapfig-core .hl::before{animation-name:st-swipe}.got.steps .st-run{animation-name:st-run}.got.steps .st-run-out{animation-name:st-run-out}.got.steps .th-ring{animation-name:st-ping}
.typing .dots i{animation:st-dot 1.2s ease-in-out infinite}.typing .dots i:nth-child(2){animation-delay:.15s}.typing .dots i:nth-child(3){animation-delay:.3s}
}
@keyframes st-dot{0%,60%,100%{translate:0 0;opacity:.4}30%{translate:0 -3px;opacity:1}}
@keyframes st-who{0%,2.73%{opacity:0;translate:0 8px;animation-timing-function:cubic-bezier(.2,.7,.2,1)}4.77%,96.36%{opacity:1;translate:0 0}98.64%,100%{opacity:0;translate:0 0}}
@keyframes st-ty1{0%,3.18%{opacity:0}4.32%,8.86%{opacity:1}9.55%,100%{opacity:0}}
@keyframes st-m1{0%,9.55%{opacity:0;translate:0 8px;animation-timing-function:cubic-bezier(.2,.7,.2,1)}11.59%,96.36%{opacity:1;translate:0 0}98.64%,100%{opacity:0;translate:0 0}}
@keyframes st-ty2{0%,24.09%{opacity:0}25.23%,29.77%{opacity:1}30.45%,100%{opacity:0}}
@keyframes st-m2{0%,30.45%{opacity:0;translate:0 8px;animation-timing-function:cubic-bezier(.2,.7,.2,1)}32.5%,96.36%{opacity:1;translate:0 0}98.64%,100%{opacity:0;translate:0 0}}
@keyframes st-ty3{0%,47.73%{opacity:0}48.86%,53.41%{opacity:1}54.09%,100%{opacity:0}}
@keyframes st-m3{0%,54.09%{opacity:0;translate:0 8px;animation-timing-function:cubic-bezier(.2,.7,.2,1)}56.14%,96.36%{opacity:1;translate:0 0}98.64%,100%{opacity:0;translate:0 0}}
@keyframes st-n1{0%,9.55%{opacity:0;scale:.4;animation-timing-function:cubic-bezier(.3,1.5,.5,1)}11.36%,96.36%{opacity:1;scale:1}98.64%,100%{opacity:0;scale:1}}
@keyframes st-n2{0%,30.45%{opacity:0;scale:.4;animation-timing-function:cubic-bezier(.3,1.5,.5,1)}32.27%,96.36%{opacity:1;scale:1}98.64%,100%{opacity:0;scale:1}}
@keyframes st-n3{0%,54.09%{opacity:0;scale:.4;animation-timing-function:cubic-bezier(.3,1.5,.5,1)}55.91%,96.36%{opacity:1;scale:1}98.64%,100%{opacity:0;scale:1}}
@keyframes st-th1{0%,23.41%{opacity:1;scale:1 0;animation-timing-function:cubic-bezier(.2,.7,.2,1)}25.23%,96.36%{opacity:1;scale:1 1}98.64%,100%{opacity:0;scale:1 1}}
@keyframes st-th2{0%,47.05%{opacity:1;scale:1 0;animation-timing-function:cubic-bezier(.2,.7,.2,1)}48.86%,96.36%{opacity:1;scale:1 1}98.64%,100%{opacity:0;scale:1 1}}
@keyframes st-th3{0%,55%{opacity:1;scale:1 0;animation-timing-function:cubic-bezier(.2,.7,.2,1)}56.82%,96.36%{opacity:1;scale:1 1}98.64%,100%{opacity:0;scale:1 1}}
@keyframes st-plan{0%,57.27%{opacity:0;translate:0 8px;animation-timing-function:cubic-bezier(.2,.7,.2,1)}59.32%,96.36%{opacity:1;translate:0 0}98.64%,100%{opacity:0;translate:0 0}}
@keyframes st-mv1{0%,58.86%{opacity:0;translate:0 6px;animation-timing-function:cubic-bezier(.2,.7,.2,1)}60.91%,96.36%{opacity:1;translate:0 0}98.64%,100%{opacity:0;translate:0 0}}
@keyframes st-mv2{0%,60.45%{opacity:0;translate:0 6px;animation-timing-function:cubic-bezier(.2,.7,.2,1)}62.5%,96.36%{opacity:1;translate:0 0}98.64%,100%{opacity:0;translate:0 0}}
@keyframes st-mv3{0%,62.05%{opacity:0;translate:0 6px;animation-timing-function:cubic-bezier(.2,.7,.2,1)}64.09%,96.36%{opacity:1;translate:0 0}98.64%,100%{opacity:0;translate:0 0}}
@keyframes st-goal{0%,64.32%{opacity:0;translate:0 6px;animation-timing-function:cubic-bezier(.2,.7,.2,1)}66.36%,96.36%{opacity:1;translate:0 0}98.64%,100%{opacity:0;translate:0 0}}
@keyframes st-lk{0%,10%{opacity:0;stroke-dashoffset:1.02;stroke:var(--thread);stroke-width:2.33}10.05%{opacity:1;stroke-dashoffset:1.02;stroke:var(--thread);stroke-width:2.33;animation-timing-function:cubic-bezier(.3,.1,.25,1)}14.09%{opacity:1;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33}15.23%{opacity:1;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33;animation-timing-function:ease-out}15.95%{opacity:1;stroke-dashoffset:0;stroke:var(--ink);stroke-width:4.6}16.68%{opacity:1;stroke-dashoffset:0;stroke:var(--ink);stroke-width:4.6;animation-timing-function:ease-in-out}19.18%,96.36%{opacity:1;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33}98.64%,100%{opacity:0;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33}}
@keyframes st-tear-a{0%,10%{opacity:0;stroke-dashoffset:1.02;stroke:var(--thread);stroke-width:2.33}10.05%{opacity:1;stroke-dashoffset:1.02;stroke:var(--thread);stroke-width:2.33;animation-timing-function:cubic-bezier(.3,.1,.25,1)}14.09%{opacity:1;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33}15.23%{opacity:1;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33;animation-timing-function:ease-out}15.95%{opacity:1;stroke-dashoffset:0;stroke:var(--ink);stroke-width:4.6}16.68%{opacity:1;stroke-dashoffset:0;stroke:var(--ink);stroke-width:4.6;animation-timing-function:ease-in-out}19.18%{opacity:1;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33}30.91%{opacity:1;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33;animation-timing-function:ease-in-out}32.73%{opacity:1;stroke-dashoffset:0;stroke:var(--amber);stroke-width:3.88;animation-timing-function:cubic-bezier(.2,.8,.3,1)}34.32%,96.36%{opacity:1;stroke-dashoffset:.4716;stroke:var(--amber);stroke-width:3.88}98.64%,100%{opacity:0;stroke-dashoffset:.4716;stroke:var(--amber);stroke-width:3.88}}
@keyframes st-tear-b{0%,10%{opacity:0;stroke-dashoffset:1.02;stroke:var(--thread);stroke-width:2.33}10.05%{opacity:1;stroke-dashoffset:1.02;stroke:var(--thread);stroke-width:2.33;animation-timing-function:cubic-bezier(.3,.1,.25,1)}14.09%{opacity:1;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33}15.23%{opacity:1;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33;animation-timing-function:ease-out}15.95%{opacity:1;stroke-dashoffset:0;stroke:var(--ink);stroke-width:4.6}16.68%{opacity:1;stroke-dashoffset:0;stroke:var(--ink);stroke-width:4.6;animation-timing-function:ease-in-out}19.18%{opacity:1;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33}30.91%{opacity:1;stroke-dashoffset:0;stroke:var(--thread);stroke-width:2.33;animation-timing-function:ease-in-out}32.73%{opacity:1;stroke-dashoffset:0;stroke:var(--amber);stroke-width:3.88;animation-timing-function:cubic-bezier(.2,.8,.3,1)}34.32%,96.36%{opacity:1;stroke-dashoffset:.4711;stroke:var(--amber);stroke-width:3.88}98.64%,100%{opacity:0;stroke-dashoffset:.4711;stroke:var(--amber);stroke-width:3.88}}
@keyframes st-swing-a{0%,32.73%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.3,1.7,.5,1)}36.14%,100%{transform:rotate(9deg)}}
@keyframes st-swing-b{0%,32.73%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.3,1.7,.5,1)}36.14%,100%{transform:rotate(-9deg)}}
@keyframes st-zig{0%,33.64%{opacity:0;stroke-dashoffset:1.02}33.68%{opacity:1;stroke-dashoffset:1.02;animation-timing-function:ease-out}34.64%,96.36%{opacity:1;stroke-dashoffset:0}98.64%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes st-flash{0%,32.95%{opacity:0;transform:scale(.4)}33.14%{opacity:.8;transform:scale(.5);animation-timing-function:cubic-bezier(.2,.6,.3,1)}35.68%,100%{opacity:0;transform:scale(2.1)}}
@keyframes st-glow{0%,54.55%{opacity:0;animation-timing-function:ease-out}57.27%,96.36%{opacity:1}98.64%,100%{opacity:0}}
@keyframes st-mark{0%,54.55%{opacity:0;scale:.4;animation-timing-function:cubic-bezier(.3,1.5,.5,1)}56.36%,96.36%{opacity:1;scale:1}98.64%,100%{opacity:0;scale:1}}
@keyframes st-here{0%,55.68%{opacity:0;translate:0 10px;animation-timing-function:cubic-bezier(.2,.7,.2,1)}57.73%,96.36%{opacity:1;translate:0 0}98.64%,100%{opacity:0;translate:0 0}}
@keyframes st-swipe{0%,57.27%{clip-path:inset(-20% 100% -20% -10%);animation-timing-function:cubic-bezier(.4,.1,.2,1)}59.55%,100%{clip-path:inset(-20% -10% -20% -10%)}}
@keyframes st-run{0%,70.91%{stroke-dashoffset:.07}77.73%,100%{stroke-dashoffset:-1}}
@keyframes st-run-out{0%,75%{stroke-dashoffset:.24}79.55%,100%{stroke-dashoffset:-1}}
@keyframes st-ping{0%,78.64%{transform:scale(1);stroke-opacity:.55;animation-timing-function:ease-out}80.68%{transform:scale(1.5);stroke-opacity:.15;animation-timing-function:ease-in-out}84.55%,100%{transform:scale(1);stroke-opacity:.55}}
/* круг ждёт, пока блок войдёт в окно: анимация по прокрутке держит на блоке пометку «жду», пока он не вошёл наполовину,
   а запрос к стилю контейнера по этой пометке ставит круг на паузу (напрямую, через var(), нельзя: свойства анимации
   не читают переменные, которые сами анимируются). Где браузер так не умеет или страница не прокручивается, круг идёт сразу */
@keyframes st-view{from{--st-wait:1}to{--st-wait:0}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
.got.steps{animation:st-view linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
@container style(--st-wait:1){.got.steps .st-an,.got.steps .say li::before,.got.steps .say li::after,.got.steps .th-ring,.got.steps .mapfig-core .hl::before{animation-play-state:paused}}
}}
/* /gen:steps */

/* ---------- чистовик после проверки (10.11) ----------
   Всё выше — стили чистовика как есть. Ниже — только то, чего требуют правки проверки; новых знаков на странице нет. */
/* строка под главной мыслью второго блока: кто это делает и почему теперь. Кегль и цвет — подводки (.lead) */
.beat .who{margin-top:14px;max-width:520px;font-size:var(--t-lead);line-height:1.5;color:var(--ink-2)}
/* источников в тарифе семь (добавлен сайт): слева четыре «от вас», справа три «из внешнего мира» */
.src{grid-template-rows:repeat(4,auto)}
/* вопрос задаётся Пирсу по имени: запятая после имени — золотом, как в логотипе (комментарии Олега на холсте 10.11).
   Все три места тёмные (кнопка, круг схемы, финальная плита): золото страницы, --marker */
.pc{color:var(--marker)}
/* четвёртое место — реплика владельца в чате, светлая плашка: там запятая золотом логотипа, потемнее, иначе теряется
   (слово Олега 10.11: «в реплику владельца в чате добавь»); нет на странице нового ряда цветов — берётся золото страницы */
.pc.on-paper{color:var(--gold-small,var(--marker))}
/* логотип в шапке и подвале крупнее: золотая запятая в кегле 22 терялась (комментарии Олега на холсте 10.11) */
.logo svg{width:auto;height:28px}