/* ОБЩИЙ ВИД ДВУХ СТРАНИЦ СОСТАВА: короткого обзора и полного атласа.
   Один файл, потому что это одна витрина, разрезанная по назначению, а не два разных
   продукта: разъехавшийся вид сразу читается как «сделано в разное время разными людьми».
*/
/* СОСТАВ ПРОЕКТА. Тот же язык, что на главной: тёмная пустота, мягкий свет, стекло.
   Отличие одно — здесь человек ЧИТАЕТ и ВЫБИРАЕТ, поэтому страница дышит.
   Весь текст приходит вместе с модулем и рисуется сразу; из сети догружаются
   только числа, и место под них зарезервировано, чтобы страница не прыгала. */
body{overflow-y:auto;overflow-x:hidden}
/* Тихий серый из общей палитры даёт контраст 4.19 к фону — ниже порога читаемости 4.5.
   На главной им подписаны украшения, здесь — даты замеров и живость пространств,
   то есть смысл. Поднимаем только на этой странице и только на два шага. */
:root{--n3:#8C95A8}
/* Атмосфера: два мягких пятна бренда по краям пустоты. Раньше здесь стоял пустой
   <canvas> без единой строки рисования — в потоке страницы он занимал 300×150 и
   на телефоне отъедал четверть первого экрана ни за что. */
#amb{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(58vw 42vh at 12% -6%,rgba(150,120,255,.13),transparent 62%),
  radial-gradient(52vw 40vh at 92% 8%,rgba(60,155,255,.10),transparent 60%)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:15px 16px;min-height:44px;border-radius:0 0 10px 0;
  background:var(--cyan);color:#07131A;font:650 13px/1 Inter,system-ui}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
.eco{max-width:1040px;margin:0 auto;position:relative;z-index:2;
  padding:calc(20px + env(safe-area-inset-top)) 18px calc(112px + env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.top i{width:32px;height:32px;border-radius:50%;flex:none;background:
  linear-gradient(150deg,rgba(150,120,255,.5),rgba(60,155,255,.28));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.09)}
.top span{font:500 13px/1.4 Inter,system-ui;color:var(--n2)}
.top b{color:var(--n0);font-weight:600}
.top a{margin-left:auto;font:600 13px/1 Inter,system-ui;color:var(--n1);text-decoration:none;
  padding:14px 14px;border-radius:11px;white-space:nowrap;flex:none;min-height:44px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.top span{min-width:0}

/* ── ПЕРВЫЙ ЭКРАН ── */
.hero{padding:6px 0 4px}
h1{font:650 clamp(25px,6.2vw,40px)/1.14 Inter,system-ui;letter-spacing:-.9px;color:var(--n0);
  text-wrap:balance;margin:0}
h1 b{font-weight:650;color:#C9B6FF}
.lede{margin-top:12px;font:500 15.5px/1.58 Inter,system-ui;color:var(--n1);max-width:680px}
.facts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;max-width:680px}
.facts li{position:relative;padding-left:20px;font:500 14px/1.5 Inter,system-ui;color:var(--n2)}
.facts li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--cyan);box-shadow:0 0 10px 2px rgba(0,212,255,.4)}
.cta-row{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
a.primary,a.ghost{text-align:center;padding:16px 20px;border-radius:14px;text-decoration:none;
  font:650 14.5px/1 Inter,system-ui;min-height:48px;display:flex;align-items:center;
  justify-content:center}
a.primary{color:#07131A;background:linear-gradient(90deg,var(--cyan),var(--blue));
  box-shadow:0 18px 44px -24px rgba(60,155,255,.75)}
a.ghost{color:var(--n1);background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.cta-row a{flex:1 1 240px}

/* ── ПЕРЕХОД ПО РАЗДЕЛАМ ──
   Страница длинная намеренно: это атлас, а не листовка. Но живой проход пальцем показал,
   что до подвала тридцать с лишним движений — человек с конкретным вопросом («какие
   условия?») не будет столько листать. Полоса разделов липнет к верху и позволяет
   попасть в нужное место одним касанием. Прокручивается вбок, чтобы не ломаться на узком
   экране и не превращаться в две строки мелких ссылок. */
.jump{position:sticky;top:0;z-index:12;margin:26px -18px 0;padding:10px 18px;
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  background:linear-gradient(180deg,rgba(5,6,7,.96),rgba(5,6,7,.82));
  backdrop-filter:blur(10px)}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;padding:10px 14px;border-radius:999px;text-decoration:none;
  font:600 13px/1 Inter,system-ui;color:var(--n2);min-height:40px;
  display:flex;align-items:center;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.jump a:hover{color:var(--n0)}
.jump a.on{color:#07131A;background:linear-gradient(90deg,var(--cyan),var(--blue));
  box-shadow:none}

/* ── ОБЩЕЕ ДЛЯ РАЗДЕЛОВ ── */
section{scroll-margin-top:64px}
h2{margin:58px 0 4px;font:650 clamp(21px,5.4vw,30px)/1.16 Inter,system-ui;letter-spacing:-.5px;
  color:var(--n0);text-wrap:balance}
h2 s{display:block;text-decoration:none;font:600 12px/1.2 Inter,system-ui;letter-spacing:.14em;
  text-transform:uppercase;color:#A98BE0;margin-bottom:9px}
.sec-lede{margin-top:9px;font:500 14px/1.6 Inter,system-ui;color:var(--n2);max-width:700px}
.asof{margin-top:14px;font:500 12.5px/1.55 Inter,system-ui;color:var(--n3);max-width:700px}

/* ── ЧИСЛА ── */
.nums{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;max-width:680px}
.nums>div{position:relative;text-align:center;padding:0 4px;min-height:78px}
/* Волосяная линия между числами — тот же приём, что на главной. Карточка каждой цифре
   придала бы вес рекламного блока, а это просто то, что уже правда, сказанное вполголоса. */
.nums>div+div::before{content:"";position:absolute;left:-4px;top:6%;height:80%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.13),transparent)}
.nums b{display:block;font:650 clamp(20px,5.6vw,28px)/1 Inter,system-ui;letter-spacing:-.5px;
  color:var(--n0);font-variant-numeric:tabular-nums}
.nums s{display:block;text-decoration:none;margin-top:7px;font:500 12.2px/1.4 Inter,system-ui;
  color:var(--n2);text-wrap:balance}
.nums em{display:block;font-style:normal;margin-top:5px;font:500 12px/1.35 Inter,system-ui;
  color:var(--n3)}

/* ── ЧТО ИЗМЕНИЛОСЬ ЗА НЕДЕЛЮ ── */
.week{margin-top:20px;display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.week{grid-template-columns:repeat(4,1fr)}}
.week div{padding:14px 15px;border-radius:14px;background:rgba(255,255,255,.038);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);min-height:82px}
.week b{display:block;font:650 19px/1 Inter,system-ui;color:#7FD8C6;
  font-variant-numeric:tabular-nums}
.week b.zero{color:var(--n2)}
.week s{display:block;text-decoration:none;margin-top:8px;font:500 12.2px/1.4 Inter,system-ui;
  color:var(--n2)}

/* ── ТРИ МАРШРУТА ── */
/* Переключатель «кто я» — на телефоне; на широком экране он не нужен, там видно всё три. */
.rsel{margin-top:18px;display:flex;gap:7px;flex-wrap:wrap}
.rchip{font:600 12.5px/1 Inter,system-ui;color:#9FB0CC;padding:10px 13px;border-radius:999px;
  border:0;cursor:pointer;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:color .18s,background .18s}
.rchip.on{color:#06121C;background:linear-gradient(120deg,#7FE3FF,#00D4FF);
  box-shadow:0 4px 18px -6px rgba(0,212,255,.6)}
.rchip:focus-visible{outline:2px solid #00D4FF;outline-offset:2px}
.routes{margin-top:14px;display:grid;gap:12px}
/* Специфичность выше, чем у общего .route ниже по файлу, — иначе display:flex оттуда
   победит и на телефоне окажутся видны все три маршрута сразу. */
.routes .route{display:none}
.routes .route.on{display:flex;animation:rin .22s ease-out both}
/* Ярлык внутри карточки на телефоне повторяет уже нажатую кнопку — убираем. */
.routes .route .tag{display:none}
@keyframes rin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.route.on{animation:none}}
@media(min-width:900px){
  .rsel{display:none}
  .routes{grid-template-columns:repeat(3,1fr)}
  .routes .route,.routes .route.on{display:flex;animation:none}
  .routes .route .tag{display:inline-block}
}
/* Шаги — последовательность, а не список: точки на общей линии. */
.route ol.seq{list-style:none;padding:0;position:relative}
.route ol.seq li{position:relative;padding-left:24px}
.route ol.seq li::before{content:"";position:absolute;left:3px;top:6px;width:7px;height:7px;
  border-radius:50%;background:linear-gradient(150deg,#9678FF,#3C9BFF)}
.route ol.seq li:not(:last-child)::after{content:"";position:absolute;left:6.2px;top:14px;
  bottom:-9px;width:1px;background:rgba(255,255,255,.13)}
.route{padding:18px 19px;border-radius:18px;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);display:flex;flex-direction:column}
.route .tag{align-self:flex-start;font:600 12px/1.2 Inter,system-ui;letter-spacing:.12em;
  text-transform:uppercase;color:#8FA3C8;padding:5px 9px;border-radius:6px;
  background:rgba(120,150,220,.14)}
.route h3{margin:11px 0 0;font:650 17px/1.25 Inter,system-ui;color:var(--n0)}
.route .rl{margin:7px 0 0;font:500 13.5px/1.5 Inter,system-ui;color:var(--n2)}
.route ol{margin:14px 0 0;padding-left:19px;display:grid;gap:7px}
.route li{font:500 13.2px/1.5 Inter,system-ui;color:var(--n1)}
.ract{margin-top:auto;padding-top:16px;display:grid;gap:8px}

/* ── КАРТА ── */
.layers{margin-top:22px;position:relative}
/* СЛОЙ — НЕ КАРТОЧКА. Карточка внутри карточки (слой, а в нём узлы) — главное, от чего
   страница выглядела дёшево: две рамки вокруг одного смысла. Слой держит тонкая линия
   слева: она проходит через все пять и читается как один путь, а не пять коробок. */
.layer{position:relative;padding:2px 0 0 26px}
.layer::before{content:"";position:absolute;left:5px;top:6px;bottom:-26px;width:1px;
  background:linear-gradient(180deg,rgba(150,120,255,.42),rgba(0,212,255,.16))}
.layer:last-of-type::before{bottom:auto;height:26px}
.lhead{display:flex;align-items:baseline;gap:11px;margin-bottom:6px}
.ln{position:absolute;left:0;top:5px;width:11px;height:11px;flex:none;border-radius:50%;
  font-size:0;background:linear-gradient(150deg,#9678FF,#3C9BFF);
  box-shadow:0 0 0 4px rgba(5,6,7,1),0 0 14px 2px rgba(120,140,255,.35)}
.lhead h3{margin:0;font:650 18px/1.2 Inter,system-ui;letter-spacing:-.3px;color:var(--n0)}
.layer>p{margin:0 0 15px;font:500 13px/1.55 Inter,system-ui;color:var(--n2);max-width:640px}
.lacc{color:#C9B6FF;font-weight:650}
.nodes{display:grid;gap:10px}
@media(min-width:768px){.nodes{grid-template-columns:1fr 1fr}}
.node{padding:14px 15px;border-radius:14px;background:rgba(255,255,255,.038);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)}
.nh{display:flex;align-items:baseline;gap:10px}
.node h4{margin:0;font:650 14.5px/1.3 Inter,system-ui;color:var(--n0)}
/* Подчёркивание рисуем самой строкой, а не рамкой снизу: у растянутой под палец ссылки
   рамка уезжает под отступ и висит отдельной чертой под текстом. */
.node h4 a{color:var(--n0);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:rgba(0,212,255,.5);
  display:inline-block;padding:11px 3px;margin:-11px -3px;min-height:44px}
.node h4 a:hover{text-decoration-color:var(--cyan)}
.cnt{margin-left:auto;font:600 12.4px/1.2 Inter,system-ui;color:#7FD8C6;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cnt.off{color:var(--n3)}
.lv{display:inline-block;margin-top:9px;font:600 12px/1.2 Inter,system-ui;letter-spacing:.08em;
  text-transform:uppercase;color:#C9B6FF;padding:4px 8px;border-radius:6px;
  background:rgba(150,120,255,.14)}
.node p{margin:9px 0 0;font:500 12.8px/1.5 Inter,system-ui;color:var(--n1)}
.node p.d{color:var(--n2)}
.node p.nx{margin-top:9px;font:500 12.5px/1.45 Inter,system-ui;color:#8FA3C8}
.node .act{display:block;margin-top:10px;font:500 12.2px/1.45 Inter,system-ui;color:var(--n3)}
.flow{position:relative;height:46px;display:flex;align-items:center;padding-left:26px}
.flow span{position:relative;padding:7px 14px;border-radius:999px;
  font:600 12.2px/1.2 Inter,system-ui;color:#A9B6CC;background:var(--ob1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}

/* ── ПОЯСНЯЮЩАЯ ПЛАШКА ──
   Имя своё, а не `.note`. В общем world.css есть правило `@media … { .note{display:none} }`
   — «лишнее на телефоне убираем». Три объясняющих блока этой страницы — почему числа
   нельзя складывать, чего мы не знаем и правила проекта — на телефоне не показывались
   ВООБЩЕ. Класс с общим именем всегда рано или поздно ловит чужое правило. */
.xnote{margin-top:20px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.xnote h3{margin:0;font:650 14.5px/1.3 Inter,system-ui;color:var(--n0)}
.xnote p{margin:9px 0 0;font:500 12.9px/1.58 Inter,system-ui;color:var(--n2)}
.xnote p b{color:var(--n1);font-weight:600}
.xnote ul{margin:10px 0 0;padding-left:19px}
.xnote li{margin:6px 0;font:500 12.9px/1.55 Inter,system-ui;color:var(--n2)}
.xnote li b{color:var(--n1);font-weight:600}

/* ── РЕЕСТР ── */
.regwrap{margin-top:20px;overflow-x:auto;border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
table.reg{width:100%;min-width:720px;border-collapse:collapse;background:rgba(255,255,255,.026)}
table.reg th,table.reg td{padding:12px 14px;text-align:left;vertical-align:top;
  font:500 12.6px/1.45 Inter,system-ui;color:var(--n2);
  border-bottom:1px solid rgba(255,255,255,.055)}
table.reg th{font:600 12px/1.2 Inter,system-ui;letter-spacing:.09em;text-transform:uppercase;
  color:var(--n3);white-space:nowrap}
table.reg td b{color:var(--n0);font-weight:650;font-size:13px}
table.reg td.n{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--n1)}
.badge{display:inline-block;padding:4px 9px;border-radius:6px;font:600 12px/1.35 Inter,system-ui;
  white-space:nowrap}
.badge.open{color:#7FD8C6;background:rgba(70,200,175,.14)}
.badge.closed{color:#C9B6FF;background:rgba(150,120,255,.16)}
.badge.tool{color:#8FA3C8;background:rgba(120,150,220,.16)}
/* НА ТЕЛЕФОНЕ ТАБЛИЦА ПЕРЕСТАЁТ БЫТЬ ТАБЛИЦЕЙ. Восемь колонок в экран 375px не влезают
   никогда: остаётся боковая прокрутка, в которой человек видит три колонки из восьми и
   не понимает, что упустил остальные. Те же строки становятся карточками, где у каждого
   значения подписано, что это. */
@media(max-width:760px){
  .regwrap{overflow:visible;box-shadow:none}
  table.reg,table.reg tbody,table.reg tr,table.reg td{display:block;width:auto;min-width:0}
  table.reg thead{position:absolute;left:-9999px}
  table.reg tr{margin-bottom:11px;border-radius:14px;padding:5px 2px;
    background:rgba(255,255,255,.038);box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)}
  table.reg td{border-bottom:0;padding:7px 15px;display:grid;
    grid-template-columns:104px 1fr;gap:10px;align-items:baseline}
  table.reg td::before{content:attr(data-l);font:600 12px/1.35 Inter,system-ui;color:var(--n3)}
  table.reg td:first-child{grid-template-columns:1fr;padding-top:13px}
  table.reg td:first-child::before{display:none}
}

/* ── РАСКРЫТИЕ ── */
.disc{margin-top:20px;padding:19px 20px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,190,90,.07),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,190,90,.22)}
.disc dl{margin:0;display:grid;gap:14px}
.disc dt{font:650 13.5px/1.3 Inter,system-ui;color:#F0C878}
.disc dd{margin:6px 0 0;font:500 13px/1.58 Inter,system-ui;color:var(--n1)}

/* ── ИСТОРИЯ ── */
.tl{margin-top:20px;display:grid;gap:0}
.tl div{position:relative;padding:0 0 20px 26px;border-left:1px solid rgba(255,255,255,.1)}
.tl div:last-child{border-left-color:transparent}
.tl div::before{content:"";position:absolute;left:-4.5px;top:5px;width:8px;height:8px;
  border-radius:50%;background:var(--cyan);box-shadow:0 0 10px 2px rgba(0,212,255,.35)}
.tl b{display:block;font:650 13px/1.2 Inter,system-ui;color:var(--n0)}
.tl span{display:block;margin-top:5px;font:500 12.8px/1.5 Inter,system-ui;color:var(--n2)}

/* ── ЮРИДИЧЕСКИЙ СЛОЙ И ПОДВАЛ ── */
.legal{margin-top:44px;padding:18px 19px;border-radius:16px;background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)}
.legal h3{margin:0;font:650 13.5px/1.3 Inter,system-ui;color:var(--n1)}
.legal p{margin:9px 0 0;font:500 12.6px/1.62 Inter,system-ui;color:var(--n2)}
.legal p b{color:var(--n2);font-weight:600}
.foot{margin-top:22px;font:500 12.6px/1.62 Inter,system-ui;color:var(--n2)}
/* Та же строка разделов, что на главной: человек должен чувствовать один сайт,
   а не набор отдельных страниц, случайно оказавшихся на одном домене. */
.site-menu{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.site-menu a{font:500 13.5px/1 Inter,system-ui;color:var(--n3);text-decoration:none;
  padding:12px 4px;min-height:44px;display:flex;align-items:center}
.site-menu a:hover{color:var(--n1)}
.foot a{color:var(--n2)}
.sticky{opacity:0;pointer-events:none;transition:opacity .25s ease;position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:20;text-align:center;padding:15px 18px;border-radius:14px;text-decoration:none;
  font:650 14.5px/1 Inter,system-ui;color:#07131A;min-height:48px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  box-shadow:0 18px 44px -22px rgba(60,155,255,.85)}
.sticky.on{opacity:1;pointer-events:auto}
@media(min-width:900px){.sticky{left:auto;right:22px;width:280px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── ЧТО МОЖНО ВЗЯТЬ ──
   Не карточки-витрина, а четыре ответа на вопрос «мне-то что с этого». У каждого честно
   написана цена: там, где бесплатно — так и сказано, там, где нужен баланс — тоже. */
.value{margin-top:20px;display:grid;gap:12px}
@media(min-width:768px){.value{grid-template-columns:1fr 1fr}}
.vcard{padding:18px 19px;border-radius:16px;background:rgba(255,255,255,.038);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)}
.vcard h3{margin:0;font:650 16px/1.25 Inter,system-ui;color:var(--n0)}
.vcard p{margin:9px 0 0;font:500 13.4px/1.55 Inter,system-ui;color:var(--n2)}
.vfree{display:inline-block;margin-top:12px;font:600 12px/1.2 Inter,system-ui;
  letter-spacing:.06em;color:#7FD8C6;padding:5px 10px;border-radius:999px;
  background:rgba(70,200,175,.13)}

/* ── ПЯТЬ КРУПНЫХ ЧАСТЕЙ ──
   Обзор отвечает на «что это», а не «что именно»: здесь одна карточка на слой и одно
   число внутри. Перечисление всех площадок живёт в атласе — на обзорной странице оно
   превращало смысл в стену. */
.parts{margin-top:20px;display:grid;gap:12px}
@media(min-width:900px){.parts{grid-template-columns:1fr 1fr}}
.part{position:relative;padding:18px 19px 18px 54px;border-radius:16px;
  background:rgba(255,255,255,.038);box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)}
.pn{position:absolute;left:19px;top:19px;width:24px;height:24px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font:650 13px/1 Inter,system-ui;
  color:#C9B6FF;background:rgba(150,120,255,.16);
  box-shadow:inset 0 0 0 1px rgba(150,120,255,.28)}
.part h3{margin:0;font:650 16px/1.25 Inter,system-ui;color:var(--n0)}
.part p{margin:9px 0 0;font:500 13.4px/1.55 Inter,system-ui;color:var(--n2)}
.pcount{display:block;margin-top:12px;font:500 12.4px/1.4 Inter,system-ui;color:var(--n3)}

/* Подзаголовок внутри раздела доказательств: четыре разных доказательства должны читаться
   как четыре, а не как один длинный список с числами. */
.pt{margin:30px 0 0;font:650 15px/1.3 Inter,system-ui;color:#C9B6FF}
.pt:first-of-type{margin-top:22px}

/* ── ПЕРВЫЙ ЭКРАН: ТЕКСТ И ЖИВАЯ СЦЕНА РЯДОМ ──
   Раньше здесь были только заголовок и три числа: по такому экрану нельзя понять, что
   внутри происходит. Сцена показывает сам продукт — механику разбора, — и на широком
   экране стоит рядом с текстом, а на телефоне под ним, потому что первым читают слова. */
.hero-grid{display:grid;gap:20px}
@media(min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:34px}
}
.hero-scene{margin:0;position:relative;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 0%,rgba(150,120,255,.14),transparent 60%),
             linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hero-scene canvas{display:block;width:100%;height:210px}
@media(min-width:900px){.hero-scene canvas{height:280px}}
/* Подпись сцены нейтральная. Зелёная «живая» точка и плашка экспирации делали из учебной
   картинки рабочее окно брокера — этого здесь нет и быть не должно. */
.hs-hud{position:absolute;left:14px;top:12px;font:600 11px/1 Inter,system-ui;
  letter-spacing:.1em;text-transform:uppercase;color:var(--n4)}
.hero-scene figcaption{padding:0 14px 14px;display:grid;gap:4px}
.hero-scene figcaption b{font:650 13.5px/1.35 Inter,system-ui;color:var(--n0);
  min-height:19px;transition:opacity .2s ease}
.hero-scene figcaption span{font:500 12.2px/1.45 Inter,system-ui;color:var(--n3)}
@media(prefers-reduced-motion:reduce){.hero-scene figcaption b{transition:none}}

/* ── НЕДЕЛЯ ПО ДНЯМ ──
   Столбик на день. Он показывает не «сколько всего», а РИТМ: где густо, где пусто, когда
   было последнее. Пустой день оставлен пустым и подписан — выходной это факт продукта. */
.days{margin-top:20px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  align-items:end;padding:16px 14px 12px;border-radius:16px;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)}
.day{display:flex;flex-direction:column;align-items:center;gap:7px;justify-content:flex-end}
.day .bar{width:100%;max-width:34px;border-radius:6px;
  background:linear-gradient(180deg,var(--cyan),rgba(60,155,255,.55));
  box-shadow:0 0 18px -6px rgba(0,212,255,.7);
  animation:grow .7s var(--e-out) both}
.day.off .bar{background:rgba(255,255,255,.1);box-shadow:none}
.day b{font:650 13.5px/1 Inter,system-ui;color:var(--n0);font-variant-numeric:tabular-nums}
.day.off b{color:var(--n3)}
.day s{text-decoration:none;font:500 12px/1 Inter,system-ui;color:var(--n3)}
.day:nth-child(2) .bar{animation-delay:.05s}.day:nth-child(3) .bar{animation-delay:.1s}
.day:nth-child(4) .bar{animation-delay:.15s}.day:nth-child(5) .bar{animation-delay:.2s}
.day:nth-child(6) .bar{animation-delay:.25s}.day:nth-child(7) .bar{animation-delay:.3s}
@keyframes grow{from{transform:scaleY(.05);opacity:0}to{transform:scaleY(1);opacity:1}}
.day .bar{transform-origin:bottom}
@media(prefers-reduced-motion:reduce){.day .bar{animation:none}}

/* Каждая форма опыта — со своим рисунком. Одинаковые карточки заставляют ЧИТАТЬ, чтобы
   понять разницу; разные рисунки показывают её до чтения. */
.vvis{margin:-4px 0 12px;height:56px;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center}
.vg{width:100%;height:44px;display:block}

/* ── АВТОР ── подпись человека, а не ещё одна карточка системы. */
.au{margin-top:20px;padding:22px 21px 19px;border-radius:20px;
  background:linear-gradient(160deg,rgba(150,120,255,.10),rgba(255,255,255,.035) 42%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.au-id{display:flex;align-items:center;gap:14px}
/* Портрета нет: разрешённой фотографии у нас нет, а буква в кружке изображала человека
   там, где его нет. Блок держится на словах и ссылках, которые можно проверить. */
.au-id b{display:block;font:650 19px/1.2 Inter,system-ui;color:var(--n0)}
.au-id s{display:block;margin-top:3px;text-decoration:none;
  font:600 12px/1.2 Inter,system-ui;letter-spacing:.1em;text-transform:uppercase;color:#A9B6D0}
.au-lede{margin:15px 0 0;font:500 14.5px/1.6 Inter,system-ui;color:var(--n1);max-width:660px}
.au-facts{margin-top:17px;display:grid;gap:11px}
@media(min-width:820px){.au-facts{grid-template-columns:repeat(3,1fr);gap:14px}}
.au-facts div{padding-top:11px;border-top:1px solid rgba(255,255,255,.10)}
.au-facts dt{font:600 11.5px/1.2 Inter,system-ui;letter-spacing:.09em;text-transform:uppercase;
  color:#8FA3C8}
.au-facts dd{margin:6px 0 0;font:500 13.4px/1.55 Inter,system-ui;color:var(--n1)}
.au-links{margin-top:17px;display:grid;gap:8px}
@media(min-width:560px){.au-links{grid-template-columns:1fr 1fr}}
.au .asof{margin-top:14px}

/* ── КАРТА ЧАСТЕЙ: ОДИН ОРГАНИЗМ ──
   Части живут на общей линии, а не в сетке карточек: линия и есть утверждение «это одна
   система». Движение по линии медленное и одно на весь блок — оно показывает, что система
   работает, и не мешает читать. */
.map{margin-top:22px;position:relative;display:grid;gap:16px}
.map::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#9678FF,#3C9BFF 55%,#22C99C)}
.map::after{content:"";position:absolute;left:5px;top:8px;width:6px;height:74px;border-radius:6px;
  background:linear-gradient(180deg,transparent,rgba(190,230,255,.85),transparent);
  filter:blur(1px);animation:flow 9s linear infinite}
@keyframes flow{from{transform:translateY(0)}to{transform:translateY(calc(100% - 74px))}}
.st{position:relative;padding-left:34px}
.sd{position:absolute;left:2px;top:6px;width:12px;height:12px;border-radius:50%;
  background:linear-gradient(150deg,#C9B6FF,#3C9BFF);
  box-shadow:0 0 0 4px var(--bg,#050607),0 0 14px 2px rgba(120,140,255,.4)}
.st:last-child .sd{background:linear-gradient(150deg,#7FE3C6,#22C99C)}
.sb{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)}
.sb h3{margin:0;display:flex;align-items:baseline;gap:9px;
  font:650 16px/1.25 Inter,system-ui;color:var(--n0)}
.sb h3 i{font:650 11px/1 Inter,system-ui;font-style:normal;letter-spacing:.08em;color:#8FA3C8}
.sb p{margin:8px 0 0;font:500 13.4px/1.55 Inter,system-ui;color:var(--n2)}
@media(min-width:980px){
  /* На широком экране линия ложится горизонтально: пять станций одного маршрута. */
  .map{grid-template-columns:repeat(5,1fr);gap:14px}
  .map::before{left:8px;right:8px;top:7px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,#9678FF,#3C9BFF 55%,#22C99C)}
  .map::after{left:0;top:4px;width:88px;height:6px;
    background:linear-gradient(90deg,transparent,rgba(190,230,255,.85),transparent);
    animation:flowx 9s linear infinite}
  @keyframes flowx{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 88px))}}
  .st{padding:26px 0 0}
  .sd{left:0;top:1px}
  .sb{height:100%}
}
@media(prefers-reduced-motion:reduce){.map::after{animation:none;opacity:.35}}

/* ── ДО → СТАЛО ── два состояния рядом: реплика человека и экран, который появился после. */
.ba{margin:14px 0 16px;display:grid;gap:12px;align-items:start}
@media(min-width:820px){.ba{grid-template-columns:1fr 26px 1fr;gap:14px}
  .ba-arrow{align-self:center}}
.ba-col{margin:0}
.ba-col figcaption{font:600 11.5px/1.2 Inter,system-ui;letter-spacing:.09em;
  text-transform:uppercase;color:#8FA3C8;margin-bottom:8px}
.ba-col figcaption b{color:#C9B6FF;letter-spacing:.09em}
.ba-arrow{justify-self:center;color:#5C6A85;font-size:19px;line-height:1}
@media(max-width:819px){.ba-arrow{transform:rotate(90deg)}}
.bubble{position:relative;padding:13px 15px;border-radius:14px 14px 14px 4px;
  background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font:500 13.4px/1.6 Inter,system-ui;color:var(--n1)}
.bubble .bh{display:block;margin-bottom:7px;font:600 11.5px/1.2 Inter,system-ui;color:#7E8CA6}
.ui{padding:11px;border-radius:14px;background:rgba(0,212,255,.05);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.18)}
.ui-in{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;
  border-radius:9px;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.35)}
.ui-q{font:500 13.5px/1 Inter,system-ui;color:var(--n0)}
.ui-in i{font-style:normal;color:#5C6A85;font-size:12px}
.ui-r{margin-top:8px;padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.035)}
.ui-r.dim{opacity:.45}
.ui-r b{display:block;font:600 13px/1.4 Inter,system-ui;color:var(--n0)}
.ui-r s{display:block;margin-top:3px;text-decoration:none;
  font:500 11.8px/1.3 Inter,system-ui;color:var(--n3)}

.ui-n{display:block;margin:9px 2px 2px;font:600 11.5px/1.2 Inter,system-ui;color:#7FD8C6}

/* ── ФИЛЬТР РЕЕСТРА (атлас) ── справочник, а не документ для чтения сверху вниз. */
.regfilter{margin:16px 0 10px;display:grid;gap:9px}
@media(min-width:760px){.regfilter{grid-template-columns:minmax(220px,1fr) auto auto;
  align-items:center}}
#reg-q{width:100%;padding:11px 14px;border-radius:11px;border:0;
  font:500 14px/1.2 Inter,system-ui;color:var(--n0);background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
#reg-q::placeholder{color:#6C7A93}
#reg-q:focus{outline:0;box-shadow:inset 0 0 0 1px rgba(0,212,255,.55)}
.regkinds{display:flex;gap:6px;flex-wrap:wrap}
.rk{font:600 12px/1 Inter,system-ui;color:#9FB0CC;padding:9px 12px;border-radius:999px;border:0;
  cursor:pointer;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.rk.on{color:#06121C;background:linear-gradient(120deg,#7FE3FF,#00D4FF)}
.rk:focus-visible{outline:2px solid #00D4FF;outline-offset:2px}
.regcount{font:500 12.4px/1.2 Inter,system-ui;color:var(--n3);white-space:nowrap}
.regcount.zero{color:#E0576B}

/* Группы реестра: слой сворачивается целиком. На широком экране группы открыты всегда —
   там таблица читается целиком и прятать нечего. */
tbody.grp .ghead td{padding:0;border-bottom:0;background:none}
.gbtn{width:100%;display:flex;align-items:center;gap:9px;padding:13px 15px;border:0;
  cursor:pointer;background:rgba(255,255,255,.05);color:var(--n0);text-align:left;
  font:650 13px/1.3 Inter,system-ui}
.gbtn i{margin-left:auto;font-style:normal;font:600 11.5px/1 Inter,system-ui;color:var(--n3)}
.gcar{display:inline-block;color:#8FA3C8;transition:transform .18s}
tbody.grp.open .gcar{transform:rotate(90deg)}
@media(max-width:759px){
  tbody.grp:not(.open) tr:not(.ghead){display:none}
  tbody.grp .ghead{display:block;margin-bottom:11px}
  .gbtn{border-radius:12px}
}
@media(min-width:760px){
  tbody.grp .ghead td{border-bottom:1px solid rgba(255,255,255,.055)}
  tbody.grp:not(.open) tr:not(.ghead){display:table-row}
  .gbtn{cursor:default;pointer-events:none}
  .gcar{display:none}
}
.regempty{margin:12px 2px 0;font:500 13.4px/1.55 Inter,system-ui;color:var(--n2)}
.jump .jback{color:#06121C;background:linear-gradient(120deg,#C9B6FF,#9678FF);font-weight:650}
.jump .jback.on,.jump .jback:hover{color:#06121C}

/* Статус доказательства виден раньше, чем сам текст: «публично не проверяется» — это
   не сноска мелким шрифтом, а часть утверждения. */
.pubno{margin-top:12px;padding:11px 14px;border-radius:11px;
  background:rgba(255,190,90,.07);box-shadow:inset 0 0 0 1px rgba(255,190,90,.22);
  font:500 12.6px/1.55 Inter,system-ui;color:var(--n2)}
.pubno b{color:#F0C878;font-weight:650}

/* Внешняя дверь — в самом низу раскрытия, после всех условий. Отделена чертой, чтобы
   было видно: сначала прочитано, потом переход. */
.disc-gate{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,190,90,.22);
  display:grid;gap:10px}

/* Явно обозначенный контейнер прокрутки: подпись сверху и тень у правого края. Без них
   «таблица прокручивается внутри» знает только тот, кто её писал. */
.regscroll{margin:10px 2px 0;font:500 12.4px/1.5 Inter,system-ui;color:var(--n3)}
.regwrap.scrollable{position:relative;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}

/* На большом экране таблица обязана ВЛЕЗАТЬ: восемь колонок не помещались даже в 1440,
   и справочник приходилось двигать вбок при полном отсутствии на то причины. Причина
   была в мелочах — широкие боковые поля ячеек и запрет переноса у числовых колонок. */
@media(min-width:1100px){
  table.reg th,table.reg td{padding:11px 10px}
  table.reg td.n{white-space:normal}
}