/* =============================================================
 * landing.css — guest homepage (isplit.anovin.mk/).
 *
 * BEM-scoped to `.landing__*` plus the home-only `.home-header` /
 * `.home-footer`. Brand red falls back to --acc-primary so the
 * rest of the app keeps a single source of truth.
 *
 * Photographic assets live in /static/img/:
 *   Skopje_Wallpaper.webp      — blurred hero background
 *   Mobile_Map.jpg             — phone-mockup screen
 *   SkopjeMap_Banner_Image.png — airport-band background
 *
 * Cache-bust: bump ?v=N in base.html when this file changes.
 * ============================================================= */


/* ====================================================================
 * 0. Local tokens + container primitives
 * ==================================================================== */

.landing {
    /* Landing inherits its visual DNA from the global tokens in index.css
       so the marketing surface stays in lockstep with the /ride/ and
       /drive/ app shells. Fallbacks are listed for two reasons:
         1. The auth-choice <dialog> renders OUTSIDE `.landing` (top layer)
            and can't inherit these vars, so pill rules need explicit hex.
         2. Defensive against index.css ever being dropped/renamed.
       The full token set lives in index.css :root. */
    color: var(--text-primary, #0b0b0c);
    background: var(--bg-white, #fff);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Heading typography — Outfit pairs with Inter the same way the app
   shell does. The font is already preloaded via base.html, no asset cost. */
.landing h1, .landing h2, .landing h3, .landing h4,
.landing__hero-title, .landing__section-title,
.landing__role-title, .landing__feature-title, .landing__airport-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    letter-spacing: -0.5px;
}

/* The hero band's .landing__container is the positioning anchor for
   #home-guest-map below — without this the map collapses to its
   natural (zero) height. */
.landing__band--hero > .landing__container {
    position: relative;
}

/* Background OSM map (CartoDB Positron) — fills the hero's
   .landing__container, so it respects the page's max-width and side
   padding rather than going full-bleed. Decorative; pointer-events
   disabled so taps/scroll pass through to the hero content above. */
#home-guest-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
/* Hero content sits above the map. */
.landing__band--hero .landing__hero-inner {
    position: relative;
    z-index: 1;
}

/* ── Tile colour treatment ─────────────────────────────────────────
   CartoDB Positron is intentionally pale, so the road network
   barely reads against a white page. The filter below darkens the
   greys without swapping tile providers. Tune to taste — each
   multiplier is independent and stacks left-to-right:

     contrast(n)   1.0 = neutral. >1 deepens shadows / lightens
                   highlights → roads gain punch. Main knob here.
     brightness(n) 1.0 = neutral. <1 darkens everything uniformly
                   (use sparingly — washes labels).
     saturate(n)   1.0 = neutral. <1 → closer to grey;
                   >1 → more colour (greens, water cyan, etc.).

   Add/remove filter functions freely; the order matters slightly
   for the visual result but not correctness.

   Alternatives if filter still isn't enough:
     • Swap the tileLayer URL in base.html for CartoDB's "voyager"
       theme — more contrast baked in (replace `light_all` with
       `rastertiles/voyager`).
     • Use `dark_all` for a fully dark background.
   ────────────────────────────────────────────────────────────── */
#home-guest-map .leaflet-tile-pane {
    filter: contrast(1) brightness(1) saturate(2);
}

.landing *,
.landing *::before,
.landing *::after { box-sizing: border-box; }

.landing__container {
    margin: 0 0;
    padding-left: 24px;
    padding-right: 24px;
}
@media (max-width: 575.98px) {
    .landing__container { padding-left: 8px; padding-right: 8px; }
}

/* Each band is a full-bleed strip; the container picks the width. */
.landing__band { width: 100%; }


/* ====================================================================
 * 1. Sticky home navbar (logo + hamburger)
 * Scoped to .home-header because that element only renders on `/`.
 * ==================================================================== */

.home-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border-light, #e2e2e2);
}
@media (max-width: 575.98px) {
    .home-header { padding: 12px 18px; }
}

