body.template-sign-in > section.section {
    padding-top: 2.0769230769rem;
}

/* account-software-order: tabs__content is hidden by default but form-pricing
   manages step visibility itself via .step / .step--active */
.form-pricing .tabs__content {
    display: block;
}

/* devices without content: no pointer, no hover highlight */
.gps-trackers a.card:not([href]) {
    cursor: default;
}
.gps-trackers a.card:not([href]):hover {
    border-color: inherit;
    outline: none;
}

/* modal demo tour */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.5rem;
    visibility: hidden;
    -webkit-transition-property: background,visibility,opacity;
    -moz-transition-property: background,visibility,opacity;
    transition-property: background,visibility,opacity;
    -webkit-transition-duration: 250ms;
    -moz-transition-duration: 250ms;
    transition-duration: 250ms;
}
.modal-content {
    width: 100%;
    max-width: 1000px;
    color: white;
    display: block;
    margin: auto;
    box-shadow: 0 0 40px rgba(0,0,0,.24);
}
.modal.is-toggled-visible {
    visibility: visible;
    opacity: 1;
    background: rgba(0,0,0,.5);
}
/* anonymous div is the flex child inside .modal — must fill viewport width */
.modal > div {
    width: 100%;
}

/* modal-wrap has height:100vh in style.css which fills the flex container */
.modal-wrap {
    height: auto;
    padding-top: 28px;
    width: 100%;
}

/* SIM countries / why-choose modal */
.modal-why-choose,
.modal-why-choose.modal-content {
    background-color: #F6F6F6;
    color: #30313D;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.modal-why-choose .headline-big {
    background-color: #F6F6F6;
    font-family: "SF Pro Display";
    font-size: 1.3846153846rem;
    font-weight: 700;
    color: #30313D;
    padding: 1.5rem 2rem;
    margin: 0;
    text-align: center;
}
.model_container {
    background-color: white;
    padding: 1.5rem 2rem 2rem;
    margin: 0;
}

/* Subscribe / speak-with-expert popup: the full-width .modal-content wrapper
   must be transparent with no shadow. The shadow belongs on the inner .form
   card. Without this, box-shadow on a transparent wrapper renders as a dark
   halo "background" (the original GP-311 bug). */
.modal-support-sales.modal-content {
    box-shadow: none;
    color: #30313D;
}
.modal-support-sales .form {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0, 0, 0, .24);
    max-width: 520px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    position: relative;
}

.close_modal_custom{
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: #ccc;
    top: .5rem;
    right: 1.5rem;
    padding: 6px;
    margin: 0;
    position: absolute;
    cursor: pointer;
    z-index: 1;
    border-radius: 50%;
    transition: box-shadow 200ms ease;
}
.close_modal_custom:hover {
    box-shadow: 0 0 0 1px #C5CAD3;
}
.col-md-7 {
    width: 58.33333%;
}
.col-md-5 {
    width: 41.66667%;
}

/* global section */
.section--global .global-block__text a {
    font-size: 1.3846153846rem;
    color: #fff;
}

.form-pricing__apps .item-info-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2307692308rem;
    grid-column: 1/-1;
}

.final_step_order_final_price .form-pricing__price{
    flex-direction: row;
}

.form-pricing .card{
    overflow: visible;
}

#modal-trial .trial-form{
    text-align: left !important;
}

#modal-trial .review__list-item--video .review__content, #modal-demo-tour .review__list-item--video .review__content{
    width: 50% !important;
}

#modal-trial .review__list-item--video .review__content iframe, #modal-demo-tour .review__list-item--video .review__content iframe{
    width: 100% !important;
    height: 100% !important;
}

#modal-trial .review__side, #modal-demo-tour .review__side{
    width: 45%;
}

.review.review--carousel .review__list-item--video .review__side-title {
    font-weight: 500;
    font-size: 23px;
}

.review.review--carousel .review__list-item--video .review__side-subtitle {
    font-size: 15px;
}

.review.review--carousel .review__list-item--video .review__side-img img {
    height: 54px;
    width: auto;
}

.review.review--carousel .review__list-item--video .review__side {
    padding-top: 15px;
}

.review.review--carousel .review__list-item--video .review__side-text {
    margin-bottom: 28px;
}

.review.review--carousel .review__list-item--video .review__side-container {
    margin-bottom: 15px;
}

/* user manual */
.manual h1.h2
{
	font-size: 2.9230769231rem;
  	font-weight: 700;
	 line-height: 3.3846153846rem;
  	color: #30313D;
	font-family: "SF Pro Display";
}
.manual h1 strong {
	font-size: 1.9230769231rem;
  	font-weight: 500;
}

