@font-face{font-family:Geist;src:url(../fonts/Geist.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/GeistMono.ttf) format("truetype");font-weight:100 900;font-display:swap}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:Geist,Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}canvas,svg{display:block}.w{max-width:1240px;margin:0 auto;padding:0 40px}
.m{font-family:"Geist Mono",ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ph{opacity:.6}
:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:3px}
nav{position:fixed;top:0;left:0;right:0;z-index:30;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
nav .w{display:flex;justify-content:space-between;align-items:center;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:-.01em}
.links{display:flex;gap:4px;align-items:center;font-size:14px;color:var(--mute)}.links a{padding:8px 12px;border-radius:var(--rb);transition:color .2s,background .2s}.links a:hover{color:var(--fg);background:var(--hov)}
.links .cta{background:var(--fg);color:var(--bg);margin-left:8px}.links .cta:hover{background:var(--fg);color:var(--bg);opacity:.88}
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero .w{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(46px,6.4vw,94px);font-weight:500;letter-spacing:-.05em;line-height:.98;max-width:10.5em}
.hero h1 .mu{color:var(--mute2)}
.lede{font-size:18.5px;line-height:1.55;color:var(--mute);max-width:480px;margin-top:26px}
.btns{display:flex;gap:10px;margin-top:36px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:var(--rb);font-size:14.5px;font-weight:500;transition:transform .3s,background .3s,border-color .3s}
.btn:hover{transform:translateY(-1px)}.b1{background:var(--fg);color:var(--bg)}.b2{border:1px solid var(--line2);background:var(--card)}
.tagline{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px}
section{padding:130px 0;position:relative}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:52px}
.sh h2,.intro h2{font-size:clamp(34px,4vw,56px);font-weight:500;letter-spacing:-.045em;line-height:1.04;max-width:700px}.sh h2 .mu,.intro h2 .mu{color:var(--mute2)}
.intro{display:grid;grid-template-columns:1fr 1.7fr;gap:60px}
.intro p{font-size:19px;line-height:1.6;color:var(--mute);margin-top:24px;max-width:640px}
.caps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--line)}
.caps div{padding:22px 22px 0 0}.caps b{display:block;font-weight:500;font-size:17px;letter-spacing:-.01em;margin-top:10px}.caps span:not(.m){display:block;color:var(--mute);font-size:14px;margin-top:6px;line-height:1.45}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .4s}
.case:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line2)}
.vis{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--line);background:var(--vis)}
.tx{padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.tx .tp{display:flex;justify-content:space-between}.tx h3{font-size:23px;font-weight:500;letter-spacing:-.03em;line-height:1.15}
.tx p{color:var(--mute);font-size:15px;line-height:1.5}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:10px}.tags span{font:11.5px "Geist Mono",monospace;padding:5px 9px;border-radius:var(--rb);border:1px solid var(--line);color:var(--mute)}
.go{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:14px 24px;font-size:14px;font-weight:500}
.go .ar{transition:transform .3s}.case:hover .go .ar{transform:translateX(4px)}
footer{border-top:1px solid var(--line);padding:28px 0}footer .w{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}.rv.in{opacity:1;transform:none}
.back{position:fixed;left:16px;bottom:16px;z-index:40;font:11px "Geist Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:99px;background:var(--card);border:1px solid var(--line2);color:var(--mute);backdrop-filter:blur(8px)}
@media(max-width:960px){.cases{grid-template-columns:1fr}.intro{grid-template-columns:1fr;gap:12px}.caps{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.w{padding:0 22px}.links a:not(.cta){display:none}section{padding:90px 0}.sh{flex-direction:column;align-items:flex-start;gap:14px}.hero{align-items:flex-end;padding-bottom:12vh}.lede{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}:root{--bg:#fbfcfd;--fg:#0a0f1a;--mute:#5d6676;--mute2:#9aa3b2;--line:rgba(10,20,40,.08);--line2:rgba(10,20,40,.15);--card:#fff;--hov:rgba(10,20,40,.04);--acc:#2b62ff;--vis:#f5f7fa;--r:14px;--rb:8px;--sh:0 24px 50px -28px rgba(20,40,90,.28)}
#net{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--bg) 22%,rgba(251,252,253,.75) 42%,rgba(251,252,253,0) 64%),linear-gradient(0deg,var(--bg),transparent 22%)}
.pill{display:inline-flex;gap:8px;align-items:center;padding:6px 12px 6px 8px;border-radius:99px;border:1px solid var(--line2);background:#fff}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--mkg,var(--acc));box-shadow:0 0 0 3px rgba(var(--mkc,43,98,255),.15)}
.hero h1 .ac{color:var(--acc)}
.legend{position:absolute;right:40px;bottom:32px;z-index:2;display:flex;gap:18px}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--mkg,var(--acc))}.legend i.f{background:var(--mkg,var(--acc))}
.mark{width:18px;height:18px}
.vis svg{position:absolute;inset:0;width:100%;height:100%}
.vis .e{stroke:rgba(20,40,90,.16);stroke-width:1}.vis .n{fill:#fff;stroke:rgba(20,40,90,.35);stroke-width:1.2}.vis .n.a{stroke:var(--mkg,var(--acc));fill:var(--mkg,var(--acc))}
.vis .pk{fill:var(--mkg,var(--acc));offset-rotate:0deg}
.case:hover .vis .e.h{stroke:var(--mkg,var(--acc));stroke-width:1.4}
@media(max-width:720px){.legend{display:none}.hero::after{background:linear-gradient(0deg,var(--bg) 40%,rgba(251,252,253,.6) 62%,transparent)}}
html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html:not(.js) .rv{opacity:1;transform:none}
::selection{background:rgba(var(--mkc,43,98,255),.16)}
nav{transition:transform .5s cubic-bezier(.2,.7,.2,1)}nav.hide{transform:translateY(-100%)}
.idx{color:var(--acc)}
.intro>.m,.about>.m{align-self:start}.sec-l{display:flex;align-items:center;gap:10px}.sec-l::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--mkg,var(--acc));flex:none}
/* approach: caps become a route that draws in */
.caps{border-top:0;position:relative}
.caps::before,.caps::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line2)}
.caps::after{background:linear-gradient(90deg,var(--mkg,var(--acc)),rgba(var(--mkc,43,98,255),.25));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s cubic-bezier(.6,0,.2,1) .3s}
.in .caps::after,.rline::after{transform:none}
.caps div{position:relative;padding-top:28px}
.caps div::before{content:"";position:absolute;left:0;top:-4.5px;width:8px;height:8px;border-radius:50%;background:#fff;border:1.5px solid var(--line2);transition:border-color .4s,box-shadow .4s,background .4s;transition-delay:calc(.35s + var(--k)*.38s)}
.in .caps div::before{border-color:var(--mkg,var(--acc));background:var(--mkg,var(--acc));box-shadow:0 0 0 4px rgba(var(--mkc,43,98,255),.14)}
.caps .m{color:var(--acc)}
/* cards: mini graph draws itself in */
.case .vis .e{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1),stroke .3s,stroke-width .3s;transition-delay:calc(var(--d,0ms) + var(--j,0)*40ms + .15s),0s,0s}
.case.in .vis .e{stroke-dashoffset:0}
.case .vis .n{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--d,0ms) + var(--j,0)*45ms)}
.case.in .vis .n{transform:none}
.case .vis .pk{opacity:0;transition:opacity .5s 1.4s}.case.in .vis .pk{opacity:1}
.vis .vl{position:absolute;left:14px;top:12px;z-index:2}
.vis .vr{position:absolute;right:14px;top:12px;z-index:2;color:var(--acc)}
.cases .case:focus-visible{outline-offset:4px}
/* about */
.about{display:grid;grid-template-columns:1fr 1.7fr;gap:60px;border-top:1px solid var(--line);padding-top:44px}
.about .big{font-size:clamp(24px,2.4vw,34px);line-height:1.3;letter-spacing:-.025em;font-weight:450}.about .big .mu{color:var(--mute2)}
.route{margin-top:56px;position:relative}
.rline{position:relative;height:1px;background:var(--line2)}
.rline::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--mkc,43,98,255),.3),var(--mkg,var(--acc)));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s cubic-bezier(.6,0,.2,1) .2s}
.in .rline::after{transform:none}
.route .lab{display:grid;grid-template-columns:repeat(4,1fr)}
.route .lab div{position:relative;padding:26px 16px 0 0}
.route .lab div::before{content:"";position:absolute;left:0;top:-4.5px;width:8px;height:8px;border-radius:50%;background:#fff;border:1.5px solid var(--line2);transition:border-color .4s,background .4s,box-shadow .4s;transition-delay:calc(.3s + var(--k)*.42s)}
.in .route .lab div::before{border-color:var(--mkg,var(--acc))}
.in .route .lab div:last-child::before{background:var(--mkg,var(--acc));box-shadow:0 0 0 4px rgba(var(--mkc,43,98,255),.15)}
.route .lab b{display:block;font-weight:500;font-size:16px;margin-top:8px;letter-spacing:-.01em}.route .lab span:not(.m){display:block;color:var(--mute);font-size:14px;margin-top:4px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.cols div{border-top:1px solid var(--line);padding-top:18px}.cols li{list-style:none;font-size:15px;padding:6px 0;color:var(--mute)}
/* contact */
.contact{padding:140px 0 70px;overflow:hidden}
.contact .cv{position:absolute;inset:0;width:100%;height:100%;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%);mask-image:linear-gradient(90deg,transparent 30%,#000 75%)}
.contact{isolation:isolate}
.status{display:inline-flex;gap:10px;align-items:center;padding:7px 13px 7px 10px;border-radius:99px;border:1px solid var(--line2);background:#fff}
.status i{position:relative;width:8px;height:8px;border-radius:50%;background:#16a34a}.status i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #16a34a;animation:ping 2s infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}
.big-link{display:inline-block;font-size:clamp(56px,10vw,160px);font-weight:500;letter-spacing:-.06em;line-height:.95;margin-top:30px;position:relative}
.big-link .ac{color:var(--acc)}
.big-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--mkg,var(--acc));transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.6,0,.2,1)}
.big-link:hover::after{transform:none}
.contact .btns{margin-top:44px}
.endpoint{display:grid;grid-template-columns:repeat(3,1fr);margin-top:80px;border-top:1px solid var(--line)}
.endpoint div{padding:18px 20px 0 0}.endpoint b{display:block;font-weight:500;margin-top:8px;font-size:15px}
footer a:hover{color:var(--fg)}
/* page transition */
.pt{position:fixed;inset:0;z-index:100;pointer-events:none;display:none}
.js .pt{display:block;background:var(--bg)}
.pt.run{background:transparent}.pt.off{display:none}
.pt canvas{position:absolute;inset:0;width:100%;height:100%}
.pt .lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:10px;align-items:center;color:var(--fg);opacity:0;transition:opacity .25s}
.pt .lbl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mkg,var(--acc));box-shadow:0 0 0 4px rgba(var(--mkc,43,98,255),.15)}
.pt.show .lbl{opacity:1}
/* progress */
.prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;pointer-events:none}
.prog i{position:absolute;left:0;top:0;height:100%;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,rgba(var(--mkc,43,98,255),0),var(--mkg,var(--acc)))}
.prog i::after{content:"";position:absolute;right:-3px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--mkg,var(--acc));box-shadow:0 0 0 3px rgba(var(--mkc,43,98,255),.18)}
/* case study */
.crumb{display:flex;gap:12px;align-items:center;margin-bottom:26px}.crumb a{color:var(--acc)}.crumb a:hover{text-decoration:underline}
.cs .hero{min-height:88vh;min-height:88svh}
.cs .hero h1{font-size:clamp(44px,5.6vw,84px)}
.overview{display:grid;grid-template-columns:repeat(4,1fr);margin-top:52px;position:relative;max-width:760px}
.overview::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--mkg,var(--acc)),var(--line2) 60%)}
.overview div{position:relative;padding:22px 18px 0 0}.overview div::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:#fff;border:1.5px solid var(--mkg,var(--acc))}
.overview b{display:block;font-weight:500;font-size:16px;margin-top:8px;letter-spacing:-.01em}
.cover{padding:0 0 40px}
.frame{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--vis);padding:clamp(16px,3vw,44px);overflow:hidden}
.frame .cap{position:absolute;left:18px;bottom:14px;z-index:3;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);padding:6px 10px;border-radius:99px;border:1px solid var(--line)}
.frame .tick{position:absolute;width:10px;height:10px;border-color:var(--mkg,var(--acc));border-style:solid;opacity:.5}
.frame .tick.a{left:10px;top:10px;border-width:1px 0 0 1px}.frame .tick.b{right:10px;top:10px;border-width:1px 1px 0 0}.frame .tick.c{right:10px;bottom:10px;border-width:0 1px 1px 0}.frame .tick.d{left:10px;bottom:10px;border-width:0 0 1px 1px}
.chap{display:grid;grid-template-columns:260px 1fr;gap:60px;align-items:start}
.chap .side{position:sticky;top:110px;display:flex;flex-direction:column;gap:12px}
.chap .body p{font-size:19px;line-height:1.65;color:#3a4252;max-width:680px}.chap .body p+p{margin-top:20px}
.h2{font-size:clamp(34px,4vw,56px);font-weight:500;letter-spacing:-.045em;line-height:1.04;margin-bottom:32px}.h2 .mu{color:var(--mute2)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.cd{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--card);position:relative}
.cd h4{font-size:19px;font-weight:500;letter-spacing:-.02em;margin:14px 0 8px}.cd p{font-size:15px!important;color:var(--mute)!important;line-height:1.5!important}
.cd .m{display:flex;align-items:center;gap:8px}.cd .m::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--mkg,var(--acc)))}
.quote{font-size:clamp(28px,3.2vw,46px);line-height:1.18;letter-spacing:-.035em;font-weight:450;max-width:920px}.quote .mu{color:var(--mute2)}
.steps{position:relative;margin-top:10px}
.steps .rail{position:absolute;left:19.5px;top:10px;bottom:56px;width:1px;background:var(--line2)}
.steps .rail i{position:absolute;left:0;top:0;width:1px;height:calc(var(--sp,0)*100%);background:var(--mkg,var(--acc))}
.steps .rail b{position:absolute;left:-3px;top:calc(var(--sp,0)*100%);width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--mkg,var(--acc));box-shadow:0 0 0 4px rgba(var(--mkc,43,98,255),.16),0 0 14px 2px rgba(var(--mkc,43,98,255),.35)}
.step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:28px;padding:0 0 56px}
.step .dot{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:var(--bg);display:grid;place-items:center;font:500 11px "Geist Mono",monospace;color:var(--mute);transition:background .5s,color .5s,border-color .5s,box-shadow .5s;position:relative;z-index:1}
.step.on .dot{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:0 0 0 5px rgba(var(--mkc,43,98,255),.12)}
.step h4{font-size:24px;font-weight:500;letter-spacing:-.03em;margin:6px 0 10px}.step p{font-size:16.5px!important;color:var(--mute)!important}
.screens{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.scr{position:relative;margin:0;border:1px solid var(--line);border-radius:18px;background:var(--vis);overflow:hidden;padding:clamp(14px,2.4vw,32px);display:flex;align-items:center;justify-content:center}
.scr.s7{grid-column:span 7}.scr.s5{grid-column:span 5}.scr.s12{grid-column:span 12}
.scr figcaption{position:absolute;left:16px;bottom:14px;z-index:3;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);padding:6px 10px;border-radius:99px;border:1px solid var(--line)}
.scr>.app{width:100%;transform:translateY(var(--py,0px))}
.dec{display:grid;gap:0;margin-top:40px;border-top:1px solid var(--line)}
.dec div{display:grid;grid-template-columns:60px 1fr auto;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dec b{font-weight:500;font-size:19px;letter-spacing:-.02em}.dec p{font-size:15.5px!important;color:var(--mute)!important;margin-top:6px!important}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.metric{border-radius:var(--r);padding:26px 24px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.metric b{display:block;font-size:clamp(38px,3.6vw,54px);font-weight:500;letter-spacing:-.05em;margin:34px 0 8px;line-height:1;color:var(--mute2)}
.metric span:not(.m){color:var(--mute);font-size:14.5px;line-height:1.45;display:block}
.metric svg{position:absolute;right:16px;top:18px;width:64px;height:24px}
.metric svg path{fill:none;stroke:var(--mkg,var(--acc));stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1) .3s}
.metric.in svg path{stroke-dashoffset:0}.metric svg circle{fill:var(--mkg,var(--acc))}
.note{margin-top:22px}
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:40px}
.pn a{position:relative;padding:56px 40px 64px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:18px}
.pn a+a{border-left:1px solid var(--line);text-align:right;align-items:flex-end}
.pn a::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--ox,50%) 100%,rgba(var(--mkc,43,98,255),.08),transparent 70%),var(--vis);transform:scaleY(0);transform-origin:50% 100%;transition:transform .7s cubic-bezier(.6,0,.2,1)}
.pn a:hover::before{transform:none}
.pn h3{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.045em;line-height:1}
.pn .ar{display:inline-block;transition:transform .5s}.pn a:hover .ar.l{transform:translateX(-8px)}.pn a:hover .ar.r{transform:translateX(8px)}
/* app mock */
.app{border-radius:12px;background:#fff;border:1px solid var(--line2);box-shadow:0 30px 60px -30px rgba(20,40,90,.3);overflow:hidden;font-family:"Geist Mono",monospace;font-size:10px;color:var(--mute)}
.app .bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--line)}
.app .bar i{width:7px;height:7px;border-radius:50%;background:rgba(10,20,40,.12)}.app .bar span{margin-left:10px;letter-spacing:.04em}.app .bar em{margin-left:auto;font-style:normal;color:var(--acc)}
.app .bd{display:grid;grid-template-columns:120px 1fr 170px;min-height:0}
.app.nr .bd{grid-template-columns:120px 1fr}.app.np .bd{grid-template-columns:1fr}
.app .sd{border-right:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:7px}
.app .sd i{display:block;height:7px;border-radius:3px;background:rgba(10,20,40,.07)}.app .sd i.on{background:rgba(var(--mkc,43,98,255),.25)}
.app .mn{position:relative;background:var(--vis);min-height:220px}
.app .mn svg{position:absolute;inset:0;width:100%;height:100%}
.app .ip{border-left:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:8px}
.app .ip .r{display:flex;justify-content:space-between}.app .ip .r b{font-weight:400;color:var(--fg)}
.app .chip{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;border-radius:99px;border:1px solid rgba(var(--mkc,43,98,255),.3);color:var(--acc);align-self:flex-start}
.app .chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mkg,var(--acc))}
.app .bl{height:6px;border-radius:3px;background:rgba(10,20,40,.07)}
.app .tb{padding:12px 16px 18px}.scr .app .mn{min-height:300px}.cover .app .mn{min-height:clamp(300px,36vw,500px)}.app .tr{display:grid;grid-template-columns:10px 1.5fr 1fr .9fr 52px;white-space:nowrap;gap:10px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line)}
.app .tr.hd{color:var(--mute2)}.app .tr.sel{background:rgba(var(--mkc,43,98,255),.06);border-radius:6px;border-bottom-color:transparent;color:var(--fg)}
.app .tr .s{width:7px;height:7px;border-radius:50%;background:#16a34a}.app .tr .s.warn{background:#f59e0b}.app .tr .s.x{background:var(--mkg,var(--acc))}
.app .tr .g{height:4px;border-radius:2px;background:rgba(10,20,40,.07);position:relative;overflow:hidden}.app .tr .g::after{content:"";position:absolute;inset:0;width:var(--v);background:var(--mkg,var(--acc));opacity:.6}
.app .sys{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px}
.app .tile{border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:96px;background:#fff}
.app .btnm{align-self:flex-start;padding:6px 10px;border-radius:6px;background:var(--fg);color:#fff}.app .btnm.o{background:#fff;color:var(--fg);border:1px solid var(--line2)}
.app .ramp{display:flex;height:16px;border-radius:4px;overflow:hidden}.app .ramp i{flex:1}
@media(max-width:960px){.about,.chap{grid-template-columns:1fr;gap:24px}.chap .side{position:static;flex-direction:row;justify-content:space-between}.metrics{grid-template-columns:1fr 1fr}.overview{grid-template-columns:1fr 1fr;row-gap:28px}.cards3{grid-template-columns:1fr}.scr.s7,.scr.s5{grid-column:span 12}.app .bd{grid-template-columns:90px 1fr}.app .ip{display:none}.app .sys{grid-template-columns:1fr 1fr}.endpoint{grid-template-columns:1fr}.route .lab{grid-template-columns:1fr 1fr;row-gap:20px}}
@media(max-width:720px){.cols{grid-template-columns:1fr}.pn{grid-template-columns:1fr}.pn a+a{border-left:0;border-top:1px solid var(--line);text-align:left;align-items:flex-start}.pn a{padding:40px 22px}.app .bd{grid-template-columns:1fr}.app .sd{display:none}.dec div{grid-template-columns:40px 1fr}.dec div .m:last-child{display:none}.metrics{grid-template-columns:1fr}.contact{padding:100px 0 50px}}
@media(prefers-reduced-motion:reduce){.case .vis .e,.rline::after,.metric svg path{stroke-dashoffset:0}.case .vis .n{transform:none}.case .vis .pk{opacity:1}.caps::after,.rline::after{transform:none}.pt{display:none!important}}

/* ---- header: Portfolio, contact icon, LinkedIn icon ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.links a.pf{height:40px;padding:0 18px;display:inline-flex;align-items:center;border-radius:99px;color:var(--fg);font-weight:500;border:1px solid var(--line2);background:#fff;margin-right:0;transition:color .2s,border-color .2s,background .2s,transform .2s}
.links a.lk{color:var(--fg)}.links a.lk .xa{display:inline-block;margin-left:3px;font-size:12px;color:var(--mute);transition:transform .25s,color .2s}.links a.lk:hover .xa{transform:translate(2px,-2px);color:var(--acc)}
.links a.ic{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%;color:var(--fg);border:1px solid var(--line2);background:#fff;margin-left:6px;transition:color .2s,border-color .2s,background .2s,transform .2s}
.links a.pf:hover,.links a.ic:hover{color:var(--acc);border-color:var(--mkg,var(--acc));background:#fff;transform:translateY(-1px)}
.links a:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:2px}
@media(max-width:720px){.links a.pf{display:inline-flex;height:38px;padding:0 14px}.links a.ic{display:grid;width:38px;height:38px}}
/* ---- contact modal ---- */
html.cm-on{overflow:hidden}
.cm{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.cm[hidden]{display:none}
.cm-bg{position:absolute;inset:0;background:rgba(15,22,34,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .22s}
.cm-p{position:relative;width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:18px;padding:38px 38px 32px;box-shadow:0 30px 80px -20px rgba(15,22,34,.35);opacity:0;transform:translateY(12px) scale(.985);transition:opacity .22s,transform .3s cubic-bezier(.2,.7,.2,1)}
.cm.on .cm-bg,.cm.on .cm-p{opacity:1}.cm.on .cm-p{transform:none}
.cm-x{position:absolute;top:16px;right:16px;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--line2);background:#fff;display:grid;place-items:center;color:var(--fg);cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .2s}
.cm-x:hover{color:#1c79ba;border-color:#1c79ba;background:#fff;transform:translateY(-1px)}.cm-x:focus{outline:none}.cm-x:focus-visible{outline:2px solid #1c79ba;outline-offset:2px}
@media(max-width:720px){.cm-x{width:38px;height:38px}}
.cm h2{font-size:30px;font-weight:500;letter-spacing:-.04em;line-height:1.1;padding-right:40px}
.cm-s{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--fg)}
.cm-f{display:grid;gap:16px;margin-top:26px}
.cm-f[hidden]{display:none}
.cm-f label{display:grid;gap:7px;font-size:14px;font-weight:500}
.cm-f input:not(.hp),.cm-f textarea{font:inherit;font-weight:400;font-size:15.5px;color:var(--fg);background:#fff;border:1px solid var(--line2);border-radius:10px;padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s}
.cm-f textarea{resize:vertical;min-height:120px;line-height:1.5}
.cm-f input:hover,.cm-f textarea:hover{border-color:#b7bfcc}
.cm-f input:focus,.cm-f textarea:focus{outline:0;border-color:#0569c0;box-shadow:0 0 0 3px rgba(5,105,192,.14)}
.cm-f .bad input,.cm-f .bad textarea{border-color:#c2410c}
.cm-f .er{font-style:normal;font-weight:400;font-size:13px;color:#b42318}.cm-f .er:empty{display:none}
.cm-f .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cm-a{margin-top:4px}
/* t249: one shared button (About me bubble, Send message, Close) */
.ui-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px 10px 16px;border:0;border-radius:9px;background:#111317;color:#fff;font:inherit;font-size:14px;font-weight:600;letter-spacing:-.005em;line-height:1;text-decoration:none;cursor:pointer;transition:background .25s,transform .25s}
.ui-btn svg{width:15px;height:15px;flex:none;transition:transform .25s}
.ui-btn:hover{background:#0569c0;color:#fff}.ui-btn:hover svg{transform:translateX(2px)}
.ui-btn:active{background:#04589f}
.ui-btn:focus{outline:none}.ui-btn:focus-visible{outline:2px solid #0569c0;outline-offset:3px}
.ui-btn:disabled{opacity:.6;cursor:default;background:#111317}.ui-btn:disabled svg{transform:none}
.cm-st{font-size:14.5px;line-height:1.5;color:var(--fg)}.cm-st:empty{display:none}.cm-st.warn{color:#9a3412}.cm-st a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.cm-done{margin-top:24px}.cm-done h3{font-size:22px;font-weight:500;letter-spacing:-.03em;outline:0}.cm-done p{margin:8px 0 22px;font-size:15.5px}
@media(max-width:560px){.cm-p{padding:30px 22px 24px;border-radius:16px}.cm h2{font-size:26px}}

.caps b{margin-top:0}

/* ===== Case Study 01 — real screenshots ===== */
.cs-real .hero{min-height:80vh;min-height:80svh}
.cs-real .hero h1 .sub{display:block;font-size:.46em;letter-spacing:-.03em;line-height:1.15;margin-top:.35em}
.overview.wide{max-width:900px;grid-template-columns:1fr .7fr 1.5fr 1.2fr}
.frame.real{padding:clamp(14px,2.6vw,40px);background:radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--vis) 70%)}
.frame.real::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(20,40,90,.09) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%);pointer-events:none}
.shot{position:relative;margin:0;border-radius:12px;background:#fff;border:1px solid var(--line2);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 30px 60px -34px rgba(20,40,90,.35),0 2px 6px -2px rgba(20,40,90,.08);overflow:hidden;z-index:1}
.shot .bb{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--line);background:#fff;font:400 10px "Geist Mono",monospace;color:var(--mute2);letter-spacing:.04em}
.shot .bb i{width:7px;height:7px;border-radius:50%;background:rgba(10,20,40,.12)}.shot .bb i:first-child{background:rgba(var(--mkc,43,98,255),.55)}.shot .bb em{font-style:normal;margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot .cr{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in;position:relative;overflow:hidden;aspect-ratio:var(--ar)}
.shot .cr img{display:block;width:100%;height:auto;transform:translate3d(0,var(--sy,0px),0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.shot.scrub .cr img{transition:none;will-change:transform}
.shot .zm{position:absolute;right:12px;bottom:12px;padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid var(--line);color:var(--acc);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.shot .cr:hover .zm,.shot .cr:focus-visible .zm{opacity:1;transform:none}
.shot .cr:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:-2px}
.shot .sb{position:absolute;right:5px;top:38px;bottom:8px;width:2px;border-radius:2px;background:rgba(10,20,40,.06);z-index:2}
.shot .sb i{position:absolute;left:0;width:2px;height:22%;border-radius:2px;background:var(--mkg,var(--acc));top:calc(var(--s,0)*78%)}
.hero-shot .cr{max-height:min(74vh,760px);aspect-ratio:auto}
.hero-shot .cr img{min-height:0}
.flow{background:#fff}.flow .shot.bare{box-shadow:none;border:0;border-radius:6px}
.fcap{display:flex;gap:14px;margin-top:16px;color:var(--mute)}.fcap span{color:var(--acc)}
.gal{display:grid;gap:22px;margin-top:40px}.g3{grid-template-columns:repeat(3,1fr)}
.th{box-shadow:0 18px 40px -30px rgba(20,40,90,.35)}
.th .cr img,.fill .cr img{transform:none}
.gal .shot,.si .shot,.bento .shot{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .4s}
.gal>div:hover .shot,.si:hover .shot,.bento>div:hover .shot{transform:translateY(-3px);border-color:rgba(var(--mkc,43,98,255),.35);box-shadow:0 30px 60px -30px rgba(20,40,90,.4)}
.gc{display:flex;gap:10px;margin-top:12px;color:var(--mute)}.gc b{font-weight:400;color:var(--acc)}
.feat{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px);align-items:center;padding:30px 0 70px}
.feat.flip{grid-template-columns:7fr 5fr}.feat.flip .ft{order:2}
.feat h3{font-size:clamp(26px,2.5vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:14px 0 18px}
.feat p,.refl p,.sys2 p{font-size:17px;line-height:1.65;color:#3a4252}.feat p+p,.refl p+p,.sys2 p+p{margin-top:16px;color:var(--mute)}
.feat .fi .frame{padding:clamp(14px,2.2vw,34px)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(170px,17vw,250px);gap:20px;margin-top:30px}
.bento>div{min-height:0;display:flex}.bento .b0{grid-column:span 2;grid-row:span 2}.bento .b5,.bento .b6{grid-column:span 2}
.bento .shot{flex:1;display:flex;flex-direction:column;min-height:0}.bento .shot .cr{flex:1;aspect-ratio:auto;min-height:0}
.dec a.m{color:var(--acc);white-space:nowrap}.dec a.m:hover{text-decoration:underline}
.sys2{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,6vw,90px);align-items:end;border-top:1px solid var(--line);padding-top:44px}
.strip-w{margin-top:48px;margin-right:calc(50% - 50vw);position:relative}
.strip{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 40px 30px 2px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.strip::-webkit-scrollbar{display:none}.strip:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:4px;border-radius:8px}
.si{flex:0 0 clamp(240px,25vw,360px);scroll-snap-align:start}
.sctl{display:flex;align-items:center;gap:16px;padding-right:max(24px,calc(50vw - 50% + 0px));max-width:calc(100% - (50vw - 50%))}
.sctl .m b{font-weight:400;color:var(--acc)}
.sbar{flex:1;height:1px;background:var(--line2);position:relative}.sbar i{position:absolute;left:0;top:-.5px;height:2px;width:calc(var(--sx,0)*100%);background:var(--mkg,var(--acc));min-width:24px}
.sbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:#fff;color:var(--fg);cursor:pointer;transition:border-color .3s,color .3s,transform .3s}.sbtn:hover{border-color:var(--mkg,var(--acc));color:var(--acc)}.sbtn:active{transform:scale(.94)}
.oc b{font-size:clamp(20px,1.7vw,24px)!important;letter-spacing:-.025em!important;line-height:1.2!important;color:var(--fg)!important;margin:30px 0 10px!important}
.oc svg{width:64px}.oc svg circle{fill:var(--mkg,var(--acc))}.oc svg circle.o{fill:#fff;stroke:var(--mkg,var(--acc));stroke-width:1.2}
.refl{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,6vw,90px);align-items:center;margin-top:70px}
.refl h3{font-size:clamp(26px,2.5vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:14px 0 18px}
.refl .frame{max-width:460px}
.pn .pm{color:var(--mute)}
/* home card thumbnail */
.vis.has-shot .mini{position:absolute;left:12%;right:12%;top:16%;bottom:-2%;border-radius:10px 10px 0 0;background:#fff;border:1px solid var(--line2);border-bottom:0;box-shadow:0 26px 50px -24px rgba(20,40,90,.35);overflow:hidden;z-index:1;transform:translateY(14px);opacity:0;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .7s;transition-delay:calc(var(--d,0ms) + .35s)}
.case.in .vis.has-shot .mini{transform:none;opacity:1}
.case:hover .vis.has-shot .mini{transform:translateY(-5px)}
.vis.has-shot .mini .mb{height:18px;display:flex;gap:4px;align-items:center;padding:0 8px;border-bottom:1px solid var(--line)}.vis.has-shot .mini .mb i{width:5px;height:5px;border-radius:50%;background:rgba(10,20,40,.14)}.vis.has-shot .mini .mb i:first-child{background:rgba(var(--mkc,43,98,255),.6)}
.vis.has-shot .mini img{display:block;width:100%;height:auto}
.vis.has-shot svg{opacity:.75}
/* lightbox */
.lb{position:fixed;inset:0;z-index:120;background:rgba(251,252,253,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;opacity:0;transition:opacity .3s}
.lb[hidden]{display:none}.lb.on{opacity:1}
.lb-top{display:flex;align-items:center;gap:18px;padding:16px 24px;border-bottom:1px solid var(--line)}
.lb-c{color:var(--fg);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-n{color:var(--acc)}
.lb-z,.lb-x,.lb-p,.lb-q{border:1px solid var(--line2);background:#fff;border-radius:99px;cursor:pointer;color:var(--fg);transition:border-color .3s,color .3s}
.lb-z{padding:7px 12px}.lb-x{width:36px;height:36px}
.lb-z:hover,.lb-x:hover,.lb-p:hover,.lb-q:hover{border-color:var(--mkg,var(--acc));color:var(--acc)}
.lb-s{flex:1;overflow:auto;padding:28px clamp(16px,6vw,110px) 60px;overscroll-behavior:contain}
.lb-s img{display:block;margin:0 auto;max-width:min(100%,1320px);height:auto;border-radius:10px;border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(20,40,90,.4);background:#fff;cursor:zoom-in;transform:scale(.985);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.lb.on .lb-s img{transform:none}
.lb.zoom .lb-s img{max-width:none;cursor:zoom-out}
.lb-p,.lb-q{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;font-size:16px}.lb-p{left:18px}.lb-q{right:18px}
.lb.single .lb-p,.lb.single .lb-q,.lb.single .lb-n{display:none}
body.lb-open{overflow:hidden}
@media(max-width:960px){.overview.wide{grid-template-columns:1fr 1fr}.feat,.feat.flip,.refl,.sys2{grid-template-columns:minmax(0,1fr)}.feat>*,.refl>*,.sys2>*{min-width:0}.feat.flip .ft{order:0}.g3{grid-template-columns:1fr 1fr}.bento{grid-template-columns:1fr 1fr;grid-auto-rows:220px}.bento .b0{grid-row:span 1}.bento .b5,.bento .b6{grid-column:span 1}.bento .b0{grid-column:span 2}.lb-p,.lb-q{top:auto;bottom:14px;margin:0}}
@media(max-width:720px){.g3{grid-template-columns:1fr 1fr;gap:14px}.gc{font-size:10px}.bento{grid-template-columns:1fr;grid-auto-rows:240px}.bento .b0{grid-column:span 1}.shot .sb{display:none}.strip{padding-left:0}.hero-shot .cr{max-height:60vh}}
@media(prefers-reduced-motion:reduce){.vis.has-shot .mini{transform:none;opacity:1;transition:none}.lb,.lb-s img,.shot .cr img,.gal .shot,.si .shot,.bento .shot{transition:none!important}.lb-s img{transform:none}}

/* ===== v4: storefront-native case page ===== */
.cs-real main section{padding-top:56px;padding-bottom:56px}
.cs-real main section.cover{padding-top:0!important;padding-bottom:24px}
.cs-real .sh{margin-bottom:30px}
.cs-real .overview::before{background:var(--line2)}.cs-real .overview div::before{display:none}.cs-real .overview div{padding-top:18px}
.cs-real .h2{margin-bottom:24px}
.cs-real .chap{grid-template-columns:180px minmax(0,1fr);gap:48px}
.cs-real .chap .side{top:130px}
.cs-real .chap .body p{font-size:18px;max-width:760px}
.cs-real .chap .body p+p{margin-top:16px}
.cs-real .sec-l::before{display:none}
.sgap{flex:1}
/* hero: catalog grid assembling behind an inline configurator */
.cs-real .hero.mk{min-height:0;align-items:flex-start;padding:118px 0 52px}
.cs-real .hero.mk::after{background:linear-gradient(0deg,var(--bg) 4%,rgba(251,252,253,0) 38%)}
.cs-real .hero.mk h1{font-size:clamp(40px,4.7vw,70px);max-width:none}
.mk-w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:clamp(32px,5vw,72px);align-items:center}
.mk-l .lede{max-width:520px}
.mk-grid{position:absolute;z-index:0;top:84px;right:-30px;width:min(64%,900px);bottom:0;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:118px;gap:14px;align-content:start;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 70% 75% at 62% 42%,#000 35%,transparent 78%);mask-image:radial-gradient(ellipse 70% 75% at 62% 42%,#000 35%,transparent 78%);opacity:.75}
.mk-grid span{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -22px rgba(20,40,90,.4);animation:tIn .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*55ms + 150ms)}
.mk-grid i{width:26px;height:26px;border-radius:8px;background:linear-gradient(180deg,var(--mkeef3ff,#eef3ff),var(--mke3ebff,#e3ebff));border:1px solid rgba(var(--mkc,43,98,255),.14)}
.mk-grid b{height:7px;width:72%;border-radius:4px;background:#e9edf3;margin-top:auto}
.mk-grid em{height:6px;width:44%;border-radius:4px;background:#f0f2f6}
@keyframes tIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.cfgw{position:relative}
.cfg{position:relative;background:#fff;border:1px solid var(--line2);border-radius:18px;box-shadow:0 1px 2px rgba(20,40,90,.05),0 40px 80px -46px rgba(20,40,90,.45);overflow:hidden;font-size:13px;color:var(--fg)}
.cfg-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.cfg .lg{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--mk2a7dc9,var(--mk2a7dc9,#2a7dc9));color:var(--mk1f6fb8,var(--mk1f6fb8,#1f6fb8));font:600 10.5px/1 Geist,system-ui,sans-serif;letter-spacing:.02em;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgba(120,190,80,.55)}
.pn2{display:flex;flex-direction:column;min-width:0}.pn2 b{font-weight:500;font-size:14px;letter-spacing:-.01em}.pn2 span{font-size:11.5px;color:var(--mute)}
.cfg .tag{margin-left:auto;font:500 10px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);background:var(--mkf1f5ff,var(--mkf1f5ff,#f1f5ff));border:1px solid rgba(var(--mkc,43,98,255),.18);padding:6px 9px;border-radius:99px}
.cfg-b{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:18px;padding:14px 20px 16px;align-items:center}
.cfg .lab{display:block;font:500 9.5px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin:14px 0 7px}.cfg .lab:first-child{margin-top:2px}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:#f3f5f8;border:1px solid var(--line)}
.seg span{padding:6px 12px;border-radius:7px;font-size:12.5px;color:var(--mute);transition:background .35s,color .35s,box-shadow .35s}
.seg span.on{background:#fff;color:var(--acc);box-shadow:0 1px 3px rgba(20,40,90,.14)}
.chips{display:flex;gap:6px}
.chips span{display:flex;flex-direction:column;align-items:center;min-width:62px;padding:6px 10px;border-radius:9px;border:1px solid var(--line2);font-size:12.5px;line-height:1.2;transition:background .35s,color .35s,border-color .35s}
.chips small{font-size:9.5px;color:var(--mute2);transition:color .35s}
.chips span.on{background:var(--acc);border-color:var(--acc);color:#fff}.chips span.on small{color:rgba(255,255,255,.75)}
.lines{list-style:none;margin:0;padding:0}
.lines li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:12px;color:var(--mute);opacity:.28;transform:translateX(-6px);transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1)}
.lines li b{font-weight:500;font-size:13.5px;color:var(--acc);font-variant-numeric:tabular-nums}
.lines li.on{opacity:1;transform:none}
.cfg-d{position:relative;width:140px;height:140px}
.cfg-d svg{width:100%;height:100%;transform:rotate(-90deg)}
.cfg-d circle{fill:none;stroke-width:6.5}
.cfg-d .tr{stroke:#eef1f5}
.cfg-d .a1{stroke:var(--mk9fbcff,var(--mk9fbcff,#9fbcff));stroke-dasharray:0 100;transition:stroke-dasharray .9s cubic-bezier(.2,.7,.2,1)}
.cfg-d .a2{stroke:var(--mkg,var(--acc));stroke-dasharray:0 100;stroke-dashoffset:-28.57;transition:stroke-dasharray 1s cubic-bezier(.2,.7,.2,1)}
.cfg.d1 .a1{stroke-dasharray:28.57 100}.cfg.d2 .a2{stroke-dasharray:71.43 100}
.tot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.tot b{font-weight:500;font-size:15.5px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tot span{font-size:9.5px;color:var(--mute);margin-top:3px;line-height:1.25;max-width:80px}
.cfg-f{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:#fbfcfd}
.cfg .ag{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mute);margin-right:auto}
.cfg .ag i{width:13px;height:13px;border-radius:3.5px;border:1.5px solid var(--line2);position:relative;transition:background .3s,border-color .3s}
.cfg.agr .ag i{background:var(--mkg,var(--acc));border-color:var(--mkg,var(--acc))}
.cfg.agr .ag i::after{content:"";position:absolute;left:3.2px;top:.6px;width:3px;height:6.5px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.cfg .bt{font-size:12px;padding:7px 13px;border-radius:8px}
.cfg .bt.c{border:1px solid var(--line2);color:var(--mute)}
.cfg .bt.p{background:var(--acc);color:#fff;transition:box-shadow .4s,opacity .4s;opacity:.55}
.cfg.agr .bt.p{opacity:1}
.cfg.cfg-go .bt.p{box-shadow:0 0 0 5px rgba(var(--mkc,43,98,255),.16)}
.cs-real .hero.mk .overview{margin-top:34px}
/* storefront category tabs (replaces the node rail) */
.ctabs{position:fixed;top:64px;left:0;right:0;z-index:29;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .35s,transform .35s,top .5s cubic-bezier(.2,.7,.2,1)}
.ctabs.shown{opacity:1;transform:none;pointer-events:auto}
nav.hide~.ctabs{top:0}
.ctw{max-width:1240px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:28px;height:46px}
.ctn{flex:none;font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--fg)}
.ctl{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;margin-left:auto}.ctl::-webkit-scrollbar{display:none}
.ctl a{position:relative;flex:none;padding:13px 12px;font-size:13px;color:var(--mute);text-decoration:none;transition:color .25s}
.ctl a:hover{color:var(--fg)}
.ctl a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--mkg,var(--acc));transform:scaleX(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ctl a.on{color:var(--fg)}.ctl a.on::after{transform:none}
.ctl a:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:-4px;border-radius:8px}
/* challenge + solution + outcomes: typographic lists with hairlines (no icon tiles, no boxes) */
.tl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:40px}
.tl2>div{position:relative;border-top:1px solid var(--line2);padding-top:20px}
.tl2>div::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:2px;background:var(--mkg,var(--acc))}
.tl3 .m{color:var(--acc)}
.tl3 h4,.tl2 h4{font-size:19px;line-height:1.25;margin:8px 0 8px;color:var(--fg);font-weight:500;letter-spacing:-.015em}
.cs-real .chap .body .tl3 p,.cs-real .chap .body .tl2 p{font-size:15.5px;line-height:1.6;color:var(--mute);margin:0}
.tl2{display:grid;grid-template-columns:1fr 1fr;gap:34px 44px;margin-top:36px}
.tl2 h4{margin-top:0}
.tl2 a{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:500;color:var(--acc);text-decoration:none}.tl2 a:hover{text-decoration:underline}
.ol{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line2)}
.ol li{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1.1fr);gap:36px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line2)}
.ol .m{color:var(--acc)}
.ol b{font-weight:450;font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-.025em;color:var(--fg)}
.ol p{margin:0;font-size:15.5px;line-height:1.6;color:var(--mute)}
/* pull quotes: left rule, no glyph; full quotation marks on the insight */
.pqs{padding-top:8px!important}
.pq{margin:0;max-width:1000px;padding:4px 0 6px clamp(22px,3vw,38px);border-left:3px solid var(--mkg,var(--acc))}
.pq figcaption{color:var(--acc);margin:0 0 14px}
.pq blockquote{margin:0}
.pq.sm{margin-top:28px;padding:2px 0 4px 20px;border-left-width:2px}
.pq.sm figcaption{margin-bottom:8px}
.pq.sm .quote{font-size:clamp(21px,1.9vw,26px);line-height:1.25}
/* process: checkout-style stepper, click a phase to read it */
.proc .chap .h2{margin-bottom:0}
@keyframes pIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* galleries */
.lines small{font:inherit;color:inherit}.lines small::before{content:" · "}
@media (max-width:720px){.lines small{display:block;opacity:.75}.lines small::before{content:none}}
.cs-real .frame.real::before{display:none}
#flow .strip-w,#screens .strip-w{margin-top:36px}
#flow .si,#screens .si{flex-basis:clamp(240px,24vw,330px)}
.sctl .cnt{white-space:nowrap;flex:none;font-variant-numeric:tabular-nums;margin-right:6px;color:var(--mute)}
.feat{padding:10px 0 44px;gap:clamp(28px,4vw,64px)}
.feat h3{margin:12px 0 14px}
.feat p{font-size:16.5px}
.feat .cr{max-height:560px}
.fcap{margin-top:12px}
/* wireframe → final: full screen at its real proportions */
.cmpw{margin-top:44px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2.6vw,36px)}
.cmp-t h3{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:0 0 10px}
.cmp-t p{margin:0;font-size:15px;line-height:1.6;color:var(--mute)}
.cmp{position:relative;aspect-ratio:1400/1264;width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:#fff;box-shadow:0 30px 60px -34px rgba(20,40,90,.35);touch-action:pan-y}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.cmp .cw{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp .ch{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--mkg,var(--acc));box-shadow:0 0 0 1px rgba(255,255,255,.6);pointer-events:none}
.cmp .ch i{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;border:1.5px solid var(--mkg,var(--acc));color:var(--acc);display:grid;place-items:center;font-style:normal;font-size:15px;box-shadow:0 8px 24px -8px rgba(20,40,90,.4)}
.cmp .cl{position:absolute;top:14px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.92);border:1px solid var(--line);font-size:10px;pointer-events:none}.cmp .cl.l{left:14px;color:var(--mute)}.cmp .cl.r{right:14px;color:var(--acc)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.cmp:has(input:focus-visible) .ch i{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--mkg,var(--acc))}
/* reflection */
.refl{margin-top:48px;align-items:start}
.refl .frame{max-width:440px}
.refl h3{margin:12px 0 14px}
/* kept: hero shot tilt-settle, frame spotlight, image hover zoom */
.cover .hero-shot{transform-origin:50% 0;transform:perspective(1800px) rotateX(calc(var(--t,0)*10deg)) scale(calc(1 - var(--t,0)*.05));will-change:transform}
.frame.real,.cmpw{background-image:radial-gradient(260px circle at var(--mx,-400px) var(--my,-400px),rgba(var(--mkc,43,98,255),.07),transparent 70%),radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--vis) 70%)}
.gal .shot .cr img,.si .shot .cr img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gal>div:hover .shot .cr img,.si:hover .shot .cr img{transform:scale(1.035)}
@media(max-width:1100px){.mk-w{grid-template-columns:minmax(0,1fr) minmax(0,420px)}.ol li{grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:28px}}
@media(max-width:960px){.cs-real .chap{grid-template-columns:minmax(0,1fr);gap:18px}.mk-w{grid-template-columns:minmax(0,1fr)}.cfgw{max-width:520px}.mk-grid{width:100%;right:-20%;top:40%;opacity:.5}.tl3{grid-template-columns:1fr;gap:24px}.tl2{grid-template-columns:1fr;gap:24px}.cmpw{grid-template-columns:1fr;gap:20px}.ol li{grid-template-columns:1fr;gap:8px}.ctn{display:none}.ctl{margin-left:0}}
@media(max-width:720px){
.cs-real main section{padding-top:32px;padding-bottom:32px}
.cs-real .hero.mk{padding:96px 0 36px}
.mk-grid{display:none}
.cfg-b{grid-template-columns:minmax(0,1fr) 104px;gap:12px;padding:12px 14px 14px}
.cfg-h,.cfg-f{padding-left:14px;padding-right:14px}
.cfg-d{width:104px;height:104px}.tot b{font-size:12.5px}.tot span{font-size:8.5px;max-width:64px}
.chips span{min-width:0;padding:5px 7px;font-size:11.5px}.seg span{padding:5px 9px;font-size:11.5px}
.lines li{font-size:10.5px}.lines li b{font-size:12px}
.cfg .ag{font-size:10.5px}.cfg .bt.c{display:none}
.ctw{padding:0 10px;height:44px}
.pq{padding:2px 0 4px 18px}.pq .quote{font-size:22px}
.pq.sm{padding-left:16px}
.feat{padding:0 0 32px}.feat .cr{max-height:320px}
.cmp .ch i{width:34px;height:34px;margin:-17px 0 0 -17px}
.cs-real .chap .body p{font-size:17px}
.ol li{padding:20px 0}.ol b{font-size:21px}
.refl{margin-top:28px;gap:22px}.refl .cr{max-height:300px}
.cmp-t h3{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.mk-grid span{animation:none}.cfg *,.cfg-d circle,.jr li,.jr .ck,.ctabs,.ctl a::after{transition:none!important}.tlp.js .tlp-p:not([hidden]){animation:none}.cover .hero-shot{transform:none}.gal>div:hover .shot .cr img,.si:hover .shot .cr img{transform:none}}

/* v5: step indicators (hero checkout progress + process), challenge position segments */
.tl3>div{position:relative;padding-top:24px;--s1:var(--line2);--s2:var(--line2);--s3:var(--line2)}
.tl3>div:nth-child(1){--s1:var(--acc)}.tl3>div:nth-child(2){--s2:var(--acc)}.tl3>div:nth-child(3){--s3:var(--acc)}
.tl3>div::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--s1) 0 calc(33.333% - 3px),transparent 0 calc(33.333% + 3px),var(--s2) 0 calc(66.667% - 3px),transparent 0 calc(66.667% + 3px),var(--s3) 0)}
/* hero: checkout progress */
/* process: vertical timeline + detail panel whose pointer follows the selected phase; on mobile the detail opens under its phase */
.tlp{margin-top:34px}
.tlp-hint{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:14.5px;color:var(--mute)}
.tlp-hint svg{width:16px;height:16px;flex:none;color:var(--mkg,var(--acc))}
.tlp-g{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(36px,4.4vw,64px);align-items:start}
.tlp-list{position:relative;display:flex;flex-direction:column}
.tlp-list::before{content:"";position:absolute;left:9.25px;top:28px;bottom:var(--lb,48px);width:1.5px;background:var(--line2)}
.tlp-list [role=tab]{position:relative;display:flex;align-items:flex-start;gap:20px;width:100%;padding:16px 0;margin:0;background:none;border:0;font:inherit;text-align:left;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tlp-mk{flex:none;position:relative;z-index:1;width:20px;height:20px;margin-top:2px;border-radius:50%;background:#fff;border:1.5px solid rgba(10,20,40,.22);transition:border-color .25s,background .25s,box-shadow .3s}
.tlp-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.tlp-l{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--fg);transition:color .2s}
.tlp-h{font-size:15px;line-height:1.45;color:#2a3242}
.tlp-list [role=tab]:hover .tlp-mk{border-color:var(--mkg,var(--acc))}
.tlp-list [role=tab]:hover .tlp-l,.tlp-list [role=tab][aria-selected=true] .tlp-l{color:var(--acc)}
.tlp-list [role=tab][aria-selected=true] .tlp-mk{background:var(--mkg,var(--acc));border-color:var(--mkg,var(--acc));box-shadow:0 0 0 6px rgba(var(--mkc,43,98,255),.14)}
.tlp-list [role=tab]:focus-visible{outline:none}.tlp-list [role=tab]:focus-visible .tlp-mk{outline:2px solid var(--mkg,var(--acc));outline-offset:4px}
.tlp-pan{position:relative;align-self:stretch;border:1px solid var(--line2);border-radius:16px;padding:clamp(28px,3.4vw,44px);background:#fff}
.tlp-ptr{position:absolute;left:-8px;top:var(--y,44px);width:14px;height:14px;background:#fff;border-left:1px solid var(--line2);border-bottom:1px solid var(--line2);transform:translateY(-50%) rotate(45deg);transition:top .35s cubic-bezier(.2,.7,.2,1)}
.tlp-p{outline:none}
.tlp-p+.tlp-p{margin-top:36px}
.cs-real .tlp-p .eb{font-size:15px}
.cs-real .tlp-p h3{margin:10px 0 0;font-size:clamp(26px,2.4vw,32px);font-weight:500;line-height:1.15;letter-spacing:-.03em;color:var(--fg);text-wrap:balance}
.cs-real .tlp-p p{margin:16px 0 0;font-size:17px;line-height:1.65;color:#2a3242;max-width:600px}
.tlp-nx{margin-top:28px;padding:0;border:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--acc);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.tlp-nx span{transition:transform .25s}.tlp-nx:hover span{transform:translateX(3px)}
.tlp-nx:focus-visible,.tlp-p:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:3px;border-radius:4px}
.tlp.js .tlp-p+.tlp-p{margin-top:0}
.tlp.js .tlp-p:not([hidden]){animation:pIn .4s cubic-bezier(.2,.7,.2,1)}
@media(max-width:960px){
.tlp{margin-top:26px}
.tlp-g{grid-template-columns:minmax(0,1fr)}
.tlp-pan.inl{border:0;border-radius:0;background:none;padding:0 0 26px 40px}
.tlp-pan.inl .tlp-ptr,.tlp-pan.inl .eb{display:none}
.cs-real .tlp-pan.inl h3{margin-top:0;font-size:23px}
.cs-real .tlp-pan.inl p{margin-top:12px;font-size:16.5px}
.tlp-pan.inl .tlp-nx{margin-top:18px}
.tlp.js [role=tab][aria-selected=true] .tlp-h{display:none}
}
/* reset happens off-screen and without transitions, so nothing visibly unwinds */
.cfg.nt,.cfg.nt *,.cfg.nt circle,.jr.nt li,.jr.nt li::after,.jr.nt .ck,.jr.nt .ck em{transition:none!important}
@media(prefers-reduced-motion:reduce){.jr li,.jr li::after,.jr .ck,.tlp-mk,.tlp-ptr{transition:none!important}.tlp.js .tlp-p:not([hidden]){animation:none}}

/* ===== v6: refined stepper, cards, quote, solution, takeaway; sans eyebrows; section rhythm ===== */
/* page-wide: sans labels instead of mono uppercase (case page content only) */
.cs-real main .m,.cs-real .hero .m,.cs-real .lb .m{font-family:Geist,Inter,system-ui,sans-serif;font-size:13px;font-weight:500;letter-spacing:-.003em;text-transform:none;color:var(--mute);font-variant-numeric:tabular-nums}
.cs-real .eb{display:block;font:500 13px/1.3 Geist,Inter,system-ui,sans-serif;letter-spacing:-.003em;color:var(--acc)}
.cfg .lab{font:500 11px/1 Geist,Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none}
.cfg .tag{font:500 11px/1 Geist,Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;border-radius:6px}
/* section rhythm: one width, one heading block, divider + alternating bands */
.cs-real main>section{padding:88px 0!important;border-top:1px solid var(--line);background:transparent}
.cs-real main>section.band{background:#fff}
.cs-real main>section#insight{border-top:0;padding-top:0!important}
.cs-real main>section#challenge{padding-bottom:48px!important}
.cs-real .chap{display:block!important}
.cs-real .chap .side{position:static!important;margin:0 0 14px}
.cs-real .chap .side .m,.cs-real .sh>.m,.cs-real .sec-l{color:var(--acc);font-size:13.5px}
.cs-real .sh{display:flex!important;flex-direction:column-reverse;align-items:flex-start;justify-content:flex-start;gap:14px;margin-bottom:44px}
.cs-real main h2.h2,.cs-real .sh h2{font-size:clamp(32px,3.3vw,46px);font-weight:500;letter-spacing:-.04em;line-height:1.08;max-width:820px;margin:0 0 22px}
.cs-real .sh h2{margin:0}
.cs-real main h2 br{display:none}
.cs-real main h2 .mu{display:block;margin-top:12px;font-size:max(19px,.46em);font-weight:400;letter-spacing:-.015em;line-height:1.35;color:var(--mute)}
.cs-real .chap .body>p{max-width:720px}
.cs-real .sys2{display:block;border-top:0;padding-top:0}
.cs-real .sys2>div:last-child{max-width:720px}
.cs-real .sys2 .sec-l{display:block;margin-bottom:14px}
.cs-real .sys2 .h2{margin-bottom:22px}
/* hero stepper: thin track, small markers, current step by weight + colour */
.jr{--p:.8333;position:relative;z-index:1;list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));counter-reset:none}
.jr::before,.jr::after{content:"";position:absolute;top:4px;left:calc(100%/14);right:calc(100%/14);height:2px;border-radius:2px;background:rgba(10,20,40,.1)}
.jr::after{background:var(--mkg,var(--acc));transform-origin:left center;transform:scaleX(var(--p));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.jr li{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;padding:0 4px;text-align:center;font-size:12.5px;line-height:1.3;font-weight:400;color:var(--mute);transition:color .3s}
.jr li::before,.jr li::after{content:none!important;display:none!important}
.jr .ck{position:relative;z-index:1;display:block;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:#fff;border:1.5px solid rgba(10,20,40,.22);transition:background .3s,border-color .3s,box-shadow .3s}
.jr li.done .ck{background:var(--mkg,var(--acc));border-color:var(--mkg,var(--acc))}
.jr li.on{color:var(--fg);font-weight:600}
.jr li.on .ck{background:#fff;border:2.5px solid var(--mkg,var(--acc));box-shadow:0 0 0 4px rgba(var(--mkc,43,98,255),.14)}
.jr li.on .nm{color:var(--acc)}
.jr.nt::after,.jr.nt li,.jr.nt .ck{transition:none!important}
/* challenge: catalog-tile cards with a three-segment position indicator */
.cs-real .tl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px;border:0;padding:0}
.cs-real .tl3>div{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px 26px;box-shadow:0 1px 2px rgba(20,40,90,.04),0 20px 40px -32px rgba(20,40,90,.28);border-top:1px solid var(--line)}
.cs-real .tl3>div::before,.cs-real .tl3>div::after{content:none!important;display:none!important}
.tl3 .pos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 22px}
.tl3 .pos i{display:block;height:3px;border-radius:3px;background:rgba(10,20,40,.08)}
.tl3>div:nth-child(1) .pos i:nth-child(1),.tl3>div:nth-child(2) .pos i:nth-child(2),.tl3>div:nth-child(3) .pos i:nth-child(3){background:var(--mkg,var(--acc))}
.cs-real .tl3 .eb{margin-bottom:10px}
.cs-real .tl3 h4{font-size:18px;font-weight:500;letter-spacing:-.015em;line-height:1.3;margin:0 0 8px;color:var(--fg)}
/* key insight: storefront review card, full-colour quote */
.ins{margin:0;max-width:880px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:40px 48px 44px;box-shadow:0 1px 2px rgba(20,40,90,.04),0 24px 48px -36px rgba(20,40,90,.3)}
.ins .eb{margin-bottom:18px}
.ins blockquote{margin:0}
.ins blockquote p{margin:0;max-width:34em;font-size:clamp(22px,2.2vw,29px);line-height:1.36;font-weight:450;letter-spacing:-.02em;color:var(--fg);text-indent:-.42em;hanging-punctuation:first last}
/* solution: equal feature cards with in-page anchors */
.cs-real .tl2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px;border:0}
.cs-real .tl2>div{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px 20px;box-shadow:0 1px 2px rgba(20,40,90,.04),0 20px 40px -32px rgba(20,40,90,.28)}
.cs-real .tl2>div::before,.cs-real .tl2>div::after{content:none!important;display:none!important}
.cs-real .tl2 h4{font-size:18px;font-weight:500;letter-spacing:-.015em;line-height:1.3;margin:0 0 8px;color:var(--fg)}
.cs-real .tl2 p{flex:1}
.cs-real .tl2 a.anc{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;font-weight:500;letter-spacing:-.005em;color:var(--acc);text-decoration:none;background:none}
.cs-real .tl2 a.anc i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--mkeef3ff,var(--mkeef3ff,#eef3ff));font-size:13px;transition:transform .25s,background .25s}
.cs-real .tl2 a.anc:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cs-real .tl2 a.anc:hover i{transform:translateY(2px);background:var(--mke2eaff,#e2eaff)}
.cs-real .tl2 a.anc:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:4px;border-radius:4px}
/* takeaway: integrated closing panel */
.tk{margin:32px 0 0;padding:24px 28px 26px;border-radius:14px;background:var(--mkf3f6ff,var(--mkf3f6ff,#f3f6ff));border:1px solid rgba(var(--mkc,43,98,255),.14)}
.tk .eb{margin-bottom:10px}
.tk blockquote{margin:0}
.tk blockquote p{margin:0;font-size:clamp(19px,1.7vw,22px);line-height:1.4;font-weight:500;letter-spacing:-.018em;color:var(--fg)}
@media(max-width:960px){.cs-real .tl3,.cs-real .tl2{grid-template-columns:minmax(0,1fr);gap:14px}}
@media(max-width:720px){
.cs-real main>section{padding:56px 0!important}
.cs-real main>section#challenge{padding-bottom:32px!important}
.cs-real .sh{margin-bottom:30px}
.cs-real main h2.h2,.cs-real .sh h2{font-size:30px}
.cs-real main h2 .mu{font-size:18px;margin-top:10px}
.jr{margin-top:34px}.jr li{font-size:10.5px;gap:9px;padding:0 1px;line-height:1.25;overflow-wrap:anywhere}
.cs-real .tl3>div,.cs-real .tl2>div{padding:20px 20px 22px}
.ins{padding:26px 22px 28px;border-radius:16px}
.ins blockquote p{font-size:20px}
.tk{padding:20px 20px 22px}.tk blockquote p{font-size:18px}}
@media(prefers-reduced-motion:reduce){.jr::after,.jr li,.jr .ck,.tl2 a.anc i{transition:none!important}}
.cs-real main .idx.m,.cs-real main .ol .m,.cs-real main .ft .m{color:var(--acc)}
.cs-real .shot .bb{font:400 11px Geist,Inter,system-ui,sans-serif;letter-spacing:0}
.cs-real main>section.band{background:#e9f5fa}
.cs-real:not(.cs2) main>section:nth-of-type(n){background:transparent}.cs-real:not(.cs2) main>section:nth-of-type(odd){background:#e9f5fa}
.cs-real:not(.cs2) .pn a::before{background:radial-gradient(circle at var(--ox,50%) 100%,rgba(0,150,214,.08),transparent 70%),#e9f5fa}
.cs-real .hero h1 .mu{color:var(--mute)}
/* v6.1: hero meta row spans the stepper track */
.cs-real .hero.mk .overview,.cs-real .hero.mk .overview.wide{max-width:none;margin-left:calc(100%/14);margin-right:calc(100%/14);grid-template-columns:auto auto minmax(0,max-content) auto;justify-content:space-between;column-gap:32px;row-gap:24px}
.cs-real .hero.mk .overview div{padding-right:0}
.cs-real .hero.mk .overview b{font-size:15px}
@media(max-width:720px){.cs-real .hero.mk .overview,.cs-real .hero.mk .overview.wide{margin-left:0;margin-right:0;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;column-gap:24px;row-gap:22px}}
/* v6.1: challenge as an open editorial row with one shared, segmented track */
.cs-real .tl3{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:44px}
.cs-real .tl3>div{background:none;border:0;border-radius:0;box-shadow:none;padding:30px 36px 4px}
.cs-real .tl3>div:first-child{padding-left:0}
.cs-real .tl3>div:last-child{padding-right:0}
.cs-real .tl3>div+div{border-left:0}
.cs-real .tl3>div+div::after{content:""!important;display:block!important;position:absolute;left:0;top:30px;bottom:4px;width:1px;background:var(--line2)}
.tl3 .trk{position:absolute;top:0;left:0;right:4px;height:2px;border-radius:2px;background:var(--mkg,var(--acc));transform-origin:left center}
.tl3>div+div .trk{left:4px}
.tl3>div:last-child .trk{right:0}
.tl3>.rv .trk{transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + 250ms)}
.tl3>.rv.in .trk{transform:none}
.cs-real .tl3 .eb{margin-bottom:10px}
.cs-real .tl3 h4{font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.25;margin:0 0 10px}
.cs-real .chap .body .tl3 p{max-width:34ch;font-size:15.5px;line-height:1.6}
@media(max-width:960px){
.cs-real .tl3{grid-template-columns:minmax(0,1fr);gap:0;margin-top:34px}
.cs-real .tl3>div,.cs-real .tl3>div:first-child,.cs-real .tl3>div:last-child{padding:0 0 26px 22px}
.cs-real .tl3>div:last-child{padding-bottom:2px}
.cs-real .tl3>div+div::after{content:none!important;display:none!important}
.tl3 .trk,.tl3>div+div .trk,.tl3>div:last-child .trk{top:3px;left:0;right:auto;bottom:6px;width:2px;height:auto;transform-origin:center top}
.tl3>div:last-child .trk{bottom:2px}
.tl3>.rv .trk{transform:scaleY(0)}
.tl3>.rv.in .trk{transform:none}
.cs-real .chap .body .tl3 p{max-width:none}}
@media(prefers-reduced-motion:reduce){.tl3>.rv .trk{transform:none!important;transition:none!important}}
/* ===== v7 (round 4): hero B — facts grid + journey ticker ===== */
.mk-w.hb{grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-areas:"t v" "f v";grid-template-rows:auto 1fr;gap:0 clamp(40px,6vw,88px);align-items:stretch}
.hb>.mk-l{grid-area:t}
.hb-facts{grid-area:f;align-self:end;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px;margin:0;padding-top:44px;max-width:560px}
.hb-facts>div{border-top:1px solid var(--line2);padding-top:14px;min-width:0}
.hb-facts dt{font-size:15px;line-height:1.4;color:var(--mute)}
.hb-facts dd{margin:6px 0 0;font-size:16.5px;font-weight:500;line-height:1.55;letter-spacing:-.008em;color:var(--fg)}
.hb-v{grid-area:v;align-self:center;min-width:0}
.hb-v .cfgw{max-width:none}
.jt-w{margin-bottom:18px}
.jt-lb{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--fg);margin-bottom:10px}
.jt{list-style:none;margin:0;padding:0;display:flex;align-items:center;height:34px;overflow:hidden;white-space:nowrap}
.jt li{display:none;align-items:center;font-size:15px;line-height:1;color:var(--mute)}
.jt li.prev,.jt li.on,.jt li.next{display:flex}
.jt li.prev{order:1;color:#3a4252}.jt li.on{order:2}.jt li.next{order:3}
.jt .t{display:block;text-box:trim-both cap alphabetic}
.jt li.on::before,.jt li.next::before{content:"";flex:none;width:28px;height:1px;background:var(--line2);margin:0 14px}
.jt li.on{font-size:26px;font-weight:500;letter-spacing:-.03em;color:var(--acc);animation:jtS .55s cubic-bezier(.2,.7,.2,1)}
.jt li.prev{animation:jtS .55s cubic-bezier(.2,.7,.2,1)}
.jt li.next{animation:jtS .55s cubic-bezier(.2,.7,.2,1) .06s both}
.jt .jck{display:none;flex:none;width:12px;height:12px;margin-right:7px;color:var(--acc)}
.jt .jck svg{display:block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.jt li.prev .jck{display:block}
.jt.nt li{animation:none!important}
@keyframes jtS{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media(min-width:961px) and (max-width:1100px){.mk-w.hb{grid-template-columns:minmax(0,1fr) minmax(0,450px)}.hb-facts{grid-template-columns:minmax(0,1fr);gap:16px}.hb-facts dd{margin-top:4px}}
@media(max-width:960px){.mk-w.hb{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "v" "f";grid-template-rows:auto}.hb-v{align-self:start;padding-top:40px;max-width:560px}.hb-facts{max-width:none;padding-top:44px}}
@media(max-width:560px){.hb-facts{gap:20px 20px}.jt li.on{font-size:21px}.jt li.on::before,.jt li.next::before{width:16px;margin:0 10px}}
@media(max-width:400px){.jt li.next{display:none}}
@media(max-width:480px){.hb-facts{grid-template-columns:minmax(0,1fr);gap:0}.hb-facts>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0}.hb-facts>div:last-child{border-bottom:1px solid var(--line2)}.hb-facts dd{margin:0}}
/* ===== v7: challenge — rows converge into one catalog ===== */
.cx{display:grid;grid-template-columns:minmax(0,680px) minmax(64px,1fr) 250px;align-items:stretch;margin-top:48px}
.cx-rows{display:grid;grid-template-rows:repeat(3,1fr);padding-right:24px}
.cx-r{display:flex;align-items:center;gap:32px;padding:26px 0;border-bottom:1px solid var(--line)}
.cx-r:last-child{border-bottom:0}
.cx-il{flex:none;width:200px;height:128px;border-radius:14px;background:var(--vis);display:grid;place-items:center}
.cx-tx{min-width:0}
.cs-real .cx .eb{margin-bottom:8px}
.cs-real .cx h4{font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.25;margin:0 0 8px;color:var(--fg)}
.cs-real .chap .body .cx p{font-size:15.5px;line-height:1.6;color:var(--mute);margin:0;max-width:44ch}
.cx .il1{width:72%;display:grid;gap:14px}
.cx .il1 span{display:flex;gap:5px;height:12px}
.cx .il1 i{display:block;width:var(--w);border-radius:3px;background:var(--mkc9d6f7,#c9d6f7)}
.cx .il1 span:nth-child(1) i:nth-child(2){background:var(--mkg,var(--acc))}
.cx .il1 span:nth-child(2) i{background:var(--mkg,var(--acc));opacity:.55}
.cx .il1 span:nth-child(3) i:nth-child(4){background:var(--mkg,var(--acc))}
.cx .il2{position:relative;width:120px;height:92px}
.cx .il2 span{position:absolute;width:96px;height:58px;border-radius:8px;background:#fff;border:1px solid var(--line2)}
.cx .il2 span:nth-child(1){left:0;top:0}.cx .il2 span:nth-child(2){left:12px;top:17px}.cx .il2 span:nth-child(3){left:24px;top:34px;border-color:var(--mkg,var(--acc))}
.cx .il2 span:nth-child(3)::before,.cx .il2 span:nth-child(3)::after{content:"";position:absolute;left:12px;height:5px;border-radius:3px;background:var(--mkc9d6f7,#c9d6f7)}
.cx .il2 span:nth-child(3)::before{top:16px;width:52px;background:var(--mkg,var(--acc))}.cx .il2 span:nth-child(3)::after{top:30px;width:34px}
.cx .il3{display:grid;grid-template-columns:repeat(4,22px);gap:8px}
.cx .il3 i{display:block;height:22px;border-radius:5px;border:1px dashed #b9c3d3}
.cx .il3 i.f{border:0;background:var(--mkg,var(--acc))}
.cx-svg{display:block;width:100%;height:100%;overflow:visible;contain:size}
.cx-svg path{fill:none;stroke:var(--mkg,var(--acc));stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1) .2s}
.cx-dn path{fill:none;stroke:var(--mkg,var(--acc));stroke-width:1.5;vector-effect:non-scaling-stroke}
.cx-dn{clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.4,0,.2,1) .9s}
.cx-svg path:nth-child(2){transition-delay:.35s}.cx-svg path:nth-child(3){transition-delay:.5s}
.cx.in .cx-svg path{stroke-dashoffset:0}.cx.in .cx-dn{clip-path:inset(0)}
.cx-end{position:relative;align-self:center}
.cx-dn{display:none}
.cx-cat{height:150px;border-radius:14px;background:var(--vis);display:grid;place-items:center}
.cx-win{width:80%;background:#fff;border:1px solid var(--line2);border-radius:10px;padding:11px}
.cx-win .sb{display:block;height:7px;width:46%;border-radius:4px;background:#e3e9f6;margin-bottom:10px}
.cx-win .gr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.cx-win i{display:block;border:1px solid var(--line);border-radius:6px;padding:6px;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1);transition-delay:calc(1.35s + var(--i)*.08s)}
.cx-win s{display:block;height:16px;border-radius:4px;background:var(--mkc9d6f7,var(--mkc9d6f7,#c9d6f7));margin-bottom:5px}
.cx-win i:nth-child(2) s{background:var(--mkg,var(--acc))}
.cx-win u{display:block;height:3px;border-radius:2px;background:#dde3ee;margin-top:4px}.cx-win u+u{width:60%}
.cx-end b{position:absolute;left:0;right:0;top:calc(100% + 14px);text-align:center;font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--fg);opacity:0;transition:opacity .6s 1.8s}
.cx.in .cx-win i{opacity:1;transform:none}.cx.in .cx-end b{opacity:1}
@media(max-width:1200px){.cx{grid-template-columns:minmax(0,1fr) minmax(56px,110px) 210px}.cx-il{width:160px;height:116px}.cx-r{gap:24px}.cx-cat{height:132px}}
@media(max-width:960px){
 .cx{grid-template-columns:minmax(0,1fr);margin-top:36px}
 .cx-rows{grid-template-rows:none;padding:0 0 0 24px;border-left:1.5px solid var(--mkg,var(--acc))}
 .cx-r{flex-direction:column;align-items:stretch;gap:18px;padding:0 0 30px;border-bottom:0}
 .cx-r:last-child{padding-bottom:0}
 .cx-il{width:100%;height:132px}
 .cx-svg{display:none}
 .cx-end{align-self:stretch;max-width:340px}
 .cx-dn{display:block;width:100%;height:56px;overflow:visible}
 .cx-cat{height:170px}
 .cx-end b{position:static;display:block;margin-top:14px}
 .cs-real .chap .body .cx p{max-width:none}}
@media(max-width:420px){.cx-cat{height:150px}}
/* ===== v7: takeaway — B3 layout, B1 colours ===== */
.tkx{margin:clamp(56px,7vw,104px) 0 0}
.tkx-r{display:block;width:56px;height:3px;background:var(--mkg,var(--acc));transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1) .25s}
.tkx.in .tkx-r{transform:none}
.cs-real .tkx figcaption.eb{font-size:15px;margin-top:14px}
.tkx blockquote{margin:12px 0 0;padding:0;border:0}
.tkx p{font-size:clamp(32px,4.4vw,60px);font-weight:500;letter-spacing:-.045em;line-height:1.1;color:var(--fg);max-width:15em;margin:0}
.tkx em{font-style:normal;color:var(--acc)}
.tkx .tkw{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.15s + var(--j)*.07s)}
.tkx.in .tkw{opacity:1;transform:none}
html:not(.js) .tkx .tkw,html:not(.js) .tkx-r,html:not(.js) .cx-win i,html:not(.js) .cx-end b{opacity:1;transform:none}
html:not(.js) .cx path{stroke-dashoffset:0}html:not(.js) .cx-dn{clip-path:none}
@media(prefers-reduced-motion:reduce){.jt li{animation:none!important}.cx path{stroke-dashoffset:0!important;transition:none!important}.cx-dn{clip-path:none!important;transition:none!important}.cx-win i,.cx-end b,.tkx .tkw{opacity:1!important;transform:none!important;transition:none!important}.tkx-r{transform:none!important;transition:none!important}}
/* ===== v8: strict type hierarchy =====
   section title .sect 20/600 ink + cobalt rule | headline h2 46/500 | subsection h3 34/500
   item title 21/500 | item label .eb 14/500 cobalt | field label 15/400 grey | meta .m 13/500 grey */
.cs-real .sect{display:block;font:600 22px/1.2 Geist,Inter,system-ui,sans-serif;letter-spacing:-.015em;color:var(--fg);margin:0}
.cs-real .sect::before{content:"";display:block;width:24px;height:2px;border-radius:1px;background:var(--mkg,var(--acc));margin-bottom:12px}
.cs-real .chap .side{margin:0 0 20px}
.cs-real .sh{gap:20px}
.cs-real .sys2 .sect{margin-bottom:20px}
.cs-real main .eb,.cs-real main .eb.idx,.cs-real .tlp-p .eb,.cs-real .tkx figcaption.eb,.cs-real .ins .eb{font:500 14px/1.3 Geist,Inter,system-ui,sans-serif;letter-spacing:-.005em;color:var(--acc);text-transform:none}
.cs-real main .ft h3,.cs-real main .refl h3,.cs-real main .tlp-p h3{font-size:clamp(26px,2.5vw,34px);font-weight:500;letter-spacing:-.035em;line-height:1.12}
.cs-real main .cx h4,.cs-real main #solution h4,.cs-real main #flow h3,.cs-real main .ol b{font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--fg)}
.cs-real .jt-lb{font-size:15px;font-weight:400;color:var(--mute)}
.cs-real .tkx{margin-top:clamp(56px,7vw,96px)}
.cs-real .tkx figcaption.eb{margin-top:0}
/* ===== v8: challenge — intro beside key insight, tighter rows ===== */
.cxi{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:start}
.cxi-t>p:first-child{margin-top:0}
.cs-real .cxi .ins{max-width:none;margin:0;padding:28px 32px 30px;border-radius:16px;box-shadow:none;border:1px solid var(--line2);background:#fff}
.cs-real .cxi .ins .eb{margin-bottom:14px}
.cs-real .cxi .ins blockquote p{font-size:clamp(19px,1.55vw,22px);line-height:1.42;max-width:none}
.cs-real .cx{margin-top:44px}
.cs-real .cx-r{padding:16px 0;gap:28px}
.cs-real .cx-il{width:168px;height:104px}
.cs-real .cx .il1{width:76%;gap:11px}.cs-real .cx .il1 span{height:10px}
.cs-real .cx .il2{transform:scale(.84)}
.cs-real .cx .il3{grid-template-columns:repeat(4,18px);gap:7px}.cs-real .cx .il3 i{height:18px}
.cs-real .cx{grid-template-columns:minmax(0,680px) minmax(64px,1fr) 230px}
.cs-real .cx-cat{height:128px}
@media(max-width:1200px){.cs-real .cx{grid-template-columns:minmax(0,1fr) minmax(56px,110px) 200px}.cs-real .cx-il{width:150px;height:100px}.cs-real .cx-cat{height:118px}}
@media(max-width:960px){.cxi{grid-template-columns:minmax(0,1fr);gap:28px}.cs-real .cx{grid-template-columns:minmax(0,1fr);margin-top:36px}.cs-real .cx-r{padding:0 0 24px;gap:14px}.cs-real .cx-r:last-child{padding-bottom:0}.cs-real .cx-il{width:100%;height:112px}.cs-real .cx-cat{height:150px}}
@media(max-width:560px){.cs-real .cxi .ins{padding:22px 20px 24px}.cs-real .cxi .ins blockquote p{font-size:19px}.cs-real .sect{font-size:18px}.cs-real main .cx h4,.cs-real main #solution h4,.cs-real main #flow h3,.cs-real main .ol b{font-size:19px}}
/* ===== v8: outcomes — small illustrations ===== */
.cs-real .ol li{grid-template-columns:132px minmax(0,1fr) minmax(0,1.1fr);gap:36px;align-items:center;padding:20px 0}
.cs-real .ol .ot .eb{margin-bottom:8px}
.cs-real .ol b{display:block}
.oi{width:132px;height:84px;border-radius:12px;background:var(--vis);display:grid;place-items:center}
.oi>div{transform:scale(1.15)}
.oi1{width:52px;height:60px;background:#fff;border:1px solid var(--line2);border-radius:7px;padding:6px;display:flex;flex-direction:column;gap:4px}
.oi1 span:nth-child(1){height:6px;border-radius:3px;background:var(--mkc9d6f7,#c9d6f7)}
.oi1 span:nth-child(2){flex:1;border-radius:4px;background:#eef2fa;border:1px solid #dde3ee}
.oi1 span:nth-child(3){height:8px;width:55%;align-self:flex-end;border-radius:3px;background:var(--mkg,var(--acc))}
.oi2{width:78px;background:#fff;border:1px solid var(--line2);border-radius:7px;padding:8px 8px 7px;display:grid;gap:6px}
.oi2 span{display:flex;justify-content:space-between;align-items:center}
.oi2 i{display:block;height:4px;border-radius:2px;background:#dde3ee;width:30px}
.oi2 i+i{width:12px;background:var(--mkc9d6f7,#c9d6f7)}
.oi2 span:last-child{border-top:1px solid var(--line);padding-top:6px}
.oi2 span:last-child i{background:var(--mkc9d6f7,var(--mkc9d6f7,#c9d6f7));width:22px}.oi2 span:last-child i+i{width:20px;height:6px;background:var(--mkg,var(--acc))}
.oi3{display:flex;align-items:flex-end;gap:6px;height:56px}
.oi3 span{display:flex;flex-direction:column-reverse;gap:4px}
.oi3 i{display:block;width:18px;height:13px;border-radius:3px;background:var(--mkc9d6f7,#c9d6f7)}
.oi3 span i:first-child{background:var(--mkg,var(--acc))}
.oi4{position:relative;width:78px;display:flex;flex-direction:column;align-items:flex-end;gap:7px;padding-right:9px}
.oi4 i{display:block;width:var(--w);height:6px;border-radius:3px;background:var(--mkc9d6f7,#c9d6f7)}
.oi4 i:nth-child(2){background:var(--mkg,var(--acc))}
.oi4::after{content:"";position:absolute;right:3px;top:-6px;bottom:-6px;width:1.5px;border-radius:1px;background:var(--mkg,var(--acc))}
@media(max-width:1100px){.cs-real .ol li{grid-template-columns:116px minmax(0,1fr) minmax(0,1fr);gap:28px}.oi{width:116px;height:78px}}
@media(max-width:960px){.cs-real .ol li{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"i t" "i p";gap:8px 20px;align-items:start;padding:20px 0}.cs-real .ol .oi{grid-area:i;width:96px;height:72px}.cs-real .ol .oi>div{transform:none}.cs-real .ol .ot{grid-area:t}.cs-real .ol li>p{grid-area:p}}
@media(max-width:380px){.cs-real .ol li{grid-template-columns:80px minmax(0,1fr);gap:8px 16px}.cs-real .ol .oi{width:80px;height:64px}.cs-real .ol .oi>div{transform:scale(.84)}}
/* ===== v9: one section title per section, tighter vertical rhythm ===== */
.cs-real main>section{padding:64px 0!important}
.cs-real main>section#challenge{padding-bottom:56px!important}
.cs-real main h2.h2,.cs-real .sh h2{margin:0}
.cs-real .sh{margin-bottom:32px;gap:0}
.cs-real .chap .body>h2.h2,.cs-real .proc .chap .h2{margin-bottom:32px}
.cs-real .cxi-t h2.h2{margin-bottom:24px}
.cs-real .cxi{align-items:start}
.cs-real .cx{margin-top:40px}
.cs-real .sys2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start;border-top:0;padding-top:0}
.cs-real .sys2 p{max-width:none}
.cs-real .sys2 p:first-child{margin-top:4px}
.cs-real .tl2{margin-top:36px}
.cs-real .strip-w{margin-top:28px}
.cs-real #system .strip-w{margin-top:32px}
.cs-real #flow .frame.flow{padding:clamp(14px,1.8vw,24px)}
.cs-real .cmpw{margin-top:32px;padding:clamp(16px,2vw,28px)}
.cs-real .feat{align-items:start;padding:0 0 48px}
.cs-real .feat:last-of-type{padding-bottom:16px}
.cs-real .feat h3{margin:10px 0 14px}
.cs-real .feat .frame.real,.cs-real .refl .frame.real{padding:0;border:0;border-radius:12px;background:none;overflow:visible}
.cs-real .feat .cr{max-height:480px}
.cs-real .tkx{margin-top:clamp(48px,5vw,72px)}
.cs-real .refl{margin-top:40px}
.cs-real .pn{margin-top:0}
.cs-real .pn h3{font-size:clamp(26px,2.5vw,34px);letter-spacing:-.035em;line-height:1.12}
@media(max-width:960px){.cs-real .sys2{grid-template-columns:minmax(0,1fr);gap:20px}.cs-real .sys2 p:first-child{margin-top:0}}
@media(max-width:760px){.cs-real main>section{padding:44px 0!important}.cs-real main>section#challenge{padding-bottom:44px!important}.cs-real .sh{margin-bottom:24px}.cs-real .chap .body>h2.h2,.cs-real .proc .chap .h2{margin-bottom:24px}.cs-real .feat{padding:0 0 36px;gap:20px}.cs-real .tl2{margin-top:28px}.cs-real .strip-w,.cs-real #system .strip-w{margin-top:24px}.cs-real .cmpw{margin-top:24px}.cs-real .tkx{margin-top:44px}.cs-real .refl{margin-top:28px}}
.cs-real .tl2>div{padding:22px 24px 18px}
.cs-real .tl2 a.anc{margin-top:14px;padding-top:12px}
.cs-real .pn a{padding:40px 40px 44px}
@media(min-width:1100px){.cs-real .cmpw{grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:start}}
@media(max-width:760px){.cs-real .cx-il{height:88px}.cs-real .cx-cat{height:124px}.cs-real .refl .frame{max-width:300px}.cs-real .pn a{padding:28px 22px 30px}.cs-real .tl2>div{padding:18px 20px 16px}}
@media(min-width:1100px){.cs-real .cmp{max-width:680px}.cs-real .refl .frame{max-width:380px}}
@media(max-width:760px){.cs-real .feat .cr{max-height:320px}}
/* v10: Bill's spacing tweaks */
.cs-real .feat{padding:0 0 80px}
.cs-real .feat#s3{padding-bottom:48px}
.cs-real #system .strip-w{margin-top:48px}
@media(min-width:961px){.cs-real .feat{align-items:center}.cs-real .refl{align-items:center}}
@media(max-width:760px){.cs-real .feat{padding:0 0 48px}.cs-real .feat#s3{padding-bottom:36px}.cs-real #system .strip-w{margin-top:32px}}
/* v11: key insight box aligned to first paragraph line */
.cs-real .cxi>h2.cxi-h{margin:0 0 24px}
.cs-real .cxi{row-gap:0}
@media(min-width:961px){.cs-real .cxi>h2.cxi-h{grid-column:1;grid-row:1}.cs-real .cxi>.cxi-t{grid-column:1;grid-row:2}.cs-real .cxi>.ins{grid-column:2;grid-row:2;align-self:start;margin-top:3px}}
@media(max-width:960px){.cs-real .cxi>.ins{margin-top:28px}}

.mk-w.hb{grid-template-areas:"h h" "t v" "f v";grid-template-rows:auto auto 1fr}
.hb>.mk-h{grid-area:h;min-width:0;padding-bottom:16px}
.hsub{margin:0;font-size:clamp(19px,2.16vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.15;color:var(--mute)}
.hb .mk-l .lede{margin-top:22px}
.hb-v{align-self:start}
@media(min-width:961px){.cs-real .hero.mk .mk-h h1{white-space:nowrap}}
@media(max-width:960px){.mk-w.hb{grid-template-areas:"h" "t" "v" "f"}}
.ctl{align-self:stretch}
.ctl a{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;padding:0 12px;height:100%}
.ctl a::before{content:attr(data-t);font-weight:500;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
.ctl a::after{bottom:0;height:3px;border-radius:2px 2px 0 0}
.ctl a.on{color:var(--acc);font-weight:500}
.lb{background:rgba(15,22,34,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.lb-top{border-bottom:0}
.cs-real .lb .lb-c,.lb .lb-c{color:#fff}.cs-real .lb .lb-n,.lb .lb-n{color:#fff;opacity:.85}
.lb-s img{box-shadow:0 30px 90px -30px rgba(0,0,0,.55);border-color:rgba(255,255,255,.2)}
.lb-s{padding-left:clamp(16px,7vw,120px);padding-right:clamp(16px,7vw,120px)}
.lb-s img{max-width:min(100%,1240px)}
.lb-z,.lb-x,.lb-p,.lb-q{border-color:rgba(255,255,255,.6)}
.pn.one{grid-template-columns:1fr}
.pn.one a.nx{text-align:right;align-items:flex-end}
.pn.one a+a{border-left:0}

/* ===== R10: lightbox fit / zoom (sizes set in JS against the viewport) ===== */
.lb-s{display:flex;overflow:hidden;padding:20px clamp(16px,7vw,120px) 28px}
.lb.zoom .lb-s{overflow:auto;cursor:grab}.lb.zoom.drag .lb-s{cursor:grabbing}.lb.drag .lb-s img{cursor:grabbing}
.lb-s img,.lb.zoom .lb-s img{flex:none;margin:auto;max-width:none;max-height:none;user-select:none;-webkit-user-drag:none}
.lb.nozoom .lb-s img{cursor:default}.lb.nozoom .lb-z{display:none}
.lb.zoom .lb-s img{cursor:zoom-out;transition:none}
@media(max-width:720px){.lb-s{padding:12px 12px 20px}.lb-top{padding:12px 14px;gap:10px}.lb-p,.lb-q{top:auto;bottom:16px;margin:0}}
/* ===== R10: challenge on tablet and phone: stacked rows that merge into one catalog ===== */
@media(max-width:960px){
 .cs-real .cx-rows{border-left:0;padding:0}
 .cs-real .cx-r{flex-direction:row;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
 .cs-real .cx-r:first-child{padding-top:0}.cs-real .cx-r:last-child{border-bottom:0;padding-bottom:0}
 .cs-real .cx-il{flex:none;width:150px;height:96px}
 .cs-real .cx-end{align-self:center;justify-self:center;width:100%;max-width:300px;margin-top:6px}
 .cs-real .cx-dn{display:block;width:100%;height:64px;overflow:visible}
 .cs-real .cx-cat{height:auto;padding:20px 0}
 .cs-real .cx-dn{margin-top:22px}
 .cs-real .cx-end b{position:static;display:block;margin-top:12px;text-align:center}}
@media(max-width:560px){.cs-real .cx-r{gap:16px}.cs-real .cx-il{width:96px;height:76px}.cs-real .cx .il1{width:80%;gap:8px}.cs-real .cx .il1 span{height:8px}.cs-real .cx .il2{transform:scale(.6)}.cs-real .cx .il3{grid-template-columns:repeat(4,12px);gap:5px}.cs-real .cx .il3 i{height:12px;border-radius:3px}.cs-real .cx-cat{height:auto;padding:16px 0}.cs-real .cx-end{max-width:260px}}

/* ===== R11: Marketplace hero text solid, no fade overlay (same fix as Data Broker) ===== */
.cs-real:not(.cs2) .hero.mk::after{display:none}
.cs-real:not(.cs2) .hero .crumb span,.cs-real:not(.cs2) .hero .hsub,.cs-real:not(.cs2) .hero .lede,.cs-real:not(.cs2) .hero .hb-facts dt{color:#2c3542}
.cs-real:not(.cs2) .hero .jt-lb{color:#3d4757}.cs-real:not(.cs2) .hero .cfg small{color:#4a5464}

/* ===== Case Study 02: Nexus Dashboard Data Broker (teal accent, flow motifs) ===== */
.cs2{--acc:#085272;--acc2:#1f7aa0;--vis:#eef4f7}
.cs2 .frame.real,.cs2 .cmpw{background-image:radial-gradient(260px circle at var(--mx,-400px) var(--my,-400px),rgba(8,82,114,.08),transparent 70%),radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--vis) 70%)}
.cs2 .pn a::before{background:radial-gradient(circle at var(--ox,50%) 100%,rgba(8,82,114,.09),transparent 70%),var(--vis)}

.pn.one a.pv{text-align:left;align-items:flex-start}
/* hero background: routing lanes converging on a node */
@keyframes flMv{to{stroke-dashoffset:-1500}}
/* hero visual: Add Connection */
.nxa{background:#fff;border:1px solid var(--line2);border-radius:14px;box-shadow:0 30px 60px -40px rgba(10,40,50,.35);overflow:hidden}
.nx-c{display:grid;grid-template-columns:repeat(3,1fr);padding:14px 18px 0;font-size:12.5px;font-weight:500;color:var(--fg)}.nx-c span:nth-child(2){text-align:center}.nx-c span:nth-child(3){text-align:right}
.nx-d{position:relative;margin:10px 18px 6px;aspect-ratio:470/210}
.nx-s{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nx-s path{fill:none;stroke:rgba(8,82,114,.45);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--j)*90ms)}
.nxa.s2 .l1,.nxa.s3 .l2{stroke-dashoffset:0}
.nx-s .pk{opacity:0;transition:opacity .5s}.nxa.s4 .pk{opacity:1}.nx-s .pk circle{fill:var(--mkg,var(--acc))}
.nd{position:absolute;display:flex;align-items:center;gap:8px;padding:0 9px;background:#fff;border:1px solid var(--line2);border-radius:9px;font-size:11.5px;line-height:1.25;min-width:0;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1),border-color .4s}
.nd span{display:flex;flex-direction:column;min-width:0}.nd b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nt b{white-space:normal}.nd small{font-size:10.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni{flex:none;width:16px;height:16px;border-radius:4px}
.ni.ie{background:#5b3f9e}.ni.if{background:var(--mkg,var(--acc));clip-path:polygon(0 0,100% 0,62% 52%,62% 100%,38% 86%,38% 52%)}.ni.it{border-radius:50%;background:#c2418c}
.nxa.s1 .ne,.nxa.s2 .nf,.nxa.s3 .nt{opacity:1;transform:none}
.nxa.s1 .ne.n2{transition-delay:.1s}.nxa.s1 .ne.n3{transition-delay:.2s}.nxa.s2 .nf.n2,.nxa.s3 .nt.n2{transition-delay:.1s}
.nxa.s4 .nf{border-color:rgba(8,82,114,.45)}
@media(max-width:560px){.nd{gap:5px;padding:0 6px;font-size:10px}.nd small{font-size:9px}.ni{display:none}.nx-c{font-size:11px}}
/* section intro: title left, text right */
.c2i{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,90px);align-items:start}
.cs-real .c2i .h2{margin-bottom:0}
.c2i-t p{font-size:17px;line-height:1.65;color:var(--fg);max-width:600px}.c2i-t p+p{margin-top:16px}
/* ideation */
.frame.real.ia{margin-top:clamp(40px,5vw,64px)}
/* key screens: header row + full-width image */
.f2{padding-top:clamp(36px,4vw,56px)}.f2+.f2{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.f2-t{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,90px);align-items:start;margin-bottom:28px}
.f2-t h3{font-size:clamp(24px,2.3vw,32px);font-weight:500;letter-spacing:-.035em;line-height:1.15;margin-top:8px}
.f2-t p{font-size:17px;line-height:1.65;color:var(--fg);max-width:600px}.f2-t p+p{margin-top:14px}
/* platform: final screens grid */
.c2g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px;margin-top:clamp(40px,5vw,64px)}
.c2g .si{min-width:0}.c2g .si.more{display:none}.c2g.all .si.more{display:block}
.c2g .gc{display:block;margin-top:10px}
.c2g-b{display:flex;justify-content:center;margin-top:34px}
.c2g-b .btn{cursor:pointer;font:inherit;font-weight:500;font-size:15px}
.c2g-b .btn span{display:inline-block;transition:transform .3s}.c2g.all+.c2g-b .btn span{transform:rotate(180deg)}
/* outcomes: before / after */
.bf{border-top:1px solid var(--line2)}
.bf-h,.bf-r{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,4fr) 40px minmax(0,4fr);gap:20px;align-items:center}
.bf-h{padding:16px 0;font-size:14px;font-weight:500;color:var(--fg);border-bottom:1px solid var(--line)}
.bf-r{padding:22px 0;border-bottom:1px solid var(--line)}
.cs-real .bf .eb{margin:0}
.bf p{font-size:16.5px;line-height:1.5}.bf .bfb{color:var(--fg)}.bf .bfa{font-weight:500;color:var(--fg)}
.bf-a{color:var(--acc);display:grid;place-items:center}.bf-a svg{width:20px;height:12px}
@media(max-width:960px){.c2i,.f2-t{grid-template-columns:minmax(0,1fr);gap:18px}
 .c2g{grid-template-columns:repeat(2,minmax(0,1fr))}.fl-bg{width:100%;right:-25%;top:35%;height:60%;opacity:.6}
 .bf-h{display:none}.bf-r{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:8px 14px}.bf-r .bf-l{grid-column:1/-1}}
@media(max-width:560px){.c2g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 12px}.bf-r{grid-template-columns:minmax(0,1fr)}.bf-a{justify-content:start;transform:rotate(90deg);width:20px}.c2i-t p,.f2-t p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.fl-bg path.mv{animation:none}.nd,.nx-s path,.nx-s .pk,.c2c .ch{transition:none!important}}

/* ===== R10: Data Broker polish ===== */
body.cs2{--bg:#fbfcfd;--vis:#eef4f7}
.cs2.cs-real main>section.band{background:#e9eff3}
.cs2:not(.cs3).cs-real main>section:nth-of-type(n){background:transparent}.cs2:not(.cs3).cs-real main>section:nth-of-type(odd){background:#e9eff3}
.cs2 .c2h{background:#fbfcfd}
.cs2 .frame.real{background-image:radial-gradient(260px circle at var(--mx,-400px) var(--my,-400px),rgba(8,82,114,.08),transparent 70%),radial-gradient(120% 90% at 50% 0%,#fff 0%,#f3f7f9 70%)}
.cs2 .pn a::before{background:radial-gradient(circle at var(--ox,50%) 100%,rgba(8,82,114,.1),transparent 70%),#e9eff3}
/* hero: topology canvas stage */
.cs2 .nxw{position:relative;padding:clamp(16px,2.2vw,28px);border-radius:24px;border:1px solid rgba(8,82,114,.16);background:radial-gradient(circle at 1px 1px,rgba(8,82,114,.2) 1px,transparent 1.5px) 0 0/16px 16px,linear-gradient(155deg,#dde9ef,#eef4f7)}
.cs2 .nxa{border:1px solid rgba(8,82,114,.2);border-radius:16px;box-shadow:0 18px 40px -30px rgba(4,46,64,.45)}
.cs2 .nx-c{color:var(--acc)}
.cs2 .nd{border-radius:99px;padding:0 12px 0 7px;border-color:rgba(8,82,114,.24)}
.cs2 .ni{width:16px;height:16px;border-radius:50%;clip-path:none}
.cs2 .ni.ie{background:radial-gradient(circle,#fff 0 3px,#6b50b0 3.6px)}
.cs2 .ni.if{background:radial-gradient(circle,#fff 0 3px,var(--mkg,var(--acc)) 3.6px)}
.cs2 .ni.it{background:radial-gradient(circle,#fff 0 3px,#c2418c 3.6px)}
.cs2 .nf{background:#e6eff4}
.cs2 .nxa.s4 .nf{border-color:var(--mkg,var(--acc))}
.cs2 .nx-s path{stroke:rgba(8,82,114,.6);stroke-width:1.6}
.cs2 .nx-s .pk circle{fill:var(--acc2);filter:drop-shadow(0 0 3px rgba(31,122,160,.8))}
/* challenge: three constraints with icons */
.cq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(48px,6vw,80px)}
.cq-ic{display:block;width:44px;height:44px;color:var(--acc);margin-bottom:18px}.cq-ic svg{display:block;width:44px;height:44px}
.cq h4,.f2n h4{font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.cq p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--fg)}
/* key screens: topology notes with icons */
.f2n{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,56px)}
.f2n h4{font-size:18px}.f2n p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--fg)}
.f2n .cq-ic{margin-bottom:14px}
/* discovery: previous / redesign compare, teal stage */
.cs2 .cmpw.c2c{display:block;border:0;border-radius:0;padding:0;background:none;margin-top:clamp(40px,5vw,64px)}
.c2c .cmp-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-bottom:18px}
.c2c .cmp-t h3{margin:0}.c2c .cmp-t p{color:var(--fg)}
.cs2 .c2c .cmp{max-width:none;aspect-ratio:16/10;border-radius:22px;border:1px solid rgba(8,82,114,.16);background:linear-gradient(160deg,#dde9ef,#f2f7f9);box-shadow:none}
.c2c .cmp img{inset:5%;width:90%;height:90%;object-fit:contain;object-position:center;filter:drop-shadow(0 16px 26px rgba(4,46,64,.18))}
.c2c .cmp .cw{background:linear-gradient(160deg,#dde9ef,#f2f7f9)}
.c2c .cmp .ch{width:2px;margin-left:-1px;background:var(--mkg,var(--acc));box-shadow:none}
.cs2 .c2c .cmp .ch i{width:46px;height:30px;margin:-15px 0 0 -23px;border-radius:10px;background:var(--acc);border:2px solid #fff;color:#fff;box-shadow:0 8px 20px -8px rgba(4,46,64,.55)}
.c2c .cmp .ch i svg{width:20px;height:10px}
.c2c .cmp .cl{top:auto;bottom:14px;padding:6px 11px;border-radius:9px;background:#fff;border:1px solid rgba(8,82,114,.16);font-size:13px;font-weight:500;color:var(--fg)}.c2c .cmp .cl.r{color:var(--acc)}
.c2c .cmp:has(input:focus-visible) .ch i{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--mkg,var(--acc))}
/* what changed: icons */
.bf-h,.bf-r{grid-template-columns:minmax(0,2.8fr) minmax(0,4fr) 40px minmax(0,4fr)}
.bf-l{display:flex;align-items:center;gap:16px;min-width:0}
.bfi{flex:none;width:80px;height:56px;border-radius:12px;background:#e8f0f4;display:grid;place-items:center}.bfi svg{width:52px;height:38px}
.cs-real .bf-l .eb{margin:0;font-size:15px}
/* widows */
.cs-real p,.cs-real h3,.cs-real h4,.cs-real dd,.cs-real li{text-wrap:pretty}
@media(max-width:960px){.cq,.f2n{grid-template-columns:minmax(0,1fr);gap:26px}.cq-i,.f2n li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start}.cq-ic,.f2n .cq-ic{margin:2px 0 0}
 .bf-h,.bf-r{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)}}
@media(max-width:560px){.bf-h,.bf-r{grid-template-columns:minmax(0,1fr)}.bf-r{gap:10px}.cs2 .c2c .cmp{aspect-ratio:4/3}.c2c .cmp img{inset:4%;width:92%;height:92%}.c2c .cmp .cl{bottom:10px;font-size:12px;padding:5px 9px}.bfi{width:64px;height:46px}.bfi svg{width:44px;height:32px}.cq h4{font-size:18px}}
/* ===== R11: Data Broker #085272 palette, layout and motion; site header ===== */
nav,body.cs2 nav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.ctabs,body.cs2 .ctabs{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
body.cs2{--acc:#085272;--acc2:#1f7aa0;--bg:#fbfcfd;--vis:#eef4f7}
/* hero: free-standing graphic */
.cs2 .nxw{padding:0;border:0;border-radius:0;background:none}
.cs2 .nxa{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.cs2 .nxa .nx-d{margin:10px 0 4px}
/* challenge illustration */
/* discovery illustration */
.dv{margin:clamp(40px,5vw,64px) 0 0;display:grid;grid-template-columns:minmax(0,1.3fr) 24px minmax(0,1fr) 24px minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:center;padding:clamp(24px,3.4vw,44px);background:#fff;border:1px solid rgba(8,82,114,.12);border-radius:20px}
.dv h4{font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.3;margin:0 0 16px;color:var(--fg)}
.dv-a{color:var(--acc);display:grid;place-items:center}.dv-a svg{width:22px;height:13px}
.dv-o{border:1.5px solid var(--mkg,var(--acc));border-radius:10px;overflow:hidden;background:#fff}
.dv-ob{height:12px;background:var(--mkg,var(--acc))}
.dv-og{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:6px;padding:8px}
.dv-m{position:relative;border:1px solid #c9dce5;border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:5px;min-height:66px}
.dv-m span{font-size:11.5px;font-weight:500;color:var(--acc);line-height:1.2}
.dv-m i{display:block;height:5px;border-radius:3px;background:#e1edf2}.dv-m i:nth-of-type(2){width:72%}.dv-m i:nth-of-type(3){width:56%}
.dv-m.m1 i{display:none}
.dv-m b{position:absolute;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--mkg,var(--acc));background:#e1edf2}
.dv-m b:nth-of-type(1){left:22%;top:58%}.dv-m b:nth-of-type(2){left:50%;top:34%}.dv-m b:nth-of-type(3){left:74%;top:62%}
.dv-p,.dv-l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dv-p li,.dv-l li{display:flex;align-items:center;gap:12px;font-size:15.5px;line-height:1.3;color:var(--fg)}
.dv-pi{flex:none;width:38px;height:38px;color:var(--acc)}.dv-pi svg{display:block;width:38px;height:38px}
.dv-l li{gap:10px}.dv-l svg{flex:none;width:20px;height:20px;color:var(--mkg,var(--acc))}
/* key screens: compare first, identical 2:1 crops */
.cs2 #screens .cmpw.c2c{margin:0 0 clamp(56px,6vw,88px)}
.cs2 .c2c .cmp,.cs2 .c2c .cmp{aspect-ratio:2/1;border-radius:14px;border:1px solid rgba(8,82,114,.16);background:#fff}
.cs2 .c2c .cmp img{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:none}
.cs2 .c2c .cmp .cw{background:none}
.cs2 #screens .feat{padding-bottom:clamp(48px,6vw,80px)}
/* topology: features beside the map */
.tp{padding:0 0 clamp(56px,6vw,88px)}
.tp .f2-t{margin-bottom:32px}
.tpg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,3.5vw,48px);align-items:center}
.tph{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--acc);margin:0 0 14px}.tph svg{flex:none;width:19px;height:19px}
.tpl ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tpi{appearance:none;font:inherit;text-align:left;color:inherit;box-sizing:border-box;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(8,82,114,.16);background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.tpi:hover,.tpi.on{border-color:var(--mkg,var(--acc));box-shadow:0 0 0 1px var(--mkg,var(--acc));transform:translateY(-1px)}
.tpi:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:3px}
.tpi .cq-ic{width:40px;height:40px;margin:0}.tpi .cq-ic svg{width:40px;height:40px}
.tpi-t{min-width:0}
.tpi-h{display:block;font-size:17px;font-weight:500;letter-spacing:-.015em;line-height:1.3;color:var(--fg)}
.tpi-p{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--fg)}
.tps{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(8,82,114,.16);background:#fff;line-height:0}
.tps-m{display:block;width:100%;height:auto}
.tpo{position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none}
.tps[data-k=tip] .o-tip,.tps[data-k=pan] .o-pan,.tps[data-k=act] .o-act{opacity:1}
.tpo .rg{position:absolute;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 2.5px var(--mkg,var(--acc)),0 0 0 9999px rgba(236,243,246,.74)}
.tpo .rg.sq{aspect-ratio:auto;border-radius:99px}
.tpo img{position:absolute;height:auto;filter:drop-shadow(0 12px 24px rgba(4,46,64,.2));transform:translateY(8px);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tpo img.sp{border:1px solid rgba(8,82,114,.18);border-radius:6px;transform:translateX(14px)}
.tps[data-k] .tpo img{transform:none}
@media(max-width:960px){.dv{grid-template-columns:minmax(0,1fr);gap:14px}.dv-a{transform:rotate(90deg);height:22px}.dv h4{margin-bottom:12px}
 .tpg{grid-template-columns:minmax(0,1fr)}.tps{order:-1}}


.dv{align-items:start}.dv-a{align-self:center}
/* ===== R12: hero dots, challenge graphic, topology overlays, drag-and-drop setup ===== */
/* hero: dotted surface fading out from the top right, no flowing lines */
.c2h{position:relative;overflow:hidden}
.c2h .dt-bg{position:absolute;z-index:0;top:0;right:0;width:min(78%,1180px);height:100%;pointer-events:none;background:radial-gradient(circle at 1px 1px,rgba(8,82,114,.24) 1px,transparent 1.6px) 0 0/16px 16px,radial-gradient(ellipse 80% 85% at 100% 0%,#dde9ef 0%,rgba(221,233,239,0) 75%);-webkit-mask-image:radial-gradient(ellipse 85% 95% at 100% 0%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 85% 95% at 100% 0%,#000 25%,transparent 78%)}
.c2h>.w{position:relative;z-index:1}
.cs2 .nxa .nx-d{margin:34px 0 0}
.nx-lb{position:absolute;transform:translateY(calc(-100% - 8px));font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--acc);white-space:nowrap}
.nx-lb.e{left:0;top:5.714%}.nx-lb.f{left:37.447%;top:24.762%}.nx-lb.t{right:0;top:22.381%}
@media(max-width:560px){.nx-lb{font-size:12.5px;transform:translateY(calc(-100% - 5px))}}
/* challenge: dense form rows sorted into three steps */
.c2x{margin:clamp(28px,3.5vw,44px) 0 0;max-width:440px;display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:10px 16px;align-items:center;--ce:#6b50b0;--ct:#c2418c}
.ck-c{font-size:14px;line-height:1.3;color:var(--fg)}
.ck-fm{display:grid;gap:7px;padding:12px;border:1.5px solid var(--mkg,var(--acc));border-radius:10px;background:#fff}
.ck-bar{height:6px;width:40%;border-radius:3px;background:#c9dce5;margin-bottom:3px}
.ck-r{display:grid;grid-template-columns:38% minmax(0,1fr);gap:8px;align-items:center;padding:2px 4px;margin:0 -4px;border-radius:4px;transition:background .45s}
.ck-r i{display:block;height:5px;border-radius:3px;background:#c9dce5;transition:background .45s}
.ck-r b{display:block;height:11px;border-radius:3px;border:1px solid #c9dce5;background:#fff;transition:border-color .45s}
.c2x.k1 .g1{background:rgba(107,80,176,.1)}.c2x.k1 .g1 i{background:var(--ce)}.c2x.k1 .g1 b{border-color:rgba(107,80,176,.45)}
.c2x.k2 .g2{background:rgba(8,82,114,.1)}.c2x.k2 .g2 i{background:var(--mkg,var(--acc))}.c2x.k2 .g2 b{border-color:rgba(8,82,114,.45)}
.c2x.k3 .g3{background:rgba(194,65,140,.1)}.c2x.k3 .g3 i{background:var(--ct)}.c2x.k3 .g3 b{border-color:rgba(194,65,140,.45)}
.ck-a{color:var(--acc);display:grid;place-items:center}.ck-a svg{width:22px;height:13px}
.ck-fl{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.ck-s{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid rgba(8,82,114,.22);border-radius:10px;background:#fff;font-size:14px;font-weight:500;line-height:1.2;color:var(--fg);opacity:.35;transition:opacity .45s,border-color .45s,box-shadow .45s}
.ck-s i{flex:none;width:12px;height:12px;border-radius:50%;background:#c9dce5;transition:background .45s}
.c2x.k1 .ck-s.k1,.c2x.k2 .ck-s.k2,.c2x.k3 .ck-s.k3{opacity:1}
.c2x.k1 .ck-s.k1{border-color:var(--ce)}.c2x.k1 .ck-s.k1 i{background:var(--ce)}
.c2x.k2 .ck-s.k2{border-color:var(--mkg,var(--acc))}.c2x.k2 .ck-s.k2 i{background:var(--mkg,var(--acc))}
.c2x.k3 .ck-s.k3{border-color:var(--ct)}.c2x.k3 .ck-s.k3 i{background:var(--ct)}
.ck-dn{width:12px;height:8px;align-self:center;color:#8db4c6}
/* topology: icon, title, text items */
.tpi{display:block;padding:18px 20px;border-color:rgba(8,82,114,.12);background:transparent}
.tpi:hover,.tpi.on{background:#fff}
.tpi .cq-ic{display:block;width:40px;height:40px;margin:0 0 12px}
.tpi-h{font-size:18px}.tpi-p{margin-top:6px;font-size:15px;line-height:1.55}
.tps{container-type:inline-size}
.o-pan .pnl{position:absolute;top:0;right:0;bottom:0;width:31.5%;background:#fff;border-left:1px solid rgba(8,82,114,.16);box-shadow:-14px 0 30px rgba(4,46,64,.14);transform:translateX(16px);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.o-pan .pnl img{position:static;display:block;width:100%;height:auto;filter:none;transform:none}
.tps[data-k=pan] .pnl{transform:none}
.o-act .dm{position:absolute;inset:0;background:rgba(236,243,246,.72)}
.am{position:absolute;top:2.01cqw;right:1.35cqw;display:flex;flex-direction:column;align-items:flex-end;gap:max(5px,.6cqw);font-size:max(10px,1.3cqw);line-height:1.2;transform:translateY(6px);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.tps[data-k=act] .am{transform:none}
.am-b{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-width:9.85cqw;height:max(22px,2.74cqw);padding:0 1em;border:1px solid var(--mkg,var(--acc));border-radius:99px;background:#fff;color:var(--acc);box-shadow:0 0 0 3px rgba(8,82,114,.14)}
.am-b svg{width:.85em;height:.6em}
.am-m{display:flex;flex-direction:column;min-width:max(150px,16cqw);padding:.4em 0;background:#fff;border-radius:4px;box-shadow:0 10px 28px rgba(4,46,64,.2),0 0 0 1px rgba(4,46,64,.06)}
.am-m span{padding:.62em 1.1em;color:#3b4850;white-space:nowrap}
/* setup: drag and drop rebuild */
.sux{position:relative}
.sv{position:relative;background:#fff;border:1px solid rgba(8,82,114,.16);border-radius:14px;overflow:hidden;font-size:12px;line-height:1.3;color:#1f2a30}
.sv-b{display:flex;justify-content:space-between;align-items:center;background:var(--acc);color:#fff;padding:10px 16px;font-size:14.5px}.sv-b i{font-style:normal;font-size:17px;line-height:1}
.sv-g{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;padding:14px 16px 0}
.sv-f small{display:block;font-size:10.5px;color:#55636b}
.sv-f span{display:block;margin-top:4px;border:1px solid #d3dce1;border-radius:4px;padding:6px 8px;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-t{margin:14px 16px 0;border:1px solid #e1e8ec;border-radius:6px;padding:10px 12px 12px}
.sv-th{display:grid;grid-template-columns:28% 9% 26% 9% 28%;text-align:center;font-size:11px;color:#55636b}
.sv-th span:nth-child(2){grid-column:3}.sv-th span:nth-child(3){grid-column:5}
.sv-cv{position:relative;aspect-ratio:100/40;margin-top:6px}
.sv-lk{position:absolute;top:2%;font-size:11px;color:var(--acc);padding:2px 5px;border-radius:4px;white-space:nowrap;transition:background .25s}
.sv-lk.l{left:-5px}.sv-lk.r{right:-5px}
.sv-w{position:absolute;top:60%;height:1.5px;width:9%;background:#8aa0ab;transform:scaleX(0);transition:transform .45s ease-out}.sv-w.a{left:28%;transform-origin:left}.sv-w.b{left:63%;transform-origin:right}
.sv-n{position:absolute;box-sizing:border-box;display:flex;align-items:center;gap:7px;height:44px;padding:0 10px;min-width:0;border:1px solid var(--mkg,var(--acc));border-radius:5px;background:#fff;font-size:11px;top:60%;transform:translateY(-50%);transition:left .7s cubic-bezier(.45,.05,.3,1),top .7s cubic-bezier(.45,.05,.3,1),opacity .25s,box-shadow .3s}
.sv-n span{min-width:0;flex:1}.sv-n b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sv-n small{display:block;font-size:10px;color:#55636b;white-space:nowrap}
.sv-n.f{left:37%;width:26%}.sv-n.e{left:0;width:28%}.sv-n.t{left:72%;width:28%}
.sv-ie,.sv-if,.sv-it{flex:none}
.sv-ie{width:13px;height:13px;border-radius:3px;background:#4b2d83}
.sv-if{width:14px;height:14px;background:#13a07e;clip-path:polygon(0 0,100% 0,62% 52%,62% 100%,38% 86%,38% 52%)}
.sv-it{width:16px;height:16px;border-radius:50%;background:#d4549a;color:#fff;font-size:9px;font-style:normal;font-weight:600;display:grid;place-items:center}
.sv-dd{position:absolute;top:15%;z-index:2;display:flex;flex-direction:column;padding:4px;background:#fff;border-radius:6px;box-shadow:0 10px 26px rgba(4,46,64,.18),0 0 0 1px rgba(4,46,64,.06);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .25s,transform .25s}
.sv-dd.l{left:0;width:36%}.sv-dd.r{right:0;width:40%}
.sv-dd>span{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:4px;font-size:10.5px;min-width:0;transition:background .2s}
.sv-dd>span>span{min-width:0}.sv-dd b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sv-dd small{display:block;font-size:10px;color:#55636b}
.sv-cur{position:absolute;z-index:4;width:16px;height:19px;left:46%;top:96%;opacity:0;filter:drop-shadow(0 2px 3px rgba(4,46,64,.25));transition:left .7s cubic-bezier(.45,.05,.3,1),top .7s cubic-bezier(.45,.05,.3,1),opacity .3s,transform .15s}
.sv-ft{display:flex;justify-content:flex-end;gap:8px;padding:14px 16px}
.sv .bt{padding:6px 14px;border-radius:99px;border:1px solid var(--mkg,var(--acc));color:var(--acc);font-size:11.5px;background:#fff}
.sv-ft .bt.p{background:#e9eef0;border-color:#e9eef0;color:#6b7a82;transition:background .4s,color .4s,border-color .4s}
/* resting state: only the filter on the canvas */
.sv .sv-n.e,.sv .sv-n.t{opacity:0;z-index:3;top:24%}.sv .sv-n.e{left:1%}.sv .sv-n.t{left:61%}
/* the story, one class per step (cumulative; later rules win) */
.sv.s1 .sv-cur{opacity:1}
.sv.s2 .sv-cur{left:13%;top:7%}
.sv.s3 .sv-lk.l{background:#dfeaf0}.sv.s3 .sv-dd.l{opacity:1;transform:none}.sv.s3 .sv-cur{transform:scale(.88)}
.sv.s4 .sv-cur{left:9%;top:26%;transform:none}.sv.s4 .sv-dd.l .i1{background:#eef4f7}
.sv.s5 .sv-dd.l .i1{background:#dfeaf0}.sv.s5 .sv-n.e{opacity:1;left:1%;top:24%;box-shadow:0 10px 22px rgba(4,46,64,.22)}.sv.s5 .sv-cur{transform:scale(.88)}
.sv.s6 .sv-dd.l{opacity:0;transform:translateY(-4px)}.sv.s6 .sv-lk.l{background:none}.sv.s6 .sv-n.e{left:40%;top:64%}.sv.s6 .sv-cur{left:46%;top:64%}.sv.s6 .sv-n.f{box-shadow:0 0 0 3px rgba(8,82,114,.2)}
.sv.s7 .sv-n.e{left:0;top:60%;box-shadow:none}.sv.s7 .sv-n.f{box-shadow:none}.sv.s7 .sv-w.a{transform:none}.sv.s7 .sv-cur{transform:none}
.sv.s8 .sv-cur{left:88%;top:7%}
.sv.s9 .sv-lk.r{background:#dfeaf0}.sv.s9 .sv-dd.r{opacity:1;transform:none}.sv.s9 .sv-cur{transform:scale(.88)}
.sv.s10 .sv-cur{left:69%;top:26%;transform:none}.sv.s10 .sv-dd.r .i1{background:#eef4f7}
.sv.s11 .sv-dd.r .i1{background:#dfeaf0}.sv.s11 .sv-n.t{opacity:1;left:61%;top:24%;box-shadow:0 10px 22px rgba(4,46,64,.22)}.sv.s11 .sv-cur{transform:scale(.88)}
.sv.s12 .sv-dd.r{opacity:0;transform:translateY(-4px)}.sv.s12 .sv-lk.r{background:none}.sv.s12 .sv-n.t{left:40%;top:64%}.sv.s12 .sv-cur{left:46%;top:64%}.sv.s12 .sv-n.f{box-shadow:0 0 0 3px rgba(8,82,114,.2)}
.sv.s13 .sv-n.t{left:72%;top:60%;box-shadow:none}.sv.s13 .sv-n.f{box-shadow:none}.sv.s13 .sv-w.b{transform:none}.sv.s13 .sv-cur{transform:none}
.sv.s14 .sv-cur{opacity:0}
.sv.s15 .sv-ft .bt.p{background:var(--acc);border-color:var(--acc);color:#fff}
.sv.rs *{transition:none!important}
.su-rp{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font:inherit;font-size:15px;font-weight:500;color:var(--acc);background:#fff;border:1px solid rgba(8,82,114,.3);border-radius:99px;padding:8px 16px;cursor:pointer;transition:border-color .2s,transform .2s}
.su-rp:hover{border-color:var(--mkg,var(--acc));transform:translateY(-1px)}.su-rp:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:2px}.su-rp svg{width:16px;height:16px}.su-rp[hidden]{display:inline-flex;visibility:hidden}
@media(max-width:560px){.sv{font-size:10.5px}.sv-b{font-size:13px;padding:9px 12px}.sv-g{padding:12px 12px 0}.sv-t{margin:12px 12px 0;padding:8px}.sv-cv{aspect-ratio:100/70}.sv-n{padding:0 6px;gap:4px;font-size:9.5px;height:34px}.sv-n small{font-size:9px}.sv-n .sv-ie,.sv-n .sv-if,.sv-n .sv-it{display:none}.sv-lk{font-size:10px}.sv-dd.l{width:46%}.sv-dd.r{width:50%}.sv-dd>span{font-size:9.5px;padding:4px 5px}.sv-ft{padding:12px}
 .tpi{padding:14px 16px}.c2x{max-width:none}.ck-s{font-size:13px;padding:9px 10px;gap:7px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.ck-r,.ck-r *,.ck-s,.ck-s *,.tpo,.tpo *,.tpi,.sv *{transition:none!important}}
/* Case Study 02 R13: solid text, hero depth, real pill icons, routing lens, topology swap, picker setup */
/* text: no fades, solid colors */
.cs2 .hero.mk::after{display:none}
.cs2 .mu,.cs2 .hb-facts dt,.cs2 .hsub,.cs2 .lede,.cs2 .feat p+p,.cs2 .gc,.cs2 figcaption,.cs2 .tpi-p,.cs2 .c2i-t p,.cs2 .cq p,.cs2 .bf p,.cs2 .refl p,.cs2 .f2n p,.cs2 .pm{color:#2c3542}
.cs2 .mu{color:#3d4757}
.cs2 .zm{color:var(--acc)}
.cs2 .c2g .gc{color:#2c3542}
.cs2 .sv-ft .bt.p{color:#46555d}
/* hero: centered graphic on layered network planes */
.cs2 .hb-v{align-self:center;padding-top:0;position:relative}
.c2h .dt-bg{display:none}
.cs2 .hb-v .nxw{position:relative;z-index:1}
.lyr{position:absolute;z-index:0;left:0;top:50%;width:118%;transform:translateY(-50%);pointer-events:none}
.lyr svg{display:block;width:100%;height:auto;overflow:visible}
.lyr .pl{fill:rgba(225,237,242,.5);stroke:rgba(8,82,114,.16);stroke-width:1}
.lyr .ln{stroke:#c9dce5;stroke-width:1}
.lyr .vt{stroke:#c9dce5;stroke-width:1;stroke-dasharray:3 4}
.lyr .nn{fill:#8db4c6}
.lyr .hn{fill:#1f7aa0}
.lyr .hr{fill:none;stroke:#1f7aa0;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:lyrp 4.8s ease-out infinite;animation-delay:calc(var(--j)*1.2s);opacity:0}
@keyframes lyrp{0%{transform:scale(.8);opacity:.6}70%,100%{transform:scale(3.2);opacity:0}}
/* pills: real icons */
.cs2 .ni{width:16px;height:16px;border-radius:0;clip-path:none;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.cs2 .ni.ie{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11h-4v3H8v-3H4z'/%3E%3Cpath d='M9 9v2M12 9v2M15 9v2'/%3E%3C/svg%3E");background:#5b3f9e}
.cs2 .ni.if{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5h17l-6.5 7.5V19l-4-2v-4.5z'/%3E%3C/svg%3E");background:var(--mkg,var(--acc))}
.cs2 .ni.it{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.3 5.2L4 16.9 7.1 20l5.4-5.4a4 4 0 0 0 5.2-5.3l-2.5 2.5-2.3-.6-.6-2.3z'/%3E%3C/svg%3E");background:#b23b80}
/* challenge: a reading window over dense routing rules */
.rlx{margin:28px 0 0;max-width:520px}
.rl-f{position:relative;overflow:hidden;border-radius:14px;background:#f5f9fa;border:1px solid #c9dce5;padding:14px 0;cursor:ns-resize;touch-action:pan-y;--y:0px;--h:72px}
.rl-d,.rl-c{display:flex;flex-direction:column;gap:6px;padding:0 22px;font-size:12px;line-height:18px;white-space:nowrap}
.rl-c{position:absolute;inset:14px 0;background:#fff;-webkit-clip-path:inset(var(--y) 8px calc(100% - var(--y) - var(--h)) 8px round 10px);clip-path:inset(var(--y) 8px calc(100% - var(--y) - var(--h)) 8px round 10px)}
.rl-r{display:flex;align-items:center;gap:6px}
.rl-t{display:inline-flex;align-items:center;gap:5px;color:#0a2a38;font-weight:500}
.rl-t i{flex:none;width:9px;height:9px;background:#085272;border-radius:2px}
.rl-t.f i{border-radius:0;background:#1f7aa0;clip-path:polygon(0 0,100% 0,62% 52%,62% 100%,38% 86%,38% 52%)}
.rl-t.t i{border-radius:50%;background:#085272}
.rl-a{color:#1f7aa0;font-weight:600}
.rl-d .rl-t{color:transparent;background:#c9dce5;border-radius:3px}
.rl-d .rl-a{color:transparent}
.rl-d .rl-t i{opacity:0}
.rl-d .rl-r:nth-child(3n+1) .rl-t.f{background:#8db4c6}
.rl-o{position:absolute;left:8px;right:8px;top:calc(14px + var(--y));height:var(--h);border-radius:10px;box-shadow:inset 0 0 0 2px #085272,0 0 0 5px rgba(8,82,114,.08);pointer-events:none}
.rl-h{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;font-weight:500;color:var(--acc)}
.rl-h svg{flex:none;width:18px;height:18px}
/* topology: map left, items right, icon beside heading, light states */
.tpg{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.tps{order:-1}
.tpi{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;align-items:center;padding:14px 16px;border-color:rgba(8,82,114,.14);background:#fff;box-shadow:none;transition:background .2s,border-color .2s,box-shadow .2s}
.tpi .cq-ic{display:block;width:28px;height:28px;margin:0;grid-row:1}
.tpi .cq-ic svg{width:100%;height:100%}
.tpi-h{grid-column:2;grid-row:1}
.tpi-p{grid-column:1/-1;margin-top:8px}
.tpi:hover,.tpi.on{background:rgba(8,82,114,.045);border-color:rgba(8,82,114,.28);box-shadow:inset 3px 0 0 var(--mkg,var(--acc))}
.tpi:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:2px}
.o-pan .pnl{border-left:0}
.o-pan .pnl::before{content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:calc(100%*3/700);min-width:1.5px;background:#1f85b0}
/* setup: picker modal, then drag onto the filter */
.ft .su-rp{margin-top:20px}
.sv-mo{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(10,32,44,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}
.sv.mo-e .sv-mo,.sv.mo-t .sv-mo{opacity:1;visibility:visible;transition:opacity .3s}
.sv-md{visibility:hidden}.sv.mo-e .sv-md.e,.sv.mo-t .sv-md.t{visibility:visible}
.sv-md{grid-area:1/1;width:min(84%,440px);background:#fff;border-radius:8px;box-shadow:0 18px 40px rgba(4,46,64,.25);overflow:hidden;opacity:0;transform:translateY(8px) scale(.98);transition:opacity .3s,transform .3s}
.sv.mo-e .sv-md.e,.sv.mo-t .sv-md.t{opacity:1;transform:none}
.sv-mh{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:13px;font-weight:500;border-bottom:1px solid #e1e8ec}.sv-mh i{font-style:normal;font-size:15px;line-height:1}
.sv-tb{display:flex;gap:16px;padding:8px 14px 0;font-size:11px;border-bottom:1px solid #e1e8ec}.sv-tb span{padding-bottom:7px;color:#3b4850}.sv-tb .on{color:var(--acc);box-shadow:inset 0 -2px 0 var(--mkg,var(--acc))}
.sv-mc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);min-height:0}.sv-mc.one{grid-template-columns:minmax(0,1fr)}
.sv-mc ul{list-style:none;margin:0;padding:6px 0}
.sv-dl{border-right:1px solid #e1e8ec}
.sv-dl li{padding:6px 14px}.sv-dl li.on{background:#e8f0f4;box-shadow:inset 2px 0 0 var(--mkg,var(--acc))}.sv-dl b{display:block;font-weight:500}.sv-dl small{display:block;font-size:10px;color:#3b4850}
.sv-pl li{display:flex;align-items:center;gap:8px;padding:6px 14px;transition:background .2s}
.sv-pl li>span:not(.cb){min-width:0}
.sv-pl .sv-it{width:15px;height:15px;font-size:8.5px}
.sv-pl li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb{flex:none;display:grid;place-items:center;width:13px;height:13px;border:1.5px solid #8aa0ab;border-radius:3px;background:#fff;transition:background .2s,border-color .2s}.cb svg{width:10px;height:10px;opacity:0;transition:opacity .2s}
.sv.pk-e .sv-md.e .p1,.sv.pk-t .sv-md.t .p1{background:#eef4f7}
.sv.pk-e .sv-md.e .p1 .cb,.sv.pk-t .sv-md.t .p1 .cb{background:var(--mkg,var(--acc));border-color:var(--mkg,var(--acc))}
.sv.pk-e .sv-md.e .p1 .cb svg,.sv.pk-t .sv-md.t .p1 .cb svg{opacity:1}
.sv-mf{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid #e1e8ec}
.sv-mf .bt.p{background:var(--acc);color:#fff;transition:background .2s}
.sv .bt.on{background:#0a6489!important;border-color:#0a6489!important}
.sv-lk.on{background:#dfeaf0}
.sv-cur{left:46%;top:92%}
.sv.cur .sv-cur{opacity:1}.sv.pr .sv-cur{transform:scale(.86)}
.sv.in-e .sv-n.e,.sv.in-t .sv-n.t{opacity:1;box-shadow:0 0 0 3px rgba(8,82,114,.14)}
.sv.lf .sv-n.e,.sv.lft .sv-n.t{box-shadow:0 10px 22px rgba(4,46,64,.22)}
.sv.dg-e .sv-n.e,.sv.dg-t .sv-n.t{left:40%;top:64%}
.sv.fh .sv-n.f{box-shadow:0 0 0 3px rgba(8,82,114,.2)}
.sv.ok-e .sv-n.e{left:0;top:60%;box-shadow:none}.sv.ok-t .sv-n.t{left:72%;top:60%;box-shadow:none}
.sv.ok-e .sv-w.a,.sv.ok-t .sv-w.b{transform:none}
.sv.cl .sv-ft .bt.cl{background:var(--acc);border-color:var(--acc);color:#fff}
@media(max-width:960px){.tpg{grid-template-columns:minmax(0,1fr)}.cs2 .hb-v{padding:15% 0}.lyr{left:-4%;width:108%}}
@media(max-width:560px){.sv-md{width:92%}.sv-mc{grid-template-columns:minmax(0,1fr)}.sv-dl{display:none}.sv-mh{font-size:12px;padding:8px 10px}.sv-tb{padding:6px 10px 0}.sv-pl li{padding:5px 10px}.sv-mf{padding:8px 10px}
 .rl-d,.rl-c{font-size:10.5px;padding:0 14px}.rl-r{gap:4px}.rl-t{gap:4px}}
@media(prefers-reduced-motion:reduce){.lyr .hr{animation:none;opacity:0}.sv-mo,.sv-md,.cb,.cb svg{transition:none!important}}
/* Case Study 02 R14: hero traffic map, topology rebuild, Assurance style topology items, connect-by-drag setup */
.db-bg{position:absolute;z-index:0;top:56px;right:-210px;width:min(50vw,700px);aspect-ratio:1;pointer-events:none;-webkit-mask-image:radial-gradient(circle at 62% 50%,#000 46%,transparent 72%);mask-image:radial-gradient(circle at 62% 50%,#000 46%,transparent 72%)}
.db-fx{display:block;width:100%;height:100%;opacity:.45;animation:dbFx 1.2s cubic-bezier(.2,.7,.2,1) both .1s}
.db-fp{fill:#fff;stroke:#a9c9d7;stroke-width:1.4}
.db-pt{fill:#eef4f7;stroke:#b6cfda;stroke-width:1.2}.db-pt.on{fill:#d5e6ee;stroke:#1f7aa0}
.db-led{fill:#d5e1e7}.db-led.on{fill:#3d93b8}
.db-st path{fill:none;stroke:#9cc2d3;stroke-width:1.6;stroke-linecap:round}
.db-tr path{fill:none;stroke:#085272;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:8 92;stroke-dashoffset:100;animation:dbTr 3.4s linear infinite;animation-delay:var(--t)}
.db-tr path.o{stroke:#1f7aa0}
.db-hg{fill:none;stroke:#d3e4ec;stroke-width:1.2;stroke-dasharray:2 6}
.db-tk path{stroke:#9cc2d3;stroke-width:1.4}
.db-ho{fill:#fff;stroke:#1f7aa0;stroke-width:2}.db-hi{fill:#085272}.db-hf{fill:#fff}
.db-hp{fill:none;stroke:#1f7aa0;stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:dbHp 3.4s ease-out infinite}
.db-tl circle{fill:#fff;stroke:#1f7aa0;stroke-width:1.8}.db-tl .w{fill:none;stroke:#085272;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
body.cs2:not(.ptd) .db-fx,body.cs2:not(.ptd) .db-tr path,body.cs2:not(.ptd) .db-hp,body.cs2:not(.ptd) .db-dr{animation-play-state:paused}
@keyframes dbTr{to{stroke-dashoffset:0}}
@keyframes dbHp{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
/* t254/t256 hero mockups only (HERO=q1|q2), not published */
.db-fx.q{opacity:1;animation-duration:1.6s}
.db-sl path{fill:none;stroke:#085272;stroke-linecap:round}.db-rb path{fill:none;stroke:#1f7aa0;stroke-width:22;stroke-opacity:.035;stroke-linecap:round}
.db-dr{animation:dbDr 28s ease-in-out infinite alternate}@keyframes dbDr{to{transform:translate(-10px,8px)}}
@keyframes dbFx{from{opacity:0;transform:translateX(24px)}}
@media(max-width:960px){.db-bg{top:auto;bottom:-60px;right:-240px;width:560px}}
@media(max-width:560px){.db-bg{right:-300px;bottom:-40px;width:480px}}
/* challenge: old topology rebuilt on the new platform */
.rbx{margin:28px 0 0;max-width:520px}
.rbx svg{display:block;width:100%;height:auto;font-size:12px;font-weight:500}
.rbx .fr{fill:#fff;stroke:#c9dce5}
.rbx text{fill:#2c3542}
.rbx .hn{opacity:0;transition:opacity .6s ease .2s}
.rbx .ols path{stroke:#b8c4ca;stroke-width:1.2;fill:none;transition:opacity .5s}
.rbx .ols path:nth-child(3n){stroke-dasharray:3 3}
.rbx .nl{fill:none;stroke:#1f7aa0;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease-out;transition-delay:calc(var(--j)*90ms)}
.rbx .cn{transform:translate(var(--ox),var(--oy));transition:transform .9s cubic-bezier(.45,.05,.25,1);transition-delay:calc(var(--d)*70ms)}
.rbx .cn .b{fill:#f3f5f6;stroke:#b8c4ca;stroke-width:1.4;transition:fill .5s,stroke .5s}
.rbx .cn .g{fill:none;stroke:#93a3ab;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.rbx .cn .lbl{fill:#dfe5e8;transition:fill .5s}
.rbx .cn:nth-child(odd) .lbl{transform:translate(6px,-4px)}
.rbx .cn .lbl{transition:fill .5s,transform .9s}
.rbx.mv .ols path{opacity:0}
.rbx .cl{transition:opacity .6s}.rbx.mv .ho,.rbx.mv .cl{opacity:0;transition:opacity .6s}
.rbx.mv .hn{opacity:1}
.rbx.mv .cn{transform:translate(var(--nx),var(--ny))}
.rbx.mv .cn .b{fill:#e1edf2;stroke:#1f7aa0}
.rbx.mv .cn.s .b{fill:#085272;stroke:#085272}
.rbx.mv .cn .g{stroke:#085272}
.rbx.mv .cn.s .g{stroke:#fff}
.rbx.mv .cn .lbl{fill:#c9dce5;transform:none}
.rbx.ln .nl{stroke-dashoffset:0}
/* topology items: same treatment as Assurance (.hzi) */
.tpi{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 14px;align-items:center;align-content:start;padding:16px 18px;border-radius:14px;border:1px solid rgba(8,82,114,.18);background:#fff;box-shadow:none;transform:none;transition:border-color .2s,background .2s,box-shadow .2s}
.tpi .cq-ic{grid-row:1;width:40px;height:40px;margin:0}
.tpi .cq-ic svg{width:40px;height:40px}
.tpi-h{grid-column:2;grid-row:1;font-weight:500;font-size:17px;letter-spacing:-.01em;line-height:1.3}
.tpi-p{grid-column:1/-1;margin-top:10px;font-size:15px;line-height:1.5}
.tpi:hover,.tpi.on{border-color:rgba(8,82,114,.4);background:#f2f7f9;box-shadow:0 10px 24px -18px rgba(4,46,64,.5);transform:none}
.tpi:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:2px}
/* setup: placed objects, connections dragged by the cursor */
.sw-cv{position:relative;aspect-ratio:100/52;margin-top:8px}
.sw-ln{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sw-ln path{fill:none;stroke:#085272;stroke-width:1.5}
.sw-ln path.dg{stroke:#1f7aa0;stroke-dasharray:4 3}
.sw-n{position:absolute;box-sizing:border-box;display:flex;align-items:center;gap:7px;height:40px;padding:0 10px;border:1px solid var(--mkg,var(--acc));border-radius:5px;background:#fff;font-size:11px;transform:translateY(-50%);width:27%;opacity:0;transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.sw-n.f{width:24%}
.sw-n>span{min-width:0;flex:1}
.sw-n b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-n small{display:block;font-size:10px;color:#3b4850;white-space:nowrap}
.sw .sw-n:not(.in){transform:translateY(calc(-50% - 8px)) scale(.96)}
.sw-n.in{opacity:1}
.sw-n.hl{box-shadow:0 0 0 3px rgba(8,82,114,.18)}
.sw-it{flex:none;width:16px;height:16px;border-radius:50%;background:#1f7aa0;color:#fff;font-size:9px;font-style:normal;font-weight:600;display:grid;place-items:center}
.sw-n .hd{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#fff;border:1.5px solid var(--mkg,var(--acc));box-sizing:border-box;transition:background .2s}
.sw-n .hd.l{left:-5px}.sw-n .hd.r{right:-5px}
.sw-n .hd.on{background:var(--mkg,var(--acc))}
.sw-cur{position:absolute;z-index:4;width:16px;height:19px;left:0;top:0;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(4,46,64,.25));transition:opacity .3s,transform .15s;transform-origin:2px 2px}
.sw.cur .sw-cur{opacity:1}
.sw.pr .sw-cur{transform:scale(.86)}
.sw.rs *{transition:none!important}
/* t251 challenge, second act: click a switch, Add Tool, the new tool is linked and carries traffic */
.rbx .tb-bx{fill:#fff;stroke:#c9dce5;filter:drop-shadow(0 4px 10px rgba(4,46,64,.14))}
.rbx .tb-mn{opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .25s cubic-bezier(.2,.7,.2,1)}.rbx.q-mn .tb-mn{opacity:1;transform:none}
.rbx .tb-mi rect{fill:#fff}.rbx.q-mt .tb-mi.t rect{fill:#e1edf2}
.rbx .tb-sel{fill:none;stroke:#1f9ed1;stroke-width:2;opacity:0;transition:opacity .2s}.rbx.q-sl .tb-sel{opacity:1}
.rbx .tb-n{opacity:0;transition:opacity .3s}.rbx.q-dr .tb-n{opacity:1}.rbx .tb-nm{opacity:0;transform:translateY(5px) scale(.85);transform-box:fill-box;transform-origin:center;transition:opacity .4s .1s,transform .45s .1s cubic-bezier(.3,1.4,.5,1)}.rbx.q-dr .tb-nm{opacity:1;transform:none}
.rbx .tb-po{transform:scale(.4);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}.rbx.q-dr .tb-po{transform:none}
.rbx .tb-n .b{fill:#e1edf2;stroke:#1f7aa0;stroke-width:1.4}
.rbx .tb-n .g.w{stroke-width:2.1}.rbx .tb-n .g{fill:none;stroke:#085272;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rbx .tb-k{fill:none;stroke:#1f7aa0;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease-out}.rbx.q-lk .tb-k{stroke-dashoffset:0}
.rbx .tb-pk{fill:#1f9ed1;stroke:#fff;stroke-width:1.5;opacity:0}
.rbx .tb-c{opacity:0;transition:opacity .3s}.rbx.q-cur .tb-c{opacity:1}.rbx.q-pr .tb-c path{transform:scale(.86)}
/* t250: add edge port, burst links, traffic pulses */
.sw-th{align-items:start}.sw-th>span{display:flex;flex-direction:column;align-items:center;gap:8px}
.sw-add{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px dashed var(--mkg,var(--acc));border-radius:99px;color:var(--acc);font-size:11px;font-weight:500;white-space:nowrap;background:#f6fafc;transition:background .2s}
.sw-add.on{background:#dfeaf0}
.sw-ln path.au{stroke-dasharray:1;stroke-dashoffset:1;animation:swAu .32s ease-out forwards}
@keyframes swAu{to{stroke-dashoffset:0}}
.sw-ln circle{fill:#1f9ed1;stroke:#fff;stroke-width:1.5}
.sw-n.e3new{box-shadow:0 0 0 3px rgba(8,82,114,.18)}
.sw .sv-mo{z-index:3}.sw .sw-cur{z-index:5}
@media(max-width:560px){.sw-cv{aspect-ratio:100/72}.sw-n{height:34px;padding:0 6px;gap:4px;font-size:9.5px}.sw-n small{font-size:9px}.sw-n .sv-ie,.sw-n .sv-if,.sw-n .sw-it{display:none}.sw-add{height:24px;padding:0 7px;font-size:9px}.sw-th>span:last-child{justify-self:end;width:max-content;text-align:center}}
@media(prefers-reduced-motion:reduce){.db-fx,.db-dr{animation:none}.db-tr path,.db-hp{animation:none}.db-tr path{stroke-dasharray:none;opacity:.35}.db-hp{opacity:0}.rbx *,.sw *{transition:none!important}}
.db-dg .z{fill:#085272;fill-opacity:.018;stroke:#085272;stroke-opacity:.22;stroke-width:1.2;stroke-dasharray:4 5}
.db-dg .pl{fill:none;stroke:#085272;stroke-opacity:.2;stroke-width:1.2}
.db-dg .ln path,.db-dg .ln1{fill:none;stroke:#085272;stroke-opacity:.16;stroke-width:1}
.db-dg .u,.db-dg .n,.db-dg .t,.db-dg .c{fill:#fff;fill-opacity:.6;stroke:#085272;stroke-opacity:.26;stroke-width:1.2}
.db-dg .n{stroke-opacity:.34}
.db-dg .ul{stroke:#085272;stroke-opacity:.2;stroke-width:1.2;stroke-linecap:round}
/* t257: broker diagram sits top right and bleeds off the top and right edges, like the Marketplace hero grid */
.db-bg.q2{top:20px;right:-120px;width:min(50vw,720px);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 80% 12%,#000 28%,transparent 72%);mask-image:radial-gradient(ellipse 80% 70% at 80% 12%,#000 28%,transparent 72%);opacity:.85}
@media(max-width:960px){.db-bg.q2{top:0;bottom:auto;right:-14vw;width:62vw;opacity:.7}}
@media(max-width:720px){.db-bg.q2{display:none}}
/* t257: on two columns the challenge text starts level with the top of the animation */
@media(min-width:961px){.cs2:not(.cs3) #challenge .c2i{grid-template-rows:auto auto;row-gap:0}.cs2:not(.cs3) #challenge .c2i>.rv:first-child{grid-row:1/3;display:grid;grid-template-rows:subgrid}.cs2:not(.cs3) #challenge .c2i>.c2i-t{grid-column:2;grid-row:2;margin-top:28px}}
/* t261: Discovery, Ideation, Built on the Platform and the Topology block stack the title and subheader above the text, the same way Assurance does (no title column with the text off to the right) */
.cs2:not(.cs3) :is(#discovery,#ideation,#platform) .c2i,.cs2:not(.cs3) .tp .f2-t{display:block}
.cs2:not(.cs3) :is(#discovery,#ideation,#platform) .c2i-t,.cs2:not(.cs3) .tp .f2-t>div+div{margin-top:clamp(18px,2vw,26px);max-width:700px}
.cs2:not(.cs3) :is(#discovery,#ideation,#platform) .c2i-t p,.cs2:not(.cs3) .tp .f2-t p{max-width:none}
.cs2:not(.cs3) .tp .f2-t h3{margin-bottom:0}
/* t257: on phones the setup Select Edge Port popup keeps the desktop layout (device list beside the port checkboxes), scaled down */
@media(max-width:560px){.sw .sv-mc{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.sw .sv-dl{display:block}.sw .sv-dl li{padding:5px 10px;font-size:11px}.sw .sv-dl small{font-size:9px}.sw .sv-pl li{gap:6px;padding:5px 10px;font-size:11px}.sw .sv-tb{gap:12px;font-size:10.5px}}

/* t274: Data Broker hero background placed like the Marketplace grid (same box, mask and opacity) */
.db-bg.q2{top:84px;right:-30px;bottom:0;width:min(64%,900px);aspect-ratio:auto;-webkit-mask-image:radial-gradient(ellipse 70% 75% at 62% 42%,#000 35%,transparent 78%);mask-image:radial-gradient(ellipse 70% 75% at 62% 42%,#000 35%,transparent 78%);opacity:.75}
@media(max-width:960px){.db-bg.q2{top:40%;bottom:0;right:-20%;width:100%;opacity:.5}}
@media(max-width:720px){.db-bg.q2{display:none}}
/* t274: Marketplace challenge and outcome icon tiles: white tiles with a quiet blue edge so they read on the blue band; catalog window fits its tile */
body.cs-real:not(.cs2) :is(.cx-il,.cx-cat,.oi){background:#fff;border:1px solid rgba(0,114,163,.16);box-shadow:0 10px 24px -20px rgba(8,82,114,.35)}
@media(min-width:961px){.cs-real:not(.cs2) .cx-cat{height:auto;padding:20px 0}}
/* t274: Workflow outcome glyph matched to the other three so every tile keeps even padding */
body.cs-real:not(.cs2) .oi1{width:44px;height:50px}
/* t276: Marketplace Buyer journey stepper sits in its own slim toolbar, same family as the configuration card below */
.cs-real:not(.cs2) .hero .jt-w{display:flex;align-items:center;gap:0;margin-bottom:12px;padding:8px 18px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(10,20,40,.09);border-radius:14px;box-shadow:0 1px 2px rgba(20,40,90,.04)}
.cs-real:not(.cs2) .hero .jt-lb{margin:0 18px 0 0;padding-right:18px;border-right:1px solid rgba(10,20,40,.09);line-height:34px;white-space:nowrap}
@media(max-width:560px){.cs-real:not(.cs2) .hero .jt-w{display:block;padding:10px 14px 8px}.cs-real:not(.cs2) .hero .jt-lb{margin:0 0 2px;padding:0;border:0;line-height:1.3}}
.cs-real:not(.cs2) .hero .jt-w .jt{flex:1 1 auto;min-width:0}.cs-real:not(.cs2) .hero .jt-w .jt li{flex:none;white-space:nowrap}

/* t285: ndb hero bg is Bill's broker icon as one flat tint (opacity once on the group, so overlaps never darken), top right, bleeding off the right edge, fading toward the diagram */
.db-ic{opacity:.2}
.db-ic .ar,.db-ic .lt{fill:none;stroke:#085272;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.db-ic .lt{stroke-width:18}
.db-ic .dt,.db-ic .ltf{fill:#085272;stroke:none}
.db-bg.q2{top:-56px;right:-384px;bottom:auto;width:1004px;aspect-ratio:502/391;opacity:1;-webkit-mask-image:linear-gradient(200deg,#000 12%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.12) 60%,transparent 74%);mask-image:linear-gradient(200deg,#000 12%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.12) 60%,transparent 74%)}
@media(max-width:960px){.db-bg.q2{top:-30px;right:-280px;bottom:auto;width:602px;opacity:1}}
@media(max-width:720px){.db-bg.q2{display:none}}

/* t289: carousel prev/next stay perfect circles on phones and tablets; the caption wraps instead of squeezing them. Desktop (over 960px) unchanged */
@media(max-width:960px){.sctl .sbtn{flex:0 0 40px;width:40px;min-width:40px;height:40px;aspect-ratio:1;padding:0;display:inline-flex;align-items:center;justify-content:center}.sctl>.m:first-child{flex:1 1 auto;min-width:0;text-wrap:balance}}

/* ===== Case Study 03: Network Assurance Engine (product blue, epoch motif) ===== */
body.cs2.cs3{--acc:#0569c0;--acc2:#3390ff;--bg:#fbfcfd;--vis:#e8f2fc}
/* hero and odd sections: the Marketplace near white; even sections: the former hero blue */
.cs3 .c2h{background:#fbfcfd}
.cs3.cs-real main>section.band{background:#eef4fd}
.cs3.cs-real main>section:nth-of-type(n){background:transparent}.cs3.cs-real main>section:nth-of-type(odd){background:#eef4fd}
.cs3 .frame.real{background-image:radial-gradient(260px circle at var(--mx,-400px) var(--my,-400px),rgba(5,105,192,.08),transparent 70%),radial-gradient(120% 90% at 50% 0%,#fff 0%,#f1f7fe 70%)}
.cs3 .pn a::before{background:radial-gradient(circle at var(--ox,50%) 100%,rgba(5,105,192,.1),transparent 70%),#eef4fd}
.cs3 .c2c .cmp,.cs3.cs2 .c2c .cmp{aspect-ratio:1400/1032;border-color:rgba(5,105,192,.18)}
.cs3 .c2c .cmp .cl{border-color:rgba(5,105,192,.18)}
.cs3 .c2c .cmp .ch i{box-shadow:0 8px 20px -8px rgba(10,50,100,.5)}
.cs3 .su-rp{border-color:rgba(5,105,192,.3)}.cs3 .su-rp:hover{border-color:var(--mkg,var(--acc))}
.cs3 .fcap,.cs3 .hzi-p,.cs3 .pat p,.cs3 .ae-vd p,.cs3 .nq-c{color:#2c3542}
.cs3 .fcap{display:block;margin-top:12px;font-size:15px}
.cs3 .hb-v{position:relative}
.aew{position:relative;z-index:1;color:var(--fg)}
.ae-tl{position:relative}
.ae-day{display:block;font-size:13px;font-weight:500;color:#2c3542;margin:0 0 4px}
.ae-tr{position:relative;height:40px;cursor:pointer;touch-action:pan-y;margin:0 8px}
.ae-ln{position:absolute;left:-8px;right:-8px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:#c3d7ee}
.ae-e{position:absolute;top:50%;width:28px;height:40px;margin:-20px 0 0 -14px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;--z:1}
.ae-e.st-c{--c:#ff1744;--k:#c8102e}.ae-e.st-j{--c:#ff7a00;--k:#c25700}.ae-e.st-n{--c:#ffc400;--k:#a87c00}.ae-e.st-h{--c:#12b76a;--k:#0a8a4e}
.ae-e i{display:block;flex:none;width:calc(var(--s)*var(--z));height:auto;aspect-ratio:1;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1.2px var(--k);transition:transform .2s,box-shadow .2s}
.ae-e:hover i{transform:scale(1.25)}
.ae-e.on i{transform:scale(1.35);box-shadow:inset 0 0 0 1.2px var(--k),0 0 0 2.5px #fff,0 0 0 4px var(--mkg,var(--acc))}
.ae-e:focus-visible{outline:none}.ae-e:focus-visible i{box-shadow:inset 0 0 0 1.2px var(--k),0 0 0 2.5px #fff,0 0 0 4.5px var(--mkg,var(--acc))}
.ae-ax{position:relative;height:16px;margin:2px 8px 0;font-size:12px;color:#2c3542;white-space:nowrap}
.ae-ax span{position:absolute;transform:translateX(-50%)}.ae-ax span:first-child{transform:none}.ae-ax span:last-child{transform:translateX(-100%)}
.ae-sv{margin-top:22px;padding:16px 18px 18px;background:#fff;border:1px solid rgba(5,105,192,.16);border-radius:14px}
.ae-svh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;font-weight:600;margin-bottom:14px}
.ae-at{font-weight:400;font-size:13.5px;color:#2c3542;white-space:nowrap}.ae-at b{font-weight:600;color:var(--acc);font-variant-numeric:tabular-nums}
.ae-sv ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ae-sv li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0}
.ae-nr{display:inline-flex;align-items:center;gap:7px}
.ae-sv .sv-i{width:20px;height:20px;flex:none}
.ae-sl{font-size:13px;color:#2c3542}
.ae-n{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.ae-h,.hz-hint{display:flex;align-items:center;gap:7px;margin:14px 0 0;font-size:14.5px;color:#2c3542}
.ae-h svg,.hz-hint svg{width:18px;height:18px;color:var(--mkg,var(--acc));flex:none}
@media(max-width:560px){.ae-e{--z:.8}.ae-sv ul{gap:4px}.ae-nr{gap:4px}.ae-sv .sv-i{width:15px;height:15px}.ae-n{font-size:17px}.ae-sl{font-size:12px}.ae-sv{padding:14px 10px 16px}}
/* challenge: raw events of every severity settle onto the timeline, one circle per epoch */
.nz-f{position:relative;background:#fff;border:1px solid rgba(5,105,192,.16);border-radius:16px;padding:40px 16px 14px}
.nz-f svg{display:block;width:100%;height:auto;overflow:visible}
.nz-d{transform:translate(var(--x1),var(--y1));opacity:0;stroke:#fff;stroke-width:1}
html.js .nz:not(.nz-go) .nz-d{transform:translate(var(--x0),var(--y0));opacity:1;transition:none}
html.js .nz.nz-go .nz-d{transition:transform .95s cubic-bezier(.55,0,.3,1) calc(var(--j)*34ms),opacity .18s calc(var(--j)*34ms + .9s)}
.nz-s{fill:var(--sf);stroke:#fff;stroke-width:1.5;transform-box:fill-box;transform-origin:center;transform:scale(var(--sc));transition:transform .4s cubic-bezier(.3,1.5,.5,1),fill .3s}
.nz-b,.nz-t{stroke:#c9dbf0;stroke-width:1.5;fill:none}
.nz-l{position:absolute;top:12px;left:18px;font-size:13px;font-weight:500;color:#3a4250;transition:opacity .4s}
.nz-l.b{opacity:1;color:var(--acc);transition-delay:1.6s}.nz-l.a{opacity:0}
html.js .nz:not(.nz-go) .nz-l.a{opacity:1}html.js .nz:not(.nz-go) .nz-l.b{opacity:0;transition:none}
.nz figcaption{margin:0}.nz .su-rp{margin-top:12px}
.cs3 #challenge .cq{margin-top:clamp(44px,5vw,64px)}
/* stacked text blocks: title and subtitle above, text below at a readable measure */
.cs3 .c2i,.cs3 .f2-t{display:block}
.cs3 .c2i-t,.cs3 .f2-t>div+div{margin-top:clamp(18px,2vw,26px);max-width:700px}
.cs3 .c2i-t p,.cs3 .f2-t p{max-width:none}
.cs3 .f2-t h3{margin-bottom:0}
/* galleries */
.ae-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(40px,5vw,64px)}
.ae-g3 .shot .cr img{height:100%;object-fit:cover;transform:none}
.cs3 .ia+.fcap{margin-bottom:0}
.cs3 .cmp-t{display:block}.cs3 .cmp-t p{margin-top:8px;text-align:left}
.cs3 .pat p+p{margin-top:2px}
/* key screens: hover a detail to find it on the screen */
.cs3 .f2+.f2{margin-top:clamp(56px,6vw,88px);border-top:0}
.hz-s{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(5,105,192,.16);background:#fff}
.hz-c{display:block;width:100%;aspect-ratio:var(--ar);padding:0;border:0;background:#fff;cursor:zoom-in}
.hz-c img{display:block;width:100%;height:100%;object-fit:cover}
.hz-o{position:absolute;inset:0;pointer-events:none}
/* the detail lights up and the rest of the screen dims; one spotlight glides between details */
.hz-r{display:none}
.hz-sp{position:absolute;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 0 200vmax rgba(12,26,46,.46);opacity:0;transition:opacity .35s,left .5s cubic-bezier(.2,.7,.2,1),top .5s cubic-bezier(.2,.7,.2,1),width .5s cubic-bezier(.2,.7,.2,1),height .5s cubic-bezier(.2,.7,.2,1)}
.hz-sp.on{opacity:1}
.hzl{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:14px 0 0;padding:0}
.hzi{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 14px;align-items:center;align-content:start;text-align:left;width:100%;height:100%;padding:16px 18px;border-radius:14px;border:1px solid rgba(5,105,192,.18);background:#fff;font:inherit;color:inherit;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.hzi .cq-ic{grid-row:1;width:40px;height:40px;margin:0}.hzi .cq-ic svg{width:40px;height:40px}
.hzi-h{font-weight:500;font-size:17px;letter-spacing:-.01em;line-height:1.3}
.hzi-p{grid-column:1/-1;margin-top:10px;font-size:15px;line-height:1.5}
.hzi:hover,.hzi.hl,.hzi[aria-pressed=true]{border-color:rgba(5,105,192,.4);background:#f3f8fe;box-shadow:0 10px 24px -18px rgba(10,50,100,.5)}
.hzi:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:2px}
@media(max-width:960px){.hzl{grid-template-columns:minmax(0,1fr);gap:10px}}
/* relationships: click a path, the contract panel opens */
.dy-eps{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.dy-ep{display:flex;align-items:center;gap:8px;font-weight:500;white-space:nowrap}
.dy-ep i{width:14px;height:14px;border-radius:50%;background:#2c7be5;flex:none}.dy-ep.b i{background:#7a4bc4}
.dy-ln{flex:1;height:2px;min-width:20px;background:repeating-linear-gradient(90deg,#9db6d6 0 6px,transparent 6px 10px)}
.dy-k{display:block;font-size:11.5px;font-weight:500;color:#3d4a5c;line-height:1.2}
.dy-cl{display:flex;flex-direction:column;gap:8px}
.dy-c{border:1px solid #dbe6f2;border-radius:10px;background:#fff;transition:transform .55s cubic-bezier(.2,.7,.2,1),background .35s,border-color .35s}
.dy-c.cr{order:-1}
.dy[data-st="0"] .dy-c.cr,.dy[data-st="1"] .dy-c.cr{order:3}
.dy-c.cr{background:#fff4f6;border-color:#ffb8c4}
.dy[data-st="0"] .dy-c.cr,.dy[data-st="1"] .dy-c.cr{background:#fff;border-color:#dbe6f2}
.dy-ch{display:flex;align-items:center;gap:10px;padding:9px 12px}
.dy-ch .sv-i{width:18px;height:18px;flex:none}
.dy-cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.dy-cv{width:16px;height:16px;flex:none;color:#3d4a5c;transition:transform .35s}
.dy-cb{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.dy-cb>div{min-height:0;overflow:hidden}
.dy[data-st="0"] .dy-cb,.dy[data-st="1"] .dy-cb,.dy[data-st="2"] .dy-cb{grid-template-rows:0fr}
.dy:not([data-st]) .cr .dy-cv,.dy[data-st="3"] .cr .dy-cv{transform:rotate(90deg)}
.dy-t{list-style:none;margin:0;padding:2px 12px 12px 40px}
.dy-t li{display:flex;align-items:center;gap:8px;min-height:24px}
.dy-sj{margin-top:6px;font-weight:500}.dy-sj:first-child{margin-top:0}
.dy-sj .dy-k,.dy-fl .dy-k{display:inline;margin-right:2px}
.dy-fl{padding-left:14px}
.dy-e{padding-left:28px}.dy-e .sv-i{width:15px;height:15px;flex:none}.dy-e em{font-style:normal;color:#3d4a5c;margin-left:auto;white-space:nowrap}
.dy .cur,.fa .cur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:5;pointer-events:none;opacity:0;transform:translate(var(--cx,80%),var(--cy,90%));transition:transform .8s cubic-bezier(.45,0,.25,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(10,30,60,.3))}
.dy.cv .cur,.fa.cv .cur{opacity:1}
.cur.dn{transform:translate(var(--cx),var(--cy)) scale(.86)}
/* filtering flow, recreated from the design file */
.cs3 #d4{margin-top:clamp(56px,6vw,88px)}
.fa-w{margin-top:clamp(28px,3vw,40px)}
.fa{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(5,105,192,.16);border-radius:14px;padding:18px 20px 20px;font-size:13px;color:#1d2533}
.fa .a,.fa .b{transition:opacity .35s}
.fa .b{position:absolute;opacity:0}
.fa-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.fa-tt{position:relative;font-size:15px;font-weight:600}
.fa-va{position:relative;font-size:13px;color:var(--acc);font-weight:500;white-space:nowrap}
.fa-fb{display:flex;align-items:center;gap:10px;margin:12px 0 4px;padding:7px 10px;border:1px solid #d6e3f1;border-radius:8px;min-height:38px}
.fa-fb>svg{width:16px;height:16px;color:#3d4a5c;flex:none}
.fa-chs{display:flex;gap:6px;flex:1;min-width:0;overflow:hidden}
.fa-chp{flex:none;padding:3px 9px;border-radius:99px;background:#e2f0ff;color:#0b3d7a;font-size:12px;font-weight:500;white-space:nowrap;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.fa-chp.k1{background:#d8f5f1;color:#04594f}
.fa.s1 .k1,.fa.s2 .k2,.fa.s3 .k3,.fa.s4 .k4{opacity:1;transform:none}
.fa-chp:not(.k1){display:none}.fa.s2 .k2,.fa.s3 .k3,.fa.s4 .k4{display:inline-block}
.fa-rs{font-size:12.5px;color:var(--acc);font-weight:500}
.fa-ch{position:relative;height:190px;padding-top:24px}
.fa-bars{display:flex;align-items:flex-end;gap:10px;height:100%;padding-bottom:26px;border-bottom:1px solid #e3edf7;box-sizing:border-box;position:relative}
.fa-b{position:relative;flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;transition:flex-grow .6s cubic-bezier(.2,.7,.2,1),opacity .4s,margin .6s}
.fa-b i{display:block;width:100%;max-width:34px;height:var(--v);border-radius:3px 3px 0 0;background:var(--bc);transition:height .6s cubic-bezier(.2,.7,.2,1),background .4s,box-shadow .3s}
.fa-b.c-r{--bc:#ff1744}.fa-b.c-o{--bc:#ff7a00}.fa-b.c-y{--bc:#ffd600}.fa-b.c-t{--bc:#00c7b3}
.fa-p{position:relative;font-size:11.5px;font-weight:500;margin-bottom:4px;font-variant-numeric:tabular-nums}
.fa-cap{position:absolute;bottom:-23px;font-size:10.5px;font-weight:500;padding:1px 6px;border-radius:99px;border:1px solid #c6d6e8;color:#2c3542;background:#fff;transition:background .3s,color .3s,border-color .3s}
.fa.s1 .fa-b.sel i{box-shadow:0 0 0 2px #fff,0 0 0 4px #0569c0}
.fa.s1 .fa-b.sel .fa-cap{background:#0569c0;border-color:#0569c0;color:#fff}
.fa-b{cursor:pointer}
.fa-b i{position:relative;overflow:hidden}
.fa-ln{position:absolute;left:50%;bottom:6px;max-height:calc(100% - 10px);transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-style:normal;font-size:10px;line-height:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.fa-b.c-y .fa-ln,.fa-b.c-t .fa-ln{color:#1d2533}
.fa-tp{position:absolute;left:var(--tl,calc(50% + 20px));top:calc(100% - var(--v) + 2px);display:flex;flex-direction:column;gap:9px;padding:12px 16px;border-radius:4px;background:#2b2b2b;color:#fff;font-size:13px;line-height:1.25;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .25s,transform .25s,visibility 0s .25s;pointer-events:none;z-index:4}
.fa-tp b{font-weight:500}
.fa-tp>span{display:flex;justify-content:space-between;gap:28px}.fa-tp em{font-style:normal}
.fa-b.hv,.fa-b:hover{z-index:4}
.fa-b.hv .fa-tp,.fa-b:hover .fa-tp{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.fa .cur .hd{display:none}.fa.hp .cur .hd{display:inline}.fa.hp .cur .ar{display:none}
.fa-pc{transition:opacity .4s,transform .4s}
.fa:not(.s1) .fa-pc{opacity:0;transform:translateY(8px)}
.fa-pt{font-size:14px;font-weight:600;margin:0 0 10px}
.fa-ct{font-size:12px;font-weight:600;padding:5px 0;border-bottom:2px solid #d6e3f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa-col.s .fa-ct{border-color:#0569c0;color:#0569c0}
.fa-ctl{margin-top:12px}
.fa-ctl .su-rp svg{width:16px;height:16px}
.fa-pp .i-pl{display:none}.fa-pp[aria-pressed=true] .i-pl{display:inline}.fa-pp[aria-pressed=true] .i-pa{display:none}
@media(max-width:760px){.fa{padding:14px 12px 16px}.fa-b:nth-child(n+9){display:none}.fa-bars{gap:6px}.fa-ch{height:170px}.fa-cap{font-size:9.5px;padding:1px 4px}.fa-p{font-size:10.5px}.fa-hd{flex-direction:column;gap:2px}.fa-chp.k4{display:none!important}.fa-tp{font-size:11px;padding:8px 10px;gap:5px}.fa-tp>span{gap:12px}.fa-ln{font-size:9px}}
.f3f{margin-top:clamp(56px,6vw,88px)}
/* natural language query */
.nq{background:#fff;border:1px solid rgba(5,105,192,.18);border-radius:18px;padding:16px}
.nq-s{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;margin-bottom:12px;border:1px solid #d0e0f2;border-radius:10px}
.nq-s svg{width:18px;height:18px;color:var(--mkg,var(--acc));flex:none}
.nq-q{display:flex;align-items:center;min-width:0;font-size:15px;overflow:hidden;white-space:nowrap}
.nq-tx{font-weight:500}
.nq-cr{display:inline-block;width:1.5px;height:18px;margin:0 2px;background:var(--mkg,var(--acc));animation:nqB 1s steps(1) infinite}
@keyframes nqB{50%{opacity:0}}
.nq-ph{color:#4a5260;overflow:hidden;text-overflow:ellipsis}
.nq-q.ty .nq-ph{display:none}
.nq-t{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.nq-t button{font:inherit;font-size:14.5px;font-weight:500;padding:7px 16px;border-radius:99px;border:1px solid #c6daef;background:#fff;color:var(--fg);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.nq-t button:hover{border-color:var(--mkg,var(--acc));color:var(--acc)}
.nq-t button[aria-selected=true]{background:var(--acc);border-color:var(--acc);color:#fff}
.nq-t button:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:2px}
.nq-c{font-size:15px;margin:0 0 12px}
.nq-v{position:relative;aspect-ratio:1400/839;border-radius:10px;overflow:hidden;border:1px solid #e3edf7;background:#fff}
.nq-im{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;transition:opacity .45s}
.nq-im.on{opacity:1}
/* component library */
.sev{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:0}
.sev li{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;cursor:default;transition:transform .2s}
.sev li:hover{transform:translateY(-2px)}
.sev .sv-i{width:22px;height:22px}
.cs3 #system .strip-w{margin-top:clamp(40px,5vw,56px)}
.yt,.yt-f{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0d1826;border:1px solid rgba(5,105,192,.16)}
.yt img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.yt-pl{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;transition:transform .25s}
.yt-pl svg{display:block;width:100%;height:100%}
.yt:hover img{transform:scale(1.02)}.yt:hover .yt-pl{transform:scale(1.08)}
.yt:focus-visible{outline:2px solid var(--mkg,var(--acc));outline-offset:3px}
.yt-f iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ae-yt .fcap a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
/* outcomes */
.cq.ae-oc{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:44px;margin-top:0}
@media(max-width:960px){.cq.ae-oc{grid-template-columns:minmax(0,1fr);row-gap:26px}}
.pat{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.pat li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.pat .cq-ic{width:32px;height:32px;margin:0}.pat .cq-ic svg{width:32px;height:32px}
.pat h4{font-size:16px;font-weight:500;line-height:1.35;margin:0}.pat p{font-size:14.5px;margin:2px 0 0;font-variant-numeric:tabular-nums}
.cs3 .refl .frame{max-width:none}
@media(prefers-reduced-motion:reduce){.nq-cr{animation:none}.nz-d,.nz-s,.nz-ru,.nz-l,.hz-sp,.nq-im,.ae-e i,.dy *,.fa *{transition:none!important;animation:none!important}}
.cs3 .hero.mk h1{text-wrap:balance}
@media(max-width:600px){.cs-real.cs3 .hero.mk h1{font-size:clamp(32px,10.6vw,40px)}}
@media(max-width:960px){.cs3 .hb-v{padding:44px 0 56px}}
@media(max-width:400px){.cs3 .hb-facts>div{grid-template-columns:88px minmax(0,1fr)}}
/* ===== round 2: compact layouts ===== */
/* hero: the timeline and dashlet sit in an app window, over a ghost of the product's relationship ring that runs off the right edge */
.cs3 .c2h{position:relative;overflow:hidden}
.cs3 .c2h>.w{position:relative;z-index:1}
.ae-bg{position:absolute;z-index:0;top:56px;right:-210px;width:min(50vw,700px);aspect-ratio:1;pointer-events:none;-webkit-mask-image:radial-gradient(circle at 62% 50%,#000 46%,transparent 72%);mask-image:radial-gradient(circle at 62% 50%,#000 46%,transparent 72%)}
.ae-rg{display:block;width:100%;height:100%;opacity:.3;animation:aeRg 1.2s cubic-bezier(.2,.7,.2,1) both .1s}
.ae-tk path{stroke:#78AAFF;stroke-width:1.2}
body.cs3:not(.ptd) .ae-rg{animation-play-state:paused}
@keyframes aeRg{from{opacity:0;transform:rotate(-8deg) scale(.96)}}
.cs3 .hb-v{position:relative}
.aew{position:relative;z-index:1;color:var(--fg)}
.ae-win{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(26,92,205,.08);border-radius:16px}
.ae-in{padding:18px 20px 20px}
.ae-in .ae-sv{margin-top:18px;padding:18px 0 0;border:0;border-top:1px solid #e3eaf3;border-radius:0;background:none}
@media(max-width:960px){.ae-bg{top:auto;bottom:-60px;right:-240px;width:560px}}
@media(max-width:560px){.ae-in{padding:14px 12px 14px}.ae-bg{right:-300px;bottom:-40px;width:480px}}
/* text beside its visual; stacks on narrow screens */
.ae-sp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,5vw,72px);align-items:center}
.ae-sp>figure,.ae-sp>.frame,.ae-sp>.sl3{margin:0}
.ae-sp .c2i-t{max-width:none}
@media(max-width:960px){.ae-sp{grid-template-columns:minmax(0,1fr);gap:32px}}
/* paragraphs side by side under a full width heading */
.cs3 .p2>div+div,.cs3 .c2i-t.p2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,56px);max-width:none}
.cs3 .p2 p+p{margin-top:0}
@media(max-width:760px){.cs3 .p2>div+div,.cs3 .c2i-t.p2{grid-template-columns:minmax(0,1fr)}.cs3 .p2 p+p{margin-top:14px}}
/* challenge: events converge on a line through the middle; ticks arrive once all are sorted */
.nz{margin:0}
.nz-f{padding:30px 14px 10px}
.nz-ru{fill:none;stroke:#b9c3d3;stroke-width:1.2;opacity:0;transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.nz-ru.t{transform:translateY(-10px)}.nz-ru.b{transform:translateY(10px)}.nz-ru.b{transition-delay:.12s}
.nz.nz-done .nz-ru,html:not(.js) .nz-ru{opacity:.75;transform:none}
/* solution: three steps as one small illustrated flow */
.sl3{list-style:none;padding:8px 26px;background:#fff;border:1px solid rgba(5,105,192,.16);border-radius:18px;box-shadow:0 24px 50px -40px rgba(10,50,100,.4);position:relative}
.sl3-i{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:center;padding:20px 0}
.sl3-i+.sl3-i{border-top:1px solid #e6eef7}
.sl3-v{display:block;width:120px;height:64px}.sl3-v svg{display:block;width:100%;height:100%;overflow:visible}
.sl3 h4{font-size:17px;font-weight:500;letter-spacing:-.01em;margin:0 0 4px}
.sl3 p{font-size:15px;line-height:1.5;color:#2c3542;margin:0}
@media(max-width:560px){.sl3{padding:4px 16px}.sl3-i{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:16px 0}.sl3-v{width:84px;height:45px}}
/* discovery: whiteboard collage */
.wb3-g{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
.wb3-g .si:first-child{grid-row:span 2;display:flex}
.wb3-g .si:first-child .shot{flex:1;display:flex}
.wb3-g .si:first-child .cr{aspect-ratio:auto;height:100%;flex:1}
.wb3-g .shot .cr img{height:100%;object-fit:cover;transform:none}
.wb3-g .shot,.wb3-g figure{margin:0}
/* ideation: three wireframes and a smaller wireframe to final */
.ae-wf{margin-top:clamp(36px,4vw,52px)}
.ae-g3w{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ae-g3w .shot .cr img{transform:none}
.ae-g3w .gc{display:block;margin-top:10px;font-size:14px;color:#2c3542}
.cs3 #ideation .ia .shot.bare{max-width:none;margin:0}
.cs3 .cmpw.c2c,.cs3.cs2 .cmpw.c2c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px;align-items:start;margin-top:clamp(36px,4vw,52px)}
.cs3 .cmp-t h3{margin:0;font-size:clamp(22px,2.1vw,28px);line-height:1.2}.cs3 .cmp-t p{margin-top:14px;font-size:16px;line-height:1.6;max-width:30ch}
@media(max-width:960px){.cs3 .cmpw.c2c,.cs3.cs2 .cmpw.c2c{grid-template-columns:minmax(0,1fr);gap:16px}}
@media(max-width:800px){.ae-g3w{grid-template-columns:minmax(0,1fr);gap:28px}.ae-g3w .gc{font-size:15px;line-height:1.45;overflow-wrap:break-word}}
/* relationships: one panel. The chart gives way to the details, then comes back */
.dy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:stretch}
.dy-b{display:flex;flex-direction:column}.dy-b>.dy-s{flex:1}
.dy .hzl{grid-template-columns:minmax(0,1fr);gap:10px}
.dy .hzi{padding:13px 16px}.dy .hzi-p{margin-top:6px}
.dy-b{position:relative}
.dy-s{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(5,105,192,.16);background:#fff;min-height:560px}
.dy-l{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;opacity:0;transform:scale(.94);transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1)}
.dy-im{position:relative;display:block;width:100%}
.dy-im img{display:block;width:100%;height:auto}
.dy-tg{position:absolute;left:56.67%;top:41.6%;width:1px;height:1px}
.dy-hl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .25s}
.dy-hl path{stroke:#ff7a00;stroke-width:7}.dy-hl path.g{stroke-width:20;opacity:.28}
.dy.hv .dy-hl{opacity:1}
.dy[data-st="0"] .dy-l{opacity:1;transform:none;transition-delay:.2s}
.dy-r{position:absolute;inset:0;padding:16px 20px 18px;background:#fcfdff;font-size:13.5px;color:#1d2533;transition:opacity .45s .2s,transform .5s cubic-bezier(.2,.7,.2,1) .2s}
.dy[data-st="0"] .dy-r{opacity:0;transform:translateX(24px);pointer-events:none;transition-delay:0s}
.dy-bk{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -8px 6px auto;border-radius:7px;color:#3d4a5c;transition:background .2s,color .2s}
.dy-bk svg{width:16px;height:16px}
.dy.bk .dy-bk{background:#e2f0ff}
.dy-ck{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid #ff7a00;opacity:0;pointer-events:none;z-index:4}
.dy.clk .dy-ck{animation:dyP .6s ease-out}
@keyframes dyP{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
@media(max-width:960px){.dy{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.dy-s{min-height:600px}.dy-r{padding:14px 12px}.dy-t{padding-left:14px}.dy-e{padding-left:20px}.dy-fl{padding-left:10px}}
/* filtering: a picked column moves up next to the filters already applied; the columns after it re-sort */
.fa-pn{position:relative;margin-top:30px}
.fa-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:1px dashed #c6d6e8;border-radius:10px;color:#2c3542;font-size:14px;opacity:0;transition:opacity .3s}
.fa:not(.s1) .fa-ph{opacity:1}
.fa-cols{--n:6;position:relative;height:238px}
.fa-col{position:absolute;left:0;top:0;width:calc((100% - (var(--n) - 1)*8px)/var(--n));display:flex;flex-direction:column;gap:5px;transform:translate(calc(var(--ox,var(--o))*(100% + 8px)),calc(var(--oy,0)*(100% + 16px)));transition:transform .75s cubic-bezier(.3,.7,.2,1)}
.fa-sl{display:flex;flex-direction:column;justify-content:center;height:38px;padding:4px 8px;border-radius:7px;border:1px dashed #c6d6e8;background:#f6f9fc;color:#fff;overflow:hidden;transition:background .35s,border-color .35s}
.fa-sl b,.fa-sl small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa-sl b{font-size:12px;font-weight:600}.fa-sl small{font-size:10.5px}
.fa-col.s .fa-sl{background:#123d87;border:1px solid #123d87}
.fa-rw{position:relative;height:159px}
.fa-it{position:absolute;left:0;right:0;top:0;height:36px;display:flex;flex-direction:column;justify-content:center;padding:0 8px;border-radius:7px;background:#f1f5fa;transform:translateY(calc(var(--r)*41px));transition:transform .6s cubic-bezier(.3,.7,.2,1),background .3s,color .3s}
.fa-it b{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa-it small{font-size:10.5px;color:#3d4a5c;font-variant-numeric:tabular-nums;transition:color .3s}
.fa-it.pk{background:#2f7ff0;color:#fff}.fa-it.pk small{color:#fff}
.fa-col.s .fa-it:not(.pk){opacity:.55}
.fa-it small.up{animation:faU .7s}
@keyframes faU{0%{color:#0569c0;background:#dcebfc}100%{background:transparent}}
@media(max-width:760px){.fa-cols{--n:3;height:492px}}
/* component library and video */
.cs3 #system .ia .shot.bare{max-width:none}
.ae-vd{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(44px,5vw,64px)}
.ae-yt{margin:0}
.ae-vh{display:flex;align-items:center;gap:14px;margin:0 0 12px}
.ae-vh .cq-ic{margin:0;flex:none}
.ae-vd h3{font-size:clamp(20px,1.8vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.25;margin:0}
.ae-vd p{font-size:16px;line-height:1.6}
@media(max-width:960px){.ae-vd{grid-template-columns:minmax(0,1fr);gap:20px}.ae-vdt{order:-1}}
/* reflection: patents under the photo, the text gets the other half */
.cs3 .refl{display:block}
.cs3 .refl-p,.cs3 .refl-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,56px)}
.cs3 .refl-p p+p{margin-top:0}
.cs3 .refl-b{margin-top:clamp(32px,4vw,48px);align-items:center}
.cs3 .refl .pat{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:0}
@media(max-width:760px){.cs3 .refl-p,.cs3 .refl-b{grid-template-columns:minmax(0,1fr)}.cs3 .refl-p p+p{margin-top:16px}.cs3 .refl-b{row-gap:24px}}
@media(prefers-reduced-motion:reduce){.ae-rg,.fa-it small.up{animation:none}.dy-ck{display:none}}

/* brand: V2e logo in the nav, sized like 1G; header button hover/focus in the logo blue */
nav .brand.bc{gap:0}
nav .brand.bc .bc-v2e{display:block;height:60px;width:auto;overflow:visible;translate:0 -8.4%}
@media(max-width:700px){nav .brand.bc .bc-v2e{height:40px}}
nav[data-bc] .links a.pf:hover,nav[data-bc] .links a.ic:hover{color:#1c79ba;border-color:#1c79ba}
nav[data-bc] .links a:focus-visible{outline-color:#1c79ba}

body.cs-real:not(.cs2){--acc:#0072a3;--mkg:#0096d6;--mkc:0,150,214;--mk1f6fb8:#0072a3;--mk2a7dc9:#0096d6;--mkc9d6f7:#bee4f5;--mkeef3ff:#ebf7fc;--mke3ebff:#ddf1fa;--mke2eaff:#dcf1f9;--mkf1f5ff:#eef8fc;--mkf3f6ff:#f1f9fd;--mk9fbcff:#8ccfec}