/* SEE MO only: source links inside the existing STADION competitor module.
   All grid, typography, surfaces, media and gallery states are inherited. */
.case-page[data-case="see-mo"] [data-case-passport] .case-passport-icon{display:block;width:24px;height:24px;flex:none;color:var(--case-ink)}
.case-page[data-case="see-mo"] [data-case-passport] .case-passport-icon svg{display:block}
.case-page[data-case="see-mo"].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="see-mo"] .case-competitor-logos figure{position:relative}
.case-page[data-case="see-mo"] .case-competitor-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
.case-page[data-case="see-mo"] .case-competitor-link::after{content:"";position:absolute;inset:-8px;border-radius:14px}
.case-page[data-case="see-mo"] .case-competitor-link:focus-visible{outline:none}
.case-page[data-case="see-mo"] .case-competitor-logos figure:has(a:focus-visible){outline:2px solid var(--color-accent);outline-offset:8px;border-radius:12px}
.case-page[data-case="see-mo"] .case-competitor-logos figure:is(:hover,:has(a:focus-visible)) figcaption{color:var(--color-accent)}
.case-page[data-case="see-mo"] [data-logo-frame] img{box-sizing:border-box;border:1px solid #d4d4d4}
html[toggle-theme="dark"] .case-page[data-case="see-mo"] [data-logo-frame] img{border-color:#555}

/* Approved media variant: original UI on a quiet mat; no portfolio fonts in UI.
   Width/height remain natural, including the footer of long original pages. */
.case-page[data-case="see-mo"]{--see-mat:#ececec;--see-sheet-height:1000px}
html[toggle-theme="dark"] .case-page[data-case="see-mo"]{--see-mat:#242424}
.case-page[data-case="see-mo"] .case-reading-content .see-media-mat{box-sizing:border-box;padding:clamp(16px,3.2vw,48px);background:var(--see-mat)}
.case-page[data-case="see-mo"] .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}
/* M10 keeps its square mat, equal columns, dots and original controller.
   Approved presentation viewports: landscape 4:3, portrait 3:4. */
.case-page[data-case="see-mo"] .case-reading-content .see-device-mat{aspect-ratio:1;display:grid;place-items:center;padding:32px 50px 32px 24px}
.case-page[data-case="see-mo"] .case-reading-content .see-screen-mat{container-type:size;grid-template:minmax(0,1fr)/minmax(0,1fr);padding:24px 52px}
.case-page[data-case="see-mo"] .case-slider-dots{right:4px}
.case-page[data-case="see-mo"] .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="see-mo"] .see-screen-glass{display:block;overflow:hidden;border-radius:5px;background:#fff}
.case-page[data-case="see-mo"] .see-tablet-viewport{display:block;width:100%;height:auto}
.case-page[data-case="see-mo"] .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}
.case-page[data-case="see-mo"] .case-reading-content .see-screen-mat:is(:hover,:focus-visible) img{transform:none}
/* All copy remains available without JS/reduced motion. The existing slider
   controller alone selects states; the adapter only mirrors its active dot. */
.case-page[data-case="see-mo"] [data-scene-copy]{display:grid;gap:24px}
.case-page[data-case="see-mo"] [data-scene-copy].is-copy-synced{gap:0}
.case-page[data-case="see-mo"] .is-copy-synced>[data-scene-copy-index]{grid-area:1/1;visibility:hidden;pointer-events:none}
.case-page[data-case="see-mo"] .is-copy-synced>[data-scene-copy-index].is-current{visibility:visible;pointer-events:auto}
/* M07 search presentation: source UI is raster; only cursor, reveal and
   opening/hover layers animate. Without JS the useful results stay visible. */
.case-page[data-case="see-mo"] .case-reading-content .see-search-stage{display:block;width:100%;height:auto;max-height:none;overflow:hidden;border-radius:3px;box-shadow:0 8px 28px -12px #0003}
.see-search-open,.see-search-typing,.see-search-hover,.see-search-click,.see-search-cursor{opacity:0}
.see-search-results{opacity:1}
.see-search-photo{transform-origin:485px 327px}
.see-search-hand{opacity:0}
.see-search-mat.is-search-playing{--see-search-play:running}
.see-search-mat.is-search-ready :is(.see-search-open,.see-search-results,.see-search-typing,.see-search-word-reveal,.see-search-caret,.see-search-hover,.see-search-photo,.see-search-click,.see-search-cursor,.see-search-arrow,.see-search-hand){animation-duration:9600ms;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:both;animation-play-state:var(--see-search-play,paused)}
.is-search-ready .see-search-open{animation-name:see-search-open}
.is-search-ready .see-search-results{animation-name:see-search-results}
.is-search-ready .see-search-typing{animation-name:see-search-typing}
.see-search-mat.is-search-ready .see-search-word-reveal{animation-name:see-search-word;animation-timing-function:steps(1,end)}
.see-search-mat.is-search-ready .see-search-caret{animation-name:see-search-caret;animation-timing-function:steps(1,end)}
.is-search-ready .see-search-hover{animation-name:see-search-hover}
.is-search-ready .see-search-photo{animation-name:see-search-photo}
.is-search-ready .see-search-click{animation-name:see-search-click}
.see-search-mat.is-search-ready .see-search-cursor{animation-name:see-search-cursor;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.see-search-mat.is-search-ready .see-search-arrow{animation-name:see-search-arrow;animation-timing-function:steps(1,end)}
.see-search-mat.is-search-ready .see-search-hand{animation-name:see-search-hand;animation-timing-function:steps(1,end)}
@keyframes see-search-arrow{
 0%,57.99%{opacity:1}58%,79%{opacity:0}79.01%,100%{opacity:1}
}
@keyframes see-search-hand{
 0%,57.99%{opacity:0}58%,79%{opacity:1}79.01%,100%{opacity:0}
}
@keyframes see-search-open{
 0%,13%{opacity:0;transform:translateY(-12px)}
 17%,88%{opacity:1;transform:translateY(0)}
 94%,100%{opacity:0;transform:translateY(-12px)}
}
@keyframes see-search-results{
 0%,41%{opacity:0}45%,88%{opacity:1}94%,100%{opacity:0}
}
@keyframes see-search-typing{
 0%,27%{opacity:0}28%,41%{opacity:1}44%,100%{opacity:0}
}
@keyframes see-search-word{
 0%,29%{width:0}31%{width:12px}34%{width:22px}37%{width:30px}40%,100%{width:48px}
}
@keyframes see-search-caret{
 0%,27%{opacity:0;transform:translateX(0)}
 28%,30%{opacity:1;transform:translateX(0)}
 31%{opacity:1;transform:translateX(11px)}
 34%{opacity:1;transform:translateX(19px)}
 37%{opacity:1;transform:translateX(27px)}
 40%,41%{opacity:1;transform:translateX(43px)}
 44%,100%{opacity:0;transform:translateX(43px)}
}
@keyframes see-search-hover{
 0%,58%{opacity:0}61%,79%{opacity:1}84%,100%{opacity:0}
}
@keyframes see-search-photo{
 0%,58%{transform:scale(1)}61%,79%{transform:scale(1.06)}84%,100%{transform:scale(1)}
}
@keyframes see-search-click{
 0%,11%{opacity:0;r:8px}12%{opacity:.8;r:8px}17%,100%{opacity:0;r:30px}
}
@keyframes see-search-cursor{
 0%,4%{opacity:0;transform:translate(1460px,650px)}
 5%{opacity:1;transform:translate(1460px,650px)}
 12%,16%{opacity:1;transform:translate(1727px,50px)}
 23%,40%{opacity:1;transform:translate(640px,70px)}
 45%{opacity:1;transform:translate(860px,470px)}
 59%,78%{opacity:1;transform:translate(710px,310px)}
 88%,94%{opacity:1;transform:translate(1450px,690px)}
 96%,100%{opacity:0;transform:translate(1460px,650px)}
}
@media(max-width:809.98px){
 .case-page[data-case="see-mo"]{--see-sheet-height:800px}
 .case-page[data-case="see-mo"] .case-reading-content .see-device-mat{padding:20px 40px 20px 12px}
 .case-page[data-case="see-mo"] .case-reading-content .see-screen-mat{padding:20px 52px}
}
/* The user-supplied overview is native 16:9, without STADION's encoded bars. */
.case-page[data-case="see-mo"] .case-context-preview .case-video-wrap{aspect-ratio:16/9}
.case-page[data-case="see-mo"] .case-context-preview .case-video{object-fit:contain}

/* 03.11.2026: SEE MO scenarios have three independent diagrams. Reuse the shared
   scene separator (rule line + stars to the rails) that the reading grid applies
   to #context/#research/#interface; STADION's scenarios have no separators. */
.case-page[data-case="see-mo"].case-reading-presentation .case-reading-content #architecture .case-section-divider{
 position:relative;margin:var(--case-scene-before) calc(-1 * var(--reading-inset)) 0;
 padding:calc(var(--case-scene-after) - 1px) var(--reading-inset) 0;border-top:1px solid var(--color-rule);
}
/* In SEE MO the competitor groups are the direct evidence of the research
   opening ("Что сравнивалось"), so they follow it at the intro→proof gap. */
.case-page[data-case="see-mo"] #research>.case-blocks>.case-competitors:first-child{margin-top:var(--case-sp-proof)}

/* 03.11.2026 — pairs: screens of different height keep one bottom edge;
   the shorter screen stays at the top of its mat. */
.case-page[data-case="see-mo"] .case-media-pair{align-items:stretch}
.case-page[data-case="see-mo"] .case-media-pair>.case-media>.see-page-mat{height:100%}


/* 03.11.2026 v27: the outcome ends with its composition (no media after it), so the
   chapter keeps STADION's 63 px bottom padding without the composition's 56 px gap. */
.case-page[data-case="see-mo"] #outcome>.case-outcome-composition:last-child{margin-bottom:0}

/* 04.11.2026 v33 — block-by-block polish after the Magwai (padhod-architects) review:
   left column = title, right column = text running to the column edge; quieter
   research and process blocks built from hairline rows instead of cards. */
/* Overview video: a wide crop that fits the first screen. */
.case-page[data-case="see-mo"] .case-context-preview .case-video-wrap{aspect-ratio:16/7.5;max-height:62vh;width:100%}
.case-page[data-case="see-mo"] .case-context-preview .case-video{width:100%;height:100%;object-fit:contain;object-position:50% 50%;transform:scale(1.15) translateY(-10%)}
/* Body copy fills the right column; balancing is kept for headings only. */
.case-page[data-case="see-mo"].case-reading-presentation .case-reading-content :is(p,figcaption,dd){text-wrap-style:pretty}

@media(max-width:809.98px){
 .case-page[data-case="see-mo"] .case-context-preview .case-video-wrap{aspect-ratio:4/3;max-height:none}
}

/* 04.11.2026: more air between the content and the vertical rails (owner). */
.case-page[data-case="see-mo"].case-reading-presentation{--reading-inset:64px}
@media(min-width:1600px){.case-page[data-case="see-mo"].case-reading-presentation{--reading-inset:80px}}
@media(max-width:1199.98px){.case-page[data-case="see-mo"].case-reading-presentation{--reading-inset:40px}}
@media(max-width:809.98px){.case-page[data-case="see-mo"].case-reading-presentation{--reading-inset:16px}}

/* 04.11.2026 v34 — one reading line (Magwai «Клиника Фомина» / Eated):
   left column = chapter title only (sticky, two lines), right column = the whole
   story in order: lead → text → subsections → panels. One 5/7 split for openings,
   text+screen features, UI kit and gallery headings; wider chapter navigation. */
@media(min-width:1100px){
.case-page[data-case="see-mo"].case-reading-presentation{--reading-side:216px}
/* The chapter list sits centred in its column: equal air left and right. */
.case-page[data-case="see-mo"] .case-reading-sidebar{padding-inline:0}
.case-page[data-case="see-mo"].case-reading-presentation .case-toc nav{width:max-content;margin-inline:auto}
.case-page[data-case="see-mo"].case-reading-presentation .case-toc a{padding-left:0;font-size:15px;line-height:22px;min-height:36px}
.case-page[data-case="see-mo"].case-reading-presentation .case-toc a[aria-current=location]::before{left:-14px;top:7px;height:22px}
}
@media(min-width:810px){
.case-page[data-case="see-mo"] :is(.case-context-spread,.case-research-opening,.case-architecture-opening,.case-interface-opening,.case-process){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--reading-gap);row-gap:32px;align-items:start}
.case-page[data-case="see-mo"] :is(.case-context-origin,.case-research-introduction,.case-research-opening .case-chapter-heading,.case-architecture-opening .case-chapter-heading,.case-interface-opening .case-chapter-heading,.case-process-heading){display:contents}
.case-page[data-case="see-mo"] :is(.case-context-spread,.case-research-opening,.case-architecture-opening,.case-interface-opening,.case-process)>*{grid-column:2}
.case-page[data-case="see-mo"] :is(.case-context-origin>h2,.case-research-opening h2,.case-architecture-opening h2,.case-interface-opening h2,.case-process-heading>h3){grid-column:1;grid-row:1 / span 3;align-self:start;position:sticky;top:calc(var(--case-header-height) + 32px);margin:0;max-width:9.5em;text-wrap:balance}
.case-page[data-case="see-mo"] :is(.case-context-origin>.case-copy-body,.case-research-opening .case-chapter-heading>p,.case-architecture-opening .case-chapter-heading>p,.case-interface-opening .case-chapter-heading>p,.case-process-heading>p){grid-column:2;grid-row:1;margin:0;max-width:none}
.case-page[data-case="see-mo"] :is(.case-context-aside,.case-research-narrative,.case-architecture-opening>.case-compact-stack,.case-interface-opening>.case-copy,.case-process ol){grid-column:2;grid-row:2;max-width:none;margin:0}
/* Lead: the first sentence of every chapter, dark and slightly larger. */
.case-page[data-case="see-mo"].case-reading-presentation :is(.case-context-origin>.case-copy-body>p:first-child,.case-research-opening .case-chapter-heading>p,.case-architecture-opening .case-chapter-heading>p,.case-interface-opening .case-chapter-heading>p,.case-process-heading>p){font:500 20px/30px var(--font-body);color:var(--color-text);text-wrap:pretty}
.case-page[data-case="see-mo"] .case-context-origin>.case-copy-body>p:first-child{margin-bottom:16px}
.case-page[data-case="see-mo"].case-reading-presentation .case-process.case-process ol{grid-column:1 / -1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}
/* One body size in the right column, below the lead. */
.case-page[data-case="see-mo"].case-reading-presentation :is(.case-context-origin>.case-copy-body>p+p,.case-context-aside .case-copy-body p,.case-research-narrative p,.case-architecture-opening .case-copy-body p,.case-interface-opening .case-copy-body p){font-size:16px;line-height:26px}
/* The same split for every other two-column block. */
.case-page[data-case="see-mo"].case-reading-presentation :is(.case-feature:not(.case-feature--wide),.case-system-layout){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.case-page[data-case="see-mo"].case-reading-presentation :is(.case-feature--wide .case-copy,.case-reading-block>.case-copy,.case-reel-heading){grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:var(--reading-gap)}
}

/* 04.11.2026 v35: one half/half grid for all text, pairs and competitor cards
   (same gap), so right-column text starts on the right image's edge.
   Text + screen features and the UI kit keep the wider screen (5/7). */
@media(min-width:810px){
.case-page[data-case="see-mo"].case-reading-presentation :is(.case-media-pair,.case-competitors){column-gap:var(--reading-gap)}
}
.case-page[data-case="see-mo"].case-reading-presentation .case-competitor-card header p{text-wrap-style:pretty}

/* 04.11.2026 v36 — «Как была выстроена работа»: лестница этапов по образцу FLOW.
   Заголовок слева, лид справа по нижнему краю заголовка; строка «Процесс / Срок»;
   колонки с тонкими линиями, каждая следующая ниже на шаг; проценты и оранжевая
   полоса стоят на своей ступени независимо от длины текста. */
.case-page[data-case="see-mo"] .fl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--reading-gap)}
.case-page[data-case="see-mo"] .fl-head{display:contents}
.case-page[data-case="see-mo"].case-reading-presentation .fl-head>h3{grid-column:1;margin:0;max-width:9.5em;font:500 var(--reading-h2)/var(--reading-h2-line) var(--font-display);letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.case-page[data-case="see-mo"].case-reading-presentation .fl-head>p{grid-column:2;align-self:end;margin:0;max-width:30em;font:400 16px/24px var(--font-body);color:inherit;text-wrap:pretty}
.case-page[data-case="see-mo"] .fl-meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;margin-top:72px;padding-bottom:12px;font:400 13px/18px var(--font-body);color:var(--color-muted)}
.case-page[data-case="see-mo"] .fl-meta b{font-weight:600;color:var(--color-text,currentColor)}
.case-page[data-case="see-mo"] .fl-cols{--fl-step:64px;grid-column:1/-1;list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-left:1px solid var(--reading-card-border)}
.case-page[data-case="see-mo"] .fl-cols li{position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-height:calc(284px + (var(--n) - 1) * var(--fl-step));padding:calc(24px + var(--k) * var(--fl-step)) 18px 56px;border-right:1px solid var(--reading-card-border)}
.case-page[data-case="see-mo"].case-reading-presentation .fl-cols h4{margin:0;font:600 24px/28px var(--font-display);text-transform:uppercase;letter-spacing:-.01em}
.case-page[data-case="see-mo"].case-reading-presentation .fl-cols p{margin:10px 0 0;font:400 14px/20px var(--font-body);color:var(--color-muted);text-wrap:pretty}
.case-page[data-case="see-mo"] .fl-pct{position:absolute;left:18px;top:calc(24px + var(--k) * var(--fl-step) + 170px);font:500 12px/16px var(--font-body)}
.case-page[data-case="see-mo"] .fl-bar{position:absolute;left:18px;right:18px;top:calc(24px + var(--k) * var(--fl-step) + 194px);height:5px}
.case-page[data-case="see-mo"] .fl-bar>span{display:block;height:100%;border-radius:3px;background:var(--color-accent)}
@media(max-width:1099.98px){
 .case-page[data-case="see-mo"] .fl-cols{--fl-step:48px}
 .case-page[data-case="see-mo"].case-reading-presentation .fl-cols h4{font-size:20px;line-height:24px}
 .case-page[data-case="see-mo"] .fl-cols li{padding-inline:14px}
 .case-page[data-case="see-mo"] .fl-pct{left:14px}.case-page[data-case="see-mo"] .fl-bar{left:14px;right:14px}
}
@media(max-width:809.98px){
 .case-page[data-case="see-mo"] .fl{grid-template-columns:minmax(0,1fr);row-gap:12px}
 .case-page[data-case="see-mo"].case-reading-presentation .fl-head>p{grid-column:1}
 .case-page[data-case="see-mo"] .fl-cols{margin-top:24px}
 .case-page[data-case="see-mo"] .fl-cols{grid-template-columns:minmax(0,1fr);border-left:0;border-top:1px solid var(--reading-card-border)}
 .case-page[data-case="see-mo"] .fl-cols li{min-height:0;padding:20px 0 24px;border-right:0;border-bottom:1px solid var(--reading-card-border)}
 .case-page[data-case="see-mo"] .fl-pct,.case-page[data-case="see-mo"] .fl-bar{position:static}
 .case-page[data-case="see-mo"] .fl-pct{margin-top:16px}.case-page[data-case="see-mo"] .fl-bar{margin-top:8px}
}

/* v36 motion: when the block enters the viewport, columns appear one by one,
   the orange bar grows and the percent counts up (case-see-mo.js). Without JS
   or with reduced motion the final state is shown. */
.case-page[data-case="see-mo"] .fl.is-armed .fl-cols li>*{opacity:0;transform:translateY(14px)}
.case-page[data-case="see-mo"] .fl.is-armed .fl-bar>span{transform:scaleX(0);transform-origin:left}
.case-page[data-case="see-mo"] .fl.is-armed .fl-cols li.is-in>*{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.case-page[data-case="see-mo"] .fl.is-armed .fl-cols li.is-in .fl-bar{transform:none}
.case-page[data-case="see-mo"] .fl.is-armed .fl-cols li.is-in .fl-bar>span{transform:scaleX(1);transition:transform .9s cubic-bezier(.2,.7,.2,1) .25s}
.case-page[data-case="see-mo"] .fl.is-armed .fl-cols li.is-in>p{transition-delay:.08s}
.case-page[data-case="see-mo"] .fl.is-armed .fl-cols li.is-in>.fl-pct{transition-delay:.2s}
@media(prefers-reduced-motion:reduce){.case-page[data-case="see-mo"] .fl.is-armed .fl-cols li>*,.case-page[data-case="see-mo"] .fl.is-armed .fl-bar>span{opacity:1;transform:none;transition:none}}

/* 04.11.2026: «Что взял в решение» in the case's own style — the two-column grid,
   subheading weight 500 26/32 like other blocks, muted meta on the right column,
   hairline rows, no grey pill and no inner offset. */
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--reading-gap);align-items:center;width:100%;padding:28px 0;box-sizing:border-box;text-align:left;cursor:pointer;border-top:1px solid var(--reading-card-border);border-bottom:0}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-company{grid-column:1;font:500 var(--reading-h3)/var(--reading-h3-line) var(--font-display);letter-spacing:-.01em;transition:color .2s}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-meta{grid-column:2;grid-row:1;justify-self:start}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-plus{grid-column:2;grid-row:1;justify-self:end;position:relative;inset:auto;transform:none}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger:is(:hover,:focus-visible) .career-company{color:var(--color-accent)}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger:is(:hover,:focus-visible) .career-plus{border-color:#ff6a00;background:#ff6a00;color:#fff}
/* Meta as an outlined button (grey hairline), as the owner asked. */
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-meta{background:transparent;box-shadow:inset 0 0 0 1px var(--reading-card-border);transition:color .18s ease,box-shadow .18s ease}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger:is(:hover,:focus-visible) .career-meta{color:#ff6a00;box-shadow:inset 0 0 0 1px #ff6a00}
@media(max-width:809.98px){
 .case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger{grid-template-columns:minmax(0,1fr) auto;row-gap:6px;padding:22px 0}
 .case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-company{grid-column:1;grid-row:1}
 .case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-meta{grid-column:1;grid-row:2;justify-self:start}
 .case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-plus{grid-column:2;grid-row:1 / span 2;align-self:center}
}
/* 04.11.2026: «Что взял в решение» as a grey card like the competitor cards;
   the meta pill and the plus sit on white (paper) inside it. */
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger{background:var(--case-soft);border:1px solid var(--case-line);border-radius:20px;padding:16px 16px 16px 24px;min-height:0;margin-top:24px!important}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-meta{background:var(--case-bg);box-shadow:none;justify-self:end;margin:0 56px 0 0}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-plus{background:var(--case-bg)}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger:is(:hover,:focus-visible) .career-meta{box-shadow:none}
@media(max-width:809.98px){.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger{padding:16px 16px 16px 20px;margin-top:16px!important}}
/* 04.11.2026 variant B (owner): one white button «4 вывода для продукта +» on the right. */
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger{grid-template-columns:minmax(0,1fr) auto}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-plus{display:none}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-meta{grid-column:2;grid-row:1;justify-self:end;margin:0;display:inline-flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;font:500 14px/20px var(--font-body);color:var(--color-text,inherit)}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-meta{transition:background-color .18s ease,color .18s ease}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-meta::after{content:'';flex:none;width:28px;height:28px;border-radius:50%;color:#fff;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat,#ff6a00}
/* Hover: title orange, button orange with white text, white circle with orange plus. */
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger:is(:hover,:focus-visible) .career-company{color:#ff6a00}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger:is(:hover,:focus-visible) .career-meta{background:#ff6a00;color:#fff}
.case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger:is(:hover,:focus-visible) .career-meta::after{color:#ff6a00;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat,#fff}
/* Dialog as the homepage «Опыт» panel: orange label, 600 titles, no rules, orange cross. */
body:has(.case-page[data-case="see-mo"]) .case-analysis-dialog .career-dialog-close{width:40px;height:40px;color:#ff6a00}
body:has(.case-page[data-case="see-mo"]) .case-analysis-dialog .career-scrollbar-thumb{border:0}

@media(max-width:809.98px){
 .case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger{grid-template-columns:minmax(0,1fr);row-gap:12px}
 .case-page[data-case="see-mo"].case-reading-presentation .case-analysis-trigger .career-meta{grid-column:1;grid-row:2;justify-self:start}
}

/* Analysis dialog = homepage «Опыт» panel: label, title, intro, then one section
   «Выводы» with orange-marker items (dark lead word group + muted explanation). */
body:has(.case-page[data-case="see-mo"]) .case-analysis-dialog .career-dialog-intro{font-size:clamp(15px,1.1vw,18px);line-height:1.6}
body:has(.case-page[data-case="see-mo"]) .case-analysis-dialog .career-dialog-list{padding-top:0;border-top:0;margin-top:36px}
body:has(.case-page[data-case="see-mo"]) .case-analysis-dialog .career-dialog-list h3{margin:0 0 20px;font-size:28px;font-weight:600;line-height:1.2}
body:has(.case-page[data-case="see-mo"]) .case-analysis-dialog .career-dialog-list li{margin-bottom:20px}
body:has(.case-page[data-case="see-mo"]) .case-analysis-dialog .career-dialog-list li strong{display:block;margin-bottom:4px;font-weight:600;color:var(--color-text,#000)}

/* 04.11.2026 variant C: «Визуальный поиск» — moodboard references as a slowly running strip. */
.case-page[data-case="see-mo"] .ref-strip{position:relative;overflow:hidden;border-radius:24px;background:var(--see-mat);padding:32px 0}
.case-page[data-case="see-mo"] .ref-track{display:flex;width:max-content;animation:ref-run 60s linear infinite}
.case-page[data-case="see-mo"] .ref-dup{display:flex}
.case-page[data-case="see-mo"] .ref-card{flex:none;width:400px;aspect-ratio:16/10.5;margin-right:16px;overflow:hidden;border-radius:10px;background:#000}
.case-page[data-case="see-mo"] .ref-card img{display:block;width:100%;height:100%;object-fit:cover}
.case-page[data-case="see-mo"] .ref-strip:hover .ref-track{animation-play-state:paused}
.case-page[data-case="see-mo"] .ref-zoom{position:absolute;right:16px;bottom:16px;width:auto;height:auto;background:none}
.case-page[data-case="see-mo"] .ref-zoom .case-zoom{position:static}
.case-page[data-case="see-mo"].case-reading-presentation .ref-caption{padding:12px 0 0;font-size:13px;line-height:18px;color:var(--color-muted)}
@keyframes ref-run{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.case-page[data-case="see-mo"] .ref-track{animation:none}}
@media(max-width:809.98px){.case-page[data-case="see-mo"] .ref-card{width:260px}.case-page[data-case="see-mo"] .ref-strip{padding:20px 0;border-radius:18px}}
.case-page[data-case="see-mo"].case-reading-presentation .case-media:has(.ref-strip){background:none;border:0;box-shadow:none;overflow:visible}
.case-page[data-case="see-mo"].case-reading-presentation .case-media .ref-caption{padding:12px 0 0;margin:0;background:none;border:0}
/* 04.11.2026: the strip shows whole moodboard pages, each in its own tall window;
   hovering a card scrolls that page from top to bottom. */
.case-page[data-case="see-mo"] .ref-card{width:300px;aspect-ratio:auto;height:500px;background:#fff;box-shadow:0 0 0 1px #0000000d}
.case-page[data-case="see-mo"] .ref-card img{object-fit:cover;object-position:50% 0;transition:object-position 6s ease-in-out}
.case-page[data-case="see-mo"] .ref-card:hover img{object-position:50% 100%}
.case-page[data-case="see-mo"] .ref-track{animation-duration:90s}
@media(max-width:809.98px){.case-page[data-case="see-mo"] .ref-card{width:200px;height:340px}}
@media(prefers-reduced-motion:reduce){.case-page[data-case="see-mo"] .ref-card img{transition:none}}
/* 04.11.2026: the supplied video has a light grey studio background; lift it to pure white. */
.case-page[data-case="see-mo"] .case-context-preview .case-video{filter:brightness(1.07) contrast(1.06)}
.case-page[data-case="see-mo"] .case-context-preview .case-video-wrap{background:#fff}
/* 04.11.2026: result — title, then three equal paragraphs 16px apart, title set off by 28px; product results live in the orange card. */
.case-page[data-case="see-mo"] .case-outcome-composition>.case-chapter-heading{gap:28px}
.case-page[data-case="see-mo"].case-reading-presentation .case-outcome-composition>.case-chapter-heading>p{font-size:16px;line-height:26px;max-width:none;text-wrap:pretty}
.case-page[data-case="see-mo"] .case-outcome-composition{row-gap:16px}
.case-page[data-case="see-mo"] .case-outcome-story .case-copy-body{gap:16px}
.case-page[data-case="see-mo"].case-reading-presentation .case-outcome-story p{font-size:16px;line-height:26px;margin:0}
/* 04.11.2026: dark theme — item titles in the findings dialog were black on black. */
html[toggle-theme="dark"] body:has(.case-page[data-case="see-mo"]) .case-analysis-dialog .career-dialog-list li strong{color:#fff}

/* 04.11.2026: on laptops (1100–1439 px) the ladder columns are narrow; slightly smaller
   side padding and titles so no word touches the column line (same in every case). */
@media(min-width:1100px) and (max-width:1439.98px){
.case-page[data-case="see-mo"] .fl-cols li{padding-inline:12px}
.case-page[data-case="see-mo"] .fl-pct{left:12px}
.case-page[data-case="see-mo"] .fl-bar{left:12px;right:12px}
.case-page[data-case="see-mo"].case-reading-presentation .fl-cols h4{font-size:21px;line-height:25px}
}
/* 05.11.2026: one «Результат» standard in every case — the page's own rhythm and type:
   title → text 12px, paragraphs 8px, all body text 16/26 (cards included). */
.case-page[data-case="see-mo"].case-reading-presentation #outcome .case-outcome-composition>.case-chapter-heading{gap:12px}
.case-page[data-case="see-mo"].case-reading-presentation #outcome .case-outcome-composition{row-gap:8px}
.case-page[data-case="see-mo"].case-reading-presentation #outcome .case-outcome-story .case-copy-body{gap:8px}
.case-page[data-case="see-mo"].case-reading-presentation #outcome .case-outcome-composition>.case-chapter-heading>p,
.case-page[data-case="see-mo"].case-reading-presentation #outcome .case-outcome-story p,
.case-page[data-case="see-mo"].case-reading-presentation #outcome .case-results p{font-size:16px;line-height:26px}