footer + .notice{
    background-color: #ffff00;
    position: sticky;
    z-index: 99999999;
} 
    footer + .notice h1{
        font-size: var(--f-size-l);
        line-height: var(--l-height-l);
    }

    footer + .notice p{
        font-size: var(--f-size-xs);
        line-height: var(--l-height-s);
    }

    .nc-submit{
        background: unset;
        border: unset;
        padding: unset;
        cursor: pointer;
    }
    .nc-submit:hover .txt{
        text-decoration: underline;
    }
    .response.open + .nc-submit{
        display: none;
    }

        .nc-submit .txt{
            font-size: var(--f-size-xs);
            line-height: var(--l-height-s);
            color: var(--governor-bay);
        }

        .nc-submit.load .txt{
            display: none;
        }

        .nc-submit .btn-loading{
            height: var(--l-height-l);
            color: var(--gray-dark);
            display: none;
        }
            .nc-submit.load .btn-loading{
                display: flex;
            }

            .nc-submit .loading, .nc-submit .loading:before, .nc-submit .loading:after {
                border-radius: 50%;
                width: 1.5em;
                height: 1.5em;
                animation-fill-mode: both;
                animation: bblFadInOut 1.8s infinite ease-in-out;
                top: -17px;
            }
            .nc-submit .loading {
                color: var(--gray-dark);
                font-size: 7px;
                position: relative;
                text-indent: -9999em;
                transform: translateZ(0);
                animation-delay: -0.16s;
            }
            .nc-submit .loading:before,
            .nc-submit .loading:after {
                content: '';
                position: absolute;
                top: 0;
            }
            .nc-submit .loading:before {
                left: -3.5em;
                animation-delay: -0.32s;
            }
            .nc-submit .loading:after {
                left: 3.5em;
            }

            @keyframes bblFadInOut {
                0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
                40% { box-shadow: 0 2.5em 0 0 }
            }

    @media all and (min-width: 1024px){
        footer + .notice{
            bottom: 0;
        }
    }

    @media all and (max-width: 1023px){
        footer + .notice{
            bottom: calc( env(safe-area-inset-bottom) + 57px );
        }
    }


    .write-review{
        position: relative;
    }

            .write-box{
                position: relative;
                overflow: hidden;
                width: min(700px, 80%);
                background-image: var(--linear-gr-1);
                gap: var(--gap-m);
                border-radius: var(--b-r-l);
                padding: var(--gap-xl) var(--gap-m);
            }
                .wr-bg{
                    position: absolute;
                    z-index: 0;
                    left: 0;
                    top: -50%;
                    width: 100%;
                    height: auto;
                    opacity: .15;
                }

                .write-wrap{
                    z-index: 3;
                    gap: var(--gap-m);
                }
                    .write-review .title{
                        color: var(--f-light-default);
                        font-size: var(--f-size-xxxxl);
                        line-height: var(--l-height-xxl);
                        font-weight: 600;
                    }

                    .write-review p{
                        color: var(--f-light-default);
                        font-size: var(--f-size-xs);
                        line-height: var(--l-height-s);
                        text-wrap: balance;
                        text-align: center;
                    }

    .footer{
        position: relative;
        background: var(--f-light-default);
        gap: var(--gap-xxl);
    }

        .footer-nav{}

            .footer-txt{
                font-size: var(--f-size-xxs);
                line-height: var(--l-height-xxs);
            }
            .footer-logo-box{
                margin: 0 0 var(--gap-m) 0;
            }
                .footer-logo{
                    width: 130px;
                    height: auto;
                }

            .footer-menu .menu-item-has-children{
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
            }
                .footer-menu .menu-item-has-children > a,
                .footer-menu .menu-item-has-children > div{
                    color: var(--umbra);
                    font-size: var(--f-size-s);
                    font-weight: 700;
                    line-height: var(--l-height-xs);
                    margin: 0 0 var(--gap-s) 0;
                }

                    .footer-menu .menu-item{
                        width: 100%;
                        list-style: none;
                        margin: 0 0 5px 0;
                    }
                        .footer-menu .sub-menu .menu-item a,
                        .footer-menu .sub-menu .menu-item div{
                            font-size: var(--f-size-xxs);
                            line-height: var(--l-height-xxs);
                            text-decoration: none;
                        }

        .footer-bottom{
            padding: 0 0 var(--gap-l) 0;
        }
            .footer-bottom .boxW{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
            }

                .footer-copy{
                    width: fit-content;
                    font-size: var(--f-size-xxs);
                    line-height: 100%;
                    align-self: center;
                }

                .footer-socials{
                    width: fit-content;
                    gap: var(--gap-s);
                }
                    .f-social{
                        display: flex;
                    }
                        .f-social a{
                            width: fit-content;
                            height: auto;
                            padding: var(--gap-xs);
                        }
                            .f-social a span{
                                font-size: var(--f-size-l);
                                line-height: 100%;
                                color: var(--gray);
                            }

        @media all and (max-width: 1023px){
            footer{
                padding-bottom: var(--gap-xxl);
            }

            .footer-bottom .boxW{
                place-content: center;
                place-items: center;
                gap: var(--gap-s);
            }

            .footer-menu .menu-item-has-children > a,
            .footer-menu .menu-item-has-children > div{
                margin: 0;
            }

        }

        @media all and (min-width: 800px){

            .badges-box{
                display: grid;
                grid-template-columns: repeat(2, min(40%, 240px));
                justify-content: center;
            }

            .footer-content-box{
                display: grid;
                grid-template-columns: minmax(180px, 30%) auto;
            }

                .footer-menu .menu-items{
                    display: grid;
                    grid-template-columns: repeat(4, max-content);
                    justify-content: space-between;
                }
        }

        @media all and (max-width: 799px){

            .badges-box{
                display: grid;
                justify-content: center;
            }
                .badges-box a{display: contents;}
                    .badges-box img{
                        width: clamp(50%, 200px, 70%);
                    }

            .footer-content-box{
                display: grid;
            }

            .footer-content{
                width: max-content;
                justify-self: center;
            }

            .footer-menu .menu-items{
                width: var(--full-w);
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                justify-content: space-between;
                justify-self: center;
            }
        }

        @media all and (max-width: 600px){

            .footer-menu .menu-item {
                margin: 0 0 15px 0;
            }
                .footer-menu .sub-menu .menu-item a{
                    font-size: var(--f-size-xs);
                    line-height: var(--l-height-s);
                }

        }

