.htu-split{font-family:Inter,sans-serif}.htu-split__heading{text-align:center;margin-bottom:3.2rem;font-family:Inter,sans-serif!important;font-weight:900;letter-spacing:-.03em}.htu-split__toggle{display:flex;justify-content:center;gap:0;margin-bottom:2.4rem;background:rgba(var(--color-foreground),.06);border-radius:100px;padding:.4rem;max-width:320px;margin-inline:auto}.htu-split__toggle-btn{flex:1;padding:.85rem 1.5rem;border:none;border-radius:100px;background:transparent;font-family:Inter,sans-serif;font-weight:700;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(var(--color-foreground),.5);cursor:pointer;transition:all .3s ease}.htu-split__toggle-btn.is-active{background:rgb(var(--color-foreground));color:rgb(var(--color-background));box-shadow:0 2px 8px #00000026}.htu-split__panels{position:relative}.htu-split__panel{display:none}.htu-split__panel.is-active{display:block;animation:htuFadeIn .4s ease}@keyframes htuFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.htu-split__hero{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16 / 9;margin-bottom:2.4rem;box-shadow:0 8px 40px #0000001f}.htu-split__hero video,.htu-split__hero img{width:100%;height:100%;object-fit:cover;display:block}.htu-split__hero-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.6) 100%);display:flex;align-items:flex-end;padding:2rem;pointer-events:none}.htu-split__hero-label{font-family:Inter,sans-serif;font-weight:900;font-size:1.5rem;color:#fff;letter-spacing:-.02em;text-transform:uppercase}.htu-split__play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:#ffffffe6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 20px #00000040;z-index:2}.htu-split__play-btn:hover{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 6px 28px #00000059}.htu-split__play-btn svg{width:24px;height:24px;margin-left:3px;fill:rgb(var(--color-foreground))}.htu-split__hero.is-playing .htu-split__play-btn,.htu-split__hero.is-playing .htu-split__hero-overlay{opacity:0;pointer-events:none;transition:opacity .3s ease}.htu-split__steps-heading{text-align:center;font-family:Inter,sans-serif!important;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;margin-bottom:2rem;color:rgb(var(--color-foreground))}.htu-split__steps{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}@media screen and (min-width:750px){.htu-split__steps{grid-template-columns:repeat(4,1fr);gap:1.6rem}}.htu-split__step{display:flex;flex-direction:column;position:relative;border:3px solid var(--htu-accent, #154734);border-radius:1.4rem;margin-top:2rem;overflow:hidden}.htu-split__badge{position:absolute;top:-2rem;left:50%;transform:translate(-50%);width:3.6rem;height:3.6rem;border-radius:50%;background:#fff;color:var(--htu-accent, #154734);border:3px solid var(--htu-accent, #154734);font-family:Inter,sans-serif;font-weight:700;font-size:1.6rem;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 8px #0000001a}@media screen and (min-width:750px){.htu-split__badge{width:4.4rem;height:4.4rem;font-size:2rem;top:-2.2rem}.htu-split__step{margin-top:2.4rem}}.htu-split__step-media{position:relative;overflow:hidden;background:#000;aspect-ratio:1 / 1}.htu-split__step-media video,.htu-split__step-media img{display:block;width:100%;height:100%;object-fit:cover}.htu-split__step-text{padding:1.6rem 1.4rem;background:#fff;text-align:center;display:flex;align-items:center;justify-content:center;border-top:2px solid var(--htu-accent, #154734);min-height:5rem}.htu-split__step-text p{margin:0;font-family:Inter,sans-serif;font-weight:600;font-size:1.4rem;line-height:1.5;text-transform:lowercase;color:rgb(var(--color-heading-text))}@media screen and (min-width:990px){.htu-split__toggle{display:none}.htu-split__panels{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.htu-split__panel{display:block!important;animation:none}.htu-split__hero{aspect-ratio:4 / 5}.htu-split__hero-label{font-size:2rem}}@media screen and (min-width:750px){.htu-split__step-text{padding:1.4rem 1rem}.htu-split__step-text p{font-size:1.3rem}}
/*# sourceMappingURL=/cdn/shop/t/23/assets/section-how-to-use-split.css.map */