1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>How PathOpen Works</title> 6<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"> 7<meta name="theme-color" content="#F3F5F7"> 8<link rel="icon" href="/favicon.ico" sizes="any"> 9<link rel="apple-touch-icon" href="/apple-touch-icon.png"> 10<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap"> 11<style> 12 :root { 13 --ink: #101827; 14 --ink-2: #1B2436; 15 --slate: #5B6472; 16 --slate-light: #8891A0; 17 --mist: #F3F5F7; 18 --line: #E2E6EB; 19 --white: #FFFFFF; 20 --signal: #2454E8; 21 --signal-dark: #1B3EB8; 22 --signal-tint: #E8EEFD; 23 --glass-strong: rgba(255,255,255,0.9); 24 --glass-border: rgba(255,255,255,0.55); 25 --glass-blur: blur(22px) saturate(180%); 26 --radius-md: 16px; 27 --radius-lg: 24px; 28 --radius-pill: 999px; 29 --shadow-float: 0 10px 34px rgba(16,24,39,0.14), 0 1px 3px rgba(16,24,39,0.06); 30 --shadow-soft: 0 4px 16px rgba(16,24,39,0.07); 31 --ease: cubic-bezier(0.22, 0.8, 0.2, 1); 32 --font-ui: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif; 33 --font-mono: 'IBM Plex Mono', ui-monospace, monospace; 34 } 35 * { box-sizing: border-box; } 36 body { 37 margin: 0; padding: 0; background: var(--mist); 38 font-family: var(--font-ui); color: var(--ink); 39 padding-bottom: 48px; 40 } 41 42 /* Fixed floating back button â identical to the scanner page */ 43 .home-button-wrapper { 44 position: fixed; 45 top: max(14px, env(safe-area-inset-top)); 46 left: max(14px, env(safe-area-inset-left)); 47 z-index: 1000; 48 } 49 .home-button { 50 display: inline-flex; 51 align-items: center; 52 gap: 8px; 53 background: var(--glass-strong); 54 backdrop-filter: var(--glass-blur); 55 -webkit-backdrop-filter: var(--glass-blur); 56 border: 1px solid var(--glass-border); 57 color: var(--ink); 58 text-decoration: none; 59 border-radius: var(--radius-pill); 60 padding: 11px 18px; 61 cursor: pointer; 62 font-family: var(--font-ui); 63 font-weight: 700; 64 font-size: 13.5px; 65 box-shadow: var(--shadow-float); 66 transition: background 0.15s, transform 0.15s var(--ease); 67 } 68 .home-button:hover { background: var(--white); } 69 .home-button:active { transform: scale(0.96); } 70 .home-button svg { width: 16px; height: 16px; } 71 72 header { 73 padding: 84px 24px 34px; 74 text-align: center; 75 max-width: 680px; 76 margin: 0 auto; 77 } 78 header h1 { 79 margin: 0 0 10px 0; 80 font-size: clamp(26px, 5vw, 34px); 81 font-weight: 800; 82 color: var(--ink); 83 letter-spacing: -0.01em; 84 } 85 header p { 86 margin: 0; 87 font-size: 15px; 88 color: var(--slate); 89 font-weight: 500; 90 } 91 main { 92 max-width: 640px; 93 margin: 0 auto; 94 padding: 0 20px; 95 } 96 .step-card { 97 background: var(--white); 98 border-radius: var(--radius-lg); 99 padding: 22px 24px; 100 display: flex; 101 gap: 18px; 102 align-items: flex-start; 103 box-shadow: var(--shadow-soft); 104 margin-bottom: 14px; 105 transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); 106 } 107 .step-num { 108 flex-shrink: 0; 109 width: 36px; height: 36px; 110 border-radius: 50%; 111 background: var(--signal-tint); 112 color: var(--signal-dark); 113 display: flex; align-items: center; justify-content: center; 114 font-family: var(--font-mono); 115 font-weight: 600; 116 font-size: 15px; 117 } 118 .step-card h2 { 119 margin: 4px 0 6px 0; 120 font-size: 17px; 121 font-weight: 700; 122 color: var(--ink); 123 } 124 .step-card p { 125 margin: 0; 126 font-size: 14.5px; 127 line-height: 1.55; 128 color: var(--slate); 129 } 130 .install-card { 131 background: var(--white); 132 border-radius: var(--radius-lg); 133 padding: 26px 24px; 134 box-shadow: var(--shadow-soft); 135 margin-top: 22px; 136 } 137 .install-card h2 { 138 margin: 0 0 20px 0; 139 font-size: 18px; 140 font-weight: 700; 141 color: var(--ink); 142 } 143 .install-grid { 144 display: grid; 145 grid-template-columns: 1fr 1fr; 146 gap: 24px; 147 } 148 @media (max-width: 480px) { 149 .install-grid { grid-template-columns: 1fr; gap: 20px; } 150 header { padding: 76px 20px 28px; } 151 } 152 .install-grid h3 { 153 margin: 0 0 10px 0; 154 font-size: 13px; 155 font-weight: 700; 156 text-transform: uppercase; 157 letter-spacing: 0.04em; 158 color: var(--signal-dark); 159 } 160 .install-grid ol { 161 margin: 0; 162 padding-left: 20px; 163 font-size: 14px; 164 line-height: 1.9; 165 color: var(--slate); 166 } 167 .copyright { 168 text-align: center; 169 margin: 32px 0 0; 170 font-size: 11.5px; 171 font-weight: 600; 172 letter-spacing: 0.01em; 173 color: var(--slate-light); 174 } .copyright a { color: var(--slate); text-decoration: underline; } 175 .copyright a:hover { color: var(--signal); } 176</style> 177</head> 178<body> 179 180 <div class="home-button-wrapper"> 181 <a href="index.html" class="home-button"> 182 <svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> 183 <path d="M13.5 4.5L7 11l6.5 6.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/> 184 </svg> 185 Back to map 186 </a> 187 </div> 188 189 <header> 190 <h1>How PathOpen works</h1> 191 <p>Find accessible routes. Report accessibility features. Improve your community.</p> 192 </header> 193 194 <main> 195 <div class="step-card"> 196 <div class="step-num">1</div> 197 <div> 198 <h2>Find your route</h2> 199 <p>Enter your destination and PathOpen helps you navigate while considering accessibility along the way.</p> 200 </div> 201 </div> 202 203 <div class="step-card"> 204 <div class="step-num">2</div> 205 <div> 206 <h2>Navigate confidently</h2> 207 <p>Follow your route and see accessibility features, like ramps and curb cuts, mapped around you.</p> 208 </div> 209 </div> 210 211 <div class="step-card"> 212 <div class="step-num">3</div> 213 <div> 214 <h2>Report features</h2> 215 <p>Upload a photo of a ramp, elevator, curb cut, or accessibility barrier. PathOpen automatically identifies what's in the photo.</p> 216 </div> 217 </div> 218 219 <div class="install-card"> 220 <h2>Install PathOpen as an app</h2> 221 <div class="install-grid"> 222 <div> 223 <h3>iPhone</h3> 224 <ol> 225 <li>Open PathOpen in Safari</li> 226 <li>Tap Share</li> 227 <li>Select "Add to Home Screen"</li> 228 <li>Tap Add</li> 229 </ol> 230 </div> 231 <div> 232 <h3>
232Android</h3> 233 <ol> 234 <li>Open PathOpen in Chrome</li> 235 <li>Tap the menu icon</li> 236 <li>Select "Install App"</li> 237 <li>Confirm</li> 238 </ol> 239 </div> 240 </div> 241 </div> 242 243 <div class="copyright">© 2026 PathOpen. All rights reserved. · <a href="privacy.html">Privacy</a> · <a href="terms.html">Terms</a></div> 244 </main> 245 246</body> 247</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.