/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }

/* Sections
     ========================================================================== */

/**
   * Remove the margin in all browsers.
   */

body {
    margin: 0;
  }

/**
   * Render the `main` element consistently in IE.
   */

main {
    display: block;
  }

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }

/* Grouping content
     ========================================================================== */

/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

/* Text-level semantics
     ========================================================================== */

/**
   * Remove the gray background on active links in IE 10.
   */

a {
    background-color: transparent;
  }

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted; /* 2 */
  }

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */

b,
  strong {
    font-weight: bolder;
  }

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

/**
   * Add the correct font size in all browsers.
   */

small {
    font-size: 80%;
  }

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */

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

sub {
    bottom: -0.25em;
  }

sup {
    top: -0.5em;
  }

/* Embedded content
     ========================================================================== */

/**
   * Remove the border on images inside links in IE 10.
   */

img {
    border-style: none;
  }

/* Forms
     ========================================================================== */

/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */

button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */

button,
  input { /* 1 */
    overflow: visible;
  }

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */

button,
  select { /* 1 */
    text-transform: none;
  }

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */

button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }

/**
   * Remove the inner border and padding in Firefox.
   */

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

/**
   * Restore the focus styles unset by the previous rule.
   */

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

/**
   * Correct the padding in Firefox.
   */

fieldset {
    padding: 0.35em 0.75em 0.625em;
  }

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */

progress {
    vertical-align: baseline;
  }

/**
   * Remove the default vertical scrollbar in IE 10+.
   */

textarea {
    overflow: auto;
  }

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */

[type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */

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

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */

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

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }

/* Interactive
     ========================================================================== */

/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */

details {
    display: block;
  }

/*
   * Add the correct display in all browsers.
   */

summary {
    display: list-item;
  }

/* Misc
     ========================================================================== */

/**
   * Add the correct display in IE 10+.
   */

template {
    display: none;
  }

/**
   * Add the correct display in IE 10.
   */

[hidden] {
    display: none;
  }

/* Fonts
     ========================================================================== */

@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-regular-webfont.woff2?75ed1573a0428232374b0a00550fec8b) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-regularitalic-webfont.woff2?ad6f13abf357f2b2af4055601d7258b5) format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-medium-webfont.woff2?4c8fef82fcd80265b420404779923344) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-mediumitalic-webfont.woff2?61b84896c8917541d88cb35f474bb0e1) format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-bold-webfont.woff2?81100782b3e156f9110751d02d8f12d1) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "basier-circle";
    src: url(/fonts/basiercircle-bolditalic-webfont.woff2?cc4d74159d5b16ccddd58b2aac67a491) format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
/* ==========================================================================
   Fonts
   ========================================================================== */
   --font-brand: basier-circle, sans-serif;

   /* Fonts weights */
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-bold: 700;

   /* ==========================================================================
      Colors
      ========================================================================== */

   /* Brand
      ========================================================================== */
   --brand-xxtradark: #060a2c;
   --brand-xtradark: #303a8a;
   --brand-dark: #0f1ea2;

   --brand-xtramedium: #5a6f86;
   --brand-xxtramedium: hsl(250, 60%, 57%);
   --brand-mediumlight: color-mix(in srgb, var(--brand) 60%, white);
   --brand-medium: #ccd9e8;
   --brand: hsl(250, 82%, 57%);
   --brand-light: #eaf1f9;
   --brand-xtralight: #f7fafe;

   --orza-pro: var(--secondary);


   /* Secondary
      ========================================================================== */
   --secondary-xtradark: hsl(160, 88%, 17%);
   --secondary-dark: hsl(160, 80%, 38%);
   --secondary: hsl(160, 80%, 45%);
   --secondary-medium: hsl(160, 71%, 86%);
   --secondary-light: hsl(160, 67%, 94%);
   --secondary-xtralight: hsl(160, 65%, 97%);


   /* Secondary
      ========================================================================== */
   --terciary-xtramedium: #777567;
   --terciary-xtralight: #eeecdd;

   /* Neutral
      ========================================================================== */
   --neutral-xxtradark: hsl(255, 13%, 11%);
   --neutral-xtradark: hsl(254, 12%, 21%);
   --neutral-dark: hsl(254, 13%, 32%);
   --neutral: #6c6a76;
   --neutral-medium: #a6a6a8;
   --neutral-light: #dad9dd;
   --neutral-mediumlight: #e6e6e8;
   --neutral-xtralightmedium: #f2f2f2;
   --neutral-xtralight: #fafafa;
   --neutral-white: #ffffff;

   /* Message
      ========================================================================== */
   --destructive-dark: #b90000;
   --destructive: #f06666;
   --destructive-light: #fac9c9;

   --error-dark: #cd0101;
   --error: #f06666;
   --error-light: #f8d4d4;

   --warning: #fffbba;
   --warning-dark: #ffe261;

/* ==========================================================================
   Font sizes
   ========================================================================== */

   /* Font sizes */
   --font-size-1: 13px;
   --font-size-2: 14px;
   --font-size-3: 16px;
   --font-size-4: 19px;
   --font-size-5: 22px;
   --font-size-6: 26px;
   --font-size-7: 42px;
   --font-size-8: 68px;

   /* Font sizes names */
   --font-display: var(--fw-bold)  var(--font-size-8) / 1.12 var(--font-brand);
   --font-title: var(--fw-bold)  var(--font-size-7) / 1.25 var(--font-brand);
   --font-heading: var(--fw-bold) var(--font-size-6) / 1.25 var(--font-brand);
   --font-body-l: var(--font-size-5) / 1.2 var(--font-brand);
   --font-body-m: var(--font-size-4) / 1.37 var(--font-brand);
   --font-body: var(--font-size-3) / 1.45 var(--font-brand);
   --font-caption: var(--font-size-2) / 1.4 var(--font-brand);
   --font-caption-s: var(--font-size-1) / 1.2 var(--font-brand);

   --font-title-variable: clamp(var(--font-size-5),5vw,var(--font-size-7));
   --font-heading-variable: clamp(var(--font-size-5),5vw,var(--font-size-6));
   --font-display-variable: clamp(var(--font-size-6),6vw,var(--font-size-8));

/* ==========================================================================
   Spacing
   ========================================================================== */
   --spacing-0: 0px;
   --spacing-1: 7px;
   --spacing-2: 14px;
   --spacing-3: 28px;
   --spacing-4: 42px;
   --spacing-5: 56px;
   --spacing-6: 70px;
   --spacing-7: 84px;
   --spacing-8: 98px;
   --spacing-9: 112px;
   --spacing-10: 126px;
   --spacing-11: 140px;
   --spacing-12: 154px;
   --spacing-13: 168px;
   --spacing-14: 182px;
   --spacing-15: 196px;
   --spacing-16: 210px;
   --spacing-17: 224px;
   --spacing-18: 238px;
   --spacing-19: 252px;
   --spacing-20: 266px;
   --spacing-21: 280px;
   --spacing-22: 294px;
   --spacing-23: 308px;
   --spacing-24: 322px;


/* ==========================================================================
   Border-radius
   ========================================================================== */
   --border-radius-none: 0;
   --border-radius-s: calc(var(--spacing-1) / 2);
   --border-radius-m: var(--spacing-1);
   --border-radius-ml: var(--spacing-2);
   --border-radius-l: var(--spacing-3);
   --border-radius-xl: 50%;


/* ==========================================================================
   Sizes for layout
   ========================================================================== */
   --menu-width: var(--spacing-18);
   --submenu-width: var(--spacing-20);
   --header-height: 70px;
   --main-options-height: 66px;
   --banner-height: 64px;
}

@media (min-width: 1441px) {

:root {
      --menu-width: var(--spacing-21)
}
   }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

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

/* avoid white bounce space on scroll */

html {
    /* overflow-y: hidden; */
    /* height: 100%; */
}

body {
    /* overflow-y: auto; */
    /* min-height: 100%; */
    font-family: var(--font-brand);
    text-rendering: auto;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
b, strong {
    font-weight: var(--fw-bold);
}

i, em {
    font-style: italic;
}

code {
    word-wrap: break-word;
}

/* Layout */

.ly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(255px,1fr));
    grid-column-gap: var(--spacing-2);
    grid-row-gap: var(--spacing-3);
}

.ly-grid.align-start {
        align-items: start;
    }

.ly-grid.row-gap-s {
        grid-row-gap: var(--spacing-2);
    }

.ly-grid-sm {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    grid-column-gap: var(--spacing-2);
    grid-row-gap: var(--spacing-3);
}

.ly-grid-s {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    grid-column-gap: var(--spacing-2);
    grid-row-gap: var(--spacing-3);
}

.ly-grid-50 {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 960px) {

.ly-grid-50.is-responsive {
            grid-template-columns:1fr 1fr
    }
        }

.ly-grid-xs {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
    grid-column-gap: var(--spacing-1);
    grid-row-gap: var(--spacing-1);
}

.ly-grid-xs .escape-grid {
        grid-column: 1 / -1;
    }

.ly-grid-row-full {
    grid-column: 1 / -1;
}

.ly-grid-row-half{
    grid-column: 1 / -1;
}

@media (min-width: 960px) {

.ly-grid-row-half{
        grid-column: 1 / 5
}
    }

.ly-grid-center {
    display: grid;
    place-items: center;
}

.ly-inflex {
    display: inline-flex;
}

.ly-inflex.gap-m {
        gap: var(--spacing-3);
    }

.ly-flex {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-2);
}

.ly-flex.is-column {
        flex-direction: column;
    }

.ly-flex.ly3-1 > *:first-child {
                flex-grow: 9999;
                flex-basis: 100%;
            }

.ly-flex.ly3-1 > *:last-child {
                flex-grow: 1;
                min-width: 300px;
            }

.ly-flex.row-s {
        flex-direction: column;
    }

.ly-flex.row-s > * {
            width: 100%;
        }

@media (min-width: 960px) {

.ly-flex.row-s {
            flex-direction: row
    }
        }

.ly-flex.no-gap {
        gap: 0;
    }

.ly-flex.gap-xxs {
        gap: 1px;
    }

.ly-flex.gap-xs {
        gap: var(--spacing-1);
    }

.ly-flex.gap-s {
        gap: var(--spacing-2);
    }

.ly-flex.gap-m {
        gap: var(--spacing-3);
    }

.ly-flex.gap-ml {
        gap: var(--spacing-4);
    }

.ly-flex.gap-l {
        gap: var(--spacing-6);
    }

.ly-flex.flex-start {
        align-items: flex-start;
    }

.ly-flex.flex-stretch {
        align-items: stretch;
    }

.ly-flex.flex-end {
        align-items: flex-end;
    }

.ly-flex.justify-start {
        justify-content: flex-start;
    }

.ly-flex.justify-center {
        justify-content: center;
    }

.ly-flex.justify-end {
        justify-content: flex-end;
    }

.ly-flex.is-responsive {
        flex-wrap: wrap;
    }

.ly-flex.is-responsive-m {
        flex-wrap: wrap;
    }

@media (min-width: 960px) {

.ly-flex.is-responsive-m {
            flex-wrap: nowrap
    }
        }

.ly-flex.is-responsive-l {
        flex-wrap: wrap;
    }

@media (min-width: 1281px) {

.ly-flex.is-responsive-l {
            flex-wrap: nowrap
    }
        }

.ly-flex.has-columns > * {
            flex-grow: 1;
            flex-basis: 0;
        }

.ly-flex.has-columns > .flex-grow-xs {
            flex-grow: 0.5;
        }

.ly-flex.has-columns > .flex-grow-sm {
            flex-grow: 1.5;
        }

.ly-flex.has-columns > .flex-grow-m {
            flex-grow: 2;
        }

.ly-flex.has-columns > .flex-grow-l {
            /* fix subpixel */
            flex-grow: 2.1;
        }

.ly-flex.has-columns > .flex-grow-0 {
            flex-grow: 0;
            flex-basis: 1;
        }

.ly-flex.has-columns.is-responsive > * {
                flex-basis: 0;
                flex-shrink: 1;
                min-width: 150px
            }

@media (min-width: 1281px) {

.ly-flex.has-columns.is-responsive {
                flex-wrap: wrap
        }
            }

@media (max-width: 960px) {
                    .ly-flex.has-columns.is-responsive:has(.flatpickr-wrapper) > * {
                        flex-basis: 100%;
                    }
                }

