/* Zidos Direct на zidos.app. Сцена Instagram/YouTube перенесена из кабинета (web/cabinet-r9-20261027/css/scene.css),
   внутри экрана телефона свои цвета: это чужой интерфейс. Токены кабинета сведены к токенам сайта. */
/* ── Основа r10: классов старой основы (home-r7/sub-r8) в app-r9.css нет, определены здесь в области :where(.dx-main) ── */
:root{--color-ink:var(--on-color);--on-ink:var(--canvas)}
.dx-main{padding-top:var(--hdr)}
:where(.dx-main) .section{padding-top:168px}
:where(.dx-main) .crumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:24px}
/* поля вместо min-width: короткое «zidos» не оставляет пустоту справа, цель касания ≥44 px */
:where(.dx-main) .crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:0 -6px;color:var(--muted)}
:where(.dx-main) .crumb a:hover{color:var(--ink)}
:where(.dx-main) .crumb-sep{color:var(--muted)}
:where(.dx-main) .sub-hero{padding-top:64px}
:where(.dx-main) .sub-hero-grid{display:grid;position:relative;z-index:1}
:where(.dx-main) .sub-hero-copy{min-width:0;padding:32px;border-radius:28px}
:where(.dx-main) .sub-hero h1{font-weight:500;line-height:1;letter-spacing:-.055em}
:where(.dx-main) .sub-hero-lead{font-size:19px;color:var(--muted);line-height:1.55;margin-top:28px;max-width:62ch}
:where(.dx-main) .sub-hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:32px}
:where(.dx-main) .sub-heading{margin-bottom:40px}
:where(.dx-main) .sub-heading h2,:where(.dx-main) .stack-heading h2{font-size:64px;font-weight:500;line-height:1;letter-spacing:-.055em}
:where(.dx-main) .sub-heading p,:where(.dx-main) .stack-heading>p{font-size:19px;color:var(--muted);line-height:1.55;margin-top:26px;max-width:650px}
:where(.dx-main) .more{display:grid;grid-template-columns:5fr 7fr;gap:86px;align-items:start}
:where(.dx-main) .stack-heading{position:sticky;top:96px}
:where(.dx-main) .product-window{border-radius:28px;background:var(--panel);overflow:hidden}
:where(.dx-main) .text-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;white-space:nowrap}
:where(.dx-main) .btn.primary{background:var(--ink);color:var(--canvas)}
:where(.dx-main) .btn.primary:hover{background:var(--lime);color:var(--on-color)}
:where(.dx-main) .btn.primary:active{background:var(--lime-press);color:var(--on-color)}

@media(max-width:1000px){:where(.dx-main) .section{padding-top:128px}:where(.dx-main) .more{grid-template-columns:1fr;gap:40px}:where(.dx-main) .stack-heading{position:static}}
@media(max-width:768px){:where(.dx-main) .sub-hero{padding-top:32px}:where(.dx-main) .sub-heading h2,:where(.dx-main) .stack-heading h2{font-size:44px}:where(.dx-main) .sub-heading p,:where(.dx-main) .stack-heading>p{font-size:18px;margin-top:24px}:where(.dx-main) .sub-hero-lead{font-size:17px}:where(.dx-main) .sub-hero-actions{flex-direction:column;align-items:stretch}:where(.dx-main) .sub-hero-actions .btn{width:100%}}
@media(max-width:500px){:where(.dx-main) .sub-heading h2,:where(.dx-main) .stack-heading h2{font-size:38px}:where(.dx-main) .sub-heading p,:where(.dx-main) .stack-heading>p{font-size:17px}}

