/* Dirt Ledger mobile design, live for everyone since 2026-09-25.
   Loaded only on screens up to 768px wide (media attribute on the <link>), and
   every rule needs html.m2, which every page's <html> tag carries. Desktop never
   loads this file; its partner there is desktop-v2.css. */

/* ---------- Every page ---------- */
html.m2 { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.m2 body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
/* Homepage: a scroll box around the header stops it sticking. The page script sets body overflow: auto and
   #home-container has overflow-x: hidden; clip still stops sideways scrolling but is not a scroll box. */
html.m2 body.home-page, html.m2 #home-container { overflow-x: clip !important; overflow-y: visible !important; }
html.m2 a, html.m2 button, html.m2 [role="button"] { touch-action: manipulation; }
/* iOS zooms into any field whose text is smaller than 16px */
html.m2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.m2 select, html.m2 textarea { font-size: 16px !important; }
html.m2 :focus-visible { outline: 2px solid #f5a623; outline-offset: 2px; }
html.m2 .m2-only { display: block !important; }
html.m2 .m2-hide { display: none !important; }

/* One header size on every page: 64px bar, 40px logo */
html.m2 .nav, html.m2 .home-nav { padding: 0 16px !important; background: rgba(10, 10, 15, 0.94) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }
html.m2 .nav-inner, html.m2 .nav-container { height: 64px !important; padding: 0 !important; }
html.m2 .nav-logo img, html.m2 .nav-brand img, html.m2 .nav-logo-icon img { height: 40px !important; max-height: 40px !important; width: auto !important; }
html.m2 .nav-logo-icon { width: auto !important; }
html.m2 .nav .nav-inner { display: flex !important; align-items: center; justify-content: space-between; }
html.m2 .nav-back, html.m2 .nav .nav-link { display: inline-flex !important; align-items: center; min-height: 40px; padding: 0 14px !important; border: 1px solid rgba(245, 166, 35, 0.45) !important; border-radius: 999px !important; background: transparent !important; color: #f5a623 !important; font: 600 14px/1 'Inter', -apple-system, sans-serif !important; text-decoration: none !important; white-space: nowrap; }

/* ---------- Homepage ---------- */
/* No backdrop-filter here: it would make the full-screen menu (position: fixed) size itself to the header */
html.m2 .home-nav { position: sticky !important; top: 0; z-index: 1100; background: rgba(10, 10, 15, 0.97) !important; }
html.m2 .home-nav .nav-app-store { display: inline-flex !important; align-items: center; height: 36px; margin: 0 8px 0 auto; padding: 0 14px !important; border: 1px solid rgba(245, 166, 35, 0.55); border-radius: 999px; font: 600 13px/1 'Inter', sans-serif !important; white-space: nowrap; }
html.m2 .hamburger-btn { width: 44px !important; height: 44px !important; }
html.m2 .mobile-menu { position: fixed !important; top: 64px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; gap: 4px !important; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)) !important; background: #0a0a0f !important; border: 0 !important; overflow-y: auto; }
html.m2 .mobile-menu a { padding: 16px !important; border-radius: 12px !important; color: #e5e5e5 !important; font: 500 17px/1.2 'Inter', sans-serif !important; }
html.m2 .mobile-menu a svg { width: 22px !important; height: 22px !important; color: #f5a623; }
html.m2 .mobile-menu .mobile-signin { margin-top: 18px !important; justify-content: center; color: #0a0a0f !important; font: 700 15px/1 'Orbitron', sans-serif !important; }
html.m2 .mobile-menu a.m2-only { display: flex !important; }
html.m2 #mobileNavExplore { display: none !important; } /* replaced by an Explore link everyone sees */

/* Hero: the photo keeps its headline, plus one line about the app and the download button */
html.m2 .hero-image-wrapper { position: relative; }
html.m2 .hero-image-wrapper::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: linear-gradient(to bottom, rgba(10, 10, 15, 0) 0%, rgba(10, 10, 15, 0.6) 45%, rgba(10, 10, 15, 0.95) 100%); pointer-events: none; z-index: 5; }
html.m2 .m2-hero-sub { position: absolute; left: 50%; top: calc(12% + 50px); width: 88%; margin: 0; transform: translateX(-50%); z-index: 16; color: #fff; text-align: center; font: 500 15px/1.45 'Inter', sans-serif; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.7); }
html.m2 .m2-hero-cta { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 16; display: flex !important; flex-direction: column; align-items: center; gap: 10px; }
html.m2 .m2-appstore { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 18px; border-radius: 14px; background: #fff; color: #000; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
html.m2 .m2-appstore svg { width: 26px; height: 26px; flex: none; }
html.m2 .m2-appstore span { display: flex; flex-direction: column; font: 600 21px/1 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; letter-spacing: -0.3px; }
html.m2 .m2-appstore small { font: 500 11px/1.25 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; letter-spacing: 0.2px; }
html.m2 .m2-note { color: #d1d5db; font: 500 13px/1.3 'Inter', sans-serif; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85); }
html.m2 .hero-content, html.m2 .hero-bg-1, html.m2 .hero-bg-2 { display: none !important; }
html.m2 .hero-section { padding-bottom: 0 !important; min-height: 0 !important; }

/* "See it in action": the real app, swipe sideways */
html.m2 .m2-section { padding: 40px 0 8px; background: #0a0a0f; }
html.m2 .m2-kicker { margin: 0 16px 8px; color: #fff; text-align: center; font: 800 23px/1.2 'Orbitron', sans-serif; letter-spacing: 1px; }
html.m2 .m2-lede { margin: 0 24px 22px; color: #9ca3af; text-align: center; font: 400 15px/1.5 'Inter', sans-serif; }
html.m2 .m2-track { display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 18% 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.m2 .m2-track::-webkit-scrollbar { display: none; }
html.m2 .m2-track figure { flex: 0 0 64%; margin: 0; scroll-snap-align: center; }
html.m2 .m2-track img { display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 26px; background: #111; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
html.m2 .m2-track figcaption { margin-top: 12px; color: #9ca3af; text-align: center; font: 400 13px/1.4 'Inter', sans-serif; }
html.m2 .m2-track figcaption b { display: block; margin-bottom: 3px; color: #fff; font: 700 13px/1.3 'Orbitron', sans-serif; letter-spacing: 0.6px; }

/* The 30-second video (downloads only when tapped) */
html.m2 .m2-video-wrap { padding: 0 16px; text-align: center; }
html.m2 .m2-video-wrap video { width: 74%; max-width: 320px; aspect-ratio: 9 / 16; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; background: #000; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }

/* Features: compact cards, line icons instead of emoji */
html.m2 .features-section { padding: 44px 16px 24px !important; }
html.m2 .features-title { font-size: 23px !important; }
html.m2 .features-subtitle { font-size: 15px !important; }
html.m2 .features-grid { gap: 12px !important; margin-top: 22px !important; }
html.m2 .feature-card { display: grid !important; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; padding: 18px !important; border-radius: 16px !important; }
html.m2 .feature-card > :not(.feature-icon) { grid-column: 2; }
html.m2 .feature-icon { grid-row: 1 / span 3; width: 44px !important; height: 44px !important; margin: 0 !important; border-radius: 12px !important; font-size: 0 !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 22px 22px !important; }
html.m2 .feature-title { margin: 2px 0 6px !important; font-size: 15px !important; }
html.m2 .feature-desc { margin: 0 !important; font-size: 14px !important; line-height: 1.5 !important; }
html.m2 .m2-tag { display: inline-block !important; justify-self: start; margin: 0 0 8px; padding: 3px 9px; border: 1px solid rgba(245, 166, 35, 0.5); border-radius: 999px; color: #f5a623; font: 600 11px/1.3 'Inter', sans-serif; letter-spacing: 0.3px; }
html.m2 .feature-card:nth-child(1) .feature-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.24 7.76a6 6 0 0 1 0 8.49M7.76 16.24a6 6 0 0 1 0-8.49M19.07 4.93a10 10 0 0 1 0 14.14M4.93 19.07a10 10 0 0 1 0-14.14'/%3E%3C/svg%3E"); } /* live tracking */
html.m2 .feature-card:nth-child(2) .feature-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); } /* group rides */
html.m2 .feature-card:nth-child(3) .feature-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'/%3E%3Cline x1='8' y1='2' x2='8' y2='18'/%3E%3Cline x1='16' y1='6' x2='16' y2='22'/%3E%3C/svg%3E"); } /* offline maps */
html.m2 .feature-card:nth-child(4) .feature-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E"); } /* trail discovery */
html.m2 .feature-card:nth-child(5) .feature-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E"); } /* track stats */
html.m2 .feature-card:nth-child(6) .feature-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E"); } /* share tracks */

/* Closing call to action */
html.m2 .m2-final { padding: 40px 20px 44px; text-align: center; background: radial-gradient(ellipse at top, rgba(245, 166, 35, 0.14), transparent 70%), #0a0a0f; border-top: 1px solid rgba(255, 255, 255, 0.06); }
html.m2 .m2-final-title { margin: 0 0 8px; color: #fff; font: 900 30px/1.1 'Orbitron', sans-serif; }
html.m2 .m2-final-text { margin: 0 0 22px; color: #9ca3af; font: 400 15px/1.5 'Inter', sans-serif; }

/* Footer: links big enough to tap */
html.m2 .footer-links { gap: 4px !important; flex-wrap: wrap; justify-content: center; }
html.m2 .footer-links a, html.m2 .footer-link { display: inline-block; padding: 12px 12px !important; font-size: 15px !important; }

/* ---------- Explore / My Tracks map ---------- */
/* One swipeable row of labelled buttons instead of a grid of unlabelled icons */
html.m2 .top-buttons { top: 10px !important; left: 0 !important; right: 0 !important; max-width: none !important; transform: none !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 8px !important; padding: 2px 12px 8px; overflow-x: auto; scrollbar-width: none; }
html.m2 .top-buttons::-webkit-scrollbar { display: none; }
html.m2 .top-buttons .action-btn { flex: 0 0 auto; gap: 6px !important; padding: 9px 14px !important; border-radius: 999px !important; font-size: 13px !important; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
html.m2 .top-buttons .action-btn span { display: inline !important; }
html.m2 .top-buttons .action-btn svg { width: 16px !important; height: 16px !important; }
/* The desktop hover lift would stick after a tap on a phone */
html.m2 .top-buttons .action-btn:hover { transform: none; }
html.m2 .map-controls { top: 64px !important; right: 12px !important; }
html.m2 .map-btn { width: 44px !important; height: 44px !important; }
html.m2 .side-panel { top: 64px !important; }

/* ---------- Shared place ---------- */
html.m2 .pin-info { left: 12px !important; right: 12px !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important; max-width: none !important; transform: none !important; flex-direction: column; align-items: stretch !important; gap: 12px !important; padding: 18px 16px 16px !important; border-radius: 18px !important; text-align: center; }
html.m2 .pin-actions { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px !important; margin: 0 !important; }
html.m2 .pin-btn { justify-content: center; min-height: 46px; padding: 0 6px !important; border-radius: 12px !important; font-size: 14px !important; white-space: nowrap; }
html.m2 .pin-name { font-size: 18px !important; }

/* ---------- Shared ride ---------- */
html.m2 .ride-header, html.m2 .ride-info { padding-left: 16px !important; padding-right: 16px !important; }
html.m2 .ride-name { font-size: 22px !important; line-height: 1.25 !important; letter-spacing: 0.5px !important; }
html.m2 .ride-date { font-size: 14px !important; }
html.m2 .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
html.m2 .stat-card { padding: 14px !important; border-radius: 14px !important; }
html.m2 .stat-value { font-size: 22px !important; }
html.m2:not(.signed-in) .nav-back.m2-signedin { display: none !important; }
html.m2.signed-in .m2-getapp { display: none !important; }
html.m2 .m2-getapp { display: inline-flex !important; }

/* ---------- Live location ---------- */
html.m2 .top-bar { padding: 12px 14px !important; }

/* ---------- Text pages (privacy, terms, contact, delete account) ---------- */
html.m2 .container { padding-left: 18px !important; padding-right: 18px !important; }
html.m2 .container h1 { font-size: 28px !important; line-height: 1.2 !important; }
html.m2 .container h2 { font-size: 19px !important; line-height: 1.3 !important; }
html.m2 .container p, html.m2 .container li { font-size: 16px !important; line-height: 1.65 !important; }
html.m2 .delete-page { justify-content: flex-start !important; align-items: stretch !important; }
html.m2 .delete-page > .container { align-self: center; width: 100%; }
html.m2 .delete-page .container > .logo, html.m2 .delete-page .container > .logo + p { display: none !important; }
html.m2 .delete-page .card { margin-top: 16px; }