/* Mobile responsive overrides for hero CTA */
@media (max-width: 600px) {
    /* Slightly reduce button size but keep comfortable padding and pill shape */
    .hero-cta .btn {
        padding: 10px 14px;
        font-size: 15px;
        border-radius: 999px; /* keep pill-shaped buttons */
        min-width: 0;
    }

    /* Tighter spacing between the two buttons while centered */
    .hero-cta { display:flex; gap:10px; align-items:center; justify-content:center; }

    /* Swap Watch label: hide full text, show short "Online" */
    .hero-cta .watch-full { display: none; }
    .hero-cta .watch-short { display: inline; }

    /* Keep Join button padding consistent */
    .hero-cta .btn-join { padding-left: 12px; padding-right: 12px; }
}

/* Default: show full label and hide short label */
.hero-cta .watch-short { display: none; }
.hero-cta .watch-full { display: inline; }

/* Desktop-only: overlap hero using transform and smoothly detach on scroll */
@media (min-width: 900px) {
    .hero-cards {
        /* visually overlap the hero using transform so layout space remains stable */
        margin-top: 24px; /* keeps spacing in document flow */
        transform: translateY(-160px);
        transition: transform 520ms cubic-bezier(.22,.9,.32,1), box-shadow 300ms ease;
        will-change: transform;
    }

    /* When scrolled past hero, remove overlap by translating to 0 */
    .hero-cards.detached {
        transform: translateY(0);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0);
    }

    /* Slightly reduce overlap on very wide screens */
    /* Mobile responsive overrides for hero CTA */
    @media (max-width: 600px) {
        /* Slightly reduce button size but keep comfortable padding and pill shape */
        .hero-cta .btn {
            padding: 10px 14px;
            font-size: 15px;
        }
    }

    @media (min-width: 1400px) {
        .hero-cards { transform: translateY(-200px); }
        .hero-cards.detached { transform: translateY(0); }

    /* Remove shadow from back-to-top on desktop for a cleaner look */
    @media (min-width: 1000px) {
        #back-to-top { box-shadow: none !important; }
    }
    }

    /* Title that appears centered above the cards as they drop into place.
       It animates slightly before the .hero-cards transform completes so
       it feels synced with the drop motion. Visible only on desktop. */
    #hero-cards-section { position: relative; }
    .hero-cards .hero-cards-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        top: -34px; /* place it slightly above the card group */
        z-index: 40;
        color: var(--brand-blue);
        font-size: 20px;
        font-weight: 800;
        padding: 6px 12px;
        border-radius: 8px;
        background: transparent;
        opacity: 0;
        transition: opacity 180ms ease 420ms, transform 220ms cubic-bezier(.22,.9,.32,1) 420ms;
        white-space: nowrap;
    }

    /* Split coloring for the title parts */
    .hero-cards .hero-cards-title .hc-dark { color: var(--brand-blue); }
    .hero-cards .hero-cards-title .hc-light { color: #7fd3ff; }

    /* When the cards finish dropping (detached -> transform:0), reveal the title
       slightly before the motion ends by applying the .detached selector. */
    .hero-cards.detached .hero-cards-title {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Revert: hide the desktop-only centered title on small screens so it
   does not overlap the hero/cards on mobile. Increase section top padding
   to provide extra vertical space above the cards on phones. */
@media (max-width: 700px) {
    .hero-cards .hero-cards-title { display: none !important; }
    #hero-cards-section { padding-top: 64px !important; padding-bottom: 28px !important; }
}

/* Floating bottom navigation pill (now shown on all screen sizes) */
/* compact centered pill */
/* narrower compact pill */
.mobile-bottom-nav { display: block; position: fixed; left: 50%; transform: translateX(calc(-50% - 32px)) translateY(120%); /* slight rightward adjustment */
    bottom: 18px; z-index: 1100; width: min(300px, calc(100% - 64px)); max-width: 300px; pointer-events: none; opacity: 0; transition: transform 360ms cubic-bezier(.22,.9,.32,1), opacity 220ms ease;
    /* expose container height as a variable so siblings (FAB) can match it */
    --mbn-container-h: 72px;
}
    .mobile-bottom-nav.mbn-visible { transform: translateX(calc(-50% - 32px)) translateY(0); opacity: 1; pointer-events: auto; }
    /* tighten container padding so highlights sit closer to pill edges
       and use variables so the relationship between container height,
       pill height and spacing always satisfies the design tips. */
    .mobile-bottom-nav .mbn-container {
        --mbn-container-h: 72px; /* overall pill height (feel free to tweak) */
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:0;
        /* spacing around the inner gloss = one quarter of container height,
           which equals the gloss radius when the gloss is half the container
           height (see JS update). */
        padding: calc(var(--mbn-container-h) / 4) calc(var(--mbn-container-h) / 4);
        position:relative;
        overflow: hidden;
        /* Use a soft translucent background so the pill reads glassy on varied content */
        background: #ffffff;
        /* make the pill outline a subtle translucent white rather than a dark hairline */
        border: 1px solid rgba(255,255,255,0.22);
        border-radius: calc(var(--mbn-container-h) / 2);
        /* softer outer shadow, remove bright inner highlights that can show as grey */
        box-shadow: 0 18px 40px rgba(8,20,40,0.06);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        height: var(--mbn-container-h);
    }
    .mobile-bottom-nav .mbn-item { background: transparent; border: none; padding:8px 10px; display:flex; align-items:center; gap:8px; color: rgba(12,22,34,0.85); border-radius: 12px; transition: transform 200ms cubic-bezier(.2,.9,.3,1), background-color 220ms ease, color 220ms ease, box-shadow 220ms ease; font-family: inherit; min-height:44px; }
    .mobile-bottom-nav .mbn-item svg { display:block; width:18px; height:18px; color: var(--brand-blue, #0b63ff); }
    .mobile-bottom-nav .mbn-item .mbn-label { font-weight:600; font-size:14px; color: rgba(12,22,34,0.9); opacity:1; transition: opacity 220ms ease, transform 220ms ease; }

    /* Labels: hidden by default, reveal on hover/focus/active with smooth animation
       Use max-width + overflow to avoid layout shift while animating. */
    .mobile-bottom-nav .mbn-item .mbn-label {
        display:inline-block;
        overflow: hidden;
        white-space: nowrap;
        max-width: 0;
        opacity: 0;
        transform: translateY(6px);
        transition: max-width 220ms ease, opacity 220ms ease, transform 220ms ease;
        font-size: 14px;
    }

    /* Reveal label when hovering, focusing, or when the item is active */
    .mobile-bottom-nav .mbn-item:hover .mbn-label,
    .mobile-bottom-nav .mbn-item:focus .mbn-label,
    .mobile-bottom-nav .mbn-item.active .mbn-label {
        max-width: 160px; /* enough for the word "Home" + padding */
        opacity: 1;
        transform: translateY(0);
        margin-left: 6px;
    }

    /* Active visuals: use a small centered white box behind the icon (pseudo-element)
       so icons have tighter spacing while still showing a highlighted background. */
    .mobile-bottom-nav .mbn-item { position: relative; overflow: visible; }

        .mobile-bottom-nav .mbn-item::before {
            /* remove the solid white per-item background so the shared gloss element
               provides a single source of truth for the white highlight. Keep a very
               subtle shadow for depth but no duplicate white fill. */
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(1);
            width: 56px;
            height: 36px;
            border-radius: 999px;
            background: transparent;
            box-shadow: 0 6px 14px rgba(8,20,40,0.04);
            opacity: 0; /* keep hidden by default */
            transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.9,.3,1), width 220ms ease;
            pointer-events: none;
            z-index: 0;
        }

    .mobile-bottom-nav .mbn-item svg { position: relative; z-index: 1; }

    .mobile-bottom-nav .mbn-item.active::before,
    .mobile-bottom-nav .mbn-item:hover::before,
    .mobile-bottom-nav .mbn-item:focus::before {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        width: 64px; /* slightly expand on active/hover for a rounded pill feel */
    }

    /* keep a slight scale on the whole item for the micro-interaction */
    .mobile-bottom-nav .mbn-item.active { transform: scale(1.03); }
    .mobile-bottom-nav .mbn-item.active svg { color: var(--brand-blue, #0b63ff); transform: translateY(-3px); }
    .mobile-bottom-nav .mbn-item.active .mbn-label { font-weight:700; color: rgba(8,20,40,0.95); }

    /* Items: equal spacing edge-to-edge; small inner padding for touch targets */
    .mobile-bottom-nav .mbn-container .mbn-item { flex: 1 1 0; justify-content:center; padding-left:6px; padding-right:6px; }

    /* Floating action button overlaps right side slightly */
    /* FAB: placed just outside the pill so it appears detached */
    /* FAB fully detached to the right with clear gap */
    /* FAB fully detached to the right with clear gap - blue chatbot style */
    /* Make the mobile FAB visually match the desktop chat icon: solid dark-blue circle with white face */
    .mobile-bottom-nav .mbn-fab { position: absolute; right: calc(-1 * var(--mbn-container-h, 72px) - 12px); top: 50%; transform: translateX(var(--mbn-fab-x, 0px)) translateY(200%); border-radius: 999px; width: var(--mbn-container-h, 72px); height: var(--mbn-container-h, 72px); display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; box-shadow: 0 14px 36px rgba(3,18,40,0.24); background-color: var(--brand-blue-dark); color:#fff; font-size:20px; font-weight:700; transition: transform 240ms cubic-bezier(.2,.9,.3,1), box-shadow 220ms ease, opacity 220ms ease; opacity:0; pointer-events:none; }
    .mobile-bottom-nav.mbn-visible .mbn-fab { transform: translateX(var(--mbn-fab-x, 0px)) translateY(-50%); opacity:1; pointer-events:auto; }
    /* remove the glossy overlay that created extra rings so the icon looks flat like desktop */
    .mobile-bottom-nav .mbn-fab::after { display:none; }
    .mobile-bottom-nav .mbn-fab svg { display:block; width: calc(var(--mbn-container-h, 72px) * 0.6); height: calc(var(--mbn-container-h, 72px) * 0.6); transform-origin:50% 50%; animation: chat-toggle-breathe 6s ease-in-out infinite; }
    .mobile-bottom-nav .mbn-fab svg .fab-bg { fill: var(--brand-blue-dark); }
    .mobile-bottom-nav .mbn-fab svg .fab-face { fill: #fff; }
    .mobile-bottom-nav .mbn-fab svg .fab-eye { fill: var(--brand-blue-dark); transform-origin:50% 50%; transform-box: fill-box; animation: chat-eye-blink 5s steps(1,start) infinite; }
    .mobile-bottom-nav .mbn-fab svg .fab-mouth { stroke: var(--brand-blue); transform-origin:50% 50%; transform-box: fill-box; animation: chat-mouth-smile 6s ease-in-out infinite; }
    .mobile-bottom-nav .mbn-fab:hover svg { animation-duration: 2.2s; }
    .mobile-bottom-nav .mbn-fab .fab-plus { display:block; line-height:1; }

    /* Press animations */
    .mobile-bottom-nav .mbn-item:active, .mobile-bottom-nav .mbn-item.touch-active { transform: scale(0.96); }
    /* Ensure tap targets are at least 44px */
    .mobile-bottom-nav .mbn-item { padding-top:10px; padding-bottom:10px; }
    .mobile-bottom-nav .mbn-fab:active { transform: translateX(var(--mbn-fab-x, 0px)) translateY(-50%) scale(0.94); box-shadow: 0 8px 22px rgba(220,40,90,0.22); }

    /* Slightly reduce FAB horizontal offset on very small phones so it doesn't
       abut the screen edge (prevents touching the web 'wall'). Tweak value
       as needed (6px -> 8px etc). */
    @media (max-width: 420px) {
        /* Increase horizontal gap between pill and FAB and keep FAB off the screen edge */
        .mobile-bottom-nav {
            /* small extra inset from viewport edge on tiny phones */
                --mbn-fab-edge-inset: 20px;
                /* small horizontal nudge for the FAB to add a little gap from the pill */
                --mbn-fab-x: 8px;
            /* nudge the whole pill a bit left so there is more gap to the FAB */
            transform: translateX(calc(-50% - 40px)) translateY(120%);
        }
        .mobile-bottom-nav.mbn-visible {
            transform: translateX(calc(-50% - 40px)) translateY(0);
        }
        .mobile-bottom-nav .mbn-fab {
            /* place FAB just outside the pill but inset from the viewport by --mbn-fab-edge-inset */
            right: calc(-1 * var(--mbn-container-h, 72px) + 24px - var(--mbn-fab-edge-inset));
        }
    }

    /* Hide on larger viewports */

    /* Hide the chat toggle icon on mobile/tablet (keeps UI clean). On desktop
       the separate `#chat-toggle` is visible and positioned bottom-left. */
    @media (max-width: 999px) {
        #chat-toggle { display: none !important; }
    }

    /* Sliding glossy highlight that moves under the active/hovered item */
    .mobile-bottom-nav .mbn-container { --gloss-width: 64px; }
    .mobile-bottom-nav .mbn-gloss {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateX(0) translateY(-50%);
        width: var(--gloss-width);
        /* height and border-radius are calculated by JavaScript depending on
           orientation, so we leave no hard-coded values here. */
        /* make gloss itself match the pill translucency */
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.25);
        /* container shadow to lift the gloss */
        box-shadow: 0 12px 30px rgba(8,20,40,0.06);
        /* smoother, slightly slower motion for a liquid slide feeling */
        transition: transform 420ms cubic-bezier(.21,.9,.26,1), width 260ms cubic-bezier(.2,.9,.3,1), opacity 180ms ease;
        pointer-events: none;
        z-index: 0;
        mix-blend-mode: normal;
        opacity: 0.9;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }

    /* Inner blobby layer: blurred, gradient fill that morphs shape for a water-drop feel */
    .mobile-bottom-nav .mbn-gloss::before {
        content: '';
        position: absolute;
        inset: 0;
        /* start with gentle rounded shape */
        border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
        /* whiter center with a subtle grey edge for a soft rim */
        background: radial-gradient(circle at 50% 34%, rgba(255,255,255,1), rgba(250,250,250,0.96) 60%, rgba(240,240,240,0.9));
        filter: blur(5px);
        transform-origin: 50% 50%;
        transition: border-radius 520ms cubic-bezier(.21,.9,.26,1), transform 520ms cubic-bezier(.21,.9,.26,1), filter 360ms ease;
        will-change: transform, border-radius;
        pointer-events: none;
    }

    /* mobile-specific blob appearance: solid, bordered pill like example image */
    @media (max-width: 700px) {
        /* make the blob behave like a piece of glass, showing content behind */
        .mobile-bottom-nav .mbn-gloss {
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.6);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            backdrop-filter: blur(24px) saturate(200%);
        }
        /* make the overall pill container translucent on mobile (more glassy) */
        .mobile-bottom-nav .mbn-container {
            background: rgba(255,255,255,0.18);
            border: 1px solid rgba(255,255,255,0.28);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .mobile-bottom-nav .mbn-gloss::before {
            /* remove inner blur/gradient for cleaner look */
            background: transparent;
            filter: none;
        }
        /* extra scale while moving to give active feel */
        .mobile-bottom-nav .mbn-gloss.mbn-gloss-moving {
            /* scale will be applied alongside translate by JS */
            /* no static transform here */
        }
    }

    /* Brief side-bounce + morph animation applied when the gloss moves between items */
    /* make the blob slower and less springy for a more fluid desktop feel */
    .mobile-bottom-nav .mbn-gloss.mbn-gloss-bounce::before {
        animation: mbn-blob-bounce 1000ms cubic-bezier(.25,.1,.25,1);
    }

    /* toned-down, smooth morphing that stays visually inside the pill */
    @keyframes mbn-blob-bounce {
        0% {
            transform: translateX(0) scale(1,1);
            border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
        }
        30% {
            /* smaller overshoot and almost imperceptible squash/stretch */
            transform: translateX(var(--overshoot, 3px)) scale(1.008,0.992);
            border-radius: 49.5% 50.5% 39.5% 40.5% / 60% 60% 39.5% 40.5%;
        }
        65% {
            transform: translateX(calc(var(--overshoot, 3px) * -0.08)) scale(0.9985,1.0025);
            border-radius: 50% 50% 40% 40% / 59.5% 60.5% 40% 40%;
        }
        100% {
            transform: translateX(0) scale(1,1);
            border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
        }
    }

    /* Keep icons above the gloss */
    .mobile-bottom-nav .mbn-item svg { position: relative; z-index: 1; }

    /* Visual style used when dragging to show the candidate target clearly */
    .mobile-bottom-nav .mbn-item.mbn-gloss-target svg { color: var(--brand-blue, #0b63ff); transform: translateY(-3px) scale(1.02); }
    .mobile-bottom-nav .mbn-item.mbn-gloss-target .mbn-label { opacity:1; max-width:160px; margin-left:6px; }

/* desktop should also show the pill; no hiding rules required */

/* Helpers for panel hiding when switching tabs */
.mbn-panel-hidden { display: none !important; }

/* Desktop positioning: move the pill to the right edge, vertically centered,
   keep it fixed while scrolling, stack icons vertically, and avoid overlapping
   the main centered `.container` (max-width:1400px). Applied only on desktop. */
@media (min-width: 1000px) {
    .mobile-bottom-nav {
        left: auto;
        /* align with the back-to-top button (28px from right edge) */
        right: 28px;
        top: 50%;
        bottom: auto;
        /* start slightly offset to the right and slide in when visible */
        transform: translateX(40px) translateY(-50%);
        width: 60px; /* slightly wider vertical pill for larger touch targets */
        height: 310px; /* increased height to house stacked items comfortably */
        pointer-events: auto;
        opacity: 0; /* visibility still controlled by .mbn-visible via JS */
        transition: transform 480ms cubic-bezier(.21,.9,.26,1), opacity 260ms ease;
    }

    .mobile-bottom-nav.mbn-visible {
        transform: translateX(0) translateY(-50%);
        opacity: 1;
    }

    .mobile-bottom-nav .mbn-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 12px;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        /* Match the mobile pill translucency: a soft translucent white with blur and a subtle rim */
        background: rgba(255,255,255,0.18);
        /* make the pill outline match the pill translucency on desktop */
        border: 1px solid rgba(255,255,255,0.18);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 18px 40px rgba(8,20,40,0.06);
    }

    /* Keep each item visually identical but stacked vertically */
    .mobile-bottom-nav .mbn-item {
        flex: 0 0 auto;
        padding: 8px;
        min-height: 64px; /* taller items for easier interaction on desktop */
        justify-content: center;
    }

    /* Hide the text labels on desktop; keep icons only */
    .mobile-bottom-nav .mbn-item .mbn-label { display: none !important; }

    /* Slightly enlarge the active pseudo so it fills the circular item */
    .mobile-bottom-nav .mbn-item::before {
        width: 64px;
        height: 64px;
        border-radius: 999px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* FAB should sit just outside the pill on the right, vertically centred */
    .mobile-bottom-nav .mbn-fab {
        right: -12px;
        top: 50%;
        transform: translateX(var(--mbn-fab-x, 0px)) translateY(-50%);
    }

    /* On desktop we want a vertical gloss that slides up/down; enable it */
    .mobile-bottom-nav .mbn-gloss { display: block; }

    /* Desktop vertical gloss styling: centered horizontally, moves vertically */
    .mobile-bottom-nav.mbn-vertical .mbn-gloss {
        left: 50%;
        top: 0;
        transform: translateX(-50%) translateY(0);
        width: 76px; /* initial size; JS will override when positioning */
        height: 76px; /* initial size; JS will override when positioning */
        border-radius: 999px;
        /* match pill translucency for desktop as well */
        background: rgba(255,255,255,0.15);
        /* soften gloss rim to match pill translucency */
        border: 1px solid rgba(255,255,255,0.18);
        box-shadow: 0 12px 30px rgba(8,20,40,0.06);
        transition: transform 520ms cubic-bezier(.21,.9,.26,1), width 420ms cubic-bezier(.2,.9,.3,1), height 420ms cubic-bezier(.2,.9,.3,1), opacity 240ms ease;
        pointer-events: none;
        z-index: 0;
        opacity: 0.9;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }

    .mobile-bottom-nav.mbn-vertical .mbn-gloss::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
        /* whiter center with a subtle grey edge for a soft rim */
        background: radial-gradient(circle at 50% 34%, rgba(255,255,255,1), rgba(250,250,250,0.96) 60%, rgba(240,240,240,0.9));
        filter: blur(5px);
        transform-origin: 50% 50%;
        transition: border-radius 420ms cubic-bezier(.21,.9,.26,1), transform 420ms cubic-bezier(.21,.9,.26,1), filter 320ms ease;
        will-change: transform, border-radius;
        pointer-events: none;
    }

    /* Vertical blob bounce animation when gloss moves between items */
    /* slower, less jarring vertical motion */
    .mobile-bottom-nav.mbn-vertical .mbn-gloss.mbn-gloss-bounce::before {
        animation: mbn-blob-bounce-vertical 1000ms cubic-bezier(.25,.1,.25,1);
    }

    /* scale effect for desktop gloss when moving between items */
    .mobile-bottom-nav.mbn-vertical .mbn-gloss.mbn-gloss-moving {
        /* no static transform here; JS applies scale inline */
    }

    @keyframes mbn-blob-bounce-vertical {
        0% {
            transform: translateY(0) scale(1,1);
            border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
        }
        30% {
            transform: translateY(var(--overshoot, 3px)) scale(1.008,0.992);
            border-radius: 49.5% 50.5% 39.5% 40.5% / 60% 60% 39.5% 40.5%;
        }
        65% {
            transform: translateY(calc(var(--overshoot, 3px) * -0.08)) scale(0.9985,1.0025);
            border-radius: 50% 50% 40% 40% / 59.5% 60.5% 40% 40%;
        }
        100% {
            transform: translateY(0) scale(1,1);
            border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
        }
    }
}

/* Desktop: hide the chat FAB inside the pill so the chatbot is not reachable
   from the right-side pill on desktop; the standalone `#chat-toggle` remains
   available at the bottom-left. */
@media (min-width: 1000px) {
    .mobile-bottom-nav .mbn-fab { display: none !important; pointer-events: none !important; }
}

/* Fix: ensure What We Believe hero is pure white and remove faint hero overlay
   that can produce a thin grey line on some mobile browsers after launch. */
#what-we-believe,
#what-we-believe .hero-overlay {
    background-color: #ffffff !important;
    box-shadow: none !important;
    border-top: 1px solid #ffffff !important;
}

#what-we-believe::before,
#what-we-believe.hero::before {
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- Bottom-nav visual tweaks ---------- */
/* Make bottom-nav icons bolder and slightly larger for better legibility */
.mobile-bottom-nav .mbn-item svg { width: 20px !important; height: 20px !important; }
.mobile-bottom-nav .mbn-item svg path,
.mobile-bottom-nav .mbn-item svg circle,
.mobile-bottom-nav .mbn-item svg line,
.mobile-bottom-nav .mbn-item svg rect {
    stroke-width: 1.9px !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Make the sliding gloss a solid white blob behind the icon only (not the pill)
   and remove any darker shadow that appears while moving. */
.mobile-bottom-nav .mbn-gloss {
    /* subtle warm-grey tint so the white blob reads softer on bright backgrounds */
    background: rgba(245,245,246,0.98) !important;
    /* translucent white rim for the gloss to match the pill outline */
    border: 1px solid rgba(255,255,255,0.24) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.mobile-bottom-nav .mbn-gloss::before {
    background: transparent !important;
    filter: none !important;
}

/* Specifically remove any extra shadow while the gloss is moving (JS toggles this class) */
.mobile-bottom-nav .mbn-gloss.mbn-gloss-moving {
    box-shadow: none !important;
}

/* Tame the per-item pseudo shadow while dragging so multiple shadows don't stack */
.mobile-bottom-nav .mbn-item::before { box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important; }