/* Dirt Ledger desktop design, the wide-screen partner of mobile-v2.css.
   Loaded only on screens wider than 768px (media attribute on the <link>), and
   every rule needs html.m2, which every page's <html> tag carries. Phones never
   load this file. */

/* ---------- Every page ---------- */
html.m2 body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Homepage: a scroll box around the header stops it sticking. The page script sets body overflow: auto;
   clip still stops sideways scrolling but is not a scroll box. (The map pages keep their own body overflow.) */
html.m2 body.home-page { overflow-x: clip !important; overflow-y: visible !important; }
html.m2 :focus-visible { outline: 2px solid #f5a623; outline-offset: 3px; }
html.m2 .m2-only, html.m2 .d2-only { display: block !important; }

/* One header on every page: 72px bar, 44px logo, content 1200px wide */
html.m2 .nav, html.m2 .home-nav { padding: 0 32px !important; background: rgba(10, 10, 15, 0.94) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }
html.m2 .nav-inner { max-width: 1200px !important; height: 72px !important; margin: 0 auto !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: space-between; gap: 16px; }
html.m2 .nav-logo { margin: 0 !important; flex: none; }
html.m2 .nav-logo-icon { width: auto !important; }
html.m2 .nav-logo img, html.m2 .nav-logo-icon img { display: block; height: 44px !important; max-height: 44px !important; width: auto !important; }
html.m2 .nav-back, html.m2 .nav .nav-link { display: inline-flex !important; align-items: center; gap: 8px; height: 40px; padding: 0 18px !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, BlinkMacSystemFont, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; white-space: nowrap; transition: background-color 0.2s, border-color 0.2s; }
html.m2 .nav-back:hover, html.m2 .nav .nav-link:hover { background: rgba(245, 166, 35, 0.1) !important; border-color: #f5a623 !important; transform: none !important; box-shadow: none !important; }
html.m2 .nav-back svg { width: 16px !important; height: 16px !important; }
html.m2 .footer-logo img { height: 56px !important; width: auto !important; }

/* ---------- Homepage ---------- */
html.m2 .home-nav { position: sticky !important; top: 0; z-index: 1100; background: rgba(10, 10, 15, 0.86) !important; -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); }
html.m2 .home-nav .nav-inner { justify-content: flex-start; gap: 8px; }
html.m2 .home-nav .nav-links { margin-left: auto; gap: 4px; }
html.m2 .home-nav .nav-link { align-items: center; gap: 8px; height: 40px; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; color: #d1d5db !important; font: 500 14px/1 'Inter', -apple-system, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
html.m2 .home-nav .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, 0.06) !important; }
html.m2 .home-nav .nav-link.active { color: #f5a623 !important; background: rgba(245, 166, 35, 0.1) !important; }
html.m2 .home-nav .nav-link svg { width: 16px; height: 16px; }
html.m2 #navExplore { display: flex !important; } /* everyone gets Explore, not only signed-in riders */
/* No !important on display: the page script shows and hides Sign In / Sign Out with an inline style
   (display: block), so the 38px line height is what centres the text */
html.m2 .home-nav .nav-signin { display: inline-flex; align-items: center; height: 40px; margin-left: 4px; padding: 0 18px !important; border: 1px solid rgba(245, 166, 35, 0.5); border-radius: 999px !important; background: transparent !important; color: #f5a623 !important; font: 600 14px/38px 'Inter', -apple-system, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
html.m2 .home-nav .nav-signin:hover { background: rgba(245, 166, 35, 0.1) !important; transform: none !important; box-shadow: none !important; }
html.m2 .home-nav .nav-app-store { display: inline-flex !important; align-items: center; height: 40px; margin-left: 8px; padding: 0 20px; border-radius: 999px; background: linear-gradient(135deg, #f5a623, #e67e22); color: #0a0a0f !important; font: 700 14px/1 'Inter', -apple-system, sans-serif; text-decoration: none; white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s; }
html.m2 .home-nav .nav-app-store:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(245, 166, 35, 0.35); }

/* Hero: the photo keeps its headline, plus one line about the app and the download button.
   max-width 2560px on the image stays as it is (browser-zoom rule in CLAUDE.md). */
html.m2 .hero-desktop-wrapper { overflow: hidden; }
html.m2 .hero-desktop-wrapper .hero-desktop-image { max-height: calc(100vh - 72px); min-height: 560px; }
html.m2 .hero-desktop-wrapper::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(to bottom, rgba(10, 10, 15, 0) 0%, rgba(10, 10, 15, 0.55) 45%, rgba(10, 10, 15, 0.94) 100%); pointer-events: none; z-index: 5; }
html.m2 .hero-desktop-wrapper .hero-title-overlay { top: 28%; }
html.m2 .hero-subtitle-overlay { bottom: 146px; max-width: 760px; color: #fff; font: 500 21px/1.5 'Inter', -apple-system, sans-serif; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.7); }
html.m2 .hero-subtitle-overlay strong { color: #fff; font-weight: 700; text-shadow: none; }
html.m2 .d2-hero-cta { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 16; display: flex !important; flex-direction: column; align-items: center; gap: 12px; }
html.m2 .m2-appstore { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px 0 20px; border-radius: 14px; background: #fff; color: #000 !important; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); transition: transform 0.2s, box-shadow 0.2s; }
html.m2 .m2-appstore:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55); }
html.m2 .m2-appstore svg { width: 28px; height: 28px; flex: none; }
html.m2 .m2-appstore span { display: flex; flex-direction: column; text-align: left; font: 600 22px/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 14px/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; }

/* "See it in action": the real app, all six screens side by side */
html.m2 .m2-section { padding: 96px 32px 16px; background: #0a0a0f; }
html.m2 .m2-kicker { margin: 0 0 12px; color: #fff; text-align: center; font: 800 clamp(28px, 2.8vw, 40px)/1.15 'Orbitron', sans-serif; letter-spacing: 1.5px; }
html.m2 .m2-lede { max-width: 600px; margin: 0 auto 44px; color: #9ca3af; text-align: center; font: 400 17px/1.6 'Inter', sans-serif; }
html.m2 .m2-swipe { display: none; }
html.m2 .m2-track { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 20px; max-width: 1200px; margin: 0 auto; }
html.m2 .m2-track figure { margin: 0; }
html.m2 .m2-track img { display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; background: #111; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); transition: transform 0.3s; }
html.m2 .m2-track figure:hover img { transform: translateY(-4px); }
html.m2 .m2-track figcaption { margin-top: 14px; color: #9ca3af; text-align: center; font: 400 13px/1.45 'Inter', sans-serif; }
html.m2 .m2-track figcaption b { display: block; margin-bottom: 4px; color: #fff; font: 700 13px/1.3 'Orbitron', sans-serif; letter-spacing: 0.6px; }

/* The 30-second video beside a few words (downloads only when played) */
html.m2 section.m2-watch { display: grid !important; grid-template-columns: minmax(0, 500px) 300px; grid-template-areas: "title video" "text video"; justify-content: center; align-items: center; column-gap: 80px; row-gap: 18px; padding: 96px 32px; }
html.m2 .m2-watch .m2-kicker { grid-area: title; align-self: end; margin: 0; text-align: left; }
html.m2 .m2-watch .m2-video-wrap { grid-area: video; }
html.m2 .m2-watch video { display: block; width: 300px; aspect-ratio: 9 / 16; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
html.m2 .d2-watch-text { grid-area: text; align-self: start; }
html.m2 .d2-watch-text p { margin: 0 0 28px; color: #9ca3af; font: 400 18px/1.65 'Inter', sans-serif; }

/* Features: line icons instead of emoji, three to a row */
html.m2 .features-section { padding: 96px 32px !important; }
html.m2 .features-header { margin-bottom: 48px; }
html.m2 .features-title { font-size: clamp(28px, 2.8vw, 40px) !important; letter-spacing: 1.5px; }
html.m2 .features-subtitle { max-width: 560px; font-size: 17px !important; line-height: 1.6; }
html.m2 .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; max-width: 1200px !important; }
html.m2 .feature-card { padding: 28px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; background: linear-gradient(180deg, #15151f, #0f0f16) !important; }
html.m2 .feature-card:hover { transform: translateY(-4px) !important; border-color: rgba(245, 166, 35, 0.4) !important; }
html.m2 .feature-icon { width: 48px !important; height: 48px !important; margin: 0 0 20px !important; border: 1px solid rgba(245, 166, 35, 0.3) !important; border-radius: 12px !important; background-color: rgba(245, 166, 35, 0.12) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 24px 24px !important; font-size: 0 !important; }
html.m2 .feature-title { margin: 0 0 10px !important; font-size: 16px !important; letter-spacing: 0.8px; }
html.m2 .feature-desc { margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; }
html.m2 .m2-tag { display: inline-block !important; margin: 0 0 10px; padding: 3px 10px; border: 1px solid rgba(245, 166, 35, 0.5); border-radius: 999px; color: #f5a623; font: 600 12px/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: 104px 32px 112px; 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 12px; color: #fff; font: 900 clamp(32px, 3.4vw, 48px)/1.1 'Orbitron', sans-serif; letter-spacing: 1px; }
html.m2 .m2-final-text { margin: 0 0 30px; color: #9ca3af; font: 400 18px/1.5 'Inter', sans-serif; }

/* Footer */
html.m2 .home-footer { padding: 40px 32px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
html.m2 .home-footer .footer-inner { max-width: 1200px; }
html.m2 .home-footer .nav-logo-icon img { height: 40px !important; max-height: 40px !important; }
html.m2 .home-footer .footer-links { gap: 8px; }
html.m2 .home-footer .footer-link { padding: 8px 10px; }

/* Narrower desktop windows */
@media (max-width: 1099px) {
  html.m2 .m2-track { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; gap: 36px 24px; }
}
@media (max-width: 999px) {
  html.m2 section.m2-watch { grid-template-columns: minmax(0, 560px); grid-template-areas: "title" "video" "text"; row-gap: 28px; }
  html.m2 .m2-watch .m2-kicker, html.m2 .d2-watch-text { text-align: center; }
  html.m2 .m2-watch .m2-video-wrap { justify-self: center; }
  html.m2 .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- Shared ride ---------- */
/* Signed-out viewers get "Get the app"; signed-in riders keep "Back to Dashboard" */
html.m2:not(.signed-in) .nav-back.m2-signedin { display: none !important; }
html.m2 .m2-getapp { display: inline-flex !important; }
html.m2.signed-in .m2-getapp { display: none !important; }

/* ---------- Delete account ---------- */
/* The shared header replaces the old text logo */
html.m2 .delete-page { justify-content: flex-start !important; align-items: stretch !important; }
html.m2 .delete-page > .container { align-self: center; width: 100%; padding: 40px 20px 64px !important; }
html.m2 .delete-page .container > .logo, html.m2 .delete-page .container > .logo + p { display: none !important; }