/* Scoped opt-in to the approved SEE MO media mats and result text roles.
   STADION's grid, chapter rhythm, interaction controllers and type are intact. */
.case-page[data-case="dirft"]{--see-mat:#ececec;--see-sheet-height:1000px}
html[toggle-theme="dark"] .case-page[data-case="dirft"]{--see-mat:#242424}
.case-page[data-case="dirft"] .case-reading-content .see-media-mat{box-sizing:border-box;padding:clamp(16px,3.2vw,48px);background:var(--see-mat)}
.case-page[data-case="dirft"] .case-reading-content .see-page-mat>img{width:min(100%,calc(var(--see-sheet-height) * var(--see-sheet-ratio)));height:auto;max-height:none;margin-inline:auto;border-radius:3px;box-shadow:0 8px 28px -12px #0003}
.case-page[data-case="dirft"] [data-case-feature="project"] .see-page-mat>img{width:100%}
.case-page[data-case="dirft"] #interface .case-interface-preview .see-media-mat{padding:0}
.case-page[data-case="dirft"] #interface .case-interface-preview .see-page-mat>img{width:100%;border-radius:0;box-shadow:none}
.case-page[data-case="dirft"] .case-address-story .see-media-mat{padding:0}
.case-page[data-case="dirft"] .case-address-story .see-page-mat>img{width:100%;border-radius:0;box-shadow:none}
.case-page[data-case="dirft"] [data-case-passport] .case-passport-icon{display:block;width:24px;height:24px;flex:none;color:var(--case-ink)}
.case-page[data-case="dirft"] [data-case-passport] .case-passport-icon svg{display:block}
.case-page[data-case="dirft"].case-reading-presentation .case-outcome-composition .case-results strong{font-size:var(--reading-h2);line-height:var(--reading-h2-line);font-weight:500;text-wrap:balance}
.case-page[data-case="dirft"] .case-competitor-logos figure{position:relative}
.case-page[data-case="dirft"] .case-competitor-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
.case-page[data-case="dirft"] .case-competitor-link::after{content:"";position:absolute;inset:-8px;border-radius:14px}
.case-page[data-case="dirft"] .case-competitor-link:focus-visible{outline:none}
.case-page[data-case="dirft"] .case-competitor-logos figure:has(a:focus-visible){outline:2px solid var(--color-accent);outline-offset:8px;border-radius:12px}
.case-page[data-case="dirft"] .case-competitor-logos figure:is(:hover,:has(a:focus-visible)) figcaption{color:var(--color-accent)}
.case-page[data-case="dirft"] [data-logo-frame] img{box-sizing:border-box;border:1px solid #d4d4d4}
html[toggle-theme="dark"] .case-page[data-case="dirft"] [data-logo-frame] img{border-color:#555}
/* One owner per interval: M05 already contributes the proof gap. The
   competitor module's default scene gap belongs after preceding evidence. */
.case-page[data-case="dirft"].case-reading-presentation #research>.case-architecture-opening+.case-blocks>.case-competitors:first-child{margin-top:0}
/* Here the first interface feature already owns a complete rail divider;
   do not add another scene gap on its parent, as well as on that feature. */
.case-page[data-case="dirft"].case-reading-presentation #interface>.case-interface-preview+.case-blocks{margin-top:0}
/* A project detail continues the selected-object story. */
.case-page[data-case="dirft"].case-reading-presentation #interface .case-feature[data-case-spacing="connected"]{margin-top:var(--case-sp-related);padding-top:0}
.case-page[data-case="dirft"] .case-context-preview .see-media-mat{padding:0}
.case-page[data-case="dirft"] .case-context-preview .see-page-mat>img{width:100%;box-shadow:none;border-radius:0}

.case-page[data-case="dirft"] [data-scene-copy]{display:grid;gap:24px}
.case-page[data-case="dirft"] [data-scene-copy].is-copy-synced{gap:0}
.case-page[data-case="dirft"] .is-copy-synced>[data-scene-copy-index]{grid-area:1/1;visibility:hidden;pointer-events:none}
.case-page[data-case="dirft"] .is-copy-synced>[data-scene-copy-index].is-current{visibility:visible;pointer-events:auto}

/* Passport copy belongs to its cell. Framer's max-content / pre defaults
   otherwise let long values escape narrow columns behind the page clip. */
.case-page[data-case="dirft"] [data-case-passport] :is(.framer-dzg091,.framer-1bbth3t,.framer-1hrz5yk){width:100%;min-width:0;max-width:100%}
.case-page[data-case="dirft"] [data-case-passport] p{white-space:normal;overflow-wrap:anywhere}
@media(max-width:809px){
  .case-page[data-case="dirft"] [data-case-passport]{height:auto;grid-template-rows:none;grid-auto-rows:auto}
  .case-page[data-case="dirft"] [data-case-passport]>.ssr-variant>div{display:flex;align-items:stretch;align-self:stretch;height:auto;min-height:120px}
  .case-page[data-case="dirft"] [data-case-passport] .framer-1asmrci{height:auto;min-height:120px}
}


/* v111: the application and learning sliders reuse SEE MO's approved screen frame
   (square mat, dark bezel, 4:3 viewport). Copied, not shared, so SEE MO stays untouched. */
.case-page[data-case="dirft"] .case-reading-content .case-address-story .see-device-mat{aspect-ratio:1;display:grid;place-items:center;padding:32px 50px 32px 24px;background:var(--see-mat)}
.case-page[data-case="dirft"] .case-reading-content .case-address-story .see-screen-mat{container-type:size;grid-template:minmax(0,1fr)/minmax(0,1fr);padding:24px 52px}
.case-page[data-case="dirft"] .see-screen-frame{display:block;box-sizing:border-box;min-width:0;min-height:0;width:min(100cqw,calc((100cqh - 12px) * var(--see-frame-ratio) + 12px));padding:6px;border-radius:10px;background:#202020;box-shadow:0 18px 24px -20px #0008}
.case-page[data-case="dirft"] .see-screen-glass{display:block;overflow:hidden;border-radius:5px;background:#fff}
.case-page[data-case="dirft"] .case-reading-content .see-screen-glass>img{display:block;width:100%;height:auto;max-height:none;min-height:0;object-fit:contain;border-radius:0;box-shadow:none}
.case-page[data-case="dirft"] .case-reading-content .see-screen-mat:is(:hover,:focus-visible) img{transform:none}
.case-page[data-case="dirft"] .case-address-story .case-slider-dots{right:4px}
@media(max-width:809.98px){
 .case-page[data-case="dirft"] .case-reading-content .case-address-story .see-screen-mat{padding:20px 52px}
}
/* Composed two-page scene already carries its own mat: one surface, no inner sheet. */
.case-page[data-case="dirft"] [data-case-feature="dirft-training-pair-v110"] .see-media-mat{padding:0}
.case-page[data-case="dirft"] [data-case-feature="dirft-training-pair-v110"] .see-page-mat>img{width:100%;border-radius:0;box-shadow:none}

/* v115: whole long page in a scrolling window (owner-approved module, DIRFT only).
   Mat as everywhere; the page sits in a 16:10 window, scrolls on its own on mouse hover
   (case-dirft-grid.js) and with the wheel/keyboard; the eye opens it in page view. */
.case-page[data-case="dirft"] .case-reading-content .case-scroll-page{position:relative;box-sizing:border-box;padding:clamp(16px,3.2vw,48px);background:var(--see-mat)}
.case-page[data-case="dirft"] .case-scroll-window{position:relative;aspect-ratio:16/10;overflow-y:auto;overflow-x:hidden;border-radius:10px;background:#fff;box-shadow:0 8px 28px -12px #0003;scrollbar-width:thin;scrollbar-color:#0003 transparent;outline:none}
.case-page[data-case="dirft"] .case-scroll-window:focus-visible{box-shadow:0 0 0 2px var(--color-accent),0 8px 28px -12px #0003}
.case-page[data-case="dirft"] .case-reading-content .case-scroll-window>img{display:block;width:100%;height:auto;max-height:none;border-radius:0;box-shadow:none;transform:none}
.case-page[data-case="dirft"] .case-scroll-hint{position:absolute;left:calc(clamp(16px,3.2vw,48px) + 16px);bottom:calc(clamp(16px,3.2vw,48px) + 16px);padding:8px 14px;border-radius:999px;background:#1a1a1acc;color:#fff;font:500 13px/1.2 var(--case-body,inherit);pointer-events:none;transition:opacity .3s}
.case-page[data-case="dirft"] .case-scroll-page.is-scrolled .case-scroll-hint{opacity:0}
.case-page[data-case="dirft"] .case-reading-content .case-scroll-zoom{background:none;box-shadow:none;border-radius:0;padding:0;overflow:visible}
.case-page[data-case="dirft"] .case-scroll-zoom{position:absolute;right:0;bottom:0;width:calc(clamp(16px,3.2vw,48px) + 72px);height:calc(clamp(16px,3.2vw,48px) + 72px)}
.case-page[data-case="dirft"].case-reading-presentation .case-scroll-zoom .case-zoom{right:calc(clamp(16px,3.2vw,48px) + 16px);bottom:calc(clamp(16px,3.2vw,48px) + 16px)}
.case-page[data-case="dirft"] .case-scroll-zoom:is(:hover,:focus-visible) .case-zoom{background:var(--color-accent)}
.case-page[data-case="dirft"] #interface .case-interface-preview .case-scroll-page.see-media-mat{padding:clamp(16px,3.2vw,48px)}
@media(max-width:809.98px){
 .case-page[data-case="dirft"] .case-scroll-window{overflow:hidden;aspect-ratio:3/4;pointer-events:none}
 .case-page[data-case="dirft"] .case-scroll-hint{display:none}
 .case-page[data-case="dirft"] .case-scroll-zoom{inset:0;width:auto;height:auto}
}
/* Page view in the lightbox: the page fits the width and scrolls vertically. */
.case-lightbox.is-page-view .case-lightbox-canvas{display:block}
.case-lightbox.is-page-view img{width:min(100%,1440px);max-width:100%;max-height:none;margin:0 auto}
.case-lightbox.is-page-view.is-actual-size img{width:auto;max-width:none}

/* v119 (09.11.2026): one warm field for every interface scene. The scroll scenes
   (application, learning) get the same field as the composed stages and a larger screen. */
.case-page[data-case="dirft"]{--dx-field:#eee7dc}
.case-page[data-case="dirft"] .case-reading-content .case-address-story .see-device-mat{background:var(--dx-field)}
.case-page[data-case="dirft"] .case-reading-content .case-address-story .see-screen-mat{padding:28px 40px 28px 28px}
@media(max-width:809.98px){
 .case-page[data-case="dirft"] .case-reading-content .case-address-story .see-screen-mat{padding:18px 32px 18px 18px}
}

/* v119e (09.11.2026): research blocks with one label system.
   Labels are small pills used in both blocks: «Задача» neutral, «Риск уйти» red, «Решение» orange text.
   Reading order: who → their question (largest body text) → context (muted) → product answer. */
.case-page[data-case="dirft"]{--dx-orange:#ff8a3d;--dx-mint:#2f8f7b;--dx-blue:#3a5f8c;--dx-risk-bg:color-mix(in srgb,#e5484d 11%,transparent);--dx-risk:#c9363b;--dx-line:color-mix(in srgb,var(--color-ink) 9%,transparent)}
html[toggle-theme="dark"] .case-page[data-case="dirft"]{--dx-risk:#ff8a8e}
.case-page[data-case="dirft"] .dx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.case-page[data-case="dirft"] .dx-risk-label{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font:500 12px/1 var(--font-body);letter-spacing:.01em;white-space:nowrap}
.case-page[data-case="dirft"] .dx-risk-label{background:var(--dx-risk-bg);color:var(--dx-risk)}

/* Segments — v119f minimal card. Hierarchy: name (small, coloured dot) → title → question (largest
   body text) → quiet notes → answer card. One accent per card: the dot; one surface: the answer. */
.case-page[data-case="dirft"] .dx-segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto);gap:0 16px}
.case-page[data-case="dirft"] .dx-segment{--tone:var(--dx-orange);grid-row:span 5;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);min-width:0;row-gap:0;padding:32px 28px 28px;border-radius:24px;background:var(--color-soft)}
/* v119i: segment colours from DIRFT (navy, mint); the learner stage is neutral grey. Orange stays the «Решение» accent only. */
.case-page[data-case="dirft"] .dx-tone--navy{--tone:#163868}
.case-page[data-case="dirft"] .dx-tone--mint{--tone:var(--dx-mint)}
.case-page[data-case="dirft"] .dx-tone--stage{--tone:#5f6673}
html[toggle-theme="dark"] .case-page[data-case="dirft"] .dx-tone--navy{--tone:#4f78b8}
html[toggle-theme="dark"] .case-page[data-case="dirft"] .dx-tone--mint{--tone:#3fa58c}
html[toggle-theme="dark"] .case-page[data-case="dirft"] .dx-tone--stage{--tone:#7d8594}
.case-page[data-case="dirft"] .dx-segment header{display:grid;justify-items:start;gap:20px;align-content:start}
.case-page[data-case="dirft"] .dx-tag{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;background:var(--tone);color:#fff;font:600 12px/1 var(--font-body)}
.case-page[data-case="dirft"].case-reading-presentation .dx-segment h4{margin:0;font:600 22px/26px var(--font-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--color-ink);text-wrap:balance}
.case-page[data-case="dirft"] .dx-q{align-self:stretch;margin:24px 0 0;padding:16px 18px;border-radius:14px;background:color-mix(in srgb,var(--tone) 9%,var(--color-soft))}
.case-page[data-case="dirft"].case-reading-presentation .dx-q p{margin:0;font:400 15px/22px var(--font-body);color:var(--color-ink);text-wrap:pretty}
.case-page[data-case="dirft"] .dx-notes{display:contents}
.case-page[data-case="dirft"] .dx-notes div{margin-top:24px;padding:0}
.case-page[data-case="dirft"] .dx-notes div+div{margin-top:18px}
.case-page[data-case="dirft"].case-reading-presentation .dx-notes dt{margin:0 0 4px;font:600 13px/18px var(--font-body);color:var(--color-ink)}
.case-page[data-case="dirft"].case-reading-presentation .dx-note--risk dt{color:var(--dx-risk)}
.case-page[data-case="dirft"].case-reading-presentation .dx-notes dd{margin:0;font:400 15px/22px var(--font-body);color:color-mix(in srgb,var(--color-ink) 78%,transparent);text-wrap:pretty}
.case-page[data-case="dirft"] .dx-answer{align-self:stretch;margin-top:28px;padding:18px 18px 20px;border-radius:16px;background:var(--color-paper)}
.case-page[data-case="dirft"].case-reading-presentation .dx-answer h5{margin:0 0 6px;font:600 13px/18px var(--font-body);color:var(--color-accent)}
.case-page[data-case="dirft"].case-reading-presentation .dx-answer p{margin:0;font:500 16px/23px var(--font-body);color:var(--color-ink);text-wrap:pretty}

/* Journey: one table card. Every cell starts on the same first line (26 px from the row top):
   the step badge, the title, the question, the arrow and the «Решение» label share it. */
.case-page[data-case="dirft"] .dx-journey{--dx-cols:200px minmax(0,1fr) 56px minmax(0,1.05fr);--dx-line1:26px;overflow:hidden;border:1px solid var(--reading-card-border);border-radius:20px}
.case-page[data-case="dirft"] .dx-journey ol{list-style:none;margin:0;padding:0}
.case-page[data-case="dirft"] .dx-row{display:grid;grid-template-columns:var(--dx-cols);column-gap:16px;align-items:start;padding:16px 16px 16px 24px}
.case-page[data-case="dirft"] .dx-journey-head{padding-top:14px;padding-bottom:14px;background:var(--color-soft);font:600 11px/16px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.case-page[data-case="dirft"] .dx-journey-head span:last-child{padding-left:20px}
.case-page[data-case="dirft"] .dx-step{border-top:1px solid var(--reading-card-border)}
.case-page[data-case="dirft"].case-reading-presentation .dx-step h4{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:12px;align-items:start;margin:0;padding-top:calc(var(--dx-line1) - 11px);font:600 19px/22px var(--font-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--color-ink)}
.case-page[data-case="dirft"] .dx-step-n{display:grid;place-items:center;width:26px;height:26px;margin-top:-2px;border-radius:50%;background:var(--color-accent);color:#fff;font:600 12px/1 var(--font-body);letter-spacing:0}
.case-page[data-case="dirft"] .dx-pain{padding-top:calc(var(--dx-line1) - 12px)}
.case-page[data-case="dirft"].case-reading-presentation .dx-quote{margin:0;font:500 16px/24px var(--font-body);color:var(--color-ink);text-wrap:pretty}
.case-page[data-case="dirft"].case-reading-presentation .dx-risk{display:grid;justify-items:start;gap:6px;margin:12px 0 0;font:400 14px/20px var(--font-body);color:var(--color-muted);text-wrap:pretty}
.case-page[data-case="dirft"] .dx-arrow{justify-self:center;display:grid;place-items:center;width:32px;height:32px;margin-top:calc(var(--dx-line1) - 16px);border-radius:50%;background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent)}
.case-page[data-case="dirft"] .dx-arrow svg{width:16px;height:16px}
.case-page[data-case="dirft"] .dx-fix{padding:calc(var(--dx-line1) - 8px) 20px 16px;border-radius:14px;background:var(--color-soft)}
.case-page[data-case="dirft"].case-reading-presentation .dx-fix h5{margin:0 0 6px;font:600 12px/16px var(--font-body);color:var(--color-accent)}
.case-page[data-case="dirft"].case-reading-presentation .dx-fix>p:not(.dx-metric){margin:0;font:500 15px/22px var(--font-body);color:var(--color-ink);text-wrap:pretty}
.case-page[data-case="dirft"].case-reading-presentation .dx-metric{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--dx-line);font:400 13px/18px var(--font-body);color:var(--color-muted)}
.case-page[data-case="dirft"] .dx-metric svg{flex:none;margin-top:2px;color:var(--color-accent)}
@media(max-width:1199.98px){
 .case-page[data-case="dirft"] .dx-segments{gap:0 12px}
 .case-page[data-case="dirft"] .dx-segment{padding:26px 20px 20px}
 .case-page[data-case="dirft"].case-reading-presentation .dx-segment h4{font-size:18px;line-height:22px}
 .case-page[data-case="dirft"].case-reading-presentation .dx-q p{font-size:14px;line-height:21px}
 .case-page[data-case="dirft"] .dx-journey{--dx-cols:176px minmax(0,1fr) 40px minmax(0,1.05fr)}
 .case-page[data-case="dirft"] .dx-row{column-gap:12px;padding-left:18px;padding-right:14px}
 .case-page[data-case="dirft"].case-reading-presentation .dx-step h4{font-size:17px;line-height:22px}
}
@media(max-width:999.98px){
 .case-page[data-case="dirft"] .dx-segments{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:12px}
 .case-page[data-case="dirft"] .dx-segment{grid-row:auto;display:flex;flex-direction:column}
}
@media(max-width:809.98px){
 .case-page[data-case="dirft"] .dx-journey-head{display:none}
 .case-page[data-case="dirft"] .dx-journey .dx-step:first-child{border-top:0}
 .case-page[data-case="dirft"] .dx-row{grid-template-columns:minmax(0,1fr);row-gap:14px;padding:18px 16px}
 .case-page[data-case="dirft"].case-reading-presentation .dx-step h4,.case-page[data-case="dirft"] .dx-pain{padding-top:0}
 .case-page[data-case="dirft"] .dx-arrow{justify-self:start;margin:0;transform:rotate(90deg)}
}
@media(max-width:479.98px){
 .case-page[data-case="dirft"] .dx-segment{padding:24px 18px 18px}
}

/* Stage windows: 'scroll' steps through the page section by section (case-dirft-grid.js),
   'crossfade' opens a second real state of the same screen. Both run only while visible. */
.case-page[data-case="dirft"] .dx-stage-window{position:relative;margin:0}
.case-page[data-case="dirft"] .dx-view{position:relative;overflow:hidden;background:#fafafa}
.case-page[data-case="dirft"] .dx-mode--scroll .dx-view{aspect-ratio:16/10}
.case-page[data-case="dirft"] .dx-mode--crossfade .dx-view{aspect-ratio:var(--dx-ratio)}
.case-page[data-case="dirft"] .case-reading-content .dx-view img{display:block;width:100%;max-width:none;height:auto;border-radius:0;box-shadow:none}
.case-page[data-case="dirft"] .dx-mode--scroll .dx-view img{will-change:transform;transition:transform 1.2s cubic-bezier(.65,0,.35,1)}
.case-page[data-case="dirft"] .dx-mode--crossfade .dx-frame--1{position:absolute;inset:0;opacity:0}
.case-page[data-case="dirft"] .dx-mode--crossfade.is-live .dx-frame--1{animation:dx-fade 9s ease-in-out infinite}
@keyframes dx-fade{0%,32%{opacity:0}42%,86%{opacity:1}96%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .case-page[data-case="dirft"] .dx-stage-window .dx-view img{animation:none!important;transition:none}
}

/* Chat scene: the same warm field and window as the other stages; message pieces animate in. */
.case-page[data-case="dirft"] .dx-chat{position:relative;margin:0}
.case-page[data-case="dirft"] .dx-chat-stage{padding:clamp(16px,6%,64px);border-radius:26px;background:var(--dx-field)}
.case-page[data-case="dirft"] .dx-window{overflow:hidden;border-radius:11px;background:#fff;box-shadow:0 26px 50px -26px #46321e66}
.case-page[data-case="dirft"] .dx-bar{display:flex;gap:6px;align-items:center;height:28px;padding-left:12px;border-bottom:1px solid #ece9e4}
.case-page[data-case="dirft"] .dx-bar i{width:7px;height:7px;border-radius:50%;background:#d9d4cc}
.case-page[data-case="dirft"] .dx-chat-page{--u:calc(100cqw / 1600);position:relative;container-type:inline-size}
.case-page[data-case="dirft"] .case-reading-content .dx-chat img{display:block;max-width:none;height:auto;border-radius:0;box-shadow:none;transform:none}
.case-page[data-case="dirft"] .case-reading-content .dx-chat .dx-chat-base{width:100%}
.case-page[data-case="dirft"] .dx-chat-feed{position:absolute;left:calc(505 * var(--u));top:calc(250 * var(--u));width:calc(923 * var(--u));height:calc(428 * var(--u));display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 14%);mask-image:linear-gradient(#0000,#000 14%)}
.case-page[data-case="dirft"] .dx-msg{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(calc(10 * var(--u)));transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1),opacity .4s,transform .55s cubic-bezier(.22,1,.36,1),margin-top .55s}
.case-page[data-case="dirft"] .dx-msg>div{min-height:0;overflow:hidden}
.case-page[data-case="dirft"] .dx-msg.is-in{grid-template-rows:1fr;opacity:1;transform:none;margin-top:calc(14 * var(--u))}
.case-page[data-case="dirft"] .case-reading-content .dx-msg--teacher img{width:calc(923 * var(--u))}
.case-page[data-case="dirft"] .dx-msg--student{align-self:flex-end}
.case-page[data-case="dirft"] .case-reading-content .dx-msg--student img{width:calc(315 * var(--u))}
.case-page[data-case="dirft"] .case-reading-content .dx-msg--reply img{width:calc(321 * var(--u))}
.case-page[data-case="dirft"] .dx-msg--typing{align-self:flex-start}
.case-page[data-case="dirft"] .dx-typing{display:inline-flex;gap:calc(7 * var(--u));padding:calc(20 * var(--u)) calc(22 * var(--u));border-radius:calc(20 * var(--u));background:#fff}
.case-page[data-case="dirft"] .dx-typing i{width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;background:#b9b6bf;animation:dx-dot 1s infinite ease-in-out}
.case-page[data-case="dirft"] .dx-typing i:nth-child(2){animation-delay:.15s}
.case-page[data-case="dirft"] .dx-typing i:nth-child(3){animation-delay:.3s}
@keyframes dx-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.case-page[data-case="dirft"] .dx-chat-input{position:absolute;left:calc(509 * var(--u));top:calc(708 * var(--u));width:calc(620 * var(--u));height:calc(34 * var(--u))}
.case-page[data-case="dirft"] .dx-chat-mask{position:absolute;top:0;bottom:0;left:0;width:calc(130 * var(--u));background:#f7f7f7;opacity:0}
.case-page[data-case="dirft"] .dx-chat-typed{position:absolute;left:calc(4 * var(--u));top:calc(9 * var(--u));clip-path:inset(0 100% 0 0)}
.case-page[data-case="dirft"] .case-reading-content .dx-chat-typed img{width:calc(273 * var(--u))}
.case-page[data-case="dirft"] .dx-chat-caret{position:absolute;left:calc(5 * var(--u));top:calc(6 * var(--u));width:max(1px,calc(2 * var(--u)));height:calc(22 * var(--u));background:#ff9a4a;opacity:0}
.case-page[data-case="dirft"] .dx-chat.is-typing .dx-chat-mask{opacity:1}
.case-page[data-case="dirft"] .dx-chat.is-typing .dx-chat-typed{clip-path:inset(0 0 0 0);transition:clip-path 1.9s steps(33,end)}
.case-page[data-case="dirft"] .dx-chat.is-typing .dx-chat-caret{opacity:1;left:calc(280 * var(--u));transition:left 1.9s steps(33,end);animation:dx-blink .9s steps(1) infinite}
@keyframes dx-blink{50%{opacity:0}}
.case-page[data-case="dirft"] .dx-chat-send{position:absolute;left:calc(489 * var(--u));top:calc(853 * var(--u));width:calc(138 * var(--u));height:calc(48 * var(--u));border-radius:calc(24 * var(--u));background:#000;opacity:0;transition:opacity .15s}
.case-page[data-case="dirft"] .dx-chat.is-pressed .dx-chat-send{opacity:.14}
.case-page[data-case="dirft"] .dx-chat.is-resetting .dx-chat-feed{opacity:0;transition:opacity .45s}
.case-page[data-case="dirft"] .dx-chat-zoom{position:absolute;inset:0;border-radius:26px;background:none}
@media(prefers-reduced-motion:reduce){
 .case-page[data-case="dirft"] .dx-msg{transition:none}
 .case-page[data-case="dirft"] .dx-typing i{animation:none}
}

/* v119i: source line under the audience cards; on phones the cards become a swipeable row. */
.case-page[data-case="dirft"].case-reading-presentation .dx-source{margin:16px 0 0;font:400 13px/19px var(--font-body);color:var(--color-muted)}
@media(max-width:809.98px){
 .case-page[data-case="dirft"] .dx-segments{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;overscroll-behavior-x:contain}
 .case-page[data-case="dirft"] .dx-segments::-webkit-scrollbar{display:none}
 .case-page[data-case="dirft"] .dx-segment{flex:0 0 86%;scroll-snap-align:start}
}
.case-page[data-case="dirft"] .dx-segments-wrap{min-width:0;max-width:100%}
@media(max-width:809.98px){.case-page[data-case="dirft"] .dx-segments{min-width:0;max-width:100%}}

/* v119j: short texts in the audience cards break evenly (no lone words, no orphaned dash). */
.case-page[data-case="dirft"].case-reading-presentation :is(.dx-q p,.dx-notes dd,.dx-answer p){text-wrap:balance}
/* v119j: medium desktops (1000–1439) — narrower cards need tighter padding and 14 px notes. */
@media(min-width:1000px) and (max-width:1439.98px){
 .case-page[data-case="dirft"] .dx-segment{padding:26px 20px 20px}
 .case-page[data-case="dirft"] .dx-q{padding:14px 16px}
 .case-page[data-case="dirft"].case-reading-presentation .dx-q p{font-size:14px;line-height:21px}
 .case-page[data-case="dirft"].case-reading-presentation .dx-notes dd{font-size:14px;line-height:21px}
 .case-page[data-case="dirft"] .dx-answer{padding:16px 16px 18px}
 .case-page[data-case="dirft"].case-reading-presentation .dx-answer p{font-size:15px;line-height:22px}
}

/* v119k: «Риск уйти» is the same plain red label in both research blocks. */
.case-page[data-case="dirft"] .dx-risk-label{display:inline;height:auto;padding:0;border-radius:0;background:none;font:600 13px/18px var(--font-body);color:var(--dx-risk)}
/* Phone ribbon: three dots like the site sliders (8 px, centres 26 px apart, 44×26 tap zone). */
.case-page[data-case="dirft"] .dx-dots{display:none}
@media(max-width:809.98px){
 .case-page[data-case="dirft"] .dx-dots:not([hidden]){display:flex;justify-content:center;margin-top:4px}
 .case-page[data-case="dirft"] .dx-dots button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer}
 .case-page[data-case="dirft"] .dx-dots span{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--color-ink) 22%,transparent);transition:background .2s}
 .case-page[data-case="dirft"] .dx-dots [aria-pressed="true"] span{background:var(--color-accent)}
}

/* v119l (09.11.2026): clearer structure.
   Audience card: identity (tag, title) → question plate → a two-row fact table with labels
   in a fixed left column and hairlines → the answer card. Rows line up across the three cards. */
@media(min-width:1000px) and (max-width:1439.98px){
}
/* Journey without the arrow: three columns, the badge 16 px from the step title. */
.case-page[data-case="dirft"] .dx-journey{--dx-cols:208px minmax(0,1fr) minmax(0,1.05fr)}
.case-page[data-case="dirft"] .dx-row{column-gap:28px}
.case-page[data-case="dirft"].case-reading-presentation .dx-step h4{column-gap:16px}
.case-page[data-case="dirft"] .dx-journey-head span:last-child{padding-left:20px}
@media(max-width:1199.98px){
 .case-page[data-case="dirft"] .dx-journey{--dx-cols:184px minmax(0,1fr) minmax(0,1.05fr)}
 .case-page[data-case="dirft"] .dx-row{column-gap:20px}
}
@media(max-width:809.98px){
 .case-page[data-case="dirft"] .dx-row{column-gap:0}
}

/* v119m (09.11.2026): clean cards after the Putivnyk reference — no rules inside a card,
   one micro-label system (11 px caps, +.08em, as the journey header), groups separated by air.
   Hierarchy: title → question → answer; task and risk are quiet supporting notes. */
.case-page[data-case="dirft"].case-reading-presentation .dx-fix h5,
.case-page[data-case="dirft"] .dx-risk-label{display:block;margin:0 0 6px;font:600 11px/14px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.case-page[data-case="dirft"].case-reading-presentation .dx-note--risk dt,.case-page[data-case="dirft"] .dx-risk-label{color:var(--dx-risk)}
.case-page[data-case="dirft"].case-reading-presentation .dx-fix h5{color:var(--color-accent);margin-bottom:8px}
.case-page[data-case="dirft"].case-reading-presentation .dx-risk{gap:0;margin-top:12px}
@media(min-width:1000px) and (max-width:1439.98px){
}

/* v119n (09.11.2026): audience cards with a real DIRFT photo (3:2, heads intact).
   Card = photo → tag + title → the question → «Риск уйти» → white answer card. «Задача» removed. */
@media(min-width:1000px) and (max-width:1439.98px){
}
@media(max-width:809.98px){
}

/* v119o (09.11.2026): lighter audience cards — photo, tag, title, question, answer (risk lives in the journey).
   Journey: the red «Риск уйти» pill is back, rows get more air. */
.case-page[data-case="dirft"] .dx-risk-label{display:inline-flex;align-items:center;height:22px;margin:0;padding:0 9px;border-radius:999px;background:var(--dx-risk-bg);color:var(--dx-risk);font:500 12px/1 var(--font-body);letter-spacing:.01em;text-transform:none}
.case-page[data-case="dirft"].case-reading-presentation .dx-risk{display:grid;justify-items:start;gap:8px;margin-top:14px}
.case-page[data-case="dirft"] .dx-row.dx-step{padding-top:28px;padding-bottom:28px}
.case-page[data-case="dirft"] .dx-journey-head.dx-row{padding-top:16px;padding-bottom:16px}
.case-page[data-case="dirft"] .dx-fix{padding:20px 22px 18px}
.case-page[data-case="dirft"].case-reading-presentation .dx-metric{margin-top:14px;padding-top:12px}
@media(max-width:809.98px){.case-page[data-case="dirft"] .dx-row.dx-step{padding-top:20px;padding-bottom:20px}}

/* v119p (09.11.2026): journey on a strict grid — three equal columns, equal gaps,
   equal left/right padding; the header labels sit on the same columns. */
.case-page[data-case="dirft"] .dx-journey{--dx-cols:repeat(3,minmax(0,1fr))}
.case-page[data-case="dirft"] .dx-row{column-gap:32px;padding-left:28px;padding-right:28px}
.case-page[data-case="dirft"] .dx-journey-head span:last-child{padding-left:22px}
.case-page[data-case="dirft"] .dx-fix{padding-left:22px;padding-right:22px}
@media(max-width:1199.98px){
 .case-page[data-case="dirft"] .dx-journey{--dx-cols:repeat(3,minmax(0,1fr))}
 .case-page[data-case="dirft"] .dx-row{column-gap:20px;padding-left:20px;padding-right:20px}
 .case-page[data-case="dirft"] .dx-journey-head span:last-child,.case-page[data-case="dirft"] .dx-fix{padding-left:18px}
 .case-page[data-case="dirft"] .dx-fix{padding-right:18px}
}
@media(max-width:809.98px){
 .case-page[data-case="dirft"] .dx-journey{--dx-cols:minmax(0,1fr)}
 .case-page[data-case="dirft"] .dx-row{padding-left:16px;padding-right:16px}
}

/* v119q: every journey cell is the same container — text sits 22 px inside its column,
   exactly like the text inside the solution plate; the header labels follow. */
@media(min-width:810px){
 .case-page[data-case="dirft"].case-reading-presentation .dx-step h4,
 .case-page[data-case="dirft"] .dx-pain,
 .case-page[data-case="dirft"] .dx-journey-head span{padding-left:22px!important;padding-right:22px}
 .case-page[data-case="dirft"] .dx-journey-head span:empty{display:none}
}
@media(min-width:810px) and (max-width:1199.98px){
 .case-page[data-case="dirft"].case-reading-presentation .dx-step h4,
 .case-page[data-case="dirft"] .dx-pain,
 .case-page[data-case="dirft"] .dx-journey-head span{padding-left:18px!important;padding-right:18px}
}

/* v119r: more room for the middle column — smaller outer row padding and gaps,
   no right padding on plain text cells (only the plate needs it). Text stays 38 px from both card edges. */
@media(min-width:810px){
 .case-page[data-case="dirft"] .dx-row{column-gap:24px;padding-left:16px;padding-right:16px}
 .case-page[data-case="dirft"].case-reading-presentation .dx-step h4,
 .case-page[data-case="dirft"] .dx-pain,
 .case-page[data-case="dirft"] .dx-journey-head span{padding-right:0}
 .case-page[data-case="dirft"].case-reading-presentation :is(.dx-quote,.dx-risk){text-wrap:wrap}
}
@media(min-width:810px) and (max-width:1199.98px){
 .case-page[data-case="dirft"] .dx-row{column-gap:16px;padding-left:12px;padding-right:12px}
}
/* v119r: the middle column carries the most text — a little wider; inner padding stays equal. */
@media(min-width:810px){
 .case-page[data-case="dirft"] .dx-journey{--dx-cols:minmax(0,.87fr) minmax(0,1.11fr) minmax(0,1.02fr)}
 .case-page[data-case="dirft"].case-reading-presentation .dx-step h4{font-size:18px;line-height:22px}
}

/* v119s: «Риск уйти» pill sits above the question as its label: pill → question → explanation. */
.case-page[data-case="dirft"] .dx-pain{display:flex;flex-direction:column;align-items:flex-start}
.case-page[data-case="dirft"] .dx-pain .dx-risk-label{margin:0 0 10px}
.case-page[data-case="dirft"].case-reading-presentation .dx-risk{display:block;margin-top:6px}
@media(min-width:810px){
 .case-page[data-case="dirft"] .dx-pain{padding-top:calc(var(--dx-line1) - 11px)}
}

/* v119t (09.11.2026): audience cards without photos — tag → title → question on a tinted plate → answer.
   Four parts, one accent each; generous, even rhythm. */
@media(min-width:1000px) and (max-width:1439.98px){
}
@media(max-width:809.98px){
}

/* v119v (09.11.2026): no quotation marks (the plate already marks the voice), one-line task,
   the answer's principle in bold, the rest regular. */
.case-page[data-case="dirft"].case-reading-presentation .dx-answer p{font-weight:400}
.case-page[data-case="dirft"].case-reading-presentation .dx-answer p b{font-weight:600;color:var(--color-ink)}

/* v119x (09.11.2026): programme page-story. Desktop: a tall track with a pinned scene; one caption
   at a time beside the window (no rules), a 01/06 counter with dots. Narrow screens: plain flow. */
.case-page[data-case="dirft"] .dx-ps-steps{list-style:none;margin:0;padding:0;display:grid}
.case-page[data-case="dirft"] .dx-ps-step{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
.case-page[data-case="dirft"] .dx-ps-step.is-current{opacity:1;transform:none;pointer-events:auto}
.case-page[data-case="dirft"].case-reading-presentation .dx-ps-step h4{margin:0 0 10px;font:600 24px/28px var(--font-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--color-ink)}
.case-page[data-case="dirft"].case-reading-presentation .dx-ps-step p{margin:0;font:400 16px/25px var(--font-body);color:var(--color-muted);text-wrap:pretty}
.case-page[data-case="dirft"] .dx-ps-counter{display:flex;align-items:center;gap:6px;margin:40px 0 16px;font:600 13px/18px var(--font-body)}
.case-page[data-case="dirft"] .dx-ps-num{color:var(--color-accent)}
.case-page[data-case="dirft"] .dx-ps-of{color:var(--color-muted)}
.case-page[data-case="dirft"] .dx-ps-dots{display:flex;gap:6px;margin-left:12px}
.case-page[data-case="dirft"] .dx-ps-dots i{width:18px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--color-ink) 14%,transparent);transition:background .3s}
.case-page[data-case="dirft"] .dx-ps-dots i.is-current{background:var(--color-accent)}
.case-page[data-case="dirft"] .case-reading-content .dx-ps-view img{transition:transform 1s cubic-bezier(.65,0,.35,1);will-change:transform}
@media(min-width:1100px) and (min-height:600px){
 .case-page[data-case="dirft"] .dx-pstory{display:block;height:calc(var(--n) * 60vh + 100vh)}
 .case-page[data-case="dirft"] .dx-ps-pin{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:48px;align-items:center}
 .case-page[data-case="dirft"] .dx-ps-figure .dx-chat-stage{padding:clamp(14px,4%,40px)}
 .case-page[data-case="dirft"] .dx-ps-view{aspect-ratio:4/3;max-height:calc(100vh - 220px)}
}
@media(max-width:1099.98px),(max-height:599.98px){
 .case-page[data-case="dirft"] .dx-ps-pin{display:grid;gap:24px}
 .case-page[data-case="dirft"] .dx-ps-counter{display:none}
 .case-page[data-case="dirft"] .dx-ps-steps{gap:20px}
 .case-page[data-case="dirft"] .dx-ps-step{grid-area:auto;opacity:1;transform:none}
 .case-page[data-case="dirft"] .dx-ps-view{max-height:70vh;overflow-y:auto;scrollbar-width:thin}
 .case-page[data-case="dirft"] .case-reading-content .dx-ps-view img{transform:none!important}
}
@media(prefers-reduced-motion:reduce){.case-page[data-case="dirft"] .case-reading-content .dx-ps-view img,.case-page[data-case="dirft"] .dx-ps-step{transition:none}}

.case-page[data-case="dirft"] .dx-states{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.case-page[data-case="dirft"] .dx-state{margin:0}
.case-page[data-case="dirft"] .dx-state-media{position:relative;display:block;overflow:hidden;border-radius:20px}
.case-page[data-case="dirft"] .case-reading-content .dx-state-media img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none}
.case-page[data-case="dirft"] .dx-state figcaption{display:grid;gap:2px;margin-top:12px}
.case-page[data-case="dirft"] .dx-state figcaption strong{font:600 15px/22px var(--font-body);color:var(--color-ink)}
.case-page[data-case="dirft"] .dx-state figcaption span{font:400 14px/20px var(--font-body);color:var(--color-muted)}
@media(max-width:809.98px){.case-page[data-case="dirft"] .dx-states{grid-template-columns:minmax(0,1fr);gap:20px}}

/* v119w: post-launch hypotheses — three equal cards under the outcome. */
.case-page[data-case="dirft"] .dx-hyps{margin-top:var(--case-sp-scene,112px);padding-top:0}
.case-page[data-case="dirft"] .dx-hyps-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--reading-gap,40px);align-items:baseline}
.case-page[data-case="dirft"].case-reading-presentation .dx-hyps-head h3{margin:0;font:500 var(--reading-h3)/var(--reading-h3-line) var(--font-display);letter-spacing:-.01em;color:var(--color-ink)}
.case-page[data-case="dirft"].case-reading-presentation .dx-hyps-head p{margin:0;font:400 15px/23px var(--font-body);color:var(--color-muted)}
.case-page[data-case="dirft"] .dx-hyps-list{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.case-page[data-case="dirft"] .dx-hyp{display:flex;flex-direction:column;padding:24px;border-radius:20px;border:1px dashed color-mix(in srgb,var(--color-ink) 22%,transparent)}
.case-page[data-case="dirft"] .dx-hyp-n{font:600 13px/18px var(--font-body);color:var(--color-accent)}
.case-page[data-case="dirft"].case-reading-presentation .dx-hyp h4{margin:12px 0 8px;font:600 20px/24px var(--font-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--color-ink)}
.case-page[data-case="dirft"].case-reading-presentation .dx-hyp>p:not(.dx-metric){margin:0;font:400 15px/23px var(--font-body);color:var(--color-muted);text-wrap:pretty}
.case-page[data-case="dirft"] .dx-hyp .dx-metric{margin-top:auto!important;padding-top:16px!important}
@media(max-width:999.98px){
 .case-page[data-case="dirft"] .dx-hyps-head{grid-template-columns:minmax(0,1fr);gap:10px}
 .case-page[data-case="dirft"] .dx-hyps-list{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* v119y: opening wall — real screens on a tilted plane; columns drift up/down in a seamless loop. */
.case-page[data-case="dirft"] .dx-wall{position:relative;margin:0}
.case-page[data-case="dirft"] .dx-wall-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:26px;background:var(--dx-field);perspective:1800px}
.case-page[data-case="dirft"] .dx-wall-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,color-mix(in srgb,var(--dx-field) 70%,transparent))}
.case-page[data-case="dirft"] .dx-wall-plane{position:absolute;left:50%;top:50%;width:215%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1.8%;transform:translate(-50%,-50%) rotateX(32deg) rotateZ(-18deg);transform-style:preserve-3d}
.case-page[data-case="dirft"] .dx-wall-col{overflow:visible}
.case-page[data-case="dirft"] .dx-wall-track{display:flex;flex-direction:column;gap:7%;animation:dx-wall 70s linear infinite}
.case-page[data-case="dirft"] .dx-wall-col--1 .dx-wall-track,.case-page[data-case="dirft"] .dx-wall-col--3 .dx-wall-track,.case-page[data-case="dirft"] .dx-wall-col--5 .dx-wall-track{animation-direction:reverse;animation-duration:84s}
.case-page[data-case="dirft"] .dx-wall-col--2 .dx-wall-track{animation-duration:62s}
.case-page[data-case="dirft"] .case-reading-content .dx-wall-track img{display:block;width:100%;height:auto;max-width:none;border-radius:10px;box-shadow:0 24px 40px -22px #46321e70;gap:0}
.case-page[data-case="dirft"] .dx-wall-track{gap:0}
.case-page[data-case="dirft"] .case-reading-content .dx-wall-track img+img{margin-top:28px}
@keyframes dx-wall{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.case-page[data-case="dirft"] .dx-wall.is-off .dx-wall-track{animation-play-state:paused}
@media(max-width:809.98px){
 .case-page[data-case="dirft"] .dx-wall-stage{aspect-ratio:4/5}
 .case-page[data-case="dirft"] .dx-wall-plane{width:330%}
}
@media(prefers-reduced-motion:reduce){.case-page[data-case="dirft"] .dx-wall-track{animation:none!important}}

/* v119y fix: the tilted plane always overfills the stage — the track starts half a loop up, so no
   empty band appears at the top or bottom while columns drift either way. */
.case-page[data-case="dirft"] .dx-wall-plane{margin-top:-6%}
.case-page[data-case="dirft"] .dx-wall-track{animation-delay:-30s}

/* v119z: seamless loop — each column holds its six screens three times; every card carries its own
   bottom spacing, so one copy is exactly a third of the track and the shift by −33.333% never shows a seam. */
.case-page[data-case="dirft"] .case-reading-content .dx-wall-track img+img{margin-top:0}
.case-page[data-case="dirft"] .case-reading-content .dx-wall-track img{margin:0 0 28px}
@keyframes dx-wall{from{transform:translateY(0)}to{transform:translateY(-33.3333%)}}
.case-page[data-case="dirft"] .dx-wall-plane{top:50%;margin-top:0;transform:translate(-50%,-50%) rotateX(32deg) rotateZ(-18deg)}

/* v120 (09.11.2026): programme — step list + sticky window (back to the list layout the owner
   preferred), cleaner: no rules, faded inactive steps, the current one at full contrast with an
   orange number; each step is about half a screen tall so its text sits mid-screen when current. */
.case-page[data-case="dirft"] .dx-ps2{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)!important;gap:56px!important;align-items:start!important;height:auto!important}
.case-page[data-case="dirft"] .dx-ps2 .dx-ps-steps{display:block!important;margin:48px 0 0!important}
.case-page[data-case="dirft"] .dx-ps2 .dx-ps-step{display:grid!important;grid-template-columns:36px minmax(0,1fr);gap:8px;grid-area:auto!important;min-height:52vh;padding:0!important;border:0!important;opacity:.28!important;transform:none!important;pointer-events:auto!important;transition:opacity .45s ease!important}
.case-page[data-case="dirft"] .dx-ps2 .dx-ps-step:last-child{min-height:0}
.case-page[data-case="dirft"] .dx-ps2 .dx-ps-step.is-current{opacity:1!important}
.case-page[data-case="dirft"] .dx-ps2 .dx-ps-n{font:600 15px/28px var(--font-body);color:var(--color-muted)}
.case-page[data-case="dirft"] .dx-ps2 .dx-ps-step.is-current .dx-ps-n{color:var(--color-accent)}
.case-page[data-case="dirft"].case-reading-presentation .dx-ps2 .dx-ps-step h4{margin:0 0 10px;font:600 24px/28px var(--font-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--color-ink)}
.case-page[data-case="dirft"].case-reading-presentation .dx-ps2 .dx-ps-step p{margin:0;font:400 16px/25px var(--font-body);color:var(--color-muted);text-wrap:pretty}
.case-page[data-case="dirft"] .dx-ps2 .dx-ps-media{position:sticky;top:calc(50vh - 280px)}
.case-page[data-case="dirft"] .dx-ps2 .dx-ps-figure .dx-chat-stage{padding:clamp(14px,4%,36px)}
.case-page[data-case="dirft"] .dx-ps2 .dx-ps-view{aspect-ratio:4/3;max-height:none!important;overflow:hidden!important}
@media(max-width:1099.98px){
 .case-page[data-case="dirft"] .dx-ps2{grid-template-columns:minmax(0,1fr)!important;gap:24px!important}
 .case-page[data-case="dirft"] .dx-ps2 .dx-ps-media{position:static;order:-1}
 .case-page[data-case="dirft"] .dx-ps2 .dx-ps-copy{order:-2}
 .case-page[data-case="dirft"] .dx-ps2 .dx-ps-step{min-height:0;opacity:1!important;margin-bottom:24px}
 .case-page[data-case="dirft"] .dx-ps2 .dx-ps-view{aspect-ratio:auto;max-height:70vh!important;overflow-y:auto!important}
 .case-page[data-case="dirft"] .case-reading-content .dx-ps2 .dx-ps-view img{transform:none!important}
}

/* v121 (09.11.2026): programme — the whole page in full height on the right, scrolling with the
   site; the left column is pinned and shows one step at a time (the block now mid-screen). */
.case-page[data-case="dirft"] .dx-ps3{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;gap:56px!important;align-items:stretch!important;height:auto!important}
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-copy{position:relative}
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-pin{position:sticky;top:calc(50vh - 190px)}
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-steps{display:grid!important;margin:44px 0 0!important}
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-step{grid-area:1/1!important;display:block!important;min-height:0!important;opacity:0!important;transform:translateY(12px)!important;transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1)!important;pointer-events:none}
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-step.is-current{opacity:1!important;transform:none!important;pointer-events:auto}
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-n{display:block;margin-bottom:12px;font:600 14px/20px var(--font-body);color:var(--color-accent)}
.case-page[data-case="dirft"].case-reading-presentation .dx-ps3 .dx-ps-step h4{margin:0 0 10px;font:600 26px/30px var(--font-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--color-ink)}
.case-page[data-case="dirft"].case-reading-presentation .dx-ps3 .dx-ps-step p{margin:0;font:400 16px/25px var(--font-body);color:var(--color-muted);text-wrap:pretty}
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-media{position:static!important}
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-figure{position:relative;margin:0;padding:clamp(14px,4%,36px);border-radius:26px;background:var(--dx-field)}
.case-page[data-case="dirft"] .dx-ps3 .dx-window{overflow:hidden;border-radius:11px;background:#fff;box-shadow:0 26px 50px -26px #46321e66}
.case-page[data-case="dirft"] .case-reading-content .dx-ps3 .dx-ps-page{display:block;width:100%;height:auto;max-width:none;border-radius:0;box-shadow:none;transform:none}
.case-page[data-case="dirft"] .dx-ps3 .dx-chat-zoom{position:absolute;inset:auto 0 0 auto;width:96px;height:96px}
@media(max-width:1099.98px){
 .case-page[data-case="dirft"] .dx-ps3{grid-template-columns:minmax(0,1fr)!important;gap:24px!important}
 .case-page[data-case="dirft"] .dx-ps3 .dx-ps-pin{position:static}
 .case-page[data-case="dirft"] .dx-ps3 .dx-ps-steps{display:block!important;margin-top:24px!important}
 .case-page[data-case="dirft"] .dx-ps3 .dx-ps-step{opacity:1!important;transform:none!important;margin-bottom:20px}
 .case-page[data-case="dirft"] .dx-ps3 .dx-ps-figure{max-height:80vh;overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.case-page[data-case="dirft"] .dx-ps3 .dx-ps-step{transition:none!important}}
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-pin{display:block!important;height:auto!important;grid-template-columns:none!important;top:calc(50vh - 200px)!important}
@media(max-width:1099.98px){.case-page[data-case="dirft"] .dx-ps3 .dx-ps-pin{position:static!important}}

/* v122 (09.11.2026): programme — no step captions; the pinned description sits mid-screen.
   The whole page is one zoom target: the eye stays in view (sticky) while the page scrolls by. */
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-pin{top:calc(50vh - 160px)!important}
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-zoom{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:20px;border-radius:26px;overflow:visible!important;background:transparent!important;cursor:zoom-in}
.case-page[data-case="dirft"].case-reading-presentation .dx-ps3 .dx-ps-zoom .case-zoom{position:sticky;right:auto;bottom:24px}
.case-page[data-case="dirft"] .dx-ps3 .dx-ps-zoom:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}

/* v124 (09.11.2026): audience — minimal: icon + role chip (neutral), site H4, the question in ink,
   task and risk as one muted sentence pair without labels, the answer on the white plate.
   Only the site's type roles; the single accent is the answer label. */
.case-page[data-case="dirft"] .dx-sg{--sg-chip:color-mix(in srgb,var(--color-ink) 6%,transparent)}
.case-page[data-case="dirft"] .dx-segment .dx-sg-head{display:flex!important;align-items:center;gap:8px}
.case-page[data-case="dirft"] .dx-sg-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:10px;background:var(--sg-chip);color:var(--color-ink)}
.case-page[data-case="dirft"] .dx-sg-role{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:10px;background:var(--sg-chip);font:600 14px/1 var(--font-body);color:var(--color-ink)}
.case-page[data-case="dirft"].case-reading-presentation .dx-segment.dx-sg h4.dx-sg-title{margin:24px 0 0}
.case-page[data-case="dirft"].case-reading-presentation .dx-sg-q{margin:16px 0 0;font:400 16px/24px var(--font-body);color:var(--color-ink);text-wrap:balance}
.case-page[data-case="dirft"].case-reading-presentation .dx-sg-ctx{margin:16px 0 0;font:400 15px/22px var(--font-body);color:var(--color-muted);text-wrap:pretty}
.case-page[data-case="dirft"] .dx-sg .dx-answer{margin-top:28px}
@media(max-width:999.98px){.case-page[data-case="dirft"] .dx-sg .dx-answer{margin-top:auto}.case-page[data-case="dirft"] .dx-sg-ctx{margin-bottom:24px!important}}
/* v124b: accents — orange icon tile, orange quote marks, the task sentence in ink (risk stays muted),
   a slightly larger question; parent question shortened so all questions take two lines. */
.case-page[data-case="dirft"] .dx-sg-icon{background:var(--color-accent);color:#fff}
.case-page[data-case="dirft"].case-reading-presentation .dx-sg-q{font-size:17px;line-height:25px;font-weight:500}
.case-page[data-case="dirft"] .dx-sg-ctx b{font-weight:500;color:var(--color-ink)}
/* v124d: icon tile and role chip — two separate orange plates; the person's question as a chat
   reply (neutral bubble, flat lower-left corner) instead of quote marks. */
.case-page[data-case="dirft"] .dx-sg-role{background:var(--color-accent);color:#fff}
.case-page[data-case="dirft"].case-reading-presentation .dx-sg-q{align-self:stretch;margin-top:20px;padding:14px 18px 15px;border-radius:18px 18px 18px 4px;background:color-mix(in srgb,var(--color-ink) 6%,transparent);font:500 16px/24px var(--font-body);color:var(--color-ink);text-wrap:pretty}
/* v124e: airier rhythm on an 8-pt scale and a clearer hierarchy: title 24/28 is the strongest line,
   the answer lead is a touch heavier; header 28 → title 24 → question 20 → task 32 → answer. */
.case-page[data-case="dirft"] .dx-segment.dx-sg{padding:32px 30px 30px}
.case-page[data-case="dirft"].case-reading-presentation .dx-segment.dx-sg h4.dx-sg-title{margin-top:28px;font-size:24px;line-height:28px}
.case-page[data-case="dirft"].case-reading-presentation .dx-sg-q{margin-top:24px;padding:16px 20px 17px}
.case-page[data-case="dirft"].case-reading-presentation .dx-sg-ctx{margin-top:20px;line-height:23px}
.case-page[data-case="dirft"] .dx-sg .dx-answer{margin-top:32px;padding:20px 20px 22px}
.case-page[data-case="dirft"].case-reading-presentation .dx-sg .dx-answer h5{margin-bottom:8px}
.case-page[data-case="dirft"].case-reading-presentation .dx-sg .dx-answer p{line-height:24px}
.case-page[data-case="dirft"].case-reading-presentation .dx-sg .dx-answer p b{font-weight:700}
@media(max-width:1279.98px){
 .case-page[data-case="dirft"] .dx-segment.dx-sg{padding:28px 24px 24px}
 .case-page[data-case="dirft"].case-reading-presentation .dx-segment.dx-sg h4.dx-sg-title{font-size:22px;line-height:26px}
 .case-page[data-case="dirft"].case-reading-presentation .dx-sg-q{padding:14px 16px 15px}
 .case-page[data-case="dirft"] .dx-sg .dx-answer{padding:18px 18px 20px}
}
@media(max-width:999.98px){.case-page[data-case="dirft"] .dx-sg .dx-answer{margin-top:auto}.case-page[data-case="dirft"] .dx-sg-ctx{margin-bottom:28px!important}}
/* v124f: one hue, three steps (owner): specialist — soft grey, parent — lighter, listener — page colour
   with an outline. The answer plate always contrasts with its card: white on grey, soft grey on white. */
.case-page[data-case="dirft"] .dx-segment.dx-sg:nth-child(2){background:color-mix(in srgb,var(--color-soft) 50%,var(--color-paper))}
.case-page[data-case="dirft"] .dx-segment.dx-sg:nth-child(3){background:var(--color-paper);box-shadow:inset 0 0 0 1px var(--color-rule)}
.case-page[data-case="dirft"] .dx-sg:nth-child(3) .dx-answer{background:var(--color-soft)}
/* v124g: the lighter parent card gets an outline in the specialist card colour. */
.case-page[data-case="dirft"] .dx-segment.dx-sg:nth-child(2){box-shadow:inset 0 0 0 1.5px var(--color-soft)}
/* v124h (09.11.2026): role chip back to neutral (owner); only the icon tile stays orange. */
.case-page[data-case="dirft"] .dx-sg-role{background:var(--sg-chip)!important;color:var(--color-ink)!important}
/* v124i (09.11.2026): one look for all three cards (owner); goal under the persona title, the risk of
   leaving as its own ink line right above the solution; filled icons like the case passport. */
.case-page[data-case="dirft"] .dx-segment.dx-sg:nth-child(n){background:var(--color-soft)!important;box-shadow:none!important}
.case-page[data-case="dirft"] .dx-sg:nth-child(n) .dx-answer{background:var(--color-paper)!important}
.case-page[data-case="dirft"] .dx-sg-sub{display:block;margin-top:10px;font:400 15px/22px var(--font-body);text-transform:none;letter-spacing:0;color:var(--color-muted)}
.case-page[data-case="dirft"].case-reading-presentation .dx-sg-ctx.dx-sg-risk{margin-top:20px!important;font-weight:500;color:var(--color-ink)}
/* v127 (09.11.2026): opening wall on the portfolio orange (owner); no zoom on the wall — it is a mood scene. */
.case-page[data-case="dirft"] .dx-wall-stage{background:var(--color-accent)}
.case-page[data-case="dirft"] .dx-wall-stage::after{background:radial-gradient(120% 90% at 50% 45%,transparent 55%,color-mix(in srgb,var(--color-accent) 70%,transparent))}
.case-page[data-case="dirft"] .case-reading-content .dx-wall-track img{box-shadow:0 24px 40px -22px #7a2e0080}
.case-page[data-case="dirft"] .dx-wall .dx-chat-zoom{display:none!important}
/* v128 (09.11.2026): passport «Задача» — a solid clipboard-with-check in the passport icon family. The shared generator draws a monitor here and is frozen during the shell rewrite, so the glyph is swapped in CSS. */
.case-page[data-case="dirft"] [data-case-passport] .case-passport-icon:has(path[d^="M4 3h16"]) svg{visibility:hidden}
.case-page[data-case="dirft"] [data-case-passport] .case-passport-icon:has(path[d^="M4 3h16"]){position:relative}
.case-page[data-case="dirft"] [data-case-passport] .case-passport-icon:has(path[d^="M4 3h16"])::before{content:"";position:absolute;left:0;top:0;width:24px;height:24px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.5%202h5A1.5%201.5%200%200%201%2016%203.5V6H8V3.5A1.5%201.5%200%200%201%209.5%202Z%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M6%204h1v2.5A1.5%201.5%200%200%200%208.5%208h7A1.5%201.5%200%200%200%2017%206.5V4h1a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2Zm4.6%2013.4%206.1-6.1-1.4-1.4-4.7%204.7-1.9-1.9-1.4%201.4%203.3%203.3Z%22/%3E%3C/svg%3E") center/24px 24px no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.5%202h5A1.5%201.5%200%200%201%2016%203.5V6H8V3.5A1.5%201.5%200%200%201%209.5%202Z%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M6%204h1v2.5A1.5%201.5%200%200%200%208.5%208h7A1.5%201.5%200%200%200%2017%206.5V4h1a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2Zm4.6%2013.4%206.1-6.1-1.4-1.4-4.7%204.7-1.9-1.9-1.4%201.4%203.3%203.3Z%22/%3E%3C/svg%3E") center/24px 24px no-repeat}
/* v129 (09.11.2026): wall on a deep warm gradient instead of flat orange (owner): a dark ember base with an
   orange glow behind the screens and an amber highlight; the edges sink into the dark, screens stay crisp. */
.case-page[data-case="dirft"] .dx-wall-stage{background:
 radial-gradient(60% 70% at 28% 22%,rgba(255,166,77,.85),transparent 70%),
 radial-gradient(70% 80% at 78% 70%,rgba(255,106,0,.9),transparent 72%),
 radial-gradient(90% 90% at 50% 120%,#7a1d00,transparent 70%),
 linear-gradient(160deg,#2a0f04 0%,#5a1a02 45%,#1c0a03 100%)}
.case-page[data-case="dirft"] .dx-wall-stage::after{background:radial-gradient(120% 95% at 50% 45%,transparent 50%,rgba(20,6,0,.55))}
.case-page[data-case="dirft"] .case-reading-content .dx-wall-track img{box-shadow:0 30px 50px -24px rgba(20,4,0,.75),0 2px 6px rgba(20,4,0,.25)}
/* v129b: lighter, cleaner gradient (owner: the dark base looked muddy) — pure oranges, no brown;
   a peach highlight top-left, deeper orange bottom-right, a soft vignette in the same hue. */
.case-page[data-case="dirft"] .dx-wall-stage{background:
 radial-gradient(55% 65% at 22% 18%,rgba(255,214,170,.95),transparent 70%),
 radial-gradient(60% 70% at 70% 45%,rgba(255,150,60,.85),transparent 72%),
 radial-gradient(80% 80% at 88% 105%,#e14e00,transparent 70%),
 linear-gradient(150deg,#ffb066 0%,#ff7a1a 45%,#f05a00 100%)}
.case-page[data-case="dirft"] .dx-wall-stage::after{background:radial-gradient(125% 100% at 50% 45%,transparent 55%,rgba(200,64,0,.28))}
.case-page[data-case="dirft"] .case-reading-content .dx-wall-track img{box-shadow:0 28px 48px -24px rgba(140,45,0,.55),0 2px 6px rgba(140,45,0,.16)}
/* v129c: the top-left was too pale — highlight toned down to a warm amber, base starts from saturated orange. */
.case-page[data-case="dirft"] .dx-wall-stage{background:
 radial-gradient(50% 60% at 20% 16%,rgba(255,170,90,.6),transparent 70%),
 radial-gradient(60% 70% at 70% 45%,rgba(255,140,50,.7),transparent 72%),
 radial-gradient(80% 80% at 88% 105%,#d84a00,transparent 70%),
 linear-gradient(150deg,#ff8a2e 0%,#ff6f12 45%,#ea5600 100%)}