.showcase{padding:58px 0 48px;border-block:1px solid var(--line,#194d3e26);background:#eef1e9;color:var(--ink,#111c23)}
.showcase-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:26px}
.showcase-intro .eyebrow{margin-bottom:14px}
.showcase-intro h2{font-size:clamp(30px,3vw,43px);line-height:1.15;letter-spacing:-.045em;font-weight:550;margin:0}
.showcase-intro>p{font-size:13px;color:var(--muted,#52616a);line-height:1.75;max-width:350px;margin:0}
.showcase-stage{position:relative;min-width:0}
.showcase-controls{display:none;align-items:center;gap:7px;margin-bottom:19px;flex-wrap:wrap}
.showcase-ready .showcase-controls{display:flex}
.showcase-controls button{font-family:inherit;font-size:11px;font-weight:500;line-height:1.4;min-height:34px;padding:8px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:#506152;cursor:pointer;transition:color .2s,background .2s,border-color .2s;white-space:nowrap}
.showcase-controls button>span{font:9px/1.4 ui-monospace,SFMono-Regular,monospace;margin-right:6px;color:#6c7f68}
.showcase-controls button[aria-pressed=true]{background:#fff;border-color:#194d3e20;color:#194d3e}
.showcase-controls button:hover{background:#ffffff85;color:#194d3e}
.showcase-controls button:focus-visible,.showcase-case-link:focus-visible,.showcase-contact-link:focus-visible,.showcase-track:focus-visible{outline:2px solid #194d3e;outline-offset:3px}
.showcase-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;overscroll-behavior-x:contain;padding:1px 1px 15px;scrollbar-width:thin;scrollbar-color:#194d3e45 transparent;-webkit-overflow-scrolling:touch}
.showcase-item{flex:0 0 86%;max-width:410px;min-width:0;scroll-snap-align:start;padding:22px 22px 24px;border-top:1px solid #194d3e40;background:linear-gradient(150deg,#ffffffa6,#ffffff20);position:relative}
.showcase-device{margin:0 0 23px;height:230px;display:flex;align-items:center;justify-content:center;min-width:0}
.showcase-device img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 12px 28px #223b2210;border:1px solid #194d3e18;border-radius:7px}
.showcase-device-mobile img{border:4px solid #1d2827;border-radius:19px;box-shadow:0 10px 25px #20362c1c}
.showcase-caption-index{display:block;font:9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.08em;color:#54725a;margin-bottom:10px}
.showcase-caption h3{font-size:22px;line-height:1.23;font-weight:550;letter-spacing:-.65px;margin:0 0 11px;max-width:530px}
.showcase-caption p{font-size:12px;line-height:1.8;color:#52616a;margin:0 0 15px;max-width:560px}
.showcase-case-link,.showcase-contact-link{display:inline-flex;align-items:center;gap:11px;font-size:11px;font-weight:600;line-height:1.6;color:#194d3e;text-decoration:none}
.showcase-case-link>span,.showcase-contact-link>span{font-size:17px;font-weight:400;transition:transform .2s}
.showcase-case-link:hover>span,.showcase-contact-link:hover>span{transform:translate(2px,-2px)}
.showcase-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:17px;padding-top:15px;border-top:1px solid #194d3e20}
.showcase-bottom>p{font-size:10px;color:#61735f;line-height:1.7;margin:0}
@media(min-width:900px){.showcase:not(.showcase-enhanced) .showcase-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;overflow:visible;padding-bottom:0}.showcase:not(.showcase-enhanced) .showcase-item{max-width:none;padding:20px}.showcase:not(.showcase-enhanced) .showcase-device{height:220px}}
@media(min-width:900px) and (min-height:700px){
.showcase-enhanced{padding-top:48px;padding-bottom:30px}
.showcase-enhanced .showcase-intro{margin-bottom:20px}
.showcase-enhanced .showcase-runway{height:calc(min(100svh - 100px,800px) + min(78svh,620px))}
.showcase-enhanced .showcase-stage{position:sticky;top:84px;height:min(100svh - 100px,800px);display:flex;flex-direction:column;overflow:visible}
.showcase-enhanced .showcase-controls{flex-shrink:0;margin:0 0 9px;min-height:34px}
.showcase-enhanced .showcase-track{position:relative;display:block;overflow:visible;perspective:1500px;flex:1;min-height:0;padding:0;scroll-snap-type:none}
.showcase-enhanced .showcase-item{position:absolute;inset:0;max-width:none;padding:0;border:0;background:none;transform-style:preserve-3d;pointer-events:none;opacity:0}
.showcase-enhanced .showcase-item.is-current{pointer-events:auto}
.showcase-enhanced .showcase-device{position:absolute;left:0;right:0;top:3px;height:calc(100% - 132px);margin:0;transform-origin:50% 65%;will-change:transform,opacity}
.showcase-enhanced .showcase-device img{height:100%;max-width:91%;width:auto;object-fit:contain;border:4px solid #28332e;border-radius:12px;box-shadow:0 16px 35px #203a251c}
.showcase-enhanced .showcase-caption{position:absolute;bottom:0;left:0;right:0;min-height:113px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 35px;align-content:end;will-change:opacity,transform}
.showcase-enhanced .showcase-caption-index{grid-column:1;margin-bottom:1px}
.showcase-enhanced .showcase-caption h3{grid-column:1;grid-row:2/4;font-size:27px;line-height:1.15;margin:0;max-width:430px}
.showcase-enhanced .showcase-caption p{grid-column:2;grid-row:1/3;font-size:12px;line-height:1.7;margin:0;max-width:510px}
.showcase-enhanced .showcase-case-link{grid-column:2;grid-row:3;justify-self:start;align-self:end}
.showcase-enhanced .showcase-bottom{margin-top:13px;padding-top:11px;min-height:32px;flex-shrink:0}
.showcase-enhanced .showcase-item-docs{z-index:1;opacity:var(--showcase-docs-opacity,1)}
.showcase-enhanced .showcase-item-docs .showcase-device{transform:var(--showcase-docs-transform,none)}
.showcase-enhanced .showcase-item-docs .showcase-caption{opacity:var(--showcase-docs-caption,1);transform:var(--showcase-docs-caption-transform,none)}
.showcase-enhanced .showcase-item-school{z-index:2;opacity:var(--showcase-school-opacity,0)}
.showcase-enhanced .showcase-item-school .showcase-device{transform:var(--showcase-school-transform,none)}
.showcase-enhanced .showcase-item-school .showcase-caption{opacity:var(--showcase-school-caption,0);transform:var(--showcase-school-caption-transform,none)}
.showcase-enhanced .showcase-item-mobile{z-index:3;opacity:var(--showcase-phone-opacity,0)}
.showcase-enhanced .showcase-item-mobile .showcase-device{left:49%;right:4%;height:calc(100% - 136px);transform:var(--showcase-phone-transform,none)}
.showcase-enhanced .showcase-item-mobile .showcase-device img{max-width:100%;border-width:5px;border-radius:22px}
.showcase-enhanced .showcase-item-mobile .showcase-caption{opacity:var(--showcase-phone-caption,0);transform:var(--showcase-phone-caption-transform,none)}
}
@media(max-width:899px){.showcase{padding:42px 0 35px}.showcase-intro{align-items:flex-start;flex-direction:column;gap:17px;margin-bottom:22px}.showcase-intro>p{max-width:600px}.showcase-track{gap:15px}.showcase-item{max-width:460px}.showcase-caption h3{font-size:24px}}
@media(max-width:560px){.showcase{padding:36px 0 30px}.showcase-intro h2{font-size:29px}.showcase-intro>p{font-size:12px}.showcase-controls{gap:2px;margin-bottom:14px}.showcase-controls button{font-size:10px;padding:7px;min-height:32px}.showcase-controls button>span{display:none}.showcase-item{padding:18px 15px 21px;flex-basis:94%;max-width:none}.showcase-device{height:205px;margin-bottom:21px}.showcase-caption h3{font-size:22px}.showcase-caption p{font-size:12px}.showcase-bottom{align-items:flex-start;flex-direction:column;gap:8px;margin-top:13px;padding-top:12px}.showcase-bottom>p{font-size:9px}.showcase-contact-link{font-size:11px}}
@media(prefers-reduced-motion:reduce){.showcase *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.showcase-case-link:hover>span,.showcase-contact-link:hover>span{transform:none}}
.showcase-controls button{font-weight:500}
@media(prefers-reduced-motion:reduce) and (min-width:900px){.showcase:not(.showcase-enhanced) .showcase-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:15px}.showcase:not(.showcase-enhanced) .showcase-item{flex:0 0 360px;max-width:410px}}