@property --sg-hwi-progress{syntax: "<number>"; inherits: true; initial-value: .2;}.sg-hwi{--sg-hwi-bg: var(--sg-ob, #0B0907);--sg-hwi-bg-2: var(--sg-ob2, #14110D);--sg-hwi-fg: var(--sg-bone, #F5EDE0);--sg-hwi-accent: var(--brand-amber, #E0A033);--sg-hwi-hair: var(--sg-hair, rgba(245, 237, 224, .08));--sg-hwi-hair-2: rgba(245, 237, 224, .14);--sg-hwi-muted: var(--sg-bone-dim2, rgba(245, 237, 224, .55));--sg-hwi-font: "Inter", system-ui, sans-serif;--sg-hwi-font-display: "Archivo Black", "Inter", system-ui, sans-serif;--sg-hwi-font-mono: "IBM Plex Mono", ui-monospace, monospace;--sg-hwi-radius: 24px;--sg-hwi-ease: cubic-bezier(.22, .61, .36, 1);background:var(--sg-hwi-bg);color:var(--sg-hwi-fg);font-family:var(--sg-hwi-font);padding:var(--sg-hwi-pt) 0 var(--sg-hwi-pb);border-top:1px solid var(--sg-hwi-hair);border-bottom:1px solid var(--sg-hwi-hair);scroll-margin-top:80px;overflow:clip}.sg-hwi--pin{position:relative;overflow:visible}.sg-hwi--pin>[data-sg-hwi-sentinel]{display:block!important}.sg-hwi *,.sg-hwi *:before,.sg-hwi *:after{box-sizing:border-box}.sg-hwi__inner{max-width:1280px;margin-inline:auto;padding-inline:clamp(18px,4vw,28px)}.sg-hwi__head{max-width:30ch;margin-bottom:clamp(30px,4.5vw,60px)}.sg-hwi__kicker{margin:0;font-family:var(--sg-hwi-font-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sg-hwi-accent)}.sg-hwi__title{font-family:var(--sg-hwi-font);font-weight:800;margin:.45em 0 0;font-size:clamp(30px,4.6vw,56px);line-height:1.02;letter-spacing:-.025em}.sg-hwi__sub{margin:.8em 0 0;max-width:46ch;font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:var(--sg-hwi-muted)}.sg-hwi__flow{position:relative;border-top:1px solid var(--sg-hwi-hair)}.sg-hwi__step{border-bottom:1px solid var(--sg-hwi-hair)}.sg-hwi__trigger{display:flex;gap:14px;align-items:center;width:100%;padding:20px 2px;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}.sg-hwi__trigger:focus{outline:none}.sg-hwi__trigger:focus-visible{outline:2px solid var(--sg-hwi-accent);outline-offset:4px;border-radius:12px}.sg-hwi__dot{position:relative;z-index:1;flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--sg-hwi-hair-2);border-radius:50%;background:var(--sg-hwi-bg-2);color:var(--sg-hwi-muted);font-family:var(--sg-hwi-font-mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;transition:background .32s var(--sg-hwi-ease),color .32s var(--sg-hwi-ease),border-color .32s var(--sg-hwi-ease),box-shadow .32s var(--sg-hwi-ease)}.sg-hwi__dot-num,.sg-hwi__dot-check{position:absolute;transition:opacity .24s var(--sg-hwi-ease),transform .24s var(--sg-hwi-ease)}.sg-hwi__dot-check{width:16px;height:16px;opacity:0;transform:scale(.6)}.sg-hwi__step.is-complete .sg-hwi__dot{border-color:color-mix(in srgb,var(--sg-hwi-accent) 50%,transparent);color:var(--sg-hwi-accent)}.sg-hwi__step.is-complete .sg-hwi__dot-num{opacity:0;transform:scale(.6)}.sg-hwi__step.is-complete .sg-hwi__dot-check{opacity:1;transform:scale(1)}.sg-hwi__step.is-active .sg-hwi__dot{background:var(--sg-hwi-accent);border-color:var(--sg-hwi-accent);color:#0b0b0b;box-shadow:0 0 0 6px color-mix(in srgb,var(--sg-hwi-accent) 16%,transparent)}.sg-hwi__step.is-active .sg-hwi__dot-num{opacity:1;transform:scale(1)}.sg-hwi__step.is-active .sg-hwi__dot-check{opacity:0;transform:scale(.6)}.sg-hwi__label{display:flex;flex-direction:column;gap:3px;min-width:0}.sg-hwi__step-title{font-family:var(--sg-hwi-font);font-weight:700;font-size:clamp(17px,1.6vw,21px);line-height:1.25;letter-spacing:-.01em;color:var(--sg-hwi-muted);transition:color .3s var(--sg-hwi-ease)}.sg-hwi__step.is-active .sg-hwi__step-title{color:var(--sg-hwi-fg)}.sg-hwi__step-desc{font-size:13.5px;line-height:1.4;color:color-mix(in srgb,var(--sg-hwi-fg) 40%,transparent)}.sg-hwi__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .46s var(--sg-hwi-ease),opacity .3s linear}.sg-hwi__step.is-active>.sg-hwi__panel{grid-template-rows:1fr;opacity:1}.sg-hwi__panel-inner{overflow:hidden;min-height:0}.sg-hwi__step.is-active>.sg-hwi__panel>.sg-hwi__panel-inner{padding-bottom:26px}.sg-hwi__media{position:relative;aspect-ratio:var(--sg-hwi-ratio, 4 / 3);border-radius:var(--sg-hwi-radius);overflow:hidden;isolation:isolate;border:1px solid var(--sg-hwi-hair);background:radial-gradient(120% 90% at 15% 0%,color-mix(in srgb,var(--sg-hwi-fg) 9%,transparent),transparent 60%),color-mix(in srgb,var(--sg-hwi-fg) 4%,transparent);box-shadow:0 40px 80px -50px #000000f2;transition:transform .6s var(--sg-hwi-ease),box-shadow .6s var(--sg-hwi-ease);will-change:transform}.sg-hwi__img,.sg-hwi__ph-svg{display:block;width:100%;height:100%;object-fit:var(--sg-hwi-fit, cover);object-position:center}.sg-hwi__img--ph{display:grid;place-items:center;opacity:.28}.sg-hwi__media img.sg-hwi__logo{position:absolute;top:14px;right:14px;left:auto;bottom:auto;z-index:3;width:44px;height:44px;border-radius:50%;object-fit:contain;box-shadow:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}@media(max-width:480px){.sg-hwi__media img.sg-hwi__logo{width:36px;height:36px;top:10px;right:10px}}.sg-hwi__step.is-active>.sg-hwi__panel[data-effect=cook] .sg-hwi__media{box-shadow:0 40px 80px -50px #000000f2,0 0 90px -28px color-mix(in srgb,var(--sg-hwi-accent) 70%,transparent)}.sg-hwi__copy{padding:24px 4px 0;max-width:42ch}.sg-hwi__headline{font-family:var(--sg-hwi-font);font-weight:800;margin:0;font-size:clamp(22px,2.7vw,34px);line-height:1.1;letter-spacing:-.02em;color:var(--sg-gold, #E0A033)}.sg-hwi__subline{margin:.6em 0 0;font-size:clamp(15px,1.35vw,17.5px);line-height:1.55;color:var(--sg-gold, #E0A033)}.sg-hwi-fx{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;display:block}.sg-hwi-fx--cool{color:#cfe9ff}.sg-hwi-fx__flake{position:absolute;top:-14%;left:calc(6% + (var(--n) - 1) * 13.5%);width:clamp(10px,1.5vw,18px);height:auto;opacity:0;filter:drop-shadow(0 0 6px rgb(190 225 255 / .55))}.sg-hwi__step.is-active .sg-hwi-fx__flake{animation:sg-hwi-fall 6.5s linear infinite;animation-delay:calc(var(--n) * -.85s)}@keyframes sg-hwi-fall{0%{opacity:0;transform:translateZ(0) rotate(0)}12%{opacity:.85}88%{opacity:.55}to{opacity:0;transform:translate3d(14px,620%,0) rotate(160deg)}}.sg-hwi-fx__wisp{position:absolute;left:42%;bottom:34%;width:clamp(26px,3.4vw,44px);height:clamp(60px,8vw,110px);border-radius:999px;background:linear-gradient(to top,transparent,rgb(255 255 255 / .5));filter:blur(11px);opacity:0}.sg-hwi-fx__wisp--2{left:52%;bottom:38%;animation-delay:1.1s}.sg-hwi-fx__wisp--3{left:34%;bottom:30%;animation-delay:2.2s}.sg-hwi__step.is-active .sg-hwi-fx__wisp{animation:sg-hwi-steam 4.4s ease-in-out infinite}.sg-hwi__step.is-active .sg-hwi-fx__wisp--2{animation-delay:1.1s}.sg-hwi__step.is-active .sg-hwi-fx__wisp--3{animation-delay:2.2s}@keyframes sg-hwi-steam{0%{opacity:0;transform:translate3d(0,12%,0) scale(.85)}35%{opacity:.75}to{opacity:0;transform:translate3d(-10px,-90%,0) scale(1.5)}}.sg-hwi__cta-wrap{margin-top:clamp(28px,4vw,48px)}.sg-hwi__cta{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:999px;background:var(--sg-hwi-accent);color:#0b0b0b;font-size:15px;font-weight:600;text-decoration:none;transition:transform .26s var(--sg-hwi-ease),box-shadow .26s var(--sg-hwi-ease),filter .26s}.sg-hwi__cta svg{width:16px;height:16px;transition:transform .26s var(--sg-hwi-ease)}.sg-hwi__cta:hover{filter:brightness(1.06);box-shadow:0 14px 34px -14px color-mix(in srgb,var(--sg-hwi-accent) 85%,transparent)}.sg-hwi__cta:hover svg{transform:translate(3px)}.sg-hwi__cta:focus-visible{outline:2px solid var(--sg-hwi-fg);outline-offset:3px}@media screen and (min-width:750px){.sg-hwi__flow{border-top:0;display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);column-gap:clamp(34px,5.5vw,84px);align-items:start}.sg-hwi--rail .sg-hwi__flow:before,.sg-hwi--rail .sg-hwi__flow:after{content:"";position:absolute;left:17px;width:2px;border-radius:2px;pointer-events:none;z-index:0}.sg-hwi--rail .sg-hwi__flow:before{top:30px;bottom:30px;background:var(--sg-hwi-hair)}.sg-hwi--rail .sg-hwi__flow:after{top:30px;height:calc((100% - 60px) * var(--sg-hwi-progress, .2));background:linear-gradient(180deg,var(--sg-hwi-accent),color-mix(in srgb,var(--sg-hwi-accent) 55%,transparent));box-shadow:0 0 14px -1px color-mix(in srgb,var(--sg-hwi-accent) 80%,transparent);transition:height .56s var(--sg-hwi-ease)}.sg-hwi__step{display:contents}.sg-hwi__trigger{grid-column:1;padding:18px 18px 18px 0;border-bottom:1px solid var(--sg-hwi-hair);border-radius:0 14px 14px 0;transition:background .32s var(--sg-hwi-ease)}.sg-hwi__step:last-of-type .sg-hwi__trigger{border-bottom:0}.sg-hwi__trigger:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--sg-hwi-fg) 5%,transparent),transparent 80%)}.sg-hwi__panel{grid-column:2;grid-row:1 / -1;align-self:start;display:block;opacity:0;visibility:hidden;transform:translate3d(0,14px,0) scale(.985);transition:opacity .42s var(--sg-hwi-ease),transform .48s var(--sg-hwi-ease),visibility 0s linear .48s;position:sticky;top:clamp(20px,8vh,90px)}.sg-hwi__step.is-active>.sg-hwi__panel{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s;z-index:1}.sg-hwi__panel-inner{overflow:visible}.sg-hwi__step.is-active>.sg-hwi__panel>.sg-hwi__panel-inner{padding-bottom:0}.sg-hwi__media:hover{transform:perspective(1100px) rotateX(1.1deg) rotateY(-1.7deg) translateY(-4px)}}@media screen and (min-width:990px){.sg-hwi__trigger{padding-block:22px}}@media(prefers-reduced-motion:reduce){.sg-hwi *,.sg-hwi *:before,.sg-hwi *:after{animation:none!important;transition-duration:1ms!important;transition-delay:0ms!important}.sg-hwi-fx--cool,.sg-hwi-fx--steam{display:none}.sg-hwi__media:hover{transform:none}}@media(min-width:750px){.sg-hwi--pin{min-height:calc(100vh + (var(--sg-hwi-steps, 5) * var(--sg-hwi-step-vh, 66) * 1vh));padding-top:0;padding-bottom:0}.sg-hwi--pin .sg-hwi__inner{position:sticky;position:-webkit-sticky;top:var(--sg-hwi-pin-top, 64px);min-height:calc(100vh - var(--sg-hwi-pin-top, 64px));display:flex;flex-direction:column;justify-content:center;padding-top:28px;padding-bottom:28px}.sg-hwi--pin .sg-hwi__panel{position:relative;top:auto}.sg-hwi--pin .sg-hwi__head{margin-bottom:24px}.sg-hwi--pin .sg-hwi__media{max-height:calc(100vh - 350px)}.sg-hwi--pin .sg-hwi__panel{transition:opacity .18s linear,transform .18s cubic-bezier(.22,.61,.36,1),visibility 0s linear .18s}}@media(max-width:749.98px){.sg-hwi--pin{min-height:calc(100vh + ((var(--sg-hwi-steps, 5) - .5) * var(--sg-hwi-step-vh, 66) * 1vh));min-height:calc(100svh + (var(--sg-hwi-steps, 5) - .5) * min(calc(var(--sg-hwi-step-vh, 66) * 1svh),560px));padding-top:0;padding-bottom:0}.sg-hwi--pin .sg-hwi__inner{position:sticky;position:-webkit-sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:22px;padding-bottom:14px;overflow:hidden}.sg-hwi--pin .sg-hwi__head{margin-bottom:12px}.sg-hwi--pin .sg-hwi__flow{border-top:0;padding-bottom:calc(min(46vh,440px) + 14px);padding-bottom:calc(min(46svh,440px) + 14px)}.sg-hwi--pin .sg-hwi__trigger{padding:10px 2px}.sg-hwi--pin .sg-hwi__dot{width:30px;height:30px;font-size:12px}.sg-hwi--pin .sg-hwi__step-desc{display:none}.sg-hwi--pin .sg-hwi__step:last-of-type{border-bottom:0}.sg-hwi--pin .sg-hwi__panel{position:absolute;left:0;right:0;bottom:0;top:auto;height:min(46vh,440px);height:min(46svh,440px);display:block;opacity:0;visibility:hidden;transform:translate3d(0,10px,0);transition:opacity .2s linear,transform .22s var(--sg-hwi-ease),visibility 0s linear .22s}.sg-hwi--pin .sg-hwi__step.is-active>.sg-hwi__panel{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s;z-index:1}.sg-hwi--pin .sg-hwi__panel-inner{overflow:visible;padding-bottom:0!important}.sg-hwi--pin .sg-hwi__media{aspect-ratio:auto;height:min(27vh,260px);height:min(27svh,260px)}.sg-hwi--pin .sg-hwi__copy{padding:12px 2px 0}.sg-hwi--pin .sg-hwi__headline{font-size:21px}.sg-hwi--pin .sg-hwi__subline{font-size:14px;margin-top:.35em}}@media(prefers-reduced-motion:reduce){.sg-hwi--pin{min-height:0;padding-top:var(--sg-hwi-pt);padding-bottom:var(--sg-hwi-pb)}.sg-hwi--pin .sg-hwi__inner{position:static;height:auto;min-height:0;display:block;padding-top:0;padding-bottom:0;overflow:visible}.sg-hwi--pin .sg-hwi__flow{padding-bottom:0}.sg-hwi--pin .sg-hwi__panel{position:static;height:auto;visibility:visible;transform:none}.sg-hwi--pin .sg-hwi__step-desc{display:block}.sg-hwi--pin .sg-hwi__media{max-height:none;height:auto;aspect-ratio:var(--sg-hwi-ratio, 4 / 3)}}
/*# sourceMappingURL=/cdn/shop/t/85/assets/50g-hwi.css.map */