:root{--ink2:var(--muted);--zd-muted:var(--muted);--zd-ink:var(--ink);--zd-panel:var(--panel);--zd-frame:var(--frame);--zd-raised:var(--frame);--zd-ease:var(--ease);--zd-lime:var(--lime);--t-fast:var(--fast);--r-s:8px;--r:18px;--r-xl:28px;--gap-s:8px}
:root { --ig-w: 312px; --ig-h: 640px; --ig-bezel: #0e0f11;
  --ig-scr: #ffffff; --ig-tx: var(--ink); --ig-mu: var(--ink2); --ig-bb: #efefef; --ig-blue: #0c6fd6; --ig-blue-tx: #0a63bf; --ig-on-blue: #ffffff; --ig-dimc: rgb(0 0 0 / .45); --ig-sheet: #ffffff; --ig-av-fg: #ffffff; --ig-av-bg: #c9cdd2; }
.ig-nav { display: flex; justify-content: space-around; align-items: center; padding: 8px 10px 16px; flex: none; background: var(--ig-scr); }
.ig-av--t { width: 24px; height: 24px; }
.ig-photo--none { background: var(--ig-bb); }
.ig-top--dm .ig-top__t { flex: 1; }
:root[data-theme=dark] { --ig-av-fg: #8e8e8e; --ig-av-bg: #363636; --ig-blue-tx: #4a9bf0; --ig-scr: #000000; --ig-bb: #262626; --ig-sheet: #1c1c1e; --ig-bezel: #2a2d31; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --ig-av-fg: #8e8e8e; --ig-av-bg: #363636; --ig-blue-tx: #4a9bf0; --ig-scr: #000000; --ig-bb: #262626; --ig-sheet: #1c1c1e; --ig-bezel: #2a2d31; } }

.ig-phone { width: var(--ig-w); height: var(--ig-h); flex: none; padding: 10px; border-radius: 48px; background: var(--ig-bezel); }
.ig-phone--s { --ig-w: 236px; --ig-h: 470px; padding: 8px; border-radius: 38px; }
.ig-screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 38px; background: var(--ig-scr); color: var(--ig-tx); font: 400 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif; letter-spacing: -.005em; }
.ig-screen b { font-weight: 600; } /* чужой интерфейс: системный шрифт Instagram, имена 600 */
.ig-phone--s .ig-screen { border-radius: 30px; font-size: 11px; }
.ig-screen p { margin: 0; }
.ig-i { width: 22px; height: 22px; flex: none; }
.ig-phone--s .ig-i { width: 17px; height: 17px; }

.ig-sb { display: flex; justify-content: space-between; align-items: center; padding: 12px 26px 4px; font-size: 13px; flex: none; }
.ig-sb__r { display: flex; align-items: flex-end; gap: 2px; }
.ig-sb__r i { width: 3px; background: currentColor; border-radius: 1px; } .ig-sb__r i:nth-child(1) { height: 5px; } .ig-sb__r i:nth-child(2) { height: 7px; } .ig-sb__r i:nth-child(3) { height: 9px; }
.ig-sb__r u { width: 20px; height: 9px; margin-left: 4px; border: 1.5px solid currentColor; border-radius: 3px; text-decoration: none; }

.ig-top { display: flex; align-items: center; gap: 10px; padding: 6px 14px 8px; flex: none; }
.ig-top__t { flex: 1; display: grid; justify-items: center; font-weight: 600; font-size: 14px; line-height: 1.2; }
.ig-top__t small { font-size: 10px; color: var(--ig-mu); font-weight: 500; letter-spacing: .02em; }
.ig-top__t--l { justify-items: start; } .ig-top__t--l small { letter-spacing: 0; text-transform: none; }
.ig-top__s { width: 22px; flex: none; }

.ig-scroll { flex: 1; overflow: hidden; }
.ig-au { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; }
.ig-au__more { margin-left: auto; }
.ig-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.ig-av--s { width: 26px; height: 26px; } .ig-av--xl { width: 76px; height: 76px; }
.ig-av--i { display: grid; place-items: end center; overflow: hidden; background: var(--ig-av-bg); }
.ig-av--i svg { width: 86%; height: 86%; fill: var(--ig-av-fg); }
.ig-av--gap { visibility: hidden; }
.ig-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ig-acts { display: flex; align-items: center; gap: 14px; padding: 10px 12px 6px; }
.ig-acts span { flex: 1; }
.ig-likes { padding: 0 12px; font-weight: 600; }
.ig-cap { padding: 2px 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ig-meta { padding: 2px 12px; color: var(--ig-mu); } .ig-meta--s { font-size: 11px; }
.ig-under { margin: 10px 0 0; max-width: var(--ig-w); text-align: center; font-size: 12px; color: var(--zd-muted); }

/* шторка комментариев */
.ig-dim { position: relative; flex: none; height: 30%; overflow: hidden; }
.ig-dim::after { content: ''; position: absolute; inset: 0; background: var(--ig-dimc); }
.ig-drawer { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: -14px; position: relative; border-radius: 16px 16px 0 0; background: var(--ig-sheet); }
.ig-grab { display: block; width: 36px; height: 4px; margin: 8px auto 4px; border-radius: 2px; background: var(--ig-mu); opacity: .5; }
.ig-drawer__t { text-align: center; font-weight: 600; padding: 2px 0 10px; }
.ig-cms { flex: 1; overflow-y: auto; scrollbar-width: none; display: grid; gap: 14px; align-content: start; padding: 4px 14px 10px; }
.ig-cm { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; }
.ig-cm--re { padding-left: 38px; }
.ig-cm__b { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.ig-cm__time, .ig-cm__rp { color: var(--ig-mu); font-size: 11px; } .ig-cm__rp { font-weight: 600; }
.ig-cm__h { width: 14px; height: 14px; color: var(--ig-mu); margin-top: 4px; }
.ig-empty { color: var(--ig-mu); text-align: center; padding-top: 24px; }
.ig-emoji { display: flex; justify-content: space-around; padding: 8px 10px; font-size: 18px; flex: none; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ig-phone--s .ig-emoji { font-size: 14px; }
.ig-in { display: flex; align-items: center; gap: 10px; margin: 0 10px 14px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--ig-bb); color: var(--ig-mu); font-size: 12px; flex: none; white-space: nowrap; overflow: hidden; }

/* директ */
.ig-thread { flex: 1; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; }
.ig-thread > :first-child { margin-top: auto; } /* прижать к низу, но верх длинной переписки остаётся доступен прокруткой */
.ig-row { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.ig-row--me { align-self: flex-end; }
.ig-bub { padding: 8px 12px; border-radius: 20px; background: var(--ig-bb); overflow-wrap: anywhere; display: grid; gap: 8px; }
.ig-bub img { width: 100%; border-radius: 12px; }
.ig-row--me .ig-bub { background: var(--ig-blue); color: var(--ig-on-blue); }
.ig-row--me .ig-mbtn { color: var(--ig-tx); }
.ig-bub--card { padding: 10px 10px 8px; border-radius: 18px; }
.ig-bub--card p { padding: 0 2px; }
.ig-mbtns { display: grid; gap: 4px; }
.ig-mbtn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 10px; background: var(--ig-scr); font-weight: 600; text-align: center; }
.ig-mbtn .ig-i { width: 15px; height: 15px; }
.ig-sys { align-self: center; color: var(--ig-mu); font-size: 11px; padding: 6px 0; text-align: center; }
.ig-qr { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 92%; }
.ig-qr span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ig-blue-tx); color: var(--ig-blue-tx); font-weight: 500; }
.ig-ph { color: var(--ig-mu); font-style: normal; }
.ig-row--me .ig-ph { color: inherit; opacity: .7; }
.ig-compose { display: flex; align-items: center; gap: 10px; margin: 4px 10px 14px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--ig-bb); flex: none; }
.ig-compose__cam { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ig-blue); color: var(--ig-on-blue); flex: none; }
.ig-compose__cam .ig-i { width: 17px; height: 17px; }
.ig-compose__t { flex: 1; color: var(--ig-mu); }
.ig-compose .ig-i { width: 20px; height: 20px; }

