/* use-case visuals (from the Nextcore build, re-colored) */
.uv{position:relative;z-index:1;width:100%;aspect-ratio:940/680;border-radius:16px;background:#fff;box-shadow:0 40px 80px -30px rgba(6,27,42,.5),0 0 0 1px rgba(6,27,42,.08);overflow:hidden;transition:transform .9s var(--ease);container-type:inline-size}
.fz:hover .uv{transform:translateY(-6px)}
.anim .fz[data-r] .uv{transform:translateY(30px)}.anim .fz.in .uv{transform:none}
.uv svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.uv text{font-family:"Schibsted Grotesk",sans-serif;fill:var(--ink)}
.uv .mono,.uv text.mono{font-family:"Schibsted Grotesk",monospace}
.uv .lab{font-family:"Schibsted Grotesk",monospace;font-size:13px;fill:#6B8093;letter-spacing:.04em}
.uv .big{font-size:96px;font-weight:800;letter-spacing:-5px}
.uv .mid{font-size:22px;font-weight:600;letter-spacing:-.5px}
.uv .sm{font-size:17px;fill:#53697B}
/* dial */
.uv .tk{stroke:#C9DCE9;stroke-width:3;stroke-linecap:round}
.anim .uv .tk{animation:tk 12s linear infinite;animation-delay:var(--d)}
@keyframes tk{0%{stroke:#0A1D2B}10%{stroke:#0A1D2B}30%,100%{stroke:#C9DCE9}}
/* releases */
.uv .rl{fill:#DCE9F2}
.anim .fz.in .uv .rl{animation:rl .5s var(--ease) both;animation-delay:var(--d)}
@keyframes rl{from{fill:#DCE9F2;transform:scale(.4)}to{fill:#0A1D2B;transform:none}}
.uv .rl{transform-box:fill-box;transform-origin:center}
/* bars */
.uv .bar{transform-box:fill-box;transform-origin:left center}
.anim .fz[data-r] .uv .bar{transform:scaleX(0);transition:transform 1.4s var(--ease) .3s}
.anim .fz.in .uv .bar{transform:none}
.anim .fz.in .uv .bar.b2{transition-delay:.7s}.anim .fz.in .uv .bar.b3{transition-delay:1.1s}.anim .fz.in .uv .bar.b4{transition-delay:1.5s}
/* hub */
.uv .spoke{stroke:#C3D6E4;stroke-width:1.4}
.anim .fz[data-r] .uv .spoke{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease);transition-delay:var(--d)}
.anim .fz.in .uv .spoke{stroke-dashoffset:0}
.uv .inst{fill:#fff;stroke:#0A1D2B;stroke-width:1.6}
.anim .uv .inst{animation:inst 4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes inst{0%,100%{fill:#fff}8%{fill:#0A1D2B}20%{fill:#fff}}
/* shadow lanes */
.uv .lane{stroke:#C3D6E4;stroke-width:2;fill:none}
.uv .pkt{fill:#0A1D2B}
.uv .pkt.sh{fill:#fff;stroke:#0A1D2B;stroke-width:2}
/* chat-first */
.uv .menu{fill:#E2EDF4}
.anim .uv .menus{animation:menus 7s var(--ease) infinite}
@keyframes menus{0%,30%{opacity:1;transform:none}48%,86%{opacity:.12;transform:translateX(-10px)}100%{opacity:1;transform:none}}
.anim .uv .ask{animation:ask 7s var(--ease) infinite}
@keyframes ask{0%,34%{opacity:0;transform:translateY(10px)}48%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
.uv .ask,.uv .menus{transform-box:fill-box}