PageSourceSearch

https://mechai.app/

html mechai.app collected 2026-10-02 15:17:57 UTC 166,505 bytes, 1,864 lines download raw bytes

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 &amp; 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 &amp; 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 &amp; 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&amp;c=site&amp;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 &amp; 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&amp;utm_medium=organic&amp;utm_campaign=home_hero&amp;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. &nbsp; 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="{&quot;initialVehicleId&quot;:[0,&quot;camry&quot;],&quot;data-astro-cid-twhn4bk4&quot;:[0,true]}" ssr client="visible" opts="{&quot;name&quot;:&quot;DemoConversation&quot;,&quot;value&quot;: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] [&amp;::-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 &amp; 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&#39;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 &amp; 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 &amp; 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&#39;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) &amp; 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                        &ldquo;I&#39;ve been dealing with a difficult-to-diagnose CEL — mechanics wouldn&#39;t listen, dealer service wouldn&#39;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.&rdquo;
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                        &ldquo;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.&rdquo;
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                        &ldquo;Entertaining and VERY helpful with any questions concerning engine mechanics. Wiring/parts diagrams, parts/tool finder, diagnostics, repair guides, OBD decoder, &amp; more. For DIY mechanics, this app is a no-brainer.&rdquo;
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                        &ldquo;This is the future we need. I work as a mechanic for a reputable worldwide company. It&#39;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.&rdquo;
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&amp;utm_medium=organic&amp;utm_campaign=home_pricing_teaser&amp;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&amp;utm_medium=organic&amp;utm_campaign=home_pricing_teaser&amp;src=home_pricing_teaser&amp;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&amp;utm_medium=organic&amp;utm_campaign=home_pricing_teaser&amp;src=home_pricing_teaser&amp;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] [&amp;::-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] [&amp;::-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] [&amp;::-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&#39;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] [&amp;::-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&#39;s the point. If the fix needs a lift, special tools, or skills you don&#39;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] [&amp;::-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] [&amp;::-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> &mdash; including MECH AI vs FIXD and MECH AI vs TorqueBot &mdash; 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&amp;c=site&amp;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 &amp; 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.