@font-face {
  font-family: 'Inter Display';
  font-style: italic;
  font-weight: 700;
  src: url('https://cdn.folloze.com/theme/dd2bc33af239b1d9_InterDisplayBoldItalic.otf');
}

@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 700;
  src: url('https://cdn.folloze.com/theme/5d46a95cbcd0cf63_InterDisplayBold.otf');
}

@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 300;
  src: url('https://cdn.folloze.com/theme/6a399e6357fdf4e7_InterDisplayLight.otf');
}

@font-face {
  font-family: 'Inter Display';
  font-style: italic;
  font-weight: 400;
  src: url('https://cdn.folloze.com/theme/a9b95cbf3417c5f8_InterDisplayRegularItalic.otf');
}

@font-face {
  font-family: 'Inter Display';
  font-style: italic;
  font-weight: 300;
  src: url('https://cdn.folloze.com/theme/f320d67e6fb69741_InterDisplayLightItalic.otf');
}

@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.folloze.com/theme/53008a72bac690bc_InterDisplayRegular.otf');
}


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.folloze.com/theme/f061efd3d289976f_InterItalic.otf');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('https://cdn.folloze.com/theme/8b2c9934f6ea4abd_InterLight.otf');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('https://cdn.folloze.com/theme/3eda3ea7d92059da_InterBold.otf');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  src: url('https://cdn.folloze.com/theme/71209be2aefe2a69_InterLightItalic.otf');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  src: url('https://cdn.folloze.com/theme/341e79fe346fd9c7_InterBoldItalic.otf');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('https://cdn.folloze.com/theme/74ac24ad5a074bb4_InterRegular.otf');
}




@font-face {
  font-family: 'Inter Display';
  font-style: italic;
  font-weight: 700;
  src: url('https://cdn.folloze.com/theme/dd2bc33af239b1d9_InterDisplayBoldItalic.otf');
}

@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 700;
  src: url('https://cdn.folloze.com/theme/5d46a95cbcd0cf63_InterDisplayBold.otf');
}

@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 300;
  src: url('https://cdn.folloze.com/theme/6a399e6357fdf4e7_InterDisplayLight.otf');
}

@font-face {
  font-family: 'Inter Display';
  font-style: italic;
  font-weight: 400;
  src: url('https://cdn.folloze.com/theme/a9b95cbf3417c5f8_InterDisplayRegularItalic.otf');
}

@font-face {
  font-family: 'Inter Display';
  font-style: italic;
  font-weight: 300;
  src: url('https://cdn.folloze.com/theme/f320d67e6fb69741_InterDisplayLightItalic.otf');
}

@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.folloze.com/theme/53008a72bac690bc_InterDisplayRegular.otf');
}


@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('https://cdn.folloze.com/theme/f061efd3d289976f_InterItalic.otf');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('https://cdn.folloze.com/theme/8b2c9934f6ea4abd_InterLight.otf');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('https://cdn.folloze.com/theme/3eda3ea7d92059da_InterBold.otf');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  src: url('https://cdn.folloze.com/theme/71209be2aefe2a69_InterLightItalic.otf');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  src: url('https://cdn.folloze.com/theme/341e79fe346fd9c7_InterBoldItalic.otf');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.folloze.com/theme/74ac24ad5a074bb4_InterRegular.otf');
}


