.landing .display{letter-spacing:-.035em;font-weight:700}.landing :where(a,button,summary):focus-visible{outline:2px solid rgb(var(--g600));outline-offset:3px;border-radius:8px}.tile{border-radius:20px;background:rgb(var(--white));border:1px solid rgb(var(--line));box-shadow:0 1px 3px #07151a0d}@media (prefers-reduced-motion: no-preference){.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) .15s both}}@keyframes rise{0%{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}.on-desktop{display:none}@media (pointer: fine) and (hover: hover){.on-desktop{display:revert}.on-mobile{display:none}}.landing section[id]{scroll-margin-top:56px}.landing summary::-webkit-details-marker{display:none}.marquee{display:flex;width:-moz-max-content;width:max-content;gap:.75rem}.marquee-track{display:flex;gap:.75rem}.marquee-fade{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}@media (prefers-reduced-motion: no-preference){.marquee{animation:marquee 60s linear infinite}.marquee-reverse{animation-direction:reverse;animation-duration:70s}.marquee-fade:hover .marquee{animation-play-state:paused}}@media (prefers-reduced-motion: reduce){.marquee{width:auto;flex-wrap:wrap;justify-content:center;padding:0 1rem}.marquee-track{flex-wrap:wrap;justify-content:center}.marquee-track[aria-hidden]{display:none}.marquee-fade{-webkit-mask-image:none;mask-image:none}}@keyframes marquee{to{transform:translate(calc(-50% - .375rem))}}#demo{--rx: 0deg;--ry: 0deg;--gx: 50%;--gy: 30%}.demo-stage{width:min(100%,300px);perspective:1000px}.demo-card{position:relative;aspect-ratio:1;overflow:hidden;border-radius:24px;background:var(--card-bg, #fff);box-shadow:0 1px #fff9 inset,0 0 0 1px #07151a0f,calc(var(--ry) * -1.2) calc(26px + var(--rx) * 1.2) 50px -18px #07151a59;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s cubic-bezier(.16,1,.3,1),opacity .6s ease,scale .6s ease;will-change:transform}.demo-product{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;transition:scale .9s cubic-bezier(.16,1,.3,1)}.demo-page:hover .demo-product{scale:1.04}.demo-glare{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at var(--gx) var(--gy),rgb(255 255 255 / .55),transparent 55%);mix-blend-mode:soft-light;opacity:0;transition:opacity .5s ease}.demo-page:hover .demo-glare{opacity:1}.demo-swap{transition:opacity .6s ease}.demo-leaving .demo-swap{opacity:0}.demo-leaving .demo-card{opacity:0;scale:.97}.demo-tab{position:relative;display:inline-flex;align-items:center;gap:8px;overflow:hidden;border:1px solid rgb(var(--line));border-radius:999px;background:rgb(var(--white));padding:4px 14px 4px 4px;font-size:14px;font-weight:600;color:rgb(var(--n500))}.demo-tab img{width:28px;height:28px;border-radius:999px;-o-object-fit:cover;object-fit:cover;background:#fff}.demo-tab[aria-selected=true]{color:rgb(var(--black));border-color:rgb(var(--n400))}.demo-progress{position:absolute;left:0;bottom:0;height:2px;width:0;background:#69c99e}.demo-tab[aria-selected=true] .demo-progress{animation:demo-progress var(--stay, 9s) linear forwards}.demo-held .demo-progress{animation-play-state:paused}@keyframes demo-progress{to{width:100%}}@media (prefers-reduced-motion: reduce){.demo-card,.demo-product,.demo-swap{transition:none}.demo-progress{display:none}}.flow{position:relative;display:grid;gap:3rem;max-width:36rem;margin-inline:auto;list-style:none}@media (min-width: 1024px){.flow{grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:none}}.flow-step{position:relative;padding-left:3.5rem}@media (min-width: 1024px){.flow-step{padding-left:0}.flow-step>p{min-height:6.5em}}.flow-dot{position:absolute;left:0;top:0;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:999px;border:1px solid rgb(var(--line));background:rgb(var(--white));font-weight:700;color:rgb(var(--n500));transition:background-color .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease}@media (min-width: 1024px){.flow-dot{position:relative}}.flow-step.is-on .flow-dot{background:#69c99e;border-color:#69c99e;color:#07151a;box-shadow:0 0 0 6px #69c99e33}.flow-rail{position:absolute;left:calc(1.25rem - 1px);top:1.25rem;bottom:0;width:2px;background:rgb(var(--line));border-radius:2px;overflow:hidden}.flow-rail-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:#69c99e;transform-origin:top;transform:scaleY(var(--p, 0));transition:transform .9s cubic-bezier(.65,0,.35,1)}@media (min-width: 1024px){.flow-rail{left:1.25rem;right:calc(25% - 1.25rem);top:calc(1.25rem - 1px);bottom:auto;width:auto;height:2px}.flow-rail-fill{transform-origin:left;transform:scaleX(var(--p, 0))}}.flow-visual{transition:box-shadow .5s ease,border-color .5s ease}.flow-step.is-on .flow-visual{border-color:#69c99e99;box-shadow:0 12px 32px -16px #07151a40}.flow-in{opacity:.15;translate:0 6px;transition:opacity .5s ease,translate .5s cubic-bezier(.16,1,.3,1)}.flow-step.is-on .flow-in{opacity:1;translate:0 0}.flow-step.is-on .flow-in:nth-of-type(2){transition-delay:.15s}.flow-step.is-on .flow-in:nth-of-type(3){transition-delay:.3s}.flow-step.is-on .flow-in:nth-of-type(4){transition-delay:.45s}.flow-step.is-on .flow-in:nth-of-type(5){transition-delay:.6s}.flow-scan{position:relative;height:56px;border-radius:8px;background:#fff;padding:8px 14px;overflow:hidden}.flow-barcode{display:block;height:100%;background:repeating-linear-gradient(90deg,#07151a 0 2px,transparent 2px 4px,#07151a 4px 5px,transparent 5px 8px,#07151a 8px 11px,transparent 11px 12px,#07151a 12px 13px,transparent 13px 16px)}.flow-laser{position:absolute;left:6px;right:6px;top:50%;height:2px;background:#e5484d;box-shadow:0 0 10px 2px #e5484d99;opacity:0}.flow-step.is-on .flow-laser{animation:flow-laser 1.4s ease-in-out 2}@keyframes flow-laser{0%{opacity:1;top:10%}50%{opacity:1;top:88%}to{opacity:0;top:10%}}.flow-meter{display:block;height:6px;border-radius:99px;background:var(--fill);overflow:hidden}.flow-meter>span{display:block;height:100%;width:0;border-radius:inherit;background:rgb(var(--g600));transition:width 1.1s cubic-bezier(.16,1,.3,1) .3s}.flow-step.is-on .flow-meter>span{width:var(--to)}@media (prefers-reduced-motion: reduce){.flow-dot,.flow-rail-fill,.flow-visual,.flow-in,.flow-meter>span{transition:none}.flow-laser{display:none}}