.manual h2 {
	font-size: 18px;
  	font-weight: 600;
}

.manual p, .manual ul li, .manual ol li, .manual a{
	font-size: 1.0769230769rem;
    line-height: 24px;
    color: #000;
}

.manual h2 strong {
	font-size: 1.5230769231rem;
  	font-weight: 500;
}

.manual .accordion .accordion__body .accordion__body-item{
    font-size: 1rem;
    color: #000;
}

.manual .accordion .accordion__body .accordion__body-item.active{
    color: #fff;
}

.manual .manual__content p, .manual .manual__content ul li, .manual .manual__content ol li, .manual .manual__content a{
    font-size: 1rem;
    color: #000;
}

.software__image video{
    left: 11.3rem !important;
}

.footer-blocks__item-text .paragraph a{
    text-decoration: underline;
}

.trial__left .trial__carousel-slide img{
    object-fit: contain !important;
}

.trial__right ul li a, .shop-item-bottom .features .paragraph a{
    color: #0AA5CA !important;
    text-decoration: underline !important;
}

/* Video wrapper: rounded corners, clip content to match */
.review__video-wrap {
    max-width: 41.5384615385rem;
    border-radius: 1.8461538462rem;
    overflow: hidden;
    height: 100%;
}
.review__video-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;;
    aspect-ratio: 16 / 9;
    border-radius: 1.8461538462rem;
    vertical-align: top;
}

/* Order landing / headless header: do not stick the header wrapper */
.header-wrapper--headless {
    position: static !important;
}

.awards-container{
    height: 52px!important;
}

.header__logo .logo-icon{
    display: none;
}

.error_msg{
    text-align: center;    
    color: red;
}

.form-pricing__bubble{
    background: #fff;
    color: #0AA5CA;
}

.review__side-text{
    font-size: 16px!important;
    font-weight:400;
    letter-spacing: -0.2px;
}

.template-gps-trackers-shop .section.trackers-tabs {
    padding: 2rem 1.5rem !important;
}

.template-gps-trackers-shop .tabs__nav-item {
    white-space: nowrap;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.template-gps-trackers-shop .tabs__nav {
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 0.9230769231rem 0.9230769231rem 0 0;
}

.template-gps-trackers-shop .tabs__content {
    display: block;
    background: #fff;
    border-radius: 0 0 0.9230769231rem 0.9230769231rem;
    padding: 2rem;
}
.template-gps-trackers-shop .tabs__content .step {
    display: none;
}
.template-gps-trackers-shop .tabs__content .step.step--active {
    display: block;
}

@media only screen and (max-width: 991px) {
    .template-gps-trackers-shop .tabs__content .step .features {
        flex-direction: column;
    }
    .template-gps-trackers-shop .tabs__content .step .features .features__img,
    .template-gps-trackers-shop .tabs__content .step .features .features__list {
        width: 100% !important;
    }
    .template-gps-trackers-shop .tabs__nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .template-gps-trackers-shop .tabs__nav .tabs__nav-item {
        border-radius: 0 !important;
        border-left: 1px solid #DDE3E8;
        border-top: 1px solid #DDE3E8;
        height: auto;
        min-height: 3.2307692308rem;
        flex-grow: 1;
        white-space: normal;
        overflow: visible;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        font-size: 0.923rem;
    }
    .template-gps-trackers-shop .section.trackers-tabs {
        padding: 1.5rem 1rem !important;
    }
    .template-gps-trackers-shop .tabs__content {
        padding: 1.2rem;
    }
}

@media only screen and (max-width: 575px) {
    .template-gps-trackers-shop .tabs__nav {
        grid-template-columns: repeat(2, 1fr);
    }
    .template-gps-trackers-shop .section.trackers-tabs {
        padding: 1rem 0.8rem !important;
    }
    .template-gps-trackers-shop .tabs__content {
        padding: 0.8rem;
    }
}

#tab-125 img{
    max-height: 400px;
}

.menu-pricing--apps > a:nth-of-type(3) .menu-pricing__img{
    bottom: 1rem;
}
.menu-pricing .card .menu-pricing__img img {
    max-width: 13.8461538462rem;
    max-height: 12.3076923077rem;
    width: auto;
    height: auto;
}

.form-pricing .tabs__nav-item .form-pricing__number{
    color: #AAB3C0!important;
}


.form-pricing .tabs__nav-item.active .form-pricing__number{
    color: #0AA5CA!important;
}

