@font-face {
     font-family: FigtreeVF;
     src: url(../fonts/FigtreeVF.woff2) format("woff2 supports variations"), 
     url(../fonts/FigtreeVF.woff2) format("woff2-variations");
     font-weight: 100 1000;
     font-display: swap
 }

 body {
     transition: opacity ease-in 0.2s;
 }

 body[unresolved] {
     opacity: 0;
     display: block;
     overflow: hidden;
     position: relative;
 }



 html {
     box-sizing: border-box;
     text-size-adjust: 100%;
     word-break: normal;
     tab-size: 4
 }

 *,
 :before,
 :after {
     background-repeat: no-repeat;
     box-sizing: border-box
 }

 :before,
 :after {
     text-decoration: inherit;
     vertical-align: inherit
 }

 * {
     padding: 0;
     margin: 0
 }

 hr {
     overflow: visible;
     height: 0;
     color: inherit;
     border: 0;
     border-top: 1px solid
 }

 details,
 main {
     display: block
 }

 summary {
     display: list-item
 }

 small {
     font-size: 80%
 }

 [hidden] {
     display: none !important
 }

 abbr[title] {
     border-bottom: none;
     text-decoration: underline;
     text-decoration: underline dotted
 }

 a {
     background-color: transparent
 }

 a:active,
 a:hover {
     outline-width: 0
 }

 code,
 kbd,
 pre,
 samp {
     font-family: monospace
 }

 pre {
     font-size: 1em
 }

 b,
 strong {
     font-weight: bolder
 }

 sub,
 sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline
 }

 sub {
     bottom: -.25em
 }

 sup {
     top: -.5em
 }

 table {
     border-color: inherit;
     text-indent: 0
 }

 iframe {
     border-style: none
 }

 input {
     border-radius: 0
 }

 [type=number]::-webkit-inner-spin-button,
 [type=number]::-webkit-outer-spin-button {
     height: auto
 }

 [type=search] {
     appearance: textfield;
     outline-offset: -2px
 }

 [type=search]::-webkit-search-decoration {
     appearance: none
 }

 textarea {
     overflow: auto;
     resize: vertical
 }

 button,
 input,
 optgroup,
 select,
 textarea {
     font: inherit;
     color: inherit
 }

 optgroup {
     font-weight: 700
 }

 button {
     overflow: visible
 }

 button,
 select {
     text-transform: none
 }

 button,
 [type=button],
 [type=reset],
 [type=submit],
 [role=button] {
     cursor: pointer
 }

 button::-moz-focus-inner,
 [type=button]::-moz-focus-inner,
 [type=reset]::-moz-focus-inner,
 [type=submit]::-moz-focus-inner {
     border-style: none;
     padding: 0
 }

 button,
 html [type=button],
 [type=reset],
 [type=submit] {
     appearance: auto
 }

 button,
 input,
 select,
 textarea {
     background-color: transparent;
     border-style: none
 }

 button:-moz-focusring,
 [type=button]::-moz-focus-inner,
 [type=reset]::-moz-focus-inner,
 [type=submit]::-moz-focus-inner {
     outline: 1px dotted ButtonText
 }

 select {
     appearance: none
 }

 a:focus,
 button:focus,
 input:focus,
 select:focus,
 textarea:focus {
     outline-width: 0
 }

 select::-ms-expand {
     display: none
 }

 select::-ms-value {
     color: currentcolor
 }

 legend {
     border: 0;
     color: inherit;
     display: table;
     white-space: normal;
     max-width: 100%
 }

 ::-webkit-file-upload-button {
     appearance: auto;
     color: inherit;
     font: inherit
 }

 [disabled] {
     cursor: default
 }

 img {
     border-style: none
 }

 progress {
     vertical-align: baseline
 }

 [aria-busy=true] {
     cursor: progress
 }

 [aria-controls] {
     cursor: pointer
 }

 [aria-disabled=true] {
     cursor: default
 }

 ul,
 ol {
     list-style-type: none
 }

 figure {
     margin: 0
 }

 @keyframes slide-in {
     0% {
         opacity: 0;
         transform: translateY(16px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 .gradient-blue {
     background: radial-gradient(106.41% 128.47% at 50.15% 128.47%, #23abff, #3066ff)
 }

 .gradient-green {
     background: radial-gradient(92.26% 118.88% at 50.15% .13%, #00c3c3, #00aab3)
 }

 .gradient-purple {
     background: radial-gradient(165.12% 115.56% at 50.15% .13%, #a15aff, #00a0eb)
 }

 .bg-blue {
     background-color: #f2f5ff
 }

 .bg-purple {
     background-color: #f7f0ff
 }

 .bg-green {
     background-color: #ebffed
 }

 .lock-screen {
     font-family: FigtreeVF, sans-serif;
     letter-spacing: normal;
     position: fixed;
     z-index: 2147483638;
     right: 24px;
     bottom: 24px;
     width: 327px;
     border-radius: 24px;
     overflow: hidden;
     box-shadow: 0 24px 32px #00000014;
     animation: slide-in .3s ease-in-out forwards
 }

 .lock-screen__content {
     position: relative;
     padding: 24px 24px 64px
 }

 .lock-screen__close {
     position: absolute;
     top: 16px;
     right: 16px;
     width: 24px;
     height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: .5
 }

 .lock-screen__label {
     height: 26px;
     width: fit-content;
     border-radius: 50px;
     background-color: #fff3;
     padding-inline: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     color: #fff;
     font-size: 12px;
     line-height: 18px;
     margin: -8px auto 16px
 }

 .lock-screen__title {
     color: #fff;
     text-align: center;
     font-size: 20px;
     line-height: 28px;
     font-weight: 600;
     margin-bottom: 8px
 }

 .lock-screen__description {
     color: #f5f6f7;
     text-align: center;
     font-size: 14px;
     line-height: 20px
 }

 .lock-screen__description b {
     font-weight: 600
 }

 .lock-screen__card {
     position: relative;
     z-index: 1;
     margin-top: -44px;
     background-color: #fff;
     border-radius: 24px;
     padding: 32px 20px 20px
 }

 .lock-screen__inner {
     margin-bottom: 24px
 }

 .lock-screen__submit {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     font-weight: 700;
     font-size: 16px;
     height: 40px;
     width: 100%;
     border-radius: 12px;
     padding-inline: 16px;
     background-color: #f70;
     color: #fff;
     margin-bottom: 16px
 }

 .lock-screen__skip {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     line-height: 20px;
     color: #82829c;
     margin-inline: auto
 }

 .price-card {
     border: 1px solid #f2f2fc;
     background: linear-gradient(254.14deg, #fafbff .04%, #f5f8ff 100.04%);
     border-radius: 24px;
     padding: 24px 28px
 }

 .price-card__label {
     color: #4a5764;
     text-align: center;
     font-size: 14px;
     line-height: 20px;
     text-transform: uppercase;
     margin-bottom: 16px
 }

 .price-card__price {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     column-gap: 2px;
     margin-bottom: 12px
 }

 .price-card__currency {
     color: #515478;
     font-size: 18px;
     line-height: 28px
 }

 .price-card__number {
     color: #14142a;
     text-align: center;
     font-size: 64px;
     line-height: 54px
 }

 .price-card__wrap {
     display: flex;
     flex-direction: column
 }

 .price-card__decimal {
     color: #515478;
     font-size: 18px;
     line-height: 28px;
     font-weight: 600
 }

 .price-card__period {
     color: #515478;
     font-size: 14px;
     line-height: 20px;
     margin-top: -6px
 }

 .price-card__discount {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 12px
 }

 .price-card__discount-divider {
     position: absolute;
     z-index: 0;
     top: 50%;
     left: 0;
     width: 100%;
     height: 1px;
     background-color: #dbe2f9;
     transform: translateY(-50%)
 }

 .price-card__discount-icon {
     position: absolute;
     z-index: 1;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%)
 }

 .price-card__discount-text {
     position: relative;
     z-index: 2;
     color: #fff;
     font-size: 12px;
     font-weight: 600;
     line-height: 18px
 }

 .price-card__features {
     display: flex;
     align-items: center;
     justify-content: center;
     column-gap: 16px
 }

 .price-card__feature {
     color: #222e3a;
     font-size: 14px;
     line-height: 20px;
     display: flex;
     align-items: center;
     gap: 6px
 }

 .price-card__feature:before {
     content: "";
     display: block;
     width: 4px;
     height: 4px;
     background-color: #20df9e;
     border-radius: 50%;
     flex-shrink: 0
 }

 .features-list {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px
 }

 .features-list__item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px
 }

 .features-list__icon {
     width: 52px;
     height: 52px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .features-list__text {
     color: #293a53;
     text-align: center;
     font-size: 16px;
     line-height: 24px;
     letter-spacing: -.1px
 }