/* ============================================================
   COMPOSE — слой перекомпоновки поверх css/site.css и css/reflex.css.
   Подключается последним. Включается атрибутом data-compose на <body>; вариант зоны «Участие» — data-join="tabs|cols".
   Принципы: контентные кирпичи (одна секция — одна мысль), большой воздух между кирпичами,
   близость (внутри группы плотно, между группами далеко), сходство (однотипное — в одинаковых карточках),
   иерархия (h1 → h2 → заголовок карточки → текст → подпись), две архитектуры выбора сценария.
   ============================================================ */
[data-compose]{--gap:176px;--sp-head:20px;--sp-content:56px;
  --card:rgba(255,255,255,.5);--card-on:rgba(255,255,255,.7);--card-r:24px;--card-p:28px;
  --band:rgba(255,255,255,.26);--band-p:clamp(72px,8vw,112px)}
@media (max-width:760px){[data-compose]{--gap:112px;--sp-content:36px;--card-p:22px;--band-p:56px}}

/* ---------- кирпичи: границы зон задаются воздухом (--gap) и чередованием «земля / полоса» ---------- */
[data-compose] .sec.brick{padding-bottom:0;margin-bottom:var(--gap)}
[data-compose] section.hero{padding-bottom:0;margin-bottom:var(--gap)}
[data-compose] .sec.band{padding-top:var(--band-p);padding-bottom:var(--band-p)}
[data-compose] .sec.band::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--band);z-index:-1;pointer-events:none}
[data-compose] main>.band:last-child{margin-bottom:0}

/* ---------- иерархия: h2 крупнее и один на кирпич; описание — узкой мерой под ним ---------- */
[data-compose][data-page="home"] h2{font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-.03em}
[data-compose] .sec-head{max-width:760px}
[data-compose] .two{gap:48px}

/* ---------- общая карточка: одинаковый контейнер для однотипных тезисов ---------- */
[data-compose] :is(.headlines li,.rxcard li,.levels li,.loop-bullets .b,.stage3 .col,#faq .card,.path){
  background:var(--card);border-radius:var(--card-r);padding:var(--card-p);display:flex;flex-direction:column;gap:10px;min-width:0}

/* главная: «Всё уже есть» — три карточки */
[data-compose] .headlines{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;margin:0;padding:0;list-style:none;background:none;box-shadow:none;border-radius:0;overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none}
[data-compose] .headlines::before{display:none}
[data-compose] .headlines li{border:none;gap:14px;font-size:var(--fs-body);line-height:1.45;color:var(--ink)}
[data-compose] .headlines .n{padding:0;font-size:var(--fs-meta)}

/* главная: карточка Reflex — шапка (кикер → заголовок → кнопка | карта), ниже четыре одинаковых пункта */
[data-compose] .rxcard{display:flex;flex-direction:column;gap:40px;padding:40px}
[data-compose] .rxcard .top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:40px;align-items:center}
[data-compose] .rxcard .col{gap:24px}
[data-compose] .rxcard h2.cardlead{margin:0;font-size:clamp(24px,2.6vw,36px);line-height:1.18;letter-spacing:-.025em;font-weight:700;max-width:none}
[data-compose] .rxcard ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1000px){[data-compose] .rxcard ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){[data-compose] .rxcard ul{grid-template-columns:minmax(0,1fr)}}
[data-compose] .rxcard li{padding:22px 24px;font-size:var(--fs-sm);line-height:1.45;color:var(--ink)}
[data-compose] .rxcard li span:first-child{padding:0;font-size:var(--fs-meta)}
@media (max-width:760px){[data-compose] .rxcard{padding:24px;gap:28px;border-radius:28px}}