.ly-flex.has-columns.is-responsive-l > * {
                flex-basis: 0;
                flex-shrink: 1;
                /* hack to prevent issue with v-select plugin */
                min-width: 150px
            }

.ly-flex.has-columns.is-responsive-l {
            flex-wrap: wrap;
}

@media (min-width: 1281px) {

.ly-flex.has-columns.is-responsive-l {
                flex-wrap: nowrap
        }
            }

.flex-center {
    align-items: center;
}

/* .wrapper,
.wrapper-s,
.wrapper-m,
.wrapper-l {
    width: 100%;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
    margin-left: auto;
    margin-right: auto;
}
.wrapper-s {
    max-width: 768px;
}
.wrapper-m {
    max-width: 960px;
}
.wrapper-l {
    max-width: 1280px;
}
.wrapper-xl {
    max-width: 1440px;
} */

/* delete padding in a div inside the wrapper */

/* .reset-padding {
    margin-left: calc(-1 * var(--spacing-2));
    width: calc(100% + var(--spacing-2) * 2);
}

@media (--screen-m) {
    .wrapper {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
    .reset-padding {
        margin-left: calc(-1 * var(--spacing-4));
        width: calc(100% + (var(--spacing-4) * 2));
    }
}

@media (--screen-l) {
    .wrapper{
        padding-left: var(--spacing-9);
        padding-right: var(--spacing-9);
    }
} */

.wrapper-content {
    width: 100%;
    padding-inline: var(--spacing-2);
}

/* @media (--max-screen-ml) {
        padding-inline: var(--spacing-2);
    } */

@media (min-width: 1024px) {

.wrapper-content {
        padding-inline: var(--spacing-3)
}
    }

@media (min-width: 1281px) {

.wrapper-content {
        padding-inline: var(--spacing-4)
}
    }

.wrapper-l {
    width: min(90%, 1200px);
    margin-inline: auto;
}

.wrapper-s{
    width: min(90%, 720px);
    margin-inline: auto;
}

.wrapper-xs {
    width: min(90%, 480px);
    margin-inline: auto;
}

/* Components */

.button-multiple {
    --color: var(--brand);
    --color-hover: var(--brand-dark);
    --color-active: var(--brand-dark);
    --color-selected: var(--neutral-xtradark);
    --color-unselected: var(--neutral);
    --icon-size: 20px;

    --background: transparent;
    --background-hover: transparent;
    --background-active: var(--neutral);
    --background-selected: var(--neutral-xtralight);
    --background-unselected: var(--neutral-white);

    --shadow-focus: var(--brand-medium);

    --border: currentColor;
    --border-hover: currentColor;
    --border-selected: var(--neutral-light);
    --border-unselected: currentColor;

    /* defautl button is-primary */
    --color: var(--neutral-white);
    --color-hover: var(--neutral-white);
    --color-active: var(--neutral-white);
    --background: var(--brand);
    --background-hover: var(--brand-dark);
    --background-active: var(--brand-xtradark);
    --shadow-focus: var(--brand-medium);

    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    text-align: center;
    max-width: 100%;
    padding: var(--spacing-1) calc(var(--spacing-1) * 3);
    color: var(--color);
    background: none;
    background-color: var(--background);
    border: none;
    border-color: var(--border);
    cursor: pointer;
    border-radius: var(--border-radius-m);
    font: var(--font-body);
    font-weight: var(--fw-bold);
    outline: 0;
    /* white-space: nowrap; */
    text-decoration: none;
    vertical-align: middle;

}

.button-multiple:hover {
        color: var(--color-hover);
        background-color: var(--background-hover);
        border-color: var(--border-hover);
    }

.button-multiple.is-focus,
    .button-multiple:focus-visible {
        box-shadow: 0 0 0 4px var(--shadow-focus);
    }

.button-multiple:active {
        color: var(--color-active);
        background-color: var(--background-active);
    }

.button-multiple svg {
        width: var(--icon-size);
        height: var(--icon-size);
        vertical-align: middle;
    }

.button-multiple svg > * {
            fill: currentColor;
        }

.button-multiple .button-pre {
        display: inherit;
    }

.button-multiple .button-pre svg {
            margin-right: calc(var(--spacing-2)/1.25);
        }

.button-multiple .button-text {
        white-space: nowrap;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.button-multiple .button-next {
        display: inherit;
    }

.button-multiple .button-next svg {
            margin-left: calc(var(--spacing-2)/1.25);
        }

/* &.is-primary {
        --background: var(--brand);
        --background-hover: var(--brand-dark);
        --color: var(--neutral-white);
        --color-hover: var(--neutral-white);
        --shadow-focus: var(--brand-medium);
        --color-active: var(--neutral-white);
        --background-active: var(--brand-xtradark);
    } */

.button-multiple.is-secondary {
        --background: var(--neutral-dark);
        --background-hover: var(--neutral-xtradark);
        --color: var(--neutral-white);
        --color-hover: var(--neutral-white);
        --shadow-focus: var(--neutral-medium);
        --color-active: var(--neutral-white);
        --background-active: var(--neutral-xtradark);
    }

/* Default button component */

.button-multiple.is-tertiary {
        --background: var(--neutral-white);
        --background-hover: var(--neutral-white);
        --color: var(--neutral-dark);
        --color-hover: var(--neutral-xtradark);
        --shadow-focus: var(--neutral-light);
        --color-active: var(--neutral);
        --background-active: var(--neutral-white);
        border-width: 1px;
        border-style: solid;
        --border: var(--neutral-medium);
        --border-hover: var(--neutral-dark);
        padding: calc(var(--spacing-1) - 1px) calc(var(--spacing-1) * 3);
    }

.button-multiple.is-pro {
        text-transform: uppercase;
        --background: var(--secondary);
        --background-hover: var(--secondary-dark);
        --color: var(--neutral-white);
        --color-hover: var(--neutral-white);
        --shadow-focus: var(--secondary-medium);
        --color-active: var(--neutral-white);
        --background-active: var(--secondary-xtradark);
    }

.button-multiple.is-destructive {
        --background: var(--destructive);
        --background-hover: var(--destructive-dark);
        --color: var(--neutral-white);
        --color-hover: var(--neutral-white);
        --shadow-focus: var(--destructive-light);
        --color-active: var(--neutral-white);
        --background-active:  var(--destructive-dark);
    }

.button-multiple.is-disabled,
    .button-multiple:disabled {
        --background: var(--neutral-light);
        --background-hover: var(--neutral-light);
        --color: var(--neutral-medium);
        --color-hover: var(--neutral-medium);
        pointer-events: none;
    }

.button-multiple.is-busy {
        color: var(--neutral-white);
        background-color: var(--neutral-light);
        --shadow-focus: var(--neutral-medium);
        cursor: wait;
    }

/* pointer-events: none;  */

.button-multiple.is-busy.is-tertiary {
            background-color: var(--neutral-xtralight);
            --border: var(--neutral-light);
            color: var(--neutral-light);
        }

.button-multiple.is-icon {
        --icon-size: 22px;
        aspect-ratio: 1;
        padding: var(--spacing-1);
    }

.button-multiple.is-icon .button-text {
            position: absolute;
            width: 1px;
            height: 1px;
            border: 0;
            clip: rect(0, 0, 0,0);
            margin: -1px;
            padding: 0;
            overflow: hidden;
        }

.button-multiple.is-icon .button-pre svg, .button-multiple.is-icon .button-next svg {
                margin: 0;
            }

.button-multiple.is-icon.is-mini {
            --icon-size: 15px;
            padding: calc(var(--spacing-2) / 1.75);
        }

.button-multiple.is-icon.has-tooltip {
            position: relative;
        }

.button-multiple.is-icon.has-tooltip::before {
                display: none;
                position: absolute;
                content: '';
                width: 0;
                height: 0;
                border-left: var(--spacing-1) solid transparent;
                border-right: var(--spacing-1) solid transparent;
                border-bottom: var(--spacing-1) solid var(--neutral-xtradark);
                z-index: 1;
                bottom: -6px;
            }

.button-multiple.is-icon.has-tooltip:hover .button-text {
                    clip: auto;
                    width: -moz-max-content;
                    width: max-content;
                    max-width: 110px;
                    top: calc(100% + var(--spacing-1));
                    height: auto;
                    padding: var(--spacing-1);
                    font: var(--font-caption-s);
                    background-color: var(--neutral-xtradark);
                    color: var(--neutral-white);
                    border-radius: var(--border-radius-s);
                }

.button-multiple.is-icon.has-tooltip:hover::before {
                    display: inline-block;
                }

.button-multiple.is-block svg {
            margin-right: 0;
            margin-top: calc(var(--spacing-1)/2);
        }

.button-multiple.is-block {
        flex-direction: column;
        gap: var(--spacing-1);
}

.button-multiple.is-multiline .button-text {
            white-space: normal;
        }

.button-multiple.is-fluid {
        width: 100%;
    }

.button-multiple.is-link {
        cursor: pointer;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
        border: none;
        text-decoration: none;
        --background: transparent;
        --background-hover: transparent;
        --background-active: transparent;
        --shadow-focus:transparent;
    }

.button-multiple.is-link:active {
            color: var(--brand-dark);
            background-color: transparent;
            --background-hover: transparent;
        }

/* svg {
            --baseline-distance: calc(var(--font-size-3) * 1.38);
            --icon-offset: calc(var(--baseline-distance) - var(--icon-size) / 2);
            transform: translateY(calc(var(--icon-offset) * -1));
        } */

.button-multiple.is-link.is-destructive {
            --color: var(--destructive);
            --color-hover: var(--destructive-dark);
            color: var(--color);
        }

.button-multiple.is-link.is-destructive:hover {
                color: var(--color-hover);
            }

.button-multiple.is-link.is-pro {
            --color: var(--secondary-dark);
            --color-hover: var(--secondary-xtradark);
            color: var(--color);
        }

.button-multiple.is-link.is-pro:hover {
                color: var(--color-hover);
            }

/* Use this class to unify input and button height */

.button-multiple.as-input {
        padding: var(--spacing-2) calc(var(--spacing-1) * 3);
    }

/* Specific sizes for buttons */

.button-multiple.font-caption-s {
        --icon-size: 18px;
        font: var(--font-caption-s);
        font-weight: var(--fw-bold);
    }

.button-multiple.font-caption {
        font: var(--font-caption);
        font-weight: var(--fw-bold);
    }

.button-multiple.font-body-m {
        --icon-size: 22px;
        font: var(--font-body-m);
        font-weight: var(--fw-bold);
        padding-block: calc(var(--spacing-1) * 1.75);
    }

.dialog,
.dialog-orza {
    position: fixed;
    z-index: 70;
    background-color: rgba(0, 0, 0, .5);
    inset: 0;
    overflow-y: auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {

.dialog,
.dialog-orza {
        padding-bottom: var(--spacing-8);
        align-items: flex-end
}
    }

/* state on dialog component */

@media (min-width: 480px) {

.dialog .rich-editor .rich-editor-nav, .dialog-orza .rich-editor .rich-editor-nav {
            top: 0
    }
        }

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1;
    border-top: 1px solid var(--neutral-light);
}

.dialog-content {
    position: relative;
    background-color: var(--neutral-white);
    width: min(100% - var(--spacing-3), calc(var(--spacing-15) * 2.25));
    max-height: calc(100vh - var(--spacing-5));
    overflow-y: auto;
    padding: var(--spacing-3);
    border-radius: var(--border-radius-m );
    box-shadow: 0 10px 15px 5px rgba(0, 0, 0, .25);
    text-align: center;
    /* svg {
        margin-bottom: var(--spacing-1);
    } */
}

.dialog-content .button-close {
        position: absolute;
        top: var(--spacing-1);
        right: var(--spacing-1);
    }

.dialog-content .txt-left {
        text-align: left;
    }

.dialog-content :where(p) {
        margin-top: 0;
        /* color: var(--neutral); */
        font: var(--font-caption);
    }

.dialog-content h2 {
        margin-top: 0;
        margin-bottom: var(--spacing-1);
        font: var(--font-body-m);
        font-weight: var(--fw-medium);
    }

.dialog-content h2 + .dialog-content h2:where(p) {
            margin-top: 0;
            color: var(--neutral-dark);
            font: var(--font-caption);
            font-weight: var(--fw-medium);
        }

/* fix icons align middle */

.dialog-content .font-body-m svg {
            transform: translateY(-2px);
        }

/* Review ul direct child */

.dialog-content > ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

.dialog-content > ul a {
            text-decoration: none;
            color: var(--brand);
        }

.dialog-content > ul a:hover.shadow-s {
                    background-color: var(--brand-dark);
                    color: var(--neutral-white);
                }

.dialog-content > ul a:hover.shadow-s svg > * {
                            fill: var(--neutral-white);
                        }

.dialog-content > ul a:active {
                color: var(--brand);
            }

.dialog-content .dialog-content-actions {
        margin-top: var(--spacing-3);
    }

.dialog-content.screen-s {
        width: min(100% - var(--spacing-3), 780px);
    }

/* Utilities */

/* Available for screen readers */

.visually-hide {
    position: absolute;
    width: 1px;
    height: 1px;
    border: 0;
    clip: rect(0, 0, 0,0);
    margin: -1px;
    padding: 0;
    overflow: hidden;
}

.hide {
    display: none;
}

@media(min-width: 1441px) {

.hide-xl,
a.hide-xl {
        display: none
}
    }

.hide-show-ml {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0,0);
    overflow: hidden;
    opacity: 0;
}

