PageSourceSearch

https://www.seekingagents.com/real-estate-commission-calculator

html seekingagents.com collected 2026-10-05 05:17:08 UTC 78,991 bytes, 1,322 lines download raw bytes

1<!-- src/views/real-estate-commission-calculator.ejs -->
2
3<!DOCTYPE html>
4<html lang="en">
5
6<head>
7  
8  <!-- src/views/partials/partial_head.ejs -->
9
10
11
12<meta charset="UTF-8">
13<title>Real Estate Commission Calculator</title>
14<meta name="description" content="Use this real estate commission calculator to estimate commission costs, compare rates, and see how much you could save before choosing an agent.">
15
16<link rel="canonical" href="https://www.seekingagents.com/real-estate-commission-calculator">
17
18<meta name="viewport" content="width=device-width, initial-scale=1.0">
19<meta name="robots" content="index, follow">
20
21<!-- Geolocation (optional for local SEO) -->
22
23
24
25
26
27
28<!-- Schema.org (Itemprop) -->
29<!-- <meta itemprop="name" content="Real Estate Commission Calculator">
30<meta itemprop="description" content="Use this real estate commission calculator to estimate commission costs, compare rates, and see how much you could save before choosing an agent.">
31<meta itemprop="image" content="https://www.seekingagents.com/images/LogoLargeR.jpeg"> -->
32
33<!-- Open Graph (Facebook) -->
34
35<meta property="og:url" content="https://www.seekingagents.com/real-estate-commission-calculator">
36
37<meta property="og:type" content="website">
38<meta property="og:title" content="Real Estate Commission Calculator">
39<meta property="og:description" content="Use this real estate commission calculator to estimate commission costs, compare rates, and see how much you could save before choosing an agent.">
40<meta property="og:image" content="https://www.seekingagents.com/images/LogoLargeR.jpeg">
41
42
43<!-- Twitter Card -->
44<meta name="twitter:card" content="summary_large_image">
45<meta property="twitter:domain" content="seekingagents.com">
46
47<meta property="twitter:url" content="https://www.seekingagents.com/real-estate-commission-calculator">
48
49<meta name="twitter:title" content="Real Estate Commission Calculator">
50<meta name="twitter:description" content="Use this real estate commission calculator to estimate commission costs, compare rates, and see how much you could save before choosing an agent.">
51<meta name="twitter:image" content="https://www.seekingagents.com/images/LogoLargeR.jpeg">
52<meta name="twitter:site" content="@SeekingAgents">
53
54<script nonce="FkAf0EfEFAm7+QRlfx0bdw==">
55  window.__MESSAGE_MODAL__ = null;
56</script>
56
57
58<!-- Seeking Agents measurement context must precede GTM page-view processing. -->
59<script nonce="FkAf0EfEFAm7+QRlfx0bdw==">
60  window.dataLayer = window.dataLayer || [];
61  window.__SA_MEASUREMENT_CONTEXT__ = {"taxonomy_version":"1.0.0","page_family":"calculator_commission_national","page_type":"national","audience":"seller","journey_stage":"consideration","location_type":""};
62  const saPageContext = {
63    event_version: '1.0.0',
64    taxonomy_version: window.__SA_MEASUREMENT_CONTEXT__.taxonomy_version,
65    page_family: window.__SA_MEASUREMENT_CONTEXT__.page_family,
66    page_type: window.__SA_MEASUREMENT_CONTEXT__.page_type,
67    audience: window.__SA_MEASUREMENT_CONTEXT__.audience,
68    journey_stage: window.__SA_MEASUREMENT_CONTEXT__.journey_stage,
69    location_type: window.__SA_MEASUREMENT_CONTEXT__.location_type || undefined
70  };
71  window.dataLayer.push({ sa_event: null });
72  window.dataLayer.push({
73    event: 'sa_page_context',
74    ...saPageContext,
75    sa_event: saPageContext
76  });
77</script>
77
78<!-- Google Tag Manager -->
79<script nonce="FkAf0EfEFAm7+QRlfx0bdw==">
80  (function(w, d, s, l, i) {
81    w[l] = w[l] || [];
82    w[l].push({
83      'gtm.start': new Date().getTime(),
84      event: 'gtm.js'
85    });
86    var f = d.getElementsByTagName(s)[0],
87      j = d.createElement(s),
88      dl = l != 'dataLayer' ? '&l=' + l : '';
89    j.async = true;
90    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
91    j.setAttribute('nonce', 'FkAf0EfEFAm7+QRlfx0bdw==');
92    f.parentNode.insertBefore(j, f);
93  })(window, document, 'script', 'dataLayer', 'GTM-N7ZDRRLW');
94</script>
94
95<!-- End Google Tag Manager -->
96
97<script type="module" src="/js/measurement/client.mjs" nonce="FkAf0EfEFAm7+QRlfx0bdw=="></script>
97
98
99<!-- Gtag Configuration -->
100<script nonce="FkAf0EfEFAm7+QRlfx0bdw==">
101  window.dataLayer = window.dataLayer || [];
102
103  function gtag() {
104    dataLayer.push(arguments);
105  }
106  gtag('js', new Date());
107
108  // Initialize Google Ads tracking (managed by GTM, kept for fallback)
109  gtag('config', 'AW-16666897289');
110</script>
110
111
112<script nonce="FkAf0EfEFAm7+QRlfx0bdw==" type="application/ld+json">
113  {
114    "@context": "https://schema.org",
115    "@type": "Organization",
116    "@id": "https://www.seekingagents.com/#organization",
117    "name": "Seeking Agents",
118    "url": "https://www.seekingagents.com",
119    "image": "https://www.seekingagents.com/images/LogoLargeR.jpeg",
120    "description": "Find the perfect real estate agent with Seeking Agents®. Home buyers can save money on commissions by choosing the best agent for their needs.",
121    "telephone": "+1-833-733-5248",
122    "sameAs": [
123      "https://twitter.com/SeekingAgents",
124      "https://www.facebook.com/SeekingAgents",
125      "https://www.linkedin.com/company/seeking-agents"
126    ]
127  }
128</script>
128
129
130
131
132<!-- Begin TVSquared Page Visits Tracking Code -->
133<script nonce="FkAf0EfEFAm7+QRlfx0bdw==">
134  var _tvq = window._tvq = window._tvq || [];
135  (function() {
136    var u = (("https:" == document.location.protocol) ?
137      "https://collector-51257.us.tvsquared.com/" :
138      "http://collector-51257.us.tvsquared.com/");
139    _tvq.push(['setSiteId', "TV-4581724527-1"]);
140    _tvq.push(['setTrackerUrl', u + 'tv2track.php']);
141    _tvq.push([function() {
142      this.deleteCustomVariable(5, 'page')
143    }]);
144    _tvq.push(['trackPageView']);
145    var d = document,
146      g = d.createElement('script'),
147      s = d.getElementsByTagName('script')[0];
148    g.defer = true;
149    g.async = true;
150    g.src = u + 'tv2track.js';
151    s.parentNode.insertBefore(g, s);
152  })();
153</script>
153
154<!-- End TVSquared Tracking Code -->
155
156
157
158
159
160
161
162
163
164
165<link rel="preconnect" href="https://fonts.googleapis.com">
166<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
167<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" nonce="FkAf0EfEFAm7+QRlfx0bdw==">
168
169<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.8/purify.min.js" nonce="FkAf0EfEFAm7+QRlfx0bdw==" defer></script>
169
170
171<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> -->
172<link rel="icon" type="image/x-icon" href="/favicon.ico">
173<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
174
175<!-- <link rel="stylesheet" href="/css/plan_modal.css"> -->
176<link rel="stylesheet" href="/css/app.css?v=nav3">
177
178  
178<script type="application/ld+json" nonce="FkAf0EfEFAm7+QRlfx0bdw==">
179    {
180  "@context": "https://schema.org",
181  "@type": "WebPage",
182  "name": "Real Estate Commission Calculator",
183  "url": "https://www.seekingagents.com/real-estate-commission-calculator",
184  "description": "Use this real estate commission calculator to estimate commission costs, compare rates, and see how much you could save before choosing an agent."
185}
186  </script>
186
187
188  
188<script type="application/ld+json" nonce="FkAf0EfEFAm7+QRlfx0bdw==">
189    {
190  "@context": "https://schema.org",
191  "@type": "BreadcrumbList",
192  "itemListElement": [
193    {
194      "@type": "ListItem",
195      "position": 1,
196      "name": "Home",
197      "item": "https://www.seekingagents.com"
198    },
199    {
200      "@type": "ListItem",
201      "position": 2,
202      "name": "Real Estate Commission Calculator",
203      "item": "https://www.seekingagents.com/real-estate-commission-calculator"
204    }
205  ]
206}
207  </script>
207
208</head>
209
210<body data-loggedin="false" class="min-h-screen bg-gradient-to-b from-paleyellow/40 to-white text-darkgreen">
211  <noscript>
212    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7ZDRRLW" height="0" width="0" class="hidden invisible"></iframe>
213  </noscript>
214
215  
216
217
218
219<!-- Tracking pixel fallbacks: valid only in body, not head -->
220<noscript>
221  <img height="1" width="1" class="hidden" alt="Nextdoor tracking pixel" src="https://flask.nextdoor.com/pixel?pid=cb1b1f58-5c26-40e5-9380-062cbec5b4d8&amp;ev=PAGE_VIEW&amp;noscript=1">
222</noscript>
223<noscript>
224  <img height="1" width="1" class="hidden" alt="Facebook Pixel Tracking Image" src="https://www.facebook.com/tr?id=533628082958894&amp;ev=PageView&amp;noscript=1">
225</noscript>
226
227<!-- HEADER / NAV -->
228<header class="sticky top-0 z-40 bg-paleyellow/90 backdrop-blur border-b border-lightgreen shadow-sm">
229  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
230    <div class="flex h-14 sm:h-16 items-center justify-between">
231      <!-- Brand -->
232      <a href="/" data-cta="header_logo_home" data-location="header" class="flex items-center gap-3 shrink-0">
233        <img src="/images/LogoGreenTransparent.svg" alt="SeekingAgents" class="h-14 sm:h-16 w-auto">
234        <span class="sr-only">SeekingAgents</span>
235      </a>
236
237      <!-- Desktop nav -->
238      <nav class="hidden lg:flex items-center gap-4 lg:gap-6 text-sm lg:text-[15px]">
239        
240        <a href="/" data-cta="header_home" data-location="header" class="hover:underline whitespace-nowrap">Home</a>
241
242        <!-- Explore -->
243        <div class="relative" data-dropdown="explore">
244          <button type="button" class="inline-flex items-center gap-1 font-normal text-darkgreen hover:underline whitespace-nowrap" aria-expanded="false" aria-controls="menu-explore" data-dropdown-btn>
245            Explore
246            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
247              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
248            </svg>
249          </button>
250          <div id="menu-explore" data-dropdown-menu class="invisible opacity-0 translate-y-1 transition absolute right-0 mt-2 w-80 rounded-xl bg-paleyellow shadow-card ring-1 ring-lightgreen">
251            <div class="py-2">
252              <div class="px-4 pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-darkgreen/70">Tools</div>
253              <a href="/real-estate-commission-calculator" data-cta="header_explore_commission_calculator" data-location="header" class="block px-4 py-2 hover:underline">Real Estate Commission Calculator</a>
254              <a href="/home-affordability-calculator" data-cta="header_explore_affordability_calculator" data-location="header" class="block px-4 py-2 hover:underline">Home Affordability Calculator</a>
255              <a href="/compare-real-estate-agents" data-cta="header_explore_compare_agents" data-location="header" class="block px-4 py-2 hover:underline">Compare Real Estate Agents</a>
256
257              <div class="mt-2 border-t border-lightgreen/40 px-4 pt-3 pb-1 text-xs font-semibold uppercase tracking-wide text-darkgreen/70">Special Situations</div>
258              <a href="/divorce" data-cta="header_explore_divorce" data-location="header" class="block px-4 py-2 hover:underline">Divorce &amp; Real Estate</a>
259              <a href="/probate" data-cta="header_explore_probate" data-location="header" class="block px-4 py-2 hover:underline">Probate &amp; Real Estate</a>
260
261            </div>
262          </div>
263        </div>
264
265        <!-- Resources (Tips + Guides) -->
266        <div class="relative" data-dropdown="resources">
267          <button type="button" class="inline-flex items-center gap-1 font-normal text-darkgreen hover:underline whitespace-nowrap" aria-expanded="false" aria-controls="menu-resources" data-dropdown-btn>
268            Resources
269            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
270              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
271            </svg>
272          </button>
273          <div id="menu-resources" data-dropdown-menu class="invisible opacity-0 translate-y-1 transition absolute right-0 mt-2 w-56 rounded-xl bg-paleyellow shadow-card ring-1 ring-lightgreen">
274            <div class="py-2">
275              
276              <a href="/tips" data-cta="header_resources_tips" data-location="header" class="block px-4 py-2 ">
277                Buying &amp; Selling Articles
278              </a>
279              
280              <a href="/guides" data-cta="header_resources_guides" data-location="header" class="block px-4 py-2 ">
281                Buying &amp; Selling Guides
282              </a>
283              
284            </div>
285          </div>
286        </div>
287
288        <!-- Pricing -->
289        <div class="relative" data-dropdown="pricing">
290          <button type="button" class="inline-flex items-center gap-1 font-normal text-darkgreen hover:underline whitespace-nowrap" aria-expanded="false" aria-controls="menu-pricing" data-dropdown-btn>
291            Pricing
292            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
293              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
294            </svg>
295          </button>
296          <div id="menu-pricing" data-dropdown-menu class="invisible opacity-0 translate-y-1 transition absolute right-0 mt-2 w-56 rounded-xl bg-paleyellow shadow-card ring-1 ring-lightgreen">
297            <div class="py-2">
298              <a href="#" id="showUserPlan" data-modal-open="userPlan" data-cta="header_pricing_buyers_sellers" data-location="header">Buyers &amp; Sellers</a>
299              <a href="#" id="showAgentPlan" data-modal-open="agentPlan" data-cta="header_pricing_agents" data-location="header" class="hover:underline">Agents</a>
300            </div>
301          </div>
302        </div>
303
304        <!-- Buyers & Sellers -->
305        <div class="relative" data-dropdown="buyers">
306          <button type="button" class="inline-flex items-center gap-1 font-normal text-darkgreen hover:underline whitespace-nowrap" aria-expanded="false" aria-controls="menu-buyers" data-dropdown-btn>
307            Buyers &amp; Sellers
308            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
309              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
310            </svg>
311          </button>
312          <div id="menu-buyers" data-dropdown-menu class="invisible opacity-0 translate-y-1 transition absolute right-0 mt-2 w-56 rounded-xl bg-paleyellow shadow-card ring-1 ring-lightgreen">
313            <div class="py-2">
314              
315              <a href="/login_b" data-cta="header_buyers_login_b" data-location="header" class="block px-4 py-2 ">Login</a>
316              
317              <a href="/user-register" data-cta="header_buyers_user-register" data-location="header" class="block px-4 py-2 ">Register</a>
318              
319            </div>
320          </div>
321        </div>
322
323        <!-- Attorneys -->
324        <div class="relative" data-dropdown="attorneys">
325          <button type="button" class="inline-flex items-center gap-1 font-normal text-darkgreen hover:underline whitespace-nowrap" aria-expanded="false" aria-controls="menu-attorneys" data-dropdown-btn>
326            Attorneys
327            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
328              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
329            </svg>
330          </button>
331          <div id="menu-attorneys" data-dropdown-menu class="invisible opacity-0 translate-y-1 transition absolute right-0 mt-2 w-64 roun
331ded-xl bg-paleyellow shadow-card ring-1 ring-lightgreen">
332            <div class="py-2">
333              <a href="/attorneys" data-cta="header_attorneys_resources" data-location="header" class="block px-4 py-2 hover:underline">Attorney Resources</a>
334              <a href="/attorneys/about-seeking-agents" data-cta="header_attorneys_about" data-location="header" class="block px-4 py-2 hover:underline">About Seeking Agents for Attorneys</a>
335              <a href="/probate-attorneys" data-cta="header_attorneys_probate" data-location="header" class="block px-4 py-2 hover:underline">Probate Attorneys</a>
336              <a href="/divorce-attorneys" data-cta="header_attorneys_divorce" data-location="header" class="block px-4 py-2 hover:underline">Divorce Attorneys</a>
337            </div>
338          </div>
339        </div>
340
341        <!-- Agents -->
342        <div class="relative" data-dropdown="agents">
343          <button type="button" class="inline-flex items-center gap-1 font-normal text-darkgreen hover:underline whitespace-nowrap" aria-expanded="false" aria-controls="menu-agents" data-dropdown-btn>
344            Agents
345            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
346              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
347            </svg>
348          </button>
349          <div id="menu-agents" data-dropdown-menu class="invisible opacity-0 translate-y-1 transition absolute right-0 mt-2 w-56 rounded-xl bg-paleyellow shadow-card ring-1 ring-lightgreen">
350            <div class="py-2">
351              <!-- For Agents (new primary entry point) -->
352              <a href="/agents" data-cta="header_agents_for_agents" data-location="header" class="block px-4 py-2 hover:underline ">For Agents</a>
353
354              
355              <a href="/login_a" data-cta="header_agents_login_a" data-location="header" class="block px-4 py-2 ">Login</a>
356              
357              <a href="/agent-register" data-cta="header_agents_agent-register" data-location="header" class="block px-4 py-2 ">Register</a>
358              
359            </div>
360          </div>
361        </div>
362
363
364        <a href="/faq" data-cta="header_faq" data-location="header" class="hover:underline whitespace-nowrap">FAQ</a>
365        <a href="/about" data-cta="header_about_us" data-location="header" class="hover:underline whitespace-nowrap">About Us</a>
366        
367
368      </nav>
369
370      <!-- Hamburger (mobile) -->
371      <button id="nav-toggle" data-open-nav class="lg:hidden inline-flex items-center gap-2 rounded-xl px-3 py-2 ring-1 ring-lightgreen text-darkgreen bg-paleyellow/70 hover:bg-paleyellow shadow-sm" aria-label="Open menu" aria-expanded="false" aria-controls="mobileNav">
372        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
373          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
374        </svg>
375        <span class="hidden sm:inline text-sm">Menu</span>
376      </button>
377    </div>
378  </div>
379</header>
380
381<!-- MOBILE NAV -->
382<div id="mobileNavScrim" class="fixed inset-0 z-[998] bg-black/50 opacity-0 pointer-events-none motion-safe:transition-opacity motion-safe:duration-500" aria-hidden="true"></div>
383
384<div id="mobileNav" class="fixed inset-0 z-[999] translate-x-full opacity-0 pointer-events-none text-darkgreen bg-paleyellow flex flex-col motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-out" data-mobile-nav aria-hidden="true" inert>
385  <div class="flex items-center justify-between p-5 border-b border-lightgreen/40">
386    <div class="text-lg font-semibold tracking-wide">Menu</div>
387    <button type="button" class="text-darkgreen hover:text-orange transition" aria-label="Close menu" data-close-nav>✕</button>
388  </div>
389
390  <nav class="flex-1 overflow-y-auto p-4 space-y-4">
391    
392    <a href="/" data-cta="mobile_home" data-location="header" class="block text-lg text-darkgreen font-medium hover:text-orange transition">Home</a>
393
394    <div class="border-t border-lightgreen/30 pt-4">
395      <button type="button" class="w-full flex justify-between items-center text-lg text-left font-semibold hover:text-orange" data-accordion-toggle="explore">
396        <span>Explore</span>
397        <svg class="w-7 h-7 transition-transform" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-arrow>
398          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
399        </svg>
400      </button>
401      <div class="mt-2 ml-3 hidden space-y-3 text-base" data-accordion-panel="explore">
402        <div>
403          <div class="text-xs font-semibold uppercase tracking-wide text-darkgreen/70">Tools</div>
404          <div class="mt-2 space-y-2">
405            <a href="/real-estate-commission-calculator" data-cta="mobile_explore_commission_calculator" data-location="header" class="block hover:text-orange text-darkgreen transition">Real Estate Commission Calculator</a>
406            <a href="/home-affordability-calculator" data-cta="mobile_explore_affordability_calculator" data-location="header" class="block hover:text-orange text-darkgreen transition">Home Affordability Calculator</a>
407            <a href="/compare-real-estate-agents" data-cta="mobile_explore_compare_agents" data-location="header" class="block hover:text-orange text-darkgreen transition">Compare Real Estate Agents</a>
408          </div>
409        </div>
410
411        <div class="border-t border-lightgreen/30 pt-3">
412          <div class="text-xs font-semibold uppercase tracking-wide text-darkgreen/70">Special Situations</div>
413          <div class="mt-2 space-y-2">
414            <a href="/divorce" data-cta="mobile_explore_divorce" data-location="header" class="block hover:text-orange text-darkgreen transition">Divorce &amp; Real Estate</a>
415            <a href="/probate" data-cta="mobile_explore_probate" data-location="header" class="block hover:text-orange text-darkgreen transition">Probate &amp; Real Estate</a>
416          </div>
417        </div>
418
419      </div>
420    </div>
421
422    <!-- Resources (mobile accordion: Tips + Guides) -->
423    <div class="border-t border-lightgreen/30 pt-4">
424      <button type="button" class="w-full flex justify-between items-center text-lg text-left font-semibold hover:text-orange" data-accordion-toggle="resources">
425        <span>Resources</span>
426        <svg class="w-7 h-7 transition-transform" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-arrow>
427          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
428        </svg>
429      </button>
430      <div class="mt-2 ml-3 hidden space-y-2 text-base" data-accordion-panel="resources">
431        
432        <a href="/tips" data-cta="mobile_resources_tips" data-location="header" class="block hover:text-orange text-darkgreen transition ">
433          Buying &amp; Selling Articles
434        </a>
435        
436        <a href="/guides" data-cta="mobile_resources_guides" data-location="header" class="block hover:text-orange text-darkgreen transition ">
437          Buying &amp; Selling Guides
438        </a>
439        
440      </div>
441    </div>
442
443    <div class="border-t border-lightgreen/30 pt-4">
444      <button type="button" class="w-full flex justify-between items-center text-lg text-left font-semibold hover:text-orange" data-accordion-toggle="pricing">
445        <span>Pricing</span>
446        <svg class="w-7 h-7 transition-transform" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-arrow>
447          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
448        </svg>
449      </button>
450      <div class="mt-2 ml-3 hidden space-y-2 text-base" data-accordion-panel="pricing">
451        <a href="#" class="block hover:text-orange text-darkgreen transition" data-modal-open="userPlan" data-cta="mobile_pricing_buyers_sellers" data-location="header">Buyers &amp; Sellers</a>
452        <a href="#" class="block hover:text-orange text-darkgreen transition" data-modal-open="agentPlan" data-cta="mobile_pricing_agents" data-location="header">Agents</a>
453      </div>
454    </div>
455
456    <div class="border-t border-lightgreen/30 pt-4">
457      <button type="button" class="w-full flex justify-between items-center text-lg text-left font-semibold hover:text-orange" data-accordion-toggle="buyers">
458        <span>Buyers &amp; Sellers</span>
459        <svg class="w-7 h-7 transition-transform" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-arrow>
460          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
461        </svg>
462      </button>
463      <div class="mt-2 ml-3 hidden space-y-2 text-base" data-accordion-panel="buyers">
464        
465        <a href="/login_b" data-cta="mobile_buyers_login_b" data-location="header" class="block hover:text-orange text-darkgreen transition ">Login</a>
466        
467        <a href="/user-register" data-cta="mobile_buyers_user-register" data-location="header" class="block hover:text-orange text-darkgreen transition ">Register</a>
468        
469      </div>
470    </div>
471
472    <div class="border-t border-lightgreen/30 pt-4">
473      <button type="button" class="w-full flex justify-between items-center text-lg text-left font-semibold hover:text-orange" data-accordion-toggle="attorneys">
474        <span>Attorneys</span>
475        <svg class="w-7 h-7 transition-transform" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-arrow>
476          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
477        </svg>
478      </button>
479      <div class="mt-2 ml-3 hidden space-y-2 text-base" data-accordion-panel="attorneys">
480        <a href="/attorneys" data-cta="mobile_attorneys_resources" data-location="header" class="block hover:text-orange text-darkgreen transition">Attorney Resources</a>
481        <a href="/attorneys/about-seeking-agents" data-cta="mobile_attorneys_about" data-location="header" class="block hover:text-orange text-darkgreen transition">About Seeking Agents for Attorneys</a>
482        <a href="/probate-attorneys" data-cta="mobile_attorneys_probate" data-location="header" class="block hover:text-orange text-darkgreen transition">Probate Attorneys</a>
483        <a href="/divorce-attorneys" data-cta="mobile_attorneys_divorce" data-location="header" class="block hover:text-orange text-darkgreen transition">Divorce Attorneys</a>
484      </div>
485    </div>
486
487    <div class="border-t border-lightgreen/30 pt-4">
488      <button type="button" class="w-full flex justify-between items-center text-lg text-left font-semibold hover:text-orange" data-accordion-toggle="agents">
489        <span>Agents</span>
490        <svg class="w-7 h-7 transition-transform" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-arrow>
491          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" />
492        </svg>
493      </button>
494      <div class="mt-2 ml-3 hidden space-y-2 text-base" data-accordion-panel="agents">
495        <!-- For Agents (new primary entry point) -->
496        <a href="/agents" data-cta="mobile_agents_for_agents" data-location="header" class="block hover:text-orange text-darkgreen transition ">For Agents</a>
497
498        
499        <a href="/login_a" data-cta="mobile_agents_login_a" data-location="header" class="block hover:text-orange text-darkgreen transition ">Login</a>
500        
501        <a href="/agent-register" data-cta="mobile_agents_agent-register" data-location="header" class="block hover:text-orange text-darkgreen transition ">Register</a>
502        
503      </div>
504    </div>
505
506
507    <a href="/faq" data-cta="mobile_faq" data-location="header" class="block font-semibold hover:text-orange text-lg text-darkgreen transition border-t border-lightgreen/30 pt-4">FAQ</a>
508    <a href="/about" data-cta="mobile_about_us" data-location="header" class="block font-semibold hover:text-orange text-lg text-darkgreen transition">About Us</a>
509    
510
511  </nav>
512</div>
513
514
515
516  <!-- HERO -->
517  <section class="relative overflow-hidden">
518    <div class="pointer-events-none absolute inset-0 opacity-15 bg-[url('/images/seller_info_image.jpg')] bg-cover bg-center"></div>
519
520    <div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 pt-6 pb-8 sm:pt-8 sm:pb-12 text-center">
521      <nav aria-label="Breadcrumb" class="text-sm text-darkgreen/70 text-left mb-6">
522        <a href="/" class="hover:text-orange">Home</a>
523        <span class="mx-2">/</span>
524        <span class="font-semibold text-darkgreen">Real Estate Commission Calculator</span>
525      </nav>
526      <span class="inline-flex items-center gap-2 rounded-full bg-lightgreen/20 text-darkgreen px-2.5 py-0.5 text-[11px] font-semibold ring-1 ring-lightgreen">
527        Free Real Estate Tool
528      </span>
529
530      <h1 class="mt-3 text-4xl sm:text-5xl font-bold">
531        Real Estate Commission Calculator
532      </h1>
533
534      <p class="mt-3 text-[15px] sm:text-[16px] text-darkgreen/80 max-w-3xl mx-auto">
535        Estimate real estate commission costs, compare different rates, and see how much you could save before hiring an agent or signing a listing agreement.
536      </p>
537      <div class="mt-4 flex flex-wrap justify-center gap-3">
538        <a href="/real-estate-commission-calculator-by-state" class="inline-flex items-center gap-2 rounded-full bg-lightgreen/20 text-darkgreen px-3 py-1 text-sm font-semibold ring-1 ring-lightgreen hover:bg-lightgreen/30 transition">
539          <span>Real Estate Commission by State</span>
540        </a>
541        <a href="/guides" class="inline-flex items-center gap-2 rounded-full bg-lightgreen/20 text-darkgreen px-3 py-1 text-sm font-semibold ring-1 ring-lightgreen hover:bg-lightgreen/30 transition">
542          <span>Buying &amp; Selling Guides</span>
543        </a>
544      </div>
545
546      <div class="mt-8 text-center">
547
548        <div class="text-sm text-darkgreen/70 mb-2">
549          Quick examples
550        </div>
551
552        <div class="flex flex-wrap justify-center gap-2">
553
554          <button class="exampleBtn px-3 py-1 rounded-lg bg-paleyellow ring-1 ring-lightgreen text-sm hover:bg-lightgreen/30" data-price="400000">
555            $400k home
556          </button>
557
558          <button class="exampleBtn px-3 py-1 rounded-lg bg-paleyellow ring-1 ring-lightgreen text-sm hover:bg-lightgreen/30" data-price="500000">
559            $500k home
560          </button>
561
562          <button class="exampleBtn px-3 py-1 rounded-lg bg-paleyellow ring-1 ring-lightgreen text-sm hover:bg-lightgreen/30" data-price="700000">
563            $700k home
564          </button>
565
566          <button class="exampleBtn px-3 py-1 rounded-lg bg-paleyellow ring-1 ring-lightgreen text-sm hover:bg-lightgreen/30" data-price="1000000">
567            $1M home
568          </button>
569
570        </div>
571
572      </div>
573      <!-- Calculator -->
574      <div class="mt-8 max-w-2xl mx-auto rounded-2xl bg-white/90 backdrop-blur p-5 ring-1 ring-lightgreen shadow-card text-left">
575        <div class="text-base font-semibold text-darkgreen mb-4">
576          💰 Estimate Your Commission Savings
577        </div>
578
579        <div class="grid sm:grid-cols-3 gap-4">
580          <div>
581            <label for="homeValue" class="block text-[13px] text-darkgreen/80">Home value</label>
582            <input id="homeValue" type="number" value="500000" class="mt-1 w-full rounded-lg border border-lightgreen px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-mediumgreen">
583          </div>
584
585          <div>
586            <label for="standardRate" class="block text-[13px] text-darkgreen/80">Typical commission %</label>
587            <input id="standardRate" type="number" step="0.1" value="3" class="mt-1 w-full rounded-lg border border-lightgreen px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-mediumgreen">
588          </div>
589
590          <div>
591            <label for="lowerRate" class="block text-[13px] text-darkgreen/80">Lower commission %</label>
592            <input id="lowerRate" type="number" step="0.1" value="2" class="mt-1 w-full rounded-lg border border-lightgreen px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-mediumgreen">
593          </div>
594        </div>
595
596        <div class="mt-5 space-y-2">
597          <div class="text-[14px] text-darkgreen/80 flex justify-between">
598            <span>Estimated commission at <span id="standardRateLabel">3%</span></span>
599            <span id="standardCommission">$15,000</span>
600          </div>
601
602          <div class="text-[14px] text-darkgreen/80 flex justify-between">
603            <span>Estimated commission at <span id="lowerRateLabel">2%</span></span>
604            <span id="lowerCommission">$10,000</span>
605          </div>
606
607          <div class="pt-2 border-t border-lightgreen/60 flex justify-between text-[15px] font-semibold text-mediumgreen">
608            <span>Potential savings</span>
609            <span id="savings">$5,000</span>
610          </div>
611        </div>
612
613        <div class="mt-4 text-sm text-darkgreen/80 bg-paleyellow/30 p-3 rounded-lg">
614          Example: Realtor commission on a
615          <span id="exampleHomeValue">$500,000</span> home at
616          <span id="exampleRate">3%</span> is approximately
617          <strong id="exampleCommission">$15,000</strong>.
618        </div>
619
620        <div class="mt-5 text-xs text-darkgreen/70">
621          Estimates are for informational purposes only. Actual commission rates, services, and savings vary by agent and market.
622        </div>
623      </div>
624
625      <div class="mt-6 flex flex-col sm:flex-row items-center justify-center gap-3">
626        <a href="/user-register" data-cta="calculator_compare_agents" data-location="calculator_hero" class="w-full sm:w-auto rounded-xl bg-mediumgreen text-paleyellow px-6 py-3 font-semibold shadow hover:bg-darkgreen focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mediumgreen">
627          Compare Agents & Save
628        </a>
629        <a href="/compare-real-estate-agents" data-cta="calculator_browse_city_pages" data-location="calculator_hero" class="w-full sm:w-auto rounded-xl px-6 py-3 ring-1 ring-lightgreen bg-paleyellow/40 hover:bg-paleyellow/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mediumgreen">
630          Compare Agents by City
631        </a>
632      </div>
633    </div>
634  </section>
635
636  <!-- OVERVIEW / WHY THIS CALCULATOR HELPS -->
637  <section class="py-10 bg-white">
638    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
639      <div class="rounded-2xl bg-white p-6 sm:p-8 ring-1 ring-lightgreen shadow-card">
640        <h2 class="text-2xl sm:text-3xl font-bold text-darkgreen text-center">Why Use a Real Estate Commission Calculator Before Choosing an Agent?</h2>
641        <p class="mt-4 text-darkgreen/80 max-w-3xl mx-auto text-center">
642          Many home sellers focus on list price and timing but do not fully understand how commission can affect what they keep after the sale. Even a small difference in commission percentage can add up quickly, especially on higher-priced homes.
643        </p>
644        <p class="mt-4 text-darkgreen/80 max-w-3xl mx-auto text-center">
645          This calculator helps you estimate real estate agent commission costs, compare common commission scenarios, and think more clearly about the tradeoff between cost and service before you move forward. You can also explore our <a href="/real-estate-commission-calculator-by-state" class="underline hover:text-orange" data-cta="commission_overview_states" data-location="overview_copy">real estate commission by state pages</a>, browse <a href="/compare-real-estate-agents" class="underline hover:text-orange" data-cta="commission_overview_compare_agents" data-location="overview_copy">agent comparison pages</a>, and review our <a href="/guides" class="underline hover:text-orange" data-cta="commission_overview_guides" data-location="overview_copy">buying and selling guides</a> for more context.
646        </p>
647        <div class="mt-6 grid gap-4 md:grid-cols-3">
648          <div class="rounded-2xl bg-paleyellow/20 p-5 ring-1 ring-lightgreen">
649            <h3 class="text-lg font-semibold text-darkgreen">Estimate Costs Quickly</h3>
650            <p class="mt-2 text-sm text-darkgreen/80">
651              See how different commission percentages change your estimated cost before you talk to agents.
652            </p>
653          </div>
654          <div class="rounded-2xl bg-paleyellow/20 p-5 ring-1 ring-lightgreen">
655            <h3 class="text-lg font-semibold text-darkgreen">Understand Potential Savings</h3>
656            <p class="mt-2 text-sm text-darkgreen/80">
657              A lower commission rate can sometimes mean thousands of dollars in additional equity kept after closing.
658            </p>
659          </div>
660          <div class="rounded-2xl bg-paleyellow/20 p-5 ring-1 ring-lightgreen">
661            <h3 class="text-lg font-semibold text-darkgreen">Compare Before You Commit</h3>
662            <p class="mt-2 text-sm text-darkgreen/80">
663              Use this as a starting point, then compare more than one agent so you can evaluate both service and cost.
664            </p>
665          </div>
666        </div>
667      </div>
668    </div>
669  </section>
670
671  <!-- EDUCATIONAL CONTENT -->
672  <section class="py-10 bg-white">
673    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
674      <div class="grid md:grid-cols-2 gap-6">
675        <div class="rounded-2xl bg-white p-6 ring-1 ring-lightgreen shadow-card">
676          <h2 class="text-2xl font-bold">How much do real estate agents charge?</h2>
677          <p class="mt-3 text-[14px] text-darkgreen/80">
678            Real estate commission rates vary by market, property, service level, and negotiation. Many buyers and sellers are surprised to learn that commission is not fixed and can differ from one agent to another. You can also explore <a href="/real-estate-commission-calculator-by-state" class="underline hover:text-orange">real estate commission by state pages</a> to see more localized examples and compare different markets.
679          </p>
680        </div>
681
682        <div class="rounded-2xl bg-white p-6 ring-1 ring-lightgreen shadow-card">
683          <h2 class="text-2xl font-bold">Can you negotiate realtor commission?</h2>
684          <p class="mt-3 text-[14px] text-darkgreen/80">
685            Yes. Real estate commissions are negotiable. That is 
685why comparing multiple agents can help you understand your options, evaluate differences in service, and potentially keep more of your equity. You can browse our <a href="/compare-real-estate-agents" class="underline hover:text-orange">agent comparison pages</a> to review local options before choosing representation.
686          </p>
687        </div>
688      </div>
689
690      <div class="mt-6 rounded-2xl bg-white p-6 ring-1 ring-lightgreen shadow-card">
691        <h2 class="text-2xl font-bold">What Else Affects the Cost of Selling a Home?</h2>
692        <p class="mt-3 text-[14px] text-darkgreen/80">
693          Commission is only one part of the equation. Closing costs, repairs, concessions, staging, and timing can also affect what you keep after the sale. That is why many sellers use a commission calculator first, then compare agents, local market conditions, and likely out-of-pocket costs before making a final decision.
694        </p>
695        <p class="mt-3 text-[14px] text-darkgreen/80">
696          If you are also trying to understand budget or next steps, you can review our <a href="/home-affordability-calculator" class="underline hover:text-orange">home affordability calculator</a> and browse <a href="/guides" class="underline hover:text-orange">real estate guides</a> for more context.
697        </p>
698      </div>
699
700      <div class="mt-6 rounded-2xl bg-paleyellow/30 p-6 ring-1 ring-lightgreen shadow-card">
701        <h2 class="text-2xl font-bold">Why a 1% difference matters</h2>
702        <p class="mt-3 text-[14px] text-darkgreen/80">
703          On higher-priced homes, even a 1% difference in commission can mean thousands of dollars. This calculator gives you a quick estimate so you can see the impact before choosing an agent, comparing offers, or deciding what level of service makes sense for your situation.
704        </p>
705
706        <div class="mt-5 grid sm:grid-cols-3 gap-4 text-center">
707          <div class="rounded-xl bg-white p-4 ring-1 ring-lightgreen">
708            <div class="text-lg font-semibold">$400,000 home</div>
709            <div class="mt-1 text-sm text-darkgreen/80">1% difference = $4,000</div>
710          </div>
711          <div class="rounded-xl bg-white p-4 ring-1 ring-lightgreen">
712            <div class="text-lg font-semibold">$600,000 home</div>
713            <div class="mt-1 text-sm text-darkgreen/80">1% difference = $6,000</div>
714          </div>
715          <div class="rounded-xl bg-white p-4 ring-1 ring-lightgreen">
716            <div class="text-lg font-semibold">$1,000,000 home</div>
717            <div class="mt-1 text-sm text-darkgreen/80">1% difference = $10,000</div>
718          </div>
719        </div>
720      </div>
721
722      <div class="mt-6 rounded-2xl bg-white p-6 ring-1 ring-lightgreen shadow-card">
723        <h2 class="text-2xl font-bold">Compare cost and service, not just price</h2>
724        <p class="mt-3 text-[14px] text-darkgreen/80">
725          Lower commission is only part of the picture. The best choice is an agent who offers the right mix of service, experience, communication, and value for your situation. You can also <a href="/home-affordability-calculator" class="underline hover:text-orange">see what you can afford</a>, browse <a href="/compare-real-estate-agents" class="underline hover:text-orange">local comparison pages</a>, and review <a href="/guides" class="underline hover:text-orange">helpful guides</a> before comparing agents.
726        </p>
727        <div class="mt-4 flex flex-wrap gap-3 text-[13px]">
728          <a href="/divorce" class="inline-flex items-center rounded-full bg-paleyellow/20 px-3 py-1 ring-1 ring-lightgreen hover:bg-paleyellow/40 transition">
729            Divorce &amp; Real Estate
730          </a>
731          <a href="/probate" class="inline-flex items-center rounded-full bg-paleyellow/20 px-3 py-1 ring-1 ring-lightgreen hover:bg-paleyellow/40 transition">
732            Probate &amp; Real Estate
733          </a>
734          <a href="/guides/first-time-buyers-guide/understanding-commissions" class="inline-flex items-center rounded-full bg-paleyellow/20 px-3 py-1 ring-1 ring-lightgreen hover:bg-paleyellow/40 transition">
735            Understanding Commissions Guide
736          </a>
737        </div>
738
739        <div class="mt-5 flex flex-wrap gap-3">
740          <a href="/user-register" class="rounded-xl bg-mediumgreen text-paleyellow px-5 py-2 font-semibold hover:bg-darkgreen">
741            Compare Agents Free
742          </a>
743          <a href="/guides/first-time-buyers-guide/understanding-commissions" class="rounded-xl px-5 py-2 ring-1 ring-lightgreen hover:bg-paleyellow/60">
744            Learn More About Commissions
745          </a>
746        </div>
747      </div>
748    </div>
749  </section>
750
751  <!-- FAQ -->
752  <section class="py-8 bg-gradient-to-b from-white to-paleyellow/20">
753    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
754      <h2 class="text-3xl font-bold text-center">Frequently Asked Questions</h2>
755
756      <div class="rounded-2xl bg-white p-5 ring-1 ring-lightgreen shadow-card">
757        <h3 class="text-lg font-semibold">
758          Who pays the real estate commission?
759        </h3>
760        <p class="mt-2 text-sm text-darkgreen/80">
761          In most home sales, the seller pays the real estate commission, which is typically split between the listing agent and the buyer's agent. However, commission structures can vary depending on the agreement and local market practices. For a broader overview, see our <a href="/guides/first-time-buyers-guide/understanding-commissions" class="underline hover:text-orange">
761commissions guide</a>.
762        </p>
763      </div>
764
765      <div class="mt-8 space-y-4">
766        <div class="rounded-2xl bg-white p-5 ring-1 ring-lightgreen shadow-card">
767          <h3 class="text-lg font-semibold">Is this calculator accurate?</h3>
768          <p class="mt-2 text-sm text-darkgreen/80">
769            It is a simple estimate based on the numbers you enter. Your actual commission and savings can vary depending on the agent, the market, and the services included.
770          </p>
771        </div>
772
773        <div class="rounded-2xl bg-white p-5 ring-1 ring-lightgreen shadow-card">
774          <h3 class="text-lg font-semibold">Do all agents charge the same commission?</h3>
775          <p class="mt-2 text-sm text-darkgreen/80">
776            No. Commission rates and service packages can vary, which is why comparing multiple agents can be valuable. You can browse <a href="/compare-real-estate-agents" class="underline hover:text-orange">agent comparison pages</a> to see how local options may differ.
777          </p>
778        </div>
779
780        <div class="rounded-2xl bg-white p-5 ring-1 ring-lightgreen shadow-card">
781          <h3 class="text-lg font-semibold">Should I compare more than one real estate agent before deciding?</h3>
782          <p class="mt-2 text-sm text-darkgreen/80">
783            In many cases, yes. Comparing more than one agent can help you understand differences in commission, service, communication style, and local experience before you commit.
784          </p>
785        </div>
786
787        <div class="rounded-2xl bg-white p-5 ring-1 ring-lightgreen shadow-card">
788          <h3 class="text-lg font-semibold">What should I do after using this calculator?</h3>
789          <p class="mt-2 text-sm text-darkgreen/80">
790            Use it as a starting point, then compare licensed agents so you can evaluate both cost and service before making a decision. If you want more local context, you can also view <a href="/real-estate-commission-calculator-by-state" class="underline hover:text-orange">real estate commission by state</a>, browse <a href="/compare-real-estate-agents" class="underline hover:text-orange">agent comparison pages</a>
790, or review our <a href="/guides/first-time-buyers-guide/understanding-commissions" class="underline hover:text-orange">commissions guide</a>.
791          </p>
792        </div>
793      </div>
794    </div>
795  </section>
796
797  <!-- FINAL CTA -->
798  <section class="py-16 bg-gradient-to-r from-lightgreen/20 to-paleyellow/30 text-center">
799    <h2 class="text-3xl font-bold">Ready to Compare Agents?</h2>
800    <p class="mt-2 text-darkgreen/80 max-w-2xl mx-auto text-[14px]">
801      See your options, compare value, and use commission estimates as one more tool to help protect your equity.
802    </p>
803    <div class="mt-6 flex flex-col sm:flex-row items-center justify-center gap-3">
804      <a href="/user-register" data-cta="calculator_final_cta" data-location="calculator_final_cta" class="rounded-xl bg-mediumgreen text-paleyellow px-6 py-3 font-semibold hover:bg-darkgreen shadow">
805        Compare Agents Now
806      </a>
807      <a href="/real-estate-commission-calculator-by-state" data-cta="calculator_final_cta_states" data-location="calculator_final_cta" class="rounded-xl px-6 py-3 ring-1 ring-lightgreen bg-paleyellow/40 hover:bg-paleyellow/80 font-semibold">
808        View Real Estate Commission by State
809      </a>
810    </div>
811  </section>
812
813  <!-- Footer Partial -->
814<footer class="bg-darkgreen text-paleyellow mt-16">
815  <!-- Main footer -->
816  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10">
817    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
818
819      <!-- Brand / blurb -->
820      <div>
821        <a href="/" data-cta="footer_logo_home" data-location="footer" class="inline-flex items-center gap-3">
822          <img src="/images/LogoYellowGreenTrans.svg" alt="Seeking Agents®" class="h-10 w-auto">
823          <span class="sr-only">Seeking Agents®</span>
824        </a>
825        <p class="mt-4 text-sm/6 text-paleyellow/80">
826          Agents compete. You save. Phoenix-based, serving buyers and sellers nationwide.
827          We are not a brokerage.
828        </p>
829
830        <!-- Social -->
831        <div class="mt-5 flex items-center gap-4" id="socials" role="navigation" aria-label="Social media">
832          <!-- Facebook -->
833          <a href="https://www.facebook.com/profile.php?id=61565826067404" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="text-paleyellow hover:text-orange transition">
834            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
835              <path d="M22 12a10 10 0 1 0-11.5 9.9v-7h-2v-2.9h2V9.8c0-2 1.2-3.1 3-3.1.9 0 1.8.1 1.8.1v2h-1c-1 0-1.3.6-1.3 1.2v1.8h2.6l-.4 2.9h-2.2v7A10 10 0 0 0 22 12z" />
836            </svg>
837          </a>
838
839          <!-- Instagram -->
840          <a href="https://www.instagram.com/seekingagents/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="text-paleyellow hover:text-orange transition">
841            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
842              <path d="M7 2C4.2 2 2 4.2 2 7v10c0 2.8 2.2 5 5 5h10c2.8 0 5-2.2 5-5V7c0-2.8-2.2-5-5-5H7zm10 2a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10zm-5 3.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 7a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm4.8-7.9a1.05 1.05 0 1 0 0 2.1 1.05 1.05 0 0 0 0-2.1z" />
843            </svg>
844          </a>
845
846          <!-- X (Twitter) -->
847          <a href="https://x.com/SeekingAgents" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)" class="text-paleyellow hover:text-orange transition">
848            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
849              <path d="M18.2 2H21l-6.5 7.4L22 22h-6.9l-4.7-6-5.2 6H2l6.9-7.9L2 2h7l4.2 5.4L18.2 2z" />
850            </svg>
851          </a>
852
853          <!-- LinkedIn -->
854          <a href="https://www.linkedin.com/company/seeking-agents" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="text-paleyellow hover:text-orange transition">
855            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
856              <path d="M4.98 3.5a2.48 2.48 0 1 0 0 4.96 2.48 2.48 0 0 0 0-4.96zM3 8.98h3.96V21H3V8.98zM9.5 8.98H13v1.64h.05c.49-.92 1.69-1.9 3.48-1.9 3.72 0 4.41 2.45 4.41 5.64V21H17V15.2c0-1.38-.03-3.15-1.92-3.15-1.93 0-2.23 1.5-2.23 3.05V21H9.5V8.98z" />
857            </svg>
858          </a>
859        </div>
860      </div>
861
862      <!-- Explore -->
863      <nav aria-label="Explore" class="space-y-3">
864        <h3 class="text-sm font-semibold tracking-wide text-paleyellow/70">Explore</h3>
865        <ul class="space-y-2 text-sm">
866          <li><a class="hover:text-orange text-paleyellow transition" href="/" data-cta="footer_explore_home" data-location="footer">Home</a></li>
867          <li><a class="hover:text-orange text-paleyellow transition" href="/media" data-cta="footer_explore_media" data-location="footer">In the Media</a></li>
868          <li><a class="hover:text-orange text-paleyellow transition" href="/tips" data-cta="footer_explore_tips" data-location="footer">Home Buying &amp; Selling Articles</a></li>
869          <li><a class="hover:text-orange text-paleyellow transition" href="/guides" data-cta="footer_explore_guides" data-location="footer">Home Buying &amp; Selling Guides</a></li>
870          <li><a class="hover:text-orange text-paleyellow transition" href="/real-estate-commission-calculator" data-cta="footer_explore_commission_calculator" data-location="footer">Real Estate Commission Calculator</a></li>
871          <li><a class="hover:text-orange text-paleyellow transition" href="/home-affordability-calculator" data-cta="footer_explore_affordability_calculator" data-location="footer">Home Affordability Calculator</a></li>
872          <li><a class="hover:text-orange text-paleyellow transition" href="/compare-real-estate-agents" data-cta="footer_explore_compare_agents" data-location="footer">Compare Real Estate Agents</a></li>
873          <li><a class="hover:text-orange text-paleyellow transition" href="/divorce" data-cta="footer_explore_divorce" data-location="footer">Divorce &amp; Real Estate</a></li>
874          <li><a class="hover:text-orange text-paleyellow transition" href="/probate" data-cta="footer_explore_probate" data-location="footer">Probate &amp; Real Estate</a></li>
875          <li><a class="hover:text-orange text-paleyellow transition" href="/attorneys" data-cta="footer_explore_attorneys" data-location="footer">Attorneys</a></li>
876          <li><a class="hover:text-orange text-paleyellow transition" href="/faq" data-cta="footer_explore_faq" data-location="footer">FAQ</a></li>
877          <li><a href="/about" data-cta="footer_explore_about_us" data-location="footer" class="hover:text-orange text-paleyellow transition">About Seeking Agents</a></li>
878          <li><a href="/attorneys/about-seeking-agents" data-cta="footer_explore_attorney_about" data-location="footer" class="hover:text-orange text-paleyellow transition">About Seeking Agents for Attorneys</a></li>
879        </ul>
880      </nav>
881
882      <!-- Pricing & Accounts -->
883      <nav aria-label="Pricing & Accounts" class="space-y-3">
884        <h3 class="text-sm font-semibold tracking-wide text-paleyellow/70">Pricing &amp; Accounts</h3>
885        <ul class="space-y-2 text-sm">
886          <li><button type="button" class="hover:text-orange text-paleyellow transition text-left" data-modal-open="userPlan" data-cta="footer_pricing_buyers_sellers" data-location="footer">Pricing: Buyers &amp; Sellers</button></li>
887          <li><button type="button" class="hover:text-orange text-paleyellow transition text-left" data-modal-open="agentPlan" data-cta="footer_pricing_agents" data-location="footer">Pricing: Agents</button></li>
888          <li><a class="hover:text-orange text-paleyellow transition" href="/login_b" data-cta="footer_login_buyer" data-location="footer">User Login</a></li>
889          <li><a class="hover:text-orange text-paleyellow transition" href="/login_a" data-cta="footer_login_agent" data-location="footer">Agent Login</a></li>
890        </ul>
891      </nav>
892
893      <!-- Contact -->
894      <div class="space-y-3">
895        <h3 class="text-sm font-semibold tracking-wide text-paleyellow/70">Get in touch</h3>
896        <ul class="space-y-2 text-sm">
897          <li>
898            <a href="mailto:[email protected]" data-cta="footer_contact_email" data-location="footer" class="hover:text-orange text-paleyellow transition">
899              [email protected]
900            </a>
901          </li>
902          <li>
903            <a href="tel:+18337335248" data-cta="footer_contact_phone" data-location="footer" class="hover:text-orange text-paleyellow transition">
904              +1-833-SEEK-AGT (733-5248)
905            </a>
906          </li>
907          <li>
908            <a href="/contact" data-cta="footer_contact_page" data-location="footer" class="hover:text-orange text-paleyellow transition">
909              Contact Page
910            </a>
911          </li>
912          <li><a href="/privacy" data-cta="footer_privacy_policy" data-location="footer" class="hover:text-orange text-paleyellow transition">Privacy Policy</a></li>
913          <li><a href="/terms" data-cta="footer_user_terms" data-location="footer" class="hover:text-orange text-paleyellow transition">User Terms</a></li>
914          <li><a href="/agent-terms" data-cta="footer_agent_terms" data-location="footer" class="hover:text-orange text-paleyellow transition">Agent Terms</a></li>
915        </ul>
916
917        <button type="button" id="backToTop" data-cta="footer_back_to_top" data-location="footer" class="mt-4 inline-flex items-center gap-2 rounded-lg bg-paleyellow/10 px-3 py-2 text-sm hover:bg-paleyellow/15 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-lightgreen">
918          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
919            <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5.5a.75.75 0 0 1 .53.22l5 5a.75.75 0 1 1-1.06 1.06L10 7.31l
919-4.47 4.47A.75.75 0 0 1 4.47 10l5-5A.75.75 0 0 1 10 5.5z" />
920          </svg>
921          Back to top
922        </button>
923      </div>
924    </div>
925
926    <!-- Legal line -->
927    <div class="mt-10 border-t border-lightgreen/30 pt-6 flex flex-col items-center gap-2 text-xs text-paleyellow/70 sm:flex-row sm:justify-between">
928      <p>© <span id="saYear"></span> Seeking Agents®. All rights reserved.</p>
929      <p class="text-center sm:text-right">
930        For informational purposes only. We do not provide legal advice. We are not a brokerage.
931      </p>
932    </div>
933  </div>
934</footer>
935
936<script nonce="FkAf0EfEFAm7+QRlfx0bdw==">
937  (function() {
938    const y = document.getElementById('saYear');
939    if (y) y.textContent = new Date().getFullYear();
940
941    const toTop = document.getElementById('backToTop');
942    if (toTop) {
943      toTop.addEventListener('click', () => window.scrollTo({
944        top: 0,
945        behavior: 'smooth'
946      }));
947    }
948  })();
949</script>
949
950
951  <div id="messageModal" class="hidden fixed inset-0 z-[100] flex items-center justify-center" role="dialog" aria-modal="true">
952  <div data-modal-scrim class="absolute inset-0 bg-black/50 transition-opacity"></div>
953  <div data-modal-panel class="relative bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6 transition-all scale-95 opacity-0">
954    
955    <button data-modal-close class="absolute top-3 right-3 text-gray-400 hover:text-gray-600">
956      <i class="fas fa-times"></i>
957    </button>
958
959    <h3 data-modal-title class="text-lg font-semibold text-darkgreen">Message</h3>
960    <div data-modal-body class="mt-3 text-sm text-gray-700"></div>
961
962    <div class="mt-6 flex justify-end gap-3">
963      <button data-modal-cancel class="sa-btn sa-btn-secondary sa-btn-sm hidden">Cancel</button>
964      <button data-modal-ok class="sa-btn sa-btn-primary sa-btn-sm">OK</button>
965    </div>
966  </div>
967</div>
968  <!-- Agent Plan Modal (Tailwind) -->
969<div id="modal-agentPlan" class="fixed inset-0 z-[90] hidden flex items-center justify-center overflow-y-auto" role="dialog" aria-modal="true">
970  <!-- Backdrop -->
971  <div data-modal-scrim class="twm-backdrop inset-0 bg-black/40 opacity-0 transition-opacity duration-200"></div>
972
973  <!-- Centering wrapper (just provides padding) -->
974  <div class="p-4 w-full flex items-center justify-center">
975    <!-- Panel (do the sizing/centering here) -->
976    <div data-modal-panel class="twm-panel relative w-full max-w-5xl lg:max-w-6xl max-h-[92dvh] overflow-hidden
977              rounded-2xl bg-paleyellow shadow-2xl ring-1 ring-lightgreen
978              flex flex-col origin-center scale-95 opacity-0 transition-all duration-200">
979
980      <!-- Header (sticky) -->
981      <div class="sticky top-0 z-10 flex items-center justify-between gap-4
982                  rounded-t-2xl border-b border-lightgreen/60 bg-paleyellow/95 p-4 backdrop-blur">
983        <h5 id="planTitle" class="text-xl sm:text-2xl font-semibold text-darkgreen">Agent Plans</h5>
984        <button data-modal-close class="rounded-full p-2 ring-1 ring-lightgreen hover:bg-lightgreen/20 text-darkgreen" aria-label="Close">
985          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
986            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12" />
987          </svg>
988        </button>
989      </div>
990
991      <!-- BODY (scrolls) -->
992      <div class="flex-1 overflow-y-auto overflow-x-hidden px-5 py-4 space-y-6">
993
994<p class="text-sm text-darkgreen">Your first client opportunity is included, with all of its Buyer and Seller requests. A plan is required to submit offers for another client opportunity. You can use your dashboard and edit your profile without subscribing.</p>
995
996        <!-- Body: DEFAULT FALLBACK PLANS live here; showPlans() can replace them -->
997        <div class="space-y-6">
998          <div class="planmodalcontainer">
999            <div id="plans" class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6 items-stretch">
1000              <!-- BASIC (default) -->
1001              <div id="basicplan" data-placeholder class="plan group flex-col justify-between relative rounded-2xl border border-lightgreen/60 bg-white p-5 text-center" data-plan="Basic">
1002                <div class="promo-text mb-2">
1003                  <h4 class="text-darkgreen/90"><u>Introductory Pricing!!</u></h4>
1004                  <h5 class="text-darkgreen">First Month is FREE</h5>
1005                  <h6 class="text-darkgreen/80">+ 3 Extra Zip Codes &amp; Tokens!</h6>
1006                </div>
1007                <h3 class="text-lg font-semibold text-darkgreen">Basic Plan</h3>
1008                <h5 class="text-2xl font-bold text-mediumgreen mt-1">$2.00/month</h5>
1009                <p class="mt-3 text-sm text-darkgreen/80">
1010                  <u>INCLUDES</u><br>
1011                  <span class="promo-text font-semibold">8</span> <span class="strikethrough line-through">5</span> Zip Codes<br>
1012                  <span class="promo-text font-semibold">8</span> <span class="strikethrough line-through">5</span> Offer Tokens<br>
1013                  Use Code: <span class="promo-text font-semibold">FIRSTFREE</span>
1014                </p>
1015                <p class="mt-3 text-xs text-darkgreen/70">
1016                  <u>Notification Timeframe</u><br>24 hours after offer received
1017                </p>
1018                <p class="text-xs italic text-darkgreen/60">Additional Offer Tokens available for purchase</p>
1019              </div>
1020
1021              <!-- PREMIUM (default) -->
1022              <div id="premiumplan" data-placeholder class="plan group flex-col justify-between relative rounded-2xl border border-lightgreen/60 bg-white p-5 text-center" data-plan="Premium">
1023                <h3 class="text-lg font-semibold text-darkgreen">Premium Plan</h3>
1024                <h5 class="text-2xl font-bold text-mediumgreen mt-1">$50.00/month</h5>
1025                <p class="mt-3 text-sm text-darkgreen/80">
1026                  12 Zip Codes<br>
1027                  15 Offer Tokens
1028                </p>
1029                <p class="mt-3 text-xs text-darkgreen/70">
1030                  <u>Notification Timeframe</u><br>12 hours after offer received
1031                </p>
1032                <p class="text-xs italic text-darkgreen/60">Additional Offer Tokens available for purchase</p>
1033                <div class="overlay absolute inset-0 grid place-items-center rounded-2xl bg-white/20 backdrop-blur-[1px] backdrop-saturate-150 pointer-events-none">
1034                  <span class="message rounded-md bg-darkgreen/90 px-3 py-1.5 text-paleyellow text-sm font-medium shadow-md">
1035                    Coming Soon
1036                  </span>
1037                </div>
1038              </div>
1039
1040              <!-- PRO (default) -->
1041              <div id="proplan" data-placeholder class="plan group flex-col justify-between relative rounded-2xl border border-lightgreen/60 bg-white p-5 text-center" data-plan="Pro">
1042                <h3 class="text-lg font-semibold text-darkgreen">Pro Plan</h3>
1043                <h5 class="text-2xl font-bold text-mediumgreen mt-1">$75.00/month</h5>
1044                <p class="mt-3 text-sm text-darkgreen/80">
1045                  <u>INCLUDES</u><br>
1046                  25 Zip Codes<br>
1047                  25 Offer Tokens
1048                </p>
1049                <p class="mt-3 text-xs text-darkgreen/70">
1050                  <u>Notification Timeframe</u><br>1 hour after offer received
1051                </p>
1052                <p class="text-xs italic text-darkgreen/60">Additional Offer Tokens available for purchase</p>
1053                <div class="overlay absolute inset-0 grid place-items-center rounded-2xl bg-white/20 backdrop-blur-[1px] backdrop-saturate-150 pointer-events-none">
1054                  <span class="message rounded-md bg-darkgreen/85 px-2.5 py-1 text-paleyellow text-sm">Coming Soon</span>
1055                </div>
1056              </div>
1057            </div>
1058          </div>
1059
1060          <!-- Primary CTA row (keep IDs) -->
1061          <!-- <div class="mt-6 flex items-center justify-center">
1062            <a id="agentPlanSignupButton" href="/agent-register" class="sa-btn sa-btn-primary bg-mediumgreen hover:bg-darkgreen">Sign Up Now</a>
1063          </div> -->
1064        </div>
1065      </div>
1066
1067      <!-- FOOTER -->
1068      <div class="border-t border-lightgreen/60 px-5 py-2 rounded-b-2xl">
1069        <h5 class="mb-3 text-xs sm:text-sm text-darkgreen/80">
1070          <i>NOTE: You will be redirected to a secure Stripe® payment page to complete your subscription.</i>
1071        </h5>
1072        <p class="mb-3 text-xs sm:text-sm text-darkgreen/80">
1073          Agent subscriptions are governed by the <a href="/agent-terms" target="_blank" rel="noopener" class="underline hover:text-orange">Agent Service Agreement</a> and <a href="/privacy" target="_blank" rel="noopener" class="underline hover:text-orange">Privacy Policy</a>.
1074        </p>
1075
1076        <!-- Primary CTA for logged-out visitors (keep if you want the link) -->
1077
1078        <!-- Loading hint during Stripe redirect -->
1079        <div id="loadingMessage" class="hidden text-center text-sm text-darkgreen mt-4">
1080          Redirecting to Stripe...
1081        </div>
1082
1083        <!-- ACTION ROW (Buttons your old flow depended on) -->
1084        <div id="agentPlanActionRow" class="mt-6 flex flex-col sm:flex-row sm:justify-center sm:items-center gap-3 text-center">
1085          <button id="agentPlanSignupButton" class="sa-btn sa-btn-primary sa-btn-cta">
1086            Sign Up Now
1087          </button>
1088
1089          <button id="confirmBtn" class="sa-btn sa-btn-primary" disabled>
1090            Subscribe
1091          </button>
1092
1093          <button id="planLogout" class="sa-btn sa-btn-secondary hidden">
1094            Cancel &amp; Logout
1095          </button>
1096
1097          <button id="planUnsubscribe" class="sa-btn sa-btn-primary" disabled>
1098            Unsubscribe
1099          </button>
1100          <button data-modal-close id="cancelPlanModal" class="sa-btn sa-btn-secondary">Cancel</button>
1101        </div>
1102      </div>
1103    </div>
1104  </div>
1105</div>
1106
1107  <!-- Tailwind Buyers & Sellers Modal (Cardified) -->
1108<div id="modal-userPlan" class="fixed inset-0 z-[70] hidden" role="dialog" aria-modal="true" aria-labelledby="userPlanTitle">
1109  <!-- Backdrop -->
1110  <div data-modal-scrim class="twm-backdrop absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-200"></div>
1111
1112  <!-- Center wrapper -->
1113  <div class="absolute inset-0 flex items-center justify-center p-3 sm:p-5">
1114    <!-- Panel -->
1115    <div data-modal-panel class="twm-panel w-full max-w-sm origin-center opacity-0 scale-95 transition-all duration-200 ease-out">
1116
1117      <!-- Card shell -->
1118      <div class="rounded-2xl bg-paleyellow/95 ring-1 ring-lightgreen shadow-card backdrop-blur-md overflow-hidden">
1119        <!-- Header -->
1120        <div class="flex items-center justify-between gap-3 px-4 py-3 sm:px-5 sm:py-4 border-b border-lightgreen/60">
1121          <div class="flex items-center gap-2">
1122            <!-- tiny brand icon -->
1123            <svg class="h-5 w-5 text-mediumgreen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
1124              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6l7 4-7 4-7-4 7-4zM5 14l7 4 7-4" />
1125            </svg>
1126            <h2 id="userPlanTitle" class="text-lg sm:text-xl font-semibold text-darkgreen">
1127              Buyers &amp; Sellers Plan
1128            </h2>
1129          </div>
1130
1131          <button type="button" class="shrink-0 rounded-full p-1.5 
1131sm:p-2 ring-1 ring-lightgreen text-darkgreen hover:bg-lightgreen/20" data-modal-close aria-label="Close">
1132            <svg class="h-4 w-4 sm:h-5 sm:w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
1133              <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
1134            </svg>
1135          </button>
1136        </div>
1137
1138        <!-- Body -->
1139        <div class="px-4 py-4 sm:px-5 sm:py-5 text-center space-y-4">
1140          <!-- Plan card (keeps your existing IDs/classes) -->
1141          <div class="planmodalcontainer cursor-default">
1142            <div class="grid">
1143              <div class="plan relative rounded-xl bg-white/85 ring-1 ring-lightgreen shadow-card px-4 py-4" data-plan="Basic">
1144                <span class="absolute -top-2 left-1/2 -translate-x-1/2 inline-flex items-center gap-1 rounded-full
1145                              bg-orange/90 text-darkgreen px-2 py-0.5 text-[11px] font-semibold ring-1 ring-lightgreen shadow">
1146                  FREE
1147                </span>
1148
1149                <h3 class="mt-1 text-base font-semibold text-darkgreen">Seeking Agents®</h3>
1150                <p class="mt-1 text-2xl font-bold text-mediumgreen tracking-tight">No Cost</p>
1151
1152                <ul class="mt-3 text-left space-y-2 text-sm text-darkgreen/90">
1153                  <li class="flex items-start gap-2">
1154                    <svg class="h-4 w-4 mt-0.5 text-mediumgreen" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
1155                      <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.42 0l-3.2-3.2a1 1 0 111.42-1.42l2.49 2.49 6.49-6.49a1 1 0 011.42 0z" clip-rule="evenodd" />
1156                    </svg>
1157                    Free for Buyers &amp; Sellers — no hidden fees.
1158                  </li>
1159                  <li class="flex items-start gap-2">
1160                    <svg class="h-4 w-4 mt-0.5 text-mediumgreen" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
1161                      <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.42 0l-3.2-3.2a1 1 0 111.42-1.42l2.49 2.49 6.49-6.49a1 1 0 011.42 0z" clip-rule="evenodd" />
1162                    </svg>
1163                    Compare licensed agents &amp; offers transparently.
1164                  </li>
1165                  <li class="flex items-start gap-2">
1166                    <svg class="h-4 w-4 mt-0.5 text-mediumgreen" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
1167                      <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.42 0l-3.2-3.2a1 1 0 111.42-1.42l2.49 2.49 6.49-6.49a1 1 0 011.42 0z" clip-rule="evenodd" />
1168                    </svg>
1169                    Keep your privacy — we never sell your info.
1170                  </li>
1171                </ul>
1172
1173                <p class="mt-3 text-xs text-darkgreen/60 italic">
1174                  Privacy Assured • Transparent • No gimmicks
1175                </p>
1176              </div>
1177            </div>
1178          </div>
1179
1180          <!-- CTA -->
1181          <a href="/user-register" id="userPlanSignupButton" class="sa-btn sa-btn-primary bg-mediumgreen hover:bg-darkgreen text-paleyellow w-full max-w-[200px] mx-auto block">
1182            Sign Up Now
1183          </a>
1184        </div>
1185      </div>
1186      <!-- /card shell -->
1187
1188    </div>
1189  </div>
1190</div>
1191  
1192<!-- Newsletter Modal (Tailwind, no Bootstrap deps) -->
1193<div id="newsletterModal" class="fixed inset-0 z-[1000] hidden items-center justify-center" role="dialog" aria-modal="true" aria-labelledby="newsletterTitle">
1194
1195  <!-- backdrop -->
1196  <div class="fixed inset-0 bg-black/50 backdrop-blur-sm opacity-0 transition-opacity duration-200" data-modal-scrim></div>
1197
1198  <!-- panel -->
1199  <div class="relative mx-4 w-full max-w-md rounded-2xl bg-paleyellow text-darkgreen shadow-xl ring-1 ring-lightgreen
1200              opacity-0 scale-95 transition-transform duration-200" data-modal-panel>
1201    <!-- header -->
1202    <div class="flex items-center justify-between px-5 py-4 border-b border-lightgreen/40">
1203      <h2 id="newsletterTitle" class="text-lg font-semibold">Subscribe to our Newsletter</h2>
1204      <button id="close" class="p-1 text-darkgreen hover:text-orange" aria-label="Close" data-modal-close="newsletterModal">✕</button>
1205    </div>
1206
1207    <!-- body -->
1208    <div class="px-5 py-6">
1209      <div class="mb-3 inline-flex items-center rounded-full bg-lightgreen/25 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-darkgreen ring-1 ring-lightgreen/40">
1210        Free Resource
1211      </div>
1212
1213      <p id="newsletterSubtitle" class="text-sm text-darkgreen/80 mb-3 leading-6">
1214        Get weekly tips on buying &amp; selling, market updates, and ways to save.
1215      </p>
1216
1217      <ul id="newsletterBenefits" class="mb-4 space-y-1.5 text-sm text-darkgreen/85">
1218        <li class="flex gap-2"><span class="font-semibold text-orange">✓</span><span>Get a practical real estate resource</span></li>
1219        <li class="flex gap-2"><span class="font-semibold text-orange">✓</span><span>Understand the next steps with more confidence</span></li>
1220        <li class="flex gap-2"><span class="font-semibold text-orange">✓</span><span>Compare agent options when you are ready</span></li>
1221      </ul>
1222
1223      <p id="newsletterTrustLine" class="mb-4 border-l-4 border-lightgreen pl-3 text-sm text-darkgreen/70 italic">
1224        No pressure. No obligation. Just a helpful resource.
1225      </p>
1226
1227      <!-- keep these IDs to match standardscripts.js -->
1228      <form id="newsletter-group" class="space-y-3">
1229        <input type="hidden" id="newsletterContext" name="signupContext" value="general">
1230        <input type="hidden" id="newsletterSignupPage" name="signupPage" value="">
1231        <label for="newsletterEmail" class="block text-sm font-medium">Email address</label>
1232        <!-- Make this the first focusable element so showModal() focu
1232ses it -->
1233        <input id="newsletterEmail" type="email" inputmode="email" autocomplete="email" class="w-full rounded-xl ring-1 ring-lightgreen bg-white px-3 py-2.5
1234                      placeholder:text-darkgreen/40 focus:outline-none focus:ring-2 focus:ring-mediumgreen" placeholder="[email protected]">
1235
1236        <p id="emailErrorMessage" class="text-sm text-red-600 min-h-[1.25rem]"></p>
1237
1238        <div class="flex items-center justify-end gap-2 pt-2">
1239          <button type="button" id="nothanks" class="rounded-xl px-4 py-2 ring-1 ring-lightgreen text-darkgreen hover:bg-mediumgreen/60">
1240            No thanks
1241          </button>
1242          <button type="submit" id="newsletter-button" class="rounded-xl bg-orange px-4 py-2 text-paleyellow font-semibold hover:bg-mediumgreen/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange">
1243            Sign Me Up
1244          </button>
1245        </div>
1246      </form>
1247
1248      <p id="newsletterPrivacyText" class="mt-4 text-xs text-darkgreen/60">
1249        We respect your privacy. We’ll send the resource and occasional real estate tips. Unsubscribe anytime. See our <a href="/privacy" class="underline hover:text-orange">Privacy Policy</a>.
1250      </p>
1251    </div>
1252  </div>
1253</div>
1254
1255
1256
1257  <!-- Subordinate legal navigation modal retained for shared template compatibility. -->
1258<div id="modal-terms"
1259     class="fixed inset-0 z-[1000] hidden flex items-center justify-center"
1260     role="dialog" aria-modal="true" aria-labelledby="termsTitle">
1261  <div data-modal-scrim
1262       class="fixed inset-0 bg-black/50 backdrop-blur-sm opacity-0 transition-opacity duration-200"></div>
1263
1264  <div data-modal-panel
1265       class="relative mx-4 w-full max-w-xl rounded-2xl bg-paleyellow text-darkgreen shadow-xl ring-1 ring-lightgreen opacity-0 scale-95 transition-all duration-200">
1266    <div class="flex items-center justify-between px-5 py-4 border-b border-lightgreen/40">
1267      <h2 id="termsTitle" class="text-lg font-semibold">Legal documents</h2>
1268      <button type="button"
1269              aria-label="Close"
1270              data-modal-close
1271              class="rounded-xl px-3 py-2 ring-1 ring-lightgreen hover:bg-paleyellow/60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
1272        ×
1273      </button>
1274    </div>
1275
1276    <div class="px-5 py-5">
1277      <p class="mb-4">Review the authoritative Seeking Agents legal documents:</p>
1278      <ul class="space-y-3">
1279        <li><a href="/privacy" class="underline hover:text-orange">Privacy Policy</a></li>
1280        <li><a href="/terms" class="underline hover:text-orange">User Service Agreement</a></li>
1281        <li><a href="/agent-terms" class="underline hover:text-orange">Agent Service Agreement</a></li>
1282      </ul>
1283    </div>
1284  </div>
1285</div>
1286
1287  <!-- Modal: About teaser. The authoritative company description lives at /about. -->
1288<div id="modal-about" class="fixed inset-0 z-[80] hidden" role="dialog" aria-modal="true" aria-labelledby="aboutTitle">
1289  <div class="twm-backdrop absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-200"></div>
1290  <div class="absolute inset-0 flex items-center justify-center p-3 sm:p-4">
1291    <div class="twm-panel relative w-full max-w-xl origin-center rounded-2xl bg-paleyellow opacity-0 shadow-2xl ring-1 ring-lightgreen transition-all duration-200 scale-95">
1292      <div class="flex items-center justify-between gap-3 border-b border-lightgreen/60 px-4 py-3 sm:px-5 sm:py-4">
1293        <h2 id="aboutTitle" class="text-lg font-semibold text-darkgreen sm:text-xl">About Seeking Agents®</h2>
1294        <button type="button" data-modal-close class="rounded-full p-2 text-darkgreen ring-1 ring-lightgreen hover:bg-lightgreen/20" aria-label="Close">✕</button>
1295      </div>
1296      <div class="space-y-4 px-4 py-5 text-darkgreen/90 sm:px-6 sm:py-6">
1297        <p>Seeking Agents is an independent platform that helps buyers and sellers compare licensed real estate agents, services, pricing, and fit before choosing representation.</p>
1298        <p>Learn how the platform works, who it serves, and how consumers remain in control of each connection.</p>
1299        <div class="flex flex-col gap-2 sm:flex-row">
1300          <a href="/about" class="inline-flex justify-center rounded-xl bg-mediumgreen px-5 py-2.5 font-semibold text-paleyellow hover:bg-darkgreen">Read About Seeking Agents</a>
1301          <a href="/compare-real-estate-agents" class="inline-flex justify-center rounded-xl bg-white px-5 py-2.5 font-semibold ring-1 ring-lightgreen hover:bg-paleyellow/60">Compare Agents</a>
1302        </div>
1303      </div>
1304    </div>
1305  </div>
1306</div>
1307
1308
1309  
1309<script src="/js/env_type.js" nonce="FkAf0EfEFAm7+QRlfx0bdw=="></script>
1309
1310  
1310<script defer src="/js/ui/twmodal.js" nonce="FkAf0EfEFAm7+QRlfx0bdw=="></script>
1310
1311  
1311<script defer src="/js/ui/nav.js" nonce="FkAf0EfEFAm7+QRlfx0bdw=="></script>
1311
1312
1313  <!-- 
1313<script type="module" src="/js/dal/registerDAL.js" nonce="FkAf0EfEFAm7+QRlfx0bdw=="></script>
1313 -->
1314  
1314<script type="module" src="/js/features/plans.js" nonce="FkAf0EfEFAm7+QRlfx0bdw=="></script>
1314
1315  
1315<script type="module" src="/js/features/newsletter.js" nonce="FkAf0EfEFAm7+QRlfx0bdw=="></script>
1315
1316  <!-- 
1316<script src="/js/sendEmail.js" nonce="FkAf0EfEFAm7+QRlfx0bdw=="></script>
1316 -->
1317  
1317<script src="/js/standardscripts.js" nonce="FkAf0EfEFAm7+QRlfx0bdw=="></script>
1317
1318  
1318<script src="/js/real-estate-commission-calculator.js" nonce="FkAf0EfEFAm7+QRlfx0bdw=="></script>
1318
1319
1320</body>
1321
1322</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.