.form-pricing__discount{
    color: #0AA5CA!important;
}
.form-pricing__price strong{
    font-weight: 600!important;
    /* font-family: "SF Pro Display"!important; */
}

.form-pricing__title{
    font-weight: 500!important;
}

.form-pricing__before{
    font-weight: 300;
}

/* Only the trailing label span (e.g. "One-time payment"), not spans inside <p> */
.form-pricing__price > span:last-of-type {
    font-weight: 300!important;
}

.form-pricing__bubble{
    color: #0AA5CA!important;
    background:#fff!important;
}

.form-pricing__bubble::before{
    content: none;
}

/* Hide native checkbox on item-choose cards — clicks pass through to the card
   which has a JS click handler (avoids double-toggle state mismatch). */
.form-pricing .item-choose .form-check{
    position: relative;
    cursor: pointer;
}
.form-pricing .item-choose .form-check input[type="checkbox"]{
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    padding: 0!important;
    opacity: 0!important;
    cursor: pointer!important;
    appearance: none!important;
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    pointer-events: none!important;
}

/* For standalone checkboxes (I agree, VIP support) that have no card wrapper,
   keep the transparent input clickable and overlaying the icon. */
.form-check:not(.item-choose .form-check) input[type="checkbox"]{
    appearance: none!important;
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
}

/* Fix broken icon path for small checkboxes (I agree, VIP support) */
.form-check--small .checkbox-icon:after{
    content: url("../images/icons/check-white-small.svg")!important;
}

.form-pricing__subtitle{
    color: #6B7485!important;
}

.footer-privacy__item .separator{
    margin-top: 0!important;
}

.text-content h5:first-of-type{
    margin-top: 0!important;
}

.form-pricing__line .qty-picker{
    margin-bottom: 8px!important;
}

/* .form-pricing__line .form-pricing__price {
    flex-shrink: 0; 
}
.form-pricing__line-text {
    flex: 1;
    min-width: 0; 
} */
@media only screen and (max-width: 1439px) {    
    .item-choose-list .item-choose:first-of-type .form-pricing__pop {
        left: 245px;
    }    
    .item-choose-list .item-choose:last-of-type .form-pricing__pop {
        left: 0px!important;
    }

    .header__logo .logo{
        display: none;
    }

    .header__logo .logo-icon{
        display: flex;
    }

    .header__logo{
        width: 6.0769230769rem;
    }

    .header__submenu--pricing-softwares{
        left: -7.6923076923rem;
    }

    .header__submenu--trackers{
        left: -40.0769230769rem!important;
    }
    
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #tab_payment_1_tab .form-pricing__price{
        position: relative!important;

        & > span{
            position: absolute!important;
            top: 50px;
        }
    }
}

@media only screen and (max-width: 1199px) {

    .platform-block__video{
        max-width: 20.923rem!important;
        max-height: 15rem!important;
        iframe{
            width: 100%!important;
            height: 100%!important;
        }
    }

    .header__logo .logo{
        display: flex;
    }

    .header__logo .logo-icon{
        display: none;
    }

    .header__logo{
        width: 12.0769230769rem;
    }

    .pricing__list--section{
        margin-top: 2.7692307692rem!important;
    }

    .blog{
        padding-top: 4.7692307692rem!important;
    }



    .header__navigation-item-container{
        height: 100%;
    }

    .form__carousel{
        max-width: 100%!important;
    }
}

@media only screen and (max-width: 991px) {
    .review.review--carousel .review__list-item--video .review__side{
        width: 100%!important;
    }

    #modal-trial .review__list-item--video .review__content, #modal-demo-tour .review__list-item--video .review__content{
        width: 100%!important;
        height: 400px;
    }

    .review__list-item{
        min-width: unset!important;
    }
    
    .review__content-video{
        max-width: 100%!important;
    }    

    #tab_payment_1_tab .form-pricing__price span.form-pricing__before{
        top: 0 !important;
    }

    .item-choose-list .item-choose:first-of-type .form-pricing__pop, .item-choose-list .item-choose:nth-of-type(3) .form-pricing__pop {
        left: 245px;
    }
    .item-choose-list .item-choose:last-of-type .form-pricing__pop, .item-choose-list .item-choose:nth-of-type(2) .form-pricing__pop { 
        left: 86px!important;
    }

    .platform-block__video{
        max-width: 36.9230769231rem!important;
        max-height: 23.8461538462rem!important;
        iframe{
            width: 36.9230769231rem!important;
            height: 23.8461538462rem!important;
        }
    }

    .shop-item-bottom .section--carousel{
        padding-top: 0!important;
    }

    .customer-reviews__row{
        padding-bottom: 0!important;
    }

    .ip__container{
        margin-top: 2.7692307692rem!important;
    }

    .blog{
        padding-top: 2.7692307692rem!important;
    }


    .customer-reviews.customer-reviews--grid{
        margin-top: 4.2307692308rem!important;
    }
    
    .review__content-video{
        height: 450px;
    }

    .review__content-video iframe{
        width: 100%!important;    
        height: 450px;
    }

}

