/* Standalone Mileage Tracker landing page. */
.mileage-tracker-hero {
    background:
        radial-gradient(circle at 88% 14%, rgba(115, 244, 201, .30), transparent 29%),
        radial-gradient(circle at 9% 86%, rgba(73, 152, 255, .30), transparent 34%),
        linear-gradient(135deg, #071b34 0%, #0d4670 54%, #157f79 100%);
    overflow: hidden;
}

.mileage-tracker-hero__eyebrow {
    align-items: center;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    color: #e9fffb;
    display: inline-flex;
    font-size: .86rem;
    font-weight: 750;
    gap: .45rem;
    letter-spacing: .02em;
    margin-bottom: 1rem;
    max-width: 100%;
    padding: .5rem .85rem;
}

.mileage-tracker-hero .download-btn,
.mileage-tracker-cta .download-btn {
    background: #f2fff9;
    box-shadow: 0 10px 28px rgba(1, 13, 32, .28);
    color: #075046;
    font-weight: 800;
}

.mileage-tracker-hero .download-btn:hover,
.mileage-tracker-cta .download-btn:hover {
    background: #d8fff0;
    color: #053d36;
}

.mileage-tracker-hero__note {
    color: rgba(255, 255, 255, .82);
    font-size: .93rem;
    margin-top: 1rem;
}

.mileage-tracker-hero__media {
    align-items: center;
    display: flex;
    justify-content: center;
}

.mileage-tracker-hero__shot {
    border: 1px solid rgba(236, 255, 250, .48);
    border-radius: 22px;
    box-shadow: 0 20px 46px rgba(0, 11, 26, .38);
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: clamp(390px, 48vw, 620px);
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.mileage-tracker-benefits__intro {
    max-width: 760px;
}

/* These sections sit inside <main>, so give their outer page edges the same
 * responsive rhythm as the shared direct-child page sections. */
.mileage-tracker-benefits {
    padding-top: var(--driver-section-space);
}

.mileage-tracker-section-label {
    color: #087d6d;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: .7rem;
    text-transform: uppercase;
}

.mileage-tracker-benefit {
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(19, 77, 82, .15);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(20, 42, 40, .08);
    padding: 1.6rem;
}

.mileage-tracker-benefit__icon {
    align-items: center;
    background: linear-gradient(135deg, #0c987f, #2bb1c1);
    border-radius: 13px;
    color: #fff;
    display: inline-flex;
    font-size: 1.25rem;
    height: 2.7rem;
    justify-content: center;
    margin-bottom: 1.1rem;
    width: 2.7rem;
}

.mileage-tracker-benefit p {
    color: #536264;
    line-height: 1.6;
}

.mileage-tracker-cta__inner {
    max-width: 760px;
}

.mileage-tracker-cta {
    padding-bottom: var(--driver-section-space);
}

.mileage-tracker-cta__icon {
    color: #0b8e79;
    display: block;
    font-size: 2.65rem;
    margin-bottom: .8rem;
}

@media (max-width: 991.98px) {
    .mileage-tracker-hero {
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .mileage-tracker-hero__eyebrow {
        font-size: .76rem;
    }

    .mileage-tracker-hero__shot {
        border-radius: 18px;
        max-height: 480px;
    }

    .mileage-tracker-benefit {
        padding: 1.35rem;
    }
}