@tetjana/flowmakers-ds 0.1.9 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- :root{--bw-fill-white: #ffffff;--bw-fill-black: #121212;--bw-fill-50: #f7f7f8;--bw-fill-100: #eeeef0;--bw-fill-200: #dcdcdc;--bw-fill-300: #b8b9c1;--bw-fill-400: #989898;--bw-fill-500: #7c7c7c;--bw-fill-600: #656565;--bw-fill-700: #525252;--bw-fill-800: #464646;--bw-fill-900: #3d3d3d;--bw-fill-950: #18181b;--bw-transparent-white-5: rgba(255,255,255,.05);--bw-transparent-white-75: rgba(255,255,255,.75);--primary-fill-50: #f6f5fd;--primary-fill-100: #eeecfb;--primary-fill-200: #e0ddf7;--primary-fill-300: #c9c1f1;--primary-fill-400: #ac9de8;--primary-fill-500: #9076dc;--primary-fill-600: #754ccc;--primary-fill-700: #6d45bc;--primary-fill-800: #5b3a9d;--primary-fill-900: #4c3181;--primary-fill-950: #2f1e57;--pink-fill-50: #fff4fe;--pink-fill-100: #ffe7fc;--pink-fill-200: #ffcef9;--pink-fill-300: #ffa8f1;--pink-fill-400: #fe66e3;--pink-fill-500: #f63fd5;--pink-fill-600: #da1fb5;--pink-fill-700: #b51692;--green-fill-50: #effaf6;--green-fill-100: #d9f2e7;--green-fill-200: #b6e4d3;--green-fill-300: #91d4bf;--green-fill-400: #53b499;--green-fill-500: #31987f;--green-fill-600: #217a65;--green-fill-700: #1b6153;--yellow-fill-50: #fff8ed;--yellow-fill-100: #fff0d4;--yellow-fill-200: #ffdda9;--yellow-fill-300: #ffbe62;--yellow-fill-400: #fea139;--yellow-fill-500: #fc8313;--yellow-fill-600: #ed6809;--yellow-fill-700: #c54e09;--nature-fill-50: #f7f7f8;--nature-fill-100: #eeeef0;--nature-fill-200: #d9d9de;--nature-fill-300: #b8b9c1;--nature-fill-400: #91939f;--nature-fill-500: #737584;--nature-fill-600: #5d5e6c;--nature-fill-700: #4c4d58;--nature-fill-800: #41414b;--nature-fill-900: #1e1f28;--nature-fill-950: #18181b;--functional-success-500: #34c759;--functional-error-500: #ff383c}:root{--font-family-headings: "Manrope", sans-serif;--font-family-body: "Nunito Sans", sans-serif;--font-size-10: 10px;--font-size-12: 12px;--font-size-14: 14px;--font-size-16: 16px;--font-size-18: 18px;--font-size-20: 20px;--font-size-24: 24px;--font-size-30: 30px;--font-size-36: 36px;--font-size-48: 48px;--weight-light: 300;--weight-regular: 400;--weight-medium: 400;--weight-semibold: 600;--weight-bold: 700;--line-height-tight: .9;--line-height-snug: 1;--line-height-normal: 1.2;--line-height-relaxed:1.4}.text-display{font-family:var(--font-family-headings);font-size:var(--font-size-48);font-weight:var(--weight-bold);line-height:var(--line-height-tight)}.text-h1{font-family:var(--font-family-headings);font-size:var(--font-size-36);font-weight:var(--weight-bold);line-height:var(--line-height-tight)}.text-h2{font-family:var(--font-family-headings);font-size:var(--font-size-30);font-weight:var(--weight-bold);line-height:.94}.text-h3{font-family:var(--font-family-headings);font-size:var(--font-size-24);font-weight:var(--weight-bold);line-height:var(--line-height-normal)}.text-h4{font-family:var(--font-family-headings);font-size:var(--font-size-18);font-weight:var(--weight-bold);line-height:var(--line-height-tight)}.text-body-lg{font-family:var(--font-family-body);font-size:var(--font-size-16);font-weight:var(--weight-medium);line-height:var(--line-height-relaxed)}.text-body-md{font-family:var(--font-family-body);font-size:var(--font-size-14);font-weight:var(--weight-medium);line-height:var(--line-height-relaxed)}.text-body-sm{font-family:var(--font-family-body);font-size:var(--font-size-12);font-weight:var(--weight-medium);line-height:var(--line-height-normal)}.text-subtitle{font-family:var(--font-family-body);font-size:var(--font-size-16);font-weight:var(--weight-semibold);line-height:1}.text-button{font-family:var(--font-family-body);font-size:var(--font-size-14);font-weight:var(--weight-bold);line-height:1}.text-tiny{font-family:var(--font-family-body);font-size:var(--font-size-12);font-weight:var(--weight-bold);line-height:var(--line-height-normal)}:root{--space-xxs: 4px;--space-xs: 8px;--space-s: 10px;--space-sm: 12px;--space-m: 16px;--space-l: 20px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--radius-xs: 8px;--radius-s: 10px;--radius-m: 12px;--radius-l: 16px;--radius-xl: 20px;--radius-full: 9999px}.fm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1;white-space:nowrap;transition:background .15s,border-color .15s,border-width .15s,opacity .15s,box-shadow .15s;text-decoration:none;box-sizing:border-box;position:relative}.fm-btn--sm{height:31.5px;padding:0 11.5px;border-radius:10px;font-size:11.5px}.fm-btn--md{height:41.5px;padding:10px 16px;border-radius:11.5px}.fm-btn--lg{height:51.5px;padding:11.5px 24px;border-radius:11.5px;font-size:16px}.fm-btn--full{width:100%}.fm-btn--primary{background:#121212;color:#fff;border:none}.fm-btn--primary:hover:not(:disabled){background:#121212;box-shadow:inset 0 0 0 100px #ffffff0d}.fm-btn--primary:active:not(:disabled){background:#2a2a2a}.fm-btn--primary:focus-visible{outline:1.5px solid #ffa8f1;outline-offset:1.5px}.fm-btn--hero{background:#121212;color:#fff;border:1.5px solid transparent;padding:10px 16px;border-radius:11.5px;height:41.5px}.fm-btn--hero:hover:not(:disabled),.fm-btn--hero:active:not(:disabled),.fm-btn--hero:focus-visible{outline:none;border:2px solid transparent;background:linear-gradient(#121212,#121212) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-btn--hero:disabled{background:#bdbdbd;color:#91939f;border-color:transparent}.fm-btn--secondary{background:#fff;color:#18181b;border:1.5px solid #d9d9de;border-radius:11.5px;height:41.5px;padding:10px 16px}.fm-btn--secondary:hover:not(:disabled),.fm-btn--secondary:focus-visible{outline:none;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-btn--secondary:active:not(:disabled){border:2px solid transparent;background:linear-gradient(#f7f7f8,#f7f7f8) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-btn--secondary:disabled{color:#91939f;border:1.5px solid #d9d9de;background:#fff;cursor:not-allowed}.fm-btn--secondary-large{background:#fff;color:#18181b;border:1.5px solid #d9d9de;border-radius:11.5px;height:51.5px;padding:11.5px 24px;font-size:16px}.fm-btn--secondary-large:hover:not(:disabled),.fm-btn--secondary-large:focus-visible{outline:none;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-btn--secondary-large:active:not(:disabled){border:2px solid transparent;background:linear-gradient(#f7f7f8,#f7f7f8) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-btn--secondary-large:disabled{color:#91939f;border:1.5px solid #d9d9de;background:#fff;cursor:not-allowed}.fm-btn--ghost{background:transparent;color:#18181b;border:none}.fm-btn--ghost:hover:not(:disabled){background:#f7f7f8}.fm-btn--ghost:active:not(:disabled){background:#eeeef0}.fm-btn--ghost-icon{background:transparent;color:#18181b;border:none;padding:8px;border-radius:10px;height:auto}.fm-btn--ghost-icon:hover:not(:disabled){background:#f7f7f8}.fm-btn--disabled,.fm-btn:disabled{cursor:not-allowed;opacity:1}.fm-btn__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.fm-input-wrapper{display:flex;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.fm-input__label{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:400;color:#5d5e6c;line-height:1.4;white-space:nowrap}.fm-input__field{display:flex;align-items:center;gap:8px;height:42px;padding:10px 16px;border-radius:12px;border:1px solid #b8b9c1;background:#fff;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;width:100%}.fm-input__el{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-input__el::placeholder{color:#b8b9c1}.fm-input-wrapper--hover .fm-input__field{border-color:#5d5e6c;box-shadow:0 4px 5.3px #d9d9de}.fm-input-wrapper--focused .fm-input__field{border-color:#ffa8f1}.fm-input-wrapper--filled .fm-input__field{border-color:#5d5e6c}.fm-input-wrapper--error .fm-input__field{border-color:#ff383c}.fm-input-wrapper--success .fm-input__field{border-color:#34c759}.fm-input-wrapper--disabled .fm-input__field{background:#f7f7f8;cursor:not-allowed;border-color:#b8b9c1}.fm-input-wrapper--disabled .fm-input__el{cursor:not-allowed;color:#91939f}.fm-input__el:focus{outline:none}.fm-input__field:focus-within{border-color:#ffa8f1}.fm-input-wrapper--error .fm-input__field:focus-within{border-color:#ff383c}.fm-input-wrapper--success .fm-input__field:focus-within{border-color:#34c759}.fm-input__icon{display:inline-flex;align-items:center;color:#b8b9c1;flex-shrink:0}.fm-input__message{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:400;line-height:1.2;margin:0}.fm-input__message--error{color:#ff383c}.fm-input__message--success{color:#34c759}.fm-tag{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:9999px;font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;box-sizing:border-box}.fm-tag--grey{background:#eeeef0;color:#4c4d58}.fm-tag--green{background:#d9f2e7;color:#1b6153}.fm-tag--yellow{background:#fff0d4;color:#c54e09}.fm-tag--purple{background:#eeecfb;color:#6d45bc}.fm-tag--pink{background:#ffe7fc;color:#b51692}.fm-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.fm-toggle__input{position:absolute;opacity:0;width:0;height:0}.fm-toggle__track{position:relative;width:64px;height:28px;border-radius:100px;background:#d9d9de;transition:background .25s;flex-shrink:0;overflow:hidden}.fm-toggle__input:checked~.fm-toggle__track{background:linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc)}.fm-toggle__thumb{position:absolute;top:50%;transform:translateY(-50%);left:2px;width:24px;height:24px;border-radius:100px;background:#fff;transition:left .25s;box-shadow:0 1px 3px #00000026}.fm-toggle__input:checked~.fm-toggle__track .fm-toggle__thumb{left:calc(100% - 26px)}.fm-toggle--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.fm-toggle__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.fm-checkbox__input{position:absolute;opacity:0;width:0;height:0}.fm-checkbox__box{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;border:1.5px solid #b8b9c1;background:#fff;flex-shrink:0;overflow:hidden;transition:background .15s,border-color .15s;box-sizing:border-box}.fm-checkbox--large .fm-checkbox__box{width:22px;height:22px;border-radius:6px}.fm-checkbox__input:checked+.fm-checkbox__box{background:#9076dc;border-color:#9076dc}.fm-checkbox__input:indeterminate+.fm-checkbox__box{background:#9076dc;border-color:#9076dc}.fm-checkbox__minus{width:10px;height:2px;background:#fff;border-radius:1px}.fm-checkbox:not(.fm-checkbox--disabled):hover .fm-checkbox__box{border-color:#5d5e6c}.fm-checkbox--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.fm-checkbox__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-m, 16px);border-radius:var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;width:100%}.fm-header--purple{background:var(--primary-fill-100, #eeecfb)}.fm-header--grey{background:var(--nature-fill-50, #f7f7f8)}.fm-header__slot{display:flex;align-items:center}.fm-header__title-block{display:flex;flex-direction:column;gap:var(--space-xs, 8px);flex:1;padding:0 var(--space-xs, 8px)}.fm-header__title{font-family:var(--font-family-headings, "Manrope", sans-serif);font-size:var(--font-size-18, 18px);font-weight:var(--weight-bold, 700);color:var(--bw-fill-black, #121212);line-height:.9;margin:0}.fm-header__subtitle{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-medium, 400);color:var(--bw-fill-400, #989898);line-height:1.4;margin:0}.fm-footer{display:flex;flex-direction:column;width:100%}.fm-footer--light{background:var(--nature-fill-50, #f7f7f8);color:var(--bw-fill-black, #121212)}.fm-footer--dark{background:var(--nature-fill-950, #18181b);color:#ffffffbf}.fm-footer__top{display:flex;gap:var(--space-3xl, 48px);padding:var(--space-xl, 24px);align-items:flex-start}.fm-footer__cta-block{display:flex;flex-direction:column;gap:var(--space-xl, 24px);flex-shrink:0}.fm-footer__headline{font-family:var(--font-family-headings, "Manrope", sans-serif);font-size:var(--font-size-30, 30px);font-weight:var(--weight-bold, 700);line-height:.94;margin:0}.fm-footer__cta-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 var(--space-m, 16px);border-radius:var(--radius-m, 12px);font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-bold, 700);cursor:pointer;transition:background .15s}.fm-footer--light .fm-footer__cta-btn{background:var(--bw-fill-black, #121212);color:var(--bw-fill-white, #ffffff);border:none}.fm-footer--dark .fm-footer__cta-btn{background:transparent;color:#ffffffbf;border:1.5px solid var(--pink-fill-300, #ffa8f1)}.fm-footer__sections{display:flex;gap:var(--space-3xl, 48px);flex:1;justify-content:space-between;flex-wrap:wrap}.fm-footer__section{display:flex;flex-direction:column;gap:var(--space-xl, 24px)}.fm-footer__section-title{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-16, 16px);font-weight:var(--weight-semibold, 600);margin:0}.fm-footer__section-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-m, 16px)}.fm-footer__link{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-light, 300);text-decoration:none;line-height:1.4;color:inherit}.fm-footer__link:hover{text-decoration:underline}.fm-footer__bottom{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xl, 24px);border-top:1px solid rgba(255,255,255,.05)}.fm-footer__copyright{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-medium, 400);line-height:1.4;margin:0}.fm-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:80px;min-height:60px;padding:10px 12px;border-radius:12px;border:1.5px solid transparent;background:transparent;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:background .15s,border-color .15s}.fm-nav-item__icon{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#91939f}.fm-nav-item__label{font-family:Nunito Sans,sans-serif;font-weight:700;font-size:12px;line-height:1.2;color:#91939f;text-align:center;white-space:nowrap}.fm-nav-item:hover:not(.fm-nav-item--active):not(.fm-nav-item--pressed){border-color:#ffa8f1;background:transparent}.fm-nav-item:hover:not(.fm-nav-item--active):not(.fm-nav-item--pressed) .fm-nav-item__icon{color:#91939f}.fm-nav-item:hover:not(.fm-nav-item--active):not(.fm-nav-item--pressed) .fm-nav-item__label{color:#91939f}.fm-nav-item--pressed,.fm-nav-item:active:not(.fm-nav-item--active){background:#6d45bc;border-color:transparent}.fm-nav-item--pressed .fm-nav-item__icon,.fm-nav-item:active:not(.fm-nav-item--active) .fm-nav-item__icon{color:#fff}.fm-nav-item--pressed .fm-nav-item__label,.fm-nav-item:active:not(.fm-nav-item--active) .fm-nav-item__label{color:#fff}.fm-nav-item--active{background:#9076dc;border-color:transparent}.fm-nav-item--active .fm-nav-item__icon,.fm-nav-item--active .fm-nav-item__label{color:#fff}.fm-nav-bar{display:flex;flex-direction:column;gap:4px;padding:8px;background:#fff;border-right:1px solid #eeeef0}.fm-nav-bar--horizontal{flex-direction:row;border-right:none;border-bottom:1px solid #eeeef0;padding:8px 16px}.fm-card-test{display:flex;flex-direction:column;justify-content:space-between;width:420px;min-height:448px;padding:16px;background:#fff;border:1px solid #eeeef0;border-radius:20px;box-sizing:border-box;gap:12px}.fm-card-test__image{position:relative;height:160px;border-radius:12px;overflow:hidden;flex-shrink:0;display:flex;align-items:flex-start;justify-content:flex-end}.fm-card-test__image img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:12px}.fm-card-test__image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#18181b40;border-radius:12px}.fm-card-test__status-tag{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:9999px;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:12px;line-height:1.2;z-index:1}.fm-card-test__status-tag--available{background:#d9f2e7;color:#1b6153}.fm-card-test__status-tag--in-progress{background:#fff0d4;color:#c54e09}.fm-card-test__status-tag--completed{background:#eeecfb;color:#6d45bc}.fm-card-test__status-tag--unavailable{background:#eeeef0;color:#91939f}.fm-card-test__content{display:flex;flex-direction:column;gap:12px}.fm-card-test__title{font-family:Manrope,sans-serif;font-weight:700;font-size:24px;line-height:1.2;color:#18181b;margin:0}.fm-card-test__description{font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1.4;color:#91939f;margin:0}.fm-card-test__tags{display:flex;flex-wrap:wrap;gap:8px}.fm-card-test__meta{display:flex;gap:12px;align-items:center}.fm-card-test__meta-item{display:flex;gap:4px;align-items:center;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:12px;line-height:1.2;color:#91939f}.fm-card-test__meta-icon{width:20px;height:20px;flex-shrink:0}.fm-card-test--unavailable{opacity:.5}.fm-card-career{width:100%;background:#fff;border:1px solid #eeeef0;border-radius:20px;overflow:hidden;box-sizing:border-box}.fm-card-career__header{display:flex;align-items:center;gap:16px;padding:24px;cursor:pointer;-webkit-user-select:none;user-select:none}.fm-card-career__header-content{flex:1;display:flex;flex-direction:column;gap:10px}.fm-card-career__title-row{display:flex;gap:10px;align-items:center}.fm-card-career__title{font-family:Manrope,sans-serif;font-weight:700;font-size:18px;line-height:.9;color:#18181b;margin:0}.fm-card-career__subtitle{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#989898;margin:0}.fm-card-career__chevron{width:20px;height:20px;flex-shrink:0;color:#91939f;transition:transform .2s}.fm-card-career--open .fm-card-career__chevron{transform:rotate(180deg)}.fm-card-career__tasks{display:none}.fm-card-career--open .fm-card-career__tasks{display:block}.fm-card-career__task{display:flex;gap:10px;align-items:center;justify-content:center;padding:24px;border-top:1px solid #eeeef0}.fm-card-career__task-info{flex:1;display:flex;gap:16px;align-items:center}.fm-card-career__task-text{flex:1;display:flex;flex-direction:column;gap:12px}.fm-card-career__task-title{font-family:Nunito Sans,sans-serif;font-weight:600;font-size:16px;line-height:1;color:#18181b;margin:0}.fm-card-career__task-subtitle{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#989898;margin:0}.fm-card-career__progress{position:relative;width:50px;height:50px;flex-shrink:0}.fm-card-career__progress svg{width:50px;height:50px;transform:rotate(-90deg)}.fm-card-career__progress-track{fill:none;stroke:#eeeef0;stroke-width:4}.fm-card-career__progress-fill{fill:none;stroke:#9076dc;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .4s}.fm-card-career__progress-fill--complete{stroke:#31987f}.fm-card-career__progress-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:12px;color:#18181b}.fm-icon-btn{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid transparent;cursor:pointer;border-radius:9999px;flex-shrink:0;transition:background .15s,border-color .15s;box-sizing:border-box;padding:0}.fm-icon-btn--regular{width:33px;height:33px}.fm-icon-btn--small{width:27px;height:27px}.fm-icon-btn svg{width:15px;height:15px;flex-shrink:0}.fm-icon-btn--filled{background:#18181b;color:#fff}.fm-icon-btn--filled:hover:not(:disabled){background:linear-gradient(#18181b,#18181b) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-icon-btn--filled:active:not(:disabled){background:#2a2a2a}.fm-icon-btn--outlined{background:#fff;color:#18181b;border:1.5px solid #d9d9de}.fm-icon-btn--outlined:hover:not(:disabled){border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-icon-btn:focus-visible{outline:2px solid #ffa8f1;outline-offset:2px}.fm-icon-btn:disabled{background:#d9d9de;color:#91939f;cursor:not-allowed;border-color:transparent}.fm-segmented-control{display:inline-flex;gap:4px;padding:4px;background:#f7f7f8;border-radius:14px;box-sizing:border-box}.fm-segmented-control__item{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:10px 20px;border:none;border-radius:12px;background:transparent;color:#18181b;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;box-sizing:border-box}.fm-segmented-control__item--active{background:#9076dc;color:#f6f5fd}.fm-segmented-control__item:not(.fm-segmented-control__item--active):hover{background:#eeeef0}.fm-pagination{display:flex;align-items:center;gap:8px;box-sizing:border-box}.fm-pagination--dots{width:336px;justify-content:space-between}.fm-pagination__dots{display:flex;align-items:center;gap:0;padding:4px 8px;border-radius:12px}.fm-pagination__dot{display:inline-block;width:16px;height:16px;border-radius:9999px;display:flex;align-items:center;justify-content:center}.fm-pagination__dot:after{content:"";display:block;width:4px;height:4px;border-radius:9999px;background:#d9d9de;transition:width .15s,height .15s,background .15s}.fm-pagination__dot--active:after{width:8px;height:8px;background:#9076dc}.fm-pagination--numbers{justify-content:center;gap:8px}.fm-pagination__numbers{background:#fff;border-radius:12px;padding:4px 8px;min-width:48px;display:flex;align-items:center;justify-content:center}.fm-pagination__numbers-text{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#18181b;white-space:nowrap}.fm-pagination--hidden{gap:16px}.fm-widget-card{display:flex;flex-direction:column;background:#fff;border:1px solid #eeeef0;border-radius:20px;overflow:hidden;box-sizing:border-box;width:408px}.fm-widget-card__body{display:flex;flex-direction:column}.fm-widget-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:20px 20px 0 0;gap:8px;box-sizing:border-box}.fm-widget-header--purple{background:#eeecfb}.fm-widget-header--grey{background:#f7f7f8}.fm-widget-header__title-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.fm-widget-header__title{font-family:Manrope,sans-serif;font-weight:700;font-size:18px;line-height:.9;color:#121212;margin:0}.fm-widget-header__subtitle{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#989898;margin:0}.fm-widget-header__action{flex-shrink:0;display:flex;align-items:center}.fm-widget-news{display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center;padding:16px;box-sizing:border-box}.fm-widget-news__tag{flex-shrink:0}.fm-widget-news__content{display:flex;flex-direction:column;gap:8px;width:100%}.fm-widget-news__title{font-family:Nunito Sans,sans-serif;font-weight:600;font-size:16px;line-height:normal;color:#121212;margin:0}.fm-widget-news__text{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#525252;margin:0}.fm-widget-general-news{display:flex;flex-direction:column;gap:12px;align-items:flex-start;box-sizing:border-box;overflow:hidden}.fm-widget-general-news__image{width:100%;height:100px;background:#d9d9de;overflow:hidden;flex-shrink:0}.fm-widget-general-news__image img{width:100%;height:100%;object-fit:cover}.fm-widget-general-news__content{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px}.fm-widget-general-news__tag{flex-shrink:0}.fm-widget-general-news__title{font-family:Nunito Sans,sans-serif;font-weight:600;font-size:16px;line-height:normal;color:#121212;margin:0}.fm-widget-notes{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:16px;box-sizing:border-box}.fm-widget-notes__title{font-family:Nunito Sans,sans-serif;font-weight:600;font-size:16px;line-height:normal;color:#121212;margin:0;width:100%}.fm-widget-notes__text{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#121212;margin:0;width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.fm-widget-notes__footer{display:flex;align-items:center;justify-content:space-between;width:100%}.fm-widget-notes__date{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:12px;line-height:1.2;color:#4c4d58}.fm-widget-advice{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:16px;box-sizing:border-box}.fm-widget-advice__tag{flex-shrink:0}.fm-widget-advice__text{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#121212;margin:0;width:100%}.fm-widget-advice__action{width:100%}.fm-widget-calendar{display:flex;flex-direction:column;box-sizing:border-box}.fm-widget-calendar__days{display:flex;gap:4px;padding:16px;flex-wrap:nowrap}.fm-widget-calendar__day{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:9999px;background:#f7f7f8;gap:4px;padding-top:4px;padding-bottom:4px;position:relative}.fm-widget-calendar__day--active{background:#9076dc}.fm-widget-calendar__day-label{font-family:Nunito Sans,sans-serif;font-weight:300;font-size:14px;line-height:1.4;color:#4c4d58;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.fm-widget-calendar__day--active .fm-widget-calendar__day-label{color:#ffffffbf}.fm-widget-calendar__day-num{font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1.4;color:#121212;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:9999px}.fm-widget-calendar__day--active .fm-widget-calendar__day-num{color:#fff}.fm-widget-calendar__day-dot{display:block;width:4px;height:4px;border-radius:9999px;background:#9076dc;position:absolute;bottom:4px}.fm-widget-calendar__day--active .fm-widget-calendar__day-dot{background:#ffffffbf}.fm-widget-calendar__events{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px}.fm-widget-calendar__event{display:flex;gap:8px;align-items:stretch;opacity:.8}.fm-widget-calendar__event-bar{width:2px;border-radius:9999px;flex-shrink:0;background:#9076dc}.fm-widget-calendar__event-body{flex:1;background:#f7f7f8;border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:10px}.fm-widget-calendar__event-title{font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1.4;color:#121212}.fm-widget-calendar__event-time{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:12px;line-height:1.2;color:#656565}.fm-search{display:flex;align-items:center;gap:8px;height:42px;padding:12px 16px;background:#f7f7f8;border-radius:12px;box-sizing:border-box;width:100%}.fm-search__icon{flex-shrink:0}.fm-search__input{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-search__input::placeholder{color:#91939f}.fm-dropdown{display:flex;flex-direction:column;background:#ffffff80;border:1px solid #eeeef0;border-radius:12px;box-shadow:4px 8px 15.1px #c9c1f1;padding:8px 0;width:280px;box-sizing:border-box;overflow:hidden}.fm-dropdown__item{display:flex;align-items:center;height:32px;padding:8px 16px;border:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:700;color:#18181b;text-align:left;cursor:pointer;width:100%;transition:background .1s;border-radius:8px}.fm-dropdown__item:hover{background:#f7f7f8}.fm-datepicker{display:flex;flex-direction:column;gap:8px;width:192px;box-sizing:border-box}.fm-datepicker__label{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;color:#5d5e6c;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fm-datepicker__field{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;background:#f7f7f8;border-radius:8px;border:0px solid transparent;box-sizing:border-box;transition:border .15s;position:relative}.fm-datepicker__input{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-datepicker__icon{display:inline-flex;align-items:center;color:#18181b;flex-shrink:0}.fm-datepicker__helper{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:400;color:#91939f;line-height:1.2;margin:0}.fm-datepicker--hover .fm-datepicker__field{border:1.5px solid #ffa8f1}.fm-datepicker--hover .fm-datepicker__label{color:#754ccc}.fm-datepicker--focused .fm-datepicker__field{border:1px solid #ffa8f1}.fm-datepicker--disabled .fm-datepicker__label{color:#d9d9de}.fm-datepicker--disabled .fm-datepicker__field{opacity:.5;cursor:not-allowed}.fm-datepicker--disabled .fm-datepicker__input{cursor:not-allowed;color:#d9d9de}.fm-datepicker--disabled .fm-datepicker__helper,.fm-datepicker--disabled .fm-datepicker__icon{color:#d9d9de}.fm-timepicker{display:flex;flex-direction:column;gap:8px;width:192px;box-sizing:border-box}.fm-timepicker__label{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;color:#41414b;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fm-timepicker__field{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;background:#f7f7f8;border-radius:8px;border:0px solid transparent;box-sizing:border-box;transition:border .15s}.fm-timepicker__input{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-timepicker__icon{display:inline-flex;align-items:center;color:#18181b;flex-shrink:0}.fm-timepicker__helper{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:400;color:#91939f;line-height:1.2;margin:0}.fm-timepicker--hover .fm-timepicker__field{border:1.5px solid #ffa8f1}.fm-timepicker--hover .fm-timepicker__label{color:#754ccc}.fm-timepicker--focused .fm-timepicker__field{border:1px solid #ffa8f1}.fm-timepicker--disabled .fm-timepicker__label{color:#d9d9de}.fm-timepicker--disabled .fm-timepicker__field{opacity:.5;cursor:not-allowed}.fm-timepicker--disabled .fm-timepicker__input{cursor:not-allowed;color:#d9d9de}.fm-timepicker--disabled .fm-timepicker__helper,.fm-timepicker--disabled .fm-timepicker__icon{color:#d9d9de}.fm-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.fm-radio__input{display:none}.fm-radio__circle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid #b8b9c1;background:#ffffff0d;box-sizing:border-box;flex-shrink:0;transition:border-color .15s}.fm-radio__circle--checked{border-color:#9076dc;border-width:1px;padding:5px}.fm-radio__dot{display:block;width:10px;height:10px;border-radius:50%;background:#9076dc;flex-shrink:0}.fm-radio:hover .fm-radio__circle:not(.fm-radio__circle--checked){border-color:#737584}.fm-radio__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-radio--disabled{cursor:not-allowed;opacity:.5}.fm-stepper{display:flex;align-items:flex-start;gap:0}.fm-stepper__step{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;width:85px}.fm-stepper__circle{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;box-sizing:border-box;flex-shrink:0}.fm-stepper__circle--done{background:#9076dc;padding:9px 7px}.fm-stepper__circle--in-process{background:#fff;border:1px solid rgba(144,118,220,.3)}.fm-stepper__circle--inactive{background:#fff;border:1px solid #eeeef0}.fm-stepper__num{font-family:Manrope,sans-serif;font-size:14px;font-weight:700;color:#18181b;line-height:.9}.fm-stepper__num--inactive{color:#b8b9c1}.fm-stepper__line{position:absolute;top:15px;left:calc(50% + 15px);width:60px;height:1px}.fm-stepper__line--done,.fm-stepper__line--in-process{background:#9076dc}.fm-stepper__line--inactive{background:#eeeef0}.fm-stepper__label{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;text-align:center;margin:0}.fm-stepper__label--done,.fm-stepper__label--in-process{color:#5d5e6c}.fm-stepper__label--inactive{color:#b8b9c1}.fm-stepper-progress{display:flex;align-items:flex-start}.fm-stepper-progress__step{display:flex;flex-direction:column;align-items:center;gap:10px;width:85px;position:relative}.fm-stepper-progress__circle{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9999px;background:#9076dc;flex-shrink:0}.fm-stepper-progress__line{position:absolute;top:14px;left:calc(50% + 16px);width:60px;height:1px;background:#eeeef0}.fm-stepper-progress__step--in-process .fm-stepper-progress__line,.fm-stepper-progress__step--done .fm-stepper-progress__line{background:#9076dc}.fm-stepper-progress__label{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;text-align:center;margin:0}.fm-stepper-progress__step--in-process .fm-stepper-progress__label{color:#5d5e6c}.fm-stepper-progress__step--inactive .fm-stepper-progress__label{color:#b8b9c1}.fm-stepper-progress__step--done .fm-stepper-progress__label{color:#5d5e6c}.fm-testimonial{display:flex;flex-direction:column;gap:24px;padding:32px 24px;border:1px solid #eeeef0;border-radius:20px;width:351px;box-sizing:border-box}.fm-testimonial__author{display:flex;align-items:center;gap:17px}.fm-testimonial__avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}.fm-testimonial__avatar--placeholder{display:flex;align-items:center;justify-content:center;background:#e0ddf7;color:#9076dc;font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700}.fm-testimonial__meta{display:flex;flex-direction:column;gap:10px}.fm-testimonial__name{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;color:#18181b;line-height:1.2;margin:0}.fm-testimonial__role{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:300;color:#18181b;line-height:1.2;margin:0}.fm-testimonial__quote{font-family:Nunito Sans,sans-serif;font-size:18px;font-weight:300;color:#18181b;line-height:1.12;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.fm-pricecard{display:flex;flex-direction:column;gap:32px;padding:24px;border-radius:20px;width:285px;box-sizing:border-box;position:relative;background:#fff;border:1px solid #eeeef0}.fm-pricecard--highlighted{background:#f7f7f8;border:none}.fm-pricecard__badge{position:absolute;top:21px;right:24px;background:#fff0d4;color:#c54e09;font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;padding:8px 12px;border-radius:9999px}.fm-pricecard__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#e0ddf7;border-radius:4px;flex-shrink:0;color:#9076dc;font-size:20px}.fm-pricecard__info{display:flex;flex-direction:column;gap:16px}.fm-pricecard__title{font-family:Manrope,sans-serif;font-size:20px;font-weight:600;color:#18181b;line-height:.9;margin:0}.fm-pricecard__desc{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:400;color:#4c4d58;line-height:1.4;margin:0;height:77px;overflow:hidden}.fm-pricecard__footer{display:flex;flex-direction:column;gap:16px}.fm-pricecard__price{display:flex;align-items:baseline;gap:4px}.fm-pricecard__amount{font-family:Manrope,sans-serif;font-size:40px;font-weight:700;color:#18181b;line-height:1.1}.fm-pricecard__period{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:600;color:#5d5e6c;line-height:normal}.fm-pricecard__action{width:100%}.fm-pricecard__action>*{width:100%}.fm-price{display:flex;flex-direction:column;gap:32px;padding:40px 32px;background:#f7f7f8;border:1px solid #eeeef0;border-radius:24px;width:351px;box-sizing:border-box}.fm-price__title{font-family:Manrope,sans-serif;font-size:18px;font-weight:700;color:#5d5e6c;line-height:.9;margin:0}.fm-price__amount-row{display:flex;align-items:baseline;gap:4px}.fm-price__amount{font-family:Manrope,sans-serif;font-size:40px;font-weight:700;color:#18181b;line-height:1.1}.fm-price__period{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:600;color:#5d5e6c;line-height:normal}.fm-price__cta{width:100%;height:42px;background:#121212;color:#fff;border:none;border-radius:12px;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}.fm-price__cta:hover{background:#2c2c2c}.fm-price__features{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0;margin:0}.fm-price__feature{display:flex;align-items:center;gap:16px}.fm-price__check{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#9076dc;border-radius:4px;flex-shrink:0;padding:3px;box-sizing:border-box}.fm-price__feature span{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-list-item{display:flex;align-items:center;gap:16px}.fm-list-item__check{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#9076dc;border-radius:4px;flex-shrink:0;padding:3px;box-sizing:border-box}.fm-list-item__text{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-tag-big{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(144,118,220,.3);border-radius:48px;background:#ffffff0d;white-space:nowrap}.fm-tag-big__icon{display:flex;align-items:center;flex-shrink:0}.fm-tag-big__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;line-height:1.4;background:linear-gradient(90deg,#9076dc,#c87bf5,#ffa8f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.fm-section-title{display:flex}.fm-section-title--centered{flex-direction:column;align-items:center;gap:30px;text-align:center}.fm-section-title--left{flex-direction:column;align-items:flex-start;gap:24px}.fm-section-title--split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px}.fm-section-title--split .fm-section-title__left{display:flex;flex-direction:column;gap:20px;align-items:flex-start}.fm-section-title__heading{font-family:Manrope,sans-serif;font-size:45px;font-weight:700;color:#18181b;line-height:1.1;margin:0}.fm-section-title__subtitle{font-family:Nunito Sans,sans-serif;font-size:18px;font-weight:400;color:#4c4d58;line-height:1.4;margin:0}.fm-section-title--split .fm-section-title__subtitle{max-width:285px}.fm-dashboard-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%}.fm-dashboard-title__text{display:flex;flex-direction:column;gap:12px}.fm-dashboard-title__heading{font-family:Manrope,sans-serif;font-size:30px;font-weight:800;color:#121212;line-height:1.3;margin:0}.fm-dashboard-title__subtitle{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:600;color:#989898;line-height:normal;margin:0}.fm-dashboard-title__action{display:flex;align-items:center;gap:10px;height:42px;padding:10px 16px;background:#121212;color:#fff;border:none;border-radius:12px;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:700;cursor:pointer;flex-shrink:0;white-space:nowrap}.fm-dashboard-title__action:hover{background:#2c2c2c}.fm-process-step{display:flex;gap:24px;align-items:flex-start;max-width:100%;box-sizing:border-box}.fm-process-step__number{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:100px;flex-shrink:0;font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:600;line-height:normal}.fm-process-step--select .fm-process-step__number{background:#9076dc;color:#fff}.fm-process-step--normal .fm-process-step__number{background:#f7f7f8;color:#91939f}.fm-process-step__body{display:flex;flex-direction:column;gap:12px;flex:1}.fm-process-step__title{font-family:Manrope,sans-serif;font-size:24px;font-weight:700;color:#18181b;line-height:.9;margin:0}.fm-process-step__content{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;margin:0}.fm-tasks-widget{display:flex;flex-direction:column;gap:8px;padding:16px;box-sizing:border-box}.fm-tasks-widget__row{display:flex;align-items:center;gap:10px;width:100%}.fm-tasks-widget__checkbox{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;background:#eeeef0;flex-shrink:0}.fm-tasks-widget__checkbox--done{background:#9076dc}.fm-tasks-widget__label{flex:1;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-tasks-widget__label--done{text-decoration:line-through;color:#bdbdbd}.fm-tasks-widget__tag{flex-shrink:0;background:#eeeef0;color:#4c4d58;font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;padding:8px 12px;border-radius:9999px;white-space:nowrap}.fm-signup-form{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:20px;padding:10px 20px;max-width:100%;box-sizing:border-box;gap:12px}.fm-signup-form__input{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:300;color:#18181b;line-height:1.4;min-width:0}.fm-signup-form__input::placeholder{color:#5d5e6c;font-weight:300}.fm-signup-form__btn{flex-shrink:0;height:42px;padding:10px 16px;background:#121212;color:#fff;border:none;border-radius:12px;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}.fm-signup-form__btn:hover{background:#2c2c2c}.fm-tariffs{display:flex;align-items:center;gap:20px;padding:20px;background:#fff;border:1px solid #eeeef0;border-radius:12px;max-width:100%;box-sizing:border-box;transition:border-color .15s}.fm-tariffs--hover{border-color:#ffa8f1}.fm-tariffs__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#e0ddf7;border-radius:4px;flex-shrink:0}.fm-tariffs__body{display:flex;flex-direction:column;gap:16px;flex:1}.fm-tariffs__title{font-family:Manrope,sans-serif;font-size:20px;font-weight:600;color:#18181b;line-height:.9;margin:0}.fm-tariffs__desc{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:300;color:#4c4d58;line-height:1.2;margin:0}.fm-question{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 16px;background:#fff;border:1px solid #eeeef0;border-radius:20px;max-width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s}.fm-question--hover{border-color:#ffa8f1}.fm-question--open{border-color:#ffa8f1;align-items:flex-start}.fm-question__content{display:flex;flex-direction:column;gap:20px;flex:1;min-width:0}.fm-question__title{font-family:Manrope,sans-serif;font-size:20px;font-weight:600;color:#121212;line-height:.9;margin:0}.fm-question__text{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:300;color:#121212;line-height:1.4;margin:0}.fm-question__icon{display:flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:9999px;background:#9076dc;flex-shrink:0;margin-top:2px}.fm-question__icon--open{background:#18181b}
1
+ :root{--bw-fill-white: #ffffff;--bw-fill-black: #121212;--bw-fill-500: #7c7c7c;--bw-fill-600: #656565;--bw-fill-700: #525252;--bw-fill-800: #464646;--bw-fill-900: #3d3d3d;--bw-transparent-white-75: rgba(255, 255, 255, .75);--bw-transparent-white-50: rgba(255, 255, 255, .5);--bw-transparent-white-30: rgba(255, 255, 255, .3);--bw-transparent-white-25: rgba(255, 255, 255, .25);--bw-transparent-white-10: rgba(255, 255, 255, .1);--bw-transparent-white-5: rgba(255, 255, 255, .05);--bw-transparent-black-25: rgba(0, 0, 0, .25);--bw-transparent-black-10: rgba(0, 0, 0, .1);--bw-transparent-black-5: rgba(0, 0, 0, .05);--primary-fill-50: #f6f5fd;--primary-fill-100: #eeecfb;--primary-fill-200: #e0ddf7;--primary-fill-300: #c9c1f1;--primary-fill-400: #ac9de8;--primary-fill-500: #9076dc;--primary-fill-600: #754ccc;--primary-fill-700: #6d45bc;--primary-fill-800: #5b3a9d;--primary-fill-900: #4c3181;--primary-fill-950: #2f1e57;--primary-transparent-75: rgba(144, 118, 220, .75);--primary-transparent-50: rgba(144, 118, 220, .5);--primary-transparent-30: rgba(144, 118, 220, .3);--primary-transparent-25: rgba(144, 118, 220, .25);--primary-transparent-20: rgba(144, 118, 220, .2);--primary-transparent-15: rgba(144, 118, 220, .15);--primary-transparent-10: rgba(144, 118, 220, .1);--primary-transparent-5: rgba(144, 118, 220, .05);--pink-fill-50: #fff4fe;--pink-fill-100: #ffe7fc;--pink-fill-200: #ffcef9;--pink-fill-300: #ffa8f1;--pink-fill-400: #fe66e3;--pink-fill-500: #f63fd5;--pink-fill-600: #da1fb5;--pink-fill-700: #b51692;--pink-fill-800: #941476;--pink-fill-900: #791660;--pink-fill-950: #51013c;--pink-transparent-75: rgba(254, 102, 227, .75);--pink-transparent-50: rgba(254, 102, 227, .5);--pink-transparent-30: rgba(254, 102, 227, .3);--pink-transparent-25: rgba(254, 102, 227, .25);--pink-transparent-20: rgba(254, 102, 227, .2);--pink-transparent-15: rgba(254, 102, 227, .15);--pink-transparent-10: rgba(254, 102, 227, .1);--pink-transparent-5: rgba(254, 102, 227, .05);--green-fill-50: #effaf6;--green-fill-100: #d9f2e7;--green-fill-200: #b6e4d3;--green-fill-300: #91d4bf;--green-fill-400: #53b499;--green-fill-500: #31987f;--green-fill-600: #217a65;--green-fill-700: #1b6153;--green-fill-800: #174e43;--green-fill-900: #144038;--green-fill-950: #0a2420;--green-transparent-75: rgba(83, 180, 153, .75);--green-transparent-50: rgba(83, 180, 153, .5);--green-transparent-30: rgba(83, 180, 153, .35);--green-transparent-25: rgba(83, 180, 153, .25);--green-transparent-20: rgba(83, 180, 153, .2);--green-transparent-15: rgba(83, 180, 153, .15);--green-transparent-10: rgba(83, 180, 153, .1);--green-transparent-5: rgba(83, 180, 153, .05);--yellow-fill-50: #fff8ed;--yellow-fill-100: #fff0d4;--yellow-fill-200: #ffdda9;--yellow-fill-300: #ffbe62;--yellow-fill-400: #fea139;--yellow-fill-500: #fc8313;--yellow-fill-600: #ed6809;--yellow-fill-700: #c54e09;--yellow-fill-900: #7e3410;--yellow-transparent-75: rgba(254, 161, 57, .75);--yellow-transparent-50: rgba(254, 161, 57, .5);--yellow-transparent-30: rgba(254, 161, 57, .3);--yellow-transparent-25: rgba(254, 161, 57, .25);--yellow-transparent-20: rgba(254, 161, 57, .2);--yellow-transparent-15: rgba(254, 161, 57, .15);--yellow-transparent-10: rgba(254, 161, 57, .1);--yellow-transparent-5: rgba(254, 161, 57, .05);--nature-fill-100: #eeeef0;--nature-fill-200: #d9d9de;--nature-fill-300: #b8b9c1;--nature-fill-400: #91939f;--nature-fill-500: #737584;--nature-fill-600: #5d5e6c;--nature-fill-950: #18181b;--nature-transparent-75: rgba(24, 24, 27, .75);--nature-transparent-50: rgba(24, 24, 27, .5);--nature-transparent-30: rgba(24, 24, 27, .3);--nature-transparent-25: rgba(24, 24, 27, .25);--nature-transparent-20: rgba(24, 24, 27, .2);--nature-transparent-15: rgba(24, 24, 27, .15);--nature-transparent-10: rgba(24, 24, 27, .1);--nature-transparent-5: rgba(24, 24, 27, .05);--functional-success-200: #c0f2cc;--functional-success-300: #8fe6a4;--functional-success-400: #57d175;--functional-success-500: #34c759;--functional-success-600: #22973f;--functional-success-700: #1e7735;--functional-success-800: #1d5e2e;--functional-success-900: #194e28;--functional-success-950: #082b13;--functional-success-transparent-50: rgba(52, 199, 89, .5);--functional-success-transparent-30: rgba(52, 199, 89, .3);--functional-success-transparent-25: rgba(52, 199, 89, .25);--functional-success-transparent-20: rgba(52, 199, 89, .2);--functional-success-transparent-15: rgba(52, 199, 89, .15);--functional-success-transparent-10: rgba(52, 199, 89, .1);--functional-success-transparent-5: rgba(52, 199, 89, .05);--functional-error-50: #fff1f1;--functional-error-100: #ffdfe0;--functional-error-200: #ffc5c6;--functional-error-300: #ff9d9f;--functional-error-400: #ff6467;--functional-error-500: #ff383c;--functional-error-600: #ed1519;--functional-error-900: #881416;--functional-error-transparent-50: rgba(255, 56, 60, .5);--functional-error-transparent-30: rgba(255, 56, 60, .3);--functional-error-transparent-25: rgba(255, 56, 60, .25);--functional-error-transparent-20: rgba(255, 56, 60, .2);--functional-error-transparent-15: rgba(255, 56, 60, .15);--functional-error-transparent-10: rgba(255, 56, 60, .1);--functional-error-transparent-5: rgba(255, 56, 60, .05);--functional-warning-700: #c64308;--functional-warning-transparent-75: rgba(254, 119, 17, .75);--functional-warning-transparent-50: rgba(254, 119, 17, .5);--functional-warning-transparent-30: rgba(254, 119, 17, .3);--functional-warning-transparent-25: rgba(254, 119, 17, .25);--functional-warning-transparent-15: rgba(254, 119, 17, .15);--functional-warning-transparent-10: rgba(254, 119, 17, .1);--functional-warning-transparent-5: rgba(254, 119, 17, .05)}:root{--font-family-headings: "Manrope", sans-serif;--font-family-body: "Nunito Sans", sans-serif;--font-size-10: 10px;--font-size-12: 12px;--font-size-14: 14px;--font-size-16: 16px;--font-size-18: 18px;--font-size-20: 20px;--font-size-24: 24px;--font-size-30: 30px;--font-size-36: 36px;--font-size-48: 48px;--weight-light: 300;--weight-regular: 400;--weight-medium: 400;--weight-semibold: 600;--weight-bold: 700;--line-height-tight: .9;--line-height-snug: 1;--line-height-normal: 1.2;--line-height-relaxed:1.4}.text-display{font-family:var(--font-family-headings);font-size:var(--font-size-48);font-weight:var(--weight-bold);line-height:var(--line-height-tight)}.text-h1{font-family:var(--font-family-headings);font-size:var(--font-size-36);font-weight:var(--weight-bold);line-height:var(--line-height-tight)}.text-h2{font-family:var(--font-family-headings);font-size:var(--font-size-30);font-weight:var(--weight-bold);line-height:.94}.text-h3{font-family:var(--font-family-headings);font-size:var(--font-size-24);font-weight:var(--weight-bold);line-height:var(--line-height-normal)}.text-h4{font-family:var(--font-family-headings);font-size:var(--font-size-18);font-weight:var(--weight-bold);line-height:var(--line-height-tight)}.text-body-lg{font-family:var(--font-family-body);font-size:var(--font-size-16);font-weight:var(--weight-medium);line-height:var(--line-height-relaxed)}.text-body-md{font-family:var(--font-family-body);font-size:var(--font-size-14);font-weight:var(--weight-medium);line-height:var(--line-height-relaxed)}.text-body-sm{font-family:var(--font-family-body);font-size:var(--font-size-12);font-weight:var(--weight-medium);line-height:var(--line-height-normal)}.text-subtitle{font-family:var(--font-family-body);font-size:var(--font-size-16);font-weight:var(--weight-semibold);line-height:1}.text-button{font-family:var(--font-family-body);font-size:var(--font-size-14);font-weight:var(--weight-bold);line-height:1}.text-tiny{font-family:var(--font-family-body);font-size:var(--font-size-12);font-weight:var(--weight-bold);line-height:var(--line-height-normal)}:root{--space-xxs: 4px;--space-xs: 8px;--space-s: 10px;--space-sm: 12px;--space-m: 16px;--space-l: 20px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--radius-xs: 8px;--radius-s: 10px;--radius-m: 12px;--radius-l: 16px;--radius-xl: 20px;--radius-full: 9999px}.fm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1;white-space:nowrap;transition:background .15s,border-color .15s,border-width .15s,opacity .15s,box-shadow .15s;text-decoration:none;box-sizing:border-box;position:relative}.fm-btn--sm{height:31.5px;padding:0 11.5px;border-radius:10px;font-size:11.5px}.fm-btn--md{height:41.5px;padding:10px 16px;border-radius:11.5px}.fm-btn--lg{height:51.5px;padding:11.5px 24px;border-radius:11.5px;font-size:16px}.fm-btn--full{width:100%}.fm-btn--primary{background:#121212;color:#fff;border:none}.fm-btn--primary:hover:not(:disabled){background:#121212;box-shadow:inset 0 0 0 100px #ffffff0d}.fm-btn--primary:active:not(:disabled){background:#2a2a2a}.fm-btn--primary:focus-visible{outline:1.5px solid #ffa8f1;outline-offset:1.5px}.fm-btn--hero{background:#121212;color:#fff;border:1.5px solid transparent;padding:10px 16px;border-radius:11.5px;height:41.5px}.fm-btn--hero:hover:not(:disabled),.fm-btn--hero:active:not(:disabled),.fm-btn--hero:focus-visible{outline:none;border:2px solid transparent;background:linear-gradient(#121212,#121212) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-btn--hero:disabled{background:#bdbdbd;color:#91939f;border-color:transparent}.fm-btn--secondary{background:#fff;color:#18181b;border:1.5px solid #d9d9de;border-radius:11.5px;height:41.5px;padding:10px 16px}.fm-btn--secondary:hover:not(:disabled),.fm-btn--secondary:focus-visible{outline:none;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-btn--secondary:active:not(:disabled){border:2px solid transparent;background:linear-gradient(#f7f7f8,#f7f7f8) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-btn--secondary:disabled{color:#91939f;border:1.5px solid #d9d9de;background:#fff;cursor:not-allowed}.fm-btn--secondary-large{background:#fff;color:#18181b;border:1.5px solid #d9d9de;border-radius:11.5px;height:51.5px;padding:11.5px 24px;font-size:16px}.fm-btn--secondary-large:hover:not(:disabled),.fm-btn--secondary-large:focus-visible{outline:none;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-btn--secondary-large:active:not(:disabled){border:2px solid transparent;background:linear-gradient(#f7f7f8,#f7f7f8) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-btn--secondary-large:disabled{color:#91939f;border:1.5px solid #d9d9de;background:#fff;cursor:not-allowed}.fm-btn--ghost{background:transparent;color:#18181b;border:none}.fm-btn--ghost:hover:not(:disabled){background:#f7f7f8}.fm-btn--ghost:active:not(:disabled){background:#eeeef0}.fm-btn--ghost-icon{background:transparent;color:#18181b;border:none;padding:8px;border-radius:10px;height:auto}.fm-btn--ghost-icon:hover:not(:disabled){background:#f7f7f8}.fm-btn--disabled,.fm-btn:disabled{cursor:not-allowed;opacity:1}.fm-btn__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.fm-input-wrapper{display:flex;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.fm-input__label{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:400;color:#5d5e6c;line-height:1.4;white-space:nowrap}.fm-input__field{display:flex;align-items:center;gap:8px;height:42px;padding:10px 16px;border-radius:12px;border:1px solid #b8b9c1;background:#fff;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;width:100%}.fm-input__el{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-input__el::placeholder{color:#b8b9c1}.fm-input-wrapper--hover .fm-input__field{border-color:#5d5e6c;box-shadow:0 4px 5.3px #d9d9de}.fm-input-wrapper--focused .fm-input__field{border-color:#ffa8f1}.fm-input-wrapper--filled .fm-input__field{border-color:#5d5e6c}.fm-input-wrapper--error .fm-input__field{border-color:#ff383c}.fm-input-wrapper--success .fm-input__field{border-color:#34c759}.fm-input-wrapper--disabled .fm-input__field{background:#f7f7f8;cursor:not-allowed;border-color:#b8b9c1}.fm-input-wrapper--disabled .fm-input__el{cursor:not-allowed;color:#91939f}.fm-input__el:focus{outline:none}.fm-input__field:focus-within{border-color:#ffa8f1}.fm-input-wrapper--error .fm-input__field:focus-within{border-color:#ff383c}.fm-input-wrapper--success .fm-input__field:focus-within{border-color:#34c759}.fm-input__icon{display:inline-flex;align-items:center;color:#b8b9c1;flex-shrink:0}.fm-input__message{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:400;line-height:1.2;margin:0}.fm-input__message--error{color:#ff383c}.fm-input__message--success{color:#34c759}.fm-tag{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:9999px;font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;box-sizing:border-box}.fm-tag--grey{background:#eeeef0;color:#4c4d58}.fm-tag--green{background:#d9f2e7;color:#1b6153}.fm-tag--yellow{background:#fff0d4;color:#c54e09}.fm-tag--purple{background:#eeecfb;color:#6d45bc}.fm-tag--pink{background:#ffe7fc;color:#b51692}.fm-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.fm-toggle__input{position:absolute;opacity:0;width:0;height:0}.fm-toggle__track{position:relative;width:64px;height:28px;border-radius:100px;background:#d9d9de;transition:background .25s;flex-shrink:0;overflow:hidden}.fm-toggle__input:checked~.fm-toggle__track{background:linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc)}.fm-toggle__thumb{position:absolute;top:50%;transform:translateY(-50%);left:2px;width:24px;height:24px;border-radius:100px;background:#fff;transition:left .25s;box-shadow:0 1px 3px #00000026}.fm-toggle__input:checked~.fm-toggle__track .fm-toggle__thumb{left:calc(100% - 26px)}.fm-toggle--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.fm-toggle__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.fm-checkbox__input{position:absolute;opacity:0;width:0;height:0}.fm-checkbox__box{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;border:1.5px solid #b8b9c1;background:#fff;flex-shrink:0;overflow:hidden;transition:background .15s,border-color .15s;box-sizing:border-box}.fm-checkbox--large .fm-checkbox__box{width:22px;height:22px;border-radius:6px}.fm-checkbox__input:checked+.fm-checkbox__box{background:#9076dc;border-color:#9076dc}.fm-checkbox__input:indeterminate+.fm-checkbox__box{background:#9076dc;border-color:#9076dc}.fm-checkbox__minus{width:10px;height:2px;background:#fff;border-radius:1px}.fm-checkbox:not(.fm-checkbox--disabled):hover .fm-checkbox__box{border-color:#5d5e6c}.fm-checkbox--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.fm-checkbox__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-m, 16px);border-radius:var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;width:100%}.fm-header--purple{background:var(--primary-fill-100, #eeecfb)}.fm-header--grey{background:var(--nature-fill-50, #f7f7f8)}.fm-header__slot{display:flex;align-items:center}.fm-header__title-block{display:flex;flex-direction:column;gap:var(--space-xs, 8px);flex:1;padding:0 var(--space-xs, 8px)}.fm-header__title{font-family:var(--font-family-headings, "Manrope", sans-serif);font-size:var(--font-size-18, 18px);font-weight:var(--weight-bold, 700);color:var(--bw-fill-black, #121212);line-height:.9;margin:0}.fm-header__subtitle{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-medium, 400);color:var(--bw-fill-400, #989898);line-height:1.4;margin:0}.fm-footer{display:flex;flex-direction:column;width:100%}.fm-footer--light{background:var(--nature-fill-50, #f7f7f8);color:var(--bw-fill-black, #121212)}.fm-footer--dark{background:var(--nature-fill-950, #18181b);color:#ffffffbf}.fm-footer__top{display:flex;gap:var(--space-3xl, 48px);padding:var(--space-xl, 24px);align-items:flex-start}.fm-footer__cta-block{display:flex;flex-direction:column;gap:var(--space-xl, 24px);flex-shrink:0}.fm-footer__headline{font-family:var(--font-family-headings, "Manrope", sans-serif);font-size:var(--font-size-30, 30px);font-weight:var(--weight-bold, 700);line-height:.94;margin:0}.fm-footer__cta-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 var(--space-m, 16px);border-radius:var(--radius-m, 12px);font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-bold, 700);cursor:pointer;transition:background .15s}.fm-footer--light .fm-footer__cta-btn{background:var(--bw-fill-black, #121212);color:var(--bw-fill-white, #ffffff);border:none}.fm-footer--dark .fm-footer__cta-btn{background:transparent;color:#ffffffbf;border:1.5px solid var(--pink-fill-300, #ffa8f1)}.fm-footer__sections{display:flex;gap:var(--space-3xl, 48px);flex:1;justify-content:space-between;flex-wrap:wrap}.fm-footer__section{display:flex;flex-direction:column;gap:var(--space-xl, 24px)}.fm-footer__section-title{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-16, 16px);font-weight:var(--weight-semibold, 600);margin:0}.fm-footer__section-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-m, 16px)}.fm-footer__link{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-light, 300);text-decoration:none;line-height:1.4;color:inherit}.fm-footer__link:hover{text-decoration:underline}.fm-footer__bottom{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xl, 24px);border-top:1px solid rgba(255,255,255,.05)}.fm-footer__copyright{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-medium, 400);line-height:1.4;margin:0}.fm-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:80px;min-height:60px;padding:10px 12px;border-radius:12px;border:1.5px solid transparent;background:transparent;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:background .15s,border-color .15s}.fm-nav-item__icon{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#91939f}.fm-nav-item__label{font-family:Nunito Sans,sans-serif;font-weight:700;font-size:12px;line-height:1.2;color:#91939f;text-align:center;white-space:nowrap}.fm-nav-item:hover:not(.fm-nav-item--active):not(.fm-nav-item--pressed){border-color:#ffa8f1;background:transparent}.fm-nav-item:hover:not(.fm-nav-item--active):not(.fm-nav-item--pressed) .fm-nav-item__icon{color:#91939f}.fm-nav-item:hover:not(.fm-nav-item--active):not(.fm-nav-item--pressed) .fm-nav-item__label{color:#91939f}.fm-nav-item--pressed,.fm-nav-item:active:not(.fm-nav-item--active){background:#6d45bc;border-color:transparent}.fm-nav-item--pressed .fm-nav-item__icon,.fm-nav-item:active:not(.fm-nav-item--active) .fm-nav-item__icon{color:#fff}.fm-nav-item--pressed .fm-nav-item__label,.fm-nav-item:active:not(.fm-nav-item--active) .fm-nav-item__label{color:#fff}.fm-nav-item--active{background:#9076dc;border-color:transparent}.fm-nav-item--active .fm-nav-item__icon,.fm-nav-item--active .fm-nav-item__label{color:#fff}.fm-nav-bar{display:flex;flex-direction:column;gap:4px;padding:8px;background:#fff;border-right:1px solid #eeeef0}.fm-nav-bar--horizontal{flex-direction:row;border-right:none;border-bottom:1px solid #eeeef0;padding:8px 16px}.fm-card-test{display:flex;flex-direction:column;justify-content:space-between;width:420px;min-height:448px;padding:16px;background:#fff;border:1px solid #eeeef0;border-radius:20px;box-sizing:border-box;gap:12px}.fm-card-test__image{position:relative;height:160px;border-radius:12px;overflow:hidden;flex-shrink:0;display:flex;align-items:flex-start;justify-content:flex-end}.fm-card-test__image img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:12px}.fm-card-test__image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#18181b40;border-radius:12px}.fm-card-test__status-tag{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:9999px;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:12px;line-height:1.2;z-index:1}.fm-card-test__status-tag--available{background:#d9f2e7;color:#1b6153}.fm-card-test__status-tag--in-progress{background:#fff0d4;color:#c54e09}.fm-card-test__status-tag--completed{background:#eeecfb;color:#6d45bc}.fm-card-test__status-tag--unavailable{background:#eeeef0;color:#91939f}.fm-card-test__content{display:flex;flex-direction:column;gap:12px}.fm-card-test__title{font-family:Manrope,sans-serif;font-weight:700;font-size:24px;line-height:1.2;color:#18181b;margin:0}.fm-card-test__description{font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1.4;color:#91939f;margin:0}.fm-card-test__tags{display:flex;flex-wrap:wrap;gap:8px}.fm-card-test__meta{display:flex;gap:12px;align-items:center}.fm-card-test__meta-item{display:flex;gap:4px;align-items:center;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:12px;line-height:1.2;color:#91939f}.fm-card-test__meta-icon{width:20px;height:20px;flex-shrink:0}.fm-card-test--unavailable{opacity:.5}.fm-card-career{width:100%;background:#fff;border:1px solid #eeeef0;border-radius:20px;overflow:hidden;box-sizing:border-box}.fm-card-career__header{display:flex;align-items:center;gap:16px;padding:24px;cursor:pointer;-webkit-user-select:none;user-select:none}.fm-card-career__header-content{flex:1;display:flex;flex-direction:column;gap:10px}.fm-card-career__title-row{display:flex;gap:10px;align-items:center}.fm-card-career__title{font-family:Manrope,sans-serif;font-weight:700;font-size:18px;line-height:.9;color:#18181b;margin:0}.fm-card-career__subtitle{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#989898;margin:0}.fm-card-career__chevron{width:20px;height:20px;flex-shrink:0;color:#91939f;transition:transform .2s}.fm-card-career--open .fm-card-career__chevron{transform:rotate(180deg)}.fm-card-career__tasks{display:none}.fm-card-career--open .fm-card-career__tasks{display:block}.fm-card-career__task{display:flex;gap:10px;align-items:center;justify-content:center;padding:24px;border-top:1px solid #eeeef0}.fm-card-career__task-info{flex:1;display:flex;gap:16px;align-items:center}.fm-card-career__task-text{flex:1;display:flex;flex-direction:column;gap:12px}.fm-card-career__task-title{font-family:Nunito Sans,sans-serif;font-weight:600;font-size:16px;line-height:1;color:#18181b;margin:0}.fm-card-career__task-subtitle{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#989898;margin:0}.fm-card-career__progress{position:relative;width:50px;height:50px;flex-shrink:0}.fm-card-career__progress svg{width:50px;height:50px;transform:rotate(-90deg)}.fm-card-career__progress-track{fill:none;stroke:#eeeef0;stroke-width:4}.fm-card-career__progress-fill{fill:none;stroke:#9076dc;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .4s}.fm-card-career__progress-fill--complete{stroke:#31987f}.fm-card-career__progress-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:12px;color:#18181b}.fm-icon-btn{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid transparent;cursor:pointer;border-radius:9999px;flex-shrink:0;transition:background .15s,border-color .15s;box-sizing:border-box;padding:0}.fm-icon-btn--regular{width:33px;height:33px}.fm-icon-btn--small{width:27px;height:27px}.fm-icon-btn svg{width:15px;height:15px;flex-shrink:0}.fm-icon-btn--filled{background:#18181b;color:#fff}.fm-icon-btn--filled:hover:not(:disabled){background:linear-gradient(#18181b,#18181b) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-icon-btn--filled:active:not(:disabled){background:#2a2a2a}.fm-icon-btn--outlined{background:#fff;color:#18181b;border:1.5px solid #d9d9de}.fm-icon-btn--outlined:hover:not(:disabled){border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ffa8f1,#ffb3aa 18.51%,#ffb986,#ffbe62 37.02%,#c8c991,#91d4bf 65.87%,#91a5ce,#9076dc) border-box}.fm-icon-btn:focus-visible{outline:2px solid #ffa8f1;outline-offset:2px}.fm-icon-btn:disabled{background:#d9d9de;color:#91939f;cursor:not-allowed;border-color:transparent}.fm-segmented-control{display:inline-flex;gap:4px;padding:4px;background:#f7f7f8;border-radius:14px;box-sizing:border-box}.fm-segmented-control__item{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:10px 20px;border:none;border-radius:12px;background:transparent;color:#18181b;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;box-sizing:border-box}.fm-segmented-control__item--active{background:#9076dc;color:#f6f5fd}.fm-segmented-control__item:not(.fm-segmented-control__item--active):hover{background:#eeeef0}.fm-pagination{display:flex;align-items:center;gap:8px;box-sizing:border-box}.fm-pagination--dots{width:336px;justify-content:space-between}.fm-pagination__dots{display:flex;align-items:center;gap:0;padding:4px 8px;border-radius:12px}.fm-pagination__dot{display:inline-block;width:16px;height:16px;border-radius:9999px;display:flex;align-items:center;justify-content:center}.fm-pagination__dot:after{content:"";display:block;width:4px;height:4px;border-radius:9999px;background:#d9d9de;transition:width .15s,height .15s,background .15s}.fm-pagination__dot--active:after{width:8px;height:8px;background:#9076dc}.fm-pagination--numbers{justify-content:center;gap:8px}.fm-pagination__numbers{background:#fff;border-radius:12px;padding:4px 8px;min-width:48px;display:flex;align-items:center;justify-content:center}.fm-pagination__numbers-text{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#18181b;white-space:nowrap}.fm-pagination--hidden{gap:16px}.fm-widget-card{display:flex;flex-direction:column;background:#fff;border:1px solid #eeeef0;border-radius:20px;overflow:hidden;box-sizing:border-box;width:408px}.fm-widget-card__body{display:flex;flex-direction:column}.fm-widget-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:20px 20px 0 0;gap:8px;box-sizing:border-box}.fm-widget-header--purple{background:#eeecfb}.fm-widget-header--grey{background:#f7f7f8}.fm-widget-header__title-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.fm-widget-header__title{font-family:Manrope,sans-serif;font-weight:700;font-size:18px;line-height:.9;color:#121212;margin:0}.fm-widget-header__subtitle{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#989898;margin:0}.fm-widget-header__action{flex-shrink:0;display:flex;align-items:center}.fm-widget-news{display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center;padding:16px;box-sizing:border-box}.fm-widget-news__tag{flex-shrink:0}.fm-widget-news__content{display:flex;flex-direction:column;gap:8px;width:100%}.fm-widget-news__title{font-family:Nunito Sans,sans-serif;font-weight:600;font-size:16px;line-height:normal;color:#121212;margin:0}.fm-widget-news__text{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#525252;margin:0}.fm-widget-general-news{display:flex;flex-direction:column;gap:12px;align-items:flex-start;box-sizing:border-box;overflow:hidden}.fm-widget-general-news__image{width:100%;height:100px;background:#d9d9de;overflow:hidden;flex-shrink:0}.fm-widget-general-news__image img{width:100%;height:100%;object-fit:cover}.fm-widget-general-news__content{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px}.fm-widget-general-news__tag{flex-shrink:0}.fm-widget-general-news__title{font-family:Nunito Sans,sans-serif;font-weight:600;font-size:16px;line-height:normal;color:#121212;margin:0}.fm-widget-notes{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:16px;box-sizing:border-box}.fm-widget-notes__title{font-family:Nunito Sans,sans-serif;font-weight:600;font-size:16px;line-height:normal;color:#121212;margin:0;width:100%}.fm-widget-notes__text{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#121212;margin:0;width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.fm-widget-notes__footer{display:flex;align-items:center;justify-content:space-between;width:100%}.fm-widget-notes__date{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:12px;line-height:1.2;color:#4c4d58}.fm-widget-advice{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:16px;box-sizing:border-box}.fm-widget-advice__tag{flex-shrink:0}.fm-widget-advice__text{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#121212;margin:0;width:100%}.fm-widget-advice__action{width:100%}.fm-widget-calendar{display:flex;flex-direction:column;box-sizing:border-box}.fm-widget-calendar__days{display:flex;gap:4px;padding:16px;flex-wrap:nowrap}.fm-widget-calendar__day{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:9999px;background:#f7f7f8;gap:4px;padding-top:4px;padding-bottom:4px;position:relative}.fm-widget-calendar__day--active{background:#9076dc}.fm-widget-calendar__day-label{font-family:Nunito Sans,sans-serif;font-weight:300;font-size:14px;line-height:1.4;color:#4c4d58;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.fm-widget-calendar__day--active .fm-widget-calendar__day-label{color:#ffffffbf}.fm-widget-calendar__day-num{font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1.4;color:#121212;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:9999px}.fm-widget-calendar__day--active .fm-widget-calendar__day-num{color:#fff}.fm-widget-calendar__day-dot{display:block;width:4px;height:4px;border-radius:9999px;background:#9076dc;position:absolute;bottom:4px}.fm-widget-calendar__day--active .fm-widget-calendar__day-dot{background:#ffffffbf}.fm-widget-calendar__events{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px}.fm-widget-calendar__event{display:flex;gap:8px;align-items:stretch;opacity:.8}.fm-widget-calendar__event-bar{width:2px;border-radius:9999px;flex-shrink:0;background:#9076dc}.fm-widget-calendar__event-body{flex:1;background:#f7f7f8;border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:10px}.fm-widget-calendar__event-title{font-family:Nunito Sans,sans-serif;font-weight:700;font-size:14px;line-height:1.4;color:#121212}.fm-widget-calendar__event-time{font-family:Nunito Sans,sans-serif;font-weight:400;font-size:12px;line-height:1.2;color:#656565}.fm-search{display:flex;align-items:center;gap:8px;height:42px;padding:12px 16px;background:#f7f7f8;border-radius:12px;box-sizing:border-box;width:100%}.fm-search__icon{flex-shrink:0}.fm-search__input{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-search__input::placeholder{color:#91939f}.fm-dropdown{display:flex;flex-direction:column;background:#ffffff80;border:1px solid #eeeef0;border-radius:12px;box-shadow:4px 8px 15.1px #c9c1f1;padding:8px 0;width:280px;box-sizing:border-box;overflow:hidden}.fm-dropdown__item{display:flex;align-items:center;height:32px;padding:8px 16px;border:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:700;color:#18181b;text-align:left;cursor:pointer;width:100%;transition:background .1s;border-radius:8px}.fm-dropdown__item:hover{background:#f7f7f8}.fm-datepicker{display:flex;flex-direction:column;gap:8px;width:192px;box-sizing:border-box}.fm-datepicker__label{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;color:#5d5e6c;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fm-datepicker__field{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;background:#f7f7f8;border-radius:8px;border:0px solid transparent;box-sizing:border-box;transition:border .15s;position:relative}.fm-datepicker__input{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-datepicker__icon{display:inline-flex;align-items:center;color:#18181b;flex-shrink:0}.fm-datepicker__helper{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:400;color:#91939f;line-height:1.2;margin:0}.fm-datepicker--hover .fm-datepicker__field{border:1.5px solid #ffa8f1}.fm-datepicker--hover .fm-datepicker__label{color:#754ccc}.fm-datepicker--focused .fm-datepicker__field{border:1px solid #ffa8f1}.fm-datepicker--disabled .fm-datepicker__label{color:#d9d9de}.fm-datepicker--disabled .fm-datepicker__field{opacity:.5;cursor:not-allowed}.fm-datepicker--disabled .fm-datepicker__input{cursor:not-allowed;color:#d9d9de}.fm-datepicker--disabled .fm-datepicker__helper,.fm-datepicker--disabled .fm-datepicker__icon{color:#d9d9de}.fm-timepicker{display:flex;flex-direction:column;gap:8px;width:192px;box-sizing:border-box}.fm-timepicker__label{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;color:#41414b;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fm-timepicker__field{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;background:#f7f7f8;border-radius:8px;border:0px solid transparent;box-sizing:border-box;transition:border .15s}.fm-timepicker__input{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-timepicker__icon{display:inline-flex;align-items:center;color:#18181b;flex-shrink:0}.fm-timepicker__helper{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:400;color:#91939f;line-height:1.2;margin:0}.fm-timepicker--hover .fm-timepicker__field{border:1.5px solid #ffa8f1}.fm-timepicker--hover .fm-timepicker__label{color:#754ccc}.fm-timepicker--focused .fm-timepicker__field{border:1px solid #ffa8f1}.fm-timepicker--disabled .fm-timepicker__label{color:#d9d9de}.fm-timepicker--disabled .fm-timepicker__field{opacity:.5;cursor:not-allowed}.fm-timepicker--disabled .fm-timepicker__input{cursor:not-allowed;color:#d9d9de}.fm-timepicker--disabled .fm-timepicker__helper,.fm-timepicker--disabled .fm-timepicker__icon{color:#d9d9de}.fm-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.fm-radio__input{display:none}.fm-radio__circle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid #b8b9c1;background:#ffffff0d;box-sizing:border-box;flex-shrink:0;transition:border-color .15s}.fm-radio__circle--checked{border-color:#9076dc;border-width:1px;padding:5px}.fm-radio__dot{display:block;width:10px;height:10px;border-radius:50%;background:#9076dc;flex-shrink:0}.fm-radio:hover .fm-radio__circle:not(.fm-radio__circle--checked){border-color:#737584}.fm-radio__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-radio--disabled{cursor:not-allowed;opacity:.5}.fm-stepper{display:flex;align-items:flex-start;gap:0}.fm-stepper__step{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;width:85px}.fm-stepper__circle{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;box-sizing:border-box;flex-shrink:0}.fm-stepper__circle--done{background:#9076dc;padding:9px 7px}.fm-stepper__circle--in-process{background:#fff;border:1px solid rgba(144,118,220,.3)}.fm-stepper__circle--inactive{background:#fff;border:1px solid #eeeef0}.fm-stepper__num{font-family:Manrope,sans-serif;font-size:14px;font-weight:700;color:#18181b;line-height:.9}.fm-stepper__num--inactive{color:#b8b9c1}.fm-stepper__line{position:absolute;top:15px;left:calc(50% + 15px);width:60px;height:1px}.fm-stepper__line--done,.fm-stepper__line--in-process{background:#9076dc}.fm-stepper__line--inactive{background:#eeeef0}.fm-stepper__label{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;text-align:center;margin:0}.fm-stepper__label--done,.fm-stepper__label--in-process{color:#5d5e6c}.fm-stepper__label--inactive{color:#b8b9c1}.fm-stepper-progress{display:flex;align-items:flex-start}.fm-stepper-progress__step{display:flex;flex-direction:column;align-items:center;gap:10px;width:85px;position:relative}.fm-stepper-progress__circle{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9999px;background:#9076dc;flex-shrink:0}.fm-stepper-progress__line{position:absolute;top:14px;left:calc(50% + 16px);width:60px;height:1px;background:#eeeef0}.fm-stepper-progress__step--in-process .fm-stepper-progress__line,.fm-stepper-progress__step--done .fm-stepper-progress__line{background:#9076dc}.fm-stepper-progress__label{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;text-align:center;margin:0}.fm-stepper-progress__step--in-process .fm-stepper-progress__label{color:#5d5e6c}.fm-stepper-progress__step--inactive .fm-stepper-progress__label{color:#b8b9c1}.fm-stepper-progress__step--done .fm-stepper-progress__label{color:#5d5e6c}.fm-testimonial{display:flex;flex-direction:column;gap:24px;padding:32px 24px;border:1px solid #eeeef0;border-radius:20px;width:351px;box-sizing:border-box}.fm-testimonial__author{display:flex;align-items:center;gap:17px}.fm-testimonial__avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}.fm-testimonial__avatar--placeholder{display:flex;align-items:center;justify-content:center;background:#e0ddf7;color:#9076dc;font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700}.fm-testimonial__meta{display:flex;flex-direction:column;gap:10px}.fm-testimonial__name{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;color:#18181b;line-height:1.2;margin:0}.fm-testimonial__role{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:300;color:#18181b;line-height:1.2;margin:0}.fm-testimonial__quote{font-family:Nunito Sans,sans-serif;font-size:18px;font-weight:300;color:#18181b;line-height:1.12;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.fm-pricecard{display:flex;flex-direction:column;gap:32px;padding:24px;border-radius:20px;width:285px;box-sizing:border-box;position:relative;background:#fff;border:1px solid #eeeef0}.fm-pricecard--highlighted{background:#f7f7f8;border:none}.fm-pricecard__badge{position:absolute;top:21px;right:24px;background:#fff0d4;color:#c54e09;font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;padding:8px 12px;border-radius:9999px}.fm-pricecard__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#e0ddf7;border-radius:4px;flex-shrink:0;color:#9076dc;font-size:20px}.fm-pricecard__info{display:flex;flex-direction:column;gap:16px}.fm-pricecard__title{font-family:Manrope,sans-serif;font-size:20px;font-weight:600;color:#18181b;line-height:.9;margin:0}.fm-pricecard__desc{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:400;color:#4c4d58;line-height:1.4;margin:0;height:77px;overflow:hidden}.fm-pricecard__footer{display:flex;flex-direction:column;gap:16px}.fm-pricecard__price{display:flex;align-items:baseline;gap:4px}.fm-pricecard__amount{font-family:Manrope,sans-serif;font-size:40px;font-weight:700;color:#18181b;line-height:1.1}.fm-pricecard__period{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:600;color:#5d5e6c;line-height:normal}.fm-pricecard__action{width:100%}.fm-pricecard__action>*{width:100%}.fm-price{display:flex;flex-direction:column;gap:32px;padding:40px 32px;background:#f7f7f8;border:1px solid #eeeef0;border-radius:24px;width:351px;box-sizing:border-box}.fm-price__title{font-family:Manrope,sans-serif;font-size:18px;font-weight:700;color:#5d5e6c;line-height:.9;margin:0}.fm-price__amount-row{display:flex;align-items:baseline;gap:4px}.fm-price__amount{font-family:Manrope,sans-serif;font-size:40px;font-weight:700;color:#18181b;line-height:1.1}.fm-price__period{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:600;color:#5d5e6c;line-height:normal}.fm-price__cta{width:100%;height:42px;background:#121212;color:#fff;border:none;border-radius:12px;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}.fm-price__cta:hover{background:#2c2c2c}.fm-price__features{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0;margin:0}.fm-price__feature{display:flex;align-items:center;gap:16px}.fm-price__check{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#9076dc;border-radius:4px;flex-shrink:0;padding:3px;box-sizing:border-box}.fm-price__feature span{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-list-item{display:flex;align-items:center;gap:16px}.fm-list-item__check{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#9076dc;border-radius:4px;flex-shrink:0;padding:3px;box-sizing:border-box}.fm-list-item__text{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4}.fm-tag-big{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(144,118,220,.3);border-radius:48px;background:#ffffff0d;white-space:nowrap}.fm-tag-big__icon{display:flex;align-items:center;flex-shrink:0}.fm-tag-big__label{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;line-height:1.4;background:linear-gradient(90deg,#9076dc,#c87bf5,#ffa8f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.fm-section-title{display:flex}.fm-section-title--centered{flex-direction:column;align-items:center;gap:30px;text-align:center}.fm-section-title--left{flex-direction:column;align-items:flex-start;gap:24px}.fm-section-title--split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px}.fm-section-title--split .fm-section-title__left{display:flex;flex-direction:column;gap:20px;align-items:flex-start}.fm-section-title__heading{font-family:Manrope,sans-serif;font-size:45px;font-weight:700;color:#18181b;line-height:1.1;margin:0}.fm-section-title__subtitle{font-family:Nunito Sans,sans-serif;font-size:18px;font-weight:400;color:#4c4d58;line-height:1.4;margin:0}.fm-section-title--split .fm-section-title__subtitle{max-width:285px}.fm-dashboard-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%}.fm-dashboard-title__text{display:flex;flex-direction:column;gap:12px}.fm-dashboard-title__heading{font-family:Manrope,sans-serif;font-size:30px;font-weight:800;color:#121212;line-height:1.3;margin:0}.fm-dashboard-title__subtitle{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:600;color:#989898;line-height:normal;margin:0}.fm-dashboard-title__action{display:flex;align-items:center;gap:10px;height:42px;padding:10px 16px;background:#121212;color:#fff;border:none;border-radius:12px;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:700;cursor:pointer;flex-shrink:0;white-space:nowrap}.fm-dashboard-title__action:hover{background:#2c2c2c}.fm-process-step{display:flex;gap:24px;align-items:flex-start;max-width:100%;box-sizing:border-box}.fm-process-step__number{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:100px;flex-shrink:0;font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:600;line-height:normal}.fm-process-step--select .fm-process-step__number{background:#9076dc;color:#fff}.fm-process-step--normal .fm-process-step__number{background:#f7f7f8;color:#91939f}.fm-process-step__body{display:flex;flex-direction:column;gap:12px;flex:1}.fm-process-step__title{font-family:Manrope,sans-serif;font-size:24px;font-weight:700;color:#18181b;line-height:.9;margin:0}.fm-process-step__content{font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;margin:0}.fm-tasks-widget{display:flex;flex-direction:column;gap:8px;padding:16px;box-sizing:border-box}.fm-tasks-widget__row{display:flex;align-items:center;gap:10px;width:100%}.fm-tasks-widget__checkbox{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;background:#eeeef0;flex-shrink:0}.fm-tasks-widget__checkbox--done{background:#9076dc}.fm-tasks-widget__label{flex:1;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:400;color:#18181b;line-height:1.4;min-width:0}.fm-tasks-widget__label--done{text-decoration:line-through;color:#bdbdbd}.fm-tasks-widget__tag{flex-shrink:0;background:#eeeef0;color:#4c4d58;font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:700;line-height:1.2;padding:8px 12px;border-radius:9999px;white-space:nowrap}.fm-signup-form{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:20px;padding:10px 20px;max-width:100%;box-sizing:border-box;gap:12px}.fm-signup-form__input{flex:1;border:none;outline:none;background:transparent;font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:300;color:#18181b;line-height:1.4;min-width:0}.fm-signup-form__input::placeholder{color:#5d5e6c;font-weight:300}.fm-signup-form__btn{flex-shrink:0;height:42px;padding:10px 16px;background:#121212;color:#fff;border:none;border-radius:12px;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}.fm-signup-form__btn:hover{background:#2c2c2c}.fm-tariffs{display:flex;align-items:center;gap:20px;padding:20px;background:#fff;border:1px solid #eeeef0;border-radius:12px;max-width:100%;box-sizing:border-box;transition:border-color .15s}.fm-tariffs--hover{border-color:#ffa8f1}.fm-tariffs__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#e0ddf7;border-radius:4px;flex-shrink:0}.fm-tariffs__body{display:flex;flex-direction:column;gap:16px;flex:1}.fm-tariffs__title{font-family:Manrope,sans-serif;font-size:20px;font-weight:600;color:#18181b;line-height:.9;margin:0}.fm-tariffs__desc{font-family:Nunito Sans,sans-serif;font-size:12px;font-weight:300;color:#4c4d58;line-height:1.2;margin:0}.fm-question{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 16px;background:#fff;border:1px solid #eeeef0;border-radius:20px;max-width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s}.fm-question--hover{border-color:#ffa8f1}.fm-question--open{border-color:#ffa8f1;align-items:flex-start}.fm-question__content{display:flex;flex-direction:column;gap:20px;flex:1;min-width:0}.fm-question__title{font-family:Manrope,sans-serif;font-size:20px;font-weight:600;color:#121212;line-height:.9;margin:0}.fm-question__text{font-family:Nunito Sans,sans-serif;font-size:16px;font-weight:300;color:#121212;line-height:1.4;margin:0}.fm-question__icon{display:flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:9999px;background:#9076dc;flex-shrink:0;margin-top:2px}.fm-question__icon--open{background:#18181b}
@@ -14,29 +14,50 @@ Open `guidelines/components/{ComponentName}.md` BEFORE writing any code with tha
14
14
 
15
15
  ## Available components
16
16
 
17
- ### Primitives
17
+ ### Primitives & Inputs
18
18
  - `Button` → `guidelines/components/button.md`
19
19
  - `Input` → `guidelines/components/input.md`
20
- - `Tag` → `guidelines/components/tag.md`
20
+ - `Search` → `guidelines/components/search.md`
21
+ - `Dropdown` → `guidelines/components/dropdown.md`
22
+ - `DatePicker` → `guidelines/components/datepicker.md`
23
+ - `TimePicker` → `guidelines/components/timepicker.md`
24
+ - `RadioButton` → `guidelines/components/radiobutton.md`
21
25
  - `Toggle` → `guidelines/components/toggle.md`
22
26
  - `Checkbox` → `guidelines/components/checkbox.md`
27
+ - `Tag` → `guidelines/components/tag.md`
28
+ - `TagBig` → `guidelines/components/tagbig.md`
23
29
  - `IconButton` → `guidelines/components/iconbutton.md`
30
+ - `SignupForm` → `guidelines/components/signupform.md`
24
31
 
25
- ### Navigation
32
+ ### Navigation & Progress
26
33
  - `NavItem`, `NavBar` → `guidelines/components/navmenu.md`
27
34
  - `SegmentedControl` → `guidelines/components/segmentedcontrol.md`
28
35
  - `Pagination` → `guidelines/components/pagination.md`
36
+ - `Stepper` → `guidelines/components/stepper.md`
37
+ - `StepperProgress` → `guidelines/components/stepperprogress.md`
29
38
 
30
- ### Layout
39
+ ### Layout & Sections
31
40
  - `Header` → `guidelines/components/header.md`
32
41
  - `Footer` → `guidelines/components/footer.md`
42
+ - `DashboardTitle` → `guidelines/components/dashboardtitle.md`
43
+ - `SectionTitle` → `guidelines/components/sectiontitle.md`
44
+ - `ProcessStep` → `guidelines/components/processstep.md`
45
+ - `ListItem` → `guidelines/components/listitem.md`
33
46
 
34
47
  ### Cards
35
48
  - `CardTest` → `guidelines/components/cardtest.md`
36
49
  - `CardCareer` → `guidelines/components/cardcareer.md`
50
+ - `TestimonialCard` → `guidelines/components/testimonialcard.md`
51
+ - `PriceCard` → `guidelines/components/pricecard.md`
52
+ - `Price` → `guidelines/components/price.md`
53
+ - `Tariffs` → `guidelines/components/tariffs.md`
37
54
 
38
55
  ### Dashboard widgets
39
56
  - `WidgetCard`, `WidgetHeader`, `PlatformNewsWidget`, `GeneralNewsWidget`, `NotesWidget`, `PersonalAdviceWidget`, `CalendarWidget` → `guidelines/components/widgetcard.md`
57
+ - `TasksWidget` → `guidelines/components/taskswidget.md`
58
+
59
+ ### Interactive / FAQ
60
+ - `Question` → `guidelines/components/question.md`
40
61
 
41
62
  ## Rules
42
63
  1. **Always prefer FlowMakers components** over native HTML elements (e.g. use `<Button>` not `<button>`)
@@ -0,0 +1,49 @@
1
+ # DashboardTitle
2
+
3
+ Welcome header for authenticated dashboard pages. Shows a greeting, subtitle, and an optional CTA button.
4
+
5
+ ## Import
6
+ ```tsx
7
+ import { DashboardTitle } from '@tetjana/flowmakers-ds';
8
+ import '@tetjana/flowmakers-ds/styles';
9
+ ```
10
+
11
+ ## Props
12
+ | Prop | Type | Default | Description |
13
+ |------|------|---------|-------------|
14
+ | `title` | `string` | `'Привіт!'` | Main heading (user's greeting) |
15
+ | `subtitle` | `string` | `"Сьогодні чудовий день для кар'єрного зростання."` | Supporting subtitle text |
16
+ | `actionLabel` | `string` | `'Почати тренування'` | CTA button label |
17
+ | `showAction` | `boolean` | `true` | Whether to show the CTA button |
18
+ | `onAction` | `() => void` | — | CTA click handler |
19
+ | `className` | `string` | — | Extra CSS class |
20
+
21
+ ## Usage
22
+
23
+ ```tsx
24
+ // Basic greeting with CTA
25
+ <DashboardTitle
26
+ title="Привіт, Олено!"
27
+ subtitle="Ти на правильному шляху. Продовжуй!"
28
+ actionLabel="Продовжити навчання"
29
+ onAction={() => router.push('/learn')}
30
+ />
31
+
32
+ // Without CTA button
33
+ <DashboardTitle
34
+ title="Мій профіль"
35
+ subtitle="Керуй своїми даними та налаштуваннями"
36
+ showAction={false}
37
+ />
38
+ ```
39
+
40
+ ## Design
41
+ - Layout: `display: flex`, `justify-content: space-between`, `align-items: center`
42
+ - Heading (`<h1>`): Manrope Bold 28px, `#18181b`
43
+ - Subtitle: Nunito Sans Regular 16px, `#5d5e6c`
44
+ - CTA button: black background (`#18181b`), white text, `border-radius: 12px`, `padding: 10px 20px`, Nunito Sans SemiBold 14px
45
+
46
+ ## When to use
47
+ - Top of authenticated dashboard pages
48
+ - Profile and settings page headers
49
+ - Any page that benefits from a personalized greeting + single primary action
@@ -0,0 +1,59 @@
1
+ # DatePicker
2
+
3
+ Date input field with label, helper text, and visual states. Uses the native `<input type="date">` with a styled calendar icon overlay.
4
+
5
+ ## Import
6
+ ```tsx
7
+ import { DatePicker } from '@tetjana/flowmakers-ds';
8
+ import { type DatePickerState } from '@tetjana/flowmakers-ds';
9
+ import '@tetjana/flowmakers-ds/styles';
10
+ ```
11
+
12
+ ## Types
13
+
14
+ ```ts
15
+ type DatePickerState = 'default' | 'hover' | 'focused' | 'disabled';
16
+ ```
17
+
18
+ ## Props
19
+ | Prop | Type | Default | Description |
20
+ |------|------|---------|-------------|
21
+ | `label` | `string` | — | Label displayed above the field |
22
+ | `helperText` | `string` | — | Helper/error text displayed below the field |
23
+ | `state` | `DatePickerState` | `'default'` | Visual state of the field |
24
+ | `disabled` | `boolean` | — | Disables the input (also triggered by `state='disabled'`) |
25
+ | `className` | `string` | — | Extra CSS class on the wrapper |
26
+ | `...rest` | `InputHTMLAttributes<HTMLInputElement>` | — | All native `<input>` attributes (value, onChange, min, max, etc.) |
27
+
28
+ ## Usage
29
+
30
+ ```tsx
31
+ // Basic with label
32
+ <DatePicker label="Дата народження" />
33
+
34
+ // Controlled with helper text
35
+ <DatePicker
36
+ label="Дата початку"
37
+ helperText="Виберіть дату в межах поточного місяця"
38
+ value={date}
39
+ onChange={e => setDate(e.target.value)}
40
+ min="2024-01-01"
41
+ />
42
+
43
+ // Disabled
44
+ <DatePicker label="Дата закінчення" state="disabled" />
45
+ ```
46
+
47
+ ## Design
48
+ - Container: `display: flex`, `flex-direction: column`, `gap: 4px`
49
+ - Label: Nunito Sans SemiBold 14px, `#18181b`
50
+ - Field: `border: 1px solid #eeeef0`, `border-radius: 12px`, `padding: 10px 12px`, `height: 42px`
51
+ - Focused state: border-color `#9076dc`
52
+ - Disabled state: background `#f7f7f8`, opacity `0.6`
53
+ - Helper: Nunito Sans Regular 12px, `#91939f`
54
+ - Icon: `20×20px` calendar SVG, right-aligned
55
+
56
+ ## When to use
57
+ - Date of birth fields
58
+ - Scheduling / availability selection
59
+ - Filter forms with date ranges (pair two `DatePicker` fields)
@@ -0,0 +1,68 @@
1
+ # Dropdown
2
+
3
+ A list of selectable options rendered as a panel of buttons. Typically shown below a trigger element.
4
+
5
+ ## Import
6
+ ```tsx
7
+ import { Dropdown } from '@tetjana/flowmakers-ds';
8
+ import { type DropdownOption } from '@tetjana/flowmakers-ds';
9
+ import '@tetjana/flowmakers-ds/styles';
10
+ ```
11
+
12
+ ## Types
13
+
14
+ ```ts
15
+ interface DropdownOption {
16
+ value: string;
17
+ label: string;
18
+ }
19
+ ```
20
+
21
+ ## Props
22
+ | Prop | Type | Default | Description |
23
+ |------|------|---------|-------------|
24
+ | `options` | `DropdownOption[]` | `[]` | List of selectable items |
25
+ | `onSelect` | `(value: string) => void` | — | Fires when user clicks an option, passes `value` |
26
+ | `className` | `string` | — | Extra CSS class on the container |
27
+
28
+ ## Usage
29
+
30
+ ```tsx
31
+ const options = [
32
+ { value: 'junior', label: 'Junior' },
33
+ { value: 'middle', label: 'Middle' },
34
+ { value: 'senior', label: 'Senior' },
35
+ ];
36
+
37
+ const [level, setLevel] = useState('');
38
+
39
+ <Dropdown
40
+ options={options}
41
+ onSelect={value => setLevel(value)}
42
+ />
43
+ ```
44
+
45
+ ## Controlled visibility pattern
46
+
47
+ ```tsx
48
+ const [open, setOpen] = useState(false);
49
+
50
+ <div style={{ position: 'relative' }}>
51
+ <button onClick={() => setOpen(o => !o)}>Рівень ▾</button>
52
+ {open && (
53
+ <Dropdown
54
+ options={options}
55
+ onSelect={value => { setLevel(value); setOpen(false); }}
56
+ />
57
+ )}
58
+ </div>
59
+ ```
60
+
61
+ ## Design
62
+ - Container: `display: flex`, `flex-direction: column`, `background: #ffffff`, `border: 1px solid #eeeef0`, `border-radius: 12px`, `overflow: hidden`
63
+ - Item: `padding: 10px 16px`, Nunito Sans Regular 14px, `#18181b`, hover background `#f7f7f8`
64
+
65
+ ## When to use
66
+ - Select menus that need custom styling (not native `<select>`)
67
+ - Contextual action menus
68
+ - Filter dropdowns (combine with `Search`)
@@ -0,0 +1,40 @@
1
+ # ListItem
2
+
3
+ A single feature/benefit list item with a purple checkbox icon. Used inside feature lists, benefit sections, and as building blocks for `Price`.
4
+
5
+ ## Import
6
+ ```tsx
7
+ import { ListItem } from '@tetjana/flowmakers-ds';
8
+ import '@tetjana/flowmakers-ds/styles';
9
+ ```
10
+
11
+ ## Props
12
+ | Prop | Type | Required | Description |
13
+ |------|------|----------|-------------|
14
+ | `children` | `ReactNode` | ✅ | Item text content |
15
+ | `className` | `string` | — | Extra CSS class |
16
+
17
+ ## Usage
18
+
19
+ ```tsx
20
+ // Single item
21
+ <ListItem>Доступ до 3 тестів</ListItem>
22
+
23
+ // Feature list
24
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
25
+ <ListItem>AI-аналіз резюме</ListItem>
26
+ <ListItem>Персоналізовані рекомендації</ListItem>
27
+ <ListItem>Кар'єрна карта</ListItem>
28
+ <ListItem>Безлімітні тести</ListItem>
29
+ </div>
30
+ ```
31
+
32
+ ## Design
33
+ - Layout: `display: flex`, `align-items: center`, `gap: 16px`
34
+ - Checkbox: `24×24px`, `background: #9076dc`, `border-radius: 4px`, white check SVG inside, `padding: 3px`
35
+ - Text: Nunito Sans Regular 14px, `#18181b`, `line-height: 1.4`
36
+
37
+ ## When to use
38
+ - Feature checklists in pricing sections
39
+ - Benefit lists in landing page sections
40
+ - Note: `Price` already uses `ListItem` internally for its `features` array — use standalone `ListItem` when building custom layouts
@@ -0,0 +1,51 @@
1
+ # Price
2
+
3
+ Pricing plan card with title, amount, CTA button, and feature checklist. Used on pricing pages.
4
+
5
+ ## Import
6
+ ```tsx
7
+ import { Price } from '@tetjana/flowmakers-ds';
8
+ import '@tetjana/flowmakers-ds/styles';
9
+ ```
10
+
11
+ ## Props
12
+ | Prop | Type | Default | Description |
13
+ |------|------|---------|-------------|
14
+ | `title` | `string` | `'Базовий'` | Plan name |
15
+ | `amount` | `string` | `'₴0'` | Price display (e.g. `'₴499'`) |
16
+ | `period` | `string` | `'/місяць'` | Billing period label |
17
+ | `actionLabel` | `string` | `'Отримати'` | CTA button text |
18
+ | `onAction` | `() => void` | — | CTA click handler |
19
+ | `features` | `string[]` | `[]` | List of included features |
20
+ | `className` | `string` | — | Extra CSS class |
21
+
22
+ ## Usage
23
+
24
+ ```tsx
25
+ <Price
26
+ title="Базовий"
27
+ amount="₴0"
28
+ period="/місяць"
29
+ actionLabel="Отримати безкоштовно"
30
+ features={[
31
+ 'Доступ до 3 тестів',
32
+ 'Кар\'єрна карта',
33
+ 'AI-рекомендації',
34
+ ]}
35
+ onAction={() => router.push('/signup')}
36
+ />
37
+ ```
38
+
39
+ ## Design
40
+ - Container: `width: 351px`, `background: #f7f7f8`, `border: 1px solid #eeeef0`, `border-radius: 24px`, `padding: 40px 32px`, `gap: 32px`
41
+ - Title: Manrope Bold 18px, `#5d5e6c`
42
+ - Amount: Manrope Bold 40px, `#18181b`
43
+ - Period: Nunito Sans SemiBold 16px, `#5d5e6c`
44
+ - CTA button: full-width, black bg, white text, `height: 42px`, `border-radius: 12px`
45
+ - Feature icon: `24×24px`, purple bg (`#9076dc`), white check, `border-radius: 4px`
46
+ - Feature text: Nunito Sans Regular 14px, `#18181b`
47
+
48
+ ## When to use
49
+ - Pricing pages (compare 2–4 plans side by side)
50
+ - Subscription selection UI
51
+ - Use `PriceCard` for a simpler variant without the feature list
@@ -0,0 +1,35 @@
1
+ # PriceCard
2
+
3
+ Simple pricing card with title, price, and CTA. A lighter alternative to `Price` (no feature list).
4
+
5
+ ## Import
6
+ ```tsx
7
+ import { PriceCard } from '@tetjana/flowmakers-ds';
8
+ import '@tetjana/flowmakers-ds/styles';
9
+ ```
10
+
11
+ ## Props
12
+ | Prop | Type | Default | Description |
13
+ |------|------|---------|-------------|
14
+ | `title` | `string` | `'Базовий'` | Plan name |
15
+ | `price` | `string` | `'₴0'` | Price text |
16
+ | `period` | `string` | `'/місяць'` | Billing period |
17
+ | `description` | `string` | — | Short plan description |
18
+ | `actionLabel` | `string` | `'Обрати'` | CTA button label |
19
+ | `highlighted` | `boolean` | `false` | Purple highlighted variant |
20
+ | `onAction` | `() => void` | — | CTA click handler |
21
+ | `className` | `string` | — | Extra CSS class |
22
+
23
+ ## Usage
24
+
25
+ ```tsx
26
+ // Standard card
27
+ <PriceCard title="Базовий" price="₴0" period="/місяць" actionLabel="Почати" />
28
+
29
+ // Highlighted (recommended) card
30
+ <PriceCard title="Про" price="₴499" highlighted actionLabel="Обрати план" />
31
+ ```
32
+
33
+ ## When to use
34
+ - Use `PriceCard` when you only need title + price + CTA
35
+ - Use `Price` when you also need a feature checklist
@@ -0,0 +1,70 @@
1
+ # ProcessStep
2
+
3
+ A numbered "how it works" step card with a title and description. Used in process/steps sections on landing pages.
4
+
5
+ ## Import
6
+ ```tsx
7
+ import { ProcessStep } from '@tetjana/flowmakers-ds';
8
+ import { type ProcessStepStyle } from '@tetjana/flowmakers-ds';
9
+ import '@tetjana/flowmakers-ds/styles';
10
+ ```
11
+
12
+ ## Types
13
+
14
+ ```ts
15
+ type ProcessStepStyle = 'select' | 'normal';
16
+ ```
17
+
18
+ ## Props
19
+ | Prop | Type | Default | Description |
20
+ |------|------|---------|-------------|
21
+ | `number` | `number \| string` | `1` | Step number displayed in the circle |
22
+ | `title` | `string` | `'Пройди тестування'` | Step heading |
23
+ | `content` | `string` | `'АІ аналізує твої навички, інтерес та досвід'` | Step description |
24
+ | `style` | `ProcessStepStyle` | `'select'` | Visual style variant |
25
+ | `className` | `string` | — | Extra CSS class |
26
+
27
+ ## Usage
28
+
29
+ ```tsx
30
+ // Default style ('select') — purple number badge
31
+ <ProcessStep
32
+ number={1}
33
+ title="Пройди тестування"
34
+ content="AI аналізує твої навички та інтереси"
35
+ />
36
+
37
+ // Normal style — outlined number badge
38
+ <ProcessStep
39
+ number={2}
40
+ title="Отримай рекомендації"
41
+ content="Персоналізований список вакансій та курсів"
42
+ style="normal"
43
+ />
44
+
45
+ // Full process section
46
+ {[
47
+ { n: 1, title: 'Реєстрація', content: 'Створи обліковий запис за 1 хвилину' },
48
+ { n: 2, title: 'Тестування', content: 'AI оцінює твої компетенції' },
49
+ { n: 3, title: 'Результати', content: 'Отримуй персоналізовані рекомендації' },
50
+ ].map(s => (
51
+ <ProcessStep key={s.n} number={s.n} title={s.title} content={s.content} />
52
+ ))}
53
+ ```
54
+
55
+ ## Styles
56
+
57
+ | Style | Number badge |
58
+ |-------|-------------|
59
+ | `select` | Filled purple (`#9076dc`), white number |
60
+ | `normal` | White background, `#18181b` border, dark number |
61
+
62
+ ## Design
63
+ - Layout: `display: flex`, `align-items: flex-start`, `gap: 16px`
64
+ - Number circle: `40×40px`, `border-radius: 50%`, Manrope Bold 18px
65
+ - Title: Manrope SemiBold 18px, `#18181b`
66
+ - Content: Nunito Sans Regular 14px, `#5d5e6c`, `line-height: 1.5`
67
+
68
+ ## When to use
69
+ - "How it works" sections (3–5 steps in a row or grid)
70
+ - Onboarding flow explanations on marketing pages