justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
new-site/site/public/order/trucking-new-carrier/index.html
justin f481a1d13c analytics: filter email-scanner / headless traffic out of Umami stats 
Email security gateways (Microsoft Defender Safe Links / ATP, Proofpoint,
Mimecast, Barracuda, etc.) auto-fetch and often render every link in a
campaign email to scan for malware. The advanced ones drive a real headless
browser, execute JS, and fire Umami pageviews/clicks that masquerade as human
visits -- inflating campaign click-through.

New site/public/js/pw-bot-filter.js queries multiple real-browser signals and
gates Umami via its official data-before-send hook (umamiBeforeSend), dropping
all events when the visitor is a bot. Signals (from empirical chromium probing):
  decisive: navigator.webdriver, HeadlessChrome UA, known scanner UAs, zero/
            collapsed screen|viewport|outer geometry, window LARGER than the
            physical screen (impossible on real HW; uses outerW/H so page zoom
            does not false-positive), software GPU rasterizer (SwiftShader/
            llvmpipe/swrast via WebGL UNMASKED_RENDERER), zero logical CPUs.
  soft (>=2 to trip): tiny screen, inner>screen, low color depth, empty
            navigator.languages, no input device (no fine/coarse pointer + no
            hover + 0 touch), no WebGL on a desktop UA.
Designed to FAIL OPEN: only strong/corroborated evidence suppresses, so real
visitors (incl. zoomed, privacy-tooled, remote-desktop, kiosk) still count.

Wired before the Umami tag in Base.astro (Astro pages) and all 86 static
public/**/*.html pages; both load with defer so order is guaranteed and the
hook is defined before Umami reads it.

Tested end-to-end with chromium (site/tests/bot-filter.test.sh, 4/4):
default headless-new, spoofed-Windows-UA + normal 1366x768 window, and
spoofed-UA + 1x1 window are all caught; hook returns null to drop the event.
2026-06-18 02:02:34 -05:00