/* профиль */
.ig-prof { display: flex; align-items: center; gap: 14px; padding: 8px 14px; }
.ig-prof__n { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: 10px; line-height: 1.2; }
.ig-prof__n p { min-width: 0; overflow-wrap: anywhere; }
.ig-prof__n b { display: block; font-size: 15px; font-weight: 600; }
.ig-bio { padding: 4px 14px; font-size: 12px; }
.ig-bio__l { display: flex; align-items: center; gap: 4px; margin: 2px 14px; color: var(--ig-blue-tx); font-weight: 500; font-size: 12px; border-radius: 8px; }
.ig-bio__l .ig-i { width: 14px; height: 14px; }
.ig-pbtn { display: flex; gap: 6px; padding: 10px 14px; }
.ig-pbtn span { flex: 1; display: grid; place-items: center; height: 30px; border-radius: 8px; background: var(--ig-bb); font-weight: 600; font-size: 12px; }
.ig-pbtn span:first-child { background: var(--ig-blue); color: var(--ig-on-blue); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }


/* проигрывание пути: элемент ждёт, потом проявляется */
.is-wait { opacity: 0; transform: translateY(8px); }
/* вход блока 600 мс; прозрачность линейно: по кривой выдоха крупный блок проявлялся за 1–2 кадра и читался как склейка */
.is-in { opacity: 1; transform: none; transition: opacity 600ms linear, transform 600ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .is-wait { transform: none; } .is-in { transition: opacity 120ms linear; transform: none; } }
/* ── Сцена YouTube (канал): страница видео и ветка комментариев; те же --ig-* токены «чужого интерфейса» ── */
.yt-app { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ig-scr); color: var(--ig-tx); }
.yt-player { position: relative; flex: none; aspect-ratio: 16 / 9; background: var(--dx-yt-black); }
.yt-player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* иначе min-height:auto картинки ломает 16:9 */
.yt-play { position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--dx-yt-scrim); color: var(--dx-yt-on); }
.yt-play .ig-i { width: 20px; height: 20px; }
.yt-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 4px; background: var(--dx-yt-chip); color: var(--dx-yt-on); font-size: 10px; font-weight: 600; }
.yt-scroll { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 10px 12px 16px; }
.yt-title { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.yt-meta { color: var(--ig-mu); font-size: 11px; }
.yt-ch { display: flex; align-items: center; gap: 10px; }
.yt-ch__t { display: grid; min-width: 0; }
.yt-ch__t b { font-size: 12px; }
.yt-ch__t small { color: var(--ig-mu); font-size: 11px; }
.yt-ch .ig-i { margin-left: auto; color: var(--ig-mu); width: 15px; height: 15px; }
.yt-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.yt-av--i { display: grid; place-items: center; background: var(--ig-bb); font-size: 12px; font-weight: 600; }
.yt-cms { display: grid; gap: 12px; align-content: start; }
.yt-cms__t { font-size: 13px; font-weight: 600; }
.yt-cms__t b { color: var(--ig-mu); font-weight: 500; }
.yt-cm { display: flex; gap: 10px; }
.yt-cm .yt-av { width: 24px; height: 24px; }
.yt-cm__b { display: grid; gap: 4px; min-width: 0; }
.yt-cm__h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.yt-cm__h b { font-size: 12px; }
.yt-cm__time { color: var(--ig-mu); font-size: 10px; }
.yt-cm__t { overflow-wrap: anywhere; }
.yt-cm__acts { display: flex; align-items: center; gap: 12px; color: var(--ig-mu); font-size: 11px; font-weight: 600; }
.yt-cm__acts .ig-i { width: 13px; height: 13px; }
.yt-cm--re { margin-left: 34px; }
.yt-cm--re .yt-cm__t { padding: 6px 10px; border-radius: 10px; background: var(--ig-bb); }
.ig-phone--s .yt-title { font-size: 12px; }
.ig-phone--s .yt-cms__t { font-size: 11px; }
.ig-phone--s .yt-play { width: 32px; height: 32px; }

/* ===================== Страница Direct ===================== */
:root{--dx-sage:rgb(140 190 110 / .62);--dx-terra:rgb(228 138 88 / .46);
 --dx-yt-scr:#0f0f0f;--dx-yt-tx:#f1f1f1;--dx-yt-mu:#aaaaaa;--dx-yt-bb:#272727;--dx-yt-black:#000000;--dx-yt-scrim:rgb(0 0 0 / .55);--dx-yt-on:#ffffff;--dx-yt-chip:rgb(0 0 0 / .8);
 --dx-move:cubic-bezier(.32,.72,0,1)}
:root[data-theme=dark]{--dx-sage:rgb(120 175 100 / .36);--dx-terra:rgb(215 120 78 / .3)}
.dx-main{overflow-x:clip}
.dx-note{font-size:14px;color:var(--muted);margin-top:12px}
@keyframes dx-fade{from{opacity:0}to{opacity:1}}

/* --- сегмент с переезжающей подложкой --- */
.dx-seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:999px;background:var(--panel);isolation:isolate;max-width:100%}
.dx-seg__thumb{position:absolute;top:4px;bottom:4px;left:0;width:var(--w,0px);border-radius:999px;background:var(--frame);transform:translateX(var(--x,0px));transition:transform 320ms var(--dx-move);z-index:-1}
.dx-seg button{position:relative;min-height:44px;padding:0 16px;border-radius:999px;font-size:14px;line-height:1.2;color:var(--muted);white-space:nowrap;text-align:center}
.dx-seg button::after{content:attr(data-t);display:block;height:0;overflow:hidden;visibility:hidden;font-weight:500}
.dx-seg button[aria-pressed=true]{color:var(--ink);font-weight:500}
.dx-seg button:hover:not([aria-pressed=true]){color:var(--ink)}
.dx-seg--sm button{padding:0 12px;font-size:13px}

