/* Разработка под ключ — свой стиль, как palantir.com/mission-manager (21.10.2026).
   Графитовая страница, сетка 12 колонок с промежутком 30px; заголовок печатается по буквам (~28 мс на букву), линия прочерчивается,
   описание проявляется, фото раскрывается сверху вниз от линии; плитка-чертёж в изометрии; вертикальные вкладки; утверждение в кавычках.
   Без JS и в режиме «меньше движения» всё видно сразу: скрытые состояния — только под классами .dv-on / .dv-intro (их ставит скрипт). */
.pp2-dev{background:#1E2124;--dv-bg:#1E2124;--dv-tx:#EDEDED;--dv-mut:#9A9CA3;--dv-line:rgba(237,237,237,.17);--dv-tile:#6670A6;--dv-ac:#9881F3;--dv-gap:30px;--dv-ease:cubic-bezier(.5,1,.89,1)}
.dv{background:var(--dv-bg);color:var(--dv-tx)}
.dv-hero,.dv-sec,.dv-quote{background:var(--dv-bg);color:var(--dv-tx);padding-left:var(--px);padding-right:var(--px)}
.dv-hero__top,.dv-sec__h,.dv-eco,.dv-ben,.dv-q{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--dv-gap);align-items:start}

/* ---------- первый экран: заголовок слева, описание справа, ниже — фото ступеней ---------- */
.dv-hero{padding-top:clamp(56px,7.6vw,110px)}
.dv-hero__t{grid-column:1/9;margin:0;font-weight:400;font-size:clamp(44px,6.5vw,104px);line-height:1.12;letter-spacing:-.02em;color:#fff}
.dv-hero__d{grid-column:9/13;padding-top:clamp(4px,.75vw,12px)}
.dv-lead{margin:0;font-size:clamp(23px,2.36vw,34px);line-height:1.18;letter-spacing:-.012em;color:#fff;text-wrap:balance}
.dv-small{margin:22px 0 0;max-width:46ch;text-wrap:pretty;font-size:16px;line-height:1.45;color:var(--dv-tx)}
.dv-hero__fig{position:relative;margin-top:clamp(44px,5.6vw,80px)}
.dv-hero__m{background:#131517;overflow:hidden}
.dv-hero__m img{display:block;width:100%;height:auto;aspect-ratio:1672/589;object-fit:cover}
/* линия над фото: прочерчивается слева направо, по ней бежит блик — как полоса загрузки у Mission Manager */
.dv-hero__line{position:absolute;left:0;right:0;top:0;height:1px;overflow:hidden;z-index:2;pointer-events:none;opacity:0}
.dv-hero__line i{position:absolute;inset:0;background:rgba(237,237,237,.34);transform-origin:0 50%}
.dv-hero__line b{position:absolute;top:0;bottom:0;left:-22%;width:22%;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 72%,rgba(255,255,255,0))}

/* ---------- разделы: линия, заголовок 50px; справа — описание 34px (как «Tailored to Your Program») ---------- */
.dv-sec{padding-top:clamp(72px,7vw,100px)}
.dv-rule{grid-column:1/-1;height:1px;overflow:hidden;margin-bottom:clamp(34px,3.5vw,50px)}
.dv-rule i{display:block;height:1px;background:var(--dv-tx)}
.dv-sec__h h2{grid-column:1/7;margin:0;font-weight:400;font-size:clamp(32px,3.47vw,50px);line-height:1.04;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.dv-sec__d{grid-column:7/13}
.dv-sec__d p{margin:0;max-width:22em;text-wrap:pretty;font-size:clamp(23px,2.36vw,34px);line-height:1.18;letter-spacing:-.012em;color:#fff}
.dv-sec__d p+p{margin-top:1.18em}

/* плитка-чертёж и текст рядом (как «The Ecosystem»): плитка — колонки 2–6, текст — 8–12 */
.dv-eco{margin-top:clamp(48px,6.9vw,100px)}
.dv-tile{grid-column:2/7;margin:0;background:var(--dv-tile);aspect-ratio:8/5;overflow:hidden}
.dv-eco__t{grid-column:8/13}
/* расшифровка чертежа — только там, где подписи на нём мелкие (планшет, телефон) */
.dv-leg{display:none;margin:14px 0 0;font-size:14px;line-height:1.7;color:var(--dv-mut)}
.dv-leg span{color:var(--dv-tx)}
.dv-leg__z{display:inline-block;width:18px;height:0;margin:0 8px 0 0;vertical-align:middle;border-top:1.5px solid var(--dv-tx)}
.dv-leg__z--d{border-top-style:dashed}
.dv-eco--rev .dv-eco__t{grid-column:1/6;grid-row:1}
.dv-eco--rev .dv-fig{grid-column:7/13;grid-row:1;margin:0}

/* чертёж: белые линии на сиреневой плитке, грани залиты — заднее закрыто передним */
.dv-bp{display:block;width:100%;height:100%}
.dv-bp path{fill:none;stroke:#F3F5FF;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.dv-bp path.th{stroke-opacity:.55;stroke-width:1.2}
.dv-bp path.pr{stroke-opacity:.95}
.dv-bp path.dash{stroke-dasharray:5 5;stroke-opacity:.9}
.dv-bp path.flow{stroke-dasharray:1.6 7;stroke-width:1.9}
.dv-bp path.ar{stroke-width:1.5}
.dv-bp path.f{stroke:none}
.dv-bp path.ft{fill:#6B75AB}
.dv-bp path.fr{fill:#5F699F}
.dv-bp path.fl{fill:#58619A}
.dv-bp path.ac{fill:#C9BDFF}
.dv-bp path.tag{fill:#A895FF}
.dv-bp path.ck{stroke:#fff;stroke-width:1.9}
.dv-bp text{fill:#F3F5FF;font-weight:500;letter-spacing:.07em}
.dv-bp text.zl{letter-spacing:.16em;fill-opacity:.88}

/* фото */
.dv-fig{margin:clamp(48px,6.9vw,100px) 0 0}
.dv-fig__m{position:relative;overflow:hidden;background:#15171A}
.dv-fig__m img{display:block;width:100%;height:auto}
/* шапка над светлым фото остаётся тёмной, как у Mission Manager: она смотрит, что под ней (elementsFromPoint), — фото в этот подсчёт не попадает, попадает тёмная рамка */
.dv-hero__m img,.dv-fig__m img{pointer-events:none}
.dv-fig--wide .dv-fig__m img{aspect-ratio:2/1;object-fit:cover;object-position:50% 38%}
.dv-fig--cine .dv-fig__m img{aspect-ratio:2.35/1;object-fit:cover;object-position:50% 56%}
.dv-demo .dv-fig{margin-top:0}
.dv-cap{margin-top:14px;font-size:16px;line-height:1.45;color:var(--dv-mut)}
.dv-cap::before{content:"↳ ";content:"↳ " / "";color:var(--dv-mut)}

/* ---------- вкладки «Коротко о главном» (как «The Benefits») ---------- */
.dv-ben{margin-top:clamp(34px,3.5vw,50px)}
.dv-tabs{grid-column:1/4;display:flex;flex-direction:column;position:sticky;top:calc(var(--hh) + 34px)}
.dv-tab{position:relative;display:block;padding:20px 28px 20px 0;font-size:18px;line-height:25px;color:var(--dv-mut);overflow:hidden;transition:color .25s ease-in-out}
.dv-tab sup{position:relative;top:-.55em;margin-left:4px;font-size:12px;line-height:0;vertical-align:baseline}
.dv-tab::before,.dv-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--dv-line)}
.dv-tab::after{background:#fff;transform:translateX(-101%);transition:transform .25s ease-in-out}
.dv-tab.on{color:#fff}
.dv-tab.on::after{transform:none}
@media (hover:hover){.dv-tab:hover{color:#fff}.dv-tab:hover::after{transform:none}}
.dv-tab.out::after{transform:translateX(101%)}
.dv-tab.rs::after{transition:none}
.dv-tab__dot{position:absolute;right:4px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;opacity:0;transition:opacity .25s ease-in-out}
.dv-tab.on .dv-tab__dot{opacity:1}
.dv-panels{grid-column:7/13}
.dv-panel{padding-bottom:64px;scroll-margin-top:110px}
.dv-panel+.dv-panel{padding-top:44px;border-top:1px solid var(--dv-line)}
.dv-panel__k{margin:0 0 8px;font-size:10px;line-height:16px;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.dv-panel__lede{margin:0;font-size:18px;line-height:25px;color:#fff}
.dv-panel__l{list-style:none;margin:26px 0 0 28px;padding:0}
.dv-panel__l li{position:relative;padding-bottom:18px;font-size:16px;line-height:1.43;color:var(--dv-mut)}
.dv-panel__l li::before{content:"↳";content:"↳" / "";position:absolute;left:-21px;top:0}
.dv-panel__l b{font-weight:600}
.dv-panel__ui{margin:18px 0 0;border:1px solid rgba(237,237,237,.12);background:#111214;overflow:hidden}
.dv-panel__ui img{display:block;width:100%;height:auto}
/* со скриптом — одна панель на месте всех: высота блока по самой высокой, переключение без сдвига страницы */
.dv-tabs-on .dv-panels{display:grid}
.dv-tabs-on .dv-panel{grid-area:1/1;padding:0;border:0;opacity:0;visibility:hidden;transition:opacity .25s ease-in-out,visibility 0s linear .25s}
.dv-tabs-on .dv-panel.on{opacity:1;visibility:visible;transition:opacity .25s ease-in-out}
.dv-panel:focus-visible{outline:2px solid #fff;outline-offset:8px}

/* ---------- утверждение в кавычках (как цитата у Mission Manager, без подписи) ---------- */
.dv-quote{padding-top:clamp(72px,7vw,100px);padding-bottom:clamp(96px,10vw,150px)}
.dv-quote>.dv-rule{margin:0}
.dv-q{margin-top:clamp(80px,11vw,160px)}
.dv-q__m{grid-column:3;width:18px;height:16px;margin-top:.55em;fill:#fff}
.dv-q__m--r{grid-column:10;justify-self:end;transform:rotate(180deg)}
.dv-q__t{grid-column:4/10;grid-row:1;margin:0;text-align:center;font-size:clamp(25px,2.36vw,34px);line-height:1.2;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.dv-q__go{margin:30px 0 0;text-align:center;font-size:16px;line-height:23px}
.dv-q__go a{color:var(--dv-mut);transition:color .25s ease-in-out}
.dv-q__go a:hover{color:#fff}

/* ---------- общие «Вопросы», призыв, следующий продукт — в тёмной гамме страницы ---------- */
.pp2-dev .pp-faq{background:linear-gradient(var(--dv-line),var(--dv-line)) var(--px) 0/calc(100% - 2 * var(--px)) 1px no-repeat,var(--dv-bg);color:var(--dv-tx)}
.pp2-dev .pp-faq .lbl{color:var(--dv-mut)}
.pp2-dev .pp-faq h2,.pp2-dev .pp-faq summary{color:#fff}
.pp2-dev .pp-faq summary::after{color:#fff}
.pp2-dev .pp-faq details,.pp2-dev .pp-faq details:last-child{border-color:var(--dv-line)}
.pp2-dev .pp-faq details p{color:#B9BBC1}
.pp2-dev .pp-faq .faq__more{color:var(--dv-mut)}
.pp2-dev .pp-faq .faq__more a,.pp2-dev .pp-faq .faq__more button{color:#fff}
.pp2-dev .pp-cta,.pp2-dev .pp-next{background:var(--dv-bg)}
.pp2-dev .pp-cta{box-shadow:inset 0 1px 0 var(--dv-line)}
.pp2-dev .pp-next{border-top-color:var(--dv-line)}

/* ---------- анимации (только со скриптом) ----------
   Всё, что играет при загрузке и при появлении, — CSS-анимации с задержкой и animation-fill-mode:both:
   переход (transition) по добавленному классу Chrome пропускает, если класс лёг до первой отрисовки. Переходы — только для вкладок (по щелчку). */
@keyframes dvch{from{opacity:0}to{opacity:1}}
@keyframes dvrule{from{transform:translateX(-100%)}to{transform:none}}
@keyframes dvscale{from{transform:scaleX(0)}to{transform:none}}
@keyframes dvglint{from{transform:translateX(0)}to{transform:translateX(560%)}}
@keyframes dvup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes dvclip{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes dvout{from{opacity:1}to{opacity:0}}
@keyframes dvdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dvfade{from{opacity:0}to{opacity:1}}
@keyframes dvflow{to{stroke-dashoffset:-8.6}}
/* заголовки печатаются по буквам: ~28 мс на букву, начало — --t0 */
.dv-w{white-space:nowrap}
.dv-on [data-type] .dv-c{opacity:0}
.dv-on [data-type].in .dv-c{animation:dvch .12s linear calc(var(--k) * 28ms + var(--t0, 160ms)) both}
/* первый экран: линия прочерчивается, по ней бежит блик → заголовок печатается → описание проявляется → фото раскрывается вниз от линии */
.dv-intro .dv-hero__line{opacity:1}
.dv-intro .dv-hero__line i{animation:dvscale .9s var(--dv-ease) .05s both}
.dv-intro .dv-hero__line b{animation:dvglint 1.3s cubic-bezier(.4,0,.2,1) .1s both}
.dv-intro.done .dv-hero__line{animation:dvout .6s ease both}
.dv-intro.done .dv-hero__line b{display:none}
.dv-intro .dv-hero__m{clip-path:inset(0 0 100% 0)}
.dv-intro .dv-hero__m.in{animation:dvclip 1.25s cubic-bezier(.77,0,.18,1) both}
.dv-intro [data-dv0]{animation:dvup .5s var(--dv-ease) var(--dv-dd, 800ms) both}
/* линии разделов прочерчиваются слева направо */
.dv-on .dv-rule i{transform:translateX(-100%)}
.dv-on .in>.dv-rule i,.dv-on .dv-rule.in i{animation:dvrule .45s var(--dv-ease) both}
/* текст проявляется снизу (как description у Mission Manager: прозрачность и сдвиг на 10%) */
.dv-on [data-dv]{opacity:0;transform:translateY(18px)}
.dv-on [data-dv].in{animation:dvup .5s var(--dv-ease) var(--dl, 0ms) both}
/* фото раскрываются сверху вниз */
.dv-on [data-rv]{clip-path:inset(0 0 100% 0)}
.dv-on [data-rv].in{animation:dvclip 1.25s cubic-bezier(.77,0,.18,1) both}
/* чертёж: линии рисуются (класс .l — селектор по атрибуту pathLength в HTML не срабатывает), грани и подписи проявляются, по потоку идут штрихи */
.dv-on .dv-tile path.l{stroke-dasharray:1;stroke-dashoffset:1}
.dv-on .dv-tile.in path.l{animation:dvdraw 1s var(--dv-ease) calc(var(--d) * 1ms) both}
.dv-on .dv-tile path.f,.dv-on .dv-tile path.dash,.dv-on .dv-tile path.flow,.dv-on .dv-tile text{opacity:0}
.dv-on .dv-tile.in path.f,.dv-on .dv-tile.in path.dash,.dv-on .dv-tile.in text{animation:dvfade .7s ease calc(var(--d) * 1ms + 250ms) both}
.dv-on .dv-tile.in path.flow{animation:dvfade .7s ease calc(var(--d) * 1ms + 250ms) both,dvflow 1.3s linear infinite;animation-play-state:running,paused}
.dv-on .dv-tile.in.run path.flow{animation-play-state:running,running}

/* ---------- планшет и телефон ---------- */
@media (max-width:1100px){
  .dv-hero__top{row-gap:28px}
  .dv-hero__t{grid-column:1/-1;font-size:clamp(44px,8.2vw,90px)}
  .dv-hero__d{grid-column:5/13;padding-top:0}
  .dv-tile{grid-column:1/7;grid-row:1}
  .dv-eco__t{grid-column:8/13;grid-row:1}
  .dv-leg{display:block;grid-column:1/7;grid-row:2}
}
@media (max-width:900px){
  .dv-hero{padding-top:40px}
  .dv-hero__top,.dv-sec__h,.dv-eco,.dv-ben,.dv-q{grid-template-columns:minmax(0,1fr)}
  .dv-hero__t,.dv-hero__d,.dv-sec__h h2,.dv-sec__d,.dv-tile,.dv-eco__t,.dv-eco--rev .dv-eco__t,.dv-eco--rev .dv-fig,.dv-tabs,.dv-panels{grid-column:1/-1}
  .dv-hero__t{font-size:clamp(40px,11.4vw,80px);line-height:1.04}
  .dv-hero__d{max-width:560px}
  .dv-hero__m img{aspect-ratio:1.5/1;object-position:30% 50%}
  .dv-sec__d{margin-top:22px}
  .dv-eco{row-gap:30px}
  .dv-eco--rev .dv-fig{grid-row:auto}
  .dv-tile,.dv-eco__t,.dv-leg{grid-row:auto}
  .dv-leg{grid-column:1/-1;margin-top:-14px}
  .dv-small{margin-top:18px}
  .dv-fig--wide .dv-fig__m img{aspect-ratio:4/3;object-position:62% 50%}
  .dv-fig--cine .dv-fig__m img{aspect-ratio:4/3;object-position:50% 50%}
  .dv-tabs{position:static;margin-bottom:30px;border-top:1px solid var(--dv-line)}
  .dv-tab{padding:16px 28px 16px 0}
  .dv-q{grid-template-columns:18px minmax(0,1fr) 18px;column-gap:12px}
  .dv-q__m{grid-column:1;margin-top:.4em}
  .dv-q__m--r{grid-column:3}
  .dv-q__t{grid-column:2}
  .dv-bp text.st{font-size:13.5px}
  .dv-bp text.zl{font-size:13px}
  .dv-bp path{stroke-width:2}
  .dv-bp path.th{stroke-width:1.5}
}
@media (max-width:559px){
  .dv-tile{margin-left:calc(-1 * var(--px));margin-right:calc(-1 * var(--px))}
  .dv-lead,.dv-sec__d p{font-size:23px;line-height:1.22}
  .dv-panel__l{margin-left:24px}
}
@media (prefers-reduced-motion:reduce){
  .dv *,.dv *::before,.dv *::after{animation:none!important;transition:none!important}
}
/* общий призыв печатает заголовок только со скриптом сайта; когда анимации страницы выключены (нет скрипта, «меньше движения») — буквы сразу видны */
.pp2-dev:not(:has(main.dv-on)) .pp-cta__h i{opacity:1}