.tp-how{--tp-how-line: rgba(0, 0, 0, .09);background:var(--tp-bg);color:var(--tp-muted);font-family:var(--tp-font);padding:48px 0 42px;overflow-x:clip}.tp-how *,.tp-how *:before,.tp-how *:after{box-sizing:border-box}.tp-how--paper{background:var(--tp-card)}.tp-how--peach,.tp-how--sage{background:var(--tp-tint)}.tp-how--night{--tp-how-line: rgba(255, 255, 255, .12);background:var(--tp-dark);color:var(--tp-on-dark)}@media screen and (min-width:750px){.tp-how{padding:64px 0 56px}}.tp-how__wrap{max-width:var(--tp-container, 1600px);margin:0 auto;padding:0 32px}@media screen and (max-width:749px){.tp-how__wrap{padding:0 20px}}.tp-how__head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:56px}.tp-how__label{margin:0;font-size:var(--tp-fs-label, 13px);font-weight:var(--tp-fw-medium, 500);line-height:1.2;letter-spacing:var(--tp-ls-label, 1px);text-transform:uppercase;color:var(--tp-muted)}.tp-how__title{margin:0;font-family:inherit;font-size:var(--tp-fs-h1, 64px);font-weight:var(--tp-fw-medium, 500);line-height:var(--tp-lh-h1, 1.08);letter-spacing:var(--tp-ls-h1, -1.6px);color:var(--tp-ink);text-wrap:balance}.tp-how__title em{display:block;font-style:normal;color:var(--tp-cta)}.tp-how__lead{max-width:640px}.tp-how__lead p{margin:0;font-size:var(--tp-fs-body, 18px);line-height:var(--tp-lh-body, 1.6);color:var(--tp-muted)}.tp-how--night .tp-how__title,.tp-how--night .tp-how__h3{color:#fff}.tp-how--night .tp-how__label,.tp-how--night .tp-how__num,.tp-how--night .tp-how__lead p,.tp-how--night .tp-how__text p{color:var(--tp-on-dark)}@media screen and (max-width:749px){.tp-how__title{font-size:32px;letter-spacing:-.7px}.tp-how__lead p{font-size:17px}}.tp-how__row{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media" "body";row-gap:20px;align-items:start;padding:64px 0;border-top:1px solid var(--tp-how-line)}.tp-how__row:first-child{border-top:0;padding-top:0}.tp-how__row:last-child{padding-bottom:0}.tp-how__row>*{min-width:0}@media screen and (min-width:992px){.tp-how__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head media" "body media";column-gap:80px;row-gap:18px}.tp-how__row--flip{grid-template-areas:"media head" "media body"}.tp-how__row-head{align-self:end}}.tp-how__row-head{grid-area:head;display:flex;flex-direction:column;gap:16px}.tp-how__num{font-size:13px;font-weight:500;line-height:normal;letter-spacing:1px;text-transform:uppercase;color:var(--tp-muted)}.tp-how__h3{margin:0;font-family:inherit;font-size:var(--tp-fs-h3, 40px);line-height:var(--tp-lh-h3, 1.15);letter-spacing:var(--tp-ls-h3, -.8px);font-weight:var(--tp-fw-medium, 500);color:var(--tp-ink)}.tp-how__body{grid-area:body;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.tp-how__body>*{min-width:0}.tp-how__text{display:flex;flex-direction:column;gap:16px}.tp-how__text p{margin:0;font-size:var(--tp-fs-body, 18px);line-height:var(--tp-lh-body, 1.6);color:var(--tp-muted);overflow-wrap:anywhere}@media screen and (max-width:749px){.tp-how__h3{font-size:26px;letter-spacing:-.6px}.tp-how__text p{font-size:17px}}.tp-how__media{grid-area:media;align-self:center;position:relative;overflow:hidden;border-radius:var(--tp-r, 20px);aspect-ratio:4 / 3;background:var(--tp-hair)}.tp-how__media img,.tp-how__media video{display:block;width:100%;height:100%;object-fit:cover;background:var(--tp-hair)}.tp-how__note{display:flex;gap:8px;align-items:flex-start;margin:0;max-width:420px;font-size:13px;line-height:1.45;color:var(--tp-muted)}.tp-how__note svg{flex:0 0 auto;width:15px;height:15px;margin-top:2px;color:var(--tp-cta)}.tp-how--night .tp-how__note{color:var(--tp-on-dark)}.tp-how__hud{--track: rgba(0, 0, 0, .1);--mut: var(--tp-muted);--grad: linear-gradient(90deg, #ffc400, #ff8a00 55%, #ff4d00);--glow: rgba(255, 130, 0, .45);position:absolute;left:16px;right:16px;bottom:16px;padding:11px 14px 10px;border-radius:16px;color:var(--tp-ink);background:linear-gradient(90deg,#ffffffc7,#ffffff9e 30% 70%,#ffffffc7);-webkit-backdrop-filter:blur(9px) saturate(200%);backdrop-filter:blur(9px) saturate(200%);border:1px solid rgba(0,0,0,.1);box-shadow:inset 0 1px #ffffffa6,0 26px 60px -26px #00000073}.tp-how__hud--cta{--grad: linear-gradient(90deg, #ffb347, var(--tp-cta-2) 50%, var(--tp-cta));--glow: rgb(var(--tp-cta-rgb) / .4)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.tp-how__hud{background:#fffffff0}}.tp-how__hud-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:2px}.tp-how__hud-label{font-size:10.5px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--mut)}.tp-how__hud-row{margin-top:4px}.tp-how__hud-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:2px}.tp-how__hud-name{font-size:10.5px;font-weight:500;letter-spacing:.9px;text-transform:uppercase;color:var(--mut)}.tp-how__hud-val{font-size:13.5px;font-weight:500;letter-spacing:-.2px;font-variant-numeric:tabular-nums;line-height:1;color:var(--tp-ink)}.tp-how__hud-val small{font-size:11px;color:var(--mut);margin-left:1px}.tp-how__hud--cta .tp-how__hud-val small{margin-left:4px}.tp-how__track{position:relative;height:5px;border-radius:999px;background:var(--track, rgba(0, 0, 0, .1));overflow:hidden}.tp-how__track--steps{background:linear-gradient(90deg,var(--track) 0 calc(33.33% - 2px),transparent 0 calc(33.33% + 2px),var(--track) 0 calc(66.66% - 2px),transparent 0 calc(66.66% + 2px),var(--track) 0)}.tp-how__fill{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:999px;background:var(--grad, linear-gradient(90deg, #ffc400, #ff8a00 55%, #ff4d00)) 0 0 / var(--full, 100%) 100% no-repeat;box-shadow:0 0 14px var(--glow, rgba(255, 130, 0, .45));transform-origin:left center}.tp-how__track--steps .tp-how__fill{-webkit-mask:linear-gradient(90deg,#000 0 calc(33.33% - 2px),transparent 0 calc(33.33% + 2px),#000 0 calc(66.66% - 2px),transparent 0 calc(66.66% + 2px),#000 0);mask:linear-gradient(90deg,#000 0 calc(33.33% - 2px),transparent 0 calc(33.33% + 2px),#000 0 calc(66.66% - 2px),transparent 0 calc(66.66% + 2px),#000 0)}.tp-how__fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.6) 50%,transparent 100%);transform:translate(-120%);animation:tpHowShine 7s ease-in-out 2.4s infinite}.tp-how__axis{position:relative;display:flex;justify-content:space-between;margin-top:4px;font-size:10px;color:var(--mut);font-variant-numeric:tabular-nums}.tp-how__axis span{position:relative;width:0;display:flex;justify-content:center}.tp-how__axis span:first-child{justify-content:flex-start}.tp-how__axis span:last-child{justify-content:flex-end}.tp-how__marks{position:relative;height:14px;margin:2px 0 4px;font-size:10.5px;color:var(--mut);letter-spacing:.3px}.tp-how__marks span{position:absolute;top:0;left:var(--x, 0%);white-space:nowrap;transform:translate(-50%)}.tp-how__marks span.is-first{transform:none}.tp-how__marks span:last-child{transform:translate(-100%)}.tp-how__hud--one{display:none}@media(max-width:749px){.tp-how__hud{left:10px;right:10px;bottom:10px;padding:8px 11px;border-radius:14px}.tp-how__marks{height:12px;margin:1px 0 3px;font-size:10px}.tp-how__hud--tiers{display:none}.tp-how__hud--one{display:block}}.tp-how--js .tp-how__hud .tp-how__fill{transform:scaleX(0)}.tp-how--js .tp-how__hud.is-in .tp-how__fill{animation:tpHowLoad 1.15s cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * .16s) forwards}.tp-how--js .tp-how__hud .tp-how__hud-val{opacity:0;transform:translateY(4px)}.tp-how--js .tp-how__hud.is-in .tp-how__hud-val{animation:tpHowVal .5s cubic-bezier(.22,1,.36,1) calc(.6s + var(--i, 0) * .16s) forwards}.tp-how__uses{width:100%;max-width:480px}.tp-how__uses-label{margin:0 0 12px;font-size:13px;line-height:1.2;letter-spacing:1px;text-transform:uppercase;color:var(--tp-muted)}.tp-how__uses-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}.tp-how__use{flex:1 1 82px;max-width:112px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 12px;border-radius:16px;background:var(--tp-card)}.tp-how--paper .tp-how__use{background:var(--tp-bg)}.tp-how__use-ic{width:30px;height:30px;color:var(--tp-cta);display:block}.tp-how__use-ic svg{width:100%;height:100%;display:block;overflow:visible}.tp-how__use-ic .ln{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.tp-how__use-ic .fl{fill:currentColor}.tp-how__use-ic .body,.tp-how__use-ic .mark,.tp-how__use-ic .dot{transform-origin:50% 50%}.tp-how__use-t{font-size:13px;font-weight:500;letter-spacing:-.1px;color:var(--tp-ink);text-align:center;line-height:1.2}.tp-how__uses-note{margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--tp-muted);max-width:480px}.tp-how--js .tp-how__uses.is-in .body{stroke-dasharray:var(--len, 80);stroke-dashoffset:var(--len, 80);animation:tpHowDraw .9s cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * .12s) forwards}.tp-how--js .tp-how__uses.is-in .mark{stroke-dasharray:var(--len, 20);stroke-dashoffset:var(--len, 20);animation:tpHowDraw .5s cubic-bezier(.22,1,.36,1) calc(.5s + var(--i, 0) * .12s) forwards}.tp-how--js .tp-how__uses.is-in .dot{transform:scale(0);animation:tpHowPop .4s cubic-bezier(.34,1.56,.64,1) calc(.9s + var(--i, 0) * .12s) forwards,tpHowBlink 6s ease-in-out 5s infinite}.tp-how__uses.is-in .tp-how__use--0 .tp-how__use-ic{animation:tpHowBreathe 6s ease-in-out 2s infinite}.tp-how__uses.is-in .tp-how__use--2 .tp-how__use-ic{animation:tpHowStep 6s ease-in-out 3s infinite}@media(max-width:749px){.tp-how__uses{max-width:none}.tp-how__uses-list{gap:8px}.tp-how__use{padding:12px 6px 10px;border-radius:14px}.tp-how__use-ic{width:26px;height:26px}.tp-how__use-t{font-size:12px}}.tp-how__dial{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:64px;padding:32px;border-radius:var(--tp-r, 20px);background:var(--tp-card);color:var(--tp-ink)}.tp-how--paper .tp-how__dial{background:var(--tp-bg)}@media screen and (min-width:992px){.tp-how__dial{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;padding:48px}}@media screen and (max-width:749px){.tp-how__dial{margin-top:48px;padding:24px 20px}}.tp-how__dial-pick{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.tp-how__h3--dial{font-size:32px;letter-spacing:-.6px}@media screen and (max-width:749px){.tp-how__h3--dial{font-size:24px;letter-spacing:-.4px}}.tp-how__levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%;margin-top:8px}.tp-how__level{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:64px;padding:10px 4px;border:1px solid var(--tp-hair);border-radius:14px;background:transparent;color:var(--tp-ink);font:inherit;cursor:pointer;transition:background-color var(--tp-dur) var(--tp-ease),border-color var(--tp-dur) var(--tp-ease),color var(--tp-dur) var(--tp-ease)}.tp-how__level b{font-size:18px;font-weight:500;letter-spacing:-.3px}.tp-how__level small{font-size:11px;line-height:1.2;color:var(--tp-muted);text-align:center}.tp-how__level:hover{border-color:var(--tp-cta)}.tp-how__level[aria-pressed=true]{background:var(--tp-cta);border-color:var(--tp-cta);color:#fff}.tp-how__level[aria-pressed=true] small{color:#ffffffd9}.tp-how__level:focus-visible{outline:2px solid var(--tp-cta);outline-offset:3px}.tp-how__track--dial{width:100%;height:6px;--track: rgba(0, 0, 0, .08)}.tp-how__track--dial .tp-how__fill{transition:width .6s var(--tp-ease)}.tp-how__dial-panel{display:flex;flex-direction:column;justify-content:center;gap:12px}.tp-how__dial-panel>div{display:flex;flex-direction:column;gap:8px}.tp-how__dial-big{margin:0;font-size:var(--tp-fs-stat, 64px);font-weight:500;line-height:1;letter-spacing:-2px;color:var(--tp-cta)}.tp-how__dial-big span{font-size:.5em;margin-left:2px}.tp-how__dial-title{margin:0;font-size:var(--tp-fs-h4, 24px);font-weight:500;line-height:1.3;letter-spacing:-.4px}.tp-how__dial-text{margin:0;font-size:16px;line-height:1.55;color:var(--tp-muted)}@media screen and (max-width:749px){.tp-how__levels{gap:6px}.tp-how__level{min-height:56px}.tp-how__level b{font-size:15px}.tp-how__level small{font-size:10px}.tp-how__dial-big{font-size:48px}}@media(prefers-reduced-motion:no-preference){.tp-how--js [data-tp-how-in]{opacity:.01;transform:translateY(2rem)}.tp-how--js [data-tp-how-in].is-in{opacity:1;transform:none;transition:opacity var(--tp-dur-long, .6s) var(--tp-ease-out-slow, cubic-bezier(0, 0, .3, 1)),transform var(--tp-dur-long, .6s) var(--tp-ease-out-slow, cubic-bezier(0, 0, .3, 1))}}@keyframes tpHowLoad{0%{transform:scaleX(0)}to{transform:none}}@keyframes tpHowVal{to{opacity:1;transform:none}}@keyframes tpHowShine{0%{transform:translate(-120%)}18%,to{transform:translate(120%)}}@keyframes tpHowDraw{to{stroke-dashoffset:0}}@keyframes tpHowPop{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes tpHowStep{0%,80%,to{transform:none}86%{transform:translateY(-2px)}93%{transform:translate(1px)}}@keyframes tpHowBreathe{0%,to{transform:none}50%{transform:translateY(-1.5px)}}@keyframes tpHowBlink{0%,88%,to{opacity:1}92%{opacity:.2}96%{opacity:1}}@media(prefers-reduced-motion:reduce){.tp-how .tp-how__fill,.tp-how .tp-how__hud-val{animation:none!important;transform:none!important;opacity:1!important}.tp-how .tp-how__fill:after{animation:none}.tp-how .tp-how__use-ic,.tp-how .tp-how__use-ic *{animation:none!important;transform:none!important;opacity:1!important;stroke-dashoffset:0!important}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/tp-how.css.map */