PageSourceSearch

https://www.flatratenow.net/pricing

html flatratenow.net collected 2026-10-04 06:56:15 UTC 179,128 bytes, 2,564 lines download raw bytes

1<!doctype html><html lang="en"><head>
2  <meta charset="utf-8">
3  <meta name="viewport" content="width=device-width, initial-scale=1">
4  <meta name="viewport" content="width=device-width, initial-scale=1">
5
6    
7    <meta property="og:description" content="Discover FlatRateNOW, the all-in-one quoting tool for tradies in AU &amp; NZ. Simplify your quoting process, enhance presentations, and boost sales effortlessly. Start your free trial today.">
8    <meta property="og:title" content="Pricing | FlatRateNOW">
9    <meta name="twitter:description" content="Discover FlatRateNOW, the all-in-one quoting tool for tradies in AU &amp; NZ. Simplify your quoting process, enhance presentations, and boost sales effortlessly. Start your free trial today.">
10    <meta name="twitter:title" content="Pricing | FlatRateNOW">
11
12    
13
14    
15    <style>
16a.cta_button{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;vertical-align:middle}.hs-breadcrumb-menu{list-style-type:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px}.hs-breadcrumb-menu-item{float:left;padding:10px 0px 10px 10px}.hs-breadcrumb-menu-divider:before{content:'›';padding-left:10px}.hs-featured-image-link{border:0}.hs-featured-image{float:right;margin:0 0 20px 20px;max-width:50%}@media (max-width: 568px){.hs-featured-image{float:none;margin:0;width:100%;max-width:100%}}.hs-screen-reader-text{clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px}
17</style>
18
19    
20
21    
22<!--  Added by GoogleAnalytics4 integration -->
23<script data-cookieconsent="ignore">
24var _hsp = window._hsp = window._hsp || [];
25window.dataLayer = window.dataLayer || [];
26function gtag(){dataLayer.push(arguments);}
27
28var useGoogleConsentModeV2 = true;
29var waitForUpdateMillis = 1000;
30
31
32if (!window._hsGoogleConsentRunOnce) {
33  window._hsGoogleConsentRunOnce = true;
34
35  gtag('consent', 'default', {
36    'ad_storage': 'denied',
37    'analytics_storage': 'denied',
38    'ad_user_data': 'denied',
39    'ad_personalization': 'denied',
40    'wait_for_update': waitForUpdateMillis
41  });
42
43  if (useGoogleConsentModeV2) {
44    _hsp.push(['useGoogleConsentModeV2'])
45  } else {
46    _hsp.push(['addPrivacyConsentListener', function(consent){
47      var hasAnalyticsConsent = consent && (consent.allowed || (consent.categories && consent.categories.analytics));
48      var hasAdsConsent = consent && (consent.allowed || (consent.categories && consent.categories.advertisement));
49
50      gtag('consent', 'update', {
51        'ad_storage': hasAdsConsent ? 'granted' : 'denied',
52        'analytics_storage': hasAnalyticsConsent ? 'granted' : 'denied',
53        'ad_user_data': hasAdsConsent ? 'granted' : 'denied',
54        'ad_personalization': hasAdsConsent ? 'granted' : 'denied'
55      });
56    }]);
57  }
58}
59
60gtag('js', new Date());
61gtag('set', 'developer_id.dZTQ1Zm', true);
62gtag('config', 'G-SZFPVFE1QH');
63</script>
vendor: 92 bytes, lines 63-64
63
64<script data-cookieconsent="ignore" async src="https://www.googletagmanager.com/gtag/js?id=
64G-SZFPVFE1QH
vendor: 13 bytes, lines 64-65
64"></script>
65
66<!-- /Added by GoogleAnalytics4 integration -->
67
68<!--  Added by GoogleTagManager integration -->
69<script data-cookieconsent="ignore">
70var _hsp = window._hsp = window._hsp || [];
71window.dataLayer = window.dataLayer || [];
72function gtag(){dataLayer.push(arguments);}
73
74var useGoogleConsentModeV2 = true;
75var waitForUpdateMillis = 1000;
76
77if (useGoogleConsentModeV2) {
78
79  gtag('set','developer_id.dZTQ1Zm',true);
80
81  gtag('consent', 'default', {
82  'ad_storage': 'denied',
83  'analytics_storage': 'denied',
84  'ad_user_data': 'denied',
85  'ad_personalization': 'denied',
86  'wait_for_update': waitForUpdateMillis
87  });
88}
89
90var hsLoadGtm = function loadGtm() {
91    if(window._hsGtmLoadOnce) {
92      return;
93    }
94
95    if (useGoogleConsentModeV2) {
96      _hsp.push(['useGoogleConsentModeV2'])
97    }
vendor: 349 bytes, lines 97-103
97
98
99    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
100    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
101    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
102    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
103    })(window,document,'script','dataLayer','
103GTM-NVFNZVC
vendor: 9 bytes, lines 103-105
103');
104
105    
105window._hsGtmLoadOnce = true;
106};
107
108_hsp.push(['addPrivacyConsentListener', function(consent){
109  if(consent.allowed || (consent.categories && consent.categories.analytics)){
110    hsLoadGtm();
111  }
112}]);
113
114</script>
114
115
116<!-- /Added by GoogleTagManager integration -->
117
118    <link rel="canonical" href="https://www.flatratenow.net/pricing">
119
120<!-- Google Tag Manager -->
121<script>
vendor: 327 bytes, lines 121-125
121(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
122new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
123j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
124'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
125})(window,document,'script','dataLayer','
125GTM-NVFNZVC
vendor: 3 bytes, line 125
125');
125</script>
125
126<!-- End Google Tag Manager -->
127
128<script src="https://kit.fontawesome.com/4acb1cddb4.js" crossorigin="anonymous"></script>
vendor: 1 bytes, line 128
128
129<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
129
130<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,700&amp;display=swap" rel="stylesheet">
131
132
133<!-- generate apple smart banner meta tag -->
134<script>
135  var url = document.location.href;
136  var link = document.createElement('meta');
137  link.setAttribute('name', 'apple-itunes-app');
138  link.content = "app-id=1490951013, app-argument=" + url;
139  document.getElementsByTagName('head')[0].appendChild(link);
140</script>
140
141
142<!-- pull in required files to create google play smart banner -->
143<link rel="stylesheet" href="node_modules/smartbanner.js/dist/smartbanner.min.css">
144<script src="node_modules/smartbanner.js/dist/smartbanner.min.js"></script>
144
145<!-- Start SmartBanner configuration -->
146<meta name="smartbanner:title" content="FlatRateNOW Quoting">
147<meta name="smartbanner:author" content="FlatRateNOW">
148<meta name="smartbanner:price" content="GET">
149<meta name="smartbanner:price-suffix-google" content=" - On Google Play">
150<meta name="smartbanner:icon-google" content="https://www.flatratenow.net/hubfs/FRNIconTiny.png">
151<meta name="smartbanner:button" content="VIEW">
152<meta name="smartbanner:button-url-google" content="https://android/com.frn_react_native">
153<meta name="smartbanner:enabled-platforms" content="android">
154<meta name="smartbanner:close-label" content="Close">
155<!-- End SmartBanner configuration -->
156
157
158<meta property="og:url" content="https://www.flatratenow.net/pricing">
159<meta name="twitter:card" content="summary">
160<meta http-equiv="content-language" content="en">
161
162
163
164
165
166<!--
167  ============================================================================
168  FlatRateNOW — HEAD HTML  (Professional portal)
169  ============================================================================
170  WHERE THIS GOES:
171    Settings > Website > Pages  (or the page's Settings > Advanced)
172    → "Head HTML"  — OR your theme's global Head HTML if you want it site-wide.
173    Paste this whole block ONCE. Do not repeat it per module.
174
175  WHAT'S IN IT:
176    Shared design tokens + base styles + the HERO / demo-overlay styles.
177    As we convert each section, its CSS gets appended into this same <style>
178    block (kept in one place so tokens resolve everywhere).
179
180  NOTE:
181    All colours are hardcoded hex (no var()). We tested var() in a render and
182    it collapsed to transparent — same failure you hit in Design Tools — so this
183    flattened version is the safe one. Future colour changes are find-and-replace
184    on the hex value.
185  ============================================================================
186-->
187<link rel="preconnect" href="https://fonts.googleapis.com">
188<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
189<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet">
190<style>
191/* ---------- TOKENS ---------- */
192.frn-scope{
193  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
194  color:#0F1B2A;
195  -webkit-font-smoothing:antialiased;
196  line-height:1.5;
197}
198.frn-scope *,.frn-scope *::before,.frn-scope *::after{box-sizing:border-box;}
199/* Defensive: neutralise the HubSpot theme's default <button> styling inside our
200   scope. Our own button classes (.frn-btn, pills, tabs) re-apply their intended
201   look on top. This stops the theme painting bare/utility buttons blue on
202   hover/focus/active (which hit the FAQ, the accordion and the price toggle). */
203.frn-scope button{background:none;border:none;color:inherit;font:inherit;}
204.frn-scope button:focus,.frn-scope button:active{outline:none;}
205.frn-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
206.frn-scope h1,.frn-scope h2,.frn-scope h3{margin:0;line-height:1.1;letter-spacing:-.02em;}
207.frn-scope p{margin:0;}
208.frn-eyebrow{
209  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
210  text-transform:uppercase;color:#1E6FE8;margin-bottom:14px;
211}
212.frn-btn{
213  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;
214  padding:14px 26px;border-radius:999px;text-decoration:none;cursor:pointer;
215  border:0;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
216}
217.frn-btn-primary{background:#10B981;color:#fff;box-shadow:0 8px 20px -8px rgba(16,185,129,.6);}
218.frn-btn-primary:hover{background:#0E9E6E;transform:translateY(-1px);}
219.frn-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.55);}
220.frn-btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;}
221.frn-btn-dark{background:#0B2A4A;color:#fff;}
222.frn-btn-dark:hover{background:#12395F;transform:translateY(-1px);}
223.frn-scope :focus-visible{outline:3px solid #1E6FE8;outline-offset:2px;}
224/* Force button text colours over HubSpot theme link defaults */
225.frn-scope a.frn-btn-primary,.frn-scope a.frn-btn-primary:visited{color:#fff;}
226.frn-scope a.frn-btn-ghost,.frn-scope a.frn-btn-ghost:visited{color:#fff;}
227
228/* ---- FULL-BLEED BREAK-OUT ----
229   The home.html template wraps body modules in a padded, max-width content
230   column. Full-width sections (hero, stat band, final CTA) break out of it
231   with viewport-width negative margins. If the site ever gets a horizontal
232   scrollbar from this, tell me — it means the template column has its own
233   margin and we switch to a targeted wrapper override instead. */
234/* ---- FULL-BLEED: every section is an edge-to-edge band ----
235   Instead of listing individual sections, every .frn-scope section breaks out
236   of the template's padded content column to run full viewport width. This
237   makes each section's background fill edge-to-edge (bands of colour), and
238   cancels the template column's horizontal padding in one move.
239   Internal content stays centred and width-capped via each section's own
240   .frn-wrap (max-width:1180px, auto margins), so text never touches the edge. */
241.frn-scope{
242  width:100vw;
243  max-width:100vw;
244  margin-left:calc(50% - 50vw);
245  margin-right:calc(50% - 50vw);
246  display:block;
247}
248/* legacy hooks kept as no-ops in case referenced elsewhere */
249.frn-hero,
250.frn-how,
251.frn-final,
252.frn-full-bleed{width:100%;max-width:100%;margin-left:0;margin-right:0;}
253
254/* ---- VERTICAL SPACING RESET ----
255   HubSpot wraps each module in a row/column container that may add its own
256   top/bottom padding, compounding into big gaps. This targets the common
257   wrapper class patterns. If a gap survives, it's this wrapper's vertical
258   padding under a class not listed here — inspect the gap and send the class.*/
259.dnd-row:has(.frn-scope),.dnd-column:has(.frn-scope),.dnd-module:has(.frn-scope),
260.row-fluid-wrapper:has(.frn-scope),.span12:has(.frn-scope),
261[class*="dnd"]:has(> .frn-scope),[class*="widget"]:has(> .frn-scope){
262  padding-top:0 !important;padding-bottom:0 !important;
263  margin-top:0 !important;margin-bottom:0 !important;
264}
265
266/* ============================ HERO (stacked) ============================ */
267.frn-hero{
268  background:
269    radial-gradient(1200px 520px at 50% -10%,rgba(30,111,232,.24),transparent 62%),
270    linear-gradient(160deg,#0B2A4A 0%,#0A2340 60%,#081D34 100%);
271  color:#fff;overflow:hidden;position:relative;
272}
273.frn-hero-copy{padding:66px 24px 0;text-align:center!important;}
274/* template can force left-align on inherited text; pin every hero-copy child centre.
275   Belt-and-braces: high-specificity text-align AND a flex column so the block
276   centres even if some theme rule still wins on text-align. */
277.frn-scope .frn-hero .frn-hero-copy{
278  display:flex;flex-direction:column;align-items:center;
279}
280.frn-scope .frn-hero .frn-hero-copy > *{text-align:center!important;}
281.frn-scope .frn-hero .frn-hero-copy h1,
282.frn-scope .frn-hero .frn-hero-copy p,
283.frn-scope .frn-hero .frn-hero-copy .frn-hero-sub{
284  text-align:center!important;width:100%;
285}
286.frn-hero h1{font-size:50px;font-weight:800;margin-bottom:20px;max-width:900px;margin-left:auto;margin-right:auto;}
287.frn-hero h1 em{font-style:normal;color:#7FB2FF;}
288.frn-hero-sub{font-size:19px;color:#C7D6E8;max-width:660px;margin:0 auto 30px;}
289.frn-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px;justify-content:center;}
290.frn-hero-trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px;color:#AFC2D8;justify-content:center;}
291.frn-stars{color:#FFC24B;letter-spacing:2px;font-size:15px;}
292.frn-hero-trust .frn-sep{opacity:.4;}
293/* demo sits centre stage beneath the copy and bleeds into the section below */
294.frn-hero-demo{padding:44px 24px 0;display:flex;flex-direction:column;align-items:center;}
295.frn-hero-demo>div{width:100%;display:flex;justify-content:center;}
296/* feature pill row above the demo */
297.frn-hero-pills{display:flex!important;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px;width:auto!important;}
298.frn-hero-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#C7D6E8;font-family:inherit;font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap;}
299.frn-hero-pill:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5);}
300.frn-hero-pill.active{background:#fff;color:#0B2A4A;border-color:#fff;}
301.frn-gf-empty{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#7FB2FF;font-size:14px;font-weight:600;background:repeating-linear-gradient(45deg,#0E2038,#0E2038 10px,#0A1A2E 10px,#0A1A2E 20px);}
302/* label bar above the demo — tells people it's interactive */
303.frn-demo-label{display:flex!important;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;width:auto!important;}
304.frn-demo-cue{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#BFD4EC;letter-spacing:.01em;}
305.frn-demo-pulse{width:9px;height:9px;border-radius:50%;background:#10B981;box-shadow:0 0 0 0 rgba(16,185,129,.7);animation:frn-pulse 2.2s infinite;flex:none;}
306@keyframes frn-pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.65);}70%{box-shadow:0 0 0 10px rgba(16,185,129,0);}100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}}
306
307.frn-demo-expand{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;font-family:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s;}
308.frn-demo-expand:hover{background:rgba(255,255,255,.2);border-color:#fff;}
309.frn-expand-ico{width:12px;height:12px;border:2px solid currentColor;border-radius:2px;display:inline-block;position:relative;}
310.frn-expand-ico::after{content:"";position:absolute;right:-4px;top:-4px;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;}
311.frn-hero-gf{border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(11,42,74,.32);background:#0A1420;width:100%;}
312/* DESKTOP = landscape screen; Guideflow's embed renders its own browser chrome
313   (traffic-light dots, nav arrows, title pill) inside the iframe, so we just
314   give it a clean rounded, shadowed container. */
315.frn-hero-gf.is-desktop{max-width:940px;}
316.frn-hero-gf.is-mobile{max-width:300px;border:8px solid #0A1420;border-radius:26px;}
317.frn-hero-gf iframe{border-radius:16px;}
318
319/* ---- full-screen demo overlay ---- */
320.frn-demo-overlay{position:fixed;inset:0;z-index:9999;background:rgba(6,18,32,.97);display:flex;flex-direction:column;}
321.frn-demo-overlay[hidden]{display:none;}
322.frn-demo-overlay-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.12);flex:none;}
323.frn-demo-overlay-title{color:#C7D6E8;font-size:14px;font-weight:600;}
324.frn-demo-close{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;font-family:inherit;font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;}
325.frn-demo-close:hover{background:rgba(255,255,255,.2);border-color:#fff;}
326.frn-demo-overlay-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;}
327.frn-demo-overlay-stage .frn-hero-gf{border-radius:14px;max-height:100%;}
328.frn-demo-overlay-stage .frn-hero-gf.is-desktop{max-width:min(1200px,94vw);}
329.frn-demo-overlay-stage .frn-hero-gf.is-mobile{max-width:min(360px,86vw);border-radius:26px;}
330body.frn-noscroll{overflow:hidden;}
331@media(max-width:900px){
332  .frn-hero-copy{padding:46px 24px 0;}
333  .frn-hero h1{font-size:34px;}
334  .frn-hero-sub{font-size:17px;}
335  .frn-hero-demo{padding:32px 24px 0;}
336  .frn-demo-label{gap:12px;}
337  .frn-demo-cue{font-size:12.5px;}
338}
339
340/* ============================ INTEGRATION LOGO STRIP ============================ */
341.frn-logos{background:#fff;border-bottom:1px solid #E4E9EF;padding:26px 0;}
342.frn-logos-inner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
343.frn-logos-label{font-size:13px;color:#5A6B7B;font-weight:600;margin-right:8px;}
344.frn-logo-pill{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:8px;padding:9px 16px;font-weight:700;color:#5A6B7B;font-size:13px;}
345
346/* ============================ STAT BAND ============================ */
347.frn-stats{background:#fff;padding:64px 0;}
348.frn-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
349.frn-stat{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:16px;padding:26px 24px;text-align:left;}
350.frn-stat .frn-n{font-size:40px;font-weight:800;color:#0B2A4A;letter-spacing:-.03em;line-height:1;}
351.frn-stat .frn-n em{font-style:normal;color:#0B2A4A;}
352.frn-stat .frn-l{font-size:14px;color:#5A6B7B;margin-top:10px;font-weight:500;}
353.frn-stats-head{text-align:center;max-width:640px;margin:0 auto 40px;}
354.frn-stats-head h2{font-size:34px;color:#0B2A4A;margin-bottom:12px;}
355.frn-stats-head p{color:#5A6B7B;font-size:17px;}
356@media(max-width:900px){.frn-stats-grid{grid-template-columns:repeat(2,1fr);}}
357
358/* ============================ PROBLEM / SOLUTION ============================ */
359.frn-contrast{padding:78px 0;background:#F6F8FB;}
360.frn-contrast-head{text-align:center;max-width:680px;margin:0 auto 46px;}
361.frn-contrast-head h2{font-size:36px;color:#0B2A4A;margin-bottom:14px;}
362.frn-contrast-head h2 em{font-style:normal;color:#1E6FE8;}
363.frn-contrast-head p{color:#5A6B7B;font-size:17px;}
364.frn-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
365.frn-col{border-radius:16px;padding:32px;border:1px solid #E4E9EF;}
366.frn-col-bad{background:#F6F8FB;}
367.frn-col-good{background:#0B2A4A;color:#fff;border-color:#0B2A4A;}
368.frn-col h3{font-size:15px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px;}
369.frn-col-bad h3{color:#5A6B7B;}
370.frn-col-good h3{color:#7FB2FF;}
371.frn-cl{display:flex;gap:12px;align-items:flex-start;padding:12px 0;font-size:15.5px;}
372.frn-col-bad .frn-cl{color:#4A5A6A;border-bottom:1px solid #E4E9EF;}
373.frn-col-good .frn-cl{color:#DCE7F4;border-bottom:1px solid rgba(255,255,255,.1);}
374.frn-cl:last-child{border-bottom:0;}
375.frn-ic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px;}
376.frn-ic-x{background:#F1D6D6;color:#C0392B;}
377.frn-ic-y{background:#10B981;color:#fff;}
378@media(max-width:760px){.frn-cols{grid-template-columns:1fr;}}
379
380/* ===== FEATURE SELECTOR — base chip needed by mockups ===== */
381.frn-ai-chip{
382  flex:none;width:26px;height:26px;border-radius:8px;background:#1E6FE8;
383  color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;
384}
385/* ============================ FEATURE ROWS ============================ */
386.frn-features{padding:20px 0 40px;background:linear-gradient(180deg,#fff 0%,#F6F8FB 100%);}
387.frn-feat-head{text-align:center;max-width:680px;margin:32px auto 40px;}
388.frn-feat-head h2{font-size:36px;color:#0B2A4A;margin-bottom:14px;}
389.frn-feat-head p{color:#5A6B7B;font-size:17px;}
390.frn-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:28px 0;}
391.frn-row.rev .frn-row-media{order:-1;}
392.frn-row-num{font-size:13px;font-weight:700;color:#1E6FE8;letter-spacing:.1em;margin-bottom:14px;text-transform:uppercase;}
393.frn-row h3{font-size:28px;color:#0B2A4A;margin-bottom:16px;}
394.frn-row h3 em{font-style:normal;color:#1E6FE8;}
395.frn-row p{color:#5A6B7B;font-size:16.5px;margin-bottom:20px;}
396.frn-row ul{list-style:none;padding:0;margin:0 0 22px;}
397.frn-row li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:15.5px;color:#0F1B2A;}
398.frn-row li::before{content:"✓";color:#10B981;font-weight:800;flex:none;}
399.frn-scope a.frn-row-link,.frn-scope a.frn-row-link:visited{color:#1E6FE8;font-weight:600;text-decoration:none;font-size:15px;}
400.frn-row-link:hover{text-decoration:underline;}
401@media(max-width:860px){
402  .frn-row{grid-template-columns:1fr;gap:28px;padding:30px 0;}
403  .frn-row.rev .frn-row-media{order:0;}
404}
404
405
406/* ============================ FEATURE SELECTOR (Layout B) ============================ */
407.frn-fsel{margin-top:8px;}
408.frn-fsel-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px;}
409.frn-fsel-tab{background:#fff;border:1px solid #E4E9EF;border-radius:999px;padding:11px 20px;font-size:14px;font-weight:600;color:#5A6B7B;cursor:pointer;transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:7px;}
410.frn-fsel-tab:hover{border-color:#1E6FE8;color:#1E6FE8;}
411.frn-fsel-tab.active{background:#0B2A4A;border-color:#0B2A4A;color:#fff;}
412.frn-fsel-dot{width:7px;height:7px;border-radius:50%;background:#10B981;flex:none;}
413.frn-fsel-body{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;scroll-margin-top:16px;}
414.frn-fsel-copy .frn-row-num{font-size:13px;font-weight:700;color:#1E6FE8;letter-spacing:.1em;margin-bottom:12px;text-transform:uppercase;}
415.frn-fsel-copy h3{font-size:28px;color:#0B2A4A;margin-bottom:16px;}
416.frn-fsel-copy h3 em{font-style:normal;color:#1E6FE8;}
417.frn-fsel-copy p{color:#5A6B7B;font-size:16.5px;margin-bottom:20px;}
418.frn-fsel-copy ul{list-style:none;padding:0;margin:0 0 22px;}
419.frn-fsel-copy li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:15.5px;color:#0F1B2A;}
420.frn-fsel-copy li::before{content:"\2713";color:#10B981;font-weight:800;flex:none;}
421@media(max-width:860px){.frn-fsel-body{grid-template-columns:1fr;gap:28px;}}
422/* Guideflow embed inside a feature panel */
423.frn-gf{border-radius:14px;overflow:hidden;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);background:#FFFFFF;border:1px solid #E4E9EF;width:100%;}
424.frn-gf iframe{border-radius:14px;}
425/* portrait demos shouldn't stretch full width on desktop */
426@media(min-width:768px){.frn-fsel-media .frn-gf{max-width:100%;margin:0 auto;}}
427@media(max-width:767px){.frn-fsel-media .frn-gf{max-width:320px;margin:0 auto;border-radius:20px;}}
428
429/* mock: visual catalogue */
430.frn-cat{display:flex;flex-direction:column;gap:10px;}
431.frn-cat-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E4E9EF;border-radius:10px;padding:12px 14px;}
432.frn-cat-item.sel{border-color:#1E6FE8;box-shadow:0 6px 18px -8px rgba(30,111,232,.4);}
433.frn-cat-thumb{width:40px;height:40px;border-radius:9px;background:#EAF1FE;display:grid;place-items:center;font-size:20px;flex:none;}
434.frn-cat-t{font-size:14px;font-weight:700;color:#0B2A4A;}
435.frn-cat-t small{display:block;font-weight:400;color:#5A6B7B;font-size:12px;margin-top:2px;}
436.frn-cat-add{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#EAF1FE;color:#1E6FE8;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none;}
437.frn-cat-add.ok{background:#10B981;color:#fff;}
438
439/* generic media panel that holds the CSS mockups */
440.frn-panel{
441  background:linear-gradient(150deg,#EAF1FE 0%,#F4F8FF 100%);border:1px solid #D8E5FA;border-radius:16px;
442  padding:32px;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);min-height:300px;display:flex;flex-direction:column;justify-content:center;
443}
444
445/* mock: AI review list */
446.frn-airow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E4E9EF;border-radius:10px;padding:12px 14px;margin-bottom:10px;}
447.frn-airow:last-child{margin-bottom:0;}
448.frn-airow .frn-ai-chip{width:30px;height:30px;}
449.frn-airow .frn-ai-chip.warn{background:#F59E0B;}
450.frn-airow .frn-ai-chip.ok{background:#10B981;}
451.frn-airow .t{font-size:13.5px;color:#0F1B2A;font-weight:600;}
452.frn-airow .t small{display:block;font-weight:400;color:#5A6B7B;font-size:12px;margin-top:2px;}
453.frn-airow .add{margin-left:auto;font-size:12px;font-weight:700;color:#1E6FE8;border:1px solid #1E6FE8;border-radius:999px;padding:5px 12px;}
454
455/* mock: presentation — three clean side-by-side option cards */
456.frn-pres{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch;}
457.frn-pres-card{background:#fff;border:1px solid #E4E9EF;border-radius:12px;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);padding:16px 14px;text-align:center;display:flex;flex-direction:column;gap:4px;}
458.frn-pres-card.sel{border:2px solid #1E6FE8;box-shadow:0 12px 30px -10px rgba(30,111,232,.4);}
459.frn-pres-card .h{font-weight:700;font-size:12px;color:#5A6B7B;text-transform:uppercase;letter-spacing:.06em;}
460.frn-pres-card .p{font-size:22px;font-weight:800;color:#0B2A4A;margin-top:2px;}
461.frn-pres-card .tag{font-size:11px;color:#5A6B7B;}
462.frn-pres-card .pick{display:inline-block;margin-top:8px;font-size:10px;font-weight:700;background:#EAF1FE;color:#1E6FE8;padding:4px 8px;border-radius:999px;}
463
464/* mock: payment */
465.frn-pay{background:#fff;border:1px solid #E4E9EF;border-radius:12px;padding:20px;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);}
466.frn-pay .row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:#5A6B7B;}
467.frn-pay .row.total{border-top:1px solid #E4E9EF;margin-top:6px;padding-top:12px;color:#0F1B2A;font-weight:700;}
468.frn-pay .dep{background:#10B981;color:#fff;border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-weight:700;font-size:14px;}
469.frn-pay .dep small{display:block;font-weight:400;opacity:.85;font-size:11px;}
470
471/* mock: adjustment */
472.frn-adj{background:#fff;border:1px solid #E4E9EF;border-radius:12px;padding:20px;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);}
473.frn-adj .slider{height:6px;background:#E4E9EF;border-radius:999px;position:relative;margin:18px 0 22px;}
474.frn-adj .slider .fill{position:absolute;
474left:0;top:0;bottom:0;width:64%;background:#1E6FE8;border-radius:999px;}
475.frn-adj .slider .knob{position:absolute;left:64%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #1E6FE8;box-shadow:0 2px 6px rgba(0,0,0,.15);}
476.frn-adj .split{display:flex;gap:12px;}
477.frn-adj .split .b{flex:1;background:#F6F8FB;border-radius:10px;padding:12px;text-align:center;}
478.frn-adj .split .b .k{font-size:11px;color:#5A6B7B;text-transform:uppercase;letter-spacing:.06em;}
479.frn-adj .split .b .v{font-size:17px;font-weight:800;color:#0B2A4A;margin-top:4px;}
480.frn-adj .split .b .d{font-size:11px;font-weight:700;margin-top:2px;}
481.frn-adj .up{color:#10B981;}.frn-adj .down{color:#C0392B;}
482
483/* mock: follow-up timeline */
484.frn-flow{position:relative;padding-left:26px;}
485.frn-flow::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:#E4E9EF;}
486.frn-flow .step{position:relative;background:#fff;border:1px solid #E4E9EF;border-radius:10px;padding:11px 14px;margin-bottom:12px;font-size:13px;}
487.frn-flow .step:last-child{margin-bottom:0;}
488.frn-flow .step::before{content:"";position:absolute;left:-21px;top:16px;width:12px;height:12px;border-radius:50%;background:#1E6FE8;border:2px solid #fff;box-shadow:0 0 0 2px #1E6FE8;}
489.frn-flow .step .when{font-weight:700;color:#0B2A4A;}
490.frn-flow .step .ch{font-size:11px;font-weight:700;color:#1E6FE8;background:#EAF1FE;padding:2px 8px;border-radius:999px;margin-left:6px;}
491.frn-flow .step .msg{color:#5A6B7B;margin-top:4px;}
492
493/* mock: hot lead */
494.frn-hot{background:#fff;border:1px solid #E4E9EF;border-radius:12px;padding:18px;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);}
495.frn-hot .alert{display:flex;gap:12px;align-items:center;background:#FFF4E0;border:1px solid #FCD38B;border-radius:10px;padding:12px 14px;}
496.frn-hot .flame{width:34px;height:34px;border-radius:9px;background:#F59E0B;display:grid;place-items:center;font-size:17px;flex:none;}
497.frn-hot .alert .txt{font-size:13px;color:#8A5A00;font-weight:600;}
498.frn-hot .alert .txt small{display:block;font-weight:400;color:#B07A22;margin-top:2px;}
499.frn-hot .lead{display:flex;align-items:center;gap:12px;padding:12px 4px 2px;}
500.frn-hot .lead .av{width:34px;height:34px;border-radius:50%;background:#0B2A4A;color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;}
501.frn-hot .lead .nm{font-size:13.5px;font-weight:600;}
502.frn-hot .lead .nm small{display:block;color:#5A6B7B;font-weight:400;}
503.frn-hot .lead .call{margin-left:auto;background:#10B981;color:#fff;font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;}
504
505
506/* ============================ HOW IT WORKS (stepper) ============================ */
507.frn-how{background:#0B2A4A;color:#fff;padding:78px 0;}
508.frn-how-head{text-align:center;max-width:620px;margin:0 auto 48px;}
509.frn-how-head h2{font-size:34px;margin-bottom:12px;}
510.frn-how-head p{color:#B8C9DD;font-size:17px;}
511.frn-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
512.frn-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:26px 22px;}
513.frn-step .sn{width:36px;height:36px;border-radius:10px;background:#1E6FE8;display:grid;place-items:center;font-weight:800;margin-bottom:16px;}
514.frn-step h4{font-size:18px;margin:0 0 8px;}
515.frn-step p{color:#B8C9DD;font-size:14px;}
516@media(max-width:900px){.frn-steps{grid-template-columns:repeat(2,1fr);}}
517
518/* ============================ INTEGRATIONS ============================ */
519.frn-integ{background:#F6F8FB;padding:70px 0;text-align:center;}
520.frn-integ h2{font-size:32px;color:#0B2A4A;margin-bottom:14px;}
521.frn-integ p{color:#5A6B7B;font-size:17px;max-width:560px;margin:0 auto 36px;}
522.frn-integ-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
523.frn-integ-pill{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:12px;padding:16px 24px;font-weight:700;color:#0B2A4A;font-size:15px;min-width:130px;}
524
525/* ============================ TESTIMONIAL ============================ */
526.frn-testi{background:#fff;padding:74px 0;}
527.frn-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
528.frn-tcard{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:16px;padding:26px;}
529.frn-tcard .frn-stars{color:#FFB020;margin-bottom:14px;display:block;}
530.frn-tcard p{font-size:15px;color:#0F1B2A;margin-bottom:18px;}
531.frn-tcard .who{font-size:13.5px;font-weight:700;color:#0B2A4A;}
532.frn-tcard .who small{display:block;font-weight:400;color:#5A6B7B;margin-top:2px;}
533@media(max-width:860px){.frn-testi-grid{grid-template-columns:1fr;}}
534
535/* ============================ FINAL CTA ============================ */
536.frn-final{
537  background:linear-gradient(160deg,#0B2A4A 0%,#0A2340 100%);
538  color:#fff;padding:80px 0;text-align:center;
539}
540.frn-final h2{font-size:40px;margin-bottom:16px;}
541.frn-final h2 em{font-style:normal;color:#7FB2FF;}
542.frn-final p{color:#C7D6E8;font-size:18px;max-width:520px;margin:0 auto 30px;}
543.frn-final-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;}
544.frn-final-trust{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:14px;color:#AFC2D8;}
545.frn-final-trust span{display:flex;align-items:center;gap:8px;}
546.frn-final-trust .frn-tick{width:20px;height:20px;border-radius:50%;background:#10B981;color:#fff;display:grid;place-items:center;font-size:12px;}
547
548/* ============================ CUSTOMER CAROUSEL (Guideflow style) ============================ */
549.frn-cust{background:#fff;padding:56px 0 60px;overflow:hidden;}
550.frn-cust-head{text-align:center;max-width:640px;margin:0 auto 34px;padding:0 24px;}
551.frn-cust-head .frn-eyebrow{margin-bottom:10px;}
552.frn-cust-head h2{font-size:28px;color:#0B2A4A;margin-bottom:8px;letter-spacing:-.02em;}
553.frn-cust-head p{color:#5A6B7B;font-size:15.5px;}
554.frn-cust-rows{display:flex;flex-direction:column;gap:14px;}
555.frn-cust-row{position:relative;width:100%;overflow:hidden;
556  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
557          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
558.frn-cust-track{display:flex;align-items:center;gap:64px;width:max-content;
559  animation:frn-scroll-l 38s linear infinite;}
560.frn-cust-row.rev .frn-cust-track{animation-name:frn-scroll-r;animation-duration:38s;}
561.frn-cust-row.slow .frn-cust-track{animation-duration:46s;}
562.frn-cust-row:hover .frn-cust-track{animation-play-state:paused;}
563@keyframes frn-scroll-l{from{transform:translateX(0);}to{transform:translateX(-50%);}}
564@keyframes frn-scroll-r{from{transform:translateX(-50%);}to{transform:translateX(0);}}
565/* naked logo on white - no tile/border, like Guideflow */
566.frn-cust-logo{flex:none;height:34px;display:flex;align-items:center;justify-content:center;
567  color:#5A6B7B;font-weight:700;font-size:16px;letter-spacing:.01em;white-space:nowrap;
568  opacity:.7;filter:grayscale(1);transition:opacity .2s,filter .2s;padding:0 8px;}
569.frn-cust-logo:hover{opacity:1;filter:grayscale(0);}
570.frn-cust-logo img{height:34px;width:auto;max-width:150px;object-fit:contain;display:block;}
571@media(max-width:600px){.frn-cust-logo{font-size:14px;height:28px;}.frn-cust-logo img{height:28px;}.frn-cust-track{gap:44px;}}
572
573/* ============================ FEATURE PAGE (frnfeat-) ============================ */
574/* Reuses hero, demo/overlay, .frn-how stepper, .frn-cl bullets, .frn-final.
575   New bits: compact feature hero, problem band, benefit split, cross-links. */
576.frnfeat-hero{background:linear-gradient(160deg,#0B2A4A 0%,#0A2340 100%);color:#fff;padding:70px 24px 60px;text-align:center;}
577.frnfeat-hero .frn-eyebrow{color:#7FB2FF;}
578.frnfeat-hero h1{font-size:44px;font-weight:800;max-width:820px;margin:0 auto 18px;letter-spacing:-.02em;}
579.frnfeat-hero h1 em{font-style:normal;color:#7FB2FF;}
580.frnfeat-hero p{font-size:19px;color:#C7D6E8;max-width:620px;margin:0 auto 28px;}
581.frnfeat-hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
582
583/* problem band */
584.frnfeat-problem{background:#fff;padding:66px 24px;text-align:center;}
585.frnfeat-problem .frn-wrap{max-width:760px;}
586.frnfeat-problem h2{font-size:30px;color:#0B2A4A;margin-bottom:16px;letter-spacing:-.02em;}
587.frnfeat-problem p{font-size:18px;color:#5A6B7B;line-height:1.6;}
588
589/* deep demo band */
590.frnfeat-demo{background:#F6F8FB;padding:66px 24px;}
591.frnfeat-demo-head{text-align:center;max-width:640px;margin:0 auto 40px;}
592.frnfeat-demo-head h2{font-size:30px;color:#0B2A4A;margin-bottom:10px;}
593.frnfeat-demo-head p{color:#5A6B7B;font-size:16px;}
594.frnfeat-demo-stage{display:flex;justify-content:center;}
595
596/* benefits split (copy left, list right) */
597.frnfeat-benefits{background:#fff;padding:70px 24px;}
598.frnfeat-benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
599.frnfeat-benefits h2{font-size:32px;color:#0B2A4A;margin-bottom:16px;letter-spacing:-.02em;}
600.frnfeat-benefits h2 em{font-style:normal;color:#1E6FE8;}
601.frnfeat-benefits>.frn-wrap>.frnfeat-benefits-grid>div>p{color:#5A6B7B;font-size:16px;line-height:1.6;}
602.frnfeat-blist{list-style:none;padding:0;margin:0;}
603.frnfeat-blist li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid #E4E9EF;color:#0F1B2A;font-size:16px;}
604.frnfeat-blist li:last-child{border-bottom:0;}
605.frnfeat-blist .frn-ic-y{flex:none;width:24px;height:24px;border-radius:50%;background:#10B981;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;}
606
607/* cross-links to other features */
608.frnfeat-more{background:#F6F8FB;padding:66px 24px;}
609.frnfeat-more-head{text-align:center;margin:0 auto 36px;}
610.frnfeat-more-head h2{font-size:28px;color:#0B2A4A;}
611.frnfeat-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
612.frnfeat-card{display:block;background:#fff;border:1px solid #E4E9EF;border-radius:16px;padding:24px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;}
613.frnfeat-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -16px rgba(11,42,74,.28);border-color:#1E6FE8;}
614.frnfeat-card h3{font-size:17px;color:#0B2A4A;margin:0 0 6px;}
615.frnfeat-card p{font-size:14px;color:#5A6B7B;margin:0;line-height:1.5;}
616.frnfeat-card .frnfeat-arrow{color:#1E6FE8;font-weight:700;font-size:14px;margin-top:12px;display:inline-block;}
617
618@media(max-width:820px){
619  .frnfeat-hero h1{font-size:32px;}
620  .frnfeat-benefits-grid{grid-template-columns:1fr;gap:28px;}
621  .frnfeat-more-grid{grid-template-columns:1fr;}
622}
623
624/* ---- Feature selector: coming-soon tag + Supporting Features grid ---- */
625.frn-soon{display:inline-block;background:#EAF1FE;color:#1E6FE8;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:middle;}
626.frn-ailist{list-style:none;padding:0;margin:0;}
627.frn-ailist li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-size:15.5px;color:#0F1B2A;border-bottom:1px solid #EEF2F6;}
628.frn-ailist li::before{content:none;}
629.frn-ailist li:last-child{border-bottom:0;}
630.frn-ailist .frn-ai-chip{width:26px;height:26px;flex:none;font-size:12px;}
631.frn-ailist .frn-ai-chip.soon{background:#CBD9EC;color:#0B2A4A;}
632.frn-support{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
633.frn-support-card{background:#fff;border:1px solid #E4E9EF;border-radius:14px;padding:20px;}
634.frn-support-card h4{font-size:16px;color:#0B2A4A;margin:0 0 6px;}
635.frn-support-card p{font-size:13.5px;color:#5A6B7B;margin:0 0 14px;line-height:1.5;}
636.frn-support-mini{border-top:1px solid #EEF2F6;padding-top:12px;}
637/* framed product screenshot inside a support card */
638.frn-support-shot{margin-top:12px;border:1px solid #E4E9EF;border-radius:12px;overflow:hidden;background:#FBFCFD;padding:8px;}
639.frn-support-shot img{display:block;width:100%;height:auto;border-radius:8px;}
640@media(max-width:820px){.frn-support{grid-template-columns:1fr;}}
641
642/* ============================ PRICING PAGE (frnpr-) ============================ */
643/* Reuses: blue blueprint hero pattern, .frn-final, buttons, Inter, bands.
644   New: value grid, single-plan card, FAQ accordion. Blue-led blueprint hero. */
645
646/* --- blue blueprint hero (locked variant B) --- */
647.frnpr-hero{position:relative;overflow:hidden;padding:76px 24px 68px;text-align:center;}
648.frnpr-hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;}
649.frnpr-hero-bg{position:absolute;inset:0;z-index:1;
650  background:radial-gradient(820px 360px at 50% -6%, rgba(30,111,232,.13), transparent 62%),
651    linear-gradient(180deg,#EEF4FE 0%, #F8FBFF 55%, #FFFFFF 100%);}
652.frnpr-hero-bg::before{content:"";position:absolute;inset:0;
653  background-image:linear-gradient(#1E6FE816 1px,transparent 1px),linear-gradient(90deg,#1E6FE816 1px,transparent 1px);
654  background-size:24px 24px;
655  -webkit-mask-image:radial-gradient(720px 340px at 50% 34%, #000 42%, transparent 78%);
656          mask-image:radial-gradient(720px 340px at 50% 34%, #000 42%, transparent 78%);}
657.frnpr-hero-bg::after{content:"";position:absolute;inset:0;
658  background-image:linear-gradient(#1E6FE82B 1.3px,transparent 1.3px),linear-gradient(90deg,#1E6FE82B 1.3px,transparent 1.3px);
659  background-size:120px 120px;
660  -webkit-mask-image:radial-gradient(720px 340px at 50% 34%, #000 42%, transparent 78%);
661          mask-image:radial-gradient(720px 340px at 50% 34%, #000 42%, transparent 78%);}
662.frnpr-hero h1{font-size:46px;font-weight:800;color:#0B2A4A;max-width:760px;margin:0 auto 18px;letter-spacing:-.02em;line-height:1.08;}
663.frnpr-hero h1 em{font-style:normal;color:#1E6FE8;}
664.frnpr-hero p{font-size:19px;color:#5A6B7B;max-width:600px;margin:0 auto 28px;}
665.frnpr-hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
666
667/* --- value section --- */
668.frnpr-value{background:#fff;padding:74px 24px;}
669.frnpr-value-head{text-align:center;max-width:640px;margin:0 auto 46px;}
670.frnpr-value-head h2{font-size:34px;color:#0B2A4A;margin-bottom:12px;letter-spacing:-.02em;}
671.frnpr-value-head p{color:#5A6B7B;font-size:17px;}
672.frnpr-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
673.frnpr-vcard{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:16px;padding:26px;}
674.frnpr-vcard .ic{width:40px;height:40px;border-radius:10px;background:#EAF1FE;display:grid;place-items:center;font-size:18px;margin-bottom:14px;}
675.frnpr-vcard h3{font-size:17px;color:#0B2A4A;margin:0 0 8px;}
676.frnpr-vcard p{font-size:14.5px;color:#5A6B7B;margin:0;line-height:1.55;}
677
678/* --- single plan card --- */
679.frnpr-plan{background:#F6F8FB;padding:74px 24px;}
680.frnpr-plan-card{max-width:560px;margin:0 auto;background:#fff;border:1px solid #E4E9EF;border-radius:20px;box-shadow:0 30px 70px -28px rgba(11,42,74,.28);overflow:hidden;}
681.frnpr-plan-top{background:#0B2A4A;color:#fff;padding:32px 34px;text-align:center;}
682.frnpr-plan-top .frnpr-plan-name{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7FB2FF;margin-bottom:12px;}
683.frnpr-plan-price{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1;}
684.frnpr-plan-price small{font-size:17px;font-weight:600;color:#AFC2D8;letter-spacing:0;}
685.frnpr-plan-sub{font-size:14px;color:#C7D6E8;margin-top:10px;}
686.frnpr-plan-body{padding:30px 34px 34px;}
687.frnpr-plan-body h4{font-size:14px;font-weight:700;color:#0B2A4A;margin:0 0 16px;}
688.frnpr-plan-list{list-style:none;padding:0;margin:0 0 26px;}
689.frnpr-plan-list li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:15px;color:#0F1B2A;}
690.frnpr-plan-list .tick{flex:none;width:22px;height:22px;border-radius:50%;background:#10B981;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;}
691.frnpr-plan-cta{display:block;text-align:center;}
692.frnpr-plan-note{text-align:center;font-size:13px;color:#5A6B7B;margin-top:14px;}
693
694/* --- FAQ --- */
695.frnpr-faq{background:#fff;padding:74px 24px;}
696.frnpr-faq-head{text-align:center;margin:0 auto 40px;}
697.frnpr-faq-head h2{font-size:32px;color:#0B2A4A;letter-spacing:-.02em;}
698.frnpr-faq-list{max-width:720px;margin:0 auto;}
699.frnpr-faq-item{border-bottom:1px solid #E4E9EF;}
700.frnpr-faq-q{width:100%;text-align:left;background:none !important;border:0;border-radius:0;box-shadow:none;font-family:inherit;font-size:17px;font-weight:600;color:#0B2A4A !important;padding:22px 40px 22px 0;cursor:pointer;position:relative;}
701.frnpr-faq-q:hover,.frnpr-faq-q:focus,.frnpr-faq-q:active,
702.frnpr-faq-item.open .frnpr-faq-q{background:none !important;color:#0B2A4A !important;box-shadow:none;outline:none;}
703.frnpr-faq-q:focus-visible{outline:2px solid #1E6FE8;outline-offset:2px;}
704.frnpr-faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:#1E6FE8;transition:transform .2s;}
705.frnpr-faq-item.open .frnpr-faq-q::after{content:"\2212";}
706.frnpr-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
707.frnpr-faq-a-inner{padding:0 0 22px;font-size:15.5px;color:#5A6B7B;line-height:1.6;}
708.frnpr-faq-item.open .frnpr-faq-a{max-height:400px;}
709
710@media(max-width:820px){
711  .frnpr-hero h1{font-size:34px;}
712  .frnpr-value-grid{grid-template-columns:1fr;}
713}
714
715/* ============================ PRICING CALCULATOR + ONBOARDING (frnpc-) ============================ */
716/* Ported from the post-demo landing page, re-namespaced under .frn-scope so it
717   inherits Inter + shared tokens. Slider drives a tiered per-user price. */
718.frnpc-card{background:#fff;border:1px solid #E4E9EF;border-radius:20px;padding:36px;box-shadow:0 30px 70px -28px rgba(11,42,74,.28);max-width:640px;margin:0 auto;}
719.frnpc-top{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px;}
720.frnpc-count-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#1E6FE8;}
721.frnpc-count{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#0B2A4A;}
722.frnpc-count small{font-size:18px;font-weight:600;color:#5A6B7B;}
723.frnpc-total-wrap{text-align:right;}
724.frnpc-total-label{font-size:13px;color:#7A8A9A;}
725.frnpc-total{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#10B981;}
726.frnpc-total small{font-size:16px;font-weight:600;color:#5A6B7B;}
727.frnpc-total-unit{font-size:13px;color:#7A8A9A;}
728.frnpc-slider-row{margin:26px 0 8px;}
729.frnpc-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:100px;background:#E4E9EF;outline:none;margin:0;}
730.frnpc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#1E6FE8;border:4px solid #fff;box-shadow:0 3px 10px -2px rgba(30,111,232,.6);cursor:pointer;}
731.frnpc-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#1E6FE8;border:4px solid #fff;box-shadow:0 3px 10px -2px rgba(30,111,232,.6);cursor:pointer;}
732.frnpc-ticks{display:flex;justify-content:space-between;font-size:12px;color:#7A8A9A;margin-top:10px;}
733.frnpc-peruser{text-align:center;font-size:14.5px;color:#5A6B7B;margin:20px 0 0;padding-top:20px;border-top:1px solid #E4E9EF;}
734.frnpc-peruser strong{color:#0F1B2A;font-weight:700;}
735.frnpc-bands{margin-top:16px;display:none;}
736.frnpc-bands.is-open{display:block;}
737.frnpc-band-row{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-bottom:1px solid #F0F3F7;color:#5A6B7B;}
738.frnpc-band-row:last-child{border-bottom:0;}
739.frnpc-band-row span:last-child{font-weight:700;color:#0F1B2A;}
740.frnpc-toggle{display:block;margin:14px auto 0;background:none !important;border:0;border-radius:0;box-shadow:none;color:#1E6FE8 !important;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;}
741.frnpc-toggle:hover,.frnpc-toggle:focus,.frnpc-toggle:active{background:none !important;color:#1E6FE8 !important;box-shadow:none;outline:none;}
742.frnpc-toggle:focus-visible{outline:2px solid #1E6FE8;outline-offset:2px;}
743.frnpc-cta{text-align:center;margin-top:24px;}
744.frnpc-count-hint{text-align:center;font-size:13px;color:#7A8A9A;margin-top:4px;}
745/* Option 2 price layout: per-user is the hero (black, moderate size), total is a quiet sub-line */
746.frnpc-o2{text-align:center;padding:6px 0 2px;}
747.frnpc-o2 .frnpc-count-label{display:block;margin-bottom:6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#1E6FE8;}
748.frnpc-o2-peruser{display:flex;align-items:center;justify-content:center;gap:9px;}
749.frnpc-o2-amt{font-size:30px;font-weight:800;color:#0F1B2A;letter-spacing:-.02em;line-height:1;}
750.frnpc-o2-tail{font-size:13px;font-weight:600;color:#5A6B7B;text-align:left;line-height:1.3;}
751.frnpc-o2-total{font-size:14px;color:#7A8A9A;margin-top:14px;}
752.frnpc-o2-total strong{color:#0F1B2A;font-weight:700;}
753
754/* users-counted note */
755.frnpr-notes{max-width:640px;margin:24px auto 0;font-size:14.5px;line-height:1.6;color:#5A6B7B;background:#F6F8FB;border:1px solid #E4E9EF;border-radius:14px;padding:22px 24px;}
756.frnpr-notes-title{font-weight:700;color:#0F1B2A;display:block;margin-bottom:10px;}
757.frnpr-notes ul{margin:0;padding:0;list-style:none;}
758.frnpr-notes li{position:relative;padding-left:26px;margin-bottom:8px;}
759.frnpr-notes li:last-child{margin-bottom:0;}
760.frnpr-notes li::before{content:"\2713";position:absolute;
760left:0;top:0;color:#10B981;font-weight:800;}
761
762/* onboarding packages */
763.frnpr-onb{background:#fff;padding:74px 24px;}
764.frnpr-onb-head{text-align:center;max-width:640px;margin:0 auto 44px;}
765.frnpr-onb-head h2{font-size:34px;color:#0B2A4A;margin-bottom:12px;letter-spacing:-.02em;}
766.frnpr-onb-head p{color:#5A6B7B;font-size:17px;}
767.frnpr-pkgs{display:flex;gap:24px;flex-wrap:wrap;align-items:stretch;max-width:840px;margin:0 auto;}
768.frnpr-pkg{flex:1 1 340px;display:flex;flex-direction:column;background:#F6F8FB;border:1px solid #E4E9EF;border-radius:16px;padding:32px;}
769.frnpr-pkg-tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#1E6FE8;background:#EAF1FE;padding:5px 11px;border-radius:100px;margin-bottom:14px;}
770.frnpr-pkg h3{font-size:22px;font-weight:800;color:#0B2A4A;margin-bottom:6px;}
771.frnpr-pkg-price{font-size:30px;font-weight:800;color:#0B2A4A;margin-bottom:4px;letter-spacing:-.03em;}
772.frnpr-pkg-price small{font-size:14px;font-weight:600;color:#7A8A9A;}
773.frnpr-pkg-sub{font-size:14.5px;color:#5A6B7B;margin-bottom:18px;}
774.frnpr-pkg h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#0B2A4A;margin:18px 0 10px;}
775.frnpr-pkg ul{margin:0;padding:0;list-style:none;font-size:14.5px;line-height:1.5;color:#5A6B7B;}
776.frnpr-pkg li{position:relative;padding-left:24px;margin-bottom:8px;}
777.frnpr-pkg li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:#1E6FE8;}
778.frnpr-pkg-note{font-size:13.5px;line-height:1.55;color:#7A8A9A;font-style:italic;margin-top:auto;padding-top:16px;}
779.frnpr-pkg-note-inner{padding-top:16px;border-top:1px solid #E4E9EF;display:block;}
780@media(max-width:560px){.frnpc-card{padding:24px;}.frnpc-count,.frnpc-total{font-size:34px;}}
781
782
783/* ============================ TESTIMONIAL MARQUEE ============================ */
784.frn-tmarq{position:relative;overflow:hidden;
785  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
786          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
787.frn-tmarq-track{display:flex;gap:22px;width:max-content;animation:frn-tmarq-scroll 60s linear infinite;}
788.frn-tmarq:hover .frn-tmarq-track{animation-play-state:paused;}
789@keyframes frn-tmarq-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
790.frn-tmarq-card{flex:0 0 auto;width:380px;background:#F6F8FB;border:1px solid #E4E9EF;border-radius:16px;padding:30px 30px 26px;display:flex;flex-direction:column;}
791.frn-tmarq-card .frn-stars{color:#FFB020;font-size:16px;letter-spacing:2px;margin-bottom:14px;}
792.frn-tmarq-card .q{font-size:15px;line-height:1.6;color:#0F1B2A;margin-bottom:18px;flex:1;}
793.frn-tmarq-card .who{font-size:14px;font-weight:700;color:#0B2A4A;}
794.frn-tmarq-card .who small{display:block;font-weight:400;color:#5A6B7B;font-size:12.5px;margin-top:3px;}
795@media(max-width:820px){.frn-tmarq-card{width:300px;}}
796
797/* ============================ WHAT'S INCLUDED — ACCORDION (frninc-) ============================ */
798.frninc{max-width:820px;margin:0 auto;}
799.frninc-item{border:1px solid #E4E9EF;border-radius:14px;margin-bottom:12px;overflow:hidden;background:#fff;}
800.frninc-q{width:100%;text-align:left;background:#fff !important;border:0;border-radius:0;box-shadow:none;font-family:inherit;color:#0B2A4A !important;padding:18px 52px 18px 20px;cursor:pointer;position:relative;display:flex;align-items:center;gap:14px;}
801.frninc-q:hover,.frninc-q:focus,.frninc-q:active,.frninc-item.open .frninc-q{background:#fff !important;color:#0B2A4A !important;box-shadow:none;outline:none;}
802.frninc-q:focus-visible{outline:2px solid #1E6FE8;outline-offset:2px;}
803.frninc-ic{font-size:20px;flex:none;}
804.frninc-qtext{display:flex;flex-direction:column;gap:2px;}
805.frninc-cat{font-size:17px;font-weight:700;color:#0B2A4A;}
806.frninc-summ{font-size:14px;font-weight:400;color:#5A6B7B;}
807.frninc-count{margin-left:auto;font-size:13px;font-weight:600;color:#1E6FE8;background:#EAF1FE;padding:3px 10px;border-radius:100px;flex:none;}
808.frninc-q::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:22px;color:#1E6FE8;}
809.frninc-item.open .frninc-q::after{content:"\2212";}
810.frninc-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
811.frninc-item.open .frninc-a{max-height:640px;}
812.frninc-a-inner{padding:0 20px 18px 54px;}
813.frninc-a-inner ul{list-style:none;margin:0;padding:0;}
814.frninc-a-inner li{position:relative;padding:8px 0 8px 26px;font-size:15px;color:#0F1B2A;border-top:1px solid #F0F3F7;}
815.frninc-a-inner li::before{content:"\2713";position:absolute;
815left:0;top:8px;color:#10B981;font-weight:800;}
816/* coming-soon: muted check + pill (class-based, no :has() so it's bulletproof) */
817.frninc-a-inner li.soon::before{color:#9DB4CE;}
818.frninc-soon{display:inline-block;background:#EAF1FE;color:#1E6FE8;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:100px;margin-left:8px;vertical-align:middle;}
819</style>
820
821  <!-- Fonts + shared stylesheet. Site CSS lives in the <style> block below. -->
822  <link rel="preconnect" href="https://fonts.googleapis.com">
823  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
824  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet">
825  <style>
826/* ---------- TOKENS ---------- */
827.frn-scope{
828  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
829  color:#0F1B2A;
830  -webkit-font-smoothing:antialiased;
831  line-height:1.5;
832}
833.frn-scope *,.frn-scope *::before,.frn-scope *::after{box-sizing:border-box;}
834/* Defensive: neutralise the HubSpot theme's default <button> styling inside our
835   scope. Our own button classes (.frn-btn, pills, tabs) re-apply their intended
836   look on top. This stops the theme painting bare/utility buttons blue on
837   hover/focus/active (which hit the FAQ, the accordion and the price toggle). */
838.frn-scope button{background:none;border:none;color:inherit;font:inherit;}
839.frn-scope button:focus,.frn-scope button:active{outline:none;}
840.frn-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
841.frn-scope h1,.frn-scope h2,.frn-scope h3{margin:0;line-height:1.1;letter-spacing:-.02em;}
842.frn-scope p{margin:0;}
843.frn-eyebrow{
844  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
845  text-transform:uppercase;color:#1E6FE8;margin-bottom:14px;
846}
847.frn-btn{
848  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;
849  padding:14px 26px;border-radius:999px;text-decoration:none;cursor:pointer;
850  border:0;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
851}
852.frn-btn-primary{background:#10B981;color:#fff;box-shadow:0 8px 20px -8px rgba(16,185,129,.6);}
853.frn-btn-primary:hover{background:#0E9E6E;transform:translateY(-1px);}
854.frn-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.55);}
855.frn-btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;}
856.frn-btn-dark{background:#0B2A4A;color:#fff;}
857.frn-btn-dark:hover{background:#12395F;transform:translateY(-1px);}
858.frn-scope :focus-visible{outline:3px solid #1E6FE8;outline-offset:2px;}
859/* Force button text colours over HubSpot theme link defaults */
860.frn-scope a.frn-btn-primary,.frn-scope a.frn-btn-primary:visited{color:#fff;}
861.frn-scope a.frn-btn-ghost,.frn-scope a.frn-btn-ghost:visited{color:#fff;}
862
863/* ---- FULL-BLEED BREAK-OUT ----
864   The home.html template wraps body modules in a padded, max-width content
865   column. Full-width sections (hero, stat band, final CTA) break out of it
866   with viewport-width negative margins. If the site ever gets a horizontal
867   scrollbar from this, tell me — it means the template column has its own
868   margin and we switch to a targeted wrapper override instead. */
869/* ---- FULL-BLEED: every section is an edge-to-edge band ----
870   Instead of listing individual sections, every .frn-scope section breaks out
871   of the template's padded content column to run full viewport width. This
872   makes each section's background fill edge-to-edge (bands of colour), and
873   cancels the template column's horizontal padding in one move.
874   Internal content stays centred and width-capped via each section's own
875   .frn-wrap (max-width:1180px, auto margins), so text never touches the edge. */
876/* NO FULL-BLEED HACK. The old home.html template wrapped modules in a padded,
877   max-width content column, so sections had to break out with width:100vw plus
878   negative margins. FRN Base has an unconstrained dnd area and sections reach
879   the edges on their own. The hack is not merely redundant here, it is harmful:
880   margin-left:calc(50% - 50vw) resolves against the PARENT width, so any module
881   in a narrow wrapper gets dragged off-screen. Verified on FEAT-02, FEAT-04 and
882   the homepage. Do not reinstate it. */
883.frn-scope{
884  width:100%;
885  max-width:100%;
886  margin-left:0;
887  margin-right:0;
888  display:block;
889}
890/* Coded templates get no reset, so body keeps the browser default 8px margin,
891   which insets the nav and footer and shows as a pale strip down the sides. */
892html,body{margin:0;padding:0;}
893/* If a horizontal scrollbar ever appears, add html,body{overflow-x:clip;} here.
894   Use clip, NOT hidden: overflow:hidden on an ancestor disables position:sticky
895   and would drop the nav. Left out for now so genuine overflow stays visible
896   instead of being silently masked. */
897/* legacy hooks kept as no-ops in case referenced elsewhere */
898.frn-hero,
899.frn-how,
900.frn-final,
901.frn-full-bleed{width:100%;max-width:100%;margin-left:0;margin-right:0;}
902
903/* ---- VERTICAL SPACING RESET ----
904   HubSpot wraps each module in a row/column container that may add its own
905   top/bottom padding, compounding into big gaps. This targets the common
906   wrapper class patterns. If a gap survives, it's this wrapper's vertical
907   padding under a class not listed here — inspect the gap and send the class.*/
908.dnd-row:has(.frn-scope),.dnd-column:has(.frn-scope),.dnd-module:has(.frn-scope),
909.row-fluid-wrapper:has(.frn-scope),.span12:has(.frn-scope),
910[class*="dnd"]:has(> .frn-scope),[class*="widget"]:has(> .frn-scope){
911  padding-top:0 !important;padding-bottom:0 !important;
912  margin-top:0 !important;margin-bottom:0 !important;
913}
914
915/* ============================ HERO (stacked) ============================ */
916.frn-hero{
917  background:
918    radial-gradient(1200px 520px at 50% -10%,rgba(30,111,232,.24),transparent 62%),
919    linear-gradient(160deg,#0B2A4A 0%,#0A2340 60%,#081D34 100%);
920  color:#fff;overflow:hidden;position:relative;
921}
922.frn-hero-copy{padding:66px 24px 0;text-align:center!important;}
923/* template can force left-align on inherited text; pin every hero-copy child centre.
924   Belt-and-braces: high-specificity text-align AND a flex column so the block
925   centres even if some theme rule still wins on text-align. */
926.frn-scope .frn-hero .frn-hero-copy{
927  display:flex;flex-direction:column;align-items:center;
928}
929.frn-scope .frn-hero .frn-hero-copy > *{text-align:center!important;}
930.frn-scope .frn-hero .frn-hero-copy h1,
931.frn-scope .frn-hero .frn-hero-copy p,
932.frn-scope .frn-hero .frn-hero-copy .frn-hero-sub{
933  text-align:center!important;width:100%;
934}
935.frn-hero h1{font-size:50px;font-weight:800;margin-bottom:20px;max-width:900px;margin-left:auto;margin-right:auto;}
936.frn-hero h1 em{font-style:normal;color:#7FB2FF;}
937.frn-hero-sub{font-size:19px;color:#C7D6E8;max-width:660px;margin:0 auto 30px;}
938.frn-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px;justify-content:center;}
939.frn-hero-trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px;color:#AFC2D8;justify-content:center;}
940.frn-stars{color:#FFC24B;letter-spacing:2px;font-size:15px;}
941.frn-hero-trust .frn-sep{opacity:.4;}
942/* demo sits centre stage beneath the copy and bleeds into the section below */
943.frn-hero-demo{padding:44px 24px 0;display:flex;flex-direction:column;align-items:center;}
944.frn-hero-demo>div{width:100%;display:flex;justify-content:center;}
945/* feature pill row above the demo */
946.frn-hero-pills{display:flex!important;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px;width:auto!important;}
947.frn-hero-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#C7D6E8;font-family:inherit;font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap;}
948.frn-hero-pill:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5);}
949.frn-hero-pill.active{background:#fff;color:#0B2A4A;border-color:#fff;}
950.frn-gf-empty{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#7FB2FF;font-size:14px;font-weight:600;background:repeating-linear-gradient(45deg,#0E2038,#0E2038 10px,#0A1A2E 10px,#0A1A2E 20px);}
951/* label bar above the demo — tells people it's interactive */
952.frn-demo-label{display:flex!important;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;width:auto!important;}
953.frn-demo-cue{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#BFD4EC;letter-spacing:.01em;}
954.frn-demo-pulse{width:9px;height:9px;border-radius:50%;background:#10B981;box-shadow:0 0 0 0 rgba(16,185,129,.7);animation:frn-pulse 2.2s infinite;flex:none;}
955@keyframes frn-pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.65);}70%{box-shadow:0 0 0 10px rgba(16,185,129,0);}100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}}
956.frn-demo-expand{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;font-family:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s;}
957.frn-demo-expand:hover{background:rgba(255,255,255,.2);border-color:#fff;}
958.frn-expand-ico{width:12px;height:12px;border:2px solid currentColor;border-radius:2px;display:inline-block;position:relative;}
959.frn-expand-ico::after{content:"";position:absolute;right:-4px;top:-4px;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;}
960.frn-hero-gf{border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(11,42,74,.32);background:#0A1420;width:100%;}
961/* DESKTOP = landscape screen; Guideflow's embed renders its own browser chrome
962   (traffic-light dots, nav arrows, title pill) inside the iframe, so we just
963   give it a clean rounded, shadowed container. */
964.frn-hero-gf.is-desktop{max-width:940px;}
965.frn-hero-gf.is-mobile{max-width:300px;border:8px solid #0A1420;border-radius:26px;}
966.frn-hero-gf iframe{border-radius:16px;}
967
968/* ---- full-screen demo overlay ---- */
969.frn-demo-overlay{position:fixed;inset:0;z-index:9999;background:rgba(6,18,32,.97);display:flex;flex-direction:column;}
970.frn-demo-overlay[hidden]{display:none;}
971.frn-demo-overlay-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.12);flex:none;}
972.frn-demo-overlay-title{color:#C7D6E8;font-size:14px;font-weight:600;}
973.frn-demo-close{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;font-family:inherit;font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;}
974.frn-demo-close:hover{background:rgba(255,255,255,.2);border-color:#fff;}
975.frn-demo-overlay-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;}
976.frn-demo-overlay-stage .frn-hero-gf{border-radius:14px;max-height:100%;}
977.frn-demo-overlay-stage .frn-hero-gf.is-desktop{max-width:min(1200px,94vw);}
978.frn-demo-overlay-stage .frn-hero-gf.is-mobile{max-width:min(360px,86vw);border-radius:26px;}
979body.frn-noscroll{overflow:hidden;}
980@media(max-width:900px){
981  .frn-hero-copy{padding:46px 24px 0;}
982  .frn-hero h1{font-size:34px;}
983  .frn-hero-sub{font-size:17px;}
984  .frn-hero-demo{padding:32px 24px 0;}
985  .frn-demo-label{gap:12px;}
986  .frn-demo-cue{font-size:12.5px;}
987}
988
989/* ============================ INTEGRATION LOGO STRIP ============================ */
990.frn-logos{background:#fff;border-bottom:1px solid #E4E9EF;padding:26px 0;}
991.frn-logos-inner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
992.frn-logos-label{font-size:13px;color:#5A6B7B;font-weight:600;margin-right:8px;}
993.frn-logo-pill{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:8px;padding:9px 16px;font-weight:700;color:#5A6B7B;font-size:13px;}
994
995/* ============================ STAT BAND ============================ */
996.frn-stats{background:#fff;padding:64px 0;}
997.frn-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
998.frn-stat{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:16px;padding:26px 24px;text-align:left;}
999.frn-stat .frn-n{font-size:40px;font-weight:800;color:#0B2A4A;letter-spacing:-.03em;line-height:1;}
1000.frn-stat .frn-n em{font-style:normal;color:#0B2A4A;}
1001.frn-stat .frn-l{font-size:14px;color:#5A6B7B;margin-top:10px;font-weight:500;}
1002.frn-stats-head{text-align:center;max-width:640px;margin:0 auto 40px;}
1003.frn-stats-head h2{font-size:34px;color:#0B2A4A;margin-bottom:12px;}
1004.frn-stats-head p{color:#5A6B7B;font-size:17px;}
1005@media(max-width:900px){.frn-stats-grid{grid-template-columns:repeat(2,1fr);}}
1006
1007/* ============================ PROBLEM / SOLUTION ============================ */
1008.frn-contrast{padding:78px 0;background:#F6F8FB;}
1009.frn-contrast-head{text-align:center;max-width:680px;margin:0 auto 46px;}
1010.frn-contrast-head h2{font-size:36px;color:#0B2A4A;margin-bottom:14px;}
1011.frn-contrast-head h2 em{font-style:normal;color:#1E6FE8;}
1012.frn-contrast-head p{color:#5A6B7B;font-size:17px;}
1013.frn-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
1014.frn-col{border-radius:16px;padding:32px;border:1px solid #E4E9EF;}
1015.frn-col-bad{background:#F6F8FB;}
1016.frn-col-good{background:#0B2A4A;color:#fff;border-color:#0B2A4A;}
1017.frn-col h3{font-size:15px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px;}
1018.frn-col-bad h3{color:#5A6B7B;}
1019.frn-col-good h3{color:#7FB2FF;}
1020.frn-cl{display:flex;gap:12px;align-items:flex-start;padding:12px 0;font-size:15.5px;}
1021.frn-col-bad .frn-cl{color:#4A5A6A;border-bottom:1px solid #E4E9EF;}
1022.frn-col-good .frn-cl{color:#DCE7F4;border-bottom:1px solid rgba(255,255,255,.1);}
1023.frn-cl:last-child{border-bottom:0;}
1024.frn-ic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px;}
1025.frn-ic-x{background:#F1D6D6;color:#C0392B;}
1026.frn-ic-y{background:#10B981;color:#fff;}
1027@media(max-width:760px){.frn-cols{grid-template-columns:1fr;}}
1028
1029/* ===== FEATURE SELECTOR — base chip needed by mockups ===== */
1030.frn-ai-chip{
1031  flex:none;width:26px;height:26px;border-radius:8px;background:#1E6FE8;
1032  color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;
1033}
1034/* ============================ FEATURE ROWS ============================ */
1035.frn-features{padding:20px 0 40px;background:linear-gradient(180deg,#fff 0%,#F6F8FB 100%);}
1036.frn-feat-head{text-align:center;max-width:680px;margin:32px auto 40px;}
1037.frn-feat-head h2{font-size:36px;color:#0B2A4A;margin-bottom:14px;}
1038.frn-feat-head p{color:#5A6B7B;font-size:17px;}
1039.frn-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:28px 0;}
1040.frn-row.rev .frn-row-media{order:-1;}
1041.frn-row-num{font-size:13px;font-weight:700;color:#1E6FE8;letter-spacing:.1em;margin-bottom:14px;text-transform:uppercase;}
1042.frn-row h3{font-size:28px;color:#0B2A4A;margin-bottom:16px;}
1043.frn-row h3 em{font-style:normal;color:#1E6FE8;}
1044.frn-row p{color:#5A6B7B;font-size:16.5px;margin-bottom:20px;}
1045.frn-row ul{list-style:none;padding:0;margin:0 0 22px;}
1046.frn-row li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:15.5px;color:#0F1B2A;}
1047.frn-row li::before{content:"✓";color:#10B981;font-weight:800;flex:none;}
1048.frn-scope a.frn-row-link,.frn-scope a.frn-row-link:visited{color:#1E6FE8;font-weight:600;text-decoration:none;font-size:15px;}
1049.frn-row-link:hover{text-decoration:underline;}
1050@media(max-width:860px){
1051  .frn-row{grid-template-columns:1fr;gap:28px;padding:30px 0;}
1052  .frn-row.rev .frn-row-media{order:0;}
1053}
1053
1054
1055/* ============================ FEATURE SELECTOR (Layout B) ============================ */
1056.frn-fsel{margin-top:8px;}
1057.frn-fsel-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px;}
1058.frn-fsel-tab{background:#fff;border:1px solid #E4E9EF;border-radius:999px;padding:11px 20px;font-size:14px;font-weight:600;color:#5A6B7B;cursor:pointer;transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:7px;}
1059.frn-fsel-tab:hover{border-color:#1E6FE8;color:#1E6FE8;}
1060.frn-fsel-tab.active{background:#0B2A4A;border-color:#0B2A4A;color:#fff;}
1061.frn-fsel-dot{width:7px;height:7px;border-radius:50%;background:#10B981;flex:none;}
1062.frn-fsel-body{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;scroll-margin-top:16px;}
1063.frn-fsel-copy .frn-row-num{font-size:13px;font-weight:700;color:#1E6FE8;letter-spacing:.1em;margin-bottom:12px;text-transform:uppercase;}
1064.frn-fsel-copy h3{font-size:28px;color:#0B2A4A;margin-bottom:16px;}
1065.frn-fsel-copy h3 em{font-style:normal;color:#1E6FE8;}
1066.frn-fsel-copy p{color:#5A6B7B;font-size:16.5px;margin-bottom:20px;}
1067.frn-fsel-copy ul{list-style:none;padding:0;margin:0 0 22px;}
1068.frn-fsel-copy li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:15.5px;color:#0F1B2A;}
1069.frn-fsel-copy li::before{content:"\2713";color:#10B981;font-weight:800;flex:none;}
1070@media(max-width:860px){.frn-fsel-body{grid-template-columns:1fr;gap:28px;}}
1071/* Guideflow embed inside a feature panel */
1072.frn-gf{border-radius:14px;overflow:hidden;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);background:#FFFFFF;border:1px solid #E4E9EF;width:100%;}
1073.frn-gf iframe{border-radius:14px;}
1074/* portrait demos shouldn't stretch full width on desktop */
1075@media(min-width:768px){.frn-fsel-media .frn-gf{max-width:100%;margin:0 auto;}}
1076@media(max-width:767px){.frn-fsel-media .frn-gf{max-width:320px;margin:0 auto;border-radius:20px;}}
1077
1078/* mock: visual catalogue */
1079.frn-cat{display:flex;flex-direction:column;gap:10px;}
1080.frn-cat-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E4E9EF;border-radius:10px;padding:12px 14px;}
1081.frn-cat-item.sel{border-color:#1E6FE8;box-shadow:0 6px 18px -8px rgba(30,111,232,.4);}
1082.frn-cat-thumb{width:40px;height:40px;border-radius:9px;background:#EAF1FE;display:grid;place-items:center;font-size:20px;flex:none;}
1083.frn-cat-t{font-size:14px;font-weight:700;color:#0B2A4A;}
1084.frn-cat-t small{display:block;font-weight:400;color:#5A6B7B;font-size:12px;margin-top:2px;}
1085.frn-cat-add{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#EAF1FE;color:#1E6FE8;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none;}
1086.frn-cat-add.ok{background:#10B981;color:#fff;}
1087
1088/* generic media panel that holds the CSS mockups */
1089.frn-panel{
1090  background:linear-gradient(150deg,#EAF1FE 0%,#F4F8FF 100%);border:1px solid #D8E5FA;border-radius:16px;
1091  padding:32px;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);min-height:300px;display:flex;flex-direction:column;justify-content:center;
1092}
1093
1094/* mock: AI review list */
1095.frn-airow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E4E9EF;border-radius:10px;padding:12px 14px;margin-bottom:10px;}
1096.frn-airow:last-child{margin-bottom:0;}
1097.frn-airow .frn-ai-chip{width:30px;height:30px;}
1098.frn-airow .frn-ai-chip.warn{background:#F59E0B;}
1099.frn-airow .frn-ai-chip.ok{background:#10B981;}
1100.frn-airow .t{font-size:13.5px;color:#0F1B2A;font-weight:600;}
1101.frn-airow .t small{display:block;font-weight:400;color:#5A6B7B;font-size:12px;margin-top:2px;}
1102.frn-airow .add{margin-left:auto;font-size:12px;font-weight:700;color:#1E6FE8;border:1px solid #1E6FE8;border-radius:999px;padding:5px 12px;}
1103
1104/* mock: presentation — three clean side-by-side option cards */
1105.frn-pres{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch;}
1106.frn-pres-card{background:#fff;border:1px solid #E4E9EF;border-radius:12px;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);padding:16px 14px;text-align:center;display:flex;flex-direction:column;gap:4px;}
1107.frn-pres-card.sel{border:2px solid #1E6FE8;box-shadow:0 12px 30px -10px rgba(30,111,232,.4);}
1108.frn-pres-card .h{font-weight:700;font-size:12px;color:#5A6B7B;text-transform:uppercase;letter-spacing:.06em;}
1109.frn-pres-card .p{font-size:22px;font-weight:800;color:#0B2A4A;margin-top:2px;}
1110.frn-pres-card .tag{font-size:11px;color:#5A6B7B;}
1111.frn-pres-card .pick{display:inline-block;margin-top:8px;font-size:10px;font-weight:700;background:#EAF1FE;color:#1E6FE8;padding:4px 8px;border-radius:999px;}
1112
1113/* mock: payment */
1114.frn-pay{background:#fff;border:1px solid #E4E9EF;border-radius:12px;padding:20px;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);}
1115.frn-pay .row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:#5A6B7B;}
1116.frn-pay .row.total{border-top:1px solid #E4E9EF;margin-top:6px;padding-top:12px;color:#0F1B2A;font-weight:700;}
1117.frn-pay .dep{background:#10B981;color:#fff;border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-weight:700;font-size:14px;}
1118.frn-pay .dep small{display:block;font-weight:400;opacity:.85;font-size:11px;}
1119
1120/* mock: adjustment */
1121.frn-adj{background:#fff;border:1px solid #E4E9EF;border-radius:12px;padding:20px;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);}
1122.frn-adj .slider{height:6px;background:#E4E9EF;border-radius:999px;position:relative;margin:18px 0 22px;}
1123.frn-adj .slider .fill{position:absolute;
1123left:0;top:0;bottom:0;width:64%;background:#1E6FE8;border-radius:999px;}
1124.frn-adj .slider .knob{position:absolute;left:64%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #1E6FE8;box-shadow:0 2px 6px rgba(0,0,0,.15);}
1125.frn-adj .split{display:flex;gap:12px;}
1126.frn-adj .split .b{flex:1;background:#F6F8FB;border-radius:10px;padding:12px;text-align:center;}
1127.frn-adj .split .b .k{font-size:11px;color:#5A6B7B;text-transform:uppercase;letter-spacing:.06em;}
1128.frn-adj .split .b .v{font-size:17px;font-weight:800;color:#0B2A4A;margin-top:4px;}
1129.frn-adj .split .b .d{font-size:11px;font-weight:700;margin-top:2px;}
1130.frn-adj .up{color:#10B981;}.frn-adj .down{color:#C0392B;}
1131
1132/* mock: follow-up timeline */
1133.frn-flow{position:relative;padding-left:26px;}
1134.frn-flow::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:#E4E9EF;}
1135.frn-flow .step{position:relative;background:#fff;border:1px solid #E4E9EF;border-radius:10px;padding:11px 14px;margin-bottom:12px;font-size:13px;}
1136.frn-flow .step:last-child{margin-bottom:0;}
1137.frn-flow .step::before{content:"";position:absolute;left:-21px;top:16px;width:12px;height:12px;border-radius:50%;background:#1E6FE8;border:2px solid #fff;box-shadow:0 0 0 2px #1E6FE8;}
1138.frn-flow .step .when{font-weight:700;color:#0B2A4A;}
1139.frn-flow .step .ch{font-size:11px;font-weight:700;color:#1E6FE8;background:#EAF1FE;padding:2px 8px;border-radius:999px;margin-left:6px;}
1140.frn-flow .step .msg{color:#5A6B7B;margin-top:4px;}
1141
1142/* mock: hot lead */
1143.frn-hot{background:#fff;border:1px solid #E4E9EF;border-radius:12px;padding:18px;box-shadow:0 10px 40px -12px rgba(11,42,74,.18);}
1144.frn-hot .alert{display:flex;gap:12px;align-items:center;background:#FFF4E0;border:1px solid #FCD38B;border-radius:10px;padding:12px 14px;}
1145.frn-hot .flame{width:34px;height:34px;border-radius:9px;background:#F59E0B;display:grid;place-items:center;font-size:17px;flex:none;}
1146.frn-hot .alert .txt{font-size:13px;color:#8A5A00;font-weight:600;}
1147.frn-hot .alert .txt small{display:block;font-weight:400;color:#B07A22;margin-top:2px;}
1148.frn-hot .lead{display:flex;align-items:center;gap:12px;padding:12px 4px 2px;}
1149.frn-hot .lead .av{width:34px;height:34px;border-radius:50%;background:#0B2A4A;color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;}
1150.frn-hot .lead .nm{font-size:13.5px;font-weight:600;}
1151.frn-hot .lead .nm small{display:block;color:#5A6B7B;font-weight:400;}
1152.frn-hot .lead .call{margin-left:auto;background:#10B981;color:#fff;font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;}
1153
1154
1155/* ============================ HOW IT WORKS (stepper) ============================ */
1156.frn-how{background:#0B2A4A;color:#fff;padding:78px 0;}
1157.frn-how-head{text-align:center;max-width:620px;margin:0 auto 48px;}
1158.frn-how-head h2{font-size:34px;margin-bottom:12px;}
1159.frn-how-head p{color:#B8C9DD;font-size:17px;}
1160.frn-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
1161.frn-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:26px 22px;}
1162.frn-step .sn{width:36px;height:36px;border-radius:10px;background:#1E6FE8;display:grid;place-items:center;font-weight:800;margin-bottom:16px;}
1163.frn-step h4{font-size:18px;margin:0 0 8px;}
1164.frn-step p{color:#B8C9DD;font-size:14px;}
1165@media(max-width:900px){.frn-steps{grid-template-columns:repeat(2,1fr);}}
1166
1167/* ============================ INTEGRATIONS ============================ */
1168.frn-integ{background:#F6F8FB;padding:70px 0;text-align:center;}
1169.frn-integ h2{font-size:32px;color:#0B2A4A;margin-bottom:14px;}
1170.frn-integ p{color:#5A6B7B;font-size:17px;max-width:560px;margin:0 auto 36px;}
1171.frn-integ-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
1172.frn-integ-pill{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:12px;padding:16px 24px;font-weight:700;color:#0B2A4A;font-size:15px;min-width:130px;}
1173
1174/* ============================ TESTIMONIAL ============================ */
1175.frn-testi{background:#fff;padding:74px 0;}
1176.frn-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
1177.frn-tcard{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:16px;padding:26px;}
1178.frn-tcard .frn-stars{color:#FFB020;margin-bottom:14px;display:block;}
1179.frn-tcard p{font-size:15px;color:#0F1B2A;margin-bottom:18px;}
1180.frn-tcard .who{font-size:13.5px;font-weight:700;color:#0B2A4A;}
1181.frn-tcard .who small{display:block;font-weight:400;color:#5A6B7B;margin-top:2px;}
1182@media(max-width:860px){.frn-testi-grid{grid-template-columns:1fr;}}
1183
1184/* ============================ FINAL CTA ============================ */
1185.frn-final{
1186  background:linear-gradient(160deg,#0B2A4A 0%,#0A2340 100%);
1187  color:#fff;padding:80px 0;text-align:center;
1188}
1189.frn-final h2{font-size:40px;margin-bottom:16px;}
1190.frn-final h2 em{font-style:normal;color:#7FB2FF;}
1191.frn-final p{color:#C7D6E8;font-size:18px;max-width:520px;margin:0 auto 30px;}
1192.frn-final-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;}
1193.frn-final-trust{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:14px;color:#AFC2D8;}
1194.frn-final-trust span{display:flex;align-items:center;gap:8px;}
1195.frn-final-trust .frn-tick{width:20px;height:20px;border-radius:50%;background:#10B981;color:#fff;display:grid;place-items:center;font-size:12px;}
1196
1197/* ============================ CUSTOMER CAROUSEL (Guideflow style) ============================ */
1198.frn-cust{background:#fff;padding:56px 0 60px;overflow:hidden;}
1199.frn-cust-head{text-align:center;max-width:640px;margin:0 auto 34px;padding:0 24px;}
1200.frn-cust-head .frn-eyebrow{margin-bottom:10px;}
1201.frn-cust-head h2{font-size:28px;color:#0B2A4A;margin-bottom:8px;letter-spacing:-.02em;}
1202.frn-cust-head p{color:#5A6B7B;font-size:15.5px;}
1203.frn-cust-rows{display:flex;flex-direction:column;gap:14px;}
1204.frn-cust-row{position:relative;width:100%;overflow:hidden;
1205  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
1206          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
1207.frn-cust-track{display:flex;align-items:center;gap:64px;width:max-content;
1208  animation:frn-scroll-l 38s linear infinite;}
1209.frn-cust-row.rev .frn-cust-track{animation-name:frn-scroll-r;animation-duration:38s;}
1210.frn-cust-row.slow .frn-cust-track{animation-duration:46s;}
1211.frn-cust-row:hover .frn-cust-track{animation-play-state:paused;}
1212@keyframes frn-scroll-l{from{transform:translateX(0);}to{transform:translateX(-50%);}}
1213@keyframes frn-scroll-r{from{transform:translateX(-50%);}to{transform:translateX(0);}}
1214/* naked logo on white - no tile/border, like Guideflow */
1215.frn-cust-logo{flex:none;height:34px;display:flex;align-items:center;justify-content:center;
1216  color:#5A6B7B;font-weight:700;font-size:16px;letter-spacing:.01em;white-space:nowrap;
1217  opacity:.7;filter:grayscale(1);transition:opacity .2s,filter .2s;padding:0 8px;}
1218.frn-cust-logo:hover{opacity:1;filter:grayscale(0);}
1219.frn-cust-logo img{height:34px;width:auto;max-width:150px;object-fit:contain;display:block;}
1220@media(max-width:600px){.frn-cust-logo{font-size:14px;height:28px;}.frn-cust-logo img{height:28px;}.frn-cust-track{gap:44px;}}
1221
1222/* ============================ FEATURE PAGE (frnfeat-) ============================ */
1223/* Reuses hero, demo/overlay, .frn-how stepper, .frn-cl bullets, .frn-final.
1224   New bits: compact feature hero, problem band, benefit split, cross-links. */
1225.frnfeat-hero{background:linear-gradient(160deg,#0B2A4A 0%,#0A2340 100%);color:#fff;padding:70px 24px 60px;text-align:center;}
1226.frnfeat-hero .frn-eyebrow{color:#7FB2FF;}
1227.frnfeat-hero h1{font-size:44px;font-weight:800;max-width:820px;margin:0 auto 18px;letter-spacing:-.02em;}
1228.frnfeat-hero h1 em{font-style:normal;color:#7FB2FF;}
1229.frnfeat-hero p{font-size:19px;color:#C7D6E8;max-width:620px;margin:0 auto 28px;}
1230.frnfeat-hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
1231
1232/* problem band */
1233.frnfeat-problem{background:#fff;padding:66px 24px;text-align:center;}
1234.frnfeat-problem .frn-wrap{max-width:760px;}
1235.frnfeat-problem h2{font-size:30px;color:#0B2A4A;margin-bottom:16px;letter-spacing:-.02em;}
1236.frnfeat-problem p{font-size:18px;color:#5A6B7B;line-height:1.6;}
1237
1238/* deep demo band */
1239.frnfeat-demo{background:#F6F8FB;padding:66px 24px;}
1240.frnfeat-demo-head{text-align:center;max-width:640px;margin:0 auto 40px;}
1241.frnfeat-demo-head h2{font-size:30px;color:#0B2A4A;margin-bottom:10px;}
1242.frnfeat-demo-head p{color:#5A6B7B;font-size:16px;}
1243.frnfeat-demo-stage{display:flex;justify-content:center;}
1244
1245/* benefits split (copy left, list right) */
1246.frnfeat-benefits{background:#fff;padding:70px 24px;}
1247.frnfeat-benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
1248.frnfeat-benefits h2{font-size:32px;color:#0B2A4A;margin-bottom:16px;letter-spacing:-.02em;}
1249.frnfeat-benefits h2 em{font-style:normal;color:#1E6FE8;}
1250.frnfeat-benefits>.frn-wrap>.frnfeat-benefits-grid>div>p{color:#5A6B7B;font-size:16px;line-height:1.6;}
1251.frnfeat-blist{list-style:none;padding:0;margin:0;}
1252.frnfeat-blist li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid #E4E9EF;color:#0F1B2A;font-size:16px;}
1253.frnfeat-blist li:last-child{border-bottom:0;}
1254.frnfeat-blist .frn-ic-y{flex:none;width:24px;height:24px;border-radius:50%;background:#10B981;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;}
1255
1256/* cross-links to other features */
1257.frnfeat-more{background:#F6F8FB;padding:66px 24px;}
1258.frnfeat-more-head{text-align:center;margin:0 auto 36px;}
1259.frnfeat-more-head h2{font-size:28px;color:#0B2A4A;}
1260.frnfeat-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
1261.frnfeat-card{display:block;background:#fff;border:1px solid #E4E9EF;border-radius:16px;padding:24px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;}
1262.frnfeat-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -16px rgba(11,42,74,.28);border-color:#1E6FE8;}
1263.frnfeat-card h3{font-size:17px;color:#0B2A4A;margin:0 0 6px;}
1264.frnfeat-card p{font-size:14px;color:#5A6B7B;margin:0;line-height:1.5;}
1265.frnfeat-card .frnfeat-arrow{color:#1E6FE8;font-weight:700;font-size:14px;margin-top:12px;display:inline-block;}
1266
1267@media(max-width:820px){
1268  .frnfeat-hero h1{font-size:32px;}
1269  .frnfeat-benefits-grid{grid-template-columns:1fr;gap:28px;}
1270  .frnfeat-more-grid{grid-template-columns:1fr;}
1271}
1272
1273/* ---- Feature selector: coming-soon tag + Supporting Features grid ---- */
1274.frn-soon{display:inline-block;background:#EAF1FE;color:#1E6FE8;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:middle;}
1275.frn-ailist{list-style:none;padding:0;margin:0;}
1276.frn-ailist li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-size:15.5px;color:#0F1B2A;border-bottom:1px solid #EEF2F6;}
1277.frn-ailist li::before{content:none;}
1278.frn-ailist li:last-child{border-bottom:0;}
1279.frn-ailist .frn-ai-chip{width:26px;height:26px;flex:none;font-size:12px;}
1280.frn-ailist .frn-ai-chip.soon{background:#CBD9EC;color:#0B2A4A;}
1281.frn-support{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
1282.frn-support-card{background:#fff;border:1px solid #E4E9EF;border-radius:14px;padding:20px;}
1283.frn-support-card h4{font-size:16px;color:#0B2A4A;margin:0 0 6px;}
1284.frn-support-card p{font-size:13.5px;color:#5A6B7B;margin:0 0 14px;line-height:1.5;}
1285.frn-support-mini{border-top:1px solid #EEF2F6;padding-top:12px;}
1286/* framed product screenshot inside a support card */
1287.frn-support-shot{margin-top:12px;border:1px solid #E4E9EF;border-radius:12px;overflow:hidden;background:#FBFCFD;padding:8px;}
1288.frn-support-shot img{display:block;width:100%;height:auto;border-radius:8px;}
1289@media(max-width:820px){.frn-support{grid-template-columns:1fr;}}
1290
1291/* ============================ PRICING PAGE (frnpr-) ============================ */
1292/* Reuses: blue blueprint hero pattern, .frn-final, buttons, Inter, bands.
1293   New: value grid, single-plan card, FAQ accordion. Blue-led blueprint hero. */
1294
1295/* --- blue blueprint hero (locked variant B) --- */
1296.frnpr-hero{position:relative;overflow:hidden;padding:76px 24px 68px;text-align:center;}
1297.frnpr-hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;}
1298.frnpr-hero-bg{position:absolute;inset:0;z-index:1;
1299  background:radial-gradient(820px 360px at 50% -6%, rgba(30,111,232,.13), transparent 62%),
1300    linear-gradient(180deg,#EEF4FE 0%, #F8FBFF 55%, #FFFFFF 100%);}
1301.frnpr-hero-bg::before{content:"";position:absolute;inset:0;
1302  background-image:linear-gradient(#1E6FE816 1px,transparent 1px),linear-gradient(90deg,#1E6FE816 1px,transparent 1px);
1303  background-size:24px 24px;
1304  -webkit-mask-image:radial-gradient(720px 340px at 50% 34%, #000 42%, transparent 78%);
1305          mask-image:radial-gradient(720px 340px at 50% 34%, #000 42%, transparent 78%);}
1306.frnpr-hero-bg::after{content:"";position:absolute;inset:0;
1307  background-image:linear-gradient(#1E6FE82B 1.3px,transparent 1.3px),linear-gradient(90deg,#1E6FE82B 1.3px,transparent 1.3px);
1308  background-size:120px 120px;
1309  -webkit-mask-image:radial-gradient(720px 340px at 50% 34%, #000 42%, transparent 78%);
1310          mask-image:radial-gradient(720px 340px at 50% 34%, #000 42%, transparent 78%);}
1311.frnpr-hero h1{font-size:46px;font-weight:800;color:#0B2A4A;max-width:760px;margin:0 auto 18px;letter-spacing:-.02em;line-height:1.08;}
1312.frnpr-hero h1 em{font-style:normal;color:#1E6FE8;}
1313.frnpr-hero p{font-size:19px;color:#5A6B7B;max-width:600px;margin:0 auto 28px;}
1314.frnpr-hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
1315
1316/* ---- LIGHT-BACKGROUND VARIANT of the interactive feature switcher ----
1317   The switcher (pills + Guideflow demo + full-screen overlay) was built for
1318   the homepage's dark .frn-hero. This page wants the same switcher on the
1319   light blueprint .frnpr-hero instead. Rather than fork the JS or the demo
1320   box styling (both stay identical, and both are already unscoped to any
1321   particular hero), this overrides only the light-legibility parts: pills,
1322   trust line, sub text and the "full screen" button, all of which were
1323   white-on-transparent and would be invisible on a light background.
1324   Scoped to .frnpr-hero-switch so it cannot affect the homepage's dark hero
1325   or the plain .frnpr-hero used on every other page. */
1326.frnpr-hero-switch{padding:76px 0 60px;}
1327.frnpr-hero-switch .frn-hero-copy,
1328.frnpr-hero-switch .frn-hero-demo{position:relative;z-index:2;}
1329.frnpr-hero-switch .frn-hero-copy{
1330  display:flex;flex-direction:column;align-items:center;
1331}
1332.frnpr-hero-switch .frn-hero-copy > *{text-align:center!important;}
1333.frnpr-hero-switch .frn-hero-copy h1,
1334.frnpr-hero-switch .frn-hero-copy p,
1335.frnpr-hero-switch .frn-hero-copy .frn-hero-sub{
1336  text-align:center!important;width:100%;
1337}
1338.frnpr-hero-switch h1{color:#0B2A4A;}
1339.frnpr-hero-switch h1 em{color:#1E6FE8;}
1340.frnpr-hero-switch .frn-hero-sub{color:#5A6B7B;}
1341.frnpr-hero-switch .frn-hero-trust{color:#5A6B7B;}
1342.frnpr-hero-switch .frn-hero-pill{background:#fff;border-color:#E4E9EF;color:#5A6B7B;}
1343.frnpr-hero-switch .frn-hero-pill:hover{background:#F6F8FB;color:#0F1B2A;border-color:#C9D6E4;}
1344.frnpr-hero-switch .frn-hero-pill.active{background:#0B2A4A;color:#fff;border-color:#0B2A4A;}
1345.frnpr-hero-switch .frn-demo-cue{color:#0B2A4A;}
1346.frnpr-hero-switch .frn-demo-expand{background:#fff;border-color:#E4E9EF;color:#0B2A4A;}
1347.frnpr-hero-switch .frn-demo-expand:hover{background:#F6F8FB;border-color:#1E6FE8;color:#1E6FE8;}
1348@media(max-width:900px){
1349  .frnpr-hero-switch h1{font-size:34px;}
1350}
1351
1352/* ---- CLICK-TO-OPEN DEMO POSTER ----
1353   The Guideflow embed renders its internal content narrower than its container
1354   when placed inside this page's hero, despite the container and iframe both
1355   measuring correctly (verified: box 940px, iframe 940px). The SAME embed id
1356   and code renders correctly in the full-screen overlay and on other pages, so
1357   the cause is something about this hero context that we could not isolate -
1358   Guideflow is cross-origin so its internal layout is not inspectable.
1359   Rather than ship a broken-looking demo, the hero shows a real product
1360   screenshot as a poster; clicking it opens the full-screen overlay, which
1361   renders correctly. Same content, one extra click. */
1362.frn-demo-poster{
1363  position:relative;display:block;width:100%;max-width:940px;margin:0 auto;
1364  padding:0;border:0;cursor:pointer;background:#0A1420;border-radius:16px;
1365  overflow:hidden;box-shadow:0 30px 70px -20px rgba(11,42,74,.32);
1366  transition:transform .15s ease,box-shadow .15s ease;
1367}
1368.frn-demo-poster:hover{transform:translateY(-2px);box-shadow:0 34px 80px -18px rgba(11,42,74,.42);}
1369.frn-demo-poster img{display:block;width:100%;height:auto;}
1370.frn-demo-poster::after{
1371  content:"";position:absolute;inset:0;background:rgba(11,42,74,.18);
1372  transition:background .15s ease;
1373}
1374.frn-demo-poster:hover::after{background:rgba(11,42,74,.06);}
1375.frn-demo-poster-play{
1376  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
1377  display:inline-flex;align-items:center;gap:10px;
1378  background:#fff;color:#0B2A4A;font-family:inherit;font-size:15px;font-weight:700;
1379  padding:14px 24px;border-radius:999px;box-shadow:0 10px 30px -8px rgba(11,42,74,.5);
1380  white-space:nowrap;
1381}
1382.frn-demo-poster-play .ico{
1383  width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;
1384  border-color:transparent transparent transparent #1E6FE8;flex:none;
1385}
1386@media(max-width:600px){
1387  .frn-demo-poster-play{font-size:13.5px;padding:11px 18px;}
1388}
1389
1390/* --- value section --- */
1391.frnpr-value{background:#fff;padding:74px 24px;}
1392.frnpr-value-head{text-align:center;max-width:640px;margin:0 auto 46px;}
1393.frnpr-value-head h2{font-size:34px;color:#0B2A4A;margin-bottom:12px;letter-spacing:-.02em;}
1394.frnpr-value-head p{color:#5A6B7B;font-size:17px;}
1395.frnpr-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
1396.frnpr-vcard{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:16px;padding:26px;}
1397.frnpr-vcard .ic{width:40px;height:40px;border-radius:10px;background:#EAF1FE;display:grid;place-items:center;font-size:18px;margin-bottom:14px;}
1398.frnpr-vcard h3{font-size:17px;color:#0B2A4A;margin:0 0 8px;}
1399.frnpr-vcard p{font-size:14.5px;color:#5A6B7B;margin:0;line-height:1.55;}
1400
1401/* --- single plan card --- */
1402.frnpr-plan{background:#F6F8FB;padding:74px 24px;}
1403.frnpr-plan-card{max-width:560px;margin:0 auto;background:#fff;border:1px solid #E4E9EF;border-radius:20px;box-shadow:0 30px 70px -28px rgba(11,42,74,.28);overflow:hidden;}
1404.frnpr-plan-top{background:#0B2A4A;color:#fff;padding:32px 34px;text-align:center;}
1405.frnpr-plan-top .frnpr-plan-name{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7FB2FF;margin-bottom:12px;}
1406.frnpr-plan-price{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1;}
1407.frnpr-plan-price small{font-size:17px;font-weight:600;color:#AFC2D8;letter-spacing:0;}
1408.frnpr-plan-sub{font-size:14px;color:#C7D6E8;margin-top:10px;}
1409.frnpr-plan-body{padding:30px 34px 34px;}
1410.frnpr-plan-body h4{font-size:14px;font-weight:700;color:#0B2A4A;margin:0 0 16px;}
1411.frnpr-plan-list{list-style:none;padding:0;margin:0 0 26px;}
1412.frnpr-plan-list li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:15px;color:#0F1B2A;}
1413.frnpr-plan-list .tick{flex:none;width:22px;height:22px;border-radius:50%;background:#10B981;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;}
1414.frnpr-plan-cta{display:block;text-align:center;}
1415.frnpr-plan-note{text-align:center;font-size:13px;color:#5A6B7B;margin-top:14px;}
1416
1417/* --- FAQ --- */
1418.frnpr-faq{background:#fff;padding:74px 24px;}
1419.frnpr-faq-head{text-align:center;margin:0 auto 40px;}
1420.frnpr-faq-head h2{font-size:32px;color:#0B2A4A;letter-spacing:-.02em;}
1421.frnpr-faq-list{max-width:720px;margin:0 auto;}
1422.frnpr-faq-item{border-bottom:1px solid #E4E9EF;}
1423.frnpr-faq-q{width:100%;text-align:left;background:none !important;border:0;border-radius:0;box-shadow:none;font-family:inherit;font-size:17px;font-weight:600;color:#0B2A4A !important;padding:22px 40px 22px 0;cursor:pointer;position:relative;}
1424.frnpr-faq-q:hover,.frnpr-faq-q:focus,.frnpr-faq-q:active,
1425.frnpr-faq-item.open .frnpr-faq-q{background:none !important;color:#0B2A4A !important;box-shadow:none;outline:none;}
1426.frnpr-faq-q:focus-visible{outline:2px solid #1E6FE8;outline-offset:2px;}
1427.frnpr-faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:#1E6FE8;transition:transform .2s;}
1428.frnpr-faq-item.open .frnpr-faq-q::after{content:"\2212";}
1429.frnpr-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
1430.frnpr-faq-a-inner{padding:0 0 22px;font-size:15.5px;color:#5A6B7B;line-height:1.6;}
1431/* Pricing band table inside the FAQ answer */
1432.frnpr-bandtable{margin:14px 0 14px;border:1px solid #E4E9EF;border-radius:12px;overflow:hidden;background:#fff;}
1433.frnpr-bandtable-head{display:flex;justify-content:space-between;gap:16px;padding:9px 16px;background:#F6F8FB;border-bottom:1px solid #E4E9EF;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5A6B7B;}
1434.frnpr-bandtable-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 16px;border-bottom:1px solid #EEF2F6;font-size:15px;}
1435.frnpr-bandtable-row:last-child{border-bottom:0;}
1436.frnpr-bandtable-row .u{color:#5A6B7B;}
1437.frnpr-bandtable-row .p{font-weight:700;color:#0B2A4A;}
1438.frnpr-faq-item.open .frnpr-faq-a{max-height:600px;}
1439
1440@media(max-width:820px){
1441  .frnpr-hero h1{font-size:34px;}
1442  .frnpr-value-grid{grid-template-columns:1fr;}
1443}
1444
1445/* ============================ PRICING CALCULATOR + ONBOARDING (frnpc-) ============================ */
1446/* Ported from the post-demo landing page, re-namespaced under .frn-scope so it
1447   inherits Inter + shared tokens. Slider drives a tiered per-user price. */
1448.frnpc-card{background:#fff;border:1px solid #E4E9EF;border-radius:20px;padding:36px;box-shadow:0 30px 70px -28px rgba(11,42,74,.28);max-width:640px;margin:0 auto;}
1449.frnpc-top{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px;}
1450.frnpc-count-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#1E6FE8;}
1451.frnpc-count{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#0B2A4A;}
1452.frnpc-count small{font-size:18px;font-weight:600;color:#5A6B7B;}
1453.frnpc-total-wrap{text-align:right;}
1454.frnpc-total-label{font-size:13px;color:#7A8A9A;}
1455.frnpc-total{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#10B981;}
1456.frnpc-total small{font-size:16px;font-weight:600;color:#5A6B7B;}
1457.frnpc-total-unit{font-size:13px;color:#7A8A9A;}
1458.frnpc-slider-row{margin:26px 0 8px;}
1459.frnpc-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:100px;background:#E4E9EF;outline:none;margin:0;}
1460.frnpc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#1E6FE8;border:4px solid #fff;box-shadow:0 3px 10px -2px rgba(30,111,232,.6);cursor:pointer;}
1461.frnpc-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#1E6FE8;border:4px solid #fff;box-shadow:0 3px 10px -2px rgba(30,111,232,.6);cursor:pointer;}
1462.frnpc-ticks{display:flex;justify-content:space-between;font-size:12px;color:#7A8A9A;margin-top:10px;}
1463.frnpc-peruser{text-align:center;font-size:14.5px;color:#5A6B7B;margin:20px 0 0;padding-top:20px;border-top:1px solid #E4E9EF;}
1464.frnpc-peruser strong{color:#0F1B2A;font-weight:700;}
1465.frnpc-bands{margin-top:16px;display:none;}
1466.frnpc-bands.is-open{display:block;}
1467.frnpc-band-row{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-bottom:1px solid #F0F3F7;color:#5A6B7B;}
1468.frnpc-band-row:last-child{border-bottom:0;}
1469.frnpc-band-row span:last-child{font-weight:700;color:#0F1B2A;}
1470.frnpc-toggle{display:block;margin:14px auto 0;background:none !important;border:0;border-radius:0;box-shadow:none;color:#1E6FE8 !important;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;}
1471.frnpc-toggle:hover,.frnpc-toggle:focus,.frnpc-toggle:active{background:none !important;color:#1E6FE8 !important;box-shadow:none;outline:none;}
1472.frnpc-toggle:focus-visible{outline:2px solid #1E6FE8;outline-offset:2px;}
1473.frnpc-cta{text-align:center;margin-top:24px;}
1474.frnpc-count-hint{text-align:center;font-size:13px;color:#7A8A9A;margin-top:4px;}
1475/* Option 2 price layout: per-user is the hero (black, moderate size), total is a quiet sub-line */
1476.frnpc-o2{text-align:center;padding:6px 0 2px;}
1477.frnpc-o2 .frnpc-count-label{display:block;margin-bottom:6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#1E6FE8;}
1478.frnpc-o2-peruser{display:flex;align-items:center;justify-content:center;gap:9px;}
1479.frnpc-o2-amt{font-size:30px;font-weight:800;color:#0F1B2A;letter-spacing:-.02em;line-height:1;}
1480.frnpc-o2-tail{font-size:13px;font-weight:600;color:#5A6B7B;text-align:left;line-height:1.3;}
1481.frnpc-o2-total{font-size:14px;color:#7A8A9A;margin-top:14px;}
1482.frnpc-o2-total strong{color:#0F1B2A;font-weight:700;}
1483
1484/* users-counted note */
1485.frnpr-notes{max-width:640px;margin:24px auto 0;font-size:14.5px;line-height:1.6;color:#5A6B7B;background:#F6F8FB;border:1px solid #E4E9EF;border-radius:14px;padding:22px 24px;}
1486.frnpr-notes-title{font-weight:700;color:#0F1B2A;display:block;margin-bottom:10px;}
1487.frnpr-notes ul{margin:0;padding:0;list-style:none;}
1488.frnpr-notes li{position:relative;padding-left:26px;margin-bottom:8px;}
1489.frnpr-notes li:last-child{margin-bottom:0;}
1490.frnpr-notes li::before{content:"\2713";position:absolute;
1490left:0;top:0;color:#10B981;font-weight:800;}
1491
1492/* onboarding packages */
1493.frnpr-onb{background:#fff;padding:74px 24px;}
1494.frnpr-onb-head{text-align:center;max-width:640px;margin:0 auto 44px;}
1495.frnpr-onb-head h2{font-size:34px;color:#0B2A4A;margin-bottom:12px;letter-spacing:-.02em;}
1496.frnpr-onb-head p{color:#5A6B7B;font-size:17px;}
1497.frnpr-pkgs{display:flex;gap:24px;flex-wrap:wrap;align-items:stretch;max-width:840px;margin:0 auto;}
1498.frnpr-pkg{flex:1 1 340px;display:flex;flex-direction:column;background:#F6F8FB;border:1px solid #E4E9EF;border-radius:16px;padding:32px;}
1499.frnpr-pkg-tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#1E6FE8;background:#EAF1FE;padding:5px 11px;border-radius:100px;margin-bottom:14px;}
1500.frnpr-pkg h3{font-size:22px;font-weight:800;color:#0B2A4A;margin-bottom:6px;}
1501.frnpr-pkg-price{font-size:30px;font-weight:800;color:#0B2A4A;margin-bottom:4px;letter-spacing:-.03em;}
1502.frnpr-pkg-price small{font-size:14px;font-weight:600;color:#7A8A9A;}
1503.frnpr-pkg-sub{font-size:14.5px;color:#5A6B7B;margin-bottom:18px;}
1504.frnpr-pkg h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#0B2A4A;margin:18px 0 10px;}
1505.frnpr-pkg ul{margin:0;padding:0;list-style:none;font-size:14.5px;line-height:1.5;color:#5A6B7B;}
1506.frnpr-pkg li{position:relative;padding-left:24px;margin-bottom:8px;}
1507.frnpr-pkg li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:#1E6FE8;}
1508.frnpr-pkg-note{font-size:13.5px;line-height:1.55;color:#7A8A9A;font-style:italic;margin-top:auto;padding-top:16px;}
1509.frnpr-pkg-note-inner{padding-top:16px;border-top:1px solid #E4E9EF;display:block;}
1510@media(max-width:560px){.frnpc-card{padding:24px;}.frnpc-count,.frnpc-total{font-size:34px;}}
1511
1512
1513/* ============================ TESTIMONIAL MARQUEE ============================ */
1514.frn-tmarq{position:relative;overflow:hidden;
1515  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
1516          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
1517.frn-tmarq-track{display:flex;gap:22px;width:max-content;animation:frn-tmarq-scroll 60s linear infinite;}
1518.frn-tmarq:hover .frn-tmarq-track{animation-play-state:paused;}
1519@keyframes frn-tmarq-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
1520.frn-tmarq-card{flex:0 0 auto;width:380px;background:#F6F8FB;border:1px solid #E4E9EF;border-radius:16px;padding:30px 30px 26px;display:flex;flex-direction:column;}
1521.frn-tmarq-card .frn-stars{color:#FFB020;font-size:16px;letter-spacing:2px;margin-bottom:14px;}
1522.frn-tmarq-card .q{font-size:15px;line-height:1.6;color:#0F1B2A;margin-bottom:18px;flex:1;}
1523.frn-tmarq-card .who{font-size:14px;font-weight:700;color:#0B2A4A;}
1524.frn-tmarq-card .who small{display:block;font-weight:400;color:#5A6B7B;font-size:12.5px;margin-top:3px;}
1525@media(max-width:820px){.frn-tmarq-card{width:300px;}}
1526
1527/* ============================ WHAT'S INCLUDED — ACCORDION (frninc-) ============================ */
1528.frninc{max-width:820px;margin:0 auto;}
1529.frninc-item{border:1px solid #E4E9EF;border-radius:14px;margin-bottom:12px;overflow:hidden;background:#fff;}
1530.frninc-q{width:100%;text-align:left;background:#fff !important;border:0;border-radius:0;box-shadow:none;font-family:inherit;color:#0B2A4A !important;padding:18px 52px 18px 20px;cursor:pointer;position:relative;display:flex;align-items:center;gap:14px;}
1531.frninc-q:hover,.frninc-q:focus,.frninc-q:active,.frninc-item.open .frninc-q{background:#fff !important;color:#0B2A4A !important;box-shadow:none;outline:none;}
1532.frninc-q:focus-visible{outline:2px solid #1E6FE8;outline-offset:2px;}
1533.frninc-ic{font-size:20px;flex:none;}
1534.frninc-qtext{display:flex;flex-direction:column;gap:2px;}
1535.frninc-cat{font-size:17px;font-weight:700;color:#0B2A4A;}
1536.frninc-summ{font-size:14px;font-weight:400;color:#5A6B7B;}
1537.frninc-count{margin-left:auto;font-size:13px;font-weight:600;color:#1E6FE8;background:#EAF1FE;padding:3px 10px;border-radius:100px;flex:none;}
1538.frninc-q::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:22px;color:#1E6FE8;}
1539.frninc-item.open .frninc-q::after{content:"\2212";}
1540.frninc-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
1541.frninc-item.open .frninc-a{max-height:640px;}
1542.frninc-a-inner{padding:0 20px 18px 54px;}
1543.frninc-a-inner ul{list-style:none;margin:0;padding:0;}
1544.frninc-a-inner li{position:relative;padding:8px 0 8px 26px;font-size:15px;color:#0F1B2A;border-top:1px solid #F0F3F7;}
1545.frninc-a-inner li::before{content:"\2713";position:absolute;
1545left:0;top:8px;color:#10B981;font-weight:800;}
1546/* coming-soon: muted check + pill (class-based, no :has() so it's bulletproof) */
1547.frninc-a-inner li.soon::before{color:#9DB4CE;}
1548.frninc-soon{display:inline-block;background:#EAF1FE;color:#1E6FE8;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:100px;margin-left:8px;vertical-align:middle;}
1549
1550/* ============================ INDUSTRY / TRADE PAGE (frntr-) ============================ */
1551/* Reuses: blueprint hero, stat band, feature selector, integrations, testimonial
1552   marquee, final CTA. New: trade benefits split section. */
1553.frntr-benefits{background:#fff;padding:78px 24px;}
1554.frntr-benefits-head{text-align:center;max-width:680px;margin:0 auto 50px;}
1555.frntr-benefits-head h2{font-size:34px;color:#0B2A4A;margin-bottom:14px;letter-spacing:-.02em;}
1556.frntr-benefits-head h2 em{font-style:normal;color:#1E6FE8;}
1557.frntr-benefits-head p{color:#5A6B7B;font-size:17px;line-height:1.6;}
1558.frntr-blist{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:920px;margin:0 auto;}
1559.frntr-bcard{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:16px;padding:28px;display:flex;gap:16px;align-items:flex-start;}
1560.frntr-bcard .frntr-ic{flex:none;width:44px;height:44px;border-radius:12px;background:#EAF1FE;display:grid;place-items:center;font-size:20px;}
1561.frntr-bcard h3{font-size:17px;color:#0B2A4A;margin:0 0 7px;}
1562.frntr-bcard p{font-size:14.5px;color:#5A6B7B;margin:0;line-height:1.55;}
1563@media(max-width:820px){.frntr-blist{grid-template-columns:1fr;}.frntr-benefits-head h2{font-size:28px;}}
1564
1565/* ============================ TRADE CATALOGUE SHOWCASE (frntr-cat) ============================ */
1566.frntr-cat{background:#F6F8FB;padding:78px 24px;}
1567.frntr-cat-head{text-align:center;max-width:680px;margin:0 auto 46px;}
1568.frntr-cat-head h2{font-size:34px;color:#0B2A4A;margin-bottom:14px;letter-spacing:-.02em;}
1569.frntr-cat-head h2 em{font-style:normal;color:#1E6FE8;}
1570.frntr-cat-head p{color:#5A6B7B;font-size:17px;line-height:1.6;}
1571.frntr-cat-total{display:inline-flex;align-items:baseline;gap:10px;background:#0B2A4A;color:#fff;border-radius:14px;padding:16px 26px;margin-bottom:8px;}
1572.frntr-cat-total .n{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#7FB2FF;}
1573.frntr-cat-total .l{font-size:15px;color:#C7D6E8;font-weight:600;}
1574.frntr-cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:960px;margin:34px auto 0;}
1575.frntr-cat-card{background:#fff;border:1px solid #E4E9EF;border-radius:16px;padding:24px 18px;text-align:center;}
1576.frntr-cat-card .ic{font-size:26px;margin-bottom:12px;}
1577/* Hand-drawn category icons. Emoji could not cover pipework at all, and gas
1578   renders orange on every platform because emoji colour is not controllable.
1579   currentColor lets the amber electrical theme retint them for free. */
1580.frntr-cat-card .frntr-cat-ic{width:34px;height:34px;display:block;margin:0 auto 12px;color:#1E6FE8;}
1581.frntr-cat-card .num{font-size:30px;font-weight:800;color:#0B2A4A;letter-spacing:-.03em;line-height:1;}
1582.frntr-cat-card .cat{font-size:13.5px;color:#5A6B7B;margin-top:8px;font-weight:600;}
1583@media(max-width:820px){.frntr-cat-grid{grid-template-columns:repeat(2,1fr);}.frntr-cat-head h2{font-size:28px;}}
1584@media(max-width:480px){.frntr-cat-grid{grid-template-columns:1fr;}}
1585
1586/* ============================ ELECTRICAL PAGE — AMBER THEME (frnel-) ============================ */
1587/* Applied by wrapping the electrical page hero/accents in .frnel-theme.
1588   Amber = electrical (vs blue = plumbing). Uses #F59E0B lead, #B45309 for text. */
1589/* amber blueprint hero */
1590.frnel-theme .frnpr-hero-bg{
1591  background:radial-gradient(820px 360px at 50% -6%, rgba(245,158,11,.16), transparent 62%),
1592    linear-gradient(180deg,#FEF7EC 0%, #FFFCF6 55%, #FFFFFF 100%);}
1593.frnel-theme .frnpr-hero-bg::before{
1594  background-image:linear-gradient(#F59E0B1A 1px,transparent 1px),linear-gradient(90deg,#F59E0B1A 1px,transparent 1px);}
1595.frnel-theme .frnpr-hero-bg::after{
1596  background-image:linear-gradient(#F59E0B33 1.3px,transparent 1.3px),linear-gradient(90deg,#F59E0B33 1.3px,transparent 1.3px);}
1597.frnel-theme .frnpr-hero h1 em{color:#D97706;}
1598.frnel-theme .frnpr-hero .frn-eyebrow{color:#B45309 !important;}
1599/* amber eyebrows + emphasis across the page sections */
1600.frnel-theme .frn-eyebrow{color:#B45309;}
1601.frnel-theme .frn-stats-head h2 em,
1602.frnel-theme .frntr-cat-head h2 em,
1603.frnel-theme .frntr-benefits-head h2 em{color:#D97706;}
1604.frnel-theme .frn-stat .frn-n em{color:#0B2A4A;} /* keep stat numbers navy for readability */
1605/* catalogue showcase: amber badge + icon tiles */
1606.frnel-theme .frntr-cat-total{background:#7C2D12;}
1607.frnel-theme .frntr-cat-total .n{color:#FCD34D;}
1608.frnel-theme .frntr-cat-total .l{color:#FDE9C8;}
1609.frnel-theme .frntr-cat-card .num{color:#0B2A4A;}
1610.frnel-theme .frntr-cat-card .frntr-cat-ic{color:#D97706;}
1611/* benefit card icon tiles -> warm tint */
1612.frnel-theme .frntr-bcard .frntr-ic{background:#FEF3D7;}
1613.frnel-theme .frnpr-vcard .ic{background:#FEF3D7;}
1614/* secondary (dark) button on amber hero -> keep navy, works on light bg */
1615
1616/* ============================ INTEGRATIONS PAGE (frnip-) ============================ */
1617.frnip-grid-sec{background:#fff;padding:70px 24px;}
1618.frnip-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 34px;max-width:1000px;}
1619.frnip-pill{background:#fff !important;border:1px solid #E4E9EF;color:#5A6B7B !important;font-family:inherit;font-size:14px;font-weight:600;padding:9px 18px;border-radius:100px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
1620.frnip-pill:hover{border-color:#C9D6E4;color:#0F1B2A !important;background:#fff !important;}
1621.frnip-pill.active{background:#1E6FE8 !important;color:#fff !important;border-color:#1E6FE8;}
1622.frnip-pill:focus-visible{outline:2px solid #1E6FE8;outline-offset:2px;}
1623.frnip-head{text-align:center;max-width:680px;margin:0 auto 46px;}
1624.frnip-head h2{font-size:34px;color:#0B2A4A;margin-bottom:14px;letter-spacing:-.02em;}
1625.frnip-head h2 em{font-style:normal;color:#1E6FE8;}
1626.frnip-head p{color:#5A6B7B;font-size:17px;line-height:1.6;}
1627.frnip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:0 auto;}
1628.frnip-card{background:#fff;border:1px solid #E4E9EF;border-radius:16px;overflow:hidden;transition:box-shadow .15s,border-color .15s;}
1629.frnip-card.open{border-color:#1E6FE8;box-shadow:0 14px 40px -16px rgba(11,42,74,.28);}
1630.frnip-card-btn{width:100%;text-align:left;background:#fff !important;border:0;font-family:inherit;padding:22px 22px;cursor:pointer;display:flex;flex-direction:column;gap:8px;position:relative;color:#0B2A4A !important;}
1631.frnip-card-btn:hover,.frnip-card-btn:focus,.frnip-card-btn:active,.frnip-card.open .frnip-card-btn{background:#fff !important;color:#0B2A4A !important;outline:none;box-shadow:none;}
1632.frnip-card-btn:focus-visible{outline:2px solid #1E6FE8;outline-offset:-2px;}
1633.frnip-logo{font-size:20px;font-weight:800;color:#0B2A4A;letter-spacing:-.02em;}
1634.frnip-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1E6FE8;}
1635.frnip-blurb{font-size:14px;color:#5A6B7B;line-height:1.5;margin:0;}
1636.frnip-soon{display:inline-block;background:#EAF1FE;color:#1E6FE8;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:100px;margin-left:8px;vertical-align:middle;}
1637.frnip-plus{position:absolute;right:20px;top:22px;font-size:22px;color:#1E6FE8;line-height:1;}
1638.frnip-card.open .frnip-plus{content:"";}
1639.frnip-detail{max-height:0;overflow:hidden;transition:max-height .3s ease;}
1640.frnip-card.open .frnip-detail{max-height:600px;}
1641.frnip-detail-inner{padding:0 22px 22px;border-top:1px solid #EEF2F6;margin-top:2px;padding-top:16px;}
1642.frnip-detail-inner h4{font-size:14px;color:#0B2A4A;margin:0 0 10px;}
1643.frnip-detail-inner ul{list-style:none;margin:0;padding:0;}
1644.frnip-detail-inner li{position:relative;padding:5px 0 5px 22px;font-size:13.5px;color:#5A6B7B;line-height:1.45;}
1645.frnip-detail-inner li::before{content:"\2713";position:absolute;left:0;top:5px;color:#10B981;font-weight:800;font-size:12px;}
1646.frnip-contact{font-size:13px;color:#5A6B7B;margin:0;padding-top:10px;border-top:1px solid #EEF2F6;}
1647.frnip-contact a{color:#1E6FE8;text-decoration:none;font-weight:600;}
1648.frnip-contact a:hover{text-decoration:underline;}
1649@media(max-width:860px){.frnip-grid{grid-template-columns:repeat(2,1fr);}}
1650@media(max-width:560px){.frnip-grid{grid-template-columns:1fr;}}
1651
1652/* ============================ FEATURE PAGE v2 (frnf2-) ============================ */
1653/* Catalogue / Quotation / Presentation / AI pages. Reuses blueprint hero,
1654   buttons, final CTA. New: alternating capability rows + changelog visual. */
1655/* capability rows */
1656.frnf2-rows{background:#fff;padding:20px 24px 70px;}
1657.frnf2-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1040px;margin:0 auto;padding:44px 0;border-top:1px solid #EEF2F6;}
1658.frnf2-row:first-child{border-top:0;}
1659.frnf2-row:nth-child(even) .frnf2-row-text{order:2;}
1660.frnf2-row:nth-child(even) .frnf2-row-media{order:1;}
1661.frnf2-row-text h2{font-size:26px;color:#0B2A4A;margin:0 0 12px;letter-spacing:-.02em;}
1662.frnf2-row-text h2 em{font-style:normal;color:#1E6FE8;}
1663.frnf2-soon-badge{display:inline-block;background:#EAF1FE;color:#1E6FE8;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-left:8px;vertical-align:middle;}
1664/* Green = shipped recently. Kept visually distinct from the blue coming-soon
1665   badge so the two never read as the same thing. */
1666.frnf2-new-badge{display:inline-block;background:#DCFCE7;color:#047857;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-left:8px;vertical-align:middle;}
1667.frnf2-row-text p{font-size:16px;color:#5A6B7B;line-height:1.6;margin:0;}
1668.frnf2-row-media{min-width:0;}
1669/* media slot (Guideflow or mockup) */
1670.frnf2-slot{border-radius:16px;overflow:hidden;background:#0A1420;box-shadow:0 20px 50px -20px rgba(11,42,74,.3);}
1671.frnf2-slot iframe{display:block;border:0;border-radius:16px;}
1672/* HubSpot video embed inside a media slot: the thumbnail is an inline <img>,
1673   which leaves a few px of baseline gap under it inside the rounded slot. */
1674.frnf2-slot .hs-video-widget{line-height:0;}
1675.frnf2-slot .hs-video-widget img,.frnf2-slot .hs-video-widget video{display:block;width:100%;height:auto;}
1676/* Video slot: matches the other media slots (16:9, dark, rounded, shadowed)
1677   instead of sizing to the video's own dimensions. data-hsv-control
1677s="false"
1678   on the widget hides HubSpot's native player bar - it is autoplay/muted/loop
1679   already, so there is nothing for a visitor to click, and a progress bar
1680   sitting over a demo reads as "video", not "live product". */
1681/* Fixed-ratio video slot: use ONLY when the source genuinely is close to 16:9.
1682   Forcing every video into one box meant a narrow recording either showed the
1683   box's own dark background as bars, or had to be guess-cropped to fill it. */
1684.frnf2-slot-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
1685.frnf2-slot-video .hs-video-widget{position:absolute;inset:0;}
1686.frnf2-slot-video .hs-video-widget img,.frnf2-slot-video .hs-video-widget video{
1687  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
1688}
1689
1690/* Framed video (Guideflow-style device card): the video keeps its OWN aspect
1691   ratio - no forced box, no crop, no bars, since there is nothing behind it
1692   to show through. A white card with padding and a border stands in for the
1693   iPad-style frame Guideflow uses, so a portrait recording next to a
1694   landscape one still reads as one consistent design instead of two
1695   different-shaped black boxes. Row height varies with the video, same as it
1696   already does for Guideflow embeds elsewhere on the site. */
1697.frnf2-slot-framed{
1698  background:#fff;border:1px solid #E4E9EF;border-radius:20px;
1699  padding:22px;box-shadow:0 20px 50px -20px rgba(11,42,74,.22);
1700  /* Video keeps its own aspect ratio but the CARD is stretched to a minimum
1701     width, scaling the source video up with it. Source footage is modest
1702     resolution, so this trades a little sharpness for a slot that reads as
1703     "the same size as the row next to it" rather than visibly smaller.
1704     Re-recording at a higher resolution is the real fix if this softens too
1705     much - swap this min-width back to none once that happens. */
1706  min-width:460px;
1707}
1708.frnf2-slot-framed .hs-video-widget{
1709  display:block;border-radius:12px;overflow:hidden;
1710  box-shadow:0 8px 24px -10px rgba(11,42,74,.35);
1711}
1712.frnf2-slot-framed .hs-video-widget img,.frnf2-slot-framed .hs-video-widget video{
1713  display:block;width:100%;height:auto;border-radius:12px;
1714}
1715@media(max-width:860px){
1716  .frnf2-slot-framed{min-width:0;}
1717}
1718.frnf2-slot-empty{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#7FB2FF;font-size:14px;font-weight:600;background:repeating-linear-gradient(45deg,#0E2038,#0E2038 10px,#0A1A2E 10px,#0A1A2E 20px);}
1719/* changelog visual */
1720.frnf2-changelog{background:#fff;border:1px solid #E4E9EF;border-radius:16px;box-shadow:0 14px 40px -18px rgba(11,42,74,.22);overflow:hidden;}
1721.frnf2-changelog-head{display:flex;align-items:center;gap:10px;padding:16px 20px;background:#F6F8FB;border-bottom:1px solid #E4E9EF;font-size:14px;font-weight:700;color:#0B2A4A;}
1722.frnf2-changelog-dot{width:9px;height:9px;border-radius:50%;background:#10B981;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:frn-pulse 2.2s infinite;}
1723.frnf2-changelog-list{list-style:none;margin:0;padding:8px 0;}
1724.frnf2-changelog-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 20px;border-bottom:1px solid #F0F3F7;}
1725.frnf2-changelog-list li:last-child{border-bottom:0;}
1726/* Fixed width so NEW and PRICES occupy the same space. Without it the wider
1727   PRICES pill pushes its row's text further right and the column zig-zags. */
1728.frnf2-tag{flex:none;min-width:66px;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:100px;margin-top:2px;}
1729.frnf2-tag-new{background:#DCFCE7;color:#047857;}
1730.frnf2-tag-price{background:#EAF1FE;color:#1E6FE8;}
1731.frnf2-changelog-body{display:flex;flex-direction:column;gap:2px;font-size:14px;color:#0F1B2A;}
1732.frnf2-changelog-body strong{font-weight:600;}
1733.frnf2-changelog-date{font-size:12.5px;color:#7A8A9A;}
1734.frnf2-changelog-foot{padding:12px 20px;font-size:12.5px;color:#7A8A9A;background:#F6F8FB;border-top:1px solid #E4E9EF;text-align:center;}
1735/* cross-links */
1736.frnf2-next{background:#F6F8FB;padding:66px 24px;}
1737.frnf2-next-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1E6FE8;margin:0 0 26px;}
1738.frnf2-next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto;}
1739.frnf2-next-card{display:block;background:#fff;border:1px solid #E4E9EF;border-radius:16px;padding:24px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;}
1740.frnf2-next-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -16px rgba(11,42,74,.28);border-color:#1E6FE8;}
1741.frnf2-next-card strong{display:block;font-size:17px;color:#0B2A4A;margin-bottom:6px;}
1742.frnf2-next-card span{font-size:14px;color:#5A6B7B;line-height:1.5;}
1743@media(max-width:820px){
1744  .frnf2-row{grid-template-columns:1fr;gap:24px;padding:34px 0;}
1745  .frnf2-row:nth-child(even) .frnf2-row-text{order:0;}
1746  .frnf2-row:nth-child(even) .frnf2-row-media{order:0;}
1747  .frnf2-next-grid{grid-template-columns:1fr;}
1748}
1749
1750/* ============================ CONTACT PAGE (frnct-) ============================ */
1751.frnct-body{background:#fff;padding:66px 24px;}
1752.frnct-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;max-width:1000px;margin:0 auto;align-items:start;}
1753/* form side */
1754.frnct-formcard{background:#F6F8FB;border:1px solid #E4E9EF;border-radius:20px;padding:34px;}
1755.frnct-formcard h2{font-size:24px;color:#0B2A4A;margin:0 0 6px;letter-spacing:-.02em;}
1756.frnct-formcard p{font-size:15px;color:#5A6B7B;margin:0 0 22px;}
1757/* HubSpot form restyle to match our system */
1758.frnct-formcard .hs-form-field{margin-bottom:16px;}
1759.frnct-formcard .hs-form-field label{display:block;font-size:13.5px;font-weight:600;color:#0B2A4A;margin-bottom:6px;}
1760.frnct-formcard .hs-input{width:100%;font-family:inherit;font-size:15px;color:#0F1B2A;padding:11px 14px;border:1px solid #D5DEE8;border-radius:10px;background:#fff;box-sizing:border-box;}
1761.frnct-formcard .hs-input:focus{outline:none;border-color:#1E6FE8;box-shadow:0 0 0 3px rgba(30,111,232,.12);}
1762.frnct-formcard textarea.hs-input{min-height:120px;resize:vertical;}
1763.frnct-formcard .hs-button{font-family:inherit;font-size:16px;font-weight:600;background:#10B981;color:#fff;border:0;padding:13px 28px;border-radius:999px;cursor:pointer;box-shadow:0 8px 20px -8px rgba(16,185,129,.55);transition:background .15s,transform .15s;}
1764.frnct-formcard .hs-button:hover{background:#0E9E6E;transform:translateY(-1px);}
1765.frnct-formcard .hs-error-msg,.frnct-formcard .hs-error-msgs label{color:#C0392B;font-size:12.5px;font-weight:500;}
1766.frnct-formcard .inputs-list{list-style:none;margin:0;padding:0;}
1767/* details side */
1768.frnct-details{display:flex;flex-direction:column;gap:26px;}
1769.frnct-block h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#1E6FE8;margin:0 0 12px;}
1770.frnct-line{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#0F1B2A;margin-bottom:10px;line-height:1.5;}
1771.frnct-line:last-child{margin-bottom:0;}
1772.frnct-line .ic{flex:none;width:22px;text-align:center;font-size:16px;}
1773.frnct-line a{color:#1E6FE8;text-decoration:none;font-weight:600;}
1774.frnct-line a:hover{text-decoration:underline;}
1775.frnct-social{display:flex;gap:12px;}
1776.frnct-social a{width:40px;height:40px;border-radius:10px;background:#EAF1FE;display:grid;place-items:center;color:#1E6FE8;text-decoration:none;font-weight:800;font-size:15px;transition:background .15s;}
1777.frnct-social a:hover{background:#1E6FE8;color:#fff;}
1778@media(max-width:820px){.frnct-grid{grid-template-columns:1fr;gap:32px;}}
1779
1780/* ============================ LABOUR RATE CALCULATOR (frnlc-) ============================ */
1781.frnlc-body{background:#F6F8FB;padding:60px 24px 74px;}
1782.frnlc-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;max-width:1040px;margin:0 auto;align-items:start;}
1783/* inputs card */
1784.frnlc-inputs{background:#fff;border:1px solid #E4E9EF;border-radius:20px;padding:30px;}
1785.frnlc-inputs h2{font-size:20px;color:#0B2A4A;margin:0 0 4px;letter-spacing:-.02em;}
1786.frnlc-inputs .frnlc-sub{font-size:14px;color:#5A6B7B;margin:0 0 22px;}
1787.frnlc-group{margin-bottom:22px;}
1788.frnlc-group-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#1E6FE8;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #EEF2F6;}
1789.frnlc-field{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;}
1790.frnlc-field:last-child{margin-bottom:0;}
1791.frnlc-field label{font-size:14px;color:#0F1B2A;flex:1;line-height:1.35;}
1792.frnlc-field .hint{display:block;font-size:12px;color:#7A8A9A;margin-top:1px;}
1793.frnlc-input{width:110px;flex:none;font-family:inherit;font-size:15px;font-weight:600;color:#0F1B2A;text-align:center;padding:9px 14px;border:1px solid #D5DEE8;border-radius:9px;background:#fff;box-sizing:border-box;}
1794.frnlc-input:focus{outline:none;border-color:#1E6FE8;box-shadow:0 0 0 3px rgba(30,111,232,.12);}
1795.frnlc-input-wrap{position:relative;flex:none;}
1796.frnlc-input-wrap .aff{position:absolute;top:50%;transform:translateY(-50%);font-size:14px;color:#7A8A9A;pointer-events:none;}
1797.frnlc-input-wrap .aff-left{left:12px;}
1798.frnlc-input-wrap.has-prefix .frnlc-input{padding-left:26px;text-align:center;}
1799.frnlc-input-wrap.has-suffix .frnlc-input{padding-right:30px;}
1800.frnlc-input-wrap .aff-right{right:12px;}
1801/* results card (sticky) */
1802.frnlc-results{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px;}
1803.frnlc-rcard{border-radius:18px;padding:26px 28px;}
1804.frnlc-rcard .rlabel{font-size:13px;font-weight:700;margin:0 0 4px;display:flex;align-items:center;gap:7px;}
1805.frnlc-rcard .rhelp{font-size:12.5px;line-height:1.5;margin:0 0 14px;opacity:.85;}
1806.frnlc-rcard .rnum{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;}
1807.frnlc-rcard .rnum small{font-size:17px;font-weight:600;opacity:.7;}
1808/* the two FRN cards = highlighted; do & charge = muted */
1809.frnlc-rcard.frn-sell{background:linear-gradient(160deg,#0B2A4A 0%,#0A2340 100%);color:#fff;box-shadow:0 24px 60px -24px rgba(11,42,74,.4);}
1810.frnlc-rcard.frn-sell .rlabel{color:#7FB2FF;}
1811.frnlc-rcard.frn-sell .rnum{color:#fff;}
1812.frnlc-rcard.frn-cost{background:#EAF1FE;border:1px solid #C7DBFB;color:#0B2A4A;}
1813.frnlc-rcard.frn-cost .rlabel{color:#1E6FE8;}
1814.frnlc-rcard.doandcharge{background:#fff;border:1px dashed #C3D2E2;color:#5A6B7B;}
1815.frnlc-rcard.doandcharge .rlabel{color:#7A8A9A;}
1816.frnlc-rcard.doandcharge .rnum{color:#5A6B7B;}
1817/* email capture */
1818.frnlc-capture{background:#fff;border:1px solid #E4E9EF;border-radius:16px;padding:22px;margin-top:4px;}
1819.frnlc-capture h4{font-size:15px;color:#0B2A4A;margin:0 0 4px;}
1820.frnlc-capture p{font-size:13px;color:#5A6B7B;margin:0 0 14px;}
1821.frnlc-capture .frnlc-formslot{}
1822/* HubSpot form inside the calculator card. Scoped here rather than styled in
1823   the HubSpot form editor, because that would restyle the form everywhere it
1824   is embedded. Mirrors the contact page treatment. */
1825.frnlc-capture .hs-form-field{margin-bottom:14px;}
1826.frnlc-capture .hs-form-field label{display:block;font-size:13px;font-weight:600;color:#0B2A4A;margin-bottom:5px;}
1827.frnlc-capture .hs-form-required{color:#C0392B;margin-left:2px;}
1828.frnlc-capture .hs-input{width:100%;font-family:inherit;font-size:15px;color:#0F1B2A;padding:11px 13px;border:1px solid #D5DEE8;border-radius:10px;background:#fff;box-sizing:border-box;}
1829.frnlc-capture .hs-input:focus{outline:none;border-color:#1E6FE8;box-shadow:0 0 0 3px rgba(30,111,232,.12);}
1830.frnlc-capture .hs-error-msg,.frnlc-capture .hs-error-msgs label{color:#C0392B;font-size:12.5px;font-weight:500;}
1831.frnlc-capture .inputs-list{list-style:none;margin:0;padding:0;}
1832/* HubSpot injects its own per-form stylesheet AFTER the template head, and the
1833   submit button can arrive as input[type=submit].hs-button.primary. Match every
1834   shape of it and set background AND background-color, or the theme orange
1835   survives on the live page even though it looks right in Design Manager. */
1836.frnlc-capture .hs-button,
1837.frnlc-capture input.hs-button,
1838.frnlc-capture form input[type="submit"],
1839.frnlc-capture .actions input[type="submit"],
1840.frnlc-capture input[type="submit"].hs-button.primary{
1841  font-family:inherit !important;font-size:15px !important;font-weight:600 !important;
1842  background:#10B981 !important;background-color:#10B981 !important;background-image:none !important;
1843  color:#fff !important;border:0 !important;border-color:#10B981 !important;
1844  padding:13px 26px !important;border-radius:999px !important;cursor:pointer;
1845  box-shadow:0 8px 20px -8px rgba(16,185,129,.55);transition:background .15s,transform .15s;
1846}
1847.frnlc-capture .hs-button:hover,
1848.frnlc-capture .hs-button:focus,
1849.frnlc-capture .hs-button:active,
1850.frnlc-capture input[type="submit"]:hover,
1851.frnlc-capture input[type="submit"]:focus,
1852.frnlc-capture input[type="submit"]:active{
1853  background:#0E9E6E !important;background-color:#0E9E6E !important;color:#fff !important;
1854  border-color:#0E9E6E !important;transform:translateY(-1px);
1855}
1856.frnlc-capture .grecaptcha-badge{margin-bottom:12px;}
1857@media(max-width:860px){.frnlc-layout{grid-template-columns:1fr;}.frnlc-results{position:static;}}
1858
1859/* ============================ GLOBAL NAV + FOOTER (frnnav- / frnft-) ============================ */
1860/* Clean sticky header and footer for the FRN Base template. Namespaced so they
1861   don't collide with page modules. Inter, navy/blue/green system. */
1862
1863/* --- NAV --- */
1864.frnnav{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #E4E9EF;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
1865.frnnav-inner{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px;}
1866.frnnav-logo{flex:none;display:flex;align-items:center;text-decoration:none;}
1867.frnnav-logo img{height:30px;width:auto;display:block;}
1868.frnnav-logo-text{font-size:20px;font-weight:800;color:#0B2A4A;letter-spacing:-.02em;}
1869.frnnav-menu{display:flex;align-items:center;gap:4px;margin:0 auto;list-style:none;padding:0;min-width:0;}
1870.frnnav-item{position:relative;}
1871.frnnav-link{display:flex;align-items:center;gap:5px;white-space:nowrap;padding:10px 14px;font-size:15px;font-weight:600;color:#0F1B2A;text-decoration:none;border-radius:8px;cursor:pointer;background:none;border:0;font-family:inherit;transition:background .15s,color .15s;}
1872.frnnav-link:hover{background:#F6F8FB;color:#1E6FE8;}
1873.frnnav-caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s;opacity:.6;}
1874.frnnav-item.open .frnnav-caret,
1875.frnnav-item:hover .frnnav-caret{transform:rotate(-135deg);margin-top:2px;}
1876/* dropdown */
1877.frnnav-dd{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;max-width:340px;background:#fff;border:1px solid #E4E9EF;border-radius:14px;box-shadow:0 20px 50px -18px rgba(11,42,74,.28);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;list-style:none;margin:0;}
1878.frnnav-item.open .frnnav-dd,.frnnav-item:hover .frnnav-dd{opacity:1;visibility:visible;transform:translateY(0);}
1879.frnnav-dd a{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border-radius:9px;font-size:14.5px;font-weight:500;color:#0F1B2A;text-decoration:none;transition:background .12s,color .12s;}
1880.frnnav-dd a:hover{background:#EAF1FE;color:#1E6FE8;}
1881/* Icon sits muted by default and picks up the blue on hover, so the menu reads
1882   as text first and the icons support it rather than competing. */
1883.frnnav-dd-ic{flex:none;width:18px;height:18px;margin-top:1.5px;color:#8FA3B8;transition:color .12s;}
1884.frnnav-dd a:hover .frnnav-dd-ic{color:#1E6FE8;}
1885.frnnav-dd-t{display:block;min-width:0;}
1886.frnnav-dd a .sub{display:block;font-size:12.5px;color:#7A8A9A;font-weight:400;margin-top:1px;}
1887.frnnav-dd-divider{height:1px;background:#EEF2F6;margin:6px 8px;}
1888/* right actions */
1889.frnnav-actions{flex:none;display:flex;align-items:center;gap:12px;}
1890.frnnav-login{white-space:nowrap;font-size:15px;font-weight:600;color:#0B2A4A;text-decoration:none;padding:9px 14px;border-radius:999px;border:1.5px solid #D5DEE8;transition:border-color .15s,color .15s;}
1891.frnnav-login:hover{border-color:#1E6FE8;color:#1E6FE8;}
1892.frnnav-cta{white-space:nowrap;font-size:15px;font-weight:700;color:#fff;background:#10B981;text-decoration:none;padding:11px 20px;border-radius:999px;box-shadow:0 8px 20px -8px rgba(16,185,129,.55);transition:background .15s,transform .15s;}
1893.frnnav-cta:hover{background:#0E9E6E;transform:translateY(-1px);}
1894/* mobile toggle */
1895.frnnav-burger{display:none;flex:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative;}
1896.frnnav-burger span{position:absolute;
1896left:11px;right:11px;height:2px;background:#0B2A4A;border-radius:2px;transition:transform .2s,opacity .2s;}
1897.frnnav-burger span:nth-child(1){top:15px;} .frnnav-burger span:nth-child(2){top:21px;} .frnnav-burger span:nth-child(3){top:27px;}
1898.frnnav.mobile-open .frnnav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
1899.frnnav.mobile-open .frnnav-burger span:nth-child(2){opacity:0;}
1900.frnnav.mobile-open .frnnav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
1901
1902/* Intermediate band: the desktop nav needs ~1150px to fit logo + 5 items +
1903   Log In + CTA. Tighten spacing here so it survives down to the burger
1904   breakpoint instead of pushing the CTA off the right edge. */
1905@media(max-width:1180px){
1906  .frnnav-inner{gap:12px;padding:0 16px;}
1907  .frnnav-link{padding:10px 9px;font-size:14px;}
1908  .frnnav-login{padding:8px 12px;font-size:14px;}
1909  .frnnav-cta{padding:10px 15px;font-size:14px;}
1910  .frnnav-logo img{height:26px;}
1911}
1912@media(max-width:1080px){
1913  .frnnav-burger{display:block;}
1914  .frnnav-menu{position:fixed;top:70px;left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;padding:16px 20px;overflow-y:auto;margin:0;transform:translateX(100%);transition:transform .25s;}
1915  .frnnav.mobile-open .frnnav-menu{transform:translateX(0);}
1916  .frnnav-link{padding:14px 8px;font-size:16px;}
1917  .frnnav-dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:0 0 8px 16px;min-width:0;max-width:none;}
1918  .frnnav-item:hover .frnnav-dd{transform:none;}
1919  .frnnav-dd{display:none;} .frnnav-item.open .frnnav-dd{display:block;}
1920  .frnnav-actions{display:none;}
1921  /* Panel is a right-hand drawer, not a full-window takeover. On a phone it
1922     goes edge to edge; on a half-width laptop window it stays a drawer so the
1923     menu doesn't sprawl across 1000px of empty space. */
1924  .frnnav-menu{max-width:400px;margin-left:auto;box-shadow:-20px 0 50px -20px rgba(11,42,74,.25);}
1925  /* Actions sit side by side at their natural width. Stretching them full
1926     width only looks right on a narrow phone (handled below). */
1927  .frnnav-menu .frnnav-mobile-actions{display:flex;flex-direction:row;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid #EEF2F6;}
1928  .frnnav-mobile-actions .frnnav-login,
1929  .frnnav-mobile-actions .frnnav-cta{flex:0 0 auto;text-align:center;}
1930}
1931@media(max-width:560px){
1932  .frnnav-menu{max-width:none;box-shadow:none;}
1933  .frnnav-menu .frnnav-mobile-actions{flex-direction:column;align-items:stretch;}
1934  .frnnav-mobile-actions .frnnav-login,
1935  .frnnav-mobile-actions .frnnav-cta{flex:1 1 auto;}
1936}
1937.frnnav-mobile-actions{display:none;}
1938
1939/* --- FOOTER --- */
1940.frnft{background:#0B2A4A;color:#C7D6E8;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
1941.frnft-main{max-width:1240px;margin:0 auto;padding:60px 24px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
1942.frnft-brand{max-width:280px;}
1943.frnft-brand .frnft-logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:14px;display:inline-block;text-decoration:none;}
1944.frnft-brand img{height:30px;margin-bottom:14px;}
1945.frnft-brand p{font-size:14px;line-height:1.6;color:#AFC2D8;margin:0 0 18px;}
1946.frnft-social{display:flex;gap:10px;}
1947.frnft-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background .15s;}
1948.frnft-social a:hover{background:#1E6FE8;}
1949.frnft-social svg{width:18px;height:18px;fill:#fff;}
1950.frnft-col h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#7FB2FF;margin:0 0 16px;}
1951.frnft-col ul{list-style:none;margin:0;padding:0;}
1952.frnft-col li{margin-bottom:11px;}
1953.frnft-col a{font-size:14px;color:#C7D6E8;text-decoration:none;transition:color .15s;}
1954.frnft-col a:hover{color:#fff;}
1955.frnft-bottom{border-top:1px solid rgba(255,255,255,.1);}
1956.frnft-bottom-inner{max-width:1240px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
1957.frnft-copy{font-size:13px;color:#8FA6C0;}
1958.frnft-apps{display:flex;gap:12px;align-items:center;}
1959.frnft-apps a{font-size:13px;color:#C7D6E8;text-decoration:none;display:flex;align-items:center;gap:6px;}
1960.frnft-apps a:hover{color:#fff;}
1961@media(max-width:820px){
1962  .frnft-main{grid-template-columns:1fr 1fr;gap:32px;}
1963  .frnft-brand{grid-column:1/-1;max-width:none;}
1964}
1965@media(max-width:480px){.frnft-main{grid-template-columns:1fr;}}
1966</style>
1967<meta name="generator" content="HubSpot"></head>
1968
1969<body>
1970<!--  Added by AdRoll integration -->
1971<script type="text/javascript">
1972  adroll_adv_id = "RNMLZ7FY6NELHEHVBYH224";
1973  adroll_pix_id = "DISVVXQPSFBSDB5IOGMHQH";
1974  var _hsp = window._hsp = window._hsp || [];
1975  (function () {
1976      var _onload = function(){
1977          if (document.readyState && !/loaded|complete/.test(document.readyState)){setTimeout(_onload, 10);return}
1978          if (!window.__adroll_loaded){__adroll_loaded=true;setTimeout(_onload, 50);return}
1979          _hsp.push(['addPrivacyConsentListener', function(consent) { if (consent.allowed || (consent.categories && consent.categories.advertisement)) {
1980            var scr = document.createElement("script");
1981            var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
1982            scr.setAttribute('async', 'true');
1983            scr.type = "text/javascript";
1984            scr.src = host + "/j/roundtrip.js";
1985            ((document.getElementsByTagName('head') || [null])[0] ||
1986                document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
1987          }}]);
1988      };
1989      if (window.addEventListener) {window.addEventListener('load', _onload, false);}
1990      else {window.attachEvent('onload', _onload)}
1991  }());
1992</script>
1992
1993
1994<!-- /Added by AdRoll integration -->
1995
1996<!--  Added by GoogleTagManager integration -->
vendor: 68 bytes, lines 1996-1997
1996
1997<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
1997GTM-NVFNZVC
vendor: 84 bytes, lines 1997-1998
1997" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
1998
1999<!-- /Added by GoogleTagManager integration -->
2000
2001
2002  <!-- ===================== GLOBAL NAV ===================== -->
2003  <header class="frnnav" id="frnnav">
2004    <div class="frnnav-inner">
2005      <a class="frnnav-logo" href="https://www.flatratenow.net?hsLang=en">
2006        <!-- swap for your logo image; text fallback shown -->
2007        <img src="https://www.flatratenow.net/hubfs/FRN-Logo-2020-RGB.png" alt="FlatRateNOW" onerror="this.style.display='none';this.nextElementSibling.style.display='inline';">
2008        <span class="frnnav-logo-text" style="display:none;">FlatRateNOW</span>
2009      </a>
2010
2011      <ul class="frnnav-menu" id="frnnavMenu">
2012        <li class="frnnav-item">
2013          <button class="frnnav-link" type="button">Industries <span class="frnnav-caret"></span></button>
2014          <ul class="frnnav-dd">
2015            <li><a href="https://www.flatratenow.net/industries/plumbing?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9h7a5 5 0 0 1 5 5v6" /><path d="M4 6.5v5" /><path d="M13.5 20h5" /></svg><span class="frnnav-dd-t">Plumbing<span class="sub">Includes Hot Water, Plumbing, Drains, Gas, Roofing &amp; Tanks</span></span></a></li>
2016            <li><a href="https://www.flatratenow.net/industries/electrical?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 4.5 13.5H11l-1 8.5L18.5 10.5H12L13 2Z" /></svg><span class="frnnav-dd-t">Electrical<span class="sub">Includes Electrical, Solar &amp; HVAC</span></span></a></li>
2017          </ul>
2018        </li>
2019        <li class="frnnav-item">
2020          <button class="frnnav-link" type="button">Features <span class="frnnav-caret"></span></button>
2021          <ul class="frnnav-dd">
2022            <li><a href="https://www.flatratenow.net/features/catalogue?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7.5" height="7.5" rx="2" /><rect x="13.5" y="3" width="7.5" height="7.5" rx="2" /><rect x="3" y="13.5" width="7.5" height="7.5" rx="2" /><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="2" /></svg><span class="frnnav-dd-t">Catalogue<span class="sub">Build the quote from a trade catalogue</span></span></a></li>
2023            <li><a href="https://www.flatratenow.net/features/quotation?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z" /><path d="M14 3v5h5" /><path d="M9 13h6M9 17h4" /></svg><span class="frnnav-dd-t">Quotation<span class="sub">Price a complete quote on-site</span></span></a></li>
2024            <li><a href="https://www.flatratenow.net/features/presentation?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.5" y="4" width="19" height="12.5" rx="2" /><path d="M12 16.5V21M9 21h6" /></svg><span class="frnnav-dd-t">Presentation<span class="sub">Present options and win it</span></span></a></li>
2025            <li><a href="https://www.flatratenow.net/features/ai?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.2l1.75 4.8 4.8 1.75-4.8 1.75L12 16.3l-1.75-4.8-4.8-1.75 4.8-1.75L12 3.2Z" /><path d="M18.4 16.3l.65 1.8 1.8.65-1.8.65-.65 1.8-.65-1.8-1.8-.65 1.8-.65.65-1.8Z" /></svg><span class="frnnav-dd-t">AI<span class="sub">A second set of eyes on every quote</span></span></a></li>
2026            <li class="frnnav-dd-divider"></li>
2027            <li><a href="https://www.flatratenow.net/integrations?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="6" r="2.5" /><circle cx="18" cy="6" r="2.5" /><circle cx="12" cy="18" r="2.5" /><path d="M8.5 6h7M7.3 8.2l3.4 7.5M16.7 8.2l-3.4 7.5" /></svg><span class="frnnav-dd-t">Integrations</span></a></li>
2028            <li>
2028<a href="https://www.flatratenow.net/partners?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="3.2" /><path d="M3.2 20a5.8 5.8 0 0 1 11.6 0" /><path d="M16.2 5.4a3.2 3.2 0 0 1 0 5.2" /><path d="M17.6 14.3A5.8 5.8 0 0 1 20.8 20" /></svg><span class="frnnav-dd-t">Partners</span></a></li>
2029          </ul>
2030        </li>
2031        <li class="frnnav-item">
2032          <button class="frnnav-link" type="button">Resources <span class="frnnav-caret"></span></button>
2033          <ul class="frnnav-dd">
2034            <li><a href="https://support.flatratenow.net/knowledge?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 7.2V21" /><path d="M3 18.2a1 1 0 0 1-1-1V4.2a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3H3Z" /></svg><span class="frnnav-dd-t">Knowledge Base</span></a></li>
2035            <li><a href="https://www.flatratenow.net/flatratenow-calculator?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="2.5" width="16" height="19" rx="2.5" /><rect x="7.5" y="6" width="9" height="3.5" rx="1" /><path d="M8 14h.01M12 14h.01M16 14h.01M8 17.8h.01M12 17.8h.01M16 17.8h.01" /></svg><span class="frnnav-dd-t">Labour Rate Calculator</span></a></li>
2036          </ul>
2037        </li>
2038        <li class="frnnav-item">
2039          <a class="frnnav-link" href="https://www.flatratenow.net/pricing">Pricing</a>
2040        </li>
2041        <li class="frnnav-item">
2042          <button class="frnnav-link" type="button">Support <span class="frnnav-caret"></span></button>
2043          <ul class="frnnav-dd">
2044            <li><a href="https://support.flatratenow.net/knowledge?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 7.2V21" /><path d="M3 18.2a1 1 0 0 1-1-1V4.2a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3H3Z" /></svg><span class="frnnav-dd-t">Knowledge Base</span></a></li>
2045            <li><a href="https://www.flatratenow.net/contact?hsLang=en"><svg class="frnnav-dd-ic" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.6a8.4 8.4 0 0 1-9.1 8.4 9.2 9.2 0 0 1-3.8-.9L3 20.6l1.6-4.5A8.4 8.4 0 0 1 12 3.2a8.4 8.4 0 0 1 9 8.4Z" /></svg><span class="frnnav-dd-t">Contact Us</span></a></li>
2046          </ul>
2047        </li>
2048
2049        <!-- mobile-only action buttons -->
2050        <li class="frnnav-mobile-actions">
2051          <a class="frnnav-login" href="https://live.flatratenow.net/">Log In</a>
2052          <a class="frnnav-cta" href="https://live.flatratenow.net/web/signup">Get Started Free</a>
2053        </li>
2054      </ul>
2055
2056      <div class="frnnav-actions">
2057        <a class="frnnav-login" href="https://live.flatratenow.net/">Log In</a>
2058        <a class="frnnav-cta" href="https://live.flatratenow.net/web/signup">Get Started Free</a>
2059      </div>
2060
2061      <button class="frnnav-burger" id="frnnavBurger" type="button" aria-label="Menu"><span></span><span></span><span></span></button>
2062    </div>
2063  </header>
2064
2065  <!-- ===================== PAGE BODY (drag-and-drop area) ===================== -->
2066  <main>
2067    <div class="container-fluid">
2068<div class="row-fluid-wrapper">
2069<div class="row-fluid">
2070<div class="span12 widget-span widget-type-cell " style="" data-widget-type="cell" data-x="0" data-w="12">
2071
2072<div class="row-fluid-wrapper row-depth-1 row-number-1 dnd-section">
2073<div class="row-fluid ">
2074<div class="span12 widget-span widget-type-cell dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12">
2075
2076<div class="row-fluid-wrapper row-depth-1 row-number-2 dnd-row">
2077<div class="row-fluid ">
2078<div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12">
2079<div id="hs_cos_wrapper_widget_1788331466504" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><!--
2080============================================================================
2081FlatRateNOW — PRICING PAGE  (Custom HTML module, Professional)
2082============================================================================
2083Public pricing page. Value-first, per-user slider calculator, onboarding.
2084Built off home.html + shared Head HTML (page-level for now).
2085⚠ EDIT MONTHLY — the RATES array in the script drives the calculator:
2086Banded, not flat: users 1-3 = $108 ea, users 4-10 = $96 ea,
2087users 11+ = $84 ea (all +GST). A team of 11 = $1,080, NOT 11 x $84.
2088RATES[] in the script below is the single source of truth.
2089⚠ PLACEHOLDERS: CTA hrefs "#" still need real signup URL;
2090onboarding = 2 packages for now (3rd coming); testimonial names need
2091permission confirmation.
2092============================================================================
2093-->
2094<div class="frn-scope">
2095<!-- ===== HERO (blue blueprint) ===== -->
2096<section class="frnpr-hero">
2097<div class="frnpr-hero-bg" aria-hidden="true"></div>
2098<div class="frnpr-hero-inner">
2099<span class="frn-eyebrow" style="color:#1E6FE8;">Pricing</span>
2100<h1>One plan. Everything you need to <em>quote, present and win.</em></h1>
2101<p>No tiers to decode, no features held back. Every tradie gets the whole toolkit, priced per user, and it drops as your team grows.</p>
2102<div class="frnpr-hero-actions">
2103<a href="https://live.flatratenow.net/web/signup" class="frn-btn frn-btn-primary">Start free trial</a>
2104<a href="#plan" class="frn-btn frn-btn-dark">See pricing</a>
2105</div>
2106</div>
2107</section>
2108<!-- ===== WHAT'S INCLUDED (accordion) ===== -->
2109<section class="frnpr-value">
2110<div class="frn-wrap">
2111<div class="frnpr-value-head">
2112<h2>Everything that’s included</h2>
2113<p>One plan, the whole toolkit. Every feature below is in it, no add-ons, no tiers.</p>
2114</div>
2115<div class="frninc" id="frninc">
2116<div class="frninc-item open">
2117<button class="frninc-q" type="button"><span class="frninc-qtext"><span class="frninc-cat">Job list</span><span class="frninc-summ">Your whole workload in one view, sorted and ready to action</span></span><span class="frninc-count">5</span></button>
2118<div class="frninc-a"><div class="frninc-a-inner"><ul><li>Job cards that open from a summary into full detail</li><li>Job filtering</li><li>Hot leads flagged, so the jobs worth chasing stay in front of you</li><li>Visible follow-up schedule</li><li>Job Purpose &amp; Job Finding: dedicated fields that keep your client clear on what you proposed, even days after you left site</li></ul></div></div>
2119</div>
2120<div class="frninc-item">
2121<button class="frninc-q" type="button"><span class="frninc-qtext"><span class="frninc-cat">Catalogue</span><span class="frninc-summ">1,842 prebuilt trade tasks, plus build and customise your own</span></span><span class="frninc-count">15</span></button>
2122<div class="frninc-a"><div class="frninc-a-inner"><ul><li>540 plumbing tasks</li><li>444 electrical tasks</li><li>249 drains tasks</li><li>226 hot water tasks</li><li>105 gas tasks</li><li>94 miscellaneous tasks</li><li>86 roof &amp; tanks tasks</li><li>80 HVAC tasks</li><li>18 solar tasks</li><li>Every task fully customisable, or build your own from scratch</li><li>Multiple templates: labour &amp; material, standard, product selection, matrix, m2 and m3 matrix</li><li>Images on both products and tasks, so the client sees what they are buying</li><li>16,000+ products to choose from</li><li>Standard suggested add-on tasks across most of the catalogue, plus ai Allie's own suggestions</li><li>Favourite your common tasks to reach them in a tap</li></ul></div></div>
2123</div>
2124<div class="frninc-item">
2125<button class="frninc-q" type="button"><span class="frninc-qtext"><span class="frninc-cat">Quoting</span><span class="frninc-summ">Full control over pricing and labour on every quote</span></span><span class="frninc-count">8</span></button>
2126<div class="frninc-a"><div class="frninc-a-inner"><ul><li>Control the price and labour hours on any individual task</li><li>Quote-level pricing and labour limits, so margins hold whoever is holding the tablet</li><li>Build the quote visually, tapping tasks straight from the catalogue</li><li>Require an initial payment, so the deposit lands the moment they accept</li><li>Automatic quote follow-up triggers</li><li>Share the quote by email, SMS or QR code</li><li>Customise your documents with the built-in drag and drop editor</li><li>Quote Purpose: spell out why you offered each option so the client is never left guessing</li></ul></div></div>
2127</div>
2128<div class="frninc-item">
2129<button class="frninc-q" type="button"><span class="frninc-qtext"><span class="frninc-cat">Presentation</span><span class="frninc-summ">Show the customer their options and win it on-site</span></span><span class="frninc-count">6</span></button>
2130<div class="frninc-a"><div class="frninc-a-inner"><ul><li>Present multiple quotes side by side, on-site</li><li>Heading and description written for you from the job purpose and finding</li><li>Control what the client sees and what they can act on</li><li>The client can accept one option or several</li><li>One link shares the whole presentation</li><li>Automatic presentation follow-up triggers</li></ul></div></div>
2131</div>
2132<div class="frninc-item">
2133<button class="frninc-q" type="button"><span class="frninc-qtext"><span class="frninc-cat">AI</span><span class="frninc-summ">A second set of eyes that backs your judgement</span></span><span class="frninc-count">6</span></button>
2134<div class="frninc-a"><div class="frninc-a-inner"><ul><li>Text refinement tidies your wording in a tap</li><li>Summarise a quote or a job in seconds</li><li>Task suggestions drawn from $2.5 billion of real quote data</li><li>AI rule safeguards keep every suggestion inside your company rules</li><li class="soon">Quote generation <span class="frninc-soon">Coming soon</span></li><li class="soon">Personalised automatic follow-up based on the job <span class="frninc-soon">Coming soon</span></li></ul></div></div>
2135</div>
2136<div class="frninc-item">
2137<button class="frninc-q" type="button"><span class="frninc-qtext"><span class="frninc-cat">Invoicing</span><span class="frninc-summ">Get paid on-site and keep the cash flowing</span></span><span class="frninc-count">6</span></button>
2138<div class="frninc-a"><div class="frninc-a-inner"><ul><li>FRNPay, our own payment solution, so you can take deposits and payments without a separate terminal</li><li>Take payment on-site, the moment the job is won</li><li>Customise your invoice and receipt documents</li><li>Payment links for the ones who want to pay later</li><li>Payment dashboards showing what has landed and what has not</li><li>Forecasts on what is still to come in</li></ul></div></div>
2139</div>
2140<div class="frninc-item">
2141<button class="frninc-q" type="button"><span class="frninc-qtext"><span class="frninc-cat">Reporting</span><span class="frninc-summ">See how the business and the team are tracking</span></span><span class="frninc-count">1</span></button>
2142<div class="frninc-a"><div class="frninc-a-inner"><ul><li>Company and individual dashboards, so you can see who is winning what</li></ul></div></div>
2143</div>
2144<div class="frninc-item">
2145<button class="frninc-q" type="button"><span class="frninc-qtext"><span class="frninc-cat">Integrations</span><span class="frninc-summ">Plugs into the job and accounting tools you already run</span></span><span class="frninc-count">9</span></button>
2146<div class="frninc-a"><div class="frninc-a-inner"><ul><li>simPRO</li><li>ServiceM8</li><li>ServiceTitan</li><li>AroFlo</li><li>Xero</li><li>
2146Reece maX</li><li>Stripe</li><li class="soon">Ascora <span class="frninc-soon">Coming soon</span></li><li class="soon">Fergus <span class="frninc-soon">Coming soon</span></li></ul></div></div>
2147</div>
2148</div>
2149</div>
2150</section>
2151<!-- ===== PRICING CALCULATOR ===== -->
2152<section class="frnpr-plan" id="plan">
2153<div class="frn-wrap">
2154<div class="frnpr-value-head">
2155<h2>Subscription pricing</h2>
2156<p>Monthly, no lock-in contract. Priced per user, and the rate drops as your team grows.</p>
2157</div>
2158<div class="frnpc-card">
2159<div class="frnpc-o2">
2160<span class="frnpc-count-label" id="frnpc-countlabel">1 user</span>
2161<div class="frnpc-o2-peruser">
2162<span class="frnpc-o2-amt">$<span id="frnpc-avg">108</span></span>
2163<span class="frnpc-o2-tail">+ GST<br>average per user / month</span>
2164</div>
2165<div class="frnpc-o2-total">Estimated total <strong>$<span id="frnpc-total">108</span> + GST</strong> / month</div>
2166</div>
2167<div class="frnpc-slider-row">
2168<input type="range" min="1" max="25" value="1" step="1" class="frnpc-range" id="frnpc-range" aria-label="Number of users">
2169<div class="frnpc-ticks"><span>1</span><span>10</span><span>25</span></div>
2170</div>
2171<div class="frnpc-bands" id="frnpc-bands"></div>
2172<button class="frnpc-toggle" id="frnpc-toggle" type="button">Show price breakdown</button>
2173<div class="frnpc-cta">
2174<a class="frn-btn frn-btn-primary" href="https://live.flatratenow.net/web/signup">Start free trial</a>
2175<p style="margin:14px 0 0;font-size:14px;line-height:1.5;color:#5A6B7B;text-align:center;">More than 25 quoting users? <a href="https://www.flatratenow.net/contact?hsLang=en" style="color:#1E6FE8;font-weight:600;">Talk to us</a> and we'll size it with you.</p>
2176</div>
2177</div>
2178<!-- how users are counted -->
2179<div class="frnpr-notes">
2180<span class="frnpr-notes-title">How users are counted</span>
2181<ul>
2182<li>A subscription is required for anyone building quotes (accessing the Quoting app).</li>
2183<li>Office users (no Quoting app access) are complimentary.</li>
2184<li>Manager users are premium, with access to both the Quoting app and the office portal.</li>
2185</ul>
2186</div>
2187</div>
2188</section>
2189<!-- ===== ONBOARDING ===== -->
2190<section class="frnpr-onb">
2191<div class="frn-wrap">
2192<div class="frnpr-onb-head">
2193<h2>Onboarding &amp; training</h2>
2194<p>Get set up and quoting as fast as possible.</p>
2195</div>
2196<div class="frnpr-pkgs">
2197<div class="frnpr-pkg">
2198<span class="frnpr-pkg-tag">Recommended</span>
2199<h3>Complete Onboarding</h3>
2200<div class="frnpr-pkg-price">$946.00 <small>inc GST</small></div>
2201<p class="frnpr-pkg-sub">Assisted Setup Package, up to 4 hours across 2 to 3 sessions.</p>
2202<h4>Part 1: Setup</h4>
2203<ul>
2204<li>Office portal configuration</li>
2205<li>Integration with your Job Management System</li>
2206<li>Using Task Templates to create and modify tasks</li>
2207<li>Understanding and managing Quotes via the office portal</li>
2208</ul>
2209<h4>Part 2: App Training</h4>
2210<ul>
2211<li>Navigating the Job List</li>
2212<li>Building quotes, controlling pricing and available features</li>
2213<li>Using the Scratchpad to develop options on-site</li>
2214</ul>
2215<p class="frnpr-pkg-note"><span class="frnpr-pkg-note-inner">Middle session: a focused session between Part 1 and 2 to fine-tune your catalogue in more depth. We'll explain this fully in the first session.</span></p>
2216</div>
2217<div class="frnpr-pkg" id="frnpr-pkg-basic" data-max-users="3">
2218<span class="frnpr-pkg-tag">Fast start</span>
2219<h3>Basic Setup + App Training</h3>
2220<div class="frnpr-pkg-price">$453.75 <small>inc GST</small></div>
2221<p class="frnpr-pkg-sub">Ready to go in roughly 90 minutes.</p>
2222<h4>What's covered</h4>
2223<ul>
2224<li>15 to 20 minutes in the office view completing the basic setup</li>
2225<li>70 to 75 minutes focused on the Quoting app, training on building quotes on-site</li>
2226</ul>
2227<p class="frnpr-pkg-note"><span class="frnpr-pkg-note-inner">A quick path to getting your team quoting. Step up to Complete Onboarding any time for deeper catalogue and integration setup.</span></p>
2228</div>
2229</div>
2230<!-- [EDIT] a third onboarding package is coming — add it here as a third .frnpr-pkg -->
2231</div>
2232</section>
2233<!-- ===== PROOF (auto-scroll marquee — matches homepage) ===== -->
2234<section class="frn-testi">
2235<div class="frn-wrap">
2236<div class="frn-stats-head">
2237<span class="frn-eyebrow">Worth it</span>
2238<h2 style="color:#0B2A4A;font-size:32px;">Tradies who made the switch</h2>
2239</div>
2240</div>
2241<div class="frn-tmarq">
2242<div class="frn-tmarq-track">
2243<!-- set 1 -->
2244<div class="frn-tmarq-card"><div class="frn-stars">★★★★★</div><p class="q">Moving to Flat rate now from our old paper pricing system, was one of the best decision we have made for the team. Ive watched our average dollar sale increase by 150% over the last 3 months while using the program.</p><div class="who">Terry<small>Verified Review, Trustpilot</small></div></div>
2245<div class="frn-tmarq-card"><div class="frn-stars">★★★★★</div><p class="q">Excellent program, makes my life so much easier. Easier to quote, looks professional. Holds the client to account with the signature. Talks with my accountant software. The team help me out with any questions I have, Ver
2245y happy</p><div class="who">Alexander<small>Verified Review, Trustpilot</small></div></div>
2246<div class="frn-tmarq-card"><div class="frn-stars">★★★★★</div><p class="q">We have been using Flat Rate Now for about a year. The software has allowed us to produce quotes and invoices within a few minutes while onsite with the client. Saving us valuable time in the filed and in the office. Well worth the investment.</p><div class="who">James<small>Verified Review, Trustpilot</small></div></div>
2247<div class="frn-tmarq-card"><div class="frn-stars">★★★★★</div><p class="q">Great system and great bunch of guys for the support too. Always easy to deal with</p><div class="who">Brockman<small>Verified Review, Trustpilot</small></div></div>
2248<div class="frn-tmarq-card"><div class="frn-stars">★★★★★</div><p class="q">Amazing System!!! This is the most amazing quoting system we've ever used for Plumbing and Electrical Service. Marcel from FRN is very helpful and always happy to help. Thank you for making our business better.</p><div class="who">Steve<small>Verified Review, Trustpilot</small></div></div>
2249<!-- set 2 — duplicate (keep in sync with set 1 for a seamless loop) -->
2250<div class="frn-tmarq-card"><div class="frn-stars">★★★★★</div><p class="q">Moving to Flat rate now from our old paper pricing system, was one of the best decision we have made for the team. Ive watched our average dollar sale increase by 150% over the last 3 months while using the program.</p><div class="who">Terry<small>Verified Review, Trustpilot</small></div></div>
2251<div class="frn-tmarq-card"><div class="frn-stars">★★★★★</div><p class="q">Excellent program, makes my life so much easier. Easier to quote, looks professional. Holds the client to account with the signature. Talks with my accountant software. The team help me out with any questions I have, Very happy</p><div class="who">Alexander<small>Verified Review, Trustpilot</small></div></div>
2252<div class="frn-tmarq-card"><div class="frn-stars">★★★★★</div><p class="q">
2252We have been using Flat Rate Now for about a year. The software has allowed us to produce quotes and invoices within a few minutes while onsite with the client. Saving us valuable time in the filed and in the office. Well worth the investment.</p><div class="who">James<small>Verified Review, Trustpilot</small></div></div>
2253<div class="frn-tmarq-card"><div class="frn-stars">★★★★★</div><p class="q">Great system and great bunch of guys for the support too. Always easy to deal with</p><div class="who">Brockman<small>Verified Review, Trustpilot</small></div></div>
2254<div class="frn-tmarq-card"><div class="frn-stars">★★★★★</div><p class="q">Amazing System!!! This is the most amazing quoting system we've ever used for Plumbing and Electrical Service. Marcel from FRN is very helpful and always happy to help. Thank you for making our business better.</p><div class="who">Steve<small>Verified Review, Trustpilot</small></div></div>
2255</div>
2256</div>
2257</section>
2258<!-- ===== FAQ ===== -->
2259<section class="frnpr-faq">
2260<div class="frn-wrap">
2261<div class="frnpr-faq-head"><h2>Pricing questions, answered</h2></div>
2262<div class="frnpr-faq-list" id="frnprFaq">
2263<div class="frnpr-faq-item"><button class="frnpr-faq-q" type="button">Is there a lock-in contract?</button><div class="frnpr-faq-a"><div class="frnpr-faq-a-inner">No lock-in contract. FlatRateNOW is month to month, and you can cancel anytime.</div></div></div>
2264<div class="frnpr-faq-item"><button class="frnpr-faq-q" type="button">How is it priced?</button><div class="frnpr-faq-a"><div class="frnpr-faq-a-inner">
2265<p style="margin:0 0 4px;">Per user, per month, plus GST. The rate steps down in bands as your team grows.</p>
2266<!-- Rows are rewritten from RATES[] on load, so this table can never drift
2267out of step with the calculator. The static rows below are the no-JS
2268fallback and should be kept in sync by hand if RATES changes. -->
2269<div class="frnpr-bandtable" id="frnprBandTable">
2270<div class="frnpr-bandtable-head"><span>Team size</span><span>Per user / month</span></div>
2271<div class="frnpr-bandtable-row"><span class="u">Users 1 to 3</span><span class="p">$108</span></div>
2272<div class="frnpr-bandtable-row"><span class="u">Users 4 to 10</span><span class="p">$96</span></div>
2273<div class="frnpr-bandtable-row"><span class="u">Users 11 and up</span><span class="p">$84</span></div>
2274</div>
2275<p style="margin:0;">Use the calculator above to see the breakdown for your team size. A subscription is only needed for people building quotes, office-only users are complimentary.</p>
2276</div></div></div>
2277<div class="frnpr-faq-item"><button class="frnpr-faq-q" type="button">What's included in the plan?</button><div class="frnpr-faq-a"><div class="frnpr-faq-a-inner">Everything. One plan with every feature: catalogue, quoting, AI review, presentations, deposits, follow-ups and integrations. No paid add-ons.</div></div></div>
2278<div class="frnpr-faq-item"><button class="frnpr-faq-q" type="button">How does the free trial work?</button><div class="frnpr-faq-a"><div class="frnpr-faq-a-inner">The free trial lasts 14 days with full access to the whole platform. At the end of the trial you choose whether to continue.</div></div></div>
2279<div class="frnpr-faq-item"><button class="frnpr-faq-q" type="button">Do the integrations cost extra?</button><div class="frnpr-faq-a"><div class="frnpr-faq-a-inner">No, integrations don't cost extra. Connecting to simPRO, ServiceM8, ServiceTitan, AroFlo, Reece maX and Stripe is included in your plan. Xero can be connected on a paid Xero subscription. Ascora and Fergus integrations are coming soon.</div></div></div>
2280<div class="frnpr-faq-item"><button class="frnpr-faq-q" type="button">Is onboarding required?</button><div class="frnpr-faq-a"><div class="frnpr-faq-a-inner">Onboarding is optional but recommended, so your catalogue, integrations and team are set up properly from day one. Choose the package that fits how fast you want to get going.</div></div></div>
2281<div class="frnpr-faq-item"><button class="frnpr-faq-q" type="button">What support do I get?</button><div class="frnpr-faq-a"><div class="frnpr-faq-a-inner">
2281Phone support runs Monday to Friday, 8am to 5pm Sydney time. Email support is available at <a href="mailto:[email protected]">[email protected]</a> from 7am to 9pm.</div></div></div>
2282</div>
2283</div>
2284</section>
2285<!-- ===== FINAL CTA ===== -->
2286<section class="frn-final">
2287<div class="frn-wrap">
2288<h2>Start winning bigger jobs <em>this week.</em></h2>
2289<p>Free to try. No credit card. Be quoting smarter on your very next site visit.</p>
2290<div class="frn-final-actions"><a href="https://live.flatratenow.net/web/signup" class="frn-btn frn-btn-primary">Start free trial</a></div>
2291<div class="frn-final-trust">
2292<span><span class="frn-tick">✓</span> No credit card required</span>
2293<span><span class="frn-tick">✓</span> Built for AU &amp; NZ trades</span>
2294<span><span class="frn-tick">✓</span> Cancel anytime</span>
2295</div>
2296</div>
2297</section>
2298</div><!-- /.frn-scope -->
2299<script>
2300(function(){
2301/* What's-included accordion */
2302document.querySelectorAll('#frninc .frninc-item').forEach(function(it){
2303it.querySelector('.frninc-q').addEventListener('click',function(){ it.classList.toggle('open'); });
2304});
2305/* FAQ accordion */
2306var items=document.querySelectorAll('#frnprFaq .frnpr-faq-item');
2307items.forEach(function(it){
2308it.querySelector('.frnpr-faq-q').addEventListener('click',function(){
2309var wasOpen=it.classList.contains('open');
2310items.forEach(function(o){o.classList.remove('open');});
2311if(!wasOpen) it.classList.add('open');
2312});
2313});
2314/* Pricing calculator */
2315// ===== [SWAP] TIER RATES — edit each month. All +GST. =====
2316var RATES=[
2317{upTo:3,  price:108},
2318{upTo:10, price:96},
2319{upTo:25, price:84}
2320];
2321// Render the FAQ band table from the same RATES array the calculator uses,
2322// so the two can never disagree.
2323var bandTable=document.getElementById('frnprBandTable');
2324if(bandTable){
2325var rows='<div class="frnpr-bandtable-head"><span>Team size</span><span>Per user / month</span></div>',prevU=0;
2326for(var b=0;b<RATES.length;b++){
2327var from=prevU+1,last=(b===RATES.length-1);
2328var label=last?('Users '+from+' and up'):('Users '+from+' to '+RATES[b].upTo);
2329rows+='<div class="frnpr-bandtable-row"><span class="u">'+label+'</span><span class="p">$'+RATES[b].price+'</span></div>';
2330prevU=RATES[b].upTo;
2331}
2332bandTable.innerHTML=rows;
2333}
2334var range=document.getElementById('frnpc-range');
2335if(!range) return;
2336var elCount=document.getElementById('frnpc-countlabel'),elTotal=document.getElementById('frnpc-total'),
2337elAvg=document.getElementById('frnpc-avg'),elBands=document.getElementById('frnpc-bands'),
2338elToggle=document.getElementById('frnpc-toggle');
2339function fmt(n){return n.toLocaleString('en-AU');}
2340function calc(n){
2341var total=0,prev=0,rows=[];
2342for(var i=0;i<RATES.length;i++){
2343var band=RATES[i];
2344if(n>prev){
2345var billed=Math.min(n,band.upTo)-prev,sub=billed*band.price;
2346total+=sub;
2347rows.push({from:prev+1,to:Math.min(n,band.upTo),qty:billed,price:band.price,sub:sub});
2348prev=band.upTo;
2349} else break;
2350}
2351return {total:total,rows:rows};
2352}
2353var elBasic=document.getElementById('frnpr-pkg-basic');
2354function render(){
2355var n=parseInt(range.value,10),r=calc(n);
2356elCount.textContent=n+(n===1?' user':' users');
2357elTotal.textContent=fmt(r.total);
2358elAvg.textContent=(r.total/n).toFixed(2).replace(/\.00$/,'');
2359var html='';
2360for(var i=0;i<r.rows.length;i++){
2361var row=r.rows[i];
2362var label=row.qty===1?('User '+row.from):('Users '+row.from+'\u2013'+row.to);
2363html+='<div class="frnpc-band-row"><span>'+label+' &times; $'+row.price+'</span><span>$'+fmt(row.sub)+'</span></div>';
2364}
2365elBands.innerHTML=html;
2366// Onboarding: Basic (Fast start) is only available for 1-3 users.
2367// 4+ users must take Complete Onboarding, so hide the Basic tile.
2368if(elBasic){
2369var maxU=parseInt(elBasic.getAttribute('data-max-users'),10)||3;
2370elBasic.style.display = (n>maxU) ? 'none' : '';
2371}
2372}
2373elToggle.addEventListener('click',function(){
2374var open=elBands.classList.toggle('is-open');
2375elToggle.textContent=open?'Hide price breakdown':'Show price breakdown';
2376});
2377range.addEventListener('input',render);
2378render();
2379})();
2380</script>
2380</div>
2381
2382</div><!--end widget-span -->
2383</div><!--end row-->
2384</div><!--end row-wrapper -->
2385
2386</div><!--end widget-span -->
2387</div><!--end row-->
2388</div><!--end row-wrapper -->
2389
2390</div><!--end widget-span -->
2391</div>
2392</div>
2393</div>
2394  </main>
2395
2396  <!-- ===================== GLOBAL FOOTER ===================== -->
2397  <footer class="frnft">
2398    <div class="frnft-main">
2399      <div class="frnft-brand">
2400        <a class="frnft-logo" href="https://www.flatratenow.net?hsLang=en">FlatRateNOW</a>
2401        <p>The on-site quoting tool that helps AU &amp; NZ tradies quote bigger, present better and close on the spot.</p>
2402        <div class="frnft-social">
2403          <a href="https://www.facebook.com/flatratenow" target="_blank" rel="noopener" aria-label="Facebook"><svg viewbox="0 0 24 24"><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z" /></svg></a>
2404          <a href="https://www.linkedin.com/company/flatratenow/" target="_blank" rel="noopener" aria-label="LinkedIn"><svg viewbox="0 0 24 24"><path d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5V8h3v11zM6.5 6.7a1.8 1.8 0 1 1 0-3.5 1.8 1.8 0 0 1 0 3.5zM19 19h-3v-5.6c0-1.4-.5-2.3-1.7-2.3a1.9 1.9 0 0 0-1.7 1.3 2.4 2.4 0 0 0-.1.9V19h-3V8h3v1.3a3 3 0 0 1 2.7-1.5c2 0 3.5 1.3 3.5 4.1V19z" /></svg></a>
2405          <a href="https://www.instagram.com/flatratenow/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewbox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.1.4.3 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.1-1 .3-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.1-.4-.3-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.1 1-.3 2.2-.4 1.3-.1 1.7-.1 4.9-.1zM12 0C8.7 0 8.3 0 7 .1 5.7.1 4.8.3 4.1.6c-.8.3-1.4.7-2.1 1.4C1.3 2.7.9 3.3.6 4.1.3 4.8.1 5.7.1 7 0 8.3 0 8.7 0 12s0 3.7.1 5c0 1.3.2 2.2.5 2.9.3.8.7 1.4 1.4 2.1.7.7 1.3 1.1 2.1 1.4.7.3 1.6.5 2.9.5 1.3.1 1.7.1 5 .1s3.7 0 5-.1c1.3 0 2.2-.2 2.9-.5.8-.3 1.4-.7 2.1-1.4.7-.7 1.1-1.3 1.4-2.1.3-.7.5-1.6.5-2.9.1-1.3.1-1.7.1-5s0-3.7-.1-5c0-1.3-.2-2.2-.5-2.9-.3-.8-.7-1.4-1.4-2.1-.7-.7-1.3-1.1-2.1-1.4-.7-.3-1.6-.5-2.9-.5C15.7 0 15.3 0 12 0zm0 5.8a6.2 6.2 0 1 0 0 12.4 6.2 6.2 0 0 0 0-12.4zm0 10.2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-10.4a1.4 1.4 0 1 1-2.9 0 1.4 1.4 0 0 1 2.9 0z" /></svg></a>
2406        </div>
2407      </div>
2408
2409      <div class="frnft-col">
2410        <h4>Product</h4>
2411        <ul>
2412          <li><a href="https://www.flatratenow.net/pricing">Pricing</a></li>
2413          <li><a href="https://www.flatratenow.net/features/catalogue?hsLang=en">Catalogue</a></li>
2414          <li><a href="https://www.flatratenow.net/features/quotation?hsLang=en">Quotation</a></li>
2415          <li><a href="https://www.flatratenow.net/features/presentation?hsLang=en">Presentation</a></li>
2416          <li><a href="https://www.flatratenow.net/features/ai?hsLang=en">AI</a></li>
2417          <li><a href="https://www.flatratenow.net/integrations?hsLang=en">Integrations</a></li>
2418        </ul>
2419      </div>
2420
2421      <div class="frnft-col">
2422        <h4>Industries</h4>
2423        <ul>
2424          <li><a href="https://www.flatratenow.net/industries/plumbing?hsLang=en">Plumbing</a></li>
2425          <li><a href="https://www.flatratenow.net/industries/electrical?hsLang=en">Electrical</a></li>
2426          <li><a href="https://www.flatratenow.net/partners?hsLang=en">Partners</a></li>
2427        </ul>
2428      </div>
2429
2430      <div class="frnft-col">
2431        <h4>Resources</h4>
2432        <ul>
2433          <li><a href="https://support.flatratenow.net/knowledge?hsLang=en">Knowledge Base</a></li>
2434          <li><a href="https://www.flatratenow.net/flatratenow-calculator?hsLang=en">Labour Rate Calculator</a></li>
2435          <li><a href="https://www.flatratenow.net/contact?hsLang=en">Contact Us</a></li>
2436          <li><a href="https://live.flatratenow.net/">Log In</a></li>
2437        </ul>
2438      </div>
2439    </div>
2440
2441    <div class="frnft-bottom">
2442      <div class="frnft-bottom-inner">
2443        <span class="frnft-copy">© <span id="frnYear">2026</span> FlatRateNOW. All rights reserved.</span>
2444        <div class="frnft-apps">
2445          <a href="https://apps.apple.com/au/app/flatratenow-quoting/id1490951013" target="_blank" rel="noopener">iOS App</a>
2446          <a href="https://play.google.com/store/apps/details?id=com.frn_react_native" target="_blank" rel="noopener">Android App</a>
2447        </div>
2448      </div>
2449    </div>
2450  </footer>
2451
2452  
2452<script src="/hs/hsstatic/jquery-libs/static-1.1/jquery/jquery-1.7.1.js"></script>
vendor: 1 bytes, line 2452
2452
2453<script>hsjQuery = window['jQuery'];</script>
2453
2454<!-- HubSpot performance collection script -->
2455<script defer src="/hs/hsstatic/content-cwv-embed/static-1.1293/embed.js"></script>
vendor: 1 bytes, line 2455
2455
2456<script>
2457var hsVars = hsVars || {}; hsVars['language'] = 'en';
2458</script>
2458
2459
2460<script src="/hs/hsstatic/cos-i18n/static-1.53/bundles/project.js"></script>
2460
2461
2462<!-- Start of HubSpot Analytics Code -->
2463<script type="text/javascript">
2464var _hsq = _hsq || [];
2465_hsq.push(["setContentType", "standard-page"]);
2466_hsq.push(["setCanonicalUrl", "https:\/\/www.flatratenow.net\/pricing"]);
2467_hsq.push(["setPageId", "373429146084"]);
2468_hsq.push(["setContentMetadata", {
2469    "contentPageId": 373429146084,
2470    "legacyPageId": "373429146084",
2471    "contentFolderId": null,
2472    "contentGroupId": null,
2473    "abTestId": null,
2474    "languageVariantId": 373429146084,
2475    "languageCode": "en",
2476    
2477    
2478}]);
2479</script>
2479
2480
2481<script type="text/javascript" id="hs-script-loader" async defer src="/hs/scriptloader/2925544.js"></script>
2481
2482<!-- End of HubSpot Analytics Code -->
2483
2484
2485<script type="text/javascript">
2486var hsVars = {
2487    render_id: "ebca2b81-c5fc-4c23-8099-32d506263f72",
2488    ticks: 1790113477126,
2489    page_id: 373429146084,
2490    
2491    content_group_id: 0,
2492    portal_id: 2925544,
2493    app_hs_base_url: "https://app-ap1.hubspot.com",
2494    cp_hs_base_url: "https://cp-ap1.hubspot.com",
2495    language: "en",
2496    analytics_page_type: "standard-page",
2497    scp_content_type: "",
2498    
2499    analytics_page_id: "373429146084",
2500    category_id: 1,
2501    folder_id: 0,
2502    is_hubspot_user: false
2503}
2504</script>
2504
2505
2506
2507<script defer src="/hs/hsstatic/HubspotToolsMenu/static-1.640/js/index.js"></script>
2507
2508
2509<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 2509-2510
2509
2510<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
2510GTM-NVFNZVC
vendor: 83 bytes, line 2510
2510" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
2511<!-- End Google Tag Manager (noscript) -->
2512
2513
2514
2515  
2515<script>
2516  (function(){
2517    var nav=document.getElementById('frnnav');
2518    var burger=document.getElementById('frnnavBurger');
2519    var items=nav.querySelectorAll('.frnnav-item');
2520    // dropdown toggle (click on mobile, hover handled by CSS on desktop)
2521    items.forEach(function(it){
2522      var btn=it.querySelector('.frnnav-link');
2523      if(btn && btn.tagName==='BUTTON'){
2524        btn.addEventListener('click',function(e){
2525          // on mobile, toggle; on desktop the hover CSS handles it, but click also works
2526          var isOpen=it.classList.contains('open');
2527          items.forEach(function(o){o.classList.remove('open');});
2528          if(!isOpen) it.classList.add('open');
2529          e.stopPropagation();
2530        });
2531      }
2532    });
2533    // A clicked dropdown sets .open, which the CSS honours alongside :hover.
2534    // Without this, moving the mouse to a neighbour left BOTH panels visible
2535    // and overlapping. On a real pointer, hovering any other item clears the
2536    // stuck .open, and leaving the menu clears it entirely. Guarded on
2537    // (hover:hover) so touch devices, where click is the only way in, keep
2538    // working exactly as before.
2539    var canHover = window.matchMedia('(hover:hover) and (pointer:fine)');
2540    items.forEach(function(it){
2541      it.addEventListener('mouseenter',function(){
2542        if(!canHover.matches) return;
2543        items.forEach(function(o){ if(o!==it) o.classList.remove('open'); });
2544      });
2545    });
2546    var menu=document.getElementById('frnnavMenu');
2547    if(menu){
2548      menu.addEventListener('mouseleave',function(){
2549        if(!canHover.matches) return;
2550        items.forEach(function(o){o.classList.remove('open');});
2551      });
2552    }
2553    document.addEventListener('click',function(){ items.forEach(function(o){o.classList.remove('open');}); });
2554    if(burger){ burger.addEventListener('click',function(){ nav.classList.toggle('mobile-open'); }); }
2555    // Footer year set client-side. Using HubL's local_dt here made the template
2556    // unprerenderable (HubSpot cannot resolve "now" at publish time), so the
2557    // markup carries a static fallback and JS keeps it current.
2558    var yr=document.getElementById('frnYear');
2559    if(yr){ yr.textContent=new Date().getFullYear(); }
2560  })();
2561  </script>
2561
2562
2563
2564</body></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.