@media(min-width: 1024px) {

.hide-show-ml {
        position: relative;
        width: auto;
        height: auto;
        clip: inherit;
        opacity: 1
}
    }

.hide-show-xl {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0,0);
    overflow: hidden;
    opacity: 0;
}

@media(min-width: 1441px) {

.hide-show-xl {
        position: relative;
        width: auto;
        height: auto;
        clip: inherit;
        opacity: 1
}
    }

.border-radius-0 {
    border-radius: var(--border-radius-none);
}

.border-radius-s {
    border-radius: var(--border-radius-s);
}

.border-radius-m {
    border-radius: var(--border-radius-m);
}

.border-radius-l {
    border-radius: var(--border-radius-l);
}

.border-radius-ml {
    border-radius: var(--border-radius-ml);
}

.border-radius-xl {
    border-radius: var(--border-radius-xl);
}

.border-top-right-0 {
    border-top-right-radius: 0;
}

.border-bottom-right-0 {
    border-bottom-right-radius: 0;
}

.border-top-left-0 {
    border-top-left-radius: 0;
}

.border-bottom-left-0 {
    border-bottom-left-radius: 0;
}

/* COLORS  */

/* Brand
   ========================================================================== */

.bg-color-brand-xtradark {
    background-color: var(--brand-xtradark);
}

.bg-color-brand-dark {
    background-color: var(--brand-dark);
}

.bg-color-brand-medium {
    background-color: var(--brand-medium);
}

.bg-color-brand {
    background-color: var(--brand);
}

.bg-color-brand-light {
    background-color: var(--brand-light);
}

.bg-color-brand-xtralight {
    background-color: var(--brand-xtralight);
}

.bg-color-neutral-gradient {
    background: radial-gradient(circle, var(--neutral-white) 30%,  var(--neutral-dark) 130%);
}

.bg-color-brand-gradient {
    background: linear-gradient(180deg,var(--brand), var(--brand-dark));
}

/* Secondary
   ========================================================================== */

.bg-color-secondary-xtradark {
    background-color: var(--secondary-xtradark);
}

.bg-color-secondary-dark {
    background-color: var(--secondary-dark);
}

.bg-color-secondary {
    background-color: var(--secondary);
}

.bg-color-secondary-medium {
    background-color: var(--secondary-medium);
}

.bg-color-secondary-light {
    background-color: var(--secondary-light);
}

.bg-color-secondary-xtralight {
    background-color: var(--secondary-xtralight);
}

/* Neutral
   ========================================================================== */

.bg-color-neutral-xtradark {
    background-color: var(--neutral-xtradark);
}

.bg-color-neutral-dark {
    background-color: var(--neutral-dark);
}

.bg-color-neutral {
    background-color: var(--neutral);
}

.bg-color-neutral-medium {
    background-color: var(--neutral-medium);
}

.bg-color-neutral-mediumlight {
    background-color: var(--neutral-mediumlight);
}

.bg-color-neutral-light {
    background-color: var(--neutral-light);
}

.bg-color-neutral-xtralightmedium {
    background-color: var(--neutral-xtralightmedium);
}

.bg-color-neutral-xtralight {
    background-color: var(--neutral-xtralight);
}

.bg-color-neutral-white {
    background-color: var(--neutral-white);
}

/* Message
   ========================================================================== */

.bg-color-destructive-dark {
    background-color: var(--destructive-dark);
}

.bg-color-destructive {
    background-color: var(--destructive);
}

.bg-color-destructive-light {
    background-color: var(--destructive-light);
}

.bg-color-error-dark {
    background-color: var(--error-dark);
}

.bg-color-error {
    background-color: var(--error);
}

.bg-color-error-light {
    background-color: var(--error-light);
}

.bg-color-warning {
    background-color: var(--warning);
}

/* COLORS  */

/* Brand
   ========================================================================== */

:where(html) .color-brand-xtradark {
        color: var(--brand-xtradark);
    }

:where(html) .color-brand-dark {
        color: var(--brand-dark);
    }

:where(html) .color-brand-xtramedium {
        color: var(--brand-xtramedium);
    }

:where(html) .color-brand-medium {
        color: var(--brand-medium);
    }

:where(html) .color-brand {
        color: var(--brand);
    }

:where(html) .color-brand-light {
        color: var(--brand-light);
    }

:where(html) .color-brand-xtralight {
        color: var(--brand-xtralight);
    }

:where(html) .color-inherit {
        color: inherit;
    }

/* Secondary
   ========================================================================== */

.color-secondary-xtradark {
    color: var(--secondary-xtradark);
}

.color-secondary-dark {
    color: var(--secondary-dark);
}

.color-secondary {
    color: var(--secondary);
}

.color-secondary-medium {
    color: var(--secondary-medium);
}

.color-secondary-light {
    color: var(--secondary-light);
}

.color-secondary-xtralight {
    color: var(--secondary-xtralight);
}

/* Neutral
   ========================================================================== */

.color-neutral-xtradark {
    color: var(--neutral-xtradark);
}

.color-neutral-dark {
    color: var(--neutral-dark);
}

.color-neutral {
    color: var(--neutral);
}

.color-neutral-medium {
    color: var(--neutral-medium);
}

.color-neutral-light {
    color: var(--neutral-light);
}

.color-neutral-mediumlight {
    color: var(--neutral-mediumlight);
}

.color-neutral-xtralight {
    color: var(--neutral-xtralight);
}

.color-neutral-white {
    color: var(--neutral-white);
}

/* Message
   ========================================================================== */

.color-destructive-dark {
    color: var(--destructive-dark);
}

.color-destructive {
    color: var(--destructive);
}

.color-destructive-light {
    color: var(--destructive-light);
}

.color-error-dark {
    color: var(--error-dark);
}

.color-error {
    color: var(--error);
}

.color-error-light {
    color: var(--error-light);
}

.color-waring {
    color: var(--warning);
}

/* COLOR ON SVG */

svg.color-brand-xtradark > * {
        fill: var(--brand-xtradark);
    }

svg.color-brand-dark > * {
        fill: var(--brand-dark);
    }

svg.color-brand-medium > * {
        fill: var(--brand-medium);
    }

svg.color-brand > * {
        fill: var(--brand);
    }

svg.color-brand-light > * {
        fill: var(--brand-light);
    }

svg.color-brand-xtralight > * {
        fill: var(--brand-xtralight);
    }

svg.color-secondary-xtradark > * {
        fill: var(--secondary-xtradark);
    }

svg.color-secondary-dark > * {
        fill: var(--secondary-dark);
    }

svg.color-secondary > * {
        fill: var(--secondary);
    }

svg.color-secondary-medium > * {
        fill: var(--secondary-medium);
    }

svg.color-secondary-light > * {
        fill: var(--secondary-light);
    }

svg.color-secondary-xtralight > * {
        fill: var(--secondary-xtralight);
    }

svg.color-neutral-xtradark > * {
        fill: var(--neutral-xtradark);
    }

svg.color-neutral-dark > * {
        fill: var(--neutral-dark);
    }

svg.color-neutral > * {
        fill: var(--neutral:);
    }

svg.color-neutral-medium > * {
        fill: var(--neutral-medium);
    }

svg.color-neutral-light > * {
        fill: var(--neutral-light);
    }

svg.color-neutral-xtralight > * {
        fill: var(--neutral-xtralight);
    }

svg.color-neutral-white > * {
        fill: var(--neutral-white);
    }

svg.color-destructive-dark > * {
        fill: var(--destructive-dark);
    }

svg.color-destructrive > * {
        fill: var(--destructrive:);
    }

svg.color-destructive-light > * {
        fill: var(--destructive-light);
    }

svg.color-error-dark > * {
        fill: var(--error-dark);
    }

svg.color-error > * {
        fill: var(--error);
    }

svg.color-error-light > * {
        fill: var(--error-light);
    }

.font-display {
    font: var(--font-display);
}

.font-title {
    font: var(--font-title);
}

.font-heading {
    font: var(--font-heading);
}

.font-body-l {
    font: var(--font-body-l);
}

.font-body-m {
    font: var(--font-body-m);
}

.font-body {
    font: var(--font-body);
}

.font-caption {
    font: var(--font-caption);
}

.font-caption-s {
    font: var(--font-caption-s);
}

.font-display-body {
    font-size: clamp(var(--font-size-3), 4vw, var(--font-size-8));
}

.font-title-variable {
    font-size: var(--font-title-variable);
}

.font-heading-variable {
    font-size: var(--font-heading-variable);
}

.font-display-variable {
    font-size: var(--font-display-variable);
}

.fw-regular {
    font-weight: var(--fw-regular);
}

.fw-medium {
    font-weight: var(--fw-medium);
}

.fw-bold {
    font-weight: var(--fw-bold);
}

.txt-center {
    text-align: center;
}

.txt-right {
    text-align: right;
}