@media only screen and (max-width: 769px) {
    .modal {
        padding-top: 0;
        align-items: flex-start;
    }
    .modal-wrap {
        padding-top: 0;
        width: 100%;
    }
    .close_modal_custom {
        top: 0.8rem !important;
        right: 0.8rem !important;
    }
}

@media only screen and (max-width: 767px) {
    .modal-content {
        padding-top: 0;
    }

    #tab_payment_1_tab .form-pricing__price p{
        position: absolute;     
        
        & > .form-pricing__before{
            top: 0% !important;
        }
        
        & > .form-pricing__before::before{
            top: 49%;
        }
    }

    .item-choose-list .item-choose:last-of-type .form-pricing__pop, .item-choose-list .item-choose:nth-of-type(2) .form-pricing__pop {
        left: -10px!important;
    }

    .platform-block__video{
        max-width: 400px!important;
        max-height: 250px!important;
        iframe{
            width: 400px!important;
            height: 250px!important;
        }
    }

    .shop-item-bottom .section--carousel{
        padding-top: 0!important;
    }


    .customer-reviews.customer-reviews--grid .customer-reviews__container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0 0.9230769231rem 4.3076923077rem;
    }

    .customer-reviews .card:first-of-type{
        margin-left: 0!important;
    }
    
}

@media only screen and (max-width: 575px) {
    .form-pricing__pop,
    .item-choose-list .item-choose .form-pricing__pop,
    .item-choose-list .item-choose:nth-of-type(2) .form-pricing__pop,
    .item-choose-list .item-choose:nth-of-type(4) .form-pricing__pop,
    #tab_payment_2_tab .form-pricing__pop{
        position: fixed!important;
        left: 1rem!important;
        right: 1rem!important;
        top: 50%!important;
        bottom: auto!important;
        transform: translateY(-50%)!important;
        width: auto!important;
        max-width: calc(100vw - 2rem)!important;
        overflow: hidden!important;
        z-index: 1000;
    }

    .form-pricing__pop-img{
        display: none!important;
    }

    .tooltip__container{
        position: fixed!important;
        left: 1rem!important;
        right: 1rem!important;
        top: 50%!important;
        bottom: auto!important;
        transform: translateY(-50%)!important;
        width: auto!important;
        max-width: calc(100vw - 2rem)!important;
    }

    #tab_payment_3_tab {
        h4{
            margin-bottom: 1rem!important;
        }

        .form-pricing__text{
            margin-bottom: 1rem!important;
        }
    }

    .platform-block__video{
        max-width: 100%!important;
        max-height: 200px!important;
        iframe{
            width: 100%!important;
            height: 100%!important;
        }
    }

    .section--review-carousel{
        padding-top: 2.0769230769rem;
    }

    .review.review--carousel{
        margin-top: 20px;
    }

    .review__content-video{
        max-width: 350px!important;
        height: 200px!important;
        iframe{
            width: 350px!important;
            height: 200px!important;
        }
    }

    .header__logo .logo{
        height: 100%!important;
    }

    .header--headless .awards-container{
        margin-left: auto;
    }

    .section.start-business-cta{
        padding-top: 2.0769230769rem;
        padding-bottom: 2.0769230769rem;
    }

    .section.compatible-trackers{
        padding-bottom: 2.5769230769rem;
    }

    .breadcrumbs{
        padding-left: 0.9230769231rem;
    }

    .breadcrumbs__container{
        padding-left: 0!important;
    }

    .software__awards, .awards-container{
        margin: auto;
        margin-top: 1.5769230769rem;
        max-width: 80%;
        width: auto!important;        
    }

    .awards-container{
        height: 3.5769230769rem!important;        
    }


    .trial__carousel .trial__carousel-slide{
        height: 15.3076923077rem;
    }

    .review__companies{
        gap: 1.0923076923rem;
        margin-left: 5px;
    }

    .customer-reviews{
        margin-top: 2.2307692308rem;
    }
    
    .shop-item-bottom .section--carousel{
        padding-top: 0!important;
    }

    .section-heading{
        padding-left: 0.9230769231rem!important;
        padding-right: 0.9230769231rem!important;
    }

    .features__list--large .features__list-item > img{
        width: 20.6153846154rem;
    }

    .section{
        padding-top: 2.9230769231rem;
        padding-bottom: 2.9230769231rem;
    }

    .template-mobile-apps .card-list .card{
        padding: 2.4615384615rem!important
    }

    .template-mobile-apps .card-list{
        margin-top: 2rem!important;
    }


    footer .footer-blocks__item{
        width: 100%!important;
    }

    .breadcrumbs__container {
        height: auto;          /* let height grow */
        flex-wrap: wrap;       /* allow items to wrap to next line */
        row-gap: 0.3rem;   
    }
    .breadcrumbs__container.ellipsis {
        white-space: normal;   /* allow wrapping */
        overflow: visible;
        text-overflow: unset;
    }

    .review__companies-item{
        width: 8rem!important;
    }

    .customer-reviews.customer-reviews--grid .customer-reviews__container{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .review__list-item{
        min-width: unset!important;
    }

    #modal-trial .review__list-item--video .review__content, #modal-demo-tour .review__list-item--video .review__content{    
        height: 100%;
    }
}

