PageSourceSearch

https://pitchgauge.com/pg-precise

html pitchgauge.com collected 2026-09-24 18:34:41 UTC 70,122 bytes, 1,360 lines download raw bytes

1
2
3
4
5
6
7<!DOCTYPE html>
8<html lang="en" data-bs-theme="light">
9<head>
10  <meta charset="UTF-8">
11  <title>PG Precise &#8212; Free Roof Measurement Software</title>
12  <meta name="description" content="Order roof &#8226; wall reports, view past jobs, and explore every structure as an interactive 3D model. PDF, ESX, XML exports. Starting at $15." />
13  <meta charset="utf-8">
14<meta name="copyright" content="Copyright (c) 2023 by Pitch Gauge LLC">
15<meta name="author" content="Pitch Gauge LLC">
16<meta http-equiv='X-UA-Compatible' content='IE=edge'>
17<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
18<link rel="icon" href="https://files.pitchgauge.com/images/favicon.ico">
19
20
21
22<!-- Twitter -->
23<meta name="twitter:card" content="summary">
24<meta name="rdf:type" content="article">
25<meta name="twitter:site" content="@pitchgauge">
26<meta name="twitter:title" content="Pitch Gauge&reg; | Roofing and Wall Reports | Estimate | Software">
27<meta name="twitter:text:title" content="Pitch Gauge&reg; | Roofing and Wall Reports | Estimate | Software">
28<meta name="twitter:description" content="Pitch Gauge is a powerful roofing software for business that keeps your team on the same page on the job site or back at the office.">
29<meta name="twitter:creator" content="pitchgauge">
30<meta name="twitter:image" content="https://files.pitchgauge.com/images/pitchgauge_ios_header.png">
31<meta name="twitter:player" content="https://files.pitchgauge.com/videos/pitch-gauge-estimating-crm.mp4">
32<meta name="twitter:player:stream" content="https://files.pitchgauge.com/videos/pitch-gauge-estimating-crm.mp4">
33
34<meta property="fb:admins" content="529411938">
35<meta property="fb:app_id" content="167539903284788">
36
37<meta property="og:url" content="https://pitchgauge.com">
38<meta property="og:title" content="Pitch Gauge&reg; | Roofing and Wall Reports | Estimate | Software">
39<meta property="og:description" content="Pitch Gauge is a powerful roofing software for business that keeps your team on the same page on the job site or back at the office.">
40<meta property="og:site_name" content="Pitch Gauge">
41<meta property="og:image" content="https://files.pitchgauge.com/images/pitchgauge_ios_header.png">
42<meta property="og:image:alt" content="Pitch Gauge&reg; | Roofing and Wall Reports | Estimate | Software">
43
44<meta property="og:image:url" content="https://files.pitchgauge.com/images/pitchgauge_ios_header.png">
45<meta property="og:type" content="article">
46<meta property="og:locale" content="en_us">
47<meta property="og:audio" content="https://www.youtube.com/pitchgauge">
48<meta property="og:video" content="https://files.pitchgauge.com/videos/pitch-gauge-estimating-crm.mp4">
49<meta property="og:video:url" content="https://files.pitchgauge.com/videos/pitch-gauge-estimating-crm.mp4">
50<meta property="og:video:secure_url" content="https://files.pitchgauge.com/videos/pitch-gauge-estimating-crm.mp4">
51<meta property="og:video:type" content="video/mp4">
52<link rel="manifest" href="https://pitchgauge.com/manifest.webmanifest">
53<!-- Apple -->
54<meta name="apple-itunes-app" content="app-id=389715382, affiliate-data=473361309, app-argument=https://pitchgauge.com">
55<meta itemprop="name" content="Pitch Gauge&reg; | Roofing and Wall Reports | Estimate | Software">
56<meta itemprop="brand" content="Pitch Gauge">
57<meta itemprop="alternateName" content="Roofing Software">
58<meta itemprop="description" content="Pitch Gauge&reg; is roofing software that keeps your team on the same page on the job site or back at the office. The powerful roofing software for business.">
59<meta itemprop="logo" content="https://files.pitchgauge.com/logo.png">
60<meta itemprop="url" content="https://pitchgauge.com">
61<meta itemprop="image" content="https://files.pitchgauge.com/images/pitchgauge_ios_header.png">
62<meta itemprop="audience" content="Roofing Industry">
63<meta itemprop="releaseDate" content="2010">
64<meta name="keywords" content="roofing,roof,roofer,calculator,slope,estimating,measure,estimate,satellite,shingle,pitchgauge.com,roof camera,pitch finder,pitch gauge,roof measurement,gps measurement,roofing tools,roofing app,roof crm,contractor crm,roof materials,measurement report">
65<meta name="description" content="Pitch Gauge&reg; is roofing software that keeps your team on the same page on the job site or back at the office. The powerful roofing software for business.">
66
67  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
68  <link rel="preconnect" href="https://fonts.googleapis.com">
69  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
70  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
71  <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
72  
72<script>(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'rewardful');</script>
72
73  
73<script async src='https://r.wdfl.co/rw.js' data-rewardful='0dc371'></script>
73
74  
74<script>
75    console.log("%cDeveloped with love by Pitch Gauge LLC","font-size:22px;color:#ffab00");
76  </script>
76
77  
77<script>(function(){
78  function makeStore(){
79    let data = {};
80    const api = {
81      getItem: function (k) { return Object.prototype.hasOwnProperty.call(data, k) ? data[k] : null; },
82      setItem: function (k, v) { data[k] = String(v); },
83      removeItem: function (k) { delete data[k]; },
84      clear: function () { data = {}; },
85      key: function (i) { return Object.keys(data)[i] || null; }
86    };
87    Object.defineProperty(api, 'length', { get: function(){ return Object.keys(data).length; } });
88    return api;
89  }
90  function tryShim(name){
91    let works = false;
92    try { works = !!window[name] && typeof window[name].getItem === 'function'; void window[name].length; }
93    catch (_) { works = false; }
94    if (works) return;
95    try { Object.defineProperty(window, name, { configurable: true, value: makeStore() }); }
96    catch (_) { try { window[name] = makeStore(); } catch (__) {} }
97  }
98  tryShim('localStorage');
99  tryShim('sessionStorage');
100})();</script>
vendor: 66 bytes, lines 100-101
100
101  <script async src="https://www.googletagmanager.com/gtag/js?id=
101G-PRH3L8TVZB
vendor: 12 bytes, line 101
101"></script>
102<script>
103  
vendor: 133 bytes, lines 103-106
103window.dataLayer = window.dataLayer || [];
104  function gtag(){dataLayer.push(arguments);}
105  gtag('js', new Date());
106  gtag('config', '
106G-PRH3L8TVZB
vendor: 6 bytes, lines 106-107
106');
107  
107gtag('config', 'AW-997772898');
108
109  window.pgTrackGooglePurchase = function(purchasePayload) {
110    if (typeof gtag !== 'function' || !purchasePayload) {
111      return;
112    }
113
114    let value = Number(purchasePayload.value || 0);
115    if (!isFinite(value) || value < 0) {
116      value = 0;
117    }
118    const currency = String(purchasePayload.currency || 'USD').toUpperCase();
119    const transactionId = purchasePayload.order_id || purchasePayload.transaction_id || '';
120    let contentId = '';
121    if (purchasePayload.content_ids && purchasePayload.content_ids.length) {
122      contentId = String(purchasePayload.content_ids[0]);
123    } else if (purchasePayload.contents && purchasePayload.contents.length && purchasePayload.contents[0].id) {
124      contentId = String(purchasePayload.contents[0].id);
125    }
126
127    let itemName = String(purchasePayload.content_name || contentId || 'Pitch Gauge Purchase');
128    let quantity = Number(purchasePayload.num_items || 1);
129    let itemPrice = value;
130    if (purchasePayload.contents && purchasePayload.contents.length) {
131      quantity = Number(purchasePayload.contents[0].quantity || quantity);
132      itemPrice = Number(purchasePayload.contents[0].item_price || itemPrice);
133    }
134    if (!isFinite(quantity) || quantity <= 0) {
135      quantity = 1;
136    }
137    if (!isFinite(itemPrice) || itemPrice < 0) {
138      itemPrice = value;
139    }
140
141    const conversionPayload = {
142      send_to: 'AW-997772898/8NWvCN2SvYgYEOKc49sD',
143      value: value,
144      currency: currency
145    };
146    if (transactionId) {
147      conversionPayload.transaction_id = String(transactionId);
148    }
149    gtag('event', 'conversion', conversionPayload);
150
151    const purchaseEventPayload = {
152      send_to: 'G-PRH3L8TVZB',
153      value: value,
154      currency: currency,
155      items: [{
156        item_id: contentId || itemName,
157        item_name: itemName,
158        price: itemPrice,
159        quantity: quantity
160      }]
161    };
162    if (transactionId) {
163      purchaseEventPayload.transaction_id = String(transactionId);
164    }
165    gtag('event', 'purchase', purchaseEventPayload);
166  };
167</script>
167
168
169
170<script src="https://www.gstatic.com/firebasejs/9.7.0/firebase-app-compat.js"></script>
vendor: 1 bytes, line 170
170
171<script src="https://www.gstatic.com/firebasejs/9.7.0/firebase-analytics-compat.js"></script>
vendor: 1 bytes, line 171
171
172<script src="https://www.gstatic.com/firebasejs/9.7.0/firebase-remote-config-compat.js"></script>
172
173
174<script>
175    const firebaseConfig = {
176        apiKey: "AIzaSyA2_jWwP6p3A5PYvnI8UKnjQNQhdq3c8uI",
177        authDomain: "solid-feat-91909.firebaseapp.com",
178        databaseURL: "https://solid-feat-91909.firebaseio.com",
179        projectId: "solid-feat-91909",
180        storageBucket: "solid-feat-91909.appspot.com",
181        messagingSenderId: "158600184030",
182        appId: "1:158600184030:web:a65d3be367d334058a824f",
183        measurementId: "G-2KY2SQC0YY"
184    };
185    // Initialize Firebase
186    const app = firebase.initializeApp(firebaseConfig);
187    const analytics = app.analytics();
188    analytics.setAnalyticsCollectionEnabled(true);
189    analytics.setUserId('FREEUSER');
190
191    // --- Firebase Remote Config for A/B testing (Home Hero Title) ---
192    try {
193        const remoteConfig = app.remoteConfig();
194        // Reasonable fetch interval; can be lowered for debugging
195        remoteConfig.settings = { minimumFetchIntervalMillis: 3600000 };
196        remoteConfig.defaultConfig = {
197            ab_home_hero_title_variant: 'B',
198            ab_home_hero_title_text_A: 'Roof & Wall Reports - Now Viewable in Full 3D',
199            ab_home_hero_title_text_B: 'Every Report Comes Alive in 3D.'
200        };
201
202        function applyHeroTitle(text) {
203            try {
204              let longEl = document.querySelector('.hero_title .long-hero');
205              let shortEl = document.querySelector('.hero_title .short-hero');
206              if (longEl && typeof text === 'string') longEl.textContent = text;
207                if (shortEl && typeof text === 'string') shortEl.textContent = text;
208            } catch (e) {
209                console.log(e);
210            }
211        }
212
213      function getVariant(key) {
214        return remoteConfig.getString(key);
215        
216      }
217        function selectAndApplyVariant() {
218            const variant = getVariant('ab_home_hero_title_variant');
219            const textA = getVariant('ab_home_hero_title_text_A');
220            const textB = getVariant('ab_home_hero_title_text_B');
221            const chosen = (variant === 'B') ? textB : textA;
222            applyHeroTitle(chosen);
223            try { analytics.logEvent('ab_home_hero_title_applied', { variant: (variant === 'B' ? 'B' : 'A') }); } catch(e) {}
224        }
225
226        remoteConfig.fetchAndActivate()
227            .then(function() { selectAndApplyVariant(); })
228            .catch(function(err) { console.log(err); /* fall back to server-rendered text */ });
229
230        // Also apply as soon as DOM is ready in case fetch already cached
231        if (document.readyState === 'complete' || document.readyState === 'interactive') {
232            selectAndApplyVariant();
233        } else {
234            document.addEventListener('DOMContentLoaded', selectAndApplyVariant);
235        }
236
237    } catch (e) {
238        console.log(e);
239    }
240</script>
240
241
242<!-- Meta Pixel Code -->
243<script>
vendor: 429 bytes, lines 243-252
243
244  !function(f,b,e,v,n,t,s)
245  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
246    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
247    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
248    n.queue=[];t=b.createElement(e);t.async=!0;
249    t.src=v;s=b.getElementsByTagName(e)[0];
250    s.parentNode.insertBefore(t,s)}(window, document,'script',
251    'https://connect.facebook.net/en_US/fbevents.js');
252  fbq('init', '
252769292206064607
vendor: 32 bytes, lines 252-253
252');
253  fbq('track', 'PageView');
254</script>
254
255<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=769292206064607&ev=PageView&noscript=1"/></noscript>
256
257
258<!-- End Meta Pixel Code -->
259
260
261
262
263<style>
264  /* ── DARK MODE TOKENS (default) ──────────────────────── */
265  :root, [data-theme="dark"] {
266    --bg:          #0b0f14;
267    --bg-soft:     #0f141b;
268    --surface:     #121925;
269    --fg:          #e6edf6;
270    --muted:       #7b8a9a;
271    --border:      #1f2a3b;
272    --border-soft: rgba(255,255,255,.06);
273    
274    --card-grad:          linear-gradient(180deg, #101826, #0b111a);
275    --card-head-color:    #b1b9c5;
276    --card-head-border:   #1e293b;
277    --data-badge-bg:      rgba(3,7,13,.75);
278    --data-badge-border:  #1a2433;
279    --data-badge-color:   #c7d6e8;
280    
281    --grad-hero-bg:
282            radial-gradient(1200px 600px at 80% -100px, rgba(138,92,255,.18), transparent 60%),
283            radial-gradient(700px 500px at -100px 30%,  rgba(46,196,182,.15), transparent 60%),
284            var(--bg-soft);
285    
286    --nav-bg:             rgba(11,15,20,0.84);
287    --nav-border-color:   rgba(255,255,255,.08);
288    --nav-link-color:     #c2ccd8;
289    --nav-link-hover:     #ffffff;
290    --dropdown-bg:        rgba(18,25,37,.98);
291    --dropdown-border:    #263142;
292    --dropdown-link:      #d6deea;
293    --dropdown-hover-bg:  rgba(255,122,0,.12);
294    --dropdown-hover:     #ffffff;
295    --shadow:             0 10px 30px rgba(0,0,0,.35);
296    --shadow-soft:        0 8px 20px rgba(0,0,0,.25);
297    --pg-blue:            #22a6ff;
298    --tag-pill-border:    #263142;
299    --btn-ghost-border:   #2a3444;
300    --btn-ghost-hborder:  #3a475d;
301    --btn-ghost-hbg:      rgba(255,255,255,.04);
302    --toggle-icon-moon:   block;
303    --toggle-icon-sun:    none;
304  }
305  
306  /* ── LIGHT MODE TOKENS ───────────────────────────────── */
307  [data-theme="light"] {
308    --bg:          #ffffff;
309    --bg-soft:     #f9fafb;
310    --surface:     #ffffff;
311    --fg:          #1a202c;
312    --muted:       #4a5568;
313    --border:      rgba(0,0,0,.10);
314    --border-soft: rgba(0,0,0,.07);
315    
316    --card-grad:          linear-gradient(180deg, #f1f5f9, #e8eff7);
317    --card-head-color:    #475569;
318    --card-head-border:   rgba(0,0,0,.08);
319    --data-badge-bg:      rgba(255,255,255,.94);
320    --data-badge-border:  rgba(0,0,0,.12);
321    --data-badge-color:   #334155;
322    
323    --grad-hero-bg:
324            radial-gradient(1200px 600px at 80% -100px, rgba(138,92,255,.08), transparent 60%),
325            radial-gradient(700px 500px at -100px 30%,  rgba(46,196,182,.07), transparent 60%),
326            var(--bg-soft);
327    
328    --nav-bg:             rgba(255,255,255,0.90);
329    --nav-border-color:   rgba(15,23,42,.12);
330    --nav-link-color:     #334155;
331    --nav-link-hover:     #0f172a;
332    --dropdown-bg:        rgba(255,255,255,.98);
333    --dropdown-border:    rgba(15,23,42,.14);
334    --dropdown-link:      #334155;
335    --dropdown-hover-bg:  rgba(255,122,0,.10);
336    --dropdown-hover:     #111827;
337    --shadow:             0 10px 30px rgba(0,0,0,.10);
338    --shadow-soft:        0 8px 20px rgba(0,0,0,.07);
339    --pg-blue:            #0a66c2;
340    --tag-pill-border:    rgba(0,0,0,.14);
341    --btn-ghost-border:   rgba(0,0,0,.18);
342    --btn-ghost-hborder:  rgba(0,0,0,.28);
343    --btn-ghost-hbg:      rgba(0,0,0,.03);
344    --toggle-icon-moon:   none;
345    --toggle-icon-sun:    block;
346  }
347  
348  /* ── SHARED BRAND TOKENS ─────────────────────────────── */
349  :root {
350    --pg-orange:   #ff7a00;
351    --pg-amber:    #ffb14a;
352    --green:       #22c55e;
353    --red:         #ef4444;
354    --grad-cta:    linear-gradient(135deg, var(--pg-orange), var(--pg-amber));
355    --radius-card: 16px;
356    --radius-btn:  12px;
357    --font:        'Inter', system-ui, -apple-system, sans-serif;
358  }
359  
360  /* ── SMOOTH TRANSITIONS ──────────────────────────────── */
361  body,
362  #nav,
363  #nav .nav-link,
364  #nav .dropdown-menu,
365  #nav .dropdown-item,
366  #nav .navbar-toggler,
367  .hero-card,
368  .problem-img-card,
369  .solution-img-card,
370  .step-card,
371  .benefit-card,
372  .hybrid-box,
373  .usecase-card,
374  .product-img-card,
375  .sect-alt,
376  .sect-plain,
377  .final-cta,
378  .footer {
379    transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
380  }
381  
382  /* ── RESET ───────────────────────────────────────────── */
383  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
384  html { scroll-behavior: smooth; overflow-x: hidden; }
385  body {
386    background: var(--bg);
387    color: var(--fg);
388    font-family: var(--font);
389    font-size: 16px;
390    line-height: 1.6;
391    overflow-x: hidden;
392    -webkit-font-smoothing: antialiased;
393  }
394  img { display: block; max-width: 100%; }
395  a { color: inherit; text-decoration: none; }
396  
397  /* ── UTILITY ─────────────────────────────────────────── */
398  .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
399  
400  .eyebrow {
401    display: inline-block;
402    color: var(--pg-blue);
403    font-weight: 700;
404    font-size: 13px;
405    letter-spacing: 0.25px;
406    margin-bottom: 12px;
407    transition: color .3s;
408  }
409  
410  .tag-pill {
411    display: inline-flex;
412    align-items: center;
413    gap: 6px;
414    padding: 5px 12px;
415    border: 1px solid var(--tag-pill-border);
416    border-radius: 999px;
417    color: var(--muted);
418    font-size: 12px;
419    font-weight: 500;
420    margin-bottom: 16px;
421  }
422  .tag-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pg-orange); }
423  
424  /* ── BUTTONS ─────────────────────────────────────────── */
425  .btn {
426    display: inline-flex;
427    align-items: center;
428    justify-content: center;
429    gap: 8px;
430    font-family: var(--font);
431    font-weight: 700;
432    font-size: 15px;
433    letter-spacing: 0.2px;
434    padding: 14px 24px;
435    border-radius: var(--radius-btn);
436    cursor: pointer;
437    border: 1px solid transparent;
438    transition: transform .25s ease, box-shadow .25s ease, border-color .2s, background .2s;
439    text-decoration: none;
440    white-space: nowrap;
441  }
442  .btn:hover { transform: translateY(-1px); }
443  .btn-primary {
444    background: var(--grad-cta);
445    color: #081018;
446    border: none;
447    box-shadow: 0 10px 20px rgba(255,122,0,.22);
448  }
449  .btn-primary:hover { box-shadow: 0 14px 28px rgba(255,122,0,.32); }
450  .btn-ghost {
451    background: transparent;
452    color: var(--fg);
453    border-color: var(--btn-ghost-border);
454  }
455  .btn-ghost:hover { border-color: var(--btn-ghost-hborder); background: var(--btn-ghost-hbg); }
456  .btn-lg { font-size: 17px; padding: 16px 32px; }
457  
458  /* ── THEME TOGGLE ────────────────────────────────────── */
459  .theme-toggle {
460    width: 36px; height: 36px;
461    border-radius: 8px;
462    background: transparent;
463    border: 1px solid var(--btn-ghost-border);
464    cursor: pointer;
465    display: flex;
466    align-items: center;
467    justify-content: center;
468    color: var(--muted);
469    flex-shrink: 0;
470    transition: background .2s, border-color .2s, color .2s;
471  }
472  .theme-toggle:hover {
473    background: var(--btn-ghost-hbg);
474    color: var(--fg);
475    border-color: var(--btn-ghost-hborder);
476  }
477  .icon-moon { display: var(--toggle-icon-moon); }
478  .icon-sun  { display: var(--toggle-icon-sun); }
479  
480  /* ── STICKY NAV ──────────────────────────────────────── */
481  #nav {
482    z-index: 100;
483    background: var(--nav-bg);
484    backdrop-filter: saturate(160%) blur(12px);
485    -webkit-backdrop-filter: saturate(160%) blur(12px);
486    border-bottom: 1px solid var(--nav-border-color);
487    --bs-navbar-color: var(--nav-link-color);
488    --bs-navbar-hover-color: var(--nav-link-hover);
489    --bs-navbar-active-color: var(--nav-link-hover);
490    --bs-navbar-brand-color: var(--pg-orange);
491    --bs-navbar-brand-hover-color: var(--pg-amber);
492    --bs-navbar-toggler-border-color: var(--btn-ghost-border);
493    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%237b8a9a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
494  }
495  [data-theme="light"] #nav {
496    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%234a5568' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
497  }
498  #nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }
499  #nav .nav-link {
500    color: var(--nav-link-color);
501    font-weight: 600;
502  }
503  #nav .nav-link:hover,
504  #nav .nav-link:focus,
505  #nav .nav-link.show {
506    color: var(--nav-link-hover);
507  }
508  #nav .dropdown-menu {
509    background: var(--dropdown-bg);
510    border-color: var(--dropdown-border);
511    box-shadow: var(--shadow-soft);
512    --bs-dropdown-bg: var(--dropdown-bg);
513    --bs-dropdown-border-color: var(--dropdown-border);
514    --bs-dropdown-link-color: var(--dropdown-link);
515    --bs-dropdown-link-hover-color: var(--dropdown-hover);
516    --bs-dropdown-link-hover-bg: var(--dropdown-hover-bg);
517    --bs-dropdown-link-active-color: var(--dropdown-hover);
518    --bs-dropdown-link-active-bg: var(--dropdown-hover-bg);
519  }
520  #nav .dropdown-item {
521    color: var(--dropdown-link);
522  }
523  #nav .dropdown-item:hover,
524  #nav .dropdown-item:focus,
525  #nav .dropdown-item.show {
526    color: var(--dropdown-hover);
527    background: var(--dropdown-hover-bg);
528  }
529  #nav .navbar-toggler {
530    border-color: var(--btn-ghost-border);
531    color: var(--nav-link-color);
532  }
533  #nav .navbar-toggler:hover,
534  #nav .navbar-toggler:focus {
535    background: var(--btn-ghost-hbg);
536    border-color: var(--btn-ghost-hborder);
537    box-shadow: none;
538  }
539  .nav-logo {
540    display: flex;
541    align-items: center;
542    gap: 10px;
543    font-weight: 800;
544    font-size: 17px;
545    letter-spacing: -0.02em;
546    color: var(--fg);
547    flex-shrink: 0;
548  }
549  .nav-logo-icon {
550    width: 34px; height: 34px;
551    border: 1.5px solid var(--pg-orange);
552    border-radius: 8px;
553    display: flex;
554    align-items: center;
555    justify-content: center;
556    flex-shrink: 0;
557  }
558  .nav-links {
559    display: flex;
560    align-items: center;
561    gap: 28px;
562    list-style: none;
563  }
564  .nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); transition: color .2s; }
565  .nav-links a:hover { color: var(--fg); }
566  .nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
567
568  .navbar .dropdown-submenu { position: relative; }
569  .navbar .dropdown-submenu > .dropdown-menu {
570    top: 0;
571    left: 100%;
572    margin-top: -4px;
573    margin-left: 2px;
574  }
575  @media (max-width: 991.98px) {
576    .navbar .dropdown-submenu > .dropdown-menu {
577      position: static;
578      margin: 4px 0 4px 16px;
579      box-shadow: none;
580    }
581  }
582  
583  /* ── HERO ────────────────────────────────────────────── */
584  .hero {
585    padding-top: 112px;
586    padding-bottom: 96px;
587    background: var(--grad-hero-bg);
588    border-bottom: 1px solid var(--border-soft);
589  }
590  .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
591  .hero-headline { font-size: clamp(40px, 5vw, 68px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin-bottom: 20px; }
592  .hero-headline .orange { color: var(--pg-orange); }
593  .hero-sub { font-size: 18px; color: var(--muted); line-height: 1.65; max-width: 480px; margin-bottom: 36px; }
594  .hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
595  .trust-bar { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
596  .trust-item { display: flex; flex-direction: column; gap: 1px; }
597  .trust-number { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--pg-orange); line-height: 1; }
598  .trust-label { font-size: 12px; color: var(--muted); font-weight: 500; }
599  .trust-divider { width: 1px; height: 32px; background: var(--border); }
600  
601  .hero-visual { position: relative; }
602  .hero-card {
603    background: var(--card-grad);
604    border: 1px solid var(--border);
605    border-radius: var(--radius-card);
606    overflow: hidden;
607    box-shadow: var(--shadow);
608  }
609  .hero-card-head {
610    display: flex;
611    justify-content: space-between;
612    align-items: center;
613    padding: 12px 16px;
614    border-bottom: 1px solid var(--card-head-border);
615    color: var(--card-head-color);
616    font-size: 13px;
617    font-weight: 600;
618  }
619  .hero-card-img { position: relative; }
620  .hero-card-img img { width: 100%; height: 420px; object-fit: cover; object-position: center; display: block; }
621  .hero-data-badge {
622    position: absolute; bottom: 14px; left: 14px;
623    background: var(--data-badge-bg);
624    border: 1px solid var(--data-badge-border);
625    border-radius: 10px;
626    padding: 10px 14px;
627    color: var(--data-badge-color);
628    font-size: 13px;
629  }
630  .hero-data-badge .big-num {
631    font-size: 26px; font-weight: 800; letter-spacing: -0.03em;
632    color: var(--pg-orange); line-height: 1; display: block;
633  }
634  
635  /* ── SECTION COMMONS ─────────────────────────────────── */
636  section { padding: 88px 0; }
637  .sect-alt { background: var(--grad-hero-bg); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
638  .sect-plain { background: var(--bg); border-top: 1px solid var(--border-soft); }
639  .section-header { text-align: center; margin-bottom: 60px; }
640  .section-headline { font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; margin-bottom: 14px; }
641  .section-sub { font-size: 17px; color: var(--muted); max-width: 520px; margin: 0 auto; line-height: 1.65; }
642  
643  /* ── PROBLEM ─────────────────────────────────────────── */
644  .problem-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
645  .problem-img-card { background: var(--card-grad); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow); }
646  .problem-img-card img { width: 100%; height: 340px; object-fit: cover; object-position: left center; display: block; }
647  .problem-headline { font-size: clamp(32px, 3.5vw, 52px); font-weight: 8
64700; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 16px; }
648  .problem-lead { font-size: 17px; color: var(--muted); margin-bottom: 28px; }
649  .pain-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
650  .pain-item { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 500; }
651  .pain-icon {
652    width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
653    background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25);
654    display: flex; align-items: center; justify-content: center; margin-top: 1px;
655  }
656  .pain-icon svg { width: 11px; height: 11px; stroke: var(--red); fill: none; stroke-width: 2.5; }
657  .problem-kicker { font-size: 15px; font-weight: 700; color: var(--pg-orange); }
658  
659  /* ── SOLUTION ────────────────────────────────────────── */
660  .solution-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
661  .solution-img-card { background: var(--card-grad); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow); }
662  .solution-img-card img { width: 100%; height: 460px; object-fit: cover; object-position: center top; display: block; }
663  .solution-headline { font-size: clamp(34px, 4vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 14px; }
664  .solution-headline .orange { color: var(--pg-orange); }
665  .solution-sub { font-size: 17px; color: var(--muted); margin-bottom: 28px; line-height: 1.65; }
666  .feature-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
667  .feature-item { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
668  .check-icon {
669    width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
670    background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25);
671    display: flex; align-items: center; justify-content: center;
672  }
673  .check-icon svg { width: 10px; height: 10px; stroke: var(--green); fill: none; stroke-width: 2.5; }
674  
675  /* ── HOW IT WORKS ────────────────────────────────────── */
676  .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 48px; }
677  .step-card {
678    background: var(--surface);
679    border: 1px solid var(--border);
680    border-radius: var(--radius-card);
681    padding: 36px 28px;
682    position: relative; overflow: hidden;
683    transition: border-color .2s, box-shadow .2s, background-color .3s;
684  }
685  .step-card:hover { border-color: rgba(255,122,0,.3); box-shadow: var(--shadow-soft); }
686  .step-card::before {
687    content: attr(data-num);
688    position: absolute; top: 16px; right: 20px;
689    font-size: 64px; font-weight: 900; letter-spacing: -0.04em;
690    color: rgba(255,122,0,.07); line-height: 1;
691  }
692  .step-dot {
693    width: 40px; height: 40px; border-radius: 50%; background: var(--grad-cta);
694    display: flex; align-items: center; justify-content: center;
695    font-weight: 800; font-size: 16px; color: #081018; margin-bottom: 20px;
696  }
697  .step-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
698  .step-desc { font-size: 14px; color: var(--muted); line-height: 1.6; }
699  .step-note { font-size: 12px; color: rgba(255,122,0,.65); font-style: italic; margin-top: 8px; }
700  .how-cta { display: flex; justify-content: center; }
701  
702  /* ── BENEFITS ────────────────────────────────────────── */
703  .benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
704  .benefit-card {
705    background: var(--surface);
706    border: 1px solid var(--border);
707    border-radius: var(--radius-card);
708    padding: 32px 28px;
709    display: flex; gap: 20px; align-items: flex-start;
710    transition: border-color .2s, box-shadow .2s, background-color .3s;
711  }
712  .benefit-card:hover { border-color: rgba(255,122,0,.25); box-shadow: var(--shadow-soft); }
713  .benefit-icon-wrap {
714    width: 48px; height: 48px; border-radius: 12px;
715    background: rgba(255,122,0,.1); border: 1px solid rgba(255,122,0,.2);
716    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px;
717  }
718  .benefit-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
719  .benefit-desc { font-size: 14px; color: var(--muted); line-height: 1.6; }
720  
721  /* ── HYBRID MODEL ────────────────────────────────────── */
722  .hybrid-flow { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }
723  .hybrid-box {
724    background: var(--surface);
725    border: 1.5px solid var(--border);
726    border-radius: var(--radius-card);
727    padding: 28px 36px; text-align: center; min-width: 200px;
728    transition: background-color .3s, border-color .3s;
729  }
730  .hybrid-box.active { border-color: var(--pg-orange); background: rgba(255,122,0,.06); }
731  .hybrid-label { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 4px; }
732  .hybrid-sublabel { font-size: 13px; color: var(--muted); }
733  .hybrid-free-badge {
734    display: inline-block; background: var(--green); color: #000;
735    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
736    text-transform: uppercase; padding: 3px 8px; border-radius: 4px; margin-top: 8px;
737  }
738  .hybrid-arrow { font-size: 24px; color: var(--pg-orange); }
739  .hybrid-copy { text-align: center; max-width: 520px; margin: 0 auto 36px; font-size: 16px; color: var(--muted); line-height: 1.65; }
740  .hybrid-cta { display: flex; justify-content: center; }
741  
742  /* ── USE CASES ───────────────────────────────────────── */
743  .usecases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
744  .usecase-card {
745    background: var(--surface);
746    border: 1px solid var(--border);
747    border-radius: var(--radius-card);
748    padding: 28px 22px;
749    transition: border-color .2s, transform .2s, box-shadow .2s, background-color .3s;
750    position: relative; overflow: hidden;
751  }
752  .usecase-card::after {
753    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
754    background: var(--grad-cta); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
755  }
756  .usecase-card:hover::after { transform: scaleX(1); }
757  .usecase-card:hover { border-color: rgba(255,122,0,.2); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
758  .usecase-icon { font-size: 30px; margin-bottom: 14px; }
759  .usecase-title { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
760  .usecase-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
761  
762  /* ── PRODUCT IN ACTION ───────────────────────────────── */
763  .product-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
764  .product-img-card { background: var(--card-grad); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow); }
765  .product-img-card img { width: 100%; height: 400px; object-fit: cover; object-position: center; display: block; }
766  .product-headline { font-size: clamp(32px, 3.5vw, 50px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 16px; }
767  .product-headline .orange { color: var(--pg-orange); }
768  .product-caption { font-size: 17px; color: var(--muted); line-height: 1.65; margin-bottom: 32px; }
769  .stat-row { display: flex; gap: 28px; flex-wrap: wrap; }
770  .mini-stat { display: flex; flex-direction: column; gap: 2px; }
771  .mini-stat .num { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--pg-orange); line-height: 1; }
772  .mini-stat .lbl { font-size: 12px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
773  
774  /* ── FINAL CTA ───────────────────────────────────────── */
775  .final-cta {
776    text-align: center;
777    padding: 112px 0;
778    background: radial-gradient(900px 500px at 50% 120%, rgba(255,122,0,.08) 0%, transparent 70%), var(--bg);
779    border-top: 1px solid var(--border-soft);
780  }
781  .final-headline { font-size: clamp(44px, 7vw, 96px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.0; margin-bottom: 18px; }
782  .final-headline .orange { color: var(--pg-orange); }
783  .final-sub { font-size: 18px; color: var(--muted); max-width: 480px; margin: 0 auto 44px; line-height: 1.65; }
784  .final-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
785  .final-trust { font-size: 13px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
786  .final-trust span { display: flex; align-items: center; gap: 5px; }
787  .final-trust svg { width: 13px; height: 13px; stroke: var(--green); fill: none; stroke-width: 2.5; }
788  
789  /* ── FOOTER ──────────────────────────────────────────── */
790  .footer { border-top: 1px solid var(--border-soft); padding: 40px 0; }
791  .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
792  .footer-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--fg); }
793  .footer-logo-icon {
794    width: 28px; height: 28px;
795    border: 1.5px solid var(--pg-orange); border-radius: 7px;
796    display: flex; align-items: center; justify-content: center;
797  }
798  .footer-links { display: flex; gap: 24px; list-style: none; }
799  .footer-links a { font-size: 14px; color: var(--muted); transition: color .2s; }
800  .footer-links a:hover { color: var(--fg); }
801  .footer-copy { font-size: 13px; color: var(--muted); }
802
803  footer {
804    color: var(--muted);
805  }
806  footer .socialIconDiv {
807    height: 40px;
808    width: 40px;
809    display: inline-block;
810    padding: 0.5rem;
811    color: var(--muted);
812  }
813  footer p.sub {
814    color: #555;
815    margin-right: auto !important;
816    margin-left: auto !important;
817  }
818  footer div.divider {
819    border-top: 1px solid #111;
820    border-bottom: 1px solid #333;
821    margin: 30px 0;
822  }
823  footer div.last {
824    padding-bottom: 20px;
825  }
826  footer .socialIconDiv a svg {
827    fill: var(--muted);
828  }
829  a.footer-link {
830    color: #999;
831    text-decoration: none !important;
832    cursor: pointer;
833  }
834  
835  /* ── SCROLL REVEAL ───────────────────────────────────── */
836  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
837  .reveal.visible { opacity: 1; transform: translateY(0); }
838  .reveal-d1 { transition-delay: .08s; }
839  .reveal-d2 { transition-delay: .16s; }
840  .reveal-d3 { transition-delay: .24s; }
841  
842  /* ── RESPONSIVE ──────────────────────────────────────── */
843  @media (max-width: 900px) {
844    .hero-inner, .problem-inner, .solution-inner, .product-inner { grid-template-columns: 1fr; gap: 36px; }
845    .hero-visual { order: -1; }
846    .problem-img-card { order: -1; }
847    .benefits-grid { grid-template-columns: 1fr; }
848    .usecases-grid { grid-template-columns: repeat(2,1fr); }
849    .steps-grid { grid-template-columns: 1fr; }
850    .nav-links { display: none; }
851  }
852  @media (max-width: 600px) {
853    section { padding: 60px 0; }
854    .hero { padding-top: 88px; padding-bottom: 60px; }
855    .usecases-grid { grid-template-columns: 1fr; }
856    .hybrid-flow { flex-direction: column; }
857    .hero-actions, .final-actions { flex-direction: column; align-items: flex-start; }
858    .final-actions { align-items: center; }
859    .trust-bar { gap: 16px; }
860  }
861</style>
862</head>
863<body>
864
865
866<!-- STICKY NAV -->
867<nav class="navbar navbar-expand-lg sticky-top" id="nav">
868  <div class="container">
869    <a class="navbar-brand d-flex align-items-center gap-2 fw-bolder" href="./" style="color: var(--pg-orange);">
870      <img src="https://files.pitchgauge.com/images/logo.png" alt="Pitch Gauge" style="height:70px;width:auto;"/>
871      <span>Pitch&nbsp;Gauge</span>
872    </a>
873    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
874      <span class="navbar-toggler-icon"></span>
875    </button>
876    <div class="collapse navbar-collapse" id="navbarNav">
877      <ul class="navbar-nav mx-auto">
878        <li class="nav-item dropdown">
879          <a class="nav-link dropdown-toggle" href="#" id="ProductsDropdown" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Products</a>
880          <ul class="dropdown-menu" aria-labelledby="ProductsDropdown">
881            <li class="dropdown-submenu">
882              <a class="dropdown-item dropdown-toggle" href="/#pg-reports" id="pgReportsDropdown" role="button" data-pg-nested-dropdown aria-expanded="false">Measurements</a>
883              <ul class="dropdown-menu" aria-labelledby="pgReportsDropdown">
884                <li><a class="dropdown-item" href="/pg-reports">Roof &amp; Gutters</a></li>
885                <li><a class="dropdown-item" href="/pg-reports">Walls, Windows &amp; Doors</a></li>
886              </ul>
887            </li>
888            <li><a class="dropdown-item disabled" href="/pg-precise" aria-current="page" aria-disabled="true" tabindex="-1">PG Precise</a></li>
889            <li><a class="dropdown-item" href="/downloads">Pitch Gauge App</a></li>
890            <li><a class="dropdown-item" href="/#pg-crm">CRM</a></li>
891          </ul>
892        </li>
893        <li class="nav-item"><a class="nav-link" href="#how-it-works">How It Works</a></li>
894        <li class="nav-item"><a class="nav-link" href="#benefits">Benefits</a></li>
895        <li class="nav-item"><a class="nav-link" href="#use-cases">Who It's For</a></li>
896        <li class="nav-item d-none"><a class="nav-link" href="https://pitchgauge.com/pg-reports" target="_blank" rel="noopener">PG Reports</a></li>
897        <li class="nav-item d-none"><a class="nav-link" href="#pricing">Pricing</a></li>
898        <li class="nav-item"><a class="nav-link" href="https://blog.pitchgauge.com/">Blog</a></li>
899        <li class="nav-item"><a class="nav-link" href="/contact">Contact&nbsp;Us</a></li>
900      </ul>
901      <div class="d-flex align-items-center gap-2 mt-3 mt-lg-0">
902        <button class="theme-toggle" id="themeToggle" aria-label="Toggle light/dark mode" title="Switch theme">
903          <!-- Moon icon &#8212; visible in dark mode -->
904          <svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none"
905               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
906            <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/>
907          </svg>
908          <!-- Sun icon &#8212; visible in light mode -->
909          <svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none"
910               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
911            <circle cx="12" cy="12" r="5"/>
912            <line x1="12" y1="1" x2="12" y2="3"/>
913            <line x1="12" y1="21" x2="12" y2="23"/>
914            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
915            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
916            <line x1="1" y1="12" x2="3" y2="12"/>
917            <line x1="21" y1="12" x2="23" y2="12"/>
918            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
919            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
920          </svg>
921        </button>
922        <a class="btn btn-secondary d-none" href="/login">Login</a>
923        <a class="btn btn-primary" href="/signup">Get Started</a>
924      </div>
925    </div>
926  </div>
927</nav>
928<div class="container login-button-container"></div>
929
930
931
932<!-- HERO -->
933<section class="hero" id="top">
934  <div class="container">
935    <div class="hero-inner">
936      <div>
937        <div class="tag-pill"><span class="tag-pill-dot"></span> Free Roof Measurement Software</div>
938        <h1 class="hero-headline">
939          Free Roof Measurement<br>Software <span class="orange">Built for<br>Contractors</span>
940        </h1>
941        <p class="hero-sub">Measure roofs in minutes, close jobs faster, and skip waiting on reports.</p>
942        <div class="hero-actions">
943          <a href="#start" class="btn btn-primary btn-lg">Start Measuring for Free</a>
944          <a href="#how-it-works" class="btn btn-ghost">See How It Works</a>
945        </div>
946        <div class="trust-bar">
947          <div class="trust-item">
948            <span class="trust-number">3M+</span>
949            <span class="trust-label">Downloads</span>
950          </div>
951          <div class="trust-divider"></div>
952          <div class="trust-item">
953            <span class="trust-number">100K+</span>
954            <span class="trust-label">Contractors Monthly</span>
955          </div>
956          <div class="trust-divider"></div>
957          <div class="trust-item">
958            <span class="trust-number">$0</span>
959            <span class="trust-label">No Subscription</span>
960          </div>
961        </div>
962      </div>
963      <div class="hero-visual reveal">
964        <div class="hero-card">
965          <div class="hero-card-head">
966            <span>PG Precise&#x2122; &#8212; Roof Measurement</span>
967            <span style="color:var(--pg-orange);font-weight:700;">Free</span>
968          </div>
969          <div class="hero-card-img">
970            <img src="images/pg-precise-pro-showing.png" alt="Contractor using PG Precise on his phone">
971            <div class="hero-data-badge">
972              <span class="big-num">2,856</span>
973              <span style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;">Total Sq Ft</span>
974            </div>
975          </div>
976        </div>
977      </div>
978    </div>
979  </div>
980</section>
981
982<!-- PROBLEM -->
983<section class="sect-alt" id="problem">
984  <div class="container">
985    <div class="problem-inner">
986      <div class="reveal">
987        <div class="problem-img-card">
988          <img src="images/pg-precise-old-vs-new.png" alt="Old way vs better way with PG Precise">
989        </div>
990      </div>
991      <div class="reveal reveal-d1">
992        <div class="eyebrow">The Problem</div>
993        <h2 class="problem-headline">Still Waiting<br>on Roof Reports?</h2>
994        <p class="problem-lead">Every delay costs you a deal.</p>
995        <ul class="pain-list">
996          <li class="pain-item">
997            <span class="pain-icon"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
998            Climbing roofs slows you down
999          </li>
1000          <li class="pain-item">
1001            <span class="pain-icon"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
1002            Manual measurements create errors
1003          </li>
1004          <li class="pain-item">
1005            <span class="pain-icon"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
1006            Waiting on reports kills momentum
1007          </li>
1008        </ul>
1009        <p class="problem-kicker">Your competition isn't waiting.</p>
1010      </div>
1011    </div>
1012  </div>
1013</section>
1014
1015<!-- SOLUTION -->
1016<section class="sect-plain" id="solution">
1017  <div class="container">
1018    <div class="solution-inner">
1019      <div class="reveal">
1020        <div class="eyebrow">The Solution</div>
1021        <h2 class="solution-headline">Meet<br><span class="orange">PG Precise&#x2122;</span></h2>
1022        <p class="solution-sub">Free roof measurement software that puts you in control.</p>
1023        <ul class="feature-list">
1024          <li class="feature-item">
1025            <span class="check-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
1026            Measure directly from your phone
1027          </li>
1028          <li class="feature-item">
1029            <span class="check-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
1030            Trace and calculate instantly
1031          </li>
1032          <li class="feature-item">
1033            <span class="check-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
1034            Save measurements into projects
1035          </li>
1036          <li class="feature-item">
1037            <span class="check-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
1038            Built for real job sites &#8212;
1038 not offices
1039          </li>
1040        </ul>
1041        <a href="#start" class="btn btn-primary">Try It Free</a>
1042      </div>
1043      <div class="reveal reveal-d2">
1044        <div class="solution-img-card">
1045          <img src="images/pg-precise-pro.png" alt="Contractor using PG Precise to measure a roof">
1046        </div>
1047      </div>
1048    </div>
1049  </div>
1050</section>
1051
1052<!-- HOW IT WORKS -->
1053<section class="sect-alt" id="how-it-works">
1054  <div class="container">
1055    <div class="section-header">
1056      <div class="eyebrow">How It Works</div>
1057      <h2 class="section-headline">Three Steps. Done.</h2>
1058      <p class="section-sub">From address to full roof measurement in minutes. No training required.</p>
1059    </div>
1060    <div class="steps-grid">
1061      <div class="step-card reveal" data-num="01">
1062        <div class="step-dot">1</div>
1063        <h3 class="step-title">Search the Address</h3>
1064        <p class="step-desc">Search any address or drop a pin directly on the map.</p>
1065        <p class="step-note">Measure from anywhere &#8212; no site visit needed to start.</p>
1066      </div>
1067      <div class="step-card reveal reveal-d1" data-num="02">
1068        <div class="step-dot">2</div>
1069        <h3 class="step-title">Trace the Roof</h3>
1070        <p class="step-desc">Draw lines along every edge. Adjust corners for total accuracy.</p>
1071        <p class="step-note">Refine every edge &#8212; nail your pitch, hips, and valleys.</p>
1072      </div>
1073      <div class="step-card reveal reveal-d2" data-num="03">
1074        <div class="step-dot">3</div>
1075        <h3 class="step-title">Get Measurements</h3>
1076        <p class="step-desc">Squares, edge lengths, slopes &#8212; all calculated on the spot.</p>
1077        <p class="step-note">Ready to quote instantly. No waiting on anyone.</p>
1078      </div>
1079    </div>
1080    <div class="how-cta">
1081      <a href="#start" class="btn btn-primary btn-lg">Start Measuring Now</a>
1082    </div>
1083  </div>
1084</section>
1085
1086<!-- BENEFITS -->
1087<section class="sect-plain" id="benefits">
1088  <div class="container">
1089    <div class="section-header">
1090      <div class="eyebrow">Why Contractors Switch</div>
1091      <h2 class="section-headline">Speed. Accuracy. Control.</h2>
1092    </div>
1093    <div class="benefits-grid">
1094      <div class="benefit-card reveal">
1095        <div class="benefit-icon-wrap">&#x26A1;</div>
1096        <div>
1097          <div class="benefit-title">Speed</div>
1098          <p class="benefit-desc">Measure a full roof in minutes, not hours. Quote while your competition is still on the ladder.</p>
1099        </div>
1100      </div>
1101      <div class="benefit-card reveal reveal-d1">
1102        <div class="benefit-icon-wrap">&#x1F3AF;</div>
1103        <div>
1104          <div class="benefit-title">Accuracy</div>
1105          <p class="benefit-desc">Dial in every edge, pitch, and slope. Eliminate costly measurement errors before they become callbacks.</p>
1106        </div>
1107      </div>
1108      <div class="benefit-card reveal reveal-d2">
1109        <div class="benefit-icon-wrap">&#x1F6E0;</div>
1110        <div>
1111          <div class="benefit-title">Control</div>
1112          <p class="benefit-desc">No waiting on a third party. You run the measurement, you own the data, you close the deal.</p>
1113        </div>
1114      </div>
1115      <div class="benefit-card reveal reveal-d3">
1116        <div class="benefit-icon-wrap">&#x1F4C8;</div>
1117        <div>
1118          <div class="benefit-title">More Closed Jobs</div>
1119          <p class="benefit-desc">Move faster than competitors. When you quote first, you win first. Speed is your unfair advantage.</p>
1120        </div>
1121      </div>
1122    </div>
1123  </div>
1124</section>
1125
1126<!-- HYBRID MODEL -->
1127<section class="sect-alt" id="pricing">
1128  <div class="container">
1129    <div class="section-header">
1130      <div class="eyebrow">Pricing</div>
1131      <h2 class="section-headline">Start Free. Scale When You Need It.</h2>
1132      <p class="section-sub">No subscription. No lock-in. Use PG Precise free every day &#8212; upgrade when a job needs certified documentation.</p>
1133    </div>
1134    <div class="hybrid-flow">
1135      <div class="hybrid-box active">
1136        <div class="hybrid-label">PG Precise</div>
1137        <div class="hybrid-sublabel">Roof Measurement</div>
1138        <div class="hybrid-free-badge">Free</div>
1139      </div>
1140      <div class="hybrid-arrow">&#x2192;</div>
1141      <div class="hybrid-box">
1142        <div class="hybrid-label">PG Reports</div>
1143        <div class="hybrid-sublabel">Certified Documentation</div>
1144      </div>
1145    </div>
1146    <p class="hybrid-copy">
1147      Upgrade to <a href="https://pitchgauge.com/pg-reports" target="_blank" rel="noopener" style="color:var(--pg-orange);font-weight:600;">PG Reports</a> when a job needs certified documentation &#8212; no subscription lock-in.
1148    </p>
1149    <div class="hybrid-cta">
1150      <a href="#start" class="btn btn-primary btn-lg">Start Free &rarr; Upgrade Anytime</a>
1151    </div>
1152  </div>
1153</section>
1154
1155<!-- USE CASES -->
1156<section class="sect-plain" id="use-cases">
1157  <div class="container">
1158    <div class="section-header">
1159      <div class="eyebrow">Who Uses It</div>
1160      <h2 class="section-headline">Built for the Trades</h2>
1161    </div>
1162    <div class="usecases-grid">
1163      <div class="usecase-card reveal">
1164        <div class="usecase-icon">&#x1F3E0;</div>
1165        <h3 class="usecase-title">Roofing Contractors</h3>
1166        <p class="usecase-desc">Close more deals with faster estimates. Quote on the spot, win the job before anyone else gets there.</p>
1167      </div>
1168      <div class="usecase-card reveal reveal-d1">
1169        <div class="usecase-icon">&#x1F4CB;</div>
1170        <h3 class="usecase-title">Insurance Adjusters</h3>
1171        <p class="usecase-desc">Validate claims without delays. Accurate roof data in hand before you leave the driveway.</p>
1172      </div>
1173      <div class="usecase-card reveal reveal-d2">
1174        <div class="usecase-icon">&#x2600;</div>
1175        <h3 class="usecase-title">Solar Teams</h3>
1176        <p class="usecase-desc">Plan installs with accurate roof data. Know square footage, pitch, and layout before the crew shows up.</p>
1177      </div>
1178      <div class="usecase-card reveal reveal-d3">
1179        <div class="usecase-icon">&#x1F50D;</div>
1180        <h3 class="usecase-title">Inspectors</h3>
1181        <p class="usecase-desc">
1181Document properties efficiently. Capture and save accurate measurements to every project file.</p>
1182      </div>
1183    </div>
1184  </div>
1185</section>
1186
1187<!-- PRODUCT IN ACTION -->
1188<section class="sect-alt" id="product">
1189  <div class="container">
1190    <div class="product-inner">
1191      <div class="reveal">
1192        <div class="product-img-card">
1193          <img src="images/pg-precise.png" alt="PG Precise measuring a roof from aerial view">
1194        </div>
1195      </div>
1196      <div class="reveal reveal-d1">
1197        <div class="eyebrow">Product in Action</div>
1198        <h2 class="product-headline">Measure. Calculate.<br><span class="orange">Close.</span></h2>
1199        <p class="product-caption">Measure roofs. Generate data. Close jobs &#8212; faster than anyone waiting on a third-party report.</p>
1200        <div class="stat-row">
1201          <div class="mini-stat"><span class="num">3M+</span><span class="lbl">Downloads</span></div>
1202          <div class="mini-stat"><span class="num">100K+</span><span class="lbl">Contractors</span></div>
1203          <div class="mini-stat"><span class="num">Free</span><span class="lbl">Always</span></div>
1204        </div>
1205      </div>
1206    </div>
1207  </div>
1208</section>
1209
1210<!-- FINAL CTA -->
1211<section class="final-cta" id="start">
1212  <div class="container">
1213    <h2 class="final-headline">
1214      Stop Waiting.<br>
1215      <span class="orange">Start Measuring.</span>
1216    </h2>
1217    <p class="final-sub">Free roof measurement software built for contractors who move fast.</p>
1218    <div class="final-actions">
1219      <a href="#" class="btn btn-primary btn-lg">Start Measuring for Free</a>
1220      <a href="https://pitchgauge.com/pg-reports" target="_blank" rel="noopener" class="btn btn-ghost btn-lg">Get Professional Reports</a>
1221    </div>
1222    <div class="final-trust">
1223      <span><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> No subscription required</span>
1224      <span><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Free forever</span>
1225      <span><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> 100,000+ contractors monthly</span>
1226    </div>
1227  </div>
1228</section>
1229
1230<!-- FOOTER -->
1231<footer class="pb-md-0 section">
1232  <div id="footer" class="stripe-color">
1233    <div class="container">
1234      <div class="row">
1235        <div class="col-3"></div>
1236        <div class="col-3"></div>
1237      </div>
1238      <div class="row last">
1239        <div class="col-12">
1240          <div class="py-3 text-center">
1241            <div class="footer-icons">
1242              <div class="socialIconDiv twitter"><a href="https://www.twitter.com/pitchgauge"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg></a></div>
1243              <div class="socialIconDiv instagram"><a href="https://instagram.com/pitchgauge/"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="21" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a></div>
1244              <div class="socialIconDiv facebook"><a href="https://www.facebook.com/pitchgauge"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="15" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"></path></svg></a></div>
1245              <div class="socialIconDiv linkedin"><a href="https://www.linkedin.com/company/pitchgauge"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="21" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"></path></svg></a></div>
1246              <div class="socialIconDiv pinterest"><a href="https://www.pinterest.com/pitchgauge/"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="18" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"></path></svg></a></div>
1247              <div class="socialIconDiv youtube"><a href="https://www.youtube.com/pitchgauge"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="27" viewB
1247ox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"></path></svg></a></div>
1248              <div class="socialIconDiv tiktok"><a href="https://www.tiktok.com/pitchgauge/"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="21" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"></path></svg></a></div>
1249            </div>
1250            <br>
1251            <div class="footer-nav">
1252              <a class="footer-link" href="https://files.pitchgauge.com/privacypolicy.pdf">Privacy Policy</a> &nbsp; &nbsp; &nbsp;
1253              <a class="footer-link" href="https://files.pitchgauge.com/termsofuse.pdf">Terms of Use</a> &nbsp; &nbsp; &nbsp;
1254              <a class="footer-link" href="https://files.pitchgauge.com/eula.pdf">EULA</a> &nbsp; &nbsp; &nbsp;
1255              <a class="footer-link" href="https://files.pitchgauge.com/pitchgaugepresskit.zip">Press Kit</a>&nbsp; &nbsp; &nbsp;
1256              <a class="footer-link" href="https://files.pitchgauge.com/Pitch-Gauge-white-paper-v3-0.pdf">White Paper</a>&nbsp; &nbsp; &nbsp;
1257            </div>
1258            <p class="sub">&copy;<span id="y"></span> Pitch Gauge LLC. All rights reserved.<br>Pitch Gauge<span class="pg-reg-hidden">&reg;</span> is a registered trademark of Pitch Gauge LLC.</p>
1259          </div>
1260        </div>
1261      </div>
1262    </div>
1263  </div>
1264</footer>
1265<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1265
1265
1266<script>
1267  (function(){
1268    const productsDropdown = document.getElementById('ProductsDropdown');
1269    const productsMenu = document.querySelector('[aria-labelledby="ProductsDropdown"]');
1270    const nestedDropdownToggles = document.querySelectorAll('.dropdown-submenu > [data-pg-nested-dropdown]');
1271
1272    function closeNestedDropdowns(exceptMenu) {
1273      document.querySelectorAll('.dropdown-submenu > .dropdown-menu.show').forEach((menu) => {
1274        if (menu === exceptMenu) return;
1275        menu.classList.remove('show');
1276        const toggle = menu.previousElementSibling;
1277        if (toggle) toggle.setAttribute('aria-expanded', 'false');
1278      });
1279    }
1280
1281    nestedDropdownToggles.forEach((toggle) => {
1282      toggle.addEventListener('click', (event) => {
1283        event.preventDefault();
1284        event.stopPropagation();
1285
1286        const submenu = toggle.nextElementSibling;
1287        if (!submenu) return;
1288
1289        closeNestedDropdowns(submenu);
1290        const isOpen = submenu.classList.toggle('show');
1291        toggle.setAttribute('aria-expanded', String(isOpen));
1292      });
1293    });
1294
1295    productsDropdown?.addEventListener('hide.bs.dropdown', () => {
1296      closeNestedDropdowns();
1297    });
1298
1299    productsMenu?.addEventListener('click', (event) => {
1300      if (!event.target.closest('.dropdown-submenu')) {
1301        closeNestedDropdowns();
1302      }
1303    });
1304  })();
1305
1306  // Footer year (guarded)
1307  (function(){
1308    const y = document.getElementById('y');
1309    if (y) y.textContent = new Date().getFullYear();
1310  })();
1311
1312  // ── THEME TOGGLE ──────────────────────────────────────────
1313  const html = document.documentElement;
1314  const toggleBtn = document.getElementById('themeToggle');
1315  const THEME_KEY = 'pg-reports-theme';
1316  
1317  const savedTheme = localStorage.getItem(THEME_KEY) || 'dark';
1318  html.setAttribute('data-theme', savedTheme);
1319  
1320  toggleBtn.addEventListener('click', () => {
1321    const current = html.getAttribute('data-theme');
1322    const next = current === 'dark' ? 'light' : 'dark';
1323    html.setAttribute('data-theme', next);
1324    localStorage.setItem(THEME_KEY, next);
1325    updateNavBorder();
1326  });
1327  
1328  // ── SCROLL REVEAL ─────────────────────────────────────────
1329  const revealEls = document.querySelectorAll('.reveal');
1330  const observer = new IntersectionObserver((entries) => {
1331    entries.forEach(e => {
1332      if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); }
1333    });
1334  }, { threshold: 0.1 });
1335  revealEls.forEach(el => observer.observe(el));
1336  
1337  // ── NAV BORDER SCROLL ─────────────────────────────────────
1338  const nav = document.getElementById('nav');
1339  function updateNavBorder() {
1340    const isDark = html.getAttribute('data-theme') === 'dark';
1341    if (window.scrollY > 30) {
1342      nav.style.borderBottomColor = isDark ? 'rgba(255,255,255,.09)' : 'rgba(0,0,0,.11)';
1343    } else {
1344      nav.style.borderBottomColor = '';
1345    }
1346  }
1347  window.addEventListener('scroll', updateNavBorder, { passive: true });
1348  
1349  // ── FAQ ACCORDION ─────────────────────────────────────────
1350  document.querySelectorAll('.faq-q').forEach(btn => {
1351    btn.addEventListener('click', () => {
1352      const item = btn.closest('.faq-item');
1353      const isOpen = item.classList.contains('open');
1354      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
1355      if (!isOpen) item.classList.add('open');
1356    });
1357  });
1358</script>
1358
1359</body>
1360</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.