@import url("uber-refinement.css");

/* ============================================================
   MXUber landing — imagery layer
   Loaded after the base bundle + landing.css. Purely additive:
   background photos, icon tiles, avatars, watermark, phone glow.
   Design tokens: #0A0A0A ink, #F6F6F6 gray fill, #545454 muted,
   Inter / Inter Tight (inherited via --mx-font / --mx-font-display).
   ============================================================ */

/* ---------- 1. Safety band: duotone photo behind dark overlay ---------- */
.mx-safety {
    position: relative;
    overflow: hidden;
    background: #0B0D12;
}
.mx-safety__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.mx-safety__shade {
    position: absolute;
    inset: 0;
    background: rgba(11, 13, 18, 0.85);
    pointer-events: none;
}
.mx-safety .container {
    position: relative;
    z-index: 1;
}
/* 48px icon tile per safety item */
.mx-safety__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    margin-bottom: 16px;
    flex: none;
}
.mx-safety__tile img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

/* ---------- 2. Stats: sedan watermark + bigger numerals ---------- */
.mx-stats {
    position: relative;
    overflow: hidden;
}
.mx-stats__watermark {
    position: absolute;
    inset-inline-end: -3%;
    top: 50%;
    translate: 0 -50%;
    width: min(460px, 52%);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
}
.mx-stats .mx-stat { position: relative; }
/* same specificity as the base rule, later file wins */
.mx-stats .mx-stat__value {
    font-size: clamp(3rem, 4.5vw, 4rem); /* 48–64px */
}

/* ---------- 3. How it works: vehicle illustration tiles ---------- */
.mx-step { position: relative; }
/* the dashed connector now crosses the 64px tile instead of the number circle */
.mx-steps::before { top: 32px; }
.mx-step__tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #E9E9E9;
    box-shadow: 0 0 0 6px #F6F6F6, 0 12px 24px -16px rgba(0, 0, 0, 0.28);
    margin-bottom: 14px;
}
.mx-step__tile img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

/* ---------- 4. Testimonials: monogram avatars + rating chip ---------- */
/* base is `.mx-quote .mx-quote__by` (column) — match specificity, flip to a row */
.mx-quote .mx-quote__by {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.mx-quote__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0A0A0A;
    color: #ffffff;
    font-family: var(--mx-font-display, "Inter Tight", "Inter", sans-serif);
    font-weight: 700;
    font-size: 18px;
    flex: none;
}
.mx-quote__who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
/* rating chip — base is (0,3,0), so is this */
.mx-quote .mx-quote__by .mx-quote__stars {
    margin-left: 0;
    background: #F6F6F6;
    border-radius: 999px;
    padding: 3px 10px;
    line-height: 1.2;
}

/* ---------- 5. FAQ: tall duotone image column ---------- */
.mx-faq-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 56px;
    align-items: start;
}
.mx-faq-aside {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 480px;
    box-shadow: 0 32px 64px -40px rgba(0, 0, 0, 0.35);
}
.mx-faq-aside img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
}
.mx-faq-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(84, 84, 84, 0.28), rgba(10, 10, 10, 0.45));
    pointer-events: none;
}

/* ---------- 6. App band: radial glow + floating phones ---------- */
/* replaces the base navy tint (#1C2536) with a neutral white glow — no blue */
.mx-appband {
    position: relative;
    overflow: hidden;
    background: radial-gradient(620px 440px at 76% 42%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 62%),
                #0B0D12;
}
/* ponytail: one shared ground shadow under the phone pair — upgrade path is a blurred ellipse per phone */
.mx-appband__phones::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    translate: -50% 0;
    width: 76%;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 70%);
    filter: blur(6px);
    pointer-events: none;
}
/* `translate` keyframes keep the base `transform: rotate()` untouched */
@keyframes mx-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}
.mx-phone--front { animation: mx-float 6s ease-in-out infinite; }
.mx-phone--back { animation: mx-float 7s ease-in-out -2.5s infinite reverse; }
@media (prefers-reduced-motion: reduce) {
    .mx-phone--front,
    .mx-phone--back { animation: none; }
}