/* --- круглая лаймовая кнопка --- */
.dx-play{width:48px;height:48px;flex:none;border-radius:50%;background:var(--lime);color:var(--color-ink);display:grid;place-items:center;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.dx-play:hover{background:var(--color-ink);color:var(--lime)}
.dx-play svg{width:18px;height:18px}
.dx-ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dx-ctl--solo{margin-top:20px}

/* --- S1 герой --- */
.dx-hero-grid{grid-template-columns:minmax(0,1fr) 312px;gap:56px;align-items:start}
.dx-hero .sub-hero-copy{background:var(--frame);border-radius:28px;padding:48px}
.dx-hero h1{font-size:clamp(56px,calc((100vw - 536px) / 6.1),88px)} /* «комментарии» ≈ 5,94 кегля не шире колонки на 901–1100 */
.dx-hero .sub-hero-lead{margin-top:28px;max-width:56ch}
.dx-fine{font-size:14px;color:var(--muted);margin-top:20px;max-width:46ch}
.dx-ph-col{position:relative;isolation:isolate;margin-top:-24px;display:grid;justify-items:center;gap:16px}
.dx-field{position:absolute;inset:-110px -190px -90px -190px;z-index:-1;pointer-events:none;background:radial-gradient(56% 46% at 50% 38%,var(--dx-sage),transparent 80%),radial-gradient(50% 40% at 60% 74%,var(--dx-terra),transparent 80%)}
.dx-hero{overflow-x:visible}
.ig-av--m{object-fit:cover;object-position:0% 50%}
.ig-ctx{display:flex;gap:10px;align-items:center;padding:8px;border-radius:12px;background:var(--ig-bb);align-self:stretch;font-size:12px;line-height:1.35;color:var(--ig-mu)}
.ig-ctx img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none}
.ig-ctx b{display:block;color:var(--ig-tx);font-weight:500;font-size:13px}
.dx-made{font-size:13px;color:var(--muted);text-align:center;max-width:300px;line-height:1.4}
.dx-ph{width:100%;display:flex;justify-content:center}
.dx-hero .dx-ctl{justify-content:center;flex-wrap:nowrap}
.dx-hero .dx-seg button{padding:0 10px}
/* вход блоков героя лестницей: 5 блоков, шаг 80 мс */
/* designkit-allow stagger-entry: вход секции сайта */
.js .dx-hero h1[data-in]{transition-delay:80ms}
/* designkit-allow stagger-entry: вход секции сайта */
.js .dx-hero .sub-hero-lead[data-in]{transition-delay:160ms}
/* designkit-allow stagger-entry: вход секции сайта */
.js .dx-hero .dx-cta[data-in]{transition-delay:240ms}
/* designkit-allow stagger-entry: вход секции сайта */
.js .dx-hero .dx-ph-col[data-in]{transition-delay:320ms}