.txt-left {
    text-align: left;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.padding-0 {
    padding: 0;
}

.padding-xs {
    padding: calc(var(--spacing-1) / 2);
}

.padding-s {
    padding: var(--spacing-1);
}

.padding-m {
    padding: var(--spacing-2);
}

.padding-ml {
    padding: var(--spacing-3);
}

.padding-l {
    padding: var(--spacing-4);
}

.padding-top-0 {
    padding-top: 0;
}

.padding-top-s {
    padding-top: var(--spacing-1);
}

.padding-top-m {
    padding-top: var(--spacing-2);
}

.padding-top-ml {
    padding-top: var(--spacing-3);
}

.padding-top-l {
    padding-top: var(--spacing-4);
}

.padding-top-xxl {
    padding-top: var(--spacing-6);
}

.padding-right-s {
    padding-right: var(--spacing-1);
}

.padding-right-m {
    padding-right: var(--spacing-2);
}

/*: where html*/

.padding-left-0 {
    padding-left: 0;
}

.padding-left-s {
    padding-left: var(--spacing-1);
}

.padding-left-m {
    padding-left: var(--spacing-2);
}

.padding-left-ml {
    padding-left: var(--spacing-3);
}

.padding-left-l {
    padding-left: var(--spacing-4);
}

.padding-bottom-0 {
    padding-bottom: 0;
}

.padding-bottom-s {
    padding-bottom: var(--spacing-1);
}

.padding-bottom-m {
    padding-bottom: var(--spacing-2);
}

.padding-bottom-ml {
    padding-bottom: var(--spacing-3);
}

.padding-bottom-l {
    padding-bottom: var(--spacing-4);
}

.padding-bottom-xl {
    padding-bottom: var(--spacing-6);
}

.padding-bottom-xxl {
    padding-bottom: var(--spacing-8);
}

.pading-block-xxl {
    padding-block: var(--spacing-11);
}

.margin-0 {
    margin: 0;
}

.margin-top-0 {
    margin-top: 0;
}

.margin-top-s {
    margin-top: var(--spacing-1);
}

.margin-top-m {
    margin-top: var(--spacing-2);
}

.margin-top-ml {
    margin-top: var(--spacing-3);
}

.margin-top-l {
    margin-top: var(--spacing-4);
}

.margin-top-xl {
    margin-top: var(--spacing-6);
}

.margin-top-xxl {
    margin-top: var(--spacing-8);
}

.margin-right-s {
    margin-right: var(--spacing-1);
}

.margin-right-m {
    margin-right: var(--spacing-2);
}

.margin-right-l {
    margin-right: var(--spacing-4);
}

.margin-left-a {
    margin-left: auto;
}

.margin-left-s {
    margin-left: var(--spacing-1);
}

.margin-left-m {
    margin-left: var(--spacing-2);
}

.margin-left-ml {
    margin-left: var(--spacing-3);
}

.margin-left-l {
    margin-left: var(--spacing-4);
}

.margin-bottom-a {
    margin-bottom: auto;
}

.margin-bottom-0 {
    margin-bottom: 0;
}

.margin-bottom-s {
    margin-bottom: var(--spacing-1);
}

.margin-bottom-m {
    margin-bottom: var(--spacing-2);
}

.margin-bottom-ml {
    margin-bottom: var(--spacing-3);
}

.margin-bottom-l {
    margin-bottom: var(--spacing-4);
}

.margin-bottom-xl {
    margin-bottom: var(--spacing-6);
}

.margin-bottom-xxl {
    margin-bottom: var(--spacing-8);
}

.margin-inline-a {
    margin-inline: auto;
}

.bw-t-1 {
    border-top: 1px solid currentColor;
}

.bw-b-1 {
    border-bottom: 1px solid currentColor;
}

.bw-1 {
    border: 1px solid currentColor;
}

.bw-2 {
    border: 2px solid currentColor;
}

.bw-s {
    border: 3px solid currentColor;
}

.bw-block-1 {
    border-block: 1px solid currentColor;
}

.w-s {
    width: var(--spacing-5);
}

.w-m {
    width: var(--spacing-8);
}

.w-100 {
    width: 100%;
}

.w-min-s {
    min-width: 115px;
}

.w-min-sm {
    min-width: 170px;
}

.w-min-m {
    min-width: 225px;
}

.w-min-0 {
    min-width: 0;
}

.w-max-xs {
    max-width: 90px;
}

.w-max-s {
    max-width: 115px;
}

.w-max-sm {
    max-width: 150px;
}

.w-max-m {
    max-width: 250px;
}

.w-max-ml {
    max-width: 460px;
}

.w-max-l {
    max-width: calc(var(--spacing-24) * 1.5);
}

.w-max-xl {
    max-width: calc(var(--spacing-24) * 2);
}

.w-max-xxl {
    max-width: calc(var(--spacing-24) * 3);
}

.w-max-content {
    max-width: -moz-max-content;
    max-width: max-content;
}

.w-max-100 {
    max-width: 100%;
}

.h-max-xs {
    max-height: 90px;
}

.h-max-s {
    max-height: 115px;
}

.h-100 {
    height: 100%;
}

.min-h-100 {
    min-height: 100vh;
}

.min-h-62 {
    min-height: calc(100% - 62px) !important;
}

.header-height {
    height: var(--header-height);
}

/* Modules */

/* specific for site */

:root {
    --color-svg-1: var(--brand);
    --color-svg-2: #17D193;

    --color-svg-3: #F9CA57;
    --color-svg-4: #F87656;

    --site-header-height: 76.55px;
}

.color-svg-1 {
    fill: var(--color-svg-1);
}

.color-svg-2 {
    fill: var(--color-svg-2);
}

.color-svg-3 {
    fill: var(--color-svg-3);
}

.color-svg-4 {
    fill: var(--color-svg-4);
}

.intro {
    /* nav-menu */
    --color-front-1: var(--brand);
    --color-front-hover-1: var(--brand-dark);
    --color-back-button-1: var(--color-front-1);
    --color-button-1: var(--neutral-white);

    /* nav-menu-site */
    --color-back-1: var(--neutral-white);
    --color-front-2: var(--neutral-dark);
    --color-front-hover-2: var(--brand);
    --color-front-3: var(--neutral);
}

.header-container {
    position: relative;
}

.header-container a {
        text-decoration: none;
    }

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 960px) {

.header {
        -moz-column-gap: var(--spacing-3);
             column-gap: var(--spacing-3)
}
    }

.header ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

.header .is-link {
        background-color: transparent;
        outline: none;
        color: var(--color-front-1);
        font-weight: var(--fw-medium);
    }

.header .is-link:hover {
            background-color: transparent;
            color: var(--brand-dark);
        }

.logo {
    margin: 0;
}

.logo a {
        display: flex;
    }

.logo svg {
        width: 110px;
    }

.logo svg > * {
            fill: var(--color-front-1);
        }

.logo .logo-orza {
        transform: translateY(0px);
        transition:  200ms ease-out 400ms;
    }

.logo .logo-line   {
        width: 56px;
        transform:translateX(0px);
        transition: 200ms ease-in-out 200ms;
    }

.logo:hover .logo-orza {
            transform: translateY(-11px);
            transition:  200ms ease-in 50ms;
        }

.logo:hover .logo-line   {
            width: 140px;
            transform:translateX(-84px);
        }

/* main list */

.nav-menu >ul {
        display: flex;
    }

.nav-menu >ul > li {
            position: relative;
        }

.nav-menu >ul > li .button-multiple {
                display: inline-flex;
                padding: 0;
                background-color: transparent;
                border: none;
                cursor: pointer;
                border-radius: 0;
            }

.nav-menu >ul > li .button-multiple .button-text {
                    display: none;
                }

/* hamburguer menu icon on button */

.nav-menu >ul > li .button-multiple svg {
                    width: 22px;
                    height: 22px;
                    margin-right: 0 !important;
                }

.nav-menu >ul > li .button-multiple svg > * {
                        stroke: var(--color-front-1);
                    }

.nav-menu >ul > li .button-multiple:hover {
                    background-color: transparent;
                }

.nav-menu >ul > li .button-multiple:hover svg > * {
                        opacity: .7;
                    }

.nav-menu >ul > li:not(:first-child) {
                display: none;
            }

.nav-menu >ul > li a, .nav-menu >ul > li .button-multiple span {
                width: -moz-max-content;
                width: max-content;
                padding: var(--spacing-3) calc(var(--spacing-1) * 2.5);
                font-size: 16px;
                font-weight: var(--fw-medium);
                letter-spacing: .008rem;
                color: var(--color-front-1);
                line-height: 100%;
            }

.nav-menu >ul > li a:hover, .nav-menu >ul > li .button-multiple span:hover {
                    background-color: transparent;
                    color: var(--color-front-hover-1);
                }

/* .button-multiple span  {
                transform: translateY(-2px);
            } */

.nav-menu >ul > li a {
                display: block;
                font-weight: var(--fw-medium);
            }

@media (min-width: 960px) {

.nav-menu{
        margin-right: auto;
        flex: 1 1 auto
}
                .nav-menu > ul >li:not(:first-child) {
                    display: block;
                }
                    .nav-menu > ul >li .button-multiple .button-pre {
                        display: none;
                    }

                    .nav-menu > ul >li .button-multiple .button-text {
                        display: inline-block;
                    }
    }

@media (max-width: 960px) {

.nav-menu{
        order: 3
}
    }

@media (min-width: 960px) {

.nav-menu-modules {
        grid-column: 1 / 2
}
    }

@media (min-width: 960px) {

.nav-menu-modules {
        grid-column: 2 / 3
}
    }

.product-menu-arrow {
    pointer-events: none;
    display: none;
}

@media (min-width: 960px) {

.product-menu-arrow {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid var(--color-back-1);
        z-index: 2;
        position: absolute;
        top: 62px;
        transform: translateX(37px) translateY(0);
        opacity: 1;
        transition: transform 150ms ease-in-out,  opacity 250ms ease-in-out
}

        .product-menu-arrow[aria-expanded="false"]{
            opacity: 0;
            transform: translateX(37px) translateY(15px);
            border: none;
        }
    }

.nav-menu-site {
    --columns: 2;
    --icon-offset: calc(var(--spacing-2) + var(--spacing-2) * 1.25);
    
    --max-width: 100%;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: auto;
    top: 15px;
    left: 0;
    opacity: 1;
    box-shadow: 0 3px 15px rgba(99, 99, 99, 0.3);
    border-radius: var(--border-radius-m);
    background-color: var(--color-back-1);
}

.nav-menu-site > div {
        position: relative;
        padding: var(--spacing-4) 0 0;
        --max-width: 1200px;
        display: grid;
        grid: auto/repeat(var(--columns),1fr);
        align-items: start;
        gap: var(--spacing-5);
        width: min(90%, var(--max-width));
        left: calc(50% - (min(90%, var(--max-width)) / 2));

    }

.nav-menu-site {
    margin: 0;
    transform: translateY(0px);
    transition: transform 150ms ease-in-out,  opacity 250ms ease-in-out;
}

/* state show */

.nav-menu-site::before {
        content: "";
        display: block;
        position: absolute;
        top: -20px;
        width: 100%;
        height: 20px;
    }

.nav-menu-site ul {
        font: var(--font-caption-s);
    }

.nav-menu-site ul:not(:last-child) {
            margin-bottom: var(--spacing-3);
        }

@media (min-width: 960px) {

.nav-menu-site ul {
            font: var(--font-caption)
    }
        }

.nav-menu-site ul svg {
            position: absolute;
            width: 20px;
            height: 20px;
            margin-right: calc(var(--spacing-1) / 2);
            vertical-align: middle;
            margin-left: calc(var(--icon-offset) * -1);
            transition: transform 150ms ease-in-out;
        }

.nav-menu-site ul svg > * {
                mix-blend-mode: multiply;
                /* stroke-width: 0px; */
            }

/* icon subpixel fix */

.nav-menu-site ul svg:first-child {
                transform: translateY(-1px);
            }

.nav-menu-site ul li:not(:first-child) a {
                padding-left: var(--icon-offset);
            }

.nav-menu-site ul li a {
                position: relative;
                height: 100%;
                display: block;
                padding-block: calc(var(--spacing-1) * 1.25);
                color: var(--color-front-2);
                font-weight: var(--fw-medium);
            }

.nav-menu-site ul li a .icon-arrow {
                    position: absolute;
                    stroke: 1px;
                    width: 10px;
                    height: 8px;
                    right: 0;
                    margin-inline: 0;
                    stroke-width: 1px;
                    transform: translateX(0) translateY(5.75px);
                    /* opacity: 0; */
                    transition: transform 100ms ease-in-out,  opacity 100ms ease-in-out;
                }

@media (min-width: 960px) {

.nav-menu-site ul li a .icon-arrow {
                        transform: translateX(0) translateY(7px)
                }
                    }

.nav-menu-site ul li a:hover {
                    color: var(--color-front-hover-2);
                }

.nav-menu-site ul li a:hover svg > * {
                            fill: var(--color-front-hover-2);
                            /* opacity: .6; */
                        }

.nav-menu-site ul li a:hover .icon-arrow {
                        stroke: var(--color-front-hover-2);
                        transform: translateX(calc(var(--spacing-1) / 1.5)) translateY(5.25px) !important;
                        opacity: 1;
                    }

@media (min-width: 960px) {

.nav-menu-site ul li a:hover .icon-arrow {
                            transform: translateX(calc(var(--spacing-1) / 1.5)) translateY(7px) !important
                    }
                        }

.nav-menu-site ul li a:hover .icon-arrow-top {
                        animation: 100ms arrow-top linear forwards;
                    }

.nav-menu-site ul li a:hover .icon-arrow-bottom {
                        animation: 100ms arrow-bottom linear forwards;
                    }

.nav-menu-site ul.has-rotation a:hover svg {
                        transform: rotate(90deg);
                    }

.nav-menu-site ul.has-rotation a:hover svg.icon-arrow {
                            transform: rotate(0deg);
                        }

@media (min-width: 960px) {

.nav-menu-site {
        --columns: 3;
        top: 72px;
        padding: calc(var(--spacing-1))
}
    }

@media (min-width: 960px) {

.nav-menu-site {
        --columns: 4
}
    }

.nav-menu-site[aria-expanded="false"]{
        position: absolute;
        width: 1px;
        height: 1px;
        border: 0;
        clip: rect(0, 0, 0,0);
        margin: -1px;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(15px);
    }

.nav-menu-features {
    position: relative;
    grid-column: span 2;
    display: grid;
    gap: 0 var(--spacing-3);
    grid: auto/repeat(2,1fr);
    /* change this if we add more items - repeat... */
    grid-template-rows: repeat(6, max-content);
    grid-auto-flow: column;
}