/* ---------- 7. Ride with confidence (photo split + trust checklist) ---------- */
.mx-confidence { padding: 84px 0; }
.mx-confidence__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.mx-confidence__photo {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-height: 560px;
    box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.45);
}
.mx-confidence__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mx-confidence__eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #545454;
    margin: 0 0 14px;
}
.mx-confidence__title {
    font-family: var(--mx-font-display, "Inter Tight", "Inter", sans-serif);
    font-weight: 800;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #0A0A0A;
    margin: 0 0 14px;
    text-wrap: balance;
}
.mx-confidence__sub {
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.65;
    color: #545454;
    max-width: 46ch;
}
.mx-confidence__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mx-confidence__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.mx-confidence__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0A0A0A;
    color: #ffffff;
    font-size: 15px;
    flex: none;
    margin-top: 1px;
}
.mx-confidence__label {
    display: block;
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: -0.01em;
    color: #0A0A0A;
}
.mx-confidence__note {
    display: block;
    margin-top: 3px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #545454;
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
    .mx-faq-layout { grid-template-columns: 280px 1fr; gap: 40px; }
}
@media (max-width: 991px) {
    .mx-faq-layout { grid-template-columns: 1fr; gap: 32px; }
    .mx-faq-aside { min-height: 220px; }
    .mx-confidence__grid { grid-template-columns: 1fr; gap: 36px; }
    .mx-confidence__photo { aspect-ratio: 16 / 10; max-height: 360px; }
}
@media (max-width: 640px) {
    .mx-confidence { padding: 60px 0; }
    .mx-faq-aside { min-height: 170px; }
    .mx-stats__watermark { width: 70%; }
}

/* Safety section: clean dark band, RemixIcon glyphs (no duplicate photos) */
.mx-safety--clean {
    background: #0B0D12 !important;
    background-image: none !important;
}

.mx-safety--clean .mx-safety__item .mx-safety-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.mx-safety--clean .mx-safety__item .mx-safety-icon i {
    font-size: 22px;
    color: #ffffff;
}

