@keyframes cs-scroll{0%,10%{transform:translateY(0)}55%,65%{transform:translateY(calc(100cqh - 100% - var(--sb,0px)))}95%,to{transform:translateY(0)}}@keyframes cs-parallax{0%{translate:0 -5%}to{translate:0 5%}}@keyframes cs-reveal{0%{clip-path:inset(-80px 100% -80px -80px);opacity:.4}to{clip-path:inset(-80px);opacity:1}}@layer components{:root[data-theme=light] .th-d,:root:not([data-theme=light]) .th-l{display:none!important}.stage.bd{background:var(--bg-elev)}.stage.bd:after{box-shadow:inset 0 0 0 1px var(--line)}:is(.stage,.phone-feature__stage).bd--grid:before,:is(.stage,.phone-feature__stage).bd--dots:before{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0;-webkit-mask-image:radial-gradient(at 50% 45%,#000 30%,#0000 78%);mask-image:radial-gradient(at 50% 45%,#000 30%,#0000 78%)}:is(.stage,.phone-feature__stage).bd--grid:before{background-image:linear-gradient(color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px);background-position:50%;background-size:24px 24px}:is(.stage,.phone-feature__stage).bd--dots:before{background-image:radial-gradient(color-mix(in srgb, var(--fg) 22%, transparent) 1px, transparent 1.5px);background-position:50%;background-size:16px 16px}.stage.bd--plain{background:var(--surface)}.stage.bd--plain:before,.stage.bd--none:before,.stage.bd--none:after{display:none}.stage.bd--none{background:0 0;border-radius:0;overflow:visible}.mock .stage.bd--none,.split .stage.bd--none{aspect-ratio:auto}.stage.bd--none>.browser{width:100%}.stage.bd--none>.laptop{width:88%}.stage.bd--none>.tablet{width:72%}.stage.bd--none:not(.gallery-phones)>.phone{width:min(280px,48%);height:auto}.stage.bd--none>:is(.browser,.phone,.tablet){box-shadow:var(--sh-2), 0 0 0 1px var(--line)}.phone-feature__stage.bd{isolation:isolate;background:var(--bg-elev)}.phone-feature__stage.bd--plain{background:var(--surface)}.phone-feature__stage.bd--none{background:0 0}.cs .phone-feature:has(.phone-feature__stage.bd) .phone-feature__text{background:0 0}.cs-anim--float .stage>.duo>.phone{animation:6s ease-in-out infinite float}.cs-anim--scroll .stage>:is(.browser,.laptop,.tablet) :is(.browser__screen,.laptop__screen,.tablet__screen),.cs-anim--scroll .stage>.duo>.browser>.browser__screen,.cs-anim--scroll .phone-feature__stage>.phone>.phone__screen{overflow:hidden;container-type:size}.cs-anim--scroll .stage>:is(.browser,.laptop,.tablet) :is(.browser__screen,.laptop__screen,.tablet__screen)>img,.cs-anim--scroll .stage>.duo>.browser>.browser__screen>img,.cs-anim--scroll .phone-feature__stage>.phone>.phone__screen>img{min-height:100%;animation:cs-scroll var(--scroll-cycle,16s) ease-in-out infinite;object-fit:fill!important;height:auto!important;bottom:auto!important}.tilt-host{display:contents}.cs-anim--tilt .stage>:is(.browser,.laptop,.tablet,.phone,.duo),.cs-anim--tilt .phone-feature__stage>.phone{transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s var(--ease-out)}.cs-anim--parallax .stage>.browser{width:80%}.cs-anim--parallax .stage>.laptop{width:78%}.cs-anim--parallax .stage.bd--none{padding-block:5%}.cs-anim--parallax .stage.bd--none>.browser{width:100%}@supports (animation-timeline:view()){.cs-anim--parallax .stage,.cs-anim--parallax .phone-feature__stage{view-timeline:--cs-par block}.cs-anim--parallax .stage>:is(.browser,.laptop,.tablet,.phone),.cs-anim--parallax .stage>.duo>.phone,.cs-anim--parallax .phone-feature__stage>.phone{animation:linear both cs-parallax;animation-timeline:--cs-par;animation-range:cover}.cs-anim--reveal .stage,.cs-anim--reveal .phone-feature__stage{view-timeline:--cs-rev block}.cs-anim--reveal .stage>:is(.browser,.laptop,.tablet,.phone,.duo),.cs-anim--reveal .phone-feature__stage>.phone{animation:linear both cs-reveal;animation-timeline:--cs-rev;animation-range:entry 10% cover 40%}}.stage.vid-stage{padding:6% 7%}.vid-sheet{background:#000;border-radius:10px;width:100%;overflow:hidden;box-shadow:0 24px 50px -10px #00000073,0 0 0 1px #00000014}.vid-bare{border-radius:var(--r-lg);background:#000;overflow:hidden}:is(.figure__frame,.vid-bare,.vid-sheet)>.native-video{object-fit:contain;background:#000;width:100%;height:100%;position:absolute;inset:0}.native-video:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.figure__pair{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px;display:grid}.mock .stage.pair{aspect-ratio:auto}.stage.pair{justify-content:center;align-items:center;gap:5%;padding:7% 4%;display:flex}.stage.pair>.browser{flex:none;width:45%}.stage.pair>.laptop{flex:none;width:41%}.stage.pair>.tablet{flex:none;width:40%}.stage.pair:not(.gallery-phones)>.phone{flex:none;width:22%;height:auto}.split__media{min-width:0;margin:0}.split--left>.split__media{order:-1}.mock .stage.gp{aspect-ratio:auto}.stage.gp{grid-template-columns:repeat(var(--gp-cols,2), minmax(0, 176px));justify-content:center;place-items:start stretch;gap:28px 4%;padding:6% 5%;display:grid}.gp__item{justify-items:center;gap:12px;min-width:0;margin:0;display:grid}.stage.gp .gp__item .phone{width:100%;height:auto}.gp__cap{border:1px solid var(--line);background:var(--bg-elev);max-width:100%;color:var(--fg-2);text-align:center;overflow-wrap:anywhere;border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:1.45}.gal-br{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:24px 18px;display:grid}.gal-br--3{grid-template-columns:repeat(3,minmax(0,1fr))}.gal-br__item{min-width:0;margin:0}.stage.gal-br__stage{aspect-ratio:16/11}.gal-br__stage>.browser{width:84%}.gal-br--3 .gal-br__stage>.browser{width:86%}.gal-br__zoom{z-index:3;border-radius:inherit;cursor:zoom-in;background:0 0;border:0;justify-content:flex-end;align-items:flex-start;padding:8px;display:flex;position:absolute;inset:0}.gal-br__zoom:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.gal-br__zoom-chip{border-radius:var(--r-full);color:#fff;opacity:0;width:32px;height:32px;transition:opacity var(--t-fast);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0c0c0e9e;place-items:center;display:inline-grid}.gal-br__zoom-chip .icon{width:15px;height:15px}.gal-br__zoom:hover .gal-br__zoom-chip,.gal-br__zoom:focus-visible .gal-br__zoom-chip{opacity:1}@media (hover:none){.gal-br__zoom-chip{opacity:1}}@media (max-width:720px){.figure__pair,.gal-br,.gal-br--3{grid-template-columns:1fr}.stage.pair:is(.pair--browser,.pair--laptop,.pair--tablet){flex-direction:column;gap:18px;padding:7% 0}.stage.pair>.browser{width:86%}.stage.pair>.laptop{width:80%}.stage.pair>.tablet{width:70%}.stage.pair:not(.gallery-phones)>.phone{width:36%}.stage.gp{grid-template-columns:repeat(var(--gp-cols-sm,2), minmax(0, 1fr));gap:22px 6%;padding:7%}.stage.vid-stage{padding:5%}}@media (pointer:coarse){.gal-br__zoom-chip{width:44px;height:44px}}@media (prefers-reduced-motion:reduce){.cs-anim--float .stage>.duo>.phone,.cs-anim--scroll :is(.browser__screen,.laptop__screen,.tablet__screen,.phone__screen)>img,.cs-anim--parallax :is(.stage,.phone-feature__stage) :is(.browser,.laptop,.tablet,.phone),.cs-anim--reveal :is(.stage,.phone-feature__stage)>*{animation:none!important}.cs-anim--tilt :is(.stage,.phone-feature__stage)>*{transform:none!important}}:root[data-motion=off] .cs-anim--float .stage>.duo>.phone,:root[data-motion=off] .cs-anim--scroll :is(.browser__screen,.laptop__screen,.tablet__screen,.phone__screen)>img,:root[data-motion=off] .cs-anim--parallax :is(.stage,.phone-feature__stage) :is(.browser,.laptop,.tablet,.phone),:root[data-motion=off] .cs-anim--reveal :is(.stage,.phone-feature__stage)>*{animation:none!important}:root[data-motion=off] .cs-anim--tilt :is(.stage,.phone-feature__stage)>*{transform:none!important}}