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;
        }

}.procurementBox{
    background: linear-gradient( to left, var(--governor-bay-1), var(--bondi-blue-1) );
    padding: var(--gap-l) 0;
    border-radius: var(--b-r-xl);
}

    .procurementBox svg{
        width: 16px;
        height: 16px;
        fill: var(--governor-bay);
    } 

.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{}

}

    #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);
            }

    }


@layer loop{

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

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

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

        .magazineArticles.featured.f2 article.magazine,
        .magazineArticles.featured.f3 article.magazine{ flex-direction: column; }

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

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

            .magazineArticles:not( .featured ) article.magazine{ flex-direction: column; }

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

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

                    .thumbBox{
                        width: 100%;
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }
                    .magazineArticles: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;
                    }

                        .magazineThumbnail{ 
                            width: 100%;
                            height: auto;
                        }
                        .magazineArticles:not( .featured ) .magazineThumbnail{ transition: scale 0.2s ease-in; }
                        .magazineArticles:not( .featured ) .magazineCTA:hover .magazineThumbnail{ scale: 1.15; }

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

                        article.magazine .magazineCategory{
                            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.magazine .magazineCategory.umbra{
                            border-color: var(--umbra);
                            color: var(--umbra);
                            background-color: var(--umbra-1);
                        }

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

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

                        article.magazine .magazineCategory.calypso{
                            border-color: var(--calypso);
                            color: var(--calypso);
                            background-color: var(--calypso-1);
                        }

                        article.magazine .magazineCategory.oz{
                            border-color: var(--oz);
                            color: var(--oz);
                            background-color: var(--oz-1);
                        }

                        article.magazine .magazineCategory.thunderdome{
                            border-color: var(--thunderdome);
                            color: var(--thunderdome);
                            background-color: var(--thunderdome-1);
                        }

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

                        article.magazine .magazineCategory.norman{
                            border-color: var(--norman);
                            color: var(--norman);
                            background-color: var(--norman-1);
                        }

                        article.magazine .magazineCategory.sorbet{
                            border-color: var(--sorbet);
                            color: var(--sorbet);
                            background-color: var(--sorbet-1);
                        }

                        article.magazine .magazineCategory.marigold{
                            border-color: var(--marigold);
                            color: var(--marigold);
                            background-color: var(--marigold-1);
                        }

                        .magazineTitle{
                            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.magazine .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;
                        }
                        /* .magazineArticles: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.magazine .body .excerpt{ -webkit-line-clamp: 3; }

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

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

    }

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

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

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

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

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

    }

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

        .magazineArticles.featured.f1 article.magazine{
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
        }

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

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

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

    }

}

.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; }

}    


.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;
        }

    }