html {
  font-size: 16px !important;
}
.modal-is-opened {
  overflow: hidden !important;
}
:root,
:host,
.code-block__preview {
  /************************************************
    ================ color palette ==================
    ************************************************/

  --sx-col-base-white: #fff;
  --sx-col-base-black: #000;
  --sx-col-neutral-1: #F6F6F6;
  --sx-col-neutral-2: #F0F0F0;
  --sx-col-neutral-3: #D1D1D1;
  --sx-col-neutral-4: #858585;
  --sx-col-neutral-5: #666;
  --sx-col-neutral-6: #292929;
  --sx-col-neutral-7: #1F1F1F;
  --sx-col-tinted-gray-1: #F6F6F9;
  --sx-col-tinted-gray-2: #F0F0F4;
  --sx-col-tinted-gray-3: #E4E4EF;
  --sx-col-tinted-gray-4: #C9C9DF;
  --sx-col-tinted-gray-5: #D1D1E0;
  --sx-col-tinted-gray-6: #8585AD;
  --sx-col-tinted-gray-7: #666699;
  --sx-col-tinted-gray-8: #292956;
  --sx-col-tinted-gray-9: #1F1F47;
  --sx-col-tinted-gray-10: #151537;
  --sx-col-red-1: #F7ADD2;
  --sx-col-red-2: #E05A9D;
  --sx-col-red-3: #CC2370;
  --sx-col-red-4: #A32162;
  --sx-col-red-5: #6D1847;
  --sx-col-orange-1: #F4CDB3;
  --sx-col-orange-2: #E29969;
  --sx-col-orange-3: #D67534;
  --sx-col-orange-4: #A05828;
  --sx-col-orange-5: #60361A;
  --sx-col-yellow-1: #F2E8B1;
  --sx-col-yellow-2: #F2E8B1;
  --sx-col-yellow-3: #E5CB30;
  --sx-col-yellow-4: #AD972A;
  --sx-col-yellow-5: #75641D;
  --sx-col-green-1: #B6F2D1;
  --sx-col-green-2: #90D6AF;
  --sx-col-green-3: #1EBC69;
  --sx-col-green-4: #1B8E4F;
  --sx-col-green-5: #156035;
  --sx-col-blue-1: #CAEBF2;
  --sx-col-blue-2: #99D9E5;
  --sx-col-blue-3: #48BAD1;
  --sx-col-blue-4: #36888E;
  --sx-col-blue-5: #205256;
  --sx-col-indigo-1: #C0D2F2;
  --sx-col-indigo-2: #739AD8;
  --sx-col-indigo-3: #3366CC;
  --sx-col-indigo-4: #204080;
  --sx-col-indigo-5: #13264D;
  --sx-col-purple-0: #EBDEF7;
  --sx-col-purple-1: #DEC0F2;
  --sx-col-purple-2: #C270F2;
  --sx-col-purple-3: #9933CC;
  --sx-col-purple-4: #6F3499;
  --sx-col-purple-5: #41205E;
  --sx-col-pink-1: #F8C5F9;
  --sx-col-pink-2: #EC81EF;
  --sx-col-pink-3: #CC33CC;
  --sx-col-pink-4: #A52CA8;
  --sx-col-pink-5: #4D1951;

  --sx-col-primary-1: var(--sx-col-indigo-5);
  --sx-col-primary-2: var(--sx-col-base-white);
  --sx-col-accent-1: var(--sx-col-purple-4);
  --sx-col-accent-2: var(--sx-col-pink-3);
  --sx-col-accent-3: var(--sx-col-indigo-4);
  --sx-col-accent-4: var(--sx-col-indigo-3);
  --sx-col-accent-5: var(--sx-col-blue-3);
  --sx-col-accent-6: var(--sx-col-pink-2);
  --sx-col-accent-7: var(--sx-col-purple-0);
  --sx-col-accent-8: 0;
  --sx-col-accent-9: var(--sx-col-tinted-gray-9);
  --sx-col-accent-10: var(--sx-col-tinted-gray-10);

  /*primary [fz-start colors>primary|--fz-color] */
  --fz-color-primary-1: var(--sx-col-primary-2); /*mandatory update - should be lightest*/
  --fz-color-primary-2: unset; /*mandatory update*/
  --fz-color-primary-3: var(--sx-col-primary-1); /*mandatory update - main brand color*/
  --fz-color-primary-4: unset; /*mandatory update*/
  --fz-color-primary-5: unset; /*mandatory update - should be darkest*/
  --fz-color-primary-6: unset;
  --fz-color-primary-7: unset;
  --fz-color-primary-8: unset;
  --fz-color-primary-9: unset;
  --fz-color-primary-10: unset;
  /*[fz-end]*/

  /*secondary [fz-start colors>secondary|--fz-color-] */
  --fz-color-secondary-1: var(--sx-col-accent-1); /*mandatory update - can be unset*/
  --fz-color-secondary-2: var(--sx-col-accent-2); /*mandatory update - can be unset*/
  --fz-color-secondary-3: var(--sx-col-accent-3); /*mandatory update - can be unset*/
  --fz-color-secondary-4: var(--sx-col-accent-4); /*mandatory update - can be unset*/
  --fz-color-secondary-5: var(--sx-col-accent-5); /*mandatory update - can be unset*/
  --fz-color-secondary-6: var(--sx-col-accent-6);
  --fz-color-secondary-7: var(--sx-col-accent-7);
  --fz-color-secondary-8: var(--sx-col-accent-8);
  --fz-color-secondary-8: unset;
  --fz-color-secondary-9: var(--sx-col-accent-9);
  --fz-color-secondary-10: var(--sx-col-accent-10);
  /*[fz-end]*/

  /* tertiary [fz-start colors>tertiary|--fz-color-] */
  --fz-color-tertiary-1: unset;
  --fz-color-tertiary-2: unset;
  --fz-color-tertiary-3: unset;
  --fz-color-tertiary-4: unset;
  --fz-color-tertiary-5: unset;
  --fz-color-tertiary-6: unset;
  --fz-color-tertiary-7: unset;
  --fz-color-tertiary-8: unset;
  --fz-color-tertiary-9: unset;
  --fz-color-tertiary-10: unset;
  /*[fz-end]*/

  /*neutral - best if greyscale gradient*/
  /* [fz-start colors>neutral|--fz-color-] */
  --fz-color-neutral-1: var(--sx-col-tinted-gray-1); /*mandatory best as lightest grey/white*/
  --fz-color-neutral-2: var(--sx-col-tinted-gray-2); /*mandatory*/
  --fz-color-neutral-3: var(--sx-col-tinted-gray-3); /*mandatory best as medium grey*/
  --fz-color-neutral-4: var(--sx-col-tinted-gray-4); /*mandatory*/
  --fz-color-neutral-5: var(--sx-col-tinted-gray-5); /* mandatory best as darkest grey/black*/
  --fz-color-neutral-6: var(--sx-col-tinted-gray-6);
  --fz-color-neutral-7: var(--sx-col-tinted-gray-7);
  --fz-color-neutral-8: var(--sx-col-tinted-gray-8);
  --fz-color-neutral-9: var(--sx-col-tinted-gray-9);
  --fz-color-neutral-10: var(--sx-col-tinted-gray-10);
  /*[fz-end]*/

  /* Neutral one-offs */
  /* [fz-start colors>neutral|--fz-color-neutral-] */
  --fz-color-neutral-0: rgb(255, 255, 255); /*always white*/
  --fz-color-neutral-1000: rgb(0, 0, 0); /*always black*/
  --fz-color-neutral-text-0: var(--fz-color-neutral-0); /*always white*/
  --fz-color-neutral-text-1000: var(--fz-color-neutral-1000); /*always black*/
  /*[fz-end]*/

  /* Success [fz-start colors>success|--fz-color] */
  --fz-color-success-1: var(--sx-col-green-1); /* not editable */
  --fz-color-success-2: var(--sx-col-green-2); /* not editable */
  --fz-color-success-3: var(--sx-col-green-3); /* not editable */
  --fz-color-success-4: var(--sx-col-green-4); /* not editable */
  --fz-color-success-5: var(--sx-col-green-5); /* not editable */
  /*[fz-end]*/

  /* Warning */
  --fz-color-warning-1: var(--sx-col-orange-1); /* not editable */
  --fz-color-warning-2: var(--sx-col-orange-2); /* not editable */
  --fz-color-warning-3: var(--sx-col-orange-3); /* not editable */
  --fz-color-warning-4: var(--sx-col-orange-4); /* not editable */
  --fz-color-warning-5: var(--sx-col-orange-5); /* not editable */

  /* Danger */
  --fz-color-danger-1: var(--sx-col-red-1); /* not editable */
  --fz-color-danger-2: var(--sx-col-red-2); /* not editable */
  --fz-color-danger-3: var(--sx-col-red-3); /* not editable */
  --fz-color-danger-4: var(--sx-col-red-4); /* not editable */
  --fz-color-danger-5: var(--sx-col-red-5); /* not editable */

  /* Info */
  --fz-color-info-1: var(--sx-col-blue-1); /* not editable */
  --fz-color-info-2: var(--sx-col-blue-2); /* not editable */
  --fz-color-info-3: var(--sx-col-blue-3); /* not editable */
  --fz-color-info-4: var(--sx-col-blue-4); /* not editable */
  --fz-color-info-5: var(--sx-col-blue-5); /* not editable */

  /* Spacings */
  --fz-spacing-5x-small: 0.125rem; /* 2px */
  --fz-spacing-4x-small: 0.25rem; /* 4px */
  --fz-spacing-3x-small: 0.375rem; /* 6px */
  --fz-spacing-2x-small: 0.5rem; /* 8px */
  --fz-spacing-1x-small: 0.625rem; /* 10px */
  --fz-spacing-x-small: 0.75rem; /* 12px */
  --fz-spacing-small: 1rem; /* 16px */
  --fz-spacing-medium: 1.25rem; /* 20px */
  --fz-spacing-large: 1.5rem; /* 24px */
  --fz-spacing-x-large: 2rem; /* 32px */
  --fz-spacing-2x-large: 2.5rem; /* 40px */
  --fz-spacing-3x-large: 3rem; /* 48px */
  --fz-spacing-4x-large: 3.5rem; /* 56px */
  --fz-spacing-5x-large: 4rem; /* 64px */
  --fz-spacing-6x-large: 5rem; /* 80px */
  --fz-spacing-7x-large: 6rem; /* 96px */

  --fz-widget-header-margin-bottom: var(--fz-spacing-5x-large);

  /* Weights */
  --fz-weight-thin: 100; /* not editable */
  --fz-weight-light: 300; /* not editable */
  --fz-weight-regular: 400; /* not editable */
  --fz-weight-medium: 500; /* not editable */
  --fz-weight-semi-bold: 600; /* not editable */
  --fz-weight-bold: 700; /* not editable */
  --fz-weight-extra-bold: 800; /* not editable */
  /************************************************
    ===================== Globals ===================
    ************************************************/
  /* Global animations */
  --fz-animation-1-play-state: paused;
  --fz-animation-1-name: fadeInDown;
  --fz-animation-1-duration: 710ms;
  --fz-animation-1-delay: 200ms;
  --fz-animation-1-fill-mode: both;

  --fz-animation-2-duration: 300ms;
  --fz-animation-2-name: zoomOut;
  --fz-animation-2-name-hover: zoomIn;
  --fz-animation-2-delay: 0s;
  --fz-animation-2-fill-mode: both;
  --fz-animation-2-play-state: running;

  --fz-animation-3-duration: 300ms;
  --fz-animation-3-name: miniZoomOut;
  --fz-animation-3-name-hover: miniZoomIn;
  --fz-animation-3-delay: 0s;
  --fz-animation-3-fill-mode: both;
  --fz-animation-3-play-state: running;

  /* Global shadows */
  --fz-shadow-none: none; /* only for drop down selection */
  --fz-shadow-x-small: 0px 1px 2px rgba(17, 24, 39, 0.06),
    0px 1px 3px rgba(17, 24, 39, 0.1);
  --fz-shadow-small: 0px 2px 4px rgba(17, 24, 39, 0.06),
    0px 4px 6px rgba(17, 24, 39, 0.1);
  --fz-shadow-medium: 0px 10px 15px rgba(17, 24, 39, 0.1),
    0px 4px 6px rgba(17, 24, 39, 0.05);
  --fz-shadow-large: 0px 20px 25px rgba(17, 24, 39, 0.1),
    0px 10px 10px rgba(17, 24, 39, 0.04);
  --fz-shadow-x-large: 0px 25px 50px rgba(17, 24, 39, 0.25);
  --fz-shadow-x-small-top: 0px -1px 2px rgba(17, 24, 39, 0.06),
    0px -1px 3px rgba(17, 24, 39, 0.1);
  --fz-shadow-medium-top: 0px -10px 15px rgba(17, 24, 39, 0.1),
    0px -4px 6px rgba(17, 24, 39, 0.05);

  /* Global link colors */
  --fz-link-color: var(--sx-col-accent-2);
  --fz-link-color-hover: var(--sx-col-accent-1);
  --fz-link-color-visited: var(--fz-link-color);
  --fz-link-color-actived: var(--fz-link-color);
  --fz-link-decoration: none;
  --fz-link-decoration-hover: underline;

  /* Global Border radius sizes */
  --fz-border-radius-none: 0;
  --fz-border-radius-x-small: 2px;
  --fz-border-radius-small: 4px;
  --fz-border-radius-medium: 6px;
  --fz-border-radius-large: 10px;
  --fz-border-radius-x-large: 14px;
  --fz-border-radius-circle: 50%;
  --fz-border-radius-pill: 9999px;

  /* Fonts */
  /*font family*/
  --fz-font-family-1: "Inter Display", sans-serif; /*mandatory update*/
  --fz-font-family-2: "Inter", sans-serif; /*mandatory update*/
  --fz-font-family-3: "Inter", sans-serif; /*mandatory update*/

  /* this will change all spacing in the page (i.e) */
  --fz-base-font-size: 16px; /* not editable */

  /************************************************
    ===================== headings ==================
    ************************************************/
  /* global headings */
  --fz-heading-1-font-size-factor: 1;
  --fz-heading-1-line-height-factor: 1;
  --fz-heading-1-letter-spacing-factor: 1;

  --fz-heading-2-font-size-factor: 1;
  --fz-heading-2-line-height-factor: 1;
  --fz-heading-2-letter-spacing-factor: 1;

  --fz-heading-3-font-size-factor: 1;
  --fz-heading-3-line-height-factor: 1;
  --fz-heading-3-letter-spacing-factor: 1;

  --fz-heading-4-font-size-factor: 1;
  --fz-heading-4-line-height-factor: 1;
  --fz-heading-4-letter-spacing-factor: 1;

  --fz-heading-5-font-size-factor: 1;
  --fz-heading-5-line-height-factor: 1;
  --fz-heading-5-letter-spacing-factor: 1;

  --fz-heading-6-font-size-factor: 1;
  --fz-heading-6-line-height-factor: 1;
  --fz-heading-6-letter-spacing-factor: 1;

  --fz-paragraph-1-font-size-factor: 1;
  --fz-paragraph-1-line-height-factor: 1;
  --fz-paragraph-1-letter-spacing-factor: 1;

  --fz-paragraph-2-font-size-factor: 1;
  --fz-paragraph-2-line-height-factor: 1;
  --fz-paragraph-2-letter-spacing-factor: 1;

  --fz-paragraph-3-font-size-factor: 1;
  --fz-paragraph-3-line-height-factor: 1;
  --fz-paragraph-3-letter-spacing-factor: 1;

  --fz-system-text-1-font-size-factor: 1;
  --fz-system-text-1-line-height-factor: 1;
  --fz-system-text-1-letter-spacing-factor: 1;

  /*text styles*/
  --fz-heading-1-color: var(--fz-color-primary-1);
  --fz-heading-1-weight: var(--fz-weight-bold);
  --fz-heading-1-font-family: var(--fz-font-family-1);
  --fz-heading-1-font-size: calc(5rem * var(--fz-heading-1-font-size-factor)); /* 80px */
  --fz-heading-1-line-height: calc(1.125 * var(--fz-heading-1-line-height-factor)); /* 90px */
  --fz-heading-1-letter-spacing: calc(-0.03em * var(--fz-heading-1-letter-spacing-factor));

  --fz-heading-2-color: var(--fz-color-primary-3);
  --fz-heading-2-weight: var(--fz-weight-bold);
  --fz-heading-2-font-family: var(--fz-font-family-1);
  --fz-heading-2-font-size: calc(3rem * var(--fz-heading-2-font-size-factor)); /* 48px */
  --fz-heading-2-line-height: calc(1.1667 * var(--fz-heading-2-line-height-factor)); /* 56px */
  --fz-heading-2-letter-spacing: calc(-0.03em * var(--fz-heading-2-letter-spacing-factor));

  --fz-heading-3-color: var(--fz-color-primary-3);
  --fz-heading-3-weight: var(--fz-weight-bold);
  --fz-heading-3-font-family: var(--fz-font-family-1);
  --fz-heading-3-font-size: calc(2.625rem * var(--fz-heading-3-font-size-factor)); /* 42px */
  --fz-heading-3-line-height: calc(1.19 * var(--fz-heading-3-line-height-factor)); /* 50px */
  --fz-heading-3-letter-spacing: calc(0em * var(--fz-heading-3-letter-spacing-factor));

  --fz-heading-4-color: var(--fz-color-primary-3);
  --fz-heading-4-weight: var(--fz-weight-bold);
  --fz-heading-4-font-family: var(--fz-font-family-1);
  --fz-heading-4-font-size: calc(2.25rem * var(--fz-heading-4-font-size-factor)); /* 36px */
  --fz-heading-4-line-height: calc(1.25 * var(--fz-heading-4-line-height-factor)); /* 45px */
  --fz-heading-4-letter-spacing: calc(0em * var(--fz-heading-4-letter-spacing-factor));

  --fz-heading-5-color: var(--fz-color-primary-3);
  --fz-heading-5-weight: var(--fz-weight-bold);
  --fz-heading-5-font-family: var(--fz-font-family-1);
  --fz-heading-5-font-size: calc(1.5rem * var(--fz-heading-5-font-size-factor)); /* 24px */
  --fz-heading-5-line-height: calc(1.333 * var(--fz-heading-5-line-height-factor)); /* 32px */
  --fz-heading-5-letter-spacing: calc(0em * var(--fz-heading-5-letter-spacing-factor));

  --fz-heading-6-color: var(--fz-color-primary-3);
  --fz-heading-6-weight: var(--fz-weight-bold);
  --fz-heading-6-font-family: var(--fz-font-family-1);
  --fz-heading-6-font-size: calc(1.25rem * var(--fz-heading-6-font-size-factor)); /* 20px */
  --fz-heading-6-line-height: calc(1.5 * var(--fz-heading-6-line-height-factor)); /* 30px */
  --fz-heading-6-letter-spacing: calc(0em * var(--fz-heading-6-letter-spacing-factor));

  --fz-paragraph-1-color: var(--fz-color-neutral-9);
  --fz-paragraph-1-weight: var(--fz-weight-regular);
  --fz-paragraph-1-font-family: var(--fz-font-family-2);
  --fz-paragraph-1-font-size: calc(1.125rem * var(--fz-paragraph-1-font-size-factor)); /* 18px */
  --fz-paragraph-1-line-height: calc(1.556 * var(--fz-paragraph-1-line-height-factor)); /* 28px */
  --fz-paragraph-1-letter-spacing: calc(0em * var(--fz-paragraph-1-letter-spacing-factor));

  --edit-fz-paragraph-1-font-family: var(--fz-paragraph-1-font-family);
  --edit-fz-paragraph-1-weight: var(--fz-paragraph-1-weight);
  --edit-fz-paragraph-1-font-size: var(--fz-paragraph-1-font-size);
  --edit-fz-paragraph-1-line-height: var(--fz-paragraph-1-line-height);

  --fz-paragraph-2-color: var(--fz-color-neutral-9);
  --fz-paragraph-2-weight: var(--fz-weight-regular);
  --fz-paragraph-2-font-family: var(--fz-font-family-2);
  --fz-paragraph-2-font-size: calc(1rem * var(--fz-paragraph-2-font-size-factor)); /* 16px */
  --fz-paragraph-2-line-height: calc(1.5 * var(--fz-paragraph-2-line-height-factor)); /* 24px */
  --fz-paragraph-2-letter-spacing: calc(0em * var(--fz-paragraph-2-letter-spacing-factor));

  --edit-fz-paragraph-2-font-family: var(--fz-paragraph-2-font-family);
  --edit-fz-paragraph-2-weight: var(--fz-paragraph-2-weight);
  --edit-fz-paragraph-2-font-size: var(--fz-paragraph-2-font-size);
  --edit-fz-paragraph-2-line-height: var(--fz-paragraph-2-line-height);

  --fz-paragraph-3-color: var(--fz-color-neutral-9);
  --fz-paragraph-3-weight: var(--fz-weight-regular);
  --fz-paragraph-3-font-family: var(--fz-font-family-2);
  --fz-paragraph-3-font-size: calc(0.875rem * var(--fz-paragraph-3-font-size-factor)); /* 14px */
  --fz-paragraph-3-line-height: calc(1.667 * var(--fz-paragraph-3-line-height-factor)); /* 20px */
  --fz-paragraph-3-letter-spacing: calc(0.03em * var(--fz-paragraph-3-letter-spacing-factor));

  --edit-fz-paragraph-3-font-family: var(--fz-paragraph-3-font-family);
  --edit-fz-paragraph-3-weight: var(--fz-paragraph-3-weight);
  --edit-fz-paragraph-3-font-size: var(--fz-paragraph-3-font-size);
  --edit-fz-paragraph-3-line-height: var(--fz-paragraph-3-line-height);

  --fz-system-text-1-color: var(--fz-color-neutral-9);
  --fz-system-text-1-weight: var(--fz-weight-regular);
  --fz-system-text-1-font-family: var(--fz-font-family-2);
  --fz-system-text-1-font-size: calc(0.75rem * var(--fz-system-text-1-font-size-factor)); /* 12px */
  --fz-system-text-1-line-height: calc(2 * var(--fz-system-text-1-line-height-factor)); /* 24px */
  --fz-system-text-1-letter-spacing: calc(0.03em * var(--fz-system-text-1-letter-spacing-factor));

  /************************************************
    ===================== Buttons ===================
    ************************************************/
  /* global for buttons [fz-start buttons>global|--fz-btn-global]*/
  --fz-btn-global-font-family: var(--fz-font-family-2);
  --fz-btn-global-font-size: var(--fz-base-font-size); /* not editable - changes per button size*/
  --fz-btn-global-weight: 700; /* bold - not editable */
  --fz-btn-global-line-height: 1em; /* not editable */
  --fz-btn-global-letter-spacing: normal; /* not editable */
  --fz-btn-global-padding: 1.8em 2em; /* not editable */
  --fz-btn-global-text-color-0: var(--fz-color-neutral-0); /* default is white */
  --fz-btn-global-disabled-bg: rgb(243, 244, 246); /* not editable */
  --fz-btn-global-disabled-color: rgb(209, 213, 219); /* not editable */
  --fz-btn-global-disabled-border-color: var(--fz-btn-global-disabled-bg); /* not editable */
  --fz-btn-global-animation-transition: background 200ms ease-in-out; /* not editable */
  --fz-btn-global-focus-bg: var(--fz-color-primary-3); /* not editable */
  --fz-btn-global-focus-color: var(--fz-color-neutral-0); /* not editable */
  --fz-btn-global-focus-border-color: var(--fz-color-neutral-0); /* not editable */
  --fz-btn-global-shadow: var(--fz-shadow-x-small);
  --fz-btn-global-border-radius: 4px; /*set default button corner type*/
  --fz-btn-global-border-width: 1px; /*set default button outline width*/
  --fz-btn-global-border: none;
  /* [fz-end] */

  /* Primary button - meant for use on light background */
  /* [fz-start buttons>primary|--fz-btn-primary] */
  --flz-primary: "on"; /* mandatory on */
  --fz-btn-primary-bg: var(--fz-color-secondary-1);
  --fz-btn-primary-color: var(--fz-btn-global-text-color-0);
  --fz-btn-primary-border: var(--fz-btn-global-border-width) solid var(--fz-color-secondary-1);
  --fz-btn-primary-hover-bg: var(--fz-color-secondary-2);
  --fz-btn-primary-hover-color: var(--fz-btn-global-text-color-0);
  --fz-btn-primary-hover-border: var(--fz-btn-global-border-width) solid var(--fz-color-secondary-2);
  --fz-btn-primary-padding: var(--fz-btn-global-padding); /* not editable */
  --fz-btn-primary-border-radius: var(--fz-border-radius-pill); /* not editable */
  /* [fz-end] */

  /* Secondary button - meant for use on dark background */
  /* [fz-start buttons>secondary|--fz-btn-secondary] */
  --flz-secondary: "on"; /* mandatory on */
  --fz-btn-secondary-bg: var(--fz-btn-global-text-color-0);
  --fz-btn-secondary-color: var(--fz-color-primary-5);
  --fz-btn-secondary-border: var(--fz-btn-global-border-width) solid var(--fz-btn-global-text-color-0);
  --fz-btn-secondary-hover-bg: var(--fz-color-primary-1);
  --fz-btn-secondary-hover-color: var(--fz-color-primary-4);
  --fz-btn-secondary-hover-border: var(--fz-btn-global-border-width) solid var(--fz-color-primary-1);
  --fz-btn-secondary-padding: var(--fz-btn-global-padding); /* not editable */
  --fz-btn-secondary-border-radius: var(--fz-border-radius-pill); /* not editable */
  /* [fz-end] */

  /* Tertiary button */
  /* [fz-start buttons>tertiary|--fz-btn-custom-1] */
  --flz-custom-1: "off";
  --fz-btn-custom-1-bg: none;
  --fz-btn-custom-1-color: var(--fz-color-primary-3);
  --fz-btn-custom-1-border: var(--fz-btn-global-border-width) solid var(--fz-color-primary-3);
  --fz-btn-custom-1-hover-bg: var(--fz-color-primary-4);
  --fz-btn-custom-1-hover-color: var(--fz-btn-global-text-color-0);
  --fz-btn-custom-1-hover-border: var(--fz-btn-global-border-width) solid var(--fz-color-primary-4);
  --fz-btn-custom-1-padding: var(--fz-btn-global-padding); /* not editable */
  --fz-btn-custom-1-border-radius: var(--fz-btn-global-border-radius); /* not editable */
  /* [fz-end] */

  /* forth button */
  /* [fz-start buttons>forth|--fz-btn-custom-2] */
  --flz-custom-2: "off";
  --fz-btn-custom-2-bg: none;
  --fz-btn-custom-2-color: var(--fz-color-primary-1);
  --fz-btn-custom-2-border: var(--fz-btn-global-border-width) solid var(--fz-color-primary-1);
  --fz-btn-custom-2-hover-bg: var(--fz-color-primary-1);
  --fz-btn-custom-2-hover-color: var(--fz-color-primary-3);
  --fz-btn-custom-2-hover-border: var(--fz-btn-global-border-width) solid var(--fz-color-primary-3);
  --fz-btn-custom-2-padding: var(--fz-btn-global-padding); /* not editable */
  --fz-btn-custom-2-border-radius: var(--fz-btn-global-border-radius); /* not editable */
  /* [fz-end] */

  /* Curved button */
  /* [fz-start buttons>curved|--fz-btn-curved] */
  --flz-curved: "off";
  --fz-btn-curved-bg: var(--fz-color-primary-1);
  --fz-btn-curved-color: var(--fz-color-primary-5);
  --fz-btn-curved-border: var(--fz-btn-global-border-width) solid var(--fz-color-primary-1);
  --fz-btn-curved-hover-bg: var(--fz-color-primary-5);
  --fz-btn-curved-hover-color: var(--fz-color-primary-1);
  --fz-btn-curved-hover-border: var(--fz-btn-global-border-width) solid var(--fz-color-primary-5);
  --fz-btn-curved-padding: 0.5em 1em; /* not editable */
  --fz-btn-curved-border-radius: var(--fz-border-radius-pill); /* not editable */
  /* [fz-end] */

  /* link button - meant for use on light background */
  /* [fz-start buttons>link|--fz-btn-link] */
  --flz-link: "on"; /* mandatory on */
  --fz-btn-link-bg: none;
  --fz-btn-link-color: var(--fz-color-primary-3);
  --fz-btn-link-border: none;
  --fz-btn-link-hover-bg: none;
  --fz-btn-link-hover-color: var(--fz-color-primary-4);
  --fz-btn-link-hover-border: none;
  --fz-btn-link-padding: none; /* not editable */
  --fz-btn-link-border-radius: var(--fz-btn-global-border-radius); /* not editable */
  --fz-btn-link-decoration: none;
  --fz-btn-link-decoration-hover: underline;
  /* [fz-end] */

  /* link 2 button - meant for use on dark background */
  /* [fz-start buttons>link2|--fz-btn-link-2] */
  --flz-link-2: "on"; /* mandatory on */
  --fz-btn-link-2-bg: none;
  --fz-btn-link-2-color: var(--fz-btn-global-text-color-0);
  --fz-btn-link-2-border: none;
  --fz-btn-link-2-hover-bg: none;
  --fz-btn-link-2-hover-color: var(--fz-color-primary-1);
  --fz-btn-link-2-hover-border: none;
  --fz-btn-link-2-padding: none; /* not editable */
  --fz-btn-link-2-border-radius: var(--fz-btn-global-border-radius); /* not editable */
  --fz-btn-link-2-decoration: none;
  --fz-btn-link-2-decoration-hover: underline;
  /* [fz-end] */

  /* circle button - share button */
  /* [fz-start buttons>circle|--fz-btn-circle] */
  --flz-circle: "on"; /* mandatory on */
  --fz-btn-circle-bg: var(--fz-color-primary-3);
  --fz-btn-circle-color: var(--fz-btn-global-text-color-0);
  --fz-btn-circle-border: var(--fz-btn-global-border-width) solid var(--fz-color-primary-3);
  --fz-btn-circle-hover-bg: var(--fz-color-primary-4);
  --fz-btn-circle-hover-color: var(--fz-btn-global-text-color-0);
  --fz-btn-circle-hover-border: var(--fz-btn-global-border-width) solid var(--fz-color-primary-4);
  --fz-btn-circle-padding: var(--fz-btn-global-padding); /* not editable */
  --fz-btn-circle-border-radius: 50%; /* not editable */
  /* [fz-end] */

  /************************************************
      ====================   Tabs   ===================
      ************************************************/
  /* global for all tabs [fz-start tabs>global|--fz-tabs-global-]*/
  --fz-tabs-global-text-color-0: var(--fz-color-neutral-0); /* default is white */
  --fz-tabs-global-text-color-10: var(--fz-color-neutral-4); /* default is white */
  /* [fz-end] */

  /* tab-1 - classic content section tab */
  /* [fz-start tabs>style-1|--fz-tabs-1] */
  --fz-tabs-1-shadow: var(--fz-shadow-none);
  --fz-tabs-1-border-radius: var(--fz-border-radius-none) var(--fz-border-radius-none) var(--fz-border-radius-none) var(--fz-border-radius-none);
  --fz-tabs-1-bg: none;
  --fz-tabs-1-bg-hover: none;
  --fz-tabs-1-bg-selected: none;
  --fz-tabs-1-color: var(--fz-color-neutral-4);
  --fz-tabs-1-color-hover: var(--fz-color-primary-3);
  --fz-tabs-1-color-selected: var(--fz-color-primary-3);
  --fz-tabs-1-border-color: none;
  --fz-tabs-1-border-color-hover: none;
  --fz-tabs-1-border-color-selected: var(--fz-color-primary-3);
  --fz-tabs-1-border-width: 2px;
  --fz-tabs-1-border-top: none;
  --fz-tabs-1-border-right: none;
  --fz-tabs-1-border-bottom: none;
  --fz-tabs-1-border-left: none;
  --fz-tabs-1-border-hover-top: none;
  --fz-tabs-1-border-hover-right: none;
  --fz-tabs-1-border-hover-bottom: none;
  --fz-tabs-1-border-hover-left: none;
  --fz-tabs-1-border-selected-top: none;
  --fz-tabs-1-border-selected-right: none;
  --fz-tabs-1-border-selected-bottom: var(--fz-tabs-1-border-width) solid var(--fz-tabs-1-color-selected);
  --fz-tabs-1-border-selected-left: none;
  --fz-tabs-1-font-family: var(--fz-paragraph-2-font-family);
  --fz-tabs-1-font-weight: var(--fz-weight-semi-bold);
  --fz-tabs-1-font-size: var(--fz-paragraph-2-font-size);
  /* [fz-end] */

  /* tab-2 - accent content section tab */
  /* [fz-start tabs>style-2|--fz-tabs-2] */
  --fz-tabs-2-shadow: var(--fz-shadow-none);
  --fz-tabs-2-border-radius: var(--fz-border-radius-pill);
  --fz-tabs-2-bg: none;
  --fz-tabs-2-bg-hover: var(--fz-color-primary-1);
  --fz-tabs-2-bg-selected: var(--fz-color-primary-3);
  --fz-tabs-2-color: var(--fz-color-neutral-4);
  --fz-tabs-2-color-hover: var(--fz-tabs-global-text-color-10);
  --fz-tabs-2-color-selected: var(--fz-tabs-global-text-color-0);
  --fz-tabs-2-border-color: none;
  --fz-tabs-2-border-color-hover: none;
  --fz-tabs-2-border-color-selected: none;
  --fz-tabs-2-border-width: 0;
  --fz-tabs-2-border-top: none;
  --fz-tabs-2-border-right: none;
  --fz-tabs-2-border-bottom: none;
  --fz-tabs-2-border-left: none;
  --fz-tabs-2-border-hover-top: none;
  --fz-tabs-2-border-hover-right: none;
  --fz-tabs-2-border-hover-bottom: none;
  --fz-tabs-2-border-hover-left: none;
  --fz-tabs-2-border-selected-top: none;
  --fz-tabs-2-border-selected-right: none;
  --fz-tabs-2-border-selected-bottom: none;
  --fz-tabs-2-border-selected-left: none;
  --fz-tabs-2-font-family: var(--fz-paragraph-2-font-family);
  --fz-tabs-2-font-weight: var(--fz-weight-semi-bold);
  --fz-tabs-2-font-size: var(--fz-paragraph-2-font-size);
  /* [fz-end] */

  /************************************************
    ====================  Tiles  ===================
    ************************************************/
  /* global for all tiles [fz-start tiles>global|--fz-tiles-global-]*/
  --fz-tiles-global-text-color-0: var(
    --fz-color-neutral-0
  ); /* default is white */
  --fz-tiles-global-bg-color: var(--fz-color-neutral-0); /* default is white */
  --fz-tiles-read-more-button-color: var(--fz-color-primary-3);
  /* [fz-end] */

  /* [fz-start tiles>style-1|--fz-tile-1-] */
  --fz-tile-1-shadow: var(--fz-shadow-small);
  --fz-tile-1-border-radius: var(--fz-border-radius-medium);
  --fz-tile-1-social-icons-color: var(--fz-color-neutral-2);
  --fz-tile-1-icon-type-color: var(
    --fz-color-neutral-2
  ); /* also the read more / less button on mobile */
  --fz-tile-1-title-color: var(--fz-color-neutral-5);
  --fz-tile-1-bg: var(--fz-tiles-global-bg-color);
  --fz-tile-1-hover-color: var(
    --fz-tiles-global-text-color-0
  ); /* on mobile the color should be like description color */
  --fz-tile-1-hover-bg: var(--fz-color-primary-5);
  --fz-tile-1-font-weight: var(--fz-weight-semi-bold);
  --fz-tile-1-title-font-family: var(--fz-font-family-1);
  --fz-tile-1-title-font-size: calc(
    1rem * var(--fz-paragraph-2-font-size-factor)
  );
  --fz-tile-1-description-font-family: var(--fz-tile-1-title-font-family);
  --fz-tile-1-description-font-size: var(
    --fz-tile-1-title-font-size,
    --fz-paragraph-2-font-size
  );
  --fz-tile-1-description-font-weight: var(--fz-paragraph-2-weight);
  /* [fz-end] */

  /************************************************
    ====================  images  ===================
    ************************************************/
  --fz-image-1-shadow: var(--fz-shadow-none);
  --fz-image-1-boarder-radius: var(--fz-border-radius-medium);
  --fz-image-1-border: none;

  /************************************************
    ==================== sections ===================
    ************************************************/
  --fz-section-height-short: 26.25rem; /* 420px not editable */
  --fz-section-height-medium: 36.875rem; /* 590px not editable */
  --fz-section-height-tall: 49.25rem; /* 788px not editable */
  --fz-section-bg: transparent; /* not editable */
  --fz-section-padding-step: 10px; /* not editable - padding will we in multiplies of this value */

  /************************************************
    ========== checkboxes & radio btns =============
    ************************************************/
  --fz-checkbox-radio-corner-radius: var(--fz-border-radius-x-small);
  --fz-checkbox-radio-color-selected: var(--fz-color-info-3);
  --fz-checkbox-radio-color-unselected: var(--fz-color-neutral-0);
  --fz-checkbox-radio-color-selected-hover: var(--fz-color-info-4);
  --fz-checkbox-radio-color-unselected-hover: var(--fz-color-neutral-1);
  --fz-checkbox-radio-border-color: var(--fz-color-neutral-3);

  /************************************************
    ================ item viewer ====================
    ************************************************/
  --fz-item-viewer-width: calc(100vw * 0.6); /* not editable */
  --fz-item-viewer-width-mobile: 100vw; /* not editable */
  --fz-item-viewer-header-height: 50px; /* not editable */

  /************************************************
    ================ outline ====================
    ************************************************/
  --fz-outline-btn-focus: 2px solid var(--fz-color-info-3);
  --fz-outline-btn-focus-offset: var(--fz-spacing-5x-small);

  /************************************************
    ====================   Article   ================
    ************************************************/
  --fz-article-title-color: var(--fz-heading-2-color);
  --fz-article-title-weight: var(--fz-heading-2-weight);
  --fz-article-title-font-family: var(--fz-heading-2-font-family);
  --fz-article-title-font-size: var(--fz-heading-2-font-size);
  --fz-article-title-letter-spacing: var(--fz-heading-2-letter-spacing);
  --fz-article-title-line-height: var(--fz-heading-2-line-height);

  --fz-article-heading-color: var(--fz-heading-4-color);
  --fz-article-heading-weight: var(--fz-heading-4-weight);
  --fz-article-heading-font-family: var(--fz-heading-4-font-family);
  --fz-article-heading-font-size: var(--fz-heading-4-font-size);
  --fz-article-heading-line-height: var(--fz-heading-4-line-height);
  --fz-article-heading-letter-spacing: var(--fz-heading-4-letter-spacing);

  --fz-article-subheading-color: var(--fz-heading-5-color);
  --fz-article-subheading-weight: var(--fz-heading-5-weight);
  --fz-article-subheading-font-family: var(--fz-heading-5-font-family);
  --fz-article-subheading-font-size: var(--fz-heading-5-font-size);
  --fz-article-subheading-line-height: var(--fz-heading-5-line-height);
  --fz-article-subheading-letter-spacing: var(--fz-heading-5-letter-spacing);

  --fz-article-normal-color: var(--fz-paragraph-1-color);
  --fz-article-normal-weight: var(--fz-paragraph-1-weight);
  --fz-article-normal-font-family: var(--fz-paragraph-1-font-family);
  --fz-article-normal-font-size: var(--fz-paragraph-1-font-size);
  --fz-article-normal-line-height: var(--fz-paragraph-1-line-height);
  --fz-article-normal-letter-spacing: var(--fz-paragraph-1-letter-spacing);

  --fz-article-quote-color: var(--fz-heading-5-color);
  --fz-article-quote-weight: var(--fz-heading-5-weight);
  --fz-article-quote-font-family: var(--fz-heading-5-font-family);
  --fz-article-quote-font-size: var(--fz-heading-5-font-size);
  --fz-article-quote-line-height: var(--fz-heading-5-line-height);
  --fz-article-quote-letter-spacing: var(--fz-heading-5-letter-spacing);

  --fz-article-author-color: var(--fz-paragraph-2-color);
  --fz-article-author-weight: var(--fz-paragraph-2-weight);
  --fz-article-author-font-family: var(--fz-paragraph-2-font-family);
  --fz-article-author-font-size: var(--fz-paragraph-2-font-size);
  --fz-article-author-line-height: var(--fz-paragraph-2-line-height);
  --fz-article-author-letter-spacing: var(--fz-paragraph-2-letter-spacing);

  --fz-article-info-color: var(--fz-system-text-1-color);
  --fz-article-info-weight: var(--fz-system-text-1-weight);
  --fz-article-info-font-family: var(--fz-system-text-1-font-family);
  --fz-article-info-font-size: var(--fz-system-text-1-font-size);
  --fz-article-info-line-height: var(--fz-system-text-1-line-height);
  --fz-article-info-letter-spacing: var(--fz-system-text-1-letter-spacing);

  /************************************************
    ====================   Forms   ==================
    ************************************************/
  --fz-form-title-color: var(--fz-paragraph-1-color);
  --fz-form-title-weight: var(--fz-paragraph-1-weight);
  --fz-form-title-font-family: var(--fz-paragraph-1-font-family);
  --fz-form-title-font-size: var(--fz-paragraph-1-font-size);
  --fz-form-title-line-height: var(--fz-paragraph-1-line-height);
  --fz-form-title-letter-spacing: var(--fz-paragraph-1-letter-spacing);

  --fz-form-label-color: var(--fz-system-text-1-color);
  --fz-form-label-weight: var(--fz-system-text-1-weight);
  --fz-form-label-font-family: var(--fz-system-text-1-font-family);
  --fz-form-label-font-size: var(--fz-system-text-1-font-size);
  --fz-form-label-line-height: var(--fz-system-text-1-line-height);
  --fz-form-label-letter-spacing: var(--fz-system-text-1-letter-spacing);

  --fz-form-privacy-msg-color: var(--fz-system-text-1-color);
  --fz-form-privacy-msg-weight: var(--fz-system-text-1-weight);
  --fz-form-privacy-msg-font-family: var(--fz-system-text-1-font-family);
  --fz-form-privacy-msg-font-size: var(--fz-system-text-1-font-size);
  --fz-form-privacy-msg-line-height: var(--fz-system-text-1-line-height);
  --fz-form-privacy-msg-letter-spacing: var(--fz-system-text-1-letter-spacing);

  --fz-form-input-border: 1px solid var(--fz-system-text-1-color);
  --fz-form-input-border-hover: 1px solid var(--fz-system-text-1-color);
  --fz-form-input-border-focus: 1px solid var(--fz-color-info-3);

  --fz-form-input-bg: var(--fz-color-neutral-0);
  --fz-form-input-bg-hover: var(--fz-color-neutral-0);
  --fz-form-input-bg-focus: var(--fz-color-neutral-0);

  --fz-form-placeholder-color: rgba(0, 0, 0, 0.6);
  --fz-form-input-color: var(--fz-color-neutral-1000);

  --fz-form-bg: var(--fz-color-neutral-0);
  --fz-form-accent-color: var(--fz-color-primary-3);

  /************************************************
    ================== Contact Card ================
    ************************************************/

  --fz-contact-card-color: var(--fz-color-neutral-4);
  --fz-contact-card-font-family: var(--fz-paragraph-1-font-family);
  --fz-contact-card-border-radius: var(--fz-btn-global-border-radius);
  --fz-contact-card-icon-bg: var(--fz-color-neutral-0);
  --fz-contact-card-icon-color: var(--fz-color-primary-3);

  /************************************************
     ====================   navs   ===================
     ************************************************/
  /* global for all navs [fz-start navs>global|--fz-navs-global-]*/
  --fz-navs-global-text-color-0: var(
    --fz-color-neutral-0
  ); /* default is white */
  --fz-navs-global-text-color-10: var(
    --fz-color-neutral-4
  ); /* default is white */
  --fz-navs-global-padding: 0 1em;
  --fz-navs-global-margin: var(--fz-spacing-5x-small);
  /* [fz-end] */

  /* tab-1 - classic content section tab */
  /* [fz-start navs>style-1|--fz-navs-1] */
  --fz-navs-1-shadow: var(--fz-shadow-none);
  --fz-navs-1-border-radius: var(--fz-border-radius-none)
    var(--fz-border-radius-none) var(--fz-border-radius-none)
    var(--fz-border-radius-none);
  --fz-navs-1-bg: none;
  --fz-navs-1-bg-hover: none;
  --fz-navs-1-bg-selected: none;
  --fz-navs-1-color: var(--fz-color-neutral-4);
  --fz-navs-1-color-hover: var(--fz-color-primary-3);
  --fz-navs-1-color-selected: var(--fz-color-primary-3);
  --fz-navs-1-border-color: none;
  --fz-navs-1-border-color-hover: none;
  --fz-navs-1-border-color-selected: none;
  --fz-navs-1-border-width: 3px;
  --fz-navs-1-border-top: none;
  --fz-navs-1-border-right: none;
  --fz-navs-1-border-bottom: var(--fz-navs-1-border-width) solid
    rgb(79, 70, 229, 0);
  --fz-navs-1-border-left: none;
  --fz-navs-1-border-hover-top: none;
  --fz-navs-1-border-hover-right: none;
  --fz-navs-1-border-hover-bottom: var(--fz-navs-1-border-width) solid
    var(--fz-navs-1-color-hover);
  --fz-navs-1-border-hover-left: none;
  --fz-navs-1-border-selected-top: none;
  --fz-navs-1-border-selected-right: none;
  --fz-navs-1-border-selected-bottom: var(--fz-navs-1-border-width) solid
    var(--fz-navs-1-color-selected);
  --fz-navs-1-border-selected-left: none;
  --fz-navs-1-font-family: var(--fz-paragraph-2-font-family);
  --fz-navs-1-font-weight: var(--fz-weight-semi-bold);
  --fz-navs-1-font-size: var(--fz-paragraph-2-font-size);

  /* [fz-end] */

  /* tab-2 - accent content section tab */
  /* [fz-start navs>style-2|--fz-navs-2] */
  --fz-navs-2-shadow: var(--fz-shadow-none);
  --fz-navs-2-border-radius: var(--fz-border-radius-none)
    var(--fz-border-radius-none) var(--fz-border-radius-none)
    var(--fz-border-radius-none);
  --fz-navs-2-bg: none;
  --fz-navs-2-bg-hover: none;
  --fz-navs-2-bg-selected: none;
  --fz-navs-2-color: var(--fz-color-neutral-0);
  --fz-navs-2-color-hover: var(--fz-color-neutral-0);
  --fz-navs-2-color-selected: var(--fz-color-neutral-0);
  --fz-navs-2-border-color: none;
  --fz-navs-2-border-color-hover: none;
  --fz-navs-2-border-color-selected: var(--fz-color-primary-1);
  --fz-navs-2-border-width: 3px;
  --fz-navs-2-border-top: none;
  --fz-navs-2-border-right: none;
  --fz-navs-2-border-bottom: var(--fz-navs-1-border-width) solid
    rgb(79, 70, 229, 0);
  --fz-navs-2-border-left: none;
  --fz-navs-2-border-hover-top: none;
  --fz-navs-2-border-hover-right: none;
  --fz-navs-2-border-hover-bottom: var(--fz-navs-2-border-width) solid
    var(--fz-navs-2-color-hover);
  --fz-navs-2-border-hover-left: none;
  --fz-navs-2-border-selected-top: none;
  --fz-navs-2-border-selected-right: none;
  --fz-navs-2-border-selected-bottom: var(--fz-navs-2-border-width) solid
    var(--fz-navs-2-color-selected);
  --fz-navs-2-border-selected-left: none;
  --fz-navs-2-font-family: var(--fz-paragraph-2-font-family);
  --fz-navs-2-font-weight: var(--fz-weight-semi-bold);
  --fz-navs-2-font-size: var(--fz-paragraph-2-font-size);
  /* [fz-end] */

  /************************************************
        todo: we need to remove every thing below this line
        - we need to convert all --sys- vars to --edit-fz- inside all components
        - its a left over from the old light theme - mainly not used but still exists in some components

        * please note - this vars are not ment to be editable
    ************************************************/

  /* Gray */
  --edit-fz-color-gray-50: rgb(250 250 250);
  --edit-fz-color-gray-100: rgb(244 244 245);
  --edit-fz-color-gray-200: rgb(228 228 231);
  --edit-fz-color-gray-300: rgb(212 212 216);
  --edit-fz-color-gray-400: rgb(161 161 170);
  --edit-fz-color-gray-500: rgb(113 113 122);
  --edit-fz-color-gray-600: rgb(82 82 91);
  --edit-fz-color-gray-700: rgb(63 63 70);
  --edit-fz-color-gray-800: rgb(39 39 42);
  --edit-fz-color-gray-900: rgb(24 24 27);
  --edit-fz-color-gray-950: rgb(19 19 22);

  /* Neutral */
  --edit-fz-color-neutral-50: var(--edit-fz-color-gray-50);
  --edit-fz-color-neutral-100: var(--edit-fz-color-gray-100);
  --edit-fz-color-neutral-200: var(--edit-fz-color-gray-200);
  --edit-fz-color-neutral-300: var(--edit-fz-color-gray-300);
  --edit-fz-color-neutral-400: var(--edit-fz-color-gray-400);
  --edit-fz-color-neutral-500: var(--edit-fz-color-gray-500);
  --edit-fz-color-neutral-600: var(--edit-fz-color-gray-600);
  --edit-fz-color-neutral-700: var(--edit-fz-color-gray-700);
  --edit-fz-color-neutral-800: var(--edit-fz-color-gray-800);
  --edit-fz-color-neutral-900: var(--edit-fz-color-gray-900);
  --edit-fz-color-neutral-950: var(--edit-fz-color-gray-950);

  /* Neutral one-offs */
  --edit-fz-color-neutral-0: rgb(255 255 255);
  --edit-fz-color-neutral-1000: rgb(0 0 0);

  /* Surfaces */

  --edit-fz-surface-base: var(--edit-fz-color-neutral-0);
  --edit-fz-surface-base-alt: var(--edit-fz-color-neutral-0);

  /* Gray (--sys backup) */
  --sys-color-gray-50: var(--edit-fz-color-gray-50);
  --sys-color-gray-100: var(--edit-fz-color-gray-100);
  --sys-color-gray-200: var(--edit-fz-color-gray-200);
  --sys-color-gray-300: var(--edit-fz-color-gray-300);
  --sys-color-gray-400: var(--edit-fz-color-gray-400);
  --sys-color-gray-500: var(--edit-fz-color-gray-500);
  --sys-color-gray-600: var(--edit-fz-color-gray-600);
  --sys-color-gray-700: var(--edit-fz-color-gray-700);
  --sys-color-gray-800: var(--edit-fz-color-gray-800);
  --sys-color-gray-900: var(--edit-fz-color-gray-900);
  --sys-color-gray-950: var(--edit-fz-color-gray-950);

  /* Neutral (--sys backup) */
  --sys-color-neutral-50: var(--edit-fz-color-gray-50);
  --sys-color-neutral-100: var(--edit-fz-color-gray-100);
  --sys-color-neutral-200: var(--edit-fz-color-gray-200);
  --sys-color-neutral-300: var(--edit-fz-color-gray-300);
  --sys-color-neutral-400: var(--edit-fz-color-gray-400);
  --sys-color-neutral-500: var(--edit-fz-color-gray-500);
  --sys-color-neutral-600: var(--edit-fz-color-gray-600);
  --sys-color-neutral-700: var(--edit-fz-color-gray-700);
  --sys-color-neutral-800: var(--edit-fz-color-gray-800);
  --sys-color-neutral-900: var(--edit-fz-color-gray-900);
  --sys-color-neutral-950: var(--edit-fz-color-gray-950);

  /* Neutral one-offs (--sys backup) */
  --sys-color-neutral-0: var(--edit-fz-color-neutral-0);
  --sys-color-neutral-1000: var(--edit-fz-color-neutral-1000);

  /* Surfaces (--sys backup) */
  --sys-surface-base: var(--edit-fz-color-neutral-0);
  --sys-surface-base-alt: var(--edit-fz-color-neutral-0);


  /*
 * Transitions
 */

  --fz-transition-x-slow: 1000ms;
  --fz-transition-slow: 500ms;
  --fz-transition-medium: 250ms;
  --fz-transition-fast: 150ms;
  --fz-transition-x-fast: 50ms;

  /*
 * Typography
 */


  /* Font sizes */
  --fz-font-size-2x-small: 0.625rem; /* 10px */
  --fz-font-size-x-small: 0.75rem; /* 12px */
  --fz-font-size-small: 0.875rem; /* 14px */
  --fz-font-size-medium: 1rem; /* 16px */
  --fz-font-size-large: 1.25rem; /* 20px */
  --fz-font-size-x-large: 1.5rem; /* 24px */
  --fz-font-size-2x-large: 2.25rem; /* 36px */
  --fz-font-size-3x-large: 3rem; /* 48px */
  --fz-font-size-4x-large: 4.5rem; /* 72px */

  /* Font weights */
  --fz-font-weight-light: 300;
  --fz-font-weight-normal: 400;
  --fz-font-weight-semibold: 500;
  --fz-font-weight-bold: 700;

  /* Letter spacings */
  --fz-letter-spacing-denser: -0.03em;
  --fz-letter-spacing-dense: -0.015em;
  --fz-letter-spacing-normal: normal;
  --fz-letter-spacing-loose: 0.075em;
  --fz-letter-spacing-looser: 0.15em;

  /* Line heights */
  --fz-line-height-denser: 1;
  --fz-line-height-dense: 1.4;
  --fz-line-height-normal: 1.8;
  --fz-line-height-loose: 2.2;
  --fz-line-height-looser: 2.6;

  /*
 * Forms
 */

  /* Focus rings */
  --fz-focus-ring-color: var(--sys-color-primary-500);
  --fz-focus-ring-width: 3px;
  --fz-focus-ring-alpha: 40%;
  --fz-focus-ring: 0 0 0 var(--fz-focus-ring-width)
    rgb(var(--sys-focus-ring-color) / var(--fz-focus-ring-alpha));

  /* Buttons */
  --fz-button-font-size-small: var(--fz-font-size-x-small);
  --fz-button-font-size-medium: var(--fz-font-size-small);
  --fz-button-font-size-large: var(--fz-font-size-medium);

  /* Inputs */
  --fz-input-height-small: 1.875rem; /* 30px */
  --fz-input-height-medium: 2.5rem; /* 40px */
  --fz-input-height-large: 3.125rem; /* 50px */

  --sys-input-background-color: var(--sys-color-neutral-0);
  --sys-input-background-color-hover: var(--fz-input-background-color);
  --sys-input-background-color-focus: var(--fz-input-background-color);
  --sys-input-background-color-disabled: var(--sys-color-neutral-100);
  --sys-input-border-color: var(--sys-color-neutral-300);
  --sys-input-border-color-hover: var(--sys-color-neutral-400);
  --sys-input-border-color-focus: var(--sys-color-primary-500);
  --sys-input-border-color-disabled: var(--sys-color-neutral-300);
  --fz-input-border-width: 1px;

  --fz-input-border-radius-small: var(--fz-border-radius-medium);
  --fz-input-border-radius-medium: var(--fz-border-radius-medium);
  --fz-input-border-radius-large: var(--fz-border-radius-medium);

  --fz-input-font-family: var(--fz-font-sans);
  --fz-input-font-weight: var(--fz-font-weight-normal);
  --fz-input-font-size-small: var(--fz-font-size-small);
  --fz-input-font-size-medium: var(--fz-font-size-medium);
  --fz-input-font-size-large: var(--fz-font-size-large);
  --fz-input-letter-spacing: var(--fz-letter-spacing-normal);

  --fz-input-color: var(--sys-color-neutral-700);
  --fz-input-color-hover: var(--sys-color-neutral-700);
  --fz-input-color-focus: var(--sys-color-neutral-700);
  --fz-input-color-disabled: var(--sys-color-neutral-900);
  --fz-input-icon-color: var(--sys-color-neutral-500);
  --fz-input-icon-color-hover: var(--sys-color-neutral-600);
  --fz-input-icon-color-focus: var(--sys-color-neutral-600);
  --fz-input-placeholder-color: var(--sys-color-neutral-500);
  --fz-input-placeholder-color-disabled: var(--sys-color-neutral-600);
  --fz-input-spacing-small: var(--fz-spacing-small);
  --fz-input-spacing-medium: var(--fz-spacing-medium);
  --fz-input-spacing-large: var(--fz-spacing-large);

  --fz-input-filled-background-color: var(--sys-color-neutral-100);
  --fz-input-filled-background-color-hover: var(--sys-color-neutral-100);
  --fz-input-filled-background-color-focus: var(--sys-color-neutral-0);
  --fz-input-filled-background-color-disabled: var(--sys-color-neutral-100);
  --fz-input-filled-color: var(--sys-color-neutral-800);
  --fz-input-filled-color-hover: var(--sys-color-neutral-800);
  --fz-input-filled-color-focus: var(--sys-color-neutral-700);
  --fz-input-filled-color-disabled: var(--sys-color-neutral-800);

  /* Labels */
  --fz-input-label-font-size-small: var(--fz-font-size-small);
  --fz-input-label-font-size-medium: var(--fz-font-size-medium);
  --fz-input-label-font-size-large: var(--fz-font-size-large);

  --fz-input-label-color: inherit;

  /* Help text */
  --fz-input-help-text-font-size-small: var(--fz-font-size-x-small);
  --fz-input-help-text-font-size-medium: var(--fz-font-size-small);
  --fz-input-help-text-font-size-large: var(--fz-font-size-medium);

  --fz-input-help-text-color: var(--sys-color-neutral-500);

  /* Toggles (checkboxes, radios, switches) */
  --fz-toggle-size: 1rem;

  /*
 * Overlays
 */

  --fz-overlay-background-color: var(--sys-color-blue-gray-500);
  --fz-overlay-opacity: 33%;

  /*
 * Panels
 */

  --sys-panel-background-color: var(--sys-surface-base-alt);
  --sys-panel-border-color: var(--sys-color-neutral-200);
  --sys-panel-border-width: 1px;

  /*
 * Tooltips
 */

  --fz-tooltip-border-radius: var(--fz-border-radius-medium);
  --fz-tooltip-background-color: var(--sys-color-neutral-800);
  --fz-tooltip-color: var(--sys-color-neutral-0);
  --fz-tooltip-font-family: var(--fz-font-sans);
  --fz-tooltip-font-weight: var(--fz-font-weight-normal);
  --fz-tooltip-font-size: var(--fz-font-size-small);
  --fz-tooltip-line-height: var(--fz-line-height-dense);
  --fz-tooltip-padding: var(--fz-spacing-2x-small) var(--fz-spacing-x-small);
  --fz-tooltip-arrow-size: 5px;
  --fz-tooltip-arrow-start-end-offset: 8px;

  /*
 * Z-indexes
 */

  --fz-z-index-drawer: 700;
  --fz-z-index-dialog: 800;
  --fz-z-index-dropdown: 900;
  --fz-z-index-toast: 950;
  --fz-z-index-tooltip: 1000;

  /************************************************
    ====================   column   ================
    ************************************************/
  --fz-column-title-color: var(--fz-color-neutral-5);
  --fz-column-title-weight: var(--fz-font-weight-bold);
  --fz-column-title-font-family: var(--fz-heading-6-font-family);
  --fz-column-title-font-size: var(--fz-heading-6-font-size);
  --fz-column-title-letter-spacing: var(--fz-heading-6-letter-spacing);
  --fz-column-title-line-height: var(--fz-heading-6-line-height);

  --fz-column-subtitle-color: var(--fz-color-neutral-4);
  --fz-column-subtitle-weight: var(--fz-paragraph-2-weight);
  --fz-column-subtitle-font-family: var(--fz-paragraph-2-font-family);
  --fz-column-subtitle-font-size: var(--fz-paragraph-2-font-size);
  --fz-column-subtitle-line-height: var(--fz-paragraph-2-line-height);
  --fz-column-subtitle-letter-spacing: var(--fz-paragraph-2-letter-spacing);

  --fz-column-paragraph-color: var(--fz-color-neutral-4);
  --fz-column-paragraph-weight: var(--fz-paragraph-2-weight);
  --fz-column-paragraph-font-family: var(--fz-paragraph-2-font-family);
  --fz-column-paragraph-font-size: var(--fz-paragraph-2-font-size);
  --fz-column-paragraph-line-height: var(--fz-paragraph-2-line-height);
  --fz-column-paragraph-letter-spacing: var(--fz-paragraph-2-letter-spacing);

  --fz-column-bg: var(--fz-color-neutral-0);
  --fz-column-border: var(--fz-image-1-border);
  --fz-column-shadow: var(--fz-image-1-shadow);
  --fz-column-border-radius: var(--fz-image-1-boarder-radius);

  /************************************************
    ====================   multi-tabs   ===================
    ************************************************/
  /* tab-1 - classic content section tab */
  /* [fz-start multi-tabs>style-1|--fz-multi-tabs-1] */
  --fz-multi-tabs-1-shadow: var(--fz-shadow-none);
  --fz-multi-tabs-1-border-radius: var(--fz-border-radius-pill);
  --fz-multi-tabs-1-padding: 0.7em 1.2em;
  --fz-multi-tabs-1-margin: var(--fz-spacing-5x-small);
  --fz-multi-tabs-1-bg: var(--fz-color-secondary-1);
  --fz-multi-tabs-1-bg-hover: var(--fz-color-secondary-2);
  --fz-multi-tabs-1-bg-selected: var(--fz-color-secondary-10);
  --fz-multi-tabs-1-color: var(--fz-color-neutral-0);
  --fz-multi-tabs-1-color-hover: var(--fz-color-neutral-0);
  --fz-multi-tabs-1-color-selected: var(--fz-color-neutral-0);
  --fz-multi-tabs-1-border-color: none;
  --fz-multi-tabs-1-border-color-hover: none;
  --fz-multi-tabs-1-border-color-selected: none;
  --fz-multi-tabs-1-border-width: none;
  --fz-multi-tabs-1-border-top: none;
  --fz-multi-tabs-1-border-right: none;
  --fz-multi-tabs-1-border-bottom: none;
  --fz-multi-tabs-1-border-left: none;
  --fz-multi-tabs-1-border-hover-top: none;
  --fz-multi-tabs-1-border-hover-right: none;
  --fz-multi-tabs-1-border-hover-bottom: none;
  --fz-multi-tabs-1-border-hover-left: none;
  --fz-multi-tabs-1-border-selected-top: none;
  --fz-multi-tabs-1-border-selected-right: none;
  --fz-multi-tabs-1-border-selected-bottom: none;
  --fz-multi-tabs-1-border-selected-left: none;
  --fz-multi-tabs-1-font-family: var(--fz-paragraph-2-font-family);
  --fz-multi-tabs-1-font-weight: var(--fz-weight-semi-bold);
  --fz-multi-tabs-1-font-size: var(--fz-paragraph-2-font-size);

  /* [fz-end] */

  /* tab-2 - accent content section tab */
  /* [fz-start multi-tabs>style-2|--fz-multi-tabs-2] */
  --fz-multi-tabs-2-shadow: var(--fz-shadow-none);
  --fz-multi-tabs-2-border-radius: var(--fz-border-radius-pill);
  --fz-multi-tabs-2-padding: 0.7em 1.2em;
  --fz-multi-tabs-2-margin: var(--fz-spacing-5x-small);
  --fz-multi-tabs-2-bg: var(--fz-color-neutral-0);
  --fz-multi-tabs-2-bg-hover: var(--fz-color-primary-1);
  --fz-multi-tabs-2-bg-selected: var(--fz-color-primary-1);
  --fz-multi-tabs-2-color: var(--fz-color-neutral-5);
  --fz-multi-tabs-2-color-hover: var(--fz-color-primary-3);
  --fz-multi-tabs-2-color-selected: var(--fz-color-primary-3);
  --fz-multi-tabs-2-border-color: none;
  --fz-multi-tabs-2-border-color-hover: none;
  --fz-multi-tabs-2-border-color-selected: none;
  --fz-multi-tabs-2-border-width: none;
  --fz-multi-tabs-2-border-top: none;
  --fz-multi-tabs-2-border-right: none;
  --fz-multi-tabs-2-border-bottom: none;
  --fz-multi-tabs-2-border-left: none;
  --fz-multi-tabs-2-border-hover-top: none;
  --fz-multi-tabs-2-border-hover-right: none;
  --fz-multi-tabs-2-border-hover-bottom: none;
  --fz-multi-tabs-2-border-hover-left: none;
  --fz-multi-tabs-2-border-selected-top: none;
  --fz-multi-tabs-2-border-selected-right: none;
  --fz-multi-tabs-2-border-selected-bottom: none;
  --fz-multi-tabs-2-border-selected-left: none;
  --fz-multi-tabs-2-font-family: var(--fz-paragraph-2-font-family);
  --fz-multi-tabs-2-font-weight: var(--fz-weight-semi-bold);
  --fz-multi-tabs-2-font-size: var(--fz-paragraph-2-font-size);
  /* [fz-end] */
}