1340 lines
103 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Start your trucking business the right way. LLC formation, USDOT number, MC authority, BOC-3, drug & alcohol program - everything you need to legally operate.">
<title>Start Your Trucking Business - New Carrier Package | Performance West Inc.</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<script>
window.__PW_API = (function() {
var h = window.location.hostname;
if (h === "localhost" || h === "127.0.0.1") return "http://" + h + ":3001";
if (h === "dev.performancewest.net") return "https://api.dev.performancewest.net";
return "https://api.performancewest.net";
})();
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script defer src="/js/pw-bot-filter.js"></script><script defer src="https://analytics.performancewest.net/script.js" data-website-id="55250014-ee15-44ac-a1f6-81dabad3fe0f" data-before-send="umamiBeforeSend"></script>
<link rel="stylesheet" href="/_astro/about.DhmoKVOS.css">
<script type="module" src="/_astro/hoisted.yFz1BYXO.js"></script>
<style>
* { box-sizing: border-box; }
.wiz-step { display: none; }
.wiz-step.active { display: block; }
/* Button selector styles */
.btn-opt {
display: inline-flex; align-items: center; justify-content: center;
padding: 14px 20px; border: 2px solid #e2e8f0; border-radius: 10px;
background: #fff; color: #334155; font-size: 14px; font-weight: 600;
cursor: pointer; transition: all 0.15s; text-align: center;
min-height: 52px; user-select: none;
}
.btn-opt:hover { border-color: #f97316; background: #fff7ed; }
.btn-opt.selected { border-color: #f97316; background: #fff7ed; color: #ea580c; box-shadow: 0 0 0 1px #f97316; }
/* Checkbox option (multi-select) */
.chk-opt {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 10px;
background: #fff; color: #334155; font-size: 14px; font-weight: 500;
cursor: pointer; transition: all 0.15s; user-select: none;
min-height: 48px;
}
.chk-opt:hover { border-color: #f97316; background: #fff7ed; }
.chk-opt.selected { border-color: #f97316; background: #fff7ed; color: #ea580c; }
.chk-opt input[type="checkbox"] { width: 18px; height: 18px; accent-color: #f97316; cursor: pointer; }
/* Service row in step 2 */
.svc-row {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 10px;
background: #fff; margin-bottom: 8px; transition: all 0.15s;
}
.svc-row.included { border-color: #86efac; background: #f0fdf4; }
.svc-row.optional { border-color: #e2e8f0; cursor: pointer; }
.svc-row.optional:hover { border-color: #f97316; background: #fff7ed; }
.svc-row.optional.selected { border-color: #f97316; background: #fff7ed; }
/* Progress bar */
.prog-bar { display: flex; align-items: center; gap: 0; max-width: 600px; margin: 0 auto; }
.prog-dot {
width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0;
border: 2px solid #e2e8f0; background: #fff; color: #94a3b8; transition: all 0.2s;
}
.prog-dot.active { border-color: #f97316; background: #f97316; color: #fff; }
.prog-dot.done { border-color: #16a34a; background: #16a34a; color: #fff; }
.prog-line { flex: 1; height: 3px; background: #e2e8f0; transition: background 0.2s; }
.prog-line.done { background: #16a34a; }
.prog-label { font-size: 10px; color: #94a3b8; text-align: center; margin-top: 4px; font-weight: 600; }
.prog-label.active { color: #f97316; }
.prog-label.done { color: #16a34a; }
/* Question block */
.q-block { margin-bottom: 28px; }
.q-label { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0 0 12px; }
.q-grid { display: flex; flex-wrap: wrap; gap: 8px; }
/* State multi-select */
.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.state-chip {
padding: 8px 4px; border: 2px solid #e2e8f0; border-radius: 8px; background: #fff;
font-size: 12px; font-weight: 600; color: #64748b; text-align: center;
cursor: pointer; transition: all 0.15s; user-select: none;
}
.state-chip:hover { border-color: #f97316; }
.state-chip.selected { border-color: #f97316; background: #fff7ed; color: #ea580c; }
.state-chip.base { border-color: #16a34a; background: #f0fdf4; color: #15803d; pointer-events: none; }
/* Name check */
.name-result { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-top: 8px; display: none; }
.name-result.available { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; display: block; }
.name-result.taken { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; display: block; }
.name-result.checking { background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b; display: block; }
/* Nav buttons */
.wiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; gap: 12px; }
.wiz-btn {
padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 700;
border: none; cursor: pointer; transition: all 0.15s; display: inline-flex;
align-items: center; gap: 8px;
}
.wiz-btn.primary { background: #f97316; color: #fff; box-shadow: 0 4px 14px rgba(249,115,22,0.3); }
.wiz-btn.primary:hover { background: #ea580c; }
.wiz-btn.primary:disabled { background: #d4d4d4; color: #9ca3af; box-shadow: none; cursor: not-allowed; }
.wiz-btn.secondary { background: #f1f5f9; color: #475569; }
.wiz-btn.secondary:hover { background: #e2e8f0; }
/* Entity option cards */
.entity-opt {
display: block; padding: 20px; border: 2px solid #e2e8f0; border-radius: 12px;
background: #fff; cursor: pointer; transition: all 0.15s; margin-bottom: 10px;
}
.entity-opt:hover { border-color: #f97316; }
.entity-opt.selected { border-color: #f97316; background: #fff7ed; }
/* Responsive */
@media (max-width: 640px) {
.q-grid { flex-direction: column; }
.btn-opt { width: 100%; }
.state-grid { grid-template-columns: repeat(4, 1fr); }
.wiz-btn { padding: 12px 20px; font-size: 14px; }
}
</style>
</head>
<body class="min-h-screen flex flex-col bg-gray-50">
<!-- Navigation --> <nav class="border-b border-gray-200 bg-white sticky top-0 z-50"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-24 items-center"> <a href="/" class="flex items-center"> <img src="/images/logo.png" alt="Performance West" class="h-20 w-auto" width="83" height="70"> </a> <div class="hidden md:flex items-center gap-8"> <!-- Services dropdown --> <div class="relative" id="services-dropdown"> <button type="button" class="text-sm text-gray-600 hover:text-gray-900 inline-flex items-center gap-1" id="services-btn"> Services <svg class="w-3.5 h-3.5 transition-transform" id="services-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg> </button> <div id="services-menu" class="absolute left-1/2 -translate-x-1/2 top-full mt-2 rounded-xl border border-gray-200 bg-white shadow-xl hidden z-50" style="width: 720px;"> <div class="grid grid-cols-3 gap-0 p-4"> <!-- Column 1 --> <div class="pr-4 border-r border-gray-100"> <p class="text-[11px] font-semibold uppercase tracking-wider text-blue-500 mb-2">Telecom</p> <a href="/services/telecom/fcc-499a" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">FCC 499A Filing</a> <a href="/services/telecom/stir-shaken" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">STIR/SHAKEN</a> <a href="/services/telecom/ipes-isp" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">FCC Carrier / ISP Registration</a> <a href="/services/telecom/database-management" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Telecom Databases</a> <a href="/services/telecom/state-puc" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">State PUC/PSC Filings</a> <a href="/services/telecom/canada-crtc" class="block py-1.5 text-sm font-medium text-blue-600 hover:text-blue-800">Canada CRTC Package <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-red-500 text-white ml-1 animate-pulse">HOT</span></a> <a href="/tools/fcc-compliance-check" class="block py-1.5 text-sm font-medium text-green-600 hover:text-green-800">FCC Compliance Check <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-green-500 text-white ml-1">FREE</span></a> <p class="text-[11px] font-semibold uppercase tracking-wider text-orange-500 mb-2 mt-4">Trucking / DOT</p> <a href="/services/trucking" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">DOT Compliance Services</a> <a href="/order/dot-compliance" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">MCS-150 / BOC-3 / UCR</a> <a href="/order/trucking-new-carrier" class="block py-1.5 text-sm font-medium text-orange-600 hover:text-orange-800">New Carrier Setup</a> <a href="/tools/dot-compliance-check" class="block py-1.5 text-sm font-medium text-orange-600 hover:text-orange-800">DOT Compliance Check <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-orange-500 text-white ml-1">FREE</span></a> </div> <!-- Column 2 --> <div class="px-4 border-r border-gray-100"> <p class="text-[11px] font-semibold uppercase tracking-wider text-purple-500 mb-2">Data Privacy</p> <a href="/services/privacy/ccpa-audit" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">CCPA/CPRA Audit</a> <a href="/services/privacy/privacy-policy" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Privacy Policy Review</a> <a href="/services/privacy/data-mapping" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Data Mapping</a> <a href="/services/privacy/breach-response" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Breach Response Plan</a> <p class="text-[11px] font-semibold uppercase tracking-wider text-green-500 mb-2 mt-4">TCPA</p> <a href="/services/tcpa/consent-audit" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Consent Audit</a> <a href="/services/tcpa/dnc-compliance" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">DNC Compliance</a> <a href="/services/tcpa/campaign-review" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Campaign Review</a> </div> <!-- Column 3 --> <div class="pl-4"> <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-2">Corporate</p> <a href="/services/corporate/dexit-reincorporation" class="block py-1.5 text-sm font-medium text-blue-600 hover:text-blue-800">DEXIT: Leave Delaware <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-blue-500 text-white ml-1">NEW</span></a> <a href="/services/corporate/formation" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Business Formation</a> <a href="/services/corporate/state-registration" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">State Registration</a> <a href="/services/corporate/annual-reports" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Annual Reports</a> <a href="/services/corporate/registered-agent" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Registered Agent</a> <p class="text-[11px] font-semibold uppercase tracking-wider text-teal-500 mb-2 mt-4">Healthcare</p> <a href="/services/healthcare/npi-revalidation" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Medicare Revalidation</a> <a href="/services/healthcare/medicare-enrollment" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Medicare Enrollment (PECOS)</a> <a href="/services/healthcare" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">NPI / NPPES Services</a> <a href="/tools/npi-compliance-check" class="block py-1.5 text-sm font-medium text-teal-600 hover:text-teal-800">NPI Compliance Check <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-teal-500 text-white ml-1">FREE</span></a> <a href="/order/formation" class="mt-3 block py-2 px-3 text-sm font-medium text-white bg-pw-700 hover:bg-pw-800 rounded-lg text-center transition-colors">Form a Business</a> </div> </div> </div> </div> <a href="/services" class="text-sm text-gray-600 hover:text-gray-900">All Services</a> <a href="/pricing" class="text-sm text-gray-600 hover:text-gray-900">Pricing</a> <a href="/tools/contractor-quiz" class="text-sm text-gray-600 hover:text-gray-900">Free Tools</a> <a href="/contact" class="text-sm text-gray-600 hover:text-gray-900">Contact</a> <a href="/order/formation" class="ml-2 px-4 py-2 text-sm font-medium text-white bg-pw-700 hover:bg-pw-800 rounded-lg transition-colors">Form a Business</a> <!-- Account button - links to ERPNext portal --> <a href="https://portal.performancewest.net" id="nav-login-btn" class="ml-1 flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-600 hover:text-pw-700 hover:bg-pw-50 rounded-lg transition-colors border border-gray-200 hover:border-pw-300"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"></path></svg> Client Portal </a> <!-- Account button - logged in (hidden until session confirmed) --> <div id="nav-account-btn" class="hidden relative ml-1"> <button type="button" id="nav-account-trigger" class="flex items-center gap-2 px-3 py-2 text-sm font-medium text-pw-700 hover:bg-pw-50 rounded-lg transition-colors border border-pw-200"> <div class="w-6 h-6 rounded-full bg-pw-600 flex items-center justify-center shrink-0"> <svg class="w-3.5 h-3.5 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"></path></svg> </div> <span id="nav-greeting" class="max-w-[120px] truncate">My Account</span> <svg class="w-3.5 h-3.5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg> </button> <!-- Dropdown --> <div id="nav-account-menu" class="absolute right-0 top-full mt-1 w-48 bg-white rounded-xl border border-gray-200 shadow-lg hidden z-50 py-1"> <div class="px-4 py-2 border-b border-gray-100"> <p class="text-xs text-gray-500">Signed in as</p> <p id="nav-account-email" class="text-xs font-medium text-gray-800 truncate"></p> </div> <button type="button" id="nav-logout-btn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"> Sign out </button> </div> </div> </div> <!-- Mobile menu button --> <button type="button" class="md:hidden text-gray-600 hover:text-gray-900" id="mobile-menu-btn"> <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg> </button> </div> </div> <!-- Mobile menu --> <div id="mobile-menu" class="md:hidden hidden border-t border-gray-200 bg-white"> <div class="px-4 py-3 space-y-1"> <p class="text-xs font-semibold text-blue-500 uppercase tracking-wider px-2 pt-1">Telecom</p> <a href="/services/telecom/fcc-499a" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">FCC 499A Filing</a> <a href="/services/telecom/stir-shaken" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">STIR/SHAKEN</a> <a href="/services/telecom/ipes-isp" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">FCC Carrier / ISP Registration</a> <a href="/services/telecom/database-management" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Telecom Databases</a> <a href="/services/telecom/state-puc" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">State PUC/PSC</a> <a href="/services/telecom/canada-crtc" class="block px-2 py-2 text-sm font-medium text-blue-600 hover:bg-blue-50 rounded">Canada CRTC Package <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-red-500 text-white ml-1 animate-pulse">HOT</span></a> <p class="text-xs font-semibold text-orange-500 uppercase tracking-wider px-2 pt-3">Trucking / DOT</p> <a href="/services/trucking" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">DOT Compliance Services</a> <a href="/order/dot-compliance" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">MCS-150 / BOC-3 / UCR</a> <a href="/order/trucking-new-carrier" class="block px-2 py-2 text-sm font-medium text-orange-600 hover:bg-orange-50 rounded">New Carrier Setup</a> <a href="/tools/dot-compliance-check" class="block px-2 py-2 text-sm font-medium text-orange-600 hover:bg-orange-50 rounded">DOT Compliance Check <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-orange-500 text-white ml-1">FREE</span></a> <p class="text-xs font-semibold text-purple-500 uppercase tracking-wider px-2 pt-3">Data Privacy</p> <a href="/services/privacy/ccpa-audit" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">CCPA/CPRA Audit</a> <a href="/services/privacy/privacy-policy" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Privacy Policy Review</a> <a href="/services/privacy/data-mapping" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Data Mapping</a> <a href="/services/privacy/breach-response" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Breach Response Plan</a> <p class="text-xs font-semibold text-green-500 uppercase tracking-wider px-2 pt-3">TCPA</p> <a href="/services/tcpa/consent-audit" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Consent Audit</a> <a href="/services/tcpa/dnc-compliance" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">DNC Compliance</a> <a href="/services/tcpa/campaign-review" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Campaign Review</a> <p class="text-xs font-semibold text-teal-500 uppercase tracking-wider px-2 pt-3">Healthcare</p> <a href="/services/healthcare/npi-revalidation" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Medicare Revalidation</a> <a href="/services/healthcare/medicare-enrollment" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Medicare Enrollment (PECOS)</a> <a href="/services/healthcare" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">NPI / NPPES Services</a> <a href="/tools/npi-compliance-check" class="block px-2 py-2 text-sm font-medium text-teal-600 hover:bg-teal-50 rounded">NPI Compliance Check <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-teal-500 text-white ml-1">FREE</span></a> <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider px-2 pt-3">Corporate</p> <a href="/services/corporate/formation" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Business Formation</a> <a href="/services/corporate/state-registration" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">State Registration</a> <a href="/services/corporate/annual-reports" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Annual Reports</a> <a href="/services/corporate/registered-agent" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Registered Agent</a> <div class="border-t border-gray-100 my-2"></div> <a href="/services" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">All Services</a> <a href="/pricing" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Pricing</a> <a href="/tools/contractor-quiz" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Free Tools</a> <a href="/contact" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Contact</a> <a href="/order/formation" class="block mx-2 mt-2 px-4 py-2.5 text-sm font-medium text-white bg-pw-700 hover:bg-pw-800 rounded-lg text-center transition-colors">Form a Business</a> </div> </div> </nav>
<main class="flex-1">
<!-- Hero -->
<section style="background:linear-gradient(135deg,#1a2744 0%,#0f172a 100%);padding:48px 0 40px">
<div style="max-width:48rem;margin:0 auto;padding:0 16px;text-align:center">
<div style="display:inline-flex;align-items:center;gap:6px;background:rgba(249,115,22,0.15);border:1px solid rgba(249,115,22,0.3);border-radius:999px;padding:4px 14px;font-size:12px;font-weight:600;color:#fb923c;margin-bottom:16px">
<svg style="width:14px;height:14px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/></svg>
New Carrier Startup
</div>
<h1 style="font-size:28px;font-weight:800;color:#fff;margin:0 0 12px;line-height:1.2">Start Your Trucking Business</h1>
<p style="font-size:15px;color:#94a3b8;margin:0;line-height:1.6;max-width:540px;display:inline-block">Answer a few questions about your fleet, and we'll build a custom compliance package for you.</p>
<div style="margin-top:22px">
<a href="/tools/dot-compliance-check" style="display:inline-flex;align-items:center;gap:8px;padding:11px 26px;background:rgba(255,255,255,0.08);border:1px solid rgba(148,163,184,0.5);color:#e2e8f0;font-weight:600;border-radius:8px;text-decoration:none;font-size:14px">Already got your USDOT? Run a free Compliance Check &rarr;</a>
</div>
</div>
</section>
<!-- Trust bar -->
<div style="background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:16px 0">
<div style="max-width:48rem;margin:0 auto;padding:0 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:24px;align-items:center;font-size:12px;color:#64748b">
<span style="display:flex;align-items:center;gap:6px"><svg style="width:16px;height:16px;color:#059669" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg> Professional compliance consulting</span>
<span style="display:flex;align-items:center;gap:6px"><svg style="width:16px;height:16px;color:#059669" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Most filings in 3-5 business days</span>
<span style="display:flex;align-items:center;gap:6px"><svg style="width:16px;height:16px;color:#059669" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"/></svg> Secure payments via Stripe</span>
<span style="display:flex;align-items:center;gap:6px"><svg style="width:16px;height:16px;color:#059669" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg> 5,000+ carriers served</span>
</div>
</div>
<!-- Progress Bar -->
<div style="padding:24px 16px 0">
<div class="prog-bar" id="progress-bar">
<div style="text-align:center">
<div class="prog-dot active" data-step="0">1</div>
<div class="prog-label active" data-step="0">Fleet</div>
</div>
<div class="prog-line" data-line="0"></div>
<div style="text-align:center">
<div class="prog-dot" data-step="1">2</div>
<div class="prog-label" data-step="1">Entity</div>
</div>
<div class="prog-line" data-line="1"></div>
<div style="text-align:center">
<div class="prog-dot" data-step="2">3</div>
<div class="prog-label" data-step="2">Services</div>
</div>
<div class="prog-line" data-line="2"></div>
<div style="text-align:center">
<div class="prog-dot" data-step="3">4</div>
<div class="prog-label" data-step="3">Checkout</div>
</div>
</div>
</div>
<section style="padding:24px 0 48px">
<div style="max-width:48rem;margin:0 auto;padding:0 16px">
<!-- ===================== STEP 0: Fleet Profile ===================== -->
<div class="wiz-step active" id="step-0">
<h2 style="font-size:22px;font-weight:800;color:#1a2744;margin:0 0 8px">Tell us about your fleet</h2>
<p style="font-size:14px;color:#64748b;margin:0 0 28px">We'll use this to recommend exactly which registrations and filings you need.</p>
<!-- Q1: Power units -->
<div class="q-block">
<p class="q-label">How many power units (trucks/tractors)?</p>
<div class="q-grid" id="q-units">
<div class="btn-opt" data-val="1">1</div>
<div class="btn-opt" data-val="2-5">2 - 5</div>
<div class="btn-opt" data-val="6-20">6 - 20</div>
<div class="btn-opt" data-val="21-100">21 - 100</div>
<div class="btn-opt" data-val="100+">100+</div>
</div>
</div>
<!-- Q2: Vehicle type -->
<div class="q-block">
<p class="q-label">What type of vehicles?</p>
<div class="q-grid" id="q-vehicles">
<div class="btn-opt" data-val="straight">Straight Trucks</div>
<div class="btn-opt" data-val="tractor">Tractor-Trailers</div>
<div class="btn-opt" data-val="both">Both</div>
<div class="btn-opt" data-val="bus">Buses / Passengers</div>
</div>
</div>
<!-- Q3: Cargo -->
<div class="q-block">
<p class="q-label">What will you haul? <span style="font-weight:400;color:#94a3b8;font-size:13px">(select all that apply)</span></p>
<div class="q-grid" id="q-cargo">
<label class="chk-opt"><input type="checkbox" value="general"> General Freight</label>
<label class="chk-opt"><input type="checkbox" value="household"> Household Goods</label>
<label class="chk-opt"><input type="checkbox" value="hazmat"> Hazmat</label>
<label class="chk-opt"><input type="checkbox" value="passengers"> Passengers</label>
<label class="chk-opt"><input type="checkbox" value="livestock"> Livestock</label>
<label class="chk-opt"><input type="checkbox" value="refrigerated"> Refrigerated</label>
<label class="chk-opt"><input type="checkbox" value="flatbed"> Flatbed / Machinery</label>
<label class="chk-opt"><input type="checkbox" value="tanker"> Tanker / Liquids</label>
<label class="chk-opt"><input type="checkbox" value="other"> Other</label>
</div>
</div>
<!-- Q4: Interstate -->
<div class="q-block">
<p class="q-label">Will you cross state lines?</p>
<div class="q-grid" id="q-interstate">
<div class="btn-opt" data-val="interstate">Interstate</div>
<div class="btn-opt" data-val="intrastate">Intrastate Only</div>
</div>
</div>
<!-- Q5: International -->
<div class="q-block">
<p class="q-label">Do you cross international borders?</p>
<div class="q-grid" id="q-international">
<div class="btn-opt" data-val="no">No</div>
<div class="btn-opt" data-val="canada">Canada</div>
<div class="btn-opt" data-val="mexico">Mexico</div>
<div class="btn-opt" data-val="both">Both</div>
</div>
</div>
<!-- Q6: Base state -->
<div class="q-block">
<p class="q-label">Where is your base of operations?</p>
<select id="q-base-state" style="width:100%;max-width:320px;padding:12px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;font-weight:500;color:#334155;background:#fff;cursor:pointer;appearance:auto">
<option value="">Select your state...</option>
</select>
</div>
<!-- Q7: Operating states (shown after base state) -->
<div class="q-block" id="q-op-states-block" style="display:none">
<p class="q-label">What states will you operate in? <span style="font-weight:400;color:#94a3b8;font-size:13px">(select all that apply)</span></p>
<div style="margin-bottom:10px">
<button type="button" id="select-all-states-btn" style="font-size:12px;color:#f97316;font-weight:600;background:none;border:none;cursor:pointer;padding:0;text-decoration:underline">Select all states</button>
<span style="color:#d4d4d4;margin:0 8px">|</span>
<button type="button" id="clear-states-btn" style="font-size:12px;color:#94a3b8;font-weight:600;background:none;border:none;cursor:pointer;padding:0;text-decoration:underline">Clear</button>
</div>
<div class="state-grid" id="q-op-states"></div>
</div>
<!-- Q8: Carrier type -->
<div class="q-block">
<p class="q-label">For-hire or private carrier?</p>
<div class="q-grid" id="q-carrier-type">
<div class="btn-opt" data-val="for-hire" style="flex:1">
<div style="text-align:center">
<div style="font-weight:700">For-Hire</div>
<div style="font-size:11px;font-weight:400;color:#94a3b8;margin-top:2px">Hauling others' goods for pay</div>
</div>
</div>
<div class="btn-opt" data-val="private" style="flex:1">
<div style="text-align:center">
<div style="font-weight:700">Private</div>
<div style="font-size:11px;font-weight:400;color:#94a3b8;margin-top:2px">Transporting your own goods</div>
</div>
</div>
<div class="btn-opt" data-val="exempt" style="flex:1">
<div style="text-align:center">
<div style="font-weight:700">Exempt</div>
<div style="font-size:11px;font-weight:400;color:#94a3b8;margin-top:2px">Farm, government, etc.</div>
</div>
</div>
</div>
</div>
<div class="wiz-nav">
<div></div>
<button type="button" class="wiz-btn primary" id="step0-next" disabled>
Next: Entity Setup
<svg style="width:16px;height:16px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</button>
</div>
</div>
<!-- ===================== STEP 1: Entity Strategy ===================== -->
<div class="wiz-step" id="step-1">
<h2 style="font-size:22px;font-weight:800;color:#1a2744;margin:0 0 8px">Business Entity Setup</h2>
<p style="font-size:14px;color:#64748b;margin:0 0 28px">Your trucking business needs a legal entity before we can register with FMCSA.</p>
<div class="q-block">
<p class="q-label">Do you have an existing business entity?</p>
<div class="q-grid" id="q-has-entity">
<div class="btn-opt" data-val="yes" style="flex:1">Yes, I have one</div>
<div class="btn-opt" data-val="no" style="flex:1">No, I need to form one</div>
</div>
</div>
<!-- Existing entity input -->
<div id="entity-existing" style="display:none">
<div class="q-block">
<p class="q-label">What is your business name?</p>
<input type="text" id="entity-existing-name" placeholder="e.g. Smith Trucking LLC" style="width:100%;padding:12px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;color:#334155">
<div id="entity-existing-result" class="name-result"></div>
</div>
<div class="q-block">
<p class="q-label">State of incorporation</p>
<select id="entity-existing-state" style="width:100%;max-width:320px;padding:12px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;color:#334155;background:#fff">
<option value="">Select state...</option>
</select>
</div>
</div>
<!-- New entity options -->
<div id="entity-new" style="display:none">
<div class="q-block">
<p class="q-label">How do you want to set up?</p>
<div class="entity-opt" data-val="home" id="entity-opt-home">
<div style="display:flex;align-items:center;gap:12px">
<div style="width:40px;height:40px;border-radius:10px;background:#f0fdf4;display:flex;align-items:center;justify-content:center;flex-shrink:0">
<svg style="width:20px;height:20px;color:#16a34a" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
</div>
<div style="flex:1">
<div style="font-size:15px;font-weight:700;color:#1e293b">Keep it simple</div>
<div style="font-size:13px;color:#64748b;margin-top:2px">Form in your home state (<span id="home-state-label">your state</span>)</div>
</div>
</div>
</div>
<div class="entity-opt" data-val="wyoming" id="entity-opt-wy">
<div style="display:flex;align-items:center;gap:12px">
<div style="width:40px;height:40px;border-radius:10px;background:#eff6ff;display:flex;align-items:center;justify-content:center;flex-shrink:0">
<svg style="width:20px;height:20px;color:#2563eb" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
</div>
<div style="flex:1">
<div style="font-size:15px;font-weight:700;color:#1e293b">Optimize for liability protection &amp; taxes
<span style="font-size:11px;font-weight:700;color:#2563eb;background:#eff6ff;padding:2px 8px;border-radius:999px;margin-left:6px">RECOMMENDED</span>
</div>
<div style="font-size:13px;color:#64748b;margin-top:2px">Form in Wyoming - no state income tax, $50/yr annual report, strongest asset protection in the US. We handle foreign qualification in your operating state.</div>
</div>
</div>
</div>
</div>
<div class="q-block" id="entity-corp-flag" style="display:none">
<div style="background:#fffbeb;border:2px solid #fbbf24;border-radius:10px;padding:16px">
<div style="display:flex;gap:10px;align-items:flex-start">
<span style="font-size:18px;line-height:1.2">&#9888;&#65039;</span>
<div style="flex:1">
<div class="flag-lead" style="font-size:14px;font-weight:700;color:#92400e;margin-bottom:4px"></div>
<div class="flag-reason" style="font-size:13px;color:#78350f;line-height:1.6"></div>
<button type="button" id="flag-pick-corp" style="margin-top:10px;padding:8px 16px;background:#16a34a;color:#fff;font-weight:700;border:none;border-radius:8px;font-size:13px;cursor:pointer">Use a corporation</button>
</div>
</div>
</div>
</div>
<div class="q-block">
<p class="q-label">Entity type</p>
<div class="q-grid" id="q-entity-type">
<div class="btn-opt selected" data-val="llc" style="flex:1">
<div style="text-align:center">
<div style="font-weight:700">LLC</div>
<div style="font-size:11px;font-weight:400;color:#94a3b8;margin-top:2px">Recommended for most carriers</div>
</div>
</div>
<div class="btn-opt" data-val="corp" style="flex:1">
<div style="text-align:center">
<div style="font-weight:700">Corporation</div>
<div style="font-size:11px;font-weight:400;color:#94a3b8;margin-top:2px">S-Corp or C-Corp election</div>
</div>
</div>
</div>
</div>
<div class="q-block">
<p class="q-label">Business name</p>
<input type="text" id="entity-new-name" placeholder="e.g. Smith Trucking LLC" style="width:100%;padding:12px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;color:#334155">
<p style="font-size:11px;color:#94a3b8;margin:6px 0 0">We'll check availability with the Secretary of State and FMCSA.</p>
<div id="entity-new-result" class="name-result"></div>
</div>
</div>
<div class="wiz-nav">
<button type="button" class="wiz-btn secondary" id="step1-back">
<svg style="width:16px;height:16px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/></svg>
Back
</button>
<button type="button" class="wiz-btn primary" id="step1-next" disabled>
Next: Review Services
<svg style="width:16px;height:16px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</button>
</div>
</div>
<!-- ===================== STEP 2: Service Selection ===================== -->
<div class="wiz-step" id="step-2">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
<h2 style="font-size:22px;font-weight:800;color:#1a2744;margin:0">Your Compliance Package</h2>
</div>
<p style="font-size:14px;color:#64748b;margin:0 0 8px">Based on your fleet profile, here's what you need:</p>
<!-- Bundle offer (shown if 4+ services) -->
<div id="bundle-offer" style="display:none;margin-bottom:24px">
<div style="background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 100%);border:2px solid #86efac;border-radius:12px;padding:20px;cursor:pointer" id="bundle-card">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
<span style="font-size:10px;font-weight:700;color:#fff;background:#16a34a;border-radius:999px;padding:2px 10px">BEST VALUE</span>
<span style="font-size:12px;font-weight:700;color:#16a34a">New Carrier Starter Bundle</span>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
<div>
<span style="font-size:24px;font-weight:800;color:#16a34a">$599</span>
<span style="font-size:13px;color:#64748b;margin-left:4px">+ $300 FMCSA fee</span>
</div>
<div style="font-size:12px;font-weight:700;color:#15803d;background:rgba(22,163,74,0.1);padding:6px 12px;border-radius:8px">
<span id="bundle-savings">Save $405</span> vs. individual pricing
</div>
</div>
<p style="font-size:12px;color:#475569;margin:10px 0 0">Includes: LLC Formation, USDOT, MC Authority, BOC-3, MCS-150, Drug &amp; Alcohol Program</p>
<div style="margin-top:12px">
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
<input type="checkbox" id="use-bundle" style="width:18px;height:18px;accent-color:#16a34a">
<span style="font-size:14px;font-weight:700;color:#15803d">Use the Starter Bundle and save</span>
</label>
</div>
</div>
</div>
<div id="svc-list-header" style="display:flex;align-items:center;gap:16px;margin:0 0 16px">
<div style="flex:1;height:1px;background:#e2e8f0"></div>
<span style="font-size:12px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.1em" id="svc-list-label">Required &amp; Optional Services</span>
<div style="flex:1;height:1px;background:#e2e8f0"></div>
</div>
<div id="svc-list"></div>
<!-- Hazmat note -->
<div id="hazmat-note" style="display:none;margin-top:16px;padding:14px 16px;background:#fffbeb;border:1px solid #fde68a;border-radius:10px">
<div style="display:flex;align-items:flex-start;gap:10px">
<svg style="width:18px;height:18px;color:#d97706;flex-shrink:0;margin-top:1px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
<div>
<p style="font-size:13px;font-weight:700;color:#92400e;margin:0 0 4px">Hazmat Notice</p>
<p style="font-size:12px;color:#78350f;margin:0;line-height:1.5">Hazmat carriers must register with the Hazardous Materials Safety Permit (HMSP) program, and all drivers must obtain a TWIC card. We'll guide you through these requirements during intake.</p>
</div>
</div>
</div>
<!-- Total -->
<div style="margin-top:24px;padding:20px;background:#fff;border:2px solid #e2e8f0;border-radius:12px" id="svc-total-box">
<div id="svc-total-rows"></div>
</div>
<div class="wiz-nav">
<button type="button" class="wiz-btn secondary" id="step2-back">
<svg style="width:16px;height:16px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/></svg>
Back
</button>
<button type="button" class="wiz-btn primary" id="step2-next">
Next: Checkout
<svg style="width:16px;height:16px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</button>
</div>
</div>
<!-- ===================== STEP 3: Checkout ===================== -->
<div class="wiz-step" id="step-3">
<h2 style="font-size:22px;font-weight:800;color:#1a2744;margin:0 0 8px">Complete Your Order</h2>
<p style="font-size:14px;color:#64748b;margin:0 0 24px">Review your package and enter payment details.</p>
<!-- Order summary -->
<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:24px">
<h3 style="font-size:14px;font-weight:700;color:#1e293b;margin:0 0 12px">Order Summary</h3>
<div id="checkout-summary"></div>
</div>
<form id="pw-batch-form" style="display:grid;gap:16px">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div>
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:4px">Your first and last name</label>
<input type="text" id="pw-name" required placeholder="e.g. John Smith" style="width:100%;padding:12px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;color:#334155">
</div>
<div>
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:4px">Email</label>
<input type="email" id="pw-email" required placeholder="john@company.com" style="width:100%;padding:12px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;color:#334155">
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div>
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:4px">Phone</label>
<input type="tel" id="pw-phone" placeholder="(555) 123-4567" style="width:100%;padding:12px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;color:#334155">
</div>
<div>
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:4px">USDOT # <span style="font-weight:400;color:#94a3b8">(if you already have one)</span></label>
<input type="text" id="pw-dot" placeholder="Optional" style="width:100%;padding:12px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;color:#334155">
</div>
</div>
<div>
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:4px">Discount code</label>
<input type="text" id="pw-promo" placeholder="Optional" style="width:100%;max-width:240px;padding:12px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;color:#334155;text-transform:uppercase">
</div>
<div>
<h4 style="font-size:14px;font-weight:700;color:#1e293b;margin:0 0 10px">Payment Method</h4>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
<label style="display:flex;align-items:center;gap:8px;padding:14px;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all 0.15s">
<input type="radio" name="pw_pay" value="card" checked style="accent-color:#f97316">
<span style="font-size:14px;font-weight:500">Card</span>
</label>
<label style="display:flex;align-items:center;gap:8px;padding:14px;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all 0.15s">
<input type="radio" name="pw_pay" value="paypal" style="accent-color:#f97316">
<span style="font-size:14px;font-weight:500">PayPal</span>
</label>
<label style="display:flex;align-items:center;gap:8px;padding:14px;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all 0.15s">
<input type="radio" name="pw_pay" value="ach" style="accent-color:#f97316">
<span style="font-size:14px;font-weight:500">ACH</span>
</label>
<label style="display:flex;align-items:center;gap:8px;padding:14px;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all 0.15s">
<input type="radio" name="pw_pay" value="klarna" style="accent-color:#f97316">
<span style="font-size:14px;font-weight:500">Klarna <span style="font-size:10px;color:#e74c99;font-weight:700">4 payments</span></span>
</label>
</div>
</div>
<label style="display:flex;align-items:flex-start;gap:8px;padding:14px;border:2px solid #e2e8f0;border-radius:10px;font-size:13px;color:#475569;cursor:pointer">
<input type="checkbox" id="pw-engage" required style="margin-top:2px;width:18px;height:18px;accent-color:#f97316;flex-shrink:0">
<span>I authorize Performance West to prepare and file on my behalf. <a href="/terms" target="_blank" style="color:#f97316;text-decoration:underline">Terms</a></span>
</label>
<button type="submit" id="pw-submit" style="width:100%;padding:16px;border-radius:10px;background:#f97316;color:#fff;font-weight:700;font-size:16px;border:none;cursor:pointer;box-shadow:0 4px 14px rgba(249,115,22,0.4)">Continue to Secure Payment &rarr;</button>
<p id="pw-err" style="font-size:14px;color:#b91c1c;margin:0;display:none"></p>
<!-- Security badges -->
<div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px;padding:10px 0;border-top:1px solid #f1f5f9">
<svg style="height:20px;color:#6366f1" viewBox="0 0 60 25" fill="currentColor"><text x="0" y="18" font-size="16" font-weight="700" font-family="Arial">stripe</text></svg>
<span style="font-size:11px;color:#94a3b8">|</span>
<span style="font-size:12px;font-weight:700;color:#003087">Pay<span style="color:#009cde">Pal</span></span>
<span style="font-size:11px;color:#94a3b8">|</span>
<span style="display:flex;align-items:center;gap:4px;font-size:11px;color:#64748b"><svg style="width:14px;height:14px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>256-bit SSL</span>
<span style="font-size:11px;color:#94a3b8">|</span>
<span style="display:flex;align-items:center;gap:4px;font-size:11px;color:#64748b"><svg style="width:14px;height:14px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>PCI Compliant</span>
</div>
</form>
<div class="wiz-nav" style="margin-top:16px">
<button type="button" class="wiz-btn secondary" id="step3-back">
<svg style="width:16px;height:16px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/></svg>
Back
</button>
<div></div>
</div>
</div>
<!-- Help -->
<div style="margin-top:32px;text-align:center">
<p style="font-size:14px;color:#64748b">Questions? <a href="mailto:info@performancewest.net" style="color:#f97316;text-decoration:underline">info@performancewest.net</a> or call <strong>(888) 411-0383</strong></p>
</div>
</div>
</section>
</main>
<footer class="border-t border-gray-200 bg-gray-50 mt-auto py-8">
<div class="max-w-4xl mx-auto px-4 text-center text-xs text-gray-400">
<img src="/images/logo.png" alt="Performance West" class="h-10 mx-auto mb-3">
<p>Performance West Inc. &middot; 525 Randall Ave Ste 100-1195, Cheyenne, WY 82001 &middot; <a href="https://performancewest.net" class="text-gray-500">performancewest.net</a> &middot; (888) 411-0383</p>
<p class="mt-2"><a href="/privacy" class="text-gray-500 hover:text-gray-700">Privacy Policy</a> · <a href="/terms" class="text-gray-500 hover:text-gray-700">Terms of Service</a> · <a href="/security" class="text-gray-500 hover:text-gray-700">Security &amp; Trust</a> · <a href="/accessibility" class="text-gray-500 hover:text-gray-700">Accessibility</a></p>
<p class="mt-2">Performance West is a regulatory compliance consulting firm, not a law firm. This does not constitute legal advice.</p>
</div>
</footer>
<script>
var API = window.__PW_API || "https://api.performancewest.net";
var params = new URLSearchParams(window.location.search);
function usd(cents) { return "$" + (cents / 100).toLocaleString("en-US", {minimumFractionDigits: 2}); }
// ───── US States ─────
var US_STATES = [
{code:"AL",name:"Alabama"},{code:"AK",name:"Alaska"},{code:"AZ",name:"Arizona"},{code:"AR",name:"Arkansas"},
{code:"CA",name:"California"},{code:"CO",name:"Colorado"},{code:"CT",name:"Connecticut"},{code:"DE",name:"Delaware"},
{code:"DC",name:"District of Columbia"},{code:"FL",name:"Florida"},{code:"GA",name:"Georgia"},{code:"HI",name:"Hawaii"},
{code:"ID",name:"Idaho"},{code:"IL",name:"Illinois"},{code:"IN",name:"Indiana"},{code:"IA",name:"Iowa"},
{code:"KS",name:"Kansas"},{code:"KY",name:"Kentucky"},{code:"LA",name:"Louisiana"},{code:"ME",name:"Maine"},
{code:"MD",name:"Maryland"},{code:"MA",name:"Massachusetts"},{code:"MI",name:"Michigan"},{code:"MN",name:"Minnesota"},
{code:"MS",name:"Mississippi"},{code:"MO",name:"Missouri"},{code:"MT",name:"Montana"},{code:"NE",name:"Nebraska"},
{code:"NV",name:"Nevada"},{code:"NH",name:"New Hampshire"},{code:"NJ",name:"New Jersey"},{code:"NM",name:"New Mexico"},
{code:"NY",name:"New York"},{code:"NC",name:"North Carolina"},{code:"ND",name:"North Dakota"},{code:"OH",name:"Ohio"},
{code:"OK",name:"Oklahoma"},{code:"OR",name:"Oregon"},{code:"PA",name:"Pennsylvania"},{code:"RI",name:"Rhode Island"},
{code:"SC",name:"South Carolina"},{code:"SD",name:"South Dakota"},{code:"TN",name:"Tennessee"},{code:"TX",name:"Texas"},
{code:"UT",name:"Utah"},{code:"VT",name:"Vermont"},{code:"VA",name:"Virginia"},{code:"WA",name:"Washington"},
{code:"WV",name:"West Virginia"},{code:"WI",name:"Wisconsin"},{code:"WY",name:"Wyoming"}
];
// Populate state dropdowns
function populateStateDropdown(sel) {
US_STATES.forEach(function(s) {
var opt = document.createElement("option");
opt.value = s.code; opt.textContent = s.name;
sel.appendChild(opt);
});
}
populateStateDropdown(document.getElementById("q-base-state"));
populateStateDropdown(document.getElementById("entity-existing-state"));
// Populate operating states grid
var opStatesGrid = document.getElementById("q-op-states");
US_STATES.forEach(function(s) {
var chip = document.createElement("div");
chip.className = "state-chip";
chip.dataset.state = s.code;
chip.textContent = s.code;
chip.title = s.name;
chip.addEventListener("click", function() {
if (chip.classList.contains("base")) return;
chip.classList.toggle("selected");
validateStep0();
});
opStatesGrid.appendChild(chip);
});
// ───── Wizard State ─────
var wiz = {
units: null,
vehicles: null,
cargo: [],
interstate: null,
international: null,
baseState: null,
operatingStates: [],
carrierType: null,
hasEntity: null,
entityStrategy: null, // "home" or "wyoming"
entityType: "llc",
entityName: "",
entityState: null,
nameAvailable: null,
selectedServices: [], // computed
useBundle: false
};
// ───── Button selectors (single-select) ─────
function setupBtnGroup(containerId, wizKey) {
var container = document.getElementById(containerId);
container.addEventListener("click", function(e) {
var btn = e.target.closest(".btn-opt");
if (!btn) return;
container.querySelectorAll(".btn-opt").forEach(function(b) { b.classList.remove("selected"); });
btn.classList.add("selected");
wiz[wizKey] = btn.dataset.val;
validateStep0();
// Special handling for base state change
if (wizKey === "interstate" || wizKey === "baseState") {
updateOperatingStates();
}
});
}
setupBtnGroup("q-units", "units");
setupBtnGroup("q-vehicles", "vehicles");
setupBtnGroup("q-interstate", "interstate");
setupBtnGroup("q-international", "international");
setupBtnGroup("q-carrier-type", "carrierType");
// Cargo checkboxes
document.getElementById("q-cargo").addEventListener("change", function(e) {
if (!e.target.matches("input[type=checkbox]")) return;
var label = e.target.closest(".chk-opt");
if (e.target.checked) { label.classList.add("selected"); } else { label.classList.remove("selected"); }
wiz.cargo = [];
document.querySelectorAll("#q-cargo input:checked").forEach(function(cb) { wiz.cargo.push(cb.value); });
validateStep0();
});
// Base state dropdown
document.getElementById("q-base-state").addEventListener("change", function() {
wiz.baseState = this.value || null;
updateOperatingStates();
if (typeof updateEntityFlag === "function") updateEntityFlag();
validateStep0();
});
function updateOperatingStates() {
var block = document.getElementById("q-op-states-block");
if (!wiz.baseState) { block.style.display = "none"; return; }
block.style.display = "block";
// Reset all chips, then pre-check base state
opStatesGrid.querySelectorAll(".state-chip").forEach(function(c) {
c.classList.remove("selected", "base");
});
var baseChip = opStatesGrid.querySelector('[data-state="' + wiz.baseState + '"]');
if (baseChip) { baseChip.classList.add("selected", "base"); }
collectOperatingStates();
}
function collectOperatingStates() {
wiz.operatingStates = [];
opStatesGrid.querySelectorAll(".state-chip.selected").forEach(function(c) {
wiz.operatingStates.push(c.dataset.state);
});
}
// Select all / clear states
document.getElementById("select-all-states-btn").addEventListener("click", function() {
opStatesGrid.querySelectorAll(".state-chip").forEach(function(c) { c.classList.add("selected"); });
collectOperatingStates();
});
document.getElementById("clear-states-btn").addEventListener("click", function() {
opStatesGrid.querySelectorAll(".state-chip").forEach(function(c) {
if (!c.classList.contains("base")) c.classList.remove("selected");
});
collectOperatingStates();
});
// ───── Step 0 validation ─────
function validateStep0() {
var ok = wiz.units && wiz.vehicles && wiz.cargo.length > 0 && wiz.interstate && wiz.international && wiz.baseState && wiz.carrierType;
document.getElementById("step0-next").disabled = !ok;
}
// ───── Step 1: Entity ─────
setupBtnGroup("q-entity-type", "entityType");
// Has entity toggle
document.getElementById("q-has-entity").addEventListener("click", function(e) {
var btn = e.target.closest(".btn-opt");
if (!btn) return;
document.querySelectorAll("#q-has-entity .btn-opt").forEach(function(b) { b.classList.remove("selected"); });
btn.classList.add("selected");
wiz.hasEntity = btn.dataset.val;
document.getElementById("entity-existing").style.display = wiz.hasEntity === "yes" ? "block" : "none";
document.getElementById("entity-new").style.display = wiz.hasEntity === "no" ? "block" : "none";
if (wiz.hasEntity === "no") {
document.getElementById("home-state-label").textContent = getStateName(wiz.baseState);
// If base state is WY, auto-select home
if (wiz.baseState === "WY") {
selectEntityStrategy("home");
}
}
updateEntityFlag();
validateStep1();
});
// Entity strategy
document.getElementById("entity-opt-home").addEventListener("click", function() { selectEntityStrategy("home"); });
document.getElementById("entity-opt-wy").addEventListener("click", function() { selectEntityStrategy("wyoming"); });
function selectEntityStrategy(val) {
wiz.entityStrategy = val;
document.querySelectorAll("#entity-new .entity-opt").forEach(function(o) { o.classList.remove("selected"); });
document.getElementById("entity-opt-" + (val === "wyoming" ? "wy" : "home")).classList.add("selected");
wiz.entityState = val === "wyoming" ? "WY" : wiz.baseState;
updateEntityFlag();
validateStep1();
}
// States where a corporation is concretely more favorable than an LLC (verified).
var CORP_FAVOR = {
CA: { name: "California", reason: "California charges LLCs an extra gross-receipts fee of $900 to $11,790 per year once your California income passes $250,000 - a fee corporations don't pay. Most active trucks gross over $250k, so a corporation is often the cheaper structure here." },
TN: { name: "Tennessee", reason: "Tennessee's LLC annual report fee is $300/yr (up to $3,000), versus just $20 for a corporation. A corporation is far cheaper to keep in good standing here." },
NY: { name: "New York", reason: "New York makes LLCs (not corporations) publish formation notices in two newspapers - often $600 to $2,000+ in NYC - plus pay a yearly LLC filing fee. A corporation skips both." }
};
function updateEntityFlag() {
var box = document.getElementById("entity-corp-flag");
if (!box) return;
if (wiz.hasEntity !== "no") { box.style.display = "none"; return; }
var formSt = wiz.entityState, baseSt = wiz.baseState;
var hit = null, via = null;
["CA", "TN", "NY"].forEach(function(s) {
if (hit) return;
if (formSt === s) { hit = s; via = "form"; }
else if (baseSt === s) { hit = s; via = "operate"; }
});
if (!hit) { box.style.display = "none"; return; }
var info = CORP_FAVOR[hit];
box.querySelector(".flag-lead").textContent = "In " + info.name + ", a corporation is the cheaper choice.";
box.querySelector(".flag-reason").textContent = info.reason +
(wiz.entityState === "WY" ? " Even with a Wyoming LLC, " + info.name + " applies this to any LLC registered to do business there." : "");
box.style.display = "block";
}
document.getElementById("flag-pick-corp").addEventListener("click", function() {
var corpBtn = document.querySelector('#q-entity-type .btn-opt[data-val="corp"]');
if (corpBtn) corpBtn.click();
this.textContent = "Corporation selected";
});
// Entity type buttons
document.getElementById("q-entity-type").addEventListener("click", function(e) {
var btn = e.target.closest(".btn-opt");
if (!btn) return;
document.querySelectorAll("#q-entity-type .btn-opt").forEach(function(b) { b.classList.remove("selected"); });
btn.classList.add("selected");
wiz.entityType = btn.dataset.val;
validateStep1();
});
// Name check (debounced)
var nameCheckTimer = null;
function setupNameCheck(inputId, resultId, stateGetter) {
var input = document.getElementById(inputId);
var result = document.getElementById(resultId);
input.addEventListener("input", function() {
clearTimeout(nameCheckTimer);
wiz.entityName = input.value.trim();
wiz.nameAvailable = null;
result.className = "name-result";
result.style.display = "none";
validateStep1();
if (wiz.entityName.length < 3) return;
result.className = "name-result checking";
result.textContent = "Checking availability...";
result.style.display = "block";
nameCheckTimer = setTimeout(function() {
var st = stateGetter();
fetch(API + "/api/v1/dot/name-check", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: wiz.entityName, state: st })
})
.then(function(r) { return r.json(); })
.then(function(d) {
if (d.available) {
result.className = "name-result available";
result.innerHTML = '<svg style="width:16px;height:16px;vertical-align:middle;margin-right:4px;display:inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>' + d.message;
wiz.nameAvailable = true;
} else {
result.className = "name-result taken";
result.innerHTML = '<svg style="width:16px;height:16px;vertical-align:middle;margin-right:4px;display:inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>' + d.message;
wiz.nameAvailable = false;
}
validateStep1();
})
.catch(function() {
result.className = "name-result";
result.style.display = "none";
wiz.nameAvailable = null;
validateStep1();
});
}, 800);
});
}
setupNameCheck("entity-new-name", "entity-new-result", function() { return wiz.entityState || wiz.baseState; });
setupNameCheck("entity-existing-name", "entity-existing-result", function() {
return document.getElementById("entity-existing-state").value || wiz.baseState;
});
document.getElementById("entity-existing-state").addEventListener("change", function() {
wiz.entityState = this.value;
// Re-run name check if name already entered
var nameInput = document.getElementById("entity-existing-name");
if (nameInput.value.trim().length >= 3) {
nameInput.dispatchEvent(new Event("input"));
}
validateStep1();
});
function validateStep1() {
var ok = false;
if (wiz.hasEntity === "yes") {
var name = document.getElementById("entity-existing-name").value.trim();
var state = document.getElementById("entity-existing-state").value;
ok = name.length >= 2 && state;
wiz.entityName = name;
wiz.entityState = state;
} else if (wiz.hasEntity === "no") {
ok = wiz.entityStrategy && wiz.entityName.length >= 2 && wiz.entityType;
}
document.getElementById("step1-next").disabled = !ok;
}
function getStateName(code) {
var s = US_STATES.find(function(st) { return st.code === code; });
return s ? s.name : code;
}
// ───── Step 2: Service computation ─────
var SERVICE_CATALOG = {
"dot-registration": { name: "USDOT Registration", price: 14900, govfee: 0, slug: "dot-registration", nodiscount: false },
"mc-authority": { name: "MC Operating Authority", price: 34900, govfee: 30000, slug: "mc-authority", nodiscount: true },
"boc3-filing": { name: "BOC-3 Process Agent Filing", price: 8900, govfee: 0, slug: "boc3-filing", nodiscount: true },
"mcs150-update": { name: "MCS-150 Filing", price: 6900, govfee: 0, slug: "mcs150-update", nodiscount: false },
"llc-formation": { name: "LLC Formation", price: 19900, govfee: 0, slug: "llc-formation", nodiscount: false },
"corp-formation": { name: "Corporation Formation", price: 24900, govfee: 0, slug: "corp-formation", nodiscount: false },
"foreign-qual": { name: "Foreign Qualification", price: 14900, govfee: 0, slug: "foreign-qualification-single", nodiscount: false },
"dot-drug-alcohol": { name: "Drug & Alcohol Program", price: 14900, govfee: 0, slug: "dot-drug-alcohol", nodiscount: true },
"ucr-registration": { name: "UCR Registration", price: 6900, govfee: 0, slug: "ucr-registration", nodiscount: false },
"registered-agent": { name: "Registered Agent (per state)",price: 9900, govfee: 0, slug: "registered-agent", nodiscount: false }
};
function computeServices() {
var svcs = [];
var isInterstate = wiz.interstate === "interstate";
var isForHire = wiz.carrierType === "for-hire";
var needsEntity = wiz.hasEntity === "no";
var isWyoming = wiz.entityStrategy === "wyoming";
var baseNotWy = wiz.baseState && wiz.baseState !== "WY";
var hasCDL = true; // assume CDL for trucks
var hasHazmat = wiz.cargo.indexOf("hazmat") >= 0;
// Always: USDOT
svcs.push({ key: "dot-registration", required: true });
// For-hire + interstate: MC Authority
if (isForHire && isInterstate) {
svcs.push({ key: "mc-authority", required: true });
}
// Always: BOC-3
svcs.push({ key: "boc3-filing", required: true });
// Always: MCS-150
svcs.push({ key: "mcs150-update", required: true });
// Entity formation
if (needsEntity) {
if (wiz.entityType === "corp") {
svcs.push({ key: "corp-formation", required: true });
} else {
svcs.push({ key: "llc-formation", required: true });
}
}
// Foreign qualification
if (needsEntity && isWyoming && baseNotWy) {
svcs.push({ key: "foreign-qual", required: true });
}
// Drug & Alcohol (CDL drivers)
if (hasCDL) {
svcs.push({ key: "dot-drug-alcohol", required: true });
}
// UCR (interstate)
if (isInterstate) {
svcs.push({ key: "ucr-registration", required: false });
}
// Registered Agent - if Wyoming + operating elsewhere, need RA in 2 states
if (needsEntity && isWyoming && baseNotWy) {
svcs.push({ key: "registered-agent", required: false, qty: 2, label: "Registered Agent (WY + " + wiz.baseState + ")" });
} else if (needsEntity) {
svcs.push({ key: "registered-agent", required: false, qty: 1, label: "Registered Agent (" + (wiz.entityState || wiz.baseState) + ")" });
}
return svcs;
}
function renderStep2() {
var svcs = computeServices();
var listEl = document.getElementById("svc-list");
var html = "";
// Count required services (for bundle eligibility)
var requiredCount = svcs.filter(function(s) { return s.required; }).length;
var showBundle = requiredCount >= 4 && wiz.hasEntity === "no" && wiz.carrierType === "for-hire" && wiz.interstate === "interstate";
// Bundle
var bundleEl = document.getElementById("bundle-offer");
if (showBundle) {
bundleEl.style.display = "block";
// Calculate individual total for savings display
var indivTotal = 0;
svcs.forEach(function(s) {
if (s.required) indivTotal += SERVICE_CATALOG[s.key].price;
});
var savings = indivTotal - 59900;
if (savings > 0) {
document.getElementById("bundle-savings").textContent = "Save " + usd(savings);
}
} else {
bundleEl.style.display = "none";
wiz.useBundle = false;
var bundleCb = document.getElementById("use-bundle");
if (bundleCb) bundleCb.checked = false;
}
svcs.forEach(function(s) {
var cat = SERVICE_CATALOG[s.key];
var qty = s.qty || 1;
var price = cat.price * qty;
var govfee = cat.govfee * qty;
var label = s.label || cat.name;
var isRequired = s.required;
var cls = isRequired ? "svc-row included" : "svc-row optional";
html += '<div class="' + cls + '" data-svc-key="' + s.key + '" data-price="' + price + '" data-govfee="' + govfee + '" data-required="' + (isRequired ? "1" : "0") + '" data-nodiscount="' + (cat.nodiscount ? "1" : "0") + '" data-slug="' + cat.slug + '" data-qty="' + qty + '">';
html += '<div style="display:flex;align-items:center;gap:10px;flex:1">';
if (isRequired) {
html += '<svg style="width:18px;height:18px;color:#16a34a;flex-shrink:0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>';
} else {
html += '<input type="checkbox" class="opt-svc-cb" data-key="' + s.key + '" style="width:18px;height:18px;accent-color:#f97316;flex-shrink:0">';
}
html += '<div>';
html += '<div style="font-size:14px;font-weight:600;color:#1e293b">' + label + '</div>';
if (isRequired) {
html += '<div style="font-size:11px;color:#16a34a;font-weight:600">Required</div>';
} else {
html += '<div style="font-size:11px;color:#94a3b8">Optional</div>';
}
html += '</div></div>';
html += '<div style="text-align:right">';
html += '<div style="font-size:14px;font-weight:700;color:' + (isRequired ? '#16a34a' : '#ea580c') + '">' + usd(price) + '</div>';
if (govfee > 0) {
html += '<div style="font-size:11px;color:#94a3b8">+ ' + usd(govfee) + ' gov fee</div>';
}
if (cat.nodiscount) {
html += '<div style="font-size:10px;color:#d4d4d4">non-discountable</div>';
}
html += '</div></div>';
});
listEl.innerHTML = html;
// Toggle optional services
listEl.querySelectorAll(".svc-row.optional").forEach(function(row) {
row.addEventListener("click", function(e) {
if (e.target.tagName === "INPUT") return;
var cb = row.querySelector(".opt-svc-cb");
if (cb) { cb.checked = !cb.checked; row.classList.toggle("selected", cb.checked); }
updateStep2Total();
});
var cb = row.querySelector(".opt-svc-cb");
if (cb) {
cb.addEventListener("change", function() {
row.classList.toggle("selected", cb.checked);
updateStep2Total();
});
}
});
// Hazmat note
document.getElementById("hazmat-note").style.display = wiz.cargo.indexOf("hazmat") >= 0 ? "block" : "none";
updateStep2Total();
}
// Bundle checkbox
document.getElementById("use-bundle").addEventListener("change", function() {
wiz.useBundle = this.checked;
updateStep2Total();
});
function getSelectedServices() {
var svcs = [];
if (wiz.useBundle) {
svcs.push({ slug: "dot-new-carrier-bundle", price: 59900, govfee: 30000, name: "New Carrier Starter Bundle", nodiscount: true });
// Add non-bundle optional services
document.querySelectorAll("#svc-list .svc-row.optional").forEach(function(row) {
var cb = row.querySelector(".opt-svc-cb");
if (cb && cb.checked) {
var bundleIncludes = ["llc-formation","dot-registration","mc-authority","boc3-filing","mcs150-update","dot-drug-alcohol"];
if (bundleIncludes.indexOf(row.dataset.slug) < 0) {
svcs.push({
slug: row.dataset.slug,
price: parseInt(row.dataset.price),
govfee: parseInt(row.dataset.govfee) || 0,
name: row.querySelector("[style*='font-weight:600']").textContent,
nodiscount: row.dataset.nodiscount === "1"
});
}
}
});
} else {
// All required services
document.querySelectorAll("#svc-list .svc-row[data-required='1']").forEach(function(row) {
svcs.push({
slug: row.dataset.slug,
price: parseInt(row.dataset.price),
govfee: parseInt(row.dataset.govfee) || 0,
name: row.querySelector("[style*='font-weight:600']").textContent,
nodiscount: row.dataset.nodiscount === "1"
});
});
// Selected optional services
document.querySelectorAll("#svc-list .svc-row.optional").forEach(function(row) {
var cb = row.querySelector(".opt-svc-cb");
if (cb && cb.checked) {
svcs.push({
slug: row.dataset.slug,
price: parseInt(row.dataset.price),
govfee: parseInt(row.dataset.govfee) || 0,
name: row.querySelector("[style*='font-weight:600']").textContent,
nodiscount: row.dataset.nodiscount === "1"
});
}
});
}
return svcs;
}
function updateStep2Total() {
var svcs = getSelectedServices();
var total = 0;
var govTotal = 0;
var html = "";
svcs.forEach(function(s) {
total += s.price;
govTotal += s.govfee;
html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">';
html += '<span style="font-size:13px;color:#334155">' + s.name + '</span>';
html += '<span style="font-size:13px;font-weight:600;color:#1e293b">' + usd(s.price) + '</span>';
html += '</div>';
if (s.govfee > 0) {
html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding-left:12px">';
html += '<span style="font-size:12px;color:#94a3b8">Government fee (FMCSA)</span>';
html += '<span style="font-size:12px;color:#94a3b8">' + usd(s.govfee) + '</span>';
html += '</div>';
}
});
var grand = total + govTotal;
html += '<div style="border-top:2px solid #e2e8f0;margin-top:8px;padding-top:10px;display:flex;justify-content:space-between;align-items:center">';
html += '<span style="font-size:16px;font-weight:800;color:#1a2744">Total</span>';
html += '<span style="font-size:20px;font-weight:800;color:#1a2744">' + usd(grand) + '</span>';
html += '</div>';
if (wiz.useBundle) {
html += '<div style="font-size:12px;color:#15803d;text-align:right;margin-top:4px;font-weight:600">Bundle savings applied!</div>';
}
document.getElementById("svc-total-rows").innerHTML = html;
}
// ───── Step 3: Checkout ─────
function renderStep3() {
var svcs = getSelectedServices();
var html = "";
var total = 0;
var govTotal = 0;
svcs.forEach(function(s) {
total += s.price;
govTotal += s.govfee;
html += '<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px">';
html += '<span style="color:#475569">' + s.name + '</span>';
html += '<span style="font-weight:600;color:#1e293b">' + usd(s.price) + '</span>';
html += '</div>';
if (s.govfee > 0) {
html += '<div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;padding-left:12px">';
html += '<span style="color:#94a3b8">Gov fee</span><span style="color:#94a3b8">' + usd(s.govfee) + '</span>';
html += '</div>';
}
});
html += '<div style="border-top:1px solid #e2e8f0;margin-top:8px;padding-top:8px;display:flex;justify-content:space-between">';
html += '<span style="font-weight:700;color:#1a2744">Total</span>';
html += '<span style="font-size:18px;font-weight:800;color:#1a2744">' + usd(total + govTotal) + '</span>';
html += '</div>';
document.getElementById("checkout-summary").innerHTML = html;
}
// ───── Progress bar ─────
function updateProgress(step) {
for (var i = 0; i <= 3; i++) {
var dot = document.querySelector('.prog-dot[data-step="' + i + '"]');
var label = document.querySelector('.prog-label[data-step="' + i + '"]');
dot.classList.remove("active", "done");
label.classList.remove("active", "done");
if (i < step) { dot.classList.add("done"); dot.innerHTML = '<svg style="width:14px;height:14px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>'; label.classList.add("done"); }
else if (i === step) { dot.classList.add("active"); dot.textContent = (i + 1); label.classList.add("active"); }
else { dot.textContent = (i + 1); }
}
for (var j = 0; j <= 2; j++) {
var line = document.querySelector('.prog-line[data-line="' + j + '"]');
line.classList.toggle("done", j < step);
}
}
// ───── Navigation ─────
var currentStep = 0;
function goToStep(step) {
document.querySelectorAll(".wiz-step").forEach(function(el) { el.classList.remove("active"); });
document.getElementById("step-" + step).classList.add("active");
currentStep = step;
updateProgress(step);
window.scrollTo({ top: 200, behavior: "smooth" });
if (step === 2) renderStep2();
if (step === 3) renderStep3();
}
document.getElementById("step0-next").addEventListener("click", function() {
collectOperatingStates();
goToStep(1);
});
document.getElementById("step1-back").addEventListener("click", function() { goToStep(0); });
document.getElementById("step1-next").addEventListener("click", function() { goToStep(2); });
document.getElementById("step2-back").addEventListener("click", function() { goToStep(1); });
document.getElementById("step2-next").addEventListener("click", function() { goToStep(3); });
document.getElementById("step3-back").addEventListener("click", function() { goToStep(2); });
// ───── Pre-fill from URL params ─────
var emailFromUrl = params.get("email") || "";
var promoFromUrl = params.get("code") || params.get("promo") || "";
if (emailFromUrl) { document.getElementById("pw-email").value = emailFromUrl; }
if (promoFromUrl) { var p = document.getElementById("pw-promo"); p.value = promoFromUrl.toUpperCase(); p.readOnly = true; p.style.background = "#fff7ed"; p.style.borderColor = "#f97316"; }
// ───── Discount code logic ─────
var activeDiscount = null;
function fetchDiscount() {
var code = (document.getElementById("pw-promo").value || "").trim().toUpperCase();
if (!code) { activeDiscount = null; renderStep3(); return; }
fetch(API + "/api/v1/discount/" + encodeURIComponent(code))
.then(function(r) { return r.json(); })
.then(function(d) { activeDiscount = d.valid ? d : null; renderStep3(); })
.catch(function() { activeDiscount = null; renderStep3(); });
}
var promoField = document.getElementById("pw-promo");
if (promoField.value.trim()) setTimeout(fetchDiscount, 300);
promoField.addEventListener("blur", fetchDiscount);
promoField.addEventListener("input", function() {
clearTimeout(promoField._debounce);
promoField._debounce = setTimeout(fetchDiscount, 600);
});
// ───── Submit ─────
document.getElementById("pw-batch-form").addEventListener("submit", function(e) {
e.preventDefault();
if (!document.getElementById("pw-engage").checked) { alert("Please accept the authorization terms."); return; }
var svcs = getSelectedServices();
var slugs = svcs.map(function(s) { return s.slug; });
if (slugs.length === 0) { alert("No services selected."); return; }
var btn = document.getElementById("pw-submit");
btn.disabled = true; btn.textContent = "Creating order...";
var errEl = document.getElementById("pw-err");
errEl.style.display = "none";
var dotVal = (document.getElementById("pw-dot").value || "").trim();
var body = {
services: slugs,
customer_name: document.getElementById("pw-name").value.trim(),
customer_email: document.getElementById("pw-email").value.trim(),
customer_phone: document.getElementById("pw-phone").value.trim() || undefined,
discount_code: document.getElementById("pw-promo").value.trim() || undefined,
intake_data: {
dot_number: dotVal || undefined,
source: "trucking-new-carrier",
is_new_carrier: true,
fleet_profile: {
power_units: wiz.units,
vehicle_type: wiz.vehicles,
cargo_types: wiz.cargo,
interstate: wiz.interstate,
international: wiz.international,
base_state: wiz.baseState,
operating_states: wiz.operatingStates,
carrier_type: wiz.carrierType
},
entity: {
has_existing: wiz.hasEntity === "yes",
strategy: wiz.entityStrategy,
entity_type: wiz.entityType,
entity_name: wiz.entityName,
formation_state: wiz.entityState
}
},
engagement_accepted: true
};
fetch(API + "/api/v1/compliance-orders/batch", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) })
.then(function(r) { return r.json().then(function(d) { if (!r.ok) throw new Error(d.error || "Order failed"); return d; }); })
.then(function(d) {
var payMethod = document.querySelector("input[name=pw_pay]:checked").value;
return fetch(API + "/api/v1/checkout/create-session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ order_id: d.batch_id, order_type: "compliance_batch", payment_method: payMethod }) });
})
.then(function(r) { return r.json(); })
.then(function(d) {
if (d.checkout_url) window.location.href = d.checkout_url;
else throw new Error("No checkout URL returned");
})
.catch(function(err) {
errEl.textContent = err.message;
errEl.style.display = "block";
btn.disabled = false;
btn.textContent = "Continue to Secure Payment \u2192";
});
});
</script>
<!-- Tawk.to Live Chat --><script>var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();(function(){var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];s1.async=true;s1.src="https://embed.tawk.to/69d5a9ca0d1c3f1c37998081/1jll9ufph";s1.charset="UTF-8";s1.setAttribute("crossorigin","*");s0.parentNode.insertBefore(s1,s0);})();</script>
<script defer src="/js/pw-cookie-consent.js"></script><!-- Floating help button --><button type="button" id="support-fab" aria-label="Open support" class="fixed bottom-6 left-6 z-[9999] w-14 h-14 rounded-full bg-pw-700 text-white shadow-lg hover:bg-pw-800 transition-all hover:scale-105 flex items-center justify-center"> <svg id="support-fab-icon-open" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <svg id="support-fab-icon-close" class="w-6 h-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Slide-out panel --> <div id="support-panel" class="fixed bottom-24 left-6 z-[9998] w-[380px] max-w-[calc(100vw-2rem)] bg-white rounded-xl shadow-2xl border border-gray-200 transform translate-y-4 opacity-0 pointer-events-none transition-all duration-200 ease-out"> <div class="px-5 py-4 border-b border-gray-100 bg-gray-50 rounded-t-xl"> <h3 class="text-base font-semibold text-gray-900">How can we help?</h3> <p class="text-xs text-gray-500 mt-0.5">Choose a category and tell us what you need.</p> </div> <!-- Category selector (step 1) --> <div id="support-step-categories" class="p-4 space-y-2"> <button type="button" data-category="question" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Ask a Question</span> <span class="block text-xs text-gray-500">About our compliance services or process</span> </div> </div> </button> <button type="button" data-category="support" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Get Support</span> <span class="block text-xs text-gray-500">Help with an ongoing engagement</span> </div> </div> </button> <button type="button" data-category="issue" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Report an Issue</span> <span class="block text-xs text-gray-500">Something isn't right with a deliverable</span> </div> </div> </button> <button type="button" data-category="service_request" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Request a Service</span> <span class="block text-xs text-gray-500">Start a new compliance engagement</span> </div> </div> </button> <button type="button" data-category="quote" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Request a Quote</span> <span class="block text-xs text-gray-500">Get pricing for a complex engagement</span> </div> </div> </button> <!-- Sign-in link (hidden when logged in) --> <div id="support-signin-link" class="pt-2 border-t border-gray-100 mt-2"> <button type="button" id="support-signin-btn" class="w-full flex items-center justify-center gap-2 px-4 py-2 text-xs text-gray-500 hover:text-pw-700 transition-colors"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Already a client? <span class="font-medium text-pw-600">Sign in</span> </button> </div> </div> <!-- Ticket form — Report an Issue + guest fallback (step 2a) --> <form id="support-step-form" class="hidden p-4"> <button type="button" id="support-back-btn" class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-3"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg>
Back
</button> <div id="support-category-badge" class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-pw-100 text-pw-700 mb-3"></div> <div class="space-y-3"> <div> <label for="support-name" class="block text-xs font-medium text-gray-700 mb-1">Name <span class="text-gray-400">(optional)</span></label> <input type="text" id="support-name" name="name" placeholder="Your name" maxlength="100" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="support-email" class="block text-xs font-medium text-gray-700 mb-1">Email <span class="text-gray-400">(for follow-up)</span></label> <input type="email" id="support-email" name="email" placeholder="you@company.com" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="support-subject" class="block text-xs font-medium text-gray-700 mb-1">Subject <span class="text-red-400">*</span></label> <input type="text" id="support-subject" name="subject" required minlength="3" maxlength="200" placeholder="Brief summary" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="support-message" class="block text-xs font-medium text-gray-700 mb-1">Message <span class="text-red-400">*</span></label> <textarea id="support-message" name="message" required minlength="10" maxlength="5000" rows="4" placeholder="Describe your question, issue, or request..." class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow resize-y"></textarea> <p class="text-[10px] text-gray-400 mt-0.5 text-right"><span id="support-char-count">0</span> / 5000</p> </div> <button type="submit" id="support-submit-btn" class="w-full py-2.5 px-4 bg-pw-700 text-white text-sm font-medium rounded-lg hover:bg-pw-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
Submit
</button> </div> </form> <!-- Opportunity form — Request a Service / Request a Quote (step 2b) --> <form id="support-step-opportunity" class="hidden p-4"> <button type="button" id="opportunity-back-btn" class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-3"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg>
Back
</button> <div id="opportunity-category-badge" class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-pw-100 text-pw-700 mb-3"></div> <div class="space-y-3"> <div> <label for="opp-name" class="block text-xs font-medium text-gray-700 mb-1">Name <span class="text-red-400">*</span></label> <input type="text" id="opp-name" name="name" required minlength="2" maxlength="100" placeholder="Your name" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-email" class="block text-xs font-medium text-gray-700 mb-1">Email <span class="text-red-400">*</span></label> <input type="email" id="opp-email" name="email" required placeholder="you@company.com" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-company" class="block text-xs font-medium text-gray-700 mb-1">Company <span class="text-gray-400">(optional)</span></label> <input type="text" id="opp-company" name="company" placeholder="Company name" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-phone" class="block text-xs font-medium text-gray-700 mb-1">Phone <span class="text-gray-400">(optional)</span></label> <input type="tel" id="opp-phone" name="phone" placeholder="(555) 555-1234" maxlength="30" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-service" class="block text-xs font-medium text-gray-700 mb-1">Service interest <span class="text-red-400">*</span></label> <select id="opp-service" name="service_slug" required class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow bg-white"> <option value="" disabled selected>Select a service...</option> <option value="canada-crtc">Canada CRTC Carrier Package</option> <option value="llc-formation">LLC Formation</option> <option value="corporation-formation">Corporation Formation</option> <option value="registered-agent">Registered Agent</option> <option value="compliance-audit">Compliance Audit</option> <option value="other">Other / Not sure</option> </select> </div> <div> <label for="opp-details" class="block text-xs font-medium text-gray-700 mb-1">Details <span class="text-gray-400">(optional)</span></label> <textarea id="opp-details" name="details" maxlength="5000" rows="3" placeholder="Tell us about your project or what you need..." class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow resize-y"></textarea> </div> <button type="submit" id="opp-submit-btn" class="w-full py-2.5 px-4 bg-pw-700 text-white text-sm font-medium rounded-lg hover:bg-pw-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
Submit Request
</button> </div> </form> <!-- Sign-in prompt — Ask a Question / Get Support when not logged in (step 2c) --> <div id="support-step-signin" class="hidden p-6"> <button type="button" id="signin-back-btn" class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-4"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg>
Back
</button> <div class="text-center"> <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-blue-100 flex items-center justify-center"> <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg> </div> <h4 class="text-sm font-semibold text-gray-900 mb-1">Sign in for support</h4> <p class="text-xs text-gray-500 mb-5">Sign in to access your client portal where you can view your orders, submit support requests, and manage your services.</p> <button type="button" id="signin-auth-btn" class="w-full py-2.5 px-4 bg-pw-700 text-white text-sm font-medium rounded-lg hover:bg-pw-800 transition-colors mb-3">
Sign In
</button> <button type="button" id="signin-guest-btn" class="text-xs text-gray-500 hover:text-gray-700 transition-colors">
Continue as guest &rarr;
</button> </div> </div> <!-- Success state (step 3) --> <div id="support-step-success" class="hidden p-6 text-center"> <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-green-100 flex items-center justify-center"> <svg class="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg> </div> <h4 class="text-sm font-semibold text-gray-900 mb-1">Request received</h4> <p id="support-success-message" class="text-xs text-gray-500 mb-4">We'll get back to you within one business day.</p> <p id="support-ticket-id" class="text-xs text-gray-400 mb-4 hidden">Ref: <span></span></p> <button type="button" id="support-new-ticket-btn" class="text-xs text-pw-600 hover:text-pw-700 font-medium">Submit another request</button> </div> </div> <!-- Modal backdrop --><div id="auth-modal-backdrop" class="fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm hidden items-center justify-center p-4" role="dialog" aria-modal="true" aria-labelledby="auth-modal-title"> <div id="auth-modal" class="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden"> <!-- Close --> <button id="auth-modal-close" type="button" aria-label="Close" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors z-10"> <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Tab bar --> <div id="auth-tabs" class="flex border-b border-gray-100"> <button type="button" id="auth-tab-login" class="auth-tab flex-1 py-4 text-sm font-semibold text-pw-700 border-b-2 border-pw-600 transition-colors">
Sign In
</button> <button type="button" id="auth-tab-register" class="auth-tab flex-1 py-4 text-sm font-semibold text-gray-400 border-b-2 border-transparent hover:text-gray-600 transition-colors">
Create Account
</button> </div> <div class="px-6 py-6"> <!-- ── Login form ──────────────────────────────────────────────────── --> <form id="auth-login-form" class="space-y-4" novalidate> <div> <label for="auth-login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" id="auth-login-email" autocomplete="email" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="you@company.com"> </div> <div> <div class="flex items-center justify-between mb-1"> <label for="auth-login-password" class="text-sm font-medium text-gray-700">Password</label> <button type="button" id="auth-forgot-link" class="text-xs text-pw-600 hover:text-pw-800 underline underline-offset-2">
Forgot password?
</button> </div> <input type="password" id="auth-login-password" autocomplete="current-password" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="••••••••"> </div> <p id="auth-login-err" class="hidden text-xs text-red-600 font-medium"></p> <button type="submit" id="auth-login-btn" class="w-full py-2.5 rounded-lg bg-pw-700 text-white text-sm font-semibold hover:bg-pw-800 transition-colors disabled:opacity-50">
Sign In
</button> </form> <!-- ── Register form ──────────────────────────────────────────────── --> <form id="auth-register-form" class="space-y-4 hidden" novalidate> <div> <label for="auth-reg-name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label> <input type="text" id="auth-reg-name" autocomplete="name" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Full name"> </div> <div> <label for="auth-reg-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" id="auth-reg-email" autocomplete="email" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="you@company.com"> </div> <div> <label for="auth-reg-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> <input type="password" id="auth-reg-password" autocomplete="new-password" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="At least 8 characters"> </div> <p id="auth-reg-err" class="hidden text-xs text-red-600 font-medium"></p> <button type="submit" id="auth-reg-btn" class="w-full py-2.5 rounded-lg bg-pw-700 text-white text-sm font-semibold hover:bg-pw-800 transition-colors disabled:opacity-50">
Create Account
</button> </form> <!-- ── Forgot password form ────────────────────────────────────────── --> <div id="auth-forgot-form" class="hidden"> <button type="button" id="auth-back-to-login" class="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-4"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path></svg>
Back to sign in
</button> <h3 class="text-base font-semibold text-gray-900 mb-1">Reset your password</h3> <p class="text-sm text-gray-500 mb-4">Enter your email and we'll send you a reset link.</p> <form id="auth-forgot-email-form" class="space-y-4" novalidate> <div> <label for="auth-forgot-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" id="auth-forgot-email" autocomplete="email" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="you@company.com"> </div> <p id="auth-forgot-err" class="hidden text-xs text-red-600 font-medium"></p> <p id="auth-forgot-ok" class="hidden text-xs text-green-700 font-medium"></p> <button type="submit" id="auth-forgot-btn" class="w-full py-2.5 rounded-lg bg-pw-700 text-white text-sm font-semibold hover:bg-pw-800 transition-colors disabled:opacity-50">
Send reset link
</button> </form> </div> </div> </div> </div>
</body>
</html>
Reference in a new issue View git blame Copy permalink