/* Original SimPass Go artwork, cropped to the plane + brand name only. */
.brand-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: flex-start;
    width: 182px;
    height: 68px;
    overflow: hidden;
}

.brand-logo-image,
.brand-logo img.brand-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* A light version is used automatically whenever the logo sits on a dark surface. */
.dark-surface .brand-logo-image,
[data-theme="dark"] .brand-logo-image,
.site-header.is-dark .brand-logo-image {
    content: url("/images/logo-simpass-go-footer-440.webp");
}

.site-header .brand-logo {
    width: 182px;
    height: 68px;
    position: relative;
    left: 14px;
}

.footer-logo {
    width: 220px;
    height: 82px;
    overflow: hidden;
}

.footer-logo img.brand-logo-image {
    object-fit: cover !important;
    object-position: center top;
    clip-path: inset(0 0 24% 0);
}

.card-brand {
    width: 190px;
    height: 72px;
    align-items: flex-start;
}

.card-brand .brand-logo-image {
    width: 100%;
    height: 100%;
}

.card-brand img.brand-logo-image {
    object-fit: cover !important;
    object-position: center top;
}

.simple-page .brand-logo {
    width: 190px;
    height: 72px;
}

.account-header .brand-logo {
    width: 180px;
    height: 68px;
}

/* Keep labels on the existing dark surfaces readable without changing layout. */
.final-cta .kicker {
    color: #d4fffa;
}

.final-cta h2,
.how h2,
.how h3 {
    color: #fff;
}

.how .how-heading p {
    color: #c1cfdf;
}

.how .steps p {
    color: #c5d1e0;
}

.how .steps li > span {
    color: rgba(255, 255, 255, .44);
}

.compat-callout .kicker {
    color: #b8fff6;
}

footer .footer-brand > p,
footer .footer-grid a,
footer .footer-grid button,
footer .shop-footer-grid small {
    color: #b9c7d8;
}

footer .footer-grid h3 {
    color: #8ff5ed;
}

/* Increase the contrast of small labels used on light backgrounds. */
.search-control input::placeholder,
.search-results > p,
.search-results small,
.destination-card small {
    color: #4c6075;
}

@media (max-width: 760px) {
    .site-header .brand-logo {
        width: 155px;
        height: 58px;
        left: 8px;
    }

    .footer-logo {
        width: 210px;
        height: 78px;
    }

    .simple-page .brand-logo {
        width: 180px;
        height: 68px;
    }
}

@media (max-width: 600px) {
    .card-brand {
        width: 180px;
        height: 68px;
    }

    .account-header .brand-logo {
        width: 150px;
        height: 56px;
    }
}