.nav-menu-features li:first-child {
            grid-column: span 2;
        }

.nav-menu-features li a:hover svg:first-child > * {
                        opacity: .7;
                    }

/* separators lines */

.nav-menu-features::before,
    .nav-menu-features::after {
        position: absolute;
        content: "";
        display: block;
        grid-column: span 2;
        width: calc(100% + var(--spacing-3) * 2);
        height: 1px;
        background-color: var(--brand-light);
        margin-left: calc(var(--spacing-3) * -1);
    }

@media (min-width: 960px) {

.nav-menu-features::before,
    .nav-menu-features::after {
            display: none
    }
        }

.nav-menu-features::before {
        top: 0;
        transform: translateY(calc(var(--spacing-3) * -1));
    }

.nav-menu-features::after {
        bottom: 0;
        transform: translateY(var(--spacing-3));
    }

@media (min-width: 960px) {

.nav-menu-features {
        grid-column: 2 / 5;
        grid-row: 1/ 3
}
    }

@media (min-width: 960px) {

.nav-menu-features {
        grid-column: 3 / 5;
        margin-left: 0
}
    }

.icon-arrow > *{
        stroke-linecap: round;
    }

@keyframes arrow-top {
    0% {
        transform-origin: center;
        transform: rotate(0deg);
    }
    100% {
        transform-origin: center;
        transform: rotate(30deg) translateY(-1.4px);
    }
}

@keyframes arrow-bottom {
    0% {
        transform-origin: center;
        transform: rotate(0deg);
    }
    100% {
        transform-origin: center;
        transform: rotate(-30deg) translateY(1.4px);
    }
}

.button-close {
    position: absolute;
    right: calc(var(--spacing-1));
    top: calc(var(--spacing-1));
    background-color: transparent;
}

.button-close:hover {
        background-color: transparent;
    }

.button-close:hover svg path{
           stroke : var(--color-front-hover-1);
        }

@media (min-width: 960px) {

.button-close {
        display: none
}
    }

.nav-menu-section {
    color: var(--color-front-3);
    letter-spacing: .02rem;
    margin-bottom: calc(var(--spacing-1) * 2.5);
    font: var(--font-body);
    font-weight: var(--fw-medium);
    border-bottom: 1px solid var(--neutral-light);
    padding-bottom: var(--spacing-1);
}

.nav-menu-user {
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-3);
    grid-column: 1 / -1;
    background-color: var(--brand-xtralight);
    border-top: 1px solid var(--brand-light);
    margin-left: calc(var(--spacing-3) * -1);
    width: calc(var(--spacing-3) * 2 + 100%);
    border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
}

.nav-menu-user a {
        outline: 1px solid var(--color-button-1);;
        outline-offset: -1px;
        transition: ease-in-out 150ms;
    }

.nav-menu-user a:hover{
            outline-offset: calc(var(--spacing-1) / 1.25);
        }

.nav-user {
    display: none;
    font: var(--font-caption);
}

.nav-user span {
        color: var(--color-button-1);
    }

.nav-user a{
        color: var(--color-button-1);
        background-color: var(--color-back-button-1);
        outline: 1px solid var(--color-back-button-1);
        outline-offset: -1px;
        transition: ease-in-out 150ms;
    }

.nav-user a:hover{
            background-color: var(--color-back-button-1);
                    color: var(--color-front-hover-1) !important;
            outline-offset: calc(var(--spacing-1) / 1.25);
        }

@media (min-width: 960px) {

.nav-user {
        display: flex;
        -moz-column-gap: var(--spacing-2);
             column-gap: var(--spacing-2);
        align-items: center
}
    }

.nav-lang {
    display: inline-flex;
    align-items: center;
    -moz-column-gap: var(--spacing-1);
         column-gap: var(--spacing-1);
    color: var(--color-front-1);
    font: var(--font-caption-s);
    
    margin-left: auto;
}

.nav-lang svg {
        min-width: 22px;
    }

.nav-lang span {
        display: none;
    }

@media (min-width: 960px) {

    .nav-lang span {
        display: inline-block;
    }
    }

.nav-lang svg * {
        fill: var(--color-front-1);
    }

.nav-lang:hover {
        color: var(--color-front-hover-1);
    }

.nav-lang:hover svg * {
            fill: var(--color-front-hover-1);
        }

@media (min-width: 960px) {

.show-responsive-s {
       display: none
}
    }

/* todo test intro */

.intro-promo {
    --color-promo: var(--brand);
    --color-promo-alt:var(--brand);
    --color-promo-button: var(--brand);
    --color-svg: var(--brand);

    padding-block: var(--spacing-3);

    display: grid;
}

@media (min-width: 768px) {

.intro-promo {
        grid-template-columns: 3fr 2fr;
        -moz-column-gap: var(--spacing-4);
             column-gap: var(--spacing-4);
        align-items: center;
        padding-block: var(--spacing-8);
        /* min-height: calc(100vh - var(--site-header-height)); */
        min-height: calc(50vh - var(--site-header-height))
}
    }

/* div {
    } */

.intro-promo h2 {
        max-width: 650px;
        /*
        padding-top: 8vh; */
        margin:0;
        margin-bottom: var(--spacing-2);
        font-size: clamp(var(--font-size-6), 6vw, var(--font-size-8));
        line-height: 105%;
        letter-spacing: -0.01em;
        color: var(--color-promo);
    }

.intro-promo h2 + p {
            font: var(--font-body-m);
            line-height: 1.8rem;
            max-width: 500px;
            margin-bottom: 0;
            color: var(--color-promo-alt);
        }

.intro-promo h2 + p + a {
                margin-top: var(--spacing-4);
            }

@media (min-width: 768px) {

.intro-promo h2 {
            margin-bottom: var(--spacing-5)
    }
        }

.intro-promo .button-multiple {
        background-color: var(--color-promo);
        color: var(--color-promo-button);
        outline: 1px solid var(--color-promo);
        outline-offset: -1px;
        transition: ease-in-out 150ms;
    }

.intro-promo .button-multiple:hover{
            outline-offset: calc(var(--spacing-1) / 1.25);
        }

@media (max-width: 769px) {

.intro-promo .button-multiple {
            outline: none
    }
        }

.intro-promo svg {
        display: block;
        min-width: 0;
        width: 100%;
        height: auto;
        margin-top: var(--spacing-4);
        /* border: 1px solid var(--color-svg); */
        /* border-radius: var(--border-radius-xl); */
        /* background-color: white; */
        vertical-align: middle;
        shape-rendering: auto;
    }

.intro-promo svg > * {
            stroke: var(--color-svg);
            stroke-width: 1;
            stroke-linejoin: round;
        }

@media (min-width: 768px) {

.intro-promo svg {
            margin-top: 0
    }
        }

.home .intro, .referral .intro {
        background-color: var(--brand);
        /* nav-menu */
        --color-front-1: var(--neutral-white);
        --color-front-hover-1: var(--brand-medium);
        --color-back-button-1: var(--color-front-1);
        --color-button-1: var(--brand);
    }

.home .intro-promo, .referral .intro-promo {
        --color-svg:  var(--neutral-white);
        --color-promo: #21FEB4;
        --color-promo-alt:var(--brand-light);
        --color-promo-button: var(--brand);
    }

.estimations .intro {
        background-color: #FBD068;

        /* nav-menu */
        --color-front-1: #424242;
        --color-front-hover-1: #111111;
        --color-back-button-1: #424242;
        --color-button-1: #FBD068;
    }

.estimations .intro-promo {
        --color-promo: #424242;
        --color-promo-alt: #424242;
        --color-svg: #424242;
        --color-svg-3: var(--color-svg-2);
        /* --color-svg-4: var(--color-svg-2); */
    }

.expenses .intro {
        background-color: #17d193;
        /* nav-menu */
        --color-front-1: #294038;
        --color-front-hover-1: #111111;
        --color-back-button-1: #294038;
        --color-button-1: #17d193;
    }

.expenses .intro-promo {
        --color-promo: #294038;
        --color-promo-alt: #294038;
        --color-svg: #294038;
        --color-svg-3: #FBD068;
    }

.invoice-custom-series .intro, .accountant .intro, .expense-types .intro, .api-access .intro, .custom-taxes .intro, .verifactu .intro, .export-data .intro, .multiple-companies .intro, .multiple-currencies .intro, .recurring-texts .intro {
        background-color: #dbf2ce;
        --color-front-1: #42103d;
        --color-front-hover-1: #984190;
        --color-back-button-1: #42103d;
        --color-button-1: #dbf2ce;
    }

.invoice-custom-series .intro-promo, .accountant .intro-promo, .expense-types .intro-promo, .api-access .intro-promo, .custom-taxes .intro-promo, .verifactu .intro-promo, .export-data .intro-promo, .multiple-companies .intro-promo, .multiple-currencies .intro-promo, .recurring-texts .intro-promo {
        --color-promo: #42103d;
        --color-promo-alt: #42103d;
        --color-svg: #42103d;
        --color-svg-3: #5ee8c1;
        --color-svg-4: #ff3f6f;
    }

.invoices .intro {
        background-color: #f37a53;

        /* nav-menu */
        --color-front-1: #332825;
        --color-front-hover-1: var(--neutral-white);
        --color-back-button-1: #332825;
        --color-button-1: #f37a53;
    }

.invoices .intro-promo {
        --color-promo: #332825;
        --color-promo-alt: #332825;
        --color-svg: #332825;
        --color-svg-3: var(--color-svg-1);
        --color-svg-4: var(--color-svg-2);
    }

.partners .intro, .contacts .intro {
        background-color: var(--brand-medium);

        --color-front-1: var(--brand-xtradark);
        --color-front-hover-1: var(--brand-xxtradark);
        --color-back-button-1: var(--brand-xtradark);
        --color-button-1: var(--brand-medium);
    }

.partners .intro-promo, .contacts .intro-promo {
        --color-promo: var(--brand-xtradark);
        --color-promo-alt: var(--brand-xtradark);
        --color-svg: var(--brand-xtradark);
        --color-svg-3: var(--color-svg-1);
        --color-svg-4: var(--color-svg-2);
    }

.features .intro, .security .intro, .statistics .intro, .support .intro, .business-lines .intro, .nextsteps .intro, .products .intro {
        background-color: var(--neutral-mediumlight);

        --color-front-1: var(--neutral-xtradark);
        --color-front-hover-1: var(--neutral);
        --color-back-button-1: var(--neutral-xtradark);
        --color-button-1: var(--neutral-mediumlight);
    }

.features .intro-promo, .security .intro-promo, .statistics .intro-promo, .support .intro-promo, .business-lines .intro-promo, .nextsteps .intro-promo, .products .intro-promo {
        --color-promo: var(--neutral-xtradark);
        --color-promo-alt: var(--neutral);
        --color-svg: var(--neutral-xtradark);
        --color-svg-3: var(--color-svg-2);
        /* --color-svg-4: var(--color-svg-2); */
    }

.features .call-to-action {
        --bg-call: #121212;
        --bg-call-alt: var(--neutral-light);
        --fw-call: var(--neutral-light);
    }

.orzame-logo > * {
        fill: var(--brand);
        /* mix-blend-mode: darken; */
    }

.orzame-logo .orz-circle-1 {
        animation: orz-o 12s 0s  ease-in-out infinite;
    }

.orzame-logo .orz-circle-2 {
        opacity: 0;
        animation: orz-o-3 12s 0s  ease-in-out infinite;
    }

.orzame-logo .orz-circle-3 {
        opacity: 0;
        animation: orz-o-2 12s 0s  ease-in-out infinite;
    }

.orzame-logo .orz-rectangle {
        opacity: 0;
        animation: orz-r 12s 0s ease-in-out infinite;
    }

.orzame-logo .orz-triangle-1 {
        opacity: 0;
        animation: orz-t-1 12s 0s ease-in-out infinite;
    }

.orzame-logo .orz-triangle-2 {
        opacity: 0;
        animation: orz-t-2 12s 0s ease-in-out infinite;
    }

