@layer pages {
    .page-how-it-works {
        .page-heading {
            color: var(--color-indigo);
        }

        .how-it-works-intro {
            align-items: center;
        }

        .how-it-works-audio {
            margin-bottom: var(--gap);
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            align-items: center;

            figcaption {
                font-weight: 600;
            }
        }

        .how-it-works-intro-secondary {
            text-align: center;
            margin-bottom: var(--double-gap);

            .heading {
                font-size: var(--font-size-4);
                margin-bottom: var(--gap);
                color: var(--color-indigo);
                font-weight: 400;

                strong {
                    font-weight: 800;
                }
            }
        }

        .get-to-know {
            &.two-columns {
                & > :nth-child(1) {
                    order: 1;

                    .heading-primary {
                        @media (min-width: 1001px) {
                            display: none;
                        }
                    }
                }
                & > :nth-child(2) {
                    order: 2;

                    .heading-primary {
                        @media (max-width: 1000px) {
                            display: none;
                        }
                    }
                }
            }

            img {
                margin: -30px auto;
                position: relative;
                z-index: 10;

                @media (max-width: 1000px) {
                    display: none;
                }
            }
        }

        .get-to-know-question {
            position: relative;

            &:after {
                content: "";
                display: block;
                position: absolute;
                background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjkiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA2OSA1NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTY4LjUgNDQuMzU3OVYwSDBMNTEuNDI4OSA1MS40Mjg5QzU3LjcyODYgNTcuNzI4NiA2OC41IDUzLjI2NjkgNjguNSA0NC4zNTc5WiIgZmlsbD0iI0Y3QkMzOCIvPgo8L3N2Zz4K) no-repeat center center;
                width: 69px;
                --height: 55px;
                height: var(--height);
                left: 5%;
                bottom: calc(-1 * var(--height));

                @media (max-width: 1000px) {
                    display: none;
                }
            }

            .get-to-know-question-bubble {
                background-color: var(--color-orange);
                color: var(--color-light);
                padding: var(--gap);
                font-size: var(--font-size-3);
                font-weight: 800;
                border-radius: 10px;

                h3 {
                    font-family: Montserrat, sans-serif;
                }
            }
        }

        .get-to-know-answer {
            position: relative;

            &:after {
                content: "";
                display: block;
                position: absolute;
                background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjYiIGhlaWdodD0iNTIiIHZpZXdCb3g9IjAgMCA2NiA1MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjA3MTMgNDguNDI4N0MxMC43NzE2IDU0LjcyODQgMCA1MC4yNjY0IDAgNDEuMzU3NFYwSDY1LjVMMTcuMDcxMyA0OC40Mjg3WiIgZmlsbD0iI2VlZSIvPgo8cGF0aCBkPSJNMTcuMDcxMyA0OC40Mjg3TDE2Ljc3MjUgNDguNzE2OEMxMC41Mzc5IDU0LjQ5NDggMC4zMzA1NTIgNTAuMjY2NSAwLjAwNzgxMjUgNDEuNzcyNUwwIDQxLjM1NzRWMEgzVjQxLjM1NzRMMy4wMDU4NiA0MS42NDc1QzMuMjM0OTcgNDcuNjg5NyAxMC42MDkyIDUwLjY0ODUgMTQuOTUwMiA0Ni4zMDc2TDYxLjI1NzggMEg2NS41TDE3LjA3MTMgNDguNDI4N1oiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==) no-repeat center center;
                width: 69px;
                --height: 52px;
                height: var(--height);
                right: 5%;
                bottom: calc(-1 * var(--height));

                @media (max-width: 1000px) {
                    display: none;
                }
            }

            .get-to-know-answer-bubble {
                background-color: var(--color-super-silver);
                padding: var(--gap);
                border-radius: 10px;
                box-shadow: 0 0 0 3px var(--color-light);
            }

            h3 {
                font-size: var(--font-size-3);
                font-weight: 800;
                margin-bottom: var(--gap);
            }
        }

        .get-to-know-pagination {
            list-style: none;
            padding: 0;

            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: var(--gap);

            @media (max-width: 1000px) {
                justify-content: center;
            }

            button {
                --width: 40px;
                width: var(--width);
                height: 40px;
                border-radius: 50%;
                background-color: var(--color-dark);
                color: var(--color-light);
                border: none;
                cursor: pointer;

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

                &.current {
                    border-radius: 20px;
                    background-color: var(--color-primary);
                    color: var(--color-light);

                    @media (min-width: 1001px) {
                        width: calc(var(--width) * 3);
                    }
                }
            }
        }

        .test-purchase {
            align-items: center;

            .heading-primary {
                font-weight: 200;
                margin: 0;
            }

            div:first-child {
                display: flex;
                flex-direction: column;
                align-items: end;
                gap: var(--half-gap);
            }
        }

        .three-steps {
            hgroup {
                text-align: center;
                margin-bottom: var(--gap);

                h2 {
                    font-family: Montserrat, sans-serif;
                    font-size: var(--font-size-4);
                    font-weight: 800;
                    color: var(--color-indigo);
                }

                p {
                    font-family: Montserrat, sans-serif;
                    font-size: var(--font-size-4);
                    font-weight: 275;
                    color: var(--color-indigo);
                    line-height: 1.2;
                }
            }
        }

        .three-steps-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            grid-template-rows: repeat(5, auto);
            -moz-column-gap: var(--gap);
                 column-gap: var(--gap);
            row-gap: var(--half-gap);
            margin-bottom: var(--double-gap);

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

        .three-steps-item {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 5;

            text-align: center;
            padding: var(--gap);
            box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            color: var(--color-light);

            &:nth-child(1) {
                background-color: var(--color-orange);
            }
            &:nth-child(2) {
                background-color: var(--color-primary);
            }
            &:nth-child(3) {
                background-color: var(--color-indigo);
            }

            .step-number {
                font-size: 120px;
                font-weight: 800;
            }

            h3 {
                align-self: center;
                font-size: var(--font-size-3);
                font-weight: 800;
            }

            hr {
                background-color: var(--color-light);
                height: 3px;
                border: none;
                width: 80%;
            }

            p {
                font-size: var(--font-size-2);
                font-weight: 300;
                margin: 0;
            }

            .btn {
                color: #000;

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

        .simple-and-easy {
            h2 {
                font-size: var(--font-size-4);
                font-weight: 800;
                color: var(--color-orange);
            }

            h3 {
                font-size: var(--font-size-3);
                font-weight: 275;
                color: var(--color-dark);
                margin-bottom: var(--gap);
            }

            .benefit-list {
                gap: var(--half-gap) !important;
            }
        }

        .how-to-start {
            margin-bottom: var(--half-gap);

            hgroup {
                h2 {
                    font-size: var(--font-size-3);
                    font-weight: 275;
                    color: var(--color-indigo);
                }
                p {
                    font-size: var(--font-size-3);
                    font-weight: 800;
                    color: var(--color-indigo);
                    margin-bottom: 0;
                }
            }

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

        .video-container {
            background-color: var(--color-indigo);
            border-radius: 10px;
            padding: var(--gap);
            display: flex;
            justify-content: center;
            margin-bottom: var(--gap);

            lite-youtube {
                max-width: 1270px;

                @media (max-width: 1000px) {
                    max-width: 100%;
                }
            }
        }

        .faq-container {
            text-align: center;
        }
    }
}


/*# sourceMappingURL=infosite-page-howitworks.9e0411ecec585a4de7fa.css.map*/