/* sections/video.html — card + two embeds side by side */
.video-section__card {
    box-sizing: border-box;
    max-width: 100rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.video-section__title {
    text-align: center;
    margin-bottom: 3.8461538462rem;
}
.video-section__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5384615385rem;
    align-items: start;
    width: 100%;
}

.video-section__col {
    min-width: 0;
    iframe{
        border-radius: 0.9230769231rem;
    }    
}
@media only screen and (max-width: 767px) {
    .video-section__row {
        grid-template-columns: 1fr;
    }
}

/* Override old-theme .arrow rule (background:#1b99bd; color:#fff) that leaks
   into gpswox_new's header "My Account" span via web.min.css. Without this,
   the span inherits white text on white background and becomes invisible. */
.header__buttons-login .arrow,
.header__submenu-back .arrow {
    background: transparent !important;
    color: inherit !important;
    position: static !important;
}
.header__buttons-login .arrow:after,
.header__submenu-back .arrow:after {
    content: none !important;
    border: none !important;
}

/* web.min.css sets .logo { display:block; margin-top:1.49rem } which pushes
   the header logo down on legacy-CSS pages (shop items, blog posts, etc.).
   Higher specificity (.header__logo .logo vs .logo) plus !important for the
   margin-top since web.min.css loads after fixes.css. */
.header__logo .logo {
    margin-top: 0 !important;
    padding-top: 0 !important;
    float: none;
}

/* web.min.css loads after fixes.css on legacy pages, overriding same-specificity
   .btn and a rules. Scoping to .header gives higher specificity so we win back
   the new-theme header appearance without needing !important. */
.header a {
    text-decoration: none;
}
.header .btn {
    background-color: #00A859;
    border: 2px solid #00A859;
    border-radius: 3.6923076923rem;
    font-size: 1.2307692308rem;
    line-height: 1.5384615385rem;
    padding: 0.7692307692rem 2.4615384615rem;
    font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;
    box-shadow: none;
    margin-right: 0;
    color: #fff;
}
.header .btn:hover {
    background-color: #00AD5C;
}
.header .btn--transparent {
    background-color: transparent;
    color: #00A859;
    border: 2px solid #00A859;
}
.header .btn--transparent:hover {
    background-color: #fff;
    color: #00AD5C;
    border-color: #00AD5C;
}

/* ── Shop item detail page layout ───────────────────────────────────────────
   view.php uses old-theme classes for the image+buy-card two-column layout.
   web.min.css is NOT loaded on these pages (it conflicts with gpswox_new),
   so we provide just the layout rules needed here. */
.item-top-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
}
.item-top-wrap .image-previewer {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 20px;
    box-sizing: border-box;
}
.item-top-wrap .item-info {
    flex: 1 1 0;
    min-width: 0;
}
.item-top-wrap .item-info .item-info-wrap {
    width: 100%;
}
.with-main-padding {
    padding-left: 3rem;
    padding-right: 3rem;
}
/* GP-312: full-bleed <section> blocks inside .shop-item-bottom.with-main-padding
   need to break out of the 3rem horizontal padding so colored bands
   (section--hawk-blue, section--banner, etc.) render edge-to-edge.
   Scoped to .shop-item-bottom; other uses of .with-main-padding are untouched. */