/* --- S2 путь комментария --- */
.dx-path-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap}
.dx-path-head .sub-heading{margin:0;max-width:640px}
.dx-stair{display:flex;gap:40px;align-items:flex-start}
.dx-st{margin:0;min-width:0}
:where(.dx-st){transition:opacity var(--fast) var(--ease)}
.dx-st1{width:320px}.dx-st2{width:360px;margin-top:64px}.dx-st3{width:380px;margin-top:128px}
.dx-st figcaption{display:grid;gap:4px;margin-bottom:16px;max-width:34ch}
.dx-st figcaption b{font-size:19px;font-weight:500;letter-spacing:-.025em}
.dx-st figcaption span{font-size:14px;color:var(--muted);line-height:1.45}
.dx-st.is-dim{opacity:.35}
.dx-surf{width:100%;border-radius:28px;height:auto}
.dx-surf--1{height:320px}.dx-surf--2{height:176px}.dx-surf--3{height:auto}
.dx-surf--2 .ig-drawer,.dx-surf--3 .ig-drawer{margin-top:0;border-radius:0}
.dx-surf--1 .ig-dim{height:84px}
.dx-surf--3 .ig-thread{flex:none}
.dx-surf .ig-cms{padding-top:14px}
.dx-surf--2 .ig-cms{padding:16px 14px}
.dx-surf .ig-top{padding-top:14px}
.dx-miss{font-size:14px;color:var(--muted);margin-top:14px}

/* --- S3 правило --- */
.dx-rule-head{max-width:640px}
.dx-win{padding:8px}
.dx-shot{border-radius:20px;overflow:hidden}
.dx-shot picture{display:block}
.dx-shot img{display:block;width:100%;height:auto}
.dx-shot .th-d{display:none}
:root[data-theme=dark] .dx-shot .th-d{display:block}
:root[data-theme=dark] .dx-shot .th-l{display:none}
.dx-under{display:flex;gap:8px 24px;align-items:center;flex-wrap:wrap;margin-top:24px;font-size:14px;color:var(--muted)}

/* --- S4 триггеры --- */
.dx-more{grid-template-columns:4fr 8fr;gap:40px}
.dx-more .stack-heading h2{font-size:56px}
.dx-nb{white-space:nowrap}
.dx-trig{display:grid;grid-template-columns:minmax(0,1fr) 288px;column-gap:24px;align-items:start}
.dx-trig li{display:contents}
.dx-tab{grid-column:1;display:flex;align-items:center;min-height:64px;padding:12px 16px 12px 20px;border-radius:32px;font-size:22px;line-height:1.15;letter-spacing:-.03em;color:var(--muted);text-align:left;text-wrap:balance;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.dx-tab:hover{color:var(--ink)}
.dx-tab[aria-expanded=true]{background:var(--frame);color:var(--ink);font-weight:500}
.dx-ex{grid-column:2;grid-row:1 / span 8;position:sticky;top:112px;opacity:0;visibility:hidden;transition:opacity 160ms var(--ease),visibility 0s 160ms}
.dx-ex.is-sel{opacity:1;visibility:visible;transition-delay:0s}
.dx-ex__card.ig-screen{height:auto;padding:16px;gap:12px;border-radius:24px;justify-content:flex-start;overflow:hidden}
.dx-ex__small{font-size:12px;color:var(--ig-mu)}
.dx-story{width:120px;aspect-ratio:9 / 16;object-fit:cover;border-radius:14px;align-self:center;height:auto}
.dx-link{display:flex;align-items:center;gap:8px;padding:14px;border-radius:14px;background:var(--ig-bb);color:var(--ig-blue-tx);font-weight:500;overflow-wrap:anywhere}
.dx-link .ig-i{flex:none}
.dx-chip2{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--panel);font-size:14px;line-height:1.35}
.dx-chip2--ig{align-self:flex-start;background:var(--ig-bb);color:var(--ig-tx)}

