/*
 *  (c) FSi sp. z o.o. <info@fsi.pl>
 *
 *  For the full copyright and license information, please view the LICENSE
 *  file that was distributed with this source code.
 */

:root {
    --color-dark: #303030;
    --color-light: #fff;
    --color-orange: #f7bc38;
    --color-primary: #0BA29B;
    --color-primary-alt-bg: #0bcaa4;
    --color-violet: #9747ff;
    --color-violet-alt: #b984ff;
    --color-indigo: #11238f;
    --color-indigo-alt-bg: #3047d1;
    --color-super-silver: #eee;

    --gap: 40px;
    --half-gap: 20px;
    --double-gap: 80px;
    --btn-min-height: 80px;

    @media (max-width: 1000px) {
        --gap: 20px;
        --half-gap: 10px;
        --double-gap: 40px;
    }

    --content-max-width: 1440px;

    /*
    https://docs.google.com/spreadsheets/d/1PahDIz-sL_6A87tiYWeRnUoiuiWZQG1rcmJ83CG0uMI/edit?gid=0#gid=0
     */
    --font-size-1: 1.1rem;
    --font-size-1-alt: 1.1rem;
    --font-size-2: 1.125rem;
    --font-size-3: 2.1rem;
    --font-size-4: 4.22rem;
    --font-size-price: 5rem;

    @media (max-width: 1000px) {
        --font-size-1: 1rem; /* 16px; */
        --font-size-2: 1.25rem; /* 20px; */
        --font-size-3: 1.875rem; /* 30px; */
        --font-size-4: 3.125rem; /* 50px; */
        --font-size-price:4.75rem; /* 80px; */
    }
}

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

    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    figure {
        margin: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 500;
    }

    img, picture {
        max-width: 100%;
        height: auto;
        display: block;
    }
}

@layer base {
    body {
        font-size: var(--font-size-1);
        background-color: var(--color-light);
        font-family: "Roboto", sans-serif;
        scrollbar-gutter: stable;
    }

    a {
        color: inherit;
        text-decoration: none;
        transition: color 300ms ease-out;

        &:hover {
            color: var(--color-primary);
        }
    }

    /*
    Hide content visually while keeping it accessible to assistive technologies
    See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
    See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
    */
    .visually-hidden {
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important; /* Fix for https://github.com/twbs/bootstrap/issues/25686 */
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;

        /* Fix to prevent overflowing children to become focusable */
        * {
            overflow: hidden !important;
        }
    }
}

@layer btn {
    .btn {
        display: inline-flex;
        min-height: var(--btn-min-height);
        padding: 0 var(--gap);
        align-items: center;
        gap: var(--half-gap);
        flex-shrink: 0;

        border: 3px solid #fff;
        border-radius: 10px;

        /* max/h4-bold */
        font-family: Montserrat;
        font-style: normal;
        font-weight: 800;
        line-height: normal;

        transition:
            background 300ms ease-out,
            color 300ms ease-out;
    }

    .btn-ghost {
        transition:
            background 300ms ease-out,
            color 300ms ease-out,
            border 300ms ease-out;

        background: var(--color-light);
        color: var(--color-primary);

        &:hover {
            background: #b5efe3;
            border-color: #b5efe3;
        }
    }

    .btn-outlined {
        border: 3px solid var(--color-primary);
        color: var(--color-primary);

        &:hover {
            background: var(--color-primary);
            color: var(--color-light);
        }
    }

    .btn-outlined-ghost {
        border: 3px solid var(--color-light);
        color: var(--color-light);

        &:hover {
            background: var(--color-light);
            color: var(--color-primary);
        }
    }

    .btn-arrow {
        font-weight: 700;

        color: #000;
        text-decoration: none;
        background: var(--color-orange);
        font-size: var(--font-size-2);

        &:hover {
            background: var(--color-dark);
            color: var(--color-orange);
        }

        svg {
            width: 30px;
            height: 30px;
            transition: width 300ms ease-out;
            flex-shrink: 0;
        }

        .arrow {
            transform: translateX(-20px);
            transition: transform 300ms ease-out;
        }

        &:hover {
            svg {
                width: 50px;
            }

            .arrow {
                transform: translateX(0px);
            }
        }
    }

    .link-more {
        color: var(--color-primary);
        font-weight: 600;
        font-size: var(--font-size-1);

        svg {
            transition: width 300ms ease-out;
            flex-shrink: 0;
            width: 15px;
            height: 15px;
        }

        .arrow {
            transform: translateX(-10px);
            transition: transform 300ms ease-out;
        }

        &:hover {
            svg {
                width: 25px;
            }

            .arrow {
                transform: translateX(0px);
            }
        }
    }
}

