Tesla model 3<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root {\n --primary-color: #393c41;\n --accent-blue: #3d69e1;\n --text-dark: #171a20;\n --text-muted: #5c5e62;\n --border-light: #e2e4e4;\n --bg-light: #f4f4f4;\n --font-stack: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: var(--font-stack);\n color: var(--text-dark);\n background-color: #ffffff;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n }\n\n \/* Top Notification Bar *\/\n .promo-banner {\n background-color: #f2e3c6;\n color: var(--text-dark);\n text-align: center;\n padding: 10px 20px;\n font-size: 13px;\n font-weight: 500;\n }\n .promo-banner a {\n color: var(--text-dark);\n margin-left: 5px;\n }\n\n \/* Header Navigation *\/\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 40px;\n position: absolute;\n width: 100%;\n top: 40px;\n z-index: 10;\n }\n\n .logo svg {\n width: 120px;\n height: auto;\n fill: var(--text-dark);\n }\n\n .header-right {\n display: flex;\n align-items: center;\n gap: 15px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n }\n\n \/* Main Hero Configurator Section *\/\n .configurator-container {\n display: flex;\n min-height: 100vh;\n padding-top: 100px;\n }\n\n \/* Left Side: Visualizer Sticky Panel *\/\n .visualizer-pane {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n background-color: #ffffff;\n padding: 40px;\n }\n\n .visualizer-pane .car-image {\n width: 100%;\n max-width: 780px;\n height: auto;\n object-fit: contain;\n transition: transform 0.4s ease;\n }\n\n \/* Interactive Chevron Overlays *\/\n .nav-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.8);\n border: 1px solid var(--border-light);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n transition: background 0.2s;\n }\n .nav-arrow:hover { background: #ffffff; }\n .nav-arrow.left { left: 40px; }\n .nav-arrow.right { right: 40px; }\n\n \/* Right Side: Options Customizer Menu Scrollable *\/\n .control-pane {\n width: 450px;\n padding: 40px;\n overflow-y: auto;\n height: calc(100vh - 40px);\n position: sticky;\n top: 40px;\n border-left: 1px solid rgba(0,0,0,0.03);\n }\n\n \/* Custom Scrollbar for sleek panel feel *\/\n .control-pane::-webkit-scrollbar { width: 6px; }\n .control-pane::-webkit-scrollbar-track { background: transparent; }\n .control-pane::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }\n\n .model-title {\n font-size: 40px;\n font-weight: 500;\n text-align: center;\n margin-bottom: 25px;\n letter-spacing: -0.5px;\n }\n\n \/* Performance Specs Matrix *\/\n .specs-grid {\n display: flex;\n justify-content: space-around;\n text-align: center;\n margin-bottom: 35px;\n }\n\n .spec-item .value {\n font-size: 24px;\n font-weight: 500;\n }\n .spec-item .value span {\n font-size: 14px;\n font-weight: 400;\n }\n .spec-item .label {\n font-size: 12px;\n color: var(--text-muted);\n margin-top: 4px;\n }\n\n \/* Pricing Engine Toggle (Cash vs Lease vs Finance Tab Layout) *\/\n .payment-toggle-tabs {\n display: flex;\n border-bottom: 2px solid var(--border-light);\n margin-bottom: 20px;\n }\n\n .tab-btn {\n flex: 1;\n background: none;\n border: none;\n padding: 12px 0;\n font-family: var(--font-stack);\n font-size: 14px;\n font-weight: 500;\n color: var(--text-muted);\n cursor: pointer;\n transition: all 0.2s;\n text-align: center;\n }\n \n .tab-btn.active {\n color: var(--text-dark);\n border-bottom: 2px solid var(--text-dark);\n margin-bottom: -2px;\n }\n\n \/* Dynamic Variant Option Selectors *\/\n .variant-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 20px;\n }\n\n .variant-card {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 18px 24px;\n border: 1px solid var(--border-light);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.2s;\n background: #ffffff;\n }\n\n .variant-card:hover {\n border-color: #8e8e8e;\n }\n\n .variant-card.active {\n border: 2px solid var(--text-dark);\n padding: 17px 23px; \/* account for double border stroke shift *\/\n background-color: rgba(0, 0, 0, 0.01);\n }\n\n .variant-details .title {\n font-size: 14px;\n font-weight: 600;\n }\n .variant-details .sub {\n font-size: 13px;\n color: var(--text-muted);\n font-weight: 400;\n margin-top: 2px;\n }\n\n .variant-price {\n font-size: 15px;\n font-weight: 500;\n }\n\n \/* Generic Section Headers for Options Config *\/\n .config-section-title {\n font-size: 18px;\n font-weight: 500;\n margin: 35px 0 15px 0;\n }\n\n .config-subtext {\n font-size: 12px;\n color: var(--text-muted);\n line-height: 1.6;\n margin-bottom: 15px;\n }\n\n \/* Circular Swatch Item Builders *\/\n .swatch-container {\n display: flex;\n gap: 15px;\n margin: 15px 0;\n }\n\n .swatch {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid transparent;\n padding: 2px;\n background-clip: content-box;\n transition: transform 0.2s;\n }\n .swatch:hover { transform: scale(1.05); }\n .swatch.active { border-color: var(--accent-blue); }\n\n \/* Detail Disclosure Links *\/\n .action-link {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 16px;\n background: var(--bg-light);\n border-radius: 4px;\n font-size: 14px;\n font-weight: 500;\n text-decoration: none;\n color: var(--text-dark);\n margin: 15px 0;\n }\n\n .btn-secondary {\n display: inline-block;\n background: var(--bg-light);\n border: none;\n padding: 10px 20px;\n font-size: 13px;\n font-weight: 500;\n border-radius: 4px;\n cursor: pointer;\n margin-top: 10px;\n }\n\n \/* Bottom Floating Checkout\/Pricing Summary Action Bar *\/\n .summary-sticky-footer {\n position: fixed;\n bottom: 0;\n right: 0;\n width: 450px;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(8px);\n border-top: 1px solid var(--border-light);\n padding: 20px 40px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 100;\n }\n\n .summary-price-box .price-display {\n font-size: 24px;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n }\n\n .summary-price-box .price-label {\n font-size: 12px;\n color: var(--text-muted);\n margin-top: 2px;\n }\n\n .btn-order-now {\n background-color: var(--accent-blue);\n color: white;\n border: none;\n padding: 12px 40px;\n font-size: 14px;\n font-weight: 500;\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.2s;\n }\n .btn-order-now:hover { background-color: #2a52be; }\n\n \/* Inline Help Utilities *\/\n .zip-input-box {\n border: 1px solid var(--border-light);\n padding: 12px;\n border-radius: 4px;\n width: 100%;\n font-size: 14px;\n margin-top: 10px;\n outline: none;\n }\n\n \/* Floating Bottom Left UI Chat Widget Mock *\/\n .chat-bubble {\n position: fixed;\n bottom: 25px;\n left: 25px;\n width: 44px;\n height: 44px;\n background-color: #171a20;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 99;\n }\n\n \/* Responsive Breakpoints Rules *\/\n @media (max-width: 1024px) {\n .configurator-container {\n flex-direction: column;\n padding-top: 80px;\n }\n header {\n position: relative;\n top: 0;\n padding: 15px 20px;\n }\n .control-pane {\n width: 100%;\n height: auto;\n position: relative;\n top: 0;\n border-left: none;\n padding: 20px;\n padding-bottom: 120px; \/* offset for bottom layout frame *\/\n }\n .summary-sticky-footer {\n width: 100%;\n padding: 15px 20px;\n }\n .nav-arrow { display: none; }\n }\n <\/style>\n\n<style id=\"checkout-extra\">\n.checkout-form{margin-top:32px;padding-top:32px;border-top:1px solid #e5e5e5}\n.checkout-form h2{font-size:28px;margin-bottom:20px}\n.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}\n.checkout-form input,.checkout-form select{width:100%;height:52px;padding:0 14px;border:1px solid #d9d9d9;border-radius:4px;background:#f7f7f7;margin-bottom:14px}\n.checkout-form input:focus,.checkout-form select:focus{outline:none;border-color:#3d69e1;background:#fff}\n.full{grid-column:1\/-1}\n.payment-row{display:flex;gap:12px;margin-bottom:18px}\n.pay-btn{flex:1;height:52px;border:1px solid #d9d9d9;background:#fff;border-radius:4px;font-weight:600}\n.submit-btn{width:100%;height:54px;background:#3d69e1;color:#fff;border:none;border-radius:4px;font-size:16px}\n.vehicle-video{max-width:760px;margin:40px auto 0}\n.vehicle-video video{width:100%;border-radius:12px}\n<\/style>\n\n\n<style id=\"order-flow-extra\">\n.field-invalid {\n border-color: #d32f2f !important;\n background-color: #fff5f5 !important;\n}\n.field-error-msg {\n grid-column: 1 \/ -1;\n color: #d32f2f;\n font-size: 12px;\n margin-top: -8px;\n margin-bottom: 10px;\n display: block;\n}\n.order-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.55);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n}\n.order-modal-overlay.open { display: flex; }\n.order-modal-box {\n background: #fff;\n border-radius: 8px;\n max-width: 380px;\n width: 100%;\n padding: 36px 28px;\n text-align: center;\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n font-family: var(--font-stack);\n}\n.order-modal-box .icon-check {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: #e8f3e8;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 18px;\n}\n.order-modal-box h3 {\n font-size: 20px;\n font-weight: 600;\n margin-bottom: 10px;\n color: var(--text-dark);\n}\n.order-modal-box p {\n font-size: 14px;\n color: var(--text-muted);\n margin-bottom: 22px;\n line-height: 1.6;\n}\n.order-modal-box button {\n width: 100%;\n height: 48px;\n background: var(--accent-blue);\n color: #fff;\n border: none;\n border-radius: 4px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n}\n.order-modal-box button:hover { background-color: #2a52be; }\n<\/style>\n\n<\/head>\n<body>\n\n \n <div class=\"promo-banner\">\n Model 3 Premium & Performance: 0.99% APR Available <a href=\"#\"><\/a>\n <\/div>\n\n \n <header>\n \n <div class=\"header-right\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"><\/line><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"><\/path><\/svg>\n <span>US<\/span>\n <\/div>\n <\/header>\n\n \n <div class=\"configurator-container\">\n \n \n <section class=\"visualizer-pane\">\n <div class=\"nav-arrow left\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n <\/div>\n \n \n <img decoding=\"async\" class=\"car-image\" id=\"vehiclePreview\" src=\"https:\/\/images.unsplash.com\/photo-1617788138017-80ad40651399?auto=format&fit=crop&w=1200&q=80\" alt=\"Automobile Vehicle Configuration Screen Frame\">\n \n \n<div class=\"vehicle-video\">\n<video autoplay muted loop playsinline controls>\n<source src=\"https:\/\/digitalassets.tesla.com\/tesla-contents\/video\/upload\/f_auto,q_auto\/Homepage-FSD-Card-Mobile.mp4\" type=\"video\/mp4\">\n<\/video>\n<\/div>\n\n<div class=\"nav-arrow right\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n <\/div>\n <\/section>\n\n \n <aside class=\"control-pane\">\n <h1 class=\"model-title\">Model 3<\/h1>\n\n \n <div class=\"specs-grid\">\n <div class=\"spec-item\">\n <div class=\"value\">363<span>mi<\/span><\/div>\n <div class=\"label\">Range (EPA est.)<\/div>\n <\/div>\n <div class=\"spec-item\">\n <div class=\"value\">125<span>mph<\/span><\/div>\n <div class=\"label\">Top Speed<\/div>\n <\/div>\n <div class=\"spec-item\">\n <div class=\"value\">4.9<span>sec<\/span><\/div>\n <div class=\"label\">0-60 mph<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"payment-toggle-tabs\">\n <button class=\"tab-btn active\" onclick=\"switchPaymentMode('cash')\">Cash<\/button>\n <button class=\"tab-btn\" onclick=\"switchPaymentMode('lease')\">Lease<\/button>\n <button class=\"tab-btn\" onclick=\"switchPaymentMode('finance')\">Finance<\/button>\n <\/div>\n\n \n <div class=\"variant-list\" id=\"variantSelectionGroup\">\n \n <\/div>\n\n <a href=\"#\" class=\"action-link\">\n <span>View & Compare Features<\/span>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n <\/a>\n\n <button class=\"btn-secondary\">Get Trade-In Value<\/button>\n <p class=\"config-subtext\" style=\"margin-top: 15px;\" id=\"disclaimerLabel\">Up to $5,000 potential savings after delivery available.<\/p>\n\n <hr style=\"border: 0; border-top: 1px solid var(--border-light); margin: 30px 0;\">\n\n \n <div class=\"config-section-title\">Full Self-Driving (Supervised)<\/div>\n <p class=\"config-subtext\">Your vehicle will be able to drive itself almost anywhere with minimal driver intervention<\/p>\n <p class=\"config-subtext\" style=\"font-weight: 500; color: var(--text-dark);\">1 mo free trial included.<\/p>\n \n <div class=\"variant-card\" id=\"fsdCard\" style=\"margin-bottom: 12px;\" onclick=\"toggleFSD(this)\">\n <div class=\"variant-details\">\n <div class=\"title\">Monthly Subscription<\/div>\n <\/div>\n <div class=\"variant-price\">$99 \/mo<\/div>\n <\/div>\n \n <p class=\"config-subtext\" style=\"font-size: 11px;\">Currently enabled features require active driver supervision and do not make the vehicle autonomous. The activation and use of these features are dependent on development and regulatory approval, which may take longer in some jurisdictions.<\/p>\n\n \n <div class=\"config-section-title\">Paint Color<\/div>\n <p class=\"config-subtext\" id=\"selectedColorName\">Stealth Grey (Included)<\/p>\n <div class=\"swatch-container\">\n <div class=\"swatch active\" style=\"background-color: #43464b;\" onclick=\"selectColor('Stealth Grey', this)\"><\/div>\n <div class=\"swatch\" style=\"background-color: #f0f1f2;\" onclick=\"selectColor('Pearl White Multi-Coat', this)\"><\/div>\n <div class=\"swatch\" style=\"background-color: #1f355e;\" onclick=\"selectColor('Marine Blue', this)\"><\/div>\n <div class=\"swatch\" style=\"background-color: #111214;\" onclick=\"selectColor('Diamond Black', this)\"><\/div>\n <div class=\"swatch\" style=\"background-color: #a51d24;\" onclick=\"selectColor('Ultra Red', this)\"><\/div>\n <div class=\"swatch\" style=\"background-color: #9fa1a6;\" onclick=\"selectColor('Quicksilver', this)\"><\/div>\n <\/div>\n\n \n <div class=\"config-section-title\">Wheels<\/div>\n <p class=\"config-subtext\">18\u2019\u2019 Photon Wheels (Included)<\/p>\n <div class=\"variant-list\">\n <div class=\"variant-card active\" onclick=\"selectAddon(this, 'wheels', 0)\">\n <div class=\"variant-details\"><div class=\"title\">18\u2019\u2019 Photon Wheels<\/div><div class=\"sub\">All-Season Tires<\/div><\/div>\n <div class=\"variant-price\">Included<\/div>\n <\/div>\n <div class=\"variant-card\" onclick=\"selectAddon(this, 'wheels', 1500)\">\n <div class=\"variant-details\"><div class=\"title\">19\u2019\u2019 Nova Wheels<\/div><div class=\"sub\">All-Season Tires<\/div><\/div>\n <div class=\"variant-price\">+$1,500<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"config-section-title\">Interior Layout<\/div>\n <p class=\"config-subtext\">Black Interior (Included)<\/p>\n <div class=\"variant-list\">\n <div class=\"variant-card active\" onclick=\"selectAddon(this, 'interior', 0)\">\n <div class=\"variant-details\"><div class=\"title\">Black Interior<\/div><div class=\"sub\">Textile decor<\/div><\/div>\n <div class=\"variant-price\">Included<\/div>\n <\/div>\n <div class=\"variant-card\" onclick=\"selectAddon(this, 'interior', 1000)\">\n <div class=\"variant-details\"><div class=\"title\">Black and White Interior<\/div><div class=\"sub\">Premium decor<\/div><\/div>\n <div class=\"variant-price\">+$1,000<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"config-section-title\">Warranties<\/div>\n <div style=\"margin-bottom: 15px;\">\n <div style=\"font-size: 13px; font-weight: 600;\">Limited Warranty<\/div>\n <p class=\"config-subtext\">Repairs and replacements covered for 4 years or 50,000 miles, whichever comes first.<\/p>\n <\/div>\n <div style=\"margin-bottom: 15px;\">\n <div style=\"font-size: 13px; font-weight: 600;\">Battery and Drive Unit Limited Warranty<\/div>\n <p class=\"config-subtext\">Covered for 8 years or 120,000 miles, whichever comes first.<\/p>\n <\/div>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-dark);\"><\/a>\n\n \n <div class=\"config-section-title\">Charging Infrastructure<\/div>\n <p class=\"config-subtext\">Every Tesla includes access to the largest global Supercharging network. Mobile Charger is included.<\/p>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-dark);\"><\/a>\n\n \n \n <div class=\"config-section-title\">Delivery Location<\/div>\n <input type=\"text\" class=\"zip-input-box\" placeholder=\"Enter Delivery ZIP\">\n<div class=\"checkout-form\">\n<h2>Contact Information<\/h2>\n<div class=\"payment-row\">\n<button class=\"pay-btn\" type=\"button\">Google Pay<\/button>\n<button class=\"pay-btn\" type=\"button\">Card<\/button>\n<\/div>\n<form id=\"checkoutForm\">\n<div class=\"form-grid\">\n<input class=\"full\" type=\"email\" placeholder=\"Email Address\" required>\n<input type=\"text\" placeholder=\"First Name\" required>\n<input type=\"text\" placeholder=\"Last Name\" required>\n<input class=\"full\" type=\"text\" placeholder=\"Street Address\" required>\n<input type=\"text\" placeholder=\"Apt \/ Suite\">\n<input type=\"text\" placeholder=\"City\" required>\n<input type=\"text\" placeholder=\"State\" required>\n<input type=\"text\" placeholder=\"ZIP Code\" required>\n<input class=\"full\" type=\"tel\" placeholder=\"Phone Number\" required>\n<input type=\"text\" placeholder=\"Card Number\" required>\n<input type=\"text\" placeholder=\"Cardholder Name\" required>\n<input type=\"text\" placeholder=\"Card Expiry date\" required>\n<input type=\"text\" placeholder=\"CVC\/CVV\" required>\n<button class=\"submit-btn full\" type=\"submit\">Continue<\/button>\n<\/div>\n\n<div class=\"config-section-title\">Warranties<\/div>\n <div style=\"margin-bottom: 15px;\">\n <div style=\"font-size: 13px; font-weight: 600;\">Limited Warranty<\/div>\n <p class=\"config-subtext\">Repairs and replacements covered for 4 years or 50,000 miles, whichever comes first.<\/p>\n <\/div>\n <div style=\"margin-bottom: 15px;\">\n <div style=\"font-size: 13px; font-weight: 600;\">Battery and Drive Unit Limited Warranty<\/div>\n <p class=\"config-subtext\">Covered for 8 years or 120,000 miles, whichever comes first.<\/p>\n <\/div>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-dark);\"><\/a>\n<\/form>\n<\/div>\n\n\n \n <\/div>\n\n \n <div class=\"summary-sticky-footer\">\n <div class=\"summary-price-box\">\n <div class=\"price-display\" id=\"footerActivePrice\">\n $42,490\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n <\/div>\n <div class=\"price-label\" id=\"footerPaymentTerms\">Vehicle Price<\/div>\n <\/div>\n <button type=\"button\" id=\"orderNowBtn\" class=\"btn-order-now\" style=\"display: inline-block; text-align: center;\">Order Now<\/button>\n <\/div>\n\n \n <div class=\"chat-bubble\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"><\/path><\/svg>\n <\/div>\n\n \n <div class=\"order-modal-overlay\" id=\"orderModal\">\n <div class=\"order-modal-box\">\n <div class=\"icon-check\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2e7d32\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n <\/div>\n <h3>Order Received<\/h3>\n <p>Your Order is on it's way, a support agent will be in touch<\/p>\n <button type=\"button\" onclick=\"closeOrderModal()\">Continue to website<\/button>\n <\/div>\n <\/div>\n\n \n <script>\n \/\/ Database models containing visual data matching Screenshot 2026-06-29 at 09.20.45.jpg & 09.22.02.jpg\n const variantData = {\n cash: {\n label: 'Vehicle Price',\n subtext: 'Up to $5,000 potential savings after delivery available.',\n items: [\n { name: 'Rear-Wheel Drive', details: 'Standard Battery', price: '$36,990', raw: 36990 },\n { name: 'Premium Rear-Wheel Drive', details: 'Long Range Upgrade', price: '$42,490', raw: 42490, active: true },\n { name: 'Premium All-Wheel Drive', details: 'Dual Motor Performance', price: '$47,490', raw: 47490 },\n { name: 'Performance All-Wheel Drive', details: 'Track Pack Edition', price: '$54,990', raw: 54990 }\n ]\n },\n lease: {\n label: 'Est. Lease',\n subtext: '$3,000 down, 36 mo, 10,000 miles <span style=\"text-decoration: underline; cursor:pointer;\">Edit Leasing<\/span>',\n items: [\n { name: 'Rear-Wheel Drive', details: 'Standard Battery', price: '$329 \/mo', raw: 329 },\n { name: 'Premium Rear-Wheel Drive', details: 'Long Range Upgrade', price: '$349 \/mo', raw: 349, active: true },\n { name: 'Premium All-Wheel Drive', details: 'Dual Motor Performance', price: '$449 \/mo', raw: 449 },\n { name: 'Performance All-Wheel Drive', details: 'Track Pack Edition', price: '$599 \/mo', raw: 599 }\n ]\n },\n finance: {\n label: 'Est. Finance',\n subtext: '4.99% APR, 72 months options available',\n items: [\n { name: 'Rear-Wheel Drive', details: 'Standard Battery', price: '$549 \/mo', raw: 549 },\n { name: 'Premium Rear-Wheel Drive', details: 'Long Range Upgrade', price: '$629 \/mo', raw: 629, active: true },\n { name: 'Premium All-Wheel Drive', details: 'Dual Motor Performance', price: '$719 \/mo', raw: 719 },\n { name: 'Performance All-Wheel Drive', details: 'Track Pack Edition', price: '$849 \/mo', raw: 849 }\n ]\n }\n };\n\n let currentMode = 'cash';\n\n \/\/ ADDED: tracks price contribution of each addon group\n let addonTotals = { wheels: 0, interior: 0, fsd: 0 };\n\n function getActiveBaseItem() {\n return variantData[currentMode].items.find(item => item.active);\n }\n\n \/\/ ADDED: recalculates footer price using base vehicle price + all selected addons\n function updateFooterPrice() {\n const activeItem = getActiveBaseItem();\n if (!activeItem) return;\n\n const addonSum = addonTotals.wheels + addonTotals.interior + addonTotals.fsd;\n const total = activeItem.raw + addonSum;\n const suffix = currentMode === 'cash' ? '' : ' \/mo';\n const formatted = '$' + total.toLocaleString('en-US');\n\n document.getElementById('footerActivePrice').innerHTML = `${formatted}${suffix} <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>`;\n document.getElementById('footerPaymentTerms').innerHTML = variantData[currentMode].label;\n document.getElementById('disclaimerLabel').innerHTML = variantData[currentMode].subtext;\n }\n\n \/\/ Render dynamic pricing component block view logic\n function renderVariants() {\n const container = document.getElementById('variantSelectionGroup');\n container.innerHTML = '';\n \n const dynamicDataset = variantData[currentMode];\n \n dynamicDataset.items.forEach((item, index) => {\n const card = document.createElement('div');\n card.className = `variant-card ${item.active ? 'active' : ''}`;\n card.setAttribute('onclick', `selectVariant(${index})`);\n \n card.innerHTML = `\n <div class=\"variant-details\">\n <div class=\"title\">${item.name}<\/div>\n ${item.details ? `<div class=\"sub\">${item.details}<\/div>` : ''}\n <\/div>\n <div class=\"variant-price\">${item.price}<\/div>\n `;\n container.appendChild(card);\n });\n\n \/\/ Recompute footer price (base + addons) after every render\n updateFooterPrice();\n }\n\n \/\/ Action Tab switching core functional handler\n function switchPaymentMode(mode) {\n currentMode = mode;\n \n \/\/ Toggle active styling states on header tabs buttons\n const tabs = document.querySelectorAll('.tab-btn');\n tabs.forEach(tab => {\n if(tab.innerText.toLowerCase() === mode) {\n tab.classList.add('active');\n } else {\n tab.classList.remove('active');\n }\n });\n\n renderVariants();\n }\n\n \/\/ Selection tier mapping operations switcher\n function selectVariant(index) {\n variantData[currentMode].items.forEach((item, idx) => {\n item.active = idx === index;\n });\n renderVariants();\n }\n\n \/\/ Swatch configuration interactions state mapping\n function selectColor(colorName, element) {\n document.getElementById('selectedColorName').innerText = `${colorName} (Included)`;\n const swatches = document.querySelectorAll('.swatch');\n swatches.forEach(swatch => swatch.classList.remove('active'));\n element.classList.add('active');\n }\n\n \/\/ ADDED: generic handler for mutually-exclusive addon groups (Wheels, Interior)\n function selectAddon(element, group, price) {\n const parent = element.parentElement;\n parent.querySelectorAll('.variant-card').forEach(card => card.classList.remove('active'));\n element.classList.add('active');\n addonTotals[group] = price;\n updateFooterPrice();\n }\n\n \/\/ ADDED: toggle handler for Full Self-Driving subscription addon\n function toggleFSD(element) {\n element.classList.toggle('active');\n addonTotals.fsd = element.classList.contains('active') ? 99 : 0;\n updateFooterPrice();\n }\n\n \/\/ ADDED: validates every required field in the checkout form,\n \/\/ flags all invalid ones simultaneously (not just the first)\n function validateCheckoutForm() {\n const form = document.getElementById('checkoutForm');\n const requiredFields = form.querySelectorAll('[required]');\n let allValid = true;\n\n requiredFields.forEach(field => {\n const value = field.value.trim();\n let errorMsg = field.parentElement.querySelector('.field-error-msg + *') ? null : field.nextElementSibling;\n errorMsg = (errorMsg && errorMsg.classList && errorMsg.classList.contains('field-error-msg')) ? errorMsg : null;\n\n if (!value) {\n allValid = false;\n field.classList.add('field-invalid');\n if (!errorMsg) {\n errorMsg = document.createElement('small');\n errorMsg.className = 'field-error-msg';\n errorMsg.textContent = 'This field is required';\n field.insertAdjacentElement('afterend', errorMsg);\n }\n } else {\n field.classList.remove('field-invalid');\n if (errorMsg) errorMsg.remove();\n }\n });\n\n return allValid;\n }\n\n \/\/ ADDED: clears the error state on a field as soon as the user starts typing\n function clearFieldErrorOnInput(e) {\n if (e.target.matches('[required]')) {\n e.target.classList.remove('field-invalid');\n const next = e.target.nextElementSibling;\n if (next && next.classList.contains('field-error-msg')) {\n next.remove();\n }\n }\n }\n\n \/\/ ADDED: order confirmation popup controls\n function openOrderModal() {\n document.getElementById('orderModal').classList.add('open');\n }\n\n function closeOrderModal() {\n document.getElementById('orderModal').classList.remove('open');\n }\n\n \/\/ Initialize state view triggers on layout ready lifecycle\n document.addEventListener(\"DOMContentLoaded\", () => {\n renderVariants();\n\n const checkoutForm = document.getElementById('checkoutForm');\n const orderNowBtn = document.getElementById('orderNowBtn');\n\n \/\/ Clear individual field errors as the user fixes them\n checkoutForm.addEventListener('input', clearFieldErrorOnInput);\n\n \/\/ \"Continue\" button inside the form\n checkoutForm.addEventListener('submit', (e) => {\n e.preventDefault();\n if (validateCheckoutForm()) {\n openOrderModal();\n } else {\n const firstInvalid = checkoutForm.querySelector('.field-invalid');\n if (firstInvalid) firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n });\n\n \/\/ \"Order Now\" button in the sticky footer\n orderNowBtn.addEventListener('click', () => {\n if (validateCheckoutForm()) {\n openOrderModal();\n } else {\n checkoutForm.scrollIntoView({ behavior: 'smooth', block: 'start' });\n const firstInvalid = checkoutForm.querySelector('.field-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n });\n });\n \n document.addEventListener(\"DOMContentLoaded\", () => {\n const video = document.querySelector(\"video\");\n\n video.muted = true;\n video.playsInline = true;\n\n const playPromise = video.play();\n\n if (playPromise !== undefined) {\n playPromise.catch(err => {\n console.log(\"Autoplay prevented:\", err);\n });\n }\n});\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tesla model 3 Model 3 Premium & Performance: 0.99% APR Available US Model 3 363mi Range (EPA est.) 125mph Top Speed 4.9sec 0-60 mph Cash Lease Finance View & Compare Features Get Trade-In Value Up to $5,000 potential savings after delivery available. Full Self-Driving (Supervised) Your vehicle will be able to drive itself almost anywhere […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-47","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/pages\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":9,"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/pages\/47\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/pages\/47\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/media?parent=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Tesla model 3<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root {\n --primary-color: #393c41;\n --accent-blue: #3d69e1;\n --text-dark: #171a20;\n --text-muted: #5c5e62;\n --border-light: #e2e4e4;\n --bg-light: #f4f4f4;\n --font-stack: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: var(--font-stack);\n color: var(--text-dark);\n background-color: #ffffff;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n }\n\n \/* Top Notification Bar *\/\n .promo-banner {\n background-color: #f2e3c6;\n color: var(--text-dark);\n text-align: center;\n padding: 10px 20px;\n font-size: 13px;\n font-weight: 500;\n }\n .promo-banner a {\n color: var(--text-dark);\n margin-left: 5px;\n }\n\n \/* Header Navigation *\/\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 40px;\n position: absolute;\n width: 100%;\n top: 40px;\n z-index: 10;\n }\n\n .logo svg {\n width: 120px;\n height: auto;\n fill: var(--text-dark);\n }\n\n .header-right {\n display: flex;\n align-items: center;\n gap: 15px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n }\n\n \/* Main Hero Configurator Section *\/\n .configurator-container {\n display: flex;\n min-height: 100vh;\n padding-top: 100px;\n }\n\n \/* Left Side: Visualizer Sticky Panel *\/\n .visualizer-pane {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n background-color: #ffffff;\n padding: 40px;\n }\n\n .visualizer-pane .car-image {\n width: 100%;\n max-width: 780px;\n height: auto;\n object-fit: contain;\n transition: transform 0.4s ease;\n }\n\n \/* Interactive Chevron Overlays *\/\n .nav-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.8);\n border: 1px solid var(--border-light);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n transition: background 0.2s;\n }\n .nav-arrow:hover { background: #ffffff; }\n .nav-arrow.left { left: 40px; }\n .nav-arrow.right { right: 40px; }\n\n \/* Right Side: Options Customizer Menu Scrollable *\/\n .control-pane {\n width: 450px;\n padding: 40px;\n overflow-y: auto;\n height: calc(100vh - 40px);\n position: sticky;\n top: 40px;\n border-left: 1px solid rgba(0,0,0,0.03);\n }\n\n \/* Custom Scrollbar for sleek panel feel *\/\n .control-pane::-webkit-scrollbar { width: 6px; }\n .control-pane::-webkit-scrollbar-track { background: transparent; }\n .control-pane::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }\n\n .model-title {\n font-size: 40px;\n font-weight: 500;\n text-align: center;\n margin-bottom: 25px;\n letter-spacing: -0.5px;\n }\n\n \/* Performance Specs Matrix *\/\n .specs-grid {\n display: flex;\n justify-content: space-around;\n text-align: center;\n margin-bottom: 35px;\n }\n\n .spec-item .value {\n font-size: 24px;\n font-weight: 500;\n }\n .spec-item .value span {\n font-size: 14px;\n font-weight: 400;\n }\n .spec-item .label {\n font-size: 12px;\n color: var(--text-muted);\n margin-top: 4px;\n }\n\n \/* Pricing Engine Toggle (Cash vs Lease vs Finance Tab Layout) *\/\n .payment-toggle-tabs {\n display: flex;\n border-bottom: 2px solid var(--border-light);\n margin-bottom: 20px;\n }\n\n .tab-btn {\n flex: 1;\n background: none;\n border: none;\n padding: 12px 0;\n font-family: var(--font-stack);\n font-size: 14px;\n font-weight: 500;\n color: var(--text-muted);\n cursor: pointer;\n transition: all 0.2s;\n text-align: center;\n }\n \n .tab-btn.active {\n color: var(--text-dark);\n border-bottom: 2px solid var(--text-dark);\n margin-bottom: -2px;\n }\n\n \/* Dynamic Variant Option Selectors *\/\n .variant-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 20px;\n }\n\n .variant-card {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 18px 24px;\n border: 1px solid var(--border-light);\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.2s;\n background: #ffffff;\n }\n\n .variant-card:hover {\n border-color: #8e8e8e;\n }\n\n .variant-card.active {\n border: 2px solid var(--text-dark);\n padding: 17px 23px; \/* account for double border stroke shift *\/\n background-color: rgba(0, 0, 0, 0.01);\n }\n\n .variant-details .title {\n font-size: 14px;\n font-weight: 600;\n }\n .variant-details .sub {\n font-size: 13px;\n color: var(--text-muted);\n font-weight: 400;\n margin-top: 2px;\n }\n\n .variant-price {\n font-size: 15px;\n font-weight: 500;\n }\n\n \/* Generic Section Headers for Options Config *\/\n .config-section-title {\n font-size: 18px;\n font-weight: 500;\n margin: 35px 0 15px 0;\n }\n\n .config-subtext {\n font-size: 12px;\n color: var(--text-muted);\n line-height: 1.6;\n margin-bottom: 15px;\n }\n\n \/* Circular Swatch Item Builders *\/\n .swatch-container {\n display: flex;\n gap: 15px;\n margin: 15px 0;\n }\n\n .swatch {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid transparent;\n padding: 2px;\n background-clip: content-box;\n transition: transform 0.2s;\n }\n .swatch:hover { transform: scale(1.05); }\n .swatch.active { border-color: var(--accent-blue); }\n\n \/* Detail Disclosure Links *\/\n .action-link {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 16px;\n background: var(--bg-light);\n border-radius: 4px;\n font-size: 14px;\n font-weight: 500;\n text-decoration: none;\n color: var(--text-dark);\n margin: 15px 0;\n }\n\n .btn-secondary {\n display: inline-block;\n background: var(--bg-light);\n border: none;\n padding: 10px 20px;\n font-size: 13px;\n font-weight: 500;\n border-radius: 4px;\n cursor: pointer;\n margin-top: 10px;\n }\n\n \/* Bottom Floating Checkout\/Pricing Summary Action Bar *\/\n .summary-sticky-footer {\n position: fixed;\n bottom: 0;\n right: 0;\n width: 450px;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(8px);\n border-top: 1px solid var(--border-light);\n padding: 20px 40px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 100;\n }\n\n .summary-price-box .price-display {\n font-size: 24px;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n }\n\n .summary-price-box .price-label {\n font-size: 12px;\n color: var(--text-muted);\n margin-top: 2px;\n }\n\n .btn-order-now {\n background-color: var(--accent-blue);\n color: white;\n border: none;\n padding: 12px 40px;\n font-size: 14px;\n font-weight: 500;\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.2s;\n }\n .btn-order-now:hover { background-color: #2a52be; }\n\n \/* Inline Help Utilities *\/\n .zip-input-box {\n border: 1px solid var(--border-light);\n padding: 12px;\n border-radius: 4px;\n width: 100%;\n font-size: 14px;\n margin-top: 10px;\n outline: none;\n }\n\n \/* Floating Bottom Left UI Chat Widget Mock *\/\n .chat-bubble {\n position: fixed;\n bottom: 25px;\n left: 25px;\n width: 44px;\n height: 44px;\n background-color: #171a20;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 99;\n }\n\n \/* Responsive Breakpoints Rules *\/\n @media (max-width: 1024px) {\n .configurator-container {\n flex-direction: column;\n padding-top: 80px;\n }\n header {\n position: relative;\n top: 0;\n padding: 15px 20px;\n }\n .control-pane {\n width: 100%;\n height: auto;\n position: relative;\n top: 0;\n border-left: none;\n padding: 20px;\n padding-bottom: 120px; \/* offset for bottom layout frame *\/\n }\n .summary-sticky-footer {\n width: 100%;\n padding: 15px 20px;\n }\n .nav-arrow { display: none; }\n }\n <\/style>\n\n<style id=\"checkout-extra\">\n.checkout-form{margin-top:32px;padding-top:32px;border-top:1px solid #e5e5e5}\n.checkout-form h2{font-size:28px;margin-bottom:20px}\n.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}\n.checkout-form input,.checkout-form select{width:100%;height:52px;padding:0 14px;border:1px solid #d9d9d9;border-radius:4px;background:#f7f7f7;margin-bottom:14px}\n.checkout-form input:focus,.checkout-form select:focus{outline:none;border-color:#3d69e1;background:#fff}\n.full{grid-column:1\/-1}\n.payment-row{display:flex;gap:12px;margin-bottom:18px}\n.pay-btn{flex:1;height:52px;border:1px solid #d9d9d9;background:#fff;border-radius:4px;font-weight:600}\n.submit-btn{width:100%;height:54px;background:#3d69e1;color:#fff;border:none;border-radius:4px;font-size:16px}\n.vehicle-video{max-width:760px;margin:40px auto 0}\n.vehicle-video video{width:100%;border-radius:12px}\n<\/style>\n\n\n<style id=\"order-flow-extra\">\n.field-invalid {\n border-color: #d32f2f !important;\n background-color: #fff5f5 !important;\n}\n.field-error-msg {\n grid-column: 1 \/ -1;\n color: #d32f2f;\n font-size: 12px;\n margin-top: -8px;\n margin-bottom: 10px;\n display: block;\n}\n.order-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.55);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n}\n.order-modal-overlay.open { display: flex; }\n.order-modal-box {\n background: #fff;\n border-radius: 8px;\n max-width: 380px;\n width: 100%;\n padding: 36px 28px;\n text-align: center;\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n font-family: var(--font-stack);\n}\n.order-modal-box .icon-check {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: #e8f3e8;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 18px;\n}\n.order-modal-box h3 {\n font-size: 20px;\n font-weight: 600;\n margin-bottom: 10px;\n color: var(--text-dark);\n}\n.order-modal-box p {\n font-size: 14px;\n color: var(--text-muted);\n margin-bottom: 22px;\n line-height: 1.6;\n}\n.order-modal-box button {\n width: 100%;\n height: 48px;\n background: var(--accent-blue);\n color: #fff;\n border: none;\n border-radius: 4px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n}\n.order-modal-box button:hover { background-color: #2a52be; }\n<\/style>\n\n<\/head>\n<body>\n\n \n <div class=\"promo-banner\">\n Model 3 Premium & Performance: 0.99% APR Available <a href=\"#\"><\/a>\n <\/div>\n\n \n <header>\n \n <div class=\"header-right\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"><\/line><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"><\/path><\/svg>\n <span>US<\/span>\n <\/div>\n <\/header>\n\n \n <div class=\"configurator-container\">\n \n \n <section class=\"visualizer-pane\">\n <div class=\"nav-arrow left\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n <\/div>\n \n \n <img decoding=\"async\" class=\"car-image\" id=\"vehiclePreview\" src=\"https:\/\/images.unsplash.com\/photo-1617788138017-80ad40651399?auto=format&fit=crop&w=1200&q=80\" alt=\"Automobile Vehicle Configuration Screen Frame\">\n \n \n<div class=\"vehicle-video\">\n<video autoplay muted loop playsinline controls>\n<source src=\"https:\/\/digitalassets.tesla.com\/tesla-contents\/video\/upload\/f_auto,q_auto\/Homepage-FSD-Card-Mobile.mp4\" type=\"video\/mp4\">\n<\/video>\n<\/div>\n\n<div class=\"nav-arrow right\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n <\/div>\n <\/section>\n\n \n <aside class=\"control-pane\">\n <h1 class=\"model-title\">Model 3<\/h1>\n\n \n <div class=\"specs-grid\">\n <div class=\"spec-item\">\n <div class=\"value\">363<span>mi<\/span><\/div>\n <div class=\"label\">Range (EPA est.)<\/div>\n <\/div>\n <div class=\"spec-item\">\n <div class=\"value\">125<span>mph<\/span><\/div>\n <div class=\"label\">Top Speed<\/div>\n <\/div>\n <div class=\"spec-item\">\n <div class=\"value\">4.9<span>sec<\/span><\/div>\n <div class=\"label\">0-60 mph<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"payment-toggle-tabs\">\n <button class=\"tab-btn active\" onclick=\"switchPaymentMode('cash')\">Cash<\/button>\n <button class=\"tab-btn\" onclick=\"switchPaymentMode('lease')\">Lease<\/button>\n <button class=\"tab-btn\" onclick=\"switchPaymentMode('finance')\">Finance<\/button>\n <\/div>\n\n \n <div class=\"variant-list\" id=\"variantSelectionGroup\">\n \n <\/div>\n\n <a href=\"#\" class=\"action-link\">\n <span>View & Compare Features<\/span>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n <\/a>\n\n <button class=\"btn-secondary\">Get Trade-In Value<\/button>\n <p class=\"config-subtext\" style=\"margin-top: 15px;\" id=\"disclaimerLabel\">Up to $5,000 potential savings after delivery available.<\/p>\n\n <hr style=\"border: 0; border-top: 1px solid var(--border-light); margin: 30px 0;\">\n\n \n <div class=\"config-section-title\">Full Self-Driving (Supervised)<\/div>\n <p class=\"config-subtext\">Your vehicle will be able to drive itself almost anywhere with minimal driver intervention<\/p>\n <p class=\"config-subtext\" style=\"font-weight: 500; color: var(--text-dark);\">1 mo free trial included.<\/p>\n \n <div class=\"variant-card\" id=\"fsdCard\" style=\"margin-bottom: 12px;\" onclick=\"toggleFSD(this)\">\n <div class=\"variant-details\">\n <div class=\"title\">Monthly Subscription<\/div>\n <\/div>\n <div class=\"variant-price\">$99 \/mo<\/div>\n <\/div>\n \n <p class=\"config-subtext\" style=\"font-size: 11px;\">Currently enabled features require active driver supervision and do not make the vehicle autonomous. The activation and use of these features are dependent on development and regulatory approval, which may take longer in some jurisdictions.<\/p>\n\n \n <div class=\"config-section-title\">Paint Color<\/div>\n <p class=\"config-subtext\" id=\"selectedColorName\">Stealth Grey (Included)<\/p>\n <div class=\"swatch-container\">\n <div class=\"swatch active\" style=\"background-color: #43464b;\" onclick=\"selectColor('Stealth Grey', this)\"><\/div>\n <div class=\"swatch\" style=\"background-color: #f0f1f2;\" onclick=\"selectColor('Pearl White Multi-Coat', this)\"><\/div>\n <div class=\"swatch\" style=\"background-color: #1f355e;\" onclick=\"selectColor('Marine Blue', this)\"><\/div>\n <div class=\"swatch\" style=\"background-color: #111214;\" onclick=\"selectColor('Diamond Black', this)\"><\/div>\n <div class=\"swatch\" style=\"background-color: #a51d24;\" onclick=\"selectColor('Ultra Red', this)\"><\/div>\n <div class=\"swatch\" style=\"background-color: #9fa1a6;\" onclick=\"selectColor('Quicksilver', this)\"><\/div>\n <\/div>\n\n \n <div class=\"config-section-title\">Wheels<\/div>\n <p class=\"config-subtext\">18\u2019\u2019 Photon Wheels (Included)<\/p>\n <div class=\"variant-list\">\n <div class=\"variant-card active\" onclick=\"selectAddon(this, 'wheels', 0)\">\n <div class=\"variant-details\"><div class=\"title\">18\u2019\u2019 Photon Wheels<\/div><div class=\"sub\">All-Season Tires<\/div><\/div>\n <div class=\"variant-price\">Included<\/div>\n <\/div>\n <div class=\"variant-card\" onclick=\"selectAddon(this, 'wheels', 1500)\">\n <div class=\"variant-details\"><div class=\"title\">19\u2019\u2019 Nova Wheels<\/div><div class=\"sub\">All-Season Tires<\/div><\/div>\n <div class=\"variant-price\">+$1,500<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"config-section-title\">Interior Layout<\/div>\n <p class=\"config-subtext\">Black Interior (Included)<\/p>\n <div class=\"variant-list\">\n <div class=\"variant-card active\" onclick=\"selectAddon(this, 'interior', 0)\">\n <div class=\"variant-details\"><div class=\"title\">Black Interior<\/div><div class=\"sub\">Textile decor<\/div><\/div>\n <div class=\"variant-price\">Included<\/div>\n <\/div>\n <div class=\"variant-card\" onclick=\"selectAddon(this, 'interior', 1000)\">\n <div class=\"variant-details\"><div class=\"title\">Black and White Interior<\/div><div class=\"sub\">Premium decor<\/div><\/div>\n <div class=\"variant-price\">+$1,000<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"config-section-title\">Warranties<\/div>\n <div style=\"margin-bottom: 15px;\">\n <div style=\"font-size: 13px; font-weight: 600;\">Limited Warranty<\/div>\n <p class=\"config-subtext\">Repairs and replacements covered for 4 years or 50,000 miles, whichever comes first.<\/p>\n <\/div>\n <div style=\"margin-bottom: 15px;\">\n <div style=\"font-size: 13px; font-weight: 600;\">Battery and Drive Unit Limited Warranty<\/div>\n <p class=\"config-subtext\">Covered for 8 years or 120,000 miles, whichever comes first.<\/p>\n <\/div>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-dark);\"><\/a>\n\n \n <div class=\"config-section-title\">Charging Infrastructure<\/div>\n <p class=\"config-subtext\">Every Tesla includes access to the largest global Supercharging network. Mobile Charger is included.<\/p>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-dark);\"><\/a>\n\n \n \n <div class=\"config-section-title\">Delivery Location<\/div>\n <input type=\"text\" class=\"zip-input-box\" placeholder=\"Enter Delivery ZIP\">\n<div class=\"checkout-form\">\n<h2>Contact Information<\/h2>\n<div class=\"payment-row\">\n<button class=\"pay-btn\" type=\"button\">Google Pay<\/button>\n<button class=\"pay-btn\" type=\"button\">Card<\/button>\n<\/div>\n<form id=\"checkoutForm\">\n<div class=\"form-grid\">\n<input class=\"full\" type=\"email\" placeholder=\"Email Address\" required>\n<input type=\"text\" placeholder=\"First Name\" required>\n<input type=\"text\" placeholder=\"Last Name\" required>\n<input class=\"full\" type=\"text\" placeholder=\"Street Address\" required>\n<input type=\"text\" placeholder=\"Apt \/ Suite\">\n<input type=\"text\" placeholder=\"City\" required>\n<input type=\"text\" placeholder=\"State\" required>\n<input type=\"text\" placeholder=\"ZIP Code\" required>\n<input class=\"full\" type=\"tel\" placeholder=\"Phone Number\" required>\n<input type=\"text\" placeholder=\"Card Number\" required>\n<input type=\"text\" placeholder=\"Cardholder Name\" required>\n<input type=\"text\" placeholder=\"Card Expiry date\" required>\n<input type=\"text\" placeholder=\"CVC\/CVV\" required>\n<button class=\"submit-btn full\" type=\"submit\">Continue<\/button>\n<\/div>\n\n<div class=\"config-section-title\">Warranties<\/div>\n <div style=\"margin-bottom: 15px;\">\n <div style=\"font-size: 13px; font-weight: 600;\">Limited Warranty<\/div>\n <p class=\"config-subtext\">Repairs and replacements covered for 4 years or 50,000 miles, whichever comes first.<\/p>\n <\/div>\n <div style=\"margin-bottom: 15px;\">\n <div style=\"font-size: 13px; font-weight: 600;\">Battery and Drive Unit Limited Warranty<\/div>\n <p class=\"config-subtext\">Covered for 8 years or 120,000 miles, whichever comes first.<\/p>\n <\/div>\n <a href=\"#\" style=\"font-size: 13px; color: var(--text-dark);\"><\/a>\n<\/form>\n<\/div>\n\n\n \n <\/div>\n\n \n <div class=\"summary-sticky-footer\">\n <div class=\"summary-price-box\">\n <div class=\"price-display\" id=\"footerActivePrice\">\n $42,490\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n <\/div>\n <div class=\"price-label\" id=\"footerPaymentTerms\">Vehicle Price<\/div>\n <\/div>\n <button type=\"button\" id=\"orderNowBtn\" class=\"btn-order-now\" style=\"display: inline-block; text-align: center;\">Order Now<\/button>\n <\/div>\n\n \n <div class=\"chat-bubble\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"><\/path><\/svg>\n <\/div>\n\n \n <div class=\"order-modal-overlay\" id=\"orderModal\">\n <div class=\"order-modal-box\">\n <div class=\"icon-check\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2e7d32\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n <\/div>\n <h3>Order Received<\/h3>\n <p>Your Order is on it's way, a support agent will be in touch<\/p>\n <button type=\"button\" onclick=\"closeOrderModal()\">Continue to website<\/button>\n <\/div>\n <\/div>\n\n \n <script>\n \/\/ Database models containing visual data matching Screenshot 2026-06-29 at 09.20.45.jpg & 09.22.02.jpg\n const variantData = {\n cash: {\n label: 'Vehicle Price',\n subtext: 'Up to $5,000 potential savings after delivery available.',\n items: [\n { name: 'Rear-Wheel Drive', details: 'Standard Battery', price: '$36,990', raw: 36990 },\n { name: 'Premium Rear-Wheel Drive', details: 'Long Range Upgrade', price: '$42,490', raw: 42490, active: true },\n { name: 'Premium All-Wheel Drive', details: 'Dual Motor Performance', price: '$47,490', raw: 47490 },\n { name: 'Performance All-Wheel Drive', details: 'Track Pack Edition', price: '$54,990', raw: 54990 }\n ]\n },\n lease: {\n label: 'Est. Lease',\n subtext: '$3,000 down, 36 mo, 10,000 miles <span style=\"text-decoration: underline; cursor:pointer;\">Edit Leasing<\/span>',\n items: [\n { name: 'Rear-Wheel Drive', details: 'Standard Battery', price: '$329 \/mo', raw: 329 },\n { name: 'Premium Rear-Wheel Drive', details: 'Long Range Upgrade', price: '$349 \/mo', raw: 349, active: true },\n { name: 'Premium All-Wheel Drive', details: 'Dual Motor Performance', price: '$449 \/mo', raw: 449 },\n { name: 'Performance All-Wheel Drive', details: 'Track Pack Edition', price: '$599 \/mo', raw: 599 }\n ]\n },\n finance: {\n label: 'Est. Finance',\n subtext: '4.99% APR, 72 months options available',\n items: [\n { name: 'Rear-Wheel Drive', details: 'Standard Battery', price: '$549 \/mo', raw: 549 },\n { name: 'Premium Rear-Wheel Drive', details: 'Long Range Upgrade', price: '$629 \/mo', raw: 629, active: true },\n { name: 'Premium All-Wheel Drive', details: 'Dual Motor Performance', price: '$719 \/mo', raw: 719 },\n { name: 'Performance All-Wheel Drive', details: 'Track Pack Edition', price: '$849 \/mo', raw: 849 }\n ]\n }\n };\n\n let currentMode = 'cash';\n\n \/\/ ADDED: tracks price contribution of each addon group\n let addonTotals = { wheels: 0, interior: 0, fsd: 0 };\n\n function getActiveBaseItem() {\n return variantData[currentMode].items.find(item => item.active);\n }\n\n \/\/ ADDED: recalculates footer price using base vehicle price + all selected addons\n function updateFooterPrice() {\n const activeItem = getActiveBaseItem();\n if (!activeItem) return;\n\n const addonSum = addonTotals.wheels + addonTotals.interior + addonTotals.fsd;\n const total = activeItem.raw + addonSum;\n const suffix = currentMode === 'cash' ? '' : ' \/mo';\n const formatted = '$' + total.toLocaleString('en-US');\n\n document.getElementById('footerActivePrice').innerHTML = `${formatted}${suffix} <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>`;\n document.getElementById('footerPaymentTerms').innerHTML = variantData[currentMode].label;\n document.getElementById('disclaimerLabel').innerHTML = variantData[currentMode].subtext;\n }\n\n \/\/ Render dynamic pricing component block view logic\n function renderVariants() {\n const container = document.getElementById('variantSelectionGroup');\n container.innerHTML = '';\n \n const dynamicDataset = variantData[currentMode];\n \n dynamicDataset.items.forEach((item, index) => {\n const card = document.createElement('div');\n card.className = `variant-card ${item.active ? 'active' : ''}`;\n card.setAttribute('onclick', `selectVariant(${index})`);\n \n card.innerHTML = `\n <div class=\"variant-details\">\n <div class=\"title\">${item.name}<\/div>\n ${item.details ? `<div class=\"sub\">${item.details}<\/div>` : ''}\n <\/div>\n <div class=\"variant-price\">${item.price}<\/div>\n `;\n container.appendChild(card);\n });\n\n \/\/ Recompute footer price (base + addons) after every render\n updateFooterPrice();\n }\n\n \/\/ Action Tab switching core functional handler\n function switchPaymentMode(mode) {\n currentMode = mode;\n \n \/\/ Toggle active styling states on header tabs buttons\n const tabs = document.querySelectorAll('.tab-btn');\n tabs.forEach(tab => {\n if(tab.innerText.toLowerCase() === mode) {\n tab.classList.add('active');\n } else {\n tab.classList.remove('active');\n }\n });\n\n renderVariants();\n }\n\n \/\/ Selection tier mapping operations switcher\n function selectVariant(index) {\n variantData[currentMode].items.forEach((item, idx) => {\n item.active = idx === index;\n });\n renderVariants();\n }\n\n \/\/ Swatch configuration interactions state mapping\n function selectColor(colorName, element) {\n document.getElementById('selectedColorName').innerText = `${colorName} (Included)`;\n const swatches = document.querySelectorAll('.swatch');\n swatches.forEach(swatch => swatch.classList.remove('active'));\n element.classList.add('active');\n }\n\n \/\/ ADDED: generic handler for mutually-exclusive addon groups (Wheels, Interior)\n function selectAddon(element, group, price) {\n const parent = element.parentElement;\n parent.querySelectorAll('.variant-card').forEach(card => card.classList.remove('active'));\n element.classList.add('active');\n addonTotals[group] = price;\n updateFooterPrice();\n }\n\n \/\/ ADDED: toggle handler for Full Self-Driving subscription addon\n function toggleFSD(element) {\n element.classList.toggle('active');\n addonTotals.fsd = element.classList.contains('active') ? 99 : 0;\n updateFooterPrice();\n }\n\n \/\/ ADDED: validates every required field in the checkout form,\n \/\/ flags all invalid ones simultaneously (not just the first)\n function validateCheckoutForm() {\n const form = document.getElementById('checkoutForm');\n const requiredFields = form.querySelectorAll('[required]');\n let allValid = true;\n\n requiredFields.forEach(field => {\n const value = field.value.trim();\n let errorMsg = field.parentElement.querySelector('.field-error-msg + *') ? null : field.nextElementSibling;\n errorMsg = (errorMsg && errorMsg.classList && errorMsg.classList.contains('field-error-msg')) ? errorMsg : null;\n\n if (!value) {\n allValid = false;\n field.classList.add('field-invalid');\n if (!errorMsg) {\n errorMsg = document.createElement('small');\n errorMsg.className = 'field-error-msg';\n errorMsg.textContent = 'This field is required';\n field.insertAdjacentElement('afterend', errorMsg);\n }\n } else {\n field.classList.remove('field-invalid');\n if (errorMsg) errorMsg.remove();\n }\n });\n\n return allValid;\n }\n\n \/\/ ADDED: clears the error state on a field as soon as the user starts typing\n function clearFieldErrorOnInput(e) {\n if (e.target.matches('[required]')) {\n e.target.classList.remove('field-invalid');\n const next = e.target.nextElementSibling;\n if (next && next.classList.contains('field-error-msg')) {\n next.remove();\n }\n }\n }\n\n \/\/ ADDED: order confirmation popup controls\n function openOrderModal() {\n document.getElementById('orderModal').classList.add('open');\n }\n\n function closeOrderModal() {\n document.getElementById('orderModal').classList.remove('open');\n }\n\n \/\/ Initialize state view triggers on layout ready lifecycle\n document.addEventListener(\"DOMContentLoaded\", () => {\n renderVariants();\n\n const checkoutForm = document.getElementById('checkoutForm');\n const orderNowBtn = document.getElementById('orderNowBtn');\n\n \/\/ Clear individual field errors as the user fixes them\n checkoutForm.addEventListener('input', clearFieldErrorOnInput);\n\n \/\/ \"Continue\" button inside the form\n checkoutForm.addEventListener('submit', (e) => {\n e.preventDefault();\n if (validateCheckoutForm()) {\n openOrderModal();\n } else {\n const firstInvalid = checkoutForm.querySelector('.field-invalid');\n if (firstInvalid) firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n });\n\n \/\/ \"Order Now\" button in the sticky footer\n orderNowBtn.addEventListener('click', () => {\n if (validateCheckoutForm()) {\n openOrderModal();\n } else {\n checkoutForm.scrollIntoView({ behavior: 'smooth', block: 'start' });\n const firstInvalid = checkoutForm.querySelector('.field-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n });\n });\n \n document.addEventListener(\"DOMContentLoaded\", () => {\n const video = document.querySelector(\"video\");\n\n video.muted = true;\n video.playsInline = true;\n\n const playPromise = video.play();\n\n if (playPromise !== undefined) {\n playPromise.catch(err => {\n console.log(\"Autoplay prevented:\", err);\n });\n }\n});\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tesla model 3 Model 3 Premium & Performance: 0.99% APR Available US Model 3 363mi Range (EPA est.) 125mph Top Speed 4.9sec 0-60 mph Cash Lease Finance View & Compare Features Get Trade-In Value Up to $5,000 potential savings after delivery available. Full Self-Driving (Supervised) Your vehicle will be able to drive itself almost anywhere […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-47","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/pages\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":9,"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/pages\/47\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/pages\/47\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/tesla.vantagemarketts.com\/ev\/wp-json\/wp\/v2\/media?parent=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}