/* reflex: «Обзор → область → объект» — свой кирпич, три одинаковых карточки уровней */
[data-compose][data-page="reflex"] .sec-how{margin-top:-40px;padding-top:0}
[data-compose][data-page="reflex"] .sec-how .t-head{margin-bottom:var(--sp-content)}
@media (max-width:760px){[data-compose][data-page="reflex"] .sec-how{margin-top:0;padding-top:0}
  /* телефон: открыт лист объекта — страница под ним стоит, лист над всеми секциями и шапкой */
  html.sheet-open,html.sheet-open body{overflow:hidden;overscroll-behavior:none}
  html.sheet-open .demo .scene{z-index:40}
  [data-compose] .rxm .rx-sheet{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* телефон: вкладки областей в «осях» переносятся в несколько рядов — все девять видны, ничего не обрезано; выбранная — белой пилюлей (капля-ползунок одна на ряд не ложится) */
  [data-compose][data-page="reflex"] .axes .seg{flex-wrap:wrap;overflow:visible;border-radius:20px;gap:4px;padding:4px;-webkit-mask-image:none!important;mask-image:none!important}
  [data-compose][data-page="reflex"] .axes .seg .thumb{display:none}
  [data-compose][data-page="reflex"] .axes .seg button{flex:none;border-radius:99px;transition:background .3s,color .3s}
  [data-compose][data-page="reflex"] .axes .seg button.on{background:#fff}
  /* телефон, «оси»: панель читается сверху вниз — область (сетка 3×3, выбранная тёмная) → пять шагов вертикальной нумерованной цепочкой */
  [data-compose][data-page="reflex"] .axes{padding:20px 18px 22px}
  [data-compose][data-page="reflex"] .axes .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0;background:none;border-radius:0}
  [data-compose][data-page="reflex"] .axes .seg button{padding:11px 6px;font-size:14px;line-height:1.2;text-align:center;white-space:normal;background:rgba(255,255,255,.5);color:var(--ink);border-radius:14px;min-height:44px}
  [data-compose][data-page="reflex"] .axes .seg button.on{background:var(--ink);color:#fff}
  [data-compose][data-page="reflex"] .axes .strip{margin-top:28px;display:flex;flex-direction:column;gap:0;counter-reset:ax}
  [data-compose][data-page="reflex"] .axes .step{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;padding:0 0 22px;background:none}
  [data-compose][data-page="reflex"] .axes .step::before{counter-increment:ax;content:counter(ax);display:flex;align-items:center;justify-content:center;position:static;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.7);font:600 13px/1 var(--font);color:var(--ink);grid-row:1/3}
  [data-compose][data-page="reflex"] .axes .step.warm::before{background:var(--warm);color:#fff}
  [data-compose][data-page="reflex"] .axes .step:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:30px;bottom:2px;width:1px;background:rgba(18,21,28,.14)}
  [data-compose][data-page="reflex"] .axes .step:last-child{padding-bottom:0}
  [data-compose][data-page="reflex"] .axes .v{grid-column:2;margin:0 0 3px;font:500 13px/1.3 var(--font);color:var(--muted2);white-space:normal;align-self:end;min-height:28px;display:flex;align-items:center}
  [data-compose][data-page="reflex"] .axes .v i,[data-compose][data-page="reflex"] .axes .warm .v i{display:none}
  [data-compose][data-page="reflex"] .axes .x{grid-column:2;font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
  [data-compose][data-page="reflex"] .axes .note{margin-top:28px;padding-top:20px;border-top:1px solid rgba(18,21,28,.08)}}
[data-compose] .levels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
[data-compose] .levels li{gap:8px}
[data-compose] .levels .n{font-size:var(--fs-meta);color:var(--muted2);margin-bottom:6px}
[data-compose] .levels b{font-size:var(--fs-title);font-weight:600;letter-spacing:-.015em;line-height:1.25}
[data-compose] .levels p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--muted2)}