/* --- S5 вопросы и куда уходят ответы --- */
.dx-flow-grid{display:grid;grid-template-columns:360px minmax(0,1fr);grid-template-areas:"thread head" "thread stack";column-gap:64px;align-items:start}
.dx-flow-head{grid-area:head}.dx-flow-thread{grid-area:thread}.dx-flow-stack{grid-area:stack}
.dx-flow-head h2{max-width:11em}
.dx-flow-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.dx-flow-thread{position:sticky;top:96px}
.dx-flow-thread .ig-screen{width:100%;height:520px;border-radius:28px}
.dx-flow-thread .ig-thread{padding:14px 14px 8px}
.dx-stack{display:grid;gap:10px}
.dx-blk{background:var(--frame);border-radius:20px;padding:28px}
.dx-cap{font-size:14px;color:var(--muted);margin-bottom:20px;max-width:48ch;line-height:1.45}
.dx-who{display:flex;align-items:center;gap:12px}
.dx-who b{display:block;font-size:17px;font-weight:500;line-height:1.3}
.dx-who small{display:block;color:var(--muted);line-height:1.3}
.dx-ava{width:44px;height:44px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-weight:500;flex:none}
.dx-fields{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 20px;align-items:center;margin-top:20px}
.dx-flabel{font-size:14px;color:var(--muted)}
.dx-fval{min-height:48px;display:flex;align-items:center;padding:0 8px;border-radius:14px;background:var(--canvas)}
.dx-fval__v{padding:0 4px;color:var(--ink);font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.dx-sheet-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dx-sheet-bar b{font-size:17px}
.dx-tbl{display:grid;gap:4px}
.dx-tr{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.7fr) minmax(0,.85fr);gap:12px;padding:12px 14px;border-radius:12px;background:var(--canvas);font-size:14px;line-height:1.3}
:where(.dx-tr){transition:opacity var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.dx-tr span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-tr--h{background:none;color:var(--muted);font-size:13px;padding-block:4px}
.dx-tbl[data-op=find] .dx-tr:not(.dx-tr--h):not(.dx-tr--ana){opacity:.45}
.dx-tbl[data-op=update] .dx-tr--ana{background:var(--panel);font-weight:500}
.dx-also{font-size:14px;color:var(--muted);margin-top:20px;max-width:52ch;line-height:1.5}

/* --- S6 YouTube --- */
.dx-yt-plate{background:var(--frame);border-radius:28px;padding:56px;display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.dx-yt-copy{margin:0}
.dx-yt-copy h2{font-size:48px}
.dx-yt-frame.ig-screen{--ig-scr:var(--dx-yt-scr);--ig-tx:var(--dx-yt-tx);--ig-mu:var(--dx-yt-mu);--ig-bb:var(--dx-yt-bb);height:auto;border-radius:20px}
.dx-yt-frame .yt-app{height:auto}
.dx-yt-frame .yt-title{font-size:16px}
.dx-yt-frame .yt-scroll{overflow:visible}
.dx-yt-frame .yt-ch__t b,.dx-yt-frame .yt-cm__h b{font-size:13px}

/* --- S7 кабинет --- */
.dx-cab-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-bottom:56px}
.dx-cab-head .dx-seg-scroll{align-self:end}
.dx-cab-head .dx-seg{grid-auto-columns:auto}
.dx-cab-head .dx-seg button{padding:0 14px;font-size:14px}
.dx-cab-head .dx-seg__thumb{transition:transform 320ms var(--dx-move),width 320ms var(--dx-move)}
@media(min-width:701px){.dx-cab .dx-shot{aspect-ratio:1085 / 940}}
.dx-cab-head .sub-heading{margin:0}
.dx-seg-scroll{justify-self:end;max-width:100%}
.dx-cab-line{font-size:19px;margin-top:24px;max-width:60ch;line-height:1.5}
.dx-cab-ai{font-size:14px;color:var(--muted);margin-top:8px}

/* --- S8 тарифы --- */
.dx-plans-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:56px}
.dx-plans-head .sub-heading{margin:0}
.dx-plans-grid{display:grid;grid-template-columns:5fr 7fr;gap:16px;align-items:stretch}
.dx-obj{background:var(--frame);border-radius:28px;padding:40px;display:grid;gap:8px;align-content:start}
.dx-obj__top{display:flex;align-items:center;gap:12px;min-height:34px}
.dx-obj__name{font-size:22px;font-weight:500;letter-spacing:-.025em}
.dx-obj__num{display:flex;align-items:flex-end;gap:10px;margin:12px 0 8px;min-height:132px}
.dx-obj__l{font-size:19px;color:var(--muted)}
.dx-obj__btn{margin-top:20px;justify-self:start}
.dx-obj__note{font-size:14px;color:var(--muted);max-width:38ch;line-height:1.5;margin-top:4px}
.is-off{visibility:hidden}
.dx-pill{display:inline-flex;align-items:center;margin-left:10px;padding:2px 10px;border-radius:999px;background:var(--lime);color:var(--color-ink);font-size:12px;font-weight:500;line-height:1.55;letter-spacing:0;vertical-align:middle}
.dx-per{font-size:28px;font-weight:500;color:var(--muted);letter-spacing:-.02em;line-height:1.1;padding-bottom:18px}
/* пропорциональные цифры: ширина разряда меряется по самой цифре, табличная «1» давала зазор «1 4» */
.dx-roll{display:inline-flex;align-items:flex-start;font-variant-numeric:proportional-nums;font-weight:500;letter-spacing:-.055em;line-height:1.1;white-space:nowrap}
.dx-eur{font-size:.24em;color:var(--muted);letter-spacing:0;margin:.5em .25em 0 0;line-height:1}
.dx-d{display:inline-block;height:1.1em;overflow:hidden}
.dx-strip{display:block;transform:translateY(calc(var(--i,0) * -1.1em));transition:transform 420ms var(--ease)}
.dx-strip>span{display:block;width:max-content;height:1.1em}
.dx-roll--obj{font-size:120px}
.dx-roll--row{font-size:30px}
.dx-roll--body{font-size:72px}
.dx-roll--row .dx-eur{font-size:15px;margin-top:.55em}
.dx-roll--body .dx-eur{font-size:20px;margin-top:.4em}
.dx-roll--obj .dx-eur{font-size:28px;margin-top:.12em}
.dx-plan-list{display:grid;gap:8px;grid-auto-rows:1fr}
.dx-pli{border-radius:28px;background:var(--frame);transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.dx-pli.is-sel{background:var(--ink);color:var(--on-ink)}
.dx-plan{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;height:100%;min-height:88px;padding:0 32px;border-radius:28px;text-align:left}
.dx-pli:not(.is-sel) .dx-plan:hover{background:var(--panel)}
.dx-pli.is-sel .dx-plan:hover{background:color-mix(in srgb,var(--ink) 86%,var(--on-ink))}
.dx-plan__t{display:grid;gap:2px;min-width:0}
.dx-plan__n{font-size:22px;font-weight:500;letter-spacing:-.025em;line-height:1.2;display:flex;align-items:center}
.dx-plan__c{font-size:14px;color:var(--muted);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-pli.is-sel .dx-plan__c,.dx-pli.is-sel .dx-per{color:color-mix(in srgb,var(--on-ink) 72%,transparent)}
.dx-pli.is-sel .dx-eur{color:color-mix(in srgb,var(--on-ink) 72%,transparent)}
.dx-plan__p{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;flex:none;min-width:96px}
.dx-plan__p .dx-per{font-size:15px;padding-bottom:7px}
.dx-plan-body{display:none}

/* --- S9 финал --- */
.dx-end{padding-bottom:144px}
.dx-final{position:relative;isolation:isolate;overflow:hidden;background:var(--frame);border-radius:28px;padding:56px;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:center}
.dx-final .dx-field{inset:0;background:radial-gradient(46% 74% at 76% 50%,var(--dx-sage),transparent 72%),radial-gradient(36% 56% at 96% 88%,var(--dx-terra),transparent 72%)}
.dx-final-copy h2{font-size:64px;font-weight:500;line-height:1;letter-spacing:-.055em}
.dx-final-lead{font-size:19px;color:var(--muted);line-height:1.55;margin-top:26px;max-width:46ch}
.dx-docs{display:flex;gap:4px 24px;flex-wrap:wrap;margin-top:20px}
.dx-docs .text-link{font-size:14px;color:var(--muted)}
.dx-docs .text-link:hover{color:var(--ink)}
.dx-final-ph .ig-screen{height:auto;border-radius:28px}
.dx-final-ph .ig-thread{padding:16px 14px}
.dx-final-ph .ig-thread>:first-child{margin-top:0}

/* --- адаптив --- */
@media(max-width:1200px){
  .dx-more{grid-template-columns:1fr;gap:32px}
  .dx-more .stack-heading{position:static}
  .dx-trig{display:block}
  .dx-trig li{display:block}
  .dx-tab{min-height:56px;font-size:22px;width:100%}
  .dx-ex{position:static;display:none;opacity:1;visibility:visible;padding:8px 0 16px}
  .dx-ex.is-sel{display:block;animation:dx-fade 240ms var(--ease)}
}
@media(max-width:900px){
  .dx-hero-grid{grid-template-columns:1fr;gap:28px}
  .dx-hero h1{font-size:64px}
  .dx-hero .sub-hero-copy{padding:36px}
  .dx-ph-col{margin-top:0}
  .dx-stair{flex-direction:column;gap:40px}
  .dx-st1,.dx-st2,.dx-st3{width:100%;max-width:480px;margin-top:0}
  .dx-flow-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "thread" "stack";row-gap:28px}
  .dx-flow-head{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:0}
  .dx-plan-list{grid-auto-rows:auto}
  .dx-plan{height:auto}
  .dx-flow-top{display:contents}
  .dx-flow-top h2{order:1;text-wrap:balance}
  .dx-flow-head>p{order:2}
  .dx-flow-top .dx-play{order:3;margin-top:20px}
  .dx-flow-thread{max-width:420px;position:static}
  .dx-yt-plate{grid-template-columns:1fr;gap:32px;padding:36px}
  .dx-cab-head{grid-template-columns:1fr;gap:24px;align-items:start}
  .dx-seg-scroll{justify-self:stretch;overflow-x:auto;scrollbar-width:none;padding:8px 16px 8px 8px;margin:-8px -16px -8px -8px}
  .dx-seg-scroll .dx-seg,.dx-cab-head .dx-seg{width:max-content;min-width:0;grid-auto-columns:140px}
  .dx-cab-head .dx-seg button{padding:0 6px}
  .dx-cab-head .dx-seg{grid-auto-columns:minmax(140px,auto);max-width:none}
  .dx-plans-head{margin-bottom:28px;gap:16px}
  .dx-plans-head .sub-heading p{margin-top:16px}
  .dx-plans-grid{display:block}
  .dx-obj{display:none}
  .dx-plan{min-height:88px;padding:0 20px}
  .dx-plan__c{white-space:normal;overflow:visible;text-overflow:clip}
  .dx-plan__n{font-size:20px}
  .dx-pli.is-sel .dx-plan-body{display:grid;gap:8px;padding:4px 20px 24px;animation:dx-fade 360ms var(--ease)}
  .dx-body-num{display:flex;align-items:flex-end;gap:8px;margin-bottom:4px}
  .dx-body-num .dx-per{font-size:20px;padding-bottom:12px}
  .dx-plan-body>p{font-size:14px;color:color-mix(in srgb,var(--on-ink) 72%,transparent)}
  .dx-body-btn{background:var(--on-ink);color:var(--ink);width:100%;min-height:48px;margin-top:8px}
  .dx-body-btn:hover{background:var(--lime);color:var(--color-ink)}
  .dx-body-btn:focus-visible{outline-color:var(--on-ink)}
  .dx-plan-body>p.dx-body-note{font-size:13px}
  .dx-pli:not(.is-sel) .dx-plan-body{display:none}
  .dx-plan__p{min-width:0}
  .dx-pli.is-sel .dx-plan__p{display:none}
  .dx-plan{padding:0 16px}
  .dx-roll--row{font-size:22px}
  .dx-plan__p .dx-per{font-size:13px;padding-bottom:5px}
  .dx-plan-body>p.is-off,.dx-body-y.is-off{display:none}
  .dx-plan-body>p:first-of-type{display:none}
  .dx-final{grid-template-columns:1fr;gap:32px;padding:32px 24px}
  .dx-final-ph{order:-1;max-width:420px}
  .dx-final .dx-field{background:radial-gradient(70% 34% at 50% 16%,var(--dx-sage),transparent 78%),radial-gradient(50% 28% at 78% 24%,var(--dx-terra),transparent 78%)}
  .dx-final-copy h2{font-size:44px}
}
@media(max-width:700px){
  .dx-hero h1{font-size:48px}
  .dx-hero .sub-hero-copy{padding:0;background:none;border-radius:0}
  .dx-hero .sub-hero-lead{font-size:17px;margin-top:20px}
  .dx-ph-col{justify-items:stretch}
  .dx-ph{display:block}
  .dx-hero .ig-phone{--ig-w:100%;--ig-h:520px;width:100%;height:520px;padding:0;border-radius:28px}
  .dx-hero .ig-screen{border-radius:28px}
  .dx-ph{min-height:520px}
  .dx-hero .dx-ctl{justify-content:space-between}
  .dx-field{inset:-80px -28px -48px -28px;background:radial-gradient(75% 46% at 50% 36%,var(--dx-sage),transparent 80%),radial-gradient(60% 36% at 66% 70%,var(--dx-terra),transparent 80%)}
  .dx-hero .dx-ph{min-height:520px}
  .dx-made{max-width:none;text-align:left}
  .dx-tab{font-size:20px}
  .dx-flow-thread .ig-screen{height:500px}
  .dx-cab-line{font-size:17px}
  .dx-yt-copy h2{font-size:38px}
  .dx-yt-plate{padding:28px 20px}
  .dx-end{padding-bottom:104px}
  .dx-docs{margin-top:12px}
  .dx-final .sub-hero-actions{flex-direction:column;align-items:stretch}
  .dx-final .sub-hero-actions .text-link{justify-content:center}
}
@media(max-width:500px){
  .dx-blk{padding:20px 16px}
  .dx-tr{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) 64px;gap:8px;padding-inline:10px;font-size:12px}
  .dx-tr span{overflow:visible;text-overflow:clip}
  .dx-final-copy h2{font-size:38px}
  .dx-roll--body{font-size:64px}
  .dx-plan{padding:0 16px;gap:10px}
  .dx-plan__p{min-width:72px}
}
@media(prefers-reduced-motion:reduce){
  .dx-seg__thumb,.dx-strip,.dx-tr,.dx-st,.dx-ex{transition:none}
  .dx-play{display:none}
  .dx-ex.is-sel,.dx-pli.is-sel .dx-plan-body{animation:dx-fade 120ms linear}
}
.ig-in span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dx-fval__v{display:inline-block}
/* морф S5: шрифт, поля и размер берутся у поля email, старт масштабом в пузырь */
.dx-fly{position:absolute;left:0;top:0;z-index:40;pointer-events:none;margin:0;white-space:nowrap;border-radius:999px;transform-origin:0 0;background:var(--ig-blue);color:var(--ig-on-blue)}
/* смена экрана героя: два слоя во весь экран, строка статуса поверх, экран телефона их обрезает */
.ig-layer{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--ig-scr)}
.dx-ph{min-height:var(--ig-h)}