#page-insiders {
    @apply bg-darkBlueViolet;
    color: #cbc9d9;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #f0f3f9;
    }

    .light-green-prompt {
        @apply block mx-auto max-w-[610px];
        @apply py-8 px-20 text-center;
        @apply rounded-8;
        @apply border-1 border-greenPrompt font-medium text-18 leading-150;
        background-color: rgba(theme(colors.greenPrompt), 0.16);
    }
    .get-insiders-link {
        @apply btn-l btn-primary cursor-pointer;
        box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.4);
    }

    .launching {
        @apply text-h5 bg-launchingYellow shadow-launching py-8 px-16 mr-auto inline-block mb-24 text-midnightBlue;
    }

    .features {
        @apply grid lg:grid-cols-3 grid-cols-1 gap-24 pb-20;
        .feature {
            .c-icon {
                height: 45px;
                width: 45px;
                @apply mb-12 relative;
            }
            box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
            @apply py-20 px-24 rounded-16 bg-russianViolet;
            @apply flex flex-col;

            h4 {
                @apply text-h4 mb-8 text-[#F0F3F9];
            }

            p {
                @apply text-p-base text-left;
                a {
                    @apply text-lightGold;
                }
            }
        }
    }

    & .c-progress {
        @apply relative;
        .target-icon {
            right: 0px;
        }
        .current-icon {
            @apply bg-gradientProgressBarB;
            @apply absolute;
            height: 34px;
            width: 34px;
            box-shadow: 0px 4px 24px 0px #9c822666;

            @apply grid place-items-center rounded-circle;
        }
        .target-icon {
            @apply absolute;
            height: 48px;
            width: 48px;
            background: linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.5) 0%,
                    rgba(255, 255, 255, 0) 100%
                ),
                linear-gradient(0deg, #fff4e3, #fff4e3);
            box-shadow: 0px 4px 24px 0px #9c822666;

            @apply grid place-items-center rounded-circle;

            & .c-icon {
                height: 40px;
                width: 40px;
                padding-left: 7px;
            }
        }
        .actual-number {
            position: absolute;
            bottom: -65px;
            @apply bg-gradientProgressBarB py-6 px-12 text-16 text-white leading-150 rounded-8 font-medium;
            &:before {
                content: "";
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDIyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMS4zMzY5IDBMMjEuOTAwNCA3LjVIMC43NzMzNDdMMTEuMzM2OSAwWiIgZmlsbD0iIzlFMDBGRiIvPgo8L3N2Zz4K");
                background-repeat: no-repeat;
                background-size: contain;
                position: absolute;
                top: -8px;
                right: 58px;
                height: 10px;
                width: 25px;
            }
        }
        .goal {
            position: absolute;
            bottom: -65px;
            right: -15px;
            @apply bg-lightGold py-6 px-12 text-16 text-textColor1NoDark leading-150 font-medium rounded-8;
            &:before {
                content: "";
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDIyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMS4zMzY5IDBMMjEuOTAwNCA3LjVIMC43NzMzNDdMMTEuMzM2OSAwWiIgZmlsbD0iI0ZGRDM4RiIvPgo8L3N2Zz4K");
                background-repeat: no-repeat;
                background-size: contain;
                position: absolute;
                top: -8px;
                right: 30px;
                height: 10px;
                width: 25px;
            }
        }
    }

    .faqs {
        a {
            @apply text-veryLightBlue font-semibold underline;
        }

        p,
        ul {
            @apply !text-left;
        }
        ul {
            @apply list-disc ml-20;
        }
    }
    details {
        @apply cursor-pointer;
        &[open] {
            summary {
                @apply mb-8;
                &::after {
                    transform: rotate(-180deg);
                }
            }
        }
        @apply py-16 px-32 rounded-16 bg-russianViolet;
        @apply text-18 font-normal leading-150;

        summary {
            @apply flex items-center;
            @apply select-none;
            outline: none;
            list-style: none;
            @apply text-24 text-textColor1 font-semibold leading-130;

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

            &::after {
                content: url("icons/chevron-down-circle.svg");
                height: 32px;
                width: 32px;
                margin-left: auto;
                transform: rotate(0deg);
                transition: transform 0.2s ease-in-out;
            }
        }
        summary + * {
            @apply pt-10;
        }
    }

    .gradient-container {
        background: linear-gradient(
            180deg,
            #221e31 0%,
            rgba(34, 30, 49, 0) 100%
        );
    }
}