/* reflex: списки пунктов (петля, «Сейчас», ассистент) — одинаковые карточки */
[data-compose] .loop-bullets .b{padding:24px;border-top:none}
[data-compose] .loop-bullets b{margin:0 0 2px}
[data-compose] #loopBullets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
[data-compose] #asstBullets{display:grid;gap:16px}
[data-compose][data-page="reflex"] .pts3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){[data-compose] #loopBullets,[data-compose][data-page="reflex"] .pts3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){[data-compose] #loopBullets{grid-template-columns:minmax(0,1fr)}}
[data-compose][data-page="reflex"] .loop-grid{align-items:center;row-gap:48px}

/* reflex: «Где мы» — три одинаковые карточки, «сейчас» светлее */
[data-compose][data-page="reflex"] .stage3{gap:16px}
[data-compose][data-page="reflex"] .stage3 .col{padding:var(--card-p) var(--card-p) var(--card-p) calc(var(--card-p) + 16px);gap:0}
[data-compose][data-page="reflex"] .stage3 .col.now{background:var(--card-on)}
[data-compose][data-page="reflex"] .stage3 .l{margin-bottom:18px}

/* reflex: вопросы — одинаковые карточки */
[data-compose][data-page="reflex"] .faq-grid{gap:16px}
[data-compose] #faq .card{background:var(--card);border-radius:var(--card-r);padding:var(--card-p);gap:10px}

/* ---------- участие ---------- */
[data-compose] .join .sec-head,[data-compose] .join .t-head{margin-bottom:40px}
/* вариант A — табы: один переключатель над обеими колонками управляет и описанием, и формой */
[data-compose] .join .tabs{display:inline-flex;flex-wrap:nowrap;max-width:100%;margin:0 0 32px}
[data-compose] .join .tabs button{padding:12px 18px;font-size:var(--fs-sm);font-family:var(--font);letter-spacing:0;white-space:normal;text-align:center;line-height:1.25}
[data-compose] .join-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
@media (max-width:900px){[data-compose] .join-grid{grid-template-columns:minmax(0,1fr);gap:40px}}
[data-compose] .join .side{display:flex;flex-direction:column;gap:0}
[data-compose] .join .side h3{margin:0 0 12px}
[data-compose] .join .side p{margin:0 0 28px}
[data-compose] #joinBullets .glass{background:var(--card);border-radius:var(--card-r);padding:22px var(--card-p);overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
[data-compose] #joinBullets .glass::before{display:none}
[data-compose] .join .bullets .lbl{padding:0 0 6px}
[data-compose] .join .bullets ul{padding:0}
[data-compose][data-page="reflex"] .join .bullets ul{padding-left:16px}

/* вариант B — две равноправные колонки: карточка сценария → форма под ними */
[data-compose] .paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;margin-bottom:24px}
[data-compose] .path{gap:16px;padding:32px;transition:box-shadow .3s,background .3s}
[data-compose] .path.on{background:var(--card-on);box-shadow:0 0 0 2px var(--deep)}
[data-compose] .path h3{margin:0;font-size:var(--fs-title);letter-spacing:-.015em}
[data-compose] .path>p{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--muted)}
[data-compose] .path .lbl{margin-top:8px;font-size:var(--fs-meta);font-weight:600;color:var(--ink)}
[data-compose] .path ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm);line-height:1.45}
[data-compose] .path li{display:flex;gap:10px;align-items:baseline}
[data-compose] .path li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.5;transform:translateY(-2px)}
[data-compose] .path .btn{margin-top:auto;align-self:flex-start}
@media (pointer:coarse){[data-compose] .path .btn,[data-compose] .form .submit{min-height:48px}[data-compose] .form input{height:48px}}
@media (max-width:760px){[data-compose] .paths{gap:14px;margin-bottom:16px}[data-compose] .path{padding:24px}[data-join="cols"] .form .fhead{text-align:left;align-items:flex-start}[data-join="cols"] .form .fact{align-items:flex-start}}
[data-compose] .path ul{margin-bottom:12px}
[data-join="cols"] .form .seg{display:none}
[data-join="cols"] .form{max-width:none;width:100%;align-items:center}
[data-join="cols"] .form form,[data-join="cols"] .form .fhead,[data-join="cols"] .form .done{width:100%;max-width:820px}
[data-join="cols"] .form .fhead{text-align:center;align-items:center}
[data-join="cols"] .form input,[data-join="cols"] .form textarea{height:46px;font-size:var(--fs-sm)}
[data-join="cols"] .form textarea{height:auto;min-height:92px}
[data-join="cols"] .form label{font-size:var(--fs-meta)}
[data-join="cols"] .form .fact{align-items:center}
[data-join="cols"] .form form{max-width:none}
[data-join="cols"] .fgrp.pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
[data-join="cols"] .fgrp.about{grid-template-columns:minmax(0,1fr)}
[data-join="cols"] .fgrp.about .profile{grid-column:1/-1}
[data-compose] .form .fhead{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
[data-compose] .form .fhead h3{margin:0;font-size:var(--fs-title);letter-spacing:-.015em}
[data-compose] .form .fhead p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}

