.interactive-product-app__container{display:flex;flex-direction:column;align-items:center;margin:4rem auto 9.375rem}@media (max-width: 1024px){.interactive-product-app{margin-bottom:3rem;padding:0 var(--layout-padding-small)}}.interactive-product-app__headline{font-size:var(--fs-headline-large);font-weight:600;text-align:center;line-height:1.125em;margin-bottom:2rem;position:relative;z-index:10}.interactive-product-app__tabs{display:flex;background:var(--gradient-standard);order:2;border-radius:4rem}@media (max-width: 1024px){.interactive-product-app__tabs{margin-top:6rem}}.interactive-product-app__tabs ona-tab{width:50%;display:flex;align-items:center;justify-content:center;position:relative;aspect-ratio:1;padding:1rem;color:var(--color-white-100);outline:none;cursor:pointer}.interactive-product-app__tabs ona-tab:before{content:"";position:absolute;left:50%;top:50%;width:calc(100% - 7px);height:calc(100% - 7px);background:var(--color-white-100);opacity:0;border-radius:100%;z-index:0;transform:translate(-50%,-50%);transition:opacity .35s}.interactive-product-app__tabs ona-tab[selected]{color:var(--color-blue-400)}.interactive-product-app__tabs ona-tab[selected]:before{opacity:1}.interactive-product-app__tab-icon{position:relative;z-index:1;width:1.5625rem;height:auto;display:block;aspect-ratio:25 / 20}@media (max-width: 1279px){.interactive-product-app__tab-icon{width:1.66rem;aspect-ratio:1;height:auto}}.interactive-product-app__viewport{display:grid;grid-template-columns:[product-start] .5fr [product-middle] .5fr [product-end app-start] .5fr [app-middle] .5fr [app-end];grid-gap:10%;gap:10%;padding-bottom:2rem}@media (max-width: 1279px){.interactive-product-app__viewport{width:200vw;gap:0;transition:translate .5s}.interactive-product-app__viewport--toggled{translate:-50% 0}}.interactive-product-app__viewport-wrapper{width:65%}@media (max-width: 1279px){.interactive-product-app__viewport-wrapper{width:100vw;overflow:hidden}}.interactive-product-app__viewport ona-tabpanel{display:flex;flex-direction:column;align-items:center;position:relative;grid-row:1;z-index:10}.interactive-product-app__viewport ona-tabpanel[hidden]{z-index:5}.interactive-product-app__viewport ona-tabpanel[hidden] .interactive-product-app__interactive-image{scale:.79}.interactive-product-app__viewport ona-tabpanel[hidden] .interactive-product-app__feature-hotspot,.interactive-product-app__viewport ona-tabpanel[hidden] .interactive-product-app__explore-button{filter:grayscale(1);pointer-events:none}.interactive-product-app__viewport ona-tabpanel[hidden] .interactive-product-app__explore-button{opacity:.5}.interactive-product-app__viewport-decoration{position:relative;display:flex;justify-content:center;align-items:center;grid-column:product-middle / app-middle;grid-row:1;pointer-events:none;z-index:0}.interactive-product-app__viewport-decoration>svg{position:relative;z-index:1}@media (max-width: 1279px){.interactive-product-app__viewport-decoration>svg{display:none;width:20%}}.interactive-product-app__viewport-decoration:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;display:block;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='7'><rect x='0' y='0' width='8' height='7' rx='3.5' ry='3.5' fill='%231a509f'/></svg>");background-repeat:repeat-x;background-position:center}.interactive-product-app__product-content{grid-column:product}.interactive-product-app__app-content{grid-column:app}.interactive-product-app .decoration-radial{display:none;--decoration-radial-r: -90deg}@media (min-width: 1280px){.interactive-product-app ona-tabpanel:not([hidden]) .decoration-radial{display:block}}.interactive-product-app__interactive-image{position:relative;width:100%;transform-origin:center;transition:scale .35s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.interactive-product-app__image{--ona-image-slot-aspect-ratio: 502 / 476;--ona-image-slot-object-fit: contain;--ona-image-slot-background-color: transparent}.interactive-product-app__explore-button{position:absolute;bottom:-2rem;left:50%;white-space:nowrap;translate:-50% 100%;transition:var(--button-transition),opacity .35s,filter .35s}@media (max-width: 1279px){.interactive-product-app__explore-button{font-size:var(--fs-headline-tiny);left:0;translate:0 100%}}.interactive-product-app__feature{--feature-icon-size: 1.75rem;--feature-padding-x: 1rem;--feature-padding-y: 1rem;--feature-icon-space: calc(var(--feature-padding-x) + var(--feature-icon-size) + var(--feature-padding-x) * 2);position:absolute;padding:1rem 1rem 1rem 4.75rem;padding:var(--feature-padding-y) var(--feature-padding-x) var(--feature-padding-y) var(--feature-icon-space);left:-2.375rem;left:calc(var(--hotspot-x, 0rem) - var(--feature-icon-space) / 2);top:0%;top:var(--hotspot-y, 0%);translate:0 -50%;transition:opacity .35s,background-color .35s,filter .35s,scale .35s;pointer-events:none}.interactive-product-app__feature-heading{display:flex}.interactive-product-app__feature-hotspot{position:absolute;left:var(--feature-padding-x);top:50%;display:inline-block;box-sizing:content-box;width:var(--feature-icon-size);height:var(--feature-icon-size);aspect-ratio:1;padding:.5rem;translate:0 -50%;transform-origin:right center;transition:scale .35s;pointer-events:all}.interactive-product-app__feature-hotspot:before,.interactive-product-app__feature-hotspot:after{content:"";display:block;position:absolute;left:50%;top:50%;translate:-50% -50%;transition:opacity .35s;border-radius:100%;z-index:0}.interactive-product-app__feature-hotspot:before{width:120%;height:120%;background:linear-gradient(#fff,#fff) padding-box,var(--gradient-standard-reverse) border-box;border:5px solid transparent}@media (max-width: 1279px){.interactive-product-app__feature-hotspot:before{width:140%;height:140%}}.interactive-product-app__feature-hotspot:after{width:150%;height:150%;border:1px solid var(--color-blue-200)}@media (max-width: 1279px){.interactive-product-app__feature-hotspot:after{width:130%;height:130%}}.interactive-product-app__feature-icon{display:block;position:relative;width:var(--feature-icon-size);height:auto;aspect-ratio:1;z-index:10}.interactive-product-app__feature-title{font-size:var(--fs-headline-small);white-space:nowrap}.interactive-product-app__feature-description{font-size:var(--fs-body-small);width:25em}.interactive-product-app__feature-title,.interactive-product-app__feature-description{opacity:0;transition:opacity .35s}@media (min-width: 1280px){.interactive-product-app__feature:has(.interactive-product-app__feature-hotspot:hover){background-color:#fffffff2;z-index:10}.interactive-product-app__feature:has(.interactive-product-app__feature-hotspot:hover) .interactive-product-app__feature-title,.interactive-product-app__feature:has(.interactive-product-app__feature-hotspot:hover) .interactive-product-app__feature-description{opacity:1}.interactive-product-app__feature:has(.interactive-product-app__feature-hotspot:hover) .interactive-product-app__feature-hotspot{scale:1.25}.interactive-product-app__feature:has(.interactive-product-app__feature-hotspot:hover) .interactive-product-app__feature-hotspot:before,.interactive-product-app__feature:has(.interactive-product-app__feature-hotspot:hover) .interactive-product-app__feature-hotspot:after{opacity:0}}.interactive-product-app__feature-mobile-card{width:100%}.interactive-product-app__feature-mobile-card .interactive-product-app__feature-title,.interactive-product-app__feature-mobile-card .interactive-product-app__feature-description{opacity:1;width:auto;max-width:100%;font-weight:400}.interactive-product-app__feature-mobile-card .interactive-product-app__feature-heading{width:100%;align-items:center;margin-bottom:1rem}.interactive-product-app__feature-mobile-card .interactive-product-app__feature-icon{width:2em;aspect-ratio:1;margin-right:1em}@media (min-width: 1280px){.interactive-product-app__mobile-drawer{display:none}}@media (max-width: 1279px){.interactive-product-app__mobile-drawer{display:flex;position:fixed;bottom:0;left:0;width:100svw;padding:var(--layout-padding-small);background:var(--color-white-100);box-shadow:0 -1px 25px color-mix(in srgb,var(--color-topo-300),transparent 50%);opacity:0;translate:0 100%;transition:translate .35s,opacity .35s;will-change:translate,opacity;z-index:1000}.interactive-product-app__mobile-drawer--open{opacity:1;translate:0 0}}.interactive-product-app__mobile-drawer-close-button{display:block;width:1em;aspect-ratio:1;margin-left:auto;margin-right:-1rem;padding:1rem;box-sizing:content-box}
/*# sourceMappingURL=/cdn/shop/t/5/assets/section-interactive-product-app.css.map */