@layer addon {

    #form {
        scroll-margin-top: calc(var(--gutter) * 2 + 60px + var(--section));
    }
    
    .section-sticky {
        padding: 0;
        width: 100%;
        z-index: 999;
        background: var(--color-dark);
        visibility: hidden;
        opacity: 0;
        height: 0;
        position: relative;
        transition: var(--transition);
        .container {
            padding: var(--gutter) 0;
        }
        .inner {
            grid-column: 1 / span 12;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            @media (max-width: 56em) {
                gap: calc(var(--padding) / 2);
                flex-direction: column;
            }
            @media (--max-fablet) {
                gap: calc(var(--padding) / 2);
                flex-direction: column;
            }
            .header {
                display: flex;
                flex-direction: column;
                gap: 8px;
                @media (max-width: 56em) {
                    width: 100%;
                    display: none;
                }
                @media (--max-fablet) {
                    width: 100%;
                    display: none;
                }
                
                .title {
                    color: var(--color-light);
                    font-size: var(--m-fontsize);
                    line-height: var(--m-lineheight);
                    font-weight: 500;
                }
                .tags {
                    color: var(--color-light);
                }
            }
        }
        &.is-sticky {
            position: fixed;
            top: 0;
            visibility: visible;
            opacity: 1;
            height: auto;
        }
    }


    .templateMedia {
        .inner {
            text-align: left;
            .buttons {
                @media (max-width: 56em) {
                    gap: calc(var(--padding) / 2);
                }
                @media (--max-fablet) {
                    gap: calc(var(--padding) / 2);
                }
                .button.textLink {
                    margin-top: 10px;
                }
            }
        }
        .internal {
            background: var(--color3);
            color: var(--color-light);
            border-radius: var(--button-radius);
            padding: 8px 16px;
            font-size: var(--xs-fontsize);
            line-height: var(--xs-lineheight);
            font-weight: 600;
            margin-bottom: var(--gutter);
            display: inline-block;
            @media (min-width: 56em) {
                font-size: calc(var(--xs-fontsize) - 0.125rem);
            }
            @media (--min-fablet) {
                font-size: calc(var(--xs-fontsize) - 0.125rem);
            }
        }

        .tags {
            margin-bottom: var(--gutter);
            .tag {
                width: calc(50% - var(--gutter));
                @media (max-width: 56em) {
                    width: 100%;
                }
                @media (--max-fablet) {
                    width: 100%;
                }
                .icon {
                    width: 32px;
                    height: 32px;
                    @media (max-width: 56em) {
                        width: 24px;
                        height: 24px;
                    }
                    @media (--max-fablet) {
                        width: 24px;
                        height: 24px;
                    }
                }
                .text {
                    font-size: var(--fontsize);
                    font-weight: 500;
                }
            }
        }
        &.meetyou {
            .media {
                img {
                    aspect-ratio: 1;
                }
            }
            .intro {
                font-size: var(--s-fontsize);
                line-height: var(--s-lineheight);
                a {
                    font-weight: 600;
                    text-decoration-thickness: 2px;
                }
            }
        }
    }

    .templateContent {
        .title {
            font-size: calc(var(--m-fontsize) + 0.625rem);
        }
        &.benefits {
            padding-top: 0;
            overflow: hidden;
            .container {
                background-color: var(--color3);
                border-radius: var(--border-radius);
                padding: calc(var(--padding) * 2);
                gap: 0;
                .inner {
                    gap: var(--padding);
                }
                .title, .content, .button {
                    color: var(--color-light);
                }
                .buttons {
                    align-items: flex-start;
                    .button {
                        border-bottom-color: var(--color-light);
                    }
                }

                .contentRight {
                    ul {
                        padding: 0;
                        list-style: none;
                        li {
                            position: relative;
                            padding-left: 30px;
                            display: flex;
                            gap: var(--gutter);
                            align-items: center;
                            &:not(:last-of-type) {
                                margin-bottom: 15px;
                            }
                            &::marker {content: ""}
                            &:before {
                                content: "";
                                width: 16px;
                                height: 16px;
                                background-color: var(--color-light);
                                border-radius: 100%;
                                display: block;
                                position: absolute;
                                left: 0;
                                top: 8px;
                            }
                        }
                    }
                }

                @media (min-width: 56em) {
                    .contentLeft {
                        height: 100%;
                        padding-right: calc(var(--padding) * 2);
                        border-right: 1px solid var(--color-light);
                    }
                    .contentRight {
                        padding-left: calc(var(--padding) * 2);
                    }
                }

                @media (--min-fablet) {
                    .contentLeft {
                        height: 100%;
                        padding-right: calc(var(--padding) * 2);
                        border-right: 1px solid var(--color-light);
                    }
                    .contentRight {
                        padding-left: calc(var(--padding) * 2);
                    }
                }
                @media (max-width: 56em) {
                    padding: var(--padding);
                    .contentLeft {
                        border-bottom: 1px solid var(--color-light);
                        padding-bottom: var(--padding);
                    }
                    .contentRight {
                        padding-top: var(--padding);
                    }
                }
                @media (--max-fablet) {
                    padding: var(--padding);
                    .contentLeft {
                        border-bottom: 1px solid var(--color-light);
                        padding-bottom: var(--padding);
                    }
                    .contentRight {
                        padding-top: var(--padding);
                    }
                }
            }
            .benefitsDialog {
                background-color: var(--color3);
                border-radius: var(--border-radius) 0 0 var(--border-radius);
                min-height: 100vh;
                display: flex!important;
                max-width: 65vw;
                width: 65vw;
                opacity: 0;
                overflow: auto;
                transform: translateX(100vw);
                transition: var(--transition);
                margin: unset;
                ul {
                    padding: 0;
                    list-style: none;
                    li {
                        position: relative;
                        padding-left: 0;
                        display: flex;
                        gap: var(--gutter);
                        align-items: center;
                        &::marker {content: ""}
                        &:not(:last-of-type) {
                            /* border-bottom: 2px solid var(--color-light); */
                            border-bottom: 2px solid rgba(255,255,255,0.1);
                            padding-bottom: 15px;
                        }
                        img {
                            width: 80px;
                            height: 80px;
                            background-color: var(--color-light);
                            border-radius: 100%;
                            display: block;
                        }
                    }
                }
                @media (min-width: 56em) {
                    padding: calc(var(--padding) * 2);
                }
                @media (--min-fablet) {
                    padding: calc(var(--padding) * 2);
                }
                .tags {
                    flex-direction: column;
                    gap: 0;
                    .tag {
                        width: 100%;
                        border-radius: 0;
                        padding: var(--padding) 0;
                        border-top: 2px solid var(--color-light);
                        &:last-child {
                            border-bottom: 2px solid var(--color-light);
                        }
                    }
                }
                button.close {
                    border: 2px solid var(--color-light);
                    color: var(--color-light);
                    width: 64px;
                    height: 64px;
                    padding: 0;
                    .icon {
                        margin: unset;
                        width: 16px;
                        opacity: 1;
                        color: var(--color-light);
                    }
                    &:hover {
                        background-color: transparent;
                    }
                }
                &[open] {
                    opacity: 1;
                    transform: translateX(35vw);
                }
                &::backdrop {
                    -webkit-backdrop-filter: blur(30px);
                            backdrop-filter: blur(30px);
                    background: rgba(var(--color-dark-transparency), 0.75);
                }
                @media (max-width: 56em) {
                    max-width: 100vw;
                    width: 100vw;
                    border-radius: 0;
                    &[open] {
                        transform: translateX(0vw);
                    }
                }
                @media (--max-fablet) {
                    max-width: 100vw;
                    width: 100vw;
                    border-radius: 0;
                    &[open] {
                        transform: translateX(0vw);
                    }
                }
            }
        }

        &.process {
            .container {
                align-items: flex-start;
            }
            .inner {
                width: 100%;
                border-radius: var(--border-radius);
                padding: calc(var(--padding) * 2);
                @media (max-width: 56em) {
                    padding: var(--padding);
                }
                @media (--max-fablet) {
                    padding: var(--padding);
                }
            }
            .contentLeft {
                gap: var(--gutter);
                border: 2px solid var(--color-dark);
                .subTitle {
                    font-size: var(--fontsize);
                    margin-top: calc(var(--gutter) / 2);
                    font-weight: 500;
                }
                .steps {
                    details {
                        border-bottom: 2px solid var(--color-dark);
                        &[open] {
                            background: none;
                        }
                        summary {
                            padding: var(--padding) 0;
                            align-items: center;
                            font-weight: 600;
                            font-size: var(--s-fontsize);
                            .icon {
                                width: 40px;
                                height: 40px;
                            }
                        }
                        .block {
                            flex-direction: column-reverse;
                            margin-bottom: var(--padding);
                            .media {
                                max-width: 100%;
                                aspect-ratio: auto;
                                border-radius: var(--border-radius);
                                iframe {
                                    width: 100%;
                                    display: block;
                                }
                            }
                        }
                    }
                }
            }
            .contentRight {
                background-color: var(--color3);
                .title, .subTitle, .content {
                    color: var(--color-light);
                }
                .content {
                    font-size: var(--xs-fontsize);
                    font-weight: 500;
                    border-top: 2px solid var(--color-light);
                    padding-top: var(--padding);

                }
            }
            
        }
        @media (min-width: 56em) {
            &.embed {
                .inner {
                    grid-column: 3 / span 8;
                }
            }
        }
        @media (--min-fablet) {
            &.embed {
                .inner {
                    grid-column: 3 / span 8;
                }
            }
        }
    }

    .templateMore {
        background-color: var(--color3);
        @media (min-width: 56em) {
            padding: calc(var(--padding) * 2) 0;
            .media {
                grid-column: span 2;
            }
            .inner {
                grid-column: span 10;
            }
        }
        @media (--min-fablet) {
            padding: calc(var(--padding) * 2) 0;
            .media {
                grid-column: span 2;
            }
            .inner {
                grid-column: span 10;
            }
        }
        .media {
            aspect-ratio: unset;
            border-radius: 0;
            display: flex;
            justify-content: center;
            .icon {
                width: fit-content;
                color: var(--color2);
                height: 100%;
            }
        }
        .inner {
            justify-content: center;
            gap: var(--padding)!important;
            .title {
                font-size: calc(var(--m-fontsize) + 0.625rem);
                font-weight: 400;
                @media (max-width: 56em) {
                    font-size: var(--l-fontsize);
                }
                @media (--max-fablet) {
                    font-size: var(--l-fontsize);
                }
            }
            .buttons {
                color: var(--color-light);
            }
        }
        @media (max-width: 56em) {
            padding: var(--padding) 0;
            text-align: center;
            .media {
                margin: 0 auto;
                .icon {
                    max-width: 128px;
                    width: 128px;
                }
            }
        }
        @media (--max-fablet) {
            padding: var(--padding) 0;
            text-align: center;
            .media {
                margin: 0 auto;
                .icon {
                    max-width: 128px;
                    width: 128px;
                }
            }
        }
    }
    
}