*{box-sizing:border-box}body{margin:0;background:#0b101b;color:#eef3f8;font:16px/1.8 Inter,Arial,sans-serif}h1,h2,h3,.brand{font-family:Manrope,Inter,sans-serif;letter-spacing:-.035em;line-height:1.2}a{color:inherit;text-decoration:none}.shell{max-width:1180px;margin:auto;padding:0 28px}.reading{max-width:720px;margin:auto}.header{border-bottom:1px solid #26374a}.header .shell{display:flex;justify-content:space-between;align-items:center;min-height:80px}.brand{font-size:20px;font-weight:800}.nav{font-size:13px;color:#b9c9d9;display:flex;gap:24px}.crumbs{padding-top:34px;color:#a9bac9;font-size:13px}.crumbs a{color:#9bc7df}.intro{padding:55px 0 42px}h1{font-size:clamp(2.8rem,6vw,5rem);margin:0}.hero{background:linear-gradient(90deg,#24364e,#6290ab,#24364e);min-height:430px;display:flex;justify-content:center;align-items:center;gap:14px;padding:45px 24px}.hero img{max-height:440px;max-width:45%;object-fit:contain;filter:drop-shadow(0 15px 22px #07101b70)}main{padding:80px 0 120px}main h2{font-size:clamp(1.8rem,3vw,2.5rem);max-width:720px;margin:85px auto 25px}main h2:first-child{margin-top:0}main h3{font-size:1.4rem;margin:40px auto 12px;max-width:720px}main p,main ul,main ol{max-width:720px;margin:0 auto 22px}main li{padding-left:6px;margin-bottom:6px}main img{display:block;max-width:min(100%,1050px);height:auto;margin:34px auto 58px;border-radius:8px}main p+img{margin-top:35px}.process{max-width:1080px;margin:35px auto 70px;display:flex;align-items:center;gap:12px}.step{flex:1;text-align:center;background:#24364e;border:1px solid #3b5872;border-radius:7px;padding:15px 7px;font-size:14px;font-weight:600}.process-arrow{color:#6290ab;font-size:24px}.chart{max-width:960px;margin:50px auto 80px;padding:38px;background:#121d2c;border:1px solid #2c3f54;border-radius:14px;display:grid;grid-template-columns:260px 1fr;align-items:center;gap:50px}.donut{width:260px;aspect-ratio:1;border-radius:50%;background:conic-gradient(#6290ab 0 52%,#9386d2 52% 90%,#bb9565 90% 100%);display:grid;place-items:center}.donut-hole{width:55%;aspect-ratio:1;border-radius:50%;background:#121d2c;display:grid;place-items:center;text-align:center;font-size:14px;font-weight:600}.legend{display:grid;gap:20px}.legend>div{display:grid;grid-template-columns:14px 65px 1fr;align-items:center;gap:12px}.legend i{width:14px;height:14px;border-radius:3px}.legend strong{font:700 25px Manrope,Inter,sans-serif}.legend span{line-height:1.4;color:#c5d3e1}main img[alt="pixSol2"],main img[alt="pixSol3"]{max-width:800px}@media(max-width:700px){.nav{display:none}.hero{min-height:300px;padding:25px 12px}.hero img{max-height:280px}.process{flex-direction:column;gap:6px}.step{width:100%}.process-arrow{transform:rotate(90deg);line-height:1}.chart{grid-template-columns:1fr;justify-items:center;padding:25px 18px;gap:30px}.donut{width:min(260px,100%)}.legend>div{grid-template-columns:14px 55px 1fr}.shell{padding:0 20px}main{padding-top:45px}}
/* PIX! v3: consistent case-study rhythm and image-only framing */
main.shell {padding-top:132px;padding-bottom:120px}
main h2:first-child {margin-top:0}
main h2 {margin-top:96px;margin-bottom:28px}
main h3 {margin-top:48px;margin-bottom:16px}
main .media-frame {width:min(100%,1080px);margin:38px auto 64px;padding:22px;background:#121d2c;border:1px solid #2c3f54;border-radius:14px;overflow:hidden}
main .media-frame img {display:block;max-width:100%;width:auto;height:auto;margin:0 auto;border-radius:7px}
/* Web-native diagrams stay unboxed */
main .process {margin-top:40px;margin-bottom:72px}
main .chart {background:transparent;border:0;border-radius:0;padding:0;margin-top:44px;margin-bottom:76px}
main .donut-hole {background:#0b101b}
/* Statistics match Search case study */
.result-stats {max-width:720px;margin:36px auto 42px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.result-stat {background:#121d2c;border:1px solid #2c3f54;border-radius:12px;padding:24px}
.result-stat strong {font:800 clamp(2.2rem,5vw,3.3rem)/1.15 Manrope,Inter,sans-serif;color:#eef3f8;display:block}
.result-stat span {display:block;margin-top:8px;color:#b9c9d9;font-size:14px;line-height:1.5}
@media(max-width:700px){main.shell{padding-top:80px}main h2{margin-top:72px}main .media-frame{padding:12px;margin:28px auto 48px}.result-stats{gap:10px}.result-stat{padding:16px}}



/* Shared image lightbox: apply to case-study screenshots only. */
main figure.media-frame img{cursor:zoom-in;transition:filter .16s ease}
main figure.media-frame img:hover{filter:brightness(1.1)}
main figure.media-frame img:focus-visible{outline:3px solid #9bc7df;outline-offset:5px}
.image-lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(5,9,16,.96);color:#fff;overflow:hidden}
.image-lightbox::backdrop{background:rgba(5,9,16,.96)}
.image-lightbox[open]{display:flex;align-items:center;justify-content:center}
.image-lightbox__image{display:block;max-width:calc(100vw - 88px);max-height:calc(100dvh - 90px);width:auto;height:auto;object-fit:contain}
.image-lightbox__close,.image-lightbox__prev,.image-lightbox__next{position:absolute;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid #63758a;border-radius:50%;background:#18283c;color:white;font:24px/1 Arial,sans-serif;cursor:pointer}
.image-lightbox__close{right:20px;top:18px}.image-lightbox__prev{left:14px;top:50%;transform:translateY(-50%)}.image-lightbox__next{right:14px;top:50%;transform:translateY(-50%)}
.image-lightbox__close:hover,.image-lightbox__prev:hover,.image-lightbox__next:hover{background:#31516e}
.image-lightbox__count{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font:13px Inter,Arial,sans-serif;color:#c5d3e1}
@media(max-width:600px){.image-lightbox__image{max-width:calc(100vw - 24px);max-height:calc(100dvh - 130px)}.image-lightbox__prev,.image-lightbox__next{top:auto;bottom:18px;transform:none}.image-lightbox__count{bottom:32px}}



/* Shared site identity and alignment: same 1180px shell for logo, breadcrumbs and title. */
.header .shell, .shell.crumbs, .shell.intro {max-width:1180px;width:100%;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px;}
.brand {font-family:Manrope,Inter,Arial,sans-serif;font-size:19px;font-weight:800;letter-spacing:-.05em;white-space:nowrap;line-height:1.14;}
.brand span {color:#81b5d1;}
.shell.intro h1 {margin-left:0;margin-right:0;}
@media(max-width:700px){.header .shell,.shell.crumbs,.shell.intro{padding-left:20px;padding-right:20px;}}

/* PIX case study: breadcrumbs and title use identical shell gutters. */
.shell.intro {padding-top:55px;padding-bottom:42px;}



/* Editorial consistency with the approved Search case study (v5).
   Visual elements (screenshots, diagrams) retain their larger layouts. */
main.shell {
  --pix-reading-width: 550px;
}
main.shell h2 {
  font-size: clamp(2.15rem, 3.8vw, 2.9rem);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.04em;
  max-width: min(100%, var(--pix-reading-width));
}
main.shell h3,
main.shell p,
main.shell ul,
main.shell ol {
  max-width: min(100%, var(--pix-reading-width));
}
main.shell .result-stats {
  width: min(100%, var(--pix-reading-width));
  max-width: none;
}