.fr-how{--ico: 64px;--gap: 18px;overflow:hidden;overflow:clip;background:#fff}.fr-how>.fr-container{position:relative}.fr-how__bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.fr-how__glow{position:absolute;border-radius:50%}.fr-how__glow--1{width:720px;height:720px;left:-260px;top:34%;background:radial-gradient(closest-side,#3cc7b429,#3cc7b400)}.fr-how__glow--2{width:560px;height:560px;right:-220px;top:-140px;background:radial-gradient(closest-side,#c9a24a12,#c9a24a00)}.fr-how__head .fr-title{text-wrap:balance}.fr-how__head .fr-lead{max-width:520px;text-wrap:balance}.fr-how .fr-tabs__list{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,560px);margin:0 auto clamp(36px,5vw,64px);padding:5px;border-radius:999px;background:linear-gradient(180deg,#fff,var(--aqua));box-shadow:inset 0 0 0 1px #0f6b6b24,0 18px 40px -26px #0f6b6b8c}.fr-how .fr-tabs__list button{position:relative;z-index:1;min-width:0;min-height:50px;padding:0 14px;border-radius:999px;font-size:14.5px;font-weight:600;letter-spacing:.01em;color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s var(--ease);-webkit-tap-highlight-color:transparent}.fr-how .fr-tabs__list button[aria-selected=true]{color:#fff}.fr-how .fr-tabs__list button:focus-visible{outline-offset:-3px;border-radius:999px}.fr-how__ts{display:none}.fr-how .fr-tabs__ink{position:absolute;top:5px;bottom:5px;left:0;width:calc((100% - 10px) / 3);transform:translate(5px);border-radius:999px;overflow:hidden;background:linear-gradient(135deg,var(--teal-deep),var(--teal) 55%,#168a84);box-shadow:0 10px 22px -10px #0f6b6bbf,inset 0 1px #ffffff38;transition:transform .6s var(--ease),width .6s var(--ease)}.fr-how .fr-tabs__ink:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translate(-120%);animation:fr-how-sheen 5s var(--ease) 1.5s infinite}@supports selector(:has(*)){.fr-how .fr-tabs__ink{width:calc((100% - 10px) / 3)!important;transform:translate(calc(5px + var(--i, 0) * 100%))!important}.fr-how .fr-tabs__list:has(button:nth-of-type(2)[aria-selected=true]){--i: 1}.fr-how .fr-tabs__list:has(button:nth-of-type(3)[aria-selected=true]){--i: 2}}@keyframes fr-how-sheen{0%,60%{transform:translate(-120%)}85%,to{transform:translate(120%)}}@media(hover:hover){.fr-how .fr-tabs__list button[aria-selected=false]:hover{color:var(--navy)}}.fr-how .fr-tabs__panels{display:grid}.fr-how .fr-tabs__panel{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center}.fr-how .fr-tabs__panel[hidden]{display:none}.fr-how .fr-tabs__panel:focus-visible{outline-offset:8px;border-radius:24px}.js .fr-how .fr-tabs__panel[hidden]{display:grid;visibility:hidden;pointer-events:none}.js .fr-how .fr-tabs__panel[hidden] *{animation-play-state:paused}.no-js .fr-how .fr-tabs__list{display:none}.no-js .fr-how .fr-tabs__panel{grid-area:auto}.no-js .fr-how .fr-tabs__panel[hidden]{display:grid}.no-js .fr-how .fr-tabs__panel+.fr-tabs__panel{margin-top:clamp(56px,8vw,96px)}.fr-how .fr-tabs__panel.is-entering .fr-how__visual{animation:fr-how-pop .8s var(--ease) backwards}.fr-how .fr-tabs__panel.is-entering .fr-how__art{animation:fr-how-art 1s var(--ease) backwards}.fr-how .fr-tabs__panel.is-entering .fr-how__badge{animation:fr-how-badge .8s var(--ease-back) .25s backwards}.fr-how .fr-tabs__panel.is-entering .fr-step{animation:fr-how-up .7s var(--ease) backwards}.fr-how .fr-tabs__panel.is-entering .fr-step:nth-child(2){animation-delay:.08s}.fr-how .fr-tabs__panel.is-entering .fr-step:nth-child(3){animation-delay:.16s}@keyframes fr-how-pop{0%{opacity:0;transform:scale(.94)}}@keyframes fr-how-art{0%{opacity:0;transform:translateY(30px) rotate(-8deg) scale(.9)}}@keyframes fr-how-badge{0%{opacity:0;transform:scale(.5)}}@keyframes fr-how-up{0%{opacity:0;transform:translateY(22px)}}.fr-how__visual{position:relative;width:100%;max-width:500px;margin-inline:auto;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;isolation:isolate;background:radial-gradient(circle at 50% 36%,#fff 0 16%,#fff0 46%),radial-gradient(circle,var(--aqua) 0 52%,#cfeee9 78%,#b8e6de 100%);box-shadow:inset 0 -40px 80px -40px #0f6b6b59,0 50px 90px -50px #0f6b6b8c}.fr-how__art{position:relative;z-index:1;width:60%}.fr-how__art svg,.fr-how__art img{position:relative;width:100%;height:auto;filter:drop-shadow(0 30px 26px rgba(11,45,77,.24))}.fr-how__ring{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;border-radius:50%;border:1.5px dashed rgba(15,107,107,.26);animation:fr-spin 40s linear infinite}.fr-how__ring:after{content:"";position:absolute;top:50%;left:-6px;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-hi));box-shadow:0 0 0 4px #c9a24a2e,0 0 16px #c9a24aa6}.fr-how__leaf{position:absolute;z-index:2;width:15%;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(23,105,58,.28));animation:fr-how-bob 6s ease-in-out infinite}.fr-how__leaf--1{top:7%;left:5%;rotate:-35deg}.fr-how__leaf--2{bottom:9%;right:7%;width:11%;rotate:135deg;animation-delay:-3s}@keyframes fr-how-bob{50%{translate:0 -10px}}.fr-how__badge{position:absolute;z-index:3;top:9%;right:0;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:999px;background:linear-gradient(135deg,#b88d34,var(--gold) 40%,var(--gold-hi));color:var(--navy);font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 14px 30px -12px #c9a24ad9,inset 0 1px #ffffff73}.fr-how__badge .fr-icon{width:17px;height:17px}.fr-how__meta{position:absolute;z-index:3;left:50%;bottom:-3%;translate:-50% 0;white-space:nowrap;text-align:center;display:grid;gap:2px;padding:12px 18px 12px 16px;border-radius:18px;background:#fffc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px #0f6b6b1f,0 18px 36px -20px #0b2d4d73}.fr-how__meta strong{font-size:16px;font-weight:700;line-height:1.2;color:var(--navy)}.fr-how__meta span{font-size:13px;font-weight:500;color:var(--teal)}.fr-how .fr-steps{position:relative;display:grid;grid-auto-rows:1fr;gap:var(--gap)}.fr-how .fr-steps:before,.fr-how .fr-steps:after{content:"";position:absolute;left:calc(var(--ico) / 2 - 1px);top:calc((100% - 2 * var(--gap)) / 6);bottom:calc((100% - 2 * var(--gap)) / 6);width:2px;border-radius:2px}.fr-how .fr-steps:before{background:repeating-linear-gradient(180deg,rgba(15,107,107,.24) 0 6px,transparent 6px 12px)}.fr-how .fr-steps:after{background:linear-gradient(var(--mint),var(--teal) 55%,var(--gold));box-shadow:0 0 10px #3cc7b473;transform-origin:top;transform:scaleY(var(--line-p, 0));transition:transform .25s linear}.no-js .fr-how .fr-steps:after{transform:none}.fr-step{position:relative;z-index:1;display:grid;grid-template-columns:var(--ico) minmax(0,1fr);gap:clamp(14px,2vw,22px)}.fr-step__icon{position:relative;align-self:center;width:var(--ico);height:var(--ico);border-radius:50%;display:grid;place-items:center;color:var(--teal);background:radial-gradient(circle at 30% 25%,#fff,#effaf8 70%);box-shadow:inset 0 0 0 1.5px var(--teal),0 0 0 6px #ffffffeb,0 14px 28px -12px #0f6b6b8c;transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease),transform .6s var(--ease-back)}.fr-step__icon .fr-icon{width:44%;height:44%}.fr-step__icon i{position:absolute;top:-4px;right:-4px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;line-height:1;color:var(--navy);background:linear-gradient(135deg,var(--gold),var(--gold-hi));box-shadow:0 0 0 2px #fff,0 6px 12px -4px #c9a24acc}.fr-step.is-lit .fr-step__icon{color:#fff;background:radial-gradient(circle at 30% 25%,#1c938c,var(--teal) 60%,var(--teal-deep));box-shadow:inset 0 0 0 1.5px var(--teal),0 0 0 5px #fffffff2,0 0 0 6.5px #3cc7b473,0 16px 30px -10px #0f6b6bbf;transform:scale(1.05)}.fr-step__body{position:relative;display:flex;flex-direction:column;justify-content:center;padding:24px 28px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--line),0 20px 40px -30px #0b2d4d73;transition:translate .5s var(--ease),box-shadow .5s var(--ease)}.fr-step__body:before{content:"";position:absolute;left:-6px;top:50%;width:12px;height:12px;margin-top:-6px;background:#fff;transform:rotate(45deg);box-shadow:-1px 1px #0b2d4d1a}.fr-step__body small{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}.fr-step__body small:before{content:"";width:16px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--mint),var(--gold))}.fr-step__body h3{margin:6px 0 4px;font-size:clamp(17px,1.6vw,20px);color:var(--navy)}.fr-step__body p{font-size:15px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}.fr-how__nobr{white-space:nowrap}@media(hover:hover){.fr-step:hover .fr-step__body{translate:6px 0;box-shadow:0 0 0 1px #3cc7b480,0 26px 50px -30px #0f6b6b99}}@media(max-width:989px){.fr-how{--ico: 56px}.fr-how__badge{padding:8px 13px 8px 10px;font-size:13px}.fr-how__meta{bottom:-8%;padding:10px 14px}.fr-how__meta strong{font-size:14.5px}.fr-how__meta span{font-size:12px}.fr-step__body{padding:16px 18px}}@media(max-width:680px){.fr-how{--ico: 52px;--gap: 12px}.fr-how .fr-tabs__list{width:100%;margin-bottom:28px}.fr-how .fr-tabs__list button{min-height:48px;padding:0 8px;font-size:14px}.fr-how__tl{display:none}.fr-how__ts{display:inline}.fr-how .fr-tabs__panel{grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}.fr-how__visual{max-width:none;aspect-ratio:auto;min-height:196px;border-radius:26px;overflow:hidden;grid-template-columns:minmax(0,44%) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;place-items:center start;column-gap:12px;padding:16px 16px 16px 14px;background:radial-gradient(circle at 25% 52%,#fff 0,#fff0 34%),linear-gradient(135deg,var(--aqua),#d2f0eb);box-shadow:inset 0 0 0 1px #0f6b6b1a,0 24px 44px -30px #0f6b6b99}.fr-how__art{grid-column:1;grid-row:1 / -1;justify-self:center;width:min(90%,132px)}.fr-how__ring{top:-6%;right:-6%;bottom:-6%;left:-6%}.fr-how__meta{position:static;translate:none;white-space:normal;text-align:left;grid-column:2;grid-row:2;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fr-how__meta strong{font-size:18px}.fr-how__meta span{font-size:13px;text-wrap:balance}.fr-how__badge{position:static;grid-column:2;grid-row:3;margin-top:12px}.fr-how__leaf--1{width:52px;top:-12px;left:-10px}.fr-how__leaf--2{width:40px;bottom:-8px;right:14px}.fr-step__body{padding:15px 16px;border-radius:18px}.fr-step__body h3{font-size:17px}.fr-step__icon i{width:20px;height:20px;font-size:10.5px}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/section-how-to.css.map */