.insights-box {
    display: grid;
}
        .insight-box{
            display: grid;
            box-shadow: 0 8px 15px 0 #b6b6b95e;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: var(--b-r-l);
            gap: var(--gap-m);
        }

            .ins-logo-box{
                position: relative;
                display: flex;
                flex-direction: column;
            }
                .ins-l-a-wrap {
                    position: relative;
                    height: min-content;
                }
                    .ins-logo{
                        width: 100%;
                        height: auto;
                        border-radius: var(--b-r-l) var(--b-r-l) 0 0;
                        box-shadow: 0 8px 15px 0 #b6b6b95e;
                    }

            .ins-body{
                flex-grow: 1;
                padding: 0 var(--gap-s) var(--gap-s);
            }

                .ins-tags{
                    width: max-content;
                    font-size: var(--f-size-xxxs);
                    line-height: var(--l-height-xxs);
                    border-width: 2px;
                    border-style: solid;
                    padding: var(--gap-xxs) var(--gap-xs);
                    border-radius: 7px;
                }

                .title-url{}
                .title-url:hover{text-decoration: underline;}

                .ins-title{
                    font-size: var(--f-size-m);
                    line-height: var(--l-height-m);
                    font-weight: 500;
                }

                .ins-excerpt{
                    font-size: var(--f-size-xxs);
                    line-height: var(--l-height-s);
                }
                    .read-more{
                        color: var(--governor-bay);
                        font-weight: 500;
                    }

                .ins-body .metas {
                    gap: var(--gap-xxs);
                    margin-top: auto;
                }


    .metas{
        flex-wrap: wrap;
    }
        .meta{}
            .meta-image{
                height: var(--l-height-xl);
            }
                .meta-image img{
                    width: auto;
                    height: 100%;
                    aspect-ratio: 1;
                    border-radius: 7px;
                }

            .meta-data{
                flex-wrap: wrap;
                align-content: center;
            }
                .meta-author{
                    flex-wrap: nowrap;
                    margin-right: auto;
                }
                .meta-date{
                    flex-wrap: nowrap;
                }
                    .meta-data span{
                        font-size: var(--f-size-xxs);
                        line-height: 15px;
                        white-space: nowrap;
                    }
                    .meta-data .label{
                        font-weight: 300;
                    }
                    .meta-data .value{
                        font-weight: 500;
                    }


                

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

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

            .insight-box {
                grid-template-rows: auto 1fr;
            }

            .hero.insight-box{
                grid-area: 1 / 1 / 2 / 4;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto;
            }
                .hero .ins-logo{
                    border-radius: var(--b-r-l) 0 0 var(--b-r-l);
                }

                .hero .ins-body{
                    padding: var(--gap-s) var(--gap-s) var(--gap-s) 0;
                }

                .title-url {
                    text-decoration: none;
                    transition: all .3s ease-in-out;
                }

    }

    @media all and (min-width: 650px) and (max-width: 899px){

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

            .insight-box {
                grid-template-rows: auto 1fr;
            }

            .hero.insight-box{
                grid-area: 1 / 1 / 2 / 3;
            }
                .hero .ins-l-a-wrap{
                    height: auto;
                    aspect-ratio: 2.4/1;
                    overflow: hidden;
                    border-radius: var(--b-r-l) var(--b-r-l) 0 0;
                }

                .title-url {
                    text-decoration: none;
                    transition: all .3s ease-in-out;
                }

    }

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

        .insights-box{
            grid-template-columns: 1fr;
        }

            .insight-box {
                grid-template-rows: auto 1fr;
            }

            .hero.insight-box{
                grid-area: 1 / 1 / 2 / 2;
            }
                .ins-l-a-wrap{
                    height: auto;
                    aspect-ratio: 2.4/1;
                    overflow: hidden;
                    border-radius: var(--b-r-l) var(--b-r-l) 0 0;
                }

    }

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


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

    }
.cat-list.v2{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, min-content));
    align-content: space-between;
    justify-content: space-between;
}

@media all and (min-width: 960px){
    .cat-list.v2{
        align-content: space-between;
        justify-content: space-between;
    }    
}

