/* Real project, with locally hosted screenshots of the public showroom. */
.case-study{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.4fr);grid-template-rows:auto 1fr;column-gap:54px;row-gap:22px;align-items:start;position:relative;padding-block:10px 96px;margin-bottom:64px;border-bottom:1px solid #bfccd233}
.case-intro{grid-column:1;grid-row:1;position:relative;z-index:1}.case-label{display:flex;align-items:center;gap:10px;font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:0 0 28px;color:var(--lime)}.case-label::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.case-study h3,.case-study h2{font-size:clamp(40px,4.6vw,68px);line-height:.98;letter-spacing:-.06em;font-weight:650;max-width:7em;margin:0 0 25px}.case-title{font-family:var(--display);font-size:clamp(23px,2.1vw,30px);letter-spacing:-.035em;line-height:1.17;max-width:18em;margin:0}.case-details{grid-column:1;grid-row:2;min-width:0}.case-description{font-size:14px;line-height:1.8;color:#bfccd2;margin-bottom:22px;max-width:36em}
.case-features{list-style:none;margin:0 0 29px;padding:0;display:flex;gap:8px;flex-wrap:wrap}.case-features li{font-size:10px;line-height:1.4;letter-spacing:.025em;padding:7px 10px;border:1px solid #bfccd247;border-radius:5px;color:#e4ebee}.case-action{display:grid;justify-items:start;gap:14px}.case-action .button{background:var(--lime);color:var(--ink);font-size:13px;min-height:51px;padding:13px 17px;gap:30px}.case-action .button:hover{background:#ebff9b;box-shadow:0 7px 20px #00101c44}.case-status{font-size:11px;line-height:1.6;color:#bfccd2;max-width:27em;margin:0}
.case-visual{grid-column:2;grid-row:1/span 2;min-width:0;position:relative;padding-top:7px;align-self:center}.case-switch{display:flex;gap:4px;padding:4px;border:1px solid #d8d0e2;background:#f7f5fa;color:var(--ink);border-radius:30px;width:max-content;max-width:100%;margin:0 auto 29px;position:relative;z-index:2}.case-switch[hidden]{display:none}.case-switch button{border:0;border-radius:25px;background:transparent;color:#52616c;font-size:12px;line-height:1.4;min-height:39px;padding:10px 20px;transition:background .25s,color .25s}.case-switch button[aria-pressed=true]{background:var(--ink);color:#fff}.case-switch button:focus-visible{outline-offset:3px}.case-switch button:hover{color:var(--blue)}.case-switch button[aria-pressed=true]:hover{color:var(--lime)}
.case-stage{isolation:isolate;position:relative;padding:25px 8px 26px;display:flex;align-items:center}.case-stage::before{content:"";position:absolute;inset:5px 5px 7px;background:#e9dff2;border-radius:44% 44% 16px 16px;transform:rotate(4deg);z-index:-1}.case-stage::after{content:"";position:absolute;inset:12px 21px 9px;border:1px solid #baa4cd9c;border-radius:44% 44% 12px 12px;transform:rotate(-4deg);z-index:-1}.case-browser{position:relative;width:100%;border-radius:10px;overflow:hidden;background:#fff;border:1px solid #d4cadd;box-shadow:0 24px 50px #00101c38}.case-toolbar{height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 13px;background:#fff;color:#52616c;font-size:10px}.case-toolbar>a{width:44px;height:44px;display:grid;place-items:center;font-size:21px;text-decoration:none;color:var(--ink);margin-right:-13px}.case-toolbar>a:hover{background:#f1ebf7;color:var(--blue)}.case-toolbar .window-dots{gap:4px}.case-toolbar .window-dots i{width:6px;height:6px}.case-screens{height:clamp(330px,34vw,500px);background:#f4ecf8}.case-scroll{height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#9072af #eae2f0;outline-offset:-3px;touch-action:pan-y}.case-scroll[hidden]{display:none}.case-scroll:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}.case-scroll::-webkit-scrollbar{width:9px}.case-scroll::-webkit-scrollbar-track{background:#eae2f0}.case-scroll::-webkit-scrollbar-thumb{background:#9072af;border-radius:12px;border:2px solid #eae2f0}.case-device picture,.case-device img{display:block;width:100%;height:auto}.case-device-mobile{display:none}.case-scroll-footer{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;background:#fff;color:#52616c;border-top:1px solid #e9e4ed;font-size:11px;line-height:1.4}.case-scroll-footer>span:first-child>span{color:var(--blue);margin-right:5px}.case-progress{width:18%;min-width:30px;max-width:96px;height:3px;background:#e9e1f0;border-radius:2px;overflow:hidden}.case-progress i{display:block;width:var(--case-progress,0%);height:100%;background:#2457e6}.case-preview-note{font-size:11px;line-height:1.7;color:#bfccd2;text-align:center;max-width:38rem;margin:4px auto 0}.case-section .case-preview-note{color:var(--muted)}.case-scroll-enter{animation:case-scroll-enter .4s var(--ease)}@keyframes case-scroll-enter{from{opacity:.35}to{opacity:1}}
.case-examples-label{display:flex;align-items:center;gap:16px;color:#bfccd2;font-size:11px;text-transform:uppercase;letter-spacing:.13em;margin:0 0 34px}.case-examples-label::after{content:"";height:1px;background:#bfccd233;flex:1}
.case-section{background:#eeeae4}.case-section .case-study{margin:0;padding:0;border:0}.case-section .case-label{color:var(--blue)}.case-section .case-description,.case-section .case-status{color:var(--muted)}.case-section .case-features li{border-color:#bfc6c7;color:var(--ink)}.case-section .case-action .button{background:var(--blue);color:white}.case-section .case-action .button:hover{background:var(--ink)}.case-section .case-stage::before{background:#e4d6ed}
@media(max-width:1100px){.case-study{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:30px}.case-study h3,.case-study h2{font-size:50px}.case-description{font-size:13px}.case-title{font-size:25px}}
@media(min-width:701px) and (max-width:950px){.case-study{grid-template-columns:1fr 1fr;column-gap:36px}.case-intro{grid-row:1;grid-column:1}.case-details{grid-row:1;grid-column:2}.case-visual{grid-column:1/-1;grid-row:2;width:90%;justify-self:center;margin-top:25px}.case-screens{height:440px}}
@media(max-width:700px){.case-study{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:28px;padding-bottom:55px;margin-bottom:40px}.case-intro{grid-column:1;grid-row:1}.case-study h3,.case-study h2{font-size:48px;max-width:100%;margin-bottom:18px}.case-label{font-size:10px;margin-bottom:21px}.case-title{font-size:25px;max-width:18em}.case-visual{grid-column:1;grid-row:2;width:100%;padding:0}.case-details{grid-column:1;grid-row:3}.case-description{font-size:14px;margin-bottom:21px}.case-features{margin-bottom:25px;gap:7px}.case-features li{font-size:10px}.case-action .button{font-size:13px;min-height:52px}.case-status{font-size:11px;max-width:100%}.case-switch{margin-bottom:8px}.case-switch button{min-height:44px}.case-stage{padding:16px 0 18px}.case-stage::before{inset:0 4px;border-radius:150px 150px 12px 12px;transform:rotate(2deg)}.case-stage::after{inset:12px 15px;border-radius:150px 150px 12px 12px}.case-toolbar{height:40px;padding:0 10px;font-size:9px}.case-toolbar>a{height:40px;margin-right:-10px}.case-toolbar .window-dots i{width:5px;height:5px}.case-screens{height:min(520px,72svh)}.case-device-desktop{display:none}.case-device-mobile{display:block}.case-scroll-footer{font-size:10px;padding-inline:10px}.case-preview-note{text-align:left;font-size:11px;margin:0 2px}.case-examples-label{font-size:10px;margin-bottom:26px}.case-section{padding-block:58px}}
@media(max-width:360px){.case-study h3,.case-study h2{font-size:42px}.case-title{font-size:23px}.case-switch button{padding-inline:18px}}
@media(prefers-reduced-motion:reduce){.case-scroll-enter{animation:none}.case-switch button{transition:none}}