@layer typo {
    p {
        line-height: 1.6;

        a {
            color: var(--color-primary);
            text-decoration: underline;

            &:hover {
                color: var(--color-dark);
            }
        }
    }
    ul {
        line-height: 1.6;
        margin-bottom: var(--gap);

        &:last-child {
            margin-bottom: 0;
        }
    }
}

@layer layout {
    .wrapper {
        --padding-inline: var(--gap);

        display: grid;
        grid-template-columns:
            [full-width-start] minmax(var(--padding-inline), 1fr)
            [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width))
            [content-end]
            minmax(var(--padding-inline), 1fr) [full-width-end];
    }

    .wrapper > :not(.full-width),
    .full-width > :not(.full-width) {
        grid-column: content;
    }

    .wrapper > .full-width {
        grid-column: full-width;

        display: grid;
        grid-template-columns: inherit;
    }

    .stack {
        display: grid;
        grid-template-areas: "stack";

        > * {
            grid-area: stack;
        }
    }

    .header-hidden {
        transform: translateY(-100%); /* Move header completely out of view */
        transition: transform 0.3s ease-in-out;
    }

    .header-visible {
        transform: translateY(0); /* Bring header back into view */
        transition: transform 0.3s ease-in-out;
    }

    .header {
        &.is-pinned {
            z-index: 100;
            /* Mobile Menu Breakpoint */
            @media (min-width: 1300px) {
                position: sticky;
                top: -1px;
            }

            background-color: var(--color-light);
            box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.3);

            .btn-ghost {
                background: var(--color-primary);
                color: var(--color-light);
                border-color: var(--color-primary);

                &:hover {
                    background: #169c81;
                    border-color: #169c81;
                }
            }

            .btn-outlined-ghost {
                border-color: var(--color-primary);
                color: var(--color-primary);

                &:hover {
                    background: var(--color-primary);
                    color: var(--color-light);
                }
            }
        }
    }

    .header-inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--gap);
        padding-block: var(--gap);

        ul {
            display: flex;
            align-items: center;
            list-style: none;
            padding: 0;
        }

        .header-menu {
            display: flex;
            gap: var(--gap);
            list-style: none;
            padding: 0;
        }
    }

    .two-columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--gap);
        margin-bottom: var(--double-gap);

        @media (max-width: 1000px) {
            grid-template-columns: minmax(0, 1fr);

            & > :nth-child(1) {
                order: 2;
            }
            & > :nth-child(2) {
                order: 1;
            }
        }
    }

    .inverted-order {
        @media (min-width: 1001px) {
            & > div {
                &:nth-child(1) {
                    order: 2;
                }

                &:nth-child(2) {
                    order: 1;
                }
            }
        }
    }

    .channel-columns {
        grid-template-columns: minmax(0, 30%) minmax(0, 70%);

        @media (max-width: 1000px) {
            grid-template-columns: minmax(0, 1fr);
        }

        &.inverted-order {
            grid-template-columns: minmax(0, 70%) minmax(0, 30%);

            @media (max-width: 1000px) {
                grid-template-columns: minmax(0, 1fr);
            }
        }
    }
}