@media all and (max-width: 959px){
    .cat-list.v2{
        /* justify-content: center; */
        gap: var(--gap-l);
    }
}

    .cat-list:not(.v2) .cat-item{
        width: 115px;
    }

    .cat-item{
        align-self: self-start;
    }
        .cat-list:not(.v2) .cat-software{
            padding: var(--gap-s);
            margin: 0;
            background: rgba( 255, 255, 255, 0.25 );
            box-shadow: 0px 2px 10px rgb(31 38 135 / 20%);
            backdrop-filter: blur( 4px );
            -webkit-backdrop-filter: blur( 4px );
            border-radius: var(--b-r-l);
            display: grid;
            grid-template: repeat(3, 20px) / repeat(3, 20px);
            gap: 5px;
            border: 1px solid rgba( 255, 255, 255, 0.18 );
        }
            .cat-list:not(.v2) .cat-software-logo{
                align-self: flex-start;
                max-width: 20px;
                max-height: 20px;
                border-radius: var(--b-r-m);
            }
            .cat-software-plus{
                width: 20px;
                height: 20px;
                font-size: var(--f-size-l);
            }
        .cat-info{
            margin: 0 0 0 var(--gap-s);
            justify-content: center;
            /* width: 150px; */
        }
            .cat-name{
                font-size: var(--f-size-s);
                font-weight: 500;
                line-height: var(--l-height-xs);
                margin: 0 0 8px 0;
                padding: 0 var(--gap-s) 0 0;
            }
            .cat-count{
                font-size: var(--f-size-xxs);
                line-height: var(--l-height-xxs);
                white-space: nowrap;
            }

        .cat-list.v2 .cat-url{ 
            gap: var(--gap-s);
            align-self: self-start;
            display: grid;
            grid-template: 1fr / 2fr;
        }
        .cat-url:hover{text-decoration: underline;}
            .cat-list.v2 .cat-software{
                display: grid;
                grid-template-columns: repeat(4, min-content);
                grid-template-rows: repeat(4, 1fr);
                grid-column-gap: 5px;
                grid-row-gap: 5px;
                align-items: center;
                justify-items: center;

                align-self: self-start;

                padding: var(--gap-s);
                background: rgba( 255, 255, 255, 0.25 );
                box-shadow: 0px 2px 10px rgb(31 38 135 / 20%);
                backdrop-filter: blur( 4px );
                -webkit-backdrop-filter: blur( 4px );
                border-radius: var(--b-r-l);
                /* border: 1px solid rgba( 255, 255, 255, 0.18 ); */
            }
                .cat-list.v2 .cat-software-logo{ place-self: center; }
                .cat-list.v2 .cat-software-logo:nth-child(1){ grid-area: 1 / 1 / 3 / 3; }
                .cat-list.v2 .cat-software-logo:nth-child(2){ grid-area: 1 / 3 / 3 / 5; }
                .cat-list.v2 .cat-software-logo:nth-child(3){ grid-area: 3 / 1 / 5 / 3; }
                .cat-list.v2 .cat-software-logo:nth-child(4){ grid-area: 3 / 3 / 4 / 4; }
                .cat-list.v2 .cat-software-logo:nth-child(5){ grid-area: 3 / 4 / 4 / 5; }
                .cat-list.v2 .cat-software-logo:nth-child(6){ grid-area: 4 / 3 / 5 / 4; }
                .cat-list.v2 .cat-software-logo:nth-child(7){ grid-area: 4 / 4 / 5 / 5; }

                .cat-list.v2 .cat-software-logo:nth-child(1),
                .cat-list.v2 .cat-software-logo:nth-child(2),
                .cat-list.v2 .cat-software-logo:nth-child(3){
                    width: 45px;
                    height: 45px;
                    border-radius: var(--b-r-m);
                }

                .cat-list.v2 .cat-software-logo:nth-child(4),
                .cat-list.v2 .cat-software-logo:nth-child(5),
                .cat-list.v2 .cat-software-logo:nth-child(6),
                .cat-list.v2 .cat-software-logo:nth-child(7){
                    width: 20px;
                    height: 20px;
                    border-radius: var(--b-r-s);
                }


            /* grid-auto-flow: column dense; */