/* PLEASE NOTE - the order is important. do not change.
the factors are a little counter intuitive the start from big and go to small */
/* this is for above 1536px */
@media screen and (min-width: 1536px) {
  :root,
  :host {
    --fz-heading-1-font-size-factor: 1;
    --fz-heading-1-line-height-factor: 1;
    --fz-heading-1-letter-spacing-factor: 1;

    --fz-heading-2-font-size-factor: 1;
    --fz-heading-2-line-height-factor: 1;
    --fz-heading-2-letter-spacing-factor: 1;

    --fz-heading-3-font-size-factor: 1;
    --fz-heading-3-line-height-factor: 1;
    --fz-heading-3-letter-spacing-factor: 1;

    --fz-heading-4-font-size-factor: 1;
    --fz-heading-4-line-height-factor: 1;
    --fz-heading-4-letter-spacing-factor: 1;

    --fz-heading-5-font-size-factor: 1;
    --fz-heading-5-line-height-factor: 1;
    --fz-heading-5-letter-spacing-factor: 1;

    --fz-heading-6-font-size-factor: 1;
    --fz-heading-6-line-height-factor: 1;
    --fz-heading-6-letter-spacing-factor: 1;

    --fz-paragraph-1-font-size-factor: 1;
    --fz-paragraph-1-line-height-factor: 1;
    --fz-paragraph-1-letter-spacing-factor: 1;

    --fz-paragraph-2-font-size-factor: 1;
    --fz-paragraph-2-line-height-factor: 1;
    --fz-paragraph-2-letter-spacing-factor: 1;

    --fz-paragraph-3-font-size-factor: 1;
    --fz-paragraph-3-line-height-factor: 1;
    --fz-paragraph-3-letter-spacing-factor: 1;

    --fz-system-text-1-font-size-factor: 1;
    --fz-system-text-1-line-height-factor: 1;
    --fz-system-text-1-letter-spacing-factor: 1;
  }
}