@keyframes orz-o {
    0% {
        transform: translateX(-45.5%) scale(1.91);
        stroke-width: .6;
    }
    15% {
        transform: translateX(-45.5%) scale(1.91);
        stroke-width: .6;
    }
    18% {
        transform: translateX(23.8%) scale(1);
        stroke-width: 1;
    }
    31% {
        transform: translateX(23.8%);
    }
    33% {
        transform: translateX(-23.8%);
    }
    47% {
        transform: translateX(-23.8%);
    }
    49% {
        transform: translateX(0);
    }
    63% {
        transform: translateX(0) translateY(0%);
        opacity: 1;
    }
    65% {
        transform: translateX(0%) translateY(23.8%);;
        opacity: 0;
    }
    79% {
        transform: translateX(0%);
        opacity: 0;
    }
    82% {
        transform: translateX(23.8%);
        opacity: 1;
    }
    98% {
        transform: translateX(23.8%) scale(1);
        stroke-width: 1;
    }
    100% {
        transform: translateX(-45.5%) scale(1.91);
        stroke-width: .6;
    }
}

@keyframes orz-o-2 {
    0% {
    }
    15% {
    }
    18% {
    }
    31% {
        opacity: 0;
        transform: translateX(-23.8%);
    }
    33% {
        opacity: 1;
        transform: translateX(0%);
    }
    47% {
    }
    49% {
    }
    63% {
        opacity: 1;
        transform: translateX(0%);
    }
    65% {
        transform: translateX(-23.8%);
        opacity: 0;
    }
    79% {
        opacity: 0;
        transform: translateX(-23.8%);
    }
    82% {
        opacity: 1;
        transform: translateX(0%);
    }
    98% {
        opacity: 1;
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-23.8%);
        opacity: 0;
    }
}

@keyframes orz-o-3 {
    0% {
    }
    15% {
    }
    18% {
    }
    31% {
    }
    33% {
    }
    47% {
        opacity: 0;
        transform: translateX(23.8%);
    }
    49% {
        opacity: 1;
        transform: translateX(0%);
    }
    63% {
        opacity: 1;
        transform: translateX(0%);
    }
    65% {
        opacity: 0;
        transform: translateX(23.8%);
    }
    79% {
        opacity: 0;
        transform: translateX(calc(23.8% * 2)) translateY(0%);
    }
    82% {
        opacity: 1;
        transform: translateX(calc(23.8% * 2)) translateY(-23.8%);
    }
    98% {
        opacity: 1;
        transform: translateX(calc(23.8% * 2)) translateY(-23.8%);
    }
    100% {
        transform: translateX(23.8%) translateY(-23.8%);
        opacity: 0;
    }
}

@keyframes orz-r {
    0% {
        transform: translateX(0) skewX(0deg);
    }
    15% {
        transform: translateX(0) skewX(0deg);
        opacity: 0;
    }

    18% {
        transform: translateX(-23.8%) skewX(0deg);
        opacity: 1;
    }
    31% {
        transform: translateX(-23.8%) skewX(0deg);
        opacity: 1;
    }
    33% {
        transform: translateX(25%) skewX(-26.5deg);
        opacity: 1;
    }

    47% {
        transform: translateX(25%) skewX(-26.5deg);
        opacity: 1;
    }

    49% {
        transform: translateX(25%) skewX(-26.5deg);
        opacity: 0;
    }

    79% {
        transform: translateX(0%) skewX(0deg);
        opacity: 0;
    }

    82% {
        transform: translateX(-23.8%) skewX(0deg);
        opacity: 1;
    }
    98% {
        transform: translateX(-23.8%) skewX(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(0%) skewX(0deg);
        opacity: 0;
    }
}

@keyframes orz-t-1 {
    0% {
    }
    15% {
    }
    18% {
    }
    31% {
    }
    33% {
    }
    47% {
    }
    49% {
    }
    63% {
        opacity: 0;
        transform: translateX(23.8%);
    }
    65% {
        transform: translateX(0%);
        opacity: 1;
    }
    79% {
        opacity: 1;
        transform: translateX(0%);
    }
    82% {
        opacity: 0;
        transform: translateX(23.8%);
    }
    98% {
    }
    100% {
        transform: translateX(0%);
        opacity: 0;
    }
}

@keyframes orz-t-2 {
    0% {
        width: 100%;
    }
    15% {
    }
    18% {
    }
    31% {
    }
    33% {
    }
    47% {
    }
    49% {
    }
    63% {
        opacity: 0;
        transform: translateX(-23.8%);
    }
    65% {
        transform: translateX(0%);
        opacity: 1;
    }
    79% {
        opacity: 1;
        transform: translateX(0%);
    }
    82% {
        opacity: 0;
        transform: translateX(23.8%);
    }
    98% {
    }
    100% {
        transform: translateX(0%);
        opacity: 0;
    }
}

.price .card-price {
        box-shadow: 0 5px 15px 2px rgba(10, 10, 10, 0.25);
        outline: 1px solid var(--neutral-white);
        outline-offset: -1px;
        min-width: 250px !important;
    }

.price .card-price:hover{
            outline-offset: .5rem;
        }

.price .card-price-title {
        text-align: left;
        margin-bottom: .5rem;
    }

.price .card-price-description {
        border-top: 1px solid var(--neutral-medium);
        text-align: left;
        padding-top: .5rem;
    }

.price .card-price-pricing {
        display: block;
        text-align: center;
    }

.price .card-price-features{
        border-block: 1px solid var(--neutral-mediumlight);
    }

.price .intro-promo {
        --color-promo: var(--secondary);
        --color-promo-alt: var(--neutral-white);
    }

.price .disclosure {
        border-bottom: 1px solid var(--neutral-light);
    }

.price .disclosure h3 {
            margin-bottom: .75rem;
        }

/* &::after {
                content: "⌄";
            } */

.price .disclosure h3  + p {
                margin-top: 0;
            }

.price .tabs-content {
        width: -moz-min-content;
        width: min-content;
        margin: var(--spacing-4) auto;
    }

.price .tabs-content > p {
            margin: 0 1.2rem .5rem 0;
            color: var(--secondary);
            text-transform: uppercase;
            font-size: var(--font-size-2);
            font-weight: var(--fw-bold);
            text-align: right;
        }

.price .tabs {
        position: relative;
        display: flex;
        align-items: center;
        -moz-column-gap: var(--spacing-1);
             column-gap: var(--spacing-1);
        padding: 0.25rem;
        border-radius: 100px;
        background-color: rgba(255, 255, 255, 0.25);
        padding: var(--spacing-2);
    }

.price .tabs .tab {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-inline: var(--spacing-3);
            text-transform: uppercase;
            z-index: 1;
            color: var(--neutral-white);
            font-weight: var(--fw-medium);
            width: 140px;
            cursor: pointer;
        }

.price .tabs input[type="radio"] {
            position: absolute;
            opacity: 0;
        }

.price .tabs input[type="radio"]:checked + label {
                font-weight: var(--fw-bold);
            }

.price .tabs input[type="radio"]:not(:checked) + label:hover {
                color: var(--brand-xtradark);
            }

/* tab {
            position: relative;
            z-index: 2;
            width: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: .75rem;
            border-radius: 100px;
            font-size: 1rem;
            font-weight: bold;
            line-height: 1;
            text-transform: uppercase;
            cursor: pointer;
            letter-spacing: .1em;
            color: #000000;
            transition: all 0.15s ease-in;
            background-color: red;
        } */

.price .tabs .tab-active-bg {
            position: absolute;
            z-index: 0;
            top: .20rem;
            right: .20rem;
            width: 50%;
            height: 2.5rem;
            display: flex;
            border-radius: 100px;
            background-color: var(--brand);
            transition: 0.25s ease-out;
        }

/* state for month active */

.price .tabs.active-month .tab-active-bg {
                right: calc(50% - .20rem);
            }

.price-intro {
    position: relative;
    /* text-align: center; */
    padding-bottom: calc(var(--spacing-2) * 8);
    min-height: 50vh;
    display: grid;

    /* h2 {
        font-size: var(--font-display-variable);
        letter-spacing: -3%;
        font-weight: var(--fw-medium);
        margin: 0;
        color: var(--neutral-white);
    }
    .intro-promo {
        p {
            font: var(--font-body-l);
            max-width: 35ch;
            color: var(--neutral-white);
            margin-block: .75rem;
        }
        .button-multiple {
            margin-block-start: 2rem;
            background-color: var(--secondary);
            outline-color: var(--secondary) ;
            color: var(--neutral-white);
            border-radius: var(--border-radius-l);
        }
    } */
}

/* border-top: 1px solid var(--neutral-mediumlight); */

.price-intro >div {
        z-index: 0;
    }

/* place-content: center; */

.price-intro img {
        position: absolute;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center;
        width: 100%;
        height: 100%;
        /* filter: grayscale(100%); */
        right: -10%;
        -webkit-mask-image: linear-gradient(to right, transparent 30%, var(--brand));
                mask-image: linear-gradient(to right, transparent 30%, var(--brand));
        /* mix-blend-mode: luminosity; */
        mix-blend-mode: overlay;
    }

.site-block {

    --text-link: var(--brand);
    --text-link-hover: var(--neutral-dark);
    --text-color: var(--neutral-xtradark);
    --bg-color-link-info: var(--neutral-dark);
    --color-link-info: var(--neutral-white);
    --text-color-alt: var(--brand-xtramedium);
    width: min(90%, 1200px);
    /* min-height: 85vh; */
    margin-inline: auto;
    padding-block: var(--spacing-6);
}

.site-block .font-title {
        font-size: clamp(var(--font-size-5), 6vw, calc(var(--font-size-7)));
    }

.site-block .site-block-link-info {
        display: inline-block;
        font: var(--font-caption);
        letter-spacing: .04rem;
        margin-top: var(--spacing-4);
        margin-right: var(--spacing-2);
        margin-bottom: var(--spacing-2);
        color: var(--color-link-info);
        background-color: var(--bg-color-link-info);
        border-radius: var(--border-radius-l);
        padding: calc(var(--spacing-1) * 2) calc(var(--spacing-2) * 1.75);
        outline: 1px solid var(--bg-color-link-info);
        text-decoration: none;
        outline-offset: 0;
        transition: ease-in-out 150ms;
    }

.site-block .site-block-link-info:hover{
            outline-offset: calc(var(--spacing-1) / 1.25);
        }

.site-block .site-block-link-info + .site-block-link {
            color: var(--bg-color-link-info);
        }

@media (max-width: 769px) {

.site-block .site-block-link-info {
            outline: none
    }
        }

.site-block .site-block-link {
        display: inline-flex;
        align-items: center;
        -moz-column-gap: .5rem;
             column-gap: .5rem;
        text-decoration: none;
        font: var(--font-caption);
        font-weight: var(--fw-regular);
        text-transform: uppercase;
        letter-spacing: .04rem;
        margin-bottom: var(--spacing-3);
        color: var(--text-link);
    }

.site-block .site-block-link:after {
            content: "→";
        }

.site-block .site-block-link:hover {
            color: var(--text-link-hover);
        }

.site-block .site-block-link:not(a) {
            color: var(--secondary);
        }

.site-block .site-block-link:not(a):after {
                content: none;
            }

.site-block .site-block-link:not(a):hover {
                color: var(--secondary);
            }

.site-block .site-block-title {
        color: var(--text-color);
        font-size: clamp(var(--font-size-5), 6vw, calc(var(--font-size-7) * 1.25));
        letter-spacing: -.06rem;
        font-weight: var(--fw-regular);
        margin-bottom: var(--spacing-3);
        margin-top: 0;
    }

.site-block .site-block-description {
        color: var(--text-color-alt);
        font: var(--font-body-m);
        line-height: 1.8rem;
        margin: 0;
    }

.site-block .site-block-description + .site-block-description {
            margin-top: var(--spacing-3);
        }

.site-block .site-block-list {
        font: var(--font-body-m);
        line-height: 120%;
        margin: 0;
        list-style-type: "";
        padding-left: 0;
    }

.site-block .site-block-list li {
            padding-bottom: calc(var(--spacing-2) * 1);
        }

.site-block .site-block-list li:not(:last-child) {
                border-bottom: 1px solid var(--brand-xtramedium);
                margin-bottom: var(--spacing-2);
            }

.site-block > div {
        position: relative;
    }

.site-block > div:last-child p:first-child {
                    margin-top: var(--spacing-3);
                }

@media (min-width: 768px) {

.site-block > div:first-child .is-outside {
                    right: 0px;
                    transform: translateX(0px)  translateY(calc(var(--spacing-12) * -1.7))
            }
                }

@media (min-width: 1281px) {

.site-block > div:first-child .is-outside {
                    transform: translateX(0px)  translateY(calc(var(--spacing-12) * -2.4))
            }
                }

@media (min-width: 768px) {

.site-block {
        display: flex;
        -moz-column-gap: var(--spacing-8);
             column-gap: var(--spacing-8);
        align-items: center;
        justify-content: center
}
        .site-block > div {
            flex: 1 1 50%;
        }
    }

@media (min-width: 1281px) {

.site-block {
        -moz-column-gap: var(--spacing-16);
             column-gap: var(--spacing-16);
        padding-block: var(--spacing-12)
}
    }

.site-block.is-full {
        width: 100%;
        padding-block: 0;
        -moz-column-gap: 0;
             column-gap: 0;
        align-items: stretch;
    }

.site-block.is-full >div {
            flex: 1 1 100%;
            display: flex;
            align-items: center;
        }

.site-block.is-full >div .site-block-container {
                padding-block: 4rem;
            }

@media (min-width: 1281px) {

.site-block.is-full >div .site-block-container {
                    padding-block: 10rem
            }
                }

.site-block.is-full >div:last-child .site-block-container {
                    margin-left: 5%;
                    margin-right: 5%;
                }

@media (min-width: 768px) {

.site-block.is-full >div:last-child .site-block-container {
                        margin-right:10%;
                        margin-left: calc(var(--spacing-8) / 2);
                        max-width: calc(1200px / 2 - (var(--spacing-8) / 2))
                }
                    }

@media (min-width: 1281px) {

.site-block.is-full >div:last-child .site-block-container {
                        margin-left: calc(var(--spacing-16) / 2);
                        max-width: calc(1200px / 2 - (var(--spacing-16) / 2))
                }
                    }

.site-block.is-full >div:first-child {
                justify-content: flex-end;
            }

.site-block.is-full >div:first-child .site-block-container {
                    margin-left: 5%;
                    margin-right: 5%;
                }

@media (min-width: 768px) {

.site-block.is-full >div:first-child .site-block-container {
                        margin-left:calc(10%);
                        margin-right: calc(var(--spacing-8) / 2);
                        max-width: calc(1200px / 2 - (var(--spacing-8) / 2))
                }
                    }

@media (min-width: 1281px) {

.site-block.is-full >div:first-child .site-block-container {
                        margin-right: calc(var(--spacing-16) / 2);
                        max-width: calc(1200px / 2 - (var(--spacing-16) / 2))
                }
                    }

.site-block.is-full img {
             -o-object-fit: cover;
                object-fit: cover;
             -o-object-position: center;
                object-position: center;
             vertical-align: middle;
             height: 100%;
             width: 100%;
             aspect-ratio: 4 / 3;
         }

.site-block.is-full img.baseline {
                -o-object-position: bottom center;
                   object-position: bottom center;
             }

.nav-window {
    position: relative;
    aspect-ratio: 16/11;
    background-color: var(--neutral-white);
    border: 1px solid var(--neutral-mediumlight);

    overflow: hidden;
    /* border-radius: 15px; */
    box-shadow: 0 40px 80px -40px rgba(0,0,0,0.3);
}

.nav-window img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: left top;
           object-position: left top;
        vertical-align: middle;
    }

