.tsis{--tsis-padding-top-d: 82px;--tsis-padding-bottom-d: 82px;--tsis-padding-top-m: 44px;--tsis-padding-bottom-m: 44px;--tsis-header-max: 760px;--tsis-grid-gap: 76px;--tsis-list-max: 600px;--tsis-image-height-d: 460px;--tsis-image-height-m: 340px;--tsis-image-radius: 8px;--tsis-subheading-size-d: 12px;--tsis-subheading-size-m: 11px;--tsis-heading-size-d: 42px;--tsis-heading-size-m: 32px;--tsis-text-size-d: 17px;--tsis-text-size-m: 15px;--tsis-step-title-size-d: 28px;--tsis-step-title-size-m: 22px;--tsis-step-text-size-d: 17px;--tsis-step-text-size-m: 15px;--tsis-number-size-d: 16px;--tsis-number-size-m: 14px;--tsis-number-box-d: 48px;--tsis-number-box-m: 40px;--tsis-accent: #5132d8;--tsis-inactive-number-bg: #d2d6d9;--tsis-muted-opacity: .66;padding-top:var(--tsis-padding-top-d);padding-bottom:var(--tsis-padding-bottom-d)}.tsis .tsis__header{max-width:var(--tsis-header-max);margin-bottom:clamp(34px,5vw,72px)}.tsis .tsis__header--center{margin-inline:auto;text-align:center}.tsis .tsis__subheading{margin:0 0 18px;color:rgba(var(--color-foreground),var(--tsis-muted-opacity));font-size:var(--tsis-subheading-size-d);font-weight:700;letter-spacing:0;line-height:1.2;text-transform:uppercase}.tsis .tsis__heading{margin:0;color:rgb(var(--color-foreground));font-size:var(--tsis-heading-size-d);letter-spacing:0;line-height:1.15}.tsis .tsis__intro{margin-top:18px;color:rgb(var(--color-foreground));font-size:var(--tsis-text-size-d);letter-spacing:0;line-height:1.45}.tsis .tsis__intro p{margin:0}.tsis .tsis__grid{display:grid;grid-template-columns:minmax(320px,var(--tsis-list-max)) minmax(0,1fr);gap:var(--tsis-grid-gap);align-items:center}.tsis .tsis__steps{display:flex;flex-direction:column;gap:8px;min-width:0}.tsis .tsis__step{position:relative;display:grid;grid-template-columns:var(--tsis-number-box-d) minmax(0,1fr);gap:22px;width:100%;min-width:0;padding:8px 0;border:0;background:transparent;color:rgb(var(--color-foreground));text-align:left;cursor:pointer}.tsis .tsis__step:after{content:"";position:absolute;top:calc(var(--tsis-number-box-d) + 12px);bottom:8px;left:calc((var(--tsis-number-box-d) / 2) - 1px);width:2px;background:var(--tsis-accent);opacity:0;transform:scaleY(.6);transform-origin:top;transition:opacity .24s ease,transform .24s ease}.tsis .tsis__step.is-active:after{opacity:1;transform:scaleY(1)}.tsis .tsis__number{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--tsis-number-box-d);height:var(--tsis-number-box-d);border-radius:50%;background:var(--tsis-inactive-number-bg);color:rgb(var(--color-background));font-size:var(--tsis-number-size-d);font-weight:700;letter-spacing:0;line-height:1;transition:background .24s ease,color .24s ease,transform .24s ease}.tsis .tsis__step.is-active .tsis__number{background:var(--tsis-accent);color:#fff}.tsis .tsis__step:hover .tsis__number,.tsis .tsis__step:focus-visible .tsis__number{transform:translateY(-1px)}.tsis .tsis__step:focus-visible{outline:2px solid rgba(var(--color-foreground),.35);outline-offset:4px}.tsis .tsis__step-content{display:flex;min-width:0;flex-direction:column;padding-top:5px}.tsis .tsis__step-title{display:block;color:rgb(var(--color-foreground));font-size:var(--tsis-step-title-size-d);font-weight:700;letter-spacing:0;line-height:1.16;transition:color .24s ease}.tsis .tsis__step-text{display:grid;grid-template-rows:0fr;max-width:520px;margin-top:0;color:rgba(var(--color-foreground),var(--tsis-muted-opacity));font-size:var(--tsis-step-text-size-d);letter-spacing:0;line-height:1.42;opacity:0;overflow:hidden;transition:grid-template-rows .34s ease,margin-top .34s ease,opacity .24s ease}.tsis .tsis__step-text>*{min-height:0}.tsis .tsis__step.is-active .tsis__step-text{grid-template-rows:1fr;margin-top:16px;opacity:1}.tsis .tsis__media-stage{position:relative;min-height:var(--tsis-image-height-d);overflow:hidden;border-radius:var(--tsis-image-radius);background:rgba(var(--color-foreground),.08)}.tsis .tsis__panel{width:100%;height:100%;min-height:var(--tsis-image-height-d)}.tsis .tsis__panel:not(.is-active){position:absolute;top:0;right:0;bottom:0;left:0;visibility:hidden;pointer-events:none}.tsis .tsis__panel.is-entering{position:relative;z-index:2;animation:tsis-panel-in .45s cubic-bezier(.22,1,.36,1) both}.tsis .tsis__panel.is-leaving{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;visibility:visible;animation:tsis-panel-out .32s cubic-bezier(.4,0,.2,1) both}.tsis .tsis__panel[data-direction=back].is-entering{animation-name:tsis-panel-in-back}.tsis .tsis__panel[data-direction=back].is-leaving{animation-name:tsis-panel-out-back}.tsis .tsis__panel picture{display:block;width:100%;height:100%}.tsis .tsis__image,.tsis .tsis__placeholder{display:block;width:100%;height:100%;min-height:var(--tsis-image-height-d);object-fit:cover}.tsis .tsis__placeholder{opacity:.45}@keyframes tsis-panel-in{0%{opacity:0;transform:translate(34px)}to{opacity:1;transform:translate(0)}}@keyframes tsis-panel-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-26px)}}@keyframes tsis-panel-in-back{0%{opacity:0;transform:translate(-34px)}to{opacity:1;transform:translate(0)}}@keyframes tsis-panel-out-back{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(26px)}}@media(prefers-reduced-motion:reduce){.tsis .tsis__panel.is-entering,.tsis .tsis__panel.is-leaving{animation:none}.tsis .tsis__step,.tsis .tsis__number,.tsis .tsis__step-text{transition:none}}@media(max-width:989px){.tsis{padding-top:var(--tsis-padding-top-m);padding-bottom:var(--tsis-padding-bottom-m)}.tsis .tsis__subheading{font-size:var(--tsis-subheading-size-m)}.tsis .tsis__heading{font-size:var(--tsis-heading-size-m)}.tsis .tsis__intro{font-size:var(--tsis-text-size-m)}.tsis .tsis__grid{grid-template-columns:1fr;gap:28px}.tsis .tsis__step{grid-template-columns:var(--tsis-number-box-m) minmax(0,1fr);gap:16px}.tsis .tsis__step:after{top:calc(var(--tsis-number-box-m) + 12px);left:calc((var(--tsis-number-box-m) / 2) - 1px)}.tsis .tsis__number{width:var(--tsis-number-box-m);height:var(--tsis-number-box-m);font-size:var(--tsis-number-size-m)}.tsis .tsis__step-title{font-size:var(--tsis-step-title-size-m)}.tsis .tsis__step-text{font-size:var(--tsis-step-text-size-m)}.tsis .tsis__media-stage,.tsis .tsis__panel,.tsis .tsis__image,.tsis .tsis__placeholder{min-height:var(--tsis-image-height-m)}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/three-step-image-showcase.css.map */