/*===================================================
    AMC SpyroKAB X-Series LMI page
    (shared inner-hero styles live in common.css)
===================================================*/

/*===inner hero - three-line heading===*/
.innerHeroSec{
    .breadcrumbList{
        flex-wrap: wrap;
        white-space: normal;
        max-width: 190px;
    }
    .innerHeroCont{
        flex: 1;
        .tagHolder{
            max-width: 82%;
        }
        .innerHeroSub{
            max-width: 100%;
        }
    }
}

/*===choose your platform - two product cards===*/
.platformSec{
    .platformGrid{
        .row{
            row-gap: 26px;
        }
        .platformCard{
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: #fff;
            border: 1px solid #dfe6ee;
            border-radius: 20px;
            overflow: hidden;
            transition: transform .4s ease, box-shadow .4s ease;
            &:hover{
                transform: translateY(-5px);
                box-shadow: 0 18px 40px rgb(11 51 85 / 12%);
            }
            .platformTitle{
                display: block;
                padding: 24px 30px;
                background-color: #eef3f8;
                text-align: center;
                font-size: 26px;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                color: #4b5a66;
            }
            .platformImg{
                display: flex;
                justify-content: center;
                padding: 20px 40px;
                img{
                    max-width: 100%;
                    height: 420px;
                    object-fit: contain;
                }
            }
            .platformList{
                margin: auto 26px 26px;
                padding: 24px 28px 24px 46px;
                background-color: #eef3f8;
                border-radius: 16px;
                list-style: decimal;
                li{
                    list-style: decimal;
                    margin-bottom: 10px;
                    font-size: 15px;
                    line-height: 1.5;
                    letter-spacing: 0.2px;
                    color: #1d2a36;
                    &:last-child{
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}
@media (max-width: 767px){
    .platformSec{
        .platformGrid{
            .platformCard{
                .platformImg img{
                    height: 280px;
                }
                .platformTitle{
                    font-size: 21px;
                }
            }
        }
    }
}

/*===same safety philosophy - displays flanking the shared card===*/
.philosophySec{
    .philosophyPanel{
        background-color: #e8eef8;
    }
    .headingWrap{
        .tagHolder{
            max-width: 100%;
            .SecH{
                margin: 0 auto;
            }
        }
    }
    .philosophySub{
        max-width: 720px;
        margin: 26px auto 60px;
        color: #1d2a36;
        font-size: 15px;
        line-height: 1.7;
        letter-spacing: 0.2px;
    }
    .philosophyRow{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        .philoImg{
            flex-shrink: 0;
            width: 250px;
            img{
                width: 100%;
                height: auto;
            }
        }
        .philoCard{
            background-color: #fff;
            border-radius: 24px;
            padding: 50px 20px;
            box-shadow: 0 16px 34px rgb(11 51 85 / 8%);
            ul{
                display: flex;
                margin: 0;
                li{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 24px;
                    padding: 0 34px;
                    text-align: center;
                    &:not(:last-child){
                        border-right: 1px solid #dfe6ee;
                    }
                    .philoIcon{
                        i,
                        svg{
                            font-size: 44px;
                            width: 1em;
                            height: auto;
                            color: var(--blue);
                            fill: currentColor;
                        }
                    }
                    p{
                        margin: 0;
                        max-width: 170px;
                        font-size: 15px;
                        line-height: 1.5;
                        letter-spacing: 0.2px;
                        color: #1d2a36;
                    }
                }
            }
        }
    }
}
@media (max-width: 1199px){
    .philosophySec{
        .philosophyRow{
            .philoImg{
                width: 190px;
            }
        }
    }
}
@media (max-width: 991px){
    .philosophySec{
        .philosophyRow{
            flex-direction: column;
        }
    }
}
@media (max-width: 767px){
    .philosophySec{
        .philosophyRow{
            .philoCard{
                padding: 30px 10px;
                ul{
                    flex-direction: column;
                    gap: 26px;
                    li{
                        &:not(:last-child){
                            border-right: 0;
                        }
                    }
                }
            }
        }
    }
}

/*===deep-dive sections - tab strip, product image & spec list===*/
.deepDiveSec{
    .deepDivePanel{
        background-color: #e8eef8;
        border-radius: 40px;
        padding: 70px 60px;
    }
    .deepDiveIntro,
    .deepDiveNote{
        font-size: 15px;
        line-height: 1.6;
        color: #1d2a36;
        margin-bottom: 18px;
    }
    .deepDiveNote{
        margin: 18px 0 0;
    }
    .deepDiveTabs{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 40px 0 50px;
        li{
            padding: 0 30px;
            &:not(:last-child){
                border-right: 1px solid #c6d4e4;
            }
            button{
                font-family: inherit;
                font-size: 19px;
                font-weight: 700;
                color: #8a97a5;
                background-color: transparent;
                cursor: pointer;
                transition: color .3s ease;
                &:hover{
                    color: var(--blue);
                }
            }
            &.is-active{
                button{
                    color: var(--blue);
                }
            }
        }
    }
    .deepDiveImg{
        display: flex;
        justify-content: center;
        padding-right: 30px;
        img{
            max-width: 100%;
            height: auto;
        }
    }
    .deepDiveCont{
        .deepDiveH{
            font-size: 27px;
            font-weight: 700;
            margin-bottom: 22px;
        }
        .specList{
            margin: 0;
            padding: 30px 30px 30px 48px;
            background-color: #e8eef8;
            border-radius: 18px;
            list-style: decimal;
            li{
                list-style: decimal;
                margin-bottom: 12px;
                font-size: 15px;
                line-height: 1.55;
                letter-spacing: 0.2px;
                color: #1d2a36;
                &:last-child{
                    margin-bottom: 0;
                }
            }
        }
    }
    /*===the light panel variant flips the list card to white===*/
    &.x4Sec{
        /* the product shot is on white; let it sit on the panel colour */
        .deepDiveImg img{
            mix-blend-mode: multiply;
        }
        .deepDiveCont{
            .specList{
                background-color: #fff;
            }
        }
    }
}
@media (max-width: 991px){
    .deepDiveSec{
        .deepDiveImg{
            padding-right: 0;
            margin-bottom: 40px;
        }
        .deepDiveTabs{
            li{
                padding: 0 18px;
                button{
                    font-size: 16px;
                }
            }
        }
        .deepDivePanel{
            padding: 50px 30px;
            border-radius: 28px;
        }
    }
}
@media (max-width: 767px){
    .deepDiveSec{
        .deepDiveTabs{
            flex-direction: column;
            align-items: center;
            gap: 10px;
            li{
                padding: 0;
                &:not(:last-child){
                    border-right: 0;
                }
            }
        }
    }
}

/*===product gallery===*/
.gallerySec{
    .galleryGrid{
        .row{
            row-gap: 26px;
        }
        .galleryItem{
            display: block;
            border-radius: 18px;
            overflow: hidden;
            cursor: zoom-in;
            img{
                width: 100%;
                height: 300px;
                object-fit: cover;
                transition: transform .5s ease;
            }
            &:hover{
                img{
                    transform: scale(1.06);
                }
            }
        }
    }
}
@media (max-width: 767px){
    .gallerySec{
        .galleryGrid{
            .galleryItem img{
                height: 180px;
            }
        }
    }
}

/*===why technically better - icon cards, one featured===*/
.whySec{
    .whyGrid{
        .row{
            row-gap: 26px;
        }
        .whyCard{
            height: 100%;
            padding: 30px 28px;
            background-color: #fff;
            border: 1px solid #dfe6ee;
            border-radius: 18px;
            transition: all .4s ease;
            .whyIcon{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 56px;
                height: 56px;
                margin-bottom: 28px;
                background-color: #eef3f8;
                border-radius: 14px;
                transition: background .4s ease;
                i,
                svg{
                    font-size: 22px;
                    width: 1em;
                    height: auto;
                    color: var(--blue);
                    fill: currentColor;
                    transition: color .4s ease;
                }
            }
            .whyTitle{
                display: block;
                font-size: 20px;
                font-weight: 700;
                color: var(--blue);
                margin-bottom: 10px;
            }
            p{
                margin: 0;
                font-size: 14px;
                line-height: 1.65;
                letter-spacing: 0.2px;
                color: #1d2a36;
            }
            &.is-active,
            &:hover{
                border-color: #fff;
                box-shadow: 0 18px 40px rgb(11 51 85 / 14%);
                transform: translateY(-4px);
                .whyIcon{
                    background-color: var(--blue);
                    i,
                    svg{
                        color: #fff;
                    }
                }
            }
        }
    }
}

/*===comparative table - three aligned columns===*/
.compareSec{
    .comparePanel{
        background-color: #e8eef8;
    }
    .headingWrap{
        .tagHolder{
            max-width: 100%;
        }
    }
    .compareTable{
        display: grid;
        grid-template-columns: 1fr 1.7fr 1.7fr;
        column-gap: 26px;
        .compareCell{
            padding: 18px 24px;
            font-size: 14px;
            line-height: 1.5;
            letter-spacing: 0.2px;
            border-bottom: 1px solid #e3eaf2;
            &:nth-last-child(-n+3){
                border-bottom: 0;
            }
            /*===column looks===*/
            &.paramCell{
                background-color: #f6f9fc;
                color: #1d2a36;
                font-weight: 600;
            }
            &.genericCell{
                background-color: #fff;
                color: #4b5a66;
            }
            &.oursCell{
                background-color: var(--blue);
                color: #fff;
                border-bottom-color: rgb(255 255 255 / 25%);
            }
            /*===header chips===*/
            &.headCell{
                margin-bottom: 6px;
                font-size: 17px;
                font-weight: 700;
                border-radius: 14px 14px 0 0;
                &.paramCell,
                &.genericCell{
                    color: #1d2a36;
                }
                &.oursCell{
                    color: #fff;
                }
            }
            /*===rounded card corners top & bottom===*/
            &:nth-child(-n+3){
                border-radius: 14px 14px 0 0;
            }
            &:nth-last-child(-n+3){
                border-radius: 0 0 14px 14px;
            }
        }
    }
}
@media (max-width: 991px){
    .compareSec{
        .compareTable{
            grid-template-columns: 1fr 1.4fr 1.4fr;
            column-gap: 12px;
            .compareCell{
                padding: 14px 14px;
                font-size: 12px;
                &.headCell{
                    font-size: 13px;
                }
            }
        }
    }
}
@media (max-width: 767px){
    .compareSec{
        .comparePanel{
            overflow-x: auto;
        }
        .compareTable{
            min-width: 640px;
        }
    }
}

/*===upgrade & protect + group expertise===*/
.upgradeSec{
    /*===a deep-blue band, in the same family as the home page's Spyro
         panel: heading, copy and button on the left, three benefit tiles
         on the right. A tile flips to white on hover and its icon tile
         answers by going blue===*/
    .upgradeBand{
        position: relative;
        overflow: hidden;
        margin-bottom: 80px;
        padding: 70px 60px;
        color: #fff;
        background: radial-gradient(120% 120% at 80% 15%, #1d7ac2 0%, #14639f 40%, #0b3a63 100%);
        background-color: #0b3a63;
        &::before{
            content: "";
            position: absolute;
            inset: -40% -10% auto -10%;
            height: 90%;
            background: radial-gradient(50% 60% at 50% 50%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%);
            pointer-events: none;
        }
        .upgradeBandInner{
            position: relative;
            z-index: 1;
        }
        .headingWrap{
            display: block;
            margin-bottom: 26px;
            .tagHolder{
                max-width: 100%;
            }
            .SecH{
                color: #fff;
            }
        }
        .upgradeLead{
            max-width: 460px;
            margin: 0 0 30px;
            font-size: 15px;
            line-height: 1.7;
            letter-spacing: 0.2px;
            color: rgb(255 255 255 / 82%);
            strong{
                color: #fff;
                font-weight: 700;
            }
        }
        .upgradeCtaWrap .btnOne{
            padding: 12px 30px;
        }
    }
    .upgradeCards{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        .upgradeCard{
            position: relative;
            overflow: hidden;
            padding: 28px 22px 26px;
            border-radius: 18px;
            background-color: rgb(255 255 255 / 8%);
            border: 1px solid rgb(255 255 255 / 25%);
            transition: transform .45s cubic-bezier(.2,.8,.2,1), background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
            /*===the step number sits large and faint in the corner===*/
            .upgradeCardNum{
                position: absolute;
                top: 14px;
                right: 18px;
                font-size: 40px;
                font-weight: 800;
                line-height: 1;
                color: rgb(255 255 255 / 14%);
                transition: color .4s ease, transform .45s cubic-bezier(.2,.8,.2,1);
            }
            .upgradeCardIcon{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 56px;
                height: 56px;
                margin-bottom: 22px;
                border-radius: 14px;
                background-color: #fff;
                color: var(--blue);
                transition: transform .45s cubic-bezier(.2,.8,.2,1), background-color .4s ease, color .4s ease, box-shadow .4s ease;
                i,
                svg{
                    font-size: 22px;
                    width: 1em;
                    height: auto;
                    fill: currentColor;
                }
            }
            .upgradeCardTitle{
                display: block;
                margin-bottom: 10px;
                padding-right: 36px;
                font-size: 17px;
                font-weight: 700;
                line-height: 1.3;
                color: #fff;
                transition: color .4s ease;
            }
            p{
                margin: 0;
                font-size: 14px;
                line-height: 1.65;
                letter-spacing: 0.2px;
                color: rgb(255 255 255 / 82%);
                transition: color .4s ease;
            }
            &:hover{
                transform: translateY(-6px);
                background-color: #fff;
                border-color: #fff;
                box-shadow: 0 18px 40px rgb(6 32 56 / 30%);
                .upgradeCardNum{
                    color: rgb(22 103 166 / 12%);
                    transform: scale(1.1);
                }
                .upgradeCardIcon{
                    background-color: var(--blue);
                    color: #fff;
                    transform: rotate(-6deg) scale(1.06);
                    box-shadow: 0 10px 22px rgb(22 103 166 / 35%);
                }
                .upgradeCardTitle{
                    color: var(--blue);
                }
                p{
                    color: #4b5a66;
                }
            }
        }
    }
    .expertiseWrap{
        .expertiseH{
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 16px;
        }
        .expertiseSub{
            max-width: 720px;
            margin: 0 auto 40px;
            color: #1d2a36;
            font-size: 15px;
            line-height: 1.7;
            letter-spacing: 0.2px;
        }
        .commitGrid{
            .row{
                row-gap: 24px;
            }
            .commitCard{
                height: 100%;
                padding: 30px 28px;
                text-align: left;
                background-color: #fff;
                border: 1px solid #dfe6ee;
                border-radius: 18px;
                transition: transform .4s ease, box-shadow .4s ease;
                &:hover{
                    transform: translateY(-5px);
                    box-shadow: 0 16px 34px rgb(11 51 85 / 10%);
                }
                .commitNum{
                    position: relative;
                    display: inline-block;
                    padding-left: 14px;
                    margin-bottom: 20px;
                    font-size: 38px;
                    font-weight: 800;
                    line-height: 1;
                    color: #1d2a36;
                    &::before{
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 4px;
                        bottom: 4px;
                        width: 3px;
                        background-color: var(--blue);
                    }
                }
                p{
                    margin: 0;
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 1.5;
                    letter-spacing: 0.2px;
                    color: var(--blue);
                }
            }
        }
    }
}
@media (max-width: 991px){
    .upgradeSec{
        .upgradeBand{
            margin-bottom: 60px;
            padding: 50px 34px;
            .upgradeLead{
                max-width: 100%;
            }
        }
        .upgradeCards{
            margin-top: 36px;
        }
        .expertiseWrap .expertiseH{
            font-size: 32px;
        }
    }
}
@media (max-width: 767px){
    .upgradeSec{
        .upgradeBand{
            padding: 40px 24px;
            border-radius: 30px;
        }
        .upgradeCards{
            grid-template-columns: 1fr;
            gap: 14px;
        }
    }
}
@media (prefers-reduced-motion: reduce){
    .upgradeSec .upgradeCards .upgradeCard{
        transition: none;
        &:hover,
        &:hover .upgradeCardNum,
        &:hover .upgradeCardIcon{
            transform: none;
        }
    }
}

/*===cta - photo panel with heading & call buttons===*/
.spyroCtaSec{
    .ctaSec{
        padding: 90px 80px;
        overflow: hidden;
        /*===solid blue panel; the crane is a cut-out on top of it, not a
             photographic background===*/
        background-color: var(--blue);
        .ctaContent{
            max-width: 62%;
            .SecH{
                font-size: 64px;
                margin-bottom: 24px;
            }
            .ctaSub{
                max-width: 560px;
                margin: 0 0 36px;
                color: rgb(255 255 255 / 88%);
                font-size: 15px;
                line-height: 1.7;
                letter-spacing: 0.2px;
            }
        }
        .ctaBtnWrap{
            ul{
                display: flex;
                flex-wrap: wrap;
                gap: 15px;
                li{
                    a{
                        padding: 14px 30px;
                        width: 200px;
                        text-align: center;
                    }
                }
            }
        }
        .btnOne.solidWhiteBtn{
            background-color: #fff;
            border: 1px solid #fff;
            color: #000;
            width: 200px;
            text-align: center;
            &:hover{
                background-color: transparent;
                color: #fff;
            }
        }
        /*===cut-out artwork sits bottom-right, clipped by the panel===*/
        .ctaArt{
            position: absolute;
            right: 40px;
            bottom: 0;
            z-index: 0;
            width: 40%;
            pointer-events: none;
            img{
                display: block;
                width: 100%;
                height: auto;
            }
        }
        /* the text column stops short of the artwork so the two never
           run into each other */
        &.hasCtaArt .ctaContent{
            max-width: 56%;
        }
    }
}
@media (max-width: 1199px){
    .spyroCtaSec .ctaSec .ctaArt{
        right: 20px;
        width: 34%;
    }
    .spyroCtaSec .ctaSec.hasCtaArt .ctaContent{
        max-width: 62%;
    }
    .spyroCtaSec .ctaSec .ctaContent .SecH{
        font-size: 50px;
    }
}
@media (max-width: 991px){
    .spyroCtaSec .ctaSec{
        padding: 70px 50px;
        .ctaContent{
            max-width: 80%;
            .SecH{
                font-size: 40px;
            }
        }
        /*===no room for the crane beside the text at this width===*/
        .ctaArt{
            display: none;
        }
        &.hasCtaArt .ctaContent{
            max-width: 80%;
        }
    }
}
@media (max-width: 767px){
    .spyroCtaSec .ctaSec{
        border-radius: 30px;
        padding: 50px 25px;
        .ctaContent{
            max-width: 100%;
            .SecH{
                font-size: 30px;
            }
        }
    }
}

/*===quick answers faq===*/
.faqCont{
    .SecH{
        margin-bottom: 30px;
    }
    p{
        font-size: 18px;
        margin-bottom: 20px;
    }
    .faqMail{
        font-size: 19px;
        font-weight: 700;
        color: var(--blue);
        &:hover{
            text-decoration: underline !important;
        }
    }
}

/*===================================================
    FAQ intro sticks beside the answers

    The questions column runs a good deal taller than
    this one, and taller still once "See more" is open,
    so the heading, the blurb and the mail link hold
    their place instead of scrolling away and leaving
    the answers next to nothing.

    From 992 up only: below that the two columns stack
    and there is nothing left to sit beside. The offset
    clears the sticky .headerWrap (81px) with some air
    under it.
===================================================*/
@media (min-width: 992px){
    .faqCont{
        position: sticky;
        top: 110px;
    }
}

.faqAccordion{
    padding-top: 15px;
    .faqItem{
        border-radius: 0px;
        transition: background-color .4s ease;
        border-top: 1px solid #b9cede;
        &:last-child{
            margin-bottom: 0px;
            border-bottom: none;
        }
        .faqQues{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            text-align: left;
            padding: 20px 0px;
            background-color: transparent;
            cursor: pointer;
            span{
                font-size: 18px;
                font-weight: 600;
                color: #1f2428;
                line-height: 1.4;
            }
        }
        /*===plus / minus drawn in css so it animates cleanly===*/
        .faqIcon{
            position: relative;
            flex-shrink: 0;
            width: 14px;
            height: 14px;
            &::before,
            &::after{
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background-color: #1f2428;
                transition: transform .35s ease, background-color .35s ease;
            }
            &::before{
                width: 14px;
                height: 2px;
            }
            &::after{
                width: 2px;
                height: 14px;
            }
        }
        .faqAns{
            display: none;
            padding: 0 22px 20px;
            p{
                font-size: 15px;
                line-height: 1.55;
                color: #4b5a66;
            }
        }
        &.is-open{
            background-color: #EDF3F8;
            border-bottom-color: transparent;
            padding-bottom: 20px;
            .faqQues{
                padding: 20px 25px;
            }
            .faqIcon{
                &::before{
                    background-color: var(--blue);
                }
                &::after{
                    transform: translate(-50%, -50%) rotate(90deg);
                    background-color: var(--blue);
                    opacity: 0;
                }
            }
        }
    }
}
@media (max-width: 991px){
    .faqCont{
        margin-bottom: 40px;
    }
}
@media (max-width: 767px){
    .faqAccordion .faqItem{
        .faqQues{
            padding: 16px;
        }
        .faqAns{
            padding: 0 16px 16px;
        }
    }
}

/*===two-column variant: used when the table lists our own capabilities
     rather than comparing against a conventional LMI===*/
.compareSec .compareTable.is-twoCol{
    grid-template-columns: 1fr 2.4fr;
    .compareCell{
        &:nth-last-child(-n+3){
            border-bottom: 1px solid #e3eaf2;
        }
        &:nth-last-child(-n+2){
            border-bottom: 0;
        }
    }
}
@media (max-width: 991px){
    .compareSec .compareTable.is-twoCol{
        grid-template-columns: 1fr 1.8fr;
    }
}


/*===content 2 revision (2026-09-24): section intros, platform card copy,
    upgrade points, titled expertise cards===*/
.spyroIntro{
    max-width: 760px;
    margin: 22px auto 0;
    color: #1d2a36;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.2px;
}
.platformSec .spyroIntro{
    margin: -14px auto 44px;
}
.deepDiveSec .spyroIntro{
    margin-top: 0;
}
.platformSec .platformGrid .platformCard{
    .platformDescriptor{
        display: block;
        margin-top: 8px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.6px;
        color: var(--blue);
    }
    .platformDesc{
        margin: 0 30px 22px;
        font-size: 15px;
        line-height: 1.7;
        color: #1d2a36;
    }
    .platformList li strong{
        display: block;
        font-weight: 700;
    }
    .platformBtn{
        margin: -4px 26px 26px;
    }
}
/* side by side, the two cards share row heights (title, image, text, list,
   button) so the feature boxes start on the same line and the buttons align */
@media (min-width: 992px){
    @supports (grid-template-rows: subgrid){
        .platformSec .platformGrid .row{
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .platformSec .platformGrid .row > .col-lg-6{
            display: grid;
            grid-row: span 5;
            grid-template-rows: subgrid;
            width: auto;
        }
        .platformSec .platformGrid .platformCard{
            display: grid;
            grid-row: span 5;
            grid-template-rows: subgrid;
            row-gap: 0;
            height: auto;
            .platformList{
                margin-top: 0;
            }
        }
    }
}
.upgradeSec .expertiseWrap .commitGrid .commitCard{
    .commitTitle{
        display: block;
        margin-bottom: 10px;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.4;
        text-transform: uppercase;
        color: var(--blue);
    }
    .commitText{
        font-size: 15px;
        font-weight: 400;
        line-height: 1.6;
        color: #1d2a36;
    }
}

/*===hero logo - the SpyroKab mark is a long one-line wordmark (8.6:1),
     so the shared 300px logo column that suits SBEPL's 4:1 lockup leaves
     it only 35px tall beside the heading. A wider column on desktop
     brings it up to a readable size; the stacked mobile layout in
     common.css is left alone===*/
@media (min-width: 992px){
    .innerHeroSec .innerHeroCont.hasHeroLogo .innerHeroLogo{
        flex-basis: 420px;
        max-width: 420px;
        /*===optically level with the heading's cap height rather than its
             line box===*/
        margin-top: 14px;
    }
}

/*===traditional LMI vs SpyroKAB - a head-to-head. Each point is one row:
     numeral, icon tile and the point on the left, the traditional LMI's
     answer in a muted middle cell, SpyroKAB's answer with a green tick in
     a blue-tinted cell on the right. Rows lift on hover and the SpyroKAB
     cell deepens, so the eye is led to the right-hand column. Same three
     columns in the header and every row, so the cells line up===*/
.versusSec{
    --vs-cols: 1.45fr 1fr 1.3fr;
    .headingWrap .tagHolder{
        max-width: 100%;
    }
    .spyroIntro{
        margin: -14px auto 40px;
    }
    .vsTable{
        margin-top: 40px;
    }
    .vsHead{
        display: grid;
        grid-template-columns: var(--vs-cols);
        column-gap: 16px;
        margin-bottom: 14px;
        .vsHeadCell{
            padding: 12px 22px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: .3px;
            /*===no text-transform: "LMIs" must keep its lower-case s===*/
            text-align: center;
        }
        .vsHeadConv{
            background-color: #eef3f8;
            color: #4b5a66;
        }
        .vsHeadOurs{
            background-color: var(--blue);
            color: #fff;
        }
    }
    .vsRow{
        display: grid;
        grid-template-columns: var(--vs-cols);
        column-gap: 16px;
        align-items: stretch;
        margin-bottom: 12px;
        transition: transform .45s cubic-bezier(.2,.8,.2,1);
        &:last-child{
            margin-bottom: 0;
        }
    }
    .vsCell{
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 22px;
        border-radius: 16px;
        font-size: 15px;
        line-height: 1.55;
        letter-spacing: .2px;
        transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .vsParam{
        background-color: #fff;
        border: 1px solid #e3eaf2;
        color: #1d2a36;
        .vsNum{
            flex-shrink: 0;
            min-width: 22px;
            font-size: 30px;
            font-weight: 800;
            line-height: 1;
            color: var(--blue);
        }
        .vsIcon{
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background-color: var(--blue);
            color: #fff;
            transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
            i,
            svg{
                font-size: 19px;
                width: 1em;
                height: auto;
                fill: currentColor;
            }
        }
        .vsParamText{
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .3px;
            line-height: 1.35;
        }
    }
    .vsConv{
        background-color: #f6f9fc;
        color: #4b5a66;
        justify-content: center;
        text-align: center;
    }
    .vsOurs{
        background-color: #e8eef8;
        color: #1d2a36;
        font-weight: 600;
        .vsTick{
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background-color: #1fa651;
            color: #fff;
            transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
            i,
            svg{
                font-size: 12px;
                width: 1em;
                height: auto;
                fill: currentColor;
            }
        }
    }
    .vsRow:hover{
        transform: translateY(-4px);
        .vsParam{
            box-shadow: 0 14px 30px rgb(11 51 85 / 10%);
            border-color: #d4dfeb;
            .vsIcon{
                transform: rotate(-6deg) scale(1.06);
                box-shadow: 0 8px 18px rgb(22 103 166 / 30%);
            }
        }
        .vsOurs{
            background-color: var(--blue);
            color: #fff;
            box-shadow: 0 14px 30px rgb(22 103 166 / 25%);
            .vsTick{
                transform: scale(1.15);
                box-shadow: 0 0 0 4px rgb(31 166 81 / 25%);
            }
        }
    }
}
@media (max-width: 991px){
    .versusSec{
        --vs-cols: 1.3fr 1fr 1.2fr;
        .vsHead .vsHeadCell{
            padding: 10px 12px;
            font-size: 12px;
        }
        .vsCell{
            padding: 14px 14px;
            font-size: 14px;
            gap: 10px;
        }
        .vsParam .vsNum{
            font-size: 24px;
        }
        .vsParam .vsIcon{
            width: 40px;
            height: 40px;
        }
    }
}
@media (max-width: 767px){
    /*===stacked: the point spans the row, then the two answers sit side
         by side with their column names as small labels===*/
    .versusSec{
        .vsHead{
            display: none;
        }
        .vsRow{
            grid-template-columns: 1fr 1fr;
            row-gap: 8px;
            column-gap: 8px;
        }
        .vsParam{
            grid-column: 1 / -1;
        }
        .vsConv,
        .vsOurs{
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            text-align: left;
            gap: 8px;
            &::before{
                content: attr(data-label);
                font-size: 11px;
                font-weight: 700;
                letter-spacing: .6px;
                text-transform: uppercase;
                opacity: .7;
            }
        }
        .vsRow:hover{
            transform: none;
        }
    }
}
@media (prefers-reduced-motion: reduce){
    .versusSec{
        .vsRow,
        .vsCell,
        .vsParam .vsIcon,
        .vsOurs .vsTick{
            transition: none;
        }
        .vsRow:hover{
            transform: none;
            .vsParam .vsIcon,
            .vsOurs .vsTick{
                transform: none;
            }
        }
    }
}

/*===crane compatibility - when every point in a deep-dive tab names a crane
     type, the numbered list becomes a row of silhouette tiles (the template
     maps the text to an inline SVG). A tile flips blue on hover and the
     silhouette goes white===*/
.deepDiveSec .deepDiveCont .compatGrid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
    .compatTile{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 22px 12px 18px;
        text-align: center;
        background-color: #fff;
        border: 1px solid #e3eaf2;
        border-radius: 18px;
        transition: transform .45s cubic-bezier(.2,.8,.2,1), background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
    }
    /*===the silhouette is a mask over the tile's text colour, so one PNG
         serves both the blue resting state and the white hover state===*/
    .compatIcon{
        display: block;
        width: 96px;
        height: 64px;
        background-color: currentColor;
        color: var(--blue);
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
        transition: color .4s ease, transform .45s cubic-bezier(.2,.8,.2,1);
    }
    .compatLabel{
        font-size: 12px;
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: #1d2a36;
        transition: color .4s ease;
    }
    .compatTile:hover{
        transform: translateY(-5px);
        background-color: var(--blue);
        border-color: var(--blue);
        box-shadow: 0 14px 30px rgb(22 103 166 / 28%);
        .compatIcon{
            color: #fff;
            transform: scale(1.06);
        }
        .compatLabel{
            color: #fff;
        }
    }
}
@media (max-width: 1199px){
    .deepDiveSec .deepDiveCont .compatGrid{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px){
    .deepDiveSec .deepDiveCont .compatGrid{
        gap: 10px;
        .compatTile{
            padding: 18px 10px 14px;
        }
        .compatIcon{
            width: 78px;
            height: 52px;
        }
    }
}
@media (prefers-reduced-motion: reduce){
    .deepDiveSec .deepDiveCont .compatGrid{
        .compatTile,
        .compatIcon{
            transition: none;
        }
        .compatTile:hover,
        .compatTile:hover .compatIcon{
            transform: none;
        }
    }
}


/*===================================================
    Hero copy (template-parts/spyrokab-intro.php):
    lead paragraph, body paragraphs, and the two
    platform lines as a two-up list
===================================================*/
.innerHeroSec .innerHeroCont .spyroHeroIntro{
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 8px;
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: 0.1px;
    color: #1d2a36;
    text-align: left;
}
/*===the shared paragraph gap in common.css would double the flex gap===*/
.innerHeroSec .spyroHeroIntro p + p{
    margin-top: 0;
}
.spyroHeroIntro .spyroLead{
    margin-bottom: 8px;
    padding-left: 22px;
    border-left: 4px solid #1667A6;
    font-size: 21px;
    line-height: 1.6;
    color: #0b3355;
}
.spyroHeroIntro .spyroPlatformList{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 6px 0 8px;
}
.spyroHeroIntro .spyroPlatformList li{
    padding: 22px 26px;
    background: #fff;
    border: 1px solid #dfe6ee;
    border-left: 4px solid #1667A6;
    border-radius: 16px;
    font-size: 16px;
    line-height: 1.65;
    transition: box-shadow .35s ease, transform .35s ease;
}
.spyroHeroIntro .spyroPlatformList li:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgb(11 51 85 / 10%);
}
.spyroHeroIntro .spyroPlatformList strong{
    display: block;
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #1667A6;
}
@media (max-width: 1199px){
    .spyroHeroIntro .spyroLead{
        font-size: 19px;
    }
}
@media (max-width: 991px){
    .innerHeroSec .innerHeroRow .innerHeroCont .spyroHeroIntro{
        text-align: left;
    }
    .spyroHeroIntro .spyroPlatformList{
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 767px){
    .innerHeroSec .innerHeroCont .spyroHeroIntro{
        font-size: 15px;
    }
    .spyroHeroIntro .spyroLead{
        padding-left: 16px;
        font-size: 17px;
    }
    .spyroHeroIntro .spyroPlatformList li{
        padding: 18px 20px;
    }
}