/* ---------- форма: закон близости — подпись у поля (8), поля одной группы рядом (14), между группами далеко (32) ---------- */
[data-compose] .form{padding:36px;min-height:0;justify-content:flex-start}
[data-compose] .form form{gap:32px}
[data-compose] .fgrp{display:grid;gap:14px}
[data-compose] .fgrp.pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
[data-compose] .form label{gap:8px}
[data-compose] .form input,[data-compose] .form textarea{background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(18,21,28,.12)}
[data-compose] .form input:focus,[data-compose] .form textarea:focus{box-shadow:0 0 0 2px rgba(61,213,196,.55),0 0 0 5px rgba(61,213,196,.16)}
[data-compose][data-page="reflex"] .form input:focus,[data-compose][data-page="reflex"] .form textarea:focus{box-shadow:0 0 0 1px rgba(18,21,28,.12);outline:2px solid var(--deep);outline-offset:2px}
[data-compose] .fgrp .profile{margin-top:-14px;transition:grid-template-rows var(--dur) var(--ease),margin-top var(--dur) var(--ease)}
[data-compose] .fgrp .profile.show{margin-top:0}
[data-compose] .fact{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
[data-compose] .form .submit{margin:0;align-self:flex-start}
[data-compose] .form .ferr{margin:0}
@media (max-width:760px){[data-compose] .form{padding:22px}[data-compose] .form form{gap:28px}}

/* ---------- движение: одна кривая и длительность (--ease/--dur из site.css), только transform/opacity ---------- */
[data-compose] .path{transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
[data-compose] .path .btn{transition:transform .35s var(--spring),box-shadow .35s var(--spring),opacity .25s}
[data-compose] .form .fhead h3{transition:opacity .16s ease,translate .16s ease}
[data-compose] .form .fhead h3.out{opacity:0;translate:0 -4px}
[data-compose] .form .fhead h3.swap{animation:cSwap .32s var(--ease) both}
@keyframes cSwap{from{opacity:0;translate:0 6px}}
[data-compose] .fgrp .profile{transition:grid-template-rows var(--dur) var(--ease),margin-top var(--dur) var(--ease),opacity var(--dur) var(--ease);opacity:0}
[data-compose] .fgrp .profile.show{opacity:1}
[data-compose] .form .submit{transition:transform .35s var(--spring),box-shadow .35s var(--spring),opacity .2s}
[data-compose] .form input,[data-compose] .form textarea{transition:box-shadow .2s ease,background .2s ease}
@media (prefers-reduced-motion:reduce){
  [data-compose] .path,[data-compose] .form .fhead h3,[data-compose] .fgrp .profile{transition:none}
  [data-compose] .form .fhead h3.swap{animation:none}}

/* ---------- футер: бренд | контакты тремя группами (почта+телефон · мессенджеры · соцсети) ---------- */
[data-compose] footer .in{padding-top:48px;padding-bottom:56px;gap:32px 48px}
[data-compose] footer .cols{gap:40px;font-family:var(--font);font-size:var(--fs-sm)}
[data-compose] footer .cols>div{gap:10px}
[data-compose] footer .cols a{transition:opacity .2s}
[data-compose] footer .cols a:hover{opacity:.65}