@layer bg {
    .page:not(.page-home) {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIzNjE5IiB2aWV3Qm94PSIwIDAgMTkyMCAzNjE5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTkxOS4xMiAzNjE5QzE4OTUuNjQgMzExNi4yNyAxNDI4LjU2IDI4MzYuNSAxNDI4LjU2IDI4MzYuNUwwLjAwMDEyMjA3IDE5OTYuMThWMEwxNDI4LjU2IDg0MC4zMjVDMTQyOC41NiA4NDAuMzI1IDE5MTUuMjEgMTEzMS44MiAxOTIwIDE2NTQuMzlMMTkxOS4xMiAzNjE5WiIgZmlsbD0iI0VERURFRCIvPgo8L3N2Zz4K) no-repeat;
        background-position: 0 100vh;
        background-color: var(--color-light);
        background-size: 100%;
    }

    .first-bg {
        position: absolute;
        top: 0;
        right: 0;

        width: 50vw;
        height: 100vh;

        z-index: -1;

        background: linear-gradient(160deg, var(--color-primary-alt-bg) 7.46%, var(--color-indigo-alt-bg) 66.83%);
        -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU2MCIgaGVpZ2h0PSIxNzA3IiB2aWV3Qm94PSIwIDAgMTU2MCAxNzA3IiBmaWxsPSJ2aW9sZXQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC41MjM1NTYgMEgxNTYwVjE3MDYuNUw5NDQgMTM0Ny41OUwyNDUuNzIyIDkzNi45NDJDMjQ1LjcyMiA5MzYuOTQyIDIuMzkzNjQgNzkxLjIzIDAgNTMwLjAxTDAuNTIzNTU2IDBaIi8+Cjwvc3ZnPgo=);
                mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU2MCIgaGVpZ2h0PSIxNzA3IiB2aWV3Qm94PSIwIDAgMTU2MCAxNzA3IiBmaWxsPSJ2aW9sZXQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC41MjM1NTYgMEgxNTYwVjE3MDYuNUw5NDQgMTM0Ny41OUwyNDUuNzIyIDkzNi45NDJDMjQ1LjcyMiA5MzYuOTQyIDIuMzkzNjQgNzkxLjIzIDAgNTMwLjAxTDAuNTIzNTU2IDBaIi8+Cjwvc3ZnPgo=);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: top right;
                mask-position: top right;
        -webkit-mask-size: contain;
                mask-size: contain;
    }

    .second-bg {
        position: absolute;
        top: 65vh;
        left: 0;
        right: 0;
        z-index: -1;

        -webkit-mask-repeat: no-repeat;

                mask-repeat: no-repeat;
        -webkit-mask-position: left top;
                mask-position: left top;

        @media (max-width: 1000px) {
            background: linear-gradient(170deg, var(--color-orange) 3.57%, var(--color-violet-alt) 59.83%);
        }
        @media (min-width: 1001px) {
            background: linear-gradient(164.08deg, var(--color-orange) 27.34%, var(--color-violet-alt) 71.52%);
            /*GENERATED IN JS mask-image: url("bg/bg2_fhd_m.svg");*/
        }
    }

    .third-bg {
        position: absolute;
        top: 145vh;
        left: 0;
        right: 0;

        height: 5161px;

        z-index: -2;

        background: var(--color-light) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzI3MCIgaGVpZ2h0PSI1MTYyIiB2aWV3Qm94PSIwIDAgMzI3MCA1MTYyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC44ODA5NDQgNTE2MkMyNC4zNjQ0IDQ2NTkuMjcgNDkxLjQ0NCA0Mzc5LjUgNDkxLjQ0NCA0Mzc5LjVMMTkyMCAzNTM5LjE4VjE1NDNMNDkxLjQ0NCAyMzgzLjMyQzQ5MS40NDQgMjM4My4zMiA0Ljc4NjY0IDI2NzQuODIgMCAzMTk3LjM5TDAuODgwOTQ0IDUxNjJaIiBmaWxsPSIjRURFREVEIi8+CjxwYXRoIGQ9Ik0zNzAzLjEyIDAuMTc3NjEyQzM2NzkuNjQgNTAyLjkwNSAzMjEyLjU2IDc4Mi42NzYgMzIxMi41NiA3ODIuNjc2TDE3ODQgMTYyM0wxNzg0IDM2MTkuMThMMzIxMi41NiAyNzc4Ljg1QzMyMTIuNTYgMjc3OC44NSAzNjk5LjIxIDI0ODcuMzYgMzcwNCAxOTY0Ljc5TDM3MDMuMTIgMC4xNzc2MTJaIiBmaWxsPSIjRURFREVEIi8+Cjwvc3ZnPgo=) no-repeat;
    }
}