@layer shortcodes{
    .highlight{
        padding: 0 5px;
        border-radius: var(--b-r-m);
        width: fit-content;
        margin: 0 3px;
        font: inherit;
    }
 
    .highlight > *{color: inherit;}
 
        .highlight.blue,
        .highlight.blue > p,
        .highlight.blue > div,
        .highlight.blue > span,
        .hl-blue{
            background-color: var(--governor-bay-1) !important;
            color: var(--governor-bay) !important;
            font-weight: 600;
        }

        .highlight.pink,
        .highlight.pink > p,
        .highlight.pink > div,
        .highlight.pink > span,
        .hl-pink{
            background-color: var(--bondi-blue-1) !important;
            color: var(--bondi-blue) !important;
            font-weight: 600;
        }

    .div-solid,
    .div-dotted,
    .div-fadeout{
        width: 100%;
        height: 2px;
    }

    .div-solid{ background-color: var(--governor-bay); }
    .div-fadeout, .div-dotted{ background-color: var(--bondi-blue); }

    .quote{
        display: flex;
        flex-direction: column;
        gap: var(--gap-s);
        position: relative;
        border-radius: var(--gap-m);
        padding: var(--gap-m) var(--gap-m) var(--gap-m) var(--gap-l);
        font: inherit;
        border: 1px solid var(--umbra-2);
        border-left: 6px solid var(--governor-bay);
        quotes: "“" "”" "‘" "’";
    }
        blockquote.quote p::before {
            content: open-quote;
        }
        blockquote.quote p::after {
            content: close-quote;
        }

        .quote cite{
            color: var(--governor-bay);
            font-weight: 700;
            font-family: 'Urbanist','Roboto',sans-serif;
        }



    .accList{}

        .accItem{}
            .accLabel{
                cursor: pointer;
                border: 1px solid var(--umbra-2);
                border-radius: var(--b-r-l);
                padding: var(--gap-s) var(--gap-m);
            }
            .accCheck:checked + .accLabel{
                border-radius: var(--b-r-l) var(--b-r-l) 0 0;
            }
            .accLabel:hover{
                background-color: #ABABAE1A;
            }
                .accIcon{
                    font-size: var(--f-size-xs);
                    line-height: 1.2;
                    align-self: center;
                    transition: rotate 0.3s ease-in;
                }

                .accCheck:checked + .accLabel .accIcon{
                    rotate: 180deg;
                }

                .accTitle{
                    font-size: var(--f-size-l);
                    line-height: 1.2;
                    font-weight: 600;
                }

            .accContent{
                height: fit-content;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease-in;
            }
            .accCheck:checked ~ .accContent{ max-height: 2000px; }

                .accContent .content{
                    border: 1px solid var(--umbra-2);
                    border-radius: 0 0 var(--b-r-l) var(--b-r-l);
                    border-top: unset;
                    padding: var(--gap-s) var(--gap-m);
                }


    .testimonials-box .section-title{
        width: min( 600px, 100% );
    }

        .testimonials{
            width: 100%;
            overflow-x: auto;
            flex-wrap: nowrap;
            gap: var(--gap-m);
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            scroll-margin: 0 var(--gap-l);
            scroll-padding: 0 var(--gap-s);
            padding: var(--gap-l) var(--gap-l);
        }

            .testimonial{
                width: 100%;
                gap: var(--gap-s);
                scroll-snap-align: start;
                border: 1px solid var(--umbra-2);
                border-top: 6px solid var(--bondi-blue);
                border-radius: var(--gap-m);
                transition: box-shadow .15s ease-in;
                cursor: pointer;
            }

            .testimonial:hover {
                -moz-box-shadow: var(--b-s-glass);
                -webkit-box-shadow: var(--b-s-glass);
                box-shadow: var(--b-s-glass)
            }

            .testimonials-wrap:hover .testimonial{
                animation-play-state: paused;
            }

                .t-author{
                    display: flex;
                    gap: var(--gap-s);
                }

                    .t-avatar{
                        width: 70px;
                        height: auto;
                        aspect-ratio: 1;
                        border-radius: 100%;
                        flex: 0 0 70px;
                        border: 1px solid hsl(220 13% 91%);
                        box-shadow: var(--shadow-sm);
                    }

                    .t-author-box{
                        place-content: center;
                        flex: 1 0 calc(100% - 100px);
                    }
                        .t-author-name{
                            width: fit-content;
                            font-size: var(--f-size-s);
                            line-height: var(--l-height-s);
                            font-weight: 700;
                        }

                    .t-company{
                        display: flex;
                        flex-wrap: wrap;
                        font-weight: 300;
                        color: var(--umbra);
                    }
                        .t-position{
                            font-size: var(--f-size-xxs);
                            line-height: var(--l-height-xs);
                            font-weight: 300;
                            font-style: italic;
                            color: var(--umbra);
                        }
                        .t-sep{
                            font-size: var(--f-size-s);
                            line-height: var(--l-height-xs);
                            font-weight: 500;
                        }
                        .t-company-name{
                            font-size: var(--f-size-xs);
                            line-height: var(--l-height-xs);
                            text-transform: uppercase;
                            font-weight: 500;
                        }

                .t-content{
                    width: 100%;
                    font-size: var(--f-size-xs);
                    line-height: var(--l-height-xs);
                }

        .t-nav{
            padding: var(--gap-xs) var(--gap-s);
            border: 1px solid rgba(33, 31, 32, 0.20);
            border-radius: var(--b-r-l);
            background-color: var(--f-light-default);
            cursor: pointer;
        }

        .t-nav.off{
            opacity: 0.5;
            cursor: not-allowed;
        }
            .t-nav span{
                font-size: var(--f-size-m);
                line-height: 100%;
            }


            .expertInsight{
                margin-bottom: var(--gap-m);
            }
                .expertProfile{}
                    .expertInsight .expertAvatar{
                        width: 80px;
                        height: 80px;
                        aspect-ratio: 1;
                        border-radius: 100%;
                        border: 2px solid var(--governor-bay);
                    }
                    .expertInsight .expertBio{ justify-content: center; }
                        .expertInsight  .expertName{
                            font-size: var(--f-size-xl);
                            line-height: var(--l-height-m);
                            font-weight: 700;
                        }
                        .expertInsight .expertPosition{
                            font-size: var(--f-size-s);
                            line-height: var(--l-height-xs);
                            font-weight: 400;
                        }
                        .expertInsight .expertCompany{
                            font-size: var(--f-size-s);
                            line-height: var(--l-height-xs);
                            font-weight: 700;
                        }
                            .expertInsight .expertCompany .icon-new-tab2{
                                font-size: var(--f-size-s);
                                line-height: var(--l-height-xs);
                            }

                .expertInsight .expertQuote{
                    position: relative;
                    padding: var(--gap-m) 0 var(--gap-l) var(--gap-l);
                    border-left: 2px solid var(--governor-bay);
                    border-bottom: 2px solid var(--governor-bay);
                    border-bottom-left-radius: 30px;
                }
                .expertInsight .expertQuote::after{
                    content: "";
                    position: absolute;
                    left: 10%;
                    bottom: -2px;
                    width: 90%;
                    height: 2px;
                    background: linear-gradient( to right, var(--governor-bay), #f8f8f8 80% );
                }

                @media all and (min-width: 551px){
                    .expertInsight .expertQuote{ margin-left: 40px; }
                }

                @media all and (max-width: 550px){
                    .expertInsight .expertQuote{ margin: 0; }
                    .expertInsight .expertQuote::before{
                        content: "";
                        position: absolute;
                        left: -2px;
                        top: -40px;
                        width: 2px;
                        height: 40px;
                        background-color: var(--governor-bay);
                    }
                }

            .banner{
                flex-wrap: wrap;
                border: 1px solid #bfdbfe80;
                border-radius: var(--b-r-l);
                padding: 0 0 var(--gap-s) 0;
                box-shadow: var(--shadow-sm);
            }
            .banner.bg-cover{
                position: relative;
                padding: var(--gap-l) 0;
            }

                .banner picture.bg-cover{
                    position: relative;
                }

                .banner picture{
                    border-radius: var(--b-r-l) var(--b-r-l) 0 0;
                    overflow: hidden;
                    transition: box-shadow 0.15s ease-in;
                }
                .banner:hover picture{
                    -moz-box-shadow: var(--b-s-glass);
                    -webkit-box-shadow: var(--b-s-glass);
                    box-shadow: var(--b-s-glass);
                }

                .banner-image{
                    width: 100%;
                    height: auto;
                    border-radius: var(--b-r-l) var(--b-r-l) 0 0;
                }
                .banner .boxW{
                    flex-wrap: wrap;
                }
                figcaption.banner-title{
                    width: fit-content;
                    font-size: var(--f-size-m);
                    line-height: 1.2;
                    font-weight: 600;
                }

                figcaption.banner-title.red{ color: var(--candy-apple); }
                figcaption.banner-title.blue{ color: var(--governor-bay); }
                figcaption.banner-title.green{ color: var(--oz); }
                figcaption.banner-title.gold{ color: var(--marigold); }
                figcaption.banner-title.black{ color: var(--umbra-8); }
                figcaption.banner-title.white{ color: var(--f-light-default); }

            @media all and (max-width: 700px){
                figcaption.banner-title{ text-align: center; }
            }


        .fs.galleryWrap{
            position: fixed;
            z-index: 999;
            left: 0;
            width: 100%;
            height: calc(100% - 70px);
            padding: var(--gap-l) 0;
            background-color: #fff;
        }

        .fs.galleryWrap::before{
            content: "";
            position: fixed;
            z-index: -1;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }

            .gallery{
                width: 100%;
                overflow-x: auto;
                flex-wrap: nowrap;
                gap: var(--gap-m);
                scroll-behavior: smooth;
                scroll-snap-type: x mandatory;
                scroll-margin: 0;
                scroll-padding: 0;
                padding: var(--gap-s) 0;
            }
            .fs .gallery{
                scroll-margin: 0;
                scroll-padding: 0 10%;
            }

                .galleryFigure{
                    scroll-snap-align: start;
                    scroll-snap-stop: normal;
                    width: 100%;
                    gap: var(--gap-s);
                    scroll-snap-align: start;
                }
                .fs .galleryFigure{
                    justify-content: center;
                    width: auto;
                    max-width: 100%;
                    height: auto;
                    max-height: 95%;
                }
                .galleryFigure:hover{
                    cursor: zoom-in;
                }
                .fs .galleryFigure:hover{
                    cursor: zoom-out;
                }

                .galleryWrap:hover .galleryFigure{
                    animation-play-state: paused;
                }

                    .galleryPicture{
                        display: flex;
                        border-radius: var(--b-r-l);
                        overflow: hidden;
                    }
                    .galleryWrap:not(.fs) .galleryPicture{ height: 200px; }
                    .galleryWrap.fs .galleryPicture{ height: fit-content; }

                        .galleryImage{
                            align-self: center;
                        }
                        .fs .galleryImage {
                            height: auto;
                            max-height: 100%;
                        }

                    .galleryCaption{
                        display: flex;
                        justify-content: center;
                        text-align: center;
                        flex-wrap: wrap;
                        font-weight: 300;
                        color: var(--umbra-8);
                        font-style: italic;
                        font-size: var(--f-size-xs);
                    }
                    .fs .galleryCaption{
                        background-color: #ffffffeb;
                        padding: var(--gap-s) var(--gap-m);
                        width: fit-content;
                        align-self: center;
                        font-weight: 500;
                        border-radius: 10px;
                    }

        @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {

            .fs.galleryWrap{
                backdrop-filter: blur(20px);
                -moz-backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20 px);
                padding: var(--gap-l) 0;
                background: rgba( 255,255,255, 0.97 );
            }

            .fs.galleryWrap::before{
                backdrop-filter: blur(20px);
                -moz-backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20 px);
                background: rgba( 255,255,255, 0.97 );
            }

        }

        @media all and (min-width: 1024px){
            .fs.galleryWrap{
                top: 70px;
            }
            .fs.galleryWrap::after{
                top: 70px;
            }
        }
        @media all and (max-width: 1023px){
            .fs.galleryWrap{
                top: 60px;
            }
            .fs.galleryWrap::after{
                top: 60px;
            }
        }


            .g-nav{
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: var(--gap-s) var(--gap-s);
                border: 1px solid rgba(33, 31, 32, .20);
                border-radius: var(--b-r-l);
                background-color: var(--f-light-default);
                cursor: pointer;
            }

            .g-nav.off{
                opacity: 0.5;
                cursor: not-allowed;
            }
                .g-nav span{
                    font-size: var(--f-size-m);
                    line-height: 100%;
                }

    
        @media all and (min-width: 700px){

            .testimonial {
                flex: 1 0 calc(50% - var(--gap-s));
            }

            .galleryFigure{
                flex: 1 0 calc(50% - var(--gap-s));
            }
            .fs .galleryFigure{
                flex: 1 0 100%;
            }

        }
    
        @media all and (max-width: 699px){

            .testimonial {
                flex: 1 0 calc( 98% - var(--gap-s) );
            }

            .galleryFigure {
                flex: 1 0 calc( 98% - var(--gap-s) );
            }

        }
            
    
        .columns{
            display: grid;
            gap: var(--gap-l);
        }
            .column.glass{
                box-shadow: unset;
                background: unset;
                border: 1px solid var(--umbra-2);
            }
            .column{ font: inherit; }

        @media all and (min-width: 600px){
    
            .columns.col2,
            .columns.col4{
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        
        }
    
        @media all and (min-width: 800px){
    
            .columns.col3{
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        
        }
    
            .column{
                border-radius: var(--b-r-l);
            }
                .columns img{
                    width: auto;
                    max-width: 100%;
                    place-self: center;
                    margin: 0 auto;
                    height: auto;
                    border-radius: var(--b-r-l);
                }
    
        .pretty-list{
            display: flex;
            flex-direction: column;
        }
            .pretty-list ul{
                display: flex;
                flex-direction: column;
            }
            div:not( .column ) > .pretty-list ul{ padding-left: var(--gap-l); }

                .pretty-list li{
                    list-style: none;
                    position: relative;
                }
    
                .pretty-list li::before{
                    font-family: 'icomoon';
                    font-size: var(--f-size-l);
                    line-height: 1;
                    position: relative;
                    top: 3px;
                }
                    .chevron-list li::before,
                    .arrow-list li::before{
                        content: "\edc8";
                        color: var(--governor-bay);
                    }
                    .dash-list li::before,
                    .star-list li::before{
                        content: "\ec6b";
                        color: var(--bondi-blue);
                    }

                    .pretty-list li :is(h1, h2, h3, h4, h5, h6){
                        display: inline-block;
                    }

        .box-green,
        .box-blue{
            position: relative;
            border-radius: var(--gap-m);
            padding: var(--gap-m) var(--gap-m) var(--gap-m) var(--gap-l);
            font: inherit;
            font-family: 'Roboto';
            border: 1px solid var(--umbra-2);
            border-left: 6px solid var(--bondi-blue);
        }

    .wpsm-titlebox{
        display: flex;
        flex-direction: column;
        gap: var(--gap-s);
        position: relative;
        border-radius: var(--gap-m);
        padding: var(--gap-m) var(--gap-m) var(--gap-m) var(--gap-l);
        font: inherit;
        border: 1px solid var(--umbra-2);
        border-left: 6px solid var(--governor-bay);
    }

        .titlebox{}
            .titlebox p,
            .titlebox h2,
            .titlebox h3,
            .titlebox h4{
                color: var(--governor-bay);
                font: inherit;
                font-family: 'Urbanist', 'Roboto', sans-serif;
                font-weight: 700;
            }
            .titlebox p{
                font: inherit;
            }

        .titlebox-content{
            position: relative;
            z-index: 2;
            font: inherit;
            font-family: 'Roboto';
        }

    .promobox{
        display: grid;
        gap: var(--gap-s);
        position: relative;
        border-radius: var(--gap-m);
        padding: var(--gap-m) var(--gap-m) var(--gap-m) var(--gap-l);
        font: inherit;
        border: 1px solid var(--umbra-2);
        border-left: 6px solid var(--governor-bay);

        background-color: var(--governor-bay-1);
    }

    .ext-box{
        display: grid;
        gap: var(--gap-s);
        position: relative;
        border-radius: var(--gap-m);
        padding: var(--gap-m) var(--gap-m) var(--gap-m) var(--gap-l);
        font: inherit;
        border: 1px solid var(--umbra-2);
        border-left: 6px solid var(--bondi-blue);

        background-color: var(--bondi-blue-1);
    }

        .ext-box .btn{
            background: var(--bondi-blue);
        }
        .ext-box .btn:focus{ box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset, 0px -1px 2px 0px rgba(0, 0, 0, 0.25) inset, 0px 0px 0px 3px var(--governor-bay-2); }

        .ext-box .btn::after {
            content: "\e91e";
            color: inherit;
            margin-left: var(--gap-s);
            position: relative;
            bottom: -2px;
            font-size: inherit;

            font-family: 'icomoon' !important;
            speak: never;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }


    .pricing-box{
        display: flex;
        flex-direction: column;
        gap: var(--gap-s);
        position: relative;
        border-radius: var(--gap-m);
        padding: var(--gap-m) var(--gap-m) var(--gap-m) var(--gap-l);
        font: inherit;
        border: 1px solid var(--umbra-2);
        border-left: 6px solid var(--governor-bay);
    }
        .pb-item{
            font-weight: 700;
        }
        .pb-url{
            font-size: var(--f-size-s);
            line-height: var(--l-height-xs);
            color: var(--bondi-blue);
        }


    .embed-video{
        width: min( 100%, 800px );
        place-self: center;
    }
        .embed-box{
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            height: 0;
            border-radius: 20px;
            overflow: hidden;
        }
            .placeholder.ph-yt{
                position: absolute;
                top: 0;
                left: 0;
                border: 0;
                width: 100%;
                height: 100%;
                cursor: pointer;
                z-index: 11;
                overflow: hidden;
            }

                .placeholder.ph-yt:before{
                    content: '';
                    width: 100%;
                    height: 110px;
                    position: absolute;
                    background-repeat: repeat-x;
                    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
                    -webkit-transition: opacity .25s cubic-bezier(0,0,0.2,1);
                    transition: opacity .25s cubic-bezier(0,0,0.2,1);
                    pointer-events: none;
                    z-index: 12;
                }
                .placeholder.ph-yt picture{
                    position: relative;
                    display: flex;
                }
                .placeholder.ph-yt img{
                    box-shadow: unset !important;
                    border-radius: unset !important;
                    position: relative;
                    width: 100%;
                    height: auto;
                    align-self: center;
                    justify-self: center;
                }

                .ytp-title-box{
                    position: absolute;
                    top: 20px;
                    left: 15px;
                    min-height: 52px;
                    width: calc(100% - 30px);
                }
                    .ytp-title-text{
                        vertical-align: top;
                        font-size: 18px;
                        font-weight: 300;
                        width: 100%;
                        white-space: nowrap;
                        word-wrap: normal;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        padding: 0;
                        color: var(--f-light-other);
                        z-index: 13;
                    }
                    .placeholder.ph-yt:hover .ytp-title-text{
                        color: var(--f-light-default);
                        -webkit-transition: color .1s cubic-bezier(0.4, 0, 1, 1);
                        transition: color .1s cubic-bezier(0.4, 0, 1, 1)
                    }

                .ytp-large-play-button {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 68px;
                    height: 48px;
                    margin-left: -34px;
                    margin-top: -24px;
                    -webkit-transition: opacity .25s cubic-bezier(0,0,0.2,1);
                    transition: opacity .25s cubic-bezier(0,0,0.2,1);
                    z-index: 13;
                }
                    .ytp-large-play-button svg{
                        height: 100%;
                        left: 0;
                        position: absolute;
                        top: 0;
                        width: 100%;
                    }
                    .ytp-large-play-button-bg {
                        -webkit-transition: fill .1s cubic-bezier(0.4,0,1,1),fill-opacity .1s cubic-bezier(0.4,0,1,1);
                        transition: fill .1s cubic-bezier(0.4,0,1,1),fill-opacity .1s cubic-bezier(0.4,0,1,1);
                        fill: #212121;
                        fill-opacity: .8;
                    }
                    .placeholder.ph-yt:hover .ytp-large-play-button-bg {
                        -webkit-transition: fill .1s cubic-bezier(0, 0, 0.2, 1), fill-opacity .1s cubic-bezier(0, 0, 0.2, 1);
                        transition: fill .1s cubic-bezier(0, 0, 0.2, 1), fill-opacity .1s cubic-bezier(0, 0, 0.2, 1);
                        fill: #f00;
                        fill-opacity: 1;
                    }

            .embed-box iframe{
                position: absolute;
                top: 0;
                left: 0;
                border: 0;
                width: 100%;
                height: 100%;

                z-index: 15;
            }

    .single-deal{
        margin: 20px 0 0 0;
    }
        .single-deal .deal-box{
            max-width: 465px;
        }
    
        .multi-deals .deal-box{
            width: 465px;
        }
    
    
    /* Horizontal Scroll Softwares and Deals */
    
    .scroll-wrap{
        position: relative;
        margin: 0 0 var(--gap-s) 0;
    }
    
    /* Software Overview */
        .rbody-row.short{
            gap: var(--gap-l);
        }
    
            .overview-logo img{
                max-width: 100%;
            }

    .table-box.glass{
        box-shadow: unset;
        background: unset;
    }
    .table-box{
        border: 1px solid var(--umbra-2);
    }

        .table-box .table{
            position: relative;
            font: inherit;
            vertical-align: top;
            -webkit-overflow-scrolling: touch;
        }

            .table-box .basic-table .thead{
                background-color: var(--governor-bay-1);
            }
            .table-box .pricing-table .thead{
                background-color: var(--bondi-blue-1); 
            }

            tbody{
                -webkit-overflow-scrolling: touch;
            }

                    .table .thead tr{
                        border-radius: var(--b-r-m);
                        /* display: grid; */
                    }

                        .table .th-cell {
                            border: 0;
                            line-height: 1.4;
                            font-weight: 500;
                            padding: var(--gap-s);
                            text-align: left;
                            vertical-align: middle;
                            align-self: center;
                        }

                        .basic-table .th-cell{ color: var(--governor-bay); }
                        .pricing-table .th-cell{ color: var(--bondi-blue); }

                        .table .th-cell:first-child {
                            border-radius: 5px 0 0 5px;
                        }
                        .table .th-cell:last-child {
                            border-radius: 0 5px 5px 0;
                        }
                    .table .tb-row{
                        /* display: grid; */
                    }
                    .tb-row:nth-child(2n) {
                        background-color: var(--umbra-05);
                    }

                        .table .tb-row:last-child{ border: unset; }

                        .table .tb-cell {
                            line-height: var(--l-height-xs);
                            font-size: var(--f-size-s);
                            padding: var(--gap-s);
                            vertical-align: middle;
                            align-self: center;
                            font-family: 'Roboto', system-ui, sans-serif;
                        }

    @media all and (min-width: 960px){
        .table-box{
            overflow-x: scroll;
            border-radius: var(--gap-m) var(--gap-m) 0 0;
        }
        .table-box::-webkit-scrollbar {
            display: none;
        }

        .table-box:has( .basic-table ){
            border-top: 6px solid var(--governor-bay);
        }

        .table-box:has( .pricing-table ){
            border-top: 6px solid var(--bondi-blue);
        }

        .table{
            display: table;
        }

            .table .thead{
                width: 100%;
            }
        
            .table .thead tr{}
                .table .th-cell{}
        
            .table .tbody {}
        
                .tb-row {}
                    .tb-cell{ border-right: 1px solid var(--umbra-05); }
        
    }

    @media all and (max-width: 959px){

        .table-box{
            border-radius: var(--gap-m) 0 0 var(--gap-m);
        }
        .table-box:has( .basic-table ){
            border-left: 6px solid var(--governor-bay);
        }

        .table-box:has( .pricing-table ){
            border-left: 6px solid var(--bondi-blue);
        }

        .table{
            display: flex;
            flex-direction: row;
            max-width: 100%;
        }

        .table tr{
            width: clamp(200px, 33dvw, 300px);
        }
    
        .table .thead tr{
            display: grid;
            grid-auto-rows: 1fr;
            grid-auto-flow: row;
            width: fit-content;
            max-width: 100%;
            height: 100%;
        }
            .table .th-cell{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                max-width: 100%;
                white-space: normal;
            }
    
        .table .tbody{
            display: flex;
            flex-direction: row;
            flex-grow: 0;
            flex-shrink: 1;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
        }
        .table .tbody::-webkit-scrollbar {
            display: none;
        }
            .tb-row {
                display: grid;
                grid-auto-rows: 1fr;
                grid-auto-flow: row;
                scroll-snap-align: start;
            }
            /* .basic-table .tb-row{ border-right: 1px solid var(--governor-bay); } */
            /* .pricing-table .tb-row{ border-right: 1px solid var(--bondi-blue); } */

                .tb-row .tb-cell{
                    display: flex;
                    place-items: center;
                    height: 100%;
                    border-bottom: 1px solid var(--umbra-05);
                }

                .tb-row .tb-cell:last-child{
                    border: none;
                }

    }
    
        .rbody-row {
            display: grid;
            font-size: var(--f-size-m);
            line-height: var(--l-height-l);
            gap: var(--gap-l);
        }
            .pro-cons .rbody-col{
                display: flex;
                flex-direction: column;
                gap: var(--gap-m);
                position: relative;
                border-radius: var(--gap-l);
                padding: var(--gap-m);
                font: inherit;
                border: 1px solid var(--umbra-2);
                border-top: 6px solid var(--oz);
            }

            .pro-cons .rbody-col:has( .pros ){ border-top: 6px solid var(--oz); }
            .pro-cons .rbody-col:has( .cons ){ border-top: 6px solid var(--candy-apple); }

                .col-title {
                    font-family: 'Urbanist', 'Roboto', sans-serif;
                    font-size: var(--f-size-xl);
                    line-height: 1.3;
                    font-weight: 700;
                }
                .col-title.pro {
                    color: var(--oz);
                }
        
                .col-title.con {
                    color: var(--candy-apple);
                }
                
                .pro-cons .col-title {
                    position: relative;
                    display: inline-block;
                    line-height: var(--l-height-l);
                }

            .pro-cons ul{
                display: flex;
                list-style: none !important;
                flex-direction: column;
            }
            .pro-cons ul > * + * { margin-top: 5px; }
                .pro-cons ul li{
                    display: flex;
                    gap: var(--gap-s);
                }
                .pro-cons ul li:has(*){ flex-wrap: wrap; }

                .pro-cons ul li::before{
                    font-family: icomoon;
                    font-size: var(--f-size-l);
                    align-self: flex-start;
                }
                .pro-cons .pros li::before{content: "\ee76"; color: var(--oz);}
                .pro-cons .cons li::before{content: "\ed66"; color: var(--candy-apple);}

                .pro-cons ul li > *{ flex: 1 0 calc(100% - 30px); }
        
        @media all and (max-width:550px){
            .sub-form{flex-wrap: wrap;}
        }
    
        .loop-coupons {
            display: grid;
            gap: var(--gap-m);
        }
    
        .xs-list{
            display: grid;
        }
        @media all and (min-width: 550px){
            .xs-list{
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

    /**** Compare Page ***/
        .cp-items{
            display: grid;
        }
            .cp-item{
                display: flex;
                flex-direction: column;
                gap: 20px;
            }
    
            .cp-items::before,
            .cp-x3.cp-items::after{
                content: "vs";
            }
    
            .cp-items::before{
                grid-area: 1 / 2 / 2 / 3;
            }
        
            .cp-x3.cp-items::after{
                grid-area: 1 / 4 / 2 / 5;
            }
    
            .cpi-1{grid-area: 1 / 1 / 2 / 2;}
            .cpi-2{grid-area: 1 / 3 / 2 / 4;}
            .cpi-3{grid-area: 1 / 5 / 2 / 6;}


    @media all and (min-width: 960px){

        .ext-box,
        .promobox{
            display: grid;
            grid-template: 1fr / 1fr 300px;
            position: relative;
        }

    }

    @media all and (max-width: 959px){
    
        .ext-box,
        .promobox{
            display: grid;
            grid-template: auto 1fr / 1fr;
            position: relative;
            gap: var(--gap-m);
        }

    }
    
    @media all and (min-width: 1200px){
        .cp-logo{max-width: 50%;}
    }
    
    @media all and (min-width: 960px) and (max-width: 1199px){
        .cp-logo{max-width: 70%;}
    }
    
    @media all and (min-width: 799px) and (max-width: 959px){
        .cp-logo{max-width: 60%;}
    
    }
    
    @media all and (min-width: 599px) and (max-width: 799px){
        .cp-logo{max-width: 75%;}
    }
    
    
    @media all and (min-width: 599px) and (max-width: 799px){
    
        .cp-x3{
            grid-template-columns: 1fr 40px 1fr 40px 1fr;
        }
        .cp-x2{
            grid-template-columns: 1fr 40px 1fr;
        }
    
        .cp-items::before,
        .cp-x3.cp-items::after{
            font-size: var(--f-size-xxl);
            line-height: var(--l-height-l);
            text-align: center;
            align-self: flex-end;
        }
    
                .cp-fav{
                    display: none;
                }
                .cp-name{
                    margin-top: auto;
                    justify-content: center;
                }
    
    }
    
    @media all and (min-width: 599px){
    
        .cp-items{
            display: grid;
        }
        .cp-x3{
            grid-template-columns: 1fr 40px 1fr 40px 1fr;
        }
        .cp-x2{
            grid-template-columns: 1fr 40px 1fr;
        }
    
        .cp-items::before,
        .cp-x3.cp-items::after{
            font-size: var(--f-size-xxl);
            line-height: var(--l-height-l);
            text-align: center;
            align-self: flex-end;
        }
    
                .cp-fav{
                    display: none;
                }
                .cp-name{
                    margin-top: auto;
                    justify-content: center;
                    text-align: center;
                }
    
    }
    
    
    @media all and (max-width: 599px){
    
        .cp-items{
            display: grid;
            overflow-x: scroll;
            overflow-y: visible;
        }
        .cp-x3{
            grid-template-columns: 45% 10% 45% 10% 45%;
        }
        .cp-x2{
            grid-template-rows: 1fr 40px 1fr;
        }
    
        .cp-items::before,
        .cp-x3.cp-items::after{
            font-size: var(--f-size-xl);
            line-height: var(--l-height-m);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    
            .cp-logo{
                display: none;
            }
            .cp-fav{
                width: clamp(5rem, 1.1081rem + 10.8108vw, 9rem);
            }
    
            .cp-name{
                align-self: center;
                justify-content: center;
                text-align: center;
            }
    
    }
    
    
    
    @media all and (min-width: 550px){
    
        .rbody-row.short{
            grid-template: 1fr / 200px auto;
        }
    
    }

    @media all and (max-width: 549px){
    
        .rbody-row.short{
            grid-template: 1fr auto / auto;
        }
            .rbody-row.short .overview-logo{
                display: flex;
                flex-grow: 0;
                flex-shrink: 1;
                justify-self: center;
            }
    
    }

    .people-list{
        display: grid;
        justify-content: center;
    }

        .person{
            gap: var(--gap-s);
            width: 100%;
        }

            .person-avatar{
                width: 100%;
                height: auto;
            }
            .person-name{
                font-size: var(--f-size-s);
                line-height: 1;
                font-weight: 500;
            }
            .person-business{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                text-align: center;
            }

                .person-position,
                .person-sep,
                .person-company{
                    font-size: var(--f-size-xxs);
                    line-height: 1.2;
                }
                .person-sep{ font-weight: 700; margin: 0 3px; }
                .person-company{ font-weight: 500; }


    .people-list.cols1{ gap: var(--gap-xxl); }
    .people-list.cols2{ gap: var(--gap-xl); }
    .people-list.cols3{ gap: var(--gap-l); }
    .people-list.cols4{ gap: var(--gap-m); }
    .people-list.cols5{ gap: var(--gap-m); }

    @media all and (min-width: 83px){                           .people-list.cols1{ grid-template-columns: repeat(1, minmax(0, 1fr)); } }


    @media all and (min-width: 683px){                          .people-list.cols2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media all and (max-width: 682px){                          .people-list.cols2{ grid-template-columns: repeat(1, minmax(0, 1fr)); } }


    @media all and (min-width: 771px){                          .people-list.cols3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media all and (min-width: 502px) and (max-width: 770px){   .people-list.cols3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media all and (max-width: 501px){                          .people-list.cols3{ grid-template-columns: repeat(1, minmax(0, 1fr)); } }


    @media all and (min-width: 810px){                          .people-list.cols4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media all and (min-width: 588px) and (max-width: 809px){   .people-list.cols4{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media all and (min-width: 384px) and (max-width: 587px){   .people-list.cols4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media all and (max-width: 383px){                          .people-list.cols4{ grid-template-columns: repeat(1, minmax(0, 1fr)); } }


    @media all and (min-width: 838px){                          .people-list.cols5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } }
    @media all and (min-width: 666px) and (max-width: 837px){   .people-list.cols5{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media all and (min-width: 493px) and (max-width: 665px){   .people-list.cols5{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media all and (max-width: 492px){                          .people-list.cols5{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

        .companies{
            width: 100%;
            flex-wrap: wrap;
            gap: var(--gap-m);
            border: 1px solid #211f2033;
            border-left: 6px solid var(--bondi-blue);
            border-radius: var(--gap-m);
            padding: var(--gap-m) var(--gap-m) var(--gap-m) var(--gap-l);
            background: #fff;
            transition: box-shadow 0.2s ease-in;
        }
        .companies:hover {
            box-shadow: var(--b-s-glass);
        }
                .company{
                    gap: var(--gap-s);
                    position: relative;
                }
                .favicons .company{
                    filter: grayscale(1);
                    transition: filter .35s ease-in-out;
                }
                .favicons .company:hover{
                    filter: unset;
                }

                    .company-brand{
                        width: auto;
                    }
                    .favicons .company-brand{
                        height: 60px;
                    }

                    .logos .company-brand {
                        height: 75px;
                        filter: grayscale(1);
                        transition: filter 0.3s ease-in;
                    }
                    .companies:hover .company-brand {
                        filter: unset;
                    }


    .timelines{
        display: flex;
        flex-direction: column;
        gap: var(--gap-m);
    }

        .timeline{
            position: relative;
            display: flex;
            flex-direction: column;
            gap: var(--gap-s);
            border: 1px solid var(--umbra-2);
            border-radius: var(--b-r-l);
            padding: var(--gap-m);
            width: calc(100% - var(--gap-m));
        }
            .timeline::after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                right: calc(-1 * var(--gap-m));
                width: 4px;
                height: 100%;
                background: var(--governor-bay-2);
                border-radius: var(--b-r-s);
                transition: background-color 0.3s ease-in;
            }
            .timeline.active,
            .timeline:hover::after{ background-color: var(--governor-bay); }

            .timeline .time{
                width: fit-content;
                padding: var(--gap-s);
                border-radius: var(--b-r-xl);
                background-color: var(--governor-bay);
                color: var(--f-light-default);
                font-size: var(--f-size-m);
                line-height: 1;
                font-weight: 700;
                font-family: Roboto, sans-serif;
            }

            .timeline .title{
                font-size: var(--f-size-s);
                font-weight: 700;
            }

            .timeline .description{
                font-size: var(--f-size-xs);
                font-family: Roboto, sans-serif;
            }

                .timeline .people{
                    display: flex;
                    flex-direction: column;
                    gap: var(--gap-s);
                }
                    .timeline .person{
                        display: grid;
                        grid-template: 1fr 1fr / auto 1fr;
                        background-color: var(--governor-bay-1);
                        border-radius: var(--b-r-l);
                        padding: var(--gap-s);
                        gap: var(--gap-xs);
                    }
                        .timeline .person .avatar{
                            grid-area: 1 / 1 / 3 / 2;
                            width: var(--gap-xl);
                            height: auto;
                            border-radius: 100%;
                        }
                        .timeline .person .name{
                            grid-area: 1 / 2 / 2 / 3;
                        }
                        .timeline .person .business{
                            grid-area: 2 / 2 / 3 / 3;
                        }

    .coupon{
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: var(--gap-l);
        border-radius: var(--gap-m);
        padding: var(--gap-l) var(--gap-m) var(--gap-m);
        border: 1px solid var(--umbra-2);
        border-top: 6px solid var(--governor-bay);
        background-color: var(--governor-bay-1);
    }

    @media all and (min-width: 1100px){
        .coupon{
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: var(--gap-l);
        }
    }

    @media all and (min-width: 960px) and (max-width: 1099px){
        .coupon{
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: var(--gap-l);
            row-gap: var(--gap-s);
        }
            .coupon .discount{ grid-area: 1 / 1 / 2 / 2; }
            .coupon .content{ grid-area: 1 / 2 / 2 / 3; }
            .coupon .cta{ grid-area: 2 / 2 / 3 / 3; }
    }

    @media all and (min-width: 650px) and (max-width: 959px){
        .coupon{
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: var(--gap-l);
        }
    }

    @media all and (min-width: 450px) and (max-width: 649px){
        .coupon{
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: var(--gap-l);
            row-gap: var(--gap-s);
        }
            .coupon .discount{ grid-area: 1 / 1 / 2 / 2; }
            .coupon .content{ grid-area: 1 / 2 / 2 / 3; }
            .coupon .cta{ grid-area: 2 / 2 / 3 / 3; }
    }

    @media all and  (max-width: 449px){
        .coupon{
            display: flex;
            flex-direction: column;
            gap: var(--gap-s);
        }
        .coupon .discount{
            align-self: center;
        }
    }

        .coupon .discount{
            display: flex;
            flex-direction: column;
            width: min-content;
            gap: var(--gap-xs);
            place-content: center;
            place-items: center;
            padding: var(--gap-s);
        }
        .coupon .discount .percentage,
        .coupon .discount .text{
            font-size: var(--f-size-5xl);
            font-weight: 700;
            line-height: 1;
        }

        .coupon .content{
            display: flex;
            flex-direction: column;
            gap: var(--gap-s);
            flex: 1 1 auto;
        }
            .coupon .title{
                font-size: var(--f-size-s);
                font-weight: 700;
            }
            .coupon .description{
                font-size: var(--f-size-xs);
                font-family: Roboto, sans-serif;
            }
            .coupon .expiration{
                font-size: var(--f-size-xs);
                font-family: Roboto, sans-serif;
                font-style: italic;
            }

        .coupon .cta{
            display: flex;
            align-self: center;
            width: fit-content;
        }

}#atc{
        position: fixed;
        top: 50%;
        right: 10px;
        display: none;
        z-index: 9999;
    }
    #atc.show{
        display: block;
    }
        .atc{
            opacity: 0;
            padding: 5px;
            transition: opacity 0.3s ease-in-out;
        }
        .show .atc{
            opacity: 1;
        }
            .atc-item{
                width: 50px;
                height: 50px;
                padding: 5px;
                border: 1px solid #eeeeee;
                box-shadow: var(--b-s-glass);
                border-radius: 5px;
                position: relative;
            }
                .atc-logo{
                    width: auto;
                    height: auto;
                    max-width: 100%;
                    max-height: 100%;
                    border-radius: 5px;
                }

                .atc-remove{
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 9;
                    text-align: center;
                    cursor: pointer;
                }
                .atc-remove span{
                    color: var(--candy-apple);
                }

            .atc-go{
                width: 50px;
                height: 50px;
                padding: 5px;
                border: 1px solid #eeeeee;
                border-radius: 5px;
                position: relative;
                background-color: var(--bondi-blue);
                cursor: pointer;
                transition: all 0.3s ease-in;
            }
            .atc-go.off{
                cursor: not-allowed;
                background-color: var(--exp-color);
            }
            .atc-go:hover{
                box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), 5px 5px 10px rgba(0, 0, 0, 0.06);
            }
                .atc-go .icon-checkmark{
                    color: var(--f-light-default);
                    font-size: var(--f-size-l);
                    line-height: 18px;
                }
                .atc-go .go-txt{
                    color: var(--f-light-default);
                    font-size: var(--f-size-xs);
                    line-height: 18px;     
                }

    @media all and (min-width: 500px){
        #atc{
            top: 50%;
        }
            .atc{
                display: flex;
                flex-direction: column;
            }

        .atc-remove{
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .atc-remove:hover{
            opacity: 1;
        }
            .atc-remove span{
                font-size: var(--f-size-xxxl);
            }
            .atc-remove:hover span{
                display: inline;
            }


    }

    @media all and (max-width: 499px){

        #atc{
            bottom: 70px;
            top: unset;
        }
            .atc{
                display: flex;
                flex-direction: row;
            }


        .atc-remove{
            width: 20px;
            height: 20px;
            border-radius: 5px;
            backdrop-filter: blur( 10px );
        }

            .atc-remove span{
                display: inline;
                font-size: var(--f-size-xxl);
            }

    }


.scrollXWrap{
    display: grid;
}

    .scrollXBox{
        position: relative;
    }
        .scrollXBtn{
            display: flex;
            justify-content: center;
            width: 35px;
            height: 35px;
            aspect-ratio: 1/1;
            border-radius: 100%; 
            transition: all 0.2s ease-in-out;
            align-self: center;
        }

        .scrollXBtn:not( .on ){
            cursor: not-allowed;
            border: 1px solid var(--umbra-2);
            color: var(--umbra-2);
        }

        .scrollXBtn.on{
            cursor: pointer;
            border: 1px solid var(--umbra-8);
            color: var(--umbra-8);
        }
        .scrollXBtn.on:hover{
            background-color: var(--umbra-8);
            color: var(--f-light-default);
        }

        .scrollXLeft{ justify-self: flex-end; }
        .scrollXRight{ justify-self: flex-start; }

            .scrollXBtn span{
                position: relative;
                bottom: -1px;
                font-size: var(--f-size-m);
                color: inherit;
                align-self: center;
            }

    @media all and (min-width: 600px){

        .scrollXWrap{
            grid-template: auto 1fr / 1fr auto 1fr;
        }

        .scrollXBox{ grid-area: 1 / 1 / 2 / 4; }

        .scrollXLeft{ grid-area: 2 / 1 / 3 / 2; }

        .expandLabel{ grid-area: 2 / 2 / 3 / 3; }

        .scrollXRight{ grid-area: 2 / 3 / 3 / 4; }

    }

    @media all and (min-width: 100px) and (max-width: 599px){

        .scrollXWrap{
            grid-template: auto 1fr 1fr / 1fr 1fr;
        }

        .scrollXBox{ grid-area: 1 / 1 / 2 / 3; }

        .scrollXLeft{ grid-area: 2 / 1 / 3 / 2; }
        .scrollXRight{ grid-area: 2 / 2 / 3 / 3; }

        .expandLabel{ grid-area: 3 / 1 / 4 / 3; align-self: center; }

    }

.reviews{}

    .review{}

        .review .author{}

        .review .avatarBox{
            width: 48px;
            height: 48px;
            background: var(--f-light-default);
            border-radius: 100%;
            border: 1px solid hsl(220 13% 91%);
            box-shadow: var(--shadow-sm);

            align-self: flex-start;
            overflow: hidden;
        }
            .review .avatarImg{
                width: 100%;
                height: auto;
                aspect-ratio: 1;
                border-radius: 100%;
            }

            .review .avatarIcon{}
                .review .avatarIcon span{ font-size: 52px; }

            .author .about{
                justify-content: space-between;
            }
                .review .author .name{
                    font-size: var(--f-size-s);
                    line-height: 1;
                    font-weight: 700;
                    color: var(--umbra);
                }

                .review .author .company{
                    font-weight: 400;
                    font-size: var(--f-size-xs);
                    line-height: 1.2;
                    color: var(--umbra-8);
                }

            .review h3{
                font-size: var(--f-size-s);
                line-height: 1.4;
                font-weight: 700;
                color: var(--umbra-8);
            }

            .review .content > *{
                font-size: var(--f-size-xs);
                line-height: 1.6;
                color: var(--umbra-8);
            }

            .meta{}

                .statusDate{ flex: 1 0 auto; }

                    .statusIcon{
                        font-size: 35px;
                    }
                    .statusIcon.accept{ color: var(--governor-bay); }
                    .statusIcon.pending{ color: var(--umbra-8); }
                    .statusIcon.reject{ color: var(--candy-apple); }

                    .statusLabel{
                        font-size: var(--f-size-xs);
                        line-height: 1.2;
                        font-weight: 700;
                        color: var(--umbra);
                    }
                    .statusLabel.accept{ color: var(--umbra); }
                    .statusLabel.pending{ color: var(--umbra-8); }
                    .statusLabel.reject{ color: var(--candy-apple); }

                    .date{}

                        .date .label,
                        .date .value{
                            font-size: var(--f-size-xs);
                            line-height: 1.2;
                            font-weight: 300;
                            color: var(--umbra-8);
                        }

@media all and (min-width: 100px) and (max-width: 699px){

    .author .name,
    .author .company{ text-align: left; }

}


.faqWrap{
    display: flex;
}
body.post .faqWrap{ gap: var(--gap-l); }

    .faqList{
        flex: 1 1 auto;
    }

        .faqItem{}
            .faqLabel{
                cursor: pointer;
                border: 1px solid var(--umbra-2);
                border-radius: var(--b-r-l);
                padding: var(--gap-s) var(--gap-m);
            }
            .faqCheck:checked + .faqLabel{
                border-radius: var(--b-r-l) var(--b-r-l) 0 0;
            }
            .faqLabel:hover{
                background-color: #ABABAE1A;
            }
                .faqIcon{
                    font-size: var(--f-size-xs);
                    line-height: 1.2;
                    align-self: center;
                    transition: rotate 0.3s ease-in;
                }

                .faqCheck:checked + .faqLabel .faqIcon{
                    rotate: 180deg;
                }

                .faqTitle{
                    font-size: var(--f-size-l);
                    line-height: 1.2;
                    font-weight: 600;
                }

            .faqContent{
                height: fit-content;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease-in;
            }
            .faqCheck:checked ~ .faqContent{ max-height: 2000px; }

                .faqContent .content{
                    border: 1px solid var(--umbra-2);
                    border-radius: 0 0 var(--b-r-l) var(--b-r-l);
                    border-top: unset;
                    padding: var(--gap-s) var(--gap-m);
                }


@media all and (min-width: 700px){

    .faqWrap {
        flex-direction: row;
        gap: min(60px, 6%);
    }

    .faqWrap .section-title{
        flex: 0 1 220px;
        position: sticky;
        height: 100%;
        top: 80px;
    }

    body.post .faqWrap .section-title{ flex: 0 0 300px; }

}

@media all and (max-width: 699px){

    .faqWrap {
        flex-direction: column;
        gap: var(--gap-l);
    }

    .faqWrap .section-title{}

}

.toc-box{
    padding: 15px;
    bottom: 0px;
    z-index: 99;
    background-color: #ffffff;
    width: 100%;
    align-self: center;
    border: 1px solid var(--umbra-2);
    border-radius: var(--b-r-l);
}
    .toc-box:hover{
        background-color: #ABABAE1A;
    }

    .toc-title{
        font-size: var(--f-size-m);
        line-height: var(--l-height-xs);
        font-weight: 500;
        gap: var(--gap-s);
        cursor: pointer;
    }
    .toc-title::before{
        font-family: 'icomoon' !important;
        speak: never;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        content: "\ec5a";
        font-size: var(--f-size-xs);
    }

    .toc-title::after{
        font-family: 'icomoon' !important;
        speak: never;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        content: "\edc0";
        font-size: var(--f-size-xs);
        transition: all 0.5s ease;
        margin-left: auto;
    }
    .open .toc-title::after{
        transform: rotate(180deg);
    }

    .toc-list{
        counter-reset: item;
        list-style-type: none !important;

        height: auto;
        max-height: 0;
        overflow: hidden;
        margin: 0;
    }
    .open .toc-list{
        margin-top: var(--gap-m);
        max-height: 5000px;
    }

        .toc-sub-list{
            list-style-type: none !important;
            counter-reset: item;
            padding-left: var(--gap-m);
        }
            .toc-item{
                display: flex;
                flex-direction: column;
                gap: var(--gap-s);
            }
                .toc-link{
                    font-size: var(--f-size-s);
                    line-height: var(--l-height-xxs);
                }
                .toc-list > .toc-item > .toc-link{
                    font-weight: 500;
                }
                .toc-link::before {
                    content: counters(item, ".") ". ";
                    display: inline-block;
                    counter-increment: item;
                    margin-right: .2em;
                }


    .side-toc.fixed{
        position: fixed;
        top: 75px;
        right: calc(clamp(2rem,-2.4878rem + 14.0244vw,25rem) / 2);
        width: 300px;
        max-height: calc( 100vh - 80px );
    }

        .side-txt{
            font-size: var(--f-size-s);
            line-height: var(--l-height-xs);
        }

        .toc-wrap{
            position: sticky !important;
            top: 145px;
            max-height: calc(100vh - 80px - (2 * clamp(1rem,.4667rem + 1.3333vw,3rem)));
            overflow: hidden;
        }
            .toc-container{
                overflow-y: scroll;
                max-height: calc(100vh - 80px - (2 * clamp(1rem,.4667rem + 1.3333vw,3rem)));
            }
            .toc-container::-webkit-scrollbar {
                width: 0;
                background: transparent;
            }

                .toc-container nav ul{
                    counter-reset: item;
                }

                    .toc-container nav li ul{
                        margin-left: var(--gap-s);
                    }
                    .toc-link{width: max-content; max-width: 100%;}




@media all and (min-width:960px){
    .side-toc{
        grid-area: 4 / 2 / 5 / 3;
    }

    .toc-toggle-box{
        display: none;
    }

    .toc-container nav li{
        font-size: var(--f-size-s);
        line-height: var(--l-height-xxs);
        font-weight: 500;
    }

        .toc-container nav li ul li{
            font-size: var(--f-size-xs);
            line-height: var(--l-height-xxs);
            font-weight: 400;
        }

        .toc-container nav li ul li ul{
            margin-left: var(--gap-m);
        }
            .toc-container nav li ul li ul li{
                font-size: var(--f-size-xxs);
                line-height: var(--l-height-xxxs);
                font-weight: 400;
            }

            .toc-container nav li ul li ul li ul{
                margin-left: var(--gap-l);
            }
                .toc-container nav li ul li ul li ul li{
                    font-size: var(--f-size-xxs);
                    line-height: var(--l-height-xxxs);
                    font-weight: 400;
                }
}


@media all and (max-width: 959px){

.toc-toggle-box{
    position: fixed;
    top: calc(50% - 23px);
    right: 0;
    z-index: 10002;
}
.toc-toggle-box.open{ z-index: 10012; }

    .toc-toggle{
        cursor: pointer;
        border-radius: var(--b-r-l) 0 0 var(--b-r-l) !important;
    }
        .toc-toggle .icon-toc, .toc-toggle .icon-cross2{
            font-size: 25px;
        }
        .toc-toggle .icon-cross2{
            display: none;
        }

        .toc-toggle-box.open .toc-toggle .icon-toc{display: none;}
        .toc-toggle-box.open .toc-toggle .icon-cross2{display: inline;}

.side-toc{
    position: fixed !important;
    display: block;
    z-index: 10001;
    background: var(--f-light-default) !important;
    top: 0;
    right: -100vw;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    padding: var(--gap-l) var(--gap-s);
}
.side-toc.open{
    z-index: 10011;
    right: 0;
    padding: var(--gap-l) var(--gap-l) 100px var(--gap-l);
}
    .side-toc.open .toc-wrap{
        position: relative!important;
        top: unset;
        height: 100%;
        max-height: 100% !important;
        padding: var(--gap-s);
        display: flex;
        flex-direction: column;
    }
    .side-toc.open .toc-wrap::after {
        content: "\ec5a";
        font-family: icomoon;
        font-size: var(--f-size-xxl);
        display: block;
        height: 48px;
        line-height: 48px;
        align-self: center;
        transform: rotate(90deg);
        position: relative;
        top: 0px;
    }

        .side-toc.open .toc-container{
            max-height: calc(90% - var(--gap-l) - env(safe-area-inset-bottom)) !important;
        }

.toc-container nav li{
    font-size: var(--f-size-m);
    line-height: var(--l-height-s);
    font-weight: 500;
}

    .toc-container nav li ul li{
        font-size: var(--f-size-s);
        line-height: var(--l-height-xs);
        font-weight: 400;
    }

    .toc-container nav li ul li ul{
        margin-left: var(--gap-m);
        gap: var(--gap-s);
    }
        .toc-container nav li ul li ul li{
            font-size: var(--f-size-xs);
            line-height: var(--l-height-xs);
            font-weight: 400;
        }

        .toc-container nav li ul li ul li ul{
            margin-left: var(--gap-l);
            gap: var(--gap-s);
        }
            .toc-container nav li ul li ul li ul li{
                font-size: var(--f-size-xs);
                line-height: var(--l-height-xs);
                font-weight: 400;
            }
    
}

@media all and (min-width:550px) and (max-width:699px){

    .side-toc{
        display: none;
    }

}

.product{
    width: 100%;
    gap: var(--gap-l);
}

    .product dialog{
        container-name: dialog;
        container-type: inline-size;
    }

    .package{
        position: relative;
        max-width: 450px;
        align-self: center;
    }
    .expert .product .package{ align-self: flex-start; }

        .product.grid4 .package,
        .product.grid3 .package,
        .product.grid2 .package{
            height: 100%;
        }

    .package.box{
        background: var(--f-light-default);
        gap: var(--gap-m);
        border: 1px solid rgba(33, 31, 32, .2);
        border-radius: var(--b-r-l);
    }
        .package .title{
            color: var(--governor-bay);
            font-size: var(--f-size-s);
            line-height: 1;
        }

        .package .badge {
            position: absolute;
            top: calc( clamp(1rem,.4667rem + 1.3333vw,3rem) / 2 );
            right: var(--gap-s);
            display: flex;
            justify-content: center;
            gap: 5px;
            width: fit-content;
            padding: 0 var(--gap-s);
            border-radius: var(--gap-l);
            font-size: var(--f-size-xxs);
            font-weight: 600;
            line-height: 2;
        }
        .badge.blue{
            background: var(--governor-bay-2);
            color: var(--governor-bay);
        }
        .badge.red{
            background: var(--candy-apple-2);
            color: var(--candy-apple);
        }
        .badge.green{
            background: var(--oz-2);
            color: var(--oz);
        }


        .package .price{
            justify-content: center;
        }

            .package .price .oldPrice{
                font-size: 28px;
                line-height: 48px;
                font-weight: 600;
                text-decoration: line-through;
            }

            .package .price .currency{
                font-size: var(--f-size-xxxxl);
                font-weight: 800;
                align-self: center;
            }

            .package .price .custom,
            .package .price .amount{
                font-size: 48px;
                font-weight: 800;
            }

            .package .price .prefix,
            .package .price .sep,
            .package .price .suffix{
                font-size: var(--f-size-l);
                align-self: center;
            }

            .package .line{
                height: 1px;
                background: rgba(33, 31, 32, 0.2);
                margin-top: auto;
            }

        .package .features{
            gap: var(--gap-s);
            height: 100%;
        }
            .package .feature{
                position: relative;
                display: flex;
                gap: var(--gap-s);
                flex-direction: row;
                flex-wrap: nowrap;
                padding-left: var(--gap-l);
            }
            .package .feature::before {
                position: absolute;
                left: 0;
                top: 0;
                content: "\ed71";
                font-family: 'icomoon'!important;
                speak: never;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                font-size: var(--f-size-xxxs);
                line-height: var(--gap-m);
                color: var(--f-light-default);
                background: var(--governor-bay);
                border-radius: 100%;
                width: var(--gap-m);
                height: var(--gap-m);
                display: inline-block;
                text-align: center;
                margin-right: 10px
            }

                .package .feature-content{
                    font-size: var(--f-size-s);
                    line-height: 1.2;
                }


                .package .feature-i{
                    color: var(--gray-light);
                    font-size: var(--f-size-xs);
                    margin-left: auto;
                    cursor: pointer;
                }

                .package .feature-info{
                    position: absolute;
                    z-index: 9;
                    width: calc(100% - var(--gap-l));
                    top: calc(100% + var(--gap-xs));
                    left: var(--gap-l);
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height .2s ease-in;
                }

                .package .feature-i:hover + .feature-info{
                    max-height: 200px;
                }
                    .package .feature-info div.fR{
                        padding: var(--gap-xs) var(--gap-s);
                        border: 1px solid rgba(33, 31, 32, 0.2);
                        border-radius: var(--b-r-l);
                        background: var(--f-light-default);
                        font-size: var(--f-size-xxs);
                        line-height: 1.2;
                    }

                .package .btn{ margin-top: auto; }


    .buttons{ display: none; }
    .buttons.active{ display: flex; }

        .buttons .btn{ display: none; }
        .buttons .btn.active{ display: block; }

    .form-steps{}

        .form-step{
            display: none;
            flex-direction: column;
        }
        .form-step.active{ display: flex; }


        .steps-indicator{ 
            display: none;
            flex-direction: row;
            flex-grow: 1; 
            max-width: 300px;
        }
        .steps-indicator.active{ display: flex; }

            .steps-bar{
                flex-grow: 1;
                width: max-content;
                height: 6px;
                border-radius: 6px;
                background: var(--gray-light);
            }

            .steps-completed{
                height: 6px;
                border-radius: 6px;
                background: var(--governor-bay);
            }
            .steps-counter{ flex-wrap: nowrap; }
                .steps-counter .current,
                .steps-counter .sep,
                .steps-counter .max{
                    font-size: var(--f-size-xxs);
                    color: var(--gray);
                }


        .stripe-secured{
            display: none;
            width: auto;
            max-width: 100%;
            height: auto;
        }
        .stripe-secured.active{ display: block; }



    @container dialog (width > 750px){
        .buttons{ 
            flex-direction: row;
        }
        .steps-bar{
            flex-grow: 1;
            width: max-content;
            max-width: 200px;
        }
        .steps-nav{ margin-left: auto; }
    }

    @container dialog (width <= 750px){
        .buttons{ 
            flex-direction: column;
            place-content: center;
            place-items: center;
        }
        .steps-bar{ width: 200px; }
    }

    .loadingBox:not( .active ),
    .responseBox:not( .active ) { display: none; }

    .loadingBox.active,
    .responseBox.active {
        display: flex;
        flex-direction: column;
        border-radius: var(--b-r-l);
    }
    .loadingBox.active {
        border: 1px solid var(--gray-light);
        box-shadow: 0 0 0 1px var(--gray-light);
    }
    .responseBox.active {
        border: 1px solid var(--governor-bay);
        box-shadow: 0 0 0 1px var(--governor-bay);
    }

    .connect-plan-dialog{}

    .package .non-modal{
        position: absolute;
        z-index: 10;
        left: 0;
        top: 0;
        /* width: 100%; */
        height: 100%;

        background: var(--f-light-default);
        border-radius: var(--b-r-l);
        overflow: auto;
    }

    .package .yes-modal{
        position: fixed;
        z-index: 99;
        inset: 0;
        /* width: min(90%,500px); */
        height: fit-content;
        max-height: calc(100vh - 110px);
        margin: auto;
        overflow: auto;

        background: var(--f-light-default);
        border: 1px solid rgba(33, 31, 32, .2);

        border-radius: var(--b-r-l);

        padding: clamp(1rem,0.4667rem + 1.3333vw,3rem);
    }

    @supports selector(::backdrop) {

        .package .yes-modal::backdrop {
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px)
        }

    }


    .package .closeModal{
        position: absolute;
        z-index: 11;
        top: var(--gap-xs);
        right: var(--gap-xs);
    }

        .package .closeModal button{
            width: 25px;
            height: 25px;
            border: 1px solid rgba(33, 31, 32, 0.3);
            border-radius: 100%;
            cursor: pointer;
        }
        .package .closeModal button:hover{
            border: 1px solid rgba(33, 31, 32, 1);
            transition: border-color 0.2s ease-in;
        }
            .package .closeModal button span{
                color: rgba(33, 31, 32, 0.5);
                transition: color 0.2s ease-in;
                line-height: 25px; 
            }
            .package .closeModal button:hover span{ color: rgba(33, 31, 32, 1);}


        .package .label{
            color: rgba(33, 31, 32, 0.8);
            font-size: var(--f-size-xs);
            font-weight: 700;
        }

        .package .input, 
        .package .text, 
        .package .search, 
        .package .textarea{
            font-family: Roboto, sans-serif;
            position: relative;
            height: var(--gap-xl);
            font-size: var(--f-size-m);
            line-height: var(--l-height-l);
            padding-left: var(--gap-s);
            border: 1px solid rgba(0, 0, 0, 0.25);
            border-radius: var(--b-r-l);
        }
        .package .textarea{
            height: 4lh;
        }

        /* .package .input:invalid, 
        .package .text:invalid, 
        .package .search:invalid,
        .package .textarea:invalid{
            border-color: var( --candy-apple );
            box-shadow: 0 0 0 1px var( --candy-apple );
            background: var( --candy-apple-2 );
        } */

        .package .input:focus, 
        .package .text:focus, 
        .package .search:focus,
        .package .textarea:focus{
            border-color: var( --governor-bay );
            box-shadow: 0 0 0 1px var( --governor-bay );
            background: transparent;
        }

        .text-box{ flex-grow: 1; }

            .package .text{
                height: auto;
                display: flex;
                flex-grow: 1;
                resize: none;
            }
            .connect-get-listed .package .text{ min-height: 150px; }


    .package .req{
        font-size: var(--f-size-xl);
        line-height: 1.2;
        font-weight: 700;
        color: var(--candy-apple);
    }
    .package .legend-title{
        font-size: var(--f-size-xs);
        line-height: 1.2;
        font-weight: 700;
        color: rgba(33, 31, 32, .8);
    }

    .package .legend-content{
        font-size: var(--f-size-xxs);
        line-height: 1.2;
        color: rgba(33, 31, 32, .8);
    }

    .package .search{
        margin-bottom: var(--gap-s);
        padding: 0 var(--gap-s);
    }

    .package .radio-list,
    .package .checkbox-list{
        max-height: 210px;
        overflow: auto;
        padding: 0 var(--gap-s);
        scrollbar-width: thin;
        scrollbar-color: var(--gray-light) var(--f-light-default);
    }

        .package .radio-label,
        .package .checkbox-label{
            cursor: pointer;
            border: 2px solid var(--gray-light);
            border-radius: var(--b-r-l);
            padding: var(--gap-xs) var(--gap-s);
        }
        
        /* .package .radio-label.invalid,
        .package .checkbox-label.invalid{ border-color: var(--candy-apple); } */
        
        .package .radio-label:has( input:checked ),
        .package .checkbox-label:has( input:checked ){ border-color: var(--governor-bay); }

            .package .radio-option,
            .package .checkbox-option{
                font-size: var(--f-size-xs);
                line-height: 1.6;
                font-weight: 600;
                color: rgba(33, 31, 32, .8);
            }

            .package .radio-icon,
            .package .checkbox-icon{
                font-size: var(--f-size-xxs);
                line-height: 1.7;
                font-weight: 600;
                margin-left: auto;
            }

            .package .radio-icon.on,
            .package .checkbox-icon.on{
                display: none;
                color: var(--governor-bay);
            }
            .package .radio-icon.off,
            .package .checkbox-icon.off{ 
                display: inline; 
                color: var(--gray-light);
            }

            .package .radio-label:has( input:checked ) .radio-icon.on{ display: inline; }
            .package .radio-label:has( input:checked ) .radio-icon.off{ display: none; }

            .package .checkbox-label:has( input:checked ) .checkbox-icon.on{ display: inline; }
            .package .checkbox-label:has( input:checked ) .checkbox-icon.off{ display: none; }

    
    .response h3{
        text-wrap: balance;
        font-size: var(--f-size-xxl);
        line-height: var(--l-height-m);
    }


    @media all and (min-width: 1000px){

        .product.grid4{
            grid-template-columns: repeat(4, 1fr);
        }

        .product.grid3{
            grid-template-columns: repeat(3, 1fr);
        }

        .product.grid2{
            grid-template-columns: repeat(2, 1fr);
        }

    }

    @media all and ( min-width: 600px ) and (max-width: 999px){

        .product.grid4{
            grid-template-columns: repeat(2, 1fr);
        }

        .product.grid3{
            grid-template-columns: repeat(2, 1fr);
        }

        .product.grid2{
            grid-template-columns: repeat(2, 1fr);
        }

    }

    @media all and (min-width: 750px){

        .product.grid4,
        .product.grid3,
        .product.grid2{
            display: grid;
        }

    }

    @media all and (max-width: 749px){

        .product.grid4,
        .product.grid3,
        .product.grid2{
            display: flex;
            flex-direction: column;
        }

    }

    @media all and (max-width: 700px){

        .buttons{
            flex-direction: column;
            place-content: center;
            place-items: center;
        }

    }


.deals-list{
    gap: var(--gap-s);
}
    .free-trial{
        display: grid;
        gap: var(--gap-m);
        padding: var(--gap-s) var(--gap-m);

        border: 2px solid #211F201A;
        border-radius: var(--b-r-l);
    }
        .free-trial .favicon{
            width: 60px;
            height: auto;
            opacity: 0.45;
        }
        .free-trial:hover .favicon{
            opacity: 1;
        }
        .ft-title{
            font-size: var(--f-size-l);
            line-height: var(--l-height-l);
            opacity: 0.75;
        }
        .free-trial:hover .ft-title{
            opacity: 1;
        }
        .ft-btn{
            /* width: 260px; */
        }


@media all and (min-width: 700px){

    .free-trial{
        grid-template: 1fr / 60px 1fr 260px;

        align-items: center;
    }
        .ft-btn{
            margin-left: auto;
        }
}


@media all and (min-width: 30px) and (max-width: 699px){

    .free-trial{
        grid-template: 1fr auto / 60px 1fr;
        column-gap: var(--gap-m);
        row-gap: var(--gap-s);
    }
        .favicon{
            grid-area: 1 / 1 / 3 / 2;
        }
        .ft-title{
            grid-area: 1 / 2 / 2 / 3;
        }
        .ft-btn{
            grid-area: 2 / 2 / 3 / 3;
        }

}

.calendly-inline-widget,.calendly-inline-widget *,.calendly-badge-widget,.calendly-badge-widget *,.calendly-overlay,.calendly-overlay *{font-size:16px;line-height:1.2em}.calendly-inline-widget iframe,.calendly-badge-widget iframe,.calendly-overlay iframe{display:inline;width:100%;height:100%}.calendly-popup-content{position:relative}.calendly-popup-content.calendly-mobile{-webkit-overflow-scrolling:touch;overflow-y:auto}.calendly-overlay{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:9999;background-color:#a5a5a5;background-color:rgba(31,31,31,.4)}.calendly-overlay .calendly-close-overlay{position:absolute;top:0;left:0;right:0;bottom:0}.calendly-overlay .calendly-popup{box-sizing:border-box;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);width:80%;min-width:900px;max-width:1000px;height:90%;max-height:680px}@media(max-width:975px){.calendly-overlay .calendly-popup{position:fixed;top:50px;left:0;right:0;bottom:0;transform:none;width:100%;height:auto;min-width:0;max-height:none}}.calendly-overlay .calendly-popup .calendly-popup-content{height:100%}.calendly-overlay .calendly-popup-close{position:absolute;top:25px;right:25px;color:#fff;width:19px;height:19px;cursor:pointer;background:url(/assets/external/close-icon.svg) no-repeat;background-size:contain}@media(max-width:975px){.calendly-overlay .calendly-popup-close{top:15px;right:15px}}.calendly-badge-widget{position:fixed;right:20px;bottom:15px;z-index:9998}.calendly-badge-widget .calendly-badge-content{display:table-cell;width:auto;height:45px;padding:0 30px;border-radius:25px;box-shadow:rgba(0,0,0,.25) 0 2px 5px;font-family:sans-serif;text-align:center;vertical-align:middle;font-weight:700;font-size:14px;color:#fff;cursor:pointer}.calendly-badge-widget .calendly-badge-content.calendly-white{color:#666a73}.calendly-badge-widget .calendly-badge-content span{display:block;font-size:12px}.calendly-spinner{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;z-index:-1}.calendly-spinner>div{display:inline-block;width:18px;height:18px;background-color:#e1e1e1;border-radius:50%;vertical-align:middle;animation:calendly-bouncedelay 1.4s infinite ease-in-out;animation-fill-mode:both}.calendly-spinner .calendly-bounce1{animation-delay:-.32s}.calendly-spinner .calendly-bounce2{animation-delay:-.16s}@keyframes calendly-bouncedelay{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}


    .versusList{
        gap: var(--gap-m);
    }

        .versusItem{
            padding: var(--gap-s);
            width: 100%;
            gap: var(--gap-s);
            cursor: pointer;
        }

        .versusItem:has( .versusCheck:checked ){
            border-color: var(--oz);
        }

        .versusItem:has( .versusCheck:disabled ){
            border-color: var(--candy-apple);
        }

            .versusBox{
                position: relative;
                display: grid;
                grid-template-columns: 48px 1fr 20px;
                gap: var(--gap-s);
            }
                .versusLogoBox{
                    position: relative;
                    aspect-ratio: 1;
                    width: 48px;
                    height: 48px;
                    background: var(--f-light-default);
                    border-radius: 100%;
                    box-shadow: var(--shadow-sm);
                    overflow: hidden;
                }
                    .versusLogo{
                        width: 100%;
                        max-width: 100%;
                        height: auto;
                        max-height: 100%;
                        aspect-ratio: 1;
                        border-radius: var(--b-r-l);
                    }

                .versusWho{
                    justify-content: space-between;
                }
                    .versusName{
                        display: flex;
                        gap: var(--gap-s);
                        font-size: var(--f-size-s);
                        line-height: 1.2;
                        font-weight: 600;
                        color: var(--umbra);
                    }

                    .versusScore{}

                        .versusScore .value{
                            font-size: var(--f-size-s);
                            line-height: 1;
                            font-weight: 600;
                            color: var(--umbra);
                        }


                .versusCheckIcon{}
                    .versusCheckIcon .icon{
                        font-size: var(--f-size-s);
                        line-height: 1;
                    }

                    .versusCheckIcon .icon.off{ display: inline; color: var(--umbra-8); }
                    .versusCheckIcon .icon.on{ display: none; color: var(--governor-bay); }

                    .versusCheck:checked + .versusBox .versusCheckIcon .icon.off{ display: none; }
                    .versusCheck:checked + .versusBox .versusCheckIcon .icon.on{ display: inline; }


        .versusPrice{}

            .versusItem .label{
                font-family: 'Roboto', sans-serif;
                font-size: var(--f-size-xs);
                font-weight: 325;
                line-height: 1;
            }
            .versusPrice .value{
                font-size: var(--f-size-xs);
                line-height: 1.2;
                font-weight: 600;
                color: var(--governor-bay);
            }

    .comparisons-box .btn.off{ cursor: not-allowed; }


    @media all and (min-width: 1100px){

        .versusItem{ flex: 0 0 calc( ( 100% - var(--gap-m) * 2 ) / 3 ); }

    }

    @media all and (min-width: 800px) and (max-width: 1099px){

        .versusItem{ flex: 0 0 calc( ( 100% - var(--gap-m) * 2 ) / 2 ); }

    }

@layer loop{

    .other-list{
        gap: var(--gap-m);
        overflow-x: scroll;
        padding-bottom: var(--gap-l);
    }

        .other-box{
            padding: var(--gap-s);
            width: 100%;
        } 

        .scroll-items.software .other-software-box{
            width: 220px;
            scroll-snap-align: start;
            scroll-snap-stop: normal;
        }

            .other-row{
                display: flex;
                flex-direction: row;
            }

            .other-head{
                display: grid;
                grid-template-columns: 80px 1fr;
                gap: var(--gap-s);
            }
                .other-logo-box{
                    position: relative;
                    aspect-ratio: 1;
                    border-radius: var(--b-r-l);
                }
                    .other-logo-box a{
                        width: 100%;
                        height: 100%;
                    }
                    .other-logo{
                        width: 100%;
                        max-width: 100%;
                        height: auto;
                        max-height: 100%;
                        aspect-ratio: 1;
                        border-radius: var(--b-r-l);
                    }

                .other-name{
                    gap: var(--gap-s);
                    justify-content: center;
                }

                    .other-title{
                        display: flex;
                        gap: var(--gap-s);
                        font-size: var(--f-size-xs);
                        line-height: var(--l-height-xxs);
                        font-weight: 700;
                    }
                        .other-title .icon-new-tab2{
                            color: var(--governor-bay);
                        }

                    .other-ratings{
                        position: relative;
                        max-width: min( 100%, 200px);
                    }

                        .other-rs-txt{
                            font-size: var(--f-size-xxxs);
                            line-height: 14px;
                            justify-content: space-between;
                        }
                        .other-rs-txt:after{
                            content: attr(data-rating);
                            font-size: var(--f-size-xxs);
                            width: 25px;
                        }

                        .other-rs-ux{
                            height: 2px;
                        }

                        .other-rs-ux:after{
                            content: '';
                            position: absolute;
                            width: 100%;
                            height: 2px;
                            background-color: #a9a9a9;
                            z-index: -1;
                        }
                        .other-rs-ux.tekpon{
                            background-image: var(--linear-gr-2);
                        }
                        .other-rs-ux.users{
                            width: calc(74% - 30px);
                            background-image: var(--linear-gr-1);
                        }

                            .other-rs-ux .other-rs-dot{
                                width: 8px;
                                height: 8px;
                                border-radius: 100%;
                                align-self: center;
                                margin-left: auto;
                            }
                            .other-rs-ux.tekpon .other-rs-dot{
                                background-color: var(--candy-apple);
                            }
                            .other-rs-ux.users .other-rs-dot{
                                background-color: #4735af;
                            }

                    .ua-compare{
                        gap: var(--gap-xs);
                        cursor: pointer;
                    }
                    body:not( .software ) .section-desc .ua-compare{ display: none; }

                        .ua-compare span{
                            font-size: var(--f-size-xxxs);
                            line-height: var(--l-height-xs);
                            color: var(--governor-bay);
                        }
                        .ua-compare-txt{
                            color: var(--governor-bay);
                            font-size: var(--f-size-xxs);
                            line-height: var(--l-height-xs);
                            font-weight: 300;
                        }
    
                        .ua-compare .off{display: inline;}
                        .ua-compare .on{display: none;}
    
                        .ua-compare.add .off{display: none;}
                        .ua-compare.add .on{display: inline;}
            
            .other-category{
                font-size: var(--f-size-xxs);
                line-height: var(--l-height-xs);
                font-weight: 500;
                min-height: calc(var(--l-height-xs)* 2);
                margin-top: var(--gap-s);
            }
            .other-best_for{
                font-size: var(--f-size-xs);
                line-height: var(--l-height-s);
            }

    @media all and (min-width: 650px){
        
        .other-box{
            flex: 0 0 280px;
        }

            .excerpt{
                display: inline;
            }
    }

    @media all and (min-width: 550px){

        @keyframes score-ux {
            from {max-width: 8px;}
            to {max-width: 200px;}
        }
    
        .other-rs-ux{
            animation: score-ux 1s linear;
        }

    }

}


    .softwareArticles{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: var(--gap-m);
    }
    .sxsList{
        gap: var(--gap-m);
    }

        .sxsItem{
            padding: var(--gap-s);
            width: 100%;
            gap: var(--gap-s);
            cursor: pointer;
            border: 1px solid var(--umbra-1);
            border-radius: var(--b-r-xl);
        }

            .sxsBox{
                position: relative;
                display: grid;
                grid-template-columns: 48px 1fr;
                gap: var(--gap-s);
            }
                .sxsLogoBox{
                    position: relative;
                    aspect-ratio: 1;
                    width: 48px;
                    height: 48px;

                    background: var(--f-light-default);
                    border-radius: var(--b-r-l);
                    border: 1px solid hsl(220 13% 91%);
                    box-shadow: var(--shadow-sm);
                }
                    .sxsLogo{
                        width: 100%;
                        max-width: 100%;
                        height: auto;
                        max-height: 100%;
                        aspect-ratio: 1;
                        border-radius: var(--b-r-l);
                    }

                .sxsWho{
                    justify-content: space-between;
                }
                    .sxsName{
                        display: flex;
                        gap: var(--gap-s);
                        font-size: var(--f-size-xs);
                        line-height: 1.2;
                        font-weight: 600;
                        color: var(--umbra);
                    }

                    .sxsScore{}
                        .sxsScore .label{
                            font-size: var(--f-size-xs);
                            line-height: 1;
                            font-weight: 400;
                        }
                        .sxsScore .value{
                            font-size: var(--f-size-s);
                            line-height: 1;
                            font-weight: 600;
                            color: var(--umbra);
                        }

    @media all and (min-width: 1100px){

        .sxsItem{ flex: 0 0 calc( ( 100% - var(--gap-m) * 2 ) / 3 ); }

    }

    @media all and (min-width: 800px) and (max-width: 1099px){

        .sxsItem{ flex: 0 0 calc( ( 100% - var(--gap-m) * 2 ) / 2 ); }

    }


.authors{}

    .authors-wrap{
        display: grid;
        gap: var(--gap-l);
    }

        .authors .author{
            gap: var(--gap-m);
            border: 1px solid var(--umbra-1);
            border-radius: var(--b-r-xl);
        }
            .a-bio{
                display: grid;
                grid-template-columns: 70px 1fr 70px;
                gap: var(--gap-s);
            }
                .a-avatar{
                    align-self: center;
                    width: fit-content;
                    max-width: 70px;
                    height: auto;
                    aspect-ratio: 1;
                    border-radius: 100%;
                }
 
                .a-bio div.flexC{ justify-content: center; }

                    .a-type{
                        font-size: var(--f-size-s);
                        line-height: var(--l-height-xs);
                        font-weight: 500;
                        color: var(--governor-bay);
                    }

                    .a-name{
                        font-size: var(--f-size-xl);
                        line-height: var(--l-height-s);
                        font-weight: 500;
                        color: var(--umbra);
                    }

            .a-business{}

                .a-business span{
                    font-family: 'Roboto', sans-serif;
                    font-size: var( --f-size-s);
                    line-height: 1.2;
                    font-weight: 500;
                    color: var(--umbra);
                }

            .a-headline{
                font-size: var(--f-size-xs);
                line-height: 1.2;
                font-weight: 500;
                color: var(--umbra-8);
            }
            .a-excerpt{
                font-size: var( --f-size-xxs );
            }

            .a-socials{
                gap: var(--gap-s);
                margin-top: auto;
            }
                .a-socials a{
                    display: flex;
                    width: 20px;
                    height: 20px;

                    border-radius: var(--b-r-m);
                    box-shadow: var(--shadow-sm);

                    opacity: 0.5;
                    transition: opacity 0.35s ease-in;
                }
                .a-socials a:hover{
                    box-shadow: var(--shadow-lg);
                    opacity: 1;
                }

                    .a-socials a span{
                        font-size: var( --f-size-l );
                        line-height: 1;
                        color: var(--umbra);
                        
                        transition: opacity 0.35s ease-in;
                    }
                    .a-socials a:hover span{}

                    .a-socials a img{
                        width: 100%;
                        height: auto;
                        max-height: 100%;

                        transition: opacity .2sease-in;
                    }
                    .a-socials a:hover img{
                    }

@media all and ( min-width: 875px ){

    .a-bio{
        flex-direction: row;
    }

}

@media all and ( min-width: 600px ) and ( max-width: 874px ){

    .a-bio{
        flex-direction: column;
    }

    .a-type,
    .a-name,
    .a-business,
    .a-headline
    { text-align: center; }

    .a-socials{ place-content: center; }

}    


@media all and ( min-width: 600px ){

    .authors-wrap{
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    }

}

@media all and ( max-width: 599px ){

    .authors-wrap{
        grid-template-columns: repeat( 1, 1fr );
    }

}

@media all and ( min-width: 430px ) and ( max-width: 599px ){

    .a-bio{
        flex-direction: row;
    }

}

@media all and ( max-width: 429px ){

    .a-bio{
        flex-direction: column;
    }

    .a-type,
    .a-name,
    .a-business,
    .a-headline
    { text-align: center; }

    .a-socials{ place-content: center; }

}    


@layer loop{

    .deals-box{
        display: grid;
    }
    @media all and (min-width: 530px){
        .deals-box{
            grid-template-columns: repeat( 2, 1fr );
        }
    }
    @media all and (max-width: 529px){
        .deals-box{
            grid-template-columns: 1fr;
        }
    }

        .deal-box{
            position: relative;
            
            box-shadow: 0px 5px 20px rgb(130 130 130 / 25%);
            border-radius: var(--b-r-l);
            /* background: #fff; */

            padding: var(--gap-s);
            display: grid;
        }
        .deal-box.exclusive{
            border: 5px solid transparent;

            background-image:
            linear-gradient(white, white),
            linear-gradient(180deg, var(--f-light-other), var(--governor-bay));

            background-repeat: no-repeat;
            background-size: 100% 100%, 100% 200%;
            background-position: 0 0, 0 100%;
            background-origin: padding-box, border-box;
            animation: spin 2.5s linear infinite alternate;

        }

        .deal-box.expired{
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            background: var(--exp-gr);
        }

        .scroll-items.deals .deal-box{
            width: 465px;
            scroll-snap-align: start;
            scroll-snap-stop: normal;
        }


            .deal-logo-box{
                position: relative;
                -moz-box-shadow: var(--b-s-glass);
                -webkit-box-shadow: var(--b-s-glass);
                box-shadow: var(--b-s-glass);
                border-radius: var(--b-r-l);

                padding: var(--gap-s);

                width: auto;
            }
                .deal-logo{
                    width: min(100%, 150px);
                    aspect-ratio: 1/1;
                    height: auto;
                }

            .deal-name{
                width: 100%;
                gap: var(--gap-xxs);
            }
                .deal-cat{}
                .deal-exclusive{
                    border-radius: 10px;
                    font-size: var(--f-size-xxxs);
                    line-height: var(--l-height-xs);
                    color: #ffffff;
                    background-color: var(--governor-bay);
                    width: min-content;
                    max-width: 100%;
                    padding: 0 var(--gap-s);
                }
                .deal-title{
                    font-size: var(--f-size-m);
                    line-height: var(--l-height-m);
                    font-weight: 500;
                }

            .deal-details{
                width: 100%;
                flex-wrap: wrap;
                gap: var(--gap-s);
            }
                .deal-excerpt{}
                .deal-url{
                    font-size: var(--f-size-s);
                    line-height: var(--l-height-s);
                    font-weight: 500;
                    color: var(--governor-bay);
                }

        @media all and (min-width: 770px){

            .deal-box{
                place-items: center;
                grid-column-gap: var(--gap-m);

                grid-template: auto auto / clamp(100px, 35%, 150px) 1fr;
            }

                .deal-logo-box{
                    grid-area: 1 / 1 / 3 / 2;
                }

                .deal-name{
                    grid-area: 1 / 2 / 2 / 3;
                    height: 100%;
                    justify-content: center;
                }
                    .deal-cat{

                        font-size: var(--f-size-xs);
                        line-height: var(--l-height-s);
                    }
                    .deal-title{
                        grid-area: 1 / 2 / 2 / 3;

                    }
                
                .deal-details{
                    grid-area: 2 / 2 / 3 / 3;
                    justify-content: space-between;
                }
                    .deal-excerpt{

                        font-size: var(--f-size-xs);
                        line-height: var(--l-height-xs);
                    }
                    .deal-url{
                    }

        }

        @media all and (min-width: 530px) and (max-width: 769px){

            .deal-box{
                place-content: center;
                place-items: center;
                grid-column-gap: var(--gap-m);
                grid-row-gap: var(--gap-s);

                grid-template: 170px auto 1fr / 1fr;
            }

                .deal-logo-box{
                    grid-area: 1 / 1 / 2 / 2;
                    align-self: flex-start;
                    width: auto;
                    max-width: 100%;
                    height: 100%;
                    aspect-ratio: 1/1;
                }

                .deal-name{
                    grid-area: 2 / 1 / 3 / 2;
                }
                    .deal-cat{
                        font-size: var(--f-size-xs);
                        line-height: var(--l-height-xxs);
                    }
                    .deal-excerpt{
                        font-size: var(--f-size-xs);
                        line-height: var(--l-height-xxs);
                    }
                .deal-details{
                    justify-content: space-between;
                    grid-area: 3 / 1 / 4 / 2;
                }
                    .deal-url{margin-top: auto;}

        }
        

        @media all and (min-width: 360px) and (max-width: 529px){

            .deal-box{
                grid-template: auto auto / clamp(100px, 35%, 150px) 1fr;
                place-content: center;
                place-items: center;
                grid-column-gap: var(--gap-m);
                grid-row-gap: var(--gap-xxs);
            }

                .deal-logo-box{
                    grid-area: 1 / 1 / 3 / 2;
                    width: auto;
                    max-width: 100%;
                }

                .deal-name{
                    grid-area: 1 / 2 / 2 / 3;
                    height: 100%;
                    justify-content: center;
                }
                    .deal-cat{

                        font-size: var(--f-size-xs);
                        line-height: var(--l-height-s);
                    }
                    .deal-title{
                        grid-area: 1 / 2 / 2 / 3;

                    }
                
                .deal-details{
                    grid-area: 2 / 2 / 3 / 3;
                    justify-content: space-between;
                }
                    .deal-excerpt{

                        font-size: var(--f-size-xs);
                        line-height: var(--l-height-xs);
                    }
                    .deal-url{
                    }

        }

        @media all and (max-width: 359px){

            .deal-box{
                place-content: center;
                place-items: center;
                grid-column-gap: var(--gap-m);
                grid-row-gap: var(--gap-s);

                grid-template: 170px auto 1fr / 1fr;
            }

                .deal-logo-box{
                    grid-area: 1 / 1 / 2 / 2;
                    align-self: flex-start;
                }

                .deal-name{
                    grid-area: 2 / 1 / 3 / 2;
                }
                    .deal-cat{
                        font-size: var(--f-size-xs);
                        line-height: var(--l-height-xxs);
                    }
                    .deal-excerpt{
                        font-size: var(--f-size-xs);
                        line-height: var(--l-height-xxs);
                    }
                .deal-details{
                    justify-content: space-between;
                    grid-area: 3 / 1 / 4 / 2;
                }
                    .deal-url{margin-top: auto;}

        }

        @media all and (max-width: 340px){
            .deal-logo-box{
                padding: var(--gap-s);
            }
        }
    
}

@layer loop{

    .insightsArticles:not( .featured ) {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax( 275px, 1fr ) );
        gap: var(--gap-m);
    }

    section.featured .insights.featured.f1{
        display: flex;
    }

    .insightsArticles.featured.f2,
    .insightsArticles.featured.f3{
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax( 275px, 1fr ) );
        gap: var(--gap-m);
    }

        .insightsArticles.featured.f2 article.insight,
        .insightsArticles.featured.f3 article.insight{ flex-direction: column; }

            article.insight{
                width: 100%;
                display: flex;
                gap: var(--gap-m);
                border: 1px solid var(--umbra-2);
                border-radius: var(--b-r-l);
            }

            .insightsArticles.featured article.insight{
                box-shadow: unset;
                transition: scale 0.2s ease-in, box-shadow 0.2s ease-in;
            }

            .insightsArticles:not( .featured ) article.insight{ flex-direction: column; }

            .insightsArticles.featured article.insight:hover{ 
                scale: 1.05; 
                box-shadow: var(--shadow-sm);
            }

                .insightCTA{
                    display: flex;
                    flex-direction: column;
                    gap: var(--gap-m);
                    height: 100%;
                    cursor: pointer;
                }
                .insightCTA:hover{ text-decoration: none; cursor: pointer; }

                    .thumbBox{
                        width: 100%;
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }
                    .insightsArticles:not( .featured ) .thumbBox{
                        flex: 0 0 auto;
                        aspect-ratio: 1000 / 563;
                        border-radius: var(--b-r-l) var(--b-r-l) 0 0;
                        overflow: hidden;
                    }

                        .insightThumbnail{ 
                            width: 100%;
                            height: auto;
                        }
                        .insightsArticles:not( .featured ) .insightThumbnail{ transition: scale 0.2s ease-in; }
                        .insightsArticles:not( .featured ) .insightCTA:hover .insightThumbnail{ scale: 1.15; }

                    .insight .body{
                        flex-grow: 1;
                        height: 100%;
                        padding: 0 var(--gap-m) var(--gap-m);
                    }

                        article.insight .insightTopic{
                            width: fit-content;
                            font-family: Roboto, sans-serif;
                            font-size: var(--f-size-xxxs);
                            line-height: 1;
                            font-weight: 500;
                            text-transform: uppercase;
                            white-space: nowrap;
                            padding: var(--gap-xs) var(--gap-s);
                            border-width: 1px;
                            border-style: solid;
                            border-radius: var(--b-r-xl);
                        }

                        article.insight .insightTopic.umbra{
                            border-color: var(--umbra);
                            color: var(--umbra);
                            background-color: var(--umbra-1);
                        }

                        article.insight .insightTopic.governor{
                            border-color: var(--governor-bay);
                            color: var(--governor-bay);
                            background-color: var(--governor-bay-1);
                        }

                        article.insight .insightTopic.bondi{
                            border-color: var(--bondi-blue);
                            color: var(--bondi-blue);
                            background-color: var(--bondi-blue-1);
                        }

                        article.insight .insightTopic.calypso{
                            border-color: var(--calypso);
                            color: var(--calypso);
                            background-color: var(--calypso-1);
                        }

                        article.insight .insightTopic.oz{
                            border-color: var(--oz);
                            color: var(--oz);
                            background-color: var(--oz-1);
                        }

                        article.insight .insightTopic.thunderdome{
                            border-color: var(--thunderdome);
                            color: var(--thunderdome);
                            background-color: var(--thunderdome-1);
                        }

                        article.insight .insightTopic.candy{
                            border-color: var(--candy-apple);
                            color: var(--candy-apple);
                            background-color: var(--candy-apple-1);
                        }

                        article.insight .insightTopic.norman{
                            border-color: var(--norman);
                            color: var(--norman);
                            background-color: var(--norman-1);
                        }

                        article.insight .insightTopic.sorbet{
                            border-color: var(--sorbet);
                            color: var(--sorbet);
                            background-color: var(--sorbet-1);
                        }

                        article.insight .insightTopic.marigold{
                            border-color: var(--marigold);
                            color: var(--marigold);
                            background-color: var(--marigold-1);
                        }

                        .insightTitle{
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            font-size: var(--f-size-m);
                            line-height: 1.3;
                            font-weight: 700;
                        }

                        article.insight .body .excerpt{
                            display: -webkit-box;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;  
                            overflow: hidden;
                            font-family: Roboto, sans-serif;
                            font-size: var(--f-size-xs);
                            line-height: var(--l-height-s);
                        }

                        .metas {
                            gap: var(--gap-s);
                            justify-content: space-between;
                            margin-top: auto;
                        }
                        /* .insightsArticles:not( .featured ) .metas{ margin-top: auto; } */

                            .metas .meta{
                                font-family: Roboto, sans-serif;
                            }

                            .meta.author{
                                font-size: var(--f-size-xxs);
                                line-height: 1;
                                font-weight: 300;
                                font-style: normal;
                            }

                            .meta.date{
                                font-size: var(--f-size-xxs);
                                line-height: 1;
                                font-weight: 300;
                            }
                                .meta .icon{
                                    font-size: var(--f-size-xxs);
                                    line-height: 1;
                                }
                                .meta.date .value{ font-family: Roboto, sans-serif; }

    .pagination {
        gap: var(--gap-l);
        grid-column: 1/-1;
    }

    @media all and (min-width: 960px) and (max-width: 1049px){

        article.insight .body .excerpt{ -webkit-line-clamp: 3; }

    }
    
    @media all and (min-width: 960px) and (max-width: 1049px){

        article.insight .body .excerpt{ -webkit-line-clamp: 2; }

    }

    @media all and (min-width: 960px){

        .insightsArticles.featured.f1 article.insight{
            display: grid;
            grid-template-columns: repeat( 2, 1fr );
        }

        .insightsArticles:not( .featured.f1 ) .thumbBox{ border-bottom: 1px solid var(--umbra-1); }
        .insightsArticles.featured.f1 .thumbBox{ border-right: 1px solid var(--umbra-1); }

            .insightsArticles:not( .featured.f1 ) .insightThumbnail{ border-radius: var(--b-r-l) var(--b-r-l) 0 0; }
            .insightsArticles.featured.f1 .insightThumbnail{ border-radius: var(--b-r-l) 0 0 var(--b-r-l); }

            .insightsArticles.featured.f1 .insight .body{
                padding: var(--gap-m) var(--gap-m) var(--gap-m) 0;
            }

    }

    @media all and (max-width: 959px){

        .insightsArticles.featured.f1 article.insight{
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
        }

            .thumbBox{ border-bottom: 1px solid var(--umbra-1); }

                .insightThumbnail{ border-radius: var(--b-r-l) var(--b-r-l) 0 0; }

            article.insight .body .excerpt{ -webkit-line-clamp: 3; }

    }

}

@layer loop{

        .compare-sxs {
            width: clamp(280px, 100%, 360px);
            padding: var(--gap-m);
            gap: var(--gap-m);
        }
        .compare-sxs:hover{
            cursor: pointer;
        }

            .cps-logos{
                justify-content: space-between;
            }
                .cps-logo-box {
                    width: 75px;
                    padding: var(--gap-s);
                    box-shadow: var(--b-s-glass);
                    border-radius: var(--b-r-l);
                }
                    .cps-logo {
                        max-width: 50px;
                        height: auto;
                        aspect-ratio: 1;
                        box-shadow: unset;
                        border-radius: var(--b-r-l);
                    }

            .vs-logo-box{
                width: 75px;
                position: relative;
                display: flex;
                justify-content: center;
            }
                .vs-logo{
                    width: 80%;
                    height: auto;
                    aspect-ratio: 1;
                    box-shadow: unset;
                    border-radius: unset;
                    opacity: 0.65;
                    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
                }
                .compare-sxs:hover .vs-logo{
                    width: 100%;
                    opacity: 1;
                }

            .cps-title{
                font-size: var(--f-size-xs);
                line-height: var(--l-height-s);
            }
            .compare-sxs:hover .cps-title{
                text-decoration: underline;
            }

    @media all and (min-width: 1024px){
        
        .compare-featured {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

    }

    @media all and (max-width: 1024px){
            
        .compare-featured {
            display: flex;
            flex-wrap: wrap;
        }

    }

}

.x{ width: 100%; }
.categoriesList{
    flex-wrap: wrap;
}
    .categoriesList .category{ 
        display: flex;
        list-style: none; 
    }
        .categoriesList .category a{
            background-color: #4735AF1A;
            border-radius: var(--b-r-l);
        }
            .cat-name {
                font-size: var(--f-size-s);
                font-weight: 500;
                line-height: 1.2;
                padding: var(--gap-xs) var(--gap-s);
                color: var(--governor-bay);
            }

.bfList{
    flex-wrap: wrap;
    column-gap: 1%;
    row-gap: var(--gap-s);
}

    .bf-item{
        flex: 0 1 30%;
        background-color: #F3F3F5;
        height: 50px;
        border-radius: var(--b-r-l);
        padding: 0 var(--gap-s) 0 var(--gap-m);
        align-items: center;
        display: flex;
        gap: var(--gap-xs);
    }
        .bf-item .icon{
            color: var(--governor-bay);
            font-size: var(--f-size-m);
            line-height: 1.2;
        }
        .bf-item .text{
            font-size: var(--f-size-s);
            line-height: 1.2;
        }


    .pricing-title{
        font-size: var(--f-size-xs);
        line-height: 1.2;
        font-weight: 500;
    }


.startingPriceBox{
    flex: 1 0 auto;
}

    .startingPrice{
        flex: 0 1 40%;
    }

        .startingPrice .label{
            font-size: var(--f-size-m);
            line-height: 1.2;
            font-weight: 600;
            color: var(--governor-bay);
        }

        .startingPrice .value{
            font-size: var(--f-size-m);
            font-weight: 300;
            line-height: 1.2;
        }

    .pricingFree{

    }

        .pfItem{
            gap: var(--gap-s);
            align-items: center;
        }
            .pfItem .icon{
                font-size: var(--f-size-s);
                line-height: 1.2;
            }
                .pfItem .icon.icon-checkmark-circle{ color: var(--oz); }
                .pfItem .icon.icon-cancel-circle2{ color: var(--candy-apple); }

            .pfItem .label{
                font-size: var(--f-size-s);
                font-weight: 700;
                line-height: 1.2;
            }
            .pfItem a.label{ color: var(--governor-bay); text-decoration: underline; }

            .pfItem .value{
                font-size: var(--f-size-s);
                font-weight: 300;
                line-height: 1.2;
            }


    .packages{
        position: relative;
        row-gap: var(--gap-l);
    }
 
    .packages.scrollX{ 
        width: fit-content;
        max-width: 100%;
        flex-wrap: nowrap;
        column-gap: var(--gap-m);
        transition: all .9s ease-in-out;
    }

    @container sections ( width > 800px ){
        .packages:not( .scrollX ){
            display: grid;
            grid-template-columns: repeat( 3, 1fr );
            gap: var(--gap-l);
        }
    }

    @container sections ( width > 520px ) and ( width <= 800px ){
        .packages:not( .scrollX ){
            display: grid;
            grid-template-columns: repeat( 2, 1fr );
            gap: var(--gap-m);
        }
    }

    @container sections ( width <= 520px ){
        .packages:not( .scrollX ){
            display: flex;
            flex-direction: column;
        }
    }


        .packages .price{
            gap: 18px;
            padding: var(--gap-m);
            border: 2px solid #211F201A;
            border-radius: var(--b-r-l);
        }
        .packages.scrollX .price{ flex: 0 0 max(300px, 40%); scroll-snap-align: start; }

            .p-title{
                font-size: var(--f-size-m);
                font-weight: 500;
                line-height: var(--l-height-xs);
                text-align: center;
            }

            .p-box{
                line-height: inherit;
                max-width: calc(100% - 20px);
                margin: 0 10px;
                border-radius: var(--b-r-l);
                position: relative;
                flex-wrap: wrap;
            }
                .price .currency{
                    color: var(--governor-bay);
                    font-size: var(--f-size-xxxl);
                    line-height: inherit;
                    font-weight: 600;
                    position: relative;
                }
                .price .value{
                    color: var(--governor-bay);
                    font-size: var(--f-size-xxxl);
                    font-weight: 600;
                    line-height: inherit;
                }
                .price .per{
                    color: inherit;
                    line-height: inherit;
                    font-size: var(--f-size-xs);
                    word-spacing: 0px;
                    letter-spacing: 0px;
                }
                .price .p-time{
                    padding: 0 15px;
                    text-align: center;
                    font-size: var(--f-size-xs);
                }

            .p-desc{
                font-family: 'Roboto', sans-serif;
                font-size: var(--f-size-xxs);
                line-height: 1.2;
                text-align: center;
                color: var(--umbra-7);
            }
                .p-desc p {
                    font: inherit;
                    color: inherit;
                }

            .p-features-title{
                font-family: 'Roboto', sans-serif;
                font-size: var(--f-size-xxs);
                line-height: 1.2;
                font-weight: 600;
            }

            .p-features-box{}

                .p-features{
                    gap: var(--gap-s);
                }
                .p-features.all{
                    height: auto;
                    max-height: 1000vh;
                }
                    .p-feature{
                        font-family: 'Roboto', sans-serif;
                        font-size: var(--f-size-xxs);
                        line-height: 1.2;
                        position: relative;
                        padding-left: var(--gap-s);
                    }
                    .p-feature::before{
                        font-family: icomoon;
                        font-size: var(--f-size-s);
                        line-height: 1;
                        display: inline;
                        flex-direction: column;
                        place-content: center;
                        content: "\edc8";
                        color: var(--governor-bay);
                        position: absolute;
                        left: -5px;
                    }
                    .p-feature.off{ display: none; }

                    .expandCheck:checked + .packagesBox .p-feature.off{ display: list-item; }

    @media all and (max-width: 959px){
            .price .p-time {
                margin-top: var(--gap-xs);
            }
    }

.procurement{
    background: linear-gradient(to right, #0091B01A 0, #4735AF1A 100%);
    padding: var(--gap-l) 0;
    border-radius: var(--b-r-l);
}

.procurementPoints{
    list-style: none;
    gap: var(--gap-m);
}

    .procurementPoint{}
        .procurementPoint span{
            color: var(--governor-bay);
            font-size: var(--f-size-s);
            line-height: 1.2;
            font-weight: 500;
        }

    .featuresList{
        justify-content: space-between;
        row-gap: var(--gap-s);
    }

        .feature{
            display: flex;
            align-items: center;
            height: 50px;
            background-color: #ABABAE1A;
            padding: 0 var(--gap-s) 0 var(--gap-m);
            border-radius: var(--b-r-l);
            gap: var(--gap-s);
        }
        .feature.off{ display: none; }

        .expandCheck:checked + .featuresList .feature.off{ display: flex; }

            .feature .icon{
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
                background: #4735AF1A;
                color: var(--governor-bay);
                font-size: var(--f-size-xxs);
                line-height: 1.2;
                aspect-ratio: 1 / 1;
                width: 26px;
                height: 26px;
            }

    @media all and (min-width: 700px){

        .feature{
            flex: 0 1 47%;
        }

    }

    @media all and (max-width:699px){

        .feature{
            flex: 1 1 100%;
        }

    }




    .userSentimentBox{}

        .userSentimentRating{
            color: var(--governor-bay);
            font-size: var(--f-size-xxxl);
            line-height: 1;
            font-weight: 700;
        }

        .aiLegend{
            background: linear-gradient( to bottom right, var(--bondi-blue-1), var(--governor-bay-1) );
            border-radius: var(--b-r-xl);
        }
            .aiLegend,
            .aiLegend > *{
                color: var(--governor-bay);
            }

.synopsisWrap{
    gap: var(--gap-m);
}

    .synopsisBox{
        padding: var(--gap-m);
        height: auto;
        border-radius: var(--b-r-xl);
    }
    .synopsisBox.pros{ background: var(--oz-1); }
    .synopsisBox.cons{ background: var(--candy-apple-1); }

        .synopsisBoxTitle{
            gap: var(--gap-xs);
        }

            .synopsisBoxTitle .text{
                font-size: var(--f-size-s);
                line-height: 1.4;
                font-weight: 500;
            }

            .synopsisBoxTitle .icon {
                font-size: var(--f-size-xl);
                line-height: 1;
            }

            .pros .synopsisBoxTitle .icon{ color: var(--oz); }
            
            .cons .synopsisBoxTitle .icon{ color: var(--candy-apple); }

        .synopsisList{
            gap: var(--gap-m);
            height: auto;
            border-radius: var(--b-r-xl);
        }

            .synopsisItem{
                display: flex;
                flex-direction: column;
                gap: var(--gap-s);
            }

            .synopsisItem.off{ display: none; }

            .expandCheck:checked + .synopsisWrap .synopsisItem.off{ display: flex; }

                .synopsisTitle{
                    font-size: var(--f-size-s);
                    line-height: 1.4;
                    font-weight: 500;
                    display: flex;
                }
                .synopsisTitle::before {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 100%;

                    line-height: 1.4;
                    aspect-ratio: 1 / 1;
                    width: 26px;
                    height: 26px;

                    font-family: icomoon;
                    font-size: var(--f-size-xxs);
                }

                .pros .synopsisTitle::before{ content: "\ed71"; }
                .cons .synopsisTitle::before{ content: "\ed6d"; }

                .synopsisList.pros .synopsisTitle::before{ color: var(--oz); }
                .synopsisList.cons .synopsisTitle::before{ color: var(--candy-apple); }

                .synopsisContent{
                    font-size: var(--f-size-xs);
                    line-height: 1.5;
                }

@media all and (min-width: 1024px){

    .synopsisList{
        flex-grow: 1;
    }

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

@media all and (max-width: 1023px){

    .synopsisWrap{
        display: flex;
        flex-direction: column;
    }
    
}

    .details{ flex: 1 0 auto; max-width: 100%; }

        .details .label{
            font-size: var(--f-size-l);
            line-height: 1.2;
            font-weight: 600;
            color: var(--umbra);
        }

        .details .value{
            font-family: 'Roboto', sans-serif;
            font-size: var(--f-size-m);
            line-height: 1.2;
            font-weight: 325;
            color: var(--umbra);
        }

        .details a.value{ color: var(--governor-bay); }
        .details a.value span{ 
            color: var(--governor-bay);
            font-size: var(--f-size-s);
            line-height: 1.3;
        }

    .actions{ flex: 1 0 auto; max-width: 100%; }

        .actions .title{
            font-size: var(--f-size-l);
            line-height: 1.2;
            font-weight: 600;
        }

        .claim .claimStatus{
            display: flex;
            gap: var(--gap-xs);
        }
            .claimStatus .icon{
                font-size: var(--f-size-xl);
            }
            .claimStatus.accept .icon{ color: var(--oz); }
            .claimStatus.pending .icon{ color: var(--umbra-8); }



.calculator{
    justify-content: center;
    gap: var(--gap-m);
}
    .calculatorInputBox{
        width: max(320px, calc( 50% - var(--gap-m) ));
    }

        .calculatorLabel{
            font-size: var(--f-size-xs);
            font-weight: 500;
            line-height: 1;
        }

        .calculator .inputSize{
            height: 38px;
            padding: var(--gap-xs) var(--gap-s);
            border: 1px solid var(--umbra-8);
            border-radius: var(--b-r-l);
            cursor: pointer;
            font-size: var(--f-size-s);
            font-weight: 600;
            text-align: center;
        }


    .plansDropdown {
        position: relative;
        display: inline-block;
    }

        .plansToggle{
            display: flex;
            flex-wrap: nowrap;
            gap: var(--gap-xs);
            width: 100%;
            padding: var(--gap-xs) var(--gap-s);
            border: 1px solid var(--umbra-8);
            border-radius: var(--b-r-l);
            cursor: pointer;
        }
        .plansToggle.on{
            border-radius: var(--b-r-l) var(--b-r-l) 0 0;
        }

            .plansToggle .planName + .sep,
            .plansToggle .planPrice{
                font-size: var(--f-size-xxxs);
                line-height: var(--gap-m);
                font-weight: 400;
            }

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

            .plansToggle .icon{
                font-size: var(--f-size-xxs);
                line-height: 1;
                font-weight: 600;
                align-self: center;
                margin-left: auto;
                transition: rotate 0.3s ease-in;
            }

            .plansToggle.on .icon{
                rotate: 180deg;
            }


        .plansList {
            display: block;
            position: absolute;
            width: 100%;
            left: 0;
            top: 100%;
            height: fit-content;
            max-height: 0;
            overflow: hidden;
            background: var(--f-light-default);
            border-radius: 0 0 var(--b-r-l) var(--b-r-l);
            box-shadow: var(--shadow-lg);;
            z-index: 10;
            margin: 0;
            padding: 0;
            list-style: none;
            transition: max-height 0.3s ease-in;
        }

        .plansList.on{ 
            max-height: 1000px; 
        }

            .planLabel {
                display: flex;
                flex-wrap: wrap;
                gap: var(--gap-xs);
                width: 100%;
                padding: var(--gap-s);
                cursor: pointer;
                transition: background-color 0.3s ease-in;
            }
            .planLabel:hover{
                background-color: var(--umbra-1);
            }
                .planName{
                    font-size: var(--f-size-xs);
                    font-weight: 600;
                }

                .plansToggle .planName{ line-height: var(--gap-m); }
                .plansList .planName{ 
                    width: 100%; 
                    line-height: var(--gap-m);
                }

                .plansList .planPrice{
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--gap-xxs);
                    align-items: center;
                }
                    .plansList .planName + .sep,
                    .plansList .planPrice > span{
                        font-size: var(--f-size-xxxs);
                        line-height: 1;
                        font-weight: 400;
                        white-space: nowrap;
                    }


    .assesments{
        display: none;
        justify-content: center;
        gap: var(--gap-m);
    }
    .assesments.on{
        display: flex;
    }

        .asses{
            border-radius: var(--b-r-l);
            box-shadow: var(--shadow-sm);
            padding: var(--gap-s) var(--gap-m);
        }

        .median{
            width: max(320px, calc( 50% - var(--gap-m) ));
            background-color: var(--candy-apple-1);
            border: 1px solid var(--candy-apple-5);
            color: var(--candy-apple);
        }

        .yours{
            width: max(320px, calc( 50% - var(--gap-m) ));
            background-color: var(--oz-1);
            border: 1px solid var(--oz-5);
            color: var(--oz);
        }

        .savings{
            background-color: var(--oz-1);
            border: 1px solid var(--oz-5);
            color: var(--oz);
        }

            .asses .label,
            .asses .value,
            .asses .value *{ color: inherit; }

            .asses .value .b{ font-weight: 700; }

            .assesments .label{
                font-size: var(--f-size-xs);
                line-height: 1;
                font-weight: 500;
            }
            .assesments .value{
                font-size: var(--f-size-l);
                line-height: 1;
                font-weight: 700;
            }

            .savings .value{
                font-weight: 500;
                font-size: var(--f-size-m);
            }

        .focus{
            border-radius: var(--b-r-l);
            box-shadow: var(--shadow-sm);
            padding: var(--gap-s) var(--gap-m);
        }

        .focus.blue{
            background-color: var(--governor-bay-2);
            border: 1px solid var(--governor-bay-5);
        }

.reddit{}

    .splitBox{
        padding: var(--gap-m) var(--gap-s);
    }
        .splitTitle{}

        .splitLabels{
            justify-content: space-between;
        }
            .splitLabel{
                font-size: var(--f-size-s);
                font-weight: 600;
                line-height: 1.2;
            }
            .splitLabel.positive{ color: var(--oz) }
            .splitLabel.neutral{ color: var(--marigold) }
            .splitLabel.negative{ color: var(--candy-apple) }

        .splitRange{
            position: relative;
            --splitPositive: 0;
            --splitNeutral: 0;
            --splitNegative: 0;
        }
            .splitValue{
                position: absolute;
                height: 8px;
                /* border-radius: 0 4px 4px 0; */
                border-radius: 4px;
            }

            .splitValue.positive{
                z-index: 30;
                width: calc( var( --splitPositive ) * 1% );
                background-color: var(--oz);
            }
            .splitValue.neutral{
                z-index: 20;
                width: calc( ( var( --splitPositive ) + var( --splitNeutral ) ) * 1% );
                background-color: var(--marigold);
            }
            .splitValue.negative{
                z-index: 10;
                width: calc( ( var( --splitPositive ) + var( --splitNeutral ) + var( --splitNegative ) ) * 1% );
                background-color: var(--candy-apple);
            }

    .redditReviews{}

    @container sections (width > 800px){
        .redditReviews{
            display: grid;
            grid-template: 1fr auto / repeat( 2, 1fr ); 
            gap: var(--gap-m);
        }
        .redditReviews .pros{ grid-area: 1 / 1 / 2 / 2; }
        .redditReviews .cons{ grid-area: 1 / 2 / 2 / 3; }
        .redditReviews .expandLabel{ grid-area: 2 / 1 / 3 / 3; }
    }

    @container sections (width <= 800px){
        .redditReviews{
            display: flex;
            flex-direction: column;
            gap: var(--gap-m);
        }
    }

    .borderBox.pros,
    .borderBox.cons{
        display: flex;
        flex-direction: column;
        gap: var(--gap-m);
        width: 100%;
        padding: var(--gap-m);
        align-self: stretch;

    }

        .redditTitle,
        .redditTitle span{
            font-size: var(--f-size-xl);
            font-weight: 600;
            line-height: 1.2;
        }

        .pros .redditTitle,
        .pros .redditTitle span{ color: var(--oz) }

        .cons .redditTitle,
        .cons .redditTitle span{ color: var(--candy-apple) }



        .redditList{
            display: flex;
            flex-direction: column;
            gap: var(--gap-m);
        }

            .redditItem{
                display: flex;
                flex-direction: column;
                gap: var(--gap-s);
            }
            .redditItem.off{ display: none; }

            .expandCheck:checked + .borderBox.pros .redditItem.off{ display: flex; }
            .expandCheck:checked ~ .borderBox.cons .redditItem.off{ display: flex; }

                .redditLabelBox{}
                    .pros .redditLabelBox span{ color: var(--oz) }
                    .cons .redditLabelBox span{ color: var(--candy-apple) }
                    .redditLabelIcon{
                        font-size: var(--f-size-xs);
                        font-weight: 400;
                        line-height: 1.2;
                    }
                    .redditLabel{
                        font-size: var(--f-size-s);
                        font-weight: 500;
                        line-height: 1.2;
                        margin: 0 var(--gap-xs);
                    }
                    .redditLabelCount{
                        font-size: var(--f-size-s);
                        font-weight: 500;
                        line-height: 1.2;
                    }
                    

                .redditQuote{
                    position: relative;
                    font-size: var(--f-size-s);
                    line-height: 1.2;
                    font-style: italic;
                    quotes: "\201C""\201D""\2018""\2019";
                }
                .redditQuote::before,
                .redditQuote::after{
                    font-size: var(--f-size-m);
                    font-weight: 500;
                }

                .redditQuote::before { content: open-quote; }
                .redditQuote::after { content: close-quote; }

                .subReddit{
                    border: 1px solid var(--umbra-1);
                    border-radius: var(--b-r-xl);
                    padding: 0 var(--gap-s);
                }
                .subReddit::before{
                    position: relative;
                    top: 2px;
                    content: "\2022";
                    font-size: var(--f-size-xxl);
                    font-weight: 900;
                    line-height: 0;
                    margin-right: var(--gap-xs);
                }
                    .subReddit cite{
                        font-size: var(--f-size-xs);
                    }
                    .subReddit cite::before{
                        content: "r/";
                        font-family: Roboto, sans-serif;
                        font-size: var(--f-size-xs);
                        font-weight: 325;
                        line-height: 1.5;
                    }



.s-insights{
    gap: var(--gap-l);
}
    .ins-box{}

        .insight-box{
            flex: 0 0 300px;
        }

        .ins-box .hsBtn span {
            align-self: center;
            margin-top: -40px;
        }

.contact-company{}

    .cf-wrap{
        width: min( 90%, 600px );
        z-index: 10009;
    }
        .cf-pad{overflow: auto;}

        .cf-response{
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            backdrop-filter: unset;
            -webkit-backdrop-filter: unset;
            background: #ffffffc9;
            overflow: hidden;

            opacity: 0;
            transition: opacity 0.3s ease-in-all, backdrop-filter 0.3s ease-in-all;
        }
        .cf-response.on{
            opacity: 1;
            z-index: 10014;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: opacity 0.3s ease-in-all, backdrop-filter 0.3s ease-in-all;
        }
            .loader, .loader:before, .loader:after {
                border-radius: 50%;
                width: 1em;
                height: 1em;
                animation-fill-mode: both;
                animation: bblFadInOut 1.8s infinite ease-in-out;
            }
            .loader {
                color: var(--f-dark-small);
                font-size: 7px;
                position: relative;
                text-indent: -9999em;
                transform: translateZ(0);
                animation-delay: -0.16s;
                top: -40px;
            }
            .loader:before,
            .loader:after {
                content: '';
                position: absolute;
                top: 0;
            }
            .loader:before {
                left: -2em;
                animation-delay: -0.32s;
            }
            .loader:after {
                left: 2em;
            }

            @keyframes bblFadInOut {
                0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
                40% { box-shadow: 0 2.5em 0 0 }
            }

        .auto-hide{
            position: absolute;
            bottom: var(--gap-s);
            gap: 5px;
        }
            .countdown{font-weight: 700;}
        
        .cf-txt{}

        .cf-box{
            z-index: 10009;
        }


            .cf-label{}
            .cf-label-s{
                position: relative;
            }

                .cf-label-s .cf-label-txt{
                    margin-bottom: var(--gap-xs);
                }
                    .req{
                        color: var(--norman);
                    }

                
                .cf-input,
                .select-btn,
                .cf-textarea{
                    font-size: var(--f-size-xxs);
                    line-height: var(--l-height-l);
                    padding: 0 var(--gap-s);
                    border: 2px solid var(--governor-bay);
                    border-radius: var(--b-r-m);
                    background: #fff;

                    outline: unset;
                }
                .cf-input:focus,
                .cf-textarea:focus{
                    border: 2px solid var(--norman);
                }
                .open .select-btn,
                .open .select-btn:focus{
                    border: 2px solid var(--norman);
                    border-bottom: unset !important;
                    border-radius: var(--b-r-m) var(--b-r-m) 0 0;
                }

                .select-btn{
                    cursor: pointer;
                }

                .select-list{
                    position: absolute;
                    top: 100%;
                    height: 0;
                    overflow: hidden;
                    border: 2px solid transparent;
                    border-top: unset!important;
                    border-radius: 0 0 var(--b-r-m) var(--b-r-m);
                    background: #fff;
                }
                .open .select-list{
                    height: calc( clamp(1rem,.4667rem + 1.3333vw,3rem) + var(--l-height-m) + var(--gap-s) + 200px + clamp(1rem,.4667rem + 1.3333vw,3rem) );
                    border: 2px solid var(--norman);
                    top: calc(100% - 2px);
                    z-index: 9;
                }
                    .select-search{
                        position: relative;
                    }
                        .select-search::after {
                            content: "\ed6d";
                            position: absolute;
                            font-family: 'icomoon'!important;
                            speak: never;
                            font-style: normal;
                            font-weight: normal;
                            font-variant: normal;
                            text-transform: none;
                            line-height: 1;
                            -webkit-font-smoothing: antialiased;
                            -moz-osx-font-smoothing: grayscale;
                            display: block;
                            top: 0;
                            right: -20px;
                            color: #000;
                            font-size: var(--f-size-l);
                            line-height: var(--l-height-l);
                            z-index: 9;
                        }

                    .select-options{
                        max-height: 200px;
                        overflow: auto;
                    }

                        .select-option{
                            cursor: pointer;
                            padding: 0 var(--gap-s);
                            line-height: var(--l-height-m);
                            font-size: var(--f-size-xxs);
                            border-radius: var(--b-r-m);
                        }
                        .select-option:hover{
                            box-shadow: inset 5px 5px 10px rgba(0,0,0,.06);
                        }

            .cf-check{
                width: 18px !important;
                height: 25px !important;
                position: relative !important;
                opacity: 1 !important;
                display: block;
                appearance: auto;
            }
                .cf-check-desc{
                    font-size: var(--f-size-xxs);
                    line-height: var(--l-height-s);
                }

        .hidden {
            width: 1px;
            height: 1px;
            pointer-events: none;
            opacity: 0;
        }

    .tekpon-policy{
        font-size: var(--f-size-xxxs);
        line-height: var(--l-height-xxs);
    }

@media all and (min-width: 960px){
    .cf-wrap{
        max-height: 90%;
    }
}

@media all and (min-width: 600px) and (max-width: 959px){
    .cf-wrap{
        max-height: calc(95% - 110px);
    }
}

@media all and (min-width: 600px){
    .cf-box{
        display: grid;
        grid-template-columns: repeat( 2, 1fr );
        gap: var(--gap-m) var(--gap-s);
    }
        .gc-all{
            grid-column: 1/-1;
        }
}

@media all and (max-width: 599px){

    .cf-wrap{
        max-height: calc(90% - 110px);
    }
        .cf-box{
            display: flex;
            flex-direction: column;
            gap: var(--gap-m);
        }

}