/* ============================================================
   MXUber landing page, additive layer
   Loaded after front-style.scss. Contains:
   1. Scroll reveal (.mx-reveal)
   2. Symmetry pass (section rhythm, stats alignment)
   3. Popular routes (.mx-routes)
   4. Ride now / schedule later split (.mx-split)
   5. Cities and growing (.mx-cities)
   Design tokens come from front-style: --mx-black, --mx-ink,
   --mx-muted, --mx-bg-gray, --mx-line, --mx-font-display.
   ============================================================ */

/* ---------- 1. scroll reveal ---------- */
.mx-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
                transform .7s cubic-bezier(.16, 1, .3, 1);
}
.mx-reveal.is-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .mx-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------- 2. symmetry pass ---------- */
/* one vertical rhythm for every section (stats keep the tight cut) */
.mx-section { padding: 84px 0; }
.mx-section--tight { padding: 56px 0; }
.mx-section__title { margin: 0 0 44px; }
/* stats band: items read from the left edge, like every other grid */
.mx-stats { text-align: left; }
.mx-stat { text-align: left; }

/* ---------- 3. popular routes ---------- */
.mx-routes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.mx-route-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E9E9E9;
    border-radius: 20px;
    padding: 24px 26px 22px;
    text-decoration: none;
    transition: transform .22s cubic-bezier(.16, 1, .3, 1),
                box-shadow .22s ease,
                border-color .22s ease;
}
.mx-route-card:hover {
    transform: translateY(-4px);
    border-color: #E2E2E2;
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .22);
}
.mx-route-card__stops {
    display: flex;
    flex-direction: column;
}
.mx-route-card__stop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
}
/* connector between the two stops, Uber route style */
.mx-route-card__stop + .mx-route-card__stop { padding-top: 18px; }
.mx-route-card__stop + .mx-route-card__stop::before {
    content: "";
    position: absolute;
    left: 4px;
    top: -12px;
    bottom: 50%;
    width: 1px;
    background: #DCDCDC;
}
.mx-route-card__dot {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: transparent;
}
.mx-route-card__dot--origin { border: 2.5px solid var(--mx-black, #000); }
.mx-route-card__dot--dest { background: var(--mx-black, #000); }
.mx-route-card__place {
    font-size: 15px;
    font-weight: 600;
    color: var(--mx-ink, #111);
    letter-spacing: -0.01em;
}
.mx-route-card__footer {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #E9E9E9;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mx-route-card__price {
    font-family: var(--mx-font-display, "Inter Tight", sans-serif);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mx-black, #000);
}
.mx-route-card__eta {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mx-muted, #545454);
}
.mx-route-card__go {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mx-black, #000);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
.mx-route-card:hover .mx-route-card__go { transform: translateX(3px); }

/* ---------- 4. ride now / schedule later split ---------- */
.mx-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.mx-split__half {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    padding: 44px 44px 48px;
}
.mx-split__half--white {
    background: #ffffff;
    border: 1px solid #E9E9E9;
}
.mx-split__half--gray {
    background: var(--mx-bg-gray, #F6F6F6);
    border: 1px solid #E9E9E9;
}
.mx-split__title {
    font-family: var(--mx-font-display, "Inter Tight", sans-serif);
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--mx-black, #000);
    margin: 0 0 12px;
}
.mx-split__sub {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mx-muted, #545454);
    max-width: 46ch;
}
.mx-split__list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mx-split__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--mx-ink, #111);
}
.mx-split__list i {
    font-size: 18px;
    color: var(--mx-black, #000);
}
.mx-split__actions {
    margin-top: auto;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
/* primary CTA geometry: near-square, 52px tall */
.mx-btn--xl {
    min-height: 52px;
    border-radius: 4px;
    padding: 0 32px;
}
/* outline CTA, the schedule counterpart to the black primary */
.mx-btn--outline {
    background: #ffffff;
    color: var(--mx-black, #000);
    border: 1px solid var(--mx-black, #000);
}
.mx-btn--outline:hover {
    background: var(--mx-black, #000);
    color: #ffffff;
}

/* ---------- 5. cities and growing ---------- */
.mx-cities {
    background: #0B0D12;
    color: #ffffff;
    padding: 84px 0;
}
.mx-cities__title {
    font-family: var(--mx-font-display, "Inter Tight", sans-serif);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 44px;
    text-wrap: balance;
}
.mx-cities__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}
.mx-city-tile {
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 16px;
    padding: 20px 10px;
    text-align: center;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, .92);
    transition: border-color .18s ease, color .18s ease;
}
.mx-city-tile:hover {
    border-color: #ffffff;
    color: #ffffff;
}
.mx-cities__note {
    margin: 44px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .65);
}
.mx-cities__note a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mx-cities__note a:hover { color: rgba(255, 255, 255, .8); }

/* ---------- responsive for the new grids ---------- */
@media (max-width: 1199px) {
    .mx-cities__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .mx-routes { grid-template-columns: 1fr; }
    .mx-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .mx-cities__grid { grid-template-columns: repeat(2, 1fr); }
    .mx-route-card { padding: 20px 20px 18px; }
    .mx-split__half { padding: 30px 24px 32px; }
    .mx-split__actions .mx-btn { width: 100%; }
}