@layer menu {
    .primary-menu {
        a {
            display: flex;
            align-items: center;
            height: 60px;
            padding: 0 var(--half-gap);

            color: var(--color-dark);
            text-decoration: none;

            /* montserrat-800 */
            font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-weight: 800;

            font-style: normal;

            transition: color 300ms ease-out;

            &:hover {
                color: var(--color-primary);
            }
        }
    }

    .secondary-menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
        flex: 1 0 0;
        align-self: stretch;

        .btn {
            min-height: 60px;
        }
    }

    /* Mobile Menu Breakpoint */
    @media (max-width: 1300px) {
        .primary-menu {
            display: none;
        }

        .secondary-menu {
            display: none;
        }
    }

    .mobile-menu-wrapper {
        display: none;
        z-index: 100;

        /* Mobile Menu Breakpoint */
        @media (max-width: 1300px) {
            display: flex;
            position: fixed;
            top: 0;
            right: 0;

            transition: transform 0.3s ease-in-out;
            transform: translateX(calc(100dvw - 80px));
            animation: menu-slide-out 0.3s ease-in-out forwards;
        }

        &.is-open {
            transform: translateX(0);
            animation: menu-slide-in 0.3s ease-in-out forwards;
        }

        &.hidden:not(.is-open) {
            height: 80px;
        }

        button {
            display: flex;
            flex-shrink: 0;
            background-color: var(--color-indigo);
            width: 80px;
            height: 80px;
            border: unset;
            justify-content: center;
            align-items: center;
            padding: 0;
        }
    }

    .mobile-menu-content {
        background-color: var(--color-indigo);
        color: var(--color-light);
        width: calc(100dvw - 80px);

        /* max/h4-bold */
        font-family: Montserrat;
        font-size: 18px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;

        ul {
            list-style: none;
            padding: var(--gap);
            display: flex;
            gap: var(--gap);
            flex-direction: column;
            text-align: center;
        }

        .btn {
            min-height: 60px;
        }
    }

    .menu-content {
        [aria-current="page"] {
            color: var(--color-primary);
        }
    }

    .menu-content-help {
        display: flex;
        gap: 8px;
    }

    .mobile-menu-content {
        .menu-content-help {
            justify-content: center;
            align-items: center;
        }
    }
}

@layer anim {
    @keyframes parallax {
        to {
            transform: translateY(calc(var(--parallax-speed) * 200px));
        }
    }

    .parallax {
        position: relative;
        z-index: 0;

        > * {
            animation: parallax linear;
            animation-timeline: scroll();
        }
    }
}