.shop-item-bottom > .section,
.shop-item-bottom .tabs-section > .section,
.shop-item-bottom .tabs-section > * > .section {
    margin-left: -3rem;
    margin-right: -3rem;
}
.with-clear::after {
    content: "";
    display: table;
    clear: both;
}
/* 3-column Bootstrap-style grid used for award icons in view.php */
.col-xs-4 {
    width: 33.3333%;
    float: left;
    box-sizing: border-box;
    padding: 0 8px;
}
.row::after {
    content: "";
    display: table;
    clear: both;
}
@media (max-width: 767px) {
    .item-top-wrap .image-previewer,
    .item-top-wrap .item-info {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .with-main-padding {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .shop-item-bottom > .section,
    .shop-item-bottom .tabs-section > .section,
    .shop-item-bottom .tabs-section > * > .section {
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

/* 404 error page */
.section--404 {
    min-height: 60vh;
    display: flex;
    align-items: center;
}
.section__container--404 {
    align-items: center;
}
.error-404 {
    text-align: center;
    max-width: 520px;
    width: 100%;
    padding: 4rem 1rem;
}
.error-404__code {
    display: block;
    font-family: "SF Pro Display";
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
    color: #0AA5CA;
    margin-bottom: 1rem;
}
.error-404__title {
    margin-bottom: 1rem;
    text-align: center !important;
}
.error-404__text {
    margin-bottom: 2rem;
    color: #6b7280;
    text-align: center !important;
}

@media (max-width: 600px) {
    .error-404__code {
        font-size: 4.5rem;
    }
    .error-404 {
        padding: 2.5rem 1rem;
    }
}

/* ─── Changelog detail page ─────────────────────────────────────────────── */

.changelog-entry .section__container {
    max-width: 760px;
    margin-top: 40px;
    margin-bottom: 56px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    padding: 40px 48px;
}

/* Version heading */
.changelog-entry h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef0f4;
}

/* Section name paragraphs (plain text, no <strong> child) */
.changelog-entry .section__container p:not(:has(strong)) {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 20px;
    margin-bottom: 6px;
}

/* Content item paragraphs */
.changelog-entry .section__container p:has(strong) {
    font-size: 14px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 2px;
}

/* Bold labels inside content items */
.changelog-entry .section__container p strong {
    color: #1a1a2e;
}

/* Sub-version divider (h2) */
.changelog-entry .section__container h2 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 32px;
    margin-bottom: 16px;
    padding-top: 24px;
    border-top: 1px solid #eef0f4;
}

.changelog-entry .section__container h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Section label (h3) */
.changelog-entry .section__container h3 {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 20px;
    margin-bottom: 6px;
}

/* List items */
.changelog-entry .section__container ul {
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0;
}

.changelog-entry .section__container ul li {
    font-size: 14px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 2px;
}

.changelog-entry .section__container ul li strong {
    color: #1a1a2e;
}

/* GP-244: restore .services grid CSS (missing from compiled style.css after services SCSS import was removed) */
.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.services--software { grid-template-columns: repeat(3, 1fr); }
.services__item {
  padding: 20px 24px 24px;
  border-radius: 32px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 10px 0 #0000000D, 0 10px 25px 0 #3C42570D;
  align-items: center;
  cursor: pointer;
  border: 1px solid transparent;
}
.services__item:hover { border-color: #0AA5CA; outline: 1px solid #0AA5CA; }
.services__image { width: 250px; height: 200px; display: flex; align-items: center; justify-content: center; }
.services__image img { max-width: 100%; height: auto; }
.services__title { font-size: 22px; line-height: 26px; margin: 5px 0; font-weight: 700; color: #30313D; text-align: center; }
.services__text { color: #6A7383; font-size: 16px; line-height: 24px; max-width: 260px; text-align: center; font-weight: 400; }
.services__features { width: 100%; padding: 22px 0; border-top: 1px solid #DDE3E8; margin-top: 20px; }
.services__footer { width: 100%; display: flex; flex-direction: column; padding-top: 20px; border-top: 1px solid #DDE3E8; }
.services__footer .btn { width: 100%; margin-top: 20px; }
.services__footer-text { font-weight: 600; font-size: 22px; line-height: 26px; text-align: center; color: #30313D; }
.services__footer-subtext { font-weight: 600; font-size: 14px; line-height: 20px; text-align: center; color: #0AA5CA; }
@media only screen and (max-width: 1200px) { .services--software { grid-template-columns: 1fr; } }
@media only screen and (max-width: 900px) { .services { grid-template-columns: 1fr; } }

/* GP-244: readable text in mobile-apps content card */
.mobile-apps-text {
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
.mobile-apps-text p {
  font-size: 1.3846153846rem;
  line-height: 2.3076923077rem;
  margin-bottom: 1.2307692308rem;
}
.mobile-apps-text a {
  font-size: inherit;
  line-height: inherit;
  color: #1795C1;
  text-decoration: underline;
}

/* GP-246: reduce excessive vertical padding on blog category listings */
.blog {
  padding: 2.4615384615rem 0 !important;
}

/* GP-245: widen telematics-elevates blog article */
.blog-article {
  max-width: 107.6923076923rem;
  margin: 0 auto;
  padding: 4.9230769231rem 4.3076923077rem;
  width: 100%;
}
.blog-article .section {
  display: block !important;
  padding: 0 !important;
  background-color: transparent !important;
  overflow: visible !important;
  align-items: initial !important;
  justify-content: initial !important;
}
.blog-article h1,
.blog-article h2,
.blog-article h3,
.blog-article h4 {
  margin: 1.8461538462rem 0 0.9230769231rem;
}
.blog-article p {
  font-size: 1.3846153846rem;
  line-height: 2.3076923077rem;
  margin-bottom: 1.2307692308rem;
}
.blog-article ul,
.blog-article ol {
  margin-left: 1.5384615385rem;
  margin-bottom: 1.2307692308rem;
  list-style: disc;
  font-size: 1.3846153846rem;
}
.blog-article ol {
  list-style: decimal;
}
.blog-article ul li,
.blog-article ol li {
  margin-bottom: 0.6153846154rem;
  line-height: 2.3076923077rem;
}
.blog-article img {
  max-width: 100%;
  border-radius: 1.2307692308rem;
  margin: 1.8461538462rem 0;
  display: block;
}
@media only screen and (max-width: 1200px) {
  .blog-article { padding: 3.6923076923rem 1.5384615385rem; }
}
@media only screen and (max-width: 600px) {
  .blog-article { padding: 2.4615384615rem 0.9230769231rem; }
}

.form.form--success {
    text-align: center;
}
.form.form--success .h3 {
    padding-right: 0;
    text-align: center;
}
.form.form--success .form__text,
.form.form--success .form__text p,
.form.form--success .form__text strong {
    color: #30313D;
    font-weight: 400;
    font-size: 1.0769230769rem; /* 14px */
    line-height: 1.8461538462rem; /* 24px */
}

/* GP-284: Cookie consent banner must appear above all checkout content.
   The pay button gets z-index:9999 via JS and tabs__nav has position:relative —
   raise the banner above both so it is never obscured. */
.eupopup-container {
    z-index: 10000 !important;
}

/* GP-284: Left-align "I agree" checkbox in the Account Information card.
   .form-pricing .form-check sets margin: auto (centers inline-flex element);
   width: 100% + margin overrides make it stretch to left edge. */
.form-pricing__checkout .final_step_email .form-check {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* GP-325: gpswox icon font — the _icons.scss @import is not inlined by the
   SCSS compiler, so icon-star and the font-face are absent from style.css. */
@font-face {
    font-family: 'gpswox';
    src: url('../icons/font/gpswox.eot?46151466');
    src: url('../icons/font/gpswox.eot?46151466#iefix') format('embedded-opentype'),
         url('../icons/font/gpswox.woff2?46151466') format('woff2'),
         url('../icons/font/gpswox.woff?46151466') format('woff'),
         url('../icons/font/gpswox.ttf?46151466') format('truetype'),
         url('../icons/font/gpswox.svg?46151466#gpswox') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: "gpswox";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-star:before   { content: '\e800'; }
.icon-arrow-right:before { content: '\e801'; }

/* GP-325: Hide the pre-rendered empty error div on initial page load. */
.error_msg:empty { display: none; }

/* GP-325: Star-rating interactive states — style.css uses <star-rating> tag
   selectors but the DOM uses <div class="star-rating">, so replicate rules
   with the correct class selector. */
.star-rating { align-self: baseline; }
.star-rating .icon { cursor: pointer; font-size: 1.6923076923rem; }
/* Target :before directly (specificity 0,2,1) so it beats the old theme's
   .icon-star:before { content:""; color:#d9d8d8 } rule (specificity 0,1,1)
   that clears the glyph and sets its own color. */
.star-rating .icon:before { font-family: "gpswox"; content: '\e800'; color: #dde3e8; }

.star-rating[data-rating="1"]:hover .icon:nth-child(-n+1):before { color: #fbc230; }
.star-rating[data-rating="1"]:hover .icon[data-rating="1"]:before { transform: scale(1.1); }
.star-rating:not(:hover)[data-selected-rating="1"] .icon:nth-child(-n+1):before { color: #fbc230; }

.star-rating[data-rating="2"]:hover .icon:nth-child(-n+2):before { color: #fbc230; }
.star-rating[data-rating="2"]:hover .icon[data-rating="2"]:before { transform: scale(1.1); }
.star-rating:not(:hover)[data-selected-rating="2"] .icon:nth-child(-n+2):before { color: #fbc230; }

.star-rating[data-rating="3"]:hover .icon:nth-child(-n+3):before { color: #fbc230; }
.star-rating[data-rating="3"]:hover .icon[data-rating="3"]:before { transform: scale(1.1); }
.star-rating:not(:hover)[data-selected-rating="3"] .icon:nth-child(-n+3):before { color: #fbc230; }

.star-rating[data-rating="4"]:hover .icon:nth-child(-n+4):before { color: #fbc230; }
.star-rating[data-rating="4"]:hover .icon[data-rating="4"]:before { transform: scale(1.1); }
.star-rating:not(:hover)[data-selected-rating="4"] .icon:nth-child(-n+4):before { color: #fbc230; }

.star-rating[data-rating="5"]:hover .icon:nth-child(-n+5):before { color: #fbc230; }
.star-rating[data-rating="5"]:hover .icon[data-rating="5"]:before { transform: scale(1.1); }
.star-rating:not(:hover)[data-selected-rating="5"] .icon:nth-child(-n+5):before { color: #fbc230; }

/* GP-325: Reviews form — center the card heading and the reCAPTCHA. */
.section--form .form > .h3 { text-align: center; }
.section--form .form #review-captcha {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 1rem;
}

/* GP-325: The design system's invalid-state rule only targets .form-control,
   but the reviews textarea is a bare <textarea> with no class. Extend the
   red-border to textareas (and selects) inside an invalid form-group. */
.form-group--invalid textarea,
.form-group--invalid select {
    border-color: #df1b41 !important;
}

/* GP-325: Reviews form top error banner — design pattern is a banner with a
   warning triangle icon and a list of every specific validation error.
   Icon stays at the top-left; messages stack vertically next to it.
   Overrides the old theme's web.min.css rule that forced text-align:center
   and line-height:0.5rem on .error_msg. */
.section--form .error_msg {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    text-align: left !important;
    line-height: 1.5 !important;
    color: #df1b41 !important;
    font-weight: 500;
    margin-bottom: 1rem;
}
.section--form .error_msg::before {
    content: '';
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem; /* visually align with first line of text */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23df1b41'><path d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* GP-325: Reviews form success state — rendered by JS as a centered card
   with a green check icon, title, and subtitle after a successful submit.
   Replaces the bare red 'success_text' default from the old theme's
   web.min.css that was making the post-submit screen look unfinished. */
.section--form .success_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #30313d !important;
    font-weight: 500;
    padding: 2rem 1rem;
    gap: 0.75rem;
}
.section--form .success_text::before {
    content: '';
    width: 3.5rem;
    height: 3.5rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232eaf61'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.section--form .success_text__title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #2eaf61;
}
.section--form .success_text__subtitle {
    font-size: 1.0769230769rem;
    line-height: 1.5;
    color: #4c4e61;
    max-width: 24rem;
}

/* GP-325: Customer review cards — render stars based on the row's
   `rating` field instead of the hardcoded stars.svg image. Default to
   gold (#fbc230) so empty/missing ratings still show 5; rating="N"
   dims the (5 - N) trailing stars to gray (#dde3e8). Targets :before
   directly to win over the old theme's .icon-star:before color rule. */
.customer-reviews__rating {
    display: inline-flex;
    gap: 0.15rem;
    margin: 0.5rem 0;
}
.customer-reviews__rating .icon { font-size: 1.15rem; }
.customer-reviews__rating .icon:before {
    font-family: "gpswox";
    content: '\e800';
    color: #fbc230;
}
.customer-reviews__rating[data-rating="0"] .icon:before { color: #dde3e8; }
.customer-reviews__rating[data-rating="1"] .icon:nth-child(n+2):before { color: #dde3e8; }
.customer-reviews__rating[data-rating="2"] .icon:nth-child(n+3):before { color: #dde3e8; }
.customer-reviews__rating[data-rating="3"] .icon:nth-child(n+4):before { color: #dde3e8; }
.customer-reviews__rating[data-rating="4"] .icon:nth-child(n+5):before { color: #dde3e8; }