/* state to position out the main content */

@media (min-width: 768px) {

.nav-window.is-outside {
            position: absolute;
            width: 660px;
            transform: translateX(0px)  translateY(calc(var(--spacing-12) * -1.7))
    }
        }

@media (min-width: 1281px) {

.nav-window.is-outside {
            width: 768px;
            transform: translateX(0px)  translateY(calc(var(--spacing-12) * -2.4))
    }
        }

.nav-window.is-simple {
        aspect-ratio: revert;
        border: none;
        background-color: transparent;
        overflow: visible;
        box-shadow: 0 40px 80px -40px rgba(0,0,0,0.5);
        margin-bottom: var(--spacing-3);
    }

.nav-window.is-simple img,
        .nav-window.is-simple svg {
            width: 100%;
            /* transform: scale(1.2); */
            height: auto;
            vertical-align: middle;
        }

@media (min-width: 1281px) {

.nav-window.is-simple img,
        .nav-window.is-simple svg {
                transform: scale(1.2)
        }
            }

@media (min-width: 1281px) {

.nav-window.is-simple {
            margin-bottom: var(--spacing-0)
    }
        }

.nav-window.has-nav {
        background-color: var(--neutral-xtradark);
    }

.nav-window.has-nav img {
            margin-top: 37px;
        }

.nav-window.has-nav::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.3;
            color: var(--text-color-alt);
            content: "⬤⬤⬤";
            font-size: .5rem;
            letter-spacing: .35rem;
            height: auto;
            padding: var(--spacing-2);
            background-color: var(--neutral-light);
        }

.nav-window.is-mobile {
        aspect-ratio: 1 / 1.89;
        border: 5px solid #111111;
        outline: 1px solid var(--neutral);
        background-color: #25222a;
        border-radius: 30px;
        margin-inline: auto;
        width: 100%;
        max-width: 280px;
    }

.nav-window.is-mobile img {
            -o-object-fit: cover;
               object-fit: cover;
            -o-object-position: center;
               object-position: center;
            vertical-align: middle;
            height: 100%;
            width: 100%;
        }

.nav-window.is-mobile::before {
            position: absolute;
            z-index: 1;
            content: "";
            width: 50%;
            height: 2.8%;
            background-color: #111111;
            opacity: 1;
            left: 25%;
            border-radius: 0px 0px 8px 8px;
        }

@media (min-width: 768px) {

.nav-window.is-mobile {
            border-radius: 45px
    }
        }

@media (max-width: 769px) {

.nav-window.is-mobile {
            outline: none
    }
        }

/* State with normal nav to put outside the main container  */

.nav-window.is-mobile.is-outside{
            position: absolute;
            top: 40px;
            left: -5.5%;
            width: 40%;
        }

@media (min-width: 768px) {

.nav-window.is-mobile.is-outside{
                width: 100%;
                max-width: 280px;
                border-radius: 45px;
                top: 60px;
                left: -140px
        }
            }

@media (max-width: 769px) {

.nav-window {
        margin-block: var(--spacing-2)
}
    }

.bg-brand-xtralight {
    background-color: #e9eeee;
}

/* clip-path: polygon(0 6%, 100% 0, 100% 94%, 0% 100%);
    border-block: 25px solid var(--brand); */

.bg-brand-xtralight .site-block-description {
        color: var(--brand-xtramedium);
    }

.img-full {
    width: 100%;
    aspect-ratio: 16 / 6;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    vertical-align: middle;
}

.bg-color-brand,
.bg-neutral-xtradark {
    background-color: #121212;
}

.bg-color-brand .site-block-title, .bg-neutral-xtradark .site-block-title {
        color: var(--neutral-white);
    }

.bg-color-brand .site-block-description,.bg-neutral-xtradark .site-block-description{
        color: var(--neutral-medium);
    }

.bg-color-brand .site-block-link,
    .bg-color-brand .site-block-link-info + .site-block-link,
    .bg-neutral-xtradark .site-block-link,
    .bg-neutral-xtradark .site-block-link-info + .site-block-link {
        color: var(--neutral-medium);
    }

.bg-color-brand .site-block-link:hover, .bg-color-brand .site-block-link-info + .site-block-link:hover, .bg-neutral-xtradark .site-block-link:hover, .bg-neutral-xtradark .site-block-link-info + .site-block-link:hover {
            color: var(--neutral-mediumlight);
        }

.bg-color-brand {
    background-color: var(--brand);
    color: var(--brand-light);
}

.bg-color-brand .site-block-link,
    .bg-color-brand .site-block-description{
        color: var(--brand-medium);
    }

.bg-color-neutral-dark,
.bg-neutral-xtradark {
    color: var(--neutral-white);
}

.bg-color-neutral-dark .site-block-title, .bg-neutral-xtradark .site-block-title {
        color: var(--neutral-white);
    }

.bg-color-neutral-dark .site-block-link,
    .bg-color-neutral-dark .site-block-description,
    .bg-neutral-xtradark .site-block-link,
    .bg-neutral-xtradark .site-block-description{
        color: var(--neutral-light);
    }

.features-resume{
    --color-back: #f5f5f5;
    --color-back-hover: var(--neutral-white);
    /* --color-front: #21FEB4; */
    --color-front: var(--neutral-xtradark);
    --color-front-alt: var(--neutral);

    background-color: var(--color-back);
    padding-block: var(--spacing-6);
}

.features-resume ul {
        position: relative;
        --columns: 1;
        display: grid;
        grid: auto/repeat(var(--columns),1fr);
        align-items: start;
        -moz-column-gap: var(--spacing-2);
             column-gap: var(--spacing-2);
        row-gap: var(--spacing-2);
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
    }

.features-resume ul::before,
        .features-resume ul::after {
            display: none;
            position: absolute;
            content: "";
            top: 0;
            width: 1px;
            background-color: #b8b8b8;
            height: 100%;
            opacity: .2;
        }

@media (min-width: 480px) {

.features-resume ul {
            --columns: 2
    }
            .features-resume ul::before {
                display: block;
                /* left: calc(33.333% + var(--spacing-4)); */
                left: 50%;
            }
        }

@media (min-width: 960px) {

.features-resume ul {
            --columns: 3;
            padding-inline: var(--spacing-4);
            -moz-column-gap: var(--spacing-4);
                 column-gap: var(--spacing-4);
            row-gap: var(--spacing-3)
    }
            .features-resume ul::before {
                left: calc(33.333% + var(--spacing-2) / 4 + var(--spacing-2) / 4);
            }
            .features-resume ul::after {
                display: block;
                right: calc(33.333% + var(--spacing-2) / 4 + var(--spacing-2) / 4);
            }
        }

.features-resume a {
        transition: ease-in-out 250ms;
        display: block;
        height: 100%;
        color: var(--color-front);
        text-decoration: none;
        padding: var(--spacing-3);
        /* outline: 1px solid var(--color-back);
        outline-offset: 0; */
        border-radius: var(--border-radius-m);
    }

.features-resume a:hover {
            background-color: var(--color-back-hover);
            /* outline: 1px solid var(--color-back-hover); */
            /* outline-offset: var(--spacing-1); */
        }

/* box-shadow: 0 3px 15px rgba(31, 16, 114, 0.4); */

.features-resume a:hover svg {
                mix-blend-mode: normal;
            }

.features-resume svg {
        mix-blend-mode: luminosity;
        width: 28px;
        height: 28px;
        margin-bottom: var(--spacing-1);
    }

.features-resume svg > * {
            stroke-width: 0;
        }

.features-resume h3 {
        margin-top: 0;
        margin-bottom: var(--spacing-2);
        font: var(--font-heading);
        font-weight: var(--fw-regular);
    }

.features-resume p {
        font: var(--font-caption);
        margin: 0;
        color: var(--color-front-alt);
    }

.features-resume.is-alone {
        background-color: transparent;
    }

.features-resume.is-alone a {
            text-align: center;
        }

.features-resume.is-alone a:hover {
                color: var(--brand);
            }

.features-resume.is-alone a:hover svg > * {
                        stroke: var(--brand);
                    }

.features-resume.is-alone h3 {
            margin-bottom: 0;
            font: var(--font-body-l);
        }

.features-resume.is-alone svg {
            width: 100px;
            height: 100px;
        }

.features-resume.is-alone svg > * {
                stroke-width: 1;
            }

.footer {
    font: var(--font-caption);
    background-color: var(--neutral-xtralight);
    border-top: 1px solid var(--neutral-mediumlight);
}

.footer ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

.footer ul li:not(:last-child) {
                margin-bottom: calc(var(--spacing-1) * 1.25);
            }

.footer .logo {
        width: 100px;
        -webkit-margin-before: var(--spacing-7);
                margin-block-start: var(--spacing-7);
        margin-bottom: var(--spacing-3);
    }

.footer .logo > * {
            fill: var(--neutral-xtradark);
        }

.footer .logo:hover {
            opacity: .7;
        }

.footer h4 {
        font: var(--font-caption);
        font-weight: var(--fw-medium);
        margin-top: 0;
        margin-bottom: calc(var(--spacing-1) * .75);
    }

.footer a {
        text-decoration: none;
        color: var(--neutral);
    }