/* desktop sizes - in headings section */

/* for small screen (640px - 1024px) */
@media screen and (max-width: 1024px) {
  :root,
  :host {
    --fz-heading-1-font-size-factor: 0.75;
    --fz-heading-1-line-height-factor: 1;
    --fz-heading-1-letter-spacing-factor: 1;

    --fz-heading-2-font-size-factor: 0.85;
    --fz-heading-2-line-height-factor: 1;
    --fz-heading-2-letter-spacing-factor: 1;

    --fz-heading-3-font-size-factor: 0.9;
    --fz-heading-3-line-height-factor: 1;
    --fz-heading-3-letter-spacing-factor: 1;

    --fz-heading-4-font-size-factor: 1;
    --fz-heading-4-line-height-factor: 1;
    --fz-heading-4-letter-spacing-factor: 1;

    --fz-heading-5-font-size-factor: 1;
    --fz-heading-5-line-height-factor: 1;
    --fz-heading-5-letter-spacing-factor: 1;

    --fz-heading-6-font-size-factor: 1;
    --fz-heading-6-line-height-factor: 1;
    --fz-heading-6-letter-spacing-factor: 1;

    --fz-paragraph-1-font-size-factor: 1;
    --fz-paragraph-1-line-height-factor: 1;
    --fz-paragraph-1-letter-spacing-factor: 1;

    --fz-paragraph-2-font-size-factor: 1;
    --fz-paragraph-2-line-height-factor: 1;
    --fz-paragraph-2-letter-spacing-factor: 1;

    --fz-paragraph-3-font-size-factor: 1;
    --fz-paragraph-3-line-height-factor: 1;
    --fz-paragraph-3-letter-spacing-factor: 1;

    --fz-system-text-1-font-size-factor: 1;
    --fz-system-text-1-line-height-factor: 1;
    --fz-system-text-1-letter-spacing-factor: 1;
  }
}

