1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="generator" content="Astro v7.2.9"> 7 <link rel="icon" type="image/svg+xml" href="/favicon.svg"> 8 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> 9 <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 10 <link rel="manifest" href="/site.webmanifest"> 11 <meta name="apple-mobile-web-app-title" content="MECH AI"> 12 <meta name="application-name" content="MECH AI"> 13 14 <!-- 15 Fonts are self-hosted (variable woff2 in /public/fonts, @font-face in 16 src/styles/fonts.css, bundled via global.css). No cross-origin Google 17 Fonts request. Preload only the latin Inter file â it covers the LCP 18 heading (wght 800) and body; JetBrains Mono (mono micro-labels) and 19 latin-ext load on demand. crossorigin is required even same-origin 20 because fonts are always fetched in CORS mode. 21 --> 22 <link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin> 23 24 <title>MECH AI â AI Mechanic & Car Repair Diagnostics</title> 25 <meta name="description" content="MECH AI is the automotive multitool â AI mechanic, OBD2 scanner, repair guides, wiring diagrams, parts search, and shop management in one app. Free to start."> 26 <link rel="canonical" href="https://mechai.app/"> 27 <!-- 28 hreflang. Pages with a translated counterpart (src/data/i18n-routes) 29 declare BOTH sides plus x-default pointing at English; every other 30 page keeps the self-referencing en + x-default pair, which tells 31 Google it is the default for any language not specifically 32 targeted. Reciprocity is enforced by the build gate â a one-way 33 hreflang is ignored by Google and is worse than none, because it 34 reads as a mistake in the pair. 35 --> 36 37 <link rel="alternate" hreflang="en" href="https://mechai.app/"> 38 <link rel="alternate" hreflang="es-419" href="https://mechai.app/es/"> 39 <link rel="alternate" hreflang="x-default" href="https://mechai.app/"> 40 41 <link rel="alternate" type="application/rss+xml" title="The Wrench Report â MECH AI" href="/rss.xml"> 42 <meta name="robots" content="index, follow, max-image-preview:large"> 43 <meta name="author" content="MECH.AI LLC"> 44 45 <!-- OpenGraph --> 46 <meta property="og:type" content="website"> 47 <meta property="og:url" content="https://mechai.app/"> 48 <meta property="og:title" content="MECH AI â AI Mechanic & Car Repair Diagnostics"> 49 <meta property="og:description" content="MECH AI is the automotive multitool â AI mechanic, OBD2 scanner, repair guides, wiring diagrams, parts search, and shop management in one app. Free to start."> 50 <meta property="og:image" content="https://mechai.app/og-default.png"> 51 <meta property="og:image:width" content="1200"> 52 <meta property="og:image:height" content="630"> 53 <meta property="og:image:alt" content="MECH AI â Your car, explained."> 54 <meta property="og:site_name" content="MECH AI"> 55 <meta property="og:locale" content="en_US"> 56 <meta property="og:locale:alternate" content="es_MX"> 57 58 59 60 61 62 <!-- Twitter --> 63 <meta name="twitter:card" content="summary_large_image"> 64 <meta name="twitter:title" content="MECH AI â AI Mechanic & Car Repair Diagnostics"> 65 <meta name="twitter:description" content="MECH AI is the automotive multitool â AI mechanic, OBD2 scanner, repair guides, wiring diagrams, parts search, and shop management in one app. Free to start."> 66 <meta name="twitter:image" content="https://mechai.app/og-default.png"> 67 <meta name="twitter:image:alt" content="MECH AI â Your car, explained."> 68 69 <!-- Sitemap discovery --> 70 <link rel="sitemap" type="application/xml" href="/sitemap-index.xml"> 71 72 <!-- JSON-LD structured data (Organization, SoftwareApplication, WebSite, + per-page) --> 73
73<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","@id":"https://mechai.app/#organization","name":"MECH AI","legalName":"MECH.AI LLC","url":"https://mechai.app","logo":"https://mechai.app/icon-512.png","description":"MECH AI is the automotive multitool â an AI mechanic, OBD2 scanner, repair guides, wiring diagrams, parts search, and shop management in one app, in seven languages, free to start.","disambiguatingDescription":"MECH AI is an automotive diagnostic and repair application (OBD-II trouble-code lookup, symptom diagnosis, repair guidance, parts). It is unrelated to any foreign-exchange, trading, investment, or \"MechAI FX\" financial product.","knowsAbout":["Automotive diagnostics","OBD-II diagnostic trouble codes","Check engine light","Vehicle repair","Car maintenance","Technical service bulletins","Auto parts"],"foundingDate":"2024","address":{"@type":"PostalAddress","addressLocality":"Draper","addressRegion":"UT","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","email":"[email protected]","contactType":"customer support","availableLanguage":["en"]}],"founder":{"@id":"https://mechai.app/why/#founder"},"sameAs":["https://x.com/mech_app","https://www.crunchbase.com/organization/mech-ai","https://www.linkedin.com/company/mechai/","https://www.facebook.com/mechaiapp/","https://apps.apple.com/us/app/mech-ai-diagnostic-repair/id6479862739","https://play.google.com/store/apps/details?id=app.mechai.mobile"]}</script>
73<script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","@id":"https://mechai.app/#app","name":"MECH AI","applicationCategory":"AutomotiveApplication","operatingSystem":"iOS, Android, Web","description":"MECH AI is the automotive multitool â AI mechanic, OBD2 scanner, repair guides, wiring diagrams, parts search, and shop management in one app. Free to start.","url":"https://mechai.app","image":"https://mechai.app/og-default.png","sameAs":["https://x.com/mech_app","https://www.crunchbase.com/organization/mech-ai","https://www.linkedin.com/company/mechai/","https://www.facebook.com/mechaiapp/","https://apps.apple.com/us/app/mech-ai-diagnostic-repair/id6479862739","https://play.google.com/store/apps/details?id=app.mechai.mobile"],"inLanguage":["en","es","pt-BR","ru","de","fr","it"],"featureList":["AI Mechanic chat with vehicle context","OBD2 code reading over BLE and WiFi ELM327 adapters","Guided diagnostics with resumable sessions","Digital garage with Vehicle Health score and timeline","Technical Service Bulletin (TSB) lookups in plain English","AI wiring, vacuum, cooling and fuel-system diagrams","OEM repair and wiring diagrams (AUTOSHOP)","Step-by-step repair guides","Amazon and eBay parts search","NHTSA recall alerts"],"installUrl":"https://apps.apple.com/us/app/mech-ai-diagnostic-repair/id6479862739","downloadUrl":"https://play.google.com/store/apps/details?id=app.mechai.mobile","offers":[{"@type":"Offer","name":"FREE","price":"0","priceCurrency":"USD","description":"free, ad-supported"},{"@type":"Offer","name":"DIY","price":"7.99","priceCurrency":"USD","description":"billed monthly"},{"@type":"Offer","name":"DIY (yearly)","price":"66.99","priceCurrency":"USD","description":"billed yearly"},{"@type":"Offer","name":"MECHANIC","price":"19.99","priceCurrency":"USD","description":"billed monthly"},{"@type":"Offer","name":"MECHANIC (yearly)","price":"167.99","priceCurrency":"USD","description":"billed yearly"},{"@type":"Offer","name":"AUTOSHOP","price":"59.99","priceCurrency":"USD","description":"billed monthly"},{"@type":"Offer","name":"AUTOSHOP (yearly)","price":"499.99","priceCurrency":"USD","description":"billed yearly"}],"publisher":{"@id":"https://mechai.app/#organization"}}</script>
73<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","@id":"https://mechai.app/#website","name":"MECH AI","alternateName":["MECH AI app","AI Mechanic","MECH.AI"],"url":"https://mechai.app","publisher":{"@id":"https://mechai.app/#organization"}}</script>
73<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","@id":"https://mechai.app/","url":"https://mechai.app/","name":"MECH AI â AI Mechanic & Car Repair Diagnostics","description":"MECH AI is the automotive multitool â AI mechanic, OBD2 scanner, repair guides, wiring diagrams, parts search, and shop management in one app. Free to start.","isPartOf":{"@id":"https://mechai.app/#website"},"inLanguage":"en","dateModified":"2026-09-17T14:10:02-06:00"}</script>
73<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Do I need an OBD-II scanner?","acceptedAnswer":{"@type":"Answer","text":"No â works from your words. Describe the symptom, paste a code you saw on a loaner scanner, or show it a photo of the dashboard. And if you have a Bluetooth (BLE) ELM327 adapter, the iOS and Android app pairs with it directly to scan and read your codes."}},{"@type":"Question","name":"Does it work for any make and model?","acceptedAnswer":{"@type":"Answer","text":"Yes. The AI Mechanic covers everything from common daily drivers to older trucks and imports. The more specific your vehicle details (year, make, model, trim, mileage), the more specific the advice."}},{"@type":"Question","name":"Is this just a ChatGPT wrapper?","acceptedAnswer":{"@type":"Answer","text":"No. MECH AI is built on a frontier AI model, wrapped in automotive-specific reasoning, your garage context, and integrated tools (TSB lookups, parts search, diagnostic trees). Generic chatbots don't know what year your truck is."}},{"@type":"Question","name":"Will it tell me to go to a shop?","acceptedA
73nswer":{"@type":"Answer","text":"Often. That's the point. If the fix needs a lift, special tools, or skills you don't have, MECH AI will say so â and tell you what the shop should charge."}},{"@type":"Question","name":"Does MECH AI work in my language?","acceptedAnswer":{"@type":"Answer","text":"Yes â MECH AI works in 7 languages: English, Spanish, Portuguese, Russian, German, French, and Italian. The AI answers in your language, and the app is available worldwide."}},{"@type":"Question","name":"Can I cancel anytime?","acceptedAnswer":{"@type":"Answer","text":"Yes. Cancel anytime â mobile subscriptions in your App Store or Google Play settings, web subscriptions from the in-app subscription page. No cancellation phone call required."}}]}</script>
73<script type="application/ld+json">{"@context":"https://schema.org","@type":"VideoObject","name":"MECH AI â the AI mechanic in your pocket","description":"Diagnose, fix, and maintain any vehicle with honest, vehicle-specific answers from the AI Mechanic.","thumbnailUrl":["https://i.ytimg.com/vi/ml4bEoyor6w/maxresdefault.jpg"],"uploadDate":"2026-06-30T00:00:00Z","embedUrl":"https://www.youtube-nocookie.com/embed/ml4bEoyor6w","duration":"PT46S","publisher":{"@id":"https://mechai.app/#organization"}}</script>
73 74 75 <meta name="theme-color" content="#050505"> 76 77 78
78<script>document.documentElement.classList.add('js');</script>
78 79
79<script> 80 (function(){ 81 try { 82 var qclid = new URLSearchParams(location.search).get('qclid'); 83 if (!qclid) return; 84 var d = new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toUTCString(); 85 document.cookie = '_qclid=' + encodeURIComponent(qclid) 86 + ';expires=' + d 87 + ';path=/;domain=.mechai.app;secure;samesite=lax'; 88 } catch (e) { /* private mode / cookies disabled */ } 89 })(); 90 </script>
90 91
91<script> 92 (function () { 93 try { 94 var qs = new URLSearchParams(location.search); 95 var clickIds = ['rdt_cid', 'fbclid', 'gclid', 'msclkid', 'ttclid']; 96 var utms = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']; 97 var exp = new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toUTCString(); 98 clickIds.concat(utms).forEach(function (k) { 99 var v = qs.get(k); 100 if (!v) return; 101 document.cookie = '_' + k + '=' + encodeURIComponent(v) 102 + ';expires=' + exp 103 + ';path=/;domain=.mechai.app;secure;samesite=lax'; 104 }); 105 /* utm_* survives page NAVIGATION via the cookies above â 106 the qs-only rewrite kept campaign params only while the 107 visitor stayed on the landing page; one click deeper and 108 every app CTA lost them (fixed 2026-07-09). Cookie fills 109 in, the current URL always wins (freshest click). 110 Click-ids are NOT cookie-forwarded onto URLs: the app 111 already reads their cookies directly (attribution.ts). */ 112 var readCookie = function (name) { 113 var m = document.cookie.match(new RegExp('(?:^|;)\\s*' + name + '=([^;]*)')); 114 if (!m) return null; 115 try { return decodeURIComponent(m[1]); } catch (e) { return m[1]; } 116 }; 117 var forward = new URLSearchParams(); 118 utms.forEach(function (k) { 119 var v = readCookie('_' + k); 120 if (v) forward.set(k, v); 121 }); 122 qs.forEach(function (val, key) { 123 if (key.indexOf('utm_') === 0 || clickIds.indexOf(key) !== -1) { 124 forward.set(key, val); 125 } 126 }); 127 if (!forward.toString()) return; 128 /* AppsFlyer ignores utm_* â install attribution comes from 129 pid/c/af_channel. site-config gives shared OneLinks an 130 explicit website/organic default so dashboard-era 131 Instagram presets never leak into organic traffic. When 132 inbound campaign UTMs exist, mirror them over that 133 website default at click time. Links with another custom 134 pid (for example /reviews) stay fixed. pid values become 135 permanent case-sensitive AppsFlyer media-source buckets. */ 136 var afPid = forward.get('utm_source'); 137 var afCampaign = forward.get('utm_campaign'); 138 var afChannel = forward.get('utm_medium'); 139 /* The rewrite must wait for the DOM: this script runs 140 synchronously in <head> (required for the cookie capture 141 above), where the <body> anchors don't exist yet â run 142 immediately, querySelectorAll matches nothing and the 143 forwarding silently no-ops (bug fixed 2026-07-01). */ 144 var rewrite = function () { 145 document.querySelectorAll( 146 'a[data-cta="app"], a[href*="prod.mechai.app"], a[href*="app.mechai.app"]' 147 ).forEach(function (a) { 148 try { 149 var u = new URL(a.href); 150 forward.forEach(function (val, key) { u.searchParams.set(key, val); }); 151 if ( 152 afPid && 153 /(^|\.)onelink\.me$/.test(u.hostname) && 154 (!u.searchParams.has('pid') || u.searchParams.get('pid') === 'website') 155 ) { 156 u.searchParams.set('pid', afPid); 157 if (afCampaign) u.searchParams.set('c', afCampaign); 158 if (afChannel) u.searchParams.set('af_channel', afChannel); 159 } 160 /* Preserve the same paid attribution through a 161 OneLink desktop/web fallback. af_web_dp is a 162 nested app URL, so rewriting only the outer 163 OneLink would lose campaign data on redirect. */ 164 var fallback = u.searchParams.get('af_web_dp'); 165 if (fallback) { 166 try { 167 var fallbackUrl = new URL(fallback); 168 forward.forEach(function (val, key) { 169 fallbackUrl.searchParams.set(key, val); 170 }); 171 u.searchParams.set('af_web_dp', fallbackUrl.toString()); 172 } catch (e) {} 173 } 174 a.href = u.toString(); 175 } catch (e) {} 176 }); 177 }; 178 if (document.readyState === 'loading') { 179 document.addEventListener('DOMContentLoaded', rewrite); 180 } else { 181 rewrite(); 182 } 183 } catch (e) { /* private mode / cookies disabled â never break the page */ } 184 })(); 185 </script>
185 186
186<script> 187 (function () { 188 window.__mechaiDeferThirdParty = function (start) { 189 var started = false; 190 var run = function () { 191 if (started) return; 192 started = true; 193 start(); 194 }; 195 var schedule = function () { 196 if ('requestIdleCallback' in window) { 197 window.requestIdleCallback(run, { timeout: 2500 }); 198 } else { 199 window.setTimeout(run, 1200); 200 } 201 }; 202 window.addEventListener('pointerdown', run, { once: true, passive: true }); 203 window.addEventListener('keydown', run, { once: true }); 204 if (document.readyState === 'complete') schedule(); 205 else window.addEventListener('load', schedule, { once: true }); 206 }; 207 })(); 208 </script>
208<script>(function(){const openAiPixelId = "HhAcSspdQfL6ggpWcF4TCW"; 209 210 (function () { 211 var allowed = ['www.mechai.app', 'mechai.app']; 212 var ok = allowed.indexOf(location.hostname) !== -1 213 || location.search.indexOf('openai_pixel_test=1') !== -1; 214 if (!ok) return; 215 var load = function () { 216 (function (w, d, s, u) { 217 if (w.oaiq) return; 218 var q = function () { q.q.push(arguments); }; 219 q.q = []; 220 w.oaiq = q; 221 var js = d.createElement(s); 222 js.async = true; 223 js.src = u; 224 var f = d.getElementsByTagName(s)[0]; 225 f.parentNode.insertBefore(js, f); 226 })(window, document, 'script', 'https://bzrcdn.openai.com/sdk/oaiq.min.js'); 227 oaiq('init', { pixelId: openAiPixelId }); 228 }; 229 if (location.search.indexOf('openai_pixel_test=1') !== -1) load(); 230 else window.__mechaiDeferThirdParty(load); 231 })(); 232 })();</script>
232 233 234 235
235<script>(function(){const gaId = "G-5L5C34MBYD"; 236const awId = "AW-16585849566"; 237const aiHosts = ["chatgpt.com","chat.openai.com","openai.com","perplexity.ai","copilot.microsoft.com","gemini.google.com","claude.ai","you.com","duckduckgo.com"]; 238 239 /* Astro wraps define:vars scripts in an IIFE, so a bare 240 `function gtag()` never reaches window.* â and every 241 window.gtag consumer (the data-event delegation below, 242 lib/analytics.ts trackEvent) silently no-ops. Assign 243 to window explicitly. */ 244 window.dataLayer = window.dataLayer || []; 245 window.gtag = function gtag(){window.dataLayer.push(arguments);}; 246 window.gtag('js', new Date()); 247 const linkerDomains = ['prod.mechai.app', 'app.mechai.app', 'mobile.mechai.app']; 248 if (gaId) window.gtag('config', gaId, { anonymize_ip: true, linker: { domains: linkerDomains } }); 249 if (awId) window.gtag('config', awId, { linker: { domains: linkerDomains } }); 250 var load = function () { 251 var js = document.createElement('script'); 252 js.async = true; 253 js.src = 'https://www.googletagmanager.com/gtag/js?id=' + (gaId || awId); 254 document.head.appendChild(js); 255 }; 256 /* AI-answer attribution. GA4 buckets chatgpt.com and 257 perplexity.ai under generic "Referral" alongside every 258 other site, and a custom channel group needs GA4 admin. 259 Tagging the hit ourselves needs neither: the event 260 carries the source, so it can be segmented today. 261 Matching rule mirrors matchAiSource() in 262 scripts/lib/ai-referrer.mjs (unit-tested) â exact host 263 or a true subdomain, anchored on a leading dot. */ 264 try { 265 var aiRef = document.referrer ? new URL(document.referrer).hostname.toLowerCase() : ''; 266 var aiSource = aiRef && aiHosts.filter(function (h) { 267 return aiRef === h || aiRef.slice(-(h.length + 1)) === '.' + h; 268 })[0]; 269 if (aiSource) { 270 window.gtag('set', 'user_properties', { ai_source: aiSource }); 271 window.gtag('event', 'ai_referral', { 272 ai_source: aiSource, 273 landing_page: location.pathname, 274 }); 275 document.cookie = '_ai_ref=' + encodeURIComponent(aiSource) 276 + ';expires=' + new Date(Date.now() + 90 * 864e5).toUTCString() 277 + ';path=/;domain=.mechai.app;secure;samesite=lax'; 278 } 279 } catch (e) { /* never break the page for a measurement */ } 280 281 if (location.search.indexOf('ga_debug=1') !== -1) load(); 282 else window.__mechaiDeferThirdParty(load); 283 })();</script>
283 284 285
285<script>(function(){const gtmId = "GTM-PSDPPMPG"; 286 287 (function(){ 288 var allowed = ['www.mechai.app', 'mechai.app']; 289 var ok = allowed.indexOf(location.hostname) !== -1 290 || location.search.indexOf('quora_pixel_test=1') !== -1; 291 if (!ok) return; 292 var load = function () { 293 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 294 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 295 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 296 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 297 })(window,document,'script','dataLayer',gtmId); 298 }; 299 if (location.search.indexOf('quora_pixel_test=1') !== -1) load(); 300 else window.__mechaiDeferThirdParty(load); 301 })(); 302 })();</script>
302 303 <link rel="stylesheet" href="/_astro/BaseLayout.BCsSpKOt.css"> 304<link rel="stylesheet" href="/_astro/index.em_GBlo9.css"> 305<style>body:has(dialog[open]) .mobile-cta-bar[data-astro-cid-xxqztafz]{transform:translateY(120%)}.mobile-cta-bar[data-astro-cid-xxqztafz]{transition:transform .25s var(--ease-brand,ease)}.mobile-cta-bar[data-astro-cid-xxqztafz].is-hidden{transform:translateY(120%)} 306</style></head> 307 <body class="bg-brand-bg text-white antialiased">
vendor: 97 bytes, lines 307-309
307 308 <noscript> 309 <iframe src="https://www.googletagmanager.com/ns.html?id=
309GTM-PSDPPMPG
vendor: 108 bytes, lines 309-311
309" height="0" width="0" style="display:none;visibility:hidden"></iframe> 310 </noscript> 311
311<a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:rounded-md focus:bg-white focus:px-4 focus:py-2 focus:text-black"> 312 Skip to content 313 </a> 314 <nav aria-label="Main navigation" class="fixed top-0 z-50 w-full border-b border-white/10 bg-brand-bg/80 backdrop-blur-md"> 315 <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-6 xl:h-20"> 316 <a href="/" class="group flex items-center gap-2"> 317 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent transition group-hover:bg-brand-accent/25" aria-hidden="true"> 318 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg> 319 </span> 320 <span class="text-base font-bold tracking-tight">MECH AI</span> 321</a> 322 323 <div class="hidden items-center gap-8 xl:flex"> 324 <a href="/how-it-works/" class="text-sm font-medium text-white/70 transition hover:text-white"> 325 How it works 326 </a><a href="/#features" class="text-sm font-medium text-white/70 transition hover:text-white"> 327 Features 328 </a><a href="/demo/" class="text-sm font-medium text-white/70 transition hover:text-white"> 329 Demo 330 </a><a href="/pricing/" class="text-sm font-medium text-white/70 transition hover:text-white"> 331 Pricing 332 </a><a href="/for-shops/" class="text-sm font-medium text-white/70 transition hover:text-white"> 333 For Shops 334 </a> 335 </div> 336 337 <div class="hidden items-center gap-3 xl:flex"> 338 <a href="/es/" hreflang="es-419" class="text-sm font-medium text-white/70 transition hover:text-white" data-event="language_switch" data-event-location="nav_desktop"> 339 Español 340 </a> 341 <a href="https://prod.mechai.app/v2/login" class="btn-link" data-event="login_click" data-event-location="nav_desktop"> 342 Log in 343 </a> 344 <a href="https://prod.mechai.app/v2/login" class="btn-primary" data-event="sign_up_click" data-event-location="nav_desktop"> 345 Get started 346 </a> 347 </div> 348 349 <!-- 350 Mobile menu â native <dialog>, zero JS framework. showModal() gives 351 us focus trapping, Escape handling, and focus restore for free; 352 the tiny script below only toggles open/close + scroll lock. 353 --> 354 <div class="xl:hidden"> 355 <button type="button" id="nav-menu-open" aria-label="Open menu" class="flex h-11 w-11 items-center justify-center rounded-lg border border-white/10 bg-white/5 text-white/90"> 356 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"> 357 <line x1="4" x2="20" y1="6" y2="6"></line> 358 <line x1="4" x2="20" y1="12" y2="12"></line> 359 <line x1="4" x2="20" y1="18" y2="18"></line> 360 </svg> 361 </button> 362 </div> 363 </div> 364</nav> 365 366<dialog id="nav-menu" aria-label="Site menu" class="m-0 h-full max-h-none w-full max-w-none bg-brand-bg p-0 text-white backdrop:bg-transparent"> 367 <div class="flex h-full flex-col"> 368 <div class="flex h-16 flex-none items-center justify-between border-b border-white/10 px-6"> 369 <a href="/" class="group flex items-center gap-2"> 370 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent transition group-hover:bg-brand-accent/25" aria-hidden="true"> 371 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg> 372 </span> 373 <span class="text-base font-bold tracking-tight">MECH AI</span> 374</a> 375 <button type="button" id="nav-menu-close" aria-label="Close menu" class="flex h-11 w-11 items-center justify-center rounded-lg border border-white/10 bg-white/5 text-white/90"> 376 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"> 377 <path d="M18 6 6 18"></path> 378 <path d="m6 6 12 12"></path> 379 </svg> 380 </button> 381 </div> 382 383 <nav class="flex-1 overflow-y-auto px-6 pt-6 pb-4" style="-webkit-overflow-scrolling: touch;"> 384 <ul class="flex flex-col gap-1"> 385 <li> 386 <a href="/how-it-works/" class="block rounded-xl border border-transparent px-4 py-4 text-lg font-semibold text-white/90 transition hover:border-white/10 hover:bg-white/5 hover:text-white active:bg-white/5"> 387 How it works 388 </a> 389 </li><li> 390 <a href="/#features" class="block rounded-xl border border-transparent px-4 py-4 text-lg font-semibold text-white/90 transition hover:border-white/10 hover:bg-white/5 hover:text-white active:bg-white/5"> 391 Features 392 </a> 393 </li><li> 394 <a href="/demo/" class="block rounded-xl border border-transparent px-4 py-4 text-lg font-semibold text-white/90 transition hover:border-white/10 hover:bg-white/5 hover:text-white active:bg-white/5"> 395 Demo 396 </a> 397 </li><li> 398 <a href="/pricing/" class="block rounded-xl border border-transparent px-4 py-4 text-lg font-semibold text-white/90 transition hover:border-white/10 hover:bg-white/5 hover:text-white active:bg-white/5"> 399 Pricing 400 </a> 401 </li><li> 402 <a href="/for-shops/" class="block rounded-xl border border-transparent px-4 py-4 text-lg font-semibold text-white/90 transition hover:border-white/10 hover:bg-white/5 hover:text-white active:bg-white/5"> 403 For Shops 404 </a> 405 </li> 406 </ul> 407 </nav> 408 409 <div class="flex flex-none flex-col gap-3 border-t border-white/10 px-6 pt-4" style="padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);"> 410 <a href="/es/" hreflang="es-419" class="btn-link justify-center" data-event="language_switch" data-event-location="nav_mobile"> 411 Español 412 </a> 413 <a href="https://prod.mechai.app/v2/login" class="btn-ghost justify-center" data-event="web_app_launch" data-event-location="nav_mobile"> 414 Open web app 415 </a> 416 <a href="https://mechai.onelink.me/SHKN/MECH?pid=website&c=site&af_channel=organic" class="btn-primary justify-center" data-cta="app" data-event="get_app_click" data-event-location="nav_mobile"> 417 Get the app 418 </a> 419 </div> 420 </div> 421</dialog> 422 423<div class="h-16 xl:h-20" aria-hidden="true"></div> 424
425<script type="module">var e=document.getElementById(`nav-menu`),t=document.getElementById(`nav-menu-open`),n=document.getElementById(`nav-menu-close`);if(e&&t&&n){let r=()=>{e.showModal(),document.body.style.overflow=`hidden`},i=()=>e.close();t.addEventListener(`click`,r),n.addEventListener(`click`,i),e.addEventListener(`close`,()=>{document.body.style.overflow=``}),e.querySelectorAll(`a`).forEach(e=>e.addEventListener(`click`,i))}</script>
425 426 <main id="main"> 427 428 <div class="precision-home" data-astro-cid-lcdefpme> 429 <section class="precision-hero" aria-labelledby="hero-heading" data-astro-cid-twhn4bk4> 430 <div class="precision-photo" aria-hidden="true" data-astro-cid-twhn4bk4> 431 <img src="/blog/welcome-to-the-wrench-report.webp" alt="" aria-hidden="true" width="1200" height="670" fetchpriority="high" decoding="async" data-astro-cid-twhn4bk4> 432 </div> 433 <div class="precision-hero-inner mx-auto max-w-7xl px-6" data-astro-cid-twhn4bk4> 434 <p class="precision-kicker" data-astro-cid-twhn4bk4> 435 <span aria-hidden="true" data-astro-cid-twhn4bk4></span> AI mechanic & car repair diagnostics 436 </p> 437 <h1 id="hero-heading" data-astro-cid-twhn4bk4>Every repair<br data-astro-cid-twhn4bk4>starts with<br data-astro-cid-twhn4bk4><span data-astro-cid-twhn4bk4>understanding.</span></h1> 438 <p class="precision-intro" data-astro-cid-twhn4bk4> 439 Turn a symptom, a code, or a question into a clear next step. Meet the AI mechanic built 440 around your vehicle. 441 </p> 442 <div class="precision-actions" data-astro-cid-twhn4bk4> 443 <a id="hero-primary-cta" href="https://prod.mechai.app/v2/login?utm_source=website&utm_medium=organic&utm_campaign=home_hero&src=home_hero" class="btn-primary btn-lg" data-event="sign_up_click" data-event-location="hero" data-event-page="home" data-astro-cid-twhn4bk4> 444 <span id="hero-primary-label" data-astro-cid-twhn4bk4>Get started free</span> 445 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true" data-astro-cid-twhn4bk4="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg> 446 </a> 447 <a href="#session" class="precision-demo-link" data-event="demo_view" data-event-location="hero" data-event-page="home" data-astro-cid-twhn4bk4> 448 See how it works <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true" data-astro-cid-twhn4bk4="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 449 </a> 450 </div> 451 <p class="precision-availability" data-astro-cid-twhn4bk4> 452 Free to start. No card required. iOS · Android · Web 453 </p> 454 <div class="precision-press" data-astro-cid-twhn4bk4> 455 <span data-astro-cid-twhn4bk4>100K+ downloads · 7 languages</span> 456 <a href="https://www.wsj.com/tech/personal-tech/ai-tools-car-maintenance-pros-cons-7e9c73d5" target="_blank" rel="noopener noreferrer" data-event="press_wsj_click" data-event-location="hero" data-event-page="home" data-astro-cid-twhn4bk4> 457 As featured in The Wall Street Journal 458 </a> 459 </div> 460 <div class="mt-6 sm:hidden" data-astro-cid-twhn4bk4><div class="flex flex-wrap items-center gap-2.5"> 461 <a href="https://apps.apple.com/us/app/mech-ai-diagnostic-repair/id6479862739" target="_blank" rel="noopener noreferrer" class="group inline-flex items-center gap-2.5 rounded-xl border border-white/15 bg-white/[0.04] px-3.5 py-2 transition hover:border-white/30 hover:bg-white/[0.08]" data-event="ios_download_click" data-event-source="hero" data-event-platform="ios"> 462 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-apple flex-none text-white" aria-hidden="true"><path d="M12 6.528V3a1 1 0 0 1 1-1h0"></path><path d="M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21"></path></svg> 463 <span class="text-left leading-none">
464 <span class="block text-[9px] font-medium uppercase tracking-wider text-white/60">Download on the</span> 465 <span class="block text-xs font-semibold text-white">App Store</span> 466 </span> 467 </a> 468 <a href="https://play.google.com/store/apps/details?id=app.mechai.mobile" target="_blank" rel="noopener noreferrer" class="group inline-flex items-center gap-2.5 rounded-xl border border-white/15 bg-white/[0.04] px-3.5 py-2 transition hover:border-white/30 hover:bg-white/[0.08]" data-event="android_download_click" data-event-source="hero" data-event-platform="android"> 469 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play flex-none text-white" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg> 470 <span class="text-left leading-none"> 471 <span class="block text-[9px] font-medium uppercase tracking-wider text-white/60">Get it on</span> 472 <span class="block text-xs font-semibold text-white">Google Play</span> 473 </span> 474 </a> 475</div></div> 476 <div class="precision-process" aria-label="From understanding to action" data-astro-cid-twhn4bk4> 477 <span data-astro-cid-twhn4bk4><b data-astro-cid-twhn4bk4>01</b> Understand</span> 478 <span data-astro-cid-twhn4bk4><b data-astro-cid-twhn4bk4>02</b> Plan</span> 479 <span data-astro-cid-twhn4bk4><b data-astro-cid-twhn4bk4>03</b> Repair</span> 480 </div> 481 </div> 482</section> 483 484<section id="session" class="precision-session scroll-mt-24" aria-labelledby="session-heading" data-astro-cid-twhn4bk4> 485 <div class="mx-auto max-w-7xl px-6" data-astro-cid-twhn4bk4> 486 <div class="session-intro" data-astro-cid-twhn4bk4> 487 <div data-astro-cid-twhn4bk4> 488 <p class="eyebrow" data-astro-cid-twhn4bk4>Inside the AI Mechanic</p> 489 <h2 id="session-heading" data-astro-cid-twhn4bk4> 490 A better next step.<br data-astro-cid-twhn4bk4>Starts with a better question. 491 </h2> 492 <p class="session-description" data-astro-cid-twhn4bk4> 493 See how vehicle details and follow-up questions shape the conversation. 494 </p> 495 </div> 496 <div data-astro-cid-twhn4bk4> 497 <div id="bay-toggle" role="tablist" aria-label="Choose your view" class="bay-toggle" data-astro-cid-twhn4bk4> 498 <span id="bay-pill" aria-hidden="true" data-astro-cid-twhn4bk4></span> 499 <button type="button" role="tab" id="bay-diy" aria-controls="session-demo" tabindex="0" data-bay="diy" data-vehicle="camry" aria-selected="true" class="bay-btn text-brand-accent" data-astro-cid-twhn4bk4>DIY · Driveway</button> 500 <button type="button" role="tab" id="bay-shop" aria-controls="session-demo" tabindex="-1" data-bay="shop" data-vehicle="f150" aria-selected="false" class="bay-btn text-white/55" data-astro-cid-twhn4bk4>Mechanic · Shop</button> 501 </div> 502 <p id="bay-caption" data-astro-cid-twhn4bk4> 503 Follow a <span class="text-white/75" data-astro-cid-twhn4bk4>check-engine code</span> through a sample conversation. 504 </p> 505 </div> 506 </div> 507 <div class="session-window" data-astro-cid-twhn4bk4> 508 <div class="session-window-header" data-astro-cid-twhn4bk4> 509 <span data-astro-cid-twhn4bk4>AI Mechanic · session</span> 510 <span class="session-disclosure" data-astro-cid-twhn4bk4><span aria-hidden="true" data-astro-cid-twhn4bk4></span>Scripted demo</span> 511 </div> 512 <div id="session-demo" role="tabpanel" aria-labelledby="bay-diy" class="p-4 md:p-6" data-astro-cid-twhn4bk4> 513 <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
513<script>(()=>{var a=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value=="object"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let l of e)if(l.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=a;window.dispatchEvent(new Event("astro:visible"));})();</script>
513<script>(()=>{var g=Object.defineProperty;var w=(a,s,c)=>s in a?g(a,s,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[s]=c;var l=(a,s,c)=>w(a,typeof s!="symbol"?s+"":s,c);var E=new Set(["__proto__","constructor","prototype"]);{let a={0:t=>y(t),1:t=>c(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(c(t)),5:t=>new Set(c(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>Number.POSITIVE_INFINITY*t},s=t=>{let[p,e]=t;return p in a?a[p](e):void 0},c=t=>t.map(s),y=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([p,e])=>[p,s(e)]));class f extends HTMLElement{constructor(){super(...arguments);l(this,"Component");l(this,"hydrator");l(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let r=this.querySelectorAll("astro-slot"),n={},d=this.querySelectorAll("template[data-astro-template]");for(let o of d){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(n[o.getAttribute("data-astro-template")||"default"]=o.innerHTML,o.remove())}for(let o of r){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(n[o.getAttribute("name")||"default"]=o.innerHTML)}let u;try{u=this.hasAttribute("props")?y(JSON.parse(this.getAttribute("props"))):{}}catch(o){let i=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(i+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${i}`,this.getAttribute("props"),o),o}let h;await this.hydrator(this)(this.Component,u,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});l(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),r.disconnect(),this.childrenConnectedCallback()},r=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});r.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}getRetryImportUrl(e){let r=new URL(e,document.baseURI);return r.searchParams.set("astro-retry",Date.now().toString()),r.toString()}async importWithRetry(e){try{return await import(e)}catch(r){return await new Promise(n=>setTimeout(n,1e3)),import(this.getRetryImportUrl(e))}}handleHydrationError(e){let r=this.getAttribute("component-url"),n=new CustomEvent("astro:hydration-error",{cancelable:!0,bubbles:!0,composed:!0,detail:{error:e,componentUrl:r}});this.dispatchEvent(n)&&console.error(`[astro-island] Error hydrating ${r}`,e)}async start(){let e=JSON.parse(this.getAttribute("opts")),r=this.getAttribute("client");if(Astro[r]===void 0){window.addEventListener(`astro:${r}`,()=>this.start(),{once:!0});return}try{await Astro[r](async()=>{let n=this.getAttribute("renderer-url");try{let[d,{default:u}]=await Promise.all([this.importWithRetry(this.getAttribute("component-url")),n?this.importWithRetry(n):Promise.resolve({default:()=>()=>{}})]),h=this.getAttribute("component-export")||"default";if(h.includes(".")){this.Component=d;for(let m of h.split(".")){if(E.has(m)||!this.Component||typeof this.Component!="object"&&typeof this.Component!="function"||!Object.hasOwn(this.Component,m))throw new Error(`Invalid component export path: ${h}`);this.Component=this.Component[m]}}else{if(E.has(h))throw new Error(`Invalid component export path: ${h}`);this.Component=d[h]}return this.hydrator=u,this.hydrate}catch(d){return this.handleHydrationError(d),()=>{}}},e,this)}catch(n){this.handleHydrationError(n)}}attributeChangedCallback(){this.hydrate()}}l(f,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",f)}})();</script>
513<astro-island uid="Z2g1jCd" prefix="r69" component-url="/_astro/DemoConversation.CkULfsRY.js" component-export="default" renderer-url="/_astro/client.CeEWQr5h.js" props="{"initialVehicleId":[0,"camry"],"data-astro-cid-twhn4bk4":[0,true]}" ssr client="visible" opts="{"name":"DemoConversation","value":true}" await-children><div class="grid items-center gap-10 lg:grid-cols-2"><div><p class="font-mono text-[11px] uppercase tracking-widest text-white/60">Pick a vehicle</p><div class="mt-4 space-y-2.5"><button type="button" class="flex w-full items-center gap-3 rounded-xl border p-3 text-left transition border-brand-accent/40 bg-brand-accent/[0.06]" aria-pressed="true"><div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg border border-brand-accent/40 text-brand-accent"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg></div><div class="flex-1"><div class="flex items-center gap-2"><p class="text-sm font-semibold text-white">2014<!-- --> <!-- -->Toyota<!-- --> <!-- -->Camry</p><span class="rounded-full border px-1.5 py-0.5 font-mono text-[8px] uppercase tracking-widest border-brand-accent/30 bg-brand-accent/10 text-brand-accent">Diagnose a fault</span></div><p class="mt-0.5 text-[12px] leading-snug text-white/55">Check-engine light, code P0420 â cat or sensor?</p></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right text-brand-accent" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></button><button type="button" class="flex w-full items-center gap-3 rounded-xl border p-3 text-left transition border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04]" aria-pressed="false"><div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg border border-white/10 text-white/60"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg></div><div class="flex-1"><div class="flex items-center gap-2"><p class="text-sm font-semibold text-white">2018<!-- --> <!-- -->Ford<!-- --> <!-- -->F-150</p><span class="rounded-full border px-1.5 py-0.5 font-mono text-[8px] uppercase tracking-widest border-white/10 bg-white/5 text-white/60">Pinpoint the cause</span></div><p class="mt-0.5 text-[12px] leading-snug text-white/55">Misfire under boost, P0303 â with fresh plugs</p></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right text-white/30" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></button><button type="button" class="flex w-full items-center gap-3 rounded-xl border p-3 text-left transition border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04]" aria-pressed="false"><div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg border border-white/10 text-white/60"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg></div><div class="flex-1"><div class="flex items-center gap-2"><p class="text-sm font-semibold text-white">2016<!-- --> <!-- -->Subaru<!-- --> <!-- -->WRX</p><span class="rounded-full border px-1.5 py-0.5 font-mono text-[8px] uppercase tracking-widest border-white/10 bg-white/5 text-white/60">Plan a build</span></div><p class="mt-0.5 text-[12px] leading-snug text-white/55">Stage 1 on a daily â safe, and what do I need?</p></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
513ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right text-white/30" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></button></div><div class="mt-5 flex flex-wrap items-center gap-2.5"><button type="button" class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-2 text-xs font-semibold text-white/80 transition hover:bg-white/10"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skip-forward" aria-hidden="true"><path d="M21 4v16"></path><path d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z"></path></svg>Skip to end</button><a href="https://prod.mechai.app/v2/login" class="inline-flex items-center gap-2 rounded-full bg-brand-accent px-4 py-2 text-xs font-semibold text-brand-bg transition hover:bg-brand-accent/90" data-event="demo_conversation_cta" data-event-source="camry">Ask about your car<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></div><p class="mt-4 max-w-sm text-[11px] leading-relaxed text-white/60">Pre-recorded conversations that demonstrate what the AI Mechanic does. In the app you get real-time answers for your exact vehicle.</p></div><div class="relative"><div class="absolute -inset-10 -z-10 rounded-[60px] bg-gradient-to-br from-brand-accent/25 via-brand-accent/5 to-transparent blur-3xl" aria-hidden="true"></div><div class="relative mx-auto aspect-[9/19.5] w-full max-w-[340px] rounded-[44px] border border-white/10 bg-brand-surface p-[10px] shadow-[0_40px_80px_-20px_rgba(0,0,0,0.8)]"><div class="relative flex h-full w-full flex-col overflow-hidden rounded-[34px] border border-white/5 bg-brand-bg"><div class="pointer-events-none absolute left-1/2 top-2 z-20 h-[22px] w-[96px] -translate-x-1/2 rounded-full bg-black" aria-hidden="true"></div><div class="flex items-center justify-between px-6 pb-1 pt-2.5 text-[10px] font-semibold tabular text-white/80"><span>9:41</span><span class="font-mono text-[8px] uppercase tracking-widest text-brand-accent">â Demo</span></div><div class="flex items-center justify-between gap-2 px-4 pb-2 pt-2"><span class="flex items-center gap-1.5 text-[13px] font-bold tracking-tight text-white"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench text-brand-accent" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg>AI Mechanic</span><span class="flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-2 py-0.5 font-mono text-[9px] uppercase tracking-widest text-white/70"><span class="h-1.5 w-1.5 rounded-full bg-brand-accent"></span>2014 Camry</span></div><div role="log" aria-live="polite" aria-label="Demo conversation transcript" class="flex-1 space-y-2.5 overflow-y-auto px-3 py-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"></div><div class="border-t border-white/5 bg-brand-surface px-3 py-2.5"><div class="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5"><span class="flex-1 text-[10px] text-white/55">Ask about your <!-- -->Camry<!-- -->â¦</span><span class="flex h-5 w-5 items-center justify-center rounded-full bg-brand-accent/80 text-brand-bg"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewB
513ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></div></div></div></div></div></div><!--astro:end--></astro-island> 514 </div> 515 </div> 516 </div> 517</section> 518
519<script> 520 (function () { 521 var toggle = document.getElementById('bay-toggle'); 522 if (!toggle) return; 523 var pill = document.getElementById('bay-pill'); 524 var caption = document.getElementById('bay-caption'); 525 var cta = document.getElementById('hero-primary-cta'); 526 var label = document.getElementById('hero-primary-label'); 527 var btns = toggle.querySelectorAll('.bay-btn'); 528 529 var COPY = { 530 diy: { 531 caption: 532 'Follow a <span class="text-white/75">check-engine code</span> through a sample conversation.', 533 href: cta ? cta.getAttribute('href') : '#', 534 label: 'Get started free', 535 loc: 'hero', 536 }, 537 shop: { 538 caption: 539 'Explore a <span class="text-white/75">diagnostic conversation</span> for a working mechanic.', 540 href: '/for-shops/', 541 label: 'See AUTOSHOP plans', 542 loc: 'hero_shop', 543 }, 544 }; 545 var diyHref = cta ? cta.getAttribute('href') : '#'; 546 547 function select(bay, vehicle) { 548 btns.forEach(function (b) { 549 var on = b.getAttribute('data-bay') === bay; 550 b.setAttribute('aria-selected', on ? 'true' : 'false'); 551 b.setAttribute('tabindex', on ? '0' : '-1'); 552 b.classList.toggle('text-brand-accent', on); 553 b.classList.toggle('text-white/55', !on); 554 }); 555 if (pill) pill.style.transform = bay === 'shop' ? 'translateX(100%)' : 'translateX(0)'; 556 var panel = document.getElementById('session-demo'); 557 if (panel) panel.setAttribute('aria-labelledby', 'bay-' + bay); 558 var c = COPY[bay]; 559 if (caption) caption.innerHTML = c.caption; 560 if (cta) { 561 cta.setAttribute('href', bay === 'diy' ? diyHref : c.href); 562 cta.setAttribute('data-event-location', c.loc); 563 } 564 if (label) label.textContent = c.label; 565 // Drive the demo island. Set a pending global first so a toggle hit 566 // BEFORE the client:visible demo hydrates isn't lost (the island 567 // reads it on mount); the event handles live switches after. 568 window.__mechDemoVehicle = vehicle; 569 try { 570 window.dispatchEvent( 571 new CustomEvent('mech:demo-vehicle', { detail: { id: vehicle } }), 572 ); 573 } catch (e) { 574 /* no-op */ 575 } 576 } 577 578 toggle.addEventListener('keydown', function (event) { 579 var keys = ['ArrowLeft', 'ArrowRight', 'Home', 'End']; 580 if (keys.indexOf(event.key) === -1) return; 581 event.preventDefault(); 582 var current = Array.prototype.indexOf.call(btns, document.activeElement); 583 var next = 584 event.key === 'Home' 585 ? 0 586 : event.key === 'End' 587 ? btns.length - 1 588 : (current + (event.key === 'ArrowRight' ? 1 : -1) + btns.length) % 589 btns.length; 590 var button = btns[next]; 591 select(button.getAttribute('data-bay'), button.getAttribute('data-vehicle')); 592 button.focus(); 593 }); 594 595 btns.forEach(function (b) { 596 b.addEventListener('click', function () { 597 select(b.getAttribute('data-bay'), b.getAttribute('data-vehicle')); 598 }); 599 }); 600 })(); 601</script>
601 602 603 <section class="reveal border-y border-white/5 bg-brand-surface/40"> 604 <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-3 gap-y-2 px-6 py-4 text-center md:justify-between"> 605 606 607 <span class="font-mono text-[11px] uppercase tracking-[0.16em] text-white/60"> 608 Every make & model 609 </span> 610 611 <span class="hidden text-white/20 md:inline" aria-hidden="true">·</span> 612 <span class="font-mono text-[11px] uppercase tracking-[0.16em] text-white/60"> 613 OBD2 codes decoded 614 </span> 615 616 <span class="hidden text-white/20 md:inline" aria-hidden="true">·</span> 617 <span class="font-mono text-[11px] uppercase tracking-[0.16em] text-white/60"> 618 Speaks 7 languages 619 </span> 620 621 <span class="hidden text-white/20 md:inline" aria-hidden="true">·</span> 622 <span class="font-mono text-[11px] uppercase tracking-[0.16em] text-white/60"> 623 Free tier â no card 624 </span> 625 626 <span class="hidden text-white/20 md:inline" aria-hidden="true">·</span> 627 <span class="font-mono text-[11px] uppercase tracking-[0.16em] text-white/60"> 628 Honest answers â even when it's take it to a shop 629 </span> 630 631 </div> 632</section> 633 634 635 636 <section class="section precision-anatomy" data-astro-cid-yrhngwuv> 637 <div class="mx-auto max-w-7xl px-6" data-astro-cid-yrhngwuv> 638 <div class="flex flex-wrap items-end justify-between gap-6" data-astro-cid-yrhngwuv> 639 <div data-astro-cid-yrhngwuv> 640 <span class="eyebrow" data-astro-cid-yrhngwuv>From the first question to the next repair</span> 641 <h2 class="mt-4 max-w-2xl text-3xl font-medium tracking-tight md:text-4xl" data-astro-cid-yrhngwuv> 642 Understand. Then act. 643 </h2> 644 </div> 645 <a href="/how-it-works/" class="btn-link" data-event="how_it_works_view" data-event-location="home_anatomy" data-astro-cid-yrhngwuv> 646 See the full walkthrough <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true" data-astro-cid-yrhngwuv="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 647 </a> 648 </div> 649 <div class="anatomy-steps" data-astro-cid-yrhngwuv> 650 <a href="/how-it-works/#scan" class="anatomy-step" data-event="how_it_works_view" data-event-location="home_anatomy_beat" data-astro-cid-yrhngwuv> 651 <div class="step-index" data-astro-cid-yrhngwuv> 652 653 <span data-astro-cid-yrhngwuv>01</span> 654 <span data-astro-cid-yrhngwuv>Understand</span> 655 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true" data-astro-cid-yrhngwuv="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 656 657 </div> 658 <h3 data-astro-cid-yrhngwuv>Start with what you know.</h3> 659 <p data-astro-cid-yrhngwuv>Describe a symptom or enter an OBD2 code like P0420. Your year, make, and model give the conversation context.</p> 660 </a><a href="/how-it-works/#diagnose" class="anatomy-step" data-event="how_it_works_view" data-event-location="home_anatomy_beat" data-astro-cid-yrhngwuv> 661 <div class="step-index" data-astro-cid-yrhngwuv> 662
663 <span data-astro-cid-yrhngwuv>02</span> 664 <span data-astro-cid-yrhngwuv>Plan</span> 665 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true" data-astro-cid-yrhngwuv="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 666 667 </div> 668 <h3 data-astro-cid-yrhngwuv>Work through the possibilities.</h3> 669 <p data-astro-cid-yrhngwuv>Explore likely causes, follow-up questions, and diagnostic guidance before deciding what to replace.</p> 670 </a><a href="/how-it-works/#fix" class="anatomy-step" data-event="how_it_works_view" data-event-location="home_anatomy_beat" data-astro-cid-yrhngwuv> 671 <div class="step-index" data-astro-cid-yrhngwuv> 672 673 <span data-astro-cid-yrhngwuv>03</span> 674 <span data-astro-cid-yrhngwuv>Repair</span> 675 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true" data-astro-cid-yrhngwuv="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 676 677 </div> 678 <h3 data-astro-cid-yrhngwuv>Choose the next step.</h3> 679 <p data-astro-cid-yrhngwuv>Find repair guides, parts, and reference information â or understand when the job needs a professional.</p> 680 </a> 681 </div> 682 </div> 683</section> 684 685 <!-- Preserve both audience routes and their existing attribution. --> 686 <section class="section home-audiences" data-astro-cid-lcdefpme> 687 <div class="mx-auto max-w-7xl px-6" data-astro-cid-lcdefpme> 688 <div class="reveal max-w-2xl" data-astro-cid-lcdefpme> 689 <span class="eyebrow" data-astro-cid-lcdefpme>From your driveway to the service bay</span> 690 <h2 class="mt-4 text-3xl font-semibold tracking-tight md:text-4xl" data-astro-cid-lcdefpme> 691 Built for the work in front of you. 692 </h2> 693 </div> 694 <div class="mt-10 grid gap-5 lg:grid-cols-2" data-astro-cid-lcdefpme> 695 <div class="home-audience" data-astro-cid-lcdefpme> 696 <p class="font-mono text-[11px] uppercase tracking-widest text-white/50" data-astro-cid-lcdefpme> 697 In the <span class="text-brand-accent" data-astro-cid-lcdefpme>driveway</span> 698 </p> 699 <h3 class="mt-3 text-2xl font-semibold tracking-tight" data-astro-cid-lcdefpme> 700 Know your own car. 701 </h3> 702 <p class="mt-4 text-sm leading-relaxed text-white/70" data-astro-cid-lcdefpme> 703 Understand the problem, explore a repair, and keep your vehicle history 704 in one place. Get guidance built around <em data-astro-cid-lcdefpme>your</em> car. 705 </p> 706 <ul class="mt-6 space-y-3 text-sm text-white/80" data-astro-cid-lcdefpme> 707 <li class="flex gap-2" data-astro-cid-lcdefpme> 708 <span class="text-brand-accent" data-astro-cid-lcdefpme>â</span> Symptom-based diagnosis ("whining 709 when I turn left") 710 </li> 711 <li class="flex gap-2" data-astro-cid-lcdefpme> 712 <span class="text-brand-accent" data-astro-cid-lcdefpme>â</span> Severity and "can I drive it?" 713 guidance 714 </li> 715 <li class="flex gap-2" data-astro-cid-lcdefpme>
716 <span class="text-brand-accent" data-astro-cid-lcdefpme>â</span> Part numbers + Amazon & eBay 717 links for your exact year/trim 718 </li> 719 <li class="flex gap-2" data-astro-cid-lcdefpme> 720 <span class="text-brand-accent" data-astro-cid-lcdefpme>â</span> Repair estimates to help you 721 understand your options 722 </li> 723 </ul> 724 <a href="/pricing/" class="mt-8 inline-flex items-center gap-1 text-sm font-semibold text-white hover:text-brand-accent" data-event="pricing_view" data-event-location="home_two_doors_diy" data-astro-cid-lcdefpme> 725 See DIY plans <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true" data-astro-cid-lcdefpme="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 726 </a> 727 </div> 728 729 <div class="home-audience" data-astro-cid-lcdefpme> 730 <p class="font-mono text-[11px] uppercase tracking-widest text-white/50" data-astro-cid-lcdefpme> 731 In the <span class="text-brand-accent" data-astro-cid-lcdefpme>shop</span> 732 </p> 733 <h3 class="mt-3 text-2xl font-semibold tracking-tight" data-astro-cid-lcdefpme> 734 Go deeper on every job. 735 </h3> 736 <p class="mt-4 text-sm leading-relaxed text-white/70" data-astro-cid-lcdefpme> 737 Bring diagnostic guidance, repair information, and professional tools 738 into your workflow. Explore MECHANIC and AUTOSHOP. 739 </p> 740 <ul class="mt-6 space-y-3 text-sm text-white/80" data-astro-cid-lcdefpme> 741 <li class="flex gap-2" data-astro-cid-lcdefpme> 742 <span class="text-brand-accent" data-astro-cid-lcdefpme>â</span> Full AI diagnostic assistant 743 + smart DTC troubleshooting 744 </li> 745 <li class="flex gap-2" data-astro-cid-lcdefpme> 746 <span class="text-brand-accent" data-astro-cid-lcdefpme>â</span> OEM wiring + parts diagrams and 747 TSB lookups on AUTOSHOP 748 </li> 749 <li class="flex gap-2" data-astro-cid-lcdefpme> 750 <span class="text-brand-accent" data-astro-cid-lcdefpme>â</span> One account on every shop device 751 â tablets, desk, phone 752 </li> 753 <li class="flex gap-2" data-astro-cid-lcdefpme> 754 <span class="text-brand-accent" data-astro-cid-lcdefpme>â</span> Clear explanations to support 755 customer conversations 756 </li> 757 </ul> 758 <a href="/for-shops/" class="mt-8 inline-flex items-center gap-1 text-sm font-semibold text-white hover:text-brand-accent" data-event="for_shops_click" data-event-location="home_two_doors_shop" data-astro-cid-lcdefpme> 759 Shop & Mechanic plans <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true" data-astro-cid-lcdefpme="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 760 </a> 761 </div> 762 </div> 763 </div> 764 </section> 765 766 <section id="features" class="relative overflow-hidden border-y border-white/5 bg-brand-surface py-20"> 767 <!-- Ambient glow --> 768 <div class="pointer-events-none absolute -top-40 left-1/2 h-80 w-[900px] -translate-x-1/2 roun
768ded-full bg-brand-accent/10 blur-3xl" aria-hidden="true"> 769 </div> 770 771 <div class="relative mx-auto max-w-7xl px-6"> 772 <div class="flex items-center gap-2"> 773 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles text-brand-accent" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg> 774 <span class="font-mono text-[11px] uppercase tracking-widest text-white/60"> 775 Inside the app 776 </span> 777 </div> 778 <h2 class="mt-3 max-w-3xl text-3xl font-semibold tracking-tight md:text-4xl"> 779 Your car repair toolkit. All in one app. 780 </h2> 781 <p class="mt-4 max-w-2xl text-base text-white/60"> 782 An AI car diagnostic app for the whole job: chat, guided diagnostics, photo estimates, 783 vehicle history, TSB lookups, and parts search. 784 </p> 785 786 <div class="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3"> 787 <!-- 1. AI Mechanic --> 788 <article class="card reveal relative overflow-hidden"> 789 <div class="flex items-center gap-2"> 790 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent"> 791 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg> 792 </span> 793 <div> 794 <h3 class="text-sm font-semibold tracking-tight">AI Mechanic</h3> 795 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 796 Chat 797 </p> 798 </div> 799 </div> 800 <!-- Mock chat stack --> 801 <div class="mt-5 space-y-2"> 802 <div class="ml-auto w-fit max-w-[85%] rounded-xl rounded-br-md bg-brand-accent px-2.5 py-1.5 text-[10.5px] font-medium text-brand-bg"> 803 My brakes squeal when cold. 804 </div> 805 <div class="w-fit max-w-[85%] rounded-xl rounded-bl-md border border-white/10 bg-white/[0.06] px-2.5 py-1.5 text-[10.5px] text-white/85"> 806 <span class="text-white">Letâs understand the pattern.</span> Does the sound change 807 as you brake? 808 </div> 809 </div> 810 </article> 811 812 <!-- 2. Digital Garage --> 813 <article class="card reveal relative overflow-hidden"> 814 <div class="flex items-center gap-2"> 815 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent"> 816 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-warehouse" aria-hidden="true"><path d="M18 21V10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v11"></path><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 1.132-1.803l7.95-3.974a2 2 0 0 1 1.837 0l7.948 3.974A2 2 0 0 1 22 8z"></path><path d="M6 13h12"></path><path d="M6 17h12"></path></svg> 817 </span> 818 <div> 819 <h3 class="text-sm font-semibold tracking-tight">Digital Garage</h3> 820 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 821 Garage + Timeline 822 </p> 823 </div> 824 </div> 825 <!-- Vehicle list --> 826 <div class="mt-5 space-y-2"> 827 <div class="flex items-center justify-between rounded-lg border px-2.5 py-2 border-brand-accent/30 bg-brand-accent/5"> 828 <div> 829 <p class="text-[10.5px] font-semibold text-white">2014 Toyota Camry</p> 830 <p class="font-mono text-[9px] uppercase tracking-widest text-white/55"> 831 142,338 mi 832 </p> 833 </div>
834 <span class="rounded-full border border-brand-accent/30 bg-brand-accent/10 px-2 py-0.5 font-mono text-[8.5px] uppercase tracking-widest text-brand-accent"> 835 Active 836 </span> 837 </div><div class="flex items-center justify-between rounded-lg border px-2.5 py-2 border-white/5 bg-white/[0.02]"> 838 <div> 839 <p class="text-[10.5px] font-semibold text-white">2018 Ford F-150</p> 840 <p class="font-mono text-[9px] uppercase tracking-widest text-white/55"> 841 87,210 mi 842 </p> 843 </div> 844 845 </div><div class="flex items-center justify-between rounded-lg border px-2.5 py-2 border-white/5 bg-white/[0.02]"> 846 <div> 847 <p class="text-[10.5px] font-semibold text-white">2007 Toyota 4Runner</p> 848 <p class="font-mono text-[9px] uppercase tracking-widest text-white/55"> 849 201,004 mi 850 </p> 851 </div> 852 853 </div> 854 </div> 855 </article> 856 857 <!-- 3. Diagnostics --> 858 <article class="card reveal relative overflow-hidden"> 859 <div class="flex items-center gap-2"> 860 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent"> 861 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-stethoscope" aria-hidden="true"><path d="M11 2v2"></path><path d="M5 2v2"></path><path d="M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1"></path><path d="M8 15a6 6 0 0 0 12 0v-3"></path><circle cx="20" cy="10" r="2"></circle></svg> 862 </span> 863 <div> 864 <h3 class="text-sm font-semibold tracking-tight">Diagnostics</h3> 865 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 866 Trees 867 </p> 868 </div> 869 </div> 870 <div class="mt-5"> 871 <div class="rounded-lg border border-white/10 bg-white/[0.03] p-2.5"> 872 <p class="font-mono text-[9px] uppercase tracking-widest text-white/55"> 873 Step 2 of 5 874 </p> 875 <p class="mt-1 text-[11px] font-semibold text-white"> 876 When does the whine happen? 877 </p> 878 <div class="mt-2.5 space-y-1.5"> 879 <div class="flex items-center gap-2 rounded-md border px-2 py-1.5 text-[10px] border-brand-accent/30 bg-brand-accent/5 text-white"> 880 <span class="h-2 w-2 rounded-full border border-brand-accent bg-brand-accent"></span> 881 Turning left 882 </div><div class="flex items-center gap-2 rounded-md border px-2 py-1.5 text-[10px] border-white/5 text-white/60"> 883 <span class="h-2 w-2 rounded-full border border-white/20"></span> 884 Turning right 885 </div><div class="flex items-center gap-2 rounded-md border px-2 py-1.5 text-[10px] border-white/5 text-white/60"> 886 <span class="h-2 w-2 rounded-full border border-white/20"></span> 887 Both â always 888 </div> 889 </div> 890 </div> 891 </div> 892 </article> 893 894 <!-- 4. Vehicle Health --> 895 <article class="card reveal relative overflow-hidden"> 896 <div class="flex items-center gap-2">
897 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent"> 898 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-pulse" aria-hidden="true"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path><path d="M3.22 13H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27"></path></svg> 899 </span> 900 <div> 901 <h3 class="text-sm font-semibold tracking-tight">Vehicle Health</h3> 902 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 903 Score 904 </p> 905 </div> 906 </div> 907 <div class="mt-5 flex items-center gap-4"> 908 <!-- Score ring --> 909 <div class="relative h-20 w-20 flex-none"> 910 <svg viewBox="0 0 80 80" class="h-full w-full -rotate-90"> 911 <circle cx="40" cy="40" r="34" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="6"></circle> 912 <circle cx="40" cy="40" r="34" fill="none" stroke="#F27D26" stroke-width="6" stroke-linecap="round" stroke-dasharray="213.6" stroke-dashoffset="51.2"></circle> 913 </svg> 914 <div class="absolute inset-0 flex flex-col items-center justify-center"> 915 <span class="text-lg font-bold tracking-tight tabular text-white">76</span> 916 <span class="font-mono text-[8px] uppercase tracking-widest text-white/55"> 917 Good 918 </span> 919 </div> 920 </div> 921 <div class="flex-1 space-y-1.5"> 922 <div class="flex items-center justify-between text-[10px]"> 923 <span class="text-white/60">Brakes</span> 924 <span class="font-mono text-white/80">92%</span> 925 </div> 926 <div class="h-1 overflow-hidden rounded-full bg-white/5"> 927 <div class="h-full w-[92%] rounded-full bg-white/70"></div> 928 </div> 929 <div class="flex items-center justify-between text-[10px]"> 930 <span class="text-white/60">Tires</span> 931 <span class="font-mono text-brand-accent">43%</span> 932 </div> 933 <div class="h-1 overflow-hidden rounded-full bg-white/5"> 934 <div class="h-full w-[43%] rounded-full bg-brand-accent"></div> 935 </div> 936 <div class="flex items-center justify-between text-[10px]"> 937 <span class="text-white/60">Fluids</span> 938 <span class="font-mono text-white/80">78%</span> 939 </div> 940 <div class="h-1 overflow-hidden rounded-full bg-white/5"> 941 <div class="h-full w-[78%] rounded-full bg-white/70"></div> 942 </div> 943 </div> 944 </div> 945 </article> 946 947 <!-- 5. Parts Finder --> 948 <article class="card reveal relative overflow-hidden"> 949 <div class="flex items-center gap-2"> 950 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent"> 951 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg> 952 </span> 953 <div> 954 <h3 class="text-sm font-semibold tracking-tight">Parts Finder</h3> 955 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 956 Amazon + eBay 957 </p> 958 </div> 959 </div> 960 <div class="mt-5 space-y-2"> 961 <div class="flex items-center gap-2.5 rounded-lg border border-white/5 bg-white/[0.02] p-2"> 962 <div class="h-9 w-9 flex-none rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-transparent"></div> 963 <div class="flex-1"> 964 <p class="text-[10.5px] font-medium text-white leading-tight"> 965 Denso 234-4209 O2 Sensor 966 </p> 967 <p class="mt-0.5 flex items-center gap-1.5 font-mono text-[9px] uppercase tracking-widest">
968 <span class="text-brand-accent">$42.87</span> 969 <span class="text-white/30">·</span> 970 <span class="text-white/60"> 971 Fits your Camry 972 </span> 973 </p> 974 </div> 975 </div><div class="flex items-center gap-2.5 rounded-lg border border-white/5 bg-white/[0.02] p-2"> 976 <div class="h-9 w-9 flex-none rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-transparent"></div> 977 <div class="flex-1"> 978 <p class="text-[10.5px] font-medium text-white leading-tight"> 979 Bosch 15733 OE Fitment 980 </p> 981 <p class="mt-0.5 flex items-center gap-1.5 font-mono text-[9px] uppercase tracking-widest"> 982 <span class="text-brand-accent">$51.20</span> 983 <span class="text-white/30">·</span> 984 <span class="text-white/60"> 985 Fits your Camry 986 </span> 987 </p> 988 </div> 989 </div><div class="flex items-center gap-2.5 rounded-lg border border-white/5 bg-white/[0.02] p-2"> 990 <div class="h-9 w-9 flex-none rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-transparent"></div> 991 <div class="flex-1"> 992 <p class="text-[10.5px] font-medium text-white leading-tight"> 993 Generic downstream O2 994 </p> 995 <p class="mt-0.5 flex items-center gap-1.5 font-mono text-[9px] uppercase tracking-widest"> 996 <span class="text-brand-accent">$22.99</span> 997 <span class="text-white/30">·</span> 998 <span class="text-white/30 line-through"> 999 May not fit 1000 </span> 1001 </p> 1002 </div> 1003 </div> 1004 </div> 1005 </article> 1006 1007 <!-- 6. TSBs --> 1008 <article class="card reveal relative overflow-hidden"> 1009 <div class="flex items-center gap-2"> 1010 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent"> 1011 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg> 1012 </span> 1013 <div> 1014 <h3 class="text-sm font-semibold tracking-tight">TSBs</h3> 1015 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 1016 Plain English 1017 </p> 1018 </div> 1019 </div> 1020 <div class="mt-5 space-y-2"> 1021 <div class="rounded-lg border border-white/5 bg-white/[0.02] p-2"> 1022 <div class="flex items-center justify-between"> 1023 <span class="font-mono text-[9px] uppercase tracking-widest text-brand-accent"> 1024 T-SB-0091-14 1025 </span>
1026 <span class="rounded-full border border-white/10 bg-white/5 px-1.5 py-0.5 font-mono text-[8px] uppercase tracking-widest text-white/60"> 1027 Transmission 1028 </span> 1029 </div> 1030 <p class="mt-1 text-[10.5px] font-medium text-white">Harsh downshift cold start</p> 1031 </div><div class="rounded-lg border border-white/5 bg-white/[0.02] p-2"> 1032 <div class="flex items-center justify-between"> 1033 <span class="font-mono text-[9px] uppercase tracking-widest text-brand-accent"> 1034 T-SB-0021-15 1035 </span> 1036 <span class="rounded-full border border-white/10 bg-white/5 px-1.5 py-0.5 font-mono text-[8px] uppercase tracking-widest text-white/60"> 1037 Emissions 1038 </span> 1039 </div> 1040 <p class="mt-1 text-[10.5px] font-medium text-white">Catalyst monitor P0420</p> 1041 </div><div class="rounded-lg border border-white/5 bg-white/[0.02] p-2"> 1042 <div class="flex items-center justify-between"> 1043 <span class="font-mono text-[9px] uppercase tracking-widest text-brand-accent"> 1044 T-SB-0054-17 1045 </span> 1046 <span class="rounded-full border border-white/10 bg-white/5 px-1.5 py-0.5 font-mono text-[8px] uppercase tracking-widest text-white/60"> 1047 Engine 1048 </span> 1049 </div> 1050 <p class="mt-1 text-[10.5px] font-medium text-white">VVT solenoid rattle</p> 1051 </div> 1052 </div> 1053 </article> 1054 1055 <!-- 7. MECH Vision --> 1056 <article class="card reveal relative overflow-hidden"> 1057 <div class="flex items-center gap-2"> 1058 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent"> 1059 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera" aria-hidden="true"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"></path><circle cx="12" cy="13" r="3"></circle></svg> 1060 </span> 1061 <div> 1062 <h3 class="text-sm font-semibold tracking-tight">MECH Vision</h3> 1063 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 1064 Guided camera 1065 </p> 1066 </div> 1067 </div> 1068 <div class="mt-5"> 1069 <div class="relative flex h-24 items-center justify-center rounded-lg border border-white/10 bg-white/[0.03]"> 1070 <span class="absolute left-2 top-2 h-3 w-3 border-l-2 border-t-2 border-brand-accent" aria-hidden="true"></span> 1071 <span class="absolute right-2 top-2 h-3 w-3 border-r-2 border-t-2 border-brand-accent" aria-hidden="true"></span> 1072 <span class="absolute bottom-2 left-2 h-3 w-3 border-b-2 border-l-2 border-brand-accent" aria-hidden="true"></span> 1073 <span class="absolute bottom-2 right-2 h-3 w-3 border-b-2 border-r-2 border-brand-accent" aria-hidden="true"></span> 1074 <p class="font-mono text-[10px] uppercase tracking-widest text-white/60"> 1075 Point. Shoot. Estimate. 1076 </p> 1077 </div> 1078 <p class="mt-2.5 text-[10.5px] font-medium text-white"> 1079 AI repair estimate from photos 1080 </p> 1081 </div> 1082 </article> 1083 1084 <!-- 8. Vehicle Timeline --> 1085 <article class="card reveal relative overflow-hidden"> 1086 <div class="flex items-center gap-2">
1087 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent"> 1088 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-history" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg> 1089 </span> 1090 <div> 1091 <h3 class="text-sm font-semibold tracking-tight">Vehicle Timeline</h3> 1092 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 1093 One history 1094 </p> 1095 </div> 1096 </div> 1097 <div class="relative mt-5 space-y-3 pl-4"> 1098 <span class="absolute bottom-2 left-[3px] top-2 w-px bg-white/10" aria-hidden="true"></span> 1099 <div class="relative"> 1100 <span class="absolute -left-4 top-1 h-[7px] w-[7px] rounded-full border border-white/30 bg-brand-surface" aria-hidden="true"></span> 1101 <p class="text-[10.5px] font-medium leading-tight text-white"> 1102 Oil change 1103 <span class="text-white/30"> · </span> 1104 <span class="font-mono text-[9px] uppercase tracking-widest text-white/55"> 1105 142,338 mi 1106 </span> 1107 </p> 1108 </div><div class="relative"> 1109 <span class="absolute -left-4 top-1 h-[7px] w-[7px] rounded-full bg-brand-accent" aria-hidden="true"></span> 1110 <p class="text-[10.5px] font-medium leading-tight text-white"> 1111 AI diagnosis 1112 <span class="text-white/30"> · </span> 1113 <span class="font-mono text-[9px] uppercase tracking-widest text-brand-accent"> 1114 P0420 1115 </span> 1116 </p> 1117 </div><div class="relative"> 1118 <span class="absolute -left-4 top-1 h-[7px] w-[7px] rounded-full border border-white/30 bg-brand-surface" aria-hidden="true"></span> 1119 <p class="text-[10.5px] font-medium leading-tight text-white"> 1120 Brake pads 1121 <span class="text-white/30"> · </span> 1122 <span class="font-mono text-[9px] uppercase tracking-widest text-white/55"> 1123 138,000 mi 1124 </span> 1125 </p> 1126 </div> 1127 </div> 1128 </article> 1129 1130 <!-- 9. Repair Guides --> 1131 <article class="card reveal relative overflow-hidden"> 1132 <div class="flex items-center gap-2"> 1133 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent"> 1134 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg> 1135 </span> 1136 <div> 1137 <h3 class="text-sm font-semibold tracking-tight">Repair Guides</h3> 1138 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 1139 Step by step 1140 </p> 1141 </div> 1142 </div> 1143 <div class="mt-5 space-y-1.5"> 1144 <div class="flex items-center gap-2 rounded-md border px-2 py-1.5 text-[10px] border-white/5 text-white/60">
1145 <span class="flex h-4 w-4 flex-none items-center justify-center rounded-full border font-mono text-[8px] border-white/20 text-white/55"> 1146 1 1147 </span> 1148 Disconnect the battery 1149 </div><div class="flex items-center gap-2 rounded-md border px-2 py-1.5 text-[10px] border-brand-accent/30 bg-brand-accent/5 text-white"> 1150 <span class="flex h-4 w-4 flex-none items-center justify-center rounded-full border font-mono text-[8px] border-brand-accent text-brand-accent"> 1151 2 1152 </span> 1153 Remove wheel + caliper bolts 1154 </div><div class="flex items-center gap-2 rounded-md border px-2 py-1.5 text-[10px] border-white/5 text-white/60"> 1155 <span class="flex h-4 w-4 flex-none items-center justify-center rounded-full border font-mono text-[8px] border-white/20 text-white/55"> 1156 3 1157 </span> 1158 Swap pads, torque to spec 1159 </div> 1160 </div> 1161 </article> 1162 </div> 1163 1164 <div class="mt-10 flex flex-wrap items-center gap-3"> 1165 <a href="/demo/" class="btn-ghost"> 1166 Walk through the full app <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 1167 </a> 1168 <span class="font-mono text-[10px] uppercase tracking-widest text-white/60"> 1169 Interface preview â shown with sample data 1170 </span> 1171 </div> 1172 </div> 1173</section> 1174 1175 <!-- Brand trailer â the video the VideoObject JSON-LD above describes. 1176 Keep this embed and the LD node in sync: markup for a video that 1177 isn't on the page risks a structured-data manual action. --> 1178 <section id="watch-video" class="mx-auto max-w-4xl px-6 py-12 scroll-mt-24"> 1179 <div class="video-embed group relative aspect-video overflow-hidden rounded-2xl border border-white/10 bg-brand-surface" data-youtube-id="ml4bEoyor6w" data-title="MECH AI â the AI mechanic in your pocket"> 1180 <button type="button" class="video-embed__play absolute inset-0 flex h-full w-full items-center justify-center" aria-label="Play video: MECH AI â the AI mechanic in your pocket"> 1181 <img src="https://i.ytimg.com/vi/ml4bEoyor6w/maxresdefault.jpg" alt="MECH AI â the AI mechanic in your pocket" loading="lazy" width="1280" height="720" class="absolute inset-0 h-full w-full object-cover transition group-hover:scale-[1.02]"> 1182 <span class="relative z-10 flex h-16 w-16 items-center justify-center rounded-full bg-brand-accent text-black shadow-lg transition group-hover:scale-110" aria-hidden="true"> 1183 <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M8 5v14l11-7z"></path></svg> 1184 </span> 1185 </button> 1186 </div> 1187 <p class="mt-3 text-center text-sm text-white/60">MECH AI â the AI mechanic in your pocket</p> 1188</section> 1189
1190<script> 1191 (function () { 1192 document.querySelectorAll('.video-embed').forEach(function (el) { 1193 var btn = el.querySelector('.video-embed__play'); 1194 if (!btn) return; 1195 btn.addEventListener('click', function () { 1196 var id = el.getAttribute('data-youtube-id'); 1197 var title = el.getAttribute('data-title') || 'Video'; 1198 var iframe = document.createElement('iframe'); 1199 iframe.setAttribute('src', 'https://www.youtube-nocookie.com/embed/' + id + '?autoplay=1&rel=0'); 1200 iframe.setAttribute('title', title); 1201 iframe.setAttribute('loading', 'lazy'); 1202 iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'); 1203 iframe.setAttribute('allowfullscreen', ''); 1204 iframe.className = 'absolute inset-0 h-full w-full border-0'; 1205 el.innerHTML = ''; 1206 el.appendChild(iframe); 1207 }); 1208 }); 1209 })(); 1210</script>
1210 1211 1212 <section class="section"> 1213 <div class="mx-auto max-w-7xl px-6"> 1214 <div class="reveal"> 1215 <span class="eyebrow">The honest part</span> 1216 <h2 class="mt-4 max-w-2xl text-3xl font-semibold tracking-tight md:text-4xl"> 1217 What it <span class="text-brand-accent">won't</span> do. 1218 </h2> 1219 <p class="mt-3 max-w-2xl text-base text-white/60"> 1220 An AI mechanic is only useful if it's honest with you. That's the whole point. 1221 </p> 1222 </div> 1223 1224 <div class="mt-12 grid gap-5 md:grid-cols-3"> 1225 <div class="card reveal"> 1226 <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-accent/12 text-brand-accent"> 1227 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg> 1228 </span> 1229 <h3 class="mt-4 text-lg font-semibold tracking-tight">Won't flash your ECU</h3> 1230 <p class="mt-2 text-sm leading-relaxed text-white/65">MECH AI helps you read and understand vehicle information. It does not reprogram or tune your ECU.</p> 1231 </div><div class="card reveal"> 1232 <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-accent/12 text-brand-accent"> 1233 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-store" aria-hidden="true"><path d="M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"></path><path d="M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"></path><path d="M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"></path></svg> 1234 </span> 1235 <h3 class="mt-4 text-lg font-semibold tracking-tight">Will tell you to go to a shop</h3> 1236 <p class="mt-2 text-sm leading-relaxed text-white/65">Some repairs need a lift, special tools, or hands-on inspection. MECH AI can help you understand when to involve a professional.</p> 1237 </div><div class="card reveal"> 1238 <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-accent/12 text-brand-accent"> 1239 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check" aria-hidden="true"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="m9 12 2 2 4-4"></path></svg> 1240 </span> 1241 <h3 class="mt-4 text-lg font-semibold tracking-tight">No fake counts, no upsell scripts</h3> 1242 <p class="mt-2 text-sm leading-relaxed text-white/65">Real reviews, honest answers, and the only number we claim is 100K+ downloads. Cancel anytime â no cancellation phone call required.</p> 1243 </div> 1244 </div> 1245 1246 <p class="reveal mt-8 font-mono text-[11px] uppercase tracking-[0.16em] text-white/60"> 1247 OBD2 Bluetooth (BLE) & WiFi reader in the iOS/Android app (read-only, no flashing) · 1248 MECH Care adaptive service plans 1249 </p> 1250 </div> 1251</section> 1252 1253 <section class="mx-auto max-w-7xl px-6 py-20"> 1254 <div class="max-w-2xl">
1255 <span class="eyebrow">Real reviews</span> 1256 <h2 class="mt-4 text-3xl font-semibold tracking-tight md:text-4xl">What people are saying.</h2> 1257 <p class="mt-3 text-base text-white/60">Verified Google Play and App Store reviews. We donât edit them.</p> 1258 </div> 1259 1260 <div class="mt-12 grid gap-5 md:grid-cols-2"> 1261 <figure class="card flex h-full flex-col"> 1262 <span role="img" aria-label="5 out of 5 stars" class="flex items-center gap-1 text-brand-accent"> 1263 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg> 1264 1265 </span> 1266 <blockquote class="mt-4 text-sm leading-relaxed text-white/85"> 1267 “I've been dealing with a difficult-to-diagnose CEL â mechanics wouldn't listen, dealer service wouldn't listen. I lost hope until this AI. We bounced ideas back and forth, helped me diagnose and confirm with utmost accuracy what was causing it.” 1268 </blockquote> 1269 <figcaption class="mt-6 flex items-end justify-between gap-4 border-t border-white/5 pt-4"> 1270 <div> 1271 <p class="text-sm font-semibold text-white">Nicholas Warner</p> 1272 <p class="mt-0.5 text-xs text-white/55">DIY car owner</p> 1273 </div> 1274 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 1275 Google Play · Mar 2025 1276 </p> 1277 </figcaption> 1278 </figure><figure class="card flex h-full flex-col">
1279 <span role="img" aria-label="5 out of 5 stars" class="flex items-center gap-1 text-brand-accent"> 1280 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg> 1281 1282 </span> 1283 <blockquote class="mt-4 text-sm leading-relaxed text-white/85"> 1284 “Love it â worth paying for. But even just the free version is great. Very helpful, very detailed. No need to worry whether or not the guy at the parts store knows anything about mechanics.” 1285 </blockquote> 1286 <figcaption class="mt-6 flex items-end justify-between gap-4 border-t border-white/5 pt-4"> 1287 <div> 1288 <p class="text-sm font-semibold text-white">Mika Blackburn</p> 1289 <p class="mt-0.5 text-xs text-white/55">DIY car owner</p> 1290 </div> 1291 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 1292 Google Play · Feb 2026 1293 </p> 1294 </figcaption> 1295 </figure><figure class="card flex h-full flex-col">
1296 <span role="img" aria-label="5 out of 5 stars" class="flex items-center gap-1 text-brand-accent"> 1297 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg> 1298 1299 </span> 1300 <blockquote class="mt-4 text-sm leading-relaxed text-white/85"> 1301 “Entertaining and VERY helpful with any questions concerning engine mechanics. Wiring/parts diagrams, parts/tool finder, diagnostics, repair guides, OBD decoder, & more. For DIY mechanics, this app is a no-brainer.” 1302 </blockquote> 1303 <figcaption class="mt-6 flex items-end justify-between gap-4 border-t border-white/5 pt-4"> 1304 <div> 1305 <p class="text-sm font-semibold text-white">Rex Minke</p> 1306 <p class="mt-0.5 text-xs text-white/55">DIY mechanic, DIY plan</p> 1307 </div> 1308 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 1309 Google Play · Mar 2026 1310 </p> 1311 </figcaption> 1312 </figure><figure class="card flex h-full flex-col">
1313 <span role="img" aria-label="4 out of 5 stars" class="flex items-center gap-1 text-brand-accent"> 1314 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg> 1315 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg> 1316 </span> 1317 <blockquote class="mt-4 text-sm leading-relaxed text-white/85"> 1318 “This is the future we need. I work as a mechanic for a reputable worldwide company. It's been able to correctly diagnose the exact problem first. Also gives me other possible issues to fix that can cause the problem I had.” 1319 </blockquote> 1320 <figcaption class="mt-6 flex items-end justify-between gap-4 border-t border-white/5 pt-4"> 1321 <div> 1322 <p class="text-sm font-semibold text-white">Alix Goldpoint</p> 1323 <p class="mt-0.5 text-xs text-white/55">Professional mechanic</p> 1324 </div> 1325 <p class="font-mono text-[10px] uppercase tracking-widest text-white/55"> 1326 Google Play · Jan 2025 1327 </p> 1328 </figcaption> 1329 </figure> 1330 </div> 1331</section> 1332 1333 <section id="pricing" class="reveal mx-auto max-w-7xl px-6 py-24"> 1334 <div class="flex items-end justify-between gap-6"> 1335 <div>
1336 <span class="eyebrow">Pricing</span> 1337 <h2 class="mt-4 text-3xl font-semibold tracking-tight md:text-4xl"> 1338 Start free. Grow your toolkit. 1339 </h2> 1340 <p class="mt-3 max-w-2xl text-base text-white/60"> 1341 Start with your own vehicle. Move to professional data when the work 1342 demands it. Shop operations are handled separately. 1343 </p> 1344 </div> 1345 <a href="/pricing/" class="hidden md:inline-flex btn-link"> 1346 Full comparison 1347 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 1348 </a> 1349 </div> 1350 1351 <div class="mt-12 grid gap-5 md:grid-cols-3"> 1352 <div class="card flex flex-col "> 1353 <div class="flex items-baseline justify-between"> 1354 <h3 class="font-mono text-xs uppercase tracking-widest text-white/70"> 1355 FREE 1356 </h3> 1357 1358 </div> 1359 <div class="mt-5 flex items-baseline gap-1"> 1360 <span class="tabular text-4xl font-bold tracking-tight"> 1361 $0 1362 </span> 1363 <span class="text-sm text-white/60"> 1364 /Forever, ad-supported 1365 </span> 1366 </div> 1367 <ul class="mt-6 space-y-3 text-sm text-white/75"> 1368 <li class="flex items-start gap-2"> 1369 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1370 <span>3 AI Mechanic messages per day</span> 1371 </li><li class="flex items-start gap-2"> 1372 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1373 <span>Photo questions in AI Mechanic</span> 1374 </li><li class="flex items-start gap-2"> 1375 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1376 <span>OBD-II code decoder</span> 1377 </li><li class="flex items-start gap-2"> 1378 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1379 <span>1 repair guide + 1 guided diagnostic per day</span> 1380 </li> 1381 </ul> 1382 <a href="https://prod.mechai.app/v2/login?utm_source=website&utm_medium=organic&utm_campaign=home_pricing_teaser&src=home_pricing_teaser" class="mt-7 btn-ghost justify-center" data-event="sign_up_click" data-event-location="home_pricing_teaser" data-event-plan="free"> 1383 Start free 1384 </a> 1385 </div><div class="card flex flex-col border-brand-accent/60 bg-gradient-to-b from-brand-accent/[0.08] to-brand-surface"> 1386 <div class="flex items-baseline justify-between"> 1387 <h3 class="font-mono text-xs uppercase tracking-widest text-white/70"> 1388 DIY 1389 </h3> 1390 <span class="rounded-full bg-brand-accent px-2 py-0.5 font-mono text-[10px] font-semibold uppercase tracking-widest text-brand-bg"> 1391 Best for most owners 1392 </span> 1393 </div> 1394 <div class="mt-5 flex items-baseline gap-1">
1395 <span class="tabular text-4xl font-bold tracking-tight"> 1396 $7.99 1397 </span> 1398 <span class="text-sm text-white/60"> 1399 /month 1400 </span> 1401 </div> 1402 <ul class="mt-6 space-y-3 text-sm text-white/75"> 1403 <li class="flex items-start gap-2"> 1404 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1405 <span>100 AI Mechanic messages per day</span> 1406 </li><li class="flex items-start gap-2"> 1407 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1408 <span>Step-by-step repair guides + advanced diagnostics</span> 1409 </li><li class="flex items-start gap-2"> 1410 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1411 <span>Maintenance schedule, Vehicle Health + Timeline</span> 1412 </li><li class="flex items-start gap-2"> 1413 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1414 <span>Live OBD-II data, scan history + emissions readiness</span> 1415 </li> 1416 </ul> 1417 <a href="https://prod.mechai.app/v2/login?utm_source=website&utm_medium=organic&utm_campaign=home_pricing_teaser&src=home_pricing_teaser&returnUrl=%2Fv2%2Fsubscription%3Fplan%3Ddiy%26src%3Dhome_pricing_teaser" class="mt-7 btn-primary justify-center" data-event="sign_up_click" data-event-location="home_pricing_teaser" data-event-plan="diy"> 1418 Start fixing 1419 </a> 1420 </div><div class="card flex flex-col "> 1421 <div class="flex items-baseline justify-between"> 1422 <h3 class="font-mono text-xs uppercase tracking-widest text-white/70"> 1423 MECHANIC 1424 </h3> 1425 1426 </div> 1427 <div class="mt-5 flex items-baseline gap-1"> 1428 <span class="tabular text-4xl font-bold tracking-tight"> 1429 $19.99 1430 </span> 1431 <span class="text-sm text-white/60"> 1432 /month 1433 </span> 1434 </div> 1435 <ul class="mt-6 space-y-3 text-sm text-white/75"> 1436 <li class="flex items-start gap-2"> 1437 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1438 <span>300 AI messages + 50 photo messages per day</span> 1439 </li><li class="flex items-start gap-2"> 1440 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1441 <span>Full TSB + recall library</span> 1442 </li><li class="flex items-start gap-2"> 1443 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
1444 <span>AI wiring diagrams â 10 per day</span> 1445 </li><li class="flex items-start gap-2"> 1446 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-0.5 flex-none text-brand-accent" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 1447 <span>Pro OBD-II tests and export tools</span> 1448 </li> 1449 </ul> 1450 <a href="https://prod.mechai.app/v2/login?utm_source=website&utm_medium=organic&utm_campaign=home_pricing_teaser&src=home_pricing_teaser&returnUrl=%2Fv2%2Fsubscription%3Fplan%3Dmechanic%26src%3Dhome_pricing_teaser" class="mt-7 btn-ghost justify-center" data-event="sign_up_click" data-event-location="home_pricing_teaser" data-event-plan="mechanic"> 1451 Get pro tools 1452 </a> 1453 </div> 1454 </div> 1455 1456 <div class="mt-8 text-center md:hidden"> 1457 <a href="/pricing/" class="btn-link"> 1458 Full comparison 1459 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 1460 </a> 1461 </div> 1462 1463 <div class="mt-10 rounded-2xl border border-white/10 bg-brand-surface p-6 md:flex md:items-center md:justify-between"> 1464 <div> 1465 <p class="font-mono text-[11px] uppercase tracking-widest text-white/60"> 1466 For shops 1467 </p> 1468 <p class="mt-2 text-lg font-semibold text-white"> 1469 AUTOSHOP â $59.99/mo for repair intelligence. 1470 </p> 1471 <p class="mt-1 text-sm text-white/60"> 1472 OEM repair + wiring diagrams and high-volume AI allowances. Need 1473 customers, repair orders, invoices, and roles too? Apply for the SHOP 1474 MANAGER pilot. 1475 </p> 1476 </div> 1477 <a href="/for-shops/" class="mt-5 btn-primary md:mt-0"> 1478 Compare shop options 1479 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 1480 </a> 1481 </div> 1482</section> 1483 1484 <!-- FAQ --> 1485 <section class="mx-auto max-w-3xl px-6 py-24" data-astro-cid-lcdefpme> 1486 <div class="text-center" data-astro-cid-lcdefpme> 1487 <span class="eyebrow" data-astro-cid-lcdefpme>FAQ</span> 1488 <h2 class="mt-4 text-3xl font-semibold tracking-tight md:text-4xl" data-astro-cid-lcdefpme> 1489 Answers, up front. 1490 </h2> 1491 </div> 1492 <div class="mt-12" data-astro-cid-lcdefpme> 1493 <div class="divide-y divide-white/10 overflow-hidden rounded-2xl border border-brand-border bg-brand-surface"> 1494 <details class="group" open> 1495 <summary class="flex w-full cursor-pointer list-none items-start justify-between gap-4 px-6 py-5 text-left transition hover:bg-white/[0.02] [&::-webkit-details-marker]:hidden"> 1496 <span class="text-base font-medium text-white">Do I need an OBD-II scanner?</span> 1497 <span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full border border-brand-border-strong text-white/70 transition-transform duration-200 group-open:rotate-45" aria-hidden="true"> 1498 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> 1499 <line x1="12" y1="5" x2="12" y2="19"></line> 1500 <line x1="5" y1="12" x2="19" y2="12"></line> 1501 </svg> 1502 </span> 1503 </summary> 1504 <div class="-mt-1 px-6 pb-6 text-sm leading-relaxed text-white/70">No â works from your words. Describe the symptom, paste a code you saw on a loaner scanner, or show it a photo of the dashboard. And if you have a Bluetooth (BLE) ELM327 adapter, the iOS and Android app pairs with it directly to scan and read your codes.</div> 1505 </details>
1505<details class="group"> 1506 <summary class="flex w-full cursor-pointer list-none items-start justify-between gap-4 px-6 py-5 text-left transition hover:bg-white/[0.02] [&::-webkit-details-marker]:hidden"> 1507 <span class="text-base font-medium text-white">Does it work for any make and model?</span> 1508 <span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full border border-brand-border-strong text-white/70 transition-transform duration-200 group-open:rotate-45" aria-hidden="true"> 1509 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> 1510 <line x1="12" y1="5" x2="12" y2="19"></line> 1511 <line x1="5" y1="12" x2="19" y2="12"></line> 1512 </svg> 1513 </span> 1514 </summary> 1515 <div class="-mt-1 px-6 pb-6 text-sm leading-relaxed text-white/70">Yes. The AI Mechanic covers everything from common daily drivers to older trucks and imports. The more specific your vehicle details (year, make, model, trim, mileage), the more specific the advice.</div> 1516 </details><details class="group"> 1517 <summary class="flex w-full cursor-pointer list-none items-start justify-between gap-4 px-6 py-5 text-left transition hover:bg-white/[0.02] [&::-webkit-details-marker]:hidden"> 1518 <span class="text-base font-medium text-white">Is this just a ChatGPT wrapper?</span> 1519 <span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full border border-brand-border-strong text-white/70 transition-transform duration-200 group-open:rotate-45" aria-hidden="true"> 1520 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> 1521 <line x1="12" y1="5" x2="12" y2="19"></line> 1522 <line x1="5" y1="12" x2="19" y2="12"></line> 1523 </svg> 1524 </span> 1525 </summary> 1526 <div class="-mt-1 px-6 pb-6 text-sm leading-relaxed text-white/70">No. MECH AI is built on a frontier AI model, wrapped in automotive-specific reasoning, your garage context, and integrated tools (TSB lookups, parts search, diagnostic trees). Generic chatbots don't know what year your truck is.</div> 1527 </details><details class="group"> 1528 <summary class="flex w-full cursor-pointer list-none items-start justify-between gap-4 px-6 py-5 text-left transition hover:bg-white/[0.02] [&::-webkit-details-marker]:hidden"> 1529 <span class="text-base font-medium text-white">Will it tell me to go to a shop?</span> 1530 <span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full border border-brand-border-strong text-white/70 transition-transform duration-200 group-open:rotate-45" aria-hidden="true"> 1531 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> 1532 <line x1="12" y1="5" x2="12" y2="19"></line> 1533 <line x1="5" y1="12" x2="19" y2="12"></line> 1534 </svg> 1535 </span> 1536 </summary> 1537 <div class="-mt-1 px-6 pb-6 text-sm leading-relaxed text-white/70">Often. That's the point. If the fix needs a lift, special tools, or skills you don't have, MECH AI will say so â and tell you what the shop should charge.</div> 1538 </details><details class="group"> 1539 <summary class="flex w-full cursor-pointer list-none items-start justify-between gap-4 px-6 py-5 text-left transition hover:bg-white/[0.02] [&::-webkit-details-marker]:hidden"> 1540 <span class="text-base font-medium text-white">Does MECH AI work in my language?</span> 1541 <span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full border border-brand-border-strong text-white/70 transition-transform duration-200 group-open:rotate-45" aria-hidden="true"> 1542 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> 1543 <line x1="12" y1="5" x2="12" y2="19"></line> 1544 <line x1="5" y1="12" x2="19" y2="12"></line> 1545 </svg> 1546 </span> 1547 </summary> 1548 <div class="-mt-1 px-6 pb-6 text-sm leading-relaxed text-white/70">Yes â MECH AI works in 7 languages: English, Spanish, Portuguese, Russian, German, French, and Italian. The AI answers in your language, and the app is available worldwide.</div> 1549 </details>
1549<details class="group"> 1550 <summary class="flex w-full cursor-pointer list-none items-start justify-between gap-4 px-6 py-5 text-left transition hover:bg-white/[0.02] [&::-webkit-details-marker]:hidden"> 1551 <span class="text-base font-medium text-white">Can I cancel anytime?</span> 1552 <span class="mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-full border border-brand-border-strong text-white/70 transition-transform duration-200 group-open:rotate-45" aria-hidden="true"> 1553 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> 1554 <line x1="12" y1="5" x2="12" y2="19"></line> 1555 <line x1="5" y1="12" x2="19" y2="12"></line> 1556 </svg> 1557 </span> 1558 </summary> 1559 <div class="-mt-1 px-6 pb-6 text-sm leading-relaxed text-white/70">Yes. Cancel anytime â mobile subscriptions in your Ap
1559p Store or Google Play settings, web subscriptions from the in-app subscription page. No cancellation phone call required.</div> 1560 </details> 1561</div> 1562 </div> 1563 <p class="mt-8 text-center text-sm text-white/60" data-astro-cid-lcdefpme> 1564 Comparing apps? See honest head-to-heads on the 1565 <a href="/compare/" class="text-white/80 underline decoration-white/30 underline-offset-4 hover:text-white" data-event="compare_hub_click" data-event-location="home_faq" data-astro-cid-lcdefpme> 1566 MECH AI comparison hub 1567 </a> — including MECH AI vs FIXD and MECH AI vs TorqueBot — or 1568 browse 1569 <a href="/symptoms/" class="text-white/80 underline decoration-white/30 underline-offset-4 hover:text-white" data-event="symptoms_hub_click" data-event-location="home_faq" data-astro-cid-lcdefpme> 1570 common symptom guides 1571 </a>. 1572 </p> 1573 </section> 1574 1575 <section class="relative overflow-hidden py-24"> 1576 <div class="absolute inset-0 bg-glow-orange opacity-80" aria-hidden="true"></div> 1577 <div class="relative mx-auto max-w-4xl px-6 text-center"> 1578 <h2 class="text-3xl font-semibold tracking-tight md:text-5xl">A clearer next step for your car.</h2> 1579 <p class="mx-auto mt-5 max-w-2xl text-lg text-white/70">Start with your vehicle and a question. Explore MECH AI for free, and choose a plan when you need more.</p> 1580 <div class="mt-8 flex flex-wrap items-center justify-center gap-3"> 1581 <a href="https://prod.mechai.app/v2/login" class="btn-primary btn-lg" data-event="sign_up_click" data-event-location="footer_cta" data-event-page="home"> 1582 Get started free 1583 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 1584 </a> 1585 <a href="/pricing/" class="btn-ghost btn-lg" data-event="secondary_cta_click" data-event-location="footer_cta" data-event-page="home"> 1586 See all plans 1587 </a> 1588 </div> 1589 <p class="mt-6 font-mono text-[11px] uppercase tracking-widest text-white/60">100K+ downloads · no card required</p> 1590 </div> 1591</section> 1592 1593 <div class="mobile-cta-bar fixed inset-x-0 bottom-0 z-40 border-t border-brand-border bg-brand-bg/85 px-4 pt-2.5 backdrop-blur-md md:hidden" style="padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.625rem);" data-mobile-cta data-astro-cid-xxqztafz> 1594 <a href="https://mechai.onelink.me/SHKN/MECH?pid=website&c=site&af_channel=organic" class="btn-primary w-full justify-center min-h-[44px]" data-cta="app" data-event="get_app_click" data-event-location="sticky_mobile_bar" data-event-page="home" data-astro-cid-xxqztafz> 1595 Get the app â free 1596 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true" data-astro-cid-xxqztafz="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> 1597 </a> 1598</div> 1599
1600<script type="module">var e=document.querySelector(`[data-mobile-cta]`),t=document.querySelector(`footer`);e&&t&&`IntersectionObserver`in window&&new IntersectionObserver(t=>{for(let n of t)e.classList.toggle(`is-hidden`,n.isIntersecting)},{rootMargin:`0px 0px -8px 0px`}).observe(t);</script>
1600 1601 </div> 1602 1603 </main> 1604 <footer class="mt-24 border-t border-white/10 bg-brand-bg"> 1605 <div class="mx-auto max-w-7xl px-5 py-14 sm:px-6 sm:py-16"> 1606 <div class="grid grid-cols-2 gap-8 sm:gap-10 md:grid-cols-6"> 1607 <div class="col-span-2"> 1608 <a href="/" class="group flex items-center gap-2"> 1609 <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-accent/15 text-brand-accent transition group-hover:bg-brand-accent/25" aria-hidden="true"> 1610 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg> 1611 </span> 1612 <span class="text-base font-bold tracking-tight">MECH AI</span> 1613</a> 1614 <p class="mt-4 max-w-sm text-sm text-white/60">MECH AI is the automotive multitool â an AI mechanic, OBD2 scanner, repair guides, wiring diagrams, parts search, and shop management in one app, in seven languages, free to start.</p> 1615 <div class="mt-6"> 1616 <div class="flex flex-wrap items-center gap-2.5"> 1617 <a href="https://apps.apple.com/us/app/mech-ai-diagnostic-repair/id6479862739" target="_blank" rel="noopener noreferrer" class="group inline-flex items-center gap-2.5 rounded-xl border border-white/15 bg-white/[0.04] px-3.5 py-2 transition hover:border-white/30 hover:bg-white/[0.08]" data-event="ios_download_click" data-event-source="footer" data-event-platform="ios"> 1618 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-apple flex-none text-white" aria-hidden="true"><path d="M12 6.528V3a1 1 0 0 1 1-1h0"></path><path d="M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21"></path></svg> 1619 <span class="text-left leading-none"> 1620 <span class="block text-[9px] font-medium uppercase tracking-wider text-white/60">Download on the</span> 1621 <span class="block text-xs font-semibold text-white">App Store</span> 1622 </span> 1623 </a> 1624 <a href="https://play.google.com/store/apps/details?id=app.mechai.mobile" target="_blank" rel="noopener noreferrer" class="group inline-flex items-center gap-2.5 rounded-xl border border-white/15 bg-white/[0.04] px-3.5 py-2 transition hover:border-white/30 hover:bg-white/[0.08]" data-event="android_download_click" data-event-source="footer" data-event-platform="android"> 1625 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play flex-none text-white" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg> 1626 <span class="text-left leading-none"> 1627 <span class="block text-[9px] font-medium uppercase tracking-wider text-white/60">Get it on</span> 1628 <span class="block text-xs font-semibold text-white">Google Play</span> 1629 </span> 1630 </a> 1631</div> 1632 </div> 1633 <address class="mt-6 not-italic text-xs leading-relaxed text-white/60"> 1634 <strong class="font-semibold text-white/80">MECH.AI LLC</strong><br> 1635 Draper, Utah, USA<br> 1636 <a href="mailto:[email protected]" class="hover:text-white">[email protected]</a> 1637 1638 </address> 1639 <ul class="mt-5 flex gap-3"> 1640 <li> 1641 <a href="https://x.com/mech_app" aria-label="X (Twitter)" target="_blank" rel="noopener noreferrer" class="flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 text-white/60 transition hover:border-white/30 hover:text-white"> 1642 <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> 1643 <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path> 1644 </svg> 1645 </a> 1646 </li> 1647 <li> 1648 <a href="https://www.linkedin.com/company/mechai" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer" class="flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 text-white/60 transition hover:border-white/30 hover:text-white"> 1649 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
1649ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg> 1650 </a> 1651 </li> 1652 <li> 1653 <a href="https://www.facebook.com/mechaiapp/" aria-label="Facebook" target="_blank" rel="noopener noreferrer" class="flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 text-white/60 transition hover:border-white/30 hover:text-white"> 1654 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-facebook" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg> 1655 </a> 1656 </li> 1657 </ul> 1658 </div> 1659 <div> 1660 1661 <p class="text-xs font-mono uppercase tracking-widest text-white/60"> 1662 Product 1663 </p> 1664 <ul class="mt-4 space-y-2"> 1665 <li> 1666 <a href="/#features" class="text-sm text-white/70 transition hover:text-white"> 1667 Features 1668 </a> 1669 </li><li> 1670 <a href="/how-it-works/" class="text-sm text-white/70 transition hover:text-white"> 1671 How it works 1672 </a> 1673 </li><li> 1674 <a href="/demo/" class="text-sm text-white/70 transition hover:text-white"> 1675 Demo 1676 </a> 1677 </li><li> 1678 <a href="/pricing/" class="text-sm text-white/70 transition hover:text-white"> 1679 Pricing 1680 </a> 1681 </li><li> 1682 <a href="/for-shops/" class="text-sm text-white/70 transition hover:text-white"> 1683 For Shops 1684 </a> 1685 </li><li> 1686 <a href="/download/" class="text-sm text-white/70 transition hover:text-white"> 1687 Download 1688 </a> 1689 </li><li> 1690 <a href="/diagnose/" class="text-sm text-white/70 transition hover:text-white"> 1691 OBD2 Code Lookup 1692 </a> 1693 </li> 1694 </ul> 1695 </div><div> 1696 1697 <p class="text-xs font-mono uppercase tracking-widest text-white/60"> 1698 Resources 1699 </p> 1700 <ul class="mt-4 space-y-2"> 1701 <li> 1702 <a href="/ai-mechanic/" class="text-sm text-white/70 transition hover:text-white"> 1703 AI Mechanic 1704 </a> 1705 </li><li> 1706 <a href="/car-diagnostic-app/" class="text-sm text-white/70 transition hover:text-white"> 1707 Car Diagnostic App 1708 </a> 1709 </li><li> 1710 <a href="/ai-obd2-scanner/" class="text-sm text-white/70 transition hover:text-white"> 1711 AI OBD2 Scanner 1712 </a> 1713 </li><li> 1714 <a href="/obd2-codes/" class="text-sm text-white/70 transition hover:text-white">
1715 OBD2 Codes 1716 </a> 1717 </li><li> 1718 <a href="/diagnose/recalls/" class="text-sm text-white/70 transition hover:text-white"> 1719 Recall Database 1720 </a> 1721 </li><li> 1722 <a href="/repair-cost/" class="text-sm text-white/70 transition hover:text-white"> 1723 Repair Costs 1724 </a> 1725 </li><li> 1726 <a href="/maintenance/" class="text-sm text-white/70 transition hover:text-white"> 1727 Maintenance Schedule 1728 </a> 1729 </li><li> 1730 <a href="/symptoms/" class="text-sm text-white/70 transition hover:text-white"> 1731 Symptom Guides 1732 </a> 1733 </li><li> 1734 <a href="/database/" class="text-sm text-white/70 transition hover:text-white"> 1735 Fix Database 1736 </a> 1737 </li><li> 1738 <a href="/compare/" class="text-sm text-white/70 transition hover:text-white"> 1739 Compare 1740 </a> 1741 </li><li> 1742 <a href="/best-ai-for-mechanics/" class="text-sm text-white/70 transition hover:text-white"> 1743 Best AI for Mechanics 1744 </a> 1745 </li><li> 1746 <a href="/blog/" class="text-sm text-white/70 transition hover:text-white"> 1747 Wrench Report 1748 </a> 1749 </li> 1750 </ul> 1751 </div><div> 1752 1753 <p class="text-xs font-mono uppercase tracking-widest text-white/60"> 1754 Company 1755 </p> 1756 <ul class="mt-4 space-y-2"> 1757 <li> 1758 <a href="/why/" class="text-sm text-white/70 transition hover:text-white"> 1759 Why MECH AI 1760 </a> 1761 </li><li> 1762 <a href="/why/#story" class="text-sm text-white/70 transition hover:text-white"> 1763 Our story 1764 </a> 1765 </li><li> 1766 <a href="/press/" class="text-sm text-white/70 transition hover:text-white"> 1767 Press & reviewer kit 1768 </a> 1769 </li><li> 1770 <a href="/partners/" class="text-sm text-white/70 transition hover:text-white"> 1771 Partnerships 1772 </a> 1773 </li><li> 1774 <a href="/editorial-policy/" class="text-sm text-white/70 transition hover:text-white"> 1775 Editorial policy 1776 </a> 1777 </li><li> 1778 <a href="/contact/" class="text-sm text-white/70 transition hover:text-white"> 1779 Contact 1780 </a> 1781 </li> 1782 </ul> 1783 </div><div> 1784 1785 <p class="text-xs font-mono uppercase tracking-widest text-white/60"> 1786 Legal 1787 </p> 1788 <ul class="mt-4 space-y-2"> 1789 <li> 1790 <a href="/legal/terms/" class="text-sm text-white/70 transition hover:text-white"> 1791 Terms 1792 </a> 1793 </li><li> 1794 <a href="/legal/privacy/" class="text-sm text-white/70 transition hover:text-white"> 1795 Privacy 1796 </a> 1797 </li><li> 1798 <a href="/legal/eula/" class="text-sm text-white/70 transition hover:text-white"> 1799 EULA 1800 </a> 1801 </li> 1802 </ul> 1803 </div> 1804 </div> 1805 1806 <div class="mt-12 flex flex-col items-start justify-between gap-4 border-t border-white/10 pt-6 md:flex-row md:items-center"> 1807 <p class="text-xs text-white/60">© 2026 MECH.AI LLC. All rights reserved.</p> 1808 <p class="font-mono text-[11px] uppercase tracking-widest text-white/60"> 1809 Made in Draper, UT 1810 </p> 1811 </div> 1812 </div> 1813</footer> 1814 1815 1816
1816<script> 1817 (function () { 1818 document.addEventListener( 1819 'click', 1820 function (ev) { 1821 var el = ev.target instanceof Element ? ev.target.closest('[data-event]') : null; 1822 if (!el) return; 1823 var name = el.getAttribute('data-event'); 1824 if (!name) return; 1825 var params = {}; 1826 for (var i = 0; i < el.attributes.length; i++) { 1827 var a = el.attributes[i]; 1828 if (a.name.indexOf('data-event-') === 0 && a.name !== 'data-event') { 1829 params[a.name.substring('data-event-'.length).replace(/-/g, '_')] = a.value; 1830 } 1831 } 1832 try { 1833 if (typeof window.gtag === 'function') { 1834 window.gtag('event', name, params); 1835 } 1836 } catch (e) { 1837 /* ad-blocker â don't break the click */ 1838 } 1839 }, 1840 true 1841 ); 1842 })(); 1843 </script>
1843 1844
1844<script> 1845 (function () { 1846 if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; 1847 if (!('IntersectionObserver' in window)) return; 1848 var io = new IntersectionObserver( 1849 function (entries) { 1850 entries.forEach(function (e) { 1851 if (e.isIntersecting) { 1852 e.target.classList.add('reveal-in'); 1853 io.unobserve(e.target); 1854 } 1855 }); 1856 }, 1857 { threshold: 0.12, rootMargin: '0px 0px -8% 0px' } 1858 ); 1859 document.querySelectorAll('.reveal').forEach(function (el) { 1860 io.observe(el); 1861 }); 1862 })(); 1863 </script>
1863</body> 1864</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.