.footer a:hover {
            color: var(--brand);
        }

.footer-container {
    --columns: 2;
    display: grid;
    grid: auto/repeat(var(--columns),1fr);
    grid-template-rows: repeat(3, auto);
    align-items: start;
    gap: var(--spacing-2);
    padding-bottom: var(--spacing-3);
}

@media (min-width: 768px) {

.footer-container {
        --columns: 4
}
    }

@media (min-width: 960px) {

.footer-container {
        --columns: 6
}
    }

.footer-social {
    background-color: var(--neutral-mediumlight);
    border-top: 1px solid var(--neutral-light);
    padding-block: var(--spacing-4);
}

/* transform: translateY(var(--spacing-7)); */

.footer-social > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-2);
    }

.footer-social ul {
        display: flex;
        -moz-column-gap: var(--spacing-2);
             column-gap: var(--spacing-2);
    }

.footer-social ul li:not(:last-child) {
                margin-bottom: 0;
            }

.footer-social ul:first-child{
            gap: var(--spacing-2);
            flex-wrap: wrap;
        }

.footer-social svg {
        width: auto;
        height: 20px;
    }

.footer-social svg > * {
            fill: var(--neutral);
        }

.footer-social a {
        color: var(--neutral-xtradark);
    }

.footer-social a:hover svg > * {
                    fill: var(--brand);
                }

.footer-social a span {
            position: absolute;
            width: 1px;
            height: 1px;
            border: 0;
            clip: rect(0, 0, 0,0);
            margin: -1px;
            padding: 0;
            overflow: hidden;
        }

.select-lang {
    text-align: left;
    background-color: var(--neutral-xtradark);
}

.select-lang h4 {
        display: flex;
        -moz-column-gap: var(--spacing-2);
             column-gap: var(--spacing-2);
        align-items: center;
        font: var(--font-body);
        margin-top: 0;
        color: var(--neutral-light);
        border-bottom: 1px solid var(--neutral-dark);
        padding-bottom: var(--spacing-2);
    }

.select-lang svg > * {
            fill: var(--neutral-light);
        }

.select-lang .close {
        position: absolute;
        top: var(--spacing-3);
        right: var(--spacing-3);
    }

.select-lang .close:hover {
            opacity: .6;
        }

.select-lang ul{
        font: var(--font-caption-s);
        -moz-column-count: 2;
             column-count: 2;
        -moz-column-gap: var(--spacing-3);
             column-gap: var(--spacing-3);
    }

.select-lang ul li a {
                color: var(--neutral-medium);
            }

.select-lang ul li a:hover {
                    color: var(--neutral-white);
                }

.select-lang ul li:not(:last-child) {
                margin-bottom: var(--spacing-2);
            }

.select-lang ul li.is-active {
                color: var(--neutral-white);
            }

.call-to-action,
.call-to-preview {
    --bg-call: var(--brand-xxtradark);
    --bg-call-alt: var(--brand-medium);
    --fw-call: var(--brand-medium);

    background-color: var(--bg-call);
}

.call-to-action .site-block-title,
    .call-to-action .site-block-description,
    .call-to-preview .site-block-title,
    .call-to-preview .site-block-description {
        color: var(--fw-call);
    }

.call-to-action .site-block-link-info, .call-to-preview .site-block-link-info {
        background-color: var(--fw-call);
        color: var(--bg-call);
        outline-color: var(--fw-call);
        font: var(--font-body);
        font-weight: var(--fw-medium);
    }

@media (max-width: 769px) {

.call-to-action .site-block-link-info, .call-to-preview .site-block-link-info {
            outline: none
    }
        }

.call-to-preview {
    /* min-height: calc(80vh - var(--header-height)); */
    --bg-call: var(--brand);
    --fw-call: var(--neutral-white);
    /* background: linear-gradient(180deg,var(--brand) 0%, var(--brand-light) 100%); */
    display: grid;
    place-content: center;
}

.call-to-preview .site-block-title {
        font-weight: var(--fw-bold);
        font-size: clamp(var(--font-size-4), 6vw, var(--font-size-6));
        line-height: 100%;
    }

.call-to-preview .nav-window {
        font-size: 22vw;
        box-shadow: none;
        background-color: transparent;
    }

.preview .header  {
         height: var(--site-header-height);
    }

.preview .site-block {
        min-height: 60vh;
    }

.preview .site-block-link {
        color: var(--brand) !important;
    }

.preview .site-block-link::before{
            content: "— ";
        }

.preview .bg-color-brand .site-block-link, .preview .bg-neutral-xtradark .site-block-link {
            color: var(--brand-light) !important;
        }

.site-legal {
    padding-block: calc(var(--spacing-1) * 8);
}

.site-legal p, .site-legal ul, .site-legal ol {
        max-width: 60ch;
        line-height: 140%;
        color: var(--neutral)
    }

.site-legal li:not(:last-child) {
            margin-bottom: var(--spacing-1);
        }

.site-legal ul {
        padding-left: 1rem;
    }

.site-legal h2 {
        font-size: clamp(var(--font-size-5), 6vw, var(--font-size-8));
        line-height: 105%;
        letter-spacing: -0.01em;
        margin-top: 0;
        margin-bottom: var(--spacing-2);
        color: var(--brand);
    }

.site-legal h3,.site-legal h4 {
        margin-bottom: 0;
        max-width: 45ch;
    }

.site-legal h3 + p, .site-legal h4 + p {
            margin-top: .25rem;
        }

.site-legal a {
        color: var(--brand);
        text-decoration: none;
    }

.site-legal a:hover {
            text-decoration: underline;
        }

.site-legal h3 {
        -webkit-margin-before: 3rem;
                margin-block-start: 3rem;
        font-size: clamp(var(--font-size-3), 6vw, calc(var(--font-size-6)));
        font-weight: var(--fw-medium);
        max-width: 38ch;
    }

.site-legal h3::before {
            content: "—";
        }

.site-legal h3 + ol,
        .site-legal h3 + ul,
        .site-legal h3 + p {
            margin-top: 1rem;
        }

.site-legal h3:first-of-type {
            margin-top: 0;
        }

.site-legal h4 {
        font-size: clamp(var(--font-size-2), 6vw, calc(var(--font-size-5)));
        font-weight: var(--fw-medium);
    }

.site-legal .update {
        font-size: var(--font-size-1);
        text-transform: uppercase;
        font-weight: var(--fw-medium);
        color: var(--neutral-medium);
        margin-top: var(--spacing-4);

    }

.columns {
    -moz-columns: 35ch auto;
         columns: 35ch auto;
    -moz-column-gap: var(--spacing-4);
         column-gap: var(--spacing-4);
    -moz-column-rule: 1px solid var(--neutral-mediumlight);
         column-rule: 1px solid var(--neutral-mediumlight);
}

.columns li, .columns p {
        -webkit-hyphens: auto;
                hyphens: auto;
        -moz-column-break-inside: avoid;
             break-inside: avoid;
    }

.columns h2 {
        -moz-column-span: all;
             column-span: all;
        line-height: 105%;
        margin-top: 0;
        margin-bottom: 3rem;
    }

.columns .update {
        -moz-column-span: all;
             column-span: all;
        margin-bottom: 1rem;
    }

.declaration,
.anexo {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    color: var(--neutral);

}

.declaration li ul,.anexo li ul{
            margin-top: 1rem;
            padding-left: 0;
            margin-left: .8rem;
            list-style-type: disc;
        }

.declaration li ul ul, .anexo li ul ul {
                list-style-type: circle;
            }

ol.declaration {
    counter-reset: declaration-counter;
}

ol.declaration> li {
        counter-increment: declaration-counter;
    }

ol.declaration> li::before {
            content: "1." counter(declaration-counter, lower-alpha) ") ";
        }

ol.anexo {
    counter-reset: anexo-counter;
}

ol.anexo > li {
        counter-increment: anexo-counter;
    }

ol.anexo > li::before {
            content: "2." counter(anexo-counter, lower-alpha) ") ";
        }

.footnotes {
    color: var(--neutral);
    border-top: 1px solid var(--neutral-medium);
    padding-top: 1rem;
}

.footnotes sup {
        text-transform: uppercase;
    }

.footnotes ul{
        margin-top: 1rem;
        padding-left: 0;
        margin-left: .8rem;
    }

.footnotes li, .footnotes p {
        -webkit-hyphens: auto;
                hyphens: auto;
    }

.card-price {
    position: relative;
    box-shadow: var(--shadow-s);
    flex-basis: 100%;
    transition: ease-in-out 250ms;
    border-radius: var(--border-radius-m);
    color: var(--neutral);
    padding: var(--spacing-2);
    padding-top: var(--spacing-3);
    text-align: center;
    border: 1px solid transparent;
    background-color: var(--neutral-white);
}

/* display: flex;
    flex-flow: row;
    justify-content: space-between; */

.card-price:hover {
        --shadow-s: 0 5px 15px 2px rgba(10, 10, 10, 0.15);
    }

.card-price.is-active {
        /* background-color: var(--brand);
        color: var(--brand-light);
        .card-price-title,
        .card-price-pricing{
            color: var(--neutral-white);
        }
        .card-price-features svg > * {
            fill: var(--neutral-white);
        }
        .card-price-features {
            color: var(--neutral-white);
            background-color: var(--brand-dark);
        } */
        border-color: var(--brand);
        /* &:hover {
            transform: translateY(0);
        } */
    }

.card-price .card-price-features {
        margin: var(--spacing-3) calc(var(--spacing-2) * -1);
    }

.card-price-title {
    font: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--brand);
    margin: 0;
}

.card-price-description {
    font: var(--font-caption-s);
    margin-top: 0;
}

.card-price-pricing {
    display: block;
    color: var(--brand);
    font: var(--font-title);
    line-height: 2rem;
    margin-top: 1.75rem;
    font-weight: var(--fw-normal);
}

.card-price-draw svg {
        width: 100%;
        height: auto;
    }

.card-price-features {
    list-style-type: none;
    padding: var(--spacing-2);
    margin: var(--spacing-3) 0;
    text-align: left;
    font: var(--font-caption-s);
    background-color: var(--neutral-xtralight);
}

/* border-block: 1px solid var(--neutral-mediumlight); */

.card-price-features li:not(:last-child) {
        margin-bottom: calc(var(--spacing-1) * 1.75);
    }

.card-price-features li {
        display: flex;
        gap: var(--spacing-1);
    }

.card-price-features svg {
        flex-shrink: 0;
    }

.card-price-features svg > * {
            fill: var(--brand);
        }

.card-price-features svg.icon-color-destructive > * {
                fill: var(--destructive);
            }

.card-price-features svg.icon-color-destructive + span {
                color: var(--neutral-medium);
            }

.card-price-resume {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font: var(--font-caption);
    font-weight: var(--fw-medium);
    color: var(--nenutral);
}

.card-price-resume li {
        padding-block: var(--spacing-2);
        display: flex;
        justify-content: space-between;
    }

.card-price-resume li:last-child {
            color: var(--brand);
        }

.card-price-resume li:not(:last-child) {
        border-bottom: 1px solid var(--brand-medium);
    }

.card-price-sub {
    background-color: var(--secondary);
    display: inline-block;
    position: absolute;
    z-index: 1;
    top: -2.5%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--border-radius-s);
}

.card-price-sub p {
        font: var(--font-caption-s);
        font-weight: var(--fw-medium);
        color: var(--neutral-white);
        margin: 0;
        padding: calc(var(--spacing-1) * 0.75) var(--spacing-1);
        text-transform: uppercase;
    }

.credit-card {
    background-color: var(--brand-xtradark);
    background: linear-gradient(45deg,var(--brand), var(--brand-dark));
    aspect-ratio: 1.618 / 1;
    max-width: 324px;
    border-radius: 10px;
    padding: var(--spacing-3);
    color:var(--neutral-white);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.credit-card h3 {
        margin: 0;
        margin-bottom: var(--spacing-6);
        font: var(--font-body);
        font-weight: var(--fw-medium);
    }

.credit-card span {
        display: block;
        font: var(--font-body-l);
    }

.credit-card span:last-child {
            font: var(--font-caption-s);
            color: var(--brand-medium);
        }

/* Specific pages */

/* Vendors */

body {
    overflow-x: hidden;
}

body.no-scroll {
        overflow-y: hidden;
    }