/* Case study deck (Saturn first). Desktop slides live on a 1728×1117 art board (the Figma frame), scaled
   to the window by cs.js; every size below is in art-board px. Phones get a stacked page (.is-stack). */
.cs-page{--off:#f8f8f8;--ink:#000b22;--lilac:#e3a7ff;background:#130329;color:var(--off)}
/* one fixed gradient filling the viewport (Figma 1471:13524), not stretched down the page */
.cs-page::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(0deg,#304e76 5.416%,#130329 100%);pointer-events:none}
.cs-page .site-foot{position:relative;z-index:2}
.cs-track{position:relative}
.cs-deck{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
.cs-gl{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.cs-board{position:absolute;left:0;top:0;width:1728px;height:1117px;transform-origin:0 0;
  --top:200px;--h:870px;--hud:136px}

/* ---- HUD: mode toggle + chapter outline ---- */
.cs-hud{position:absolute;z-index:4;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.cs-hud > *{pointer-events:auto}
.cs-mode{display:flex;padding:4px;border-radius:40px;background:rgba(248,248,248,.08);border:1px solid rgba(248,248,248,.16)}
.cs-mode button{font:500 20px/1 var(--f-body);color:var(--off);padding:12px 22px;border-radius:40px;opacity:.7;transition:background .25s,color .25s,opacity .25s}
.cs-mode button[aria-checked="true"]{background:var(--off);color:var(--ink);opacity:1}
.cs-mode button:hover{opacity:1}
.cs-outline{display:flex;align-items:center;gap:14px}
.cs-outline button{font:400 28px/1 var(--f-head);color:var(--off);opacity:.2;transition:opacity .35s}
.cs-outline button:hover{opacity:.55}
.cs-outline button.on{opacity:1}
.cs-line{width:48px;height:1px;background:rgba(248,248,248,.35)}

/* ---- slides ---- */
.cs-slide{position:absolute;left:60px;width:1608px;top:var(--top);height:var(--h);visibility:hidden;opacity:0}
.cs-slide.on{visibility:visible;opacity:1}
.cs-fit{position:absolute;left:0;top:50%;width:100%;transform-origin:50% 50%;transform:translateY(-50%) scale(var(--k,1))}
.cs-page h1,.cs-page h2,.cs-page h3{font-weight:inherit}
.cs-pill{display:inline-flex;align-self:flex-start;padding:8px 10px;border-radius:40px;background:var(--ink);font:700 12px/1 var(--f-head);text-transform:uppercase;letter-spacing:.02em}
.cs-head{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.t56{font:600 56px/1.2 var(--f-head)}
.t64{font:600 64px/1.2 var(--f-head)}
.t64.reg{font-weight:400}
.t80{font:400 80px/1.2 var(--f-head)}
.t80 em{font-style:normal;color:var(--lilac)}
.cs-body{font:400 22px/1.5 var(--f-body)}
.cs-body p + p{margin-top:20px}
.cs-body b,.cs-card b{font-weight:700}
.cs-col{display:flex;flex-direction:column;gap:56px;min-width:0}
.cs-col--text{flex:1 0 0}
.cs-w434{flex:1 0 0}
.cs-w647{flex:1 0 0}
.cs-w570{width:570px;flex:none}

/* hero */
.cs-title{font:600 80px/1.3 var(--f-head)}
/* scroll mode opens with this normal-scrolling intro (title, facts, video); slides mode uses the title slide */
.cs-intro{position:relative;overflow:hidden}
.cs-intro-board{position:absolute;left:0;top:0;width:1728px;padding:0 60px 140px;transform-origin:0 0}
.cs-hud--intro{position:relative;margin-bottom:58px;justify-content:flex-end}
.cs-intro .cs-video{margin-top:58px}
.is-slides .cs-intro{display:none}
.is-scroll .cs-hero{display:none}
.cs-lede{margin-top:40px;font:400 24px/1.4 var(--f-body);max-width:1208px}
.cs-meta{display:flex;justify-content:space-between;margin-top:58px}
.cs-meta dt{font:400 16px/1.25 var(--f-body)}
.cs-meta dd{margin-top:6px;font:600 24px/1.25 var(--f-body)}
.cs-video{margin:58px 0 0 8px;width:1600px;height:900px;border-radius:40px;overflow:hidden;background:#0d0726;transform-origin:50% 0}
.cs-video video{display:block;width:100%;height:100%;object-fit:cover}

/* context */
.cs-context .cs-fit{display:flex;align-items:center;gap:58px}
.cs-context .cs-body{font-size:22px;line-height:1.3}
.cs-bell{flex:none;object-fit:cover;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.cs-bell--a{width:448px;height:520px;border-radius:13px}
.cs-bell--b{width:515px;height:434px;border-radius:14px}

/* before */
.cs-before .cs-fit{display:flex;flex-direction:column;gap:58px}
.cs-row{display:flex;gap:120px;align-items:flex-start}
.cs-screens{display:flex;gap:80px;flex:none}
.cs-screens img{width:298px;height:648px;border-radius:32px;object-fit:cover;box-shadow:0 40px 70px -40px rgba(0,0,0,.7)}

/* "what was / wasn't working" rows */
.cs-checks{display:flex;align-items:center;gap:64px;padding:20px 0}
.cs-checks-h{flex:none;width:243px;font:600 32px/1.25 var(--f-body)}
.cs-checks ul{flex:1;display:flex;gap:64px;list-style:none}
.cs-checks li{flex:1 0 0;border-left:3px solid var(--bar);padding-left:30px;font:400 22px/1.5 var(--f-body)}

/* problem */
.cs-problem .cs-fit{display:flex;flex-direction:column;gap:58px}
.cs-problem .cs-head + .cs-body{margin-top:-2px}
.cs-trojan{position:relative;width:1595px;height:426px}
.cs-horse{position:absolute;left:11px;top:3px;width:419px;height:419px}
.cs-horse i{position:absolute;display:block}
.cs-horse img{position:absolute;inset:0;width:100%;height:100%;display:block}
/* a little drawbridge on the horse's front leg drops open and the soldiers pour out of it (cs.js drives the army) */
.cs-hatch{position:absolute;left:303px;top:295px;width:20px;height:50px;border-radius:3px 3px 0 0;background:#27231e}
.cs-bridge{position:absolute;left:315px;top:295px;width:8px;height:50px;border-radius:2px 2px 0 0;transform-origin:100% 100%;
  background:repeating-linear-gradient(0deg,#6c554f 0 8px,#58443f 8px 10px)}
.cs-horse-btn{position:absolute;left:11px;top:3px;width:419px;height:419px;border-radius:30px;cursor:pointer;z-index:2}
.cs-horse-btn:focus-visible{outline:3px solid var(--lilac);outline-offset:4px}
.cs-horse-hint{position:absolute;left:11px;top:400px;width:419px;text-align:center;font:600 15px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;opacity:.65;transition:opacity .4s;pointer-events:none}
.cs-horse-hint.off{opacity:0}
.cs-horse.nudge{animation:cs-nudge 2.6s ease-in-out infinite}
@keyframes cs-nudge{0%,80%,100%{transform:none}86%{transform:rotate(-2deg)}92%{transform:rotate(1.5deg)}}

/* research + lessons cards */
.cs-research .cs-fit,.cs-lessons .cs-fit,.cs-results .cs-fit{display:flex;flex-direction:column;gap:58px}
.cs-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cs-card{display:flex;flex-direction:column;gap:20px;padding:34px 34px 96px 36px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.cs-num{font:700 40px/1 Poppins, var(--f-head);color:var(--lilac)}
.cs-card h3{font:600 32px/1.25 var(--f-body)}
.cs-card p{font:400 22px/1.5 var(--f-body)}
.cs-cards--lessons .cs-card{gap:42px;height:270px}
.cs-cards--lessons h3{font-weight:400}
.cs-cards--lessons p{font-size:21px;color:#fafafa}

/* hunch / build: copy left, 3D phone right */
.cs-hunch .cs-fit,.cs-build .cs-fit{display:flex;align-items:center;gap:58px}
.cs-swap{display:grid}
.cs-swap > *{grid-area:1/1}
.cs-card--hunch{padding:32px 34px 32px 36px}
.cs-card--hunch h3{font:700 28px/1 Poppins, var(--f-head);color:var(--lilac)}
.cs-card--hunch p{font-size:21px;color:#fafafa}
.cs-phone-slot{position:relative;flex:none;width:min(903px, var(--h));height:min(903px, var(--h))}
.cs-flat{display:none}

/* gallery: headline row + a row of phones */
.cs-gallery .cs-fit{display:flex;flex-direction:column;gap:20px}
.cs-top{display:flex;gap:160px;align-items:flex-start}
.cs-top .cs-head{flex:1}
.cs-phones4{position:relative;height:min(757px, calc(var(--h) - 300px));display:flex;justify-content:center;margin:0 -60px}
.cs-phone-slot--row{width:min(757px, calc(var(--h) - 300px));height:100%;margin-right:calc(min(757px, calc(var(--h) - 300px)) * -.457)}
.cs-phone-slot--row:last-child{margin-right:0}

/* results */
.cs-stats{display:flex;gap:58px;align-items:center}
.cs-stats > div{flex:1 0 0;display:flex;flex-direction:column;gap:48px}
.cs-stats h3{font:400 32px/1.25 var(--f-body)}
.cs-stats p{font:400 22px/1.4 var(--f-body);opacity:.8}

/* ---- controls (slide mode), progress, hint ---- */
.cs-ctrl{position:absolute;z-index:5;left:50%;bottom:22px;transform:translateX(-50%);display:none;align-items:center;gap:14px;
  padding:6px 8px;border-radius:40px;background:rgba(7,5,29,.55);border:1px solid rgba(248,248,248,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.is-slides .cs-ctrl{display:flex}
.cs-ctrl button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--off);transition:background .2s}
.cs-ctrl button:hover{background:rgba(248,248,248,.12)}
.cs-ctrl button:disabled{opacity:.3;pointer-events:none}
.cs-ctrl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cs-count{font:600 14px/1 var(--f-body);min-width:52px;text-align:center;font-variant-numeric:tabular-nums}
.cs-keys{font:400 12px/1 var(--f-body);opacity:.5;padding-right:10px}
.cs-progress{position:absolute;z-index:5;left:0;right:0;bottom:0;height:3px;background:rgba(248,248,248,.08)}
.cs-progress i{display:block;height:100%;width:0;background:var(--lilac);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.cs-hint{position:absolute;z-index:5;left:50%;bottom:28px;transform:translateX(-50%);font:500 12px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;opacity:.6;display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .5s}
.cs-hint i{width:1px;height:28px;background:currentColor;animation:cs-hint 1.6s ease-in-out infinite}
@keyframes cs-hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cs-hint.off,.is-slides .cs-hint{opacity:0}
.is-slides .site-foot{display:none}
.is-slides{overflow:hidden}

/* no WebGL: flat phone screens in the slots */
.no-gl .cs-flat{display:block;position:absolute;left:50%;top:50%;height:86%;aspect-ratio:375/812;transform:translate(-50%,-50%) rotate(4deg);border-radius:9% / 4.2%;overflow:hidden;border:10px solid #111;background:#111;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.no-gl .cs-flat > *{display:none;width:100%;height:100%;object-fit:cover}
.no-gl .cs-flat > :first-child{display:grid}
.cs-gray{place-items:center;background:#b9b9bd;color:#4a4a52;font:600 18px/1 var(--f-body)}

/* ---- phones: stacked page ---- */
.is-stack .cs-track{height:auto!important}
.is-stack .cs-deck{position:static;height:auto;overflow:visible}
.is-stack .cs-gl,.is-stack .cs-hud,.is-stack .cs-ctrl,.is-stack .cs-progress,.is-stack .cs-hint{display:none}
.is-stack .cs-board{position:static;width:auto;height:auto;transform:none!important}
.is-stack .cs-slide{position:relative;left:auto;top:auto;width:auto;height:auto;visibility:visible;opacity:1;padding:56px 16px}
.is-stack .cs-intro{height:auto!important;padding:104px 16px 8px}
.is-stack .cs-intro-board{position:static;width:auto;transform:none!important;padding:0!important}
.is-stack .cs-hud--intro{display:none}
.is-stack .cs-fit{position:static;transform:none;display:flex!important;flex-direction:column;align-items:stretch!important;gap:28px!important}
.is-stack .cs-row,.is-stack .cs-top,.is-stack .cs-checks,.is-stack .cs-checks ul,.is-stack .cs-stats{flex-direction:column;align-items:stretch;gap:20px}
.is-stack .cs-col{gap:24px}
.is-stack .cs-title{font-size:44px}
.is-stack .cs-lede{margin-top:16px;font-size:18px;max-width:none}
.is-stack .cs-meta{flex-wrap:wrap;gap:18px 28px;justify-content:flex-start;margin-top:28px}
.is-stack .cs-meta dd{font-size:18px}
.is-stack .cs-video{margin:8px 0 0;width:100%;height:auto;aspect-ratio:16/9;border-radius:20px}
.is-stack .t56,.is-stack .t64,.is-stack .t80{font-size:34px;line-height:1.15}
.is-stack .cs-body,.is-stack .cs-checks li,.is-stack .cs-card p,.is-stack .cs-stats p{font-size:17px}
.is-stack .cs-checks-h{width:auto;font-size:22px}
.is-stack .cs-bell{width:100%!important;height:auto!important}
.is-stack .cs-screens{gap:12px;overflow-x:auto;margin:0 -16px;padding:0 16px 8px}
.is-stack .cs-screens img{width:62vw;height:auto;aspect-ratio:298/648;flex:none;border-radius:20px}
.is-stack .cs-trojan{width:100%;height:auto;aspect-ratio:1595/426;overflow:hidden}
.is-stack .cs-trojan > *{transform-origin:0 0}
.is-stack .cs-cards{grid-template-columns:1fr;gap:14px}
.is-stack .cs-card{padding:22px 20px 28px;gap:12px}
.is-stack .cs-cards--lessons .cs-card{height:auto;gap:14px}
.is-stack .cs-card h3,.is-stack .cs-stats h3{font-size:22px}
.is-stack .cs-num{font-size:28px}
.is-stack .cs-swap{display:flex;flex-direction:column;gap:12px}
.is-stack .cs-swap > *{opacity:1!important;visibility:visible!important;transform:none!important}
.is-stack .cs-phone-slot{width:100%;height:auto}
.is-stack .cs-flat{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:4px 16px 12px;scroll-snap-type:x mandatory}
.is-stack .cs-flat > *{flex:none;width:62vw;aspect-ratio:375/812;border-radius:24px;object-fit:cover;scroll-snap-align:center;display:grid}
.is-stack .cs-phones4{height:auto;margin:0;display:block}
.is-stack .cs-phone-slot--row{display:none}
.is-stack .cs-phone-slot--row:first-child{display:block;margin:0}
.is-stack .cs-phone-slot--row .cs-flat > *{width:100%;aspect-ratio:16/10}
.is-stack [data-a]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.is-stack .in [data-a]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cs-army img,.cs-hint i{animation:none}}
.is-stack .nav{background:rgba(7,5,29,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.is-stack .cs-bridge{transform:rotate(90deg)}
.cs-army{position:absolute;left:323px;top:0;width:1272px;height:426px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.cs-army img{position:absolute;top:284px;left:0;width:29.284px;height:60.908px;animation:cs-bob .5s ease-in-out infinite alternate;will-change:transform}
@keyframes cs-bob{to{margin-top:-3px}}
/* speech bubble pinned above one soldier */
.cs-say{position:absolute;left:0;top:0;padding:12px 18px;border-radius:18px;background:var(--off);color:var(--ink);
  font:500 19px/1.3 var(--f-body);white-space:nowrap;box-shadow:0 14px 30px -14px rgba(0,0,0,.55);will-change:transform,opacity;pointer-events:none}
.cs-say::after{content:"";position:absolute;left:22px;bottom:-6px;width:14px;height:14px;background:inherit;border-radius:0 0 3px 0;transform:rotate(45deg)}
/* site nav only at the very top; after that, the slim case-study bar (Figma 1476:14770) */
.cs-page .nav{transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.cs-compact .nav{transform:translateY(-130%);opacity:0;pointer-events:none}
.cs-bar{position:fixed;z-index:49;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:48px;
  padding:12px 56px 12px 72px;color:var(--off);opacity:0;transform:translateY(-100%);pointer-events:none;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease;
  background:linear-gradient(180deg,rgba(19,3,41,.92),rgba(19,3,41,.6));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cs-compact .cs-bar{opacity:1;transform:none;pointer-events:auto}
.cs-bar .cs-outline{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
@media (max-width:1240px){.cs-bar{padding:10px 32px}.cs-bar .cs-outline button{font-size:22px}.cs-bar .cs-line{width:28px}}
.is-stack .cs-bar{display:none}
.cs-say::before{content:"";position:absolute;left:28px;top:100%;width:2px;height:var(--lift,0px);background:rgba(248,248,248,.55)}
.cs-bar .cs-mode button{font-size:16px;padding:9px 18px}
.cs-army--men{z-index:1}
/* a line of text the procession shoves off to the right */
.cs-pushed{position:absolute;left:0;top:296px;font:400 28px/1.3 var(--f-head);white-space:nowrap;will-change:transform}

/* build slide: live Now-tab prototype (an iframe in a phone frame) + a picker for its states */
.cs-states{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.cs-states-h{font:600 15px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 10px}
.cs-states-row{display:flex;flex-wrap:wrap;gap:8px}
.cs-state{font:500 17px/1 var(--f-body);color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cs-state:hover{background:rgba(255,255,255,.18)}
.cs-state:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cs-state.is-on{background:#fff;color:#1b1f4a;border-color:#fff}
.cs-proto{flex:none;display:flex;flex-direction:column;align-items:center;gap:14px;width:calc(399px * var(--ps, 1))}
.cs-proto-phone{width:399px;height:836px;transform:scale(var(--ps, 1));transform-origin:50% 0;margin-bottom:calc(836px * (var(--ps, 1) - 1));
  border:12px solid #0b0b0f;border-radius:58px;background:#0b0b0f;overflow:hidden;box-shadow:0 0 0 1.5px rgba(255,255,255,.12),0 50px 90px -40px rgba(0,0,0,.85)}
.cs-proto-phone iframe{display:block;width:375px;height:812px;border:0;border-radius:46px;background:#0f1627}
.cs-proto-hint{font:400 15px/1 var(--f-body);color:rgba(255,255,255,.55);margin:0}
.is-stack .cs-states-row{gap:6px}
.is-stack .cs-state{font-size:15px;padding:9px 13px}
.is-stack .cs-proto{width:100%;--ps:var(--ps-stack, .9)}
.is-stack .cs-proto-phone{transform-origin:50% 0}

/* ======== Trovy case study (case_study_trovy.py): a LIGHT page (Figma 1510:103734) — cream to off-white, navy ink, Trovy gold accent.
   --off/--ink are swapped so the shared deck styles (text, Scroll/Slides toggle) flip to dark-on-light. ======== */
.cs-page--trovy{--off:#000b22;--ink:#f8f8f8;--lilac:#f5c75a;--navy:#000b22;--line:rgba(0,11,34,.1);background:#f8f8f8;color:#000b22}
.cs-page--trovy::before{background:linear-gradient(180deg,#fef0d4 0%,#fdf3df 45%,#f8f8f8 100%)}
.cs-page--trovy .cs-bar{background:linear-gradient(180deg,rgba(254,240,212,.94),rgba(254,240,212,.7))}
.cs-page--trovy .cs-mode{background:rgba(0,11,34,.05);border-color:var(--line)}
.cs-page--trovy .cs-line{background:rgba(0,11,34,.25)}
.cs-page--trovy .cs-outline button{opacity:.25}
.cs-page--trovy .cs-outline button:hover{opacity:.55}
.cs-page--trovy .cs-outline button.on{opacity:1}
.cs-page--trovy .cs-ctrl{background:rgba(255,255,255,.75);border-color:var(--line)}
.cs-page--trovy .cs-ctrl button:hover{background:rgba(0,11,34,.08)}
.cs-page--trovy .cs-progress{background:rgba(0,11,34,.08)}
.cs-page--trovy .cs-pill{background:var(--lilac);color:var(--navy)}
.cs-page--trovy .cs-card{background:#fff;border-color:var(--line);box-shadow:0 18px 40px -30px rgba(0,11,34,.35)}
.cs-page--trovy .cs-cards--lessons p{color:inherit;opacity:.8}
.cs-page--trovy.is-stack .nav{background:rgba(254,240,212,.9)}
/* intro: Trovy logo + lede, meta row, then the hero image (its rounded corners are in the PNG) */
.tv-hero-top{display:flex;align-items:center;justify-content:space-between;gap:48px}
.tv-title{margin:0;line-height:0}
.tv-logo{display:inline-flex;align-items:flex-end;gap:7px;padding:12px 0 10px}
.tv-logo img:first-child{width:56px;height:51px}
.tv-logo img:last-child{width:135px;height:46px}
.tv-lede{margin:0;width:549px;flex:none}
.tv-hero-copy .cs-meta{margin-top:64px}
.tv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tv-hero-img{height:900px;border-radius:0;background:none;overflow:visible;margin-top:64px}
.tv-hero-img img{object-fit:contain}
.is-stack .tv-hero-top{flex-direction:column;align-items:flex-start;gap:16px}
.is-stack .tv-lede{width:auto}
.is-stack .tv-logo{padding:0;transform:scale(.7);transform-origin:0 50%}
.is-stack .tv-hero-img{height:auto;aspect-ratio:16/9;margin-top:24px}
.cs-video img{display:block;width:100%;height:100%;object-fit:cover}
/* two-column slides: copy left, picture right */
.cs-home-before .cs-fit,.cs-home-live .cs-fit,.cs-brief .cs-fit,.cs-desktop .cs-fit{display:flex;align-items:center;gap:58px}
.cs-shift .cs-fit,.cs-home-after .cs-fit,.cs-flow .cs-fit,.cs-detail .cs-fit,.cs-process .cs-fit,.cs-takeaways .cs-fit{display:flex;flex-direction:column;gap:48px}
.tv-w434{flex:0 0 434px}.tv-w520{flex:0 0 520px}.tv-w620{flex:0 0 620px}.tv-w780{flex:0 0 780px}
.tv-card{flex:none;width:620px;height:620px;border-radius:40px;object-fit:cover;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.tv-cards3{grid-template-columns:repeat(3,1fr)}
.tv-cards3 .cs-card{padding-bottom:40px}
.tv-shot{flex:1;min-width:0;margin:0}
.tv-shot img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 30px 70px -40px rgba(0,11,34,.45);border:1px solid rgba(0,11,34,.06)}
.tv-shot figcaption{margin-top:16px;font:400 18px/1.3 var(--f-body);opacity:.6}
/* homepage frames: 3 × 2 stills from the scroll story */
.tv-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.tv-frames figure{margin:0}
.tv-frames img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.tv-frames figcaption{margin-top:12px;font:400 18px/1.3 var(--f-body);opacity:.7}
/* the live homepage build in a browser frame */
.tv-browser{flex:1;min-width:0}
.tv-browser-bar{height:44px;display:flex;align-items:center;gap:8px;padding:0 18px;background:#ebe7df;border-radius:16px 16px 0 0}
.tv-browser-bar i{width:12px;height:12px;border-radius:50%;background:rgba(0,11,34,.18)}
.tv-browser-bar span{margin:0 auto;font:400 14px/1 var(--f-body);opacity:.55;transform:translateX(-24px)}
.tv-browser iframe{display:block;width:100%;height:690px;border:0;background:#f9f9fb;border-radius:0 0 16px 16px;box-shadow:0 30px 70px -40px rgba(0,11,34,.45)}
.tv-browser-hint{margin:14px 0 0;text-align:center;font:400 15px/1 var(--f-body);opacity:.55}
.tv-link{font:600 20px/1 var(--f-body);color:#000b22;text-decoration:none;border-bottom:3px solid var(--lilac);align-self:flex-start;padding-bottom:3px}
/* Renovate: five phones with numbered steps */
.tv-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:40px}
.tv-steps img{display:block;width:100%;height:auto;border-radius:28px;box-shadow:0 30px 60px -36px rgba(0,11,34,.45);border:1px solid rgba(0,11,34,.06)}
.tv-steps h3{margin-top:22px;display:flex;align-items:center;gap:10px;font:600 23px/1.25 var(--f-body)}
.tv-steps h3 span{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lilac);color:#000b22;font:700 15px/1 Poppins,var(--f-head)}
.tv-steps p{margin-top:8px;font:400 18px/1.4 var(--f-body);opacity:.75}
.tv-shot--desk img{border-radius:20px}
/* three detail cards with a crop on top */
.tv-details{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tv-details .cs-card{padding:20px 20px 34px;gap:14px}
.tv-details img{display:block;width:100%;height:auto;border-radius:12px;margin-bottom:8px;border:1px solid rgba(0,11,34,.06)}
.tv-details h3{font-size:28px}
.tv-next{opacity:.8}
/* phones */
.is-stack .tv-w434,.is-stack .tv-w520,.is-stack .tv-w620,.is-stack .tv-w780{flex:auto}
.is-stack .tv-card{width:100%;height:auto;border-radius:24px}
.is-stack .tv-cards3,.is-stack .tv-frames,.is-stack .tv-details{grid-template-columns:1fr;gap:16px}
.is-stack .tv-steps{grid-template-columns:1fr 1fr;gap:20px 12px}
.is-stack .tv-steps h3{font-size:18px}
.is-stack .tv-steps p,.is-stack .tv-frames figcaption,.is-stack .tv-shot figcaption{font-size:15px}
.is-stack .tv-browser iframe{height:70vh}

/* ================= v4 scenes (Figma "natalie's new case study so far") =================
   Each scene is a 1728×1021 board of absolutely placed blocks (.ab, Figma coordinates); on phones they flow. */
.cs-v4 .cs-fit{left:-60px;width:1728px}
.cs-scene{position:relative;width:1728px;height:1021px}
.ab{position:absolute;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px);width:calc(var(--w) * 1px)}
.ab[style*="--h"]{height:calc(var(--h) * 1px)}
.tc{text-align:center}
.sh56{font:600 56px/1.2 var(--f-head)}
.sh64{font:600 64px/1.2 var(--f-head)}
.sh96{font:600 112px/1.1 var(--f-head)}
.sb{font:400 28px/1.42 var(--f-body)}
.sb.sm{font-size:22px;margin-top:28px}
.sb + .sb{margin-top:26px}
.sb b{font-weight:700}
.cs-tag{display:inline-block;padding:8px 12px;border-radius:8px;background:rgba(0,11,34,.55);border:1px solid rgba(248,248,248,.12);font:700 16px/1 var(--f-head);text-transform:uppercase;letter-spacing:.04em}
.cs-label{font:700 16px/1 var(--f-head);text-transform:uppercase;letter-spacing:.04em;opacity:.75;margin-bottom:22px}
.cs-inv{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:16px 44px;font:400 22px/1.3 var(--f-body);white-space:nowrap}
.cs-dots{padding-left:1.1em}
.cs-dots li{list-style:disc;margin-bottom:6px}
.cs-dots li::marker{color:rgba(248,248,248,.6)}
.cs-guess{color:inherit;background:rgba(255,214,102,.16);border-bottom:2px dashed #ffd666;border-radius:3px;padding:0 4px}
.cs-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:80px}
.cs-hero .cs-title img,.cs-intro .cs-title img{display:block;height:70px;width:auto}
.cs-hero-top .cs-lede{margin-top:0;max-width:549px;font-size:24px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-satlogo img{height:32px;width:auto;display:block}

/* phones: video or live prototype in a frameless rounded screen */
.cs-ph{width:375px;height:812px;border-radius:44px;overflow:hidden;background:#0d0726;transform:scale(var(--s,1));transform-origin:50% 0;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.1),0 50px 90px -40px rgba(0,0,0,.85)}
.cs-ph video,.cs-ph iframe{display:block;width:375px;height:812px;border:0;object-fit:cover}
.cs-shot{display:block;width:375px;height:812px;border-radius:44px;box-shadow:0 0 0 1.5px rgba(255,255,255,.1),0 50px 90px -40px rgba(0,0,0,.85)}
.cs-proto-tip{margin-top:16px;text-align:center;font:400 17px/1 var(--f-body);opacity:.6}
.cs-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.cs-proto2 .cs-chips{width:560px;margin-left:-92px}
.cs-chip{font:500 16px/1 var(--f-body);color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 16px;cursor:pointer;transition:background .2s,color .2s}
.cs-chip:hover{background:rgba(255,255,255,.2)}
.cs-chip.is-on{background:#fff;color:#1b1f4a;border-color:#fff}
.cs-chip:focus-visible,.cs-stack:focus-visible,.cs-stab:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* 01 intercom: a perspective crawl that recedes away from the camera */
.cs-mega img{width:100%;height:100%;object-fit:contain;object-position:0 100%}
.cs-crawlbox{perspective:560px;perspective-origin:50% 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 78%,transparent 100%)}
.cs-crawl{position:absolute;inset:0;transform-origin:50% 100%;transform:rotateX(24deg)}
.cs-crawl p{position:absolute;left:0;right:0;top:100%;font:400 38px/1.5 var(--f-body);text-align:justify;transform:translateY(-62%)}
.cs-intercom.on .cs-crawl p,.cs-intercom.in .cs-crawl p{animation:cs-crawl 62s linear -14s infinite}
@keyframes cs-crawl{from{transform:translateY(-18%)}to{transform:translateY(calc(-100% - 760px))}}
@media (prefers-reduced-motion:reduce){.cs-intercom .cs-crawl p{animation:none!important;transform:translateY(-62%)}}

/* 02 bell schedules */
.cs-bellimg img{width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}

/* 06/07 annotation lines draw out from the labels */
.cs-lines{position:absolute;left:0;top:0;width:1728px;height:1021px;overflow:visible;pointer-events:none;z-index:2}
.cs-lines path{fill:none;stroke:#f58ec8;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.2,1)}
.cs-lines circle{fill:#f58ec8;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.on .cs-lines path,.in .cs-lines path{stroke-dashoffset:0;transition-delay:calc(var(--i) * .12s + .5s)}
.on .cs-lines circle,.in .cs-lines circle{transform:scale(1);transition-delay:calc(var(--i) * .12s + .4s)}
.on .cs-lines circle.end,.in .cs-lines circle.end{transition-delay:calc(var(--i) * .12s + 1.35s)}
.cs-ann{font:400 20px/1.5 var(--f-body)}
.cs-ann.r{text-align:right}

/* 05 trojan horse */
.cs-v4 .cs-trojan{position:absolute;inset:0;width:auto;height:auto;overflow:hidden}
.cs-v4 .cs-horse{position:absolute;left:655px;top:52px;width:419px;height:419px;will-change:transform}
.cs-v4 .cs-horse-btn{left:655px;top:52px}
.cs-v4 .cs-horse-hint{left:655px;top:486px}
.cs-v4 .cs-army{left:0;top:0;width:1728px;height:560px;overflow:visible}
.cs-v4 .cs-army img{top:376px}

/* 08 sticky stacks */
.cs-sticky{position:absolute;inset:0}
.cs-stacks{position:absolute;left:384px;top:63px;width:959px;height:266px}
.cs-stack{position:absolute;top:0;width:262px;height:266px;cursor:pointer;transition:transform .25s}
.cs-stack:nth-child(1){left:0}.cs-stack:nth-child(2){left:345px}.cs-stack:nth-child(3){left:692px}
.cs-stack:hover{transform:translateY(-6px) rotate(-1deg)}
.cs-stack img{width:100%;height:100%;object-fit:contain}
.cs-sticky-hint{position:absolute;left:0;right:0;top:441px;text-align:center;font:600 18px/1 var(--f-body);text-decoration:underline;text-underline-offset:4px;opacity:.8}
.cs-stabs{position:absolute;left:0;right:0;top:20px;display:flex;justify-content:center;gap:16px;opacity:0;pointer-events:none}
.cs-stab{font:700 17px/1 var(--f-body);color:rgba(255,255,255,.7);background:rgba(255,255,255,.1);border-radius:6px;padding:16px 26px;cursor:pointer;transition:background .2s,color .2s}
.cs-stab[data-set=obs].on{background:#a9dcff;color:#0e1b33}.cs-stab[data-set=ins].on{background:#e4b4ff;color:#2a0d3b}.cs-stab[data-set=hmw].on{background:#ffe9a6;color:#3a2a00}
.cs-notes{position:absolute;left:0;right:0;top:100px;display:flex;justify-content:center;gap:20px;pointer-events:none}
.cs-note{width:250px;height:250px;padding:22px 22px;font:500 20px/1.38 var(--f-body);overflow-wrap:break-word;color:#1e2433;opacity:0;box-shadow:0 18px 30px -18px rgba(0,0,0,.6)}
.cs-notes[data-set=obs] .cs-note{background:#a9dcff}.cs-notes[data-set=ins] .cs-note{background:#e4b4ff}.cs-notes[data-set=hmw] .cs-note{background:#ffe9a6}
.cs-sticky.open .cs-stabs{opacity:1;pointer-events:auto;transition:opacity .4s .2s}
.cs-sticky.open .cs-stacks,.cs-sticky.open .cs-sticky-hint{opacity:0;pointer-events:none;transition:opacity .3s}

/* 09/12 wide images */
.cs-row4 img,.cs-collage img{width:100%;height:100%;object-fit:contain;object-position:50% 0}
.cs-wants h3{font:600 32px/1.2 var(--f-body);margin-bottom:28px}
.cs-wantbox{border-left:1.5px solid rgba(248,248,248,.25);padding-left:52px;height:640px}
.cs-whycol h3{font:700 28px/1.3 var(--f-body);margin-bottom:12px}
.cs-whycol p{font:400 20px/1.5 var(--f-body);opacity:.9}
.cs-whycol{border-left:1.5px solid rgba(248,248,248,.25);padding-left:24px}

/* 13 chart: dark UI, lines draw out to the peak */
.cs-chartbox{width:100%;height:100%;border-radius:24px;background:rgba(5,8,28,.55);border:1px solid rgba(248,248,248,.1);padding:18px 18px 0}
.cs-chart{width:100%;height:100%;overflow:visible;font-family:var(--f-body)}
.cs-chart-grid line{stroke:rgba(248,248,248,.1)}
.cs-chart-grid text,.cs-chart-key text{fill:rgba(248,248,248,.6);font-size:16px}
.cs-chart-key .ttl{fill:rgba(248,248,248,.85);font-weight:600}
.cs-chart-key .k22{fill:#5aa2ff}.cs-chart-key .k21{fill:#ff6b6b}
.cs-chart-l{fill:none;stroke-width:3;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.cs-chart-l--22{stroke:#5aa2ff;filter:drop-shadow(0 0 8px rgba(90,162,255,.55))}
.cs-chart-l--21{stroke:#ff6b6b;stroke-width:2.5}
.on .cs-chart-l,.in .cs-chart-l{stroke-dashoffset:0;transition:stroke-dashoffset 3.2s cubic-bezier(.45,0,.2,1) .5s}
.on .cs-chart-l--21,.in .cs-chart-l--21{transition-duration:2.6s}
.cs-chart-pk{opacity:0;transition:opacity .5s 3.4s}
.cs-chart-pk circle{fill:#fff;stroke:#5aa2ff;stroke-width:3}
.cs-chart-pk text{fill:#fff;font:700 20px/1 var(--f-body)}
.cs-chart-pk--end{transition-delay:3.7s}
.on .cs-chart-pk,.in .cs-chart-pk{opacity:1}
.cs-col3 .sb{font-size:26px}

/* calendar act */
.cs-calimg{width:100%;height:100%;object-fit:contain}
.cs-rules{margin-top:34px;display:flex;flex-direction:column;gap:14px}
.cs-rules div{display:flex;gap:24px;border-top:1px solid rgba(248,248,248,.14);padding-top:14px}
.cs-rules dt{width:250px;flex:none;font:700 20px/1.4 var(--f-body)}
.cs-rules dd{font:400 20px/1.4 var(--f-body);opacity:.85}
.cs-big{margin-top:40px;font:700 96px/1 var(--f-head);color:#7cf0c5}
.cs-big span{display:block;margin-top:10px;font:400 22px/1.3 var(--f-body);color:var(--off)}
.cs-kpis{display:flex;gap:44px;margin-top:40px}
.cs-kpis p{font:400 18px/1.3 var(--f-body);opacity:.9;max-width:180px}
.cs-kpis b{display:block;font:700 48px/1.1 var(--f-head);margin-bottom:6px}
.cs-end{display:flex;gap:16px;justify-content:center}
.cs-endbtn{font:600 20px/1 var(--f-body);padding:18px 28px;border-radius:999px;background:var(--off);color:var(--ink)}
.cs-endbtn--o{background:transparent;color:var(--off);border:1.5px solid rgba(248,248,248,.4)}

/* phones: v4 scenes stack in source order */
.is-stack .cs-v4 .cs-fit{left:0;width:auto}
.is-stack .cs-scene{width:auto;height:auto;display:flex;flex-direction:column;gap:22px}
.is-stack .ab{position:relative;left:auto;top:auto;width:auto!important;height:auto!important;transform:none!important}
.is-stack .sh56,.is-stack .sh64{font-size:32px;line-height:1.18}
.is-stack .sh96{font-size:52px}
.is-stack .sb{font-size:18px}
.is-stack .sb.sm{font-size:16px}
.is-stack .cs-lines,.is-stack .cs-annbox{display:none}
.is-stack .cs-phslot{display:flex;flex-direction:column;align-items:center}
.is-stack .cs-ph{transform:none!important;zoom:var(--ps-stack,.9)}
.is-stack .cs-proto2 .cs-chips{width:auto;margin-left:0}
.is-stack .cs-shot{width:min(375px,100%);height:auto}
.is-stack .cs-mega{height:220px!important}
.is-stack .cs-crawlbox{height:420px!important}
.is-stack .cs-crawl p{font-size:22px}
.is-stack .cs-bellimg{height:auto!important}
.is-stack .cs-bellimg img{height:auto}
.is-stack .cs-inv{grid-template-columns:repeat(2,auto)}
.is-stack .cs-trojanbox{height:auto!important;aspect-ratio:1728/560;overflow:hidden}
.is-stack .cs-trojanbox .cs-trojan{width:1728px;height:560px;transform-origin:0 0;transform:scale(var(--tz,.2))}
.is-stack .cs-stickybox{height:auto!important}
.is-stack .cs-sticky{position:relative;inset:auto}
.is-stack .cs-stacks,.is-stack .cs-stabs,.is-stack .cs-sticky-hint{display:none}
.is-stack .cs-notes{position:static;flex-direction:column;gap:8px;margin-top:14px;pointer-events:auto}
.is-stack .cs-notes::before{content:attr(data-label);font:700 14px/1 var(--f-head);text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:10px 0 4px}
.is-stack .cs-note{width:auto;height:auto;opacity:1}
.is-stack .cs-wantbox{height:auto!important;padding-left:18px}
.is-stack .cs-chartbox{height:auto;padding:10px}
.is-stack .cs-calside,.is-stack .cs-calrow,.is-stack .cs-collage,.is-stack .cs-row4{height:auto!important}
.is-stack .cs-calimg,.is-stack .cs-row4 img,.is-stack .cs-collage img{height:auto}
.is-stack .cs-rules div{flex-direction:column;gap:2px}
.is-stack .cs-rules dt{width:auto}
.is-stack .cs-big{font-size:56px}
.is-stack .cs-kpis{flex-wrap:wrap;gap:20px}
.is-stack .cs-hero-top{flex-direction:column;gap:24px}
.is-stack .cs-hero .cs-title img,.is-stack .cs-intro .cs-title img{height:42px}
/* calendar-act images were cut from slides with a darker backdrop: feather their edges into the page */
.cs-calimg{-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
/* Trovy context slide: the 3D card (js/card3d.js) on its own, no backdrop. The flat PNG only shows if WebGL is unavailable. */
.tv-card3d{position:relative;flex:none;width:620px;height:620px;cursor:pointer;padding:0;border:0;background:none}
.tv-card3d:focus-visible{outline:3px solid var(--lilac);outline-offset:6px;border-radius:24px}
.tv-card3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tv-card3d-flat{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:40px;opacity:0}
.tv-card3d.no-3d .tv-card3d-flat{opacity:1}
.tv-card3d-shadow{position:absolute;left:22%;right:22%;top:68%;height:8%;border-radius:50%;background:rgba(0,11,34,.28);filter:blur(24px);opacity:0;transition:opacity .5s}
.tv-card3d.is-3d .tv-card3d-shadow{opacity:1}
.tv-card3d-hint{position:absolute;left:0;right:0;bottom:30px;text-align:center;font:600 15px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:#000b22;opacity:0;transition:opacity .4s}
.tv-card3d.is-3d .tv-card3d-hint{opacity:.55}
.tv-card3d.spun .tv-card3d-hint{opacity:0}
.is-stack .tv-card3d{width:100%;height:auto;aspect-ratio:1}

/* 09 first attempt: four phone PNGs */
.cs-first4{display:flex;gap:60px;height:100%}
.cs-first4 img{width:323px;height:auto;align-self:flex-start;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.is-stack .cs-firstrow{height:auto!important}
.is-stack .cs-first4{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.is-stack .cs-first4 img{width:100%}
.cs-pitchtxt{display:flex;flex-direction:column;align-items:flex-start;gap:32px;height:100%;justify-content:center}
.cs-pitchtxt .cs-label{margin-bottom:12px}
.is-stack .cs-pitchtxt{gap:20px}

/* calendar act: real screens (stills and screen recordings) */
.cs-shots{display:flex;justify-content:center;align-items:center;gap:var(--g,36px);height:100%;container-type:size}
.cs-shot{display:block;flex:none;height:auto;aspect-ratio:750/1624;width:min(calc((100cqw - (var(--n) - 1) * var(--g,36px)) / var(--n)), calc(100cqh * 750 / 1624));object-fit:cover;background:#151a33;border-radius:28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.cs-calside .cs-shot{border-radius:36px}
.cs-calrow .cs-shot{border-radius:24px}
.is-stack .cs-shots{height:auto;flex-wrap:wrap;gap:12px;container-type:normal}
.is-stack .cs-shot{height:auto;width:calc(50% - 6px);max-width:none;border-radius:18px;aspect-ratio:750/1624}
.is-stack .cs-shots[style*="--n:1"] .cs-shot{width:70%}
.cs-calrow .cs-shots{--g:28px}
.cs-calrow .cs-shots[style*="--n:2"],.cs-calrow .cs-shots[style*="--n:3"]{--g:56px}
.cs-calside .cs-shots{--g:32px}
.cs-calside .cs-shots[style*="--n:1"]{justify-content:center}
.cs-pitchtxt .cs-rules,.cs-pitchtxt .cs-kpis,.cs-pitchtxt .cs-big{margin:0}
/* Trovy: application prototype slide (copy left, live prototype in a phone right — same layout as Saturn's Now tab slide) */
.cs-apply .cs-fit{display:flex;align-items:center;justify-content:space-between;gap:58px;padding-right:160px}
.cs-page--trovy .cs-proto-hint{color:rgba(0,11,34,.55)}
.cs-page--trovy .cs-proto-phone{box-shadow:0 0 0 1.5px rgba(0,11,34,.08),0 50px 90px -40px rgba(0,11,34,.5)}
.is-stack .cs-apply .cs-fit{padding-right:0}
/* Trovy: company logo in the case-study bar (icon + wordmark, same height as Saturn's) */
.tv-barlogo{display:flex;align-items:flex-end;gap:4px}
.tv-barlogo img:first-child{height:30px}
.tv-barlogo img:last-child{height:26px;margin-bottom:1px}
/* Trovy: "My process" slide — three steps left, rounded screenshot right */
.cs-myprocess .cs-fit{display:flex;align-items:center;gap:72px}
.tv-process{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:30px}
.tv-process li{border-left:3px solid var(--lilac);padding-left:24px}
.tv-process p{font:400 21px/1.5 var(--f-body);opacity:.8}
.tv-process .tv-process-k{font:500 14px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;opacity:.5;margin-bottom:4px}
.tv-process h3{font:600 24px/1.3 var(--f-body);margin-bottom:6px}
.tv-shot--process img{border-radius:28px}
/* Trovy: Renovate desktop screen under the headline, sized to the slide height */
.cs-flow .tv-shot--hero{flex:none;align-self:flex-start;height:calc(var(--h) - 130px);aspect-ratio:1600/1111;width:auto;max-width:100%}
.cs-flow .tv-shot--hero img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:28px}
.is-stack .cs-flow .tv-shot--hero{height:auto;width:100%}
.is-stack .cs-flow .tv-shot--hero img{height:auto}
.cs-flow .cs-fit{gap:32px!important}
.tv-tm{font-size:.4em;vertical-align:super;line-height:0;margin-left:2px}
.tv-w1300{max-width:1300px}