@layer sell-anim {
    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes fade-in {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes slide-in {
        0% {
            opacity: 0;
            transform: translateX(50%);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animation {
        justify-items: center;
        align-items: center;
        isolation: isolate;
        overflow: clip;

        img, picture {
            pointer-events: none;
        }

        .animation1-bg {
            z-index: 1;
        }

        .animation1-ring {
            z-index: 2;
        }

        .animation1-smartphone {
            z-index: 3;

            img {
                max-height: 800px;
            }
        }

        .animation1-gui {
            z-index: 4;
        }

        &.hidden {
            display: none;
        }

        &:not(.hidden) {
            .animation1-ring {
                animation: rotation 8s linear infinite;
            }

            .animation1-smartphone img {
                animation-delay: 1s;
                animation: fade-in 1s ease-in-out forwards;
            }

            .animation1-gui {
                animation-delay: 2s;
                animation: slide-in 1s ease-in-out forwards;
            }
        }
    }
}

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }
    ::details-content {
        height: 0;
        transition:
           height 0.5s ease,
           content-visibility 0.5s ease allow-discrete;
        overflow: clip;
    }
    [open]::details-content {
        height: auto;
    }
}

.montserrat-200 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.montserrat-700 {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.montserrat-800 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.roboto-300 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.hero {
    display: grid;
    grid-template-columns: 40% 60%;
    margin-bottom: var(--double-gap);

    @media (max-width: 1000px) {
        grid-template-columns: 1fr;
    }

    img {
        pointer-events: none;
    }

    .hero-images {
        display: grid;
        align-items: center;
        @media (min-width: 1001px) {
            justify-content: end;
        }
    }

    .lead {
        margin-top: 100px;
        display: grid;
        gap: var(--gap);

        @media (max-width: 1000px) {
            width: unset;
            margin-top: var(--gap);
            order: 2;
        }

        .page-heading {
            margin-bottom: 0;
            color: var(--color-dark);

            strong {
                color: var(--color-primary);
            }
        }

        p {
            max-width: 60ch;
        }
    }

    p {
        font-size: var(--font-size-2);
        line-height: 32px;
    }
}

.products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--double-gap);

    padding-top: var(--double-gap);
    margin-bottom: var(--double-gap);

    @media (max-width: 1000px) {
        grid-template-columns: 1fr;
        gap: var(--gap);

        padding-top: var(--gap);
        margin-bottom: var(--gap);
    }

    h2 {
        font-family: "Montserrat", sans-serif;
        font-weight: 800;
        font-size: calc(var(--font-size-3) + 1.2rem);
        max-inline-size: 17ch;
        text-wrap: balance;
    }

    h3 {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 275;
        font-style: normal;

        font-size: calc(var(--font-size-4) - 1rem);
        color: var(--color-dark);
    }

    summary {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 1rem;

        &::marker {
            content: "";
        }

        &::-webkit-details-marker {
            display: none;
        }

        h3 {
            display: inline-block;

            background: linear-gradient(to right, var(--color-primary), var(--color-primary));
            background-size: 0 3px;
            background-position: 0 100%;
            background-repeat: no-repeat;
            transition: background-size 400ms;

            &:hover,
            &:focus {
                background-size: 100% 3px;
            }
        }

        img {
            transition: transform 300ms ease-out;
        }
    }

    details {
        &[open] {
            h3 {
                color: var(--color-primary);
                /*border-bottom: 3px solid var(--color-primary);*/

                background-size: 100% 3px;
            }

            img {
                transform: rotate(90deg);
            }
        }

        div {
            padding-block: var(--half-gap);

            /* max/paragraph-1 */
            font-family: Roboto;
            font-size: var(--font-size-2);
            font-style: normal;
            font-weight: 300;
            line-height: 32px; /* 133.333% */
        }

        p {
            margin-bottom: var(--half-gap);

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.pricing {
    padding-top: var(--double-gap);
    margin-bottom: var(--double-gap);

    @media (max-width: 1000px) {
        padding-top: var(--gap);
        margin-bottom: var(--gap);
    }

    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--gap);

    @media (max-width: 1000px) {
        grid-template-columns: 1fr;
    }
}

.pricing-intro {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    strong {
        font-weight: 800;
    }

    .btn-arrow {
        @media (max-width: 1000px) {
            .text-alt-1 {
                display: none;
            }

            .text-alt-2 {
            }
        }
        @media (min-width: 1000px) {
            .text-alt-1 {
            }

            .text-alt-2 {
                display: none;
            }
        }
    }

    p:nth-child(1) {
        font-family: Montserrat, sans-serif;
        font-size: var(--font-size-3);
        color: var(--color-light);
        font-weight: 300;
        padding-bottom: 20px;
    }

    p:nth-child(2) {
        font-family: Montserrat, sans-serif;
        font-size: var(--font-size-4);
        color: var(--color-light);
        font-weight: 800;
        padding-bottom: 40px;
    }

    p:nth-child(3) {
        font-family: Montserrat, sans-serif;
        font-size: var(--font-size-3);
        color: var(--color-dark);
        font-weight: 300;
        padding-bottom: var(--gap);
    }

    p:nth-child(4) {
        font-family: Roboto, sans-serif;
        font-size: var(--font-size-2);
        color: var(--color-light);
        font-weight: 300;
        padding-bottom: var(--gap);
    }
}

.pricing-level {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: #ededed;
    color: var(--color-dark);

    /* button shadow */
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.3);

    padding: var(--gap);
    text-align: center;

    .btn {
        align-self: center;
        min-height: 60px;
        margin-top: auto;
    }
}

.pricing-div {
    display: block;
    margin-bottom: var(--gap);
    height: 3px;
    width: 100%;
    border: none;
}

.pricing-name {
    padding-bottom: var(--gap);

    color: var(--color-light);
    text-align: center;
    /* max/h2-bold */
    font-family: Montserrat;
    font-size: var(--font-size-3);
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.pricing-free {
    .pricing-name {
        color: var(--color-dark);
    }

    .pricing-div {
        background-color: rgb(from var(--color-dark) r g b / 0.5);
    }
}

.pricing-premium {
    color: var(--color-light);
    background: var(--color-violet);

    .pricing-div {
        background-color: rgb(from var(--color-light) r g b / 0.5);
    }
}

.pricing-price {
    padding-bottom: var(--gap);

    text-align: center;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    font-size: calc(var(--font-size-3) - 0.4rem);

    span {
        font-size: var(--font-size-price);
        font-weight: 800;
    }
}

.pricing-percentage {
    color: var(--color-dark);
    text-align: center;
    /* max/paragraph-1 */
    font-family: Roboto;
    font-size: var(--font-size-2);
    font-style: normal;
    font-weight: 300;
    line-height: 32px; /* 133.333% */

    padding-bottom: var(--gap);
}

.pricing-premium {
    .pricing-percentage {
        color: var(--color-light);
    }
}

.pricing-select {
    display: flex;
    justify-content: center;

    height: 60px;
    padding: 0px 40px;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
}

.features {
    padding-top: var(--double-gap);
    margin-bottom: var(--double-gap);

    @media (max-width: 1000px) {
        padding-top: var(--gap);
        margin-bottom: var(--gap);
    }

    h2 {
        word-break: break-word;

        /* max/h1-bold */
        font-family: Montserrat;
        font-size: var(--font-size-4);
        font-style: normal;
        font-weight: 800;
        line-height: normal;

        color: var(--color-indigo);
        text-align: center;
        margin-bottom: var(--gap);
    }
}

.features-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--gap);

    @media (max-width: 800px) {
        grid-template-columns: unset;
        --visible-slides: 1.2;
        --slide-gap: var(--half-gap);
        grid-auto-flow: column;
        grid-auto-columns: calc(
            100% / var(--visible-slides) - var(--slide-gap) * (var(--visible-slides) - 1) / var(--visible-slides)
        );
        overflow: scroll;
    }

    & > div {
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.5);

        padding: var(--gap);

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        transition:
            background 300ms ease-out,
            box-shadow 300ms ease-out;

        &:hover {
            background: #f8bd37;

            /* hero-shadow */
            box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.25);
        }
    }

    .feature-highlight {
        background: var(--color-indigo);
        color: var(--color-light);
    }

    .feature-promo {
        background: var(--color-primary);
        color: var(--color-light);
        padding: unset;

        a {
            padding: var(--gap);

            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--gap);

            font-family: Montserrat;
            font-size: var(--font-size-3);
            font-style: normal;
            font-weight: 400;

            text-align: center;

            &:hover {
                color: inherit;
            }
        }
    }

    .feature-title {
        text-align: center;

        /* max/h3-bold */
        font-family: Montserrat;
        font-size: var(--font-size-2);
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .feature-descr {
        /* max/paragraph-1 */
        font-family: Roboto;
        font-size: var(--font-size-2);
        font-style: normal;
        font-weight: 300;
        line-height: 32px; /* 133.333% */
    }
}

.benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: var(--gap);

    padding-top: var(--double-gap);
    margin-bottom: var(--double-gap);

    @media (max-width: 1000px) {
        grid-template-columns: 1fr;
        padding-top: var(--gap);
        margin-bottom: var(--gap);
    }
}

.benefit-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap);

    @media (max-width: 1000px) {
        grid-template-columns: 1fr;
    }
}

.benefit-list {
    display: grid;
    gap: var(--gap);
}

.benefit-item {
    border-radius: 10px;
    background: var(--color-light);
    /* button shadow */
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.3);
    padding: var(--gap);
    transition: transform 100ms ease-out;

    &:hover {
        transform: scale(1.05);
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.benefits-intro {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    strong {
        font-weight: 800;
    }

    p:nth-child(1) {
        font-size: var(--font-size-3);
        color: var(--color-dark);
        font-weight: 300;
        padding-bottom: var(--half-gap);
    }

    p:nth-child(2) {
        font-size: var(--font-size-4);
        color: var(--color-primary);
        font-weight: 800;
        padding-bottom: var(--gap);
    }

    p:nth-child(3) {
        font-size: var(--font-size-3);
        color: var(--color-dark);
        font-weight: 300;
        padding-bottom: var(--gap);
    }

    p:nth-child(4) {
        font-size: var(--font-size-2);
        font-weight: 300;
        padding-bottom: var(--gap);
    }
}

.reviews {
    padding-top: var(--double-gap);
    margin-bottom: var(--double-gap);

    @media (max-width: 1000px) {
        padding-top: var(--gap);
        margin-bottom: var(--half-gap);
    }

    h2 {
        margin-bottom: var(--gap);
        word-break: break-word;

        /* max/h1 */
        font-family: Montserrat;
        font-size: var(--font-size-4);
        font-style: normal;
        font-weight: 275;
        line-height: normal;

        color: var(--color-indigo);
    }
}

.reviews-box {
    display: grid;
    grid-template-columns: 3fr 1fr;
    @media (max-width: 1600px) {
        grid-template-columns: 2fr 1fr;
    }
    @media (max-width: 1000px) {
        grid-template-columns: 1fr 1fr;
        --slide-gap: var(--half-gap);
    }
    @media (max-width: 800px) {
        grid-template-columns: 1fr;
        --slide-gap: var(--half-gap);
    }
    gap: var(--gap);

    & > .promo-item {
        background: var(--color-orange);
        font-family: Montserrat;
        font-size: var(--font-size-3);
        font-style: normal;
        font-weight: 400;
        padding: var(--gap);

        border-radius: 10px;

        text-align: center;

        a {
            padding: var(--gap);
            @media (max-width: 1000px) {
                padding: var(--gap) 0 var(--gap) 0;
            }

            display: flex;
            height: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--gap);
            color: var(--color-dark);

            &:hover {
                color: var(--color-light);
            }
        }
    }
}