.home-header .home-logo { display: block; }
.home-header .home-logo-mark {
    height: 34px;
    width: auto;
    display: block;
}

.home-header .menu-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-light, #e2e2e2);
    background: #fff;
    border-radius: 12px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: border-color .2s, transform .2s;
    padding: 0;
}
.home-header .menu-toggle:hover { border-color: #cfd3da; }
.home-header .menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text-primary, #0b0b0c);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}


/* ====================================================================
 * 2. Reusable building blocks (pill buttons, section heads, eyebrows)
 * ==================================================================== */

.landing__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 9px;
    font-weight: 600;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
    font-size: 15px;
    line-height: 1;
    font-family: inherit;
    width: 100%;
}
.landing__pill:active { transform: translateY(1px); }

/* Pill shadow + active-press signature mirrors `.btn-primary` / `.btn-accent`
   in index.css — same red/blue glow under the button, same scale(.97) press.
   The 999px pill shape stays (it's the marketing dialect); only the
   tactile vocabulary unifies with the app shell.
   Fallback values are required because the auth-choice <dialog> renders
   outside `.landing`, where the --acc-* custom properties don't resolve. */
.landing__pill--red {
    background: var(--acc-primary, #d32f2f);
    color: #fff;
    box-shadow: 0 4px 14px rgba(211, 47, 47, .18);
}
.landing__pill--red:hover {
    background: var(--acc-primary-hover, #b71c1c);
    box-shadow: 0 6px 18px rgba(211, 47, 47, .28);
    color: #fff;
}
.landing__pill--red:active {
    transform: scale(.97);
    opacity: .9;
    box-shadow: 0 2px 8px rgba(211, 47, 47, .25);
}

.landing__pill--blue {
    background: var(--acc-blue, #276ef1);
    color: #fff;
    box-shadow: 0 4px 14px rgba(39, 110, 241, .25);
}
.landing__pill--blue:hover {
    background: #1e57c7;
    box-shadow: 0 6px 18px rgba(39, 110, 241, .35);
    color: #fff;
}
.landing__pill--blue:active {
    transform: scale(.97);
    opacity: .9;
    box-shadow: 0 2px 8px rgba(39, 110, 241, .3);
}

.landing__pill--ghost {
    background: transparent;
    color: var(--text-primary, #0b0b0c);
    border-color: #d6d8de;
}
.landing__pill--ghost:hover {
    border-color: var(--text-primary, #0b0b0c);
    color: var(--text-primary, #0b0b0c);
}

.landing__pill--white {
    background: #fff;
    color: var(--text-primary, #0b0b0c);
}
.landing__pill--white:hover {
    background: #f1f1f3;
    color: var(--text-primary, #0b0b0c);
}

.landing__pill .material-symbols-rounded { font-size: 18px; }

.landing__band--section { padding: 60px 0; }
@media (max-width: 991.98px) {
    .landing__band--section { padding: 24px 0; }
}

.landing__section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px;
}
@media (max-width: 575.98px) {
    .landing__section-head { margin-bottom: 36px; }
}

.landing__kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted, #6b6b6b);
    margin-bottom: 12px;
}

.landing__section-title {
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 12px;
    color: var(--text-primary, #0b0b0c);
}
@media (max-width: 575.98px) {
    .landing__section-title { font-size: 26px; }
}

.landing__section-lede {
    color: var(--text-muted, #6b6b6b);
    font-size: 16px;
    margin: 0;
}


/* ====================================================================
 * 3. Hero band — text card + phone mockup
 * ==================================================================== */

/* Hero band is transparent so the #home-guest-map (CartoDB Positron) reads
   through. The radial gradients add a faint blue/red brand tint, and the
   ::after white-overlay keeps hero text legible over the OSM tiles. */
.landing__band--hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(80% 60% at 85% 10%, rgba(39,110,241,.06), transparent 60%),
        radial-gradient(70% 60% at 10% 100%, rgba(211,47,47,.06), transparent 60%);
}
.landing__band--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.78) 100%);
    pointer-events: none;
}

.landing__hero-inner {
    position: relative;
    z-index: 2;
    padding: 80px 0 90px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
@media (min-width: 992px) {
    .landing__hero-inner {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
}
@media (max-width: 991.98px) {
    .landing__hero-inner { padding: 56px 0 60px; }
}
@media (max-width: 575.98px) {
    .landing__hero-inner { padding: 10px 0 20px; }
}

.landing__hero-text {
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-xl, 24px);
    padding: 36px 32px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(0, 0, 0, 0.12));
}
@media (max-width: 575.98px) {
    .landing__hero-text {
        padding: 24px 22px;
        border-radius: var(--radius-lg, 16px);
        margin: 0 6px;
    }
}

.landing__hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(211, 47, 47, 0.08);
    color: var(--acc-primary, #d32f2f);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
}
.landing__hero-eyebrow .material-symbols-rounded {
    font-size: 20px;
}

/* Online pulse — the same motion vocabulary as `/ride/`'s status pill.
   Green dot with a soft halo, breathes 1.5s. Disabled if the user opts
   out of motion. */
.landing__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acc-green, #05944f);
    box-shadow: 0 0 0 4px rgba(5, 148, 79, .15);
    animation: landing-pulse 1.5s ease-in-out infinite;
    flex: none;
}
@keyframes landing-pulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
    .landing__eyebrow-dot { animation: none; }
}

.landing__hero-title {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
    margin: 18px 0 18px;
    color: var(--text-primary, #0b0b0c);
}
.landing__hero-title .landing__accent { color: var(--acc-primary, #d32f2f); }
@media (max-width: 575.98px) {
    .landing__hero-title { font-size: 34px; }
}

.landing__hero-lead {
    font-size: 17px;
    color: var(--text-muted, #6b6b6b);
    max-width: 520px;
    margin: 0 0 28px;
}
@media (max-width: 575.98px) {
    .landing__hero-lead { font-size: 15.5px; }
}

.landing__hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.landing__hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    color: var(--text-muted, #6b6b6b);
    font-size: 14px;
}
.landing__hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.landing__hero-meta .material-symbols-rounded {
    color: var(--acc-primary, #d32f2f);
    font-size: 20px;
}


/* ====================================================================
 * 4. Phone mockup (right side of hero)
 * ==================================================================== */

.landing__phone-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 991.98px) {
    .landing__phone-wrap { margin-top: 36px; }
}

.landing__phone {
    position: relative;
    width: min(320px, 86vw);
    aspect-ratio: 9 / 19;
    background: #0b0b0c;
    border-radius: 44px;
    padding: 12px;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.35),
        0 12px 24px -12px rgba(0, 0, 0, 0.25),
        inset 0 0 0 2px #1a1a1c;
}

.landing__phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: #eef0f3 url("/static/img/Mobile_Map.jpg") center/cover no-repeat;
    border-radius: 32px;
    overflow: hidden;
}

.landing__phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 26px;
    background: #0b0b0c;
    border-radius: 14px;
    z-index: 5;
}

.landing__phone-topcard {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 44px;
    z-index: 4;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.landing__phone-topcard .material-symbols-rounded {
    color: var(--acc-primary, #d32f2f);
    font-size: 20px;
}
.landing__phone-topcard small {
    display: block;
    color: var(--text-muted, #6b6b6b);
    font-size: 11px;
    line-height: 1;
}
.landing__phone-topcard strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    margin-top: 2px;
}

.landing__phone-route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}
.landing__phone-route path {
    fill: none;
    stroke: var(--acc-primary, #d32f2f);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 0.01 4;
    filter: drop-shadow(0 1px 1px rgba(211, 47, 47, 0.35));
}

.landing__phone-pin {
    position: absolute;
    z-index: 3;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
}
/* Pickup A = green, dropoff B = red — exactly the convention `/ride/`
   uses for its osm-marker-pickup / osm-marker-dropoff DivIcons. The
   route polyline stays red (matches the passenger-side route colour). */
.landing__phone-pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #4CAF50;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.45);
    display: block;
}
.landing__phone-pin--end .landing__phone-pin-dot {
    background: #F44336;
    box-shadow: 0 4px 10px rgba(244, 67, 54, 0.45);
}
.landing__phone-pin-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    background: #fff;
    color: var(--text-primary, #0b0b0c);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

.landing__phone-pricecard {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 4;
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.landing__phone-pricerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.landing__phone-pricelabel {
    font-size: 11px;
    color: var(--text-muted, #6b6b6b);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.landing__phone-pricevalue {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.landing__phone-pricevalue--small { font-size: 16px; }

.landing__phone-routemini {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--text-muted, #6b6b6b);
    font-size: 12px;
}
.landing__phone-routemini-line {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--acc-primary, #d32f2f) 0 4px, transparent 4px 8px);
}
.landing__phone-routemini .material-symbols-rounded--origin {
    font-size: 16px;
    color: var(--acc-primary, #d32f2f);
}
.landing__phone-routemini .material-symbols-rounded--dest {
    font-size: 16px;
    color: var(--text-primary, #0b0b0c);
}

.landing__phone-request {
    width: 100%;
    margin-top: 10px;
    padding: 12px 16px;
    background: var(--acc-primary, #d32f2f);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    cursor: default;
    font-family: inherit;
    font-size: inherit;
}
.landing__phone-request .material-symbols-rounded { font-size: 18px; }


/* ====================================================================
 * 5. Roles band — passenger + driver cards
 * ==================================================================== */

.landing__band--roles {
    background: var(--bg-base, #f7f7f7);
}

.landing__roles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .landing__roles-grid { grid-template-columns: 1fr 1fr; }
}

.landing__role-card {
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-light, #e2e2e2);
    border-radius: var(--radius-lg, 16px);
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
    transition:
        transform var(--transition-fast, 0.15s cubic-bezier(0.25,0.8,0.25,1)),
        box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.25,0.8,0.25,1)),
        border-color var(--transition-fast, 0.15s);
}
.landing__role-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(0, 0, 0, 0.12));
    border-color: #dadde2;
}
@media (max-width: 575.98px) {
    .landing__role-card { padding: 22px; }
}

.landing__role-icon {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}
.landing__role-icon .material-symbols-rounded {
    font-size: 24px;
    color: #fff;
}
.landing__role-card--passenger .landing__role-icon { background: var(--acc-primary, #d32f2f); }
.landing__role-card--driver .landing__role-icon { background: var(--acc-blue, #276ef1); }

.landing__role-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -.01em;
}

.landing__role-sub {
    color: var(--text-muted, #6b6b6b);
    margin: -6px 0 6px;
    font-size: 15px;
}

.landing__role-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.landing__role-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
}
.landing__role-list .material-symbols-rounded {
    font-size: 18px;
    margin-top: 1px;
    flex: none;
}
.landing__role-card--passenger .landing__role-list .material-symbols-rounded {
    color: var(--acc-primary, #d32f2f);
}
.landing__role-card--driver .landing__role-list .material-symbols-rounded {
    color: var(--acc-blue, #276ef1);
}

.landing__role-card .landing__pill {
    align-self: flex-start;
    margin-top: 6px;
}


/* ====================================================================
 * 6. Airport band — dark full-bleed
 * ==================================================================== */

.landing__band--airport {
    position: relative;
    color: #fff;
    overflow: hidden;
    background: #0b0b0c;
}
.landing__band--airport::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/static/img/SkopjeMap_Banner_Image.png") center/cover no-repeat;
    opacity: .48;
}
.landing__band--airport::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.50) 60%,
        rgba(0, 0, 0, 0.78) 100%);
}

.landing__airport-inner {
    position: relative;
    z-index: 2;
    padding: 84px 0;
}
@media (max-width: 991.98px) {
    .landing__airport-inner { padding: 64px 0; }
}

.landing__airport-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    max-width: 760px;
    margin: 0 auto;
}

.landing__airport-badge {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--acc-primary, #d32f2f);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.landing__airport-badge .material-symbols-rounded {
    color: #fff;
    font-size: 28px;
}

.landing__airport-title {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: -.01em;
    color: #fff;
}

.landing__airport-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
}


/* ====================================================================
 * 7. Features grid — 6 cards
 * ==================================================================== */

.landing__features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
@media (min-width: 768px) {
    .landing__features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .landing__features-grid { grid-template-columns: repeat(3, 1fr); }
}

.landing__feature {
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-light, #e2e2e2);
    border-radius: var(--radius-md, 12px);
    padding: 24px;
    height: 100%;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
    transition:
        transform var(--transition-fast, 0.15s cubic-bezier(0.25,0.8,0.25,1)),
        box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.25,0.8,0.25,1)),
        border-color var(--transition-fast, 0.15s);
}
.landing__feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
    border-color: #dadde2;
}

.landing__feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bg-base, #f7f7f7);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.landing__feature-icon .material-symbols-rounded {
    color: var(--acc-primary, #d32f2f);
    font-size: 24px;
}

.landing__feature-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -.01em;
    color: var(--text-primary, #0b0b0c);
}

.landing__feature-desc {
    margin: 0;
    color: var(--text-muted, #6b6b6b);
    font-size: 14px;
}


/* ====================================================================
 * 8. Home footer — responsive 4-column grid
 *
 * Layout breakpoints:
 *   ≥992px  Brand (2 cells) + Nav + Legal + Contact (4 cells total)
 *   ≥576px  Brand (full row) over 3-column nav/legal/contact
 *   <576px  Single column, all groups stacked
 *
 * To add/remove links: edit the corresponding <ul class="home-footer__list">
 * in base.html. To add a new column: copy a `.home-footer__col` block.
 * Scoped to .home-footer; the element renders on `/` only.
 * ==================================================================== */

.home-footer {
    background: var(--bg-base, #f7f7f7);
    padding: 64px 0 24px;
    color: var(--text-muted, #6b6b6b);
    font-size: 14px;
    text-align: left;
}
@media (max-width: 575.98px) {
    .home-footer { padding: 44px 0 20px; }
}

.home-footer__top {
    display: grid;
    /* 1fr per col, brand spans 2 → 5 col-units total = 5 columns of equal
       width, with brand taking 2/5 of the row. */
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px 32px;
    margin-bottom: 40px;
}
@media (max-width: 991.98px) {
    .home-footer__top {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 24px;
    }
    .home-footer__brand { grid-column: 1 / -1; }   /* Brand spans full row */
}
@media (max-width: 575.98px) {
    .home-footer__top {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 28px;
    }
    .home-footer__brand { grid-column: auto; }
}

/* ── Brand column ── */
.home-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 380px;
}
.home-footer__brand-link {
    display: inline-block;
    line-height: 0;             /* Kill the inline-image whitespace gap */
}
.home-footer__logo {
    height: 32px;
    width: auto;
    display: block;
}
.home-footer__tagline {
    margin: 0;
    line-height: 1.6;
    color: var(--text-muted, #6b6b6b);
    font-size: 14.5px;
}
.home-footer__locale {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-light, #999);
}
.home-footer__locale .material-symbols-rounded {
    font-size: 16px;
    color: var(--acc-primary, #d32f2f);
}

/* ── Column (Nav / Legal / Contact) ── */
.home-footer__col {
    min-width: 0;               /* Prevents grid blowout on long link text */
}
.home-footer__col-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-primary, #0b0b0c);
    margin: 0 0 14px;
}
.home-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.home-footer__list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #333);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast, 0.15s cubic-bezier(0.25,0.8,0.25,1));
}
.home-footer__list a:hover {
    color: var(--acc-primary, #d32f2f);
}
.home-footer__list a:focus-visible {
    outline: 2px solid var(--acc-primary, #d32f2f);
    outline-offset: 3px;
    border-radius: 4px;
}
.home-footer__list .material-symbols-rounded {
    font-size: 18px;
    color: var(--text-light, #999);
    transition: color var(--transition-fast, 0.15s);
}
.home-footer__list a:hover .material-symbols-rounded {
    color: var(--acc-primary, #d32f2f);
}

/* ── Bottom strip — copyright + region-of-origin + PWA update ── */
.home-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid var(--border-light, #e2e2e2);
    padding-top: 20px;
    font-size: 13px;
    color: var(--text-light, #999);
}
.home-footer__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.home-footer__sep {
    color: var(--border-light, #e2e2e2);
}
.home-footer__update {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast, 0.15s);
}
.home-footer__update:hover {
    color: var(--acc-primary, #d32f2f);
}
@media (max-width: 575.98px) {
    .home-footer__bottom {
        justify-content: center;
        text-align: center;
    }
}


/* ====================================================================
 * 9. Login-or-register choice modal (native <dialog>)
 * ==================================================================== */

.landing__authmodal {
    /* Override UA centering (inset:0 + margin:auto) with explicit
       fixed positioning so the keyframe's transform doesn't pull
       the dialog off-screen on iOS Safari and older Chromium. */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border: none;
    padding: 0;
    border-radius: var(--radius-xl, 24px);
    width: calc(100% - 32px);
    max-width: 420px;
    max-height: calc(100dvh - 32px);
    background: var(--bg-white, #fff);
    color: var(--text-primary, #0b0b0c);
    /* Surface shadow aligned with the global xl scale (trip-history-panel
       uses the same in /ride/). Doubled-up layer keeps the lift over the
       backdrop blur without growing the visual footprint. */
    box-shadow:
        var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, .15)),
        0 12px 24px -12px rgba(0, 0, 0, 0.2);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    overflow: auto;
    overscroll-behavior: contain;
}
.landing__authmodal::backdrop {
    background: rgba(11, 11, 12, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.landing__authmodal[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 22px 24px;
    gap: 14px;
    animation: landing-authmodal-in 180ms cubic-bezier(.2, .8, .2, 1);
}
/* Centering transform must be inside the keyframe; otherwise the
   `from` state cancels the translate(-50%, -50%) and the dialog
   springs in from the top-left corner. */
@keyframes landing-authmodal-in {
    from { transform: translate(-50%, calc(-50% + 8px)); opacity: 0; }
    to   { transform: translate(-50%, -50%);             opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .landing__authmodal[open] { animation: none; }
}
@media (max-width: 380px) {
    .landing__authmodal[open] { padding: 28px 18px 20px; gap: 12px; }
}

.landing__authmodal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-muted, #6b6b6b);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.landing__authmodal-close:hover {
    background: var(--bg-base, #f7f7f7);
    color: var(--text-primary, #0b0b0c);
}
.landing__authmodal-close .material-symbols-rounded { font-size: 22px; }

.landing__authmodal-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--acc-primary, #d32f2f);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    box-shadow: 0 10px 24px -10px rgba(211, 47, 47, 0.55);
    transition: background .2s, box-shadow .2s;
}
.landing__authmodal[data-role="driver"] .landing__authmodal-icon {
    background: var(--acc-blue, #276ef1);
    box-shadow: 0 10px 24px -10px rgba(39, 110, 241, 0.55);
}
.landing__authmodal-icon .material-symbols-rounded { font-size: 30px; }

.landing__authmodal-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 4px 0 0;
}

.landing__authmodal-sub {
    margin: 0;
    color: var(--text-muted, #6b6b6b);
    font-size: 14.5px;
    max-width: 320px;
}

.landing__authmodal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
}
.landing__authmodal-actions .landing__pill {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
}