{"id":7,"date":"2026-04-18T23:00:20","date_gmt":"2026-04-18T23:00:20","guid":{"rendered":"https:\/\/roamthewild.app\/?page_id=7"},"modified":"2026-04-18T23:00:46","modified_gmt":"2026-04-18T23:00:46","slug":"coming-soon-lander","status":"publish","type":"page","link":"https:\/\/roamthewild.app\/","title":{"rendered":"Coming Soon Lander"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nRoam \u2014 Van life trip planner<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --cyan: #00FFEF;\n --cyan-dim: #00D4C5;\n --cyan-tint: rgba(0,255,239,0.07);\n --ink: #0A0A0A;\n --ink-2: rgba(10,10,10,0.65);\n --ink-3: rgba(10,10,10,0.45);\n --white: #FFFFFF;\n --paper: #F5F5F0;\n --paper-warm: #EDEAE0;\n --rule: rgba(10,10,10,0.1);\n --rule-light: rgba(255,255,255,0.1);\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Inter', sans-serif;\n background: var(--paper-warm);\n color: var(--ink);\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 UTILS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .mono {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n }\n .serif-italic {\n font-family: 'Instrument Serif', serif;\n font-style: italic;\n font-weight: 400;\n }\n .tag {\n display: inline-block;\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n font-weight: 500;\n opacity: 0.55;\n margin-bottom: 18px;\n }\n\n \/* \u2500\u2500 HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hero {\n background: var(--ink);\n min-height: 100svh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 80px 6vw 60px;\n position: relative;\n overflow: hidden;\n }\n .hero::before {\n content: '';\n position: absolute;\n top: -180px; right: -120px;\n width: 560px; height: 560px;\n background: radial-gradient(circle, rgba(0,255,239,0.06) 0%, transparent 70%);\n pointer-events: none;\n }\n .hero::after {\n content: '';\n position: absolute;\n bottom: -100px; left: -80px;\n width: 400px; height: 400px;\n background: radial-gradient(circle, rgba(0,255,239,0.04) 0%, transparent 70%);\n pointer-events: none;\n }\n .hero .tag { color: var(--cyan); opacity: 0.7; }\n .hero h1 {\n font-size: clamp(44px, 7vw, 88px);\n font-weight: 700;\n line-height: 1;\n letter-spacing: -0.04em;\n color: var(--white);\n max-width: 760px;\n margin-bottom: 24px;\n }\n .hero h1 em {\n font-family: 'Instrument Serif', serif;\n font-style: italic;\n font-weight: 400;\n color: var(--cyan);\n letter-spacing: -0.02em;\n }\n .hero p.sub {\n font-size: clamp(15px, 2vw, 18px);\n color: rgba(255,255,255,0.6);\n max-width: 480px;\n line-height: 1.6;\n margin-bottom: 40px;\n }\n .hero-form {\n display: flex;\n gap: 10px;\n max-width: 460px;\n flex-wrap: wrap;\n }\n .hero-form input[type=\"email\"] {\n flex: 1;\n min-width: 200px;\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.15);\n border-radius: 12px;\n padding: 14px 18px;\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n color: var(--white);\n outline: none;\n transition: border-color 0.2s;\n }\n .hero-form input[type=\"email\"]::placeholder { color: rgba(255,255,255,0.3); }\n .hero-form input[type=\"email\"]:focus { border-color: var(--cyan); }\n .btn-cyan {\n background: var(--cyan);\n color: var(--ink);\n border: none;\n border-radius: 12px;\n padding: 14px 24px;\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n white-space: nowrap;\n transition: background 0.15s, transform 0.1s;\n }\n .btn-cyan:hover { background: var(--cyan-dim); transform: translateY(-1px); }\n .hero-note {\n margin-top: 14px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.12em;\n color: rgba(255,255,255,0.25);\n }\n .hero-scroll {\n position: absolute;\n bottom: 32px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n opacity: 0.3;\n animation: bounce 2s ease-in-out infinite;\n }\n .hero-scroll span { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; color: #fff; }\n @keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }\n\n \/* \u2500\u2500 STATS BAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .stats-bar {\n background: var(--paper);\n border-bottom: 1px solid var(--rule);\n padding: 0 6vw;\n display: flex;\n gap: 0;\n overflow-x: auto;\n scrollbar-width: none;\n }\n .stats-bar::-webkit-scrollbar { display: none; }\n .stat-item {\n flex: 1;\n min-width: 140px;\n padding: 28px 24px;\n border-right: 1px solid var(--rule);\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n .stat-item:last-child { border-right: none; }\n .stat-num {\n font-size: 36px;\n font-weight: 200;\n letter-spacing: -0.04em;\n color: var(--ink);\n line-height: 1;\n }\n .stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); opacity: 0.4; }\n\n \/* \u2500\u2500 FEATURES INTRO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .section {\n padding: 96px 6vw;\n }\n .section-inner {\n max-width: 1120px;\n margin: 0 auto;\n }\n .section-head {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 56px;\n }\n .section-head h2 {\n font-size: clamp(32px, 4vw, 52px);\n font-weight: 700;\n letter-spacing: -0.04em;\n line-height: 1.05;\n color: var(--ink);\n }\n .section-head h2 em {\n font-family: 'Instrument Serif', serif;\n font-style: italic;\n font-weight: 400;\n color: var(--ink);\n opacity: 0.6;\n }\n .section-head p {\n font-size: 16px;\n color: var(--ink-2);\n max-width: 520px;\n line-height: 1.65;\n }\n\n \/* \u2500\u2500 FEATURE GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .feat-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n }\n .feat-card {\n background: var(--paper);\n border: 1px solid var(--rule);\n border-radius: 20px;\n padding: 32px 28px;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n .feat-card:hover {\n border-color: rgba(10,10,10,0.2);\n box-shadow: 0 8px 32px rgba(10,10,10,0.06);\n }\n .feat-icon {\n width: 44px; height: 44px;\n background: var(--ink);\n border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n font-size: 20px;\n margin-bottom: 20px;\n }\n .feat-card h3 {\n font-size: 17px;\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--ink);\n margin-bottom: 8px;\n }\n .feat-card p {\n font-size: 14px;\n color: var(--ink-2);\n line-height: 1.6;\n }\n .feat-card.feat-span {\n grid-column: span 2;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n align-items: center;\n background: var(--ink);\n border-color: var(--ink);\n }\n .feat-card.feat-span h3 { color: var(--white); }\n .feat-card.feat-span p { color: rgba(255,255,255,0.55); }\n .feat-span-preview {\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 14px;\n padding: 20px;\n }\n .route-row {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 0;\n border-bottom: 1px solid rgba(255,255,255,0.07);\n }\n .route-row:last-child { border-bottom: none; }\n .route-dot {\n width: 28px; height: 28px;\n border-radius: 50%;\n background: var(--cyan);\n display: flex; align-items: center; justify-content: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n font-weight: 500;\n color: var(--ink);\n flex-shrink: 0;\n }\n .route-dot.grey { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); }\n .route-info { flex: 1; }\n .route-info .rname { font-size: 13px; font-weight: 500; color: #fff; letter-spacing: -0.01em; }\n .route-info .rmeta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 2px; }\n .route-leg {\n padding: 4px 0 4px 38px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.05em;\n color: rgba(0,255,239,0.5);\n }\n\n \/* \u2500\u2500 HOW IT WORKS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .how-section { background: var(--paper); }\n .steps-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 2px;\n background: var(--rule);\n border-radius: 20px;\n overflow: hidden;\n }\n .step {\n background: var(--paper);\n padding: 36px 28px;\n }\n .step-num {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n letter-spacing: 0.15em;\n color: var(--ink);\n opacity: 0.3;\n margin-bottom: 20px;\n }\n .step-icon { font-size: 28px; margin-bottom: 14px; }\n .step h3 {\n font-size: 16px;\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--ink);\n margin-bottom: 8px;\n }\n .step p { font-size: 13px; color: var(--ink-2); line-height: 1.6; }\n\n \/* \u2500\u2500 FEATURE SHOWCASE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .showcase-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n .showcase-card {\n background: var(--paper);\n border: 1px solid var(--rule);\n border-radius: 20px;\n padding: 36px 32px;\n transition: border-color 0.2s;\n }\n .showcase-card:hover { border-color: rgba(10,10,10,0.18); }\n .showcase-tag {\n font-family: 'JetBrains Mono', monospace;\n font-size: 9px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--cyan-dim);\n font-weight: 500;\n margin-bottom: 16px;\n }\n .showcase-card h3 {\n font-size: 22px;\n font-weight: 700;\n letter-spacing: -0.03em;\n color: var(--ink);\n margin-bottom: 10px;\n line-height: 1.15;\n }\n .showcase-card p {\n font-size: 14px;\n color: var(--ink-2);\n line-height: 1.65;\n margin-bottom: 24px;\n }\n .feature-pills {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n }\n .pill {\n background: var(--paper-warm);\n border: 1px solid var(--rule);\n border-radius: 100px;\n padding: 5px 12px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.08em;\n color: var(--ink-2);\n }\n\n \/* \u2500\u2500 COMMUNITY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .community-section { background: var(--ink); }\n .community-section .section-head h2 { color: var(--white); }\n .community-section .section-head h2 em { color: var(--cyan); opacity: 1; }\n .community-section .section-head p { color: rgba(255,255,255,0.5); }\n .community-section .tag { color: rgba(0,255,239,0.6); }\n .community-grid {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 12px;\n }\n .community-card {\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 20px;\n padding: 28px;\n transition: border-color 0.2s;\n }\n .community-card:hover { border-color: rgba(255,255,255,0.16); }\n .community-card .icon { font-size: 28px; margin-bottom: 16px; }\n .community-card h3 { font-size: 16px; font-weight: 600; color: var(--white); letter-spacing: -0.02em; margin-bottom: 8px; }\n .community-card p { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.6; }\n\n \/* \u2500\u2500 PRICING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .pricing-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n max-width: 720px;\n margin: 0 auto;\n }\n .plan-card {\n background: var(--paper);\n border: 1px solid var(--rule);\n border-radius: 20px;\n padding: 36px 32px;\n }\n .plan-card.plan-pro {\n background: var(--ink);\n border-color: var(--ink);\n }\n .plan-badge {\n display: inline-block;\n font-family: 'JetBrains Mono', monospace;\n font-size: 9px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n padding: 4px 10px;\n border-radius: 100px;\n margin-bottom: 20px;\n }\n .plan-free .plan-badge { background: var(--paper-warm); color: var(--ink-2); border: 1px solid var(--rule); }\n .plan-pro .plan-badge { background: var(--cyan); color: var(--ink); }\n .plan-price {\n font-size: 44px;\n font-weight: 700;\n letter-spacing: -0.04em;\n line-height: 1;\n margin-bottom: 6px;\n }\n .plan-free .plan-price { color: var(--ink); }\n .plan-pro .plan-price { color: var(--white); }\n .plan-cadence {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.1em;\n margin-bottom: 28px;\n }\n .plan-free .plan-cadence { color: var(--ink-3); }\n .plan-pro .plan-cadence { color: rgba(255,255,255,0.35); }\n .plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }\n .plan-features li {\n font-size: 13px;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n line-height: 1.4;\n }\n .plan-free .plan-features li { color: var(--ink-2); }\n .plan-pro .plan-features li { color: rgba(255,255,255,0.65); }\n .plan-features li::before {\n content: '\u2014';\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n flex-shrink: 0;\n margin-top: 1px;\n }\n .plan-free .plan-features li::before { color: var(--ink-3); }\n .plan-pro .plan-features li::before { color: var(--cyan); }\n .plan-cta {\n margin-top: 32px;\n width: 100%;\n padding: 14px;\n border-radius: 12px;\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n border: none;\n transition: all 0.15s;\n }\n .plan-free .plan-cta {\n background: var(--paper-warm);\n color: var(--ink);\n border: 1px solid rgba(10,10,10,0.15);\n }\n .plan-free .plan-cta:hover { border-color: var(--ink); }\n .plan-pro .plan-cta { background: var(--cyan); color: var(--ink); }\n .plan-pro .plan-cta:hover { background: var(--cyan-dim); }\n\n \/* \u2500\u2500 ENQUIRY FORM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .form-section { background: var(--paper-warm); }\n .form-wrap {\n max-width: 640px;\n margin: 0 auto;\n background: var(--paper);\n border: 1px solid var(--rule);\n border-radius: 24px;\n padding: 48px 48px 44px;\n }\n .form-title {\n font-size: clamp(28px, 4vw, 40px);\n font-weight: 700;\n letter-spacing: -0.04em;\n color: var(--ink);\n margin-bottom: 8px;\n line-height: 1.1;\n }\n .form-title em {\n font-family: 'Instrument Serif', serif;\n font-style: italic;\n font-weight: 400;\n color: var(--ink);\n opacity: 0.5;\n }\n .form-sub {\n font-size: 14px;\n color: var(--ink-2);\n margin-bottom: 36px;\n line-height: 1.5;\n }\n .form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n margin-bottom: 14px;\n }\n .form-field { display: flex; flex-direction: column; gap: 7px; }\n .form-field.full { grid-column: span 2; }\n .form-field label {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--ink);\n opacity: 0.5;\n font-weight: 500;\n }\n .form-field input,\n .form-field select,\n .form-field textarea {\n background: var(--paper-warm);\n border: 1px solid rgba(10,10,10,0.12);\n border-radius: 12px;\n padding: 13px 16px;\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n color: var(--ink);\n outline: none;\n transition: border-color 0.2s;\n width: 100%;\n }\n .form-field select { cursor: pointer; appearance: none; background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }\n .form-field input:focus,\n .form-field select:focus,\n .form-field textarea:focus { border-color: var(--ink); }\n .form-field input::placeholder,\n .form-field textarea::placeholder { color: rgba(10,10,10,0.3); }\n .form-field textarea { resize: none; }\n .form-submit {\n margin-top: 24px;\n width: 100%;\n background: var(--ink);\n color: var(--cyan);\n border: none;\n border-radius: 14px;\n padding: 16px;\n font-family: 'Inter', sans-serif;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n letter-spacing: -0.01em;\n transition: all 0.15s;\n }\n .form-submit:hover { background: #1a1a1a; transform: translateY(-1px); }\n .form-legal {\n margin-top: 14px;\n text-align: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 9px;\n letter-spacing: 0.12em;\n color: var(--ink);\n opacity: 0.3;\n }\n \/* Success state *\/\n .form-success {\n display: none;\n text-align: center;\n padding: 48px 0;\n }\n .form-success .icon { font-size: 48px; margin-bottom: 20px; }\n .form-success h3 {\n font-size: 24px;\n font-weight: 700;\n letter-spacing: -0.03em;\n color: var(--ink);\n margin-bottom: 10px;\n }\n .form-success p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }\n\n \/* \u2500\u2500 FOOTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n footer {\n background: var(--ink);\n padding: 40px 6vw;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 16px;\n }\n .footer-brand {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .footer-icon {\n width: 32px; height: 32px;\n background: var(--cyan);\n border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n }\n .footer-name {\n font-size: 15px;\n font-weight: 600;\n color: var(--white);\n letter-spacing: -0.03em;\n }\n .footer-copy {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.25);\n }\n .footer-tagline {\n font-family: 'Instrument Serif', serif;\n font-style: italic;\n font-size: 14px;\n color: rgba(255,255,255,0.35);\n }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n @media (max-width: 900px) {\n .feat-grid { grid-template-columns: 1fr 1fr; }\n .feat-card.feat-span { grid-column: span 2; grid-template-columns: 1fr; }\n .steps-grid { grid-template-columns: 1fr 1fr; }\n .showcase-grid { grid-template-columns: 1fr; }\n .community-grid { grid-template-columns: 1fr 1fr; }\n }\n @media (max-width: 620px) {\n .section { padding: 72px 5vw; }\n .feat-grid { grid-template-columns: 1fr; }\n .feat-card.feat-span { grid-column: span 1; }\n .steps-grid { grid-template-columns: 1fr; border-radius: 16px; }\n .community-grid { grid-template-columns: 1fr; }\n .pricing-grid { grid-template-columns: 1fr; max-width: 100%; }\n .form-wrap { padding: 32px 24px 28px; }\n .form-grid { grid-template-columns: 1fr; }\n .form-field.full { grid-column: span 1; }\n .stats-bar { display: grid; grid-template-columns: 1fr 1fr; }\n .stat-item { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }\n footer { flex-direction: column; align-items: flex-start; gap: 12px; }\n }\n<\/style>\n<\/head>\n<body>\n\n<!-- \u2500\u2500 HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<section class=\"hero\">\n <span class=\"tag\">Van life \u00b7 reimagined<\/span>\n <h1>Plan the road.<br><em>Own the journey.<\/em><\/h1>\n <p class=\"sub\">Real road routing, live fuel costs, campsite booking, and weather at every stop \u2014 built for campervans, motorhomes, and vans.<\/p>\n <form class=\"hero-form\" onsubmit=\"heroSubmit(event)\">\n <input type=\"email\" id=\"heroEmail\" placeholder=\"your@email.com\" required \/>\n <button type=\"submit\" class=\"btn-cyan\">Join the waitlist<\/button>\n <\/form>\n <p class=\"hero-note\">Free to start \u00b7 No card required \u00b7 Launching 2026<\/p>\n <div class=\"hero-scroll\">\n <span>scroll<\/span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\"\/><\/svg>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500 STATS BAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<div class=\"stats-bar\">\n <div class=\"stat-item\">\n <span class=\"stat-num\">40+<\/span>\n <span class=\"stat-label\">Vehicles in DB<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-num\">Free<\/span>\n <span class=\"stat-label\">To get started<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-num\">0<\/span>\n <span class=\"stat-label\">API keys needed<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-num\">Live<\/span>\n <span class=\"stat-label\">Road routing<\/span>\n <\/div>\n<\/div>\n\n<!-- \u2500\u2500 FEATURES INTRO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<section class=\"section\" style=\"background: var(--paper-warm);\">\n <div class=\"section-inner\">\n <div class=\"section-head\">\n <span class=\"tag\">What it does<\/span>\n <h2>Everything the road<br><em>actually needs.<\/em><\/h2>\n <p>Not another Google Maps fork. Roam is built from the ground up for the van life community \u2014 with the tools you need before and during the trip.<\/p>\n <\/div>\n\n <div class=\"feat-grid\">\n <div class=\"feat-card\">\n <div class=\"feat-icon\">\ud83d\udee3\ufe0f<\/div>\n <h3>Real road routing<\/h3>\n <p>Actual driving distances and times via OSRM open-source routing. See your exact route on the map \u2014 not just straight lines.<\/p>\n <\/div>\n <div class=\"feat-card\">\n <div class=\"feat-icon\">\u26fd<\/div>\n <h3>Fuel cost calculator<\/h3>\n <p>Select your vehicle from 40+ campervans and motorhomes with real-world UK MPG figures, or enter your own. Live fuel prices included.<\/p>\n <\/div>\n <div class=\"feat-card\">\n <div class=\"feat-icon\">\ud83c\udf24<\/div>\n <h3>Weather at every stop<\/h3>\n <p>7-day forecast for each stop on your route via OpenMeteo. Check before you drive, not when you arrive.<\/p>\n <\/div>\n\n <!-- Big span card with mock route preview -->\n <div class=\"feat-card feat-span\">\n <div>\n <div class=\"feat-icon\" style=\"background: var(--cyan);\">\ud83d\udccd<\/div>\n <h3>Build your route, stop by stop<\/h3>\n <p>Add campsites, POIs, service stops, and custom waypoints. Drag to reorder. See drive time, distance, and fuel between every leg.<\/p>\n <\/div>\n <div class=\"feat-span-preview\">\n <div class=\"route-row\">\n <div class=\"route-dot\">1<\/div>\n <div class=\"route-info\">\n <div class=\"rname\">Fort William<\/div>\n <div class=\"rmeta\">\u26fa Campsite \u00b7 Night 1<\/div>\n <\/div>\n <\/div>\n <div class=\"route-leg\">\ud83d\udee3 47 mi \u00b7 \u23f1 58m \u00b7 \u26fd ~\u00a36.80<\/div>\n <div class=\"route-row\">\n <div class=\"route-dot grey\">2<\/div>\n <div class=\"route-info\">\n <div class=\"rname\">Glencoe Village<\/div>\n <div class=\"rmeta\">\ud83d\udccd POI \u00b7 2h stop<\/div>\n <\/div>\n <\/div>\n <div class=\"route-leg\">\ud83d\udee3 32 mi \u00b7 \u23f1 41m \u00b7 \u26fd ~\u00a34.60<\/div>\n <div class=\"route-row\">\n <div class=\"route-dot grey\">3<\/div>\n <div class=\"route-info\">\n <div class=\"rname\">Loch Lomond Shores<\/div>\n <div class=\"rmeta\">\u26fa Campsite \u00b7 Night 2<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"feat-card\">\n <div class=\"feat-icon\">\ud83d\udd0d<\/div>\n <h3>Nearby POIs<\/h3>\n <p>Fuel stations, campsites, parking, garages, supermarkets, and water points \u2014 pulled live from OpenStreetMap for every stop.<\/p>\n <\/div>\n <div class=\"feat-card\">\n <div class=\"feat-icon\">\u26a0\ufe0f<\/div>\n <h3>UK toll warnings<\/h3>\n <p>Automatic detection for M6 Toll, Dartford Crossing, Tyne Tunnel, Humber Bridge, Mersey Gateway, and more \u2014 with typical costs.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500 HOW IT WORKS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<section class=\"section how-section\">\n <div class=\"section-inner\">\n <div class=\"section-head\">\n <span class=\"tag\">How it works<\/span>\n <h2>From blank map to<br><em>full itinerary.<\/em><\/h2>\n <\/div>\n <div class=\"steps-grid\">\n <div class=\"step\">\n <div class=\"step-num\">01<\/div>\n <div class=\"step-icon\">\ud83d\ude90<\/div>\n <h3>Set your vehicle<\/h3>\n <p>Choose from our database of 40+ UK campervans and motorhomes, or enter your own MPG and fuel type for accurate cost estimates.<\/p>\n <\/div>\n <div class=\"step\">\n <div class=\"step-num\">02<\/div>\n <div class=\"step-icon\">\ud83d\uddfa\ufe0f<\/div>\n <h3>Add stops<\/h3>\n <p>Search for real places \u2014 campsites, towns, viewpoints, service stops. They drop straight onto the map with coordinates.<\/p>\n <\/div>\n <div class=\"step\">\n <div class=\"step-num\">03<\/div>\n <div class=\"step-icon\">\ud83d\udcca<\/div>\n <h3>See the full picture<\/h3>\n <p>Instant route on real roads, total distance, drive time, fuel cost for the whole trip and between every individual leg.<\/p>\n <\/div>\n <div class=\"step\">\n <div class=\"step-num\">04<\/div>\n <div class=\"step-icon\">\ud83c\udf0d<\/div>\n <h3>Share or hit the road<\/h3>\n <p>Keep trips private, share with followers, or make them public. Navigate directly to each stop via Google Maps, Apple Maps, or Waze.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500 FEATURE SHOWCASE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<section class=\"section\" style=\"background: var(--paper-warm);\">\n <div class=\"section-inner\">\n <div class=\"section-head\">\n <span class=\"tag\">Built for the road<\/span>\n <h2>The details<br><em>that matter.<\/em><\/h2>\n <\/div>\n <div class=\"showcase-grid\">\n <div class=\"showcase-card\">\n <div class=\"showcase-tag\">Campsite booking<\/div>\n <h3>Find and book campsites without leaving the app<\/h3>\n <p>For every campsite on your route, Roam surfaces direct booking links to Pitchup, Booking.com, Campsites.co.uk, and Google Maps \u2014 so you spend less time searching and more time driving.<\/p>\n <div class=\"feature-pills\">\n <span class=\"pill\">Pitchup<\/span>\n <span class=\"pill\">Booking.com<\/span>\n <span class=\"pill\">Campsites.co.uk<\/span>\n <span class=\"pill\">Google Maps<\/span>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <div class=\"showcase-tag\">Fuel intelligence<\/div>\n <h3>Know exactly what the trip will cost before you leave<\/h3>\n <p>Real-world UK MPG figures for every vehicle in our database. Set your current fuel price and see the cost per leg and the full trip total \u2014 updated instantly as you adjust your route.<\/p>\n <div class=\"feature-pills\">\n <span class=\"pill\">40+ vehicles<\/span>\n <span class=\"pill\">Diesel \u00b7 Petrol \u00b7 EV<\/span>\n <span class=\"pill\">Custom MPG<\/span>\n <span class=\"pill\">Live fuel price<\/span>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <div class=\"showcase-tag\">Weather<\/div>\n <h3>7-day forecast for every stop on your route<\/h3>\n <p>OpenMeteo gives accurate 7-day forecasts free of charge, with no API key required. Temperature, rain probability, wind speed, and precipitation \u2014 shown for your planned arrival date.<\/p>\n <div class=\"feature-pills\">\n <span class=\"pill\">7-day forecast<\/span>\n <span class=\"pill\">Arrival date<\/span>\n <span class=\"pill\">Rain %<\/span>\n <span class=\"pill\">Wind speed<\/span>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <div class=\"showcase-tag\">Navigation<\/div>\n <h3>Navigate to any stop in one tap<\/h3>\n <p>Every stop on your route has a navigation button that opens the location in Google Maps, Apple Maps, Waze, or OpenStreetMap \u2014 whichever you prefer.<\/p>\n <div class=\"feature-pills\">\n <span class=\"pill\">Google Maps<\/span>\n <span class=\"pill\">Apple Maps<\/span>\n <span class=\"pill\">Waze<\/span>\n <span class=\"pill\">OpenStreetMap<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500 COMMUNITY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<section class=\"section community-section\">\n <div class=\"section-inner\">\n <div class=\"section-head\">\n <span class=\"tag\">Community \u00b7 Phase 2<\/span>\n <h2>The van life<br><em>network.<\/em><\/h2>\n <p>Roam is more than a route planner. It's a community layer for people living on the road \u2014 coming in Phase 2.<\/p>\n <\/div>\n <div class=\"community-grid\">\n <div class=\"community-card\">\n <div class=\"icon\">\ud83d\udccd<\/div>\n <h3>Live traveller map<\/h3>\n <p>Drop your pin and see who else is parked nearby tonight. Real-time, opt-in, privacy-first.<\/p>\n <\/div>\n <div class=\"community-card\">\n <div class=\"icon\">\ud83e\udd1d<\/div>\n <h3>Connect with nearby vans<\/h3>\n <p>Set your status \u2014 open to visitors, solo, parked up for the week. Let the community find you.<\/p>\n <\/div>\n <div class=\"community-card\">\n <div class=\"icon\">\ud83c\udf0d<\/div>\n <h3>Share public trips<\/h3>\n <p>Publish your best routes for other travellers to follow. Build a reputation as a trusted guide.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500 PRICING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<section class=\"section\" style=\"background: var(--paper);\">\n <div class=\"section-inner\">\n <div class=\"section-head\" style=\"align-items: center; text-align: center;\">\n <span class=\"tag\">Pricing<\/span>\n <h2>Simple, honest pricing.<\/h2>\n <p style=\"margin: 0 auto;\">Start for free. Upgrade when you need more.<\/p>\n <\/div>\n <div class=\"pricing-grid\">\n <div class=\"plan-card plan-free\">\n <div class=\"plan-badge\">Free forever<\/div>\n <div class=\"plan-price\">\u00a30<\/div>\n <div class=\"plan-cadence\">\/ month \u00b7 no card needed<\/div>\n <ul class=\"plan-features\">\n <li>Up to 3 trips<\/li>\n <li>Full route planning with OSRM routing<\/li>\n <li>Fuel cost calculator<\/li>\n <li>Weather at every stop<\/li>\n <li>Nearby POIs & campsite links<\/li>\n <li>Navigate to any stop<\/li>\n <\/ul>\n <button class=\"plan-cta\" onclick=\"document.getElementById('waitlist').scrollIntoView({behavior:'smooth'})\">\n Join the waitlist\n <\/button>\n <\/div>\n <div class=\"plan-card plan-pro\">\n <div class=\"plan-badge\">Pro<\/div>\n <div class=\"plan-price\">\u00a34.99<\/div>\n <div class=\"plan-cadence\">\/ month \u00b7 or ~\u00a339.99\/year<\/div>\n <ul class=\"plan-features\">\n <li>Everything in Free<\/li>\n <li>Unlimited trips<\/li>\n <li>Offline maps<\/li>\n <li>AI trip planning assistant<\/li>\n <li>Trip sharing & public profiles<\/li>\n <li>Community live map<\/li>\n <li>Priority support<\/li>\n <\/ul>\n <button class=\"plan-cta\" onclick=\"document.getElementById('waitlist').scrollIntoView({behavior:'smooth'})\">\n Get early access\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500 ENQUIRY FORM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<section class=\"section form-section\" id=\"waitlist\">\n <div class=\"section-inner\">\n <div class=\"form-wrap\">\n <div id=\"formContent\">\n <p class=\"tag\" style=\"opacity: 0.45;\">Early access<\/p>\n <h2 class=\"form-title\">Get early access<br><em>to Roam.<\/em><\/h2>\n <p class=\"form-sub\">We're launching to early users first. Leave your details and we'll be in touch before the public launch.<\/p>\n <form onsubmit=\"formSubmit(event)\">\n <div class=\"form-grid\">\n <div class=\"form-field\">\n <label>First name<\/label>\n <input type=\"text\" placeholder=\"Josh\" required \/>\n <\/div>\n <div class=\"form-field\">\n <label>Email<\/label>\n <input type=\"email\" placeholder=\"you@email.com\" required \/>\n <\/div>\n <div class=\"form-field\">\n <label>Your vehicle<\/label>\n <select>\n <option value=\"\">Select type\u2026<\/option>\n <option>Campervan conversion<\/option>\n <option>VW Transporter \/ California<\/option>\n <option>Mercedes Sprinter<\/option>\n <option>Ford Transit<\/option>\n <option>Motorhome<\/option>\n <option>Other van<\/option>\n <option>Planning to buy<\/option>\n <\/select>\n <\/div>\n <div class=\"form-field\">\n <label>How you found us<\/label>\n <select>\n <option value=\"\">Select\u2026<\/option>\n <option>Instagram<\/option>\n <option>TikTok<\/option>\n <option>Facebook group<\/option>\n <option>Friend \/ word of mouth<\/option>\n <option>Google search<\/option>\n <option>Other<\/option>\n <\/select>\n <\/div>\n <div class=\"form-field full\">\n <label>Tell us about your van life plans<\/label>\n <textarea rows=\"4\" placeholder=\"Weekend trips, full-time living, planning a big tour \u2014 anything helps us build the right features for you\u2026\"><\/textarea>\n <\/div>\n <\/div>\n <button type=\"submit\" class=\"form-submit\">Send me early access \u2192<\/button>\n <p class=\"form-legal\">No spam, ever. Unsubscribe any time.<\/p>\n <\/form>\n <\/div>\n <div class=\"form-success\" id=\"formSuccess\">\n <div class=\"icon\">\u2705<\/div>\n <h3>You're on the list.<\/h3>\n <p>We'll be in touch before public launch. In the meantime, keep an eye on your inbox.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500 FOOTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<footer>\n <div class=\"footer-brand\">\n <div class=\"footer-icon\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 110 110\">\n <text x=\"40\" y=\"85\" font-family=\"Inter, sans-serif\" font-size=\"92\" font-weight=\"700\" fill=\"#0A0A0A\" letter-spacing=\"-4\">r<\/text>\n <circle cx=\"78\" cy=\"72\" r=\"8\" fill=\"#FFFFFF\"\/>\n <\/svg>\n <\/div>\n <span class=\"footer-name\">Roam<\/span>\n <\/div>\n <span class=\"footer-tagline\">the road, together.<\/span>\n <span class=\"footer-copy\">\u00a9 2026 Roam \u00b7 All rights reserved<\/span>\n<\/footer>\n\n<script>\n function heroSubmit(e) {\n e.preventDefault()\n const email = document.getElementById('heroEmail').value\n \/\/ Pre-fill form below and scroll to it\n const formEmail = document.querySelector('#waitlist input[type=\"email\"]')\n if (formEmail) formEmail.value = email\n document.getElementById('waitlist').scrollIntoView({ behavior: 'smooth' })\n }\n\n function formSubmit(e) {\n e.preventDefault()\n document.getElementById('formContent').style.display = 'none'\n const success = document.getElementById('formSuccess')\n success.style.display = 'block'\n \/\/ In production: POST form data to your API \/ email service here\n }\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Roam \u2014 Van life trip planner Van life \u00b7 reimagined Plan the road.Own the journey. Real road routing, live fuel costs, campsite booking, and weather at every stop \u2014 built for campervans, motorhomes, and vans. Join the waitlist Free to start \u00b7 No card required \u00b7 Launching 2026 scroll 40+ Vehicles in DB Free To […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/roamthewild.app\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roamthewild.app\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roamthewild.app\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roamthewild.app\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/roamthewild.app\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":4,"href":"https:\/\/roamthewild.app\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/roamthewild.app\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/roamthewild.app\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}