.slides {
    --visible-slides: 1;
    --slide-gap: var(--gap);

    display: grid;
    grid-auto-flow: column;
    grid-column-gap: var(--slide-gap);
    align-items: center;

    grid-auto-columns: calc(
        100% / var(--visible-slides) - var(--slide-gap) * ((var(--visible-slides) - 1) / var(--visible-slides))
    );
}

.slides-container {
    overflow: hidden;
}

.review-list {
    --visible-slides: 3;
    --slide-gap: var(--gap);

    display: grid;
    grid-auto-flow: column;
    grid-column-gap: var(--slide-gap);
    overflow: auto;

    grid-auto-columns: calc(
        100% / var(--visible-slides) - var(--slide-gap) * ((var(--visible-slides) - 1) / var(--visible-slides))
    );

    @media (max-width: 1600px) {
        --visible-slides: 3;
    }
    @media (max-width: 1600px) {
        --visible-slides: 2;
    }
    @media (max-width: 1000px) {
        --visible-slides: 1;
        --slide-gap: var(--half-gap);
    }

    & > .review-item {
        border-radius: 10px;
        font-size: var(--font-size-2);
        font-weight: 300;

        background: var(--color-light);

        padding: var(--gap);
    }

    .review-item-author {
        margin-top: var(--half-gap);

        /* max/h4-bold */
        font-family: Montserrat;
        font-size: var(--font-size-1);
        font-style: normal;
        font-weight: 800;
        line-height: normal;
    }

    .review-item-company {
        /* max/h4 */
        font-family: Montserrat;
        font-size: var(--font-size-1);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .review-item-stars {
        display: flex;
        margin-bottom: var(--half-gap);

        svg {
            width: 31px;
            height: 30px;
        }
    }
}

.footer {
    padding-top: 80px;

    @media (max-width: 1000px) {
        padding-top: var(--half-gap);
    }
}

.footer-links {
    margin-bottom: var(--double-gap);
}

.footer-info {
}

.footer-info-wrapper {
    --footer-height: 160px;
    background-image: linear-gradient(90deg, var(--color-primary) 30%, transparent 30%);
    background-size: 100% var(--footer-height);
    background-repeat: no-repeat;
    background-position: bottom;
}

.footer-info {
    display: grid;
    align-items: center;
    grid-template-columns: 2fr 1fr 2fr;
    gap: var(--gap);

    @media (max-width: 1260px) {
        grid-template-columns: 1fr;

        .footer-info-company {
            order: 3;
        }

        .footer-info-affiliates {
            order: 1;

            .btn {
                min-height: 60px;
            }
        }

        .footer-info-cookies {
            order: 2;
            padding-inline: unset;
        }
    }
}

.footer-claim {
    font-family: "Montserrat", sans-serif;
    font-size: var(--font-size-2);

    @media (max-width: 800px) {
        font-size: 1rem;
    }
}

.footer-info-affiliates {
    text-align: center;
}

.footer-info-cookies {
    font-size: 0.9rem;
}

.footer-info-company {
    min-height: var(--footer-height);
    padding-right: 50px; /* mask width */

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    color: var(--color-light);

    background: linear-gradient(90deg, var(--color-primary), var(--color-indigo));

    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTM4IiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDEzOCAxNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEzOCAwSDAuMDM0NjY4QzQzLjYxMzYgMC4zOTg5MjYgNjcuOTIyNCA0MC45NTM2IDY3LjkyMjQgNDAuOTUzNkwxMzggMTYwVjBaIiBmaWxsPSIjRDlEOUQ5Ii8+Cjwvc3ZnPgo=), linear-gradient(#000 0 0);

            mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTM4IiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDEzOCAxNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEzOCAwSDAuMDM0NjY4QzQzLjYxMzYgMC4zOTg5MjYgNjcuOTIyNCA0MC45NTM2IDY3LjkyMjQgNDAuOTUzNkwxMzggMTYwVjBaIiBmaWxsPSIjRDlEOUQ5Ii8+Cjwvc3ZnPgo=), linear-gradient(#000 0 0);
    -webkit-mask-position: top right;
            mask-position: top right;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    border-right: 1px solid #fff;

    @media (max-width: 800px) {
        svg {
            width: 100px;
        }
    }
}

.footer-links-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap);

    @media (max-width: 800px) {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    padding-top: var(--half-gap);

    font-weight: 300;
    font-size: var(--font-size-1-alt);

    h3 {
        font-size: var(--font-size-1-alt);
        margin-bottom: var(--half-gap);
        @media (max-width: 800px) {
            margin-bottom: 20px;
        }

        font-family: Montserrat;
        font-weight: 800;
    }

    .link-more {
        font-size: var(--font-size-1-alt);
    }
}