/* Blog cards without images: clean dark text tile, no recycled photos */
.mx-blog .mx-blog__media {
    background: linear-gradient(135deg, #161C26 0%, #0F131A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mx-blog .mx-blog__media::before {
    content: "\EEA6";
    font-family: "remixicon";
    font-size: 48px;
    color: rgba(255, 255, 255, 0.15);
}

.mx-blog .mx-blog__media img[src=""], .mx-blog .mx-blog__media img:not([src]) {
    display: none;
}

/* Safety tiles with RemixIcons */
.mx-safety--clean .mx-safety__tile {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.mx-safety--clean .mx-safety__tile i {
    font-size: 22px;
    color: #ffffff;
}

/* How It Works: icon tiles instead of photos (photos live in fleet section) */
.mx-steps .mx-step .mx-step__img {
    display: none;
}

.mx-steps .mx-step::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #E9E9E9;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* FAQ: CSS-only aside (no photo) */
.mx-faq__aside--css {
    background: linear-gradient(160deg, #161C26 0%, #0F131A 100%);
    border-radius: 24px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.mx-faq__aside--css::before {
    content: "\F0CA";
    font-family: "remixicon";
    font-size: 64px;
    color: rgba(255, 255, 255, 0.12);
}

.mx-faq__aside--css::after {
    content: "Need help?";
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 600;
}

/* Stats: no watermark (hero already has the sedan) */
.mx-stats { position: relative; }
.mx-stats::before, .mx-stats::after { display: none !important; }
.mx-stats-watermark { display: none !important; }

/* Confidence: duotone treatment to differentiate from earn photo */
.mx-confidence__photo img {
    filter: grayscale(100%) contrast(1.1);
}
.mx-confidence__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.3);
    pointer-events: none;
}

/* ============================================================
   Uber.com refinement pass — global discipline layer (2026-09-16)
   Appended, purely additive. Strict 5-step type scale, unitless
   line-heights, one motion curve, 16/8/4 radii, sentence case.
   Section-specific tuning lives in uber-refinement.css, pulled in
   by the @import at the top of this file (CSS imports must precede
   all rules). Because that import lands before this file's own
   rules, the two declarations it owns that compete with earlier
   rules here are re-asserted at the bottom as "cascade guards".
   ============================================================ */

/* ---------- tokens ---------- */
:root {
    --mx-dur: 250ms;
    --mx-shadow-hover: 0 12px 28px -8px rgba(0, 0, 0, 0.12);
    --mx-type-display: clamp(44px, 5vw, 64px); /* hero + statement band only */
    --mx-type-h2: clamp(28px, 3vw, 40px);      /* every section title */
    --mx-type-h3: 24px;                        /* sub-sections (split cards) */
}

/* ---------- body rhythm: proportional, unitless leading ---------- */
/* inheritance base — resets the vendor's fixed 21px body line-height
   inside every landing band (headings keep their own tighter leading) */
.mx-hero, .mx-section, .mx-safety, .mx-appband, .mx-confidence,
.mx-fleet, .mx-cities, .mx-truststrip, .mx-statement__content {
    line-height: 1.6;
}
/* explicit overrides for text classes that carry their own leading */
.mx-hero__sub, .mx-statement__content p,
.mx-earn__sub, .mx-split__sub, .mx-confidence__sub, .mx-appband__sub,
.mx-quote__text, .mx-faq__a, .mx-step__desc, .mx-safety__desc,
.mx-offering__desc, .mx-ridecard__note, .mx-confidence__note, .mx-cities__note {
    line-height: 1.6;
}
/* small body copy sits on the 14px step (13.5px outliers folded in) */
.mx-offering__desc, .mx-route-card__eta { font-size: 14px; }

/* micro-label: 12px / 600 / 0.1em — eyebrows only, never headings */
.mx-confidence__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* two visible content weights: 400 body + 700 headings (800 = stats only) */
.mx-route-card__price { font-weight: 700; }
.mx-split__list li, .mx-earn__list li { font-weight: 400; }

/* sentence case everywhere — uppercase is reserved for micro-labels */
.mx-hero__title, .mx-statement__content h2,
.mx-section__title, .mx-safety__title, .mx-earn__title, .mx-appband__title,
.mx-cities__title, .mx-confidence__title, .mx-split__title,
.mx-fleet-card h3, .mx-blog__title { text-transform: none; }

/* ---------- motion: one duration, one curve ---------- */
.mx-btn, .mx-link--arrow, .mx-city-tile,
.mx-route-card, .mx-offering-card, .mx-fleet-card, .mx-blog, .mx-ridecard {
    transition-duration: 250ms;
    transition-timing-function: var(--mx-ease);
}
.mx-storebadge, .mx-newsletter__input {
    transition-property: border-color, background-color, box-shadow;
    transition-duration: 250ms;
    transition-timing-function: var(--mx-ease);
}
.mx-faq__q::after { transition: transform 250ms var(--mx-ease); }

/* ---------- radii: 16 cards / 8 controls / 4 CTAs ---------- */
/* cards live in uber-refinement.css section 5; these are the panels */
.mx-quote, .mx-split__half, .mx-earn, .mx-faq-aside, .mx-faq__aside--css,
.mx-confidence__photo { border-radius: 16px; }
.mx-storebadge { border-radius: 8px; }
.mx-earn .mx-btn--invert { border-radius: 9999px !important; }
/* .mx-btn 8px, .mx-field__input 8px, .mx-btn--xl 4px already conform */

/* ---------- cascade guards ----------
   uber-refinement.css sections 6 and 8 re-asserted here: this file's
   own earlier rules (stats value size, .mx-confidence padding) outrank
   the @import at equal specificity — these later copies restore them.
   Keep in sync with uber-refinement.css. */
.mx-stats .mx-stat__value { font-size: 48px; }
.mx-confidence { padding: 96px 0; }
@media (max-width: 767px) {
    .mx-confidence { padding: 64px 0; }
}

/* ============ UNIQUE SECTION VISUALS — replaces repeated photography ============ */

/* Statement band: pure typography on black (was band-wide.jpg) */
.mx-statement--type {
    background:
        radial-gradient(1100px 460px at 85% 8%, rgba(22, 27, 38, .55), transparent 62%),
        #0A0A0A;
    min-height: 54vh;
}
.mx-statement--type .mx-statement__content { padding-top: 88px; padding-bottom: 88px; }
.mx-statement__route {
    position: absolute; left: 0; right: 0; bottom: 44px;
    display: flex; justify-content: center; gap: 10px;
}
.mx-statement__route i { width: 44px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.mx-statement__route i:nth-child(2) { width: 96px; background: rgba(255, 255, 255, .36); }

/* Driver earnings wallet (earn section, was hero-driver.jpg #1) */
.mx-earn__wallet {
    background: #fff; color: #0A0A0A; border-radius: 18px;
    margin: 28px; padding: 24px 24px 20px;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .68);
}
.mx-wallet__head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; font-weight: 600; color: #545454; letter-spacing: .02em;
}
.mx-wallet__live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #06A95C;
}
.mx-wallet__live::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #06A95C; box-shadow: 0 0 0 4px rgba(6, 169, 92, .15);
}
.mx-wallet__amount {
    font-family: var(--mx-font-display, "Inter Tight", sans-serif);
    font-size: 50px; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 14px;
}
.mx-wallet__bars { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-bottom: 14px; }
.mx-wallet__bars i { flex: 1; background: #E2E2E2; border-radius: 3px 3px 0 0; }
.mx-wallet__bars i:nth-child(1) { height: 36%; }
.mx-wallet__bars i:nth-child(2) { height: 58%; }
.mx-wallet__bars i:nth-child(3) { height: 44%; }
.mx-wallet__bars i:nth-child(4) { height: 92%; background: #0A0A0A; }
.mx-wallet__bars i:nth-child(5) { height: 66%; }
.mx-wallet__bars i:nth-child(6) { height: 78%; }
.mx-wallet__bars i:nth-child(7) { height: 52%; }
.mx-wallet__row {
    display: flex; justify-content: space-between; padding: 9px 0;
    border-top: 1px solid #E2E2E2; font-size: 14px; color: #545454;
}
.mx-wallet__row strong { color: #0A0A0A; font-weight: 700; }
.mx-wallet__payout {
    margin-top: 14px; display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: #545454; background: #F6F6F6;
    border-radius: 10px; padding: 10px 12px;
}

/* Live trip trust card (confidence section, was hero-driver.jpg #2) */
.mx-confidence__card {
    background: #fff; color: #0A0A0A; border-radius: 20px; padding: 22px;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5);
    font-family: var(--mx-font-body, "Inter", sans-serif);
}
.mx-tripcard__status { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.mx-tripcard__pulse {
    width: 9px; height: 9px; border-radius: 50%;
    background: #06A95C; box-shadow: 0 0 0 4px rgba(6, 169, 92, .15);
}
.mx-tripcard__driver {
    display: flex; align-items: center; gap: 14px;
    margin: 16px 0; padding: 14px; background: #F6F6F6; border-radius: 14px;
}
.mx-tripcard__avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: #0A0A0A; color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 15px; letter-spacing: .04em; flex: none;
}
.mx-tripcard__meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mx-tripcard__meta strong { font-size: 15px; }
.mx-tripcard__meta small { font-size: 12.5px; color: #545454; }
.mx-tripcard__plate {
    font-size: 12px; font-weight: 700; border: 1.5px solid #0A0A0A;
    border-radius: 6px; padding: 5px 8px; letter-spacing: .06em; white-space: nowrap;
}
.mx-tripcard__route { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; }
.mx-tripcard__pin { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mx-tripcard__pin--a { background: #0A0A0A; }
.mx-tripcard__pin--b { background: #fff; border: 3px solid #0A0A0A; }
.mx-tripcard__line {
    flex: 1; height: 2px;
    background: repeating-linear-gradient(90deg, #0A0A0A 0 6px, transparent 6px 12px);
}
.mx-tripcard__chips { display: flex; gap: 10px; }
.mx-tripcard__chips span {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
    background: #F6F6F6; color: #0A0A0A;
}
.mx-tripcard__chip--sos { background: #0A0A0A; color: #fff; }

/* Cities map tile (was cities-night.jpg) */
.mx-cities__map {
    position: relative; height: 300px; border-radius: 20px; overflow: hidden;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .14) 1px, transparent 1.6px) 0 0 / 26px 26px,
        linear-gradient(160deg, #10141d, #0b0d12);
    border: 1px solid rgba(255, 255, 255, .11);
    margin-bottom: 28px; color: #fff;
}
.mx-map__route { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, .55); }
.mx-map__pin {
    position: absolute; width: 14px; height: 14px;
    border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
}
.mx-map__pin--a { left: 5%; top: 70%; background: #fff; }
.mx-map__pin--b { left: 47%; top: 32%; background: #fff; }
.mx-map__pin--c { right: 5%; top: 16%; background: #06A95C; }
.mx-map__city {
    position: absolute; font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .66);
}
.mx-map__city--1 { left: 9%; top: 80%; }
.mx-map__city--2 { left: 51%; top: 20%; }
.mx-map__city--3 { right: 3%; top: 4%; }

@media (max-width: 900px) {
    .mx-earn { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .mx-earn__wallet { margin: 16px; padding: 20px 18px 16px; }
    .mx-wallet__amount { font-size: 40px; }
    .mx-statement--type { min-height: 44vh; }
    .mx-statement__route { bottom: 28px; }
    .mx-cities__map { height: 220px; }
}

/* ============ V2 DESIGN UNIFICATION — one black, one rhythm, one scale ============ */

/* 1 — ONE BLACK: every dark surface is #0A0A0A (kills the #0B0D12 navy drift) */
.mx-truststrip,
.mx-safety,
.mx-info-section,
.mx-cities,
.mx-appband { background: #0A0A0A; }
.mx-cities__map {
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .14) 1px, transparent 1.6px) 0 0 / 26px 26px,
        linear-gradient(160deg, #131313, #0A0A0A);
}
/* statement + truststrip read as one composed dark moment */
.mx-truststrip {
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 22px 0;
}
.mx-statement--type { min-height: 0; }
.mx-statement--type .mx-statement__content { padding-top: 96px; padding-bottom: 96px; }

/* 2 — ONE RHYTHM: 96px standard / 64px tight (kills 0, 76, 84, 120, 180 drift) */
.mx-section,
.mx-section--gray { padding-top: 96px; padding-bottom: 96px; }
.mx-section--tight { padding-top: 64px; padding-bottom: 64px; }
.mx-hero { padding-top: 88px; padding-bottom: 96px; }
.mx-fleet,
.mx-confidence,
.mx-process,
.mx-cities { padding-top: 96px; padding-bottom: 96px; }

/* 3 — ONE SCALE: all section titles 40/700, balanced, constrained measure */
.mx-section__title,
.mx-cities__title,
.mx-fleet__title,
.mx-safety__title,
.mx-earn__title,
.mx-appband__title {
    font-size: 40px !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 640px;
    text-wrap: balance;
}
.mx-confidence__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* 4 — ONE BUTTON: 48px / 4px radius / 15-600 everywhere */
.mx-btn,
.mx-btn--xl,
.mx-btn--block,
.mx-btn--invert {
    height: 48px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    padding: 0 22px;
}

/* 5 — HERO: contain the car visual, balanced column */
.mx-hero__car {
    max-width: 460px;
    max-height: 400px;
    width: auto;
    height: auto;
    object-fit: contain;
    align-self: end;
    margin-inline: auto;
    filter: drop-shadow(0 28px 44px rgba(10, 10, 10, .16));
}

/* 6 — FAQ: measured single column + inline support row */
.mx-faqs { max-width: 760px; }
.mx-faq-support {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    font-size: 15px;
    color: #545454;
}

/* 7 — ROUTE CARDS: price leads, meta muted (fixes flat hierarchy) */
.mx-route-card__price {
    font-family: var(--mx-font-display, "Inter Tight", sans-serif);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.mx-route-card__eta { font-size: 13px; font-weight: 500; color: #545454; }
.mx-route-card__place { font-size: 15px; font-weight: 600; }

@media (max-width: 768px) {
    .mx-section,
    .mx-section--gray,
    .mx-fleet,
    .mx-confidence,
    .mx-process,
    .mx-cities { padding-top: 56px; padding-bottom: 56px; }
    .mx-statement--type .mx-statement__content { padding-top: 64px; padding-bottom: 64px; }
    .mx-section__title,
    .mx-confidence__title,
    .mx-cities__title { font-size: 30px !important; }
    .mx-hero__car { max-height: 260px; }
}

/* ID-level lock: a legacy per-section padding rule (not in any shipped sheet we can find)
   outranks class selectors; these !important locks restore the unified 96px rhythm. */
#home { padding: 88px 0 96px !important; }
#why_cabbooking,
#how_it_works,
#popular_routes,
#ride_options,
#blogs { padding: 96px 0 !important; }
#testimonials,
#faqs { padding: 96px 0 !important; }

/* button variant lock */
.mx-btn--primary,
.mx-btn--invert,
.mx-btn--block { height: 48px !important; border-radius: 9999px !important; }

/* hero final polish: tighter title measure, grounded car visual */
.mx-hero__title { max-width: 480px; }
.mx-hero__copy .mx-link--arrow { margin-top: 4px; }
.mx-hero__car { position: relative; }
.mx-hero__car::after {
    content: "";
    position: absolute;
    left: 12%; right: 12%; bottom: 6px;
    height: 26px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(10, 10, 10, .22), transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

/* finale + hero final fixes: hairline between stacked dark sections, even city tiles, darker placeholders */
.mx-cities { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mx-city-tile { display: flex; align-items: center; justify-content: center; min-height: 52px; }
.mx-field__input::placeholder { color: #757575; opacity: 1; }