/* for mobile to 640px (0 - 640px) */
@media screen and (max-width: 640px) {
  :root,
  :host {
    --fz-heading-1-font-size-factor: 0.65;
    --fz-heading-1-line-height-factor: 1;
    --fz-heading-1-letter-spacing-factor: 1;

    --fz-heading-2-font-size-factor: 0.75;
    --fz-heading-2-line-height-factor: 1;
    --fz-heading-2-letter-spacing-factor: 1;

    --fz-heading-3-font-size-factor: 0.85;
    --fz-heading-3-line-height-factor: 1;
    --fz-heading-3-letter-spacing-factor: 1;

    --fz-heading-4-font-size-factor: 0.9;
    --fz-heading-4-line-height-factor: 1;
    --fz-heading-4-letter-spacing-factor: 1;

    --fz-heading-5-font-size-factor: 1;
    --fz-heading-5-line-height-factor: 1;
    --fz-heading-5-letter-spacing-factor: 1;

    --fz-heading-6-font-size-factor: 1;
    --fz-heading-6-line-height-factor: 1;
    --fz-heading-6-letter-spacing-factor: 1;

    --fz-paragraph-1-font-size-factor: 1;
    --fz-paragraph-1-line-height-factor: 1;
    --fz-paragraph-1-letter-spacing-factor: 1;

    --fz-paragraph-2-font-size-factor: 1;
    --fz-paragraph-2-line-height-factor: 1;
    --fz-paragraph-2-letter-spacing-factor: 1;

    --fz-paragraph-3-font-size-factor: 1;
    --fz-paragraph-3-line-height-factor: 1;
    --fz-paragraph-3-letter-spacing-factor: 1;

    --fz-system-text-1-font-size-factor: 1;
    --fz-system-text-1-line-height-factor: 1;
    --fz-system-text-1-letter-spacing-factor: 1;
  }
}

/* Custom Style Overrides */


/* HubSpot Form Overrides */

[data-hsfc-id=Renderer] .hsfc-TextInput {
  border-color: var(--fz-color-neutral-4) !important;
  border-radius: 0 !important;
}

[data-hsfc-id=Renderer] .hsfc-TextInput:hover,
[data-hsfc-id=Renderer] .hsfc-TextInput:focus {
  box-shadow: none !important;
  border-color: var(--fz-color-neutral-6) !important;
}


/* Force Paragraphs to be non-italic */
p, 
.fz-paragraph-1, 
.fz-paragraph-2, 
.fz-paragraph-3,
[class*="paragraph"] {
    font-style: normal !important;
}

ul li::before {
  --fz-marker-color: unset;
  color: inherit;
}