.footer-link-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    @media (max-width: 800px) {
        gap: 10px;
    }
}

.footer-hr {
    border: 0;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-indigo) 50%, var(--color-primary) 100%);
    height: 1px;
    margin-bottom: var(--gap);
}

.social-media {
    @media (max-width: 1650px) {
        order: 99;
    }

    ul {
        list-style: none;
        padding: 0;

        display: flex;
        flex-wrap: wrap;
        gap: var(--half-gap);

        @media (max-width: 800px) {
            justify-content: space-evenly;
        }
    }
}

.svg-preview {
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
}

@layer youtube {
    .lite-youtube-fallback {
        aspect-ratio: 16 / 9; /* matches YouTube player */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1em;
        padding: 1em;
        background-color: #000;
        color: #fff;
        text-decoration: none;
    }

    /* right-facing triangle "Play" icon */
    .lite-youtube-fallback::before {
        display: block;
        content: "";
        border: solid transparent;
        border-width: 2em 0 2em 3em;
        border-left-color: red;
    }

    .lite-youtube-fallback:hover::before {
        border-left-color: #fff;
    }

    .lite-youtube-fallback:focus {
        outline: 2px solid red;
    }

    lite-youtube {
        /* No Shadow */
        --lite-youtube-frame-shadow-visible: no;
        max-width: calc(var(--content-max-width) / 2);
    }
}

@layer pages {
    .page {
        p {
            margin-bottom: var(--gap);

            &:last-child {
                margin-bottom: 0;
            }
        }

        .heading-primary {
            font-family: Montserrat, sans-serif;
            font-size: var(--font-size-4);
            margin-bottom: var(--gap);
            font-weight: 800;
            color: var(--color-primary);
        }
    }

    .page-heading {
        color: var(--color-primary);
        font-size: var(--font-size-4);
        font-family: Montserrat, sans-serif;
        font-weight: 275;
        margin-bottom: var(--gap);

        strong {
            font-weight: 800;
        }
    }

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

.checked-list {
    list-style: none;
    margin-bottom: var(--gap);
    padding: 0;
    font-size: var(--font-size-2);

    li {
        margin-bottom: 30px;
        padding-left: calc(24px + 10px);
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjkwNDYgMjEuNDY5OUwwLjcxMzU2NyAxNC45OTk0TDIuMTc2MzMgMTIuMjQzNUwxMS41MTA1IDE3LjE5NzZMMjAuMjM2MiAwLjc1NzQ0N0wyMy4wOTMxIDIuMjczNzdMMTIuOTA0NiAyMS40Njk5WiIgZmlsbD0iIzBDQTlBMCIvPgo8L3N2Zz4K) no-repeat left top;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.press-kit-item {
    margin-bottom: var(--gap);

    &:last-child {
        margin-bottom: 0;
    }

    p {
        margin-bottom: var(--half-gap);
    }

    h2 {
        font-family: Montserrat, sans-serif;
        font-size: var(--font-size-3);
        font-weight: 800;
        margin-bottom: var(--gap);
    }
}


/*# sourceMappingURL=infosite.72e0967199f488fd11b9.css.map*/