.image-text{display:none}.tools{--screen-size: 820px;position:relative;display:block;margin:var(--section-margin) 0;padding:1px var(--container-padding) 0;background-color:var(--color-white)}.tools .intro{max-width:var(--intro-width);font-size:var(--font-size-md)}.tools .intro-headline{max-width:var(--intro-headline-width)}.tools .tools-wrapper{position:relative;padding-top:1px}.tools .tools-background{position:sticky;display:block;top:calc(var(--header-height) + var(--container-padding));left:0;right:0;height:var(--screen-size)}.tools .tools-background::before{content:"";position:absolute;left:40%;right:0;top:0;height:calc(var(--screen-size)*.6);border-radius:var(--border-radius-md);background:var(--color-dark);transition:right .3s var(--ease-in-out-cubic),left .4s var(--ease-in-out-cubic) .1s}.tools .tools-background:has(~.tool:nth-child(odd)[data-current=true])::before{left:0;right:40%;transition:left .3s var(--ease-in-out-cubic),right .4s var(--ease-in-out-cubic) .1s}@media(max-width: 767px){.tools .tools-background{display:none}}@media(min-width: 768px){.tools .tools-background+.tool{margin-top:calc(var(--screen-size)*-1 - var(--container-padding))}}.tools .tool{position:relative;margin:var(--container-padding) 0}.tools .tool:last-child .text-box{padding-bottom:0}@media(min-width: 1000px){.tools .tool{display:flex;align-items:flex-start}.tools .tool:nth-child(even){flex-direction:row-reverse}}@media(max-width: 767px){.tools .tool+.tool{margin-top:10%}}.tools .mockup-box{position:sticky;margin:3.5vh auto;top:calc(var(--header-height) + 3.5vh);flex:1 1 100%;max-width:var(--screen-size);min-width:var(--screen-size);aspect-ratio:1}@media(max-width: 767px){.tools .mockup-box{position:relative;top:0;margin:3% auto -8%}.tools .mockup-box::before{content:"";position:absolute;top:3%;left:-10px;right:-10px;bottom:36%;background-color:var(--color-dark);border-radius:var(--border-radius-md)}.tools .mockup-box:has(.tv){margin-bottom:5%}}.tools .mockup{position:absolute;top:0;left:0;right:0;bottom:0;transform:translate3d(var(--x, 0), var(--y, 0), 0)}.tools .mockup img{position:relative;display:block;width:100%;height:100%;object-fit:cover}.tools .video{position:absolute;display:block;overflow:hidden;transform-origin:left top;object-fit:fill}.tools .laptop .video{top:24.15%;left:4.22%;width:74.45%;height:45.25%;background-color:#000;transform:perspective(var(--screen-size)) skewY(3.2deg) skewX(0.2deg) rotateX(-9.2deg) rotateY(8.8deg) rotateZ(-12deg)}.tools .phone .video{top:14.9%;left:80%;width:14.7%;height:37%;background-color:#000;transform:perspective(var(--screen-size)) skewY(15.6deg) skewX(-24.8deg) rotateX(-2deg) rotateY(-21deg) rotateZ(-12.8deg);border-radius:8%}.tools .app-back .video{top:32.35%;left:7.6%;width:29.15%;height:66.2%;background-color:#00bfff;transform:perspective(var(--screen-size)) skewY(-22deg) skewX(32.8deg) rotateX(5deg) rotateY(7deg) rotateZ(5deg);border-radius:5%;transform-origin:left top}.tools .app-front .video{top:15%;left:25%;width:29.15%;height:65.2%;background-color:#00bfff;transform:perspective(var(--screen-size)) skewY(-21.5deg) skewX(33.8deg) rotateX(6deg) rotateY(8deg) rotateZ(5deg);border-radius:5%;transform-origin:left top}.tools .tv{left:calc(var(--container-padding)*-1)}.tools .tv picture{display:block}.tools .tv .video{position:absolute;top:1.75%;left:12.45%;width:97%;height:64.5%;background-color:#000;transform:perspective(var(--screen-size)) rotateX(1deg) rotateY(15.5deg) rotateZ(-1.1deg) skewY(3.8deg) skewX(0deg);transform-origin:left center;box-shadow:0 0 0 1px var(--color-white)}.tools .text-box{margin:0;flex:1 1 100%}@media(min-width: 1200px){.tools .text-box{max-width:calc(40% - var(--container-padding));padding:24vh 0}}.tools .tracker-1,.tools .tracker-2,.tools .tracker-current{position:absolute;top:0;left:0;width:10px;z-index:1;pointer-events:none}.tools .tracker-1{height:var(--screen-size)}.tools .tracker-2{bottom:-50vh;left:30px}.tools .tracker-current{left:50px;top:calc(50vh - var(--header-height));bottom:calc(50vh - var(--header-height))}@media(orientation: portrait){.tools{--screen-size: 80vw}}@media(orientation: portrait)and (max-width: 767px){.tools{--screen-size: 90vw}}