.highlight{
    padding: 0 5px;
    border-radius: var(--b-r-m);
    width: fit-content;
    line-height: var(--l-height-xs);
    margin: 0 3px;
}
.highlight > *{color: var(--f-light-default);}
    .hl-pink{
        background: linear-gradient(to right, var(--governor-bay), var(--candy-apple));
        color: var(--f-light-default);
    }
    .hl-blue{
        background: linear-gradient(to right, var(--oz), var(--bondi-blue));
        color: var(--f-light-default);
    }
    .hl-blue *, .hl-pink *{color: var(--f-light-default);}

    .div-solid{
        height: 2px;
        background: linear-gradient(to right, var(--bondi-blue), var(--oz));
    }
    .div-dotted{
        height: 2px;
        /* background-image: linear-gradient(to right, var(--candy-apple), #f2547d); */
        background-image: linear-gradient(90deg, transparent, transparent 50%, var(--f-light-default) 50%, var(--f-light-default) 100%), linear-gradient(90deg, var(--candy-apple), #f2547d);
        background-size: 5px 2px, 100% 2px;
    }
    .div-fadeout{
        height: 2px;
        background: linear-gradient( to right, transparent, #ff8f59, #ff7a59, transparent );
    }

    .quote{
        padding: var(--gap-l);
        text-indent: 30px;
        border: 2px dashed var(--oz);
        position: relative;
        border-radius: var(--b-r-l);
        margin: 10px 0 0 0;
    }
    .quote::before{
        font-family: 'icomoon';
        content: "\eb1b";
        font-size: 40px;
        color: var(--oz);
        top: -20px;
        left: -20px;
        position: absolute;
        display: inline;
        text-indent: initial;
        background: var(--f-light-default);
        padding: 0 5px;
    }
        .quote cite{
            font-weight: 500;
        }
        .quote cite::before{
            content: "-";
            font-size: var(--f-size-l);
            font-weight: 500;
            margin: 0 5px 0 0;
        }

    .acc-item{
        position: relative;
        padding: var(--gap-s) 0 0 0;
        overflow: hidden;
    }
    .acc-item::before{
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left:0;
        width: 100%;
        height: 1px;
        background: linear-gradient(43deg,var(--candy-apple) 0%,#f2547d 30%, transparent 50%, transparent);
    }
        .acc-item input[type="radio"]{
            position: absolute;
            width: 0;
            height: 0;
        }
        .acc-title{
            font-size: var(--f-size-s);
            font-weight: 500;

            line-height: var(--l-height-s);
            margin: 0 var(--gap-s) 0 0;
        }
        .acc-title:hover{
            cursor: pointer; 
        }
            .acc-ico{
                color: var(--candy-apple);
                font-size: var(--f-size-l);
                line-height: var(--l-height-l);
                transition: all 0.35s;
                margin: 0 var(--gap-m) 0 0;
                display: inline-block;
            }
        .acc-content{
            font-size: var(--f-size-xs);
            
            line-height: var(--l-height-s);
            max-height: 0;
            margin: 0 var(--gap-m);
            transition: all 0.35s;
        }
        .acc-item input[type="radio"]:checked ~ .acc-content{
            max-height: 100vh;
            padding: var(--gap-m) 0;
        }
        .acc-item input[type="radio"]:checked + .acc-title{
            font-weight: 500;
        }
        .acc-item input[type="radio"]:checked ~ .acc-title .acc-ico{
            transform: rotate(90deg);
            transition: all 0.35s;
        } 

    .columns{
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap-l);
    }

    .col2 .column{
        flex: 1 1 250px;
    }

    .col3 .column{
        flex: 1 1 290px;
    }

    .col4 .column{
        flex: 1 1 170px;
    }

        .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;
        }
            .pretty-list li{
                list-style: none;
                position: relative;
                /* display: flex; */
            }

            .pretty-list li::before{
                font-family: 'icomoon';
                font-size: var(--f-size-l);
                position: relative;
                top: 3px;
            }
            .chevron-list li::before{
                content: "\edc8";
                color: var(--oz);
                /* margin: 0 1px 0 0; */
            }
            .star-list li::before{
                content: "\ee6d";
                color: var(--sorbet);
                font-size: var(--f-size-xxxs);
                margin: 0 10px 0 0;
            }
            .dash-list li::before{
                content: "\ec6b";
                color: var(--norman);
                margin: 0 3px 0 0;
            }
            .arrow-list li::before{
                content: "\ee16";
                color: var(--bondi-blue);
                margin: 0 3px 0 0;
            }
                .pretty-list li :is(h1, h2, h3, h4, h5, h6){
                    display: inline-block;
                }

    .box-green,
    .box-blue{
        text-indent: 30px;
        position: relative;
        border-radius: var(--b-r-l);
        padding: 35px 25px 25px;
        font-size: var(--f-size-xs);
        line-height: var(--l-height-s);
        color: var(--f-light-default);
    }
    .box-green *,
    .box-blue *{
        color: var(--f-light-default);
    }

    .box-green::before,
    .box-blue::before{
        font-family: 'icomoon';
        font-size: 35px;
        line-height: normal;
        color: var(--f-light-default);
        display: inline-block;
        text-indent: initial;
        left: 10px;
        top: 10px;
        position: absolute;
        transform: scaleX(-1);
    }

    .box-green::before{
        content: "\ebf6";
    }
    .box-blue::before{
        content: "\eb9e";
    }

    .box-green{
        background: linear-gradient(to right, var(--bondi-blue), var(--oz) );
    }
    .box-blue{
        background: linear-gradient(to right, var(--governor-bay), var(--bondi-blue) );
    }


    .wpsm-titlebox{
        margin: 10px 0 0 0;
        padding: 30px 25px;
        position: relative;
    }
    .wpsm-titlebox::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--b-r-l);
        padding: 2px;
        z-index: 0;
        border: 1px solid var(--candy-apple);

        background-image: linear-gradient(45deg,var(--candy-apple), #ff8f59);

        mask: linear-gradient(var(--f-light-default) 0 0) content-box, linear-gradient(var(--f-light-default) 0 0);
        -webkit-mask: linear-gradient(var(--f-light-default) 0 0) content-box, linear-gradient(var(--f-light-default) 0 0);
        -webkit-mask-composite: source-out;

        mask-image: linear-gradient(var(--f-light-default) 0 0) content-box, linear-gradient(var(--f-light-default) 0 0);
        mask-composite: exclude;

    }
        .titlebox-content{
            position: relative;
            z-index: 2;
            font-size: var(--f-size-xs);
            line-height: var(--l-height-s);
        }

    @supports (mask-composite: exclude) or (-webkit-mask-composite: source-out){
        .wpsm-titlebox::before{
            border: none;
        }
    }
        .titlebox{
            position: absolute;
            top: -10px;
            left: 10px;
            background: var(--f-light-default);
            padding: 0 10px;
        }
            .titlebox p,
            .titlebox h2,
            .titlebox h3,
            .titlebox h4{
                font-weight: 500;
                line-height: var(--l-height-xs);
                font-size: var(--f-size-m);
            }

    .promobox{
        display: grid;
        position: relative;
    }
    .promobox::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--b-r-l);
        padding: 2px;
        z-index: 0;

        border: 1px solid var(--governor-bay);

        background-image: linear-gradient(45deg,var(--bondi-blue), var(--governor-bay));

        mask: linear-gradient(var(--f-light-default) 0 0) content-box, linear-gradient(var(--f-light-default) 0 0);
        -webkit-mask: linear-gradient(var(--f-light-default) 0 0) content-box, linear-gradient(var(--f-light-default) 0 0);
        -webkit-mask-composite: source-out;

        mask-image: linear-gradient(var(--f-light-default) 0 0) content-box, linear-gradient(var(--f-light-default) 0 0);
        mask-composite: exclude;
    }


    @supports (mask-composite: exclude) or (-webkit-mask-composite: source-out){
        .promobox::before{
            border: none;
        }
    }

        .promobox-content{
            z-index: 1;
        }
        .promobox-btn{
            z-index: 1;
        }
            .promobox-url{
                padding: 0 25px;
                font-size: var(--f-size-s);
                line-height: var(--l-height-xxl);
                color: var(--f-light-default);
                background-color: var(--candy-apple);
                border-radius: var(--b-r-m);
                background-image: linear-gradient(145deg, var(--governor-bay) 0%, var(--bondi-blue) 50%, var(--bondi-blue) 100%);
                box-shadow: 0px 5px 15px rgb(130 130 130 / 67%);
                border: none;
                background-size: 200%;
                background-position: 50% 0;
                transition: background-position 0.4s ease-in-out;
            }

            .promobox-url:hover{
                background-position: 0;
            }

    .pricing-box{
        position: relative;
    }
    .pricing-box::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--b-r-l);
        padding: 2px;
        z-index: 0;

        border: 1px solid var(--bondi-blue);

        background-image: linear-gradient(45deg,var(--governor-bay), var(--bondi-blue));

        mask: linear-gradient(var(--f-light-default) 0 0) content-box, linear-gradient(var(--f-light-default) 0 0);
        -webkit-mask: linear-gradient(var(--f-light-default) 0 0) content-box, linear-gradient(var(--f-light-default) 0 0);
        -webkit-mask-composite: source-out;

        mask-image: linear-gradient(var(--f-light-default) 0 0) content-box, linear-gradient(var(--f-light-default) 0 0);
        mask-composite: exclude;
    }
        .pricing-box-wrap{
            position: relative;
            z-index: 1;
        }

    @supports (mask-composite: exclude) or (-webkit-mask-composite: source-out){
        .pricing-box::before{
            border: none;
        }
    }

            .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(96%, 720px);
        place-self: center;
    }
        .embed-box{
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            height: 0;
        }
            .placeholder{
                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 img{
                    box-shadow: unset !important;
                    border-radius: unset !important;
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                }

                .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: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: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{
        display: inline-block;
        vertical-align: top;
        max-width: 100%;
        white-space: nowrap;
        border-collapse: collapse;
        border-spacing: 0;

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

    table {
        border: none;
        padding: 15px 15px 0 15px;
        margin: 10px 0;
    }
        .table.gr1 .thead{background: linear-gradient(to right, var(--bondi-blue), var(--oz));}
        .table.gr2 .thead{background: linear-gradient(to right, var(--bondi-blue), var(--governor-bay));}
        .table.gr3 .thead{background: linear-gradient(to right, #ff7a59, var(--candy-apple));}
        .table.gr4 .thead{background: linear-gradient(to right, #ff7a59, #f2547d);}
        .table.gr5 .thead{background: linear-gradient(to right, #ff7a59, #ff8f59);}

        .table.gr6 .thead{background: linear-gradient(to right, var(--oz), var(--bondi-blue));}
        .table.gr7 .thead{background: linear-gradient(to right, var(--oz), var(--governor-bay));}
        .table.gr8 .thead{background: linear-gradient(to right, var(--oz), #ff8f59);}
        .table.gr9 .thead{background: linear-gradient(to right, var(--governor-bay), var(--bondi-blue));}
        .table.gr10 .thead{background: linear-gradient(to right, var(--governor-bay), #ff7a59);}

        .table.gr11 .thead{background: linear-gradient(to right, var(--governor-bay), var(--oz));}
        .table.gr12 .thead{background: linear-gradient(to right, var(--governor-bay), var(--candy-apple));}
        .table.gr13 .thead{background: linear-gradient(to right, var(--governor-bay), #f2547d);}
        .table.gr14 .thead{background: linear-gradient(to right, var(--candy-apple), #ff7a59);}
        .table.gr15 .thead{background: linear-gradient(to right, var(--candy-apple), var(--governor-bay));}

        .table.gr16 .thead{background: linear-gradient(to right, var(--candy-apple), #f2547d);}
        .table.gr17 .thead{background: linear-gradient(to right, var(--candy-apple), #ff8f59);}
        .table.gr18 .thead{background: linear-gradient(to right, #f2547d, #ff7a59);}
        .table.gr19 .thead{background: linear-gradient(to right, #f2547d, var(--governor-bay));}
        .table.gr20 .thead{background: linear-gradient(to right, #f2547d, var(--candy-apple));}

        .table.gr21 .thead{background: linear-gradient(to right, #f2547d, #ff8f59);}
        .table.gr22 .thead{background: linear-gradient(to right, #ff8f59, #ff7a59);}
        .table.gr23 .thead{background: linear-gradient(to right, #ff8f59, var(--candy-apple));}
        .table.gr24 .thead{background: linear-gradient(to right, #ff8f59, #f2547d);}

        .table.gr1 .tb-cell{border-bottom: 1px solid var(--oz);}
        .table.gr2 .tb-cell{border-bottom: 1px solid var(--governor-bay);}
        .table.gr3 .tb-cell{border-bottom: 1px solid var(--candy-apple);}
        .table.gr4 .tb-cell{border-bottom: 1px solid #f2547d;}
        .table.gr5 .tb-cell{border-bottom: 1px solid #ff8f59;}

        .table.gr6 .tb-cell{border-bottom: 1px solid var(--bondi-blue);}
        .table.gr7 .tb-cell{border-bottom: 1px solid var(--governor-bay);}
        .table.gr8 .tb-cell{border-bottom: 1px solid #ff8f59;}
        .table.gr9 .tb-cell{border-bottom: 1px solid var(--bondi-blue);}
        .table.gr10 .tb-cell{border-bottom: 1px solid #ff7a59;}

        .table.gr11 .tb-cell{border-bottom: 1px solid var(--oz);}
        .table.gr12 .tb-cell{border-bottom: 1px solid var(--candy-apple);}
        .table.gr13 .tb-cell{border-bottom: 1px solid #f2547d;}
        .table.gr14 .tb-cell{border-bottom: 1px solid #ff7a59;}
        .table.gr15 .tb-cell{border-bottom: 1px solid var(--governor-bay);}

        .table.gr16 .tb-cell{border-bottom: 1px solid #f2547d;}
        .table.gr17 .tb-cell{border-bottom: 1px solid #ff8f59;}
        .table.gr18 .tb-cell{border-bottom: 1px solid #ff7a59;}
        .table.gr19 .tb-cell{border-bottom: 1px solid var(--governor-bay);}
        .table.gr20 .tb-cell{border-bottom: 1px solid var(--candy-apple);}

        .table.gr21 .tb-cell{border-bottom: 1px solid #ff8f59;}
        .table.gr22 .tb-cell{border-bottom: 1px solid #ff7a59;}
        .table.gr23 .tb-cell{border-bottom: 1px solid var(--candy-apple);}
        .table.gr24 .tb-cell{border-bottom: 1px solid #f2547d;}

        
            .table.gr1 .thead{box-shadow: rgba(0, 163, 141, 0.3) 1px 1px 10px;}
            .table.gr2 .thead{box-shadow: rgba(94, 106, 184, 0.3) 1px 1px 10px;}
            .table.gr3 .thead{box-shadow: rgba(217, 76, 83, 0.3) 1px 1px 10px;}
            .table.gr4 .thead{box-shadow: rgba(217, 76, 113, 0.3) 1px 1px 10px;}
            .table.gr5 .thead{box-shadow: rgba(230, 130, 80, 0.3) 1px 1px 10px;}

            .table.gr6 .thead{box-shadow: rgba(0, 145, 176, 0.3) 1px 1px 10px;}
            .table.gr7 .thead{box-shadow: rgba(94, 106, 184, 0.3) 1px 1px 10px;}
            .table.gr8 .thead{box-shadow: rgba(230, 130, 80, 0.3) 1px 1px 10px;}
            .table.gr9 .thead{box-shadow: rgba(0, 145, 176, 0.3) 1px 1px 10px;}
            .table.gr10 .thead{box-shadow: rgba(230, 110, 80, 0.3) 1px 1px 10px;}

            .table.gr11 .thead{box-shadow: rgba(0, 163, 141, 0.3) 1px 1px 10px;}
            .table.gr12 .thead{box-shadow: rgba(217, 76, 83, 0.3) 1px 1px 10px;}
            .table.gr13 .thead{box-shadow: rgba(217, 76, 113, 0.3) 1px 1px 10px;}
            .table.gr14 .thead{box-shadow: rgba(230, 110, 80, 0.3) 1px 1px 10px;}
            .table.gr15 .thead{box-shadow: rgba(94, 106, 184, 0.3) 1px 1px 10px;}

            .table.gr16 .thead{box-shadow: rgba(217, 76, 113, 0.3) 1px 1px 10px;}
            .table.gr17 .thead{box-shadow: rgba(230, 130, 80, 0.3) 1px 1px 10px;}
            .table.gr18 .thead{box-shadow: rgba(230, 110, 80, 0.3) 1px 1px 10px;}
            .table.gr19 .thead{box-shadow: rgba(94, 106, 184, 0.3) 1px 1px 10px;}
            .table.gr20 .thead{box-shadow: rgba(217, 76, 83, 0.3) 1px 1px 10px;}

            .table.gr21 .thead{box-shadow: rgba(230, 130, 80, 0.3) 1px 1px 10px;}
            .table.gr22 .thead{box-shadow: rgba(230, 110, 80, 0.3) 1px 1px 10px;}
            .table.gr23 .thead{box-shadow: rgba(217, 76, 83, 0.3) 1px 1px 10px;}
            .table.gr24 .thead{box-shadow: rgba(217, 76, 113, 0.3) 1px 1px 10px;}

                .table .thead{
                    border-radius: var(--b-r-m);
                    display: grid;
                }
                    .table .th-cell {
                        border: 0;
                        color: var(--f-light-default);
                        line-height: var(--l-height-l);
                        font-weight: 500;
                        padding: var(--gap-s) var(--gap-m);
                        text-align: left;
                    }
                    .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;
                }
                    .table .tb-cell {
                        border: none;
                        line-height: var(--l-height-xs);
                        font-size: var(--f-size-s);
                        padding: var(--gap-s) var(--gap-m);
                    }

    .rbody-row {
        display: grid;
        font-size: var(--f-size-m);
        line-height: var(--l-height-l);
        gap: var(--gap-l);
    }

        .col-title {
            font-size: var(--f-size-m);
            line-height: var(--l-height-xs);
            font-weight: 500;
        }
        .col-title.pro {
            color: var(--oz);
        }

        .col-title.con {
            color: var(--candy-apple);
        }
        
        .pro-cons .col-title {
            position: relative;
            margin: 0 0 15px 0;
            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;
            font-size: var(--f-size-s);
            line-height: var(--l-height-xs);
        }
        .pro-cons ul li::before{
            font-family: icomoon;
            font-size: var(--f-size-l);
            display: flex;
            flex-direction: column;
            place-content: center;
            margin-top: -2px;
        }
        .pro-cons .pros li::before{content: "\ecf5"; color: var(--oz); margin: 0 3px 0 0;}
        .pro-cons .cons li::before{content: "\ecf6"; color: var(--candy-apple); margin: 0 3px 0 0;}


/**** 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){
    .table-box{
        overflow-x: scroll;
    }
    .table-box::-webkit-scrollbar {
        display: none;
    }

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


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

    .table .thead{
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        width: 100%;
    }
        .table .th-cell{
            display: flex;
            flex-grow: 1;
            /* white-space: nowrap; */
        }

    .table .tbody {
        display: flex;
        flex-direction: column;
    }

        .tb-row {
            grid-auto-columns: 1fr;
            grid-auto-flow: column;
        }

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

}


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

    .promobox{
        display: grid;
        grid-template: auto 1fr / 1fr;
        position: relative;
        gap: var(--gap-m);
    }

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

    .table .thead {
        grid-auto-rows: 1fr;
        grid-auto-flow: row;
        width: max-content;
    }
        .table .th-cell{
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            white-space: nowrap;
            justify-content: center;
            width: max-content;
        }

    .table .tbody{
        display: flex;
        flex-direction: row;
        flex-grow: 0;
        flex-shrink: 1;
        overflow-x: scroll;
    }
    .table .tbody::-webkit-scrollbar {
        display: none;
    }
        .tb-row {
            grid-auto-rows: 1fr;
            grid-auto-flow: row;
        }
            .tb-cell{
                white-space: nowrap;
            }
            .tb-row .tb-cell:last-child{
                border: none;
            }
}

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

}
.s-overview{
    gap: var(--gap-l);
}
.sticky + .s-overview{
    /* margin-top: clamp(23rem, 17.0000rem + 13.3333vw, 33rem); */
    /* margin-top: clamp(23rem, 9.0000rem + 20.0000vw, 33rem); */
    margin-top: clamp(26rem, 22.5000rem + 8.7500vw, 33rem);
}

.title-box{
    flex-wrap: wrap;
    gap: 3px;
}
.pseudo-h1{
    font-weight: 500;
}
    .so-summary{
        grid-area: 1 / 1 / 2 / 2;
    }

        .read-content{
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            gap: var(--gap-xs);
            position: relative;
        }
    
        .read-content::after{
            content: '';
            display: flex;
            align-items: flex-end;
            justify-content: center;
    
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
    
            background: linear-gradient(to top, #fff 0%, #fff 25%, rgb(255 255 255 / 95%) 50%, rgb(255 255 255 / 61%) 100%);
            text-align: center;
        }
    
        .read-checkbox:checked + .read-content{
            max-height: 1000px;
        }
        .read-checkbox:checked + .read-content::after{display: none;}
    
        .read-checkbox{}
    

            .read-less{display: none;}
    
            .read-checkbox:checked ~ .read-btn .read-more{display: none}
            .read-checkbox:checked ~ .read-btn .read-less{display: inline}
    
        @media all and (min-width: 768px){
            .read-content{
                max-height: calc( var(--l-height-l) + var(--l-height-xs)*3 + var(--gap-xs) );
            }
    
            .read-content::after{
                height: 20px;
            }
        }
    
        @media all and (max-width: 767px){
            .read-content{
                max-height: calc( var(--l-height-l) + var(--l-height-xs)*3 + var(--gap-xs) );
            }
    
            .read-content::after{
                height: 20px;
            }
        }
    

    .so-cats{
        grid-area: 1 / 2 / 2 / 3;
        gap: var(--gap-m);
    }
        .so-cats h3{
            padding-left: var(--gap-s);
        }

            .so-cats .cat-list{
                max-width: 100%;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                grid-auto-flow: column;
                padding: var(--gap-s) var(--gap-m) 0 var(--gap-s);
                gap: var(--gap-l);
            }

            .so-cats .hsBtn span{
                line-height: 115px;
            }


    .so-best-for{
        grid-area: 2 / 1 / 3 / 3;
        gap: var(--gap-m);
    }



    @keyframes score-line {
        from {
            transform: scaleX(0);
        }
        to {
            transform: scaleX(1);
        }
    }

    @keyframes score-dot {
        from {
            left: 0;
            /* transform: scale(0); */
        }
        to {
            left: 100%;
            /* transform: scale(1); */
        }
    }







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

        .s-overview {
            display: grid;
            grid-template: 1fr auto / repeat(2, minmax(0, 1fr));
        }

    }

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

        .s-overview {
            display: flex;
            flex-direction: column;
        }

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

        .software-scores{
            align-self: flex-start;
        }

        .metas, .software-scores{
            gap: 5px;
        }
        .no-gap .metas > * + *, .no-gap .software-scores > * + *{
            margin-top: 5px;
        }
    }
    
    .pag-btn{
        line-height: var(--l-height-l);
        border-radius: var(--b-r-m);
        flex-wrap: nowrap;
        white-space: nowrap;
        cursor: pointer;
    }
    .pag-prev{
        border: 1px solid var(--bondi-blue);
    }
    .pag-next{
        border: 1px solid var(--governor-bay);
    }
        .pag-btn span{
            line-height: var(--l-height-l);
        }

        .pag-input span{
            font-size: var(--f-size-s);
            line-height: var(--l-height-l);
        }
        .page-nr{
            width: 60px;
            font-size: var(--f-size-s);
            line-height: var(--l-height-l);
            height: var(--l-height-l);
            border: 1px solid #a9a9a973;
            border-radius: var(--b-r-l);
            text-align: center;
        }


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

    .pagination {
        gap: var(--gap-l);
    }

        .pag-btn {
            padding: 0 var(--gap-s);
            width: auto;
            max-width: 150px;
            flex-grow: 1;
            font-size: var(--f-size-xxs);
            gap: var(--gap-xs);
        }
}

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



}

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

    .pagination {
        gap: var(--gap-s);
        /* justify-content: space-between; */
    }

        .pag-btn {
            padding: 0 var(--gap-xs);
            width: auto;
            max-width: min(32%, 130px);
            flex-grow: 1;
            font-size: var(--f-size-xxs);
            gap: var(--gap-xxs);
        }

}

@media all and (max-width: 335px){
    .pag-input{display: none;}
}
.toc-box{
    padding: 15px;
}

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

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

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

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

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

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

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


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

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

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

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

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




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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

    .side-toc{
        display: none;
    }

}

/* subscribe */
.section-box.subscribe{
    padding: var(--gap-xxl) 0;
    position: relative;
    margin: 0;
}
.subscribe-clip{
    position: absolute;
    z-index: -1;
    right: 0;
    transform: scaleX(-1);
    -webkit-clip-path: url(#tekpon-path2);
    clip-path: url(#tekpon-path2);
}

    .section-box.subscribe .boxW {
        border-radius: var(--b-r-l);
        display: grid;
    }
    @media all and (min-width: 700px){
        .section-box.subscribe .boxW {
            width: min(700px,90%);
        }
    }
        .subscribe-robo{
            padding: 0;
        }

            .section-box.subscribe .section-title{
                font-size: var(--f-size-xl);
                line-height: var(--l-height-l);
                margin: 0;
            }
            .section-box.subscribe .section-title span{
                display: block;
                font: inherit;
            }

            .subscribe-content {
                gap: var(--gap-m);
            }

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

    .sub-form-wrap{
        padding-bottom: var(--gap-l);
    }
    .sub-form-box{
        gap: var(--gap-m);
    }
        .sub-form{
            transition: all 0.3s ease-in-out;
        }
        .sub-form.hide{
            visibility: hidden;
        }

        .sub-btn-box{
            margin: 0;
        }
            .subscribe-btn{cursor: pointer;}
                .subscribe-btn span{
                    color: inherit;
                }

            .subscribe-input:focus, .subscribe-btn:focus{outline: none;}

            .subMsgBox{
                width: auto;
                max-width: 100%;
                font-size: var(--f-size-s);
                line-height: var(--l-height-xs);
                padding: var(--gap-l);
                -webkit-animation: 0.2s showMsgBox linear forwards;
                animation: 0.2s showMsgBox linear forwards;
            }

                .subMsgBox .sub-title{
                    font-size: var(--f-size-xl);
                    line-height: var(--l-height-xl);
                    font-weight: 500;
                }

            @keyframes showMsgBox{
                0% {
                    opacity: 0;
                   transform: scale(0.8);
                }
        
                100% {
                    opacity: 1;
                   transform: scale(1);
                }
            }
        

            @keyframes draw-sub {
                0% {
                    stroke-dasharray: 0% 300%;
                    stroke-dashoffset: -100%;
        
                    stroke-width: 4px;
                }
        
                100% {
                    stroke-dasharray: 300% 0%;
                    stroke-dashoffset: -100%;
        
                    stroke-width: 4px;
                }
            }
        
            @keyframes draw-sub-hov {
                0% {
                    stroke-dasharray: 300% 0%;
                    stroke-dashoffset: -100%;
                    stroke-width: 4px;
                }
                100% {
                    stroke-dasharray: 0% 300%;
                    stroke-dashoffset: -100%;
                    stroke-width: 4px;
                }
            }


    .footer-wrap{
        box-shadow: 0 -8px 15px 0 #b6b6b95e;
        border-top: 1px solid rgba( 255, 255, 255, 0.18 );
        padding: var(--gap-m) 0 0 0;
        position: relative;
        background: var(--f-light-default);
        justify-content: space-between;
    }

            .footer-motto{
                z-index: 2;
                margin: 25px 0;
                flex-wrap: wrap;
            }
                .footer-motto p{
                    font-size: var(--f-size-s);
                    line-height: var(--l-height-m);
                }
                .icon-power{
                    color: var(--persian-blue);
                    font-size: var(--f-size-xs);
                }

            .box-wrap{z-index: 2;}

                    .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-col{
                        flex: 1 1 auto;
                    }
                        .footer-menu-title{
                            font-size: var(--f-size-s);
                            line-height: var(--l-height-xs);
                            margin: 0 0 var(--gap-m) 0;
                        }

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

        .footer-bottom-wrap{
            background-color: var(--f-light-other);
            padding: 10px 0;
            z-index: 2;
        }
            .footer-bottom{
                font-size: var(--f-size-xxs);
                line-height: var(--l-height-xxs);
                
            }

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

        @media all and (min-width: 800px){
            .support-ukraine{
                flex-direction: row;
            }

            .section-box.subscribe .boxW {
                grid-template-columns: auto minmax(400px,60%);
            }
                .subscribe-clip{
                    width: 75%;
                    top: 0;
                }

                .sub-robo{
                    position: relative;
                    left: -50px;
                    height: auto;
                }

                .subscribe-content{
                    padding: 0 var(--gap-s);
                }


            .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-box{
                    display: grid;
                    grid-template-columns: repeat(4, max-content);
                    justify-content: space-between;
                }
        }

        @media all and (max-width: 799px){
            .support-ukraine{
                flex-direction: column;
            }

            .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-box{
                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 (min-width: 600px) and (max-width: 699px){
            .section-box.subscribe .boxW {
                grid-template-columns: auto minmax(400px,60%);
                backdrop-filter: blur( 30px );
                -webkit-backdrop-filter: blur( 30px );
            }
                .subscribe-clip{
                    width: 100%;
                    height: 60%;
                    bottom: 0;
                }

                .subscribe-robo {
                    display: none;
                }

            .subscribe-content{
                padding: 0 var(--gap-m);
            }
            
        } */

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

            .section-box.subscribe .boxW {
                grid-template-rows: 1fr;
                backdrop-filter: blur( 30px );
                -webkit-backdrop-filter: blur( 30px );
            }
                .subscribe-clip{
                    width: 100%;
                    height: 60%;
                    bottom: 0;
                }

                .subscribe-robo {
                    display: none;
                }

            .subscribe-content{
                padding: clamp(1rem,.4667rem + 1.3333vw,3rem) 0;
            }

            .sub-form {
                margin: 0;
            }

            .subscribe-border{width: 80%;}

        }