.cases-v3 { color:var(--color-ink); }
.cases-v3 h2,.cases-v3 h3,.cases-v3 p,.cases-v3 figure,.cases-v3 dl,.cases-v3 dd { margin:0; }
.cases-heading { margin-bottom:var(--space-48); }
.cases-heading h2 { font-size:var(--type-section); line-height:1.05; font-weight:400; }
.cases-v3 h3 { font-size:var(--type-case-heading); line-height:1.125; font-weight:400; text-wrap:balance; }
.case-primary { display:grid; gap:var(--space-32); padding:var(--space-32) 0; border-block:1px solid var(--color-case-rule); }
.case-primary-story,.case-southern-story { display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-32); min-width:0; }
.case-brand-row { height:48px; display:flex; align-items:center; }
.case-brand { display:block; flex-shrink:0; position:relative; overflow:hidden; }
.case-brand img { position:absolute; max-width:none; object-fit:fill; }
.case-brand--euphoria { width:145.9px; height:22px; background:var(--color-case-euphoria); mask:url('/assets/cases/figma-855/43bd55b337fe8d03b9ec2cd15e61535920ee033a.png') center/100% 100% no-repeat; }
.case-primary-story h3,.case-southern-story h3 { margin-top:var(--space-16); }
.case-intro-copy { font-size:var(--type-body); line-height:1.4; color:var(--color-muted); }
.landing-page .case-intro-copy { font-size:var(--type-case-summary); line-height:1.5; text-wrap:pretty; }
.landing-page .case-intro-copy br { display:none; }
.landing-page .cases-v3 h3 { line-height:1.2; }
/* The Figma line break only fits the desktop column; narrower columns wrap naturally. */
@media (max-width:1399px) { .case-intro-copy br { display:none; } }
.case-primary-story .case-intro-copy,.case-southern-story .case-intro-copy { margin-top:var(--space-16); }
.case-facts { display:flex; flex-wrap:wrap; align-content:start; align-items:start; gap:var(--space-4); width:100%; font-size:var(--text-16); line-height:21px; }
.case-facts>div { display:flex; align-items:baseline; gap:var(--space-4); max-width:100%; padding:3px 7px; border:1px solid var(--color-border); }
/* Keep the definition labels accessible without repeating them in every tag. */
.case-facts dt:not(.case-fact-label) { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.case-facts dd { text-align:left; min-width:0; }
.case-primary-story .case-facts { margin-top:var(--space-32); }
.case-read { display:inline-flex; align-items:center; gap:var(--space-12); align-self:flex-start; padding:0; min-height:44px; border:0; background:none; color:inherit; font:inherit; font-size:var(--text-18); cursor:pointer; }
.cases-v3 .case-read { width:fit-content; max-width:100%; align-self:flex-start; justify-self:start; }
.case-read :is(img,i) { flex:none; width:18px; height:18px; font-size:18px; line-height:1; }
.case-read:focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; }
.case-primary-charts { display:grid; gap:10px; min-width:0; }
.case-graphic { position:relative; min-width:0; height:440px; overflow:hidden; border-radius:4px; isolation:isolate; color:var(--color-paper); }
.case-art { position:absolute; width:100%; height:100%; inset:0; overflow:hidden; }
.case-art [data-round-mark] { transform-box:fill-box; transform-origin:center; scale:var(--case-mark-x,1) var(--case-mark-y,1); }
.case-graph-text { position:absolute; line-height:1.3; font-weight:400; white-space:nowrap; opacity:var(--case-text-opacity,1); }
.case-graph-text--14 { font-size:var(--text-14); }
.case-graph-text--16 { font-size:var(--text-16); }
.case-graph-text--28 { font-size:var(--type-result); line-height:1.2; white-space:normal; }
.case-graph-text--40 { font-size:var(--type-metric); line-height:1.05; }
.case-graphic--252 .case-graph-text--40 { font-size:var(--text-28); }
.case-graph-text.is-right { text-align:right; }
.case-graphic.is-motion-ready [data-graph-part] { clip-path:inset(0 100% 0 0); }
.case-graphic:is(.case-graphic--932,.case-graphic--252).is-motion-ready [data-graph-part] { clip-path:none; }
.case-graphic.is-motion-ready [data-case-unit] { opacity:0; }
/* Own compositing layer while the story plays: repaints of hundreds of animated marks stay inside the chart. */
.case-graphic.is-motion-ready { will-change:transform; }
.case-graphic.is-motion-ready .case-art--units { will-change:transform; }
.case-art [data-case-unit] { transform-box:fill-box; transform-origin:center; }
.case-graphic.is-motion-ready .is-motion-number { opacity:0; }
.case-graphic--1146.is-motion-ready [data-graph-part] { clip-path:inset(100% 0 0 0); }
.case-graphic--252 .case-graph-text--28 { font-size:var(--text-20); }
.case-card-grid { display:grid; gap:0; margin-top:0; }
.case-tile { display:flex; flex-direction:column; gap:var(--space-24); padding:var(--space-20); min-width:0; border:0; border-radius:0; }
.case-tile + .case-tile { border-top:1px solid var(--color-case-rule); }
/* Visual NDA treatment only: source assets and article content are unchanged. */
.case-tile:is([aria-labelledby="dvorets-title"],[aria-labelledby="euphoria-title"]) .case-brand-row { filter:blur(8px); user-select:none; }
.case-tile .case-read { margin-block:-11px; }
.case-southern { display:grid; gap:var(--space-32); margin-top:0; padding-top:var(--space-64); padding-bottom:var(--space-48); border-block:1px solid var(--color-case-rule); }
.case-southern-image { width:100%; height:auto; aspect-ratio:1107/722; object-fit:cover; border-radius:var(--radius-panel); }
.case-southern-visual { overflow:hidden; border-radius:var(--radius-panel); align-self:start; }
.case-southern-mockup { position:relative; aspect-ratio:1554/1012; transition:transform 800ms var(--motion-standard); }
.case-southern-mockup .case-southern-image { display:block; aspect-ratio:1554/1012; border-radius:0; }
.case-southern-screen-plane { position:absolute; left:0; top:0; width:1640px; height:896px; transform-origin:0 0; overflow:hidden; border-radius:8px; background:#2d2822; }
.case-southern-browser { height:26px; display:flex; align-items:center; gap:6px; padding-left:12px; }
.case-southern-browser i { width:8px; height:8px; border-radius:50%; background:#f55050; }
.case-southern-browser i:nth-child(2) { background:#f4ce4f; }
.case-southern-browser i:nth-child(3) { background:#77d65f; }
.case-southern-screen-viewport { position:relative; height:870px; overflow:hidden; }
.case-southern-screen-viewport .case-southern-screen { position:absolute; left:0; top:-63px; width:1640px; max-width:none; height:933px; border-radius:0; }
.cases-v3 .case-metrics { --case-southern-accent:#73451d; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-16); margin:var(--space-48) 0 0; color:var(--case-southern-accent); }
.case-metrics > div { display:grid; gap:var(--space-4); min-width:110px; }
.case-metrics svg { flex:none; width:30px; height:12px; }
.cases-all { display:flex; align-items:flex-start; gap:10px; width:fit-content; max-width:100%; margin:var(--space-48) auto 0; color:var(--color-ink); text-decoration:none; }
.cases-all-icon { flex:none; width:32px; height:32px; background:currentColor; mask:url('/assets/figma-mm2/cases-all-icon.svg') center/contain no-repeat; }
.cases-all-copy { display:grid; padding-top:0; }
.cases-all-title { display:inline-flex; align-items:center; gap:14px; }
.cases-all-title i { font-size:28px; }
.cases-all-note { margin-top:17px; text-align:right; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .case-southern-visual:hover .case-southern-mockup { transform:scale(1.035); }
}
@media (max-width:599px) {
 /* All mobile cases share horizontal separators instead of individual frames. */
 .cases-heading { margin-bottom:var(--space-24); }
 .case-primary,.case-southern { padding:var(--space-20) 0; border-inline:0; border-radius:0; gap:var(--space-24); }
 .case-primary { margin-top:0; }
 .case-card-grid { margin-top:0; gap:0; }
 .case-southern { margin-top:0; padding-bottom:var(--space-20); }
 .case-primary-story .case-facts { margin-top:var(--space-20); }
 .case-primary-charts { gap:var(--space-16); }
 .case-graphic { height:360px; }
 .case-tile { gap:var(--space-20); padding-inline:0; }
 .cases-all { margin-top:var(--space-32); gap:var(--space-8); }
 /* Phone only: the link scales down; desktop keeps the Figma size. */
 .cases-all-icon { width:24px; height:24px; }
 .cases-all-copy { padding-top:0; }
 .cases-all-title { font-size:var(--text-18); gap:var(--space-8); }
 .cases-all-title i { font-size:18px; }
 .cases-all-note { margin-top:10px; font-size:var(--text-14); }
 .cases-v3 .case-metrics { margin-top:var(--space-24); }
}
@media (min-width:600px) {
 .case-primary-charts { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .case-graphic { height:490px; }
 .case-primary-charts .case-graphic { height:528px; }
 .case-graphic--252 .case-graph-text--40 { font-size:var(--type-metric); }
 .case-graphic--252 .case-graph-text--28 { font-size:var(--type-result); }
}
@media (min-width:1100px) {
 .case-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .case-tile { display:grid; grid-row:span 5; grid-template-rows:subgrid; }
 .case-card-grid { grid-template-rows:48px auto auto 490px 22px; row-gap:var(--space-24); padding-block:21px; }
 .case-tile { margin-block:-21px; }
 .case-tile + .case-tile { border-top:0; border-left:1px solid var(--color-case-rule); }
 .case-tile .case-graphic--252 .case-graph-text--40 { font-size:var(--text-28); }
 .case-tile .case-read { margin:0; min-height:22px; }
 .case-tile .case-graph-text--28 { font-size:var(--text-24); }
 .case-southern { grid-template-columns:minmax(0,543fr) minmax(0,1107fr); gap:var(--space-20); }
 .case-southern-story { padding-top:var(--space-64); padding-bottom:var(--space-64); }
}
@media (min-width:1600px) {
 .case-tile .case-graphic--252 .case-graph-text--40 { font-size:var(--type-metric); }
}
@media (min-width:1400px) {
 .case-primary { grid-template-columns:minmax(0,570fr) minmax(0,1050fr); gap:50px; padding-block:60px; min-height:650px; }
 .case-primary-story>.case-read { min-height:24px; font-size:var(--text-20); }
 .cases-heading { margin-bottom:70px; }
 .case-card-grid { margin-top:0; }
 .case-tile .case-graph-text--28 { font-size:var(--type-result); }
 .case-southern { padding-top:83px; padding-bottom:59px; }
 .case-southern-story { padding-top:115px; padding-bottom:115px; }
}
@media (min-width:1100px) {
 .landing-page .case-tile:first-child { padding-left:0; }
 .landing-page .case-tile:last-child { padding-right:0; }
 .landing-page .case-facts { max-width:none; }
 .landing-page .case-tile h3 { align-self:start; }
 .landing-page .case-title-line { display:block; }
 .landing-page .cases-v3 h3 { text-wrap:wrap; }
 .landing-page .case-southern-story { padding-block:0; }
 .landing-page .case-primary-story,.landing-page .case-southern-story { gap:var(--space-40); }
}
@media (min-width:1100px) and (max-width:1399px) {
 .landing-page :is(.case-tile,.case-southern) { --type-case-heading:var(--text-22); }
 .landing-page .case-tile .case-title-line { display:inline; }
 .landing-page .case-tile h3 { text-wrap:balance; }
}